/* Arkhelion dossier — presentation layer.
 *
 * Tokens mirror pages/arkhelion-site/public/css/site.css :root (BRAND.md §7 and
 * §7.1 web surface). Copied rather than @imported so the hosted build and the
 * standalone build are each self-sufficient and neither depends on load order.
 *
 * Two hard rules from the brand lock, both easy to break by accident:
 *   1. No explicit gray hex. Grays are white at fixed opacity steps.
 *   2. Violet is hairline, focus and selection ONLY. Never text. It measures
 *      3.87:1 on this ground and fails WCAG AA.
 * --dim is the 0.46 step (4.68:1), the AA floor for text under 18.66px, which
 * is where the fine-print tier lives. Do not lower it.
 *
 * Layout follows the impeccable-design pass: rule lines and spacing carry the
 * hierarchy. No nested cards, no gradients, one accent used sparingly.
 */

@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/GeistMono-Regular.woff2') format('woff2');
}

:root {
  color-scheme: dark;

  --bg: #0a0a0c;
  --fg: #ededed;
  --card: #111114;
  --border: #212127;

  --muted: rgba(255, 255, 255, 0.62);        /* 7.76:1 — body prose */
  --dim: rgba(255, 255, 255, 0.46);          /* 4.68:1 — AA floor, 11px+ */
  --hair: rgba(255, 255, 255, 0.08);         /* decoration only */
  --hair-strong: rgba(255, 255, 255, 0.13);  /* decoration only */

  --violet: #6b5ecd;
  --emerald: hsl(160 84% 39%);

  --fs-1: 12px; --fs-2: 13.5px; --fs-3: 15px; --fs-4: 18.5px;
  --fs-5: 22px; --fs-6: 28px; --fs-7: 34px; --fs-8: 38px;

  --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px;
  --sp-5: 48px; --sp-6: 64px; --sp-7: 96px;

  --radius: 2px;
  --ease: cubic-bezier(0.25, 1, 0.5, 1);
  --dur: 200ms;

  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--muted);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--violet); color: var(--fg); }

/* ── Internal-build banner ─────────────────────────────────────────────── */

.ibanner {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--card);
  color: var(--fg);
  border-bottom: 1px solid var(--violet);
  font-family: var(--mono);
  font-size: var(--fs-1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  padding: var(--sp-1);
}

/* ── Header ───────────────────────────────────────────────────────────── */

header.top {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 10, 12, 0.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.hrow {
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--sp-2) var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* Route back to the site. Added 2026-07-27: the dossier's only brand link is
   `.brand href="#top"`, which scrolls but never leaves the document, so every
   build was a DEAD END — a reader who landed here (it is shared by link, and
   is noindex, so arriving cold is the normal case) had no way to reach
   arkhelion.ai except editing the URL.

   The href is ABSOLUTE on purpose. One template produces three builds, two of
   which are standalone files sent by email/AirDrop with no origin to be
   relative to; `/` would resolve to the local filesystem root there. */
.home {
  font-family: var(--mono);
  font-size: var(--fs-1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  text-decoration: none;
  white-space: nowrap;
  /* 44px tall touch target (WCAG 2.5.5) without growing the header row. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.home:hover, .home:focus-visible { color: var(--fg); }
@media (max-width: 720px) {
  /* On narrow screens the header row is already tight (brand + search + two
     buttons). Keep the arrow, drop the wordmark — the link stays reachable
     and the row stops wrapping. */
  .home { font-size: 0; }
  .home::before { content: "\2190"; font-size: 13px; }
}

.brand {
  font-family: var(--mono);
  font-size: var(--fs-2);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg);
  white-space: nowrap;
}

.brand span {
  color: var(--dim);
  margin-left: var(--sp-1);
  letter-spacing: 0.14em;
}

#q {
  flex: 1;
  max-width: 340px;
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--fg);
  padding: 6px 10px;
  font-family: var(--mono);
  font-size: var(--fs-2);
  outline: none;
  transition: border-color var(--dur) var(--ease);
}

#q::placeholder { color: var(--dim); }
#q:focus { border-color: var(--violet); }

.btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--dim);
  padding: 6px 10px;
  font-family: var(--mono);
  font-size: var(--fs-1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.btn:hover { border-color: var(--violet); color: var(--fg); }

/* ── Shell ────────────────────────────────────────────────────────────── */

.wrap {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: var(--sp-6);
  padding: 0 var(--sp-3);
}

nav.toc {
  position: sticky;
  top: 84px;
  align-self: start;
  max-height: calc(100vh - 108px);
  overflow-y: auto;
  padding: var(--sp-4) 0 var(--sp-6);
  scrollbar-width: thin;
}

nav.toc a {
  display: block;
  color: var(--dim);
  text-decoration: none;
  padding: 4px 0 4px var(--sp-2);
  border-left: 1px solid transparent;
  line-height: 1.45;
  font-size: var(--fs-3);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

nav.toc a:hover { color: var(--fg); border-left-color: var(--hair-strong); }
nav.toc a.active { color: var(--fg); border-left-color: var(--violet); }

nav.toc a.l2 {
  font-family: var(--mono);
  font-size: var(--fs-2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: var(--sp-2);
}

nav.toc a.l3 { padding-left: var(--sp-4); font-size: var(--fs-3); }

main { padding: var(--sp-5) 0 var(--sp-7); min-width: 0; }

/* ── Type ─────────────────────────────────────────────────────────────── */

h1 {
  font-family: var(--mono);
  font-size: var(--fs-8);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--fg);
  margin: 0 0 var(--sp-2);
}

h3 {
  font-family: var(--sans);
  font-size: var(--fs-4);
  font-weight: 600;
  line-height: 1.4;
  color: var(--fg);
  margin: var(--sp-5) 0 var(--sp-1);
}

h4 {
  font-family: var(--mono);
  font-size: var(--fs-2);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  margin: var(--sp-4) 0 var(--sp-1);
}

p { margin: var(--sp-1) 0 var(--sp-2); }

strong { color: var(--fg); font-weight: 600; }

a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px;
    text-decoration-color: var(--hair-strong);
    transition: text-decoration-color var(--dur) var(--ease); }
a:hover { text-decoration-color: var(--violet); }

hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-5) 0; }

code {
  font-family: var(--mono);
  font-size: 0.88em;
  color: var(--fg);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1px 5px;
}

pre.code {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3);
  overflow-x: auto;
  font-size: var(--fs-2);
  line-height: 1.7;
  color: var(--muted);
  margin: var(--sp-2) 0;
}

pre.code code { background: none; border: 0; padding: 0; color: var(--muted); }

ul, ol { margin: var(--sp-1) 0 var(--sp-2); padding-left: var(--sp-3); }
li { margin: 6px 0; }
li::marker { color: var(--dim); }

blockquote {
  margin: var(--sp-2) 0;
  padding-left: var(--sp-2);
  border-left: 1px solid var(--violet);
  color: var(--muted);
}

/* ── The fine-print tier ──────────────────────────────────────────────────
   Plain point above, engineering detail here. Smaller and dimmer, hung off a
   hairline so the two layers are visually separable at a glance. 12px at the
   0.46 white step is 4.68:1, which clears AA for text under 18.66px. */

p.fine {
  font-size: var(--fs-2);
  line-height: 1.75;
  color: var(--dim);
  border-left: 1px solid var(--hair-strong);
  padding: 2px 0 2px var(--sp-2);
  margin: 0 0 var(--sp-3);
  max-width: 62em;
}

p.fine code { font-size: 0.92em; color: var(--muted); }
p.fine strong { color: var(--muted); }

/* ── Sections ─────────────────────────────────────────────────────────── */

details.section { border-top: 1px solid var(--border); }

details.section > summary {
  cursor: pointer;
  list-style: none;
  padding: var(--sp-3) 0;
  font-family: var(--mono);
  font-size: var(--fs-5);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--fg);
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  transition: color var(--dur) var(--ease);
}

details.section > summary::-webkit-details-marker { display: none; }

details.section > summary::after {
  content: "+";
  margin-left: auto;
  color: var(--dim);
  font-size: var(--fs-4);
}

details.section[open] > summary::after { content: "\2212"; }

.sbody { padding: 0 0 var(--sp-5) 0; }

/* ── Tables ───────────────────────────────────────────────────────────── */

.tw { overflow-x: auto; margin: var(--sp-2) 0 var(--sp-3); }

table { border-collapse: collapse; width: 100%; font-size: var(--fs-3); }

th {
  text-align: left;
  font-family: var(--mono);
  font-size: var(--fs-1);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
  padding: var(--sp-1) var(--sp-2) var(--sp-1) 0;
  border-bottom: 1px solid var(--border);
  vertical-align: bottom;
}

td {
  padding: var(--sp-1) var(--sp-2) var(--sp-1) 0;
  border-bottom: 1px solid var(--hair);
  vertical-align: top;
  color: var(--muted);
}

td strong { color: var(--fg); }
tbody tr:last-child td { border-bottom: 0; }

/* ── Callout ──────────────────────────────────────────────────────────── */

aside.callout {
  border-left: 1px solid var(--violet);
  padding: 2px 0 2px var(--sp-2);
  margin: var(--sp-3) 0;
}

aside.callout b {
  display: block;
  font-family: var(--mono);
  font-size: var(--fs-1);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 4px;
}

aside.callout p { margin: 0; font-size: var(--fs-3); }

/* ── Search ───────────────────────────────────────────────────────────── */

.hide { display: none !important; }

mark {
  background: hsl(160 84% 39% / 0.22);
  color: var(--fg);
  border-radius: var(--radius);
  padding: 0 2px;
}

#nores {
  color: var(--dim);
  font-family: var(--mono);
  font-size: var(--fs-3);
  padding: var(--sp-5) 0;
}

footer {
  border-top: 1px solid var(--border);
  margin-top: var(--sp-5);
  padding: var(--sp-3) 0;
  color: var(--dim);
  font-family: var(--mono);
  font-size: var(--fs-1);
  letter-spacing: 0.08em;
}

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .wrap { grid-template-columns: 1fr; gap: 0; }
  nav.toc {
    position: static;
    max-height: none;
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--border);
  }
  nav.toc a.l3 { display: none; }
  .hrow { flex-wrap: wrap; gap: var(--sp-1); padding: var(--sp-2); }
  #q { max-width: none; order: 3; width: 100%; margin-left: 0; }
  main { padding-top: var(--sp-3); }
  details.section > summary { font-size: var(--fs-4); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

@media print {
  nav.toc, header.top, .ibanner { display: none; }
  body { background: #fff; color: #000; }
  .wrap { display: block; }
  details.section > .sbody { display: block !important; }
  p.fine { color: #333; border-left-color: #ccc; }
}

/* ── Section icons ────────────────────────────────────────────────────────
   Inline SVG from icons.mjs. currentColor means each glyph inherits the
   colour of the heading it sits in, so the AA rules that govern text govern
   the icon too and nothing needs a hard-coded value. */

.ico {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  opacity: 0.75;
  transform: translateY(1px);
  transition: opacity var(--dur) var(--ease);
}

details.section > summary { align-items: center; }
details.section > summary:hover .ico,
details.section[open] > summary .ico { opacity: 1; }

nav.toc a.l2 {
  display: flex;
  align-items: center;
  gap: 10px;
}

nav.toc a.l2 .ico {
  width: 15px;
  height: 15px;
  opacity: 0.55;
}

nav.toc a.l2:hover .ico,
nav.toc a.l2.active .ico { opacity: 0.95; }

nav.toc a.l3 { display: block; }

/* ══ Figures ══════════════════════════════════════════════════════════════
   Built to the dataviz procedure. Marks are thin, data-ends are rounded and
   anchored to the baseline, grid and axes stay recessive, and every value is
   directly labelled so nothing depends on colour alone.

   Violet (#6b5ecd, 3.87:1) is a GRAPHICS mark only. Every number and label
   wears text ink. Emerald (6.08:1) carries Arkhelion's answer because it is
   the brand's live/success token and it clears text contrast.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Hero stat tiles ─────────────────────────────────────────────────── */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin: var(--sp-4) 0;
}

.stat { background: var(--bg); padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-3); }

.stat-v {
  font-family: var(--mono);
  font-size: clamp(26px, 4.4vw, 40px);
  line-height: 1.1;
  color: var(--fg);
  letter-spacing: -0.01em;
}

.stat-l {
  font-size: var(--fs-2);
  color: var(--dim);
  margin-top: var(--sp-1);
  line-height: 1.5;
}

/* ── Bar chart ───────────────────────────────────────────────────────── */

figure.chart { margin: var(--sp-4) 0; }

figure.chart figcaption {
  font-family: var(--mono);
  font-size: var(--fs-1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: var(--sp-2);
}

.bar-head {
  display: grid;
  grid-template-columns: minmax(140px, 1.4fr) minmax(120px, 2fr) minmax(110px, 1fr);
  gap: var(--sp-2);
  font-family: var(--mono);
  font-size: var(--fs-1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  padding-bottom: var(--sp-1);
  border-bottom: 1px solid var(--border);
}

.bar-head-ours { color: var(--emerald); }

.bar-row {
  display: grid;
  grid-template-columns: minmax(140px, 1.4fr) minmax(120px, 2fr) minmax(110px, 1fr);
  gap: var(--sp-2);
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--hair);
}

.bar-row:last-child { border-bottom: 0; }

.bar-label { font-size: var(--fs-3); color: var(--muted); line-height: 1.4; }

.bar-track {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: 14px;
}

.bar-svg {
  flex: 1;
  height: 9px;
  min-width: 40px;
  display: block;
  overflow: visible;
}

.bar-svg rect { fill: var(--violet); }

.bar-val {
  font-family: var(--mono);
  font-size: var(--fs-2);
  color: var(--fg);             /* text ink, never the series colour */
  white-space: nowrap;
}

.bar-ours {
  font-family: var(--mono);
  font-size: var(--fs-2);
  color: var(--emerald);
  line-height: 1.4;
}

/* ── Percentile position ─────────────────────────────────────────────── */

.pctile { margin: var(--sp-4) 0 var(--sp-5); }

.pct-svg { width: 100%; height: 40px; display: block; overflow: visible; }
.pct-svg .pct-band { fill: var(--violet); }
.pct-svg .pct-tick { stroke: var(--fg); stroke-width: 0.35; vector-effect: non-scaling-stroke; }
.pct-svg .pct-axis-line { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }

.pct-axis {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: var(--fs-1);
  color: var(--dim);
  padding-top: 6px;
}

.pctile figcaption {
  margin: var(--sp-2) 0 0;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--sans);
  font-size: var(--fs-2);
  color: var(--dim);
  line-height: 1.7;
}

/* ── Status rows ─────────────────────────────────────────────────────── */

.status { margin: var(--sp-3) 0; border-top: 1px solid var(--border); }

.st-row {
  display: grid;
  grid-template-columns: 18px 74px minmax(110px, 1fr) minmax(0, 2.2fr);
  gap: var(--sp-2);
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--hair);
  font-size: var(--fs-3);
}

.st-pip { font-size: 11px; line-height: 1.6; }
.st-shipped .st-pip { color: var(--emerald); }
.st-partial .st-pip { color: var(--fg); }
.st-planned .st-pip { color: var(--dim); }

.st-state {
  font-family: var(--mono);
  font-size: var(--fs-1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
}

.st-shipped .st-state { color: var(--emerald); }
.st-domain { color: var(--fg); }
.st-detail { color: var(--dim); font-size: var(--fs-2); }

/* ── References ──────────────────────────────────────────────────────── */

sup.fn { font-size: 0.62em; line-height: 0; vertical-align: super; margin-left: 1px; }
sup.fn a { color: var(--dim); text-decoration: none; }
sup.fn a:hover { color: var(--fg); }

.refs { list-style: none; padding: 0; margin: var(--sp-2) 0 0; }

.refs li {
  font-size: var(--fs-1);
  line-height: 1.65;
  color: var(--dim);
  padding: 3px 0 3px var(--sp-3);
  text-indent: calc(-1 * var(--sp-3));
  margin: 0;
}

.refs li:target { color: var(--fg); }

.ref-n {
  font-family: var(--mono);
  color: var(--muted);
  margin-right: 6px;
}

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .bar-head { display: none; }
  .bar-row { grid-template-columns: 1fr; gap: 6px; padding: var(--sp-2) 0; }
  .bar-ours::before {
    content: "Arkhelion: ";
    color: var(--dim);
  }
  .st-row { grid-template-columns: 18px 1fr; row-gap: 2px; }
  .st-state { grid-column: 2; }
  .st-domain, .st-detail { grid-column: 2; }
}

/* ══ Shell furniture ══════════════════════════════════════════════════════ */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--card);
  color: var(--fg);
  padding: 10px 16px;
  border: 1px solid var(--violet);
  font-family: var(--mono);
  font-size: var(--fs-2);
}

.skip:focus { left: var(--sp-2); top: var(--sp-2); }

/* Reading progress. Width is driven from JS via the CSSOM, which CSP's
   style-src does not intercept, so no inline style attribute is emitted. */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  z-index: 70;
  background: var(--violet);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 90ms linear;
  pointer-events: none;
}

a.brand { text-decoration: none; display: block; }
a.brand span { display: block; margin: 2px 0 0; letter-spacing: 0.16em; text-transform: none; }

/* ── Section numeral plates ──────────────────────────────────────────────
   The numeral was previously inside the heading text, which duplicated it
   against any generated counter. It is now its own element, so the title
   reads clean and the number carries visual rhythm down the page. */

.sn {
  font-family: var(--mono);
  font-size: var(--fs-1);
  color: var(--dim);
  letter-spacing: 0.1em;
  flex: 0 0 auto;
  width: 22px;
  padding-top: 3px;
}

details.section[open] > summary .sn { color: var(--violet); }
.stitle {
  flex: 1;
  /* A real h2 so the outline is h1 > h2 > h3 for assistive tech. It inherits
     the summary's type rather than the default h2 block styling. */
  margin: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

details.section {
  border-top: 1px solid var(--border);
  scroll-margin-top: 88px;
}

details.section > summary { padding: var(--sp-4) 0; gap: var(--sp-2); }

/* ── Sidebar ─────────────────────────────────────────────────────────── */

.toc-h {
  font-family: var(--mono);
  font-size: var(--fs-1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 0 0 var(--sp-2);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-1);
}

.tn {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--dim);
  flex: 0 0 auto;
  width: 16px;
}

nav.toc a.l2.active .tn { color: var(--violet); }

.toc-meta {
  margin-top: var(--sp-3);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--border);
  font-family: var(--mono);
  font-size: var(--fs-1);
  color: var(--dim);
  line-height: 1.8;
}

/* ── Footer ──────────────────────────────────────────────────────────── */

footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: space-between;
}

/* ── Lede: the sentence under a section title ────────────────────────── */

.sbody > p:first-child {
  font-size: var(--fs-4);
  line-height: 1.55;
  color: var(--fg);
  margin-bottom: var(--sp-3);
}

@media (max-width: 900px) {
  .toc-h, .toc-meta { display: none; }
}