/* Forest: tokens and base components (FR1 of docs/specs/2026-10-forest-roadmap.md).
   Values are the artboards' (design/bashmo-forest-package/bashmo-forest/source):
   the README's tokens, the source's sizes. Dark only. Loaded only for a member
   the switch is on for, so nothing here touches the old look. */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url(/static/fraunces.0a53ab18a086.woff2) format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/static/inter.3100e775e861.woff2) format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/static/jetbrains-mono.e907e506477f.woff2) format("woff2");
}
/* FH2 of docs/specs/2026-10-forest-hero.md: the hero's accent phrase. One
   weight (500) with its optical size kept; Fraunces has no italic here. */
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/static/newsreader-italic.0cff7180195e.woff2) format("woff2");
}

:root {
  --fo-ground: #0f1f1b;
  --fo-card: #16302a;
  --fo-raised: #1c3a33;
  --fo-border: #2b4a42;
  --fo-divider: #223c35;
  --fo-route: #3a5a51;
  --fo-connector: #4e6c63;
  --fo-text: #f3efe4;
  --fo-text-2: #b9c4bf;
  --fo-muted: #8a9a93;
  --fo-accent: #34d399;
  --fo-amber: #fbbf24;
  --fo-red: #f87171;
  --fo-node: #245a4d;
  --fo-on-accent: #062016;
  --fo-primary-bg: #f3efe4;
  --fo-primary-text: #0f1f1b;
  /* Tints the artboards repeat. */
  --fo-track: rgba(243, 239, 228, 0.12);
  --fo-wash: rgba(243, 239, 228, 0.08);
  --fo-wash-2: rgba(243, 239, 228, 0.06);
  --fo-accent-wash: rgba(52, 211, 153, 0.12);
  --fo-accent-line: rgba(52, 211, 153, 0.35);
  --fo-amber-wash: rgba(251, 191, 36, 0.12);
  --fo-amber-line: rgba(251, 191, 36, 0.4);
  --fo-r-card: 16px;
  --fo-r-node: 18px;
  --fo-r-btn: 10px;
  --fo-r-chip: 8px;
  --fo-serif: Fraunces, Georgia, serif;
  --fo-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --fo-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fo-italic: Newsreader, Georgia, serif;
}

/* ---- Page base: a Forest page opts in with .fo-page on <body> ---------- */
.fo-page {
  margin: 0;
  background: var(--fo-ground);
  color: var(--fo-text);
  font-family: var(--fo-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  color-scheme: dark;
}
.fo-page a { color: var(--fo-text); }
.fo-page a:hover { color: #ffffff; }

/* ---- Type ---------------------------------------------------------------- */
.fo-mono { font-family: var(--fo-mono); }
.fo-label {
  font-family: var(--fo-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--fo-muted);
  text-transform: uppercase;
}
.fo-big {
  font-family: var(--fo-serif);
  font-weight: 500;
  font-size: 34px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.fo-big--accent { color: var(--fo-accent); }

/* ---- Buttons -------------------------------------------------------------- */
.fo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  box-sizing: border-box;
  border-radius: var(--fo-r-btn);
  border: 0;
  background: var(--fo-primary-bg);
  color: var(--fo-primary-text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.fo-page a.fo-btn, .fo-page a.fo-btn:hover { color: var(--fo-primary-text); }
.fo-btn--md { height: 44px; padding: 0 22px; font-size: 15px; }
.fo-btn--lg { height: 48px; padding: 0 22px; font-size: 15px; }
.fo-btn--block { display: flex; width: 100%; height: 50px; font-size: 15px; }
.fo-btn--secondary {
  background: var(--fo-raised);
  border: 1px solid var(--fo-border);
  color: var(--fo-text);
}
.fo-page a.fo-btn--secondary, .fo-page a.fo-btn--secondary:hover { color: var(--fo-text); }
.fo-btn--ghost {
  background: transparent;
  border: 1px solid var(--fo-border);
  color: var(--fo-text-2);
  font-size: 13px;
  font-weight: 500;
  height: auto;
  padding: 8px 12px;
  border-radius: var(--fo-r-chip);
}
.fo-btn--add {
  display: flex;
  width: 100%;
  height: 34px;
  border-radius: var(--fo-r-chip);
  border: 1px dashed var(--fo-border);
  background: transparent;
  color: var(--fo-text-2);
  font-size: 13px;
  font-weight: 500;
}
.fo-btn:disabled, .fo-btn[aria-disabled="true"] { opacity: 0.5; cursor: default; }
/* The sidebar's Continue: two lines, the second in mono. */
.fo-btn--continue {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  height: auto;
  min-height: 52px;
  padding: 8px 16px;
}
.fo-btn--continue small {
  font-family: var(--fo-mono);
  font-size: 11px;
  font-weight: 400;
  opacity: 0.8;
}

/* The answer chips ("What's next?"). */
.fo-chip {
  padding: 7px 12px;
  border-radius: var(--fo-r-chip);
  border: 1px solid var(--fo-border);
  background: var(--fo-card);
  color: var(--fo-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.fo-chip--primary {
  border-color: transparent;
  background: var(--fo-primary-bg);
  color: var(--fo-primary-text);
  font-weight: 600;
}
.fo-chip[aria-pressed="true"], .fo-chip--on {
  border-color: var(--fo-accent);
  background: var(--fo-accent-wash);
  color: var(--fo-accent);
  font-weight: 600;
}

/* Nav links and icon buttons. */
.fo-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border-radius: var(--fo-r-chip);
  color: var(--fo-text-2);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
.fo-page a.fo-nav-link { color: var(--fo-text-2); }
.fo-page a.fo-nav-link[aria-current], .fo-nav-link[aria-current] {
  background: var(--fo-wash);
  color: var(--fo-text);
}
.fo-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--fo-r-chip);
  border: 0;
  background: transparent;
  color: var(--fo-text-2);
  cursor: pointer;
}
.fo-icon-btn--round {
  border-radius: 999px;
  border: 1px solid var(--fo-border);
  background: var(--fo-card);
}
.fo-mic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 84px;
  height: 84px;
  border-radius: 999px;
  border: 0;
  background: var(--fo-primary-bg);
  color: var(--fo-primary-text);
  cursor: pointer;
  box-shadow: 0 0 0 10px var(--fo-accent-wash);
}
.fo-mic--sm { width: 72px; height: 72px; box-shadow: 0 0 0 8px var(--fo-accent-wash); }
.fo-mic--live {
  box-shadow: 0 0 0 8px rgba(52, 211, 153, 0.18), 0 0 0 16px rgba(52, 211, 153, 0.08);
}

/* ---- Cards and tiles ------------------------------------------------------ */
.fo-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  box-sizing: border-box;
  background: var(--fo-card);
  border: 1px solid var(--fo-border);
  border-radius: var(--fo-r-card);
}
.fo-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.fo-card__note { font-size: 12px; color: var(--fo-muted); }
.fo-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: var(--fo-r-chip);
  background: var(--fo-ground);
  border: 1px solid var(--fo-border);
  color: var(--fo-text);
  text-decoration: none;
}
.fo-tile__row { display: flex; justify-content: space-between; gap: 8px; }
.fo-tile__title { font-size: 13px; font-weight: 500; min-width: 0; }
.fo-tile__score { font-family: var(--fo-mono); font-size: 11px; white-space: nowrap; }
.fo-tile__fix { font-size: 12px; color: var(--fo-text-2); text-wrap: pretty; }

/* ---- Pills ---------------------------------------------------------------- */
.fo-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--fo-border);
  background: var(--fo-wash-2);
  color: var(--fo-text-2);   /* #06: small text on the raised wash; muted read 4.07:1 here */
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.fo-pill--ready {
  background: var(--fo-accent-wash);
  border-color: var(--fo-accent-line);
  color: var(--fo-accent);
}
.fo-pill--again {
  background: var(--fo-amber-wash);
  border-color: var(--fo-amber-line);
  color: var(--fo-amber);
}
.fo-pill--continue {
  background: var(--fo-primary-bg);
  border-color: transparent;
  color: var(--fo-primary-text);
}
/* #09, #14, #58: a stop being written, one waiting, one blocked. */
.fo-pill--writing { border-style: dashed; background: var(--fo-wash); color: var(--fo-text-2); }
.fo-pill--queued { background: transparent; color: var(--fo-muted); }
.fo-pill--blocked { background: transparent; color: var(--fo-muted); }
/* The room's crumbs: "Stop 3 · Job description", "Delivery & risk · must-have". */
.fo-pill--eyebrow, .fo-pill--must {
  gap: 6px;
  padding: 5px 10px;
  border-color: rgba(243, 239, 228, 0.16);
  background: var(--fo-wash-2);
  font-family: var(--fo-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fo-text-2);
}
.fo-pill--must {
  border-color: var(--fo-accent-line);
  background: var(--fo-accent-wash);
  color: var(--fo-accent);
}
/* The rubric names under the answer box. */
.fo-rubric {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: var(--fo-r-chip);
  border: 1px solid var(--fo-border);
  background: var(--fo-ground);
  font-family: var(--fo-mono);
  font-size: 12px;
  color: var(--fo-text-2);
}

/* ---- Meters --------------------------------------------------------------- */
/* Readiness: 5, 10, 20 perfected, drawn 1 : 1 : 2. */
.fo-meter { display: flex; gap: 3px; height: 8px; }
.fo-meter > span { display: block; flex: 1; background: var(--fo-wash); overflow: hidden; }
.fo-meter > span:first-child { border-radius: 4px 0 0 4px; }
.fo-meter > span:last-child { flex: 2; border-radius: 0 4px 4px 0; }
.fo-meter > span > i { display: block; height: 100%; background: var(--fo-accent); }
.fo-meter__scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--fo-mono);
  font-size: 10px;
  color: var(--fo-muted);
}
/* The week: seven ticks. */
.fo-ticks { display: flex; gap: 4px; }
.fo-ticks > span {
  display: block;
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: rgba(243, 239, 228, 0.1);
}
.fo-ticks > span.on { background: var(--fo-accent); }
/* A rubric leg, out of 2: full is accent, half is amber. */
.fo-legs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--fo-mono);
  font-size: 12px;
  color: var(--fo-text-2);
}
.fo-leg { display: flex; align-items: center; gap: 10px; }
.fo-leg__name { width: 92px; }
.fo-leg__bar { display: flex; gap: 3px; flex: 1; }
.fo-leg__bar > span {
  display: block;
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: rgba(243, 239, 228, 0.1);
}
.fo-leg__bar > span.on { background: var(--fo-accent); }
.fo-leg__bar > span.part { background: var(--fo-amber); }
.fo-leg__val { width: 28px; text-align: right; }

/* ---- Legend --------------------------------------------------------------- */
.fo-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-family: var(--fo-mono);
  font-size: 11px;
  color: var(--fo-muted);
}
.fo-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.fo-legend__ringed, .fo-legend__muted {
  display: inline-block;
  width: 18px;
  height: 10px;
  border-radius: 3px;
  box-sizing: border-box;
  background: var(--fo-card);
  border: 2px solid var(--fo-accent);
}
.fo-legend__muted { border: 1px solid var(--fo-border); }
.fo-legend__ring {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  box-sizing: border-box;
  border: 3px solid var(--fo-accent);
}

/* ---- Route anatomy -------------------------------------------------------- */
.fo-ring { display: block; flex-shrink: 0; }
/* A stop card (the landing's preview keeps this size; the route's list overrides it below). */
.fo-stop {
  width: 300px;
  height: 56px;
  box-sizing: border-box;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--fo-card);
  border: 1px solid var(--fo-border);
  border-radius: var(--fo-r-card);
  color: var(--fo-text);
  text-decoration: none;
}
.fo-stop--wide { width: 480px; }
.fo-stop--group { border: 1px dashed rgba(255, 255, 255, 0.45); }
.fo-stop--here { border: 2px solid var(--fo-accent); box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.14); }
.fo-stop--idle { color: var(--fo-text-2); }
.fo-stop__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
/* Titles show whole, as the renders draw them (a few px into the gap). The
   renders let a long sub-line run under the pill; it ellipsizes instead. */
.fo-stop__title { font-size: 15px; font-weight: 600; white-space: nowrap; }
.fo-stop__sub {
  font-family: var(--fo-mono);
  font-size: 11px;
  color: var(--fo-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* A branch: a 32 ring beside its name; ringed when relevant, muted when not. */
.fo-branch {
  width: 136px;
  height: 48px;
  box-sizing: border-box;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--fo-card);
  border: 1px solid var(--fo-border);
  border-radius: var(--fo-r-btn);
  color: var(--fo-text-2);
  text-decoration: none;
}
.fo-branch--ringed { border: 2px solid var(--fo-accent); color: var(--fo-text); }
.fo-branch__text { display: flex; flex-direction: column; min-width: 0; }
.fo-branch__title { font-size: 12px; font-weight: 600; line-height: 15px; white-space: nowrap; }
.fo-branch__sub { font-family: var(--fo-mono); font-size: 10px; color: var(--fo-muted); white-space: nowrap; }
/* The finish line: the mock, with its checkered strip. */
.fo-finish {
  height: 80px;
  box-sizing: border-box;
  padding: 0 16px 0 0;
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--fo-card);
  border: 1px solid var(--fo-border);
  border-radius: var(--fo-r-card);
  overflow: hidden;
}
.fo-finish__flag {
  display: block;
  width: 12px;
  height: 100%;
  flex-shrink: 0;
  background-color: var(--fo-text);
  background-image:
    linear-gradient(45deg, var(--fo-ground) 25%, transparent 25%, transparent 75%, var(--fo-ground) 75%),
    linear-gradient(45deg, var(--fo-ground) 25%, transparent 25%, transparent 75%, var(--fo-ground) 75%);
  background-size: 12px 12px;
  background-position: 0 0, 6px 6px;
}
.fo-finish__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.fo-finish__title { font-size: 15px; font-weight: 600; }
.fo-finish__note { font-size: 12px; color: var(--fo-muted); text-wrap: pretty; }

/* A stop card as a door (role=button) with its pill a button of its own. */
.fo-stop[role="button"] { cursor: pointer; }
.fo-stop button.fo-pill { font-family: inherit; cursor: pointer; }
.fo-stop button.fo-pill:hover { filter: brightness(1.15); box-shadow: 0 0 0 2px rgba(243, 239, 228, 0.12); }

/* ---- Focus ---------------------------------------------------------------- */
.fo-page :focus-visible { outline: 2px solid var(--fo-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .fo-page * { transition: none !important; animation: none !important; }
}

/* ---- FR3: the app under the skin --------------------------------------- */
/* Dark only (the brief): the old screens keep their dark palette until FR4;
   the page ground and the top bar take Forest's. */
[data-skin="forest"] body { background: var(--fo-ground); }
[data-skin="forest"] .fo-only { display: none; }
[data-skin="forest"] .topbar {
  --topbar-h: calc(56px + env(safe-area-inset-top, 0px));
  height: calc(56px + env(safe-area-inset-top, 0px));
  padding-left: 20px;
  padding-right: 20px;
  gap: 12px;
  background: var(--fo-ground);
  border-bottom: 1px solid var(--fo-divider);
  font-family: var(--fo-sans);
}
[data-skin="forest"] body.has-topbar { --topbar-h: calc(56px + env(safe-area-inset-top, 0px)); }
[data-skin="forest"] .topbar .brandmark { display: none; }
[data-skin="forest"] .topbar .brandname {
  font-family: var(--fo-sans);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fo-text);
}
[data-skin="forest"] .topbar .brandname b { color: var(--fo-accent); }
[data-skin="forest"] .topbar .tb-nav { gap: 2px; margin-left: 16px; }
[data-skin="forest"] .topbar .js-top-home,
[data-skin="forest"] .topbar .js-top-practice,
[data-skin="forest"] #st-theme { display: none !important; }
[data-skin="forest"] .topbar .fo-only { display: inline-flex; }
[data-skin="forest"] .topbar .fo-nav-link { border: 0; background: none; font-family: inherit; cursor: pointer; }
[data-skin="forest"] .topbar .fo-nav-link svg { flex-shrink: 0; }
[data-skin="forest"] .topbar .fo-nav-short { display: none; }   /* #69: the short label waits for the tablet */
/* #54: the link for the screen on show reads in the accent. */
[data-skin="forest"] body:has(#screen-master:not([hidden])) .topbar .js-fo-roadmap,
[data-skin="forest"] body:has(#screen-progress:not([hidden])) .topbar .js-fo-progress { color: var(--fo-accent); }
[data-skin="forest"] .topbar .tb-acct {
  width: 36px; height: 36px; padding: 0; justify-content: center;
  border-radius: 999px; border: 1px solid var(--fo-border); background: var(--fo-card); color: var(--fo-text-2);
}
/* #54: the avatar is Settings' door, a plain initial as on the boards (aria-haspopup names the menu);
   while Settings shows it reads as the current screen (board F2_Settings). */
[data-skin="forest"] .topbar .tb-acct .tb-chev { display: none; }
[data-skin="forest"] body:has(#screen-settings:not([hidden])) .topbar .tb-acct { border: 2px solid var(--fo-accent); background: var(--fo-node); color: var(--fo-text); }
/* #15 of docs/specs/audit-fixes-2026-10-23.md (F_Home): the position switcher
   beside the avatar replaced the route's chips row: the position over its
   round, date and days left in mono. New position lives in its menu. */
[data-skin="forest"] .topbar .js-top-pos {
  display: inline-flex; align-items: center; gap: 12px;
  flex: 0 1 auto; min-width: 0; max-width: 360px; height: 44px; padding: 0 12px 0 14px;
  border-radius: 10px; border: 1px solid var(--fo-border); background: var(--fo-card);
  color: var(--fo-text); font-family: inherit; font-weight: 400; text-align: left;
}
[data-skin="forest"] .topbar .js-top-pos:hover { background: var(--fo-card); color: var(--fo-text); }
[data-skin="forest"] .topbar .js-top-pos[aria-expanded="true"] { border-color: var(--fo-accent); }
@media (hover: hover) { [data-skin="forest"] .topbar .js-top-pos:hover { border-color: var(--fo-accent); } }
/* The lines cap at the button's room, so a long name never sizes the button past it. */
[data-skin="forest"] .topbar .tb-pos-lines { max-width: 304px; }
/* The role and the company share the line: the room is dealt out evenly and
   a part that needs less gives the rest to the other, so a long role never
   pushes the company out and two positions with one role still read apart. */
[data-skin="forest"] .topbar .tb-pos-full {
  display: grid; grid-template-columns: minmax(0, max-content) max-content minmax(0, max-content);
  font-size: 13px; font-weight: 600;
}
[data-skin="forest"] .topbar .tb-pos-role,
[data-skin="forest"] .topbar .tb-pos-co { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-skin="forest"] .topbar .tb-pos-sep { white-space: pre; }
[data-skin="forest"] .topbar .tb-pos-when {
  display: block; font-family: var(--fo-mono); font-size: 11px; color: var(--fo-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-skin="forest"] .topbar .js-top-pos .tb-chev { position: relative; width: 16px; height: 16px; font-size: 0; opacity: 1; }
[data-skin="forest"] .topbar .js-top-pos .tb-chev::before {
  content: ''; position: absolute; left: 4px; top: 2px; width: 6px; height: 6px;
  border-right: 2px solid var(--fo-muted); border-bottom: 2px solid var(--fo-muted); transform: rotate(45deg);
}
/* While jobs run their pill sits left of the switcher: the nav keeps its one
   line, and the pill gives way first (it ellipsizes; its popover holds the
   rest; a phone shows its dot), then the switcher; the avatar keeps its place. */
[data-skin="forest"] .topbar .fo-nav-link { white-space: nowrap; }
[data-skin="forest"] .topbar .tb-jobs { flex: 0 2 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* #54: Settings on the ground, its title in the serif, its rows on the divider. */
[data-skin="forest"] #screen-settings .doc { background: var(--fo-ground); }
[data-skin="forest"] #screen-settings .st-side h1 { font-family: var(--fo-serif); }
[data-skin="forest"] #screen-settings .st-line { border-top-color: var(--fo-divider); }

/* ---- FR3: the route screen (Home under the skin) ------------------------ */
[data-skin="forest"] #screen-master.fo-on > .doc { display: none; }
.fo-route {
  display: flex;
  flex-wrap: wrap;
  min-height: 100%;
  background: var(--fo-ground);
  color: var(--fo-text);
  font-family: var(--fo-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-y: auto;
  height: 100%;
  box-sizing: border-box;
}
.fo-route[hidden] { display: none; }
.fo-map {
  flex: 999 1 560px;
  min-width: 0;
  position: relative;
  box-sizing: border-box;
  padding: 20px 24px 48px;
  display: flex;
  flex-direction: column;
}
.fo-map__head { display: flex; flex-direction: column; gap: 2px; }
.fo-map__title { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.fo-map__sub { margin: 0; font-size: 13px; color: var(--fo-muted); }
.fo-map__status { margin: 6px 0 0; font-family: var(--fo-mono); font-size: 11px; color: var(--fo-accent); min-height: 16px; }
.fo-map__scroll { display: flex; justify-content: center; padding-top: 46px; overflow-x: clip; }
/* #02 (F_Home): the route as a list. A ring and a card a stop, the spine one
   line behind the rings; the card fills the row and wraps its parts; the
   branches sit in a grid inside it, names on up to two lines. */
.fo-route-list { list-style: none; margin: 0; padding: 0; position: relative; width: 100%; max-width: 820px; display: flex; flex-direction: column; gap: 16px; }
.fo-route-list::before { content: ""; position: absolute; left: 26.5px; top: 28px; bottom: 48px; width: 3px; border-radius: 2px; background: var(--fo-route); }
.fo-stop-row { display: flex; align-items: flex-start; gap: 16px; position: relative; }
.fo-stop-row > .fo-ring { position: relative; z-index: 1; }
.fo-stop-row--finish { padding-left: 72px; }
.fo-route-list button { font-family: inherit; cursor: pointer; text-align: left; }
.fo-route-list .fo-stop {
  width: auto; height: auto; flex: 1; min-width: 0; padding: 14px 16px;
  flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 12px;
}
.fo-route-list .fo-stop--group { border-style: dashed; border-color: var(--fo-border); }
.fo-route-list .fo-stop--empty { border: 1px dashed var(--fo-route); background: var(--fo-ground); }
.fo-route-list .fo-stop--blocked { border: 1px dashed var(--fo-route); background: var(--fo-ground); }
.fo-route-list .fo-stop--blocked .fo-stop__title { color: var(--fo-muted); }
.fo-route-list .fo-stop--here { border: 2px solid var(--fo-accent); box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.14); }
.fo-stop__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fo-stop__door { background: none; border: 0; padding: 0; margin: 0; color: inherit; font: inherit; display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 200px; }
.fo-route-list .fo-stop__title { white-space: normal; text-wrap: balance; }
.fo-route-list .fo-stop__sub { white-space: normal; overflow: visible; text-overflow: clip; }
.fo-stop__act, .fo-btn.fo-stop__act {
  min-height: 40px; padding: 0 14px; border-radius: var(--fo-r-btn); border: 1px solid var(--fo-border);
  background: var(--fo-raised); color: var(--fo-text); font-size: 13px; font-weight: 600; white-space: nowrap;
}
.fo-stop__act:hover { border-color: var(--fo-accent); }
.fo-route-list .fo-stop:hover { border-color: var(--fo-accent); }
.fo-branches { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 10px; }
.fo-route-list .fo-branch { width: auto; height: auto; min-height: 48px; padding: 10px 12px; border-radius: 12px; align-items: center; }
.fo-route-list .fo-branch:hover { border-color: var(--fo-accent); }
.fo-route-list .fo-branch--writing, .fo-route-list .fo-branch--queued { border-style: dashed; }
.fo-route-list .fo-branch__title {
  font-size: 13px; font-weight: 600; line-height: 1.3; white-space: normal; text-wrap: balance;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fo-route-list .fo-branch__sub { font-size: 11px; white-space: normal; }
.fo-branches__note { margin: 0; font-family: var(--fo-mono); font-size: 11px; color: var(--fo-muted); }
.fo-link { background: none; border: 0; padding: 0; margin: 0; color: var(--fo-accent); font: inherit; text-decoration: underline; cursor: pointer; }
/* The strip over the route while something writes (#09): the title, the
   mono count, a 4-px bar. */
.fo-map__status.fo-strip { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; font-family: var(--fo-sans); font-size: 13px; color: var(--fo-text); }
.fo-strip__m { font-family: var(--fo-mono); font-size: 11px; color: var(--fo-muted); margin-left: auto; }
.fo-strip__bar { flex-basis: 100%; height: 4px; border-radius: 2px; background: var(--fo-track); overflow: hidden; }
.fo-strip__bar i { display: block; height: 100%; background: var(--fo-accent); }
/* The landing's preview keeps its hand-placed lines. */
.fo-route-line { position: absolute; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke: var(--fo-route); stroke-width: 3; }
.fo-route-line--dashed { stroke-dasharray: 6 6; }
.fo-finish__icon { flex-shrink: 0; fill: none; stroke: var(--fo-text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fo-finish__go { border: 0; cursor: pointer; font-family: inherit; }
.fo-map .fo-legend { margin-top: 24px; justify-content: flex-end; }
.fo-side {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  box-sizing: border-box;
  border-left: 1px solid var(--fo-divider);
  background: var(--fo-ground);
}
.fo-side .fo-btn--continue { border: 0; font-family: inherit; }
.fo-side .fo-btn--continue small { font-size: 11px; }
.fo-card__line { font-size: 13px; color: var(--fo-text-2); text-wrap: pretty; }
.fo-ready__big { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.fo-ready__of { font-size: 14px; color: var(--fo-text-2); }
.fo-pace { gap: 10px; }
/* The head wraps so the round picker can take a line of its own (below). */
.fo-pace .fo-card__head { align-items: center; flex-wrap: wrap; }
/* The big line wraps: "General practice" is 212 px and never breaks, so a
   subline with no room beside it goes under it, whole, instead of one word a
   line past the card's edge (the side column's card is a fixed 288 px). */
.fo-pace__big { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.fo-pace__days { font-size: 28px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; }
.fo-pace__to { font-size: 13px; color: var(--fo-text-2); min-width: 0; }
.fo-pace__week { font-size: 10px; color: var(--fo-muted); }
.fo-picker {
  appearance: none; -webkit-appearance: none;
  padding: 4px 26px 4px 10px; border-radius: var(--fo-r-chip);
  border: 1px solid var(--fo-border); background-color: var(--fo-ground); color: var(--fo-text);
  font-family: inherit; font-size: 12px; font-weight: 500; cursor: pointer; max-width: 70%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a9a93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
}
/* In the Pace card the picker takes the card's full width on its own line
   under the label, and a label still too long ("Project Coordinator · Acme
   Test Co · Nov 12") ends in an ellipsis, never mid-word (the 70% cap read
   "Project Coordinator · No"). */
.fo-pace .fo-picker { flex: 1 1 100%; max-width: 100%; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fo-sources { gap: 10px; padding: 16px 18px; }
.fo-sources__list { display: flex; flex-direction: column; gap: 6px; }
.fo-source {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 7px 10px; border-radius: var(--fo-r-chip); box-sizing: border-box;
  background: var(--fo-ground); border: 1px solid var(--fo-border);
  color: var(--fo-text); font-family: inherit; text-align: left; cursor: pointer;
}
.fo-source__dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0;
  box-sizing: border-box; border: 1px solid var(--fo-connector);
}
.fo-source__dot.on { background: var(--fo-accent); border: 0; }
.fo-source__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fo-source__title { font-size: 13px; font-weight: 500; }
.fo-source__title.muted { color: var(--fo-text-2); }
.fo-source__sub { font-size: 11px; color: var(--fo-muted); }
.fo-source__score { font-family: var(--fo-mono); font-size: 11px; white-space: nowrap; }
.fo-score--ok { color: var(--fo-accent); }
.fo-score--again { color: var(--fo-amber); }
.fo-score--none { color: var(--fo-muted); }
.fo-fixes { gap: 10px; }
.fo-fixes .fo-tile { font-family: inherit; text-align: left; cursor: pointer; width: 100%; box-sizing: border-box; }
.fo-edit { display: flex; flex-direction: column; gap: 8px; }
.fo-edit input, .fo-edit select {
  font-family: inherit; font-size: 13px; color: var(--fo-text);
  background: var(--fo-ground); border: 1px solid var(--fo-border); border-radius: var(--fo-r-chip);
  padding: 8px 10px;
}
.fo-edit__row { display: flex; gap: 8px; flex-wrap: wrap; }
.fo-removed { font-size: 12px; color: var(--fo-muted); }
.fo-removed button { background: none; border: 0; color: var(--fo-accent); font: inherit; cursor: pointer; padding: 0; text-decoration: underline; }
@media (max-width: 899px) {
  .fo-side { border-left: 0; border-top: 1px solid var(--fo-divider); }
}

/* ---- FR4: the old screens take Forest's tokens --------------------------- */
/* The app's own palette (index.html :root[data-theme="dark"]) remapped under
   the skin, so every screen the route opens (the room, the mock, the debrief,
   sign in, the position page) is Forest without touching its rules. */
:root[data-skin="forest"][data-theme="dark"],
:root[data-skin="forest"] {
  --sage: #34d399; --sage-deep: #6ee7b7; --pine: #34d399; --emerald: #34d399;
  --brass: #fbbf24; --brass-fill: #fbbf24;
  --brass-soft: rgba(251, 191, 36, 0.12); --brass-line: rgba(251, 191, 36, 0.4);
  --ink: #f3efe4; --slate: #b9c4bf; --mute: #8a9a93;
  --clay: #f87171; --clay-deep: #f87171; --clay-fill: #f87171; --clay-fill-hi: #fca5a5;
  --field-line: #4e6c63;
  --line: #2b4a42; --bg: #0f1f1b; --bg-soft: #0c1a17; --surface: #16302a;
  --sage-tint: #1c3a33; --emerald-wash: rgba(52, 211, 153, 0.12); --clay-tint: rgba(248, 113, 113, 0.12);
  --line-strong: #3a5a51; --line-focus: #4e6c63; --focus: #34d399;
  --emerald-line: rgba(52, 211, 153, 0.35); --clay-line: rgba(248, 113, 113, 0.4); --sage-line: rgba(52, 211, 153, 0.35);
  --steel: #b9c4bf; --steel-deep: #f3efe4; --steel-tint: #1c3a33; --steel-line: #2b4a42;
  --glass: rgba(15, 31, 27, 0.92);
  --sh-card: none;
  --sh-lg: 0 1px 0 var(--line), 0 18px 44px -18px rgba(0, 0, 0, 0.6);
  --hm-surface: #16302a; --hm-line: #2b4a42; --hm-line-soft: #223c35; --hm-track: rgba(243, 239, 228, 0.1);
  --hm-control-line: #2b4a42; --hm-control-line-hover: #3a5a51; --hm-row-hover: #1c3a33; --hm-ghost-hover: #1c3a33;
  --hm-ink: #f3efe4; --hm-text: #f3efe4; --hm-muted: #8a9a93; --hm-icon: #8a9a93; --hm-accent: #34d399;
  --hm-hero: #16302a; --hm-on-ink: #f3efe4; --hm-on-ink-muted: rgba(243, 239, 228, 0.72); --hm-on-ink-line: rgba(243, 239, 228, 0.4);
  --hm-primary: #f3efe4; --hm-primary-hover: #ffffff; --hm-on-primary: #0f1f1b;
  --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --serif: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --st-seg-on: #245a4d;   /* #54: Settings' picked chip (the board's node green) */
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --r-m: 10px;
}

/* ---- FR4: the practice room (render 18) --------------------------------- */
[data-skin="forest"] .rehearse { background: var(--fo-ground); }
[data-skin="forest"] .rh-main { padding: 24px; }
[data-skin="forest"] .rh-top { flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
[data-skin="forest"] .rh-leave {
  color: var(--fo-text-2); font-size: 13px; padding: 6px 10px; border-radius: var(--fo-r-chip);
}
[data-skin="forest"] .rh-ctxwrap { margin-left: auto; font-family: var(--fo-mono); font-size: 12px; color: var(--fo-muted); }
.fo-crumb { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fo-crumb[hidden] { display: none; }
.fo-crumb__n { font-family: var(--fo-mono); font-size: 12px; color: var(--fo-muted); }
.fo-essbar { display: flex; gap: 6px; height: 4px; margin-top: 12px; }
.fo-essbar[hidden] { display: none; }
.fo-essbar > span { flex: 1; border-radius: 2px; background: rgba(243, 239, 228, 0.1); }
.fo-essbar > span.on { background: var(--fo-accent); }
.fo-essbar > span.part { background: var(--fo-amber); }
.fo-essbar > span.cur { background: rgba(243, 239, 228, 0.45); }
[data-skin="forest"] .rh-mode {
  padding: 3px; border-radius: var(--fo-r-btn); border: 1px solid var(--fo-border); background: var(--fo-ground); gap: 0;
}
[data-skin="forest"] .rh-mode button {
  height: 32px; padding: 0 14px; border-radius: var(--fo-r-chip); font-size: 13px; font-weight: 500; color: var(--fo-text-2);
}
[data-skin="forest"] .rh-mode button[aria-pressed="true"] { background: rgba(243, 239, 228, 0.1); color: var(--fo-text); font-weight: 600; }
.fo-qcard {
  display: flex; flex-direction: column; gap: 14px; margin-top: 16px; padding: 28px; box-sizing: border-box;
  background: var(--fo-card); border: 1px solid var(--fo-border); border-radius: var(--fo-r-card);
}
.fo-qcard .rh-eyebrow-row { margin: 0; }
[data-skin="forest"] .fo-qcard .rh-eyebrow { font-family: var(--fo-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--fo-muted); }
[data-skin="forest"] .fo-qcard .rh-q { font-size: clamp(20px, 1.8vw, 26px); font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }
.fo-qcard__sub { margin: 0; font-size: 14px; color: var(--fo-text-2); }
[data-skin="forest"] .rh-card {
  margin-top: 16px; padding: 24px 28px; background: var(--fo-card); border: 1px solid var(--fo-border); border-radius: var(--fo-r-card);
}
[data-skin="forest"] .rh-ta {
  background: var(--fo-ground); border: 1px solid var(--fo-border); border-radius: var(--fo-r-btn);
  padding: 12px 14px; font-size: 15px; line-height: 1.5; color: var(--fo-text);
}
[data-skin="forest"] .rh-rec {
  width: 72px; height: 72px; background: var(--fo-primary-bg); color: var(--fo-primary-text);
  box-shadow: 0 0 0 8px var(--fo-accent-wash);
}
[data-skin="forest"] .rh-rec:not(.idle) { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0.18), 0 0 0 16px rgba(52, 211, 153, 0.08); }
[data-skin="forest"] :is(.rh-primary, .rh-done, .rh-typescore, .login-btn, .iv-save) {
  background: var(--fo-primary-bg); color: var(--fo-primary-text); border: 0; border-radius: var(--fo-r-btn); font-weight: 600;
}
[data-skin="forest"] :is(.rh-done, .rh-typescore) { height: 44px; padding: 0 22px; font-size: 15px; }
[data-skin="forest"] .rh-sec {
  background: var(--fo-card); border: 1px solid var(--fo-border); color: var(--fo-text); border-radius: var(--fo-r-chip);
}
/* The coach column. */
[data-skin="forest"] .rh-panel { border-left: 1px solid var(--fo-divider); background: var(--fo-ground); }
[data-skin="forest"] .rh-tab[aria-selected="true"] { color: var(--fo-text); box-shadow: inset 0 -2px 0 var(--fo-accent); }
[data-skin="forest"] .rh-shead {
  align-items: flex-end; padding: 20px; margin-top: 12px; border: 1px solid var(--fo-border);
  background: var(--fo-card); border-radius: var(--fo-r-card);
}
[data-skin="forest"] .rh-snum {
  font-family: var(--fo-serif); font-weight: 500; font-size: 44px; line-height: 1; letter-spacing: -0.02em;
}
[data-skin="forest"] .rh-panel .rh-snum { font-size: 44px; }
[data-skin="forest"] :is(.rh-snum, .iv-snum).band-mid,
[data-skin="forest"] :is(.rh-snum, .iv-snum).band-low { color: var(--fo-amber); }
[data-skin="forest"] :is(.rh-snum, .iv-snum).band-high { color: var(--fo-accent); }
[data-skin="forest"] .rh-sof .of { font-family: var(--fo-serif); font-size: 18px; font-weight: 600; color: var(--fo-muted); }
[data-skin="forest"] .rh-verdict { font-size: 14px; font-weight: 400; line-height: 1.55; margin-top: 16px; }
[data-skin="forest"] .rh-why { font-size: 14px; color: var(--fo-text); }
[data-skin="forest"] .rh-meter .mlab { font-family: var(--fo-mono); font-size: 12px; }
[data-skin="forest"] .rh-meter .track { height: 6px; background: rgba(243, 239, 228, 0.1); }
/* #17, #56: the card under the skin: the fix block, "8 keeps it", the menu. */
[data-skin="forest"] .rh-fixblock { background: var(--fo-raised); border-color: var(--fo-border); border-radius: var(--fo-r-btn); }
[data-skin="forest"] .rh-fixblock__k { font-family: var(--fo-mono); font-size: 11px; color: var(--fo-accent); }
[data-skin="forest"] .rh-fixblock__t { color: var(--fo-text); }
[data-skin="forest"] .rh-keeps { font-family: var(--fo-mono); font-size: 11px; color: var(--fo-amber); border-color: var(--fo-amber-line); background: var(--fo-amber-wash); }
[data-skin="forest"] .rh-more-menu { background: var(--fo-card); border-color: var(--fo-border); border-radius: var(--fo-r-btn); }
[data-skin="forest"] .rh-more-item { color: var(--fo-text); }
[data-skin="forest"] .rh-more-item:hover, [data-skin="forest"] .rh-more-item:focus-visible { background: var(--fo-wash); }
@media (max-width: 999px) {
  [data-skin="forest"] .rehearse.scored-m .rh-session > .fo-qcard { display: flex; }
  [data-skin="forest"] .rehearse.scored-m .fo-qcard > :not(.rh-q) { display: none; }
}

/* ---- FR4: the mock interview and its debrief (renders 19, 20) ----------- */
[data-skin="forest"] .mockroom { background: var(--fo-ground); }
[data-skin="forest"] .mr-head { background: var(--fo-ground); border-bottom: 1px solid var(--fo-divider); padding: 14px 24px; }
[data-skin="forest"] .mr-badge {
  display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 999px;
  background: var(--fo-wash-2); border: 1px solid rgba(243, 239, 228, 0.16); color: var(--fo-text-2);
  font-family: var(--fo-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
}
[data-skin="forest"] .mr-progress { font-family: var(--fo-mono); font-size: 12px; color: var(--fo-muted); }
[data-skin="forest"] .mr-exit {
  background: var(--fo-card); border: 1px solid var(--fo-border); color: var(--fo-text); border-radius: var(--fo-r-chip);
  font-family: var(--fo-sans);
}
[data-skin="forest"] .mr-end { border-color: rgba(248, 113, 113, 0.4); color: var(--fo-red); }
[data-skin="forest"] .mr-kicker { font-family: var(--fo-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--fo-muted); text-transform: uppercase; }
[data-skin="forest"] .mr-q { font-size: clamp(22px, 2vw, 30px); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
[data-skin="forest"] .mr-timer { font-family: var(--fo-mono); font-size: 28px; font-weight: 600; color: var(--fo-text); }
[data-skin="forest"] .mr-timer.over { color: var(--fo-amber); }
[data-skin="forest"] .mr-timer-of { font-family: var(--fo-mono); color: var(--fo-muted); }
/* #18, #62: the focus bar, the steps, the transcript and the scoring list. */
[data-skin="forest"] .mr-title b { color: var(--fo-text); }
[data-skin="forest"] .mr-sub { font-family: var(--fo-mono); font-size: 11px; color: var(--fo-muted); }
[data-skin="forest"] .mr-step { border-color: var(--fo-border); color: var(--fo-text-2); font-family: var(--fo-mono); font-size: 11px; }
[data-skin="forest"] .mr-step.done { color: var(--fo-accent); border-color: var(--fo-accent-line); background: var(--fo-accent-wash); }
[data-skin="forest"] .mr-step.current { color: var(--fo-text); border-color: var(--fo-text); box-shadow: none; }
[data-skin="forest"] .mr-turn { background: var(--fo-card); border-color: var(--fo-border); }
[data-skin="forest"] .mr-turn__k { font-family: var(--fo-mono); font-size: 11px; color: var(--fo-muted); text-transform: uppercase; letter-spacing: 0.06em; }
[data-skin="forest"] .mr-turn__t, [data-skin="forest"] .mr-lead { color: var(--fo-text-2); }
[data-skin="forest"] .mr-turn__more { color: var(--fo-accent); }
[data-skin="forest"] .mr-scoring li { background: var(--fo-card); border-color: var(--fo-border); color: var(--fo-text-2); }
[data-skin="forest"] .mr-scoring li.on { color: var(--fo-text); border-color: var(--fo-accent-line); }
[data-skin="forest"] .mr-note { color: var(--fo-muted); }
[data-skin="forest"] .mr-setup, [data-skin="forest"] .mr-debrief .mock-memo {
  background: var(--fo-card); border: 1px solid var(--fo-border); border-radius: var(--fo-r-card); padding: 24px 28px;
}
[data-skin="forest"] .mr-setup .chip[aria-pressed="true"], [data-skin="forest"] .mr-setup .chip.on {
  border-color: var(--fo-accent); background: var(--fo-accent-wash); color: var(--fo-accent);
}
/* #37: the setup's radio groups and the one rule. */
[data-skin="forest"] .mr-setup [role="radio"][aria-checked="true"] {
  border-color: var(--fo-accent); background: var(--fo-accent-wash); color: var(--fo-accent);
}
[data-skin="forest"] .mr-setup .mr-opt__desc, [data-skin="forest"] .mr-setup .mr-opt__count,
[data-skin="forest"] .mr-setup .mr-opt__subs, [data-skin="forest"] .mr-lede { color: var(--fo-text-2); }
[data-skin="forest"] .mr-setup [role="radio"][aria-checked="true"] .mr-opt__desc,
[data-skin="forest"] .mr-setup [role="radio"][aria-checked="true"] .mr-opt__subs { color: var(--fo-text); }
[data-skin="forest"] .mr-setup .mr-sw[aria-checked="true"] { border-color: var(--fo-accent); color: var(--fo-accent); }
/* #19 (F_NewPosition): the create page's title in the serif, the picked
   round in the accent wash, the drop zone on the ground with Choose a file
   raised, and the days line in the accent (a day gone by stays red). */
[data-skin="forest"] #iv-title.iv-title--create { font-family: var(--fo-serif); font-size: 36px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
[data-skin="forest"] .iv-nf-chips [role="radio"][aria-checked="true"] { border-color: var(--fo-accent); background: var(--fo-accent-wash); color: var(--fo-accent); }
[data-skin="forest"] .iv-nf-drop { border-color: var(--fo-route); background: var(--fo-ground); }
[data-skin="forest"] .iv-nf-choose { background: var(--fo-raised); }
[data-skin="forest"] .st-form .iv-nf-days:not(.iv-nf-days--past) { color: var(--fo-accent); }
/* #61: the unfinished mock's card on top of the setup (the board's amber). */
[data-skin="forest"] .mr-unfinished {
  background: var(--fo-amber-wash); border: 1px solid var(--fo-amber-line); border-radius: var(--fo-r-card); padding: 14px 16px;
}
[data-skin="forest"] .mr-unfinished__k { color: var(--fo-text); }
[data-skin="forest"] .mr-unfinished__line { font-family: var(--fo-mono); font-size: 12px; color: var(--fo-text-2); }
[data-skin="forest"] .mr-composer { background: var(--fo-ground); border-top: 1px solid var(--fo-divider); }
[data-skin="forest"] .mr-composer .composer-box {
  background: var(--fo-card); border: 1px solid var(--fo-border); border-radius: var(--fo-r-card);
}
[data-skin="forest"] .mr-composer .send { background: var(--fo-primary-bg); }
[data-skin="forest"] .mr-composer .send svg { stroke: var(--fo-primary-text); }
[data-skin="forest"] .mr-debrief { gap: 16px; }
/* #12, #38: the read is the headline; tiles and the raise box on card tokens. */
[data-skin="forest"] .mr-dk { font-family: var(--fo-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fo-muted); }
[data-skin="forest"] .mr-read { font-family: var(--fo-serif); font-size: clamp(40px, 5vw, 60px); font-weight: 500; color: var(--fo-text); }
[data-skin="forest"] .mr-move { color: var(--fo-text-2); font-size: 17px; }
[data-skin="forest"] .mr-how summary { color: var(--fo-accent); }
[data-skin="forest"] .mr-how p, [data-skin="forest"] .mr-tiles__cap, [data-skin="forest"] .mr-said__sub { color: var(--fo-text-2); }
[data-skin="forest"] .mr-tile { background: var(--fo-card); border-color: var(--fo-border); border-radius: var(--fo-r-card); }
[data-skin="forest"] .mr-tile__k { font-family: var(--fo-mono); color: var(--fo-muted); }
[data-skin="forest"] .mr-tile__v { font-family: var(--fo-serif); color: var(--fo-text); }
[data-skin="forest"] .mr-raise__k { font-family: var(--fo-mono); color: var(--fo-muted); }
[data-skin="forest"] .mr-keptas { color: var(--fo-accent); }
[data-skin="forest"] .mr-chg-kept, [data-skin="forest"] .mr-chg-ready { color: var(--fo-text); }
[data-skin="forest"] .mr-route { color: var(--fo-accent); }
/* #65: the Mocks section (F2_PastMocks) - the band in amber, a serif average, mono meta, card tokens. */
[data-skin="forest"] .mk-unfinished { background: var(--fo-amber-wash); border-color: var(--fo-amber-line); border-radius: var(--fo-r-card); }
[data-skin="forest"] .mk-unfinished__k { font-family: var(--fo-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--fo-amber); }
[data-skin="forest"] .mk-unfinished__line { color: var(--fo-text); }
[data-skin="forest"] .mk-best, [data-skin="forest"] .mk-over, [data-skin="forest"] .mk-row__meta, [data-skin="forest"] .mk-avg__k, [data-skin="forest"] .mk-chg-day {
  font-family: var(--fo-mono); font-size: 12px; color: var(--fo-text-2);
}
[data-skin="forest"] .mk-avg__v { font-family: var(--fo-serif); font-weight: 500; color: var(--fo-text); }
[data-skin="forest"] .mk-avg__v.band-high { color: var(--fo-accent); }
[data-skin="forest"] .mk-avg__v.band-low { color: var(--fo-amber); }
[data-skin="forest"] .mk-q { background: var(--fo-card); border-color: var(--fo-border); color: var(--fo-text-2); }
[data-skin="forest"] .mk-q__s { color: var(--fo-text); }
[data-skin="forest"] .mk-open { color: var(--fo-accent); }
[data-skin="forest"] #iv-mocks .mr-changed, [data-skin="forest"] .mk-card {
  background: var(--fo-card); border-color: var(--fo-border); border-radius: var(--fo-r-card);
}
[data-skin="forest"] .mk-scale__row dt { color: var(--fo-text); }
[data-skin="forest"] .mk-scale__row dd, [data-skin="forest"] .mk-scale__note { color: var(--fo-text-2); }
[data-skin="forest"] .mk-scale__row.on dt, [data-skin="forest"] .mk-scale__row.on dd { color: var(--fo-accent); }
[data-skin="forest"] .mr-debrief .rh-snum { font-size: 64px; }
[data-skin="forest"] .mr-debrief .mock-row {
  background: var(--fo-card); border: 1px solid var(--fo-border); border-radius: var(--fo-r-card); padding: 18px 20px;
}
[data-skin="forest"] .mr-debrief .mr-raise {
  margin: 0; padding: 20px 24px; border: 2px solid var(--fo-accent); border-radius: var(--fo-r-card);
  background: var(--fo-card); box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.14); font-size: 16px; color: var(--fo-text);
}
[data-skin="forest"] .mr-debrief .mr-theme { font-size: 17px; font-weight: 600; }
[data-skin="forest"] .mr-debrief .mr-dur { font-family: var(--fo-mono); font-size: 12px; color: var(--fo-muted); }

/* ---- FR4: sign in (render 17) -------------------------------------------- */
[data-skin="forest"] #screen-login { background: var(--fo-ground); }
[data-skin="forest"] .login-card {
  width: min(420px, 100%); padding: 36px 32px; gap: 14px;
  background: var(--fo-card); border: 1px solid var(--fo-border); border-radius: var(--fo-r-card); box-shadow: none;
}
[data-skin="forest"] .login-card .entry-mark {
  display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 14px;
  background: var(--fo-node); border: 1px solid var(--fo-connector);
}
[data-skin="forest"] .login-card .entry-mark svg text { fill: var(--fo-text) !important; }
[data-skin="forest"] .login-card .entry-mark svg circle { fill: var(--fo-accent) !important; }
[data-skin="forest"] .wordmark-h { font-family: var(--fo-sans); font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--fo-text); }
[data-skin="forest"] .wordmark-h b { color: var(--fo-accent); }
[data-skin="forest"] .login-ar { color: var(--fo-muted); }
[data-skin="forest"] .login-h { font-size: 18px; font-weight: 600; color: var(--fo-text); }
[data-skin="forest"] .login-card > p { color: var(--fo-text-2); font-size: 14px; line-height: 1.55; }
[data-skin="forest"] .login-google {
  background: var(--fo-ground); border: 1px solid var(--fo-border); color: var(--fo-text); border-radius: var(--fo-r-btn);
}
[data-skin="forest"] .login-or { color: var(--fo-muted); }
[data-skin="forest"] .login-input {
  background: var(--fo-ground); border: 1px solid var(--fo-border); border-radius: var(--fo-r-btn); color: var(--fo-text);
}
[data-skin="forest"] .login-cap { color: var(--fo-muted); font-size: 12px; }
[data-skin="forest"] .login-bash { color: var(--fo-text-2); font-size: 13px; }
[data-skin="forest"] .login-bash a { color: var(--fo-accent); }
[data-skin="forest"] .mr-composer .mic { background: var(--fo-primary-bg); color: var(--fo-primary-text); box-shadow: 0 0 0 8px var(--fo-accent-wash); }
[data-skin="forest"] .mr-debrief .mr-rows { display: flex; flex-direction: column; gap: 10px; align-items: stretch; text-align: left; }
[data-skin="forest"] .mr-debrief .mock-row { width: 100%; box-sizing: border-box; justify-content: flex-start; text-align: left; border-top: 1px solid var(--fo-border); }
[data-skin="forest"] .login-card .wordmark-h { font-size: 28px; margin: 4px 0 0; line-height: 1.1; }

/* ---- FR5: the landing (render 14) ---------------------------------------- */
/* landing.html's own tokens remapped, then its parts restyled; the try card
   keeps its DOM and script (forest.js moves it into "Try one now."). */
:root[data-fo-page="landing"],
:root[data-fo-page="landing"][data-theme="dark"] {
  --ground: #0f1f1b; --deep: #0c1a17; --card: #16302a; --card-hi: #16302a; --card-lo: #16302a;
  --line: #223c35; --border: #2b4a42; --border-hi: #3a5a51; --border-hover: #4e6c63;
  --ink: #f3efe4; --body: #f3efe4; --soft: #b9c4bf; --muted: #b9c4bf; --meta: #8a9a93;
  --faint: #8a9a93; --ghost: #8a9a93; --field: #4e6c63;
  --accent: #34d399; --accent-hover: #6ee7b7; --on-accent: #062016; --warn: #fbbf24;
  --wave-quiet: #2b4a42; --wave-mid: #3a5a51; --well: #0f1f1b; --shadow: rgba(0, 0, 0, 0.6);
  --mark: rgba(251, 191, 36, 0.2); --mark-good: rgba(52, 211, 153, 0.16);
  --r-m: 10px;
}
[data-fo-page="landing"] body { background: var(--fo-ground); color: var(--fo-text); font-family: var(--fo-sans); }
[data-fo-page="landing"] main { display: flex; flex-direction: column; }
[data-fo-page="landing"] main > .hero { order: 0; }
/* The owner's order of 2026-10-30: the roadmap first, the card's screen last (its door is the bar's button). */
[data-fo-page="landing"] #fo-roadmap { order: 1; }
[data-fo-page="landing"] #fo-resume { order: 3; }   /* right under the job description screen (the owner, 2026-10-30) */
[data-fo-page="landing"] #fo-score { order: 4; }
[data-fo-page="landing"] #fo-mock { order: 5; }
[data-fo-page="landing"] #name { order: 6; }
[data-fo-page="landing"] #faq { order: 7; }
[data-fo-page="landing"] #fo-try { order: 8; }
[data-fo-page="landing"] :is(#how, #fields, #score, #ready, .hero-ready) { display: none !important; }
/* docs/specs/2026-10-fullscreen-landing.md §3: the card comes first in the
   markup; under the skin it waits for forest.js to move it into "Try one now." */
[data-fo-page="landing"] body:not(.qpage) .hero #try { display: none; }
[data-fo-page="landing"] .fo-only { display: block; }
[data-fo-page="landing"] .fo-sec { padding: 88px clamp(16px, 3vw, 40px); border-top: 1px solid var(--fo-divider); }
[data-fo-page="landing"] .fo-wrap { max-width: 1200px; margin: 0 auto; }
[data-fo-page="landing"] .fo-two {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 48px 40px; align-items: start;
}
[data-fo-page="landing"] .fo-center { max-width: 720px; margin: 0 auto 40px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
[data-fo-page="landing"] .fo-center-text { text-align: center; max-width: 900px; margin: 24px auto 0; }
.fo-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0;
  font-family: var(--fo-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; color: var(--fo-text-2); text-transform: uppercase;
}
.fo-eyebrow > span { display: inline-block; width: 18px; height: 2px; background: var(--fo-accent); }
[data-fo-page="landing"] .fo-eyebrow { display: inline-flex; }
.fo-h2 { margin: 0; font-family: var(--fo-serif); font-weight: 500; font-size: clamp(40px, 4.5vw, 60px); letter-spacing: -0.02em; line-height: 1; color: var(--fo-text); }
.fo-lede { margin: 0; font-size: 17px; line-height: 1.6; color: var(--fo-text-2); text-wrap: pretty; }
.fo-fine { margin: 0; font-size: 13px; color: var(--fo-muted); }
.fo-accent { color: var(--fo-accent); }
[data-fo-page="landing"] .fo-actions { display: flex; flex-wrap: wrap; gap: 12px; }
[data-fo-page="landing"] .fo-chiprow { display: flex; flex-wrap: wrap; gap: 8px; }

/* The nav. */
[data-fo-page="landing"] nav[aria-label="Main"] { background: rgba(15, 31, 27, 0.92); border-bottom: 1px solid var(--fo-divider); }
[data-fo-page="landing"] .wordmark { font-family: var(--fo-sans); font-weight: 700; letter-spacing: -0.02em; color: var(--fo-text); }
[data-fo-page="landing"] .wordmark b { color: var(--fo-accent); }
[data-fo-page="landing"] .navlinks :is(.navmore, .navhow) { display: none !important; }
/* 2026-10-30: six links and two buttons fit from 1180 px with a 16 px gap and 10 px of padding a side
   ("Tailored questions" left 0 px to spare at 20 and 12; this leaves about 50). */
[data-fo-page="landing"] .navlinks { gap: 16px; }
[data-fo-page="landing"] .navlinks .fo-navlink {
  display: inline-flex; padding: 8px 10px; border-radius: var(--fo-r-chip); color: var(--fo-text-2); font-size: 14px; font-weight: 500; text-decoration: none;
}
[data-fo-page="landing"] .navlinks .fo-navlink:hover { background: var(--fo-wash); color: var(--fo-text); }
/* The bar maps the deck (2026-10-29): the lit chapter reads in the text colour, the stylesheet's rule under it. */
[data-fo-page="landing"] .navlinks .fo-navlink[aria-current="location"] { color: var(--fo-text); }
[data-fo-page="landing"] .navlinks .navtry[aria-current="location"] { box-shadow: inset 0 -2px 0 var(--fo-accent); }   /* on the card's screen, the last */
[data-fo-page="landing"] .navlinks .navtry {
  display: inline-flex; align-items: center; height: 44px; padding: 0 18px;
  background: var(--fo-primary-bg); color: var(--fo-primary-text); border-radius: var(--fo-r-btn); font-weight: 600;
}
[data-fo-page="landing"] .navlinks .signin { border: 1px solid var(--fo-border); border-radius: var(--fo-r-btn); color: var(--fo-text); }
/* #47 of docs/specs/audit-fixes-2026-10-23.md (F2_TabletHeader): from 768 to
   944 px Sign in sat past the right edge, below 841 Try a question too. Below
   1180 px (1024 until 2026-10-30, when Why the name and Job description came
   into the bar) the section links fold into Menu and the two buttons stay. The
   button and the panel ship hidden (#try-js shows the button); the panel
   hangs under the bar, full width, one 52 px row per section. */
[data-fo-page="landing"] .navrow { position: relative; }
[data-fo-page="landing"] .navlinks .fo-navmenu {
  display: none; align-items: center; gap: 8px; height: 40px; padding: 0 12px;
  border: 1px solid var(--fo-accent); border-radius: var(--fo-r-btn); background: var(--fo-accent-wash);
  color: var(--fo-text); font: inherit; font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer;
}
[data-fo-page="landing"] .navlinks .fo-navmenu:hover { background: var(--fo-accent-line); }
[data-fo-page="landing"] .navlinks .fo-navmenu svg { display: none; }
[data-fo-page="landing"] .navlinks .fo-navmenu[aria-expanded="true"] svg { display: inline; }
[data-fo-page="landing"] .navlinks .fo-navpanel {
  display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column;
  background: var(--fo-card); border-bottom: 1px solid var(--fo-divider);
  max-height: calc(100dvh - 100%); overflow-y: auto;   /* nine rows on a phone on its side: the panel scrolls; 100% is the bar's own height */
}
[data-fo-page="landing"] .navlinks .fo-navpanel a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 24px;
  border-top: 1px solid var(--fo-divider); color: var(--fo-text); font-size: 17px; font-weight: 500; text-decoration: none; white-space: normal;
}
[data-fo-page="landing"] .navlinks .fo-navpanel a:first-child { border-top: 0; }
[data-fo-page="landing"] .navlinks .fo-navpanel a:hover { background: var(--fo-wash); }
/* The bar maps the deck (2026-10-29): #deck-js marks the row in view. */
[data-fo-page="landing"] .navlinks .fo-navpanel a[aria-current="location"] { color: var(--fo-text); font-weight: 600; box-shadow: inset 3px 0 0 var(--fo-accent); }
[data-fo-page="landing"] .navlinks .fo-navpanel a span { color: var(--fo-text-2); }
[data-fo-page="landing"] .navlinks :is(.fo-navmenu, .fo-navpanel)[hidden] { display: none !important; }
@media (max-width: 1179px) {
  [data-fo-page="landing"] .navlinks .fo-navlink { display: none; }
  [data-fo-page="landing"] .navlinks .fo-navmenu { display: inline-flex; }
  [data-fo-page="landing"] .navlinks .fo-navpanel { display: flex; }
}
[data-fo-page="landing"] .navmenu .fo-navlink { display: none; }
/* The sweep of 2026-10-25: from 360 to 414 px the bar ran 20 px past the
   screen and cut Menu off. Under 480 px Try a question reads Try it, as
   F2_MobileGuide's bar does, and the three buttons sit closer. */
[data-fo-page="landing"] .navlinks .navtry .navtry-s { display: none; }
@media (max-width: 480px) {
  [data-fo-page="landing"] .navlinks { gap: 8px; }
  [data-fo-page="landing"] .navlinks :is(.navtry, .signin) { padding: 0 14px; }
  [data-fo-page="landing"] .navlinks .navtry .navtry-l { display: none; }
  [data-fo-page="landing"] .navlinks .navtry .navtry-s { display: inline; }
}

/* The hero (docs/specs/2026-10-forest-hero.md): one centered column, the
   headline's two beats, the sub, the two doors, the note, and the finish line
   under them. The route moved to the roadmap screen (FH5). */
[data-fo-page="landing"] .hero { padding: 72px clamp(16px, 3vw, 40px) 88px; }
[data-fo-page="landing"] .hero-grid {
  max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr));
  gap: 48px 40px; align-items: center;
}
[data-fo-page="landing"] .hero-copy { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
[data-fo-page="landing"] .hero-copy h1 {
  margin: 0; font-family: var(--fo-serif); font-weight: 500; font-size: clamp(44px, 5.2vw, 72px);
  line-height: 1.02; letter-spacing: -0.02em; color: var(--fo-text);
}
[data-fo-page="landing"] .hero-copy h1 > span { display: block; text-wrap: balance; }
[data-fo-page="landing"] .hero-copy h1 .fo-em { font-family: var(--fo-italic); font-style: italic; font-weight: 500; letter-spacing: -0.01em; color: var(--fo-accent); }
[data-fo-page="landing"] .hero-copy h1 b { color: var(--fo-text); }
[data-fo-page="landing"] .hero-copy .sub { margin: 0; font-size: 18px; line-height: 1.55; color: var(--fo-text-2); max-width: 640px; text-wrap: pretty; }
[data-fo-page="landing"] .hero-copy .fo-actions { justify-content: center; margin-top: 4px; }
[data-fo-page="landing"] .hero-note { margin: -8px 0 0; max-width: none; font-size: 13px; line-height: 1.45; color: var(--fo-muted); text-wrap: balance; }

/* FH10: the readiness score in the finish line's place. The app's Readiness
   card (.fo-card.fo-ready and its .fo-meter, drawn 1 : 1 : 2 for 5, 10 and
   20 answers) at hero size, as an example at 10 answers: the first two
   parts full, each scale label under the end of its part. FH12: nothing
   under the card (the disclosure went by the owner's call of 2026-10-31). */
[data-fo-page="landing"] .fo-hero-ready { width: 100%; max-width: 640px; margin: 0 auto; text-align: left; font-size: 13px; line-height: 1.45; color: var(--fo-muted); }
[data-fo-page="landing"] .fo-hero-ready .fo-card { gap: 14px; padding: 22px 26px; }
[data-fo-page="landing"] .fo-hero-ready .fo-card__head { flex-wrap: wrap; gap: 4px 16px; }
[data-fo-page="landing"] .fo-hero-ready .fo-card__note { font-family: var(--fo-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
[data-fo-page="landing"] .fo-hero-ready .fo-ready__big { gap: 6px 14px; }
[data-fo-page="landing"] .fo-hero-ready .fo-big { font-size: 56px; }
[data-fo-page="landing"] .fo-hero-ready .fo-ready__of { font-size: 17px; line-height: 1.35; }
[data-fo-page="landing"] .fo-hero-ready .fo-meter > span { border-radius: 999px; background: var(--fo-track); }
[data-fo-page="landing"] .fo-hero-ready .fo-meter > span > i { width: 0; transform-origin: left center; }
[data-fo-page="landing"] .fo-hero-ready .fo-meter > span:nth-child(-n+2) > i { width: 100%; }
[data-fo-page="landing"] .fo-hero-ready .fo-meter__scale { gap: 3px; font-family: inherit; font-size: 13px; }
[data-fo-page="landing"] .fo-hero-ready .fo-meter__scale > span { flex: 1; text-align: right; }
[data-fo-page="landing"] .fo-hero-ready .fo-meter__scale > span:last-child { flex: 2; }
[data-fo-page="landing"] .fo-hero-ready .fo-card__line { margin: 0; font-size: 14px; line-height: 1.55; }
/* The meter fills as the hero comes into view: once on load, and, with the
   deck on, again each time the first screen comes back (the owner's ask of
   2026-10-30, kept from the finish line). #deck-js puts .is-in on the screen
   in view and takes it off the ones left behind once the glide stops, out
   of sight, so the animation is off while the hero is away and starts over
   on its return. Without the deck (the plain page, a short screen) it runs
   once. */
@media (prefers-reduced-motion: no-preference) {
  [data-fo-page="landing"] .fo-hero-ready .fo-meter > span > i { animation: fo-fill 0.6s cubic-bezier(0.3, 0.1, 0.3, 1) both; }
  [data-fo-page="landing"] .fo-hero-ready .fo-meter > span:nth-child(1) > i { animation-delay: 0.3s; }
  [data-fo-page="landing"] .fo-hero-ready .fo-meter > span:nth-child(2) > i { animation-delay: 0.85s; }
  .deck-on #deck > section.hero:not(.is-in) .fo-hero-ready .fo-meter > span > i { animation: none; }
}
@keyframes fo-fill { from { transform: scaleX(0); } }

/* FH5: the roadmap screen, the words left and the sample route right. */
[data-fo-page="landing"] .fo-roadmap-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 48px 72px; align-items: center; }
[data-fo-page="landing"] .fo-roadmap-head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 500px; }
[data-fo-page="landing"] .fo-roadmap-key { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 0; padding: 16px 0 0; border-top: 1px solid var(--fo-divider); }
[data-fo-page="landing"] .fo-roadmap-key p { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 13px; line-height: 1.45; color: var(--fo-text-2); }
[data-fo-page="landing"] .fo-roadmap-key .fo-pill { min-width: 84px; justify-content: center; }
[data-fo-page="landing"] .fo-roadmap-example { margin: 0 0 4px; }
/* RN1 of docs/specs/2026-11-ring-numbers.md: the numbers said in words, one
   italic line over the first ring; what they are bright, the goal softer.
   Tight margins: a 1366 x 768 laptop still fits the screen unscrolled. */
[data-fo-page="landing"] .fo-roadmap-note { margin: 0 0 8px; font-family: var(--fo-italic); font-style: italic; font-weight: 500; font-size: 16px; line-height: 1.35; color: var(--fo-text-2); text-wrap: balance; }
[data-fo-page="landing"] .fo-roadmap-note > span { color: var(--fo-text); }
[data-fo-page="landing"] .fo-roadmap-route { min-width: 0; }
.fo-roadmap-canvas { position: relative; width: 540px; height: 430px; margin: 0 auto; }
/* RN2: the cards start 16 px past the 56 px ring. */
.fo-roadmap-canvas .fo-stop { position: absolute; left: 72px; width: 440px; height: 48px; }
.fo-roadmap-canvas .fo-ring { position: absolute; left: 0; }
.fo-roadmap-canvas .fo-finish { position: absolute; left: 0; width: 504px; height: 50px; }
.fo-roadmap-canvas .fo-route-line { position: absolute; }
/* On a narrow screen a long stop title ends in an ellipsis before its pill. */
.fo-roadmap-canvas .fo-stop__title { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 960px) {
  [data-fo-page="landing"] .fo-roadmap-grid { grid-template-columns: minmax(0, 1fr); }
  [data-fo-page="landing"] .fo-roadmap-canvas { margin: 0; }
}
@media (max-width: 640px) {
  [data-fo-page="landing"] .hero-copy { align-items: flex-start; text-align: left; gap: 14px; }
  [data-fo-page="landing"] .hero-copy h1 > span { text-wrap: wrap; }
  [data-fo-page="landing"] .hero-copy .sub { font-size: 16px; }
  [data-fo-page="landing"] .hero-copy .fo-actions { justify-content: flex-start; }
  [data-fo-page="landing"] .fo-hero-ready .fo-card { gap: 10px; padding: 16px; }
  [data-fo-page="landing"] .fo-hero-ready .fo-big { font-size: 44px; }
  [data-fo-page="landing"] .fo-hero-ready .fo-ready__of { font-size: 15px; }
  [data-fo-page="landing"] .fo-hero-ready .fo-meter__scale { font-size: 12px; }
  [data-fo-page="landing"] .fo-roadmap-note { font-size: 15px; }
  [data-fo-page="landing"] .fo-roadmap-canvas { height: 460px; }   /* RN2: the finish card's note takes two lines */
  .fo-hero-ready__wide { display: none; }
}

/* Try one now: the card, moved into the slot. */
[data-fo-page="landing"] .fo-try-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
[data-fo-page="landing"] .fo-try-chips { display: flex; flex-direction: column; gap: 18px; }
[data-fo-page="landing"] .fo-try-chips .try-fields,
[data-fo-page="landing"] .fo-try-chips .try-when { display: flex; flex-direction: column; gap: 10px; margin: 0; }
[data-fo-page="landing"] .fo-try-chips .try-when[hidden] { display: none; }
[data-fo-page="landing"] .fo-try-chips :is(#try-fields-h, #try-when-h) {
  font-family: var(--fo-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--fo-muted); text-transform: uppercase;
}
[data-fo-page="landing"] .try-chips { display: flex; flex-wrap: wrap; gap: 8px; }
[data-fo-page="landing"] .try-chip {
  padding: 7px 12px; border-radius: var(--fo-r-chip); border: 1px solid var(--fo-border); background: var(--fo-card);
  color: var(--fo-text); font-family: var(--fo-sans); font-size: 13px; font-weight: 500;
}
[data-fo-page="landing"] .try-chip[aria-checked="true"] { border-color: var(--fo-accent); background: var(--fo-accent-wash); color: var(--fo-accent); font-weight: 600; }
[data-fo-page="landing"] .democard {
  background: var(--fo-card); border: 1px solid var(--fo-border); border-radius: var(--fo-r-card); padding: 28px;
  box-shadow: none; color: var(--fo-text);
}
[data-fo-page="landing"] .democard .tag { font-family: var(--fo-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--fo-muted); text-transform: uppercase; }
[data-fo-page="landing"] .democard .q { font-family: var(--fo-sans); font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; line-height: 1.35; color: var(--fo-text); }
[data-fo-page="landing"] .democard textarea {
  background: var(--fo-ground); border: 1px solid var(--fo-border); border-radius: var(--fo-r-btn); color: var(--fo-text); font-family: var(--fo-sans);
}
[data-fo-page="landing"] .democard .try-rubric .rb-name {
  padding: 5px 10px; border-radius: var(--fo-r-chip); border: 1px solid var(--fo-border); background: var(--fo-ground);
  font-family: var(--fo-mono); font-size: 12px; color: var(--fo-text-2);
}
[data-fo-page="landing"] .democard .try-count { font-family: var(--fo-mono); font-size: 12px; color: var(--fo-muted); }
[data-fo-page="landing"] :is(.btn-primary, .democard .btn-primary) {
  background: var(--fo-primary-bg); color: var(--fo-primary-text); border: 0; border-radius: var(--fo-r-btn); font-weight: 600;
}
[data-fo-page="landing"] .btn-ghost { background: var(--fo-raised); border: 1px solid var(--fo-border); color: var(--fo-text); border-radius: var(--fo-r-btn); }
[data-fo-page="landing"] .try-mic { background: var(--fo-primary-bg); color: var(--fo-primary-text); box-shadow: 0 0 0 8px var(--fo-accent-wash); }

/* The roadmap tiles. */
.fo-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.fo-tile-card {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 28px; overflow: hidden;
  background: var(--fo-card); border: 1px solid var(--fo-border); border-radius: var(--fo-r-card);
}
.fo-tile-card b { font-size: 17px; font-weight: 600; color: var(--fo-text); }
.fo-tile-card > span:not(.fo-label) { font-size: 14px; line-height: 1.55; color: var(--fo-text-2); }   /* #24: no progress foot for a visitor */

/* An honest score: the pair of takes. */
.fo-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); gap: 20px; }
.fo-take { gap: 14px; padding: 24px; }
.fo-take p { margin: 0; }
.fo-take-k { display: flex; justify-content: space-between; gap: 12px; font-family: var(--fo-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--fo-muted); text-transform: uppercase; }
.fo-take-q { font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--fo-text); }
.fo-take-a { font-size: 14px; line-height: 1.6; color: var(--fo-text-2); }
.fo-take-s { font-family: var(--fo-serif); font-weight: 500; font-size: 40px; line-height: 1; letter-spacing: -0.02em; }
.fo-take-s small { font-size: 16px; color: var(--fo-muted); }
.fo-take-r { font-size: 14px; line-height: 1.55; color: var(--fo-text); }
.fo-take-legs { display: flex; flex-wrap: wrap; gap: 8px; }

/* The mock's debrief card and the plan card. */
.fo-debrief, .fo-plan { gap: 14px; padding: 24px; }
.fo-debrief p, .fo-plan p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--fo-text-2); }
.fo-debrief p b, .fo-plan p b { color: var(--fo-text); }
.fo-debrief-h, .fo-plan-h, .fo-plan-k { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.fo-debrief-h b, .fo-plan-h b { font-size: 18px; }
.fo-debrief-h .fo-mono, .fo-plan-h .fo-mono, .fo-plan-k .fo-mono { font-size: 12px; color: var(--fo-muted); }
.fo-plan-bar { height: 8px; border-radius: 4px; background: rgba(243, 239, 228, 0.08); overflow: hidden; }
.fo-plan-bar i { display: block; width: 32%; height: 100%; background: var(--fo-accent); }
.fo-plan-next { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid var(--fo-divider); }
.fo-checks { list-style: none; padding: 0; margin: 20px 0; display: flex; flex-direction: column; gap: 12px; }
.fo-checks li { position: relative; padding-left: 28px; font-size: 15px; color: var(--fo-text); }
.fo-checks li::before { content: "✓"; position: absolute; left: 0; color: var(--fo-accent); font-weight: 700; }
/* docs/specs/2026-10-insights-triage.md: "Paste the job description. Get its
   questions." (the owner's words of 2026-11-02, RN3 of 2026-11-ring-numbers.md),
   right after the roadmap (the owner's order of 2026-10-30), and the resume
   screen's card: the job post's questions (three fields, drafts for now:
   forest-hero FH14) on the accent's rule, the resume's (the skeptical ones)
   on the amber's. */
[data-fo-page="landing"] #fo-jd { order: 2; }
/* RN3: the heading's two beats one per line, as the hero's are, so a phone
   360 px or wider never splits "Get its questions." */
[data-fo-page="landing"] #fo-jd .fo-h2 > span { display: block; }
.fo-jd-card { gap: 16px; padding: 24px; }
.fo-jd-card p { margin: 0; }
.fo-jd-qs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.fo-jd-qs li { padding-left: 14px; border-left: 2px solid var(--fo-accent-line); font-size: 16px; line-height: 1.5; color: var(--fo-text); text-wrap: pretty; }
.fo-jd-card--resume .fo-jd-qs li { border-left-color: var(--fo-amber-line); }
/* The owner's ask of 2026-10-31: the job post card switches between three
   fields. The panels share one grid cell, so the card holds the tallest one's
   height and nothing below it moves; the one on show fades in. The tabs
   (forest.js jdRotate) sit at the foot; the chosen one's rule fills while it
   is on show, and the card moves on when the fill ends. */
.fo-jd-panels { display: grid; }
.fo-jd-panel { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 16px; opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0s linear 0.35s; }
.fo-jd-panel.is-on { opacity: 1; visibility: visible; transition: opacity 0.35s ease; }
.fo-jd-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: auto -10px -8px; padding-top: 4px; }
.fo-jd-tabs[hidden] { display: none; }
.fo-jd-tab {
  position: relative; min-height: 36px; padding: 8px 10px 12px; border: 0; border-radius: var(--fo-r-chip); background: none; cursor: pointer;
  font: 500 13px/1.2 var(--fo-sans); color: var(--fo-muted);
}
.fo-jd-tab:hover, .fo-jd-tab[aria-selected="true"] { color: var(--fo-text); }
.fo-jd-tab:focus-visible { outline: 2px solid var(--fo-accent); outline-offset: 0; }
.fo-jd-tab__bar { position: absolute; left: 10px; right: 10px; bottom: 5px; height: 2px; border-radius: 999px; background: var(--fo-track); overflow: hidden; }
.fo-jd-tab__bar::after { content: ""; position: absolute; inset: 0; background: var(--fo-accent); transform: scaleX(0); transform-origin: left center; }
.fo-jd-tab[aria-selected="true"] .fo-jd-tab__bar::after { transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .fo-jd-rot.is-auto .fo-jd-tab[aria-selected="true"] .fo-jd-tab__bar::after { animation: fo-jd-run 6s linear both; }
  .fo-jd-rot.is-auto.is-paused .fo-jd-tab[aria-selected="true"] .fo-jd-tab__bar::after { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .fo-jd-panel, .fo-jd-panel.is-on { transition: none; }
}
@keyframes fo-jd-run { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* FH15, the owner's call of 2026-11-01: on a phone the card's head stacks,
   "From the job description" over the role, each whole, where side by side
   both halves broke in two. */
@media (max-width: 640px) {
  [data-fo-page="landing"] .fo-jd-rot .fo-take-k { flex-direction: column; gap: 4px; }
}
/* The resume screen (2026-10-30): the line from the resume, then the questions written from it; a land mine wears its label. */
[data-fo-page="landing"] .fo-resume-line { margin: 0 0 16px; padding: 12px 14px; border-radius: 10px; background: var(--fo-wash); color: var(--fo-text-2); font-size: 14px; line-height: 1.5; }
[data-fo-page="landing"] .fo-mine-k { display: block; margin-bottom: 4px; font-family: var(--fo-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fo-amber); }
/* The job-post screen's second card (2026-10-30): the visitor's turn, a paste that happens in the app. */
[data-fo-page="landing"] .fo-jd-cta > p:not(.fo-take-k):not(.fo-actions) { margin: 0; font-size: 15px; line-height: 1.55; color: var(--fo-text-2); }
[data-fo-page="landing"] .fo-jd-cta .fo-actions { margin-top: auto; }
/* underlined: a link in a line of fine print is told apart by colour alone
   otherwise (axe link-in-text-block, the audit's T12 at 390 px) */
[data-fo-page="landing"] .fo-jd-more a { white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
[data-fo-page="landing"] #fo-resume .fo-h2 { margin-bottom: 16px; }
[data-fo-page="landing"] #fo-mock .fo-lede, [data-fo-page="landing"] #fo-resume .fo-lede { margin: 16px 0 20px; }
[data-fo-page="landing"] #fo-mock .fo-h2 { margin-top: 16px; }

/* Why the name, the FAQ, the footer. */
[data-fo-page="landing"] #name { padding: 72px clamp(16px, 3vw, 40px); border-top: 1px solid var(--fo-divider); background: var(--fo-ground); text-align: center; }
[data-fo-page="landing"] #name .name-card { display: none; }
[data-fo-page="landing"] #name .name-grid { display: flex; justify-content: center; }
[data-fo-page="landing"] #name .name-copy { max-width: 720px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
[data-fo-page="landing"] #name .eyebrow { font-family: var(--fo-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--fo-text-2); text-transform: uppercase; }
[data-fo-page="landing"] #name .lede { font-size: 19px; line-height: 1.6; color: var(--fo-text); }
[data-fo-page="landing"] #faq { padding: 88px clamp(16px, 3vw, 40px); border-top: 1px solid var(--fo-divider); }
[data-fo-page="landing"] #faq .wrap { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
[data-fo-page="landing"] #faq #faq-h { align-self: center; font-family: var(--fo-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--fo-text-2); text-transform: uppercase; }
[data-fo-page="landing"] #faq .fo-faq-title { text-align: center; margin: 0 0 24px; }
[data-fo-page="landing"] .faq-q { background: var(--fo-card); border: 1px solid var(--fo-border); border-radius: var(--fo-r-card); padding: 4px 20px; }
[data-fo-page="landing"] .faq-q summary { font-size: 15px; font-weight: 600; color: var(--fo-text); padding: 14px 0; }
[data-fo-page="landing"] .faq-q p { color: var(--fo-text-2); }
/* docs/specs/2026-10-insights-triage.md: the founder's line, centered like
   the name's (docs/specs/2026-10-fullscreen-landing.md §3 moved it there). */
[data-fo-page="landing"] #name .faq-by { max-width: none; margin: 0; text-align: center; font-size: 14px; color: var(--fo-text-2); }
[data-fo-page="landing"] footer { border-top: 1px solid var(--fo-divider); background: var(--fo-ground); color: var(--fo-text-2); }
[data-fo-page="landing"] footer .mark { font-weight: 700; color: var(--fo-text); }
[data-fo-page="landing"] footer .mark b { color: var(--fo-accent); }
[data-fo-page="landing"] footer a { color: var(--fo-text-2); }

/* #69 of docs/specs/audit-fixes-2026-10-23.md (F2_TabletHeader): from 761 to
   1100 px the app bar shows each link's icon over a short label (the long
   one stays the accessible name), Practice now goes, the position switcher
   and the avatar stay; nothing wraps at 820 px. */
@media (min-width: 761px) and (max-width: 1100px) {
  [data-skin="forest"] .topbar .fo-nav-link { flex-direction: column; gap: 2px; padding: 4px 8px; font-size: 11px; line-height: 1.1; }
  [data-skin="forest"] .topbar .fo-nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  [data-skin="forest"] .topbar .fo-nav-short { display: inline; }
  /* #15: the switcher's short label over the date and days, 220 px at most. */
  [data-skin="forest"] .topbar .js-top-pos { max-width: 220px; gap: 8px; padding: 0 10px 0 12px; }
  [data-skin="forest"] .topbar .tb-pos-lines { max-width: 172px; }
  [data-skin="forest"] .topbar .tb-pos-full, [data-skin="forest"] .topbar .tb-pos-round { display: none; }
  [data-skin="forest"] .topbar .tb-pos-short { display: block; font-size: 13px; font-weight: 600; }
}
/* ---- FR5: the phone (renders 21-23) -------------------------------------- */
[data-skin="forest"] .fo-tabs { display: none; }
@media (max-width: 760px) {
  [data-skin="forest"] .topbar .fo-nav-link { display: none !important; }
  /* #15 (F_MobileHome): brand, the switcher, the avatar; its short label over the date and days. */
  [data-skin="forest"] .topbar .js-top-pos { height: 40px; max-width: 52vw; gap: 8px; padding: 0 10px; }
  [data-skin="forest"] .topbar .tb-pos-lines { max-width: calc(52vw - 44px); line-height: 1.15; }
  [data-skin="forest"] .topbar .tb-pos-full, [data-skin="forest"] .topbar .tb-pos-round { display: none; }
  [data-skin="forest"] .topbar .tb-pos-short { display: block; max-width: none; font-size: 12px; font-weight: 600; }
  [data-skin="forest"] .topbar .tb-pos-when { font-size: 10px; }
  [data-skin="forest"] .topbar .js-top-pos .tb-chev { width: 14px; height: 14px; }
  /* The jobs pill is its dot here (its words stay its name; the popover and the route's strip say what is written). */
  [data-skin="forest"] .topbar .tb-jobs { font-size: 0; min-width: 44px; }
  [data-skin="forest"] .topbar .tb-jobs::before { content: ''; display: inline-block; width: 10px; height: 10px; margin: 0; border-radius: 50%; vertical-align: middle; background: var(--fo-muted); }
  [data-skin="forest"] .topbar .tb-jobs.live::before { background: var(--fo-accent); }
  [data-skin="forest"] { --fo-tabs-h: calc(70px + env(safe-area-inset-bottom, 0px)); }
  [data-skin="forest"] .fo-tabs[hidden] { display: none; }
  [data-skin="forest"] .fo-tabs {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--fo-ground); border-top: 1px solid var(--fo-divider);
  }
  [data-skin="forest"] .fo-tabs button {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0;
    border: 0; background: none; color: var(--fo-text-2); font-family: var(--fo-sans); font-size: 12px; font-weight: 500; cursor: pointer;
  }
  [data-skin="forest"] #screen-master:not([hidden]) ~ .fo-tabs .js-fo-roadmap,
  [data-skin="forest"] #screen-progress:not([hidden]) ~ .fo-tabs .js-fo-progress { color: var(--fo-accent); }
  [data-skin="forest"] .fo-route { flex-direction: column; flex-wrap: nowrap; padding-bottom: 84px; }
  /* #16: the position page's side column ends above the tab bar. */
  [data-skin="forest"] #screen-interview .doc { padding-bottom: var(--fo-tabs-h, 70px); }
  /* #59: a jump on the page (More's menu, a door's form) stops above the tab bar too. */
  [data-skin="forest"] #screen-interview .doc { scroll-padding-bottom: var(--fo-tabs-h, 70px); }
  /* #54: Settings' last row clears the tab bar too, and the avatar (Settings'
     one door on a phone) keeps its place: the jobs pill gives way first (#15
     made that every width's rule, beside the switcher). */
  [data-skin="forest"] #screen-settings .doc { padding-bottom: var(--fo-tabs-h, 70px); }
  [data-skin="forest"] .fo-map { padding: 20px 16px 8px; order: 1; flex: none; }
  [data-skin="forest"] .fo-map__scroll { justify-content: flex-start; padding-top: 20px; }
  [data-skin="forest"] .fo-map__title { font-family: var(--fo-sans); font-size: 22px; font-weight: 700; }
  [data-skin="forest"] .fo-side { display: contents; }
  [data-skin="forest"] .fo-side > * { margin: 0 16px 12px; }
  [data-skin="forest"] .fo-side > .fo-btn--continue { order: 0; margin-top: 16px; width: auto; }
  [data-skin="forest"] .fo-side > .fo-card { order: 2; }
  [data-skin="forest"] .fo-map .fo-legend { display: none; }
  /* The room on a phone (render 23): the bar clears the tab bar. */
  [data-skin="forest"] .rh-main { padding: 16px; }
  [data-skin="forest"] .fo-qcard { padding: 20px; }
  [data-skin="forest"] .rh-card { padding: 18px; }
  /* #21 of docs/specs/audit-fixes-2026-10-23.md (board F_MobilePractice):
     the app bar steps aside, the room ends above the tab bar (which hides
     only while answering), one 52px sticky header (back, the stop over its
     counts, Next), the question without a card, the mode switch and the
     scored card's actions docked at the bottom. */
  [data-skin="forest"] body:has(#rehearse:not([hidden])) .topbar { display: none; }
  /* #18: the mock's steps read as dots on a phone */
  [data-skin="forest"] .mr-step { font-size: 0; width: 10px; height: 10px; padding: 0; border-radius: 50%; }
  [data-skin="forest"] .mr-step.done { background: var(--fo-accent); border-color: var(--fo-accent); }
  [data-skin="forest"] .mr-step.current { border-color: var(--fo-text); box-shadow: 0 0 0 2px var(--fo-wash); }
  [data-skin="forest"] .mr-head { padding: 10px 16px; gap: 8px; }
  [data-skin="forest"] .rehearse { top: 0; height: calc(100dvh - var(--fo-tabs-h, 70px)); }
  [data-skin="forest"] .rehearse.answering { height: 100dvh; }
  [data-skin="forest"] .rh-main { padding: 0 16px 12px; }
  [data-skin="forest"] .rh-top {
    flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 8px; min-height: 52px;
    position: sticky; top: 0; z-index: 3; background: var(--fo-ground); border-bottom: 1px solid var(--fo-divider);
  }
  [data-skin="forest"] .rh-top .rh-mode, [data-skin="forest"] .rh-top .rh-ttstop { display: none !important; }
  /* id-scoped: the room's one-face layer sets #rehearse .rh-leave to 14px */
  [data-skin="forest"] #rehearse .rh-leave {
    width: 44px; height: 44px; padding: 0; margin: 0 0 0 -8px; font-size: 0; line-height: 1; flex: none; display: inline-grid; place-items: center;
  }
  [data-skin="forest"] #rehearse .rh-leave::before { content: '‹'; font-size: 26px; line-height: 1; color: var(--fo-text); }
  [data-skin="forest"] .rh-top .fo-crumb { flex: 1 1 auto; min-width: 0; flex-direction: column; align-items: flex-start; gap: 2px; }
  [data-skin="forest"] .rh-top .fo-crumb .fo-pill, [data-skin="forest"] .rh-top .fo-crumb__n { display: none; }
  [data-skin="forest"] .rh-top .fo-crumb__title {
    display: block; max-width: 100%; font-family: var(--fo-sans); font-size: 15px; font-weight: 600; color: var(--fo-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  [data-skin="forest"] .rh-top .fo-crumb__sub { display: block; font-family: var(--fo-mono); font-size: 11px; color: var(--fo-muted); }
  [data-skin="forest"] .rh-ctxwrap { margin-left: auto; flex: none; }
  [data-skin="forest"] .fo-essbar { display: none; }
  [data-skin="forest"] .fo-qcard { background: none; border: 0; padding: 12px 0 0; gap: 10px; margin-top: 0; }
  [data-skin="forest"] .fo-qcard__sub { display: none; }
  [data-skin="forest"] .rehearse.scored-m .rh-q { -webkit-line-clamp: unset; font-size: 20px; cursor: default; }
  [data-skin="forest"] .rehearse.scored-m .fo-qcard > :not(.rh-q):not(#rh-howrow):not(#rh-howpanel) { display: none; }
  [data-skin="forest"] .rehearse.scored-m .fo-qcard > #rh-howrow { display: flex; }
  [data-skin="forest"] .rehearse.scored-m .fo-qcard > #rh-howpanel:not([hidden]) { display: block; }
  [data-skin="forest"] .rehearse.scored-m .rh-session { max-height: 45%; }
  [data-skin="forest"] #rehearse:not(.typing) .rh-controls .rh-alt { display: inline-grid; }
  [data-skin="forest"] .rh-alt {
    display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0; margin-left: auto; flex: none;
    border-radius: var(--fo-r-btn); background: var(--fo-card); border: 1px solid var(--fo-border); color: var(--fo-text); font-size: 0;
  }
  [data-skin="forest"] .rh-alt svg { width: 22px; height: 22px; }
  [data-skin="forest"] .rehearse.typing .rh-controls { flex-direction: row; flex-wrap: wrap; align-items: center; }
  [data-skin="forest"] .rh-dock {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px; flex: none;
    padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--fo-ground); border-top: 1px solid var(--fo-divider);
  }
  [data-skin="forest"] .rh-dock .rh-actrow { flex: 1 1 auto; }
  [data-skin="forest"] .rh-dockmic {
    width: 48px; height: 48px; border-radius: 50%; border: 0; flex: none; display: inline-grid; place-items: center;
    background: var(--fo-accent); color: var(--fo-on-accent); cursor: pointer;
  }
  [data-skin="forest"] .rh-dockmic svg { width: 22px; height: 22px; }
}
@media (max-width: 760px) {
  [data-fo-page="landing"] .fo-sec { padding: 56px 16px; }
  [data-fo-page="landing"] .hero { padding: 40px 16px 56px; }
  [data-fo-page="landing"] .democard { padding: 20px; }
}
@media (max-width: 760px) {
  [data-skin="forest"] .topbar .brandname { display: inline !important; }
  [data-skin="forest"] .fo-route-list .fo-finish__note.fo-mono { font-size: 11px; }
  [data-skin="forest"] .fo-route-list { gap: 12px; }
  [data-skin="forest"] .fo-route-list::before { left: 26.5px; }
  [data-skin="forest"] .fo-stop-row { gap: 12px; }
  [data-skin="forest"] .fo-stop-row--finish { padding-left: 0; }
}

/* The sample route follows its column (no frame to scroll): the cards run
   from the ring to the column's edge, the finish card grows to its note.
   RN2's 56 px rings end the route 8 px lower: the finish card still ends
   by 452 on one line, and a phone (two lines) takes 460 above. */
.fo-roadmap-canvas { width: 100%; max-width: 560px; height: 452px; }
.fo-roadmap-canvas .fo-stop { width: auto; right: 0; }
.fo-roadmap-canvas .fo-finish { width: auto; right: 0; height: auto; min-height: 50px; padding: 10px 14px 10px 0; align-items: stretch; }
.fo-roadmap-canvas .fo-finish__flag { height: auto; align-self: stretch; }
.fo-roadmap-canvas .fo-finish__note { white-space: normal; font-size: 11px; line-height: 1.45; }

/* The old hero's named areas (and their media queries) are off under the
   skin: one column (FH6), the copy over the finish line. */
[data-fo-page="landing"] body:not(.qpage) .hero-grid {
  grid-template-areas: none !important;
  grid-template-rows: none !important;
  grid-template-columns: minmax(0, 1fr) !important;
  max-width: 1040px; gap: 64px;
}
[data-fo-page="landing"] body:not(.qpage) .hero-grid > * { grid-area: auto !important; }
/* FH10 on a short desktop screen (a 768 px laptop): the hero and its
   readiness card tighten so the card stays on the first screen. */
@media (min-width: 641px) and (max-height: 860px) {
  [data-fo-page="landing"] body:not(.qpage) .hero-grid { gap: 24px; }
  [data-fo-page="landing"] .hero-copy { gap: 16px; }
  [data-fo-page="landing"] .hero-copy h1 { font-size: clamp(44px, min(5.2vw, 8.2vh), 72px); }
  [data-fo-page="landing"] .fo-hero-ready .fo-card { gap: 10px; padding: 16px 22px; }
  [data-fo-page="landing"] .fo-hero-ready .fo-big { font-size: 44px; }
  .deck-js[data-fo-page="landing"] #deck > section.hero { padding-bottom: 24px; }
}
/* FH10 on a phone: the whole hero, card included, is one screen (a 390 x
   844 phone), so a swipe glides to the next screen (t12-landing-widths). */
@media (max-width: 640px) {
  [data-fo-page="landing"] body:not(.qpage) .hero-grid { gap: 28px; }
}

/* Try one now: the two chip groups sit left, one under the other; the six
   fields stay on one line (they wrap only where the column cannot hold them). */
[data-fo-page="landing"] .fo-try-chips { align-items: flex-start; text-align: left; gap: 22px; }
[data-fo-page="landing"] .fo-try-chips :is(.try-fields, .try-when) { align-items: flex-start; text-align: left; width: 100%; }
[data-fo-page="landing"] .fo-try-chips :is(#try-fields-h, #try-when-h) { display: block; text-align: left; margin: 0; }
[data-fo-page="landing"] .fo-try-chips .try-chips { justify-content: flex-start; flex-wrap: nowrap; gap: 6px; }
[data-fo-page="landing"] .fo-try-chips .try-chip { padding: 6px 10px; font-size: 13px; white-space: nowrap; }
@media (max-width: 1180px) {
  [data-fo-page="landing"] .fo-try-chips .try-chips { flex-wrap: wrap; }
}

/* The route's finish line in two rows: the title with its pill (or "Start
   the mock"), then the note across the card; the card grows to fit. */
.fo-route-list .fo-finish {
  flex: 1; min-width: 0; height: auto; min-height: 80px; padding: 14px 16px 14px 0;
  display: grid; grid-template-columns: 12px 24px minmax(0, 1fr) auto;
  grid-template-areas: "flag icon title pill" "flag icon note note";
  column-gap: 16px; row-gap: 4px; align-items: center;
}
.fo-route-list .fo-finish__flag { grid-area: flag; height: auto; align-self: stretch; margin: -14px 0; }
.fo-route-list .fo-finish__icon { grid-area: icon; }
.fo-route-list .fo-finish__text { display: contents; }
.fo-route-list .fo-finish__title { grid-area: title; }
.fo-route-list .fo-finish__note { grid-area: note; }
.fo-route-list .fo-finish > :is(.fo-pill, .fo-finish__go) { grid-area: pill; justify-self: end; }

/* The round's page under the skin: the strip back to the route; the page's
   own path map steps aside (the route is the path now), and so does the
   phone's "See the path ›" that opened it (#16). */
[data-skin="forest"] #iv-map, [data-skin="forest"] #iv-map-toggle { display: none !important; }
.fo-iv-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin: 0 0 18px; padding: 12px 16px; box-sizing: border-box;
  background: var(--fo-card); border: 1px solid var(--fo-border); border-radius: var(--fo-r-card);
}
.fo-iv-strip[hidden] { display: none; }
.fo-iv-strip__back { font-family: var(--fo-sans); }
.fo-iv-strip__at { flex: 1 1 240px; min-width: 0; font-family: var(--fo-mono); font-size: 12px; color: var(--fo-text-2); }
.fo-iv-strip__go { height: 36px; padding: 0 14px; font-size: 14px; }

/* ---- The Forest landing as the deck (docs/specs/2026-10-fullscreen-landing.md) ----
   landing.html's .deck-js rules make each section one screen high and snap
   them; here the sections' own padding becomes the room under the chrome
   (their rules at the top go: a screen's edge is the snap), every second
   screen takes a raised ground, the card beside its copy scrolls inside
   itself, and on a phone the pairs of cards are sideways slides. */
.deck-js[data-fo-page="landing"] #deck > section {
  padding: calc(var(--chrome-h) + 16px) clamp(16px, 3vw, 40px) var(--deck-pb); border-top: 0;
}
.deck-js[data-fo-page="landing"] #deck > section.fo-only { display: flex; flex-direction: column; }   /* a column: the footer joins the last screen under its content */
.deck-js[data-fo-page="landing"] #deck > section[hidden] { display: none; }
.deck-js[data-fo-page="landing"] #deck > section > :is(.fo-wrap, .wrap) { width: 100%; margin-top: auto; margin-bottom: auto; }
.deck-js[data-fo-page="landing"] #deck > section.screen--alt { background: #132a24; }
.deck-js[data-fo-page="landing"] #deck .fo-center { margin-bottom: 24px; }
.deck-js[data-fo-page="landing"] #deck .fo-center-text { margin-top: 16px; }
@media (min-width: 961px) {
  .deck-js[data-fo-page="landing"] #deck #fo-try .democard {
    max-height: calc(100dvh - var(--chrome-h) - 16px - var(--deck-pb)); overflow-y: auto; scrollbar-width: thin;
  }
}
/* On a touch screen the deck flows (landing.html): the card grows with its screen. */
@media (pointer: coarse) {
  .deck-js[data-fo-page="landing"] #deck #fo-try .democard { max-height: none; overflow: visible; }
}
[data-fo-page="landing"] .fo-pair.slides { align-items: stretch; }
@media (max-width: 760px) {
  [data-fo-page="landing"] .fo-pair.slides { display: flex; gap: 0; }
  [data-fo-page="landing"] .fo-pair.slides > .slide { flex: 0 0 100%; }
}

/* ---- #66: paper (docs/specs/audit-fixes-2026-10-23.md) ------------------- */
/* ---- Question navigation, Option A (docs/specs/2026-10-31-question-navigation-build.md,
   steps 1 and 2): one list per room, one counter, Next in a fixed place ------ */
@media (min-width: 761px) {
  /* the phone's title and sub-line stay on phones */
  [data-skin="forest"] .rh-top .fo-crumb__title, [data-skin="forest"] .rh-top .fo-crumb__sub { display: none; }
  [data-skin="forest"] .rh-ctx .rh-ctx-n { color: var(--fo-text); font-weight: 600; }
  /* Next never moves: one row of fixed columns, the Back label and the
     theme pill capped with an ellipsis, so the counter and Next keep their
     place on every question, opened from the route or from the page */
  [data-skin="forest"] #rehearse .rh-top { display: grid; grid-template-columns: auto minmax(96px, 1fr) auto auto auto; align-items: center; column-gap: 10px; }
  [data-skin="forest"] #rehearse .rh-top > #rh-leave { grid-column: 1; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  [data-skin="forest"] #rehearse .rh-top > #rh-fo-crumb { grid-column: 2; flex-wrap: nowrap; overflow: hidden; min-width: 0; }
  [data-skin="forest"] #rehearse .rh-top > #rh-fo-crumb[hidden] { display: none; }
  [data-skin="forest"] #rehearse .rh-top .fo-pill { display: block; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* the counter keeps its whole width ("Q12 of 35 · take 1"): Back and the pill take the ellipsis */
  [data-skin="forest"] #rehearse .rh-top > .rh-ctxwrap { grid-column: 3; margin-left: 0; white-space: nowrap; min-width: max-content; }
  [data-skin="forest"] #rehearse .rh-top > #rh-tts-top { grid-column: 4; }
  [data-skin="forest"] #rehearse .rh-top > #rh-mode { grid-column: 5; }
}
/* 1000 to 1279 px: the side list and the coach column leave the header about
   300 px, so the counter and Next take a row of their own, at its end */
@media (min-width: 1000px) and (max-width: 1279px) {
  [data-skin="forest"] #rehearse .rh-top { grid-template-columns: auto minmax(96px, 1fr) auto auto; row-gap: 6px; }
  [data-skin="forest"] #rehearse .rh-top > #rh-tts-top { grid-column: 3; grid-row: 1; }
  [data-skin="forest"] #rehearse .rh-top > #rh-mode { grid-column: 4; grid-row: 1; }
  [data-skin="forest"] #rehearse .rh-top > .rh-ctxwrap { grid-column: 1 / -1; grid-row: 2; justify-self: end; }
}
@media (max-width: 760px) {
  /* a routed room's count is the header's second line (rhNavSub); a room off
     the route keeps "Q3 of 9" here, on every width */
  [data-skin="forest"] .rehearse.fo-routed .rh-ctx { display: none; }
  [data-skin="forest"] #rehearse .fo-crumb__sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* the end of a stop: "Job description: 3 of 35 kept at 8" */
[data-skin="forest"] .rh-stopend-h { font-family: var(--fo-sans); font-size: 18px; font-weight: 600; color: var(--fo-text); margin: 6px 0; }
/* its two ways on: each keeps its label on one line, the second wraps under the first */
[data-skin="forest"] .rh-stopend .rh-secrow { flex-wrap: wrap; }
[data-skin="forest"] .rh-stopend .rh-secrow > button { white-space: nowrap; flex: none; padding: 10px 16px; }
[data-skin="forest"] .rehearse .fo-essbar { display: none; }

/* A: the side list is back at 1000 px and wider (the base widths: 264 px,
   216 px below 1280), grouped by theme in the stop's order */
@media (min-width: 1000px) {
  [data-skin="forest"] #rehearse .rh-rail { background: var(--fo-ground); border-right: 1px solid var(--fo-divider); }
  /* the list's heading names the stop: beside a theme, the crumb keeps the theme */
  [data-skin="forest"] #rehearse .fo-crumb--theme > .fo-pill--stop { display: none; }
  [data-skin="forest"] #rehearse .rh-ctx .rh-ctx-round { display: none; }
}
[data-skin="forest"] #rehearse .rh-rail-h { font-family: var(--fo-sans); font-size: 16px; font-weight: 600; color: var(--fo-text); }
[data-skin="forest"] #rehearse .rh-rail-sub { font-family: var(--fo-mono); font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--fo-muted); margin-top: 6px; }
[data-skin="forest"] #rehearse .rh-surprise { color: var(--fo-accent); font-size: 13px; margin-top: 10px; align-self: flex-start; }
[data-skin="forest"] #rehearse .rh-lgbox, [data-skin="forest"] #rehearse .rh-lmore { display: flex; flex-direction: column; gap: 2px; }
[data-skin="forest"] #rehearse .rh-lgroup { display: flex; justify-content: space-between; gap: 8px; margin: 16px 6px 6px; font-family: var(--fo-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--fo-muted); }
[data-skin="forest"] #rehearse .rh-lgbox:first-child > .rh-lgroup { margin-top: 4px; }
[data-skin="forest"] #rehearse .rh-lgroup .k { color: var(--fo-text-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-skin="forest"] #rehearse .rh-lgroup .c { flex: none; }
[data-skin="forest"] #rehearse .rh-lgroup.must .k, [data-skin="forest"] #rehearse .rh-lgroup.must .c { color: var(--fo-accent); }
[data-skin="forest"] #rehearse .rh-lmore-sum { margin: 10px 6px 4px; padding: 4px 0; font-family: var(--fo-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--fo-text-2); cursor: pointer; border-radius: 6px; }
[data-skin="forest"] #rehearse .rh-lrow { color: var(--fo-text-2); border-radius: 10px; padding: 8px 10px; }
[data-skin="forest"] #rehearse .rh-lrow:hover { background: var(--fo-card); color: var(--fo-text); }
[data-skin="forest"] #rehearse .rh-lrow.cur { background: var(--fo-raised); color: var(--fo-text); box-shadow: inset 3px 0 0 var(--fo-accent); }
[data-skin="forest"] #rehearse .rh-lrow .n { font-family: var(--fo-mono); font-size: 12px; letter-spacing: 0; color: var(--fo-muted); width: 20px; }
[data-skin="forest"] #rehearse .rh-lrow .s { font-family: var(--fo-mono); font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--fo-muted); }
/* on the current row's raised fill the muted grey is 4.18:1; text-2 is 6.88:1 */
[data-skin="forest"] #rehearse .rh-lrow.cur .n, [data-skin="forest"] #rehearse .rh-lrow.cur .s { color: var(--fo-text-2); }
[data-skin="forest"] #rehearse .rh-lrow.done .s, [data-skin="forest"] #rehearse .rh-lrow .s.band-high { color: var(--fo-accent); }
[data-skin="forest"] #rehearse .rh-lrow.needs .s, [data-skin="forest"] #rehearse .rh-lrow .s.master { color: var(--fo-amber); }
[data-skin="forest"] #rehearse .rh-lrow .s.kept { color: var(--fo-accent); }
[data-skin="forest"] #rehearse .rh-lrow .s.tried { color: var(--fo-amber); }

/* A: the numbered strip under the header, below 1000 px: one swipeable row,
   a gap between themes, the current box filled, kept green, tried amber
   (a take keeps its own small marks: #rehearse.taking) */
@media (max-width: 999px) {
  [data-skin="forest"] #rehearse:not(.taking) .rh-progress { display: block; margin: 0; padding: 8px 0; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--fo-divider); }
  [data-skin="forest"] #rehearse:not(.taking) .rh-progress .qstrip { display: flex; flex-wrap: nowrap; margin: 0; gap: 6px; padding: 0; max-width: none; }
  [data-skin="forest"] #rehearse:not(.taking) .rh-progress .qseg { flex: none; min-width: 36px; height: 36px; border-radius: 10px; background: var(--fo-card); border: 1px solid var(--fo-border); color: var(--fo-text-2); font-family: var(--fo-mono); font-size: 13px; letter-spacing: 0; }
  [data-skin="forest"] #rehearse:not(.taking) .rh-progress .qseg.gstart { margin-left: 10px; }
  [data-skin="forest"] #rehearse:not(.taking) .rh-progress .qseg.done { border-color: var(--fo-accent); color: var(--fo-accent); }
  [data-skin="forest"] #rehearse:not(.taking) .rh-progress .qseg.needs { border-color: var(--fo-amber); color: var(--fo-amber); }
  [data-skin="forest"] #rehearse:not(.taking) .rh-progress .qseg.cur { background: var(--fo-text); border-color: var(--fo-text); color: var(--fo-ground); font-weight: 700; }
}
@media (max-width: 760px) {
  [data-skin="forest"] #rehearse:not(.taking) .rh-progress { margin: 0 -16px; padding: 10px 16px; }
}

/* The app's own print block (index.html) re-pins its tokens for paper, but
   the skin remaps the same tokens at a higher specificity and paints the body
   itself, so a printed sheet came out grey on dark green. Re-pinned here at
   the skin's own specificity, and the chrome taken off the page: the bar, the
   phone tabs, the Menu panel, the position strip ("‹ Your route"), the route
   map, the floating Practice next and the Delete link (the app's own print
   block drops the aside). Last in the file, after every screen rule it
   overrides. The colour scheme is the app block's too: forest.js stamps
   color-scheme: dark inline on <html>, and its print rule
   html,body{color-scheme:light !important} is what keeps the page margins
   white with "Background graphics" on. */
@media print {
  :root[data-skin="forest"][data-theme="dark"],
  :root[data-skin="forest"] {
    --fo-ground: #fff; --fo-card: #fff; --fo-raised: #fff; --fo-border: #ccc; --fo-divider: #ddd;
    --fo-route: #999; --fo-connector: #999; --fo-node: #eee;
    --fo-text: #22302C; --fo-text-2: #3F4E47; --fo-muted: #56635F;
    --fo-accent: #1D5C50; --fo-amber: #7F5F12; --fo-red: #8A3D20;
    --fo-on-accent: #fff; --fo-primary-bg: #F3F1EA; --fo-primary-text: #15302E;
    --fo-track: #E8E4D8; --fo-wash: transparent; --fo-accent-wash: transparent; --fo-accent-line: #B9C8D8;
    --fo-amber-wash: transparent; --fo-amber-line: #ddd;
    --ink: #22302C; --slate: #3F4E47; --mute: #56635F;
    --sage: #1D5C50; --sage-deep: #16453D; --pine: #16453D; --emerald: #20763A;
    --brass: #7F5F12; --brass-fill: #AB8528; --brass-soft: transparent; --brass-line: #ddd;
    --clay: #A9502F; --clay-deep: #8A3D20; --clay-fill: #A9502F; --clay-fill-hi: #A9502F;
    --field-line: #8A9890; --line: #ccc; --line-strong: #999; --line-focus: #999; --focus: #1D5C50;
    --bg: #fff; --bg-soft: #fff; --surface: #fff; --glass: #fff;
    --sage-tint: #DFE8E2; --emerald-wash: #E1EEE0; --clay-tint: #F4E3D7;
    --emerald-line: #B9C8D8; --clay-line: #ddd; --sage-line: #B9C8D8;
    --steel: #3A5F85; --steel-deep: #2B4A6B; --steel-tint: #E1E8EF; --steel-line: #B9C8D8;
    --sh-card: none; --sh-lg: none;
    --hm-surface: #fff; --hm-line: #E6E2D6; --hm-line-soft: #EEEBE2; --hm-track: #E8E4D8;
    --hm-control-line: #D5D0C2; --hm-control-line-hover: #D5D0C2; --hm-row-hover: #fff; --hm-ghost-hover: #fff;
    --hm-ink: #15302E; --hm-text: #1F2A28; --hm-muted: #56635F; --hm-icon: #8A948F; --hm-accent: #1D5C50;
    --hm-hero: #fff; --hm-on-ink: #15302E; --hm-on-ink-muted: #3F4E47; --hm-on-ink-line: #ccc;
    --hm-primary: #F3F1EA; --hm-primary-hover: #F3F1EA; --hm-on-primary: #15302E;
  }
  [data-skin="forest"] body { background: #fff; color: #22302C; }
  [data-skin="forest"] .topbar, [data-skin="forest"] .fo-tabs, [data-skin="forest"] .fo-navpanel,
  [data-skin="forest"] .fo-iv-strip, [data-skin="forest"] .fo-map, [data-skin="forest"] .iv-next,
  [data-skin="forest"] .iv-dangerfoot { display: none !important; }
}