/* ═══════════════════════════════════════════════════════════════════════════════
   The operator shell (/app, /login): tokens and components, scoped to .rig-shell.

   Canon: ENM's Humanistic Design foundation, Variant D "Swiss Civic Modernist"
   (the variant built for app, dashboard and workflow shells). Brand-agnostic by
   design; an install skins it with exactly two knobs, accent and logo, set in
   install.config.ts `shell`. Nothing else about the shell differs between
   installs, so an ENM client's install and Datum Forge's own look the same shell
   apart from those two.

   Token architecture (Token-Architecture.md): primitives → semantic → component.
   Components consume semantic tokens, never raw values. The semantic names the
   first shell used (--rig-bg, --rig-surface, --rig-border, --rig-fg, --rig-muted,
   --rig-accent, --rig-accent-fg, --rig-ok, --rig-warn, --rig-radius, --rig-font)
   keep their meaning, so module screens that read them keep working.

   Scoped to .rig-shell so the public site's global rules (DF × Website's
   site.css: body, h1-h4, p, a) never reach the shell, and the shell never
   reaches the site. Light and dark follow the system preference; an explicit
   data-theme on the shell root wins.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* The one site rule that did reach the shell: site.css pads the BODY by the
   phone site bar's height (the bar is fixed to the foot of the screen), and the
   install's root layout loads site.css on every route. The shell has no site
   bar, so the padding showed as a band of the site's background under the
   shell, white under a dark theme. The shell gives it back, from the body that
   holds it and from nowhere else: a public page has no .rig-shell, so neither
   rule can match there even if this stylesheet is still loaded after a
   client-side navigation. A browser without :has() keeps the band, which costs
   looks and nothing else. */
body:has(.rig-shell) { padding-bottom: 0; }
html:has(.rig-shell) { scroll-padding-bottom: 0; }

.rig-shell {
  color-scheme: light;

  /* ── Primitives: type ─────────────────────────────────────────────────────── */
  --rig-p-font-sans: var(--rig-font-inter, "Inter"), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --rig-p-font-serif: var(--rig-font-serif-src, "Source Serif 4"), Georgia, "Times New Roman", serif;
  --rig-p-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --rig-text-xs: 0.75rem;   --rig-leading-xs: 1rem;
  --rig-text-sm: 0.875rem;  --rig-leading-sm: 1.25rem;
  --rig-text-base: 1rem;    --rig-leading-base: 1.5rem;
  --rig-text-lg: 1.125rem;  --rig-leading-lg: 1.75rem;
  --rig-text-xl: 1.25rem;   --rig-leading-xl: 1.875rem;
  --rig-text-2xl: 1.5rem;   --rig-leading-2xl: 2rem;
  --rig-text-3xl: 2rem;     --rig-leading-3xl: 2.5rem;

  /* ── Primitives: space (8px rhythm), radius, motion ──────────────────────── */
  --rig-space-1: 0.25rem; --rig-space-2: 0.5rem; --rig-space-3: 0.75rem; --rig-space-4: 1rem;
  --rig-space-5: 1.5rem;  --rig-space-6: 2rem;   --rig-space-7: 3rem;    --rig-space-8: 4rem;
  --rig-radius-sm: 0.125rem; --rig-radius-md: 0.25rem; --rig-radius-pill: 999px;
  --rig-ease: cubic-bezier(0.2, 0, 0, 1);
  --rig-duration-fast: 120ms; --rig-duration-base: 180ms;

  /* ── Primitives: colour, light ────────────────────────────────────────────── */
  --rig-neutral-0: #F7F7F3;    /* ground */
  --rig-neutral-50: #FFFFFF;   /* surface */
  --rig-neutral-100: #EFEFEB;  /* muted surface */
  --rig-neutral-300: #D8D8D1;  /* border */
  --rig-neutral-600: #4A4D49;  /* muted text: 7.98:1 on ground, 8.58:1 on surface, 7.44:1 on the muted surface */
  --rig-neutral-900: #0B0B0A;  /* text */
  --rig-signal-red: #B3261E;
  --rig-signal-blue: #003F7D;
  --rig-signal-green: #1F6F43;
  --rig-signal-amber: #9A6B00;
  /* A signal carrying glyphs needs AAA in its own right; a signal carrying a
     border or a fill does not. Two primitives per signal, so a pill's word and
     a field's error line clear 7:1 without washing out the marks. */
  --rig-signal-red-text: #8A1A13;
  --rig-signal-blue-text: #003F7D;
  --rig-signal-green-text: #14512E;
  --rig-signal-amber-text: #664700;
  --rig-shadow-overlay: 0 18px 48px rgb(11 11 10 / 0.18);

  /* ── Semantic ─────────────────────────────────────────────────────────────── */
  --rig-bg: var(--rig-neutral-0);
  --rig-surface: var(--rig-neutral-50);
  --rig-surface-muted: var(--rig-neutral-100);
  --rig-fg: var(--rig-neutral-900);
  --rig-muted: var(--rig-neutral-600);
  --rig-border: var(--rig-neutral-300);
  /* The install's one colour knob, else Variant D's deep blue. Used for
     wayfinding marks (active bars, underlines, the brand block, selection) and
     never for running text, so a light accent can never break contrast. */
  --rig-accent: var(--rig-accent-install, var(--rig-signal-blue));
  --rig-accent-fg: #FFFFFF;
  --rig-link: var(--rig-signal-blue);
  --rig-focus: var(--rig-signal-blue);
  --rig-ok: var(--rig-signal-green);
  --rig-warn: var(--rig-signal-amber);
  --rig-danger: var(--rig-signal-red);
  --rig-info: var(--rig-signal-blue);
  /* The same four, for text. Every component that colours a glyph reads these. */
  --rig-ok-text: var(--rig-signal-green-text);
  --rig-warn-text: var(--rig-signal-amber-text);
  --rig-danger-text: var(--rig-signal-red-text);
  --rig-info-text: var(--rig-signal-blue-text);
  --rig-ok-bg: color-mix(in srgb, var(--rig-signal-green), transparent 88%);
  --rig-warn-bg: color-mix(in srgb, var(--rig-signal-amber), transparent 88%);
  --rig-danger-bg: color-mix(in srgb, var(--rig-signal-red), transparent 88%);
  --rig-info-bg: color-mix(in srgb, var(--rig-signal-blue), transparent 88%);
  --rig-radius: var(--rig-radius-md);
  --rig-font: var(--rig-p-font-sans);
  --rig-font-serif: var(--rig-p-font-serif);
  --rig-mono: var(--rig-p-font-mono);

  /* ── Component ────────────────────────────────────────────────────────────── */
  --rig-nav-active-border: var(--rig-accent);
  --rig-button-primary-bg: var(--rig-fg);
  --rig-button-primary-fg: var(--rig-bg);
  --rig-field-border: var(--rig-border);
  --rig-field-error-border: var(--rig-danger);
  --rig-topbar-h: 56px;
  --rig-rail-w: 248px;

  font-family: var(--rig-font);
  font-size: var(--rig-text-sm);
  line-height: var(--rig-leading-sm);
  font-weight: 400;
  font-variation-settings: normal;
  letter-spacing: normal;
  color: var(--rig-fg);
  background: var(--rig-bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ── Dark: the system preference, or an explicit choice on the root ─────────── */
.rig-shell[data-theme="dark"] {
  color-scheme: dark;
  --rig-neutral-0: #0B0B0A;
  --rig-neutral-50: #151612;
  --rig-neutral-100: #20221C;
  --rig-neutral-300: #3A3C35;
  --rig-neutral-600: #B9BBB4;
  --rig-neutral-900: #F7F7F3;
  --rig-signal-red: #F05A50;
  --rig-signal-blue: #77B7FF;
  --rig-signal-green: #5DCC8B;
  --rig-signal-amber: #E2B84B;
  --rig-signal-red-text: #FF8A80;
  --rig-signal-blue-text: #77B7FF;
  --rig-signal-green-text: #5DCC8B;
  --rig-signal-amber-text: #E2B84B;
  --rig-shadow-overlay: 0 18px 48px rgb(0 0 0 / 0.45);
  --rig-accent-fg: #0B0B0A;
}

@media (prefers-color-scheme: dark) {
  .rig-shell:not([data-theme="light"]) {
    color-scheme: dark;
    --rig-neutral-0: #0B0B0A;
    --rig-neutral-50: #151612;
    --rig-neutral-100: #20221C;
    --rig-neutral-300: #3A3C35;
    --rig-neutral-600: #B9BBB4;
    --rig-neutral-900: #F7F7F3;
    --rig-signal-red: #F05A50;
    --rig-signal-blue: #77B7FF;
    --rig-signal-green: #5DCC8B;
    --rig-signal-amber: #E2B84B;
    --rig-signal-red-text: #FF8A80;
    --rig-signal-blue-text: #77B7FF;
    --rig-signal-green-text: #5DCC8B;
    --rig-signal-amber-text: #E2B84B;
    --rig-shadow-overlay: 0 18px 48px rgb(0 0 0 / 0.45);
    --rig-accent-fg: #0B0B0A;
  }
}

/* ── Base, under the scope only ─────────────────────────────────────────────── */
.rig-shell *,
.rig-shell *::before,
.rig-shell *::after {
  box-sizing: border-box;
}

.rig-shell h1, .rig-shell h2, .rig-shell h3, .rig-shell h4, .rig-shell h5, .rig-shell h6,
.rig-shell p, .rig-shell li, .rig-shell dt, .rig-shell dd, .rig-shell th, .rig-shell td,
.rig-shell label, .rig-shell button, .rig-shell input, .rig-shell select, .rig-shell textarea, .rig-shell summary {
  font-family: var(--rig-font);
  font-variation-settings: normal;
  letter-spacing: normal;
  text-transform: none;
}

.rig-shell h1, .rig-shell h2, .rig-shell h3, .rig-shell h4 {
  margin: 0;
  color: var(--rig-fg);
  line-height: 1.25;
}

.rig-shell p { margin: 0; }
.rig-shell ul, .rig-shell ol { margin: 0; padding-left: 1.25rem; }
.rig-shell hr { border: 0; border-top: 1px solid var(--rig-border); margin: var(--rig-space-5) 0; }

/* A link in running text is a link: coloured and underlined, so it is never
   identified by colour alone (WCAG 1.4.1). Scoped to the content region, so
   the topbar, the rail and anything else in the chrome is never touched: the
   old `.rig-shell a` rule outranked `.rig-nav-link`, `.rig-tab`, `.rig-brand`
   and `.rig-btn` on specificity (0,1,1 over 0,1,0) and rendered the whole of
   the primary wayfinding as a blue underlined link list. */
.rig-page a,
.rig-login a {
  color: var(--rig-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.rig-page a:hover,
.rig-login a:hover { text-decoration-thickness: 2px; }

/* The shell's own components carry their own colour and never an underline,
   wherever they sit. 0,2,0 beats the content rule above, so a component inside
   the content region keeps its own look. Every new component class joins this
   list; nothing outside the content region needs to. */
.rig-shell .rig-brand,
.rig-shell .rig-nav-link,
.rig-shell .rig-tab,
.rig-shell .rig-chip,
.rig-shell .rig-btn,
.rig-shell .rig-brand:hover,
.rig-shell .rig-nav-link:hover,
.rig-shell .rig-tab:hover,
.rig-shell .rig-chip:hover,
.rig-shell .rig-btn:hover {
  text-decoration: none;
}

.rig-shell .rig-brand { color: inherit; }
.rig-shell .rig-nav-link { color: var(--rig-muted); }
.rig-shell .rig-nav-link[aria-current="page"] { color: var(--rig-fg); }
.rig-shell .rig-nav-link:hover { color: var(--rig-fg); }
.rig-shell .rig-tab { color: var(--rig-muted); }
.rig-shell .rig-tab:hover,
.rig-shell .rig-tab--active { color: var(--rig-fg); }
.rig-shell .rig-btn--primary { color: var(--rig-button-primary-fg); }
.rig-shell .rig-btn--secondary { color: var(--rig-fg); }
.rig-shell .rig-btn--ghost { color: var(--rig-muted); }
.rig-shell .rig-btn--ghost:hover { color: var(--rig-fg); }
.rig-shell .rig-btn--danger { color: #FFFFFF; }

.rig-shell code, .rig-shell pre, .rig-shell kbd, .rig-shell samp { font-family: var(--rig-mono); }

.rig-shell ::selection { background: var(--rig-accent); color: var(--rig-accent-fg); }

.rig-shell :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--rig-focus);
  outline-offset: 2px;
}

/* ── Type roles ─────────────────────────────────────────────────────────────── */
.rig-screen-title {
  font-size: var(--rig-text-2xl);
  line-height: var(--rig-leading-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.rig-screen-note {
  margin-top: var(--rig-space-2);
  max-width: 68ch;
  font-size: var(--rig-text-sm);
  line-height: var(--rig-leading-sm);
  color: var(--rig-muted);
}

.rig-meta-label {
  font-size: var(--rig-text-xs);
  line-height: var(--rig-leading-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rig-muted);
}

/* The serif, used sparingly: these outrank the scoped heading reset above. */
.rig-shell .rig-serif,
.rig-shell .rig-login-title,
.rig-shell .rig-empty-title {
  font-family: var(--rig-font-serif);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ── The shell: topbar, rail, content ───────────────────────────────────────── */
.rig-app {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr;
}

.rig-topbar {
  min-height: var(--rig-topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rig-space-4);
  padding: 0 var(--rig-space-5);
  border-bottom: 1px solid var(--rig-border);
  background: var(--rig-surface);
}

.rig-brand {
  display: flex;
  align-items: center;
  gap: var(--rig-space-3);
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.rig-brand:hover { text-decoration: none; }

.rig-brand-mark {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--rig-radius-sm);
  background: var(--rig-accent);
  color: var(--rig-accent-fg);
  font-size: var(--rig-text-sm);
  font-weight: 700;
}

.rig-brand-logo {
  display: block;
  height: 28px;
  width: auto;
  max-width: 160px;
}

.rig-brand-name {
  font-size: var(--rig-text-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rig-topbar-right {
  display: flex;
  align-items: center;
  gap: var(--rig-space-3);
  min-width: 0;
}

.rig-signed-in {
  font-size: var(--rig-text-sm);
  color: var(--rig-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 28ch;
}

.rig-layout {
  display: grid;
  grid-template-columns: var(--rig-rail-w) minmax(0, 1fr);
  min-height: 0;
}

.rig-rail {
  border-right: 1px solid var(--rig-border);
  background: var(--rig-surface);
  padding: var(--rig-space-4) var(--rig-space-3);
}

.rig-nav {
  display: grid;
  gap: var(--rig-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rig-nav-link {
  display: flex;
  align-items: center;
  gap: var(--rig-space-3);
  min-height: 44px;
  padding: var(--rig-space-2) var(--rig-space-4);
  border-left: 4px solid transparent;
  border-radius: 0 var(--rig-radius-sm) var(--rig-radius-sm) 0;
  color: var(--rig-muted);
  font-size: var(--rig-text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--rig-duration-fast) var(--rig-ease), color var(--rig-duration-fast) var(--rig-ease);
}

.rig-nav-link:hover {
  background: var(--rig-surface-muted);
  color: var(--rig-fg);
  text-decoration: none;
}

.rig-nav-link[aria-current="page"] {
  border-left-color: var(--rig-nav-active-border);
  background: var(--rig-surface-muted);
  color: var(--rig-fg);
}

.rig-nav-group {
  margin: var(--rig-space-4) 0 var(--rig-space-2);
  padding: 0 var(--rig-space-4);
}

.rig-content {
  min-width: 0;
  /* The extra bottom padding clears the theme control fixed at the window's
     bottom-left, so the last row of a table is never under it. */
  padding: var(--rig-space-6) var(--rig-space-6) var(--rig-space-8);
  max-width: 1280px;
}

.rig-page {
  display: grid;
  gap: var(--rig-space-5);
}

/* Every screen's own root: the same vertical rhythm as the page, so a screen
   never has to set a margin to separate its regions. */
.rig-screen {
  display: grid;
  gap: var(--rig-space-5);
  align-content: start;
  min-width: 0;
}

.rig-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--rig-space-4);
  flex-wrap: wrap;
}

/* ── Tabs: a module's inner screens ─────────────────────────────────────────── */
.rig-area { min-width: 0; }

.rig-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rig-space-1);
  margin: 0 0 var(--rig-space-5);
  border-bottom: 1px solid var(--rig-border);
}

.rig-tab {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--rig-space-3);
  margin-bottom: -1px;
  border-bottom: 3px solid transparent;
  color: var(--rig-muted);
  font-size: var(--rig-text-sm);
  font-weight: 600;
  text-decoration: none;
}

.rig-tab:hover { color: var(--rig-fg); text-decoration: none; }

.rig-tab--active {
  color: var(--rig-fg);
  border-bottom-color: var(--rig-accent);
}

/* ── Cards and panels ───────────────────────────────────────────────────────── */
.rig-card {
  background: var(--rig-surface);
  border: 1px solid var(--rig-border);
  border-radius: var(--rig-radius-md);
  padding: var(--rig-space-5);
}

.rig-screen > .rig-card + .rig-card, .rig-page > .rig-card + .rig-card { margin-top: 0; }
.rig-card + .rig-card { margin-top: var(--rig-space-4); }

.rig-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--rig-space-4);
  margin-bottom: var(--rig-space-4);
}

.rig-card-title {
  font-size: var(--rig-text-xs);
  line-height: var(--rig-leading-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rig-muted);
}

.rig-card--muted { background: var(--rig-surface-muted); }

/* ── Key / value ────────────────────────────────────────────────────────────── */
.rig-kv {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: var(--rig-space-5);
  row-gap: var(--rig-space-2);
  margin: 0;
  font-size: var(--rig-text-sm);
  line-height: var(--rig-leading-sm);
}

.rig-kv dt { color: var(--rig-muted); }
.rig-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* ── Tables ─────────────────────────────────────────────────────────────────── */
.rig-table-wrap { overflow-x: auto; }

.rig-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--rig-text-sm);
  line-height: var(--rig-leading-sm);
}

.rig-table th {
  text-align: left;
  padding: var(--rig-space-2) var(--rig-space-3);
  border-bottom: 2px solid var(--rig-border);
  font-size: var(--rig-text-xs);
  line-height: var(--rig-leading-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rig-muted);
  white-space: nowrap;
}

.rig-table td {
  padding: var(--rig-space-3);
  border-bottom: 1px solid var(--rig-border);
  vertical-align: top;
}

.rig-table tbody tr:hover td { background: var(--rig-surface-muted); }
.rig-table td.rig-num, .rig-table th.rig-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Status pills ───────────────────────────────────────────────────────────── */
.rig-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--rig-space-2);
  min-height: 24px;
  padding: 0 var(--rig-space-3);
  border-radius: var(--rig-radius-pill);
  border: 1px solid var(--rig-border);
  font-size: var(--rig-text-xs);
  line-height: var(--rig-leading-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rig-muted);
  white-space: nowrap;
}

.rig-pill::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

/* The pill's word is text, so its colour is the AAA-clean text variant; the
   dot and the border are marks and read the signal itself. */
.rig-pill--ok { color: var(--rig-ok-text); border-color: color-mix(in srgb, var(--rig-ok), transparent 55%); }
.rig-pill--warn { color: var(--rig-warn-text); border-color: color-mix(in srgb, var(--rig-warn), transparent 55%); }
.rig-pill--danger { color: var(--rig-danger-text); border-color: color-mix(in srgb, var(--rig-danger), transparent 55%); }
.rig-pill--info { color: var(--rig-info-text); border-color: color-mix(in srgb, var(--rig-info), transparent 55%); }
.rig-pill--muted { color: var(--rig-muted); }

/* ── Alerts ─────────────────────────────────────────────────────────────────── */
.rig-alert {
  border: 1px solid var(--rig-border);
  border-left-width: 5px;
  border-radius: var(--rig-radius-sm);
  background: var(--rig-surface);
  padding: var(--rig-space-3) var(--rig-space-4);
  font-size: var(--rig-text-sm);
  line-height: var(--rig-leading-sm);
}

.rig-alert--info { border-left-color: var(--rig-info); }
.rig-alert--ok { border-left-color: var(--rig-ok); }
.rig-alert--warn { border-left-color: var(--rig-warn); }
.rig-alert--danger { border-left-color: var(--rig-danger); }

/* ── Buttons ────────────────────────────────────────────────────────────────── */
.rig-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rig-space-2);
  min-height: 44px;
  padding: 0 var(--rig-space-4);
  border: 1px solid transparent;
  border-radius: var(--rig-radius-sm);
  font: inherit;
  font-size: var(--rig-text-sm);
  font-weight: 700;
  line-height: var(--rig-leading-sm);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--rig-duration-fast) var(--rig-ease), border-color var(--rig-duration-fast) var(--rig-ease), color var(--rig-duration-fast) var(--rig-ease), transform var(--rig-duration-fast) var(--rig-ease);
}

.rig-btn:hover { text-decoration: none; }
.rig-btn:active { transform: translateY(1px); }
.rig-btn[disabled], .rig-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.rig-btn--sm { min-height: 36px; padding: 0 var(--rig-space-3); }
.rig-btn--block { width: 100%; }

.rig-btn--primary {
  background: var(--rig-button-primary-bg);
  color: var(--rig-button-primary-fg);
  border-color: var(--rig-button-primary-bg);
}

.rig-btn--primary:hover:not([disabled]) { box-shadow: inset 0 -3px 0 var(--rig-accent); }

.rig-btn--secondary {
  background: transparent;
  color: var(--rig-fg);
  border-color: var(--rig-border);
}

.rig-btn--secondary:hover:not([disabled]) { border-color: var(--rig-fg); background: var(--rig-surface-muted); }

.rig-btn--ghost {
  background: transparent;
  color: var(--rig-muted);
  border-color: transparent;
}

.rig-btn--ghost:hover:not([disabled]) { color: var(--rig-fg); background: var(--rig-surface-muted); }

.rig-btn--danger {
  background: var(--rig-danger);
  color: #FFFFFF;
  border-color: var(--rig-danger);
}

/* ── Forms ──────────────────────────────────────────────────────────────────── */
.rig-form { display: grid; gap: var(--rig-space-4); }
.rig-field { display: grid; gap: var(--rig-space-2); }
.rig-label { font-size: var(--rig-text-sm); font-weight: 700; color: var(--rig-fg); }
.rig-help { font-size: var(--rig-text-sm); color: var(--rig-muted); }
.rig-error { font-size: var(--rig-text-sm); font-weight: 600; color: var(--rig-danger); }

.rig-input, .rig-select, .rig-textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--rig-field-border);
  border-radius: var(--rig-radius-sm);
  background: var(--rig-surface);
  color: var(--rig-fg);
  font: inherit;
  font-size: var(--rig-text-base);
  padding: var(--rig-space-2) var(--rig-space-3);
}

.rig-textarea { min-height: 120px; resize: vertical; }
.rig-input[aria-invalid="true"], .rig-select[aria-invalid="true"], .rig-textarea[aria-invalid="true"] { border-color: var(--rig-field-error-border); }
.rig-input--code { font-family: var(--rig-mono); font-size: var(--rig-text-2xl); letter-spacing: 0.3em; text-align: center; }

.rig-actions { display: flex; flex-wrap: wrap; gap: var(--rig-space-3); align-items: center; }

/* ── Empty states, code, skeletons ──────────────────────────────────────────── */
.rig-empty {
  padding: var(--rig-space-4) 0;
  color: var(--rig-muted);
  font-size: var(--rig-text-sm);
  line-height: var(--rig-leading-sm);
  max-width: 68ch;
}

.rig-empty-title {
  font-family: var(--rig-font-serif);
  font-size: var(--rig-text-xl);
  line-height: var(--rig-leading-xl);
  font-weight: 600;
  color: var(--rig-fg);
  margin-bottom: var(--rig-space-2);
}

.rig-code {
  font-family: var(--rig-mono);
  font-size: 0.8125rem;
  padding: 0.05em 0.35em;
  border-radius: var(--rig-radius-sm);
  background: var(--rig-surface-muted);
  color: var(--rig-fg);
}

.rig-skeleton {
  display: block;
  height: 1em;
  border-radius: var(--rig-radius-sm);
  background: var(--rig-surface-muted);
  animation: rig-pulse 1.2s var(--rig-ease) infinite;
}

@keyframes rig-pulse { 50% { opacity: 0.5; } }

/* ── Sign-in ────────────────────────────────────────────────────────────────── */
.rig-login {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--rig-space-5);
}

.rig-login-card {
  width: min(100%, 400px);
  background: var(--rig-surface);
  border: 1px solid var(--rig-border);
  border-radius: var(--rig-radius-md);
  padding: var(--rig-space-6);
  display: grid;
  gap: var(--rig-space-5);
}

.rig-login-title {
  font-family: var(--rig-font-serif);
  font-size: var(--rig-text-2xl);
  line-height: var(--rig-leading-2xl);
  font-weight: 600;
}

/* ── Theme control: bottom-left of the window ───────────────────────────────
   Mark, 2026-09-15: "Just move a Light/Dark Switch to the bottom-left of the
   window". Not the topbar and not an account menu, so it is fixed to the
   window rather than pinned inside the rail, and it holds that corner at every
   width. `.rig-content` carries the clearance beneath it, so the control never
   covers the last row of anything. Three plain labelled buttons, the pressed
   one filled: the choice is readable without opening a door. */
.rig-theme {
  position: fixed;
  left: var(--rig-space-3);
  bottom: var(--rig-space-3);
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--rig-border);
  border-radius: var(--rig-radius-pill);
  background: var(--rig-surface);
}

.rig-theme-btn {
  min-height: 32px;
  padding: 0 var(--rig-space-3);
  border: 0;
  border-radius: var(--rig-radius-pill);
  background: transparent;
  color: var(--rig-muted);
  font: inherit;
  font-size: var(--rig-text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.rig-theme-btn:hover { color: var(--rig-fg); }

.rig-theme-btn[aria-pressed="true"] {
  background: var(--rig-fg);
  color: var(--rig-bg);
}

/* ── Rig version: bottom-right, the theme control's opposite corner ─────────
   Read from the install's RIG_VERSION. Quiet text, not a control: it answers
   "which rig is this?" for whoever is asking and is otherwise out of the way.
   `.rig-content`'s bottom clearance covers it as it covers the theme control. */
.rig-version {
  position: fixed;
  right: var(--rig-space-3);
  bottom: var(--rig-space-3);
  z-index: 19;
  margin: 0;
  padding: 2px var(--rig-space-2);
  border-radius: var(--rig-radius-pill);
  background: var(--rig-bg);
  color: var(--rig-muted);
  font-family: var(--rig-mono);
  font-size: var(--rig-text-xs);
  line-height: 32px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ui.tsx v2: the shared components the module screens build from.
   Every rule here reads a semantic token. No component sets a raw colour or a
   raw font size, which is the whole point of deleting the three private kits.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 4. Page head ─────────────────────────────────────────────────────────── */
.rig-page-head-text { min-width: 0; }

.rig-page-back {
  margin-bottom: var(--rig-space-2);
  font-size: var(--rig-text-sm);
}

/* The screen's own explanation, in the text colour: it is not small print. */
.rig-screen-purpose {
  margin-top: var(--rig-space-2);
  max-width: 68ch;
  font-size: var(--rig-text-sm);
  line-height: var(--rig-leading-sm);
  color: var(--rig-fg);
}

/* ── 13. Notice ───────────────────────────────────────────────────────────── */
.rig-notice-slot { margin-bottom: var(--rig-space-5); }
.rig-alert-title { display: block; margin-bottom: var(--rig-space-1); }

/* ── 11. Form kit ─────────────────────────────────────────────────────────── */
.rig-label-optional { font-weight: 400; color: var(--rig-muted); }

/* The error line is body text in the danger colour, so it reads the AAA-clean
   text variant of the signal, not the mark variant. */
.rig-error { color: var(--rig-danger-text); }

.rig-select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--rig-field-border);
  border-radius: var(--rig-radius-sm);
  background: var(--rig-surface);
  color: var(--rig-fg);
  font: inherit;
  font-size: var(--rig-text-base);
  padding: var(--rig-space-2) var(--rig-space-3);
}

/* A date or a short select does not need the full column width. */
.rig-input--auto, .rig-select--auto { width: auto; min-width: 12ch; }

.rig-check {
  display: flex;
  align-items: center;
  gap: var(--rig-space-3);
  min-height: 44px;
  font-size: var(--rig-text-sm);
  cursor: pointer;
}

.rig-check-box { width: 20px; height: 20px; flex: none; accent-color: var(--rig-accent); cursor: pointer; }

.rig-file {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: var(--rig-space-2) var(--rig-space-3);
  border: 1px dashed var(--rig-field-border);
  border-radius: var(--rig-radius-sm);
  background: var(--rig-surface);
  color: var(--rig-fg);
  font: inherit;
  font-size: var(--rig-text-sm);
}

.rig-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: var(--rig-space-4);
}

.rig-legend {
  padding: 0;
  margin-bottom: var(--rig-space-1);
  font-size: var(--rig-text-sm);
  font-weight: 700;
  color: var(--rig-fg);
}

/* One column, 560px at most (Variant D §10: procedural and calm). */
.rig-form { display: grid; gap: var(--rig-space-4); max-width: 560px; }
.rig-form--inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--rig-space-3); max-width: none; }

/* The panel a form opens in, from the page head's primary action. The one
   place a shadow is allowed, because it sits above the page it belongs to. */
.rig-panel {
  background: var(--rig-surface);
  border: 1px solid var(--rig-border);
  border-radius: var(--rig-radius-md);
  box-shadow: var(--rig-shadow-overlay);
  padding: var(--rig-space-5);
  display: grid;
  gap: var(--rig-space-4);
}

.rig-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--rig-space-4);
}

.rig-panel-title {
  font-size: var(--rig-text-xl);
  line-height: var(--rig-leading-xl);
}

/* ── Key / value rows ─────────────────────────────────────────────────────── */
.rig-kv-row { display: contents; }

/* ── 15. Empty state ──────────────────────────────────────────────────────── */
.rig-empty-action { margin-top: var(--rig-space-3); }

/* ── 5. Summary strip ─────────────────────────────────────────────────────── */
.rig-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rig-space-4);
}

.rig-summary-item {
  flex: 1 1 14rem;
  min-width: 0;
  display: grid;
  gap: var(--rig-space-1);
  padding: var(--rig-space-4);
  border: 1px solid var(--rig-border);
  border-left: 4px solid var(--rig-border);
  border-radius: var(--rig-radius-md);
  background: var(--rig-surface);
  color: inherit;
}

.rig-shell .rig-summary-item--link { text-decoration: none; color: inherit; }

.rig-summary-item--link:hover {
  border-left-color: var(--rig-accent);
  background: var(--rig-surface-muted);
}

.rig-summary-value {
  font-size: var(--rig-text-3xl);
  line-height: var(--rig-leading-3xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Every number says what it counts: a number without a sentence is a tile. */
.rig-summary-label {
  font-size: var(--rig-text-sm);
  line-height: var(--rig-leading-sm);
  color: var(--rig-fg);
}

/* ── 10. Filter bar ───────────────────────────────────────────────────────── */
.rig-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rig-space-2);
}

.rig-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--rig-space-4);
  border: 1px solid var(--rig-border);
  border-radius: var(--rig-radius-pill);
  background: var(--rig-surface);
  color: var(--rig-fg);
  font-size: var(--rig-text-sm);
  font-weight: 600;
}

.rig-chip:hover { background: var(--rig-surface-muted); border-color: var(--rig-fg); }

/* Active is fill plus weight, never colour alone. */
.rig-chip--active {
  background: var(--rig-fg);
  border-color: var(--rig-fg);
  color: var(--rig-bg);
  font-weight: 700;
}

.rig-chip--active:hover { background: var(--rig-fg); color: var(--rig-bg); }
.rig-chip--clear { border-style: dashed; color: var(--rig-muted); }

/* ── 18. Evidence ─────────────────────────────────────────────────────────── */
.rig-evidence {
  margin: 0;
  padding: var(--rig-space-3) var(--rig-space-4);
  border-left: 4px solid var(--rig-border);
  background: var(--rig-surface-muted);
  border-radius: 0 var(--rig-radius-sm) var(--rig-radius-sm) 0;
  display: grid;
  gap: var(--rig-space-2);
}

.rig-evidence + .rig-evidence { margin-top: var(--rig-space-3); }

.rig-evidence-quote {
  margin: 0;
  font-size: var(--rig-text-base);
  line-height: var(--rig-leading-base);
  color: var(--rig-fg);
}

.rig-evidence-quote::before { content: "\201C"; }
.rig-evidence-quote::after { content: "\201D"; }

.rig-evidence-source {
  font-size: var(--rig-text-sm);
  line-height: var(--rig-leading-sm);
  color: var(--rig-muted);
}

/* ── 8. Timeline ──────────────────────────────────────────────────────────── */
.rig-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--rig-space-4);
}

.rig-timeline-item {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: var(--rig-space-4);
  font-size: var(--rig-text-sm);
  line-height: var(--rig-leading-sm);
}

.rig-timeline-when { color: var(--rig-muted); }
.rig-timeline-what { min-width: 0; }
.rig-timeline-who { color: var(--rig-muted); }
.rig-timeline-detail { margin-top: var(--rig-space-2); }

/* ── 9. Table ─────────────────────────────────────────────────────────────── */
.rig-table-caption {
  caption-side: top;
  text-align: left;
  padding-bottom: var(--rig-space-3);
  font-size: var(--rig-text-sm);
  color: var(--rig-muted);
}

/* The second line of a reflowed row is muted; at full width it is not. */
.rig-table td.rig-td--name { font-weight: 600; }

.rig-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rig-space-3);
  margin-top: var(--rig-space-4);
}

.rig-pager-state { font-size: var(--rig-text-sm); color: var(--rig-muted); }

/* ── 6. Review card ───────────────────────────────────────────────────────── */
.rig-review {
  background: var(--rig-surface);
  border: 1px solid var(--rig-border);
  border-left: 4px solid var(--rig-accent);
  border-radius: var(--rig-radius-md);
  padding: var(--rig-space-5);
  display: grid;
  gap: var(--rig-space-5);
  max-width: 68rem;
}

.rig-review-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--rig-space-4);
  flex-wrap: wrap;
}

.rig-review-title {
  font-size: var(--rig-text-2xl);
  line-height: var(--rig-leading-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.rig-review-sub {
  margin-top: var(--rig-space-1);
  font-size: var(--rig-text-sm);
  color: var(--rig-muted);
}

.rig-review-nav {
  display: flex;
  align-items: center;
  gap: var(--rig-space-3);
  flex: none;
}

.rig-review-counter {
  font-size: var(--rig-text-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--rig-muted);
  white-space: nowrap;
}

.rig-review-account {
  display: grid;
  gap: var(--rig-space-2);
  font-size: var(--rig-text-base);
  line-height: var(--rig-leading-base);
  max-width: 68ch;
}

.rig-review-evidence { display: grid; gap: var(--rig-space-3); }

.rig-review-decision {
  padding-top: var(--rig-space-4);
  border-top: 1px solid var(--rig-border);
}

/* ── 7. Decision bar ──────────────────────────────────────────────────────── */
.rig-decision { display: grid; gap: var(--rig-space-4); max-width: 560px; }

.rig-decision-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rig-space-3);
  align-items: center;
}

/* Each decision is a label wrapping a radio: one tab stop per group, arrow keys
   move between them, and the chosen one is fill plus weight, never colour. */
.rig-decision-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--rig-space-2);
  min-height: 44px;
  padding: 0 var(--rig-space-4);
  border: 1px solid var(--rig-border);
  border-radius: var(--rig-radius-sm);
  background: var(--rig-surface);
  color: var(--rig-fg);
  font-size: var(--rig-text-sm);
  font-weight: 700;
  cursor: pointer;
}

.rig-decision-btn:hover { border-color: var(--rig-fg); background: var(--rig-surface-muted); }

.rig-decision-btn--primary { border-width: 2px; border-color: var(--rig-fg); }

.rig-decision-btn--quiet {
  border-color: transparent;
  color: var(--rig-muted);
  font-weight: 600;
}

.rig-decision-btn--quiet:hover { color: var(--rig-fg); }

.rig-decision-btn[data-chosen="true"] {
  background: var(--rig-fg);
  border-color: var(--rig-fg);
  color: var(--rig-bg);
}

/* The radio itself stays in the accessibility tree and takes the focus ring. */
.rig-decision-input { width: 16px; height: 16px; margin: 0; accent-color: var(--rig-accent); }
.rig-decision-btn:has(.rig-decision-input:focus-visible) { outline: 3px solid var(--rig-focus); outline-offset: 2px; }

/* ── 14. Confirm ──────────────────────────────────────────────────────────── */
.rig-confirm-form { display: inline-block; margin: 0; max-width: none; }

.rig-dialog {
  width: min(100%, 30rem);
  padding: var(--rig-space-5);
  border: 1px solid var(--rig-border);
  border-radius: var(--rig-radius-md);
  background: var(--rig-surface);
  color: var(--rig-fg);
  box-shadow: var(--rig-shadow-overlay);
}

.rig-dialog::backdrop { background: rgb(11 11 10 / 0.45); }

.rig-dialog-title {
  font-family: var(--rig-font-serif);
  font-size: var(--rig-text-xl);
  line-height: var(--rig-leading-xl);
  font-weight: 600;
  margin-bottom: var(--rig-space-3);
}

.rig-dialog-body {
  margin-bottom: var(--rig-space-5);
  font-size: var(--rig-text-sm);
  line-height: var(--rig-leading-sm);
  max-width: 60ch;
}

/* ── 16. Details block ────────────────────────────────────────────────────── */
.rig-details {
  margin-top: var(--rig-space-4);
  border-top: 1px solid var(--rig-border);
  padding-top: var(--rig-space-3);
  font-size: var(--rig-text-sm);
}

.rig-details-summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  font-weight: 700;
  color: var(--rig-muted);
  cursor: pointer;
}

.rig-details-summary:hover { color: var(--rig-fg); }
.rig-details-body { padding-top: var(--rig-space-2); display: grid; gap: var(--rig-space-4); }
.rig-details-body pre { margin: 0; overflow-x: auto; font-size: var(--rig-text-xs); white-space: pre-wrap; }

/* ── A list of rows, where a row carries an action ────────────────────────────
   A form never sits inside a table cell (§1.3 rule 9), so a list whose rows
   each carry a button is a list, not a table: same scan, the action beside the
   row it belongs to, and it stacks at 900px without any reflow rule. */
.rig-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.rig-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rig-space-3);
  padding: var(--rig-space-3) 0;
  border-bottom: 1px solid var(--rig-border);
  font-size: var(--rig-text-sm);
  line-height: var(--rig-leading-sm);
}

.rig-row:last-child { border-bottom: 0; }
.rig-row-main { flex: 1 1 20rem; min-width: 0; }

/* ── Small shared roles ───────────────────────────────────────────────────── */
.rig-muted-text { color: var(--rig-muted); }
.rig-time { white-space: nowrap; }

/* Quoted running text: an enquiry's own words, a post's summary. */
.rig-quote {
  margin: 0;
  white-space: pre-wrap;
  font-size: var(--rig-text-base);
  line-height: var(--rig-leading-base);
  max-width: 68ch;
}

/* A short stack of sentences, where a screen says several plain things. */
.rig-lines { display: grid; gap: var(--rig-space-2); font-size: var(--rig-text-sm); line-height: var(--rig-leading-sm); }

/* Added and removed lines in a comparison; the sign carries the meaning. */
.rig-difflines {
  margin: 0;
  white-space: pre-wrap;
  font-family: var(--rig-mono);
  font-size: var(--rig-text-sm);
  line-height: var(--rig-leading-sm);
  max-height: 22rem;
  overflow: auto;
}

.rig-difflines--added { color: var(--rig-ok-text); }
.rig-difflines--removed { color: var(--rig-warn-text); }

/* A rendered post's preview inside the shell. */
.rig-preview { font-size: var(--rig-text-base); line-height: var(--rig-leading-base); max-width: 68ch; }
.rig-preview > * + * { margin-top: var(--rig-space-4); }

/* ── Responsive: the rail becomes a strip under the topbar ──────────────────── */
@media (max-width: 900px) {
  /* Two stacked rows, not two equal ones: without an explicit row list the
     implicit `auto` tracks stretch to share the spare height of the 100dvh
     grid, and the rail took half the window with the content beneath it. */
  .rig-layout { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); align-content: start; }
  .rig-rail { border-right: 0; border-bottom: 1px solid var(--rig-border); padding: var(--rig-space-2) var(--rig-space-3); }
  .rig-nav { display: flex; overflow-x: auto; gap: var(--rig-space-1); }
  .rig-nav-link { border-left: 0; border-bottom: 3px solid transparent; border-radius: 0; white-space: nowrap; }
  .rig-nav-link[aria-current="page"] { border-bottom-color: var(--rig-nav-active-border); background: transparent; }
  .rig-content { padding: var(--rig-space-4) var(--rig-space-4) var(--rig-space-7); }
  .rig-topbar { padding: 0 var(--rig-space-4); }
  .rig-signed-in { display: none; }
  .rig-theme-btn { padding: 0 var(--rig-space-2); }

  /* A table reflows into two-line rows rather than scrolling sideways
     (finding 12): the name and the status on the first line, the rest as a
     muted second line, each cell prefixed with its own column heading. The
     head is hidden from sight but stays for a screen reader. */
  .rig-table-wrap { overflow-x: visible; }

  .rig-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .rig-table, .rig-table tbody { display: block; width: 100%; }

  /* The row is a block: the name on the first line, the status pinned to that
     line's right end, and every remaining cell flowing as one muted second
     line. Flexbox cannot do this — it packs a line before it grows anything,
     so a short name lets the next cell ride up beside it. The status is
     positioned instead, and the row reserves the width for it only when the
     table declares a status column. */
  .rig-table tr {
    display: block;
    position: relative;
    padding: var(--rig-space-3) 0;
    border-bottom: 1px solid var(--rig-border);
  }

  .rig-table--status tr { padding-right: 34%; }
  .rig-table td { display: inline; border: 0; padding: 0; }
  .rig-table tbody tr:hover td { background: transparent; }
  .rig-table tbody tr:hover { background: var(--rig-surface-muted); }

  .rig-table td.rig-td--name { display: block; }

  .rig-table td.rig-td--status {
    position: absolute;
    top: var(--rig-space-3);
    right: 0;
    width: 32%;
    text-align: right;
  }

  .rig-table td.rig-td--rest { color: var(--rig-muted); }
  .rig-table td.rig-td--rest::before { content: " · " attr(data-label) ": "; }
  .rig-table td.rig-td--rest-first::before { content: attr(data-label) ": "; }
  .rig-table td.rig-td--blank { display: none; }

  .rig-table .rig-num { text-align: left; }
  .rig-table caption.rig-table-caption { display: block; }

  /* The timeline's date sits above its sentence rather than beside it. */
  .rig-timeline-item { grid-template-columns: minmax(0, 1fr); gap: var(--rig-space-1); }

  .rig-summary-item { flex: 1 1 100%; }
  .rig-review { padding: var(--rig-space-4); }
  .rig-panel { padding: var(--rig-space-4); }
}

/* ── Reduced motion ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rig-shell *, .rig-shell *::before, .rig-shell *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}