/* ReflectSelf: trainee-facing pages (entry screen, questionnaire form, results). Ported from the original
   standalone audit/styles.css, recoloured to the shared TrainerTech palette (../../assets/style.css,
   loaded first — its :root colour variables and generic body/link/.btn/.notice/.hint rules are reused
   here rather than redefined) but otherwise left as it was: this layout (statement rows, score boxes,
   tooltips, results bars) works well and wasn't asked to be redesigned. */

.reflectself-entry,
.reflectself-form,
.reflectself-results {
    max-width: 720px;
    margin: 24px auto;
    background: #fff;
    padding: 2rem;
    border-radius: 12px;
    border-top: 5px solid var(--blue);
    box-shadow: 0 4px 24px rgba(1, 0, 48, 0.1);
}

/* Padding and top margin matched exactly to the shared .card-panel every other module's own entry screen uses
   (28px 32px, margin 0 auto - the space above the card now comes from body.page's own 4vh padding, same as
   every other module, rather than a fixed 24px margin here on top of that) - not the 2rem/24px this shares
   with .reflectself-form/.reflectself-results, which weren't asked to change. */
.reflectself-entry { max-width: 420px; padding: 28px 32px; margin: 0 auto; }
.reflectself-entry .hint { margin-top: 1.25rem; margin-bottom: 0.5rem; }

/* The card's own horizontal padding, as a variable so the pinned header below (which spans the full card
   width, cancelling this out with a matching negative margin) can stay in step with it, including at the
   mobile breakpoint where it's smaller. */
.reflectself-form { --rf-pad: 2rem; }

/* The organisation's logo, under the questionnaire form or its results (outside the card, not inside): never
   wider than its own size, the page, or 300px. Same placement/size as QuizBack's own single page - this module
   just has two separate <main> blocks to put it under instead of one. */
.org-logo { display: block; margin: 20px auto 20px; max-width: min(100%, 300px); height: auto; }

/* .btn.secondary (Clear answers, Show answers, a digital-copy download...) has no style of its own any more: it is the standard white button with a blue outline, as everywhere else. */
.btn.standalone { margin-top: 1.5rem; }

.instructions { color: #444; margin-bottom: 2rem; }
.instructions :first-child { margin-top: 0; }
.instructions :last-child { margin-bottom: 0; }
.instructions ul, .instructions ol { margin: 0.5em 0; padding-left: 1.4em; }
.instructions li { margin-bottom: 0.2em; }
.privacy-note { font-size: 0.8rem; color: var(--muted); margin-top: 0.75rem; }

/* The pin toggle (top right of the title/instructions): plain by default, a "pressed" border once pinned.
   Reserve room on the right of the title so a long one never runs under the button. */
.rf-sticky-head { position: relative; }
.rf-sticky-head h1 { padding-right: 2.75rem; }
.rf-pin-btn {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.4rem 0.55rem;
  border: 2px solid transparent;
  border-radius: 6px;
  background: none;
  color: var(--blue);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.rf-pin-btn[aria-pressed="true"] { border-color: var(--blue); background: #eaf3fa; }

/* Pinned: a normal sticky header (position: sticky, not fixed) - while the page is scrolled to the top it
   looks exactly like any other part of the card, with no jump between the pinned/unpinned states or as the
   page scrolls. It only takes visual effect once scrolling has actually carried it to the top of the
   viewport, capped at 30% of the window's height with its own scrollbar if the title+instructions don't fit
   - the rest of the page keeps scrolling normally underneath. */
.rf-sticky-head.pinned {
  position: sticky;
  top: 0;
  z-index: 50;
  max-height: 30vh;
  overflow-y: auto;
  background: #fff;
}
/* Only once actually stuck (scrolled to the top - the .stuck class comes from an IntersectionObserver on
   #rf-pin-sentinel, just above it) does it widen to the card's full outer width (cancelling out the card's
   own padding with a matching negative margin, then reapplying it as the header's own so its content stays
   lined up) and gain a bottom edge, so this only ever appears while actively scrolling, never at rest. */
.rf-sticky-head.pinned.stuck {
  margin: 0 calc(-1 * var(--rf-pad));
  padding: 0 var(--rf-pad);
  border-bottom: 1px solid var(--line);
}
/* The pin button's "right: 0" is measured against the header's own padding box, i.e. its outer edge, not the
   inner edge the padding above creates - so without this it would jump out to the card's new, wider border
   edge instead of staying put beside the title text. */
.rf-sticky-head.pinned.stuck .rf-pin-btn { right: var(--rf-pad); }

/* ---------- Questionnaire form ---------- */

.statement { border-top: 1px solid var(--line); padding: 1rem 0 1.75rem; }
.statement:last-of-type { padding-bottom: 0.5rem; }
.statement-text { display: flex; font-weight: 600; margin: 0 0 0.6rem; }
.statement-number { flex-shrink: 0; width: 1.75em; color: var(--muted); font-weight: 600; }

.score-options { display: flex; justify-content: flex-end; gap: 0.5rem; flex-wrap: wrap; }
.score-option { position: relative; display: inline-block; cursor: pointer; }
.score-option input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }

.score-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 2px solid #ccc;
    border-radius: 6px;
    font-size: 1.1rem;
    font-weight: 600;
    background: #fff;
    user-select: none;
    transition: background 0.15s, border-color 0.15s;
}
.score-option input:checked + .score-box { background: var(--score-highlight-color, #90ee90); border-color: var(--score-highlight-color, #90ee90); color: var(--score-highlight-text, #000); }
.score-option input:focus-visible + .score-box { outline: 2px solid var(--teal); outline-offset: 2px; }

/* Delayed hover tooltip for score meanings scraped from the instructions text */
.has-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    background: #333;
    color: #fff;
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: normal;
    white-space: nowrap;
    text-align: center;
    line-height: 1.3;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease 0s;
    z-index: 20;
}
.has-tooltip:hover::after { opacity: 1; transition: opacity 0.15s ease 1s; }

.reflectself-form .btn[type="submit"] { margin-top: 1.5rem; }
/* Pushed well down the page so a trainer can scroll past it and keep the button and demo table off screen */
.randomise-row { margin-top: 10rem; }
#clear-answers { margin-top: 1.5rem; margin-left: 0.75rem; }
.demo-reveal-password { margin-top: 1rem; font-size: 1.4rem; font-weight: 600; }

/* ---------- Results page ---------- */

.reveal-box { display: flex; align-items: center; gap: 0.5rem; margin-top: 1.2rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.reveal-box label { width: 100%; font-size: 0.9rem; color: #555; }
.reveal-box .reveal-error { width: 100%; }
.reveal-box input { width: auto; flex: 1; min-width: 10em; }

.table-scroll { position: relative; overflow-x: auto; }
.results-table { width: 100%; border-collapse: collapse; }
.results-table tr { border-bottom: 1px solid var(--line); }
.results-table td { padding: 1rem 0.5rem; vertical-align: middle; }

/* "Revealed by button" mode: one button overlaid over just the category column (width set in JS, to match
   the browser's own computed column width - category name and the "possible range" line underneath it both),
   as tall as the table so it covers every row's category name (not the scores or bar chart) in one go.
   Styled as a normal .btn.primary, just stretched to fill the overlay. */
.reveal-overlay { position: absolute; top: 0; left: 0; height: 100%; margin: 0; padding: 0; }
.reveal-overlay-btn {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 1.3rem;
  font-weight: 700;
  padding: 0.5rem;
}
.reveal-overlay-hint { display: block; margin-top: 0.3em; font-size: 0.9rem; font-weight: 400; }

.category-cell { font-size: 1.4rem; font-weight: 600; white-space: nowrap; }
.category-name.masked { letter-spacing: 2px; color: #999; }
.range-text { font-size: 0.7rem; color: var(--muted); font-weight: normal; margin-top: 0.15rem; }
.score-cell { font-size: 1.6rem; font-weight: 700; text-align: center; width: 4rem; }

#demo-panel { margin-top: 2rem; padding-top: 1.5rem; border-top: 2px dashed #ccc; }
#demo-table .score-cell { width: auto; white-space: nowrap; padding: 1rem 1.25rem; }

.bar-cell { width: 100%; }
.bar-track { background: #e8e8e8; border-radius: 6px; height: 1.75rem; overflow: hidden; }
.bar-fill { background: var(--blue); height: 100%; border-radius: 6px 0 0 6px; }

.results-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }

.answers-list { margin-top: 1rem; }
.answer-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; border-top: 1px solid var(--line); }
.answer-text { flex: 1; display: flex; }
.answers-list .score-box { flex-shrink: 0; width: 2.5rem; height: 2.5rem; cursor: default; }
.score-box.filled { background: var(--score-highlight-color, #90ee90); border-color: var(--score-highlight-color, #90ee90); color: var(--score-highlight-text, #000); }

/* Small screens */
@media (max-width: 700px) {
    .reflectself-entry, .reflectself-form, .reflectself-results { padding: 1.25rem 1rem; border-radius: 0; margin: 0; }
    .reflectself-form { --rf-pad: 1rem; }
    .score-box { width: 2.35rem; height: 2.35rem; font-size: 1rem; }
    .score-options { gap: 0.35rem; }
    .category-cell { font-size: 1.1rem; white-space: normal; }
    .score-cell { font-size: 1.3rem; width: 3rem; }
    .reveal-overlay-btn { font-size: 1rem; }
    .bar-track { height: 1.4rem; }
}