/* Neural Networks Are Already Clean — shared thread stylesheet.
   Blend: Silico Design System type & surfaces (Newsreader display/body,
   Suisse/sans UI, IBM Plex Mono labels, white page + cream cards, ember
   accent) with the distill-preview figure color grammar (teal = native/
   cooperative, coral = corruption/alternative, gold = provisional). */

@font-face {
  font-family: 'Newsreader';
  src: url('./fonts/Newsreader-latin.woff2') format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('./fonts/Newsreader-latin-italic.woff2') format('woff2');
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Silico surfaces & text */
  --paper: #ffffff;            /* page background (Silico "obsidian") */
  --card: #f6f5f0;             /* cream card surface */
  --card-hover: #edece5;
  --ink: #1d272a;              /* alabaster */
  --muted: #7b7b7b;            /* sandstone */
  --faint: #f6f5f0;
  --rule: #b4b4b4;             /* juniper */
  --hair: rgba(196, 191, 178, 0.55);

  /* Silico accent */
  --ember: #c4650d;
  --solar: #d07533;
  --ember-tint: rgba(196, 101, 13, 0.12);

  /* Distill-preview figure grammar (kept for scientific semantics) */
  --teal: #2f7f7a;
  --teal-soft: #dbece8;
  --coral: #c65d48;
  --coral-soft: #f5e2db;
  --gold: #92691c;
  --gold-soft: #f3ead4;

  /* Silico type */
  --serif: 'Newsreader', 'Iowan Old Style', Palatino, Georgia, serif;
  --sans: 'Suisse Intl', Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --measure: 730px;

  --shadow-card:
    0px 0px 1px rgba(3, 7, 18, 0.00),
    0px 0px 3px rgba(3, 7, 18, 0.01),
    0px 1px 6px rgba(3, 7, 18, 0.01),
    0px 2px 12px rgba(3, 7, 18, 0.02),
    0px 3px 18px rgba(3, 7, 18, 0.02);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background-color: var(--ember-tint); }

/* ---------- Thread navigation bar ---------- */
.thread-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 22px;
  width: min(1080px, calc(100% - 48px));
  margin: 0 auto;
  padding: 18px 0 16px;
  border-bottom: 1px solid var(--hair);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.thread-nav .wordmark { color: var(--ember); font-weight: 600; text-decoration: none; margin-right: auto; }
.thread-nav a { color: var(--muted); text-decoration: none; }
.thread-nav a:hover { color: var(--ink); }
.thread-nav a.active { color: var(--ink); border-bottom: 2px solid var(--ember); padding-bottom: 2px; }
.thread-nav a.todo-link { color: var(--gold); }

/* ---------- Page header ---------- */
.page-header {
  width: min(var(--measure), calc(100% - 48px));
  margin: 0 auto;
  padding: 64px 0 8px;
}
.page-header .eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ember);
}
.page-header h1 {
  margin: 12px 0 10px;
  font-family: var(--serif);
  font-size: 50px;
  font-weight: 420;
  line-height: 1.06;
  letter-spacing: -.01em;
}
.page-header .dek {
  margin: 0 0 6px;
  color: var(--muted);
  font-family: var(--serif);
  font-style: italic;
  font-size: 23px;
  line-height: 1.42;
}
.page-header .byline {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--hair);
  color: var(--muted);
  font-family: var(--sans);
  font-size: 13px;
}
.page-header .byline strong { color: var(--ink); font-weight: 600; }

/* Status chip for draft / stub / coming-soon pages */
.status-chip {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 9px 3px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: var(--gold);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* ---------- Article body ---------- */
article.thread-page {
  width: min(var(--measure), calc(100% - 48px));
  margin: 0 auto 40px;
}
article.thread-page > p, article.thread-page > ul, article.thread-page > ol,
article.thread-page > blockquote, article.thread-page > table { max-width: var(--measure); }
article.thread-page h2 {
  margin: 60px 0 14px;
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 450;
  line-height: 1.16;
  letter-spacing: -.01em;
}
article.thread-page h3 {
  margin: 42px 0 10px;
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.24;
}
article.thread-page h2 .anchor, article.thread-page h3 .anchor {
  margin-left: 8px; color: var(--hair); text-decoration: none; font-size: .72em;
}
article.thread-page h2:hover .anchor, article.thread-page h3:hover .anchor { color: var(--ember); }
article.thread-page a { color: var(--ember); text-decoration: none; border-bottom: 1px solid var(--ember-tint); }
article.thread-page a:hover { border-bottom-color: var(--ember); }
article.thread-page strong { font-weight: 620; }
article.thread-page em { font-style: italic; }
article.thread-page blockquote {
  margin: 26px 0;
  padding: 2px 0 2px 20px;
  border-left: 3px solid var(--ember-tint);
  color: var(--muted);
  font-style: italic;
}
article.thread-page hr {
  margin: 56px auto;
  border: 0;
  border-top: 1px solid var(--hair);
}

/* Lead-in paragraph */
.lede { font-size: 23px; line-height: 1.55; }

/* Tables */
article.thread-page table {
  width: 100%;
  margin: 28px 0;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 14.5px;
}
article.thread-page th {
  padding: 8px 12px;
  border-bottom: 2px solid var(--ink);
  text-align: left;
  font-weight: 600;
}
article.thread-page td { padding: 8px 12px; border-bottom: 1px solid var(--hair); }
article.thread-page tr:hover td { background: var(--card); }

/* Margin-note style asides (inline, not floated, to keep it simple) */
.note {
  margin: 26px 0;
  padding: 15px 19px;
  background: var(--card);
  border-radius: 8px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.55;
}
.note strong { color: var(--ink); }

/* Editorial note: rough-draft material kept visible on purpose */
.draft-note {
  margin: 26px 0;
  padding: 14px 18px;
  background: var(--coral-soft);
  border-left: 3px solid var(--coral);
  border-radius: 0 8px 8px 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.55;
}
.draft-note .tag {
  display: block;
  margin-bottom: 6px;
  color: var(--coral);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ---------- TODO components (scanned by build_todo.py) ---------- */

/* Figure placeholder */
figure.todo-figure {
  margin: 40px 0;
  padding: 26px 24px 22px;
  border: 2px dashed var(--gold);
  border-radius: 10px;
  background: var(--gold-soft);
}
figure.todo-figure .todo-tag {
  display: block;
  margin-bottom: 8px;
  color: var(--gold);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
figure.todo-figure .todo-title {
  margin: 0 0 6px;
  font: 600 17px/1.3 var(--sans);
  color: var(--ink);
}
figure.todo-figure .todo-desc {
  margin: 0;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
}

/* Missing section placeholder */
section.todo-section {
  margin: 40px 0;
  padding: 22px 24px;
  border: 2px dashed var(--coral);
  border-radius: 10px;
  background: var(--coral-soft);
}
section.todo-section .todo-tag {
  display: block;
  margin-bottom: 8px;
  color: var(--coral);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
section.todo-section .todo-title { margin: 0 0 6px; font: 600 17px/1.3 var(--sans); }
section.todo-section .todo-desc { margin: 0; color: var(--muted); font-family: var(--sans); font-size: 14px; line-height: 1.55; }

/* Inline TODO marker for missing numbers/claims mid-sentence */
span.todo-inline {
  padding: 1px 6px 2px;
  border-radius: 4px;
  background: var(--gold-soft);
  box-shadow: inset 0 0 0 1px var(--gold);
  color: var(--gold);
  font-family: var(--mono);
  font-size: .78em;
}

/* ---------- Landing page paper cards ---------- */
.paper-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  width: min(1080px, calc(100% - 48px));
  margin: 40px auto;
}
.paper-card {
  display: block;
  padding: 22px 22px 18px;
  border: 1px solid var(--hair);
  border-radius: 12px;
  background: var(--card);
  text-decoration: none;
  color: var(--ink);
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.paper-card:hover { background: var(--card-hover); border-color: var(--ember); box-shadow: var(--shadow-card); }
.paper-card .kicker {
  display: block;
  margin-bottom: 8px;
  color: var(--ember);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.paper-card.coming .kicker { color: var(--gold); }
.paper-card h3 { margin: 0 0 8px; font-family: var(--serif); font-size: 24px; font-weight: 480; line-height: 1.18; }
.paper-card p { margin: 0; color: var(--muted); font-family: var(--sans); font-size: 13.5px; line-height: 1.5; }

/* ---------- Footer ---------- */
.thread-footer {
  width: min(1080px, calc(100% - 48px));
  margin: 80px auto 60px;
  padding-top: 18px;
  border-top: 1px solid var(--hair);
  color: var(--muted);
  font-family: var(--sans);
  font-size: 13px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
}
.thread-footer a { color: var(--ember); text-decoration: none; }

/* ---------- TODO page ---------- */
.todo-index { width: min(880px, calc(100% - 48px)); margin: 0 auto 80px; }
.todo-index h2 { margin: 48px 0 6px; font-family: var(--serif); font-size: 28px; font-weight: 450; line-height: 1.2; }
.todo-index h2 a { color: inherit; text-decoration: none; }
.todo-index h2 a:hover { color: var(--ember); }
.todo-index .page-count { color: var(--muted); font-family: var(--sans); font-size: 13.5px; margin: 0 0 14px; }
.todo-item {
  display: grid;
  grid-template-columns: 92px 130px 1fr;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hair);
  font-family: var(--sans);
  font-size: 14.5px;
  align-items: baseline;
}
.todo-item .kind {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.todo-item .kind.figure { color: var(--gold); }
.todo-item .kind.section { color: var(--coral); }
.todo-item .kind.inline { color: var(--teal); }
.todo-item .id { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.todo-item .what strong { font-weight: 600; }
.todo-item .what .desc { display: block; color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.todo-item a { color: var(--ember); text-decoration: none; }
.todo-summary {
  display: flex;
  gap: 34px;
  margin: 30px 0 6px;
  font-family: var(--sans);
}
.todo-summary .stat .n { display: block; font-family: var(--serif); font-size: 42px; font-weight: 420; line-height: 1; }
.todo-summary .stat .label {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  body { font-size: 17.5px; }
  .page-header h1 { font-size: 36px; }
  .todo-item { grid-template-columns: 74px 1fr; }
  .todo-item .id { display: none; }
}

/* ---------- Built figures (fragments in figures/<id>.html) ---------- */
figure.built-fig {
  margin: 44px 0;
  padding: 0;
}
figure.built-fig .fig-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--hair);
}
figure.built-fig .fig-claim {
  margin: 0;
  font: 600 16.5px/1.35 var(--sans);
  color: var(--ink);
}
figure.built-fig .fig-real {
  margin-left: auto;
  flex: none;
  padding: 1px 8px 2px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
}
figure.built-fig .fig-real.data { color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); }
figure.built-fig .fig-real.partial { color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
figure.built-fig .fig-real.mock { color: var(--coral); box-shadow: inset 0 0 0 1px var(--coral); }
figure.built-fig .fig-howto {
  margin: -8px 0 18px;
  max-width: var(--measure);
  font: 400 12.5px/1.5 var(--sans);
  color: var(--muted);
}
figure.built-fig figcaption {
  margin-top: 16px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.55;
  max-width: var(--measure);
}
figure.built-fig figcaption .fig-note { color: var(--gold); }
figure.built-fig .thumb {
  display: block;
  border-radius: 8px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px rgba(24,35,31,.08);
  max-width: 100%;
}
figure.built-fig .thumb-placeholder {
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: repeating-linear-gradient(45deg, #f0efe9 0 8px, #eae9e2 8px 16px);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .04em;
  text-align: center;
  padding: 4px;
}
figure.built-fig .fig-hover { position: relative; cursor: help; border-bottom: 1px dotted var(--muted); }
figure.built-fig .fig-hover .fig-tip {
  display: none;
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  z-index: 30;
  width: max-content;
  max-width: 320px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  font: 400 12.5px/1.45 var(--sans);
  text-transform: none;
  letter-spacing: 0;
  box-shadow: 0 4px 20px rgba(0,0,0,.18);
}
figure.built-fig .fig-hover:hover .fig-tip { display: block; }