/*
 * docs/html/assets/style.css — self-contained, flattened stylesheet.
 *
 * Ported from the LatentVLA docs design system (warm "html-effectiveness"
 * palette). The four token layers (raw → warm semantic → dark → cold) and
 * components.css are inlined here so each page works opened directly from
 * file://, with the architecture-diagram components appended at the end.
 */

/* ======================================================================
 * Tier 1 — RAW tokens (palette + type scale).
 * ==================================================================== */

html { font-size: 17px; }

:root {
  /* warm palette */
  --ivory:    #FAF9F5;
  --paper:    #FFFFFF;
  --slate:    #141413;
  --clay:     #D97757;
  --clay-d:   #B85C3E;
  --clay-l:   #E89B81;
  --oat:      #E3DACC;
  --olive:    #788C5D;

  /* greys */
  --g100:     #F0EEE6;
  --g200:     #E6E3DA;
  --g300:     #D1CFC5;
  --g500:     #87867F;
  --g700:     #3D3D3A;

  /* dark raw palette (warm-tinted, hue-preserving) */
  --paper-d:  #15130F;
  --ivory-d:  #1F1C17;
  --oat-d:    #3A3027;

  /* dark greys */
  --gd100:    #28241F;
  --gd200:    #353029;
  --gd300:    #4A453B;
  --gd500:    #8A867E;
  --gd700:    #D6D3CA;
  --gd900:    #F0EEE6;

  /* type families */
  --serif:    ui-serif, Georgia, "Times New Roman", Times, serif;
  --sans:     system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:     ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;

  /* modular type scale, 1.25× */
  --text-xs:   0.8rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.25rem;
  --text-lg:   1.5625rem;
  --text-xl:   1.953rem;
  --text-2xl:  clamp(2.4rem, 5.4vw, 3.9rem);

  /* line heights */
  --lh-tight:   1.06;
  --lh-snug:    1.22;
  --lh-base:    1.55;

  /* spacing scale, 4px base */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --sp-9: 7rem;

  /* radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* borders */
  --bw-thin:   1px;
  --bw-base:   1.5px;
  --bw-strong: 2px;
}

/* ======================================================================
 * Tier 2 — SEMANTIC tokens (warm theme, default).
 * ==================================================================== */

:root {
  --color-surface:        var(--ivory);
  --color-surface-alt:    var(--g100);
  --color-surface-strong: var(--paper);

  --color-border:         var(--g300);
  --color-border-strong:  var(--slate);
  --color-border-soft:    var(--g200);

  --color-text:           var(--g700);
  --color-text-muted:     var(--g500);
  --color-text-strong:    var(--slate);

  --color-accent:         var(--clay);
  --color-accent-hover:   var(--clay-d);
  --color-accent-soft:    var(--oat);

  --color-positive:       var(--olive);
  --color-negative:       var(--clay-d);
  --color-warning:        var(--clay);
  --color-neutral:        var(--g500);

  --color-status-ready:   var(--olive);
  --color-status-wip:     var(--clay);
  --color-status-runlog:  var(--g500);

  --color-focus-ring:     var(--slate);

  --shadow-card:  0 10px 30px rgba(20, 20, 19, 0.10);
  --shadow-soft:  0 12px 32px rgba(20, 20, 19, 0.10);

  --density-row-py: var(--sp-3);
  --density-cell-px: var(--sp-4);
}

/* ======================================================================
 * Dark theme — semantic-only overrides.
 * ==================================================================== */

html[data-theme="dark"] {
  --color-surface:        var(--ivory-d);
  --color-surface-alt:    var(--gd100);
  --color-surface-strong: var(--paper-d);

  --color-border:         var(--gd300);
  --color-border-soft:    var(--gd200);
  --color-border-strong:  var(--gd900);

  --color-text:           var(--gd700);
  --color-text-muted:     var(--gd500);
  --color-text-strong:    var(--gd900);

  --color-accent:         var(--clay-l);
  --color-accent-hover:   var(--clay);
  --color-accent-soft:    var(--oat-d);

  --color-positive:       var(--olive);
  --color-negative:       var(--clay-d);
  --color-warning:        var(--clay-l);
  --color-neutral:        var(--gd500);

  --color-status-ready:   var(--olive);
  --color-status-wip:     var(--clay-l);
  --color-status-runlog:  var(--gd500);

  --color-focus-ring:     var(--gd900);

  --shadow-card:  0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-soft:  0 12px 32px rgba(0, 0, 0, 0.45);
}

/* ======================================================================
 * Components — reference SEMANTIC tokens only.
 * ==================================================================== */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--sans);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--sp-6) var(--sp-9);
}

/* headings */
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--color-text-strong);
  letter-spacing: -0.012em;
}
h1 { font-size: var(--text-xl); line-height: var(--lh-tight); margin: 0 0 var(--sp-2); }
h2 { font-size: var(--text-lg); line-height: var(--lh-snug); margin: 0; }
h3 { font-size: var(--text-md); line-height: var(--lh-snug); margin: var(--sp-5) 0 var(--sp-2); }

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

a {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent-soft);
  text-underline-offset: 3px;
}
a:hover { text-decoration-color: var(--color-accent); }

code, pre { font-family: var(--mono); font-size: 0.92em; }

/* inline code */
:not(pre) > code {
  background: var(--color-surface-alt);
  border: var(--bw-thin) solid var(--color-border-soft);
  border-radius: var(--r-sm);
  padding: 0.08em 0.36em;
  font-size: 0.85em;
  color: var(--color-text-strong);
}

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

hr {
  border: 0;
  border-top: var(--bw-thin) solid var(--color-border-soft);
  margin: var(--sp-7) 0;
}

/* enhanced code blocks */
pre.codeblock {
  position: relative;
  background: var(--color-surface-alt);
  border: var(--bw-thin) solid var(--color-border-soft);
  border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  margin: var(--sp-4) 0;
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.55;
}
pre.codeblock code {
  display: block;
  background: transparent;
  border: 0;
  padding: 0;
  font-size: inherit;
  white-space: pre;
  color: var(--color-text-strong);
}
pre.codeblock[data-language]::before {
  content: attr(data-language);
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-3);
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--color-surface-strong);
  padding: 1px 6px;
  border-radius: var(--r-pill);
  border: var(--bw-thin) solid var(--color-border-soft);
}

/* focus ring */
:focus-visible {
  outline: var(--bw-strong) solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* masthead + wordmark */
header.masthead {
  padding: var(--sp-8) 0 var(--sp-7);
  border-bottom: var(--bw-base) solid var(--color-border);
  margin-bottom: var(--sp-2);
}
.wordmark-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.wordmark {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--text-md);
  color: var(--color-text-strong);
  text-decoration: none;
}
.wordmark-sep {
  width: var(--bw-thin);
  height: 1.1em;
  background: var(--color-accent-soft);
  display: inline-block;
}
.wordmark-page {
  font-family: var(--sans);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.theme-toggle {
  margin-left: auto;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: var(--sp-2);
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  transition: color 120ms, background-color 120ms;
}
.theme-toggle:hover {
  color: var(--color-text-strong);
  background: var(--color-surface-alt);
}
.eyebrow {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: var(--bw-base);
  background: var(--color-accent);
}
h1.hero {
  font-size: var(--text-2xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.018em;
  max-width: 20ch;
}
h1.hero em { font-style: italic; color: var(--color-accent); }
.intro {
  font-size: 1.03rem;
  color: var(--color-text);
  margin: var(--sp-5) 0 0;
  max-width: 680px;
}

/* nav / TOC pills */
nav.toc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-5) 0 0;
}
nav.toc a {
  font-size: 0.78rem;
  padding: var(--sp-2) var(--sp-4);
  border: var(--bw-base) solid var(--color-border);
  border-radius: var(--r-pill);
  text-decoration: none;
  color: var(--color-text);
  background: var(--color-surface-strong);
}
nav.toc a:hover { border-color: var(--color-text-strong); color: var(--color-text-strong); }
nav.toc a .n {
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--color-text-muted);
  margin-left: var(--sp-2);
}

/* section heads */
section { margin-top: var(--sp-8); scroll-margin-top: var(--sp-6); }
.sec-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  margin-bottom: var(--sp-3);
}
.sec-head .idx {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--color-accent);
  font-weight: 600;
  width: 34px;
  flex-shrink: 0;
}
.sec-head h2 { letter-spacing: -0.012em; }
.sec-body { margin-left: 50px; }
@media (max-width: 640px) { .sec-body { margin-left: 0; } }

.sec-intro {
  font-size: 0.95rem;
  color: var(--color-text);
  max-width: 720px;
  margin: 0 0 var(--sp-5) 50px;
}
@media (max-width: 640px) { .sec-intro { margin-left: 0; } }

/* card grid (index) */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(316px, 1fr));
  gap: var(--sp-5);
}
a.card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface-strong);
  border: var(--bw-base) solid var(--color-border);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: border-color 150ms, box-shadow 150ms, transform 150ms;
}
a.card:hover {
  border-color: var(--color-text-strong);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}
.card .thumb {
  height: 120px;
  background: var(--color-surface-alt);
  border-bottom: var(--bw-base) solid var(--color-border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  transition: background-color 150ms, color 150ms;
}
.card:hover .thumb { background: var(--color-accent-soft); color: var(--color-text-strong); }
.card .thumb svg { width: 64px; height: 64px; }
.card .body {
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--sp-2);
}
.card .title {
  font-family: var(--serif);
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--color-text-strong);
}
.card .desc { font-size: 0.84rem; color: var(--color-text); flex: 1; }
.card .file {
  font-family: var(--mono);
  font-size: 0.69rem;
  color: var(--color-text-muted);
  border-top: var(--bw-thin) solid var(--color-border-soft);
  padding-top: var(--sp-3);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
a.card:hover .file { color: var(--color-accent); }

/* status pip */
.status-pip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}
.status-pip::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-status-runlog);
}
.status-pip[data-status="ready"]::before { background: var(--color-status-ready); }
.status-pip[data-status="wip"]::before   { background: var(--color-status-wip); }

/* hyperparam / data mono table */
table.hyperparams, table.data {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sp-4) 0;
}
table.hyperparams { font-family: var(--mono); font-size: 0.84rem; }
table.data { font-size: 0.9rem; }
table.hyperparams th, table.hyperparams td,
table.data th, table.data td {
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
  border-bottom: var(--bw-thin) solid var(--color-border-soft);
  vertical-align: top;
}
table.hyperparams th { color: var(--color-text-muted); font-weight: 400; white-space: nowrap; }
table.hyperparams td { color: var(--color-text-strong); }
table.data th {
  font-family: var(--mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  border-bottom: var(--bw-base) solid var(--color-border);
  background: var(--color-surface-alt);
}
table.data tbody tr:hover { background: var(--color-surface-alt); }
table.data td code { font-size: 0.82em; }

/* callouts & asides */
.callout {
  padding: var(--sp-4) var(--sp-5);
  margin: var(--sp-5) 0;
  border-left: 3px solid var(--color-accent);
  background: var(--color-surface-alt);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--text-sm);
  color: var(--color-text);
}
.callout > .label {
  font-family: var(--mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  display: block;
  margin-bottom: var(--sp-1);
}
.callout[data-tag="decision"] { border-left-color: var(--color-positive); }
.callout[data-tag="decision"] > .label { color: var(--color-positive); }
.callout[data-tag="pitfall"] { border-left-color: var(--color-negative); }
.callout[data-tag="pitfall"] > .label { color: var(--color-negative); }

/* footer */
footer.page-foot {
  margin-top: var(--sp-9);
  border-top: var(--bw-base) solid var(--color-border);
  padding-top: var(--sp-6);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-5);
  flex-wrap: wrap;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
footer.page-foot .k {
  font-family: var(--serif);
  font-style: italic;
  color: var(--color-text);
  font-size: var(--text-sm);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ======================================================================
 * Architecture diagrams — custom box-and-flow components.
 * Pure HTML/CSS, no JS dependency. Tuned to the warm palette.
 * ==================================================================== */

.arch {
  margin: var(--sp-6) 0;
  padding: var(--sp-6) var(--sp-5);
  background:
    radial-gradient(circle at 1px 1px, var(--color-border-soft) 1px, transparent 0);
  background-size: 22px 22px;
  background-color: var(--color-surface-alt);
  border: var(--bw-base) solid var(--color-border);
  border-radius: var(--r-lg);
  overflow-x: auto;
}
.arch-title {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: center;
  margin-bottom: var(--sp-5);
}

/* vertical flow column */
.flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  min-width: 280px;
}

/* a node box */
.node {
  position: relative;
  width: 100%;
  max-width: 560px;
  background: var(--color-surface-strong);
  border: var(--bw-base) solid var(--color-border);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  box-shadow: var(--shadow-card);
}
.node .node-kind {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  display: block;
  margin-bottom: 2px;
}
.node .node-title {
  font-family: var(--serif);
  font-size: var(--text-md);
  color: var(--color-text-strong);
  line-height: var(--lh-snug);
}
.node .node-sub {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--color-text-muted);
  margin-top: var(--sp-1);
  line-height: 1.45;
}
.node .dim {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--color-text);
  background: var(--color-surface-alt);
  border: var(--bw-thin) solid var(--color-border-soft);
  border-radius: var(--r-pill);
  padding: 1px 8px;
  margin-top: var(--sp-2);
}

/* node accent variants */
.node.is-frozen { border-style: dashed; border-color: var(--color-neutral); }
.node.is-frozen .node-kind { color: var(--color-neutral); }
.node.is-trainable { border-left: 3px solid var(--color-accent); }
.node.is-encoder { border-left: 3px solid var(--color-positive); }
.node.is-encoder .node-kind { color: var(--color-positive); }
.node.is-loss { border-left: 3px solid var(--color-warning); background: var(--color-surface-alt); }
.node.is-loss .node-kind { color: var(--color-warning); }

/* connector between stacked nodes */
.conn {
  width: var(--bw-strong);
  height: var(--sp-5);
  background: var(--color-border);
  position: relative;
  flex-shrink: 0;
}
.conn::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid var(--color-border);
}
.conn[data-label]::before {
  content: attr(data-label);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(8px, -50%);
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--color-text-muted);
}

/* a row of parallel nodes (e.g. multiple heads) */
.node-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  width: 100%;
}
.node-row .node { max-width: 232px; flex: 1 1 200px; padding: var(--sp-3) var(--sp-4); }
.node-row .node .node-title { font-size: var(--text-base); }

/* a labelled bracket grouping for a stage */
.stage-band {
  width: 100%;
  max-width: 620px;
  border: var(--bw-thin) dashed var(--color-border);
  border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  position: relative;
  background: color-mix(in srgb, var(--color-surface-strong) 45%, transparent);
}
.stage-band > .stage-label {
  position: absolute;
  top: 0;
  left: var(--sp-4);
  transform: translateY(-50%);
  background: var(--color-surface-alt);
  padding: 0 var(--sp-3);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.stage-band .flow { gap: 0; }

/* fan-out container: one source splits to a row */
.fan { width: 100%; display: flex; flex-direction: column; align-items: center; }

/* legend */
.arch-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: center;
  margin-top: var(--sp-5);
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--color-text-muted);
}
.arch-legend span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.arch-legend i {
  width: 22px; height: 0; display: inline-block;
  border-top: 3px solid var(--color-border);
}
.arch-legend i.l-frozen { border-top-style: dashed; border-top-color: var(--color-neutral); }
.arch-legend i.l-train  { border-top-color: var(--color-accent); }
.arch-legend i.l-enc    { border-top-color: var(--color-positive); }
.arch-legend i.l-loss   { border-top-color: var(--color-warning); }

/* foveated pyramid: concentric level chips */
.pyramid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
}
.pyr-level {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  max-width: 520px;
  background: var(--color-surface-strong);
  border: var(--bw-thin) solid var(--color-border-soft);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-4);
  font-size: 0.82rem;
}
.pyr-level .lv {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-accent);
}
.pyr-level .lv-desc { color: var(--color-text); }
.pyr-level .lv-tok {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

@media print {
  body { background: white !important; color: black !important; }
  nav.toc, .theme-toggle { display: none !important; }
  .arch { background: white !important; }
  .node { box-shadow: none !important; }
}