/* 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);

  /* 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;
  --tone-unsaved: #693CC2;
  --tone-shadow: 0 12px 32px -8px rgb(26 27 33 / 0.18), 0 2px 6px rgb(26 27 33 / 0.06);
}

@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-unsaved: #B99AF7;
    --tone-shadow: 0 16px 40px -8px rgb(0 0 0 / 0.6), 0 2px 6px rgb(0 0 0 / 0.3);
  }
}

.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-unsaved: #B99AF7;
  --tone-shadow: 0 16px 40px -8px rgb(0 0 0 / 0.6), 0 2px 6px rgb(0 0 0 / 0.3);
}

/* ---------------------------------------------------------------------------------------------- */
/* 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));
  --shadow-popover: var(--tone-shadow);     /* the one shadow: menus and popovers, nothing else */

  /* 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));
  /* 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); }
.vote__option:hover:not(:disabled) { background: var(--hover); color: var(--text); }
.vote__option:active:not(:disabled) { background: var(--selected); color: var(--text); }
.vote__option[aria-pressed="true"] {
  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;
}
.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); }
.agent-chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  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: 1; white-space: nowrap;
}
.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;
}
.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); }
}

/* A grid's implicit column is auto, which grows to the longest unbreakable line inside it — a folded
   preview is one. 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; }

@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);
  position: relative; flex: 1 1 auto; min-height: 0; display: flex; overflow: hidden; background: var(--surface-raised); }

/* ---- 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-2) var(--space-2) var(--space-1); }
.repo { display: flex; align-items: center; gap: var(--space-2); min-height: var(--height-control); padding-inline-start: var(--space-1); }
.repo__mark { flex: none; display: inline-grid; place-items: center; width: var(--height-control-small); height: var(--height-control-small);
  border-radius: var(--radius-control); background: var(--text); color: var(--ground); font-size: var(--text-xs); font-weight: var(--weight-strong); }
.repo__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--weight-strong); }
.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 one 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) ---- */

.lrail .bk { margin-block-end: var(--space-2); }
.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; }
.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; }
.lrail .row .mt { grid-column: 2; 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); }
.lrail .row .gl { color: var(--text-faint); text-align: center; line-height: 1.3; }
.lrail .row .say { grid-column: 2; font-size: var(--text-sm); line-height: 1.35; color: var(--text-dim); }
.lrail .row .say[data-tone] { color: var(--tone); }
.lrail .row .flag { grid-column: 2; 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 { grid-column: 2; 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)); }
.lrail .chev { display: inline-grid; place-items: center; width: var(--text-md); height: 1.3em; padding: 0; border: 0; background: transparent; color: var(--text-faint);
  font: inherit; cursor: pointer; border-radius: var(--radius-small); transition: transform var(--motion-fast); }
.lrail .chev .icon { width: var(--text-sm); height: var(--text-sm); }
.lrail .chev:hover { color: var(--text); background: var(--hover); }
.lrail .chev[aria-expanded="true"] { transform: rotate(90deg); }
.lrail .kids { display: grid; gap: 2px; margin-inline-start: calc(var(--space-2) + var(--text-md) / 2); margin-block: 2px var(--space-3);
  padding-inline-start: var(--space-2); border-inline-start: var(--line-width) solid var(--line); }
.lrail .kids > .lab { padding: var(--space-2) var(--space-2) 0; font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-faint); }
.lrail .kids > .lab.noclaim { text-transform: none; letter-spacing: 0; font-style: italic; }
.lrail .row[data-s="landed"] .gl, .lrail .row[data-s="cy"] .gl, .lrail .row[data-s="cy"] .mt { color: var(--st-in); }
.lrail .row[data-s="landed"] .nm { color: var(--text-dim); }
.lrail .row[data-s="working"] .gl, .lrail .row[data-s="working"] .mt .w { color: var(--st-live); }
.lrail .row[data-s="you"] .gl, .lrail .row[data-s="you"] .mt .w { color: var(--st-you); }
.lrail .row[data-s="cn"] .gl, .lrail .row[data-s="cn"] .mt { color: var(--st-bad); }
.lrail .row[data-s="none"] .nm { color: var(--text-dim); }
.lrail .row[data-s="dropped"] .nm { color: var(--text-faint); text-decoration: line-through; text-decoration-color: var(--text-faint); }
.lrail .cmwrap[data-end="finished"] > .row .gl { color: var(--st-in); }
.lrail .cmwrap[data-end="dropped"] > .row .nm { color: var(--text-faint); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.lrail .cmwrap[data-end="dropped"] > .row { outline: var(--line-width) dashed var(--line-strong); outline-offset: -1px; }
.lrail .cmwrap[hidden] { display: none; }
.lrail .loud { color: var(--st-bad); }

/* 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 .chev: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); }
.foot__user { position: relative; flex: none; display: flex; align-items: center; gap: var(--space-0); padding: var(--space-2);
  border-top: var(--line-width) solid var(--line); }

.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); }

.user { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--space-2); min-height: calc(var(--size) * 2.5); 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); }
.usermenu { position: absolute; left: var(--space-2); right: var(--space-2); bottom: calc(100% - var(--space-1)); z-index: 30; min-width: 0; }
.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); }
.panebar__name { display: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--weight-strong); }

/* ---- 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 drawer over a full-width pane, which scrolls inside itself as it does on a desk ---- */
@media (max-width: 700px) {
  .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); }
  .panebar { border-bottom: var(--line-width) solid var(--line); }
  .panebar__name { display: block; }
  .actpop { left: 16px !important; right: 16px; top: auto !important; bottom: 16px !important; width: auto; }
}