/* ==========================================================
   WORLD 1 · FRAUDCRAFT COMPONENT STYLESHEET
   Phase 2. Built against the LOCKED tokens in tokens.css.

   This file invents no colour, type size, radius, shadow, or duration.
   Every value is a locked token, or a stated alpha derivation of one
   (tint fills for pills, dark band surfaces). If a genuinely new value
   is needed, the design system changes first, with approval.

   A World 2 page never loads this file.
   ========================================================== */


/* ---------- BASE ---------- */

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fc-cream);
  color: var(--fc-ink);
  font-family: var(--fc-font-body);
  font-size: var(--fc-size-body);
  line-height: var(--fc-lh-body);
  -webkit-font-smoothing: antialiased;

  /* Sticky footer. The footer is near black, and pages that render
     their content with JavaScript are momentarily just a nav bar and a
     footer. Without this the footer lands mid viewport for an instant
     and reads as a black screen flashing up. It must always be pushed
     below the fold, however short the document currently is. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body > main,
body > .assess-shell { flex: 1 0 auto; }
body > .foot { flex: none; }

h1, h2, h3 {
  font-family: var(--fc-font-display);
  margin: 0;
  font-weight: 800;
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: var(--fc-green); text-decoration-thickness: 1px; text-underline-offset: 3px; }

img, svg { display: block; max-width: 100%; }

.fc-skip {
  position: absolute; left: -9999px;
  background: var(--fc-ink); color: var(--fc-cream);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--fc-radius-btn); z-index: 100;
}
.fc-skip:focus { left: var(--space-4); top: var(--space-4); }


/* ---------- TYPE ROLES ---------- */

.t-hero {
  font-family: var(--fc-font-display);
  font-size: var(--fc-size-hero);
  line-height: var(--fc-lh-hero);
  letter-spacing: var(--fc-track-hero);
  font-weight: 800;
}
.t-h1 {
  font-family: var(--fc-font-display);
  font-size: var(--fc-size-h1);
  line-height: var(--fc-lh-h1);
  letter-spacing: var(--fc-track-h1);
  font-weight: 800;
}
.t-h2 {
  font-family: var(--fc-font-display);
  font-size: var(--fc-size-h2);
  line-height: var(--fc-lh-h2);
  letter-spacing: var(--fc-track-h2);
  font-weight: 700;
}
.t-h3 {
  font-family: var(--fc-font-display);
  font-size: var(--fc-size-h3);
  line-height: var(--fc-lh-h3);
  letter-spacing: var(--fc-track-h3);
  font-weight: 700;
}
.t-body-lg { font-size: var(--fc-size-body-large); line-height: var(--fc-lh-body-large); font-weight: 500; }
.t-body    { font-size: var(--fc-size-body); line-height: var(--fc-lh-body); }
.t-small   { font-size: var(--fc-size-small); line-height: var(--fc-lh-small); }
.t-label {
  font-size: var(--fc-size-label);
  line-height: var(--fc-lh-label);
  letter-spacing: var(--fc-track-label);
  font-weight: 700;
  text-transform: uppercase;
}

.t-soft { color: var(--fc-ink-soft); }
.t-prose { max-width: var(--prose-max); }

/* Yellow marker behind a word. The one decorative device on the page. */
.mark {
  position: relative;
  display: inline-block;
  z-index: 0;
}
.mark::before {
  content: "";
  position: absolute;
  left: -0.12em; right: -0.12em;
  bottom: 0.04em;
  height: 0.42em;
  background: var(--fc-citrus);
  border-radius: 3px;
  transform: rotate(-0.9deg);
  z-index: -1;
}


/* ---------- LAYOUT ---------- */

.wrap {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.band { padding-block: var(--space-9); }
.band-lg { padding-block: var(--space-10); }

.band-cream { background: var(--fc-cream); }
.band-ink    { background: var(--fc-ink); color: var(--fc-cream); }
.band-canopy { background: var(--fc-canopy); color: var(--fc-cream); }
.band-green  { background: var(--fc-green-deep); color: var(--fc-cream); }

/* The loud band. Citrus fill, ink type. Used once per page at most. */
.band-citrus { background: var(--fc-citrus); color: var(--fc-ink); }

.band-ink .t-soft,
.band-canopy .t-soft,
.band-green .t-soft { color: rgba(251, 247, 236, 0.72); }
.band-citrus .t-soft { color: rgba(20, 18, 12, 0.72); }

.rule {
  height: 1px;
  background: var(--fc-line);
  border: 0;
  margin: 0;
}

.stack-3 > * + * { margin-top: var(--space-3); }
.stack-4 > * + * { margin-top: var(--space-4); }
.stack-5 > * + * { margin-top: var(--space-5); }
.stack-6 > * + * { margin-top: var(--space-6); }
.stack-7 > * + * { margin-top: var(--space-7); }


/* ---------- BUTTONS ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--fc-control-h);
  padding: 0 28px;
  border-radius: var(--fc-radius-btn);
  font-family: var(--fc-font-body);
  font-size: var(--fc-size-button);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color var(--fc-dur-quick) var(--fc-ease),
              transform var(--fc-dur-quick) var(--fc-ease),
              box-shadow var(--fc-dur-quick) var(--fc-ease),
              color var(--fc-dur-quick) var(--fc-ease);
}

.btn-primary {
  background: var(--fc-green);
  color: var(--fc-cream);
  box-shadow: 0 3px 0 0 var(--fc-green-deep);
}
.btn-primary:hover { background: var(--fc-green-deep); }
.btn-primary:active { transform: translateY(3px); box-shadow: 0 0 0 0 var(--fc-green-deep); }

.btn-secondary {
  background: transparent;
  color: var(--fc-ink);
  border-color: var(--fc-ink);
  box-shadow: 0 3px 0 0 var(--fc-ink);
}
.btn-secondary:hover { background: var(--fc-gray-100); }
.btn-secondary:active { transform: translateY(3px); box-shadow: 0 0 0 0 var(--fc-ink); }

.btn-dark {
  background: var(--fc-ink);
  color: var(--fc-cream);
  box-shadow: 0 3px 0 0 var(--fc-gray-700);
}
.btn-dark:hover { background: var(--fc-gray-800); }
.btn-dark:active { transform: translateY(3px); box-shadow: 0 0 0 0 var(--fc-gray-700); }

.btn-text {
  background: none;
  color: var(--fc-green);
  padding: 0 var(--space-2);
  min-height: var(--fc-control-h-sm);
  box-shadow: none;
}
.btn-text:hover { text-decoration: underline; text-underline-offset: 4px; }
.btn-text:active { opacity: 0.7; }

.btn[disabled],
.btn[aria-disabled="true"] {
  background: var(--fc-gray-100);
  color: var(--fc-gray-400);
  border-color: transparent;
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

/* On dark bands the secondary button inverts. */
.band-ink .btn-secondary,
.band-canopy .btn-secondary,
.band-green .btn-secondary {
  color: var(--fc-cream);
  border-color: var(--fc-cream);
  box-shadow: 0 3px 0 0 rgba(251, 247, 236, 0.45);
}
.band-ink .btn-secondary:hover,
.band-canopy .btn-secondary:hover,
.band-green .btn-secondary:hover { background: rgba(251, 247, 236, 0.12); }

/* Citrus bands take an ink button, because a green button on citrus fights. */
.band-citrus .btn-primary { background: var(--fc-ink); color: var(--fc-cream); box-shadow: 0 3px 0 0 var(--fc-gray-700); }
.band-citrus .btn-primary:hover { background: var(--fc-gray-800); }


/* ---------- PILLS AND CHIPS ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 14px;
  border-radius: var(--fc-radius-pill);
  font-size: var(--fc-size-small);
  font-weight: 600;
  background: var(--fc-gray-100);
  color: var(--fc-gray-700);
}
.pill-green  { background: var(--fc-green-wash); color: var(--fc-green-deep); }
.pill-violet { background: rgba(91, 63, 217, 0.12); color: var(--fc-violet); }
.pill-yellow { background: rgba(255, 201, 60, 0.32); color: var(--fc-warning); }
.pill-coral  { background: rgba(196, 61, 33, 0.12); color: var(--fc-error); }   /* risk, alert, incorrect */
.pill-citrus { background: rgba(255, 122, 26, 0.18); color: #8A3B00; }              /* energy, new, featured */
.pill-blue   { background: rgba(143, 192, 238, 0.28); color: var(--fc-info); }

.pill-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}


/* ---------- NAVIGATION ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--fc-cream);
  border-bottom: 1px solid transparent;
  transition: border-color var(--fc-dur-quick) var(--fc-ease);
}
.nav[data-scrolled="true"] { border-bottom-color: var(--fc-line); }

.nav-inner {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.wordmark {
  font-family: var(--fc-font-display);
  font-size: var(--fc-size-body-large);
  font-weight: 800;
  letter-spacing: var(--fc-track-h2);
  color: var(--fc-ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.wordmark-dot {
  width: 12px; height: 12px;
  border-radius: 3px;
  background: var(--fc-green);
  transform: rotate(12deg);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.nav-links a {
  color: var(--fc-ink);
  text-decoration: none;
  font-size: var(--fc-size-small);
  font-weight: 600;
  padding: var(--space-2) 0;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover { border-bottom-color: var(--fc-green); }

.nav-actions { display: flex; align-items: center; gap: var(--space-3); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: none;
  border: 2px solid var(--fc-ink);
  border-radius: var(--fc-radius-input);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 18px; height: 2px;
  background: var(--fc-ink);
  position: relative;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: ""; position: absolute; left: 0;
  width: 18px; height: 2px; background: var(--fc-ink);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }

.nav-sheet {
  display: none;
  border-top: 1px solid var(--fc-line);
  background: var(--fc-cream);
  padding: var(--space-4) 0 var(--space-6);
}
.nav-sheet[data-open="true"] { display: block; }
.nav-sheet .btn { width: 100%; margin-top: var(--space-5); }
.nav-sheet a:not(.btn) {
  display: block;
  padding: var(--space-4) 0;
  font-size: var(--fc-size-body-large);
  font-weight: 600;
  color: var(--fc-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--fc-line);
}


/* ---------- CARDS ---------- */

.card {
  background: var(--fc-surface);
  border-radius: var(--fc-radius-lg-card);
  padding: var(--space-6);
  box-shadow: var(--fc-shadow-card);
  transition: transform var(--fc-dur-base) var(--fc-ease),
              box-shadow var(--fc-dur-base) var(--fc-ease);
}
.card-sm { border-radius: var(--fc-radius-sm-card); padding: var(--space-5); }
.card-hover:hover { transform: translateY(-3px); box-shadow: var(--fc-shadow-lift); }


/* ---------- HERO ---------- */

.hero { padding-block: var(--space-9) var(--space-8); }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: var(--space-8);
  align-items: start;
}

.hero-eyebrow { color: var(--fc-green); margin-bottom: var(--space-5); }

.hero h1 { margin-bottom: var(--space-5); }

.hero-sub { max-width: 46ch; color: var(--fc-gray-700); }

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-7);
}

.hero-reassure {
  margin-top: var(--space-5);
  color: var(--fc-gray-600);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  align-items: center;
}
.hero-reassure .sep { color: var(--fc-gray-300); }


/* ---------- HERO VISUAL · THE MATCH DEMO ---------- */

.demo {
  background: var(--fc-surface);
  border-radius: var(--fc-radius-lg-card);
  box-shadow: var(--fc-shadow-card);
  overflow: hidden;
}

.demo-head {
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--fc-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.demo-body { padding: var(--space-5); }

.demo-stage { opacity: 1; }
.js .demo-stage[data-shown="false"] { opacity: 0; transform: translateY(10px); }
.js .demo-stage[data-shown="true"] {
  opacity: 1;
  transform: none;
  transition: opacity var(--fc-dur-base) var(--fc-ease),
              transform var(--fc-dur-base) var(--fc-ease);
}

.demo-arrow {
  display: block;
  margin: var(--space-4) 0;
  color: var(--fc-gray-300);
  text-align: center;
  font-size: var(--fc-size-body-large);
  line-height: 1;
}

.role-picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.role-btn {
  font-family: var(--fc-font-body);
  font-size: var(--fc-size-small);
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--fc-radius-pill);
  border: 2px solid var(--fc-gray-300);
  background: var(--fc-surface);
  color: var(--fc-gray-600);
  cursor: pointer;
  transition: border-color var(--fc-dur-quick) var(--fc-ease),
              color var(--fc-dur-quick) var(--fc-ease),
              background-color var(--fc-dur-quick) var(--fc-ease);
}
.role-btn:hover { border-color: var(--fc-gray-500); color: var(--fc-ink); }
.role-btn[aria-pressed="true"] {
  border-color: var(--fc-green);
  background: var(--fc-green-wash);
  color: var(--fc-green-deep);
}

.role-name {
  font-family: var(--fc-font-display);
  font-size: var(--fc-size-h3);
  line-height: var(--fc-lh-h3);
  letter-spacing: var(--fc-track-h3);
  font-weight: 700;
}

.skill-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.match-row { display: block; }
.match-row + .match-row { margin-top: var(--space-4); }

.match-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: 8px;
}
.match-name { font-weight: 600; }
.match-pct {
  font-family: var(--fc-font-display);
  font-weight: 800;
  font-size: var(--fc-size-h3);
  letter-spacing: var(--fc-track-h2);
  font-variant-numeric: tabular-nums;
  color: var(--fc-violet);
}

.match-track {
  height: 12px;
  border-radius: var(--fc-radius-pill);
  background: var(--fc-gray-100);
  overflow: hidden;
}
.match-fill {
  height: 100%;
  width: 0;
  border-radius: var(--fc-radius-pill);
  background: var(--fc-violet);
  transition: width var(--fc-dur-slow) var(--fc-ease-out);
}
.match-row:nth-child(2) .match-fill { background: rgba(91, 63, 217, 0.72); }
.match-row:nth-child(3) .match-fill { background: rgba(91, 63, 217, 0.48); }

.demo-foot {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--fc-line);
  background: var(--fc-gray-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}


/* ---------- SECTION 2 · THE TRANSFER LADDER ---------- */

.ladder { display: grid; gap: 0; margin-top: var(--space-7); }

.rung {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--fc-line);
}
.rung:last-child { border-bottom: 0; }

.rung-mark {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid var(--fc-gray-300);
  display: grid;
  place-items: center;
  font-size: var(--fc-size-small);
  font-weight: 700;
  color: var(--fc-gray-500);
  background: var(--fc-cream);
}
.rung-label {
  font-family: var(--fc-font-display);
  font-size: var(--fc-size-h3);
  line-height: var(--fc-lh-h3);
  letter-spacing: var(--fc-track-h3);
  font-weight: 700;
}
.rung-note { color: var(--fc-gray-600); font-size: var(--fc-size-small); margin-top: 4px; }

/* The last three rungs are the transformation. They go green. */
.rung-turn .rung-mark {
  border-color: var(--fc-green);
  background: var(--fc-green);
  color: var(--fc-cream);
}
.rung-turn .rung-label { color: var(--fc-green-deep); }


/* ---------- SECTION 3 · FOUR STEPS ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-8);
}
.step { border-top: 3px solid var(--fc-ink); padding-top: var(--space-5); }
.step-num {
  font-family: var(--fc-font-display);
  font-size: var(--fc-size-h1);
  line-height: 1;
  font-weight: 800;
  letter-spacing: var(--fc-track-hero);
  color: var(--fc-ink);
  display: block;
  margin-bottom: var(--space-4);
}
.step:nth-child(1) .step-num { color: var(--fc-violet); }
.step:nth-child(2) .step-num { color: var(--fc-green); }
.step:nth-child(3) .step-num { color: var(--fc-coral); }
.step:nth-child(4) .step-num { color: var(--fc-info); }
.step h3 { margin-bottom: var(--space-3); }


/* ---------- SECTION 4 · CAREER PATHS ---------- */

.paths {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-8);
}

.path-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  border-radius: var(--fc-radius-lg-card);
  padding: var(--space-6);
  background: var(--fc-surface);
  box-shadow: var(--fc-shadow-card);
  border-top: 6px solid var(--fc-gray-300);
  transition: transform var(--fc-dur-base) var(--fc-ease),
              box-shadow var(--fc-dur-base) var(--fc-ease);
}
.path-card:hover { transform: translateY(-3px); box-shadow: var(--fc-shadow-lift); }
.path-card h3 { margin-bottom: 0; }
.path-card p { color: var(--fc-gray-700); }
.path-card .path-foot { margin-top: auto; padding-top: var(--space-4); }

.path-investigator { border-top-color: var(--fc-green); }
.path-operations   { border-top-color: var(--fc-coral); }
.path-governance   { border-top-color: var(--fc-info); }

.path-later {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--fc-line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}


/* ---------- SECTION 5 · FC SIGNAL PREVIEW ----------
   The ONLY place World 2 tokens appear inside a World 1 page.
   It is framed as a specimen of the product, not as page chrome. */

.signal-frame {
  border-radius: var(--fc-radius-lg-card);
  overflow: hidden;
  background: var(--sg-app);
  border: 1px solid var(--sg-line-strong);
  font-family: var(--sg-font-ui);
  color: var(--sg-ink);
  font-size: var(--sg-size-body);
  line-height: var(--sg-lh-body);
}

.signal-banner {
  height: var(--sg-banner-h);
  background: var(--sg-warn);
  color: var(--sg-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--sg-size-micro);
  font-weight: 700;
  letter-spacing: var(--sg-track-micro);
  text-transform: uppercase;
  text-align: center;
  padding-inline: var(--space-3);
}

.signal-bar {
  height: var(--sg-bar-height);
  background: var(--sg-app);
  border-bottom: 1px solid var(--sg-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-inline: var(--space-4);
}
.signal-brand {
  font-size: var(--sg-size-panel);
  font-weight: 700;
  letter-spacing: var(--sg-track-brand);
}
.signal-meta {
  font-family: var(--sg-font-data);
  font-size: var(--sg-size-micro);
  color: var(--sg-ink-soft);
  display: flex;
  gap: var(--space-4);
}

.signal-tabs {
  display: flex;
  background: var(--sg-surface-alt);
  border-bottom: 1px solid var(--sg-line-strong);
  overflow-x: auto;
}
.signal-tab {
  appearance: none;
  border: 0;
  background: transparent;
  font-family: var(--sg-font-ui);
  font-size: var(--sg-size-body);
  font-weight: 600;
  color: var(--sg-ink-soft);
  height: var(--sg-tab-height);
  padding-inline: var(--space-4);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--sg-dur) linear, color var(--sg-dur) linear;
}
.signal-tab:hover { color: var(--sg-ink); }
.signal-tab[aria-selected="true"] {
  background: var(--sg-surface);
  color: var(--sg-ink);
  border-bottom-color: var(--sg-accent);
}

.signal-panel {
  background: var(--sg-surface);
  padding: var(--space-4);
  min-height: 288px;
}
.signal-panel[hidden] { display: none; }

.sg-h {
  font-size: var(--sg-size-micro);
  font-weight: 700;
  letter-spacing: var(--sg-track-micro);
  text-transform: uppercase;
  color: var(--sg-ink-soft);
  margin-bottom: var(--space-2);
}

.sg-risk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 20px;
  padding-inline: 8px;
  border-radius: var(--sg-radius-sm);
  font-size: var(--sg-size-micro);
  font-weight: 700;
  letter-spacing: var(--sg-track-micro);
  border-left: 3px solid currentColor;
}
.sg-risk-high { color: var(--sg-risk-high); background: rgba(179, 49, 28, 0.1); }
.sg-risk-low  { color: var(--sg-risk-low);  background: rgba(61, 107, 73, 0.1); }

.sg-table { width: 100%; border-collapse: collapse; font-size: var(--sg-size-body); }
.sg-table th {
  text-align: left;
  font-size: var(--sg-size-micro);
  font-weight: 700;
  letter-spacing: var(--sg-track-micro);
  text-transform: uppercase;
  color: var(--sg-ink-soft);
  background: var(--sg-surface-alt);
  height: var(--sg-head-height);
  padding-inline: var(--space-2);
  border-bottom: 1px solid var(--sg-line-strong);
  white-space: nowrap;
}
.sg-table td {
  height: var(--sg-row-height);
  padding-inline: var(--space-2);
  border-bottom: 1px solid var(--sg-line);
  white-space: nowrap;
}
.sg-table tbody tr:nth-child(even) { background: var(--sg-surface-alt); }
.sg-mono { font-family: var(--sg-font-data); font-variant-numeric: tabular-nums; }
.sg-num  { text-align: right; }
.sg-flagged { color: var(--sg-flag); font-weight: 600; }

.sg-defs { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 6px var(--space-3); }
.sg-defs dt {
  font-size: var(--sg-size-micro);
  font-weight: 700;
  letter-spacing: var(--sg-track-micro);
  text-transform: uppercase;
  color: var(--sg-ink-soft);
  align-self: center;
}
.sg-defs dd { margin: 0; }

.sg-evidence { border: 1px solid var(--sg-line); border-radius: var(--sg-radius); }
.sg-ev-row {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--sg-flag);
  border-bottom: 1px solid var(--sg-line);
}
.sg-ev-row:last-child { border-bottom: 0; }
.sg-ev-domain {
  font-size: var(--sg-size-micro);
  font-weight: 700;
  letter-spacing: var(--sg-track-micro);
  text-transform: uppercase;
  color: var(--sg-ink-soft);
  min-width: 92px;
}

.sg-field { margin-bottom: var(--space-4); }
.sg-value {
  border: 1px solid var(--sg-line);
  border-radius: var(--sg-radius);
  padding: var(--space-2) var(--space-3);
  background: var(--sg-surface-alt);
}
.sg-seg { display: flex; gap: 4px; flex-wrap: wrap; }
.sg-seg span {
  border: 1px solid var(--sg-line-strong);
  border-radius: var(--sg-radius-sm);
  padding: 4px 10px;
  font-size: var(--sg-size-micro);
  font-weight: 600;
  color: var(--sg-ink-soft);
}
.sg-seg span[data-on="true"] {
  background: var(--sg-accent-wash);
  border-color: var(--sg-accent);
  color: var(--sg-accent);
}

.signal-caption {
  margin-top: var(--space-4);
  color: var(--fc-gray-600);
  font-size: var(--fc-size-small);
}


/* ---------- SECTION 6 · PROGRESSION ---------- */

.prog {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-8);
}
.prog-step {
  border-radius: var(--fc-radius-lg-card);
  padding: var(--space-6);
  background: rgba(251, 247, 236, 0.07);
  border: 1px solid rgba(251, 247, 236, 0.26);
}
.prog-step h3 { color: var(--fc-cream); margin-bottom: var(--space-3); }
.prog-step p { color: rgba(251, 247, 236, 0.72); font-size: var(--fc-size-small); }
.prog-idx {
  font-size: var(--fc-size-label);
  letter-spacing: var(--fc-track-label);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--fc-yellow);
  display: block;
  margin-bottom: var(--space-4);
}


/* ---------- FINAL CTA ---------- */

.final { text-align: center; }
.final h2 { max-width: 20ch; margin-inline: auto; }
.final .btn { margin-top: var(--space-7); }


/* ---------- FOOTER ---------- */

.foot { background: var(--fc-ink); color: var(--fc-cream); padding-block: var(--space-8); }

/* Pages whose content is rendered by JavaScript reserve the viewport
   before that content exists, so nothing below them can flash into
   view while they are still empty. */
.holds-viewport { min-height: 72vh; }
.foot .wordmark { color: var(--fc-cream); }
.foot-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-6);
  align-items: flex-start;
}
.foot-note { color: rgba(251, 247, 236, 0.6); font-size: var(--fc-size-small); max-width: 42ch; margin-top: var(--space-4); }
.foot-legal {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(251, 247, 236, 0.18);
  color: rgba(251, 247, 236, 0.6);
  font-size: var(--fc-size-small);
}


/* ---------- SCROLL REVEAL ----------
   Hidden only when JS is running. Without JS everything is visible. */

.js .reveal { opacity: 0; transform: translateY(12px); }
.js .reveal[data-revealed="true"] {
  opacity: 1;
  transform: none;
  transition: opacity var(--fc-dur-base) var(--fc-ease),
              transform var(--fc-dur-base) var(--fc-ease);
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1100px) and (min-width: 901px) {
  /* Hero display type needs room. Below this width it steps to the H1 size
     rather than wrapping to five lines. */
  .hero .t-hero { font-size: var(--fc-size-h1); line-height: var(--fc-lh-h1); }
}

@media (max-width: 1040px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7) var(--space-6); }
  .prog  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paths { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
}

@media (max-width: 560px) {
  .nav-actions .btn-primary { display: none; }
}

@media (max-width: 720px) {
  .wrap { padding-inline: var(--space-4); }
  .band { padding-block: var(--space-8); }
  .band-lg { padding-block: var(--space-8); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .paths { grid-template-columns: minmax(0, 1fr); }
  .prog  { grid-template-columns: minmax(0, 1fr); }
  .rung { grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-4); }
  .rung-mark { width: 32px; height: 32px; font-size: 13px; }
  .hero-ctas .btn { width: 100%; }
  .sg-defs { grid-template-columns: minmax(0, 1fr); gap: 2px var(--space-3); }
  .sg-defs dd { margin-bottom: var(--space-2); }
  .signal-panel { padding: var(--space-3); }
  .sg-scroll { overflow-x: auto; }
}

@media (max-width: 420px) {
  .demo-head, .demo-body, .demo-foot { padding-inline: var(--space-4); }
}


/* ==========================================================
   ASSESSMENT · PHASE 3
   New components only. No Phase 2 rule above this line is modified.
   Locked components are reused as they are.
   ========================================================== */

/* ---------- SHELL ---------- */

.assess-shell {
  /* No min-height here. body is a flex column with min-height 100vh and
     the shell grows into it. Setting 100vh on both stacks the two and
     makes the page taller than the viewport for no reason. */
  display: flex;
  flex-direction: column;
}

.assess-top {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--fc-cream);
  border-bottom: 1px solid var(--fc-line);
}
.assess-top-inner {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.progress-wrap { flex: 1; max-width: 420px; }
.progress-track {
  height: 8px;
  border-radius: var(--fc-radius-pill);
  background: var(--fc-gray-200);
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  width: 0;
  border-radius: var(--fc-radius-pill);
  background: var(--fc-green);
  transition: width var(--fc-dur-slow) var(--fc-ease-out);
}
.progress-text {
  margin-top: 6px;
  font-size: var(--fc-size-small);
  color: var(--fc-gray-600);
  font-variant-numeric: tabular-nums;
}

.assess-main { flex: 1; padding-block: var(--space-8) var(--space-9); }

.assess-col { max-width: 720px; margin-inline: auto; }


/* ---------- SCREEN ---------- */

.screen-eyebrow { color: var(--fc-violet); margin-bottom: var(--space-4); }

.screen-prompt {
  font-family: var(--fc-font-display);
  font-size: var(--fc-size-h1);
  line-height: var(--fc-lh-h1);
  letter-spacing: var(--fc-track-h1);
  font-weight: 800;
  margin-bottom: var(--space-4);
}
.screen-prompt:focus { outline: none; }
.screen-prompt:focus-visible { outline: 3px solid var(--fc-green); outline-offset: 6px; border-radius: 4px; }

.screen-help {
  font-size: var(--fc-size-body-large);
  line-height: var(--fc-lh-body-large);
  color: var(--fc-gray-600);
  max-width: 52ch;
  margin-bottom: var(--space-7);
}

.screen-body { margin-bottom: var(--space-7); }


/* ---------- OPTION CARDS ---------- */

.opts { display: grid; gap: var(--space-3); }
.opts-multi { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.opt {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  width: 100%;
  min-height: var(--fc-option-h);
  padding: var(--space-4) var(--space-5);
  text-align: left;
  background: var(--fc-surface);
  border: 2px solid var(--fc-gray-300);
  border-radius: var(--fc-radius-input);
  font-family: var(--fc-font-body);
  cursor: pointer;
  transition: border-color var(--fc-dur-quick) var(--fc-ease),
              background-color var(--fc-dur-quick) var(--fc-ease),
              transform var(--fc-dur-quick) var(--fc-ease);
}
.opt:hover { border-color: var(--fc-gray-500); }
.opt:active { transform: translateY(1px); }

.opt[aria-pressed="true"] {
  border-color: var(--fc-green);
  background: var(--fc-green-wash);
}

.opt-box {
  flex: none;
  width: 24px; height: 24px;
  margin-top: 2px;
  border-radius: 50%;
  border: 2px solid var(--fc-gray-300);
  background: var(--fc-surface);
  position: relative;
}
.opt-box-square { border-radius: 6px; }

.opt[aria-pressed="true"] .opt-box {
  border-color: var(--fc-green);
  background: var(--fc-green);
}
.opt[aria-pressed="true"] .opt-box::after {
  content: "";
  position: absolute;
  left: 6px; top: 2px;
  width: 6px; height: 11px;
  border: solid var(--fc-cream);
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}

.opt-text { display: block; }
.opt-label {
  display: block;
  font-size: var(--fc-size-body-large);
  line-height: 1.3;
  font-weight: 600;
  color: var(--fc-ink);
}
.opt-note {
  display: block;
  margin-top: 4px;
  font-size: var(--fc-size-small);
  color: var(--fc-gray-600);
  font-weight: 400;
}

.multi-count {
  margin-top: var(--space-4);
  color: var(--fc-warning);
  font-weight: 600;
}
.multi-count.t-soft { color: var(--fc-gray-600); font-weight: 400; }


/* ---------- TEXT ANSWER ---------- */

.input {
  width: 100%;
  min-height: var(--fc-control-h);
  padding: 0 var(--space-4);
  border: 2px solid var(--fc-gray-300);
  border-radius: var(--fc-radius-input);
  background: var(--fc-surface);
  font-family: var(--fc-font-body);
  font-size: var(--fc-size-body-large);
  color: var(--fc-ink);
}
.input::placeholder { color: var(--fc-gray-400); }
.input:focus {
  outline: none;
  border-color: var(--fc-green);
  box-shadow: 0 0 0 3px var(--fc-green-wash);
}

.suggestions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.suggestion {
  font-family: var(--fc-font-body);
  font-size: var(--fc-size-small);
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--fc-radius-pill);
  border: 2px solid var(--fc-gray-300);
  background: var(--fc-surface);
  color: var(--fc-gray-600);
  cursor: pointer;
  transition: border-color var(--fc-dur-quick) var(--fc-ease), color var(--fc-dur-quick) var(--fc-ease);
}
.suggestion:hover { border-color: var(--fc-green); color: var(--fc-green-deep); }


/* ---------- FOOTER CONTROLS ---------- */

.assess-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--fc-line);
}

.save-note {
  font-size: var(--fc-size-small);
  color: var(--fc-gray-500);
  text-align: right;
  min-height: 1.4em;
}


/* ---------- INTRO AND RESUME ---------- */

.intro-card {
  background: var(--fc-surface);
  border-radius: var(--fc-radius-lg-card);
  padding: var(--space-7);
  box-shadow: var(--fc-shadow-card);
}
.intro-list { margin-top: var(--space-5); display: grid; gap: var(--space-3); }
.intro-list li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  color: var(--fc-gray-700);
}
.intro-list .tick {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--fc-green-wash);
  color: var(--fc-green-deep);
  display: grid;
  place-items: center;
  font-size: var(--fc-size-label);
  font-weight: 700;
  margin-top: 2px;
}

.resume-note {
  margin-top: var(--space-5);
  padding: var(--space-5);
  border-radius: var(--fc-radius-input);
  background: rgba(255, 201, 60, 0.22);
  border: 1px solid var(--fc-yellow);
}
.resume-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }


/* ---------- DONE ---------- */

.done-card { text-align: center; padding-block: var(--space-8); }
.done-card h1 { max-width: 16ch; margin-inline: auto; }
.done-card h1:focus { outline: none; }
.done-card h1:focus-visible { outline: 3px solid var(--fc-green); outline-offset: 6px; border-radius: 4px; }

.qa-block { margin-top: var(--space-9); text-align: left; }
.qa-panel {
  margin-top: var(--space-4);
  padding: var(--space-5);
  border: 1px dashed var(--fc-gray-400);
  border-radius: var(--fc-radius-input);
  background: var(--fc-gray-100);
  font-family: var(--sg-font-data);
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-x: auto;
}


/* ---------- ASSESSMENT RESPONSIVE ---------- */

@media (max-width: 720px) {
  .opts-multi { grid-template-columns: minmax(0, 1fr); }
  .assess-main { padding-block: var(--space-7) var(--space-8); }
  .assess-controls { flex-direction: column-reverse; align-items: stretch; }
  .assess-controls .btn { width: 100%; }
  .save-note { text-align: center; }
  .intro-card { padding: var(--space-5); }
  .opt { padding: var(--space-4); }
}

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


/* ==========================================================
   RESULTS AND ENROLLMENT · PHASE 4
   New components only. No earlier rule is modified.
   ========================================================== */

/* ---------- REVEAL ---------- */

.reveal-head { padding-block: var(--space-8) var(--space-7); }
.reveal-head h1 { max-width: 17ch; }

.snapshot {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-7);
}

.snap {
  background: var(--fc-surface);
  border-radius: var(--fc-radius-lg-card);
  padding: var(--space-6);
  box-shadow: var(--fc-shadow-card);
}
.snap-value {
  font-family: var(--fc-font-display);
  font-size: var(--fc-size-h2);
  line-height: 1.05;
  letter-spacing: var(--fc-track-h2);
  font-weight: 800;
  margin-top: var(--space-3);
}

.exposure-band {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 16px;
  border-radius: var(--fc-radius-pill);
  font-family: var(--fc-font-display);
  font-size: var(--fc-size-h3);
  font-weight: 800;
  letter-spacing: 0.02em;
  margin-top: var(--space-3);
}
.exposure-high     { background: rgba(255, 122, 26, 0.18); color: #8A3B00; }
.exposure-moderate { background: rgba(255, 201, 60, 0.30); color: var(--fc-warning); }
.exposure-low      { background: var(--fc-green-wash); color: var(--fc-green-deep); }


/* ---------- SKILL PROFILE ---------- */

.skills { margin-top: var(--space-7); }

.skill-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px 120px;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--fc-line);
}
.skill-row:last-child { border-bottom: 0; }
.skill-name { font-size: var(--fc-size-body-large); font-weight: 600; }
.skill-from { font-size: var(--fc-size-small); color: var(--fc-gray-600); margin-top: 2px; }

.skill-meter { display: flex; gap: 4px; }
.skill-meter i {
  flex: 1;
  height: 10px;
  border-radius: 3px;
  background: var(--fc-gray-200);
}
.skill-meter i[data-on="true"] { background: var(--fc-green); }

.band-tag {
  justify-self: end;
  font-size: var(--fc-size-label);
  letter-spacing: var(--fc-track-label);
  font-weight: 700;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--fc-radius-pill);
  white-space: nowrap;
}
.band-strong     { background: var(--fc-green-wash); color: var(--fc-green-deep); }
.band-developed  { background: rgba(143, 192, 238, 0.30); color: var(--fc-info); }
.band-developing { background: rgba(255, 201, 60, 0.30); color: var(--fc-warning); }
.band-notyet     { background: var(--fc-gray-100); color: var(--fc-gray-600); }


/* ---------- CAREER MATCH ---------- */

.matches { display: grid; gap: var(--space-5); margin-top: var(--space-7); }

.career-card {
  background: var(--fc-surface);
  border-radius: var(--fc-radius-lg-card);
  padding: var(--space-6);
  box-shadow: var(--fc-shadow-card);
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
  border-left: 6px solid var(--fc-gray-200);
}
.career-card[data-rank="1"] { border-left-color: var(--fc-violet); }
.career-card[data-rank="2"] { border-left-color: rgba(91, 63, 217, 0.55); }
.career-card[data-rank="3"] { border-left-color: rgba(91, 63, 217, 0.28); }

.career-fit {
  font-family: var(--fc-font-display);
  font-size: var(--fc-size-h1);
  line-height: 0.9;
  letter-spacing: var(--fc-track-h1);
  font-weight: 800;
  color: var(--fc-violet);
  font-variant-numeric: tabular-nums;
}
.career-rank {
  font-size: var(--fc-size-label);
  letter-spacing: var(--fc-track-label);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--fc-gray-500);
  margin-bottom: var(--space-2);
}
.career-why { margin-top: var(--space-4); display: grid; gap: var(--space-2); }
.career-why li {
  display: flex;
  gap: var(--space-3);
  color: var(--fc-gray-700);
  font-size: var(--fc-size-small);
  line-height: 1.55;
}
.career-why li::before {
  content: "";
  flex: none;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--fc-violet);
  margin-top: 9px;
}


/* ---------- RECOMMENDATION ---------- */

.rec-band { background: var(--fc-canopy); color: var(--fc-cream); padding-block: var(--space-9); }
.rec-name {
  font-family: var(--fc-font-display);
  font-size: var(--fc-size-hero);
  line-height: 0.96;
  letter-spacing: var(--fc-track-hero);
  font-weight: 800;
  margin-block: var(--space-4) var(--space-6);
}
.rec-why { display: grid; gap: var(--space-4); max-width: 62ch; }
.rec-why li {
  display: flex;
  gap: var(--space-4);
  color: rgba(251, 247, 236, 0.86);
  line-height: 1.6;
}
.rec-why li::before {
  content: "";
  flex: none;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--fc-citrus);
  margin-top: 11px;
  transform: rotate(45deg);
}

.start-here {
  margin-top: var(--space-7);
  padding: var(--space-6);
  border-radius: var(--fc-radius-lg-card);
  border: 2px solid var(--fc-citrus);
  background: rgba(255, 122, 26, 0.12);
}


/* ---------- ENROLLMENT ---------- */

.enroll-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--space-8);
  align-items: start;
  margin-top: var(--space-7);
}

.plan-card {
  background: var(--fc-surface);
  border-radius: var(--fc-radius-lg-card);
  padding: var(--space-6);
  box-shadow: var(--fc-shadow-card);
  position: sticky;
  top: var(--space-5);
}

.plan-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  padding: var(--space-1);
  background: var(--fc-gray-100);
  border-radius: var(--fc-radius-input);
  margin-block: var(--space-5);
}
.plan-btn {
  font-family: var(--fc-font-body);
  font-size: var(--fc-size-small);
  font-weight: 600;
  padding: 12px 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--fc-gray-600);
  cursor: pointer;
}
.plan-btn[aria-pressed="true"] {
  background: var(--fc-surface);
  color: var(--fc-ink);
  box-shadow: 0 1px 3px rgba(20, 18, 12, 0.18);
}

.price {
  font-family: var(--fc-font-display);
  font-size: var(--fc-size-h1);
  line-height: 1;
  letter-spacing: var(--fc-track-h1);
  font-weight: 800;
}
.price-sub { color: var(--fc-gray-600); margin-top: var(--space-2); font-size: var(--fc-size-small); }
.price-diff { margin-top: var(--space-3); font-size: var(--fc-size-small); color: var(--fc-warning); font-weight: 600; }

.includes { display: grid; gap: var(--space-4); margin-top: var(--space-6); }
.include {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}
.include .tick {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--fc-green-wash);
  color: var(--fc-green-deep);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700;
  margin-top: 2px;
}
.include b { display: block; font-size: var(--fc-size-body); font-weight: 600; }
.include span { display: block; font-size: var(--fc-size-small); color: var(--fc-gray-600); margin-top: 2px; line-height: 1.5; }

.payment-notice {
  margin-top: var(--space-5);
  padding: var(--space-5);
  border-radius: var(--fc-radius-input);
  border: 2px dashed var(--fc-gray-400);
  background: var(--fc-gray-100);
}

.other-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.other-path {
  border: 1px solid var(--fc-line);
  border-radius: var(--fc-radius-sm-card);
  padding: var(--space-5);
  background: var(--fc-cream);
}

.reserve-form { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.reserve-done {
  margin-top: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--fc-radius-input);
  background: var(--fc-green-wash);
  border: 1px solid var(--fc-green);
}

.empty-state {
  background: var(--fc-surface);
  border-radius: var(--fc-radius-lg-card);
  padding: var(--space-7);
  box-shadow: var(--fc-shadow-card);
  max-width: 56ch;
}


/* ---------- PHASE 4 RESPONSIVE ---------- */

@media (max-width: 900px) {
  .enroll-grid { grid-template-columns: minmax(0, 1fr); }
  .plan-card { position: static; }
}

@media (max-width: 720px) {
  .snapshot { grid-template-columns: minmax(0, 1fr); }
  .career-card { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .skill-row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); }
  .skill-meter { display: none; }
  .other-paths { grid-template-columns: minmax(0, 1fr); }
  .rec-band { padding-block: var(--space-8); }
}


/* ==========================================================
   BRAND MARK · PHASE 4A
   Replaces the rotated square placeholder. Approved and locked.
   ========================================================== */

.fc-mark { display: block; flex: none; }
.fc-mark .fc-mark-punch { fill: var(--fc-canopy); }
.fc-mark .fc-mark-glyph { fill: var(--fc-cream); }
.fc-mark .fc-mark-arm   { fill: var(--fc-citrus); }

/* On dark surfaces the punch and glyph swap. The citrus arm never moves,
   which is what keeps the mark recognisable in both places. */
.fc-mark[data-invert="true"] .fc-mark-punch { fill: var(--fc-cream); }
.fc-mark[data-invert="true"] .fc-mark-glyph { fill: var(--fc-canopy); }

/* The placeholder is retained as a no-JS fallback only. If the module
   never runs, a small canopy square is better than an empty gap. */
.wordmark-dot {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--fc-canopy);
  transform: none;
}


/* ==========================================================
   LEARNER APPLICATION · PHASE 5
   Home and My Path. New components only.
   ========================================================== */

/* ---------- LEARNER SHELL ---------- */

.learner {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  min-height: 100vh;
}

.rail {
  border-right: 1px solid var(--fc-line);
  padding: var(--space-5) var(--space-4);
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  background: var(--fc-cream);
}

.rail-nav { display: grid; gap: var(--space-1); }
.rail-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 12px var(--space-4);
  border-radius: var(--fc-radius-input);
  font-size: var(--fc-size-body);
  font-weight: 600;
  color: var(--fc-gray-700);
  text-decoration: none;
}
.rail-link:hover { background: var(--fc-gray-100); }
.rail-link[aria-current="page"] { background: var(--fc-green-wash); color: var(--fc-green-deep); }
.rail-link[data-soon="true"] { color: var(--fc-gray-400); pointer-events: none; }
.rail-soon {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--fc-track-label);
  text-transform: uppercase;
  color: var(--fc-gray-400);
}

.learner-main { padding: var(--space-8) var(--space-7) var(--space-9); min-width: 0; }
.learner-col { max-width: 880px; }

/* Mobile tab bar */
.tabbar { display: none; }


/* ---------- SAMPLE BANNER ---------- */

.sample-bar {
  background: var(--fc-yellow);
  color: var(--fc-ink);
  padding: var(--space-3) var(--space-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--fc-size-small);
  font-weight: 600;
}
.sample-bar button {
  font-family: var(--fc-font-body);
  font-size: var(--fc-size-small);
  font-weight: 700;
  border: 2px solid var(--fc-ink);
  background: transparent;
  color: var(--fc-ink);
  border-radius: var(--fc-radius-pill);
  padding: 6px 14px;
  cursor: pointer;
}


/* ---------- HOME ---------- */

.welcome { margin-bottom: var(--space-7); }
.goal-line {
  font-family: var(--fc-font-display);
  font-size: var(--fc-size-h2);
  line-height: var(--fc-lh-h2);
  letter-spacing: var(--fc-track-h2);
  font-weight: 700;
  color: var(--fc-green-deep);
  margin-top: var(--space-3);
}

.progress-block {
  background: var(--fc-surface);
  border-radius: var(--fc-radius-lg-card);
  padding: var(--space-6);
  box-shadow: var(--fc-shadow-card);
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
}

.ring { position: relative; width: 132px; height: 132px; }
.ring svg { transform: rotate(-90deg); }
.ring-track { fill: none; stroke: var(--fc-gray-200); stroke-width: 12; }
.ring-fill {
  fill: none;
  stroke: var(--fc-green);
  stroke-width: 12;
  stroke-linecap: round;
  transition: stroke-dashoffset var(--fc-dur-slow) var(--fc-ease-out);
}
.ring-value {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--fc-font-display);
  font-size: var(--fc-size-h3);
  font-weight: 800;
  letter-spacing: var(--fc-track-h2);
  font-variant-numeric: tabular-nums;
}

/* Next up. The single most important thing on this page. */
.nextup {
  border-radius: var(--fc-radius-lg-card);
  padding: var(--space-6);
  background: var(--fc-canopy);
  color: var(--fc-cream);
  margin-top: var(--space-5);
}
.nextup h2 {
  font-family: var(--fc-font-display);
  font-size: var(--fc-size-h2);
  line-height: var(--fc-lh-h2);
  letter-spacing: var(--fc-track-h2);
  font-weight: 800;
  color: var(--fc-cream);
  margin: var(--space-3) 0;
}
.nextup p { color: rgba(251, 247, 236, 0.82); max-width: 56ch; }
.nextup-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(251, 247, 236, 0.22);
  align-items: center;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-7);
}
.stat {
  background: var(--fc-surface);
  border-radius: var(--fc-radius-sm-card);
  padding: var(--space-5);
  box-shadow: var(--fc-shadow-card);
}
.stat-value {
  font-family: var(--fc-font-display);
  font-size: var(--fc-size-h1);
  line-height: 1;
  letter-spacing: var(--fc-track-h1);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--fc-violet);
}
.stat-label { font-size: var(--fc-size-small); font-weight: 700; margin-top: var(--space-3); }
.stat-note { font-size: var(--fc-size-small); color: var(--fc-gray-600); margin-top: 6px; line-height: 1.5; }


/* ---------- THE ASSIST BAR · SIGNATURE COMPONENT ---------- */

.assist { display: inline-flex; flex-direction: column; gap: 6px; }
.assist-segs { display: flex; gap: 4px; }
.assist-segs i {
  width: 22px;
  height: 8px;
  border-radius: 2px;
  background: var(--fc-gray-200);
  border: 1px solid var(--fc-gray-300);
  transition: background-color var(--fc-dur-slow) var(--fc-ease);
}
.assist-segs i[data-lit="true"] { background: var(--fc-green); border-color: var(--fc-green); }
.assist-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--fc-track-label);
  text-transform: uppercase;
  color: var(--fc-gray-600);
}

/* On canopy the bar inverts so it stays readable. */
.nextup .assist-segs i,
.residency-card .assist-segs i { background: rgba(251, 247, 236, 0.18); border-color: rgba(251, 247, 236, 0.3); }
.nextup .assist-segs i[data-lit="true"],
.residency-card .assist-segs i[data-lit="true"] { background: var(--fc-yellow); border-color: var(--fc-yellow); }
.nextup .assist-label,
.residency-card .assist-label { color: rgba(251, 247, 236, 0.72); }

/* Certification has no lit segments, so it takes an ink outline instead
   of reading as an empty broken control. */
.assist[data-level="4"] .assist-segs i { border-color: var(--fc-ink); background: transparent; }


/* ---------- MY PATH ---------- */

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 2px solid var(--fc-ink);
  margin-bottom: var(--space-5);
}
.section-count { font-size: var(--fc-size-small); color: var(--fc-gray-600); font-variant-numeric: tabular-nums; }

.section-block { margin-bottom: var(--space-8); }
.section-summary { color: var(--fc-gray-600); max-width: 62ch; margin-bottom: var(--space-5); }

.section-progress {
  display: flex;
  gap: 3px;
  margin-bottom: var(--space-5);
}
.section-progress i {
  flex: 1;
  height: 6px;
  border-radius: 2px;
  background: var(--fc-gray-200);
}
.section-progress i[data-state="complete"]    { background: var(--fc-green); }
.section-progress i[data-state="in_progress"] { background: var(--fc-yellow); }

.module-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--fc-line);
}
.module-row:last-child { border-bottom: 0; }

.module-num {
  font-family: var(--fc-font-display);
  font-size: var(--fc-size-body-large);
  font-weight: 800;
  color: var(--fc-gray-400);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}
.module-row[data-status="complete"] .module-num { color: var(--fc-green); }
.module-row[data-status="in_progress"] .module-num { color: var(--fc-warning); }

.module-name { font-size: var(--fc-size-body-large); font-weight: 600; }
.module-row[data-status="building"] .module-name { color: var(--fc-gray-500); }
.module-summary { font-size: var(--fc-size-small); color: var(--fc-gray-600); margin-top: 4px; max-width: 58ch; line-height: 1.5; }
.module-meta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); align-items: center; }
.module-mins { font-size: var(--fc-size-small); color: var(--fc-gray-500); font-variant-numeric: tabular-nums; }

.module-first {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--fc-track-label);
  text-transform: uppercase;
  color: var(--fc-ink);
  background: var(--fc-yellow);
  border-radius: var(--fc-radius-pill);
  padding: 4px 10px;
}

.status-tag {
  justify-self: end;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--fc-track-label);
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--fc-radius-pill);
  white-space: nowrap;
}
.status-building    { background: var(--fc-gray-100); color: var(--fc-gray-600); }
.status-available   { background: var(--fc-green-wash); color: var(--fc-green-deep); }
.status-in_progress { background: rgba(255, 201, 60, 0.32); color: var(--fc-warning); }
.status-complete    { background: var(--fc-green); color: var(--fc-cream); }

/* Residency and certification */
.residency { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.residency-card {
  background: var(--fc-canopy);
  color: var(--fc-cream);
  border-radius: var(--fc-radius-lg-card);
  padding: var(--space-5);
}
.residency-card h3 { color: var(--fc-cream); margin-bottom: var(--space-2); }
.residency-card p { color: rgba(251, 247, 236, 0.78); font-size: var(--fc-size-small); line-height: 1.5; }
.residency-count {
  font-family: var(--fc-font-display);
  font-size: var(--fc-size-h1);
  line-height: 1;
  font-weight: 800;
  color: var(--fc-yellow);
  font-variant-numeric: tabular-nums;
}

.cert-block {
  border: 2px solid var(--fc-ink);
  border-radius: var(--fc-radius-lg-card);
  padding: var(--space-6);
  background: var(--fc-surface);
}
.cert-parts { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.cert-part {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--fc-line);
  align-items: baseline;
}
.cert-part b { font-size: var(--fc-size-small); letter-spacing: var(--fc-track-label); text-transform: uppercase; }


/* ---------- PHASE 5 RESPONSIVE ---------- */

@media (max-width: 1080px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .learner { grid-template-columns: minmax(0, 1fr); }
  .rail { display: none; }
  .learner-main { padding: var(--space-6) var(--space-4) var(--space-10); }
  .residency { grid-template-columns: minmax(0, 1fr); }

  .tabbar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--fc-cream);
    border-top: 1px solid var(--fc-line);
    z-index: 40;
  }
  .tabbar a {
    padding: var(--space-3) var(--space-2) calc(var(--space-3) + env(safe-area-inset-bottom));
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--fc-gray-600);
    text-decoration: none;
  }
  .tabbar a[aria-current="page"] { color: var(--fc-green-deep); box-shadow: inset 0 3px 0 0 var(--fc-green); }
  .tabbar a[data-soon="true"] { color: var(--fc-gray-400); pointer-events: none; }
}

@media (max-width: 720px) {
  .progress-block { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .module-row { grid-template-columns: 28px minmax(0, 1fr); }
  .status-tag { grid-column: 2; justify-self: start; margin-top: var(--space-2); }
  .stats { grid-template-columns: minmax(0, 1fr); }
}


/* ==========================================================
   MODULE AND LESSON · PHASE 6
   ========================================================== */

.stage-strip { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: var(--space-2); margin-top: var(--space-6); }
.stage {
  border-top: 3px solid var(--fc-gray-200);
  padding-top: var(--space-3);
}
.stage[data-state="done"]    { border-top-color: var(--fc-green); }
.stage[data-state="current"] { border-top-color: var(--fc-citrus); }
.stage-name { font-weight: 700; font-size: var(--fc-size-small); }
.stage-detail { font-size: var(--fc-size-small); color: var(--fc-gray-600); margin-top: 4px; line-height: 1.45; }

.chunk-list { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.chunk {
  display: grid;
  grid-template-columns: 40px minmax(0,1fr) auto;
  gap: var(--space-4);
  align-items: center;
  background: var(--fc-surface);
  border-radius: var(--fc-radius-sm-card);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--fc-shadow-card);
  text-decoration: none;
  color: var(--fc-ink);
  transition: transform var(--fc-dur-base) var(--fc-ease), box-shadow var(--fc-dur-base) var(--fc-ease);
}
.chunk:hover { transform: translateY(-2px); box-shadow: var(--fc-shadow-lift); }
.chunk-num { font-family: var(--fc-font-display); font-weight: 800; color: var(--fc-gray-400); font-variant-numeric: tabular-nums; }
.chunk[data-done="true"] .chunk-num { color: var(--fc-green); }
.chunk-title { font-size: var(--fc-size-body-large); font-weight: 600; }
.chunk-mins { font-size: var(--fc-size-small); color: var(--fc-gray-500); font-variant-numeric: tabular-nums; }

/* Lesson body */
.lesson-body { max-width: 68ch; }
.lesson-body > * + * { margin-top: var(--space-5); }
.lesson-body p { font-size: var(--fc-size-body-large); line-height: 1.6; }

.callout {
  border-radius: var(--fc-radius-input);
  padding: var(--space-5);
  border-left: 5px solid var(--fc-green);
  background: var(--fc-green-wash);
}
.callout[data-tone="warn"] { border-left-color: var(--fc-citrus); background: rgba(255,122,26,.12); }
.callout-title { font-weight: 700; margin-bottom: var(--space-2); }

.cmp { width: 100%; border-collapse: collapse; font-size: var(--fc-size-body); }
.cmp th, .cmp td { text-align: left; padding: var(--space-3); border-bottom: 1px solid var(--fc-line); vertical-align: top; }
.cmp thead th { background: var(--fc-gray-100); font-size: var(--fc-size-small); font-weight: 700; }
.cmp tbody th { font-weight: 600; color: var(--fc-gray-600); font-size: var(--fc-size-small); width: 26%; }

.pick { background: var(--fc-surface); border-radius: var(--fc-radius-lg-card); padding: var(--space-6); box-shadow: var(--fc-shadow-card); }
.pick-opts { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.pick-why { margin-top: var(--space-4); padding: var(--space-4); border-radius: var(--fc-radius-input); font-size: var(--fc-size-body); line-height: 1.6; }
.pick-why[data-correct="true"]  { background: var(--fc-green-wash); border-left: 4px solid var(--fc-green); }
.pick-why[data-correct="false"] { background: rgba(255,201,60,.28); border-left: 4px solid var(--fc-warning); }

/* Interactive timeline */
.tline { display: grid; gap: 0; margin-top: var(--space-5); }
.tev {
  display: grid;
  grid-template-columns: 26px 90px minmax(0,1fr);
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-4) var(--space-4) var(--space-4) 0;
  border-bottom: 1px solid var(--fc-line);
  background: none;
  border-left: 0; border-right: 0; border-top: 0;
  text-align: left;
  font-family: var(--fc-font-body);
  cursor: pointer;
  width: 100%;
}
.tev:hover { background: var(--fc-gray-100); }
.tev-box { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--fc-gray-300); background: var(--fc-surface); margin-top: 2px; position: relative; }
.tev[aria-pressed="true"] .tev-box { background: var(--fc-citrus); border-color: var(--fc-citrus); }
.tev[aria-pressed="true"] .tev-box::after { content:""; position:absolute; left:5px; top:1px; width:6px; height:11px; border:solid var(--fc-ink); border-width:0 2px 2px 0; transform:rotate(42deg); }
.tev-time { font-weight: 700; font-variant-numeric: tabular-nums; }
.tev-place { font-size: var(--fc-size-small); color: var(--fc-gray-600); }
.tev-detail { font-size: var(--fc-size-body-large); font-weight: 500; }
.tev-why { margin-top: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--fc-radius-input); font-size: var(--fc-size-small); line-height: 1.55; }
.tev-why[data-signal="true"]  { background: rgba(255,122,26,.12); border-left: 3px solid var(--fc-citrus); }
.tev-why[data-signal="false"] { background: var(--fc-gray-100); border-left: 3px solid var(--fc-gray-400); }

/* Try + mini case */
.mini-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.mini-tab {
  border: 2px solid var(--fc-gray-300); background: var(--fc-surface);
  border-radius: var(--fc-radius-pill); padding: 8px 16px;
  font-family: var(--fc-font-body); font-size: var(--fc-size-small); font-weight: 600;
  cursor: pointer; color: var(--fc-gray-600);
}
.mini-tab[aria-selected="true"] { border-color: var(--fc-green); background: var(--fc-green-wash); color: var(--fc-green-deep); }

.data-tbl { width: 100%; border-collapse: collapse; font-size: var(--fc-size-small); }
.data-tbl th { text-align: left; padding: var(--space-2) var(--space-3); background: var(--fc-gray-100); font-weight: 700; font-size: var(--fc-size-label); letter-spacing: var(--fc-track-label); text-transform: uppercase; }
.data-tbl td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--fc-line); }
.data-tbl .n { text-align: right; font-variant-numeric: tabular-nums; }

/* Bridge */
.bridge { background: var(--fc-canopy); color: var(--fc-cream); border-radius: var(--fc-radius-xl); padding: var(--space-8); text-align: center; margin-top: var(--space-8); }
.bridge h2 { font-family: var(--fc-font-display); font-size: var(--fc-size-hero); line-height: 0.98; color: var(--fc-cream); margin-bottom: var(--space-5); }
.bridge p { color: rgba(251,247,236,.86); max-width: 54ch; margin-inline: auto; font-size: var(--fc-size-body-large); }
.bridge-warn { margin-top: var(--space-6); padding: var(--space-5); border: 1px solid var(--fc-citrus); border-radius: var(--fc-radius-input); background: rgba(255,122,26,.14); }

.lesson-nav { display: flex; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--fc-line); }

@media (max-width: 900px) {
  .stage-strip { grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-4); }
}
@media (max-width: 720px) {
  .stage-strip { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .chunk { grid-template-columns: 32px minmax(0,1fr); }
  .chunk-mins { grid-column: 2; }
  .tev { grid-template-columns: 22px minmax(0,1fr); gap: var(--space-3); }
  .tev-time { grid-column: 2; }
  .cmp tbody th { width: auto; }
  .lesson-nav { flex-direction: column-reverse; }
  .lesson-nav .btn { width: 100%; }
}