/* ══════════════════════════════════════════════════════════════════════
   CONTENT BUG · DESIGN SYSTEM v1 · FOUNDATION
   The ONE source of truth. Every studio page links this file.
   ══════════════════════════════════════════════════════════════════════

   THIS FILE IS THE FOUNDATION ONLY. It owns:
     • Fonts (family + scale + weights)
     • Spacing scale (--s-0 → --s-10)
     • Color tokens (--blue, --green, --gold, --red, --purple, --cyan, --orange)
     • Text/surface tokens (--txt, --glass, --stroke)
     • Glass tier system (--cb-glass-1 → --cb-glass-3 + .glass-1/-2/-3 utilities)
     • Background paint recipe (sticky · fixed · 4-layer wash on .bg-dark)
     • Dot grid overlay (.bg-grid)
     • Radii · shadows · motion easings + durations
     • Mobile breakpoint vars (--bp-mobile · --bp-tablet · --bp-desktop)
     • Base reset + 60fps performance rules + reduced-motion fallback
     • Canonical components shared everywhere: .cb-hero · .cb-page ·
       .cb-live-pill · .pill · .btn · .input · .card · .modal · .breadcrumb

   PAGE-LOCAL CSS / INLINE STYLES MUST CONSUME THE TOKENS, NOT INVENT.

     ✓ font: 500 var(--t-md)/1.45 var(--font-display);
     ✓ color: var(--blue);
     ✓ padding: var(--s-3) var(--s-4);
     ✓ background: var(--cb-glass-2);
     ✓ border-radius: var(--r-md);
     ✓ transition: transform var(--t-fast) var(--ease);

     ✗ font-family: 'SF Pro Display';            (use --font-display)
     ✗ color: #2997ff;                            (use --blue)
     ✗ padding: 12px 16px;                        (use --s-3 var(--s-4))
     ✗ background: rgba(255,255,255,.10);         (use --cb-glass-2)
     ✗ filter: blur(...);                         (banned · use shadows/opacity)
     ✗ animation transitioning width/height/top/left  (60fps mandates
                                                    transform + opacity only)

   ENFORCEMENT — what's permanently banned:
     • filter: blur(...) · backdrop-filter:blur(...) · -webkit-backdrop-filter:blur(...)
     • SVG <feGaussianBlur> · canvas/WebGL blur shaders
     • Animating width · height · top · left · margin · padding · max-height
     • Black solid fills as primary surfaces (use --cb-bg or glass tiers)
     • Per-page redefinition of any token in this file (override = drift)

   No black fills. No backdrop-filter. No blur. Ever.
   ══════════════════════════════════════════════════════════════════════ */

@font-face { font-family:'SF Pro Display'; src: url('fonts/sf-pro-display_medium.woff2') format('woff2');  font-weight:500; font-display:swap; }
@font-face { font-family:'SF Pro Display'; src: url('fonts/sf-pro-display_semibold.woff2') format('woff2');font-weight:600; font-display:swap; }
@font-face { font-family:'SF Pro Display'; src: url('fonts/sf-pro-display_bold.woff2') format('woff2');    font-weight:700; font-display:swap; }
@font-face { font-family:'SF Pro Text';    src: url('fonts/sf-pro-text_regular.woff2') format('woff2');   font-weight:400; font-display:swap; }
@font-face { font-family:'SF Pro Text';    src: url('fonts/sf-pro-text_semibold.woff2') format('woff2');  font-weight:600; font-display:swap; }

:root {
  /* ── Fonts ───────────────────────────────────────────── */
  --font-display: 'SF Pro Display', system-ui, -apple-system, sans-serif;
  --font-text:    'SF Pro Text',    system-ui, -apple-system, sans-serif;
  --font-mono:    'SF Mono', ui-monospace, 'Cascadia Mono', monospace;

  /* ── Brand colors ────────────────────────────────────── */
  --blue:       #2997ff;
  --blue-deep:  #1f8cf0;
  --blue-hi:    #3da5ff;
  --green:      #7ecba1;
  --green-dk:   #5faa82;
  --gold:       #f5a623;
  --orange:     #ff9f0a;
  --purple:     #bf5af2;
  --cyan:       #5ac8fa;
  --red:        #c0392b;

  /* ── Text + surfaces ─────────────────────────────────── */
  --txt:    rgba(255,255,255,.92);
  --txt-2:  rgba(255,255,255,.70);
  --txt-3:  rgba(255,255,255,.50);
  --txt-4:  rgba(255,255,255,.32);
  --glass:    rgba(255,255,255,.06);
  --glass-2:  rgba(255,255,255,.10);
  --glass-hi: rgba(255,255,255,.14);
  --stroke:   rgba(255,255,255,.12);
  --stroke-hi:rgba(255,255,255,.20);

  /* ── Backgrounds — locked recipe ─────────────────────── */
  --cb-bg: linear-gradient(180deg,
    #04305a 0%, #042e54 10%, #03284a 20%, #03223e 30%,
    #021c34 40%, #02172c 50%, #021224 60%, #020e1c 70%,
    #020a16 80%, #020710 90%, #02050e 100%);
  --cb-glass-1-bg: linear-gradient(180deg,
    rgba(255,255,255,.035) 0%, rgba(255,255,255,.045) 22%,
    rgba(255,255,255,.055) 40%, rgba(255,255,255,.070) 60%,
    rgba(255,255,255,.090) 75%, rgba(255,255,255,.110) 88%,
    rgba(255,255,255,.140) 100%);
  --cb-amber-horizon: linear-gradient(180deg,
    transparent 0%, transparent 72%,
    rgba(255,178,90,.02) 78%, rgba(255,178,90,.05) 85%,
    rgba(255,178,90,.10) 91%, rgba(255,178,90,.14) 96%,
    rgba(255,178,90,.19) 100%);

  /* ── Type scale ──────────────────────────────────────── */
  --t-5xl: clamp(40px, 5.5vw, 56px);
  --t-4xl: clamp(32px, 4.0vw, 40px);
  --t-3xl: clamp(26px, 3.0vw, 32px);
  --t-2xl: 24px;
  --t-xl:  20px;
  --t-lg:  17px;
  --t-md:  14px;
  --t-sm:  13px;
  --t-xs:  12px;
  --t-eyebrow: 11px;

  /* ── Spacing ─────────────────────────────────────────── */
  --s-0: 2px;  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;
  --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px;
  --s-8: 48px; --s-9: 64px; --s-10: 96px;

  /* ── Radii ───────────────────────────────────────────── */
  --r-xs: 4px;  --r-sm: 6px;  --r-md: 10px;
  --r-lg: 14px; --r-xl: 18px; --r-2xl: 24px; --r-pill: 99px;

  /* ── Shadows ─────────────────────────────────────────── */
  --sh-1: 0 1px 2px rgba(0,0,0,.18);
  --sh-2: 0 4px 12px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06);
  --sh-3: 0 12px 32px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08);
  --sh-glow: 0 0 22px rgba(41,151,255,.28), inset 0 1px 0 rgba(255,255,255,.16);

  /* ── Motion ──────────────────────────────────────────── */
  --ease:      cubic-bezier(.4, 0, .2, 1);
  --ease-snap: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 320ms;

  /* ── Breakpoints — Sean 2026-05-27 foundation lock ───── */
  --bp-mobile:   480px;
  --bp-tablet:   768px;
  --bp-desktop:  1024px;
  --bp-wide:     1440px;

  /* ── Glass tier surfaces — stacked glass layers ──────── */
  --cb-glass-1: linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.045) 60%, rgba(255,255,255,.06) 100%);
  --cb-glass-2: linear-gradient(180deg, rgba(255,255,255,.06)  0%, rgba(255,255,255,.04)  60%, rgba(255,255,255,.08) 100%);
  --cb-glass-3: linear-gradient(180deg, rgba(255,255,255,.10)  0%, rgba(255,255,255,.06)  60%, rgba(255,255,255,.12) 100%);
}

/* ── Glass tier utility classes ─────────────────────────────
   Use on any surface that needs to sit ON top of .bg-dark.
   Stack them: .glass-1 (faintest, outer container) →
   .glass-2 (mid card) → .glass-3 (interactive surface highlight).
   Borders + shadows pre-tuned. NEVER add backdrop-filter on top. */
.glass-1 {
  background: var(--cb-glass-1);
  border: 1px solid var(--stroke);
  border-top-color: var(--stroke-hi);
  border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), var(--sh-1);
}
.glass-2 {
  background: var(--cb-glass-2);
  border: 1px solid var(--stroke);
  border-top-color: var(--stroke-hi);
  border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), var(--sh-2);
}
.glass-3 {
  background: var(--cb-glass-3);
  border: 1px solid var(--stroke-hi);
  border-top-color: rgba(255,255,255,.30);
  border-radius: var(--r-md);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), var(--sh-2);
}

/* ── 60FPS PERFORMANCE BASELINE ─────────────────────────────
   Every studio surface MUST hit 60fps. The rules below are global
   enforcement. Specific components add their own will-change as needed. */

/* Pause every CSS animation when the tab is backgrounded — saves
   GPU + battery + prevents work piling up. */
@media (prefers-reduced-motion: no-preference) {
  body:not(.visible) *, html.docs-hidden body * {
    animation-play-state: paused !important;
  }
}

/* Hardware-accelerated layers on common animated surfaces. */
.cb-live-pill, .pill .dot, .btn, .switch span::after, .bar-fill,
.sidenav, .sidenav-row .lbl, .cb-heartbeat-dot {
  will-change: transform, opacity;
}

/* ── Hard rules: zero blur, never. ───────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html, body {
  margin: 0; padding: 0;
  min-height: 100vh;
  color: var(--txt);
  font: 400 var(--t-md)/1.55 var(--font-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
svg { shape-rendering: geometricPrecision; }

/* ── Canonical background ────────────────────────────────── */
.bg-dark {
  background:
    var(--cb-amber-horizon),
    var(--cb-glass-1-bg),
    var(--cb-glass-1-bg),
    var(--cb-bg) !important;
  background-attachment: fixed, fixed, fixed, fixed !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100vh !important;
}

/* Dot-grid variant (Workflow Builder canvas). Sits on top of .bg-dark. */
.bg-grid::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.5px);
  background-size: 24px 24px;
  background-position: 0 0;
}
.bg-grid > * { position: relative; z-index: 1; }

/* ── Type utilities ──────────────────────────────────────── */
.t-5xl { font: 500 var(--t-5xl)/1.05 var(--font-display); letter-spacing: -.025em; margin: 0; }
.t-4xl { font: 500 var(--t-4xl)/1.10 var(--font-display); letter-spacing: -.02em;  margin: 0; }
.t-3xl { font: 500 var(--t-3xl)/1.15 var(--font-display); letter-spacing: -.015em; margin: 0; }
.t-2xl { font: 500 var(--t-2xl)/1.20 var(--font-display); letter-spacing: -.01em;  margin: 0; }
.t-xl  { font: 500 var(--t-xl)/1.30  var(--font-display); margin: 0; }
.t-lg  { font: 400 var(--t-lg)/1.55  var(--font-text); margin: 0; }
.t-md  { font: 400 var(--t-md)/1.55  var(--font-text); margin: 0; }
.t-sm  { font: 400 var(--t-sm)/1.45  var(--font-text); margin: 0; }
.t-xs  { font: 500 var(--t-xs)/1.40  var(--font-text); margin: 0; }
.t-eyebrow { font: 500 var(--t-eyebrow)/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--txt-2); margin: 0; }
.t-mono { font: 400 var(--t-xs)/1.45 var(--font-mono); color: var(--txt-2); margin: 0; }
.muted  { color: var(--txt-2); margin: 0; font: 400 var(--t-md)/1.55 var(--font-text); }
.kicker { font: 500 var(--t-eyebrow)/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--txt-3); }
code, kbd { font: 500 var(--t-xs)/1 var(--font-mono); color: var(--txt); padding: 1px 6px; background: var(--glass); border: 1px solid var(--stroke); border-radius: var(--r-xs); }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: 36px; padding: 0 var(--s-4);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--glass-2) 0%, var(--glass) 100%);
  border: 1px solid var(--stroke); border-top-color: var(--stroke-hi);
  color: var(--txt); font: 500 var(--t-sm)/1 var(--font-display);
  letter-spacing: -.005em; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), var(--sh-1);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-1px); background: linear-gradient(180deg, var(--glass-hi) 0%, var(--glass-2) 100%); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-sm { height: 28px; padding: 0 var(--s-3); font-size: var(--t-xs); }
.btn-lg { height: 44px; padding: 0 var(--s-5); font-size: var(--t-lg); border-radius: var(--r-lg); }
.btn-icon { width: 36px; padding: 0; justify-content: center; }
.btn-primary {
  background: linear-gradient(180deg, var(--blue) 0%, var(--blue-deep) 100%);
  border-color: rgba(255,255,255,.22);
  box-shadow: var(--sh-glow);
}
.btn-primary:hover { background: linear-gradient(180deg, var(--blue-hi) 0%, var(--blue) 100%); }
.btn-success {
  background: linear-gradient(180deg, var(--green) 0%, var(--green-dk) 100%);
  border-color: rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 0 18px rgba(126,203,161,.30);
  color: #04305a;
}
.btn-danger {
  background: rgba(192,57,43,.18); border-color: rgba(192,57,43,.45); color: #ff8a7d;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 14px rgba(192,57,43,.20);
}
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--glass); border-color: var(--stroke); }

/* ── Pills ───────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 4px 10px; border-radius: var(--r-pill);
  font: 500 10.5px/1 var(--font-mono); letter-spacing: .06em;
  background: var(--glass); border: 1px solid var(--stroke); color: var(--txt-2);
}
.pill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 6px currentColor;
  animation: pulse 2s ease infinite;
  will-change: opacity, transform;
}
@keyframes pulse { 0%,100% { opacity:.55; transform:scale(1); } 50% { opacity:1; transform:scale(1.1); } }
.pill-success { background: rgba(126,203,161,.14); border-color: rgba(126,203,161,.36); color: var(--green); }
.pill-warn    { background: rgba(245,166,35,.14); border-color: rgba(245,166,35,.36); color: var(--gold); }
.pill-error   { background: rgba(192,57,43,.14); border-color: rgba(192,57,43,.36); color: #ff8a7d; }
.pill-info    { background: rgba(41,151,255,.14); border-color: rgba(41,151,255,.40); color: var(--blue); }
.pill-muted   { background: var(--glass); border-color: var(--stroke); color: var(--txt-2); }
.pill-blue    { background: rgba(41,151,255,.10); border-color: rgba(41,151,255,.32); color: var(--blue); }
.pill-purple  { background: rgba(191,90,242,.10); border-color: rgba(191,90,242,.32); color: var(--purple); }
.pill-gold    { background: rgba(245,166,35,.10); border-color: rgba(245,166,35,.32); color: var(--gold); }

/* ── Inputs ──────────────────────────────────────────────── */
.input, .textarea, .select {
  width: 100%; box-sizing: border-box;
  height: 36px; padding: 0 var(--s-3);
  background: var(--glass); border: 1px solid var(--stroke); border-top-color: var(--stroke-hi);
  border-radius: var(--r-md); color: var(--txt);
  font: 400 var(--t-sm)/1 var(--font-text); outline: none;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.textarea { height: auto; padding: var(--s-3); font-family: var(--font-text); line-height: 1.5; resize: vertical; min-height: 80px; }
.input.mono { font-family: var(--font-mono); }
.input:focus, .textarea:focus, .select:focus { border-color: var(--blue); background: var(--glass-2); }
.input::placeholder, .textarea::placeholder { color: var(--txt-3); }

.input-search {
  position: relative;
  display: flex; align-items: center;
  height: 36px; padding: 0 38px 0 36px;
  background: var(--glass); border: 1px solid var(--stroke);
  border-radius: var(--r-md);
}
.input-search > svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--txt-3); }
.input-search > input { flex: 1; border: 0; background: transparent; color: var(--txt); font: 400 var(--t-sm)/1 var(--font-text); outline: none; height: 100%; padding: 0; }
.input-search > kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }

.switch { display: inline-flex; align-items: center; gap: var(--s-2); cursor: pointer; font: 500 var(--t-sm)/1 var(--font-display); }
.switch input { position: absolute; opacity: 0; }
.switch span { position: relative; display: inline-block; width: 34px; height: 20px; border-radius: var(--r-pill); background: var(--glass); border: 1px solid var(--stroke); transition: background var(--t-fast) var(--ease); }
.switch span::after { content: ''; position: absolute; top: 1px; left: 1px; width: 16px; height: 16px; border-radius: 50%; background: var(--txt); transition: transform var(--t-fast) var(--ease-snap); will-change: transform; }
.switch input:checked + span { background: var(--blue); border-color: var(--blue); }
.switch input:checked + span::after { transform: translateX(14px); background: #fff; }

/* ── Cards ───────────────────────────────────────────────── */
.card {
  position: relative;
  padding: var(--s-6);
  background: linear-gradient(160deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.03) 40%, rgba(255,255,255,.06) 100%);
  border: 1px solid var(--stroke); border-top-color: var(--stroke-hi);
  border-radius: var(--r-2xl);
  box-shadow: var(--sh-2);
}
.card::before {
  content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35) 50%, transparent);
  pointer-events: none;
}
.card-stat { font: 500 var(--t-3xl)/1 var(--font-display); letter-spacing: -.02em; margin: var(--s-2) 0; }
.card-metric-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.card-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-4); }

/* ── Shelves ─────────────────────────────────────────────── */
.shelf {
  width: 240px; flex: 0 0 240px;
  padding: var(--s-4) var(--s-3);
  background: linear-gradient(180deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.12) 100%);
  border-right: 1px solid var(--stroke);
  display: flex; flex-direction: column; gap: var(--s-1);
}
.shelf-section { padding: var(--s-3) var(--s-3) var(--s-1); font: 500 var(--t-eyebrow)/1 var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--txt-3); }
.shelf-row {
  position: relative;
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-3); border-radius: var(--r-md);
  background: transparent; border: none;
  color: var(--txt-2); font: 500 var(--t-sm)/1 var(--font-display);
  cursor: pointer; text-align: left;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.shelf-row:hover { background: var(--glass); color: var(--txt); }
.shelf-row.active { background: var(--glass-2); color: var(--txt); }
.shelf-row.active::before { content: ''; position: absolute; left: -12px; top: var(--s-2); bottom: var(--s-2); width: 2px; background: var(--blue); border-radius: var(--r-sm); box-shadow: 0 0 8px var(--blue); }
.shelf-row .ico { width: 16px; height: 16px; flex: 0 0 16px; opacity: .8; }
.shelf-row.active .ico { opacity: 1; }

/* ── Widgets ─────────────────────────────────────────────── */
.bar-track { height: 6px; background: var(--glass); border-radius: var(--r-pill); overflow: hidden; }
.bar-fill  { height: 100%; background: linear-gradient(90deg, var(--blue), var(--cyan)); border-radius: var(--r-pill); transition: width var(--t-base) var(--ease-snap); }
.bar-meta  { display: flex; justify-content: space-between; margin-top: var(--s-2); font: 500 var(--t-xs)/1 var(--font-mono); color: var(--txt-2); }

.avatars { display: inline-flex; }
.av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 500 11px/1 var(--font-display); color: #fff; border: 2px solid var(--cb-bg, #04305a); margin-left: -8px; box-shadow: var(--sh-1); }
.av:first-child { margin-left: 0; }
.av-more { background: var(--glass-2); color: var(--txt-2); }

.breadcrumb { display: inline-flex; align-items: center; gap: var(--s-2); font: 500 var(--t-eyebrow)/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--txt-3); }
.breadcrumb .sep { color: var(--txt-4); }
.breadcrumb .cur { color: var(--txt); }

.tabs { display: inline-flex; padding: 4px; background: var(--glass); border-radius: var(--r-md); border: 1px solid var(--stroke); }
.tab { padding: 6px 12px; background: transparent; border: none; color: var(--txt-2); font: 500 var(--t-sm)/1 var(--font-display); border-radius: var(--r-sm); cursor: pointer; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.tab:hover { color: var(--txt); }
.tab.active { background: var(--glass-2); color: var(--txt); }

/* ── Modals ──────────────────────────────────────────────── */
.modal {
  width: 100%; max-width: 540px;
  background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 60%, rgba(255,255,255,.04) 100%);
  border: 1px solid var(--stroke); border-top-color: var(--stroke-hi);
  border-radius: var(--r-2xl);
  box-shadow: var(--sh-3);
}
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; padding: var(--s-5) var(--s-6); border-bottom: 1px solid var(--stroke); }
.modal-head h3 { margin: var(--s-1) 0 0; font: 500 var(--t-2xl)/1.2 var(--font-display); letter-spacing: -.01em; }
.btn-x { width: 32px; height: 32px; border-radius: var(--r-md); background: transparent; border: 1px solid transparent; color: var(--txt-2); font-size: 22px; line-height: 1; cursor: pointer; }
.btn-x:hover { background: var(--glass); color: var(--txt); border-color: var(--stroke); }
.modal-body { padding: var(--s-5) var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); }
.modal-foot { padding: var(--s-4) var(--s-6); display: flex; justify-content: flex-end; gap: var(--s-2); border-top: 1px solid var(--stroke); }
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field-label { font: 500 var(--t-eyebrow)/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--txt-3); }
.modal-static { display: flex; justify-content: center; padding: var(--s-6) 0; }

/* ── Demo-page layout (only used inside design-system.html) ─ */
.ds-hero { padding: var(--s-9) var(--s-7) var(--s-7); }
.ds-hero-inner { max-width: 920px; }
.ds-hero h1 { margin: var(--s-3) 0 var(--s-3); font: 500 var(--t-5xl)/1.05 var(--font-display); letter-spacing: -.025em; }
.ds-hero .lead { font: 400 var(--t-lg)/1.55 var(--font-text); color: var(--txt-2); max-width: 64ch; }
.ds-actions { display: flex; gap: var(--s-2); margin-top: var(--s-6); flex-wrap: wrap; }
.ds-toc { position: sticky; top: 0; z-index: 10; display: flex; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-3) var(--s-7); background: rgba(0,0,0,.30); border-top: 1px solid var(--stroke); border-bottom: 1px solid var(--stroke); font: 500 var(--t-xs)/1 var(--font-display); }
.ds-toc a { color: var(--txt-2); text-decoration: none; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.ds-toc a:hover { background: var(--glass); color: var(--txt); }
.ds-section { padding: var(--s-8) var(--s-7); border-bottom: 1px solid var(--stroke); }
.ds-section > h2 { font: 500 var(--t-3xl)/1.1 var(--font-display); letter-spacing: -.015em; margin: 0 0 var(--s-2); }
.ds-section > h3 { font: 500 var(--t-xl)/1.3 var(--font-display); margin: var(--s-6) 0 var(--s-3); }
.ds-section > p { max-width: 70ch; }
.ds-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--s-3); margin-top: var(--s-4); }
.ds-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.ds-input-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-3); margin-top: var(--s-4); max-width: 720px; }
.swatch { padding: var(--s-3); border-radius: var(--r-md); display: flex; flex-direction: column; justify-content: flex-end; min-height: 96px; box-shadow: var(--sh-2); border: 1px solid var(--stroke); }
.swatch.outline { background: var(--glass); }
.swatch em { font: 500 var(--t-xs)/1 var(--font-mono); color: rgba(0,0,0,.85); font-style: normal; }
.swatch.outline em { color: var(--txt); }
.swatch b { font: 500 var(--t-eyebrow)/1 var(--font-mono); color: rgba(0,0,0,.65); margin-top: 4px; }
.swatch.outline b { color: var(--txt-2); }
.type-stack { display: flex; flex-direction: column; gap: var(--s-4); margin-top: var(--s-4); }
.space-rows { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-4); }
.space-rows .row { display: flex; align-items: center; gap: var(--s-4); }
.space-rows b { width: 64px; font: 500 var(--t-xs)/1 var(--font-mono); color: var(--txt-2); }
.space-rows .bar { display: inline-block; height: 14px; background: linear-gradient(90deg, var(--blue), var(--cyan)); border-radius: var(--r-xs); }
.space-rows span:last-child { color: var(--txt-3); font: 500 var(--t-xs)/1 var(--font-mono); }
.radius-tile, .elev-tile { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 96px; background: var(--glass); border: 1px solid var(--stroke); }
.radius-tile em, .elev-tile em { font: 500 var(--t-xs)/1 var(--font-mono); color: var(--txt-2); font-style: normal; }
.radius-tile b, .elev-tile b { font: 500 var(--t-eyebrow)/1 var(--font-mono); color: var(--txt-3); margin-top: 4px; }
.motion-rules { list-style: none; padding: 0; margin: var(--s-4) 0; display: flex; flex-direction: column; gap: var(--s-2); }
.motion-rules li { padding: var(--s-3); background: var(--glass); border: 1px solid var(--stroke); border-radius: var(--r-md); font: 400 var(--t-sm)/1.5 var(--font-text); color: var(--txt-2); }
.motion-rules b { color: var(--txt); font-family: var(--font-mono); font-weight: 500; }
.motion-demo { margin-top: var(--s-4); display: flex; gap: var(--s-3); }

.ds-bg-demo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-top: var(--s-4); border-radius: var(--r-lg); overflow: hidden; min-height: 280px; }
.ds-bg-tile { position: relative; min-height: 280px; border: 1px solid var(--stroke); border-radius: var(--r-lg); display: flex; align-items: flex-end; padding: var(--s-4); }
.ds-bg-tile.bg-dark, .ds-bg-tile.bg-dark.bg-grid {
  background-attachment: local, local, local, local !important;
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100% !important;
}
.ds-bg-tile.bg-grid::before { position: absolute; }
.ds-bg-label { font: 500 var(--t-eyebrow)/1 var(--font-mono); letter-spacing: .12em; padding: var(--s-2) var(--s-3); background: rgba(0,0,0,.35); border-radius: var(--r-sm); color: var(--txt); }

.shelf-demo { display: flex; min-height: 320px; border: 1px solid var(--stroke); border-radius: var(--r-lg); overflow: hidden; margin-top: var(--s-4); }
.shelf-demo .shelf-canvas { flex: 1; padding: var(--s-6); }

.widget-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-4); margin-top: var(--s-4); }
.widget { padding: var(--s-5); background: linear-gradient(160deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 60%, rgba(255,255,255,.04) 100%); border: 1px solid var(--stroke); border-top-color: var(--stroke-hi); border-radius: var(--r-lg); display: flex; flex-direction: column; gap: var(--s-3); }

.ds-footer { padding: var(--s-7); text-align: center; }

/* ── Main Side Navigation ─────────────────────────────────
   Studio-wide rail. 60px collapsed by default, expands to 240px
   on hover (overlay, no reflow). Active row = left accent bar.
   60fps: transform/opacity only.                              */
.sidenav {
  width: 60px; flex: 0 0 60px;
  display: flex; flex-direction: column;
  padding: var(--s-3) var(--s-2);
  gap: var(--s-1);
  background: linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.18) 100%);
  border-right: 1px solid var(--stroke);
  transition: width var(--t-base) var(--ease-snap), flex-basis var(--t-base) var(--ease-snap);
  position: relative;
  overflow: hidden;
}
.sidenav:hover, .sidenav:focus-within { width: 240px; flex: 0 0 240px; overflow: visible; }
.sidenav.collapsed { width: 60px; flex: 0 0 60px; }
.sidenav.collapsed:hover { width: 60px; flex: 0 0 60px; } /* lock in demo */

.sidenav-brand {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--stroke);
  margin-bottom: var(--s-2);
}
.brand-mark {
  width: 32px; height: 32px; flex: 0 0 32px;
  border-radius: var(--r-md);
  background: linear-gradient(160deg, var(--blue) 0%, var(--blue-deep) 100%);
  display: grid; place-items: center;
  font: 600 11px/1 var(--font-display); color: #fff;
  box-shadow: var(--sh-glow);
}
.brand-text { display: flex; flex-direction: column; gap: 2px; opacity: 0; transition: opacity var(--t-fast) var(--ease); white-space: nowrap; }
.sidenav:hover .brand-text { opacity: 1; transition-delay: 80ms; }
.brand-text b { font: 500 var(--t-sm)/1 var(--font-display); color: var(--txt); }
.brand-text em { font: 500 var(--t-eyebrow)/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--txt-3); font-style: normal; }

.sidenav-section {
  padding: var(--s-3) var(--s-2) var(--s-1);
  font: 500 var(--t-eyebrow)/1 var(--font-display);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--txt-3); white-space: nowrap;
  opacity: 0; height: 0; overflow: hidden;
  transition: opacity var(--t-fast) var(--ease), height var(--t-fast) var(--ease);
}
.sidenav:hover .sidenav-section { opacity: 1; height: 22px; padding: var(--s-3) var(--s-2) var(--s-1); transition-delay: 80ms; }

.sidenav-row {
  position: relative;
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2); border-radius: var(--r-md);
  background: transparent; border: none;
  color: var(--txt-2); font: 500 var(--t-sm)/1 var(--font-display);
  cursor: pointer; text-align: left;
  white-space: nowrap; overflow: hidden;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.sidenav-row:hover { background: var(--glass); color: var(--txt); }
.sidenav-row.active { background: var(--glass-2); color: var(--txt); }
.sidenav-row.active::before { content: ''; position: absolute; left: -8px; top: var(--s-2); bottom: var(--s-2); width: 2px; background: var(--blue); border-radius: var(--r-sm); box-shadow: 0 0 8px var(--blue); }
.sidenav-row .ico { width: 16px; height: 16px; flex: 0 0 16px; opacity: .85; }
.sidenav-row.active .ico { opacity: 1; }
.sidenav-row .lbl { opacity: 0; transition: opacity var(--t-fast) var(--ease); }
.sidenav:hover .sidenav-row .lbl { opacity: 1; transition-delay: 80ms; }

.sidenav-spacer { flex: 1; }
.sidenav-foot {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2);
  border-top: 1px solid var(--stroke);
  margin-top: var(--s-2);
}
.av-foot { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; display: grid; place-items: center; font: 600 11px/1 var(--font-display); color: #fff; position: relative; }
.av-foot .presence { position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; border-radius: 50%; background: var(--green); border: 2px solid #04305a; box-shadow: 0 0 6px var(--green); }
.foot-id { display: flex; flex-direction: column; gap: 2px; opacity: 0; transition: opacity var(--t-fast) var(--ease); flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
.sidenav:hover .foot-id { opacity: 1; transition-delay: 80ms; }
.foot-id b { font: 500 var(--t-sm)/1 var(--font-display); color: var(--txt); }
.foot-id em { font: 500 var(--t-eyebrow)/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--blue); font-style: normal; }
.sidenav-foot .btn-icon { opacity: 0; transition: opacity var(--t-fast) var(--ease); }
.sidenav:hover .sidenav-foot .btn-icon { opacity: 1; transition-delay: 80ms; }

.sidenav-demo { display: flex; min-height: 360px; border: 1px solid var(--stroke); border-radius: var(--r-lg); overflow: visible; margin-top: var(--s-4); position: relative; }
.demo-note { padding: var(--s-4); flex: 1; align-self: center; }

/* ── Sub Navigation ───────────────────────────────────────── */
.subnav {
  width: 200px; flex: 0 0 200px;
  padding: var(--s-3) var(--s-2);
  background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.08) 100%);
  border-right: 1px solid var(--stroke);
  display: flex; flex-direction: column; gap: var(--s-1);
}
.subnav-head { padding: var(--s-2) var(--s-3) var(--s-4); border-bottom: 1px solid var(--stroke); margin-bottom: var(--s-2); }
.subnav-head h3 { margin: var(--s-1) 0 0; }
.subnav-section { padding: var(--s-4) var(--s-3) var(--s-1); font: 500 var(--t-eyebrow)/1 var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--txt-3); }
.subnav-row {
  position: relative;
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3); border-radius: var(--r-md);
  background: transparent; border: none;
  color: var(--txt-2); font: 500 var(--t-sm)/1 var(--font-display);
  cursor: pointer; text-align: left;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.subnav-row:hover { background: var(--glass); color: var(--txt); }
.subnav-row.active { background: var(--glass-2); color: var(--txt); }
.subnav-row.active::before { content: ''; position: absolute; left: -8px; top: var(--s-2); bottom: var(--s-2); width: 2px; background: var(--blue); border-radius: var(--r-sm); box-shadow: 0 0 8px var(--blue); }
.dot-sub { width: 6px; height: 6px; border-radius: 50%; background: var(--txt-3); flex: 0 0 6px; }
.subnav-row.active .dot-sub { background: var(--blue); box-shadow: 0 0 6px var(--blue); }

.subnav-demo { display: flex; min-height: 360px; border: 1px solid var(--stroke); border-radius: var(--r-lg); overflow: hidden; margin-top: var(--s-4); }
.subnav-canvas { flex: 1; padding: var(--s-6); }

/* ── Page Hero — Sean 2026-05-25 v3 SUPABASE-LEAN
   Slim row, no glass wrap, single-row alignment, hairline below.
   See body .cb-hero overrides at line 525+ for the full recipe. */
.page-hero {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  padding: 12px 24px;
  border-bottom: 1px solid var(--stroke);
}
.page-hero-l { display: inline-flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; min-width: 0; }
.page-hero-l h1 { font: 500 17.5px/1.2 var(--font-display); letter-spacing: -.005em; margin: 0; flex-shrink: 0; }
.page-hero-r { display: inline-flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.hero-demo { border: 1px solid var(--stroke); border-radius: var(--r-lg); overflow: hidden; margin-top: var(--s-4); }
.hero-demo .page-hero { padding: var(--s-5) var(--s-6); border-bottom: none; }

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   LEGACY ENFORCEMENT — Sean 2026-05-25
   ════════════════════════════════════════════════════════════════════
   The studio still has pages using the older .cb-hero / .cb-hero-l /
   .cb-hero-h1 / .cb-hero-eyebrow / .cb-hero-sub / .cb-hero-r class
   names from before this design system landed. Those classes had
   bespoke rules with !important in /studio/studio-shell/design-system.css
   (the OLD file) that would otherwise win the cascade.

   Force-alias them to this canonical .page-hero recipe with !important
   AND higher specificity (body .selector) so they win unconditionally,
   no matter the load order of stylesheets.

   This makes EVERY page that uses .cb-hero look identical to .page-hero
   — single hero recipe, single source of truth. */
/* Sean 2026-05-25 v3: SUPABASE-STYLE LEAN HERO. Reference: Supabase
   project dashboard. Slim row, no glass-card wrapping, hairline below.
   Title is the only emphasized element; eyebrow + sub are 1-line muted.
   Was: 24px/32px padding with a 30px+ h1. Now: 14px/24px padding,
   17.5px h1. Cuts hero block height ~50% across every studio page. */
/* ── .int-card — Integration card, matches canonical project-card recipe.
   Sean 2026-05-25: 'they should look just fucking like project cards.'
   16:9 thumb on top with the logo + status pill, body below with name /
   vendor / test button. Hover lifts -1px like .pc. */
.int-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 1440px) { .int-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1280px) { .int-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1024px) { .int-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px)  { .int-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Sean 2026-05-25 v2: ENTIRE card is 16:9 — same aspect-ratio as every
   project card in pipeline / framelab. Logo fills the background, title +
   metadata + actions overlay at the bottom over a gradient scrim. */
.int-card {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg, #0d1018 0%, #0a0d14 100%);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 12px 24px -12px rgba(0,0,0,.6);
  isolation: isolate;
  transition: transform 160ms cubic-bezier(.16,1,.3,1),
              box-shadow 160ms cubic-bezier(.16,1,.3,1);
  cursor: pointer;
}
.int-card:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 18px 32px -12px rgba(0,0,0,.7),
    0 0 0 1px rgba(255,255,255,.05);
}
.int-card::before {
  /* Specular top-edge gleam */
  content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  z-index: 4; pointer-events: none;
  background: linear-gradient(90deg, transparent,
    rgba(255,255,255,.30) 20%, rgba(255,255,255,.55) 50%,
    rgba(255,255,255,.30) 80%, transparent);
}
.int-thumb {
  /* Fills the entire card behind the body */
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 80% at 50% 40%, rgba(41,151,255,.10), transparent 60%),
    linear-gradient(180deg, #0e1320 0%, #060810 100%);
  display: grid; place-items: center;
}
.int-thumb-logo {
  width: 36%; height: 36%; display: grid; place-items: center;
  transition: transform 220ms cubic-bezier(.16,1,.3,1);
}
.int-card:hover .int-thumb-logo { transform: scale(1.04); }
.int-thumb-logo svg { width: 100%; height: 100%; max-width: 64px; max-height: 64px; }
.int-thumb-ini {
  font: 700 32px/1 var(--cb-font-display, var(--font-display));
  letter-spacing: -.02em;
  color: rgba(255,255,255,.20);
  user-select: none;
}
.int-thumb-pill {
  position: absolute; top: 10px; right: 10px; z-index: 3;
}
/* Bottom scrim — fade-to-black overlay so title + actions are legible */
.int-card .int-body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 24px 12px 10px;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.85) 100%);
  display: flex; flex-direction: column; gap: 2px;
}
.int-title {
  font: 600 12px/1.2 var(--cb-font-display, var(--font-display));
  color: #fff;
  letter-spacing: -.005em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.int-sub {
  font: 500 10px/1.2 var(--cb-font-mono, var(--font-mono));
  color: rgba(255,255,255,.65);
  letter-spacing: .02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.int-err {
  position: absolute; left: 10px; right: 10px; bottom: 36px; z-index: 3;
  font: 500 9px/1.3 var(--cb-font-mono, var(--font-mono));
  color: #ff8a7d;
  padding: 3px 6px;
  background: rgba(50,15,15,.85);
  border: 1px solid rgba(220,80,80,.40);
  border-radius: 5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.int-actions {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  display: flex; align-items: center; gap: 6px;
}
.int-btn {
  padding: 3px 8px; border-radius: 6px; cursor: pointer;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.18); color: #fff;
  font: 600 9px/1 var(--cb-font-display, var(--font-display));
  letter-spacing: .06em; text-transform: uppercase;
  backdrop-filter: none;
}
.int-btn:hover { background: rgba(41,151,255,.40); border-color: rgba(41,151,255,.60); }
.int-btn:disabled { opacity: .5; cursor: wait; }
.int-meta {
  font: 500 9px/1 var(--cb-font-mono, var(--font-mono));
  color: rgba(255,255,255,.55);
  letter-spacing: .04em;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

/* ── .cb-page — canonical page container, Sean 2026-05-25 ────────────
   Single rounded glass card every operator view + studio page renders
   inside. Fixes the chronic "content too wide / overflows / no padding"
   drift by enforcing one set of margins, one set of padding, one set of
   borders. Every page is a child of this container. Layout drift = zero. */
.cb-page {
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  /* Sean 2026-05-25 v5: Hero moved BACK above .cb-page (per Sean: 'put
     the header back above the body container under it'). So .cb-page is
     just the body card again — symmetric margin on every edge so all 4
     corners are visible inside the iframe, generous internal padding so
     content doesn't kiss the edges. */
  margin: 14px 14px 14px;
  padding: 24px 26px 26px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.025) 0%, rgba(255,255,255,.05) 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-top-color: rgba(255,255,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 4px 16px rgba(0,0,0,.20);
  box-sizing: border-box;
}
@media (max-width: 1024px) {
  .cb-page { margin: 10px; padding: 18px 20px 22px; }
}
/* Sean 2026-05-25 v5: hero is ABOVE .cb-page again — kept the rule for
   legacy pages that may still render hero inside, but the canonical
   layout is hero (thin row) → .cb-page below. */
.cb-page > .cb-hero { margin-bottom: 14px; }
/* Thin header row above the glass card. The operator hero already uses
   .cb-hero — this just locks horizontal padding so the breadcrumb +
   Online pill align with the card edges below. */
main > .cb-hero { padding: 10px 18px 8px; margin: 0; }

body .cb-hero {
  /* Sean 2026-05-25 v4: page-recipe — breadcrumb (eyebrow) stacks on top,
     h1 in middle, sub at bottom. Right side holds pills. Match the
     header → hero pattern every modern dashboard uses (Linear, Stripe,
     Vercel, Supabase). */
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: var(--s-4) !important;
  padding: 16px 24px 14px !important;       /* 16 top / 14 bottom — 4px grid */
  border-bottom: 1px solid var(--stroke) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  height: auto !important;
  min-height: 0 !important;
}
body .cb-hero::before { display: none !important; }
body .cb-hero > .cb-hero-l,
body .cb-hero > div:not(.cb-hero-r):not(.cb-hero-tabs):not(.cb-hero-actions):not(.cb-hero-toggle):not(.cb-hero-notif):not(.cb-hero-stat):first-child {
  display: flex !important;
  flex-direction: column !important;        /* stack: eyebrow → h1 → sub */
  align-items: flex-start !important;
  gap: 4px !important;                       /* tight vertical rhythm */
  max-width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 0 !important;
}
body .cb-hero-h1 {
  /* Sean 2026-05-25 type-scale audit: 17.5px / 17px were off the canonical
     ladder. Now uses --t-xl (20px) — matches Linear/Geist `text-heading-20`
     for dashboard headings + GitHub Primer `Display.Small`. */
  font: 500 var(--t-xl)/1.2 var(--font-display) !important;
  letter-spacing: -.005em !important;
  color: var(--txt) !important;
  margin: 0 !important;
  display: inline-flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap;
  flex-shrink: 0;
}
body .cb-hero-eyebrow {
  font: 500 var(--t-eyebrow)/1 var(--font-display) !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--txt-2) !important;
  margin: 0 !important;
  flex-shrink: 0;
}
body .cb-hero-sub {
  /* 13px (--t-sm). Now wraps naturally on its own row under the h1
     (no ellipsis, no nowrap) — one-line description below the title. */
  font: 400 var(--t-sm)/1.45 var(--font-text) !important;
  color: var(--txt-2) !important;
  margin: 0 !important;
  max-width: 88ch;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
body .cb-hero > .cb-hero-r {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--s-2) !important;
  flex-wrap: wrap !important;
  margin-left: 0 !important;
}

/* ── Spacing alias: forward the OLD dashless --s* vars to the new --s-*
      vars so any page still using `var(--s2)` etc. gets the canonical
      values from this system. (Old: s0=4,s1=8,s2=16,s3=20,s4=28,s5=40,s6=64.
      Mapping: s0→s-1, s1→s-2, s2→s-4, s3→s-5, s4→s-7, s5→s-8, s6→s-9.) */
:root {
  --s0: var(--s-1);  /* 4 */
  --s1: var(--s-2);  /* 8 */
  --s2: var(--s-4);  /* 16 */
  --s3: var(--s-5);  /* 20 */
  --s4: var(--s-7);  /* 32 */
  --s5: var(--s-8);  /* 48 */
  --s6: var(--s-9);  /* 64 */
}

/* ════════════════════════════════════════════════════════════════════
   ONE PAINT SOURCE — Sean 2026-05-25 (audit P1)
   ════════════════════════════════════════════════════════════════════
   Default every page's body to TRANSPARENT so when it's loaded inside
   the studio shell iframe stack, the shell's body bg paints through
   and we never get color seams. Pages that need to paint their own bg
   (standalone visits — login, design-system spec, welcome-trial) opt
   IN by adding class="bg-dark" to <body>. The .bg-dark rule above
   re-paints the 4-layer recipe when that class is present, winning
   the cascade via !important.

   Audit caught 56 pages with duplicate inline overrides of this rule
   (dated 2026-05-24). This single declaration replaces all of them. */
html, body {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}
body.bg-dark, html.bg-dark body {
  background:
    var(--cb-amber-horizon),
    var(--cb-glass-1-bg),
    var(--cb-glass-1-bg),
    var(--cb-bg) !important;
  background-attachment: fixed, fixed, fixed, fixed !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100vh !important;
  background-image: var(--cb-amber-horizon), var(--cb-glass-1-bg), var(--cb-glass-1-bg), var(--cb-bg) !important;
}

/* ════════════════════════════════════════════════════════════════════
   DUPLICATE HERO RECIPE ALIASES — Sean 2026-05-25 (audit §05)
   ════════════════════════════════════════════════════════════════════
   Pools (.pool-hero*), Records/Tables (.rec-hero*), and any other
   parallel hero rename live as no-op aliases for .cb-hero* so
   data-screen-label analytics keep working but the LAYOUT is locked
   to the canonical recipe. Class names persist; CSS rules don't.
   This makes the audit's "three hero recipes" collapse to one. */
/* Sean 2026-05-25 v3: lean Supabase-style — match canonical .cb-hero exactly. */
body .pool-hero, body .rec-hero {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--s-4) !important;
  padding: 12px 24px !important;
  border-bottom: 1px solid var(--stroke) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  height: auto !important;
  min-height: 0 !important;
}
body .pool-hero-l, body .rec-hero-l {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: var(--s-3) !important;
  flex-wrap: wrap !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
body .pool-hero-h1, body .rec-hero-h1 {
  font: 500 17.5px/1.2 var(--font-display) !important;
  letter-spacing: -.005em !important;
  color: var(--txt) !important;
  margin: 0 !important;
  flex-shrink: 0;
}
body .pool-hero-eb, body .rec-hero-eb {
  font: 500 var(--t-eyebrow)/1 var(--font-display) !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--txt-2) !important;
  margin: 0 !important;
  flex-shrink: 0;
}
body .pool-hero-sub, body .rec-hero-sub {
  font: 400 12.5px/1.4 var(--font-text) !important;
  color: var(--txt-2) !important;
  margin: 0 !important;
  max-width: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ════════════════════════════════════════════════════════════════════
   LIVE ACTIVITY PILL — Sean 2026-05-25 canonical
   ════════════════════════════════════════════════════════════════════
   The single, ONLY way to show 'something just happened' in the studio.
   iMessage-style pill that lives in every hero's right slot. Polls
   /api/os/events every ~10s; renders the latest event headline + a
   pulsing green dot + an unread badge. Click expands a popover with
   the recent event list. Admin/Owner only.

   Sizing matches the category-row labels (10.5px display font, .04em).
   Single row, no wrap, max ~32ch of headline truncated. Pill background
   is a soft amber tint when there are unread events (calls for attention
   without being alarming), green when all caught up.
   ════════════════════════════════════════════════════════════════════ */
.cb-live-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 11px 5px 9px; border-radius: 999px;
  font: 500 10.5px/1 var(--font-display); letter-spacing: .04em;
  color: rgba(255,255,255,.85);
  background: linear-gradient(180deg, rgba(22,30,46,.78) 0%, rgba(14,20,32,.78) 100%);
  border: 1px solid rgba(126,203,161,.32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  white-space: nowrap; max-width: 380px; min-width: 0;
  cursor: pointer; user-select: none;
  transition: border-color 120ms ease, transform 100ms ease, background 120ms ease;
}
.cb-live-pill:hover { border-color: rgba(126,203,161,.55); transform: translateY(-1px); }
.cb-live-pill[data-state="unread"] { border-color: rgba(245,166,35,.45); }
.cb-live-pill[data-state="empty"]  { border-color: rgba(255,255,255,.10); color: rgba(255,255,255,.55); }
.cb-live-pill-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #7ecba1; box-shadow: 0 0 6px #7ecba1;
  flex-shrink: 0; animation: cbLivePulse 2s ease-in-out infinite;
}
.cb-live-pill[data-state="unread"] .cb-live-pill-dot { background: #f5a623; box-shadow: 0 0 8px #f5a623; }
.cb-live-pill[data-state="empty"]  .cb-live-pill-dot { background: rgba(255,255,255,.3); box-shadow: none; animation: none; }
.cb-live-pill-text {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0; flex: 1;
}
.cb-live-pill-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 5px; border-radius: 999px;
  background: #f5a623; color: #1a0d00;
  font: 600 9.5px/1 var(--font-mono); letter-spacing: 0;
  flex-shrink: 0;
}
@keyframes cbLivePulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .55; transform: scale(.92); }
}

/* Popover that opens on click — list of recent events, owner/admin only */
.cb-live-popover {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 200;
  width: 340px; max-height: 420px; overflow: hidden;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(22,30,46,.98) 0%, rgba(14,20,32,.98) 100%);
  border: 1px solid rgba(255,255,255,.14); border-top-color: rgba(255,255,255,.22);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 48px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
}
.cb-live-popover-head {
  padding: 10px 14px; flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  display: flex; align-items: center; justify-content: space-between;
}
.cb-live-popover-title {
  font: 500 9.5px/1 var(--font-display); letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.55);
}
.cb-live-popover-list { flex: 1; overflow: auto; padding: 6px; }
.cb-live-popover-row {
  display: flex; flex-direction: column; gap: 3px;
  padding: 8px 10px; border-radius: var(--r-sm);
  border: 1px solid transparent; cursor: pointer;
  transition: background 120ms ease;
}
.cb-live-popover-row:hover { background: rgba(255,255,255,.04); }
.cb-live-popover-title-row {
  font: 500 12px/1.3 var(--font-display); color: #fff;
  display: flex; align-items: center; gap: 6px;
}
.cb-live-popover-meta {
  font: 400 10.5px/1.3 var(--font-mono); color: rgba(255,255,255,.5);
}
.cb-live-popover-empty {
  padding: 24px 14px; text-align: center;
  font: 400 12px/1.5 var(--font-text); color: rgba(255,255,255,.5);
}

/* ── Heartbeat dot (Sean 2026-05-25) ─────────────────────────────────
   Status pill in operator hero / studio shell wsStatus. Two-beat heart
   rhythm with expanding ring shadow. Only animates on success/online. */
@keyframes cb-heartbeat {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(52,199,89,.55); }
  30%  { transform: scale(1.20); box-shadow: 0 0 0 4px rgba(52,199,89,.20); }
  45%  { transform: scale(1);    box-shadow: 0 0 0 6px rgba(52,199,89,.08); }
  60%  { transform: scale(1.12); box-shadow: 0 0 0 8px rgba(52,199,89,.04); }
  100% { transform: scale(1);    box-shadow: 0 0 0 10px rgba(52,199,89,0);  }
}
.cb-heartbeat-dot {
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: #34c759;
}
.cb-online-pill[data-level="success"] .cb-heartbeat-dot,
.cb-online-pill[data-level="info"]    .cb-heartbeat-dot {
  animation: cb-heartbeat 1.4s ease-in-out infinite;
}
.cb-online-pill[data-level="warn"]    .cb-heartbeat-dot { background: #f5a623; animation: none; }
.cb-online-pill[data-level="error"]   .cb-heartbeat-dot { background: #ef4444; animation: none; }
.cb-online-pill[data-level="muted"]   .cb-heartbeat-dot { background: rgba(148,163,184,.7); animation: none; }