/* ────────────────────────────────────────────────────────────────────────────
   LoC-Intelligence — the document mode
   ───────────────────────────────────────────────────────────────────────────
   The site has two modes. The place — field, morph, discovery — and this: a
   text that is meant to be read from start to finish.

   They share the typeface, the palette and the restraint. They deliberately do
   not share behaviour. There is no WebGL here, nothing moves, nothing has to be
   found: a reading document needs quiet ground, and the disc, the graph and the
   shore belong to the place.

   Loaded after styles.css, which supplies the font face and the ink tokens.
   Every rule here is scoped to .doc or a doc- prefix, so nothing reaches back.
   ──────────────────────────────────────────────────────────────────────────── */

:root{
  /* each protocol inherits the accent of the strand it documents */
  --doc-accent: #DD7A3A;
  --doc-cool:   #63AE92;
  --doc-bg:     #05100E;
  --doc-rule:   rgba(240,243,247,.13);
  --doc-rule-soft: rgba(240,243,247,.075);
  --doc-gut:    clamp(20px, 5vw, 64px);
}

/* Each protocol takes the light of the strand it documents. Substrat is the
   default above; State swaps in the core's copper against silver-blue, on the
   near-black its own sky is mixed from. */
:root.doc-state{
  --doc-accent: #E4813E;
  --doc-cool:   #9DB6D8;
  --doc-bg:     #04070E;
}

/* the imprint belongs to the roof, not to a strand: the site's own light */
:root.doc-loci{
  --doc-accent: #F6AE5E;
  --doc-cool:   #9FB6D2;
  --doc-bg:     #070C18;
}
:root.doc-loci .doc-ground{
  background:
    radial-gradient(70% 44% at 50% -6%, rgba(246,174,94,.10) 0%, rgba(246,174,94,0) 62%),
    radial-gradient(66% 42% at 50% 104%, rgba(159,182,210,.05) 0%, rgba(159,182,210,0) 70%),
    var(--doc-bg);
}
:root.doc-loci .doc-ground::after{ border-color:rgba(246,174,94,.08); }

html.doc-mode{ background:var(--doc-bg); }

body.doc-body{
  background:var(--doc-bg);
  min-height:100svh;
  overflow-x:hidden;
}

/* The ground. Not the field — a still echo of it: the warmth the arena throws,
   and one arc of the wall it grows against, mostly off the frame. */
.doc-ground{
  position:fixed; inset:0; z-index:0;
  pointer-events:none;
  background:
    radial-gradient(78% 46% at 50% -8%, rgba(221,122,58,.13) 0%, rgba(221,122,58,0) 62%),
    radial-gradient(60% 40% at 84% 104%, rgba(99,174,146,.07) 0%, rgba(99,174,146,0) 70%),
    var(--doc-bg);
}
.doc-ground::after{
  content:'';
  position:absolute;
  left:50%; top:-88vmax;
  width:150vmax; height:150vmax;
  margin-left:-75vmax;
  border-radius:50%;
  border:1px solid rgba(221,122,58,.10);
}

/* the same construction, moved and recoloured: the core's glow sits where the
   core sits on the site, and the arc echoes the geodesic instead of the wall */
:root.doc-state .doc-ground{
  background:
    radial-gradient(64% 44% at 72% -4%, rgba(228,129,62,.14) 0%, rgba(228,129,62,0) 64%),
    radial-gradient(70% 46% at 20% 102%, rgba(157,182,216,.06) 0%, rgba(157,182,216,0) 70%),
    var(--doc-bg);
}
:root.doc-state .doc-ground::after{
  left:72%; top:-96vmax;
  width:130vmax; height:130vmax;
  margin-left:-65vmax;
  border-color:rgba(157,182,216,.09);
}

:root.doc-state .doc code{
  color:var(--doc-cool);
  background:rgba(157,182,216,.09);
}
:root.doc-state .doc-note{ border-left-color:var(--doc-cool);
  background:rgba(157,182,216,.045); }
:root.doc-state .doc-note h3{ color:var(--doc-cool); }

/* ── the bar ───────────────────────────────────────────────────────────── */
.doc-bar{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; justify-content:space-between;
  gap:20px;
  padding:14px var(--doc-gut);
  font-size:12.5px;
  background:linear-gradient(180deg,var(--doc-bg) 0%,var(--doc-bg) 62%,rgba(5,16,14,0) 100%);
}
.doc-bar a{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--ink-faint); text-decoration:none;
  transition:color .35s var(--ease);
}
.doc-bar a:hover{ color:var(--ink); }
.doc-bar a::before{ content:'←'; color:var(--doc-accent); }
.doc-where{ color:var(--ink-faint); letter-spacing:.05em; }

/* The right of the bar: where you are, and the same page in the other
   language. The switch is a link out, not a way back, so it drops the arrow
   every other link in this bar carries. */
.doc-nav{ display:inline-flex; align-items:baseline; gap:16px; }
.doc-bar a.lang{ border-bottom:1px solid var(--doc-rule-soft); }
.doc-bar a.lang::before{ content:none; }
.doc-bar a.lang:hover{ border-bottom-color:var(--doc-rule); }

/* ── the column ────────────────────────────────────────────────────────── */
.doc{
  position:relative; z-index:1;
  max-width:70ch;
  margin:0 auto;
  padding:clamp(28px,6vw,72px) var(--doc-gut) 120px;
  hyphens:auto;
  -webkit-hyphens:auto;
}

.doc-eyebrow{
  font-size:11.5px; font-weight:400;
  letter-spacing:.17em; text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:22px;
}
.doc-eyebrow b{ color:var(--doc-accent); font-weight:400; }

.doc h1{
  font-size:clamp(32px,3.4vw + 14px,58px);
  line-height:1.10;
  font-weight:250;
  letter-spacing:-.028em;
  text-wrap:balance;
  hyphens:none;
  margin-bottom:22px;
}

.doc-lead{
  font-size:clamp(17px,.7vw + 14px,20px);
  line-height:1.52;
  color:var(--ink);
  text-wrap:pretty;
  margin-bottom:30px;
}

.doc h2{
  font-size:clamp(21px,1vw + 16px,27px);
  font-weight:300;
  letter-spacing:-.018em;
  line-height:1.24;
  hyphens:none;
  margin:64px 0 6px;
  padding-top:26px;
  border-top:1px solid var(--doc-rule);
}
.doc h2 .n{
  display:block;
  font-size:11.5px; letter-spacing:.17em; text-transform:uppercase;
  color:var(--doc-accent);
  margin-bottom:12px;
}

.doc h3{
  font-size:16.5px;
  font-weight:400;
  letter-spacing:-.005em;
  color:var(--ink);
  margin:34px 0 4px;
}

.doc p{
  color:var(--ink-soft);
  line-height:1.66;
  margin:14px 0;
  text-wrap:pretty;
}
.doc p em{ font-style:normal; color:var(--ink); }
.doc strong{ font-weight:500; color:var(--ink); }

/* an instruction, a value, a name out of the machine */
.doc code{
  font-family:ui-monospace,SFMono-Regular,'Cascadia Mono',Consolas,monospace;
  font-size:.88em;
  color:var(--doc-cool);
  background:rgba(99,174,146,.08);
  padding:1px 5px;
  border-radius:3px;
  hyphens:none;
}

/* ── the sentence a section turns on ───────────────────────────────────── */
.doc-pull{
  margin:26px 0;
  padding:2px 0 2px 20px;
  border-left:2px solid var(--doc-accent);
  font-size:clamp(17px,.6vw + 15px,20px);
  line-height:1.44;
  color:var(--ink);
  hyphens:none;
}

/* ── numbers ───────────────────────────────────────────────────────────── */
.doc-stats{
  display:flex; flex-wrap:wrap; gap:8px 34px;
  margin:26px 0 8px;
  padding:20px 0;
  border-top:1px solid var(--doc-rule);
  border-bottom:1px solid var(--doc-rule);
}
.doc-stat{ display:flex; flex-direction:column; gap:2px; }
.doc-stat b{
  font-size:clamp(21px,1.1vw + 16px,28px);
  font-weight:300;
  letter-spacing:-.02em;
  color:var(--doc-accent);
}
.doc-stat span{
  font-size:12px; line-height:1.35;
  color:var(--ink-faint);
  max-width:20ch;
}

/* ── the ladder of conditions ──────────────────────────────────────────── */
.rungs{ list-style:none; margin:26px 0 8px; padding:0; }
.rungs li{
  display:grid;
  grid-template-columns:2.4em 1fr;
  gap:0 16px;
  padding:18px 0;
  border-top:1px solid var(--doc-rule-soft);
}
.rungs li:last-child{ border-bottom:1px solid var(--doc-rule-soft); }
.rungs .r-n{
  font-size:13px;
  color:var(--doc-accent);
  padding-top:.25em;
  font-variant-numeric:tabular-nums;
}
.rungs .r-t{ color:var(--ink); font-size:15.5px; line-height:1.5; }
.rungs .r-w{
  grid-column:2;
  color:var(--ink-soft); font-size:14.5px; line-height:1.6;
  margin-top:5px;
}
.rungs .r-src{
  grid-column:2;
  margin-top:8px;
  font-size:12px; letter-spacing:.03em;
  color:var(--ink-faint);
  hyphens:none;
}

/* ── the execution trace ───────────────────────────────────────────────── */
.trace{
  margin:24px 0;
  padding:18px 20px;
  border:1px solid var(--doc-rule);
  border-radius:3px;
  background:rgba(0,0,0,.28);
  font-family:ui-monospace,SFMono-Regular,'Cascadia Mono',Consolas,monospace;
  font-size:12.5px;
  line-height:1.85;
  color:var(--ink-soft);
  /* a listing, so the line breaks in the markup are the line breaks on screen */
  white-space:pre;
  overflow-x:auto;
  hyphens:none;
}
.trace b{ color:var(--doc-accent); font-weight:400; }
.trace i{ color:var(--ink-faint); font-style:normal; }

/* ── tables ────────────────────────────────────────────────────────────── */
.doc-table-wrap{ overflow-x:auto; margin:24px 0; }
.doc table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
  hyphens:none;
}
.doc th{
  text-align:left;
  font-weight:400;
  font-size:11.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-faint);
  padding:0 16px 10px 0;
  border-bottom:1px solid var(--doc-rule);
  white-space:nowrap;
}
.doc td{
  padding:11px 16px 11px 0;
  border-bottom:1px solid var(--doc-rule-soft);
  color:var(--ink-soft);
  vertical-align:top;
}
.doc td:first-child{ color:var(--ink); }
.doc .num{ font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ── a block that admits something ─────────────────────────────────────── */
.doc-note{
  margin:26px 0;
  padding:18px 22px;
  border:1px solid var(--doc-rule);
  border-left:2px solid var(--doc-cool);
  border-radius:3px;
  background:rgba(99,174,146,.04);
}
.doc-note h3{
  margin:0 0 8px;
  color:var(--doc-cool);
  font-size:13.5px;
  letter-spacing:0;
  font-weight:400;
}
.doc-note p{ margin:8px 0 0; font-size:14.5px; }
.doc-note p:first-of-type{ margin-top:0; }

/* the honest limits, set as a plain grid rather than dressed up */
.doc-limits{ display:grid; gap:0; margin:26px 0; }
.doc-limits > div{
  display:grid; grid-template-columns:11em 1fr; gap:0 20px;
  padding:14px 0;
  border-top:1px solid var(--doc-rule-soft);
}
.doc-limits > div:last-child{ border-bottom:1px solid var(--doc-rule-soft); }
.doc-limits dt{ color:var(--ink); font-size:14.5px; }
.doc-limits dd{ margin:0; color:var(--ink-soft); font-size:14.5px; line-height:1.6; }

/* ── a plain block of facts, for the imprint ───────────────────────────── */
.doc-facts{
  margin:22px 0;
  padding:20px 22px;
  border:1px solid var(--doc-rule);
  border-radius:3px;
  line-height:1.72;
  hyphens:none;
}
.doc-facts a{ color:var(--doc-accent); text-decoration:none;
  border-bottom:1px solid transparent; transition:border-color .3s var(--ease); }
.doc-facts a:hover{ border-bottom-color:var(--doc-accent); }
.doc-facts .who{ color:var(--ink); }

/* ── no place: the 404 ─────────────────────────────────────────────────── */
/* One page for both languages, because a host serves one 404. The English
   lead is set a step quieter so the page still reads as one voice. */
.doc-404 .doc-lead[lang="en"]{
  color:var(--ink-soft);
  font-size:clamp(15.5px,.5vw + 13px,17.5px);
  margin-top:-4px;
}
.doc-ways{ list-style:none; margin:34px 0 0; padding:0; }
.doc-ways li{
  display:flex; align-items:baseline; gap:16px;
  padding:13px 0;
  border-top:1px solid var(--doc-rule-soft);
  font-size:15px;
}
.doc-ways li:last-child{ border-bottom:1px solid var(--doc-rule-soft); }
.doc-ways a{
  color:var(--ink); text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease);
}
.doc-ways a:hover{ border-bottom-color:var(--doc-accent); }
.doc-ways li > span{ color:var(--ink-faint); font-size:13px; }

/* ── the way back ──────────────────────────────────────────────────────── */
.doc-end{
  margin-top:72px;
  padding-top:26px;
  border-top:1px solid var(--doc-rule);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:14px 24px;
  font-size:13px;
  color:var(--ink-faint);
}
.doc-end a{
  color:var(--ink-faint); text-decoration:none;
  border-bottom:1px solid var(--doc-rule-soft);
  transition:color .35s var(--ease), border-color .35s var(--ease);
}
.doc-end a:hover{ color:var(--ink); border-bottom-color:var(--doc-rule); }

/* ── narrow ────────────────────────────────────────────────────────────── */
@media (max-width:640px){
  .doc-stats{ gap:16px 26px; }
  .rungs li{ grid-template-columns:1.9em 1fr; gap:0 12px; }
  .doc-limits > div{ grid-template-columns:1fr; gap:4px; }
  .doc-limits dt{ color:var(--doc-accent); font-size:13px; }
  .doc h2{ margin-top:52px; }
}

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

/* ── paper ─────────────────────────────────────────────────────────────────
   A protocol is a text meant to be read from start to finish, and some of
   that reading happens on paper. So: white ground, dark ink, the strand's
   copper darkened until it holds on white, and nothing that belongs to the
   screen — no ground, no bar, no arc. Rungs, notes, pull quotes and table
   rows do not break across pages. */
@media print{
  @page{ margin:22mm 20mm 24mm; }

  :root, :root.doc-state, :root.doc-loci{
    --ink:        #14171c;
    --ink-soft:   #2c3138;
    --ink-faint:  #5b616a;
    --doc-accent: #8F4718;
    --doc-cool:   #2F6B57;
    --doc-bg:     #ffffff;
    --doc-rule:      rgba(0,0,0,.30);
    --doc-rule-soft: rgba(0,0,0,.14);
  }
  html.doc-mode, body.doc-body{ background:#fff; }
  .doc-ground, .doc-bar{ display:none; }

  .doc{
    max-width:none; margin:0; padding:0;
    font-size:10.5pt; line-height:1.55;
    /* 300 is set for light on dark; on paper it thins out */
    font-weight:400;
  }
  .doc h1{ font-size:24pt; letter-spacing:-.02em; }
  .doc-lead{ font-size:12.5pt; }
  .doc h2{ margin-top:34pt; padding-top:14pt; break-after:avoid; }
  .doc h3{ break-after:avoid; }
  .doc p{ orphans:3; widows:3; }

  .doc-stats, .doc-pull, .doc-note, .trace, .rungs li,
  .doc-limits > div, .doc table tr, .doc-facts, .doc-end{ break-inside:avoid; }
  .doc-stat b{ color:var(--doc-accent); }

  .trace{
    background:#f4f4f2; color:#222; border-color:#ccc;
    white-space:pre-wrap;
    font-size:9pt;
  }
  .doc code{ background:#f1f1ef; color:#333; }
  :root.doc-state .doc code{ background:#eef1f4; color:#2b3a4a; }
  .doc-note, :root.doc-state .doc-note{ background:none; border-color:#ccc; border-left-color:var(--doc-cool); }
  .doc-table-wrap{ overflow:visible; }

  /* links are text on paper; the way back is a sentence, not a button */
  .doc a{ color:inherit; text-decoration:none; border-bottom:0 !important; }
  .doc-end a.lang, .doc-bar a{ display:none; }
}