/*
 * Anchor505 theme — the look of AnchorProp at prop.anchor505.com.
 *
 * Served with `--theme anchor505` (FASTX_THEME); the server links it straight
 * after each page's own stylesheet, so every rule here wins its tie. Values
 * are Anchor505's own: docs/BRAND_LOCK.md and web/src/app/globals.css in the
 * anchor505 repo are the source of truth, and a change there belongs here too.
 *
 * Three constraints from the pages themselves:
 *   - Only `font-family` is set, never the `font` shorthand. The phone rules
 *     give inputs 16px (iOS zooms on focus below that) and targets 44px, and a
 *     shorthand in a later sheet would undo them without a sound.
 *   - `--ok` stays #RRGGBB: the equity chart appends an alpha byte to it.
 *   - Dark only. This :root comes after the pages' prefers-color-scheme:light
 *     blocks, so it replaces them; the brand has no light canvas.
 */

/* IBM Plex, self-hosted (OFL, fonts/OFL.txt). Latin only: Chinese falls
   through to the system face in the stacks below, as it does on Anchor505.
   The Mono 500 face also answers for 600, so the pages' bold figures render
   in Medium instead of a synthesised bold — Anchor505 ships Mono 400/500
   only and gives primary figures their weight with 500. */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:100 700;font-display:swap;
  src:url(fonts/ibm-plex-sans-latin-wght.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:100 499;font-display:swap;
  src:url(fonts/ibm-plex-mono-latin-400.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500 900;font-display:swap;
  src:url(fonts/ibm-plex-mono-latin-500.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  color-scheme:dark;
  --ground:#080B0F;      /* canvas, obsidian */
  --sunk:#0B1015;        /* wells: inputs, lesson rows */
  --panel:#0E141B;       /* surface */
  --raised:#151D26;      /* surface, elevated */
  --line:#26313D;        /* border, default */
  --line-soft:#1D2731;   /* border, subtle */
  --line-strong:#364554;
  --text:#F3F6F8;
  --dim:#9AA7B4;
  --faint:#697785;
  --sys:#62D7E3;         /* anchor cyan: the one interactive colour */
  --sys-hover:#45C4D0;
  --ok:#20C997;
  --warn:#F0B95B;
  --stop:#F06471;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"PingFang SC",monospace;
}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
::selection{background:rgb(98 215 227 / .28)}

/* ── Brand lockup: the A505 mark beside the deployment's name ─────────── */
.brand-name{display:inline-flex;align-items:center;gap:.5em;vertical-align:middle;
  font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:-.01em;
  text-transform:none;color:var(--text);line-height:1}
.brand-name::before{content:"";flex:none;width:1.4em;height:1.4em;
  background:url(mark.svg) center/contain no-repeat}
.brand{display:inline-flex;align-items:center;text-transform:none;letter-spacing:0}

/* The masthead badge names the codebase, not the product. */
.mast>.tag[data-i18n="app.badge"]{display:none}

/* ── Type: the interface in Plex Sans, every figure in Plex Mono ──────── */
.mast h1,header.top h1,h1[data-i]{font-family:var(--sans);letter-spacing:.08em}
.lbl,.panel>header .lbl,h2,th,.k,.strip .k,.costs .k,.lhead span,.eyebrow,
.tag,.pill,.banner strong,.nav,.hcell .sub,.gauge .frac{
  font-family:var(--sans);font-weight:600;letter-spacing:.08em}
.lesson-body h2,.lesson-body h3,.lesson-body h4{font-family:var(--sans);letter-spacing:-.01em}
button,.cta,.ghost{font-family:var(--sans);letter-spacing:.01em}
button{font-weight:500}
#locale,#notices-bell,.chart-tabs button,.tfbar button{font-family:var(--sans)}
.note,.notice p,.nhead,.toast,.check{font-family:var(--sans)}
.hero h1{letter-spacing:-.014em}
.lead,.note,.plain{letter-spacing:-.004em}
table,td,.v,.value,.fee,.ladder,.prow,.spread,dd,.num,.hcell b{letter-spacing:-.01em}

/* ── Shape: thin borders, 8 / 6 / 4 radii, no pills ───────────────────── */
.panel,.gauge,.strip,.costs,.health,.banner,.preview,.toast,.mod,.card,.steps li,
#picker .pick,.signin .panel,table{border-radius:8px}
select,input,textarea,button,.who,#locale,#notices-bell,#switcher select,.lang,
.cta,.ghost,.nav a.primary{border-radius:6px}
.tag,.pill,.chart-tabs button,.tfbar button,.chips button{border-radius:4px}
.track,.track .fill{border-radius:2px}

/* ── Actions: one solid cyan, outlines for everything else ────────────── */
.cta,.nav a.primary,button.primary{background:var(--sys);border:1px solid var(--sys);
  color:var(--ground);font-weight:600;transition:background-color .15s,border-color .15s}
.cta:hover,.nav a.primary:hover,button.primary:hover:not(:disabled){background:var(--sys-hover);border-color:var(--sys-hover)}
.ghost{border-color:var(--line-strong);transition:border-color .15s,color .15s}
.ghost:hover{border-color:var(--sys);color:var(--sys)}
button{transition:border-color .15s,background-color .15s,color .15s}
button:hover:not(:disabled){border-color:var(--line-strong)}
a{color:var(--sys)}
.nav a:hover{color:var(--text)}
:focus-visible{outline:2px solid var(--sys);outline-offset:3px}

/* ── Landing hero: the precision grid and reference rule of anchor505.com ─ */
.hero{position:relative;overflow:hidden;max-width:none;margin-top:32px;
  padding:clamp(28px,6vw,56px);border:1px solid var(--line);border-radius:12px;
  background:radial-gradient(circle at 82% 18%,rgb(98 215 227 / .1),transparent 36%),var(--panel)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.34;
  background-image:linear-gradient(to right,var(--line-soft) 1px,transparent 1px),
    linear-gradient(to bottom,var(--line-soft) 1px,transparent 1px);
  background-size:42px 42px;
  -webkit-mask-image:linear-gradient(to left,#000,transparent 72%);
  mask-image:linear-gradient(to left,#000,transparent 72%)}
.hero::after{content:"";position:absolute;top:0;bottom:0;right:clamp(32px,14vw,132px);
  width:1px;background:var(--line);pointer-events:none}
.hero>*{position:relative;z-index:1;max-width:760px}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media(max-width:480px){
  .hero{margin-top:16px}
  .hero::after{display:none}
}