/* Seametry Explorer.
 *
 * Every value here is a token from clients/packages/ui/src/generated/tokens.css, which
 * is generated from the design system's source and never hand edited. A raw
 * colour, font family or dash fails design-lint.
 *
 * Light is the default certificate; dark is the touchstone. Both come from
 * the generated file, so this stylesheet never states a colour at all.
 */

@font-face {
  font-family: 'Sentient'; /* design-lint-disable-line font-literal a font-face block must name the family it defines */
  src: url('fonts/Sentient-Variable.woff2') format('woff2-variations');
  font-weight: 200 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Switzer'; /* design-lint-disable-line font-literal a font-face block must name the family it defines */
  src: url('fonts/Switzer-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Fragment Mono'; /* design-lint-disable-line font-literal a font-face block must name the family it defines */
  src: url('fonts/FragmentMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }

body {
  background: var(--sm-surface-ground);
  color: var(--sm-text-secondary);
  font-family: var(--sm-font-family-ui);
  font-size: var(--sm-font-size-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  position: relative;
  min-height: 100vh;
}

/* Grain: static monochrome noise on ground, never animated. The only texture. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .04;
  z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); /* design-lint-disable-line lens-scope the ground grain is an approved texture, foundations section 7, and feTurbulence is how it is drawn */
}

/* The page is narrower than the token's full content width by a gutter's
 * worth each side: generous margins are the saleroom (foundations.md section
 * 4), and they are where the entrance pillars stand. */
:root {
  --page: calc(var(--sm-size-content) - 2 * var(--sm-space-12));
  /* Relief never outranks a rule line: both tones sit below line.strong
   * against their own ground (measured 27 September 2026: dark 1.53 vs 1.73,
   * light 1.28 vs 1.52). */
  --relief-ink: var(--sm-scale-olive-100);
}
:root[data-theme="light"] { --relief-ink: var(--sm-scale-olive-800) }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --relief-ink: var(--sm-scale-olive-800) }
}

.wrap {
  position: relative;
  z-index: 1;
  max-width: var(--page);
  margin: 0 auto;
  padding: var(--sm-space-8) var(--sm-space-7) var(--sm-space-12);
}

/* The entrance: two engraved pillars in the gutters of the front page's first
 * screen, scrolling away as the visitor walks in. The capitals meet the top of
 * the window, so the browser frame is the lintel. Drawn by pillar.go; served
 * as a mask so the ink stays a token and the right pillar is the left one
 * mirrored, light and all. Hidden where the gutter cannot hold one, never
 * squeezed over content. */
.pillar {
  position: absolute;
  top: 0;
  height: 100vh;
  width: calc((100vw - var(--page)) / 2 * 0.7);
  background: var(--relief-ink);
  -webkit-mask: url("pillar-light.svg") center bottom / contain no-repeat;
  mask: url("pillar-light.svg") center bottom / contain no-repeat;
  pointer-events: none;
}
.pillar.l { right: calc(100% + (100vw - var(--page)) / 2 * 0.15) }
.pillar.r { left: calc(100% + (100vw - var(--page)) / 2 * 0.15); transform: scaleX(-1) }
/* The same conditions tokens.css uses for the light palette: an explicit
   data-theme="light" (the default layout.html now sets), or a light system
   preference with no explicit dark. Keyed on the media query alone, the
   pillars drew in dark ink on a light page for any visitor whose system is
   dark. */
:root[data-theme="light"] .pillar {
  -webkit-mask-image: url("pillar-dark.svg");
  mask-image: url("pillar-dark.svg");
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .pillar {
    -webkit-mask-image: url("pillar-dark.svg");
    mask-image: url("pillar-dark.svg");
  }
}
@media (max-width: 1279px) { .pillar { display: none } }
.num { font-variant-numeric: tabular-nums lining-nums }

/* Header */
header.top {
  position: sticky;
  top: var(--sm-space-3);
  z-index: 4;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sm-space-6);
  min-height: var(--sm-space-11);
  padding: var(--sm-space-3) var(--sm-space-4);
  border-bottom: .5px solid var(--sm-line-rule);
  background: var(--sm-surface-ground);
  clip-path: polygon(0 0, calc(100% - var(--sm-space-3)) 0, 100% var(--sm-space-3), 100% 100%, var(--sm-space-3) 100%, 0 calc(100% - var(--sm-space-3)));
}
.word {
  display: inline-flex;
  align-items: center;
  gap: var(--sm-space-3);
  min-height: var(--sm-size-target);
  font-family: var(--sm-font-family-display);
  color: var(--sm-text-primary);
  text-decoration: none;
}
.house-mark {
  width: var(--sm-space-8);
  height: var(--sm-space-6);
  object-fit: contain;
}
.word-lockup {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sm-space-3);
}
.word-lockup strong {
  font-size: var(--sm-font-size-title-s);
  font-weight: var(--sm-font-weight-regular);
  letter-spacing: var(--sm-font-tracking-title);
}
.word-lockup small {
  color: var(--sm-text-tertiary);
  font-family: var(--sm-font-family-ui);
  font-size: var(--sm-font-size-small);
  font-weight: var(--sm-font-weight-medium);
}
nav { display: flex; justify-content: flex-end; gap: var(--sm-space-1); flex-wrap: wrap; align-items: center }
nav .devnet { margin-left: var(--sm-space-3) }
nav a {
  color: var(--sm-text-secondary);
  text-decoration: none;
  font-size: var(--sm-font-size-small);
  font-weight: var(--sm-font-weight-medium);
  padding: var(--sm-space-3) var(--sm-space-4);
  border-radius: var(--sm-radius-control);
}
nav a:hover { color: var(--sm-text-primary); background: var(--sm-surface-sheet) }
nav a[aria-current="page"] { color: var(--sm-text-primary); background: var(--sm-surface-sheet) }

.mode {
  all: unset;
  box-sizing: border-box;
  display: inline-grid;
  place-items: center;
  width: var(--sm-size-target);
  height: var(--sm-size-target);
  color: var(--sm-accent-touchText);
  background: var(--sm-surface-sheet);
  cursor: pointer;
}
.mode svg {
  width: var(--sm-space-6);
  height: var(--sm-space-6);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
:root[data-theme="light"] .mode .moon { display: none }
:root[data-theme="dark"] .mode .sun { display: none }

/* Where this runs. Shrunk from a paragraph to one word, never removed:
 * EXPLORER.md section 4 lets an operational fact shrink, never disappear.
 * Provenance blue, since which cluster a thing lives on is provenance. */
.devnet {
  font-size: var(--sm-font-size-micro);
  font-weight: var(--sm-font-weight-semibold);
  letter-spacing: var(--sm-font-tracking-serial);
  color: var(--sm-accent-provenance);
  border: 1px solid var(--sm-accent-provenance);
  border-radius: var(--sm-radius-data);
  padding: var(--sm-space-1) var(--sm-space-3);
}

/* Type */
h1 {
  font-family: var(--sm-font-family-display);
  font-weight: var(--sm-font-weight-light);
  font-size: clamp(var(--sm-font-size-figure), 6.5vw, var(--sm-font-size-display));
  line-height: 1.04;
  letter-spacing: var(--sm-font-tracking-display);
  max-width: 16ch;
  margin-top: var(--sm-space-9);
  color: var(--sm-text-primary);
}
h2 {
  font-family: var(--sm-font-family-display);
  font-weight: var(--sm-font-weight-regular);
  font-size: var(--sm-font-size-title);
  letter-spacing: var(--sm-font-tracking-title);
  margin-top: var(--sm-space-10);
  color: var(--sm-text-primary);
}
h3 {
  font-family: var(--sm-font-family-ui);
  font-weight: var(--sm-font-weight-semibold);
  font-size: var(--sm-font-size-body);
  margin-top: var(--sm-space-7);
  color: var(--sm-text-primary);
}
.lede {
  color: var(--sm-text-secondary);
  font-size: var(--sm-font-size-lead);
  margin-top: var(--sm-space-5);
  max-width: var(--sm-size-readable);
}
p { max-width: var(--sm-size-readable); margin-top: var(--sm-space-4); color: var(--sm-text-secondary) }
p.tight { margin-top: var(--sm-space-3) }
/* Links read as text with a hairline beneath, not as blue: blue is kept for
 * provenance, and a page of blue links spends it on navigation. Inside
 * tables and navigation the hairline goes too, until hovered. */
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: .5px;
  text-underline-offset: 3px;
  text-decoration-color: var(--sm-line-strong);
}
a:hover { text-decoration-color: currentColor }
td a, nav a { text-decoration: none }
td a:hover { text-decoration: underline; text-decoration-thickness: .5px }

/* A section label: small, quiet, above content set larger. A catalogue sets
 * labels in the margin's voice and the object in its own. */
h2.label {
  font-family: var(--sm-font-family-ui);
  font-size: var(--sm-font-size-small);
  font-weight: var(--sm-font-weight-semibold);
  letter-spacing: var(--sm-font-tracking-body);
  color: var(--sm-text-tertiary);
  margin-top: 0;
}
.powers { list-style: none; margin-top: var(--sm-space-4); columns: 2 22rem; column-gap: var(--sm-space-9) }
.powers li {
  position: relative;
  break-inside: avoid;
  padding: var(--sm-space-2) 0 var(--sm-space-2) var(--sm-space-5);
  color: var(--sm-text-primary);
}
.shared { margin-top: var(--sm-space-9) }

/* Figures */
.figures { display: flex; flex-wrap: wrap; gap: var(--sm-space-4); margin-top: var(--sm-space-7) }
.figure {
  background: var(--sm-surface-sheet);
  border: .5px solid var(--sm-line-rule);
  border-radius: var(--sm-radius-surface);
  padding: var(--sm-space-5) var(--sm-space-6);
  min-width: 150px;
  flex: 1 1 150px;
}
.figure b {
  display: block;
  font-family: var(--sm-font-family-display);
  font-weight: var(--sm-font-weight-regular);
  font-size: var(--sm-font-size-title-l);
  letter-spacing: var(--sm-font-tracking-display);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--sm-text-primary);
}
.figure span {
  display: block;
  font-size: var(--sm-font-size-small);
  color: var(--sm-text-tertiary);
  margin-top: var(--sm-space-1);
}

/* The catalogue. Names set in the display serif, details in the interface
 * face, hairline rules between entries, no fills: a printed catalogue, not a
 * dashboard. */
table.catalogue { margin-top: var(--sm-space-9) }
table.catalogue td { padding-top: var(--sm-space-5); padding-bottom: var(--sm-space-5) }
td.name a {
  font-family: var(--sm-font-family-display);
  font-size: var(--sm-font-size-title-s);
  color: var(--sm-text-primary);
}
td.lot-n { color: var(--sm-text-tertiary) }
.reason { font-size: var(--sm-font-size-small); color: var(--sm-text-tertiary); margin-top: var(--sm-space-2); max-width: 32ch }

/* On a phone each row becomes an entry: the name and verdict on one line,
 * its two facts beneath, labelled, rather than a table scrolled sideways
 * until the verdict, the column that matters, is off screen. */
@media (max-width: 639px) {
  table.catalogue thead { display: none }
  table.catalogue tr {
    display: grid;
    grid-template-columns: auto 1fr auto;
    column-gap: var(--sm-space-4);
    padding: var(--sm-space-5) 0;
    border-bottom: .5px solid var(--sm-line-rule);
  }
  table.catalogue td { border: none; padding: 0 }
  table.catalogue td.lot-n { grid-column: 1; grid-row: 1 }
  table.catalogue td.name { grid-column: 2; grid-row: 1 }
  table.catalogue td.verdict { grid-column: 3; grid-row: 1; text-align: right }
  table.catalogue td.fact { grid-column: 2 / 4; margin-top: var(--sm-space-2); font-size: var(--sm-font-size-small) }
  table.catalogue td.fact::before { content: attr(data-label) ": "; color: var(--sm-text-tertiary) }
  table.catalogue .reason { max-width: none }
}

/* A lot: one object per view, parts separated by rules, never boxed. */
.crumb { font-size: var(--sm-font-size-small); color: var(--sm-text-tertiary); margin-top: var(--sm-space-9) }
h1.lot-name { margin-top: var(--sm-space-3) }
.verdict-line { display: flex; gap: var(--sm-space-4); align-items: baseline; flex-wrap: wrap; margin-top: var(--sm-space-5) }
.verdict-line .reason { margin-top: 0; max-width: var(--sm-size-readable) }
.figure-block { margin-top: var(--sm-space-9) }
.figure-hero {
  font-family: var(--sm-font-family-display);
  font-weight: var(--sm-font-weight-light);
  font-size: var(--sm-font-size-figure-l);
  letter-spacing: var(--sm-font-tracking-display);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1;
  color: var(--sm-text-primary);
  margin-top: 0;
}
section.part { margin-top: var(--sm-space-10); padding-top: var(--sm-space-6); border-top: .5px solid var(--sm-line-rule) }
section.part dl.row { border-top: none; padding-top: 0 }
/* A decision in words: ALLOW in primary text, WARN in provenance blue, BLOCK
 * inverted (components.md, Stamp). */
.decision {
  font-family: var(--sm-font-family-display);
  font-size: var(--sm-font-size-title);
  letter-spacing: var(--sm-font-tracking-title);
  color: var(--sm-text-primary);
}
.decision.warn { color: var(--sm-accent-provenance) }
.decision.block { display: inline-block; background: var(--sm-surface-inverse); color: var(--sm-text-inverse); padding: 0 var(--sm-space-3) }

/* Tables are data: radius 0, rules between, no fills. */
table { width: 100%; border-collapse: collapse; margin-top: var(--sm-space-5); font-size: var(--sm-font-size-small) }
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch }
th {
  text-align: left;
  font-weight: var(--sm-font-weight-semibold);
  font-size: var(--sm-font-size-micro);
  color: var(--sm-text-tertiary);
  padding: var(--sm-space-3) var(--sm-space-4) var(--sm-space-3) 0;
  border-bottom: .5px solid var(--sm-line-rule);
  white-space: nowrap;
}
td {
  padding: var(--sm-space-4) var(--sm-space-4) var(--sm-space-4) 0;
  border-bottom: .5px solid var(--sm-line-rule);
  color: var(--sm-text-secondary);
  vertical-align: top;
  border-radius: var(--sm-radius-data);
}
td.n { font-variant-numeric: tabular-nums lining-nums; white-space: nowrap }
td strong { color: var(--sm-text-primary); font-weight: var(--sm-font-weight-semibold) }

/* Fragment Mono is the digest face. Hashes, addresses, signatures.
   Ligatures off: proven in headless Chromium against the repo's own font
   file that <-, == and |- draw as an arrow, one bar and a turnstile by
   default, which corrupts anything digest-shaped that contains them. */
code, .mono, .addr, dl.hashes dd, pre, .formula {
  font-family: var(--sm-font-family-digest);
  font-size: var(--sm-font-size-micro);
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
}
.addr { color: var(--sm-text-tertiary); word-break: break-all }

.card {
  background: var(--sm-surface-sheet);
  border: .5px solid var(--sm-line-rule);
  border-top-color: var(--sm-line-highlight);
  border-radius: var(--sm-radius-surface);
  padding: var(--sm-space-6) var(--sm-space-7);
  margin-top: var(--sm-space-5);
}
.sentence {
  display: flex;
  gap: var(--sm-space-4);
  align-items: flex-start;
  padding: var(--sm-space-2) 0;
  color: var(--sm-text-primary);
  font-size: var(--sm-font-size-body);
}
/* A list mark is decoration, so it takes the one colour reserved for
 * decoration, and it is square: nothing here is touched. */
.sentence::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  background: var(--sm-text-faint);
  margin-top: var(--sm-space-3);
}
.powers li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--sm-space-2) + .7em);
  width: 5px;
  height: 5px;
  background: var(--sm-text-faint);
}

/* Stamps. Struck, not tapped: square corners, since radius in this system
 * means touch and nobody presses a verdict, and a double rule, the border of
 * an assay certificate or a bar's stamped cartouche. A stamp is always
 * followed by its reasons. No red anywhere; contrast is the signal. */
.stamp {
  display: inline-block;
  font-size: var(--sm-font-size-micro);
  font-weight: var(--sm-font-weight-semibold);
  letter-spacing: var(--sm-font-tracking-serial);
  padding: var(--sm-space-1) var(--sm-space-3);
  border: 3px double var(--sm-line-strong);
  border-radius: var(--sm-radius-data);
  color: var(--sm-text-tertiary);
  white-space: nowrap;
  line-height: 1.4;
}
.stamp.admitted, .stamp.allow { border-color: var(--sm-text-primary); color: var(--sm-text-primary) }
.stamp.warn { border-color: var(--sm-accent-provenance); color: var(--sm-accent-provenance) }
/* Refused is only ever a BLOCK; blue would claim it is provenance. */
.stamp.refused, .stamp.block {
  background: var(--sm-surface-inverse);
  color: var(--sm-text-inverse);
  border-color: var(--sm-surface-inverse);
}
.stamp.done { border-color: var(--sm-line-strong); color: var(--sm-text-secondary) }
.stamp.todo { border-color: var(--sm-line-rule); color: var(--sm-text-tertiary) }

/* Controls. Green means touchable, and nothing else is green. */
.entry { margin-top: var(--sm-space-7); display: flex; gap: var(--sm-space-4); flex-wrap: wrap }
.field {
  flex: 1 1 240px;
  background: var(--sm-surface-sheet);
  border-radius: var(--sm-radius-control);
  display: flex;
  align-items: center;
  padding: 0 var(--sm-space-6);
  min-height: var(--sm-size-key);
  border: .5px solid var(--sm-line-rule);
}
.field input {
  all: unset;
  flex: 1;
  font-family: var(--sm-font-family-ui);
  font-size: var(--sm-font-size-lead);
  font-weight: var(--sm-font-weight-medium);
  letter-spacing: var(--sm-font-tracking-serial);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--sm-text-primary);
  min-width: 0;
}
.field input::placeholder {
  color: var(--sm-text-tertiary);
  letter-spacing: var(--sm-font-tracking-body);
  font-weight: var(--sm-font-weight-regular);
}
.tray { background: var(--sm-surface-tray); border-radius: var(--sm-radius-control); padding: var(--sm-size-tray); display: flex }
button.key {
  all: unset;
  cursor: pointer;
  background: var(--sm-accent-touch);
  color: var(--sm-text-onTouch);
  border-radius: var(--sm-radius-control);
  padding: 0 var(--sm-space-8);
  min-height: var(--sm-size-target);
  display: flex;
  align-items: center;
  font-family: var(--sm-font-family-ui);
  font-weight: var(--sm-font-weight-medium);
  font-size: var(--sm-font-size-body);
}
button.key:active { transform: translateY(1px); background: var(--sm-accent-touchPressed) }
button.quiet {
  all: unset;
  cursor: pointer;
  color: var(--sm-text-secondary);
  font-family: var(--sm-font-family-ui);
  font-size: var(--sm-font-size-small);
  font-weight: var(--sm-font-weight-medium);
  padding: var(--sm-space-3) var(--sm-space-5);
  border-radius: var(--sm-radius-control);
  background: var(--sm-surface-sheet);
  border: .5px solid var(--sm-line-rule);
  min-height: var(--sm-size-target);
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
}
button.quiet:hover { color: var(--sm-text-primary) }
/* Disabled while a check runs, and visibly so: a control that ignores a
 * click without saying why reads as broken. */
button.quiet:disabled { color: var(--sm-text-tertiary); cursor: default; background: var(--sm-surface-ground) }
/* The record, once a check has finished: a hairline and a text cursor say it
 * can be typed into. */
pre.editable { border: .5px solid var(--sm-line-strong); cursor: text }
pre.editable:focus { outline: 2px solid var(--sm-accent-provenance); outline-offset: 3px }
:focus-visible { outline: 2px solid var(--sm-accent-provenance); outline-offset: 3px }

.chips { margin-top: var(--sm-space-5); display: flex; flex-wrap: wrap; gap: var(--sm-space-2); align-items: center }
.chips p { font-size: var(--sm-font-size-small); color: var(--sm-text-tertiary); margin: 0 var(--sm-space-1) 0 0 }
.chip {
  all: unset;
  cursor: pointer;
  font-family: var(--sm-font-family-ui);
  font-size: var(--sm-font-size-small);
  font-weight: var(--sm-font-weight-medium);
  letter-spacing: var(--sm-font-tracking-serial);
  font-variant-numeric: tabular-nums lining-nums;
  padding: var(--sm-space-2) var(--sm-space-4);
  border-radius: var(--sm-radius-control);
  background: var(--sm-surface-sheet);
  color: var(--sm-text-secondary);
  border: .5px solid var(--sm-line-rule);
}
.chip:hover { color: var(--sm-text-primary) }
.msg { margin-top: var(--sm-space-4); font-size: var(--sm-font-size-small); color: var(--sm-accent-provenance); min-height: 1.4em }

/* The ritual */
.steps { list-style: none; margin-top: var(--sm-space-3) }
.step {
  padding: var(--sm-space-7) 0 var(--sm-space-1);
  border-top: .5px solid var(--sm-line-rule);
  margin-top: var(--sm-space-6);
  opacity: .3;
  transition: opacity var(--sm-motion-duration-settle) var(--sm-motion-easing-standard);
}
.step.on { opacity: 1 }
@media (prefers-reduced-motion: reduce) { .step { transition: none } }
.step h3 {
  display: flex;
  gap: var(--sm-space-4);
  align-items: baseline;
  font-family: var(--sm-font-family-display);
  font-weight: var(--sm-font-weight-regular);
  font-size: var(--sm-font-size-title-s);
  margin-top: 0;
}
.step h3 .n {
  font-family: var(--sm-font-family-ui);
  font-size: var(--sm-font-size-micro);
  font-weight: var(--sm-font-weight-semibold);
  color: var(--sm-text-tertiary);
  font-variant-numeric: tabular-nums lining-nums;
}
pre {
  margin-top: var(--sm-space-5);
  background: var(--sm-surface-sheet);
  border-radius: var(--sm-radius-surface);
  padding: var(--sm-space-5) var(--sm-space-5);
  line-height: 1.7;
  color: var(--sm-text-secondary);
  overflow-x: auto;
}
pre mark {
  background: none;
  color: var(--sm-accent-provenance);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}
dl.hashes {
  margin-top: var(--sm-space-4);
  display: grid;
  grid-template-columns: minmax(110px, auto) 1fr;
  gap: var(--sm-space-2) var(--sm-space-5);
  align-items: baseline;
}
dl.hashes dt { font-size: var(--sm-font-size-small); color: var(--sm-text-tertiary); font-family: var(--sm-font-family-ui) }
dl.hashes dd { color: var(--sm-text-primary); word-break: break-all }

/* A serial is never truncated (components.md, Serial). Semibold, positive
 * tracking and tabular figures, so it reads as an identifier, not a headline. */
h1.serial {
  font-family: var(--sm-font-family-ui);
  font-weight: var(--sm-font-weight-semibold);
  font-size: var(--sm-font-size-figure);
  letter-spacing: var(--sm-font-tracking-serial);
  font-variant-numeric: tabular-nums lining-nums;
  max-width: none;
  margin-top: var(--sm-space-3);
  overflow-wrap: anywhere;
}
/* Facts about one record, labelled, separated by rules rather than boxes. */
dl.row {
  margin-top: var(--sm-space-5);
  padding-top: var(--sm-space-4);
  border-top: .5px solid var(--sm-line-rule);
  display: grid;
  grid-template-columns: minmax(120px, max-content) 1fr;
  gap: var(--sm-space-3) var(--sm-space-7);
  align-items: baseline;
}
dl.row dt { font-size: var(--sm-font-size-small); color: var(--sm-text-tertiary) }
dl.row dd { margin: 0; color: var(--sm-text-primary); overflow-wrap: anywhere }
.formula { margin-top: var(--sm-space-4); color: var(--sm-text-tertiary); overflow-x: auto; white-space: nowrap }

.treebox {
  margin-top: var(--sm-space-5);
  background: var(--sm-surface-sheet);
  border-radius: var(--sm-radius-surface);
  padding: var(--sm-space-4) var(--sm-space-3) var(--sm-space-1);
  overflow-x: auto;
}
svg.tree { display: block; height: auto }
.tree line { stroke: var(--sm-line-rule); stroke-width: 1.2 }
.tree line.lit { stroke: var(--sm-accent-provenance); stroke-width: 1.6 }
.tree circle { fill: var(--sm-surface-raised); stroke: var(--sm-text-secondary); stroke-width: 1 }
.tree circle.sib { stroke: var(--sm-accent-provenance); stroke-dasharray: 2 2 }
.tree circle.lit { fill: var(--sm-accent-provenance); stroke: var(--sm-accent-provenance) }
.tree text { fill: var(--sm-text-tertiary); font-family: var(--sm-font-family-ui); font-size: 10px }
.legend { display: flex; gap: var(--sm-space-5); flex-wrap: wrap; margin-top: var(--sm-space-3); font-size: var(--sm-font-size-small); color: var(--sm-text-tertiary) }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: var(--sm-radius-control); margin-right: var(--sm-space-2) }
.legend i.computed { background: var(--sm-accent-provenance) }
.legend i.sibling { border: 1px dashed var(--sm-accent-provenance) }

.verdict {
  margin-top: var(--sm-space-5);
  font-family: var(--sm-font-family-display);
  font-size: var(--sm-font-size-title);
  font-weight: var(--sm-font-weight-light);
  letter-spacing: var(--sm-font-tracking-display);
  color: var(--sm-text-primary);
}
.verdict.no { color: var(--sm-accent-provenance) }
.closing {
  margin-top: var(--sm-space-8);
  font-family: var(--sm-font-family-display);
  font-weight: var(--sm-font-weight-light);
  font-size: clamp(var(--sm-font-size-title), 5vw, var(--sm-font-size-figure-l));
  line-height: 1.1;
  letter-spacing: var(--sm-font-tracking-display);
  color: var(--sm-text-primary);
  opacity: 0;
  transition: opacity var(--sm-motion-duration-sheet) var(--sm-motion-easing-standard);
}
.closing.on { opacity: 1 }
.after { margin-top: var(--sm-space-6); display: flex; gap: var(--sm-space-3); flex-wrap: wrap }

footer {
  margin-top: var(--sm-space-11);
  padding-top: var(--sm-space-6);
  border-top: .5px solid var(--sm-line-rule);
  color: var(--sm-text-tertiary);
  font-size: var(--sm-font-size-small);
}
footer p { color: var(--sm-text-tertiary); max-width: var(--sm-size-readable) }

.pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sm-space-2);
  margin-top: var(--sm-space-7);
  padding-top: var(--sm-space-4);
  border-top: .5px solid var(--sm-line-rule);
}
.pagination a,
.pagination span {
  display: inline-grid;
  place-items: center;
  min-width: var(--sm-size-target);
  min-height: var(--sm-size-target);
  padding: 0 var(--sm-space-3);
  color: var(--sm-text-secondary);
  font-size: var(--sm-font-size-small);
  text-decoration: none;
}
.pagination a {
  color: var(--sm-accent-touchText);
  background: var(--sm-surface-sheet);
}
.pagination a[aria-current="page"] {
  color: var(--sm-text-onTouch);
  background: var(--sm-accent-touch);
}

@media (max-width: 760px) {
  header.top {
    grid-template-columns: 1fr auto;
    gap: var(--sm-space-2) var(--sm-space-3);
  }
  header.top nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
    border-top: .5px solid var(--sm-line-rule);
  }
  .word-lockup small { display: none }
  .pagination { justify-content: flex-start; overflow-x: auto }
}

.limits {
  margin-top: var(--sm-space-5);
  padding: var(--sm-space-5) var(--sm-space-5);
  border: .5px dashed var(--sm-line-rule);
  border-radius: var(--sm-radius-surface);
}
.limits h3 { margin-top: 0; color: var(--sm-text-secondary) }
.limits li {
  color: var(--sm-text-tertiary);
  font-size: var(--sm-font-size-small);
  margin-left: var(--sm-space-6);
  margin-top: var(--sm-space-2);
}

/* Utility classes, so no template carries an inline style. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
h3.lead { margin-top: 0 }
td.label { width: 34% }
p.meta, .meta { font-size: var(--sm-font-size-small); color: var(--sm-text-tertiary) }
code.reason-code { color: var(--sm-text-tertiary) }