/* =========================================================================
   route_33 — design tokens (v4: highway/blueprint direction)

   New visual direction: an engineering blueprint crossed with highway
   dispatch. Warm cream paper, near-black ink, ONE saturated highway
   yellow accent for wayfinding. JetBrains Mono carries the display work
   (titles, numerals, labels, the "_33" wordmark) and Inter handles body.

   This is a brand pivot from v3 (Cronos-blue/cool-grey, Geist sans).
   - Surface shifts from #F5F5F5 cool to #F2EDE3 warm cream.
   - Accent shifts from Cronos blue #019FE3 to highway yellow #F2C744.
   - Type pairing flips: mono leads, sans supports.
   - The brand mark is the "R-loop" — a continuous return-loop with arrow
     tail, drawn from `assets/route33-r-mark.svg`.

   All `--r33-*` tokens map cleanly onto the new direction. Legacy
   `--cronos-*` aliases stay mapped so older UI kits keep rendering.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ----- Base reset -----------------------------------------------------
   `box-sizing: border-box` universally — every input with width:100%
   plus padding stays within its parent. And `min-width: 0` on the
   children of our flex/grid layout primitives so they shrink below
   their content size when the track demands it (without this, inputs
   overflow .x-field-row, .x-form-card-body--two-col, etc.). Scoped to
   our own primitives so UI-kit-local layouts keep their defaults.
*/
*, *::before, *::after { box-sizing: border-box; }

.x-field-row > *,
.x-form-card-body--two-col > *,
.x-filterscard-grid > *,
.x-kpi-strip > *,
.x-chart-row > *,
.x-detail-header > *,
.x-overview-header > * {
  min-width: 0;
}

:root {
  /* ----- Ink: near-black, slightly warm ----- */
  --r33-ink:               #111110; /* primary text, brand mark */
  --r33-ink-2:             #2A2926; /* alt dark for press/hover */
  --r33-ink-soft:           #2A2926; /* secondary body text */
  --r33-ink-muted:          #6B6962; /* tertiary / captions */
  --r33-ink-faint:          #A0A0A0; /* disabled, hint */

  /* ----- Surfaces — warm cream, the new ground tone ----- */
  --r33-paper:             #F2EDE3; /* primary cream surface */
  --r33-paper-2:           #ECE5D6; /* alt surface, slightly deeper */
  --r33-paper-3:           #E4DCC9; /* card edge / inset surface */
  --r33-paper-soft:        #F6F2EA; /* softest cream */
  --r33-surface:           #F2EDE3; /* alias for code that still uses --surface */
  --r33-surface-2:         #ECE5D6;
  --r33-surface-soft:      #F6F2EA;
  --r33-paper-ink:         #F2EDE3; /* color of "paper" text on ink */

  /* ----- Strokes — hairlines tinted with ink ----- */
  --r33-rule:              rgba(17, 17, 16, 0.10);
  --r33-rule-strong:       rgba(17, 17, 16, 0.20);
  --r33-grey:              #D8D1C0;
  --r33-grey-2:            #C8C1B0;
  --r33-border:            rgba(17, 17, 16, 0.10);
  --r33-border-strong:     rgba(17, 17, 16, 0.20);

  /* ----- Highway yellow — the one chromatic accent -----
     Saturated wayfinding yellow. Used for the R-loop mark, primary CTA,
     route ledger zero, "live" highlights, and a single accent dot per
     composition. Pair with ink on the foreground — yellow needs ink type. */
  --r33-accent:            #F2C744;
  --r33-accent-ink:        #111110; /* text on yellow */
  --r33-accent-soft:       rgba(242, 199, 68, 0.14);
  --r33-accent-edge:       rgba(242, 199, 68, 0.55);
  --r33-accent-hover:      #E8BB2E;

  /* ----- Signal — saturated red-orange, used for "live" dots and danger ----- */
  --r33-signal:            #D63B00;
  --r33-signal-soft:       rgba(214, 59, 0, 0.14);

  /* ----- Semantic — system states only ----- */
  --r33-success:           #1F6B3D;
  --r33-warning:           #B5740A;
  --r33-danger:            #B82E1D;
  --r33-info:              #2C5F75;

  /* ----- Legacy "Cronos blue" — kept for backward compatibility but
     downgraded to ink. Old kits that paint with --r33-blue now read as
     ink, which still composes. New code MUST use --r33-accent. ----- */
  --r33-blue:              var(--r33-ink);
  --r33-blue-hover:        var(--r33-ink-2);
  --r33-blue-soft:         var(--r33-paper-2);
  --r33-blue-ink:          var(--r33-ink);

  /* ----- shadcn aliases — kept stable across rebrands ----- */
  --background:            var(--r33-paper);
  --foreground:            var(--r33-ink);
  --card:                  var(--r33-paper);
  --card-foreground:       var(--r33-ink);
  --popover:               var(--r33-paper);
  --popover-foreground:    var(--r33-ink);
  --primary:               var(--r33-ink);
  --primary-foreground:    var(--r33-paper);
  --secondary:             var(--r33-paper-2);
  --secondary-foreground:  var(--r33-ink);
  --muted:                 var(--r33-paper-2);
  --muted-foreground:      var(--r33-ink-muted);
  --accent:                var(--r33-accent);
  --accent-foreground:     var(--r33-accent-ink);
  --destructive:           var(--r33-danger);
  --destructive-foreground:#FFFFFF;
  --border:                var(--r33-rule-strong);
  --input:                 var(--r33-rule-strong);
  --ring:                  var(--r33-accent);

  /* ----- Chart palette — ink-led, with brand's semantic hues as the
     differentiators for multi-series viz. Tonal greys stay available
     via --chart-grey-1..3 for low-contrast supporting data. ----- */
  --chart-1: var(--r33-ink);              /* near-black */
  --chart-2: var(--r33-accent);            /* highway yellow #F2C744 */
  --chart-3: var(--r33-signal);            /* red-orange #D63B00 */
  --chart-4: var(--r33-success);           /* deep green #1F6B3D */
  --chart-5: var(--r33-warning);           /* amber #B5740A */
  --chart-6: #3E54A8;                       /* dusty indigo-blue — distinct hue (formerly a --chart-3 duplicate) */
  --chart-7: #2C5F75;                       /* deep slate-teal — extra data-viz hue */
  --chart-8: #6E3A5C;                       /* deep plum — extra data-viz hue */
  --chart-9: #6E7A2E;                       /* olive — warm engineering green */
  --chart-10: #6B4E9E;                      /* muted violet */
  --chart-11: #B05C79;                      /* dusty rose */
  --chart-12: #7A5A3A;
  --chart-grey-1: #6B6962;
  --chart-grey-2: #9B958B;
  --chart-grey-3: #C8C1B0;
  --chart-grid:   rgba(17, 17, 16, 0.06);
  --chart-axis:   var(--r33-ink-muted);

  /* ----- LEGACY aliases (back-compat with v1–v3 ui_kit files) ----- */
  --cronos-ink:            var(--r33-ink);
  --cronos-ink-2:          var(--r33-ink-2);
  --cronos-ink-soft:       var(--r33-ink-soft);
  --cronos-ink-muted:      var(--r33-ink-muted);
  --cronos-paper:          var(--r33-paper);
  --cronos-surface:        var(--r33-paper);
  --cronos-surface-2:      var(--r33-paper-2);
  --cronos-surface-soft:   var(--r33-paper-soft);
  --cronos-cream:          var(--r33-paper);
  --cronos-cream-2:        var(--r33-paper-2);
  --cronos-cream-soft:     var(--r33-paper-soft);
  --cronos-warm-grey:      var(--r33-grey);
  --cronos-warm-grey-2:    var(--r33-grey-2);
  --cronos-grey:           var(--r33-grey);
  --cronos-grey-2:         var(--r33-grey-2);
  --cronos-border:         var(--r33-border);
  --cronos-border-strong:  var(--r33-border-strong);
  --cronos-blue:           var(--r33-accent);
  --cronos-blue-hover:     var(--r33-accent-hover);
  --cronos-blue-soft:      var(--r33-accent-soft);
  --cronos-brown:          var(--r33-accent);
  --cronos-brown-2:        var(--r33-accent-hover);
  --cronos-brown-soft:     var(--r33-accent-soft);
  --cronos-taupe:          var(--r33-paper-3);
  --cronos-lime:           var(--r33-ink);
  --cronos-lime-soft:      var(--r33-paper-2);
  --cronos-success:        var(--r33-success);
  --cronos-warning:        var(--r33-warning);
  --cronos-danger:         var(--r33-danger);
  --cronos-info:           var(--r33-info);

  /* ----- Typography -----
     Mono LEADS. JetBrains Mono = display, labels, numerals, the "_33".
     Inter = body, comfortable reading.
     A serif role is preserved as a legacy alias mapped to display mono. */
  --font-sans:             'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display:          'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-mono:             'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-serif:            'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* DEPRECATED alias — there is no serif in this system; use --font-mono. Kept only for back-compat. */

  /* Type scale */
  --text-xs:    clamp(11px, calc(0.7rem + 0.1vw), 12px);
  --text-sm:    clamp(13px, calc(0.8rem + 0.1vw), 14px);
  --text-base:  clamp(15px, calc(0.9rem + 0.1vw), 16px);
  --text-lg:    clamp(17px, calc(1rem + 0.2vw), 19px);
  --text-xl:    clamp(20px, calc(1.1rem + 0.4vw), 22px);
  --text-2xl:   clamp(22px, calc(1.3rem + 0.6vw), 30px);
  --text-3xl:   clamp(28px, calc(1.6rem + 0.9vw), 36px);
  --text-4xl:   clamp(36px, calc(2.2rem + 1.4vw), 52px);
  --text-5xl:   clamp(48px, calc(2.8rem + 2.4vw), 72px);
  --text-6xl:   clamp(56px, calc(3.4rem + 3.4vw), 96px);

  --leading-tight:  1.02;
  --leading-snug:   1.12;
  --leading-normal: 1.5;
  --leading-loose:  1.65;

  --track-tight:    -0.02em;
  --track-display:  -0.035em;  /* mono display tracks tight at scale */
  --track-normal:   0;            /* @kind spacing */
  --track-wide:     0.04em;
  --track-caps:     0.12em;
  --track-eyebrow:  0.18em;    /* mono eyebrows track loose, route-marker feel */

  /* ----- Spacing — 4/8 scale ----- */
  --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px;
  --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px;
  --space-8: 64px; --space-9: 96px; --space-10: 128px;
  /* Long-form aliases */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  /* ----- Radii — sharper, route-signage influenced ----- */
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  8px;
  --radius-xl:  12px;
  --radius-2xl: 14px;
  --radius-3xl: 20px;
  --radius-shield: 6px;
  --radius-pill: 9999px;
  --radius-1:   4px;
  --radius-2:   8px;
  --radius-3:   14px;
  --radius:     6px;

  /* ----- Shadows — minimal, ink-tinted ----- */
  --shadow-xs:  0 1px 2px rgba(17, 17, 16, 0.04);
  --shadow-sm:  0 1px 2px rgba(17, 17, 16, 0.05), 0 1px 3px rgba(17, 17, 16, 0.03);
  --shadow-md:  0 4px 12px rgba(17, 17, 16, 0.06), 0 1px 2px rgba(17, 17, 16, 0.04);
  --shadow-lg:  0 12px 28px rgba(17, 17, 16, 0.08), 0 2px 6px rgba(17, 17, 16, 0.04);
  --shadow-xl:  0 24px 56px rgba(17, 17, 16, 0.10), 0 4px 12px rgba(17, 17, 16, 0.05);

  /* ----- Motion ----- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);    /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);    /* @kind other */
  --dur-fast:    120ms;    /* @kind other */
  --dur-base:    200ms;    /* @kind other */
  --dur-slow:    320ms;    /* @kind other */

  /* ----- Layout ----- */
  --container-max: 1240px;
  --container-pad: clamp(20px, 4vw, 64px);
  --nav-height:    68px;
}

[data-theme="dark"] {
  color-scheme: dark;

  --r33-ink:               #F2EDE3;
  --r33-ink-2:             #FFF8EA;
  --r33-ink-soft:          #D8D1C0;
  --r33-ink-muted:         #AAA394;
  --r33-ink-faint:         #777168;

  --r33-paper:             #151411;
  --r33-paper-2:           #1C1A16;
  --r33-paper-3:           #24211B;
  --r33-paper-soft:        #191713;
  --r33-surface:           #151411;
  --r33-surface-2:         #1C1A16;
  --r33-surface-soft:      #191713;
  --r33-paper-ink:         #151411;

  --r33-rule:              rgba(242, 237, 227, 0.12);
  --r33-rule-strong:       rgba(242, 237, 227, 0.22);
  --r33-grey:              #353128;
  --r33-grey-2:            #484238;
  --r33-border:            rgba(242, 237, 227, 0.12);
  --r33-border-strong:     rgba(242, 237, 227, 0.22);

  --r33-accent:            #F2C744;
  --r33-accent-ink:        #111110;
  --r33-accent-soft:       rgba(242, 199, 68, 0.16);
  --r33-accent-edge:       rgba(242, 199, 68, 0.62);
  --r33-accent-hover:      #E8BB2E;
  --r33-signal:            #FF5A1F;
  --r33-signal-soft:       rgba(255, 90, 31, 0.18);
  --r33-success:           #63C58A;
  --r33-warning:           #E4A83E;
  --r33-danger:            #F06A58;
  --r33-info:              #69A9C2;

  --r33-blue:              var(--r33-ink);
  --r33-blue-hover:        var(--r33-ink-2);
  --r33-blue-soft:         var(--r33-paper-2);
  --r33-blue-ink:          var(--r33-ink);

  --background:            var(--r33-paper);
  --foreground:            var(--r33-ink);
  --card:                  var(--r33-paper);
  --card-foreground:       var(--r33-ink);
  --popover:               var(--r33-paper);
  --popover-foreground:    var(--r33-ink);
  --primary:               var(--r33-ink);
  --primary-foreground:    var(--r33-paper);
  --secondary:             var(--r33-paper-2);
  --secondary-foreground:  var(--r33-ink);
  --muted:                 var(--r33-paper-2);
  --muted-foreground:      var(--r33-ink-muted);
  --accent:                var(--r33-accent);
  --accent-foreground:     var(--r33-accent-ink);
  --destructive:           var(--r33-danger);
  --destructive-foreground:#151411;
  --border:                var(--r33-rule-strong);
  --input:                 var(--r33-rule-strong);
  --ring:                  var(--r33-accent);

  --chart-1:               var(--r33-ink);
  --chart-2:               var(--r33-accent);
  --chart-3:               var(--r33-signal);
  --chart-4:               var(--r33-success);
  --chart-5:               var(--r33-warning);
  --chart-6:               #8394DC;
  --chart-7:               #69A9C2;
  --chart-8:               #C483A9;
  --chart-9:               #B4C05C;
  --chart-10:              #A98FD8;
  --chart-11:              #D68AA6;
  --chart-12:              #B38B62;
  --chart-grey-1:          #AAA394;
  --chart-grey-2:          #777168;
  --chart-grey-3:          #484238;
  --chart-grid:            rgba(242, 237, 227, 0.08);
  --chart-axis:            var(--r33-ink-muted);

  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.20);
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.24), 0 1px 3px rgba(0, 0, 0, 0.18);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.28), 0 1px 2px rgba(0, 0, 0, 0.20);
  --shadow-lg:  0 12px 28px rgba(0, 0, 0, 0.34), 0 2px 6px rgba(0, 0, 0, 0.22);
  --shadow-xl:  0 24px 56px rgba(0, 0, 0, 0.40), 0 4px 12px rgba(0, 0, 0, 0.24);
}

/* =========================================================================
   Semantic element styles
   ========================================================================= */

html {
  font-family: var(--font-sans);
  color: var(--r33-ink);
  background: var(--r33-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--track-display);
  color: var(--r33-ink);
  text-wrap: balance;
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: -0.03em;
  color: var(--r33-ink);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: -0.025em;
  color: var(--r33-ink);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: -0.015em;
  color: var(--r33-ink);
  margin: 0;
}

/* Eyebrow — mono caps with leading hairline, like a route-marker label */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--r33-ink-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 18px; height: 1px;
  background: var(--r33-ink-muted);
}

/* Number / data display — the "33" treatment.
   Use for stats, coordinates, ledger totals, route shields. */
.numeral, .num, .mono, .tnum {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  letter-spacing: -0.01em;
  color: var(--r33-ink);
}

p, .p {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--r33-ink-soft);
  text-wrap: pretty;
  margin: 0 0 var(--sp-4);
}

small, .caption {
  font-size: var(--text-sm);
  color: var(--r33-ink-muted);
  line-height: var(--leading-normal);
}

code, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--r33-paper-2);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-xs);
  color: var(--r33-ink);
}

/* Block code (multi-line) is NOT inline — strip the inline-pill treatment
   so the parent <pre> handles surfacing. Without this, every line in a
   <pre><code> block gets the marker-highlight background. */
pre code,
pre > code,
pre .code {
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
}

a {
  color: var(--r33-ink);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--r33-ink-2); }

hr { border: 0; border-top: 1px solid var(--r33-rule); }

/* --- Button primitives — sharper, route-signage feel --- */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: 14px; font-weight: 500;
  padding: 13px 18px; border-radius: var(--radius-1);
  border: 1px solid transparent; cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
  letter-spacing: 0;
  white-space: nowrap;
  text-decoration: none;
}
.btn:active { transform: translateY(1px); }
/* Small variant — compact actions inside tables / dense rows. */
.btn-sm { padding: 6px 11px; font-size: 12px; gap: 6px; border-radius: var(--radius-1); }
.btn-sm svg { opacity: 0.7; }
/* Large variant — prominent, standalone actions (emergency controls, empty-state CTAs). */
.btn-lg { padding: 12px 20px; font-size: 14.5px; gap: 9px; }
.btn-lg svg { width: 17px; height: 17px; }

/* Primary CTA = ink. The dominant call to action on cream surfaces. */
.btn-primary {
  background: var(--r33-ink);
  color: var(--r33-paper);
  border-color: var(--r33-ink);
}
.btn-primary:hover { background: var(--r33-ink-2); color: var(--r33-paper); }

/* Accent CTA = highway yellow. Used once per composition. */
.btn-accent {
  background: var(--r33-accent);
  color: var(--r33-accent-ink);
  border-color: var(--r33-accent);
}
.btn-accent:hover { background: var(--r33-accent-hover); border-color: var(--r33-accent-hover); color: var(--r33-accent-ink); }

/* Secondary CTA = ghost with ink-rule border */
.btn-ghost {
  background: transparent;
  color: var(--r33-ink);
  border: 1px solid var(--r33-rule-strong);
}
.btn-ghost:hover { background: var(--r33-paper-2); border-color: var(--r33-ink); color: var(--r33-ink); }

.btn-outline {
  background: transparent;
  color: var(--r33-ink);
  border-color: var(--r33-rule-strong);
}
.btn-outline:hover { border-color: var(--r33-ink); background: var(--r33-paper-2); }

.btn-secondary {
  background: var(--r33-ink);
  color: var(--r33-paper);
  border-color: var(--r33-ink);
}
.btn-secondary:hover { background: var(--r33-ink-2); color: var(--r33-paper); }

/* Destructive CTA = danger red. Confirm buttons for revoke / delete / irreversible
   actions. A real component so pages never hand-roll `style="background:danger"`,
   and so the text colour stays pinned on hover (the global a:hover rule would
   otherwise win on an <a class="btn">). */
.btn-danger {
  background: var(--r33-danger);
  color: #fff;
  border-color: var(--r33-danger);
}
.btn-danger:hover {
  background: color-mix(in oklab, var(--r33-danger) 86%, black);
  border-color: color-mix(in oklab, var(--r33-danger) 86%, black);
  color: #fff;
}
/* Success CTA = deep green. The recovery counterpart to .btn-danger — resume /
   restore actions. Like btn-danger, pins its text colour through hover. */
.btn-success {
  background: var(--r33-success);
  color: #fff;
  border-color: var(--r33-success);
}
.btn-success:hover {
  background: color-mix(in oklab, var(--r33-success) 86%, black);
  border-color: color-mix(in oklab, var(--r33-success) 86%, black);
  color: #fff;
}
/* Disabled / gated buttons (e.g. a type-to-confirm CTA before the match). */
.btn:disabled, .btn[disabled] { opacity: 0.45; pointer-events: none; }

/* Animated arrow that extends on hover — the route-signage motif */
.btn .arrow {
  display: inline-block;
  width: 14px; height: 1px;
  background: currentColor;
  position: relative;
  transition: width var(--dur-base) var(--ease-out);
}
.btn .arrow::after {
  content: "";
  position: absolute; right: 0; top: -3px;
  width: 7px; height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.btn:hover .arrow { width: 22px; }

/* --- The legacy route-shield (still available, restyled in yellow) ---
   Old code paints with <span class="route-shield">33</span>. We keep that
   working but the canonical brand mark is now the R-loop (assets/route33-r-mark.svg). */
.route-shield {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6em;
  height: 1.6em;
  padding: 0 0.4em;
  font-family: var(--font-mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  background: var(--r33-accent);
  color: var(--r33-ink);
  border: 1.5px solid var(--r33-accent);
  border-radius: var(--radius-shield);
  line-height: 1;
}
.route-shield--ink {
  background: var(--r33-ink);
  border-color: var(--r33-ink);
  color: var(--r33-paper);
}
.route-shield--paper {
  background: var(--r33-paper);
  border-color: var(--r33-ink);
  color: var(--r33-ink);
}
.route-shield--lg { font-size: 1.6em; border-width: 2px; border-radius: 10px; }

/* --- Section rule with "RT_33 · TAG" callout — the wayfinding hairline --- */
.section-rule {
  border-top: 1px solid var(--r33-rule-strong);
  position: relative;
}
.section-rule::after {
  content: "RT_33 · " attr(data-tag);
  position: absolute;
  top: -7px;
  left: var(--sp-6);
  background: var(--r33-paper);
  padding: 0 var(--sp-3);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  color: var(--r33-ink-muted);
}

/* --- The "→ Next" arrow link motif --- */
.arrow-link {
  display: inline-flex; align-items: baseline; gap: 0.4em;
  text-decoration: none;
  color: var(--r33-ink);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
}
.arrow-link::before {
  content: "→";
  color: var(--r33-accent);
}
/* Opt-out for links that carry their own trailing arrow glyph (GitHub #122). */
.arrow-link--no-icon::before {
  content: none;
}
.arrow-link:hover { color: var(--r33-ink-2); }

/* --- Live blip dot — for "live", "online", "in-flight" indicators --- */
.r33-blip {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--r33-signal);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--r33-signal) 30%, transparent);
  animation: r33-blip 1.4s ease-in-out infinite;
}
@keyframes r33-blip {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* components.css — design system components (atoms / molecules / organisms / templates).
   Layers onto colors_and_type.css. All preview files at preview/{atoms,molecules,...}
   reference this file via ../../components.css.
   Naming: .x-* prefix to keep these globally scoped without colliding with kit-local styles. */

/* ===== 01 Badge variants ===== */
.x-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-sans); font-size: 11.5px; font-weight: 500;
  padding: 3px 10px; border-radius: 9999px;
  border: 1px solid transparent; line-height: 1.4;
}
.x-badge-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.x-badge--default   { background: var(--r33-ink); color: var(--r33-paper); }
.x-badge--secondary { background: var(--r33-paper-2); color: var(--r33-ink); }
.x-badge--outline   { background: transparent; color: var(--r33-ink); border-color: var(--r33-rule-strong); }
.x-badge--success   { background: color-mix(in oklab, var(--r33-success) 14%, transparent); color: var(--r33-success); }
.x-badge--warning   { background: color-mix(in oklab, var(--r33-warning) 18%, transparent); color: var(--r33-warning); }
.x-badge--destructive { background: color-mix(in oklab, var(--r33-danger) 12%, transparent); color: var(--r33-danger); }
.x-badge--accent    { background: var(--r33-accent); color: var(--r33-accent-ink); }
/* StatusBadge — the variant drives the dot colour so consumers never hand-set it
   inline. Drop a bare <span class="x-badge-dot"></span> inside any variant. */
.x-badge--success .x-badge-dot     { background: var(--r33-success); }
.x-badge--warning .x-badge-dot     { background: var(--r33-warning); }
.x-badge--destructive .x-badge-dot { background: var(--r33-danger); }
.x-badge--accent .x-badge-dot      { background: var(--r33-accent-ink); }
.x-badge--default .x-badge-dot,
.x-badge--secondary .x-badge-dot,
.x-badge--outline .x-badge-dot     { background: currentColor; }

/* ===== 02 PageHeader template ===== */
.x-pageheader { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.x-pageheader-h1 { font-family: var(--font-display); font-size: 38px; letter-spacing: -0.035em; font-weight: 600; margin: 0; line-height: 1.05; min-width: 0; overflow-wrap: anywhere; }
.x-pageheader-desc { margin: 8px 0 0; color: var(--r33-ink-muted); font-size: 14px; line-height: 1.55; max-width: 520px; overflow-wrap: anywhere; }
.x-pageheader--compact .x-pageheader-h1 { font-size: var(--text-xl); letter-spacing: -0.025em; font-weight: 600; line-height: 1.1; }
.x-pageheader--compact .eyebrow { margin: 0 0 6px; }

/* ===== 03 EmptyState / EmptyChart ===== */
.x-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; border: 1px dashed var(--r33-rule-strong); border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--r33-paper-2) 60%, transparent);
  padding: 56px 32px; text-align: center;
}
.x-empty-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--r33-paper); color: var(--r33-ink-muted);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-xs);
}
.x-empty h3 { font-family: var(--font-display); font-size: 18px; font-weight: 600; margin: 0 0 6px; overflow-wrap: anywhere; }
.x-empty p { font-size: 13px; color: var(--r33-ink-muted); margin: 0; line-height: 1.55; max-width: 36ch; overflow-wrap: anywhere; }
.x-empty-actions { margin-top: 6px; }
.x-empty--chart { padding: 40px 24px; gap: 10px; min-height: 200px; }
.x-empty--chart .x-empty-icon { width: 44px; height: 44px; background: transparent; box-shadow: none; color: var(--r33-ink-faint); }

/* ===== 04 StepList ===== */
.x-steps {
  list-style: decimal; padding: 0 0 0 28px; margin: 0;
  font-size: 13.5px; line-height: 1.6; color: var(--r33-ink-soft);
}
.x-steps li {
  border-bottom: 1px solid var(--r33-rule); padding: 10px 0 12px;
}
.x-steps li:last-child { border-bottom: 0; }
.x-steps::marker, .x-steps li::marker {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  color: var(--r33-ink-muted); font-weight: 500;
}
.x-steps code {
  font-family: var(--font-mono); font-size: 12.5px; background: var(--r33-paper-2);
  padding: 1px 6px; border-radius: 3px;
}

/* ===== 05 Pill Tabs ===== */
.x-tabs-list {
  display: inline-flex; gap: 2px; padding: 3px; background: var(--r33-paper-2);
  border-radius: 9999px; align-items: center;
}
.x-tabs-list--scroll {
  display: flex; flex-wrap: nowrap; max-width: 100%; overflow-x: auto;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.x-tabs-list--scroll .x-tabs-trigger { flex: 0 0 auto; }
.x-tabs-trigger {
  border: 0; background: transparent; padding: 7px 16px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  color: var(--r33-ink-muted); border-radius: 9999px; cursor: pointer;
  letter-spacing: 0.02em; transition: all 150ms;
}
.x-tabs-trigger:hover { color: var(--r33-ink); }
.x-tabs-trigger[data-active="true"] {
  background: var(--r33-paper); color: var(--r33-ink); box-shadow: var(--shadow-xs);
}

/* Cards variant: stacked radio-cards with inline descriptions, for choices that drive a form. */
.x-tabs-list--cards {
  display: flex; flex-direction: column; gap: 10px; padding: 0;
  background: transparent; border-radius: 0; align-items: stretch; width: 100%;
}
.x-tabs-card {
  display: flex; flex-direction: column; gap: 4px; width: 100%;
  padding: 14px 16px; text-align: left; border-radius: var(--radius-md);
  border: 1px solid var(--r33-rule-strong); background: var(--r33-paper-soft);
  font-family: var(--font-sans); letter-spacing: normal;
}
.x-tabs-card:hover { color: var(--r33-ink); border-color: var(--r33-ink); }
.x-tabs-card[data-active="true"] {
  background: var(--r33-accent-soft); border-color: var(--r33-accent-edge);
  box-shadow: inset 0 0 0 1px var(--r33-accent-edge);
}
.x-tabs-card-title {
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  letter-spacing: -0.015em; color: var(--r33-ink);
}
.x-tabs-card-desc { font-size: 12.5px; line-height: 1.5; color: var(--r33-ink-muted); }
.x-tabs-card-note { font-size: 11.5px; line-height: 1.45; color: var(--r33-ink-muted); font-family: var(--font-mono); }

/* ===== 06 Filter Toggle ===== */
.x-filter {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: var(--radius-1);
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  cursor: pointer; border: 1px solid var(--r33-rule-strong); background: transparent;
  color: var(--r33-ink); transition: all 120ms;
}
.x-filter:hover { background: var(--r33-paper-2); }
.x-filter[aria-pressed="true"] {
  background: var(--r33-ink); color: var(--r33-paper); border-color: var(--r33-ink);
}
.x-filter-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 6px; border-radius: 9999px;
  font-family: var(--font-mono); font-size: 10.5px; font-variant-numeric: tabular-nums;
  background: var(--r33-paper-2); color: var(--r33-ink);
}
.x-filter[aria-pressed="true"] .x-filter-count {
  background: var(--r33-accent); color: var(--r33-accent-ink);
}
/* VirtualTable facets can arrive in several independent groups (e.g. an
   ownership toggle + a status toggle for a role-scoped keys list). Each group
   is its own pill cluster; a hairline rule separates adjacent groups. */
.x-filter-group { display: inline-flex; align-items: center; gap: 8px; }
.x-filter-group + .x-filter-group { padding-left: 10px; border-left: 1px solid var(--r33-rule); }

/* Price range cell — tabular numerals so the $min–max columns align. Used by
   the model catalogue runtime (scripts/models-catalogue.js). */
.x-price-range { font-variant-numeric: tabular-nums; }
.x-price-sub { font-family: var(--font-mono); font-size: 10.5px; color: var(--r33-ink-muted); }

/* ===== 07 Pagination ===== */
.x-pag { display: inline-flex; gap: 4px; align-items: center; }
.x-pag button, .x-pag-ellipsis {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; min-width: 36px; padding: 0 8px; border-radius: var(--radius-1);
  border: 1px solid transparent; background: transparent; cursor: pointer;
  font-family: var(--font-mono); font-size: 12.5px; font-variant-numeric: tabular-nums;
  color: var(--r33-ink); transition: all 120ms;
}
.x-pag button:hover { background: var(--r33-paper-2); }
.x-pag button[aria-current="page"] {
  background: var(--r33-ink); color: var(--r33-paper);
}
.x-pag button[disabled] { opacity: 0.4; cursor: not-allowed; }
.x-pag-ellipsis { cursor: default; color: var(--r33-ink-muted); }
.x-pag-prev, .x-pag-next { gap: 6px; padding: 0 12px; }

/* ===== 08 OrgAvatar ===== */
.x-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 9999px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  background: var(--r33-paper-2); color: var(--r33-ink);
  box-shadow: var(--shadow-xs); flex-shrink: 0;
}
.x-avatar--sm { width: 28px; height: 28px; font-size: 11px; }
.x-avatar--empty { background: var(--r33-paper-2); border: 1px dashed var(--r33-rule-strong); color: var(--r33-ink-muted); box-shadow: none; }
.x-avatar--accent { background: var(--r33-accent); color: var(--r33-accent-ink); }
.x-avatar--ink { background: var(--r33-ink); color: var(--r33-paper); }

/* ===== 09 Copy icon button ===== */
.x-copy {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9999px;
  border: 1px solid var(--r33-rule-strong);
  background: var(--r33-paper); color: var(--r33-ink-soft);
  cursor: pointer; flex-shrink: 0;
  box-shadow: var(--shadow-xs);
  transition: background-color 120ms, color 120ms, border-color 120ms, transform 120ms;
}
.x-copy svg { width: 14px; height: 14px; }
.x-copy:hover {
  background: var(--r33-ink); color: var(--r33-paper);
  border-color: var(--r33-ink);
}
.x-copy:active { transform: scale(0.94); }
.x-copy:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--r33-accent) 45%, transparent);
}
.x-copy[data-copied="true"] {
  background: var(--r33-success); color: #fff;
  border-color: var(--r33-success);
}

/* ===== 10 Form atoms: Label / Input / Select / Switch / SearchInput ===== */
.x-label {
  display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--r33-ink-muted);
  margin-bottom: 8px;
  user-select: none;
}
.x-input, .x-select {
  width: 100%; padding: 11px 14px; font-family: var(--font-sans); font-size: 13.5px;
  background: var(--r33-paper); border: 1px solid var(--r33-rule-strong);
  border-radius: var(--radius-1); color: var(--r33-ink);
  transition: border-color 120ms, box-shadow 120ms;
  appearance: none;
  box-sizing: border-box;
}
.x-input:focus, .x-select:focus {
  outline: none; border-color: var(--r33-ink);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--r33-accent) 30%, transparent);
}
.x-input::placeholder { color: var(--r33-ink-faint); }
/* Compact in-cell variant — an editable budget/limit field that sits inside a
   table row without inflating row height. Fixed width + mono numerals so the
   column stays scannable. Reusable for any inline-edit cell. */
.x-input--cell {
  width: 132px; padding: 6px 10px; font-size: 12.5px;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}
.x-input--cell::placeholder { font-family: var(--font-sans); }
/* Invalid state — set aria-invalid="true" on the control (and pair with a sibling
   .x-field-error message) to surface a validation error. The MCF trigger is a
   <button>, so it opts in the same way for required people/facet pickers. */
.x-input[aria-invalid="true"], .x-select[aria-invalid="true"],
.x-textarea[aria-invalid="true"], .x-mcf-trigger[aria-invalid="true"] {
  border-color: var(--r33-danger);
}
.x-input[aria-invalid="true"]:focus, .x-select[aria-invalid="true"]:focus,
.x-textarea[aria-invalid="true"]:focus {
  outline: none; border-color: var(--r33-danger);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--r33-danger) 22%, transparent);
}
.x-select {
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23111110' fill='none' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px;
}

/* ----- Read-only / disabled form controls -----
   A locked field reads as inert: muted ink on a deeper surface, no focus
   ring, not-allowed cursor. `[readonly]` keeps the value selectable (the
   user can still read/copy it) while `:disabled` blocks interaction — both
   used by e.g. a revoked key's Settings, which is shown but uneditable. */
.x-input[readonly], .x-textarea[readonly],
.x-input:disabled, .x-select:disabled, .x-textarea:disabled {
  background: var(--r33-paper-2);
  color: var(--r33-ink-muted);
  border-color: var(--r33-rule);
  box-shadow: none;
  cursor: not-allowed;
}
.x-input[readonly]:focus, .x-textarea[readonly]:focus,
.x-input:disabled:focus, .x-select:disabled:focus, .x-textarea:disabled:focus {
  outline: none; border-color: var(--r33-rule); box-shadow: none;
}
.x-select:disabled { opacity: 1; }

/* ----- Inverted form controls (on ink / dark surfaces) -----
   Pair an .x-input and an .x-select with .x-field--invert on a wrapper,
   or apply directly: <input class="x-input x-input--invert"> /
   <select class="x-select x-select--invert">.
   Uses `background-color` so the base `.x-select`'s background-image
   (chevron) keeps its no-repeat + positioned setup. */
.x-input--invert, .x-select--invert {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--r33-paper);
}
.x-input--invert::placeholder { color: rgba(255, 255, 255, 0.45); }
.x-input--invert:focus, .x-select--invert:focus {
  border-color: var(--r33-accent);
  background-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--r33-accent) 28%, transparent);
}
.x-select--invert {
  /* swap chevron to paper colour */
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23F2EDE3' fill='none' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.x-select--invert option {
  background: var(--r33-ink);
  color: var(--r33-paper);
}
.x-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--r33-paper); border: 1px solid var(--r33-rule-strong);
  border-radius: var(--radius-1); padding: 9px 14px;
  color: var(--r33-ink-muted); transition: border-color 120ms, box-shadow 120ms;
  min-width: 280px;
}
.x-search:focus-within {
  border-color: var(--r33-ink);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--r33-accent) 30%, transparent);
}
.x-search input {
  border: 0; background: transparent; outline: none; flex: 1;
  font-family: var(--font-sans); font-size: 13.5px; color: var(--r33-ink);
}
/* Clear (×) affordance — injected by r33-kit's SearchInput wiring and revealed
   only once the field holds a value. Sits at the trailing edge of the field. */
.x-search-clear {
  display: none; align-items: center; justify-content: center; flex-shrink: 0;
  border: 0; background: transparent; padding: 2px; margin: -2px -4px -2px 0;
  border-radius: var(--radius-1); color: var(--r33-ink-muted); cursor: pointer;
  transition: color 120ms, background-color 120ms;
}
.x-search-clear:hover { color: var(--r33-ink); background: var(--r33-paper-2); }
.x-search-clear:focus-visible {
  outline: none; color: var(--r33-ink);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--r33-accent) 40%, transparent);
}
.x-search[data-has-value="true"] .x-search-clear { display: inline-flex; }
.x-switch {
  position: relative; display: inline-flex; align-items: center;
  width: 40px; height: 22px; border-radius: 9999px;
  background: var(--r33-paper-2); border: 1px solid var(--r33-rule-strong);
  cursor: pointer; transition: background-color 150ms;
  padding: 0; flex-shrink: 0;
}
.x-switch[aria-checked="true"] { background: var(--r33-ink); border-color: var(--r33-ink); }
.x-switch::after {
  content: ""; position: absolute; left: 2px; top: 2px;
  width: 16px; height: 16px; border-radius: 50%; background: var(--r33-paper);
  transition: transform 150ms var(--ease-out); box-shadow: var(--shadow-xs);
}
.x-switch[aria-checked="true"]::after { transform: translateX(18px); background: var(--r33-accent); }

/* ===== 11 Spend Meter Widget ===== */
.x-meter { max-width: 260px; display: flex; flex-direction: column; gap: 6px; }
.x-meter-row { display: flex; align-items: center; justify-content: space-between; }
.x-meter-pct { font-family: var(--font-mono); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.x-meter-track {
  height: 8px; border-radius: 9999px; background: var(--r33-paper-2); overflow: hidden;
  border: 1px solid var(--r33-rule);
}
.x-meter-fill {
  height: 100%; border-radius: inherit; transition: width 220ms var(--ease-out);
}
.x-meter-thr { font-family: var(--font-mono); font-size: 10.5px; color: var(--r33-ink-muted); letter-spacing: 0.04em; }
.x-meter--ok .x-meter-fill { background: var(--r33-success); }
.x-meter--ok .x-meter-pct  { color: var(--r33-success); }
.x-meter--warn .x-meter-fill { background: var(--r33-warning); }
.x-meter--warn .x-meter-pct  { color: var(--r33-warning); }
.x-meter--danger .x-meter-fill { background: var(--r33-danger); }
.x-meter--danger .x-meter-pct  { color: var(--r33-danger); }
/* MeterGrid — a labelled row of SpendMeter molecules (monthly spend · daily quota ·
   request rate). Promoted from the my-usage pages' <style> so the "Budget & limits"
   layout is one shared source instead of a page-private grid. */
.x-metergrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.x-metergrid > div { display: flex; flex-direction: column; gap: 12px; }
.x-metergrid .x-meter { max-width: none; }
@media (max-width: 820px) { .x-metergrid { grid-template-columns: 1fr; gap: 22px; } }

/* ===== 12 Alert Banner ===== */
.x-alert {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 16px; border-radius: var(--radius-1);
  font-size: 13px; font-weight: 500; line-height: 1.5;
}
.x-alert-body { display: flex; align-items: center; gap: 10px; }
.x-alert-icon {
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-family: var(--font-mono); font-weight: 700; font-size: 12px;
}
.x-alert-dismiss {
  width: 24px; height: 24px; border: 0; background: transparent; cursor: pointer;
  border-radius: 4px; display: flex; align-items: center; justify-content: center;
  color: inherit; opacity: 0.6;
}
.x-alert-dismiss:hover { opacity: 1; background: rgba(17,17,16,0.06); }
.x-alert--warn    { background: color-mix(in oklab, var(--r33-warning) 12%, transparent);
                    border: 1px solid color-mix(in oklab, var(--r33-warning) 35%, transparent);
                    color: var(--r33-warning); }
.x-alert--warn .x-alert-icon { background: var(--r33-warning); color: #fff; }
.x-alert--danger  { background: color-mix(in oklab, var(--r33-danger) 10%, transparent);
                    border: 1px solid color-mix(in oklab, var(--r33-danger) 35%, transparent);
                    color: var(--r33-danger); }
.x-alert--danger .x-alert-icon { background: var(--r33-danger); color: #fff; }
.x-alert--info {
  background: var(--r33-accent-soft);
  border: 1px solid var(--r33-accent-edge); color: var(--r33-ink);
}
.x-alert--info .x-alert-icon { background: var(--r33-ink); color: var(--r33-accent); }

/* ===== 13 Key Reveal ===== */
.x-keyreveal {
  display: flex; flex-direction: column; gap: 16px;
}
.x-keyreveal-title {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: -0.03em;
  color: var(--r33-ink);
  margin: 0;
}
.x-keyreveal-box {
  padding: 18px; border-radius: var(--radius-lg);
  border: 1px solid color-mix(in oklab, var(--r33-success) 35%, transparent);
  background: color-mix(in oklab, var(--r33-success) 5%, var(--r33-paper));
  display: flex; flex-direction: column; gap: 12px;
}
.x-keyreveal-box-head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--r33-success);
}
.x-keyreveal-box-head::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--r33-success);
}
.x-keyreveal-secret {
  font-family: var(--font-mono); font-size: 15px; font-weight: 500;
  color: var(--r33-ink); letter-spacing: -0.005em; word-break: break-all;
}
.x-keyreveal-warn {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--r33-danger);
  font-family: var(--font-mono); letter-spacing: 0.02em;
}

/* ===== 14 Installation Instructions (tabbed code) ===== */
.x-install { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* Quickstart format is fixed per tool (data-mode on the .x-install root) —
   code snippet OR installation steps, never both, no user toggle. */
.x-install-tabs {
  display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--r33-rule-strong);
  padding-bottom: 0;
}
/* Mode visibility — driven by data-mode on the root the runtime sets. */
.x-install[data-mode="code"]  .x-install-steps     { display: none; }
.x-install[data-mode="steps"] .x-install-codeblock { display: none; }
/* Numbered installation steps (the prose alternative to the code block).
   Numbers are real DOM text (.x-install-step-n), not CSS counters, so they
   render in every engine. */
.x-install-steps {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 14px; min-width: 0;
}
.x-install-steps li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 13.5px; line-height: 1.6; color: var(--r33-ink-soft); min-width: 0;
}
.x-install-step-n {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  background: var(--r33-paper-2); border: 1px solid var(--r33-rule-strong);
  color: var(--r33-ink); font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.x-install-step-t { min-width: 0; }
.x-install-steps code {
  font-family: var(--font-mono); font-size: 12px; color: var(--r33-ink);
  background: var(--r33-paper-2); padding: 1px 6px; border-radius: 4px;
  word-break: break-word; overflow-wrap: anywhere;
}
.x-install-tab {
  border: 0; background: transparent;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  padding: 10px 14px; cursor: pointer; color: var(--r33-ink-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: all 120ms;
}
.x-install-tab:hover { color: var(--r33-ink); }
.x-install-tab[data-active="true"] {
  color: var(--r33-ink); border-bottom-color: var(--r33-accent);
}
/* ===== InstallationInstructions code block — paper, editorial ===== */
.x-install-codeblock {
  border: 1px solid var(--r33-rule-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--r33-paper-soft);
  min-width: 0;
}
.x-install-codehead {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 10px 8px 16px;
  background: var(--r33-paper-2);
  border-bottom: 1px solid var(--r33-rule);
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--r33-ink-soft);
  letter-spacing: 0.01em;
}
.x-install-codehead-name {
  font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.x-install-codehead-name::before {
  content: ""; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--r33-accent);
  margin-right: 8px; vertical-align: middle;
  box-shadow: 0 0 0 1px rgba(17,17,16,0.15);
}
.x-install-code {
  margin: 0;
  padding: 18px 20px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--r33-ink);              /* full ink — ~15:1 on paper-soft */
  white-space: pre;
  overflow-x: auto;
  font-feature-settings: "calt" 0;    /* disable ligatures */
}
.x-install-code .kw    { color: var(--r33-ink); font-weight: 600; }
.x-install-code .str   { color: var(--r33-success); }          /* deep green #1F6B3D — AAA */
.x-install-code .com   { color: var(--r33-ink-muted); font-style: italic; }
.x-install-code .punct { color: var(--r33-ink-muted); }        /* equals, colons, backslashes recede */

/* ===== 15 List Page Toolbar ===== */
.x-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--r33-rule);
}
.x-toolbar-count {
  font-size: 13px; color: var(--r33-ink-muted); font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; gap: 10px; margin: 0;
}
.x-toolbar-count strong { color: var(--r33-ink); font-weight: 600; }
.x-toolbar-count[data-loading="true"] {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--r33-ink-muted);
}
.x-toolbar-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* Toolbar inline select (a labelled <select> sitting beside the filter chips,
   e.g. My-keys "Scope", OAuth-apps "Level") + the table scope/level cell that
   pairs a badge with optional muted context. Shared so sibling list pages stop
   re-declaring the same page-local rules. */
.x-toolbar-scope { display: inline-flex; align-items: center; gap: 8px; }
.x-toolbar-scope .x-select { min-width: 150px; }
.x-scope-cell { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.x-scope-cell .muted { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A table cell that wraps a run of scope/permission badges with an "+N" overflow. */
.x-scopes-cell { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.x-scopes-cell .x-more { font-size: 11px; color: var(--r33-ink-muted); font-family: var(--font-mono); }
/* ModelPickerSheet overlay — hosts the organism in an iframe (the sheet draws its own dim) */
.x-mps-overlay { position: fixed; inset: 0; z-index: 1000; background: color-mix(in oklab, var(--r33-ink) 60%, transparent); }
.x-mps-overlay[hidden] { display: none; }
.x-mps-overlay iframe { width: 100%; height: 100%; border: 0; display: block; }
/* ----- ModelPickerSheet organism (mps-*) — promoted from components/organisms/model-picker-sheet.html
   so the shared layer (not the preview card) owns the component CSS. The .x-mps-overlay host
   provides the dim backdrop; the .mps modal floats inside it with a 24px gutter. ----- */
  /* The modal itself — floats with a 24px gutter against the dimmed backdrop,
     rounded corners + shadow, otherwise maxed-out for screen usage.        */
  .mps {
    position: fixed; top: 24px; right: 24px; bottom: 24px; left: 24px;
    background: var(--r33-paper);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    display: flex; flex-direction: column;
    z-index: 1;
    overflow: hidden;
  }

  /* HEADER */
  .mps-head {
    padding: 14px 24px; border-bottom: 1px solid var(--r33-rule);
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    flex-shrink: 0;
  }
  .mps-head h2 {
    font-family: var(--font-display); font-size: 18px; font-weight: 600;
    letter-spacing: -0.025em; margin: 0;
  }
  .mps-head-meta {
    font-family: var(--font-mono); font-size: 11px;
    color: var(--r33-ink-muted); letter-spacing: 0.06em;
  }
  .mps-head-meta strong { color: var(--r33-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
  .mps-head-actions { display: flex; align-items: center; gap: 12px; }

  /* FILTER BAR — single row: search + provider chips + applied summary */
  .mps-filter-bar {
    padding: 10px 24px; border-bottom: 1px solid var(--r33-rule);
    display: flex; flex-direction: column; gap: 8px;
    background: var(--r33-paper-soft); flex-shrink: 0;
  }
  .mps-filter-row {
    display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  }
  .mps-rail-label {
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--r33-ink-muted); font-weight: 500;
    width: 64px; flex-shrink: 0;
  }
  .mps-filter-bar .x-search { min-width: 240px; max-width: 320px; flex: 0 0 auto; }

  /* Status filter — segmented control: All · Enabled · Disabled */
  .mps-status {
    display: inline-flex; gap: 2px; padding: 3px;
    background: var(--r33-paper-2); border-radius: 9999px;
    flex-shrink: 0;
  }
  .mps-status-btn {
    border: 0; background: transparent; cursor: pointer;
    padding: 4px 12px; border-radius: 9999px;
    font-family: var(--font-mono); font-size: 11px; font-weight: 500;
    color: var(--r33-ink-muted); letter-spacing: 0.02em;
    display: inline-flex; align-items: center; gap: 5px;
    transition: all 100ms; white-space: nowrap;
  }
  .mps-status-btn:hover { color: var(--r33-ink); }
  .mps-status-btn[data-active="true"] {
    background: var(--r33-paper); color: var(--r33-ink); box-shadow: var(--shadow-xs);
  }
  .mps-status-btn .dot {
    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  }
  .mps-status-btn[data-status="enabled"] .dot  { background: var(--r33-success); }
  .mps-status-btn[data-status="disabled"] .dot { background: var(--r33-ink-muted); }
  .mps-prov-rail {
    display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
    flex: 1; min-width: 0;
  }
  .mps-prov-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px 3px 10px; border-radius: 9999px;
    border: 1px solid var(--r33-rule-strong);
    background: var(--r33-paper); color: var(--r33-ink);
    font-family: var(--font-mono); font-size: 11px; font-weight: 500;
    cursor: pointer; transition: all 100ms;
    white-space: nowrap;
  }
  .mps-prov-pill:hover { background: var(--r33-paper-2); }
  .mps-prov-pill[aria-pressed="true"] {
    background: var(--r33-ink); color: var(--r33-paper); border-color: var(--r33-ink);
    padding-right: 6px;
  }
  .mps-prov-pill[aria-pressed="true"]::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: var(--r33-accent); margin-right: 1px; flex-shrink: 0;
  }
  .mps-prov-pill .count {
    font-variant-numeric: tabular-nums; color: var(--r33-ink-muted);
    font-size: 10.5px;
  }
  .mps-prov-pill[aria-pressed="true"] .count { color: var(--r33-paper-2); }
  .mps-clear-filters {
    background: transparent; border: 0; cursor: pointer;
    font-family: var(--font-mono); font-size: 11px;
    color: var(--r33-ink-muted); padding: 4px 8px;
    text-decoration: underline; text-decoration-color: var(--r33-rule-strong);
    text-underline-offset: 3px;
  }
  .mps-clear-filters:hover { color: var(--r33-ink); text-decoration-color: var(--r33-ink); }
  .mps-clear-filters[hidden] { display: none; }

  /* APPLIED SUMMARY — sub-bar that shows what's currently filtered */
  .mps-applied {
    padding: 7px 24px; border-bottom: 1px solid var(--r33-rule);
    font-family: var(--font-mono); font-size: 11px;
    color: var(--r33-ink-muted); letter-spacing: 0.04em;
    display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  }
  .mps-applied strong { color: var(--r33-ink); font-weight: 600; }
  .mps-applied .chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 1px 7px; border-radius: 4px;
    background: var(--r33-paper-2); color: var(--r33-ink);
    font-weight: 500;
  }
  .mps-applied .chip-x {
    cursor: pointer; color: var(--r33-ink-muted); margin-left: 2px;
    background: transparent; border: 0; padding: 0; display: inline-flex;
  }
  .mps-applied .chip-x:hover { color: var(--r33-danger); }
  .mps-applied-spacer { flex: 1; }
  .mps-applied-actions { display: flex; gap: 6px; align-items: center; }

  /* Expand/collapse-all toggle — lives next to the bulk-action buttons. */
  .mps-expand-toggle {
    background: transparent; border: 0; cursor: pointer;
    padding: 3px 8px; border-radius: 4px;
    font-family: var(--font-mono); font-size: 10.5px;
    color: var(--r33-ink-muted); letter-spacing: 0.04em;
    display: inline-flex; align-items: center; gap: 5px;
    transition: color 100ms, background 100ms;
    white-space: nowrap;
  }
  .mps-expand-toggle:hover { color: var(--r33-ink); background: var(--r33-paper-2); }
  .mps-expand-toggle svg { width: 11px; height: 11px; flex-shrink: 0; }
  .mps-bulk-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--r33-paper); border: 1px solid var(--r33-rule-strong);
    padding: 3px 10px; border-radius: 9999px; cursor: pointer;
    font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
    color: var(--r33-ink); letter-spacing: 0.04em; white-space: nowrap;
    transition: all 100ms;
  }
  .mps-bulk-btn:hover { background: var(--r33-ink); color: var(--r33-paper); border-color: var(--r33-ink); }
  .mps-bulk-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
  .mps-bulk-btn[disabled]:hover { background: var(--r33-paper); color: var(--r33-ink); border-color: var(--r33-rule-strong); }
  .mps-bulk-btn .bulk-count { color: var(--r33-ink-muted); font-variant-numeric: tabular-nums; }
  .mps-bulk-btn:hover .bulk-count { color: var(--r33-paper-2); }

  /* SCROLL AREA */
  .mps-scroll { flex: 1; overflow-y: auto; min-height: 0; }

  /* GROUPED LIST — compact */
  .mps-group { border-bottom: 1px solid var(--r33-rule); }
  .mps-group:last-child { border-bottom: 0; }

  .mps-group-head {
    display: grid;
    grid-template-columns: 24px 1fr auto 16px;
    align-items: center; gap: 12px;
    padding: 7px 24px;
    min-height: 34px;
    background: var(--r33-paper-soft);
    cursor: pointer; user-select: none;
    transition: background 100ms;
    position: sticky; top: 0; z-index: 3;
  }
  .mps-group-head:hover { background: var(--r33-paper-2); }
  .mps-group-head input[type=checkbox] {
    width: 15px; height: 15px; accent-color: var(--r33-ink); cursor: pointer; justify-self: center;
  }
  .mps-group-name {
    font-size: 13px; font-weight: 600; letter-spacing: -0.005em;
    color: var(--r33-ink); line-height: 1.2;
  }
  .mps-group-sub {
    font-family: var(--font-mono); font-size: 10.5px; color: var(--r33-ink-muted);
    letter-spacing: 0.04em;
  }
  .mps-group-sub strong { color: var(--r33-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
  .mps-group-chev {
    width: 14px; height: 14px; color: var(--r33-ink-muted);
    transition: transform 140ms;
  }
  .mps-group[data-collapsed="true"] .mps-group-chev { transform: rotate(-90deg); }
  .mps-group[data-collapsed="true"] .mps-group-rows { display: none; }

  /* Provider sub-rows — denser */
  .mps-row {
    display: grid;
    grid-template-columns: 24px 1fr 320px 52px;
    align-items: center; gap: 12px;
    padding: 5px 24px 5px 60px;
    border-top: 1px solid var(--r33-rule);
    cursor: pointer; font-size: 12.5px;
  }
  .mps-row:hover { background: var(--r33-paper-soft); }
  .mps-row[data-selected="true"] {
    background: color-mix(in oklab, var(--r33-accent) 7%, var(--r33-paper));
  }
  .mps-row[data-selected="true"]:hover {
    background: color-mix(in oklab, var(--r33-accent) 11%, var(--r33-paper));
  }
  .mps-row input[type=checkbox] {
    width: 13px; height: 13px; accent-color: var(--r33-ink); cursor: pointer; justify-self: center;
  }
  .mps-row-prov { color: var(--r33-ink); font-weight: 500; }
  .mps-row-region {
    font-family: var(--font-mono); font-size: 10.5px;
    color: var(--r33-ink-muted); letter-spacing: 0.06em; text-align: right;
  }

  /* Per-route pricing — $/1M tokens for input · output · cache. Three tabular
     mono numbers, right-aligned, sharing one fixed track so they line up across
     flat rows, variant rows and the per-group column header. */
  .mps-row-price {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
    text-align: right; white-space: nowrap;
    font-family: var(--font-mono); font-size: 11px;
    font-variant-numeric: tabular-nums; color: var(--r33-ink);
  }
  /* Column header — one faint legend row per model group, so the three price
     numbers below it never need a repeated per-row label. */
  .mps-cols {
    display: grid; grid-template-columns: 24px 1fr 320px 52px;
    align-items: center; gap: 12px;
    padding: 6px 24px 5px 60px;
    font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--r33-ink-faint);
    position: sticky; top: 34px; z-index: 2;
    background: var(--r33-paper); border-bottom: 1px solid var(--r33-rule);
  }
  .mps-cols .pricehdr { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; text-align: right; }
  .mps-cols .reg { text-align: right; }

  /* Provider group with variants — expandable sub-tree under a model. */
  .mps-prov-group { border-top: 1px solid var(--r33-rule); }
  .mps-prov-head {
    display: grid;
    grid-template-columns: 24px 1fr auto 16px;
    align-items: center; gap: 12px;
    padding: 5px 24px 5px 60px;
    cursor: pointer; user-select: none; font-size: 12.5px;
    transition: background 100ms;
  }
  .mps-prov-head:hover { background: var(--r33-paper-soft); }
  .mps-prov-head input[type=checkbox] {
    width: 13px; height: 13px; accent-color: var(--r33-ink); cursor: pointer; justify-self: center;
  }
  .mps-prov-summary {
    font-family: var(--font-mono); font-size: 10.5px;
    color: var(--r33-ink-muted); letter-spacing: 0.04em;
    white-space: nowrap;
  }
  .mps-prov-summary strong { color: var(--r33-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
  .mps-prov-chev {
    width: 12px; height: 12px; color: var(--r33-ink-muted);
    transition: transform 140ms;
  }
  .mps-prov-group[data-collapsed="true"] .mps-prov-chev { transform: rotate(-90deg); }
  .mps-prov-group[data-collapsed="true"] .mps-prov-variants { display: none; }

  /* Variant rows — indented one level deeper than provider rows. */
  .mps-row--variant {
    padding-left: 96px;
    border-top: 1px solid var(--r33-rule);
    background: color-mix(in oklab, var(--r33-paper-soft) 50%, var(--r33-paper));
  }
  .mps-row--variant:hover { background: var(--r33-paper-soft); }
  .mps-row--variant[data-selected="true"] {
    background: color-mix(in oklab, var(--r33-accent) 5%, var(--r33-paper));
  }

  .mps-empty {
    padding: 80px 24px; text-align: center;
    color: var(--r33-ink-muted); font-size: 13.5px; line-height: 1.6;
  }
  .mps-empty strong { color: var(--r33-ink); }

  /* Sentinel row for chunked loading — virtualization without measuring DOM heights */
  .mps-sentinel {
    padding: 14px 24px; border-top: 1px solid var(--r33-rule);
    display: flex; align-items: center; justify-content: center; gap: 10px;
    color: var(--r33-ink-muted);
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.1em; text-transform: uppercase;
  }
  .mps-end {
    padding: 18px 24px; border-top: 1px solid var(--r33-rule);
    text-align: center; color: var(--r33-ink-faint);
    font-family: var(--font-mono); font-size: 10.5px;
    letter-spacing: 0.14em; text-transform: uppercase;
  }

  /* FOOTER */
  .mps-foot {
    padding: 12px 24px; border-top: 1px solid var(--r33-rule);
    background: var(--r33-paper-soft);
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    flex-shrink: 0;
  }
  .mps-foot-stats { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
  .mps-foot-count {
    font-family: var(--font-mono); font-size: 12.5px; color: var(--r33-ink);
  }
  .mps-foot-count strong { font-weight: 600; font-variant-numeric: tabular-nums; }
  .mps-foot-breakdown {
    font-family: var(--font-mono); font-size: 10.5px; color: var(--r33-ink-muted);
    letter-spacing: 0.04em;
  }
  .mps-foot-actions { display: flex; gap: 8px; }


/* ----- ExportSheet — the bulky "filter then export" modal emitted by the
   EventExplorer runtime (scripts/event-explorer.js). Hosts a FiltersCard so the
   user scopes the CSV with the SAME filters as the list. Shared by logs / audit
   / my-logs. ----- */
.x-sheet-overlay { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px; background: rgba(17,17,16,0.42); }
.x-sheet-overlay[hidden] { display: none; }
.x-sheet { width: 100%; max-width: 600px; max-height: 86vh; display: flex; flex-direction: column; background: var(--r33-paper); border: 1px solid var(--r33-rule-strong); border-radius: var(--radius-md); box-shadow: 0 24px 64px rgba(17,17,16,0.28); overflow: hidden; }
.x-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px; border-bottom: 1px solid var(--r33-rule); }
.x-sheet-head h3 { font-family: var(--font-display); font-size: 16px; margin: 0 0 4px; }
.x-sheet-head .desc { font-size: 13px; color: var(--r33-ink-soft); margin: 0; }
.x-sheet-close { background: none; border: 0; cursor: pointer; color: var(--r33-ink-muted); padding: 4px; line-height: 1; border-radius: var(--radius-1); }
.x-sheet-close:hover { background: var(--r33-paper-2); color: var(--r33-ink); }
.x-sheet-body { padding: 18px 22px; overflow: auto; }
/* Inside the sheet the FiltersCard is always-open chrome, not a collapsible card. */
.x-sheet-body .x-filterscard { border: 0; }
.x-sheet-body .x-filterscard-head { cursor: default; }
.x-sheet-body .x-filterscard-chev { display: none; }
.x-sheet-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 22px; border-top: 1px solid var(--r33-rule); background: var(--r33-paper-2); }
.x-sheet-count { font-size: 13px; color: var(--r33-ink-soft); font-variant-numeric: tabular-nums; }
.x-sheet-actions { display: flex; gap: 8px; flex-shrink: 0; }
/* ManageMembersSheet (member-manage.js) — the roster editor inside the shared
   x-sheet: add-person row, search, then one grid row per member (identity ·
   role select · budget input · remove). Removed rows collapse to a note + Undo
   until save. */
.x-sheet--members { max-width: 720px; }
/* Only the roster list scrolls — add-person row, search and the footer hint stay pinned. */
.x-sheet--members .x-sheet-body { display: flex; flex-direction: column; overflow: visible; min-height: 0; }
.x-mm-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; border: 1px solid var(--r33-rule); border-radius: var(--radius-md); background: var(--r33-paper); }
.x-mm-add { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.x-mm-add .x-select { flex: 1; min-width: 0; }
.x-mm-search { margin-bottom: 12px; }
.x-mm-row { display: grid; grid-template-columns: minmax(0, 1fr) 110px 130px 28px; gap: 10px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--r33-rule); }
.x-mm-row:first-child { border-top: 0; }
.x-mm-row[data-removed="true"] { background: var(--r33-paper-soft); }
.x-mm-row[data-removed="true"] .x-identity { opacity: 0.45; }
.x-mm-note { grid-column: 2 / 4; font-family: var(--font-mono); font-size: 10.5px; color: var(--r33-ink-muted); text-align: right; line-height: 1.4; }
.x-mm-undo, .x-mm-remove {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  color: var(--r33-ink-muted); background: none; border: 0; cursor: pointer;
  padding: 4px 6px; border-radius: var(--radius-sm); line-height: 1; display: inline-flex; align-items: center; justify-content: center;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.x-mm-undo:hover { color: var(--r33-ink); background: var(--r33-paper-2); }
.x-mm-remove:hover { color: var(--r33-danger); background: var(--r33-paper-2); }
.x-mm-empty { padding: 28px 16px; text-align: center; color: var(--r33-ink-muted); font-size: 13px; }
/* Searchable add-person combobox — an x-input trigger with an in-sheet x-menu
   dropdown (no portal, so it always stacks above the sheet overlay). */
.x-mm-addpick { position: relative; flex: 1; min-width: 0; }
.x-mm-addpick .x-input { width: 100%; }
.x-mm-addpick-menu {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
  max-height: 240px; overflow-y: auto; overscroll-behavior: contain; padding: 4px; box-shadow: var(--shadow-md);
}
.x-mm-addpick-menu .x-menu-item { width: 100%; border: 0; background: none; font: inherit; color: inherit; text-align: left; }
.x-mm-addpick-menu .x-menu-item[data-active="true"] { background: var(--r33-paper-2); }
.x-mm-addpick-empty { padding: 10px 12px; font-size: 12.5px; color: var(--r33-ink-muted); }
/* "Configure models…" field used by key + project forms */
.x-models-field { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.x-models-summary { display: flex; flex-wrap: wrap; gap: 6px; }
.x-models-summary:empty { display: none; }
/* "Add people…" field (MultiCheckboxFilter trigger + selected chips) used by the
   project create/edit forms — shared so every form renders the identical layout. */
.x-people-field { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.x-people-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.x-people-chips:empty { display: none; }
.x-people-chips .x-badge { cursor: default; }
/* Buttons inline with the search/filter controls match the control height (the
   default .btn is taller than .x-search); keeps the toolbar row visually even. */
.x-toolbar-controls .btn { padding-top: 9px; padding-bottom: 9px; }

/* Loading variation for x-search — show spinner instead of magnifier */
.x-search[data-loading="true"] .x-search-icon { display: none; }
.x-search[data-loading="true"] .x-spinner     { display: inline-block; }
.x-search .x-spinner { display: none; }

/* ===== Spinner atom (reusable across components) ===== */
.x-spinner {
  display: inline-block; flex-shrink: 0;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1.75px solid var(--r33-rule-strong);
  border-top-color: var(--r33-ink);
  animation: x-spin 0.7s linear infinite;
  vertical-align: middle;
}
.x-spinner--sm { width: 11px; height: 11px; border-width: 1.5px; }
.x-spinner--lg { width: 20px; height: 20px; border-width: 2.25px; }
.x-spinner--accent { border-top-color: var(--r33-accent); }
.x-spinner--inverse { border-color: rgba(242,237,227,0.25); border-top-color: var(--r33-paper); }
@keyframes x-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .x-spinner { animation-duration: 1.6s; }
}

/* ===== Inline trio (key + copy) row =====*/
.x-keyrow {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: var(--r33-paper-2); border-radius: var(--radius-1);
  border: 1px solid var(--r33-rule); font-family: var(--font-mono); font-size: 12.5px;
}
.x-keyrow code { background: transparent; padding: 0; }

/* ===== Small helper - section grid for atomic showcases ===== */
.x-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.x-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.x-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }


/* ===== Table primitive — paper-toned, sticky thead, hover row ===== */
.x-table-wrap {
  width: 100%; overflow-x: auto;
  border: 1px solid var(--r33-rule); border-radius: var(--radius-md);
  background: var(--r33-paper);
}
.x-table {
  width: 100%; border-collapse: collapse;
  font-size: 13px; color: var(--r33-ink);
}
.x-table thead th {
  position: sticky; top: 0; z-index: 1;
  text-align: left; font-weight: 500;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--r33-ink-muted);
  padding: 10px 16px;
  background: var(--r33-paper-2);
  border-bottom: 1px solid var(--r33-rule-strong);
  white-space: nowrap;
}
.x-table thead th[data-sort] { cursor: pointer; user-select: none; }
.x-table thead th[data-sort]:hover { color: var(--r33-ink); }
.x-table thead th .sort-icon { margin-left: 6px; opacity: 0.5; display: inline-block; vertical-align: middle; }
.x-table--compact-head .x-table thead th { font-size: 9px; padding-inline: 2px; }
.x-table--compact-head .x-table thead th.num {
  padding-inline: 1px;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.15;
}
.x-table--compact-head .x-table thead th .sort-icon { width: 10px; height: 10px; margin-left: 2px; }
.x-table thead th[aria-sort="ascending"] .sort-icon,
.x-table thead th[aria-sort="descending"] .sort-icon { opacity: 1; color: var(--r33-ink); }
.x-table tbody td {
  padding: 12px 16px; border-top: 1px solid var(--r33-rule);
  vertical-align: middle;
}
.x-table tbody tr:first-child td { border-top: 0; }
.x-table tbody tr:hover td { background: var(--r33-paper-soft); }
.x-table tbody tr[data-selected="true"] td { background: color-mix(in oklab, var(--r33-accent) 8%, var(--r33-paper)); }
.x-table td.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); font-size: 12px; }
.x-table thead th.num { text-align: right; font-variant-numeric: tabular-nums; }
.x-table td.muted { color: var(--r33-ink-muted); }
.x-table .row-clickable { cursor: pointer; }
/* Opt-in sticky header (DataTable `stickyHeader`) — pins thead in a bounded scroll viewport. */
.x-table--sticky-head thead th { position: sticky; top: 0; z-index: 1; background: var(--r33-paper); }
.x-table .row-clickable:focus-visible { outline: 2px solid var(--r33-accent); outline-offset: -2px; }

/* InlineEditRow — clicking a clickable row expands its editor (a FormCard) in a
   full-width row injected directly beneath it, so edits happen in place between
   the row being edited and the next row. The spanning cell drops the default cell
   padding and tints to soft paper so the FormCard reads as an extension of its
   row. Reusable on any .x-table whose rows open an inline editor. */
.x-table tr.x-inline-edit-row > td { padding: 14px 16px; background: var(--r33-paper-soft); }
.x-table tr.x-inline-edit-row .x-form-card { margin: 0; }

/* OrderableTable — rows reordered by dragging the grip handle. Order is meaningful
   (evaluation order); the handle is the only drag affordance so row clicks still open.
   Behaviour is wired per-surface; this is the shared presentation. */
.x-table--orderable td.x-order { width: 1%; white-space: nowrap; padding-right: 8px; }
.x-order-cell { display: inline-flex; align-items: center; gap: 10px; }
.x-order-idx { font-family: var(--font-mono); font-size: 12px; color: var(--r33-ink-muted); font-variant-numeric: tabular-nums; min-width: 14px; text-align: right; }
.x-drag-handle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border: 0; background: transparent; border-radius: var(--radius-sm);
  color: var(--r33-ink-muted); cursor: grab; touch-action: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.x-drag-handle:hover { background: var(--r33-paper-2); color: var(--r33-ink); }
.x-drag-handle:active { cursor: grabbing; }
.x-table--orderable tbody tr.x-row-dragging td { background: var(--r33-paper-2); opacity: 0.4; }
.x-table--orderable tbody tr.x-row-dropbefore td { box-shadow: inset 0 2px 0 var(--r33-accent); }
.x-table--orderable tbody tr.x-row-dropafter td { box-shadow: inset 0 -2px 0 var(--r33-accent); }

/* ===== Alert dialog (modal) primitive ===== */
.x-dialog-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: color-mix(in oklab, var(--r33-ink) 60%, transparent);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: x-fade-in 140ms var(--ease-out, ease-out);
}
.x-dialog {
  position: relative; overflow: hidden;
  background: var(--r33-paper);
  /* Flavour-tinted top stripe instead of a full border — a 6px coloured top
     meeting a 1px gray side at a rounded corner miters into a visible step,
     so the side/bottom rules are dropped (the shadow gives edge definition). */
  border: 0;
  border-top: 6px solid var(--dlg-accent, var(--r33-ink));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 480px; width: 100%;
  padding: 23px 28px 28px;
  display: flex; flex-direction: column; gap: 14px;
  /* Radix portals mount at <body>, escaping any line-height normalization a
     host app wraps its stories in — pin the inheritance-neutral value here. */
  line-height: normal;
  animation: x-pop-in 180ms var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}
/* Flavour system — one organism, five flavours. Each swaps the accent token
   used by the top stripe, the eyebrow and the primary CTA. Promoted here from
   the AlertDialog organism preview so EVERY dialog rendered by scripts/dialogs.js
   (on any page) is styled identically. */
.x-dialog[data-flavour="info"]     { --dlg-accent: var(--r33-ink);     --dlg-cta-bg: var(--r33-ink);     --dlg-cta-fg: var(--r33-paper); }
.x-dialog[data-flavour="success"]  { --dlg-accent: var(--r33-success); --dlg-cta-bg: var(--r33-success); --dlg-cta-fg: #fff; }
.x-dialog[data-flavour="warning"]  { --dlg-accent: var(--r33-warning); --dlg-cta-bg: var(--r33-warning); --dlg-cta-fg: #fff; }
.x-dialog[data-flavour="danger"]   { --dlg-accent: var(--r33-danger);  --dlg-cta-bg: var(--r33-danger);  --dlg-cta-fg: #fff; }
.x-dialog[data-flavour="question"] { --dlg-accent: var(--r33-accent);  --dlg-cta-bg: var(--r33-ink);     --dlg-cta-fg: var(--r33-paper); }
.x-dialog[data-flavour] .x-dialog-eyebrow { color: var(--dlg-accent); display: inline-flex; align-items: center; gap: 6px; }
.x-dialog[data-flavour] .cta-primary {
  background: var(--dlg-cta-bg); border-color: var(--dlg-cta-bg); color: var(--dlg-cta-fg);
}
.x-dialog[data-flavour] .cta-primary:hover { filter: brightness(0.94); }
.x-dialog .eyebrow-ic { width: 12px; height: 12px; flex-shrink: 0; display: block; }
/* React's AlertDialogHeader wrapper must stay layout-transparent: as a plain
   block child it would swallow the dialog's flex gaps (2×14px height collapse
   vs the prototype, whose dialogs.js mounts these as direct children). */
.x-dialog-header { display: contents; }
.x-dialog-eyebrow {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--r33-danger); font-weight: 500;
}
.x-dialog-title {
  font-family: var(--font-display); font-size: 22px; font-weight: 600;
  /* Pins the tokens.css h2 cascade prototype pages compute; overrides
     marketing.css's h2 line-height on hosts that bundle it (storybook). */
  line-height: 1.12;
  letter-spacing: -0.025em; margin: 0; color: var(--r33-ink);
}
.x-dialog-desc {
  font-size: 14px; line-height: 1.6; color: var(--r33-ink-soft); margin: 0; overflow-wrap: anywhere;
}
.x-dialog-footer {
  display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px;
}
@keyframes x-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes x-pop-in {
  from { opacity: 0; transform: scale(0.96) translateY(4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ===== Dropdown menu primitive — used by SegmentFilter, header menus ===== */
.x-menu {
  background: var(--r33-paper);
  border: 1px solid var(--r33-rule-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  min-width: 220px; padding: 6px;
  font-family: var(--font-sans); color: var(--r33-ink);
}
.x-menu-label {
  padding: 6px 10px 4px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--r33-ink-muted); font-weight: 500;
}
.x-menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-1);
  font-size: 13px; cursor: pointer; user-select: none;
  background: transparent; border: 0; width: 100%; text-align: left; color: inherit;
}
.x-menu-item:hover { background: var(--r33-paper-2); }
.x-menu-item[data-active="true"] { background: var(--r33-paper-2); }
.x-menu-item[data-danger="true"] { color: var(--r33-danger); }
.x-menu-item[data-danger="true"]:hover { background: color-mix(in oklab, var(--r33-danger) 10%, transparent); }
.x-menu-item .shortcut {
  margin-left: auto; font-family: var(--font-mono); font-size: 10.5px;
  color: var(--r33-ink-muted); letter-spacing: 0.06em;
}
.x-menu-item .leading { width: 16px; display: flex; align-items: center; justify-content: center; color: var(--r33-ink-muted); }
.x-menu-sep { height: 1px; background: var(--r33-rule); margin: 6px 4px; }

/* ===== Sidebar (dashboard nav rail) ===== */
.x-sidebar {
  width: 256px; flex-shrink: 0;
  background: var(--r33-paper);
  color: var(--r33-ink);
  border-right: 1px solid var(--r33-rule);
  display: flex; flex-direction: column;
  font-family: var(--font-sans);
}
.x-sidebar-head { padding: 20px 18px 12px; }

/* Canonical route_33 lockup — mark + wordmark, sized for sidebar use */
.x-sidebar-lockup {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--r33-ink);
}
/* Header home link — wraps the lockup when the app links the logo to its overview */
.x-sidebar-home { display: inline-block; color: inherit; text-decoration: none; }
.x-sidebar-home:hover { text-decoration: none; }
.x-sidebar-mark { display: block; flex-shrink: 0; }
.x-sidebar-mark path,
.x-sidebar-mark line {
  fill: none; stroke: currentColor;
  stroke-linecap: round; stroke-linejoin: round; stroke-width: 34;
}
.x-sidebar-word {
  font-family: var(--font-mono); font-weight: 500;
  font-size: 22px; letter-spacing: -0.04em;
  color: var(--r33-ink); line-height: 1; font-variant-numeric: tabular-nums;
}
.x-sidebar-word .sep { color: var(--r33-ink-muted); }
.x-sidebar-endorse {
  margin-top: 6px;
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--r33-ink-muted);
}
.x-sidebar-orgswitcher {
  margin: 0 12px 8px; padding: 8px 10px;
  border: 1px solid var(--r33-rule); border-radius: var(--radius-1);
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; cursor: pointer; background: var(--r33-paper-soft);
}
.x-sidebar-orgswitcher:hover { border-color: var(--r33-rule-strong); }
.x-sidebar-orgswitcher-meta { line-height: 1.2; flex: 1; min-width: 0; }
.x-sidebar-orgswitcher-name { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x-sidebar-orgswitcher-role { font-size: 11px; color: var(--r33-ink-muted); }
.x-sidebar-nav { flex: 1; overflow-y: auto; padding: 12px 12px 16px; display: flex; flex-direction: column; gap: 20px; }
.x-sidebar-section { display: flex; flex-direction: column; gap: 2px; }
.x-sidebar-section h4 {
  margin: 0 0 6px; padding: 0 10px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--r33-ink-muted); font-weight: 500;
}
.x-sidebar-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-1);
  font-size: 13px; font-weight: 500; color: var(--r33-ink-soft);
  text-decoration: none; cursor: pointer;
}
.x-sidebar-link:hover { background: var(--r33-paper-soft); color: var(--r33-ink); }
.x-sidebar-link[data-active="true"] {
  background: var(--r33-ink); color: var(--r33-paper);
}
.x-sidebar-link[data-active="true"] svg { color: var(--r33-paper); }
.x-sidebar-link svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--r33-ink-muted); }
.x-sidebar-theme-toggle {
  width: var(--sp-6); height: var(--sp-6); margin: var(--sp-2) var(--sp-4);
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--radius-1); background: transparent;
  color: var(--r33-ink-muted); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.x-sidebar-theme-toggle svg { width: var(--sp-4); height: var(--sp-4); }
.x-sidebar-theme-toggle:hover { background: var(--r33-paper-soft); color: var(--r33-ink); }
.x-sidebar-theme-toggle:focus-visible { outline: 2px solid var(--r33-accent); outline-offset: 2px; }
.x-corner-toggle {
  width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--r33-paper); color: var(--r33-ink); border: 1px solid var(--r33-rule-strong);
  border-radius: var(--radius-md); cursor: pointer; box-shadow: var(--shadow-xs);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.x-corner-toggle svg { width: 16px; height: 16px; }
.x-corner-toggle:hover { background: var(--r33-paper-2); border-color: var(--r33-ink); }
.x-corner-toggle:focus-visible { outline: 2px solid var(--r33-accent); outline-offset: 2px; }
/* AccountButton — the member-info row at the foot of the sidebar. The WHOLE
   row is the menu trigger (avatar + identity + chevron); opens the user menu
   (.sb-menu-user). Used by the Sidebar organism, the AppShell template, and
   injected by shell.js on every page. */
.x-sidebar-user {
  width: 100%; text-align: left; font: inherit; color: inherit;
  border: 0; border-top: 1px solid var(--r33-rule);
  padding: 12px 14px;
  display: flex; align-items: center; gap: 10px;
  background: transparent; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.x-sidebar-user:hover { background: var(--r33-paper-soft); }
.x-sidebar-user[aria-expanded="true"] { background: var(--r33-paper-2); }
.x-sidebar-user-meta { flex: 1; min-width: 0; line-height: 1.2; }
.x-sidebar-user-name { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x-sidebar-user-role { font-size: 10.5px; color: var(--r33-ink-muted); font-family: var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; }
.x-sidebar-user-chev { flex-shrink: 0; width: 15px; height: 15px; color: var(--r33-ink-muted); }
.x-sidebar-user:hover .x-sidebar-user-chev,
.x-sidebar-user[aria-expanded="true"] .x-sidebar-user-chev { color: var(--r33-ink); }
/* Static deployed-build marker at the bottom of the account menu (not a
   clickable row — informational only). */
.x-menu-version {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--r33-ink-muted);
  padding: 6px 10px 8px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== SpendRail (molecule) =========================================
   Always-on personal + project/scope spend, docked in the sidebar above
   the user row. Shows "at a glance" budget burn on EVERY signed-in page.
   Reuses the SpendMeter tone modifiers (--ok / --warn / --danger) on a
   compacted track. */
.x-sidebar-spend {
  border-top: 1px solid var(--r33-rule);
  padding: 12px 14px 14px;
  display: flex; flex-direction: column; gap: 11px;
}
.x-sidebar-spend-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.x-sidebar-spend-head .lbl {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--r33-ink-muted); font-weight: 500; white-space: nowrap;
}
.x-sidebar-spend-head .more {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--r33-ink-muted); text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 3px;
}
.x-sidebar-spend-head .more:hover { color: var(--r33-ink); }
.x-sidebar-spend-head .more svg { width: 12px; height: 12px; }

.x-spend-item { display: flex; flex-direction: column; gap: 5px; }
.x-spend-item-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.x-spend-item-name {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--r33-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.x-spend-item-name .tag {
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--r33-ink-muted);
  border: 1px solid var(--r33-rule); border-radius: var(--radius-1);
  padding: 1px 4px; flex-shrink: 0;
}
.x-spend-item-val {
  font-family: var(--font-mono); font-size: 11px; font-variant-numeric: tabular-nums;
  color: var(--r33-ink-soft); flex-shrink: 0; white-space: nowrap;
}
.x-spend-item-val b { color: var(--r33-ink); font-weight: 600; }
.x-spend-item .x-meter-track { height: 6px; }
.x-spend-item-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-family: var(--font-mono); font-size: 10px; font-variant-numeric: tabular-nums;
}
.x-spend-item-pct { font-weight: 600; white-space: nowrap; }
.x-spend-item-thr { color: var(--r33-ink-muted); letter-spacing: 0.02em; white-space: nowrap; }
.x-spend-item--ok     .x-meter-fill { background: var(--r33-success); }
.x-spend-item--ok     .x-spend-item-pct { color: var(--r33-success); }
.x-spend-item--warn   .x-meter-fill { background: var(--r33-warning); }
.x-spend-item--warn   .x-spend-item-pct { color: var(--r33-warning); }
.x-spend-item--danger .x-meter-fill { background: var(--r33-danger); }
.x-spend-item--danger .x-spend-item-pct { color: var(--r33-danger); }

/* Project list — personal item stays pinned; the projects scroll when the
   user belongs to more than a handful. */
.x-spend-sub {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--r33-ink-muted); font-weight: 500;
  padding-top: 2px; border-top: 1px solid var(--r33-rule);
}
.x-spend-sub .total { color: var(--r33-ink-soft); letter-spacing: 0.02em; }
.x-spend-scroll {
  display: flex; flex-direction: column; gap: 10px;
  /* Caps the project list at ~3 rows, then scrolls — the partial 4th row
     signals there's more. Keeps the rail a fixed height regardless of count. */
  max-height: 100px; overflow-y: auto; overscroll-behavior: contain;
  margin: 0 -4px; padding: 1px 6px 1px 4px;
  scrollbar-width: thin; scrollbar-color: var(--r33-rule-strong) transparent;
}
.x-spend-scroll::-webkit-scrollbar { width: 5px; }
.x-spend-scroll::-webkit-scrollbar-thumb { background: var(--r33-rule-strong); border-radius: 9999px; }
.x-spend-scroll::-webkit-scrollbar-track { background: transparent; }
.x-spend-proj { display: flex; flex-direction: column; gap: 4px; text-decoration: none; }
.x-spend-proj-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.x-spend-proj-name {
  font-size: 12px; font-weight: 600; color: var(--r33-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.x-spend-proj:hover .x-spend-proj-name { color: var(--r33-ink); text-decoration: underline; text-underline-offset: 2px; }
.x-spend-proj-val {
  font-family: var(--font-mono); font-size: 10.5px; font-variant-numeric: tabular-nums;
  color: var(--r33-ink-soft); flex-shrink: 0; white-space: nowrap; display: inline-flex; gap: 6px; align-items: baseline;
}
.x-spend-proj-val .pct { font-weight: 600; }
.x-spend-proj .x-meter-track { height: 5px; }
.x-spend-item--ok     .x-spend-proj-val .pct { color: var(--r33-success); }
.x-spend-item--warn   .x-spend-proj-val .pct { color: var(--r33-warning); }
.x-spend-item--danger .x-spend-proj-val .pct { color: var(--r33-danger); }

/* ===== ScopeSwitcher (molecule) =====================================
   Trigger + dropdown picker for the active scope. Three flavours:
     - org      : pick an organisation (avatar + name + role)
     - tenant   : pick a tenant root  (building mark + member count)
     - platform : pick a platform     (globe mark + region + status)
   Flavour is set via `data-flavour` on `.x-scope-switcher`. Used by the
   Sidebar organism and the AppShell template; the molecule preview at
   preview/molecules/scope-switcher.html doc'd here.
   ==================================================================== */
.x-scope-switcher {
  position: relative;
  display: inline-block;
  width: 268px; /* default; sidebar host overrides to full-width */
}
.x-scope-switcher-trigger {
  width: 100%; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--r33-rule);
  background: transparent;
  text-align: left; font: inherit; color: inherit;
}
.x-scope-switcher-trigger:hover { background: var(--r33-paper-2); }
.x-scope-switcher-trigger[aria-expanded="true"] { background: var(--r33-paper-2); border-color: var(--r33-rule-strong); }

/* Leading mark — avatar for org, ink chip for tenant, globe for platform */
.x-scope-mark {
  width: 28px; height: 28px;
  border-radius: var(--radius-1);
  display: grid; place-items: center;
  flex-shrink: 0;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0;
}
.x-scope-switcher[data-flavour="org"]      .x-scope-mark { background: var(--r33-paper-3); color: var(--r33-ink); border: 1px solid var(--r33-rule); border-radius: 9999px; }
.x-scope-switcher[data-flavour="tenant"]   .x-scope-mark { background: var(--r33-ink); color: var(--r33-paper); }
.x-scope-switcher[data-flavour="platform"] .x-scope-mark { background: var(--r33-ink); color: var(--r33-paper); }
.x-scope-switcher[data-flavour="dev"]      .x-scope-mark { background: var(--r33-ink); color: var(--r33-paper); }

/* Environment switcher (mock-idp · data-flavour="dev"). Reuses the scope menu
   chrome; each row pairs a selectable pick button with a trash affordance, and a
   create action sits below a separator. Mounted from shell.js. */
.x-env-row { display: flex; align-items: center; gap: 2px; }
.x-env-row .x-env-pick { flex: 1; min-width: 0; }
.x-env-del {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: var(--radius-1);
  display: grid; place-items: center; cursor: pointer;
  background: transparent; border: 0; color: var(--r33-ink-faint);
}
.x-env-del:hover { background: color-mix(in oklab, var(--r33-danger) 12%, transparent); color: var(--r33-danger); }
.x-env-create {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 10px; border-radius: var(--radius-1); cursor: pointer;
  background: transparent; border: 0; text-align: left; color: var(--r33-ink-soft);
  font: inherit; font-size: 13px; font-weight: 500;
}
.x-env-create svg { color: var(--r33-ink-muted); flex-shrink: 0; }
.x-env-create:hover { background: var(--r33-paper-2); color: var(--r33-ink); }

.x-scope-meta {
  display: flex; flex-direction: column; line-height: 1.2;
  flex: 1; min-width: 0;
  text-align: left; /* Override default <button> text-align: center */
}
.x-scope-meta .name {
  font-size: 13px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.x-scope-meta .role {
  font-size: 11px; color: var(--r33-ink-muted); font-family: var(--font-mono);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.x-scope-chev {
  color: var(--r33-ink-muted); flex-shrink: 0;
  transition: transform 140ms ease;
}
.x-scope-switcher-trigger[aria-expanded="true"] .x-scope-chev { transform: rotate(180deg); }

/* Menu — positioned below the trigger */
.x-scope-menu {
  position: absolute; top: 100%; left: 0;
  margin-top: 8px; z-index: 5;
  min-width: 268px;
  display: none;
  box-shadow: var(--shadow-md);
}
.x-scope-switcher[data-open="true"] .x-scope-menu { display: block; }

.x-scope-menu-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-1);
  font-size: 13px; cursor: pointer; user-select: none;
  background: transparent; border: 0; width: 100%; text-align: left; color: inherit;
}
.x-scope-menu-row:hover { background: var(--r33-paper-2); }
.x-scope-menu-row[data-active="true"] { background: var(--r33-paper-2); }
.x-scope-menu-row .check {
  width: 14px; height: 14px; flex-shrink: 0;
  color: var(--r33-ink); display: flex; align-items: center; justify-content: center;
}
.x-scope-menu-row .check[data-hidden="true"] svg { visibility: hidden; }
.x-scope-menu-row .meta { display: flex; flex-direction: column; line-height: 1.2; flex: 1; min-width: 0; text-align: left; }
.x-scope-menu-row .meta .name { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x-scope-menu-row .meta .role { font-size: 11px; color: var(--r33-ink-muted); font-family: var(--font-mono); }
/* Tenant tag — marks a scope row whose org sits in a DIFFERENT tenant than the
   signed-in user. Right-aligned pill; absent for same-tenant orgs. */
.x-scope-menu-row .x-scope-row-tenant {
  flex-shrink: 0; margin-left: 6px;
  font-size: 10px; font-weight: 500; line-height: 1;
  font-family: var(--font-mono); letter-spacing: 0.02em;
  color: var(--r33-ink-soft);
  background: var(--r33-paper-3);
  border: 1px solid var(--r33-rule);
  border-radius: 9999px; padding: 3px 7px;
}

/* When mounted inside the sidebar, the switcher fills the gutter rather than
   sitting at its fixed 268px design width. */
.x-sidebar .x-scope-switcher { width: auto; display: block; margin: 0 12px 8px; }

/* Static (locked) scope — fixed tenant context for tenant_admin / tenant_reporter.
   Reads like the switcher but is non-interactive: default cursor, no hover, a
   lock glyph in place of the chevron. Only platform admins switch tenants. */
.x-scope-switcher--static .x-scope-switcher-trigger { cursor: default; }
.x-scope-switcher--static .x-scope-switcher-trigger:hover { background: transparent; border-color: var(--r33-rule); }
.x-scope-lock { color: var(--r33-ink-muted); flex-shrink: 0; opacity: 0.75; }


/* ===== 30 BackLink (atom) ===========================================
   "← Back to keys"-style signpost row above and below detail pages.
   Mono, ink-muted, hover-to-ink. Render as <a> when it's a route, as
   <button> when it triggers in-app navigation — the visual treatment
   is the same either way. ======================================== */
.x-back-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--r33-ink-muted); text-decoration: none;
  line-height: 1.4;
  transition: color var(--dur-fast) var(--ease-out);
  background: transparent; border: 0; padding: 0; cursor: pointer;
}
.x-back-link:hover { color: var(--r33-ink); }

/* TableRowActions — the trailing "Open →" cell repeated across every
   DataTable row. Was authored inline as
   `<a class="x-back-link" style="font-size:11px">Open →</a>` on ~70 rows;
   promoted here so the row-action affordance has one definition. */
.x-row-open {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--r33-ink-muted); text-decoration: none;
  line-height: 1.4;
  transition: color var(--dur-fast) var(--ease-out);
}
.x-row-open:hover { color: var(--r33-ink); }

/* TableRowActions · destructive — the trailing "Revoke" cell on a Members
   table (members-list.js). Quiet by default, danger on hover; the affordance
   has one definition so every members surface revokes the same way. */
.x-row-revoke {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  color: var(--r33-ink-muted); background: none; border: 0; cursor: pointer;
  padding: 4px 8px; border-radius: var(--radius-sm); line-height: 1.4;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.x-row-revoke:hover { color: var(--r33-danger); background: var(--r33-paper-2); }

/* IdentityCell tag run — the member name paired with inline status tags
   (External · home-org/tenant · Guest). A flex group so spacing is explicit
   and survives DOM edits; lets the badges escape the name cell's ellipsis. */
.x-identity-name:has(.x-identity-tags) { overflow: visible; white-space: normal; }
.x-identity-tags { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.x-identity-tags .x-badge { font-weight: 500; }

/* OrgList — a wrapping run of org-membership badges inside a table cell
   (tenant Users · "Organisation memberships"). Explicit gap, no per-badge
   inline margins, so it survives DOM edits. */
.x-orglist { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ===== 31 FooterNote (atom) ========================================
   Hairline-topped caption used under lists, dialogs, disclosures. ==*/
.x-footer-note {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--r33-ink-muted);
  border-top: 1px solid var(--r33-rule);
  padding-top: 14px; margin: 0; line-height: 1.55;
}

/* ===== 32 BrandLockupInline (atom) =================================
   28x22 R-loop + wordmark. The small inline brand chip on auth/error
   chrome. Strokes use currentColor so it flows ink-on-paper or
   paper-on-ink. =================================================== */
.x-brand-inline {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--r33-ink); text-decoration: none;
}
.x-brand-inline svg { display: block; }
.x-brand-inline svg path,
.x-brand-inline svg line {
  fill: none; stroke: currentColor;
  stroke-linecap: round; stroke-linejoin: round; stroke-width: 34;
}
.x-brand-inline .word {
  font-family: var(--font-mono); font-weight: 500;
  font-size: 18px; letter-spacing: -0.04em;
  color: var(--r33-ink); line-height: 1; font-variant-numeric: tabular-nums;
}
.x-brand-inline .word .sep { color: var(--r33-ink-muted); }

/* ===== 33 TitleGroup (molecule) ====================================
   eyebrow + h1 + description triplet. Variant prop drives the eyebrow
   accent only — keep larger surfaces ink-on-paper. ================ */
.x-title-group { display: flex; flex-direction: column; }
.x-title-group-eyebrow {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--tg-accent, var(--r33-ink-muted));
  margin: 0 0 10px;
  display: inline-flex; align-items: center; gap: 6px;
}
.x-title-group-eyebrow-ic { width: 12px; height: 12px; flex-shrink: 0; display: block; }
.x-title-group-h1 {
  font-family: var(--font-display); font-size: 24px; font-weight: 600;
  line-height: 1.14; letter-spacing: -0.018em;
  color: var(--r33-ink); margin: 0 0 8px;
  min-width: 0; overflow-wrap: anywhere;
}
.x-title-group-desc { font-size: 14.5px; line-height: 1.5; color: var(--r33-ink-soft); margin: 0; overflow-wrap: anywhere; }
.x-title-group[data-variant="info"]    { --tg-accent: var(--r33-info); }
.x-title-group[data-variant="alert"]   { --tg-accent: var(--r33-signal); }
.x-title-group[data-variant="success"] { --tg-accent: var(--r33-success); }
.x-title-group[data-variant="warn"]    { --tg-accent: var(--r33-warning); }

/* ===== 34 DetailHeader (molecule) ==================================
   Title + StatusBadge + actions row above any entity detail page. = */
.x-detail-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; min-width: 0;
}
.x-detail-header-title {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-width: 0;
}
.x-detail-header-h1 {
  font-family: var(--font-display); font-size: 36px; font-weight: 600;
  letter-spacing: -0.035em; margin: 0; line-height: 1.05;
  min-width: 0; overflow-wrap: anywhere;
}
.x-detail-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* Lead description under a detail header / tabs — entity prose (project, key, …).
   Reusable across any TabbedDetailPage; sits between the tabs and the first card. */
.x-detail-desc { font-size: 14.5px; line-height: 1.55; color: var(--r33-ink-muted); max-width: 72ch; margin: -4px 0 0; overflow-wrap: anywhere; }

/* Inline pill list — a wrapping row of badges (allowed models, group memberships,
   filter summaries). Lives in the component layer so it carries its gap wherever
   components.css is loaded, including standalone component previews. */
.pg-pills { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pg-pills .x-badge { white-space: nowrap; }

/* ===== 35 CollapsibleSection (molecule) ============================
   Generic expand/collapse card with title + description + chevron. = */
.x-collapsible {
  border: 1px solid var(--r33-rule); border-radius: var(--radius-md);
  background: var(--r33-paper); overflow: hidden;
}
.x-collapsible-trigger {
  width: 100%; text-align: left;
  background: transparent; border: 0; cursor: pointer;
  padding: 18px 22px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  color: inherit; font: inherit;
}
.x-collapsible-trigger h3 {
  font-family: var(--font-display); font-size: 18px; font-weight: 600;
  letter-spacing: -0.018em; margin: 0 0 4px;
}
.x-collapsible-trigger p { font-size: 13px; color: var(--r33-ink-muted); margin: 0; overflow-wrap: anywhere; }
.x-collapsible-chev {
  transition: transform 200ms var(--ease-out);
  color: var(--r33-ink-muted); margin-top: 4px; flex-shrink: 0;
}
.x-collapsible[data-open="true"] .x-collapsible-chev { transform: rotate(180deg); }
.x-collapsible-body {
  display: none;
  padding: 0 22px 22px;
  border-top: 1px solid var(--r33-rule);
}
.x-collapsible[data-open="true"] .x-collapsible-body {
  display: block; padding-top: 18px;
}

/* ===== 36 FormField (molecule) =====================================
   Labelled control + hint + optional error. The molecule owns layout
   only — the input/select/textarea atom classes (.x-input, .x-select,
   .x-textarea) own their own chrome and chevrons. =================*/
.x-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.x-field-label { font-size: 13px; font-weight: 500; color: var(--r33-ink); }
.x-field-hint { font-size: 12px; color: var(--r33-ink-muted); margin: 2px 0 0; overflow-wrap: anywhere; }
.x-field-error { font-size: 12px; color: var(--r33-danger); margin: 2px 0 0; overflow-wrap: anywhere; }
.x-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 540px) { .x-field-row { grid-template-columns: 1fr; } }

/* ===== UriListEditor (molecule) ====================================
   A list of URI inputs (one per URI) with a leading link glyph, an inline
   remove affordance and an "Add" action — the richer, less error-prone
   alternative to a comma/newline textarea. Behaviour: scripts/uri-list.js.
   Composes the .x-input atom; owns only the row layout + add/remove chrome. */
.x-uri-list { display: flex; flex-direction: column; gap: 10px; }
.x-uri-list-rows { display: flex; flex-direction: column; gap: 8px; }
.x-uri-row { display: flex; align-items: center; gap: 8px; }
.x-uri-row .x-input { flex: 1; min-width: 0; }
.x-uri-row-icon {
  flex-shrink: 0; width: 18px; height: 18px;
  display: grid; place-items: center; color: var(--r33-ink-faint);
}
.x-uri-row-del {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--radius-1);
  display: grid; place-items: center; cursor: pointer;
  background: transparent; border: 1px solid var(--r33-rule); color: var(--r33-ink-muted);
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.x-uri-row-del:hover { background: color-mix(in oklab, var(--r33-danger) 10%, transparent); border-color: color-mix(in oklab, var(--r33-danger) 40%, var(--r33-rule)); color: var(--r33-danger); }
.x-uri-list-empty { font-size: 13px; color: var(--r33-ink-muted); margin: 0; }
.x-uri-list-add {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: var(--radius-1); cursor: pointer;
  background: transparent; border: 1px dashed var(--r33-rule-strong); color: var(--r33-ink-soft);
  font: inherit; font-size: 13px; font-weight: 500; white-space: nowrap;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.x-uri-list-add svg { color: var(--r33-ink-muted); }
.x-uri-list-add:hover { background: var(--r33-paper-2); border-color: var(--r33-ink); color: var(--r33-ink); }
.x-uri-list-add:hover svg { color: var(--r33-ink); }

/* Textarea matches .x-input chrome but with min-height + vertical resize.
   Only used inside FormField, kept colocated so the field stays self-
   contained. */
.x-textarea {
  width: 100%; padding: 11px 14px;
  font-family: var(--font-sans); font-size: 13.5px;
  background: var(--r33-paper);
  border: 1px solid var(--r33-rule-strong);
  border-radius: var(--radius-md);
  color: var(--r33-ink);
  min-height: 80px;
  resize: vertical;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.x-textarea::placeholder { color: var(--r33-ink-faint); }
.x-textarea:focus {
  outline: none; border-color: var(--r33-ink);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--r33-accent) 30%, transparent);
}

/* ===== 37 CheckboxGroup (molecule) =================================
   Bordered scrollable list of related checkboxes. ================= */
.x-checkgroup {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 14px;
  padding: 14px;
  border: 1px solid var(--r33-rule); border-radius: var(--radius-md);
  background: var(--r33-paper-soft);
  max-height: 200px; overflow-y: auto;
}
.x-checkgroup label {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; cursor: pointer; line-height: 1.4;
}
.x-checkgroup input[type="checkbox"] { accent-color: var(--r33-ink); }
.x-checkgroup--single { grid-template-columns: 1fr; }

/* ----- 37.1 ScopeGroup — OAuth scope picker rows (mounted by oauth-scopes.js).
   A taller checkgroup whose rows carry a code name + read/write tag + a
   description line. Shared so Create-app and App-detail Settings render the
   exact same picker. = */
.x-scopegroup { max-height: 320px; gap: 2px; }
.x-scopegroup label { align-items: flex-start; gap: 10px; padding: 7px 6px; border-radius: var(--radius-sm); }
.x-scopegroup label:hover { background: var(--r33-paper-2); }
.x-scopegroup input[type="checkbox"] { margin-top: 2px; }
.x-scope-row { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.x-scope-row-head { display: inline-flex; align-items: center; gap: 8px; }
.x-scope-row-head code { font-family: var(--font-mono); font-size: 12.5px; color: var(--r33-ink); }
.x-scope-row-desc { font-size: 12px; color: var(--r33-ink-muted); line-height: 1.45; }

/* ===== 38 AsidePanel (molecule) ====================================
   Right-column context card on forms and dense detail views. ====== */
.x-aside {
  background: var(--r33-paper-soft);
  border: 1px solid var(--r33-rule);
  border-radius: var(--radius-md);
  padding: 18px;
  align-self: stretch;
  width: 100%;
  display: flex; flex-direction: column; gap: 12px;
}
.x-aside h4 {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--r33-ink-muted); margin: 0;
}
.x-aside-body { font-size: 13.5px; color: var(--r33-ink); line-height: 1.5; overflow-wrap: anywhere; }
.x-aside-body p { margin: 0; }
/* SpendMeter composed inside an aside fills the column (the molecule self-caps at
   260px for inline use) and sits just under its label. Contextual, like .x-metergrid. */
.x-aside .x-meter { max-width: none; margin-top: 9px; }

/* ===== 39 OverviewHeader (molecule) ================================
   Dashboard title + scope/time-range selectors. =================== */
.x-overview-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.x-overview-header-meta { max-width: 600px; }
.x-overview-header-meta .eyebrow {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--r33-ink-muted);
}
.x-overview-header-meta h1 {
  font-family: var(--font-display); font-size: 38px; font-weight: 600;
  letter-spacing: -0.035em; line-height: 1.05; margin: 6px 0 0;
  min-width: 0; overflow-wrap: anywhere;
}
.x-overview-header-meta p {
  margin: 8px 0 0; color: var(--r33-ink-muted);
  font-size: 14px; line-height: 1.55; overflow-wrap: anywhere;
}
.x-overview-header-controls {
  display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
}
.x-overview-header-control {
  display: flex; flex-direction: column; gap: 6px; min-width: 160px;
}

/* ===== 40 KpiStrip (molecule) ======================================
   4-up equal-height stat grid. =================================== */
.x-kpi-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  align-items: stretch;
}
.x-kpi-strip > * { display: flex; }
.x-kpi-strip > * > * { flex: 1; width: 100%; }
@media (max-width: 980px) { .x-kpi-strip { grid-template-columns: repeat(2, 1fr); } }

/* ===== 41 ChartRow (molecule) ======================================
   2-up chart layout. Two variants — wide and even. =============== */
.x-chart-row { display: grid; gap: 20px; align-items: stretch; }
.x-chart-row--wide { grid-template-columns: 1.8fr 1fr; }
.x-chart-row--even { grid-template-columns: 1fr 1fr; }
.x-chart-row > * { display: flex; min-width: 0; }
.x-chart-row > * > * { flex: 1; width: 100%; }
/* When sibling cards in a row differ in height (e.g. a tall legend next to a
   short one), let the chart body absorb the slack: the chart fills the
   available space ("fit as much as possible"), and content that can't stretch
   centers vertically instead of pinning to the top. */
.x-chart-row .chart-body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
.x-chart-row .chart-body > * { flex: 1 1 auto; min-height: 0; }
/* Below 1100px a two-up row hands each donut <420px (ring + legend cannot sit side by side); collapse to one column. */
@media (max-width: 1100px) {
  .x-chart-row--wide, .x-chart-row--even { grid-template-columns: 1fr; }
}

/* ===== 42 (removed) Endorsement footer text utility =================
   The mono-uppercase "by De Cronos Groep · Veldkant 33A · 2550 Kontich"
   line used inside any CenteredCard footer that's an endorsement
   instead of an action row. Typography only — the footer slot owns
   layout. ======================================================= */
.x-endorsement {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--r33-ink-muted); text-align: center;
  width: 100%;
}

/* ===== 43 FormCard (organism) ======================================
   Head + body (single or two-col) + sticky footer. =============== */
.x-form-card {
  border: 1px solid var(--r33-rule);
  border-radius: var(--radius-md);
  background: var(--r33-paper);
  overflow: hidden;
}
/* overflow:hidden above clips the card to its rounded corners — but it also clips
   an open MultiCheckboxFilter popover (people pickers, etc.), which then appears
   capped instead of floating over the rest of the form. Lift the clip ONLY while a
   popover is open, so the corner containment still holds the rest of the time. Same
   pattern as the FiltersCard open-cell stacking fix. */
.x-form-card:has(.x-mcf[data-open="true"]) { overflow: visible; }
.x-form-card-head { padding: 18px 22px; border-bottom: 1px solid var(--r33-rule); }
.x-form-card-head h3 {
  font-family: var(--font-display); font-size: 18px; font-weight: 600;
  letter-spacing: -0.018em; margin: 0 0 4px;
}
.x-form-card-head p { font-size: 13px; color: var(--r33-ink-muted); margin: 0; overflow-wrap: anywhere; }
.x-form-card-body { padding: 22px; display: flex; flex-direction: column; gap: 18px; }
.x-form-card-body--two-col {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px;
}
.x-form-card-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
@media (max-width: 720px) {
  .x-form-card-body--two-col { grid-template-columns: 1fr; }
}
.x-form-card-footer {
  padding: 16px 22px;
  border-top: 1px solid var(--r33-rule);
  display: flex; justify-content: flex-end; gap: 10px;
  background: var(--r33-paper-soft);
}
/* Form sub-section header — a labelled divider that groups related fields inside
   one FormCard (e.g. an optional "OIDC client" / "SCIM target" block on the
   create-tenant form). Hairline-topped so the grouping reads at a glance. */
.x-form-card-subhead {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  border-top: 1px solid var(--r33-rule);
  padding-top: 16px; margin-top: 2px;
}
.x-form-card-subhead .x-field-hint { margin: 0; }

/* ===== 44 CenteredCardPage (template) ==============================
   Full-bleed paper-soft shell with a faint engineering-grid texture,
   centers any organism card both axes. Hosts AuthCard, ErrorCard, and
   any future centered moment (empty workspace, expired invite…). = */
.x-centered-page {
  position: relative; width: 100%;
  min-height: 720px;
  background: var(--r33-paper-soft);
  display: grid; place-items: center;
  padding: 56px 24px;
  box-sizing: border-box;
  overflow: hidden;
}
.x-centered-page::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(17,17,16,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17,17,16,0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: -1px -1px;
  pointer-events: none;
}
.x-centered-page > * { position: relative; z-index: 1; }

/* ===== 45 ListPage shell (template) ================================
   Thin page frame: PageHeader + ListToolbar + content slot + footer.
   Pages on this template: keys, users, projects, tenants, oauth-apps,
   audit-events, models. ========================================== */
.x-list-page { display: flex; flex-direction: column; gap: 22px; }

/* ===== 46 DetailPage shell (template) ==============================
   BackLink + DetailHeader + primary + sections + BackLink (footer).
   Pages on this template: keys.$id, projects.$id, users.$id, ... === */
.x-detail-page { display: flex; flex-direction: column; gap: 22px; }

/* ===== 47 FormPage shell (template) ================================
   PageHeader + FormCard (single or two-col body). =============== */
.x-form-page { display: flex; flex-direction: column; gap: 22px; }

/* ===== 48 OverviewPage shell (template) ============================
   OverviewHeader + KpiStrip + 1..n ChartRows. Pages: dashboard root,
   per-project / per-user / per-tenant overviews. ================= */
.x-overview-page { display: flex; flex-direction: column; gap: 20px; }


/* ===== 49 FiltersCard time-range chrome (organism-internal) =======
   NOT a standalone molecule — the canonical time-range picker is
   `TimeRangeSelector` (select + reveal). These classes power the
   tabbed Preset/Custom layout used INSIDE FiltersCard only.
   Preset picker + optional custom from/to. The mode toggle swaps the
   shown control surface. Visual: a small bordered group with two
   stacked rows when mode='custom'. ============================== */
.x-timerange {
  display: flex; flex-direction: column; gap: 10px;
}
/* ModeBar — the binary/segmented MODE TOGGLE atom (e.g. Preset/Custom, All/Filtered).
   `.x-timerange-modebar` is the original alias; `.x-modebar` is the generic name.
   Any two-or-three-way mode switch uses THIS atom so toggles never diverge in style. */
.x-timerange-modebar, .x-modebar {
  display: inline-flex;
  border: 1px solid var(--r33-rule-strong);
  border-radius: 999px;
  padding: 3px;
  background: var(--r33-paper-soft);
  align-self: flex-start;
}
.x-timerange-modebar button, .x-modebar button {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 5px 12px;
  border: 0;
  background: transparent;
  color: var(--r33-ink-muted);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.x-timerange-modebar button[data-active="true"], .x-modebar button[data-active="true"] {
  background: var(--r33-ink);
  color: var(--r33-paper);
}
.x-timerange-presets {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.x-timerange-presets button {
  font-family: var(--font-mono);
  font-size: 11.5px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--r33-rule-strong);
  background: var(--r33-paper);
  color: var(--r33-ink);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.x-timerange-presets button[data-active="true"] {
  background: var(--r33-ink);
  border-color: var(--r33-ink);
  color: var(--r33-paper);
}
.x-timerange-presets button:hover:not([data-active="true"]) {
  background: var(--r33-paper-2);
}
.x-timerange-custom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 540px) {
  .x-timerange-custom { grid-template-columns: 1fr; }
}
/* TimeRange mode show/hide — the Preset/Custom modebar swaps which surface shows.
   Promoted here (was duplicated in every FiltersCard host page's <style>) so the
   organism, molecule and pages share ONE source. */
.x-timerange[data-mode="preset"] .x-timerange-custom  { display: none; }
.x-timerange[data-mode="custom"] .x-timerange-presets { display: none; }
/* FiltersCard grid cell — a stacked field with its own stacking context so a native
   <select> popup can't leak into a sibling cell. Also promoted from page <style> blocks. */
.x-filterscard-body .fieldset {
  display: flex; flex-direction: column; gap: 10px;
  position: relative; z-index: 0;
}

/* ===== 50 MultiCheckboxFilter (molecule) ===========================
   Small trigger button with selection summary; opens a popover with
   search + scrollable checkbox list + select-all/clear. ========= */
.x-mcf { position: relative; display: inline-flex; }
.x-mcf-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: 13px;
  padding: 8px 12px;
  border: 1px solid var(--r33-rule-strong);
  border-radius: var(--radius-md);
  background: var(--r33-paper);
  color: var(--r33-ink);
  cursor: pointer;
  min-width: 180px;
  justify-content: space-between;
}
.x-mcf-trigger:hover { background: var(--r33-paper-2); }
.x-mcf-trigger-label { font-weight: 500; }
.x-mcf-trigger-chip {
  font-family: var(--font-mono); font-size: 10.5px;
  background: var(--r33-paper-2);
  border-radius: 999px;
  padding: 1px 7px;
  color: var(--r33-ink);
  border: 1px solid var(--r33-rule);
}
/* Selection-state tones — the chip ALWAYS shows state (All / a count / None) so a
   facet is never ambiguous. "All" reads as the neutral default; "None" as a caution. */
.x-mcf-trigger-chip[data-state="all"]  { color: var(--r33-ink-muted); }
.x-mcf-trigger-chip[data-state="none"] { color: var(--r33-warning); background: color-mix(in oklab, var(--r33-warning) 14%, transparent); border-color: color-mix(in oklab, var(--r33-warning) 30%, transparent); }
.x-mcf-trigger-chev { color: var(--r33-ink-muted); }
.x-mcf-popover {
  display: none;
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 260px;
  z-index: 30;
  background: var(--r33-paper);
  border: 1px solid var(--r33-rule-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 10px;
}
.x-mcf[data-open="true"] .x-mcf-popover { display: block; }
.x-mcf[data-open="true"] .x-mcf-trigger { border-color: var(--r33-ink); }
/* Stacking fix — each FiltersCard cell is its own stacking context (z-index:0) so a
   native <select> popup can't leak into a sibling cell. That also TRAPS the custom MCF
   popover, which then paints under the next cell (e.g. the Time range fieldset below).
   When a cell holds an OPEN popover, lift the whole cell above its siblings. Scoped to
   the open state, so the native-select containment still holds the rest of the time. */
.x-filterscard-body .fieldset:has(.x-mcf[data-open="true"]) { z-index: 40; }
.x-mcf-popover-search {
  width: 100%;
  font-family: var(--font-sans); font-size: 13px;
  padding: 7px 10px;
  border: 1px solid var(--r33-rule);
  border-radius: var(--radius-md);
  background: var(--r33-paper-soft);
  box-sizing: border-box;
  margin-bottom: 8px;
}
.x-mcf-popover-list {
  display: flex; flex-direction: column;
  max-height: 220px;
  overflow-y: auto;
  padding: 2px;
}
.x-mcf-popover-list label {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 6px;
  font-size: 13px; line-height: 1.3;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.x-mcf-popover-list label:hover { background: var(--r33-paper-2); }
.x-mcf-popover-list label .sub {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--r33-ink-muted);
}
.x-mcf-popover-list input[type="checkbox"] { accent-color: var(--r33-ink); }
/* Search hide + empty state — the live search toggles `[data-hidden]` on each
   <label>; if the MCF ships an `.x-mcf-popover-empty` row, the runtime flips
   `[data-empty]` on the MCF when nothing matches. Promoted from the molecule
   preview's local <style> (was trapped there; FiltersCard MCFs hid rows with an
   inline style instead) so EVERY MCF — preview and page — hides identically. */
.x-mcf-popover-list label[data-hidden="true"] { display: none; }
.x-mcf-popover-empty {
  display: none; padding: 16px 6px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--r33-ink-muted); text-align: center;
}
.x-mcf[data-empty="true"] .x-mcf-popover-empty { display: block; }
/* Optional section header inside a multi-checkbox popover — lets a filter split
   its options into labelled groups (e.g. "Team projects" vs "Personal"). Reusable
   across any MCF; the search/select-all/clear handlers only touch <label>s, so
   these dividers are inert. */
.x-mcf-popover-group {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--r33-ink-muted);
  padding: 8px 6px 4px;
}
.x-mcf-popover-group:first-child { padding-top: 4px; }
.x-mcf-popover-group + .x-mcf-popover-group { margin-top: 0; }
.x-mcf-popover-list .x-mcf-popover-group ~ .x-mcf-popover-group { border-top: 1px solid var(--r33-rule); margin-top: 4px; }
.x-mcf-popover-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--r33-rule);
}
.x-mcf-popover-foot button {
  font-family: var(--font-mono); font-size: 11px;
  background: transparent; border: 0;
  color: var(--r33-ink-muted); cursor: pointer;
  padding: 2px 0;
}
.x-mcf-popover-foot button:hover { color: var(--r33-ink); }

/* ===== 51 DetailTabsBar (molecule) =================================
   Nav-tabs for detail pages (route-backed). Underlined active tab. = */
.x-detail-tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--r33-rule);
  flex-wrap: wrap;
  align-items: stretch;
}
.x-detail-tabs a, .x-detail-tabs button {
  position: relative;
  font-family: var(--font-sans); font-size: 13.5px; font-weight: 500;
  padding: 12px 14px;
  color: var(--r33-ink-muted);
  text-decoration: none;
  background: transparent;
  border: 0; cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: color var(--dur-fast) var(--ease-out);
}
.x-detail-tabs a:hover, .x-detail-tabs button:hover { color: var(--r33-ink); }
.x-detail-tabs a[data-active="true"],
.x-detail-tabs button[data-active="true"] {
  color: var(--r33-ink);
  border-bottom-color: var(--r33-ink);
}
.x-detail-tabs .count {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  color: var(--r33-ink-muted);
  background: var(--r33-paper-2);
  border-radius: 999px;
  padding: 1px 7px;
}

/* ===== 52 PrevNextNav (molecule) ===================================
   Segmented older/newer chip for record-detail navigation. ====== */
.x-prevnext {
  display: inline-flex;
  border: 1px solid var(--r33-rule-strong);
  border-radius: 999px;
  background: var(--r33-paper);
  overflow: hidden;
}
.x-prevnext a, .x-prevnext button, .x-prevnext span {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
  padding: 6px 12px;
  color: var(--r33-ink);
  background: transparent;
  text-decoration: none;
  border: 0; cursor: pointer;
}
.x-prevnext > * + * { border-left: 1px solid var(--r33-rule); }
.x-prevnext a:hover, .x-prevnext button:hover { background: var(--r33-paper-2); }
.x-prevnext .is-disabled,
.x-prevnext [aria-disabled="true"] {
  color: var(--r33-ink-faint);
  cursor: not-allowed;
  pointer-events: none;
}

/* ===== 53 LoadMoreFooter (molecule) ================================
   Sticky-bottom load-more affordance for infinite-scroll tables. =*/
.x-loadmore {
  display: flex; flex-direction: column;
  align-items: center; gap: 8px;
  padding: 18px 0 4px;
}
.x-loadmore-btn {
  font-family: var(--font-mono); font-size: 12px;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--r33-paper);
  border: 1px solid var(--r33-rule-strong);
  color: var(--r33-ink);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background var(--dur-fast) var(--ease-out);
}
.x-loadmore-btn:hover { background: var(--r33-paper-2); }
.x-loadmore-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.x-loadmore-status {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--r33-ink-muted);
}
.x-loadmore-status strong { color: var(--r33-ink); font-weight: 500; }
.x-loadmore-spin {
  width: 12px; height: 12px;
  border: 1.5px solid var(--r33-rule-strong);
  border-top-color: var(--r33-ink);
  border-radius: 50%;
  animation: x-loadmore-spin 700ms linear infinite;
}
@keyframes x-loadmore-spin { to { transform: rotate(360deg); } }

/* ===== 54 FiltersCard (organism) ===================================
   Bordered card with header (title + summary + chevron) and content
   grid of filter molecules. Always collapsible — click the head to
   toggle. Open by default; the host page picks the initial state via
   `data-open`. ==================================================== */
.x-filterscard {
  border: 1px solid var(--r33-rule);
  border-radius: var(--radius-md);
  background: var(--r33-paper);
  overflow: visible;
}
.x-filterscard-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  cursor: pointer; user-select: none;
}
.x-filterscard-head h3 {
  font-family: var(--font-display); font-size: 16px; font-weight: 600;
  letter-spacing: -0.018em; margin: 0 0 4px;
}
.x-filterscard-head .desc {
  font-size: 13px; color: var(--r33-ink-muted); margin: 0;
}
.x-filterscard-head .x-filterscard-chev {
  color: var(--r33-ink-muted);
  transition: transform 200ms var(--ease-out);
  flex-shrink: 0;
}
.x-filterscard[data-open="true"] .x-filterscard-chev { transform: rotate(180deg); }
.x-filterscard-summary {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px;
}
.x-filterscard-body {
  padding: 0 22px 18px;
  border-top: 1px solid var(--r33-rule);
  padding-top: 18px;
}
.x-filterscard[data-open="false"] .x-filterscard-body { display: none; }
.x-filterscard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
@media (max-width: 720px) {
  .x-filterscard-grid { grid-template-columns: 1fr; }
}
/* Optional scope mode (opt-in via `data-scope` on the card): a Pill Tabs toggle
   switches between "all" and "filtered". In "all" mode the facet group is hidden
   — the header summary chip carries the state — so there are no stray, ambiguous
   filter fields on screen. Wrap the narrowing facets in `[data-scope-facets]`. */
.x-filterscard[data-filter-scope="all"] [data-scope-facets] { display: none !important; }
.x-filterscard-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--r33-rule);
}
.x-filterscard-foot .helper {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--r33-ink-muted); margin: 0;
}

/* ===== 55 (removed) Was InfoCard organism ==========================
   Three centered-card organisms (AuthCard, ErrorCard, InfoCard) were
   collapsed into example compositions of the CenteredCard organism.
   See section 59 for the unified component. ===================== */

/* ===== 56 MetricsPage shell (template) =============================
   Pages: metrics root, per-project metrics, per-user metrics. ==== */
.x-metrics-page { display: flex; flex-direction: column; gap: 22px; }
.x-metrics-page__tabs { display: flex; flex-direction: column; }

/* ===== 57 DataExplorerPage shell (template) ========================
   Pages: logs, audit-events, request-tracing browsers. ========== */
.x-explorer-page { display: flex; flex-direction: column; gap: 22px; }

/* ===== 58 TabbedDetailPage shell (template) ========================
   Pages: projects.$id, users.$id, guardrails.$id with nested routes. */
.x-tabbed-detail { display: flex; flex-direction: column; gap: 22px; }


/* ===== 59 CenteredCard (organism) ==================================
   The centered, page-level card. Owns the shape — max-width 460px,
   paper background, neutral border, xl radius, shadow-md, 36×32
   padding, 22px gap between slots, footer with a hairline divider
   above — and exposes four named slots: header, title, body, footer.

   This is the entire centered-card surface. Three named patterns
   compose into it — sign-in / centered message, error, empty-state —
   but they're not separate organisms. Tonal signal (info / alert /
   success / warn) lives entirely on the inner TitleGroup molecule via
   `data-variant`. The endorsement footer text style is .x-endorsement
   (section 42). ================================================ */
.x-centered-card {
  position: relative;
  width: 100%; max-width: 460px;
  background: var(--r33-paper);
  border: 1px solid var(--r33-rule-strong);
  border-radius: var(--radius-xl);
  padding: 36px 32px;
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column;
  gap: 22px;
  text-align: left;
}

/* Slot defaults — structural only. Each slot is a vertical stack so
   the organism can drop any children (one or many) without re-wrap. */
.x-centered-card-header {
  display: flex; flex-direction: column;
  gap: 12px; align-items: flex-start;
}
.x-centered-card-title { display: flex; flex-direction: column; }
.x-centered-card-body {
  display: flex; flex-direction: column;
  gap: 14px;
  font-size: 14px; line-height: 1.55; color: var(--r33-ink-soft);
}
.x-centered-card-footer {
  display: flex; gap: 10px; align-items: center;
  padding-top: 18px;
  border-top: 1px solid var(--r33-rule);
}


/* =====================================================================
   60 CANONICAL CONSOLIDATED COMPONENTS
   Single source of truth for components that were previously duplicated
   (verbatim) across preview/pages/_assets/shell.css, ui_kits/dashboard/
   styles.css, and individual preview files. Those copies were removed and
   now resolve here. components.css is loaded by every page + preview that
   uses these classes.
   ===================================================================== */

/* ----- 60.1 Base card surface ----------------------------------------
   The canonical bordered paper panel. Specialised cards (FormCard,
   FiltersCard, CenteredCard, MetadataGrid, StatCard, AsidePanel, Chart)
   carry their own radius/padding specifics on top of this shape. New
   surfaces should start from .x-card rather than re-declaring it. */
.x-card { background: var(--r33-paper); border: 1px solid var(--r33-rule); border-radius: var(--radius-md); }
.x-card--soft { background: var(--r33-paper-soft); }

/* ----- 60.2 StatCard (molecule) --------------------------------------
   Single stat tile. Slots into .x-kpi-strip. (Was duplicated in
   shell.css + kpi-strip.html.) */
.stat { background: var(--card, var(--r33-paper)); border: 1px solid var(--border, var(--r33-rule)); border-radius: var(--radius); padding: 18px 20px; display: flex; flex-direction: column; height: 100%; min-width: 0; container-type: inline-size; }
.stat--danger { background: color-mix(in oklab, var(--r33-danger) 10%, transparent); border-color: color-mix(in oklab, var(--r33-danger) 35%, transparent); }
.stat--danger .stat-l, .stat--danger .stat-v, .stat--danger .stat-c { color: var(--r33-danger); }
.stat-l { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--r33-ink-muted); font-weight: 500; }
.stat-v { font-family: var(--font-display); font-size: min(36px, 15.5cqi); font-weight: 500; letter-spacing: -0.035em; color: var(--r33-ink); line-height: 1; font-variant-numeric: tabular-nums; margin-top: 14px; white-space: nowrap; min-width: 0; }
/* A stat value is one token: it never wraps or clips (prd 2026-09-19: a 5-up strip broke
   "-€4,429.91" after the minus sign). The size follows the tile's inline size (cqi, from
   the .stat container) with a per-length cap: the display face is ~0.6em per glyph, so
   N glyphs fit when font-size ≤ inner-width / (0.6·N). Consumers mark long values with
   data-len (set by KpiStrip from the string length); unmarked values get the 10-glyph cap. */
.stat-v:not([data-len]), .stat-v[data-len="10"] { font-size: min(36px, 15.5cqi); }
.stat-v[data-len="0"], .stat-v[data-len="1"], .stat-v[data-len="2"], .stat-v[data-len="3"], .stat-v[data-len="4"], .stat-v[data-len="5"], .stat-v[data-len="6"] { font-size: min(36px, 26cqi); }
.stat-v[data-len="7"], .stat-v[data-len="8"] { font-size: min(36px, 19.5cqi); }
.stat-v[data-len="9"] { font-size: min(36px, 17.3cqi); }
.stat-v[data-len="11"], .stat-v[data-len="12"] { font-size: min(36px, 12.9cqi); }
.stat-v[data-len="13"], .stat-v[data-len="14"] { font-size: min(36px, 11cqi); }
.stat-v[data-len="15"], .stat-v[data-len="16"], .stat-v[data-len="17"], .stat-v[data-len="18"], .stat-v[data-len="19"], .stat-v[data-len="20"] { font-size: min(36px, 9cqi); }
.stat-row { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; }
.stat-row .stat-v { margin-top: 0; }
.stat-d { display: flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: var(--radius-pill); }
.stat-d.up { background: color-mix(in oklab, var(--r33-success) 15%, transparent); color: var(--r33-success); }
.stat-d.down { background: color-mix(in oklab, var(--r33-signal) 14%, transparent); color: var(--r33-signal); }
.stat-d.flat { background: var(--r33-paper-2); color: var(--r33-ink-muted); }
.stat-c { margin-top: auto; padding-top: 12px; font-size: 12px; color: var(--r33-ink-muted); }
.stat-budget .x-meter { margin-top: auto; max-width: none; }

/* ----- 60.3 MetadataGrid (molecule) ----------------------------------
   Two-column label/value grid for entity detail. (Was duplicated in
   shell.css + metadata-grid.html.) */
.x-meta-card { background:var(--r33-paper); border:1px solid var(--r33-rule); border-radius:var(--radius-md); padding:22px 24px; }
.x-meta-card h3 { font-family:var(--font-display); font-size:18px; font-weight:600; letter-spacing:-0.025em; margin:0 0 18px; }
.x-meta-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:18px 32px; }
.x-meta-item { display:flex; flex-direction:column; gap:4px; min-width:0; }
.x-meta-span-2 { grid-column: span 2; }
.x-meta-label { font-family:var(--font-mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--r33-ink-muted); font-weight:500; }
.x-meta-value { font-family:var(--font-mono); font-size:13px; color:var(--r33-ink); min-width:0; overflow-wrap:anywhere; }
.x-meta-value-code { font-family:var(--font-mono); font-size:13px; color:var(--r33-ink); background:var(--r33-paper-2); padding:2px 8px; border-radius:4px; align-self:flex-start; }

/* SecretField — masked secret value + reveal (eye) + copy, in one inline row.
   Behaviour (mask/reveal toggle) is wired by r33-kit.js [data-reveal]. */
.x-secret { display:inline-flex; align-items:center; gap:10px; }
.x-secret .x-secret-val { align-self:auto; }

/* ----- 60.4 Sidebar user-menu (organism-internal) --------------------
   The bottom user-row trigger + dropdown used by the Sidebar organism and
   the AppShell template. (Was duplicated in shell.css + sidebar.html +
   app-shell.html.) The ScopeSwitcher owns its own dropdown separately.
   NOTE: the trigger is now the whole AccountButton row (.x-sidebar-user,
   defined in the Sidebar section above) — there is no separate kebab button. */
.sb-menu { position: absolute; z-index: 20; box-shadow: var(--shadow-md); min-width: 224px; display: none; }
.sb-menu[data-open="true"] { display: block; }
.sb-menu-user { bottom: 64px; left: 12px; }
.sb-menu-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-1); font-size: 13px; cursor: pointer; user-select: none; background: transparent; border: 0; width: 100%; text-align: left; color: inherit; }
.sb-menu-row:hover { background: var(--r33-paper-2); }
.sb-menu-row--static { cursor: default; }
.sb-menu-row--static:hover { background: transparent; }
.sb-menu-row .meta { display: flex; flex-direction: column; line-height: 1.2; flex: 1; min-width: 0; }
.sb-menu-row .meta .name { font-size: 13px; font-weight: 500; }
.sb-menu-row .meta .role { font-size: 11px; color: var(--r33-ink-muted); font-family: var(--font-mono); }
.sb-menu-row[data-danger="true"] { color: var(--r33-danger); }
.sb-menu-row[data-danger="true"]:hover { background: color-mix(in oklab, var(--r33-danger) 10%, transparent); }
.sb-menu-row .leading { width: 16px; display: flex; color: var(--r33-ink-muted); }

/* ----- 60.5 Chart chrome (molecule) ----------------------------------
   Canonical chart card + legend chrome shared by the Chart molecule
   previews, the dashboard kit, and assembled pages. (Was duplicated in
   the old ui_kits/dashboard/styles.css + shell.css.) Charts themselves
   render via preview/molecules/charts.jsx. Tokens use the shadcn aliases,
   which are defined in colors_and_type.css and resolve to the r33 palette. */
.chart-card { background: var(--card); color: var(--card-foreground); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; }
.chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.chart-title { font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -0.025em; margin: 0; color: var(--foreground); line-height: 1.2; }
.chart-desc { font-size: 12px; color: var(--muted-foreground); margin: 4px 0 0; }
.chart-body { width: 100%; position: relative; }
.chart-svg { display: block; overflow: visible; width: 100%; height: auto; }
.chart-foot { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; border-top: 1px solid var(--border); margin-top: 4px; }
/* ChartRadial card chrome — CANONICAL (was trapped in the chart-radial molecule
   preview). The gauge sits in the body; the stat-pair legend renders in the
   foot via charts-mount.jsx's RadialStatLegend. Hover lifts the whole card and
   highlights the hovered stat (state lives in ChartCard). */
.chart-card--radial { box-shadow: 0 1px 2px rgba(17,17,16,0.05), 0 10px 26px -18px rgba(17,17,16,0.22); transition: box-shadow 180ms ease, border-color 180ms ease; }
.chart-card--radial.is-hover { box-shadow: 0 2px 4px rgba(17,17,16,0.06), 0 18px 40px -20px rgba(17,17,16,0.30); border-color: color-mix(in oklab, var(--r33-ink) 40%, var(--border)); }
.radial-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: calc(var(--radius) - 4px); overflow: hidden; }
.radial-stat { display: flex; flex-direction: column; gap: 2px; background: var(--card); padding: 8px 10px; min-width: 0; transition: background 140ms ease; }
.radial-stat.is-hover { background: var(--cronos-cream); }
.radial-stat-label { font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-foreground); font-weight: 600; line-height: 1.25; min-height: calc(8.5px * 1.25 * 2); }
.radial-stat-value { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--foreground); font-variant-numeric: tabular-nums; letter-spacing: -0.005em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.radial-stat-value.is-success { color: var(--cronos-success); }
.radial-stat-value.is-signal { color: var(--chart-3); }
.radial-stat-value .unit { font-size: 10px; font-weight: 500; color: var(--muted-foreground); margin-left: 2px; }
.chart-legend-row { display: flex; flex-wrap: wrap; gap: 16px 24px; padding-top: 12px; }
.chart-legend-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted-foreground); }
.chart-swatch { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.chart-legend-label { color: var(--foreground); font-weight: 500; }
.chart-legend-val { color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.chart-legend-rich { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: calc(var(--radius) - 4px); overflow: hidden; margin-top: 4px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.chart-legend-rich-item { display: flex; align-items: stretch; gap: 10px; background: var(--card); padding: 10px 12px; }
.chart-legend-rich-bar { width: 3px; border-radius: 2px; flex-shrink: 0; align-self: stretch; transition: width 140ms ease; }
.chart-legend-rich-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.chart-legend-rich-label { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-foreground); font-weight: 600; }
.chart-legend-rich-value { font-family: var(--font-display); font-size: 20px; font-weight: 500; color: var(--foreground); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.chart-legend-rich-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.chart-legend-rich-delta { font-weight: 600; padding: 1px 6px; border-radius: 3px; font-size: 10px; letter-spacing: 0.04em; }
.chart-legend-rich-delta.up { color: var(--r33-success); background: color-mix(in oklab, var(--r33-success) 12%, transparent); }
.chart-legend-rich-delta.down { color: var(--r33-signal); background: color-mix(in oklab, var(--r33-signal) 12%, transparent); }
.chart-legend-rich-item.is-interactive { cursor: pointer; transition: background 140ms ease, opacity 140ms ease; }
.chart-legend-rich-item.is-hover { background: var(--cronos-cream); }
.chart-legend-rich-item.is-hover .chart-legend-rich-bar { width: 5px; }
.chart-legend-rich-item.is-dim { opacity: 0.42; }
/* Filler cell padding the ragged last row so the grid's border colour never
   shows through as a grey void (ChartLegendRich adds these automatically). */
.chart-legend-rich-item--filler { background: var(--card); cursor: default; pointer-events: none; }
.chart-mini { width: 100%; height: 48px; display: block; margin-top: 10px; }
/* Donut legend teleprompter — a clipped label marquees on hover/focus (D8); reduced-motion safe. */
.x-legend-marquee { display: inline-block; white-space: nowrap; will-change: transform; }
.x-legend-marquee--active { animation: x-legend-marquee var(--marquee-duration, 1.2s) ease-in-out 2 alternate; }
@keyframes x-legend-marquee { from { transform: translateX(0); } to { transform: translateX(var(--marquee-distance, 0px)); } }
@media (prefers-reduced-motion: reduce) { .x-legend-marquee--active { animation: none; } }

/* =========================================================================
   61 · Distilled & promoted components (2026-05 page-scan refactor)
   Recurring page markup that was previously bespoke inline styling, or a
   page-only `.pg-*` helper in shell.css, lifted into canonical components
   so every screen renders them identically.
   ========================================================================= */

/* ----- 61.1 CodeBlock (atom) -----------------------------------------
   Ink code surface with cream text. Was shell.css `.pg-codeblock`.
   Syntax spans: .c-key (accent) · .c-str (green) · .c-com (muted). */
.x-code {
  background: var(--r33-ink); color: var(--r33-paper);
  border-radius: var(--radius-md); padding: 18px 20px;
  font-family: var(--font-mono); font-size: 13px; line-height: 1.7;
  overflow-x: auto; white-space: pre; margin: 0;
}
.x-code .c-key { color: var(--r33-accent); }
.x-code .c-str { color: #9BD4A8; }
.x-code .c-com { color: #8A8780; }
/* Opt-in soft wrap (CodeBlock `wrap`): long single-line payloads keep the ink
   surface but wrap instead of pushing grid tracks — and the page — out of
   bounds (log-detail error/response bodies). */
.x-code--wrap { white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: hidden; }

/* ----- 61.2 IdentityCell (molecule) ----------------------------------
   Avatar + name + mono sub-line. The recurring first cell in member /
   tenant / model tables. Was shell.css `.pg-identity`. Compose with
   OrgAvatar (.x-avatar). */
.x-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.x-identity-meta { min-width: 0; line-height: 1.25; }
.x-identity-name { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x-identity-sub { font-size: 12px; color: var(--r33-ink-muted); font-family: var(--font-mono); }

/* ----- 61.3 DefinitionList (molecule) --------------------------------
   Stacked label/value pairs for aside context panels. Was a run of
   inline-styled <p><span class="x-meta-label">…</span><br>…</p>. Use
   semantic <dl> with .x-deflist-row > <dt>/<dd>. */
.x-deflist { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.x-deflist:not(:last-child) { margin-bottom: 14px; }
.x-deflist-row { display: flex; flex-direction: column; gap: 3px; margin: 0; min-width: 0; }
.x-deflist dt, .x-deflist .x-meta-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--r33-ink-muted); font-weight: 500;
}
.x-deflist dd { margin: 0; font-size: 13.5px; color: var(--r33-ink); line-height: 1.45; overflow-wrap: anywhere; }
.x-deflist dd code { font-family: var(--font-mono); font-size: 12.5px; background: var(--r33-paper-2); padding: 2px 8px; border-radius: 4px; }
.x-deflist-strong { font-family: var(--font-display); font-size: 24px; letter-spacing: -0.03em; }

/* ----- 61.4 ToggleRow (molecule) -------------------------------------
   Label + Switch in a space-between row. Was inline-styled <label>.
   Compose with the Switch atom (.x-switch). */
.x-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.x-toggle-row + .x-toggle-row { margin-top: 10px; }
.x-toggle-row > span:first-child { font-size: 13.5px; line-height: 1.4; }
/* --described: label gains a secondary description line. The switch aligns to
   the label line; adjacent described rows get a divider for legibility. */
.x-toggle-row--described { align-items: flex-start; }
.x-toggle-row--described .x-toggle-row-text { display: flex; flex-direction: column; gap: 3px; }
.x-toggle-row-label { font-size: 13.5px; line-height: 1.4; font-weight: 500; }
.x-toggle-row-desc { font-size: 12px; line-height: 1.5; color: var(--r33-ink-muted); max-width: 52ch; }
.x-toggle-row--described .x-switch { margin-top: 2px; }
.x-toggle-row--described + .x-toggle-row--described { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--r33-rule); }
.x-toggle-row[aria-disabled="true"] { opacity: .6; }

/* ----- 61.5 ActivityFeed (molecule) ----------------------------------
   Dot · lead text · mono timestamp list. The "Recent activity" aside.
   .x-activity-item--live dots the latest entry in accent. */
.x-activity { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.x-activity-item { display: flex; gap: 10px; }
.x-activity-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--r33-ink-muted); margin-top: 6px; flex-shrink: 0; }
.x-activity-item--live .x-activity-dot { background: var(--r33-accent); }
.x-activity-body { font-size: 13px; line-height: 1.45; min-width: 0; }
.x-activity-time { font-size: 11px; color: var(--r33-ink-muted); font-family: var(--font-mono); margin-top: 2px; }
/* ActivityFeed behaviour is CANONICAL here (was trapped in the molecule
   preview's local <style>): inside an AsidePanel the heading stays pinned and
   the list scrolls internally. It fills a height-bounded aside and otherwise
   self-caps so it never grows unbounded — so a page never needs to cap it and
   the molecule + every page scroll identically. */
.x-aside > h4 { flex: 0 0 auto; }
.x-aside .x-activity { flex: 1 1 auto; min-height: 0; max-height: 340px; overflow-y: auto; padding-right: 8px; -webkit-overflow-scrolling: touch; }
.x-aside .x-activity::-webkit-scrollbar { width: 8px; }
.x-aside .x-activity::-webkit-scrollbar-thumb { background: var(--r33-rule-strong); border-radius: 4px; }
.x-aside .x-activity::-webkit-scrollbar-track { background: transparent; }

/* ----- 61.6 BarBreakdown (molecule) ----------------------------------
   Labelled horizontal-bar list — "cost by model", "requests by team".
   Reuses the SpendMeter track/fill; bar colour stays inline per series. */
.x-barlist { display: flex; flex-direction: column; gap: 14px; }
.x-barlist-row { display: flex; flex-direction: column; gap: 6px; }
.x-barlist-head { display: flex; align-items: baseline; justify-content: space-between; font-size: 13px; }
.x-barlist-name { font-weight: 500; }
.x-barlist-val { font-family: var(--font-mono); font-size: 12px; color: var(--r33-ink-soft); font-variant-numeric: tabular-nums; }

/* ----- 61.7 NavCard (molecule) ---------------------------------------
   Icon + title + blurb link tile; "Open →" affordance bottom-left.
   Was shell.css `.pg-surface`. `.x-navcard-grid` is the responsive
   3→2→1 column wrapper. */
.x-navcard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 980px) { .x-navcard-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .x-navcard-grid { grid-template-columns: 1fr; } }
.x-navcard {
  border: 1px solid var(--r33-rule); border-radius: var(--radius-md);
  background: var(--r33-paper); padding: 22px; text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.x-navcard:hover { border-color: var(--r33-ink); transform: translateY(-2px); }
.x-navcard-ic {
  width: 40px; height: 40px; border-radius: var(--radius-1);
  background: var(--r33-paper-2); color: var(--r33-ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.x-navcard h3 { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -0.02em; margin: 4px 0 0; }
.x-navcard p { font-size: 13px; color: var(--r33-ink-muted); margin: 0; line-height: 1.5; }
.x-navcard-go {
  font-family: var(--font-mono); font-size: 12px; color: var(--r33-ink-muted);
  margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 6px;
}
.x-navcard:hover .x-navcard-go { color: var(--r33-ink); }

/* ----- 61.8 DangerZone (molecule) ------------------------------------
   Destructive-action row: title + blurb on the left, ghost button on the
   right, danger-tinted surface. Was shell.css `.pg-danger`. */
.x-danger {
  border: 1px solid color-mix(in oklab, var(--r33-danger) 35%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in oklab, var(--r33-danger) 5%, var(--r33-paper));
  padding: 20px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.x-danger h4 { font-family: var(--font-display); font-size: 15px; margin: 0 0 4px; color: var(--r33-danger); }
.x-danger p { font-size: 13px; color: var(--r33-ink-soft); margin: 0; max-width: 52ch; }
.x-danger .btn-ghost { color: var(--r33-danger); border-color: color-mix(in oklab, var(--r33-danger) 40%, transparent); flex-shrink: 0; }

/* ----- 61.8b ActionRow (molecule) — constructive sibling of DangerZone -------
   Same layout as .x-danger (title + blurb left, button right) but neutral /
   recovery-toned: re-activate a revoked key, restore an archived project, any
   reversible recovery. Accent-soft surface, ink heading, a real CTA button. */
.x-actionrow {
  border: 1px solid var(--r33-accent-edge);
  border-radius: var(--radius-md);
  background: var(--r33-accent-soft);
  padding: 20px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.x-actionrow h4 { font-family: var(--font-display); font-size: 15px; margin: 0 0 4px; color: var(--r33-ink); }
.x-actionrow p { font-size: 13px; color: var(--r33-ink-soft); margin: 0; max-width: 58ch; }
.x-actionrow .btn { flex-shrink: 0; }

/* ----- 61.9 HeroBanner (organism) ------------------------------------
   Console / overview lede: eyebrow badge + headline + supporting line on
   a bordered paper panel. Was shell.css `.pg-hero`. */
.x-hero {
  border: 1px solid var(--r33-rule-strong); border-radius: var(--radius-lg);
  background: var(--r33-paper); padding: 32px;
  position: relative; overflow: hidden;
}
.x-hero h2 {
  font-family: var(--font-display); font-size: clamp(24px, 2.4vw, 34px); font-weight: 600;
  letter-spacing: -0.035em; margin: 16px 0 0; max-width: 22ch; line-height: 1.08;
}
.x-hero p { font-size: 15px; color: var(--r33-ink-soft); margin: 14px 0 0; max-width: 60ch; }

/* =========================================================================
   62 · IdentityPicker (organism) — dev-IdP user list
   Banner + title + search/chip filterbar + scrollable user cards. Promoted
   from the inline `.ip-*` styles in organisms/identity-picker.html so the
   mock-idp screen USES the organism instead of re-implementing it with
   bespoke `.idp-*` classes. Behaviour: scripts/identity-picker.js.
   ========================================================================= */
.ip-banner {
  background: var(--r33-accent-soft); border: 1px solid var(--r33-accent-edge); color: var(--r33-ink);
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.10em; text-transform: uppercase;
  padding: 6px 10px; border-radius: 4px;
}
.ip-filterbar { display: flex; flex-direction: column; gap: 10px; }
.ip-search {
  width: 100%; box-sizing: border-box; font-family: var(--font-sans); font-size: 14px;
  padding: 9px 12px; background: var(--r33-paper);
  border: 1px solid var(--r33-rule-strong); border-radius: var(--radius-md); color: var(--r33-ink);
}
.ip-search:focus { outline: none; border-color: var(--r33-ink); box-shadow: 0 0 0 3px var(--r33-accent-soft); }
.ip-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ip-chip {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.04em; text-transform: lowercase; padding: 4px 10px;
  border-radius: 9999px; border: 1px solid var(--r33-rule-strong);
  background: var(--r33-paper); color: var(--r33-ink-soft); cursor: pointer;
}
.ip-chip:hover { border-color: var(--r33-ink); color: var(--r33-ink); }
.ip-chip[aria-pressed="true"] { background: var(--r33-ink); border-color: var(--r33-ink); color: var(--r33-paper); }
.ip-count { font-family: var(--font-mono); font-size: 11px; color: var(--r33-ink-muted); letter-spacing: 0.04em; }
.ip-list {
  list-style: none; padding: 8px; margin: 0; max-height: 300px; overflow-y: auto;
  border: 1px solid var(--r33-rule); border-radius: var(--radius-md);
  background: var(--r33-paper-soft); display: flex; flex-direction: column; gap: 8px;
  scrollbar-width: thin; scrollbar-color: var(--r33-rule-strong) transparent;
}
.ip-list::-webkit-scrollbar { width: 8px; }
.ip-list::-webkit-scrollbar-thumb { background: var(--r33-rule-strong); border-radius: 8px; }
.ip-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 12px; background: var(--r33-paper); color: var(--r33-ink);
  border: 1px solid var(--r33-rule); border-radius: var(--radius-md);
  text-decoration: none; cursor: pointer;
  transition: border-color 120ms var(--ease-out), transform 120ms var(--ease-out);
}
.ip-card:hover { border-color: var(--r33-ink); transform: translateY(-1px); }
.ip-email { font-weight: 500; font-size: 13.5px; min-width: 0; overflow-wrap: anywhere; }
.ip-badges { display: flex; flex: 0 1 auto; flex-wrap: wrap; gap: 6px; justify-content: flex-end; min-width: 0; max-width: 62%; }
.ip-badge {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.04em; text-transform: lowercase;
  padding: 3px 8px; border-radius: 9999px; white-space: nowrap;
}
.ip-badge.is-admin { background: var(--r33-ink); color: var(--r33-paper); }
.ip-badge.is-owner { background: var(--r33-accent); color: var(--r33-accent-ink); }
.ip-badge.is-user  { background: var(--r33-paper-2); color: var(--r33-ink-soft); }
.ip-badge.is-overflow { background: var(--r33-paper-2); color: var(--r33-ink-muted); }
.ip-empty { padding: 24px 12px; text-align: center; font-size: 13px; color: var(--r33-ink-muted); font-family: var(--font-mono); letter-spacing: 0.04em; }

/* =========================================================================
   63 · VirtualTable (DataTable organism) — viewport chrome
   Bounded scroll viewport + sentinel / end / empty pseudo-rows for the
   infinite-scroll project lists. Promoted from the inline <style> that was
   duplicated verbatim in the user + admin Projects pages.
   ========================================================================= */
.vt-wrap {
  max-height: 560px; overflow-y: auto;
  border: 1px solid var(--r33-rule); border-radius: var(--radius-md);
  background: var(--r33-paper); overscroll-behavior: contain;
}
.vt-sentinel td {
  text-align: center; padding: 16px; color: var(--r33-ink-muted);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; border-top: 1px solid var(--r33-rule);
}
.vt-sentinel-row { display: inline-flex; align-items: center; gap: 10px; }
.vt-end td {
  text-align: center; padding: 18px; color: var(--r33-ink-faint);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; border-top: 1px solid var(--r33-rule);
}
.vt-end td::before { content: "—  END OF LIST  —"; }
.vt-empty td {
  text-align: center; padding: 40px 18px; color: var(--r33-ink-muted);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em;
}
/* Toolbar count swaps to a spinner while a query settles */
.x-toolbar-count .x-count-loading { display: none; align-items: center; gap: 8px; }
.x-toolbar-count[data-loading="true"] .x-count-loaded { display: none; }
.x-toolbar-count[data-loading="true"] .x-count-loading { display: inline-flex; }

/* =====================================================================
   65 Card molecules (compact + editorial)
   ---------------------------------------------------------------------
   Plan 06b gap-hotfix (LEDGER-recorded): reusable molecule classes that
   were missing from the Plan 02 .x-* layer. APPEND-ONLY — no existing
   selector or token is changed. Canonical r33 + font-mono tokens only
   (the previews use deprecated cronos and font-serif aliases that resolve
   to these exact values).
   ===================================================================== */

/* ----- 65.1 CardCompact (molecule) — stat tile: value + label + description */
.x-card-compact {
  background: var(--r33-paper);
  border: 1px solid var(--r33-border);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: var(--shadow-xs);
}
.x-card-compact-value {
  font-family: var(--font-mono);
  font-size: 34px;
  font-weight: 500;
  color: var(--r33-ink);
  line-height: 1;
  letter-spacing: -0.02em;
}
.x-card-compact-label {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--r33-ink-muted);
  margin-top: 8px;
}
.x-card-compact-description {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--r33-ink-soft);
  margin-top: 10px;
  line-height: 1.5;
}

/* ----- 65.2 CardEditorial (molecule) — marketing case-study card */
.x-card-editorial {
  background: var(--r33-paper);
  border: 1px solid var(--r33-border);
  border-radius: 24px;
  overflow: hidden;
  max-width: 560px;
}
.x-card-editorial-media { display: block; }
.x-card-editorial-image,
.x-card-editorial-placeholder {
  aspect-ratio: 16 / 7;
  background-position: center;
  background-size: cover;
}
.x-card-editorial-placeholder { background-color: var(--r33-paper-3); }
.x-card-editorial-body { padding: 18px 22px; }
.x-card-editorial-eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--r33-ink-muted);
}
.x-card-editorial-title {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 500;
  margin: 8px 0;
  letter-spacing: -0.02em;
  color: var(--r33-ink);
}
.x-card-editorial-text {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--r33-ink-soft);
  margin: 0;
}
.x-card-editorial-link {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--r33-ink);
  margin-top: 10px;
  display: inline-block;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* === model-picker (W60c) === */
.mps {
  position: fixed; top: 24px; right: 24px; bottom: 24px; left: 24px;
  background: var(--r33-paper); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column; z-index: 50; overflow: hidden;
}
.mps-head {
  padding: 14px 24px; border-bottom: 1px solid var(--r33-rule);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-shrink: 0;
}
.mps-head h2 { font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -0.025em; margin: 0; }
.mps-head-meta { font-family: var(--font-mono); font-size: 11px; color: var(--r33-ink-muted); letter-spacing: 0.06em; }
.mps-head-meta strong { color: var(--r33-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.mps-head-actions { display: flex; align-items: center; gap: 12px; }
.mps-filter-bar {
  padding: 10px 24px; border-bottom: 1px solid var(--r33-rule);
  display: flex; flex-direction: column; gap: 8px; background: var(--r33-paper-soft); flex-shrink: 0;
}
.mps-filter-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.mps-filter-search { min-width: 240px; max-width: 320px; flex: 0 0 auto; }
.mps-rail-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--r33-ink-muted); font-weight: 500; width: 64px; flex-shrink: 0;
}
.mps-status {
  display: inline-flex; gap: 2px; padding: 3px; background: var(--r33-paper-2);
  border-radius: 9999px; flex-shrink: 0;
}
.mps-status-btn {
  border: 0; background: transparent; cursor: pointer; padding: 4px 12px; border-radius: 9999px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  color: var(--r33-ink-muted); letter-spacing: 0.02em;
  display: inline-flex; align-items: center; gap: 5px; transition: all 100ms; white-space: nowrap;
}
.mps-status-btn:hover { color: var(--r33-ink); }
.mps-status-btn[data-active="true"] { background: var(--r33-paper); color: var(--r33-ink); box-shadow: var(--shadow-xs); }
.mps-status-btn .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.mps-status-btn[data-status="enabled"] .dot  { background: var(--r33-success); }
.mps-status-btn[data-status="disabled"] .dot { background: var(--r33-ink-muted); }
.mps-prov-rail { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; flex: 1; min-width: 0; }
.mps-prov-pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 10px;
  border-radius: 9999px; border: 1px solid var(--r33-rule-strong);
  background: var(--r33-paper); color: var(--r33-ink);
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  cursor: pointer; transition: all 100ms; white-space: nowrap;
}
.mps-prov-pill:hover { background: var(--r33-paper-2); }
.mps-prov-pill[aria-pressed="true"] { background: var(--r33-ink); color: var(--r33-paper); border-color: var(--r33-ink); padding-right: 6px; }
.mps-prov-pill[aria-pressed="true"]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--r33-accent); margin-right: 1px; flex-shrink: 0; }
.mps-prov-pill .count { font-variant-numeric: tabular-nums; color: var(--r33-ink-muted); font-size: 10.5px; }
.mps-prov-pill[aria-pressed="true"] .count { color: var(--r33-paper-2); }
.mps-clear-filters {
  background: transparent; border: 0; cursor: pointer; font-family: var(--font-mono); font-size: 11px;
  color: var(--r33-ink-muted); padding: 4px 8px;
  text-decoration: underline; text-decoration-color: var(--r33-rule-strong); text-underline-offset: 3px;
}
.mps-clear-filters:hover { color: var(--r33-ink); text-decoration-color: var(--r33-ink); }
.mps-clear-filters[hidden] { display: none; }
.mps-applied {
  padding: 7px 24px; border-bottom: 1px solid var(--r33-rule);
  font-family: var(--font-mono); font-size: 11px; color: var(--r33-ink-muted); letter-spacing: 0.04em;
  display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap;
}
.mps-applied strong { color: var(--r33-ink); font-weight: 600; }
.mps-applied .chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px;
  border-radius: 4px; background: var(--r33-paper-2); color: var(--r33-ink); font-weight: 500;
}
.mps-applied .chip-x {
  cursor: pointer; color: var(--r33-ink-muted); margin-left: 2px;
  background: transparent; border: 0; padding: 0; display: inline-flex;
}
.mps-applied .chip-x:hover { color: var(--r33-danger); }
.mps-applied-spacer { flex: 1; }
.mps-applied-actions { display: flex; gap: 6px; align-items: center; }
.mps-expand-toggle {
  background: transparent; border: 0; cursor: pointer; padding: 3px 8px; border-radius: 4px;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--r33-ink-muted); letter-spacing: 0.04em;
  display: inline-flex; align-items: center; gap: 5px; transition: color 100ms, background 100ms; white-space: nowrap;
}
.mps-expand-toggle:hover { color: var(--r33-ink); background: var(--r33-paper-2); }
.mps-expand-toggle svg { width: 11px; height: 11px; flex-shrink: 0; }
.mps-bulk-btn {
  display: inline-flex; align-items: center; gap: 6px; background: var(--r33-paper);
  border: 1px solid var(--r33-rule-strong); padding: 3px 10px; border-radius: 9999px; cursor: pointer;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  color: var(--r33-ink); letter-spacing: 0.04em; white-space: nowrap; transition: all 100ms;
}
.mps-bulk-btn:hover { background: var(--r33-ink); color: var(--r33-paper); border-color: var(--r33-ink); }
.mps-bulk-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.mps-bulk-btn[disabled]:hover { background: var(--r33-paper); color: var(--r33-ink); border-color: var(--r33-rule-strong); }
.mps-bulk-btn .bulk-count { color: var(--r33-ink-muted); font-variant-numeric: tabular-nums; }
.mps-bulk-btn:hover .bulk-count { color: var(--r33-paper-2); }
.mps-scroll { flex: 1; overflow-y: auto; min-height: 0; }
.mps-group { border-bottom: 1px solid var(--r33-rule); }
.mps-group:last-child { border-bottom: 0; }
.mps-group-head {
  display: grid; grid-template-columns: 24px 1fr auto 16px; align-items: center; gap: 12px;
  padding: 7px 24px; min-height: 34px; background: var(--r33-paper-soft);
  cursor: pointer; user-select: none; transition: background 100ms;
  position: sticky; top: 0; z-index: 3;
}
.mps-group-head:hover { background: var(--r33-paper-2); }
.mps-group-head input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--r33-ink); cursor: pointer; justify-self: center; }
.mps-group-name { font-size: 13px; font-weight: 600; letter-spacing: -0.005em; color: var(--r33-ink); line-height: 1.2; }
.mps-group-sub { font-family: var(--font-mono); font-size: 10.5px; color: var(--r33-ink-muted); letter-spacing: 0.04em; }
.mps-group-sub strong { color: var(--r33-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.mps-group-chev { width: 14px; height: 14px; color: var(--r33-ink-muted); transition: transform 140ms; }
.mps-group[data-collapsed="true"] .mps-group-chev { transform: rotate(-90deg); }
.mps-group[data-collapsed="true"] .mps-group-rows { display: none; }
.mps-row {
  display: grid; grid-template-columns: 24px 1fr 320px 52px;
  align-items: center; gap: 12px; padding: 5px 24px 5px 60px;
  border-top: 1px solid var(--r33-rule); cursor: pointer; font-size: 12.5px;
}
.mps-row:hover { background: var(--r33-paper-soft); }
.mps-row[data-selected="true"] { background: color-mix(in oklab, var(--r33-accent) 7%, var(--r33-paper)); }
.mps-row[data-selected="true"]:hover { background: color-mix(in oklab, var(--r33-accent) 11%, var(--r33-paper)); }
.mps-row input[type=checkbox] { width: 13px; height: 13px; accent-color: var(--r33-ink); cursor: pointer; justify-self: center; }
.mps-row-prov { color: var(--r33-ink); font-weight: 500; }
.mps-row-region { font-family: var(--font-mono); font-size: 10.5px; color: var(--r33-ink-muted); letter-spacing: 0.06em; text-align: right; }
.mps-row-price {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; text-align: right; white-space: nowrap;
  font-family: var(--font-mono); font-size: 11px; font-variant-numeric: tabular-nums; color: var(--r33-ink);
}
.mps-cols {
  display: grid; grid-template-columns: 24px 1fr 320px 52px;
  align-items: center; gap: 12px; padding: 6px 24px 5px 60px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--r33-ink-faint);
  position: sticky; top: 34px; z-index: 2; background: var(--r33-paper); border-bottom: 1px solid var(--r33-rule);
}
.mps-cols .pricehdr { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; text-align: right; }
.mps-cols .reg { text-align: right; }
.mps-prov-group { border-top: 1px solid var(--r33-rule); }
.mps-prov-head {
  display: grid; grid-template-columns: 24px 1fr auto 16px;
  align-items: center; gap: 12px; padding: 5px 24px 5px 60px;
  cursor: pointer; user-select: none; font-size: 12.5px; transition: background 100ms;
}
.mps-prov-head:hover { background: var(--r33-paper-soft); }
.mps-prov-head input[type=checkbox] { width: 13px; height: 13px; accent-color: var(--r33-ink); cursor: pointer; justify-self: center; }
.mps-prov-summary { font-family: var(--font-mono); font-size: 10.5px; color: var(--r33-ink-muted); letter-spacing: 0.04em; white-space: nowrap; }
.mps-prov-summary strong { color: var(--r33-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.mps-prov-chev { width: 12px; height: 12px; color: var(--r33-ink-muted); transition: transform 140ms; }
.mps-prov-group[data-collapsed="true"] .mps-prov-chev { transform: rotate(-90deg); }
.mps-prov-group[data-collapsed="true"] .mps-prov-variants { display: none; }
.mps-row--variant { padding-left: 96px; border-top: 1px solid var(--r33-rule); background: color-mix(in oklab, var(--r33-paper-soft) 50%, var(--r33-paper)); }
.mps-row--variant:hover { background: var(--r33-paper-soft); }
.mps-row--variant[data-selected="true"] { background: color-mix(in oklab, var(--r33-accent) 5%, var(--r33-paper)); }
.mps-empty { padding: 80px 24px; text-align: center; color: var(--r33-ink-muted); font-size: 13.5px; line-height: 1.6; }
.mps-empty strong { color: var(--r33-ink); }
.mps-sentinel {
  padding: 14px 24px; border-top: 1px solid var(--r33-rule);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  color: var(--r33-ink-muted); font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.mps-end {
  padding: 18px 24px; border-top: 1px solid var(--r33-rule); text-align: center;
  color: var(--r33-ink-faint); font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.mps-foot {
  padding: 12px 24px; border-top: 1px solid var(--r33-rule); background: var(--r33-paper-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-shrink: 0;
}
.mps-foot-stats { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.mps-foot-count { font-family: var(--font-mono); font-size: 12.5px; color: var(--r33-ink); }
.mps-foot-count strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.mps-foot-breakdown { font-family: var(--font-mono); font-size: 10.5px; color: var(--r33-ink-muted); letter-spacing: 0.04em; }
.mps-foot-actions { display: flex; gap: 8px; }

/* ===== Model Compare Pane (molecule) ===== */
.x-model-compare-pane {
  display: flex;
  flex-direction: column;
  background: var(--r33-paper);
  border: 1px solid var(--r33-rule);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.x-model-compare-pane-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--r33-rule);
  background: var(--r33-paper-soft);
}
.x-model-compare-pane-select {
  width: 100%;
  max-width: 240px;
}
.x-model-compare-pane-done {
  color: var(--r33-ink-muted);
  border-color: var(--r33-rule);
}
.x-model-compare-pane-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}
.x-model-compare-pane-content {
  min-height: 160px;
  white-space: pre-wrap;
  border-radius: var(--radius-md);
  border: 1px solid var(--r33-rule);
  background: var(--r33-paper-2);
  padding: 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--r33-ink);
  line-height: 1.5;
}
.x-model-compare-pane-empty {
  color: var(--r33-ink-muted);
  font-family: var(--font-sans);
}
.x-model-compare-pane-metrics {
  font-size: 12px;
  color: var(--r33-ink-muted);
  font-family: var(--font-sans);
}

/* ===== Prompt Composer (molecule) ===== */
.x-prompt-composer {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid var(--r33-rule);
  background: var(--r33-paper);
  padding-top: 16px;
}
.x-prompt-composer-main {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}
.x-prompt-composer-field {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
}
.x-prompt-composer-toolbar {
  display: flex;
  width: 224px;
  flex-direction: column;
  gap: 4px;
}
.x-composer-input {
  width: 100%;
  resize: vertical;
  border-radius: var(--radius-md);
  border: 1px solid var(--r33-rule-strong);
  background: transparent;
  padding: 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--r33-ink);
  box-shadow: var(--shadow-sm);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.x-composer-input:focus {
  border-color: var(--r33-ink);
  box-shadow: 0 0 0 1px var(--r33-ink);
}
.x-composer-input::placeholder {
  color: var(--r33-ink-faint);
}
.x-prompt-composer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.x-piipicker {
  border: 1px solid var(--r33-rule); border-radius: var(--radius-md);
  background: var(--r33-paper-soft); overflow: hidden;
  display: flex; flex-direction: column;
}
.x-piipicker-bar { padding: 12px 12px 0; }
.x-piipicker-search { width: 100%; }
.x-piipicker-cats { display: flex; flex-wrap: wrap; gap: 5px; padding: 10px 12px; }
.x-piipicker-cat {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  padding: 4px 9px; border: 1px solid var(--r33-rule); border-radius: var(--radius-pill);
  background: var(--r33-paper); color: var(--r33-ink-muted); cursor: pointer; white-space: nowrap;
  transition: all var(--dur-fast, .12s) var(--ease-out, ease);
}
.x-piipicker-cat:hover { color: var(--r33-ink); border-color: var(--r33-rule-strong); }
.x-piipicker-cat.is-active { background: var(--r33-ink); color: var(--r33-paper); border-color: var(--r33-ink); }
.x-piipicker-list {
  max-height: 300px; overflow-y: auto; padding: 4px 12px 12px;
  display: flex; flex-direction: column; gap: 14px;
  border-top: 1px solid var(--r33-rule);
}
.x-piipicker-group[hidden] { display: none; }
.x-piipicker-grouphead {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  position: sticky; top: 0; background: var(--r33-paper-soft);
  padding: 8px 0 6px; z-index: 1;
}
.x-piipicker-groupsel { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.x-piipicker-groupsel span {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--r33-ink-muted);
}
.x-piipicker-groupcount { font-family: var(--font-mono); font-size: 10.5px; color: var(--r33-ink-faint); font-variant-numeric: tabular-nums; }
.x-piipicker-entities { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 14px; }
.x-piipicker-ent {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  font-size: 13px; line-height: 1.4; cursor: pointer; padding: 3px 0;
}
.x-piipicker-ent[hidden] { display: none; }
.x-piipicker-ent input[type="checkbox"] { accent-color: var(--r33-ink); flex-shrink: 0; }
.x-piipicker-ent-label { color: var(--r33-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x-piipicker-ent-id {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--r33-ink-faint);
  margin-left: auto; white-space: nowrap; flex-shrink: 0;
}
.x-piipicker-empty { padding: 20px 4px; text-align: center; font-size: 13px; color: var(--r33-ink-muted); }
.x-piipicker-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border-top: 1px solid var(--r33-rule); background: var(--r33-paper);
}
.x-piipicker-summary { font-size: 12.5px; color: var(--r33-ink-muted); }
.x-piipicker-summary strong { color: var(--r33-ink); font-variant-numeric: tabular-nums; }
.x-piipicker-clear {
  font-family: var(--font-mono); font-size: 11px; color: var(--r33-ink-muted);
  background: transparent; border: 0; cursor: pointer; padding: 2px 4px;
}
.x-piipicker-clear:hover { color: var(--r33-danger); }
@media (max-width: 720px) { .x-piipicker-entities { grid-template-columns: 1fr; } }

/* ===== 37.3 TopicList (molecule · scripts/topic-list.js) ============
   Topic editor for a SEMANTIC guardrail: a list of added topics (name +
   definition + example chips, each removable) above an "Add a topic" sub-
   panel. Mounted from <div data-topic-list>; the runtime emits the markup
   below. Composes .x-input / .x-textarea / .btn atoms. ================= */
.x-topiclist { display: flex; flex-direction: column; gap: 14px; }
.x-topiclist-items { display: flex; flex-direction: column; gap: 8px; }
.x-topiclist-empty {
  border: 1px dashed var(--r33-rule-strong); border-radius: var(--radius-md);
  padding: 16px 16px; font-size: 13px; color: var(--r33-ink-muted); line-height: 1.5;
  background: var(--r33-paper-soft);
}
.x-topiclist-card {
  display: flex; align-items: flex-start; gap: 12px;
  border: 1px solid var(--r33-rule); border-radius: var(--radius-md);
  background: var(--r33-paper); padding: 12px 12px 12px 14px;
  border-left: 2px solid var(--r33-ink);
}
.x-topiclist-card-main { flex: 1; min-width: 0; }
.x-topiclist-card-name { font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--r33-ink); }
.x-topiclist-card-def { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--r33-ink-soft); }
.x-topiclist-card-ex { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.x-topiclist-card-rm {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--r33-rule); background: var(--r33-paper); color: var(--r33-ink-muted);
  cursor: pointer; transition: all var(--dur-fast, .12s) var(--ease-out, ease);
}
.x-topiclist-card-rm:hover { color: var(--r33-danger); border-color: color-mix(in oklab, var(--r33-danger) 45%, transparent); background: color-mix(in oklab, var(--r33-danger) 7%, var(--r33-paper)); }

.x-topiclist-add {
  border: 1px solid var(--r33-rule); border-radius: var(--radius-md);
  background: var(--r33-paper-soft); padding: 14px;
  display: flex; flex-direction: column; gap: 11px;
}
.x-topiclist-add-head {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--r33-ink-muted);
}
.x-topiclist-add-field { display: flex; flex-direction: column; gap: 5px; }
.x-topiclist-add-label { font-size: 12.5px; font-weight: 500; color: var(--r33-ink); }
.x-topiclist-add-opt { font-family: var(--font-mono); font-size: 10px; font-weight: 400; color: var(--r33-ink-faint); text-transform: uppercase; letter-spacing: 0.08em; margin-left: 4px; }
.x-topiclist-exrow { display: flex; gap: 8px; align-items: flex-end; }
.x-topiclist-exrow .x-topiclist-exinput { flex: 1; min-width: 0; min-height: 56px; resize: vertical; line-height: 1.5; }
.x-topiclist-exrow .btn { flex-shrink: 0; }
.x-topiclist-add-foot { display: flex; }

.x-topiclist-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.x-topiclist-chips[hidden] { display: none; }
.x-topiclist-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--r33-ink); background: var(--r33-paper-2);
  border: 1px solid var(--r33-rule); border-radius: var(--radius-pill); padding: 3px 5px 3px 10px;
}
.x-topiclist-chip--static { padding: 3px 10px; color: var(--r33-ink-soft); }
.x-topiclist-chip-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 50%; border: 0; cursor: pointer;
  background: transparent; color: var(--r33-ink-faint);
}
.x-topiclist-chip-x:hover { color: var(--r33-danger); background: color-mix(in oklab, var(--r33-danger) 12%, transparent); }

/* ===== 61.85 Scram / KillSwitch (organism · scripts/scram.js) ========
   Org-wide emergency control. Two states off one persisted flag:
   .x-scram--armed (access live → danger Scram button) and
   .x-scram--paused (suspended banner → accent Restore button). Mounted
   from <div data-scram>; the destructive confirm is the AlertDialog. = */
.x-scram { display: block; }
.x-scram-panel {
  border: 1px solid var(--r33-rule); border-radius: var(--radius-md, 6px);
  background: var(--r33-paper); overflow: hidden;
}
/* State cue carried by the internal dot/banner, not a heavy top accent — so the
   panel chrome matches the form/meta cards it sits beside. Paused keeps a hairline
   danger top edge for at-a-glance alarm; armed stays a plain card. */
.x-scram--paused { border-top-color: color-mix(in oklab, var(--r33-danger) 55%, var(--r33-rule)); }

/* Optional in-panel header (config heading/desc) — sits at the very top of the
   panel, sharing the form-card-head type ramp + divider so it reads as the card's
   own title rather than page chrome. */
.x-scram-head { padding: 18px 22px; border-bottom: 1px solid var(--r33-rule); }
.x-scram-head h3 {
  font-family: var(--font-display); font-size: 18px; font-weight: 600;
  letter-spacing: -0.018em; margin: 0 0 4px; color: var(--r33-ink);
}
.x-scram-head p { font-size: 13px; color: var(--r33-ink-muted); margin: 0; max-width: 64ch; line-height: 1.55; }

/* Active-state header */
.x-scram-state { display: flex; align-items: flex-start; gap: 12px; padding: 20px 22px 16px; }
.x-scram-dot {
  width: 11px; height: 11px; border-radius: 50%; margin-top: 4px; flex-shrink: 0;
  background: var(--r33-success);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--r33-success) 18%, transparent);
}
.x-scram-state-label { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--r33-ink); }
.x-scram-state-sub { margin: 3px 0 0; font-size: 13.5px; color: var(--r33-ink-soft); }

/* Paused-state banner */
.x-scram-banner {
  display: flex; align-items: flex-start; gap: 13px; padding: 18px 22px;
  background: color-mix(in oklab, var(--r33-danger) 8%, var(--r33-paper));
  border-bottom: 1px solid color-mix(in oklab, var(--r33-danger) 22%, transparent);
}
.x-scram-banner-ic {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--r33-danger); color: #fff;
}
.x-scram-banner-title { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--r33-danger); }
.x-scram-banner-text p { margin: 3px 0 0; font-size: 13.5px; color: var(--r33-ink-soft); }

/* Stats strip */
.x-scram-stats {
  display: flex; flex-wrap: wrap; gap: 0; margin: 0;
  border-top: 1px solid var(--r33-rule); border-bottom: 1px solid var(--r33-rule);
  background: var(--r33-paper-soft);
}
.x-scram-stat { flex: 1; min-width: 120px; padding: 13px 22px; border-right: 1px solid var(--r33-rule); }
.x-scram-stat:last-child { border-right: 0; }
.x-scram-stat dt {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--r33-ink-muted); font-weight: 500;
}
.x-scram-stat dd { margin: 4px 0 0; font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--r33-ink); font-variant-numeric: tabular-nums; }

/* Explainer (armed only) */
.x-scram-explain { padding: 18px 22px 4px; }
.x-scram-explain h4 {
  display: flex; align-items: center; gap: 7px; margin: 0 0 6px;
  font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--r33-ink);
}
.x-scram-explain h4 svg { color: var(--r33-danger); }
.x-scram-explain p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--r33-ink-soft); max-width: 64ch; }

/* Action zone */
.x-scram-action { padding: 18px 22px 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
/* Live counter — ticking "paused for HH:MM:SS" readout above the resume button. */
.x-scram-counter {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-family: var(--font-mono); font-size: 13px; color: var(--r33-ink-soft);
  background: color-mix(in oklab, var(--r33-success) 10%, var(--r33-paper));
  border: 1px solid color-mix(in oklab, var(--r33-success) 30%, transparent);
  border-radius: var(--radius-pill); padding: 5px 13px 5px 11px;
}
.x-scram-counter-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--r33-success);
  animation: x-scram-pulse 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .x-scram-counter-dot { animation: none; } }
@keyframes x-scram-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.x-scram-counter-label { color: var(--r33-ink-muted); letter-spacing: 0.02em; }
.x-scram-counter-time { color: var(--r33-success); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.x-scram-action-note { margin: 0; font-size: 12.5px; color: var(--r33-ink-muted); }
.x-scram-action-note code {
  font-family: var(--font-mono); font-size: 11.5px; background: var(--r33-paper-2);
  border: 1px solid var(--r33-rule); border-radius: var(--radius-xs, 3px); padding: 1px 5px; color: var(--r33-ink);
}

/* ===== Bug-report floating action button (application-wide overlay) ===== */
.x-bug-fab {
  position: fixed; z-index: 60; right: 20px; bottom: 20px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border: 0; cursor: pointer;
  border-radius: 9999px; background: var(--r33-ink); color: var(--r33-paper);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 500;
  box-shadow: var(--shadow-lg);
  transition: transform 140ms var(--ease-out, ease-out), background 140ms var(--ease-out, ease-out);
}
.x-bug-fab:hover { background: var(--r33-ink-2, #2A2926); transform: translateY(-1px); }
.x-bug-fab:active { transform: translateY(1px); }
.x-bug-fab .x-bug-fab-ic { width: 15px; height: 15px; display: block; flex-shrink: 0; }
.x-bug-report-success {
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
}
.x-bug-report-success .x-bug-report-success-msg {
  font-size: 14px; line-height: 1.6; color: var(--r33-ink-soft); margin: 0;
}

/* === model-picker (W60c) === */
.mps {
  position: fixed; top: 24px; right: 24px; bottom: 24px; left: 24px;
  background: var(--r33-paper); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column; z-index: 50; overflow: hidden;
}
.mps-head {
  padding: 14px 24px; border-bottom: 1px solid var(--r33-rule);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-shrink: 0;
}
.mps-head h2 { font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -0.025em; margin: 0; }
.mps-head-meta { font-family: var(--font-mono); font-size: 11px; color: var(--r33-ink-muted); letter-spacing: 0.06em; }
.mps-head-meta strong { color: var(--r33-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.mps-head-actions { display: flex; align-items: center; gap: 12px; }
.mps-filter-bar {
  padding: 10px 24px; border-bottom: 1px solid var(--r33-rule);
  display: flex; flex-direction: column; gap: 8px; background: var(--r33-paper-soft); flex-shrink: 0;
}
.mps-filter-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.mps-filter-search { min-width: 240px; max-width: 320px; flex: 0 0 auto; }
.mps-rail-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--r33-ink-muted); font-weight: 500; width: 64px; flex-shrink: 0;
}
.mps-status {
  display: inline-flex; gap: 2px; padding: 3px; background: var(--r33-paper-2);
  border-radius: 9999px; flex-shrink: 0;
}
.mps-status-btn {
  border: 0; background: transparent; cursor: pointer; padding: 4px 12px; border-radius: 9999px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  color: var(--r33-ink-muted); letter-spacing: 0.02em;
  display: inline-flex; align-items: center; gap: 5px; transition: all 100ms; white-space: nowrap;
}
.mps-status-btn:hover { color: var(--r33-ink); }
.mps-status-btn[data-active="true"] { background: var(--r33-paper); color: var(--r33-ink); box-shadow: var(--shadow-xs); }
.mps-status-btn .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.mps-status-btn[data-status="enabled"] .dot  { background: var(--r33-success); }
.mps-status-btn[data-status="disabled"] .dot { background: var(--r33-ink-muted); }
.mps-prov-rail { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; flex: 1; min-width: 0; }
.mps-prov-pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 10px;
  border-radius: 9999px; border: 1px solid var(--r33-rule-strong);
  background: var(--r33-paper); color: var(--r33-ink);
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  cursor: pointer; transition: all 100ms; white-space: nowrap;
}
.mps-prov-pill:hover { background: var(--r33-paper-2); }
.mps-prov-pill[aria-pressed="true"] { background: var(--r33-ink); color: var(--r33-paper); border-color: var(--r33-ink); padding-right: 6px; }
.mps-prov-pill[aria-pressed="true"]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--r33-accent); margin-right: 1px; flex-shrink: 0; }
.mps-prov-pill .count { font-variant-numeric: tabular-nums; color: var(--r33-ink-muted); font-size: 10.5px; }
.mps-prov-pill[aria-pressed="true"] .count { color: var(--r33-paper-2); }
.mps-clear-filters {
  background: transparent; border: 0; cursor: pointer; font-family: var(--font-mono); font-size: 11px;
  color: var(--r33-ink-muted); padding: 4px 8px;
  text-decoration: underline; text-decoration-color: var(--r33-rule-strong); text-underline-offset: 3px;
}
.mps-clear-filters:hover { color: var(--r33-ink); text-decoration-color: var(--r33-ink); }
.mps-clear-filters[hidden] { display: none; }
.mps-applied {
  padding: 7px 24px; border-bottom: 1px solid var(--r33-rule);
  font-family: var(--font-mono); font-size: 11px; color: var(--r33-ink-muted); letter-spacing: 0.04em;
  display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap;
}
.mps-applied strong { color: var(--r33-ink); font-weight: 600; }
.mps-applied .chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px;
  border-radius: 4px; background: var(--r33-paper-2); color: var(--r33-ink); font-weight: 500;
}
.mps-applied .chip-x {
  cursor: pointer; color: var(--r33-ink-muted); margin-left: 2px;
  background: transparent; border: 0; padding: 0; display: inline-flex;
}
.mps-applied .chip-x:hover { color: var(--r33-danger); }
.mps-applied-spacer { flex: 1; }
.mps-applied-actions { display: flex; gap: 6px; align-items: center; }
.mps-expand-toggle {
  background: transparent; border: 0; cursor: pointer; padding: 3px 8px; border-radius: 4px;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--r33-ink-muted); letter-spacing: 0.04em;
  display: inline-flex; align-items: center; gap: 5px; transition: color 100ms, background 100ms; white-space: nowrap;
}
.mps-expand-toggle:hover { color: var(--r33-ink); background: var(--r33-paper-2); }
.mps-expand-toggle svg { width: 11px; height: 11px; flex-shrink: 0; }
.mps-bulk-btn {
  display: inline-flex; align-items: center; gap: 6px; background: var(--r33-paper);
  border: 1px solid var(--r33-rule-strong); padding: 3px 10px; border-radius: 9999px; cursor: pointer;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  color: var(--r33-ink); letter-spacing: 0.04em; white-space: nowrap; transition: all 100ms;
}
.mps-bulk-btn:hover { background: var(--r33-ink); color: var(--r33-paper); border-color: var(--r33-ink); }
.mps-bulk-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.mps-bulk-btn[disabled]:hover { background: var(--r33-paper); color: var(--r33-ink); border-color: var(--r33-rule-strong); }
.mps-bulk-btn .bulk-count { color: var(--r33-ink-muted); font-variant-numeric: tabular-nums; }
.mps-bulk-btn:hover .bulk-count { color: var(--r33-paper-2); }
.mps-scroll { flex: 1; overflow-y: auto; min-height: 0; }
.mps-group { border-bottom: 1px solid var(--r33-rule); }
.mps-group:last-child { border-bottom: 0; }
.mps-group-head {
  display: grid; grid-template-columns: 24px 1fr auto 16px; align-items: center; gap: 12px;
  padding: 7px 24px; min-height: 34px; background: var(--r33-paper-soft);
  cursor: pointer; user-select: none; transition: background 100ms;
  position: sticky; top: 0; z-index: 3;
}
.mps-group-head:hover { background: var(--r33-paper-2); }
.mps-group-head input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--r33-ink); cursor: pointer; justify-self: center; }
.mps-group-name { font-size: 13px; font-weight: 600; letter-spacing: -0.005em; color: var(--r33-ink); line-height: 1.2; }
.mps-group-sub { font-family: var(--font-mono); font-size: 10.5px; color: var(--r33-ink-muted); letter-spacing: 0.04em; }
.mps-group-sub strong { color: var(--r33-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.mps-group-chev { width: 14px; height: 14px; color: var(--r33-ink-muted); transition: transform 140ms; }
.mps-group[data-collapsed="true"] .mps-group-chev { transform: rotate(-90deg); }
.mps-group[data-collapsed="true"] .mps-group-rows { display: none; }
.mps-row {
  display: grid; grid-template-columns: 24px 1fr 320px 52px;
  align-items: center; gap: 12px; padding: 5px 24px 5px 60px;
  border-top: 1px solid var(--r33-rule); cursor: pointer; font-size: 12.5px;
}
.mps-row:hover { background: var(--r33-paper-soft); }
.mps-row[data-selected="true"] { background: color-mix(in oklab, var(--r33-accent) 7%, var(--r33-paper)); }
.mps-row[data-selected="true"]:hover { background: color-mix(in oklab, var(--r33-accent) 11%, var(--r33-paper)); }
.mps-row input[type=checkbox] { width: 13px; height: 13px; accent-color: var(--r33-ink); cursor: pointer; justify-self: center; }
.mps-row-prov { color: var(--r33-ink); font-weight: 500; }
.mps-row-region { font-family: var(--font-mono); font-size: 10.5px; color: var(--r33-ink-muted); letter-spacing: 0.06em; text-align: right; }
.mps-row-price {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; text-align: right; white-space: nowrap;
  font-family: var(--font-mono); font-size: 11px; font-variant-numeric: tabular-nums; color: var(--r33-ink);
}
.mps-cols {
  display: grid; grid-template-columns: 24px 1fr 320px 52px;
  align-items: center; gap: 12px; padding: 6px 24px 5px 60px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--r33-ink-faint);
  position: sticky; top: 34px; z-index: 2; background: var(--r33-paper); border-bottom: 1px solid var(--r33-rule);
}
.mps-cols .pricehdr { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; text-align: right; }
.mps-cols .reg { text-align: right; }
.mps-prov-group { border-top: 1px solid var(--r33-rule); }
.mps-prov-head {
  display: grid; grid-template-columns: 24px 1fr auto 16px;
  align-items: center; gap: 12px; padding: 5px 24px 5px 60px;
  cursor: pointer; user-select: none; font-size: 12.5px; transition: background 100ms;
}
.mps-prov-head:hover { background: var(--r33-paper-soft); }
.mps-prov-head input[type=checkbox] { width: 13px; height: 13px; accent-color: var(--r33-ink); cursor: pointer; justify-self: center; }
.mps-prov-summary { font-family: var(--font-mono); font-size: 10.5px; color: var(--r33-ink-muted); letter-spacing: 0.04em; white-space: nowrap; }
.mps-prov-summary strong { color: var(--r33-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.mps-prov-chev { width: 12px; height: 12px; color: var(--r33-ink-muted); transition: transform 140ms; }
.mps-prov-group[data-collapsed="true"] .mps-prov-chev { transform: rotate(-90deg); }
.mps-prov-group[data-collapsed="true"] .mps-prov-variants { display: none; }
.mps-row--variant { padding-left: 96px; border-top: 1px solid var(--r33-rule); background: color-mix(in oklab, var(--r33-paper-soft) 50%, var(--r33-paper)); }
.mps-row--variant:hover { background: var(--r33-paper-soft); }
.mps-row--variant[data-selected="true"] { background: color-mix(in oklab, var(--r33-accent) 5%, var(--r33-paper)); }
.mps-empty { padding: 80px 24px; text-align: center; color: var(--r33-ink-muted); font-size: 13.5px; line-height: 1.6; }
.mps-empty strong { color: var(--r33-ink); }
.mps-sentinel {
  padding: 14px 24px; border-top: 1px solid var(--r33-rule);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  color: var(--r33-ink-muted); font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.mps-end {
  padding: 18px 24px; border-top: 1px solid var(--r33-rule); text-align: center;
  color: var(--r33-ink-faint); font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.mps-foot {
  padding: 12px 24px; border-top: 1px solid var(--r33-rule); background: var(--r33-paper-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-shrink: 0;
}
.mps-foot-stats { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.mps-foot-count { font-family: var(--font-mono); font-size: 12.5px; color: var(--r33-ink); }
.mps-foot-count strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.mps-foot-breakdown { font-family: var(--font-mono); font-size: 10.5px; color: var(--r33-ink-muted); letter-spacing: 0.04em; }
.mps-foot-actions { display: flex; gap: 8px; }

/* ===== Loading skeletons (shell-first streaming placeholders) ===== */
.x-chart-skeleton { width: 100%; height: 100%; border-radius: var(--radius-sm, 6px); background: linear-gradient(100deg, var(--r33-paper-2) 30%, color-mix(in oklab, var(--r33-ink) 6%, var(--r33-paper-2)) 50%, var(--r33-paper-2) 70%); background-size: 200% 100%; animation: x-skeleton-shimmer 1.4s ease-in-out infinite; }
.x-skeleton-text { display: inline-block; width: 4.5ch; height: 1em; vertical-align: -0.125em; border-radius: var(--radius-xs, 3px); background: linear-gradient(100deg, var(--r33-paper-2) 30%, color-mix(in oklab, var(--r33-ink) 6%, var(--r33-paper-2)) 50%, var(--r33-paper-2) 70%); background-size: 200% 100%; animation: x-skeleton-shimmer 1.4s ease-in-out infinite; }
@keyframes x-skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .x-chart-skeleton, .x-skeleton-text { animation: none; } }

/* =========================================================================
   shell.css — page-level chrome for the route_33 Pages catalogue.
   Layers on top of /colors_and_type.css + /components.css. Owns the
   AppShell scaffold (sidebar rail + topbar + scroll body), the centered
   auth layout, and a small set of page-composition helpers reused across
   the dashboard / admin page instances.
   ========================================================================= */

html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: var(--r33-paper-soft);
  color: var(--r33-ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

/* ===== AppShell ========================================================= */
.shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background: var(--r33-paper-soft);
  position: relative;
}

/* Sidebar user-menu — moved to components.css (section 60). */

/* ----- Sidebar rail ----- */
.shell .x-sidebar { height: 100%; }
.shell-main {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* ----- Topbar removed -----
   The design system has no global topbar / breadcrumb / search component.
   Route-level headers live in the content column (PageHeader molecule for
   list/form/overview pages, DetailHeader for detail pages) — injected by
   shell.js::applyHeader. */

/* ----- Scroll body + content column ----- */
.shell-scroll { flex: 1; overflow-y: auto; }
.shell-content {
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px 32px 80px;
}
.shell-content--wide { max-width: 1320px; }

/* ===== Page composition helpers ======================================== */
/* Section block: an eyebrow rule + content stack */
.pg-stack { display: flex; flex-direction: column; gap: 22px; }
.pg-stack--tight { gap: 16px; }

.pg-section-rule {
  border-top: 1px solid var(--r33-rule-strong);
  position: relative; margin-top: 8px;
}
.pg-section-rule::after {
  content: "RT_33 · " attr(data-tag);
  position: absolute; top: -7px; left: 0;
  background: var(--r33-paper-soft); padding: 0 12px 0 0;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em; color: var(--r33-ink-muted);
}

/* Generic card surface */
.pg-card {
  border: 1px solid var(--r33-rule); border-radius: var(--radius-md);
  background: var(--r33-paper); padding: 22px;
}
.pg-card--soft { background: var(--r33-paper-soft); }
.pg-card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 16px;
}
.pg-card-head h3 {
  font-family: var(--font-display); font-size: 16px; font-weight: 600;
  /* Pins the tokens.css heading cascade prototype pages compute; overrides
     marketing.css's bare h3 line-height on hosts that bundle it (storybook). */
  line-height: 1.12;
  letter-spacing: -0.018em; margin: 0;
}
.pg-card-head p { font-size: 13px; color: var(--r33-ink-muted); margin: 4px 0 0; }

/* StatCard — moved to components.css (section 60). */

/* MetadataGrid — moved to components.css (section 60). */

/* Two-column page split (main + aside) */
.pg-split { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; }
/* Grid items default to min-width:auto, which lets wide content (e.g. a code block
   with long lines) push the 1fr track wider and blow out the layout. Allow both
   columns to shrink so overflow-x:auto inside them actually scrolls. */
.pg-split > * { min-width: 0; }
@media (max-width: 900px) { .pg-split { grid-template-columns: 1fr; } }
/* --match: aside matches the main column's height (e.g. an ActivityFeed aside
   that should be exactly as tall as the table beside it). The aside fills that
   height and its feed scrolls internally rather than imposing its own height. */
.pg-split--match { align-items: stretch; }
.pg-split--match > .x-aside { min-height: 0; }
.pg-split--match > .x-aside .x-activity { flex: 1 1 0; max-height: none; }
@media (max-width: 900px) { .pg-split--match { align-items: start; } .pg-split--match > .x-aside .x-activity { flex: 1 1 auto; max-height: 340px; } }

/* DangerZone, NavCard (.pg-surface), HeroBanner, CodeBlock and IdentityCell
   were promoted into the component layer — see components.css §61
   (.x-danger / .x-navcard / .x-hero / .x-code / .x-identity). Pages use the
   canonical .x-* classes directly. */

/* ===== Centered auth layout ============================================ */
.shell-centered {
  position: relative; min-height: 100vh;
  background: var(--r33-paper-soft);
  display: grid; place-items: center; padding: 48px 24px;
  overflow: auto;
}
.shell-centered::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(17,17,16,0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17,17,16,0.03) 1px, transparent 1px);
  background-size: 48px 48px; background-position: -1px -1px;
}
.shell-centered > * { position: relative; z-index: 1; }

.auth-card {
  width: 100%; max-width: 460px;
  background: var(--r33-paper);
  border: 1px solid var(--r33-rule-strong);
  border-radius: var(--radius-xl);
  padding: 36px 34px;
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; gap: 22px;
}
.auth-card--wide { max-width: 560px; }
.auth-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--r33-ink); }
.auth-brand svg path, .auth-brand svg line {
  fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 34;
}
.auth-brand .word {
  font-family: var(--font-mono); font-weight: 500; font-size: 19px;
  letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums;
}
.auth-brand .word .sep { color: var(--r33-ink-muted); }
.auth-endorse {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--r33-ink-muted);
  text-align: center; border-top: 1px solid var(--r33-rule); padding-top: 18px;
}

/* Brand lockup inside the sidebar uses the same stroke treatment already
   defined in components.css (.x-sidebar-mark). Nothing to add here. */

/* Keep status/role badges on one line inside dense tables, cards and chrome */
.shell .x-badge, .auth-card .x-badge, .x-table .x-badge { white-space: nowrap; }

@media (max-width: 760px) {
  .shell-content { padding: 24px 18px 64px; }
  .shell-topbar { padding: 14px 18px; }
}

/* ============================================================
   Shell corner — fixed top-right chrome slot (theme toggle), floating over
   the workspace. Page headers reserve right-space (below) so a header action
   never sits under it.
   ============================================================ */
.shell-scroll { position: relative; }
.shell-corner {
  position: fixed; top: 14px; right: 18px; z-index: 70;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}

/* Reserve top-right space so a page-header action button never sits under the
   floating corner chrome. Scoped to shelled pages only (component previews are untouched). */
.shell .x-pageheader, .shell .x-detail-header { padding-right: 52px; }

/* Chart chrome — moved to components.css (section 60.5). */


.x-brand-inline svg { overflow: visible; }
.auth-login-form { display: flex; flex-direction: column; gap: 14px; }
.auth-centered-form { display: flex; justify-content: center; width: 100%; }
.auth-centered-form .btn-primary { justify-content: center; width: 100%; }
.auth-login-form .btn-primary { justify-content: center; width: 100%; }
.auth-provider-list { display: flex; flex-direction: column; gap: 10px; }
.auth-provider-list .btn-ghost { justify-content: center; width: 100%; }
.auth-card .x-back-link { justify-content: center; }
.auth-card > .caption { text-align: center; margin: 0; }
.auth-retry-form { display: flex; justify-content: flex-end; }
.auth-last-login[hidden] { display: none; }
.auth-last-login-button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 12px 14px; border: 1px solid var(--r33-border-strong); border-radius: 8px; background: var(--r33-accent-soft); font: inherit; text-align: left; cursor: pointer; }
.auth-last-login-button:hover, .auth-last-login-button:focus-visible { background: var(--r33-accent); outline: none; }
.auth-last-login-button:hover .auth-last-login-email, .auth-last-login-button:focus-visible .auth-last-login-email { color: var(--r33-accent-ink); }
.auth-last-login-label { font-size: 12px; font-weight: 500; color: var(--r33-ink-muted); }
.auth-last-login-email { font-size: 15px; font-weight: 600; color: var(--r33-ink); overflow-wrap: anywhere; }
.auth-card { position: relative; }
.auth-card.is-submitting > *:not(.auth-submitting) { visibility: hidden; }
.auth-submitting { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; background: var(--r33-paper); border-radius: inherit; }
.auth-submitting-label { font-size: 12px; font-weight: 500; color: var(--r33-ink-muted); }
.auth-submitting-email { font-size: 15px; font-weight: 600; color: var(--r33-ink); overflow-wrap: anywhere; }
.auth-spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--r33-border); border-top-color: var(--r33-accent); animation: auth-spin 0.8s linear infinite; }
@keyframes auth-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .auth-spinner { animation: none; } }