/* MERI design tokens — matched to Merit America's web rulebook (§08 Design
   system), not the 1.0 prototype's CSS it was ported from.

   Brand: Inter type; Merit Navy #001846 primary (buttons are navy with white
   text, 100px pill radius); Merit Green #2dd7b9 accent; badges sit on ghost
   green (rgba(45,215,185,.11)) with navy text — the rulebook bans color
   tints as badge backgrounds/borders except this ghost wash.

   Deliberate accessibility deviations from the prototype (its own audit
   flagged these): secondary text uses the rulebook's muted navy (#5A6A85,
   5.48:1) instead of #8697ac (2.9:1), and focus rings are navy instead of
   green (1.7:1). Merit Green fails AA as small text on white, so small text
   never uses --green — eyebrow and the hero accent word are navy instead. */

@font-face {
  font-family: "Inter";
  src: url("/assets/InterVariable-884c49a1.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy: #001846;
  --navy-mid: #002a6e;
  --ink-soft: #5a6a85;
  --green: #2dd7b9;
  --ghost-green: rgba(45, 215, 185, .11);
  --yellow: #fdd750; /* admin-only: flagged-field highlight, no rulebook equivalent */
  --off: #f9fafb;
  --line: #dbe2ee;
  --white: #ffffff;
  --error: #a4262c;
  --radius: 20px;
  --radius-pill: 100px;
  --ease: cubic-bezier(.25, .8, .25, 1);
  --page-bottom: 4rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--navy);
  background: var(--off);
  line-height: 1.65;
}

.page { max-width: 720px; margin: 0 auto; padding: 2rem 1rem 4rem; }
body.embedded .page { padding-top: 1rem; }

h1 { font-size: 2rem; line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; margin: 0.25rem 0 0.75rem; }
h2 { font-size: 1.4rem; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 0.5rem; }

/* Chrome */
.topbar { background: var(--white); border-bottom: 1px solid var(--line); }
.topbar-inner { max-width: 720px; margin: 0 auto; padding: 0.75rem 1rem; display: flex; align-items: center; justify-content: space-between; }
.topbar-brand { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--navy); font-weight: 700; letter-spacing: 0.02em; }
/* Small-text floor is 14px (.875rem); these two pill badges are the only
   exceptions, held at 12px (.75rem) per the rulebook's own eyebrow spec. */
.beta-pill { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; background: var(--green); color: var(--navy); padding: 0.1rem 0.5rem; border-radius: var(--radius-pill); }
.topbar-org { color: var(--ink-soft); font-size: 0.9rem; }
.sitefooter { max-width: 720px; margin: 2rem auto 0; padding: 1.5rem 1rem 3rem; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 0.875rem; text-align: center; }
.sitefooter .footnote { max-width: 60ch; margin: 0 auto; }

/* Landing */
.hero { text-align: center; padding: 3rem 0 2rem; }
.hero .accent { color: var(--navy); }
.hero-sub { max-width: 46ch; margin: 0 auto 1.5rem; color: var(--ink-soft); }

/* Mid-page label only — never above a page H1 (rulebook §13 glossary). */
.eyebrow { text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.875rem; font-weight: 700; color: var(--ink-soft); margin: 0; }
.eyebrow::before { content: ""; display: inline-block; width: 18px; height: 2px; background: var(--green); margin-right: 0.5rem; vertical-align: middle; }
.flash-alert { color: var(--error); font-weight: 600; }
.microcopy { color: var(--ink-soft); font-size: 0.875rem; margin-top: 0.75rem; }
.footnote { color: var(--ink-soft); font-size: 0.875rem; }
.step-sub { color: var(--ink-soft); margin-top: 0; }

/* Buttons — navy pills with white text, per brand */
.btn { display: inline-block; border: none; border-radius: var(--radius-pill); padding: 0.8rem 2.2rem; font-family: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; text-decoration: none; transition: background 0.15s var(--ease), transform 0.15s var(--ease), box-shadow 0.15s var(--ease); }
.btn-primary { background: var(--navy); color: var(--white); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 24, 70, 0.25); }
.btn-primary:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.btn-lg { padding: 0.95rem 2.6rem; font-size: 1.1rem; }

/* Gate → hub handoff: a designed, honest loading state (Dorry's note). On
   submit, Turbo swaps the button label ("Building your plan…") and disables it;
   the branded top progress bar covers the redirect + hub navigation on slow
   mobile links, so the handoff reads as intentional rather than a jump cut. */
.turbo-progress-bar {
  height: 3px;
  background: linear-gradient(90deg, var(--green) 0%, var(--navy-mid) 100%);
}
.btn:disabled {
  cursor: progress;
  opacity: 0.9;
  animation: btn-working 1.1s var(--ease) infinite;
}
.link-button:disabled { cursor: progress; opacity: 0.7; }
@keyframes btn-working { 50% { opacity: 0.62; } }
@media (prefers-reduced-motion: reduce) {
  .btn:disabled { animation: none; }
  .btn-primary:hover { transform: none; }
}

/* Links on white: one base rule (navy, weight 600, no underline, underline
   on hover). .btn, .hub-nav-item and .topbar-brand already set their own
   color and text-decoration at higher specificity, so they opt out without
   extra rules; .backlink a is the one deliberately-muted exception, called
   out below. */
a { color: var(--navy); font-weight: 600; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Wizard */
.wizard { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.progress { color: var(--ink-soft); font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.backlink { margin-top: 1rem; }
/* Deliberately muted — opts out of the base link color/weight above. */
.backlink a { color: var(--ink-soft); font-weight: 400; }

.choice-group { border: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.choice-group legend { font-weight: 600; margin-bottom: 0.5rem; padding: 0; }
.choice-card { display: block; border: 1.5px solid var(--line); border-radius: var(--radius); padding: 0.9rem 1rem; cursor: pointer; background: var(--white); transition: border-color 0.15s var(--ease), background 0.15s var(--ease); }
.choice-card input { position: absolute; opacity: 0; }
.choice-card:hover { border-color: var(--navy-mid); }
.choice-card:has(input:checked) { border-color: var(--navy); background: var(--ghost-green); }
.choice-card:has(input:focus-visible) { outline: 3px solid var(--navy); outline-offset: 2px; }
.choice-card-wide { grid-column: 1 / -1; }
.choice-title { display: block; font-weight: 600; }
.choice-desc { display: block; color: var(--ink-soft); font-size: 0.9375rem; margin-top: 0.15rem; }

.pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pill { display: inline-block; cursor: pointer; }
.pill input { position: absolute; opacity: 0; }
.pill span { display: inline-block; border: 1.5px solid var(--line); border-radius: var(--radius-pill); padding: 0.45rem 1rem; font-size: 0.92rem; background: var(--white); transition: border-color 0.15s var(--ease), background 0.15s var(--ease); }
.pill:hover span { border-color: var(--navy-mid); }
.pill:has(input:checked) span { border-color: var(--navy); background: var(--ghost-green); font-weight: 600; }
.pill:has(input:focus-visible) span { outline: 3px solid var(--navy); outline-offset: 2px; }

.field { margin-bottom: 1.25rem; }
.field label { display: block; font-weight: 600; margin-bottom: 0.35rem; }
.field .hint, .hint { color: var(--ink-soft); font-size: 0.875rem; font-weight: 400; }
.text-input { width: 100%; max-width: 24rem; border: 1.5px solid var(--line); border-radius: 8px; padding: 0.6rem 0.8rem; font-family: inherit; font-size: 1rem; color: var(--navy); }
.text-input:focus-visible { outline: 3px solid var(--navy); outline-offset: 1px; }
.field-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin-bottom: 1rem; }

.slider-field input[type="range"] { width: 100%; accent-color: var(--navy); }
.slider-labels { display: flex; justify-content: space-between; color: var(--ink-soft); font-size: 0.875rem; }
.slider-labels output { font-weight: 700; color: var(--navy); font-size: 1.2rem; }

/* Consent checkbox text: the line a visitor agrees to. Full 16px, not a
   sub-floor size, regardless of weight. */
.checkbox-row { display: flex; gap: 0.6rem; align-items: flex-start; margin: 0 0 1.25rem; font-size: 1rem; color: var(--ink-soft); }
.checkbox-row input { margin-top: 0.25rem; accent-color: var(--navy); }

/* A submit button dressed as a link — the gate's skip path posts the form,
   so it can't be an anchor, but it must read as the quiet alternative. */
.link-button { display: inline-flex; align-items: center; min-height: 44px; border: none; background: none; padding: 0; font-family: inherit; font-size: inherit; color: var(--ink-soft); text-decoration: underline; cursor: pointer; }
.link-button:hover { color: var(--navy); }
.link-button:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }

.form-errors { border: 1.5px solid var(--error); border-radius: var(--radius); background: #fdf3f4; color: var(--error); padding: 0.75rem 1rem; margin-bottom: 1.25rem; }
.form-errors ul { margin: 0.25rem 0 0; padding-left: 1.25rem; }

/* 12px exception — see .beta-pill comment above. Ghost green background,
   not a tag tint: the rulebook allows archive tints only as icon washes. */
.badge { display: inline-block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--navy); background: var(--ghost-green); border-radius: var(--radius-pill); padding: 0.1rem 0.5rem; margin-top: 0.25rem; }
.match-banner { background: var(--ghost-green); border-radius: var(--radius); padding: 0.6rem 1rem; }
.quiz-offer { color: var(--ink-soft); font-size: 0.9rem; font-weight: 600; }

/* Hub */
.hub-header { margin-bottom: 1.5rem; }
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1.25rem; }
.wage-state { font-weight: 600; }
.gain-chip { display: inline-block; background: var(--ghost-green); color: var(--navy); font-weight: 700; border-radius: var(--radius-pill); padding: 0.15rem 0.7rem; margin-left: 0.4rem; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.75rem; margin: 1rem 0; }
.stat-row dt { color: var(--ink-soft); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; }
.stat-row dd { margin: 0; font-size: 1.25rem; font-weight: 700; }
.minitrack-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.hub-gate { text-align: center; padding: 4rem 1rem; }

/* Build Your Plan (Path A): AI-generated 90-day roadmap, rendered into a
   Turbo frame. Phases stack; tasks are a plain checklist-style list. */
.plan-phase { margin-top: 1rem; }
.plan-phase h3 { margin: 0 0 0.4rem; font-size: 1rem; }
.plan-tasks { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.35rem; }
.plan-unavailable .btn { margin-top: 0.75rem; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Mobile ergonomics ───────────────────────────────────────────────────
   Additive overrides layered on the desktop stylesheet above. Deliberate
   desktop-visible changes are limited to the 44px tap-target floor on
   buttons and pills and break-word wrapping for pathological strings;
   press feedback is scoped to touch pointers, so mouse rendering is
   otherwise unchanged. Horizontal overflow is fixed at the source
   (overflow-wrap, single-column grids), never masked with an overflow
   clamp. Brand tokens, navy focus rings, the visually-hidden-radio-in-label
   pattern, and --ink-soft contrast all carry through every rule below
   untouched. */

/* Global tap targets (all widths): 44px min touch area for buttons and
   pills; long unbreakable strings wrap instead of forcing the viewport
   wider. */
body { overflow-wrap: break-word; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
.pill span { display: inline-flex; align-items: center; min-height: 44px; }

/* Press feedback for touch, where :hover never fires. Scoped to
   coarse/hover-less pointers so desktop mouse clicks render as before.
   brightness() darkens whatever state the control is in — unselected white
   and selected ghost green both dim slightly — so every tap answers, and the press
   never repaints the selected state as unselected. */
@media (hover: none), (pointer: coarse) {
  .btn-primary:active { background: var(--navy-mid); }
  .choice-card:active { filter: brightness(0.96); }
  .pill:active span { filter: brightness(0.96); }
}

/* Foundation: type scale and spacing tighten on phones; the org label
   shrinks rather than wrapping so brand + org stay on one line at 360px.
   --page-bottom feeds the safe-area rule at the end of this section. */
@media (max-width: 640px) {
  :root { --page-bottom: 3rem; }
  h1 { font-size: 1.55rem; }
  h2 { font-size: 1.25rem; }
  .page { padding: 1.5rem 1rem 3rem; }
  .wizard, .card { padding: 1.25rem; }
  .hero { padding: 2rem 0 1.5rem; }
  .sitefooter { padding: 1.25rem 1rem 2.5rem; }
  .topbar-org { font-size: 0.875rem; }
}

/* Small phones: one-per-row wizard choices, full-bleed inputs, full-width
   submit, thumb-sized slider and consent checkbox; hub stats as an even
   2×2. Combined .choice-group.pills fieldsets keep their flex wrap — the
   single-column grid rule below correctly has no effect there. */
@media (max-width: 480px) {
  .choice-group { grid-template-columns: 1fr; }
  .field-grid { grid-template-columns: 1fr; }
  .text-input { max-width: none; }
  .wizard .btn { width: 100%; }
  .pills { gap: 0.5rem 0.6rem; }

  /* Native slider gets a 44px control height for a thumb-sized target —
     no appearance:none, so accent-color and the native thumb survive. */
  .slider-field input[type="range"] { height: 44px; }

  /* Back link and the conversion-critical consent opt-in become real 44px
     targets; the checkbox stays a real control and the label stays clickable. */
  .backlink a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .checkbox-row { min-height: 44px; }

  /* Directory, reading-list, hotline, and quiz links are inline text on
     desktop; on a phone each becomes a 44px row (rulebook §10: 44px is a
     floor, measured at 375px). Padding, not font-size, so type stays on scale. */
  .topic a, .link-list a, .hotline a, .quiz-offer a { display: inline-flex; align-items: center; min-height: 44px; }
  .link-list li { padding: 0; }
  .checkbox-row input { width: 1.25rem; height: 1.25rem; }

  /* Four stats read better as an even 2×2 than a 3+1 auto-fit wrap.
     min-width:0 plus a step down in value type lets long text values
     ("Google AI Professional Certificate") wrap without dwarfing their
     single-line neighbors. */
  .stat-row { grid-template-columns: 1fr 1fr; }
  .stat-row > div { min-width: 0; }
  .stat-row dd { font-size: 1.1rem; }
  /* Drop the chip's left gap so it doesn't crowd the label when they share
     a line; ordinary inline flow handles the wrap itself. */
  .gain-chip { margin-left: 0; }
  /* Only the "View track" anchor navigates — pad it into a standalone
     ≥44px target (the negative margin keeps its text left-aligned with the
     card); the track name/description stays inert as intended. */
  .minitrack-list a { display: inline-flex; align-items: center; min-height: 44px; padding: 0.5rem 0.75rem; margin-left: -0.75rem; }
  /* Card CTAs go full-width; the gate empty state loses vertical padding so
     its CTA sits in thumb reach. */
  .card .btn, .hub-gate .btn { width: 100%; }
  .hub-gate { padding: 2.5rem 1rem; }
}

/* Safe-area: the layout's viewport meta sets viewport-fit=cover (env() is
   always 0 without it), taking the page edge-to-edge on notched and
   gesture-nav phones — so keep content clear of the home indicator and, in
   landscape, the notch. Embedded pages inherit these same rules: no
   special-casing, so embed padding matches standalone at every width and
   desktop rendering keeps its existing values (env() resolves to 0 there). */
.page { padding-bottom: calc(var(--page-bottom) + env(safe-area-inset-bottom)); }
.page, .topbar-inner, .sitefooter {
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
}

/* Hub panel nav — four surfaces behind one token (v1.5 test build). Scrolls
   horizontally on narrow screens rather than wrapping to two rows, so the hub
   header keeps a predictable height inside the WordPress iframe. */
.hub-nav { display: flex; gap: 0.25rem; overflow-x: auto; margin: 1.25rem 0; padding-bottom: 0.25rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-padding-inline: 1rem; }
.hub-nav::-webkit-scrollbar { display: none; }
.hub-nav-item { flex: 0 0 auto; padding: 0.6rem 1rem; border-radius: var(--radius-pill); text-decoration: none; color: var(--ink-soft); font-size: 0.9rem; font-weight: 600; white-space: nowrap; min-height: 44px; display: flex; align-items: center; }
.hub-nav-item:hover { background: var(--white); color: var(--navy); }
.hub-nav-item.active { background: var(--navy); color: var(--white); }
.hub-nav-item:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }

/* Help Near You */
.hotline { background: var(--ghost-green); border-radius: var(--radius); padding: 0.9rem 1rem; margin: 1rem 0 0; }
.hotline strong { display: block; }
.topic { border-top: 1px solid var(--line); padding: 0.25rem 0; }
.topic:first-of-type { border-top: none; }
.topic > summary { cursor: pointer; padding: 0.7rem 0; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.topic > summary:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.link-list { list-style: none; padding: 0; margin: 0 0 0.75rem; }
.link-list li { padding: 0.35rem 0; }

/* Tools — section headings inside the card, above each link-list */
.card h3 { font-size: 1rem; margin: 1.25rem 0 0.5rem; }
.card h3:first-of-type { margin-top: 0; }