/* ============================================================================
 * views.css — the screens: pages, toolbars, lists, facts. Tokens only.
 * ==========================================================================*/

/* A screen is the board with its cards (the design system, the block at the end of this sheet): the PageHeader card first, then a card
 * per band, at one margin (--rms-pad, the narrow frame's is layout.css's); an engineering screen uses the width it is given. The items
 * explorer is a working surface: its head a card's ground across the pane, the list and the inspector under it. */
.rms-page, .rms-explorer { --rms-pad: var(--g-page-pad); }
.rms-page { padding: var(--rms-pad); }
.rms-explorer-head {
  position: relative;
  z-index: var(--g-z-sticky);
  margin: 0;
  padding: var(--g-space-5) var(--rms-pad) var(--g-space-4);
  border-bottom: var(--g-border) solid var(--c-border);
  background: var(--c-surface);
}
.rms-page .rms-section:not(.rms-section .rms-section, .rms-artifact .rms-section, .rms-docs .rms-section, .rms-trace-landing .rms-section),
.rms-page > .rms-ov-section > .rms-wide-only > .rms-ov-figure {
  padding: var(--g-space-4) var(--g-space-5) var(--g-space-5);
  border: var(--g-border) solid var(--c-border);
  border-radius: var(--g-sheet-radius);
  background: var(--c-surface);
  box-shadow: var(--c-shadow-1);
}
.rms-page .rms-section:not(.rms-section .rms-section, .rms-artifact .rms-section, .rms-docs .rms-section, .rms-trace-landing .rms-section) { margin-bottom: var(--g-space-5); }

.rms-explorer-head { margin: 0; }
.rms-explorer-head > .rms-head { margin: 0; }
.rms-explorer-head > .rms-head + * { margin-top: var(--g-space-3); }
.rms-loading { color: var(--c-text-muted); }
.rms-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-2); margin: 0 0 var(--g-space-3); }
.rms-toolbar label { display: inline-flex; align-items: center; gap: var(--g-space-1); }
.rms-notice-slot:empty { display: none; }
.rms-notice-slot { margin: 0 0 var(--g-space-3); }
.rms-section { margin: 0 0 var(--g-space-6); }
.rms-section-title { margin: 0 0 var(--g-space-3); padding-bottom: var(--g-space-2); border-bottom: var(--g-border) solid var(--c-border); font-size: var(--t-size-md); font-weight: var(--t-weight-semibold); }
.rms-ov-section { margin-bottom: var(--g-space-5); }
.rms-input-wide { flex: 1 1 var(--g-select-w); }
/* Facts are a ruled record, as a drawing's title block sets its fields: the key muted on the left, the value in ink, a hairline
 * under each pair. */
.rms-facts { display: grid; grid-template-columns: minmax(var(--g-facts-key-w), max-content) minmax(0, 1fr); gap: 0; margin: var(--g-space-4) 0; border-top: var(--g-border) solid var(--c-border); }
.rms-facts dt, .rms-facts dd { padding: var(--g-space-2) 0; border-bottom: var(--g-border) solid var(--c-border); }
.rms-facts dt { color: var(--c-text-muted); }
.rms-artifact.is-compact .rms-facts, .rms-pane-inspector .rms-facts { grid-template-columns: max-content minmax(0, 1fr); }
.rms-facts dd { margin: 0; min-width: 0; padding-left: var(--g-space-4); overflow-wrap: anywhere; }

.rms-project-list, .rms-config-list, .rms-hits, .rms-revision-list, .rms-audit-list, .rms-check-list, .rms-results-list { margin: 0; padding: 0 0 0 var(--g-space-4); }
.rms-project-list, .rms-config-list { list-style: none; padding: 0; }
.rms-project, .rms-config-list li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-2); padding: var(--g-space-2) 0; border-bottom: var(--g-border) solid var(--c-border); }
.rms-project { gap: var(--g-space-2) var(--g-space-4); padding: var(--g-space-3) var(--g-space-2); }
.rms-project:hover { background: var(--c-hover); }
.rms-view a.rms-project-open { display: inline-flex; align-items: baseline; gap: var(--g-space-3); min-width: 0; color: var(--c-text); text-decoration: none; }
.rms-view a.rms-project-open:hover .rms-project-name { text-decoration: underline; }
.rms-project-key { font-family: var(--t-mono); font-weight: var(--t-weight-medium); color: var(--c-text); }
.rms-project-name { font-size: var(--t-size-md); font-weight: var(--t-weight-semibold); }
.rms-project-acts { display: inline-flex; gap: var(--g-space-2); margin-left: auto; }
/* A project's sub-projects under it (commit 30): indented, a line down their left, each a row as its parent is. */
.rms-project-children { flex-basis: 100%; margin: var(--g-space-2) 0 0 var(--g-space-5); padding: 0; border-left: var(--g-border) solid var(--c-border-strong); }
.rms-project-children > .rms-project { padding-left: var(--g-space-3); }
.rms-project-children > .rms-project:last-child { border-bottom: 0; }
.rms-project.is-retired .rms-project-name { color: var(--c-text-muted); }
.rms-project-state { color: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-project-template { color: var(--c-text-muted); font-size: var(--t-size-sm); }

.rms-config-list > li.rms-baseline { flex-wrap: nowrap; }
.rms-config-list > li.rms-baseline:has(> .rms-baseline-files) { flex-wrap: wrap; } /* the files it presented fold out under the row */
.rms-baseline { justify-content: space-between; gap: var(--g-space-2) var(--g-space-4); padding: var(--g-space-3) var(--g-space-2); }
.rms-baseline:hover { background: var(--c-hover); }
.rms-baseline-what { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--g-hairline); min-width: 0; }
.rms-baseline-name { display: inline-flex; align-items: baseline; gap: var(--g-space-2); font-size: var(--t-size-md); font-weight: var(--t-weight-semibold); }
.rms-baseline-state { padding: 0 var(--g-space-1); border: var(--g-border) solid var(--c-border); border-radius: var(--g-radius-sm); color: var(--c-text-muted); font-size: var(--t-size-xs); font-weight: var(--t-weight-regular); }
.rms-baseline-state.is-approved { color: var(--c-text); }
.rms-baseline-state.is-waiting { border-color: color-mix(in srgb, var(--c-warn) var(--c-tint-edge), var(--c-border)); color: var(--c-warn); }
.rms-baseline-who { font-size: var(--t-size-sm); }
.rms-baseline-acts { display: inline-flex; flex: none; flex-wrap: wrap; justify-content: flex-end; gap: var(--g-space-2); }

.rms-person { display: inline; overflow-wrap: anywhere; }
.rms-person-name { font-weight: var(--t-weight-medium); }
.rms-person-id { margin-left: var(--g-space-1); color: var(--c-text-muted); font-size: var(--t-size-sm); }

/* Items: the head band, then the list on the sheet edge to edge and the inspector a sunken panel down the right, flush to the bars. */
.rms-explorer { display: flex; flex-direction: column; min-height: 0; height: 100%; background: var(--c-surface); }
.rms-explorer > .rms-notice-slot { margin: var(--g-space-3) var(--rms-pad) 0; }
.rms-explorer-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0; min-height: 0; flex: 1; }
.rms-explorer-body { --rms-row-pad: var(--rms-pad); } /* a row's inset, which its least width counts (ui/table.js tracksOf) */
.rms-explorer-body .rms-table-row,
.rms-explorer-body .rms-empty,
.rms-explorer-body .rms-refused { padding-inline: var(--rms-pad); }
.rms-explorer-inspector:empty { display: none; }
.rms-find { display: inline-flex; gap: var(--g-space-1); min-width: 0; max-width: 100%; }
.rms-find > .rms-input { min-width: 0; } /* a head's search narrows before its actions run past the edge; they wrap */
/* An item's own page: its head says the identity line, so the panel's is the explorer's only. */
.rms-artifact-page .rms-inspector-head { display: none; }
.rms-artifact-page > .rms-head:first-child { margin-bottom: var(--g-space-2); }
.rms-artifact-page .rms-tabs { padding-inline: 0; }
.rms-artifact-page .rms-tabpanel { padding: var(--g-space-4) 0 0; }
/* The editor's head stays in view while the form scrolls under it: its Save and Propose never leave the screen. Flush with the page's edges
 * as every head (.rms-page > * below sets the inline margins of a page's children to 0: the page's own child is named, so this wins). */
.rms-page > .rms-editor-head, .rms-editor-head { position: sticky; top: 0; z-index: var(--g-z-sticky); margin: calc(-1 * var(--rms-pad)) calc(-1 * var(--rms-pad)) var(--rms-pad); padding: var(--g-space-4) var(--rms-pad); border-bottom: var(--g-border) solid var(--c-border); background: var(--c-canvas); } /* sticky, so opaque: in the canvas's colour, flush as every head */
.rms-editor-head .rms-head { margin: 0; }
/* An action the actor lacks: in its place, greyed, its reason on hover (views/common.js actionButton). */
.rms-why { display: inline-flex; cursor: help; }
/* An action one lacks looks one way whatever its kind (2026-10-31: a primary lacked read filled grey, a plain one dashed): an outline in
 * dashes, the words muted, who holds it on hover (views/common.js actionButton). */
.rms-view .rms-btn.is-lacking { pointer-events: none; border-style: dashed; border-color: var(--c-border-strong); background: none; color: var(--c-text-muted); opacity: 1; }
.rms-menu-btn-chevron { margin-left: var(--g-space-1); color: var(--c-text-muted); font-size: var(--t-size-xs); }
.rms-find-input { width: var(--g-find-w); }
.rms-explorer-inspector { overflow: auto; background: var(--c-elevated); } /* the frame's inspector pane holds it: its width is the pane's */
.rms-artifact-title { margin: 0 0 var(--g-space-3); font-size: var(--t-size-lg); font-weight: var(--t-weight-semibold); line-height: var(--t-lh-tight); }
/* An item's text flows to its record's width, a paragraph per blank line of the author's (core/format.js paragraphsOf), never cut at a
 * fixed measure; its rules below run as wide. */
.rms-artifact-text { line-height: var(--t-lh-text); overflow-wrap: anywhere; }
.rms-artifact-text p { margin: 0 0 var(--g-space-3); }
.rms-revision, .rms-audit-list li, .rms-check-list li, .rms-results-list li { padding: var(--g-space-1) 0; }
.rms-audit-list { list-style: none; padding-left: 0; }
.rms-audit-row { display: grid; grid-template-columns: var(--g-col-when) minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--g-space-3); align-items: baseline; border-bottom: var(--g-border) solid var(--c-border); }

/* ---- The Log (views/audit.js, ui/log_list.js, ui/log_timeline.js): every event a sentence on one row, in its time bucket, beside the
 * timeline; a level in its colour and its word (warnings the warn colour, refusals the refusal colour), never the colour alone ---- */
.rms-log { --rms-log-info: var(--c-text-muted); --rms-log-warn: var(--c-warn); --rms-log-error: var(--c-err); }
.rms-log [data-group="write"] { --rms-log-g: var(--c-cat-spec); }
.rms-log [data-group="move"] { --rms-log-g: var(--c-life-review); }
.rms-log [data-group="link"] { --rms-log-g: var(--c-accent); }
.rms-log [data-group="proof"] { --rms-log-g: var(--c-cat-proof); }
.rms-log [data-group="change"] { --rms-log-g: var(--c-cat-design); }
.rms-log [data-group="baseline"] { --rms-log-g: var(--c-view-baseline); }
.rms-log [data-group="people"] { --rms-log-g: var(--c-cat-customer); }
.rms-log [data-group="rules"], .rms-log [data-group="files"], .rms-log [data-group="exchange"] { --rms-log-g: var(--c-text-muted); }
.rms-log [data-group="refusal"] { --rms-log-g: var(--c-err); }

.rms-log-filters { display: flex; flex-wrap: wrap; align-items: end; gap: var(--g-space-2) var(--g-space-4); margin: 0 0 var(--g-space-4); }
.rms-log-filter { display: flex; flex-direction: column; gap: var(--g-hairline); min-width: 0; }
.rms-log-filter :is(.rms-select, .rms-input) { max-inline-size: var(--g-select-w); }
.rms-log-filter-name { color: var(--c-text-muted); font-size: var(--t-size-xs); font-weight: var(--t-weight-semibold); }
.rms-log-filter-shown { color: var(--c-text-muted); font-size: var(--t-size-sm); padding-bottom: var(--g-space-1); }
.rms-log-main { min-width: 0; }
.rms-log-counted { margin: 0 0 var(--g-space-3); }

.rms-log-bucket { margin-bottom: var(--g-space-3); }
.rms-log-bucket-title { position: sticky; top: 0; z-index: 2; margin: 0; background: var(--c-canvas); font: inherit; }
.rms-log-bucket-head {
  display: flex; align-items: center; gap: var(--g-space-2); width: 100%; padding: var(--g-space-2) var(--g-space-1);
  border: 0; border-bottom: var(--g-border) solid var(--c-border-strong); background: transparent; color: var(--c-text); cursor: pointer; text-align: start;
  font-size: var(--t-size-md); font-weight: var(--t-weight-semibold);
}
.rms-log-bucket-head:hover { background: var(--c-hover); }
.rms-log-bucket-n { padding: 0 var(--g-space-2); border-radius: var(--g-radius-pill); background: var(--c-tint); color: var(--c-text-muted); font-size: var(--t-size-sm); font-variant-numeric: tabular-nums; }
.rms-log-bucket-lvl, .rms-log-lvl-word, .rms-log-tl-date-lvl { padding: 0 var(--g-space-2); border-radius: var(--g-radius-pill); font-size: var(--t-size-xs); font-weight: var(--t-weight-semibold); }
:is(.rms-log-bucket-lvl, .rms-log-lvl-word, .rms-log-tl-date-lvl)[data-level="warn"], .rms-log-lvl[data-level="warn"] .rms-log-lvl-word { background: var(--c-warn-tint); color: var(--c-text); }
:is(.rms-log-bucket-lvl, .rms-log-lvl-word, .rms-log-tl-date-lvl)[data-level="error"], .rms-log-lvl[data-level="error"] .rms-log-lvl-word { background: var(--c-bad-tint); color: var(--c-text); }
.rms-log-chev { display: inline-block; color: var(--c-text-muted); transition: transform var(--g-motion-fast) var(--g-ease); }
:is(.rms-log-bucket-head, .rms-log-open)[aria-expanded="true"] .rms-log-chev { transform: rotate(90deg); }

.rms-log-chunk, .rms-log-rows { margin: 0; padding: 0; list-style: none; }
.rms-log-chunk:not([data-drawn]) { min-block-size: calc(var(--rms-log-n, 1) * var(--g-log-row)); }
.rms-log-chunk[data-drawn] { content-visibility: auto; contain-intrinsic-size: auto calc(var(--rms-log-n, 1) * var(--g-log-row)); }
.rms-log-rows { margin-left: var(--g-space-6); border-left: var(--g-border) solid var(--c-border); }

.rms-log-row, .rms-log-block { position: relative; border-bottom: var(--g-border) solid var(--c-border); }
.rms-log-row[data-level="warn"], .rms-log-block[data-level="warn"] { box-shadow: inset var(--g-space-1) 0 0 var(--rms-log-warn); }
.rms-log-row[data-level="error"], .rms-log-block[data-level="error"] { box-shadow: inset var(--g-space-1) 0 0 var(--rms-log-error); }
.rms-log-row::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: var(--g-border-strong) solid var(--c-focus); border-radius: var(--g-radius-sm);
  opacity: 0; transition: opacity var(--g-motion-base) var(--g-ease); }
.rms-log-row.is-flash::after { opacity: 1; }
/* a row's words use the width and wrap where they must: nothing is cut with an ellipsis (the owner's rule, 8 Nov 2026) */
.rms-log-line { display: flex; align-items: baseline; gap: var(--g-space-2); min-height: var(--g-log-row); padding: var(--g-space-1) var(--g-space-2) var(--g-space-1) var(--g-space-1); cursor: pointer; }
.rms-log-line:hover { background: var(--c-hover); }
.rms-log-open { flex: none; align-self: center; border: 0; padding: 0 var(--g-space-1); background: transparent; cursor: pointer; font: inherit; }
.rms-log-lvl { flex: none; display: inline-flex; align-items: baseline; gap: var(--g-space-1); }
.rms-log-lvl-glyph { color: var(--rms-log-g, var(--rms-log-info)); }
.rms-log-lvl[data-level="warn"] .rms-log-lvl-glyph { color: var(--rms-log-warn); }
.rms-log-lvl[data-level="error"] .rms-log-lvl-glyph { color: var(--rms-log-error); }
.rms-log-at { flex: none; color: var(--c-text-muted); font-family: var(--t-mono); font-size: var(--t-size-sm); }
.rms-log-says { flex: 1 1 auto; display: block; min-width: 0; overflow-wrap: anywhere; }
.rms-log-says .rms-person { display: inline-flex; align-items: baseline; gap: var(--g-space-1); }
.rms-log-says .rms-person-id { display: none; }
.rms-log-who .rms-person-name { font-weight: var(--t-weight-semibold); }
.rms-log-says > .rms-log-item { flex: 0 1 auto; display: inline; min-width: 0; text-decoration: none; }
.rms-log-item-id { flex: none; }
.rms-log-item-id, .rms-log-rev, .rms-log-change, .rms-log-txn { font-family: var(--t-mono); font-size: var(--t-size-sm); }
/* the rows wrap (8 Nov): an id, a change's, a transaction's and a baseline's name stay whole on their line (ui/words.js for the titles) */
.rms-log-item-id, .rms-log-change, .rms-log-txn, .rms-log-name[data-pop] { white-space: nowrap; }
.rms-log-item-title { min-width: 0; margin-left: var(--g-space-1); color: var(--c-text-muted); }
a.rms-log-item:hover .rms-log-item-id, a.rms-log-end:hover .rms-log-item-id { text-decoration: underline; text-underline-offset: var(--g-underline-offset); }
.rms-log-change { flex: none; padding: 0 var(--g-space-2); border-radius: var(--g-radius-pill); background: var(--c-tint); color: var(--c-text); }
.rms-log-name { font-weight: var(--t-weight-medium); }
.rms-log-roles { font-family: var(--t-mono); font-size: var(--t-size-sm); }
.rms-log-words { color: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-log-block-what { font-weight: var(--t-weight-semibold); }
.rms-log-block-n, .rms-log-block-who { margin-left: var(--g-space-3); color: var(--c-text-muted); font-size: var(--t-size-sm); }

.rms-log-detail { margin: 0 var(--g-space-2) var(--g-space-2) var(--g-space-7); padding: var(--g-space-3); border-radius: var(--g-radius-md); background: var(--c-surface); border: var(--g-border) solid var(--c-border); }
.rms-log-detail:not([hidden]) { animation: rms-log-open var(--g-motion-base) var(--g-ease); }
@keyframes rms-log-open { from { opacity: 0; transform: translateY(calc(-1 * var(--g-space-1))); } to { opacity: 1; transform: none; } }
.rms-log-detail-body { display: flex; flex-direction: column; gap: var(--g-space-3); }
.rms-log-facts { display: flex; flex-wrap: wrap; gap: var(--g-space-1) var(--g-space-5); margin: 0; }
.rms-log-fact { display: inline-flex; align-items: baseline; gap: var(--g-space-2); }
.rms-log-fact-k { color: var(--c-text-muted); font-size: var(--t-size-xs); font-weight: var(--t-weight-semibold); }
.rms-log-copy { padding: 0 var(--g-space-1); min-height: 0; }
.rms-log-note { margin: 0; padding-left: var(--g-space-3); border-left: var(--g-border-strong) solid var(--c-border-strong); color: var(--c-text); white-space: pre-line; }
.rms-log-what { display: flex; flex-direction: column; gap: var(--g-space-3); }
.rms-log-what-title { margin: 0 0 var(--g-space-1); font-size: var(--t-size-sm); font-weight: var(--t-weight-semibold); color: var(--c-text-muted); }
.rms-log-links, .rms-log-after { margin: 0; padding-left: var(--g-space-5); }
.rms-log-after li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--g-space-2); }
.rms-log-ends { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-3); }
.rms-log-ends .rms-log-what-title { flex-basis: 100%; }
.rms-log-end { display: inline-flex; align-items: baseline; gap: 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-elevated); color: var(--c-text); text-decoration: none; }
.rms-log-end-kind { color: var(--c-text-muted); font-size: var(--t-size-xs); }
.rms-log-arrow { color: var(--c-text-muted); }

/* the timeline: a vertical axis, the newest day at the top; each day its 24 hours, every hour's events of one kind one mark */
.rms-log-side { max-block-size: var(--g-log-tl-h); overflow: hidden auto; border-right: var(--g-border) solid var(--c-border); padding-right: var(--g-space-3); }
.rms-log-tl { font-size: var(--t-size-sm); }
.rms-log-tl-now, .rms-log-tl-then { margin: 0; padding-left: var(--g-space-5); color: var(--c-text-muted); font-size: var(--t-size-xs); font-weight: var(--t-weight-semibold); text-transform: uppercase; letter-spacing: var(--t-track-title); }
.rms-log-tl-hours { position: sticky; top: 0; z-index: 1; padding: var(--g-space-1) 0 var(--g-space-1) var(--g-space-5); background: var(--c-canvas); }
.rms-log-tl-hours-gap { display: none; }
.rms-log-tl-hours-strip { position: relative; display: block; inline-size: var(--g-log-tl-strip); block-size: var(--t-size-md); color: var(--c-text-muted); font-family: var(--t-mono); font-size: var(--t-size-xs); }
.rms-log-tl-hour { position: absolute; inset-inline-start: calc(var(--h) * 100% / 24); }
.rms-log-tl-days { position: relative; margin: 0; padding: 0 0 0 var(--g-space-5); }
.rms-log-tl-chunk { margin: 0; padding: 0; list-style: none; }
.rms-log-tl-chunk:not([data-drawn]) { min-block-size: calc(var(--rms-log-n, 1) * var(--g-log-tl-day)); }
.rms-log-tl-days::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--g-space-2); border-left: var(--g-border-strong) solid var(--c-border-strong); }
.rms-log-tl-day { position: relative; display: flex; flex-direction: column; gap: var(--g-hairline); padding: var(--g-space-1) var(--g-space-1) var(--g-space-2) 0; border-radius: var(--g-radius-sm); }
.rms-log-tl-day::before { content: ""; position: absolute; left: calc(var(--g-space-2) - var(--g-space-5) - var(--g-space-1) + var(--g-border-strong) / 2); top: calc(var(--g-space-1) + var(--g-space-2));
  width: var(--g-space-2); height: var(--g-space-2); border-radius: var(--g-radius-pill); background: var(--c-canvas); border: var(--g-border-strong) solid var(--c-border-strong); }
.rms-log-tl-day.is-here { background: var(--c-selection); }
.rms-log-tl-day.is-here::before { background: var(--c-focus); border-color: var(--c-focus); }
.rms-log-tl-date { display: flex; align-items: baseline; gap: var(--g-space-2); min-width: 0; border: 0; padding: 0 var(--g-space-1); background: transparent; color: var(--c-text); cursor: pointer; text-align: start; font: inherit; white-space: nowrap; }
.rms-log-tl-date:hover .rms-log-tl-date-name { text-decoration: underline; text-underline-offset: var(--g-underline-offset); }
.rms-log-tl-date-name { white-space: nowrap; font-weight: var(--t-weight-semibold); }
.rms-log-tl-date-n { color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.rms-log-tl-strip {
  position: relative; flex: none; inline-size: var(--g-log-tl-strip); block-size: calc(var(--rows, 1) * var(--g-log-tl-mark) * 1.75 + var(--g-space-2));
  border-radius: var(--g-radius-sm); background: linear-gradient(to right, var(--c-border) var(--g-hairline), transparent var(--g-hairline)) 0 0 / calc(100% / 4) 100%, var(--c-surface);
}
.rms-log-tl-mark, .rms-log-tl-key {
  display: inline-block; inline-size: var(--g-log-tl-mark); block-size: var(--g-log-tl-mark); padding: 0; border: var(--g-border-strong) solid var(--rms-log-g, var(--c-text-muted));
  background: var(--rms-log-g, var(--c-text-muted)); border-radius: var(--g-radius-pill);
}
.rms-log-tl-mark { position: absolute; inset-inline-start: calc((var(--h) + 0.5) * 100% / 24 - var(--g-log-tl-mark) / 2); top: calc(var(--k) * var(--g-log-tl-mark) * 1.75 + var(--g-space-1));
  transform: scale(var(--s, 1)); transition: transform var(--g-motion-fast) var(--g-ease); cursor: pointer; }
.rms-log-tl-mark:hover, .rms-log-tl-mark:focus-visible { transform: scale(calc(var(--s, 1) * 1.6)); z-index: 1; }
:is(.rms-log-tl-mark, .rms-log-tl-key)[data-group="move"], :is(.rms-log-tl-mark, .rms-log-tl-key)[data-group="baseline"] { border-radius: var(--g-hairline); rotate: 45deg; }
:is(.rms-log-tl-mark, .rms-log-tl-key)[data-group="link"], :is(.rms-log-tl-mark, .rms-log-tl-key)[data-group="files"] { border-radius: var(--g-hairline); }
:is(.rms-log-tl-mark, .rms-log-tl-key)[data-group="proof"], :is(.rms-log-tl-mark, .rms-log-tl-key)[data-group="exchange"] { border: 0; border-radius: 0; clip-path: var(--g-log-tri); }
:is(.rms-log-tl-mark, .rms-log-tl-key)[data-group="change"] { border: 0; border-radius: 0; clip-path: var(--g-log-hex); }
:is(.rms-log-tl-mark, .rms-log-tl-key):is([data-group="baseline"], [data-group="people"], [data-group="rules"]) { background: var(--c-surface); }
.rms-log-tl-mark[data-level="warn"], .rms-log-tl-key[data-level="warn"] { --rms-log-g: var(--rms-log-warn); box-shadow: 0 0 0 var(--g-border) var(--c-surface), 0 0 0 var(--g-border-strong) var(--rms-log-warn); }
.rms-log-tl-mark[data-level="error"], .rms-log-tl-key[data-level="error"] { --rms-log-g: var(--rms-log-error); border-radius: 0; rotate: none; clip-path: none; box-shadow: 0 0 0 var(--g-border) var(--c-surface), 0 0 0 var(--g-border-strong) var(--rms-log-error); }
.rms-log-tl-gap { padding: var(--g-space-1) var(--g-space-1); color: var(--c-text-muted); font-size: var(--t-size-xs); font-style: italic; }
.rms-log-tl-empty { padding: var(--g-space-3) 0; color: var(--c-text-muted); }
.rms-log-tl-legend { contain: inline-size; display: flex; flex-wrap: wrap; gap: var(--g-space-1) var(--g-space-3); margin: var(--g-space-3) 0 0; padding: var(--g-space-2) 0 0 var(--g-space-5); border-top: var(--g-border) solid var(--c-border); list-style: none; color: var(--c-text-muted); font-size: var(--t-size-xs); }
.rms-log-tl-legend li { display: inline-flex; align-items: center; gap: var(--g-space-2); white-space: nowrap; }
.rms-log-tl-key { inline-size: var(--g-space-2); block-size: var(--g-space-2); border-width: var(--g-border); flex: none; }
.rms-log-tl-key[data-level] { box-shadow: 0 0 0 var(--g-hairline) var(--c-surface), 0 0 0 var(--g-border-strong) var(--rms-log-g); }
/* the Log in the Activity (views/audit.js createLogPart): its filters, then its count and the folds at the end of the same bar */
.rms-log-bar { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--g-space-2) var(--g-space-4); }
.rms-log-bar > .rms-log-filters { margin: 0; }
.rms-log-bar-end { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-2); }
.rms-log-count { margin: 0; color: var(--c-text-muted); font-size: var(--t-size-sm); }

/* the milestones as anchors on the axis's strips: their kind's shape, ringed, in their kind's colour (core/activity.js KINDS) */
.rms-log [data-kind="baseline"] { --rms-act-k: var(--c-view-baseline); }
.rms-log [data-kind="review"] { --rms-act-k: var(--c-life-review); }
.rms-log [data-kind="change"] { --rms-act-k: var(--c-cat-design); }
.rms-log [data-kind="proposal"] { --rms-act-k: var(--c-cat-customer); }
.rms-log [data-kind="rules"] { --rms-act-k: var(--c-cat-spec); }
.rms-log [data-kind="branch"] { --rms-act-k: var(--c-view-branch); }
:is(.rms-log-tl-mark, .rms-log-tl-key).is-anchor { --rms-log-g: var(--rms-act-k, var(--c-text)); background: var(--rms-act-k, var(--c-text)); border-color: var(--c-surface);
  box-shadow: 0 0 0 var(--g-border) var(--rms-act-k, var(--c-text)); }
:is(.rms-log-tl-mark, .rms-log-tl-key).is-anchor:is([data-kind="baseline"], [data-mark="diamond"]) { border-radius: var(--g-hairline); rotate: 45deg; }
:is(.rms-log-tl-mark, .rms-log-tl-key).is-anchor[data-kind="change"] { border-radius: var(--g-hairline); }
:is(.rms-log-tl-mark, .rms-log-tl-key).is-anchor[data-kind="proposal"] { border: 0; box-shadow: none; border-radius: 0; clip-path: var(--g-log-tri); }
:is(.rms-log-tl-mark, .rms-log-tl-key).is-anchor[data-kind="rules"] { border: 0; box-shadow: none; border-radius: 0; clip-path: var(--g-log-hex); }
:is(.rms-log-tl-mark, .rms-log-tl-key).is-anchor[data-kind="branch"] { border-radius: var(--g-hairline) var(--g-radius-pill) var(--g-radius-pill) var(--g-hairline); }

/* ---- the Activity (views/activity.js): where the project stands, the toggle and the kinds, the axis beside the milestones or the Log ---- */
.rms-activity { display: flex; flex-direction: column; gap: var(--g-space-4);
  --rms-stick: calc(var(--rms-tabs-h, var(--g-zero)) + var(--rms-act-bar-h, var(--g-zero))); } /* the sticky stack above the rows: the tabs and the bar */
.rms-act-status { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--g-act-st-min), 1fr)); gap: var(--g-space-2); margin: 0; padding: 0; list-style: none; }
.rms-act-st-in { display: flex; flex-direction: column; gap: var(--g-hairline); height: 100%; padding: var(--g-space-2) 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); text-decoration: none; transition: border-color var(--g-motion-fast) var(--g-ease); }
.rms-view a.rms-act-st-in { color: var(--c-text); text-decoration: none; } /* a figure is a block: the link rule's underline is not its */
.rms-view a.rms-act-st-in:hover, .rms-view a.rms-act-st-in:focus-visible { border-color: var(--c-focus); }
.rms-view a.rms-act-st-in:hover .rms-act-st-value { text-decoration: underline; text-underline-offset: var(--g-underline-offset); }
.rms-act-st[data-tone="warn"] .rms-act-st-in { box-shadow: inset var(--g-space-1) 0 0 var(--c-warn); }
.rms-act-st[data-tone="ok"] .rms-act-st-in { box-shadow: inset var(--g-space-1) 0 0 var(--c-ok); }
.rms-act-st-label { color: var(--c-text-muted); font-size: var(--t-size-xs); font-weight: var(--t-weight-semibold); }
.rms-act-st-value { font-size: var(--t-size-lg); font-weight: var(--t-weight-semibold); line-height: var(--t-lh-tight); }
.rms-act-st-sub { color: var(--c-text-muted); font-size: var(--t-size-sm); }

/* the bar sticks under the home's tabs, opaque, the next of the stack: the toggle and what it filters stay in reach, nothing shows between */
.rms-act-bar { position: sticky; top: var(--rms-tabs-h, var(--g-zero)); z-index: var(--g-z-stack); display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--g-space-2) var(--g-space-4); padding-block: var(--g-space-2); background: var(--c-canvas); }
/* what sticks under the bar (the axis beside the rows, a day's head, a bucket's head): under the whole stack, the axis as tall as what it leaves */
.rms-activity > .rms-split > .rms-side.is-sticky, .rms-activity .rms-act-dayhead, .rms-activity .rms-log-bucket-title { top: var(--rms-stick); }
.rms-activity .rms-log-side { max-block-size: calc(var(--g-log-tl-h) - var(--rms-stick)); }
.rms-act-bar > .rms-log-bar { flex: 1 1 auto; }
.rms-act-controls { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--g-space-2) var(--g-space-4); }
.rms-act-chips { display: flex; flex-wrap: wrap; gap: var(--g-space-2); }
.rms-act-chip { display: inline-flex; align-items: center; gap: 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-pill); background: transparent; color: var(--c-text-muted); cursor: pointer; font: inherit; font-size: var(--t-size-sm);
  transition: background-color var(--g-motion-fast) var(--g-ease), color var(--g-motion-fast) var(--g-ease); }
.rms-act-chip:hover { background: var(--c-hover); }
.rms-act-chip.is-on { border-color: var(--c-border-strong); background: var(--c-surface); color: var(--c-text); }
.rms-act-chip:not(.is-on) .rms-act-mark { opacity: 0.35; }
.rms-act-chip-n { font-variant-numeric: tabular-nums; font-weight: var(--t-weight-semibold); }
.rms-act-picked { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-2) var(--g-space-3); font-size: var(--t-size-sm); }
.rms-act-picked-n { font-weight: var(--t-weight-semibold); }
.rms-act-main { min-width: 0; }

/* a kind's mark: its shape and its colour, the colour never alone (the chip and the row say its kind in words) */
.rms-act-mark { display: inline-block; flex: none; inline-size: var(--g-act-mark); block-size: var(--g-act-mark); border: var(--g-border-strong) solid var(--rms-act-k, var(--c-text-muted));
  border-radius: var(--g-radius-pill); background: var(--rms-act-k, var(--c-text-muted)); }
.rms-act-mark[data-mark="diamond"] { border-radius: var(--g-hairline); transform: rotate(45deg) scale(0.85); }
.rms-act-mark[data-mark="square"] { border-radius: var(--g-hairline); }
.rms-act-mark[data-mark="triangle"] { border: 0; border-radius: 0; clip-path: var(--g-log-tri); }
.rms-act-mark[data-mark="hexagon"] { border: 0; border-radius: 0; clip-path: var(--g-log-hex); }
.rms-act-mark[data-mark="fork"] { border-radius: var(--g-hairline) var(--g-radius-pill) var(--g-radius-pill) var(--g-hairline); }
/* what still waits is hollow: a baseline frozen and not approved, a proposal or a version of the rules not decided, a moment that began it */
.rms-act-mark:is([data-state="awaiting"], [data-state="open"], [data-state="proposed"], [data-state="frozen"], [data-state="opened"]):not([data-mark="triangle"]):not([data-mark="hexagon"]) { background: var(--c-surface); }

/* the milestones on the axis (ui/activity_line.js on ui/day_axis.js): a line down the axis's column, a day its dot and its name on it,
 * each moment a row: its time left of the line, its mark on it, its words to the right using the width and wrapping where they must */
.rms-act-line-box { --rms-act-rule: calc(var(--g-act-at) + var(--g-space-2) + var(--g-act-axis) / 2); position: relative; }
.rms-act-days { position: relative; }
.rms-act-days::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--rms-act-rule); border-left: var(--g-border-strong) solid var(--c-border-strong); }
.rms-act-chunk, .rms-act-rows { margin: 0; padding: 0; list-style: none; }
.rms-act-chunk:not([data-drawn]) { min-block-size: calc(var(--rms-log-n, 1) * var(--g-act-day)); }
.rms-act-day { position: relative; padding-bottom: var(--g-space-3); }
.rms-act-dayhead { position: sticky; top: 0; z-index: var(--g-z-sticky); display: flex; align-items: baseline; gap: var(--g-space-3);
  padding: var(--g-space-2) 0 var(--g-space-2) calc(var(--rms-act-rule) + var(--g-space-5)); background: var(--c-canvas); }
.rms-act-dayhead::before { content: ""; position: absolute; left: calc(var(--rms-act-rule) - var(--g-space-2) + var(--g-border-strong) / 2); top: calc(var(--g-space-2) + var(--g-space-1));
  inline-size: var(--g-space-4); block-size: var(--g-space-4); border-radius: var(--g-radius-pill); background: var(--c-canvas); border: var(--g-border-strong) solid var(--c-border-strong); }
.rms-act-day.is-here > .rms-act-dayhead::before { background: var(--c-focus); border-color: var(--c-focus); }
.rms-act-date { font-size: var(--t-size-md); font-weight: var(--t-weight-semibold); }
.rms-act-date-n { color: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-act-gap { position: relative; padding: var(--g-space-2) 0 var(--g-space-2) calc(var(--rms-act-rule) + var(--g-space-5)); color: var(--c-text-muted); font-size: var(--t-size-sm); font-style: italic; }
.rms-act-gap::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--rms-act-rule) - var(--g-space-1)); inline-size: var(--g-space-2);
  background: var(--c-canvas); border-block: var(--g-border) dashed var(--c-border-strong); }
.rms-act-empty { margin: 0; padding: var(--g-space-4) 0 var(--g-space-4) calc(var(--rms-act-rule) + var(--g-space-5)); color: var(--c-text-muted); }

.rms-act-row { position: relative; border-radius: var(--g-radius-md); outline: none; }
.rms-act-row::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--g-radius-md); background: var(--c-selection); opacity: 0;
  transition: opacity var(--g-motion-fast) var(--g-ease); }
.rms-act-row.is-picked::before { opacity: 1; }
.rms-act-row::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: var(--g-border-strong) solid var(--c-focus); border-radius: var(--g-radius-md);
  opacity: 0; transition: opacity var(--g-motion-base) var(--g-ease); }
.rms-act-row:focus-visible::after, .rms-act-row.is-flash::after { opacity: 1; }
.rms-act-line { display: grid; grid-template-columns: var(--g-act-at) var(--g-act-axis) minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--g-space-2);
  padding: var(--g-space-2) var(--g-space-2) var(--g-space-1) 0; cursor: pointer; }
.rms-act-row:hover > .rms-act-line { background: var(--c-hover); border-radius: var(--g-radius-md); }
.rms-act-at { justify-self: end; color: var(--c-text-muted); font-family: var(--t-mono); font-size: var(--t-size-sm); }
.rms-act-line > .rms-act-mark { justify-self: center; align-self: center; position: relative; z-index: 1; box-shadow: 0 0 0 var(--g-space-1) var(--c-canvas); }
.rms-act-says { min-width: 0; line-height: var(--t-lh-text); overflow-wrap: anywhere; }
.rms-act-kind { color: var(--c-text-muted); font-size: var(--t-size-sm); font-weight: var(--t-weight-semibold); }
.rms-act-name { font-family: var(--t-mono); font-size: var(--t-size-sm); font-weight: var(--t-weight-semibold); white-space: nowrap; }
.rms-act-name[data-pop] { text-decoration: underline dotted; text-underline-offset: var(--g-underline-offset); cursor: help; }
.rms-act-title { color: var(--c-text-muted); }
.rms-act-words { color: var(--c-text); }
.rms-act-state { display: inline-block; padding: 0 var(--g-space-2); border-radius: var(--g-radius-pill); background: var(--c-tint); color: var(--c-text); font-size: var(--t-size-xs);
  font-weight: var(--t-weight-semibold); white-space: nowrap; }
.rms-act-state[data-tone="ok"] { background: var(--c-ok-tint); }
.rms-act-state[data-tone="warn"] { background: var(--c-warn-tint); }
.rms-act-open { align-self: center; border: 0; padding: 0 var(--g-space-1); background: transparent; color: var(--c-text-muted); cursor: pointer; font: inherit; }
.rms-act-chev { display: inline-block; transition: transform var(--g-motion-fast) var(--g-ease); }
.rms-act-open[aria-expanded="true"] .rms-act-chev { transform: rotate(90deg); }
.rms-act-facts { display: flex; flex-wrap: wrap; gap: var(--g-hairline) var(--g-space-4); margin: 0; padding: 0 var(--g-space-2) var(--g-space-2) calc(var(--g-act-at) + var(--g-act-axis) + 2 * var(--g-space-2));
  color: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-act-detail { margin: 0 var(--g-space-2) var(--g-space-3) calc(var(--g-act-at) + var(--g-act-axis) + 2 * var(--g-space-2)); padding: var(--g-space-3);
  border: var(--g-border) solid var(--c-border); border-radius: var(--g-radius-md); background: var(--c-surface); cursor: auto; }
.rms-act-detail:not([hidden]) { animation: rms-log-open var(--g-motion-base) var(--g-ease); }
.rms-act-detail.is-folding { animation: rms-act-fold var(--g-motion-fast) var(--g-ease) forwards; }
@keyframes rms-act-fold { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(calc(-1 * var(--g-space-1))); } }
.rms-act-what { display: flex; flex-direction: column; gap: var(--g-space-3); }
/* what changed, in columns over the sheet's width: added, changed, removed, the links; each list flowing inside its column */
.rms-act-parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--g-act-part-min), 1fr)); gap: var(--g-space-3) var(--g-space-5); }
.rms-act-part-title { margin: 0 0 var(--g-space-1); color: var(--c-text-muted); font-size: var(--t-size-sm); font-weight: var(--t-weight-semibold); }
.rms-act-part-lede { margin: 0; }
.rms-act-list { display: flex; flex-wrap: wrap; gap: var(--g-space-1) var(--g-space-4); margin: 0; padding: 0; list-style: none; }
.rms-act-list > li { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--g-space-1); }
.rms-act-item { font-family: var(--t-mono); font-size: var(--t-size-sm); }
.rms-act-reason { color: var(--c-text-muted); }
.rms-act-warn { color: var(--c-text); background: var(--c-warn-tint); padding: 0 var(--g-space-1); border-radius: var(--g-radius-sm); font-size: var(--t-size-xs); }
.rms-act-way { font-family: var(--t-mono); font-weight: var(--t-weight-semibold); }
.rms-act-way[data-way="loosens"] { color: var(--c-warn); }
.rms-act-acts { display: flex; flex-wrap: wrap; gap: var(--g-space-2); }
.rms-revision-diff { margin-top: var(--g-space-3); }

.rms-graph-box { min-width: 0; } /* the trace in its window (ui/zoom_pan.js): fitted, zoomed and moved inside it, never wider than the page */

.rms-simple-table { width: 100%; border-collapse: collapse; }
.rms-simple-table th, .rms-simple-table td { text-align: left; padding: var(--g-space-1) var(--g-space-2); border-bottom: var(--g-border) solid var(--c-border); vertical-align: top; }
.rms-home-tabs { position: sticky; top: 0; z-index: var(--g-z-stack-top); background: var(--c-canvas); } /* its strip stays on top of a long tab, the first of the sticky stack (views/home.js --rms-tabs-h) */
.rms-simple-table th { border-bottom-color: var(--c-border-strong); background: var(--c-elevated); color: var(--c-text-muted); font-weight: var(--t-weight-medium); font-size: var(--t-size-sm); }
.rms-cell-id, .rms-cell-id a { font-family: var(--t-mono); }
.rms-cell-muted { color: var(--c-text-muted); }
.rms-import-columns { display: flex; flex-wrap: wrap; gap: var(--g-space-2); margin: var(--g-space-2) 0; }
.rms-import-mapping { display: grid; gap: var(--g-space-2); margin: var(--g-space-2) 0; }
.rms-import-issue td { color: var(--c-warn); }
.rms-import-counts { font-weight: var(--t-weight-semibold); }

/* --- the visitor's page: the whole window (brand.public), its own header, the words and the way in ------------------------*/
.rms-about {
  min-height: var(--g-window-h);
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--c-bg);
  color: var(--c-text);
}
.rms-about-head,
.rms-about-main,
.rms-about-foot { width: 100%; max-width: var(--g-about-max); margin: 0 auto; padding-left: var(--g-about-pad-x); padding-right: var(--g-about-pad-x); box-sizing: border-box; }
.rms-about-head { display: flex; align-items: center; justify-content: space-between; gap: var(--g-space-3); padding-top: var(--g-space-4); padding-bottom: var(--g-space-4); }
.rms-about-brand { display: inline-flex; align-items: center; gap: var(--g-space-2); font-weight: var(--t-weight-semibold); font-size: var(--t-size-lg); }
.rms-about-mark { width: var(--g-mark); height: var(--g-mark); fill: none; stroke: var(--c-text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rms-about-main { padding-top: var(--g-about-pad-y); padding-bottom: var(--g-about-pad-y); }
.rms-about-actions { margin: var(--g-space-5) 0 var(--g-space-7); }
.rms-about-go { height: calc(var(--g-control-h) * 1.25); padding: 0 var(--g-space-5); font-size: var(--t-size-md); }
.rms-about-std { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: var(--t-lh-tight); }
.rms-about-std-domain { font-size: var(--t-size-xs); color: var(--c-text-muted); }
.rms-about-std-name { font-weight: var(--t-weight-semibold); }
.rms-about-v { display: grid; gap: var(--g-space-4); }
.rms-about-v .rms-std-vee { margin: 0; overflow-x: auto; }
.rms-about-v .rms-vee-svg { width: auto; max-width: 100%; min-width: var(--g-about-v-min); height: auto; }
.rms-vee-level.is-bottom rect { stroke: var(--c-text-muted); stroke-dasharray: 4 3; }
.rms-about-foot { padding-top: var(--g-space-4); padding-bottom: var(--g-space-5); color: var(--c-text-muted); font-size: var(--t-size-sm); }

/* The visitor's page, 2026-11-01 (views/about.js): the kyr landing's grammar in rms's palette: the host line, the mark big, a typed line,
 * four promises in brackets, "##" section heads with a rule to the edge, the programme as a tree with guides, a frozen sheet, a ledger. */
.rms-about2 .rms-about-hero { display: grid; gap: var(--g-space-2); padding-bottom: var(--g-space-5); }
.rms-about-host { display: flex; align-items: center; gap: var(--g-space-2); margin: 0; color: var(--c-text-muted); font-family: var(--t-mono); font-size: var(--t-size-xs); letter-spacing: var(--t-track-mono); }
.rms-about-host i { width: var(--g-space-2); height: var(--g-space-2); border-radius: var(--g-radius-pill); background: var(--c-ok); }
.rms-about-big { display: flex; align-items: center; gap: var(--g-space-3); margin: var(--g-space-2) 0 0; color: var(--c-accent); font-family: var(--t-mono); font-size: var(--t-size-hero); font-weight: var(--t-weight-semibold); line-height: 1; }
.rms-about-big-mark { width: var(--g-about-mark-big); height: var(--g-about-mark-big); fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.rms-about-tagline { margin: 0; color: var(--c-text-muted); font-size: var(--t-size-lg); letter-spacing: var(--t-track-mono); }
.rms-about-typed { margin: var(--g-space-2) 0 0; font-family: var(--t-mono); font-size: var(--t-size-lg); }
.rms-about-typed b { margin-right: var(--g-space-2); color: var(--c-accent); }
.rms-about-caret { display: inline-block; width: var(--g-space-2); height: var(--t-size-lg); margin-left: var(--g-space-1); vertical-align: text-bottom; background: var(--c-accent); animation: rms-caret calc(var(--g-motion-base) * 6) steps(2, jump-none) 8 alternate; }
@keyframes rms-caret { from { opacity: 1; } to { opacity: 0; } }
.rms-about-creed { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--g-about-point-min), 100%), 1fr)); gap: var(--g-space-2) var(--g-space-5); margin: var(--g-space-5) 0 0; padding: 0; list-style: none; }
.rms-about-creed li { display: grid; gap: var(--g-space-1); }
.rms-about-creed b { font-family: var(--t-mono); letter-spacing: var(--t-track-mono); }
.rms-about-creed b::before { content: "[ "; color: var(--c-ok); }
.rms-about-creed b::after { content: " ]"; color: var(--c-ok); }
.rms-about-creed span { color: var(--c-text-muted); font-size: var(--t-size-sm); line-height: var(--t-lh-text); }
.rms-about-actions { margin: var(--g-space-5) 0 0; }
.rms-about-go { height: calc(var(--g-control-h) * 1.25); padding: 0 var(--g-space-5); font-size: var(--t-size-md); }
.rms-about-sec { margin: var(--g-space-7) 0 0; }
.rms-about-sec-title { display: flex; align-items: center; gap: var(--g-space-3); margin: 0 0 var(--g-space-3); font-family: var(--t-mono); font-size: var(--t-size-lg); font-weight: var(--t-weight-semibold); }
.rms-about-sec-title::before { content: "##"; color: var(--c-ok); }
.rms-about-sec-title::after { content: ""; flex: 1; border-top: var(--g-border) solid var(--c-border); }
.rms-about-sub { margin: 0 0 var(--g-space-4); max-width: var(--g-about-measure); color: var(--c-text-muted); }
.rms-about-prose { margin: 0 0 var(--g-space-3); max-width: var(--g-about-measure); line-height: var(--t-lh-text); }
.rms-about-prose.is-lead { font-size: var(--t-size-lg); }
.rms-about-prose.is-quiet { color: var(--c-text-muted); }
.rms-about-tree { display: grid; margin-bottom: var(--g-space-3); }
.rms-about-node { --depth: 0; display: grid; grid-template-columns: calc(var(--g-space-6) * var(--depth)) var(--g-space-6) var(--g-about-node-w) minmax(0, 1fr) auto; gap: var(--g-space-1) var(--g-space-3); align-items: baseline; padding: var(--g-space-3) var(--g-space-2); border-radius: var(--g-radius-sm); transition: background var(--g-motion-fast) ease; }
.rms-about-node[data-depth="1"] { --depth: 1; }
.rms-about-node[data-depth="2"] { --depth: 2; }
.rms-about-node.is-root { margin-bottom: var(--g-space-1); border: var(--g-border) solid var(--c-border); border-left: var(--g-tone-bar) solid var(--c-ok); background: var(--c-surface); }
.rms-about-guide { grid-column: 2; color: var(--c-text-muted); font-family: var(--t-mono); white-space: pre; }
.rms-about-node-name { grid-column: 3; margin: 0; font-family: var(--t-mono); font-size: var(--t-size-md); font-weight: var(--t-weight-semibold); }
.rms-about-node-what { grid-column: 4; margin: 0; color: var(--c-text-muted); font-size: var(--t-size-sm); line-height: var(--t-lh-text); }
.rms-about-chip { grid-column: 5; padding: 0 var(--g-space-2); border: var(--g-border) solid var(--c-accent); border-radius: var(--g-radius-pill); color: var(--c-accent); font-family: var(--t-mono); font-size: var(--t-size-xs); white-space: nowrap; }
.rms-about-chip[data-chip="need"], .rms-about-chip[data-chip="proof"] { border-color: var(--c-ok); color: var(--c-ok); }
.rms-about-node.is-lit { background: var(--c-accent-tint); }
.rms-about-node.is-lit .rms-about-node-name, .rms-about-node.is-lit .rms-about-guide { color: var(--c-accent); }
.rms-about-pin { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--g-about-point-min), 100%), 1fr)); gap: var(--g-space-5); align-items: start; }
.rms-about-sheet { margin: 0; border: var(--g-border) solid var(--c-border); border-radius: var(--g-radius-md); background: var(--c-surface); overflow: hidden; }
.rms-about-sheet-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--g-space-2); padding: var(--g-space-2) var(--g-space-3); border-bottom: var(--g-border) solid var(--c-border); font-family: var(--t-mono); }
.rms-about-sheet-head span { color: var(--c-text-muted); font-size: var(--t-size-xs); }
.rms-about-state[data-state="approved"], .rms-about-state[data-state="verified"] { color: var(--c-ok); }
.rms-about-state[data-state="suspect"] { color: var(--c-warn); }
.rms-about-ledger { border-top: var(--g-border) solid var(--c-border); }
.rms-about-row { display: grid; grid-template-columns: minmax(min(var(--g-about-point-min), 100%), 1fr) minmax(0, 1.4fr); gap: var(--g-space-2) var(--g-space-6); padding: var(--g-space-3) var(--g-space-1); border-bottom: var(--g-border) solid var(--c-border); }
.rms-about-row > div { display: grid; gap: var(--g-space-1); align-content: start; }
.rms-about-q { font-family: var(--t-mono); font-size: var(--t-size-sm); font-weight: var(--t-weight-medium); }
.rms-about-q::before, .rms-about-q::after { color: var(--c-warn); }
.rms-about-src { color: var(--c-text-muted); font-family: var(--t-mono); font-size: var(--t-size-xs); }
.rms-about-row p { margin: 0; color: var(--c-text-muted); line-height: var(--t-lh-text); }
.rms-about2 .rms-tabs { flex-wrap: wrap; margin: var(--g-space-3) 0; }
.rms-about-climb { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--g-about-point-min), 100%), 1fr)); gap: var(--g-space-4); margin: 0; padding: 0; list-style: none; counter-reset: climb; }
.rms-about-climb li { display: grid; gap: var(--g-space-1); padding-left: var(--g-space-3); border-left: var(--g-border) solid var(--c-border); }
.rms-about-climb b { font-family: var(--t-mono); }
.rms-about-climb b::before { counter-increment: climb; content: counter(climb) " → "; color: var(--c-ok); }
.rms-about-climb span { color: var(--c-text-muted); font-size: var(--t-size-sm); line-height: var(--t-lh-text); }
.rms-about-close { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--g-space-3); margin-top: var(--g-space-7); padding-top: var(--g-space-5); border-top: var(--g-border) solid var(--c-border); }
.rms-about-close p { margin: 0; max-width: var(--g-about-measure); color: var(--c-text-muted); }

/* --- exports: one row per file, what it holds and the way to get it --------------------------------------------------------*/
.rms-export-list { list-style: none; margin: var(--g-space-3) 0; padding: 0; border: var(--g-border) solid var(--c-border); border-radius: var(--g-radius-md); background: var(--c-surface); }
.rms-export { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--g-space-3); padding: var(--g-space-3); border-bottom: var(--g-border) solid var(--c-border); }
.rms-export:last-child { border-bottom: none; }
.rms-export .rms-toolbar { margin: 0; }
.rms-export-text { display: grid; gap: var(--g-space-1); min-width: 0; flex: 1; }
.rms-export-name { font-weight: var(--t-weight-semibold); }
.rms-matrix-about { color: var(--c-text-muted); }

/* --- people.js -----------------------------------------------------------------*/

.rms-help { margin: 0 0 var(--g-space-3); color: var(--c-text-muted); line-height: var(--t-lh-text); }
.rms-segmented > .rms-btn { border-radius: 0; text-decoration: none; }
.rms-segmented > .rms-btn:first-child { border-radius: var(--g-radius-md) 0 0 var(--g-radius-md); }
.rms-segmented > .rms-btn:last-child { border-radius: 0 var(--g-radius-md) var(--g-radius-md) 0; margin-left: calc(-1 * var(--g-border)); }
.rms-segmented > .rms-btn.is-on { position: relative; background: var(--c-pressed); border-color: var(--c-text-muted); color: var(--c-text); font-weight: var(--t-weight-semibold); }
.rms-people-filter { flex: 1 1 var(--g-select-w); max-width: var(--g-pick-w); }
.rms-people-body { gap: var(--g-space-5); align-items: start; } /* a split (css/layout.css): the organisation's legend its side */
.rms-people-body.rms-split { --g-side-share: 40cqi; } /* the legend's table whole beside the tree: its function, its standard, its roles' marks (8 Nov: cut at 30%) */
.rms-people-tree { min-width: 0; border: var(--g-border) solid var(--c-border-strong); border-radius: var(--g-radius-md); background: var(--c-surface); }
.rms-people-legend { padding: var(--g-space-3); border: var(--g-border) solid var(--c-border-strong); border-radius: var(--g-radius-md); background: var(--c-elevated); }
.rms-people-table { width: 100%; font-size: var(--t-size-sm); }
.rms-people-table td { vertical-align: top; }
.rms-people-table td.rms-mono { white-space: nowrap; font-size: var(--t-size-xs); }
.rms-people-does { color: var(--c-text-muted); line-height: var(--t-lh-base); }
.rms-people-fn { font-weight: var(--t-weight-semibold); }
.rms-people-who .rms-person-name { font-weight: var(--t-weight-semibold); }
.rms-people-meta { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--g-space-1) var(--g-space-2); margin-left: var(--g-space-2); }
/* a person: name and email on the first line, roles and grants on the second, under the name */
.rms-people-meta.is-block { flex-basis: 100%; margin-left: calc(var(--g-icon-sm) + var(--g-space-1)); }
.rms-people-granted, .rms-people-change { color: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-people-slot { color: var(--c-warn); font-style: italic; }
.rms-chip {
  display: inline-block;
  padding: 0 var(--g-space-2);
  border: var(--g-border) solid var(--c-border);
  border-radius: var(--g-radius-lg);
  background: var(--c-surface);
  color: var(--c-text-muted);
  font-size: var(--t-size-xs);
  line-height: var(--t-lh-base);
  white-space: nowrap;
}
.rms-chip.is-here { border-color: var(--c-text-muted); color: var(--c-text); font-weight: var(--t-weight-medium); }
.rms-chip.is-standard { font-family: var(--t-mono); letter-spacing: var(--t-track-mono); }
.rms-chip.is-gap { border-color: color-mix(in srgb, var(--c-warn) var(--c-tint-edge), var(--c-border)); color: var(--c-warn); }
.rms-chip.is-same-mark { border-style: dashed; border-color: var(--c-border-strong); color: var(--c-text-muted); }
.rms-findings { margin: 0; padding: 0; list-style: none; }
.rms-finding { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--g-space-2); padding: var(--g-space-2) var(--g-space-3); border-left: var(--g-border-strong) solid var(--rms-finding-c, var(--c-border-strong)); background: color-mix(in srgb, var(--rms-finding-c, var(--c-text-muted)) var(--c-tint-soft), var(--c-surface)); }
.rms-finding + .rms-finding { margin-top: var(--g-space-1); }
.rms-finding[data-severity="block"] { --rms-finding-c: var(--c-err); }
.rms-finding[data-severity="warn"] { --rms-finding-c: var(--c-warn); }
.rms-finding-mark, .rms-finding-sev { color: var(--rms-finding-c, var(--c-text-muted)); font-weight: var(--t-weight-semibold); }
.rms-finding-sev { min-width: var(--g-col-flag); font-size: var(--t-size-sm); }
.rms-finding-text { flex: 1 1 var(--g-select-w); min-width: 0; }

/* --- map.js --------------------------------------------------------------------*/

.rms-map-live { color: var(--c-text-muted); font-size: var(--t-size-sm); font-family: var(--t-mono); }
.rms-map-live::before { content: "●"; margin-right: var(--g-space-1); color: var(--c-ok); }
.rms-map-toolbar { row-gap: var(--g-space-2); }
.rms-map-filter { display: inline-flex; align-items: center; gap: var(--g-space-1); color: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-map-filter select { max-width: var(--g-select-w); }

.rms-narrow-only { display: none; }
/* the map as tall as its drawing, the page scrolling it (2026-11-01): nothing here caps a height */
.rms-mapview { display: flex; flex-direction: column; flex: 1 0 auto; }
.rms-map-body { display: flex; flex-direction: column; flex: 1 0 auto; min-height: var(--g-map-min-h); }
.rms-map-legend { display: flex; flex-wrap: wrap; gap: var(--g-space-1) var(--g-space-4); margin: 0 0 var(--g-space-3); padding: 0; list-style: none; color: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-map-legend li { display: inline-flex; align-items: center; gap: var(--g-space-1); }
.rms-map-swatch { display: inline-block; width: var(--g-map-swatch-w); border-top: var(--g-map-swatch-h) solid var(--rms-wire-c); vertical-align: middle; }
.rms-map-swatch[data-family="context"] { border-top-style: dotted; }
.rms-map-swatch[data-family="suspect"] { border-top-style: dashed; }
.rms-map-mark { display: inline-block; color: var(--c-crit-high); font-weight: var(--t-weight-semibold); }
.rms-map-mark.is-gap { color: var(--c-err); text-align: center; }
.rms-map-bars { display: inline-flex; gap: var(--g-hairline); }
.rms-map-bar-sample { display: inline-block; width: var(--g-space-1); height: var(--g-icon-sm); background: var(--rms-life-c); }
[data-family="working"] { --rms-life-c: var(--c-life-working); }
[data-family="review"] { --rms-life-c: var(--c-life-review); }
[data-family="controlled"] { --rms-life-c: var(--c-life-controlled); }
[data-family="proven"] { --rms-life-c: var(--c-life-proven); }
[data-family="dead"] { --rms-life-c: var(--c-life-dead); }
[data-family="verification"] { --rms-wire-c: var(--c-wire-verification); }
[data-family="design"] { --rms-wire-c: var(--c-wire-design); }
[data-family="reasoning"] { --rms-wire-c: var(--c-wire-reasoning); }
[data-family="structure"] { --rms-wire-c: var(--c-wire-structure); }
[data-family="context"] { --rms-wire-c: var(--c-wire-context); }
[data-family="suspect"] { --rms-wire-c: var(--c-link-suspect); }

.rms-map-selection { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-2); min-height: var(--g-control-h); margin: 0 0 var(--g-space-2); }
.rms-map-sel-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: var(--g-text-measure); }
.rms-map-sel-gaps { color: var(--c-err); font-size: var(--t-size-sm); }

.rms-map { position: relative; display: flex; flex-direction: column; flex: 1 0 auto; border: var(--g-border) solid var(--c-border-strong); border-radius: var(--g-radius-md); background: var(--c-surface); }
.rms-map:focus-visible { outline: var(--g-focus-ring) solid var(--c-focus); outline-offset: var(--g-hairline); }
/* the heads stay at the top of the screen's pane while the map scrolls by: under the bars (the pane is below them), over the drawing */
.rms-map-heads { position: sticky; top: 0; z-index: var(--g-z-sticky); flex: none; height: var(--g-map-head-h); overflow: hidden; border-bottom: var(--g-border) solid var(--c-border-strong); border-radius: var(--g-radius-md) var(--g-radius-md) 0 0; background: var(--c-elevated); }
.rms-map-heads-track { position: relative; width: var(--w); height: 100%; transform: translateX(var(--scroll-x, 0)); }
.rms-map-head { position: absolute; top: 0; bottom: 0; left: var(--x); width: var(--w); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--g-hairline); overflow: hidden; font-size: var(--t-size-sm); font-weight: var(--t-weight-semibold); line-height: var(--t-lh-tight); }
/* a head on one line: its name cut with … (whole on hover), its count and its arm always shown; no two heads meet */
.rms-map-head-line { display: flex; align-items: baseline; gap: var(--g-space-1); min-width: 0; max-width: 100%; padding-right: var(--g-space-2); }
.rms-map-head-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rms-map-head-arm { flex: none; }
.rms-map-head-n { flex: none; color: var(--c-text-muted); font-family: var(--t-mono); font-weight: var(--t-weight-regular); }
/* a head's words measured in the page's SVG probe (ui/map.js headNeeds): as the head draws them */
.rms-map-head-text { font-family: var(--t-sans); font-size: var(--t-size-sm); font-weight: var(--t-weight-semibold); }
.rms-map-head-count { font-family: var(--t-mono); font-size: var(--t-size-sm); font-weight: var(--t-weight-regular); }
.rms-map-sort { max-width: 100%; }
.rms-map-sort select { max-width: 100%; height: auto; padding-block: 0; font-size: var(--t-size-xs); }
/* sideways only, when the drawing is wider than the screen; up and down the page scrolls; never shorter than the screen holds */
.rms-map-scroll { position: relative; flex: 1 0 auto; min-height: var(--g-map-view-h); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; }
.rms-map-stage { position: relative; width: var(--w); height: var(--h); }
.rms-map-svg { position: absolute; top: 0; left: 0; }
.rms-map-canvas { position: absolute; top: 0; left: 0; width: var(--cw); height: var(--ch); transform: translate(var(--sx), var(--sy)); pointer-events: none; }

.rms-map-wire { fill: none; stroke: var(--rms-wire-c); stroke-width: var(--g-map-wire); opacity: var(--o-map-wire); }
.rms-map-wire[data-family="context"] { stroke-dasharray: var(--g-map-dot); stroke-linecap: round; }
.rms-map-wire.is-suspect { stroke: var(--c-link-suspect); stroke-dasharray: var(--g-map-dash); }
.rms-map-wire.is-lit, .rms-map-wire.is-hover { stroke-width: var(--g-map-wire-lit); opacity: 1; }
.rms-map-arrow { fill: var(--rms-wire-c); }
.has-selection .rms-map-wire:not(.is-lit) { opacity: var(--o-map-dim); }
.has-selection .rms-map-node:not(.is-lit) { opacity: var(--o-map-dim-node); }
.rms-map-wire.is-new { stroke: var(--c-accent); stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 1; animation: rms-map-draw var(--g-motion-pulse) var(--g-ease) forwards; }
@keyframes rms-map-draw { to { stroke-dashoffset: 0; } }

.rms-map-node { cursor: pointer; }
.rms-map-box { fill: var(--c-surface); stroke: var(--c-border-strong); stroke-width: var(--g-border); }
.rms-map-bar { fill: color-mix(in srgb, var(--rms-life-c, var(--c-border-strong)) var(--c-tint-mark), var(--c-surface)); }
.rms-map-node[data-family="source"] .rms-map-box { fill: var(--c-elevated); stroke-dasharray: var(--g-map-dash); }
/* A result box: a pass is the expected answer, outlined in its tone; what failed is filled, what went stale or is blocked is edged. */
.rms-map-node[data-family="result-pass"] .rms-map-box { stroke: color-mix(in srgb, var(--c-verif-pass) var(--c-tint-mark), var(--c-surface)); }
.rms-map-node[data-family="result-fail"] .rms-map-box { fill: color-mix(in srgb, var(--c-verif-fail) var(--c-tint), var(--c-surface)); stroke: var(--c-verif-fail); }
.rms-map-node[data-family="result-stale"] .rms-map-box,
.rms-map-node[data-family="result-partial"] .rms-map-box { fill: color-mix(in srgb, var(--c-verif-stale) var(--c-tint-soft), var(--c-surface)); stroke: var(--c-verif-stale); }
.rms-map-node[data-family="result-blocked"] .rms-map-box { stroke: var(--c-verif-blocked); }
.rms-map-node[data-family^="result-"] .rms-map-bar { fill: none; }
.rms-map-label { fill: var(--c-text); font-family: var(--t-mono); font-size: var(--t-size-sm); }
.rms-map-crit { fill: var(--c-text-muted); font-size: var(--t-size-xs); }
.rms-map-crit.is-low { fill: var(--c-crit-low); }
.rms-map-crit.is-medium { fill: var(--c-crit-medium); }
.rms-map-crit.is-high { fill: var(--c-crit-high); }
.rms-map-crit.is-safety { fill: var(--c-crit-safety); }
.rms-map-gap { fill: var(--c-err); font-weight: var(--t-weight-semibold); font-size: var(--t-size-sm); }
.rms-map-node.has-gap .rms-map-box { stroke: color-mix(in srgb, var(--c-err) var(--c-tint-edge), var(--c-border-strong)); }
.rms-map-node.is-history { opacity: var(--o-history); }
.rms-map-node:hover .rms-map-box { stroke: var(--c-focus); }
.rms-map-node.is-selected .rms-map-box { stroke: var(--c-select-strong); stroke-width: var(--g-border-strong); fill: var(--c-selection); }
.rms-map-node.is-pulse .rms-map-box { animation: rms-map-pulse var(--g-motion-pulse) ease-out; }
@keyframes rms-map-pulse { from { stroke: var(--c-select-strong); stroke-width: var(--g-map-pulse-w); } to { stroke-width: var(--g-border); } }

.rms-map-tip { position: absolute; left: var(--x); top: var(--y); z-index: var(--g-z-popover); translate: var(--g-space-3) var(--g-space-3); display: flex; flex-wrap: wrap; gap: var(--g-space-1) var(--g-space-2); 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); font-size: var(--t-size-sm); pointer-events: none; }
.rms-map-tip[data-side="left"] { translate: calc(-100% - var(--g-space-3)) var(--g-space-3); }
.rms-map-tip-kind { padding-left: var(--g-space-1); border-left: var(--g-map-swatch-h) solid var(--rms-wire-c); font-weight: var(--t-weight-semibold); color: var(--c-text); }
.rms-map-tip-suspect { color: var(--c-warn); }

.rms-map-list { margin: 0; padding: 0; list-style: none; }
.rms-map-item { border-bottom: var(--g-border) solid var(--c-border); }
.rms-map-item > summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-1) var(--g-space-2); padding: var(--g-space-2) 0; cursor: pointer; }
.rms-map-item-id { font-weight: var(--t-weight-semibold); }
.rms-map-item-title { flex-basis: 100%; color: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-map-groups { display: grid; gap: var(--g-space-1); padding: 0 0 var(--g-space-3) var(--g-space-3); }
.rms-map-group { display: flex; flex-wrap: wrap; gap: var(--g-space-1) var(--g-space-2); font-size: var(--t-size-sm); }
.rms-map-group-kind { min-width: var(--g-col-method); color: var(--c-text-muted); }
.rms-map-group-items { display: inline-flex; flex-wrap: wrap; gap: var(--g-space-1) var(--g-space-3); min-width: 0; }
.rms-map-group-item { overflow-wrap: anywhere; font-family: var(--t-mono); }
.rms-map-group-item.is-suspect a { text-decoration-style: dashed; text-decoration-color: var(--c-link-suspect); }
.rms-map-suspect { margin-left: var(--g-space-1); color: var(--c-warn); font-family: var(--t-sans); }

/* --- workflows.js -----------------------------------------------------------------*/
/* One wide sheet in bands (the owner, 8 Nov 2026): how an item moves (the lifecycle drawn, the sheet of what sits where under it), the
 * pack's pipelines, the builds, the pack's reference folded. Paragraphs flow to the prose measure, never a narrow column. */
.rms-wf-live-status { color: var(--c-text-muted); font-size: var(--t-size-sm); font-family: var(--t-mono); }
.rms-wf-live-status::before { content: "●"; margin-right: var(--g-space-1); color: var(--c-ok); }
.rms-wf .rms-help, .rms-wf .rms-band-lede { max-width: var(--g-prose-measure); }
.rms-wf-mine-n { margin-left: var(--g-space-2); padding: 0 var(--g-space-2); border-radius: var(--g-radius-pill); background: var(--c-selection); color: var(--c-on-select); font-size: var(--t-size-xs); font-weight: var(--t-weight-semibold); }
.rms-wf .rms-band + .rms-band { margin-top: var(--g-space-6); }
.rms-wf-lc-panel, .rms-wf .rms-tabpanel { display: flex; flex-direction: column; gap: var(--g-space-3); }
.rms-wf .rms-tabpanel { padding: var(--g-space-3) 0 0; overflow: visible; } /* the drawing takes the sheet's width: its words stay legible fitted */
.rms-life-svg .rms-ov-status-name, .rms-life-svg .rms-ov-band-name { font-size: var(--t-size-sm); }

/* the lifecycle drawing, pickable: a status or a move lit, the rest quiet (opacity and colour only, short) */
.rms-ov-status.is-pickable { cursor: pointer; }
.rms-ov-status.is-pickable .rms-ov-status-box { transition: stroke var(--g-motion-fast) var(--g-ease), opacity var(--g-motion-fast) var(--g-ease); }
.rms-ov-status.is-pickable:hover .rms-ov-status-box, .rms-ov-status.is-pickable:focus-visible .rms-ov-status-box { stroke: var(--c-focus); stroke-width: var(--g-border-strong); }
.rms-ov-status.is-pickable:focus-visible { outline: none; }
.rms-ov-status.is-lit .rms-ov-status-box { stroke: var(--c-select-strong); stroke-width: var(--g-map-wire-lit); }
.rms-ov-move { transition: opacity var(--g-motion-fast) var(--g-ease), stroke var(--g-motion-fast) var(--g-ease); }
.rms-ov-move.is-lit { stroke: var(--c-select-strong); stroke-width: var(--g-map-wire-lit); opacity: 1; }
.rms-life-svg.has-lit .rms-ov-move:not(.is-lit) { opacity: 0.2; }
.rms-life-svg.has-lit .rms-ov-status:not(.is-lit) { opacity: 0.55; }
.rms-ov-status { transition: opacity var(--g-motion-fast) var(--g-ease); }
.rms-ov-move-hit { fill: none; stroke: transparent; stroke-width: var(--g-wf-hit); pointer-events: stroke; cursor: pointer; }

/* the sheet under the drawing: what the pick names, or what waits and who moves an item */
.rms-wf-sheet { display: flex; flex-direction: column; gap: var(--g-space-2); min-width: 0; }
.rms-wf-sheet-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-2) var(--g-space-3); }
.rms-wf-sheet-title { flex: 1 1 auto; margin: 0; font-size: var(--t-size-md); font-weight: var(--t-weight-semibold); display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-2); }
.rms-wf-sheet-sub { margin: var(--g-space-2) 0 0; font-size: var(--t-size-sm); font-weight: var(--t-weight-semibold); color: var(--c-text-muted); }
.rms-wf-group-row > th { padding-top: var(--g-space-3); background: none; font-weight: var(--t-weight-regular); text-align: left; }
.rms-wf-group-n { color: var(--c-text-muted); }
.rms-wf-when { white-space: nowrap; }
.rms-wf-next-move { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-1) var(--g-space-2); }
.rms-wf-more-row > td { padding-top: var(--g-space-1); }
.rms-wf-items { display: flex; flex-direction: column; align-items: flex-start; gap: var(--g-space-1); min-width: 0; }
.rms-wf-items > .rms-wf-table-box { align-self: stretch; margin: 0; }
.rms-wf-items-table { font-size: var(--t-size-sm); }
.rms-wf-items-table td { vertical-align: middle; }
.rms-wf-item-cell { min-width: 0; }
.rms-wf-item-id { font-family: var(--t-mono); font-weight: var(--t-weight-semibold); }
.rms-wf-item-title { color: var(--c-text); }
.rms-wf-yours { margin-left: var(--g-space-1); border-color: var(--c-select-strong); color: var(--c-select-strong); }
.rms-wf-who { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-1) var(--g-space-2); }
.rms-wf-people { display: inline-flex; flex-wrap: wrap; gap: 0 var(--g-space-2); color: var(--c-text-muted); }
.rms-wf-person { cursor: help; text-decoration: underline dotted; text-decoration-color: var(--c-border-strong); text-underline-offset: var(--g-underline-offset); }
.rms-wf-move { display: inline-flex; align-items: center; gap: var(--g-space-1); }
.rms-wf-arrow { color: var(--c-text-muted); }
.rms-wf-right { font-weight: var(--t-weight-medium); }
.rms-wf-gate { font-size: var(--t-size-xs); }
.rms-wf-moves { display: flex; flex-direction: column; gap: var(--g-space-1); margin: 0; padding: 0; list-style: none; }
.rms-wf-moves > li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-1) var(--g-space-2); }
.rms-wf-moveref, .rms-wf-stepref { display: inline-flex; align-items: center; gap: var(--g-space-1); padding: var(--g-hairline) var(--g-space-2); border: var(--g-border) solid var(--c-border); border-radius: var(--g-radius-sm);
  background: var(--c-surface); color: var(--c-text); font: inherit; cursor: pointer; transition: border-color var(--g-motion-fast) var(--g-ease), background-color var(--g-motion-fast) var(--g-ease); }
.rms-wf-moveref:hover, .rms-wf-stepref:hover { border-color: var(--c-focus); background: var(--c-hover); }
.rms-wf-moveref:focus-visible, .rms-wf-stepref:focus-visible { outline: var(--g-focus-ring) solid var(--c-focus); outline-offset: var(--g-hairline); }
.rms-wf-steplist { display: inline-flex; flex-wrap: wrap; gap: var(--g-space-1); }
.rms-wf-stepref { text-align: left; }
.rms-wf-figure { margin: 0 0 var(--g-space-1); }
.rms-wf-builds-none { margin: var(--g-space-5) 0 0; }
.rms-wf-ref-band { margin-top: var(--g-space-6); }
.rms-wf-reference > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--g-space-1) var(--g-space-3); cursor: pointer; list-style: none; }
.rms-wf-reference > summary::-webkit-details-marker { display: none; }
.rms-wf-reference > summary::before { content: "▸"; display: inline-block; color: var(--c-text-muted); transition: transform var(--g-motion-fast) var(--g-ease); }
.rms-wf-reference[open] > summary::before { transform: rotate(90deg); }
.rms-wf-reference > summary .rms-band-title { display: inline; }
.rms-wf-reference-body { margin-top: var(--g-space-3); }
.rms-home-moves, .rms-rules-drawn { margin: var(--g-space-3) 0 0; }
.rms-wf-ref { padding: 0; border: 0; background: none; color: var(--c-link); font: inherit; text-decoration: underline; text-decoration-color: var(--c-link-line); text-underline-offset: var(--g-underline-offset); cursor: pointer; }
.rms-wf-ref:hover { text-decoration-color: currentColor; }
.rms-wf-ref:focus-visible, .rms-wf-tab:focus-visible, .rms-wf-step-main:focus-visible, .rms-wf-call:focus-visible { outline: var(--g-focus-ring) solid var(--c-focus); outline-offset: var(--g-hairline); }
.rms-wf-code { padding: 0 var(--g-hairline); border-radius: var(--g-radius-sm); background: var(--c-elevated); font-family: var(--t-mono); font-size: var(--t-size-sm); font-variant-ligatures: none; overflow-wrap: anywhere; }

.rms-wf-pipelines { margin: 0 0 var(--g-space-6); }
.rms-wf-tabs { display: flex; 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); }
.rms-wf-tab { display: inline-flex; align-items: baseline; gap: var(--g-space-2); padding: var(--g-pad-tab-y) var(--g-space-3); border: 0; border-radius: var(--g-radius-sm); background: none; color: var(--c-text-muted); font: inherit; font-weight: var(--t-weight-medium); cursor: pointer; }
.rms-wf-tab:hover { color: var(--c-text); background: var(--c-hover); }
.rms-wf-tab[aria-selected="true"] { background: var(--c-selection); color: var(--c-on-select); }
.rms-wf-tab-id { font-family: var(--t-mono); font-weight: var(--t-weight-semibold); }
.rms-wf-tab[aria-selected="true"] .rms-wf-tab-title { font-weight: var(--t-weight-semibold); }

.rms-wf-head-box { margin: 0 0 var(--g-space-3); }
.rms-wf-title { margin: 0 0 var(--g-space-1); font-size: var(--t-size-lg); }
.rms-wf-purpose { margin: 0 0 var(--g-space-2); max-width: var(--g-prose-measure); line-height: var(--t-lh-text); }
.rms-wf-relations { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--g-space-1) var(--g-space-5); margin: 0; color: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-wf-relations > span .rms-wf-ref { margin-left: var(--g-space-1); font-family: var(--t-mono); }
.rms-wf-instances { margin: 0 0 var(--g-space-3); }

.rms-wf-legend { display: flex; flex-wrap: wrap; gap: var(--g-space-1) var(--g-space-5); margin: 0 0 var(--g-space-2); padding: 0; list-style: none; color: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-wf-legend li { display: inline-flex; align-items: center; gap: var(--g-space-2); }
.rms-wf-swatch { display: inline-block; width: var(--g-wf-swatch-w); height: var(--g-icon-sm); border: var(--g-border) solid var(--c-border-strong); border-radius: var(--g-radius-sm); background: var(--c-surface); }
.rms-wf-swatch.is-proposed, .rms-wf-step.is-proposed { border-style: dashed; background: var(--c-wf-proposed); }
.rms-wf-swatch.is-lit, .rms-wf-step.is-lit { border-color: var(--c-select-strong); box-shadow: 0 0 0 var(--g-hairline) var(--c-select-strong); }
.rms-wf-step { transition: border-color var(--g-motion-fast) var(--g-ease), box-shadow var(--g-motion-fast) var(--g-ease); }
.rms-wf-makes { display: flex; flex-wrap: wrap; gap: var(--g-hairline) var(--g-space-2); font-size: var(--t-size-xs); color: var(--c-text-muted); }
.rms-wf-make { font-family: var(--t-mono); }
.rms-wf-make.is-off { text-decoration: line-through; }
.rms-wf-step-live:empty { display: none; }
.rms-wf-step-live { padding: 0 var(--g-space-3) var(--g-space-2); }
.rms-wf-waits { display: inline-block; padding: 0 var(--g-space-2); border-radius: var(--g-radius-pill); background: color-mix(in srgb, var(--c-warn) var(--c-tint-soft), transparent); color: var(--c-text); font-size: var(--t-size-xs); font-weight: var(--t-weight-semibold); }
.rms-wf-notes { margin-top: var(--g-space-3); }
.rms-wf-notes > summary { cursor: pointer; color: var(--c-text-muted); }
.rms-wf-notes[open] > summary { margin-bottom: var(--g-space-2); }
.rms-wf-call-sample { color: var(--c-text-muted); font-family: var(--t-mono); font-size: var(--t-size-xs); }
.rms-wf-exit-mark { color: var(--c-warn); font-weight: var(--t-weight-semibold); }

.rms-wf-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.rms-wf-diagram { position: relative; padding-bottom: var(--g-space-3); border: var(--g-border) solid var(--c-border); border-radius: var(--g-radius-md); background: var(--c-surface); }
.rms-wf-lanes { position: absolute; inset: 0; display: grid; grid-template-columns: var(--wf-cols); border-radius: inherit; overflow: hidden; pointer-events: none; }
.rms-wf-lane + .rms-wf-lane { border-left: var(--g-border) dashed var(--c-border); }
.rms-wf-lane:nth-child(even) { background: var(--c-wf-lane-alt); }
.rms-wf-heads { position: relative; display: grid; grid-template-columns: var(--wf-cols); border-bottom: var(--g-border) solid var(--c-border); border-radius: var(--g-radius-md) var(--g-radius-md) 0 0; background: var(--c-elevated); }
.rms-wf-head { padding: var(--g-space-2) var(--g-space-1); font-size: var(--t-size-sm); font-weight: var(--t-weight-semibold); text-align: center; overflow-wrap: break-word; line-height: var(--t-lh-tight); }
.rms-wf-head + .rms-wf-head { border-left: var(--g-border) dashed var(--c-border); }
.rms-wf-head.is-idle { color: var(--c-text-muted); font-weight: var(--t-weight-regular); }
.rms-wf-item, .rms-wf-link, .rms-wf-mark { position: relative; }
.rms-wf-item { scroll-margin-top: var(--g-wf-link-h); }
.rms-wf-row { display: grid; grid-template-columns: var(--wf-cols); }
.rms-wf-step { grid-column: var(--wf-col); display: flex; flex-direction: column; min-width: 0; margin: 0 var(--g-wf-step-gap); border: var(--g-border) solid var(--c-border-strong); border-radius: var(--g-radius-md); background: var(--c-surface); }
.rms-wf-step:hover { border-color: var(--c-focus); }
.rms-wf-step.is-selected { 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-wf-step.is-selected .rms-wf-step-main { background: var(--c-pressed); }
.rms-wf-step-main { display: flex; flex-direction: column; align-items: stretch; gap: var(--g-space-1); width: 100%; min-width: 0; padding: var(--g-space-2) var(--g-space-3); border: 0; border-radius: inherit; background: none; color: var(--c-text); font: inherit; text-align: left; cursor: pointer; }
.rms-wf-step-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--g-space-1) var(--g-space-2); font-size: var(--t-size-xs); color: var(--c-text-muted); }
.rms-wf-step-id { color: var(--c-text); font-family: var(--t-mono); font-weight: var(--t-weight-semibold); }
.rms-wf-step-title { font-weight: var(--t-weight-medium); line-height: var(--t-lh-tight); overflow-wrap: anywhere; }
.rms-wf-step.is-proposed .rms-wf-step-title { color: var(--c-text-muted); }
.rms-wf-lane-chip { display: none; }
.rms-wf-proposed-chip { border-style: dashed; }
.rms-wf-exit { font-size: var(--t-size-xs); color: var(--c-text-muted); }
.rms-wf-exit .rms-wf-exit-mark { margin-right: var(--g-space-1); }
.rms-wf-calls { display: flex; flex-wrap: wrap; gap: var(--g-space-1); padding: 0 var(--g-space-3) var(--g-space-2); }
.rms-wf-call { padding: 0 var(--g-space-2); border: var(--g-border) solid var(--c-border-strong); border-radius: var(--g-radius-sm); background: var(--c-surface); color: var(--c-text); font-family: var(--t-mono); font-size: var(--t-size-xs); cursor: pointer; }
.rms-wf-call:hover { border-color: var(--c-text-muted); background: var(--c-elevated); }
.rms-wf-link { height: var(--g-wf-link-h); }
.rms-wf-mark { height: var(--g-wf-mark-h); }
.rms-wf-link-svg, .rms-wf-mark-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rms-wf-link line { stroke: var(--c-border-strong); stroke-width: var(--g-wf-wire); }
.rms-wf-arrowhead { fill: var(--c-border-strong); }
.rms-wf-start, .rms-wf-end-dot { fill: var(--c-text); }
.rms-wf-end-ring { fill: var(--c-surface); stroke: var(--c-text); stroke-width: var(--g-wf-wire); }

.rms-wf-card-slot:empty { display: none; }
.rms-wf-card { position: relative; margin: var(--g-space-2) var(--g-wf-step-gap) 0; padding: var(--g-space-3) var(--g-space-4); border: var(--g-border) solid var(--c-select-strong); border-radius: var(--g-radius-lg); background: var(--c-surface); box-shadow: var(--c-shadow-pop); }
.rms-wf-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-2); margin: 0 0 var(--g-space-2); }
.rms-wf-card-title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: var(--t-size-md); }
.rms-wf-facts { grid-template-columns: max-content minmax(0, 1fr); margin: 0; }
.rms-wf-facts dd { line-height: var(--t-lh-text); }
.rms-wf-command { display: grid; gap: var(--g-space-1); }
.rms-wf-pre { margin: 0; padding: var(--g-space-2) var(--g-space-3); border: var(--g-border) solid var(--c-border); border-radius: var(--g-radius-sm); background: var(--c-elevated); font-family: var(--t-mono); font-size: var(--t-size-sm); font-variant-ligatures: none; line-height: var(--t-lh-base); white-space: pre-wrap; overflow-wrap: anywhere; }
.rms-wf-copy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-2); }
.rms-wf-copy-status { color: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-wf-uses { margin: 0; padding: 0; list-style: none; }
.rms-wf-uses li + li { margin-top: var(--g-space-1); }
.rms-wf-chips { display: inline-flex; flex-wrap: wrap; gap: var(--g-space-1); }
.rms-wf-card-nav { display: flex; gap: var(--g-space-2); margin-top: var(--g-space-3); }
.rms-wf-next { margin-left: auto; }

.rms-wf-p { margin: 0 0 var(--g-space-3); max-width: var(--g-prose-measure); line-height: var(--t-lh-text); }
.rms-wf-list { margin: 0 0 var(--g-space-3); padding-left: var(--g-space-5); max-width: var(--g-prose-measure); line-height: var(--t-lh-text); }
.rms-wf-section > .rms-wf-pre { margin: 0 0 var(--g-space-3); }
.rms-wf-table-box { margin: 0 0 var(--g-space-4); }
.rms-wf-table { font-size: var(--t-size-sm); }
.rms-wf-table td { line-height: var(--t-lh-base); overflow-wrap: break-word; }
.rms-wf-terms { display: grid; grid-template-columns: var(--g-wf-term-w) minmax(0, 1fr); gap: var(--g-space-2) var(--g-space-4); margin: 0; }
.rms-wf-terms dt { font-weight: var(--t-weight-semibold); overflow-wrap: anywhere; }
.rms-wf-terms dd { margin: 0; max-width: var(--g-prose-measure); line-height: var(--t-lh-text); }

/* The project home's drawings (ui/overview.js) */
.rms-ov-plate { display: flex; flex-direction: column; gap: var(--g-space-2); }
.rms-ov-scroll { flex: none; overflow-x: auto; overscroll-behavior-x: contain; border: var(--g-border) solid var(--c-border-strong); border-radius: var(--g-radius-md); background: var(--c-elevated); }
.rms-ov-svg { display: block; }
.rms-ov-lane { fill: var(--c-text-muted); font-size: var(--t-size-sm); font-weight: var(--t-weight-medium); }
.rms-ov-box { fill: var(--c-surface); stroke: var(--c-border-strong); stroke-width: var(--g-border); }
.rms-ov-box-name { fill: var(--c-text); font-size: var(--t-size-sm); font-weight: var(--t-weight-semibold); }
.rms-ov-box-count { fill: var(--c-text-muted); font-family: var(--t-mono); font-size: var(--t-size-xs); }
.rms-ov-node.is-empty .rms-ov-box { fill: var(--c-elevated); stroke: var(--c-border); stroke-dasharray: var(--g-map-dash); }
.rms-ov-node.is-empty .rms-ov-box-name { fill: var(--c-text-muted); font-weight: var(--t-weight-regular); }
.rms-ov-node.is-here .rms-ov-box { fill: var(--c-selection); stroke: var(--c-select-strong); stroke-width: 1.8; }
a.rms-ov-node:hover .rms-ov-box, a.rms-ov-node:focus-visible .rms-ov-box, a.rms-ov-status:hover .rms-ov-status-box, a.rms-ov-status:focus-visible .rms-ov-status-box { stroke: var(--c-focus); stroke-width: var(--g-border-strong); }
.rms-ov-wire { fill: none; stroke: var(--rms-wire-c); stroke-width: var(--g-map-wire); }
.rms-ov-wire.is-idle { opacity: 0.28; }
.rms-ov-wire.is-used { stroke-width: var(--g-map-wire-lit); }
.rms-ov-wire.is-suspect { stroke-dasharray: var(--g-map-dash); }
.rms-ov-wire:hover { opacity: 1; stroke-width: var(--g-map-wire-lit); }
.rms-ov-wire-label { fill: var(--c-text-muted); font-family: var(--t-mono); font-size: var(--t-size-xs); paint-order: stroke; stroke: var(--c-elevated); stroke-width: var(--g-border-frame); }
.rms-ov-arrow { fill: var(--rms-wire-c, var(--c-text-muted)); }
.rms-ov-input[data-state="accepted"] { --rms-wire-c: var(--c-life-controlled); }
.rms-ov-input[data-state="waiting"] { --rms-wire-c: var(--c-life-review); }
.rms-ov-mark[data-family="usual"] { --rms-wire-c: var(--c-text); }
.rms-ov-mark[data-family="out"] { --rms-wire-c: var(--c-life-dead); }
.rms-ov-mark[data-family="forward"], .rms-ov-mark[data-family="back"], .rms-ov-mark[data-family="stack"] { --rms-wire-c: var(--c-text-muted); }
.rms-ov-strip { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--g-space-1) var(--g-space-2); font-size: var(--t-size-xs); color: var(--c-text-muted); }
.rms-ov-strip-head { font-weight: var(--t-weight-semibold); }
.rms-ov-chip { border-left: var(--g-map-swatch-h) solid var(--rms-wire-c); padding-left: var(--g-space-1); }
.rms-ov-chip.is-used { color: var(--c-text); }
.rms-ov-chip.is-suspect { border-left-style: dashed; }
.rms-ov-band rect { fill: none; stroke: var(--c-border); stroke-dasharray: var(--g-map-dot); }
.rms-ov-band[data-cls="controlled"] rect { fill: color-mix(in srgb, var(--c-life-controlled) var(--c-tint-soft), transparent); stroke: var(--c-border-strong); stroke-dasharray: none; }
.rms-ov-band-name { fill: var(--c-text-muted); font-size: var(--t-size-xs); }
.rms-ov-status { --rms-life-c: var(--c-life-working); }
.rms-ov-status[data-family="review"] { --rms-life-c: var(--c-life-review); }
.rms-ov-status[data-family="controlled"] { --rms-life-c: var(--c-life-controlled); }
.rms-ov-status[data-family="proven"] { --rms-life-c: var(--c-life-proven); }
.rms-ov-status[data-family="dead"] { --rms-life-c: var(--c-life-dead); }
.rms-ov-status-box { fill: color-mix(in srgb, var(--rms-life-c) var(--c-tint-soft), var(--c-surface)); stroke: color-mix(in srgb, var(--rms-life-c) var(--c-tint-mark), var(--c-surface)); stroke-width: var(--g-border-strong); }
.rms-ov-status.is-empty .rms-ov-status-box { fill: var(--c-surface); stroke-width: var(--g-border); }
.rms-ov-status-name { fill: var(--c-text); font-size: var(--t-size-xs); font-weight: var(--t-weight-semibold); }
.rms-ov-status-n { fill: var(--c-text-muted); font-family: var(--t-mono); font-size: var(--t-size-sm); }
.rms-ov-move { fill: none; stroke: var(--c-text-muted); stroke-width: var(--g-border); opacity: 0.55; }
.rms-ov-move[data-way="back"] { stroke-dasharray: var(--g-map-dash); }
.rms-ov-bracket { fill: none; stroke: var(--c-text-muted); stroke-width: var(--g-border); opacity: 0.55; }
.rms-ov-bracket[data-way="out"] { stroke: var(--c-life-dead); }
.rms-ov-move[data-way="out"] { stroke: var(--c-life-dead); }
.rms-ov-move.is-usual { stroke: var(--c-text); stroke-width: var(--g-map-wire-lit); opacity: 1; }
.rms-ov-move:hover { opacity: 1; stroke-width: var(--g-map-wire-lit); }
.rms-ov-entry { stroke: var(--c-text); stroke-width: var(--g-map-wire-lit); }
.rms-ov-caption { color: var(--c-text-muted); font-size: var(--t-size-sm); }
/* A drawing in its frame (ui/overview.js framed, commit F3): no wider than its box; enlarged over the window at its own size, zoomed
 * and dragged. */
.rms-ov-figure { display: flex; flex-direction: column; gap: var(--g-space-2); margin: 0; }
.rms-ov-figure-head { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: var(--g-space-2) var(--g-space-3); }
.rms-ov-figure-titles { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--g-hairline); min-width: 0; }
.rms-view .rms-ov-figure-title { margin: 0; font-size: var(--t-size-lg); font-weight: var(--t-weight-semibold); }
.rms-ov-figure:not(.is-full) .rms-ov-svg:not(.rms-zp-svg) { max-width: 100%; height: auto; }
.rms-ov-figure.is-full { overflow: hidden; }
.rms-ov-figure.is-full .rms-ov-plate { flex: 1; min-height: 0; }
.rms-ov-figure.is-full .rms-ov-scroll { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: auto; }
/* framed in the zoom window (ui/zoom_pan.js): the window is the frame; enlarged, it takes all the height there is */
.rms-ov-scroll.has-zp { overflow: visible; border: 0; background: none; min-width: 0; }
.rms-ov-figure.is-full .rms-ov-scroll.has-zp { overflow: hidden; }
.rms-ov-figure.is-full .rms-zp-view { flex: 1; block-size: auto; min-block-size: 0; }
.rms-ov-scroll.is-panning { cursor: grabbing; user-select: none; }
.rms-ov-list { display: grid; gap: var(--g-space-1); }
.rms-ov-list li { display: flex; flex-wrap: wrap; gap: var(--g-space-2); align-items: baseline; }
.rms-ov-list-n { color: var(--c-text-muted); font-family: var(--t-mono); font-size: var(--t-size-xs); }
.rms-ov-list-moves { color: var(--c-text-muted); font-size: var(--t-size-xs); }

/* The project home's head and timeline (views/home.js) */
/* The project home's head is a title block: one ruled box, a field per question (latest baseline, open proposals, reviews, change
 * requests, branches), each its label and its answer. The fields wrap; the rule between them is each field's right and bottom
 * edge, pulled one hairline past the box so its outer edges are the box's own. */

.rms-home-card-title { margin: 0 0 var(--g-space-1); color: var(--c-text-muted); font-size: var(--t-size-sm); font-weight: var(--t-weight-medium); }

.rms-home-card-list { display: grid; gap: var(--g-space-2); margin: 0; padding: 0; list-style: none; }
.rms-home [role="group"] > .rms-btn { height: var(--g-row-compact); padding-inline: var(--g-space-2); font-size: var(--t-size-sm); }

/* The map in the whole frame (views/map.js, ui/map.js; commit 18): one slim bar, the zoom, full screen, a set lit, the legend folded */
.rms-map-bar-gap { flex: 1; }
.rms-map-zoom { display: inline-flex; align-items: center; gap: var(--g-hairline); }
/* A drawing's window that zooms and pans (ui/zoom_pan.js): its bar above it at the right; the window never grows with the zoom (its
 * drawing moves inside it, one transform), as tall as the drawing needs up to the screen's height; a hand moving it is followed, a button
 * or a key glides (none when motion is reduced: the motion tokens are zero then). */
.rms-zp { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--g-space-1); min-width: 0; }
.rms-zp-bar { justify-self: end; }
.rms-zp-view { position: relative; overflow: hidden; min-width: 0; border: var(--g-border) solid var(--c-border-strong); border-radius: var(--g-radius-md); background: var(--c-elevated); cursor: grab; touch-action: pan-y; overscroll-behavior: contain; }
.rms-zp-view.is-auto { block-size: min(var(--zp-h, var(--g-zp-max-h)), var(--g-zp-max-h)); min-block-size: var(--g-zp-min-h); }
.rms-zp-view.is-fill { block-size: var(--g-zp-max-h); min-block-size: var(--g-zp-min-h); }
.rms-zp-view.is-movable { touch-action: none; }
.rms-zp-view.is-panning { cursor: grabbing; user-select: none; }
.rms-zp-view:focus-visible { outline: var(--g-focus-ring) solid var(--c-focus); outline-offset: calc(-1 * var(--g-focus-ring)); }
.rms-zp-view > .rms-zp-svg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.rms-zp-world { transform: translate(var(--zp-x, 0), var(--zp-y, 0)) scale(var(--zp-s, 1)); transform-origin: 0 0; transition: transform var(--g-motion-base) var(--g-ease), opacity var(--g-motion-base) var(--g-ease); }
.rms-zp-view.is-live .rms-zp-world { transition: opacity var(--g-motion-base) var(--g-ease); }
.rms-zp-view.is-waiting .rms-zp-world { opacity: 0; }
.rms-map-zb { padding-inline: var(--g-space-2); }
.rms-map-zoom-n { min-width: var(--g-col-flag); padding-inline: var(--g-space-1); text-align: center; color: var(--c-text-muted); font-family: var(--t-mono); font-size: var(--t-size-xs); }
.rms-map-legend-box { position: relative; }
.rms-map-legend-box > summary { list-style: none; }
.rms-map-legend-box > summary::-webkit-details-marker { display: none; }
.rms-map-legend-pop { position: absolute; right: 0; top: 100%; z-index: var(--g-z-popover); width: var(--g-map-tip-w); margin-top: var(--g-space-1); 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: 0 var(--g-space-1) var(--g-space-3) var(--c-shadow); }
.rms-map-legend-pop .rms-map-legend { margin: var(--g-space-2) 0 0; }
.rms-map-scroll.is-panning { cursor: grabbing; user-select: none; }
.rms-map.is-small .rms-map-label { display: none; }
.has-set .rms-map-node:not(.is-in-set) { opacity: var(--o-map-dim-node); }
.rms-map-node.is-in-set .rms-map-box { stroke: var(--c-select-strong); stroke-width: var(--g-border-strong); }
.rms-mapview { max-width: none; }
.rms-map-filters-box { position: relative; }
.rms-map-filters-box > summary { list-style: none; }
.rms-map-filters-box > summary::-webkit-details-marker { display: none; }
.rms-map-filters-box[open] > summary, .rms-map-legend-box[open] > summary { background: var(--c-pressed); border-color: var(--c-text-muted); }
.rms-map-filters-pop { position: absolute; left: 0; top: 100%; z-index: var(--g-z-popover); display: flex; flex-direction: column; align-items: flex-start; gap: var(--g-space-2); min-width: var(--g-map-tip-w); margin-top: var(--g-space-1); 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: 0 var(--g-space-1) var(--g-space-3) var(--c-shadow); }
.rms-map-filters-pop .rms-map-filter { justify-content: space-between; width: 100%; }

/* The whole window (ui/full_view.js, commit F3): the browser's own full screen, or a layer fixed over everything, rail and bars
 * included; the part keeps its own bar and lays itself out again for the size. */
.is-full { --rms-pad: var(--g-space-3); position: fixed; inset: 0; z-index: var(--g-z-full); max-width: none; margin: 0; padding: var(--rms-pad); overflow: auto; background: var(--c-surface); }
.is-full:fullscreen { background: var(--c-surface); }
.rms-mapview.is-full { display: flex; flex-direction: column; overflow: hidden; }
.rms-mapview.is-full .rms-map-body { min-height: 0; }

/* Compare (views/compare.js, ui/compare.js; commit 19): a change as git shows it, unified or split; the map's marks */
.rms-cmp-summary { color: var(--c-text-muted); font-size: var(--t-size-sm); }
/* The counts as figures that filter: green what was added, red what was removed, amber what changed. */
/* The compare as one table (ui/compare.js compareTable): a row per changed item, like the drive's file list; a row unfolds its words. */
.rms-cmp-shows { flex-wrap: wrap; align-items: center; }
.rms-cmp-show-n { font-family: var(--t-mono); color: var(--c-text-muted); }
.rms-cmp-show.is-added .rms-cmp-show-n { color: var(--c-diff-added); }
.rms-cmp-show.is-removed .rms-cmp-show-n { color: var(--c-diff-removed); }
.rms-cmp-show.is-changed .rms-cmp-show-n { color: var(--c-diff-changed); }
.rms-cmp-table-box { border-top: var(--g-border) solid var(--c-border); }
.rms-cmp-table { width: 100%; border-collapse: collapse; font-size: var(--t-size-sm); }
.rms-cmp-table th { position: sticky; top: 0; z-index: 1; padding: var(--g-space-2) var(--g-space-3); background: var(--c-surface); border-bottom: var(--g-border) solid var(--c-border); color: var(--c-text-muted); font-weight: var(--t-weight-medium); text-align: left; white-space: nowrap; }
.rms-cmp-table td { padding: var(--g-space-2) var(--g-space-3); border-bottom: var(--g-border) solid var(--c-border); vertical-align: baseline; }
.rms-cmp-sort { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.rms-cmp-sort:hover, .rms-cmp-sort.is-on { color: var(--c-text); }
.rms-cmp-row { --rms-stat-c: var(--c-diff-changed); cursor: pointer; }
.rms-cmp-row.is-added { --rms-stat-c: var(--c-diff-added); }
.rms-cmp-row.is-removed { --rms-stat-c: var(--c-diff-removed); }
.rms-cmp-row:hover, .rms-cmp-row.is-open { background: var(--c-hover); }
.rms-cmp-row:focus-visible { outline: var(--g-border-strong) solid var(--c-focus); outline-offset: calc(-1 * var(--g-border-strong)); }
.rms-cmp-sign-cell { width: var(--g-icon-md); }
.rms-cmp-sign-cell .rms-cmp-sign { color: var(--rms-stat-c); font-family: var(--t-mono); font-weight: var(--t-weight-semibold); }
.rms-cmp-chips { line-height: var(--t-lh-text); }
.rms-cmp-chip { display: inline-block; margin: 0 var(--g-space-1) var(--g-space-1) 0; padding: 0 var(--g-space-2); border: var(--g-border) solid var(--c-border); border-radius: var(--g-radius-sm); white-space: nowrap; }
.rms-cmp-links-cell { font-family: var(--t-mono); white-space: nowrap; }
.rms-cmp-table .rms-cell-id { white-space: nowrap; } /* an ID is one word: the table scrolls before it breaks */
.rms-cmp-links-cell .is-added { color: var(--c-diff-added); margin-right: var(--g-space-2); }
.rms-cmp-links-cell .is-removed { color: var(--c-diff-removed); margin-right: var(--g-space-2); }
.rms-cmp-fold-cell { width: var(--g-control-h); text-align: right; }
.rms-cmp-fold { min-width: 0; padding: 0 var(--g-space-2); border-color: transparent; background: none; color: var(--c-text-muted); transition: transform var(--g-motion-fast) var(--g-ease); }
.rms-cmp-chip-n { font-family: var(--t-mono); font-weight: var(--t-weight-semibold); }
.rms-cmp-row.is-open .rms-cmp-fold { transform: rotate(90deg); }
.rms-cmp-detail > td { padding: 0 var(--g-space-3) var(--g-space-3) var(--g-space-6); background: var(--c-hover); }
.rms-cmp-detail .rms-cmp-item { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.rms-cmp-detail .rms-cmp-head { display: none; } /* the row above says it */
.rms-cmp-keys { margin-left: auto; color: var(--c-text-muted); font-size: var(--t-size-xs); }
.rms-cmp-item { --rms-stat-c: var(--c-diff-changed); border: var(--g-border) solid var(--c-border); border-left: var(--g-tone-bar) solid var(--rms-stat-c); border-radius: var(--g-radius-lg); background: var(--c-surface); overflow: hidden; box-shadow: var(--c-shadow-1); }
.rms-cmp-item.is-added { --rms-stat-c: var(--c-diff-added); }
.rms-cmp-item.is-removed { --rms-stat-c: var(--c-diff-removed); }
.rms-cmp-item:focus-visible { outline: var(--g-border-strong) solid var(--c-focus); }
.rms-cmp-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--g-space-2); padding: var(--g-space-2) var(--g-space-3); border-bottom: var(--g-border) solid var(--c-border); }
.rms-cmp-field { border-bottom: var(--g-border) solid var(--c-border); }
.rms-cmp-field-name { padding: var(--g-space-1) var(--g-space-3); color: var(--c-text-muted); font-size: var(--t-size-sm); font-weight: var(--t-weight-medium); }
.rms-cmp-line { display: grid; grid-template-columns: var(--g-col-flag) minmax(0, 1fr); align-items: baseline; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--t-size-sm); }
.rms-cmp-line.is-del { background: color-mix(in srgb, var(--c-diff-removed) var(--c-tint-soft), var(--c-surface)); }
.rms-cmp-line.is-ins { background: color-mix(in srgb, var(--c-diff-added) var(--c-tint-soft), var(--c-surface)); }
.rms-cmp-line.is-none { display: block; padding: var(--g-space-1) var(--g-space-3); color: var(--c-text-muted); font-style: italic; }
.rms-cmp-sign { text-align: center; font-family: var(--t-mono); color: var(--c-text-muted); user-select: none; }
.rms-cmp-line.is-del .rms-cmp-sign { color: var(--c-diff-removed); }
.rms-cmp-line.is-ins .rms-cmp-sign { color: var(--c-diff-added); }
.rms-cmp-text { padding: var(--g-space-1) var(--g-space-3) var(--g-space-1) 0; }
.rms-cmp-line del { background: color-mix(in srgb, var(--c-diff-removed) var(--c-tint), transparent); text-decoration: line-through; }
.rms-cmp-line ins { background: color-mix(in srgb, var(--c-diff-added) var(--c-tint), transparent); text-decoration: none; }
.rms-cmp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.rms-cmp-split > .rms-cmp-line:first-child { border-right: var(--g-border) solid var(--c-border); }
.rms-cmp-links { display: grid; gap: var(--g-hairline); margin: 0; padding: var(--g-space-2) var(--g-space-2); list-style: none; }
.rms-cmp-link { display: grid; grid-template-columns: var(--g-col-flag) minmax(0, 1fr); font-size: var(--t-size-sm); }
.rms-cmp-mapbox { display: flex; flex-direction: column; min-height: var(--g-map-min-h); }
.rms-cmp-picked { margin-top: var(--g-space-3); }
.rms-map-node.is-cmp-added .rms-map-box { stroke: var(--c-diff-added); stroke-width: var(--g-border-strong); fill: color-mix(in srgb, var(--c-diff-added) var(--c-tint-soft), var(--c-surface)); }
.rms-map-node.is-cmp-removed { opacity: var(--o-map-dim-node); }
.rms-map-node.is-cmp-removed .rms-map-box { stroke: var(--c-diff-removed); stroke-dasharray: var(--g-map-dash); }
.rms-map-node.is-cmp-changed .rms-map-box { stroke: var(--c-diff-changed); stroke-width: var(--g-border-strong); }
.rms-map-wire.is-cmp-added { stroke: var(--c-diff-added); stroke-width: var(--g-map-wire-lit); }
.rms-map-wire.is-cmp-removed { stroke: var(--c-diff-removed); stroke-dasharray: var(--g-map-dash); opacity: var(--o-map-dim-node); }
.rms-map.is-compare .rms-map-wire:not([class*="is-cmp-"]) { opacity: var(--o-map-dim-node); }
.rms-cmp-link.is-added .rms-cmp-sign { color: var(--c-diff-added); }
.rms-cmp-link.is-removed .rms-cmp-sign { color: var(--c-diff-removed); }

/* Proposals and their impact (views/proposals.js, views/editor.js, ui/impact.js; commit 20c) */
.rms-editor-body { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--g-space-4); align-items: start; }
.rms-editor-impact { position: sticky; top: 0; display: flex; flex-direction: column; gap: var(--g-space-2); padding: var(--g-space-3); border: var(--g-border) solid var(--c-border-strong); border-radius: var(--g-radius-md); background: var(--c-elevated); }
.rms-impact { display: flex; flex-direction: column; gap: var(--g-space-3); }
.rms-impact-change { display: flex; flex-direction: column; gap: var(--g-space-2); }
.rms-impact-outcome { margin: 0; padding: var(--g-space-1) var(--g-space-2); border-left: var(--g-border-frame) solid var(--c-border-strong); }
.rms-impact-outcome.is-ok { border-left-color: var(--c-ok); }
.rms-impact-outcome.is-refused { border-left-color: var(--c-warn); }
.rms-impact-move, .rms-impact-census { margin: 0; color: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-impact-list { display: grid; gap: var(--g-space-1); }
.rms-proposals-body { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--g-space-4); align-items: start; }
.rms-proposals-rows { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.rms-proposal-row { padding: var(--g-space-2); border-bottom: var(--g-border) solid var(--c-border); }
.rms-proposal-row.is-on { background: var(--c-selection); color: var(--c-on-select); }
.rms-proposal-state { padding: 0 var(--g-space-1); border: var(--g-border) solid var(--c-border); border-radius: var(--g-radius-sm); color: var(--c-text-muted); font-size: var(--t-size-xs); font-weight: var(--t-weight-medium); }
.rms-proposal-state.is-open { border-color: color-mix(in srgb, var(--c-life-review) var(--c-tint-edge), var(--c-border)); color: var(--c-life-review); }
.rms-proposal-state.is-accepted { color: var(--c-ok); }
.rms-proposal-head { margin: 0 0 var(--g-space-2); font-size: var(--t-size-lg); }

/* The rules screen (views/ruleset.js; commit 26) */
/* The versions (views/ruleset.js): a row per version, its words and tags on one line that copies as it reads ("v3 approved in force
 * loosens by …"), why and who decided under it, the fold on its left opening what it changed against the one before; the one in force
 * edged in the selection's strong blue, as "you are here" is. */
.rms-rules-version-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.rms-rules-version { padding: var(--g-space-2) var(--g-space-2) var(--g-space-2) 0; border-bottom: var(--g-border) solid var(--c-border); }
.rms-rules-version.is-on { box-shadow: inset var(--g-border-frame) 0 0 var(--c-select-strong); }
.rms-rules-version.is-open { background: var(--c-hover); }
.rms-rules-version-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--g-space-1) var(--g-space-3); padding-left: var(--g-space-2); }
.rms-rules-version-fold { flex: none; justify-content: center; width: var(--g-mark); height: var(--g-mark); margin-top: var(--g-hairline); padding: 0; border-color: transparent; background: none; color: var(--c-text-muted); }
.rms-rules-version-fold::before { content: "›"; font-weight: var(--t-weight-semibold); transition: transform var(--g-motion-fast) var(--g-ease); }
.rms-rules-version-fold[aria-expanded="true"] { border-color: transparent; background: none; color: var(--c-text); }
.rms-rules-version-fold[aria-expanded="true"]::before { transform: rotate(90deg); }
span.rms-rules-version-fold::before { content: none; } /* the first version: a fold's room, nothing before it to open on */
.rms-rules-version-lead { display: flex; flex: 1 1 var(--g-col-narrow); align-items: flex-start; gap: var(--g-space-3); min-width: 0; }
.rms-rules-version-line { flex: 1 1 auto; min-width: 0; margin: 0; line-height: var(--t-lh-text); overflow-wrap: anywhere; }
.rms-rules-version-line .rms-badge { white-space: nowrap; }
.rms-rules-version-by { color: var(--c-text-muted); }
.rms-rules-decide { display: inline-flex; flex-wrap: wrap; gap: var(--g-space-1); margin-left: auto; }
.rms-rules-version-meta { display: grid; gap: var(--g-hairline); margin-top: var(--g-space-1); padding-left: calc(var(--g-space-2) + var(--g-mark) + var(--g-space-3)); font-size: var(--t-size-sm); line-height: var(--t-lh-small); }
.rms-rules-version-meta p { margin: 0; overflow-wrap: anywhere; }
.rms-rules-version-diff { margin: var(--g-space-3) 0 var(--g-space-1) calc(var(--g-space-2) + var(--g-mark) + var(--g-space-3)); }
/* A version's tags (the system's Tag, as badge.js draws a state): its state, in force, loosens or tightens; the mark drawn here, so a
 * copied row carries the words only. Approved reads plain as the controlled majority does; waiting the review loop's accent; rejected
 * the red pen; in force the selection; loosening "look again" ochre; tightening proof's verdigris. */
.rms-badge-rule .rms-badge-mark::before { content: "•"; }
.rms-badge-rule[data-family="approved"] { --rms-badge-c: var(--c-life-controlled); }
.rms-badge-rule[data-family="approved"] .rms-badge-mark::before { content: "●"; }
.rms-badge-rule[data-family="proposed"] { --rms-badge-bg: var(--c-accent-tint); --rms-badge-c: var(--c-life-review); color: var(--c-accent); }
.rms-badge-rule[data-family="proposed"] .rms-badge-mark::before { content: "◐"; }
.rms-badge-rule[data-family="rejected"] { --rms-badge-bg: var(--c-bad-tint); --rms-badge-c: var(--c-err); color: var(--c-err); }
.rms-badge-rule[data-family="rejected"] .rms-badge-mark::before { content: "✗"; }
.rms-badge-rule[data-family="withdrawn"] { --rms-badge-c: var(--c-life-dead); color: var(--c-text-muted); }
.rms-badge-rule[data-family="withdrawn"] .rms-badge-mark::before { content: "×"; }
.rms-badge-rule[data-family="on"] { --rms-badge-bg: var(--c-selection); --rms-badge-c: var(--c-select-strong); color: var(--c-on-select); }
.rms-badge-rule[data-family="on"] .rms-badge-mark::before { content: "✓"; }
.rms-badge-rule[data-family="loosens"] { --rms-badge-bg: var(--c-warn-tint); --rms-badge-c: var(--c-warn); color: var(--c-warn); }
.rms-badge-rule[data-family="loosens"] .rms-badge-mark::before { content: "↓"; }
.rms-badge-rule[data-family="tightens"] { --rms-badge-bg: var(--c-ok-tint); --rms-badge-c: var(--c-ok); color: var(--c-ok); }
.rms-badge-rule[data-family="tightens"] .rms-badge-mark::before { content: "↑"; }
/* A comparison of two versions (core/rules_diff.js): a line of counts, a group per part of the rules on the sheet (its head the group's
 * name and counts, its edge ochre where something loosens; a group that did not change one muted line), each change a line: its sign in
 * the diff's colours, its words with the old struck in the red pen and the new on proof's tint (the system's diff, as text_diff.js
 * marks words), the way it moves the rules a tag on the right. */
.rms-rdiff-pick { align-items: center; }
.rms-rdiff-pick label > span { color: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-rdiff-arrow { color: var(--c-text-muted); }
.rms-rdiff { display: grid; gap: var(--g-space-3); }
.rms-rdiff-sum { margin: 0; line-height: var(--t-lh-text); }
.rms-rdiff-pair { font-family: var(--t-mono); font-weight: var(--t-weight-semibold); letter-spacing: var(--t-track-mono); }
.rms-rdiff-n { color: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-rdiff-engine, .rms-rdiff-note { max-width: var(--g-lede); margin: 0; color: var(--c-text-muted); font-size: var(--t-size-sm); line-height: var(--t-lh-text); }
.rms-rdiff-group { border: var(--g-border) solid var(--c-border); border-left: var(--g-tone-bar) solid var(--c-border-strong); border-radius: var(--g-radius-md); background: var(--c-surface); }
.rms-rdiff-group.is-loosens { border-left-color: var(--c-warn); }
.rms-rdiff-group.is-same { margin: 0; padding: 0 0 0 var(--g-space-3); border: 0; background: none; color: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-rdiff-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--g-space-1) var(--g-space-3); padding: var(--g-space-2) var(--g-space-3); cursor: pointer; list-style: none; }
.rms-rdiff-group-head::-webkit-details-marker { display: none; }
.rms-rdiff-group-head::before { content: "›"; color: var(--c-text-muted); font-weight: var(--t-weight-semibold); transition: transform var(--g-motion-fast) var(--g-ease); }
.rms-rdiff-group[open] > .rms-rdiff-group-head { border-bottom: var(--g-border) solid var(--c-border); }
.rms-rdiff-group[open] > .rms-rdiff-group-head::before { transform: rotate(90deg); }
.rms-rdiff-group-head:hover { background: var(--c-hover); }
.rms-rdiff-group-name { font-weight: var(--t-weight-semibold); }
.rms-rdiff-counts { line-height: var(--t-lh-text); }
.rms-rdiff-group-body { display: grid; gap: var(--g-space-4); padding: var(--g-space-3); }
.rms-rdiff-section-title { margin: 0 0 var(--g-space-1); color: var(--c-text-muted); font-size: var(--t-size-xs); font-weight: var(--t-weight-semibold); }
.rms-rdiff-same { margin: 0; color: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-rdiff-items, .rms-rdiff-lines { margin: 0; padding: 0; list-style: none; }
.rms-rdiff-item { padding: var(--g-space-2) 0; border-top: var(--g-border) solid var(--c-border); }
.rms-rdiff-item:first-child { padding-top: 0; border-top: 0; }
.rms-rdiff-subject { margin: 0 0 var(--g-hairline); font-weight: var(--t-weight-medium); overflow-wrap: anywhere; }
.rms-rdiff-line { display: grid; grid-template-columns: var(--g-icon-md) minmax(0, 1fr); align-items: baseline; column-gap: var(--g-space-1); margin: var(--g-hairline) 0; padding: var(--g-hairline) var(--g-space-1); border-radius: var(--g-radius-sm); font-size: var(--t-size-sm); line-height: var(--t-lh-text); }
.rms-rdiff-line[data-way="loosens"] { background: var(--c-warn-tint); }
.rms-rdiff-line::before { content: "~"; color: var(--c-diff-changed); font-family: var(--t-mono); font-weight: var(--t-weight-semibold); text-align: center; }
.rms-rdiff-line[data-op="added"]::before { content: "+"; color: var(--c-diff-added); }
.rms-rdiff-line[data-op="removed"]::before { content: "−"; color: var(--c-diff-removed); }
.rms-rdiff-words { min-width: 0; overflow-wrap: anywhere; }
.rms-rdiff-what { color: var(--c-text-muted); }
.rms-rdiff-words .rms-badge { white-space: nowrap; }
.rms-rdiff-more { margin-top: var(--g-space-2); }
.rms-rules-bar { margin: var(--g-space-3) 0; }
.rms-rules-section { margin: var(--g-space-4) 0; }
/* The grid in a box of its own (2026-11-01: "keeps visible the upper titles even if one scrolls down a lot"): the roles' heads stay on top,
 * the rights stay on the left while it scrolls sideways; a column as narrow as a role's name allows, never stretched to fill the width. */
.rms-rules-grid, .rms-rules-moves { border-collapse: collapse; font-size: var(--t-size-sm); }
.rms-rules-grid th, .rms-rules-grid td, .rms-rules-moves th, .rms-rules-moves td { padding: var(--g-space-1); border-bottom: var(--g-border) solid var(--c-border); text-align: left; }
/* Who may do what (the owner's review of 0.55.0): the rights down the side in words, grouped, the roles across in level type, a dot where a
 * role holds a right and nothing where it does not; the row and the column under the pointer lit. In a draft a cell is a button. */
.rms-rules-grid { width: max-content; } /* as wide as its roles, never the page (Firefox stretches an auto table to its box) */
.rms-rules-grid thead th, .rms-rules-moves thead th { position: sticky; top: 0; z-index: 2; background: var(--c-canvas); box-shadow: inset 0 calc(-1 * var(--g-border)) 0 var(--c-border); }
.rms-rules-grid .rms-rules-right, .rms-rules-grid .rms-rules-right-head { position: sticky; left: 0; z-index: 1; background: var(--c-canvas); }
.rms-rules-grid thead .rms-rules-right-head { z-index: 3; }
/* a role's column as narrow as its longest word (8 Nov: at 5.5rem eleven roles ran past the box at 1440 px, the last two out of sight); its
 * name wraps at its spaces, never inside a word */
.rms-rules-grid th.rms-rules-role { width: var(--g-rules-role-w); min-width: var(--g-rules-role-w); max-width: var(--g-rules-role-w); text-align: center; font-size: var(--t-size-xs); font-weight: var(--t-weight-semibold); line-height: var(--t-lh-tight); white-space: normal; overflow-wrap: normal; vertical-align: bottom; }
.rms-rules-role-edit { display: inline-flex; align-items: center; gap: var(--g-space-1); }
.rms-rules-role-edit .rms-input { width: var(--g-rules-role-w); }
.rms-rules-right-head { width: var(--g-rules-right-w); }
.rms-rules-right { font-weight: var(--t-weight-regular); white-space: nowrap; }
.rms-rules-word { color: var(--c-text-muted); font-family: var(--t-mono); font-size: var(--t-size-xs); }
.rms-rules-group-row th { padding-top: var(--g-space-4); color: var(--c-text-muted); font-size: var(--t-size-xs); font-weight: var(--t-weight-semibold); }
.rms-rules-grid .rms-rules-cell { text-align: center; }
/* what a role sees, in its role's column: the column as wide as the role's head (its words take no width of their own, so "11 of 24 kinds"
 * never widens the table past its box), wrapping at their spaces, never inside a word */
.rms-rules-sees { text-align: center; font-size: var(--t-size-xs); line-height: var(--t-lh-tight); }
.rms-rules-sees > span, .rms-rules-sees-edit > span { display: block; contain: inline-size; }
.rms-rules-sees.is-narrowed { font-weight: var(--t-weight-semibold); }
.rms-rules-sees-edit { display: block; width: 100%; font-size: inherit; line-height: inherit; text-align: center; white-space: normal; }
.rms-sees-set { margin: var(--g-space-3) 0 0; padding: var(--g-space-2) var(--g-space-3); border: var(--g-border) solid var(--c-border); border-radius: var(--g-radius-sm); }
.rms-sees-set legend { padding: 0 var(--g-space-1); font-weight: var(--t-weight-semibold); }
.rms-sees-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--g-rules-right-w), 1fr)); gap: var(--g-space-1) var(--g-space-3); margin-top: var(--g-space-2); }
.rms-sees-choice { display: flex; align-items: center; gap: var(--g-space-1); }
.rms-rules-dot { display: inline-block; width: var(--g-rules-dot); height: var(--g-rules-dot); border-radius: var(--g-round); background: var(--c-text); vertical-align: middle; }
.rms-rules-grid tbody tr:not(.rms-rules-group-row):hover, .rms-rules-grid .is-hot { background: var(--c-hover); }
.rms-rules-toggle { display: inline-flex; align-items: center; justify-content: center; width: var(--g-row-compact); height: var(--g-row-compact); padding: 0; border: var(--g-border) solid transparent; border-radius: var(--g-radius-sm); background: transparent; cursor: pointer; }
.rms-rules-toggle[aria-pressed="false"] .rms-rules-dot { background: transparent; box-shadow: inset 0 0 0 var(--g-border) var(--c-border-strong); }
.rms-rules-toggle:hover { border-color: var(--c-border-strong); }
.rms-rules-toggle:focus-visible { outline: var(--g-focus-ring) solid var(--c-focus); outline-offset: var(--g-hairline); }
/* The lifecycles: a move a line that wraps by its own width, its checks as chips in words. */
.rms-rules-movelist { margin: 0 0 var(--g-space-3); padding: 0; list-style: none; border-top: var(--g-border) solid var(--c-border); }
.rms-rules-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-rules-move:hover { background: var(--c-hover); }
.rms-rules-move-path { flex: 0 1 var(--g-move-path-w); min-width: 0; font-weight: var(--t-weight-medium); }
.rms-rules-move-cap { flex: 0 1 var(--g-move-answer-w); min-width: 0; }
.rms-rules-move-checks { display: flex; flex: 1 1 var(--g-move-checks-min); flex-wrap: wrap; align-items: baseline; gap: var(--g-space-1); min-width: 0; }
.rms-rules-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); font-size: var(--t-size-sm); }
.rms-rules-check-x { padding: 0; border: 0; background: transparent; color: var(--c-text-muted); font: inherit; cursor: pointer; }
.rms-rules-check-x:hover { color: var(--c-err); }
.rms-rules-check-add { width: auto; }
.rms-rules-lifecycle { margin-bottom: var(--g-space-3); }
.rms-rules-draft { padding: var(--g-space-2); border: var(--g-border) solid var(--c-border-strong); border-radius: var(--g-radius-md); background: var(--c-elevated); }

/* Verify (views/verify.js; the owner's Stitch screens, 2026-10-27): the button in a head, the sheet docked under it. In a narrow pane
 * (the explorer's inspector) the sheet stacks: its verdict over its findings, a move's parts one under the other. */
.rms-verify-btn-mark { color: var(--c-text-muted); font-weight: var(--t-weight-semibold); }
.rms-verify-slot:empty { display: none; }
.rms-artifact-page > .rms-artifact > .rms-verify-slot { margin-top: var(--g-space-2); }
.rms-artifact.is-compact .rms-verify-slot { margin: 0 0 var(--g-space-3); }
:is(.rms-artifact.is-compact, .rms-explorer-inspector, .rms-gaps-inspector, .rms-drawer) .rms-verdict { grid-template-columns: minmax(0, 1fr); }
:is(.rms-artifact.is-compact, .rms-explorer-inspector, .rms-gaps-inspector, .rms-drawer) .rms-verdict-stamp { border-right: 0; border-bottom: var(--g-border) solid var(--c-border-strong); }
:is(.rms-artifact.is-compact, .rms-explorer-inspector, .rms-gaps-inspector, .rms-drawer) .rms-move { grid-template-columns: minmax(0, 1fr); }
:is(.rms-artifact.is-compact, .rms-explorer-inspector, .rms-gaps-inspector, .rms-drawer) .rms-verdict-finding { grid-template-columns: var(--g-icon-md) minmax(0, 1fr); }
:is(.rms-artifact.is-compact, .rms-explorer-inspector, .rms-gaps-inspector, .rms-drawer) .rms-verdict-fix { grid-column: 2; justify-self: start; }

/* The gaps workbench (views/gaps.js): the figures, the list beside the inspector in one ruled box, a row per item with its next action
 * on the right; the chosen row is the table's selection (brass edge), the inspector a sunken panel as the explorer's is. */
.rms-gaps-find { flex: 1 1 var(--g-select-w); max-width: var(--g-pick-w); }
/* clipped to its corners, never a scroller of its own: the list's head row sticks to the pane's top as the rows scroll by (2026-11-04) */
.rms-gaps-body { gap: 0; align-items: stretch; overflow: clip; border: var(--g-border) solid var(--c-border-strong); border-radius: var(--g-radius-md); background: var(--c-surface); } /* a split (css/layout.css): the inspector its side */
.rms-gaps-list { min-width: 0; }
.rms-gaps-list > .rms-empty, .rms-gaps-list > .rms-loading, .rms-gaps-none { margin: 0; padding: var(--g-space-4); }
.rms-gaps-rows { margin: 0; padding: 0; list-style: none; }
.rms-gaps-row {
  display: grid;
  /* the id column as wide as the longest id the list shows (--rms-id-chars, views/gaps.js), never less than its token: no id is cut */
  grid-template-columns: max(var(--g-col-id), calc(var(--rms-id-chars, 0) * var(--g-mono-advance) * var(--t-size-base))) var(--g-col-state) minmax(0, 1fr) var(--g-gap-next-w);
  align-items: center;
  gap: var(--g-space-1) var(--g-space-3);
  min-height: var(--g-row);
  padding: var(--g-space-1) var(--g-space-3);
  border-bottom: var(--g-border) solid var(--c-border);
}
.rms-gaps-row.is-head { position: sticky; top: 0; z-index: var(--g-z-sticky); min-height: 0; padding-block: var(--g-space-2); 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-gaps-rows > .rms-gaps-row:hover { background: var(--c-hover); }
.rms-gaps-rows > .rms-gaps-row.is-selected { background: var(--c-selection); color: var(--c-on-select); }
.rms-gaps-pick { justify-self: start; max-width: 100%; padding: 0; border: 0; background: none; color: var(--c-link); font: inherit; font-family: var(--t-mono); letter-spacing: var(--t-track-mono); text-align: left; text-decoration: underline; text-decoration-color: var(--c-link-line); text-underline-offset: var(--g-underline-offset); white-space: nowrap; cursor: pointer; }
.rms-gaps-pick:hover { text-decoration-color: currentColor; }
.rms-gaps-reason { display: inline-flex; align-items: baseline; gap: var(--g-space-1); min-width: 0; }
.rms-gaps-reason-mark { color: var(--c-text-muted); font-weight: var(--t-weight-semibold); }
[data-tone="fail"] > .rms-gaps-reason-mark { color: var(--c-err); }
[data-tone="warn"] > .rms-gaps-reason-mark { color: var(--c-warn); }
.rms-gaps-why { min-width: 0; color: var(--c-text-muted); font-size: var(--t-size-sm); overflow-wrap: anywhere; }
.rms-gaps-cost { color: var(--c-err); font-weight: var(--t-weight-semibold); }
.rms-gi-cost { color: var(--c-err); font-weight: var(--t-weight-semibold); }
.rms-gaps-next { justify-self: end; }
.rms-gaps-next .rms-btn { height: var(--g-row-compact); padding-inline: var(--g-space-2); }
.rms-gaps-inspector { display: flex; flex-direction: column; gap: var(--g-space-3); min-width: 0; padding: var(--g-space-4); border-left: var(--g-border) solid var(--c-border-strong); background: var(--c-elevated); }
.rms-gaps-hint { margin: 0; }
.rms-gi, .rms-gi-body { display: flex; flex-direction: column; gap: var(--g-space-4); min-width: 0; }
.rms-gi-head { display: grid; gap: var(--g-space-1); padding-bottom: var(--g-space-3); border-bottom: var(--g-border) solid var(--c-border-strong); }
.rms-drawer-title .rms-gi-head { padding-bottom: 0; border-bottom: 0; } /* the drawer's head draws its own rule */
.rms-gi-id { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--g-space-2); margin: 0; font-weight: var(--t-weight-semibold); }
.rms-gi-rev { color: var(--c-text-muted); font-family: var(--t-mono); font-size: var(--t-size-sm); font-weight: var(--t-weight-regular); }
.rms-gi-title { margin: 0; font-weight: var(--t-weight-medium); }
.rms-gi-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; margin: 0; overflow: hidden; color: var(--c-text-muted); line-height: var(--t-lh-text); }
.rms-gi-section-title { margin: 0 0 var(--g-space-2); font-size: var(--t-size-sm); font-weight: var(--t-weight-semibold); }
.rms-gi-why { margin: 0; line-height: var(--t-lh-base); }
.rms-gi-cases { display: grid; gap: var(--g-space-2); margin: 0; padding: 0; list-style: none; }
.rms-gi-case { display: grid; gap: var(--g-space-2); padding: var(--g-space-3); border: var(--g-border) solid var(--c-border-strong); border-radius: var(--g-radius-md); background: var(--c-surface); }
.rms-gi-case-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--g-space-2); }

/* Milestones as gates (docs/VIEWS_PLAN.md V-4, the design system's Milestones stepper): closed in ok with their baseline, the next in
   the selection blue, the open ones after; it wraps into rows on a narrow screen and never shrinks a label. */
/* The Overview's Status (§8): the ladder, the four figures under it, the recap; a step is a link, laid out as the stepper's. */
.rms-status-ladder { margin: 0 0 var(--g-space-4); }
.rms-status-ladder .rms-ms { padding: 0; }
.rms-view a.rms-ms-link { color: inherit; text-decoration: none; } /* a step is a block: the link rule's underline is not its */
.rms-ms-link { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 var(--g-space-2); padding: var(--g-space-2) var(--g-space-3); color: inherit; text-decoration: none; }
.rms-ms-link > small { grid-column: 2; color: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-ms.is-next .rms-ms-link > small { color: inherit; }
.rms-view a.rms-ms-link:hover b { text-decoration: underline; text-decoration-color: currentColor; }
.rms-status-ladder .rms-ms.is-closed { cursor: pointer; }
.rms-home .rms-tiles { margin: 0 0 var(--g-space-5); }
.rms-ms-page { display: flex; flex-direction: column; gap: var(--g-space-4); }
.rms-milestones { display: flex; flex-wrap: wrap; gap: var(--g-space-2); margin: 0; padding: 0; list-style: none; }
.rms-ms { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 var(--g-space-2); min-width: var(--g-col-method); padding: var(--g-space-2) var(--g-space-3);
  border: var(--g-border) solid var(--c-border-strong); border-radius: var(--g-radius-md); background: var(--c-surface); }
.rms-ms > small { grid-column: 2; color: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-ms-dot { grid-row: 1 / span 2; width: var(--g-icon-sm); height: var(--g-icon-sm); border: var(--g-border-strong) solid var(--c-border-strong); border-radius: var(--g-radius-pill); background: var(--c-surface); }
.rms-ms.is-closed { border-color: var(--c-ok); background: var(--c-ok-tint); cursor: context-menu; }
.rms-ms.is-closed .rms-ms-dot { border-color: var(--c-ok); background: var(--c-ok); }
.rms-ms.is-next { border-color: var(--c-select-strong); background: var(--c-selection); color: var(--c-on-select); }
.rms-ms.is-next .rms-ms-dot { border-color: var(--c-select-strong); }
.rms-ms.is-next > small { color: inherit; }
.rms-ms-next { display: flex; flex-direction: column; gap: var(--g-space-3); padding: var(--g-space-4); border: var(--g-border) solid var(--c-select-strong); border-radius: var(--g-radius-md); background: var(--c-surface); }
.rms-ms-next > h3, .rms-ms-means { margin: 0; }
.rms-ms-gates { display: grid; gap: var(--g-space-1); margin: 0; padding: 0; list-style: none; }
.rms-ms-gate { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--g-space-1); }
.rms-ms-gate.is-ok .rms-verdict-mark { color: var(--c-ok); }
.rms-ms-gate.is-bad .rms-verdict-mark { color: var(--c-err); }
.rms-ms-fix { margin-left: auto; }

/* The acting trace graph (docs/VIEWS_PLAN.md V-2, the design system's TraceMap and ChainPanel): five columns, calm at rest; a chain lit
   on hover (the rest recedes into the muted ink, below), kept on click (a selection ring); only the chain's links drawn, or every link faint. */
.rms-tm-controls { flex-wrap: wrap; gap: var(--g-space-2); }
.rms-tm-overlays { display: inline-flex; flex-wrap: wrap; gap: var(--g-space-1); }
.rms-tm-overlays .rms-btn.is-on { background: var(--c-selection); color: var(--c-on-select); }
.rms-tm-every { display: inline-flex; align-items: center; gap: var(--g-space-1); font-size: var(--t-size-sm); }
.rms-tm-find { min-width: var(--g-find-min); }
/* the project at a glance: one strip over the map, the map the whole width (no panel beside it: its details open in the drawer) */
.rms-tm-glance { display: grid; gap: var(--g-space-2); margin: 0 0 var(--g-space-2); font-size: var(--t-size-sm); }
.rms-tm-glance > p { margin: 0; }
.rms-tm-glance-facts { display: flex; flex-wrap: wrap; gap: var(--g-space-1) var(--g-space-4); }
.rms-tm-glance-fact { min-width: 0; }
/* what the overlay shows, first and in words: the changes since the baseline, the links waiting, the ones not drawn here and the way */
.rms-tm-glance-lead { font-size: var(--t-size-base); font-weight: var(--t-weight-medium); }
.rms-tm-glance-lead.is-none { color: var(--c-ok); }
.rms-tm-away { display: flex; flex-wrap: wrap; gap: var(--g-space-1) var(--g-space-4); margin: 0; padding: 0; list-style: none; }
.rms-tm-away > li { display: inline-flex; align-items: baseline; gap: var(--g-space-1); padding-left: var(--g-space-2); border-left: var(--g-border-strong) dashed var(--c-warn); }
.rms-tm-away-go { justify-self: start; }
/* The board: the heads' strip, then the drawing. The strip stays at the top of the screen's pane while the page scrolls the map by (the
 * Map lens's heads, 2026-11-04): under the bars (the pane is below them), opaque over the links, its tracks the drawing's (one
 * --rms-tm-cols, the person's widths, ui/colsize.js) and moved sideways with the stage, the one part that scrolls sideways. */
.rms-tm-board { position: relative; min-width: 0; border: var(--g-border) solid var(--c-border-strong); border-radius: var(--g-radius-md); background: var(--c-surface); }
.rms-tm-heads { position: sticky; top: 0; z-index: var(--g-z-sticky); overflow: hidden; border-bottom: var(--g-border) solid var(--c-border-strong); border-radius: var(--g-radius-md) var(--g-radius-md) 0 0; background: var(--c-elevated); }
.rms-tm-heads-track { display: grid; grid-template-columns: var(--rms-tm-cols, repeat(5, minmax(var(--g-tm-col-min), 1fr))); column-gap: var(--g-space-4); min-width: var(--g-tm-min); padding: var(--g-space-2) var(--g-space-3); transform: translateX(var(--scroll-x, 0)); }
.rms-tm-stage { position: relative; min-width: 0; overflow-x: auto; overflow-y: hidden; }
.rms-tm { display: grid; grid-template-columns: var(--rms-tm-cols, repeat(5, minmax(var(--g-tm-col-min), 1fr))); gap: var(--g-space-4); min-width: var(--g-tm-min); padding: var(--g-space-3); }
.rms-tm-links { position: absolute; top: 0; left: 0; pointer-events: none; overflow: visible; }
/* a link's path is built the first time it is lit and kept for the layout: shown by its class, never drawn again on a move */
.rms-tm-halo { display: none; fill: none; stroke: var(--c-surface); stroke-width: var(--g-tm-halo); }
.rms-tm-link { display: none; fill: none; stroke: var(--c-wire-context); stroke-width: var(--g-tm-link); }
.rms-tm-halo.is-on, .rms-tm-link.is-on, .rms-tm-links.is-every .rms-tm-link { display: inline; }
.rms-tm-link[data-family="verification"] { stroke: var(--c-wire-verification); }
.rms-tm-link[data-family="design"] { stroke: var(--c-wire-design); }
.rms-tm-link[data-family="reasoning"] { stroke: var(--c-wire-reasoning); stroke-dasharray: 4 3; }
.rms-tm-link[data-family="structure"] { stroke: var(--c-wire-structure); }
.rms-tm-link.is-suspect { stroke: var(--c-warn); stroke-width: var(--g-border-strong); stroke-dasharray: 5 3; }
.rms-tm-links.is-suspects :is(.rms-tm-link, .rms-tm-halo).is-suspect { display: inline; } /* the suspect links' overlay: each drawn at rest */
.rms-tm-links.is-every .rms-tm-link:not(.is-on) { opacity: var(--o-map-dim); }
.rms-tm-col { display: flex; flex-direction: column; gap: var(--g-space-2); min-width: 0; }
.rms-tm-col-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: calc(var(--g-space-1) / 2) var(--g-space-2); min-width: 0; }
.rms-tm-col-head > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rms-tm-col-head small { grid-column: 1 / -1; min-width: 0; overflow: hidden; color: var(--c-text-muted); font-size: var(--t-size-sm); text-overflow: ellipsis; white-space: nowrap; }
/* a head's width handle in the middle of the lane to the next column */
.rms-tm-col-head > .rms-colsize { right: calc((var(--g-space-4) + var(--g-colsize-w)) / -2); }
.rms-tm-count { color: var(--c-text-muted); font-family: var(--t-mono); font-size: var(--t-size-sm); }
.rms-tm-swatch { width: var(--g-tm-swatch); height: var(--g-tm-swatch); border-radius: var(--g-radius-sm); background: var(--rms-tm-cat, var(--c-border-strong)); }
:is(.rms-tm-col, .rms-tm-col-head)[data-column="sources"] { --rms-tm-cat: var(--c-cat-customer); --rms-tm-cat-tint: var(--c-cat-customer-tint); }
:is(.rms-tm-col, .rms-tm-col-head)[data-column="requirements"] { --rms-tm-cat: var(--c-cat-spec); --rms-tm-cat-tint: var(--c-cat-spec-tint); }
:is(.rms-tm-col, .rms-tm-col-head)[data-column="decisions"] { --rms-tm-cat: var(--c-text-muted); --rms-tm-cat-tint: var(--c-cat-control-tint); }
:is(.rms-tm-col, .rms-tm-col-head)[data-column="design"] { --rms-tm-cat: var(--c-cat-design); --rms-tm-cat-tint: var(--c-cat-design-tint); }
:is(.rms-tm-col, .rms-tm-col-head)[data-column="verification"] { --rms-tm-cat: var(--c-cat-proof); --rms-tm-cat-tint: var(--c-cat-proof-tint); }
.rms-tm-nodes { display: flex; flex-direction: column; gap: var(--g-space-1); }
.rms-tm-node { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--g-space-2); align-items: baseline; width: 100%; padding: var(--g-space-1) var(--g-space-2);
  border: var(--g-border) solid var(--c-border); border-left: var(--g-border-frame) solid var(--rms-tm-cat, var(--c-border-strong)); border-radius: var(--g-radius-sm);
  background: var(--c-surface); color: var(--c-text); font: inherit; text-align: left; cursor: pointer; }
.rms-tm-id { font-family: var(--t-mono); font-size: var(--t-size-sm); letter-spacing: var(--t-track-mono); overflow-wrap: anywhere; }
.rms-tm-crit { margin-right: calc(var(--g-space-1) / 2); color: var(--c-warn); }
.rms-tm-title { grid-column: 1; overflow: hidden; color: var(--c-text-muted); font-size: var(--t-size-sm); text-overflow: ellipsis; white-space: nowrap; }
.rms-tm-mark { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: var(--t-size-sm); white-space: nowrap; }
.rms-tm-mark[data-tone="ok"] { color: var(--c-ok); }
.rms-tm-mark[data-tone="warn"] { color: var(--c-warn); }
.rms-tm-mark[data-tone="fail"] { color: var(--c-err); }
/* What a focus, a change or a suspect link does not mark recedes (2026-11-04: faded to 28 % it could not be read on the dark ground):
 * the muted ink, its column's colour and its mark's tone withdrawn, never faded out; with nothing marked, nothing recedes. */
:is(.rms-tm.is-focus .rms-tm-node:not(.on), .rms-tm[data-overlay="changes"].has-marks .rms-tm-node:not([data-change]),
  .rms-tm[data-overlay="suspect"].has-marks .rms-tm-node:not([data-suspect])) { border-left-color: var(--c-border); color: var(--c-text-muted); }
:is(.rms-tm.is-focus .rms-tm-node:not(.on), .rms-tm[data-overlay="changes"].has-marks .rms-tm-node:not([data-change]),
  .rms-tm[data-overlay="suspect"].has-marks .rms-tm-node:not([data-suspect])) .rms-tm-mark { color: var(--c-text-muted); }
.rms-tm-tag { display: inline-block; margin-left: var(--g-space-1); padding: 0 var(--g-space-1); border-radius: var(--g-radius-sm); font-family: var(--t-sans); font-size: var(--t-size-xs); font-weight: var(--t-weight-medium); letter-spacing: 0; }
.rms-tm-tag[data-tone="ok"] { background: var(--c-ok-tint); color: var(--c-ok); }
.rms-tm-tag[data-tone="warn"] { background: var(--c-warn-tint); color: var(--c-warn); }
.rms-tm .rms-tm-node.on { background: var(--rms-tm-cat-tint, var(--c-surface)); }
.rms-tm .rms-tm-node.pin { box-shadow: 0 0 0 var(--g-focus-ring) var(--c-select-strong); }
.rms-tm .rms-tm-node.hit { outline: var(--g-focus-ring) dashed var(--c-select-strong); outline-offset: var(--g-hairline); }
.rms-tm .rms-tm-node.is-reach { box-shadow: inset 0 0 0 var(--g-border-strong) var(--c-warn); }
.rms-tm[data-overlay="proof"] .rms-tm-node[data-proof="no-case"], .rms-tm[data-overlay="proof"] .rms-tm-node[data-result="failed"] { border-left-color: var(--c-err); background: var(--c-surface); }
.rms-tm[data-overlay="proof"] .rms-tm-node:is([data-proof="suspect"], [data-proof="open"]) { border-left-color: var(--c-warn); background: var(--c-warn-tint); }
.rms-tm[data-overlay="proof"] .rms-tm-node[data-proof="proven"] { border-left-color: var(--c-border); }
.rms-tm[data-overlay="changes"] .rms-tm-node[data-change="added"] { border-left-color: var(--c-ok); box-shadow: inset 0 0 0 var(--g-border) var(--c-ok); }
.rms-tm[data-overlay="changes"] .rms-tm-node[data-change="changed"] { border-left-color: var(--c-warn); box-shadow: inset 0 0 0 var(--g-border) var(--c-warn); }
.rms-tm[data-overlay="suspect"] .rms-tm-node[data-suspect] { border-left-color: var(--c-warn); background: var(--c-warn-tint); }
/* a kept node's details, in the frame's drawer (ui/drawer.js) */
.rms-tm-chain-body { display: flex; flex-direction: column; gap: var(--g-space-3); min-width: 0; }
.rms-tm-chain-body > p { margin: 0; }
.rms-tm-chain-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-2); margin: 0; font-size: var(--t-size-base); }
.rms-tm-lead { margin: 0; }
.rms-tm-chain-sec { display: grid; gap: var(--g-space-1); }
/* a group's heading in the drawer, as the matrix's (.rms-gi-section-title): the same size, weight and ink in one drawer */
.rms-tm-chain-label { color: var(--c-text); font-size: var(--t-size-sm); font-weight: var(--t-weight-semibold); }
.rms-tm-chain-row { display: flex; align-items: center; justify-content: space-between; gap: var(--g-space-2); }
.rms-tm-chain-pick { display: grid; min-width: 0; padding: 0; border: 0; background: none; color: var(--c-text); font: inherit; text-align: left; cursor: pointer; }
.rms-tm-chain-pick > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rms-tm-chain-pick > .rms-mono { color: var(--c-link); font-size: var(--t-size-sm); }
.rms-tm-reached { margin: 0; color: var(--c-warn); }

/* Verification closure, the matrix (docs/VIEWS_PLAN.md V-1): items down, methods across, the row tinted by the census's word for it, a
   cell's cases with their latest run, a suspect claim dashed; the item picked beside it. */
.rms-mx-body { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); border: var(--g-border) solid var(--c-border-strong); border-radius: var(--g-radius-md); background: var(--c-surface); }
.rms-mx-grid { min-width: 0; }
.rms-mx-grid > .rms-empty, .rms-mx-grid > .rms-loading, .rms-mx-grid > .rms-help { margin: 0; padding: var(--g-space-4); }
/* a real table (not the list component's flex box, which laid its head apart from its rows): the heads stand over their columns */
.rms-mx { width: 100%; border-collapse: collapse; background: var(--c-surface); font-size: var(--t-size-sm); }
.rms-mx th, .rms-mx td { padding: var(--g-space-1) var(--g-space-2); border-bottom: var(--g-border) solid var(--c-border); text-align: left; vertical-align: top; }
.rms-mx thead th { position: sticky; top: 0; z-index: 1; border-bottom-color: var(--c-border-strong); background: var(--c-elevated); color: var(--c-text-muted); font-weight: var(--t-weight-medium); white-space: nowrap; }
.rms-mx-row { box-shadow: inset var(--g-border-frame) 0 0 var(--c-border); }
.rms-mx-row[data-tone="ok"] { box-shadow: inset var(--g-border-frame) 0 0 var(--c-ok); }
.rms-mx-row[data-tone="warn"] { box-shadow: inset var(--g-border-frame) 0 0 var(--c-warn); background: var(--c-warn-tint); }
.rms-mx-row[data-tone="fail"] { box-shadow: inset var(--g-border-frame) 0 0 var(--c-err); }
.rms-mx-row:hover { background: var(--c-hover); }
.rms-mx-row.is-selected { background: var(--c-selection); color: var(--c-on-select); }
.rms-mx-item { display: grid; gap: calc(var(--g-space-1) / 2); min-width: var(--g-col-id); max-width: var(--g-col-narrow); font-weight: var(--t-weight-regular); }
.rms-mx-pick { justify-self: start; padding: 0; border: 0; background: none; color: var(--c-link); font: inherit; font-family: var(--t-mono); letter-spacing: var(--t-track-mono); text-align: left; cursor: pointer; }
.rms-mx-title { overflow: hidden; color: var(--c-text-muted); text-overflow: ellipsis; white-space: nowrap; }
.rms-mx-state { white-space: nowrap; }
.rms-mx-state > .rms-gaps-reason-mark { margin-right: var(--g-space-1); }
[data-tone="ok"] > .rms-gaps-reason-mark { color: var(--c-ok); }
.rms-mx-cell { min-width: var(--g-col-method); }
.rms-mx-cell.is-unplanned { background: var(--c-elevated); }
.rms-mx-hole { color: var(--c-err); font-size: var(--t-size-sm); }
/* a case's id on one line: the column widens to the longest (no panel beside the table), and past the case column's bound it ends in … with its
 * note above it on hover (ui/tip.js) */
.rms-mx-case { display: inline-flex; align-items: baseline; gap: var(--g-space-1); max-width: var(--g-mx-case-max); margin: 0 var(--g-space-1) var(--g-space-1) 0; padding: var(--g-hairline) var(--g-space-1); border: var(--g-border) solid var(--c-border-strong); border-radius: var(--g-radius-sm); background: var(--c-surface); color: var(--c-text); white-space: nowrap; }
.rms-mx-case-id { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rms-mx-case.is-suspect { border-style: dashed; border-color: var(--c-warn); }
.rms-mx-case-mark { font-weight: var(--t-weight-semibold); }
.rms-mx-case[data-tone="ok"] > .rms-mx-case-mark { color: var(--c-ok); }
.rms-mx-case[data-tone="warn"] > .rms-mx-case-mark { color: var(--c-warn); }
.rms-mx-case[data-tone="fail"] > .rms-mx-case-mark { color: var(--c-err); }
.rms-mx-detail { display: flex; flex-direction: column; gap: var(--g-space-4); min-width: 0; }
.rms-mx-case-row { display: grid; gap: var(--g-space-2); padding: var(--g-space-3); border: var(--g-border) solid var(--c-border-strong); border-radius: var(--g-radius-md); background: var(--c-surface); }
.rms-mx-case-row > p { margin: 0; }
.rms-gi-suspect { color: var(--c-warn); font-size: var(--t-size-sm); }
.rms-gi-suspect::before { content: "⚠ "; }
.rms-gi-run { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--g-space-1) var(--g-space-3); margin: 0; font-size: var(--t-size-sm); }
.rms-gi-run dt { color: var(--c-text-muted); }
.rms-gi-run dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.rms-gi-evidence { font-family: var(--t-mono); font-size: var(--t-size-xs); }
.rms-gi-acts { display: flex; flex-wrap: wrap; gap: var(--g-space-2); }
.rms-gi-acts .rms-btn { height: var(--g-row-compact); }
.rms-gi-steps { margin: 0; padding-left: var(--g-space-5); line-height: var(--t-lh-base); }
.rms-gi-steps li + li { margin-top: var(--g-space-1); }

/* The rules studio (views/ruleset.js; the owner's Stitch ruleset screen): the version box a title block of cells, capacity and the
 * separations two ruled panels side by side, the moves × checks matrix the roles grid's squares. A loosening is careful: ochre, with its
 * mark and its words. */
.rms-studio-version-box { display: flex; flex-wrap: wrap; margin: 0 0 var(--g-space-4); overflow: hidden; border: var(--g-border) solid var(--c-border-strong); border-radius: var(--g-radius-md); background: var(--c-surface); }
.rms-studio-version-box.is-loosening { box-shadow: inset var(--g-border-frame) 0 0 var(--c-warn); }
.rms-studio-version-cell { display: flex; flex: 1 1 var(--g-home-card-min); flex-direction: column; gap: var(--g-space-1); min-width: 0; margin: 0 calc(-1 * var(--g-border)) calc(-1 * var(--g-border)) 0; padding: var(--g-space-3) var(--g-space-4); border-right: var(--g-border) solid var(--c-border); border-bottom: var(--g-border) solid var(--c-border); }
.rms-studio-version-label { color: var(--c-text-muted); font-size: var(--t-size-sm); font-weight: var(--t-weight-medium); }
.rms-studio-version-value { font-family: var(--t-mono); font-size: var(--t-size-lg); font-weight: var(--t-weight-medium); }
.rms-studio-warn { color: var(--c-warn); }
.rms-studio-warn::before { content: "⚠ "; }
.rms-studio-diff { display: grid; gap: var(--g-hairline); margin: 0; padding: 0; list-style: none; font-size: var(--t-size-sm); }
.rms-studio-diff-mark { display: inline-block; min-width: var(--g-icon-sm); font-family: var(--t-mono); font-weight: var(--t-weight-semibold); text-align: center; }
.rms-studio-diff li[data-way="loosens"] .rms-studio-diff-mark { color: var(--c-warn); }
.rms-studio-see { align-self: flex-start; margin-top: var(--g-space-1); }

.rms-studio-panel { margin: 0; padding: var(--g-space-4); border: var(--g-border) solid var(--c-border-strong); border-radius: var(--g-radius-md); background: var(--c-surface); }
.rms-studio-seps { display: grid; margin: 0; padding: 0; list-style: none; border-top: var(--g-border) solid var(--c-border); }
.rms-studio-sep { display: grid; gap: var(--g-space-1); padding: var(--g-space-2) 0; border-bottom: var(--g-border) solid var(--c-border); }
.rms-studio-sep-text, .rms-studio-sep-state { margin: 0; }
.rms-studio-sep-mark { font-weight: var(--t-weight-semibold); color: var(--c-text-muted); }
.rms-studio-sep.is-on .rms-studio-sep-mark { color: var(--c-ok); }
.rms-studio-sep.is-off .rms-studio-sep-text { color: var(--c-text-muted); }
.rms-studio-sep-rule { justify-self: start; padding: 0 var(--g-space-1); border-radius: var(--g-radius-sm); background: var(--c-elevated); font-family: var(--t-mono); font-size: var(--t-size-xs); }
.rms-studio-sep-state { color: var(--c-text-muted); font-size: var(--t-size-sm); }

/* The impact census (views/trace.js; the owner's Stitch trace screen): one ruled panel over the trace, what moved since a baseline
 * (the old words struck, the new marked), the change requests on it, the figures, the links gone suspect each with its Confirm. */
.rms-census-box:empty { display: none; }
.rms-census { display: grid; gap: var(--g-space-3); margin: 0 0 var(--g-space-5); padding: var(--g-space-4); border: var(--g-border) solid var(--c-border-strong); border-radius: var(--g-radius-md); background: var(--c-surface); }
.rms-census-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--g-space-2) var(--g-space-4); }
.rms-census-title { margin: 0; font-size: var(--t-size-md); font-weight: var(--t-weight-semibold); }
.rms-census-what { flex: 1 1 auto; margin: 0; color: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-census-deltas { display: grid; border-top: var(--g-border) solid var(--c-border); }
.rms-census-delta { display: grid; grid-template-columns: var(--g-col-method) minmax(0, 1fr); align-items: baseline; gap: var(--g-space-3); padding: var(--g-space-2) 0; border-bottom: var(--g-border) solid var(--c-border); }
.rms-census-field { color: var(--c-text-muted); font-size: var(--t-size-sm); font-weight: var(--t-weight-medium); }
.rms-census-old { color: var(--c-text-muted); text-decoration: line-through; text-decoration-color: var(--c-diff-removed); }
.rms-census-new { font-weight: var(--t-weight-semibold); text-decoration: none; }
.rms-census-changes { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--g-space-2); margin: 0; }
.rms-view a.rms-census-chip { padding: 0 var(--g-space-2); border: var(--g-border) solid var(--c-border-strong); border-radius: var(--g-radius-sm); font-family: var(--t-mono); font-size: var(--t-size-sm); text-decoration: none; }
.rms-view a.rms-census-chip:hover { border-color: var(--c-focus); }
.rms-census .rms-tiles { margin: 0; }
.rms-census-links { margin: 0; padding: 0; list-style: none; border-top: var(--g-border) solid var(--c-border); }
.rms-census-link { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--g-space-2); padding: var(--g-space-1) 0; border-bottom: var(--g-border) solid var(--c-border); }
.rms-census-link-mark { color: var(--c-warn); }
.rms-census-link-act { margin-left: auto; }
.rms-census-link-act .rms-btn { height: var(--g-row-compact); }
.rms-census-stale { margin: 0; font-size: var(--t-size-sm); }

/* The set-up (views/setup.js): the ladder across the top, then the drawing beside the docked assistant, which stays in view while the
 * drawing scrolls; the drawing may take the whole window. */
.rms-setup-ladder { margin: 0 0 var(--g-space-4); }
.rms-setup-body { display: grid; grid-template-areas: "drawing assistant"; grid-template-columns: minmax(0, 1fr) var(--g-assistant-w); align-items: start; gap: var(--g-space-5); }
.rms-setup-drawing { grid-area: drawing; min-width: 0; }
.rms-setup-assistant { grid-area: assistant; position: sticky; top: 0; min-width: 0; }
.rms-setup-figure { display: flex; flex-direction: column; gap: var(--g-space-3); margin: 0; padding: var(--g-space-3); border: var(--g-border) solid var(--c-border-strong); border-radius: var(--g-radius-md); background: var(--c-surface); }
.rms-setup-caption { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-2) var(--g-space-3); color: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-setup-caption-text { flex: 1 1 var(--g-select-w); }
.rms-setup-svg { overflow-x: auto; }
.rms-setup-figure.is-full .rms-setup-svg { flex: 1; min-height: 0; overflow: auto; }
.rms-setup-figure.is-full .rms-pieces { max-width: none; }

/* --- the windows and the redesign of 2026-10-28 --------------------------------------------------------------------------------
 * A window's tone (core/entry.js WINDOWS) is the colour of its tab: the rail's entry, the screen's head. Set once on
 * the element as data-tone, read everywhere below as --rms-tone. A tone says where one is, never a state. */
[data-tone="1"] { --rms-tone: var(--c-tone-1); }
[data-tone="2"] { --rms-tone: var(--c-tone-2); }
[data-tone="3"] { --rms-tone: var(--c-tone-3); }
[data-tone="4"] { --rms-tone: var(--c-tone-4); }
[data-tone="5"] { --rms-tone: var(--c-tone-5); }
[data-tone="6"] { --rms-tone: var(--c-tone-6); }
[data-tone="7"] { --rms-tone: var(--c-tone-7); }
[data-tone="8"] { --rms-tone: var(--c-tone-8); }

/* The recap: one band of two halves, the latest baseline and what is moving now. */
.rms-recap { display: grid; grid-template-columns: minmax(var(--g-recap-base-w), 2fr) minmax(0, 3fr); margin: 0 0 var(--g-space-5); border: var(--g-border) solid var(--c-border); border-radius: var(--g-sheet-radius); background: var(--c-surface); box-shadow: var(--c-shadow-1); overflow: hidden; }
.rms-recap.is-start { grid-template-columns: minmax(0, 1fr); }
.rms-recap-start { padding: var(--g-space-5); }
.rms-view .rms-recap-title { margin: 0 0 var(--g-space-2); font-size: var(--t-size-lg); }
.rms-recap-base, .rms-recap-moving { min-width: 0; padding: var(--g-space-4) var(--g-space-5); }
.rms-recap-base { border-right: var(--g-border) solid var(--c-border); background: linear-gradient(135deg, color-mix(in srgb, var(--c-view-baseline) var(--c-tint-soft), var(--c-surface)), var(--c-surface) var(--c-wash-stop)); }
.rms-recap-label { margin: 0 0 var(--g-space-2); color: var(--c-text-muted); font-size: var(--t-size-sm); font-weight: var(--t-weight-semibold); }
.rms-recap-baseline { display: flex; align-items: baseline; gap: var(--g-space-2); margin: 0 0 var(--g-space-1); font-family: var(--t-title); font-size: var(--t-size-xl); font-weight: var(--t-weight-semibold); }
.rms-recap-glyph { color: var(--c-view-baseline); font-size: var(--t-size-lg); }
.rms-recap-commit { padding: 0 var(--g-space-1); border-radius: var(--g-radius-sm); background: var(--c-elevated); color: var(--c-text-muted); font-family: var(--t-mono); font-size: var(--t-size-sm); font-weight: var(--t-weight-medium); }
.rms-recap-who { margin: 0 0 var(--g-space-3); color: var(--c-text-muted); }
.rms-recap-acts { display: flex; flex-wrap: wrap; gap: var(--g-space-2); margin: 0; }
.rms-recap-list { display: grid; gap: var(--g-space-1); margin: 0 0 var(--g-space-2); padding: 0; list-style: none; }
.rms-recap-row { display: flex; align-items: baseline; gap: var(--g-space-2); min-width: 0; white-space: nowrap; }
.rms-recap-row a { font-family: var(--t-mono); font-size: var(--t-size-sm); }
.rms-recap-row-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rms-recap-waits { display: flex; flex-wrap: wrap; gap: var(--g-space-2) var(--g-space-4); margin: var(--g-space-2) 0 0; padding-top: var(--g-space-2); border-top: var(--g-border) dashed var(--c-border); font-size: var(--t-size-sm); }
.rms-view a.rms-recap-wait { color: var(--c-text-muted); }

/* The windows as tiles: a sheet each, raised; its tab is its tone (the chip, the top edge); Trace the wide one. */

/* Two drawings side by side on a wide screen: the structure beside the lifecycles. */

/* A tone on a screen's head: the window one is in. */
.rms-explorer[data-tone] .rms-explorer-head .rms-head-title::before,
.rms-page[data-tone] > .rms-head .rms-head-title::before { content: ""; display: inline-block; width: var(--g-space-3); height: var(--g-space-3); margin-right: var(--g-space-2); border-radius: var(--g-radius-sm); background: var(--rms-tone, var(--c-text-muted)); vertical-align: middle; }

/* Reviews and changes: two columns, a ruled list each. */
/* the reviews and the change requests side by side only where each column holds a row's title whole (--g-col-board), one above the other
 * on a narrower window; a title longer than its row wraps at its spaces, never cut (8 Nov, the 0.71.0 manual) */
.rms-reviews-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--g-col-board), 100%), 1fr)); gap: var(--g-space-4); align-items: start; }
.rms-reviews-col { padding: var(--g-space-4); border: var(--g-border) solid var(--c-border); border-radius: var(--g-sheet-radius); background: var(--c-surface); box-shadow: var(--c-shadow-1); }
/* a column's head stays at the top of the pane while its rows scroll by (2026-11-04, every board keeps its heads), opaque */
.rms-reviews-col-head { position: sticky; top: 0; z-index: var(--g-z-sticky); display: flex; align-items: baseline; justify-content: space-between; gap: var(--g-space-3); margin: calc(-1 * var(--g-space-2)) 0 var(--g-space-2); padding: var(--g-space-2) 0; background: var(--c-surface); }
.rms-view .rms-reviews-col-title { margin: 0; font-size: var(--t-size-lg); }
.rms-reviews-count { color: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-reviews-list { margin: 0; padding: 0; list-style: none; border-top: var(--g-border) solid var(--c-border); }
.rms-reviews-row { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content max-content max-content; align-items: center; gap: var(--g-space-3); padding: var(--g-space-2) 0; border-bottom: var(--g-border) solid var(--c-border); }
.rms-reviews-row.is-settled { color: var(--c-text-muted); }
.rms-reviews-id { font-family: var(--t-mono); font-size: var(--t-size-sm); }
.rms-reviews-title { min-width: 0; }
.rms-reviews-when { color: var(--c-text-muted); font-family: var(--t-mono); font-size: var(--t-size-xs); }
.rms-reviews-acts { display: flex; flex-wrap: wrap; gap: var(--g-space-2); margin-top: var(--g-space-3); }
.rms-reviews-none { display: grid; justify-items: start; gap: var(--g-space-2); }

/* Trace: the button that says it everywhere, and the window's own page. */
.rms-view .rms-btn-trace { border-color: color-mix(in srgb, var(--c-tone-2) var(--c-mix-edge), var(--c-border-strong)); color: var(--c-tone-2); }
.rms-view .rms-btn-trace:hover { background: color-mix(in srgb, var(--c-tone-2) var(--c-tint), var(--c-surface)); border-color: var(--c-tone-2); }
.rms-trace-doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--g-col-mid), 100%), 1fr)); gap: var(--g-space-4); margin: 0 0 var(--g-space-5); }
.rms-trace-start, .rms-trace-path { display: grid; gap: var(--g-space-2); padding: var(--g-space-5); border: var(--g-border) solid var(--c-border); border-radius: var(--g-sheet-radius); background: var(--c-surface); box-shadow: var(--c-shadow-1); }
.rms-trace-start { border-top: var(--g-tone-bar) solid var(--c-tone-2); background: linear-gradient(120deg, color-mix(in srgb, var(--c-tone-2) var(--c-mix-wash), var(--c-surface)), var(--c-surface) var(--c-wash-stop)); }
.rms-trace-start-label { font-family: var(--t-title); font-size: var(--t-size-lg); font-weight: var(--t-weight-semibold); }
.rms-trace-start-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-2); }
.rms-trace-start-row .rms-input { flex: 1 1 var(--g-find-w); }
.rms-trace-from { height: calc(var(--g-control-h) * 1.25); font-size: var(--t-size-md); }
.rms-btn-lg { height: calc(var(--g-control-h) * 1.25); padding: 0 var(--g-space-5); font-size: var(--t-size-md); }
.rms-trace-path-arrow { color: var(--c-text-muted); }
.rms-trace-pick-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--g-col-narrow), 100%), 1fr)); gap: var(--g-space-2); margin: 0; padding: 0; list-style: none; }
.rms-trace-pick-btn { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--g-hairline) var(--g-space-2); width: 100%; padding: var(--g-space-3); border: var(--g-border) solid var(--c-border); border-radius: var(--g-radius-lg); background: var(--c-surface); color: var(--c-text); font: inherit; text-align: left; cursor: pointer; }
.rms-trace-pick-btn:hover { border-color: var(--c-tone-2); box-shadow: var(--c-shadow-1); }
.rms-trace-pick-id { font-family: var(--t-mono); font-size: var(--t-size-sm); font-weight: var(--t-weight-semibold); }
.rms-trace-pick-kind { justify-self: end; color: var(--c-text-muted); font-size: var(--t-size-xs); }
.rms-trace-pick-title { grid-column: 1 / -1; color: var(--c-text-muted); font-size: var(--t-size-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Documents: four drawers and, beside them, how a file is pinned and who may do what. */
.rms-docs-banner { margin: 0 0 var(--g-space-4); padding: var(--g-space-3) var(--g-space-4); border: var(--g-border) dashed color-mix(in srgb, var(--c-tone-7) var(--c-mix-edge), var(--c-border)); border-radius: var(--g-sheet-radius); background: color-mix(in srgb, var(--c-tone-7) var(--c-tint-soft), var(--c-surface)); line-height: var(--t-lh-base); }
.rms-docs-drawers { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--g-col-narrow), 100%), 1fr)); gap: var(--g-space-4); }
.rms-docs-drawer { display: grid; gap: var(--g-space-3); padding: var(--g-space-4); border: var(--g-border) solid var(--c-border); border-radius: var(--g-sheet-radius); background: var(--c-surface); box-shadow: var(--c-shadow-1); }
.rms-docs-drawer-head { display: grid; grid-template-columns: var(--g-tone-chip) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--g-space-3); align-items: center; }
.rms-docs-drawer-icon { grid-row: 1 / span 2; display: grid; place-items: center; width: var(--g-tone-chip); height: var(--g-tone-chip); border-radius: var(--g-radius-lg); background: color-mix(in srgb, var(--c-tone-7) var(--c-mix-chip), var(--c-surface)); color: var(--c-tone-7); }
.rms-docs-drawer-names { display: flex; align-items: baseline; gap: var(--g-space-2); min-width: 0; }
.rms-view .rms-docs-drawer-title { margin: 0; font-size: var(--t-size-lg); }
.rms-docs-drawer-path { color: var(--c-text-muted); font-family: var(--t-mono); font-size: var(--t-size-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rms-docs-drawer-rule { justify-self: start; padding: 0 var(--g-space-2); border-radius: var(--g-radius-sm); background: var(--c-elevated); color: var(--c-text-muted); font-size: var(--t-size-xs); }
.rms-docs-drawer-text { margin: 0; color: var(--c-text-muted); line-height: var(--t-lh-base); }
.rms-docs-empty { display: flex; align-items: center; gap: var(--g-space-2); padding: var(--g-space-4); border: var(--g-border) dashed var(--c-border-strong); border-radius: var(--g-radius-lg); color: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-docs-empty-mark { width: var(--g-space-2); height: var(--g-space-2); border-radius: var(--g-round); background: var(--c-border-strong); }
.rms-docs-pin { display: grid; gap: var(--g-space-2); margin: 0; }
.rms-docs-pin-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-2); }
.rms-docs-file, .rms-docs-target { display: inline-flex; align-items: center; gap: var(--g-space-2); padding: var(--g-space-2) var(--g-space-3); border: var(--g-border) solid var(--c-border-strong); border-radius: var(--g-radius-md); background: var(--c-surface); font-size: var(--t-size-sm); }
.rms-docs-target { border-color: var(--c-tone-5); }
.rms-docs-target-id { font-family: var(--t-mono); font-weight: var(--t-weight-semibold); }
.rms-docs-target-rev { padding: 0 var(--g-space-1); border-radius: var(--g-radius-sm); background: color-mix(in srgb, var(--c-tone-5) var(--c-tint), var(--c-surface)); color: var(--c-tone-5); font-family: var(--t-mono); font-size: var(--t-size-xs); }
.rms-docs-pin-arrow { display: inline-grid; color: var(--c-text-muted); }
.rms-docs-rights { display: grid; gap: var(--g-space-2); margin: 0; padding: 0 0 0 var(--g-space-4); color: var(--c-text-muted); font-size: var(--t-size-sm); line-height: var(--t-lh-base); }
/* A served space (0.60.0, docs/SPACE.md): the drawers as tabs, the drawer's tree by path, a document item awaiting its file in amber. */
.rms-docs-main { display: grid; gap: var(--g-space-4); min-width: 0; }
.rms-docs-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--g-menu-w), 100%), 1fr)); gap: var(--g-space-2); }
.rms-docs-tab { display: flex; align-items: center; gap: var(--g-space-3); padding: var(--g-space-3); border: var(--g-border) solid var(--c-border); border-radius: var(--g-radius-lg); background: var(--c-surface); color: var(--c-text); text-align: left; cursor: pointer; }
.rms-docs-tab:hover { border-color: var(--c-border-strong); }
.rms-docs-tab.is-on { border-color: var(--c-tone-7); background: color-mix(in srgb, var(--c-tone-7) var(--c-tint-soft), var(--c-surface)); }
.rms-docs-tab-names { display: grid; gap: var(--g-space-1); min-width: 0; }
.rms-docs-tab-title { font-weight: var(--t-weight-semibold); }
.rms-docs-tab-meta { color: var(--c-text-muted); font-size: var(--t-size-xs); }
.rms-docs-tree { display: grid; gap: var(--g-space-3); }
.rms-docs-folder { margin-left: calc(var(--depth, 0) * var(--g-space-4)); }
.rms-docs-folder[data-path=""] { margin-left: 0; }
.rms-view .rms-docs-folder-name { display: flex; align-items: center; gap: var(--g-space-2); margin: 0 0 var(--g-space-2); color: var(--c-text-muted); font-family: var(--t-mono); font-size: var(--t-size-sm); font-weight: var(--t-weight-medium); }
.rms-docs-folder-mark { width: var(--g-space-3); height: var(--g-space-2); border: var(--g-border) solid currentColor; border-radius: var(--g-radius-sm); }
.rms-docs-row-name { overflow-wrap: anywhere; font-weight: var(--t-weight-medium); }
.rms-docs-row-v { color: var(--c-text-muted); font-family: var(--t-mono); font-size: var(--t-size-xs); }
.rms-docs-entry-id { font-family: var(--t-mono); font-weight: var(--t-weight-semibold); }
.rms-docs-entry-path, .rms-docs-entry-drd { font-family: var(--t-mono); font-size: var(--t-size-xs); }
.rms-docs-entry-pinned { display: inline-flex; align-items: center; gap: var(--g-space-1); color: var(--c-ok); font-size: var(--t-size-sm); }
.rms-docs-awaiting { color: var(--c-warn); font-size: var(--t-size-sm); font-weight: var(--t-weight-medium); }
.rms-docs-closed { color: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-docs-pinchip { display: inline-flex; align-items: center; gap: var(--g-space-1); padding: 0 var(--g-space-2); border: var(--g-border) solid var(--c-tone-5); border-radius: var(--g-radius-md); color: inherit; font-size: var(--t-size-xs); text-decoration: none; }
.rms-docs-pinchip-v { color: var(--c-text-muted); font-family: var(--t-mono); }
.rms-docs-review { padding: 0 var(--g-space-2); border-radius: var(--g-radius-sm); background: color-mix(in srgb, var(--c-tone-7) var(--c-tint), var(--c-surface)); color: var(--c-tone-7); font-family: var(--t-mono); font-size: var(--t-size-xs); }

/* An item's page: its record on a sheet, its trace beside it on a wide screen. */
.rms-artifact-sheet { min-width: 0; padding: var(--g-space-2) var(--g-space-5) var(--g-space-5); border: var(--g-border) solid var(--c-border); border-radius: var(--g-sheet-radius); background: var(--c-surface); box-shadow: var(--c-shadow-1); }
/* An item at a glance beside its page (ui/quick_info.js, a side column of the one layout): its sections in sentence case, every line one
 * line (a glyph, its words, its value, the value cut with … before the line wraps, its whole on hover), a line that goes somewhere lit
 * under the pointer; the impact's section on a wash of the window's tone. The column turns to the impact and back with a short fade. */
.rms-quick { padding-left: var(--g-space-4); border-left: var(--g-border) solid var(--c-border); }
.rms-view .rms-qi-title { display: flex; align-items: center; gap: var(--g-space-2); margin: 0 0 var(--g-space-3); font-size: var(--t-size-lg); white-space: nowrap; }
.rms-qi-title-icon { flex: none; width: var(--g-icon-md); height: var(--g-icon-md); fill: none; stroke: var(--c-tone-2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rms-qi-pane { animation: rms-qi-turn var(--g-motion-base) var(--g-ease); }
@keyframes rms-qi-turn { from { opacity: 0; transform: translateX(var(--g-space-2)); } to { opacity: 1; transform: none; } }
.rms-qi-section + .rms-qi-section { margin-top: var(--g-space-4); }
.rms-view .rms-qi-head { margin: 0 0 var(--g-space-1); color: var(--c-text-muted); font-family: var(--t-sans); font-size: var(--t-size-xs); font-weight: var(--t-weight-semibold); letter-spacing: var(--g-eyebrow-track); white-space: nowrap; }
.rms-qi-head a { color: inherit; }
.rms-qi-lines, .rms-qi-rows { display: grid; gap: var(--g-hairline); margin: 0; padding: 0; list-style: none; }
.rms-qi-line { display: grid; grid-template-columns: var(--g-icon-md) auto minmax(0, 1fr); align-items: center; column-gap: var(--g-space-2); box-sizing: border-box; width: 100%; min-height: var(--g-row-compact); padding: 0 var(--g-space-2); border: 0; border-radius: var(--g-radius-md); background: none; color: inherit; font: inherit; font-size: var(--t-size-sm); text-align: left; text-decoration: none; white-space: nowrap; }
.rms-view a.rms-qi-line, .rms-view a.rms-qi-line:hover { color: inherit; text-decoration: none; }
:is(a, button).rms-qi-line { cursor: pointer; }
:is(a, button).rms-qi-line:hover, :is(a, button).rms-qi-line:focus-visible { background: var(--c-hover); }
.rms-qi-glyph { display: inline-flex; align-items: center; justify-content: center; color: var(--c-text-muted); }
.rms-qi-label { color: var(--c-text-muted); }
.rms-qi-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rms-qi-value > * + * { margin-left: var(--g-space-2); }
.rms-qi-figure { font-family: var(--t-mono); font-weight: var(--t-weight-medium); }
.rms-qi-note { color: var(--c-text-muted); }
.rms-qi-more { color: var(--c-text-muted); font-family: var(--t-mono); font-size: var(--t-size-xs); }
.rms-qi-id { font-size: var(--t-size-xs); }
.rms-qi-id + .rms-qi-id { margin-left: var(--g-space-1); }
.rms-qi-person + .rms-qi-person { margin-left: var(--g-space-1); }
.rms-qi-person .rms-role-icons { margin-left: var(--g-hairline); }
.rms-qi-pips { display: inline-flex; gap: var(--g-hairline); vertical-align: middle; color: var(--c-text-muted); }
.rms-qi-pip { box-sizing: border-box; width: var(--g-qi-pip); height: var(--g-qi-pip); border: var(--g-border) solid currentColor; border-radius: var(--g-round); }
.rms-qi-pip.is-on { background: currentColor; }
.rms-qi-line.is-ok .rms-qi-pips, .rms-qi-line.is-ok .rms-qi-glyph { color: var(--c-ok); }
.rms-qi-line.is-next .rms-qi-pips { color: var(--c-select-strong); }
.rms-qi-line.is-warn .rms-qi-glyph, .rms-qi-line.is-warn .rms-qi-figure { color: var(--c-warn); }
.rms-qi-line.is-bad .rms-qi-glyph, .rms-qi-line.is-bad .rms-qi-value { color: var(--c-err); }
.rms-qi-way { width: var(--g-icon-sm); height: var(--g-icon-sm); fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.rms-qi-warn { display: inline-flex; align-items: center; gap: var(--g-hairline); color: var(--c-warn); }
.rms-qi-warn-svg { width: var(--g-icon-sm); height: var(--g-icon-sm); fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
.rms-qi-warn-n { font-family: var(--t-mono); font-size: var(--t-size-xs); }
.rms-qi-impact { margin-inline: calc(-1 * var(--g-space-2)); padding: var(--g-space-3) var(--g-space-2); border-radius: var(--g-radius-md); background: color-mix(in srgb, var(--c-tone-2) var(--c-mix-wash), var(--c-surface)); }
.rms-qi-acts { display: flex; flex-wrap: wrap; gap: var(--g-space-2); margin: var(--g-space-3) 0 0; }
.rms-qi-impact-head { display: flex; align-items: center; gap: var(--g-space-3); margin-bottom: var(--g-space-3); white-space: nowrap; }
.rms-view .rms-qi-impact-head .rms-qi-title { margin: 0; }
.rms-qi-row { display: grid; min-width: 0; padding: var(--g-space-1) 0; font-size: var(--t-size-sm); white-space: nowrap; }
.rms-qi-row-id { overflow: hidden; text-overflow: ellipsis; font-size: var(--t-size-xs); }
.rms-qi-row-sub { display: flex; align-items: center; gap: var(--g-space-2); min-width: 0; overflow: hidden; color: var(--c-text-muted); font-size: var(--t-size-xs); }
.rms-qi-pane { min-width: 0; }
.rms-qi-via { display: inline-flex; align-items: center; gap: var(--g-hairline); color: var(--c-text-muted); }
.rms-qi-outside { padding: 0 var(--g-space-2); font-size: var(--t-size-sm); }

/* the lanes' names in sight when the line scrolls sideways: moved with it, on the box's ground (ui/timeline.js keepNames) */

/* Who moves an item: under each lifecycle, a row per right with its moves, the roles that hold it and who holds them here. */
.rms-life-who { margin-top: var(--g-space-3); font-size: var(--t-size-sm); }
.rms-life-who-title { padding: 0 0 var(--g-space-2); color: var(--c-text); font-weight: var(--t-weight-semibold); text-align: left; }
.rms-life-who th[scope="row"] { white-space: nowrap; }
.rms-life-who-verb { display: block; color: var(--c-text); font-weight: var(--t-weight-semibold); }
.rms-life-who-cap { display: block; color: var(--c-text-muted); font-family: var(--t-mono); font-size: var(--t-size-xs); font-weight: var(--t-weight-regular); }
.rms-life-who { table-layout: auto; }
.rms-life-who-movelist { display: flex; flex-wrap: wrap; gap: var(--g-space-1) var(--g-space-2); }
.rms-life-who-people { min-width: var(--g-life-people-w); }
.rms-life-who-move { padding: 0 var(--g-space-1); border-radius: var(--g-radius-sm); background: var(--c-elevated); white-space: nowrap; }
.rms-life-who-move.is-usual { background: var(--c-accent-tint); }
.rms-life-who-roles .rms-chip + .rms-chip { margin-left: var(--g-space-1); }
.rms-life-who-none { color: var(--c-warn); }
.rms-life-who-people { color: var(--c-text); }

/* The project map (ui/project_map.js): zones on the sheet, pieces in them, arrows; a pick lights what it touches and dims the rest. */
.rms-pm-body { display: grid; gap: var(--g-space-4); align-items: start; } /* its columns: the stage's (.rms-stage) */
.rms-pm-svg { font-family: var(--t-sans); }
.rms-pm-zone rect { fill: var(--c-elevated); stroke: var(--c-border); stroke-dasharray: 3 3; }
.rms-pm-zone-name { fill: var(--c-text-muted); font-size: var(--t-size-xs); font-weight: var(--t-weight-semibold); }
.rms-pm-piece { --rms-pm-c: var(--c-tone-7); cursor: pointer; transition: opacity var(--g-motion-fast) var(--g-ease); }
.rms-pm-piece.is-person { --rms-pm-c: var(--c-tone-1); }
.rms-pm-piece.is-duty { --rms-pm-c: var(--c-tone-2); }
.rms-pm-piece.is-kind { --rms-pm-c: var(--c-tone-5); }
.rms-pm-piece.is-base { --rms-pm-c: var(--c-view-baseline); }
.rms-pm-piece.is-rules { --rms-pm-c: var(--c-tone-7); }
.rms-pm-piece rect { fill: var(--c-surface); stroke: color-mix(in srgb, var(--rms-pm-c) var(--c-mix-edge), var(--c-border)); stroke-width: 1.25; }
.rms-pm-piece.is-uncarried rect, .rms-pm-piece.is-implicit rect, .rms-pm-piece.is-waiting rect { stroke-dasharray: 4 3; }
.rms-pm-piece.is-uncarried rect { stroke: var(--c-warn); fill: color-mix(in srgb, var(--c-warn) var(--c-tint-soft), var(--c-surface)); }
.rms-pm-name { fill: var(--c-text); font-size: var(--t-size-sm); font-weight: var(--t-weight-semibold); }
.rms-pm-sub { fill: var(--c-text-muted); font-size: var(--t-size-xs); }
.rms-pm-piece:hover rect, .rms-pm-piece:focus-visible rect { stroke: var(--rms-pm-c); stroke-width: 2; }
.rms-pm-piece.is-picked rect { fill: color-mix(in srgb, var(--rms-pm-c) var(--c-mix-chip), var(--c-surface)); stroke: var(--rms-pm-c); stroke-width: 2.5; }
.rms-pm-piece.is-lit rect { stroke: var(--rms-pm-c); stroke-width: 2; }
.rms-pm-svg.is-picking .rms-pm-piece:not(.is-lit) { opacity: 0.28; }
.rms-pm-wire { fill: none; stroke: var(--c-border-strong); stroke-width: 1.25; opacity: 0.7; }
.rms-pm-wire.is-carries { stroke: color-mix(in srgb, var(--c-tone-1) var(--c-mix-edge), var(--c-border-strong)); }
.rms-pm-wire.is-implicit { stroke-dasharray: 4 3; }
.rms-pm-wire.is-reaches { stroke: color-mix(in srgb, var(--c-tone-2) var(--c-mix-edge), var(--c-border-strong)); }
.rms-pm-wire.is-trail { display: none; stroke: var(--c-view-baseline); stroke-dasharray: 2 3; }
.rms-pm-svg.is-picking .rms-pm-wire { opacity: 0.08; }
.rms-pm-svg.is-picking .rms-pm-wire.is-lit { display: inline; opacity: 1; stroke-width: 2.25; }
.rms-pm-panel { position: sticky; top: var(--g-space-3); display: grid; gap: var(--g-space-2); align-content: start; min-height: var(--g-tile-h); padding: var(--g-space-4); border: var(--g-border) solid var(--c-border); border-radius: var(--g-sheet-radius); background: var(--c-elevated); }
.rms-pm-hint { margin: 0; color: var(--c-text-muted); line-height: var(--t-lh-text); }
.rms-pm-panel-kind { margin: 0; color: var(--c-text-muted); font-size: var(--t-size-xs); font-weight: var(--t-weight-semibold); }
.rms-view .rms-pm-panel-title { margin: 0; font-size: var(--t-size-lg); }
.rms-pm-panel-sub { margin: 0; color: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-pm-panel-warn { margin: 0; padding: var(--g-space-2); border-left: var(--g-border-strong) solid var(--c-warn); background: color-mix(in srgb, var(--c-warn) var(--c-tint-soft), var(--c-surface)); color: var(--c-warn); font-size: var(--t-size-sm); }
.rms-pm-facts { display: grid; gap: var(--g-space-1); margin: 0; }
.rms-pm-facts dt { color: var(--c-text-muted); font-size: var(--t-size-xs); font-weight: var(--t-weight-semibold); }
.rms-pm-facts dd { display: flex; flex-wrap: wrap; gap: var(--g-space-1); margin: 0 0 var(--g-space-2); }
.rms-pm-list { display: grid; gap: var(--g-space-2); margin: 0; padding: 0; list-style: none; }
.rms-pm-list-row { display: grid; gap: var(--g-hairline); }
.rms-pm-list-row.is-uncarried span { color: var(--c-warn); }
.rms-ov-figure.is-full .rms-pm-body { flex: 1; min-height: 0; }

/* ===================================================================================================================================
 * The owner's design system "kyr rms" (2026-10-29), which replaces the broadsheet of 2026-10-28: the screen is the board; nothing sits
 * on it but cards and section titles. A screen reads top to bottom: the PageHeader card (crumbs, the one display title, a lede, its
 * actions), then its bands, each a card (sheet, rule, radius-lg, the hairline lift) with its title and one line under it; cards never
 * nest, a recessed area inside one is sunk on radius-md; drawings scroll inside their card, never the page. Later rules here win.
 * =================================================================================================================================*/
.rms-pane-main { background: var(--c-canvas); }
.rms-page {
  --rms-pad: var(--g-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--g-space-6);
  align-self: stretch;
  width: auto;
  margin: 0;
  padding: var(--g-space-6) var(--rms-pad) var(--g-space-8);
  box-sizing: border-box;
  border: 0;
  background: none;
  box-shadow: none;
}
.rms-page > * { margin-inline: 0; }
/* the system's PageHeader: one per screen */
.rms-page > .rms-head:first-child,
.rms-page > div:only-child > .rms-head:first-child {
  margin: 0;
  padding: var(--g-space-6);
  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-page > .rms-head:first-child + * { margin-top: 0; }
.rms-view .rms-head-title { font-family: var(--t-title); font-size: var(--g-title-xl); font-weight: var(--t-weight-semibold); letter-spacing: var(--t-track-display); line-height: var(--t-lh-tight); }
.rms-page[data-tone] > .rms-head .rms-head-title::before,
.rms-explorer[data-tone] .rms-explorer-head .rms-head-title::before { content: none; }
.rms-head-eyebrow { margin: 0 0 var(--g-space-2); color: var(--c-text-muted); font-family: var(--t-sans); font-size: var(--t-size-sm); font-weight: var(--t-weight-medium); line-height: var(--t-lh-small); }
.rms-head-lede { 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-sub { font-size: var(--t-size-md); }

/* the bands: each a card */
.rms-page > .rms-band,
.rms-page .rms-section:not(.rms-section .rms-section, .rms-artifact .rms-section, .rms-docs .rms-section, .rms-trace-landing .rms-section) {
  margin: 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-band { display: flex; flex-direction: column; gap: var(--g-space-4); }
.rms-band-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--g-space-3); }
.rms-view .rms-band-title,
.rms-page .rms-section:not(.rms-section .rms-section) > .rms-section-title { margin: 0; padding: 0; border: 0; font-family: var(--t-title); 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-page .rms-section:not(.rms-section .rms-section) > .rms-section-title { margin-bottom: var(--g-space-3); }
.rms-band-lede { margin: 0; color: var(--c-text-muted); line-height: var(--t-lh-text); }
.rms-band-note { max-width: var(--g-lede); margin: 0; color: var(--c-text-muted); font-size: var(--t-size-sm); line-height: var(--t-lh-text); }
.rms-band-acts { display: flex; gap: var(--g-space-2); }

/* a drawing in a band (the system's Figure): its title, a reading key, the drawing on a recessed ground that scrolls inside the card */
.rms-page > .rms-ov-section > .rms-wide-only > .rms-ov-figure { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.rms-view .rms-ov-figure-title { font-family: var(--t-title); font-size: var(--t-size-xl); font-weight: var(--t-weight-semibold); letter-spacing: var(--t-track-title); }
.rms-ov-scroll { border: 0; border-radius: var(--g-radius-md); background: var(--c-elevated); }

/* cells inside a card: a recessed, rounded grid (cards never nest) */
.rms-cells { border: var(--g-border) solid var(--c-border); border-radius: var(--g-radius-md); background: var(--c-surface); box-shadow: none; overflow: hidden; }
.rms-recap { margin: 0; grid-template-columns: minmax(var(--g-recap-base-w), 1fr) minmax(0, 2fr); }
.rms-recap.is-one { grid-template-columns: minmax(0, 1fr); } /* one column where the project has only one of the two */
.rms-recap-base { background: none; border-right: var(--g-border) solid var(--c-border); }
.rms-recap-label { color: var(--c-text-muted); font-family: var(--t-sans); font-size: var(--t-size-xs); font-weight: var(--t-weight-medium); }
.rms-recap-baseline { font-family: var(--t-mono); }
.rms-recap-glyph { color: var(--c-select-strong); }

/* the windows of a project (the system's card grid): a card each, its icon in the accent on its tint, the name, a line, a row at the
 * foot; the outline darkens under the pointer, nothing rises */

/* chips and verdicts */
.rms-state-chip { display: inline-block; padding: var(--g-pad-chip-y) var(--g-space-2); border-radius: var(--g-radius-sm); background: var(--c-elevated); font: var(--t-weight-medium) var(--t-size-tag) / var(--t-lh-base) var(--t-mono); white-space: nowrap; vertical-align: middle; }
.rms-state-chip.is-ok { background: var(--c-ok-tint); color: var(--c-ok); }
.rms-state-chip.is-next { background: var(--c-selection); color: var(--c-on-select); box-shadow: inset 0 0 0 var(--g-hairline) var(--c-select-strong); }
.rms-state-chip.is-bad { background: var(--c-bad-tint); color: var(--c-err); }
.rms-verdict-line { margin: 0; font-size: var(--t-size-md); line-height: var(--t-lh-base); }
.rms-verdict-line.is-ok { color: var(--c-ok); }
.rms-verdict-line.is-bad { color: var(--c-err); }
.rms-verdict-mark { font-weight: var(--t-weight-semibold); }

/* people: neutral initials, never a personal colour (the system's PersonCard): sunk with a rule ring, the initial in ink */
[data-person="1"], .p-1 { --rms-person: var(--c-tone-1); }
[data-person="2"], .p-2 { --rms-person: var(--c-tone-2); }
[data-person="3"], .p-3 { --rms-person: var(--c-tone-3); }
[data-person="4"], .p-4 { --rms-person: var(--c-tone-4); }
[data-person="5"], .p-5 { --rms-person: var(--c-tone-5); }
[data-person="6"], .p-6 { --rms-person: var(--c-tone-6); }
[data-person="7"], .p-7 { --rms-person: var(--c-tone-7); }
[data-person="8"], .p-8 { --rms-person: var(--c-tone-8); }
.rms-pdot { display: inline-grid; place-items: center; flex: none; width: var(--g-dot); height: var(--g-dot); border-radius: var(--g-round); background: var(--c-elevated); box-shadow: inset 0 0 0 var(--g-hairline) var(--c-frame); color: var(--c-text); font: var(--t-weight-semibold) var(--t-size-xs) / 1 var(--t-sans); }
.rms-pdot.is-big { width: var(--g-dot-lg); height: var(--g-dot-lg); font-size: var(--t-size-sm); }
.rms-people-list { display: grid; gap: var(--g-space-2); margin: 0; padding: 0; list-style: none; }
.rms-person-row { display: grid; grid-template-columns: var(--g-dot-lg) minmax(0, 1fr); align-items: start; gap: var(--g-space-3); }
.rms-person-row-text { display: grid; min-width: 0; }
.rms-person-row-text b { font: var(--t-weight-semibold) var(--t-size-md) / var(--t-lh-base) var(--t-title); }
.rms-person-row-text span { font-family: var(--t-sans); } /* what a person carries, in words (mono is for IDs) */
.rms-person-row-text span { color: var(--c-text-muted); font-size: var(--t-size-sm); }

/* the stage: a drawing on the sunk ground and the side beside it, as the picker's graph and side */
.rms-stage { grid-template-columns: minmax(0, 1.6fr) minmax(var(--g-pm-panel-w), 1fr); gap: 0; border: var(--g-border) solid var(--c-border); }
.rms-stage-graph { border: 0; border-right: var(--g-border) solid var(--c-border); }
.rms-stage-side { position: static; gap: var(--g-space-3); padding: var(--g-space-4) var(--g-space-5); border: 0; border-radius: 0; background: var(--c-surface); }
.rms-side-count { display: flex; align-items: baseline; gap: var(--g-space-3); margin: 0; }
.rms-side-count b { font: var(--t-weight-semibold) var(--g-count) / 1 var(--t-title); font-variant-numeric: tabular-nums; }
.rms-side-count span { max-width: var(--g-side-line); color: var(--c-text-muted); }
.rms-view .rms-side-title { margin: var(--g-space-2) 0 0; font: var(--t-weight-semibold) var(--t-size-lg) var(--t-title); }
.rms-side-asks { display: grid; gap: var(--g-space-1); margin: 0; padding-left: var(--g-space-4); font-size: var(--t-size-md); }
.rms-side-claims { display: grid; gap: var(--g-space-1); }
.rms-legend { display: flex; flex-wrap: wrap; gap: var(--g-space-4); margin: var(--g-space-3) 0 0; color: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-legend i { display: inline-block; width: var(--g-space-5); height: 0; margin-right: var(--g-space-2); vertical-align: middle; border-top: var(--g-border-strong) solid var(--c-text-muted); }
.rms-legend i.is-person { width: var(--g-dot); height: var(--g-dot); border: 0; border-radius: var(--g-round); background: var(--c-elevated); box-shadow: inset 0 0 0 var(--g-hairline) var(--c-frame); }
.rms-legend i.is-duty { width: var(--g-space-4); height: var(--g-space-3); border: var(--g-border) solid var(--c-text-muted); }
.rms-legend i.is-dash { border-top: var(--g-border) dashed var(--c-frame); }
.rms-legend i.is-trail { border-top: var(--g-border-strong) dotted var(--c-view-baseline); }

/* the project map in the chosen page's colours: people as coloured faces, their arrows in their colour */
.rms-pm-zone rect { fill: none; stroke: var(--c-frame); stroke-dasharray: 5 4; }
.rms-pm-zone-name { fill: var(--c-text-muted); font-family: var(--t-title); letter-spacing: var(--g-eyebrow-track); }
.rms-pm-piece rect { fill: var(--c-surface); stroke: var(--c-text-muted); stroke-width: 1.2; rx: var(--g-radius-sm); }
.rms-pm-piece.is-person rect { fill: none; stroke: none; }
.rms-pm-face { fill: var(--c-elevated); stroke: var(--c-frame); stroke-width: 1.2; }
.rms-pm-piece.is-implicit .rms-pm-face { fill: var(--c-surface); stroke: var(--c-frame); stroke-dasharray: 3 2; }
.rms-pm-initial { fill: var(--c-text); font-family: var(--t-sans); font-size: var(--t-size-sm); font-weight: var(--t-weight-semibold); }
.rms-pm-piece.is-implicit .rms-pm-initial { fill: var(--c-text-muted); }
.rms-pm-dot { fill: var(--rms-person, var(--c-text-muted)); }
.rms-pm-name { font-family: var(--t-title); }
.rms-pm-wire.is-carries { stroke: var(--rms-person, var(--c-border-strong)); opacity: 0.55; }
.rms-pm-wire.is-reaches { stroke: var(--c-frame); stroke-dasharray: 4 4; opacity: 0.7; }
.rms-pm-piece.is-picked rect { fill: var(--c-selection); stroke: var(--c-select-strong); stroke-width: 2; }
.rms-pm-piece.is-person.is-picked rect { fill: none; stroke: none; }
.rms-pm-piece.is-person.is-picked .rms-pm-face { stroke: var(--c-select-strong); stroke-width: 3; }
.rms-pm-piece.is-lit rect { stroke: var(--c-accent); }
.rms-pm-piece.is-person.is-lit rect { stroke: none; }
.rms-pm-piece.is-uncarried rect { stroke: var(--c-err); fill: var(--c-bad-tint); }
.rms-pm-svg.is-picking .rms-pm-wire.is-lit { opacity: 1; }
.rms-pm-svg text { paint-order: stroke; stroke: var(--c-elevated); stroke-width: 3; stroke-linejoin: round; }
.rms-pm-zone rect { rx: var(--g-radius-md); }
.rms-pm-svg .rms-pm-initial { stroke: none; }

/* who you need: the four categories as the chosen page's picker */
/* the categories as the system's LevelPicker: option cards, the project's own filled with the selection blue */
.rms-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g-space-3); }
.rms-cat { display: flex; flex-direction: column; gap: var(--g-space-2); padding: var(--g-space-4); border: var(--g-border) solid var(--c-border); border-radius: var(--g-radius-md); background: var(--c-surface); }
.rms-cat:first-child { border-left: var(--g-border) solid var(--c-border); }
.rms-cat b { font: var(--t-weight-semibold) var(--t-size-md) / var(--t-lh-base) var(--t-title); }
.rms-cat .rms-cat-n { color: var(--c-text-muted); font: var(--t-weight-medium) var(--t-size-xs) var(--t-sans); }
.rms-cat span:last-child { color: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-cat.is-this { border-color: var(--c-select-strong); background: var(--c-selection); color: var(--c-on-select); }
.rms-cat.is-this :is(.rms-cat-n, span:last-child) { color: var(--c-on-select); }
.rms-need { display: grid; gap: var(--g-space-4); }
.rms-rules-problem { display: grid; gap: var(--g-space-2); }
.rms-rules-problem-where { margin: 0; font-size: var(--t-size-md); }
.rms-need-stage { display: flex; flex-wrap: wrap; }
.rms-need-graph { flex: 3 1 var(--g-col-narrow); min-width: 0; padding: var(--g-space-2); background: var(--c-elevated); } /* sunk: the tokens' sunk region */
.rms-need-side { display: grid; flex: 2 1 var(--g-pm-panel-w); align-content: start; min-width: 0; }
.rms-need-svg { display: block; width: 100%; height: auto; }
.rms-need-svg text { paint-order: stroke; stroke: var(--c-elevated); stroke-width: 4; stroke-linejoin: round; }
.rms-need-team { fill: none; stroke: var(--c-frame); stroke-dasharray: 7 6; }
.rms-need-zone { fill: var(--c-text-muted); font: var(--t-weight-semibold) var(--t-size-xs) var(--t-title); letter-spacing: var(--g-eyebrow-track); }
.rms-need-pair line { stroke: var(--c-frame); stroke-width: 1.2; stroke-dasharray: 4 5; opacity: 0.55; }
.rms-need-pair.is-asked line { stroke: var(--c-err); stroke-width: 2.4; stroke-dasharray: none; opacity: 0.85; }
.rms-need-pair.is-broken line { stroke-width: 4; opacity: 1; }
.rms-need-cross { fill: var(--c-err); font: var(--t-weight-semibold) var(--t-size-lg) var(--t-title); }
.rms-need-face { fill: var(--c-elevated); stroke: var(--c-frame); stroke-width: 1.5; }
.rms-need-piece.is-idle { opacity: 0.4; }
.rms-need-piece.is-idle .rms-need-face { fill: var(--c-surface); stroke: var(--c-frame); stroke-width: 1.5; stroke-dasharray: 4 4; }
.rms-need-piece.is-unheld .rms-need-face { fill: var(--c-bad-tint); stroke: var(--c-err); stroke-width: 2.5; }
.rms-need-piece.is-outside:not(.is-idle):not(.is-unheld) .rms-need-face { stroke: var(--c-frame); stroke-dasharray: 5 3; }
.rms-need-initial { fill: var(--c-text); font: var(--t-weight-semibold) var(--t-size-md) var(--t-sans); stroke: none !important; }
.rms-need-name { fill: var(--c-text); font: var(--t-weight-semibold) var(--t-size-md) var(--t-title); }
.rms-need-sub { fill: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-need-piece.is-unheld .rms-need-sub { fill: var(--c-err); }
.rms-need-eyebrow { margin: 0; color: var(--c-text-muted); font: var(--t-weight-semibold) var(--t-size-xs) var(--t-title); letter-spacing: var(--g-eyebrow-track); }
.rms-need-declare { display: grid; gap: var(--g-space-2); }
.rms-need-said { margin: 0; color: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-need-problems { display: grid; gap: var(--g-space-2); margin: 0; padding: 0; list-style: none; }
.rms-need-problem { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--g-space-2); }
.rms-need-problem .rms-verdict-line { flex: 1 1 var(--g-side-line); min-width: 0; }
/* V-3: the fix in place of the link: a grant (who, which role, the button), or a broken pair's two sides to take back */
.rms-need-fix { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-1); }
.rms-need-fix .rms-input { width: auto; max-width: var(--g-col-narrow); }
.rms-legend i.is-apart { border-top: var(--g-border-strong) solid var(--c-err); }


/* the other screens' sheets and cards speak the same: rounded cards on the board, the hairline lift */
.rms-reviews-col, .rms-trace-start, .rms-trace-path, .rms-docs-drawer, .rms-artifact-sheet,
.rms-reviews-col, .rms-docs-drawer, .rms-cmp-item, .rms-trace-start, .rms-trace-path { border-color: var(--c-border); }
.rms-trace-start { background: var(--c-accent-tint); border-top: var(--g-border) solid var(--c-border); }
.rms-artifact-page .rms-artifact-sheet { padding: 0; border: 0; background: none; }
/* A page filled after its read (views/common.js fill) holds one wrapper: the wrapper takes the whole sheet, its head the first band. */
.rms-page > div:only-child { display: flex; flex-direction: column; gap: var(--g-space-6); margin-inline: 0; }
.rms-page > div:only-child > * { margin-inline: 0; }

/* A section inside a page's own wrapper (a fill box) is a card as any band is. */

/* ===================================================================================================================================
 * The system (docs/VIEWS_PLAN.md, step 1): the lens switch over every lens's screen. The switch is the system's TabBar, under the view
 * picker that chooses the moment; a lens not drawn yet stays in its place, greyed, its need in one line under its name. Under the tabs,
 * the lens in a line and what it offers the person: a may plain, a greyed one with its why.
 * =================================================================================================================================*/
.rms-lensed { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.rms-lensed > .rms-page { flex: 1 1 auto; }
.rms-lensbar { display: flex; flex-direction: column; gap: var(--g-space-2); padding: var(--g-space-3) var(--g-space-6) 0; }
.rms-lensbar-tabs { margin: 0; }
.rms-lens { display: inline-flex; flex-direction: column; justify-content: center; gap: 0; text-decoration: none; }
a.rms-lens.is-on { background: var(--c-selection); color: var(--c-on-select); }
.rms-lens.is-next { color: var(--c-text-muted); cursor: default; }
.rms-lens.is-next:hover { background: transparent; color: var(--c-text-muted); }
.rms-lens-needs { font-size: var(--t-size-xs, var(--t-size-sm)); font-weight: var(--t-weight-regular, 400); white-space: nowrap; }
.rms-lensbar-about { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--g-space-2) var(--g-space-4); }
.rms-lensbar-structure { margin: 0; color: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-lensbar-structure b { color: var(--c-text); }
.rms-lensbar-acts { display: flex; flex-wrap: wrap; gap: var(--g-space-2); margin: 0; padding: 0; list-style: none; }
.rms-lens-act { display: inline-flex; align-items: baseline; gap: var(--g-space-1); padding: 0 var(--g-space-2); border: var(--g-border) solid var(--c-border);
  border-radius: var(--g-radius-sm); font-size: var(--t-size-sm); }
.rms-lens-act.is-may { border-color: var(--c-ok); color: var(--c-text); background: var(--c-ok-tint); }
.rms-lens-act.is-frozen, .rms-lens-act.is-lacking { color: var(--c-text-muted); background: var(--c-surface); }
.rms-lens-why { color: var(--c-text-muted); }
.rms-lens-why::before { content: "· "; }

/* The customer chain of a project (views/system.js): its own names, so the path's chain of cards (ui/chain.js) keeps its own row. */
.rms-pchain { margin: 0; padding-left: var(--g-space-5); display: flex; flex-direction: column; gap: var(--g-space-1); }
.rms-pchain-node.is-here b { color: var(--c-accent); font-family: var(--t-mono); }
.rms-pchain-node a { font-family: var(--t-mono); }
.rms-pchain-under { list-style: none; }
.rms-pchain-under ul { margin: 0; padding-left: var(--g-space-5); }

/* The grant dialog (members.js): the person picked by name or email from those one may name, their uid only behind "not in the list";
 * the project's roles as boxes. */
.rms-grant { display: grid; gap: var(--g-space-4); }
.rms-grant-who { display: grid; gap: var(--g-space-2); }
.rms-grant-matches { display: grid; max-height: var(--g-grant-list-h); margin: 0; padding: 0; overflow: auto; list-style: none; border: var(--g-border) solid var(--c-border); border-radius: var(--g-radius-md); }
.rms-grant-matches > li.rms-cell-muted { padding: var(--g-space-2) var(--g-space-3); }
.rms-grant-match { display: flex; width: 100%; padding: var(--g-space-2) var(--g-space-3); border: 0; border-bottom: var(--g-border) solid var(--c-border); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.rms-grant-match:hover, .rms-grant-match:focus-visible { background: var(--c-hover); }
.rms-grant-person { display: flex; align-items: center; gap: var(--g-space-3); min-width: 0; }
.rms-grant-names { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--g-space-2); min-width: 0; }
.rms-grant-picked { display: flex; align-items: center; justify-content: space-between; gap: var(--g-space-3); padding: var(--g-space-2) var(--g-space-3); border: var(--g-border) solid var(--c-border-strong); border-radius: var(--g-radius-md); background: var(--c-elevated); }
.rms-grant-fallback summary { color: var(--c-text-muted); font-size: var(--t-size-sm); cursor: pointer; }
.rms-grant-fallback .rms-input { margin-top: var(--g-space-2); }
.rms-grant-roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--g-grant-role-w), 1fr)); gap: var(--g-space-1) var(--g-space-3); margin: 0; padding: 0; border: 0; }
.rms-grant-roles legend { margin-bottom: var(--g-space-2); padding: 0; font-weight: var(--t-weight-semibold); }
.rms-grant-role { display: flex; align-items: center; gap: var(--g-space-2); cursor: pointer; }

/* A role's tone (core/people.js ROLE_TONE; the owner, 2026-10-30): the part of the organisation it staffs, on its chip, its function's
 * heading, its column of the rules' grid and its box in the grant dialog; a role no table names stays in ink. */
[data-fn="management"] { --fn: var(--c-fn-management); --fn-tint: var(--c-fn-management-tint); }
[data-fn="engineering"] { --fn: var(--c-fn-engineering); --fn-tint: var(--c-fn-engineering-tint); }
[data-fn="configuration"] { --fn: var(--c-fn-configuration); --fn-tint: var(--c-fn-configuration-tint); }
[data-fn="review"] { --fn: var(--c-fn-review); --fn-tint: var(--c-fn-review-tint); }
[data-fn="assurance"] { --fn: var(--c-fn-assurance); --fn-tint: var(--c-fn-assurance-tint); }
[data-fn="customer"] { --fn: var(--c-fn-customer); --fn-tint: var(--c-fn-customer-tint); }
[data-fn="isvv"] { --fn: var(--c-fn-isvv); --fn-tint: var(--c-fn-isvv-tint); }
.rms-fn-swatch { display: inline-block; flex: none; width: var(--g-rules-dot); height: var(--g-rules-dot); margin-right: var(--g-space-2); border-radius: var(--g-radius-sm); background: var(--fn, var(--c-text-muted)); vertical-align: baseline; }
.rms-chip[data-fn]:not([data-fn="none"]) { border-color: var(--fn); background: var(--fn-tint); color: var(--c-text); }
.rms-people-fn[data-fn] { display: inline-flex; align-items: center; }
.rms-rules-role[data-fn]:not([data-fn="none"]) { box-shadow: inset 0 calc(-1 * var(--g-border-frame)) 0 var(--fn); }
.rms-rules-cell[data-fn] .rms-rules-dot { background: var(--fn, var(--c-text)); }
.rms-rules-cell[data-fn] .rms-rules-toggle[aria-pressed="false"] .rms-rules-dot { background: transparent; }
.rms-grant-role[data-fn] { padding-left: var(--g-space-2); border-left: var(--g-border-frame) solid var(--fn, var(--c-border)); }

/* ==================================================================================================================================
 * The one frame (the owner's approval of 2026-10-31, _notes/plans/rms_one_system.html §1: "why you do not remove that bubble around the
 * things?"). A screen's head is one line on the canvas, a hairline under it: its title, one muted line, its actions with the primary
 * last, its words behind ?. What a screen holds sits flush on the canvas, a section a title over a hairline, never a card; only what
 * floats (menus, popovers, the inspector, dialogs) and what is a table keeps a surface of its own. Later rules here win.
 * =================================================================================================================================*/
.rms-page { gap: var(--g-space-5); padding-top: var(--g-space-4); }
.rms-page > .rms-head:first-child,
.rms-page > div:only-child > .rms-head:first-child {
  padding: 0 0 var(--g-space-3);
  border: 0;
  border-bottom: var(--g-border) solid var(--c-border);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.rms-view .rms-head-title { font-size: var(--t-size-xl); letter-spacing: var(--t-track-title); }
.rms-head-sub, .rms-head-lede { margin-top: var(--g-hairline); font-size: var(--t-size-sm); }
.rms-page > .rms-band,
.rms-page .rms-section:not(.rms-section .rms-section, .rms-artifact .rms-section, .rms-docs .rms-section, .rms-trace-landing .rms-section) {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.rms-reviews-col, .rms-docs-drawer, .rms-cmp-item, .rms-trace-start, .rms-trace-path {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.rms-reviews-col-head { background: var(--c-canvas); } /* the column flush on the board: its sticky head on the board's ground */
.rms-cells, .rms-recap { border: 0; border-block: var(--g-border) solid var(--c-border); border-radius: 0; background: none; box-shadow: none; }

/* Items' filters (items_bar.js itemsFilters), in the frame's side pane as the drive's folder tree is: a group title, rows with the name on
 * the left and its count on the right, the one chosen lit, the way back to every item at the end. */
.rms-items-filters { display: flex; flex-direction: column; gap: var(--g-space-1); padding: var(--g-space-2) var(--g-space-3) var(--g-space-4); }
.rms-items-filters-title { margin: var(--g-space-3) 0 var(--g-space-1); padding: 0 var(--g-space-2); color: var(--c-text-muted); font-family: var(--t-sans); font-size: var(--t-size-xs); font-weight: var(--t-weight-semibold); letter-spacing: var(--t-track-title); }
.rms-items-filter-list { display: grid; gap: var(--g-hairline); margin: 0; padding: 0; list-style: none; }
.rms-items-filter { display: flex; align-items: baseline; justify-content: space-between; gap: var(--g-space-2); width: 100%; padding: var(--g-space-1) var(--g-space-2); border: 0; border-radius: var(--g-radius-sm); background: transparent; color: var(--c-text); font: inherit; font-size: var(--t-size-sm); text-align: left; cursor: pointer; }
.rms-items-filter:hover { background: var(--c-hover); }
.rms-items-filter.is-on { background: var(--c-selection); color: var(--c-on-select); font-weight: var(--t-weight-medium); }
.rms-items-filter-name { min-width: 0; }
.rms-items-filter-n { flex: none; color: var(--c-text-muted); font-family: var(--t-mono); font-size: var(--t-size-xs); font-variant-numeric: tabular-nums; }
.rms-items-filter.is-on .rms-items-filter-n { color: inherit; }
.rms-items-filters > .rms-btn { align-self: flex-start; margin-top: var(--g-space-3); }
.rms-items-q { flex: 0 1 var(--g-find-w); min-width: var(--g-find-min); } /* it narrows before the bar wraps */

/* The V's arms on the map's column heads (core/map.js PRESETS `v`): ↘ the specification, ↗ the verification. */
.rms-map-head-arm { font-weight: var(--t-weight-semibold); }
.rms-map-head-arm.is-spec { color: var(--c-accent); }
.rms-map-head-arm.is-verif { color: var(--c-ok); }
.rms-map-settings-group { display: grid; gap: var(--g-space-1); margin: 0 0 var(--g-space-2); padding: 0; border: 0; }
.rms-map-settings-group legend { margin-bottom: var(--g-space-1); padding: 0; color: var(--c-text-muted); font-size: var(--t-size-xs); font-weight: var(--t-weight-semibold); }

/* The V over the map (ui/vee.js): the specification's levels down the left arm, the verification up the right, facing levels joined. */
.rms-vee { margin: 0 0 var(--g-space-3); }
.rms-vee-svg { display: block; width: 100%; max-width: var(--g-vee-max-w); height: auto; }
.rms-vee-arm { fill: none; stroke: var(--c-border-strong); stroke-width: var(--g-border-frame); stroke-linejoin: round; }
.rms-vee-level rect { fill: var(--c-surface); stroke: var(--c-border-strong); stroke-width: var(--g-border); }
.rms-vee-level.is-spec rect { stroke: var(--c-accent); }
.rms-vee-level.is-verif rect { stroke: var(--c-ok); }
.rms-vee-level.is-empty { opacity: 0.5; }
.rms-vee-level { cursor: pointer; }
.rms-vee-level:hover rect, .rms-vee-level:focus-visible rect { fill: var(--c-hover); }
.rms-vee-level:focus-visible { outline: none; }
.rms-vee-level:focus-visible rect { stroke-width: var(--g-focus-ring); }
.rms-vee-name { fill: var(--c-text); font-family: var(--t-sans); font-size: var(--t-size-sm); font-weight: var(--t-weight-semibold); }
.rms-vee-sub { fill: var(--c-text-muted); font-family: var(--t-mono); font-size: var(--t-size-xs); }
.rms-vee-face line { stroke-width: var(--g-border-strong); stroke-dasharray: 6 4; }
.rms-vee-face.is-ok line { stroke: var(--c-ok); }
.rms-vee-face.is-open line { stroke: var(--c-warn); }
/* a line's words, as every drawing's (trace, Structure): the label size, the mono face, the muted ink */
.rms-vee-proof { fill: var(--c-text-muted); font-family: var(--t-mono); font-size: var(--t-size-xs); }
.rms-vee-caption { display: flex; flex-wrap: wrap; gap: var(--g-space-1) var(--g-space-4); font-size: var(--t-size-sm); }
.rms-vee-arm-name.is-spec { color: var(--c-accent); }
.rms-vee-arm-name.is-verif { color: var(--c-ok); }
.rms-view .rms-reviews-trace { border-color: transparent; background: none; } /* the trace of a row: an icon, its name on hover */
.rms-view .rms-reviews-trace:hover { background: var(--c-hover); }

/* The family of projects on one map (ui/family.js): boxes in the Overview's language, the customer wire from parent to child, the
 * interfaces on it coloured by state; a cross-project interface dashed under the boxes. */
.rms-family { display: grid; min-width: 0; } /* the map never wider than its sheet: the drawing zooms inside its window */
.rms-family-svg { font-family: var(--t-sans); }
.rms-family-svg .rms-family-box { fill: var(--c-surface); stroke: var(--c-border-strong); stroke-width: var(--g-border); }
.rms-family-svg text:not(.rms-family-label) { stroke: none; } /* a word is ink only, no outline inherited from around it (a wire's words keep their halo) */
.rms-family-band { fill: var(--c-accent); }
.rms-family-key { fill: var(--c-accent); font-family: var(--t-mono); font-size: var(--t-size-sm); font-weight: var(--t-weight-semibold); }
.rms-family-rules { fill: var(--c-text-muted); font-size: var(--t-size-xs); font-weight: var(--t-weight-medium); }
.rms-family-name { fill: var(--c-text); font-size: var(--t-size-sm); font-weight: var(--t-weight-semibold); }
.rms-family-fact { fill: var(--c-text); font-size: var(--t-size-sm); } /* the facts in the ink at the small size, not muted and tiny: a box never reads as off */
/* far (under FAMILY.FAR): the key, the name and the state in larger words; near, every fact; the one fades into the other */
.rms-family-near, .rms-family-far { transition: opacity var(--g-motion-fast) var(--g-ease); }
.rms-family-svg .rms-family-far, .rms-family-svg.is-far .rms-family-near { opacity: 0; pointer-events: none; }
.rms-family-svg.is-far .rms-family-far { opacity: 1; pointer-events: auto; }
.rms-family-far-key { fill: var(--c-accent); font-family: var(--t-mono); font-size: var(--g-family-far-key); font-weight: var(--t-weight-semibold); }
.rms-family-far-name { fill: var(--c-text); font-size: var(--g-family-far-name); font-weight: var(--t-weight-semibold); }
.rms-family-far-state { fill: var(--c-text); font-size: var(--g-family-far-state); font-weight: var(--t-weight-semibold); }
.rms-family-far-state.is-ok { fill: var(--c-ok); }
.rms-family-far-state.is-open { fill: var(--c-warn); }
.rms-family-valid { font-size: var(--t-size-xs); font-weight: var(--t-weight-semibold); }
.rms-family-valid.is-ok { fill: var(--c-ok); }
.rms-family-valid.is-open { fill: var(--c-warn); }
.rms-family-dot { fill: var(--fn, var(--c-text-muted)); }
.rms-family-node.is-here .rms-family-box { fill: var(--c-selection); stroke: var(--c-select-strong); }
.rms-family-node.is-retired .rms-family-box { fill: var(--c-elevated); stroke-dasharray: var(--g-map-dash); }
a.rms-family-node:hover .rms-family-box, a.rms-family-node:focus-visible .rms-family-box { stroke: var(--c-focus); stroke-width: var(--g-border-strong); }
.rms-family-wire, .rms-family-label { --rms-wire-c: var(--c-border-strong); }
.rms-family-wire[data-state="current"], .rms-family-label[data-state="current"], .rms-family-key-item[data-state="current"] { --rms-wire-c: var(--c-ok); }
.rms-family-wire[data-state="accepted"], .rms-family-label[data-state="accepted"] { --rms-wire-c: var(--c-life-controlled); }
.rms-family-wire[data-state="behind"], .rms-family-label[data-state="behind"], .rms-family-key-item[data-state="behind"] { --rms-wire-c: var(--c-warn); }
.rms-family-wire[data-state="waiting"], .rms-family-label[data-state="waiting"], .rms-family-key-item[data-state="waiting"] { --rms-wire-c: var(--c-life-review); }
.rms-family-line { fill: none; stroke: var(--rms-wire-c); stroke-width: var(--g-map-wire); }
.rms-family-wire:not([data-state="none"]) .rms-family-line { stroke-width: var(--g-border-frame); }
.rms-family-wire.is-cross .rms-family-line { stroke-dasharray: var(--g-map-dash); }
.rms-family-label { fill: var(--rms-wire-c); font-family: var(--t-mono); font-size: var(--t-size-xs); paint-order: stroke; stroke: var(--c-elevated); stroke-width: var(--g-halo); stroke-linejoin: round; }
.rms-family-label.rms-family-far-label { font-size: var(--g-family-far-label); font-weight: var(--t-weight-semibold); }
.rms-family-label.is-quiet { fill: var(--c-text-muted); }
/* 0.76.0: an input's words say what it brings (core/brought.js wireOf): red something not met, amber something not checked yet, green all met */
.rms-family-label[data-state="not_met"] { --rms-wire-c: var(--c-err); }
.rms-family-label[data-state="unchecked"] { --rms-wire-c: var(--c-warn); }
.rms-family-label[data-state="met"] { --rms-wire-c: var(--c-ok); }
.rms-family-legend { display: flex; flex-wrap: wrap; gap: var(--g-space-1) var(--g-space-4); margin: var(--g-space-2) var(--g-space-3) var(--g-space-3); color: var(--c-text-muted); font-size: var(--t-size-xs); }
.rms-family-key-item { display: inline-flex; align-items: center; gap: var(--g-space-1); }
.rms-family-swatch { display: inline-block; width: var(--g-space-5); height: var(--g-border-frame); background: var(--rms-wire-c); }
.rms-family-ifaces { margin-top: var(--g-space-2); }
.rms-family-state { font-weight: var(--t-weight-semibold); }
.rms-family-state[data-state="current"] { color: var(--c-ok); }
.rms-family-state[data-state="behind"] { color: var(--c-warn); }
.rms-family-state[data-state="waiting"] { color: var(--c-text-muted); }
.rms-family-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--g-space-3); } /* a wide drawing never widens the page */

/* People across projects (ui/crowd.js): cards, the traced lines, the projects with their people inside. A person's badge is neutral;
 * a role's tone colours its chip and its line (colour is kept for meaning). */
.rms-people-views { flex-wrap: wrap; }
.rms-crowd-badge { display: inline-grid; place-items: center; flex: none; width: var(--g-space-7); height: var(--g-space-7); border: var(--g-border) solid var(--c-border-strong); border-radius: var(--g-radius-pill); background: var(--c-elevated); color: var(--c-text); font-family: var(--t-mono); font-size: var(--t-size-xs); font-weight: var(--t-weight-semibold); }
.rms-crowd-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--g-crowd-card-w), 1fr)); gap: var(--g-space-3); margin: 0; padding: 0; list-style: none; }
.rms-crowd-card { display: grid; gap: var(--g-space-2); align-content: start; padding: var(--g-space-3); border: var(--g-border) solid var(--c-border); border-radius: var(--g-sheet-radius); background: var(--c-surface); }
.rms-crowd-who { display: flex; align-items: center; gap: var(--g-space-2); min-width: 0; }
.rms-crowd-names { display: grid; min-width: 0; }
.rms-crowd-name { font-weight: var(--t-weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rms-crowd-mail { color: var(--c-text-muted); font-size: var(--t-size-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rms-crowd-in { display: grid; gap: var(--g-space-1); margin: 0; padding: var(--g-space-2) 0 0; border-top: var(--g-border) solid var(--c-border); list-style: none; }
.rms-crowd-in-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--g-space-1) var(--g-space-2); }
.rms-crowd-in-row.is-here .rms-crowd-key { text-decoration: underline; }
.rms-crowd-key { font-family: var(--t-mono); font-size: var(--t-size-sm); font-weight: var(--t-weight-semibold); }
.rms-crowd-roles { display: flex; flex-wrap: wrap; gap: var(--g-space-1); }
/* the two heads in one strip at the top of the box while it scrolls, on its ground; each over its column (--x from the drawing) */
.rms-crowd-rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--g-crowd-room-w), 1fr)); gap: var(--g-space-3); margin: 0; padding: 0; list-style: none; }
.rms-crowd-room { display: grid; align-content: start; 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); }
.rms-crowd-room.is-here { background: var(--c-selection); }
.rms-crowd-room-head { display: flex; align-items: baseline; gap: var(--g-space-2); padding: var(--g-space-3) var(--g-space-3) var(--g-space-2); border-bottom: var(--g-border) solid var(--c-border); }
.rms-crowd-room-name { flex: 1; min-width: 0; overflow: hidden; color: var(--c-text-muted); font-size: var(--t-size-sm); text-overflow: ellipsis; white-space: nowrap; }
.rms-crowd-room-count { color: var(--c-text-muted); font-family: var(--t-mono); font-size: var(--t-size-xs); }
.rms-crowd-room-body { display: grid; gap: var(--g-space-2); padding: var(--g-space-3); }
.rms-crowd-group { display: grid; gap: var(--g-space-1); padding-left: var(--g-space-2); border-left: var(--g-border-frame) solid var(--fn, var(--c-border)); }
.rms-crowd-group-word { color: var(--c-text-muted); font-size: var(--t-size-xs); font-weight: var(--t-weight-semibold); }
.rms-crowd-faces { display: flex; flex-wrap: wrap; gap: var(--g-space-1) var(--g-space-3); margin: 0; padding: 0; list-style: none; }
.rms-crowd-face { display: inline-flex; align-items: center; gap: var(--g-space-1); font-size: var(--t-size-sm); }
/* Motion (the owner, 7 Nov: "more graphical, interactive, with smoother movement when possible helps the brain to keep up. but not too
 * much to slow down"): a change the eye should follow moves, opacity and transform only (composited), in the shared tokens' times
 * (--g-motion-fast 150 ms, --g-motion-base 200 ms, --g-ease; 0 under prefers-reduced-motion), once per change: a keyframe runs one
 * iteration as its element appears, a transition only when a state changes; nothing runs while the page is idle. */
@keyframes rms-arrive { from { opacity: 0; transform: translateY(var(--g-space-1)); } }
@keyframes rms-appear { from { opacity: 0; } }
@keyframes rms-meter-in { from { transform: translateX(-100%); } }
@keyframes rms-span-in { from { transform: translateX(var(--lo)) scaleX(0); } }
@keyframes rms-at-in { from { transform: translateX(0); } }
/* People -> projects <- customers and suppliers (ui/people_map.js, 7 Nov): the map as wide as its box and as tall as the window leaves it,
 * its three heads in sight while it scrolls; each arrow and chip in its role's colour (the mark's), never colour alone (the chip names it);
 * what a focus does not reach keeps its words in the muted ink, its lines quiet. */
.rms-pmap-slot { min-width: 0; }
.rms-pmap { display: grid; gap: var(--g-space-2); min-width: 0; }
.rms-pmap-scroll { overflow: auto; max-block-size: var(--g-pmap-max-h); border: var(--g-border) solid var(--c-border-strong); border-radius: var(--g-radius-md); background: var(--c-elevated); }
.is-full .rms-pmap-scroll { max-block-size: none; }
.rms-pmap-svg { display: block; }
.rms-pmap-svg.is-arriving { animation: rms-arrive var(--g-motion-base) var(--g-ease) both; }
.rms-pmap-heads { position: sticky; top: 0; z-index: var(--g-z-sticky); width: var(--w); height: var(--h); border-bottom: var(--g-border) solid var(--c-border); background: var(--c-elevated); }
.rms-pmap-heads > .rms-pmap-head { position: absolute; bottom: var(--g-space-1); left: var(--x); color: var(--c-text-muted); font-size: var(--t-size-xs); font-weight: var(--t-weight-semibold); white-space: nowrap; }
.rms-pmap-person-box { fill: var(--c-surface); stroke: var(--c-border-strong); stroke-width: var(--g-border); }
.rms-pmap-person-name { fill: var(--c-text); font-size: var(--t-size-sm); font-weight: var(--t-weight-semibold); }
.rms-pmap-person-sub { fill: var(--c-text-muted); font-size: var(--t-size-xs); }
.rms-pmap-chip-box { fill: var(--c-surface); stroke: var(--rms-role-c, var(--c-border-strong)); stroke-width: var(--g-border); }
.rms-pmap-chip-word { fill: var(--c-text); font-size: var(--t-size-xs); }
.rms-pmap-chip-count, .rms-pmap-project-count { fill: var(--c-text-muted); font-family: var(--t-mono); font-size: var(--t-size-xs); }
.rms-pmap-project-box { fill: var(--c-surface); stroke: var(--c-border-strong); stroke-width: var(--g-border); }
.rms-pmap-project-key { fill: var(--c-accent); font-family: var(--t-mono); font-size: var(--t-size-sm); font-weight: var(--t-weight-semibold); }
.rms-pmap-project-name { fill: var(--c-text-muted); font-family: var(--t-sans); font-size: var(--t-size-xs); font-weight: var(--t-weight-regular); }
.rms-pmap-guide { fill: none; stroke: var(--c-border-strong); stroke-width: var(--g-border); }
.rms-pmap-level path { fill: var(--rms-level-tint, var(--c-elevated)); stroke: var(--rms-level-c, var(--c-text-muted)); stroke-width: var(--g-border-frame); }
.rms-pmap-level[data-level="customer"] { --rms-level-c: var(--c-fn-customer); --rms-level-tint: var(--c-fn-customer-tint); }
.rms-pmap-level[data-level="system"] { --rms-level-c: var(--c-fn-management); --rms-level-tint: var(--c-fn-management-tint); }
.rms-pmap-level[data-level="component"] { --rms-level-c: var(--c-fn-engineering); --rms-level-tint: var(--c-fn-engineering-tint); }
.rms-pmap-level[data-level="alone"] { --rms-level-c: var(--c-fn-isvv); --rms-level-tint: var(--c-fn-isvv-tint); }
.rms-pmap-edge { fill: none; stroke: var(--rms-role-c, var(--c-border-strong)); stroke-width: var(--g-map-wire); opacity: var(--g-crowd-wire-rest); transition: opacity var(--g-motion-base) var(--g-ease); }
.rms-pmap-arrow path { fill: var(--c-text-muted); fill: context-stroke; }
.rms-pmap-rel-line { fill: none; stroke: var(--c-role-customer); stroke-width: var(--g-map-wire-lit); }
.rms-pmap-rel-word { fill: var(--c-text-muted); font-size: var(--t-size-xs); }
.rms-pmap-detail { margin: 0; color: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-pmap-none { fill: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-pmap-chip, .rms-pmap-person, .rms-pmap-project, .rms-pmap-rel, .rms-pmap-edge { cursor: pointer; }
.rms-pmap-chip:focus-visible .rms-pmap-chip-box, .rms-pmap-person:focus-visible .rms-pmap-person-box, .rms-pmap-project:focus-visible .rms-pmap-project-box { stroke: var(--c-focus); stroke-width: var(--g-border-frame); }
.rms-pmap-svg.is-dense .rms-pmap-edge { opacity: var(--g-pmap-wire-dense); }
.rms-pmap-svg.is-lit .rms-pmap-edge { opacity: var(--g-crowd-wire-dim); }
.rms-pmap-svg.is-lit .rms-pmap-edge.is-on { opacity: 1; stroke-width: var(--g-map-wire-lit); }
.rms-pmap-svg.is-lit :is(.rms-pmap-chip, .rms-pmap-person, .rms-pmap-project):not(.is-on) :is(.rms-pmap-chip-word, .rms-pmap-person-name, .rms-pmap-project-key) { fill: var(--c-text-muted); }
.rms-pmap-svg.is-lit .rms-pmap-rel:not(.is-on) .rms-pmap-rel-line { stroke: var(--c-border-strong); }
:is(.rms-pmap-chip, .rms-pmap-person, .rms-pmap-project).is-on :is(.rms-pmap-chip-box, .rms-pmap-person-box, .rms-pmap-project-box), .rms-pmap-project.is-here .rms-pmap-project-box { fill: var(--c-selection); stroke: var(--c-select-strong); }
.rms-pmap-mark[data-mark="person"] .rms-role-person { stroke: var(--c-role-person); }
.rms-pmap [data-mark="person"] { --rms-role-c: var(--c-role-person); }
.rms-pmap [data-mark="author"] { --rms-role-c: var(--c-role-author); }
.rms-pmap [data-mark="reviewer"] { --rms-role-c: var(--c-role-reviewer); }
.rms-pmap [data-mark="approver"] { --rms-role-c: var(--c-role-approver); }
.rms-pmap [data-mark="freezer"] { --rms-role-c: var(--c-role-freezer); }
.rms-pmap [data-mark="admin"] { --rms-role-c: var(--c-role-admin); }
.rms-pmap [data-mark="owner"] { --rms-role-c: var(--c-role-owner); }
.rms-pmap [data-mark="customer"] { --rms-role-c: var(--c-role-customer); }
.rms-pmap [data-mark="supplier"] { --rms-role-c: var(--c-role-supplier); }
.rms-pmap [data-mark="verifier"] { --rms-role-c: var(--c-role-verifier); }
.rms-pmap [data-mark="assurance"] { --rms-role-c: var(--c-role-assurance); }
.rms-pmap [data-mark="safety"] { --rms-role-c: var(--c-role-safety); }
/* RMS health (views/health.js, ui/health_charts.js, 7 Nov): one wide sheet in bands; the informative line first; the charts' marks in the two
 * series' colours (control, work), their words in the text's ink; a meter's track the hairline, its fill the accent. */
.rms-health { display: flex; flex-direction: column; gap: var(--g-space-5); min-width: 0; }
.rms-health-body { display: flex; flex-direction: column; gap: var(--g-space-6); min-width: 0; animation: rms-arrive var(--g-motion-base) var(--g-ease) both; }
.rms-health-informative { margin: 0; color: var(--c-text-muted); line-height: var(--t-lh-text); }
.rms-health-informative-mark { color: var(--c-accent); }
.rms-health-ranges { display: flex; flex-wrap: wrap; gap: var(--g-space-1) var(--g-space-5); margin: 0; color: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-health-range b { color: var(--c-text); font-weight: var(--t-weight-semibold); }
.rms-health-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--g-health-chart-min), 1fr)); gap: var(--g-space-4); }
.rms-health-chart { min-width: 0; }
.rms-health-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--g-health-chart-min), 1fr)); gap: var(--g-space-6); }
.rms-health-twin summary { color: var(--c-link); cursor: pointer; font-size: var(--t-size-sm); }
.rms-health-twin[open] summary { margin-bottom: var(--g-space-2); }
.rms-health-twin[open] > .rms-table-box { animation: rms-appear var(--g-motion-fast) var(--g-ease) both; }
.rms-health-table .rms-health-key a { font-weight: var(--t-weight-semibold); }
.rms-health-table tr[data-depth="1"] .rms-health-key { padding-left: var(--g-space-4); }
.rms-health-table tr[data-depth="2"] .rms-health-key, .rms-health-table tr[data-depth="3"] .rms-health-key { padding-left: var(--g-space-6); }
.rms-health-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rms-health-num.is-look { color: var(--c-warn); }
.rms-health-cell { white-space: nowrap; }
.rms-health-v { display: inline-block; min-width: var(--g-space-7); margin-right: var(--g-space-1); font-variant-numeric: tabular-nums; }
.rms-health-defs { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--g-space-3) var(--g-space-5); margin: 0; }
.rms-health-defs dt { font-weight: var(--t-weight-semibold); white-space: nowrap; }
.rms-health-defs dd { display: grid; gap: var(--g-space-1); margin: 0; }
.rms-health-defs p { margin: 0; line-height: var(--t-lh-text); }
.rms-health-formula code { font-family: var(--t-mono); font-size: var(--t-size-sm); }
.rms-health-source { color: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-hc-meter { position: relative; display: inline-block; width: var(--g-hc-meter-w); height: var(--g-hc-meter-h); overflow: hidden; vertical-align: middle; border-radius: var(--g-radius-pill); background: var(--c-border); }
.rms-hc-meter-fill { position: absolute; inset: 0; border-radius: var(--g-radius-pill); background: var(--c-accent); transform: translateX(var(--v-off)); animation: rms-meter-in var(--g-motion-base) var(--g-ease) both; }
.rms-hc-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-1) var(--g-space-4); color: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-hc-key { display: inline-flex; align-items: center; gap: var(--g-space-1); white-space: nowrap; }
.rms-hc-key::before { content: ""; width: var(--g-hc-dot); height: var(--g-hc-dot); border-radius: var(--g-radius-pill); background: var(--c-text-muted); }
.rms-hc-key.is-a::before, .rms-hc-key.is-control::before { background: var(--c-chart-control); }
.rms-hc-key.is-b::before, .rms-hc-key.is-work::before { background: var(--c-chart-work); }
.rms-hc-key.is-share::before { background: var(--c-accent); }
.rms-hc-scale { margin-left: auto; }
.rms-hc-dumbbell { display: grid; gap: var(--g-space-2); min-width: 0; }
.rms-hc-rows { display: grid; gap: var(--g-space-1); margin: 0; padding: 0; list-style: none; }
.rms-hc-row { display: grid; grid-template-columns: var(--g-hc-label-w) minmax(0, 1fr) max-content; align-items: center; gap: var(--g-space-3); min-height: var(--g-hc-row-h); }
.rms-hc-row-label { overflow: hidden; font-size: var(--t-size-sm); text-overflow: ellipsis; white-space: nowrap; }
.rms-hc-row-label.is-key { font-family: var(--t-mono); }
.rms-hc-row-values { color: var(--c-text-muted); font-size: var(--t-size-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rms-hc-track { position: relative; height: var(--g-hc-row-h); border-left: var(--g-border) solid var(--c-border-strong); }
.rms-hc-track::before { content: ""; position: absolute; inset: var(--g-half) 0 auto 0; border-top: var(--g-border) solid var(--c-border); }
.rms-hc-span { position: absolute; top: var(--g-half); left: 0; width: 100%; height: var(--g-border-frame); translate: 0 calc(-1 * var(--g-half)); transform: translateX(var(--lo)) scaleX(var(--w)); transform-origin: left center; background: var(--c-text-muted); animation: rms-span-in var(--g-motion-base) var(--g-ease) both; }
/* a dot's layer lies left of the track (as wide as it) and is moved right by the share: it never reaches past the track's end, so it adds
 * nothing a page could scroll to */
.rms-hc-at { position: absolute; top: 0; right: 100%; bottom: 0; width: 100%; pointer-events: none; animation: rms-at-in var(--g-motion-base) var(--g-ease) both; }
.rms-hc-at.is-a { transform: translateX(var(--a)); }
.rms-hc-at.is-b { transform: translateX(var(--b)); }
.rms-hc-dot { position: absolute; top: var(--g-half); right: 0; width: var(--g-hc-dot); height: var(--g-hc-dot); border: var(--g-border-frame) solid var(--c-surface); border-radius: var(--g-radius-pill); translate: var(--g-half) calc(-1 * var(--g-half)); }
.rms-hc-dot.is-a { background: var(--c-chart-control); }
.rms-hc-dot.is-b { background: var(--c-chart-work); }
.rms-hc-week { display: grid; gap: var(--g-space-2); margin: 0; min-width: 0; }
.rms-hc-caption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--g-space-2); font-size: var(--t-size-sm); font-weight: var(--t-weight-semibold); }
.rms-hc-svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.rms-hc-grid { stroke: var(--c-border); stroke-width: var(--g-border); }
.rms-hc-tick { fill: var(--c-text-muted); font-size: var(--t-size-xs); font-variant-numeric: tabular-nums; }
.rms-hc-line { fill: none; stroke: var(--rms-series-c, var(--c-accent)); stroke-width: var(--g-map-wire-lit); stroke-linecap: round; stroke-linejoin: round; }
.rms-hc-dot-svg { fill: var(--rms-series-c, var(--c-accent)); stroke: var(--c-surface); stroke-width: var(--g-border-frame); }
.rms-hc-series { animation: rms-appear var(--g-motion-base) var(--g-ease) both; }
.rms-hc-series.is-work { --rms-series-c: var(--c-chart-work); }
.rms-hc-series.is-control { --rms-series-c: var(--c-chart-control); }
.rms-hc-end { fill: var(--c-text); font-size: var(--t-size-xs); }
.rms-hc-hit { fill: var(--c-selection); opacity: 0; transition: opacity var(--g-motion-fast) var(--g-ease); }
.rms-hc-hit:hover, .rms-hc-hit:focus-visible { opacity: 0.35; outline: none; }

.rms-baseline-files { flex-basis: 100%; margin-top: var(--g-space-2); }
.rms-docs-kind { display: inline-block; min-width: var(--g-space-7); margin-right: var(--g-space-2); padding: 0 var(--g-space-1); border: var(--g-border) solid var(--kind, var(--c-border-strong)); border-radius: var(--g-radius-sm); color: var(--kind, var(--c-text-muted)); font-family: var(--t-mono); font-size: var(--t-size-xs); text-align: center; vertical-align: baseline; }
.rms-docs-kind[data-kind="doc"] { --kind: var(--c-accent); }
.rms-docs-kind[data-kind="sheet"] { --kind: var(--c-ok); }
.rms-docs-kind[data-kind="image"] { --kind: var(--c-life-review); }
.rms-docs-kind[data-kind="model"] { --kind: var(--c-warn); }
.rms-docs-folder.is-drop, .rms-docs-tree.is-drop, .rms-docs-empty.is-drop { outline: var(--g-border-frame) dashed var(--c-accent); outline-offset: var(--g-space-1); background: var(--c-accent-tint); }
.rms-access-table th.rms-access-right { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; text-align: left; vertical-align: bottom; }
.rms-access-cell { text-align: center; }
.rms-access-dot { display: inline-block; width: var(--g-space-3); height: var(--g-space-3); border-radius: var(--g-radius-pill); background: var(--c-accent); }
tr[data-via="above"] .rms-access-dot { background: var(--c-life-review); }
tr[data-via="owner"] .rms-access-dot { background: var(--c-text-muted); }
.rms-access-via { white-space: nowrap; }
.rms-access-via[data-via="above"] { color: var(--c-life-review); font-weight: var(--t-weight-semibold); }
.rms-access-who { white-space: nowrap; }
.rms-docs-sha { font-family: var(--t-mono); font-size: var(--t-size-xs); color: var(--c-text-muted); white-space: nowrap; }

/* The flowdown (ui/flowdown.js): a numbered rail down the levels, the specification in the accent, the verification in the ok tone,
 * the plans muted; a document this project holds is a sheet, one it does not a dashed outline. */
.rms-flow { display: grid; gap: var(--g-space-5); }
.rms-flow-levels { display: grid; margin: 0; padding: 0; list-style: none; }
.rms-flow-level { --flow-c: var(--c-accent); display: grid; grid-template-columns: var(--g-space-7) minmax(0, 1fr); gap: var(--g-space-3); }
.rms-flow-level[data-side="proof"] { --flow-c: var(--c-ok); }
.rms-flow-level[data-side="plan"] { --flow-c: var(--c-text-muted); }
.rms-flow-rail { position: relative; display: flex; justify-content: center; }
.rms-flow-rail::before { content: ""; position: absolute; top: 0; bottom: 0; width: var(--g-border-frame); background: color-mix(in srgb, var(--flow-c) var(--c-mix-edge), var(--c-border)); }
.rms-flow-level:first-child .rms-flow-rail::before { top: var(--g-space-3); }
.rms-flow-level:last-child .rms-flow-rail::before { bottom: auto; height: var(--g-space-3); }
.rms-flow-step { position: relative; display: inline-grid; place-items: center; width: var(--g-space-6); height: var(--g-space-6); margin-top: var(--g-space-1); border: var(--g-border-frame) solid var(--flow-c); border-radius: var(--g-radius-pill); background: var(--c-surface); color: var(--flow-c); font-family: var(--t-mono); font-size: var(--t-size-xs); font-weight: var(--t-weight-semibold); }
.rms-flow-body { display: grid; gap: var(--g-space-2); padding-bottom: var(--g-space-5); min-width: 0; }
.rms-flow-level-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--g-space-1) var(--g-space-3); }
.rms-flow-level-name { margin: 0; color: var(--c-text); font-size: var(--t-size-md); font-weight: var(--t-weight-semibold); }
.rms-flow-whos { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--g-space-1); }
.rms-flow-who { padding: 0 var(--g-space-2); border: var(--g-border) solid var(--c-border-strong); border-radius: var(--g-radius-pill); font-family: var(--t-mono); font-size: var(--t-size-xs); }
.rms-flow-who.is-here { border-color: var(--flow-c); color: var(--flow-c); font-weight: var(--t-weight-semibold); }
.rms-flow-who.is-none { border-style: dashed; color: var(--c-text-muted); font-family: inherit; }
.rms-flow-level-what { margin: 0; max-width: var(--g-text-measure); color: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-flow-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--g-flow-doc-w), 1fr)); gap: var(--g-space-2); margin: 0; padding: 0; list-style: none; }
.rms-flow-doc { display: grid; gap: var(--g-space-1); align-content: start; padding: var(--g-space-2) var(--g-space-3); border: var(--g-border) solid var(--c-border); border-left: var(--g-tone-bar) solid var(--flow-c); border-radius: var(--g-radius-md); background: var(--c-surface); }
.rms-flow-doc.is-missing { border-style: dashed; border-left-style: solid; border-left-color: var(--c-border-strong); background: transparent; }
.rms-flow-doc-head { display: flex; align-items: baseline; gap: var(--g-space-2); }
.rms-flow-code { font-family: var(--t-mono); font-size: var(--t-size-sm); font-weight: var(--t-weight-semibold); }
.rms-flow-ref { color: var(--c-accent); font-family: var(--t-mono); font-size: var(--t-size-xs); }
.rms-flow-due { margin-left: auto; color: var(--c-text-muted); font-family: var(--t-mono); font-size: var(--t-size-xs); }
.rms-flow-name { color: var(--c-text); font-size: var(--t-size-sm); }
.rms-flow-found { display: grid; gap: var(--g-space-1); margin: 0; padding: 0; list-style: none; font-size: var(--t-size-xs); }
.rms-flow-status { color: var(--c-text-muted); }
.rms-flow-none { color: var(--c-text-muted); font-size: var(--t-size-xs); font-style: italic; }
.rms-flow-note { margin: 0; font-size: var(--t-size-sm); }
.rms-flow-note.is-quiet { color: var(--c-text-muted); }
.rms-flow-refs { padding-top: var(--g-space-3); border-top: var(--g-border) solid var(--c-border); font-size: var(--t-size-sm); }
.rms-flow-refs ul { display: grid; gap: var(--g-space-1); margin: 0 0 var(--g-space-2); padding: 0; list-style: none; }
.rms-flow-refs-title { margin: 0 0 var(--g-space-2); font-size: var(--t-size-sm); font-weight: var(--t-weight-semibold); }

/* Who works on what (views/home.js workEl): pieces down, teams across, the outsiders beyond a dashed line; heads kept while it scrolls */
/* the sheet as wide as its box, each team's column sharing the room; a note under a verb ("customer: only in review, approved") wraps at
 * its spaces, so the last column stays whole inside the box (8 Nov: it ran past the box's edge, cut) */
.rms-work-table { width: 100%; border-collapse: collapse; font-size: var(--t-size-sm); }
.rms-work-table th, .rms-work-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: top; }
.rms-work-table thead th { position: sticky; z-index: 2; background: var(--c-canvas); }
.rms-work-table thead tr:first-child th { top: 0; }
.rms-work-table thead tr:last-child th { top: var(--g-work-head-h); }
.rms-work-table thead .rms-work-piece { top: 0; left: 0; z-index: 3; vertical-align: bottom; }
.rms-work-table tbody .rms-work-piece { position: sticky; left: 0; z-index: 1; background: var(--c-canvas); font-weight: var(--t-weight-regular); white-space: nowrap; }
.rms-work-table tbody .rms-work-piece a { display: block; } /* kinds treated alike share a row, one under the other */
.rms-work-side { font-size: var(--t-size-xs); color: var(--c-text-muted); font-weight: var(--t-weight-semibold); text-align: center; }
.rms-work-team { width: var(--g-rules-col-w); min-width: var(--g-rules-col-w); font-size: var(--t-size-xs); font-weight: var(--t-weight-semibold); line-height: var(--t-lh-tight); vertical-align: bottom; }
.rms-work-team[data-fn]:not([data-fn="none"]) { box-shadow: inset 0 calc(-1 * var(--g-border-frame)) 0 var(--fn); }
.rms-work-team small { display: block; font-weight: var(--t-weight-regular); color: var(--c-text-muted); }
.rms-work-table .is-edge { border-left: var(--g-border-frame) dashed var(--c-border-strong); }
.rms-work-table .is-outside:not(th) { background: var(--c-elevated); }
.rms-work-lane th { padding-top: var(--g-space-3); color: var(--c-text-muted); font-size: var(--t-size-xs); font-weight: var(--t-weight-semibold); }
.rms-work-verb { display: block; white-space: nowrap; }
.rms-work-verb[data-verb="reads"] { color: var(--c-text-muted); }
.rms-work-verb.is-only { color: var(--c-text-muted); font-style: italic; white-space: normal; }
.rms-work-verb[data-verb="writes"], .rms-work-verb[data-verb="approves"], .rms-work-verb[data-verb="verifies"], .rms-work-verb[data-verb="closes"] { font-weight: var(--t-weight-semibold); }

/* Who the project is (views/home.js), under its name: a row of facts, an outsider's in the tone of its meaning */
.rms-identity { display: flex; flex-wrap: wrap; gap: var(--g-space-2) var(--g-space-5); margin: 0 0 var(--g-space-3); }
.rms-identity-cell { margin: 0; padding-left: var(--g-space-2); border-left: var(--g-border-frame) solid var(--c-border); }
.rms-identity-cell[data-fn]:not([data-fn="none"]) { border-left-color: var(--fn); }
.rms-identity-cell dt { font-size: var(--t-size-xs); color: var(--c-text-muted); }
.rms-identity-cell dd { margin: 0; font-weight: var(--t-weight-semibold); display: flex; align-items: baseline; gap: var(--g-space-2); }
.rms-identity .rms-identity-act .rms-btn { padding-block: 0; min-block-size: 0; block-size: auto; font-size: var(--t-size-xs); }

/* Ways to look at this project (ui/shapes.js): a grid of cards, each a small drawing, its title, its kind, one fact; the card a link */
.rms-shapes { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--g-shape-min), 1fr)); border-top: var(--g-border) solid var(--c-border); border-left: var(--g-border) solid var(--c-border); }
.rms-shape { display: flex; flex-direction: column; gap: var(--g-space-1); padding: var(--g-space-3); border-right: var(--g-border) solid var(--c-border); border-bottom: var(--g-border) solid var(--c-border); color: var(--c-text); text-decoration: none; min-width: 0; }
.rms-shape:hover { background: var(--c-hover); }
.rms-shapes a.rms-shape, .rms-shapes a.rms-shape:hover { color: var(--c-text); text-decoration: none; } /* a card, not underlined text */
.rms-shapes a.rms-shape:hover .rms-shape-title { text-decoration: underline; }
.rms-shape-drawing { width: 100%; height: var(--g-shape-h); background: var(--c-elevated); border-radius: var(--g-radius-sm); }
.rms-shape-title { margin: var(--g-space-1) 0 0; font-size: var(--t-size-md); }
.rms-shape-kind { font-family: var(--t-mono); font-size: var(--t-size-xs); color: var(--c-text-muted); }
.rms-shape-fact { margin: 0; font-size: var(--t-size-sm); }
.rms-sh-dot { fill: var(--c-text); }
.rms-sh-dot.is-ok { fill: var(--c-ok); }
.rms-sh-dot.is-warn { fill: var(--c-warn); }
.rms-sh-dot.is-next { fill: var(--c-accent); }
.rms-sh-dot.is-empty { fill: var(--c-canvas); stroke: var(--c-border-strong); }
.rms-sh-dot.is-fn { fill: var(--fn, var(--c-text)); }
.rms-sh-line { stroke: var(--c-border-strong); stroke-width: 1.5; }
.rms-sh-line.is-warn { stroke: var(--c-warn); stroke-width: 2; }
.rms-sh-box { fill: var(--c-canvas); stroke: var(--c-border-strong); }
.rms-sh-box.is-ok { fill: var(--c-ok); stroke: none; }
.rms-sh-box.is-warn { fill: var(--c-warn-tint); stroke: var(--c-warn); }
.rms-sh-box.is-empty { fill: none; stroke-dasharray: 3 3; }
.rms-sh-box.is-self, .rms-sh-box.is-next { fill: var(--c-accent-tint); stroke: var(--c-accent); }
.rms-sh-frame { fill: none; stroke: var(--c-border-strong); stroke-dasharray: 5 4; }

/* ==================================================================================================================================
 * Compact, the default (0.63.0; the owner, 2026-11-02, of the proposal's Items picture: "even the view like THIS is looking way more
 * professional than it is right now!"). The tokens move in css/tokens.css; here only what is laid out differently: a screen's head is one
 * line (its title, its muted line beside it while they fit, its actions: css/layout.css "a head"), the page closer to the frame, the sheets' corners and
 * the top bar tighter. Normal and comfy keep the earlier measure.
 * =================================================================================================================================*/
.rms-app[data-density="compact"] .rms-page { gap: var(--g-space-4); padding-top: var(--g-space-3); padding-bottom: var(--g-space-6); }
.rms-app[data-density="compact"] .rms-head-eyebrow { display: none; }
.rms-app[data-density="compact"] .rms-page > .rms-head:first-child,
.rms-app[data-density="compact"] .rms-page > div:only-child > .rms-head:first-child { padding-bottom: var(--g-space-2); }
.rms-app[data-density="compact"] .rms-topbar { padding-block: var(--g-space-1); }
.rms-app[data-density="compact"] .rms-btn { border-radius: var(--g-radius-sm); }
.rms-app[data-density="compact"] .rms-explorer-head { padding-top: var(--g-space-3); padding-bottom: var(--g-space-2); }

/* --- the Overview's timeline of reviews (ui/review_line.js, 0.63.0): the milestones on one rule, each a dot over its word and its day;
 * the closed ones filled in proof's colour and joined by it, the next one ringed in the accent; a click drops its story under the line. */
.rms-rline { display: grid; gap: var(--g-space-3); }
.rms-rline-steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.rms-rline-step { position: relative; min-width: 0; }
.rms-rline-step::before, .rms-rline-step::after { content: ""; position: absolute; top: calc(var(--g-space-2) + var(--g-dot) / 2); border-top: var(--g-border-strong) solid var(--c-border-strong); }
.rms-rline-step::before { left: 0; right: var(--g-half); }
.rms-rline-step::after { left: var(--g-half); right: 0; }
.rms-rline-step:first-child::before, .rms-rline-step:last-child::after { content: none; }
.rms-rline-step.is-closed::after, .rms-rline-step.is-closed + .rms-rline-step::before { border-top-color: var(--c-ok); }
.rms-rline-btn { position: relative; z-index: 1; display: grid; justify-items: center; gap: var(--g-hairline); width: 100%; padding: var(--g-space-2) var(--g-space-1); border: 0; border-radius: var(--g-radius-sm); background: transparent; color: var(--c-text); font: inherit; text-align: center; cursor: pointer; }
.rms-rline-btn:hover { background: var(--c-hover); }
.rms-rline-btn[aria-expanded="true"] { background: var(--c-selection); color: var(--c-on-select); }
.rms-rline-dot { width: var(--g-dot); height: var(--g-dot); border: var(--g-border-strong) solid var(--c-border-strong); border-radius: var(--g-round); background: var(--c-canvas); }
.rms-rline-step.is-closed .rms-rline-dot { border-color: var(--c-ok); background: var(--c-ok); }
.rms-rline-step.is-next .rms-rline-dot { border-color: var(--c-accent); background: var(--c-surface); box-shadow: 0 0 0 var(--g-halo) var(--c-accent-tint); }
.rms-rline-word { font-size: var(--t-size-base); font-weight: var(--t-weight-semibold); }
.rms-rline-btn[aria-expanded="true"] .rms-rline-word::after { content: " ▾"; color: var(--c-text-muted); }
.rms-rline-sub { max-width: 100%; overflow: hidden; color: var(--c-text-muted); font-size: var(--t-size-xs); text-overflow: ellipsis; white-space: nowrap; }
.rms-rline-btn[aria-expanded="true"] .rms-rline-sub { color: inherit; }

/* a review as it went (drawStory): a sheet under the line, proof's colour on its top edge; its words quoted, then three columns:
 * the people at the table (their initials in their role's tone), what they looked at, what was asked; its ways out at the foot */
.rms-story { display: grid; gap: var(--g-space-3); padding: var(--g-space-3) var(--g-space-4); border: var(--g-border) solid var(--c-border); border-top: var(--g-border-frame) solid var(--c-ok); border-radius: var(--g-radius-md); background: var(--c-surface); }
.rms-story-head { display: grid; gap: var(--g-space-2); }
.rms-story-title { margin: 0; font-size: var(--t-size-lg); font-weight: var(--t-weight-semibold); }
.rms-story-words { margin: 0; padding-left: var(--g-space-3); border-left: var(--g-border-frame) solid var(--c-border-strong); color: var(--c-text); }
.rms-story-words p { margin: 0; font-style: italic; }
.rms-story-words footer { color: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-story-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--g-col-narrow), 1fr)); gap: var(--g-space-4); }
.rms-story-col { display: grid; align-content: start; gap: var(--g-space-2); min-width: 0; }
.rms-story-lab { margin: 0; color: var(--c-text-muted); font-size: var(--t-size-xs); font-weight: var(--t-weight-semibold); }
.rms-story-faces, .rms-story-list { display: grid; gap: var(--g-space-2); margin: 0; padding: 0; list-style: none; }
.rms-story-face { display: flex; align-items: flex-start; gap: var(--g-space-2); min-width: 0; }
.rms-story-badge { display: inline-grid; place-items: center; flex: none; width: var(--g-space-7); height: var(--g-space-7); border: var(--g-border) solid var(--fn, var(--c-border-strong)); border-radius: var(--g-radius-pill); background: var(--fn-tint, var(--c-elevated)); color: var(--c-text); font-family: var(--t-mono); font-size: var(--t-size-xs); font-weight: var(--t-weight-semibold); }
.rms-story-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--g-space-2); min-width: 0; }
.rms-story-hat { color: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-story-did { flex-basis: 100%; color: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-story-item { display: flex; flex-wrap: wrap; gap: 0 var(--g-space-2); min-width: 0; }
.rms-story-id { color: var(--c-accent); font-family: var(--t-mono); font-size: var(--t-size-sm); white-space: nowrap; }
.rms-story-file { font-weight: var(--t-weight-medium); overflow-wrap: anywhere; }
.rms-story-sha { color: var(--c-text-muted); font-family: var(--t-mono); font-size: var(--t-size-xs); }
.rms-story-count { margin: 0; }
.rms-story-ask { display: grid; gap: var(--g-hairline); }
.rms-story-ask-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--g-space-2); }
.rms-story-ask-words { color: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-story-answer { padding: 0 var(--g-space-2); border: var(--g-border) solid var(--c-border-strong); border-radius: var(--g-radius-pill); font-size: var(--t-size-xs); white-space: nowrap; }
.rms-story-answer.is-accepted { border-color: var(--c-ok); background: var(--c-ok-tint); color: var(--c-ok); }
.rms-story-answer.is-refused { border-color: var(--c-err); background: var(--c-bad-tint); color: var(--c-err); }
.rms-story-answer.is-open { border-color: var(--c-warn); background: var(--c-warn-tint); color: var(--c-warn); }
.rms-story-more { margin: 0; color: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-story-acts { display: flex; flex-wrap: wrap; gap: var(--g-space-2); }

/* --- People → How it connects (ui/connects.js, 0.63.0): the chain read left to right, the six structures as cards each a small drawing
 * (the proposal's §11), each person in words, what they may in proof's colour and what they may not in the red pen. */
.rms-cn { display: grid; gap: var(--g-space-5); }
.rms-cn-chain { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--g-stat-min), 1fr)); margin: 0; padding: 0; list-style: none; border: var(--g-border) solid var(--c-border); border-radius: var(--g-radius-md); background: var(--c-surface); }
.rms-cn-link { position: relative; display: grid; align-content: start; gap: var(--g-hairline); padding: var(--g-space-3); border-left: var(--g-border) solid var(--c-border); }
.rms-cn-link:first-child { border-left: 0; }
.rms-cn-link:not(:last-child)::after { content: "▶"; position: absolute; top: var(--g-space-3); right: calc(-1 * var(--g-space-2)); z-index: 1; color: var(--c-text-muted); background: var(--c-surface); font-size: var(--t-size-xs); }
.rms-cn-link b { font-size: var(--t-size-base); }
.rms-cn-link small { color: var(--c-text-muted); font-size: var(--t-size-xs); }
.rms-cn-fact { margin-top: var(--g-space-1); font-size: var(--t-size-sm); font-weight: var(--t-weight-medium); }
.rms-cn-link.is-ok .rms-cn-fact { color: var(--c-ok); }
.rms-cn-link.is-warn .rms-cn-fact { color: var(--c-warn); }
.rms-cn-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--g-col-narrow), 1fr)); border-top: var(--g-border) solid var(--c-border); border-left: var(--g-border) solid var(--c-border); }
.rms-cn-card { display: flex; flex-direction: column; gap: var(--g-space-1); min-width: 0; padding: var(--g-space-3) var(--g-space-4); border-right: var(--g-border) solid var(--c-border); border-bottom: var(--g-border) solid var(--c-border); background: var(--c-surface); color: var(--c-text); text-decoration: none; }
.rms-cn-cards a.rms-cn-card, .rms-cn-cards a.rms-cn-card:hover { color: var(--c-text); text-decoration: none; } /* a card, not underlined text */
.rms-cn-cards a.rms-cn-card:hover { background: var(--c-hover); }
a.rms-cn-card:hover .rms-cn-title { text-decoration: underline; }
.rms-cn-drawing { width: 100%; height: var(--g-shape-h); border-radius: var(--g-radius-sm); background: var(--c-elevated); }
.rms-cn-title { margin: var(--g-space-2) 0 0; font-size: var(--t-size-lg); }
.rms-cn-kind { color: var(--c-warn); font-family: var(--t-mono); font-size: var(--t-size-xs); }
.rms-cn-text-p { margin: 0; font-size: var(--t-size-sm); }
.rms-cn-who { margin-top: auto; padding-top: var(--g-space-2); color: var(--c-text-muted); font-size: var(--t-size-xs); }
.rms-cn-text { fill: var(--c-text-muted); font-family: var(--t-sans); font-size: var(--t-size-xs); }
.rms-cn-text.is-ink { fill: var(--c-text); }
.rms-cn-text.is-cust { fill: var(--c-fn-customer); }
.rms-cn-pill { fill: var(--c-surface); stroke: var(--fn, var(--c-border-strong)); stroke-width: 1.4; }
.rms-cn-pill.is-dash { stroke-dasharray: 3 2; }
.rms-sh-box.is-cust { stroke: var(--c-fn-customer); }
.rms-sh-box.is-pass { fill: var(--c-ok-tint); stroke: var(--c-ok); }
.rms-sh-frame.is-cust { stroke: var(--c-fn-customer); }
.rms-sh-line.is-fn-eng { stroke: var(--c-fn-engineering); stroke-width: 1.6; }
.rms-sh-line.is-dash { stroke-dasharray: 3 3; }
.rms-sh-line.is-bad { stroke: var(--c-err); stroke-width: 2; }
.rms-sh-dot.is-ink { fill: var(--c-text-muted); }
.rms-cn-h { margin: 0 0 var(--g-space-3); font-size: var(--t-size-lg); }
.rms-cn-persons { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--g-col-mid), 1fr)); gap: var(--g-space-3); }
.rms-cn-person { display: grid; gap: var(--g-space-2); padding: var(--g-space-3); border: var(--g-border) solid var(--c-border); border-radius: var(--g-radius-md); background: var(--c-surface); }
.rms-cn-person-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-2); }
.rms-cn-name { font-weight: var(--t-weight-semibold); }
.rms-cn-why { flex-basis: 100%; color: var(--c-text-muted); font-size: var(--t-size-xs); }
.rms-cn-words { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--g-space-1) var(--g-space-3); }
.rms-cn-may { display: grid; align-content: start; gap: var(--g-hairline); margin: 0; padding: 0; list-style: none; font-size: var(--t-size-sm); }
.rms-cn-can::before { content: "✓ "; color: var(--c-ok); font-weight: var(--t-weight-semibold); }
.rms-cn-cannot { color: var(--c-text-muted); }
.rms-cn-cannot::before { content: "✕ "; color: var(--c-err); font-weight: var(--t-weight-semibold); }
/* --- room.js and passes.js (0.64.0, docs/PASSES.md): the room's matrix, a pass, a person in words, the answers sheet; compact ------- */
.rms-modal.rms-modal-wide { width: var(--g-modal-wide-fit); }
.rms-room, .rms-pass { display: grid; gap: var(--g-space-3); min-width: 0; font-size: var(--t-size-sm); }
.rms-room-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-2); }
.rms-room-add { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-1); min-width: 0; }
.rms-room-add .rms-input, .rms-grant-invite .rms-input, .rms-pass-row .rms-input { width: auto; min-width: 0; max-width: 100%; }
.rms-room-king { margin: 0; padding: var(--g-space-2) var(--g-space-3); border-radius: var(--g-radius-md); background: var(--c-tint-soft); }
.rms-room-king.is-owner { background: var(--c-warn-tint); }
.rms-room-table th, .rms-room-table td { padding: var(--g-space-1) var(--g-space-2); white-space: nowrap; vertical-align: middle; }
.rms-room-folder { text-align: left; }
.rms-room-folder.is-in { padding-left: var(--g-space-5); }
.rms-room-drawer { font-weight: var(--t-weight-semibold); }
.rms-room-cell > .rms-btn, .rms-room-lock { min-height: 0; padding: 0 var(--g-space-2); font-size: var(--t-size-xs); }
.rms-room-acc[aria-pressed="true"][data-acc="write"] { background: var(--c-ok-tint); color: var(--c-text); }
.rms-room-acc[aria-pressed="true"][data-acc="read"] { background: var(--c-selection); color: var(--c-on-select); }
.rms-room-acc[aria-pressed="true"][data-acc="none"] { background: var(--c-bad-tint); color: var(--c-text); }
.rms-room-status { color: var(--c-text-muted); font-family: var(--t-mono); font-size: var(--t-size-xs); }
.rms-pass-person { display: grid; gap: var(--g-space-2); }
.rms-pass-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--g-space-2); }
.rms-chip.is-pass { border-color: var(--c-fn-customer); color: var(--c-fn-customer); }
.rms-pass-words { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--g-select-w)), 1fr)); gap: var(--g-space-1) var(--g-space-4); }
.rms-pass-words ul { display: grid; gap: var(--g-space-1); margin: 0; padding: 0; list-style: none; }
.rms-pass-words .is-can::before { content: "✓ "; color: var(--c-ok); font-weight: var(--t-weight-semibold); }
.rms-pass-words .is-cannot::before { content: "✕ "; color: var(--c-err); font-weight: var(--t-weight-semibold); }
.rms-pass-title { margin: 0; font-size: var(--t-size-md); }
.rms-pass-rows, .rms-pass-answers { display: grid; gap: var(--g-space-2); min-width: 0; }
.rms-pass-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-2); min-width: 0; }
.rms-pass-key { flex: 0 0 var(--g-facts-key-w); color: var(--c-text-muted); }
.rms-pass-row .rms-segmented > .rms-btn, .rms-pass-chip { min-height: 0; padding: 0 var(--g-space-2); font-size: var(--t-size-xs); }
.rms-pass-chips { display: inline-flex; flex-wrap: wrap; gap: var(--g-space-1); min-width: 0; }
.rms-pass-chip { border-radius: var(--g-radius-pill); }
.rms-pass-chip[aria-pressed="true"] { border-color: var(--c-ok); background: var(--c-ok-tint); color: var(--c-text); }
.rms-pass-paste { flex: 1 1 var(--g-select-w); }
.rms-pass-lines td, .rms-pass-lines th { padding: var(--g-space-1) var(--g-space-2); }
.rms-grant-invite { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-2); }
.rms-invite-password { display: inline-block; padding: 0 var(--g-space-2); user-select: all; }


/* --- a project's own view (ui/around.js, 0.64.0): its customers in a row above in the customer's colour, itself as its V in the middle,
 * its suppliers below; each card's baselines in their state's colour; a rule from each row to the project says they meet there. */
.rms-around { display: grid; gap: var(--g-space-4); }
.rms-around-row { display: grid; gap: var(--g-space-2); }
.rms-around-row-title { margin: 0; font-size: var(--t-size-base); font-weight: var(--t-weight-semibold); }
.rms-around-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--g-col-narrow), 100%), 1fr)); gap: var(--g-space-3); }
.rms-around-card { display: grid; align-content: start; gap: var(--g-space-1); padding: var(--g-space-3); border: var(--g-border) solid var(--c-border); border-top: var(--g-border-frame) solid var(--fn, var(--c-border-strong)); border-radius: var(--g-radius-md); background: var(--c-surface); }
.rms-around-card.is-customer { --fn: var(--c-fn-customer); }
.rms-around-card.is-supplier { --fn: var(--c-fn-engineering); }
.rms-around-card a.rms-around-head, .rms-around-card a.rms-around-head:hover { display: flex; align-items: baseline; justify-content: space-between; gap: var(--g-space-2); color: var(--c-text); text-decoration: none; }
.rms-around-card div.rms-around-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--g-space-2); }
a.rms-around-head:hover .rms-around-key { text-decoration: underline; }
.rms-around-key { color: var(--c-accent); font-family: var(--t-mono); font-weight: var(--t-weight-semibold); }
.rms-around-rules { color: var(--c-text-muted); font-size: var(--t-size-xs); }
.rms-around-name { margin: 0; }
.rms-around-tie { margin: 0; color: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-around-flows { display: grid; gap: var(--g-space-1); margin: var(--g-space-1) 0 0; padding: 0; list-style: none; }
.rms-around-flow { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--g-space-1) var(--g-space-2); padding: var(--g-space-1) var(--g-space-2); border-left: var(--g-border-frame) solid var(--c-border-strong); border-radius: var(--g-radius-sm); background: var(--c-elevated); font-size: var(--t-size-sm); }
.rms-around-flow[data-state="current"], .rms-around-flow[data-state="accepted"] { border-left-color: var(--c-ok); }
.rms-around-flow[data-state="behind"] { border-left-color: var(--c-warn); }
.rms-around-flow[data-state="waiting"] { border-left-color: var(--c-accent); }
.rms-around-flow-text { font-family: var(--t-mono); font-size: var(--t-size-xs); }
.rms-around-self { position: relative; display: grid; gap: var(--g-space-3); padding: var(--g-space-3) var(--g-space-4); border: var(--g-border-strong) solid var(--c-select-strong); border-radius: var(--g-radius-md); background: var(--c-surface); }
.rms-around-self::before, .rms-around-self::after { content: ""; position: absolute; left: var(--g-half); height: var(--g-space-4); border-left: var(--g-border-strong) solid var(--c-border-strong); }
.rms-around-self::before { bottom: 100%; }
.rms-around-self::after { top: 100%; }
.rms-around-self-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--g-space-1) var(--g-space-3); }
.rms-around-self-head .rms-around-key { font-size: var(--t-size-lg); }
.rms-around-fact { padding: 0 var(--g-space-2); border-radius: var(--g-radius-pill); background: var(--c-elevated); font-size: var(--t-size-xs); }
.rms-around-fact.is-ok { background: var(--c-ok-tint); color: var(--c-ok); }
.rms-around-fact.is-warn { background: var(--c-warn-tint); color: var(--c-warn); }
.rms-around-lanes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--g-stat-min), 100%), 1fr)); gap: 0; border-top: var(--g-border) solid var(--c-border); }
.rms-around-lane { display: grid; gap: var(--g-hairline); padding: var(--g-space-2) var(--g-space-3); border-left: var(--g-border) solid var(--c-border); }
.rms-around-lane:first-child { border-left: 0; }
.rms-around-lane-title { color: var(--c-text-muted); font-size: var(--t-size-xs); font-weight: var(--t-weight-semibold); }
.rms-around-lane-n { font-family: var(--t-mono); font-size: var(--t-size-metric); font-weight: var(--t-weight-medium); }
.rms-around-lane-kinds { color: var(--c-text-muted); font-size: var(--t-size-xs); }


/* --- builds (ui/builds.js, 0.64.0): a project's pipeline commit by commit, every project's board; a run's mark in proof's colour or the
 * red pen, a row's dot its verdict (every profile passed, some missing, one failed) */
.rms-bd-table th, .rms-bd-table td { white-space: nowrap; }
.rms-bd-profile, .rms-bd-cell { text-align: center; }
.rms-bd-commit { font-family: var(--t-mono); font-weight: var(--t-weight-medium); }
.rms-bd-dot { display: inline-block; width: var(--g-space-2); height: var(--g-space-2); margin-right: var(--g-space-2); border-radius: var(--g-round); background: var(--c-border-strong); vertical-align: middle; }
.rms-bd-dot.is-ok { background: var(--c-ok); }
.rms-bd-dot.is-bad { background: var(--c-err); }
.rms-bd-dot.is-part { background: var(--c-warn); }
.rms-bd-mark { font-weight: var(--t-weight-semibold); }
.rms-bd-mark.is-ok { color: var(--c-ok); }
.rms-bd-mark.is-bad { color: var(--c-err); }
.rms-bd-cell.is-bad { background: var(--c-bad-tint); }
.rms-bd-cell.is-none { color: var(--c-text-muted); }
.rms-bd-cell a { text-decoration: none; }
.rms-bd-cov { margin-left: var(--g-space-1); color: var(--c-text-muted); font-family: var(--t-mono); font-size: var(--t-size-xs); }
.rms-bd-covcol { font-family: var(--t-mono); font-size: var(--t-size-sm); }
.rms-bd-base { margin-right: var(--g-space-2); font-family: var(--t-mono); }
.rms-wf-runs { display: grid; gap: var(--g-space-2); }

/* --- Documents as a drive (views/documents.js, 0.64.0; the proposal's section 9): the room's drawers and folders in the frame's left pane
 * as Items' filters are drawn, a folder indented by its depth; the picked folder one table under a slim bar (where one stands, the
 * drawer's rule); a row's name with its kind chip, a document item's ID; a drop on the table or a folder lit while files hover. */
.rms-docs-drive { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--g-space-3); min-width: 0; }
.rms-docs-drive > .rms-docs-pane { border-bottom: var(--g-border) solid var(--c-border); }
.rms-docs-main { display: grid; gap: var(--g-space-2); min-width: 0; }
.rms-docs-node .rms-items-filter-name { display: inline-flex; align-items: center; gap: var(--g-space-2); }
.rms-docs-node.is-folder { padding-left: calc(var(--g-space-2) + var(--depth, 1) * var(--g-space-3)); }
.rms-docs-node-icon { display: inline-grid; color: var(--c-text-muted); }
.rms-docs-node.is-drop, .rms-docs-folder.is-drop { outline: var(--g-border-strong) dashed var(--c-accent); outline-offset: calc(-1 * var(--g-border-strong)); background: var(--c-accent-tint); }
.rms-docs-bar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--g-space-1) var(--g-space-3); }
.rms-docs-crumbs { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--g-space-1); font-family: var(--t-mono); font-size: var(--t-size-sm); }
.rms-docs-crumb { padding: 0; border: 0; background: none; color: var(--c-accent); font: inherit; cursor: pointer; }
span.rms-docs-crumb { color: var(--c-text); font-weight: var(--t-weight-semibold); cursor: default; }
.rms-docs-crumb-sep { color: var(--c-text-muted); }
.rms-docs-bar-note { color: var(--c-text-muted); font-size: var(--t-size-xs); }
.rms-docs-search { width: var(--g-col-narrow); max-width: 100%; }
.rms-docs-found { margin: 0 0 var(--g-space-2); color: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-docs-table td { vertical-align: middle; }
/* widths that fit before the person sets their own (2026-11-04: the name took the width, Version and Size were cramped, "Added by /
 * status" and the pins' IDs broke over lines): the heads on one line, the name's share bounded and its title wrapping inside it, a who,
 * a date or a pin never broken; past the box the table scrolls sideways in it (ui/table.js tableBox), each head's edge sets its width */
.rms-docs-main { grid-template-columns: minmax(0, 1fr); } /* its one column never wider than the pane: the table's box scrolls, not the page */
.rms-docs-table th.rms-docs-c-name { width: var(--g-docs-name-w); }
.rms-docs-table .rms-docs-c-name { min-width: var(--g-docs-name-min); }
.rms-docs-table td.rms-docs-c-name { white-space: normal; }
.rms-docs-table td.rms-docs-c-who, .rms-docs-table .rms-docs-pinchip { white-space: nowrap; }
.rms-docs-table :is(.rms-docs-c-ver, .rms-docs-c-size, .rms-docs-c-sha, .rms-docs-c-acts) { white-space: nowrap; }
.rms-docs-table .rms-docs-c-size { font-variant-numeric: tabular-nums; text-align: right; }
.rms-docs-table .rms-docs-c-acts { text-align: right; }
.rms-docs-table .rms-docs-c-acts .rms-btn { height: var(--g-row-compact); }
.rms-docs-table .rms-docs-row-name { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--g-space-2); }
.rms-docs-table .rms-docs-row-where { display: block; color: var(--c-text-muted); font-size: var(--t-size-xs); }
.rms-docs-table .rms-docs-entry.is-awaiting { background: var(--c-warn-tint); }
.rms-docs-table .rms-docs-entry.is-closed { color: var(--c-text-muted); }
.rms-docs-table td.rms-docs-c-pins { white-space: normal; } /* its chips wrap; its head is one line */
.rms-docs-open { display: inline-flex; align-items: center; gap: var(--g-space-2); padding: 0; border: 0; background: none; color: var(--c-text); font: inherit; font-weight: var(--t-weight-medium); cursor: pointer; }
.rms-docs-open:hover { text-decoration: underline; }

/* --- an item's people and its sign-off (ui/signoff.js, 0.64.0, docs/SIGNOFF.md): the owner and co-workers, then each signer of the
 * current version ✓ in proof's colour with when, or waiting; the Sign button live only for a signer still waiting */
.rms-signoff { display: grid; gap: var(--g-space-2); margin-top: var(--g-space-4); padding-top: var(--g-space-3); border-top: var(--g-border) solid var(--c-border); }
.rms-signoff-title { margin: 0; font-size: var(--t-size-base); font-weight: var(--t-weight-semibold); }
.rms-signoff-people { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--g-space-1) var(--g-space-3); margin: 0; font-size: var(--t-size-sm); }
.rms-signoff-people dt { color: var(--c-text-muted); }
.rms-signoff-people dd { margin: 0; }
.rms-signoff-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--g-space-1) var(--g-space-3); font-size: var(--t-size-sm); }
.rms-signoff-count { padding: 0 var(--g-space-2); border-radius: var(--g-radius-pill); font-size: var(--t-size-xs); }
.rms-signoff-count.is-complete { background: var(--c-ok-tint); color: var(--c-ok); }
.rms-signoff-count.is-open { background: var(--c-warn-tint); color: var(--c-warn); }
.rms-signoff-count.is-none { background: var(--c-elevated); color: var(--c-text-muted); }
.rms-signoff-list { display: grid; gap: var(--g-space-1); margin: 0; padding: 0; list-style: none; font-size: var(--t-size-sm); }
.rms-signoff-signer { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--g-space-2); }
.rms-signoff-mark { width: var(--g-space-4); font-weight: var(--t-weight-semibold); color: var(--c-text-muted); }
.rms-signoff-signer.is-signed .rms-signoff-mark { color: var(--c-ok); }
.rms-signoff-who { font-weight: var(--t-weight-medium); }
.rms-signoff-when { color: var(--c-text-muted); font-size: var(--t-size-xs); }
.rms-signoff-said { flex-basis: 100%; padding-left: var(--g-space-6); color: var(--c-text-muted); font-style: italic; }
.rms-signoff-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-2); }
.rms-signoff-words { flex: 1 1 var(--g-col-narrow); min-width: 0; }
.rms-signoff-note { margin: 0; font-size: var(--t-size-xs); }
.rms-signoff-set { display: grid; gap: var(--g-space-1); margin: 0 0 var(--g-space-3); padding: var(--g-space-2) var(--g-space-3); border: var(--g-border) solid var(--c-border); border-radius: var(--g-radius-sm); }
.rms-signoff-pick { display: flex; align-items: center; gap: var(--g-space-1); font-size: var(--t-size-sm); }

/* --- the role marks on the screens (ui/role_icon.js; the owner, 2026-11-07: "just that symbol everywhere") ------------------------*/
.rms-identity-cell dt .rms-role-icon, .rms-work-team-name .rms-role-icon, .rms-story-hat .rms-role-icon, .rms-people-fn-mark { margin-right: var(--g-space-1); }
.rms-head-who { display: inline-flex; align-items: center; gap: var(--g-space-1); }
.rms-rules-role-name { display: inline-grid; justify-items: center; gap: var(--g-space-1); }
.rms-rules-role-name .rms-role-icon { --g-role-icon: var(--g-role-icon-lg); }
.rms-pass-roles { display: inline-flex; flex-wrap: wrap; gap: var(--g-space-1); }
.rms-baseline.is-picked { box-shadow: inset var(--g-border-frame) 0 0 var(--c-select-strong); }
.rms-baseline-who .rms-role-icon { margin-right: var(--g-hairline); }
.rms-rights-band { margin-bottom: var(--g-space-5); }
.rms-rights-band .rms-mark-legend { margin-top: var(--g-space-3); }
.rms-recap-who .rms-role-icon { margin-right: var(--g-space-1); }
.rms-artifact-who { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-1) var(--g-space-5); margin: 0 0 var(--g-space-2); color: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-artifact-who b { color: var(--c-text); font-weight: var(--t-weight-medium); }

/* --- a project's lifecycle (ui/spaces.js; the owner, 7 Nov 2026) ----------------------------------------------------------------------
 * A row per space down a spine: its node (the glyph, in the space's state) on the line, its words, its gauge, More. Pointing at a row or
 * focusing into it lights it and grows its node a little, the other rows go quiet; More folds out with a short fade; the gauge's bar grows
 * in once when drawn. Only transform and opacity move, for the motion tokens (none under reduced motion); nothing runs at rest. */
.rms-spaces { display: flex; flex-direction: column; gap: var(--g-space-3); min-width: 0; }
.rms-spaces-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--g-space-3); }
.rms-spaces-list { container-type: inline-size; margin: 0; padding: 0; list-style: none; }
.rms-space { position: relative; display: grid; grid-template-columns: var(--g-space-node) minmax(0, 1fr) var(--g-space-gauge-w) max-content; column-gap: var(--g-space-4);
  align-items: center; padding: var(--g-space-3) var(--g-space-3) var(--g-space-3) 0; cursor: pointer; transition: opacity var(--g-motion-fast) var(--g-ease); }
.rms-space::before { content: ""; position: absolute; inset: 0; border-radius: var(--g-radius-md); background: var(--c-hover); opacity: 0; pointer-events: none;
  transition: opacity var(--g-motion-fast) var(--g-ease); }
.rms-space.is-here::before { background: var(--c-space-here); opacity: 1; }
.rms-space:hover::before, .rms-space:focus-within::before { opacity: 1; }
.rms-spaces-list:has(> .rms-space:hover) > .rms-space:not(:hover):not(:focus-within) { opacity: var(--o-space-quiet); }
.rms-space > * { position: relative; }
.rms-space-node { align-self: stretch; display: flex; align-items: center; justify-content: center; }
.rms-space-node::before { content: ""; position: absolute; top: calc(var(--g-space-3) * -1); bottom: calc(var(--g-space-3) * -1); left: calc(var(--g-half) - var(--g-space-spine) / 2);
  border-left: var(--g-space-spine) dashed var(--c-border); }
.rms-space:first-child .rms-space-node::before { top: var(--g-half); }
.rms-space:last-child .rms-space-node::before { bottom: var(--g-half); }
.rms-space:only-child .rms-space-node::before { content: none; }
.rms-space.is-done .rms-space-node::before { border-left-style: solid; border-left-color: var(--c-ok); }
.rms-space.is-here .rms-space-node::before { border-left-style: solid; border-left-color: var(--c-select-strong); }
.rms-space-glyph { position: relative; display: grid; place-items: center; width: var(--g-space-node); height: var(--g-space-node); border: var(--g-border-strong) solid var(--c-border);
  border-radius: var(--g-round); background: var(--c-surface); color: var(--c-text-muted); transition: transform var(--g-motion-fast) var(--g-ease); }
.rms-space-icon { width: var(--g-space-glyph); height: var(--g-space-glyph); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rms-space.is-done .rms-space-glyph { border-color: var(--c-ok); background: var(--c-ok-tint); color: var(--c-ok); }
.rms-space.is-here .rms-space-glyph { border-color: var(--c-select-strong); background: var(--c-selection); color: var(--c-on-select); box-shadow: 0 0 0 var(--g-halo) var(--c-accent-tint); }
.rms-space:hover .rms-space-glyph, .rms-space:focus-within .rms-space-glyph { transform: scale(var(--g-space-lift)); }
.rms-space-main { display: flex; flex-direction: column; gap: var(--g-hairline); min-width: 0; }
.rms-space-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--g-hairline) var(--g-space-3); }
.rms-view a.rms-space-title { color: var(--c-text); font-family: var(--t-title); font-size: var(--t-size-lg); font-weight: var(--t-weight-semibold); letter-spacing: var(--t-track-title);
  text-decoration: none; white-space: nowrap; }
.rms-view a.rms-space-title:hover, .rms-view a.rms-space-title:focus-visible { text-decoration: underline; text-underline-offset: var(--g-underline-offset); }
.rms-space-here { padding: 0 var(--g-space-2); border-radius: var(--g-radius-pill); background: var(--c-selection); box-shadow: inset 0 0 0 var(--g-hairline) var(--c-select-strong);
  color: var(--c-on-select); font-size: var(--t-size-xs); font-weight: var(--t-weight-medium); white-space: nowrap; }
.rms-space-purpose { flex: none; max-width: var(--g-full); color: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-space-facts, .rms-space-steps { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--g-hairline) var(--g-space-2); margin: 0; font-size: var(--t-size-sm); }
.rms-space-steps { margin-top: var(--g-hairline); }
.rms-space-sep { color: var(--c-ghost); }
.rms-space-muted { color: var(--c-text-muted); }
.rms-view a.rms-space-kind { color: var(--c-text); text-decoration: none; white-space: nowrap; }
.rms-view a.rms-space-kind:hover { text-decoration: underline; }
.rms-space-kind-n { font-family: var(--t-mono); font-weight: var(--t-weight-semibold); }
.rms-space-fig { white-space: nowrap; }
.rms-view a.rms-space-fig { text-decoration: none; }
.rms-view a.rms-space-fig:hover { text-decoration: underline; }
.rms-view .rms-space-fig.is-ok { color: var(--c-ok); }
.rms-view .rms-space-fig.is-next { color: var(--c-accent); }
.rms-view .rms-space-fig.is-warn { color: var(--c-warn); }
.rms-view .rms-space-fig.is-bad { color: var(--c-err); }
.rms-view .rms-space-fig.is-muted { color: var(--c-text-muted); }
.rms-view a.rms-space-ms { display: inline-flex; align-items: baseline; gap: var(--g-space-1); color: var(--c-text-muted); text-decoration: none; white-space: nowrap; }
.rms-view a.rms-space-ms:hover { text-decoration: underline; }
.rms-space-ms-mark { width: var(--g-space-pip); height: var(--g-space-pip); border: var(--g-border-strong) solid var(--c-frame); background: var(--c-surface); transform: rotate(45deg) scale(0.8); }
.rms-space-ms.is-closed .rms-space-ms-mark { border-color: var(--c-ok); background: var(--c-ok); }
.rms-view a.rms-space-ms.is-closed { color: var(--c-text); }
.rms-space-step { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--g-hairline) var(--g-space-2); }
.rms-space-next { font-weight: var(--t-weight-semibold); }
.rms-view a.rms-space-step-what { color: var(--c-accent); font-weight: var(--t-weight-medium); text-decoration: none; white-space: nowrap; }
.rms-view a.rms-space-step-what:hover { text-decoration: underline; }
.rms-space-id { font-family: var(--t-mono); }
.rms-space-rules { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--g-hairline) var(--g-space-2); }
.rms-view a.rms-space-rule { color: var(--c-text); text-decoration: none; white-space: nowrap; }
.rms-view a.rms-space-rule:hover { text-decoration: underline; }
.rms-space-rule-n { color: var(--c-text-muted); font-family: var(--t-mono); }
.rms-space-who { align-self: center; }
.rms-space-gauge { display: flex; flex-direction: column; gap: var(--g-space-2); min-width: 0; }
.rms-space-bar { display: flex; height: var(--g-space-bar-h); border-radius: var(--g-radius-pill); background: var(--c-elevated); box-shadow: inset 0 0 0 var(--g-hairline) var(--c-border);
  overflow: hidden; transform-origin: left center; animation: rms-space-grow var(--g-motion-base) var(--g-ease) both; }
.rms-space-seg { flex: var(--n) 1 0; }
.rms-space-seg[data-family="working"] { background: var(--c-space-working); }
.rms-space-seg[data-family="review"] { background: var(--c-space-review); }
.rms-space-seg[data-family="controlled"] { background: var(--c-space-controlled); }
.rms-space-seg[data-family="proven"] { background: var(--c-space-proven); }
.rms-space-pips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-1) var(--g-space-3); margin: 0; padding: 0; list-style: none; color: var(--c-text-muted);
  font-size: var(--t-size-xs); }
.rms-space-pip { display: inline-flex; align-items: center; gap: var(--g-space-1); white-space: nowrap; }
.rms-space-pip.is-review .rms-space-pip-mark { width: var(--g-space-pip); height: var(--g-space-pip); border: var(--g-border-strong) solid var(--c-frame); background: var(--c-surface);
  transform: rotate(45deg) scale(0.85); }
.rms-space-pip.is-review.is-closed .rms-space-pip-mark { border-color: var(--c-ok); background: var(--c-ok); }
.rms-space-pip.is-review.is-next .rms-space-pip-mark { border-color: var(--c-accent); box-shadow: 0 0 0 var(--g-halo) var(--c-accent-tint); }
.rms-space-pip.is-review.is-next { color: var(--c-accent); font-weight: var(--t-weight-semibold); }
.rms-space-pip.is-rung .rms-space-pip-mark { display: grid; place-items: center; width: var(--g-space-rung); height: var(--g-space-rung); border: var(--g-border) solid var(--c-frame);
  border-radius: var(--g-round); font-family: var(--t-mono); font-size: var(--t-size-tag); }
.rms-space-pip.is-rung.is-closed .rms-space-pip-mark { border-color: var(--c-ok); background: var(--c-ok-tint); color: var(--c-ok); }
.rms-space-pip.is-rung.is-next .rms-space-pip-mark { border-color: var(--c-accent); color: var(--c-accent); }
.rms-space-more { gap: var(--g-space-1); }
.rms-space-more-words { display: grid; }
.rms-space-more-words > span { grid-area: 1 / 1; }
.rms-space-more[aria-expanded="true"] .is-more, .rms-space-more:not([aria-expanded="true"]) .is-less { visibility: hidden; }
.rms-space-chev { transition: transform var(--g-motion-fast) var(--g-ease); }
.rms-space-more[aria-expanded="true"] .rms-space-chev { transform: rotate(180deg); }
.rms-space-detail { grid-column: 2 / -1; margin-top: var(--g-space-2); padding: var(--g-space-1) 0 var(--g-space-1) var(--g-space-4); border-left: var(--g-border-strong) solid var(--c-border);
  cursor: auto; animation: rms-space-open var(--g-motion-base) var(--g-ease) both; }
.rms-space-detail[hidden] { display: none; }
.rms-space-detail-text { max-inline-size: var(--g-prose-measure); margin: 0; line-height: var(--t-lh-text); }
.rms-space-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--g-space-1) var(--g-space-4); margin: var(--g-space-3) 0 0; font-size: var(--t-size-sm); }
.rms-space-dl dt { color: var(--c-text-muted); font-weight: var(--t-weight-medium); white-space: nowrap; }
.rms-space-dl dd { margin: 0; min-width: 0; }
.rms-space-dl dd > a, .rms-space-dl dd > span { margin-right: var(--g-space-1); }
.rms-space-set { font-family: var(--t-mono); }
.rms-spaces-others { margin: 0; padding-left: calc(var(--g-space-node) + var(--g-space-4)); font-size: var(--t-size-sm); }
@keyframes rms-space-grow { from { transform: scaleX(0); } }
@keyframes rms-space-open { from { opacity: 0; transform: translateY(calc(var(--g-space-2) * -1)); } }

/* --- clusters.js: the trace clusters' screen. Its toolbar (group, order, the document shown, the legend), the glance, the field and, with a
 *     selection, the selected items beside it (css/layout.css: a side of the one layout), arriving once with a short slide. -------------*/
.rms-tc-toolbar { flex-wrap: wrap; gap: var(--g-space-2) var(--g-space-3); }
.rms-tc-scope { white-space: nowrap; }
.rms-tc-glance { margin: 0; }
.rms-tc-main { min-width: 0; }
/* the selected items hold an item's short view and its links' table: their side takes half the split before the person drags it (8 Nov:
 * at 38% the table's last column and a pick's title were cut) */
.rms-tc-split { --g-side-share: 50cqi; }
.rms-tc-links th { white-space: nowrap; } /* the heads one line; a cell wraps at its spaces (an id and a badge stay whole), so the table holds in the side */
.rms-tc-side { overflow: auto; max-block-size: var(--g-tc-side-h); animation: rms-tc-slide var(--g-motion-base) var(--g-ease) 1 both; }
@keyframes rms-tc-slide { from { opacity: 0; transform: translateX(var(--g-tc-slide)); } }
.rms-tc-side-head { display: flex; align-items: center; justify-content: space-between; gap: var(--g-space-2); margin-bottom: var(--g-space-2); }
.rms-tc-side-title { margin: 0; font-weight: var(--t-weight-semibold); white-space: nowrap; }
.rms-tc-picks { display: flex; flex-direction: column; gap: var(--g-space-2); min-width: 0; }
.rms-tc-pick { min-width: 0; border: var(--g-border) solid var(--c-border-strong); border-radius: var(--g-radius-md); background: var(--c-surface); }
/* a pick's head: its drawing, id, state and × on the first line, its title whole on the second, as wide as the card */
.rms-tc-pick-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-1) var(--g-space-2); min-width: 0; padding: var(--g-space-1) var(--g-space-2); cursor: pointer; list-style: none; }
.rms-tc-pick-head::-webkit-details-marker { display: none; }
.rms-tc-pick-head .rms-tc-svg { flex: none; inline-size: var(--g-tc-pick-mol); }
.rms-tc-pick-id { flex: none; color: var(--c-link); font-size: var(--t-size-sm); white-space: nowrap; }
.rms-tc-pick-title { order: 1; flex: 1 0 100%; min-width: 0; }
.rms-tc-pick-head > .rms-badge { margin-inline-start: auto; }
.rms-tc-pick-head .rms-badge, .rms-tc-pick-x { flex: none; }
.rms-tc-pick-body { display: grid; gap: var(--g-space-3); min-width: 0; padding: var(--g-space-2); border-top: var(--g-border) solid var(--c-border); }
.rms-tc-state { font-weight: var(--t-weight-medium); white-space: nowrap; }
.rms-tc-state[data-state="settled"] { color: var(--c-ok); }
.rms-tc-state:is([data-state="open"], [data-state="suspect"]) { color: var(--c-warn); }
.rms-tc-state:is([data-state="failed"], [data-state="missing"]) { color: var(--c-err); }
/* The trace model (ui/trace_model.js, views/trace_model.js): the lanes as bands washed in their colour, each level a box with its count in
 * the ring of its approved items (the verified or passed inside), each relation a line through its tag, as thick as its links are many
 * (--g-tmod-w*), coloured by how it stands and saying it in words: every item carries it (ok), some miss it (warn), none does (err),
 * nothing asked and nothing linked (muted, dashed); a relation drawn only where the project uses a kind the rules leave open is dotted.
 * Pointing at a level or a tag lets the rest recede (opacity only, the motion tokens); nothing moves at rest. */
.rms-tmod { display: flex; flex-direction: column; gap: var(--g-space-4); min-width: 0; }
.rms-tmod-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--g-space-2) var(--g-space-5); }
.rms-tmod-lede { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--g-space-2) var(--g-space-3); margin: 0; }
.rms-tmod-count { padding: 0 var(--g-space-2); border-radius: var(--g-radius-pill); font-family: var(--t-mono); font-size: var(--t-size-sm); white-space: nowrap; }
.rms-tmod-count.is-whole { background: var(--c-ok-tint); color: var(--c-ok); }
.rms-tmod-count.is-gaps, .rms-tmod-count.is-suspect { background: var(--c-warn-tint); color: var(--c-warn); }
.rms-tmod-count.is-empty { background: var(--c-bad-tint); color: var(--c-err); }
.rms-tmod-count.is-none, .rms-tmod-count.is-partial, .rms-tmod-count.is-elsewhere { background: var(--c-tint); color: var(--c-text-muted); }
.rms-tmod-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-2) var(--g-space-5); }
.rms-tmod-every { display: inline-flex; align-items: center; gap: var(--g-space-2); min-width: 0; font-size: var(--t-size-sm); } /* one line where it fits, at its spaces on a phone */
.rms-tmod-key { display: flex; flex-wrap: wrap; gap: var(--g-space-1) var(--g-space-4); margin: 0; padding: 0; list-style: none; color: var(--c-text-muted); font-size: var(--t-size-xs); }
.rms-tmod-key-item { display: inline-flex; align-items: center; gap: var(--g-space-2); white-space: nowrap; }
.rms-tmod-key-line { display: inline-block; width: var(--g-space-6); border-top: var(--g-tmod-w2) solid currentColor; }
.rms-tmod-key-item.is-whole .rms-tmod-key-line { color: var(--c-ok); }
.rms-tmod-key-item.is-gaps .rms-tmod-key-line { color: var(--c-warn); }
.rms-tmod-key-item.is-empty .rms-tmod-key-line { color: var(--c-err); }
.rms-tmod-key-item.is-none .rms-tmod-key-line { border-top-style: dashed; border-top-width: var(--g-tmod-w0); }
.rms-tmod-key-item.is-used-only .rms-tmod-key-line { border-top-style: dotted; }
.rms-tmod-key-ring { box-sizing: border-box; width: var(--g-icon-md); height: var(--g-icon-md); border: var(--g-tmod-ring) solid var(--c-life-controlled); border-radius: var(--g-round); }

.rms-tmod-svg { display: block; font-family: var(--t-sans); }
.rms-tmod-band-bg { fill: var(--c-tint); stroke: none; }
.rms-tmod-band[data-lane="need"] .rms-tmod-band-bg { fill: var(--c-cat-customer-tint); }
.rms-tmod-band[data-lane="answer"] .rms-tmod-band-bg { fill: var(--c-cat-spec-tint); }
.rms-tmod-band[data-lane="design"] .rms-tmod-band-bg { fill: var(--c-cat-design-tint); }
.rms-tmod-band[data-lane="proof"] .rms-tmod-band-bg { fill: var(--c-cat-proof-tint); }
.rms-tmod-lane { fill: var(--c-text-muted); font-size: var(--t-size-sm); font-weight: var(--t-weight-semibold); }
.rms-tmod-band[data-lane="need"] .rms-tmod-lane { fill: var(--c-cat-customer); }
.rms-tmod-band[data-lane="answer"] .rms-tmod-lane { fill: var(--c-cat-spec); }
.rms-tmod-band[data-lane="design"] .rms-tmod-lane { fill: var(--c-cat-design); }
.rms-tmod-band[data-lane="proof"] .rms-tmod-lane { fill: var(--c-cat-proof); }

.rms-tmod-level, .rms-tmod-tag { cursor: pointer; outline: none; transition: opacity var(--g-motion-fast) var(--g-ease); }
.rms-tmod-box { fill: var(--c-surface); stroke: var(--c-border-strong); stroke-width: var(--g-border); }
.rms-tmod-level.is-empty .rms-tmod-box { fill: var(--c-elevated); stroke-dasharray: var(--g-map-dash); }
.rms-tmod-level:hover .rms-tmod-box, .rms-tmod-level:focus-visible .rms-tmod-box, .rms-tmod-level.is-lit .rms-tmod-box { stroke: var(--c-focus); stroke-width: var(--g-border-strong); }
.rms-tmod-level.is-picked .rms-tmod-box { fill: var(--c-selection); stroke: var(--c-select-strong); stroke-width: var(--g-border-strong); }
.rms-tmod-kind { fill: var(--c-text); font-size: var(--t-size-md); font-weight: var(--t-weight-semibold); }
.rms-tmod-set { fill: var(--c-text-muted); font-family: var(--t-mono); font-size: var(--t-size-xs); }
.rms-tmod-figures { fill: var(--c-text-muted); font-size: var(--t-size-xs); }
.rms-tmod-n { fill: var(--c-text); font-family: var(--t-mono); font-size: var(--t-size-sm); font-weight: var(--t-weight-semibold); }
.rms-tmod-ring, .rms-tmod-proof { fill: none; stroke-width: var(--g-tmod-ring); stroke-linecap: round; }
.rms-tmod-ring.is-track, .rms-tmod-proof.is-track { stroke: var(--c-border); }
.rms-tmod-ring.is-on { stroke: var(--c-life-controlled); }
.rms-tmod-proof.is-on { stroke: var(--c-verif-pass); }

.rms-tmod-line { fill: none; stroke: var(--c-text-muted); stroke-width: var(--g-tmod-w0); stroke-linecap: round; transition: opacity var(--g-motion-fast) var(--g-ease); }
.rms-tmod-line.is-w1 { stroke-width: var(--g-tmod-w1); }
.rms-tmod-line.is-w2 { stroke-width: var(--g-tmod-w2); }
.rms-tmod-line.is-w3 { stroke-width: var(--g-tmod-w3); }
.rms-tmod-line.is-w4 { stroke-width: var(--g-tmod-w4); }
.rms-tmod-line.is-w5 { stroke-width: var(--g-tmod-w5); }
.rms-tmod-line.is-whole { stroke: var(--c-ok); }
.rms-tmod-line.is-gaps { stroke: var(--c-warn); }
.rms-tmod-line.is-empty { stroke: var(--c-err); stroke-dasharray: var(--g-tmod-dash); }
.rms-tmod-line.is-none { stroke-dasharray: var(--g-tmod-dash); }
.rms-tmod-line.is-used-only { stroke-dasharray: var(--g-tmod-dot); }
.rms-tmod-pill { fill: var(--c-surface); stroke: var(--c-border-strong); stroke-width: var(--g-border); }
.rms-tmod-tag.is-whole .rms-tmod-pill { stroke: var(--c-ok); }
.rms-tmod-tag.is-gaps .rms-tmod-pill { stroke: var(--c-warn); }
.rms-tmod-tag.is-empty .rms-tmod-pill { stroke: var(--c-err); }
.rms-tmod-tag:hover .rms-tmod-pill, .rms-tmod-tag:focus-visible .rms-tmod-pill, .rms-tmod-tag.is-lit .rms-tmod-pill { stroke-width: var(--g-border-strong); }
.rms-tmod-tag.is-picked .rms-tmod-pill { fill: var(--c-selection); stroke: var(--c-select-strong); stroke-width: var(--g-border-strong); }
.rms-tmod-rel { fill: var(--c-text); font-size: var(--t-size-sm); font-weight: var(--t-weight-semibold); }
.rms-tmod-cite { fill: var(--c-link); font-family: var(--t-mono); font-size: var(--t-size-xs); }
.rms-tmod-fig { fill: var(--c-text-muted); font-family: var(--t-mono); font-size: var(--t-size-xs); }
.rms-tmod-fig.is-whole { fill: var(--c-ok); }
.rms-tmod-fig.is-gaps, .rms-tmod-fig.is-warn, .rms-tmod-gaps { fill: var(--c-warn); }
.rms-tmod-fig.is-empty { fill: var(--c-err); }
.rms-tmod-warn { fill: none; stroke: var(--c-warn); stroke-width: 1.4; stroke-linejoin: round; }
/* pointing: what is pointed at and what it joins stay, the rest recedes */
.rms-tmod-svg.is-pointing :is(.rms-tmod-line, .rms-tmod-tag, .rms-tmod-level):not(.is-lit) { opacity: var(--o-tmod-recede); }

.rms-tmod-lists { display: grid; gap: var(--g-space-3); }
.rms-tmod-list { display: grid; gap: var(--g-hairline); margin: 0; padding: 0; list-style: none; }
.rms-tmod-list-item { display: block; width: 100%; padding: var(--g-space-2); border: 0; border-left: var(--g-tone-bar) solid var(--c-border); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.rms-tmod-list-item.is-whole { border-left-color: var(--c-ok); }
.rms-tmod-list-item.is-gaps { border-left-color: var(--c-warn); }
.rms-tmod-list-item.is-empty { border-left-color: var(--c-err); }

.rms-tmod-open { animation: rms-tmod-open var(--g-motion-base) var(--g-ease); }
@keyframes rms-tmod-open { from { opacity: 0; transform: translateY(var(--g-space-2)); } to { opacity: 1; transform: none; } }
.rms-tmod-hint { margin: 0; }
.rms-tmod-facts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-2) var(--g-space-3); margin: 0 0 var(--g-space-3); }
.rms-tmod-table td { vertical-align: top; }
.rms-tmod-state { white-space: nowrap; }
.rms-tmod-dot { display: inline-block; width: var(--g-qi-pip); height: var(--g-qi-pip); margin-right: var(--g-space-2); border-radius: var(--g-round); background: var(--c-border-strong); }
.rms-tmod-state.is-gap { color: var(--c-err); }
.rms-tmod-state.is-gap .rms-tmod-dot { background: var(--c-err); }
.rms-tmod-state.is-suspect { color: var(--c-warn); }
.rms-tmod-state.is-suspect .rms-tmod-dot { background: var(--c-warn); }
.rms-tmod-state.is-linked .rms-tmod-dot { background: var(--c-ok); }
.rms-tmod-links { display: flex; flex-wrap: wrap; gap: var(--g-space-1); }
.rms-view a.rms-tmod-chip { padding: 0 var(--g-space-2); border: var(--g-border) solid var(--c-border); border-radius: var(--g-radius-pill); color: var(--c-text); font-family: var(--t-mono); font-size: var(--t-size-xs); text-decoration: none; white-space: nowrap; }
.rms-view a.rms-tmod-chip.is-suspect { border-color: var(--c-warn); color: var(--c-warn); }
.rms-tmod-unlinked { margin-top: var(--g-space-4); }
.rms-tmod-ids { display: flex; flex-wrap: wrap; gap: var(--g-space-1) var(--g-space-3); margin: 0; }
.rms-qi-label.is-id { color: var(--c-link); font-size: var(--t-size-xs); }
.rms-qi-line.is-more .rms-qi-label { font-style: italic; }
.rms-tmod-missing { fill: var(--c-err); font-size: var(--t-size-xs); font-weight: var(--t-weight-medium); }

/* ---- Waiting for me (docs/NOTIFICATIONS.md, views/waiting.js): every project's group a sheet the width of the window, one line per thing
 * that waits: the kind's mark in its window's tone, what to do and on what, why it waits, the action at the end. A thing holding a gate
 * open wears the warning's edge. Motion only on a change the eye should follow: the list arrives once (a fade), a row whose action is
 * taken leaves (a fade and a slide of one space), the tokens' times, nothing while idle. ---- */
.rms-waiting .rms-wait-kinds { display: flex; flex-wrap: wrap; gap: var(--g-space-2); margin: 0 0 var(--g-space-4); }
.rms-wait-kind { gap: var(--g-space-2); }
.rms-wait-kind .rms-btn-icon { color: var(--rms-tone, currentColor); }
.rms-wait-kind-n { padding: 0 var(--g-space-2); border-radius: var(--g-radius-pill); background: var(--c-elevated); font: var(--t-weight-medium) var(--t-size-tag) / var(--t-lh-base) var(--t-mono); }
.rms-wait-kind.is-on .rms-wait-kind-n { background: var(--c-selection); color: var(--c-on-select); }
.rms-wait-groups { display: grid; gap: var(--g-space-5); animation: rms-wait-arrive var(--g-motion-base) var(--g-ease) 1; }
.rms-wait-group { border: var(--g-border) solid var(--c-border); border-radius: var(--g-sheet-radius); background: var(--c-surface); box-shadow: var(--c-shadow-1); }
.rms-wait-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--g-space-2) var(--g-space-4); padding: var(--g-space-3) var(--g-space-5); border-bottom: var(--g-border) solid var(--c-border); }
.rms-view a.rms-wait-project { color: var(--c-text); font-weight: var(--t-weight-semibold); text-decoration: none; white-space: nowrap; }
.rms-view a.rms-wait-project:hover { text-decoration: underline; }
.rms-wait-project-name { font-size: var(--t-size-md); font-weight: var(--t-weight-semibold); }
.rms-wait-group-count { margin-left: auto; color: var(--c-text-muted); font-size: var(--t-size-sm); white-space: nowrap; }
.rms-wait-list { margin: 0; padding: 0; list-style: none; }
/* a line wraps as its box narrows, never as the window does: its actions go under its words when the words would keep less than the
 * least a sheet's main column keeps (a phone, a narrow side-by-side), the words never cut */
.rms-wait-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--g-space-2) var(--g-space-4);
  padding: var(--g-space-3) var(--g-space-5);
  border-bottom: var(--g-border) solid var(--c-border);
  box-shadow: inset var(--g-border-strong) 0 0 transparent;
  transition: opacity var(--g-motion-base) var(--g-ease), transform var(--g-motion-base) var(--g-ease);
}
.rms-wait-row:last-child { border-bottom: 0; }
.rms-wait-row:hover { background: var(--c-hover); }
.rms-wait-row.is-blocking { box-shadow: inset var(--g-border-strong) 0 0 var(--c-warn); }
.rms-wait-row.is-done { opacity: 0; transform: translateX(var(--g-space-2)); }
.rms-wait-mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--g-mark); height: var(--g-mark); color: var(--rms-tone, var(--c-text-muted)); }
.rms-wait-main { flex: 1 1 var(--g-col-fill-min); min-width: 0; }
.rms-wait-what, .rms-wait-why { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--g-space-1) var(--g-space-2); margin: 0; }
.rms-wait-why { margin-top: var(--g-space-1); color: var(--c-text-muted); font-size: var(--t-size-sm); }
.rms-wait-lead { font-weight: var(--t-weight-semibold); white-space: nowrap; }
.rms-view a.rms-wait-id { color: var(--c-link); font-weight: var(--t-weight-medium); text-decoration: none; white-space: nowrap; }
.rms-view a.rms-wait-id:hover { text-decoration: underline; }
.rms-wait-title { color: var(--c-text); }
.rms-wait-arrow, .rms-wait-about { color: var(--c-text-muted); white-space: nowrap; }
.rms-wait-why .rms-person-name { color: var(--c-text); }
.rms-wait-note { font-style: italic; }
.rms-wait-gate.rms-state-chip { background: var(--c-warn-tint); color: var(--c-warn); white-space: normal; }
.rms-wait-acts { flex: none; margin-left: auto; display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--g-space-2); }
.rms-wait-relation { padding: var(--g-pad-chip-y) var(--g-space-2); border-radius: var(--g-radius-sm); background: var(--c-elevated); color: var(--c-text-muted); font-size: var(--t-size-tag); white-space: nowrap; }
.rms-wait-more { justify-self: start; }
@keyframes rms-wait-arrive { from { opacity: 0; } to { opacity: 1; } }

/* --- 0.76.0 (the owner's visibility work, 11 Nov): the one band that says what waits on the reader (ui/turn.js), a state's tag, a
 * section's count, what an input brings and where an item is taken (views/brought.js). Colour is meaning: green met, amber waiting,
 * red not met, grey nothing to do, blue your action; never colour alone (each a mark and its words). --- */
.rms-turn { display: flex; align-items: center; gap: var(--g-space-3); margin: 0; padding: var(--g-space-3) var(--g-space-4); border: var(--g-border) solid var(--c-border-strong); border-left-width: var(--g-border-frame); border-radius: var(--g-radius-md); background: var(--c-surface); }
.rms-turn[data-tone="bad"] { border-color: var(--c-err); background: var(--c-bad-tint); }
.rms-turn[data-tone="warn"] { border-color: var(--c-warn); background: var(--c-warn-tint); }
.rms-turn[data-tone="ok"] { border-color: var(--c-ok); background: var(--c-ok-tint); }
.rms-turn[data-tone="next"] { border-color: var(--c-select-strong); background: var(--c-selection); }
.rms-turn-mark { flex: none; font-size: var(--t-size-lg); font-weight: var(--t-weight-semibold); line-height: var(--t-lh-tight); }
.rms-turn[data-tone="bad"] .rms-turn-mark { color: var(--c-err); }
.rms-turn[data-tone="warn"] .rms-turn-mark { color: var(--c-warn); }
.rms-turn[data-tone="ok"] .rms-turn-mark { color: var(--c-ok); }
.rms-turn[data-tone="next"] .rms-turn-mark { color: var(--c-select-strong); }
.rms-turn-text { flex: 1 1 auto; min-width: 0; margin: 0; font-weight: var(--t-weight-medium); line-height: var(--t-lh-base); }
.rms-turn-act { flex: none; }
.rms-state-tag { display: inline-flex; align-items: baseline; gap: var(--g-space-1); padding: var(--g-pad-chip-y) var(--g-space-2); border-radius: var(--g-radius-sm); background: var(--c-elevated); color: var(--c-text-muted); font-size: var(--t-size-sm); font-weight: var(--t-weight-medium); white-space: nowrap; }
.rms-state-tag[data-tone="ok"] { background: var(--c-ok-tint); color: var(--c-ok); }
.rms-state-tag[data-tone="warn"] { background: var(--c-warn-tint); color: var(--c-warn); }
.rms-state-tag[data-tone="bad"] { background: var(--c-bad-tint); color: var(--c-err); }
.rms-state-tag-mark { font-weight: var(--t-weight-semibold); }
.rms-count-tag { display: inline-block; padding: 0 var(--g-space-2); border-radius: var(--g-radius-pill); background: var(--c-elevated); color: var(--c-text-muted); font-family: var(--t-mono); font-size: var(--t-size-sm); font-weight: var(--t-weight-medium); vertical-align: middle; }
.rms-brought, .rms-copies { display: flex; flex-direction: column; gap: var(--g-space-3); }
.rms-brought-line, .rms-copies-line { margin: 0; line-height: var(--t-lh-text); }
.rms-copies-line { font-weight: var(--t-weight-medium); }
.rms-copies-line[data-tone="bad"] { color: var(--c-err); }
.rms-copies-line[data-tone="warn"] { color: var(--c-warn); }
.rms-copies-line[data-tone="ok"] { color: var(--c-ok); }
.rms-brought-filters { display: flex; flex-wrap: wrap; gap: var(--g-space-2); }
.rms-brought-filter[aria-pressed="true"] { background: var(--c-selection); color: var(--c-on-select); box-shadow: inset 0 0 0 var(--g-hairline) var(--c-select-strong); }
/* one grid for the whole list, each row its subgrid: the columns line up and size to the widest id, never cut */
.rms-brought-rows, .rms-copies-rows { display: grid; grid-template-columns: max-content max-content max-content minmax(0, 1fr); column-gap: var(--g-space-4); margin: 0; padding: 0; list-style: none; border-top: var(--g-border) solid var(--c-border); }
.rms-brought-row, .rms-copies-row { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: baseline; padding: var(--g-space-2) 0; border-bottom: var(--g-border) solid var(--c-border); }
.rms-brought-source, .rms-brought-here, .rms-copies-items { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--g-space-2); min-width: 0; }
.rms-brought-id, .rms-copies-key { font-family: var(--t-mono); font-size: var(--t-size-sm); letter-spacing: var(--t-track-mono); white-space: nowrap; }
.rms-copies-key { font-weight: var(--t-weight-semibold); }
.rms-brought-change { color: var(--c-text-muted); font-size: var(--t-size-xs); }
.rms-brought-change[data-change="added"] { color: var(--c-ok); }
.rms-brought-change[data-change="removed"] { color: var(--c-err); }
.rms-brought-what { display: grid; gap: var(--g-hairline); min-width: 0; }
.rms-brought-title { line-height: var(--t-lh-base); }
.rms-brought-cost, .rms-result-cost { color: var(--c-err); font-weight: var(--t-weight-semibold); }
.rms-brought-why { color: var(--c-text-muted); font-size: var(--t-size-sm); overflow-wrap: anywhere; }
.rms-qi-result-mark { font-weight: var(--t-weight-semibold); }
.rms-qi-latest-line { padding: 0 var(--g-space-2); color: var(--c-text-muted); font-size: var(--t-size-sm); line-height: var(--t-lh-base); white-space: normal; overflow-wrap: anywhere; }
.rms-family-brings { font-family: var(--t-mono); font-size: var(--t-size-sm); }
.rms-family-brings[data-state="not_met"] { color: var(--c-err); }
.rms-family-brings[data-state="unchecked"] { color: var(--c-warn); }
.rms-family-brings[data-state="met"] { color: var(--c-ok); }