/* ==========================================================================
   Systems Atlas Project
   Implements brand identity system v1.0.

   Palette, type roles, 8px interval, reading widths and the light/dark
   rhythm are taken from the brand document, not invented here.
   ========================================================================== */

/* Fonts -------------------------------------------------------------------
   Self-hosted so the page works under a Content-Security-Policy without a
   third-party font origin.

   The five .woff2 files in /assets/fonts/ are REAL as of 2026-09-16. They were
   ZERO BYTES from 2026-08-03, which is not the same as absent: every browser
   requested each one, failed to decode it, and fell back — four console
   warnings per page load, for six weeks. This comment said the stacks "fall
   back until real files arrive" and it was the only true copy of that fact in
   the repository; it is now a record of what was fixed rather than a promise.

   Provenance, byte counts, sha256s and both OFL licence texts:
   site/assets/fonts/LICENCES.md. The files are the `latin` subset, so `→` and
   the CJK in the four app names still fall back — that file says why and what
   it would take to change.

   The `font-family` stacks below keep their fallbacks. They are now what they
   were always meant to be: what a reader sees for a glyph these five faces do
   not carry, rather than what every reader saw for every glyph.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "IBM Plex Sans Condensed";
  src: url("/assets/fonts/IBMPlexSansCondensed-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans Condensed";
  src: url("/assets/fonts/IBMPlexSansCondensed-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/assets/fonts/AtkinsonHyperlegibleNext-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/assets/fonts/AtkinsonHyperlegibleNext-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Tokens ------------------------------------------------------------------ */

:root {
  /* Surfaces and structure */
  --night:      #101820;
  --structure:  #F5F0E6;
  --paper:      #F1EEE5;

  /* Signal colours. Each names a kind of work, never an app or a mood. */
  --evidence:   #20A4FF;
  --structural: #FF6A00;
  --applied:    #19D18B;
  --revision:   #FF2F87;

  /* Derived tones. Mixed from the two field colours only, so nothing new
     enters the palette. */
  --night-2:    #4A525A;
  --night-3:    #737A81;
  --rule-dark:  #2A3138;
  --structure-2: rgba(245, 240, 230, 0.66);
  --structure-3: rgba(245, 240, 230, 0.40);
  --rule-light: rgba(245, 240, 230, 0.18);

  /* Type */
  --display: "IBM Plex Sans Condensed", "IBM Plex Sans", ui-sans-serif,
             system-ui, "Segoe UI", sans-serif;
  --body:    "Atkinson Hyperlegible Next", "Atkinson Hyperlegible",
             ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", "SFMono-Regular",
             Menlo, Consolas, monospace;

  /* Mapping interval: 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 */
  --s1: 4px;  --s2: 8px;  --s3: 16px; --s4: 24px;
  --s5: 32px; --s6: 48px; --s7: 64px; --s8: 96px;

  --reading: 720px;
  --layout: 1440px;
  --gutter: clamp(20px, 5vw, 48px);
}

/* Reset ------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--night);
  font-family: var(--body);
  font-size: clamp(17px, 16px + 0.25vw, 19px);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--evidence);
  outline-offset: 3px;
}

/* Fields ------------------------------------------------------------------
   Night Field: hero, map, diagnostics, transitions.
   Chart Paper: method, tools, sources, long reading.
   The alternation is the point; the page is never wholly dark.
   -------------------------------------------------------------------------- */

.field--night {
  background: var(--night);
  color: var(--structure);
}

.field--paper {
  background: var(--paper);
  color: var(--night);
}

.field--night a { color: var(--structure); }

/* Layout ------------------------------------------------------------------ */

.wrap {
  width: 100%;
  max-width: var(--layout);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.reading { max-width: var(--reading); }

.band { padding-block: clamp(var(--s7), 8vw, var(--s8)); }
.band--tight { padding-block: clamp(var(--s6), 6vw, var(--s7)); }

/* Type roles -------------------------------------------------------------- */

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--night-2);
  margin: 0 0 var(--s4);
  display: flex;
  align-items: baseline;
  gap: var(--s3);
}

.field--night .eyebrow { color: var(--structure-3); }

.eyebrow__no { color: var(--structural); }
.field--night .eyebrow__no { color: var(--structural); }

.title {
  font-family: var(--display);
  font-size: clamp(40px, 5.6vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  font-weight: 600;
  text-wrap: balance;
  max-width: 18ch;
}

.section-title {
  font-family: var(--display);
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-weight: 600;
  margin: 0 0 var(--s4);
  text-wrap: balance;
  max-width: 22ch;
}

.sub-title {
  font-family: var(--display);
  font-size: clamp(20px, 1.6vw, 24px);
  line-height: 1.2;
  font-weight: 600;
  margin: 0 0 var(--s2);
}

.lede {
  font-size: clamp(19px, 1.4vw, 22px);
  line-height: 1.45;
  max-width: 46ch;
}

.field--night .lede { color: var(--structure-2); }
.field--paper .lede { color: var(--night-2); }

/* A lede set straight after a title otherwise butts into its descenders.
   Same value as .hero__lede, which is where this spacing was first set. */
.title + .lede,
.doc h1 + .lede { margin-top: var(--s4); }

.prose { max-width: var(--reading); }
.prose p + p { margin-top: var(--s3); }
.field--paper .prose { color: var(--night-2); }
.field--night .prose { color: var(--structure-2); }
.prose strong { font-weight: 700; color: inherit; }
.field--paper .prose strong { color: var(--night); }
.field--night .prose strong { color: var(--structure); }

.prose a,
.colophon a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.data {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  letter-spacing: 0.04em;
}

/* Masthead ---------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--night);
  border-bottom: 1px solid var(--rule-dark);
}

.masthead__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2) var(--s5);
  padding-block: var(--s3);
}

.masthead__mark {
  display: flex;
  align-items: center;
  gap: var(--s2);
  text-decoration: none;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--structure);
}

.masthead__icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex: none;
}

.masthead__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
}

.masthead__nav a {
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--structure-2);
  padding-block: var(--s1);
  border-bottom: 2px solid transparent;
}

.masthead__nav a:hover,
.masthead__nav a:focus-visible { color: var(--structure); border-bottom-color: var(--structural); }

/* Hero -------------------------------------------------------------------- */

.hero { padding-block: clamp(var(--s7), 9vw, 120px) clamp(var(--s7), 8vw, var(--s8)); }

.hero__grid {
  display: grid;
  gap: clamp(var(--s6), 6vw, var(--s8));
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 62rem) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
}

.hero__lede { margin-top: var(--s4); }

.hero__state {
  margin-top: var(--s6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  color: var(--structure-3);
}

.hero__state span::before {
  content: "";
  display: inline-block;
  width: var(--s2);
  height: var(--s2);
  margin-right: var(--s2);
  background: currentColor;
}

.hero__state .is-building { color: var(--structural); }
.hero__state .is-open { color: var(--revision); }

/* Structural fragment ----------------------------------------------------- */

.fragment { width: 100%; height: auto; }

.frag__boundary {
  fill: none;
  stroke: var(--structure-3);
  stroke-width: 1.5;
  stroke-dasharray: 3 5;
}

.frag__rel {
  fill: none;
  stroke: var(--structure);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.frag__rel--inferred { stroke-dasharray: 9 8; opacity: 0.7; }
.frag__rel--open { stroke-dasharray: 26 22; opacity: 0.5; }

.frag__node {
  fill: none;
  stroke: var(--structure);
  stroke-width: 2.5;
  rx: 6;
}

.frag__node--selected { stroke: var(--revision); stroke-width: 3.5; }

.frag__label {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  fill: var(--structure);
}

.frag__level {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  fill: var(--structure-3);
}

.frag__level--selected { fill: var(--revision); }

/* Legend ------------------------------------------------------------------ */

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  margin-top: var(--s4);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--structure-3);
}

.field--paper .legend { color: var(--night-2); }

.legend__item { display: flex; align-items: center; gap: var(--s2); }
.legend__swatch { width: 28px; height: 2px; flex: none; }

.legend__swatch--solid { background: var(--structure); }
.legend__swatch--open {
  background: repeating-linear-gradient(to right,
    var(--structure) 0 10px, transparent 10px 18px);
}
.legend__swatch--inferred {
  background: repeating-linear-gradient(to right,
    var(--structure) 0 5px, transparent 5px 9px);
}
.legend__swatch--selected { background: var(--revision); height: 3px; }

.field--paper .legend__swatch--solid { background: var(--night); }
.field--paper .legend__swatch--open {
  background: repeating-linear-gradient(to right,
    var(--night) 0 10px, transparent 10px 18px);
}

/* Destination ------------------------------------------------------------- */

.destination {
  display: grid;
  gap: var(--s5);
  grid-template-columns: 1fr;
  margin-top: var(--s6);
}

@media (min-width: 48rem) {
  .destination { grid-template-columns: repeat(3, 1fr); gap: var(--s6); }
}

.stage { border-top: 2px solid var(--rule-dark); padding-top: var(--s4); }
.stage--now { border-top-color: var(--structural); }

.stage__state {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--structure-3);
  display: block;
  margin-bottom: var(--s2);
}

.stage--now .stage__state { color: var(--structural); }
.stage p { color: var(--structure-2); font-size: 17px; }

/* Domain ladder ----------------------------------------------------------- */

.ladder { margin-top: var(--s6); border-top: 1px solid var(--rule-light); }

.domain {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s2) var(--s5);
  padding-block: var(--s4);
  border-bottom: 1px solid var(--rule-light);
  align-items: center;
}

@media (min-width: 56rem) {
  .domain { grid-template-columns: 15rem minmax(0, 1fr) 4rem 8rem; }
}

.domain__name {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
}

.domain__name a { text-decoration: none; border-bottom: 1px solid transparent; }
.domain__name a:hover,
.domain__name a:focus-visible { border-bottom-color: var(--structural); }

/* The loosest completeness measure there is — the definition field alone —
   and still the highest figure on the site. */
.domain__pct {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--structure-3);
}

@media (min-width: 56rem) {
  .domain__pct { text-align: right; }
}

.domain__track {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: var(--s1);
  width: 100%;
}

.domain__seg {
  height: 6px;
  background: var(--structure);
}

/* An open slot is an unexamined level, not a level scored zero. */
.domain__seg--open { opacity: 0.15; }

.domain__depth {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--structure-3);
}

@media (min-width: 56rem) {
  .domain__depth { text-align: right; }
}

.domain__depth strong { color: var(--structure); font-weight: 400; }

.ladder__scale {
  display: none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--structure-3);
  padding-bottom: var(--s2);
}

@media (min-width: 56rem) {
  .ladder__scale {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr) 4rem 8rem;
    gap: var(--s5);
  }
  .ladder__scale > span:last-child { text-align: right; }
  .ladder__scale ol {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
  }
}

/* Method ------------------------------------------------------------------ */

.rules {
  display: grid;
  gap: var(--s6) var(--s7);
  grid-template-columns: 1fr;
  margin-top: var(--s6);
}

@media (min-width: 46rem) { .rules { grid-template-columns: 1fr 1fr; } }
@media (min-width: 72rem) { .rules { grid-template-columns: repeat(3, 1fr); } }

.rule__no {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--structural);
  display: block;
  margin-bottom: var(--s2);
}

.rule p { color: var(--night-2); font-size: 17px; }

/* Record ------------------------------------------------------------------ */

.record {
  margin-top: var(--s6);
  border-top: 1px solid rgba(16, 24, 32, 0.16);
}

.record__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s1) var(--s5);
  padding-block: var(--s3);
  border-bottom: 1px solid rgba(16, 24, 32, 0.16);
}

@media (min-width: 48rem) {
  .record__row { grid-template-columns: 12rem minmax(0, 1fr); }
}

.record__key {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--night-2);
}

.record__val { color: var(--night-2); font-size: 17px; }
.record__val strong { color: var(--night); font-weight: 700; }

/* Lenses ------------------------------------------------------------------ */

.lenses {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s5);
}

.lens {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.03em;
  border: 1px solid rgba(16, 24, 32, 0.28);
  padding: var(--s2) var(--s3);
  color: var(--night);
}

.lens--undefined {
  border-style: dashed;
  color: var(--night-3);
}

/* Tools ------------------------------------------------------------------- */

.tools { margin-top: var(--s6); display: grid; gap: var(--s4); grid-template-columns: 1fr; }

@media (min-width: 52rem) { .tools { grid-template-columns: 1fr 1fr; gap: var(--s5); } }

/* A neutral frame, not a filled tile: each app keeps its own field colour
   inside its own icon, and nothing recolours it. */
.tool {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--s3) var(--s4);
  align-items: start;
  padding: var(--s4);
  border: 1px solid rgba(16, 24, 32, 0.28);
  text-decoration: none;
  background: transparent;
}

a.tool:hover, a.tool:focus-visible { border-color: var(--night); }

.tool__icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  flex: none;
  align-self: start;
}

.tool__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3); }
.tool__name { font-family: var(--display); font-size: 22px; font-weight: 600; }

.tool__status {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--night-3);
}

.tool__status--live { color: var(--applied); }

.tool__node {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--night-3);
  margin-top: var(--s1);
  display: block;
}

.tool__what { color: var(--night-2); font-size: 17px; margin-top: var(--s3); }

.tool__link {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--night-2);
  margin-top: var(--s3);
  display: block;
}

a.tool:hover .tool__link { color: var(--night); text-decoration: underline; text-underline-offset: 3px; }

.tool__grid-note {
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--night-3);
  letter-spacing: 0.05em;
}

/* Buttons ----------------------------------------------------------------- */

.actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }

.btn {
  display: inline-block;
  font-family: var(--display);
  font-size: 16px;
  letter-spacing: 0.02em;
  font-weight: 600;
  padding: var(--s3) var(--s4);
  text-decoration: none;
  border: 2px solid var(--night);
  border-radius: 0;
}

.btn--primary { background: var(--night); color: var(--paper); }
.btn--secondary { background: transparent; color: var(--night); }

.btn--primary:hover { background: transparent; color: var(--night); }
.btn--secondary:hover { background: var(--night); color: var(--paper); }

.field--night .btn {
  border-color: var(--structure);
}
.field--night .btn--primary { background: var(--structure); color: var(--night); }
.field--night .btn--primary:hover { background: transparent; color: var(--structure); }
.field--night .btn--secondary { color: var(--structure); }
.field--night .btn--secondary:hover { background: var(--structure); color: var(--night); }

/* Footer ------------------------------------------------------------------ */

.footer { border-top: 1px solid var(--rule-dark); }
.footer__inner { padding-block: var(--s7) var(--s7); }

.footer__grid {
  display: grid;
  gap: var(--s6);
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .footer__grid { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
}

.terms { display: grid; gap: var(--s2); }

.terms li {
  font-family: var(--display);
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 600;
  color: var(--structure);
  line-height: 1.15;
}

.footer__nav { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); }

.footer__nav a {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--structure-3);
  text-decoration: none;
}

.footer__nav a:hover { color: var(--structure); }

.colophon {
  margin-top: var(--s5);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--structure-3);
}

/* Motion ------------------------------------------------------------------
   One orchestrated moment: the hero fragment draws itself once. Nothing
   else on the page animates.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .frag__draw {
    stroke-dasharray: var(--len);
    stroke-dashoffset: var(--len);
    animation: draw 1.1s cubic-bezier(0.33, 0, 0.25, 1) forwards;
    animation-delay: var(--delay, 0s);
  }

  .frag__appear {
    opacity: 0;
    animation: appear 0.45s ease forwards;
    animation-delay: var(--delay, 0s);
  }
}

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes appear { to { opacity: 1; } }

.d1 { --delay: 0.15s; }
.d2 { --delay: 0.45s; }
.d3 { --delay: 0.75s; }
.d4 { --delay: 1.05s; }
.d5 { --delay: 1.35s; }
.d6 { --delay: 1.65s; }

@media print {
  body { background: #fff; color: #000; }
  .masthead { position: static; }
  .field--night { background: #fff; color: #000; }
}

/* Utilities ---------------------------------------------------------------
   Declared here rather than inline so the page runs under a
   Content-Security-Policy without 'unsafe-inline'.
   -------------------------------------------------------------------------- */

.mt-6 { margin-top: var(--s6); }
.mt-7 { margin-top: var(--s7); }

.len--103 { --len: 103; }
.len--197 { --len: 197; }

.legend__swatch--faint { opacity: 0.35; }

/* The record table sits on Night Field, so its rules and values take the
   light-on-dark treatment. */
.field--night .record,
.field--night .record__row { border-color: var(--rule-light); }

.field--night .record__key { color: var(--structure-3); }
.field--night .record__val { color: var(--structure-2); }
.field--night .record__val strong { color: var(--structure); }

/* ==========================================================================
   TOOL PAGES
   Each tool keeps its own icon and accent. Everything structural around it
   is the atlas. The accent is set per page by a body class, never inline.
   ========================================================================== */

.t-konki    { --accent: #6E3AC4; }
.t-shutoku  { --accent: #E8362A; }
.t-kantetsu { --accent: #A2482C; }
.t-bottou   { --accent: #4F6F52; }
/* ⚠️ Raigambre is a FIFTH app and it is not on the Tools index — it has no tool
   page here, only the two store-compliance pages the App Store and Play require
   a working link to. The accent is transcribed from the app exactly as the four
   above are: `terracotta = Color(0xFFC65D3B)` in raigambre's own
   `ui/theme/Color.kt`, ported 1:1 from its `AppTheme.swift`. It is NOT a new
   palette entry and must not be used anywhere but /tools/raigambre/. */
.t-raigambre   { --accent: #C65D3B; }

/* Tool hero --------------------------------------------------------------- */

.tool-hero { padding-block: clamp(var(--s6), 7vw, var(--s8)) var(--s7); }

.tool-hero__id {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin-bottom: var(--s5);
}

.tool-hero__icon {
  width: 88px;
  height: 88px;
  border-radius: 20px;
  flex: none;
}

.tool-hero__name {
  font-family: var(--display);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.015em;
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  flex-wrap: wrap;
}

.tool-hero__kanji {
  font-size: 0.5em;
  color: var(--structure-3);
  letter-spacing: 0.06em;
}

.tool-hero__status {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--applied);
  display: block;
  margin-top: var(--s2);
}

.tool-hero__claim {
  font-family: var(--display);
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.012em;
  max-width: 20ch;
  text-wrap: balance;
}

.tool-hero__lede { margin-top: var(--s4); }

.origin {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--structure-3);
  border-left: 2px solid var(--accent, var(--structural));
  padding-left: var(--s3);
  margin-top: var(--s6);
  display: block;
}

.platforms {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--structure-3);
  margin-top: var(--s4);
}

/* Feature rows ------------------------------------------------------------ */

.rows { margin-top: var(--s6); border-top: 1px solid rgba(16, 24, 32, 0.16); }

.row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s2) var(--s6);
  padding-block: var(--s5);
  border-bottom: 1px solid rgba(16, 24, 32, 0.16);
}

@media (min-width: 48rem) {
  .row { grid-template-columns: 14rem minmax(0, 1fr); align-items: baseline; }
  .row .sub-title { margin: 0; }
}

.row p { color: var(--night-2); max-width: 46rem; }
.row p + p { margin-top: var(--s3); }

/* Constraint list --------------------------------------------------------- */

.constraints {
  display: grid;
  gap: var(--s4) var(--s6);
  grid-template-columns: 1fr;
  margin-top: var(--s6);
}

@media (min-width: 44rem) { .constraints { grid-template-columns: 1fr 1fr; } }

.constraints li { display: flex; gap: var(--s3); align-items: baseline; }

.constraints li::before {
  content: "";
  width: 14px;
  height: 2px;
  flex: none;
  background: var(--accent, var(--night));
  transform: translateY(-5px);
}

.constraints strong { font-weight: 700; display: block; }
.constraints span { color: var(--night-2); font-size: 17px; }

/* App Store action -------------------------------------------------------- */

.store {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  padding: var(--s3) var(--s5);
  text-decoration: none;
  background: var(--structure);
  color: var(--night);
  border: 2px solid var(--structure);
}

.store:hover { background: transparent; color: var(--structure); }
.store svg { fill: currentColor; }

/* `.field--night a` sets a link colour with higher specificity than `.store`,
   which rendered the label cream-on-cream. These restate it explicitly. */
.field--night .store { background: var(--structure); color: var(--night); border-color: var(--structure); }
.field--night .store:hover { background: transparent; color: var(--structure); }

.field--paper .store { background: var(--night); color: var(--paper); border-color: var(--night); }
.field--paper .store:hover { background: transparent; color: var(--night); }

/* ==========================================================================
   DOCUMENT PAGES  (privacy, support, terms)
   ========================================================================== */

.doc { padding-block: clamp(var(--s6), 5vw, var(--s7)) var(--s8); }
.doc__inner { max-width: var(--reading); }

.doc h1 {
  font-family: var(--display);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.012em;
}

.doc h2 {
  font-family: var(--display);
  font-size: clamp(21px, 1.8vw, 26px);
  font-weight: 600;
  margin: var(--s7) 0 var(--s3);
}

.doc h2:first-of-type { margin-top: var(--s6); }

.doc h3 {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  margin: var(--s5) 0 var(--s2);
}

.doc p { color: var(--night-2); margin-bottom: var(--s3); }
.doc strong { color: var(--night); font-weight: 700; }

.doc ul { margin: 0 0 var(--s4); }

.doc ul li,
.node-field ul li {
  color: var(--night-2);
  display: flex;
  gap: var(--s3);
  margin-bottom: var(--s2);
}

.doc ul li::before,
.node-field ul li::before {
  content: "";
  width: 12px;
  height: 2px;
  flex: none;
  background: var(--accent, var(--night));
  transform: translateY(-6px);
}

/* The reset strips list markers, so an ordered list has to restate them. Mono
   numerals, because a step number is a label rather than prose. */
.doc ol { margin: 0 0 var(--s4); counter-reset: step; }

.doc ol li {
  color: var(--night-2);
  display: flex;
  gap: var(--s3);
  margin-bottom: var(--s2);
  counter-increment: step;
}

.doc ol li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--accent, var(--night));
  flex: none;
  transform: translateY(3px);
}

.doc a { text-decoration: underline; text-underline-offset: 3px; }

.doc__updated {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--night-3);
  margin-top: var(--s3);
}

/* A boxed statement that must not be missed. Flat field, no elevation. */
.notice {
  border: 2px solid var(--accent, var(--night));
  padding: var(--s4);
  margin: var(--s5) 0;
}

.notice p:last-child { margin-bottom: 0; }

/* A notice may open with its own heading. The section rhythm on `.doc h2`
   would otherwise push it away from the border it is sitting inside. */
.doc .notice > :first-child { margin-top: 0; }

/* `.doc a` underlines every link, which is right for prose and wrong for the
   one that is a button. Restated because `.doc a` outranks `.store`. */
.doc .store { text-decoration: none; }

/* FAQ --------------------------------------------------------------------- */

.faq { margin-top: var(--s5); border-top: 1px solid rgba(16, 24, 32, 0.16); }

.faq details { border-bottom: 1px solid rgba(16, 24, 32, 0.16); }

.faq summary {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  padding-block: var(--s4);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  align-items: baseline;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  font-family: var(--mono);
  color: var(--accent, var(--night));
  flex: none;
}

.faq details[open] summary::after { content: "–"; }
.faq details > *:not(summary) { margin-bottom: var(--s3); }
.faq details > *:last-child { padding-bottom: var(--s4); }

/* Skip link --------------------------------------------------------------- */

.skip {
  position: absolute;
  left: -9999px;
  background: var(--structure);
  color: var(--night);
  padding: var(--s3) var(--s4);
  font-family: var(--display);
  font-weight: 600;
  z-index: 100;
}

.skip:focus { left: var(--s3); top: var(--s3); }

/* Kantetsu thread ---------------------------------------------------------
   The run of kept days as a path: solid where the record holds, interrupted
   where it broke. Same line grammar as the map.
   -------------------------------------------------------------------------- */

.thr__scroll {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  margin-top: var(--s6);
}

.thr__scroll::-webkit-scrollbar { display: none; }
.thr { width: 100%; min-width: 40rem; height: auto; }

@media (min-width: 62rem) {
  .thr__scroll { overflow: visible; margin-inline: 0; padding-inline: 0; }
  .thr { min-width: 0; }
}

.thr__line { fill: none; stroke: var(--structure); stroke-width: 2.5; }
.thr__line--gap { stroke-dasharray: 20 18; opacity: 0.4; }
.thr__node { fill: var(--structure); }
.thr__node--off { fill: none; stroke: var(--structure-3); stroke-width: 1.5; }
.thr__node--today { fill: none; stroke: var(--structure); stroke-width: 1.5; stroke-dasharray: 2 2; }
.thr__cut { fill: none; stroke: var(--revision); stroke-width: 2.5; }

.thr__cap {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  fill: var(--structure-3);
}

.thr__cap--rev { fill: var(--revision); }

/* ==========================================================================
   ATLAS NODE PAGES
   One page per node. Level is the node's depth, computed at build time, so
   nothing here can disagree with the structure it describes.
   ========================================================================== */

.node-head { padding-block: clamp(var(--s6), 5vw, var(--s7)) clamp(var(--s6), 5vw, var(--s7)); }

/* Breadcrumb -------------------------------------------------------------- */

.crumb {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2);
  margin-bottom: var(--s5);
}

.crumb a {
  color: var(--structure-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.crumb a:hover,
.crumb a:focus-visible { color: var(--structure); border-bottom-color: var(--structural); }

.crumb__sep { color: var(--structure-3); }

/* Identity ---------------------------------------------------------------- */

.node-level {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--structural);
  margin-bottom: var(--s3);
}

.node-title { max-width: 20ch; }

.node-path {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--structure-3);
  margin-top: var(--s5);
  overflow-wrap: anywhere;
}

/* The six fields ---------------------------------------------------------- */

.node-field {
  border-top: 1px solid rgba(16, 24, 32, 0.16);
  padding-top: var(--s4);
  margin-top: var(--s5);
}

.node-field__label {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--night-3);
  margin-bottom: var(--s3);
}

.node-field p { color: var(--night-2); }
.node-field ul { margin: 0; }
.node-field ul li:last-child { margin-bottom: 0; }
.node-field a { text-decoration: underline; text-underline-offset: 3px; }
.node-field strong { color: var(--night); font-weight: 700; }

/* A declared gap. Shown, never hidden and never filled with plausible text. */
.gap {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--night-3);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2) var(--s3);
}

.gap__tag {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--structural);
  border: 1px solid var(--structural);
  padding: 1px 6px;
  flex: none;
}

/* An exclusion whose destination exists nowhere in the atlas. That is a
   finding, so it is marked rather than quietly rendered as prose. */
.unresolved {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--revision);
}

.relation {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--night-3);
}

/* Children ---------------------------------------------------------------- */

.kids { margin-top: var(--s6); display: grid; gap: var(--s3); }

@media (min-width: 52rem) { .kids { grid-template-columns: 1fr 1fr; gap: var(--s4); } }

.kid {
  display: block;
  padding: var(--s4);
  border: 1px solid var(--rule-light);
  text-decoration: none;
}

a.kid:hover, a.kid:focus-visible { border-color: var(--structure-3); }

.kid__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2) var(--s3);
}

.kid__name {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  color: var(--structure);
}

.kid__level {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--structure-3);
}

.kid__def { color: var(--structure-2); font-size: 17px; margin-top: var(--s2); }

.kid__gap {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--structure-3);
  margin-top: var(--s3);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2) var(--s3);
}

/* Rule check -------------------------------------------------------------- */

.checks { margin-top: var(--s6); border-top: 1px solid rgba(16, 24, 32, 0.16); }

.check {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s2);
  padding: var(--s4) 0;
  border-bottom: 1px solid rgba(16, 24, 32, 0.16);
}

@media (min-width: 44rem) {
  .check {
    grid-template-columns: 84px minmax(0, 1fr) 8ch;
    gap: var(--s4);
    align-items: baseline;
  }
}

.check__no {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--night-3);
}

.check__name { font-family: var(--display); font-size: 19px; font-weight: 600; }
.check__detail { color: var(--night-2); font-size: 17px; margin-top: var(--s1); }

.check__state {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.check__state--pass    { color: var(--applied); }
.check__state--warning { color: var(--structural); }
.check__state--fail    { color: var(--revision); }
.check__state--na      { color: var(--night-3); }
.check__state--none    { color: var(--night-3); }

/* ==========================================================================
   ATLAS INDEX
   The nine domains. Not a division — the nine have no parent — so this is a
   list and is styled as one, not as a set of siblings under something.
   ========================================================================== */

.domain-cards { margin-top: var(--s6); display: grid; gap: var(--s3); }

@media (min-width: 52rem) {
  .domain-cards { grid-template-columns: 1fr 1fr; gap: var(--s4); }
}

.dcard {
  display: block;
  padding: var(--s4);
  border: 1px solid rgba(16, 24, 32, 0.16);
  text-decoration: none;
}

a.dcard:hover, a.dcard:focus-visible { border-color: var(--night-3); }

.dcard__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2) var(--s3);
}

.dcard__name {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 600;
  color: var(--night);
}

.dcard__level {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--structural);
}

.dcard__def { color: var(--night-2); font-size: 17px; margin-top: var(--s2); }

.dcard__gap {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--night-3);
  margin-top: var(--s3);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2) var(--s3);
}

.dcard__meta {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--night-3);
  margin-top: var(--s3);
}

/* ==========================================================================
   DOMAIN TREE
   The whole descent below a domain root, on that domain's page only.
   ========================================================================== */

.twigs { margin: 0; }

.twigs--root {
  margin-top: var(--s6);
  border-top: 1px solid var(--rule-light);
}

/* Every level indents by one step and carries a rule down its left edge, so
   the depth of a node is readable without counting. */
.twigs .twigs {
  margin-left: var(--s3);
  padding-left: var(--s3);
  border-left: 1px solid var(--rule-light);
}

.twig { margin: 0; }

.twig__link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2) var(--s3);
  padding: var(--s2) var(--s2) var(--s2) 0;
  text-decoration: none;
  border-bottom: 1px solid var(--rule-light);
}

.twig__link:hover, .twig__link:focus-visible { background: var(--rule-dark); }

.twig__name {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
  color: var(--structure);
}

.twig__level {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--structure-3);
}

/* A node that divides opens. <details> does the work, so this survives
   script-src 'none'. */
.branch { display: block; }

.branch__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2) var(--s3);
  padding: var(--s2) var(--s2) var(--s2) 0;
  border-bottom: 1px solid var(--rule-light);
  cursor: pointer;
  list-style: none;
}

/* Both spellings are needed: WebKit still wants the pseudo-element. */
.branch__head::-webkit-details-marker { display: none; }

/* The marker is drawn here rather than left to the browser, so it is the same
   glyph everywhere and takes the palette. */
.branch__head::before {
  content: "+";
  font-family: var(--mono);
  font-size: 14px;
  color: var(--structural);
  width: 1ch;
  flex: none;
}

.branch[open] > .branch__head::before { content: "\2212"; }

.branch__head:hover, .branch__head:focus-visible { background: var(--rule-dark); }

.branch__count {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--structure-3);
  margin-left: auto;
}

/* The link to the node's own page, kept out of the summary so that opening a
   branch and going to it are two separate controls. */
.branch__self {
  font-family: var(--mono);
  font-size: 12px;
  padding: var(--s2) 0 var(--s2) var(--s4);
}

.branch__self a { color: var(--structure-2); text-decoration: none; border-bottom: 1px solid var(--rule-light); }
.branch__self a:hover, .branch__self a:focus-visible { color: var(--structure); border-bottom-color: var(--structural); }

/* A leaf sits where a branch's marker would be, so the two line up. */
.twig__link { padding-left: calc(1ch + var(--s3)); }

/* ==========================================================================
   DIAGNOSTICS
   One page per entry, plus the index. An outcome is stated in the palette's
   own terms: resolved is Applied Green, unresolved is Revision Magenta, and
   no-issue is neither.
   ========================================================================== */

.outcome {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.outcome--resolved   { color: var(--applied); }
.outcome--unresolved { color: var(--revision); }
.outcome--no-issue   { color: var(--night-3); }

/* On a night field the neutral outcome needs the lighter of the two greys. */
.field--night .outcome--no-issue { color: var(--structure-3); }

.entries { margin-top: var(--s6); display: grid; gap: var(--s3); }

.entry {
  display: block;
  padding: var(--s4);
  border: 1px solid rgba(16, 24, 32, 0.16);
  text-decoration: none;
}

a.entry:hover, a.entry:focus-visible { border-color: var(--night-3); }

.entry__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2) var(--s3);
}

.entry__date {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--night-3);
}

.entry__name {
  display: block;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 600;
  color: var(--night);
  margin-top: var(--s2);
}

.entry__issue { color: var(--night-2); font-size: 17px; margin-top: var(--s2); }

.entry__meta {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--night-3);
  margin-top: var(--s3);
}

/* Account forms ------------------------------------------------------------
   The only pages on the site that take input. No rounded corners, no
   elevation, no gradient — a field is a rule and a box, like everything else.
   -------------------------------------------------------------------------- */

.form { max-width: 26rem; margin-top: var(--s5); }

.form__row { margin-bottom: var(--s4); }

.form__label {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--night-2);
  margin-bottom: var(--s2);
}

.form__input {
  width: 100%;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.5;
  color: var(--night);
  background: var(--structure);
  border: 2px solid var(--night);
  border-radius: 0;
  padding: var(--s3);
}

.form__input:focus-visible {
  outline: 2px solid var(--evidence);
  outline-offset: 2px;
}

.form__input:disabled { color: var(--night-3); }

/* Said under the field it constrains, not after the form has been rejected. */
.form__hint {
  font-size: 15px;
  color: var(--night-2);
  margin-top: var(--s2);
}

.form__button {
  font-family: var(--display);
  font-size: 16px;
  letter-spacing: 0.02em;
  font-weight: 600;
  padding: var(--s3) var(--s4);
  border: 2px solid var(--night);
  border-radius: 0;
  background: var(--night);
  color: var(--paper);
  cursor: pointer;
}

.form__button:hover { background: transparent; color: var(--night); }
.form__button:disabled { opacity: 0.45; cursor: default; }
.form__button:disabled:hover { background: var(--night); color: var(--paper); }

.form__button--quiet { background: transparent; color: var(--night); }
.form__button--quiet:hover { background: var(--night); color: var(--paper); }

/* A single line of state, in the colour that names the kind of work it is:
   Revision Magenta when something must be changed, Applied Green when it
   worked. Empty until there is something true to put in it. */
.form__message {
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.5;
  margin-top: var(--s4);
  padding-left: var(--s3);
  border-left: 2px solid transparent;
}

.form__message:empty { display: none; }
.form__message--error { border-left-color: var(--revision); color: var(--night); }
.form__message--ok { border-left-color: var(--applied); color: var(--night); }
.form__message--working { border-left-color: var(--night-3); color: var(--night-2); }

/* Shown only once the page knows which of the two states it is in, so that a
   signed-out visitor never sees a flash of the signed-in page. */
.js-hidden { display: none; }

/* A proposal is a case and an argument about it. Both want the reading
   measure rather than the 26rem column an email address is comfortable in. */
.form--wide { max-width: 100%; }

textarea.form__input {
  display: block;
  min-height: 7rem;
  resize: vertical;
}

textarea.form__input--tall { min-height: 13rem; }

/* The per-submission anonymity choice. Radios rather than a select, because
   both options have to be readable without opening anything: the choice is
   about what the public sees and is easy to get wrong in a hurry. */
.form__choice {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
}

.form__choice-option {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  font-size: 16px;
  color: var(--night);
}

.form__choice-option input { accent-color: var(--evidence); }

/* The honeypot, from PROPOSALS.md §4. Positioned off-screen rather than
   display:none, because a form-filling script that skips hidden fields is
   exactly the one worth catching. aria-hidden and tabindex keep it away from
   anyone reading the page with a screen reader or a keyboard. */
.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* The count under a bounded field. Turns Revision Magenta once the bound is
   passed, so the form says so before the server does. */
.form__count {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--night-3);
  margin-top: var(--s2);
}

.form__count--over { color: var(--revision); }

/* Review queue --------------------------------------------------------------
   One card per pending proposal. Structural Orange on the left edge, because
   the queue is structural work — deciding what the atlas is, not applying it.
   Nothing here is a rounded card and nothing has a shadow. */

.queue-item {
  border: 1px solid var(--rule-dark);
  border-left: 3px solid var(--structural);
  padding: var(--s5);
  margin-bottom: var(--s6);
}

.queue-item__head { margin-bottom: var(--s5); }

.queue-item__meta {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--night-3);
  margin-bottom: var(--s2);
}

.queue-item__node {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 400;
  word-break: break-word;
}

.queue-panel {
  border-top: 1px solid var(--rule-dark);
  padding-top: var(--s4);
  margin-top: var(--s4);
}

.queue-panel__title {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--night-2);
  margin-bottom: var(--s3);
}

.queue-panel__name { font-weight: 600; margin-bottom: var(--s2); }

/* An empty field is a declared gap and is shown as one, never hidden. */
.queue-panel__gap { color: var(--night-3); font-style: italic; }

.queue-field { margin-top: var(--s4); }

.queue-field__label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--night-3);
  margin-bottom: var(--s2);
}

.queue-field__list { margin: 0 0 0 var(--s4); }
.queue-field__list li { margin-bottom: var(--s2); }

.queue-case { font-size: 18px; }

/* The argument as written. Markdown is not rendered here — turning contributor
   text into markup on the page that decides its fate is not worth the tidiness. */
.queue-body {
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--structure);
  border-left: 2px solid var(--rule-dark);
  padding: var(--s3) var(--s4);
  margin: 0;
}

.queue-facts {
  font-family: var(--mono);
  font-size: 14px;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--s2) var(--s4);
  margin: 0;
}

.queue-facts dt { color: var(--night-3); }
.queue-facts dd { margin: 0; word-break: break-word; }

.queue-decision {
  max-width: 100%;
  border-top: 1px solid var(--rule-dark);
  padding-top: var(--s4);
  margin-top: var(--s5);
}

.queue-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}

/* Decided proposals on a node page ------------------------------------------
   Applied Green for accepted and Revision Magenta for rejected, which is what
   those two colours already name elsewhere: work that landed, and work that
   changed something. A rejection is not a failure state and is not greyed. */

.proposals {
  max-width: var(--reading);
  margin: var(--s6) auto 0;
}

.proposal {
  border-top: 1px solid var(--rule-dark);
  padding: var(--s5) 0 var(--s5) var(--s4);
  border-left: 3px solid var(--night-3);
}

.proposal--accepted { border-left-color: var(--applied); }
.proposal--rejected { border-left-color: var(--revision); }

/* Superseded is not a third verdict — it is a decision that stopped mattering.
   Marked with the neutral rule rather than a signal colour, because none of the
   four kinds of work describes "overtaken". */
.proposal--superseded { border-left-color: var(--night-3); }

.proposal__replaced {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--night-2);
  margin-bottom: var(--s3);
}

.proposal__meta {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--night-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-bottom: var(--s3);
}

.proposal__status { text-transform: uppercase; color: var(--night-2); }

.proposal__case {
  font-size: 19px;
  line-height: 1.5;
  margin-bottom: var(--s3);
}

.proposal__rule {
  display: inline-block;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--night-2);
  border: 1px solid var(--rule-dark);
  padding: var(--s1) var(--s2);
  margin-bottom: var(--s3);
}

/* <details>, so the full argument is on the page without a script and without
   a second page to maintain. */
.proposal__more summary {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--night-2);
  cursor: pointer;
  padding: var(--s2) 0;
}

.proposal__more[open] summary { margin-bottom: var(--s3); }

.proposal__label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--night-3);
  margin: var(--s4) 0 var(--s2);
}

.proposal__body {
  font-size: 16px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.proposal__sources {
  font-size: 15px;
  margin: 0 0 0 var(--s4);
  color: var(--night-2);
}

.proposal__invite {
  margin-top: var(--s6);
  font-family: var(--mono);
  font-size: 15px;
}

/* Proposal types on the form and in the queue -------------------------------- */

.form__choice--stack {
  flex-direction: column;
  gap: var(--s3);
}

/* One proposed component on the subdivide form: the six fields a node carries,
   in a block that can be added and removed. */
.child {
  border: 1px solid var(--rule-dark);
  border-left: 3px solid var(--structural);
  padding: var(--s4);
  margin: 0 0 var(--s4);
}

.child__legend {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--night-2);
  padding: 0 var(--s2);
}

.child .form__row:last-of-type { margin-bottom: var(--s4); }

/* The same block, read-only, in the review queue. */
.queue-child {
  border-left: 2px solid var(--rule-dark);
  padding-left: var(--s4);
  margin-bottom: var(--s4);
}

.queue-child__name { font-weight: 600; margin-bottom: var(--s2); }

/* A comment in the queue. Evidence Blue rather than Structural Orange: a
   comment is a reading of the atlas, not a change to its structure. */
.queue-item--comment { border-left-color: var(--evidence); }

/* The thread on /discuss/ ---------------------------------------------------- */

.comment {
  border-top: 1px solid var(--rule-dark);
  padding: var(--s4) 0;
}

.comment__meta {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--night-3);
  margin-bottom: var(--s2);
}

.comment__body { white-space: pre-wrap; }

.comment__reply {
  font-family: var(--mono);
  font-size: 13px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--night-3);
  color: var(--night-2);
  padding: 0;
  margin-top: var(--s3);
  cursor: pointer;
}

.comment__reply:hover { color: var(--night); border-bottom-color: var(--night); }

/* One level, and the indent says so. There is no third level to style. */
.comment--reply {
  margin: var(--s4) 0 0 var(--s5);
  border-top: 0;
  border-left: 2px solid var(--rule-dark);
  padding: 0 0 0 var(--s4);
}

/* The thread as it is baked into a node page. Night field, so the rules that
   separate comments are the light ones. */
.thread {
  max-width: var(--reading);
  margin: var(--s6) auto 0;
}

.field--night .comment { border-top-color: var(--rule-light); }
.field--night .comment__meta { color: var(--structure-3); }
.field--night .comment--reply { border-left-color: var(--rule-light); }

.comment__title {
  font-weight: 700;
  margin-bottom: var(--s2);
}

.comment__evidence {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--night-3);
  margin-top: var(--s2);
}

.field--night .comment__evidence { color: var(--structure-3); }
.field--night .comment__evidence a { color: var(--structure-2); }

/* Part markers ---------------------------------------------------------------
   The small link beside a section heading on a node page: comment on this
   part, carrying the count when the part has comments. A plain link into
   /discuss/ — the node page runs no script. */

.part-marker {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--night-3);
  text-decoration: none;
  border-bottom: 1px solid var(--night-3);
}

.part-marker:hover { color: var(--night); border-bottom-color: var(--night); }

.field--night .part-marker { color: var(--structure-3); border-bottom-color: var(--structure-3); }
.field--night .part-marker:hover { color: var(--structure); border-bottom-color: var(--structure); }

.node-field__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s3);
}

.node-field__head .node-field__label { margin-bottom: 0; }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
}

/* Discussion grouped by part ------------------------------------------------ */

.discussion__part {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--structure-3);
  max-width: var(--reading);
  margin: var(--s6) auto 0;
}

.thread--part { margin-top: var(--s3); }

/* The node multiselect on /discuss/ ----------------------------------------- */

.node-input {
  display: flex;
  gap: var(--s3);
  margin-bottom: var(--s3);
}

.node-input .form__input { flex: 1; }

.queue-comment-title { font-weight: 700; }

.account-section {
  border-top: 1px solid var(--rule-dark);
  padding-top: var(--s5);
  margin-top: var(--s7);
}

.account-section--grave { border-top-color: var(--revision); }

.account-facts {
  font-family: var(--mono);
  font-size: 14px;
  margin-top: var(--s4);
}

.account-facts div { display: flex; gap: var(--s3); padding: var(--s2) 0; }
.account-facts dt { color: var(--night-3); min-width: 8rem; }
.account-facts dd { margin: 0; color: var(--night); }