/* ES3D Manual — shared stylesheet for the static pages under /manual/.
 *
 * Brand rules (repo CLAUDE.md): warm Quartz backgrounds — never pure white — Ore-gold accent
 * used sparingly, three type voices (Spectral / Inter / IBM Plex Mono, all shipped in /fonts —
 * no external requests), structure from whitespace + 1px rules. No glow, no gradient text,
 * no flashy shadows, no bouncy animation. Tokens mirror apps/web/src/index.css so the manual
 * looks like the product it documents, in both color schemes.
 */

/* ---- type (subset of the app's font-faces; same shipped files) ---- */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/inter-400-latin.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: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/inter-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/inter-500-latin.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: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/inter-600-latin.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: 'Spectral'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/spectral-400-latin.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: 'Spectral'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/spectral-500-latin.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: 'Spectral'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/spectral-600-latin.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: 400; font-display: swap; src: url('/fonts/ibm-plex-mono-400-latin.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; font-display: swap; src: url('/fonts/ibm-plex-mono-500-latin.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; }

/* ---- tokens (light = the app's quartz theme) ---- */
:root {
  --bg: rgb(244 241 234);
  --bg-card: rgb(251 250 246);
  --bg-well: rgb(236 231 220);
  --ink: rgb(21 51 63);
  --dim: rgb(73 96 105);
  --faint: rgb(94 112 120);
  --rule: rgb(216 210 197);
  --rule-faint: rgb(230 225 214);
  --gold: rgb(138 102 32);
  --serif: 'Spectral', Georgia, serif;
  --sans: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: rgb(14 27 34);
    --bg-card: rgb(19 36 45);
    --bg-well: rgb(23 48 59);
    --ink: rgb(230 237 240);
    --dim: rgb(159 180 191);
    --faint: rgb(120 141 152);
    --rule: rgb(35 64 78);
    --rule-faint: rgb(28 55 68);
    --gold: rgb(200 169 106);
  }
}

/* ---- shell ---- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.shell {
  display: grid; grid-template-columns: 15rem minmax(0, 47rem);
  gap: 4rem; max-width: 70rem; margin: 0 auto; padding: 0 1.5rem;
}
main { padding: 3rem 0 6rem; min-width: 0; }

/* ---- sidebar nav ---- */
.side { padding: 3rem 0 4rem; }
.side-inner { position: sticky; top: 2rem; }
.brand { display: block; text-decoration: none; color: var(--ink); margin-bottom: 2rem; }
.brand .word { font-family: var(--serif); font-weight: 600; font-size: 1.2rem; letter-spacing: .01em; }
.brand .sub { display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-top: .1rem; }
.nav { list-style: none; margin: 0; padding: 0; font-size: .875rem; }
.nav li { margin: 0; }
.nav a {
  display: block; padding: .38rem .75rem; color: var(--dim); text-decoration: none;
  border-left: 1px solid var(--rule);
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] {
  color: var(--ink); font-weight: 600;
  border-left: 2px solid var(--gold); padding-left: calc(.75rem - 1px);
}
.nav .nav-group {
  margin: 1.4rem 0 .45rem; padding-left: .75rem; font-size: .7rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--faint);
}
.side .app-link { margin-top: 2.25rem; padding-left: .75rem; font-size: .8rem; }
.side .app-link a { color: var(--gold); text-decoration: none; }
.side .app-link a:hover { text-decoration: underline; }

/* Mobile: the same nav markup becomes a single horizontal strip of pills that scrolls sideways —
 * one row instead of eleven, and no per-page markup for a disclosure to fall out of sync with. */
@media (max-width: 60rem) {
  .shell { display: block; }
  .side { padding: 1.25rem 0 0; }
  .side-inner { position: static; }
  .brand { margin-bottom: 1rem; }
  .nav {
    display: flex; gap: .3rem; overflow-x: auto; padding-bottom: .5rem;
    border-bottom: 1px solid var(--rule); scrollbar-width: thin;
    /* fade the right edge so the strip reads as scrollable */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
  }
  .nav a {
    white-space: nowrap; border-left: 0; border: 1px solid var(--rule);
    border-radius: 999px; padding: .3rem .7rem; background: var(--bg-card);
  }
  .nav a[aria-current="page"] {
    border-color: var(--gold); border-left: 1px solid var(--gold); padding-left: .7rem;
  }
  .nav .nav-group { display: none; }   /* section labels are separators, meaningless in a row */
  .side .app-link { display: none; }   /* the page footer already links the app */
  main { padding-top: 1.5rem; }
}

/* ---- content typography ---- */
h1 { font-family: var(--serif); font-weight: 600; font-size: 2.1rem; line-height: 1.2; margin: 0 0 .4rem; letter-spacing: -.005em; }
.lede { font-size: 1.08rem; color: var(--dim); margin: 0 0 2.2rem; max-width: 40rem; }
h2 {
  font-family: var(--serif); font-weight: 600; font-size: 1.35rem; line-height: 1.3;
  margin: 2.75rem 0 .65rem; padding-top: 1.15rem; border-top: 1px solid var(--rule);
}
h3 { font-size: .95rem; font-weight: 600; margin: 1.9rem 0 .4rem; }
p, li { color: var(--ink); }
p { margin: .65rem 0; }
ul, ol { padding-left: 1.3rem; margin: .65rem 0; }
a { color: var(--gold); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
strong { font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }
.crumb { font-size: .8rem; color: var(--faint); margin: 0 0 1.6rem; }
.crumb a { color: var(--faint); text-decoration: none; }
.crumb a:hover { color: var(--ink); }

/* ---- inline voices ---- */
code, kbd, .path {
  font-family: var(--mono); font-size: .82em; background: var(--bg-card);
  border: 1px solid var(--rule-faint); padding: .08em .38em; border-radius: 3px;
  white-space: nowrap;
}
kbd { border-color: var(--rule); border-bottom-width: 2px; font-size: .78em; }
.ui { font-weight: 600; }           /* a control's on-screen label, e.g. <span class="ui">Load sample</span> */

/* ---- figures (screenshots) ---- */
figure { margin: 1.6rem 0 2rem; }
figure img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); background: var(--bg-well); }
figcaption { font-size: .85rem; color: var(--dim); margin-top: .55rem; line-height: 1.5; }
figcaption .fig-no { font-family: var(--serif); font-weight: 600; color: var(--ink); margin-right: .4rem; }
.fig-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 46rem) { .fig-pair { grid-template-columns: 1fr; } }

/* ---- workflows (numbered steps) ---- */
.steps { list-style: none; counter-reset: step; margin: 1.4rem 0 2rem; padding: 0; }
.steps > li {
  counter-increment: step; position: relative; padding: .9rem 0 .9rem 3.1rem;
  border-top: 1px solid var(--rule-faint);
}
.steps > li:last-child { border-bottom: 1px solid var(--rule-faint); }
.steps > li::before {
  content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: .95rem;
  font-family: var(--serif); font-weight: 500; font-size: 1.05rem; color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.steps > li > strong:first-child { display: block; margin-bottom: .15rem; }
.steps p { margin: .3rem 0 0; color: var(--dim); font-size: .95rem; }

/* ---- callouts ---- */
.note, .tip, .warn {
  border: 1px solid var(--rule); background: var(--bg-card);
  padding: .85rem 1.1rem; margin: 1.4rem 0; font-size: .95rem;
}
.note strong:first-child, .tip strong:first-child, .warn strong:first-child { display: block; margin-bottom: .3rem; }
.warn { border-left: 2px solid var(--gold); }

/* ---- tables ---- */
table { width: 100%; border-collapse: collapse; margin: 1.4rem 0 2rem; font-size: .92rem; }
th {
  text-align: left; font-size: .72rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); padding: .45rem .75rem .45rem 0;
  border-bottom: 1px solid var(--rule);
}
td { padding: .55rem .75rem .55rem 0; border-bottom: 1px solid var(--rule-faint); vertical-align: top; }
td:first-child { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.table-scroll { overflow-x: auto; }

/* ---- index cards ---- */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.75rem 0 2.25rem; padding: 0; list-style: none; }
@media (max-width: 46rem) { .cards { grid-template-columns: 1fr; } }
.cards a {
  display: block; height: 100%; padding: 1rem 1.15rem 1.05rem; text-decoration: none;
  border: 1px solid var(--rule); background: var(--bg-card); color: var(--ink);
}
.cards a:hover { border-color: var(--dim); }
.cards .card-title { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; display: block; }
.cards .card-desc { display: block; font-size: .85rem; color: var(--dim); margin-top: .25rem; line-height: 1.5; }

/* ---- pager (prev / next) ---- */
.pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); font-size: .9rem; }
.pager a { text-decoration: none; color: var(--ink); max-width: 48%; }
.pager a:hover .pager-title { text-decoration: underline; }
.pager .pager-dir { display: block; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-bottom: .15rem; }
.pager .pager-next { margin-left: auto; text-align: right; }
.pager .pager-title { font-weight: 600; }

/* ---- page footer ---- */
.foot { margin-top: 4rem; padding-top: 1.1rem; border-top: 1px solid var(--rule); font-size: .8rem; color: var(--faint); display: flex; flex-wrap: wrap; gap: .35rem 1.5rem; }
.foot a { color: var(--faint); }

/* ---- what's new: the curated highlights layer ---- */
.highlights { list-style: none; margin: 1.5rem 0 2.5rem; padding: 0; }
.hl { padding: 1.15rem 0 1.25rem; border-top: 1px solid var(--rule-faint); }
.hl:first-child { border-top: 1px solid var(--rule); }
.hl:last-child { border-bottom: 1px solid var(--rule-faint); }
.hl-when {
  margin: 0 0 .3rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint);
}
.hl-title { font-family: var(--serif); font-size: 1.12rem; font-weight: 600; margin: 0 0 .35rem; line-height: 1.3; }
.hl-body { margin: 0; color: var(--dim); max-width: 40rem; }
.hl-more { margin: .45rem 0 0; font-size: .85rem; }
.hl-more a { text-decoration: none; }
.hl-more a:hover { text-decoration: underline; }

/* ---- what's new list ---- */
.release-month { margin: 2.2rem 0 .4rem; display: flex; align-items: baseline; gap: .75rem; }
.month-count { font-family: var(--sans); font-weight: 400; font-size: .8rem; color: var(--faint); }
details.area { border: 1px solid var(--rule); background: var(--bg-card); margin: .5rem 0; }
details.area summary {
  cursor: pointer; padding: .55rem .9rem; font-size: .9rem; list-style: none;
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
}
details.area summary::-webkit-details-marker { display: none; }
details.area .area-name { font-weight: 600; }
details.area .area-name::before { content: '▸ '; color: var(--faint); font-weight: 400; }
details.area[open] .area-name::before { content: '▾ '; }
details.area .area-counts { font-size: .78rem; color: var(--dim); white-space: nowrap; }
details.area .changelog { margin: 0; padding: 0 .9rem .6rem; }
.changelog { list-style: none; margin: .4rem 0 1.2rem; padding: 0; font-size: .92rem; }
.changelog li { padding: .34rem 0 .34rem 0; border-top: 1px solid var(--rule-faint); display: flex; gap: .75rem; align-items: baseline; }
.changelog .chg-kind {
  flex: none; font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint); border: 1px solid var(--rule); padding: .05rem .4rem; border-radius: 3px; min-width: 3.2rem; text-align: center;
}
.changelog .chg-kind.feat { color: var(--gold); border-color: var(--gold); }
.changelog .chg-date { flex: none; font-family: var(--mono); font-size: .75rem; color: var(--faint); font-variant-numeric: tabular-nums; }

@media print {
  .side, .pager, .foot { display: none; }
  .shell { display: block; max-width: none; }
  body { background: #fff; }
}