/* ══ Barlow — one family, two weights, self-hosted, subsetted ══ */
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/barlow-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/barlow-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlow-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlow-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* ══ Root sizing: 112.5% = 18px base; every size below is rem ══ */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;font-size:112.5%}
*,*::before,*::after{box-sizing:border-box}

/* ══ Accessibility layer ══ */
:focus-visible{outline:2px solid var(--primary-focus);outline-offset:2px;border-radius:6px}
[tabindex="-1"]:focus{outline:none}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--leaf);color:#fff;padding:12px 16px;border-radius:8px;text-decoration:none}
.skip:focus{top:12px}
a,button,summary,label,select,[role="button"]{touch-action:manipulation}
/* Touch targets: 48px minimum for anything interactive */
button,.btn,[role="button"],select,input[type="submit"],a.btn{min-height:48px}
/* Headings: balanced wrapping, no overflow */
h1,h2,h3,h4{text-wrap:balance;overflow-wrap:break-word}
/* Tabular figures wherever numbers align */
.stat-value,.hero-number,table td,table th{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-property:color,background-color,border-color,opacity,box-shadow!important}
  .pbar-fill{transition:none}
}

/* ════ VIEW SWITCHING — direct style manipulation only ════ */
#view-landing { display: block; }
#view-course  { display: none; background: #F7F9F8; min-height: 100vh; min-height: 100svh; }

/* Body class drives view visibility — no JS inline styles needed */
:root {
  /* ══ Colour: one light system. White grounds, green voice, amber rationed ══ */

  /* ── Primary (green, 7:1 with white text) ── */
  --leaf: #14603A;          /* primary action, links, mission 1 */
  --leaf2: #0F4A2D;         /* hover, deep green ink */
  --leaf3: #0A3520;         /* pressed */
  --on-primary: #FFFFFF;
  --primary-focus: #14603A;
  --primary-tint: #EDF7F1;
  --primary-line: #BFE0CC;  /* lines and ::selection only */

  /* ── Signal amber: fill, ink (7:1), tints ── */
  --gold: #D9941A;
  --gold2: #6B4200;
  --gold-light: #FFF3DF;
  --gold-pale: #FFF9F0;

  /* ── Surfaces ── */
  --surface: #FFFFFF;
  --surface-cool: #F7F9FB;    /* pull-quote ground */
  --surface-cool-2: #EEF2F7;
  --mist: #F7F9F8;            /* page ground */
  --mist2: #EFF4F1;
  --mist3: #E2EAE5;
  --border: #E2EAE5;
  --border2: #C6D5CC;

  /* ── Ink, all 7:1 or better on every surface ── */
  --text: #0E1B2E;
  --text2: #35414F;
  --text3: #344056;
  --text4: #3D4B66;           /* placeholders */

  /* ── Semantic and mission colours (ink, fill, tint) ── */
  --red: #8C1F31;             /* danger, mission 5 */
  --red-fill: #D93F4C;
  --red-pale: #FDECEF;
  --red-light: #EDB3BD;
  --success: #0A5634;
  --success-fill: #1F8A5B;
  --blue: #1E3F7A;            /* mission 2 */
  --blue-pale: #E8F2FA;
  --purple: #4B2FA6;          /* mission 4 */
  --plum: #4B2FA6;
  --plum-pale: #F1EEFC;

  /* ── Focus ── */
  --focus-halo: rgba(26,122,74,.18);

  /* ══ Type: one family, two weights ══ */
  --sans: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* ── Type scale: fixed rem steps, ratio 1.125 from 16px, on an 18px root.
        caption 16 · label/body-sm 18 · body/body-lg/lead 20.25 · title-sm 22.8
        title/h4 25.6 · h3 28.8 · h2 32.4 · h1 36.5 · display-sm 41 · display 46.2
        Phones step the three largest down one or two places (see below). ── */
  --fs-display: 2.566rem;
  --fs-display-sm: 2.281rem;
  --fs-h1: 2.027rem;
  --fs-h2: 1.802rem;
  --fs-h3: 1.602rem;
  --fs-h4: 1.424rem;
  --fs-title: 1.424rem;
  --fs-title-sm: 1.266rem;
  --fs-lead: 1.125rem;
  --fs-body-lg: 1.125rem;
  --fs-body: 1.125rem;
  --fs-body-sm: 1rem;
  --fs-label: 1rem;
  --fs-caption: .889rem;
  --fs-hero: 3.244rem;        /* 58.4px: landing headline */
  --fs-hero-num: 4.105rem;    /* 73.9px: the one rationed figure */

  /* ── Motion ── */
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --dur-fast: 120ms;
  --dur: 180ms;

  /* ── Spacing ── */
  --sp-xxs: 2px;
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 12px;
  --sp-lg: 16px;
  --sp-xl: 24px;
  --sp-xxl: 32px;
  --sp-huge: 64px;

  /* ── Shape & elevation ── */
  --r8: 8px;
  --r10: 10px;
  --r14: 14px;
  --r20: 20px;
  --sh: 0 1px 2px rgba(14,27,46,.05), 0 4px 16px rgba(14,27,46,.05);
  --sh2: 0 12px 40px rgba(11,37,69,.16);

  color-scheme: light;
}

html, body {
  min-height: 100%;
  font-family: var(--sans);
  color: var(--text);
  overflow-x: hidden;
}
#view-landing {
  background: #FFFFFF;
  min-height: 100vh;
  min-height: 100svh;
  position: relative;
}


/* ── LAYOUT ── */
.page-wrap {
  min-height: 100vh;
  min-height: 100svh;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 480px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "hero    form"
    "footer  footer";
  position: relative;
  z-index: 1;
}

/* ── HEADER ── */
header {
  grid-area: header;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 56px;
  border-bottom: 1px solid var(--border);
}

.header-logo {
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight:400;
  color: var(--leaf);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.header-tag { display: none; }

.header-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.header-nav-item {
  font-family: var(--sans);
  font-size: var(--fs-caption);
  letter-spacing:0;
  color: var(--text2);
}

/* ── HERO LEFT ── */
.hero-left {
  grid-area: hero;
  padding: 80px 56px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  min-width: 0;
}

/* Classification line */
.hero-classify {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 48px;
}

.hero-classify-line {
  width: 32px;
  height: 1px;
  background: var(--leaf);
  opacity: 0.6;
}

.hero-classify-text {
  font-family: var(--sans);
  font-size: var(--fs-caption);
  letter-spacing:0;
  color: var(--text2);
}

/* Primary headline */
.hero-title {
  font-family: var(--sans);
  font-size:var(--fs-hero);
  font-weight:400;
  line-height: 1.2;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: 32px;
  padding-top: 4px;
}

.hero-title strong {
  font-weight:600;
  color: #ffffff;
}

.hero-title em {
  font-style: normal;
  color: inherit;
  font-weight: inherit;
}

/* The number */
.hero-number-block {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 40px;
  padding: 28px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.hero-number {
  font-family: var(--sans);
  font-size:var(--fs-hero-num);
  font-weight:400;
  color: var(--gold2);
  letter-spacing: -0.03em;
  line-height: 1;
}

.hero-number-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.hero-number-main {
  font-size: var(--fs-body-lg);
  font-weight:400;
  color: var(--text);
  line-height: 1.4;
}

.hero-number-sub {
  font-family: var(--sans);
  font-size: var(--fs-label);
  color: var(--text2);
  letter-spacing: 0.05em;
  overflow-wrap: anywhere;
}

/* Brief paragraph */
.hero-brief {
  font-size: var(--fs-body-lg);
  color: var(--text2);
  line-height: 1.8;
  max-width: 480px;
  margin-bottom: 48px;
}

.hero-brief strong {
  color: var(--text2);
  font-weight:400;
}

/* Missions strip */
.hero-missions {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  margin-bottom: 0;
}

.hero-mission-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 0;
  margin-right: 16px;
  border-right: 1px solid var(--border);
}

.hero-mission-tag:last-child {
  border-right: none;
}

.hero-mission-num {
  font-family: var(--sans);
  font-size: var(--fs-caption);
  color: var(--text2);
  letter-spacing: 0.08em;
}

.hero-mission-name {
  font-family: var(--sans);
  font-size: var(--fs-caption);
  letter-spacing:0;
  color: var(--text2);
}

/* ── FORM SIDE ── */
.page-divider { display: none; }

.form-side {
  grid-area: form;
  padding: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  background: var(--mist);
  border-left: 1px solid var(--border);
  min-width: 0;
}

.form-card {
  background: #FFFFFF;
  border-radius: 0;
  padding: 48px 48px;
  width: 100%;
  max-width: 100%;
  border: none;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
}

.form-heading {
  margin-bottom: 0;
}

.form-heading .form-label-top {
  font-family: var(--sans);
  font-size: var(--fs-caption);
  letter-spacing:0;
  color: var(--text2);
  margin-bottom: 16px;
  display: block;
}

.form-heading h2 {
  font-family: var(--sans);
  font-size: var(--fs-h2);
  font-weight:400;
  color: var(--text);
  line-height: 1.25;
  margin-bottom: 8px;
}

.form-heading p {
  font-size: var(--fs-body-sm);
  color: var(--text2);
  line-height: 1.65;
  margin-bottom: 32px;
}

.form-divider {
  height: 1px;
  background: var(--border);
  margin: 24px 0;
}

/* ── FIELDS ── */
.field-group {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 28px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field label {
  font-size: var(--fs-caption);
  font-weight:400;
  color: var(--text2);
  letter-spacing:0;
  font-family: var(--sans);
}

.field label .req { color: var(--red); opacity: 1; font-weight: 600; }

.field input,
.field select {
  font-family: var(--sans);
  font-size: var(--fs-lead); /* 16px minimum prevents iOS Safari auto-zoom on focus */
  color: var(--text);
  background: #FFFFFF;
  border: 1px solid var(--border2);
  border-radius: 6px;
  padding: 12px 16px;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
  appearance: none;
  -webkit-appearance: none;
}

.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2335414F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-color: #FFFFFF;
  padding-right: 38px;
  cursor: pointer;
  color: var(--text);
}

.field select option {
  background: #FFFFFF;
  color: var(--text);
}

.field select optgroup {
  background: #FFFFFF;
  color: var(--text2);
}

.field input::placeholder {
  color: var(--text4);
  font-size: var(--fs-body);
}

.field input:focus,
.field select:focus {
  border-color: var(--leaf);
  background: #FFFFFF;
  box-shadow: 0 0 0 3px var(--focus-halo);
}

/* ── TWO-COL FIELDS ── */
.field-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 16px;
}
.field-row > * { min-width: 0; }
.field input, .field select, .field textarea { max-width: 100%; }

/* ── SUBMIT BUTTON ── */
.submit-btn {
  width: 100%;
  background: var(--leaf);
  color: var(--on-primary);
  border: none;
  border-radius: 6px;
  padding: 16px 24px;
  font-size: var(--fs-body);
  font-weight: 600;
  font-family: var(--sans);
  letter-spacing:0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition:background-color var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out),transform var(--dur-fast) var(--ease-out);
}

@media (hover:hover) and (pointer:fine){.submit-btn:hover {
  background: #EDF7F1;
}}

.submit-btn:active {
  transform: translateY(0);
}

.submit-btn .arrow {
  font-size: var(--fs-lead);
  font-style: normal;
  font-family: var(--sans);
  font-weight: 400;
}

/* ── VALIDATION ── */
.field input.error,
.field select.error {
  border-color: var(--red);
  background: var(--red-pale);
}

.field-error {
  font-size: var(--fs-caption);
  color: var(--red);
  font-family: var(--sans);
  display: none;
  letter-spacing: 0.04em;
}

.field-error.show {
  display: block;
}

/* ── SUCCESS STATE ── */
.success-state {
  display: none;
  text-align: center;
  padding: 40px 20px;
}

.success-icon {
  width: 56px;
  height: 56px;
  background: var(--primary-tint);
  border: 1px solid var(--primary-line);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: var(--fs-h3);
}

.success-title {
  font-family: var(--sans);
  font-size: var(--fs-h4);
  font-weight:400;
  color: var(--text);
  margin-bottom: 8px;
}

.success-sub {
  font-size: var(--fs-body);
  color: var(--text2);
  line-height: 1.65;
  max-width: 280px;
  margin: 0 auto 24px;
}

.success-name-chip {
  display: inline-block;
  background: var(--focus-halo);
  border: 1px solid var(--primary-line);
  color: var(--leaf);
  font-size: var(--fs-label);
  font-family: var(--sans);
  font-weight:400;
  padding: 4px 16px;
  border-radius: 3px;
  margin-bottom: 28px;
  letter-spacing: 0.05em;
}

.launch-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--leaf);
  color: #081A32;
  border: none;
  border-radius: 6px;
  padding: 12px 28px;
  font-size: var(--fs-body-sm);
  font-weight: 600;
  font-family: var(--sans);
  letter-spacing:0;
  cursor: pointer;
  text-decoration: none;
  transition:background-color var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out),transform var(--dur-fast) var(--ease-out);
}

@media (hover:hover) and (pointer:fine){.launch-btn:hover {
  background: #EDF7F1;
}}

/* ── FOOTER ── */
footer {
  grid-area: footer;
  padding: 16px 56px;
  padding-bottom: max(16px, calc(16px + env(safe-area-inset-bottom)));
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-left {
  font-family: var(--sans);
  font-size: var(--fs-caption);
  color: var(--text2);
  letter-spacing:0;
}

.footer-right {
  font-family: var(--sans);
  font-size: var(--fs-caption);
  color: var(--text2);
  letter-spacing:0;
}

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .page-wrap {
    grid-template-columns: 1fr 420px;
  }
  .hero-left { padding: 60px 40px 48px; }
  .form-card { padding: 40px 32px; }
}

@media (max-width: 860px) {
  /* Mobile: revert to scrollable stacked layout */
  .page-wrap {
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    overflow: visible;
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "hero"
      "form"
      "footer";
  }
  .hero-left {
    overflow: visible;
    padding: 48px 28px 40px;
  }
  .form-side {
    overflow: visible;
    border-left: none;
    border-top: 1px solid var(--border);
  }
  .form-card {
    overflow-y: visible;
    padding: 40px 28px;
  }
  header { padding: 20px 28px; }
  .field-row { grid-template-columns: 1fr; }
  footer { padding: 16px 28px; }
}

@media (max-width: 480px) {
  /* Topbar: keep the primary action reachable; secondary chips are non-essential */
  #topbar .xp-chip, #topbar .lvl-chip, #topbar #role-lbl { display: none !important; }
  header { padding: 16px 20px; gap: 12px; }
  .header-nav { gap: 16px; flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; }
  .hero-left { padding: 40px 20px 32px; }
  .hero-classify { margin-bottom: 28px; }
  .hero-missions { display: none; }
  .form-card { padding: 32px 20px; }
  footer { padding: 16px 20px; }
}


/* ════ COURSE STYLES ════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{height:100%}
body{min-height:100%}
body{color:var(--text);font-family:var(--sans);font-size:var(--fs-body);line-height:1.6;-webkit-font-smoothing:antialiased}
button{font-family:var(--sans);cursor:pointer;border:none;background:none;-webkit-tap-highlight-color:transparent}
*{-webkit-tap-highlight-color:transparent}
a{color:var(--leaf)}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:var(--mist2)}::-webkit-scrollbar-thumb{background:var(--mist3);border-radius:3px}
/* ── LAYOUT ── */
#app{position:relative;min-height:100vh;min-height:100svh;overflow-x:hidden}
.screen{display:none;position:fixed;top:108px;left:0;width:100%;height:calc(100vh - 108px);height:calc(100dvh - 108px);background:#F7F9F8;overflow-y:auto;overflow-x:hidden;box-sizing:border-box;-webkit-overflow-scrolling:touch;}
.screen.active{display:block}
/* ── TOPBAR ── */
#topbar{display:none;align-items:center;justify-content:space-between;gap:12px;padding:0 16px;padding-left:max(24px,calc(24px + env(safe-area-inset-left)));padding-right:max(24px,calc(24px + env(safe-area-inset-right)));height:54px;background:white;border-bottom:1px solid var(--border);position:-webkit-sticky;position:sticky;top:0;z-index:90;box-shadow:0 1px 0 var(--border)}
.topbar-brand{font-family:var(--sans);font-size:var(--fs-body-sm);font-weight:600;color:var(--leaf);letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1 1 auto}
.topbar-right{display:flex;align-items:center;gap:8px;flex:0 1 auto;min-width:0}
.xp-chip{display:flex;align-items:center;gap:4px;background:transparent;border:1px solid var(--border);padding:4px 12px;border-radius:999px;font-size:var(--fs-label);font-family:var(--sans);color:var(--text3)}
.lvl-chip{background:var(--mist2);border:1px solid var(--border);padding:4px 12px;border-radius:999px;font-size:var(--fs-label);font-family:var(--sans);color:var(--text2);letter-spacing:0;}
.btn-acad{background:var(--leaf);color:white;padding:8px 16px;border-radius:var(--r8);font-size:var(--fs-body-sm);font-weight:400;border:none;cursor:pointer;transition:background .15s}
@media (hover:hover) and (pointer:fine){.btn-acad:hover{background:var(--leaf2)}}
/* ── MISSION TRACK ── */
#track{display:none;padding:0 20px;background:white;border-bottom:1px solid var(--border);overflow-x:auto;white-space:nowrap}
.track-inner{display:inline-flex;align-items:center;gap:0;padding:2px 0}
.t-node{display:inline-flex;flex-direction:column;align-items:center;gap:2px;padding:12px 12px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .2s}
.t-node.locked{opacity:.4;cursor:default;pointer-events:none}
.t-dot{width:26px;height:26px;border-radius:50%;border:2px solid var(--border2);display:flex;align-items:center;justify-content:center;font-size:var(--fs-caption);font-family:var(--sans);color:var(--text3);transition:background-color var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.t-dot.done{background:var(--leaf);border-color:var(--leaf);color:white}
.t-dot.active{border-color:var(--leaf);color:var(--leaf);box-shadow:0 0 0 3px var(--primary-line)}
.t-lbl{font-size:var(--fs-caption);letter-spacing:0;color:var(--text3);transition:color .2s}
.t-lbl.active{color:var(--leaf)}
.t-lbl.done{color:var(--leaf2)}
.t-line{width:16px;height:2px;background:var(--border);display:inline-block;vertical-align:middle;transition:background .3s}
.t-line.done{background:var(--leaf)}
/* ── SCROLL BODY ── */

.mw{max-width:700px;margin:0 auto}
/* ── CORE COMPONENTS ── */
.card{background:white;border:1px solid var(--border);border-radius:var(--r20);padding:24px 24px;box-shadow:var(--sh)}
.card-sm{background:white;border:1px solid var(--border);border-radius:var(--r14);padding:16px 20px;box-shadow:var(--sh)}
.inset{background:var(--mist);border:1px solid var(--border);border-radius:var(--r14);padding:16px 20px}
.inset-gold{background:var(--gold-pale);border:1px solid var(--gold-light);border-radius:var(--r14);padding:16px 20px}
.inset-red{background:var(--red-pale);border:1px solid var(--red-light);border-radius:var(--r14);padding:16px 20px}
.inset-leaf{background:#EDF7F1;border:1px solid #B9D7EE;border-radius:var(--r14);padding:16px 20px}
.inset-sky{background:var(--blue-pale);border:1px solid #B9D7EE;border-radius:var(--r14);padding:16px 20px}
.inset-plum{background:var(--plum-pale);border:1px solid #C9BCF0;border-radius:var(--r14);padding:16px 20px}
/* ── TAGS / LABELS ── */
.tag{display:inline-block;font-size:var(--fs-caption);font-family:var(--sans);letter-spacing:0;padding:4px 8px;border-radius:999px}
.tag-leaf{background:#EDF7F1;color:var(--leaf2);border:1px solid #B9D7EE}
.tag-gold{background:var(--gold-pale);color:var(--gold2);border:1px solid var(--gold-light)}
.tag-red{background:var(--red-pale);color:var(--red);border:1px solid var(--red-light)}
.tag-sky{background:var(--blue-pale);color:var(--leaf2);border:1px solid #B9D7EE}
.tag-plum{background:var(--plum-pale);color:var(--plum);border:1px solid #C9BCF0}
.tag-muted{background:var(--mist2);color:var(--text3);border:1px solid var(--border)}
.section-label{font-size:var(--fs-label);font-family:var(--sans);letter-spacing:0;color:var(--text3);margin-bottom:8px}
/* ── TYPOGRAPHY ── */
.serif{font-family:var(--sans)}
.mono{font-family:var(--sans)}
.muted{color:var(--text2)}
.dim{color:var(--text3)}
.small{font-size:var(--fs-body)}
.xs{font-size:var(--fs-label)}
/* ── FLEX / GRID ── */
.col{display:flex;flex-direction:column}
.col-8{display:flex;flex-direction:column;gap:8px}
.col-12{display:flex;flex-direction:column;gap:12px}
.col-16{display:flex;flex-direction:column;gap:16px}
.col-20{display:flex;flex-direction:column;gap:20px}
.col-24{display:flex;flex-direction:column;gap:24px}
.row{display:flex;align-items:center;gap:12px}
.row-sb{display:flex;align-items:center;justify-content:space-between;gap:12px}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin:12px 0}
.stat-box{background:var(--mist);border:1px solid var(--border);border-radius:var(--r14);padding:16px;text-align:center}
.stat-n{font-size:var(--fs-h4);font-weight:600;font-family:var(--sans);margin:2px 0}
.stat-l{font-size:var(--fs-caption);color:var(--text3);letter-spacing:0}
.stat-box.bad .stat-n{color:var(--red)}
.stat-box.ok .stat-n{color:var(--leaf)}
.stat-box.gold .stat-n{color:var(--gold2)}
.stat-box.sky .stat-n{color:var(--leaf2)}
/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border-radius:var(--r10);font-size: var(--fs-body-lg);font-weight:400;cursor:pointer;border:none;transition:background-color var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out),transform var(--dur-fast) var(--ease-out);font-family:var(--sans)}
.btn-primary{background:var(--leaf);color:white}
@media (hover:hover) and (pointer:fine){.btn-primary:hover{background:var(--leaf2)}}
.btn-primary:active{transform:none}
.btn-outline{background:transparent;color:var(--leaf);border:1.5px solid var(--leaf)}
@media (hover:hover) and (pointer:fine){.btn-outline:hover{background:#EDF7F1}}
.btn-ghost{background:transparent;color:var(--text2);border:1px solid var(--border)}
@media (hover:hover) and (pointer:fine){.btn-ghost:hover{background:var(--mist2)}}
.btn-gold{background:var(--gold2);color:white}
@media (hover:hover) and (pointer:fine){.btn-gold:hover{background:#6B4200}}
.btn-sm{padding:8px 16px;font-size:var(--fs-body)}
.btn-full{width:100%;display:flex}
.btn:disabled{opacity:.38;cursor:not-allowed;transform:none!important;box-shadow:none!important}
/* ── OPTION BUTTONS ── */
.opt{display:block;width:100%;text-align:left;background:white;border:1.5px solid var(--border);border-radius:var(--r14);padding:12px 16px;font-size: var(--fs-body-lg);color:var(--text);cursor:pointer;line-height:1.55;transition:background-color var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out),transform var(--dur-fast) var(--ease-out);font-family:var(--sans)}
@media (hover:hover) and (pointer:fine){.opt:hover:not(:disabled){border-color:var(--leaf);background:#F7F9F8;transform:translateX(2px)}}
.opt.right{background:#EDF7F1;border-color:var(--leaf);color:var(--leaf2)}
.opt.wrong{background:var(--red-pale);border-color:var(--red);color:var(--red)}
.opt.show-correct{background:#f0faf4;border-color:var(--leaf);color:var(--leaf2)}
.opt:disabled{cursor:default}
.opt-key{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--border2);font-size:var(--fs-caption);font-family:var(--sans);color:var(--text3);margin-right:12px;flex-shrink:0;vertical-align:middle;transition:background-color var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.opt.right .opt-key{background:var(--leaf);border-color:var(--leaf);color:white}
.opt.wrong .opt-key{background:var(--red);border-color:var(--red);color:white}
.opt.show-correct .opt-key{background:var(--leaf2);border-color:var(--leaf);color:white}
/* ── FEEDBACK ── */
.fb{border-radius:var(--r14);padding:16px;margin-top:12px;display:none;}
.fb.show{display:block}
.fb.ok{background:#EDF7F1;border:1.5px solid #B9D7EE}
.fb.bad{background:var(--red-pale);border:1.5px solid var(--red-light)}
.fb-title{font-weight:600;margin-bottom:4px;font-size: var(--fs-body-lg)}
.fb.ok .fb-title{color:var(--leaf2)}
.fb.bad .fb-title{color:var(--red)}
/* ── CONCEPT REVEAL ── */
.concept-reveal{background:var(--plum-pale);border:1.5px solid #C9BCF0;border-radius:var(--r14);padding:20px;display:none;}
.concept-reveal.show{display:block}
.concept-kicker{font-size:var(--fs-caption);font-family:var(--sans);letter-spacing:0;color:var(--plum);margin-bottom:4px}
.concept-name{font-family:var(--sans);font-size:var(--fs-title);font-weight:600;color:var(--text);margin-bottom:8px}
.concept-body{font-size:var(--fs-body);color:var(--text2);line-height:1.7}
/* ── MISSION HERO ── */
.m-hero{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--r20);padding:24px;margin-bottom:20px;position:relative;overflow:hidden}
.m-hero-num{font-family:var(--sans);font-size:var(--fs-label);font-weight:600;letter-spacing:0;margin-bottom:8px}
.m-hero-title{font-family:var(--sans);font-size:var(--fs-h2);font-weight:600;margin-bottom:8px;line-height:1.25}
.m-hero-q{font-size:var(--fs-body);opacity:.8;border-left:3px solid var(--border2);padding-left:12px;margin-top:12px;line-height:1.6}
/* ── BADGE ── */
.badge-pop{display:flex;align-items:center;gap:20px;background:var(--gold-pale);border:1.5px solid var(--gold-light);border-radius:var(--r20);padding:20px;margin:20px 0;}
.badge-em{font-size:var(--fs-display-sm);flex-shrink:0;line-height:1}
.badge-name{font-family:var(--sans);font-size:var(--fs-title-sm);font-weight:600;color:var(--gold2)}
.badge-sub{font-size:var(--fs-body-sm);color:var(--text2);margin-top:4px}
/* ── XP TOAST ── */
#toast{position:fixed;top:64px;right:20px;z-index:999;background:var(--gold-pale);border:1.5px solid var(--gold-light);border-radius:var(--r10);padding:12px 16px;font-family:var(--sans);font-size:var(--fs-body);color:var(--gold2);display:none;pointer-events:none}

/* ── STEP PIPS ── */
.pips{display:flex;align-items:center;gap:4px;margin-bottom:20px}
.pip{width:8px;height:8px;border-radius:50%;background:var(--border2);transition:background-color var(--dur) var(--ease-out),width var(--dur) var(--ease-out)}
.pip.done{background:var(--leaf2)}
.pip.active{background:var(--leaf);width:22px;border-radius:4px;}
/* ── FIELD STORY ── */
.story{background:var(--gold-pale);border:1px solid var(--gold-light);border-left:4px solid var(--gold2);border-radius:0 var(--r14) var(--r14) 0;padding:16px;margin:16px 0}
.story-kicker{font-size:var(--fs-caption);font-family:var(--sans);letter-spacing:0;color:var(--gold2);margin-bottom:8px}
.story p{font-size:var(--fs-body);color:var(--text2);line-height:1.7}
/* ── CHECKLIST ── */
.chk-list{list-style:none;display:flex;flex-direction:column;gap:8px}
.chk-list li{display:flex;align-items:flex-start;gap:12px;font-size:var(--fs-body);color:var(--text2);line-height:1.55}
.chk-list li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--leaf2);margin-top:8px;flex-shrink:0}
/* ── MAP ── */
.map-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;padding:16px;background:var(--mist);border:1px solid var(--border);border-radius:var(--r14);margin:12px 0}
.mc{aspect-ratio:1;border-radius:3px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .15s,box-shadow .15s}
@media (hover:hover) and (pointer:fine){.mc:hover{transform:scale(1.18);z-index:2;position:relative;box-shadow:0 2px 8px rgba(0,0,0,.2)}}
.map-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px}
.lg-item{display:flex;align-items:center;gap:4px;font-size:var(--fs-label);color:var(--text3)}
.lg-dot{width:11px;height:11px;border-radius:2px;flex-shrink:0}
/* ── MATCH EXERCISE ── */
.match-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:12px}
.match-col-lbl{font-size:var(--fs-caption);font-family:var(--sans);letter-spacing:0;color:var(--text3);margin-bottom:8px}
.match-ward{background:var(--mist);border:1.5px solid var(--border);border-radius:var(--r10);padding:12px 16px;cursor:pointer;transition:background-color var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out),transform var(--dur-fast) var(--ease-out);font-size:var(--fs-body)}
@media (hover:hover) and (pointer:fine){.match-ward:hover{border-color:var(--leaf);background:#EDF7F1}}
.match-ward.sel{border-color:var(--leaf);background:#e5f5ec}
.match-barrier{background:white;border:1.5px solid var(--border);border-radius:var(--r10);padding:12px 16px;cursor:pointer;transition:background-color var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out),transform var(--dur-fast) var(--ease-out);font-size:var(--fs-body);text-align:left;width:100%}
@media (hover:hover) and (pointer:fine){.match-barrier:hover{border-color:var(--leaf);background:#EDF7F1}}
.match-barrier.matched{background:#EDF7F1;border-color:var(--leaf);color:var(--leaf2);cursor:default}
/* ── SLIDERS ── */
.alloc-row{display:flex;align-items:center;gap:12px;padding:4px 0}
.alloc-lbl{font-size:var(--fs-body);width:170px;flex-shrink:0;color:var(--text)}
.alloc-bar{flex:1}
.alloc-bar input[type=range]{width:100%;accent-color:var(--leaf)}
.alloc-val{font-family:var(--sans);font-size:var(--fs-body-sm);color:var(--leaf);width:36px;text-align:right}
/* ── PBAR ── */
.pbar{height:5px;background:var(--mist2);border-radius:3px;overflow:hidden}
.pbar-fill{height:100%;background:var(--leaf);border-radius:3px;transition:width .3s linear}
.pbar-fill.gold{background:var(--gold2)}
.pbar-fill.red{background:var(--red)}
/* ── PROGRESS TABLE ── */
.prog-table{width:100%;border-collapse:collapse;font-size:var(--fs-body)}
.prog-table th{text-align:left;padding:8px 8px;color:var(--text3);font-weight:400;font-size:var(--fs-label);letter-spacing:0;border-bottom:1px solid var(--border)}
.prog-table td{padding:8px 8px;border-bottom:1px solid var(--mist2)}
.prog-table tr:last-child td{border-bottom:none}
/* ── ACADEMY PANEL ── */
#acad-overlay{display:none;position:fixed;inset:0;z-index:200;background:rgba(14,27,46,.55)}
#acad-overlay.show{display:flex;align-items:stretch;justify-content:flex-end}
#acad-panel{width:360px;max-width:100vw;background:white;border-left:1px solid var(--border);overflow-y:auto;display:flex;flex-direction:column}
.acad-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);background:white;position:-webkit-sticky;position:sticky;top:0}
.c-entry{padding:16px 20px;border-bottom:1px solid var(--mist2);cursor:pointer;transition:background .14s}
@media (hover:hover) and (pointer:fine){.c-entry:hover{background:var(--mist)}}
.c-entry.locked{opacity:.4;pointer-events:none}
.c-entry .c-n{font-size: var(--fs-body-lg);font-weight:400}
.c-entry .c-s{font-size:var(--fs-label);font-family:var(--sans);margin-top:2px}
.c-entry.unlocked .c-s{color:var(--leaf2)}
.c-entry.mastered .c-s{color:var(--gold2)}
.c-entry.locked .c-s{color:var(--text3)}
/* ── WELCOME ── */
.w-hero{background:var(--surface);color:var(--text);border-bottom:1px solid var(--border);padding:48px 28px 48px;text-align:center;position:relative;overflow:hidden}
.w-logo{justify-content:center;line-height:1.2;font-family:var(--sans);font-size:var(--fs-h3);font-weight:600;color:var(--leaf2);letter-spacing:.04em;margin-bottom:12px;text-wrap:balance}
.w-sub{font-family:var(--sans);font-size:var(--fs-title);font-weight:400;color:var(--text);max-width:400px;margin:0 auto 8px;line-height:1.4}
.w-byline{font-size:var(--fs-body-sm);color:var(--text2);font-family:var(--sans);letter-spacing:.05em}
/* ── GRADUATION ── */
.grad-finale{text-align:center;padding:40px 20px}
.trophy{font-size:var(--fs-display);display:block;margin-bottom:16px}
/* ── RESPONSIVE ── */
@media(max-width:480px){.stat-grid{grid-template-columns:1fr 1fr}.match-grid{grid-template-columns:1fr}#acad-panel{width:100vw}}


button,.btn,.opt,.submit-btn{-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
input,select{font-size:var(--fs-lead) !important;}
@media(max-width:480px){.page-wrap{grid-template-columns:1fr !important;}.hero-left{padding:28px 16px !important;}.form-side{padding:12px 16px !important;}.form-card{padding:20px 16px !important;max-width:100% !important;}header{padding:12px 16px !important;}footer{padding:12px 16px !important;flex-direction:column;align-items:flex-start;gap:4px;}.hero-title{font-size:var(--fs-display-sm) !important;overflow-wrap:break-word;}}


.sbody{display:block;padding:20px;-webkit-overflow-scrolling:touch;}

/* ══ Multipage: the topbar is chrome on every in-course page.
   In the single-page build it was toggled by JS; here it is simply
   present, and the landing page opts out via its data-page value. ══ */
body:not([data-page="index"]):not([data-page="offline"]) #topbar{display:flex}
body[data-page="index"] #topbar{display:none}

/* ══ Hero life-course illustration ══
   Sits at the foot of the hero on desktop and directly above the
   enrolment card on mobile, where it carries the emotional case the
   headline states in numbers. The artwork is on white, so it needs no
   panel behind it — only breathing room and a quiet caption. ══ */
.hero-figure{
  margin:32px 0 0;
  max-width:100%;
}
.hero-figure img{
  display:block;
  width:100%;
  height:auto;
  max-width:560px;
}
.hero-figure figcaption{
  margin-top:12px;
  max-width:46ch;
  font-size:var(--fs-label);
  line-height:1.5;
  color:var(--text3);
}
@media (max-width:480px){
  .hero-figure{margin-top:24px}
  .hero-figure img{max-width:100%}
  .hero-figure figcaption{font-size:var(--fs-caption)}
}

/* ══ Form fields on white ══ */
.field input::placeholder,.field textarea::placeholder{color:var(--text4);opacity:1}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--leaf);
  box-shadow:0 0 0 3px var(--focus-halo);
}
.field select{color:var(--text)}


/* ══ Zero-dose panel: chart beside stat bulbs ══
   The chart carries the ranking; the bulbs narrow the story from the
   world to this district in three steps. Side by side on wide screens,
   stacked on a phone with the bulbs in a single readable column. ══ */
.zd-panel{
  margin:24px 0 0;
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
  align-items:start;
}
@media (min-width:900px){
  .zd-panel{grid-template-columns:minmax(0,1.3fr) minmax(300px,1fr);gap:24px}
}

.zd-figure{margin:0;min-width:0}
.zd-figure img{
  display:block;width:100%;height:auto;
  border:1px solid var(--border);
  border-radius:var(--r14);
  background:#fff;
}
.zd-figure figcaption{
  margin-top:8px;
  font-size:var(--fs-caption);
  color:var(--text3);
  line-height:1.5;
}

/* ── Bulbs ── */
.zd-bulbs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;min-width:0}
.zd-bulb{
  display:flex;align-items:center;gap:16px;
  padding:12px 16px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r14);
}
.zd-bulb.is-focus{
  border-color:var(--primary-line);
  background:var(--primary-tint);
}
.zd-orb{
  flex:0 0 auto;
  width:68px;height:68px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--leaf);
  box-shadow:inset 0 5px 7px -3px rgba(255,255,255,.22), inset 0 -6px 10px -4px rgba(0,0,0,.22), 0 2px 6px rgba(15,74,45,.22);
}
.zd-bulb.is-focus .zd-orb{
  background:var(--gold2);
  box-shadow:inset 0 5px 7px -3px rgba(255,255,255,.24), inset 0 -6px 10px -4px rgba(0,0,0,.22), 0 2px 6px rgba(107,66,0,.26);
}
.zd-val{
  color:#fff;font-weight:600;
  font-size:var(--fs-title);line-height:1;
  letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
.zd-val i{font-style:normal;font-size:.7em;margin-left:1px}
.zd-lab{display:flex;flex-direction:column;gap:4px;min-width:0;font-size:var(--fs-label);color:var(--text2);line-height:1.45}
.zd-lab strong{color:var(--text);font-weight:600;font-size:var(--fs-body-sm);text-wrap:balance}

.zd-tail{
  margin-top:2px;padding-left:2px;
  font-size:var(--fs-label);
  color:var(--text3);
  font-style:italic;
  line-height:1.5;
}

@media (max-width:480px){
  .zd-orb{width:58px;height:58px}
  .zd-val{font-size:var(--fs-title-sm)}
  .zd-bulb{gap:12px;padding:12px 12px}
}

/* ══ Converted controls ══
   .opt is a real <button> now; strip the UA chrome so it reads as it did,
   and make sure both it and role="button" elements show focus. ══ */
button.opt{
  appearance:none;-webkit-appearance:none;
  width:100%;text-align:left;
  font:inherit;color:inherit;
  background:var(--surface);
  cursor:pointer;
}
[role="button"]{cursor:pointer}
[role="button"]:focus-visible,
button.opt:focus-visible{
  outline:2px solid var(--primary-focus);
  outline-offset:2px;
}

/* ══ Checkbox and radio rows ══
   The label already shares the control's hit target; this guarantees the row
   itself clears 44px and enlarges the box so it is tappable with a thumb. ══ */
label.opt{min-height:48px;align-items:center}
label.opt input[type="checkbox"],
label.opt input[type="radio"]{
  width:20px;height:20px;
  margin-top:0;
  accent-color:var(--leaf);
  flex-shrink:0;
}
label.opt:focus-within{
  outline:2px solid var(--primary-focus);
  outline-offset:2px;
}

/* ══ Sync status ══ Bottom-left, out of the way of the primary action. ══ */
.sync-status{
  position:fixed;left:12px;bottom:12px;z-index:400;
  pointer-events:none;
  display:flex;align-items:center;gap:8px;
  max-width:calc(100vw - 24px);
  padding:8px 12px;
  padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));
  border-radius:var(--r20);
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:var(--sh);
  font-size:var(--fs-label);
  color:var(--text2);
  transition:opacity .25s ease;
}
.sync-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--success-fill)}
.sync-status.is-offline{pointer-events:auto;border-color:var(--gold);background:var(--gold-light);color:var(--gold2)}
.sync-status.is-offline .sync-dot{background:var(--gold)}
.sync-status.is-quiet{opacity:0}
.sync-status.is-quiet{pointer-events:none}
.sync-retry{
  pointer-events:auto;
  appearance:none;border:1px solid var(--gold2);background:transparent;
  color:var(--gold2);font:inherit;font-weight:600;
  padding:4px 12px;border-radius:var(--r8);cursor:pointer;
  min-height:48px;
}
@media (prefers-reduced-motion: reduce){.sync-status{transition:none}}

/* ══ Wide tables ══
   The table already scrolls inside its wrapper; this gives the edge a fade so
   it is visible that there is more to the right. Nothing is hidden. ══ */
.table-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  background:
    linear-gradient(to right, var(--surface) 30%, rgba(255,255,255,0)) left center,
    linear-gradient(to left,  var(--surface) 30%, rgba(255,255,255,0)) right center,
    linear-gradient(to right, rgba(14,27,46,.10), rgba(14,27,46,0)) left center,
    linear-gradient(to left,  rgba(14,27,46,.10), rgba(14,27,46,0)) right center;
  background-repeat:no-repeat;
  background-size:36px 100%, 36px 100%, 12px 100%, 12px 100%;
  background-attachment:local, local, scroll, scroll;
}

/* ══ Field Guide dialog ══ */
.acad-eyebrow{color:var(--leaf2);letter-spacing:0;margin-bottom:2px}
.acad-title{font-size:var(--fs-lead);font-weight:600;margin:0}
#acad-panel:focus{outline:none}

/* ══ Weights: Barlow ships 400 and 600 only. Elements whose UA default is
   bold (700) are pinned to 600 so nothing is synthesised. ══ */
b,strong,th,h1,h2,h3,h4,h5,h6,dt,optgroup{font-weight:600}

/* Topbar controls never wrap onto two lines */
#topbar .btn-acad, #topbar .topbar-right > * { white-space: nowrap; }

/* ══ Multipage layout ══
   In the single-page build each .screen was a fixed, internally scrolling panel
   parked under the topbar and progress rail. Here each page holds one screen, so
   it flows as ordinary content and the document itself scrolls. ══ */
body:not([data-page="index"]):not([data-page="offline"]):not([data-page="404"]):not(.pub){background:#F7F9F8}
body:not([data-page="index"]) .screen.active{
  position:static;top:auto;left:auto;height:auto;min-height:calc(100vh - 110px);min-height:calc(100svh - 110px);
  overflow:visible;
}
body:not([data-page="index"]) #track{display:block}
#track .t-node[aria-disabled="true"]{cursor:not-allowed}
#track .t-node[aria-current="step"] .t-lbl{font-weight:600}

/* Map cells are buttons now: strip UA chrome, keep the grid look, show focus. */
button.mc{appearance:none;border:0;padding:0;font:inherit;cursor:pointer;width:100%;min-width:0}
button.mc:focus-visible{outline:2px solid var(--text);outline-offset:2px}

/* Coverage map: eight columns where there is room; four on phones, which
   keeps every ward at or above a 44px tap target without spilling the card. */
#m1-map{min-width:0}
@media (max-width:560px){ #m1-map{grid-template-columns:repeat(4,minmax(0,1fr)) !important} }

/* Topbar: the Field Guide button is the one control that must always fit.
   Chips give way first (role badge hidden below 1000px), never the button. */
#topbar .btn-acad{flex-shrink:0}
#topbar .xp-chip,#topbar .lvl-chip{flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:1000px){ #topbar #role-lbl{display:none !important} }

/* ══════════ House standard layer (v4) ══════════
   Added in the October review. Later rules here win over the legacy rules
   above on purpose; each block says what it replaces. */

/* Display sizes step down on phones (fixed steps, no clamp). */
@media (max-width:480px){
  :root{--fs-display:2.027rem;--fs-display-sm:1.802rem;--fs-h1:1.802rem;--fs-h2:1.602rem;--fs-hero:1.802rem;--fs-hero-num:3.244rem}
}
[hidden]{display:none!important}

/* Browser surfaces resolve to tokens. */
html{-webkit-tap-highlight-color:transparent;scrollbar-color:var(--border2) var(--mist2)}
::selection{background:var(--primary-line);color:var(--text)}
input,textarea{caret-color:var(--leaf)}
a{text-underline-offset:.18em;text-decoration-thickness:1px}
.stat-n,.alloc-val,.zd-val,.prog-table td,.calc-out strong,.calc-work,output,.seal{font-variant-numeric:tabular-nums}
#acad-panel{overscroll-behavior:contain}
.table-scroll{overscroll-behavior-x:contain}
.opt,.btn,.chip,.t-node,.mc,.match-ward,.match-barrier,.btn-acad,.submit-btn,.launch-btn{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* Press feedback: every tappable control answers the touch, since the
   grey tap flash is switched off. */
.btn,.opt,.submit-btn,.launch-btn,.btn-acad,.chip,.match-ward,.match-barrier,.mc,.c-entry,.t-node{
  transition:transform var(--dur-fast) var(--ease-out),background-color var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out),opacity var(--dur) var(--ease-out)}
.btn:active:not(:disabled),.opt:active:not(:disabled),.submit-btn:active,.launch-btn:active,.btn-acad:active,.chip:active,.match-ward:active,.match-barrier:active:not(.matched),.mc:active,.c-entry:active,.t-node:active{transform:scale(.97)}
@media (prefers-reduced-motion: reduce){
  .btn:active,.opt:active,.submit-btn:active,.launch-btn:active,.btn-acad:active,.chip:active,.match-ward:active,.match-barrier:active,.mc:active,.c-entry:active,.t-node:active{transform:none}
}

/* Cards: the hairline is the edge. No diffuse shadow, and nothing inside a
   card wears its own border (tint and spacing separate it instead). */
.card,.card-sm{box-shadow:none}
.card .inset,.card .inset-gold,.card .inset-red,.card .inset-leaf,.card .inset-sky,.card .inset-plum,
.card .stat-box,.card .fb,.card .concept-reveal,.card .badge-pop,.card .card-sm,.card .zd-bulb{border:0;box-shadow:none}
.card .story{border:0;border-left:3px solid var(--gold2);border-radius:0}
.m-hero-num,.m-hero-q{opacity:1}

/* Footer: copyright and the fictional-scenario notice. */
.site-foot{display:block;max-width:700px;margin:0 auto;padding:24px 20px;padding-bottom:calc(32px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--border);font-size:var(--fs-caption);line-height:1.5;color:var(--text2)}
.site-foot p{margin:0}
.site-foot p+p{margin-top:4px}
.site-foot-copy{font-weight:600;color:var(--text)}
.site-foot-mini{margin-top:32px;font-size:var(--fs-caption);color:var(--text2)}
footer{gap:16px;flex-wrap:wrap}
.footer-left{min-width:0;flex:1 1 auto;max-width:44rem;line-height:1.5}
.footer-left p{margin:0}
.footer-left p+p{margin-top:4px}
.footer-left .site-foot-copy{color:var(--text)}

/* Marks that replaced emoji. */
.ico{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.15em;flex:0 0 auto}
.success-icon .ico{width:28px;height:28px}
.seal{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:2rem;height:2rem;border-radius:50%;background:var(--gold2);color:#fff;font-weight:600;font-size:var(--fs-label);line-height:1}
.seal-lg{width:3rem;height:3rem;font-size:var(--fs-title)}
.seal-xl{width:4.5rem;height:4.5rem;font-size:var(--fs-h2)}
.trophy{font-size:inherit;display:flex;justify-content:center}
.badge-em{font-size:inherit;line-height:0}
.avatar{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--primary-tint);color:var(--leaf2);font-weight:600;font-size:var(--fs-caption)}
.num-dot{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--leaf);color:#fff;font-weight:600;font-size:var(--fs-caption)}

/* Calculators (interact.js). Tinted, not bordered, so they can sit inside a card. */
.calc{margin-top:12px;padding:16px;background:var(--mist);border-radius:var(--r14)}
.concept-reveal .calc{background:var(--surface)}
.calc-head{font-weight:600;color:var(--text);margin-bottom:12px;font-size:var(--fs-body)}
.calc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:12px 20px}
.calc-field{display:flex;flex-direction:column;gap:8px;font-size:var(--fs-label);color:var(--text2);min-width:0}
.calc-field output{font-weight:600;color:var(--text)}
.calc-field input[type=number]{font:inherit;padding:12px 12px;border:1px solid var(--border2);border-radius:var(--r8);min-height:48px;width:100%;color:var(--text);background:#fff}
.calc-field input[type=range]{width:100%;min-height:48px;accent-color:var(--leaf);touch-action:pan-y}
.calc-presets{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.chip{min-height:48px;padding:8px 16px;border-radius:999px;border:1px solid var(--border2);background:#fff;color:var(--text);font-size:var(--fs-label);font-family:var(--sans)}
.chip[aria-pressed="true"]{background:var(--primary-tint);border-color:var(--leaf);color:var(--leaf2);font-weight:600}
.calc-out{font-size:var(--fs-body);color:var(--text);line-height:1.3}
.calc-out strong{font-size:var(--fs-h3);color:var(--gold2);margin-right:8px}
.calc-work{font-size:var(--fs-label);color:var(--text2);margin-top:8px}
.calc-note{font-size:var(--fs-label);color:var(--text2);margin-top:8px;line-height:1.5}

/* Keyboard hint (fine pointers only) and Field Guide search. */
.kbd-hint{font-size:var(--fs-caption);color:var(--text2);margin-bottom:2px}
kbd{font:inherit;font-weight:600;padding:0 4px;border:1px solid var(--border2);border-radius:4px;background:var(--mist)}
.acad-search{padding:12px 20px;border-bottom:1px solid var(--border)}
.acad-search input{width:100%;min-height:48px;padding:12px 12px;border:1px solid var(--border2);border-radius:var(--r8);color:var(--text);background:#fff;font-family:var(--sans)}
.acad-empty{margin-top:8px;font-size:var(--fs-label);color:var(--text2)}

/* Decision review (Review Board). */
.meter{display:block;width:100%;min-width:60px;height:8px;border-radius:4px;background:var(--mist2);overflow:hidden}
.meter>span{display:block;height:100%;background:var(--leaf)}
.review-table th[scope=row]{font-weight:400;color:var(--text)}
.review-table td{white-space:nowrap}

/* Higher contrast when the system asks for it. */
@media (prefers-contrast: more){
  :root{--border:#7D8C83;--border2:#55645B;--text2:#1F2A36;--text3:#1F2A36;--text4:#1F2A36}
  a{text-decoration-thickness:2px}
  .opt,.card,.card-sm,.chip{border-width:2px}
}

/* Coverage map at 320–360px: trim the grid's own padding so each ward cell
   stays at or above 48px wide. */
@media (max-width:360px){ #m1-map{padding:8px;gap:4px} }

/* Resume and install banners: full-width on phones so the message reads as
   a sentence, not a word per line; every control meets 48px. */
#continue-banner button,#install-banner button{min-height:48px;min-width:48px}
@media (max-width:600px){
  #continue-banner{left:12px!important;right:12px;transform:none!important;max-width:none!important;width:auto!important;flex-wrap:wrap}
  #continue-banner > div:nth-child(2){flex:1 1 calc(100% - 48px)!important}
}
@media (max-width:480px){ .review-table .meter-cell{display:none} }
.review-table th,.review-table td{padding-inline:8px}
.review-table th[scope=row]{white-space:nowrap}
.card .card-sm{border-radius:0}
.zd-tail{font-style:normal}

/* ══ Methods module ══ */
.steps{margin:0;padding-inline-start:28px;display:flex;flex-direction:column;gap:16px;font-size:var(--fs-body);color:var(--text2);line-height:1.65}
.steps li::marker{font-weight:600;color:var(--leaf2)}
.steps strong{color:var(--text)}
.bridge{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.bridge li{display:flex;gap:12px;align-items:flex-start;font-size:var(--fs-body);color:var(--text2);line-height:1.6}
.bridge strong{color:var(--text)}
.plan{display:flex;flex-direction:column;gap:16px}
.plan-field{display:flex;flex-direction:column;gap:8px;font-size:var(--fs-label);color:var(--text);font-weight:600;min-width:0}
.plan-field textarea,.plan-field input{font:inherit;font-weight:400;font-size:var(--fs-lead);color:var(--text);background:#fff;border:1px solid var(--border2);border-radius:var(--r8);padding:12px 12px;min-height:48px;width:100%}
.plan-set{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;min-width:0}
.plan-set legend{font-size:var(--fs-label);font-weight:600;color:var(--text);margin-bottom:8px;padding:0}
label.opt.plan-check{display:flex;gap:12px;align-items:center;padding:12px 16px;font-size:var(--fs-body)}
.plan-progress{font-size:var(--fs-label);color:var(--text2)}
/* learn-by-doing cycle (methods module) */
.plan-phase{font-family:var(--sans);font-size:var(--fs-lead);font-weight:600;color:var(--leaf2);margin:8px 0 0;padding-top:16px;border-top:1px solid var(--border)}
.plan-phase:first-child{margin-top:0;padding-top:0;border-top:0}
.lxd{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.lxd>li{padding:20px 0;border-top:1px solid var(--border)}
.lxd>li:first-child{border-top:0;padding-top:4px}
.lxd-head{display:flex;gap:12px;align-items:center;margin:0 0 12px}
.lxd-head h3{font-family:var(--sans);font-size:var(--fs-title);font-weight:600;color:var(--text);margin:0;line-height:1.25}
.lxd dl{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin:0}
.lxd dt{font-size:var(--fs-label);font-weight:600;color:var(--leaf2);margin-bottom:4px}
.lxd dd{margin:0;font-size:var(--fs-body);color:var(--text2);line-height:1.6}
@media (min-width:900px){.lxd dl{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}}
@media (max-width:599px){
  .ie-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .ie-table,.ie-table tbody,.ie-table tr{display:block;width:100%}
  .ie-table tr{padding:12px 0;border-bottom:1px solid var(--border)}
  .ie-table td{display:inline-block;border:0;padding:2px 0}
  .ie-table td:first-child{display:block;font-weight:600;color:var(--text)}
  .ie-table td[data-label]::before{content:attr(data-label) ": ";color:var(--text2)}
  .ie-table td[data-label="Impact"]{margin-inline-end:16px}
}

/* v7 review: headings never take body leading; no synthetic italics or bold
   (Barlow ships 400 and 600 upright only); flatten anything bordered inside a card. */
h1,h2,h3,.concept-name{line-height:1.25}
html{font-synthesis:none}
.card .card,.card-sm .stat-box,.card .map-grid{border:0;box-shadow:none}
.card .card{padding:0}
.stat-box{min-width:0}
.tag{white-space:nowrap}
.row-sb{flex-wrap:wrap;gap:8px}
.row-sb > div{min-width:0}
#topbar .topbar-right{flex:0 0 auto}
/* ── Public pages (about, field-guide): indexable, readable without enrolling ── */
body.pub{background:var(--surface);color:var(--text)}
.pub-header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;max-width:72rem;margin:0 auto;padding:8px 16px;border-bottom:1px solid var(--border)}
.pub-brand{display:inline-flex;align-items:center;gap:12px;min-height:48px;color:var(--leaf);font-weight:600;letter-spacing:.08em;text-decoration:none}
.pub-nav{display:flex;flex-wrap:wrap;gap:4px}
.pub-nav a{display:inline-flex;align-items:center;min-height:48px;padding:0 12px;border-radius:var(--r8);color:var(--leaf2);font-weight:600;text-decoration:none}
.pub-nav a[aria-current="page"]{background:var(--primary-tint)}
.pub-main{max-width:44rem;margin:0 auto;padding:24px 16px 64px}
.pub-crumbs{font-size:var(--fs-label);color:var(--text2);margin-bottom:16px}
.pub-crumbs a{color:var(--leaf2)}
.pub-main h1{font-size:var(--fs-h1);line-height:1.2;margin:0 0 16px}
.pub-main h2{font-size:var(--fs-h3);line-height:1.25;margin:40px 0 12px}
.pub-main h3{font-size:var(--fs-title);line-height:1.25;margin:0 0 8px}
.pub-main p,.pub-main li,.pub-main dd{font-size:var(--fs-body);line-height:1.65;color:var(--text2)}
.pub-main p{margin:0 0 12px}
.pub-main a:not(.btn){color:var(--leaf2)}
.pub-lead{font-size:var(--fs-lead);color:var(--text)!important}
.pub-outline{padding-inline-start:24px;display:flex;flex-direction:column;gap:12px}
.pub-outline strong,.pub-term strong{color:var(--text)}
.pub-faq dt{font-weight:600;color:var(--text);margin-top:20px}
.pub-faq dd{margin:4px 0 0}
.pub-toc{border-block:1px solid var(--border);padding:16px 0;margin:24px 0}
.pub-toc-title{font-size:var(--fs-label)!important;margin:0 0 8px!important}
.pub-toc ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.pub-toc a{display:inline-flex;align-items:center;min-height:48px}
.pub-term{padding:24px 0;border-top:1px solid var(--border);scroll-margin-top:16px}
.pub-main section > h2{scroll-margin-top:16px}
.pub-footer{max-width:44rem;margin:0 auto;padding:24px 16px calc(32px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--border);font-size:var(--fs-caption);color:var(--text2)}
.pub-footer nav{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:12px}
.pub-footer nav a{display:inline-flex;align-items:center;min-height:48px;padding:0 8px;color:var(--leaf2);font-size:var(--fs-label)}
.pub-footer p{margin:0 0 4px}
.header-nav a.header-nav-item,.footer-links a,.site-foot-links a{display:inline-flex;align-items:center;min-height:48px;padding:0 8px;color:var(--leaf2);font-size:var(--fs-label);text-decoration:none}
.footer-links,.site-foot-links{display:flex;flex-wrap:wrap;gap:4px}
.site-foot-links{margin:0 0 8px -8px}
@media (max-width:600px){
  header{flex-wrap:wrap}
  .header-nav{gap:0;width:100%;justify-content:flex-start;margin-inline-start:-8px}
}
.pub-main a.btn{text-decoration:none;color:var(--on-primary)}