@custom-variant dark (&:is(.dark *));

/* ── Palette: the Dev Hub theme (developer-tools/apps/hub, AGG-700) ──
 * Every colour below is the value the Hub measured off linear.app/developers
 * and ships today; the cabinet reads the same numbers so sign-up, cabinet and
 * Hub are one product. Dark is the canonical look (founder decision
 * 14.09.2026); light is the Hub's measured light palette and stays a
 * supported secondary mode.
 *
 * Brand-locked (never per theme): --cabinet-accent #00DD59, the navy
 * --cabinet-text-on-accent #1A2332 on green, white QR codes.
 */

/* Tier 1 — generic (shadcn-style) tokens consumed by the base layer and any
 * Tailwind utility (bg-background, text-foreground …). LIGHT values here. */
:root {
  --font-size: 16px;
  --background: #ffffff;
  --foreground: #282a30;
  --card: #ffffff;
  --card-foreground: #282a30;
  --popover: #f9f8f9;
  --popover-foreground: #282a30;
  --primary: #00DD59;
  --primary-foreground: #1A2332;
  --secondary: #f9f8f9;
  --secondary-foreground: #282a30;
  --muted: #f9f8f9;
  --muted-foreground: #6f6e77;
  --accent: #f9f8f9;
  --accent-foreground: #282a30;
  --destructive: #DC2626;
  --destructive-foreground: #FFFFFF;
  --border: #e9e8ea;
  --input: transparent;
  --input-background: #f9f8f9;
  --switch-background: #dcdbdd;
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --ring: #006b37;
  --chart-1: #00dd59;
  --chart-2: #3c4149;
  --chart-3: #f4b740;
  --chart-4: #1d4ed8;
  --chart-5: #7c3aed;
  --radius: 0.5rem;
  --sidebar: #ffffff;
  --sidebar-foreground: #282a30;
  --sidebar-primary: #00DD59;
  --sidebar-primary-foreground: #1A2332;
  --sidebar-accent: rgba(0,0,0,0.05);
  --sidebar-accent-foreground: #282a30;
  --sidebar-border: #e9e8ea;
  --sidebar-ring: #006b37;
}

.dark {
  --background: #08090a;
  --foreground: #f7f8f8;
  --card: rgba(255,255,255,0.05);
  --card-foreground: #f7f8f8;
  --popover: #1c1c1f;
  --popover-foreground: #f7f8f8;
  --primary: #00DD59;
  --primary-foreground: #1A2332;
  --secondary: #1c1c1f;
  --secondary-foreground: #f7f8f8;
  --muted: rgba(255,255,255,0.06);
  --muted-foreground: #8a8f98;
  --accent: rgba(255,255,255,0.055);
  --accent-foreground: #f7f8f8;
  --destructive: #EF4444;
  --destructive-foreground: #f7f8f8;
  --border: #23252a;
  --input: rgba(255,255,255,0.06);
  --input-background: rgba(255,255,255,0.06);
  --switch-background: #3e3e44;
  --ring: #00dd59;
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --chart-1: #00dd59;
  --chart-2: #d0d6e0;
  --chart-3: #f4b740;
  --chart-4: #60a5fa;
  --chart-5: #a78bfa;
  --sidebar: #08090a;
  --sidebar-foreground: #f7f8f8;
  --sidebar-primary: #00DD59;
  --sidebar-primary-foreground: #1A2332;
  --sidebar-accent: rgba(255,255,255,0.055);
  --sidebar-accent-foreground: #f7f8f8;
  --sidebar-border: #23252a;
  --sidebar-ring: #00dd59;
}

/* ── Token tier boundaries ──
 * TIER 1 — Generic (shadcn/ui): --background, --card, --primary, --destructive, etc.
 *   Used by: the base layer and Tailwind utilities (bg-background, text-foreground …).
 *
 * TIER 2 — Cabinet (domain): --cabinet-bg, --cabinet-elevated, --cabinet-accent, etc.
 *   Used by: CabinetUI components and all hand-built cabinet pages, via the
 *   CABINET_* constants in CabinetUI.tsx or var(--cabinet-*) in CSS.
 *
 * RULE: never mix tiers within the same component.
 */

/* ── Cabinet design tokens — LIGHT (the Hub's measured light palette) ──
 * Surfaces: page and shell share one white plane; #f9f8f9 is the single
 * raised surface (code, dialogs, inputs); cards are 2% black on 5% border.
 * Use --cabinet-accent-text for green text on white (#006b37, 6.65:1).
 */
:root {
  /* The hero's light and the glow its glyph breathes in (Pulse, Analytics, Search): a shade on the light theme. */
  --cabinet-hero-glyph: #0f0f10;
  --cabinet-hero-light: rgba(0, 0, 0, 0.035);
  --cabinet-hero-glow: rgba(0, 0, 0, 0.08);
  --cabinet-hero-glow-peak: rgba(0, 0, 0, 0.16);
  /* Surfaces */
  --cabinet-bg: #ffffff;
  --cabinet-elevated: #f9f8f9;
  --cabinet-muted: #f9f8f9;
  --cabinet-card-bg: rgba(0,0,0,0.02);
  --cabinet-card-border: rgba(0,0,0,0.05);
  --cabinet-modal-bg: #f9f8f9;
  --cabinet-modal-overlay: rgba(0,0,0,0.45);
  --cabinet-input-bg: #f9f8f9;
  --cabinet-input-border: #e4e2e4;

  /* Accent — brand green is constant */
  --cabinet-accent: #00DD59;
  --cabinet-accent-surface: #00DD59;
  --cabinet-accent-subtle: rgba(0,221,89,0.12);
  --cabinet-accent-hover: #00C84F;
  --cabinet-accent-pressed: #00AD45;
  /* AA green for text on white (6.65:1); the Hub's #008a45 is 4.45:1 */
  --cabinet-accent-text: #006b37;
  /* Dark navy on green — brand convention, same in both themes */
  --cabinet-text-on-accent: #1A2332;

  /* Text */
  --cabinet-text: #282a30;
  --cabinet-text-secondary: #3c4149;
  --cabinet-text-tertiary: #6f6e77;
  --cabinet-text-placeholder: #6f6e77;
  /** @deprecated Use --cabinet-text-tertiary */
  --cabinet-text-dim: var(--cabinet-text-tertiary);

  /* State colors — AA-compliant on white (the Hub defines none; kept) */
  --cabinet-success: #16A34A;
  --cabinet-success-subtle: rgba(22,163,74,0.10);
  --cabinet-success-text: #166534;
  --cabinet-warning: #B45309;
  --cabinet-warning-subtle: rgba(217,119,6,0.10);
  --cabinet-warning-text: #92400E;
  --cabinet-error: #DC2626;
  --cabinet-error-subtle: rgba(220,38,38,0.10);
  --cabinet-error-text: #B91C1C;
  --cabinet-error-subtle-text: #991B1B;
  --cabinet-info: #2563EB;
  --cabinet-info-subtle: rgba(37,99,235,0.10);
  --cabinet-info-text: #1D4ED8;

  /* Interaction — the ring uses the AA green on light, brand green on dark */
  --cabinet-focus-ring: 0 0 0 2px var(--cabinet-bg), 0 0 0 4px var(--cabinet-accent-text);
  --cabinet-input-focus: 0 0 0 1px var(--cabinet-accent-text), 0 0 0 4px rgba(0,107,55,0.16);
  --cabinet-row-hover: rgba(0,0,0,0.03);
  --cabinet-selection-bg: #00DD59;
  --cabinet-selection-text: #1A2332;

  /* Shadows — the Hub draws none; only the dialog floats */
  --cabinet-shadow-sm: none;
  --cabinet-shadow-md: none;
  --cabinet-shadow-lg: none;
  --cabinet-shadow-modal: 0 24px 80px rgba(0,0,0,0.18);

  /* Shell (sidebar + header): one plane with the page, a 1px hairline apart */
  --cabinet-shell-bg: #efeff0;
  --cabinet-shell-blur-bg: rgba(239,239,240,0.92);
  --cabinet-shell-border: #e2e2e2;
  --cabinet-hairline: #e2e2e2;
  --cabinet-pill: rgba(0,0,0,0.07);
  --cabinet-border-soft: rgba(0,0,0,0.12);
  --cabinet-elevated-hover: #ebebec;
  --cabinet-panel-bg: #f9f9fa;
  --cabinet-panel-border: #e2e2e2;
  --cabinet-nav-active: rgba(0,0,0,0.07);
  --cabinet-text-strong: #111111;
  --cabinet-text-nav: #5b5b5d;
  --cabinet-logo-divider: #dcdbdd;

  /* Always-on components (theme-invariant) */
  --cabinet-qr-bg: #FFFFFF;
  --cabinet-terminal-bg: #1c1c1f;
  --cabinet-terminal-text: #d0d6e4;

  /* Landing page RGB triplets (fallback for pages missing JS wrapper) */
  --landing-accent-rgb: 0, 221, 89;
  --landing-accent-soft-rgb: 92, 255, 150;
}

/* ── Cabinet design tokens — DARK (canonical) ──
 * Linear's anatomy, measured on linear.app on 2026-09-15 (AGG-1028): the
 * sidebar sits on the #09090a frame, the content is a #121213 panel with a
 * 0.5px #212224 border and 12px corners; cards are #1a1a1b on #2c2d2f;
 * text is #e3e4e6 with #ffffff for the selected row and #959597 for meta;
 * the only accent is the brand green, used the way Linear uses its indigo.
 */
.dark {
  --cabinet-hero-glyph: #ffffff;
  --cabinet-hero-light: rgba(255, 255, 255, 0.055);
  --cabinet-hero-glow: rgba(255, 255, 255, 0.25);
  --cabinet-hero-glow-peak: rgba(255, 255, 255, 0.55);
  --cabinet-accent: #00DD59;
  --cabinet-accent-surface: #00DD59;
  --cabinet-accent-subtle: rgba(0,221,89,0.15);
  --cabinet-accent-hover: #00C84F;
  --cabinet-accent-pressed: #00AD45;
  /* On dark the brand green IS the text colour (10.9:1 on #08090a) */
  --cabinet-accent-text: #00DD59;
  --cabinet-bg: #09090a;
  --cabinet-elevated: #1c1c1d;
  --cabinet-muted: rgba(255,255,255,0.06);
  --cabinet-card-bg: #1a1a1b;
  --cabinet-card-border: #2c2d2f;
  --cabinet-modal-bg: #1c1c1d;
  --cabinet-modal-overlay: rgba(0,0,0,0.62);
  --cabinet-input-bg: #1a1a1b;
  --cabinet-input-border: #2c2d2f;
  --cabinet-text: #e3e4e6;
  /* Unmeasured: Linear has no tier between #e3e4e6 and #959597; this one keeps body copy readable */
  --cabinet-text-secondary: #d0d1d4;
  --cabinet-text-tertiary: #959597;
  --cabinet-text-placeholder: #6b6f76;
  --cabinet-text-strong: #ffffff;
  --cabinet-text-nav: #919294;
  --cabinet-panel-bg: #121213;
  --cabinet-panel-border: #212224;
  --cabinet-nav-active: #232325;
  /** @deprecated Use --cabinet-text-tertiary */
  --cabinet-text-dim: var(--cabinet-text-tertiary);
  --cabinet-success: #22C55E;
  --cabinet-success-subtle: rgba(34,197,94,0.12);
  --cabinet-success-text: #22C55E;
  --cabinet-warning: #F4B740;
  --cabinet-warning-subtle: rgba(244,183,64,0.12);
  --cabinet-warning-text: #F4B740;
  --cabinet-error: #EF4444;
  --cabinet-error-subtle: rgba(239,68,68,0.12);
  --cabinet-error-text: #EF4444;
  --cabinet-error-subtle-text: #FCA5A5;
  --cabinet-info: #60A5FA;
  --cabinet-info-subtle: rgba(96,165,250,0.12);
  --cabinet-info-text: #60A5FA;
  --cabinet-focus-ring: 0 0 0 2px var(--cabinet-bg), 0 0 0 4px var(--cabinet-accent);
  --cabinet-input-focus: 0 0 0 1px var(--cabinet-accent), 0 0 0 4px rgba(0,221,89,0.18);
  --cabinet-row-hover: #18181a;
  --cabinet-selection-bg: #00DD59;
  --cabinet-selection-text: #1A2332;
  --cabinet-shadow-sm: none;
  --cabinet-shadow-md: none;
  --cabinet-shadow-lg: none;
  --cabinet-shadow-modal: 0 24px 80px rgba(0,0,0,0.42);
  --cabinet-shell-bg: #09090a;
  --cabinet-shell-blur-bg: rgba(9,9,10,0.92);
  --cabinet-shell-border: #212224;
  --cabinet-hairline: #212224;
  --cabinet-pill: #29292b;
  --cabinet-border-soft: rgba(255,255,255,0.13);
  --cabinet-elevated-hover: #252627;
  --cabinet-logo-divider: #3e3e44;
  --cabinet-text-on-accent: #1A2332;
  --cabinet-qr-bg: #FFFFFF;
  --cabinet-terminal-bg: #1c1c1f;
  --cabinet-terminal-text: #d0d6e4;
  --landing-accent-rgb: 0, 221, 89;
  --landing-accent-soft-rgb: 92, 255, 150;
}

/* ── Admin navy theme (legacy alias — values are now the default dark) ── */
.dark .cabinet-navy {
  /* no-op: kept for backward compatibility with JSX references */
}

/* Browser color scheme — matches form controls, scrollbars, date pickers to theme */
html { color-scheme: light; }
html.dark { color-scheme: dark; }

/* Text selection — consume --cabinet-selection-bg token */
::selection {
  background-color: var(--cabinet-selection-bg);
  color: var(--cabinet-selection-text);
}

/* Scrollbar */
.cabinet-scroll { scrollbar-width: thin; scrollbar-color: var(--cabinet-input-border) transparent; }
.cabinet-focus:focus-visible { outline: none; box-shadow: var(--cabinet-focus-ring); }

/* Smooth theme transitions — only on intentional user switch, not page load */
.theme-transitioning,
.theme-transitioning * {
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease !important;
}
@media (prefers-reduced-motion: reduce) {
  .theme-transitioning,
  .theme-transitioning * {
    transition: none !important;
  }
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-input-background: var(--input-background);
  --color-switch-background: var(--switch-background);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }

  body {
    @apply bg-background text-foreground;
    font-family: var(--font-inter);
    font-size: 15px;
    line-height: 24px;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
  }

  /**
  * Default typography styles for HTML elements (h1-h4, p, label, button, input).
  * These are in @layer base, so Tailwind utility classes (like text-sm, text-lg) automatically override them.
  */

  html {
    font-size: var(--font-size);
  }

  h1 {
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
  }

  h2 {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
  }

  h3 {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
  }

  h4 {
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
  }

  label {
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
  }

  button {
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
  }

  input {
    font-size: var(--text-base);
    font-weight: var(--font-weight-normal);
    line-height: 1.5;
  }
}

/* ---- Page-body primitives (design track, AGG-1026) ----
   Buttons and form controls carry their colours in classes rather than inline
   styles so hover, focus and disabled are real states. Scoped to .cabinet-navy,
   the root of both the cabinet and the admin shell. */
.cabinet-navy input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"])):focus,
.cabinet-navy select:focus,
.cabinet-navy textarea:focus { outline: none; box-shadow: var(--cabinet-input-focus); }
.cabinet-navy input::placeholder,
.cabinet-navy textarea::placeholder { color: var(--cabinet-text-placeholder); opacity: 1; }

.cabinet-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 16px; border-radius: 999px;
  border: 1px solid transparent; background: transparent;
  font: inherit; font-size: 13px; font-weight: 510; line-height: 20px; letter-spacing: 0; text-transform: none;
  white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.cabinet-btn--sm { height: 32px; padding: 0 14px; }
.cabinet-btn--xs { height: 28px; padding: 0 12px; font-size: 12px; gap: 6px; }
.cabinet-btn--block { width: 100%; }
.cabinet-btn--primary { background: var(--cabinet-accent); color: var(--cabinet-text-on-accent); }
.cabinet-btn--primary:hover:not(:disabled) { background: var(--cabinet-accent-hover); }
.cabinet-btn--primary:active:not(:disabled) { background: var(--cabinet-accent-pressed); }
.cabinet-btn--secondary { color: var(--cabinet-text); background: var(--cabinet-elevated); border-color: var(--cabinet-border-soft); }
.cabinet-btn--secondary:hover:not(:disabled) { background: var(--cabinet-elevated-hover); }
.cabinet-btn--ghost { color: var(--cabinet-text-tertiary); }
.cabinet-btn--ghost:hover:not(:disabled) { color: var(--cabinet-text); background: var(--cabinet-row-hover); }
.cabinet-btn--destructive { color: var(--cabinet-error-text); background: var(--cabinet-error-subtle); }
.cabinet-btn--destructive:hover:not(:disabled) { color: #ffffff; background: var(--cabinet-error); }
.cabinet-btn:disabled { opacity: .55; cursor: not-allowed; }
.cabinet-btn:focus-visible { outline: none; box-shadow: var(--cabinet-focus-ring); }

/* Shared status labels: colour conveys the same meaning in either cabinet. */
.cabinet-status { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 8px; border-radius: 6px; font-size: 12px; font-weight: 510; line-height: 18px; letter-spacing: 0; text-transform: none; overflow-wrap: anywhere; }
.cabinet-status--neutral { color: var(--cabinet-text-secondary); background: var(--cabinet-muted); }
.cabinet-status--accent { color: var(--cabinet-accent-text); background: var(--cabinet-accent-subtle); }
.cabinet-status--success { color: var(--cabinet-success-text); background: var(--cabinet-success-subtle); }
.cabinet-status--warning { color: var(--cabinet-warning-text); background: var(--cabinet-warning-subtle); }
.cabinet-status--error { color: var(--cabinet-error-subtle-text); background: var(--cabinet-error-subtle); }
.cabinet-status--info { color: var(--cabinet-info-text); background: var(--cabinet-info-subtle); }
.cabinet-status > svg { width: 14px; height: 14px; flex: none; }

/* Legacy local controls still receive the same keyboard affordance. Components
   with a more specific focus rule (search, composers) retain that rule. */
.cabinet-navy :where(button, a, [role="tab"]):focus-visible { outline: none; box-shadow: var(--cabinet-focus-ring); }

/* Data tables: the Hub table, dense enough for a cabinet. Cells carry no
   inline padding or colour any more; alignment is a class. */
.cabinet-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 21px; }
.cabinet-table th { text-align: left; padding: 10px 16px; font-size: 13px; font-weight: 510; color: var(--cabinet-text-tertiary); border-bottom: 1px solid var(--cabinet-hairline); white-space: nowrap; }
.cabinet-table td { padding: 12px 16px; color: var(--cabinet-text-secondary); border-bottom: 1px solid var(--cabinet-card-border); vertical-align: middle; }
.cabinet-table tbody tr:last-child td { border-bottom: 0; }
.cabinet-table tbody tr:hover td { background-color: var(--cabinet-row-hover); }
.cabinet-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.cabinet-table .is-center { text-align: center; }
.cabinet-table--compact th { padding: 8px 12px; }
.cabinet-table--compact td { padding: 8px 12px; font-size: 13px; }

/* Selectable option cards (welcome flow, AGG-1027): a package or a choice the
   person picks with aria-pressed. Colours live in the class so hover, focus
   and the selected state are real. */
.cabinet-option { position: relative; display: block; width: 100%; text-align: left; padding: 14px; font: inherit; color: inherit; cursor: pointer; background: var(--cabinet-elevated); border: 1px solid var(--cabinet-card-border); border-radius: 12px; font-variant-numeric: tabular-nums; transition: border-color .15s ease, box-shadow .15s ease; }
.cabinet-option:hover { border-color: var(--cabinet-text-placeholder); }
.cabinet-option[aria-pressed="true"] { border-color: var(--cabinet-accent); box-shadow: 0 0 0 3px var(--cabinet-accent-subtle); }
.cabinet-option:focus-visible { outline: none; box-shadow: var(--cabinet-focus-ring); }
.cabinet-option__badge { position: absolute; top: -9px; right: 10px; padding: 2px 8px; border-radius: 999px; background: var(--cabinet-accent); color: var(--cabinet-text-on-accent); font-size: 10px; font-weight: 590; letter-spacing: .06em; text-transform: uppercase; }

/* ── Cabinet shell — Linear anatomy (AGG-1028) ──
 * Every number below is a measurement from linear.app (dark theme, 2026-09-15):
 * 269px sidebar on the frame colour, 28px rows with 8px corners, 12px/500
 * group headers, 11px/450 counts, a 24px "?" bottom-left; the content is a
 * panel inset 8px on three sides with 12px corners and a 0.5px border, whose
 * page header is one 40px row. No top bar. */
.cabinet-shell { min-height: 100vh; background: var(--cabinet-bg); color: var(--cabinet-text); font-family: var(--font-inter); font-size: 13px; }
.cabinet-sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 40; width: 269px; display: flex; flex-direction: column; background: var(--cabinet-shell-bg); }
.cabinet-drawer { position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; width: 269px; display: flex; flex-direction: column; background: var(--cabinet-shell-bg); border-right: 0.5px solid var(--cabinet-panel-border); }
.cabinet-sidebar__top { display: flex; align-items: center; gap: 4px; padding: 16px 12px 17px; }
.cabinet-workspace { display: inline-flex; align-items: center; gap: 6px; min-width: 0; height: 28px; padding: 0 9px 0 5px; border: 0; border-radius: 10px; background: transparent; color: var(--cabinet-text); font: inherit; font-size: 13px; font-weight: 550; cursor: pointer; }
.cabinet-workspace:hover, .cabinet-workspace[aria-expanded="true"] { background: var(--cabinet-row-hover); }
.cabinet-workspace__mark { width: 20px; height: 20px; border-radius: 8px; background: var(--cabinet-nav-active); color: var(--cabinet-accent); font-size: 9px; font-weight: 550; letter-spacing: .02em; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cabinet-workspace__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cabinet-workspace__chevron { flex-shrink: 0; color: var(--cabinet-text-tertiary); }
.cabinet-icon-btn { position: relative; width: 28px; height: 28px; padding: 0; border: 0.5px solid transparent; border-radius: 9999px; background: transparent; color: var(--cabinet-text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
/* The unread mark on an icon button: Linear's inbox-with-a-dot, drawn rather than shipped as its own glyph. */
.cabinet-icon-btn__dot { position: absolute; top: 5px; right: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--cabinet-accent); }
.cabinet-icon-btn:hover { background: var(--cabinet-row-hover); }
.cabinet-icon-btn.is-raised { background: var(--cabinet-elevated); }
.cabinet-icon-btn.is-raised:hover { background: var(--cabinet-elevated-hover); }
.cabinet-icon-btn:focus-visible, .cabinet-workspace:focus-visible, .cabinet-help:focus-visible, .cabinet-nav-link:focus-visible, .cabinet-nav-group__header:focus-visible { outline: none; box-shadow: var(--cabinet-focus-ring); }
.cabinet-sidebar__nav { flex: 1; min-height: 0; overflow-y: auto; padding: 0 12px 8px; }
.cabinet-nav-group { margin-top: 21px; }
.cabinet-nav-group.is-first { margin-top: 0; }
.cabinet-nav-group__row { display: flex; align-items: center; height: 28px; margin-left: 5px; border-radius: 8px; }
.cabinet-nav-group__row:hover, .cabinet-nav-group__row:focus-within, .cabinet-nav-group__row.is-open { background: var(--cabinet-row-hover); }
.cabinet-nav-group__header { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 2px; height: 28px; padding: 0 4px; border: 0; border-radius: 8px; background: transparent; color: var(--cabinet-text-nav); font: inherit; font-size: 12px; font-weight: 500; text-align: left; cursor: pointer; }
.cabinet-nav-group__row:hover .cabinet-nav-group__header, .cabinet-nav-group__row:focus-within .cabinet-nav-group__header { color: var(--cabinet-text); }
.cabinet-nav-group__header.is-static { margin-left: 5px; cursor: default; }
.cabinet-nav-group__chevron { flex-shrink: 0; width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; }
.cabinet-nav-group__triangle { width: 0; height: 0; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; border-top: 4px solid currentColor; transition: transform 120ms ease; }
.cabinet-nav-group__actions { display: flex; align-items: center; gap: 2px; padding-right: 4px; opacity: 0; transition: opacity 80ms ease; }
.cabinet-nav-group__row:hover .cabinet-nav-group__actions, .cabinet-nav-group__row:focus-within .cabinet-nav-group__actions, .cabinet-nav-group__row.is-open .cabinet-nav-group__actions { opacity: 1; }
.cabinet-nav-group__action { width: 20px; height: 20px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--cabinet-text-nav); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; }
.cabinet-nav-group__action:hover, .cabinet-nav-group__action[aria-pressed="true"] { background: var(--cabinet-nav-active); color: var(--cabinet-text-strong); }
.cabinet-nav-filter { position: relative; margin: 2px 0 4px; }
.cabinet-nav-filter__icon { position: absolute; left: 9px; top: 8px; color: var(--cabinet-text-tertiary); pointer-events: none; }
.cabinet-nav-filter input { width: 100%; height: 28px; padding: 0 8px 0 26px; border: 0.5px solid var(--cabinet-input-border); border-radius: 8px; background: var(--cabinet-input-bg); color: var(--cabinet-text); font: inherit; font-size: 13px; }
.cabinet-nav-filter input::placeholder { color: var(--cabinet-text-placeholder); }
/* The filter is part of the sidebar, not a form: no accent ring on focus, the border just firms (founder, 2026-09-16). */
.cabinet-nav-filter input:focus, .cabinet-nav-filter input:focus-visible { outline: none; box-shadow: none; border-color: var(--cabinet-border-soft); }
.cabinet-nav-group__empty { height: 28px; padding: 0 8px; display: flex; align-items: center; font-size: 12px; color: var(--cabinet-text-tertiary); }
.cabinet-nav-group__items { list-style: none; margin: 0; padding: 0; }
.cabinet-nav-group__items[hidden] { display: none; }
.cabinet-nav-link { display: flex; align-items: center; gap: 6px; width: 100%; height: 28px; padding: 0 7px 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--cabinet-text-nav); font: inherit; font-size: 13px; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; }
.cabinet-nav-link:hover { background: var(--cabinet-row-hover); color: var(--cabinet-text-strong); }
.cabinet-nav-link.is-active { background: var(--cabinet-nav-active); color: var(--cabinet-text-strong); }
/* While the search holds the work panel, the section behind it is not the current screen: its fill goes quiet. */
.cabinet-sidebar__nav.is-searching .cabinet-nav-link.is-active { background: transparent; color: var(--cabinet-text-nav); }
.cabinet-sidebar__nav.is-searching .cabinet-nav-link.is-active:hover { background: var(--cabinet-row-hover); color: var(--cabinet-text-strong); }
.cabinet-icon-btn.is-active { background: var(--cabinet-nav-active); color: var(--cabinet-text-strong); }
.cabinet-nav-link.is-locked { cursor: not-allowed; opacity: .5; }
.cabinet-nav-link.is-locked:hover { background: transparent; color: var(--cabinet-text-nav); }
.cabinet-nav-link__icon { flex-shrink: 0; }
.cabinet-nav-link__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cabinet-nav-link__count { flex-shrink: 0; font-size: 11px; font-weight: 450; color: var(--cabinet-text-nav); font-variant-numeric: tabular-nums; }
.cabinet-studio-mark { width: 14px; height: 14px; border-radius: 3px; overflow: hidden; background: var(--cabinet-nav-active); color: var(--cabinet-text); font-size: 8px; font-weight: 550; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cabinet-studio-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cabinet-sidebar__bottom { padding: 8px 10px 10px; }
.cabinet-help { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 9999px; background: transparent; color: var(--cabinet-text); font: inherit; font-size: 12px; font-weight: 500; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.cabinet-help:hover { color: var(--cabinet-text-strong); background: var(--cabinet-row-hover); }
.cabinet-menu { position: absolute; left: 0; top: calc(100% + 4px); z-index: 50; width: 240px; padding: 4px; background: var(--cabinet-elevated); border: 0.5px solid var(--cabinet-border-soft); border-radius: 8px; box-shadow: var(--cabinet-shadow-modal); }
.cabinet-menu__head { padding: 6px 8px 8px; }
.cabinet-menu__name { font-size: 13px; font-weight: 500; color: var(--cabinet-text-strong); line-height: 16px; }
.cabinet-menu__meta { font-size: 12px; color: var(--cabinet-text-tertiary); line-height: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cabinet-menu__item { display: flex; align-items: center; gap: 8px; width: 100%; height: 28px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: var(--cabinet-text); font: inherit; font-size: 13px; text-align: left; text-decoration: none; cursor: pointer; }
.cabinet-menu__item:hover { background: var(--cabinet-row-hover); color: var(--cabinet-text-strong); }
.cabinet-menu__sep { height: 0.5px; margin: 4px 0; background: var(--cabinet-border-soft); }
.cabinet-main { display: flex; flex-direction: column; box-sizing: border-box; height: 100vh; margin-left: 269px; padding: 8px 8px 8px 0; }
.cabinet-main.is-sidebar-hidden { margin-left: 0; padding-left: 8px; }
.cabinet-panel { position: relative; flex: 1; min-height: 0; overflow-y: auto; background: var(--cabinet-panel-bg); border: 0.5px solid var(--cabinet-panel-border); border-radius: 12px; }
.cabinet-sidebar-reveal { position: fixed; z-index: 30; left: 16px; top: 14px; }
.cabinet-mobile-bar { display: none; align-items: center; gap: 12px; height: 48px; padding: 0 12px; background: var(--cabinet-shell-bg); color: var(--cabinet-text); }
.cabinet-mobile-bar__title { font-size: 13px; font-weight: 550; }
.cabinet-page__sticky { position: sticky; top: 0; z-index: 20; background: var(--cabinet-panel-bg); }
.cabinet-page__header { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 8.5px 0 calc(18px + var(--cabinet-panel-inset, 0px)); background: var(--cabinet-panel-bg); border-bottom: 0.5px solid var(--cabinet-panel-border); }
.cabinet-page__title { margin: 1px 0 0; font-size: 13px; font-weight: 500; line-height: 16px; letter-spacing: 0; color: var(--cabinet-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cabinet-page__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.cabinet-page__actions .cabinet-btn { height: 28px; padding: 0 10px; font-size: 12px; }
.cabinet-page__body { --cabinet-page-pad-y: 24px; --cabinet-page-pad-x: 32px; padding: var(--cabinet-page-pad-y) var(--cabinet-page-pad-x) 48px; }
/* Settings rhythm (founder 2026-09-15, after the Claude app's Billing): the blocks breathe */
.cabinet-page__body--air { padding: 48px 40px 96px; }
.cabinet-page__column--air { display: flex; flex-direction: column; gap: 56px; }
/* ⌘K search, on Linear's anatomy: it takes the work panel's own geometry — the sidebar's 269px, the shell's 8px gutter,
   the 0.5px edge and the 12px corner — so it reads as that panel showing search, not as a sheet pasted over the app. */
.cabinet-search { position: fixed; z-index: 45; top: 8px; right: 8px; bottom: 8px; left: 269px; display: flex; flex-direction: column; overflow: hidden; background: var(--cabinet-panel-bg); border: 0.5px solid var(--cabinet-panel-border); border-radius: 12px; }
.cabinet-search__bar { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 20px; border-bottom: 0.5px solid var(--cabinet-panel-border); }
.cabinet-search__bar > svg { flex: none; color: var(--cabinet-text-tertiary); }
/* Measured on Linear's actual field (a contenteditable div, caught via activeElement): 13px at weight 450 — not the 16px its wrapper inherits. */
.cabinet-search__bar input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--cabinet-text-strong); font: inherit; font-size: 13px; font-weight: 450; }
/* Linear's query line carries no box of its own: no border, and no ring when it takes focus. */
.cabinet-search__bar input:focus, .cabinet-search__bar input:focus-visible { outline: none; box-shadow: none; }
.cabinet-search__bar input::placeholder { color: var(--cabinet-text-placeholder); }
/* Measured on Linear's own tab element (an <a>, 2026-09-16): 28px tall, fully rounded, 0.5px border, 12px/500 text, 10px of side padding, 8px apart, 16px under the query line. */
.cabinet-search__tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 20px 6px; }
/* Both states are filled, and both are lighter than the panel: Linear measures lch(10.1) at rest and lch(16.7) when chosen,
   which land on our own #1a1a1b and #252627. Nothing sits transparent — a grey pill, not a hole in the panel. */
.cabinet-chip, .cabinet-search__tab { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 0.5px solid transparent; border-radius: 9999px; background: var(--cabinet-card-bg); color: var(--cabinet-text-secondary); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; }
.cabinet-chip:hover, .cabinet-search__tab:hover { background: var(--cabinet-elevated); color: var(--cabinet-text); }
.cabinet-chip.is-active, .cabinet-search__tab.is-active { background: var(--cabinet-elevated-hover); color: var(--cabinet-text-strong); }
.cabinet-chip:focus-visible { outline: none; box-shadow: var(--cabinet-focus-ring); }
.cabinet-chip__count { color: var(--cabinet-text-tertiary); font-variant-numeric: tabular-nums; }
.cabinet-chip.is-active .cabinet-chip__count { color: var(--cabinet-text-secondary); }
/* The inbox filters keep the search's rhythm: 8px under the divider, 8px apart, and the list's own 16px side edge. */
.cabinet-inbox__filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 16px 6px; }
.cabinet-inbox__none { padding: 14px 16px; font-size: 13px; line-height: 20px; color: var(--cabinet-text-tertiary); }
.cabinet-search__tab:focus-visible { outline: none; box-shadow: var(--cabinet-focus-ring); }
/* One left edge down the panel: the body's padding plus a row's own makes 20px, same as the query line. */
.cabinet-search__body { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 8px 24px; }
.cabinet-search__caption { margin: 8px 12px 6px; font-size: 13px; font-weight: 500; line-height: 18px; color: var(--cabinet-text-tertiary); }
.cabinet-search__recent, .cabinet-search__list { list-style: none; margin: 0; padding: 0; }
.cabinet-search__recent button { display: flex; align-items: center; gap: 12px; width: 100%; height: 40px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--cabinet-text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.cabinet-search__recent button:hover { background: var(--cabinet-nav-active); color: var(--cabinet-text-strong); }
.cabinet-search__recent button svg { flex: none; color: var(--cabinet-text-tertiary); }
.cabinet-search__recent button.is-clear { color: var(--cabinet-text-tertiary); }
.cabinet-search__recent button:focus-visible { outline: none; box-shadow: var(--cabinet-focus-ring); }
.cabinet-search__item { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 6px; color: var(--cabinet-text); font-size: 13px; cursor: pointer; }
.cabinet-search__item.is-active, .cabinet-search__item:hover { background: var(--cabinet-nav-active); color: var(--cabinet-text-strong); }
.cabinet-search__group { margin-left: auto; font-size: 11px; color: var(--cabinet-text-tertiary); }
.cabinet-search__empty { padding: 14px 10px; font-size: 13px; color: var(--cabinet-text-tertiary); }
/* Before the first search the panel greets like Pulse (founder, 2026-09-16): the cabinet's hero, its light spreading
   from the query line's border through the tabs, so it never starts mid-panel. The query line keeps the panel's ground. */
.cabinet-search.is-blank { background: radial-gradient(60% 380px at 50% 44px, var(--cabinet-hero-light), transparent 75%) no-repeat, var(--cabinet-panel-bg); }
.cabinet-search.is-blank .cabinet-search__bar { background: var(--cabinet-panel-bg); }
.cabinet-search .cabinet-hero { margin: 0; padding: 12vh 16px 0; background: none; }
/* Nothing searched yet: the cabinet's own icons behind the one that matters, on Linear's measurements — 16px marks, 13px/500 lines, 16px apart. */
@media (max-width: 1023px) { .cabinet-search { inset: 0; border: 0; border-radius: 0; } }
@media (max-width: 1023px) {
  .cabinet-navy { --cabinet-field-font-size: 16px; }
  .cabinet-sidebar { display: none; }
  .cabinet-main { height: auto; min-height: 100vh; margin-left: 0; padding: 0; }
  .cabinet-main.is-sidebar-hidden { padding-left: 0; }
  .cabinet-panel { overflow: visible; border: 0; border-radius: 0; }
  .cabinet-mobile-bar { display: flex; }
  .cabinet-sidebar-reveal { display: none; }
  .cabinet-page__body { --cabinet-page-pad-y: 16px; --cabinet-page-pad-x: 16px; padding: 16px 16px 40px; }
  .cabinet-page__body--air { padding: 32px 16px 64px; }
  .cabinet-page__column--air { gap: 40px; }
  .cabinet-page__header { flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
  .cabinet-page__actions { flex-wrap: wrap; min-width: 0; max-width: 100%; flex-shrink: 1; }
}

/* ── Inbox (AGG-1028): Linear's list column + pane ── */
.cabinet-inbox { display: flex; height: 100%; min-height: 100%; }
.cabinet-inbox__list { display: flex; flex-direction: column; width: 400px; flex-shrink: 0; min-height: 0; border-right: 0.5px solid var(--cabinet-panel-border); }
.cabinet-inbox__rows { flex: 1; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: 8px 0; }
.cabinet-inbox__row { display: flex; align-items: flex-start; gap: 12px; width: 100%; height: 55px; padding: 0 16.5px 0 16px; border: 0; border-radius: 8px; background: transparent; color: var(--cabinet-text); font: inherit; text-align: left; cursor: pointer; }
.cabinet-inbox__row:hover { background: var(--cabinet-row-hover); }
.cabinet-inbox__row.is-selected { background: var(--cabinet-nav-active); }
.cabinet-inbox__row:focus-visible { outline: none; box-shadow: var(--cabinet-focus-ring); }
.cabinet-inbox__avatar { width: 32px; height: 32px; margin-top: 12px; border-radius: 50%; background: var(--cabinet-nav-active); color: var(--cabinet-accent); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cabinet-inbox__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-top: 11px; }
.cabinet-inbox__title { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; font-weight: 500; line-height: 16px; color: var(--cabinet-text); }
.cabinet-inbox__title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cabinet-inbox__row.is-unread .cabinet-inbox__title { color: var(--cabinet-text-strong); }
.cabinet-inbox__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cabinet-accent); flex-shrink: 0; }
.cabinet-inbox__preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 450; line-height: 15px; color: var(--cabinet-text-tertiary); }
.cabinet-inbox__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; padding-top: 12px; line-height: 15px; font-size: 12px; font-weight: 450; color: var(--cabinet-text-tertiary); }
.cabinet-inbox__pane { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-y: auto; }
.cabinet-inbox__empty { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 24px; color: var(--cabinet-text-tertiary); }
.cabinet-inbox__empty p { margin: 0; font-size: 13px; font-weight: 500; }
@media (max-width: 1023px) {
  .cabinet-inbox { flex-direction: column; }
  .cabinet-inbox__list { width: auto; border-right: 0; border-bottom: 0.5px solid var(--cabinet-panel-border); }
}

/* ── Pulse (AGG-1028): the operational feed, one widget per scenario ── */
.cabinet-pulse { display: flex; flex-direction: column; gap: 12px; }
.pulse-widget { padding: 16px; background: var(--cabinet-card-bg); border: 0.5px solid var(--cabinet-card-border); border-radius: 12px; }
.pulse-widget.is-attention { border-color: color-mix(in srgb, var(--cabinet-accent) 40%, var(--cabinet-card-border)); }
.pulse-widget.is-critical { border-color: var(--cabinet-error); background: color-mix(in srgb, var(--cabinet-error) 14%, var(--cabinet-card-bg)); }
.pulse-widget--skeleton { height: 120px; }
.pulse-widget__head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12px; font-weight: 500; color: var(--cabinet-text-tertiary); }
.pulse-widget__badge { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 9999px; font-size: 11px; font-weight: 500; background: var(--cabinet-nav-active); color: var(--cabinet-text); }
.pulse-widget.is-attention .pulse-widget__badge { background: var(--cabinet-accent-subtle); color: var(--cabinet-accent-text); }
.pulse-widget.is-critical .pulse-widget__badge { background: var(--cabinet-error); color: #ffffff; }
.pulse-widget__title { margin: 0; font-size: 15px; font-weight: 550; line-height: 20px; color: var(--cabinet-text-strong); }
.pulse-widget__text { margin: 4px 0 0; font-size: 13px; line-height: 18px; color: var(--cabinet-text); }
.pulse-widget__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
/* Pulse before go-live, on the anatomy of a Linear issue (founder, 2026-09-15): the header row
   with the step counter and the arrows; the step as the issue (the title, what to do, the action
   in place, the developer's part from the Inbox guide); the properties column with the status,
   the evidence, the seven steps and the guides. Drawn with the cabinet tokens so it holds in
   both themes. */
.pulse-issue { display: flex; flex-direction: column; height: 100%; min-height: 100%; }
.pulse-issue__crumb-sep { flex: none; color: var(--cabinet-text-tertiary); }
.pulse-issue__crumb { min-width: 0; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500; line-height: 16px; color: var(--cabinet-text); }
.pulse-issue__counter { margin-right: 4px; font-size: 13px; font-weight: 450; color: var(--cabinet-text-tertiary); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Wizard chrome trail: keep "Pulse" intact; only the current step title ellipsizes under pressure. */
.pulse-issue__header { gap: 8px; }
.pulse-issue__trail { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; overflow: hidden; }
.pulse-issue__trail .cabinet-page__title { flex: none; overflow: visible; text-overflow: clip; }
.pulse-issue__crumb--mid { flex: 0 1 auto; max-width: 9em; }
.pulse-issue__crumb--current { flex: 1 1 auto; min-width: 0; }
/* Two-column step: the panel scrolls, the steps rail sticks. The rail tracks the viewport
   (220–388, Linear's properties width at the top) and the step body fills the leftover so a
   cap cannot open a dead strip between the columns. Stacks below 900px. */
.pulse-issue__body { flex: 1; min-height: 0; display: flex; align-items: flex-start; gap: clamp(24px, 4vw, 52px); padding: 0 clamp(24px, 4vw, 52px); overflow-y: auto; }
.pulse-issue__main { flex: 1; min-width: 0; padding: 48px 0 64px; }
.pulse-issue__main > * { max-width: 100%; }
.pulse-issue__title { margin: 0 0 16px; font-size: 24px; font-weight: 600; line-height: 30px; letter-spacing: -0.02em; color: var(--cabinet-text-strong); text-wrap: balance; outline: none; }
.pulse-issue__description { margin: 0 0 28px; font-size: 15px; line-height: 24px; color: var(--cabinet-text); text-wrap: pretty; }
.pulse-issue__dev { display: flex; flex-direction: column; gap: 12px; margin-top: 40px; padding-top: 24px; border-top: 0.5px solid var(--cabinet-hairline); }
.pulse-issue__dev h3 { margin: 0; font-size: 15px; font-weight: 600; line-height: 20px; color: var(--cabinet-text-strong); }
.pulse-issue__dev p { margin: 0; font-size: 14px; line-height: 22px; color: var(--cabinet-text); text-wrap: pretty; }
.pulse-issue__dev code, .pulse-wizard__note code { padding: 1px 5px; border-radius: 4px; background: var(--cabinet-elevated); color: var(--cabinet-text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.pulse-issue__code { border: 0.5px solid var(--cabinet-hairline); border-radius: 10px; background: var(--cabinet-elevated); overflow: hidden; }
.pulse-issue__code-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; padding: 0 6px 0 12px; border-bottom: 0.5px solid var(--cabinet-hairline); font-size: 12px; line-height: 16px; color: var(--cabinet-text-tertiary); }
.pulse-issue__code-tools { display: inline-flex; align-items: center; gap: 4px; }
.pulse-issue__code-link { display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; height: 24px; border-radius: 6px; color: var(--cabinet-text-tertiary); font-size: 12px; text-decoration: none; }
.pulse-issue__code-link:hover { background: var(--cabinet-elevated-hover); color: var(--cabinet-text-strong); }
.pulse-issue__code pre { margin: 0; padding: 12px; overflow-x: auto; }
.pulse-issue__dev .pulse-issue__code code { display: block; padding: 0; border-radius: 0; background: none; font-size: 12.5px; line-height: 20px; white-space: pre; }
.pulse-issue__ways { display: flex; flex-direction: column; gap: 20px; margin-top: 8px; }
.pulse-issue__way { display: flex; flex-direction: column; gap: 8px; }
.pulse-issue__way h4 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 550; line-height: 20px; color: var(--cabinet-text-strong); }
.pulse-issue__way h4 svg { color: var(--cabinet-text-tertiary); }
.pulse-issue__help { margin: 32px 0 0; font-size: 13px; line-height: 20px; color: var(--cabinet-text-tertiary); }
.pulse-issue__help a { color: var(--cabinet-text); text-decoration: underline; text-underline-offset: 3px; }
/* Activity (founder 16.09): the cabinet's one thread — a log of what happened, and one composer for the agent and the team.
   Used by the integration's steps and by a studio's release in the inbox, so both read and behave the same. */
.cabinet-activity { margin-top: 40px; padding-top: 24px; border-top: 0.5px solid var(--cabinet-hairline); }
.cabinet-activity__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cabinet-activity__head h2,
.cabinet-activity__head h3 { margin: 0; font-size: 15px; font-weight: 600; line-height: 20px; color: var(--cabinet-text-strong); }
.cabinet-activity__head + p { margin: 8px 0 0; font-size: 13px; line-height: 18px; color: var(--cabinet-text-secondary); }
/* The initials never spill past the circle: two letters at 8px fit, and overflow is clipped in any case. */
.cabinet-activity__avatar { flex: none; display: grid; place-items: center; overflow: hidden; width: 16px; height: 16px; border-radius: 50%; background: var(--cabinet-elevated); color: var(--cabinet-text-secondary); font-size: 8px; font-weight: 600; line-height: 1; letter-spacing: 0; }
.cabinet-activity__avatar.is-agent { background: var(--cabinet-accent); color: var(--cabinet-text-on-accent); }
.cabinet-activity__log { list-style: none; margin: 14px 0 0; padding: 0; }
.cabinet-activity__row { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 5px 0; }
.cabinet-activity__row + .cabinet-activity__row::before { content: ""; position: absolute; left: 7.5px; top: -8px; height: 13px; border-left: 1px solid var(--cabinet-hairline); }
.cabinet-activity__mark { flex: none; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--cabinet-elevated); }
.cabinet-activity__mark::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--cabinet-text-tertiary); }
.cabinet-activity__mark.is-ok::after { background: var(--cabinet-accent); }
.cabinet-activity__mark.is-warn::after { background: var(--cabinet-warning); }
.cabinet-activity__text { flex: 1; min-width: 0; margin: 0; font-size: 13px; line-height: 20px; color: var(--cabinet-text-secondary); word-break: break-word; }
.cabinet-activity__who { color: var(--cabinet-text); }
.cabinet-activity__failed { color: var(--cabinet-error-text); }
.cabinet-activity__when { color: var(--cabinet-text-tertiary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cabinet-activity__error { margin: 10px 0 0; font-size: 12px; line-height: 18px; color: var(--cabinet-error-text); }
/* The conversation sits in the same list as the log, in one chronology, and reads as a messenger: what I send
   sits right in a muted green bubble, everyone else — the agent and my teammates — sits left in a grey one, with
   their name over it (founder, 2026-09-16). The hairline between the log's marks does not run through a bubble. */
.cabinet-activity__msg { display: flex; align-items: flex-end; gap: 8px; }
.cabinet-activity__msg.is-mine { justify-content: flex-end; }
.cabinet-activity__row.cabinet-activity__msg::before, .cabinet-activity__msg + .cabinet-activity__row::before { content: none; }
/* A bubble is not a line: the conversation gets air from the log lines on either side of it (founder, 2026-09-16). */
.cabinet-activity__msg + .cabinet-activity__row:not(.cabinet-activity__msg), .cabinet-activity__row:not(.cabinet-activity__msg) + .cabinet-activity__msg { margin-top: 8px; }
.cabinet-activity__bubble { display: inline-block; max-width: 78%; padding: 8px 12px; border: 0.5px solid var(--cabinet-card-border); border-bottom-left-radius: 4px; border-radius: 12px 12px 12px 4px; background: var(--cabinet-card-bg); color: var(--cabinet-text); font-size: 13px; line-height: 19px; word-break: break-word; }
.cabinet-activity__msg.is-mine .cabinet-activity__bubble { border-radius: 12px 12px 4px 12px; background: var(--cabinet-accent-subtle); }
.cabinet-activity__msg.is-mine .cabinet-activity__when, .cabinet-activity__msg.is-mine .cabinet-activity__author { color: var(--cabinet-text-secondary); }
.cabinet-activity__author { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 500; line-height: 14px; color: var(--cabinet-text-tertiary); }
/* Linear's composer: the box only firms its border on focus. The paperclip is a ghost until the pointer is on it. Send stays a quiet circle until there is text, then it takes the accent, and hover lifts whichever state you are on. */
.cabinet-activity__composer { position: relative; display: flex; flex-direction: column; margin-top: 16px; padding: 12px 14px; border: 0.5px solid var(--cabinet-card-border); border-radius: 10px; background: var(--cabinet-card-bg); }
.cabinet-activity__composer:focus-within { border-color: var(--cabinet-border-soft); }
.cabinet-activity__composer textarea { box-sizing: border-box; min-height: 52px; max-height: 180px; padding: 0; border: 0; background: transparent; color: var(--cabinet-text); font: inherit; font-size: 13px; line-height: 20px; resize: none; }
.cabinet-activity__composer textarea:focus, .cabinet-activity__composer textarea:focus-visible { outline: none; box-shadow: none; }
.cabinet-activity__composer textarea::placeholder { color: var(--cabinet-text-tertiary); }
.cabinet-activity__composer-bar { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 10px; }
.cabinet-activity__composer .cabinet-icon-btn { color: var(--cabinet-text-tertiary); background: transparent; }
.cabinet-activity__composer .cabinet-icon-btn:hover { background: var(--cabinet-elevated-hover); color: var(--cabinet-text-strong); }
.cabinet-activity__send { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--cabinet-elevated); color: var(--cabinet-text-tertiary); cursor: pointer; }
.cabinet-activity__send:not(:disabled) { background: var(--cabinet-accent); color: var(--cabinet-text-on-accent); }
.cabinet-activity__send:hover:not(:disabled) { background: var(--cabinet-accent-hover); }
.cabinet-activity__send:active:not(:disabled) { background: var(--cabinet-accent-pressed); }
.cabinet-activity__send:focus-visible { outline: none; box-shadow: var(--cabinet-focus-ring); }
.cabinet-activity__send:disabled { cursor: default; }
.cabinet-activity__send:disabled:hover { background: var(--cabinet-elevated-hover); color: var(--cabinet-text); }
.cabinet-activity__mentions { position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 5; width: min(280px, 100%); list-style: none; margin: 0; padding: 6px; border: 0.5px solid var(--cabinet-border-soft); border-radius: 10px; background: var(--cabinet-elevated); box-shadow: var(--cabinet-shadow-modal); }
.cabinet-activity__mentions button { display: flex; align-items: center; gap: 8px; width: 100%; height: 30px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: var(--cabinet-text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.cabinet-activity__mentions button:hover { background: var(--cabinet-nav-active); color: var(--cabinet-text-strong); }
.cabinet-activity__mentions button:focus-visible { outline: none; box-shadow: var(--cabinet-focus-ring); }
/* In the inbox the thread sits under whatever notification is open, keeping that pane's side padding. */
.cabinet-inbox__pane .cabinet-activity { margin: 32px 52px 40px; }
/* The support dock stays in normal flow on desktop. */
.support-thread__latest { display: none; }
@media (max-width: 640px) {
  .support-thread { padding-bottom: calc(var(--support-dock-height, 156px) + var(--support-keyboard-inset, 0px) + 16px); }
  .support-thread__end { scroll-margin-bottom: calc(var(--support-dock-height, 156px) + var(--support-keyboard-inset, 0px) + 16px); }
  .support-thread__dock { position: fixed; z-index: 25; left: 12px; right: 12px; bottom: var(--support-keyboard-inset, 0px); padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .support-thread__dock .cabinet-activity__composer { flex-direction: row; align-items: flex-end; gap: 8px; margin-top: 0; padding: 8px 12px; border-radius: 24px; background: var(--cabinet-elevated); }
  .support-thread__dock .cabinet-activity__composer textarea { flex: 1; min-width: 0; height: 48px; min-height: 48px; }
  .support-thread__dock .cabinet-activity__composer-bar { margin-top: 0; }
  .support-thread__dock .support-thread__attach,
  .support-thread__dock .cabinet-activity__send { width: 44px; height: 44px; }
  .support-thread__dock > p { margin: 0 0 8px; padding: 8px 12px; border-radius: 12px; background: var(--cabinet-elevated); }
  .support-thread__latest { position: absolute; right: 0; bottom: calc(100% + 8px); display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--cabinet-border-soft); border-radius: 50%; background: var(--cabinet-elevated); color: var(--cabinet-text); cursor: pointer; }
  .support-thread__latest:focus-visible { outline: none; box-shadow: var(--cabinet-focus-ring); }
  @supports ((backdrop-filter: blur(18px)) or (-webkit-backdrop-filter: blur(18px))) {
    .support-thread__dock .cabinet-activity__composer, .support-thread__latest { background: color-mix(in srgb, var(--cabinet-elevated) 80%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
  }
  .cabinet-inbox__pane .cabinet-activity { margin-inline: 12px; }
  .cabinet-activity__bubble { box-sizing: border-box; max-width: calc(100% - 24px); }
  .cabinet-activity__bubble .cabinet-activity__when { white-space: normal; }
  /* 16px keeps iOS from zooming the field. The message text stays on the cabinet's 13px. */
  .cabinet-activity__composer textarea { font-size: 16px; line-height: 22px; }
}

.pulse-issue__aside { position: sticky; top: 0; width: clamp(220px, 22vw, 388px); flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 28px; padding: 48px 0 40px; }
.pulse-issue__group { display: flex; flex-direction: column; }
.pulse-issue__group h3 { margin: 0 0 6px; font-size: 13px; font-weight: 500; line-height: 16px; color: var(--cabinet-text-tertiary); }
.pulse-issue__link { display: flex; align-items: center; gap: 10px; min-height: 30px; font-size: 13px; font-weight: 500; color: var(--cabinet-text); }
.pulse-issue__link > svg { flex: none; color: var(--cabinet-text-tertiary); }
.pulse-issue__link { text-decoration: none; }
.pulse-issue__link:hover { color: var(--cabinet-text-strong); }
.pulse-issue__link:hover span { text-decoration: underline; text-underline-offset: 3px; }
.pulse-issue__link:focus-visible { outline: none; border-radius: 6px; box-shadow: var(--cabinet-focus-ring); }
.pulse-issue__steps { list-style: none; margin: 0 0 0 -8px; padding: 0; }
.pulse-issue__step { display: flex; align-items: center; gap: 10px; width: 100%; height: 30px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: var(--cabinet-text-secondary); font: inherit; font-size: 13px; font-weight: 500; text-align: left; cursor: pointer; }
.pulse-issue__step:hover:not(:disabled) { background: var(--cabinet-row-hover); color: var(--cabinet-text); }
.pulse-issue__step[aria-current="step"] { background: var(--cabinet-nav-active); color: var(--cabinet-text-strong); }
.pulse-issue__step:focus-visible { outline: none; box-shadow: var(--cabinet-focus-ring); }
.pulse-issue__step:disabled { cursor: default; }
/* A step that cannot be opened yet (founder, 2026-09-16): dimmed, and the cursor over it is the usual arrow with a
   small lock badge at its corner, the way the system marks a blocked drop — the hotspot stays on the arrow's tip. */
.pulse-issue__step.is-locked { color: var(--cabinet-text-tertiary); cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M5 2.5v15.8l4-3.9 2.6 5.8 2.8-1.2-2.6-5.7h5.6z' fill='%23000' stroke='%23fff' stroke-width='1.2' stroke-linejoin='round'/><g transform='translate(12.5 12) scale(0.45)' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2' fill='%23000'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></g></svg>") 5 3, not-allowed; cursor: -webkit-image-set(url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M5 2.5v15.8l4-3.9 2.6 5.8 2.8-1.2-2.6-5.7h5.6z' fill='%23000' stroke='%23fff' stroke-width='1.2' stroke-linejoin='round'/><g transform='translate(12.5 12) scale(0.45)' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2' fill='%23000'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></g></svg>") 1x, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'><path d='M5 2.5v15.8l4-3.9 2.6 5.8 2.8-1.2-2.6-5.7h5.6z' fill='%23000' stroke='%23fff' stroke-width='1.2' stroke-linejoin='round'/><g transform='translate(12.5 12) scale(0.45)' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2' fill='%23000'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></g></svg>") 2x) 5 3, not-allowed; }
.pulse-issue__step-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Linear's status marks: a filled check when done, a ring with a half pie for the step that needs you, an empty ring for the rest. */
.pulse-issue__status { flex: none; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; }
.pulse-issue__status.is-todo { border: 1.5px solid var(--cabinet-text-placeholder); }
.pulse-issue__status.is-locked { border: 1.5px dotted var(--cabinet-text-placeholder); }
.pulse-issue__status.is-next { padding: 1.5px; border: 1.5px solid var(--cabinet-warning); background: conic-gradient(var(--cabinet-warning) 0 50%, transparent 50% 100%) content-box; }
.pulse-issue__status.is-done { background: var(--cabinet-accent); color: var(--cabinet-text-on-accent); }
@media (max-width: 900px) {
  .pulse-issue__body { flex-direction: column; align-items: stretch; gap: 0; padding: 0 clamp(16px, 4vw, 52px); }
  .pulse-issue__aside { position: static; width: auto; min-width: 0; flex: none; padding: 0 0 40px; }
}
/* Phone (~390px): Integration wizard chrome + lobby grid (Pulse step Open a game in demo). */
@media (max-width: 480px) {
  .pulse-issue__header { padding-left: 12px; padding-right: 8px; }
  .pulse-issue__crumb--mid,
  .pulse-issue__crumb-sep--mid { display: none; }
  .pulse-issue__body { padding: 0 16px; }
  .pulse-issue__main { padding: 24px 0 48px; }
  .pulse-issue__title { font-size: 20px; line-height: 26px; }
  .pulse-issue__description { margin-bottom: 20px; font-size: 14px; line-height: 22px; }
  .pulse-wizard__tiles {
    /* min(100%, 160px) lets tracks shrink on narrow viewports so 390px gets 2 cols, never a clipped 3rd. */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
    gap: 10px 8px;
    padding: 10px;
    max-height: min(420px, 55dvh);
  }
  .pulse-wizard__pair { grid-template-columns: minmax(0, 1fr); }
  .pulse-wizard__picker { max-width: 100%; min-width: 0; }
  .pulse-issue__main,
  .pulse-wizard__field { min-width: 0; max-width: 100%; }
  .cabinet-shell,
  .cabinet-main,
  .cabinet-panel { min-width: 0; max-width: 100%; }
  .pulse-wizard__tile-art::after { font-size: 11px; padding: 0 4px; text-align: center; }
}
/* The integration as a widget on the feed (founder, 2026-09-16): the setup's own metrics on about a
   third of the first screen, and the whole card is the way into the steps. */
.pulse-setup { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.pulse-setup:hover { border-color: var(--cabinet-accent); }
.pulse-setup:focus-visible { outline: none; box-shadow: var(--cabinet-focus-ring); }
.pulse-setup__cta { align-self: flex-start; margin-top: 12px; pointer-events: none; }
/* The integration as the current level (founder, 2026-09-16): a track of its steps, the done ones in the accent, the
   next one in the warning tone, the rest waiting; the launch sits locked under it, quieter than the level in play. */
.pulse-track { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; margin: 20px 0 0; padding: 0; list-style: none; }
.pulse-track li { height: 4px; border-radius: 2px; background: var(--cabinet-elevated-hover); }
.pulse-track li.is-done { background: var(--cabinet-accent); }
.pulse-track li.is-next { background: var(--cabinet-warning); }
.pulse-widget__head svg { flex: none; }
.pulse-widget.is-locked .pulse-widget__title, .pulse-widget.is-locked .pulse-widget__text { color: var(--cabinet-text-secondary); }
/* The cabinet's welcome, as Linear opens its Pulse (founder, 2026-09-16): the glyph breathing in a soft light on a
   halo that starts right under the page header, the name, one line — Pulse until the operator is live, Analytics
   until the numbers exist. */
.cabinet-hero { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: calc(-1 * var(--cabinet-page-pad-y, 24px)) calc(-1 * var(--cabinet-page-pad-x, 32px)) 0; padding: calc(44px + var(--cabinet-page-pad-y, 24px)) 16px 36px; background: radial-gradient(70% 100% at 50% 0%, var(--cabinet-hero-light), transparent 75%); text-align: center; }
.cabinet-hero__glyph { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 10px; color: var(--cabinet-hero-glyph); animation: cabinet-hero-breathe 3.2s ease-in-out infinite; }
.cabinet-hero__title { margin: 0; font-size: 20px; font-weight: 600; line-height: 26px; letter-spacing: -0.01em; color: var(--cabinet-text-strong); }
.cabinet-hero__text { max-width: 440px; margin: 0; font-size: 13.5px; line-height: 20px; color: var(--cabinet-text-secondary); text-wrap: balance; }
.cabinet-hero__action { display: flex; justify-content: center; margin-top: 18px; }
@keyframes cabinet-hero-breathe {
  0%, 100% { filter: drop-shadow(0 0 10px var(--cabinet-hero-glow)); }
  50% { filter: drop-shadow(0 0 18px var(--cabinet-hero-glow-peak)); }
}
/* A wrong address or a page that failed (founder, 2026-09-16): the cabinet's frame with the sidebar gone and the hero
   in it. A wrong address breathes like the welcome; a failed page holds its glyph still. */
.cabinet-error { box-sizing: border-box; display: flex; min-height: 100vh; min-height: 100dvh; padding: 8px; background: var(--cabinet-bg); color: var(--cabinet-text); font-family: var(--font-inter); font-size: 13px; }
.cabinet-error__panel { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: clamp(96px, 24vh, 240px) 24px 48px; border: 0.5px solid var(--cabinet-panel-border); border-radius: 12px; background: radial-gradient(70% 420px at 50% 0%, var(--cabinet-hero-light), transparent 75%) no-repeat, var(--cabinet-panel-bg); text-align: center; }
.cabinet-error__glyph { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 10px; color: var(--cabinet-hero-glyph); animation: cabinet-hero-breathe 3.2s ease-in-out infinite; }
.cabinet-error.is-failed .cabinet-error__glyph { animation: none; filter: drop-shadow(0 0 14px var(--cabinet-hero-glow)); }
.cabinet-error__title { margin: 0; font-size: 20px; font-weight: 600; line-height: 26px; letter-spacing: -0.01em; color: var(--cabinet-text-strong); text-wrap: balance; }
.cabinet-error__text { max-width: 440px; margin: 0; font-size: 13.5px; line-height: 20px; color: var(--cabinet-text-secondary); text-wrap: pretty; }
.cabinet-error__text a { border-radius: 4px; color: var(--cabinet-text); text-decoration: underline; text-underline-offset: 3px; }
.cabinet-error__text a:focus-visible { outline: none; box-shadow: var(--cabinet-focus-ring); }
.cabinet-error__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.cabinet-error__ref { margin: 10px 0 0; font-size: 12px; line-height: 16px; color: var(--cabinet-text-tertiary); }
.cabinet-error__ref code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--cabinet-text-secondary); overflow-wrap: anywhere; user-select: all; }
@media (max-width: 1023px) { .cabinet-error { padding: 0; } .cabinet-error__panel { border: 0; border-radius: 0; } }

.pulse-issue__crumb-sep + .pulse-issue__crumb { color: var(--cabinet-text-tertiary); }
.cabinet-page__title a { color: inherit; text-decoration: none; }
.cabinet-page__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* The controls inside a step. */
.pulse-wizard__form { display: flex; flex-direction: column; gap: 16px; }
.pulse-wizard__field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pulse-wizard__label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; font-weight: 510; color: var(--cabinet-text-tertiary); }
.pulse-wizard__hint { font-size: 12px; font-weight: 400; color: var(--cabinet-text-placeholder); }
.pulse-wizard__input { width: 100%; min-width: 0; height: 36px; padding: 0 12px; border: 1px solid var(--cabinet-input-border); border-radius: 8px; background: var(--cabinet-input-bg); color: var(--cabinet-text); font: inherit; font-size: 14px; }
.pulse-wizard__input.is-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.pulse-wizard__inline { display: flex; align-items: center; gap: 8px; }
.pulse-wizard__pair { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 8px; }
.pulse-wizard__note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--cabinet-text-tertiary); text-wrap: pretty; }
.pulse-wizard__note a { color: var(--cabinet-text); text-decoration: underline; text-underline-offset: 3px; }
.pulse-wizard__note.is-ok { color: var(--cabinet-success-text); }
.pulse-wizard__note.is-error { color: var(--cabinet-error-text); }
.pulse-wizard__error { margin-top: 12px; }
.pulse-wizard__textbtn { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--cabinet-text); font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pulse-wizard__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; }
.pulse-wizard__options { display: grid; gap: 8px; }
.pulse-wizard__option { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; border: 1px solid var(--cabinet-card-border); border-radius: 10px; background: var(--cabinet-card-bg); color: var(--cabinet-text); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; }
.pulse-wizard__option:hover { border-color: var(--cabinet-border-soft); }
.pulse-wizard__option[aria-checked="true"] { border-color: var(--cabinet-accent); background: var(--cabinet-accent-subtle); }
.pulse-wizard__option .t { font-size: 14px; font-weight: 510; }
.pulse-wizard__option .s { font-size: 12.5px; color: var(--cabinet-text-tertiary); }
.pulse-wizard__option .tail { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 510; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pulse-wizard__option-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pulse-wizard__badge { height: 18px; padding: 0 6px; border-radius: 999px; background: var(--cabinet-accent-subtle); color: var(--cabinet-accent-text); font-size: 11px; font-weight: 510; line-height: 18px; }
/* The studio picker (founder, 2026-09-16): Linear's property picker inlined — the search, an "All" row whose
   tri-state box acts on the rows shown, then one 36px row per studio with a checkbox for membership.
   Unticked rows dim so the exceptions read at a hundred, and the list scrolls inside after ten. */
.pulse-wizard__picker { max-width: 100%; min-width: 0; overflow: hidden; border: 0.5px solid var(--cabinet-card-border); border-radius: 12px; background: var(--cabinet-card-bg); }
.pulse-wizard__picker-search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-bottom: 0.5px solid var(--cabinet-hairline); color: var(--cabinet-text-tertiary); }
.pulse-wizard__picker-search svg { flex: none; }
.pulse-wizard__picker-search input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--cabinet-text); font: inherit; font-size: 13px; }
.pulse-wizard__picker-search input:focus, .pulse-wizard__picker-search input:focus-visible { outline: none; box-shadow: none; }
.pulse-wizard__picker-search input::placeholder { color: var(--cabinet-text-tertiary); }
.pulse-wizard__picker-list { max-height: 360px; margin: 0; padding: 4px 0; list-style: none; overflow-y: auto; }
.pulse-wizard__picker-row { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px; cursor: pointer; }
.pulse-wizard__picker-row:hover { background: var(--cabinet-row-hover); }
.pulse-wizard__picker-row.is-all { border-bottom: 0.5px solid var(--cabinet-hairline); }
.pulse-wizard__picker-row input { flex: none; width: 14px; height: 14px; margin: 0; accent-color: var(--cabinet-accent); cursor: inherit; }
.pulse-wizard__picker-row .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500; color: var(--cabinet-text); }
.pulse-wizard__picker-row .s { flex: none; font-size: 12.5px; color: var(--cabinet-text-tertiary); font-variant-numeric: tabular-nums; }
.pulse-wizard__picker-row.is-off .t { color: var(--cabinet-text-tertiary); }
.pulse-wizard__picker-logo { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--cabinet-elevated); color: var(--cabinet-text-secondary); font-size: 10px; font-weight: 600; object-fit: cover; }
.pulse-wizard__picker-empty { margin: 0; padding: 12px; font-size: 13px; color: var(--cabinet-text-tertiary); }
/* The game picker is a lobby (founder, 2026-09-16): the search, then tiles of the lobby's games as a casino shows
   them — the cover, the name, the studio — the chosen one ringed in the accent. A game the catalogue has no cover
   for yet gets a gradient of its own with the name set on it. */
.pulse-wizard__tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 12px 10px; max-height: 420px; padding: 12px; overflow-y: auto; }
.pulse-wizard__tile { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pulse-wizard__tile-art { position: relative; display: grid; place-items: center; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 8px; background: var(--cabinet-elevated); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.pulse-wizard__tile-art img { width: 100%; height: 100%; object-fit: cover; }
.pulse-wizard__tile:hover .pulse-wizard__tile-art { transform: translateY(-2px); }
/* A cover is the action: on hover it says what the click does, as a lobby's play button would. */
.pulse-wizard__tile-art::after { content: attr(data-action); position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.55); color: #ffffff; font-size: 12px; font-weight: 600; opacity: 0; transition: opacity 0.15s ease; }
.pulse-wizard__tile:hover .pulse-wizard__tile-art::after, .pulse-wizard__tile:focus-visible .pulse-wizard__tile-art::after { opacity: 1; }
.pulse-wizard__tile:hover .pulse-wizard__tile-name, .pulse-wizard__tile:focus-visible .pulse-wizard__tile-name { opacity: 0; }
.pulse-wizard__tile:disabled { cursor: default; opacity: 0.6; }
.pulse-wizard__tile:focus-visible { outline: none; }
.pulse-wizard__tile:focus-visible .pulse-wizard__tile-art { box-shadow: var(--cabinet-focus-ring); }
.pulse-wizard__tile-name { padding: 8px; font-size: 13px; font-weight: 700; line-height: 15px; letter-spacing: 0.02em; text-transform: uppercase; text-align: center; color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); word-break: break-word; }
.pulse-wizard__tile .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 500; color: var(--cabinet-text); }
.pulse-wizard__tile .s { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--cabinet-text-tertiary); }
.pulse-wizard__more { display: block; margin: 0 12px 12px; }
/* One switch for the cabinet: the wizard's studios and a release's lobby toggle are the same control. */
.pulse-wizard__switch, .cabinet-switch { position: relative; flex: none; width: 36px; height: 20px; padding: 0; border: 0; border-radius: 999px; background: var(--cabinet-pill); cursor: pointer; transition: background-color 0.15s ease; }
.pulse-wizard__switch::after, .cabinet-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #ffffff; transition: transform 0.15s ease; }
.pulse-wizard__switch[aria-checked="true"], .cabinet-switch[aria-checked="true"] { background: var(--cabinet-accent); }
.pulse-wizard__switch[aria-checked="true"]::after, .cabinet-switch[aria-checked="true"]::after { transform: translateX(16px); }
.pulse-wizard__switch:disabled, .cabinet-switch:disabled { opacity: 0.55; cursor: not-allowed; }
.cabinet-switch:focus-visible { outline: none; box-shadow: var(--cabinet-focus-ring); }
.cabinet-release__lobby { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px 0 6px; border-radius: 9999px; background: rgba(9, 9, 10, 0.72); backdrop-filter: blur(6px); }
.cabinet-release__lobby .cabinet-switch { width: 30px; height: 17px; }
.cabinet-release__lobby .cabinet-switch::after { width: 13px; height: 13px; }
.cabinet-release__lobby .cabinet-switch[aria-checked="true"]::after { transform: translateX(13px); }
.cabinet-release__lobby-note { font-size: 12px; line-height: 16px; color: #d0d1d4; }
.cabinet-release__lobby-note.is-error { color: #ff9a9a; }
.pulse-wizard__icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--cabinet-text-tertiary); cursor: pointer; }
.pulse-wizard__icon:hover { background: var(--cabinet-row-hover); color: var(--cabinet-text); }
.pulse-wizard__option:focus-visible, .pulse-wizard__chip:focus-visible, .pulse-wizard__switch:focus-visible, .pulse-wizard__icon:focus-visible, .pulse-wizard__textbtn:focus-visible { outline: none; box-shadow: var(--cabinet-focus-ring); }
.pulse-wizard__game { overflow: hidden; border: 1px solid var(--cabinet-card-border); border-radius: 10px; background: #000000; }
.pulse-wizard__game-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 6px 12px; background: var(--cabinet-card-bg); font-size: 12.5px; color: var(--cabinet-text-tertiary); }
.pulse-wizard__game iframe { display: block; width: 100%; aspect-ratio: 16 / 10; border: 0; }
.pulse-wizard__copy { display: flex; align-items: flex-start; gap: 8px; padding: 6px 6px 6px 12px; border: 1px solid var(--cabinet-border-soft); border-radius: 8px; background: var(--cabinet-elevated); }
.pulse-wizard__copy code { flex: 1; min-width: 0; padding: 4px 0; background: none; color: var(--cabinet-text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.5; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) {
  .pulse-wizard__switch, .pulse-wizard__switch::after, .pulse-wizard__option { transition: none; }
  .cabinet-hero__glyph, .cabinet-error__glyph { animation: none; filter: drop-shadow(0 0 14px var(--cabinet-hero-glow-peak)); }
}
.pulse-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-top: 12px; }
.pulse-metric { padding: 10px 12px; border-radius: 8px; background: var(--cabinet-elevated); }
.pulse-metric__label { font-size: 11px; color: var(--cabinet-text-tertiary); }
.pulse-metric__value { font-size: 16px; font-weight: 550; color: var(--cabinet-text-strong); font-variant-numeric: tabular-nums; }

/* ── Billing (AGG-1028): the plan, the payment wallet, the invoices ── */
.billing-plan { display: flex; align-items: center; gap: 20px; }
.billing-plan__icon { width: 48px; height: 48px; border-radius: 12px; border: 0.5px solid var(--cabinet-card-border); background: var(--cabinet-card-bg); color: var(--cabinet-accent); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.billing-plan__body { flex: 1; min-width: 0; }
.billing-plan__line { margin: 6px 0 0; font-size: 13px; line-height: 18px; color: var(--cabinet-text); }
.billing-plan__value { font-weight: 550; font-variant-numeric: tabular-nums; }
.billing-plan__meta { margin: 6px 0 0; font-size: 13px; line-height: 18px; color: var(--cabinet-text-tertiary); }
.billing-section { margin: 0; }  /* the column's gap spaces the sections */
.billing-section__title { margin: 0 0 24px; font-size: 15px; font-weight: 550; line-height: 20px; color: var(--cabinet-text-strong); }
.billing-row { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.billing-row__icon { width: 32px; height: 32px; border-radius: 8px; background: var(--cabinet-nav-active); color: var(--cabinet-text); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.billing-row__body { flex: 1; min-width: 0; font-size: 13px; line-height: 18px; color: var(--cabinet-text); }
.billing-row__meta { font-size: 12px; color: var(--cabinet-text-tertiary); }
.billing-row__actions { display: flex; gap: 8px; flex-shrink: 0; }
.billing-invoices { width: 100%; border-collapse: collapse; font-size: 13px; }
.billing-invoices th { padding: 0 0 12px; text-align: left; font-size: 13px; font-weight: 500; color: var(--cabinet-text); border-bottom: 0.5px solid var(--cabinet-card-border); }
.billing-invoices td { padding: 13px 0; color: var(--cabinet-text); border-bottom: 0.5px solid var(--cabinet-card-border); vertical-align: middle; }
.billing-invoices tr:last-child td { border-bottom: 0; }
.billing-invoices .is-num { font-variant-numeric: tabular-nums; }
.billing-invoices__view { padding: 0; border: 0; background: none; color: var(--cabinet-accent); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.billing-empty { margin: 0; padding: 0; font-size: 13px; line-height: 18px; color: var(--cabinet-text-tertiary); }

/* ── Connect a wallet (AGG-1028): the provider picker ── */
.wallet-connect__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wallet-connect__option { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0.5px solid var(--cabinet-card-border); border-radius: 8px; background: var(--cabinet-card-bg); color: var(--cabinet-text); font: inherit; text-align: left; cursor: pointer; }
.wallet-connect__option:hover:not(:disabled) { border-color: var(--cabinet-text-placeholder); }
.wallet-connect__option:disabled { cursor: default; }
.wallet-connect__option[aria-disabled="true"] .wallet-connect__name, .wallet-connect__option[aria-disabled="true"] .wallet-connect__mark { opacity: .5; }
.wallet-connect__option.is-busy { border-color: var(--cabinet-accent); }
.wallet-connect__mark { width: 32px; height: 32px; border-radius: 8px; background: var(--cabinet-nav-active); color: var(--cabinet-text); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wallet-connect__mark.is-metamask { color: #f6851b; }
.wallet-connect__mark.is-coinbase { color: #1652f0; }
.wallet-connect__mark.is-walletconnect { color: #3b99fc; }
.wallet-connect__mark.is-phantom { color: #ab9ff2; }
.wallet-connect__mark.is-test { color: var(--cabinet-accent); }
.wallet-connect__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wallet-connect__name { font-size: 13px; font-weight: 500; color: var(--cabinet-text-strong); }
.wallet-connect__hint { font-size: 12px; line-height: 16px; color: var(--cabinet-text-tertiary); }
.wallet-connect__install { font-size: 12px; color: var(--cabinet-accent); text-decoration: none; }
.wallet-connect__install:hover { text-decoration: underline; }
.wallet-connect__error { margin: 12px 0 0; font-size: 12px; color: var(--cabinet-error-text); }
.wallet-connect__done { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px 0 4px; font-size: 13px; color: var(--cabinet-text); }
.wallet-connect__done-mark { width: 36px; height: 36px; border-radius: 50%; background: var(--cabinet-accent); color: var(--cabinet-text-on-accent); display: inline-flex; align-items: center; justify-content: center; }

/* ── Buy tokens (AGG-1028): Linear's anatomy — list rows with a check, a segmented switch, the one action bottom-right ── */
.purchase { display: flex; flex-direction: column; gap: 20px; padding: 4px 24px 24px; font-size: 13px; line-height: 18px; color: var(--cabinet-text); }
.purchase__open { display: flex; flex-direction: column; }
.purchase__row { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.purchase__row-label { flex: 1; min-width: 0; }
.purchase__row-label.is-muted { color: var(--cabinet-text-tertiary); }
.purchase__list { display: flex; flex-direction: column; gap: 4px; margin: 0 -10px; }
.purchase__option { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px; font: inherit; text-align: left; color: var(--cabinet-text); background: transparent; border: 0; border-radius: 8px; cursor: pointer; }
.purchase__option:hover { background: var(--cabinet-row-hover); }
.purchase__option[aria-checked="true"] { background: var(--cabinet-nav-active); color: var(--cabinet-text-strong); }
.purchase__option:focus-visible { outline: none; box-shadow: var(--cabinet-focus-ring); }
.purchase__check { width: 14px; flex-shrink: 0; display: inline-flex; color: var(--cabinet-text-strong); }
.purchase__option-label { flex: 1; min-width: 0; font-weight: 500; }
.purchase__option-tag { font-size: 11px; color: var(--cabinet-text-tertiary); }
.purchase__option-price { color: var(--cabinet-text-tertiary); font-variant-numeric: tabular-nums; }
.purchase__segmented { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--cabinet-row-hover); border: 0.5px solid var(--cabinet-card-border); }
.purchase__segmented button { height: 24px; padding: 0 10px; font: inherit; font-size: 12px; color: var(--cabinet-text-tertiary); background: transparent; border: 0; border-radius: 6px; cursor: pointer; }
.purchase__segmented button[aria-pressed="true"] { background: var(--cabinet-pill); color: var(--cabinet-text-strong); }
.purchase__segmented button:focus-visible { outline: none; box-shadow: var(--cabinet-focus-ring); }
.purchase__field { display: flex; flex-direction: column; gap: 8px; }
.purchase__label { font-size: 12px; line-height: 16px; color: var(--cabinet-text-tertiary); }
.purchase__value { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 8px 12px; background: var(--cabinet-card-bg); border: 0.5px solid var(--cabinet-card-border); border-radius: 8px; }
.purchase__value > code, .purchase__value > span { flex: 1; min-width: 0; word-break: break-all; font-variant-numeric: tabular-nums; }
.purchase__copy { flex-shrink: 0; display: inline-flex; padding: 0; border: 0; background: none; color: var(--cabinet-text-tertiary); cursor: pointer; }
.purchase__copy:hover { color: var(--cabinet-text); }
.purchase__input { width: 100%; height: 36px; padding: 0 12px; font: inherit; color: var(--cabinet-text); background: var(--cabinet-card-bg); border: 0.5px solid var(--cabinet-card-border); border-radius: 8px; outline: none; }
.purchase__input:focus { border-color: var(--cabinet-text-placeholder); }
.purchase__note { margin: 0; font-size: 12px; line-height: 16px; color: var(--cabinet-text-tertiary); }
.purchase__note.is-warning { color: var(--cabinet-warning-text); }
.purchase__note a, .purchase__consent a { color: var(--cabinet-text); text-decoration: underline; text-underline-offset: 3px; }
.purchase__error { margin: 0; font-size: 12px; line-height: 16px; color: var(--cabinet-error-text); }
.purchase__text { margin: 0; }
.purchase__footer { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.purchase__footer > .cabinet-btn--primary { margin-left: auto; flex-shrink: 0; }
.purchase__consent { margin: 0; font-size: 12px; line-height: 16px; color: var(--cabinet-text-tertiary); }

/* ── Usage (AGG-1028, founder 2026-09-16): the balance and its forecast, the tokens used, the packages and every
   notification. One goal — keep the casino taking rounds — and one action, buying tokens, in the purchase modal. ── */
.usage-page { display: flex; flex-direction: column; gap: 32px; }
.usage-balance { padding: 16px; border: 0.5px solid var(--cabinet-card-border); border-radius: 12px; background: var(--cabinet-card-bg); }
.usage-balance.is-skeleton { height: 132px; }
.usage-balance.is-low { border-color: color-mix(in srgb, var(--cabinet-warning) 45%, var(--cabinet-card-border)); }
.usage-balance.is-due, .usage-balance.is-stopped { border-color: var(--cabinet-error); background: color-mix(in srgb, var(--cabinet-error) 10%, var(--cabinet-card-bg)); }
.usage-balance__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 28px; font-size: 12px; font-weight: 500; color: var(--cabinet-text-tertiary); }
.usage-balance__badges { display: inline-flex; gap: 6px; }
.usage-balance__badge { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 9999px; background: var(--cabinet-nav-active); color: var(--cabinet-text); font-size: 11px; font-weight: 500; }
.usage-balance.is-low .usage-balance__badge.is-level { background: var(--cabinet-warning-subtle); color: var(--cabinet-warning-text); }
.usage-balance.is-due .usage-balance__badge.is-level, .usage-balance.is-stopped .usage-balance__badge.is-level { background: var(--cabinet-error-subtle); color: var(--cabinet-error-subtle-text); }
.usage-balance__cta { margin-left: auto; }
.usage-balance__title { margin: 6px 0 0; font-size: 20px; font-weight: 600; line-height: 26px; letter-spacing: -0.01em; color: var(--cabinet-text-strong); font-variant-numeric: tabular-nums; }
.usage-balance__runway { font-weight: 500; color: var(--cabinet-text-tertiary); }
.usage-balance__text { margin: 6px 0 0; font-size: 13px; line-height: 18px; color: var(--cabinet-text-secondary); }
.usage-balance__text.is-warning { color: var(--cabinet-warning-text); }
.usage-gauge { display: block; margin-top: 12px; overflow: visible; }
.usage-gauge__track, .usage-studio__track { fill: var(--cabinet-elevated-hover); }
.usage-gauge__fill { fill: var(--cabinet-accent); }
.usage-balance.is-low .usage-gauge__fill { fill: var(--cabinet-warning); }
.usage-balance.is-due .usage-gauge__fill, .usage-balance.is-stopped .usage-gauge__fill { fill: var(--cabinet-error); }
.usage-gauge__notch { stroke: var(--cabinet-panel-bg); stroke-width: 2; }
.usage-gauge__mark { stroke: var(--cabinet-text-strong); stroke-width: 2; }
.usage-failed { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--cabinet-text-secondary); }
.usage-failed p { margin: 0; }
.usage-section { display: flex; flex-direction: column; gap: 12px; }
.usage-section__head { display: flex; align-items: center; gap: 12px; }
.usage-section__head .purchase__segmented { margin-left: auto; }
.usage-section__title { margin: 0; font-size: 15px; font-weight: 550; line-height: 20px; color: var(--cabinet-text-strong); }
.usage-section__caption { margin: 8px 0 0; font-size: 13px; font-weight: 500; line-height: 16px; color: var(--cabinet-text-tertiary); }
.usage-section__lead { margin: 0; font-size: 13px; line-height: 18px; color: var(--cabinet-text-secondary); font-variant-numeric: tabular-nums; }
.usage-empty { margin: 0; font-size: 13px; line-height: 18px; color: var(--cabinet-text-tertiary); }
.usage-chart { height: 220px; }
.usage-studios, .usage-lots, .usage-rows { list-style: none; margin: 0; padding: 0; }
.usage-studio { display: grid; grid-template-columns: minmax(96px, 200px) minmax(0, 1fr) 88px; align-items: center; gap: 16px; min-height: 32px; font-size: 13px; color: var(--cabinet-text); }
.usage-studio__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usage-studio__bar { display: block; }
.usage-studio__fill { fill: var(--cabinet-text-tertiary); }
.usage-studio__value { text-align: right; color: var(--cabinet-text-tertiary); font-variant-numeric: tabular-nums; }
.usage-lot { display: grid; grid-template-columns: minmax(0, 1fr) auto 168px; align-items: center; gap: 24px; min-height: 40px; border-bottom: 0.5px solid var(--cabinet-hairline); font-size: 13px; color: var(--cabinet-text); font-variant-numeric: tabular-nums; }
.usage-lot__left, .usage-lot__expiry { color: var(--cabinet-text-tertiary); }
.usage-lot__expiry { text-align: right; }
.usage-lot__expiry.is-warning { color: var(--cabinet-warning-text); }
.usage-row { display: flex; align-items: center; gap: 12px; min-height: 56px; border-bottom: 0.5px solid var(--cabinet-hairline); }
.usage-lot:last-child, .usage-row:last-child { border-bottom: 0; }
.usage-row__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: var(--cabinet-nav-active); color: var(--cabinet-text); }
.usage-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-block: 8px; }
.usage-row__name { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; line-height: 18px; color: var(--cabinet-text-strong); }
.usage-row__meta { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 16px; color: var(--cabinet-text-tertiary); }
.usage-row__meta.is-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.usage-row__meta.is-ok { color: var(--cabinet-success-text); }
.usage-row__meta.is-warning { color: var(--cabinet-warning-text); }
.usage-row__meta.is-error { color: var(--cabinet-error-text); }
.usage-row__control { flex: none; display: flex; align-items: center; gap: 8px; }
.usage-row__unit { font-size: 12px; color: var(--cabinet-text-tertiary); }
.usage-row__badge { height: 18px; padding: 0 6px; border-radius: 9999px; background: var(--cabinet-nav-active); color: var(--cabinet-text-secondary); font-size: 11px; font-weight: 500; line-height: 18px; }
.usage-row.is-soon .usage-row__icon, .usage-row.is-soon .usage-row__name { color: var(--cabinet-text-tertiary); }
.usage-input { width: 112px; height: 28px; padding: 0 10px; border: 0.5px solid var(--cabinet-input-border); border-radius: 6px; background: var(--cabinet-input-bg); color: var(--cabinet-text); font: inherit; font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.usage-input.is-wide { width: min(320px, 100%); text-align: left; }
.usage-input::placeholder { color: var(--cabinet-text-placeholder); }
.usage-input:focus-visible { outline: none; box-shadow: var(--cabinet-input-focus); }
.usage-input:disabled { opacity: .6; }
@media (max-width: 640px) {
  .usage-balance__cta { flex-basis: 100%; margin-left: 0; order: 9; }
  .usage-studio { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .usage-studio__bar { grid-column: 1 / -1; grid-row: 2; }
  .usage-lot { grid-template-columns: minmax(0, 1fr) auto; }
  .usage-lot__expiry { grid-column: 1 / -1; text-align: left; }
  .usage-row { flex-wrap: wrap; padding-block: 10px; }
  .usage-row__control { flex-basis: 100%; padding-left: 44px; }
}
.settings-pointer { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }

/* ── Inbox: a studio's game release (AGG-1028, founder 2026-09-15) ── */
:root { --cabinet-on-image: #ffffff; --cabinet-on-image-soft: rgba(255, 255, 255, 0.76); --cabinet-image-scrim: rgba(9, 9, 10, 0.94); }
.cabinet-inbox__avatar--studio { border-radius: 8px; border: 0.5px solid var(--cabinet-card-border); background: var(--cabinet-card-bg); color: var(--cabinet-text-strong); font-size: 12px; font-weight: 550; }
.cabinet-inbox__avatar--studio img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.cabinet-release { width: 100%; max-width: 800px; margin: 0 auto; padding: 0 0 8px; box-sizing: border-box; }
.cabinet-release__hero { position: relative; display: flex; align-items: flex-end; height: 300px; margin: 24px 24px 0; border-radius: 12px; overflow: hidden; background: var(--cabinet-card-bg) center 28% / cover no-repeat; }
.cabinet-release__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9, 9, 10, 0) 30%, var(--cabinet-image-scrim) 100%); }
.cabinet-release__hero-text { position: relative; z-index: 1; padding: 24px 28px; }
/* Our own messages (the welcome, the invitation) wear the brand instead of key art: a deep green-lit gradient with
   the glyph resting in the corner (founder, 2026-09-16). */
.cabinet-release__hero--brand { background: radial-gradient(90% 120% at 15% 0%, color-mix(in srgb, var(--cabinet-accent) 30%, transparent), transparent 62%), linear-gradient(160deg, #142219 0%, #0b0c0d 100%); }
.cabinet-release__hero--brand::after { background: linear-gradient(180deg, rgba(9, 9, 10, 0) 45%, rgba(9, 9, 10, 0.55) 100%); }
.cabinet-release__brand-glyph { position: absolute; right: 28px; top: 50%; transform: translateY(-50%); color: rgba(255, 255, 255, 0.07); pointer-events: none; }
.cabinet-invite__steps { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; }
.cabinet-invite__step { display: grid; grid-template-columns: 24px minmax(0, 220px) 1fr; align-items: baseline; gap: 12px; padding: 10px 0; border-top: 0.5px solid var(--cabinet-hairline); font-size: 13px; line-height: 18px; }
.cabinet-invite__step:last-child { border-bottom: 0.5px solid var(--cabinet-hairline); }
.cabinet-invite__num { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--cabinet-text-placeholder); font-size: 11px; font-weight: 500; color: var(--cabinet-text-secondary); }
.cabinet-invite__name { font-weight: 550; color: var(--cabinet-text-strong); text-decoration: none; }
.cabinet-invite__name:hover { color: var(--cabinet-accent); }
.cabinet-invite__text { color: var(--cabinet-text); }
@media (max-width: 720px) { .cabinet-invite__step { grid-template-columns: 24px 1fr; } .cabinet-invite__text { grid-column: 2; } }
/* The controls on the art: each sits on its own scrim so it stays legible over any key art. */
.cabinet-release__hero-top { position: absolute; z-index: 2; top: 16px; left: 20px; right: 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cabinet-release__hero-btn { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 9999px; background: rgba(9, 9, 10, 0.72); color: #f7f8f8; font-size: 12px; font-weight: 500; text-decoration: none; backdrop-filter: blur(6px); }
.cabinet-release__hero-btn:hover { background: rgba(9, 9, 10, 0.86); }
.cabinet-release__hero-btn:focus-visible { outline: none; box-shadow: var(--cabinet-focus-ring); }
.cabinet-release__kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 12px; font-weight: 500; line-height: 16px; color: var(--cabinet-on-image-soft); }
.cabinet-release__name { margin: 0; font-size: 32px; font-weight: 600; line-height: 36px; letter-spacing: -0.02em; color: var(--cabinet-on-image); }
.cabinet-release__headline { margin: 6px 0 0; font-size: 15px; line-height: 22px; color: var(--cabinet-on-image-soft); }
.cabinet-release__body { padding: 24px 52px 0; }
.cabinet-release__sub { margin: 0 0 20px; font-size: 14px; line-height: 22px; color: var(--cabinet-text); }
.cabinet-release__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cabinet-release__actions .cabinet-btn svg { margin-left: 2px; }
.cabinet-release__link { margin-left: 4px; font-size: 13px; color: var(--cabinet-accent); text-decoration: none; }
.cabinet-release__link:hover { text-decoration: underline; }
.cabinet-release__note { margin: 12px 0 0; font-size: 12px; line-height: 16px; color: var(--cabinet-text-tertiary); }
.cabinet-release__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 28px 0 0; padding: 0; }
.cabinet-release__fact { margin: 0; padding: 12px 14px; border: 0.5px solid var(--cabinet-card-border); border-radius: 8px; background: var(--cabinet-card-bg); }
.cabinet-release__fact dt { font-size: 11px; font-weight: 500; line-height: 14px; color: var(--cabinet-text-tertiary); }
.cabinet-release__fact dd { margin: 4px 0 0; font-size: 15px; font-weight: 550; line-height: 20px; color: var(--cabinet-text-strong); font-variant-numeric: tabular-nums; }
.cabinet-release__lead { margin: 28px 0 0; font-size: 14px; line-height: 22px; color: var(--cabinet-text); }
/* In a studio's release the actions sit under the subheadline, which carries the gap; our own messages (the welcome,
   the invitation) close on a line and then the button, so the button keeps the same 20px from that line. */
.cabinet-release__lead + .cabinet-release__actions { margin-top: 20px; }
.cabinet-release__angle { margin: 12px 0 0; font-size: 14px; line-height: 22px; color: var(--cabinet-text); }
.cabinet-release__angle a { color: var(--cabinet-accent-text); text-decoration: none; }
.cabinet-release__angle a:hover { text-decoration: underline; }
.cabinet-release__h3 { margin: 28px 0 12px; font-size: 15px; font-weight: 550; line-height: 20px; color: var(--cabinet-text-strong); }
.cabinet-release__features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
.cabinet-release__features li { display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 18px; color: var(--cabinet-text); }
.cabinet-release__features strong { font-weight: 550; color: var(--cabinet-text-strong); }
.cabinet-release__buy { margin: 16px 0 0; font-size: 13px; line-height: 18px; color: var(--cabinet-text); }
.cabinet-release__closing { margin: 24px 0 0; font-size: 12px; line-height: 16px; color: var(--cabinet-text-tertiary); }
.cabinet-release__closing a { color: var(--cabinet-accent); text-decoration: none; }
.cabinet-release__closing a:hover { text-decoration: underline; }
/* the thread under the release: a messenger, its composer pinned to the pane's bottom edge */
.cabinet-thread { margin: 32px 52px 0; padding-top: 24px; border-top: 0.5px solid var(--cabinet-panel-border); }
.cabinet-thread .cabinet-release__h3 { margin-top: 0; margin-bottom: 4px; }
.cabinet-thread__hint { margin: 0; font-size: 13px; line-height: 18px; color: var(--cabinet-text-tertiary); }
.cabinet-thread__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.cabinet-thread__chip { height: 28px; padding: 0 12px; border: 0.5px solid var(--cabinet-card-border); border-radius: 9999px; background: var(--cabinet-card-bg); color: var(--cabinet-text); font: inherit; font-size: 12px; cursor: pointer; }
.cabinet-thread__chip:hover { background: var(--cabinet-elevated-hover); color: var(--cabinet-text-strong); }
.cabinet-thread__messages { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.cabinet-thread__msg { display: flex; align-items: flex-end; gap: 8px; }
.cabinet-thread__msg.is-user { justify-content: flex-end; }
.cabinet-thread__bubble { max-width: 78%; padding: 8px 12px; border: 0.5px solid var(--cabinet-card-border); border-radius: 12px; background: var(--cabinet-card-bg); color: var(--cabinet-text); font-size: 13px; line-height: 19px; word-break: break-word; }
.cabinet-thread__msg.is-user .cabinet-thread__bubble { border-color: transparent; border-bottom-right-radius: 4px; background: var(--cabinet-accent); color: var(--cabinet-text-on-accent); }
.cabinet-thread__msg.is-agent .cabinet-thread__bubble { border-bottom-left-radius: 4px; }
.cabinet-thread__bubble a { color: var(--cabinet-accent); }
.cabinet-thread__status { font-size: 11px; color: var(--cabinet-error-text); }
.cabinet-thread__typing { display: inline-flex; align-items: center; gap: 4px; min-height: 19px; }
.cabinet-thread__typing span { width: 5px; height: 5px; border-radius: 50%; background: var(--cabinet-text-tertiary); animation: cabinet-thread-dot 1s infinite ease-in-out; }
.cabinet-thread__typing span:nth-child(2) { animation-delay: 0.15s; }
.cabinet-thread__typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes cabinet-thread-dot { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } }
.cabinet-thread__error { margin: 8px 0 0; font-size: 12px; color: var(--cabinet-error-text); }
.cabinet-thread__composer { position: sticky; bottom: 0; display: flex; align-items: flex-end; gap: 8px; margin-top: 16px; padding: 12px 0 20px; background: var(--cabinet-panel-bg); }
.cabinet-thread__composer textarea { flex: 1; box-sizing: border-box; min-height: 36px; max-height: 120px; padding: 8px 12px; border: 0.5px solid var(--cabinet-input-border); border-radius: 10px; background: var(--cabinet-input-bg); color: var(--cabinet-text); font: inherit; font-size: 13px; line-height: 19px; resize: none; }
.cabinet-thread__composer textarea::placeholder { color: var(--cabinet-text-placeholder); }
.cabinet-thread__composer textarea:focus-visible { outline: none; box-shadow: var(--cabinet-focus-ring); }
.cabinet-thread__send { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: 10px; background: var(--cabinet-accent); color: var(--cabinet-text-on-accent); cursor: pointer; }
.cabinet-thread__send:disabled { opacity: 0.4; cursor: default; }
@media (max-width: 1023px) {
  .cabinet-release__hero { height: 220px; margin: 12px 12px 0; }
  .cabinet-release__body { padding: 20px 16px 0; }
  .cabinet-thread { margin: 24px 16px 0; }
  .cabinet-release__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cabinet-release__features { grid-template-columns: minmax(0, 1fr); }
}

/* Support attachments remain separate, compact download cards. */
.support-thread__attachments { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 12px 0 8px; }
.support-thread__file-card, .support-thread__pending li { display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: 340px; max-width: 100%; min-height: 68px; padding: 10px; border: 1px solid var(--cabinet-border-soft); border-radius: 14px; background: color-mix(in srgb, var(--cabinet-text) 5%, transparent); color: inherit; text-decoration: none; }
.support-thread__file-card:hover { background: color-mix(in srgb, var(--cabinet-text) 9%, transparent); }
.support-thread__file-card:focus-visible { outline: none; box-shadow: var(--cabinet-focus-ring); }
.support-thread__file-icon { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 10px; background: color-mix(in srgb, var(--cabinet-text) 6%, transparent); overflow: hidden; }
.support-thread__file-icon img { display: block; width: 44px; height: 44px; object-fit: cover; }
.support-thread__file-info { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 3px; }
.support-thread__file-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.support-thread__file-meta { font-size: 12px; line-height: 18px; opacity: .75; }
.support-thread__download { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb, var(--cabinet-text) 8%, transparent); }
.support-thread__pending { max-height: min(240px, 30dvh); overflow-y: auto; overscroll-behavior: contain; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 8px; margin: 0 0 8px; border-radius: 12px; background: var(--cabinet-elevated); }
.support-thread__pending .cabinet-icon-btn { flex: 0 0 44px; width: 44px; height: 44px; }
.support-thread__dock .cabinet-activity__composer { display: flex; flex-direction: column; align-items: stretch; gap: 0; border-radius: 14px; }
.support-thread__dock .cabinet-activity__composer textarea { min-width: 0; width: 100%; min-height: 64px; }
.support-thread__dock .cabinet-activity__composer-bar { gap: 8px; margin-top: 10px; }
.is-file-drop-target { box-shadow: inset 0 0 0 2px var(--cabinet-accent); background: color-mix(in srgb, var(--cabinet-accent) 5%, var(--cabinet-panel-bg)); }


.support-thread .cabinet-activity__when { display: block; margin-top: 6px; text-align: right; font-size: 11px; line-height: 16px; font-variant-numeric: tabular-nums; }

/* Day labels stay at their first message; pinned copies fade when scrolling rests. */
.support-thread__day { list-style: none; min-width: 0; }
.support-thread__day-label { position: sticky; top: 8px; z-index: 2; display: flex; justify-content: center; padding: 0 0 12px; pointer-events: none; transition: opacity 160ms ease; }
.support-thread__day-label > span { padding: 4px 12px; border-radius: 999px; background: var(--cabinet-elevated); color: var(--cabinet-text-secondary); font-size: 12px; line-height: 18px; box-shadow: 0 1px 4px #0002; }
.support-thread:not(.is-scrolling) .support-thread__day-label.is-floating { opacity: 0; }
.support-thread .support-thread__day-messages { margin: 0; padding: 0; }
@media (prefers-reduced-motion: reduce) { .support-thread__day-label { transition: none; } }

.cabinet-inbox__avatar--mia img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.support-request__closed { font-size: 11px; color: var(--cabinet-text-tertiary); margin-left: 6px; }