/* ============================================================================
   AOA TEST CENTER — CERT PICKER (screen 02)
   Screen-level composition ONLY. Every color, font, radius, shadow, and motion
   value is inherited from test-center-system.css. No new tokens are introduced
   here — only layout and a handful of patterns genuinely new to this screen
   (the cert-tile grid, the lock state, the mode segment, the access sheet).
   ========================================================================== */

/* The doorway is calm and white — no card bounding box around the whole page. */
body { background: var(--surface); }

/* Session bar wordmark lockup is inherited verbatim; this screen just keeps the
   right side quiet (a single discreet help affordance, reusing .btn-icon). */
.session-bar { position: sticky; top: 0; z-index: 20; }

/* ----------------------------------------------------------------------------
   PAGE SHELL
   -------------------------------------------------------------------------- */
.picker {
  max-width: var(--page-max, 1100px);
  margin: 0 auto;
  /* Top padding tightened to match the other screens now that the shared Approach
     Bar sits above (cert-picker promoted to a 'full' frame — Chris, header consistency). */
  padding: clamp(20px, 4vw, 32px) clamp(16px, 4vw, 32px) 160px;
}

/* ── Title block — eyebrow → heading → subhead, inherited type styles ── */
.picker__head { margin-bottom: clamp(24px, 4vw, 40px); max-width: 720px; }
.picker__eyebrow { margin-bottom: var(--s-3); }
.picker__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);
}
.picker__subhead {
  margin-top: var(--s-4);
  font-size: clamp(1rem, 1.6vw, 1.12rem);
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}

/* ----------------------------------------------------------------------------
   CERT TILE GRID — 7 tiles, always all visible. 4 / 2 / 1 across.
   -------------------------------------------------------------------------- */
.cert-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols-desktop, 4), minmax(0, 1fr));
  gap: var(--s-5);
}
@media (max-width: 1080px) { .cert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .cert-grid { grid-template-columns: 1fr; } }

/* Each tile reuses the inherited card / border / focus-ring treatment and the
   .answer selection language (orange border + glow + left rail). */
.cert-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-height: 168px;
  padding: var(--s-5) var(--s-5) var(--s-4);
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  overflow: hidden;
  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);
}
/* The selection / state left-rail — identical mechanism to .answer::before. */
.cert-tile::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: transparent; transition: background var(--brief) var(--ease-calm);
}

/* Hover (desktop only, unlocked only) — inherited border + orange-soft tint. */
@media (hover: hover) {
  .cert-tile.is-unlocked:hover {
    border-color: var(--orange);
    background: var(--orange-soft);
    transform: translateY(-2px);
  }
}

/* Selected — exactly one tile reads as chosen. */
.cert-tile.is-selected {
  border-color: var(--orange);
  background: var(--orange-soft);
  box-shadow: var(--focus-ring);
}
.cert-tile.is-selected::before { background: var(--orange); }
.cert-tile.is-selected:hover { transform: none; }

/* ── Tile internals ── */
.cert-tile__chip {
  position: absolute; top: var(--s-4); right: var(--s-4);
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 9px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  font-family: var(--font-mono); font-weight: 500; font-size: 0.62rem;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted);
  white-space: nowrap;
}
.cert-tile__chip svg { flex: none; }
.cert-tile.is-unlocked .cert-tile__chip {
  color: var(--success);
  border-color: rgba(44,122,75,0.35);
  background: var(--success-soft);
}

.cert-tile__name {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.16rem; line-height: 1.12; letter-spacing: 0.005em;
  color: var(--ink);
  padding-right: 78px;        /* clear the chip */
  text-wrap: balance;
}
.cert-tile__code {
  align-self: flex-start;
  font-family: var(--font-mono); font-weight: 500; font-size: 0.68rem;
  letter-spacing: 0.12em; color: var(--muted);
  padding: 2px 7px; border-radius: var(--r-sm);
  background: var(--paper); border: 1px solid var(--line);
}
.cert-tile__desc {
  margin-top: var(--s-1);
  font-size: 0.9rem; line-height: 1.45; color: var(--muted);
  text-wrap: pretty;
}

/* Push the access affordance to the bottom of locked tiles. */
.cert-tile__spacer { flex: 1; }

/* ── LOCKED state — never hidden, never harsher than 0.7 opacity ── */
.cert-tile.is-locked { opacity: 0.7; }
.cert-tile.is-locked .cert-tile__name { color: var(--body-text); }
.cert-tile__access {
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin-top: var(--s-3);
  font-family: var(--font-display); font-weight: 600; font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--orange-text); /* text on white → AA role */
}
.cert-tile__access svg { transition: transform var(--brief) var(--ease-decisive); }
@media (hover: hover) {
  .cert-tile.is-locked:hover { opacity: 1; border-color: var(--orange); }
  .cert-tile.is-locked:hover .cert-tile__access svg { transform: translateX(3px); }
}
.cert-tile__lockicon { color: var(--muted); }

/* ----------------------------------------------------------------------------
   CONTROLS — mode segment + primary CTA. Sticky-bottom on mobile.
   -------------------------------------------------------------------------- */
.picker__controls {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--s-6);
  margin-top: clamp(28px, 4vw, 44px);
}

/* Mode pills — reuse the confidence-button pill metrics & left-rail idea.
   role="tablist"; the active mode gets the orange selection treatment. */
.mode-segment { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.mode-pill {
  display: inline-flex; align-items: center; gap: var(--s-3);
  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: 0.92rem;
  letter-spacing: 0.04em; color: var(--ink); cursor: pointer;
  transition: background var(--brief) var(--ease-calm),
              border-color var(--brief) var(--ease-calm),
              box-shadow var(--brief) var(--ease-calm);
}
.mode-pill__count {
  font-family: var(--font-mono); font-weight: 500; font-size: 0.72rem;
  letter-spacing: 0.04em; color: var(--muted);
}
@media (hover: hover) {
  .mode-pill:hover { background: var(--orange-soft); border-left-color: var(--orange); }
}
.mode-pill[aria-selected="true"] {
  border-color: var(--orange);
  border-left-color: var(--orange);
  background: var(--orange-soft);
  box-shadow: var(--focus-ring);
}
.mode-pill[aria-selected="true"] .mode-pill__count { color: var(--orange-text); } /* count is text on tint → AA role */

/* Primary CTA — inherited .btn-primary, sized ~360px and centered on desktop. */
.picker__cta { display: flex; }
.picker__cta .btn-primary {
  min-width: 300px; justify-content: center;
  opacity: 1;                 /* override the system "hidden when disabled" */
}
.picker__cta .btn-primary[aria-disabled="true"] {
  opacity: 1;
  background: var(--line);
  color: var(--muted);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}
.picker__cta .btn-primary[aria-disabled="true"] svg { display: none; }

/* Mobile: mode pills wrap full-width, CTA sticky-bottom full-width. */
@media (max-width: 640px) {
  .picker__controls {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    margin-top: 0;
    flex-direction: column; align-items: stretch; gap: var(--s-4);
    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);
  }
  .mode-segment { gap: var(--s-2); }
  .mode-pill { flex: 1; justify-content: center; padding: 0 var(--s-3); }
  .picker__cta { width: 100%; }
  .picker__cta .btn-primary { width: 100%; min-width: 0; }
}

/* ----------------------------------------------------------------------------
   EMPTY STATE — zero unlocked certs. Calm, in-voice, never a dead end.
   -------------------------------------------------------------------------- */
.empty-state { display: none; }
.picker[data-empty="true"] .empty-state { display: block; max-width: 560px; }
.picker[data-empty="true"] .cert-grid,
.picker[data-empty="true"] .picker__controls { display: none; }
.empty-state__card {
  border: 1px solid var(--line);
  border-left: 4px solid var(--orange);
  border-radius: var(--r-lg);
  background: var(--paper);
  padding: var(--s-8);
}
.empty-state__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--r-pill);
  border: 1px solid rgba(244,115,33,0.35); background: var(--orange-soft);
  color: var(--orange); margin-bottom: var(--s-5);
}
.empty-state__title {
  font-family: var(--font-display); font-weight: 600; font-size: 1.3rem;
  color: var(--ink); margin-bottom: var(--s-3);
}
.empty-state__body { color: var(--body-text); line-height: 1.6; margin-bottom: var(--s-6); }

/* ----------------------------------------------------------------------------
   ACCESS SHEET — reuses .overlay + .overlay__panel (inherited surface/voice).
   The hard external link is the action of last resort, behind one explicit step.
   -------------------------------------------------------------------------- */
.sheet__code {
  font-family: var(--font-mono); font-weight: 500; font-size: 0.72rem;
  letter-spacing: 0.12em; color: var(--orange-text); /* text on white → AA role */
  text-transform: uppercase; margin-bottom: var(--s-2);
}
.sheet__title {
  font-family: var(--font-display); font-weight: 600; font-size: 1.4rem;
  line-height: 1.12; color: var(--ink);
}
.sheet__lock {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--paper); color: var(--muted);
  flex: none;
}
.sheet__lead { display: flex; align-items: flex-start; gap: var(--s-4); }
.sheet__body { color: var(--body-text); line-height: 1.6; }
.sheet__body p { margin-top: var(--s-4); }
.sheet__body p:first-child { margin-top: 0; }
.sheet__includes {
  margin: var(--s-5) 0 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: var(--s-4);
}
.sheet__includes li {
  display: flex; align-items: flex-start; gap: var(--s-3);
  font-size: 0.96rem; line-height: 1.45; color: var(--body-text);
}
.sheet__includes svg { flex: none; color: var(--success); margin-top: 2px; }
.sheet__foot {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-5) var(--s-6); border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.sheet__foot .btn-primary { flex: 1; min-width: 220px; justify-content: center; opacity: 1; }
.sheet__cancel {
  border: none; background: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 0.82rem;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
  padding: var(--s-2) var(--s-3);
}
.sheet__cancel:hover { color: var(--ink); }