/* Minisig's presentation. Every value here resolves through a semantic token —
   there is no literal colour and no literal size anywhere in this file, which is
   what makes R-013 checkable rather than asserted.

   Origo's surface contract is executed here:
   - an application shell is viewport-bound, does not scroll, and its docks are
     grid tracks; exactly one interior pane owns scroll;
   - a document surface continues below the fold, nothing sticks on it, and the
     masthead scrolls away with the rest;
   - the height ladder sheds the masthead nav at 640 and releases the frame
     binding at 480, and the action dock sheds at no height and no width;
   - base state IS final state: nothing animates in, so the reduced-motion render
     is identical to the full one and no element can be stranded. */

@layer base, components, app;

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  /* The canvas unit (Origo §3): every rem in the system scales with the
     canvas above 1440, so type and space spend a wide desktop together. */
  html { font-size: var(--canvas-unit); }
  :root { color-scheme: light dark; }
  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"] { color-scheme: dark; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    font-family: var(--font-ui);
    font-size: var(--text-body);
    line-height: var(--leading-normal);
    background: var(--surface-sunken);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3 {
    color: var(--text-emphasis);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
  }
  button, input, select, textarea { color: inherit; font: inherit; }
  table { border-collapse: collapse; inline-size: 100%; }
  a { color: var(--interactive); }
  svg { display: block; }
  code {
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    letter-spacing: var(--tracking-mono);
    overflow-wrap: anywhere;
  }
  :focus-visible {
    outline: var(--focus-width) solid var(--focus-ring);
    outline-offset: var(--focus-offset);
  }
  .visually-hidden {
    position: absolute;
    inline-size: var(--gap-hair);
    block-size: var(--gap-hair);
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  /* The skip link is the landing's route for a keyboard. It is off-screen until
     focused, and it never sticks. */
  .skip {
    position: absolute;
    inset-block-start: var(--gap-hair);
    inset-inline-start: var(--gap-hair);
    z-index: 1;
    padding: var(--pad-control-block) var(--pad-control-inline);
    border-radius: var(--radius-control);
    background: var(--surface-raised);
    color: var(--interactive);
    transform: translateY(-200%);
  }
  .skip:focus-visible { transform: translateY(0); }
}

@layer components {
  [data-tone="ok"] {
    --tone-mark: var(--status-ok-mark);
    --tone-wash: var(--status-ok-wash);
    --tone-ink: var(--status-ok-ink);
    --tone-edge: var(--status-ok-edge);
  }
  [data-tone="warn"] {
    --tone-mark: var(--status-warn-mark);
    --tone-wash: var(--status-warn-wash);
    --tone-ink: var(--status-warn-ink);
    --tone-edge: var(--status-warn-edge);
  }
  [data-tone="fail"] {
    --tone-mark: var(--status-fail-mark);
    --tone-wash: var(--status-fail-wash);
    --tone-ink: var(--status-fail-ink);
    --tone-edge: var(--status-fail-edge);
  }
  [data-tone="info"] {
    --tone-mark: var(--status-info-mark);
    --tone-wash: var(--status-info-wash);
    --tone-ink: var(--status-info-ink);
    --tone-edge: var(--status-info-edge);
  }
  [data-tone="neutral"] {
    --tone-mark: var(--status-neutral-mark);
    --tone-wash: var(--status-neutral-wash);
    --tone-ink: var(--status-neutral-ink);
    --tone-edge: var(--status-neutral-edge);
  }
  .mark {
    inline-size: var(--size-mark-dot);
    block-size: var(--size-mark-dot);
    border-radius: var(--radius-circle);
    background: var(--tone-mark);
    flex: none;
  }
  .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-inline);
    min-block-size: var(--size-badge-height);
    padding-inline: var(--pad-badge-inline);
    border: var(--border-hairline) solid transparent;
    border-radius: var(--radius-control);
    font-size: var(--text-micro);
    font-weight: var(--weight-medium);
    white-space: nowrap;
  }
  .badge[data-variant="soft"] {
    background: var(--tone-wash);
    border-color: var(--tone-edge);
    color: var(--tone-ink);
  }
  .btn {
    display: inline-flex;
    min-block-size: var(--size-control-height-base);
    align-items: center;
    justify-content: center;
    padding-inline: var(--pad-control-inline);
    border: var(--border-hairline) solid transparent;
    border-radius: var(--radius-control);
    font-weight: var(--weight-medium);
    font-size: var(--text-caption);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
  }
  .btn[data-variant="primary"] {
    background: var(--interactive);
    color: var(--text-on-interactive);
  }
  .btn[data-variant="primary"]:hover { background: var(--interactive-hover); }
  .btn[data-variant="secondary"] {
    border-color: var(--edge-control);
    background: var(--surface-base);
    color: var(--text-primary);
  }
  .btn[data-variant="ghost"] {
    border-color: var(--edge-default);
    background: transparent;
    color: var(--text-secondary);
  }
  /* `danger` marks a control whose consequence destroys state, not one whose
     affect is negative. Rejecting a proposal is reversible, auditable
     governance, so it wears the outline rather than the fill. */
  .btn[data-variant="danger"] {
    border-color: var(--danger);
    background: transparent;
    color: var(--danger);
  }
  .btn[data-variant="danger"]:hover {
    border-color: var(--danger-hover);
    color: var(--danger-hover);
  }
  .field { display: grid; gap: var(--gap-stack); }
  .input {
    inline-size: 100%;
    min-block-size: var(--size-control-height-base);
    padding: var(--pad-field-block) var(--pad-field-inline);
    border: var(--border-hairline) solid var(--edge-control);
    border-radius: var(--radius-control);
    background: var(--surface-base);
    color: var(--text-primary);
  }
  .input::placeholder { color: var(--text-secondary); }

  /* Login chooser (T-063): a stack of full-width method buttons, then the
     word grid for a spoken access phrase. */
  .chooser { display: grid; gap: var(--gap-stack); max-inline-size: 28rem; margin-block: var(--gap-stack); }
  .chooser .btn { inline-size: 100%; }
  .authorized-testing { max-inline-size: 28rem; margin-block: var(--gap-stack); color: var(--text-tertiary); }
  .authorized-testing summary { cursor: pointer; font-weight: var(--weight-semibold); color: var(--text-primary); }
  .authorized-testing .btn { inline-size: 100%; }
  .phrase-entry { max-inline-size: 34rem; }
  .word-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-stack);
    margin-block: var(--gap-stack);
  }
  .word-grid label {
    display: grid;
    gap: 4px;
    font-size: var(--text-micro);
    color: var(--text-tertiary);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
  }
  @media (max-inline-size: 32rem) {
    .word-grid { grid-template-columns: repeat(2, 1fr); }
  }
  .muted { color: var(--text-secondary); }
  .num {
    font-variant-numeric: var(--numeric);
    text-align: end;
    white-space: nowrap;
  }
  .eyebrow {
    color: var(--text-tertiary);
    font-size: var(--text-micro);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
  }
  .row-id {
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    font-variant-numeric: var(--numeric);
    letter-spacing: var(--tracking-mono);
    white-space: nowrap;
  }
  .row-facet, .row-meta {
    color: var(--text-tertiary);
    font-size: var(--text-caption);
  }
  .row-meta { font-variant-numeric: var(--numeric); }

  /* The hatch. An un-instrumented quantity is drawn as a band that could never
     be mistaken for a value, and it always carries the sentence naming the
     capture that would make it real. Both the stripe and its ground are token
     colours, so the pattern survives a palette change. */
  .hatch {
    display: grid;
    gap: var(--gap-stack);
    margin-block-start: var(--gap-items);
    padding: var(--pad-panel-tight);
    border: var(--border-hairline) dashed var(--edge-default);
    border-radius: var(--radius-panel);
    background: var(--surface-inset);
    color: var(--text-secondary);
    font-size: var(--text-caption);
  }
  .hatch-bar, .hatch-figure {
    display: block;
    block-size: var(--size-meter-track);
    border-radius: var(--radius-pill);
    background: repeating-linear-gradient(
      135deg,
      var(--edge-default) 0 var(--gap-inline),
      var(--surface-inset) var(--gap-inline) var(--gap-stack)
    );
  }
  .hatch-figure { block-size: var(--size-icon-large); }
  .hatch code, .basis code { color: var(--text-primary); }
}

@layer app {
  /* ---------------------------------------------------------------- masthead */
  .masthead {
    display: flex;
    align-items: center;
    gap: var(--gap-group);
    padding-inline: var(--pad-page-inline);
    min-block-size: var(--size-shell-dock-block);
    background: var(--surface-base);
    border-block-end: var(--border-hairline) solid var(--edge-default);
    flex-wrap: wrap;
  }
  .wordmark {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-stack);
    color: inherit;
    text-decoration: none;
  }
  .wordmark svg {
    inline-size: var(--size-icon-base);
    block-size: var(--size-icon-base);
    color: var(--brand);
    stroke-width: var(--border-thick);
    flex: none;
  }
  .wordmark b {
    color: var(--text-emphasis);
    font-size: var(--text-lead);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-title);
  }
  .wordmark-sub {
    color: var(--text-secondary);
    font-size: var(--text-caption);
  }
  .nav {
    display: flex;
    align-self: stretch;
    gap: var(--gap-hair);
  }
  .nav-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-inline);
    min-block-size: var(--size-control-height-base);
    padding-inline: var(--pad-control-inline);
    color: var(--text-secondary);
    font-weight: var(--weight-medium);
    font-size: var(--text-caption);
    text-decoration: none;
  }
  .nav-item::after {
    content: "";
    position: absolute;
    inset-block-end: calc(var(--border-hairline) * -1);
    block-size: var(--size-rail);
    inset-inline: var(--gap-inline);
    background: transparent;
    border-radius: var(--radius-pill);
  }
  .nav-item:hover { color: var(--text-primary); }
  .nav-item[aria-current="page"] { color: var(--text-emphasis); }
  .nav-item[aria-current="page"]::after { background: var(--edge-accent); }
  /* The number waiting, visible from every surface without navigating. */
  .nav-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: var(--size-badge-height);
    block-size: var(--size-badge-height);
    padding-inline: var(--pad-badge-block);
    border: var(--border-hairline) solid var(--tone-edge);
    border-radius: var(--radius-pill);
    background: var(--tone-wash);
    color: var(--tone-ink);
    font-size: var(--text-micro);
    font-variant-numeric: var(--numeric);
  }
  .masthead-end { margin-inline-start: auto; }
  .live {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-inline);
    color: var(--text-secondary);
    font-size: var(--text-caption);
  }
  .live-dot {
    inline-size: var(--size-mark-dot);
    block-size: var(--size-mark-dot);
    border-radius: var(--radius-circle);
    background: var(--tone-mark);
  }

  /* ------------------------------------------------- the application surface */
  /* Viewport-bound: the shell fills the frame and does not scroll. The docks
     are grid tracks, so they cannot obscure anything, and the work area's height
     is what is left after they take their rows. */
  body.app {
    display: grid;
    grid-template-rows: auto 1fr auto;
    block-size: 100svh;
    /* `clip`, not `hidden`: a fragment navigation (to the context pane or
       the decision anchor) can still scroll a hidden-overflow root and shear
       the whole frame off screen with no scrollbar to recover it. `clip`
       forbids programmatic scrolling too, so the frame is immovable; the
       released mobile flow keeps its useful anchor jumps. */
    overflow: clip;
  }
  .pane {
    overflow-y: auto;
    /* WCAG 2.4.11: reserve the blessed sticky region's own size so a control
       focused from the pane's end never lands underneath it. */
    scroll-padding-block-start: var(--size-row-height);
  }
  .pane-inner {
    display: grid;
    /* One column that may shrink below its content's min-content size. Without
       the explicit minmax(0, …) an auto track is sized by its widest child, so
       a wide table would widen the page instead of scrolling inside its frame —
       and a page that scrolls sideways at 390 fails the capture standard. */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap-group);
    max-inline-size: var(--size-page-max);
    margin-inline: auto;
    padding: var(--pad-page-block) var(--pad-page-inline) var(--gap-page);
  }
  .dock-pin {
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    letter-spacing: var(--tracking-mono);
    white-space: nowrap;
  }
  .dock-note {
    flex: 1 1 var(--size-measure-prose);
    max-inline-size: var(--size-measure-prose);
    color: var(--text-secondary);
    font-size: var(--text-caption);
  }
  .action-group {
    display: flex;
    align-items: center;
    gap: var(--gap-stack);
    margin-inline-start: auto;
  }

  /* ---------------------------------------------------- the document surface */
  /* It is read, it continues below the fold, and nothing on it sticks. */
  .doc {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap-section);
    max-inline-size: var(--size-page-max);
    margin-inline: auto;
    padding: var(--pad-page-block) var(--pad-page-inline) var(--gap-page);
  }

  /* --------------------------------------------------------- reading rhythm */
  h1.landing {
    max-inline-size: var(--size-measure-prose);
    font-size: var(--text-display);
    letter-spacing: var(--tracking-display);
  }
  .lede {
    max-inline-size: var(--size-measure-prose);
    margin-block-start: var(--gap-stack);
    color: var(--text-secondary);
    font-size: var(--text-lead);
    line-height: var(--leading-relaxed);
  }
  .basis {
    max-inline-size: var(--size-measure-prose);
    margin-block-start: var(--gap-stack);
    color: var(--text-secondary);
    font-size: var(--text-caption);
  }
  .doc p, .doc li, .pane p, .pane li, .doc dd, .pane dd {
    max-inline-size: var(--size-measure-prose);
  }
  .doc h2, .doc h3, .pane h2, .pane h3 {
    max-inline-size: var(--size-measure-prose);
  }

  /* ------------------------------------------------------------- the pulse */
  .pulse, .summary-strip {
    display: grid;
    /* A quarter of the page maximum: three figures fit a desktop frame and two
       fit a tablet, without any width being written down here. */
    grid-template-columns: repeat(
      auto-fit, minmax(min(calc(var(--size-page-max) / 4), 100%), 1fr)
    );
    gap: var(--gap-items);
  }
  .pulse-cell {
    display: grid;
    gap: var(--gap-hair);
    padding: var(--pad-panel);
    border: var(--border-hairline) solid var(--edge-default);
    border-radius: var(--radius-panel);
    background: var(--surface-base);
    color: inherit;
    text-decoration: none;
  }
  .pulse-cell:hover { background: var(--surface-hover); }
  .pulse-figure {
    color: var(--tone-ink, var(--text-emphasis));
    font-size: var(--text-hero);
    font-variant-numeric: var(--numeric);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-display);
    line-height: var(--leading-tight);
  }
  .pulse-label {
    color: var(--text-emphasis);
    font-weight: var(--weight-medium);
  }
  .pulse-note {
    max-inline-size: var(--size-measure-prose);
    color: var(--text-secondary);
    font-size: var(--text-caption);
  }
  .pulse-hatch { border-style: dashed; background: var(--surface-inset); }
  /* The Overview is the pulse grown to a landing: same cells, one per surface,
     and nothing on it drops to annotation size — a glance page has no fine
     print. */
  .tiles { margin-block-start: var(--gap-group); }
  .tiles .pulse-note { font-size: var(--text-body); }


  .figure {
    display: grid;
    gap: var(--gap-hair);
    padding: var(--pad-panel-tight);
    border: var(--border-hairline) solid var(--edge-default);
    border-radius: var(--radius-panel);
    background: var(--surface-base);
  }
  .figure-value {
    color: var(--tone-ink);
    font-size: var(--text-display);
    font-variant-numeric: var(--numeric);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
  }
  .figure-label { color: var(--text-emphasis); font-weight: var(--weight-medium); }
  .figure-note { color: var(--text-secondary); font-size: var(--text-caption); }

  /* ------------------------------------------------------- the queue's cards */
  .card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap-items);
    padding: var(--pad-panel);
    border: var(--border-hairline) solid var(--edge-default);
    border-radius: var(--radius-panel);
    background: var(--surface-base);
  }
  /* The card under decision is the loud one; the rest of the queue is quiet. */
  .card[data-current="true"] {
    border-color: var(--edge-accent);
    border-inline-start-width: var(--border-thick);
    box-shadow: var(--elevation-raised);
  }
  .card-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--gap-items);
    flex-wrap: wrap;
  }
  .card-title {
    margin-block-start: var(--gap-inline);
    max-inline-size: var(--size-measure-prose);
    font-size: var(--text-title);
    letter-spacing: var(--tracking-title);
  }
  .claim {
    max-inline-size: var(--size-measure-prose);
    color: var(--text-primary);
    font-size: var(--text-lead);
    line-height: var(--leading-snug);
  }
  .facts { display: grid; gap: var(--gap-stack); }
  .facts > div {
    display: grid;
    grid-template-columns: minmax(var(--size-shell-dock-block), 1fr) 3fr;
    gap: var(--gap-items);
    padding-block-end: var(--gap-stack);
    border-block-end: var(--border-hairline) solid var(--edge-subtle);
  }
  .facts dt { color: var(--text-tertiary); font-size: var(--text-caption); }
  .facts dd { color: var(--text-primary); font-size: var(--text-caption); }
  .evidence {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--size-shell-min-block), 100%), 1fr));
    gap: var(--gap-group);
    padding-block: var(--gap-items);
    border-block: var(--border-hairline) solid var(--edge-subtle);
  }
  .evidence h3, .dossier-section h3 {
    font-size: var(--text-caption);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--text-tertiary);
  }
  .consequences {
    display: grid;
    gap: var(--gap-stack);
    padding: 0;
    list-style: none;
  }
  .consequences li {
    display: flex;
    align-items: start;
    gap: var(--gap-inline);
    max-inline-size: var(--size-measure-prose);
    color: var(--text-secondary);
    font-size: var(--text-caption);
  }
  .consequences .mark { margin-block-start: var(--gap-inline); }
  .card-foot { font-size: var(--text-caption); }

  .panel {
    padding: var(--pad-panel);
    border: var(--border-hairline) solid var(--edge-default);
    border-radius: var(--radius-panel);
    background: var(--surface-base);
  }
  .panel[data-tone] {
    border-color: var(--tone-edge);
    background: var(--tone-wash);
  }
  .panel > * + * { margin-block-start: var(--gap-items); }
  .panel { min-inline-size: 0; }
  .panel.quiet { color: var(--text-secondary); }

  /* ------------------------------------------------------------- the chain */
  .split {
    display: grid;
    gap: var(--gap-group);
    align-items: start;
  }
  .split[data-inspecting="true"] {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
  .split-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap-items);
    min-inline-size: 0;
  }
  .split-inspect {
    padding: var(--pad-panel);
    border: var(--border-hairline) solid var(--edge-accent);
    border-radius: var(--radius-panel);
    background: var(--surface-base);
    min-inline-size: 0;
  }
  .chain-feature {
    padding: var(--pad-panel-tight);
    border: var(--border-hairline) solid var(--edge-default);
    border-radius: var(--radius-panel);
    background: var(--surface-base);
  }
  .chain-feature[aria-current="true"] { border-color: var(--edge-accent); }
  .chain-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--gap-items);
    flex-wrap: wrap;
  }
  .chain-title { display: grid; gap: var(--gap-hair); min-inline-size: 0; }
  .chain-title a { color: inherit; text-decoration: none; }
  .chain-title a:hover .chain-name { text-decoration: underline; }
  .chain-name {
    color: var(--text-emphasis);
    font-size: var(--text-lead);
    font-weight: var(--weight-semibold);
  }
  .chain-sub { color: var(--text-secondary); font-size: var(--text-caption); }
  .chain-empty {
    margin-block-start: var(--gap-stack);
    color: var(--text-secondary);
    font-size: var(--text-caption);
  }
  .chain-rules {
    display: grid;
    gap: var(--gap-stack);
    margin-block-start: var(--gap-items);
    padding: 0;
    list-style: none;
  }
  .chain-rule {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--gap-items);
    flex-wrap: wrap;
    padding-block-start: var(--gap-stack);
    border-block-start: var(--border-hairline) solid var(--edge-subtle);
  }
  .chain-rule[aria-current="true"] { background: var(--surface-selected); }
  .chain-rule-title {
    display: grid;
    gap: var(--gap-hair);
    min-inline-size: 0;
    max-inline-size: var(--size-measure-prose);
    flex: 1 1 auto;
  }
  .chain-rule-title a { color: var(--text-primary); text-decoration: none; }
  .chain-rule-title a:hover { text-decoration: underline; }
  .break-note {
    color: var(--status-fail);
    font-size: var(--text-caption);
    font-weight: var(--weight-medium);
  }
  .break-note-ok { color: var(--status-ok); font-weight: var(--weight-normal); }
  .bindings {
    display: grid;
    gap: var(--gap-hair);
    padding: 0;
    list-style: none;
    color: var(--text-secondary);
    font-size: var(--text-caption);
  }
  .binding-outcome { color: var(--tone-ink); }

  /* Cells. A met cell is achromatic and quiet; a broken one is loud; the FIRST
     break in a row is the only emphasized element, because it is the only
     actionable one. An un-instrumented cell is hatched and can be mistaken for
     neither. */
  .cells {
    display: flex;
    gap: var(--gap-hair);
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
  }
  .cell {
    display: grid;
    justify-items: center;
    gap: var(--gap-hair);
    min-inline-size: var(--size-shell-dock-block);
    padding: var(--gap-inline) var(--gap-stack);
    border: var(--border-hairline) solid var(--edge-subtle);
    border-radius: var(--radius-hair);
    color: var(--text-tertiary);
    font-size: var(--text-micro);
  }
  .cells-wide .cell { min-inline-size: var(--size-control-height-large); }
  .cell-mark {
    inline-size: var(--size-mark-dot);
    block-size: var(--size-mark-dot);
    border-radius: var(--radius-circle);
  }
  .cell[data-state="met"] {
    border-color: var(--status-ok-edge);
    color: var(--text-secondary);
  }
  .cell[data-state="met"] .cell-mark { background: var(--status-ok-mark); }
  .cell[data-state="broken"] {
    border-color: var(--status-fail-edge);
    background: var(--status-fail-wash);
    color: var(--status-fail-ink);
  }
  .cell[data-state="broken"] .cell-mark { background: var(--status-fail-mark); }
  .cell[data-state="not-instrumented"] {
    border-style: dashed;
    background: var(--surface-inset);
  }
  .cell[data-state="not-instrumented"] .cell-mark {
    background: repeating-linear-gradient(
      135deg,
      var(--edge-default) 0 var(--gap-hair),
      var(--surface-inset) var(--gap-hair) var(--gap-inline)
    );
  }
  .cell[data-first-break="true"] {
    border-color: var(--status-fail);
    border-width: var(--border-thick);
    font-weight: var(--weight-semibold);
  }

  /* ------------------------------------------------------------ the ledger */
  .lenses { display: flex; gap: var(--gap-stack); flex-wrap: wrap; }
  .lens {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--size-control-height-base);
    padding-inline: var(--pad-control-inline);
    border: var(--border-hairline) solid var(--edge-default);
    border-radius: var(--radius-pill);
    background: var(--surface-base);
    color: var(--text-secondary);
    font-size: var(--text-caption);
    font-weight: var(--weight-medium);
    text-decoration: none;
  }
  .lens[aria-current="true"] {
    border-color: var(--edge-accent);
    background: var(--interactive-wash);
    color: var(--text-emphasis);
  }
  .meter {
    display: block;
    inline-size: 100%;
    min-inline-size: var(--size-control-height-large);
    block-size: var(--size-meter-track);
    border-radius: var(--radius-pill);
    background: var(--surface-inset);
  }
  /* Only the datum arrives inline (`--share`); the drawing lives here. */
  .meter-fill {
    display: block;
    inline-size: calc(var(--share) * 1%);
    block-size: var(--size-meter-track);
    border-radius: var(--radius-pill);
    background: var(--status-info-mark);
  }
  .hatch-cell { min-inline-size: var(--size-control-height-large); }

  .table-frame {
    overflow-x: auto;
    border: var(--border-hairline) solid var(--edge-default);
    border-radius: var(--radius-panel);
    background: var(--surface-base);
  }
  /* The focus screen: one level of the tree at a time. The breadcrumb is
     the way back up; a child row is the way down. */
  .focus-path {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-inline);
    margin-block-end: var(--gap-group);
    font-size: var(--text-caption);
  }
  .focus-path-sep { color: var(--text-tertiary); }
  .focus-path-step { color: var(--text-secondary); }
  .focus-path-here { color: var(--text-primary); }
  .focus-node { margin-block-end: var(--gap-group); }
  .focus-title { margin: var(--gap-items) 0; }
  .focus-child {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-items);
    color: var(--text-primary);
    text-decoration: none;
  }
  .focus-child:hover .focus-child-title { text-decoration: underline; }
  .focus-share { white-space: nowrap; font-variant-numeric: tabular-nums; }
  .focus-children td.num, .focus-share.num { text-align: end; }
  .grid { font-size: var(--text-caption); }
  .grid caption { text-align: start; }
  .grid thead th {
    padding: var(--pad-cell-block) var(--pad-cell-inline);
    border-block-end: var(--border-hairline) solid var(--edge-default);
    background: var(--surface-raised);
    color: var(--text-tertiary);
    font-size: var(--text-micro);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-eyebrow);
    text-align: start;
    text-transform: uppercase;
  }
  .grid thead th.num { text-align: end; }
  .grid tbody tr { border-block-end: var(--border-hairline) solid var(--edge-subtle); }
  .grid tbody tr:last-child { border-block-end: 0; }
  .grid tbody td {
    min-block-size: var(--size-row-height);
    padding: var(--pad-cell-block) var(--pad-cell-inline);
    vertical-align: middle;
  }
  /* A sentence-bearing cell is prose and takes the measure. */
  .grid tbody td { max-inline-size: var(--size-measure-prose); }
  .grid tbody tr[data-tone="fail"] td:first-child {
    border-inline-start: var(--size-rail) solid var(--status-fail-mark);
  }
  .grid tbody tr[data-tone="warn"] td:first-child {
    border-inline-start: var(--size-rail) solid var(--status-warn-mark);
  }
  .grid-note td {
    color: var(--text-secondary);
    font-size: var(--text-micro);
  }
  .pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-items);
    flex-wrap: wrap;
  }
  .pager-links { display: flex; gap: var(--gap-stack); flex-wrap: wrap; }
  .pager-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: var(--size-control-height-base);
    min-block-size: var(--size-control-height-base);
    border: var(--border-hairline) solid var(--edge-default);
    border-radius: var(--radius-control);
    background: var(--surface-base);
    color: var(--text-secondary);
    font-size: var(--text-caption);
    font-variant-numeric: var(--numeric);
    text-decoration: none;
  }
  .pager-link[aria-current="page"] {
    border-color: var(--edge-accent);
    background: var(--interactive-wash);
    color: var(--text-emphasis);
  }

  /* ----------------------------------------------------------- the dossier */
  .dossier { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-group); }
  .dossier-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--gap-items);
    flex-wrap: wrap;
  }
  .dossier-title {
    margin-block-start: var(--gap-stack);
    max-inline-size: var(--size-measure-prose);
    font-size: var(--text-heading);
    letter-spacing: var(--tracking-title);
  }
  .dossier-link { font-size: var(--text-caption); }
  .dossier-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap-stack);
    padding-block-start: var(--gap-items);
    border-block-start: var(--border-hairline) solid var(--edge-default);
  }
  .derivation, .events, .revisions, .collateral, .work-list {
    display: grid;
    gap: var(--gap-stack);
    padding: 0;
    list-style: none;
  }
  .derivation li, .events li, .revisions li {
    padding: var(--pad-panel-tight);
    border: var(--border-hairline) solid var(--edge-subtle);
    border-radius: var(--radius-control);
    background: var(--surface-raised);
  }
  .events li[data-tone], .revisions li[data-tone] {
    border-inline-start: var(--size-rail) solid var(--tone-mark);
  }
  .derivation p, .events p, .revisions p {
    margin-block-start: var(--gap-hair);
    color: var(--text-secondary);
    font-size: var(--text-caption);
  }
  /* Identifier lists, not prose: a fully qualified test path is not a sentence,
     so the measure does not bind it and breaking it at 68ch only makes it
     harder to read. Origo's prose class is paragraphs, headings and
     sentence-bearing cells; these are none of those. */
  .collateral li, .work-list li {
    display: flex;
    align-items: baseline;
    gap: var(--gap-inline);
    flex-wrap: wrap;
    color: var(--text-secondary);
    font-size: var(--text-caption);
  }
  .do-now { margin-block-start: var(--gap-stack); }
  .run-line {
    max-inline-size: var(--size-measure-prose);
    color: var(--text-secondary);
    font-size: var(--text-caption);
  }

  @media (min-width: 64rem) {
    .doc .dossier-section {
      grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
      column-gap: var(--gap-group);
      align-items: start;
    }
    .doc .dossier-section > h3 { grid-column: 1; grid-row: 1 / -1; }
    .doc .dossier-section > :not(h3) { grid-column: 2; }
  }

  /* ------------------------------------------------------ the height ladder */
  /* The collapse order is keyed to the frame the shell actually has. The nav
     moves into the work area at 640; the frame binding is released at 480 and
     the whole page scrolls as one document; the action dock sheds at neither. */
  @media (max-height: 40rem) {
    body.app .nav { display: none; }
    body.app .pane-inner { padding-block-start: var(--gap-items); }
  }
  @media (max-height: 29.99rem) {
    body.app {
      display: block;
      block-size: auto;
      overflow: visible;
    }
    body.app .pane { overflow-y: visible; }
  }

  /* Below the minimum viable width the shell is not a shell: panes stack in
     flow, the docks become in-flow bands, and the page scrolls one way only. */
  @media (max-width: 39.99rem) {
    body.app {
      display: block;
      block-size: auto;
      overflow: visible;
    }
    body.app .pane { overflow-y: visible; }
    .masthead {
      padding-block: var(--gap-stack);
      gap: var(--gap-items);
    }
    /* Wrap rather than scroll: a cut-off "Galle" with no scroll affordance
       reads as broken, and every destination must stay tappable. */
    .nav {
      order: 2;
      inline-size: 100%;
      flex-wrap: wrap;
    }
    .nav-item { padding-inline: var(--gap-items); }
    .masthead-end { align-self: start; }
    .action-group { margin-inline-start: 0; inline-size: 100%; }
    .split[data-inspecting="true"] { grid-template-columns: minmax(0, 1fr); }
    .facts > div { grid-template-columns: 1fr; gap: var(--gap-hair); }
    .evidence { grid-template-columns: minmax(0, 1fr); }
    .cell { min-inline-size: var(--size-control-height-base); }
    .cell-name { display: none; }
    .cells-wide .cell-name { display: block; }
  }

  /* Two panes only pay for themselves once there is width for both. */
  @media (max-width: 64rem) {
    .split[data-inspecting="true"] { grid-template-columns: minmax(0, 1fr); }
  }

  /* The queue workbench: roster | decision under one frame, two independent
     scrolls, the verdict dock always in reach. The layout is the explanation —
     what awaits, where you are, and what to do next are all structure. */
  .workbench {
    display: grid;
    grid-template-columns:
      minmax(calc(var(--size-page-max) / 6), calc(var(--size-page-max) / 5))
      minmax(0, 1fr)
      minmax(calc(var(--size-page-max) / 5), calc(var(--size-page-max) / 4));
    min-block-size: 0;
  }
  /* The verdict rail: recommendation above the controls that answer it, the
     rail's own scroll if the rationale runs long, movement at the foot. */
  .verdict-rail {
    display: flex;
    flex-direction: column;
    gap: var(--gap-group);
    min-block-size: 0;
    overflow-y: auto;
    padding: var(--pad-panel);
    border-inline-start: var(--border-hairline) solid var(--edge-default);
    background: var(--surface-inset);
  }
  .verdict-rail .action-group {
    display: grid;
    gap: var(--gap-stack);
    margin-inline-start: 0;
    justify-items: stretch;
  }
  .verdict-rail .action-group .btn { inline-size: 100%; }
  .rail-verdict {
    display: grid;
    gap: var(--gap-items);
  }
  .compose-consequence {
    color: var(--text-secondary);
    font-size: var(--text-caption);
  }
  .compose-constraint {
    min-block-size: calc(var(--size-control-height-large) * 3);
    resize: vertical;
    font: inherit;
    line-height: var(--leading-normal);
  }
  .rail-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-items);
    margin-block-start: auto;
  }
  .roster {
    display: flex;
    flex-direction: column;
    min-block-size: 0;
    /* The roster never scrolls (owner ruling 2026-07-26): a fixed page of
       rows renders and the pager walks the rest, so clip is a guarantee,
       not a fallback — no layout change can spawn a scrollbar here. */
    overflow: clip;
    border-inline-end: var(--border-hairline) solid var(--edge-default);
    background: var(--surface-inset);
  }
  .roster-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-items);
    padding: var(--gap-items) var(--pad-panel);
    border-block-end: var(--border-hairline) solid var(--edge-default);
  }
  .roster-head .landing { font-size: var(--text-title); }
  .roster-empty { padding: var(--pad-panel); color: var(--text-secondary); }
  .roster-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .roster-search {
    display: flex;
    align-items: center;
    gap: var(--gap-items);
    padding: var(--gap-items) var(--pad-panel);
    border-block-end: var(--border-hairline) solid var(--edge-default);
  }
  .roster-search .input { min-block-size: var(--size-control-height-base); }
  .roster-clear {
    color: var(--text-secondary);
    font-size: var(--text-caption);
  }
  .roster-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-items);
    margin-block-start: auto;
    padding: var(--gap-items) var(--pad-panel);
    border-block-start: var(--border-hairline) solid var(--edge-default);
  }
  .roster-pager .pager-link[aria-disabled="true"] { opacity: 0.4; }
  .roster-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--gap-items);
    min-block-size: var(--size-row-height);
    padding-inline: var(--pad-panel);
    border-inline-start: var(--size-rail) solid transparent;
    color: var(--text-primary);
    text-decoration: none;
  }
  .roster-row:hover { background: var(--surface-hover); }
  .roster-row[aria-current="true"] {
    background: var(--surface-selected);
    border-inline-start-color: var(--edge-accent);
  }
  .roster-title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .decision { min-block-size: 0; }
  /* The context pane: a reference opened from the subject renders beneath it
     — both stay on screen, each owning its own scroll, and dismissing
     returns the whole frame to the subject. */
  .decision[data-inspecting="true"] {
    display: grid;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    overflow: clip;
  }
  .decision[data-inspecting="true"] > .pane-inner {
    overflow-y: auto;
    margin-inline: 0;
    max-inline-size: none;
  }
  .context-pane {
    overflow-y: auto;
    padding: var(--pad-panel) var(--pad-page-inline);
    border-block-start: var(--border-hairline) solid var(--edge-default);
    background: var(--surface-inset);
  }
  .context-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-items);
    margin-block-end: var(--gap-items);
  }
  /* Dependents render as rows, not chips: the statement is the content, so
     it wraps whole and nothing is cut off. */
  .dependents { inline-size: 100%; border-collapse: collapse; }
  .dependents td {
    padding: var(--pad-cell-block) var(--gap-items) var(--pad-cell-block) 0;
    border-block-end: var(--border-hairline) solid var(--edge-default);
    vertical-align: baseline;
  }
  .dependents tr:last-child td { border-block-end: 0; }
  .dep-id { white-space: nowrap; inline-size: var(--size-control-height-large); }
  .dep-id a { text-decoration: none; color: var(--interactive); }
  .dep-id a:hover { text-decoration: underline; }
  .dep-main { color: var(--text-primary); }
  .dep-main code { overflow-wrap: anywhere; }
  .dep-side {
    white-space: nowrap;
    text-align: end;
    color: var(--text-secondary);
    font-size: var(--text-caption);
  }
  /* Parent-blocked rows: visible, dimmed, and never the default selection —
     rulings flow down the hierarchy. */
  .roster-row[data-blocked="true"] { color: var(--text-tertiary); }
  .roster-row[data-blocked="true"] .roster-title { color: var(--text-tertiary); }
  /* The blocked half of the roster: compact groups keyed by the parent each
     item awaits. The decidable list above keeps the room; this section
     compresses, and its group heading is the door to the parent that
     unblocks it. */
  .roster-head[data-section="blocked"] {
    margin-block-start: var(--gap-group);
    border-block-start: var(--border-hairline) solid var(--edge-default);
  }
  /* The blocked heading wears the waiting heading's clothes: the two
     sections are the same instrument pointed at different states. */
  .roster-subhead {
    font-size: var(--text-title);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
  }
  .blocked-group { padding-block-end: var(--gap-items); }
  .blocked-parent {
    margin: 0;
    padding: var(--gap-hair) var(--pad-panel);
    font-size: var(--text-caption);
    font-weight: inherit;
    color: var(--text-tertiary);
  }
  .blocked-parent-link {
    color: var(--text-tertiary);
    text-decoration: underline;
    text-decoration-color: var(--edge-subtle);
    text-underline-offset: 0.2em;
  }
  .blocked-parent-link:hover { color: var(--text-secondary); }
  /* The subject header reads in three clean beats: the tag line (change
     badge first, then what the thing is), the name, the claim — all on one
     left edge. */
  .decision-head {
    display: grid;
    gap: var(--gap-items);
    margin-block-end: var(--gap-items);
  }
  .decision-tags {
    display: flex;
    align-items: center;
    gap: var(--gap-items);
  }
  .decision-title { font-size: var(--text-heading); }
  .change-badge {
    font-size: var(--text-caption);
    min-block-size: var(--size-control-height-base);
    padding-inline: var(--pad-control-inline);
  }
  .verdict-subject .claim {
    margin-block-start: var(--gap-stack);
    font-size: var(--text-lead);
    line-height: var(--leading-relaxed, var(--leading-normal));
    max-inline-size: var(--size-measure-prose);
  }
  .verdict-subject .facts { margin-block-start: var(--gap-group); }
  .collateral-strip {
    display: grid;
    gap: var(--gap-items);
    margin-block: var(--gap-group);
  }
  .collateral-group { display: grid; gap: var(--gap-stack); }
  .chips { display: flex; flex-wrap: wrap; gap: var(--gap-stack); }
  .chip {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-inline);
    min-block-size: var(--size-control-height-base);
    padding: var(--pad-badge-block) var(--pad-control-inline);
    border: var(--border-hairline) solid var(--edge-default);
    border-radius: var(--radius-pill);
    background: var(--surface-base);
    color: var(--text-primary);
    text-decoration: none;
  }
  a.chip:hover { background: var(--surface-hover); border-color: var(--edge-control); }
  /* A tappable chip looks tappable: the id wears the interactive colour and
     the distinguishing words ride beside it, truncated. */
  a.chip .row-id { color: var(--interactive); }
  .chip-word {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-inline-size: calc(var(--size-measure-prose) / 4);
    color: var(--text-secondary);
  }
  .chip[data-variant="quiet"] { color: var(--text-secondary); background: transparent; }
  .chip[data-variant="door"] { color: var(--interactive); }
  .decision .hatch { max-inline-size: var(--size-measure-prose); }
  /* The case: criteria applied one mark at a time. Met marks are quiet
     ticks; weak and unmet marks are the loud ones and carry their reason. */
  .case {
    display: grid;
    gap: var(--gap-stack);
    margin-block: var(--gap-group);
    max-inline-size: var(--size-measure-prose);
  }
  .marks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--gap-stack);
  }
  .case-mark { display: flex; gap: var(--gap-items); align-items: baseline; }
  .mark-glyph::before { font-weight: var(--weight-semibold); }
  .case-mark[data-state="met"] { color: var(--text-secondary); }
  .case-mark[data-state="met"] .mark-glyph::before { content: "✓"; color: var(--status-ok-mark); }
  .case-mark[data-state="weak"] .mark-glyph::before { content: "!"; color: var(--status-warn-mark); }
  .case-mark[data-state="unmet"] .mark-glyph::before { content: "✕"; color: var(--status-fail-mark); }
  .case-mark[data-state="weak"] .mark-text,
  .case-mark[data-state="unmet"] .mark-text { color: var(--text-primary); }
  .mark-note { color: var(--text-secondary); }
  .case-recommend {
    display: grid;
    justify-items: start;
    gap: var(--gap-items);
    margin-block-start: var(--gap-group);
  }
  .recommend-because { color: var(--text-primary); }
  .case-missing { color: var(--status-warn); }
  /* The verdict group is this surface's verb: full control height, body
     type, and the proposer's staked recommendation ringed — visible even
     while the controls are withheld. */
  .action-group .btn {
    min-block-size: var(--size-control-height-large);
    font-size: var(--text-body);
  }
  .btn[data-recommended="true"] {
    outline: var(--size-rail) solid var(--edge-accent);
    outline-offset: var(--gap-hair);
  }
  .dock-move {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-stack);
  }
  .dock-verdict {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: var(--gap-items);
  }
  .dock-pos {
    color: var(--text-secondary);
    font-variant-numeric: var(--numeric);
    white-space: nowrap;
  }
  .btn:disabled, .btn[aria-disabled="true"] {
    color: var(--text-tertiary);
    border-color: var(--edge-default);
    background: transparent;
    cursor: not-allowed;
  }
  /* Tablet and down: the workbench stacks, the roster rides above the
     decision, and the roster keeps its own bounded scroll so the item under
     decision stays within reach. */
  @media (max-width: 64rem) {
    .workbench { grid-template-columns: minmax(0, 1fr); }
    .roster {
      border-inline-end: 0;
      border-block-end: var(--border-hairline) solid var(--edge-default);
    }
    .verdict-rail {
      border-inline-start: 0;
      border-block-start: var(--border-hairline) solid var(--edge-default);
    }
  }


}