@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ════════════════════════════════════════════════════════════════════
   DESIGN TOKENS — copied unchanged from the v14 deck (Operator's Terminal)
   Warm graphite · single amber accent · JetBrains Mono · ASCII rules
   ════════════════════════════════════════════════════════════════════ */
:root {
  --bg:          #1A1A1C;
  --bg-deep:     #131315;
  --bg-card:     #222226;
  --bg-card-2:   #1F1F23;
  --bg-hi:       rgba(229, 162, 76, 0.07);
  --text:        #E6E1D4;
  --text-mid:    #B8B3A6;
  --text-mute:   #7A7770;
  --rule:        #3A3A40;
  --rule-bright: #4F4F56;
  --amber:       #E5A24C;
  --amber-dim:   #B47C2F;
  --amber-brd:   rgba(229, 162, 76, 0.32);
  --red:         #D45A4E;
  --green:       #8FB976;

  --cyan:        var(--amber);
  --cyan-bg:     var(--bg-hi);
  --cyan-brd:    var(--amber-brd);
  --gray:        var(--text-mute);
  --gray-2:      var(--rule);
  --border:      var(--rule);
  --surface:     var(--bg-card);
  --surface-2:   var(--bg-card-2);
  --surface-3:   var(--bg-card);

  --ff-display:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --ff-body:     'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --ff-mono:     'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-xs:   0.68rem;
  --fs-sm:   0.76rem;
  --fs-md:   0.86rem;
  --fs-lg:   1.0rem;
  --fs-xl:   clamp(1.1rem, 1.9vw, 1.4rem);
  --fs-2xl:  clamp(1.35rem, 2.3vw, 1.85rem);
  --fs-3xl:  clamp(1.7rem, 3vw, 2.4rem);
  --fs-hero: clamp(2.6rem, 5.4vw, 4.2rem);

  --s-0: 0;
  --s-1: 0.4rem;
  --s-2: 0.8rem;
  --s-3: 1.2rem;
  --s-4: 1.6rem;
  --s-5: 2.4rem;
  --s-6: 3.2rem;
  --s-7: 4.8rem;

  --r-sm: 0; --r-md: 0; --r-lg: 0;

  --w-read: 1100px;
  --gutter: 16px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--ff-body);
  font-feature-settings: 'liga' 0, 'calt' 0;
  -webkit-font-smoothing: antialiased;
  font-size: var(--fs-md);
  line-height: 1.65;
  min-height: 100vh;
  overflow-x: hidden;
}
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 3px);
  pointer-events: none;
  z-index: 0;
}
a { color: var(--amber); text-decoration: underline; text-decoration-color: var(--amber-brd); text-underline-offset: 3px; overflow-wrap: anywhere; }
a:hover { text-decoration-color: var(--amber); }
strong { color: var(--text); font-weight: 700; }
code { font-family: var(--ff-mono); color: var(--amber); background: var(--bg-deep); padding: 0 0.3em; border: 1px solid var(--rule); font-size: 0.92em; }

/* Type helpers (from deck) */
.cyan  { color: var(--amber); }
.red   { color: var(--red); }
.gray  { color: var(--text-mute); }
.num   { color: var(--amber); font-weight: 700; }

.eyebrow {
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-mute);
  position: relative;
  padding-left: 18px;
}
.eyebrow::before { content: '$'; color: var(--amber); position: absolute; left: 0; font-weight: 700; }

.headline {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: var(--fs-3xl);
  letter-spacing: -0.005em;
  line-height: 1.25;
  color: var(--text);
  padding-left: var(--s-3);
  border-left: 2px solid var(--amber);
  overflow-wrap: anywhere;
}
.sub { font-size: var(--fs-md); color: var(--text-mid); line-height: 1.6; }

/* Card */
.card {
  padding: var(--s-3) var(--s-4);
  background: var(--bg-card);
  border: 1px solid var(--rule);
  position: relative;
  font-family: var(--ff-mono);
}
.card::before { content: ''; position: absolute; top: -1px; left: -1px; width: 10px; height: 10px; border-top: 1px solid var(--amber); border-left: 1px solid var(--amber); }
.card::after  { content: ''; position: absolute; bottom: -1px; right: -1px; width: 10px; height: 10px; border-bottom: 1px solid var(--amber); border-right: 1px solid var(--amber); }
.card--highlight { background: var(--bg-hi); border-color: var(--amber-brd); }
.card .label { font-size: var(--fs-xs); font-weight: 700; color: var(--amber); letter-spacing: 0.08em; text-transform: uppercase; }
.card .title { font-weight: 700; font-size: var(--fs-lg); color: var(--text); line-height: 1.3; margin-top: var(--s-1); }
.card .body  { font-size: var(--fs-sm); color: var(--text); line-height: 1.55; margin-top: var(--s-2); }
.card .body.dim { color: var(--text-mute); }
.card .stat  { font-weight: 700; font-size: var(--fs-2xl); color: var(--amber); line-height: 1.1; margin-top: var(--s-1); letter-spacing: -0.03em; overflow-wrap: anywhere; }
.card .caption { font-size: var(--fs-xs); color: var(--text-mute); line-height: 1.4; margin-top: var(--s-1); }

/* Grid */
.grid { display: grid; gap: var(--s-2); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Quote */
.quote {
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: 1.55;
  padding-left: var(--s-3);
  border-left: 2px solid var(--amber);
  position: relative;
}
.attribution { font-size: var(--fs-xs); color: var(--text-mute); letter-spacing: 0.04em; margin-top: var(--s-1); }
.attribution::before { content: '// '; color: var(--amber-dim); }

/* ASCII diagram */
.ascii-diagram {
  font-family: var(--ff-mono);
  font-size: 0.68rem;
  color: var(--amber);
  background: var(--bg-card);
  border: 1px solid var(--rule);
  padding: var(--s-3) var(--s-4);
  overflow-x: auto;
  white-space: pre;
  line-height: 1.4;
  display: block;
}

/* Flow */
.flow-diagram { display: flex; flex-direction: column; align-items: center; gap: 0; font-family: var(--ff-mono); }
.flow-row { display: flex; align-items: stretch; width: 100%; gap: 0; }
.flow-node { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; text-align: center; padding: var(--s-3); }
.flow-node .flow-desc { font-size: var(--fs-sm); color: var(--text); line-height: 1.55; margin-top: var(--s-2); }
.flow-link { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 120px; padding: 0 var(--s-2); position: relative; gap: var(--s-1); }
.flow-link-line { width: 100%; height: 1px; background: var(--amber-brd); position: relative; }
.flow-link-line::after { content: ''; position: absolute; top: 50%; right: 0; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 7px solid var(--amber); transform: translateY(-50%); }
.flow-link-label { font-size: var(--fs-xs); font-weight: 700; color: var(--amber); letter-spacing: 0.06em; text-transform: uppercase; text-align: center; line-height: 1.3; }
@media (max-width: 760px) {
  .flow-row { flex-direction: column; }
  .flow-link { min-width: 0; width: 100%; padding: var(--s-2) 0; }
  .flow-link-line { width: 1px; height: 28px; }
  .flow-link-line::after { top: auto; bottom: 0; right: 50%; transform: translateX(50%); border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid var(--amber); border-bottom: 0; }
}

/* [[ ]] placeholders */
.placeholder {
  color: var(--amber);
  background: var(--bg-hi);
  outline: 1px dashed var(--amber);
  outline-offset: 2px;
  padding: 0 0.3em;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
}

/* ════════════════════════════════════════════════════════════════════
   APPENDIX — reading-page styles
   ════════════════════════════════════════════════════════════════════ */
.wrap { position: relative; z-index: 2; width: 100%; max-width: calc(var(--w-read) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* top bar */
.topbar { position: sticky; top: 0; z-index: 10; background: var(--bg-deep); border-bottom: 1px solid var(--rule); }
.topbar .wrap { display: flex; align-items: center; gap: var(--s-2); min-height: 44px; flex-wrap: wrap; padding-top: 6px; padding-bottom: 6px; }
.brand { font-weight: 700; font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); text-decoration: none; }
.brand b { color: var(--amber); }
.topbar .spacer { flex: 1 1 auto; }
.toplink { font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-mute); text-decoration: none; }
.toplink:hover { color: var(--amber); }
.toc-menu { position: relative; }
.toc-menu summary { list-style: none; cursor: pointer; font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--amber); border: 1px solid var(--amber-brd); padding: 3px 10px; background: var(--bg-hi); }
.toc-menu summary::-webkit-details-marker { display: none; }
.toc-menu[open] summary { background: var(--amber); color: var(--bg-deep); }
.toc-panel { position: absolute; right: 0; top: calc(100% + 6px); width: min(420px, calc(100vw - 2 * var(--gutter))); background: var(--bg-card); border: 1px solid var(--rule-bright); padding: var(--s-1); max-height: 70vh; overflow-y: auto; }
.toc-panel a { display: grid; grid-template-columns: 2.6rem 1fr auto; gap: var(--s-1); align-items: baseline; padding: 6px 8px; text-decoration: none; color: var(--text); font-size: var(--fs-sm); border-bottom: 1px solid var(--rule); }
.toc-panel a:last-child { border-bottom: 0; }
.toc-panel a:hover, .toc-panel a.current { background: var(--bg-hi); }
.toc-panel .id { color: var(--amber); font-weight: 700; }

/* page head */
.page-head { padding: var(--s-5) 0 var(--s-3); display: flex; flex-direction: column; gap: var(--s-2); }
.lede { color: var(--text-mid); max-width: 80ch; font-size: var(--fs-md); }
.page-toc { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: var(--s-2) 0 0; font-size: var(--fs-xs); letter-spacing: 0.04em; }
.page-toc a { color: var(--text-mute); text-decoration: none; }
.page-toc a:hover { color: var(--amber); }
.page-toc a::before { content: '# '; color: var(--amber-dim); }

/* sections */
main { padding-bottom: var(--s-6); }
.sec { padding-top: var(--s-5); scroll-margin-top: 56px; display: flex; flex-direction: column; gap: var(--s-2); }
.sec > h2 { font-size: var(--fs-xl); font-weight: 700; color: var(--amber); line-height: 1.3; border-bottom: 1px solid var(--rule); padding-bottom: var(--s-1); overflow-wrap: anywhere; }
.sec > h2::before { content: '> '; color: var(--amber-dim); }
.sec h3 { font-size: var(--fs-lg); font-weight: 700; color: var(--text); margin-top: var(--s-2); }
.sec p, .sec li { max-width: 90ch; }
.sec p { color: var(--text); }
.sec ul, .sec ol { padding-left: 1.4rem; display: flex; flex-direction: column; gap: 6px; }
.sec li::marker { color: var(--amber); }
.note { font-size: var(--fs-sm); color: var(--text-mute); max-width: 90ch; }

/* tables */
.tbl { display: flex; flex-direction: column; gap: 6px; }
.tbl-cap { font-size: var(--fs-xs); color: var(--text-mute); letter-spacing: 0.04em; }
.tbl-wrap { overflow-x: auto; border: 1px solid var(--rule); background: var(--bg-card); max-width: 100%; -webkit-overflow-scrolling: touch; }
.tbl table { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); line-height: 1.5; }
.tbl th { background: var(--bg-card-2); color: var(--amber); font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; text-align: left; padding: var(--s-2); border-right: 1px solid var(--rule); vertical-align: bottom; }
.tbl td { padding: var(--s-2); border-top: 1px solid var(--rule); border-right: 1px solid var(--rule); vertical-align: top; }
.tbl th:last-child, .tbl td:last-child { border-right: 0; }
.tbl td:first-child { background: var(--bg-card-2); font-weight: 600; }
.tbl .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl .hi { background: var(--bg-hi); }
.tbl tr.total td { border-top: 1px solid var(--amber-brd); font-weight: 700; color: var(--text); }
.tbl-scroll-hint { display: none; font-size: var(--fs-xs); color: var(--text-mute); }

/* provenance chips */
.chip { display: inline-block; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0 6px; border: 1px solid currentColor; line-height: 1.6; vertical-align: 1px; white-space: nowrap; font-style: normal; }
.chip--cited   { color: var(--green); }
.chip--derived { color: var(--amber); }
.chip--assumed { color: var(--red); }
.chip--3p      { color: var(--text-mid); }
.chip--pending { color: var(--amber); background: var(--bg-hi); }
.chip--ready   { color: var(--green); }
.chip--refused { color: var(--red); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--fs-xs); color: var(--text-mute); align-items: center; }

/* callouts */
.callout { border: 1px solid var(--rule); border-left: 3px solid var(--amber); background: var(--bg-card); padding: var(--s-2) var(--s-3); display: flex; flex-direction: column; gap: 6px; }
.callout .t { font-weight: 700; color: var(--amber); font-size: var(--fs-sm); letter-spacing: 0.04em; text-transform: uppercase; }
.callout p { color: var(--text); }
.callout--warn { border-left-color: var(--red); }
.callout--warn .t { color: var(--red); }
.callout--pending { border-style: dashed; border-color: var(--amber); background: var(--bg-hi); }

/* source list */
.sources { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0; border: 1px solid var(--rule); background: var(--bg-card); }
.sources li { padding: 8px var(--s-2); border-top: 1px solid var(--rule); display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--s-2); align-items: baseline; max-width: none; font-size: var(--fs-sm); }
.sources li:first-child { border-top: 0; }
.sources .src-note { display: block; color: var(--text-mute); font-size: var(--fs-xs); }

/* TOC cards on cover */
.toc-list { display: flex; flex-direction: column; gap: var(--s-1); }
.toc-row { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; padding: var(--s-2) var(--s-3); background: var(--bg-card); border: 1px solid var(--rule); border-left: 2px solid var(--amber); text-decoration: none; color: var(--text); }
.toc-row:hover { background: var(--bg-hi); border-color: var(--amber-brd); border-left-color: var(--amber); }
.toc-row .id { color: var(--amber); font-weight: 700; }
.toc-row .ttl { font-weight: 700; }
.toc-row .desc { display: block; color: var(--text-mute); font-size: var(--fs-sm); font-weight: 400; }
.toc-row.is-pending { border-left-color: var(--rule-bright); }

/* prev / next */
.pager { border-top: 1px solid var(--rule); background: var(--bg-deep); position: relative; z-index: 2; }
.pager .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); padding-top: var(--s-3); padding-bottom: var(--s-3); }
.pager a { display: flex; flex-direction: column; gap: 2px; padding: var(--s-2) var(--s-3); border: 1px solid var(--rule); background: var(--bg-card); text-decoration: none; color: var(--text); min-width: 0; }
.pager a:hover { border-color: var(--amber-brd); background: var(--bg-hi); }
.pager .dir { font-size: var(--fs-xs); color: var(--amber); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; }
.pager .nm { font-size: var(--fs-sm); overflow-wrap: anywhere; }
.pager .next { text-align: right; grid-column: 2; }
.pager .prev { grid-column: 1; }
.foot { font-size: var(--fs-xs); color: var(--text-mute); padding: var(--s-2) 0 var(--s-4); }

/* Phone */
@media (max-width: 760px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .headline { font-size: 1.5rem; }
  .sources li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .toc-row { grid-template-columns: 2.4rem minmax(0, 1fr); }
  .toc-row .chip { grid-column: 2; justify-self: start; }
  .tbl-scroll-hint { display: block; }
  .card { padding: var(--s-2) var(--s-3); }
  .page-head { padding-top: var(--s-4); }
}