/* ============================================================================
   MindScope — static pages stylesheet (surface S5).

   The nine pages the footer links to live outside React, so they cannot import
   frontend/src/design/tokens.css. This file carries the Main token block from
   that file verbatim (:root values + the metric-matched fallback faces) and
   the small amount of furniture those pages need: a masthead, a ruled
   document, a ruled footer.

   Motion law, repeated in every file of this foundation:
   "Object-level only: nothing that contains the page moves; only the thing the
   finger is on."

   ⚠ CACHE: this filename carries no content hash, firebase.json serves every
   .css as `public, max-age=31536000, immutable`, and sw.js caches non-HTML
   subresources cache-first under one cache name. The nine pages therefore link
   it as `/static/site.css?v=N`. BUMP THAT N IN ALL NINE PAGES ON EVERY EDIT TO
   THIS FILE, or returning visitors keep the old stylesheet.

   Rules that travel with this file:
   - No literal hex, radius, duration or bezier below the token block.
   - Hairlines separate; there are no cards inside cards and no side bars.
   - Hover lives inside @media (hover:hover) and (pointer:fine).
   - Every control is at least 44px on its short side; inline links in prose
     grow their hit area and cancel the growth again in the line box.
   - Reduced motion redefines tokens (movement to 0), it does not switch
     transitions off.
   ========================================================================== */

/* ---- Metric-matched fallback faces (tokens.css, measured 2026-09-20) ---- */
@font-face {
  font-family: 'Assistant Fallback';
  src: local('Arial'), local('Roboto');
  size-adjust: 93%; ascent-override: 102%; descent-override: 27%; line-gap-override: 0%;
}
@font-face {
  font-family: 'FRL Fallback'; /* Frank Ruhl Libre — Main display */
  src: local('Times New Roman'), local('Georgia');
  size-adjust: 104%; ascent-override: 88%; descent-override: 26%; line-gap-override: 0%;
}

/* ---- Tokens · Main (dark ink, warm brass hairlines, teal) -------------- *
   Copied from frontend/src/design/tokens.css :root. These pages are always
   Main; no [data-vertical] override ships here.                             */
:root {
  --bg: #0A0E14;
  --bg-2: #121821;
  --bg-3: #1A2130;
  --line: rgba(198, 160, 94, .22);
  --line-2: rgba(198, 160, 94, .34);
  --fg: #F4F3EF;
  --fg-2: #CFC9BC;
  --fg-3: #A6A093;
  --accent: #00D4AA;
  --accent-fg: #052620;
  --accent-soft: #0C2C27;
  --ok: #4ADE80;
  --warn: #F5B544;
  --danger: #FF7A72;
  --ghost: rgba(244, 243, 239, .07);
  --scrim: rgba(2, 6, 12, .62);

  --font-display: 'Frank Ruhl Libre', 'FRL Fallback', 'Times New Roman', serif;
  --font-body: 'Assistant', 'Assistant Fallback', Arial, sans-serif;
  --font-ui: var(--font-body);
  --font-num: var(--font-body);

  --fs-1: 0.8125rem;   /* 13.00 */
  --fs-2: 1rem;        /* 16.00 */
  --fs-3: 1.25rem;     /* 20.00 */
  --fs-4: 1.5625rem;   /* 25.00 */
  --fs-5: 1.9531rem;   /* 31.25 */
  --fs-6: 2.4414rem;   /* 39.06 */
  --fs-7: 3.0518rem;   /* 48.83 */
  --fs-8: 3.8147rem;   /* 61.04 */
  --fs-9: 4.7684rem;   /* 76.29 */

  --lh-tight: 1.12;
  --lh-normal: 1.55;
  --lh-loose: 1.8;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;
  --sp-10: 64px;
  --sp-11: 80px;
  --sp-12: 112px;

  /* The measure is stated in `em`, not `ch`, on purpose. `ch` is the advance of
     the "0" glyph of whatever font is CURRENTLY resolved, so every measured
     block re-widths the moment the webfont lands (66ch is 546px in the fallback
     and 520px in Assistant) and the whole document re-wraps after first paint.
     `em` holds the same measure at every font-size and every breakpoint without
     that dependency. 1ch of Assistant = 0.492em, so 66ch = 32.5em. */
  --measure: 32.5em;
  --gutter: var(--sp-4);

  --r-sm: 3px;
  --r-md: 6px;
  --r-pill: 999px;

  --sh-rest: 0 2px 6px rgba(2, 6, 12, .55);
  --sh-lift: 0 10px 28px rgba(2, 6, 12, .62);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --move-1: 8px;
  --move-2: 10px;
  --press: 0.98;

  --z-header: 40;
  --z-sticky: 50;
  --z-sheet: 100;
  --z-modal: 200;
  --z-toast: 300;

  /* Local to this file: the column these documents set in. */
  --wrap: 860px;
}

@media (min-width: 900px) {
  :root { --gutter: var(--sp-8); }
}

/* Fewer and gentler, not off (tokens.css / DECISION 4). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-2: 120ms;
    --dur-3: 160ms;
    --move-1: 0px;
    --move-2: 0px;
    --press: 1;
  }
}

/* ---- Base -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-2);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}

body.wide { --wrap: 1000px; }

img { display: block; max-inline-size: 100%; }
a { color: inherit; text-decoration: none; }
strong, b { color: var(--fg); font-weight: 700; }

/* Browser surfaces we did not draw still carry the design. */
::selection { background: var(--accent); color: var(--accent-fg); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::-webkit-scrollbar { inline-size: 8px; block-size: 8px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: var(--r-sm); }
::-webkit-scrollbar-track { background: var(--bg-2); }

.ms-num {
  font-family: var(--font-num);
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
}

.sr {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.wrap {
  max-inline-size: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---- Skip link --------------------------------------------------------- *
   accessibility.html promises one at the top of the page; these pages keep
   that promise.                                                             */
.skip {
  position: absolute;
  inset-block-start: var(--sp-2);
  inset-inline-start: var(--sp-2);
  z-index: var(--z-modal);
  display: inline-flex; align-items: center;
  min-block-size: 44px; padding-inline: var(--sp-4);
  background: var(--accent); color: var(--accent-fg);
  font-family: var(--font-ui); font-weight: 700;
  border-radius: var(--r-sm);
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* ---- Masthead ---------------------------------------------------------- */
.mast {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  background: var(--bg);
  border-block-end: 1px solid var(--line);
}
.mast-row {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-4);
  min-block-size: 56px;
  padding-block: var(--sp-1);
}
.brand {
  display: inline-flex; align-items: center;
  min-block-size: 44px; margin-inline-end: auto;
  font-family: var(--font-display); font-weight: 900; font-size: var(--fs-3);
  line-height: 1; letter-spacing: 0;
}
.brand i {
  display: inline-block;
  inline-size: 9px; block-size: 9px;
  background: var(--accent);
  margin-inline-end: var(--sp-2);
}
.qnav ul {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-2);
  margin: 0; padding: 0; list-style: none;
}
/* The prose `li` margin must not leak into the masthead list: it is what makes
   the sticky chrome taller than the 56px the direction asks for. */
.qnav li { margin: 0; }
.qnav a {
  display: inline-flex; align-items: center; justify-content: center;
  min-block-size: 44px; min-inline-size: 48px;
  padding-inline: var(--sp-2);
  font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-1);
  color: var(--fg-3);
  transition: color var(--dur-1) var(--ease-out);
}

/* ---- Document head ----------------------------------------------------- */
/* The masthead is sticky, so any in-page jump (the skip link, any anchor) must
   clear it or it lands underneath. The row is a flat 56px at every width, so
   one value clears it everywhere. */
main { display: block; scroll-margin-block-start: 64px; }

.doc { padding-block: var(--sp-8) var(--sp-10); }

.rule {
  inline-size: 64px; block-size: 3px;
  background: var(--accent);
  margin-block-end: var(--sp-5);
}

h1 {
  margin: 0;
  font-family: var(--font-display); font-weight: 900;
  font-size: var(--fs-5); line-height: var(--lh-tight);
  text-wrap: balance; letter-spacing: 0;
}
h1 em { font-style: normal; color: var(--accent); }

.lede {
  margin: var(--sp-4) 0 0;
  max-inline-size: 22.6em; /* 46ch of Assistant; see --measure on why not ch */
  color: var(--fg-2);
  font-size: var(--fs-2); line-height: var(--lh-loose);
}

.upd {
  margin: var(--sp-3) 0 0;
  color: var(--fg-3);
  font-family: var(--font-ui); font-size: var(--fs-1);
}

/* ---- Ruled section heads (the labelled-rule construction) -------------- */
h2 {
  display: flex; align-items: baseline; gap: var(--sp-4);
  margin-block: var(--sp-10) var(--sp-4);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-4); line-height: 1.2;
  text-wrap: balance;
}
h2::after {
  content: "";
  /* A real minimum: the heading wraps before the rule degrades to a stub. */
  flex: 1 0 20%;
  block-size: 1px;
  background: var(--line-2);
  align-self: center;
}
/* DECISION 2 order: heading, hairline, measurement at the far edge (the count
   is a DOM child, so it needs `order` to land past the `::after` rule). */
h2 .lr-count {
  order: 1;
  flex: none;
  font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-1);
  color: var(--fg-3);
  white-space: nowrap;
}

h3 {
  margin: var(--sp-7) 0 var(--sp-2);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-3); line-height: 1.3;
  text-wrap: balance;
}

/* ---- Prose ------------------------------------------------------------- */
p {
  margin: var(--sp-4) 0 0;
  max-inline-size: var(--measure);
  color: var(--fg-2);
  line-height: var(--lh-loose);
}

ul, ol {
  margin: var(--sp-4) 0 0;
  padding-inline-start: var(--sp-6);
  max-inline-size: var(--measure);
}
li {
  margin-block: var(--sp-2);
  color: var(--fg-2);
  line-height: var(--lh-loose);
}
li::marker { color: var(--fg-3); }

/* Inline links in running text: a real hit area that costs the line box
   nothing (primitives.css .ms-inline-target). */
main p a,
main li a,
.fine a {
  display: inline-block;
  padding-block: 14px; margin-block: -14px;
  padding-inline: var(--sp-2); margin-inline: calc(var(--sp-2) * -1);
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-1) var(--ease-out);
}

/* ---- Plane (a quiet surface, hairline, no side bar) -------------------- */
.plane {
  margin-block-start: var(--sp-6);
  padding: var(--sp-5) var(--sp-6);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.plane > :first-child { margin-block-start: 0; }
.plane p { max-inline-size: 30.5em; } /* 62ch of Assistant; see --measure */

/* ---- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  min-block-size: 48px; padding-inline: var(--sp-6);
  margin-block-start: var(--sp-5);
  background: var(--accent); color: var(--accent-fg);
  border-radius: var(--r-sm);
  font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-2);
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
  transition:
    transform var(--dur-1) var(--ease-out),
    background-color var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out),
    opacity var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out);
}
.btn:active { transform: scale(var(--press)); }
.btn svg { flex: none; }
.btn--block { display: flex; }
.btn--sec {
  background: none; color: var(--fg);
  border: 1px solid var(--line-2);
}

/* ---- Ruled index (a contents list, never a row of cards) --------------- */
.index {
  list-style: none;
  margin: var(--sp-6) 0 0;
  padding: 0;
  max-inline-size: none;
  border-block-start: 1px solid var(--line-2);
}
.index > li { margin: 0; border-block-end: 1px solid var(--line); }
/* A whole row is the target, so it opts out of the inline-link treatment. */
.index a {
  display: flex; align-items: center; gap: var(--sp-4);
  min-block-size: 64px;
  padding-block: var(--sp-4); margin-block: 0;
  padding-inline: 0; margin-inline: 0;
  color: inherit; text-decoration: none;
  transition: background-color var(--dur-1) var(--ease-out);
}
.index .ix-body { flex: 1; min-inline-size: 0; }
.index .ix-t {
  display: block;
  margin: 0;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-3);
  line-height: 1.3; color: var(--fg);
  text-wrap: balance;
}
.index .ix-d {
  display: block;
  margin: var(--sp-1) 0 0;
  max-inline-size: var(--measure);
  color: var(--fg-2); font-size: var(--fs-2); line-height: var(--lh-normal);
}
.index .ix-meta {
  display: block;
  margin-block-start: var(--sp-2);
  font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-1);
  color: var(--accent);
}
.index .ix-go {
  flex: none;
  color: var(--fg-3);
  transition: color var(--dur-1) var(--ease-out);
}
.index em { font-style: normal; color: var(--accent); }

/* Two ruled columns, the contents-page construction from the direction. */
@media (min-width: 720px) {
  .index--split { display: grid; grid-template-columns: 1fr 1fr; }
  .index--split > li:nth-child(2n) {
    padding-inline-start: var(--sp-6);
    border-inline-start: 1px solid var(--line);
  }
  .index--split > li:nth-child(2n+1) { padding-inline-end: var(--sp-6); }
}

/* ---- Numbered sequence (how-it-works) ---------------------------------- */
.steps { list-style: none; margin: var(--sp-6) 0 0; padding: 0; max-inline-size: none; }
.steps > li {
  margin: 0;
  padding-block: var(--sp-7);
  border-block-start: 1px solid var(--line);
}
.steps > li:first-child { border-block-start: 1px solid var(--line-2); }
.steps h3 { margin-block: 0 var(--sp-3); display: flex; align-items: baseline; gap: var(--sp-4); }
.steps h3::after {
  content: "";
  /* Same minimum as h2::after: these heads wrap too, and a 24px rule reads as
     a stray dash rather than as the ruled head. */
  flex: 1 0 20%;
  block-size: 1px; background: var(--line);
  align-self: center;
}
.steps h3 .lr-count {
  order: 1;
  flex: none;
  font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-1);
  color: var(--fg-3);
}
.shot {
  margin-block-start: var(--sp-5);
  max-inline-size: 340px;
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.shot img { inline-size: 100%; block-size: auto; }

@media (min-width: 900px) {
  .steps > li { display: grid; grid-template-columns: 1fr 340px; column-gap: var(--sp-9); align-items: start; }
  .steps .step-body { grid-column: 1; }
  .steps .shot { grid-column: 2; grid-row: 1; margin-block-start: 0; }
}

/* ---- Questions (details) ----------------------------------------------- */
.qa { margin-block-start: var(--sp-6); border-block-start: 1px solid var(--line-2); }
.qa details { border-block-end: 1px solid var(--line); }
.qa summary {
  display: flex; align-items: center; gap: var(--sp-3);
  min-block-size: 56px; padding-block: var(--sp-2);
  font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-2);
  color: var(--fg);
  cursor: pointer;
  list-style: none;
  touch-action: manipulation;
  transition: color var(--dur-1) var(--ease-out);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary svg {
  flex: none;
  color: var(--accent);
  transition: transform var(--dur-2) var(--ease-out);
}
.qa details[open] summary svg { transform: rotate(180deg); }
.qa details p:last-child { margin-block-end: var(--sp-5); }

/* ---- Footer ------------------------------------------------------------ */
.foot {
  margin-block-start: var(--sp-10);
  padding-block: var(--sp-7) var(--sp-9);
  background: var(--bg-2);
  border-block-start: 1px solid var(--line-2);
}
.fnav {
  display: flex; flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  margin: 0; padding: 0;
  max-inline-size: none;
  list-style: none;
}
.fnav li { margin: 0; }
.fnav a {
  display: inline-flex; align-items: center;
  min-block-size: 44px; min-inline-size: 48px;
  padding-inline: var(--sp-2);
  font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-2);
  color: var(--fg-2);
  transition: color var(--dur-1) var(--ease-out);
}
.fnav--legal { margin-block-start: var(--sp-2); }
.fnav--legal a { font-weight: 400; font-size: var(--fs-1); color: var(--fg-3); }
.copy {
  margin: var(--sp-5) 0 0;
  color: var(--fg-3);
  font-family: var(--font-ui); font-size: var(--fs-1); line-height: var(--lh-normal);
}
.fine {
  margin: var(--sp-2) 0 0;
  max-inline-size: var(--measure);
  color: var(--fg-3);
  font-family: var(--font-ui); font-size: var(--fs-1); line-height: var(--lh-normal);
}

/* ---- Hover only on a real pointer -------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .qnav a:hover { color: var(--fg); }
  .fnav a:hover { color: var(--fg); }
  main p a:hover, main li a:hover, .fine a:hover { color: var(--fg); }
  .btn:hover { opacity: .9; }
  .btn--sec:hover { opacity: 1; background-color: var(--ghost); border-color: var(--accent); color: var(--fg); }
  .index a:hover { background-color: var(--bg-2); }
  .index a:hover .ix-go { color: var(--accent); }
  .qa summary:hover { color: var(--accent); }
}

/* ---- Desktop ----------------------------------------------------------- */
@media (min-width: 900px) {
  /* The masthead does NOT grow at desktop: it stays in parity with the shipped
     Header primitive (a flat 56px row and an --fs-3 wordmark at every width),
     so the chrome does not jump when a visitor crosses from the app into a
     footer page. */
  .doc { padding-block: var(--sp-10) var(--sp-11); }
  h1 { font-size: var(--fs-6); }
  .lede { font-size: var(--fs-3); line-height: var(--lh-normal); }
}