/* Mechaneion tokens — one set for the claims screen, the law screen and the host strip.

   Set on a screen's :host, or on the element a host page marks .mechaneion-chrome, and never on the
   host page's own root, so a page linking mechaneion.css keeps its own colour scheme and properties.

   Three layers, read top to bottom:
   1. scale    — spacing, type, radius, lines, motion. Theme-independent.
   2. tone     — the raw palette, once for light and once for dark. Never read by a component.
   3. meaning  — what a component reads. Each is a public --mechaneion-* knob falling back to its tone. */

/* ---------------------------------------------------------------------------------------------- */
/* 1 · scale                                                                                       */
/* ---------------------------------------------------------------------------------------------- */
.mechaneion-chrome {
  /* The one size knob. Spacing is derived from it too, so a host that raises it for readability
     gets room in proportion instead of larger words in the same cramped boxes. */
  --size: var(--mechaneion-font-size, 16px);
  --unit: calc(var(--size) / 4);

  /* Spacing, named by step. At the default size these are 2 4 8 12 16 20 24 32 48 px. */
  --space-0: calc(var(--unit) * 0.5);
  --space-1: var(--unit);
  --space-2: calc(var(--unit) * 2);
  --space-3: calc(var(--unit) * 3);
  --space-4: calc(var(--unit) * 4);
  --space-5: calc(var(--unit) * 5);
  --space-6: calc(var(--unit) * 6);
  --space-7: calc(var(--unit) * 8);
  --space-8: calc(var(--unit) * 12);

  /* Control heights: every button, field, chip and switch sits on one of these, so a row of mixed
     controls shares a baseline without per-control padding arithmetic. 20 24 28 32 px. */
  --height-tag: calc(var(--unit) * 5);
  --height-chip: calc(var(--unit) * 6);
  --height-control-small: calc(var(--unit) * 7);
  --height-control: calc(var(--unit) * 8);
  /* The smallest box a thumb can press, 44px, which is where a control sits on a phone. It is a FLOOR and
     not a multiple of --unit like the four above it: a thumb does not get smaller when a reader asks for
     smaller type, so lowering --mechaneion-font-size must not take a press target below 44px. Raising it
     still grows this, so the proportion the scale promises is kept in the direction that is safe. */
  --height-tap: max(44px, calc(var(--unit) * 11));

  /* Type. Six sizes, each with the line height it is always set in. 12 13 14 15 18 22 px. */
  --text-xs: calc(var(--size) * 0.75);      /* uppercase label, mono id */
  --text-sm: calc(var(--size) * 0.8125);    /* meta line, tag, chip */
  --text-md: calc(var(--size) * 0.875);     /* body, comment, controls */
  --text-lg: calc(var(--size) * 0.9375);    /* a rule's Rule slot */
  --text-xl: calc(var(--size) * 1.125);     /* a claim's sentence, a rule's plain line */
  --text-2xl: calc(var(--size) * 1.375);    /* the page header, on both screens */
  --leading-xs: 1.35;
  --leading-sm: 1.4;
  --leading-md: 1.5;
  --leading-lg: 1.55;
  --leading-xl: 1.45;
  --leading-2xl: 1.25;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-strong: 600;
  --tracking-label: 0.06em;                 /* the only letter-spacing; uppercase labels only */

  /* Families: Geist and Geist Mono throughout (§6 ruling 40). The faces ship with the package and are registered on the
     document by the first mount (`registerFonts`); every stack names real fallbacks for a host that passes
     `fonts: false` and supplies none. --font-reading sets the words a person rules on: a claim's sentence, a rule's
     plain and rule slots. It is Geist too, and stays its own knob so an adopter may set a reading face apart. */
  --font-sans: var(--mechaneion-font-sans, "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  --font-reading: var(--mechaneion-font-reading, "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  --font-mono: var(--mechaneion-font-mono, "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);

  /* Radius: 4 for a glyph-sized box, 6 for anything you press or type in, 10 for a card or a popover.
     A circle (the avatar, a status dot) is a shape, not a fourth radius. */
  --radius-small: 4px;
  --radius-control: 6px;
  --radius-card: 10px;

  --line-width: 1px;
  --edge-width: 3px;                        /* the card's state edge */
  --focus-width: 2px;
  --focus-offset: 2px;

  --disabled-opacity: 0.45;
  --motion-fast: 120ms;
}

/* ---------------------------------------------------------------------------------------------- */
/* 2 · tone — light is the base; dark replaces the tones and nothing else                          */
/* ---------------------------------------------------------------------------------------------- */
.mechaneion-chrome {
  color-scheme: light;
  /* Neutrals lean toward blue-violet (hue ~250) by a few points of chroma; never a pure grey. */
  --tone-ground: #F5F5F7;
  --tone-surface: #FAFAFB;
  --tone-surface-raised: #FFFFFF;
  --tone-hover: #EFEFF3;
  --tone-selected: #E7E7EE;
  --tone-line: #E2E2E8;
  --tone-line-strong: #C9CAD3;
  --tone-text: #1A1B21;
  --tone-text-dim: #565866;
  --tone-text-faint: #62646F;
  --tone-works: #0E7141;
  --tone-doesnt: #B0302A;
  --tone-vet-wrong: #7D5500;
  --tone-vet-good: #205BB5;
  --tone-comment: #A62D63;
  --tone-agent: #086872;
  /* Mechaneion's own mark, and nothing else: the mechane in bronze. */
  --tone-bronze: #8A5524;
  --tone-unsaved: #693CC2;
  --tone-shadow: 0 12px 32px -8px rgb(26 27 33 / 0.18), 0 2px 6px rgb(26 27 33 / 0.06);
  --tone-shadow-card: 0 1px 2px rgb(26 27 33 / 0.08), 0 4px 12px -4px rgb(26 27 33 / 0.12);
}

@media (prefers-color-scheme: dark) {
  .mechaneion-chrome:not([data-theme="light"]) {
    color-scheme: dark;
    --tone-ground: #0F1014;
    --tone-surface: #15161B;
    --tone-surface-raised: #1A1B21;
    --tone-hover: #212229;
    --tone-selected: #272831;
    --tone-line: #282932;
    --tone-line-strong: #3A3B47;
    --tone-text: #E9E9EE;
    --tone-text-dim: #A4A6B3;
    --tone-text-faint: #8F919F;
    --tone-works: #4DC38A;
    --tone-doesnt: #F0726B;
    --tone-vet-wrong: #E3B347;
    --tone-vet-good: #6FA6F2;
    --tone-comment: #EE8CC0;
    --tone-agent: #4FC4CC;
    --tone-bronze: #CD7F32;
    --tone-unsaved: #B99AF7;
    --tone-shadow: 0 16px 40px -8px rgb(0 0 0 / 0.6), 0 2px 6px rgb(0 0 0 / 0.3);
    --tone-shadow-card: 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 12px -4px rgb(0 0 0 / 0.5);
  }
}

.mechaneion-chrome[data-theme="dark"] {
  color-scheme: dark;
  --tone-ground: #0F1014;
  --tone-surface: #15161B;
  --tone-surface-raised: #1A1B21;
  --tone-hover: #212229;
  --tone-selected: #272831;
  --tone-line: #282932;
  --tone-line-strong: #3A3B47;
  --tone-text: #E9E9EE;
  --tone-text-dim: #A4A6B3;
  --tone-text-faint: #8F919F;
  --tone-works: #4DC38A;
  --tone-doesnt: #F0726B;
  --tone-vet-wrong: #E3B347;
  --tone-vet-good: #6FA6F2;
  --tone-comment: #EE8CC0;
  --tone-agent: #4FC4CC;
  --tone-bronze: #CD7F32;
  --tone-unsaved: #B99AF7;
  --tone-shadow: 0 16px 40px -8px rgb(0 0 0 / 0.6), 0 2px 6px rgb(0 0 0 / 0.3);
  --tone-shadow-card: 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 12px -4px rgb(0 0 0 / 0.5);
}

/* ---------------------------------------------------------------------------------------------- */
/* 3 · meaning — the only names a component reads                                                  */
/* ---------------------------------------------------------------------------------------------- */
.mechaneion-chrome {
  /* surfaces */
  --ground: var(--mechaneion-ink, var(--tone-ground));
  --surface: var(--mechaneion-panel, var(--tone-surface));
  --surface-raised: var(--mechaneion-panel-raised, var(--tone-surface-raised));
  --hover: var(--mechaneion-hover, var(--tone-hover));
  --selected: var(--mechaneion-selected, var(--tone-selected));
  --field: var(--ground);                   /* every text field and textarea, on both screens */
  --line: var(--mechaneion-line, var(--tone-line));
  --line-strong: var(--mechaneion-line-strong, var(--tone-line-strong));
  /* TWO HEIGHTS, and a surface wears the one for where it is. A popover floats over the page: menus, popovers, sheets,
     modals, a drawer, a toast, and the deck's card, which is in the hand rather than lying anywhere. A card lies at
     rest on the surface it is drawn on, close to it and lit from the same place, so its shadow is short and soft and
     still says it is a card and not a box drawn on the page. */
  --shadow-popover: var(--tone-shadow);
  --shadow-card: var(--tone-shadow-card);

  /* text */
  --text: var(--mechaneion-text, var(--tone-text));
  --text-dim: var(--mechaneion-text-dim, var(--tone-text-dim));
  --text-faint: var(--mechaneion-text-faint, var(--tone-text-faint));

  /* Each colour below means one thing on both screens.
     Nobody has answered: no hue at all — the absence of a decision is not a verdict. */
  --no-answer: var(--line-strong);
  /* A claim vetted worth asking that nobody has checked; a rule somebody says makes sense. */
  --vet-good: var(--mechaneion-vet-good, var(--tone-vet-good));
  /* Somebody says the claim itself is wrong; a rule somebody says does not make sense. */
  --vet-wrong: var(--mechaneion-vet-wrong, var(--tone-vet-wrong));
  --works: var(--mechaneion-mark-yes, var(--tone-works));
  --doesnt: var(--mechaneion-mark-no, var(--tone-doesnt));
  --comment: var(--mechaneion-comment, var(--tone-comment));
  --agent: var(--mechaneion-agent, var(--tone-agent));
  /* Mechaneion's mark, on either ground. It takes no host override: the hue is the product's own, where every
     token above it names something about the host's own data. */
  --bronze: var(--tone-bronze);
  /* A change made on this screen and not yet saved. Violet, never the vet-good blue. */
  --unsaved: var(--mechaneion-unsaved, var(--tone-unsaved));

  /* The primary action has no hue: every hue on these screens is already an answer. */
  --accent: var(--mechaneion-accent, var(--text));
  --on-accent: var(--mechaneion-on-accent, var(--ground));
  /* One ring, host and component alike. High-contrast neutral, so it reads on every state edge. */
  --focus: var(--mechaneion-focus, var(--text));

  /* A pressed answer's ground: its own colour, faint, over the card. */
  --wash: 14%;

  /* The tree's bucket strip: quantities, drawn in the answer colours they count, lighter for the
     weaker version of the same answer. Unvetted has no hue, as every unanswered state. */
  --bucket-seen: var(--mechaneion-bucket-seen, var(--rung-safe));
  --bucket-solid: var(--mechaneion-bucket-solid, var(--works));
  /* Confirmed by hand where no test can ever hold it: green in full, the answer it counts, and apart from solid
     only in its count and its words. */
  --bucket-hand: var(--mechaneion-bucket-hand, var(--works));
  --bucket-said: var(--mechaneion-bucket-said, color-mix(in srgb, var(--works) 50%, var(--surface-raised)));
  --bucket-held: var(--mechaneion-bucket-held, var(--text-faint));
  --bucket-blank: var(--mechaneion-bucket-blank, var(--line));
  --bucket-red: var(--mechaneion-bucket-red, var(--doesnt));
  --bucket-yours: var(--mechaneion-bucket-yours, color-mix(in srgb, var(--doesnt) 50%, var(--surface-raised)));
  --bucket-unvetted: var(--mechaneion-bucket-unvetted, var(--line-strong));
  --bucket-law: var(--mechaneion-bucket-law, var(--vet-wrong));
  --bucket-broke: var(--mechaneion-bucket-broke, repeating-linear-gradient(135deg, var(--doesnt) 0 3px, var(--surface-raised) 3px 6px));
  --bucket-unsure: var(--mechaneion-bucket-unsure, repeating-linear-gradient(135deg, var(--text-faint) 0 3px, var(--surface-raised) 3px 6px));
  --bucket-moved: var(--mechaneion-bucket-moved, var(--hover));

  /* THE LADDER: how far along one thing is, drawn at the claim, the slice and the tier in ONE hue's
     ramp, so a rollup is not a second language. Neutral at the bottom, the screen's own 'works'
     green at the top, two steps between. This is what eleven greys could not do — a reader had to
     hold eleven inks to read one bar (§3, ruled 2026-09-19).

     **EACH STEP IS MIXED INTO THE STEP BELOW IT, never into a surface.** The first attempt mixed
     into '--surface-raised': '--works' at 22% over it is about #2A3B32 against '--line-strong''s
     #3A3B47, so rung 1 came out DARKER and greyer than rung 0 and the ramp went down before it went
     up — the eleven-grey complaint rebuilt in four inks, invisible in the CSS and obvious in the
     browser. Mixing into the rung below makes the ramp monotonic by construction. */
  --rung-none: var(--mechaneion-rung-none, var(--line-strong));
  --rung-vetted: var(--mechaneion-rung-vetted, color-mix(in srgb, var(--works) 30%, var(--line-strong)));
  --rung-almost: var(--mechaneion-rung-almost, color-mix(in srgb, var(--works) 62%, var(--line-strong)));
  --rung-works: var(--mechaneion-rung-works, var(--works));
  /* One step PAST the ramp's top, in the same hue: 'works' deepened towards the text colour, so 'extra safe' reads as
     further along the one ramp and never as a second kind of done. */
  --rung-safe: var(--mechaneion-rung-safe, color-mix(in srgb, var(--works) 70%, var(--text)));
  /* NOT on the ramp, beside it: 'needs you' is a queue, not a distance, so it is the screen's own no
     and never a late rung — which would read as nearly done. */
  --rung-needsyou: var(--mechaneion-rung-needsyou, var(--doesnt));
}

/* Mechaneion components — one of each, read by both screens and the host strip. Reads tokens.css only.

   §7 of the slices brief binds every rule here:
   - no hover, press, selected or open state changes a box's size, padding or border width; states
     change colour, background and inset shadows only, so nothing relayouts under a pressed pointer;
   - no percentage width inside a max-content track, no will-change: transform;
   - [hidden] wins over every display this file sets. */

/* ---------------------------------------------------------------------------------------------- */
/* base                                                                                            */
/* ---------------------------------------------------------------------------------------------- */
.mechaneion-chrome {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-md);
  font-weight: var(--weight-regular);
  color: var(--text);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
:where(.mechaneion-chrome), :where(.mechaneion-chrome) *, :where(.mechaneion-chrome)::before, :where(.mechaneion-chrome) *::before, :where(.mechaneion-chrome)::after, :where(.mechaneion-chrome) *::after { box-sizing: border-box; }
:where(.mechaneion-chrome)[hidden], :where(.mechaneion-chrome) [hidden] { display: none !important; }
:where(.mechaneion-chrome) button, :where(.mechaneion-chrome) input, :where(.mechaneion-chrome) textarea, :where(.mechaneion-chrome) select { font: inherit; color: inherit; margin: 0; }
:where(.mechaneion-chrome) p, :where(.mechaneion-chrome) h1, :where(.mechaneion-chrome) h2, :where(.mechaneion-chrome) h3, :where(.mechaneion-chrome) h4, :where(.mechaneion-chrome) ol, :where(.mechaneion-chrome) ul, :where(.mechaneion-chrome) blockquote { margin: 0; }
:where(.mechaneion-chrome) details, :where(.mechaneion-chrome) summary { min-width: 0; }

:where(.mechaneion-chrome):focus-visible, :where(.mechaneion-chrome) :focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
:where(.mechaneion-chrome):focus:not(:focus-visible), :where(.mechaneion-chrome) :focus:not(:focus-visible) { outline: none; }

/* A tone is one of the meanings in tokens.css; every coloured component reads --tone. */
:where(.mechaneion-chrome)[data-tone="none"], :where(.mechaneion-chrome) [data-tone="none"] { --tone: var(--no-answer); }
:where(.mechaneion-chrome)[data-tone="vet-good"], :where(.mechaneion-chrome) [data-tone="vet-good"] { --tone: var(--vet-good); }
:where(.mechaneion-chrome)[data-tone="vet-wrong"], :where(.mechaneion-chrome) [data-tone="vet-wrong"] { --tone: var(--vet-wrong); }
:where(.mechaneion-chrome)[data-tone="works"], :where(.mechaneion-chrome) [data-tone="works"] { --tone: var(--works); }
:where(.mechaneion-chrome)[data-tone="doesnt"], :where(.mechaneion-chrome) [data-tone="doesnt"] { --tone: var(--doesnt); }
:where(.mechaneion-chrome)[data-tone="comment"], :where(.mechaneion-chrome) [data-tone="comment"] { --tone: var(--comment); }
:where(.mechaneion-chrome)[data-tone="agent"], :where(.mechaneion-chrome) [data-tone="agent"] { --tone: var(--agent); }
:where(.mechaneion-chrome)[data-tone="unsaved"], :where(.mechaneion-chrome) [data-tone="unsaved"] { --tone: var(--unsaved); }

.label {
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-faint);
}
.id {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.num { font-variant-numeric: tabular-nums; }
:where(.mechaneion-chrome) code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  padding-inline: var(--space-1);
  border-radius: var(--radius-small);
  background: var(--hover);
  color: var(--text);
  overflow-wrap: anywhere;
}

.icon {
  width: var(--text-md);
  height: var(--text-md);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------------------------------------------- */
/* mark glyph — the shape says the answer, the tone says which question                            */
/* ---------------------------------------------------------------------------------------------- */
.mark {
  width: var(--text-md);
  height: var(--text-md);
  flex: none;
  fill: none;
  stroke: var(--text-dim);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mark[data-tone] { stroke: var(--tone); }
.mark[data-tone="none"] { stroke: var(--text-dim); stroke-dasharray: 2.4 2.2; }

/* ---------------------------------------------------------------------------------------------- */
/* tag — a state in words, in its colour                                                           */
/* ---------------------------------------------------------------------------------------------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: var(--height-tag);
  padding-inline: var(--space-2);
  border-radius: var(--radius-small);
  font-size: var(--text-sm);
  line-height: 1;
  font-weight: var(--weight-strong);
  white-space: nowrap;
  color: var(--text-dim);
  background: var(--hover);
}
.tag[data-tone] { color: var(--tone); background: color-mix(in srgb, var(--tone) var(--wash), transparent); }
.tag[data-tone="none"] { color: var(--text-dim); background: var(--hover); }
/* Contested: a swatch of the stripes the card's edge carries, and the word in plain text. */
.tag[data-stripes] { color: var(--text); background: var(--hover); }
.tag[data-stripes]::before {
  content: "";
  width: var(--space-1);
  height: var(--space-3);
  border-radius: 1px;
  background: var(--stripes);
}

/* ---------------------------------------------------------------------------------------------- */
/* count badge                                                                                     */
/* ---------------------------------------------------------------------------------------------- */
.count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-width: var(--height-tag);
  height: var(--height-tag);
  padding-inline: var(--space-1);
  border-radius: 999px;
  font-size: var(--text-xs);
  line-height: 1;
  font-weight: var(--weight-strong);
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
  background: var(--hover);
}
.count[data-tone] { color: var(--tone); background: color-mix(in srgb, var(--tone) var(--wash), transparent); }
.count .icon { width: var(--text-xs); height: var(--text-xs); }

/* ---------------------------------------------------------------------------------------------- */
/* buttons                                                                                         */
/* ---------------------------------------------------------------------------------------------- */
/* A region whose contents somebody else draws, such as the sign-in panel an access module fills, gives a bare <button> the
   system button: inside that region only, and at zero specificity, so a class the drawer styles itself wins. */
.button, :where(.mechaneion-chrome) :where(.host-content) :where(button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--height-control);
  padding-inline: var(--space-3);
  border: var(--line-width) solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--surface-raised);
  color: var(--text);
  font-size: var(--text-md);
  line-height: 1;
  font-weight: var(--weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast);
}
.button:hover:not(:disabled), :where(.mechaneion-chrome) :where(.host-content) :where(button:hover:not(:disabled)) { background: var(--hover); }
.button:active:not(:disabled), :where(.mechaneion-chrome) :where(.host-content) :where(button:active:not(:disabled)) { background: var(--selected); }
.button[data-size="small"] { height: var(--height-control-small); padding-inline: var(--space-2); font-size: var(--text-sm); }

.button[data-kind="primary"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.button[data-kind="primary"]:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 86%, var(--ground)); }
.button[data-kind="primary"]:active:not(:disabled) { background: color-mix(in srgb, var(--accent) 74%, var(--ground)); }

.button[data-kind="quiet"] { background: transparent; border-color: transparent; color: var(--text-dim); }
.button[data-kind="quiet"]:hover:not(:disabled) { background: var(--hover); color: var(--text); }
.button[data-kind="quiet"]:active:not(:disabled) { background: var(--selected); color: var(--text); }

.button:disabled, :where(.mechaneion-chrome) :where(.host-content) :where(button:disabled), .icon-button:disabled, .vote__option:disabled, .field:disabled, .switch__option:disabled {
  opacity: var(--disabled-opacity);
  cursor: not-allowed;
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-width: var(--height-control-small);
  height: var(--height-control-small);
  padding-inline: var(--space-1);
  border: var(--line-width) solid transparent;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-dim);
  font-size: var(--text-sm);
  line-height: 1;
  font-weight: var(--weight-strong);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color var(--motion-fast), color var(--motion-fast);
}
.icon-button:hover:not(:disabled) { background: var(--hover); color: var(--text); }
.icon-button:active:not(:disabled), .icon-button[aria-pressed="true"] { background: var(--selected); color: var(--text); }
/* The comment control of a half somebody commented on: its colour and its count, never an overlay. */
.icon-button[data-tone="comment"] { color: var(--comment); }
.icon-button[data-tone="comment"]:hover:not(:disabled) { color: var(--comment); }

/* ---------------------------------------------------------------------------------------------- */
/* vote pair — Worth asking? and Does it? on a claim, Plain line matches? on a rule                */
/* ---------------------------------------------------------------------------------------------- */
.vote { display: inline-flex; isolation: isolate; }
.vote__option {
  --answer: var(--text);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: var(--height-control-small);
  padding-inline: var(--space-2) var(--space-3);
  border: var(--line-width) solid var(--line-strong);
  background: transparent;
  color: var(--text-dim);
  font-size: var(--text-sm);
  line-height: 1;
  font-weight: var(--weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--motion-fast), color var(--motion-fast), box-shadow var(--motion-fast);
}
.vote__option:first-child { border-radius: var(--radius-control) 0 0 var(--radius-control); }
.vote__option:last-child { border-radius: 0 var(--radius-control) var(--radius-control) 0; margin-inline-start: calc(-1 * var(--line-width)); }
.vote__option[data-answer="good"] { --answer: var(--vet-good); }
.vote__option[data-answer="wrong"] { --answer: var(--vet-wrong); }
.vote__option[data-answer="yes"] { --answer: var(--works); }
.vote__option[data-answer="no"] { --answer: var(--doesnt); }
/* An answer GIVEN on a frozen card is drawn as the pressed answer it was, and is no control: no hover, no press, square
   corners nowhere, because it stands alone in its group. */
.vote__option:hover:not(:disabled):not([data-given]) { background: var(--hover); color: var(--text); }
.vote__option:active:not(:disabled):not([data-given]) { background: var(--selected); color: var(--text); }
.vote__option[data-given] { border-radius: var(--radius-control); margin-inline-start: 0; cursor: default; }
.vote__option[aria-pressed="true"], .vote__option[data-given] {
  z-index: 1;
  color: var(--answer);
  background: color-mix(in srgb, var(--answer) var(--wash), var(--surface-raised));
  border-color: color-mix(in srgb, var(--answer) 60%, var(--line-strong));
}
.vote__option[aria-pressed="true"]:hover:not(:disabled) { color: var(--answer); background: color-mix(in srgb, var(--answer) 20%, var(--surface-raised)); }
.vote__option:focus-visible { z-index: 2; }
/* Pressed here and not yet saved: a violet dot, so the answer keeps its own colour. */
.vote__option[data-unsaved]::after {
  content: "";
  position: absolute;
  top: calc(-1 * var(--space-1));
  right: calc(-1 * var(--space-1));
  width: var(--space-2);
  height: var(--space-2);
  border-radius: 50%;
  background: var(--unsaved);
  box-shadow: 0 0 0 var(--space-0) var(--surface-raised);
}

/* ---------------------------------------------------------------------------------------------- */
/* chip — a slice this one needs, or one waiting on it                                             */
/* ---------------------------------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  height: var(--height-chip);
  padding-inline: var(--space-2);
  border: var(--line-width) solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface-raised);
  color: var(--text);
  font-size: var(--text-sm);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--motion-fast), border-color var(--motion-fast);
}
.chip > .chip__text { overflow: hidden; text-overflow: ellipsis; }
.chip:hover { background: var(--hover); border-color: var(--line-strong); }
.chip:active { background: var(--selected); }
.chip[data-removable] { padding-inline-end: var(--space-0); cursor: default; }
.chip[data-removable]:hover { background: var(--surface-raised); border-color: var(--line); }
.chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--height-chip) - var(--space-1) - 2 * var(--line-width));
  height: calc(var(--height-chip) - var(--space-1) - 2 * var(--line-width));
  border: 0;
  border-radius: var(--radius-small);
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
}
.chip__remove .icon { width: var(--text-xs); height: var(--text-xs); }
.chip__remove:hover { background: var(--hover); color: var(--text); }
.chip__remove:active { background: var(--selected); color: var(--text); }

/* ---------------------------------------------------------------------------------------------- */
/* fold — the one disclosure: a chevron that turns, a label, and optional quiet meta               */
/* Works on <details><summary class="fold__summary"> and on a <button aria-expanded>.              */
/* ---------------------------------------------------------------------------------------------- */
.fold__summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: var(--space-2);
  min-height: var(--height-control-small);
  margin-inline: calc(-1 * var(--space-1));
  padding-inline: var(--space-1) var(--space-2);
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-dim);
  font-size: var(--text-md);
  line-height: var(--leading-sm);
  font-weight: var(--weight-medium);
  text-align: left;
  list-style: none;
  cursor: pointer;
  transition: background-color var(--motion-fast), color var(--motion-fast);
}
.fold__summary::-webkit-details-marker { display: none; }
/* Added for the law screen's build: the fold on a <button aria-expanded> inside a div.fold takes its column's width, as a
   <summary> does, so a one-line preview is cut at the column's edge instead of widening the button past it. */
div.fold { display: grid; grid-template-columns: minmax(0, 1fr); }
.fold__summary:hover { background: var(--hover); color: var(--text); }
.fold__chevron { transition: transform var(--motion-fast); color: var(--text-faint); }
details[open] > .fold__summary .fold__chevron,
.fold__summary[aria-expanded="true"] .fold__chevron { transform: rotate(90deg); }
.fold__meta { color: var(--text-faint); font-size: var(--text-sm); font-weight: var(--weight-regular); }
.fold__preview { flex: 1 1 12em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-faint); font-weight: var(--weight-regular); }
details[open] > .fold__summary .fold__preview { display: none; }
.fold__body { padding-block-start: var(--space-2); padding-inline-start: calc(var(--text-md) + var(--space-2)); }

/* ---------------------------------------------------------------------------------------------- */
/* segmented switch — host Claims · Law and every mode switch inside a screen                      */
/* ---------------------------------------------------------------------------------------------- */
.switch {
  display: inline-flex;
  gap: var(--space-0);
  height: var(--height-control);
  padding: var(--space-0);
  border: var(--line-width) solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
}
.switch__option {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding-inline: var(--space-3);
  border: 0;
  border-radius: calc(var(--radius-control) - var(--space-0));
  background: transparent;
  color: var(--text-dim);
  font-size: var(--text-md);
  line-height: 1;
  font-weight: var(--weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--motion-fast), color var(--motion-fast);
}
.switch__option:hover:not(:disabled) { color: var(--text); background: var(--hover); }
.switch__option:active:not(:disabled) { background: var(--selected); }
.switch__option[aria-selected="true"], .switch__option[aria-pressed="true"] {
  color: var(--text);
  background: var(--selected);
  box-shadow: inset 0 0 0 var(--line-width) var(--line-strong);
}

/* ---------------------------------------------------------------------------------------------- */
/* text field, select and textarea — one ground on both screens                                    */
/* ---------------------------------------------------------------------------------------------- */
.field {
  display: block;
  width: 100%;
  height: var(--height-control);
  padding-inline: var(--space-3);
  border: var(--line-width) solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--field);
  color: var(--text);
  font-size: var(--text-md);
  line-height: var(--leading-md);
  transition: border-color var(--motion-fast);
}
.field::placeholder { color: var(--text-faint); opacity: 1; }
.field:hover:not(:disabled):not(:focus-visible) { border-color: var(--text-faint); }
.field[data-size="small"] { height: var(--height-control-small); padding-inline: var(--space-2); font-size: var(--text-sm); }
textarea.field {
  height: auto;
  min-height: calc(var(--text-md) * var(--leading-md) * 3 + var(--space-2) * 2 + 2px);
  padding-block: var(--space-2);
  resize: vertical;
}
select.field {
  appearance: none;
  padding-inline-end: var(--space-7);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-dim) 50%),
    linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
  background-position: right calc(var(--space-3) + 4px) center, right var(--space-3) center;
  background-size: 4px 4px;
  background-repeat: no-repeat;
  cursor: pointer;
}
/* A small select keeps the room its arrow needs: .field[data-size="small"] would otherwise win on specificity. */
select.field[data-size="small"] { padding-inline-end: var(--space-7); }
/* A reason owed by a thumbs-down: the colour of the answer it is owed for. */
.field[data-owed] { border-color: var(--vet-wrong); }
.field[data-unsaved] { border-color: var(--unsaved); }
.field-note { display: flex; align-items: center; gap: var(--space-1); margin-top: var(--space-1); font-size: var(--text-sm); color: var(--text-dim); }
.field-note[data-tone] { color: var(--tone); }
.field-note .icon { width: var(--text-sm); height: var(--text-sm); }

/* ---------------------------------------------------------------------------------------------- */
/* menu / popover                                                                                  */
/* ---------------------------------------------------------------------------------------------- */
.menu {
  display: grid;
  gap: var(--space-0);
  min-width: calc(var(--size) * 15);
  padding: var(--space-1);
  border: var(--line-width) solid var(--line-strong);
  border-radius: var(--radius-card);
  background: var(--surface-raised);
  box-shadow: var(--shadow-popover);
}
.menu__head { display: grid; gap: var(--space-0); padding: var(--space-2) var(--space-3); }
.menu__name { font-weight: var(--weight-medium); }
.menu__sub { font-size: var(--text-sm); color: var(--text-dim); }
.menu__rule { height: var(--line-width); margin: var(--space-1) calc(-1 * var(--space-1)); border: 0; background: var(--line); }
.menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--height-control);
  padding-inline: var(--space-3);
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text);
  font-size: var(--text-md);
  text-align: left;
  cursor: pointer;
}
.menu__item .icon { color: var(--text-dim); }
.menu__item:hover, .menu__item[aria-selected="true"] { background: var(--hover); }
.menu__item:active { background: var(--selected); }
.menu__item[aria-checked="true"]::after { content: "✓"; margin-inline-start: auto; color: var(--text-dim); }
.menu__item .menu__hint { margin-inline-start: auto; font-size: var(--text-sm); color: var(--text-faint); }

/* ---------------------------------------------------------------------------------------------- */
/* page header — the grouping's name or the book's, and its counts; one size on both screens       */
/* ---------------------------------------------------------------------------------------------- */
.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: last baseline;             /* the counts sit on the title's line, under an eyebrow too */
  gap: var(--space-1) var(--space-5);
  padding-block-end: var(--space-4);
  border-bottom: var(--line-width) solid var(--line);
}
.page-header__title {
  display: grid;
  gap: var(--space-0);
  font-size: var(--text-2xl);
  line-height: var(--leading-2xl);
  font-weight: var(--weight-strong);
  text-wrap: balance;
}
.page-header__title .id { font-weight: var(--weight-regular); }
.page-header__counts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-dim);
}
.page-header__counts b { font-weight: var(--weight-medium); color: var(--text); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------------------------- */
/* rail item — a book, a rule under it, the disagreements tray                                     */
/* ---------------------------------------------------------------------------------------------- */
.rail { display: grid; gap: var(--space-0); align-content: start; }
.rail-item {
  display: grid;
  grid-template-columns: var(--text-md) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--height-control);
  padding-inline: var(--space-2);
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text);
  font-size: var(--text-md);
  line-height: var(--leading-sm);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--motion-fast);
}
.rail-item:hover { background: var(--hover); }
.rail-item:active { background: var(--selected); }
.rail-item[aria-current="true"] { background: var(--selected); }
.rail-item[aria-expanded] .fold__chevron { transition: transform var(--motion-fast); color: var(--text-faint); }
.rail-item[aria-expanded="true"] .fold__chevron { transform: rotate(90deg); }
.rail-item__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-item__meta { font-size: var(--text-sm); color: var(--text-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rail-item[data-level="rule"] { grid-template-columns: var(--text-md) 2.75em minmax(0, 1fr); min-height: var(--height-control-small); font-size: var(--text-sm); }
.rail-item[data-level="rule"][aria-current="true"] .id { color: var(--text); }
.rail-item[data-struck] .rail-item__name { color: var(--text-faint); }
.rail-group {
  display: grid;
  gap: var(--space-0);
  margin-inline-start: calc(var(--space-2) + var(--text-md) / 2);
  padding-inline-start: var(--space-2);
  border-inline-start: var(--line-width) solid var(--line);
}
.rail-group > .label { padding: var(--space-3) var(--space-2) var(--space-1); }
.rail-tray { margin-block-start: var(--space-3); padding-block-start: var(--space-3); border-top: var(--line-width) solid var(--line); }

/* ---------------------------------------------------------------------------------------------- */
/* card — one bordered box, its state on its edge                                                  */
/* ---------------------------------------------------------------------------------------------- */
.card {
  container: card / inline-size;
  position: relative;
  padding-block: var(--space-4);
  padding-inline: calc(var(--space-5) + var(--edge-width)) var(--space-5);
  border: var(--line-width) solid var(--line);
  border-inline-start-width: 0;           /* the edge stands in for the left border */
  border-radius: var(--radius-card);
  background: var(--surface-raised);
  overflow: clip;                         /* clips the edge to the card's curve; not a scroll box */
  transition: border-color var(--motion-fast), background-color var(--motion-fast);
}
.card::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--edge-width);
  background: var(--tone, var(--no-answer));
}
.card[data-stripes]::before { background: var(--stripes); }
.card[data-open] { border-color: var(--line-strong); }
/* Scrolled to from elsewhere: the focus ring, outside, the same on both screens. */
.card[data-revealed] { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
.card[data-struck] { background: transparent; border-style: dashed; }

.card-list { display: grid; gap: var(--space-4); }

/* ---------------------------------------------------------------------------------------------- */
/* host strip — the site shell above both screens                                                  */
/* ---------------------------------------------------------------------------------------------- */
.host-strip {
  container: strip / inline-size;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  min-height: calc(var(--size) * 3.5);
  padding-block: var(--space-2);
  padding-inline: var(--space-4);
  border-bottom: var(--line-width) solid var(--line);
  background: var(--surface);
}
.host-strip__doc { font-weight: var(--weight-strong); white-space: nowrap; }
.host-strip__spacer { flex: 1 1 0; }
.host-strip__setting { display: inline-flex; align-items: center; gap: var(--space-2); }
.host-strip__setting .field { width: auto; }
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--height-control);
  height: var(--height-control);
  border: 0;
  border-radius: 50%;
  background: var(--selected);
  color: var(--text);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  cursor: pointer;
}
.avatar:hover { box-shadow: inset 0 0 0 var(--line-width) var(--line-strong); }
.avatar:active, .avatar[aria-expanded="true"] { background: var(--line-strong); }
@container strip (max-width: 440px) { .host-strip__doc { display: none; } .host-strip__setting .label { display: none; } }

/* ================================================================================================ */
/* compositions — layout only; everything visible is a component above                             */
/* ================================================================================================ */

/* claim card ------------------------------------------------------------------------------------ */
.claim { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3) var(--space-6); }
.claim__main { display: grid; gap: var(--space-2); align-content: start; min-width: 0; }
.claim__sentence, .rule__plain {
  font-family: var(--font-reading);
  font-size: var(--text-xl);
  line-height: var(--leading-xl);
  font-weight: var(--weight-regular);
  color: var(--text);
  text-wrap: pretty;
  /* THE RATIFIABLE LINE IS SOMEBODY'S PROSE and may hold a token nothing can break — a class name, a url, an
     identifier. The claims screen says so for its sentence on '.ctext'; the law screen's '.rule__plain' said nothing,
     so one long word in a rule's plain line ran off the card and '.card''s 'overflow: clip' cut it off unseen. */
  overflow-wrap: anywhere;
}
.claim__verdict { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.claim__line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); font-size: var(--text-sm); color: var(--text-dim); }
.claim__line .id { overflow-wrap: anywhere; }
/* A quoted note or an objection: the icon beside the words, never on a line of its own. */
.claim__line[data-quote] { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; color: var(--text); }
.claim__line[data-quote] > .icon { margin-block-start: 0.15em; }
.claim__quiet { justify-self: start; font-size: var(--text-sm); font-weight: var(--weight-regular); }
.claim__marks { display: inline-flex; gap: var(--space-0); }
.claim__marks .mark { width: var(--text-sm); height: var(--text-sm); }
.claim__rail {
  display: grid;
  grid-template-columns: auto auto var(--height-control-small);
  align-content: start;
  align-items: center;
  gap: var(--space-2);
}
.claim__rail > .label { justify-self: end; }
.claim__body { grid-column: 1 / -1; display: grid; gap: var(--space-5); padding-block-start: var(--space-4); border-top: var(--line-width) solid var(--line); }
.claim__section { display: grid; gap: var(--space-2); }
.claim__own { display: grid; gap: var(--space-1); justify-items: start; }
.claim__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* NO WIDER THAN WHAT HOLDS IT, AND IT WRAPS RATHER THAN RUN OUT: a chip naming an agent by its whole name and the
   person it typed for, on the tray's page, was one unbreakable line 357px long, and on a phone the page clipped its
   last 20px off. It keeps one line wherever one line fits, so nothing changes where there is
   room; 'flex: none' so a chip in a row still holds its width while there is room for it and the row's other words
   give way first, as they did while it could not wrap at all. */
.agent-chip {
  display: inline-flex; align-items: center; gap: var(--space-1); flex: none; max-width: 100%;
  min-height: var(--height-tag); padding-inline: var(--space-2);
  border: var(--line-width) dashed var(--agent); border-radius: var(--radius-small);
  color: var(--agent); font-size: var(--text-sm); line-height: var(--leading-xs); overflow-wrap: anywhere;
}
.agent-chip .icon { width: var(--text-sm); height: var(--text-sm); }
/* The robot glyph (robotEl): an agent's hand, in the agent's colour, on either screen. */
.robot { color: var(--agent); flex: none; }

.people { display: grid; }
.person {
  display: grid;
  grid-template-columns: calc(var(--text-sm) * 2 + var(--space-1)) 8em minmax(0, 1fr);
  gap: var(--space-1) var(--space-3);
  align-items: baseline;
  padding-block: var(--space-2);
  border-top: var(--line-width) solid var(--line);
}
.person:first-child { border-top: 0; }
.person__name { font-weight: var(--weight-medium); }
.person__what { display: grid; gap: var(--space-2); color: var(--text-dim); }
.person__note { display: grid; gap: var(--space-0); color: var(--text); }
.person[data-agent] {
  margin-block: var(--space-1);
  padding-inline: var(--space-3);
  border: var(--line-width) dashed var(--agent);
  border-radius: var(--radius-control);
}
.person[data-agent] + .person { border-top: 0; }
.person__recorded { grid-column: 2 / -1; display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); color: var(--agent); }

@container card (max-width: 640px) {
  .claim { grid-template-columns: minmax(0, 1fr); }
  .claim__rail { justify-content: start; grid-template-columns: 7.5em auto var(--height-control-small); }
  .claim__rail > .label { justify-self: start; }
  .person { grid-template-columns: calc(var(--text-sm) * 2 + var(--space-1)) minmax(0, 1fr); }
  .person__what, .person__recorded { grid-column: 2; }
}

/* slice header --------------------------------------------------------------------------------- */
.slice-header { container: slice / inline-size; display: grid; gap: var(--space-4); }
.slice-header__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.slice-header__title { display: grid; gap: var(--space-0); font-size: var(--text-xl); line-height: var(--leading-xl); font-weight: var(--weight-strong); text-wrap: balance; }
.slice-header__lists { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-4) var(--space-6); }
.slice-header__list { display: grid; gap: var(--space-2); align-content: start; }
.slice-header__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.slice-header__floor { color: var(--text-dim); }
.slice-header__add { display: flex; gap: var(--space-2); max-width: 26em; }
@container slice (max-width: 640px) { .slice-header__lists { grid-template-columns: minmax(0, 1fr); } }

/* rule card ------------------------------------------------------------------------------------ */
.rule { display: grid; grid-template-columns: 3em minmax(0, 1fr); gap: var(--space-3); }
.rule__id { padding-block-start: var(--space-1); }
.rule__main { display: grid; gap: var(--space-3); min-width: 0; }
.rule__pair { display: grid; gap: var(--space-2); }
.rule__line {
  font-family: var(--font-reading);
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
  color: var(--text-dim);
  text-wrap: pretty;
  /* Markdown brings its own '.md' wrapping; a struck rule's lead is a bare paragraph and does not. */
  overflow-wrap: anywhere;
}
.card[data-open] .rule__line { color: var(--text); }
.rule__labelled { display: grid; gap: var(--space-1); }
.rule__status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); font-size: var(--text-sm); color: var(--text-dim); font-variant-numeric: tabular-nums; }
.rule__status-words { min-width: 0; }
.rule__status-words > .mark { vertical-align: -0.15em; margin-inline-end: var(--space-1); }
.rule__body { display: grid; gap: var(--space-4); padding-block-start: var(--space-4); border-top: var(--line-width) solid var(--line); }
.rule__vet { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
/* A rule missing a slot it needs: loud by pattern and words, with no answer's colour. */
.rule__missing {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-0) var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: var(--line-width) dashed var(--text-faint);
  border-radius: var(--radius-control);
  background: repeating-linear-gradient(135deg, var(--hover) 0 6px, transparent 6px 12px);
}
.rule__missing .icon { margin-block-start: 0.2em; color: var(--text); }
.rule__missing b { font-weight: var(--weight-strong); }
.rule__missing p { grid-column: 2; font-size: var(--text-sm); color: var(--text-dim); }
.claims-cited { display: grid; }
.claims-cited li { list-style: none; padding-block: var(--space-2); border-top: var(--line-width) solid var(--line); font-family: var(--font-reading); font-size: var(--text-md); line-height: var(--leading-md); }
.claims-cited li:first-child { border-top: 0; padding-block-start: 0; }
.claims-cited { padding: 0; }
/* Added for the law screen's build, undesigned: a claim listed under Checked by stands on its claim state's edge, the
   card's edge drawn inside the row so the row's top rule and the edge never meet; its state is in words beside it. */
.claims-cited li[data-tone] { padding-inline-start: calc(var(--edge-width) + var(--space-3)); box-shadow: inset var(--edge-width) 0 0 var(--tone); }
.claims-cited li:first-child[data-tone] { padding-block-start: var(--space-1); }
.claims-cited li .claim__line { font-family: var(--font-sans); }
/* A pointer that reaches no claim: loud by pattern and words, with no answer's colour, as .rule__missing is. */
.claims-cited li[data-loud] {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2);
  font-family: var(--font-sans);
  background: repeating-linear-gradient(135deg, var(--hover) 0 6px, transparent 6px 12px);
}
.agents { display: grid; gap: var(--space-5); color: var(--text-dim); line-height: var(--leading-lg); }
.agents section { display: grid; gap: var(--space-2); }
.agents p, .agents li { overflow-wrap: anywhere; }
.agents b { color: var(--text); font-weight: var(--weight-strong); }
.agents s { color: var(--text-faint); }
.agents ul { display: grid; gap: var(--space-1); padding-inline-start: var(--space-4); }
.history { display: grid; padding: 0; }
.history > li { list-style: none; display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: var(--space-1) var(--space-3); padding-block: var(--space-3); border-top: var(--line-width) solid var(--line); }
.history > li:first-child { border-top: 0; padding-block-start: 0; }
.history__what { color: var(--text); }
.history .fold__body { border-inline-start: var(--line-width) solid var(--line); margin-inline-start: calc(var(--text-md) / 2); padding-inline-start: var(--space-3); }
.said { display: grid; gap: var(--space-0); padding-inline-start: var(--space-3); border-inline-start: 2px solid var(--line-strong); color: var(--text); font-family: var(--font-reading); font-style: italic; }
.said cite { font-family: var(--font-sans); font-style: normal; font-size: var(--text-sm); color: var(--text-dim); }
@container card (max-width: 520px) {
  .rule { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .history > li { grid-template-columns: minmax(0, 1fr); }
}

/* **THE ONE HOME FOR WHY A SINGLE-COLUMN GRID PINS ITS COLUMN**, and the screens' own sheets point here.

   A grid's implicit column is 'auto', so its MIN track sizing function is 'auto' too, which resolves to the widest
   minimum contribution of anything in it — a folded preview, a 'white-space: nowrap' line, one unbreakable word. The
   column then grows past the box, and everything in it is laid out against the wider figure. 'min-width: 0' on the
   GRID does not answer it: the container shrinks and its column does not. 'minmax(0, 1fr)' does, twice over — the
   column's min becomes 0, and with no 'auto' min, css-grid §6.6 stops giving the items in it an automatic minimum, so
   nothing inside can force it open. ('min-width: 0' on every item also holds it, for exactly the items that carry it.)

   Measured: one long comment made a maximized claim scroll sideways, because '.cline q', a deliberate one-line
   summary, carried its whole line's width up into '.ztalk''s column. 'prose-shrinks-browser.test.ts' puts one long
   word in every prose slot of both screens and fails naming any column that grew. Every single-column grid in a
   composition is pinned to the width it is given. */
.claim__main, .claim__body, .claim__section, .people, .person__what, .rule__main, .rule__pair, .rule__labelled,
.rule__body, .agents, .agents section, .history > li > div, .card-list, .slice-header, .slice-header__list {
  grid-template-columns: minmax(0, 1fr);
}
.history > li > div { display: grid; gap: var(--space-1); min-width: 0; }

/* ---------------------------------------------------------------------------------------------- */
/* the thumb floor — on a phone every control the system defines is at least 44px tall             */
/* ---------------------------------------------------------------------------------------------- */
/* Claim Q7QH8P: *every control can be pressed with a thumb*. 44px is the floor, '--height-tap' is the token, and
   this is the one place the system's controls are put on it, so the press target and the pointer target are one
   declaration each and cannot come apart.

   **AND THIS ONE IS A MEDIA QUERY ON PURPOSE, which is the opposite of what the rest of this package does.**
   'styles.ts' and 'mount.ts' argue at length that a media query asks the WINDOW about a decision whose cost comes
   out of the COMPONENT'S own width — a 148px rail column eating a third of a 320px box — and they are right about
   that kind of decision. This is not that kind. A thumb belongs to the DEVICE. 44px is the right floor at 390px of
   window whether the component was given 390px or 200px of it, and it is the wrong floor on a 1440px desktop even
   when the component is mounted in a 320px column, because what is pressing there is a mouse. So the viewport is
   the correct box to ask, and a container query would be the wrong question asked precisely.

   **What it costs an adopter, named rather than discovered:** a page read in a browser window 700px wide or
   narrower — a laptop with a half-screen window, not only a phone — gets 44px controls where it used to get 32px.
   Above 700px nothing moves. 700px is the frame's own phone threshold in 'app-styles.ts', reused rather than
   doubled, because two numbers that must agree come apart.

   'min-height' rather than 'height', so a control whose content needs more room still grows, and so a control that
   sets 'height: auto' of its own — '.rule__id' in 'law-styles.ts' is one — is floored all the same. */
@media (max-width: 700px) {
  .button, :where(.mechaneion-chrome) :where(.host-content) :where(button), .button[data-size="small"],
  .icon-button, .vote__option, .switch__option, .field, select.field, .field[data-size="small"],
  .rule__id {
    min-height: var(--height-tap);
  }
  /* THE SYSTEM'S OTHER PRESSABLE ROWS: the fold's summary, a rail row — a book, a rule under it, a shelf — and a chip
     that is a button. Each was a control this sheet defines and left at the desk's floor: measured on the app's own
     page at 390x844 on 2026-10-11 (site/test/every-screen-phone-browser.test.ts), a rule's two folds were 28px, Law's
     book picker drew its books and shelves at 32px and its rules at 28px, and the chip on a claim card that opens a
     commission was 24px. The rule row is named with its level because its own floor above is the more
     specific selector. */
  .fold__summary, .rail-item, .rail-item[data-level="rule"], button.chip { min-height: var(--height-tap); }
  /* An icon-only control needs the floor in both directions: a 44px-tall sliver 28px wide is still a miss. */
  .icon-button { min-width: var(--height-tap); }
  /* The switch is the box its options sit in, so it grows to hold them at the floor rather than capping them at it:
     its own padding is on top, which is why there is no height named here at all. */
  .switch { height: auto; align-items: stretch; }
  /* A textarea is sized by its rows and is already far past the floor; pinning it would cap it. */
  textarea.field { min-height: 0; }

  /* THE PAGE HEADER, ONE SIZE DOWN, and it is here because it is the design system's and both screens wear it.
     Measured in chrome-headless-shell at 390x844 on 2026-10-05: the grouping's name at '--text-2xl' wrapped to three
     lines, 83px, with its counts stacked under it for another 90 — 173px of the window before the screen's own tools,
     on a screen where not one claim card was wholly inside it. The counts take the quiet size they wear everywhere
     else. Above 700px nothing moves. */
  .page-header__title { font-size: var(--text-lg); line-height: var(--leading-lg); }
  .page-header__counts { font-size: var(--text-xs); line-height: var(--leading-xs); gap: var(--space-0) var(--space-3); }
  /* The 20px column gap between the title and the counts was what put the counts on four lines at 320px. */
  .page-header { gap: var(--space-0) var(--space-3); }
}

@media (prefers-reduced-motion: reduce) {
  :where(.mechaneion-chrome), :where(.mechaneion-chrome) *, :where(.mechaneion-chrome)::before, :where(.mechaneion-chrome) *::before, :where(.mechaneion-chrome)::after, :where(.mechaneion-chrome) *::after { transition: none !important; scroll-behavior: auto !important; }
}


/* Pinned to its containing block's top corner: the rail's live region is the body's last child, and left at its static
   place it sat 1px below the window and gave the whole page a 1px scroll (measured at 1440x900 and 390x844). */
.sr { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- the app's frame: a rail and a pane ----------------------------------------------------------- */
/* The app IS the window, edge to edge: no border and no radius. v6 draws it as a card inset in a pretend desktop window,
   and that card is the mockup's picture of a window, not a part of the app. Nothing outside it scrolls; the rail's open
   section and the pane each scroll inside themselves, at every width. */
.app { --rail-w: 320px; --st-in: var(--works); --st-live: var(--agent); --st-you: var(--vet-wrong); --st-bad: var(--doesnt);
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--surface-raised); }
/* The rail, its handle and the pane, under the header: the row the app used to be. */
.appmain { position: relative; flex: 1 1 auto; min-height: 0; display: flex; overflow: hidden; }

/* ---- THE HEADER: the mark, the project, and whoever is signed in ---------------------------------- */
/* Mechaneion's mark is in the corner at every width and in every state, signed out included (EE19TS), and the project
   is BESIDE it rather than in place of it. The account is at the far right, which is what took the sign-in out of the
   rail. Nothing here scrolls and nothing here moves: the bar is the frame's one fixed row. */
.appbar { flex: none; display: flex; align-items: center; gap: var(--space-3); min-height: var(--height-control);
  padding: var(--space-1) var(--space-3); border-bottom: var(--line-width) solid var(--line); background: var(--surface); }
.appbar .brand { flex: none; display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
/* The one bronze thing on the page, and the one glyph with a stroke of its own (icons.ts). */
.appbar .brand__mark { width: calc(var(--size) * 1.375); height: calc(var(--size) * 1.375); color: var(--bronze); }
.appbar .brand__name { font-size: var(--text-lg); font-weight: var(--weight-strong); color: var(--text); white-space: nowrap; }
/* The project, named after the mark: a picker when the page can offer one, and the name alone when it cannot. */
.appbar__proj { position: relative; min-width: 0; display: flex; align-items: center; }
.appbar__proj:empty { display: none; }
.appbar .proj { min-width: 0; display: flex; align-items: center; gap: var(--space-1); min-height: var(--height-control-small);
  padding-inline: var(--space-2); border: 0; border-radius: var(--radius-control); background: transparent; color: var(--text); font: inherit; }
.appbar button.proj { cursor: pointer; }
.appbar button.proj:hover, .appbar button.proj[aria-expanded="true"] { background: var(--hover); }
.appbar .proj::before { content: ""; flex: none; width: var(--line-width); height: var(--text-md); margin-inline-end: var(--space-2); background: var(--line-strong); }
.appbar .proj__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--weight-medium); }
.appbar .proj__more { flex: none; display: inline-grid; color: var(--text-faint); }
.appbar .proj__more .icon { width: var(--text-sm); height: var(--text-sm); }
.projmenu { position: absolute; z-index: 45; top: calc(100% + var(--space-1)); inset-inline-start: var(--space-2); min-width: 16rem; }
.projmenu[hidden] { display: none; }
.projmenu .menu__item[aria-current="true"] { background: var(--selected); }
/* Whoever is signed in, hard against the window's right edge. */
.appbar__end { position: relative; margin-inline-start: auto; min-width: 0; max-width: 60%; display: flex; align-items: center; justify-content: flex-end; }

/* ---- THE TRAY: its button and badge in the header, just left of whoever is signed in, and its popover (tray-styles.ts) ---- */

/* the button, just left of whoever is signed in, and its count of what has not been opened */
.traybtn { position: relative; flex: none; display: inline-grid; place-items: center; width: var(--height-control); height: var(--height-control);
  margin-inline-end: var(--space-1); padding: 0; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--text-dim); cursor: pointer; }
.traybtn .icon { width: var(--text-lg); height: var(--text-lg); }
.traybtn:hover, .traybtn[aria-expanded="true"] { background: var(--hover); color: var(--text); }
.traybtn:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: -1px; }
.traybtn__badge { position: absolute; top: 1px; inset-inline-end: 0; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px;
  font-size: calc(var(--size) * 0.6875); line-height: 17px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: center;
  color: var(--ground); background: var(--bronze); box-shadow: 0 0 0 2px var(--surface); }
.traybtn__badge[hidden] { display: none; }
@media (pointer: coarse), (max-width: 700px) { .traybtn { width: var(--height-tap); height: var(--height-tap); } }

/* ---- tray (the mockup's, as written) ---- */
.traypop { --t-line-soft: color-mix(in srgb, var(--line) 37%, var(--surface)); --t-fg-dim: color-mix(in srgb, var(--text) 50%, var(--text-dim));
  --t-faint: color-mix(in srgb, var(--text-faint) 60%, var(--surface)); --t-bronze-lift: color-mix(in srgb, var(--bronze) 55%, var(--text));
  position: absolute; z-index: 45; top: calc(100% + var(--space-1)); inset-inline-end: 0; width: min(372px, calc(100vw - 32px));
  max-height: min(70vh, 560px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow-popover); color: var(--text); text-align: start; }
.traypop[hidden] { display: none; }
.traypop__top { display: flex; align-items: center; gap: 10px; padding: 13px 15px; border-bottom: 1px solid var(--line); }
.traypop__title { font-size: var(--text-md); font-weight: 600; flex-grow: 1; min-width: 0; }
.traypop__count { font-size: calc(var(--size) * 0.6875); color: var(--ground); background: var(--bronze); border-radius: 999px; padding: 2px 8px; font-weight: 600; font-variant-numeric: tabular-nums; }
.traypop__seenall { font: inherit; font-size: var(--text-xs); background: none; border: none; color: var(--text-faint); cursor: pointer; padding: 4px 2px; min-height: 32px; }
.traypop__seenall:hover { color: var(--t-bronze-lift); }

.tgroup { border-bottom: 1px solid var(--t-line-soft); }
.tgroup__head { display: flex; gap: 10px; padding: 12px 15px 9px; align-items: baseline; }
.tgroup__why { flex-grow: 1; min-width: 0; font-size: calc(var(--size) * 0.78125); color: var(--t-fg-dim); }
.tgroup__when { font-size: calc(var(--size) * 0.6875); color: var(--t-faint); flex: none; font-variant-numeric: tabular-nums; }
.tgroup__rows { padding: 0 15px 11px; display: flex; flex-direction: column; gap: 2px; }

.trow { display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: var(--surface-raised);
  font: inherit; text-align: start; text-decoration: none; color: inherit; cursor: pointer; }
.trow:hover { background: var(--hover); }
.trow--alone { margin: 0 15px 11px; width: calc(100% - 30px); }
/* A line told on its own straight under the top: the mockup's groups open with their head's 12px, so a lone row takes 11. */
.traypop__top + .tline > .trow--alone { margin-top: 11px; }
.traypop:focus { outline: none; }
.tdot { width: 6px; height: 6px; border-radius: 50%; flex: none; margin-top: 7px; }
.tdot--assigned { background: var(--vet-good); }
.tdot--back { background: var(--bronze); }
.tdot--told { background: var(--text-faint); }
.tdot--waiting { background: var(--rung-needsyou); }
.tline--waiting { margin-top: 11px; }
.trow__body { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.trow__what { font-size: var(--text-sm); line-height: 1.35; overflow-wrap: anywhere; }
.trow__kind { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 7px; font-size: calc(var(--size) * 0.65625); letter-spacing: 0.05em; text-transform: uppercase; color: var(--t-faint); font-weight: 600; }
.trow__note { font-size: var(--text-xs); line-height: 1.35; color: var(--text-faint); overflow-wrap: anywhere; }
.trow__n { font-size: calc(var(--size) * 0.71875); color: var(--text-faint); flex: none; font-variant-numeric: tabular-nums; margin-top: 2px; }
.trow__waiting { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: var(--radius-small); letter-spacing: 0.03em;
  color: var(--rung-needsyou); background: color-mix(in srgb, var(--rung-needsyou) var(--wash), transparent); }
/* the line's dismiss: sees every thing in it without opening it (4BQFA2) */
.tline { position: relative; }
.tline__x { position: absolute; top: 8px; inset-inline-end: 10px; display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0;
  border: 0; border-radius: 6px; background: transparent; color: var(--t-faint); cursor: pointer; }
.tline__x:hover { background: var(--hover); color: var(--text); }
.tline__x .icon { width: 14px; height: 14px; }
.tgroup.tline .tline__x { top: 9px; }
.tgroup.tline .tgroup__head { padding-inline-end: 44px; }
.tline > .trow--alone { padding-inline-end: 36px; }
/* On a lone row the dismiss sits inside the row's own corner: the row's 15px margin, then 10px in. */
.tline > .trow--alone ~ .tline__x { inset-inline-end: 25px; }
.traypop__top + .tline > .trow--alone ~ .tline__x { top: 19px; }

.traypop__none { margin: 0; padding: 16px 15px; font-size: calc(var(--size) * 0.78125); color: var(--text-faint); }
.traypop__foot { padding: 11px 15px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.traypop__foot button { font: inherit; font-size: calc(var(--size) * 0.78125); color: var(--bronze); background: none; border: 0; padding: 4px 0; min-height: 32px; cursor: pointer; }
.traypop__foot button:hover { color: var(--t-bronze-lift); }
.traypop__foot span { font-size: calc(var(--size) * 0.71875); color: var(--t-faint); }
.trow:focus-visible, .traypop__seenall:focus-visible, .traypop__foot button:focus-visible, .tline__x:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: -1px; }
/* IN A HAND THE POPOVER'S PRESSES ARE A THUMB'S FLOOR. Measured with a thumb at 390x844: the top's press that sees
   everything was 32px tall, and a line's dismiss a 24px square in the line's corner. The square becomes the line's
   whole top corner at 44px, and the words beside it give it the room. */
@media (pointer: coarse), (max-width: 700px) {
  .traypop__seenall, .traypop__foot button { min-height: var(--height-tap); }
  .tline__x, .tgroup.tline .tline__x { top: 0; inset-inline-end: 0; width: var(--height-tap); height: var(--height-tap); }
  .tgroup.tline .tgroup__head { padding-inline-end: calc(var(--height-tap) + var(--space-1)); }
  .tline > .trow--alone { padding-inline-end: calc(var(--height-tap) + var(--space-1)); }
  .tline > .trow--alone ~ .tline__x { inset-inline-end: 15px; }
  .traypop__top + .tline > .trow--alone ~ .tline__x { top: 11px; }
}

/* THE MARK ON THE PROJECT SWITCHER: a project whose tray holds something not yet opened */
.proj__lit, .menu__lit { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--bronze); }
.proj__lit { margin-inline-start: var(--space-1); }
.menu__item .menu__lit { margin-inline-start: auto; }


/* ---- THE BOTTOM BAR: what the rail becomes on a phone ---------------------------------------------- */
/* Commissions, Claims, Law and Owed across the bottom edge, which is the band a thumb reaches without the hand
   moving. **It is drawn at every width and hidden here**, rather than built only at phone widths: the frame builds it
   unconditionally so one press handler serves both, and so the suite can exercise it at happy-dom's fixed 1024px
   window (see 'tabbar' in @mechaneion/shell). Above 700px the rail itself is on the screen, so a second copy of the
   same four names would be two controls for one act. */
.tabbar { display: none; }
/* Its tab is '.tabbar__tab' and not '.tab'. A rule on a class applies wherever an element carries that class, inside
   '.mechaneion-chrome' or not (docs/mounting.md says so, and lists this sheet's plain words) — and '.tab' is the most
   common class name in web UI, so adding it here would have taken over an adopter's own tabs silently and only at
   phone widths. The 2026-09-20 collision in this package was a generic '.rail' doing exactly that to the claims
   tree's box.

/* ---- THE RAIL: commissions, always there ----------------------------------------------------------- */
.lrail { flex: none; width: var(--rail-w); min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--surface); }
.app[data-rail="hidden"] .lrail, .app[data-rail="hidden"] .handle { display: none; }
.lrail__top { flex: none; display: grid; gap: var(--space-1); padding: var(--space-1) var(--space-2) 0; }
/* The hide control, alone: the mark and the project are the header's, and the store's location is the pane foot's line. */
.repo { display: flex; align-items: center; gap: var(--space-2); min-height: var(--height-control-small); }
.repo .icon-button { margin-inline-start: auto; }
.icon-button .icon { width: var(--text-lg); height: var(--text-lg); }

/* the drag handle on the rail's right edge: a hairline that thickens under the pointer, while dragging, and on focus */
.handle { flex: none; position: relative; z-index: 6; width: 11px; margin-inline: -5px; cursor: col-resize; touch-action: none; outline: none; }
.handle::before { content: ""; position: absolute; inset-block: 0; left: 5px; width: var(--line-width); background: var(--line);
  transition: background-color var(--motion-fast), box-shadow var(--motion-fast); }
.handle:hover::before { background: var(--line-strong); box-shadow: 0 0 0 1px var(--line-strong); }
.handle[data-dragging]::before { background: var(--text-dim); box-shadow: 0 0 0 1px var(--text-dim); }
.handle:focus-visible::before { background: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
.handle__grip { position: absolute; top: 50%; left: 50%; width: 6px; height: 32px; transform: translate(-50%, -50%); border-radius: 3px;
  background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--line-strong); opacity: 0; pointer-events: none; transition: opacity var(--motion-fast); }
.handle:hover .handle__grip, .handle:focus-visible .handle__grip, .handle[data-dragging] .handle__grip { opacity: 1; }
.handle:focus-visible .handle__grip { box-shadow: inset 0 0 0 2px var(--focus); }
body[data-dragging], body[data-dragging] * { cursor: col-resize !important; user-select: none; }

/* ---- THE ACCORDION: Commissions, Claims, Law, in that order, ONE open at a time (ruled by Zack, 28 Sep) ------------- */
/* The open section takes the rail's remaining height and scrolls on its own; the headers below it sit just above the foot. */
/* v6: any section can close, down to none open, when the headers stack at the top and the rail below them is empty.
   A section is its header and its FOLD — the one wrapper around its list — laid straight into the column, so the open fold
   takes the remaining height. Opening, closing and switching animate the folds' heights (from script: see accAnimate). */
.acc { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.acc__sec { display: contents; }
.acc[data-none]::after { content: ""; flex: none; border-top: var(--line-width) solid var(--line); }
.acc__head { position: relative; flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2);
  border-top: var(--line-width) solid var(--line); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.acc__fold { flex: 0 0 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.acc__fold[hidden] { display: none; }
.acc__sec[data-open] > .acc__fold { flex: 1 1 0; }
/* v6: a header drags up or down to reorder the sections. The grip is a quiet handle in its left margin, shown under the pointer;
   the header's background is the drag surface (its chevron and name keep the pointer). Lifted, it floats on the popover's shadow. */
.acc__grip { position: absolute; left: 1px; top: 50%; width: 6px; height: 10px; margin-top: -5px; color: var(--text-faint); opacity: 0;
  pointer-events: none; transition: opacity var(--motion-fast); }
.acc__head:hover .acc__grip, .acc__head:has(:focus-visible) .acc__grip, .acc__head[data-lifted] .acc__grip { opacity: 1; }
@media (hover: none) { .acc__grip { opacity: 0.6; } }
.acc__head[data-lifted] { z-index: 5; transform: translateY(var(--lift, 0px)) scale(1.02); border-top-color: transparent; border-radius: var(--radius-control);
  background: var(--surface-raised); box-shadow: var(--shadow-popover), 0 0 0 var(--line-width) var(--line-strong); }
.acc__head[data-lifted] .acc__name:not([aria-current="page"]) { background: transparent; }
body[data-reordering], body[data-reordering] * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
/* where it lands: a line across the rail with a ring at its start, drawn over the lifted header rather than under it */
.acc__drop { position: absolute; z-index: 6; left: var(--space-1); right: var(--space-2); height: 2px; border-radius: 1px; background: var(--focus); pointer-events: none; }
.acc__drop::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border: 2px solid var(--focus); border-radius: 50%; background: var(--surface); }
.acc__drop[hidden] { display: none; }
/* two targets, and they look it: the chevron is a small box of its own; the name is a wide row */
.acc__chev { display: inline-grid; place-items: center; width: var(--height-control-small); height: var(--height-control-small); padding: 0;
  border: var(--line-width) solid var(--line); border-radius: var(--radius-control); background: var(--surface-raised); color: var(--text-faint); cursor: pointer;
  transition: background-color var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast); }
.acc__chev .icon { width: var(--text-sm); height: var(--text-sm); transition: transform var(--motion-fast); }
.acc__chev[aria-expanded="true"] { background: transparent; border-color: transparent; }
.acc__chev[aria-expanded="true"] .icon { transform: rotate(90deg); }
.acc__chev:hover { background: var(--hover); color: var(--text); border-color: var(--line-strong); }
.acc__name { min-width: 0; display: flex; align-items: center; gap: var(--space-2); min-height: var(--height-control); padding-inline: var(--space-2);
  border: 0; border-radius: var(--radius-control); background: transparent; color: var(--text); font: inherit; font-weight: var(--weight-strong); text-align: start; cursor: pointer; }
.acc__name:hover { background: var(--hover); }
.acc__name:active { background: var(--selected); }
.acc__name[aria-current="page"] { background: var(--selected); }
.acc__name .icon { color: var(--text-dim); }
.acc__sum { margin-inline-start: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm);
  font-weight: var(--weight-regular); color: var(--text-faint); font-variant-numeric: tabular-nums; }
.acc__pick { flex: none; display: block; padding: 0 var(--space-2) var(--space-1) calc(var(--space-2) + var(--height-control-small) + var(--space-1)); }
.acc__pick .field { width: 100%; }
.acc__body { flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: var(--space-1) var(--space-2) var(--space-4); }
.acc__quiet { font-style: italic; }
.acc > .acc__quiet { padding: var(--space-3) var(--space-2); }
.acc .rail { gap: 1px; }
.acc .rail-item { align-items: start; padding-block: var(--space-1); }
.acc .rail-item__name { white-space: normal; overflow-wrap: anywhere; }
/* v6: Claims in the rail is grouped by TIER (Zack, 28 Sep). Each tier is a heading that folds, drawn like a Law book in the
   same rail, and its slices sit under it in the same indented group Law's rules do. */
.acc__item { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-1); }
.acc__item .rail-item__meta { padding-top: 1px; }
.acc__item > .rungs { grid-column: 1 / -1; margin-bottom: 2px; }
.acc .tierhead { align-items: center; row-gap: var(--space-1); padding-block: var(--space-1) var(--space-2); font-size: var(--text-sm); color: var(--text-dim); }
.tierhead b { font-weight: var(--weight-medium); color: var(--text); }
.tierhead > .rungs { grid-column: 2 / -1; }
.tierpass { font-size: var(--text-xs); line-height: var(--leading-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--works); }
.tier__fold { overflow: hidden; }
.tier__fold[hidden] { display: none; }
/* THE CLAIMS SCREEN'S OWN BAR — '.rungs', exactly as that screen draws it on a slice card and beside a tier, from the
   one sheet both draw it with (RUNGS_STYLES, rungs.ts). One bar, at the tier and at the slice, so a reader learns it once. */
.app { --rung-h: 8px; }
.rungs { display: flex; height: var(--rung-h); gap: var(--line-width); border-radius: var(--radius-small); overflow: hidden; background: var(--rung-none); }
.rungs > span { display: block; min-width: 0; }
.rungs > [data-rung="none"] { background: var(--rung-none); }
.rungs > [data-rung="vetted"] { background: var(--rung-vetted); }
.rungs > [data-rung="almost"] { background: var(--rung-almost); }
.rungs > [data-rung="works"] { background: var(--rung-works); }
.rungs > [data-rung="safe"] { background: var(--rung-safe); }
.rungs > [data-rung="needsyou"] { background: var(--rung-needsyou); }
.acc .rail-item[data-level="book"] { align-items: center; }
.acc .rail-item[data-level="book"] > .rail-item__name.id { font-size: var(--text-sm); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc .rail-item[data-level="rule"] { align-items: baseline; }
.acc .rail-item[data-level="rule"] .rail-item__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc .rail-group { margin-block: 2px var(--space-2); }
/* Law's shelf: a small tray at the foot of the Law section */
.acc__tray { flex: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1); padding: var(--space-2); border-top: var(--line-width) solid var(--line); }
.shelf { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-width: 0; min-height: var(--height-control-small); padding-inline: var(--space-2);
  border: var(--line-width) solid var(--line); border-radius: var(--radius-control); background: var(--surface-raised); color: var(--text-dim); font: inherit; font-size: var(--text-sm); cursor: pointer; }
.shelf:hover { background: var(--hover); color: var(--text); }
.shelf[aria-current="true"] { background: var(--selected); color: var(--text); }
.shelf__n { font-variant-numeric: tabular-nums; color: var(--text-faint); }

/* Law's own rail rows, as the law screen draws them (LAW_RAIL_STYLES): the section heads, the loud count, the markers. */
.rail-item__meta[data-loud] { color: var(--text); font-weight: var(--weight-strong); }
/* The robot on a rule an agent added alone takes a column of its own after the title, so the row stays one line. */
.rail-item[data-level="rule"] > .law__rail-agent { grid-row: 1; grid-column: 4; display: inline-flex; }
/* The forbids moved under a standing vetting: the same column trick as the robot, one further along, and faint —
   the vetting is not sent back, so the rail says look, never wrong. */
.rail-item[data-level="rule"] > .law__rail-moved { grid-row: 1; grid-column: 5; display: inline-flex; color: var(--text-faint); }
.law__rail-moved > .icon { width: var(--text-sm); height: var(--text-sm); }
/* The same index in the rail, where the heading is a label over its run and may be longer than the rail is wide. */
.law__rail-section { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- rail rows: the Commissions section (COMMISSIONS_RAIL_STYLES, v6's rail rows, under .lrail) ---- */

/* **The gap between groups is bigger than the gap inside one**, which is most of what makes a long list readable:
   2px between the lines of one commission, 8px between commissions, 20px between groups. */
.lrail .bk { margin-block-end: var(--space-5); }
.lrail .bk:last-child { margin-block-end: 0; }
/* A group's rows, hanging off a hairline, as .rail-group holds the Claims and Law rails' rows. */
.lrail .bk__items { display: grid; gap: var(--space-2); margin-inline-start: calc(var(--space-2) + var(--text-md) / 2);
  padding-inline-start: var(--space-2); border-inline-start: var(--line-width) solid var(--line); }
.lrail .bkh { margin: 0; font: inherit; }
.lrail .row { position: relative; display: grid; grid-template-columns: var(--text-md) minmax(0, 1fr); gap: 2px var(--space-2); width: 100%;
  padding: var(--space-2); border: 0; border-radius: var(--radius-control); background: transparent; color: inherit;
  font: inherit; text-align: start; cursor: pointer; }
/* **A commission's row is ONE column, because nothing expands in it** (QMBVA1): the chevron held the first column, and
   a loose row's glyph still does. So the name and every line under it start at the row's own edge, each on its own grid
   row, and the width the chevron took goes back to the title — the longest thing on the row and the one he reads to
   find a commission. The parts below that belong to the SECOND column say so against a row that has one, rather than
   this rule putting its children back in the first: a blanket child selector here has the same specificity as
   .lrail .row .mt and loses to it on source order, which left the name in a nought-wide column 891px tall. */
.lrail .row[data-cm] { grid-template-columns: minmax(0, 1fr); }
.lrail .row:hover { background: var(--hover); }
.lrail .row[aria-current="true"] { background: var(--selected); }
.lrail .row[data-inside="true"] { background: color-mix(in srgb, var(--selected) 55%, transparent); }
.lrail .row .nm { min-width: 0; overflow-wrap: anywhere; line-height: 1.3; }
/* **A commission's row leads with its NAME, so it is weighted like one** (37YBBY, his option A on the rail mockup):
   a loose row's label stays regular, so the rail reads as a list of names. Only a commission's row carries data-cm. */
.lrail .row[data-cm] .nm { font-weight: var(--weight-strong); }
.lrail .row .mt { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-2); font-size: var(--text-sm); line-height: 1.35; color: var(--text-faint); }
/* Beside the glyph, on a row that has one: a loose row's. A commission's row has no first column to clear. */
.lrail .row:not([data-cm]) .mt { grid-column: 2; }
/* **A pip strip WRAPS in a 320px rail**, where it does not in the pane: measured in chrome-headless-shell at 1440x900
   over the live board of 2026-10-09, the 25 pips of *Zack signs up on a live Mechaneion* ran 6.83px past the rail's
   clipped edge, so its last three tasks were not drawn at all and nothing said so. */
.lrail .row .pips { flex-wrap: wrap; min-width: 0; }
.lrail .row .gl { color: var(--text-faint); text-align: center; line-height: 1.3; }
.lrail .row .say { font-size: var(--text-sm); line-height: 1.35; color: var(--text-dim); }
.lrail .row .say[data-tone] { color: var(--tone); }
.lrail .row .flag { display: flex; gap: var(--space-1); align-items: flex-start; font-size: var(--text-sm); line-height: 1.35; font-weight: var(--weight-medium); color: var(--doesnt); }
.lrail .row .flag .icon, .lrail .row .offerline .icon { width: var(--text-sm); height: var(--text-sm); margin-top: 0.12em; }
.lrail .row .offerline { display: flex; gap: var(--space-1); align-items: flex-start; font-size: var(--text-sm); line-height: 1.35; color: var(--unsaved); }
.lrail .row[data-alarm="true"] { background: color-mix(in srgb, var(--doesnt) 7%, transparent); box-shadow: inset 2px 0 0 var(--doesnt); }
.lrail .row[data-alarm="true"][aria-current="true"] { background: color-mix(in srgb, var(--doesnt) 13%, var(--selected)); }
/* **A row's tone, and data-s is now only ever a LOOSE row's** (QMBVA1): the rail drew a task's row and a served
   claim's, which carried landed, you, dropped and the two claim tones, and not one of them can be drawn here any more.
   What looseRow says is working, idle and none; the two below are the two that had a rule, and idle has never had one,
   which is a design question and not this change's to answer. */
.lrail .row[data-s="working"] .gl, .lrail .row[data-s="working"] .mt .w { color: var(--st-live); }
.lrail .row[data-s="none"] .nm { color: var(--text-dim); }
/* A commission that is over, on the row itself: the wrapper that used to carry this held the row and what the chevron
   opened under it, and there is nothing under a row any more (QMBVA1). A finished rule sat here too, colouring the
   glyph in a commission's row — which has never had one, so nothing could ever have drawn it. */
.lrail .row[data-end="dropped"] .nm { color: var(--text-faint); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.lrail .row[data-end="dropped"] { outline: var(--line-width) dashed var(--line-strong); outline-offset: -1px; }
.lrail .row[hidden] { display: none; }

/* who has it — a name, and a dot for how its session is */
.own { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--text); font-weight: var(--weight-medium); white-space: nowrap; }
.own::before { content: ""; flex: none; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--agent); }
.own[data-o="unreachable"]::before, .own[data-o="unknown"]::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text-faint); }
.own[data-o="ended"] { color: var(--doesnt); }
.own__unread { color: var(--unsaved); font-weight: 600; }
.holder__unread { grid-column: 1 / -1; margin-top: 8px; }
.holder__unread ul { margin: 4px 0 0; padding-left: 18px; }
.holder__unread li { margin: 2px 0; }
.own[data-o="ended"]::before { background: var(--doesnt); }
.own[data-o="none"] { color: var(--text-faint); }
.own[data-o="none"]::before { background: var(--line-strong); }
.pips { display: inline-flex; gap: 2px; vertical-align: middle; }
.pips i { width: calc(var(--size) * 0.56); height: calc(var(--size) * 0.56); border-radius: 2px; background: var(--line-strong); }
.pips[data-big] i { width: calc(var(--size) * 0.85); height: calc(var(--size) * 0.85); border-radius: 3px; }
.pips i[data-s="landed"] { background: var(--st-in); }
.pips i[data-s="working"] { background: var(--st-live); }
.pips i[data-s="you"] { background: var(--st-you); }
.pips i[data-s="idle"] { background: transparent; box-shadow: inset 0 0 0 1.5px var(--st-bad); }
.pips i[data-s="none"] { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.pips i[data-s="dropped"] { background: repeating-linear-gradient(135deg, var(--text-faint) 0 1.5px, transparent 1.5px 3.5px); }
/* not in v6, which always knew: a task the facts here cannot place is a dotted outline, never drawn as idle (D44) */
.pips i[data-s="unknown"] { background: transparent; outline: 1.5px dotted var(--text-faint); outline-offset: -1.5px; }
.cnt { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6em; height: 1.6em; padding: 0 .45em;
  border-radius: 999px; font-size: var(--text-xs); font-variant-numeric: tabular-nums; color: var(--tone, var(--text-dim));
  background: color-mix(in srgb, var(--tone, var(--text-faint)) 16%, transparent); }

/* every section heading folds in place and keeps its count; there is no bucket screen */
.lrail .foldhead { display: flex; align-items: center; gap: var(--space-2); width: 100%; margin: 0 0 var(--space-1); padding: var(--space-2);
  border: 0; border-radius: var(--radius-control); background: transparent; color: var(--text-faint); font: inherit; font-size: var(--text-xs);
  font-weight: var(--weight-strong); letter-spacing: var(--tracking-label); text-transform: uppercase; text-align: start; cursor: pointer; }
.lrail .foldhead:hover { background: var(--hover); color: var(--text-dim); }
.lrail .foldhead .fold__chevron { display: inline-grid; transition: transform var(--motion-fast); }
.lrail .foldhead .fold__chevron .icon { width: var(--text-sm); height: var(--text-sm); }
.lrail .foldhead[aria-expanded="true"] .fold__chevron { transform: rotate(90deg); }
.lrail .foldhead .hint { margin-inline-start: auto; font-weight: var(--weight-regular); letter-spacing: 0; text-transform: none; }
.lrail .tray { margin-block-start: var(--space-4); padding-block-start: var(--space-2); border-top: var(--line-width) solid var(--line); }
.lrail .tray__search { position: relative; margin: var(--space-1) var(--space-2) var(--space-3); }
.lrail .tray__search .icon { position: absolute; left: var(--space-2); top: 50%; transform: translateY(-50%); color: var(--text-faint); pointer-events: none; }
.lrail .tray__search .field { padding-inline-start: calc(var(--space-2) * 2 + var(--text-md)); }
.lrail .tray__none { margin: 0 var(--space-2); font-size: var(--text-sm); color: var(--text-faint); }
.lrail .tray__none[hidden] { display: none; }
.lrail .row:focus-visible, .lrail .foldhead:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: -1px; }


.row:focus-visible, .cd:focus-visible, .crumbs button:focus-visible, .chev:focus-visible, .foldhead:focus-visible, .acc__chev:focus-visible, .acc__name:focus-visible,
.mini__line:focus-visible, .scr:focus-visible, .user:focus-visible, .toggle:focus-visible, .rail-item:focus-visible, .shelf:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: -1px; }
.foldsum { margin: 0 var(--space-2) var(--space-2); font-size: var(--text-sm); color: var(--text-dim); }

/* ---- THE RAIL'S FOOT: compact cards, the screen icons, and the user row — never more than a third ---- */
.foot { flex: 0 0 auto; max-height: 34%; min-height: 0; display: flex; flex-direction: column; border-top: var(--line-width) solid var(--line); }
.foot__screens { flex: none; display: flex; align-items: stretch; gap: var(--space-1); padding: var(--space-2); }

.scrgrp { display: flex; gap: var(--space-1); min-width: 0; flex: var(--n, 1) 1 0; }
.scr { flex: 1 1 0; min-width: 0; display: inline-grid; justify-items: center; gap: 2px; padding: var(--space-1) 2px 3px;
  border: 0; border-radius: var(--radius-control); background: transparent; color: var(--text-dim); font: inherit; font-size: var(--text-xs);
  line-height: 1.2; cursor: pointer; }
.scr .icon { width: var(--text-lg); height: var(--text-lg); }
.scr span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scr:hover { background: var(--hover); color: var(--text); }
.scr:active { background: var(--selected); }
.scr[aria-current="page"] { background: var(--selected); color: var(--text); font-weight: var(--weight-medium); }
.scr__rule { flex: none; width: var(--line-width); margin-block: var(--space-2); background: var(--line-strong); }
/* Actions sits in the row as an icon like the screens, but it opens a popover rather than the pane */
.scr[data-actions] { position: relative; }
.scr[data-actions][aria-expanded="true"] { background: var(--selected); color: var(--text); }
.scr[data-new]::after { content: ""; position: absolute; top: 3px; right: calc(50% - var(--text-lg) / 2 - 5px); width: 7px; height: 7px; border-radius: 50%;
  background: var(--doesnt); box-shadow: 0 0 0 2px var(--surface); }

/* The user row is in the header's right end now, so it is as wide as the name needs and no wider. */
.user { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--space-2); min-height: calc(var(--size) * 2.25); padding: var(--space-1);
  border: 0; border-radius: var(--radius-control); background: transparent; color: var(--text); font: inherit; text-align: start; cursor: pointer; }
.user:hover, .user[aria-expanded="true"] { background: var(--hover); }
.av { flex: none; display: inline-grid; place-items: center; width: calc(var(--size) * 1.75); height: calc(var(--size) * 1.75); border-radius: 50%;
  background: var(--text); color: var(--ground); font-size: var(--text-xs); font-weight: var(--weight-strong); }
.av[data-local] { background: var(--selected); color: var(--text-dim); box-shadow: inset 0 0 0 1px var(--line-strong); }
.av[data-small] { width: calc(var(--size) * 1.35); height: calc(var(--size) * 1.35); font-size: calc(var(--size) * 0.6); }
.user__txt { min-width: 0; display: grid; line-height: 1.25; }
.user__name { font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user__sub { font-size: var(--text-xs); color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the user row is the one button for you: it opens your menu, and Settings… is the first thing in it */
.user__more { flex: none; display: inline-grid; margin-inline: auto var(--space-1); color: var(--text-faint); }
.user:hover .user__more, .user[aria-expanded="true"] .user__more { color: var(--text-dim); }
/* It drops DOWN from the header, where it rose from the foot, and hangs off the right edge the row is against. */
.usermenu { position: absolute; z-index: 45; inset-inline-end: 0; top: calc(100% + var(--space-1)); min-width: 17rem; max-width: min(24rem, 90vw); }
.menu__subs { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--text-faint); }
.usermenu__note { padding: var(--space-1) var(--space-3) var(--space-2); font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--text-dim); }

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

/* ---- THE PANE: one centred column, whatever it is showing ------------------------------------------- */
.panecol { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; container: pane / inline-size;
  background: var(--surface-raised); }
.panebar { position: sticky; top: 0; z-index: 4; flex: none; display: flex; align-items: center; gap: var(--space-2);
  min-height: calc(var(--size) * 2.75); padding: var(--space-1) var(--space-2); background: var(--surface-raised); }
/* The header's menu button is the drawer's control at phone widths only; above them the rail is on the screen and the
   pane's own bar carries 'Show the rail'. See 'barMenu' in @mechaneion/shell's 'shell.ts' for why it is built anyway. */
.appbar__menu { display: none; }

/* ---- Actions: a popover from its icon, not a screen ------------------------------------------------ */
.actpop { position: fixed; z-index: 45; display: flex; flex-direction: column; width: min(calc(var(--size) * 28), calc(100vw - 32px)); max-height: min(72vh, 640px);
  border: var(--line-width) solid var(--line-strong); border-radius: var(--radius-card); background: var(--surface-raised); box-shadow: var(--shadow-popover); }
.actpop__head { flex: none; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); border-bottom: var(--line-width) solid var(--line); }
.actpop__head h2 { font-size: var(--text-md); font-weight: var(--weight-strong); }
.actpop__head .icon-button { margin-inline-start: auto; }
.actpop__intro { flex: none; display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-4) 0; }
.actpop__list { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; gap: var(--space-3); align-content: start; padding: var(--space-3) var(--space-4) var(--space-4); }
.actpop__problem { margin: 0; padding: var(--space-2) var(--space-3); border: var(--line-width) solid color-mix(in srgb, var(--doesnt) 45%, var(--line));
  border-radius: var(--radius-control); background: color-mix(in srgb, var(--doesnt) 6%, var(--surface)); font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--text); }
.act { display: grid; gap: var(--space-2); padding: var(--space-3); border: var(--line-width) solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.act[data-refused] { border-color: color-mix(in srgb, var(--doesnt) 45%, var(--line)); background: color-mix(in srgb, var(--doesnt) 6%, var(--surface)); }
.act__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.act__what { font-weight: var(--weight-strong); }
.act__when { margin-inline-start: auto; font-size: var(--text-sm); color: var(--text-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.act__where { font-size: var(--text-sm); color: var(--text-dim); }
.reply { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); background: var(--ground); border: var(--line-width) solid var(--line);
  font-family: var(--font-mono); font-size: var(--text-sm); line-height: var(--leading-sm); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
.act__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* ---- Settings: a small modal, owned by whoever is signed in ------------------------------------------ */
.scrim2 { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgb(15 16 20 / 0.24); }
.modal { width: min(calc(var(--size) * 27), 100%); max-height: calc(100dvh - 32px); overflow-y: auto; display: grid; gap: var(--space-4);
  padding: var(--space-3) var(--space-5) var(--space-5); border: var(--line-width) solid var(--line-strong); border-radius: calc(var(--radius-card) + 2px);
  background: var(--surface-raised); box-shadow: var(--shadow-popover); }
.modal__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px var(--space-2); }
.modal__head h2 { font-size: var(--text-lg); font-weight: var(--weight-strong); }
.modal__whose { grid-column: 1; display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-dim); }
.modal__head .icon-button { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
.modal fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: var(--space-2); min-width: 0; }
.modal legend { padding: 0; margin-bottom: var(--space-2); font-weight: var(--weight-medium); }
.opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-1); }
.opts[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opt { position: relative; display: grid; justify-items: center; align-content: start; gap: var(--space-1); padding: var(--space-2) var(--space-1);
  border: var(--line-width) solid var(--line); border-radius: var(--radius-control); background: var(--surface); color: var(--text-dim);
  font-size: var(--text-xs); line-height: 1.25; text-align: center; cursor: pointer; }
.opt:hover { background: var(--hover); }
.opt:has(input:checked) { background: var(--selected); color: var(--text); border-color: var(--line-strong); box-shadow: inset 0 0 0 var(--line-width) var(--line-strong); }
.opt:has(input:focus-visible) { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
.opt input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.opt b { font-family: var(--font-reading); color: var(--text); line-height: 1; font-weight: var(--weight-medium); }
.opt > b.w { font-family: var(--font-sans); font-size: var(--text-sm); }
.measure { position: relative; display: block; width: 100%; height: 22px; }
.measure i { position: absolute; top: 2px; bottom: 2px; left: 50%; width: var(--w); transform: translateX(-50%); border-radius: 2px;
  background: repeating-linear-gradient(to bottom, var(--text-faint) 0 2px, transparent 2px 5px); }
.modal__note { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--text-dim); }
/* The pane of a person subscribed to no screens (v6's "No screens") */
.pane__none { padding: var(--space-6) var(--space-5); max-width: 42em; }
.pane__none h1 { margin: 0 0 var(--space-3); font-family: var(--font-reading); font-size: var(--text-2xl); line-height: var(--leading-2xl); font-weight: var(--weight-strong); }
.pane__none p { color: var(--text-dim); line-height: var(--leading-md); }
/* Your screens: the repo's packages, and whether this person is subscribed to each (v6) */
.subs { display: grid; border: var(--line-width) solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.sub { display: grid; grid-template-columns: var(--text-md) minmax(0, 1fr) auto; gap: 2px var(--space-3); align-items: center; padding: var(--space-2) var(--space-3);
  border-top: var(--line-width) solid var(--line); }
.sub:first-child { border-top: 0; }
.sub > .icon { color: var(--text-dim); }
.sub__name { font-weight: var(--weight-medium); }
.sub__what { grid-column: 2; font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--text-dim); }
.toggle { grid-column: 3; grid-row: 1 / span 2; position: relative; flex: none; width: calc(var(--size) * 2.25); height: calc(var(--size) * 1.3); padding: 0;
  border: var(--line-width) solid var(--line-strong); border-radius: 999px; background: var(--hover); cursor: pointer; transition: background-color var(--motion-fast), border-color var(--motion-fast); }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: calc(var(--size) * 1.3 - 6px); height: calc(var(--size) * 1.3 - 6px); border-radius: 50%;
  background: var(--surface-raised); box-shadow: 0 0 0 var(--line-width) var(--line-strong); transition: transform var(--motion-fast); }
.toggle[aria-checked="true"] { background: var(--text); border-color: var(--text); }
.toggle[aria-checked="true"]::after { transform: translateX(calc(var(--size) * 0.95)); box-shadow: none; }

.toast { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 60;
  width: max-content; max-width: calc(100% - 32px); padding: var(--space-2) var(--space-4); border-radius: var(--radius-control);
  background: var(--text); color: var(--ground); font-size: var(--text-sm); line-height: var(--leading-sm); box-shadow: var(--shadow-popover); }
.drawerscrim { display: none; }
/* A press that cannot be taken back reads as one (the mockup draws it on its editor card; it is the design system's). */
.button[data-kind="danger"] { color: var(--doesnt); border-color: color-mix(in srgb, var(--doesnt) 55%, var(--line-strong)); }

/* ---- phone: the rail is a BOTTOM BAR, and still a drawer for the open section's own list -------------------
   Zack approved the mobile boards on 2026-10-05: the header collapses to one 44px row, the rail's four names move to
   a bar across the bottom in thumb reach, and nothing is cut off at 320px. The drawer stays — it is where the open
   section's list lives, and the panebar's menu button still opens it — so no control an adopter's tests press is
   removed; what changes is that changing screens no longer costs a drawer.

   **Every control in this block sits on '--height-tap', which is 44px and a floor.** That is the claim: *every
   control can be pressed with a thumb*. The desktop sizes ('--height-control', '--height-control-small') are
   pointer sizes and stay what they are above 700px; this block is the only place they are raised, so a press target
   and a pointer target are one declaration each and cannot come apart. */
@media (max-width: 700px) {
  /* The header is ONE 44px row: the mark, the project, the account. The padding goes rather than the row growing, so
     the bar is 44px tall and the two controls in it are 44px targets filling it. */
  .appbar { gap: var(--space-2); min-height: var(--height-tap); padding: 0 var(--space-2); }
  /* THE WORDMARK GOES AND THE MARK NEVER DOES (EE19TS; Zack, 2026-10-03: the mark shows wherever you are in
     Mechaneion). Hiding the word is what buys the project its room on a 320px screen. */
  .appbar .brand__name { display: none; }
  .appbar .proj, .appbar .user { min-height: var(--height-tap); }
  /* The avatar keeps the size the design drew it; the button around it is the 44px target. */
  .appbar .user { padding-block: 0; }

  .tabbar { flex: none; position: relative; z-index: 38; display: flex; align-items: stretch; gap: var(--space-1);
    padding: var(--space-1) var(--space-1) calc(var(--space-1) + env(safe-area-inset-bottom, 0px));
    border-top: var(--line-width) solid var(--line); background: var(--surface); }
  .tabbar[hidden] { display: none; }
  /* Each tab starts from its own word's width and the room left is shared evenly, so a long word (Commissions) takes
     what a short one (Law) does not need: with five tabs, equal shares cut Commissions off at 390px, and these keep
     every word whole down to 320. A word that still cannot fit is ellipsised rather than pushing the bar off the screen. */
  .tabbar__tab { flex: 1 1 auto; min-width: 0; min-height: var(--height-tap); padding: var(--space-1) 2px; border: 0;
    border-radius: var(--radius-control); background: transparent; color: var(--text-dim); font: inherit; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
  .tabbar__tab .icon { width: var(--text-xl); height: var(--text-xl); }
  .tabbar__word { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs); line-height: 1.2; }
  .tabbar__tab:active { background: var(--selected); }
  /* The section the pane is on, in the one bronze this frame uses for Mechaneion's own mark — it is the only colour
     on the bar, so where you are needs no second signal. */
  .tabbar__tab[aria-current="page"] { color: var(--bronze); }
  .tabbar__tab[aria-current="page"] .tabbar__word { font-weight: var(--weight-medium); }

  .handle { display: none !important; }
  .lrail, .app[data-rail="hidden"] .lrail { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 40; display: flex;
    width: min(86vw, 340px); height: 100dvh; border-inline-end: var(--line-width) solid var(--line-strong); box-shadow: var(--shadow-popover);
    transform: translateX(-104%); visibility: hidden; transition: transform 180ms ease, visibility 0s linear 180ms; }
  .app[data-drawer="open"] .lrail { transform: none; visibility: visible; transition: transform 180ms ease; }
  .app[data-drawer="open"] .drawerscrim { display: block; position: fixed; inset: 0; z-index: 39; background: rgb(15 16 20 / 0.32); }
  /*
    **THE PANE'S BAR GOES, AND ITS ONE CONTROL MOVES INTO THE HEADER.**

    It carried a menu button and the repository's name — the name the header 22px above it already carries, beside
    the mark — for 53px of a 844px window. Zack, 2026-10-05, at 390px: *"this looks like — yeah, it's unusable. You
    can see I can barely read one single claim."* Measured in chrome-headless-shell the same day, Claims with a slice
    open spent 542px of 844 on chrome and put **0 of 10 claim cards wholly inside the window**; this bar was 53 of
    those, and the cheapest of them to give back, because nothing in it was a second fact.

    '.appbar__menu' below is where the drawer is opened from now, so the drawer itself, every row in it and every
    press an adopter's tests make on '[data-rail-toggle]' are unchanged — only the seat moves. Above 700px nothing
    here applies: the bar is back, 'Show the rail' is in it, and the header draws no menu button.
  */
  .panebar { display: none; }
  .appbar__menu { display: inline-grid; place-items: center; flex: none; min-width: var(--height-tap); min-height: var(--height-tap); }
  .actpop { left: 16px !important; right: 16px; top: auto !important; bottom: 16px !important; width: auto; }
  /* Every remaining control in the frame, on the one floor. The header's menu button (above), the drawer's own
     close, the chevron beside each section name, the name itself, Law's shelf and the foot's screen icons were 26 to
     38px tall — each of them drawn, each of them a miss waiting to happen. The glyphs inside them keep the size the
     design drew; only the boxes grow. '.panebar' is not in this list any more: it is 'display: none' here, and a
     floor written for a box nothing draws reads as live forever. */
  .repo .icon-button { min-width: var(--height-tap); min-height: var(--height-tap); }
  .acc__head { padding-block: var(--space-0); }
  .acc__chev { width: var(--height-tap); height: var(--height-tap); }
  .acc__name { min-height: var(--height-tap); }
  .acc__pick { padding-inline-start: calc(var(--space-2) + var(--height-tap) + var(--space-1)); }
  .shelf { min-height: var(--height-tap); }
  .scr { min-height: var(--height-tap); padding-block: var(--space-1); }
  /* A tier head and a rail row are the rows a thumb picks a slice or a book with, so they are targets too. */
  .acc .rail-item { min-height: var(--height-tap); }
}