/* =============================================================
   TEST PAGE STYLES
   Layout for the primary emotional regulation test. The page
   renders one "step" at a time (5 scenarios per step, 6 steps
   total) — all driven from a single HTML file by test.js.
   ============================================================= */


/* -------------------------------------------------------------
   PAGE FRAME
   The header sits below the global site nav and shows a progress
   bar plus a "Page X of 6" label.
   ------------------------------------------------------------- */
.test {
  padding: var(--space-lg) 0 var(--space-xl);
}

.test__intro {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.test__intro h1 {
  font-size: var(--text-h2);
  margin-bottom: var(--space-sm);
}

.test__intro p {
  color: var(--color-text-muted);
  max-width: 640px;
  margin: 0 auto;
}

/* Progress bar: a thin track with a coral fill that grows as the
   user advances through pages. */
.test__progress {
  max-width: 640px;
  margin: 0 auto var(--space-md);
}

.test__progress-label {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-small);
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
}

.test__progress-track {
  width: 100%;
  height: 8px;
  background: var(--color-border);
  border-radius: 999px;
  overflow: hidden;
}

.test__progress-fill {
  height: 100%;
  background: var(--color-coral);
  border-radius: 999px;
  transition: width var(--transition);
}


/* -------------------------------------------------------------
   SCENARIO CARDS
   Each card has the scenario sentence and two response buttons.
   ------------------------------------------------------------- */
.scenario {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

.scenario__number {
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
}

.scenario__text {
  font-size: var(--text-h4);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-md);
  line-height: 1.4;
}


/* -------------------------------------------------------------
   RESPONSE BUTTONS
   Two side-by-side buttons (stack on narrow screens). Secondary
   tests show the emotion word in bold with three example words
   in a lighter weight below (.response-btn__primary +
   .response-btn__examples). The primary test hides the emotion
   word entirely and shows only the example words
   (.response-btn__words) — see the comment in test.js for why.
   The selected state gets a colored border (using the matching
   emotion pastel) plus a subtle background tint.
   ------------------------------------------------------------- */
.scenario__options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

@media (max-width: 600px) {
  .scenario__options {
    grid-template-columns: 1fr;   /* Stack on mobile */
  }
}

.response-btn {
  position: relative;
  background: var(--color-background);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  font-family: var(--font-family);
  font-size: var(--text-body);
  color: var(--color-text);
  cursor: pointer;
  transition: border-color var(--transition), background-color var(--transition), transform var(--transition);
}

.response-btn:hover {
  border-color: var(--color-steel-blue);
  background: var(--color-surface);
}

.response-btn:focus-visible {
  outline: 3px solid var(--color-steel-blue);
  outline-offset: 2px;
}

.response-btn__primary {
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-h4);
  margin-bottom: 4px;
  /* Each response-btn gets an inline style setting --emotion-color
     so the primary word can pick up the emotion's pastel hue. */
  color: var(--color-text);
}

.response-btn__examples {
  font-size: var(--text-small);
  font-weight: var(--font-weight-light);
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* Primary test: the example words ARE the option (no headline
   emotion word above them), so they get body-size text in the
   normal ink color rather than the small muted treatment. */
.response-btn__words {
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  line-height: 1.5;
}

/* Keeps the last example word and the "?" trigger on the same
   line when the word list wraps (test.js wraps them together). */
.response-btn__nowrap {
  white-space: nowrap;
}

/* Selected state: tinted background, colored border.
   The --emotion-color custom property is set inline by test.js
   so each emotion uses its own pastel for the background. The
   border color and width can be overridden independently via
   --emotion-border-color and --emotion-border-width — the primary
   test uses this to render a thicker, deep-purple border for
   accessibility while keeping the pastel anxiety fill. Secondary
   tests don't set these, so they fall back to the original
   per-emotion pastel border at 2px. */
.response-btn.is-selected {
  border-color: var(--emotion-border-color, var(--emotion-color, var(--color-coral)));
  background: var(--emotion-color, var(--color-coral-pastel));
  border-width: var(--emotion-border-width, 2px);
  /* Reclaim the extra border width from the padding so the outer
     dimensions of the button don't change between selected and
     unselected — otherwise the scenario card visibly shifts the
     first time the user clicks an option. Math: base padding minus
     (border-width − 2px). Secondary tests keep border-width: 2px
     so this evaluates to the original padding for them. */
  padding: calc(var(--space-sm) - (var(--emotion-border-width, 2px) - 2px))
           calc(var(--space-md) - (var(--emotion-border-width, 2px) - 2px));
}

.response-btn.is-selected .response-btn__examples {
  color: var(--color-text);   /* Slightly darker than muted, for readability over the tint */
}


/* -------------------------------------------------------------
   NAVIGATION FOOTER (Next / View Results)
   Sits at the bottom of each page-of-five. Disabled until all
   five scenarios on the page have a response selected.
   ------------------------------------------------------------- */
.test__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.test__footer-hint {
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

/* The advance button uses .btn .btn-primary from global.css, but
   adds a disabled state for when the page isn't complete. */
.test__advance:disabled,
.test__advance[aria-disabled="true"] {
  background: var(--color-border);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.test__advance:disabled:hover,
.test__advance[aria-disabled="true"]:hover {
  background: var(--color-border);
  color: var(--color-text-muted);
}


/* -------------------------------------------------------------
   STEP TRANSITIONS
   When the user clicks Next, the current step fades out and the
   next one fades in. Plain CSS opacity transitions — no library.
   ------------------------------------------------------------- */
.test__step {
  opacity: 1;
  transition: opacity 0.2s ease;
}

.test__step.is-leaving {
  opacity: 0;
  pointer-events: none;
}


/* -------------------------------------------------------------
   DEFINITION TRIGGER ("?" next to each response label)
   A small circular badge that sits inline with the primary
   emotion word inside .response-btn__primary. Tapping it opens
   the centered popup defined below (.def-popup). Behavior is
   wired up in assets/js/test-definition-popup.js.

   The trigger is rendered as a <span role="button"> inside the
   outer response <button>. Browsers handle the nested-button
   semantics fine; we use a span with role="button" rather than
   a real <button> to keep the HTML structurally valid.
   ------------------------------------------------------------- */
.def-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: 6px;
  vertical-align: -3px;       /* Optical alignment with the larger label text */
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 14px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition: border-color var(--transition),
              background-color var(--transition),
              color var(--transition);
}

.def-trigger:hover {
  border-color: var(--color-steel-blue);
  background: var(--color-background);
  color: var(--color-text);
}

.def-trigger:focus-visible {
  outline: 2px solid var(--color-steel-blue);
  outline-offset: 2px;
}

/* When the parent button is selected, the button background turns
   into the emotion's pastel — switch the trigger to a white
   ground so the "?" stays legible. */
.response-btn.is-selected .def-trigger {
  background: var(--color-background);
}


/* -------------------------------------------------------------
   DEFINITION POPUP
   A centered modal that shows the definition for the tapped
   emotion word. Built once on page load by
   test-definition-popup.js and reused for every open.

   Layered with z-index: 1000 so it floats above every page
   element. The backdrop dims the rest of the page and is itself
   tappable (closes the popup). The panel intercepts clicks so
   tapping the body of the popup does NOT close it.
   ------------------------------------------------------------- */
.def-popup[hidden] {
  display: none;
}

.def-popup {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}

.def-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

.def-popup__panel {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: var(--color-background);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  padding-top: calc(var(--space-md) + 8px);   /* Extra room above the heading so it clears the "x" */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.def-popup__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  font-family: var(--font-family);
  font-size: 24px;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition), color var(--transition);
}

.def-popup__close:hover {
  background: var(--color-surface);
  color: var(--color-text);
}

.def-popup__close:focus-visible {
  outline: 2px solid var(--color-steel-blue);
  outline-offset: 2px;
}

.def-popup__word {
  font-size: var(--text-h4);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0 0 var(--space-xs);
  padding-right: var(--space-lg);   /* Keeps the heading clear of the "x" */
}

.def-popup__definition {
  font-size: var(--text-body);
  font-weight: var(--font-weight-light);
  line-height: 1.5;
  color: var(--color-text);
  margin: 0;
}

/* Primary-test "flavors of X" popups: the heading would only
   repeat the emotion already named in the sentence, so it's
   hidden (it still labels the dialog for screen readers via
   aria-labelledby). The definition inherits the heading's job of
   steering clear of the "x" close button, so it takes over the
   right padding. */
.def-popup--no-word .def-popup__word {
  display: none;
}

.def-popup--no-word .def-popup__definition {
  padding-right: var(--space-lg);
}