/* Datum Atlas — presentation.
   Extends assets/lesson.css (loaded first); only the atlas needs what is here.

   Colour policy: three categorical hues carry the only distinction Datum itself
   makes — deciding (control), doing (data), and the objects you write (resource).
   Your own tools and third parties are deliberately neutral: they are not Datum.
   Both modes validated with the dataviz six checks, all-pairs, before use. Colour
   never carries meaning alone — every node is labelled and every group titled. */

/* Padding counts inside a declared width, not on top of it.
   The stylesheet declares column widths as percentages — `.cdntable th:nth-child(1)
   { width: 14% }` — and under the default `content-box` each cell was 14% *plus* its
   padding, so a four-column table was always wider than it asked to be. That is one
   half of why wide tables crushed rather than fitting (§5 item 26). Measured: 484 of
   5602 boxes change, all of them cells and grid children with a declared width, each
   moving to the size its declaration already said. Scoped to `.atlas` because
   `assets/lesson.css` is shared with the lessons. */
.atlas, .atlas *, .atlas *::before, .atlas *::after { box-sizing: border-box; }

.atlas {
  /* categorical, light */
  --k-control: #2a78d6;
  --k-data: #eb6834;
  --k-resource: #1baf7a;
  --k-surface: #3f3f46;
  --k-external: #8a8a86;

  /* status — fixed, never themed; always paired with an icon and a word */
  --s-critical: #d03b3b;
  --s-serious: #ec835a;
  --s-warning: #fab219;
  --s-good: #0ca30c;

  --card-bg: var(--code-bg);
  --grid-gap: .7rem;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme='light'])) .atlas {
    --k-control: #3987e5;
    --k-data: #d95926;
    --k-resource: #199e70;
    --k-surface: #b4b4ae;
    --k-external: #7a7a75;
  }
}
:root[data-theme='dark'] .atlas {
  --k-control: #3987e5;
  --k-data: #d95926;
  --k-resource: #199e70;
  --k-surface: #b4b4ae;
  --k-external: #7a7a75;
}

/* The atlas needs more room than a lesson's reading measure. */
body.atlas-page { max-width: 76rem; }
.atlas p, .atlas ul, .atlas ol { max-width: var(--measure); }

/* ---- Projection frame --------------------------------------------------- */

.projection[hidden] { display: none; }
.projection > h2 { margin-top: 0; }
.projection .tagline {
  font-family: ui-monospace, monospace; font-size: .80rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0 0 .3rem;
}
.projection .lede {
  font-size: 1.02rem; color: var(--ink-soft); max-width: 42rem; margin-bottom: 2rem;
}

/* ---- Node cards --------------------------------------------------------- */

.node-grid {
  display: grid; gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}
.node {
  border: 1px solid var(--rule); border-left: 3px solid var(--kind-color, var(--ink-faint));
  background: var(--card-bg); padding: .55rem .7rem; border-radius: 3px;
  cursor: pointer; text-align: left; font: inherit; color: inherit;
  display: block; width: 100%; transition: border-color .12s, transform .12s;
}
.node:hover, .node:focus-visible { border-color: var(--ink-soft); transform: translateY(-1px); }
.node:focus-visible { outline: 2px solid var(--k-control); outline-offset: 1px; }
.node .n-label {
  font-family: ui-monospace, monospace; font-size: .86rem; font-weight: 600;
  display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
}
.node .n-role { font-size: .86rem; color: var(--ink-soft); line-height: 1.4; margin-top: .25rem; }
.node .n-api {
  font-family: ui-monospace, monospace; font-size: .72rem; color: var(--ink-faint);
  margin-top: .3rem; word-break: break-all;
}
.node[data-kind='control'] { --kind-color: var(--k-control); }
.node[data-kind='data'] { --kind-color: var(--k-data); }
.node[data-kind='resource'] { --kind-color: var(--k-resource); }
.node[data-kind='surface'] { --kind-color: var(--k-surface); }
.node[data-kind='external'] { --kind-color: var(--k-external); border-left-style: dashed; }

.key { white-space: nowrap; }
.key .swatch {
  display: inline-block; width: .65rem; height: .65rem; border-radius: 2px;
  margin-right: .25rem; vertical-align: -1px;
}

/* ---- Reading order ------------------------------------------------------
   A page reads general to specific by itself: plain language, then a worked
   example, then the mechanisms, with the evidence in the margin beside each
   claim. There is nothing to open and nothing to choose — a reader who has
   what they came for simply stops. */

.rail-controls select {
  font: inherit; font-family: ui-monospace, monospace; font-size: .80rem;
  background: var(--bg); color: var(--ink); border: 1px solid var(--rule);
  border-radius: 3px; padding: .2rem .4rem; cursor: pointer;
}

.plain { max-width: 44rem; margin-bottom: 1.5rem; }
.plain .gist { font-size: 1.02rem; line-height: 1.65; margin-bottom: 1rem; max-width: 42rem; }
.gist-points { list-style: none; padding: 0; margin: 0 0 1.2rem; }
.gist-points li {
  font-size: .98rem; line-height: 1.55; color: var(--ink-soft);
  padding-left: 1.3rem; position: relative; margin-bottom: .55rem;
}
.gist-points li::before {
  content: '—'; position: absolute; left: 0; color: var(--k-control);
}

/* ---- Parallels -----------------------------------------------------------
   The comparison card, between the gist and the points. It carries no category,
   so it takes no categorical hue — it is set apart by shape and by the kicker,
   never by colour, which also keeps it legible in both modes untouched. */

.parallel {
  border: 1px solid var(--rule); border-radius: 4px; background: var(--card-bg);
  padding: .8rem 1rem .85rem; margin: 0 0 1.2rem;
}
.parallel h3 {
  margin: 0 0 .5rem; font-size: 1.0rem; font-weight: 600; line-height: 1.3;
}
.par-kicker {
  display: block; font-family: ui-monospace, monospace; font-size: .70rem;
  font-weight: 400; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: .15rem;
}
.parallel .par-gist { font-size: .96rem; line-height: 1.6; margin: 0 0 .7rem; max-width: none; }

/* The correspondences. Two columns where there is room, stacked where there is not —
   the arrow reads left-to-right at width and top-to-bottom below it. */
.par-map { list-style: none; padding: 0; margin: 0 0 .7rem; max-width: none; }
.par-map li {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: .5rem;
  align-items: baseline; padding: .3rem 0; border-top: 1px solid var(--rule);
  font-size: .90rem; line-height: 1.45;
}
.par-map li:first-child { border-top: 0; }
.par-from { color: var(--ink-soft); }
.par-to { color: var(--ink); }
.par-arrow { color: var(--ink-faint); font-size: .85rem; }
.parallel .par-line { font-size: .90rem; line-height: 1.5; color: var(--ink-soft); margin: .35rem 0 0; max-width: none; }
.parallel .par-line b { color: var(--ink); font-weight: 600; }

@media (max-width: 40rem) {
  .par-map li { grid-template-columns: 1fr; gap: .1rem; }
  .par-arrow { transform: rotate(90deg); width: 1rem; }
}

/* ---- Where one register ends and the next begins -------------------------
   Nothing is hidden any more (decided 2026-07-28). Three things used to sit
   behind a button — the mechanisms, the source citations, the provenance marks
   — and pressing a button to discover whether there is anything worth reading
   is a worse deal for a reader than a longer page. What the depth control was
   really providing was not concealment but *sorting*, and a stated boundary
   provides that without asking for a click: the reader sees the register change,
   knows what the next part is, and stops where they like. */

.stratum-edge {
  display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
  margin: 2.2rem 0 1.1rem; padding-top: .5rem;
  border-top: 1px solid var(--rule);
}
.stratum-edge > span:first-child {
  font-family: ui-monospace, monospace; font-size: .78rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink); font-weight: 600;
}
.stratum-edge .se-sub { font-size: .86rem; color: var(--ink-faint); }

/* ---- Principles --------------------------------------------------------- */

.principles { display: grid; gap: .6rem; }
.principle {
  border: 1px solid var(--rule); border-left: 3px solid var(--k-control);
  border-radius: 3px; padding: .8rem 1rem; background: var(--card-bg);
}
.principle h4 {
  margin: 0 0 .4rem; font-size: 1rem;
  display: flex; align-items: baseline; gap: .5rem;
}
.principle .pnum {
  font-family: ui-monospace, monospace; font-size: .80rem; color: var(--ink-faint);
}
.principle .idea { font-size: .94rem; margin: 0 0 .7rem; max-width: 46rem; }
.pcols { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.pcols p { font-size: .90rem; color: var(--ink-soft); margin: .15rem 0 0; }
.plabel {
  font-family: ui-monospace, monospace; font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-faint);
}
.principle > .ref {
  font-size: .80rem; color: var(--ink-faint); font-style: italic;
  margin: .7rem 0 0; padding-top: .5rem; border-top: 1px solid var(--rule);
}

/* ---- Marks: provenance, coverage, findings ------------------------------ */

/* Anything carrying a gloss invites the pointer and takes focus, so the explanation
   is reachable by hand and by keyboard rather than by guessing that a title exists. */
.mark { cursor: help; }
.mark:focus-visible { outline: 2px solid var(--k-control); outline-offset: 2px; border-radius: 2px; }

.prov {
  font-size: .76rem; color: var(--ink-faint); cursor: help;
  font-family: ui-monospace, monospace;
}
.prov[data-p='live'] { color: var(--s-good); }
.prov[data-p='code'] { color: var(--k-control); }
.prov[data-p='docs'] { color: var(--ink-faint); }
.prov[data-p='infer'] { color: var(--s-warning); }

.cov {
  font-family: ui-monospace, monospace; font-size: .70rem; letter-spacing: .06em;
  text-transform: uppercase; padding: .1rem .3rem; border-radius: 2px;
  border: 1px solid var(--rule); color: var(--ink-faint); white-space: nowrap;
}
.cov.cov-deep { color: var(--s-good); border-color: currentColor; }
.cov.cov-partial { color: var(--s-warning); border-color: currentColor; }
.cov.cov-blocked { color: var(--s-serious); border-color: currentColor; }

.fbadge {
  font-family: ui-monospace, monospace; font-size: .70rem; font-weight: 600;
  padding: .05rem .3rem; border-radius: 2px; white-space: nowrap;
  border: 1px solid currentColor;
}
.fbadge.sev-high { color: var(--s-critical); }
.fbadge.sev-med { color: var(--s-serious); }
.fbadge.sev-low { color: var(--s-warning); }
/* Switching our measurements off has to switch off *everything* that is a measurement.
   Measured 2026-07-28: 85 finding identifiers survived the toggle — in table cells, in
   list items and in paragraphs, wherever `findingRef()` was rendered outside a note — and
   with them the facts that carry them, which are our measurements and not descriptions of
   the product. So "findings off" showed a clean map with 85 defect slugs still in it,
   which is why the audience control looked broken: `learning` did not give what it says. */
body:not(.show-findings) .fbadge,
body:not(.show-findings) .slugref,
body:not(.show-findings) li[data-defect='1'],
body:not(.show-findings) .finding-note { display: none; }
/* A framed card has findings on it, and the frame says which. It used to be
   critical red for every card that carried anything at all — so a naming
   inconsistency framed a card exactly as loudly as lost traffic. */
body.show-findings .node[data-worst='low'] { border-color: var(--s-warning); }
body.show-findings .node[data-worst='med'] { border-color: var(--s-serious); }
body.show-findings .node[data-worst='high'] { border-color: var(--s-critical); }

/* A note takes its accent from the worst thing inside it, rather than from the fact that
   it is a note. It used to be `--s-critical` for every severity, which is the loudest
   possible reading of every measurement we have ever made — and the reason a High finding
   read like a footnote was that a Low one read like an emergency. Rules are ordered
   low → high so the worst reference in a note wins by the cascade. */
.finding-note {
  font-size: .84rem; color: var(--ink-soft); line-height: 1.45;
  border-left: 2px solid var(--s-warning); padding-left: .6rem; margin: .4rem 0;
}
.finding-note:has(.slugref[data-sev='med']) { border-left-color: var(--s-serious); }
.finding-note:has(.slugref[data-sev='high']) { border-left-color: var(--s-critical); }
.finding-note .slug {
  font-family: ui-monospace, monospace; font-size: .76rem; color: var(--ink-faint);
}

/* ---- Column layout (context projection) --------------------------------- */

.flowcols {
  display: grid; gap: .5rem; margin-bottom: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  align-items: start;
}
.flowcol { min-width: 0; }
.flowcol > h3 {
  font-size: .86rem; margin: 0 0 .15rem; text-transform: uppercase;
  letter-spacing: .06em; font-family: ui-monospace, monospace; color: var(--ink);
}
.flowcol > .note {
  font-size: .80rem; color: var(--ink-faint); margin: 0 0 .6rem; font-style: italic;
  min-height: 2.2rem;
}
.flowcol .node-grid { grid-template-columns: 1fr; }
.flowcols .arrow {
  align-self: center; color: var(--ink-faint); font-size: 1.1rem; text-align: center;
}

/* ---- Component groups --------------------------------------------------- */

.cgroup { margin-bottom: 1.8rem; }
.cgroup > h3 { margin: 0 0 .1rem; font-size: 1.02rem; }
.cgroup > .blurb { font-size: .86rem; color: var(--ink-soft); margin: 0 0 .7rem; max-width: 42rem; }

/* ---- Claims ------------------------------------------------------------- */

.claims { margin: 2rem 0 0; border-top: 1px solid var(--rule); padding-top: 1rem; }
.claims > h3 {
  font-family: ui-monospace, monospace; font-size: .76rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0 0 .8rem; font-weight: 400;
}
.claim { font-size: .94rem; margin-bottom: .9rem; max-width: 44rem; }
.claim .ref { font-size: .80rem; color: var(--ink-faint); font-style: italic; }

/* ---- Resource graph ----------------------------------------------------- */

.graph-wrap { overflow-x: auto; margin-bottom: 1.5rem; }
.graph-wrap svg { display: block; min-width: 46rem; height: auto; }
.gnode rect { fill: var(--card-bg); stroke-width: 1; }
.gnode text { font-family: ui-monospace, monospace; font-size: 11px; fill: var(--ink); }
.gnode .sub { font-size: 9px; fill: var(--ink-faint); }
.gnode { cursor: pointer; }
.gnode:hover rect { stroke: var(--ink-soft); stroke-width: 2; }
.gedge { fill: none; stroke: var(--ink-faint); }
.gedge-label { font-family: ui-monospace, monospace; font-size: 9px; fill: var(--ink-faint); }
.gcluster-label {
  font-family: ui-monospace, monospace; font-size: 9px; fill: var(--ink-faint);
  letter-spacing: .08em; text-transform: uppercase;
}
.edgekey { display: grid; gap: .35rem; font-size: .86rem; margin-bottom: 1.5rem; }
.edgekey .k { display: flex; gap: .6rem; align-items: baseline; }
.edgekey .k svg { flex: 0 0 3rem; }
.edgekey .k .lbl { font-family: ui-monospace, monospace; font-size: .80rem; font-weight: 600; }
.edgekey .k .hint { color: var(--ink-soft); }

/* ---- Control-flow chain and timeline ------------------------------------ */

.chain { display: grid; gap: .35rem; margin-bottom: 2.5rem; }
.chain-step {
  display: grid; grid-template-columns: 1.6rem 1fr; gap: .7rem; align-items: start;
  border-left: 2px solid var(--rule); padding: .35rem 0 .35rem .8rem; margin-left: .5rem;
}
.chain-step .idx {
  font-family: ui-monospace, monospace; font-size: .76rem; color: var(--ink-faint);
  padding-top: .1rem;
}
.chain-step .what { font-size: .94rem; font-weight: 600; }
.chain-step .who {
  font-family: ui-monospace, monospace; font-size: .80rem; color: var(--k-control);
}
.chain-step .note { display: block; font-size: .86rem; color: var(--ink-soft); margin-top: .1rem; }

.timeline { margin: 1rem 0 2rem; }
.timeline svg { display: block; width: 100%; height: auto; overflow: visible; }
.tl-axis { stroke: var(--rule); stroke-width: 1; }
.tl-tick { font-family: ui-monospace, monospace; font-size: 10px; fill: var(--ink-faint); }
.tl-dark { fill: var(--s-critical); opacity: .1; }
.tl-dark-label { font-size: 10px; fill: var(--s-critical); font-family: ui-monospace, monospace; }
.tl-mark-label { font-size: 11px; fill: var(--ink); }
.tl-mark-ref { font-size: 9px; fill: var(--ink-faint); }
.tl-caption { font-size: .84rem; color: var(--ink-faint); font-style: italic; }

/* A standing statement, accented by the register it is in — never by the fact that it
   is a card. Every one of these used to be critical red, including "here is what we
   could not find out" and "read the repo to understand the design": the loudest colour
   in the palette, applied to eight different kinds of statement. `measured` also belongs
   to the findings layer, so a card that is really our defect disappears with the rest of
   our measurements instead of standing inside the description of the product. */
.truths { display: grid; gap: 1rem; margin-top: 1.5rem; }
.truth {
  border: 1px solid var(--rule); border-left: 3px solid var(--ink-faint);
  padding: .7rem .9rem; background: var(--card-bg); border-radius: 3px;
}
.truth[data-register='practice'] { border-left-color: var(--k-resource); }
.truth[data-register='unknown'] { border-left-color: var(--s-warning); }
.truth[data-register='measured'] { border-left-color: var(--s-warning); }
.truth[data-register='measured']:has(.slugref[data-sev='med']) { border-left-color: var(--s-serious); }
.truth[data-register='measured']:has(.slugref[data-sev='high']) { border-left-color: var(--s-critical); }
body:not(.show-findings) .truth[data-register='measured'] { display: none; }

/* The measured note inside a design card: the design statement stands on its own, and
   what we saw on one date hangs off it, marked, and goes when the layer goes. */
.truth .tc-measured { margin: .6rem 0 0; }
.truth h4 { margin: 0 0 .3rem; font-size: .98rem; }
.truth p { font-size: .90rem; color: var(--ink-soft); margin: 0; max-width: 44rem; }
.truth .ref { font-size: .80rem; color: var(--ink-faint); font-style: italic; margin-top: .35rem; display: block; }

/* ---- Data path ---------------------------------------------------------- */

.stations { display: grid; gap: .5rem; margin-bottom: 1.5rem; }
.station {
  border: 1px solid var(--rule); border-left: 3px solid var(--k-data);
  border-radius: 3px; padding: .7rem .9rem; background: var(--card-bg);
}
.station h4 { margin: 0; font-size: .98rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.station .body { font-size: .90rem; color: var(--ink-soft); margin: .3rem 0 .5rem; max-width: 46rem; }
.factlist { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem; }
.factlist li {
  font-size: .86rem; display: grid; grid-template-columns: 1rem 1fr; gap: .4rem;
  align-items: baseline; margin: 0;
}
.factlist .bullet { color: var(--ink-faint); }
.factlist li[data-defect='1'] .bullet { color: var(--s-critical); }
.forks { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); margin-bottom: 1.5rem; }
.fork { border: 1px solid var(--rule); border-radius: 3px; padding: .7rem .9rem; background: var(--card-bg); }
.fork h4 { margin: 0 0 .3rem; font-size: .94rem; }
.fork .body { font-size: .86rem; color: var(--ink-soft); margin: 0 0 .5rem; }

/* ---- Deployment --------------------------------------------------------- */

.tier {
  border: 1px solid var(--rule); border-radius: 3px; padding: .9rem 1rem;
  margin-bottom: .6rem; background: var(--card-bg);
}
.tier h4 { margin: 0 0 .3rem; font-size: 1.02rem; display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.tier .body { font-size: .90rem; color: var(--ink-soft); margin: 0 0 .7rem; max-width: 46rem; }
.tier .ref { font-family: ui-monospace, monospace; font-size: .76rem; color: var(--ink-faint); }
.tieritems { display: flex; flex-wrap: wrap; gap: .4rem; }
.tieritem {
  border: 1px solid var(--rule); border-radius: 3px; padding: .3rem .55rem;
  background: var(--bg); font-size: .84rem;
}
.tieritem .l { font-family: ui-monospace, monospace; font-weight: 600; font-size: .80rem; }
.tieritem .s { color: var(--ink-faint); font-size: .76rem; }
.regiongrid {
  display: grid; gap: .3rem; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
}
.region {
  font-family: ui-monospace, monospace; font-size: .80rem;
  border: 1px solid var(--rule); border-radius: 2px; padding: .25rem .45rem;
  background: var(--bg); color: var(--ink-soft); text-align: center;
}
.region.served { border-color: var(--k-data); color: var(--ink); font-weight: 600; }

/* ---- Security ----------------------------------------------------------- */

.seclayer {
  border: 1px solid var(--rule); border-radius: 3px; padding: .8rem 1rem;
  margin-bottom: .5rem; background: var(--card-bg);
  border-left: 3px solid var(--k-control);
}
.seclayer h4 { margin: 0; font-size: 1.02rem; }
.seclayer .owner {
  font-family: ui-monospace, monospace; font-size: .76rem; color: var(--ink-faint);
  margin: .1rem 0 .6rem;
}

/* ---- Interfaces matrix --------------------------------------------------
 * Space follows the words, and it has to be told twice.
 *
 * Measured 2026-07-28: the column holding two words of identifier took 504 px
 * of 1260 and the column holding a paragraph took 348. Automatic table layout
 * *is* content-driven — that is the whole of its job — but it obeys the widest
 * thing that cannot be broken before it considers anything that can, and this
 * table handed it `white-space: nowrap` on a monospace repository path. Its
 * minimum width was 373 px; the prose column's was 134. The layout was doing
 * exactly what it was told.
 *
 * So: let the identifier wrap — it is a path, and a path may break — and then
 * hand the distribution back to the browser. Hand-set percentages were tried
 * and measured against the alternative, and they were *worse*: against a text
 * share of 14/24/11/51 per cent, hand-set columns gave 22/26/12/40 and plain
 * automatic layout gave 14/31/13/42. There is nothing to declare here. The
 * flexible thing was available the whole time and one `nowrap` was overriding it.
 */

.matrix { width: 100%; font-size: .90rem; }
.matrix td { vertical-align: top; padding: .6rem .8rem .6rem 0; }
.matrix .surface-cell {
  font-family: ui-monospace, monospace; font-weight: 600;
  overflow-wrap: anywhere;
}

/* ---- Channels ----------------------------------------------------------- */

.channels { display: grid; gap: .6rem; margin-bottom: 2rem; }
.channel {
  border: 1px solid var(--rule); border-radius: 3px; padding: .8rem 1rem;
  background: var(--card-bg); border-left: 3px solid var(--ink-faint);
}
.channel[data-dir='down'] { border-left-color: var(--k-control); }
.channel[data-dir='up'] { border-left-color: var(--k-resource); }
.channel[data-dir='lateral'] { border-left-color: var(--k-data); }
.channel[data-dir='out'] { border-left-color: var(--k-external); }
.channel h4 {
  margin: 0 0 .5rem; font-size: 1.02rem;
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
}
.channel h4 .dir {
  font-family: ui-monospace, monospace; font-size: .76rem; letter-spacing: .06em;
  color: var(--ink-faint); margin-left: auto;
}
.chain-chips {
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem;
  margin-bottom: .7rem;
}
.chain-chips .sep { color: var(--ink-faint); font-size: .82rem; }
.chip {
  font: inherit; font-family: ui-monospace, monospace; font-size: .76rem;
  border: 1px solid var(--rule); border-bottom-width: 2px;
  border-bottom-color: var(--kind-color, var(--ink-faint));
  background: var(--bg); color: var(--ink); border-radius: 3px;
  padding: .18rem .45rem; cursor: pointer; white-space: nowrap;
}
.chip:hover { border-color: var(--ink-soft); border-bottom-color: var(--kind-color, var(--ink-soft)); }
.chip[data-kind='control'] { --kind-color: var(--k-control); }
.chip[data-kind='data'] { --kind-color: var(--k-data); }
.chip[data-kind='resource'] { --kind-color: var(--k-resource); }
.chip[data-kind='surface'] { --kind-color: var(--k-surface); }
.chip[data-kind='external'] { --kind-color: var(--k-external); }
.chspec { margin: 0 0 .5rem; font-size: .90rem; display: grid; grid-template-columns: 6.5rem 1fr; gap: .15rem .8rem; }
.chspec dt {
  font-family: ui-monospace, monospace; font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint); padding-top: .15rem;
}
.chspec dd { margin: 0; color: var(--ink-soft); }
.chspec dd.mono { font-family: ui-monospace, monospace; font-size: .76rem; word-break: break-word; }
@media (max-width: 640px) {
  .chspec { grid-template-columns: 1fr; }
  .chspec dt { padding-top: .5rem; }
}

/* ---- PoP ---------------------------------------------------------------- */

.popbox {
  border: 2px dashed var(--rule); border-radius: 4px; padding: 1rem 1.1rem;
  margin: 1.5rem 0; background: var(--card-bg);
}
.popbox > h4 { margin: 0 0 .2rem; font-size: 1rem; }
.popbox > .body { font-size: .90rem; color: var(--ink-soft); margin: 0 0 .8rem; max-width: 46rem; }

/* ---- Data / Limits / Operating ------------------------------------------ */

.datakinds { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); }
.datakind {
  border: 1px solid var(--rule); border-left: 3px solid var(--k-resource);
  border-radius: 3px; padding: .75rem .9rem; background: var(--card-bg);
}
.datakind.flagged { border-left-color: var(--s-warning); }
.datakind h4 { margin: 0 0 .5rem; font-size: .98rem; display: flex; gap: .4rem; align-items: baseline; }

.limval {
  font-family: ui-monospace, monospace; font-size: .86rem; font-weight: 600;
  color: var(--ink);
}

.opcols { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.opcol > h3 { margin-top: 0; }

/* ---- Technology register ------------------------------------------------ */

.techgrid { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr)); }
.techcard {
  border: 1px solid var(--rule); border-left: 3px solid var(--k-surface);
  border-radius: 3px; padding: .7rem .9rem; background: var(--card-bg);
}
.techcard h4 { margin: 0 0 .35rem; font-size: .98rem; display: flex; gap: .4rem; align-items: baseline; flex-wrap: wrap; }
.techcard h4 a { text-decoration: none; }
.techcard h4 a:hover { text-decoration: underline; }
.techver {
  font-family: ui-monospace, monospace; font-size: .72rem; color: var(--ink-faint);
  border: 1px solid var(--rule); border-radius: 2px; padding: .05rem .3rem;
}
.techcard .what { font-size: .90rem; margin: 0 0 .45rem; color: var(--ink); }
.techcard .role { font-size: .90rem; margin: 0; color: var(--ink-soft); }
.techcard .role .plabel { display: block; margin-bottom: .1rem; }
.techcard .seen { font-size: .84rem; color: var(--ink-faint); font-style: italic; margin: .4rem 0 0; }
.techcard .doclink { margin: .45rem 0 0; font-size: .80rem; }

.techlinks { display: flex; flex-wrap: wrap; gap: .3rem; margin: .3rem 0 .8rem; }
.techchip {
  font-family: ui-monospace, monospace; font-size: .76rem; text-decoration: none;
  border: 1px solid var(--rule); border-radius: 3px; padding: .15rem .4rem;
  background: var(--code-bg); color: var(--link);
}
.techchip:hover { border-color: var(--link); color: var(--accent); }

.cdntable td { font-size: .86rem; vertical-align: top; }
.cdntable .cdn-col { color: var(--ink-faint); }
.cdntable .cost-col { color: var(--ink); }
/* No declared column widths here either, for the reason measured on the interfaces
   matrix: against a text share of 8/24/38/30 per cent, the hand-set columns gave
   14/26/30/30 and automatic layout gave 13/26/36/25. The browser was closer both
   times, and it stays closer when the content changes. */

/* ---- Worked examples -----------------------------------------------------
   Prose and machine-readable text must never look the same. `code` marks an
   identifier inline; a figure marks a whole example, with its language named. */

.examples { margin: 2rem 0; }
.example {
  margin: 0 0 1.4rem; border: 1px solid var(--rule); border-radius: 4px;
  background: var(--card-bg); overflow: hidden; max-width: 58rem;
}
.example figcaption {
  font-size: .95rem; font-weight: 600; padding: .55rem .9rem;
  border-bottom: 1px solid var(--rule); background: var(--bg);
}

/* What the example is for, said before the code rather than inferred from it. */
.exgoal {
  font-size: .88rem; color: var(--ink-soft); margin: 0; max-width: none;
  padding: .5rem .9rem; border-bottom: 1px solid var(--rule); background: var(--bg);
}
/* The kicker only. `.exgoal > span` also matched every glossed term in the sentence —
   a term is a span and it is a direct child — so "backend" came out in small monospace
   capitals. The same shape of over-reach as the `data-view` bug: name the thing you mean. */
.exgoal-k {
  font-family: ui-monospace, monospace; font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); margin-right: .6rem;
}

/* Request and response as their own panes, the way an API console shows them: a
   labelled strip, the status where there is one, and the language named. */
.expane + .expane { border-top: 1px solid var(--rule); }
.expane-head {
  display: flex; align-items: baseline; gap: .7rem;
  padding: .4rem .9rem .15rem;
}
.expane-label {
  font-family: ui-monospace, monospace; font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint);
}
.expane[data-kind='response'] .expane-label { color: var(--ink-soft); }
.expane-head .lang {
  font-family: ui-monospace, monospace; font-size: .66rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-faint); margin-left: auto;
}
.status {
  font-family: ui-monospace, monospace; font-size: .70rem; font-weight: 600;
  border: 1px solid currentColor; border-radius: 3px; padding: .02rem .35rem;
  white-space: nowrap;
}
.status.st-2xx { color: var(--s-good); }
.status.st-3xx { color: var(--k-control); }
.status.st-4xx { color: var(--s-warning); }
.status.st-5xx { color: var(--s-critical); }
.status.st-other { color: var(--ink-faint); }

.example pre { margin: 0; border: 0; border-radius: 0; background: var(--card-bg); font-size: .84rem; }
.example .exnote {
  font-size: .88rem; color: var(--ink-soft); margin: 0;
  padding: .6rem .9rem; border-top: 1px solid var(--rule); max-width: none;
}
/* Highlight tokens — weight and hue, never hue alone. */
.example .k { color: var(--k-control); font-weight: 600; font-style: normal; }
.example .c { color: var(--ink-faint); font-style: italic; }
.example .pr { color: var(--ink-faint); user-select: none; }
.example .var { color: var(--k-data); }
.example .hh { color: var(--k-resource); }
.example .str { color: var(--k-data); }
.example .num, .example .lit { color: var(--k-resource); font-weight: 600; }
.example .st { font-weight: 700; font-style: normal; }
.example .st-2xx, .example .st-200, .example .st-201, .example .st-204 { color: var(--s-good); }
.example .st-400, .example .st-403, .example .st-404, .example .st-409, .example .st-422 { color: var(--s-warning); }
.example .st-500, .example .st-502, .example .st-503, .example .st-504 { color: var(--s-critical); }

/* Inline code inside prose: distinct from the prose, quieter than a heading. */
.atlas .n-role code, .atlas .claim code, .atlas p code, .atlas li code,
.atlas dd code, .atlas .idea code, .atlas .gist code {
  font-size: .82em; background: var(--code-bg); border: 1px solid var(--rule);
  border-radius: 3px; padding: .05em .3em;
}

/* ---- Detail drawer ------------------------------------------------------ */

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(26rem, 92vw);
  background: var(--bg); border-left: 1px solid var(--rule);
  box-shadow: -8px 0 24px rgba(0, 0, 0, .12);
  padding: 1.5rem 1.4rem 3rem; overflow-y: auto; z-index: 60;
  transform: translateX(100%); transition: transform .16s ease-out;
}
.drawer[data-open='1'] { transform: translateX(0); }
.drawer h3 { margin: 0 0 .2rem; font-size: 1.1rem; font-family: ui-monospace, monospace; }
/* A heading that is a sentence rather than a name — a finding's title. Monospace at 1.1rem
   over thirteen words in a 26 rem drawer is a wall; the body face is what prose is set in
   everywhere else on the page. */
.drawer h3.d-prose { font-family: inherit; font-size: 1.06rem; line-height: 1.35; }
.drawer .d-kind {
  font-family: ui-monospace, monospace; font-size: .76rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 1rem;
}
.drawer .d-role { font-size: .98rem; margin-bottom: .8rem; }
.drawer .d-detail { font-size: .94rem; color: var(--ink-soft); margin-bottom: 1rem; }
.drawer dl { font-size: .86rem; margin: 0 0 1rem; }
.drawer dt {
  font-family: ui-monospace, monospace; font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint); margin-top: .7rem;
}
.drawer dd { margin: .15rem 0 0; color: var(--ink-soft); word-break: break-word; }
/* The evidence block — a record's Reproduce / Expected / Actual, rendered where a reader
   meets the finding. It is a document inside a 26 rem column, so everything wide gets its
   own scroll box rather than dragging the panel sideways. */
.drawer .d-evidence { font-size: .94rem; line-height: 1.5; margin: 0 0 1rem; }
.drawer .d-evidence p { margin: 0 0 .5rem; }
.drawer .d-evidence .mdlist { margin: 0 0 .6rem; padding-left: 1.1rem; }
.drawer .d-evidence .mdlist li { margin-bottom: .3rem; }
.drawer .d-evidence .mdquote {
  margin: 0 0 .6rem; padding-left: .8rem; border-left: 2px solid var(--rule); color: var(--ink-soft);
}
.drawer .mdcode {
  margin: 0 0 .7rem; padding: .6rem .7rem; overflow-x: auto;
  background: var(--code-bg); border: 1px solid var(--rule); border-radius: 4px;
  font-size: .80rem; line-height: 1.45;
}
.drawer .mdscroll { overflow-x: auto; margin: 0 0 .7rem; }
.drawer .mdtable { border-collapse: collapse; font-size: .84rem; }
.drawer .mdtable th, .drawer .mdtable td {
  border-bottom: 1px solid var(--rule); padding: .3rem .5rem; text-align: left; vertical-align: top;
}
.drawer .mdtable th { color: var(--ink-faint); font-weight: 600; white-space: nowrap; }

/* How strong the evidence is, which is the part of `test:` that travels. Never colour alone:
   the heading says it in words and the accent only reinforces. */
.d-test { border-left: 3px solid var(--rule); padding: .1rem 0 .1rem .7rem; margin: 0 0 1rem; }
.d-test[data-kind='direct'] { border-left-color: var(--k-control); }
.d-test[data-kind='none'] { border-left-color: var(--ink-faint); }
.d-test .dt-h {
  margin: 0; font-family: ui-monospace, monospace; font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint);
}
.d-test .dt-s { margin: .2rem 0 0; font-size: .88rem; color: var(--ink-soft); line-height: 1.45; }
.d-test .dt-r { margin: .3rem 0 0; font-size: .84rem; color: var(--ink-faint); line-height: 1.45; }
.d-test .dt-p { margin: .25rem 0 0; font-size: .76rem; color: var(--ink-faint); word-break: break-all; }

.drawer-close {
  position: absolute; top: .8rem; right: .9rem; background: none; border: none;
  font: inherit; font-size: 1.3rem; color: var(--ink-faint); cursor: pointer; line-height: 1;
}
.drawer-close:hover { color: var(--ink); }
.scrim {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .25); z-index: 50;
  opacity: 0; pointer-events: none; transition: opacity .16s;
}
.scrim[data-open='1'] { opacity: 1; pointer-events: auto; }

/* ---- Print -------------------------------------------------------------- */

@media print {
  .rail, .drawer, .scrim, .place, .skiplink, .rail-grip, .rail-results,
  .rail-toggle, .termpop { display: none !important; }
  .projection[hidden] { display: block !important; }
  .projection { break-before: page; }
  .node, .station, .tier, .seclayer, .truth, .parallel { break-inside: avoid; }
  body.atlas-page { max-width: none; }
  /* The shell is a two-column grid whose first column is the rail. Hiding the rail does
     not give its width back — the content stayed in a 17 rem column and printed as a
     ribbon down the left of every page, which is what a print that had never been looked
     at looks like. On paper there is no rail, so there is no grid. */
  .atlas-shell { display: block; }
  .atlas .content table { width: 100%; }
}


/* ---- Audience profiles ------------------------------------------------
 * A filter over one body of data, never a second copy (invariant B5).
 *
 * The profile hides almost nothing, and that is a finding rather than an
 * omission: the neutrality pass of 2026-07-27 removed the internal-process
 * voice, so a scan of every rendered string found one block addressed to us
 * — the pointer to working notes a reader outside the team cannot open.
 * Building a general hiding layer for one block would be infrastructure for
 * a case that does not exist.
 */
body[data-profile="datum"] [data-profile="internal"],
body[data-profile="learning"] [data-profile="internal"] { display: none; }


/* ---- Term glosses -----------------------------------------------------
 * Explaining a term where it stands, rather than in a glossary the reader
 * has to leave the page to reach. The registry is generated from
 * CONTEXT.md; nothing about the vocabulary is decided here.
 *
 * The mark has to be quiet. It appears on about a hundred surfaces across
 * the page, so anything with colour or weight would read as emphasis and
 * fight the provenance marks, which genuinely are emphasis. A dotted rule
 * in the faint ink is the convention, and it survives both themes.
 */
.term {
  border-bottom: 1px dotted var(--ink-faint);
  cursor: help;
}
.term:hover,
.term:focus-visible {
  border-bottom-style: solid;
  border-bottom-color: var(--link);
  outline: none;
}
.term:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
  border-radius: 2px;
}
/* Inside code, the underline would read as part of the identifier. */
code .term { border-bottom-color: transparent; text-decoration: underline dotted var(--ink-faint); }
code .term:hover, code .term:focus-visible { text-decoration-color: var(--link); }

.termpop {
  position: absolute;
  z-index: 60;
  max-width: min(30rem, calc(100vw - 2rem));
  padding: .7rem .9rem .75rem;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--link);
  border-radius: 3px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
  font-family: inherit;
  font-size: .94rem;
  line-height: 1.5;
  color: var(--ink);
}
.termpop[hidden] { display: none; }
.termpop p { margin: 0 0 .45rem; }
.termpop p:last-child { margin-bottom: 0; }

.termpop-title {
  font-weight: 600;
  font-size: .90rem;
  display: flex; gap: .6rem; align-items: baseline; justify-content: space-between;
}
.termpop-section {
  font-family: ui-monospace, monospace;
  font-size: .70rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 400; white-space: nowrap;
}
/* The plain gloss is the point of the popup; the precise text is for the
   reader who wants it, so it recedes rather than competing. */
.termpop-plain { font-size: .98rem; }
.termpop-precise {
  font-size: .86rem; color: var(--ink-soft);
  border-top: 1px dotted var(--rule); padding-top: .45rem;
}
.termpop-avoid { font-size: .84rem; color: var(--ink-faint); font-style: italic; }

@media print { .term { border-bottom: none; } .termpop { display: none !important; } }


/* ---- A found defect, beside an idea rather than inside it ---------------
 * The plain layer describes the system as designed. Where we measured a
 * defect or a gap, it hangs off the point as its own marked line — never
 * inside the sentence, because a sentence that carries both stops being a
 * description of the product and becomes a description of our findings.
 * It inherits .finding-note, so the findings toggle hides it with the rest.
 */
.gist-points .point-note {
  display: block;
  margin: .3rem 0 .6rem;
  font-size: .86rem;
}
.gist-points .point-note::before {
  content: "what we measured";
  display: block;
  font-family: ui-monospace, monospace;
  font-size: .70rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: .15rem;
}

/* A cause that is not Datum's, beside the measurement rather than inside the findings
   toggle's opposite: it belongs to the finding, so it goes when the finding goes. Quiet,
   because it is a qualification and not a headline. */
.point-upstream {
  display: block; margin: .35rem 0 0; font-size: .84rem;
  color: var(--ink-soft); padding-left: .8rem; border-left: 2px solid var(--k-external);
}
.point-upstream::before {
  content: "the cause is not Datum's";
  display: block; font-family: ui-monospace, monospace; font-size: .66rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: .1rem;
}
.upmark { color: var(--k-external); margin-left: .3rem; font-size: .82rem; }

/* Declared direction — what Datum says it is building. A third register,
   distinct from the design as it stands and from what we measured, and
   deliberately NOT inside the findings layer: it survives the toggle. */
/* Bright, because a reader must not meet the gap without the intent. Its own
   colour, its own label, and deliberately outside the findings layer so hiding
   our measurements never hides what Datum has said it is building. */
.gist-points .point-planned {
  display: block;
  margin: .4rem 0 .6rem;
  font-size: .86rem;
  color: var(--ink);
  background: color-mix(in srgb, var(--k-resource) 8%, transparent);
  border-left: 3px solid var(--k-resource);
  border-radius: 0 3px 3px 0;
  padding: .45rem .7rem;
}
.gist-points .point-planned .srclink { word-break: break-word; }
.gist-points .point-planned::before {
  content: "Datum has published a design for this — not built yet";
  display: block;
  font-family: ui-monospace, monospace;
  font-size: .70rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--k-resource);
  margin-bottom: .25rem;
}


/* ==== The shell: a rail you navigate from, and the rest of the window ======
 *
 * The previous layout was a strip of seventeen equal tabs over a 608 px ribbon of
 * prose inside a 1216 px container: half the window unused, no structure in the
 * navigation, and nothing on screen saying where you were once you scrolled. The
 * rail carries structure, search and notation and stays put; the content column
 * takes everything else, so tables, diagrams and examples get the width they need
 * while prose keeps a measure you can actually read.
 */

body.atlas-page { max-width: 96rem; }

.skiplink {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--bg); color: var(--link);
  border: 1px solid var(--rule); border-radius: 3px; padding: .5rem .8rem;
}
.skiplink:focus { left: .5rem; top: .5rem; }

/* Announced, never shown. Clipped rather than `display: none`, which would take it out of
   the accessibility tree and silence the announcement it exists to make. */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  border: 0;
}

/* The rail's width is the reader's, not the designer's: dragging sets it and it
   is remembered. Collapsing it hands the whole window to the content, which is
   what someone reading at a comfortable zoom actually wants. */
.atlas-shell {
  display: grid;
  grid-template-columns: var(--rail-w, 17rem) minmax(0, 1fr);
  gap: 2.4rem;
  align-items: start;
  position: relative;
}
/* One column when collapsed, not a zero-width first one: hiding the rail takes it
   out of the grid entirely, so the content would inherit the 0 track and vanish.
   Measured, not guessed — the content really was 0 px wide. */
body[data-rail='collapsed'] .atlas-shell { grid-template-columns: minmax(0, 1fr); gap: 0; }
body[data-rail='collapsed'] .rail { display: none; }
body[data-rail='collapsed'] .content { padding-left: 2.2rem; }

.rail-toggle {
  position: fixed; left: .4rem; top: .4rem; z-index: 45;
  font: inherit; font-size: .86rem; line-height: 1;
  background: var(--bg); color: var(--ink-soft);
  border: 1px solid var(--rule); border-radius: 3px;
  padding: .3rem .5rem; cursor: pointer;
}
.rail-toggle:hover { color: var(--ink); border-color: var(--link); }
.rail-toggle:focus-visible { outline: 2px solid var(--k-control); outline-offset: 1px; }
body[data-rail='collapsed'] .rail-toggle::after { content: ''; }

.rail-grip {
  position: absolute; top: 0; right: -.9rem; width: .9rem; height: 100%;
  cursor: col-resize; background: none;
}
.rail-grip:hover, .rail-grip:focus-visible { background: linear-gradient(to right, transparent, var(--rule)); outline: none; }
body.rail-resizing { cursor: col-resize; user-select: none; }
.content { min-width: 0; }
.atlas .content p, .atlas .content ul, .atlas .content ol { max-width: 44rem; }
/* Tables, figures and diagrams are the reason for the extra width — they opt out. */
.atlas .content table, .atlas .content figure, .atlas .content .node-grid { max-width: none; }

/* ---- Rail --------------------------------------------------------------- */

.rail {
  position: relative;
  position: sticky; top: .5rem;
  max-height: calc(100vh - 1rem);
  overflow-y: auto; overscroll-behavior: contain;
  font-size: .90rem;
  padding-right: .4rem;
  border-right: 1px solid var(--rule);
}
.rail-label {
  font-family: ui-monospace, monospace; font-size: .70rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0 0 .3rem;
}

.rail-search { position: relative; margin-bottom: 1.2rem; }
.rail-search input {
  width: 100%; font: inherit; font-size: .90rem;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 3px; padding: .45rem .6rem;
}
.rail-search input:focus { outline: 2px solid var(--k-control); outline-offset: 1px; border-color: var(--k-control); }
.rail-results {
  position: absolute; left: 0; right: 0; top: calc(100% + .3rem); z-index: 50;
  background: var(--bg); border: 1px solid var(--rule); border-radius: 3px;
  box-shadow: 0 8px 28px rgba(0,0,0,.2);
  max-height: 60vh; overflow-y: auto;
}
.result {
  display: block; width: 100%; text-align: left; font: inherit;
  background: none; border: 0; border-bottom: 1px solid var(--rule);
  padding: .45rem .6rem; cursor: pointer; color: var(--ink);
}
.result:last-child { border-bottom: 0; }
.result:hover, .result:focus-visible { background: var(--code-bg); outline: none; }
.result .rkind {
  font-family: ui-monospace, monospace; font-size: .70rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-faint); display: block;
}
.result .rlabel { font-weight: 600; font-size: .90rem; display: block; }
.result .rsub { font-size: .80rem; color: var(--ink-soft); display: block; line-height: 1.35; }

.rail-group { margin-bottom: 1.1rem; }
.rail-gtitle {
  font-size: .84rem; font-weight: 700; margin: 0 0 .1rem;
  letter-spacing: .02em;
}
.rail-why { font-size: .80rem; color: var(--ink-faint); margin: 0 0 .4rem; line-height: 1.4; }
.rail-group ul { list-style: none; margin: 0; padding: 0; }
.rail-item {
  display: grid; grid-template-columns: 1.4rem 1fr; gap: 0 .3rem;
  text-decoration: none; color: var(--ink-soft);
  padding: .28rem .4rem; border-radius: 3px;
  border-left: 2px solid transparent;
}
.rail-item:hover { background: var(--code-bg); color: var(--ink); }
.rail-item:focus-visible { outline: 2px solid var(--k-control); outline-offset: 1px; }
.rail-item[aria-current='page'] {
  background: var(--code-bg); border-left-color: var(--k-control); color: var(--ink);
}
.rail-item .num { font-family: ui-monospace, monospace; font-size: .76rem; color: var(--ink-faint); }
.rail-item .t { font-size: .90rem; font-weight: 500; }
.rail-item[aria-current='page'] .t { font-weight: 700; }
.rail-item .sub { grid-column: 2; font-size: .76rem; color: var(--ink-faint); line-height: 1.3; }

.rail-controls {
  border-top: 1px solid var(--rule); padding-top: .8rem; margin-top: .4rem;
  display: flex; flex-direction: column; gap: .3rem;
}
.rail-controls select { width: 100%; }
.rail-controls select:focus-visible { outline: 2px solid var(--k-control); outline-offset: 1px; }
.rail-controls .atlas-toggle { margin-top: .3rem; }
.atlas-toggle {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: ui-monospace, monospace; font-size: .80rem;
  color: var(--ink-soft); cursor: pointer; user-select: none;
}
.atlas-toggle input { accent-color: var(--k-control); margin: 0; }

.profile-says {
  font-size: .76rem; line-height: 1.4; color: var(--ink-faint);
  margin: .25rem 0 .5rem; max-width: none;
}

.rail-legend {
  border-top: 1px solid var(--rule); padding-top: .8rem; margin-top: 1rem;
  display: flex; flex-direction: column; gap: .22rem;
  font-size: .80rem; color: var(--ink-soft);
}
/* A key row is a mark and a phrase, and the phrase wraps. `align-items: center`
   centred the mark against the whole wrapped block, which put it half a line low
   and left the text climbing over it — visible the moment a row ran to two lines.
   A grid with the mark in its own column, aligned to the first line, cannot do that. */
.rail-legend .item {
  display: grid; grid-template-columns: auto 1fr; gap: .1rem .4rem;
  align-items: start; line-height: 1.35;
}
.rail-legend .item > :first-child { justify-self: start; }
.rail-legend .item .term { cursor: default; }
.rail-legend .swatch {
  display: inline-block; width: .7rem; height: .7rem; border-radius: 2px;
  margin-right: .35rem; vertical-align: -1px;
}
.rail-foot { margin: .7rem 0 0; font-size: .80rem; }

/* ---- Sense of place ------------------------------------------------------
   Scrolled into the middle of a projection, nothing used to say which one it
   was. This line does, and it carries the reading order with it. */

.place {
  position: sticky; top: 0; z-index: 30;
  background: var(--bg); border-bottom: 1px solid var(--rule);
  padding: .55rem 0 .5rem; margin-bottom: 1.4rem;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .55rem;
  font-size: .86rem;
}
.place .pg { font-family: ui-monospace, monospace; font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-faint); }
.place .sep { color: var(--ink-faint); }
.place .pn { font-family: ui-monospace, monospace; font-size: .72rem; color: var(--ink-faint); }
.place .pt { font-weight: 700; font-size: .98rem; }
.place .pd { color: var(--ink-soft); font-size: .86rem; }
.place .pnav { margin-left: auto; display: flex; gap: .9rem; white-space: nowrap; }
.place .pnav a { font-size: .84rem; }

/* ---- Onward links in the side panel -------------------------------------- */

.d-eyebrow {
  font-family: ui-monospace, monospace; font-size: .70rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0 0 .2rem;
}
.d-sec {
  font-family: ui-monospace, monospace; font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-faint);
  margin: 1.1rem 0 .35rem; border-top: 1px solid var(--rule); padding-top: .7rem;
}
.d-links { display: flex; flex-wrap: wrap; gap: .3rem .7rem; font-size: .86rem; margin: 0; }
.d-finding {
  display: block; width: 100%; text-align: left; font: inherit;
  background: var(--code-bg); border: 1px solid var(--rule); border-radius: 3px;
  padding: .5rem .6rem; margin-bottom: .4rem; cursor: pointer; color: var(--ink);
}
.d-finding:hover { border-color: var(--link); }
.d-finding:focus-visible { outline: 2px solid var(--k-control); outline-offset: 1px; }
.d-finding .d-short { display: block; font-size: .84rem; color: var(--ink-soft); margin-top: .25rem; }

/* A finding identifier is what everything else keys on, so it is a control, not
   a label — clickable wherever it appears. */
.slugref {
  font: inherit; font-family: ui-monospace, monospace; font-size: .76rem;
  background: none; border: 0; border-bottom: 1px dotted var(--ink-faint);
  padding: 0; cursor: pointer; color: var(--ink-faint);
}
.slugref:hover { color: var(--link); border-bottom-color: var(--link); }
.slugref:focus-visible { outline: 2px solid var(--k-control); outline-offset: 2px; }

/* How much this one matters, in the word the registry uses. Colour never says it alone:
   the word is the signal and the hue reinforces it, which is also why "Low–Medium" is
   printed as written rather than flattened into one of three buckets. */
.sevword {
  font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
  margin-right: .35rem; font-weight: 600;
}
.sevword.sev-high { color: var(--s-critical); }
.sevword.sev-med { color: var(--s-serious); }
.sevword.sev-low { color: var(--s-warning); }

/* A source citation opens the code it came from. */
.srclink { text-decoration-style: dotted; text-underline-offset: 2px; }

/* Identifiers may wrap, everywhere.
 *
 * Three separate layout defects this session had one cause: a long unbreakable token sets
 * a column's minimum width, and every layout — table, grid or float — obeys that minimum
 * before it considers anything else. A repository path escaped its card; a chip dragged a
 * card 69 px past the page; a table column holding 12% of the text took 34% of the width
 * because one cell could not fall below 430 px. `anywhere` rather than `break-word`
 * because only `anywhere` lowers the *minimum*, which is the thing the layout reads.
 */
.atlas .slugref, .atlas .srclink, .atlas .n-api,
.atlas .content code, .atlas .chspec dd.mono { overflow-wrap: anywhere; }

/* ---- The margin, and why the page stopped being a ribbon ------------------
 * Measured 2026-07-28 at 1728 px: a paragraph was 792 px — 46% of the window —
 * with the other half empty. The fix is *not* longer lines: 78 characters is
 * already at the top of what is comfortable, and widening the measure would buy
 * area at the cost of the reading it exists for.
 *
 * So the empty half gets the material that belongs beside the text rather than
 * inside it: the source of a claim. Cards already spanned the full width while
 * their prose was capped, so a citation floated into that space sits level with
 * the sentence it supports and costs the narrative nothing. Below the wide
 * breakpoint it returns to the flow.
 */
.truth .ref, .principle .ref, .tier .ref, .claim .ref, .station .ref, .fork .ref {
  float: right; clear: right;
  width: 15rem; margin: 0 0 .6rem 1.6rem;
  padding-left: .8rem; border-left: 1px solid var(--rule);
  font-style: normal; line-height: 1.4;
  /* A repository path is one long unbreakable token. Without this it does not wrap to the
     column's width — it overflows it, escapes the card, and lands on the card above. */
  overflow-wrap: anywhere;
}
/* And the card contains its own float, so nothing can hang outside it whatever happens
   inside. `flow-root` is the modern way to say "be a block that holds its floats". */
.truth, .principle, .tier, .claim, .station, .fork { display: flow-root; }
.ref-k {
  display: block; font-family: ui-monospace, monospace; font-size: .64rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: .15rem;
}
@media (max-width: 72rem) {
  .truth .ref, .principle .ref, .tier .ref, .claim .ref, .station .ref, .fork .ref {
    float: none; width: auto; margin: .5rem 0 0; padding-left: 0; border-left: 0;
  }
}

/* A prose field may now be more than one paragraph (§5 item 6). Several of these blocks
   set `margin: 0` because they were always exactly one; the second one needs its own air
   or the break is invisible, which is the whole point of having made it. */
.truth p + p, .body + .body, .blurb + .blurb, .together + .together,
.lede + .lede, .gist + .gist, .d-detail + .d-detail { margin-top: .6rem; }

/* The key, and the control that reaches it from wherever the reader is. */
.legend-head {
  font-size: .78rem; color: var(--ink); margin: .7rem 0 .2rem; font-weight: 600;
}
.place-key {
  font: inherit; font-size: .78rem; cursor: pointer; margin-right: .8rem;
  background: none; border: 0; border-bottom: 1px dotted var(--ink-faint);
  color: var(--link); padding: 0;
}
.place-key:hover { color: var(--accent); border-bottom-color: var(--accent); }
.rail-legend.flash { animation: legendflash 1.2s ease-out; }
@keyframes legendflash {
  0%, 40% { background: color-mix(in srgb, var(--k-control) 18%, transparent); }
  100% { background: transparent; }
}

/* ---- Narrow screens ------------------------------------------------------
   The rail becomes a band above the content rather than disappearing: losing
   navigation is worse than scrolling past it. */

@media (max-width: 62rem) {
  .atlas-shell { grid-template-columns: 1fr; gap: 1.2rem; }
  .rail {
    position: static; max-height: none; overflow: visible;
    border-right: 0; border-bottom: 1px solid var(--rule); padding-bottom: 1rem;
  }
  .rail-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .6rem 1.2rem; }
  .rail-legend { flex-flow: row wrap; gap: .3rem 1.1rem; }
  .place .pnav { margin-left: 0; width: 100%; }

  /* Wide tables scroll rather than compress. Measured at 545 px, a four-column table
     wrapped a six-word phrase over six lines beside an empty column — and crushing is
     worse than scrolling, because the content still looks present. `display: block`
     turns the table into its own scroll box; the columns then size to their content
     instead of being squeezed into a width that cannot hold them. */
  .atlas .content table { display: block; overflow-x: auto; max-width: 100%; }
  .atlas .content table th, .atlas .content table td { min-width: 7rem; }
  .cdntable th:nth-child(1), .cdntable th:nth-child(2), .cdntable th:nth-child(3) { width: auto; }

  /* A chip holds a short token, and `nowrap` keeps a two-word one whole. One node is
     named by its six members, so its chip asked for 569 px and dragged its whole card
     69 px past the page — measured at 606 px. A wrapped chip is worse-looking than a
     tidy one and better than a page that cannot be read. */
  .chip { white-space: normal; }
}


/* ---- Relationships, explained ------------------------------------------
 * A field name in a table cell says what to type. It does not say why two
 * things are connected, what travels between them, or what you would see
 * when it goes wrong — which is most of what a map is for. These cards use
 * the width the rail freed up, two or three across on a wide screen.
 */
.edgecards {
  display: grid; gap: .8rem; margin: 0 0 2rem;
  grid-template-columns: repeat(auto-fill, minmax(23rem, 1fr));
}
.edgecard {
  border: 1px solid var(--rule); border-left: 3px solid var(--k-resource);
  background: var(--card-bg); border-radius: 3px; padding: .7rem .85rem;
}
.edgecard[data-type='derives'] { border-left-color: var(--k-control); }
.edgecard[data-type='targets'] { border-left-color: var(--k-data); }
.edgecard .eh {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem;
  margin: 0 0 .5rem; max-width: none;
}
.epart {
  font: inherit; font-family: ui-monospace, monospace; font-size: .86rem; font-weight: 600;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink);
  border-bottom: 1px dotted var(--ink-faint);
}
.epart:hover { color: var(--link); border-bottom-color: var(--link); }
.epart:focus-visible { outline: 2px solid var(--k-control); outline-offset: 2px; }
.edgecard .et {
  font-family: ui-monospace, monospace; font-size: .70rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint);
}
.edgecard .ef { font-size: .76rem; }
.edgecard .er { display: grid; grid-template-columns: 6.2rem 1fr; gap: .1rem .6rem; margin-bottom: .35rem; }
.edgecard .ek {
  font-family: ui-monospace, monospace; font-size: .70rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-faint); padding-top: .15rem;
}
.edgecard .ev { font-size: .90rem; line-height: 1.5; color: var(--ink-soft); }
.edgecard .er.finding-note {
  border-left: 0; padding-left: 0; margin: .5rem 0 0;
  border-top: 1px dotted var(--rule); padding-top: .45rem;
}
@media (max-width: 34rem) {
  .edgecard .er { grid-template-columns: 1fr; }
}

/* How a group's parts cooperate — the thing an inventory leaves out. */
.cgroup > .together {
  font-size: .90rem; line-height: 1.55; color: var(--ink-soft);
  border-left: 2px solid var(--k-control); padding-left: .8rem;
  margin: 0 0 .9rem; max-width: 46rem;
}


/* ---- Where it is going --------------------------------------------------
 * Datum publishes its designs, each with a status saying how firm it is.
 * The status is the load-bearing part of every entry — the difference
 * between "thinking about" and "intends to build" — so it is the one thing
 * that reads before the name, not after it.
 */
.dir-caveat { border-left-color: var(--warn-edge); background: var(--warn-bg); }
.dirgroup { margin-bottom: 2rem; }
.dirgroup > h3 { margin: 0 0 .2rem; font-size: 1rem; }
.dirgroup > .blurb { max-width: 46rem; }
.diritems {
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
}
.diritem {
  border: 1px solid var(--rule); border-left: 3px solid var(--k-control);
  background: var(--card-bg); border-radius: 3px; padding: .7rem .85rem;
}
.diritem .dh {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .6rem;
  margin: 0 0 .5rem; max-width: none;
}
.diritem .dn { font-weight: 700; font-size: .98rem; }
.dstatus {
  font-family: ui-monospace, monospace; font-size: .70rem; letter-spacing: .07em;
  text-transform: uppercase; padding: .1rem .35rem; border-radius: 2px;
  border: 1px solid var(--rule); color: var(--ink-faint); white-space: nowrap;
}
/* Colour is a hint only — the word itself is always present. */
.dstatus.s-implementable { border-color: var(--k-resource); color: var(--k-resource); }
.dstatus.s-provisional { border-color: var(--ink-faint); }
.dstatus.s-earlydefinition { border-color: var(--rule); font-style: italic; }
.diritem .er { display: grid; grid-template-columns: 6.6rem 1fr; gap: .1rem .6rem; margin-bottom: .35rem; }
.diritem .ev { font-size: .90rem; line-height: 1.5; color: var(--ink-soft); }
.diritem .er.finding-note { border-left: 0; padding-left: 0; margin: .45rem 0 0; }
.diritem .dsrc {
  margin: .55rem 0 0; padding-top: .4rem; border-top: 1px dotted var(--rule);
  font-size: .76rem; color: var(--ink-faint); word-break: break-all; max-width: none;
}
@media (max-width: 34rem) { .diritem .er { grid-template-columns: 1fr; } }


/* ---- When something fails ----------------------------------------------
 * Same card shape as the relationships and the direction entries: three
 * short labelled fields beat a five-column table, and they use the width.
 */
.fail-premise { border-left-color: var(--s-critical); }
.failgroup { margin-bottom: 2rem; }
.failgroup > h3 { margin: 0 0 .2rem; font-size: 1rem; }
.failgroup > .blurb { max-width: 46rem; }
.failrows {
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
}
.failrow {
  border: 1px solid var(--rule); border-left: 3px solid var(--s-warning);
  background: var(--card-bg); border-radius: 3px; padding: .7rem .85rem;
}
.failrow .fh { font-weight: 700; font-size: .98rem; margin: 0 0 .5rem; max-width: none; }
.failrow .er { display: grid; grid-template-columns: 6.6rem 1fr; gap: .1rem .6rem; margin-bottom: .35rem; }
.failrow .ev { font-size: .90rem; line-height: 1.5; color: var(--ink-soft); }
.failrow .er.finding-note { border-left: 0; padding-left: 0; margin: .45rem 0 0; }
.failrow .dsrc {
  margin: .55rem 0 0; padding-top: .4rem; border-top: 1px dotted var(--rule);
  font-size: .76rem; color: var(--ink-faint); max-width: none;
}
/* The list of what we could not establish is a feature of the page, so it is
   styled as content rather than as an apology in small print. */
.unknowns { border-left: 3px solid var(--k-control); padding-left: 1rem; }
.unknowns ul { font-size: .94rem; line-height: 1.55; color: var(--ink-soft); }
@media (max-width: 34rem) { .failrow .er { grid-template-columns: 1fr; } }


/* ---- The standard, and where Datum sits against it ----------------------
 * A claim about a convention is only worth as much as the convention is
 * worth reading, so each row states the rule first and the observation
 * second, and links the specification it comes from.
 */
.standard { margin: 2.2rem 0 0; border-top: 1px solid var(--rule); padding-top: 1.4rem; }
.standard > h3 { margin: 0 0 .3rem; font-size: 1rem; }
.standard > .blurb { max-width: 46rem; }
.stdrows { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr)); }
.stdrow {
  border: 1px solid var(--rule); border-left: 3px solid var(--k-control);
  background: var(--card-bg); border-radius: 3px; padding: .7rem .85rem;
}
.stdrow .sh { font-weight: 700; font-size: .94rem; margin: 0 0 .5rem; max-width: none; }
.stdrow .er { display: grid; grid-template-columns: 6.4rem 1fr; gap: .1rem .6rem; margin-bottom: .35rem; }
.stdrow .ev { font-size: .90rem; line-height: 1.5; color: var(--ink-soft); }
.stdrow .er.finding-note { border-left: 0; padding-left: 0; margin: .45rem 0 0; }
.stdrow .dsrc {
  margin: .55rem 0 0; padding-top: .4rem; border-top: 1px dotted var(--rule);
  font-size: .76rem; color: var(--ink-faint); max-width: none; word-break: break-word;
}
.stdclosing {
  margin: 1rem 0 0; font-size: .94rem; line-height: 1.6;
  border-left: 3px solid var(--s-warning); padding-left: .9rem; max-width: 46rem;
}
@media (max-width: 34rem) { .stdrow .er { grid-template-columns: 1fr; } }


/* ---- What an API server actually is -------------------------------------
 * Four short facts, then the extension decision, then the three defects one
 * architectural property explains. The consequence list is the point of the
 * section, so it reads as a chain rather than as a table.
 */
.apiserver { margin: 2.2rem 0 0; border-top: 1px solid var(--rule); padding-top: 1.4rem; }
.apiserver > h3 { margin: 0 0 .3rem; font-size: 1rem; }
.apiserver > .blurb, .apiserver .apich + .blurb { max-width: 46rem; }
.apifacts { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); margin-bottom: 1.2rem; }
.apifact, .apiext {
  border: 1px solid var(--rule); border-left: 3px solid var(--k-surface);
  background: var(--card-bg); border-radius: 3px; padding: .65rem .8rem;
}
.apiext { border-left-color: var(--k-control); margin-bottom: 1.4rem; max-width: 52rem; }
.afh { font-weight: 700; font-size: .94rem; margin: 0 0 .3rem; max-width: none; }
.afb { font-size: .90rem; line-height: 1.55; color: var(--ink-soft); margin: 0; max-width: none; }
.apich { margin: 1.4rem 0 .2rem; font-size: 1.02rem; }
.apiconsl { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr)); }
.apicons {
  border: 1px solid var(--rule); border-left: 3px solid var(--s-warning);
  background: var(--card-bg); border-radius: 3px; padding: .65rem .8rem;
}
.apicons .er { display: grid; grid-template-columns: 5.2rem 1fr; gap: .1rem .6rem; margin-bottom: .3rem; }
.apicons .ev { font-size: .90rem; line-height: 1.5; color: var(--ink-soft); }
.apicons .er.finding-note { border-left: 0; padding-left: 0; margin: .4rem 0 0; }
@media (max-width: 34rem) { .apicons .er { grid-template-columns: 1fr; } }


/* ---- Delegation: lanes, not a graph ------------------------------------
 * The question is "which of three arrangements holds my kind, and where
 * does it come to rest" — that is four ordered stages, so lanes with one
 * arrow between them say it more plainly than any node-and-edge drawing.
 */
.deleg { margin-top: 1.6rem; }
.lanes { display: grid; gap: 0; margin: .8rem 0 1rem; }
.lane { display: grid; gap: .4rem; }
.lanelabel {
  font-family: ui-monospace, monospace; font-size: .70rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0; max-width: none;
}
.lanebox { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.lb {
  border: 1px solid var(--rule); border-left: 3px solid var(--ink-faint);
  background: var(--card-bg); border-radius: 3px; padding: .55rem .7rem;
}
.lane[data-kind='surface'] .lb { border-left-color: var(--k-surface); }
.lane[data-kind='control'] .lb { border-left-color: var(--k-control); }
.lane[data-kind='data'] .lb { border-left-color: var(--k-data); }
.lbt { font-weight: 600; font-size: .90rem; margin: 0 0 .2rem; max-width: none; }
.lbs { font-size: .84rem; line-height: 1.45; color: var(--ink-soft); margin: 0; max-width: none; }
.laneArrow {
  margin: .25rem 0 .55rem; text-align: center; color: var(--ink-faint);
  font-size: 1.1rem; line-height: 1; max-width: none;
}
.delegnote {
  font-size: .90rem; line-height: 1.55; color: var(--ink-soft);
  border-left: 2px solid var(--s-warning); padding-left: .8rem; margin: .6rem 0; max-width: 48rem;
}

/* ---- Why it leaks ------------------------------------------------------- */
.leak { margin-top: 1.6rem; }
.leaks { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr)); }
.leakrow {
  border: 1px solid var(--rule); border-left: 3px solid var(--s-critical);
  background: var(--card-bg); border-radius: 3px; padding: .65rem .8rem;
}
.lkh { font-weight: 700; font-size: .94rem; margin: 0 0 .3rem; max-width: none; }
.lkd { font-size: .90rem; line-height: 1.55; color: var(--ink-soft); margin: 0 0 .45rem; max-width: none; }
.lkf {
  font-size: .86rem; line-height: 1.5; margin: 0; max-width: none;
  border-top: 1px dotted var(--rule); padding-top: .4rem; color: var(--ink);
}
.lkf .ek {
  font-family: ui-monospace, monospace; font-size: .70rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-faint); display: block; margin-bottom: .15rem;
}

/* ---- Envoy's nesting ----------------------------------------------------
 * Five levels, and five findings that each sit at one of them. Ordered top
 * to bottom the way the objects nest, so the list itself teaches the shape.
 */
.envoy { margin: 2.2rem 0 0; border-top: 1px solid var(--rule); padding-top: 1.4rem; }
.envoy > h3 { margin: 0 0 .3rem; font-size: 1rem; }
.envoy > .blurb { max-width: 46rem; }
.levels { display: grid; gap: .7rem; margin-bottom: 1.2rem; }
.level {
  border: 1px solid var(--rule); border-left: 3px solid var(--k-data);
  background: var(--card-bg); border-radius: 3px; padding: .65rem .8rem;
}
.lvh {
  font-weight: 700; font-size: .94rem; margin: 0 0 .4rem; max-width: none;
  display: flex; align-items: baseline; gap: .5rem;
}
.lvh .xds {
  font-family: ui-monospace, monospace; font-size: .70rem; letter-spacing: .06em;
  color: var(--ink-faint); font-weight: 400; border: 1px solid var(--rule);
  border-radius: 2px; padding: .05rem .3rem;
}
.level .er { display: grid; grid-template-columns: 6.6rem 1fr; gap: .1rem .6rem; margin-bottom: .3rem; }
.level .ev { font-size: .90rem; line-height: 1.5; color: var(--ink-soft); }
.level .er.finding-note { border-left: 0; padding-left: 0; margin: .4rem 0 0; }
@media (max-width: 34rem) { .level .er { grid-template-columns: 1fr; } }


/* The compact masthead, and the one-line footer that replaced a repeated block. */
.mastmeta { font-size: .90rem; color: var(--ink-soft); margin: .4rem 0 0; max-width: 52rem; }
.howto-lede { font-size: 1.02rem; line-height: 1.6; color: var(--ink-soft); margin: 0 0 1.2rem; }
.lesson-footer .footline { font-size: .82rem; color: var(--ink-faint); margin: 0; }
@media (max-width: 62rem) {
  .rail-grip { display: none; }
  .rail-toggle { position: static; margin-bottom: .6rem; }
}


/* ---- A finding that Datum has already designed a remedy for ------------
 * Marked wherever the identifier appears, and stated in full in the panel.
 * The register is deliberately not the warning register: this is not a
 * complaint, it is the other half of the story, and a reader who meets one
 * without the other has been given a verdict instead of a state.
 */
.slugref .planmark {
  color: var(--k-resource); margin-left: .25rem; font-size: .9em;
}
.slugref.has-plan { border-bottom-color: var(--k-resource); }

.planned-loud {
  margin: 1rem 0 .2rem;
  background: color-mix(in srgb, var(--k-resource) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--k-resource) 40%, transparent);
  border-left: 3px solid var(--k-resource);
  border-radius: 0 3px 3px 0;
  padding: .6rem .8rem;
}
.pl-h {
  font-family: ui-monospace, monospace; font-size: .70rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--k-resource); margin: 0 0 .3rem; max-width: none;
}
.pl-b { font-size: .84rem; line-height: 1.55; color: var(--ink); margin: 0; max-width: none; }
.pl-b .srclink { word-break: break-word; }


/* ---- How much of a brick is used ---------------------------------------
 * Two lists side by side is the whole point: what is switched on, and what
 * the same component would do if it were. The second list is the one with
 * teaching value, so it is not styled as an afterthought.
 */
.depth { margin-top: .7rem; border-top: 1px dotted var(--rule); padding-top: .55rem; }
.dlabel {
  display: flex; align-items: center; gap: .4rem;
  font-family: ui-monospace, monospace; font-size: .70rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0 0 .45rem; max-width: none;
}
.dbar {
  display: inline-block; width: 2.4rem; height: .4rem; border-radius: 2px;
  border: 1px solid var(--rule); background:
    linear-gradient(to right, var(--k-control) var(--fill, 0%), transparent var(--fill, 0%));
}
.depth[data-depth='deep'] .dbar { --fill: 100%; }
.depth[data-depth='partial'] .dbar { --fill: 55%; }
.depth[data-depth='thin'] .dbar { --fill: 20%; }
.depth[data-depth='unknown'] .dbar { --fill: 0%; border-style: dashed; }
.depth[data-depth='deep'] .dlabel { color: var(--k-control); }

.tlist { margin: 0 0 .5rem; }
.tlh {
  font-family: ui-monospace, monospace; font-size: .70rem; letter-spacing: .06em;
  text-transform: uppercase; margin: 0 0 .2rem; max-width: none;
}
.tlist.used .tlh { color: var(--k-resource); }
.tlist.spare .tlh { color: var(--s-warning); }
.tlist ul { margin: 0; padding-left: 1.1rem; }
.tlist li { font-size: .80rem; line-height: 1.45; color: var(--ink-soft); margin-bottom: .12rem; }
.tlist.spare li { color: var(--ink-soft); }
.tpot {
  font-size: .82rem; line-height: 1.5; color: var(--ink); margin: .5rem 0 0; max-width: none;
  border-left: 2px solid var(--k-control); padding-left: .6rem;
}
.telse { font-size: .76rem; color: var(--ink-faint); margin: .45rem 0 0; max-width: none; font-style: italic; }

/* The opening item, and the pages that are not projections. */
.rail-open { margin-bottom: 1.3rem; }
.rail-open .rail-item .num { color: var(--k-control); }
.rail-elsewhere {
  border-top: 1px solid var(--rule); padding-top: .8rem; margin-top: 1rem;
}
.rail-elsewhere ul { list-style: none; margin: 0; padding: 0; }
.rail-elsewhere li { margin-bottom: .35rem; font-size: .80rem; line-height: 1.35; }
.rail-elsewhere .note { display: block; font-size: .72rem; color: var(--ink-faint); font-style: italic; }

/* The tally at the head of the parts list — computed, so it cannot drift. */
.techtally {
  border: 1px solid var(--rule); border-left: 3px solid var(--k-control);
  background: var(--card-bg); border-radius: 3px;
  padding: .7rem .9rem; margin: 0 0 1.6rem; max-width: 52rem;
}
.techtally p { margin: 0; font-size: .90rem; line-height: 1.55; max-width: none; }
.techtally .tt-note { margin-top: .4rem; font-size: .82rem; color: var(--ink-soft); }