/* LucentFire — the Black register. Monochrome, not murk: color drained, full
   contrast kept (WCAG AA minimum on every text/background pair). Emphasis is
   carried by weight and space, never by hue. Wordmark: "Fire" carries equal-or-
   greater weight (counsel guardrail). No telecom/globe/network imagery ever. */

/* READABILITY CORRECTION (2026-08-08): the original register optimized for MAXIMUM
   contrast on a near-black ground — and past ~10:1 on an emissive screen that inverts:
   light text on near-black HALATES (bleeds and shimmers, badly so with astigmatism).
   The ground is lifted off pure black and warmed; body ink eased to ~11:1; line-height
   and measure loosened. Same monochrome discipline, same ember law — tuned to how eyes
   actually work. A LIGHT register ships alongside: the viewer chooses, we do not choose
   for them (a daylight office is exactly where a black site loses its reader). */
:root {
  /* THE MONOTONE FIX, HALF TWO — RANGE.
     Ground #16161a, panel #1c1c21, panel-2 #212127 sat inside a six-point band:
     every surface read as the same surface, which is what "mono-tone vibes"
     was diagnosing. The ground drops and the panels lift, so there is now real
     separation to see — and, more to the point, something for a paper sheet to
     sit ON. Still lifted off pure black and still faintly warm, because the
     halation correction of 2026-08-08 was right and is not being undone. */
  --bg: #101014;         /* was #16161a — dropped for range, still not black */
  --panel: #1b1b21;
  --panel-2: #24242b;    /* was #212127 — lifted, so panels separate from panels */
  --line: #3a3a43;
  --line-soft: #2a2a31;
  --ink-bright: #eceae3; /* reserved: wordmark Fire, stamp banner — emphasis, not body */
  --ink-heading: #c4c1b9;
  --ink: #cbc8c0;        /* primary text — ~11:1: the comfort band on dark, not the maximum */
  --ink-dim: #9e9b94;
  --ink-faint: #86837c;  /* tertiary — AA floor; goes no dimmer */
  --ember: #d08c3c;      /* LucentFire's ONE flame (Chance's call, 7/26), lifted to match the
                            new ground. Legal uses: the question anchor's glow, the seal
                            moment, the considering pulse. NEVER the wordmark (counsel: logo
                            stays monochrome), never body UI. */
  --ember-rgb: 208, 140, 60;  /* --ember as channels, for glows. Keep in step with --ember. */
  --door: #272320;
  --sans: system-ui, "Segoe UI", -apple-system, sans-serif;
  --mono: ui-monospace, "Cascadia Code", Consolas, "SF Mono", monospace;
  --max: 74rem;
  --measure: 44rem;      /* prose measure — the eye loses its place past ~75 characters */
}

/* The light register — same bones, daylight ground. Warm paper, never clinical white. */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f7f5f0; --panel: #efece5; --panel-2: #e8e4dc;
    --line: #d6d1c6; --line-soft: #e3dfd6;
    /* Same darkened secondaries as the explicit light theme below — see the note
       there. THIS is the block most visitors actually get, because it follows the
       OS setting and needs no toggle, so a fix applied only to the other one
       would have missed nearly everybody while looking done. */
    --ink-bright: #14141a; --ink-heading: #232329; --ink: #2b2b32;
    --ink-dim: #4a4842; --ink-faint: #635f58;
    --ember: #a9621a; --ember-rgb: 169, 98, 26; --door: #e6e1d6;
  }
}
:root[data-theme="light"] {
  --bg: #f7f5f0; --panel: #efece5; --panel-2: #e8e4dc;
  --line: #d6d1c6; --line-soft: #e3dfd6;
  /* SECONDARY INK, DARKENED — measured, not adjusted by feel.
     Chance: "it looks better in dark mode than not… the sections below the paper
     could use a touch darker font." He was reading the .dim and .faint text the
     record page leans on, and the numbers back him:
       --ink-dim    light 6.04:1  vs dark 6.84:1
       --ink-faint  light 3.72:1  vs dark 5.02:1  <-- BELOW the 4.5:1 AA floor
     The comment beside --ink-faint claimed "AA floor; goes no dimmer". True in
     the dark register, false in this one, and never checked. Now 8.39 and 5.83.
     Body ink was never the problem — it was already at parity — so it moves only
     slightly. */
  --ink-bright: #14141a; --ink-heading: #232329; --ink: #2b2b32;
  --ink-dim: #4a4842; --ink-faint: #635f58;
  --ember: #a9621a; --ember-rgb: 169, 98, 26; --door: #e6e1d6;
}
:root[data-theme="dark"] {
  --bg: #101014; --panel: #1b1b21; --panel-2: #24242b;
  --line: #3a3a43; --line-soft: #2a2a31;
  --ink-bright: #eceae3; --ink-heading: #c4c1b9; --ink: #cbc8c0;
  --ink-dim: #9e9b94; --ink-faint: #86837c;
  --ember: #d08c3c; --ember-rgb: 208, 140, 60; --door: #272320;
}

/* ═══ THE SHEET ═══════════════════════════════════════════════════════════════
   Chance, on why Zenodo feels right to a researcher: the document sits in a
   frame "like a paper on your table that you could grab… papers are the fruit
   of so much of the academic work, it's the prize signal."
   He is right, and the useful part is that the tangibility is a CSS property
   rather than a file format. What reads as an object on a desk is a BOUNDED
   WARM SHEET WITH A SHADOW ON A DARKER GROUND, at page proportions, set in a
   serif. No PDF is involved in the feeling at all.
   Paper stock, never white: #fff on a dark ground is a screen shouting. Warm
   off-white is paper under a lamp, and it keeps the halation discipline the
   ground was tuned for. */
:root {
  --paper: #f3f0e8;
  --paper-2: #eae6dc;        /* a second stock, for insets on the sheet */
  /* Ink darkened after Chance read it on a real screen: #24221d was correct by
     contrast maths and still sat light against warm stock. Print ink on paper is
     nearer black than any screen convention suggests. */
  --paper-ink: #15130f;
  --paper-ink-dim: #46423b;
  --paper-line: #d8d3c6;
  /* Laid lines pulled back hard. My own rule: any texture you consciously notice
     on a reading surface is already too much — and Chance noticed them, which
     settles it. They stay because the stock should not be featureless, at about
     a third of the previous strength. */
  --paper-rule: #efece3;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
}
/* On a light ground the sheet must still read as a separate object, so it lifts
   slightly ABOVE the page instead of sitting darker than it. */
@media (prefers-color-scheme: light) {
  :root { --paper: #fffdf8; --paper-2: #f5f2ea; --paper-line: #e0dbcf; --paper-rule: #efebe0; }
}
:root[data-theme="light"] {
  --paper: #fffdf8; --paper-2: #f5f2ea; --paper-line: #e0dbcf; --paper-rule: #efebe0;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.62;
  /* THE MONOTONE FIX, HALF ONE — texture.
     Chance: "the site is sort of suffering from a small case of mono-tone
     vibes… it needs a pin stripe or something." The measured version of that
     complaint: ground #16161a, panel #1c1c21, panel-2 #212127 all live inside a
     SIX-POINT BAND, so every surface reads as the same surface and the eye has
     nowhere to land. Texture is the cheaper half of the answer — a desk under
     the paper rather than a void. Kept near the threshold of visibility: any
     texture you consciously notice on a reading surface is already too much. */
  background-image:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.014) 0 1px, transparent 1px 7px);
  background-attachment: fixed;
}
/* Prose measure: paragraphs and list text cap at a readable line length; tables,
   the spine and card grids keep the wide layout. */
p, li { max-width: var(--measure); }
td p, th p, .nums p, .call p { max-width: none; }

/* The theme switch — chrome, never ember. */
.theme-toggle {
  margin-left: 1rem; background: none; border: 1px solid var(--line);
  color: var(--ink-dim); font: inherit; font-size: 0.78rem; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 0.25rem 0.6rem; border-radius: 2px; cursor: pointer;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ink-faint); }
.theme-toggle:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ink-faint); }
a:hover { text-decoration-color: var(--ink); }

/* ---- wordmark: Fire's weight is the law ---- */
/* NO flex gap here: a gap applies between EVERY child, which wedged a space between
   "Lucent" and "Fire" and rendered the brand as two words. The mark carries its own
   margin instead; the wordmark closes up as one word, as it always should have. */
.wm { font-family: var(--sans); letter-spacing: 0.01em; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; }
.wm-mark { height: 1.15em; width: auto; display: block; margin-right: 0.45rem; }
/* The mark ships as a near-white monochrome SVG (an <img>, so it cannot inherit
   currentColor). On the daylight ground it would be invisible — inverted to near-black
   there, monochrome either way. The ember never touches the mark. */
@media (prefers-color-scheme: light) { .wm-mark { filter: invert(1); } }
:root[data-theme="light"] .wm-mark { filter: invert(1); }
:root[data-theme="dark"] .wm-mark { filter: none; }
.wm .lucent { font-weight: 300; color: var(--ink-dim); }
.wm .fire { font-weight: 800; color: var(--ink-bright); }

/* ---- chrome ---- */
.top {
  display: flex; align-items: baseline; gap: 1rem;
  padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--line-soft);
  max-width: var(--max); margin: 0 auto;
}
.top .wm { font-size: 1.25rem; }
.top nav { margin-left: auto; display: flex; gap: 1.25rem; font-size: 0.9rem; }
.top nav a { color: var(--ink-dim); text-decoration: none; }
.top nav a:hover { color: var(--ink); }

main { max-width: var(--max); margin: 0 auto; padding: 1.5rem; }
footer {
  max-width: var(--max); margin: 3rem auto 0; padding: 1.5rem;
  border-top: 1px solid var(--line-soft); color: var(--ink-faint); font-size: 0.85rem;
}

h1, h2, h3 { line-height: 1.2; font-weight: 650; color: var(--ink-heading); }
h1 { font-size: 2rem; letter-spacing: -0.01em; }
h2 { font-size: 1.3rem; margin-top: 2.5rem; }
h3 { font-size: 1.05rem; }

.dim { color: var(--ink-dim); }
.faint { color: var(--ink-faint); }
.mono { font-family: var(--mono); font-size: 0.85em; }
.smallcaps {
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600;
}

/* ---- badges ---- */
.badge {
  display: inline-block; padding: 0.15rem 0.55rem; border: 1px solid var(--line);
  border-radius: 2px; font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-dim); font-weight: 600; vertical-align: middle;
}
.badge.demo { border-color: var(--ink-faint); color: var(--ink); background: var(--panel-2); }
.badge.human { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ---- panels & cards ---- */
.panel { background: var(--panel); border: 1px solid var(--line-soft); border-radius: 4px; padding: 1.25rem 1.4rem; }
.panel + .panel { margin-top: 1rem; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; align-items: stretch; }
/* The stacked-panel margin must NOT leak into the grid — it offset cards 2 and 3
   by a rem and made the first look taller. Gap already does the spacing here. */
.grid3 > .panel + .panel { margin-top: 0; }

.card { display: block; background: var(--panel); border: 1px solid var(--line-soft); border-radius: 4px; padding: 1.1rem 1.25rem; text-decoration: none; }
.card:hover { border-color: var(--line); background: var(--panel-2); }
.card .stamp { font-size: 0.8rem; color: var(--ink-dim); margin-top: 0.5rem; }

/* ---- seat chips ---- */
.seats { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: 0.6rem; margin: 0.75rem 0; }
.chip {
  border: 1px solid var(--line); border-radius: 3px; padding: 0.6rem 0.75rem;
  background: var(--panel-2); font-size: 0.82rem;
}
.chip .fam { font-weight: 700; font-size: 0.95rem; }
.chip .meta { color: var(--ink-faint); font-size: 0.74rem; margin-top: 0.15rem; }
.chip .state { margin-top: 0.35rem; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); }
/* The pause is gravitas: a considering seat stays lit and breathes — never a spinner.
   Presence, not latency; true to minds that think before they speak. */
.chip.thinking { animation: consider 3s ease-in-out infinite; }
@keyframes consider {
  0%, 100% { border-color: var(--line); box-shadow: none; }
  50% {
    border-color: rgba(var(--ember-rgb), 0.9);
    box-shadow: 0 0 0.85rem -0.1rem rgba(var(--ember-rgb), 0.4), inset 0 0 0.6rem -0.35rem rgba(var(--ember-rgb), 0.5);
  }
}
/* Pre-round work — the scout searching before any seat speaks. It breathes on
   the same rhythm as a considering seat, because it is the same kind of thing:
   presence, not a progress bar we would have to invent. The ELAPSED COUNT does
   the job a spinner only pretends to — a real measured number that changes
   every second, so "is this working" has an answer instead of a vibe. */
.activity { animation: consider 3s ease-in-out infinite; }
/* The dot reads as an indicator LIGHT — lit, with a halo — not a grey pip that
   merely changes opacity. Same flame, same legal use as the anchor's glow. */
.activity .ember-dot {
  width: 0.5rem; height: 0.5rem; border-radius: 50%; flex: none;
  background: var(--ember);
  animation: pulse-dot 1.6s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; box-shadow: 0 0 0.5rem 0.05rem rgba(var(--ember-rgb), 0.75); }
  50% { opacity: 0.6; box-shadow: 0 0 0.2rem 0 rgba(var(--ember-rgb), 0.25); }
}
@media (prefers-reduced-motion: reduce) {
  .activity, .activity .ember-dot { animation: none; }
}
.chip.landed { border-color: var(--ink-faint); }
.chip.landed .state { color: var(--ink); }
.chip.failed { border-style: dashed; }
.chip.failed .state { color: var(--ink); font-weight: 700; }
.residency-unknown { border-bottom: 1px dashed var(--ink-faint); cursor: help; }

/* ---- rounds ---- */
.round { border: 1px solid var(--line-soft); border-radius: 4px; margin-top: 1.25rem; background: var(--panel); }
.round header { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.8rem 1.25rem; border-bottom: 1px solid var(--line-soft); }
.round .turns { padding: 0.5rem 1.25rem 1rem; }
.turn { padding: 0.8rem 0; border-bottom: 1px solid var(--line-soft); }
.turn:last-child { border-bottom: none; }
.turn .who { font-weight: 700; font-size: 0.9rem; }
.turn .who .sub { font-weight: 400; color: var(--ink-faint); font-size: 0.78rem; margin-left: 0.4rem; }
.turn p { margin: 0.35rem 0 0; color: var(--ink-dim); }
.turn.human { border-left: 3px solid var(--ink); padding-left: 1rem; background: var(--panel-2); }
.turn.human p { color: var(--ink); }
.turn.failure p { color: var(--ink-faint); font-style: italic; }

/* ---- honest progress: bounded by the slowest seat, never a fake spinner ---- */
.progress { height: 3px; background: var(--line-soft); border-radius: 2px; overflow: hidden; margin: 0.5rem 0; }
.progress > div { height: 100%; background: var(--ink-dim); width: 0%; transition: width 0.9s linear; }
.progress-note { font-size: 0.75rem; color: var(--ink-faint); }

/* ---- steer window ---- */
.steer { margin-top: 1.25rem; border: 1px solid var(--line); border-radius: 4px; padding: 1.1rem 1.25rem; background: var(--panel-2); }
.steer textarea {
  width: 100%; min-height: 4.5rem; background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 3px; padding: 0.6rem 0.75rem;
  font-family: var(--sans); font-size: 0.95rem; resize: vertical;
}
.steer .row { display: flex; gap: 0.75rem; margin-top: 0.75rem; flex-wrap: wrap; }

button, .btn {
  font-family: var(--sans); font-size: 0.9rem; font-weight: 600; cursor: pointer;
  background: var(--ink); color: var(--bg); border: 1px solid var(--ink);
  border-radius: 3px; padding: 0.55rem 1.1rem; text-decoration: none; display: inline-block;
}
button.ghost, .btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
button.ghost:hover, .btn.ghost:hover { border-color: var(--ink-dim); }
button:disabled { opacity: 0.45; cursor: default; }

/* ---- forms ---- */
label.check { display: flex; gap: 0.5rem; align-items: baseline; padding: 0.3rem 0; font-size: 0.9rem; color: var(--ink-dim); }
input[type="text"], textarea, select {
  background: var(--bg); color: var(--ink); border: 1px solid var(--line);
  border-radius: 3px; padding: 0.55rem 0.7rem; font-family: var(--sans); font-size: 0.95rem;
}
textarea { width: 100%; }

/* ---- receipts ---- */
.stamp-banner {
  border: 1px solid var(--ink-faint); border-radius: 4px; padding: 1rem 1.25rem;
  font-size: 1.05rem; font-weight: 650; background: var(--panel-2); margin-top: 1rem;
  color: var(--ink-bright); /* the one line that earns full brightness */
}
table.receipts { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-top: 0.5rem; }
table.receipts th { text-align: left; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--line); }
table.receipts td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--line-soft); color: var(--ink-dim); }
table.receipts td:first-child { color: var(--ink); font-weight: 600; }
.tablewrap { overflow-x: auto; }

.keeper { border-left: 2px solid var(--line); padding: 0.4rem 0 0.4rem 0.9rem; margin: 0.6rem 0; color: var(--ink-dim); }
.keeper .src { font-size: 0.75rem; color: var(--ink-faint); }
.agree { border-left-color: var(--ink); }
.agree .src { color: var(--ink-dim); }

.seal-box { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-dim); word-break: break-all; background: var(--bg); border: 1px solid var(--line-soft); border-radius: 3px; padding: 0.8rem 1rem; margin-top: 0.5rem; }

/* ---- immersion: the door, the anchor, the reveal, the seal ---- */

/* The color-drain IS the door: entering a room drains a warm haze to black over ~1s. */
.door {
  position: fixed; inset: 0; z-index: 50; pointer-events: none;
  background: var(--door); opacity: 1; transition: opacity 1s ease;
}
.door.open { opacity: 0; }

/* The question, pinned as the object on the table. Glows at the anchor when engaged. */
.anchor {
  position: sticky; top: 0; z-index: 5;
  background: var(--bg); border: 1px solid var(--line); border-left: 3px solid var(--line);
  border-radius: 4px; padding: 0.85rem 1.1rem; margin: 1rem 0;
  font-weight: 650; color: var(--ink);
  transition: border-left-color 0.6s ease, box-shadow 0.6s ease;
}
.anchor .smallcaps { display: block; margin-bottom: 0.25rem; }
/* The anchor is STICKY for the whole flight. Half our theses run past 500
   characters, and an unbounded one pins a wall of text to the top of the
   viewport for every round — the reader loses the room to the question. It
   scrolls inside itself instead. */
.anchor { max-height: 32vh; overflow-y: auto; }
.anchor.glow { border-left-color: var(--ember); box-shadow: 0 0 20px -8px rgba(var(--ember-rgb), 0.45); }

/* Drip-reveal: presentation pacing, never fake typing. */
.turn.pre { opacity: 0; transform: translateY(6px); }
.turn.in { opacity: 1; transform: none; transition: opacity 0.5s ease, transform 0.5s ease; }

/* The seal is a moment, not a page-change. */
.seal-moment {
  border: 1px solid var(--ember); border-radius: 4px; background: var(--panel-2);
  padding: 1.5rem; margin-top: 1.25rem; text-align: center; color: var(--ink-bright);
  animation: sealin 0.6s ease;
}
.seal-moment .sub { color: var(--ink-dim); font-size: 0.85rem; margin-top: 0.4rem; }
@keyframes sealin { from { opacity: 0; transform: scale(0.985); } to { opacity: 1; transform: none; } }

/* Post-seal: the audit strip rides the record as a persistent footer. */
.audit-strip {
  position: sticky; bottom: 0; z-index: 5;
  background: var(--panel); border-top: 1px solid var(--line-soft);
  padding: 0.5rem 1.25rem; font-family: var(--mono); font-size: 0.72rem; color: var(--ink-dim);
  display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap;
}
.audit-strip .ember-dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--ember); flex: none; }

/* ---- the spine (prototype layout: presence like a conversation, honesty like a record) ---- */

main.spine { padding-bottom: 11rem; } /* room for the fixed composer */

.round-marker {
  display: flex; align-items: center; gap: 0.9rem;
  margin: 1.75rem 0 0.75rem; color: var(--ink-faint);
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
  white-space: nowrap;
}
.round-marker::before, .round-marker::after { content: ""; height: 1px; background: var(--line-soft); flex: 1; }

.spine .turn { border-bottom: none; padding: 0.7rem 0; }
.spine .turn.human { border-radius: 3px; margin: 0.4rem 0; }

.presence-rail { position: sticky; top: 0; z-index: 6; background: var(--bg); padding: 0.5rem 0; border-bottom: 1px solid var(--line-soft); }
.presence-rail .seats { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.4rem; margin: 0; }
.presence-rail .chip { padding: 0.4rem 0.55rem; font-size: 0.72rem; }
.presence-rail .chip .fam { font-size: 0.82rem; }
.presence-rail .chip .meta { display: none; } /* provenance detail lives one click away in the record — the rail is presence */
.spine .anchor { position: static; margin: 0.75rem 0 0.25rem; }

.composer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: rgba(11, 11, 12, 0.94); border-top: 1px solid var(--line);
  padding: 0.8rem 1.5rem 1rem; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.composer .inner { max-width: var(--max); margin: 0 auto; }
.composer textarea {
  width: 100%; min-height: 3.2rem; background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 3px; padding: 0.55rem 0.7rem;
  font-family: var(--sans); font-size: 0.95rem; resize: vertical;
}
.composer textarea:disabled { color: var(--ink-faint); background: var(--panel-2); }
.composer .row { display: flex; gap: 0.6rem; margin-top: 0.55rem; align-items: center; flex-wrap: wrap; }
.composer .cadence { color: var(--ink-faint); font-size: 0.8rem; }

.return-now {
  position: fixed; right: 1.5rem; bottom: 10rem; z-index: 21;
  background: var(--panel-2); color: var(--ink-dim); border: 1px solid var(--line);
  border-radius: 999px; padding: 0.4rem 0.9rem; font-size: 0.8rem; cursor: pointer;
}
.return-now:hover { color: var(--ink); border-color: var(--ink-faint); }

.layout-switch { font-size: 0.78rem; color: var(--ink-faint); }
.layout-switch a { color: var(--ink-dim); }

/* ---- front door ---- */
.hero { padding: 4.5rem 0 2.5rem; max-width: 46rem; }
.hero h1 { font-size: 2.6rem; margin: 0.5rem 0 1rem; }
.hero p { color: var(--ink-dim); font-size: 1.1rem; }
.hero .wm { font-size: 1.05rem; }

@media (max-width: 40rem) {
  .hero { padding: 2.5rem 0 1.5rem; }
  .hero h1 { font-size: 1.9rem; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   PRINT. A sealed record has to leave the browser as a document somebody can
   attach to an email, drop into a supplement, or hand to a reviewer — and until
   now Ctrl-P produced navigation bars, buttons and a dark background nobody
   wants on paper.

   This is deliberately not a PDF library. The browser already has one, it works
   on every platform, and adding a headless renderer to generate what Save-as-PDF
   already does would be a dependency in the path that produces our most
   shareable artifact. Fewer moving parts near the record is the whole doctrine.

   THE RULE THIS ENCODES: an export must never lose its provenance. Link targets
   are printed after the text, so a reader holding paper can still reach the
   seal and the verification recipe. A printed record that cannot be checked is
   an unverifiable claim wearing our name.
   ──────────────────────────────────────────────────────────────────────────── */
@media print {
  :root {
    --bg: #fff; --panel: #fff; --panel-2: #fff;
    --line: #bbb; --line-soft: #ddd;
    --ink: #111; --ink-bright: #000; --ink-heading: #000; --ink-dim: #333; --ink-faint: #555;
    --ember: #7a3b12;
  }
  html, body { background: #fff !important; color: #111 !important; }

  /* Chrome that belongs on a screen and not on paper. */
  nav, header, footer, .session-line, .btn, button, form,
  #theme-toggle, .filters, .composer, .presence-rail { display: none !important; }

  main, main.reg, main.calls { max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
  a { color: #111 !important; text-decoration: none; }

  /* A URL a reader cannot follow on paper is a dead reference. Print the target
     for real links only — not for in-page anchors, which would be noise. */
  a[href^="http"]::after, a[href^="/"]::after {
    content: " (" attr(href) ")";
    font-size: .78em; color: #555; word-break: break-all;
  }

  /* Nothing that carries a claim may be split across a page boundary. */
  .panel, .keeper, .item, .call, .seal-box, .stamp-banner, figure, table { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
  .stamp-banner { border: 1px solid #999 !important; background: #fff !important; padding: .6rem .8rem; }
  .seal-box, .mono { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; word-break: break-all; }

  /* Faint greys vanish on paper; these carry the caveats, which are the part we
     least want lost. */
  .faint { color: #555 !important; }
  .dim { color: #333 !important; }

  @page { margin: 18mm 16mm; }
}

/* ═══ THE SHEET, continued ════════════════════════════════════════════════════
   A record's opening is the artifact — the thing a researcher recognises as
   THEIRS. It gets page treatment. Everything below it (council, judges,
   transcript, spend) is apparatus and stays in the dark register, which is the
   same division Zenodo makes: the document has physical presence, the machinery
   lives around it. */
.sheet {
  background: var(--paper);
  color: var(--paper-ink);
  border: 1px solid var(--paper-line);
  border-radius: 3px;                 /* paper corners are sharp, not app-rounded */
  padding: 2.6rem 2.9rem 2.2rem;
  margin: 0 0 1.75rem;
  font-family: var(--serif);
  /* Two shadows: a tight contact shadow where the sheet meets the desk, and a
     wide soft one for the lift. One shadow reads as a card; two read as an
     object with thickness. */
  box-shadow:
    0 1px 2px rgba(0,0,0,.30),
    0 14px 38px -12px rgba(0,0,0,.55);
  /* Laid lines. Fine horizontal rules in the stock itself, the way quality paper
     is made — and thematically exact for a product whose output is a record. */
  background-image: repeating-linear-gradient(
    180deg, transparent 0 27px, var(--paper-rule) 27px 28px);
  background-position: 0 2.6rem;
}
.sheet > :first-child { margin-top: 0; }
.sheet > :last-child { margin-bottom: 0; }
.sheet h1 {
  font-family: var(--serif); color: var(--paper-ink);
  font-weight: 600; letter-spacing: -0.01em;
  font-size: clamp(1.45rem, 1.05rem + 1.6vw, 2.1rem);
  text-wrap: balance; margin: .2rem 0 .6rem;
}
.sheet p, .sheet li { color: var(--paper-ink); max-width: 38rem; }
.sheet .faint, .sheet .dim { color: var(--paper-ink-dim); }
.sheet a { color: #7a4a12; }
.sheet .smallcaps { color: var(--paper-ink-dim); }
.sheet .mono, .sheet code { font-family: var(--mono); }
/* The seal on the sheet: set as a stamp rather than a data field. */
.sheet .seal-box {
  background: var(--paper-2); border: 1px solid var(--paper-line);
  color: var(--paper-ink); word-break: break-all;
}
.sheet .stamp-banner {
  background: var(--paper-2); border-left: 3px solid var(--ember);
  color: var(--paper-ink); padding: .6rem .85rem; border-radius: 2px;
}
.sheet .panel { background: var(--paper-2); border-color: var(--paper-line); color: var(--paper-ink); }
.sheet .btn, .sheet .btn.ghost {
  font-family: var(--sans); color: var(--paper-ink);
  background: var(--paper-2); border: 1px solid var(--paper-line);
}
.sheet .btn:hover { border-color: var(--ember); }
/* Narrow screens: a page with 2.9rem margins on a phone is mostly margin. */
@media (max-width: 40rem) { .sheet { padding: 1.5rem 1.35rem 1.25rem; } }
/* On paper, the sheet IS the paper — drop the costume so it does not print a
   shadow and a border around the thing being printed. */
@media print {
  .sheet {
    background: #fff !important; box-shadow: none !important;
    border: none !important; background-image: none !important;
    padding: 0 !important; margin: 0 0 1rem !important;
  }
  body { background-image: none !important; }
}

/* ═══ THE MONOTONE FIX, HALF THREE — EDGES ═══════════════════════════════════
   Chance, after the first pass: "still a little too mono-tonish." Widening the
   value band helped and was not enough, because separation between two flat
   fields is only visible where they meet. Real objects show their edge: light
   catches the top, the underside falls into shadow. A one-pixel highlight at the
   top of a panel does more for dimensionality than several points of lightness
   across the whole surface — and costs no contrast anywhere text lives. */
.panel, .keeper, .tablewrap, .call, .card {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}
:root[data-theme="light"] .panel, :root[data-theme="light"] .keeper,
:root[data-theme="light"] .tablewrap, :root[data-theme="light"] .call,
:root[data-theme="light"] .card { box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
@media (prefers-color-scheme: light) {
  .panel, .keeper, .tablewrap, .call, .card { box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
}

/* ═══ THE DOCUMENT BOX ════════════════════════════════════════════════════════
   Zenodo's "Files (1.8 MB)" panel is the element Chance identified as doing the
   psychological work: a bordered box with the artifact sitting in it, named,
   sized, and ready to take. It reads as a repository, and reading as a
   repository is itself a credibility signal to a researcher.
   Ours differs in one way worth being loud about. Zenodo shows an MD5 of a file
   an author uploaded. We show a SHA-256 over canonically-serialised bytes, with
   an independent witness and a recompute recipe that needs no trust in us. Same
   slot on the page, much stronger claim. */
.filebox { border: 1px solid var(--line); border-radius: 4px; background: var(--panel); margin: 1.25rem 0; overflow: hidden; }
.filebox-head {
  margin: 0; padding: .7rem 1rem; background: var(--panel-2);
  border-bottom: 1px solid var(--line); font-size: .95rem; font-weight: 650;
  color: var(--ink-heading); display: flex; align-items: baseline; gap: .5rem;
}
.filebox-head small { color: var(--ink-faint); font-weight: 400; }
.filetable { width: 100%; border-collapse: collapse; font-size: .9rem; }
.filetable th {
  text-align: left; padding: .5rem 1rem; color: var(--ink-faint);
  font-weight: 500; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  border-bottom: 1px solid var(--line-soft);
}
.filetable td { padding: .6rem 1rem; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.filetable tr:last-child td { border-bottom: 0; }
.filetable tr:nth-child(even) td { background: rgba(255,255,255,.014); }
.filetable .fname { color: var(--ink); text-decoration: none; font-weight: 550; }
.filetable .fname:hover { text-decoration: underline; text-decoration-color: var(--ember); }
.filetable .fkind { color: var(--ink-dim); font-size: .82rem; }
.filetable .fsize { color: var(--ink-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.filetable .facts { text-align: right; white-space: nowrap; }
.btn-mini {
  display: inline-block; font-size: .78rem; padding: .22rem .6rem; border-radius: 3px;
  border: 1px solid var(--line); color: var(--ink-dim); background: var(--panel-2);
  text-decoration: none; cursor: pointer; font-family: var(--sans);
}
.btn-mini:hover { color: var(--ink); border-color: var(--ember); }
.filebox-foot {
  padding: .6rem 1rem; background: var(--panel-2); border-top: 1px solid var(--line-soft);
  color: var(--ink-faint); font-size: .8rem;
}
.filebox-foot .mono { color: var(--ink-dim); word-break: break-all; }
@media print { .filebox { display: none !important; } }

/* ═══ THE GLASS ═══════════════════════════════════════════════════════════════
   Chance, on Zenodo's Files box: "it gives a feeling that there is a paper
   behind the site, that you can reach into and grab, but it's behind glass like
   one of those claw machines, so you use the download button to get it out of
   the slot."
   That is the metaphor and it is precise. The document is VISIBLE — actually
   rendered, scrollable, the real thing — and the only way to take it is the slot
   underneath. So: an inset frame, darker than its surroundings so it reads as a
   recess rather than a raised card, with a sheet inside it. */
.glass {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
  /* Inset, not raised. A recess you look INTO — the opposite of the sheet at the
     top of the record, which sits ON the page. */
  box-shadow: inset 0 2px 10px rgba(0,0,0,.45);
  padding: .9rem;
  margin: 0;
}
.glass-pane {
  height: 62vh; min-height: 22rem; overflow-y: auto; overscroll-behavior: contain;
  background: var(--paper); border: 1px solid var(--paper-line); border-radius: 2px;
  padding: 2.2rem 2.4rem;
  color: var(--paper-ink); font-family: var(--serif); font-size: .94rem; line-height: 1.6;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.glass-pane::-webkit-scrollbar { width: 10px; }
.glass-pane::-webkit-scrollbar-thumb { background: var(--paper-line); border-radius: 5px; }
.glass-slot {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .7rem .2rem 0; color: var(--ink-faint); font-size: .82rem;
}
/* The document, inside the glass. Serif, generous, and quiet — it is being read
   through a window, not operated. */
.glass-pane .doc-title { font-size: 1.3rem; font-weight: 600; margin: 0 0 1rem; color: var(--paper-ink); line-height: 1.25; }
.glass-pane h2 { font-size: 1.05rem; margin: 1.6rem 0 .5rem; color: var(--paper-ink); border-bottom: 1px solid var(--paper-line); padding-bottom: .25rem; }
.glass-pane h3 { font-size: .95rem; margin: 1.1rem 0 .35rem; color: var(--paper-ink); }
.glass-pane h4 { font-size: .9rem; margin: .9rem 0 .3rem; color: var(--paper-ink-dim); font-weight: 600; }
.glass-pane p, .glass-pane li { color: var(--paper-ink); max-width: none; margin: .5rem 0; }
.glass-pane .doc-note { color: var(--paper-ink-dim); font-style: italic; }
.glass-pane .doc-kv { display: grid; grid-template-columns: max-content 1fr; gap: .2rem .9rem; margin: .6rem 0; }
.glass-pane .doc-kv dt { font-weight: 600; color: var(--paper-ink-dim); }
.glass-pane .doc-kv dd { margin: 0; color: var(--paper-ink); }
.glass-pane .doc-mono, .glass-pane .doc-pre { font-family: var(--mono); font-size: .82rem; word-break: break-all; }
.glass-pane .doc-pre { background: var(--paper-2); border: 1px solid var(--paper-line); padding: .6rem .7rem; border-radius: 2px; white-space: pre-wrap; }
.glass-pane .doc-tablewrap { overflow-x: auto; margin: .7rem 0; }
.glass-pane .doc-table { border-collapse: collapse; font-size: .84rem; font-family: var(--sans); }
.glass-pane .doc-table th, .glass-pane .doc-table td { border: 1px solid var(--paper-line); padding: .3rem .55rem; text-align: left; }
.glass-pane .doc-table th { background: var(--paper-2); font-weight: 600; }
.glass-pane .doc-turn { margin: .9rem 0; padding-left: .85rem; border-left: 2px solid var(--paper-line); }
.glass-pane .doc-who { font-weight: 650; font-size: .86rem; color: var(--paper-ink); }
.glass-pane .doc-role, .glass-pane .doc-at { font-weight: 400; color: var(--paper-ink-dim); font-size: .8rem; }
@media (max-width: 40rem) { .glass-pane { padding: 1.2rem 1.1rem; height: 50vh; } }
/* On paper the glass is meaningless — you are already holding the document. */
@media print { .glass { display: none !important; } }
/* The checksum line under each filename. Long, and it should look long — a
   truncated hash invites a reader to compare the first eight characters and
   call it verified. It wraps and stays selectable instead. */
.fhash {
  font-family: var(--mono); font-size: .68rem; color: var(--ink-faint);
  word-break: break-all; margin-top: .2rem; line-height: 1.35; max-width: 30rem;
}
.fhash:empty { display: none; }

/* The citation for a paper under review. A definition list, because that is
   what a citation is — and it must read as a reference, not as our own claim. */
.reviewed .cite {
  display: grid; grid-template-columns: max-content 1fr; gap: .15rem .9rem;
  margin: .5rem 0 0; font-size: .88rem;
}
.reviewed .cite + .cite { padding-top: .5rem; border-top: 1px solid var(--line-soft); margin-top: .5rem; }
.reviewed .cite dt { color: var(--ink-faint); }
.reviewed .cite dd { margin: 0; color: var(--ink); word-break: break-word; }
@media (max-width: 34rem) { .reviewed .cite { grid-template-columns: 1fr; gap: 0 } .reviewed .cite dt { margin-top: .4rem } }

/* The demonstration banner. The ONE place the ember is allowed to shout, and it
   is the right place: this is the site telling a reader that what they are
   looking at did not happen. A badge in a faint line was not enough — Chance
   read straight past it on a page he asked for, and he built this. */
.banner-demo {
  border: 1px solid var(--ember);
  border-left: 4px solid var(--ember);
  background: rgba(var(--ember-rgb), .07);
  color: var(--ink);
  padding: .7rem .9rem; border-radius: 3px; margin: 0 0 1rem;
  font-size: .9rem; line-height: 1.55;
}
.banner-demo b { color: var(--ember); }
.banner-demo a { color: var(--ink); }
/* It must survive printing. A printed demo record with the banner dropped is
   the same document we were trying not to produce. */
@media print { .banner-demo { border-color: #000; background: none } .banner-demo b { color: #000 } }

/* The visibility control. Quiet panel, because the decision inside it is loud
   enough — and the publish button is deliberately NOT the ember: the ember
   means "this is the moment that matters" and it is already spent on the seal.
   A button that cannot be undone should look ordinary and ask a hard question,
   not glow and invite a reflex. */
.open-vis { border-left: 3px solid var(--line); }
.open-vis .smallcaps { color: var(--ink-dim); }

/* ═══ THE DOORS ═══════════════════════════════════════════════════════════════
   Chance: the modes should be "indicated somewhere easy to see like the upper
   right corner of the screen and maybe in a bright color." The reason is the
   day's lesson — a tool that does several things and will not say which one you
   are in is the tool people say did not do what they expected. */
.doorflag {
  margin-left: auto; align-self: center;
  font-size: .74rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 650;
  color: var(--ember);
  border: 1px solid rgba(var(--ember-rgb), .5);
  background: rgba(var(--ember-rgb), .09);
  padding: .22rem .6rem; border-radius: 999px; white-space: nowrap;
}
@media (max-width: 46rem) { .doorflag { font-size: .68rem; padding: .18rem .45rem } }

/* The door's opening. One claim, large, and a second line that says what you
   walk away with — no apparatus above the fold. */
.door-hero { margin: 1.6rem 0 1.4rem; }
.door-head {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.6rem, 4.2vw, 2.6rem); line-height: 1.18;
  color: var(--ink-bright); margin: 0; max-width: 26ch; text-wrap: balance;
}
.door-sub {
  margin: .9rem 0 0; max-width: var(--measure);
  font-size: 1.02rem; line-height: 1.6; color: var(--ink);
}
.cite-card { margin-top: .9rem; padding: .8rem .9rem; border: 1px solid var(--line); border-radius: 3px; background: var(--panel-2); }
.cite-card .cite { display: grid; grid-template-columns: max-content 1fr; gap: .18rem .9rem; margin: .5rem 0 0; font-size: .9rem; }
.cite-card .cite dt { color: var(--ink-faint); }
.cite-card .cite dd { margin: 0; color: var(--ink); word-break: break-word; }
input.wide { flex: 1 1 22rem; min-width: 0; }
@media (max-width: 34rem) { .cite-card .cite { grid-template-columns: 1fr; gap: 0 } .cite-card .cite dt { margin-top: .4rem } }
/* The visibility group on the paper door. Boxed, because on this page it is the
   one decision that cannot be taken back and it should not read as another
   field in a form. */
.vis { border: 1px solid var(--line-soft); border-radius: 3px; padding: .65rem .75rem; }

/* The two intakes on the paper door. Tabs rather than a dropdown, because which
   one you are on changes what the form will let you do — the commons option
   disappears on the unpublished side — and a change that consequential should
   be visible on the page rather than folded into a select. */
.tab {
  background: none; border: 1px solid var(--line); color: var(--ink-dim);
  padding: .32rem .8rem; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: .88rem;
}
.tab:hover { color: var(--ink); border-color: var(--ink-faint); }
.tab.on { color: var(--ink-bright); border-color: var(--ember); background: rgba(var(--ember-rgb), .08); }