/* ============================================================================
   AOA TEST CENTER — BUILD YOUR SESSION (screen 03)
   The chooser the learner lands on after picking a certificate + Study on the
   Cert Picker. Screen-level composition ONLY — every color, font, radius,
   shadow, and motion value is inherited from test-center-system.css. The focus
   list and length segment reuse the Cert Picker's selection language verbatim
   (orange border + glow + left rail). No new tokens.
   ========================================================================== */

/* WHITE page on this screen (Chris). The app shell paints the body cream
   (--paper) via a late inline rule, so we raise specificity past a bare `body`
   to win the cascade — scoped to the build screen alone via its .builder main. */
body { background: #ffffff; }
body:has(.builder) { background: #ffffff; }
.session-bar { position: sticky; top: 0; z-index: 20; }

/* Quiet "back to certificates" affordance, sized like the help icon's siblings. */
.bar-back {
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: 34px; padding: 0 var(--s-3);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); color: var(--muted); cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 0.74rem;
  text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none;
  transition: color var(--glance) var(--ease-calm), border-color var(--glance) var(--ease-calm);
}
.bar-back:hover { color: var(--orange-text); border-color: var(--orange); } /* label is text → AA; border keeps brand */
.bar-back svg { transition: transform var(--glance) var(--ease-decisive); }
.bar-back:hover svg { transform: translateX(-3px); }

/* ----------------------------------------------------------------------------
   PAGE SHELL
   -------------------------------------------------------------------------- */
.builder {
  max-width: var(--page-max, 760px);
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px) clamp(16px, 4vw, 32px) 160px;
}

/* ── Title block — cert identity → heading → subhead ── */
.builder__head { margin-bottom: clamp(28px, 4vw, 44px); }
.builder__cert {
  display: inline-flex; align-items: center; gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.builder__code {
  font-family: var(--font-mono); font-weight: 500; font-size: 0.7rem;
  letter-spacing: 0.12em; color: var(--orange-text); /* cert code is text on tint → AA role */
  padding: 3px 8px; border-radius: var(--r-sm);
  background: var(--orange-soft); border: 1px solid rgba(244,115,33,0.35);
  text-transform: uppercase;
}
.builder__certname {
  font-family: var(--font-display); font-weight: 600; font-size: 0.92rem;
  letter-spacing: 0.04em; color: var(--muted); text-transform: uppercase;
}
.builder__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.9rem, 4.4vw, 2.7rem);
  line-height: 1.06; letter-spacing: 0.005em; color: var(--ink);
}
.builder__subhead {
  margin-top: var(--s-4);
  font-size: clamp(1rem, 1.6vw, 1.12rem); line-height: 1.55;
  color: var(--muted); text-wrap: pretty; max-width: 60ch;
}

/* ── Section rhythm ── */
.builder__section { margin-top: clamp(28px, 4vw, 40px); }
.builder__section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-4); margin-bottom: var(--s-4);
}
.builder__section-note { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); }

/* ----------------------------------------------------------------------------
   FOCUS LIST — single-select option rows. Mirrors the .answer / .cert-tile
   selection mechanism: orange border + glow + left rail when chosen.
   -------------------------------------------------------------------------- */
.focus-list { display: flex; flex-direction: column; gap: var(--s-3); }
.focus-option {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: var(--s-4);
  width: 100%; min-height: 64px;
  padding: var(--s-4) var(--s-5);
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: border-color var(--brief) var(--ease-calm),
              background var(--brief) var(--ease-calm),
              box-shadow var(--brief) var(--ease-calm),
              transform var(--tap) var(--ease-decisive);
}
.focus-option::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: transparent; transition: background var(--brief) var(--ease-calm);
}
@media (hover: hover) {
  .focus-option:hover { border-color: var(--orange); background: var(--orange-soft); }
}
.focus-option.is-selected {
  border-color: var(--orange); background: var(--orange-soft);
  box-shadow: var(--focus-ring);
}
.focus-option.is-selected::before { background: var(--orange); }

/* Radio dot — the calm selection indicator on the left. */
.focus-option__dot {
  flex: none;
  width: 22px; height: 22px; border-radius: var(--r-pill);
  border: 1.5px solid var(--line); background: var(--surface);
  position: relative; transition: all var(--brief) var(--ease-calm);
}
.focus-option.is-selected .focus-option__dot { border-color: var(--orange); }
.focus-option__dot::after {
  content: ""; position: absolute; inset: 4px; border-radius: var(--r-pill);
  background: var(--orange); transform: scale(0);
  transition: transform var(--brief) var(--ease-cinematic);
}
.focus-option.is-selected .focus-option__dot::after { transform: scale(1); }

.focus-option__body { flex: 1; min-width: 0; }
.focus-option__name {
  font-family: var(--font-display); font-weight: 600; font-size: 1.06rem;
  letter-spacing: 0.005em; color: var(--ink);
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
}
.focus-option__rec {
  font-family: var(--font-mono); font-weight: 500; font-size: 0.6rem;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--orange-text); /* "RECOMMENDED" is text → AA role */
  padding: 2px 7px; border-radius: var(--r-pill);
  background: var(--orange-soft); border: 1px solid rgba(244,115,33,0.35);
}
.focus-option__desc {
  margin-top: 3px;
  font-size: 0.9rem; line-height: 1.45; color: var(--muted); text-wrap: pretty;
}

/* Trailing count — instrument-style metadata. */
.focus-option__count {
  flex: none; text-align: right;
  font-family: var(--font-mono); font-weight: 500;
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
}
.focus-option__num { font-size: 1.1rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.focus-option__unit { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.focus-option.is-selected .focus-option__num { color: var(--orange-text); } /* count is text → AA role */

/* ----------------------------------------------------------------------------
   SUBJECT PICKER — revealed only when "A single subject" is chosen.
   Chip grid, same orange selection language at chip scale.
   -------------------------------------------------------------------------- */
.subject-picker { display: none; margin-top: var(--s-4); }
.subject-picker.is-open { display: block; animation: callout-lift var(--beat) var(--ease-cinematic) both; }
.subject-picker__label { margin-bottom: var(--s-3); }
.subject-grid { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.subject-chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 40px; padding: 0 var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface);
  font-family: var(--font-body); font-weight: 500; font-size: 0.9rem;
  color: var(--body-text); cursor: pointer;
  transition: border-color var(--glance) var(--ease-calm),
              background var(--glance) var(--ease-calm),
              color var(--glance) var(--ease-calm);
}
.subject-chip__n { font-family: var(--font-mono); font-size: 0.68rem; color: var(--muted); }
@media (hover: hover) { .subject-chip:hover { border-color: var(--orange); background: var(--orange-soft); } }
.subject-chip.is-selected {
  border-color: var(--orange); background: var(--orange-soft); color: var(--ink);
  box-shadow: var(--focus-ring);
}
.subject-chip.is-selected .subject-chip__n { color: var(--orange-text); } /* count is text → AA role */

/* Main subject → its subtopics. The picker groups the chips under their parent
   ACS area so a learner can target precisely (Chris). Quiet ink/muted headings
   keep orange as the single selection accent — the chips are unchanged. */
.subject-group { width: 100%; margin-top: var(--s-4); }
.subject-group:first-child { margin-top: 0; }
.subject-group__head {
  display: flex; align-items: baseline; gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.subject-group__name {
  font-family: var(--font-display); font-weight: 600; font-size: 0.92rem;
  letter-spacing: 0.02em; color: var(--ink);
}
.subject-group__n {
  font-family: var(--font-mono); font-size: 0.66rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.08em;
}

/* ----------------------------------------------------------------------------
   LENGTH SEGMENT — reuses the Cert Picker mode-pill metrics.
   -------------------------------------------------------------------------- */
.length-segment { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.length-pill {
  display: inline-flex; align-items: baseline; gap: var(--s-2);
  min-height: 48px; padding: 0 var(--s-5);
  border: 1px solid var(--line); border-left: 4px solid var(--line);
  border-radius: var(--r-md); background: var(--surface);
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  letter-spacing: 0.02em; color: var(--ink); cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background var(--brief) var(--ease-calm),
              border-color var(--brief) var(--ease-calm),
              box-shadow var(--brief) var(--ease-calm), opacity var(--brief) var(--ease-calm);
}
.length-pill__unit {
  font-family: var(--font-mono); font-weight: 500; font-size: 0.66rem;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted);
}
@media (hover: hover) {
  .length-pill:hover { background: var(--orange-soft); border-left-color: var(--orange); }
}
.length-pill[aria-pressed="true"] {
  border-color: var(--orange); border-left-color: var(--orange);
  background: var(--orange-soft); box-shadow: var(--focus-ring);
}
.length-pill[aria-pressed="true"] .length-pill__unit { color: var(--orange-text); } /* unit word is text → AA role */
.length-pill[hidden] { display: none; }

/* ----------------------------------------------------------------------------
   CONTROLS — primary CTA. Sticky-bottom on mobile, matching the Cert Picker.
   -------------------------------------------------------------------------- */
.builder__controls {
  display: flex; align-items: center; gap: var(--s-5);
  margin-top: clamp(32px, 5vw, 52px);
}
.builder__controls .btn-primary {
  min-width: 320px; justify-content: center; opacity: 1;
}
.builder__controls .btn-primary[aria-disabled="true"] {
  opacity: 1; background: var(--line); color: var(--muted);
  box-shadow: none; cursor: not-allowed; pointer-events: none;
}
.builder__controls .btn-primary[aria-disabled="true"] svg { display: none; }
.builder__hint { font-size: 0.9rem; color: var(--muted); line-height: 1.4; }

@media (max-width: 640px) {
  .builder__controls {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    margin-top: 0; flex-direction: column-reverse; align-items: stretch; gap: var(--s-3);
    padding: var(--s-4) clamp(16px, 4vw, 24px) calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px rgba(22,19,18,0.06);
  }
  .builder__controls .btn-primary { width: 100%; min-width: 0; }
  .builder__hint { text-align: center; }
  /* flex:1 (zero-basis) squeezed all four pills to equal ~25% tracks, clipping a wide
     label like "All 137". Let pills size to content and wrap as whole units instead. */
  .length-pill { flex: 1 1 auto; min-width: max-content; justify-content: center; padding: 0 var(--s-3); }
}