/* Throttle console tokens — the throttle-owned neutral set.
 *
 * Achromatic by doctrine: emphasis is carried by ink strength and weight,
 * never by hue. Light and dark are EQUAL, complete, pre-decided value sets —
 * no rule derives a shade at runtime. One radius family; 1px hairlines. */

:root {
  color-scheme: light dark;
  --bg: #f6f6f7;
  --surface: #ffffff;
  --ink: #17181a;
  --ink-strong: #000000;
  --muted: #5e6268;
  --line: #e3e4e7;
  --line-strong: #c9cbd0;
  --invert-bg: #17181a;
  --invert-ink: #f6f6f7;
  --scrim: rgba(23, 24, 26, 0.35);
  --radius: 8px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e0f11;
    --surface: #16171a;
    --ink: #e8e9ea;
    --ink-strong: #ffffff;
    --muted: #9aa0a6;
    --line: #26282c;
    --line-strong: #3a3d42;
    --invert-bg: #e8e9ea;
    --invert-ink: #0e0f11;
    --scrim: rgba(0, 0, 0, 0.55);
  }
}

/* ============================================================================
 * VENDORED DESIGN-SYSTEM TOKEN LAYERS  ·  provenance
 * ----------------------------------------------------------------------------
 * Source of truth: the console's OWN exported design language.
 *   design-systems  PR #385  —  systems/throttle @ 0.2.0 @ 718f6e7da  (system id "throttle")
 *     tokens/semantic.css        -> Layer 1  --role-*  (semantic + status roles)
 *     tokens/identity.css        -> Layer 2  --type-*  + --size-identity-*
 *     tokens/brand.css           -> Layer 3  --rig-*   (telemetry register)
 *     tokens/shape.css           -> --radius-rig / --radius-plate / hairlines
 *     ui_kits/telemetry/rig.css  -> the telemetry class vocabulary, applied by
 *                                   the analytics view's confined .register-telemetry
 *     tokens/spacing.css typography.css motion.css -> the named scales below
 *     guidelines/webview-ux-foundation.md -> docs/throttle/webview-ux-foundation.md
 *
 * SYNC DIRECTION: the console is the SOURCE; the design-system exported this
 * language from it, and this block MIRRORS the new layers back inline so drift
 * stays traceable in both directions. The 21 base vars above stay
 * byte-identical (they are the console's own achromatic set); the semantic
 * layer ALIASES them rather than restating their values.
 *
 * SELF-CONTAINED: every value is inlined as a custom property — no import
 * rules, no external origin (assert_self_contained enforces this over the
 * file). The design-system fonts.css pulls Fira Code from Google Fonts with an
 * import rule; that rule is DROPPED here, and the monospace stack degrades to
 * ui-monospace on machines without SF Mono or a local Fira Code.
 *
 * THEME: light in :root, dark under prefers-color-scheme — complete, equal
 * contracts (the console follows the OS and sets no data-theme, so no
 * [data-theme] scope is added). The console register stays ACHROMATIC: focus
 * is #000, no hue. The Rig yellow/plated palette is DEFINED here but APPLIED
 * only under the telemetry scope, so it never bleeds into the console register.
 * ========================================================================= */

/* Layer 1 — semantic role layer (semantic.css §23). Surface / text / border /
 * focus roles ALIAS the achromatic base above, so they follow the theme with
 * no second value set and never duplicate a base colour. The status roles
 * (information / success / warning / danger / attention) and their tints are
 * the semantic layer's only hues, alongside the identity accent; those carry
 * their own complete light/dark sets. A view reaches for a role, never a hue
 * directly, and no state is ever carried by colour alone. */
:root {
  --role-background: var(--bg);
  --role-surface: var(--surface);
  --role-surface-raised: #ffffff;
  --role-surface-sunken: #f0f0f2;
  --role-border: var(--line);
  --role-border-strong: var(--line-strong);
  --role-text: var(--ink);
  --role-text-strong: var(--ink-strong);
  --role-muted: var(--muted);
  --role-focus: var(--ink-strong);
  --role-information: #0b6fa8;
  --role-success: #1e7a48;
  --role-warning: #8a5300;
  --role-danger: #b02a24;
  --role-attention: #8a6a00;
  --role-information-tint: #e8f2f9;
  --role-success-tint: #e7f3ec;
  --role-warning-tint: #fbf1e2;
  --role-danger-tint: #fbeceb;
  --role-attention-tint: #fdf6dd;
}
@media (prefers-color-scheme: dark) {
  :root {
    --role-surface-raised: #1c1e21;
    --role-surface-sunken: #0a0b0c;
    --role-information: #78c8ff;
    --role-success: #7ecf9a;
    --role-warning: #ffb347;
    --role-danger: #ff7070;
    --role-attention: #F2C400;
    --role-information-tint: #12222c;
    --role-success-tint: #13251b;
    --role-warning-tint: #2a2013;
    --role-danger-tint: #2b1615;
    --role-attention-tint: #2a2409;
  }
}

/* Layer 2 — identity presentation roles (identity.css §22) plus the font
 * stacks they alias. Human meaning in sans, technical identity (paths, hashes,
 * versions, word ids, payloads) in mono, the telemetry surface in the
 * dashboard monospace. Fira Code is intentionally NOT fetched (self-contained);
 * the stack degrades to ui-monospace. */
:root {
  --font-sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, monospace;
  --font-mono-dashboard: "SF Mono", "Fira Code", ui-monospace, monospace;

  --type-human: var(--font-sans);
  --type-technical: var(--font-mono);
  --type-terminal: var(--font-mono-dashboard);
  --size-identity-technical: 12px;
  --identity-technical-color: var(--role-muted);
}

/* Layer 3 — the telemetry register (brand.css, the Rig palette; shape.css for
 * --radius-rig). The SECOND register: the plated, monospace counterpart to the
 * achromatic console. Every token is DEFINED here but APPLIED only under the
 * confined .register-telemetry scope (the analytics view). Event-class hues are
 * always paired with the event's typed name, never colour alone. */
:root {
  --rig-steel: #8A897E;
  /* Label ink for the plate: 6.63:1 on --rig-plate, 6.12:1 on --rig-surface
   * (clarity item 18; --rig-steel is 4.47:1 on the surface). */
  --rig-steel-ink: #A3A296;
  --rig-yellow: #F2C400;
  --rig-offwhite: #F8F9F4;
  --rig-plate: #1D1C18;
  --rig-surface: #24231E;
  --rig-line: #3A3933;
  --rig-line-soft: #2A2924;
  --rig-event-stop: #ff7070;
  --rig-event-request: #78c8ff;
  --radius-rig: 4px;
}

/* Named scales the console lacked — spacing (spacing.css), shape hairlines and
 * focus geometry (shape.css), the type scale and tracking (typography.css) and
 * the near-absent motion set (motion.css). Only the tokens a rule READS stay
 * here (Phase 5 review round 5: 43 unread "vocabulary" tokens — among them a
 * breakpoint that contradicted the shipped 1100/720 px pair and one named for
 * the retired jump stub — were deleted, and --rail-width now drives the
 * .console grid; tests/tokens.test.mjs refuses an
 * unread token). --radius (a base var) is deliberately not restated. */
:root {
  --rail-width: 15rem;
  --outlet-max: 72rem;

  --focus-width: 2px;
  --focus-offset: 2px;

  --size-small: 0.85rem;
  --size-card-title: 0.95rem;
  --size-page-title: 1.05rem;
  --weight-regular: 400;
  --weight-semibold: 600;
  --track-label: 0.08em;
  --track-wide: 0.1em;

}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 14px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
}
:focus-visible { outline: 2px solid var(--ink-strong); outline-offset: 2px; }

/* Shell layout: left rail (places) + canvas (routing strip, slots, outlet). */
.console { display: grid; grid-template-columns: var(--rail-width) 1fr; min-height: 100vh; }
.rail {
  border-right: 1px solid var(--line); padding: 1rem 0.75rem;
  display: flex; flex-direction: column; gap: 0.15rem; background: var(--surface);
}
.rail-brand {
  font-weight: 700; font-size: 1rem; padding: 0.25rem 0.5rem 0.9rem;
  color: var(--ink-strong);
}
/* RailCategory (clarity item 15, Foundation §4): three labelled groups —
 * Organization / Operations / You — each place an icon AND its label. */
.rail-category { display: flex; flex-direction: column; gap: 0.1rem; margin-bottom: 0.6rem; }
.rail-category-label {
  margin: 0.4rem 0.5rem 0.2rem; font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted);
}
.place {
  display: flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0.5rem;
  border-radius: var(--radius); color: var(--ink); text-decoration: none;
}
.place-icon { display: inline-flex; flex: none; width: 16px; height: 16px; }
.place-icon svg { width: 16px; height: 16px; }
.place-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.place:hover { background: var(--bg); }
a.place[aria-current] { background: var(--invert-bg); color: var(--invert-ink); font-weight: 600; }

/* Collapsed rail (⌘B, and the default on medium widths): icons only, the
 * label kept for assistive tech (clipped, never visibility:hidden or
 * display:none — pinned by tokens.test.mjs) and shown as a flyover on
 * hover/focus. */
.console[data-rail="collapsed"] { grid-template-columns: 3.5rem 1fr; }
.console[data-rail="collapsed"] .rail { padding: 1rem 0.4rem; }
.console[data-rail="collapsed"] .rail-brand,
.console[data-rail="collapsed"] .rail-category-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.console[data-rail="collapsed"] .place { justify-content: center; position: relative; }
.console[data-rail="collapsed"] .place-label {
  /* clip-based hide: the label stays in the accessibility tree (unlike
   * visibility:hidden which removes it), and is shown as a flyover on
   * hover/focus-visible by removing the clip. */
  position: absolute; left: calc(100% + 0.4rem); top: 50%; transform: translateY(-50%);
  background: var(--invert-bg); color: var(--invert-ink); border-radius: var(--radius);
  padding: 0.2rem 0.5rem; font-size: 0.8rem; pointer-events: none; z-index: 20;
  opacity: 0; overflow: hidden; clip: rect(0 0 0 0);
}
.console[data-rail="collapsed"] .place:hover .place-label,
.console[data-rail="collapsed"] .place:focus-visible .place-label {
  opacity: 1; overflow: visible; clip: auto;
}

/* The account menu (clarity item 17): the head's AccountMenu names the
 * caller and their role as a word, and holds Profile · Session · Sign out —
 * sign-out behind a ConfirmationDialog. It REPLACES the rail-foot account. */
.account-menu { position: relative; }
.account-trigger { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.account-name { display: block; font-weight: 600; color: var(--ink-strong); }
.account-role { display: block; font-size: 0.72rem; color: var(--muted); }
/* F4 / Foundation §26: the held session's word and age are visible text on
 * the trigger (never a hover title alone). */
.account-held { display: block; font-size: 0.72rem; color: var(--role-attention); }
.account-held[hidden] { display: none; }
.account-menu-panel {
  position: absolute; right: 0; top: calc(100% + 0.35rem); min-width: 12rem; z-index: 30;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: var(--shadow-overlay); padding: 0.3rem; display: flex; flex-direction: column;
}
.account-menu-panel[hidden] { display: none; }
.account-menu-item {
  display: block; width: 100%; text-align: left; padding: 0.4rem 0.6rem; border: 0;
  border-radius: var(--radius); background: none; font: inherit; color: var(--ink);
  text-decoration: none; cursor: pointer;
}
.account-menu-item:hover, .account-menu-item:focus-visible { background: var(--bg); }

/* Auth-aware shell modes (F1). The rail, the header, and the scope indicator
 * are CHROME, keyed off the mode #console resolves ONCE at boot: a
 * still-resolving ("booting") or signed-out arrival paints NO navigation, so
 * a signed-out person never flashes the console's structure and never sees a
 * login form nested inside it. Signed-in restores the full grid. */
.console[data-shell="booting"],
.console[data-shell="verifying"],
.console[data-shell="signed-out"] { grid-template-columns: 1fr; }
.console[data-shell="booting"] .rail,
.console[data-shell="booting"] .head,
.console[data-shell="booting"] .scope-indicator,
.console[data-shell="verifying"] .rail,
.console[data-shell="verifying"] .head,
.console[data-shell="verifying"] .global-notice,
.console[data-shell="signed-out"] .rail,
.console[data-shell="signed-out"] .head,
.console[data-shell="signed-out"] .scope-indicator { display: none; }
/* Signed out (and C14's verifying state): the outlet is the whole viewport
 * and centers its one child — the clean login card, or the "could not verify
 * your session — retrying" region that keeps the session. */
.console[data-shell="signed-out"] .outlet,
.console[data-shell="verifying"] .outlet {
  max-width: none; min-height: 100vh;
  display: grid; place-items: center;
}
/* The account menu shows only once auth has resolved to signed-in (belt with
 * the whole-head hide above). */
.console:not([data-shell="signed-in"]) .account-menu { display: none; }
/* F8: the worlds seam stays in the DOM (the shell owns it) but shows nothing
 * until a world is active — no internal jargon reaches a user on a worldless
 * deployment. */
.scope-indicator[data-state="no-world-active"] { display: none; }

.canvas { display: flex; flex-direction: column; min-width: 0; }
/* The head is UNCONDITIONAL once signed in (C12, clarity item 4): the page
 * title echo, the view SearchField bound to `/`, the CommandMenu trigger with
 * its visible ⌘K/Ctrl K hint, the worlds scope seam and the AccountMenu. The
 * pre-Phase-5 `:has()` collapse is gone — it hid the head on every worldless
 * deployment, which was every deployment. */
.head {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 1.5rem;
  border-bottom: 1px solid var(--line); background: var(--surface); min-height: 3.25rem;
}
.head-button {
  display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  color: var(--ink); font: inherit; font-size: 0.85rem; padding: 0.3rem 0.55rem;
}
.head-button:hover { background: var(--bg); }
.head-title { flex: 0 1 auto; min-width: 0; font-size: 0.9rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.head-page-title { color: var(--ink-strong); font-weight: 600; }
.page-search { flex: 1 1 auto; display: flex; justify-content: flex-end; min-width: 0; }
.head .search-field { max-width: 20rem; width: 100%; }
.head .search-field input:disabled { cursor: not-allowed; }
.shortcut-hint, .shortcut-sheet-list kbd {
  font-family: ui-monospace, monospace; font-size: 0.72rem; color: var(--muted);
  border: 1px solid var(--line); border-radius: 4px; padding: 0 0.3rem;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* GlobalNotice (§25/§26): the shell's one line for offline, a session the
 * platform could not verify (C14), a stale fold. Hidden while empty. */
.global-notice { padding: 0.4rem 1.5rem; border-bottom: 1px solid var(--line); background: var(--surface); }
.global-notice[hidden] { display: none; }
.global-notice-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; }
.global-notice-item svg { width: 15px; height: 15px; flex: none; }
.global-notice-item[data-tone="attention"] { color: var(--role-attention); }
.global-notice-item[data-tone="danger"] { color: var(--role-danger); }
.global-notice-item[data-tone="information"] { color: var(--role-information); }
.scope-indicator {
  font-size: 0.8rem; color: var(--muted); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 0.15rem 0.6rem;
  font-family: ui-monospace, monospace; white-space: nowrap;
}
/* Wave D: a world-ACTIVE session (a VERIFIED World Service manifest, not a
 * selection) reads stronger than the world-default pin — ink over muted, and
 * a leading dot in the accent the head already owns. Expiry or revocation
 * returns the seam to `world-default` (or hidden), so this state never
 * outlives its manifest. */
.scope-indicator[data-state="world-active"] {
  color: var(--ink-strong); border-color: var(--ink);
}
.scope-indicator[data-state="world-active"]::before {
  content: "●"; margin-right: 0.45rem; font-size: 0.6rem;
  vertical-align: 0.08rem; color: var(--ink-strong);
}
/* F4 / Foundation §26 on the World dimension: in the offline-held mode the
 * pin is painted from the shell's last-good copy as a HELD state — the same
 * words plus "· loaded <age> ago", muted and dashed, never the live state's
 * ink or dot (Phase 5 review round 4). */
.scope-indicator[data-state="world-active-held"],
.scope-indicator[data-state="world-default-held"] {
  color: var(--muted); border-style: dashed; border-color: var(--role-attention);
}
.outlet { padding: 1.5rem; max-width: var(--outlet-max); width: 100%; }
/* Throttle Studio (views/workspaces): the studio is full-bleed inside the
 * outlet — no page frame, no max-width — and the console becomes a bounded
 * 100vh grid so the studio's four columns get a real height for xterm to
 * render against. Keyed by the attribute the view sets on the outlet at
 * mount and removes at teardown; the /workspaces directory keeps the
 * ordinary frame. The studio's own vocabulary lives in studio.css. */
.outlet[data-layout="studio"] {
  padding: 0; max-width: none; flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
}
.console:has(.outlet[data-layout="studio"]) { height: 100vh; }
.console:has(.outlet[data-layout="studio"]) .canvas { min-height: 0; }
.canvas-missing { color: var(--muted); }
.noscript { padding: 1rem 1.5rem; }

/* Content vocabulary shared by views. */
.grid {
  display: grid; gap: 1rem; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.25rem 1.4rem;
}
.card h2 { font-size: 0.95rem; margin: 0 0 0.5rem; color: var(--ink-strong); }
.card p { margin: 0.4rem 0; }
.note { color: var(--muted); font-size: 0.85rem; }
a { color: var(--ink); }
a.button {
  display: inline-block; margin-top: 0.75rem; padding: 0.55rem 1rem;
  border-radius: var(--radius); background: var(--invert-bg);
  color: var(--invert-ink); text-decoration: none; font-weight: 600;
  border: 1px solid var(--ink-strong);
}
pre {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 0.6rem 0.8rem; overflow-x: auto;
  font-size: 0.85rem; margin: 0.5rem 0;
}
code { font-family: ui-monospace, monospace; }
table { border-collapse: collapse; width: 100%; }
td {
  border-bottom: 1px solid var(--line); padding: 0.35rem 0.5rem;
  text-align: right; font-variant-numeric: tabular-nums;
}
th {
  border-bottom: 1px solid var(--line); padding: 0.35rem 0.5rem;
  text-align: right; font-variant-numeric: tabular-nums;
  color: var(--muted); font-weight: 600; font-size: 0.8rem;
}
th:first-child, td:first-child { text-align: left; }
ul.plain { list-style: none; padding: 0; margin: 0.4rem 0; }
ul.plain li { padding: 0.2rem 0; }
.view-head { margin-bottom: 1rem; }

/* The clean login card (F10): one centered card, one action. The signed-out
 * shell mode centers this in the outlet, so the card owns only its own
 * width and rhythm — the brand, one line of subtitle, the single Continue
 * action, a machine-registration hint, and a small footer. */
.login-card {
  max-width: 22rem; width: 100%; text-align: center;
  padding: 2rem 2rem 1.75rem;
}
.login-brand { font-size: 1.4rem; margin: 0 0 0.4rem; color: var(--ink-strong); font-weight: 700; }
.login-subtitle { margin: 0 0 1.25rem; }
.login-hint { margin-top: 1.25rem; }
.login-footer { margin-top: 1rem; font-size: 0.78rem; }

/* State signals: weight and inversion, never hue (evidence classes stay
 * visually distinct exactly as the embedded panel rendered them). */
.badge {
  display: inline-block; border-radius: var(--radius); padding: 0 0.4rem;
  font-size: 0.8rem; border: 1px solid var(--line-strong);
}
[data-render="omitted"] { color: var(--muted); }
[data-render="stale"] { background: var(--invert-bg); color: var(--invert-ink); border-color: var(--invert-bg); }
[data-render="unavailable"] { color: var(--muted); font-style: italic; }
/* A refused value (a divergence sentence, a gate refusal, a ledger error):
   quiet emphasis, never color-alone — the words carry the signal. An
   UNREAD authority (review round 6) reads the same way under its own word. */
[data-render="denied"],
[data-render="unknown"] { color: var(--muted); font-style: italic; }
/* A gated place link (disabled-never-hidden): the .button silhouette without
   the affordance, so a gated header control keeps its shape and NAMES the
   role it requires beside it. */
span.button[aria-disabled="true"] {
  display: inline-block; margin-top: 0.75rem; padding: 0.55rem 1rem;
  border-radius: var(--radius); background: var(--surface);
  color: var(--muted); font-weight: 600;
  border: 1px dashed var(--muted); cursor: not-allowed;
}

/* CommandMenu (clarity item 7) and the `?` shortcut sheet: shell layers
 * over a scrim. F2 still holds: `display: grid` outranks the `hidden`
 * attribute's UA `display: none`, so each carries a class+attribute rule
 * that restores the dismiss. */
.command-menu, .shortcut-sheet {
  position: fixed; inset: 0; background: var(--scrim); z-index: 40;
  display: grid; place-items: start center; padding-top: 12vh;
}
.command-menu[hidden], .shortcut-sheet[hidden] { display: none; }
.command-menu-panel, .shortcut-sheet-panel {
  background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-overlay);
  border-radius: var(--radius); width: min(34rem, calc(100vw - 2rem)); padding: 0.75rem;
}
.command-menu-input {
  width: 100%; font: inherit; font-size: 1rem; padding: 0.45rem 0.6rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius);
}
.command-menu-list { margin: 0.5rem 0; max-height: 50vh; overflow: auto; }
.command-menu-option {
  display: block; padding: 0.4rem 0.5rem; border-radius: var(--radius);
  color: var(--ink); text-decoration: none;
  width: 100%; text-align: left; border: 0; background: none; font: inherit; cursor: pointer;
}
.command-menu-option[aria-selected="true"], .command-menu-option:hover, .command-menu-option:focus-visible {
  background: var(--invert-bg); color: var(--invert-ink); outline: none;
}
.command-menu-group {
  margin: 0.5rem 0.5rem 0.15rem; font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted);
}
.command-menu-empty, .command-menu-hint, .shortcut-sheet-rule { margin: 0.25rem 0; color: var(--muted); font-size: 0.8rem; }
.command-trigger { flex: none; }
.head-crumb { color: var(--muted); }
.global-notice-text { min-width: 0; }
.session-sheet .act-group { margin-top: 0.75rem; }
.shortcut-sheet-panel h2 { margin: 0 0 0.4rem; font-size: var(--size-card-title); }
.shortcut-sheet-list { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; margin: 0.5rem 0 0; }
.shortcut-sheet-list dd { margin: 0; }

/* Medium widths (≤ 1100 px): app.js collapses the rail (data-rail=
 * "collapsed", the rules above: icons with the label as a flyover) at boot
 * and when the width crosses the breakpoint; ⌘B still expands it. The head
 * drops the CommandMenu trigger's word and keeps its icon and hint. */
@media (max-width: 1100px) {
  .command-trigger-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* Mobile (≤ 720 px): the rail becomes a bottom bar of icons; the head keeps
 * the title, the CommandMenu trigger, the account menu AND the scope pin —
 * collapsed to a short ellipsised pin whose full text stays in its title
 * (Foundation §21/§28: the host provides the Scope display; review round 3:
 * `display: none` here dropped the world-default/world-active pin on a phone
 * with no reason and no other shell surface carrying it). */
@media (max-width: 720px) {
  /* The collapsed-rail grid never applies on a phone: the rail is the
   * bottom bar whatever ⌘B last chose. */
  .console[data-shell="signed-in"],
  .console[data-shell="signed-in"][data-rail="collapsed"] { grid-template-columns: 1fr; padding-bottom: 3.5rem; }
  .console[data-shell="signed-in"] .rail-brand,
  .console[data-shell="signed-in"] .rail-category-label { display: none; }
  .head-title { flex: 1 1 auto; }
  .account-name { max-width: 7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .scope-indicator { max-width: 6.5rem; overflow: hidden; text-overflow: ellipsis; padding: 0.1rem 0.4rem; font-size: 0.7rem; }
  .command-menu, .shortcut-sheet { padding-top: 1rem; }
  .page-actions { margin-left: 0; }
  .change-list li { grid-template-columns: 1.25rem 1fr; }
  .change-list li .change-value { grid-column: 2; }
  .console[data-shell="signed-in"] .rail {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; flex-direction: row;
    overflow-x: auto; padding: 0.3rem; border-right: 0; border-top: 1px solid var(--line);
  }
  .console[data-shell="signed-in"] .rail-category { flex-direction: row; margin: 0; gap: 0; }
  /* The bottom bar shows every place's LABEL under its icon (Foundation §4:
   * icons-only is allowed only where hover/focus reveals the label, and a
   * phone has neither) — the bar scrolls sideways when thirteen do not fit.
   * The collapsed-rail flyover rule (`data-rail="collapsed"`, medium widths
   * collapse by default) is overridden here on every state, hover and
   * focus included, so the label is static, never absolutely positioned or
   * clipped. tokens.test.mjs pins it visible. */
  .console[data-shell="signed-in"] .place {
    flex-direction: column; gap: 0.15rem; padding: 0.35rem 0.5rem; min-width: 4.25rem;
    font-size: 0.68rem; line-height: 1.2; text-align: center; flex: none;
  }
  .console[data-shell="signed-in"] .place-label,
  .console[data-shell="signed-in"] .place:hover .place-label,
  .console[data-shell="signed-in"] .place:focus-visible .place-label {
    position: static; width: auto; height: auto; padding: 0; overflow: visible;
    clip: auto; opacity: 1; transform: none; background: transparent; color: inherit;
    white-space: nowrap; pointer-events: auto; font-size: inherit;
  }
  .head { padding: 0.5rem 1rem; gap: 0.5rem; }
  .head .page-search, .rail-toggle { display: none; }
  .outlet { padding: 1rem; }
}

/* ============================================================================
 * GOVERNANCE CONSOLE — proposals queue + record vocabulary (Phase 1c)
 * ----------------------------------------------------------------------------
 * The 1-DS component set in the ACHROMATIC console register: a PageHeader
 * (foundation §10), a StatusBadge keyed off the --role-* status tokens (hue
 * always paired with the typed status word), status facets, a CopyableIdentity
 * in --type-technical, a Section rhythm that is NOT five equal cards
 * (foundation §12), the ConfirmationDialog consequential-action fence
 * (foundation §14), and the persistent Receipt. Nothing here reaches the
 * telemetry register; every value is a token and no external origin appears.
 * ========================================================================= */

/* PageHeader — breadcrumb, title row, purpose (foundation §10). */
.page-header { margin-bottom: 1.25rem; }
.page-header .breadcrumb {
  color: var(--role-muted); font-size: var(--size-small); margin: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem;
}
.page-header .breadcrumb a { color: inherit; text-decoration: none; }
.page-header .breadcrumb a[aria-current] { color: var(--role-text-strong); font-weight: var(--weight-semibold); }
.page-header-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin: 0.25rem 0; }
.page-header h1 { font-size: var(--size-page-title); margin: 0; color: var(--role-text-strong); }
.page-header .purpose { color: var(--role-muted); margin: 0.15rem 0 0; }


/* Status facets — the queue's filter row (a Toolbar of typed status chips). */
.facets { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.75rem 0; }
button.facet {
  display: inline-flex; align-items: baseline; gap: 0.35rem; cursor: pointer;
  border: 1px solid var(--role-border-strong); border-radius: var(--radius);
  padding: 0.2rem 0.6rem; background: var(--role-surface); color: var(--role-text);
  font: inherit; font-size: var(--size-small);
}
button.facet:hover { background: var(--bg); }
button.facet[aria-pressed="true"] {
  background: var(--invert-bg); color: var(--invert-ink);
  border-color: var(--invert-bg); font-weight: var(--weight-semibold);
}
.facet-count { font-variant-numeric: tabular-nums; color: inherit; }

/* CopyableIdentity — a technical id/hash in --type-technical + a copy button. */
.identity-value {
  font-family: var(--type-technical); font-size: var(--size-identity-technical);
  color: var(--identity-technical-color); overflow-wrap: anywhere;
}

/* Estate tree rows (views/inside): a QUIET inline activation — a real
   <button> with the UA chrome reset, so a tree row reads as content, not a
   form control, and the row's leading indent (inside the button) stays on
   one line. The rail's .place is display:block and must not be reused here.
   Console-side addition; upstreaming to the design-systems master is the
   recorded follow-up. */
button.tree-item {
  background: none; border: 0; font: inherit; color: inherit;
  display: inline; padding: 0.1rem 0.3rem; border-radius: var(--radius);
  cursor: pointer; text-align: left; white-space: pre-wrap;
}
button.tree-item:hover { background: var(--bg); }
button.tree-item[aria-current="true"] {
  background: var(--invert-bg); color: var(--invert-ink); font-weight: 600;
}

/* Shared view chrome (Foundation-shape ports, re-expressed in the console's
 * scales; upstreaming to the design-systems master is the recorded
 * follow-up): the toolbar row, the view search field with its `/` hint,
 * the segmented mode switch, kbd hints, and inline glyph sizing. */
.toolbar { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0.75rem 0; }
.toolbar-spacer { flex: 1 1 auto; }
.search-field {
  display: inline-flex; align-items: center; gap: 0.4rem;
  border: 1px solid var(--role-border-strong); border-radius: var(--radius);
  padding: 0 0.5rem; height: 1.9rem; background: var(--role-surface); min-width: 14rem;
}
.search-field .glyph { color: var(--role-muted); flex: none; }
.search-field input { border: 0; outline: 0; background: none; font: inherit; color: var(--role-text); width: 100%; height: 100%; }
.search-field:focus-within { border-color: var(--role-focus); }
kbd {
  font-family: ui-monospace, monospace; font-size: 0.72rem; color: var(--role-muted);
  border: 1px solid var(--role-border); border-radius: 4px; padding: 0 0.3rem;
}
.mode-switch { display: inline-flex; border: 1px solid var(--role-border-strong); border-radius: var(--radius); overflow: hidden; }
.mode-switch button { background: var(--role-surface); border: 0; font: inherit; font-size: 0.85rem; color: var(--role-muted); padding: 0.2rem 0.6rem; cursor: pointer; }
.mode-switch button + button { border-left: 1px solid var(--role-border-strong); }
.mode-switch button[aria-pressed="true"] { background: var(--invert-bg); color: var(--invert-ink); font-weight: 600; }
.glyph { display: inline-block; vertical-align: -0.15em; }

/* Clarity item 20: `.field` and `.empty-state` were each defined TWICE here
 * with different child classes (the later silently won). One definition each
 * now lives in the FOUNDATION COMPONENT LIBRARY block below; the /inside
 * bundle's `.empty-title/.empty-body/.empty-actions` children moved to the
 * component's own `.empty-state-*` names. Pinned by
 * console/tests/tokens.test.mjs (no top-level selector is defined twice). */



/* Section rhythm — semantic division without forcing five equal cards. */
.section { margin: 1.5rem 0; }
.section > h2 {
  font-size: var(--size-card-title); margin: 0 0 0.5rem; color: var(--role-text-strong);
}
.section.sunken {
  background: var(--role-surface-sunken); border: 1px solid var(--role-border);
  border-radius: var(--radius); padding: 1rem 1.2rem;
}

/* Console buttons — the achromatic counterpart to a.button, so a real
 * <button class="button"> (the /inside bundle's game and multiverse
 * controls emit it) carries the same weight and a legible disabled. */
button.button {
  display: inline-block; padding: 0.55rem 1rem; border-radius: var(--radius);
  background: var(--invert-bg); color: var(--invert-ink); text-decoration: none;
  font: inherit; font-weight: var(--weight-semibold); border: 1px solid var(--ink-strong);
  cursor: pointer;
}
button.button:disabled { opacity: 0.5; cursor: not-allowed; }
button.button.secondary {
  background: var(--role-surface); color: var(--role-text);
  border-color: var(--role-border-strong);
}
button.button.danger { border-color: var(--role-danger); color: var(--role-danger); background: var(--role-surface); }

/* Clickable queue rows — a whole row navigates; the per-row link keeps it
 * keyboard-reachable, the technical id set in --type-technical. */
tr.row-nav { cursor: pointer; }
tr.row-nav:hover td { background: var(--role-surface-sunken); }
tr.row-nav a[data-nav] {
  font-family: var(--type-technical); font-size: var(--size-identity-technical);
  text-decoration: none; color: var(--role-text-strong);
}

/* ConfirmationDialog — the consequential-action fence (foundation §14). It
 * shares the CommandMenu overlay geometry but is its own bounded dialog surface.
 * The panel is BOUNDED to the viewport and scrolls inside: a form taller
 * than the viewport (the studio's Add-lane dialog with its correction lines
 * and a refusal region on a laptop with browser chrome) otherwise pinned to
 * the scrim's top padding and ran its action row off the bottom edge with
 * nothing that could scroll to it — the scrim is position: fixed (MEASURED
 * in headless Chromium at 1366×650, review round 3 of Throttle Studio
 * Phase 2). The bound is functional, not a style. */
.dialog {
  position: fixed; inset: 0; background: var(--scrim);
  display: grid; place-items: center; padding: 1rem;
  /* Above EVERY fixed or floating chrome layer (the phone's bottom rail at 25,
   * the menus at 30, the CommandMenu and sheets at 40): a modal fence whose
   * scrim sat under the fixed rail left thirteen places tappable while Sign
   * out / Stop lane was open (Phase 5 review round 1, MEASURED at 390 px).
   * tokens.test.mjs pins this as the highest z-index in the sheet. */
  z-index: 45;
}
.dialog-panel {
  background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-overlay);
  border-radius: var(--radius); max-width: 32rem; width: 100%; padding: 1.25rem 1.4rem;
  max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); overflow: auto;
}
.dialog-panel h2 { margin: 0 0 0.5rem; font-size: var(--size-card-title); color: var(--ink-strong); }
.dialog-panel textarea {
  width: 100%; font: inherit; margin-top: 0.35rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); padding: 0.4rem 0.5rem;
}
.dialog-actions { display: flex; gap: 0.6rem; justify-content: flex-end; margin-top: 1rem; }

/* Receipt — persistent evidence of a completed decision (never a toast). */
.receipt {
  border: 1px solid var(--role-success); background: var(--role-success-tint);
  border-radius: var(--radius); padding: 0.85rem 1rem; margin-top: 1rem;
}
.receipt h2 {
  margin: 0 0 0.4rem; font-size: var(--size-small); text-transform: uppercase;
  letter-spacing: var(--track-label); color: var(--role-success);
}
.receipt dl { margin: 0; }

/* ============================================================================
 * TELEMETRY REGISTER — confined skin (Phase 1-DS)
 * ----------------------------------------------------------------------------
 * The plated, monospace dashboard, applied ONLY under .register-telemetry —
 * the analytics view's plated regions. Every --rig-* application in this file
 * lives under this one selector, so the achromatic rail, shell and the other
 * views never see the Rig palette (no leak). Reference: the design-system
 * ui_kits/telemetry/rig.css (dashboard/index.html). Layout classes carry the
 * rig- prefix; the shared .badge / table vocabulary is re-skinned in
 * place, but only within this scope.
 * ========================================================================= */
.register-telemetry {
  background: var(--rig-plate); color: var(--rig-offwhite);
  font-family: var(--font-mono-dashboard); font-size: 0.8rem;
  border: 1px solid var(--rig-line); border-radius: var(--radius-rig);
  overflow: hidden; padding: 0.75rem 1rem;
}
/* Clarity item 18: since Phase 5 the plate is CONFINED to the dense rollup
 * table — the readiness and freshness summary moved to the achromatic
 * console register — and every ink the register applies clears 4.5:1 on
 * both the plate and the hover surface. The vendored --rig-steel measured
 * 4.47:1 on --rig-surface, so labels use --rig-steel-ink and body text the
 * off-white (console/tests/tokens.test.mjs measures every `color:` here). */
.register-telemetry h2 {
  color: var(--rig-steel-ink); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: var(--track-wide); margin: 0 0 0.6rem;
  font-weight: var(--weight-semibold);
}
.register-telemetry p { color: var(--rig-offwhite); margin: 0.3rem 0; }
.register-telemetry code { font-family: inherit; color: var(--rig-yellow); }
/* The hourly rollup as a telemetry events table: monospace, 1px lines, the
 * plated surface, a row hover. */
.register-telemetry table { border-collapse: collapse; width: 100%; }
.register-telemetry th {
  color: var(--rig-steel-ink); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: var(--track-label); font-weight: var(--weight-semibold);
  border-bottom: 1px solid var(--rig-line); padding: 0.4rem 0.5rem;
  text-align: right;
}
.register-telemetry td {
  border-bottom: 1px solid var(--rig-line-soft); padding: 0.35rem 0.5rem;
  text-align: right; font-variant-numeric: tabular-nums; font-size: 0.85rem;
  color: var(--rig-offwhite);
}
.register-telemetry th:first-child,
.register-telemetry td:first-child { text-align: left; color: var(--rig-offwhite); }
.register-telemetry tbody tr:hover td { background: var(--rig-surface); }
.register-telemetry [data-render="omitted"] { color: var(--rig-steel-ink); }
/* Event-class hue on the request and refusal counts of each analytics day row —
 * paired with the count, never colour alone. */
.register-telemetry .rig-request { color: var(--rig-event-request); }
.register-telemetry .rig-refusal { color: var(--rig-event-stop); }
/* The daily table's Provider / Model / Lane filter row sits on the plate: the
 * console's .field carries --role-muted (2.78:1 on the plate in light mode),
 * so inside the register its label takes the plate's label ink and its select
 * the plate's surface — both measured by tokens.test.mjs's registerInks pass. */
.register-telemetry .field,
.register-telemetry .field-label { color: var(--rig-steel-ink); }
.register-telemetry .field select {
  background: var(--rig-surface); color: var(--rig-offwhite);
  border-color: var(--rig-line);
}

/* ============================================================================
 * FOUNDATION COMPONENT LIBRARY  ·  the shared class vocabulary the views
 * migrate onto (window.Console.components — components.js). Every class here is
 * the Throttle Webview UX Foundation's own name (design-systems
 * systems/throttle/patterns/shell.css) rendered in the ACHROMATIC console
 * register: PageHeader §10, Section §12, the status grammar §13, the action
 * hierarchy §14, identity §22/§23. Self-contained: every value is a token or a
 * literal — no external origin, no import rules, no shadow except the one overlay
 * elevation below. Where a class already exists above (.page-header,
 * .page-header-row, h1, .purpose, .section, .dialog/.dialog-panel/.dialog-
 * actions, .receipt, button.button, .sbadge) it is REUSED, and only the
 * missing element rules are added here.
 * ========================================================================= */

/* The one shadow the flat console permits — overlays only (dialogs, menus). */
:root { --shadow-overlay: 0 8px 28px rgba(23, 24, 26, 0.18); }
@media (prefers-color-scheme: dark) { :root { --shadow-overlay: 0 10px 32px rgba(0, 0, 0, 0.6); } }

/* The loading/pending spinner (companion to the existing throttle-pulse). */
@keyframes throttle-spin { to { transform: rotate(360deg); } }

/* ── DefinitionList — the FIX for the broken "Current state" dl ─────────────
 * A two-column grid: the term (muted, small) beside its verbatim wire value.
 * Emitted by components.definitionList (every hand-written view) and the
 * refinery bundle's own <dl className="plain">; no view hand-rolls it. */
dl.plain {
  display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 1rem;
  margin: 0.4rem 0;
}
dl.plain dt { color: var(--role-muted); font-size: 0.85rem; }
dl.plain dd { margin: 0; color: var(--role-text); overflow-wrap: anywhere; }

/* ── Field — the labelled input/select/textarea (was unstyled) ──────────────
 * The label is a small muted block; the control is a full-width bordered box
 * with a visible focus ring. Styles both the existing inline
 * <label class="field">text<input></label> and components.field's
 * <label class="field"><span class="field-label"> form. */
.field { display: block; margin: 0.7rem 0; font-size: 0.85rem; color: var(--role-muted); }
.field-label { display: block; margin-bottom: 0.25rem; }
.field input, .field select, .field textarea {
  display: block; width: 100%; margin-top: 0.25rem;
  font: inherit; font-size: 1rem; color: var(--role-text);
  background: var(--role-surface);
  border: 1px solid var(--role-border-strong); border-radius: var(--radius);
  padding: 0.35rem 0.5rem; resize: vertical;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: var(--focus-width) solid var(--role-focus); outline-offset: var(--focus-offset);
}

/* ── StatusBadge (§13/§23) — ONE role vocabulary (clarity item 12) ─────────
 * Never colour alone. Exactly five roles: attention | success | danger |
 * information | neutral (components.js STATUS_ROLES). `.sbadge` is the class
 * the component library emits; `.status-badge` is the SAME component under
 * the class the generated /inside and /refinery bundles still emit, styled by
 * the same rules. The two legacy role spellings the /refinery bundle still
 * emits ride as aliases IN the canonical rule (warning → attention, strong →
 * information; components.js STATUS_ROLE_ALIASES) — one vocabulary, no second
 * rule set. console/tests/status-roles.test.mjs pins all of it. */
.sbadge, .status-badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  border: 1px solid var(--role-border-strong); border-radius: var(--radius);
  padding: 0.05rem 0.5rem; font-size: 0.8rem; white-space: nowrap;
  color: var(--role-muted); background: var(--role-surface);
}
.sbadge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.sbadge svg { width: 13px; height: 13px; flex: none; }
.sbadge[data-role="attention"], .status-badge[data-role="attention"],
.sbadge[data-role="warning"], .status-badge[data-role="warning"] { color: var(--role-attention); border-color: var(--role-attention); background: var(--role-attention-tint); }
.sbadge[data-role="success"], .status-badge[data-role="success"] { color: var(--role-success); border-color: var(--role-success); background: var(--role-success-tint); }
.sbadge[data-role="danger"], .status-badge[data-role="danger"] { color: var(--role-danger); border-color: var(--role-danger); background: var(--role-danger-tint); }
.sbadge[data-role="information"], .status-badge[data-role="information"],
.sbadge[data-role="strong"], .status-badge[data-role="strong"] { color: var(--role-information); border-color: var(--role-information); background: var(--role-information-tint); }
.sbadge[data-role="neutral"], .status-badge[data-role="neutral"] { color: var(--role-muted); border-color: var(--role-border-strong); background: var(--role-surface); }

/* ── Action hierarchy (§14) — one .act, kind via data-kind ─────────────────
 * A disabled action stays VISIBLE (never hidden); its title names why. */
.act {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font: inherit; font-size: 0.9rem; font-weight: var(--weight-semibold); line-height: 1;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  padding: 0.4rem 0.75rem; border-radius: var(--radius);
  border: 1px solid transparent; background: none; color: var(--role-text);
}
.act svg { width: 15px; height: 15px; flex: none; }
.act[data-kind="primary"] { background: var(--role-text-strong); color: var(--role-surface); border-color: var(--role-text-strong); }
.act[data-kind="primary"]:hover { opacity: 0.88; }
.act[data-kind="secondary"] { background: var(--role-surface); color: var(--role-text); border-color: var(--role-border-strong); }
.act[data-kind="secondary"]:hover { background: var(--role-surface-sunken); color: var(--role-text-strong); }
.act[data-kind="overflow"] { background: none; color: var(--role-muted); border-color: transparent; }
.act[data-kind="overflow"]:hover { background: var(--role-surface-sunken); color: var(--role-text-strong); }
.act[data-kind="danger"] { background: var(--role-surface); color: var(--role-danger); border-color: var(--role-danger); }
.act[data-kind="danger"]:hover { background: var(--role-danger-tint); }
.act:disabled, .act[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.act:focus-visible { outline: var(--focus-width) solid var(--role-focus); outline-offset: var(--focus-offset); }
.act-overflow { width: 2rem; padding: 0.4rem 0; justify-content: center; }

/* The ••• overflow group + its menu (PageHeader collapses low-frequency
 * actions here). The menu is the second permitted use of --shadow-overlay. */
.act-group { display: inline-flex; align-items: center; gap: 0.5rem; position: relative; }
.act-menu {
  position: absolute; top: calc(100% + 0.35rem); right: 0; z-index: 30;
  min-width: 12rem; padding: 0.3rem; background: var(--role-surface-raised);
  border: 1px solid var(--role-border-strong); border-radius: var(--radius);
  box-shadow: var(--shadow-overlay); display: flex; flex-direction: column; gap: 0.1rem;
}
.act-menu[hidden] { display: none; }
.act-menu button {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; width: 100%; text-align: left;
  font: inherit; font-size: 0.9rem; color: var(--role-text); cursor: pointer;
  background: none; border: 0; border-radius: calc(var(--radius) - 2px); padding: 0.4rem 0.6rem;
}
.act-menu button:hover { background: var(--role-surface-sunken); color: var(--role-text-strong); }
.act-menu button:disabled, .act-menu button[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; }
.act-menu-reason { flex-basis: 100%; font-size: 0.78rem; font-weight: 400; color: var(--role-muted); }

/* Clarity item 1 — the denial as VISIBLE text beside the action group: a
 * compact denied line (lock icon + one sentence per distinct reason) that
 * every gated action's aria-describedby points at. Tab reaches the gated
 * button (aria-disabled, never the native disabled) and reads this. */
.act-row { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; }
.act-denial {
  display: flex; align-items: flex-start; gap: 0.4rem; flex-basis: 100%;
  font-size: 0.82rem; color: var(--role-muted); margin-top: 0.3rem;
}
.act-denial > svg { width: 13px; height: 13px; flex: none; margin-top: 0.15rem; }
.act-denial-text p { margin: 0; }

/* ── PageHeader (§10) additions — reuses .page-header/.page-header-row/h1/
 * .purpose above; adds the pinned action group and the mono meta line. */
.page-header .breadcrumb [aria-current] { color: var(--role-text-strong); font-weight: var(--weight-semibold); }
.page-actions { margin-left: auto; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; flex: none; }
.page-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.4rem;
  font-family: var(--type-technical); font-size: var(--size-identity-technical); color: var(--role-muted);
}
.page-meta .sep { opacity: 0.5; }

/* ── Section (§12) — heading + body, not a card. Reuses the existing .section
 * margin; adds the head row (title, note, actions) and the body. */
.section-head { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.section-title { font-size: var(--size-card-title); font-weight: var(--weight-semibold); color: var(--role-text-strong); margin: 0; }
.section-note { font-size: 0.85rem; color: var(--role-muted); margin: 0; }
.section-actions { margin-left: auto; display: inline-flex; gap: 0.5rem; }
.section-body { min-width: 0; }

/* ── StatusRegion (§13) — icon + word + detail + actions. The ten states
 * (components.js STATE_ICON) each carry their own icon, colour and tint; no
 * state is colour alone. */
.status-region {
  display: flex; align-items: flex-start; gap: 0.6rem;
  border: 1px solid var(--role-border); border-radius: var(--radius);
  padding: 0.65rem 0.8rem; background: var(--role-surface); color: var(--role-text); font-size: 0.9rem;
}
.status-region > svg { width: 16px; height: 16px; flex: none; margin-top: 0.1rem; color: var(--role-muted); }
.status-region-body { min-width: 0; }
.status-region-text { color: var(--role-text); }
.status-region-detail { color: var(--role-muted); font-size: 0.85rem; margin-top: 0.2rem; overflow-wrap: anywhere; }
.status-region-actions { margin-top: 0.55rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.status-region[data-state="loading"] > svg,
.status-region[data-state="pending"] > svg { color: var(--role-muted); animation: throttle-spin 900ms linear infinite; }
.status-region[data-state="empty"] > svg,
.status-region[data-state="filtered-empty"] > svg,
.status-region[data-state="unknown"] > svg { color: var(--role-muted); }
.status-region[data-state="denied"] { border-color: var(--role-border-strong); }
.status-region[data-state="denied"] > svg { color: var(--role-muted); }
.status-region[data-state="error"] { border-color: var(--role-danger); background: var(--role-danger-tint); }
.status-region[data-state="information"] { border-color: var(--role-information); background: var(--role-information-tint); }
.status-region[data-state="information"] > svg { color: var(--role-information); }
.status-region[data-state="error"] > svg { color: var(--role-danger); }
.status-region[data-state="offline"], .status-region[data-state="stale"] { border-color: var(--role-warning); background: var(--role-warning-tint); }
.status-region[data-state="offline"] > svg, .status-region[data-state="stale"] > svg { color: var(--role-warning); }
.receipt-line { margin: 0 0 0.4rem; }
/* A stale or last-good analytics document (analytics-view-spec.md §4) is
 * greyed under the banner that says why: the hues drop out, the ink keeps
 * its contrast, and nothing is blanked or zeroed. */
.analytics-held { filter: grayscale(1); }

/* ── EmptyState (§13) — a dashed, centered box for a genuine or filtered
 * empty collection. */
.empty-state {
  border: 1px dashed var(--role-border-strong); border-radius: var(--radius);
  padding: 1.75rem 1.25rem; text-align: center;
}
.empty-state-icon { color: var(--role-muted); margin-bottom: 0.5rem; line-height: 0; }
.empty-state-icon svg { width: 22px; height: 22px; }
.empty-state-title { font-size: 0.95rem; font-weight: var(--weight-semibold); color: var(--role-text-strong); margin: 0 0 0.25rem; }
.empty-state-body { font-size: 0.85rem; color: var(--role-muted); margin: 0 auto; max-width: 46ch; }
.empty-state-actions { margin-top: 0.85rem; display: flex; gap: 0.5rem; justify-content: center; }

/* ── CopyableIdentity (§22) — inline mono id + copy button. Truncation is
 * display only; the full value is always copied and kept in the title. */
.copyable {
  display: inline-flex; align-items: center; gap: 0.4rem; max-width: 100%;
  font-family: var(--type-technical); font-size: var(--size-identity-technical);
  color: var(--role-muted); border: 1px solid var(--role-border);
  border-radius: var(--radius); padding: 0.05rem 0.4rem; background: var(--role-surface-sunken);
}
.copyable .copyable-value { overflow-wrap: anywhere; }
.copyable button {
  display: inline-flex; align-items: center; background: none; border: 0; padding: 0;
  color: var(--role-muted); cursor: pointer; flex: none;
}
.copyable button:hover { color: var(--role-text-strong); }
.copyable button:focus-visible { outline: var(--focus-width) solid var(--role-focus); outline-offset: 1px; }
.copyable button[data-copied="true"] { color: var(--role-success); }
/* A copy that could not happen (no Clipboard API on a non-HTTPS origin and no
 * execCommand) says so for a moment — a word beside the icon, never colour
 * alone (review round 7). */
.copyable button[data-copy-failed="true"] { color: var(--role-danger); gap: 0.25rem; }
.copyable .copyable-word { font-size: var(--size-identity-technical); }
.copyable svg { width: 13px; height: 13px; }

/* ── TechnicalDetails (§22) — a collapsed disclosure of exact ids/revisions in
 * a mono two-column grid. */
.tech-details { border-top: 1px solid var(--role-border); margin-top: 1.25rem; }
.tech-details > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.4rem;
  padding: 0.6rem 0; font-size: 0.85rem; color: var(--role-muted);
}
.tech-details > summary::-webkit-details-marker { display: none; }
.tech-details > summary:hover { color: var(--role-text-strong); }
.tech-details > summary svg { width: 13px; height: 13px; flex: none; transition: transform 120ms ease; }
.tech-details[open] > summary svg { transform: rotate(90deg); }
.tech-details-body {
  padding-bottom: 0.85rem; display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem;
  font-family: var(--type-technical); font-size: var(--size-identity-technical);
}
.tech-details-body dt { color: var(--role-muted); margin: 0; }
.tech-details-body dd { color: var(--role-text); margin: 0; overflow-wrap: anywhere; }

/* ── DataTable — the dense hairline table, wrapped so a wide table scrolls in
 * its own bounds. Cells reuse the base th/td treatment (tabular-nums,
 * right-aligned, first column left); an align override is opt-in per column. */
.table-wrap { overflow-x: auto; }
.table-wrap table { width: 100%; }
th.cell-start, td.cell-start { text-align: left; }
th.cell-end, td.cell-end { text-align: right; }

/* ── ConfirmationDialog (§14) body parts — reuses the existing .dialog overlay,
 * .dialog-panel and .dialog-actions above; adds the overlay elevation and the
 * consequence / correction lines. */
.dialog-consequence { margin: 0 0 0.75rem; color: var(--role-text); }
.dialog-correction { margin: 0.75rem 0 0; font-size: 0.85rem; color: var(--role-muted); }

/* ── Phase 5 view vocabulary (clarity items 1, 9, 10, 11, 16, 18) ──────── */
.page { min-width: 0; }
.field-note { margin: 0.2rem 0 0.6rem; font-size: 0.8rem; color: var(--role-muted); }
.world-picker { display: block; }
.world-picker-world { display: block; }
.link-list { list-style: none; padding: 0; margin: 0.3rem 0; }
.link-list li { padding: 0.2rem 0; }
.caller-line { margin: 0 0 0.5rem; }
.result-slot { min-width: 0; }
/* The folded default-world disclosure on a team record (item 16). */
.section-disclosure { margin: 1.5rem 0; border-top: 1px solid var(--role-border); padding-top: 0.6rem; }
.section-disclosure > summary {
  cursor: pointer; font-size: var(--size-card-title); font-weight: var(--weight-semibold);
  color: var(--role-text-strong);
}
/* A proposal's change as a diff-shaped list (item 10). */
.change-list { list-style: none; padding: 0; margin: 0.4rem 0; font-family: var(--type-technical); font-size: 0.85rem; }
.change-list li { display: grid; grid-template-columns: 1.25rem minmax(8rem, auto) 1fr; gap: 0.5rem; padding: 0.2rem 0; border-bottom: 1px solid var(--role-border); }
.change-op { color: var(--role-muted); }
.change-list li[data-op="add"] .change-op { color: var(--role-success); }
.change-field { color: var(--role-muted); }
.change-value { color: var(--role-text-strong); overflow-wrap: anywhere; }
.change-empty { color: var(--role-muted); }
.change-raw { max-height: 24rem; }
/* The machine-team directory rows (views/machines). */
.mt-block { border-bottom: 1px solid var(--role-border); padding: 0.4rem 0; }
.mt-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; cursor: pointer; }
.mt-count, .mt-dispatch-unset { color: var(--role-muted); font-size: 0.85rem; }
.mt-handle { color: var(--role-muted); font-size: 0.85rem; font-family: var(--type-technical); }
.mt-panel { padding: 0.6rem 0 0.4rem 1rem; }
.mt-more { margin-top: 0.75rem; }
/* The /join invitation card (views/join) — the login card's frame. */
.join-card { text-align: center; }
.join-invite { font-size: 1rem; }
.join-expiry { margin: 0.4rem 0 1rem; }
.join-action { margin-top: 1rem; }
.join-footer { margin-top: 1rem; }
.dialog-panel .status-region, .dialog-panel .receipt { margin-top: 0.75rem; }

/* =========================================================================
 * MULTIVERSE REGISTER — confined skin
 * ----------------------------------------------------------------------------
 * The third register: the cadence machine-panel ground (mode-invariant black,
 * square corners) carrying the validated bright identity axis for the
 * /inside/multiverse world map. Applied ONLY under .register-multiverse —
 * every --mv-* application in this file lives under that one selector, so
 * the achromatic shell and the other views never see these hues (the
 * telemetry-register confinement pattern; a unit test scans this contract
 * for BOTH registers). The webview doctrine's "two and only two registers"
 * gains a PROPOSED third here — recording that doctrine change upstream is
 * the follow-up, exactly like button.tree-item.
 *
 * Identity hues: dataviz-validated against #000000 (all checks pass; the
 * tritan worst pair sits in the 6–8 floor band, which is legal ONLY with
 * secondary encoding — every node co-encodes label + material + shape, and
 * a grayscale render losing nothing is a blocker gate). State hues keep
 * their recorded cadence jobs (lang.css / cadence-design-rc, measured on
 * black). Hues are register-local EXPRESSION, not admitted meaning:
 * semantic_authority is false, and the on-surface legend says so.
 * ========================================================================= */
:root {
  --mv-panel: #000000;
  --mv-court: #0b0b0b;
  --mv-ink: #f2f2f2;
  --mv-muted: #9a9a9a;
  --mv-line: #2e2e2e;
  --mv-line-soft: #1c1c1c;
  --mv-profile-foundation: #305aff;
  --mv-profile-domain: #d66400;
  --mv-profile-product: #ff00aa;
  --mv-profile-partnership: #0e9800;
  --mv-profile-partner: #6e47ff;
  --mv-profile-build: #00939f;
  --mv-profile-realization: #f02800;
  --mv-state-admitted: #00e436;
  --mv-state-evidence: #29adff;
}

.register-multiverse {
  background: var(--mv-panel); color: var(--mv-ink);
  border: 1px solid var(--mv-line); border-radius: 0;
  overflow: hidden; position: relative;
}
.register-multiverse .mv-canvas { display: block; width: 100%; height: 34rem; background: var(--mv-panel); cursor: grab; }
.register-multiverse .mv-canvas:active { cursor: grabbing; }
.register-multiverse .mv-band-line { stroke: var(--mv-line-soft); }
.register-multiverse .mv-band-label { fill: var(--mv-muted); font-family: ui-monospace, monospace; font-size: 0.62rem; letter-spacing: 0.08em; }
.register-multiverse .mv-node { cursor: pointer; }
.register-multiverse .mv-node .mv-territory { stroke-width: 1.5; }
.register-multiverse .mv-node text { fill: var(--mv-ink); font-size: 0.72rem; }
.register-multiverse .mv-node .mv-id { fill: var(--mv-muted); font-family: ui-monospace, monospace; font-size: 0.58rem; }
.register-multiverse .mv-node .mv-count { fill: var(--mv-muted); font-size: 0.62rem; }
.register-multiverse .mv-node .mv-standing-word { fill: var(--mv-muted); font-size: 0.56rem; font-family: ui-monospace, monospace; }
.register-multiverse .mv-profile-foundation .mv-territory { stroke: var(--mv-profile-foundation); fill: var(--mv-profile-foundation); }
.register-multiverse .mv-profile-domain .mv-territory { stroke: var(--mv-profile-domain); fill: var(--mv-profile-domain); }
.register-multiverse .mv-profile-product .mv-territory { stroke: var(--mv-profile-product); fill: var(--mv-profile-product); }
.register-multiverse .mv-profile-partnership .mv-territory { stroke: var(--mv-profile-partnership); fill: var(--mv-profile-partnership); }
.register-multiverse .mv-profile-partner .mv-territory { stroke: var(--mv-profile-partner); fill: var(--mv-profile-partner); }
.register-multiverse .mv-profile-build .mv-territory { stroke: var(--mv-profile-build); fill: var(--mv-profile-build); }
.register-multiverse .mv-profile-realization .mv-territory { stroke: var(--mv-profile-realization); fill: var(--mv-profile-realization); }
.register-multiverse .mv-profile-none .mv-territory { stroke: var(--mv-muted); fill: var(--mv-muted); }
.register-multiverse .mv-standing-operational .mv-territory { fill-opacity: 0.3; }
.register-multiverse .mv-standing-proposed .mv-territory { fill-opacity: 0.14; }
.register-multiverse .mv-standing-external .mv-territory { fill-opacity: 0.07; stroke-dasharray: 5 4; }
.register-multiverse .mv-node:hover .mv-territory { fill-opacity: 0.4; }
.register-multiverse .mv-node[data-selected="true"] .mv-territory { stroke-width: 3.5; }
.register-multiverse .mv-node:focus { outline: none; }
.register-multiverse .mv-node:focus .mv-territory { stroke: var(--mv-ink); }
.register-multiverse .mv-node[data-dim="true"] { opacity: 0.18; }
.register-multiverse .mv-edge { fill: none; stroke: var(--mv-ink); stroke-opacity: 0.5; stroke-width: 1.2; }
.register-multiverse .mv-edge-hierarchy { stroke-dasharray: 9 6; }
.register-multiverse .mv-edge-composition { stroke-dasharray: 2 4; }
.register-multiverse[data-lens="atlas"] .mv-edge { stroke-opacity: 0.22; }
.register-multiverse[data-lens="structure"] .mv-standing-operational .mv-territory { fill-opacity: 0.1; }
.register-multiverse[data-lens="structure"] .mv-standing-proposed .mv-territory { fill-opacity: 0.04; }
.register-multiverse[data-lens="structure"] .mv-standing-external .mv-territory { fill-opacity: 0.02; }
.register-multiverse[data-lens="structure"] .mv-edge { stroke-opacity: 0.85; stroke-width: 1.7; }
.register-multiverse[data-lens="activity"] .mv-node .mv-territory { stroke: var(--mv-state-evidence); fill: var(--mv-state-evidence); }
.register-multiverse[data-lens="activity"] .mv-act-fresh .mv-territory { fill-opacity: 0.55; }
.register-multiverse[data-lens="activity"] .mv-act-warm .mv-territory { fill-opacity: 0.3; }
.register-multiverse[data-lens="activity"] .mv-act-cool .mv-territory { fill-opacity: 0.14; }
.register-multiverse[data-lens="activity"] .mv-act-none .mv-territory { fill-opacity: 0.04; }
.register-multiverse .mv-ring-seg { fill: none; stroke: var(--mv-line); stroke-width: 2.5; }
.register-multiverse .mv-ring-seg[data-lit="true"] { stroke: var(--mv-ink); }
.register-multiverse .mv-chip rect { fill: var(--mv-court); stroke: var(--mv-line); }
.register-multiverse .mv-chip text { fill: var(--mv-muted); font-size: 0.56rem; font-family: ui-monospace, monospace; }
.register-multiverse .mv-release-tick { stroke: var(--mv-state-admitted); stroke-width: 2.5; }
.register-multiverse .mv-controls { position: absolute; top: 0.5rem; right: 0.5rem; display: flex; gap: 0.25rem; }
.register-multiverse .mv-controls button {
  background: var(--mv-court); color: var(--mv-ink); border: 1px solid var(--mv-line);
  border-radius: 0; font: inherit; font-size: 0.8rem; min-width: 1.8rem; height: 1.8rem; cursor: pointer;
}
.register-multiverse .mv-controls button:hover { border-color: var(--mv-muted); }
.register-multiverse .mv-inspector {
  position: absolute; top: 0; right: 0; bottom: 0; width: 21rem; max-width: 72%;
  background: var(--mv-court); border-left: 1px solid var(--mv-line);
  overflow: auto; padding: 0.75rem; font-size: 0.78rem;
}
.register-multiverse .mv-inspector h2 { font-size: 0.85rem; margin: 0 0 0.4rem; color: var(--mv-ink); }
.register-multiverse .mv-inspector h3 { font-size: 0.72rem; margin: 0.7rem 0 0.2rem; color: var(--mv-muted); font-family: ui-monospace, monospace; letter-spacing: 0.06em; }
.register-multiverse .mv-inspector p { margin: 0.15rem 0; color: var(--mv-muted); }
.register-multiverse .mv-inspector code { color: var(--mv-ink); font-family: ui-monospace, monospace; font-size: 0.7rem; word-break: break-all; }
.register-multiverse .mv-inspector a { color: var(--mv-state-evidence); }
.register-multiverse .mv-inspector ul { list-style: none; margin: 0.2rem 0; padding: 0; }
.register-multiverse .mv-inspector li { padding: 0.1rem 0; color: var(--mv-muted); }
.register-multiverse .mv-legend {
  border-top: 1px solid var(--mv-line); padding: 0.4rem 0.75rem;
  color: var(--mv-muted); font-size: 0.68rem; font-family: ui-monospace, monospace;
  display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center;
}
/* Interaction states OUTRANK the lens re-skins above (declared after them
 * with the lens attribute in the selector), so the four selection-adjacent
 * signals — hover halo, focus ink stroke, selected thick stroke, status
 * badge words — stay distinct in EVERY lens. */
.register-multiverse[data-lens] .mv-node:hover .mv-territory { fill-opacity: 0.4; }
.register-multiverse[data-lens] .mv-node:focus .mv-territory { stroke: var(--mv-ink); }
.register-multiverse[data-lens] .mv-node[data-selected="true"] .mv-territory { stroke-width: 3.5; }