/* ============================================================================
 * components.css — one section per web/rms/ui/ component, in the order of
 * the ui/ directory listing. var() only: every value comes from tokens.css.
 *
 * Selectors are one class deep wherever possible, with state as .is-* or a
 * data attribute on the same element, so no two sections fight over
 * specificity.
 * ==========================================================================*/

/* --- shared: text, controls, focus -----------------------------------------*/

.rms-sr {
  position: absolute;
  width: var(--g-hairline);
  height: var(--g-hairline);
  overflow: hidden;
  clip-path: var(--g-clip-all);
  white-space: nowrap;
}

.rms-mono {
  font-family: var(--t-mono);
  letter-spacing: var(--t-track-mono);
}
/* an id never breaks inside (8 Nov: "UUID7-TC-ST-stress" over three lines): an item's link and an id-like word of running text
 * (ui/words.js) stay whole on their line */
a.rms-mono, .rms-mono[data-pop], .rms-whole { white-space: nowrap; }

.rms-kbd {
  display: inline-block;
  padding: 0 var(--g-space-1);
  border: 0;
  border-radius: var(--g-radius-sm);
  background: var(--c-elevated);
  font-family: var(--t-mono);
  font-size: var(--t-size-xs);
  line-height: var(--t-lh-base);
  color: var(--c-text-muted);
}

/* A button (the system's Button): the card's ground inside a rule, the outline darkening to the frame grey under the pointer. The one
 * primary of a screen is the bar (blueprint navy in light, slate in dark) with white words; a toggle that is on is the selection blue.
 * A destructive action is an outlined button that asks in the page, never a red one. */
.rms-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--g-space-2);
  height: var(--g-control-h);
  padding: 0 var(--g-pad-btn-x);
  border: var(--g-border) solid var(--c-border);
  border-radius: var(--g-radius-md);
  background: var(--c-surface);
  color: var(--c-text);
  font: inherit;
  font-size: var(--t-size-base);
  font-weight: var(--t-weight-medium);
  line-height: var(--t-lh-base);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--c-shadow-btn);
  transition: background var(--g-motion-fast) var(--g-ease), border-color var(--g-motion-fast) var(--g-ease), color var(--g-motion-fast) var(--g-ease);
}
.rms-btn:hover { background: var(--c-elevated); border-color: var(--c-hover-frame); }
.rms-btn:disabled { cursor: not-allowed; opacity: 0.55; }
.rms-btn:disabled:hover { background: var(--c-surface); border-color: var(--c-border); }
.rms-btn-ghost { background: var(--c-surface); }
.rms-btn.is-on,
.rms-btn[aria-pressed="true"],
.rms-btn[aria-expanded="true"] { background: var(--c-pressed); border-color: var(--c-select-strong); color: var(--c-on-select); }
.rms-btn-accent { border-color: var(--c-bar); background: var(--c-bar); color: var(--c-on-bar); box-shadow: var(--c-shadow-accent); }
.rms-btn-accent:hover { border-color: var(--c-bar); background: color-mix(in srgb, var(--c-bar) var(--c-tint-press), var(--c-surface)); }
.rms-btn-accent:disabled:hover { border-color: var(--c-bar); background: var(--c-bar); }
.rms-btn-accent:is(.is-on, [aria-pressed="true"], [aria-expanded="true"]) { border-color: var(--c-bar); background: color-mix(in srgb, var(--c-bar) var(--c-tint-press), var(--c-surface)); color: var(--c-on-bar); }
.rms-btn-danger { border-color: var(--c-border); color: var(--c-err); }
.rms-btn-danger:hover { border-color: var(--c-err); background: var(--c-bad-tint); }

.rms-input {
  height: var(--g-control-h);
  min-width: 0;
  padding: 0 var(--g-space-2);
  border: var(--g-border) solid var(--c-field-edge);
  border-radius: var(--g-radius-sm);
  background: var(--c-surface);
  color: var(--c-text);
  font: inherit;
  font-size: var(--t-size-base);
}
.rms-input:hover { border-color: var(--c-hover-frame); }
.rms-input::placeholder { color: var(--c-text-muted); }
/* The file picker's button as the app's buttons (2026-10-31: the browser's own stood out). */
.rms-view input[type="file"] { font: inherit; color: var(--c-text-muted); }
.rms-view input[type="file"]::file-selector-button { margin-right: var(--g-space-2); padding: var(--g-space-1) var(--g-space-3); border: var(--g-border) solid var(--c-border); border-radius: var(--g-radius-md); background: var(--c-surface); color: var(--c-text); font: inherit; cursor: pointer; }
.rms-view input[type="file"]::file-selector-button:hover { background: var(--c-hover); }
textarea.rms-input {
  height: auto;
  max-block-size: var(--g-textarea-max);
  padding: var(--g-space-2);
  line-height: var(--t-lh-text);
  resize: vertical;
  field-sizing: content; /* as tall as its text; ui/form.js counts rows where a browser has no field-sizing */
}
.rms-input.is-mono { font-family: var(--t-mono); }
.rms-input[aria-invalid="true"] { border-color: var(--c-err); }

/* Focus: a 2 px ring in cyanotype, offset 2 px, on every interactive element (inside a scrolling list it sits just inside the row). */
:is(.rms-app, .rms-modal, .rms-menu) :focus-visible {
  outline: var(--g-focus-ring) solid var(--c-focus);
  outline-offset: var(--g-focus-offset);
}
:is(.rms-menu, .rms-palette-list, .rms-tree, .rms-table-viewport, .rms-viewpick-list) :focus-visible { outline-offset: calc(var(--g-focus-ring) * -1); }

/* --- badge.js ----------------------------------------------------------------*/

/* A state is a chip (the system's Tag): mono, on a sunk ground, its mark's shape first (○ ◐ ● ✓ ×) in its family's colour, the words
 * always there. A state that means something tints the chip: proof verdigris, the review loop the accent, "look again" ochre, refused
 * the red pen; the controlled majority stays plain. */
.rms-badge {
  --rms-badge-c: var(--c-life-working);
  --rms-badge-bg: var(--c-elevated);
  display: inline-flex;
  align-items: baseline;
  gap: var(--g-space-1);
  max-width: 100%;
  padding: var(--g-pad-chip-y) var(--g-space-2) var(--g-pad-chip-y) var(--g-space-2);
  border: 0;
  border-radius: var(--g-radius-sm);
  background: var(--rms-badge-bg);
  color: var(--c-text);
  font-family: var(--t-mono);
  font-size: var(--t-size-tag);
  font-weight: var(--t-weight-medium);
  line-height: var(--t-lh-base);
  white-space: nowrap;
  vertical-align: baseline;
}
.rms-badge-mark { min-width: var(--g-icon-sm); color: var(--rms-badge-c); font-family: var(--t-sans); font-weight: var(--t-weight-semibold); text-align: center; }
.rms-badge-text { overflow: hidden; text-overflow: ellipsis; }
.rms-badge-life[data-family="dead"] .rms-badge-text { color: var(--c-text-muted); }
.rms-badge-life[data-family="review"] { --rms-badge-bg: var(--c-accent-tint); color: var(--c-accent); }
.rms-badge-life[data-family="proven"],
.rms-badge-verif[data-family="pass"] { --rms-badge-bg: var(--c-ok-tint); color: var(--c-ok); }
.rms-badge-verif:is([data-family="blocked"], [data-family="partial"], [data-family="stale"]),
.rms-badge-crit[data-family="high"],
.rms-badge-link[data-family="suspect"],
.rms-badge-diff[data-family="changed"] { --rms-badge-bg: var(--c-warn-tint); color: var(--c-warn); }
.rms-badge-verif[data-family="fail"],
.rms-badge-crit[data-family="safety"],
.rms-badge-diff[data-family="removed"] { --rms-badge-bg: var(--c-bad-tint); color: var(--c-err); }
.rms-badge-diff[data-family="added"] { --rms-badge-bg: var(--c-ok-tint); color: var(--c-ok); }

.rms-badge-life[data-family="working"] { --rms-badge-c: var(--c-life-working); }
.rms-badge-life[data-family="review"] { --rms-badge-c: var(--c-life-review); }
.rms-badge-life[data-family="controlled"] { --rms-badge-c: var(--c-life-controlled); }
.rms-badge-life[data-family="proven"] { --rms-badge-c: var(--c-life-proven); }
.rms-badge-life[data-family="dead"] { --rms-badge-c: var(--c-life-dead); }

.rms-badge-verif[data-family="pass"] { --rms-badge-c: var(--c-verif-pass); }
.rms-badge-verif[data-family="fail"] { --rms-badge-c: var(--c-verif-fail); }
.rms-badge-verif[data-family="blocked"] { --rms-badge-c: var(--c-verif-blocked); }
.rms-badge-verif[data-family="partial"] { --rms-badge-c: var(--c-verif-partial); }
.rms-badge-verif[data-family="stale"] { --rms-badge-c: var(--c-verif-stale); }
.rms-badge-verif[data-family="none"] { --rms-badge-c: var(--c-verif-none); }

.rms-badge-crit[data-family="none"] { --rms-badge-c: var(--c-crit-none); }
.rms-badge-crit[data-family="low"] { --rms-badge-c: var(--c-crit-low); }
.rms-badge-crit[data-family="medium"] { --rms-badge-c: var(--c-crit-medium); }
.rms-badge-crit[data-family="high"] { --rms-badge-c: var(--c-crit-high); }
.rms-badge-crit[data-family="safety"] { --rms-badge-c: var(--c-crit-safety); }

.rms-badge-link[data-family="suspect"] { --rms-badge-c: var(--c-link-suspect); }
.rms-badge-link[data-family="retired"] { --rms-badge-c: var(--c-link-retired); }

.rms-badge-diff[data-family="added"] { --rms-badge-c: var(--c-diff-added); }
.rms-badge-diff[data-family="removed"] { --rms-badge-c: var(--c-diff-removed); }
.rms-badge-diff[data-family="changed"] { --rms-badge-c: var(--c-diff-changed); }

/* --- assistant.js --------------------------------------------------------------*/

/* The set-up's assistant: a sunken panel docked beside the drawing; what the last check changed on a brass edge (what you just did), the
 * step a ruled card on the sheet, its fix in mono, its actions under it, the walk's own buttons last under a rule. */
.rms-assistant { display: flex; flex-direction: column; gap: var(--g-space-3); min-width: 0; padding: var(--g-space-5); border: var(--g-border) solid var(--c-border); border-radius: var(--g-radius-lg); background: var(--c-surface); box-shadow: var(--c-shadow-1); }
.rms-view .rms-assistant-title { margin: 0; font-size: var(--t-size-md); font-weight: var(--t-weight-semibold); }
.rms-assistant-live:empty { display: none; }
.rms-assistant-changed { margin: 0; padding: var(--g-space-2) var(--g-space-3); border-radius: var(--g-radius-md); background: var(--c-selection); color: var(--c-on-select); font-size: var(--t-size-sm); line-height: var(--t-lh-small); }
.rms-assistant-changed-label, .rms-assistant-next-label { color: var(--c-text-muted); font-weight: var(--t-weight-medium); }
.rms-assistant-where, .rms-assistant-next { margin: 0; line-height: var(--t-lh-text); }
.rms-assistant-done { margin: 0; padding: var(--g-space-2) var(--g-space-3); border-radius: var(--g-radius-md); background: var(--c-ok-tint); font-weight: var(--t-weight-medium); line-height: var(--t-lh-base); }
.rms-assistant-done-mark { color: var(--c-ok); font-weight: var(--t-weight-semibold); }
.rms-assistant-card { display: grid; gap: var(--g-space-2); min-width: 0; padding: var(--g-space-3); border-radius: var(--g-radius-md); background: var(--c-elevated); }
.rms-view .rms-assistant-card-title { margin: 0; font-size: var(--t-size-md); font-weight: var(--t-weight-semibold); }
.rms-assistant-card-sub { margin: 0; color: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-assistant-rows { display: grid; margin: 0; }
.rms-assistant-rows dt { color: var(--c-text-muted); font-size: var(--t-size-xs); font-weight: var(--t-weight-medium); }
.rms-assistant-rows dd { margin: 0 0 var(--g-space-2); min-width: 0; line-height: var(--t-lh-base); overflow-wrap: anywhere; }
.rms-assistant-fix { display: block; padding: var(--g-space-2); border-radius: var(--g-radius-sm); background: var(--c-surface); font-family: var(--t-mono); font-size: var(--t-size-xs); line-height: var(--t-lh-base); white-space: pre-wrap; overflow-wrap: anywhere; }
.rms-assistant-actions, .rms-assistant-nav { display: flex; flex-wrap: wrap; gap: var(--g-space-2); }
.rms-assistant-nav { padding-top: var(--g-space-3); border-top: var(--g-border) solid var(--c-border-strong); }

/* --- chain.js ------------------------------------------------------------------*/

/* One chain of items: ruled cards on the sheet, the link between two in muted words with its arrow; the item the chain starts from
 * ringed in brass (the one this screen is about); a suspect link careful, ochre with its mark. */
.rms-chain-scroll { overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: var(--g-space-2); }
.rms-chain { display: flex; align-items: stretch; margin: 0 0 var(--g-space-5); padding: 0; list-style: none; }
.rms-chain-node { flex: 0 0 var(--g-chain-card-w); min-width: 0; }
.rms-chain-card { display: flex; flex-direction: column; gap: var(--g-space-1); height: 100%; box-sizing: border-box; padding: var(--g-space-3); border: var(--g-border) solid var(--c-border); border-radius: var(--g-radius-sm); background: var(--c-surface); color: var(--c-text); }
.rms-view .rms-chain a.rms-chain-card { color: var(--c-text); text-decoration: none; }
.rms-view .rms-chain a.rms-chain-card:hover { border-color: var(--c-hover-frame); }
.rms-chain-node.is-focus .rms-chain-card { border-color: var(--c-select-strong); background: var(--c-selection); box-shadow: 0 0 0 var(--g-hairline) var(--c-select-strong); }
.rms-chain-kind { color: var(--c-text-muted); font-size: var(--t-size-xs); }
.rms-chain-id { color: var(--c-accent); font-family: var(--t-mono); font-size: var(--t-size-sm); font-weight: var(--t-weight-medium); letter-spacing: var(--t-track-mono); overflow-wrap: anywhere; }
.rms-chain-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--g-space-2); }
.rms-chain-rev { color: var(--c-text-muted); font-family: var(--t-mono); font-size: var(--t-size-xs); }
.rms-chain-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: var(--t-size-sm); line-height: var(--t-lh-base); }
.rms-chain-link { display: flex; flex: 0 0 var(--g-chain-link-w); flex-direction: column; align-items: center; justify-content: center; gap: var(--g-hairline); min-width: 0; padding: 0 var(--g-space-2); color: var(--c-text-muted); font-size: var(--t-size-xs); text-align: center; }
.rms-chain-type { font-family: var(--t-mono); overflow-wrap: anywhere; }
.rms-chain-arrow { color: var(--c-text-muted); font-size: var(--t-size-lg); line-height: var(--t-lh-tight); }
.rms-chain-link.is-suspect, .rms-chain-link.is-suspect .rms-chain-arrow { color: var(--c-warn); }
.rms-chain-link.is-suspect .rms-chain-type { text-decoration: underline dashed; text-underline-offset: var(--g-underline-offset); }
.rms-chain-suspect::before { content: "⚠ "; }

/* --- empty.js ------------------------------------------------------------------*/

.rms-empty,
.rms-refused {
  display: grid;
  justify-items: start;
  gap: var(--g-space-3);
  padding: var(--g-space-3) 0;
}
.rms-empty-text { margin: 0; color: var(--c-text-muted); }
/* an item the moment does not hold (notInViewState): what is missing said first, in the text's ink; where it stands now, muted */
.rms-notin .rms-empty-text { color: var(--c-text); font-weight: var(--t-weight-medium); }
.rms-notin-latest { margin: 0; color: var(--c-text-muted); }
.rms-refused-class { margin: 0; font-weight: var(--t-weight-semibold); }

/* --- frame.js ------------------------------------------------------------------*/

.rms-status-item { overflow: hidden; text-overflow: ellipsis; }
.rms-status-item + .rms-status-item { padding-left: var(--g-space-4); border-left: var(--g-border) solid var(--c-border-strong); }
.rms-status-item.is-mono { font-family: var(--t-mono); }
.rms-status-item.is-warn { color: var(--c-warn); }
.rms-status-item.is-err { color: var(--c-err); }

/* --- gauge.js ------------------------------------------------------------------*/

/* A table's use against its maximum: the label, the figure in mono, a hairline bar in ink; near the maximum the warning's mark. */
.rms-gauges { display: grid; margin: 0; padding: 0; list-style: none; border-top: var(--g-border) solid var(--c-border); }
.rms-gauge { display: grid; grid-template-columns: minmax(0, 1fr) max-content minmax(0, var(--g-gauge-w)); align-items: center; gap: var(--g-space-2) var(--g-space-4); padding: var(--g-space-2) 0; border-bottom: var(--g-border) solid var(--c-border); }
.rms-gauge-figure { color: var(--c-text-muted); font-family: var(--t-mono); font-size: var(--t-size-sm); font-variant-numeric: tabular-nums; }
/* The system's meter: a pill track on sunk, filled in the accent, always followed by its count. */
.rms-gauge-bar { position: relative; display: block; height: var(--g-meter-h); overflow: hidden; border-radius: var(--g-radius-pill); background: var(--c-elevated); }
.rms-gauge-fill { position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--fill, 0) * 100%); border-radius: var(--g-radius-pill); background: var(--c-accent); }
.rms-gauge.is-near .rms-gauge-figure { color: var(--c-warn); }
.rms-gauge.is-near .rms-gauge-fill { background: var(--c-warn); }

/* --- graph.js ------------------------------------------------------------------*/

.rms-graph {
  display: block;
  max-width: none;
  height: auto;
  font-family: var(--t-mono);
  font-size: var(--t-size-sm);
}
/* The system's figure vocabulary: boxes with small corners on the sheet, ink-2 edges with filled arrowheads; the item in focus on the
 * accent's tint, a suspect edge dashed ochre. */
.rms-graph-node rect { fill: var(--c-surface); stroke: var(--c-text-muted); stroke-width: 1.2; rx: var(--g-radius-sm); }
.rms-graph-node text { fill: var(--c-text); }
.rms-graph-node.is-focus rect { fill: var(--c-accent-tint); stroke: var(--c-accent); stroke-width: 1.5; }
.rms-graph-node:hover rect,
.rms-graph-node:focus-visible rect { stroke: var(--c-hover-frame); }
.rms-graph-node:focus-visible rect { stroke: var(--c-focus); stroke-width: var(--g-focus-ring); }
.rms-graph-edge path { fill: none; stroke: var(--c-text-muted); stroke-width: 1.3; }
.rms-graph-edge.is-suspect path { stroke: var(--c-link-suspect); stroke-dasharray: var(--g-space-1) var(--g-space-1); }
.rms-graph-edge-label { fill: var(--c-text-muted); font-family: var(--t-mono); font-size: var(--t-size-sm); } /* as large as the ids: a fitted trace reads whole */
.rms-graph-edge-ground { fill: var(--c-elevated); } /* a name on its line: the window's ground (.rms-zp-view) under it, the line broken there */
.rms-graph-edge-label.is-suspect-label { fill: var(--c-link-suspect); }
.rms-graph-arrowhead { fill: var(--c-text-muted); }
/* an item the moment shown does not hold (a baseline frozen without it): greyed, dashed, no link to follow */
.rms-graph-node.is-outside rect { fill: var(--c-elevated); stroke: var(--c-border-strong); stroke-dasharray: var(--g-map-dash); }
.rms-graph-node.is-outside text { fill: var(--c-text-muted); }
.rms-graph-node.is-outside { cursor: default; }
.rms-graph-edge.is-outside path { stroke: var(--c-border-strong); stroke-dasharray: var(--g-map-dot); }

/* --- inspector.js --------------------------------------------------------------*/

.rms-inspector { display: flex; flex-direction: column; min-height: 100%; }

/* The inspector's head is the Drawer's: the ID in the accent, its state chip, under a rule. */
.rms-inspector-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--g-space-3);
  padding: var(--g-space-4) var(--g-space-5);
  border-bottom: var(--g-border) solid var(--c-border);
}
.rms-inspector-id { color: var(--c-accent); font-family: var(--t-mono); font-size: var(--t-size-sm); font-weight: var(--t-weight-medium); letter-spacing: var(--t-track-mono); }
.rms-inspector-rev { color: var(--c-text-muted); font-family: var(--t-mono); font-size: var(--t-size-sm); }
.rms-inspector-none { color: var(--c-text-muted); }

/* The system's TabBar: one rounded bar of tabs on the card's ground, the current one filled with the selection blue; narrower than its
 * tabs it wraps them onto a next row (css/layout.css: never one hidden past an edge). One strip everywhere (the owner, 2026-10-31: "all of them have a different width"): the whole
 * width of what holds it, left aligned, no margin of its own but the room under it; the inspector keeps its inner gap. */
.rms-tabs {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  gap: var(--g-space-1);
  margin: 0 0 var(--g-space-3);
  padding: var(--g-space-1);
  border: var(--g-border) solid var(--c-border);
  border-radius: var(--g-radius-md);
  background: var(--c-surface);
  box-shadow: var(--c-shadow-1);
  overflow-x: auto;
  scrollbar-width: none;
  /* the strip stays on top of a long tab (2026-11-01: "keeps visible the upper titles even if one scrolls down a lot") */
  position: sticky;
  top: 0;
  z-index: var(--g-z-sticky);
}
.rms-tab {
  padding: var(--g-pad-tab-y) var(--g-space-3);
  border: 0;
  border-radius: var(--g-radius-sm);
  background: transparent;
  color: var(--c-text-muted);
  font: inherit;
  font-size: var(--t-size-base);
  font-weight: var(--t-weight-medium);
  cursor: pointer;
}
.rms-tab:hover { color: var(--c-text); background: var(--c-elevated); }
.rms-tab[aria-selected="true"] { background: var(--c-selection); color: var(--c-on-select); }

.rms-tabpanel { flex: 1; padding: var(--g-space-4) var(--g-space-5); overflow: auto; }
.rms-inspector .rms-tabs { margin: var(--g-space-3) var(--g-space-3) 0; }
/* A window's tabs (views/index.js windowTabs): the same strip, its tabs links, above the screen with the page's own padding. */
.rms-wintabs { padding: var(--g-space-4) var(--g-page-pad) 0; }
.rms-wintabs .rms-tabs { margin: 0; }
.rms-view a.rms-tab { color: var(--c-text-muted); text-decoration: none; }
.rms-view a.rms-tab:hover { color: var(--c-text); }
.rms-view a.rms-tab[aria-current="page"] { background: var(--c-selection); color: var(--c-on-select); }
.rms-page > .rms-tabpanel, .rms-rules .rms-tabpanel { padding: 0; overflow: visible; }
.rms-tabpanel > :first-child { margin-top: 0; } /* the page's gap is the space under the strip: no default margin on top of it */

/* --- key_help.js ---------------------------------------------------------------*/

.rms-keyhelp {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--g-space-2) var(--g-space-4);
  margin: 0;
}
.rms-keyhelp-keys { display: flex; gap: var(--g-space-1); }
.rms-keyhelp-what { margin: 0; color: var(--c-text-muted); }

/* --- ladder.js -----------------------------------------------------------------*/

/* The readiness ladder: one ruled strip, a rung per stage; a rung reached is the sheet, one not yet sunken; the rung the project stands
 * on carries brass under it. A rule that holds lights (its mark green on a soft tint); one that does not stays dashed with its count. */
.rms-ladder { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; margin: 0; padding: 0; overflow: hidden; list-style: none; border: var(--g-border) solid var(--c-border); border-radius: var(--g-radius-lg); background: var(--c-elevated); box-shadow: var(--c-shadow-1); }
.rms-rung { display: flex; flex-direction: column; gap: var(--g-space-2); min-width: 0; padding: var(--g-space-3); border-right: var(--g-border) solid var(--c-border); }
.rms-rung:last-child { border-right: 0; }
.rms-rung.is-reached { background: var(--c-surface); }
.rms-rung.is-here { background: var(--c-selection); color: var(--c-on-select); box-shadow: inset 0 calc(-1 * var(--g-border-strong)) 0 var(--c-select-strong); }
.rms-rung-head { display: flex; align-items: baseline; gap: var(--g-space-2); }
.rms-rung-n { color: var(--c-text-muted); font-family: var(--t-mono); font-size: var(--t-size-xs); }
.rms-rung-word { font-weight: var(--t-weight-semibold); overflow-wrap: anywhere; }
.rms-rung-mark { margin-left: auto; color: var(--c-ok); font-weight: var(--t-weight-semibold); }
.rms-rung-means { margin: 0; color: var(--c-text-muted); font-size: var(--t-size-xs); line-height: var(--t-lh-base); }
.rms-rung-rules { display: grid; gap: var(--g-space-1); margin: 0; padding: 0; list-style: none; }
.rms-rule {
  display: grid;
  grid-template-columns: var(--g-icon-sm) minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--g-hairline) var(--g-space-1);
  width: 100%;
  padding: var(--g-space-1);
  border: var(--g-border) dashed var(--c-frame);
  border-radius: var(--g-radius-sm);
  background: var(--c-surface);
  color: var(--c-text-muted);
  font: inherit;
  font-size: var(--t-size-xs);
  line-height: var(--t-lh-tight);
  text-align: left;
  cursor: pointer;
}
.rms-rule.is-holding { border-style: solid; border-color: var(--c-ok); background: var(--c-ok-tint); color: var(--c-text); }
.rms-rule:hover { border-color: var(--c-hover-frame); }
.rms-rule[aria-pressed="true"] { border-style: solid; border-color: var(--c-select-strong); background: var(--c-selection); color: var(--c-on-select); box-shadow: 0 0 0 var(--g-hairline) var(--c-select-strong); }
.rms-rule-mark { font-weight: var(--t-weight-semibold); text-align: center; }
.rms-rule.is-holding .rms-rule-mark { color: var(--c-ok); }
.rms-rule-label { min-width: 0; overflow-wrap: break-word; }
.rms-rule-missing { color: var(--c-err); font-family: var(--t-mono); }
.rms-rule-changed { grid-column: 2 / -1; font-weight: var(--t-weight-semibold); }
.rms-rule.is-now .rms-rule-changed { color: var(--c-ok); }
.rms-rule.is-lost .rms-rule-changed { color: var(--c-err); }

/* --- link_list.js --------------------------------------------------------------*/

.rms-links { display: grid; gap: var(--g-space-4); }
.rms-links-section { display: grid; gap: var(--g-space-2); }
.rms-links-title {
  margin: 0;
  font-size: var(--t-size-xs);
  font-weight: var(--t-weight-medium);
  line-height: var(--t-lh-base);
  color: var(--c-text-muted);
}
.rms-links-group { display: grid; gap: var(--g-space-1); }
.rms-links-type { display: flex; gap: var(--g-space-2); font-size: var(--t-size-sm); }
.rms-links-arrow { color: var(--c-text-muted); }
.rms-links-items { display: grid; gap: var(--g-space-1); margin: 0; padding: 0 0 0 var(--g-space-5); list-style: none; }
.rms-links-item { display: flex; align-items: center; gap: var(--g-space-2); }
.rms-links-target { color: var(--c-accent); font-family: var(--t-mono); font-size: var(--t-size-sm); font-weight: var(--t-weight-medium); text-decoration: none; }
.rms-links-target:hover { text-decoration: underline; text-decoration-color: currentColor; }

/* --- menu.js -------------------------------------------------------------------*/

.rms-menu {
  position: fixed;
  top: var(--rms-menu-y);
  left: var(--rms-menu-x);
  z-index: var(--g-z-menu);
  display: grid;
  min-width: var(--g-menu-w);
  max-width: var(--g-menu-w-max);
  padding: var(--g-space-1);
  border: var(--g-border) solid var(--c-border);
  border-radius: var(--g-radius-md);
  background: var(--c-surface);
  box-shadow: var(--c-shadow-pop);
  color: var(--c-text);
  font-family: var(--t-sans);
  font-size: var(--t-size-base);
  line-height: var(--t-lh-base);
}
/* A row of the system's ContextMenu: the selection blue under the pointer or the keyboard; one that is closed stays in its place in
 * the secondary ink, its reason under it (the right's name and who holds it). */
.rms-menu-item {
  display: grid;
  gap: 0;
  padding: var(--g-pad-tab-y) var(--g-pad-tab-x);
  border: 0;
  border-radius: var(--g-radius-sm);
  background: transparent;
  color: var(--c-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.rms-menu-item:hover:not(:disabled),
.rms-menu-item:focus-visible { background: var(--c-selection); color: var(--c-on-select); outline: none; }
.rms-menu-item:disabled { color: var(--c-text-muted); cursor: default; }
.rms-menu-reason { color: var(--c-text-muted); font-size: var(--t-size-xs); line-height: var(--t-lh-base); }

/* --- modal.js ------------------------------------------------------------------*/

.rms-modal {
  width: var(--g-modal-fit);
  padding: var(--g-space-5);
  border: var(--g-border) solid var(--c-border);
  border-radius: var(--g-radius-lg);
  background: var(--c-surface);
  box-shadow: var(--c-shadow-pop);
  color: var(--c-text);
  font-family: var(--t-sans);
  font-size: var(--t-size-base);
  line-height: var(--t-lh-base);
}
.rms-modal::backdrop { background: var(--c-backdrop); }
.rms-modal-title { margin: 0 0 var(--g-space-3); font-size: var(--t-size-xl); font-weight: var(--t-weight-semibold); line-height: var(--t-lh-heading); letter-spacing: var(--t-track-title); }
.rms-modal-body { display: grid; gap: var(--g-space-3); max-width: var(--g-text-measure); }
.rms-modal-actions { display: flex; justify-content: flex-end; gap: var(--g-space-2); margin-top: var(--g-space-5); }

/* --- notice.js -----------------------------------------------------------------*/

/* The system's Callout: a tinted, rounded block for the one thing the reader must not miss, its kind first in the kind's colour; no
 * left border. Default the accent, a warning ochre, a refusal the red pen. */
.rms-notice {
  --rms-notice-c: var(--c-accent);
  --rms-notice-bg: var(--c-accent-tint);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--g-space-2);
  padding: var(--g-space-3) var(--g-space-4);
  border-radius: var(--g-radius-md);
  background: var(--rms-notice-bg);
  color: var(--c-text);
}
.rms-notice-warn { --rms-notice-c: var(--c-warn); --rms-notice-bg: var(--c-warn-tint); }
.rms-notice-refused { --rms-notice-c: var(--c-err); --rms-notice-bg: var(--c-bad-tint); }
.rms-notice-mark { color: var(--rms-notice-c); font-weight: var(--t-weight-semibold); }
.rms-notice-token { font-family: var(--t-mono); font-size: var(--t-size-sm); color: var(--c-text); }
.rms-notice-detail { display: flex; flex-wrap: wrap; gap: var(--g-space-3); flex-basis: 100%; }
.rms-notice-pair { font-family: var(--t-mono); font-size: var(--t-size-xs); color: var(--c-text-muted); }

/* --- page_head.js --------------------------------------------------------------*/

/* Every screen's head: the title and its line on the left, the screen's actions on the right, the explanation folded under it; how its
 * row lays out and wraps is the one layout's (css/layout.css "a head"). */
.rms-head { margin: 0 0 var(--g-space-3); }
/* The one title of a screen (the system's display, 32/38), its lede in the secondary ink. */
.rms-view .rms-head-title { margin: 0; color: var(--c-text); font-size: var(--g-title-xl); font-weight: var(--t-weight-semibold); line-height: var(--t-lh-tight); letter-spacing: var(--t-track-display); }
.rms-head-sub { margin: var(--g-space-2) 0 0; color: var(--c-text-muted); font-size: var(--t-size-md); line-height: var(--t-lh-text); }
.rms-head-about { min-width: var(--g-control-h); justify-content: center; font-weight: var(--t-weight-semibold); }
.rms-head-help { margin: var(--g-space-3) 0 0; padding: var(--g-space-3) var(--g-space-4); border-radius: var(--g-radius-md); background: var(--c-elevated); }
.rms-head-help .rms-help:last-child { margin-bottom: 0; }

/* --- palette.js ----------------------------------------------------------------*/

.rms-palette {
  width: var(--g-palette-fit);
  margin-top: var(--g-palette-top);
  padding: 0;
}
/* The system's CommandPalette: one search box over grouped results, the chosen one in the selection blue. */
.rms-palette-input {
  width: 100%;
  height: calc(var(--g-control-h) * 1.5);
  padding: 0 var(--g-space-5);
  border: 0;
  border-bottom: var(--g-border) solid var(--c-border);
  background: transparent;
  color: var(--c-text);
  font: inherit;
  font-size: var(--t-size-lg);
}
.rms-palette-input:focus-visible { outline: none; }
.rms-palette-list { display: grid; max-height: var(--g-palette-list-h); padding: var(--g-space-1); overflow-y: auto; }
.rms-palette-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--g-space-3);
  padding: var(--g-space-2) var(--g-space-3);
  border-radius: var(--g-radius-sm);
  cursor: pointer;
}
.rms-palette-row:hover { background: var(--c-hover); }
.rms-palette-row.is-active { background: var(--c-selection); color: var(--c-on-select); }
.rms-palette-empty { padding: var(--g-space-3); color: var(--c-text-muted); }

/* --- pieces.js -----------------------------------------------------------------*/

/* People and responsibilities as pieces, an arrow per responsibility carried: boxes on the sheet in ink; what nobody carries sunken and
 * dashed; the platform owner's implicit roles dashed; the piece picked brass; an arrow a grant just added brass and whole. */
.rms-pieces { display: block; width: 100%; max-width: var(--g-pieces-max); height: auto; font-family: var(--t-sans); }
.rms-pieces-col { fill: var(--c-text-muted); font-size: var(--t-size-sm); font-weight: var(--t-weight-semibold); }
.rms-pieces-box { fill: var(--c-surface); stroke: var(--c-text-muted); stroke-width: 1.2; rx: var(--g-radius-sm); }
.rms-pieces-person.is-empty .rms-pieces-box, .rms-pieces-person.is-implicit .rms-pieces-box { stroke: var(--c-ghost); stroke-dasharray: var(--g-map-dash); }
.rms-pieces-person.is-implicit .rms-pieces-box { fill: var(--c-elevated); }
.rms-pieces-resp.is-missing .rms-pieces-box { fill: var(--c-warn-tint); stroke: var(--c-warn); stroke-dasharray: var(--g-map-dash); }
.rms-pieces-name { fill: var(--c-text); font-size: var(--t-size-md); font-weight: var(--t-weight-semibold); }
.rms-pieces-label { fill: var(--c-text); font-size: var(--t-size-md); font-weight: var(--t-weight-medium); }
.rms-pieces-resp.is-missing .rms-pieces-label { fill: var(--c-text-muted); }
.rms-pieces-sub { fill: var(--c-text-muted); font-family: var(--t-mono); font-size: var(--t-size-xs); }
.rms-pieces-person, .rms-pieces-resp { cursor: pointer; }
.rms-pieces-person:hover .rms-pieces-box, .rms-pieces-resp:hover .rms-pieces-box { stroke: var(--c-hover-frame); }
.rms-pieces-person:focus-visible, .rms-pieces-resp:focus-visible { outline: none; }
.rms-pieces-person:focus-visible .rms-pieces-box, .rms-pieces-resp:focus-visible .rms-pieces-box { stroke: var(--c-focus); stroke-width: var(--g-focus-ring); }
.rms-pieces-person.is-selected .rms-pieces-box, .rms-pieces-resp.is-selected .rms-pieces-box { stroke: var(--c-select-strong); stroke-width: 1.8; stroke-dasharray: none; fill: var(--c-selection); }
.rms-pieces-wire, .rms-pieces-head { fill: none; stroke: var(--c-text-muted); stroke-width: var(--g-map-wire); opacity: 0.7; }
.rms-pieces-arrow.is-implicit .rms-pieces-wire { stroke-dasharray: var(--g-map-dash); }
.rms-pieces-arrow.is-lit .rms-pieces-wire, .rms-pieces-arrow.is-lit .rms-pieces-head { stroke: var(--c-text); stroke-width: var(--g-map-wire-lit); opacity: 1; }
.rms-pieces-arrow.is-new .rms-pieces-wire, .rms-pieces-arrow.is-new .rms-pieces-head { stroke: var(--c-accent); stroke-width: 1.8; opacity: 1; }
.rms-pieces-list { margin: 0; padding: 0; list-style: none; border-top: var(--g-border) solid var(--c-border); }
.rms-pieces-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--g-space-1) var(--g-space-3); padding: var(--g-space-2) 0; border-bottom: var(--g-border) solid var(--c-border); }
.rms-pieces-pick { display: inline-flex; align-items: baseline; gap: var(--g-space-2); padding: 0; border: 0; background: none; color: var(--c-text); font: inherit; font-weight: var(--t-weight-medium); text-align: left; cursor: pointer; }
.rms-pieces-pick[aria-pressed="true"] { text-decoration: underline; text-decoration-color: var(--c-select-strong); text-decoration-thickness: var(--g-border-strong); text-underline-offset: var(--g-underline-offset); }
.rms-pieces-mark { color: var(--c-text-muted); font-weight: var(--t-weight-semibold); }
.rms-pieces-row.is-held .rms-pieces-mark { color: var(--c-ok); }
.rms-pieces-row-who { margin-left: auto; color: var(--c-text-muted); font-size: var(--t-size-sm); }

/* --- table.js ------------------------------------------------------------------*/

.rms-table {
  --rms-row-h: var(--g-row);
  position: relative;
  background: var(--c-surface); /* a table is on a card's ground, never on the board */
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.rms-table-viewport { position: relative; flex: 1; min-height: 0; overflow: auto; }

.rms-table-row {
  display: grid;
  grid-template-columns: var(--rms-cols);
  align-items: center;
  column-gap: var(--g-space-4);
  height: var(--rms-row-h);
  padding: 0 var(--rms-row-pad, var(--g-space-4));
  border-bottom: var(--g-border) solid var(--c-border);
  overflow: hidden;
}
/* The tutorial (ui/tour.js): a veil with a hole where the step points, a ring around it, a card beside it. The button sits in the top
 * bar of every screen. */
.rms-tour-btn { display: inline-flex; align-items: center; gap: var(--g-space-1); }
.rms-tour-btn-mark { width: var(--g-icon-sm); height: var(--g-icon-sm); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rms-tour { position: fixed; inset: 0; z-index: var(--g-z-tour); pointer-events: none; }
.rms-tour-veil { position: absolute; inset: 0; pointer-events: auto; }
.rms-tour-svg { display: block; }
.rms-tour-shade { fill-rule: evenodd; fill: color-mix(in srgb, var(--c-canvas) var(--c-mix-veil), transparent); }
.rms-tour-ring { position: absolute; left: var(--tour-x); top: var(--tour-y); width: var(--tour-w); height: var(--tour-h); border: var(--g-border-frame) solid var(--c-accent); border-radius: var(--g-radius-md); box-shadow: 0 0 0 var(--g-space-1) color-mix(in srgb, var(--c-accent) var(--c-mix-halo), transparent); transition: left var(--g-motion-fast) ease, top var(--g-motion-fast) ease, width var(--g-motion-fast) ease, height var(--g-motion-fast) ease; }
.rms-tour-card { position: absolute; left: var(--tour-x); top: var(--tour-y); display: grid; gap: var(--g-space-2); width: var(--g-tour-card-w); max-width: calc(100% - 2 * var(--g-space-3)); padding: var(--g-space-4); border: var(--g-border) solid var(--c-border-strong); border-top: var(--g-tone-bar) solid var(--c-accent); border-radius: var(--g-sheet-radius); background: var(--c-surface); box-shadow: var(--c-shadow-pop); color: var(--c-text); pointer-events: auto; outline: none; }
.rms-tour-top { display: flex; align-items: center; gap: var(--g-space-2); }
.rms-tour-guide { color: var(--c-text-muted); font-size: var(--t-size-xs); font-weight: var(--t-weight-semibold); letter-spacing: var(--t-track-mono); text-transform: uppercase; }
.rms-tour-count { margin-left: auto; color: var(--c-text-muted); font-family: var(--t-mono); font-size: var(--t-size-xs); }
.rms-tour-title { margin: 0; font-size: var(--t-size-lg); font-weight: var(--t-weight-semibold); text-wrap: balance; }
.rms-tour-say { margin: 0; color: var(--c-text); line-height: var(--t-lh-text); }
.rms-tour-acts { display: flex; align-items: center; gap: var(--g-space-2); margin-top: var(--g-space-1); }
.rms-tour-fill { flex: 1; }
.rms-tour-foot { display: flex; flex-wrap: wrap; gap: var(--g-space-1); padding-top: var(--g-space-2); border-top: var(--g-border) solid var(--c-border); }
.rms-tour-more { font-size: var(--t-size-sm); }

/* Every plain table sits in one box (ui/table.js tableBox): the box scrolls both ways inside a bounded height, so the column heads stay
 * pinned on top of the rows however long the table runs, and a wide table scrolls sideways inside it, never the page. The heads are
 * opaque (the rows pass under them) and carry the hairline that a sticky cell would otherwise lose to the collapsed border. */
.rms-table-box { position: relative; min-width: 0; max-block-size: var(--g-table-max-h); overflow: auto; }
.rms-table-box > table > thead th { position: sticky; top: 0; z-index: 2; background: var(--c-elevated); box-shadow: inset 0 calc(-1 * var(--g-border)) 0 var(--c-border-strong); }
.rms-table-box > table > caption { position: sticky; left: 0; }
/* A width set by the person (ui/colsize.js sizePlainTable): the table laid out fixed, every column at its width, the table their sum
 * (narrower than its box, or scrolling sideways in it); what no longer fits a cell ends in … rather than running into the next. */
.rms-table-box > table.is-sized { table-layout: fixed; width: var(--rms-table-w); min-width: 0; max-width: none; }
.rms-table-box > table.is-sized > thead > tr > :is(th, td) { width: var(--rms-col-w); }
.rms-table-box > table.is-sized > tbody > tr > :is(th, td), .rms-table-box > table.is-sized > thead > tr > :is(th, td) { overflow: hidden; text-overflow: ellipsis; }

/* --- colsize.js ----------------------------------------------------------------*/

/* A column's width the person sets: a band on its head's right edge (a window splitter), its line the column's rule at rest, the
 * selection's under the pointer, the focus ring's colour from the keys. Its head is positioned for it unless it already is (sticky). */
:where(.has-colsize) { position: relative; }
.rms-colsize { position: absolute; top: 0; right: 0; bottom: 0; z-index: 1; width: var(--g-colsize-w); cursor: col-resize; touch-action: none; outline: none; }
.rms-colsize::after { content: ""; position: absolute; top: var(--g-space-1); bottom: var(--g-space-1); right: calc((var(--g-colsize-w) - var(--g-colsize-line)) / 2); width: var(--g-colsize-line); border-radius: var(--g-radius-pill); background: var(--c-border); }
.rms-colsize:hover::after, .rms-colsize.is-dragging::after { top: 0; bottom: 0; background: var(--c-select-strong); }
.rms-colsize:focus-visible::after { top: 0; bottom: 0; background: var(--c-focus); box-shadow: 0 0 0 var(--g-hairline) var(--c-focus); }

/* The system's DataTable: small secondary heads on sunk, hairline rows tinted under the pointer, the chosen row the selection blue. */
.rms-table-head {
  position: sticky;
  top: 0;
  z-index: var(--g-z-sticky);
  background: var(--c-elevated);
  color: var(--c-text-muted);
  font-size: var(--t-size-xs);
  font-weight: var(--t-weight-medium);
  line-height: var(--t-lh-base);
}
.rms-table-rows { position: relative; height: calc(var(--rms-row-h) * var(--rms-rows, 0)); }
.rms-table-rows > .rms-table-row {
  position: absolute;
  top: calc(var(--rms-row-h) * var(--rms-row-i, 0));
  left: 0;
  right: 0;
  cursor: default;
}
.rms-table-rows > .rms-table-row:hover { background: var(--c-hover); }
.rms-table-rows > .rms-table-row.is-selected { background: var(--c-selection); color: var(--c-on-select); }
.rms-table-viewport:focus-visible { outline: none; }
.rms-table-viewport:focus-visible .rms-table-row.is-focus { box-shadow: inset 0 0 0 var(--g-focus-ring) var(--c-focus); }
/* the probe measures a row's height only: as wide as the table, never wider (on a phone its columns had widened the screen sideways) */
.rms-table-probe { position: absolute; inset-inline: 0; visibility: hidden; pointer-events: none; }
.rms-table-empty { flex: 1; }
/* widths set by the person (ui/colsize.js): a row never narrower than its tracks at their least, so the table scrolls sideways in its
 * viewport rather than hide its last columns; the probe keeps its own width */
.rms-table.is-sized .rms-table-viewport .rms-table-row, .rms-table.is-sized .rms-table-rows { min-width: var(--rms-cols-min); }

.rms-cell { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* In a column a plain state is its mark and its words; a state that means something keeps its tinted chip. */
.rms-cell .rms-badge:is(.rms-badge-life:is([data-family="working"], [data-family="controlled"], [data-family="dead"]), .rms-badge-crit:is([data-family="none"], [data-family="low"], [data-family="medium"]), .rms-badge-verif[data-family="none"], .rms-badge-link[data-family="retired"]) { padding-left: 0; background: transparent; }
/* Item IDs are always mono in the accent, never wrapped (the system's kr-id). */
.rms-cell-id { color: var(--c-accent); font-family: var(--t-mono); font-size: var(--t-size-sm); font-weight: var(--t-weight-medium); letter-spacing: var(--t-track-mono); }
.rms-cell-muted { color: var(--c-text-muted); }

/* --- text_diff.js --------------------------------------------------------------*/

.rms-textdiff { margin: 0; max-width: var(--g-text-measure); line-height: var(--t-lh-text); white-space: pre-wrap; }
/* The system's diff: what went struck through in the red pen on its tint, what came in ink on proof's tint. */
.rms-textdiff-del {
  border-radius: var(--g-radius-sm);
  background: var(--c-bad-tint);
  color: var(--c-err);
  text-decoration: line-through;
  text-decoration-color: var(--c-diff-removed);
}
.rms-textdiff-ins {
  border-radius: var(--g-radius-sm);
  background: var(--c-ok-tint);
  color: var(--c-text);
  text-decoration: underline;
  text-decoration-color: var(--c-diff-added);
}
.rms-textdiff-del + .rms-textdiff-ins { margin-left: var(--g-space-1); }

/* --- tiles.js ------------------------------------------------------------------*/

/* Figures that filter (the system's StatGrid; ui/tiles.js): one ruled strip, flush on the canvas as a drawing's title block is (the
 * owner, 2026-10-31: no bubbles), a cell per figure, a mono number over a short label, a hairline between cells; the cell one picked is
 * the selection blue, as a chosen option is. A figure someone must act on carries its mark in its tone. */
/* a row of cells as wide as the window, each at least its label's width (its label one line, never wrapped: "Who decides is who does"),
 * the row wrapping to a next one when they do not fit */
.rms-tiles { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 var(--g-space-4); border-block: var(--g-border) solid var(--c-border); }
.rms-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 var(--g-stat-min);
  gap: var(--g-space-1);
  min-width: min-content;
  padding: var(--g-space-3) var(--g-space-4);
  border: 0;
  border-left: var(--g-border) solid var(--c-border);
  border-radius: 0;
  background: none;
  color: var(--c-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--g-motion-fast) var(--g-ease), background var(--g-motion-fast) var(--g-ease);
}
.rms-tile:first-child { border-left: 0; }
.rms-tile:hover { background: var(--c-hover); }
.rms-tile.is-on { background: var(--c-selection); color: var(--c-on-select); box-shadow: inset 0 calc(-1 * var(--g-border-strong)) 0 var(--c-select-strong); }
.rms-tile.is-fixed { cursor: default; }
.rms-tile.is-fixed:hover { background: none; }
.rms-tile-label { order: 2; color: var(--c-text-muted); font-size: var(--t-size-sm); line-height: var(--t-lh-small); white-space: nowrap; }
.rms-tile.is-on .rms-tile-label { color: var(--c-on-select); }
.rms-tile-value { order: 1; display: inline-flex; align-items: baseline; gap: var(--g-space-1); white-space: nowrap; font-family: var(--t-mono); font-size: var(--t-size-metric); font-weight: var(--t-weight-medium); line-height: var(--t-lh-tight); font-variant-numeric: tabular-nums; }
.rms-tile-gauge, .rms-tile-note { order: 3; }
.rms-tile-mark { font-family: var(--t-sans); font-weight: var(--t-weight-semibold); color: var(--c-text-muted); }
.rms-tile[data-tone="fail"] .rms-tile-mark, .rms-tile[data-tone="fail"] .rms-tile-value { color: var(--c-err); } /* a figure that fails is red, its number too (0.76.0) */
.rms-tile[data-tone="warn"] .rms-tile-mark { color: var(--c-warn); }
.rms-tile[data-tone="ok"] .rms-tile-mark { color: var(--c-ok); }
.rms-tile-gauge { position: relative; display: block; width: 100%; height: var(--g-meter-h); overflow: hidden; border-radius: var(--g-radius-pill); background: var(--c-elevated); }
.rms-tile-gauge-fill { position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--fill, 0) * 100%); border-radius: var(--g-radius-pill); background: var(--c-accent); }
.rms-tile-note { color: var(--c-text-muted); font-size: var(--t-size-xs); }

/* --- tree.js -------------------------------------------------------------------*/

.rms-tree:focus-visible { outline: none; }
.rms-tree-item {
  display: flex;
  align-items: center;
  gap: var(--g-space-1);
  height: var(--g-row);
  padding: 0 var(--g-space-3) 0 calc(var(--g-space-2) + var(--g-tree-indent) * var(--rms-tree-level, 0));
  white-space: nowrap;
  cursor: default;
  /* indentation guides: one hairline per level, under the twisty of each ancestor */
  background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(var(--g-icon-sm) / 2),
    var(--c-border) calc(var(--g-icon-sm) / 2), var(--c-border) calc(var(--g-icon-sm) / 2 + var(--g-hairline)),
    transparent calc(var(--g-icon-sm) / 2 + var(--g-hairline)), transparent var(--g-tree-indent));
  background-size: calc(var(--g-tree-indent) * var(--rms-tree-level, 0)) 100%;
  background-position: var(--g-space-2) 0;
  background-repeat: no-repeat;
}
/* The current item is the selection blue, its words on-select at 600 (the system's navigation); an item of the same document is
 * tinted, not filled. */
.rms-tree { padding: var(--g-space-2); }
.rms-tree-item { border-radius: var(--g-radius-sm); }
.rms-tree-item:hover { background-color: var(--c-hover); }
.rms-tree-item.is-active { background-color: var(--c-selection); color: var(--c-on-select); font-weight: var(--t-weight-semibold); }
.rms-tree-item.is-same { background-color: var(--c-hover); }
/* a tree whose items carry more than a name: they wrap below their label on a narrow pane */
.rms-tree.is-rich .rms-tree-item { height: auto; min-height: var(--g-row); padding-block: var(--g-space-1); white-space: normal; flex-wrap: wrap; align-items: center; row-gap: var(--g-hairline); }
.rms-tree.is-rich .rms-tree-label { font-family: var(--t-sans); letter-spacing: normal; overflow: visible; }
.rms-tree:focus-visible .rms-tree-item.is-active { box-shadow: inset 0 0 0 var(--g-focus-ring) var(--c-focus); }
.rms-tree-twisty { display: inline-block; width: var(--g-icon-sm); color: var(--c-text-muted); text-align: center; }
.rms-tree-item[aria-expanded="false"] > .rms-tree-twisty::before { content: "▸"; }
.rms-tree-item[aria-expanded="true"] > .rms-tree-twisty::before { content: "▾"; }
.rms-tree-label { overflow: hidden; text-overflow: ellipsis; font-family: var(--t-mono); letter-spacing: var(--t-track-mono); }
.rms-tree-status { padding: var(--g-space-1) var(--g-space-5); color: var(--c-text-muted); font-size: var(--t-size-sm); }

/* --- verdict.js ----------------------------------------------------------------*/

/* The check sheet: a ruled block docked under the head. On the left the verdict cell, sunken, a heavy rule in the verdict's tone down
 * its edge (green holds, red missing: the one place a screen spends a hue on itself); on the right a ruled row per finding, what is
 * missing in ink, what holds receding to muted. The moves and who signed run under both. */
.rms-verdict {
  --rms-verdict-c: var(--c-text-muted);
  display: grid;
  grid-template-columns: var(--g-stamp-w) minmax(0, 1fr);
  margin: 0 0 var(--g-space-5);
  overflow: hidden;
  border: var(--g-border) solid var(--c-border);
  border-radius: var(--g-radius-lg);
  background: var(--c-surface);
  box-shadow: var(--c-shadow-1);
}
.rms-verdict:focus-visible { outline: var(--g-focus-ring) solid var(--c-focus); outline-offset: var(--g-hairline); }
.rms-verdict { --rms-verdict-bg: var(--c-elevated); }
.rms-verdict[data-state="holds"] { --rms-verdict-c: var(--c-ok); --rms-verdict-bg: var(--c-ok-tint); }
.rms-verdict[data-state="missing"],
.rms-verdict[data-state="refused"] { --rms-verdict-c: var(--c-err); --rms-verdict-bg: var(--c-bad-tint); }
.rms-verdict-stamp {
  display: flex;
  flex-direction: column;
  gap: var(--g-space-1);
  min-width: 0;
  padding: var(--g-space-5);
  border-right: var(--g-border) solid var(--c-border);
  background: var(--rms-verdict-bg);
}
.rms-verdict-word { display: flex; align-items: baseline; gap: var(--g-space-2); margin: 0; font-family: var(--t-title); font-size: var(--t-size-xl); font-weight: var(--t-weight-semibold); letter-spacing: var(--t-track-title); line-height: var(--t-lh-tight); }
.rms-verdict-mark { flex: none; color: var(--rms-verdict-c); }
.rms-verdict-subject { margin: var(--g-space-1) 0 0; font-family: var(--t-mono); font-size: var(--t-size-sm); letter-spacing: var(--t-track-mono); overflow-wrap: anywhere; }
.rms-verdict-when { margin: 0; color: var(--c-text-muted); font-size: var(--t-size-xs); }
.rms-verdict-actions { display: flex; flex-wrap: wrap; gap: var(--g-space-2); margin-top: auto; padding-top: var(--g-space-3); }
.rms-verdict-findings { margin: 0; padding: 0; list-style: none; min-width: 0; }
.rms-verdict-finding {
  display: grid;
  grid-template-columns: var(--g-icon-md) minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--g-space-1) var(--g-space-3);
  padding: var(--g-space-3) var(--g-space-5);
  border-bottom: var(--g-border) solid var(--c-border);
}
.rms-verdict-finding:last-child { border-bottom: 0; }
.rms-verdict-finding.is-quiet { grid-template-columns: minmax(0, 1fr); color: var(--c-text-muted); }
.rms-verdict-finding-mark { color: var(--c-text-muted); font-weight: var(--t-weight-semibold); text-align: center; }
.rms-verdict-finding[data-tone="missing"] .rms-verdict-finding-mark { color: var(--c-err); }
.rms-verdict-finding[data-tone="waits"] .rms-verdict-finding-mark { color: var(--c-warn); }
.rms-verdict-finding[data-tone="holds"] .rms-verdict-finding-mark { color: var(--c-ok); }
.rms-verdict-finding[data-tone="holds"] .rms-verdict-finding-text,
.rms-verdict-finding[data-tone="advice"] .rms-verdict-finding-text { color: var(--c-text-muted); }
.rms-verdict-finding-text { min-width: 0; overflow-wrap: anywhere; line-height: var(--t-lh-base); }
.rms-verdict-fix { justify-self: end; white-space: nowrap; }
.rms-verdict-fix .rms-btn { height: var(--g-row-compact); }
.rms-verdict-section { grid-column: 1 / -1; padding: var(--g-space-4) var(--g-space-5); border-top: var(--g-border) solid var(--c-border); }

.rms-moves-title { margin: 0 0 var(--g-space-1); font-size: var(--t-size-lg); font-weight: var(--t-weight-semibold); line-height: var(--t-lh-heading); }
.rms-moves-note { margin: 0 0 var(--g-space-2); color: var(--c-text-muted); font-size: var(--t-size-sm); line-height: var(--t-lh-base); }
.rms-moves-list { margin: 0; padding: 0; list-style: none; border-top: var(--g-border) solid var(--c-border); }
/* A move's row wraps by its own width, never a breakpoint: wide, its path, answer, checks and action in aligned columns; in a narrow
 * pane (the inspector) the checks take their own line rather than one word per line. */
.rms-move {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--g-space-1) var(--g-space-4);
  padding: var(--g-space-2) 0;
  border-bottom: var(--g-border) solid var(--c-border);
}
.rms-move > .rms-move-path { flex: 0 1 var(--g-move-path-w); min-width: 0; }
.rms-move > .rms-move-answer { flex: 0 1 var(--g-move-answer-w); }
.rms-move > :is(.rms-move-checks, .rms-move-nochecks) { flex: 1 1 var(--g-move-checks-min); min-width: 0; }
.rms-move > .rms-move-action { flex: none; margin-left: auto; }
.rms-move-path { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--g-space-1) var(--g-space-2); font-weight: var(--t-weight-semibold); }
.rms-move-arrow { color: var(--c-text-muted); }
.rms-move-answer { display: inline-flex; align-items: baseline; gap: var(--g-space-2); min-width: 0; }
.rms-move-mark { flex: none; color: var(--c-text-muted); font-weight: var(--t-weight-semibold); }
.rms-move[data-state="ready"] .rms-move-mark { color: var(--c-ok); }
.rms-move[data-state="waits"] .rms-move-mark { color: var(--c-warn); }
.rms-move[data-state="blocked"] .rms-move-mark,
.rms-move[data-state="refused"] .rms-move-mark { color: var(--c-err); }
/* A move's checks are plain sentences on sunk chips (the system's LifecycleExplorer), what is missing on the red pen's tint. */
.rms-move-checks { display: flex; flex-wrap: wrap; gap: var(--g-space-1) var(--g-space-2); margin: 0; padding: 0; list-style: none; font-size: var(--t-size-sm); }
.rms-move-check { display: inline-flex; align-items: baseline; gap: var(--g-space-1); padding: var(--g-hairline) var(--g-space-2); border-radius: var(--g-radius-sm); background: var(--c-elevated); color: var(--c-text); }
.rms-move-check-mark { font-weight: var(--t-weight-semibold); }
.rms-move-check[data-state="holds"] .rms-move-check-mark { color: var(--c-ok); }
.rms-move-check[data-state="missing"] { background: var(--c-bad-tint); color: var(--c-text); font-weight: var(--t-weight-medium); }
.rms-move-check[data-state="missing"] .rms-move-check-mark { color: var(--c-err); }
.rms-move-check[data-state="waits"] .rms-move-check-mark { color: var(--c-warn); }
.rms-move-nochecks { margin: 0; color: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-move-action .rms-btn { height: var(--g-row-compact); }

/* Who signed: a revision per row, its status, the person, the time. */
.rms-signed-list { display: grid; margin: 0 0 var(--g-space-2); padding: 0; list-style: none; border-top: var(--g-border) solid var(--c-border); }
.rms-signed-row { display: grid; grid-template-columns: var(--g-signed-rev-w) var(--g-col-state) minmax(0, 1fr) max-content; align-items: baseline; gap: var(--g-space-3); padding: var(--g-space-1) 0; border-bottom: var(--g-border) solid var(--c-border); font-size: var(--t-size-sm); }
.rms-signed-rev, .rms-signed-at { color: var(--c-text-muted); font-family: var(--t-mono); font-size: var(--t-size-xs); }
.rms-signed-row[data-cls="controlled"] .rms-signed-who { font-weight: var(--t-weight-semibold); }
.rms-signed-note { margin: 0; color: var(--c-text-muted); font-size: var(--t-size-sm); }

/* --- view_bar.js ---------------------------------------------------------------*/

/* The bar names the open project (its key in mono on sunk), then the system's time switch: a pill that says what the screen shows, its
 * dot verdigris for the current truth and the selection's strong blue for a baseline or a branch (a baseline's commit in mono), which
 * opens the list of every view the project has. In the past the bar itself is the band (layout.css). */
.rms-viewbar { display: flex; align-items: center; gap: var(--g-space-3); flex: 1; min-width: 0; }
.rms-viewbar-fill { flex: 1; }
.rms-viewbar-where { position: relative; display: flex; align-items: center; gap: var(--g-space-2); min-width: 0; }
.rms-viewbar-key { padding: var(--g-pad-chip-y) var(--g-space-2); border-radius: var(--g-radius-sm); background: var(--c-surface); color: var(--c-text);
  font-family: var(--t-mono); font-size: var(--t-size-sm); font-weight: var(--t-weight-semibold); letter-spacing: var(--t-track-mono); }
.rms-viewbar-key:empty { display: none; }
.rms-viewbar-lead { color: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-viewbar-note { color: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-viewbar-note:empty { display: none; }
.rms-viewpick {
  --rms-view-c: var(--c-ok);
  display: inline-flex;
  align-items: center;
  gap: var(--g-space-2);
  min-width: 0;
  height: var(--g-control-h);
  padding: 0 var(--g-space-3);
  border: var(--g-border) solid var(--c-border);
  border-radius: var(--g-radius-pill);
  background: var(--c-surface);
  color: var(--c-text);
  font: inherit;
  font-size: var(--t-size-sm);
  font-weight: var(--t-weight-medium);
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--c-shadow-1);
  transition: border-color var(--g-motion-fast) var(--g-ease), background var(--g-motion-fast) var(--g-ease);
}
.rms-viewpick:hover { border-color: var(--c-hover-frame); }
.rms-viewpick[data-view="baseline"] { --rms-view-c: var(--c-view-baseline); }
.rms-viewpick[data-view="branch"] { --rms-view-c: var(--c-view-branch); }
.rms-viewpick:not([data-view="current"]) { border-color: var(--c-select-strong); }
.rms-viewpick-mark { color: var(--rms-view-c); }
.rms-viewpick-text { overflow: hidden; text-overflow: ellipsis; }
.rms-viewpick-commit { padding: 0 var(--g-space-1); border-radius: var(--g-radius-sm); background: color-mix(in srgb, var(--c-text) var(--c-mix-faint), transparent); color: var(--c-text);
  font-family: var(--t-mono); font-size: var(--t-size-xs); font-weight: var(--t-weight-medium); letter-spacing: var(--t-track-mono); }
.rms-viewpick-chevron { flex: none; width: var(--g-icon-sm); height: var(--g-icon-sm); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rms-viewpick-list {
  position: absolute;
  top: calc(100% + var(--g-space-2));
  left: 0;
  z-index: var(--g-z-menu);
  width: min(var(--g-viewpick-w), var(--g-popover-fit));
  max-height: var(--g-list-max-h);
  overflow: auto;
  padding: var(--g-space-1);
  border: var(--g-border) solid var(--c-border);
  border-radius: var(--g-radius-md);
  background: var(--c-surface);
  box-shadow: var(--c-shadow-pop);
}
/* The latest's validity (decision 3a): a chip beside the selector, its sheet under it. */
.rms-validity { display: inline-flex; align-items: center; gap: var(--g-space-1); padding: var(--g-space-1) var(--g-space-2); border: var(--g-border) solid var(--c-border); border-radius: var(--g-radius-pill); background: none; color: var(--c-text); font: inherit; font-size: var(--t-size-sm); cursor: pointer; }
.rms-validity[data-ok="true"] { border-color: var(--c-ok); color: var(--c-ok); }
.rms-validity[data-ok="false"] { border-color: var(--c-warn); color: var(--c-warn); }
.rms-validity:hover { background: var(--c-hover); }
.rms-validity-sheet { position: absolute; top: calc(100% + var(--g-space-2)); left: 0; z-index: var(--g-z-menu); width: min(var(--g-viewpick-w), var(--g-popover-fit)); padding: var(--g-space-2); border: var(--g-border) solid var(--c-border); border-radius: var(--g-radius-md); background: var(--c-surface); box-shadow: var(--c-shadow-pop); }
.rms-validity-sheet-title { margin: 0 0 var(--g-space-2); font-weight: var(--t-weight-semibold); }
.rms-validity-rules { display: grid; gap: var(--g-space-2); margin: 0 0 var(--g-space-2); padding: 0; list-style: none; font-size: var(--t-size-sm); line-height: var(--t-lh-text); }
.rms-validity-rule { display: grid; grid-template-columns: var(--g-icon-md) minmax(0, 1fr); gap: var(--g-space-1); }
.rms-validity-rule.is-ok .rms-validity-mark { color: var(--c-ok); }
.rms-validity-rule.is-open .rms-validity-mark { color: var(--c-warn); }
.rms-validity-missing { color: var(--c-text-muted); font-family: var(--t-mono); }
.rms-validity-go { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: var(--c-link-line); text-underline-offset: var(--g-underline-offset); }
.rms-validity-go:hover { text-decoration-color: currentColor; }
.rms-viewpick-group + .rms-viewpick-group { margin-top: var(--g-space-2); padding-top: var(--g-space-2); border-top: var(--g-border) solid var(--c-border); }
.rms-viewpick-group-title { margin: 0 0 var(--g-space-1); padding: var(--g-pad-tab-y) var(--g-pad-tab-x) 0; color: var(--c-text-muted); font-family: var(--t-mono); font-size: var(--t-size-tag); font-weight: var(--t-weight-medium); }
.rms-viewpick-option {
  --rms-view-c: var(--c-ok);
  display: grid;
  grid-template-columns: var(--g-icon-md) minmax(0, 1fr);
  align-items: baseline;
  gap: var(--g-space-2);
  width: 100%;
  padding: var(--g-pad-tab-y) var(--g-pad-tab-x);
  border: 0;
  border-radius: var(--g-radius-sm);
  background: none;
  color: var(--c-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.rms-viewpick-option[data-view="baseline"] { --rms-view-c: var(--c-view-baseline); }
.rms-viewpick-option[data-view="branch"] { --rms-view-c: var(--c-view-branch); }
.rms-viewpick-option:hover, .rms-viewpick-option:focus-visible { background: var(--c-selection); color: var(--c-on-select); }
.rms-viewpick-option.is-on { background: var(--c-selection); color: var(--c-on-select); }
.rms-viewpick-option:is(:hover, :focus-visible, .is-on) .rms-viewpick-option-note { color: var(--c-on-select); }
.rms-viewpick-option-main { display: grid; gap: var(--g-hairline); min-width: 0; }
.rms-viewpick-option-name { display: inline-flex; align-items: baseline; gap: var(--g-space-2); font-weight: var(--t-weight-semibold); }
.rms-viewpick-option-note { color: var(--c-text-muted); font-size: var(--t-size-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rms-viewpick-foot { margin-top: var(--g-space-2); padding-top: var(--g-space-2); border-top: var(--g-border) solid var(--c-border); }

/* --- icon.js -------------------------------------------------------------------*/

.rms-icon, .rms-btn-icon { flex: none; width: var(--g-icon-md); height: var(--g-icon-md); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rms-btn-icon-only { justify-content: center; width: var(--g-control-h); padding: 0; }

/* --- form.js -------------------------------------------------------------------*/

.rms-form { display: grid; gap: var(--g-space-4); max-width: var(--g-text-measure); }
.rms-field { display: grid; gap: var(--g-space-1); }
.rms-field-label { color: var(--c-text); font-size: var(--t-size-xs); font-weight: var(--t-weight-medium); line-height: var(--t-lh-base); letter-spacing: var(--g-eyebrow-track); }
.rms-field-req { color: var(--c-text-muted); font-weight: var(--t-weight-regular); font-size: var(--t-size-sm); }
.rms-field-hint { margin: 0; color: var(--c-text-muted); font-size: var(--t-size-sm); }
/* a choice of several (ui/form.js "checks"): a box per option in columns as wide as a name, each name whole on its line */
.rms-field-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--g-grant-role-w), 1fr)); gap: var(--g-space-1) var(--g-space-3); }
.rms-field-check { display: flex; align-items: center; gap: var(--g-space-2); cursor: pointer; }
.rms-field-check-word { white-space: nowrap; }
.rms-field-error { margin: 0; color: var(--c-err); font-size: var(--t-size-sm); }
.rms-form-actions { display: flex; gap: var(--g-space-2); }

/* --- drawer.js: the details of one thing over the work, docked on the frame body's right edge, never beside it; dressed as a dialog
 *     is (modal.js: the sheet's ground, its hairline, its large radius, its shadow and its gutter), its × the icon button --------------*/

.rms-drawer {
  position: absolute;
  top: max(var(--g-space-2), var(--rms-drawer-top, var(--g-space-2)));
  right: var(--g-space-2);
  bottom: var(--g-space-2);
  z-index: var(--g-z-drawer);
  display: flex;
  flex-direction: column;
  width: min(var(--g-inspector-w), calc(100% - 2 * var(--g-space-2)));
  min-height: 0;
  border: var(--g-border) solid var(--c-border);
  border-radius: var(--g-radius-lg);
  background: var(--c-surface);
  box-shadow: var(--c-shadow-pop);
  color: var(--c-text);
}
.rms-drawer-head { display: flex; flex: none; align-items: flex-start; justify-content: space-between; gap: var(--g-space-3); padding: var(--g-space-4) var(--g-space-4) var(--g-space-3) var(--g-space-5); border-bottom: var(--g-border) solid var(--c-border); }
.rms-drawer-title { min-width: 0; overflow-wrap: anywhere; }
.rms-drawer-close { flex: none; }
.rms-drawer-body { display: flex; flex: 1; flex-direction: column; gap: var(--g-space-3); min-height: 0; overflow: auto; overscroll-behavior: contain; padding: var(--g-space-4) var(--g-space-5) var(--g-space-5); }

/* --- tip.js: a hover note above the thing it names (below when there is no room), inside what is in sight, never under the pointer --*/

.rms-tip { position: absolute; left: var(--x); top: var(--y); z-index: var(--g-z-popover); max-width: var(--g-map-tip-w); padding: var(--g-space-1) var(--g-space-2); border: var(--g-border) solid var(--c-border-strong); border-radius: var(--g-radius-sm); background: var(--c-surface); box-shadow: var(--c-shadow-pop); color: var(--c-text); font-size: var(--t-size-sm); overflow-wrap: anywhere; pointer-events: none; }

/* --- measure.js: the hidden SVG that measures a drawing's words as the page draws them ---------------------------------------------*/

svg.rms-measure { position: absolute; top: 0; left: 0; width: 0; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; }
/* the probe's face where the drawing's own class says none: never over it (the 0.73.0 manual: a trace's ids, drawn in the mono face of
 * .rms-graph, were measured in the sans of a stronger probe rule, and the longest ran past its box) */
:where(svg.rms-measure) { font-family: var(--t-sans); }

/* --- role_icon.js: the role marks. The person in the current colour, its badge in its mark's colour (--c-role-<id>); sized to the words
 *     they sit among; a mark adds no words to what holds it, its name is its aria-label and its title ---------------------------------*/

.rms-role-icon { display: inline-flex; flex: none; width: var(--g-role-icon); height: var(--g-role-icon); vertical-align: var(--g-role-icon-drop); }
.rms-role-svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: var(--g-role-stroke); stroke-linecap: round; stroke-linejoin: round; }
.rms-role-badge { stroke: var(--rms-role-c, currentColor); stroke-width: var(--g-role-badge-stroke); }
.rms-role-icon[data-mark="person"] .rms-role-person { stroke: var(--c-role-person); }
.rms-role-icon[data-mark="author"] { --rms-role-c: var(--c-role-author); }
.rms-role-icon[data-mark="reviewer"] { --rms-role-c: var(--c-role-reviewer); }
.rms-role-icon[data-mark="approver"] { --rms-role-c: var(--c-role-approver); }
.rms-role-icon[data-mark="freezer"] { --rms-role-c: var(--c-role-freezer); }
.rms-role-icon[data-mark="admin"] { --rms-role-c: var(--c-role-admin); }
.rms-role-icon[data-mark="owner"] { --rms-role-c: var(--c-role-owner); }
.rms-role-icon[data-mark="customer"] { --rms-role-c: var(--c-role-customer); }
.rms-role-icon[data-mark="supplier"] { --rms-role-c: var(--c-role-supplier); }
.rms-role-icon[data-mark="verifier"] { --rms-role-c: var(--c-role-verifier); }
.rms-role-icon[data-mark="assurance"] { --rms-role-c: var(--c-role-assurance); }
.rms-role-icon[data-mark="safety"] { --rms-role-c: var(--c-role-safety); }
/* on the one dark button the whole mark is the button's ink */
.rms-btn-accent .rms-role-icon, .rms-btn-danger .rms-role-icon { --rms-role-c: currentColor; }
.rms-btn-accent .rms-role-icon[data-mark="person"] .rms-role-person { stroke: currentColor; }

.rms-role-icons { display: inline-flex; flex: none; align-items: center; gap: var(--g-hairline); vertical-align: middle; }
.rms-role-more { color: var(--c-text-muted); font-size: var(--t-size-xs); font-weight: var(--t-weight-medium); }
.rms-role-more::after { content: attr(data-more); }
/* a role as its mark and its name: the chip of every list of roles */
.rms-chip.rms-role-tag { display: inline-flex; align-items: center; gap: var(--g-space-1); padding-left: var(--g-space-1); color: var(--c-text); }
.rms-role-tag .rms-role-icon { --g-role-icon: var(--g-role-icon-tag); }
/* who may take an action, inside its button after the words */
.rms-btn .rms-whomay { margin-left: var(--g-hairline); }
.rms-btn .rms-whomay .rms-role-icon { --g-role-icon: var(--g-role-icon-btn); }
/* beside a person's name */
.rms-person .rms-role-icons, .rms-person-marks { margin-left: var(--g-space-1); }

/* the legend: each mark with its words */
.rms-mark-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--g-mark-legend-col), 100%), 1fr)); gap: var(--g-space-2) var(--g-space-5); margin: 0; padding: 0; list-style: none; color: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-mark-legend-item { display: inline-flex; align-items: center; gap: var(--g-space-2); }
.rms-mark-legend-item b { color: var(--c-text); font-weight: var(--t-weight-semibold); }
.rms-mark-legend-item .rms-role-icon { --g-role-icon: var(--g-role-icon-lg); }

/* who may do what, by role: a column per role under its mark, a dot where it holds a right, a ring where it holds part of it */
.rms-rights-table { width: 100%; border-collapse: collapse; }
.rms-rights-table th, .rms-rights-table td { padding: var(--g-space-1) var(--g-space-2); border-bottom: var(--g-border) solid var(--c-border); text-align: left; vertical-align: middle; }
.rms-rights-table thead th { border-bottom-color: var(--c-border-strong); background: var(--c-elevated); color: var(--c-text-muted); font-size: var(--t-size-sm); font-weight: var(--t-weight-medium); }
.rms-rights-table th.rms-rights-right { position: sticky; left: 0; z-index: 1; background: var(--c-elevated); color: var(--c-text); font-weight: var(--t-weight-medium); white-space: nowrap; }
.rms-rights-table thead th.rms-rights-right { z-index: 3; }
.rms-rights-table th.rms-rights-role { min-width: var(--g-col-flag, auto); text-align: center; vertical-align: bottom; }
.rms-rights-role-head { display: inline-grid; justify-items: center; gap: var(--g-space-1); }
.rms-rights-role-head .rms-role-icon { --g-role-icon: var(--g-role-icon-lg); }
.rms-rights-role-word { font-weight: var(--t-weight-semibold); white-space: normal; }
.rms-rights-mine { padding: 0 var(--g-space-1); border-radius: var(--g-radius-sm); background: var(--c-selection); color: var(--c-on-select); font-size: var(--t-size-xs); font-weight: var(--t-weight-medium); }
.rms-rights-table th.is-mine, .rms-rights-table td.is-mine { background: color-mix(in srgb, var(--c-selection) var(--c-mix-edge), transparent); }
.rms-rights-table td.rms-rights-cell { text-align: center; }
.rms-rights-dot { display: inline-block; width: var(--g-rules-dot); height: var(--g-rules-dot); border-radius: var(--g-round); background: var(--c-text); }
.rms-rights-cell.is-some .rms-rights-dot { background: none; box-shadow: inset 0 0 0 var(--g-border-frame) var(--c-text); }
.rms-rights-you { white-space: nowrap; }
.rms-rights-you.is-yes { color: var(--c-ok); font-weight: var(--t-weight-medium); }
.rms-rights-you.is-no { color: var(--c-text-muted); }
.rms-rights-implicit { margin: var(--g-space-2) 0 0; color: var(--c-text-muted); font-size: var(--t-size-sm); }

/* --- fact_chip.js: a chip that opens a sheet of what it means and the facts behind it ----------------------------------------------*/

.rms-fchip-wrap { position: relative; display: inline-flex; }
.rms-fchip { display: inline-flex; align-items: center; gap: var(--g-space-1); padding: 0 var(--g-space-2); border: var(--g-border) solid var(--c-border); border-radius: var(--g-radius-pill); background: none; color: var(--c-text); font: inherit; font-size: var(--t-size-sm); line-height: var(--t-lh-base); white-space: nowrap; cursor: pointer; }
.rms-fchip:hover { border-color: var(--c-hover-frame); background: var(--c-hover); }
.rms-fchip[aria-expanded="true"] { border-color: var(--c-select-strong); background: var(--c-selection); color: var(--c-on-select); }
.rms-fchip-chevron { color: var(--c-text-muted); font-size: var(--t-size-xs); }
.rms-fchip-sheet { position: absolute; top: calc(100% + var(--g-space-2)); left: 0; z-index: var(--g-z-menu); width: min(var(--g-fchip-w), var(--g-popover-fit)); padding: var(--g-space-3); border: var(--g-border) solid var(--c-border); border-radius: var(--g-radius-md); background: var(--c-surface); box-shadow: var(--c-shadow-pop); color: var(--c-text); font-family: var(--t-sans); font-size: var(--t-size-sm); font-weight: var(--t-weight-regular); line-height: var(--t-lh-text); letter-spacing: normal; white-space: normal; text-align: left; }
.rms-fchip-wrap.is-end .rms-fchip-sheet { right: 0; left: auto; }
.rms-fchip-sheet:focus-visible { outline: var(--g-focus-ring) solid var(--c-focus); }
.rms-fchip-title { margin: 0 0 var(--g-space-1); font-weight: var(--t-weight-semibold); }
.rms-fchip-means { margin: 0 0 var(--g-space-2); color: var(--c-text-muted); }
.rms-fchip-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--g-space-1) var(--g-space-3); margin: 0 0 var(--g-space-2); }
.rms-fchip-facts dt { color: var(--c-text-muted); }
.rms-fchip-facts dd { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-1); margin: 0; min-width: 0; overflow-wrap: anywhere; }
.rms-fchip-list { display: grid; gap: var(--g-space-1); margin: 0 0 var(--g-space-2); padding: 0; list-style: none; }
.rms-fchip-list li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-1); }
.rms-fchip-yes { color: var(--c-ok); }
.rms-fchip-no { color: var(--c-text-muted); }
.rms-fchip-foot { display: flex; flex-wrap: wrap; gap: var(--g-space-2); padding-top: var(--g-space-2); border-top: var(--g-border) solid var(--c-border); }
.rms-fchip-items { display: inline-flex; flex-wrap: wrap; gap: var(--g-space-1); }

/* the view bar's chips, each with its sheet: the moment's facts above its list, the validity's items and fixers, the reader's roles */
.rms-viewpick-facts { margin: 0 0 var(--g-space-1); padding: var(--g-space-2); border-bottom: var(--g-border) solid var(--c-border); }
.rms-viewpick-facts .rms-fchip-foot { border-top: 0; padding-top: 0; }
.rms-validity-body { display: grid; gap: var(--g-space-1); min-width: 0; }
.rms-validity-where { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-1); color: var(--c-text-muted); }
.rms-validity-where .rms-validity-go { color: var(--c-link); }
.rms-you-word { font-weight: var(--t-weight-medium); }
.rms-menu-label .rms-whomay { margin-left: var(--g-space-2); }

/* --- ui/popup.js: the card over the page (the owner, 7 Nov 2026: "smart info popups all around"). Fixed over the window, above or below
 *     its thing (never over it), one at a time; it arrives with a short fade and scale, opacity and transform only, and rests still. It
 *     stands outside the frame (appended to the page's body), so it styles its own links and words. ------------------------------------*/
.rms-pop {
  position: fixed;
  left: var(--x, 0);
  top: var(--y, 0);
  z-index: var(--g-z-menu);
  box-sizing: border-box;
  inline-size: min(var(--g-pop-w), var(--g-popover-fit));
  max-block-size: var(--pop-h, var(--g-pop-max-h));
  overflow: auto;
  padding: var(--g-space-3);
  border: var(--g-border) solid var(--c-border-strong);
  border-radius: var(--g-radius-md);
  background: var(--c-surface);
  box-shadow: var(--c-shadow-pop);
  color: var(--c-text);
  font-family: var(--t-sans);
  font-size: var(--t-size-sm);
  line-height: var(--t-lh-small);
  transform-origin: top left;
}
.rms-pop[data-side="above"] { transform-origin: bottom left; }
.rms-pop[data-state="open"] { animation: rms-pop-in var(--g-motion-fast) var(--g-ease) 1 both; }
@keyframes rms-pop-in { from { opacity: 0; transform: scale(var(--g-pop-from)); } }
.rms-pop a { color: var(--c-link); text-decoration: none; }
.rms-pop a:hover { text-decoration: underline; }
.rms-pop a.rms-btn { color: var(--c-text); text-decoration: none; }
.rms-pop-in { display: grid; gap: var(--g-space-2); min-width: 0; }
.rms-pop-head { display: flex; align-items: center; gap: var(--g-space-2); min-width: 0; }
.rms-pop-head .rms-pop-name { flex: 0 1 auto; min-width: 0; overflow: hidden; font-size: var(--t-size-base); font-weight: var(--t-weight-semibold); text-overflow: ellipsis; white-space: nowrap; }
.rms-pop-head .rms-badge, .rms-pop-chip { flex: none; }
.rms-pop-chip { padding: 0 var(--g-space-2); border-radius: var(--g-radius-pill); background: var(--c-elevated); color: var(--c-text-muted); font-size: var(--t-size-xs); }
.rms-pop-chip[data-tone="ok"] { background: var(--c-ok-tint); color: var(--c-ok); }
.rms-pop-chip[data-tone="warn"] { background: var(--c-warn-tint); color: var(--c-warn); }
.rms-pop-chip[data-tone="bad"] { background: var(--c-bad-tint); color: var(--c-err); }
.rms-pop-sub { margin: 0; color: var(--c-text); font-size: var(--t-size-base); }
.rms-pop-line { margin: 0; }
.rms-pop-line.is-muted, .rms-pop-muted { color: var(--c-text-muted); }
.rms-pop-line.is-ok { color: var(--c-ok); }
.rms-pop-line.is-warn { color: var(--c-warn); }
.rms-pop-label { margin: 0 0 var(--g-space-1); color: var(--c-text-muted); font-size: var(--t-size-xs); font-weight: var(--t-weight-medium); }
.rms-pop-sec.is-warn > .rms-pop-label { color: var(--c-warn); }
.rms-pop-sec.is-ok > .rms-pop-label { color: var(--c-ok); }
.rms-pop-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: calc(var(--g-space-1) / 2) var(--g-space-3); margin: 0; }
.rms-pop-facts dt { color: var(--c-text-muted); }
.rms-pop-facts dd { margin: 0; min-width: 0; }
:is(.rms-pop-people, .rms-pop-moves, .rms-pop-list, .rms-pop-places) { display: grid; gap: calc(var(--g-space-1) / 2); margin: 0; padding: 0; list-style: none; }
:is(.rms-pop-people, .rms-pop-moves, .rms-pop-list, .rms-pop-places) > li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-1) var(--g-space-2); min-width: 0; }
.rms-pop-person { font-weight: var(--t-weight-medium); }
.rms-pop-two { padding: 0 var(--g-space-1); border-radius: var(--g-radius-sm); background: var(--c-warn-tint); color: var(--c-warn); font-size: var(--t-size-xs); }
.rms-pop-counts { display: flex; flex-wrap: wrap; gap: var(--g-space-1); margin: 0; padding: 0; list-style: none; }
.rms-pop-counts > li > :is(a, span) { display: inline-flex; align-items: baseline; gap: var(--g-space-1); padding: calc(var(--g-space-1) / 2) var(--g-space-2); border: var(--g-border) solid var(--c-border);
  border-radius: var(--g-radius-pill); color: var(--c-text); }
.rms-pop-counts > li[data-tone="warn"] > :is(a, span) { border-color: var(--c-warn); }
.rms-pop-counts b { font-family: var(--t-mono); }
.rms-pop-list .rms-pop-name { flex: none; }
.rms-pop-list .rms-pop-muted { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rms-pop-foot { margin: var(--g-space-1) 0 0; color: var(--c-warn); }
.rms-pop-flags { display: flex; flex-wrap: wrap; gap: var(--g-space-1); margin: 0; }
.rms-pop-flag { padding: 0 var(--g-space-2); border-radius: var(--g-radius-pill); background: var(--c-elevated); }
.rms-pop-flag[data-tone="warn"] { background: var(--c-warn-tint); color: var(--c-warn); }
.rms-pop-body { display: grid; gap: var(--g-space-1); padding-top: var(--g-space-2); border-top: var(--g-border) solid var(--c-border); }
.rms-pop-text { display: -webkit-box; margin: 0; overflow: hidden; color: var(--c-text); white-space: pre-line; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; }
.rms-pop-text.is-whole { display: block; overflow: visible; }
.rms-pop-more { justify-self: start; }
.rms-pop-place { min-width: var(--g-col-method); color: var(--c-text-muted); }
.rms-pop-state { font-weight: var(--t-weight-medium); }
.rms-pop-state[data-state="settled"] { color: var(--c-ok); }
.rms-pop-state:is([data-state="suspect"], [data-state="open"]) { color: var(--c-warn); }
.rms-pop-state:is([data-state="failed"], [data-state="missing"]) { color: var(--c-err); }
.rms-pop-acts { display: flex; flex-wrap: wrap; gap: var(--g-space-1); padding-top: var(--g-space-2); border-top: var(--g-border) solid var(--c-border); }

/* --- ui/clusters.js: the trace clusters' field. A molecule per item: the item's card in the middle, its places as a pinwheel around it,
 *     each a card on a right-angled connector, its state in the card's fill and edge (and in words: the legend, the item's card). The grid
 *     takes the width it is given; a group's head stays in sight while its molecules scroll by. Motion on state changes only: a molecule
 *     lifts under the pointer, a selection's ground fades in, the field arrives once. -----------------------------------------------------*/
.rms-tc-field { display: flex; flex-direction: column; gap: var(--g-space-3); min-width: 0; animation: rms-tc-arrive var(--g-motion-base) var(--g-ease) 1 both; }
@keyframes rms-tc-arrive { from { opacity: 0; transform: translateY(var(--g-tc-arrive)); } }
/* a field of a thousand molecules: a group out of sight is not laid out or painted until it scrolls in */
.rms-tc-group { min-width: 0; content-visibility: auto; contain-intrinsic-block-size: auto var(--g-tc-group-h); }
/* a group's head: its name whole (wrapping at its spaces only where the field is narrower than it), its count, bar and share after it on
 * the line, or on the next one where the name leaves no room (8 Nov: the name cut, running over its count) */
.rms-tc-group-head {
  position: sticky;
  top: 0;
  z-index: var(--g-z-sticky);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--g-space-3);
  min-width: 0;
  padding: var(--g-space-2) var(--g-space-1);
  border-bottom: var(--g-border) solid var(--c-border);
  background: var(--c-canvas);
}
.rms-tc-group-name { flex: 0 1 auto; min-width: 0; padding: 0; border: 0; background: none; color: var(--c-text); font: inherit; font-weight: var(--t-weight-semibold);
  text-align: left; }
button.rms-tc-group-name { cursor: pointer; }
button.rms-tc-group-name:hover { color: var(--c-link); }
.rms-tc-group-n { flex: none; color: var(--c-text-muted); font-size: var(--t-size-sm); white-space: nowrap; }
.rms-tc-group-pct { flex: none; color: var(--c-text-muted); font-family: var(--t-mono); font-size: var(--t-size-sm); }
.rms-tc-bar { display: inline-flex; flex: none; inline-size: var(--g-tc-bar-w); block-size: var(--g-meter-h); overflow: hidden; border-radius: var(--g-radius-pill); background: var(--c-border); }
.rms-tc-bar-part { flex: var(--rms-tc-n, 0) 1 0; }
.rms-tc-bar-part[data-part="settled"] { background: var(--c-tc-settled); }
.rms-tc-bar-part[data-part="waiting"] { background: var(--c-tc-suspect-edge); }
.rms-tc-bar-part[data-part="missing"] { background: var(--c-tc-missing-edge); }
.rms-tc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--g-tc-cell), 1fr)); gap: var(--g-space-1); padding: var(--g-space-2) 0; }
.rms-tc {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: var(--g-space-1);
  border-radius: var(--g-radius-md);
  cursor: pointer;
  outline: none;
  transition: transform var(--g-motion-fast) var(--g-ease);
}
.rms-tc::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--c-selection); box-shadow: inset 0 0 0 var(--g-border-strong) var(--c-select-strong);
  opacity: 0; transition: opacity var(--g-motion-fast) var(--g-ease); }
.rms-tc[aria-selected="true"]::after { opacity: 1; }
.rms-tc:hover { transform: translateY(var(--g-tc-rise)) scale(var(--g-tc-lift)); }
.rms-tc:focus-visible { box-shadow: 0 0 0 var(--g-focus-ring) var(--c-focus); }
.rms-tc-svg { display: block; inline-size: 100%; max-inline-size: var(--g-tc-cell-max); block-size: auto; overflow: visible; }
.rms-tc-name { max-inline-size: 100%; overflow: hidden; color: var(--c-text-muted); font-family: var(--t-mono); font-size: var(--t-size-tag); text-overflow: ellipsis; white-space: nowrap; }
.rms-tc[aria-selected="true"] .rms-tc-name { color: var(--c-on-select); }
.rms-tc-centre { fill: var(--c-tc-centre-tint); stroke: var(--c-tc-centre); stroke-width: var(--g-tc-edge-strong); }
.rms-tc-centre:is([data-family="controlled"], [data-family="proven"]) { fill: var(--c-tc-centre); }
.rms-tc-centre[data-family="dead"] { opacity: var(--o-history); }
.rms-tc-crit { fill: var(--c-warn); }
.rms-tc-wire { fill: none; stroke: var(--c-border-strong); stroke-width: var(--g-tc-wire); }
.rms-tc-wire[data-state="settled"] { stroke: var(--c-tc-settled); }
.rms-tc-wire[data-state="open"] { stroke: var(--c-tc-open-edge); }
.rms-tc-wire[data-state="suspect"] { stroke: var(--c-tc-suspect-edge); stroke-dasharray: var(--g-tc-dash); }
.rms-tc-wire[data-state="failed"] { stroke: var(--c-tc-failed-edge); }
.rms-tc-wire[data-state="missing"] { stroke: var(--c-tc-missing-edge); stroke-dasharray: var(--g-tc-dot); }
.rms-tc-card { stroke-width: var(--g-tc-edge); }
.rms-tc-card[data-state="settled"] { fill: var(--c-tc-settled); stroke: var(--c-tc-settled); }
.rms-tc-card[data-state="open"] { fill: var(--c-tc-open); stroke: var(--c-tc-open-edge); }
.rms-tc-card[data-state="suspect"] { fill: var(--c-tc-suspect); stroke: var(--c-tc-suspect-edge); stroke-dasharray: var(--g-tc-dash); stroke-width: var(--g-tc-edge-strong); }
.rms-tc-card[data-state="failed"] { fill: var(--c-tc-failed); stroke: var(--c-tc-failed-edge); stroke-width: var(--g-tc-edge-strong); }
.rms-tc-card[data-state="missing"] { fill: var(--c-tc-missing); stroke: var(--c-tc-missing-edge); }
.rms-tc-mark { fill: var(--c-text); font-family: var(--t-sans); font-size: var(--g-tc-mark); font-weight: var(--t-weight-semibold); pointer-events: none; }
.rms-tc-mark[data-state="settled"] { fill: var(--c-tc-on-settled); }
.rms-tc-mark[data-state="open"] { fill: var(--c-tc-open-edge); }
.rms-tc-mark[data-state="suspect"] { fill: var(--c-tc-suspect-edge); }
.rms-tc-mark[data-state="failed"] { fill: var(--c-tc-failed-edge); }
.rms-tc-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-1) var(--g-space-3); margin: 0; padding: 0; color: var(--c-text-muted); font-size: var(--t-size-sm); list-style: none; }
.rms-tc-legend > li { display: inline-flex; align-items: center; gap: var(--g-space-1); white-space: nowrap; }
.rms-tc-key { inline-size: var(--g-tc-key-w); block-size: auto; }