/* ── Clerk auth chrome + role-gating ─────────────────────────────────────
     Member role hides Admin-only affordances (brand lifecycle + styles/refs
     library edits). Strategy edits stay visible for Members. This is cosmetic
     defense-in-depth — the Worker/n8n backends are the real gate. */
  html[data-org-role="member"] .add-tile,
  html[data-org-role="member"] .tile-archive,
  html[data-org-role="member"] .admin-only { display: none !important; }
  /* The Control Center logo opens the admin-only all-brands picker — for a
     member it's inert branding (the click is also guarded in JS). */
  html[data-org-role="member"] #cc-home { cursor: default; pointer-events: none; }
  /* Brand assets (refs) library: Members SEE the thumbnails/labels but not the
     mutate controls (upload/replace/remove/used-in edit). Scoped to .asset-body
     so other .asset-btn usages elsewhere are unaffected. */
  html[data-org-role="member"] .asset-body .asset-btn,
  html[data-org-role="member"] .asset-body .asset-x,
  html[data-org-role="member"] .asset-body .asset-chip,
  html[data-org-role="member"] .asset-body .asset-confirm { display: none !important; }
  html[data-org-role="member"] .asset-body .asset-usedin { pointer-events: none; }
  /* Brand Styles library: Members can still SELECT a style for a render (content
     op), but not create/edit/delete presets. Hide the "+ New style" card and the
     per-card edit/delete kebab menu. */
  html[data-org-role="member"] .pv-ai-style-card--add,
  html[data-org-role="member"] .pv-ai-style-card-menu { display: none !important; }

  /* No-workspace (pending) panel shown in the login card for signed-in users
     who aren't in any org yet. */
  .clerk-noaccess { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; max-width: 360px; }
  .clerk-noaccess-title { font-family: 'Inter Tight', sans-serif; font-size: 20px; font-weight: 600; color: #131316; }
  .clerk-noaccess-body { font-size: 13.5px; line-height: 1.55; color: #5b5b66; }
  .clerk-noaccess .btn-ghost { margin-top: 8px; color: #131316; border: 1px solid rgba(0,0,0,0.14); padding: 8px 18px; border-radius: 8px; }
  .clerk-noaccess .btn-ghost:hover { background: rgba(0,0,0,0.04); }

  /* Clerk UserProfile modal → titles match the app's page-title size.
     "Profile details" = .cl-headerTitle. "Account" is an <h1> in the navbar with
     no stable class of its own (only cl-internal-*), so scope it via the stable
     .cl-navbar ancestor. Section titles (Profile / Email addresses / …) are
     intentionally left alone. */
  .cl-headerTitle,
  .cl-navbar h1 {
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
  }

  /* Login surface: the old .login-card chrome is removed — make it a plain
     transparent centering wrapper so ONLY Clerk's own card renders (no second
     card behind it). A small brand mark sits above Clerk's card. */
  #login .login-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: auto !important;
    display: flex; flex-direction: column; align-items: center; gap: 48px;
  }
  #login .login-brandmark {
    display: flex; align-items: center; justify-content: center;
  }
  #login .login-brandmark img { height: 30px; width: auto; display: block; }

  /* Org (client) switcher section label inside the brand popover. */
  .popover-section-label {
    font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-dim, #6e7080); padding: 8px 12px 4px; font-weight: 600;
  }
  .popover-item.is-active { font-weight: 600; }



@font-face {
  font-family: 'Venus Rising';
  src: url('assets/fonts/VenusRisingLt-Regular.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Venus Rising';
  src: url('assets/fonts/VenusRisingLt-Italic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Venus Rising';
  src: url('assets/fonts/VenusRisingRg-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Venus Rising';
  src: url('assets/fonts/VenusRisingRg-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Venus Rising';
  src: url('assets/fonts/VenusRisingRg-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Venus Rising';
  src: url('assets/fonts/VenusRisingRg-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
:root {
  /* ── Layering scale (Phase 5) — single source of truth for stacking.
     dropdown < modal < toast < splash. Structural chrome (appbar, rail,
     tooltips, bulk-bar) keeps its own local z-index and is intentionally
     NOT remapped. ── */
  --z-dropdown: 100;
  --z-modal: 500;
  --z-toast: 600;
  --z-splash: 900;
  --bg: #0A0A0A;
  --bg-elev: #111111;
  --bg-elev-2: #161616;
  --bg-overlay: #1c1c1c;
  --border: rgba(255,255,255,0.06);
  --border-strong: rgba(255,255,255,0.12);
  --text: #FFFFFF;
  --text-2: #c8c8c8;
  --text-muted: #9a9a9a;
  --text-dim: #7a7a7a;
  --accent: #FF3D00;
  --accent-hover: #FF5820;
  --accent-2: #FF9900;
  --success: #00C853;
  --warn: #FFB800;
  --danger: #ff3030;
  /* Semantic taxonomy tokens — used by chips/pills to give each axis
     (pillar, audience, format, status) its own readable hue on dark. */
  --pillar: #6FB8F0;
  --pillar-bg: rgba(111,184,240,0.08);
  --pillar-border: rgba(111,184,240,0.32);
  --audience: #B98AE8;
  --audience-bg: rgba(185,138,232,0.08);
  --audience-border: rgba(185,138,232,0.32);
  --format: #5BD6B5;
  --format-bg: rgba(91,214,181,0.08);
  --format-border: rgba(91,214,181,0.32);
  --status-pending: var(--warn);
  --status-pending-bg: rgba(255,184,0,0.06);
  --status-changes: #ff7a6a;
  --status-changes-bg: rgba(255,122,106,0.06);
  --status-approved: var(--success);
  --status-approved-bg: rgba(0,200,83,0.06);
  --grid-line: rgba(255,255,255,0.04);
  --radius: 10px;
  --radius-2: 14px;
  --t: 0.18s ease;
}

/* =================================================================
   LIGHT THEME — applied via :root[data-theme="light"]. Higher
   specificity than both :root and the brand-injected :root block,
   so theme wins for surfaces while brand --accent stays untouched.
   ================================================================= */
:root[data-theme="light"] {
  --bg:           #F4F5F7;
  --bg-elev:      #FFFFFF;
  --bg-elev-2:    #FBFBFC;
  --bg-overlay:   #EDEEF1;
  --border:       rgba(10,10,12,0.08);
  --border-strong:rgba(10,10,12,0.16);
  --text:         #0A0A0C;
  --text-2:       #38383C;
  --text-muted:   #6B6B70;
  --text-dim:     #92929A;
  /* Status pill backgrounds need lower alpha on light surfaces. */
  --pillar-bg:    rgba(20,90,180,0.08);
  --pillar-border:rgba(20,90,180,0.22);
  --pillar:       #1F62C8;
  --audience-bg:  rgba(120,68,200,0.08);
  --audience-border:rgba(120,68,200,0.22);
  --audience:     #7748C8;
  --format-bg:    rgba(20,140,110,0.08);
  --format-border:rgba(20,140,110,0.22);
  --format:       #1A8E6E;
  --status-pending-bg: rgba(200,140,0,0.10);
  --status-changes-bg: rgba(200,70,55,0.08);
  --status-approved-bg:rgba(0,160,70,0.10);
  --grid-line:    rgba(10,10,12,0.05);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--text); }
body {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "tnum" 1;
  min-height: 100vh;
}
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, textarea, select { font-family: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

/* ===== Boot splash ===== */
#splash {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 24px;
  transition: opacity 320ms ease;
}
#splash.fade-out { opacity: 0; pointer-events: none; }
.splash-mark {
  width: 88px; aspect-ratio: 118 / 36;
  background: url("variants/nueform-logo.svg") center / contain no-repeat;
  animation: splash-pulse 1.6s ease-in-out infinite;
}
@keyframes splash-pulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}
.splash-copy {
  font-family: var(--display); font-size: 15px;
  color: var(--text-muted); text-align: center;
  letter-spacing: -0.01em; max-width: 340px; line-height: 1.5;
  min-height: 1.5em;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.splash-copy.ll-out { opacity: 0; transform: translateY(-5px); }
.splash-copy.ll-in  { opacity: 0; transform: translateY(5px); }

/* ===== Top progress bar ===== */
#progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: var(--accent);
  z-index: 9999; transition: width 0.2s ease;
  box-shadow: 0 0 12px rgba(255,61,0,0.5);
}
#progress.active { width: 90%; transition: width 6s ease-out; }
#progress.done { width: 100%; transition: width 0.2s ease; }

/* The hidden attribute must always win over display rules */
[hidden] { display: none !important; }

/* ===== Login ===== */
#login {
  position: fixed; inset: 0;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
}
#login::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}
.login-card {
  position: relative;
  width: 420px;
  padding: 56px 48px 48px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
}
.login-logo svg { display: block; height: 22px; margin-bottom: 56px; }
.login-eyebrow {
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.login-title {
  font-family: 'Inter Tight', sans-serif;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin-bottom: 36px;
}
.login-form { display: flex; flex-direction: column; gap: 12px; }
.input {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  padding: 14px 16px;
  color: var(--text);
  font-size: 14px;
  outline: none;
  transition: border-color var(--t);
  border-radius: var(--radius);
}
.input:focus { border-color: var(--accent); }
.btn-primary {
  background: var(--accent);
  color: #fff;
  padding: 14px 20px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--radius);
  transition: background var(--t);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-secondary {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 12px 18px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius);
  transition: border-color var(--t), color var(--t);
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
.btn-ghost {
  color: var(--text-muted);
  font-family: 'Inter Tight', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 8px 12px;
  transition: color var(--t);
}
.btn-ghost:hover { color: var(--text); }

.error {
  color: var(--danger);
  font-size: 12px;
  margin-top: 8px;
  min-height: 18px;
}

/* ===== App shell ===== */
#app[hidden] { display: none; }
header.appbar {
  position: sticky; top: 0;
  display: flex; align-items: center; gap: 32px;
  padding: 16px 32px;
  background: rgba(10,10,10,0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  z-index: 100;
}
.appbar .logo svg { display: block; height: 18px; }
.appbar .brand {
  font-family: 'Inter Tight', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-left: 1px solid var(--border-strong);
  padding-left: 32px;
}
.appbar .tabs { display: flex; gap: 4px; margin-left: auto; margin-right: auto; }
.tab-group { display: contents; }
.tab-group-title {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 14px 12px 4px;
}
.tab-group:first-child .tab-group-title { padding-top: 4px; }
/* In-group subdivider (sources vs workspace inside PLAN). Base skin lays
   groups out horizontally → a short vertical rule; the clerk sidebar
   restyles it into a full-width hairline matching the section breaks. */
.tab-subdivider {
  width: 1px;
  align-self: center;
  height: 18px;
  background: var(--border);
  margin: 0 4px;
}
.appbar .tab {
  padding: 10px 18px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  border-radius: var(--radius);
  transition: color var(--t), background var(--t);
  display: inline-flex; align-items: center; gap: 8px;
}
.appbar .tab:hover { color: var(--text); }
.appbar .tab.active {
  color: var(--accent);
  background: transparent;
  box-shadow:
    inset 3px 0 0 var(--accent),         /* left-edge accent stripe */
    0 0 18px -2px rgba(255, 61, 0, 0.30); /* soft outer glow */
}
.appbar .tab.active .tab-icon { color: var(--accent); }
.appbar .tab .tab-count {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 10px; letter-spacing: 0.04em;
  color: var(--text-dim);
  font-feature-settings: "tnum" 1;
  transition: color var(--t);
  min-width: 1ch;
}
.appbar .tab.active .tab-count { color: var(--text-2); }
.appbar .tab .tab-count[data-empty="true"] { display: none; }
.appbar .tab .tab-dot {
  display: none;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 60%, transparent);
}
.appbar .tab .tab-dot[data-active="true"] { display: inline-block; }
/* "New since last visit" indicator. Sits next to the count without
   replacing it. Glows softly so it's noticed but not aggressive. */
.appbar .tab .tab-new {
  display: none;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 60%, transparent);
  animation: tab-new-pulse 2.4s ease-in-out infinite;
}
.appbar .tab .tab-new[data-new="true"] { display: inline-block; }
@keyframes tab-new-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* Coming-soon tab — dimmed, non-interactive, sits in the rail as a
   roadmap hint rather than a destination. Hover/active states are
   suppressed; the small "Soon" pill carries the affordance. */
.appbar .tab.tab--soon {
  opacity: 0.55;
  cursor: default;
}
.appbar .tab.tab--soon:hover,
.appbar .tab.tab--soon:focus,
.appbar .tab.tab--soon:active {
  background: transparent !important;
  color: inherit !important;
  border-color: transparent !important;
  transform: none !important;
}
.appbar .tab .tab-soon-pill {
  margin-left: auto;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(125, 125, 135, 0.14);
  color: var(--text-muted);
  line-height: 1.4;
}
[data-skin="clerk"] .appbar .tab .tab-soon-pill {
  background: #f0f0f2 !important;
  color: #6e7080 !important;
}
[data-skin="clerk"][data-theme="dark"] .appbar .tab .tab-soon-pill {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #9394a1 !important;
}

/* Workshop header now shows a small "last edited" line under the title.
   Uses the asset's Notion last_edited_time when available. */
.ws-header .ws-stamp {
  margin-top: 8px;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 12px; letter-spacing: 0.04em;
  color: var(--text-muted);
}
.ws-header .ws-stamp .ws-stamp-edited { color: var(--text-2); }
.appbar .util { display: flex; gap: 8px; align-items: center; }
.appbar .util .util-divider { width: 1px; height: 18px; background: var(--border-strong); align-self: center; }

/* Theme toggle — icon-only square button between cmdk-trigger and the
   user-menu. Crossfades sun/moon based on :root[data-theme] state so
   the active icon shows "what you'll switch TO" (moon when in light,
   sun when in dark). */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--text-muted);
  transition: color var(--t), border-color var(--t), background var(--t);
  position: relative;
}
.theme-toggle:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--bg-elev-2);
}
.theme-toggle .theme-icon {
  position: absolute;
  transition: opacity var(--t), transform var(--t);
}
:root[data-theme="light"] .theme-toggle .theme-icon--moon { opacity: 1; transform: rotate(0); }
:root[data-theme="light"] .theme-toggle .theme-icon--sun  { opacity: 0; transform: rotate(40deg); }
.theme-toggle .theme-icon--moon { opacity: 0; transform: rotate(-40deg); }
.theme-toggle .theme-icon--sun  { opacity: 1; transform: rotate(0); }

/* Search trigger in the workspace appbar — looks like an input, behaves
   like a button. Clicking opens the same ⌘+K palette. The kbd hint
   teaches the keyboard shortcut on first sight. */
.appbar .search-trigger {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 10px 7px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--text-muted);
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  min-width: 200px;
  transition: color var(--t), border-color var(--t), background var(--t);
}
.appbar .search-trigger:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--bg-elev-2);
}
.appbar .search-trigger svg { display: block; flex-shrink: 0; }
.appbar .search-trigger .search-label {
  flex: 1; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.appbar .search-trigger kbd {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.06em;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  padding: 2px 6px;
  color: var(--text-2);
  flex-shrink: 0;
}

main { padding: 48px 32px 96px; max-width: 1480px; margin: 0 auto; }

/* ===== Generic layout helpers ===== */
.eyebrow {
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex; align-items: center; gap: 12px;
}
.btn-back-library {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 0.15s ease;
}
.btn-back-library:hover { color: var(--text); }
.eyebrow::before {
  content: ""; width: 24px; height: 2px; background: var(--accent);
}
.h1 {
  font-family: 'Inter Tight', sans-serif;
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-top: 12px;
}
.h2 {
  font-family: 'Inter Tight', sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.muted { color: var(--text-muted); }
.divider { height: 1px; background: var(--border); margin: 48px 0; }

/* ===== Page header pattern ===== */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 40px; gap: 24px; flex-wrap: wrap; }
.page-head .lhs { max-width: 720px; }
.page-head .lead {
  margin-top: 16px;
  font-size: 16px;
  color: var(--text-2);
  max-width: 580px;
  line-height: 1.55;
}
.page-head .rhs { display: flex; gap: 12px; align-items: center; }

/* ===== Strategy tab ===== */
/* Sectioned strategy grid: each section has a label + blurb header followed
   by its own 2-column grid of cells. Cell internals are unchanged so all
   existing edit/save logic keeps working. */
/* Strategy sub-tabs — pill segmented control routed to from the brand pill
   popover. Each tab corresponds to one of three sections rendered into
   #strategy-grid. The active tab matches #strategy-grid's data-active-section
   attribute, and CSS below hides non-matching sections. */
.strategy-subtabs {
  display: flex; gap: 8px;
  margin-bottom: 0;
  flex-wrap: wrap;
}
.strategy-subtab {
  background: var(--bg-elev-2, #f7f7f8);
  border: 1px solid var(--border, #eeeef0);
  color: var(--text-muted, #5e5f6e);
  padding: 8px 14px;
  border-radius: 8px;
  font: 500 13px/1 'Manrope', system-ui, sans-serif;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.strategy-subtab:hover {
  color: var(--text, #131316);
  border-color: var(--text-muted, #9394a1);
}
.strategy-subtab.is-active {
  background: var(--text, #131316);
  color: var(--bg, #ffffff);
  border-color: var(--text, #131316);
}
/* Show only the section matching the grid's active-section attribute. */
#strategy-grid[data-active-section="brand"] .strategy-section[data-strategy-section]:not([data-strategy-section="brand"]) { display: none; }
#strategy-grid[data-active-section="voice"] .strategy-section[data-strategy-section]:not([data-strategy-section="voice"]) { display: none; }
#strategy-grid[data-active-section="memory"] .strategy-section[data-strategy-section]:not([data-strategy-section="memory"]) { display: none; }
#strategy-grid[data-active-section="visual"] .strategy-section[data-strategy-section]:not([data-strategy-section="visual"]) { display: none; }
#strategy-grid[data-active-section="setup"] .strategy-section[data-strategy-section]:not([data-strategy-section="setup"]) { display: none; }
#strategy-grid[data-active-section="settings"] .strategy-section[data-strategy-section]:not([data-strategy-section="settings"]) { display: none; }
#strategy-grid[data-active-section="founders"] .strategy-section[data-strategy-section]:not([data-strategy-section="founders"]) { display: none; }
#strategy-grid[data-active-section="connect"] .strategy-section[data-strategy-section]:not([data-strategy-section="connect"]) { display: none; }
#strategy-grid[data-active-section="material"] .strategy-section[data-strategy-section]:not([data-strategy-section="material"]) { display: none; }
#strategy-grid[data-active-section="news"] .strategy-section[data-strategy-section]:not([data-strategy-section="news"]) { display: none; }
#strategy-grid[data-active-section="intake"] .strategy-section[data-strategy-section]:not([data-strategy-section="intake"]) { display: none; }

/* Founders sub-tab — member-editable list of per-founder substrate cards.
   Facts about each founder (identity, voice, off-limits); never publishable
   copy. Member-visible/editable (no data-org-role hide, unlike Memory). */
.founders-stack { display: flex; flex-direction: column; gap: 12px; }
.founder-card { border: 1px solid var(--border, #e3e3e6); border-radius: 12px; overflow: hidden; }
.founder-head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; }
.founder-toggle { border: none; background: none; cursor: pointer; font-size: 13px; color: var(--text, #131316); opacity: 0.6; padding: 0 2px; line-height: 1; }
.founder-name { font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 13.5px; line-height: 1.25; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; flex: 1 1 auto; min-width: 0; color: var(--text, #131316); }
.founder-role { font-weight: 400; font-size: 11px; opacity: 0.6; }
.founder-status { font-size: 11px; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.founder-status--active { background: color-mix(in srgb, var(--accent, #2a72e5) 16%, transparent); color: var(--accent, #2a72e5); }
.founder-status--inactive { background: color-mix(in srgb, var(--text, #131316) 8%, transparent); opacity: 0.7; }
/* Connect sub-tab — publishing connections (Batch 8). Platform cards + real toggle. */
.connections-stack { display: flex; flex-direction: column; gap: 12px; }
.connections-banner { background: color-mix(in srgb, #d98a00 14%, transparent); color: #8a5a00; border: 1px solid color-mix(in srgb, #d98a00 35%, transparent); border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 4px; }
.connection-foot { display: flex; justify-content: flex-end; margin-top: 4px; }
/* Publishing master switch — a real toggle. */
.cx-pub { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 6px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.cx-pub-title { font-size: 15px; font-weight: 600; color: var(--text); }
.cx-pub-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.cx-switch { flex: none; width: 46px; height: 27px; border-radius: 999px; background: color-mix(in srgb, var(--text, #131316) 9%, transparent); border: 1px solid color-mix(in srgb, var(--text, #131316) 16%, transparent); padding: 0; position: relative; cursor: pointer; transition: background .18s ease, border-color .18s ease; }
.cx-switch-knob { position: absolute; top: 2px; left: 2px; width: 21px; height: 21px; border-radius: 50%; background: var(--text-muted, #888); transition: transform .18s ease, background .18s ease; }
.cx-switch.is-on { background: var(--brand-accent, var(--accent)); border-color: var(--brand-accent, var(--accent)); }
.cx-switch.is-on .cx-switch-knob { transform: translateX(19px); background: #fff; }
.cx-switch[aria-busy="true"] { opacity: .55; pointer-events: none; }
/* Platform cards (LinkedIn / X / Instagram). */
.cx-conn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 12px; }
.cx-conn-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 20px 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-elev); }
.cx-conn-icon { width: 54px; height: 54px; flex: none; border-radius: 15px; display: flex; align-items: center; justify-content: center; color: #fff; }
.cx-conn-icon svg { width: 28px; height: 28px; display: block; }
.cx-conn-icon--linkedin { background: #0A66C2; }
.cx-conn-icon--x { background: #18181b; }
.cx-conn-icon--instagram { background: #E4405F; }
.cx-conn-name { font-size: 14px; font-weight: 600; color: var(--text); }
.cx-conn-pill { font-size: 11.5px; font-weight: 500; padding: 3px 11px; border-radius: 999px; }
.cx-conn-pill--off { color: var(--text-muted); background: color-mix(in srgb, var(--text, #131316) 7%, transparent); }
.cx-conn-pill--on { color: #0F6E56; background: color-mix(in srgb, #1D9E75 16%, transparent); }
.cx-conn-pill--warn { color: #a86a00; background: color-mix(in srgb, #d98a00 20%, transparent); }
.cx-conn-accts { display: flex; flex-direction: column; gap: 2px; }
.cx-conn-acct { font-size: 12px; color: var(--text-2); }
.cx-conn-acct.is-broken { color: #a86a00; }
.cx-conn-btn { width: 100%; margin-top: 2px; }
/* Option A shell — two panes ([sidebar | detail]) inside the list-less founders
   section, sized to line up with every other section's [rail | list | detail]. */
.founder-shell { display: grid; grid-template-columns: 262px minmax(0, 1fr); gap: 22px; align-items: start; }
.founder-sidebar { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 12px; align-self: start; }
.founder-sidebar-head { display: flex; align-items: flex-start; gap: 7px; padding: 2px 6px 12px; }
.founder-icon-btn { border: none; background: none; cursor: pointer; font-size: 19px; color: var(--text, #131316); opacity: 0.55; padding: 0 4px; border-radius: 6px; line-height: 1; flex: none; }
.founder-icon-btn:hover { opacity: 0.85; }
/* Co-founder switcher — keeps the stacked name/role look; a caret + popup swap founders. */
.founder-switch-wrap { position: relative; flex: 1 1 auto; min-width: 0; }
.founder-switch-btn { display: flex; align-items: center; gap: 8px; width: 100%; background: transparent; border: 1px solid var(--border, #eeeef0); border-radius: 9px; padding: 6px 9px 6px 11px; margin: 0; cursor: pointer; text-align: left; color: inherit; transition: background 0.12s, border-color 0.12s; }
.founder-switch-btn:hover { background: var(--st2-hover, rgba(0, 0, 0, 0.04)); border-color: var(--text-dim, #7a7a7a); }
.founder-switch-caret { color: var(--text-2, #c8c8c8); font-size: 17px; line-height: 1; flex: none; margin-left: auto; }
/* + stacked below ⋯ on the right of the header. */
.founder-head-actions { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: none; }
.founder-role--empty { font-style: italic; opacity: 0.5; }
.founder-switch-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 210px; background: var(--bg-elev, #fff); border: 1px solid var(--border, #eeeef0); border-radius: 10px; padding: 4px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28); display: flex; flex-direction: column; gap: 1px; }
.founder-switch-item { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 10px; border: 0; background: transparent; border-radius: 7px; cursor: pointer; text-align: left; width: 100%; }
.founder-switch-item:hover { background: var(--st2-hover, rgba(0, 0, 0, 0.05)); }
.founder-switch-item.is-active { background: var(--st2-sel, rgba(0, 0, 0, 0.07)); }
.founder-switch-item-name { font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 13.5px; color: var(--text, #131316); }
.founder-switch-item-role { font-size: 12px; color: var(--text-dim, #7a7a7a); }
.founder-switch { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 15px; background: transparent; border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; color: var(--text); flex: 1 1 auto; min-width: 0; cursor: pointer; }
.founder-sec-row { text-align: left; }
/* Detail — one section; each field its own rectangle, like the Brand identity cards. */
.founder-detail { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.founder-detail-title { font-family: 'Manrope', sans-serif; font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.founder-detail .founder-field { border: 1px solid var(--border, #eeeef0); border-radius: 12px; padding: 14px 16px; background: rgba(0, 0, 0, 0.012); }
[data-theme="dark"] .founder-detail .founder-field { background: rgba(255, 255, 255, 0.02); }
.founder-field-label { font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.founder-gate-badge { font-size: 10px; font-weight: 500; opacity: 0.65; }
.founder-field-value { white-space: pre-wrap; font-size: 13.5px; line-height: 1.55; padding: 4px 6px; border-radius: 8px; background: transparent; cursor: text; min-height: 18px; color: var(--text); }
.founder-field-value.is-empty { opacity: 0.5; font-style: italic; }
.founder-field-value:hover { background: color-mix(in srgb, var(--text, #131316) 5%, transparent); }
/* Bullet display for the multi-entry fields (Stories, Work stories, Voice samples). */
.founder-bullet { display: flex; gap: 9px; padding: 3px 0; }
.founder-bullet-mark { color: var(--brand-accent, var(--accent)); font-weight: 700; flex: none; }
.founder-bullet-text { font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; color: var(--text); }
.founder-field-actions { display: flex; gap: 8px; margin-top: 7px; }
.founder-edit-textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; line-height: 1.5; padding: 8px; border: 1px solid var(--border, #d8d8dc); border-radius: 8px; resize: vertical; background: transparent; color: var(--text, #131316); }
/* Always-on single text fields (Name, Role, Hometown, Background, …): the value
   IS a live box, the same as every other brand-settings field — no click-to-
   reveal. Hugs its content (one line stays one line) and grows with the text. */
.founder-inline { resize: none; overflow: hidden; min-height: 36px; field-sizing: content; }
.founder-field-status { display: inline-block; margin-top: 6px; font-size: 11px; letter-spacing: 0.02em; color: var(--text-dim); min-height: 14px; }
/* Re-draft in-progress banner (Go live) — a small spinner + line while the ~4-5
   min re-synthesis runs. */
.redraft-spinner { width: 13px; height: 13px; border-radius: 50%; flex: none;
  border: 2px solid color-mix(in srgb, var(--brand-accent, var(--accent)) 30%, transparent);
  border-top-color: var(--brand-accent, var(--accent)); animation: redraft-spin 0.8s linear infinite; }
@keyframes redraft-spin { to { transform: rotate(360deg); } }
/* AI-authored field marker — a minute sparkle after the label of fields the
   synthesis wrote (not the client's verbatim material). Masked SVG so it takes a
   theme-aware dim colour in both light and dark. */
.strategy-cell.ai-authored > .label::after,
.bi-color-card.ai-authored .asset-subhead span::after {
  content: ''; display: inline-block; width: 0.72em; height: 0.72em; margin-left: 6px;
  vertical-align: baseline; opacity: 0.6; background-color: var(--text-dim, #9a9aa5);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12 6 6 12 0 12C6 12 12 18 12 24C12 18 18 12 24 12C18 12 12 6 12 0Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12 6 6 12 0 12C6 12 12 18 12 24C12 18 18 12 24 12C18 12 12 6 12 0Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.founder-field-status.is-saved { color: #1a7f37; }
[data-theme="dark"] .founder-field-status.is-saved { color: #4ac66a; }
/* Individual-box editor for the "---"-separated founder fields (Stories, Work
   stories, Voice samples). Each block shows as its own card; the divider is
   never hand-typed. */
.founder-items { display: flex; flex-direction: column; gap: 6px; cursor: pointer; }
.founder-item-card { display: flex; gap: 8px; padding: 7px 9px; border-radius: 8px; background: color-mix(in srgb, var(--text, #131316) 4%, transparent); }
.founder-item-card:hover { background: color-mix(in srgb, var(--text, #131316) 7%, transparent); }
.founder-item-num { flex: none; width: 18px; height: 18px; border-radius: 50%; background: color-mix(in srgb, var(--text, #131316) 10%, transparent); color: var(--text-dim, #8a8a94); font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.founder-item-text { font-size: 13px; line-height: 1.5; white-space: pre-wrap; }
.founder-items-count { font-size: 11px; color: var(--text-dim, #8a8a94); margin-top: 3px; }
.founder-item-edits { display: flex; flex-direction: column; gap: 8px; }
.founder-item-edit { display: flex; gap: 6px; align-items: flex-start; }
.founder-item-edit .founder-edit-textarea { flex: 1; }
.founder-item-rm { flex: none; border: 1px solid var(--border, #d8d8dc); background: transparent; color: var(--text-dim, #8a8a94); border-radius: 6px; width: 30px; height: 30px; cursor: pointer; font-size: 12px; line-height: 1; }
.founder-item-rm:hover { border-color: #d9534f; color: #d9534f; }
.founder-item-add { align-self: flex-start; }
.founder-btn { font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; }
.founder-btn--primary { background: var(--accent, #2a72e5); color: #fff; }
.founder-btn--ghost { background: transparent; border-color: var(--border, #d8d8dc); color: var(--text, #131316); }
.founder-btn--add { background: transparent; border: 1px dashed color-mix(in srgb, var(--text, #131316) 25%, transparent); color: var(--text, #131316); opacity: 0.8; align-self: flex-start; margin-top: 2px; }
.founder-btn:disabled { opacity: 0.55; cursor: default; }
.founder-menu { position: relative; }
.founder-menu-btn { border: none; background: none; cursor: pointer; font-size: 17px; color: var(--text, #131316); opacity: 0.6; padding: 0 6px; border-radius: 6px; line-height: 1; }
.founder-menu-btn:hover { opacity: 1; }
.founder-menu-pop { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; background: var(--surface, var(--bg, #fff)); border: 1px solid var(--border, #e3e3e6); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.14); min-width: 150px; padding: 5px; }
.founder-menu-item { display: block; width: 100%; text-align: left; border: none; background: none; padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--text, #131316); }
.founder-menu-item:hover { background: color-mix(in srgb, var(--text, #131316) 7%, transparent); }
.founder-menu-item--danger { color: #d64545; }
/* Founder-mode chip on idea cards (self-contained; mirrors .chip.campaign/.chip.news). */
.chip.founder { display: inline-flex; align-items: center; gap: 5px; max-width: 190px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 500; line-height: 1.5; background: color-mix(in srgb, var(--brand-accent, var(--accent, #2a72e5)) 14%, transparent); color: var(--brand-accent, var(--accent, #2a72e5)); cursor: pointer; }
.chip.founder::before { content: '\270D'; font-size: 10px; }
.chip.founder .chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip.founder:hover { background: color-mix(in srgb, var(--brand-accent, var(--accent, #2a72e5)) 22%, transparent); }
[data-skin="clerk"] .chip.founder { display: inline-flex !important; }

/* Memory sub-tab — the one machine-fed tab in the row. The spark marks it
   as different at rest; the glow + count pip appear ONLY when proposals
   await review (signal, not decoration). Operator-only. */
/* !important because the clerk skin forces `display: flex !important` on
   every .popover .popover-item — a plain hide loses regardless of specificity. */
html[data-org-role="member"] .strategy-subtab--memory,
html[data-org-role="member"] #brand-pill-strategy-memory { display: none !important; }
.strategy-subtab--memory .st-spark { color: var(--brand-accent, var(--accent)); margin-right: 6px; }
.strategy-subtab--memory.is-active .st-spark { color: inherit; }
.strategy-subtab--memory.has-pending {
  border-color: color-mix(in srgb, var(--brand-accent, var(--accent)) 55%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--brand-accent, var(--accent)) 30%, transparent);
}
.popover-item--memory svg { color: var(--brand-accent, var(--accent)); }
.strategy-subtab--memory .st-pip,
.popover-item--memory .st-pip {
  display: inline-block; margin-left: 7px; padding: 1px 6px;
  font: 600 10px/1.5 'Inter Tight', sans-serif;
  background: var(--brand-accent, var(--accent)); color: #fff;
  border-radius: 999px; vertical-align: 1px;
}
.strategy-subtab--memory .st-pip[hidden],
.popover-item--memory .st-pip[hidden] { display: none; }

/* "+ Add" was pixel-identical to the values beside it: [data-skin="clerk"]
   .chip paints every chip solid grey with !important, which flattened the
   dashed action chip into just another audience. An action that looks like data
   invites you to read it as data. Transparent with a dashed edge, so the row
   reads as "here are six roles, and a way to add a seventh". */
[data-skin="clerk"] .strategy-cell .chip.chip-add {
  background: transparent !important;
  border: 1px dashed #c9c9d0 !important;
  color: #6e7080 !important;
  font-weight: 400 !important;
}
[data-skin="clerk"] .strategy-cell .chip.chip-add:hover {
  border-color: var(--brand-accent, #131316) !important;
  color: #131316 !important;
}
[data-skin="clerk"][data-theme="dark"] .strategy-cell .chip.chip-add {
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

.st2-loaderr {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 28px 30px; max-width: 60ch;
}
.st2-loaderr-title { font: 500 17px/1.3 Manrope, system-ui, sans-serif; color: var(--text, #131316); }
.st2-loaderr-body { font: 400 13px/1.6 Manrope, system-ui, sans-serif; color: var(--text-dim, #6e7080); }
.st2-loaderr-detail {
  font: 400 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text-dim, #6e7080); opacity: .75; margin-bottom: 4px;
}

/* ══ Settings shell (three panes) ═══════════════════════════════════════════
   rail = sections, list = fields in the active section, detail = the selected
   field. Sections whose content isn't a grid of cells (Founders, Memory, Go
   live) have no field list, so the middle column collapses and the detail pane
   takes the full width — the list only exists where there are fields to list. */
.st2-shell {
  display: grid;
  grid-template-columns: 168px 262px minmax(0, 1fr);
  gap: 22px;
  /* stretch, not start: the content panel should reach the bottom of the page
     rather than stopping at its text and leaving a dead strip underneath.
     ~175px is the shell's top offset plus the footer and its margin. */
  align-items: stretch;
  min-height: calc(100vh - 175px);
}
/* Navigation keeps its natural height — only the panel stretches. */
.st2-rail, .st2-list { align-self: start; }
.st2-shell.is-listless { grid-template-columns: 168px minmax(0, 1fr); }
.st2-shell.is-listless .st2-list { display: none; }
/* "Read as one page" — every field stacked, no list, no per-field selection. */
.st2-shell.is-onepage { grid-template-columns: 168px minmax(0, 1fr); }
.st2-shell.is-onepage .st2-list { display: none; }

.st2-rail { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 12px; }
.st2-rail-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 10px; border: 0; background: transparent; cursor: pointer;
  border-radius: 8px; text-align: left; width: 100%;
  /* Manrope at 13/400 — the app's own navigation type. These columns were set
     in Inter Tight at 500, which put a second typeface next to the sidebar and
     made navigation compete with content for weight. Selection is carried by
     the background; only the selected row goes to 500. */
  font: 400 13px/1.3 Manrope, system-ui, sans-serif; color: var(--nav-label, var(--text-2, #42434d));
}
.st2-rail-row:hover { background: var(--st2-hover, rgba(0, 0, 0, 0.035)); color: var(--text, #131316); }
/* Rail: neutral grey selection box (only the label takes the brand colour) — the
   brand-tinted box is reserved for the secondary list, matching the mockup. */
.st2-rail-row.is-active { background: var(--st2-sel, rgba(0, 0, 0, 0.055)); color: var(--brand-accent, var(--accent)); font-weight: 500; }
.st2-rail-row--sub { padding-left: 22px; }
.st2-rail-sep { height: 1px; background: var(--border, #eeeef0); margin: 8px 4px; }
.st2-rail-count {
  font: 500 11px/1 Manrope, system-ui, sans-serif; padding: 2px 6px; border-radius: 999px;
}
.st2-rail-count--todo { color: #8a5a00; background: color-mix(in srgb, #d98a00 18%, transparent); }
.st2-rail-count--queue { color: #fff; background: var(--brand-accent, var(--accent)); }

/* Sticky like the rail, so the page list stays put while the detail column
   scrolls. A long list scrolls within itself rather than pushing past the top. */
.st2-list { display: flex; flex-direction: column; gap: 1px; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; }
/* Group divider inside the page list (same weight as the rail separator). */
.st2-list-sep { height: 1px; background: var(--border, #eeeef0); margin: 9px 4px; flex: none; }
/* Hairlines, not boxes. These are rows of one list, so a rule separates them
   without implying each is its own object — which leaves the grey background
   meaning exactly one thing: this is the row you're looking at. */
.st2-list-row {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  width: 100%; text-align: left; cursor: pointer;
  border: 0; border-bottom: 0.5px solid var(--border, #eeeef0); background: transparent;
  border-radius: 6px; padding: 8px 11px;
  /* Every row is the same height whether or not it has a subtitle line, so
     the list reads as an even stack. A one-subtitle-line row is ~54px; rows
     with no subtitle fill to the same box (content centered), and the rare
     two-line subtitle grows past it. */
  min-height: 54px; box-sizing: border-box;
}
.st2-list-row:last-child { border-bottom: 0; }
/* A row right before a group separator drops its own hairline, so the group
   divider isn't doubled up with the row's bottom line. */
.st2-list-row:has(+ .st2-list-sep) { border-bottom: 0; }
.st2-list-row:hover { background: var(--st2-hover, rgba(0, 0, 0, 0.035)); }
.st2-list-row.is-active { background: color-mix(in srgb, var(--brand-accent, var(--accent)) 13%, transparent); }
.st2-list-name {
  display: flex; align-items: center; gap: 7px;
  font: 400 13px/1.35 Manrope, system-ui, sans-serif; color: var(--nav-label, var(--text-2, #42434d));
}
.st2-list-row.is-active .st2-list-name { font-weight: 500; color: var(--brand-accent, var(--accent)); }
/* Dots retired — selection is carried by the tinted rectangle + the accent-colored
   label. "Needs you" still shows via the amber preview text. */
.st2-dot, .st2-dot.is-todo { display: none; }
.st2-list-preview {
  font: 400 12px/1.45 Manrope, system-ui, sans-serif; color: var(--text-dim, #6e7080);
  /* Two lines, clipped by the browser at the real line end. Guessing a
     character count that fits a fixed column is a losing game — 58 characters
     still overflowed 262px at this size, and any number would break the moment
     the column or font changed. The browser knows where the line ends. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.st2-list-preview.is-todo { color: #8a5a00; }

/* One cell at a time inside the active section. */
.st2-detail .strategy-cell.st2-off { display: none; }
.st2-detail .strategy-section-head { display: none; }
/* Cluster labels ("AUDIENCE — who we serve") group cells on the stacked page.
   With one field on screen they'd caption nothing, and an empty trailing one
   looks like a broken section. */
.st2-detail .strategy-cluster-label { display: none; }
.st2-shell.is-onepage .st2-detail .strategy-cluster-label { display: block; }
.st2-shell.is-onepage .st2-detail .strategy-section-head { display: block; }
.st2-shell.is-onepage .st2-detail .strategy-cell.st2-off { display: block; }

.st2-status {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border-radius: 10px; margin-bottom: 16px;
  background: color-mix(in srgb, #d98a00 13%, transparent);
  border: 1px solid color-mix(in srgb, #d98a00 32%, transparent);
  font: 400 13px/1.4 Manrope, system-ui, sans-serif; color: #8a5a00;
}
.st2-status.is-clear {
  background: color-mix(in srgb, #2f9e63 11%, transparent);
  border-color: color-mix(in srgb, #2f9e63 28%, transparent);
  color: #1d6b43;
}
.st2-status-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.st2-status button {
  border: 1px solid currentColor; background: transparent; color: inherit;
  border-radius: 8px; padding: 4px 10px; cursor: pointer;
  font: 500 12px/1 Manrope, system-ui, sans-serif;
}
.st2-status button:hover { background: color-mix(in srgb, currentColor 10%, transparent); }

/* ── Detail pane ──────────────────────────────────────────────────────────
   The card had a border because it was one of thirty stacked in a scroll and
   needed an edge against the next one. As the only thing in a pane it is chrome
   around nothing, so the pane itself becomes the container: the field name is
   the heading, Edit sits on the rule opposite it, and the value gets a readable
   measure instead of running the full 1250px. Grouped fields (pain points) drop
   into a role | points ledger, because their structure earns columns. */
/* Floor for short viewports; the shell's stretch does the work above it. */
.st2-detail { min-height: 40vh; }
.st2-shell:not(.is-onepage) .st2-detail .strategy-cell {
  position: relative;
  background: none; border: 0; border-radius: 0; padding: 0; margin: 0 0 8px;
  cursor: default;
}
.st2-shell:not(.is-onepage) .st2-detail .strategy-cell .label {
  font: 500 19px/1.3 Manrope, system-ui, sans-serif; color: var(--text, #131316);
  border-bottom: 1px solid var(--border, #eeeef0); padding: 0 96px 10px 0; margin: 0 0 8px;
}
.st2-shell:not(.is-onepage) .st2-detail .strategy-cell .help {
  font: 400 12px/1.55 Manrope, system-ui, sans-serif; color: var(--text-dim, #6e7080);
  max-width: 66ch; margin: 0 0 20px;
}
/* Edit rides the heading rule rather than trailing the content, so it's in the
   same place for a one-line field and a forty-line one. */
.st2-shell:not(.is-onepage) .st2-detail .strategy-cell .edit {
  position: absolute; top: -4px; right: 0;
}
/* Nothing to collapse to when the pane shows a single field. */
.st2-shell:not(.is-onepage) .st2-detail .strategy-cell .cell-toggle { display: none; }
/* ~66 characters. A full-width line at this page width is genuinely hard to
   track back to the start of the next one. */
.st2-shell:not(.is-onepage) .st2-detail .value { max-width: 66ch; }
.st2-shell:not(.is-onepage) .st2-detail .value--grouped { max-width: none; }
.st2-shell:not(.is-onepage) .st2-detail .value--grouped .sv-group {
  display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 0 20px;
  border-top: 0.5px solid var(--border, #eeeef0); padding: 11px 0; margin: 0;
}
.st2-shell:not(.is-onepage) .st2-detail .value--grouped .sv-group:last-child {
  border-bottom: 0.5px solid var(--border, #eeeef0);
}
.st2-shell:not(.is-onepage) .st2-detail .value--grouped .sv-role { margin: 0; }
.st2-shell:not(.is-onepage) .st2-detail .value--grouped .sv-list { margin: 0; max-width: 62ch; }

/* The clerk skin paints every .strategy-cell as a white bordered card with
   !important, which no amount of specificity in the block above could undo —
   so the pane kept its box and only grew bigger. Same weight, tighter scope,
   detail pane only: the stacked "read as one page" view still wants cards,
   because there it IS one of thirty and needs an edge against the next. */
[data-skin="clerk"] .st2-shell:not(.is-onepage) .st2-detail .strategy-cell,
[data-skin="clerk"] .st2-shell:not(.is-onepage) .st2-detail .strategy-cell:hover {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
/* Consistency comes from the pane BEING a surface, not from putting a box back
   round one field. The app's language is a grey canvas with white bordered
   panels; the rail and the field list read as navigation and stay on the
   canvas, the content sits on white — same fill, border and radius as every
   other card in the app, so nothing here is a new visual idea. It also fills
   the height, which is what the empty half-page in the screenshot was. */
[data-skin="clerk"] .st2-shell:not(.is-onepage) .st2-detail {
  background: #ffffff;
  border: 1px solid #eeeef0;
  border-radius: 12px;
  padding: 24px 28px;
}
/* Option 2 — the secondary list (and the founder sidebar) sit in their OWN soft
   panel: a surface between the grey canvas and the white content panel, so the
   navigation list reads as a container in every section, not floating text. */
[data-skin="clerk"] .st2-shell:not(.is-onepage) .st2-list,
[data-skin="clerk"] .st2-shell:not(.is-onepage) .founder-sidebar {
  background: #fafbfc; border: 1px solid #eeeef0; border-radius: 12px; padding: 8px;
}
[data-skin="clerk"][data-theme="dark"] .st2-shell:not(.is-onepage) .st2-list,
[data-skin="clerk"][data-theme="dark"] .st2-shell:not(.is-onepage) .founder-sidebar {
  background: #1c1c1b; border-color: rgba(255, 255, 255, 0.06);
}
/* Founders was rendered INSIDE the white detail panel, which put its secondary
   list on white. Drop that outer panel for the founders section and give the
   founder DETAIL the white content panel instead — so Founders matches every
   other section: canvas · soft list panel · white content panel. */
[data-skin="clerk"] .st2-shell:not(.is-onepage) .st2-detail[data-active-section="founders"] {
  background: none; border: 0; padding: 0;
}
[data-skin="clerk"] .st2-shell:not(.is-onepage) .founder-detail {
  background: #ffffff; border: 1px solid #eeeef0; border-radius: 12px; padding: 24px 28px;
}
[data-skin="clerk"][data-theme="dark"] .st2-shell:not(.is-onepage) .founder-detail {
  background: #1c1c1b; border-color: rgba(255, 255, 255, 0.06);
}
/* "Read as one page" used to switch visual language mid-app: stacked white
   cards on grey, versus a panel everywhere else. Same surface now, with the
   cards inside becoming plain ruled sections — one white page you can read top
   to bottom, which is what that mode is for. */
/* One column in BOTH modes. In one-page, two columns make the eye go
   left-right-left down a page whose whole purpose is a single continuous read.
   In the detail pane it's worse: the section grid is two columns, so a field
   that isn't marked full-width sat in the left half — Audience targets used
   417px of a 908px pane and wrapped its chips at half the space available,
   while the right half stayed empty. There is no second column in a pane that
   shows one field. Prose still reads at a sane measure because .value caps at
   66ch; this only stops the CONTAINER being half-width. */
.st2-detail .strategy-grid { grid-template-columns: minmax(0, 1fr); }
/* Field name as a section heading, not the 15px card title the skin sets for a
   grid of cards — there are no cards here any more. */
[data-skin="clerk"] .st2-shell.is-onepage .st2-detail .strategy-cell .label {
  font-size: 17px !important;
}

[data-skin="clerk"] .st2-shell.is-onepage .st2-detail {
  background: #ffffff;
  border: 1px solid #eeeef0;
  border-radius: 12px;
  padding: 24px 28px;
}
[data-skin="clerk"] .st2-shell.is-onepage .st2-detail .strategy-cell,
[data-skin="clerk"] .st2-shell.is-onepage .st2-detail .strategy-cell:hover {
  background: none !important;
  border: 0 !important;
  border-bottom: 1px solid #eeeef0 !important;
  border-radius: 0 !important;
  padding: 16px 0 !important;
  box-shadow: none !important;
}
[data-skin="clerk"] .st2-shell.is-onepage .st2-detail .strategy-section:last-child .strategy-cell:last-child {
  border-bottom: 0 !important;
}
[data-skin="clerk"][data-theme="dark"] .st2-shell.is-onepage .st2-detail {
  background: #1c1c1b;
  border-color: rgba(255, 255, 255, 0.06);
}
[data-skin="clerk"][data-theme="dark"] .st2-shell.is-onepage .st2-detail .strategy-cell,
[data-skin="clerk"][data-theme="dark"] .st2-shell.is-onepage .st2-detail .strategy-cell:hover {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

[data-skin="clerk"][data-theme="dark"] .st2-shell:not(.is-onepage) .st2-detail {
  background: #1c1c1b;
  border-color: rgba(255, 255, 255, 0.06);
}
[data-skin="clerk"][data-theme="dark"] .st2-shell:not(.is-onepage) .st2-detail .strategy-cell .label {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

[data-skin="clerk"] .st2-shell:not(.is-onepage) .st2-detail .strategy-cell .label {
  font-size: 19px !important;
  border-bottom: 1px solid #eeeef0 !important;
  padding: 0 96px 10px 0 !important;
  margin: 0 0 8px !important;
}
[data-skin="clerk"] .st2-shell:not(.is-onepage) .st2-detail .strategy-cell .help {
  margin: 0 0 20px !important;
  max-width: 66ch !important;
}

/* Dark mode. Selection was rgba(0,0,0,.055) — black on a near-black page, so
   the row you were standing on vanished. The amber signals were #8a5a00, a dark
   brown, unreadable on #0a0a0a: every count, every "needs you" line and the
   status bar itself. Both flipped to light-on-dark equivalents. */
[data-theme="dark"] {
  --st2-hover: rgba(255, 255, 255, 0.045);
  --st2-sel:   rgba(255, 255, 255, 0.075);
}
[data-theme="dark"] .st2-status {
  background: rgba(217, 138, 0, 0.15);
  border-color: rgba(217, 138, 0, 0.35);
  color: #f0c479;
}
[data-theme="dark"] .st2-rail-count--todo { color: #f0c479; background: rgba(217, 138, 0, 0.20); }
[data-theme="dark"] .st2-list-preview.is-todo { color: #f0c479; }

@media (max-width: 1100px) {
  .st2-shell:not(.is-onepage) .st2-detail .value--grouped .sv-group { grid-template-columns: 1fr; gap: 4px; }
  .st2-shell:not(.is-onepage) .st2-detail .strategy-cell .label { padding-right: 0; }
  .st2-shell:not(.is-onepage) .st2-detail .strategy-cell .edit { position: static; }
  .st2-shell, .st2-shell.is-listless, .st2-shell.is-onepage { grid-template-columns: 1fr; }
  .st2-rail { position: static; flex-direction: row; flex-wrap: wrap; }
  .st2-rail-row { width: auto; }
  .st2-rail-sep { display: none; }
}

.strategy-section { margin-bottom: 48px; }
/* Brand setup checklist (Strategy → Brand sub-tab).
   Summary banner spans full width; three groups sit in three columns below. */
.setup-error { font-size: 13px; color: #ff7a7a; padding: 8px 0; }
.setup-check-group-title {
  font-family: 'Inter Tight', sans-serif;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 4px;
}
.setup-check-row {
  display: flex; align-items: center; gap: 12px;
  font-size: 14px;
}
.setup-check-icon {
  width: 18px; height: 18px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; line-height: 1;
  flex-shrink: 0;
}
.setup-check-icon.is-ok      { background: rgba(74,222,128,0.18);  color: #4ade80; }
.setup-check-icon.is-missing { background: rgba(255,90,90,0.18);   color: #ff7a7a; }
.setup-check-label { flex: 1; color: var(--text); }
.setup-check-detail {
  font-size: 11px;
  color: var(--text-muted);
  font-family: 'Manrope', system-ui, sans-serif;
}

/* ── Go-live focus card (Setup checklist, Option A) ──────────────────────────
   One card: readiness on top (progress ring + what needs you), the go-live
   action in the middle (stacked Flip / Re-draft, or the invite sender), and the
   full passing checklist folded away at the bottom. Semantic red/amber/green are
   card-scoped vars so the whole thing re-themes with the two overrides below. */
.golive-focus {
  display: flex; flex-direction: column; gap: 18px;
  --gl-bad:#b91c1c;  --gl-bad-bg:#fef2f2;  --gl-bad-line:#f3cdcb;
  --gl-warn:#a16207; --gl-warn-bg:#fefce8; --gl-warn-line:#fde047;
  --gl-good:#15802a; --gl-good-bg:#f0fdf2; --gl-good-line:#bbf7c6;
  --gl-track: var(--border, #e5e7ec);
}
[data-theme="dark"] .golive-focus {
  --gl-bad:#f87171;  --gl-bad-bg:rgba(248,113,113,.10); --gl-bad-line:rgba(248,113,113,.26);
  --gl-warn:#fde047; --gl-warn-bg:rgba(253,224,71,.08); --gl-warn-line:rgba(253,224,71,.26);
  --gl-good:#4ade68; --gl-good-bg:rgba(74,222,104,.08); --gl-good-line:rgba(74,222,104,.24);
}
.golive-status { display: flex; flex-direction: column; gap: 14px; }
.golive-head { display: flex; align-items: flex-start; gap: 15px; }
.golive-ring { position: relative; width: 58px; height: 58px; flex: none; }
.golive-ring-svg { width: 58px; height: 58px; transform: rotate(-90deg); display: block; }
.golive-ring-svg .glr-track { fill: none; stroke: var(--gl-track); stroke-width: 3; }
.golive-ring-svg .glr-arc { fill: none; stroke: var(--brand-accent, var(--accent)); stroke-width: 3; stroke-linecap: round; transition: stroke-dasharray .5s ease; }
.golive-ring-num { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.golive-head-txt { min-width: 0; padding-top: 1px; }
.golive-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; padding: 2px 9px; border-radius: 100px; margin-bottom: 6px; }
.golive-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.golive-pill.is-draft  { color: var(--gl-warn); background: var(--gl-warn-bg); border: 1px solid var(--gl-warn-line); }
.golive-pill.is-active { color: var(--gl-good); background: var(--gl-good-bg); border: 1px solid var(--gl-good-line); }
.golive-h { font-size: 16px; font-weight: 650; letter-spacing: -.01em; color: var(--text); line-height: 1.3; }
.golive-sub { font-size: 13px; color: var(--text-muted); margin-top: 3px; }
.golive-blockers { display: flex; flex-direction: column; gap: 8px; }
.golive-blocker { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 10px; border: 1px solid transparent; }
.golive-blocker.is-bad { background: var(--gl-bad-bg); border-color: var(--gl-bad-line); }
.golive-blocker.is-pending { background: transparent; border-color: var(--border); }
.golive-blocker-ic-pend { width: 18px; height: 18px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 12px; line-height: 1; }
.golive-blocker-txt { min-width: 0; flex: 1; }
.golive-blocker-t { font-size: 14px; font-weight: 600; color: var(--text); }
.golive-blocker-s { font-size: 12.5px; color: var(--text-muted); margin-top: 1px; }

/* Two columns: readiness on the left, the action stack (buttons + restore +
   note) held on the right at a fixed width so the buttons read as substantial
   pills, not full-bleed bars. Stacks under a narrow viewport. */
.golive-top { display: flex; gap: 30px; align-items: flex-start; }
.golive-top > .golive-status { flex: 1 1 auto; min-width: 0; }
.golive-top > .golive-actions { flex: 0 0 340px; }
@media (max-width: 860px) {
  .golive-top { flex-direction: column; }
  .golive-top > .golive-actions { flex-basis: auto; width: 100%; }
}
.golive-actions { display: flex; flex-direction: column; gap: 11px; }
.golive-btn-col { display: flex; flex-direction: column; gap: 9px; }
.golive-pause { color: var(--text-dim); }
.golive-pause:hover:not(:disabled) { color: var(--danger, #b91c1c); border-color: var(--danger, #b91c1c); }
/* Plan & price editor on the go-live card. */
.golive-plan { border: 1px solid var(--border); border-radius: 10px; padding: 12px 13px; display: flex; flex-direction: column; gap: 8px; }
.golive-plan-lbl { font-size: 12px; font-weight: 600; color: var(--text-2); }
.golive-plan-row { display: flex; gap: 8px; align-items: center; }
.golive-plan-row .input { height: 38px; }
.golive-plan-row select.input { flex: 1; min-width: 0; }
.golive-plan-row input.input { width: 116px; flex: none; }
.golive-plan-help { font-size: 11.5px; color: var(--text-dim); line-height: 1.4; }
/* 3-class specificity so the height/width beat the clerk .btn-primary rules. */
.golive-focus .golive-actions .golive-btn { width: 100%; height: 46px; padding: 0 18px; justify-content: center; text-align: center; font-size: 14px; font-weight: 600; }
.golive-restore { align-self: flex-start; }
.golive-invite-row { display: flex; gap: 8px; flex-wrap: wrap; }
.golive-invite-row .input { flex: 1; min-width: 220px; }
.golive-invite-row .golive-btn { width: auto; }
.golive-note { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--text-muted); line-height: 1.45; }
.golive-note-ic { flex: none; margin-top: 1px; color: var(--text-muted); display: inline-flex; }

.golive-passing { border-top: 1px solid var(--border); }
.golive-passing > summary { cursor: pointer; list-style: none; user-select: none; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); padding: 12px 0 2px; }
.golive-passing > summary::-webkit-details-marker { display: none; }
.golive-passing > summary:hover { color: var(--text); }
.golive-passing-chev { display: inline-block; transition: transform .15s ease; font-size: 10px; }
.golive-passing[open] > summary .golive-passing-chev { transform: rotate(90deg); }
.golive-passing-body { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px 26px; padding: 12px 2px 4px; }
.golive-pass-group { display: flex; flex-direction: column; gap: 7px; }
@media (max-width: 720px) { .golive-passing-body { grid-template-columns: 1fr; } }
.golive-focus .setup-check-icon.is-pending-ic { background: transparent; color: var(--text-muted); }

/* ── Re-draft compare/review panel (overlay) ─────────────────────────────────
   Opened when a re-draft lands (or from "Compare drafts" on Go live). Diffs the
   live draft against a saved version; per-field Old version / New version. Semantic
   green/red (diff ins/del) are card-scoped vars → two theme overrides. */
.rv-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(10,11,14,.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  display: flex; align-items: flex-start; justify-content: center; padding: 40px 20px; overflow: auto;
  --rv-accent: var(--brand-accent, var(--accent, #4f46e5));
  --rv-accent-soft: color-mix(in srgb, var(--brand-accent, var(--accent, #4f46e5)) 12%, transparent);
}
.rv-panel { background: var(--bg-elev-2, #fff); color: var(--text); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: 0 24px 70px rgba(0,0,0,.4); width: 100%; max-width: 1000px; margin: auto;
  display: flex; flex-direction: column; overflow: hidden; }
.rv-head { display: flex; flex-wrap: wrap; gap: 16px 20px; align-items: flex-start; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--border); }
.rv-eyebrow { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.rv-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rv-accent); }
.rv-title { font-size: 19px; font-weight: 650; letter-spacing: -.01em; margin: 6px 0 3px; }
.rv-title b { color: var(--rv-accent); }
.rv-sub { font-size: 13px; color: var(--text-muted); }
.rv-head-r { display: flex; flex-direction: column; gap: 9px; align-items: flex-end; }
.rv-bulk { display: flex; gap: 8px; }
.rv-lnk { background: none; border: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-muted); cursor: pointer; padding: 4px; }
.rv-lnk:hover { color: var(--text); }
.rv-body { display: grid; grid-template-columns: 210px 1fr; min-height: 0; }
.rv-rail { border-right: 1px solid var(--border); padding: 16px 12px; align-self: start; position: sticky; top: 0; max-height: 70vh; overflow: auto; }
.rv-rail-title { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted); margin: 0 6px 10px; }
.rv-rail-item { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--text-muted); }
.rv-rail-item:hover { background: var(--bg-elev, rgba(0,0,0,.04)); color: var(--text); }
.rv-rdot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--rv-accent); }
.rv-rail-item.pending .rv-rdot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text-muted); }
.rv-rail-item.pending { color: var(--text-muted); }
.rv-rail-none, .rv-nochange { font-size: 13px; color: var(--text-muted); padding: 10px 6px; }
.rv-fields { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; max-height: 70vh; overflow: auto; }
.rv-field { flex: none; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; scroll-margin-top: 8px; }
.rv-fhead { display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: var(--bg-elev, transparent); border-bottom: 1px solid var(--border); }
.rv-fname { font-size: 14px; font-weight: 650; flex: 1; }
.rv-take { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12px; font-weight: 600; border: 1px solid var(--border); background: var(--bg-elev-2, #fff); color: var(--text-muted); padding: 6px 12px; border-radius: 9px; cursor: pointer; white-space: nowrap; }
.rv-take:hover { color: var(--text); }
.rv-field[data-take="1"] .rv-take { background: var(--rv-accent-soft); border-color: transparent; color: var(--rv-accent); }
.rv-panes { display: grid; grid-template-columns: 1fr 1fr; }
.rv-pane { padding: 12px 15px; min-width: 0; }
.rv-pane + .rv-pane { border-left: 1px solid var(--border); }
.rv-phead { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.rv-pbody { font-size: 13.5px; color: var(--text); line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.rv-empty { color: var(--text-muted); font-style: italic; }
.rv-kept { margin-left: auto; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border-radius: 100px; display: none; }
.rv-field[data-take="1"] .rv-new { background: var(--rv-accent-soft); }
.rv-field[data-take="1"] .rv-prev { opacity: .5; }
.rv-field[data-take="1"] .rv-new .rv-kept { display: inline-block; color: var(--rv-accent); background: var(--rv-accent-soft); }
.rv-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 20px; border-top: 1px solid var(--border); background: var(--bg-elev, transparent); }
.rv-count { font-size: 13px; color: var(--text-muted); }
.rv-count b { color: var(--text); font-variant-numeric: tabular-nums; }
.rv-sp { flex: 1; }
.rv-foot .rv-apply, .rv-foot .rv-close, .rv-foot .rv-danger { padding: 10px 18px; }
.rv-foot .rv-apply:disabled { opacity: .45; cursor: default; }
.rv-foot .rv-danger { color: var(--text-muted); }
.rv-foot .rv-danger:hover { color: #e5484d; border-color: color-mix(in srgb, #e5484d 45%, var(--border)); }
/* "What the client said" — per-field reveal of the intake answers that fed it. */
.rv-src { border-top: 1px solid var(--border); }
.rv-src > summary { list-style: none; cursor: pointer; padding: 9px 15px; font-size: 12px; font-weight: 600; color: var(--text-muted); display: flex; align-items: center; gap: 7px; user-select: none; }
.rv-src > summary::-webkit-details-marker { display: none; }
.rv-src > summary:hover { color: var(--text); }
.rv-src-caret { font-size: 8px; transition: transform .15s ease; }
.rv-src[open] .rv-src-caret { transform: rotate(90deg); }
.rv-src-body { padding: 2px 15px 14px; display: flex; flex-direction: column; gap: 11px; }
.rv-src-label { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.rv-src-val { font-size: 13px; color: var(--text); line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.rv-src-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rv-src-chip { font-size: 12px; padding: 2px 9px; border-radius: 100px; background: var(--bg-elev, rgba(0,0,0,.05)); border: 1px solid var(--border); color: var(--text); }
@media (max-width: 760px) { .rv-body { grid-template-columns: 1fr; } .rv-rail { display: none; } }
@media (max-width: 600px) { .rv-panes { grid-template-columns: 1fr; } .rv-pane + .rv-pane { border-left: none; border-top: 1px solid var(--border); } }

.strategy-section:last-child { margin-bottom: 0; }
.strategy-section-head {
  display: flex; align-items: baseline; gap: 24px;
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.strategy-section-label {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-muted);
  display: inline-flex; align-items: center; gap: 10px;
}
.strategy-section-glyph {
  display: inline-flex;
  width: 18px; height: 18px;
  color: var(--accent);
  flex: 0 0 18px;
}
.strategy-section-glyph svg { width: 100%; height: 100%; }
.strategy-section-blurb {
  font-size: 13px; color: var(--text-2);
  line-height: 1.5;
  flex: 1; min-width: 0;
}
.strategy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
/* Full-width cluster divider inside a section grid — groups related cells
   under a small labelled, hairline-underlined sub-header (e.g. "AUDIENCE —
   who, and what they struggle with"). Spans both columns so the cells below
   start a fresh row. */
.strategy-cluster-label {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 2px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.strategy-cluster-label:first-child { margin-top: 0; }
.strategy-cluster-label .cl-name {
  font-family: 'Inter Tight', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
}
.strategy-cluster-label .cl-desc {
  font-size: 12px;
  color: var(--text-dim);
}
/* Brand assets gallery (read-only) — the logo + reference images that condition
   every AI render, surfaced in the Visual section. Curated in Notion. */
.strategy-cell .asset-subhead {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Manrope', sans-serif;
  font-size: 14px; font-weight: 600;
  color: var(--text-2);
  margin: 18px 0 10px;
}
.strategy-cell .asset-subhead:first-of-type { margin-top: 0; }
.strategy-cell .asset-subhelp { margin: -4px 0 12px; }
.strategy-cell .asset-tag {
  font-size: 10px; font-weight: 600; letter-spacing: 0.02em;
  padding: 2px 8px; border-radius: 999px;
  background: var(--bg-elev-2); border: 1px solid var(--border);
  color: var(--text-muted);
}
.strategy-cell .asset-logo {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 18px; max-width: 260px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.strategy-cell .asset-logo img { max-height: 56px; max-width: 220px; width: auto; height: auto; object-fit: contain; display: block; }
/* Preview-card backdrop adapts to the uploaded asset so it never sits invisible
   on a same-tone card (set by applyAssetBackdrop). Fixed colours, not theme vars,
   so a light logo reads on dark and a dark logo reads on light in BOTH themes. */
.strategy-cell .asset-logo[data-asset-backdrop="dark"]  { background: #2c2c33; border-color: rgba(255,255,255,0.10); }
.strategy-cell .asset-logo[data-asset-backdrop="light"] { background: #ffffff; border-color: var(--border); }
/* Flat grid of reference cards: each = thumbnail + editable "Used in" scope. */
.strategy-cell .asset-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-top: 4px; }
.strategy-cell .asset-card { box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 14px; }
.strategy-cell .asset-item {
  position: relative;
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; background: var(--bg);
}
.strategy-cell .asset-item img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.strategy-cell .asset-item img.asset-broken { width: 100%; aspect-ratio: 4 / 5; background: var(--bg-elev-2); }
.strategy-cell .asset-usedin-wrap { display: flex; flex-direction: column; gap: 5px; }
.strategy-cell .asset-usedin-lbl { font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim); }
/* "What's filled" — per-render-type ref counts against the cap (worker MAX_REFS). */
.strategy-cell .asset-fill { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: -2px 0 14px; font-size: 11px; color: var(--text-muted); }
.strategy-cell .asset-fill-lead { font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim); }
.strategy-cell .asset-fill-sep { color: var(--text-dim); }
.strategy-cell .asset-fill-stat { display: inline-flex; align-items: baseline; gap: 4px; }
.strategy-cell .asset-fill-name { color: var(--text-muted); }
.strategy-cell .asset-fill-n { font-family: 'Manrope', sans-serif; font-weight: 600; color: var(--text-2); }
.strategy-cell .asset-fill-stat.is-full .asset-fill-n { color: var(--accent); }
.strategy-cell .asset-foot { margin-top: 12px; margin-bottom: 0; }
/* Editable Brand assets — add/remove/replace controls. */
.strategy-cell .asset-body { position: relative; }
.strategy-cell .asset-body.is-busy { pointer-events: none; opacity: 0.5; }
.strategy-cell .asset-logo-row { display: flex; align-items: flex-end; gap: 12px; }
/* Option A: Logo + Brandmark two-up. Each slot stacks its thumbnail over the
   Replace button; the grid drops to one column on narrow widths. */
.strategy-cell .asset-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; margin: 8px 0 14px; }
@media (max-width: 640px) { .strategy-cell .asset-slots { grid-template-columns: 1fr; } }
.strategy-cell .asset-slot { min-width: 0; }
.strategy-cell .asset-slot .asset-subhead { margin-top: 0; }
.strategy-cell .asset-slot .asset-subhelp { margin: -2px 0 12px; }
.strategy-cell .asset-slot .asset-logo-row { flex-direction: column; align-items: flex-start; gap: 10px; }
.strategy-cell .asset-slot .asset-logo { max-width: 100%; }
.strategy-cell .asset-btn {
  font-family: 'Inter Tight', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.03em;
  padding: 7px 12px; border-radius: var(--radius);
  border: 1px solid var(--border-strong); background: transparent; color: var(--text-2);
  cursor: pointer; transition: color var(--t), border-color var(--t);
}
.strategy-cell .asset-btn:hover { color: var(--accent); border-color: var(--accent); }
.strategy-cell .asset-btn.dashed { border-style: dashed; color: var(--text-muted); align-self: flex-start; margin-top: 20px; }
.strategy-cell .asset-btn.ghost { border-color: transparent; color: var(--text-muted); }
.strategy-cell .asset-x {
  position: absolute; top: 5px; right: 5px; width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--border-strong);
  background: var(--bg-elev); color: var(--text-2);
  font-size: 10px; line-height: 1; cursor: pointer; opacity: 0;
  transition: opacity var(--t), color var(--t), border-color var(--t);
}
.strategy-cell .asset-item:hover .asset-x { opacity: 1; }
.strategy-cell .asset-x:hover { color: var(--accent); border-color: var(--accent); }
.strategy-cell .asset-confirm {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  background: rgba(0,0,0,0.64); color: #fff; font-size: 12px; font-weight: 500;
}
.strategy-cell .asset-confirm .ac-row { display: flex; gap: 6px; }
.strategy-cell .asset-confirm button { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: var(--radius); cursor: pointer; border: 1px solid transparent; }
.strategy-cell .asset-confirm .ac-yes { background: var(--accent); color: #fff; border-color: var(--accent); }
.strategy-cell .asset-confirm .ac-no { background: transparent; color: #fff; border-color: rgba(255,255,255,0.45); }
.strategy-cell .asset-add-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  aspect-ratio: 1; border: 1px dashed var(--border-strong); border-radius: var(--radius);
  background: transparent; color: var(--text-muted); font-size: 11px; cursor: pointer;
  transition: color var(--t), border-color var(--t);
}
.strategy-cell .asset-add-tile:hover, .strategy-cell .asset-add-tile.is-open { color: var(--accent); border-color: var(--accent); }
.strategy-cell .asset-add-tile .plus { font-size: 20px; line-height: 1; }
.strategy-cell .asset-addform {
  margin-top: 12px; padding: 14px; border: 1px solid var(--border-strong);
  border-radius: var(--radius); background: var(--bg-elev-2);
  display: flex; flex-direction: column; gap: 10px;
}
.strategy-cell .asset-addform-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.strategy-cell .asset-addform-label { font-size: 12px; color: var(--text-muted); min-width: 62px; }
.strategy-cell .asset-usedin { display: flex; gap: 5px; flex-wrap: wrap; }
.strategy-cell .asset-chip {
  font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg-elev); color: var(--text-muted);
  cursor: pointer; transition: background var(--t), color var(--t), border-color var(--t);
}
.strategy-cell .asset-chip:hover { border-color: var(--border-strong); color: var(--text-2); }
.strategy-cell .asset-chip.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.strategy-cell .asset-addform-note { font-size: 11px; color: var(--text-dim); }
.strategy-cell .asset-busy { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; color: var(--text-muted); }
.strategy-cell .asset-spinner { width: 13px; height: 13px; border: 2px solid var(--border-strong); border-top-color: var(--accent); border-radius: 50%; animation: asset-spin 0.7s linear infinite; }
@keyframes asset-spin { to { transform: rotate(360deg); } }
.strategy-cell .asset-btn.dashed.is-open { color: var(--accent); border-color: var(--accent); }
.strategy-cell .asset-empty { margin: 4px 0 12px; }
.strategy-cell {
  border: 1px solid var(--border);
  background: var(--bg-elev);
  padding: 28px 28px 24px;
  border-radius: var(--radius);
  position: relative;
}
/* editableCell()/identityCell() nest a full .strategy-cell just to render a
   field (label + help + value) inside a bi-color-card. That inner cell must NOT
   paint as its own card (fill + border) or it draws a stray rectangle around
   the help — the bi-color-card is already the card. Only the fill/border are
   dropped; padding stays so spacing is unchanged. */
.bi-color-card .strategy-cell {
  background: transparent !important;
  border: 0 !important;
}
.strategy-cell.read-only {
  background: var(--bg-elev);
  border-style: dashed;
}
.strategy-cell .label {
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
  display: inline-flex; align-items: center; gap: 8px;
}
.strategy-cell .label .lock {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  text-transform: none;
}
.strategy-cell .help {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 16px;
  max-width: 520px;
}
.strategy-cell .value {
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
  white-space: pre-wrap;
}
/* Structured read-mode render for list-shaped strategy fields. Role-grouped
   (Audience pain points) and flat line-lists get clean bullets + grouping
   instead of a pre-wrap blob; prose/doc fields keep the plain .value above. */
.strategy-cell .value-structured { white-space: normal; }
.strategy-cell .sv-group { margin-bottom: 18px; }
.strategy-cell .sv-group:last-child { margin-bottom: 0; }
.strategy-cell .sv-role {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 9px;
}
.strategy-cell .sv-role-name {
  font-family: 'Inter Tight', sans-serif;
  font-size: 13px; font-weight: 500;
  color: var(--text);
  letter-spacing: 0.01em;
}
.strategy-cell .sv-count {
  font-family: 'Manrope', sans-serif;
  font-size: 11px; font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-elev-2);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  min-width: 20px; height: 18px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
}
/* 'sections' read mode: the section body is pre-wrap prose under the
   sv-role title (Tone rules, Voice samples, Platform context). */
.strategy-cell .sv-body {
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
  white-space: pre-wrap;
}
/* 'sections' edit mode: the body textarea sits full-width under the title
   row (shares .sve-bullet's field styling). */
.strategy-cell .sve-body { width: 100%; }
.strategy-cell .sv-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 7px;
}
.strategy-cell .sv-item {
  position: relative;
  padding-left: 16px;
  font-family: 'Manrope', sans-serif;
  font-size: 14px; line-height: 1.55;
  color: var(--text-2);
}
.strategy-cell .sv-item::before {
  content: '•';
  position: absolute; left: 3px; top: 0;
  color: var(--text-dim);
  line-height: 1.55;
}
/* Structured edit-mode editor — mirrors the read layout (role groups + bullets)
   instead of a raw textarea. Used for list-shaped fields; prose keeps .edit-textarea. */
.strategy-cell .sv-editor { display: flex; flex-direction: column; gap: 14px; }
.strategy-cell .sve-group {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  padding: 14px;
}
.strategy-cell .sv-editor.is-flat .sve-group { border: none; background: transparent; padding: 0; }
.strategy-cell .sve-role-row { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.strategy-cell .sve-role {
  flex: 1; min-width: 0;
  padding: 8px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-family: 'Inter Tight', sans-serif;
  font-size: 13px; font-weight: 600;
  border-radius: var(--radius);
  outline: none; box-sizing: border-box;
}
.strategy-cell .sve-role:focus { border-color: var(--accent); }
.strategy-cell .sve-bullets { display: flex; flex-direction: column; gap: 8px; }
.strategy-cell .sve-item { display: flex; gap: 8px; align-items: flex-start; }
.strategy-cell .sve-bullet {
  flex: 1; min-width: 0;
  padding: 8px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-family: 'Manrope', sans-serif;
  font-size: 14px; line-height: 1.5;
  border-radius: var(--radius);
  outline: none; resize: none; overflow: hidden;
  box-sizing: border-box;
}
.strategy-cell .sve-bullet:focus { border-color: var(--accent); color: var(--text); }
/* Section bodies auto-grow to fit (native field-sizing), so long rules wrap and
   never clip. Transparent when idle so they take the card's tint (grey, like the
   pain fields), and lift to an elevated box on focus — beats clerk white .sve-bullet. */
.st2-shell .strategy-cell textarea.sve-body {
  field-sizing: content !important;
  width: 100% !important;
  min-height: 40px !important;
  overflow: hidden !important;
  resize: none !important;
  background: transparent !important;
  border-color: var(--border) !important;
}
.st2-shell .strategy-cell textarea.sve-body:focus {
  background: var(--bg-elev) !important;
  border-color: var(--accent) !important;
}
/* Locked 'sections' editor (Tone): each block is its own rounded card, exactly
   like the audience cards — bigger title, tinted background so the field reads grey. */
.sv-editor.is-locked { display: flex; flex-direction: column; gap: 14px; }
/* Group heading inside the locked Tone editor (Personality / Structure). */
.sve-group-label { font: 700 11px/1 'Inter Tight', system-ui, sans-serif; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-dim); margin: 6px 0 -2px; }
.sv-editor.is-locked > .sve-group-label:first-child { margin-top: 0; }
.sv-editor.is-locked .sve-group { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: rgba(0, 0, 0, 0.012); }
[data-theme="dark"] .sv-editor.is-locked .sve-group { background: rgba(255, 255, 255, 0.02); }
.sve-role-locked { font: 600 13px/1.2 'Manrope', system-ui, sans-serif; color: var(--text-2); margin: 0 0 8px; }
/* Numbered locked mode (Voice samples): caption + remove ✕ on one row, like the
   audience card head. */
.sv-editor.is-locked .sve-role-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; }
.sv-editor.is-locked .sve-role-head .sve-role-locked { margin: 0; }
.sv-editor.is-locked .sve-add-role { margin-top: 2px; }
.strategy-cell .sve-remove {
  flex: none;
  width: 30px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-dim);
  font-size: 12px; cursor: pointer; line-height: 1;
  transition: color var(--t), border-color var(--t);
}
.strategy-cell .sve-remove:hover { color: var(--accent); border-color: var(--accent); }
.strategy-cell .sve-add {
  align-self: flex-start;
  margin-top: 10px;
  padding: 6px 10px;
  background: transparent;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-family: 'Inter Tight', sans-serif;
  font-size: 12px; font-weight: 600; letter-spacing: 0.03em;
  cursor: pointer;
  transition: color var(--t), border-color var(--t);
}
.strategy-cell .sve-add:hover { color: var(--accent); border-color: var(--accent); }
.strategy-cell .sve-add-role { margin-top: 0; }
.strategy-cell .chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* Editable multi-select chips: each chip gets a hover ✕ to remove; the
   trailing dashed "+ Add" chip turns into an input on click. Auto-saves
   on every add or remove. */
.strategy-cell .chips.editable .chip {
  position: relative;
  padding-right: 28px;
}
/* The clerk skin sets .chip.pillar/.chip.audience to `padding: 3px 9px !important`
   (~line 12401), which clobbers the padding-right above that reserves room for the
   absolutely-positioned remove ✕ — so the ✕ lands on the text. Restore the right
   room at higher specificity + !important so it wins. */
[data-skin="clerk"] .strategy-cell .chips.editable .chip { padding-right: 26px !important; }
.strategy-cell .chips.editable .chip .chip-remove {
  position: absolute; right: 6px; top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  font-size: 11px; line-height: 1;
  color: var(--text-dim);
  background: transparent; border: 0; padding: 0;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: color var(--t), background var(--t);
}
.strategy-cell .chips.editable .chip:hover .chip-remove { color: var(--text-2); }
.strategy-cell .chips.editable .chip .chip-remove:hover { color: var(--accent); background: rgba(255,255,255,0.06); }
.strategy-cell .chip.chip-add {
  background: transparent;
  border: 1px dashed var(--border-strong);
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--t), border-color var(--t);
}
.strategy-cell .chip.chip-add:hover { color: var(--text); border-color: var(--accent); }
.strategy-cell .chip-input {
  background: var(--bg);
  border: 1px solid var(--accent);
  color: var(--text);
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 6px 12px;
  border-radius: 999px;
  outline: none;
  min-width: 140px;
}
.strategy-cell .chips-saving {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 10px; letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-left: 4px;
}
.strategy-cell.full { grid-column: 1 / -1; }

/* Three colors (primary / secondary / background) share one row. Wrapper
   spans the full outer grid width, then sub-grids 3 columns internally. */
.strategy-color-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
/* Row variants reused for the Type (2 fonts) and Website (1 field) cards so they
   inherit the same nested-cell label/edit treatment as the 3-up colour row. */
.strategy-color-row.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.strategy-color-row.is-one { grid-template-columns: 1fr; }
/* Always-on inline editors on the Brand's-identity page (opts.inline): the value
   IS a live field, autosaving on blur — no Edit/Save buttons. The bordered input
   sets it clearly apart from the small dim label above it. */
.strategy-cell .inline-input { width: 100%; box-sizing: border-box; margin-top: 2px; }
.strategy-cell .inline-textarea { width: 100%; box-sizing: border-box; margin-top: 2px; field-sizing: content; }
/* Inline prose textareas (Positioning, Visual identity prompt, …) hug their
   content, same recipe as the chevron fields. field-sizing sizes them to the
   text; force width:100% so it can't also shrink the WIDTH (which collapses the
   box and wraps the text into dozens of lines); overflow:hidden kills the
   scrollbar; and a 38px floor — just under a one-line box (~40px) — lets a
   single line hug with EVEN top/bottom padding instead of the empty gap the old
   120px / 52px floors left below the text. Multi-line grows; empty keeps 1 row. */
.st2-shell .strategy-cell textarea.inline-textarea {
  width: 100% !important;
  field-sizing: content !important;
  overflow: hidden !important;
  resize: none !important;
  min-height: 38px !important;
}
/* Audience targets & pain points editor: one bordered card per audience target,
   its title locked to the target (not editable), pains one-per-line beneath. */
.ap-editor { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.ap-help { margin: -4px 0 12px; }
.ap-card { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: rgba(0, 0, 0, 0.012); }
[data-theme="dark"] .ap-card { background: rgba(255, 255, 255, 0.02); }
/* "Pain points" caption above each audience's list. */
.ap-pain-label { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: var(--text-dim); margin: 2px 0 6px; }
.ap-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ap-role { font: 600 13px/1.2 Manrope, system-ui, sans-serif; color: var(--text-2); }
.ap-remove { border: 0; background: none; color: var(--text-dim); cursor: pointer; font-size: 13px; line-height: 1; padding: 4px; border-radius: 6px; }
.ap-remove:hover { color: var(--text); background: var(--bg-overlay); }
.ap-remove:disabled { opacity: 0.4; cursor: default; }
/* Pains as ONE chevron-bulleted textarea. A mirror layer (transparent text,
   identical box model) draws a › marker in the brand primary (var(--brand-accent))
   at each line start; the textarea underneath owns editing. The box-model props
   are forced identical on both layers at high specificity + !important so the
   clerk skin's `textarea !important` overrides can't misalign them. */
.ap-pf { position: relative; margin-bottom: 4px; }
.st2-shell :is(.strategy-cell, .founder-field) .ap-pf .ap-pf-ta,
.st2-shell :is(.strategy-cell, .founder-field) .ap-pf .ap-pf-mirror {
  font-family: 'Manrope', sans-serif !important;
  font-size: 14px !important; line-height: 1.65 !important; letter-spacing: 0 !important;
  padding: 10px 12px 10px 28px !important;
  border: 1px solid transparent !important; border-radius: 8px !important;
  box-sizing: border-box !important; width: 100% !important; margin: 0 !important;
  white-space: pre-wrap !important; overflow-wrap: anywhere !important; word-break: break-word !important;
}
.st2-shell :is(.strategy-cell, .founder-field) .ap-pf .ap-pf-ta {
  position: relative; z-index: 1; display: block;
  border-color: var(--border) !important; background: transparent !important;
  color: var(--text) !important; resize: none !important; overflow: hidden !important; min-height: 52px !important;
  field-sizing: content !important;   /* auto-grow to content, no scrollbar (Chromium 123+) */
}
.st2-shell :is(.strategy-cell, .founder-field) .ap-pf .ap-pf-ta::placeholder { color: var(--text-dim) !important; }
.st2-shell :is(.strategy-cell, .founder-field) .ap-pf .ap-pf-mirror {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden;
  color: transparent !important; background: transparent !important;
}
.ap-pf-line { position: relative; }
.ap-pf-line::before {
  content: '\203A'; position: absolute; left: -18px;
  color: var(--brand-accent, var(--accent)); font-weight: 700;
}
/* EVERY editable field across the Strategy panel reads the same: it blends into
   its card when idle (transparent) and lifts to an elevated box on focus. One
   broad rule so it covers every section — Brand, Voice, Visual, Operations — and
   every editor type (prose textareas, single-line inputs, structured list rows
   .sve-*, the timezone combobox, colour-hex, chip inputs, chevron pains/anti).
   Text inputs + textareas only (the colour swatch is type=color, untouched).
   Beats the clerk skin's always-white input/textarea (#fff !important). */
.st2-shell .strategy-cell textarea,
.st2-shell .strategy-cell input[type="text"],
.st2-shell .strategy-cell input:not([type]) {
  background: transparent !important; border-color: var(--border) !important;
}
.st2-shell .strategy-cell textarea:focus,
.st2-shell .strategy-cell input[type="text"]:focus,
.st2-shell .strategy-cell input:not([type]):focus {
  background: var(--bg-elev) !important; border-color: var(--accent) !important;
}
/* Founders use a display value + click-to-edit textarea (separate structure);
   give them the same idle-blend / focus-lift, beating the clerk white textarea. */
.founder-field-value { background: transparent; }
[data-skin="clerk"] .founder-edit-textarea { background: transparent !important; border-color: var(--border) !important; }
[data-skin="clerk"] .founder-edit-textarea:focus { background: var(--bg-elev) !important; border-color: var(--accent) !important; }
.ap-add { align-self: flex-start; }
.ap-add-input { max-width: 320px; }
/* Topics & point of view — each topic card carries its Stance + Why us. The
   fields mirror the pain textarea's skin-safe overrides so the clerk skin's
   `textarea !important` can't restyle them. */
.tp-headwrap { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tp-kind { font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.st2-shell :is(.strategy-cell, .founder-field) .tp-fld {
  font-family: 'Manrope', sans-serif !important;
  font-size: 14px !important; line-height: 1.6 !important; letter-spacing: 0 !important;
  width: 100% !important; box-sizing: border-box !important; display: block !important;
  color: var(--text) !important; background: transparent !important;
  border: 1px solid var(--border) !important; border-radius: 8px !important;
  padding: 8px 11px !important; margin: 0 0 8px !important;
  resize: none !important; overflow: hidden !important; min-height: 38px !important;
  white-space: pre-wrap !important; overflow-wrap: anywhere !important;
}
.st2-shell :is(.strategy-cell, .founder-field) .tp-fld:focus { border-color: var(--brand-accent, var(--accent)) !important; outline: none !important; }
.st2-shell :is(.strategy-cell, .founder-field) .tp-fld::placeholder { color: var(--text-dim) !important; }
.ap-empty { margin: 0 0 2px; }
.ap-status { display: inline-block; margin-top: 2px; }
.strategy-cell .inline-status { display: inline-block; margin-top: 6px; font-size: 11px; letter-spacing: 0.02em; color: var(--text-dim); min-height: 14px; }
.strategy-cell .inline-status.is-saved { color: #1a7f37; }
[data-theme="dark"] .strategy-cell .inline-status.is-saved { color: #4ac66a; }
@media (max-width: 720px) {
  .strategy-color-row, .strategy-color-row.is-two { grid-template-columns: 1fr; }
}
/* Colour identity cells: a swatch + hex, in both view and edit — instead of a
   plain hex string. The swatch opens the native picker; the hex box takes a
   typed code; the two stay in sync and drive a live preview. */
.strategy-cell .color-display { display: flex; align-items: center; gap: 10px; }
.strategy-cell .color-swatch {
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
  border: 1px solid var(--border, rgba(0,0,0,0.18));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
}
.strategy-cell .color-hex { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; text-transform: uppercase; letter-spacing: 0.02em; }
.strategy-cell .color-edit { display: flex; align-items: center; gap: 10px; }
.strategy-cell .color-edit-swatch {
  width: 46px; height: 36px; padding: 0; flex-shrink: 0; cursor: pointer;
  border: 1px solid var(--border, rgba(0,0,0,0.22)); border-radius: 8px;
  background: none; appearance: none; -webkit-appearance: none;
}
.strategy-cell .color-edit-swatch::-webkit-color-swatch-wrapper { padding: 3px; }
.strategy-cell .color-edit-swatch::-webkit-color-swatch { border: none; border-radius: 5px; }
.strategy-cell .color-edit-swatch::-moz-color-swatch { border: none; border-radius: 5px; }
.strategy-cell .color-edit-hex { width: 130px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }
/* "Brand's identity" page (Option 1): every part is its OWN bounded card —
   Logo + Brandmark two-up, Reference images, and Colors. The page keeps its 19px
   title (.brand-identity-page > .label) and help above the cards; each card names
   itself via .asset-subhead, so there are no separate group headings. */
.brand-identity-page .asset-slot,
.brand-identity-page .asset-ref-card,
.brand-identity-page .bi-color-card {
  border: 1px solid var(--border, #eeeef0); border-radius: 12px; padding: 16px 18px;
  background: rgba(0, 0, 0, 0.012);
}
[data-theme="dark"] .brand-identity-page .asset-slot,
[data-theme="dark"] .brand-identity-page .asset-ref-card,
[data-theme="dark"] .brand-identity-page .bi-color-card { background: rgba(255, 255, 255, 0.02); }
/* Vertical gap between the boxed cards so they don't butt up against each other. */
.brand-identity-page .asset-ref-card,
.brand-identity-page .bi-color-card { margin-bottom: 14px; }
.brand-identity-page .bi-color-card:last-child { margin-bottom: 0; }
/* Card title (Logo / Brandmark / Reference images / Colors): the .asset-subhead,
   reset to sit flush at the top of its card. */
.brand-identity-page .asset-slot .asset-subhead,
.brand-identity-page .asset-ref-card .asset-subhead,
.brand-identity-page .bi-color-card .asset-subhead { margin-top: 0 !important; margin-bottom: 12px; }
/* Nested colour labels demoted to compact captions. The clerk skin forces every
   `.st2-detail .strategy-cell .label` to 19px !important (see ~line 1090), so the
   demote must be more specific AND !important. */
[data-skin="clerk"] .st2-shell .st2-detail .brand-identity-page .strategy-color-row .strategy-cell .label {
  font-size: 11.5px !important; font-weight: 500 !important; letter-spacing: 0.02em;
  color: var(--text-dim, #8a8a94) !important;
  border-bottom: 0 !important; padding: 0 0 7px 0 !important; margin: 0 !important;
}
.st2-detail .brand-identity-page .strategy-color-row .strategy-cell .edit { position: static !important; }
.brand-identity-page .strategy-color-row .strategy-cell { margin: 0 !important; }
.brand-identity-page .strategy-color-row .strategy-cell .cell-actions { justify-content: flex-start; margin-top: 10px; }
.st2-shell.is-onepage .brand-identity-page .strategy-cell { border: 0 !important; background: none !important; padding: 0 !important; box-shadow: none !important; margin: 0 !important; }
.brand-identity-page .strategy-color-row { margin-top: 0; gap: 24px; }
/* Edit is a pill button that sits inline next to the Hide-content toggle
   (see .cell-actions), not an absolute top-right text link. Matches the
   toggle's chrome so the two read as a paired action row. */
.strategy-cell .edit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid #d9d9de;
  border-radius: 999px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--brand-accent, var(--accent));
  cursor: pointer;
  transition: color var(--t), border-color var(--t), background var(--t);
}
/* Label stays brand-coloured; the OUTLINE is gray at rest and turns brand on
   hover, where a translucent brand fill (8%) also appears. */
.strategy-cell .edit:hover { color: var(--brand-accent, var(--accent)); background: color-mix(in srgb, var(--brand-accent, var(--accent)) 8%, transparent); border-color: var(--brand-accent, var(--accent)); }
/* Paired action row under the value: [ ▴ Hide content ] [ Edit → ]. */
.strategy-cell .cell-actions { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.strategy-cell .cell-actions .cell-toggle,
.strategy-cell .cell-actions .edit { margin-top: 0; }
/* Show/Hide content toggle for collapsible cells. When collapsed the
   button sits inline below the help text and is the only interaction
   in the cell. When expanded it sits at the bottom of the value as
   an inline "▴ Hide content" affordance. */
.strategy-cell .cell-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 14px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--border, #eeeef0);
  border-radius: 999px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-dim);
  cursor: pointer;
  transition: color var(--t, 0.15s ease), border-color var(--t, 0.15s ease), background var(--t, 0.15s ease);
}
.strategy-cell .cell-toggle:hover {
  color: var(--text);
  border-color: var(--text);
}
/* When collapsed, the .value and .edit are not rendered. The toggle
   is the only visible interaction. Shrink top margin so the toggle
   sits closer to the help text it follows. */
.strategy-cell.is-collapsed .cell-toggle {
  margin-top: 12px;
}
/* The entire collapsed card is a click target — clicking the label,
   help text, or the toggle pill all expand the cell. Cursor and a
   subtle hover lift signal the affordance. */
.strategy-cell.is-collapsed {
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.strategy-cell.is-collapsed:hover {
  border-color: #d9d9de !important;
  background: #fafafa !important;
}
.strategy-cell .notion-link {
  position: absolute; top: 20px; right: 20px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-decoration: none;
  transition: color var(--t);
  display: inline-flex; align-items: center; gap: 4px;
}
.strategy-cell .notion-link:hover { color: var(--accent); }
.strategy-cell .edit-textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--accent);
  color: var(--text);
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  border-radius: var(--radius);
  outline: none;
  box-sizing: border-box;
}
.strategy-cell textarea.edit-textarea {
  min-height: 120px;
  resize: vertical;
}
/* Timezone picker (Settings) — a typeahead combobox mirroring the intake
   form's city picker: the same city list, stored as an IANA zone. */
.strategy-cell .tz-combo { position: relative; }
.strategy-cell .tz-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 5px); z-index: 40;
  max-height: 258px; overflow-y: auto;
  background: var(--bg-elev); border: 1px solid var(--accent);
  border-radius: var(--radius); box-shadow: 0 14px 34px rgba(0,0,0,0.28);
}
.strategy-cell .tz-menu[hidden] { display: none; }
.strategy-cell .tz-opt { padding: 9px 14px; font-size: 14px; line-height: 1.3; cursor: pointer; color: var(--text); }
.strategy-cell .tz-opt:hover, .strategy-cell .tz-opt.active { background: var(--accent); color: #fff; }
.strategy-cell .tz-opt b { font-weight: 700; }
.strategy-cell .tz-display .tz-city { color: var(--text); }
.strategy-cell .tz-display .tz-zone {
  margin-top: 3px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: var(--text-dim);
}
.strategy-cell .edit-actions { display: flex; gap: 8px; margin-top: 12px; }
.strategy-cell .edit-actions button {
  padding: 8px 14px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  color: var(--text);
  background: transparent;
  cursor: pointer;
  transition: border-color var(--t), color var(--t), background var(--t);
}
.strategy-cell .edit-actions button.save { background: var(--accent); border-color: var(--accent); color: #fff; }
.strategy-cell .edit-actions button.save:hover { background: var(--accent-hover); }
.strategy-cell .edit-actions button.cancel:hover { color: var(--accent); border-color: var(--accent); }
.strategy-cell .edit-actions button:disabled { opacity: 0.5; cursor: not-allowed; }
.strategy-footer {
  margin-top: 24px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ── Material map (Strategy tab) ─────────────────────────────────────────── */
.material-map { margin: 20px 0 4px; border: 1px solid var(--border, #e4e4e9); border-radius: 12px; padding: 18px 20px; background: var(--panel, transparent); }
/* Intake answers — read-only record of the client's onboarding-form submission. */
.ia-panel { margin: 20px 0 4px; }
.ia-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ia-title { font-size: 18px; font-weight: 650; letter-spacing: -.01em; color: var(--text); }
.ia-meta { font-size: 12px; color: var(--text-muted); margin-left: auto; }
.ia-refresh { background: none; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 12px; font-weight: 600; color: var(--text-muted); padding: 4px 10px; cursor: pointer; }
.ia-refresh:hover { color: var(--text); }
.ia-sub { font-size: 13px; color: var(--text-muted); margin: 6px 0 16px; max-width: 640px; }
.ia-group { border: 1px solid var(--border); border-radius: 12px; padding: 2px 18px 10px; margin-bottom: 14px; background: var(--panel, transparent); }
.ia-group-title { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); padding: 13px 0 2px; }
.ia-field { padding: 11px 0; border-top: 1px solid var(--border); }
.ia-group-title + .ia-field, .ia-group > .ia-field:first-child { border-top: none; }
.ia-label { font-size: 12.5px; font-weight: 650; color: var(--text); margin-bottom: 5px; }
.ia-value { font-size: 13.5px; color: var(--text); line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.ia-value.muted { color: var(--text-muted); font-style: italic; }
.ia-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ia-chip { font-size: 12.5px; padding: 3px 10px; border-radius: 100px; background: var(--bg-elev, rgba(0,0,0,.05)); border: 1px solid var(--border); color: var(--text); }
.ia-founder { padding: 11px 0; border-top: 1px solid var(--border); }
.ia-founder:first-child { border-top: none; }
.ia-founder-name { font-size: 13.5px; font-weight: 650; color: var(--text); margin-bottom: 6px; }
.ia-founder .ia-field { padding: 7px 0; border-top: none; }
.ia-founder .ia-label { font-weight: 600; color: var(--text-muted); }
.ia-empty { font-size: 13px; color: var(--text-muted); padding: 14px 0; }
.mm-head { display: flex; align-items: center; gap: 10px; }
.mm-title { font-weight: 600; font-size: 14px; color: var(--text, #131316); }
.mm-meta { font-size: 11px; color: var(--text-dim, #8a8a94); margin-left: auto; }
.mm-refresh, .mm-strip-btn { font-size: 11px; padding: 3px 12px; border-radius: 999px; border: 1px solid var(--border, #e4e4e9); background: transparent; color: var(--text, inherit); cursor: pointer; white-space: nowrap; }
.mm-refresh:hover, .mm-strip-btn:hover { border-color: var(--text-dim, #b9b9c4); }
.mm-sub { font-size: 12px; color: var(--text-dim, #6f6f7a); margin: 4px 0 12px; max-width: 640px; }
.mm-healths { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin: 4px 0 14px; }
.mm-health { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; background: rgba(0,0,0,0.035); min-width: 0; }
.mm-health-pct { font-size: 24px; font-weight: 700; line-height: 1; flex: none; }
.mm-health-pct.good { color: #1D9E75; }
.mm-health-pct.warn { color: #BA7517; }
.mm-health-pct.bad { color: #A32D2D; }
.mm-health-body { flex: 1; min-width: 0; }
.mm-health-label { font-size: 12.5px; font-weight: 600; color: var(--text, #131316); }
.mm-health-sub { font-size: 11.5px; color: var(--text-dim, #8a8a94); }
.mm-health-bar { margin-top: 6px; height: 6px; border-radius: 3px; background: rgba(0,0,0,0.09); overflow: hidden; }
.mm-health-bar > div { height: 100%; }
.mm-health-bar > div.good { background: #1D9E75; }
.mm-health-bar > div.warn { background: #EF9F27; }
.mm-health-bar > div.bad { background: #E24B4A; }
[data-theme="dark"] .mm-health { background: rgba(255,255,255,0.05); }
[data-theme="dark"] .mm-health-bar { background: rgba(255,255,255,0.12); }
.mm-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.mm-tile { border-radius: 10px; padding: 11px 14px; background: rgba(0,0,0,0.035); }
.mm-tile-label { font-size: 11.5px; color: var(--text-dim, #6f6f7a); }
.mm-tile-value { font-size: 20px; font-weight: 600; color: var(--text, #131316); line-height: 1.4; }
.mm-tile-sub { font-size: 11px; color: var(--text-dim, #8a8a94); }
.mm-tiles.mini { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0 0; }
.mm-tiles.mini .mm-tile { padding: 8px 12px; }
.mm-tiles.mini .mm-tile-value { font-size: 15px; }
.mm-lane { margin-top: 18px; }
.mm-lane-head { display: flex; align-items: center; gap: 10px; }
.mm-lane-title { font-size: 14px; font-weight: 600; color: var(--text, #131316); flex: none; }
.mm-lane-bar { flex: 0 1 170px; height: 5px; border-radius: 3px; background: rgba(0,0,0,0.09); overflow: hidden; }
.mm-lane-bar > div { height: 100%; background: #2a9d6b; }
.mm-lane-sum { font-size: 11.5px; color: var(--text-dim, #8a8a94); }
/* Per-lane health gauge in the lane header (replaces the two stacked gauges
   that used to sit at the top of the whole map). */
.mm-lane-pct { font-size: 15px; font-weight: 700; line-height: 1; flex: none; min-width: 52px; text-align: right; white-space: nowrap; }
.mm-lane-pct.good { color: #1D9E75; } .mm-lane-pct.warn { color: #BA7517; } .mm-lane-pct.bad { color: #A32D2D; }
.mm-lane-gaugebar { flex: 0 1 160px; margin-left: auto; height: 6px; border-radius: 3px; background: rgba(0,0,0,0.09); overflow: hidden; }
.mm-lane-gaugebar > div { height: 100%; border-radius: 3px; }
.mm-lane-gaugebar > div.good { background: #1D9E75; } .mm-lane-gaugebar > div.warn { background: #EF9F27; } .mm-lane-gaugebar > div.bad { background: #E24B4A; }
.mm-lane-metaline { font-size: 12px; color: var(--text-dim, #8a8a94); margin: 6px 0 0; }
[data-theme="dark"] .mm-lane-gaugebar { background: rgba(255,255,255,0.12); }
.mm-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
.mm-col { background: rgba(0,0,0,0.035); border-radius: 10px; padding: 11px 12px; min-width: 0; }
.mm-col-head { display: flex; align-items: center; gap: 7px; }
.mm-col-name { font-size: 12.5px; font-weight: 600; color: var(--text, #131316); }
.mm-col-count { margin-left: auto; font-size: 12px; color: var(--text-dim, #8a8a94); }
.mm-col-sub { font-size: 10.5px; color: var(--text-dim, #9a9aa4); margin: 2px 0 9px; }
/* Per-mode open-slot chips under a founder's capacity tiles — the selected
   generate mode is highlighted so the map matches the batch about to run. */
.mm-mode-caps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 2px; font-size: 11.5px; }
.mm-mode-caps-label { color: var(--text-dim, #8a8a94); }
.mm-mode-cap { font: inherit; font-size: 11.5px; padding: 3px 11px; border-radius: 999px; border: 1px solid var(--border, #e4e4e9); background: transparent; color: var(--text-dim, #8a8a94); white-space: nowrap; cursor: pointer; }
.mm-mode-cap:hover { border-color: var(--text-dim, #b9b9c4); color: var(--text, #131316); }
.mm-mode-cap.sel { border-color: #1D9E75; color: var(--text, #131316); font-weight: 600; background: color-mix(in srgb, #2a9d6b 12%, transparent); }
[data-theme="dark"] .mm-mode-cap { border-color: #2a2a33; }
[data-theme="dark"] .mm-mode-cap.sel { color: #f4f4f6; }
.mm-dots { display: inline-flex; gap: 2px; align-items: center; flex: none; }
.mm-dot { width: 7px; height: 7px; border-radius: 50%; }
.mm-dot.on { background: #1D9E75; }
.mm-dot.dim { background: transparent; border: 1px solid #7fcbae; }
.mm-dot.off { background: transparent; border: 1px solid #b6b6c0; }
.mm-card { font-size: 11.5px; line-height: 1.45; padding: 6px 9px; border-radius: 6px; background: color-mix(in srgb, #2a9d6b 12%, transparent); color: #1e7a52; margin-bottom: 5px; cursor: pointer; }
.mm-card:hover { background: color-mix(in srgb, #2a9d6b 18%, transparent); }
.mm-card-tag { font-size: 10px; letter-spacing: 0.03em; color: #157a55; margin-bottom: 1px; }
.mm-card-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mm-card.is-open .mm-card-text { -webkit-line-clamp: unset; overflow: visible; }
.mm-card.resting { background: transparent; border: 1px solid var(--border, #e4e4e9); color: var(--text-dim, #9a9aa4); }
.mm-card.resting:hover { border-color: var(--text-dim, #b9b9c4); background: color-mix(in srgb, var(--text, #131316) 3%, transparent); }
.mm-card.resting .mm-card-tag { color: var(--text-dim, #9a9aa4); }
.mm-more-row { font-size: 11.5px; color: var(--text-dim, #8a8a94); padding: 2px 2px; cursor: pointer; }
.mm-more-row:hover { color: var(--text, #131316); }
.mm-col-empty { font-size: 11.5px; color: var(--text-dim, #9a9aa4); padding: 2px 0; }
.mm-strip { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 12px; border-radius: 8px; font-size: 12px; }
.mm-strip .mm-strip-btn { margin-left: auto; }
.mm-strip.warn { background: #faeeda; color: #633806; }
.mm-strip.alert { background: #fcebeb; color: #791f1f; }
.mm-camp-row { display: flex; align-items: baseline; gap: 10px; padding: 8px 12px; border-radius: 8px; background: rgba(0,0,0,0.035); margin-top: 6px; min-width: 0; }
.mm-camp-name { font-size: 12.5px; font-weight: 600; color: var(--text, #131316); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-camp-meta { font-size: 11.5px; color: var(--text-dim, #8a8a94); margin-left: auto; flex: none; text-align: right; }
[data-theme="dark"] .mm-camp-row { background: rgba(255,255,255,0.05); }
.mm-camps-note { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--text-dim, #8a8a94); margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border, #e4e4e9); }
.mm-camps-note > span { flex: 1; min-width: 0; }
[data-theme="dark"] .mm-camps-note { border-top-color: #2a2a33; }
.mm-hint { margin-top: 10px; font-size: 12px; color: var(--text-dim, #6f6f7a); }
.mm-empty { font-size: 12px; color: var(--text-dim, #8a8a94); padding: 4px 0; }
.mm-flash { outline: 2px solid #2a9d6b; outline-offset: 4px; border-radius: 6px; transition: outline-color 0.4s; }
[data-theme="dark"] .material-map { border-color: #2a2a33; }
[data-theme="dark"] .mm-tile, [data-theme="dark"] .mm-col { background: rgba(255,255,255,0.05); }
[data-theme="dark"] .mm-lane-bar { background: rgba(255,255,255,0.12); }
[data-theme="dark"] .mm-card { background: color-mix(in srgb, #3ddc97 14%, transparent); color: #57c690; }
[data-theme="dark"] .mm-card-tag { color: #3fa578; }
[data-theme="dark"] .mm-card.resting { border-color: #2a2a33; color: #6e6e7a; background: transparent; }
[data-theme="dark"] .mm-card.resting .mm-card-tag { color: #6e6e7a; }
[data-theme="dark"] .mm-dot.off { border-color: #4a4a55; }
[data-theme="dark"] .mm-refresh, [data-theme="dark"] .mm-strip-btn { border-color: #2a2a33; }
[data-theme="dark"] .mm-strip.warn { background: #33270f; color: #e4bd72; }
[data-theme="dark"] .mm-strip.alert { background: #351617; color: #e89b9b; }

/* Learned voice rules — the edit-memory review queue on Strategy → Voice.
   Operator-only (the section is only built for admins; the CSS guard below
   is cosmetic defense-in-depth, the Worker is the real gate). */
html[data-org-role="member"] #lvr-section { display: none; }
.lvr-stack { display: flex; flex-direction: column; gap: 12px; }
.lvr-status { display: flex; align-items: center; gap: 8px; font-family: 'Inter Tight', sans-serif; font-size: 12px; color: var(--text-muted); }
.lvr-status .lvr-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); flex: none; }
.lvr-status.is-stale { color: var(--warn); }
.lvr-status.is-stale .lvr-dot { background: var(--warn); }
.lvr-group { font-family: 'Inter Tight', sans-serif; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-top: 10px; }
.lvr-how { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; margin-top: 4px; }
.lvr-ev { font-size: 11.5px; color: var(--text-dim); line-height: 1.5; }
/* Inbox rows (Bryan's pick, 2026-07-12): one scannable line per entry —
   chevron · chip · rule · evidence · actions — expanding to the receipts. */
.lvr-list { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elev); overflow: hidden; }
.lvr-item { border-top: 1px solid var(--border); }
.lvr-item:first-child { border-top: none; }
.lvr-item.is-open { background: var(--bg-elev-2); }
.lvr-line { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; }
.lvr-item:not(.is-open) .lvr-line:hover { background: var(--bg-elev-2); }
.lvr-caret { color: var(--text-dim); font-size: 10px; flex: none; width: 11px; }
.lvr-line-rule { flex: 1; min-width: 0; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lvr-item.is-open .lvr-line-rule { white-space: normal; }
.lvr-line-rule.is-struck { text-decoration: line-through; color: var(--text-muted); font-weight: 400; }
.lvr-line-rule.is-tip { color: var(--text-2); font-weight: 400; }
.lvr-line-ev { flex: none; }
.lvr-line-actions { display: flex; gap: 8px; flex: none; }
.lvr-details { padding: 0 14px 13px 35px; }
.lvr-det-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0 8px; }
/* The receipt, side-by-side like a review: what it wrote vs what you kept. */
.lvr-sbs { display: flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-top: 8px; }
.lvr-sbs .lvr-col { flex: 1; padding: 9px 11px; font-size: 12px; line-height: 1.5; color: var(--text-2); white-space: pre-wrap; min-width: 0; }
.lvr-sbs .lvr-col.before { background: rgba(255,48,48,0.07); }
.lvr-sbs .lvr-col.after { background: rgba(0,200,83,0.07); border-left: 1px solid var(--border); }
.lvr-col-tag { font-family: 'Inter Tight', sans-serif; font-size: 9.5px; letter-spacing: 0.06em; font-weight: 600; margin-bottom: 3px; }
.lvr-sbs .lvr-col.before .lvr-col-tag { color: var(--danger); }
.lvr-sbs .lvr-col.after .lvr-col-tag { color: var(--success); }
/* Hold the outline visibly, then fade — the "you were sent here" beat. */
@keyframes lvr-jump-flash { 0%, 55% { border-color: var(--warn); box-shadow: 0 0 0 3px rgba(255,184,0,0.22); } 100% { border-color: var(--border); box-shadow: none; } }
.strategy-cell.lvr-jump-flash { animation: lvr-jump-flash 2.4s ease-out; }
.lvr-rows { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elev); padding: 2px 14px; }
.lvr-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-2); }
.lvr-row:first-child { border-top: none; }
.lvr-row .lvr-row-rule { flex: 1; min-width: 0; }
.lvr-row.is-closed .lvr-row-rule { color: var(--text-dim); text-decoration: line-through; }
.lvr-history { font-size: 11.5px; color: var(--text-dim); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lvr-history button { background: none; border: none; color: var(--text-muted); font: inherit; cursor: pointer; text-decoration: underline; padding: 0; }
.lvr-empty { font-size: 13px; color: var(--text-muted); }

.chip {
  display: inline-flex; align-items: center;
  padding: 6px 12px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  background: var(--bg-elev-2);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-2);
}
.chip.accent { color: var(--accent); border-color: var(--accent); }
.chip.success { color: var(--success); border-color: rgba(0,200,83,0.4); }
.chip.warn { color: var(--warn); border-color: rgba(255,184,0,0.4); }
.chip.muted { color: var(--text-muted); }
/* Source back-link chips on idea cards (⚑ campaign name / 📰 news
   headline) — clickable, jump to their source. Brand-accent treatment
   (same color-mix recipe as the reader selection pill) so the timely
   anchors pop against the grey pillar/audience chips. Match clerk-skin
   chip specificity (0,4,0) + add .campaign/.news so the chip wins the
   skin's chip override at 0,5,0. */
.chip.campaign,
.chip.news {
  cursor: pointer;
  color: color-mix(in srgb, var(--brand-accent, #ff3d00) 72%, #131316);
  border: 1px solid color-mix(in srgb, var(--brand-accent, #ff3d00) 45%, #fff);
  background: color-mix(in srgb, var(--brand-accent, #ff3d00) 9%, #fff);
  font-weight: 500;
  max-width: 220px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chip.campaign { padding-right: 14px; }
.chip.campaign::before {
  content: '⚑';
  font-size: 11px;
  color: inherit;
  opacity: 0.75;
  line-height: 1;
  flex-shrink: 0;
}
/* Newspaper icon — the same line-drawn SVG as the News Feed page title
   (stroke: currentColor, so it inherits the chip's accent text color).
   The ▤ glyph before it read as a hatched box at chip size. */
.chip.news .chip-icon { display: inline-flex; flex-shrink: 0; opacity: 0.85; }
.chip.news .chip-icon svg { width: 12px; height: 12px; display: block; }
.chip.campaign > .chip-label,
.chip.news > .chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.chip.campaign:hover,
.chip.news:hover {
  background: color-mix(in srgb, var(--brand-accent, #ff3d00) 15%, #fff);
  border-color: var(--brand-accent, #ff3d00);
}

/* Clerk skin overrides — match the depth of [data-skin="clerk"]
   .idea-card .meta .chip (0,4,0) AND add .campaign to land at 0,5,0
   (light) / 0,6,0 (dark) and win the skin override. */
[data-skin="clerk"] .idea-card .meta .chip.campaign,
[data-skin="clerk"] .ideas-grid .meta .chip.campaign,
[data-skin="clerk"] .idea-card .meta .chip.news,
[data-skin="clerk"] .ideas-grid .meta .chip.news {
  background: color-mix(in srgb, var(--brand-accent, #ff3d00) 9%, #fff) !important;
  border: 1px solid color-mix(in srgb, var(--brand-accent, #ff3d00) 45%, #fff) !important;
  color: color-mix(in srgb, var(--brand-accent, #ff3d00) 72%, #131316) !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  padding: 3px 14px 3px 9px !important;
}
[data-skin="clerk"] .idea-card .meta .chip.campaign:hover,
[data-skin="clerk"] .ideas-grid .meta .chip.campaign:hover,
[data-skin="clerk"] .idea-card .meta .chip.news:hover,
[data-skin="clerk"] .ideas-grid .meta .chip.news:hover {
  background: color-mix(in srgb, var(--brand-accent, #ff3d00) 15%, #fff) !important;
  border-color: var(--brand-accent, #ff3d00) !important;
}
[data-skin="clerk"][data-theme="dark"] .idea-card .meta .chip.campaign,
[data-skin="clerk"][data-theme="dark"] .ideas-grid .meta .chip.campaign,
[data-skin="clerk"][data-theme="dark"] .idea-card .meta .chip.news,
[data-skin="clerk"][data-theme="dark"] .ideas-grid .meta .chip.news {
  background: color-mix(in srgb, var(--brand-accent, #ff3d00) 14%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--brand-accent, #ff3d00) 45%, transparent) !important;
  color: color-mix(in srgb, var(--brand-accent, #ff3d00) 60%, #ffffff) !important;
}
[data-skin="clerk"][data-theme="dark"] .idea-card .meta .chip.campaign:hover,
[data-skin="clerk"][data-theme="dark"] .ideas-grid .meta .chip.campaign:hover,
[data-skin="clerk"][data-theme="dark"] .idea-card .meta .chip.news:hover,
[data-skin="clerk"][data-theme="dark"] .ideas-grid .meta .chip.news:hover {
  background: color-mix(in srgb, var(--brand-accent, #ff3d00) 22%, transparent) !important;
  border-color: color-mix(in srgb, var(--brand-accent, #ff3d00) 70%, transparent) !important;
}
/* Pulsing variant for in-progress states (e.g. Library cards mid-draft).
   Pairs with a leading .chip-dot rendered inside the chip. */
.chip.pulse {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--accent);
  border-color: rgba(255,61,0,0.4);
  background: rgba(255,61,0,0.06);
}
.chip-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  animation: chip-pulse 1.4s ease-in-out infinite;
}
@keyframes chip-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50%      { opacity: 1;    transform: scale(1.1); }
}
.library-card.is-generating { cursor: default; opacity: 0.92; }
.library-card.is-generating:hover { transform: none; }

/* — Cards vs List view toggle in the saved-ideas toolbar — */
.library-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elev);
}
.library-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 24px;
  border: 0;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-dim);
  padding: 0;
  transition: background var(--t), color var(--t);
}
.library-view-btn:hover { color: var(--text); }
.library-view-btn.active {
  background: var(--bg-elev-2);
  color: var(--text);
}
.library-view-btn svg { width: 14px; height: 14px; display: block; }

/* — List view rows (operator preference toggled from .library-view-btn) — */
.library-list { display: flex; flex-direction: column; gap: 6px; }
.library-row {
  display: grid;
  grid-template-columns: minmax(90px, auto) 1fr auto auto;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color var(--t), background var(--t);
}
.library-row:hover { border-color: var(--border-strong); background: var(--bg-elev-2); }
.library-row.is-generating { cursor: default; opacity: 0.9; }
.library-row.is-generating:hover { background: var(--bg-elev); border-color: var(--border); }
/* Center status chips horizontally inside their grid column so all rows
   share a common chip centerline regardless of label width ("Studio" vs
   "In review" vs "Changes needed"). Without this, varying-width chips read
   as ragged left-aligned blocks. */
.library-row > .chip { justify-self: center; }
.library-row-title {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.library-row-time {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  white-space: nowrap;
}
.library-row-open {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 600 11.5px/1 'Manrope', system-ui, sans-serif;
  color: var(--text-dim);
  white-space: nowrap;
}
.library-row:hover .library-row-open { color: var(--text); }

/* ===== Ideas tab ===== */
.idea-card {
  border: 1px solid var(--border);
  background: var(--bg-elev);
  padding: 28px;
  border-radius: var(--radius);
  display: flex; flex-direction: column; gap: 14px;
  transition: border-color var(--t), background var(--t);
  cursor: pointer;
  position: relative;
}
.idea-card:hover { border-color: var(--border-strong); background: var(--bg-elev-2); }
/* Ideas with an existing asset get a left accent stripe + slightly tinted bg.
   Visual hierarchy: drafts vs already-expanded. */
.idea-card.has-asset {
  border-left: 3px solid var(--success);
  padding-left: 25px;
}
.idea-card .meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.idea-card .meta .meta-date {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 10px; letter-spacing: 0.04em;
  color: var(--text-dim);
  margin-left: auto;
  padding-right: 28px;
}
.idea-card .title {
  font-family: 'Inter Tight', sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--text);
}
.idea-card .core {
  color: #56565c;
  font-size: 14px;
  line-height: 1.55;
}
/* Specificity bump — theme overlay (hybrid.css) sets var(--text-2) on .idea-card .core. */
html body .idea-card .core { color: #56565c; }
/* Labeled brief rows (Anchor / Angle) inside the card body. The container
   keeps .core so every skin's body-text rules still color the text spans;
   the grid only adds structure. Same quiet-label register as the news
   reader's Summary / Why it matters. */
.idea-card .idea-brief {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 5px 14px;
}
.idea-card .idea-brief-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.6;
}
.idea-card .idea-brief-text { min-width: 0; }
/* Dollar-figure warning surfaced from WF01's guard (idea.notes). Amber, readable in both themes. */
.idea-card .figure-flag {
  align-self: flex-start;   /* shrink to content width instead of stretching full-width */
  max-width: 100%;
  font-size: 12px;
  line-height: 1.45;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 6px;
  padding: 4px 10px;
  margin-top: 2px;
}
[data-theme="dark"] .idea-card .figure-flag {
  color: #fcd34d;
  background: rgba(252, 211, 77, 0.08);
  border-color: rgba(252, 211, 77, 0.35);
}
.idea-card .actions { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 4px; }
/* Discard — secondary destructive action sitting next to Save. Neutral by
   default (matches the clerk-skin .idea-card button outline); turns red
   on hover so the destructive intent is clear without screaming at rest. */
.idea-card .discard-btn { cursor: pointer; font-family: inherit; }
.idea-card .discard-btn:hover {
  color: #d04141;
  border-color: rgba(208, 65, 65, 0.45);
  background: rgba(208, 65, 65, 0.06);
}
[data-skin="clerk"] .idea-card .discard-btn:hover {
  color: #d04141 !important;
  border-color: rgba(208, 65, 65, 0.45) !important;
  background: rgba(208, 65, 65, 0.06) !important;
}
[data-skin="clerk"][data-theme="dark"] .idea-card .discard-btn:hover {
  color: #ff8484 !important;
  border-color: rgba(255, 132, 132, 0.5) !important;
  background: rgba(255, 132, 132, 0.08) !important;
}
.idea-card .expand {
  font-family: 'Inter Tight', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--accent);
  transition: gap var(--t);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.idea-card .expand:hover { gap: 10px; }
/* Save-idea heart — outlined by default, animates pink-fill + pop on card hover. */
.save-heart {
  display: inline-flex;
  align-items: center;
  transition: transform 0.2s var(--aur-ease, ease);
  line-height: 0;
}
.save-heart svg { display: block; overflow: visible; }
.save-heart svg path {
  fill: transparent;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linejoin: round;
  transition: fill 0.24s var(--aur-ease, ease), stroke 0.24s var(--aur-ease, ease);
}
.idea-card:hover .save-heart {
  animation: save-heart-pop 0.75s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center;
}
.idea-card:hover .save-heart svg path {
  fill: var(--text);
  stroke: var(--text);
}
@keyframes save-heart-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.35); }
  70%  { transform: scale(0.94); }
  100% { transform: scale(1); }
}
.idea-card .delete-btn {
  position: absolute; top: 14px; right: 14px;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter Tight', sans-serif;
  font-size: 14px; line-height: 1;
  color: var(--text-dim);
  background: transparent;
  border: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--t), color var(--t);
}
.idea-card:hover .delete-btn { opacity: 1; }
.idea-card .delete-btn:hover { color: var(--danger); }
.idea-card.deleting { opacity: 0.4; pointer-events: none; }
/* Filter result count next to filter rows. */
.filter-count {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 10px; letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 24px;
  padding: 8px 0;
}
.filter-count strong { color: var(--text); font-weight: 500; }

/* Multi-select checkbox on idea + approval cards. Hidden until the user
   hovers the card or has at least one selection active. */
.bulk-checkbox {
  position: absolute; top: 14px; left: 14px;
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--bg-elev-2);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--t), border-color var(--t), background var(--t);
  z-index: 2;
}
.idea-card:hover .bulk-checkbox,
.kanban-card:hover .bulk-checkbox,
.has-selection .bulk-checkbox { opacity: 1; }
.bulk-checkbox.checked {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.bulk-checkbox.checked::after { content: "✓"; font-size: 12px; font-weight: 700; }
.idea-card.selected, .kanban-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.idea-card.selected { padding-left: 25px; }

/* Sticky bulk-action bar that slides down from the appbar when N>0 are picked. */
.bulk-bar {
  position: sticky; top: 60px; z-index: 90;
  display: flex; align-items: center; gap: 16px;
  padding: 12px 20px;
  background: var(--bg-elev);
  border: 1px solid var(--accent);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  margin-bottom: 16px;
}
.bulk-bar .bulk-count {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 12px; letter-spacing: 0.06em;
  color: var(--text);
  font-feature-settings: "tnum" 1;
}
.bulk-bar .bulk-count strong {
  font-weight: 600; color: var(--accent);
}
.bulk-bar .bulk-actions { display: flex; gap: 8px; margin-left: auto; }

/* Command palette (⌘+K) — overlay + filtered list + group headers. */
#cmdk-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  display: none;
  align-items: flex-start; justify-content: center;
  padding-top: 12vh;
  z-index: 2000;
}
#cmdk-overlay.show { display: flex; }
.cmdk-card {
  width: 640px; max-width: calc(100vw - 32px);
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  display: flex; flex-direction: column;
  max-height: 70vh;
  overflow: hidden;
}
.cmdk-input {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  padding: 18px 22px;
  outline: none;
}
.cmdk-input::placeholder { color: var(--text-muted); }
.cmdk-results {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 0;
}
.cmdk-empty {
  padding: 32px 22px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
.cmdk-group-label {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-muted);
  padding: 12px 22px 6px;
}
.cmdk-item {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 22px;
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background var(--t), border-color var(--t);
}
.cmdk-item:hover, .cmdk-item.active {
  background: var(--bg-elev-2);
  border-left-color: var(--accent);
}
.cmdk-item .cmdk-kind {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-muted);
  min-width: 70px;
}
.cmdk-item .cmdk-title {
  font-size: 14px; color: var(--text);
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cmdk-item .cmdk-hint {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 10px; color: var(--text-dim);
  letter-spacing: 0.04em;
}
.cmdk-foot {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 22px;
  border-top: 1px solid var(--border);
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 10px; letter-spacing: 0.06em;
  color: var(--text-muted);
}
.cmdk-foot kbd {
  font-family: inherit;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  padding: 2px 6px;
  margin-right: 4px;
}

/* Shortcut cheatsheet (?) — same overlay pattern, smaller card. */
#cheats-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  display: none;
  align-items: center; justify-content: center;
  z-index: 1900;
}
#cheats-overlay.show { display: flex; }
.cheats-card {
  width: 480px; max-width: calc(100vw - 32px);
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 28px;
}
.cheats-card h3 {
  font-family: 'Inter Tight', sans-serif;
  font-size: 16px; font-weight: 600;
  letter-spacing: -0.01em; margin-bottom: 18px;
}
.cheats-list {
  display: flex; flex-direction: column; gap: 10px;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
}
.cheats-list .cheat-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.cheats-list .cheat-row:last-child { border-bottom: 0; }
.cheats-list kbd {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 11px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  padding: 3px 8px;
  margin-left: 4px;
  color: var(--text);
}
.cheats-list .cheat-desc { color: var(--text-2); }

.ideas-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
/* Full-width section divider inside the ideas grid ("Just generated" / "Earlier"). */
.ideas-section-divider {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 2px 0;
}
.ideas-section-divider .isd-label { font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; white-space: nowrap; }
.ideas-section-divider .isd-count { background: rgba(30, 125, 80, 0.12); color: #1e7d50; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.ideas-section-divider .isd-line { flex: 1; height: 1px; background: var(--border, rgba(120, 120, 120, 0.14)); }
/* Subtle green "New" chip on a just-generated card. */
/* Must out-specify [data-skin="clerk"] .idea-card .meta .chip (0,4,0), which
   forces every idea-card chip grey with !important — so match at 0,5,0. */
[data-skin="clerk"] .idea-card .meta .chip.idea-new,
[data-skin="clerk"] .ideas-grid .meta .chip.idea-new { background: rgba(30, 125, 80, 0.14) !important; border: 1px solid rgba(30, 125, 80, 0.42) !important; color: #1e7d50 !important; display: inline-flex !important; align-items: center; gap: 5px; }
[data-skin="clerk"][data-theme="dark"] .idea-card .meta .chip.idea-new,
[data-skin="clerk"][data-theme="dark"] .ideas-grid .meta .chip.idea-new { background: rgba(30, 125, 80, 0.18) !important; border-color: rgba(30, 125, 80, 0.46) !important; color: #5fc287 !important; }
.chip.idea-new .idea-new-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.filter-group { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; }
.filter-group:last-of-type { margin-bottom: 24px; }

/* ─── Campaigns tab ──────────────────────────────────────────────── */
.campaign-filters {
  display: flex;
  gap: 20px;
  margin: 8px 0 24px;
  border-bottom: 1px solid var(--border);
}
.campaign-filter {
  padding: 9px 2px;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  border-radius: 0;
  background: transparent;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: color var(--t), border-color var(--t);
}
.campaign-filter:hover { color: var(--text); }
/* Status-colored dot + active underline — mirrors the Library status tabs
   (--cfd plays the role the Library's --lfc does). Hues = the canonical campaign
   status colors used by the status pills + calendar bars. */
.campaign-filter[data-campaign-status="Active"]   { --cfd: #e54545; }
.campaign-filter[data-campaign-status="Planned"]  { --cfd: #c08a18; }
.campaign-filter[data-campaign-status="Done"]     { --cfd: #2e9b56; }
.campaign-filter[data-campaign-status="Archived"] { --cfd: #9ca3af; }
[data-theme="dark"] .campaign-filter[data-campaign-status="Active"]  { --cfd: #ff8484; }
[data-theme="dark"] .campaign-filter[data-campaign-status="Planned"] { --cfd: #f0c258; }
[data-theme="dark"] .campaign-filter[data-campaign-status="Done"]    { --cfd: #5fc287; }
.campaign-filter-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cfd, #9ca3af); flex-shrink: 0;
}
.campaign-filter.is-active {
  color: var(--text);
  border-bottom-color: var(--cfd, var(--text));
}
.campaign-filter-count {
  font-size: 12px;
  font-weight: 500;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  opacity: 0.5;
}
.campaign-filter.is-active .campaign-filter-count { opacity: 0.6; }

/* ── News Feed ──────────────────────────────────────────────────
   Curation cards for scanner-discovered niche news. Reuses the
   campaign-filter chip row; cards are read-heavy (headline links out
   to the source), actions are Shortlist / Dismiss. The sticky tray
   hands the shortlist into the Generate panel. */
/* Reader layout (Option C): compact story list left, detail pane right —
   the email-client pattern. The list is for scanning; the detail pane is
   where the triage decision (generate / shortlist / dismiss) happens. */
.news-reader {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-elev);
  overflow: hidden;
  min-height: 420px;
  margin-bottom: 24px;
}
.news-side {
  border-right: 1px solid var(--border);
  padding: 6px;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 72vh;
  outline: none;
}
.news-side-item {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 2px;
}
.news-side-item:hover { background: var(--bg-elev-2); }
/* Selected = the brand-accent pill treatment (same recipe as
   .ideas-pill.is-active): faint accent tint + accent border + darkened
   accent title. --brand-accent tracks the per-brand colour. */
.news-side-item.is-selected {
  background: color-mix(in srgb, var(--brand-accent, #ff3d00) 11%, var(--bg-elev));
  border-color: var(--brand-accent, #ff3d00);
}
.news-side-item.is-selected .news-side-title {
  color: color-mix(in srgb, var(--brand-accent, #ff3d00) 72%, #131316);
}
[data-theme="dark"] .news-side-item.is-selected .news-side-title {
  color: color-mix(in srgb, var(--brand-accent, #ff3d00) 60%, #ffffff);
}
#news-side .news-side-item.status-dismissed, #news-side .news-side-item.status-expired { opacity: 0.55; }
#campaign-side .news-side-item.status-archived { opacity: 0.55; }
.news-side-title {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Triaged rows read quieter than New ones (the email unread/read cue) —
   news-only; campaign rows keep uniform weight. */
#news-side .news-side-item:not(.status-new):not(.is-selected) .news-side-title {
  font-weight: 500;
  color: var(--text-2);
}
/* The text wrapper must be allowed to shrink below its content's intrinsic
   width (flexbox min-width:auto default), or the nowrap meta line pushes
   rows wider than the column — clipped text + a phantom horizontal
   scrollbar instead of the ellipsis below. */
.news-side-item > div { min-width: 0; flex: 1; }
.news-side-item .news-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Relevance is color-coded green/orange/red — the list dots and the
   detail pill share the same hue family so they read as one system. */
.news-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 6px; background: var(--text-muted); }
.news-dot[data-rel="High"] { background: #22c55e; }
.news-dot[data-rel="Medium"] { background: #f97316; }
.news-dot[data-rel="Low"] { background: #ef4444; }
/* !important + 3-class specificity so these outrank the clerk skin's
   neutral-chip override — relevance is the one chip that keeps color. */
/* Campaign list dots reuse the campaign-filter status colors. */
.campaign-side-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 6px; background: #9ca3af; }
.campaign-side-dot[data-status="Active"] { background: #e54545; }
.campaign-side-dot[data-status="Planned"] { background: #c08a18; }
.campaign-side-dot[data-status="Done"] { background: #2e9b56; }
[data-theme="dark"] .campaign-side-dot[data-status="Active"] { background: #ff8484; }
[data-theme="dark"] .campaign-side-dot[data-status="Planned"] { background: #f0c258; }
[data-theme="dark"] .campaign-side-dot[data-status="Done"] { background: #5fc287; }
.news-action.news-action-danger { color: #d04141; }
.chip.news-rel[data-rel="High"] { background: rgba(34, 197, 94, 0.12) !important; border-color: rgba(34, 197, 94, 0.45) !important; color: #15803d !important; }
.chip.news-rel[data-rel="Medium"] { background: rgba(249, 115, 22, 0.12) !important; border-color: rgba(249, 115, 22, 0.45) !important; color: #c2410c !important; }
.chip.news-rel[data-rel="Low"] { background: rgba(239, 68, 68, 0.12) !important; border-color: rgba(239, 68, 68, 0.45) !important; color: #b91c1c !important; }
[data-theme="dark"] .chip.news-rel[data-rel="High"] { color: #4ade80 !important; }
[data-theme="dark"] .chip.news-rel[data-rel="Medium"] { color: #fb923c !important; }
[data-theme="dark"] .chip.news-rel[data-rel="Low"] { color: #f87171 !important; }
.news-detail {
  padding: 24px 28px;
  overflow-y: auto;
  max-height: 72vh;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
/* Headline mirrors the idea-card title treatment (Inter Tight, tight
   tracking; the clerk skin swaps the family below, like idea cards). */
.news-detail .news-headline {
  font-family: 'Inter Tight', sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
/* Section titles — sentence case, comfortably larger than body, semibold
   without the uppercase shout. */
.news-section-label {
  font-family: 'Inter Tight', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text-2);
  margin-bottom: 6px;
}
.news-summary-text { font-size: 13.5px; line-height: 1.6; color: var(--text); }
.news-why-text { font-size: 13px; line-height: 1.55; color: var(--text); }
[data-skin="clerk"] .news-detail .news-headline,
[data-skin="clerk"] .news-section-label,
[data-skin="clerk"] .news-side-title {
  font-family: 'Manrope', system-ui, sans-serif !important;
}
.news-detail-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.news-side-item.skeleton { min-height: 56px; opacity: 0.4; pointer-events: none; background: var(--bg-elev-2); }
/* Detail chips use the app-wide .chip system (incl. the clerk-skin neutral
   override) — no news-specific chip styling, so they match every page. */
.news-headline { font-size: 15px; font-weight: 600; line-height: 1.35; }
.news-headline a { color: var(--text); text-decoration: none; }
.news-headline a:hover { text-decoration: underline; }
.news-meta { font-size: 11.5px; color: var(--text-muted); }
.news-summary { align-self: stretch; margin-top: 10px; }
/* "Why it matters" — brand-primary rounded panel, styled differently
   from the selected story: a deeper borderless tint (the selector is a
   light tint WITH an accent ring). */
.news-why {
  align-self: stretch;
  margin-top: 8px;
  background: color-mix(in srgb, var(--brand-accent, #ff3d00) 9%, var(--bg-elev));
  border-radius: 12px;
  padding: 16px 18px;
}
.news-why .news-section-label {
  color: color-mix(in srgb, var(--brand-accent, #ff3d00) 72%, #131316);
}
[data-theme="dark"] .news-why .news-section-label {
  color: color-mix(in srgb, var(--brand-accent, #ff3d00) 60%, #ffffff);
}
/* Actions are the pane's footer — pinned to the bottom regardless of how
   short the story text is, separated by the standard hairline. Split
   groups (the old campaign-card idiom): forward actions left, retirement
   docked right — distance keeps Generate and Archive/Delete apart. */
.news-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  align-self: stretch;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.news-actions-left, .news-actions-right { display: flex; gap: 8px; align-items: center; }
.news-action {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.news-action:hover { border-color: var(--brand-accent, var(--accent)); }
.news-action.primary { border-color: var(--brand-accent, var(--accent)); }
/* Shortlist wears the Save-idea heart: outlined at rest, pops + fills on
   button hover (the ideas page pops on card hover; the reader's unit of
   hover is the button itself). */
.news-action:hover .save-heart {
  animation: save-heart-pop 0.75s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center;
}
.news-action:hover .save-heart svg path {
  fill: currentColor;
  stroke: currentColor;
}
/* Per-card "Generate ideas" — the app's primary black button, scaled to
   sit beside the small .news-action pills. */
.news-gen-btn {
  padding: 6px 14px;
  font-size: 12px;
  border-radius: 8px;
}
.news-last-scan { font-size: 11.5px; color: var(--text-muted); align-self: center; margin-right: 6px; }
/* Scan-in-progress banner — the .loading label/text idiom inside the
   brand-tinted panel recipe (same as .news-why), compacted from .loading's
   80px page-level padding. Compound selector so it beats .loading, which
   sits later in the sheet. */
.loading.news-scan-banner {
  margin-bottom: 14px;
  padding: 26px 20px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand-accent, #ff3d00) 9%, var(--bg-elev));
}
.news-scan-banner.is-scanning .label { animation: skeleton-pulse 1.6s ease-in-out infinite; }
/* Outcome states render INTO the same banner — the scan starts and ends on
   one surface instead of resolving in a corner toast. */
.news-scan-banner.is-error { background: color-mix(in srgb, var(--danger) 9%, var(--bg-elev)); }
.news-scan-banner.is-error .label { color: var(--danger); }
.news-scan-banner .news-scan-detail { font-size: 12px; color: var(--text-muted); margin-top: 10px; word-break: break-word; }
.news-scan-banner .news-scan-actions { margin-top: 16px; display: flex; gap: 10px; justify-content: center; }

.campaigns-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 16px;
  margin-bottom: 36px;
}
.campaigns-empty {
  grid-column: 1 / -1;
  padding: 60px 20px;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 12px;
  color: var(--text-muted);
}
.campaigns-empty-title {
  font-size: 18px;
  color: var(--text);
  margin-bottom: 6px;
}
.campaigns-empty-text { font-size: 13px; line-height: 1.5; }
.campaigns-empty-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}
/* Empty state (News Feed + Campaigns share .news-reader / .news-side /
   .news-detail): when the list column is empty, collapse the 2-col split and
   center the empty card in the whole section — both axes — instead of leaving
   it top-aligned in the right column beside a blank list. */
.news-reader:has(> .news-side:empty) { grid-template-columns: 1fr; }
.news-reader:has(> .news-side:empty) > .news-side { display: none; }
.news-reader:has(> .news-side:empty) > .news-detail { align-items: center; justify-content: center; }
.news-reader:has(> .news-side:empty) .campaigns-empty { max-width: 520px; }

.campaign-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-elev);
  padding: 18px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  transition: border-color 0.15s ease;
  cursor: pointer;
}
/* Action buttons reclaim a default cursor so the whole-card pointer
   doesn't make them feel undifferentiated from passive surface. */
.campaign-card .campaign-action,
.campaign-card .campaign-notes-toggle { cursor: pointer; }
.campaign-card:hover { border-color: var(--brand-accent, var(--accent)); }
.campaign-card.status-archived { opacity: 0.6; }
.campaign-head {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
/* Campaign status chip — the app-wide .chip geometry/typography (same as
   the News Feed pills), with the status colors kept. Higher specificity +
   !important to survive the clerk skin's neutral chips (the .chip.news-rel
   pattern). */
.chip.campaign-status.status-active { background: rgba(255, 80, 80, 0.12) !important; border-color: rgba(255, 80, 80, 0.35) !important; color: #e54545 !important; }
.chip.campaign-status.status-planned { background: rgba(255, 180, 40, 0.14) !important; border-color: rgba(255, 180, 40, 0.4) !important; color: #c08a18 !important; }
.chip.campaign-status.status-done { background: rgba(80, 200, 120, 0.14) !important; border-color: rgba(80, 200, 120, 0.4) !important; color: #2e9b56 !important; }
.chip.campaign-status.status-archived { background: rgba(140, 140, 140, 0.14) !important; border-color: rgba(140, 140, 140, 0.3) !important; color: #9ca3af !important; }
[data-theme="dark"] .chip.campaign-status.status-active { color: #ff8484 !important; }
[data-theme="dark"] .chip.campaign-status.status-planned { color: #f0c258 !important; }
[data-theme="dark"] .chip.campaign-status.status-done { color: #5fc287 !important; }
.campaign-proximity {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}
.campaign-name {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
}
.campaign-context {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.45;
}
.campaign-dates {
  font-size: 13px;
  color: var(--text-muted);
  font-family: inherit;
  font-weight: 500;
  letter-spacing: 0;
}
.campaign-progress {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.campaign-progress-bar {
  height: 6px;
  background: var(--bg);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.campaign-progress-fill {
  height: 100%;
  background: var(--brand-accent, var(--accent));
  border-radius: 3px;
  transition: width 0.2s ease;
}
.campaign-progress-text {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}
.campaign-auto-transition {
  font-size: 11px;
  font-style: italic;
  color: var(--text-muted);
  padding: 4px 8px;
  background: rgba(80,200,120,0.08);
  border-left: 2px solid rgba(80,200,120,0.4);
  border-radius: 2px;
  margin: -2px 0;
}
.campaign-notes-wrap {
  margin: 4px 0;
}
.campaign-notes-toggle {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 4px 0;
}
.campaign-notes-toggle:hover { color: var(--brand-accent, var(--accent)); }
.campaign-notes-body {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.5;
  white-space: pre-wrap;
  padding: 6px 10px;
  margin-top: 4px;
  background: var(--bg);
  border-radius: 4px;
  border: 1px solid var(--border);
  max-height: 200px;
  overflow-y: auto;
}
.campaign-notes-head { display: flex; align-items: center; gap: 14px; }
.campaign-notes-edit,
.campaign-notes-add {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 4px 0;
}
.campaign-notes-edit:hover,
.campaign-notes-add:hover { color: var(--brand-accent, var(--accent)); }
.campaign-notes-editor {
  width: 100%;
  box-sizing: border-box;
  min-height: 64px;
  resize: vertical;
  font-size: 12px;
  line-height: 1.5;
  margin-top: 4px;
}
.campaign-notes-edit-actions { display: flex; gap: 8px; margin-top: 8px; }
.campaign-notes-save,
.campaign-notes-cancel {
  font-size: 11px;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid var(--border-strong);
  transition: background var(--t), border-color var(--t), color var(--t);
}
.campaign-notes-save {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.campaign-notes-save:hover { filter: brightness(1.1); }
.campaign-notes-save:disabled { opacity: 0.6; cursor: default; }
/* Clerk dark flips --accent to #ffffff, so the Save button (var(--accent) bg)
   needs dark text to stay readable — same convention as clerk-dark .btn-primary. */
[data-skin="clerk"][data-theme="dark"] .campaign-notes-save { color: #131316; }
.campaign-notes-cancel { background: transparent; color: var(--text-muted); }
.campaign-notes-cancel:hover { color: var(--text); border-color: var(--text-muted); }
.campaign-notes-cancel:disabled { opacity: 0.6; cursor: default; }
.campaign-actions {
  display: flex;
  gap: 12px;
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  /* Left group (Edit / View linked) on the left, right group (Archive /
     Delete) on the right — opposite sides of the same row. */
  justify-content: space-between;
  align-items: center;
}
.campaign-actions-left,
.campaign-actions-right {
  display: flex;
  gap: 12px;
  align-items: center;
}
.campaign-action {
  font-size: 12px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 0;
  font-weight: 500;
  font-family: inherit;
}
.campaign-action:hover { color: var(--brand-accent, var(--accent)); }
/* Hard-delete variant — neutral text at rest, accent red on hover so the
   destructive intent is unambiguous without screaming at rest. */
.campaign-action-danger:hover,
.campaign-action.danger:hover { color: #d04141 !important; }

/* ─── Campaigns view toggle (page-head) ─────────────────────────── */
.campaign-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elev);
}
.campaign-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 24px;
  border: 0;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-dim);
  padding: 0;
  transition: background var(--t), color var(--t);
}
.campaign-view-btn:hover { color: var(--text); }
.campaign-view-btn.is-active {
  background: var(--bg-elev-2);
  color: var(--text);
}
.campaign-view-btn svg { width: 14px; height: 14px; display: block; }

/* ─── Quick Render tab ────────────────────────────────────────────
   Mirrors Studio's image-generation surface but with operator-typed
   transient state. Layout: left column stacks Write (top) + Design
   (below), right column is Output. Reuses Studio's pv-ai-* classes
   for Type/Size/Look/Layout/Theme/Subject so the visuals match. */
.qr-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 40px;
  row-gap: 20px;
  margin: 16px 0 32px;
  align-items: start;
}
@media (max-width: 1100px) {
  .qr-layout { grid-template-columns: minmax(0, 1fr); }
}
.qr-col-left {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
.qr-col-right {
  /* Sticky so the Output panel follows the viewport while the operator
     scrolls through the Design panel. `top: 0` (not 84px as before) —
     a non-zero top would force the column to offset by that much even
     at scroll=0, mis-aligning it with the Write/Design column. There's
     no fixed header above the QR layout that the sticky needs to clear,
     so 0 is correct. */
  position: sticky;
  top: 0;
  min-width: 0;
}
.qr-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-elev);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.qr-section-title {
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: -4px;
}
.qr-field { display: flex; flex-direction: column; gap: 6px; }
.qr-field-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.qr-field-optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
  opacity: 0.7;
}
.qr-input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
}
.qr-input:focus {
  outline: none;
  border-color: var(--brand-accent, var(--accent));
}
textarea.qr-input { resize: vertical; min-height: 80px; }
/* Caption: doubled base height (was 80px) and never scrolls — JS auto-grows it
   to fit content, so hide overflow and disable the manual resize handle. */
textarea.qr-caption-input {
  min-height: 160px;
  resize: none;
  overflow: hidden;
}
/* Size tiles: Horizontal (1.91:1) is disabled while Instagram is a target —
   Instagram has no landscape feed post. The reason shows inline below. */
.qr-card .pv-aspect-tile:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.qr-card .qr-size-hint {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--text-muted);
  margin-top: 10px;
  max-width: 280px;
}
.qr-output-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.qr-output-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.qr-preview-wrap {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
}
.qr-preview-img {
  max-width: 100%;
  max-height: 70vh;
  height: auto;
  border-radius: 4px;
  display: block;
}
.qr-output-empty {
  padding: 36px 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
}
/* Empty preview frame — shows the rendered post's eventual shape (sized
   to the picked aspect) with the Render button sitting in the middle of
   where the image will land. Lets the operator see what they're about
   to make before committing. Used by both Raw mode (just a frame) and
   platform mode (frame sits inside .li-post-image / .ig-post-image /
   .x-post-image so the post chrome wraps it). */
.qr-preview-empty {
  background: var(--bg-elev-2, #f7f7f8);
  border: 2px dashed var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  color: var(--text-muted);
  width: 100%;
}
.qr-preview-empty-hint {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
}
/* Carousel-mode empty slide stage. The Render button sits in the
   middle of the slide-shaped frame. */
.qr-carousel-stage.is-empty {
  background:
    repeating-linear-gradient(
      45deg,
      var(--bg-elev-2, #f7f7f8),
      var(--bg-elev-2, #f7f7f8) 12px,
      var(--bg, #ffffff) 12px,
      var(--bg, #ffffff) 24px
    );
  border-style: dashed;
  flex-direction: column;
  gap: 12px;
}
/* Subject section reuses Studio's pv-ai-subject-* classes, but Quick
   Render's subject lives inside qr-card so adjust margins for context. */
.qr-card .pv-ai-subject-wrap { margin: 0; }

/* The Design panel borrows Studio's tile / pill / dashed-box styling by
   wrapping its inner content in a `.workshop-next` scope. The workshop-next
   base rule sets a 1400px max-width + 80px bottom padding + auto centering
   that we don't want inside a qr-card — cancel them so the dashed boxes
   sit flush against the card's own padding. */
.qr-card > .workshop-next {
  max-width: none;
  margin: 0;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* The two .next-render-setup dashed boxes already supply their own
   24px/28px padding + dashed border. Reset the bottom margin Studio
   gives them (24px) since the qr-card's flex-gap handles vertical
   rhythm between boxes here. */
.qr-card .workshop-next .next-render-setup {
  margin: 0;
}
/* The Write panel reuses Studio's collapsible control-block chrome (the
   Caption + Headline/subtitle boxes). Studio tunes those blocks for tall,
   multi-field cards: 24/28px padding plus a 32px title margin that compounds
   with the box padding (~32px above + 32px below the title). In this compact
   panel that reads as dead space, so tighten the inner rhythm. All rules are
   scoped under .qr-card so neither Studio's blocks nor the QR Design panel's
   .next-render-setup boxes (also under .qr-card .workshop-next) are touched —
   only the two Write boxes use .control-block here. */
.qr-card .workshop-next .control-block {
  padding: 18px 20px;
}
.qr-card .workshop-next .control-block-title {
  /* margin-top 10px → ~28px above the title (18px box padding + 10px) in BOTH
     open and collapsed states, so the title doesn't shift vertically when a
     box is expanded. margin-bottom 28px is the open-state gap to the content
     (the collapsed rule below overrides the bottom to 10px). */
  margin: 10px 0 28px;
}
/* wireCollapsible() toggles `is-open` on the HEADER (.control-block-title--
   toggle), NOT on the box. hybrid.css's collapsed rule gates on the BOX's
   is-open — which is never set here — so it always fires (8px) and would pin
   the title gap regardless of the base margin. Override from the header's own
   state, at higher specificity than that rule, for BOTH open and collapsed. */
.qr-card .workshop-next .control-block--collapsible .control-block-title--toggle.is-open {
  margin-bottom: 28px;
}
.qr-card .workshop-next .control-block--collapsible .control-block-title--toggle:not(.is-open) {
  /* Collapsed: ~28px below the title too (10px margin + 18px box padding).
     The above-title 28px comes from the base rule's margin-top, so it stays
     identical when expanded — no vertical jump on toggle. */
  margin-bottom: 10px;
}
/* The collapse wrapper supplies no gap. Stacked direct children (e.g. the
   Design Subject box's Subject↔Slides groups) get rhythm here — guarded with
   :not([hidden]) so the collapsed-state display:none rule still wins. */
.qr-card .workshop-next .control-block-collapse:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* Write-panel fields (Caption / Headline / Subtitle) now sit inside a dashed
   .next-render-setup — the same dotted box as the Design boxes. The shared
   pv-group hairline + padding rules don't target .qr-field, so mirror them:
   18px block padding, flush at the box edges, hairline between consecutive
   fields (Headline ↔ Subtitle). */
.qr-card .workshop-next .next-render-setup > .qr-field {
  padding-block: 18px;
}
.qr-card .workshop-next .next-render-setup > .qr-field:first-child { padding-top: 0; }
.qr-card .workshop-next .next-render-setup > .qr-field:last-child { padding-bottom: 0; }
.qr-card .workshop-next .next-render-setup > .qr-field + .qr-field {
  border-top: 1px solid var(--border);
}
/* Theme cards alignment. The shared .pv-ai-styles-row reserves 16px side
   padding for scroll-chevrons, and the cards grid adds a 4px ring-inset.
   Together they pushed the first card ~20px right of the THEME label and the
   Look/Layout controls. Drop that padding and pull the 4px inset back with a
   negative margin — keeping the 4px padding so the selected card's 2px outline
   isn't clipped by the row's overflow — so the cards sit flush-left under the
   label. Applied per surface (each selector only hits its own theme row):
   Quick Render (.qr-card, no chevrons) and Studio (#workshop-content, where the
   chevrons just overlap the edge cards a touch more — and only show when there
   are more than 3 themes). */
.qr-card .workshop-next .pv-ai-styles-row,
#workshop-content .pv-ai-styles-row {
  padding-left: 0;
  padding-right: 0;
}
.qr-card .workshop-next .pv-ai-style-cards,
#workshop-content .pv-ai-style-cards {
  margin-left: -4px;
}
/* Studio only: 4 theme cards across instead of 3. Narrower cards at the same 4/5
   thumb aspect are shorter, so the theme strip takes less vertical room. Quick
   Render keeps 3-across (.qr-card scope). The id selector + !important beats the
   shared .workshop-next rule. (4 cards = 3 gaps of 8px = 24px.) */
#workshop-content .pv-ai-style-cards {
  grid-auto-columns: calc((100% - 24px) / 4) !important;
}
/* Subject context — text input styled as a dashed card with an "Aa"
   icon prefix, mirroring Studio's `.pv-ai-locked-banner` look so the
   operator brief reads as a per-render affordance instead of a generic
   textarea. Focus-within flips the dashed border to solid for an
   active read. */
.qr-subject-context {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  padding: 14px 18px;
  border: 1.5px dashed var(--border-strong);
  background: var(--bg-elev-2);
  border-radius: 10px;
  box-sizing: border-box;
  transition: border-color 0.14s ease, background 0.14s ease;
}
.qr-subject-context:focus-within {
  border-color: var(--text);
  border-style: solid;
  background: var(--bg-elev);
}
.qr-subject-context-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 14px/1 'Manrope', system-ui, sans-serif;
  color: var(--text-muted);
  letter-spacing: -0.01em;
}
.qr-subject-context-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font: 500 13px/1.4 'Manrope', system-ui, sans-serif;
  color: var(--text);
  outline: none;
  padding: 0;
  resize: none;
}
.qr-subject-context-input::placeholder { color: var(--text-muted); }
/* Stack the context input on top of the photo-upload card with a
   consistent gap — same rhythm as the .next-render-setup's internal
   pv-ai-config-group separations. */
.qr-subject-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* View prompt button — sits inside .qr-output-actions in the Output
   panel head, alongside Render again / Download. Visually subtle so it
   reads as a utility (informational), not a commit action. */
.qr-view-prompt-btn {
  appearance: none;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  font: 500 12px/1 'Manrope', system-ui, sans-serif;
  padding: 7px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}
.qr-view-prompt-btn:hover:not(:disabled) {
  color: var(--text);
  border-color: var(--text);
  background: var(--bg-elev-2, #f7f7f8);
}
.qr-view-prompt-btn:disabled {
  opacity: 0.55;
  cursor: wait;
}

/* Editing banner — shows above the Design panel when Quick Render is
   operating on a previously-created asset (opened via "Re-render in
   Quick Render" from Library or the Approval preview). Surfaces the
   asset's title + a "Start fresh" button to drop the edit context and
   blank everything. Subtle treatment so it reads as a context strip,
   not a destructive warning. */
.qr-editing-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  background: var(--bg-elev-2, #f7f7f8);
  border-radius: 8px;
  font: 500 12.5px/1.4 'Manrope', system-ui, sans-serif;
  color: var(--text-muted);
}
.qr-editing-banner[hidden] { display: none; }
.qr-editing-banner-icon {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--brand-accent, #ff3d00);
  color: #fff;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.qr-editing-banner-body { flex: 1; min-width: 0; }
.qr-editing-banner-body strong {
  color: var(--text);
  font-weight: 600;
}
.qr-editing-banner-clear {
  flex-shrink: 0;
  appearance: none;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font: 500 12px/1 'Manrope', system-ui, sans-serif;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.14s ease, border-color 0.14s ease;
}
.qr-editing-banner-clear:hover {
  color: var(--text);
  border-color: var(--text);
}

/* Target + Format pill rows. They live in the Placement box as pv-groups
   (label above pills, inside a dashed .next-render-setup) — the old
   .qr-format-row / .qr-format-label wrappers are gone; only the pill styling
   below remains. Switching Format swaps the output panel + Subject/prompt
   section without affecting Type/Size/Look/Layout/Theme (shared across modes). */
.qr-format-pills {
  display: inline-flex;
  gap: 6px;
}
.qr-format-pill {
  appearance: none;
  background: var(--bg-elev-2, #f7f7f8);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font: 500 12px/1 'Manrope', system-ui, sans-serif;
  padding: 4px 11px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.qr-format-pill:hover { color: var(--text); border-color: var(--text-muted); }
.qr-format-pill.is-active {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

/* Slides bar — visible only in carousel mode. Sits above the Subject
   section (which becomes "Current slide" in carousel mode). Each
   slide chip shows a number + thumb (if rendered) + an X remove
   button on hover. + Add slide button at the end. */
.qr-slides {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.qr-slides-label {
  font: 500 10px/1 'Manrope', system-ui, sans-serif;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.qr-slides-strip {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.qr-slide-chip {
  appearance: none;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  cursor: pointer;
  width: 78px;
  height: 88px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 4px;
  position: relative;
  transition: border-color 0.14s ease, transform 0.14s ease;
}
.qr-slide-chip:hover { border-color: var(--text-muted); transform: translateY(-1px); }
.qr-slide-chip.is-active {
  border-color: var(--text);
  border-width: 2px;
  padding: 5px;
}
.qr-slide-chip-thumb {
  width: 100%;
  flex: 1;
  background: var(--bg-elev-2, #f0f0f2);
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font: 600 10px/1 'Manrope', system-ui, sans-serif;
}
.qr-slide-chip-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.qr-slide-chip-num {
  text-align: center;
  font: 600 11px/1 'Manrope', system-ui, sans-serif;
  color: var(--text);
}
.qr-slide-chip-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--text);
  color: var(--bg);
  border: 0;
  font: 700 11px/1 'Manrope', system-ui, sans-serif;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
}
.qr-slide-chip:hover .qr-slide-chip-remove { display: inline-flex; }
.qr-slide-chip-add {
  width: 78px;
  height: 88px;
  border: 1.5px dashed var(--border-strong);
  background: transparent;
  color: var(--text-muted);
  border-radius: 10px;
  cursor: pointer;
  font: 500 11px/1.2 'Manrope', system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: border-color 0.14s ease, color 0.14s ease;
}
.qr-slide-chip-add:hover { border-color: var(--text); color: var(--text); }
.qr-slide-chip-add:disabled { opacity: 0.4; cursor: not-allowed; }
.qr-render-all-btn {
  margin-top: 4px;
  appearance: none;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font: 500 12px/1 'Manrope', system-ui, sans-serif;
  padding: 7px 12px;
  border-radius: 6px;
  cursor: pointer;
  align-self: flex-start;
  transition: border-color 0.14s ease, color 0.14s ease;
}
.qr-render-all-btn:hover { border-color: var(--text); color: var(--text); }
.qr-render-all-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Carousel output preview — main slide + indicators below + prev/next
   arrows. Compact so the operator can A/B slides without leaving the
   panel. */
.qr-carousel-preview {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.qr-carousel-stage {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  overflow: hidden;
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qr-carousel-stage img {
  display: block;
  max-width: 100%;
  max-height: 70vh;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.qr-carousel-stage-empty {
  padding: 36px 18px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
.qr-carousel-nav {
  position: absolute;
  top: 50%;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0,0,0,0.72);
  color: #fff;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 14px/1 'Manrope', system-ui, sans-serif;
  transform: translateY(-50%);
}
.qr-carousel-nav:hover { background: rgba(0,0,0,0.9); }
.qr-carousel-nav.is-prev { left: 10px; }
.qr-carousel-nav.is-next { right: 10px; }
.qr-carousel-nav:disabled { opacity: 0.25; cursor: not-allowed; }
.qr-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 4px 0;
}
.qr-carousel-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border);
  cursor: pointer;
  appearance: none;
  border: 0;
  padding: 0;
  transition: background 0.14s ease, transform 0.14s ease;
}
.qr-carousel-dot.is-active {
  background: var(--text);
  transform: scale(1.15);
}

/* Small icon button on Library cards — "Re-render in Quick Render".
   Sits at the right edge of the actions row alongside the main "Open →"
   CTA. Discoverable but not noisy; hover lifts to brand accent so the
   affordance feels alive without competing with the primary action. */

/* ── Variant history strip ──────────────────────────────────────
   Sits below the main preview. Each thumb is a clickable button that
   swaps the main preview to that variant. The active variant gets a
   solid black border so the operator always knows which one will be
   sent to approval. Compact — operators keep their last 4 attempts in
   sight without the strip dominating the panel. */
.qr-variants {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.qr-variants-label {
  font: 600 10px/1 'Manrope', system-ui, sans-serif;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.qr-variants-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 6px;
  scrollbar-width: thin;
}
.qr-variant-thumb {
  flex-shrink: 0;
  appearance: none;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
  cursor: pointer;
  position: relative;
  transition: border-color 0.14s ease, transform 0.14s ease;
}
.qr-variant-thumb:hover {
  border-color: var(--text-muted);
  transform: translateY(-1px);
}
.qr-variant-thumb.is-active {
  border-color: var(--text);
  border-width: 2px;
  padding: 3px;
}
.qr-variant-thumb img {
  display: block;
  width: 78px;
  height: 78px;
  object-fit: cover;
  border-radius: 4px;
}
.qr-variant-thumb-index {
  position: absolute;
  top: 4px;
  left: 4px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font: 600 9px/1 'Manrope', system-ui, sans-serif;
  padding: 2px 5px;
  border-radius: 3px;
  letter-spacing: 0.04em;
  pointer-events: none;
}

/* ── Preview mode tabs (Raw / LinkedIn / Instagram / X) ─────────
   Pill-shaped row above the main preview. Lets the operator see the
   active variant inside each platform's post chrome before committing
   to Send-to-Approval. Raw shows the bare image (current behaviour);
   each platform tab wraps the image in Studio's mockup chrome. */
.qr-preview-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.qr-preview-tab {
  appearance: none;
  background: var(--bg-elev-2, #f7f7f8);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font: 500 12px/1 'Manrope', system-ui, sans-serif;
  padding: 4px 11px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.qr-preview-tab:hover {
  color: var(--text);
  border-color: var(--text-muted);
}
.qr-preview-tab.is-active {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
/* Platform mockup wrapper — bounded width so the polished post chrome
   (.pv-li / .pv-ig / .pv-x) reads at a realistic post size, not
   stretched full-column. The post chrome itself comes from Studio's
   buildLinkedInPreview / buildXPreview / buildInstagramPreview, scoped
   under .workshop-next so the existing .pv-li-* / .pv-x-* / .pv-ig-*
   rules in variants/hybrid.css apply directly. */
.qr-preview-platform {
  display: flex;
  justify-content: center;
}
.qr-preview-platform > .pv-li,
.qr-preview-platform > .pv-x,
.qr-preview-platform > .pv-ig {
  width: 100%;
  max-width: 504px;
  margin: 0 auto;
}

/* Hover-reveal action overlay (Re-render / Download / Reposition).
   Reuses Studio's `.li-post-image-overlay` styling + `.li-post-image-
   action` button styling, but adds hover triggers for the polished-
   preview image classes (.pv-li-image / .pv-ig-image / .pv-x-image)
   and the raw preview wrapper. Studio's CSS only fires the hover
   transition on `.li-post-image` / `.pv-carousel-slot` / `.pv-x-grid-
   slot`, so without these extra selectors the overlay would never
   appear in Quick Render's polished mockups. */
.workshop-next .pv-li-image:hover > .li-post-image-overlay,
.workshop-next .pv-ig-image:hover > .li-post-image-overlay,
.workshop-next .pv-x-image:hover  > .li-post-image-overlay,
.qr-preview-wrap:hover > .li-post-image-overlay {
  opacity: 1;
}
/* The polished image classes don't ship with `position: relative` so
   the absolutely-positioned overlay would land on the post root
   instead of inside the image area. Force-position here. */
.workshop-next .pv-li-image,
.workshop-next .pv-ig-image,
.workshop-next .pv-x-image {
  position: relative;
}
/* Raw preview wrapper needs the same treatment for the overlay anchor
   + needs to expose the workshop-next-scoped action-button styling. */
.qr-preview-wrap { position: relative; }
.qr-preview-wrap > .li-post-image-overlay {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 4;
  pointer-events: none;
}
.qr-preview-wrap > .li-post-image-overlay > * { pointer-events: auto; }
.qr-preview-wrap > .li-post-image-overlay .li-post-image-action {
  padding: 7px 11px;
  background: rgba(255,255,255,0.96);
  border: 0;
  border-radius: 7px;
  color: #1a1a1a;
  font: 600 12px/1 'Manrope', system-ui, sans-serif;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.14);
  transition: background 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}
.qr-preview-wrap > .li-post-image-overlay .li-post-image-action:hover {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.12), 0 6px 16px rgba(0,0,0,0.18);
}
.qr-preview-wrap > .li-post-image-overlay .li-post-image-action svg {
  flex-shrink: 0; display: block;
}

/* Carousel stage hover overlay — same Studio styling, mounted under
   .qr-carousel-stage (which already has position: relative from
   earlier rules). */
.qr-carousel-stage { position: relative; }
.qr-carousel-stage > .li-post-image-overlay {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 4;
  pointer-events: none;
}
.qr-carousel-stage > .li-post-image-overlay > * { pointer-events: auto; }
.qr-carousel-stage:hover > .li-post-image-overlay { opacity: 1; }
.qr-carousel-stage > .li-post-image-overlay .li-post-image-action {
  padding: 7px 11px;
  background: rgba(255,255,255,0.96);
  border: 0;
  border-radius: 7px;
  color: #1a1a1a;
  font: 600 12px/1 'Manrope', system-ui, sans-serif;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.14);
  transition: background 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}
.qr-carousel-stage > .li-post-image-overlay .li-post-image-action:hover {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.12), 0 6px 16px rgba(0,0,0,0.18);
}
.qr-carousel-stage > .li-post-image-overlay .li-post-image-action svg {
  flex-shrink: 0; display: block;
}
.qr-carousel-stage.is-repositioning > .li-post-image-overlay { display: none; }

/* Reposition mode — the existing .workshop-next .li-post-image.is-
   repositioning rules in hybrid.css (lines 3906-3938) handle the
   drag-handle image + cancel/apply bar layout. The hide-overlay rule
   though is scoped to .li-post-image, so we add equivalents for the
   polished classes + raw wrapper so the action overlay disappears
   while the operator is dragging. */
.workshop-next .pv-li-image.is-repositioning > .li-post-image-overlay,
.workshop-next .pv-ig-image.is-repositioning > .li-post-image-overlay,
.workshop-next .pv-x-image.is-repositioning  > .li-post-image-overlay,
.qr-preview-wrap.is-repositioning > .li-post-image-overlay {
  display: none;
}
/* Reposition draggable image + bar inherit position:absolute from the
   workshop-next-scoped rules; they only need a positioned parent. The
   pv-* image classes + .qr-preview-wrap already get position: relative
   from our base rules above. */
.qr-preview-wrap.is-repositioning {
  overflow: hidden;
}

/* Rendering overlay — sits on top of the preview frame's image area
   while a render is in flight. Dark scrim + spinner + label so the
   operator has unambiguous feedback that something's happening, even
   when the underlying surface is still showing a prior render. */
/* Unified render loader (Quick Render + Studio): dark scrim + stage cues / tips +
   an eased "trickle" progress bar. No spinner — the bar carries the motion. */
/* Themed with the app's CSS variables, so it follows the active theme — light scrim
   + dark text in light mode, dark scrim + light text in dark mode. */
.render-loader {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px;
  background: var(--bg-elev, #ffffff);
  background: color-mix(in srgb, var(--bg-elev, #ffffff) 90%, transparent);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  color: var(--text, #131316);
  text-align: center;
  border-radius: inherit;
  pointer-events: auto;  /* eat clicks so the Render button under it isn't double-fired */
}
.render-loader-context {
  font: 600 10px/1.2 'Manrope', system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim, #6e7080);
  margin-bottom: 2px;
}
.render-loader-eyebrow {
  font: 700 13px/1.3 'Inter Tight', system-ui, sans-serif;
  letter-spacing: 0.01em;
  color: var(--text, #131316);
}
.render-loader-text {
  font: 500 12px/1.45 'Manrope', system-ui, sans-serif;
  color: var(--text-muted, #5e5f6e);
  max-width: 32ch;
  min-height: 2.2em;  /* reserve room so phase swaps don't jump the layout */
  white-space: pre-line;
}
.render-loader-bar {
  width: min(72%, 220px);
  height: 4px;
  margin-top: 8px;
  background: var(--border, #eeeef0);
  background: color-mix(in srgb, var(--text, #131316) 14%, transparent);
  border-radius: 999px;
  overflow: hidden;
}
.render-loader-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--accent, #FF3D00);
  border-radius: inherit;
}

/* ─── Campaigns calendar (Gantt-style timeline) ─────────────────── */
.campaigns-calendar {
  margin-bottom: 36px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-elev);
  overflow: hidden;
}
.campaigns-calendar-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.campaigns-calendar-nav-btn {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: transparent;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  line-height: 1;
}
.campaigns-calendar-nav-btn:hover { color: var(--text); border-color: var(--brand-accent, var(--accent)); }
.campaigns-calendar-today { font-size: 12px; font-weight: 600; }
.campaigns-calendar-range {
  margin-left: auto;
  font-size: 13px;
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.campaigns-calendar-grid-wrap {
  overflow-x: auto;
  padding: 4px 0 12px;
}
.campaigns-calendar-grid {
  display: grid;
  gap: 2px;
  padding: 0 8px;
  min-width: 100%;
  position: relative;
}
.campaigns-calendar-month {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 8px 8px 4px;
  border-bottom: 1px solid var(--border);
}
.campaigns-calendar-day-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 0 8px;
  font-size: 10px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  position: relative;
}
.campaigns-calendar-day-head.is-weekend { color: var(--text-muted); opacity: 0.55; }
.campaigns-calendar-day-head.is-today {
  color: var(--brand-accent, var(--accent));
  font-weight: 700;
}
.campaigns-calendar-day-head.is-today::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 25%;
  right: 25%;
  height: 2px;
  background: var(--brand-accent, var(--accent));
}
.campaigns-calendar-day-dow {
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}
.campaigns-calendar-day-num {
  font-size: 12px;
  font-weight: 600;
  margin-top: 2px;
}
.campaigns-calendar-cell {
  border-right: 1px solid var(--border);
  background: transparent;
  cursor: cell;
  min-height: 30px;
  transition: background 0.1s ease;
}
.campaigns-calendar-cell.is-weekend { background: rgba(0,0,0,0.02); }
.campaigns-calendar-cell:hover {
  background: rgba(255,61,0,0.06);
}
.campaigns-calendar-today-line {
  position: relative;
  background: var(--brand-accent, var(--accent));
  opacity: 0.18;
  border-radius: 1px;
  pointer-events: none;
  z-index: 1;
  margin: 0 calc(50% - 1.5px); /* center to a 3px line */
  min-width: 3px;
}
.campaigns-calendar-bar {
  height: 26px;
  margin: 3px 0;
  padding: 0 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  z-index: 2;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.campaigns-calendar-bar:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.campaigns-calendar-bar.truncated-left { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.campaigns-calendar-bar.truncated-right { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.campaigns-calendar-bar.status-active {
  background: rgba(229,69,69,0.22);
  color: #b22b2b;
  border: 1px solid rgba(229,69,69,0.45);
}
.campaigns-calendar-bar.status-planned {
  background: rgba(224,166,28,0.22);
  color: #a06a00;
  border: 1px solid rgba(224,166,28,0.45);
}
.campaigns-calendar-bar.status-done {
  background: rgba(46,155,86,0.18);
  color: #1f7a45;
  border: 1px solid rgba(46,155,86,0.4);
}
.campaigns-calendar-bar.status-archived {
  background: rgba(140,140,140,0.14);
  color: var(--text-muted);
  border: 1px solid var(--border);
  opacity: 0.65;
}
.campaigns-calendar-bar-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.campaigns-calendar-bar-arrow {
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  opacity: 0.7;
}
.campaigns-calendar-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
/* Dark theme adjustments — base colors get muddy on dark, lighten the
   weekend tint and the today-line opacity. */
[data-theme="dark"] .campaigns-calendar-cell.is-weekend { background: rgba(255,255,255,0.02); }
[data-theme="dark"] .campaigns-calendar-today-line { opacity: 0.25; }
[data-theme="dark"] .campaigns-calendar-bar.status-active { color: #ff8484; }
[data-theme="dark"] .campaigns-calendar-bar.status-planned { color: #f0c258; }
[data-theme="dark"] .campaigns-calendar-bar.status-done { color: #5fc287; }

/* Campaign edit modal form layout */
.campaign-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px 0;
}
.campaign-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.campaign-form-row:has(.campaign-form-field-narrow) {
  grid-template-columns: 1fr 1fr 120px;
}
.campaign-form-field { display: flex; flex-direction: column; gap: 6px; }
.campaign-form-field input,
.campaign-form-field textarea,
.campaign-form-field select { width: 100%; box-sizing: border-box; }
.campaign-modal-actions-left {
  display: flex;
  gap: 8px;
  flex: 1;
}
.campaign-modal-actions-left .campaign-action-archive,
.campaign-modal-actions-left .campaign-action-delete {
  color: var(--text-muted);
  border: none;
  background: transparent;
  font-size: 13px;
  cursor: pointer;
  padding: 6px 8px;
  font-family: inherit;
}
.campaign-modal-actions-left .campaign-action-archive:hover { color: #e54545; }
/* Delete is hard-destructive — distinct visual weight (always-red text +
   bg tint on hover) makes it clearly different from the recoverable
   Archive sitting next to it. */
.campaign-modal-actions-left .campaign-action-delete {
  color: #d04141;
  font-weight: 500;
}
.campaign-modal-actions-left .campaign-action-delete:hover {
  background: rgba(208, 65, 65, 0.08);
  border-radius: 4px;
}


/* Push-toward-campaigns trigger chip + floating popover on the Ideas page.
   Compact pill that sits in the page-head's right-side action cluster,
   next to "+ Add idea" and "Generate". Defaults to Off so the surface
   stays quiet; the chip text updates when the operator changes intensity. */
.gen-push-anchor {
  position: relative;
  display: inline-flex;
}
.gen-push-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-2);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.12s ease, color 0.12s ease;
}
.gen-push-trigger:hover { color: var(--text); border-color: var(--brand-accent, var(--accent)); }
.gen-push-trigger.is-active {
  color: var(--text);
  border-color: var(--brand-accent, var(--accent));
  background: rgba(255,61,0,0.04);
}
.gen-push-trigger-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.gen-push-trigger-value { font-weight: 600; color: var(--text); }
.gen-push-trigger-chevron {
  color: var(--text-muted);
  font-size: 11px;
  transition: transform 0.15s ease;
}
.gen-push-trigger[aria-expanded="true"] .gen-push-trigger-chevron { transform: rotate(180deg); }
/* Option B — split "Generate" button: primary action + a caret that opens the
   campaign-focus popover (the old standalone "Campaigns" chip folded in). The
   caret keeps id="gen-push-trigger" so the popover JS is untouched. */
.gen-split { display: inline-flex; align-items: stretch; position: relative; }
.gen-split-main, .gen-split-caret { margin: 0 !important; }
/* Descendant selector (.gen-split .X) bumps specificity to (0,3,0) so these beat
   the clerk button rule `[data-skin="clerk"] .btn-primary { border-radius:8px;
   padding:8px 14px !important }` (0,2,0, later in the file) — otherwise its
   shorthand re-rounds the inner corners and the split reads as two pills. */
[data-skin="clerk"] .gen-split .gen-split-main {
  border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important;
}
[data-skin="clerk"] .gen-split .gen-split-caret {
  position: relative !important;
  border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important;
  padding-left: 10px !important; padding-right: 10px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
.gen-split-caret::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: rgba(255, 255, 255, 0.20); }
[data-skin="clerk"][data-theme="dark"] .gen-split-caret::before { background: rgba(0, 0, 0, 0.15); }
.gen-split-caret-icon { font-size: 11px; line-height: 1; transition: transform 0.15s ease; }
.gen-split-caret[aria-expanded="true"] .gen-split-caret-icon { transform: rotate(180deg); }
/* Non-default focus → accent dot on the caret so a biased batch isn't silent. */
.gen-split-caret.is-active::after { content: ''; position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-accent, var(--accent)); }
.gen-push-title { font-family: 'Manrope', system-ui, sans-serif; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 2px; }

.gen-push-popover {
  /* position:fixed (instead of absolute) takes the popover out of every
     parent stacking context. Coords are computed from the trigger's
     bounding rect on open and updated on resize. This avoids the previous
     bug where a sibling element (.empty-cta) further down the document
     tree would render in front of the popover because the page-head's
     stacking context couldn't elevate the popover above the rest of #app. */
  position: fixed;
  width: 380px;
  max-width: 92vw;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.14);
  padding: 20px;
  /* Just under the global modal overlay (10000) so a modal can still win. */
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Section separators: every question block rules itself off from the one
   above; the title rules itself off from the first. */
.gen-push-popover .gen-push-title {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.gen-push-popover .gen-push-field {
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.gen-push-popover[hidden] { display: none; }
.gen-push-popover::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 24px;
  width: 11px;
  height: 11px;
  background: var(--bg-elev);
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  transform: rotate(45deg);
}
.gen-push-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gen-push-field-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.gen-push-field select,
.gen-push-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.45;
}
.gen-push-field textarea {
  resize: vertical;
  min-height: 64px;
}
.gen-push-field select:focus,
.gen-push-field textarea:focus {
  outline: none;
  border-color: var(--brand-accent, var(--accent));
}
/* Paste-headlines is a rarely-used escape hatch — collapsed behind this quiet
   text link so the panel stays clean. Expands to the textarea on click. */
.gen-push-headlines-toggle {
  align-self: flex-start;
  padding: 2px 0;
  border: none;
  background: none;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}
.gen-push-headlines-toggle:hover {
  color: var(--text);
  text-decoration: underline;
}
.gen-push-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gen-push-options label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  line-height: 1.4;
}
.gen-push-options label strong { color: var(--text); font-weight: 600; }
.gen-push-options label input { margin-top: 3px; flex-shrink: 0; }
/* "This batch will draw from:" anchor list — the at-a-glance answer to
   what the timely slots will actually use. Brand-tinted panel (same
   recipe as .news-why) so the answer reads as the popover's payoff.
   Warning lines flag anchors the current source selection would IGNORE
   (e.g. shortlisted signals on Evergreen only). */
.gen-push-anchors {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
  background: color-mix(in srgb, var(--brand-accent, #ff3d00) 9%, var(--bg-elev));
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gen-push-anchors[hidden] { display: none; }
/* At 20+ un-drafted ideas the Delete control becomes an AMBER attention pill and
   a matching bubble floats over it. Fixed amber (not the brand accent) so it
   reads as a "heads up" and pops even when the brand colour is neutral. */
.ideas-action.ideas-action--pill {
  color: #b7591c;
  background: rgba(224, 110, 42, 0.12);
  border: 1px solid rgba(224, 110, 42, 0.42);
  border-radius: 999px;
  padding: 7px 14px;
  font-weight: 600;
}
.ideas-action.ideas-action--pill:hover {
  color: #a04d15;
  background: rgba(224, 110, 42, 0.2);
}
.ideas-action.ideas-action--pill::before { opacity: 1; }
.ideas-makeroom { display: flex; justify-content: flex-end; margin: 0 0 9px; }
.ideas-makeroom[hidden] { display: none; }
.ideas-makeroom .mr-bubble {
  position: relative;
  max-width: 280px;
  background: var(--bg-elev, #fff);
  border: 1px solid rgba(224, 110, 42, 0.42);
  border-radius: 12px;
  padding: 9px 13px;
  font-size: 12.5px;
  line-height: 1.4;
  color: #b7591c;
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.18);
}
.ideas-makeroom .mr-bubble::after {
  content: '';
  position: absolute;
  bottom: -6px;
  right: 26px;
  width: 11px;
  height: 11px;
  background: var(--bg-elev, #fff);
  border-right: 1px solid rgba(224, 110, 42, 0.42);
  border-bottom: 1px solid rgba(224, 110, 42, 0.42);
  transform: rotate(45deg);
}
[data-theme="dark"] .ideas-action.ideas-action--pill,
[data-theme="dark"] .ideas-makeroom .mr-bubble { color: #f0a35e; }
.gen-push-anchors .gp-anchor-title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-accent, var(--accent));
}
.gen-push-anchors .gp-anchor-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.gen-push-anchors .gp-anchor-warn { color: #d9a514; }
/* Sources with nothing to feed them are disabled — grey the whole label so
   the state reads at a glance; the label title says why. */
.gen-push-options label:has(input:disabled) {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ─── Ideas page dropdown filters ─────────────────────────────────
   One row of dropdown buttons (Campaign · Pillar · Audience). Replaces
   the older 3-row chip layout. Each anchor floats its own menu. The
   .is-open class on an anchor elevates its stacking context so the
   menu wins over the cards grid below. */
/* Pillar + Audience filters: labeled groups of wrapping pills. Robust to any
   number of tenant-defined options and any label length — they reflow to the
   next row instead of overflowing. Campaign statuses stay underline tabs. */
/* Label sits in a fixed-width column to the LEFT of the pills (not above), so
   both groups' pills line up at the same left edge and wrapped rows stay tidy
   in their own column. */
/* Filters + delete/make-room controls on one row (no empty band between them). */
.ideas-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 16px 28px;
  flex-wrap: wrap;
  margin: 0 0 18px;
}
.ideas-filters-col { flex: 1 1 360px; min-width: 0; }
.ideas-filters-col .ideas-filter-group:last-of-type { margin-bottom: 0; }
.ideas-actions-col { flex: 0 0 auto; margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; }
.ideas-actions-col .ideas-actions { margin: 0; }
.ideas-filter-group {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0 0 12px;
}
.ideas-filter-group[hidden] { display: none; }
#ideas-pillar-group { padding-top: 24px; }
.ideas-filter-group .ideas-filter-axis {
  flex: 0 0 68px;
  margin: 0;
  padding-top: 8px;
  line-height: 1.2;
  white-space: nowrap;
}
.ideas-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}
.ideas-pill {
  padding: 4px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-elev);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: color var(--t), background var(--t), border-color var(--t);
}
.ideas-pill:hover { color: var(--text); border-color: var(--brand-accent, var(--accent)); }
/* Active = brand-accent: accent border + faint tint + darkened-accent text
   (mirrors the idea-card selection). --brand-accent tracks the per-brand colour. */
.ideas-pill.is-active {
  background: color-mix(in srgb, var(--brand-accent, #ff3d00) 11%, var(--bg-elev));
  color: color-mix(in srgb, var(--brand-accent, #ff3d00) 72%, #131316);
  border-color: var(--brand-accent, #ff3d00);
}
[data-theme="dark"] .ideas-pill.is-active {
  color: color-mix(in srgb, var(--brand-accent, #ff3d00) 60%, #ffffff);
}
.ideas-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 16px 0 22px;
}
/* (The persistent Campaign dropdown that lived here is gone — .ideas-filters
   now only hosts the active campaign-scope pill, built from the shared
   .ideas-filter-group / .ideas-pill primitives.) */
.ideas-filter-axis {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.filter-label {
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  min-width: 64px;
}
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-chip {
  padding: 6px 12px;
  font: 500 12px/1 'Manrope', system-ui, sans-serif;
  letter-spacing: 0.02em;
  background: var(--bg-elev-2, #f7f7f8);
  border: 1px solid var(--border, #eeeef0);
  border-radius: 8px;
  color: var(--text-muted, #5e5f6e);
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
  cursor: pointer;
}
.filter-chip:hover {
  color: var(--text, #131316);
  border-color: var(--text-muted, #9394a1);
}
html body .filter-chip:not(.active) { color: var(--text-muted, #5e5f6e); }
.filter-chip.active {
  background: var(--text, #131316);
  color: var(--bg, #ffffff);
  border-color: var(--text, #131316);
}

/* Right-aligned action row above the ideas grid. Holds view toggles
   (Hide drafted) + destructive bulk actions (Delete undrafted) — these
   aren't filters that narrow a list, they're commands, so they live
   outside the chip rows and read as buttons, not pills. */
.ideas-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  margin: -4px 0 20px;
}
.ideas-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: none;
  border: 0;
  padding: 6px 0;
  cursor: pointer;
  transition: color var(--t);
}
.ideas-action:hover { color: var(--text); }
.ideas-action--toggle::before {
  content: '';
  width: 12px; height: 12px;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  background: transparent;
  transition: background var(--t), border-color var(--t);
}
.ideas-action--toggle.active { color: var(--text); }
.ideas-action--toggle.active::before {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 2px var(--bg);
}
/* Delete control is always a (neutral) pill button; the amber attention pill
   (.ideas-action--pill, 2 classes) still overrides it at 20+. */
.ideas-action--danger {
  color: var(--text-muted);
  border: 1px solid var(--border-strong, rgba(120, 120, 120, 0.32));
  border-radius: 999px;
  padding: 7px 14px;
}
.ideas-action--danger:hover { color: #ff6b6b; border-color: rgba(255, 107, 107, 0.5); }
.ideas-action--danger::before { content: '×'; font-size: 16px; line-height: 1; opacity: 0.7; }

/* ===== Workshop tab ===== */
.workshop-empty {
  border: 1px dashed var(--border-strong);
  padding: 96px 32px 80px;
  text-align: center;
  color: var(--text-muted);
  border-radius: var(--radius);
  max-width: 640px;
  margin: 0 auto;
  display: flex; flex-direction: column; align-items: center;
}
.workshop-empty .muted { max-width: 480px; }
/* One-time orientation banner shown above the Workshop on first visit. */
.ws-banner {
  display: flex; align-items: flex-start; gap: 20px;
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-elev));
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  border-left: 3px solid var(--accent);
  padding: 16px 20px;
  border-radius: var(--radius);
  margin-bottom: 24px;
}
.ws-banner .ws-banner-content { flex: 1; min-width: 0; }
.ws-banner .ws-banner-eyebrow {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.ws-banner .ws-banner-text {
  font-size: 13px; line-height: 1.55;
  color: var(--text-2);
}
.ws-banner .ws-banner-text strong { color: var(--text); font-weight: 600; }
.ws-banner .ws-banner-dismiss {
  font-family: 'Inter Tight', sans-serif;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid var(--border-strong);
  background: transparent; color: var(--text);
  padding: 8px 14px;
  border-radius: var(--radius);
  cursor: pointer; flex-shrink: 0;
  transition: border-color var(--t), color var(--t);
}
.ws-banner .ws-banner-dismiss:hover { border-color: var(--accent); color: var(--accent); }
/* Per-panel legend — one short line clarifying the panel's role. */
.panel .panel-subtitle {
  font-size: 12px; font-weight: 400;
  color: var(--text-muted);
  line-height: 1.45;
  margin-top: -4px;
  margin-bottom: 6px;
}
/* Status hint above the carousel before designs render. */
.carousel-status {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 4px 0 12px;
  padding: 10px 14px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  display: flex; align-items: center; gap: 10px;
}
.carousel-status::before {
  content: ""; width: 6px; height: 6px;
  background: var(--accent); border-radius: 50%;
  box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 60%, transparent);
}
.carousel-status[hidden] { display: none; }
.ws-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px;
  margin-bottom: 32px;
}
/* Cap the title block's width and lock the action button on the right
   so a long asset title never crowds (or wraps) the Send to Approval
   Queue button. */
.ws-header > div:first-child { min-width: 0; max-width: 880px; }
.ws-header > div:last-child  { flex-shrink: 0; }
.ws-header #btn-send-approval { white-space: nowrap; }
.ws-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ws-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}
.panel {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.panel-head .panel-actions { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.panel-head .regen-btn {
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border-strong);
  padding: 6px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color var(--t), border-color var(--t);
}
.panel-head .regen-btn:hover { color: var(--accent); border-color: var(--accent); }
.panel-head .regen-btn:disabled { opacity: 0.5; cursor: wait; }

/* Improve caption button in each platform card head — hoisted out of the
 * legacy Building Blocks panel. */
.platform-polish-btn {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  padding: 6px 12px;
  border-radius: var(--radius);
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.platform-polish-btn:hover { color: var(--text); border-color: var(--accent); }
.platform-polish-btn:disabled { opacity: 0.6; cursor: wait; }
.platform-polish-host {
  padding: 16px;
  border-top: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* "In approval queue" chip on platform cards — clickable, jumps to the
 * Approval tab. Visual treatment: subtle amber tint so it reads as a state
 * indicator, not a primary action. */
.platform-approval-chip {
  background: rgba(255, 200, 80, 0.10);
  border: 1px solid rgba(255, 200, 80, 0.45);
  color: rgba(255, 200, 80, 0.95);
  padding: 4px 10px;
  border-radius: 999px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.12s;
}
.platform-approval-chip::before { content: '● '; }
.platform-approval-chip:hover { background: rgba(255, 200, 80, 0.18); }

/* Per-asset AI generation counter pill in the Studio header — subtle
 * cost-transparency signal. Hidden when count is 0. */
/* Render-usage pill (spend-cap meter): ⚡ used/limit today. Studio header +
   Control Center tiles. Amber near the daily cap, red at it. */
.usage-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border, rgba(255,255,255,0.12)); background: var(--bg-elev, rgba(255,255,255,0.04)); color: var(--text-dim, #6e7080); font-family: 'Manrope', system-ui, sans-serif; font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; }
.usage-pill .usage-bolt { font-size: 11px; opacity: .85; }
.usage-pill .usage-num { color: var(--text, #fff); }
.usage-pill .usage-unit { opacity: .6; font-weight: 500; }
.usage-pill.is-near { border-color: #d9a441; color: #d9a441; }
.usage-pill.is-near .usage-num { color: #d9a441; }
.usage-pill.is-full { border-color: #d2553f; color: #d2553f; }
.usage-pill.is-full .usage-num { color: #d2553f; }
.usage-pill--compact { padding: 2px 8px; font-size: 11px; }

/* Info dot — small ⓘ that replaces verbose helper banners; full text on hover. */
.info-dot { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-left: 7px; border-radius: 50%; border: 1px solid var(--border-strong, rgba(255,255,255,0.16)); color: var(--text-dim, #6e7080); font: italic 700 9px/1 Georgia, 'Times New Roman', serif; cursor: help; vertical-align: middle; flex: none; transition: color .12s, border-color .12s; }
.info-dot:hover, .info-dot:focus-visible { color: var(--text, #fff); border-color: currentColor; outline: none; }

/* Collapsible Image-copy block — the title acts as a disclosure header. */
.workshop-next .control-block-title--toggle { display: flex; align-items: center; cursor: pointer; user-select: none; }
.workshop-next .control-block-title--toggle .control-block-chevron { margin-left: auto; display: inline-flex; color: var(--text-dim); transition: transform .18s ease, color .12s; }
.workshop-next .control-block--collapsible.is-open .control-block-chevron { transform: rotate(180deg); }
/* Header-level toggles (sub-sections like Design Specifications / Direction that
   aren't a standalone control-block) carry is-open on the header itself. */
.workshop-next .control-block-title--toggle.is-open .control-block-chevron { transform: rotate(180deg); }
.workshop-next .control-block-title-row.control-block-title--toggle { cursor: pointer; }
/* Whole collapsed card is a click target (see wireCollapsible + the hand-wired
   caption/image-copy toggles) — show the pointer over its padding too, not just
   the title row. `is-open` lives on the HEADER for wireCollapsible blocks but on
   the BLOCK for the hand-wired ones, so gate on BOTH being closed; either way an
   open block drops the pointer so its body keeps normal cursors. */
.workshop-next .control-block:not(.is-open):has(> .control-block-title--toggle:not(.is-open)) { cursor: pointer; }
/* ⓘ + chevron grouped together on the right of the Design Specifications row. */
.workshop-next .ctr-tools { display: inline-flex; align-items: center; gap: 10px; }
.workshop-next .ctr-tools .control-block-chevron { margin-left: 0; color: var(--text-dim); transition: transform .18s ease, color .12s; }
/* Band header with a tool on the right (the ⓘ prompt-preview, moved out of the
   Design Specs box up to the DESIGN band row). */
.workshop-next .controls-group-header--with-tool { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-right: 4px; }
/* The ⓘ sits on the grey band, not a white card — drop its white fill/border. */
.workshop-next .controls-group-header--with-tool .mockup-tool { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
.workshop-next .controls-group-header--with-tool .mockup-tool:hover { background: rgba(0,0,0,0.04) !important; }
.workshop-next .control-block-title--toggle:hover .control-block-chevron { color: var(--text); }
.workshop-next .control-block-collapse[hidden] { display: none; }
/* Closed: drop the title's big 32px bottom margin so the card reads as a tidy
   closed header instead of a titled card with empty space below. */
.workshop-next .control-block--collapsible:not(.is-open) .control-block-title--toggle { margin-bottom: 8px; }
/* Same tightening for header-level toggles (Design Specifications / Direction /
   subject) — their is-open lives on the header, not a --collapsible block, so
   when collapsed the title's default 32px bottom margin would leave the box
   taller than the Write boxes. */
.workshop-next .control-block:not(.control-block--collapsible) .control-block-title--toggle:not(.is-open) { margin-bottom: 8px; }

/* De-emphasized secondary actions — Polish / Regenerate recede so the eye lands
   on the editable text first; they regain presence on hover. (Higher specificity
   than the base .workshop-next .regen-btn pill, so it wins.) */
.workshop-next .actions-row .regen-btn { background: transparent; border-color: transparent; color: var(--text-dim); }
.workshop-next .actions-row .regen-btn:hover { background: var(--bg-elev); border-color: var(--border); color: var(--text); box-shadow: none; }
.workshop-next .actions-row .regen-btn .regen-btn-icon { opacity: 0.75; }
/* Caption "Write as" popover — opened from the Re-create caption button, styled
   to mirror the Improve caption popover (.platform-polish-host). Fixed-position;
   JS sets top/left. Appended to <body>, so scoped by [data-skin] only. */
[data-skin="clerk"] .write-as-host {
  width: 480px; max-width: calc(100vw - 24px); max-height: 82vh;
  overflow-y: auto; overflow-x: hidden;
  background: #ffffff; border: 1px solid #d9d9de; border-radius: 12px;
  box-shadow: 0 16px 40px rgba(19,19,22,.14), 0 4px 12px rgba(19,19,22,.06);
  z-index: 200; animation: polishPopFade 140ms ease-out;
}
[data-skin="clerk"][data-theme="dark"] .write-as-host {
  background: #202020; border-color: rgba(255,255,255,.14);
  box-shadow: 0 16px 40px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.35);
}
[data-skin="clerk"] .write-as-header {
  display: flex; align-items: center; gap: 8px; padding: 12px 14px;
  border-bottom: 1px solid #eeeef0; position: sticky; top: 0; background: #ffffff; z-index: 1;
}
[data-skin="clerk"][data-theme="dark"] .write-as-header { background: #202020; border-bottom-color: rgba(255,255,255,.08); }
[data-skin="clerk"] .write-as-title {
  flex: 1; font-family: 'Manrope', system-ui, sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: #5e5f6e;
}
[data-skin="clerk"][data-theme="dark"] .write-as-title { color: #9394a1; }
[data-skin="clerk"] .write-as-close {
  width: 24px; height: 24px; background: transparent; border: none; border-radius: 6px;
  color: #6e7080; font-size: 18px; line-height: 1; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color var(--t), background var(--t);
}
[data-skin="clerk"] .write-as-close:hover { color: #131316; background: #f0f0f2; }
[data-skin="clerk"][data-theme="dark"] .write-as-close { color: #9394a1; }
[data-skin="clerk"][data-theme="dark"] .write-as-close:hover { color: #f7f7f8; background: rgba(255,255,255,.06); }
[data-skin="clerk"] .write-as-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 8px; padding: 12px; align-items: stretch; }
[data-skin="clerk"] .write-as-opt {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: #ffffff; border: 1px solid #eeeef0; border-radius: 10px; padding: 11px 13px;
  transition: border-color var(--t), background var(--t);
}
[data-skin="clerk"] .write-as-opt:hover { border-color: #cfcfd6; background: #f7f7f8; }
[data-skin="clerk"] .write-as-opt:focus-visible { outline: none; border-color: var(--brand-accent, var(--accent)); }
[data-skin="clerk"][data-theme="dark"] .write-as-opt { background: #262626; border-color: rgba(255,255,255,.10); }
[data-skin="clerk"][data-theme="dark"] .write-as-opt:hover { border-color: rgba(255,255,255,.18); background: #2c2c2c; }
[data-skin="clerk"] .write-as-opt--default { grid-column: 1 / -1; border-width: 1.5px; border-color: var(--brand-accent, var(--accent)); background: color-mix(in oklab, var(--brand-accent, var(--accent)) 7%, #ffffff); }
[data-skin="clerk"][data-theme="dark"] .write-as-opt--default { border-color: var(--brand-accent, var(--accent)); background: color-mix(in oklab, var(--brand-accent, var(--accent)) 16%, #202020); }
[data-skin="clerk"] .write-as-opt-head { display: flex; align-items: center; gap: 7px; }
[data-skin="clerk"] .write-as-opt-name { font-family: 'Manrope', system-ui, sans-serif; font-size: 14px; font-weight: 600; color: #131316; }
[data-skin="clerk"][data-theme="dark"] .write-as-opt-name { color: #f7f7f8; }
[data-skin="clerk"] .write-as-opt-desc { font-size: 12.5px; color: #5e5f6e; margin-top: 2px; }
[data-skin="clerk"][data-theme="dark"] .write-as-opt-desc { color: #9394a1; }
[data-skin="clerk"] .write-as-badge {
  font-family: 'Manrope', system-ui, sans-serif; font-size: 9.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: #ffffff; background: var(--brand-accent, var(--accent));
  border-radius: 5px; padding: 2px 6px;
}
[data-skin="clerk"][data-theme="dark"] .write-as-badge { color: #131316; }

/* Building blocks zone — collapsed by default so the platform cards above
 * carry the visual weight. Subtle summary chrome (no decorative section
 * header), expandable when the operator wants to dig in. */
.ws-building-blocks {
  margin-top: 32px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.ws-building-blocks-summary {
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  padding: 8px 0 16px;
  list-style: revert;
}
.ws-building-blocks-summary:hover { color: var(--text); }
.ws-building-blocks[open] .ws-building-blocks-summary { color: var(--text); margin-bottom: 8px; }

/* Inline guidance under the AI source dropdown in Studio. Updates as the
 * operator picks a different source so the explanation always matches the
 * current selection. */
.pv-source-description {
  margin: 6px 0 10px;
  padding: 8px 12px;
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.02);
  border-left: 2px solid var(--accent);
  border-radius: 4px;
}

/* Per-slot render history — small thumbnail strip below a filled image
 * slot. Each thumb is a clickable button that restores that previous
 * render as the current image (the displaced current goes onto history). */
.pv-render-history {
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pv-render-history-label {
  font-family: 'Inter Tight', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.pv-render-history-strip {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.pv-render-history-thumb {
  width: 56px;
  height: 56px;
  padding: 0;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.12s, transform 0.12s;
}
.pv-render-history-thumb:hover { border-color: var(--accent); transform: scale(1.05); }
.pv-render-history-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Slots that get the render loader need position: relative so its absolute inset:0
 * resolves to the slot. They were likely already positioned; this is a
 * defensive add. */
.pv-img-slot, .pv-carousel-slot, .pv-x-grid-slot { position: relative; }
.panel-head .regen-btn .regen-icon { font-size: 12px; line-height: 1; }
/* Carousel template picker — sized to sit alongside regen-btn in the panel head. */
.panel-head .tpl-select {
  padding: 5px 28px 5px 10px;
  font-size: 11px;
  font-family: 'Inter Tight', sans-serif;
  letter-spacing: 0.02em;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  border-radius: var(--radius);
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.panel-head .tpl-select:hover { color: var(--text); border-color: var(--text-muted); }
.panel-head .tpl-select:disabled { opacity: 0.5; cursor: wait; }
.panel-title {
  font-family: 'Inter Tight', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.panel.span-6 { grid-column: span 6; }
.panel.span-4 { grid-column: span 4; }
.panel.span-8 { grid-column: span 8; }
.panel.span-12 { grid-column: span 12; }

.list { display: flex; flex-direction: column; gap: 10px; }
.list .item {
  padding: 14px 16px;
  background: var(--bg-elev-2);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
  position: relative;
  transition: border-color var(--t);
}
.list .item:hover { border-color: var(--border-strong); }
.list .item .copy {
  position: absolute; right: 10px; top: 10px;
  font-size: 10px;
  font-family: 'Inter Tight', sans-serif;
  letter-spacing: 0.16em;
  color: var(--text-dim);
  text-transform: uppercase;
  opacity: 0.45;
  transition: opacity var(--t), color var(--t);
  display: inline-flex; align-items: center; gap: 5px;
}
.list .item .copy svg { display: block; }
.list .item .copy .copy-icon-check,
.list .item .copy .copy-text-done { display: none; }
.list .item:hover .copy { opacity: 1; }
.list .item.copied { border-color: var(--success); }
.list .item.copied .copy { opacity: 1; color: var(--success); }
.list .item.copied .copy .copy-icon-clip,
.list .item.copied .copy .copy-text-default { display: none; }
.list .item.copied .copy .copy-icon-check,
.list .item.copied .copy .copy-text-done { display: inline-flex; }
/* Edit affordance on editable list items. Sits left of Copy. */
.list .item.editable { padding-right: 88px; }
.list .item .edit-pill {
  position: absolute; right: 56px; top: 10px;
  font-size: 10px;
  font-family: 'Inter Tight', sans-serif;
  letter-spacing: 0.16em;
  color: var(--text-dim);
  text-transform: uppercase;
  background: transparent; border: 0; padding: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--t), color var(--t);
}
.list .item:hover .edit-pill { opacity: 1; }
.list .item .edit-pill:hover { color: var(--accent); }
.list .item.editing { padding: 14px 16px; cursor: default; }
.list .item.editing .copy,
.list .item.editing .edit-pill { display: none; }

/* Generic inline editor used inside list items, panels, and slide thumbs. */
.inline-editor { display: flex; flex-direction: column; gap: 10px; }
.inline-editor textarea,
.inline-editor input[type="text"] {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--accent);
  color: var(--text);
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  border-radius: var(--radius);
  outline: none;
  resize: vertical;
}
.inline-editor textarea { min-height: 80px; }
/* Two-field slide-copy display + editor (carousel headline + subtitle). */
.slide-copy-item .slide-copy-headline { font-family: 'Manrope', sans-serif; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--text); }
.slide-copy-item .slide-copy-subtitle { margin-top: 4px; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }
.slide-copy-editor .slide-copy-field { display: flex; flex-direction: column; gap: 5px; }
.slide-copy-editor .slide-copy-label { font-family: 'Inter Tight', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
.slide-copy-editor .slide-copy-field textarea { min-height: 44px; }
.inline-editor .edit-actions { display: flex; gap: 8px; align-items: center; }
.inline-editor .edit-actions button {
  padding: 8px 14px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  color: var(--text);
  background: transparent;
  cursor: pointer;
  transition: border-color var(--t), color var(--t), background var(--t);
}
.inline-editor .edit-actions button.save { background: var(--accent); border-color: var(--accent); color: #fff; }
.inline-editor .edit-actions button.save:hover { background: var(--accent-hover); }
.inline-editor .edit-actions button.cancel:hover { color: var(--accent); border-color: var(--accent); }
.inline-editor .edit-actions button:disabled { opacity: 0.5; cursor: not-allowed; }
.inline-editor .edit-hint {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-muted);
  margin-left: auto;
}

/* Edit button in a panel head (used for LinkedIn long-form, X short-form). */
.panel-head-actions { display: flex; gap: 8px; align-items: center; }
.panel-head .edit-pill-head {
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border-strong);
  padding: 6px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: color var(--t), border-color var(--t);
}
.panel-head .edit-pill-head:hover { color: var(--accent); border-color: var(--accent); }
.panel-head .edit-pill-head[disabled] { opacity: 0.5; cursor: wait; }

/* Mock LinkedIn frame */
.li-frame {
  background: var(--bg-elev-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 18px;
  cursor: pointer;
  transition: border-color var(--t);
}
.li-frame:hover { border-color: var(--accent); }
.li-frame .li-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.li-frame .li-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter Tight', sans-serif; font-size: 12px; font-weight: 700; color: #fff;
}
.li-frame .li-name { font-size: 13px; font-weight: 600; color: var(--text); }
.li-frame .li-meta { font-size: 11px; color: var(--text-muted); }
.li-frame .li-body { font-size: 14px; line-height: 1.55; color: var(--text); white-space: pre-wrap; }

.x-frame {
  background: var(--bg-elev-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 16px;
  cursor: pointer;
  font-size: 14px; line-height: 1.5;
  white-space: pre-wrap;
  transition: border-color var(--t);
}
.x-frame:hover { border-color: var(--accent); }

/* Carousel preview row */
.carousel-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: 8px;
}
.carousel-row .slide-thumb {
  aspect-ratio: 1 / 1;
  background: var(--bg-elev-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter Tight', sans-serif;
  color: var(--text-dim);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.carousel-row .slide-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carousel-row .slide-thumb .slide-num {
  position: absolute; top: 6px; left: 6px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.4);
  background: rgba(0,0,0,0.6);
  padding: 2px 6px;
  border-radius: 2px;
}
.carousel-row .slide-thumb .slide-edit {
  position: absolute; top: 6px; right: 6px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  background: rgba(0,0,0,0.6);
  padding: 2px 6px;
  border-radius: 2px;
  cursor: pointer; border: 0;
  opacity: 0;
  transition: opacity var(--t), color var(--t);
}
.carousel-row .slide-thumb:hover .slide-edit { opacity: 1; }
.carousel-row .slide-thumb .slide-edit:hover { color: #fff; }
.carousel-row .slide-thumb.editing { aspect-ratio: auto; padding: 12px; align-items: stretch; justify-content: stretch; }
.carousel-row .slide-thumb.editing .inline-editor textarea { min-height: 100px; font-size: 12px; padding: 8px 10px; }

.video-script .beats {
  display: flex; flex-direction: column; gap: 8px;
  border-left: 2px solid var(--accent);
  padding-left: 16px;
}
.video-script .beat { position: relative; padding-right: 48px; }
.video-script .beat-label {
  font-family: 'Inter Tight', sans-serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.video-script .beat .beat-edit {
  position: absolute; top: 0; right: 0;
  font-family: 'Inter Tight', sans-serif;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: transparent; border: 0; padding: 2px 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--t), color var(--t);
}
.video-script .beat:hover .beat-edit { opacity: 1; }
.video-script .beat .beat-edit:hover { color: var(--accent); }
.video-script .beat.editing { padding-right: 0; }
.video-script .beat .inline-editor textarea { min-height: 60px; font-size: 13px; }

.select {
  background: var(--bg-elev-2);
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 12px 16px;
  font-size: 13px;
  border-radius: var(--radius);
  outline: none;
  font-family: inherit;
}

.variants { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.variant {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  padding: 16px 16px 56px;
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  cursor: pointer;
  position: relative;
  transition: border-color var(--t);
}
.variant:hover { border-color: var(--border-strong); }
.variant .variant-num {
  position: absolute; top: 12px; right: 12px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.variant .variant-actions {
  position: absolute; bottom: 12px; left: 16px; right: 16px;
  display: flex; gap: 8px; align-items: center;
}
.variant .variant-apply {
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em;
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-2);
  background: transparent;
  cursor: pointer;
  transition: color var(--t), border-color var(--t), background var(--t);
}
.variant .variant-apply:hover { color: var(--accent); border-color: var(--accent); }
.variant .variant-apply.applied { color: var(--success); border-color: var(--success); }
.variant .variant-apply:disabled { opacity: 0.5; cursor: wait; }
.variant .variant-copy-hint {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 10px; letter-spacing: 0.04em;
  color: var(--text-dim);
  margin-left: auto;
}

/* ===== Approval tab ===== */
.kanban {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.kanban-col {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  min-height: 400px;
  transition: background var(--t), border-color var(--t), box-shadow var(--t);
}
/* Drop-target highlight — fires when a draggable kanban card hovers over
   the column. Subtle so it doesn't fight the existing column tint, but
   distinct enough to confirm where the drop will land. */
.kanban-col.is-drop-target {
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-elev));
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent) inset;
}
/* Dragging card — slight lift + opacity so it reads as in-motion. */
.kanban-card.is-dragging {
  opacity: 0.5;
  cursor: grabbing;
}
.kanban-card[draggable="true"] {
  cursor: grab;
}
.kanban-card[draggable="true"]:active {
  cursor: grabbing;
}
.kanban-col header {
  display: flex; align-items: center; justify-content: space-between;
  font-family: 'Inter Tight', sans-serif;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.kanban-col .count {
  font-family: 'Manrope', system-ui, sans-serif;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 400;
  opacity: 0.7;
}
.kanban-card {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 10px;
  display: flex; flex-direction: column; gap: 10px;
  cursor: pointer;
  transition: border-color var(--t), background var(--t);
}
.kanban-card:hover { border-color: var(--border-strong); background: var(--bg-elev); }
.kanban-card .platform {
  font-family: 'Inter Tight', sans-serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pillar);
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
/* ─── card-head (eyebrow with idea title + relative time) ─── */
.kanban-card .card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px;
}
.kanban-card .card-eyebrow {
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0;
  text-transform: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
/* Hero block — the actual post content being reviewed sits front and
   center. Image / carousel platforms get a portrait thumbnail on the
   left (4:5 — matches the most common LinkedIn/IG aspect so the thumb
   shows the actual frame of the post). The caption + platform label sit
   in the right column. Text-only posts (LinkedIn Text / X Text) skip the
   thumbnail and the caption expands to full width. */
.kanban-card .card-hero {
  display: flex;
  gap: 12px;
  align-items: stretch;
}
.kanban-card .card-hero-thumb {
  position: relative;
  width: 80px;
  flex-shrink: 0;
  /* Respect the per-post aspect-ratio (set inline) instead of stretching to
     the row height — the parent .card-hero uses align-items: stretch. */
  align-self: flex-start;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  aspect-ratio: 4 / 5;
}
.kanban-card .card-hero-thumb img {
  /* Absolute-fill so the image sizes against the aspect-ratio box rather than
     a percentage height (which collapses to 0 once the thumb stops stretching
     to the row via align-self: flex-start). object-position carries the crop. */
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.kanban-card .card-hero-thumb-count {
  position: absolute;
  bottom: 4px; right: 4px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.65);
  padding: 2px 5px;
  border-radius: 4px;
  line-height: 1;
}
.kanban-card .card-hero-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.kanban-card .card-hero-caption {
  font-family: 'Inter Tight', sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* When the platforms list lives inside the hero content (under the
   caption), tighten its spacing — no border-top, no extra padding. */
.kanban-card .card-hero-content .card-platforms {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
  gap: 2px;
}
.kanban-card .card-hero-content .card-platform-row {
  padding: 2px 0;
}
/* ─── per-platform rows inside grouped approval cards ─── */
.kanban-card .card-platforms {
  display: flex; flex-direction: column;
  gap: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
  margin-top: 2px;
}
.kanban-card .card-platform-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 2px;
  border-radius: 6px;
  transition: background var(--t);
}
.kanban-card .card-platform-row:hover {
  background: rgba(255,255,255,0.03);
}
.kanban-card .card-platform-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.kanban-card .card-platform-dot.is-awaiting {
  background: var(--status-pending);
  box-shadow: 0 0 6px color-mix(in srgb, var(--status-pending) 50%, transparent);
}
.kanban-card .card-platform-dot.is-changes {
  background: var(--status-changes);
  box-shadow: 0 0 6px color-mix(in srgb, var(--status-changes) 50%, transparent);
}
.kanban-card .card-platform-dot.is-approved {
  background: var(--status-approved);
  box-shadow: 0 0 6px color-mix(in srgb, var(--status-approved) 50%, transparent);
}
.kanban-card .card-platform-name {
  flex: 1;
  font-family: var(--sans, 'Manrope', system-ui, sans-serif);
  font-size: 12px;
  color: var(--text-2);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
}
.kanban-card .card-date {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  text-transform: none;
}
.kanban-card .card-title {
  font-family: 'Inter Tight', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}
.kanban-card .card-caption {
  font-size: 12px; color: var(--text-muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kanban-card .card-cta {
  display: flex; align-items: center;
  margin-top: 2px;
}
/* Review — an actual button that opens the preview, where approve and
   request-changes now live. Full-width so the whole footer is the action. */
.kanban-card .card-review-btn {
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px; border-radius: 7px;
  border: 1px solid var(--border-strong);
  background: rgba(255,255,255,0.03);
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--t), border-color var(--t), color var(--t), gap var(--t);
}
.kanban-card .card-review-btn:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent);
  gap: 10px;
}
.kanban-card .card-review-arrow { transition: transform var(--t); }
.kanban-card .card-review-btn:hover .card-review-arrow { transform: translateX(2px); }

/* ===== Loading / empty states ===== */
.empty-cta {
  border: 1px solid var(--border);
  background: var(--bg-elev);
  padding: 64px 40px;
  text-align: center;
  border-radius: var(--radius);
  display: flex; flex-direction: column;
  align-items: center; gap: 18px;
}
.empty-cta .empty-eyebrow {
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-muted);
  display: inline-flex; align-items: center; gap: 12px;
}
.empty-cta .empty-eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--text-muted); }
.empty-cta .empty-title {
  font-family: 'Inter Tight', sans-serif;
  font-size: 28px; font-weight: 600;
  letter-spacing: -0.018em; line-height: 1.2;
  color: var(--text);
  max-width: 520px;
}
.empty-cta .empty-text {
  font-size: 14px;
  color: var(--text-2);
  max-width: 480px;
  line-height: 1.6;
}
.empty-cta .empty-actions {
  display: flex; gap: 12px; align-items: center;
  margin-top: 8px; flex-wrap: wrap; justify-content: center;
}

.loading {
  padding: 80px 32px;
  text-align: center;
  color: var(--text-muted);
}
.loading .label {
  font-family: 'Inter Tight', sans-serif;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.loading .text { font-size: 14px; max-width: 480px; margin: 0 auto; line-height: 1.55; }

.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.13) 50%, rgba(255,255,255,0.05) 100%);
  background-size: 200% 100%;
  animation: shine 2.4s linear infinite;
  border-radius: var(--radius);
}
@keyframes shine { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Phase status line that sits ABOVE a skeleton grid. Replaces the centered
   ".loading" block while preserving phaseLoader's rolling status copy.
   Uniform 1px border — the pulsing dot on the left carries the "in-flight"
   signal, no need for a heavy left stripe. */
.skeleton-phase {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  background: #111;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  margin-bottom: 24px;
}
.skeleton-phase::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  animation: skeleton-pulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
.skeleton-phase .skeleton-phase-label {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent);
}
.skeleton-phase .skeleton-phase-text {
  font-size: 13px; color: var(--text-2); line-height: 1.5;
}
@keyframes skeleton-pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.3 } }
/* Single "generating" placeholder card shown at the TOP of the ideas list during
   generation — the existing ideas stay below it instead of vanishing. */
.ideas-generating {
  background: var(--bg-elev, #fff);
  border: 1px solid var(--border, rgba(120, 120, 120, 0.16));
  border-radius: 14px;
  padding: 18px 22px 20px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.ideas-generating .ideas-generating-label {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; color: var(--text-muted); margin-bottom: 3px;
}
.ideas-generating .ig-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand-accent, #ff4d1c);
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}
.ideas-generating .ig-text { animation: skeleton-pulse 1.7s ease-in-out infinite; }

/* Logo loader — full-screen centered logo + rotating copy. The
   min-height is sized to fill the workshop viewport (minus the
   appbar's top padding) so the logo lands at the visual center of
   the screen instead of getting pinned near the top inside a 380px
   box. */
.logo-loader {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: calc(100vh - 80px); gap: 22px;
}
.logo-loader .ll-logo {
  color: var(--text);
  animation: ll-breathe 2.4s ease-in-out infinite;
}
@keyframes ll-breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.2; transform: scale(0.92); }
}
.logo-loader .ll-copy {
  font-family: var(--display); font-size: 13px;
  color: var(--text-muted); text-align: center;
  letter-spacing: -0.01em; max-width: 340px; line-height: 1.5;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.logo-loader .ll-copy.ll-out {
  opacity: 0; transform: translateY(-5px);
}
.logo-loader .ll-copy.ll-in {
  opacity: 0; transform: translateY(5px);
}

/* Skeleton primitives — composable building blocks for shape-matching
   placeholders. Used inline via { class: 'skeleton sk-line' }. */
.sk-line { height: 14px; margin-bottom: 8px; border-radius: 3px; }
.sk-line:last-child { margin-bottom: 0; }
.sk-chip { height: 22px; width: 80px; border-radius: 999px; display: inline-block; margin-right: 8px; }
.sk-title { height: 24px; margin-bottom: 14px; border-radius: 4px; }
.sk-thumb { aspect-ratio: 1/1; }

/* Idea-card skeleton: matches the live card structure. */
.sk-idea-card {
  border: 1px solid var(--border);
  background: var(--bg-elev);
  padding: 28px;
  border-radius: var(--radius);
  display: flex; flex-direction: column; gap: 14px;
}
.sk-idea-card .sk-meta { display: flex; gap: 8px; flex-wrap: wrap; }

/* Workshop-panel skeleton — minimal structure, just enough lines to
   convey "this panel is on the way". */
.sk-panel {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  display: flex; flex-direction: column; gap: 10px;
}
.sk-panel .sk-panel-title { width: 35%; }

/* Persistent inline error block. Replaces the toast-only error pattern for
   any flow with a long wait — the user can return to the screen later and
   still see what failed + a retry path. */
.error-state {
  border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--border));
  background: color-mix(in srgb, var(--danger) 5%, var(--bg-elev));
  border-left: 3px solid var(--danger);
  padding: 22px 26px;
  border-radius: var(--radius);
  display: flex; flex-direction: column; gap: 12px;
}
.error-state .error-eyebrow {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--danger);
}
.error-state .error-text {
  font-size: 14px; line-height: 1.55; color: var(--text);
  white-space: pre-wrap;
  font-family: 'Manrope', sans-serif;
}
.error-state .error-actions {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-top: 4px;
}

/* ===== Toast ===== */
#toast {
  position: fixed; bottom: 32px; right: 32px;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  padding: 14px 20px;
  font-size: 13px;
  border-radius: var(--radius);
  z-index: 9999;
  transform: translateY(20px);
  opacity: 0;
  transition: all var(--t);
  display: inline-flex; align-items: center; gap: 12px;
}
#toast.show { transform: translateY(0); opacity: 1; }
/* Leading status glyph — ✓ success, ✕ error, ⓘ neutral (warn/info). Replaces
   the old left-border accent stripe. Shape carries the meaning; success/error
   pick up a colour, neutral kinds stay muted in the toast's own text colour. */
#toast .toast-icon { flex: none; display: inline-flex; align-items: center; opacity: 0.55; }
#toast .toast-icon svg { display: block; }
#toast.success .toast-icon { color: var(--success); opacity: 1; }
#toast.error   .toast-icon { color: var(--danger);  opacity: 1; }
#toast .toast-action {
  background: transparent; color: var(--accent);
  border: 1px solid var(--border-strong);
  padding: 4px 10px;
  border-radius: var(--radius);
  font-family: 'Inter Tight', sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: 0.02em; cursor: pointer;
  transition: background var(--t), border-color var(--t), color var(--t);
}
#toast .toast-action:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ===== Calendar tab ===== */
.cal-shell {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 16px;
  align-items: stretch; /* sidebar + calendar share equal height + top alignment */
}
/* The calendar is a fixed, one-screen dashboard. Rather than locking scroll
   (which kills the elastic bounce), we trim the global 120px bottom padding —
   empty space on this tab — so the content fits the viewport. The page stays an
   unlocked root scroller with min-height:100vh, so there's nothing to actually
   scroll but macOS still gives the Approval-page rubber-band when you tug it.
   Scoped via :has() so other tabs keep their full bottom padding for scrolling. */
#app main:has(#tab-calendar:not([hidden])) { padding-bottom: 24px !important; }

/* Unscheduled-posts sidebar */
.cal-sidebar {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  /* Cap = the panel/shell row height (grid `100vh - 175px` + nav + padding ≈
     `100vh - 93px`), so the Unscheduled card stretches to the SAME bottom as the
     calendar/gallery panel instead of stopping ~7px short — and still bounds the
     inner list so it scrolls rather than growing the shell. */
  max-height: calc(100vh - 65px);
  display: flex;
  flex-direction: column;
}
.cal-sidebar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.cal-sidebar-title {
  font-family: 'Inter Tight', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.cal-sidebar-count {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 11px;
  color: var(--text-2);
  background: rgba(255,255,255,0.05);
  padding: 2px 8px;
  border-radius: 10px;
}
/* Unscheduled count badge → brand primary with adaptive (auto-contrast) text.
   High specificity + !important to beat the clerk skin's pale-yellow pill. */
.cal-shell .cal-sidebar .cal-sidebar-count.has-pending {
  background: var(--brand-accent, var(--accent)) !important;
  color: var(--brand-accent-contrast, #fff) !important;
  border: 0 !important;
}
.cal-sidebar-list {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0 -8px;
  padding: 0 8px;
}
.cal-pending-card {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 8px;
  cursor: grab;
  transition: border-color var(--t), transform var(--t), opacity var(--t);
  position: relative;
}
.cal-pending-card:hover { border-color: var(--border-strong); }
.cal-pending-card:active { cursor: grabbing; }
.cal-pending-card.dragging { opacity: 0.4; transform: scale(0.96); }
/* Idea-color dot — same hash as the calendar pill dots, so an unscheduled card
   matches its scheduled sibling's color on the calendar (same idea). */
.cal-pending-dot {
  position: absolute;
  top: 8px; right: 8px;
  width: 7px; height: 7px;
  border-radius: 50%;
  pointer-events: none;
}
.cal-pending-platform {
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  /* Default color is muted — per-channel variants below recolor to match
     the calendar event pill system (LI/IG/X/vid). */
  color: var(--text-muted);
  margin-bottom: 4px;
}
.cal-pending-platform--li  { color: var(--pillar); }
.cal-pending-platform--x   { color: var(--text-muted); }
.cal-pending-platform--ig  { color: var(--audience); }
.cal-pending-platform--vid { color: #e06060; }
.cal-pending-title {
  font-size: 12px;
  color: var(--text);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cal-pending-hint {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 9px;
  color: var(--text-dim);
  margin-top: 6px;
}
/* Unscheduled cards — Option A (single channel) + Option B (grouped). Chip bg is
   a faint tint of its own (platform-coloured) text, so it works in every skin. */
.cal-uns-chip {
  display: inline-block;
  font: 600 10px/1.4 'Inter Tight', sans-serif;
  letter-spacing: 0.01em;
  padding: 3px 8px;
  border-radius: 5px;
  border: 0;
  background: color-mix(in srgb, currentColor 12%, transparent);
}
.cal-uns-card .cal-uns-chip { margin-top: 6px; }
.cal-uns-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.cal-uns-foot .cal-pending-sched { margin-top: 0; }
.cal-uns-age { font: 500 10px/1 'Manrope', system-ui, sans-serif; color: var(--text-dim); white-space: nowrap; }
/* Option B — a labelled container that bundles the real per-channel cards. */
.cal-uns-group {
  position: relative;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 8px;
  display: flex; flex-direction: column; gap: 8px;
}
.cal-uns-grp-head { padding-right: 16px; }
.cal-uns-nest { display: flex; flex-direction: column; gap: 6px; }
.cal-uns-nest .cal-pending-card { margin-bottom: 0; }
.cal-uns-nested .cal-uns-chip { margin-top: 0; }
.cal-sidebar-empty {
  color: var(--text-dim);
  font-size: 12px;
  text-align: center;
  padding: 32px 8px;
  line-height: 1.5;
}

/* Idea grouping in sidebar */
.cal-idea-group { margin-bottom: 14px; }
.cal-idea-group:last-child { margin-bottom: 0; }
.cal-idea-group-head {
  display: flex;
  align-items: stretch;
  gap: 6px;
  margin-bottom: 6px;
}
.cal-idea-group-title {
  flex: 1 1 auto;
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-2);
  line-height: 1.4;
  padding: 6px 10px;
  /* Quieter than the previous orange-tinted block — neutral surface
     with a thin hairline. The "Top pick" energy belongs on Ideas;
     this is just a group label. Title flows full-height so the
     operator can read what they're scheduling without truncation. */
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 6px;
  word-break: break-word;
  min-width: 0;
}
.cal-idea-group .cal-pending-card { margin-bottom: 4px; }
.cal-idea-group .cal-pending-card:last-child { margin-bottom: 0; }

/* When card is inside a group, hide its title (header has it) and tighten */
.cal-idea-group .cal-pending-card .cal-pending-title { display: none; }
.cal-idea-group .cal-pending-card .cal-pending-platform { margin-bottom: 0; }
.cal-idea-group .cal-pending-card { padding: 8px 12px; }
.cal-idea-group .cal-pending-card .cal-pending-hint { margin-top: 2px; }

/* Idea grouping in day detail panel */
.cal-detail-idea-group { margin-bottom: 14px; }
.cal-detail-idea-group:last-child { margin-bottom: 0; }
.cal-detail-idea-title {
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-2);
  line-height: 1.4;
  padding: 6px 10px;
  margin-bottom: 6px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 6px;
  word-break: break-word;
}
.cal-detail-idea-group .cal-item .cal-item-title { display: none; }
.cal-detail-idea-group .cal-item { padding: 8px 12px; }

/* Partial-scheduled badge on Approved kanban cards */
.card-partial-badge {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 10px;
  padding: 2px 8px;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: center;
  pointer-events: none;
}
.kanban-card.has-partial { border-style: dashed; }


/* ── Calendar toolbar: filter chips + idea select + view toggle (Batch 5) ── */
/* Each header group sits on its own faint rounded fill (no border) — soft
   grouping without the box-in-box weight of bordered containers. */
/* Single row: filter (left) · date (centre) · view (right) — assigned to a 3-col
   grid (1fr auto 1fr on .cal-nav) so the date stays centred regardless of the
   side groups' widths. */
.cal-filters {
  grid-column: 1; justify-self: start;
  display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
  background: color-mix(in srgb, var(--text) 6%, transparent); border-radius: 10px; padding: 3px 4px;
}
#cal-filters:empty { display: none; } /* no empty grey pill when a brand has ≤1 channel */
.cal-nav-left {
  grid-column: 2; justify-self: center;
  display: inline-flex; align-items: center; gap: 2px;
  background: color-mix(in srgb, var(--text) 6%, transparent); border-radius: 10px;
  padding: 3px 4px;
}
.cal-nav-left .cal-nav-btn { padding: 3px 8px; }
.cal-toolbar-group {
  grid-column: 3; justify-self: end;
  display: flex; align-items: center; gap: 10px;
}
.cal-toolbar-label { font: 500 12px/1 'Manrope', system-ui, sans-serif; color: var(--text-dim); white-space: nowrap; }
.cal-filter-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font: 400 13px/1 'Inter Tight', system-ui, sans-serif; letter-spacing: 0.01em;
  padding: 5px 11px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--bg-elev); color: var(--text);
  cursor: pointer; transition: background var(--t), border-color var(--t), color var(--t);
}
.cal-filter-chip:hover { border-color: var(--border-strong); }
.cal-filter-chip.is-on {
  background: color-mix(in srgb, currentColor 12%, transparent);
  border-color: color-mix(in srgb, currentColor 45%, transparent);
}
/* Channel-colour dot (matches the cadence + sidebar channel colours) so the
   chips read as platform filters, not view buttons. Colour comes from b.cls. */
.cal-filter-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }
.cal-filter-clear {
  font: 500 12px/1 'Manrope', system-ui, sans-serif;
  padding: 9px 11px; border: 0; background: transparent; color: var(--text-dim);
  cursor: pointer; border-radius: 8px;
}
.cal-filter-clear:hover { color: var(--text); background: var(--bg-elev-2); }
/* macOS/Linear-style segmented control: a faint grey track with a raised white
   pill for the active view — high-contrast + "lifted", not grey-on-grey. */
.cal-viewtoggle {
  display: inline-flex; align-items: center; gap: 2px; padding: 2px; flex: none;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg-elev);
}
.cal-viewtoggle button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 24px; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: var(--text-dim); cursor: pointer;
  transition: background var(--t), color var(--t);
}
.cal-viewtoggle button:hover:not(.is-active) { color: var(--text); }
.cal-viewtoggle button.is-active {
  background: var(--bg-elev-2); color: var(--text);
}
.cal-viewtoggle button svg { width: 14px; height: 14px; display: block; }

/* ── List / agenda view (Batch 5) ─────────────────────────────────────────── */
.cal-list {
  /* Fixed height so the Gallery fills the panel to the SAME bottom as the month
     grid (grid = its cell area `100vh - 213px` + the ~38px weekday-header row =
     `100vh - 175px`). Fixed (not max-height) so a short month still holds the
     full height instead of shrinking the panel; cards sit at the top, scroll. */
  height: calc(100vh - 175px); max-width: 1100px;
  overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 18px; padding-right: 4px;
}
/* Week header — light chronological structure; cards pack continuously within. */
.cal-list-week-head {
  display: flex; align-items: baseline; gap: 8px;
  padding-bottom: 8px; margin-bottom: 10px; border-bottom: 1px solid var(--border);
}
.cal-list-week-range { font: 600 14px/1 'Manrope', system-ui, sans-serif; letter-spacing: -0.01em; color: var(--text); }
.cal-list-day-today { font: 600 9px/1 'Inter Tight', system-ui, sans-serif; letter-spacing: 0.04em; text-transform: uppercase; color: var(--brand-accent-contrast, #fff); background: var(--brand-accent, var(--accent)); padding: 3px 7px; border-radius: 999px; }
.cal-list-day-count { margin-left: auto; font: 500 11px/1 'Manrope', system-ui, sans-serif; color: var(--text-dim); }
/* Gallery view: each post is a card with a large, aspect-correct thumbnail —
   "see the actual creative" beats raw density (low post volume). */
.cal-list-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; align-items: start; }
.cal-list-card {
  display: flex; flex-direction: column;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; cursor: pointer;
  transition: border-color var(--t), box-shadow var(--t);
}
.cal-list-card:hover { border-color: var(--border-strong); }
.cal-list-card.is-past { opacity: 0.5; filter: grayscale(1); }
.cal-list-card.is-past:hover { opacity: 0.9; filter: grayscale(0.2); }
.cal-list-card.is-posted { opacity: 0.62; }
.cal-list-thumb { position: relative; aspect-ratio: 4 / 5; background: var(--bg-elev-2); overflow: hidden; }
.cal-list-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cal-list-thumb.is-empty { display: flex; align-items: center; justify-content: center; color: var(--text-dim); }
.cal-list-thumb-badge {
  position: absolute; top: 7px; right: 7px;
  font: 600 11px/1 'Manrope', system-ui, sans-serif; color: #fff;
  background: rgba(0, 0, 0, 0.6); padding: 3px 7px; border-radius: 999px;
}
.cal-list-cap { padding: 10px 11px 12px; display: flex; flex-direction: column; gap: 7px; }
.cal-list-platform {
  font: 600 10px/1.3 'Inter Tight', system-ui, sans-serif; letter-spacing: 0.01em;
  align-self: flex-start; padding: 3px 8px; border-radius: 5px;
  background: color-mix(in srgb, currentColor 12%, transparent);
}
.cal-list-title {
  font: 500 12.5px/1.35 'Manrope', system-ui, sans-serif; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cal-list-cap-foot { display: flex; align-items: center; flex-wrap: wrap; margin-top: 1px; }
.cal-list-cap-foot > * + *::before { content: '·'; margin: 0 6px; color: var(--text-dim); }
.cal-list-date { font: 600 11px/1 'Manrope', system-ui, sans-serif; color: var(--text-2, var(--text)); white-space: nowrap; }
.cal-list-time { font: 600 11px/1 'Manrope', system-ui, sans-serif; color: var(--text-2, var(--text)); white-space: nowrap; }
.cal-list-empty { text-align: center; padding: 48px 16px; color: var(--text-dim); }


/* Drag-and-drop hover states on day cells */
/* Drag-over + arm-target = a STRONGER version of the same rounded highlight
   (more fill + a solid 2px brand ring), driven through ::after so it's rounded
   and never has to fight clerk's `.cal-day{background:#fff !important}`. The
   higher specificity here (vs the plain :hover::after) keeps it winning if a
   browser also reports :hover on the drop target mid-drag. */
.cal-shell .cal-day.drag-over::after,
.cal-shell.is-arming .cal-day:not(.other-month):hover::after {
  opacity: 1;
  background: color-mix(in srgb, var(--brand-accent, var(--accent)) 14%, transparent);
  box-shadow: inset 0 0 0 2px var(--brand-accent, var(--accent));
}
.cal-day.drag-invalid {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, var(--bg-elev-2));
}
.cal-pill { cursor: grab; user-select: none; }
.cal-pill.dragging { opacity: 0.4; }
.cal-pill.is-posted { opacity: 0.5; text-decoration: line-through; cursor: default; }

/* Posted item in detail panel — de-emphasized */
.cal-item.is-posted { opacity: 0.55; }
.cal-item.is-posted:hover { opacity: 1; }
/* Past-dated posts (scheduled before today, brand TZ) recede to grey — this
   replaces the old "show posted" toggle. Failed posts are excluded (kept loud). */
.cal-item.is-past { opacity: 0.55; filter: grayscale(1); }
.cal-item.is-past:hover { opacity: 1; filter: grayscale(0); }
.cal-pill.is-past { opacity: 0.5; filter: grayscale(1); }
.cal-pill.is-past:hover { opacity: 0.9; filter: grayscale(0.3); }


.cal-panel {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}
.cal-nav {
  /* Two rows: the month nav on top, the filter + view controls on their own slim
     row below (keeps each group uncrowded). The grid/gallery height offsets are
     bumped (+35px) to absorb this extra row so the page still fits one screen. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.cal-nav-btn {
  font-size: 14px;
  padding: 6px 12px;
}
.cal-month-label {
  font-family: 'Inter Tight', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text);
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
}
.cal-day-header {
  font-family: 'Inter Tight', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-align: center;
  /* Equal padding top & bottom so the row isn't cramped against the grid's
     top border line. */
  padding: 10px 0;
}
.cal-day {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
  /* Days size off viewport so the grid FILLS the page height (no dead space
     below) without scrolling. Subtract everything above the grid + a small
     bottom buffer, then divide across THIS month's actual week-row count
     (--cal-rows, set per render on #cal-grid). Clamp keeps short viewports
     readable and very tall ones from going huge. */
  min-height: clamp(70px, calc((100vh - 213px) / var(--cal-rows, 6)), 240px);
  cursor: pointer;
  transition: border-color var(--t), background var(--t);
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative; /* anchor the rounded hover / drag-over highlight (::after) */
}
/* Keep the day number, pills and idea-dot above the highlight layer. */
.cal-day > * { position: relative; z-index: 1; }
/* Option-3 polish: cells stay SQUARE & seamless at rest; on hover / drag-over /
   arm-target a soft ROUNDED inset highlight (this pseudo-element) fades in — so
   the tactile feedback is rounded without fragmenting the resting grid. */
.cal-day::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--brand-accent, var(--accent)) 7%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-accent, var(--accent)) 24%, transparent);
  opacity: 0;
  transition: opacity 120ms ease;
  pointer-events: none;
  z-index: 0;
}
.cal-day:hover::after { opacity: 1; }
.cal-day:hover { border-color: var(--border-strong); }
.cal-day.other-month { opacity: 0.35; pointer-events: none; }
.cal-day.today .cal-day-num {
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Today marker → brand primary circle + glow + adaptive (auto-contrast) number.
   High specificity + !important to beat the clerk skin's day-number color and
   its default dark glow. */
.cal-shell .cal-day.today .cal-day-num {
  background: var(--brand-accent, var(--accent)) !important;
  color: var(--brand-accent-contrast, #fff) !important;
  box-shadow:
    0 0 0 1px var(--brand-accent, var(--accent)),
    0 0 10px color-mix(in srgb, var(--brand-accent, var(--accent)) 55%, transparent),
    0 0 18px color-mix(in srgb, var(--brand-accent, var(--accent)) 30%, transparent) !important;
}
.cal-day.selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-elev-2));
}
.cal-day-num {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 11.5px;
  /* Bumped from text-muted so current-month dates are scannable.
     Other-month days still feel recessive via the 0.35 opacity on
     .cal-day.other-month, which dims this color in turn. */
  color: var(--text-2);
  line-height: 1;
}
.cal-pills { display: flex; flex-direction: column; gap: 3px; margin-top: 2px; }
.cal-pill {
  position: relative;
  font-family: 'Inter Tight', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 2px 5px;
  border-radius: 3px;
  white-space: nowrap; /* single line in the dense month grid — keeps every day-cell
                          the same height; the Gallery shows the full platform name */
}
.cal-pill--li  { background: rgba(10,102,194,0.18); color: #4d9de0; }
.cal-pill--x   { background: rgba(160,160,160,0.14); color: var(--text-muted); }
.cal-pill--ig  { background: rgba(180,80,220,0.18); color: #c884d8; }
.cal-pill--vid { background: rgba(210,55,55,0.18); color: #e06060; }
/* Idea-color dot — overlays top-right of pill. Two platforms of the same
   post get the same hue (see ideaHueForItem). No layout impact. */
.cal-pill-dot {
  position: absolute;
  top: -1px; right: -1px;
  width: 5px; height: 5px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(10,10,12,0.85);
  pointer-events: none;
}
.cal-pill.is-posted .cal-pill-dot { opacity: 0.5; }

/* ── Calendar thumbnails — reuse cached renders via findRecordThumb so the
   calendar reads as content (post images), not just text labels. All images
   absolute-fill an aspect-ratio'd box (avoids percentage-height collapse) and
   carry the Studio crop via object-position. ─────────────────────────────── */
/* Full-width pill rows so the full platform name ("LinkedIn Carousel") fits,
   wrapping to a 2nd line when needed (the cells are tall enough now). */
.cal-pill { display: flex; width: 100%; align-items: center; gap: 4px; }
.cal-pill-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-pill-more { width: auto; align-self: flex-start; }
.cal-pill-thumb {
  position: relative;
  width: 14px; height: 14px;
  flex-shrink: 0;
  border-radius: 2px;
  overflow: hidden;
  background: var(--bg-elev-2);
}
.cal-pill-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* "+N" overflow popover — all of a day's posts as draggable pills */
.cal-pill-more { cursor: pointer; }
.cal-overflow-pop {
  position: fixed; z-index: 10000;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: var(--shadow-lg, 0 16px 48px rgba(0,0,0,0.4));
  padding: 10px; max-width: 260px;
}
.cal-overflow-head {
  font: 600 10px/1 'Inter Tight', sans-serif; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 8px;
}
.cal-overflow-pills { display: flex; flex-wrap: wrap; gap: 4px; }
/* Thumbnail images must not intercept the drag — let the pill / card itself be
   the drag source so reschedule drags (esp. from the +N popover) start reliably
   instead of the browser grabbing the image. */
.cal-pill-thumb img, .cal-pending-thumb img, .cal-item-thumb img { pointer-events: none; -webkit-user-drag: none; }
/* Transient drag-image for pill (reschedule) drags — rendered offscreen, removed on dragend */
.cal-drag-ghost { position: fixed; top: -1000px; left: -1000px; width: 48px; aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; box-shadow: 0 6px 16px rgba(0,0,0,0.28); pointer-events: none; }
.cal-drag-ghost img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Day flash after scheduling / rescheduling */
/* Pulse uses box-shadow only — clerk sets .cal-day background !important, which
   would override an animated background. Two quick inset-ring flashes. */
@keyframes cal-day-pulse-kf {
  0%, 50%, 100% { box-shadow: inset 0 0 0 0 transparent; }
  25%, 75%      { box-shadow: inset 0 0 0 3px var(--brand-accent, var(--accent)); }
}
.cal-day.cal-day-pulse { animation: cal-day-pulse-kf 1.4s ease-out; }
/* In-page confirm dialog (calendar collision warnings, etc.) */
.ui-confirm-overlay {
  position: fixed; inset: 0; z-index: 10001;
  background: rgba(10,10,12,0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.ui-confirm-card {
  width: 100%; max-width: 380px;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-lg, 0 16px 48px rgba(0,0,0,0.4));
  padding: 22px 22px 18px;
}
.ui-confirm-msg { font-size: 14px; line-height: 1.5; color: var(--text); margin-bottom: 18px; }
.ui-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }
/* Sidebar pending card — thumb left, text right */
.cal-pending-card.has-thumb { display: flex; gap: 10px; align-items: stretch; }
.cal-pending-card.has-thumb .cal-pending-body { flex: 1; min-width: 0; }
.cal-pending-card.has-thumb .cal-pending-hint { margin-top: 4px; }
.cal-pending-thumb {
  position: relative;
  width: 52px;
  flex-shrink: 0;
  align-self: flex-start;
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
}
.cal-pending-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cal-pending-thumb-badge {
  position: absolute; bottom: 3px; right: 3px;
  font: 600 8px/1 'Manrope', system-ui, sans-serif;
  color: #fff; background: rgba(10,10,12,0.72);
  padding: 1px 4px; border-radius: 4px;
}
/* Detail-panel item — thumb left, content right */
.cal-item.has-thumb { flex-direction: row; align-items: flex-start; gap: 10px; }
.cal-item.has-thumb .cal-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.cal-item-thumb {
  position: relative;
  width: 64px;
  flex-shrink: 0;
  align-self: flex-start;
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
}
.cal-item-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Hover preview popover (pills) — full thumbnail on hover, zero space cost */
.cal-thumb-pop {
  position: fixed;
  z-index: 10000;
  width: 200px;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: var(--shadow-lg, 0 16px 48px rgba(0,0,0,0.4));
  padding: 6px;
  pointer-events: none;
}
.cal-thumb-pop-img {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-elev-2);
}
.cal-thumb-pop-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cal-thumb-pop-title {
  font: 500 11px/1.35 'Manrope', system-ui, sans-serif;
  color: var(--text);
  margin-top: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Calendar detail panel — a FLOATING popover anchored to the clicked day, so the
   month grid keeps a fixed width and never reflows when a day is selected. */
.cal-detail {
  position: fixed;
  z-index: 10000;
  width: 340px;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--shadow-lg, 0 16px 48px rgba(0,0,0,0.4));
}
.cal-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.cal-detail-date {
  font-family: 'Inter Tight', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.cal-detail-close {
  font-size: 18px;
  padding: 0 6px;
  color: var(--text-dim);
}
.cal-detail-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  color: var(--text-dim);
  text-align: center;
  padding: 28px 20px;
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand-accent, var(--accent)) 3%, transparent);
}
.cal-detail-empty-icon { color: var(--text-dim); opacity: 0.85; }
.cal-detail-empty-title { font: 600 14px/1 'Manrope', system-ui, sans-serif; color: var(--text); }
.cal-detail-empty-text { font-size: 12px; line-height: 1.5; max-width: 230px; }
/* Schedule modal — confirmation preview (render + platform + caption) */
.cal-sched-preview { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; }
.cal-sched-thumb {
  position: relative;
  width: 96px;
  flex-shrink: 0;
  aspect-ratio: 4 / 5;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
}
.cal-sched-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cal-sched-meta { flex: 1; min-width: 0; }
.cal-sched-platform {
  display: inline-block;
  font: 600 10px/1 'Inter Tight', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 9px;
}
.cal-sched-caption {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Batch 2: tap-to-schedule a11y + legibility ───────────────────────────── */
/* Visually-hidden live region for screen-reader announcements */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* Schedule button on pending cards — the keyboard/touch scheduling path */
.cal-pending-sched {
  margin-top: 8px;
  font: 600 11px/1 'Manrope', system-ui, sans-serif;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  padding: 5px 10px;
  cursor: pointer;
  transition: color var(--t), border-color var(--t), background var(--t);
}
.cal-pending-sched:hover { color: var(--text); border-color: var(--text-muted); }
.cal-pending-sched.is-armed {
  color: #fff;
  background: var(--brand-accent, var(--accent));
  border-color: var(--brand-accent, var(--accent));
}
.cal-pending-card.is-armed {
  border-color: var(--brand-accent, var(--accent));
  box-shadow: 0 0 0 1px var(--brand-accent, var(--accent)) inset;
}
/* While a post is armed, days advertise themselves as targets */
.cal-shell.is-arming .cal-day:not(.other-month) { cursor: copy; }
/* Arm-target hover visual now comes from the rounded ::after above (defined once
   alongside drag-over); this state no longer paints a square border/tint. */
/* Focus-visible rings — there were none before (keyboard users were lost) */
.cal-day:focus-visible,
.cal-pending-card:focus-visible,
.cal-pending-sched:focus-visible,
.cal-pill:focus-visible,
.cal-list-card:focus-visible {
  outline: 2px solid var(--brand-accent, var(--accent));
  outline-offset: 2px;
}
/* Saturated, legible pill colors in the Clerk (monochrome) skin — the base
   pastels read as near-invisible on white and fail WCAG contrast. */
[data-skin="clerk"] .cal-pill--li  { background: #eaf1fb; color: #0a66c2; }
[data-skin="clerk"] .cal-pill--x   { background: #f0f0f2; color: #131316; }
[data-skin="clerk"] .cal-pill--ig  { background: #fdecf3; color: #c1356a; }
[data-skin="clerk"] .cal-pill--vid { background: #fdecec; color: #c62828; }
[data-skin="clerk"][data-theme="dark"] .cal-pill--li  { background: rgba(10,102,194,0.24); color: #6db3f2; }
[data-skin="clerk"][data-theme="dark"] .cal-pill--x   { background: rgba(255,255,255,0.12); color: #e6e6ea; }
[data-skin="clerk"][data-theme="dark"] .cal-pill--ig  { background: rgba(225,64,108,0.22); color: #f78fb3; }
[data-skin="clerk"][data-theme="dark"] .cal-pill--vid { background: rgba(225,55,55,0.22); color: #f08a8a; }
.cal-item {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color var(--t);
}
.cal-item:hover { border-color: var(--border-strong); }
.cal-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.cal-item-platform {
  font-family: 'Inter Tight', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* Per-channel color via cal-pending-platform--li/x/ig/vid modifier
     applied by buildDetailItem — matches the unscheduled-rail labels. */
  color: var(--text-muted);
}
.cal-item-status {
  font-family: 'Inter Tight', sans-serif;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}
.cal-item-status.is-posted { color: var(--success); }
.cal-item-status.is-skipped { color: var(--danger); }
.cal-item-status.is-failed  { color: var(--danger); }
.cal-item-status.is-posting { color: var(--warn, #d97706); }
.cal-item-status.is-queued  { color: var(--text-muted); }
.cal-item-time { font: 600 11px/1 'Manrope', system-ui, sans-serif; color: var(--text-dim); letter-spacing: 0.02em; }
.cal-item-title {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.4;
}
.cal-item-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cal-item-actions .btn-ghost {
  font-size: 11px;
  padding: 4px 10px;
}

/* Schedule-post modal */
.cal-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 900;
}
.cal-modal-card {
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  width: 420px;
  max-width: 95vw;
  display: flex;
  flex-direction: column;
}
.cal-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
}
.cal-modal-head-lhs { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.cal-modal-body {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cal-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px 20px;
  border-top: 1px solid var(--border);
}
.field-label {
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2px;
}

/* ===== Responsive cap (the brief says no mobile, but keep large monitors clean) ===== */
@media (max-width: 1100px) {
  .strategy-grid, .ideas-grid { grid-template-columns: 1fr; }
  .panel.span-6, .panel.span-8 { grid-column: span 12; }
  .kanban { grid-template-columns: 1fr; }
}

/* =================================================================
   NUEFORM SHELL — operator chrome.
   The picker is Nueform's own identity moment (no brand skinning is
   active). The workspace appbar is the operator/brand seam: a Nueform
   zone on the left, a brand zone on the right of a vertical divider.
   Brand colors still cascade through via applyBrandSkinning() — the
   chrome inside .tp-<slug> is unchanged.
   ================================================================= */

/* Picker page — faint grid texture echoes the login screen and
   establishes Nueform's visual signature. */
#picker-shell, #cc-shell { position: relative; min-height: 100vh; }
#picker-shell::before ,#cc-shell::before {
  content: ""; position: fixed; inset: 0;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 35%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 35%, transparent 78%);
  pointer-events: none; z-index: 0;
}
#picker-shell > *, #cc-shell > * { position: relative; z-index: 1; }

#picker { padding: 80px 32px 120px; max-width: 1320px; margin: 0 auto; }

.picker-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 64px;
  align-items: end;
  padding-bottom: 40px;
  margin-bottom: 56px;
  border-bottom: 1px solid var(--border);
}
.picker-head .lhs { max-width: 720px; min-width: 0; }
.picker-eyebrow {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-muted);
  display: inline-flex; align-items: center; gap: 12px;
}
.picker-eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--text-muted); }
.picker-title {
  font-family: 'Inter Tight', sans-serif;
  font-size: 56px; font-weight: 600;
  letter-spacing: -0.025em; line-height: 1.04;
  margin-top: 20px;
}
.picker-title em { font-style: normal; color: var(--text); }
.picker-lead {
  margin-top: 20px;
  font-size: 15px; color: var(--text-2);
  max-width: 560px; line-height: 1.6;
}

/* Operator status panel — small mono readout sitting opposite the
   page title. Honest data only; no fabricated counts. */
.picker-meta {
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elev);
  min-width: 240px;
  align-self: end;
}
.picker-meta .pm-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.picker-meta .pm-key {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-muted);
}
.picker-meta .pm-val {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 11px; letter-spacing: 0.04em;
  color: var(--text);
  font-feature-settings: "tnum" 1;
}
.picker-meta .pm-val.pm-online {
  color: var(--success);
  display: inline-flex; align-items: center; gap: 8px;
}
.picker-meta .pm-val.pm-online::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 8px rgba(0,200,83,0.6);
  animation: pm-pulse 2.4s ease-in-out infinite;
}
@keyframes pm-pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.35 } }

/* ══ Control Center — operator home (sidebar app), styled to the CLERK skin the
      whole app uses: Manrope body/nav + Inter Tight headings, white cards on the
      #f7f7f8 canvas with hairline borders + soft shadows, 8/12px radius, and the
      app's own rail-nav pattern (grey selection box, brand-accent label). The
      operator home carries NUEFORM's accent as its --brand-accent, the same way
      every brand page carries that brand's colour. ══ */
.cc-app { --brand-accent: #FF3D00; display: grid; grid-template-columns: 244px 1fr; min-height: 100vh; }
.cc-nav-item, .cc-qa-btn, .cc-btn, .cc-side-signout { appearance: none; -webkit-appearance: none; }
.cc-side { border-right: 1px solid var(--border); padding: 20px 14px; display: flex; flex-direction: column; gap: 4px;
  position: sticky; top: 0; height: 100vh; background: var(--bg); }
.cc-side-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; padding: 2px 8px 24px; }
.cc-side-logo { height: 17px; width: auto; display: block; }
.cc-side-tag { font: 500 10px/1 'Manrope', system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); }
.cc-nav { display: flex; flex-direction: column; gap: 2px; }
.cc-nav-item { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 8px; width: 100%;
  font: 400 13px/1.3 'Manrope', system-ui, sans-serif; color: var(--nav-label, var(--text-2));
  background: transparent; border: 0; cursor: pointer; text-align: left; transition: background var(--t), color var(--t); }
.cc-nav-item:hover { background: var(--st2-hover, rgba(0,0,0,0.035)); color: var(--text); }
.cc-nav-item.is-on { background: var(--st2-sel, rgba(0,0,0,0.055)); color: var(--brand-accent, var(--accent)); font-weight: 500; }
.cc-nav-item.is-on .cc-nav-ico { color: var(--brand-accent, var(--accent)); }
.cc-nav-ico { width: 17px; height: 17px; flex: none; color: var(--text-dim); }
.cc-nav-label { flex: 1; }
.cc-nav-badge { font: 500 11px/1 'Manrope', system-ui, sans-serif; min-width: 18px; text-align: center;
  color: var(--text-muted); background: var(--accent-soft, #f0f0f2); border-radius: 999px; padding: 3px 7px; }
.cc-nav-badge:empty { display: none; }
.cc-side-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.cc-side-who { display: flex; align-items: center; gap: 10px; padding: 4px 8px; }
.cc-side-avatar { width: 30px; height: 30px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center;
  font-family: 'Inter Tight', sans-serif; font-size: 13px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--brand-accent, var(--accent)), #FF9900); }
.cc-side-name { font-size: 13px; font-weight: 600; color: var(--text); }
.cc-side-role { font-size: 11px; color: var(--text-dim); }
.cc-side-signout { font: 500 13px/1 'Manrope', system-ui, sans-serif; color: var(--text-muted); background: transparent;
  border: 1px solid var(--border-strong); border-radius: 8px; padding: 9px 12px; cursor: pointer; text-align: center; transition: var(--t); }
.cc-side-signout:hover { color: var(--text); border-color: var(--border-hover); background: var(--bg-elev); }

/* Override the global `main { margin:0 auto; max-width }` + the clerk `main`
   !important rule, which centered the content in a narrow column and left the
   page half-empty. Left-align and fill; lists/attention keep a readable cap. */
.cc-app .cc-main { padding: 40px 52px 84px !important; min-width: 0; max-width: 1440px !important; margin: 0 !important; }
.cc-view[hidden] { display: none; }
.cc-list-body { max-width: 900px; }

/* Overview = full-width stats, then a 2-column split: brands + quick actions on
   the left, the review rail (leads/onboarding to act on) on the right. */
.cc-ov-cols { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 30px; align-items: start; margin-top: 30px; }
.cc-ov-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cc-ov-header .cc-qa { margin-bottom: 3px; }
.cc-ov-left { min-width: 0; }
.cc-ov-rail { min-width: 0; }
@media (max-width: 1160px) { .cc-ov-cols { grid-template-columns: 1fr; } }

/* Compact brand cards for the overview — logo/letter-mark + name + status tag,
   the whole card clicks through (no Enter button). */
.cc-brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.cc-brand-card { display: flex; align-items: center; gap: 12px; padding: 11px 13px; background: var(--bg-elev);
  border: 1px solid var(--border); border-radius: var(--radius-2); box-shadow: var(--shadow-xs); cursor: pointer; transition: var(--t); }
.cc-brand-card:hover { border-color: var(--border-hover); box-shadow: var(--shadow-sm); }
.cc-brand-mono { width: 32px; height: 32px; flex: none; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-family: 'Inter Tight', sans-serif; font-size: 14px; font-weight: 600; color: var(--bmk, var(--text-2));
  border: 1px solid color-mix(in srgb, var(--bmk, var(--border-strong)) 40%, var(--border-strong)); background: color-mix(in srgb, var(--bmk, transparent) 9%, transparent); }
.cc-brand-name { flex: 1; min-width: 0; font-family: 'Inter Tight', sans-serif; font-size: 14px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-brand-plan { flex: none; font-size: 11px; font-weight: 600; color: var(--text-dim); white-space: nowrap; margin-right: 2px; }
.cc-brand-tag { flex: none; font: 600 9.5px/1 'Manrope', system-ui, sans-serif; letter-spacing: .07em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.cc-brand-tag--active { background: var(--success-soft, #f0fdf2); color: var(--success, #15802a); }
.cc-brand-tag--onboarding { background: var(--warning-soft, #fefce8); color: var(--warning, #a16207); }
.cc-brand-tag--paused { background: var(--accent-soft, #f0f0f2); color: var(--text-dim); }

/* Review rail lists (Leads + Onboarding) — compact rows with an inline action. */
.cc-rail-list { display: flex; flex-direction: column; gap: 8px; }
.cc-rail-row { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 14px;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-2); box-shadow: var(--shadow-xs); }
.cc-rail-row-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.cc-rail-name { min-width: 0; font-family: 'Inter Tight', sans-serif; font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-rail-sub { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.cc-rail-sit { font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
.cc-btn-sm { font-size: 11.5px; padding: 5px 11px; }
/* Needs-you rail — one aside, grouped by the next move you owe each item. Each
   group is a small handwriting sub-label above its cards. */
.cc-needs-sec { display: flex; align-items: baseline; gap: 8px; margin: 22px 0 9px; }
.cc-needs-sec:first-child { margin-top: 6px; }
.cc-app .cc-needs-sec-t { font-family: 'Gloria Hallelujah', cursive; font-size: 13px; font-weight: 400; text-transform: lowercase; color: var(--text-dim); }
.cc-needs-sec-n { font: 400 12px/1 'Manrope', system-ui, sans-serif; color: var(--text-muted); }
.cc-needs-list { display: flex; flex-direction: column; gap: 8px; }
/* Higher specificity (.cc-app …) to beat `[data-skin="clerk"] h1/h2` which force
   36px/700 on h1 and 24px/600 on h2 — that's why these never changed before. */
.cc-app .cc-greet { font-family: 'EB Garamond', Georgia, serif; font-size: 34px; font-weight: 500; letter-spacing: -.02em; line-height: 1.05; margin: 8px 0 0; color: var(--text); }
.cc-app .cc-greet em { font-style: normal; font-weight: 500; color: inherit; }
/* Playful handwriting eyebrow/labels — the operator's own Control Center, matching
   the marketing site. Scoped to .cc-app so it never leaks into the brand workspace. */
/* !important + higher specificity to beat `[data-skin="clerk"] .picker-eyebrow`
   (~line 9647), which forces Manrope/uppercase with !important. */
[data-skin="clerk"] .cc-app .picker-eyebrow { font-family: 'Gloria Hallelujah', cursive !important; font-size: 13px !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--text-muted) !important; }

.cc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 28px; }
.cc-stat { border: 1px solid var(--border); background: var(--bg-elev); border-radius: var(--radius-2); padding: 18px 20px 22px; box-shadow: var(--shadow-sm); }
.cc-stat-k { font: 400 14px/1.25 'Gloria Hallelujah', cursive; letter-spacing: 0; text-transform: lowercase; color: var(--text-muted); }
.cc-stat-v { font-family: 'Inter Tight', sans-serif; font-size: 30px; font-weight: 400; letter-spacing: -.02em; margin-top: 8px; line-height: 1; color: var(--text); }
.cc-stat-v.accent { color: var(--brand-accent, var(--accent)); }
.cc-stat-v.warn { color: var(--warning, #a16207); }
.cc-stat-d { font: 400 11px/1.3 'Manrope', system-ui, sans-serif; color: var(--text-dim); margin-top: 11px; min-height: 14px; }

.cc-sec-head { display: flex; align-items: center; gap: 9px; margin: 26px 0 13px; padding-top: 20px; border-top: 1px solid var(--border); }
.cc-sec-head.cc-sec-head--flush { border-top: 0; padding-top: 0; margin-top: 4px; }
.cc-app .cc-sec-title { font-family: 'Gloria Hallelujah', cursive; font-size: 17px; font-weight: 400; letter-spacing: 0; text-transform: lowercase; color: var(--text-2); margin: 0; }

/* Page header for the Leads / Onboarding / Proposals / Brands views — a real
   title + one-line context + its primary action, like the Overview header. */
.cc-pg-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 1px solid var(--border); margin-bottom: 26px; }
.cc-app .cc-pg-title { font-family: 'EB Garamond', Georgia, serif; font-size: 32px; font-weight: 500; letter-spacing: -.02em; line-height: 1.05; margin: 0; color: var(--text); }
.cc-pg-sub { font-size: 13.5px; color: var(--text-muted); margin-top: 7px; }
.cc-pg-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 2px; }

/* Brands page — info-dense rows (one per brand, with lazy activity stats). */
.brands-rows { display: flex; flex-direction: column; gap: 8px; }
.brand-row { display: flex; align-items: center; gap: 16px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-2); box-shadow: var(--shadow-xs); padding: 13px 18px; cursor: pointer; transition: var(--t); }
.brand-row:hover { border-color: var(--border-hover); box-shadow: var(--shadow-sm); }
.brand-row-mono { width: 38px; height: 38px; flex-shrink: 0; border-radius: 9px; display: flex; align-items: center; justify-content: center; font: 600 16px/1 'Inter Tight', sans-serif; color: #fff; background: var(--bc, var(--text-dim)); }
.brand-row-id { min-width: 172px; flex-shrink: 0; }
.brand-row-name { font-family: 'Inter Tight', sans-serif; font-size: 15px; font-weight: 500; color: var(--text); }
.brand-row-slug { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.brand-row-plan { font-size: 11.5px; font-weight: 600; color: var(--text-2); margin-top: 3px; }
.brand-row-stats { display: flex; gap: 30px; flex: 1; flex-wrap: wrap; }
.brand-row-stat b { font-family: 'Inter Tight', sans-serif; font-size: 15px; font-weight: 600; color: var(--text); display: block; line-height: 1.15; }
.brand-row-stat span { font-size: 11px; color: var(--text-dim); text-transform: lowercase; }
.brand-row-cta { font-size: 12px; font-weight: 600; color: var(--text-dim); white-space: nowrap; }
.brand-row:hover .brand-row-cta { color: var(--bc, var(--brand-accent, var(--accent))); }
@media (max-width: 680px) { .brand-row-id { min-width: 0; } .brand-row-stats { gap: 18px; } }
.cc-sec-count { font: 600 11.5px/1 'Manrope', system-ui, sans-serif; color: var(--text-dim); }

.cc-qa { display: flex; gap: 10px; flex-wrap: wrap; }
.cc-qa-btn { font: 600 13px/1 'Manrope', system-ui, sans-serif; padding: 10px 15px; border-radius: var(--radius); cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--bg-elev); color: var(--text); box-shadow: var(--shadow-xs); transition: var(--t); }
.cc-qa-btn:hover { border-color: var(--border-hover); }
.cc-qa-btn.cc-qa-sm { font-size: 12px; padding: 6px 12px; }
#cc-qa-brand { background: var(--brand-accent, var(--accent)); border-color: var(--brand-accent, var(--accent)); color: #fff; box-shadow: none; }
#cc-qa-brand:hover { opacity: .92; }

.cc-list-body { display: flex; flex-direction: column; gap: 8px; }
.cc-pill { font: 600 10.5px/1 'Manrope', system-ui, sans-serif; letter-spacing: .02em; padding: 4px 9px; border-radius: 999px; white-space: nowrap;
  background: var(--accent-soft, #f0f0f2); color: var(--text-muted); }
.cc-pill--new, .cc-pill--submitted, .cc-pill--readyforreview, .cc-pill--sent { background: color-mix(in srgb, var(--brand-accent, var(--accent)) 12%, transparent); color: var(--brand-accent, var(--accent)); }
.cc-pill--contacted, .cc-pill--active, .cc-pill--paid { background: var(--success-soft, #f0fdf2); color: var(--success, #15802a); }
.cc-pill--onboarded { background: color-mix(in srgb, #7c3aed 12%, transparent); color: #7c3aed; }
/* Pipeline board — one column per stage; cards advance via their action button. */
.cc-board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px; align-items: flex-start; }
.cc-pcol { flex: 0 0 244px; min-width: 0; }
.cc-pcol-head { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; padding: 0 2px; }
.cc-pcol-title { font-family: 'Inter Tight', sans-serif; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.cc-pcol-count { font: 600 11px/1 'Manrope', system-ui, sans-serif; color: var(--text-dim); background: var(--bg-elev); border: 1px solid var(--border); border-radius: 100px; padding: 2px 7px; }
.cc-pcol-body { display: flex; flex-direction: column; gap: 8px; min-height: 44px; }
.cc-pcol-body.is-empty { border: 1px dashed var(--border); border-radius: 12px; }
.cc-pcard { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-2); box-shadow: var(--shadow-xs); padding: 12px 13px; transition: var(--t); }
.cc-pcard:hover { border-color: var(--border-hover); box-shadow: var(--shadow-sm); }
.cc-pcard--flash { animation: cc-pcard-flash 0.7s ease-out; }
@keyframes cc-pcard-flash {
  0%   { box-shadow: 0 0 0 2px var(--brand-accent, #FF3D00); border-color: var(--brand-accent, #FF3D00); }
  100% { box-shadow: var(--shadow-xs); border-color: var(--border); }
}
@media (prefers-reduced-motion: reduce) { .cc-pcard--flash { animation: none; } }
.cc-pcard-top { display: flex; align-items: center; gap: 8px; }
.cc-pcard-mono { width: 20px; height: 20px; flex-shrink: 0; border-radius: 6px; display: flex; align-items: center; justify-content: center; font: 700 10px/1 'Inter Tight', sans-serif; color: #fff; background: var(--pc, var(--text-dim)); }
.cc-pcard-name { flex: 1; min-width: 0; font-family: 'Inter Tight', sans-serif; font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-ppill { flex-shrink: 0; font: 600 9px/1 'Manrope', system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; padding: 3px 6px; border-radius: 100px; }
.cc-ppill--invited { background: var(--warning-soft, #fefce8); color: var(--warning, #a16207); }
.cc-ppill--met { background: var(--success-soft, #eaf6ee); color: var(--success, #15802a); }
.cc-ppill--submitted { background: var(--success-soft, #eaf6ee); color: var(--success, #15802a); }
.cc-ppill--progress { background: var(--warning-soft, #fefce8); color: var(--warning, #a16207); }
.cc-pcard-sub { font-size: 11.5px; color: var(--text-dim); margin-top: 5px; }
.cc-pcard-detail { font-size: 12px; color: var(--text-2); line-height: 1.45; margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cc-pcard-amt { font-family: 'Inter Tight', sans-serif; font-weight: 700; font-size: 15px; color: var(--text); margin-top: 8px; }
.cc-pcard-acts { display: flex; flex-direction: column; gap: 6px; margin-top: 11px; }
.cc-pcard-btn { width: 100%; font: 600 11.5px/1 'Manrope', system-ui, sans-serif; padding: 8px; border-radius: var(--radius); border: 1px solid var(--brand-accent, var(--accent)); background: var(--brand-accent, var(--accent)); color: #fff; cursor: pointer; white-space: nowrap; transition: var(--t); }
.cc-pcard-btn:hover { opacity: .92; }
.cc-pcard-btn.ghost { background: transparent; color: var(--text-2); border-color: var(--border-strong); }
.cc-pcard-btn.ghost:hover { border-color: var(--border-hover); opacity: 1; }
.cc-pcard-btn.danger { background: transparent; color: var(--text-muted); border-color: var(--border-strong); }
.cc-pcard-btn.danger:hover { color: var(--danger, #b91c1c); border-color: var(--danger, #b91c1c); opacity: 1; }
.cc-board-empty { font-size: 13px; color: var(--text-muted); padding: 24px 2px; }
/* Compose-email message box — a real multi-line editor. */
textarea.compose-textarea { min-height: 300px; height: auto; resize: vertical; line-height: 1.55; white-space: pre-wrap; font-family: inherit; font-size: 13.5px; }
.cc-pill--minted { background: var(--warning-soft, #fefce8); color: var(--warning, #a16207); }
.cc-pill--onboarding { background: color-mix(in srgb, #7c3aed 12%, transparent); color: #7c3aed; }
.cc-pill--expired, .cc-pill--notafit, .cc-pill--failed, .cc-pill--lost { background: var(--accent-soft, #f0f0f2); color: var(--text-dim); }
.cc-pill--met { background: color-mix(in srgb, #2456c8 12%, transparent); color: #2456c8; }
.cc-pill--noshow, .cc-pill--bounced { background: var(--warning-soft, #faf3df); color: var(--warning, #a16207); }

.cc-btn { font: 600 12px/1 'Manrope', system-ui, sans-serif; padding: 6px 12px; border-radius: var(--radius); white-space: nowrap; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--bg-elev); color: var(--text); transition: var(--t); }
.cc-btn:hover:not(:disabled) { border-color: var(--border-hover); }
.cc-btn:disabled { opacity: .55; cursor: default; }
.cc-btn.primary { background: var(--brand-accent, var(--accent)); border-color: var(--brand-accent, var(--accent)); color: #fff; }
.cc-btn.primary:hover:not(:disabled) { opacity: .92; }
.cc-lead-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.cc-lead-actions:empty { display: none; }
.cc-btn-danger { color: var(--text-muted); }
.cc-btn-danger:hover:not(:disabled) { border-color: var(--danger, #b91c1c); color: var(--danger, #b91c1c); background: var(--bg-elev); }

/* Sectioned lead / onboarding card — header, meta, situation, actions, each zone
   separated by a hairline so nothing reads as "thrown in". */
.cc-lead-card { display: flex; flex-direction: column; background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius-2); box-shadow: var(--shadow-xs); padding: 16px 18px; }
.cc-lead-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cc-lead-name { min-width: 0; font-family: 'Inter Tight', sans-serif; font-size: 15px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-lead-meta { font-size: 12px; color: var(--text-muted); margin-top: 5px; }
.cc-lead-time { font: 400 11px/1.2 'Manrope', system-ui, sans-serif; color: var(--text-dim); margin-top: 4px; }
.cc-lead-sit { font-size: 13px; color: var(--text-2); line-height: 1.55; margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--border); }
.cc-lead-card > .cc-lead-actions { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--border); }
.cc-lead-card--sm { padding: 14px 15px; }
.cc-lead-card--sm .cc-lead-name { font-size: 14px; }
.cc-lead-card--sm .cc-lead-sit { font-size: 12.5px; margin-top: 11px; padding-top: 11px; }
.cc-lead-card--sm > .cc-lead-actions { margin-top: 12px; padding-top: 11px; }
.cc-empty { font-size: 13px; color: var(--text-muted); padding: 14px 2px; }

/* Onboarding "Open" screen — an overlay sheet showing the client's intake answers. */
.cc-sheet-ov { position: fixed; inset: 0; z-index: 1200; display: none; align-items: flex-start; justify-content: center;
  background: rgba(16, 17, 26, .5); padding: 44px 20px; overflow-y: auto; }
.cc-sheet-ov.show { display: flex; }
.cc-sheet { width: 100%; max-width: 720px; margin: auto; background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius-lg, 16px); box-shadow: var(--shadow-lg); }
.cc-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 24px;
  border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 1; background: var(--bg-elev);
  border-radius: var(--radius-lg, 16px) var(--radius-lg, 16px) 0 0; }
.cc-sheet-title { font-family: 'Inter Tight', sans-serif; font-size: 19px; font-weight: 600; color: var(--text); }
.cc-sheet-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; }
.cc-sheet-x { flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border-strong);
  background: var(--bg-elev); color: var(--text-muted); font-size: 13px; line-height: 1; cursor: pointer; transition: var(--t); }
.cc-sheet-x:hover { color: var(--text); border-color: var(--border-hover); }
.cc-sheet-body { padding: 6px 24px 24px; }
/* Quote detail — money hero + their story + compact facts (no more one-row-per-field). */
.qd-hero { padding: 8px 0 18px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.qd-amount { font-family: 'Inter Tight', sans-serif; font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: var(--text); }
.qd-plan { font-size: 14px; color: var(--text-2); margin-top: 3px; }
.qd-tags { display: flex; align-items: center; gap: 10px; margin-top: 13px; }
.qd-when { font-size: 12px; color: var(--text-dim); }
.qd-paylink { display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--brand-accent, var(--accent)); text-decoration: none; }
.qd-paylink:hover { text-decoration: underline; }
.qd-sec { margin-bottom: 20px; }
.qd-sec:last-child { margin-bottom: 2px; }
.qd-h { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 9px; }
/* Archive "Lost" graveyard — a collapsed disclosure matching the qd-h header. */
.cc-arch-drawer { margin-bottom: 20px; border-top: 1px solid var(--border); padding-top: 16px; }
.cc-arch-sum { list-style: none; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.cc-arch-sum::-webkit-details-marker { display: none; }
.cc-arch-sum::before { content: '▸'; color: var(--text-dim); font-size: 11px; transition: transform .15s ease; }
.cc-arch-drawer[open] .cc-arch-sum::before { transform: rotate(90deg); }
/* Origin tag on a lost card — where it got lost (no-show / bounced). */
.cc-arch-origin { font-size: 11.5px; color: var(--text-dim); margin-top: 6px; }
.qd-said { font-size: 13.5px; color: var(--text); line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.qd-facts { display: grid; grid-template-columns: auto 1fr; gap: 9px 22px; margin: 0; font-size: 13px; }
.qd-facts dt { color: var(--text-muted); }
.qd-facts dd { color: var(--text); margin: 0; word-break: break-word; }

@media (max-width: 1040px) { .cc-stats { grid-template-columns: repeat(2, 1fr); } }

/* Brand tile grid */
.brands-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
}

.brand-tile {
  position: relative;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  border-radius: var(--radius);
  padding: 28px 28px 24px;
  display: flex; flex-direction: column;
  min-height: 240px;
  cursor: pointer;
  transition: border-color var(--t), background var(--t);
  overflow: hidden;
  --tile-accent: var(--text);
}
/* Always-visible top stripe in the brand's color — a real preview
   of brand identity, not a hover-only flourish. */
.brand-tile::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 2px; background: var(--tile-accent);
  opacity: 0.55;
  transition: opacity var(--t), height var(--t);
}
.brand-tile:hover::after { opacity: 1; height: 3px; }
/* Subtle radial wash on hover, anchored to the corner. */
.brand-tile::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--tile-accent) 14%, transparent), transparent 65%);
  opacity: 0;
  transition: opacity var(--t);
  pointer-events: none;
}
.brand-tile:hover { border-color: var(--border-strong); background: var(--bg-elev-2); }
.brand-tile:hover::before { opacity: 1; }
.brand-tile > * { position: relative; z-index: 1; }

.brand-tile .tile-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 22px; min-height: 32px;
}
.brand-tile .tile-logo {
  display: flex; align-items: center;
  height: 28px; max-width: 160px;
  color: var(--text);
}
.brand-tile .tile-logo img,
.brand-tile .tile-logo svg {
  display: block; height: 28px; width: auto; max-width: 160px;
}
.brand-tile .tile-logo-fallback {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid color-mix(in srgb, var(--tile-accent) 50%, var(--border-strong));
  border-radius: var(--radius);
  font-family: 'Inter Tight', sans-serif;
  font-size: 14px; font-weight: 600;
  color: var(--tile-accent);
  background: color-mix(in srgb, var(--tile-accent) 12%, transparent);
}
.brand-tile .tile-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-muted);
}
.brand-tile .tile-status .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-dim);
}
.brand-tile .tile-status.is-active .dot { background: var(--success); box-shadow: 0 0 6px rgba(0,200,83,0.6); }
.brand-tile .tile-status.is-onboarding .dot { background: var(--warn); }
.brand-tile .tile-status.is-paused .dot { background: var(--text-dim); }

.brand-tile .tile-name {
  font-family: 'Inter Tight', sans-serif;
  font-size: 28px; font-weight: 600;
  letter-spacing: -0.018em; line-height: 1.1;
  color: var(--text);
}
.brand-tile .tile-slug {
  margin-top: 8px;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 11px; letter-spacing: 0.04em;
  color: var(--text-muted);
}

.brand-tile .tile-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: auto; padding-top: 28px;
}
.brand-tile .tile-pack {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-muted);
  display: inline-flex; align-items: center; gap: 8px;
}
.brand-tile .tile-pack::before {
  content: ""; width: 6px; height: 6px;
  background: var(--tile-accent); opacity: 0.7;
}
.brand-tile .tile-cta {
  font-family: 'Inter Tight', sans-serif;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted);
  display: inline-flex; align-items: center; gap: 8px;
  transition: color var(--t), gap var(--t);
}
.brand-tile:hover .tile-cta { color: var(--tile-accent); gap: 12px; }

.brand-tile.add-tile {
  border-style: dashed;
  align-items: center; justify-content: center;
  text-align: center;
  cursor: pointer;
  color: var(--text-muted);
  min-height: 240px;
}
.brand-tile.add-tile::after,
.brand-tile.add-tile::before { display: none; }
.brand-tile.add-tile:hover { color: var(--text); border-color: var(--border-strong); background: var(--bg-elev); }
.brand-tile.add-tile .add-icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-family: 'Inter Tight', sans-serif;
  font-size: 20px; font-weight: 400;
  margin-bottom: 16px;
  color: var(--text-2);
}
.brand-tile.add-tile:hover .add-icon { border-color: var(--text); color: var(--text); }
.brand-tile.add-tile .add-label {
  font-family: 'Inter Tight', sans-serif;
  font-size: 14px; font-weight: 500;
  color: inherit;
}
.brand-tile.add-tile .add-help {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-muted);
  margin-top: 6px;
}

#picker-status {
  margin-top: 32px; padding: 24px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 14px;
}

/* Modal for "+ Add Brand" instructions */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  display: none;
  align-items: center; justify-content: center;
  z-index: 1500;
}
.modal-overlay.show { display: flex; }
.modal-card {
  width: 540px; max-width: calc(100vw - 32px);
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 36px;
}
.modal-card h2 {
  font-family: 'Inter Tight', sans-serif;
  font-size: 22px; font-weight: 600;
  letter-spacing: -0.01em; margin-bottom: 16px;
}
.modal-card p { color: var(--text-2); line-height: 1.55; margin-bottom: 12px; font-size: 14px; }
.modal-card ol { color: var(--text-2); line-height: 1.7; margin: 12px 0 12px 20px; font-size: 14px; }
.modal-card .modal-actions { display: flex; gap: 8px; margin-top: 24px; }
.modal-card.modal-wide { width: 640px; max-height: 84vh; display: flex; flex-direction: column; }
/* "+ Add idea" modal-specific layout. */
.add-idea-form {
  display: flex; flex-direction: column; gap: 18px;
  margin-top: 8px;
}
.add-idea-field { display: flex; flex-direction: column; gap: 8px; }
.add-idea-field .input { font-family: inherit; }
.add-idea-field textarea.input { resize: vertical; min-height: 80px; }
.add-idea-field select.input {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23838383' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}
.add-idea-audience-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.add-idea-audience-chips .gen-chip { padding: 5px 11px; font-size: 12px; }
.add-idea-status {
  font-size: 12px; color: var(--text-muted);
  padding: 8px 12px; border-radius: 6px;
  background: rgba(255,255,255,0.04);
}
.add-idea-status.is-error { color: #ff5a5a; background: rgba(255,90,90,0.08); }
.add-idea-status.is-success { color: #4ade80; background: rgba(74,222,128,0.08); }
.add-idea-status.is-loading { color: var(--text); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.add-idea-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 24px;
}
.add-idea-actions-right { display: flex; gap: 8px; }
.add-idea-polish-group { display: flex; align-items: center; gap: 8px; }
.modal-card.modal-xl { width: 760px; max-height: 84vh; display: flex; flex-direction: column; }
.modal-card .modal-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 8px;
}
.modal-card .modal-eyebrow {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-muted);
  margin-bottom: 8px;
}
.modal-card .modal-close {
  font-family: 'Inter Tight', sans-serif;
  font-size: 12px; color: var(--text-muted);
  background: transparent; border: 0; padding: 4px 8px;
  cursor: pointer; transition: color var(--t);
}
.modal-card .modal-close:hover { color: var(--text); }
.modal-card .modal-body {
  flex: 1 1 auto; overflow: auto;
  margin: 16px -8px; padding: 0 8px;
  overscroll-behavior: contain;
}
body:has(.modal-overlay.show) { overflow: hidden; }
.modal-card .modal-foot {
  display: flex; gap: 8px; align-items: center; justify-content: flex-end;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.modal-card .modal-foot .lhs { margin-right: auto; }

/* Modal form fields (bf-* pattern). These classes carried NO layout of their
   own, so labels + inputs sat cramped. Give every modal proper breathing room. */
.modal-overlay .bf-field { display: flex; flex-direction: column; gap: 7px; margin: 0 0 20px; }
.modal-overlay .bf-field:last-of-type { margin-bottom: 4px; }
.modal-overlay .bf-label { display: flex; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text); }
.modal-overlay .bf-label em { font-style: normal; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); font-weight: 500; }
.modal-overlay .bf-help { margin-top: 1px; }
.modal-overlay .bf-section { margin-bottom: 6px; }
.modal-overlay .bf-section-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin: 8px 0 13px; }
.modal-overlay .bf-row { display: flex; gap: 14px; flex-wrap: wrap; }
.modal-overlay .bf-row .bf-field { flex: 1; min-width: 140px; }
.modal-overlay .bf-color-row { display: flex; gap: 8px; align-items: center; }
.modal-overlay .bf-swatch { width: 38px; height: 38px; flex: none; padding: 0; border: 1px solid var(--border-strong); border-radius: 8px; background: none; cursor: pointer; }

/* ── "What's new?" update inlet — a right-hand sheet riding the modal system
   (same .modal-overlay class so the skin's blur/scrim overrides apply). ── */
/* A floating chat window that pops out of the bubble in the bottom-right,
   not a drawer glued to the edge. It sits ABOVE the FAB (which hides while
   open), with a gap on every side, and grows from its bottom-right corner so
   it reads as emerging from the icon. */
.modal-overlay.inlet { justify-content: flex-end; align-items: flex-end; padding: 24px 24px 88px; }
.modal-overlay.inlet .modal-card.inlet-sheet {
  width: 452px; max-width: calc(100vw - 48px);
  height: 620px; max-height: calc(100vh - 128px);
  border-radius: 18px;
  display: flex; flex-direction: column; padding: 24px;
  transform-origin: bottom right;
  animation: inlet-pop 0.34s cubic-bezier(0.34, 1.36, 0.64, 1);
  box-shadow: 0 24px 64px -12px rgba(0, 0, 0, 0.35), 0 8px 20px rgba(0, 0, 0, 0.12);
}
@keyframes inlet-pop {
  from { transform: scale(0.35) translate(44px, 52px); opacity: 0; }
  60%  { opacity: 1; }
  to   { transform: scale(1) translate(0, 0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .modal-overlay.inlet .modal-card.inlet-sheet { animation: inlet-fade 0.15s ease; }
  @keyframes inlet-fade { from { opacity: 0; } to { opacity: 1; } }
}
/* The clerk skin's global h2 rule pins headings to the light ink and has no
   dark override that reaches this sheet — double specificity + var(--text)
   keeps the title visible in both themes. */
.modal-card.inlet-sheet h2 { color: var(--text); }
/* Header: the title row + the subtitle form ONE block, with a single hairline
   under them dividing the header from the conversation. The clerk skin gives
   .modal-head its own 24px padding (which pushed the title in) and a
   border-bottom (which dropped a divider between the title and subtitle) — both
   are overridden here so everything shares the card's left edge. */
/* Outweigh the skin's [data-skin] .modal-head (0,2,0) with a 3-class selector. */
[data-skin="clerk"] .modal-head.inlet-head,
.modal-card .modal-head.inlet-head { padding: 0 !important; border-bottom: 0 !important; margin: 0 0 10px !important; align-items: center; gap: 12px; }
.inlet-head h2 { margin: 0 !important; }
.inlet-sub { width: 100%; margin: 0; padding: 0 0 16px; border-bottom: 1px solid var(--border); font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.inlet-head-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.inlet-fresh { white-space: nowrap; }
.inlet-x {
  flex: none; width: 30px; height: 30px; border-radius: 999px;
  border: 1px solid var(--border); background: transparent; color: var(--text-muted);
  font-size: 17px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color var(--t), color var(--t), background var(--t);
}
.inlet-x:hover { color: var(--text); border-color: var(--border-strong); }
.inlet-thread {
  flex: 1 1 auto; overflow: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 10px; padding: 8px 2px;
}
.inlet-msg { font-size: 14px; line-height: 1.55; padding: 10px 14px; border-radius: 12px; max-width: 92%; white-space: pre-wrap; }
.inlet-msg.ask { background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--text); align-self: flex-start; border-bottom-left-radius: 4px; }
.inlet-msg.mine { background: color-mix(in srgb, var(--text) 6%, transparent); border: 1px solid var(--border); color: var(--text); align-self: flex-end; border-bottom-right-radius: 4px; }
.inlet-msg.note { color: var(--text-muted); font-size: 12.5px; background: transparent; padding: 2px 4px; align-self: flex-start; }
.inlet-chips { display: flex; flex-wrap: wrap; gap: 6px; align-self: flex-start; max-width: 92%; }
.inlet-chips.used { opacity: 0.45; pointer-events: none; }
.inlet-chip {
  font-size: 12.5px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: transparent; color: var(--text);
  cursor: pointer; transition: border-color var(--t), background var(--t);
}
.inlet-chip:hover { border-color: var(--accent); }
.inlet-chip.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.inlet-entry { border: 1px solid var(--border-strong); border-radius: 10px; padding: 12px 14px; max-width: 92%; align-self: flex-start; }
.inlet-entry.inlet-draft { border-style: dashed; }
.inlet-entry-tag { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.inlet-entry-body { font-size: 14px; line-height: 1.55; color: var(--text); white-space: pre-wrap; }
.inlet-compose { display: flex; gap: 8px; align-items: flex-end; padding-top: 14px; border-top: 1px solid var(--border); }
/* Match the mic + Share heights so the compose row reads as one aligned bar. */
.inlet-compose .inlet-mic, .inlet-compose #whatsnew-send { height: 42px; }
.inlet-compose #whatsnew-send { display: inline-flex; align-items: center; }
.inlet-compose textarea.input { flex: 1; resize: none; min-height: 42px; max-height: 160px; overflow-y: hidden; font-family: inherit; }

/* ── The floating chat bubble + its teaser ── */
.chat-fab {
  position: fixed; bottom: 24px; right: 24px; z-index: 1400;
  width: 54px; height: 54px; border-radius: 999px; border: 0;
  /* Icon ink tracks the theme: the accent flips dark↔light with the skin,
     so a hardcoded white icon vanishes in dark mode. */
  background: var(--accent); color: var(--bg-elev);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  transition: transform var(--t), box-shadow var(--t);
}
.chat-fab:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28); }
.chat-teaser {
  position: fixed; bottom: 90px; right: 24px; z-index: 1400;
  max-width: 260px; display: flex; align-items: flex-start; gap: 8px;
  background: var(--bg-elev); border: 1px solid var(--border-strong);
  border-radius: 14px; border-bottom-right-radius: 4px;
  padding: 12px 14px; font-size: 13.5px; line-height: 1.5; color: var(--text);
  cursor: pointer; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
  animation: teaser-in 0.28s ease;
}
@keyframes teaser-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.chat-teaser-x { border: 0; background: transparent; color: var(--text-muted); font-size: 14px; line-height: 1; padding: 0 0 0 2px; cursor: pointer; }
.chat-teaser-x:hover { color: var(--text); }
/* The sheet replaces the bubble while open; toasts hop above the bubble. */
body:has(#whatsnew-modal.show) .chat-fab,
body:has(#whatsnew-modal.show) .chat-teaser { display: none; }
body:has(.chat-fab) #toast { bottom: 96px; }
.inlet-mic {
  width: 40px; height: 40px; flex: 0 0 auto; border-radius: 999px;
  border: 1px solid var(--border-strong); background: transparent; color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: border-color var(--t), color var(--t);
}
.inlet-mic:hover { border-color: var(--accent); }
.inlet-mic.rec { border-color: #e5484d; color: #e5484d; animation: inlet-pulse 1.2s ease-in-out infinite; }
.inlet-mic.busy { opacity: 0.5; pointer-events: none; }
@keyframes inlet-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0.35); } 50% { box-shadow: 0 0 0 7px rgba(229, 72, 77, 0); } }

/* Platform-pick row inside the send-to-approval modal */
.send-row {
  display: flex; gap: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 8px;
  background: var(--bg-elev-2);
  cursor: pointer;
  transition: border-color var(--t), background var(--t), transform var(--t);
}
.send-row:hover {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border-strong));
  background: color-mix(in srgb, var(--accent) 4%, var(--bg-elev-2));
}
.send-row.checked {
  border-color: color-mix(in srgb, var(--accent) 36%, var(--border-strong));
  background: color-mix(in srgb, var(--accent) 7%, var(--bg-elev-2));
}
.send-row.checked:hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-elev-2));
}
.send-row.disabled { opacity: 0.5; }
.send-row .send-check {
  margin-top: 2px;
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
}
.send-row:hover .send-check { border-color: color-mix(in srgb, var(--accent) 50%, var(--border-strong)); }
.send-row.checked .send-check {
  border-color: var(--accent);
  background: var(--accent);
  color: #1a0a02;
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 40%, transparent);
}
.send-row.checked .send-check::after { content: "✓"; font-size: 11px; font-weight: 700; }

/* Thumbnail column — image / carousel rows only. Fixed 88px square
   with rounded corners and a hairline border so the modal scans as
   a uniform grid even with varying image aspect ratios. */
.send-row .send-thumb {
  position: relative;
  width: 88px; height: 88px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.send-row .send-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.send-row .send-thumb-badge {
  position: absolute;
  bottom: 5px; right: 5px;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(10,10,12,0.78);
  color: var(--text);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* Empty / not-generated state — amber warning treatment */
.send-row .send-thumb--empty {
  border: 1px dashed color-mix(in srgb, var(--status-pending) 36%, var(--border-strong));
  background: color-mix(in srgb, var(--status-pending) 6%, var(--bg));
  color: var(--status-pending);
}
.send-row .send-thumb-empty-glyph { display: flex; align-items: center; justify-content: center; }

.send-row .send-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.send-row .send-platform {
  font-family: 'Inter Tight', sans-serif;
  font-size: 13.5px; font-weight: 600;
  letter-spacing: 0;
  color: var(--text);
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.send-row .send-platform-name { flex-shrink: 0; }
.send-row .send-platform .send-meta {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  display: inline-flex; align-items: center; gap: 8px;
}
.send-row .send-meta-warn {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 10px;
  color: var(--status-pending);
  background: color-mix(in srgb, var(--status-pending) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--status-pending) 32%, transparent);
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0;
}
.send-row .send-preview {
  font-size: 13px; color: var(--text-2);
  line-height: 1.5;
  white-space: pre-wrap;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 2px;
}

/* Modal-level layout — group labels + count badge + glass card */
.send-modal { width: 760px !important; }
.send-modal-body { padding-top: 8px !important; }
.send-modal-head-rhs {
  display: flex; align-items: center; gap: 14px;
}
.send-count-badge {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 11px;
  color: var(--text-2);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.send-group { margin-bottom: 18px; }
.send-group:last-child { margin-bottom: 0; }
.send-group-label {
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 18px 2px 10px;
}
.send-group-label:first-child { margin-top: 4px; }

/* Approval preview modal — full post body + actions */
.approval-preview .ap-meta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 16px;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 11px; letter-spacing: 0.06em;
  color: var(--text-muted);
}
.approval-preview .ap-meta .ap-platform {
  color: var(--accent); text-transform: uppercase; letter-spacing: 0.18em;
}
.approval-preview .ap-meta .ap-status {
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--border-strong);
  text-transform: uppercase; letter-spacing: 0.16em;
}
.approval-preview .ap-meta .ap-status.is-approved { color: var(--success); border-color: rgba(0,200,83,0.4); }
.approval-preview .ap-meta .ap-status.is-changes { color: var(--warn); border-color: rgba(255,184,0,0.4); }
.approval-preview .ap-meta .ap-status.is-posted { color: var(--text-2); }
.approval-preview .ap-title {
  font-family: 'Inter Tight', sans-serif;
  font-size: 22px; font-weight: 600;
  letter-spacing: -0.01em; line-height: 1.25;
  color: var(--text);
  margin-bottom: 16px;
}
.approval-preview .ap-body {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  padding: 16px 18px;
  border-radius: var(--radius);
  font-size: 14px; line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
  margin-bottom: 16px;
  max-height: 50vh; overflow: auto;
}
.approval-preview .ap-feedback-existing {
  background: rgba(255,184,0,0.05);
  border: 1px solid rgba(255,184,0,0.3);
  padding: 14px 16px;
  border-radius: var(--radius);
  margin-bottom: 16px;
}
.approval-preview .ap-feedback-existing .ap-feedback-label {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--warn);
  margin-bottom: 8px;
}
.approval-preview .ap-feedback-existing .ap-feedback-text {
  font-size: 14px; line-height: 1.5; color: var(--text-2);
  white-space: pre-wrap;
}
.approval-preview .ap-feedback-input {
  background: var(--bg);
  border: 1px solid var(--accent);
  padding: 12px 14px;
  border-radius: var(--radius);
  font-family: 'Manrope', sans-serif;
  font-size: 13px; line-height: 1.5;
  color: var(--text);
  width: 100%;
  resize: vertical;
  min-height: 80px;
  outline: none;
  margin-top: 8px;
}
.approval-preview .ap-feedback-label-input {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-muted);
  margin-top: 8px;
}
.approval-preview .ap-group-body { display: flex; flex-direction: column; gap: 0; }
.approval-preview .ap-platform-section {
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
  border-radius: 8px;
  transition: background var(--t), box-shadow var(--t);
}
.approval-preview .ap-platform-section:first-child { padding-top: 0; }
.approval-preview .ap-platform-section:last-child { border-bottom: none; padding-bottom: 0; }
.approval-preview .ap-platform-section.is-focused {
  background: color-mix(in srgb, var(--status-changes) 6%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--status-changes) 24%, transparent);
  padding: 20px 14px;
  margin: 0 -14px;
}
.approval-preview .ap-section-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 11px; letter-spacing: 0.06em;
  color: var(--text-muted);
}
.approval-preview .ap-section-head .ap-platform {
  color: var(--accent); text-transform: uppercase; letter-spacing: 0.18em;
}
.approval-preview .ap-section-head .ap-status {
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--border-strong);
  text-transform: uppercase; letter-spacing: 0.16em;
}
.approval-preview .ap-section-head .ap-status.is-approved { color: var(--success); border-color: rgba(0,200,83,0.4); }
.approval-preview .ap-section-head .ap-status.is-changes { color: var(--warn); border-color: rgba(255,184,0,0.4); }
.approval-preview .ap-section-head .ap-status.is-posted { color: var(--text-2); }
.approval-preview .ap-section-actions {
  display: flex; gap: 8px; margin-top: 12px;
}

/* Two-column row inside each platform section. Thumb on the left
   (image / carousel only), content on the right. Mirrors the Send
   modal so the two flows feel consistent. */
.approval-preview .ap-section-row {
  display: flex; align-items: flex-start; gap: 14px;
}
.approval-preview .ap-section-content {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
}
.approval-preview .ap-section-content .ap-section-head { margin-bottom: 10px; }
.approval-preview .ap-section-content .ap-body { margin-top: 0; }

/* Thumb — same 88px square pattern as the Send modal. Fixed size so
   varying image aspect ratios still scan as a uniform grid. */
.approval-preview .ap-thumb {
  position: relative;
  width: 180px;
  flex-shrink: 0;
  align-self: flex-start;
  border-radius: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
/* Crop the render to the post's selected aspect frame (set inline per post:
   portrait 4:5 / square 1:1 / horizontal 1.91:1) and honour the Studio
   crop/reposition via object-position (also set inline), so the review thumb
   matches exactly what was composed in Studio. */
.approval-preview .ap-thumb img {
  /* Absolute-fill against the aspect-ratio box (avoids the percentage-height
     collapse when the thumb doesn't stretch). object-position carries crop. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
}
.approval-preview .ap-thumb-badge {
  position: absolute;
  bottom: 5px; right: 5px;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(10,10,12,0.78);
  color: var(--text);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* Empty / not-cached state — amber warning treatment, same as Send.
   Explicit square height since the base .ap-thumb no longer sets one
   (it lets images drive their own aspect). */
.approval-preview .ap-thumb--empty {
  height: 180px;
  border: 1px dashed color-mix(in srgb, var(--status-pending) 36%, var(--border-strong));
  background: color-mix(in srgb, var(--status-pending) 6%, var(--bg));
  color: var(--status-pending);
  display: flex; align-items: center; justify-content: center;
}
.approval-preview .ap-thumb-empty-glyph {
  display: flex; align-items: center; justify-content: center;
}

.btn-sm { padding: 6px 14px; font-size: 13px; }

/* =================================================================
   APPBAR — operator/brand breadcrumb.
   Picker shell uses the operator zone only; workspace shell adds a
   vertical zone-divider and a brand block that contains the brand's
   own logo + name. Brand skinning still drives --bg/--accent through
   applyBrandSkinning() — the layout here is what changed.
   ================================================================= */
.appbar .crumb {
  display: flex; align-items: center;
  min-width: 0;
}
.appbar .crumb .nueform-mark {
  display: flex; align-items: center;
  color: var(--text);
  padding: 4px;
  margin-right: 14px;
  transition: color var(--t), opacity var(--t);
}
.appbar .crumb .nueform-mark[id="crumb-home"] { cursor: pointer; }
.appbar .crumb .nueform-mark[id="crumb-home"]:hover { color: var(--text-2); }
/* Brand-pill brandmark: CSS owns the sizing (aspect-preserved) so a square mark
   can't be stretched by the flex layout — flex-shrink:0 keeps the box from being
   compressed by the brand name beside it. */
.brand-pill-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand-pill-logo svg, .brand-pill-logo img { max-height: 20px; max-width: 100%; width: auto; height: auto; display: block; }
/* Achromatic (white/black/grey) raster brandmark, repainted as a theme-coloured
   silhouette so it stays visible in BOTH light and dark — the raster equivalent
   of recolorBrandSvgForTheme's white→currentColor swap. paintBrandMark only
   builds this span when the mark carries no real colour; coloured logos render
   as a plain <img> and are never touched. Height fixed per surface; the inline
   aspect-ratio (set from the source's natural dims) drives the width. */
/* Baked mono mark: ONE <img> whose data-URI src is swapped per theme by
   refreshMonoMarks (dark ink on light, light ink on dark). A plain <img> with a
   data-URI src has no load flash the way a CSS mask does, and a single element
   can't double-render into a ghost the way a CSS-toggled pair did. */
.brand-mark-mono { display: block; width: auto; object-fit: contain; }
.brand-pill-logo .brand-mark-mono { height: 20px; max-width: 100%; }
.appbar .crumb-brand-block .brand-logo .brand-mark-mono { height: 22px; max-width: 120px; }
.brand-tile .tile-logo .brand-mark-mono { height: 28px; max-width: 160px; }
.appbar .crumb-back {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer; transition: color var(--t);
  display: inline-flex; align-items: center; gap: 10px;
  white-space: nowrap;
}
.appbar .crumb-back::before {
  content: "←"; font-size: 13px;
  color: var(--text-dim);
  transition: color var(--t), transform var(--t);
}
.appbar .crumb-back:hover { color: var(--text); }
.appbar .crumb-back:hover::before { color: var(--text); transform: translateX(-2px); }
/* The picker shell uses .crumb-label (no back affordance). */
.appbar .crumb-label {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.appbar .crumb-label .crumb-tag {
  margin-left: 14px; padding: 4px 8px;
  font-size: 9px; letter-spacing: 0.2em;
  color: var(--text-2);
  border: 1px solid var(--border-strong);
  border-radius: 2px;
}
.appbar .crumb-zone-divider {
  width: 1px; height: 24px;
  background: var(--border-strong);
  margin: 0 24px;
  flex-shrink: 0;
}
.appbar .crumb-brand-block {
  display: inline-flex; align-items: center;
  gap: 14px;
  min-width: 0;
}
.appbar .crumb-brand-block .brand-logo {
  display: flex; align-items: center;
  height: 22px;
  flex-shrink: 0;
}
.appbar .crumb-brand-block .brand-logo svg,
.appbar .crumb-brand-block .brand-logo img {
  display: block; height: 22px; width: auto; max-width: 120px;
  /* Flat gray: brightness(0) collapses every filled pixel to black,
     invert(0.62) lifts that to a uniform mid-gray (~#9e9e9e) without
     preserving any of the original light/dark variation. */
  filter: brightness(0) invert(0.42);
}
.appbar .crumb-brand {
  font-family: 'Inter Tight', sans-serif;
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.04em; color: var(--text);
  text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
/* Legacy hooks — superseded but kept inert in case external CSS leans on them. */
.appbar .crumb-sep { display: none; }

/* =================================================================
   CAROUSEL RENDER LAYER
   Off-screen 1080x1080 host that html-to-image captures as PNGs.
   The slide visuals themselves come from the active brand's template
   pack (template-packs/<slug>/style-tokens.css), scoped under .tp-<slug>.
   ================================================================= */
#cx-render-area {
  position: fixed;
  left: -10000px;
  top: 0;
  pointer-events: none;
  opacity: 1;
}

/* ── Shared form primitives ────────────────────────────────────────
   These started life inside the (now-removed) Quick Render tab but are
   reused by the Add Idea modal and the Studio prompt-preview modal, so
   they stay. The Quick-Render-exclusive rules (drop zone, prompt-empty
   placeholder, chip-tag, chip-help, action/status/result/history, IDs)
   were deleted alongside the Generate tab. */
.gen-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted);
}
.gen-help { font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.gen-label-optional {
  font-size: 10px; font-weight: 500; letter-spacing: 0.04em;
  color: var(--text-muted); text-transform: none; margin-left: 4px;
}
.gen-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gen-chip {
  background: transparent; border: 1px solid var(--border-strong);
  color: var(--text); padding: 6px 12px; border-radius: 999px;
  font-size: 13px; cursor: pointer; font: inherit;
  transition: background 0.18s var(--aur-ease),
              border-color 0.18s var(--aur-ease),
              color 0.18s var(--aur-ease),
              box-shadow 0.18s var(--aur-ease);
}
.gen-chip:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}
.gen-chip.is-selected {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 32%, transparent);
}
.gen-preview-prompt-btn,
.pv-ai-preview-prompt-btn {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: 'Inter Tight', sans-serif;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.gen-preview-prompt-btn:hover,
.pv-ai-preview-prompt-btn:hover { color: var(--text); border-color: var(--accent); background: rgba(255,255,255,0.02); }
.gen-preview-prompt-btn:disabled,
.pv-ai-preview-prompt-btn:disabled { opacity: 0.5; cursor: wait; }
.pv-ai-editor-preview-row { margin-top: 8px; display: flex; justify-content: flex-end; }

/* ── AI editor: medium pills, style cards, locked banner ─────────────
   Replaces the legacy <select> for medium with a 3-pill row, and adds
   a horizontal card row showing named Brand Style presets for the
   active medium. Picking a style locks the prompt server-side; the
   textarea below collapses into a small banner unless the operator
   opens the "Add context" override. ─────────────────────────────── */
/* Pills — each option is its own self-contained pill (background + border).
   Track wrapper is invisible (no shared background); pills sit side-by-side
   with a small gap. Active pill flips to solid black + white text. */
.pv-ai-medium-pills {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}
.pv-ai-medium-pill {
  appearance: none;
  background: var(--bg-elev-2, #f7f7f8);
  border: 1px solid var(--border, #eeeef0);
  color: var(--text-muted, #9394a1);
  font: 500 12px/1 'Manrope', system-ui, sans-serif;
  padding: 4px 11px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.pv-ai-medium-pill:hover {
  color: var(--text, #131316);
  border-color: var(--text-muted, #9394a1);
}
.pv-ai-medium-pill.is-active {
  background: var(--text, #131316);
  color: var(--bg, #ffffff);
  border-color: var(--text, #131316);
}

/* Config row — render style + design layout in one compact horizontal
   strip. Each group has an inline label above the pills, so the operator
   can scan the two top-level decisions in a single glance. */
.pv-ai-editor-row {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

/* Hairline section dividers — visually separate the editor's stacked
   sections (config row → subject → design style → prompt) so each reads as
   its own group. Hairline weight keeps it subtle; doesn't compete with the
   pills/cards inside each section. */
.pv-ai-editor > .pv-ai-editor-row,
.pv-ai-editor > .pv-ai-subject-wrap,
.pv-ai-editor > .pv-ai-styles-wrap,
.pv-ai-editor > .pv-ai-locked-banner,
.pv-ai-editor > .pv-ai-infographic-form,
.pv-ai-editor > .pv-ai-prompt {
  border-top: 1px solid var(--border, #eeeef0);
  padding-top: 14px;
  margin-top: 14px;
}
/* First section (config row) — no top divider, it's the visual top. */
.pv-ai-editor > .pv-ai-editor-row:first-child {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}
/* Hidden infographic form / category row shouldn't claim divider space. */
.pv-ai-editor > .pv-ai-infographic-form[hidden],
.pv-ai-editor > .pv-ai-category-row[style*="display: none"] {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}
[data-skin="clerk"][data-theme="dark"] .pv-ai-editor > .pv-ai-editor-row,
[data-skin="clerk"][data-theme="dark"] .pv-ai-editor > .pv-ai-subject-wrap,
[data-skin="clerk"][data-theme="dark"] .pv-ai-editor > .pv-ai-styles-wrap,
[data-skin="clerk"][data-theme="dark"] .pv-ai-editor > .pv-ai-locked-banner,
[data-skin="clerk"][data-theme="dark"] .pv-ai-editor > .pv-ai-infographic-form,
[data-skin="clerk"][data-theme="dark"] .pv-ai-editor > .pv-ai-prompt {
  border-top-color: rgba(255,255,255,0.08) !important;
}

/* ── Infographic structured-data form ────────────────────────────────────
   Sits between the style cards and the prompt textarea. Each category
   renders a different combination of these primitives (igInput, igTextarea,
   igCard, etc.). Visual language matches the rest of the editor: muted
   labels, hairline borders, no shadow.
   To revert: delete this block + the .pv-ai-infographic-form sites in the
   stacked-section dividers above. */
.pv-ai-infographic-form { display: flex; flex-direction: column; gap: 10px; }
.pv-ai-ig-label {
  font: 500 10px/1 'Manrope', system-ui, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted, #9394a1);
  margin-top: 4px;
}
.pv-ai-ig-list { display: flex; flex-direction: column; gap: 8px; }
.pv-ai-ig-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--border, #eeeef0);
  border-radius: 8px;
  background: var(--bg, #ffffff);
  position: relative;
}
.pv-ai-ig-row { display: flex; gap: 6px; }
.pv-ai-ig-row > * { flex: 1; }
.pv-ai-ig-input,
.pv-ai-ig-textarea,
.pv-ai-ig-select {
  width: 100%;
  font: 400 13px/1.4 'Manrope', system-ui, sans-serif;
  color: var(--text, #131316);
  background: var(--bg-elev, #ffffff);
  border: 1px solid var(--border, #eeeef0);
  border-radius: 6px;
  padding: 7px 10px;
  box-sizing: border-box;
}
.pv-ai-ig-textarea { resize: vertical; min-height: 44px; font-family: inherit; }
.pv-ai-ig-input:focus,
.pv-ai-ig-textarea:focus,
.pv-ai-ig-select:focus {
  outline: none;
  border-color: var(--text, #131316);
}
.pv-ai-ig-btn {
  appearance: none;
  font: 600 11px/1 'Manrope', system-ui, sans-serif;
  background: #f7f7f8;
  border: 1px solid var(--border, #eeeef0);
  color: var(--text, #131316);
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
}
.pv-ai-ig-btn:hover { border-color: var(--text-muted, #9394a1); }
.pv-ai-ig-add-btn {
  align-self: flex-start;
  background: transparent;
  border-style: dashed;
}
.pv-ai-ig-row-actions {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  gap: 4px;
}
.pv-ai-ig-icon-btn {
  width: 22px;
  height: 22px;
  padding: 0;
  font-size: 12px;
  line-height: 1;
  border-radius: 4px;
}
.pv-ai-ig-icon-btn.is-disabled {
  opacity: 0.3;
  pointer-events: none;
}
.pv-ai-ig-icon-btn--danger:hover {
  background: #fef1ef;
  border-color: #ff3d00;
  color: #ff3d00;
}
/* Process step number badge */
.pv-ai-ig-card-fields { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.pv-ai-ig-num-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--text, #131316);
  color: #ffffff;
  font: 700 11px/22px 'Manrope', system-ui, sans-serif;
  text-align: center;
}
.pv-ai-ig-card:has(.pv-ai-ig-num-badge) { padding-left: 42px; }
[data-skin="clerk"][data-theme="dark"] .pv-ai-ig-card {
  background: rgba(255,255,255,0.02) !important;
  border-color: rgba(255,255,255,0.08) !important;
}
[data-skin="clerk"][data-theme="dark"] .pv-ai-ig-input,
[data-skin="clerk"][data-theme="dark"] .pv-ai-ig-textarea,
[data-skin="clerk"][data-theme="dark"] .pv-ai-ig-select {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.10) !important;
  color: #f7f7f8 !important;
}
[data-skin="clerk"][data-theme="dark"] .pv-ai-ig-btn {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.10) !important;
  color: #f7f7f8 !important;
}
[data-skin="clerk"][data-theme="dark"] .pv-ai-ig-num-badge { background: #ffffff !important; color: #202020 !important; }
.pv-ai-config-group { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pv-ai-config-group-label {
  font: 500 10px/1 'Manrope', system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted, #9394a1);
}
/* Hairline divider between config groups (Render style / Design layout).
   When the row is wide enough for both groups to sit side-by-side →
   vertical divider on the left of Design layout. When the row wraps and
   groups stack → horizontal divider above Design layout. Either way
   there's always a separator. */
.pv-ai-editor-row { container-type: inline-size; }
/* Both groups always claim the full row width — needed so the tile
   rows inside each (Render style: 3 tiles, Design layout: 2 tiles)
   have enough horizontal space to render in a single line instead of
   wrapping. */
.pv-ai-editor-row > .pv-ai-config-group {
  width: 100%;
}
/* Horizontal divider above the second group only. */
.pv-ai-editor-row > .pv-ai-config-group + .pv-ai-config-group {
  border-top: 1px solid var(--border, #eeeef0);
  padding-top: 14px;
  margin-top: 4px;
}
[data-skin="clerk"][data-theme="dark"] .pv-ai-editor-row > .pv-ai-config-group + .pv-ai-config-group {
  border-top-color: rgba(255,255,255,0.08) !important;
}
/* Render style + Design layout always stack vertically now that they're
   tile pickers rather than text pills. The mockup tiles need real width
   per row (3-wide for Render style, 2-wide for Design layout) to render
   at their proper size; the side-by-side rule used to shrink each
   group's available row width to the point where tiles wrapped 2+1.
   Stacked vertically, each group claims the full column width and the
   tile row fits in one line. The default horizontal divider above the
   second group (rule above) provides the section break. */

/* Subject photo (optional) — collapsed empty state shows a single inline
   link; filled state shows the label + thumb + mode pills + × clear. */
.pv-ai-subject-wrap { margin-top: 10px; }
/* Loud "subject photo was cleared on reload" warning (replaces the quiet empty
   state when a subject was attached but its session-only file is gone). */
.pv-ai-subject-lost { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 10px; background: color-mix(in srgb, #d98a00 12%, transparent); border: 1px solid color-mix(in srgb, #d98a00 32%, transparent); }
.pv-ai-subject-lost-txt { flex: 1; min-width: 150px; font-size: 12px; line-height: 1.4; color: #8a5a00; }
[data-theme="dark"] .pv-ai-subject-lost-txt { color: #e2a950; }
.pv-ai-subject-reattach { font-size: 11.5px; font-weight: 600; padding: 5px 12px; border-radius: 8px; background: #d98a00; color: #fff; border: 0; cursor: pointer; }
.pv-ai-subject-dismiss { font-size: 11.5px; padding: 5px 10px; border-radius: 8px; background: transparent; border: 1px solid var(--border); color: var(--text-muted); cursor: pointer; }
/* "experimental" tag on the Reinterpret subject-mode pill. */
.pv-ai-exp-tag { display: inline-block; margin-left: 5px; font-size: 9px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; line-height: 1.4; padding: 1px 5px; border-radius: 5px; vertical-align: middle; background: color-mix(in srgb, #d98a00 20%, transparent); color: #8a5a00; }
[data-theme="dark"] .pv-ai-exp-tag { color: #e2a950; }
.pv-ai-subject-wrap.is-collapsed .pv-ai-subject-label { display: none; }
.pv-ai-subject-body { display: flex; align-items: center; gap: 10px; }
/* Collapsed empty state — minimal text link with a dashed plus icon. */
.pv-ai-subject-wrap.is-collapsed .pv-ai-subject-attach-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-muted, #9394a1);
  font: 500 12px/1 'Manrope', system-ui, sans-serif;
  padding: 4px 0;
  cursor: pointer;
  transition: color 0.14s ease;
}
.pv-ai-subject-wrap.is-collapsed .pv-ai-subject-attach-btn:hover {
  color: var(--text, #131316);
}
.pv-ai-subject-filled {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 10px;
  background: var(--bg-elev-2, rgba(255,255,255,0.04));
}
.pv-ai-subject-thumb {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
.pv-ai-subject-clear {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-muted, #9394a1);
  font-size: 18px;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
  border-radius: 4px;
}
.pv-ai-subject-clear:hover { color: var(--text, #131316); background: rgba(0,0,0,0.04); }
/* Clerk skin — each pill is its own self-contained capsule. Wrapper stays
   transparent. */
[data-skin="clerk"] .pv-ai-medium-pills {
  background: transparent !important;
  border: none !important;
}
[data-skin="clerk"] .pv-ai-medium-pill {
  background: #f7f7f8 !important;
  border: 1px solid #eeeef0 !important;
  color: #5e5f6e !important;
}
[data-skin="clerk"] .pv-ai-medium-pill:hover {
  color: #131316 !important;
  border-color: #d9d9de !important;
}
[data-skin="clerk"] .pv-ai-medium-pill.is-active {
  background: #131316 !important;
  border-color: #131316 !important;
  color: #ffffff !important;
}
[data-skin="clerk"][data-theme="dark"] .pv-ai-medium-pills {
  background: transparent !important;
  border: none !important;
}
[data-skin="clerk"][data-theme="dark"] .pv-ai-medium-pill {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: #9394a1 !important;
}
[data-skin="clerk"][data-theme="dark"] .pv-ai-medium-pill:hover {
  color: #f7f7f8 !important;
  border-color: rgba(255,255,255,0.20) !important;
}
[data-skin="clerk"][data-theme="dark"] .pv-ai-medium-pill.is-active {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #131316 !important;
}

.pv-ai-styles-wrap { margin-top: 12px; }
.pv-ai-styles-label {
  font: 500 11px/1 'Manrope', system-ui, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted, #9394a1);
  margin-bottom: 8px;
}
.pv-ai-style-cards {
  /* Horizontal scroll — operator prefers ~2 cards visible at a time with a
     side-swipe to browse the rest, vs a vertical wrap-grid. Cards stay at a
     fixed width so the visible-count is predictable per viewport.
     `overflow-x: auto` also clips the y-axis at the padding edge, so the
     padding on every side has to be ≥ the selected card's 2px outline width
     for the outline to render fully without being cut. */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 130px;
  gap: 8px;
  overflow-x: auto;
  padding: 3px 3px 6px;
  scrollbar-width: thin;
}
.pv-ai-style-card {
  appearance: none;
  border: 1px solid var(--border, #eeeef0);
  background: var(--bg-elev, #ffffff);
  border-radius: 8px;
  padding: 0;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  transition: border-color 0.14s ease, transform 0.14s ease, box-shadow 0.14s ease, outline-color 0.14s ease;
}
.pv-ai-style-card:hover {
  border-color: var(--text-muted, #9394a1);
  transform: translateY(-1px);
}
/* Selected state — accent outline sits flush against the card edge. The
   corner check badge in the top-left is the always-visible guarantee that
   survives even when the outline blends with a saturated thumbnail. */
.pv-ai-style-card.is-selected {
  border-color: var(--brand-accent, #ff3d00);
  outline: 1.5px solid var(--brand-accent, #ff3d00);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--brand-accent, #ff3d00) 18%, transparent);
}
.pv-ai-style-card-check {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ff3d00;
  color: #ffffff;
  font: 700 11px/1 'Manrope', system-ui, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  z-index: 2;
}
.pv-ai-style-card-thumb {
  aspect-ratio: 4 / 5;
  background: #f0f0f2 center / cover no-repeat;
}
.pv-ai-style-card-thumb.is-empty {
  background: linear-gradient(135deg, #f7f7f8 0%, #eeeef0 100%);
}
/* Style name overlays the bottom of the thumb with a gradient scrim so it
   stays legible on any background image. Much denser than a label row below. */
.pv-ai-style-card-name {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  font: 600 10px/1.2 'Manrope', system-ui, sans-serif;
  color: #ffffff;
  padding: 14px 6px 6px;
  background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0) 100%);
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  pointer-events: none;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

[data-skin="clerk"][data-theme="dark"] .pv-ai-style-card {
  background: #202020 !important;
  border-color: rgba(255,255,255,0.08) !important;
}
[data-skin="clerk"][data-theme="dark"] .pv-ai-style-card:hover {
  border-color: rgba(255,255,255,0.2) !important;
}
[data-skin="clerk"][data-theme="dark"] .pv-ai-style-card.is-selected {
  border-color: var(--brand-accent, #ff3d00) !important;
  outline-color: var(--brand-accent, #ff3d00) !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--brand-accent, #ff3d00) 28%, transparent) !important;
}
[data-skin="clerk"][data-theme="dark"] .pv-ai-style-card-thumb {
  background-color: rgba(255,255,255,0.04) !important;
  border-bottom-color: rgba(255,255,255,0.08) !important;
}
[data-skin="clerk"][data-theme="dark"] .pv-ai-style-card-name {
  color: #f7f7f8 !important;
}

.pv-ai-locked-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--bg-elev-2, rgba(255,255,255,0.04));
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 8px;
}
.pv-ai-locked-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 12px/1 'Manrope', system-ui, sans-serif;
  color: var(--text, #131316);
}
.pv-ai-locked-chip-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #15803d;
}

/* Actions bar (slim) — sits BELOW the design style cards. Only visible when
   a style is picked. Holds the "+ Add context" toggle (Pin as sample lives
   in each card's ⋯ menu). Transparent and right-aligned; section-divider
   rule provides the hairline above. */
.pv-ai-actions-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
}
.pv-ai-locked-clear {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-muted, #9394a1);
  font-size: 16px;
  line-height: 1;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pv-ai-locked-clear:hover {
  background: rgba(0,0,0,0.06);
  color: var(--text, #131316);
}
[data-skin="clerk"][data-theme="dark"] .pv-ai-locked-clear:hover {
  background: rgba(255,255,255,0.06);
  color: #f7f7f8;
}
.pv-ai-add-context-toggle {
  appearance: none;
  border: none;
  background: transparent;
  margin-left: auto;
  color: var(--text-muted, #5e5f6e);
  font: 500 11px/1 'Manrope', system-ui, sans-serif;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 999px;
  transition: background 0.14s ease, color 0.14s ease;
}
.pv-ai-add-context-toggle:hover {
  background: rgba(0,0,0,0.04);
  color: var(--text, #131316);
}
[data-skin="clerk"] .pv-ai-locked-banner {
  background: #fafafb !important;
  border-color: #eeeef0 !important;
}
[data-skin="clerk"][data-theme="dark"] .pv-ai-locked-banner {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.08) !important;
}
[data-skin="clerk"][data-theme="dark"] .pv-ai-locked-chip { color: #f7f7f8 !important; }
[data-skin="clerk"][data-theme="dark"] .pv-ai-add-context-toggle { color: #9394a1 !important; }
[data-skin="clerk"][data-theme="dark"] .pv-ai-add-context-toggle:hover {
  background: rgba(255,255,255,0.06) !important;
  color: #f7f7f8 !important;
}

/* ── Style card overflow + "+ New" affordance ─────────────────────── */
.pv-ai-style-card { position: relative; }
.pv-ai-style-card-menu {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border: none;
  background: rgba(0,0,0,0.55);
  color: #ffffff;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.14s ease, transform 0.14s ease;
}
.pv-ai-style-card:hover .pv-ai-style-card-menu { opacity: 1; }
.pv-ai-style-card-menu:hover { transform: scale(1.05); }

.pv-ai-style-card-menu-popover {
  position: fixed;
  z-index: 2000;
  min-width: 140px;
  background: var(--bg-elev, #ffffff);
  border: 1px solid var(--border, #eeeef0);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(19,19,22,0.10);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pv-ai-style-menu-item {
  appearance: none;
  border: none;
  background: transparent;
  text-align: left;
  font: 500 12px/1 'Manrope', system-ui, sans-serif;
  color: var(--text, #131316);
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.pv-ai-style-menu-item:hover { background: var(--bg-elev-2, #f7f7f8); }
.pv-ai-style-menu-item--danger { color: #c0392b; }
.pv-ai-style-menu-item--danger:hover { background: rgba(192, 57, 43, 0.08); }
.pv-ai-style-menu-divider {
  height: 1px;
  margin: 2px 6px;
  background: var(--border, #eeeef0);
}
[data-skin="clerk"][data-theme="dark"] .pv-ai-style-menu-item--danger { color: #ff6b5e !important; }
[data-skin="clerk"][data-theme="dark"] .pv-ai-style-menu-item--danger:hover { background: rgba(255, 107, 94, 0.10) !important; }
[data-skin="clerk"][data-theme="dark"] .pv-ai-style-menu-divider { background: rgba(255,255,255,0.08) !important; }
[data-skin="clerk"][data-theme="dark"] .pv-ai-style-card-menu-popover {
  background: #1c1c1f !important;
  border-color: rgba(255,255,255,0.10) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.45) !important;
}
[data-skin="clerk"][data-theme="dark"] .pv-ai-style-menu-item {
  color: #f7f7f8 !important;
}
[data-skin="clerk"][data-theme="dark"] .pv-ai-style-menu-item:hover {
  background: rgba(255,255,255,0.06) !important;
}

/* "+ New style" card sits at the end of the row; dashed border + plus
   sign to differentiate from real styles. */
.pv-ai-style-card.pv-ai-style-card--add {
  border-style: dashed;
  background: transparent;
}
.pv-ai-style-card-thumb--add {
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 28px/1 'Manrope', system-ui, sans-serif;
  color: var(--text-muted, #9394a1);
  background: transparent !important;
}

/* Empty-state hint card — surfaced when an infographic category has no
   styles seeded yet. Sits in the horizontal scroll strip alongside the
   "+ New style" affordance so the operator can either pick a different
   category or create one in two clicks. */
.pv-ai-style-card.pv-ai-style-card--hint {
  cursor: default;
  border-style: dashed;
  background: #f7f7f8;
}
.pv-ai-style-card-thumb--hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px;
  gap: 4px;
  background: transparent !important;
}
.pv-ai-style-hint-title {
  font: 600 11px/1.3 'Manrope', system-ui, sans-serif;
  color: var(--text, #131316);
}
.pv-ai-style-hint-sub {
  font: 500 10px/1.3 'Manrope', system-ui, sans-serif;
  color: var(--text-muted, #9394a1);
}
[data-skin="clerk"][data-theme="dark"] .pv-ai-style-card.pv-ai-style-card--hint {
  background: rgba(255,255,255,0.03) !important;
  border-color: rgba(255,255,255,0.10) !important;
}
[data-skin="clerk"][data-theme="dark"] .pv-ai-style-hint-title { color: #f7f7f8 !important; }

/* ── Style editor modal ──────────────────────────────────────────── */
.pv-style-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(19,19,22,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.pv-style-modal {
  width: min(600px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--bg-elev, #ffffff);
  border: 1px solid var(--border, #eeeef0);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  font-family: 'Manrope', system-ui, sans-serif;
}
.pv-style-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 12px;
  border-bottom: 1px solid var(--border, #eeeef0);
}
.pv-style-modal-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text, #131316);
}
.pv-style-modal-close {
  appearance: none;
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  color: var(--text-muted, #5e5f6e);
}
.pv-style-modal-close:hover { background: var(--bg-elev-2, #f7f7f8); color: var(--text, #131316); }
.pv-style-modal-body {
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.pv-style-modal-field { display: flex; flex-direction: column; gap: 6px; }
.pv-style-modal-label {
  font: 600 11px/1 'Manrope', system-ui, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted, #5e5f6e);
}
.pv-style-modal-hint {
  font: 400 12px/1.4 'Manrope', system-ui, sans-serif;
  color: var(--text-muted, #9394a1);
  margin-top: -2px;
  margin-bottom: 4px;
}
.pv-style-modal-input,
.pv-style-modal-textarea {
  width: 100%;
  border: 1px solid var(--border, #eeeef0);
  background: var(--bg-elev, #ffffff);
  border-radius: 8px;
  padding: 10px 12px;
  font: 400 13px/1.4 'Manrope', system-ui, sans-serif;
  color: var(--text, #131316);
  outline: none;
  transition: border-color 0.14s ease;
}
.pv-style-modal-input:focus,
.pv-style-modal-textarea:focus { border-color: var(--text, #131316); }
.pv-style-modal-textarea { resize: vertical; min-height: 100px; font-family: 'Manrope', system-ui, sans-serif; }
.pv-style-modal-pills {
  display: inline-flex;
  gap: 6px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  width: fit-content;
}
.pv-style-modal-pill {
  appearance: none;
  background: #f7f7f8;
  border: 1px solid var(--border, #eeeef0);
  color: var(--text-muted, #5e5f6e);
  font: 500 12px/1 'Manrope', system-ui, sans-serif;
  padding: 4px 11px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.pv-style-modal-pill:hover {
  color: var(--text, #131316);
  border-color: var(--text-muted, #9394a1);
}
.pv-style-modal-pill.is-active {
  background: var(--text, #131316);
  border-color: var(--text, #131316);
  color: var(--bg, #ffffff);
}

.pv-style-modal-polish-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.pv-style-modal-polish-btn {
  appearance: none;
  border: 1px solid var(--border, #eeeef0);
  background: var(--bg-elev, #ffffff);
  color: var(--text, #131316);
  font: 500 12px/1 'Manrope', system-ui, sans-serif;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.pv-style-modal-polish-btn:hover:not(:disabled) {
  background: var(--text, #131316);
  color: var(--bg, #ffffff);
  border-color: var(--text, #131316);
}
.pv-style-modal-polish-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.pv-style-modal-polish-undo {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--text-muted, #5e5f6e);
  font: 400 12px/1 'Manrope', system-ui, sans-serif;
  padding: 4px 6px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pv-style-modal-polish-undo:hover { color: var(--text, #131316); }
.pv-style-modal-polish-status {
  font: 400 11px/1.4 'Manrope', system-ui, sans-serif;
  color: var(--text-muted, #5e5f6e);
  margin-left: auto;
}

[data-skin="clerk"][data-theme="dark"] .pv-style-modal-polish-btn {
  background: #202020 !important;
  border-color: rgba(255,255,255,0.10) !important;
  color: #f7f7f8 !important;
}
[data-skin="clerk"][data-theme="dark"] .pv-style-modal-polish-btn:hover:not(:disabled) {
  background: #f7f7f8 !important;
  color: #131316 !important;
  border-color: #f7f7f8 !important;
}
[data-skin="clerk"][data-theme="dark"] .pv-style-modal-polish-undo { color: #9394a1 !important; }
[data-skin="clerk"][data-theme="dark"] .pv-style-modal-polish-undo:hover { color: #f7f7f8 !important; }
[data-skin="clerk"][data-theme="dark"] .pv-style-modal-polish-status { color: #9394a1 !important; }

.pv-style-modal-footer {
  padding: 16px 24px 20px;
  border-top: 1px solid var(--border, #eeeef0);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}
.pv-style-modal-error {
  margin-right: auto;
  font-size: 12px;
  color: #c0392b;
}

[data-skin="clerk"][data-theme="dark"] .pv-style-modal {
  background: #1c1c1f !important;
  border-color: rgba(255,255,255,0.10) !important;
}
[data-skin="clerk"][data-theme="dark"] .pv-style-modal-header,
[data-skin="clerk"][data-theme="dark"] .pv-style-modal-footer {
  border-color: rgba(255,255,255,0.08) !important;
}
[data-skin="clerk"][data-theme="dark"] .pv-style-modal-title { color: #f7f7f8 !important; }
[data-skin="clerk"][data-theme="dark"] .pv-style-modal-close {
  color: #9394a1 !important;
}
[data-skin="clerk"][data-theme="dark"] .pv-style-modal-close:hover {
  background: rgba(255,255,255,0.06) !important;
  color: #f7f7f8 !important;
}
[data-skin="clerk"][data-theme="dark"] .pv-style-modal-label,
[data-skin="clerk"][data-theme="dark"] .pv-style-modal-hint { color: #9394a1 !important; }
[data-skin="clerk"][data-theme="dark"] .pv-style-modal-input,
[data-skin="clerk"][data-theme="dark"] .pv-style-modal-textarea {
  background: #202020 !important;
  border-color: rgba(255,255,255,0.10) !important;
  color: #f7f7f8 !important;
}
[data-skin="clerk"][data-theme="dark"] .pv-style-modal-input:focus,
[data-skin="clerk"][data-theme="dark"] .pv-style-modal-textarea:focus {
  border-color: #ffffff !important;
}
[data-skin="clerk"][data-theme="dark"] .pv-style-modal-pills {
  background: transparent !important;
  border: none !important;
}
[data-skin="clerk"][data-theme="dark"] .pv-style-modal-pill {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: #9394a1 !important;
}
[data-skin="clerk"][data-theme="dark"] .pv-style-modal-pill:hover {
  color: #f7f7f8 !important;
  border-color: rgba(255,255,255,0.20) !important;
}
[data-skin="clerk"][data-theme="dark"] .pv-style-modal-pill.is-active {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #131316 !important;
}
/* ── Prompt preview modal ─────────────────────────────────────── */
.gen-prompt-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.gen-prompt-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
}
.gen-prompt-modal-panel {
  position: relative;
  width: min(800px, 100%);
  max-height: 85vh;
  display: flex; flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
  overflow: hidden;
}
.gen-prompt-modal-head {
  position: relative;
  padding: 18px 56px 16px 22px;
  border-bottom: 1px solid var(--border);
}
.gen-prompt-modal-title {
  font-family: 'Inter Tight', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.gen-prompt-modal-sub {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}
.gen-prompt-modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 30px; height: 30px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 6px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.gen-prompt-modal-close:hover { color: var(--text); border-color: var(--accent); }
.gen-prompt-modal-body {
  padding: 16px 22px 22px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
}
.gen-prompt-modal-meta {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  line-height: 1.6;
}
.gen-prompt-modal-text {
  margin: 0;
  padding: 18px 20px;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  word-break: break-word;
}
/* Structured prompt-preview rendering — purely a display layer over the
   raw prompt string. The string itself (data.prompt from the worker)
   is unchanged; we parse it client-side into sections + bullets + paras
   so the modal scans like a structured brief instead of a wall of text.
   Reverting just means setting textEl.textContent = data.prompt again. */
.gpm-doc { display: flex; flex-direction: column; gap: 16px; }
.gpm-section { display: flex; flex-direction: column; gap: 6px; }
.gpm-header {
  margin: 0;
  font: 700 10.5px/1.2 'Manrope', system-ui, sans-serif;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.gpm-label {
  margin: 0;
  font: 600 11.5px/1.2 'Manrope', system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* Render-style-scope chip — "Shared" / "Infographic only" / "Photo + Conceptual".
   Sits next to each section header in the prompt preview so the operator can
   tell at a glance which sections are universal vs unique to one medium. */
.gpm-medium-chip {
  display: inline-block;
  font: 600 9.5px/1 'Manrope', system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 4px;
  white-space: nowrap;
}
.gpm-medium-chip--shared   { background: #3a3a3a; color: #e0e0e0; }
.gpm-medium-chip--specific { background: #ffb84a; color: #1a1a1a; }
.gpm-para {
  margin: 0;
  font: 400 13px/1.55 'Manrope', system-ui, sans-serif;
  color: var(--text);
  white-space: pre-wrap;
}
.gpm-bullets {
  margin: 2px 0 0;
  padding-left: 18px;
  font: 400 13px/1.55 'Manrope', system-ui, sans-serif;
  color: var(--text);
}
.gpm-bullets li { margin: 2px 0; }
.gpm-empty {
  margin: 0;
  font-style: italic;
  color: var(--text-muted);
}

/* ============================================================================
   CLERK SKIN — minimal, monochrome, editorial.
   Loaded only by index-clerk.html. Cascades over every rule above by
   sitting at the bottom of the same <style> block. Original index.html
   is untouched.

   Design language pulled from live clerk.com (May 2026):
   - Off-white surface, near-black ink, no pure black/white
   - Single accent (we run pure mono — accent IS the ink)
   - Manrope across the board (per request, not Suisse)
   - Tight tracking on display sizes; generous line-height on body
   - Microscopic borders, near-zero shadows, 8/12/16 radius scale
   - 150ms cubic-bezier(.4, 0, .2, 1) on everything
   - Whitespace is doing the work, not decoration
   ============================================================================ */

:root[data-skin="clerk"],
:root[data-skin="clerk"][data-theme="light"],
:root[data-skin="clerk"][data-theme="dark"] {
  --bg:             #f7f7f8;
  --bg-elev:        #ffffff;
  --bg-elev-2:      #ffffff;
  --bg-overlay:     #ffffff;
  --bg-subtle:      #fafafb;
  --border:         #eeeef0;
  --border-strong:  #d9d9de;
  --border-hover:   #b7b8c2;
  --text:           #131316;
  --text-2:         #42434d;
  /* Shared tone for both navigation columns (section rail + section list) so
     they read as one nav system, not two typefaces. Sits darker than --text-2
     but lighter than pure --text; subtitles stay on --text-dim below it. */
  --nav-label:      #2b2d34;
  --text-muted:     #5e5f6e;
  --text-dim:       #6e7080;
  --accent:         #131316;
  --accent-hover:   #000000;
  --accent-2:       #131316;
  --accent-soft:    #f0f0f2;
  --success:        #15802a;
  --success-soft:   #f0fdf2;
  --warning:        #a16207;
  --warning-soft:   #fefce8;
  --danger:         #b91c1c;
  --danger-soft:    #fef2f2;
  --status-approved:#15802a;
  --radius:         8px;
  --radius-2:       12px;
  --radius-lg:      16px;
  --radius-pill:    999px;
  --t:              150ms cubic-bezier(.4, 0, .2, 1);
  --shadow-xs:      0 1px 2px rgba(19, 19, 22, 0.04);
  --shadow-sm:      0 1px 3px rgba(19, 19, 22, 0.06), 0 1px 2px rgba(19, 19, 22, 0.04);
  --shadow-md:      0 4px 12px -2px rgba(19, 19, 22, 0.08), 0 2px 4px rgba(19, 19, 22, 0.04);
  --shadow-lg:      0 12px 32px -8px rgba(19, 19, 22, 0.10), 0 4px 8px rgba(19, 19, 22, 0.04);
}

[data-skin="clerk"] html,
[data-skin="clerk"] body,
html[data-skin="clerk"], body { background: #f7f7f8 !important; }

[data-skin="clerk"] body {
  color: #131316;
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: -0.005em;
}

/* Kill all the aurora / orb / grid background effects from the dark
   shell — they don't belong in a minimal Clerk-style canvas. */
[data-skin="clerk"] body::before,
[data-skin="clerk"] body::after,
[data-skin="clerk"] #picker-shell::before,[data-skin="clerk"] #cc-shell::before,
[data-skin="clerk"] #picker-shell::after,[data-skin="clerk"] #cc-shell::after,
[data-skin="clerk"] #picker::before,
[data-skin="clerk"] #picker::after,
[data-skin="clerk"] #app::before,
[data-skin="clerk"] #app::after,
[data-skin="clerk"] .login-shell::before,
[data-skin="clerk"] .login-shell::after { display: none !important; content: none !important; background: none !important; }

[data-skin="clerk"] ::selection { background: #131316; color: #ffffff; }

/* Display sizes: Clerk-style tight tracking on big text */
[data-skin="clerk"] h1,
[data-skin="clerk"] h2,
[data-skin="clerk"] h3,
[data-skin="clerk"] h4 {
  font-family: 'Manrope', system-ui, sans-serif;
  color: #131316;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
}
[data-skin="clerk"] h1 { font-size: 36px; font-weight: 700; letter-spacing: -0.035em; }
[data-skin="clerk"] h2 { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
[data-skin="clerk"] h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
[data-skin="clerk"] h4 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }

[data-skin="clerk"] p { color: #42434d; line-height: 1.6; }

/* ── Links ───────────────────────────────────────────────────────── */
[data-skin="clerk"] a { color: #131316; text-decoration: none; border-bottom: 1px solid #d9d9de; transition: border-color var(--t); }
[data-skin="clerk"] a:hover { color: #131316; border-bottom-color: #131316; }
[data-skin="clerk"] .tab a, [data-skin="clerk"] button a, [data-skin="clerk"] .btn a { border-bottom: none; }
[data-skin="clerk"] a.no-underline, [data-skin="clerk"] .appbar a, [data-skin="clerk"] .tab, [data-skin="clerk"] .picker-tile a { border-bottom: none !important; }

/* ── Boot splash + login ────────────────────────────────────────── */
[data-skin="clerk"] #boot-splash { background: #f7f7f8 !important; }
[data-skin="clerk"] #boot-splash .boot-logo { color: #131316; }
[data-skin="clerk"] #boot-splash .boot-line { background: #d9d9de; }

[data-skin="clerk"] .login-shell { background: #f7f7f8; }
[data-skin="clerk"] .login-card,
[data-skin="clerk"] #login-card,
[data-skin="clerk"] .picker-card {
  background: #ffffff;
  border: 1px solid #eeeef0;
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  padding: 40px;
}

/* ── App shell (top nav) — white, hairline border, no blur trickery ── */
[data-skin="clerk"] header.appbar {
  position: sticky; top: 0;
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid #eeeef0 !important;
  padding: 12px 28px !important;
  z-index: 100;
}
[data-skin="clerk"] .appbar .logo svg { color: #131316; }
[data-skin="clerk"] .appbar .brand {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  color: #5e5f6e !important;
  border-left: 1px solid #d9d9de !important;
  padding-left: 24px !important;
}

[data-skin="clerk"] .appbar .tabs { gap: 2px; }
[data-skin="clerk"] .appbar .tab {
  padding: 7px 12px !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  color: #5e5f6e !important;
  border-radius: 6px !important;
  background: transparent !important;
  transition: color var(--t), background var(--t) !important;
}
[data-skin="clerk"] .appbar .tab:hover { color: #131316 !important; background: #f0f0f2 !important; }
[data-skin="clerk"] .appbar .tab.active {
  color: #131316 !important;
  background: color-mix(in oklab, var(--brand-accent, #ff3d00) 15%, #ffffff) !important;
  box-shadow: none !important;
}
[data-skin="clerk"] .appbar .tab.active .tab-icon { color: var(--brand-accent, #ff3d00) !important; }
[data-skin="clerk"] .appbar .tab .tab-icon { color: currentColor !important; opacity: 0.8; }
[data-skin="clerk"] .appbar .tab .tab-count {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #6e7080 !important;
  letter-spacing: 0 !important;
}
[data-skin="clerk"] .appbar .tab.active .tab-count { color: #5e5f6e !important; }
[data-skin="clerk"] .appbar .tab .tab-dot,
[data-skin="clerk"] .appbar .tab .tab-new { background: #131316 !important; box-shadow: none !important; }

[data-skin="clerk"] .tab-group-title {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  color: #6e7080 !important;
  text-transform: uppercase !important;
}

/* Search trigger — Clerk-style minimal input look */
[data-skin="clerk"] .appbar .search-trigger {
  background: #f7f7f8 !important;
  border: 1px solid #eeeef0 !important;
  border-radius: 8px !important;
  color: #5e5f6e !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 6px 8px 6px 12px !important;
  min-width: 220px !important;
}
[data-skin="clerk"] .appbar .search-trigger:hover {
  border-color: #d9d9de !important;
  background: #ffffff !important;
  color: #131316 !important;
}
[data-skin="clerk"] .appbar .search-trigger kbd {
  background: #ffffff !important;
  border: 1px solid #d9d9de !important;
  border-radius: 4px !important;
  color: #5e5f6e !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  padding: 2px 5px !important;
}

[data-skin="clerk"] .appbar .util .util-divider { background: #d9d9de !important; }

/* Theme toggle visibility is handled later in the workspace-shell block. */

[data-skin="clerk"] main { padding: 40px 28px 96px !important; max-width: 1440px !important; }

/* ── Buttons — solid black primary, white secondary, ghost ──────── */
[data-skin="clerk"] .btn,
[data-skin="clerk"] .btn-primary,
[data-skin="clerk"] .btn-secondary,
[data-skin="clerk"] .btn-ghost,
[data-skin="clerk"] button.primary,
[data-skin="clerk"] button.secondary {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  transition: background var(--t), border-color var(--t), color var(--t), box-shadow var(--t) !important;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  line-height: 1;
}

[data-skin="clerk"] .btn-primary {
  background: #131316 !important;
  color: #ffffff !important;
  border: 1px solid #131316 !important;
  box-shadow: var(--shadow-xs) !important;
}
[data-skin="clerk"] .btn-primary:hover { background: #000000 !important; border-color: #000000 !important; }
[data-skin="clerk"] .btn-primary:disabled { background: #d9d9de !important; border-color: #d9d9de !important; color: #ffffff !important; cursor: not-allowed; box-shadow: none !important; }
/* Orange primary variant (same size/shape, Nueform accent) — e.g. "Email link to client". */
[data-skin="clerk"] .btn-primary.btn-orange { background: #FF3D00 !important; border-color: #FF3D00 !important; }
[data-skin="clerk"] .btn-primary.btn-orange:hover { background: #e63700 !important; border-color: #e63700 !important; }

[data-skin="clerk"] .btn-secondary {
  background: #ffffff !important;
  color: #131316 !important;
  border: 1px solid #d9d9de !important;
  box-shadow: var(--shadow-xs) !important;
}
[data-skin="clerk"] .btn-secondary:hover { background: #f7f7f8 !important; border-color: #b7b8c2 !important; color: #131316 !important; }

[data-skin="clerk"] .btn-ghost {
  background: transparent !important;
  color: #5e5f6e !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
}
[data-skin="clerk"] .btn-ghost:hover { color: #131316 !important; background: #f0f0f2 !important; }

[data-skin="clerk"] .btn-danger { color: #b91c1c !important; }
[data-skin="clerk"] .btn-danger:hover { background: #fef2f2 !important; color: #991b1b !important; }

/* ── Inputs ─────────────────────────────────────────────────────── */
[data-skin="clerk"] .input,
[data-skin="clerk"] input[type="text"],
[data-skin="clerk"] input[type="number"],
[data-skin="clerk"] input[type="email"],
[data-skin="clerk"] input[type="search"],
[data-skin="clerk"] input[type="password"],
[data-skin="clerk"] input[type="url"],
[data-skin="clerk"] input[type="date"],
[data-skin="clerk"] textarea,
[data-skin="clerk"] select {
  background: #ffffff !important;
  border: 1px solid #d9d9de !important;
  border-radius: 8px !important;
  color: #131316 !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 14px !important;
  padding: 8px 12px !important;
  transition: border-color var(--t), box-shadow var(--t) !important;
  box-shadow: var(--shadow-xs);
}
[data-skin="clerk"] .input:hover,
[data-skin="clerk"] input:hover:not(:focus),
[data-skin="clerk"] textarea:hover:not(:focus),
[data-skin="clerk"] select:hover:not(:focus) { border-color: #b7b8c2 !important; }
[data-skin="clerk"] .input:focus,
[data-skin="clerk"] input:focus,
[data-skin="clerk"] textarea:focus,
[data-skin="clerk"] select:focus {
  border-color: #131316 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(19, 19, 22, 0.08) !important;
}
[data-skin="clerk"] input::placeholder,
[data-skin="clerk"] textarea::placeholder { color: #6e7080 !important; }

/* ── Cards — the universal Clerk surface treatment ──────────────── */
[data-skin="clerk"] .card,
[data-skin="clerk"] .strategy-cell,
[data-skin="clerk"] .idea-card,
[data-skin="clerk"] .ws-section,
[data-skin="clerk"] .approval-card,
[data-skin="clerk"] .approval-row,
[data-skin="clerk"] .picker-tile,
[data-skin="clerk"] .cal-cell,
[data-skin="clerk"] .pv-row {
  background: #ffffff !important;
  border: 1px solid #eeeef0 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  transition: border-color var(--t), box-shadow var(--t);
}
[data-skin="clerk"] .strategy-cell:hover,
[data-skin="clerk"] .idea-card:hover,
[data-skin="clerk"] .picker-tile:hover {
  border-color: #d9d9de !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ── Chips / tags / pills ───────────────────────────────────────── */
[data-skin="clerk"] .chip,
[data-skin="clerk"] .tag,
[data-skin="clerk"] .pill {
  background: #f0f0f2 !important;
  color: #42434d !important;
  border: 1px solid #eeeef0 !important;
  border-radius: 999px !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 3px 10px !important;
  letter-spacing: 0 !important;
}

/* ── Status pills (Approved/Pending/etc.) — single tiny pop of color */
[data-skin="clerk"] .status-approved,
[data-skin="clerk"] [data-status="approved"] { background: #f0fdf2 !important; color: #15802a !important; border-color: #bbf7c6 !important; }
[data-skin="clerk"] .status-pending,
[data-skin="clerk"] [data-status="pending"]  { background: #fefce8 !important; color: #a16207 !important; border-color: #fde047 !important; }
[data-skin="clerk"] .status-rejected,
[data-skin="clerk"] .status-failed,
[data-skin="clerk"] [data-status="rejected"] { background: #fef2f2 !important; color: #b91c1c !important; border-color: #fecaca !important; }
[data-skin="clerk"] .status-draft,
[data-skin="clerk"] [data-status="draft"]    { background: #f0f0f2 !important; color: #42434d !important; border-color: #eeeef0 !important; }

/* ── Toast — dark capsule, white text, monochrome action chip ───── */
[data-skin="clerk"] #toast {
  background: #131316 !important;
  color: #ffffff !important;
  border: 1px solid #131316 !important;
  border-radius: 10px !important;
  box-shadow: var(--shadow-lg) !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 12px 14px !important;
}
[data-skin="clerk"] #toast.success .toast-icon { color: #4ade68 !important; }
[data-skin="clerk"] #toast.error   .toast-icon { color: #f87171 !important; }
[data-skin="clerk"] #toast .toast-action {
  background: #ffffff !important;
  color: #131316 !important;
  border: 1px solid #ffffff !important;
  border-radius: 6px !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  padding: 4px 10px !important;
  transition: background var(--t) !important;
}
[data-skin="clerk"] #toast .toast-action:hover { background: #f7f7f8 !important; color: #131316 !important; }

/* ── Brand picker (the landing experience) ──────────────────────── */
[data-skin="clerk"] .picker-shell,
[data-skin="clerk"] #picker-shell,[data-skin="clerk"] #cc-shell,
[data-skin="clerk"] #picker { background: #f7f7f8 !important; }

[data-skin="clerk"] #picker {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 72px 32px 96px !important;
}

[data-skin="clerk"] .picker-head { margin-bottom: 56px !important; align-items: end !important; gap: 64px !important; }
[data-skin="clerk"] .picker-head .lhs { text-align: left !important; }
[data-skin="clerk"] .picker-eyebrow {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #5e5f6e !important;
  margin-bottom: 20px !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  display: inline-block !important;
}

/* Kill the original white→gray text-gradient on the headline; it was
   designed for a dark canvas and reads as invisible on off-white. */
[data-skin="clerk"] .picker-title,
[data-skin="clerk"] #picker h1,
[data-skin="clerk"] #picker h2 {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 48px !important;
  font-weight: 700 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.05 !important;
  color: #131316 !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: #131316 !important;
  margin: 0 0 20px 0 !important;
  text-align: left !important;
}

[data-skin="clerk"] .picker-lead,
[data-skin="clerk"] #picker p {
  color: #5e5f6e !important;
  font-size: 17px !important;
  line-height: 1.55 !important;
  max-width: 560px;
  margin: 0 !important;
  text-align: left !important;
}

/* Right-side stat aside — a clean Clerk-style stat card */
[data-skin="clerk"] .picker-meta,
[data-skin="clerk"] aside.picker-meta {
  background: #ffffff !important;
  border: 1px solid #eeeef0 !important;
  border-radius: 12px !important;
  padding: 18px 22px !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  box-shadow: var(--shadow-xs) !important;
  color: #5e5f6e !important;
  display: grid !important;
  gap: 12px !important;
  width: 260px !important;
}
[data-skin="clerk"] .picker-meta > div,
[data-skin="clerk"] .picker-meta > p {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #6e7080 !important;
  margin: 0 !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid #eeeef0 !important;
}
[data-skin="clerk"] .picker-meta > *:last-child { border-bottom: none !important; padding-bottom: 0 !important; }
[data-skin="clerk"] .picker-meta > * > *:last-child,
[data-skin="clerk"] .picker-meta > * > span:last-child,
[data-skin="clerk"] .picker-meta > * > b {
  color: #131316 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

[data-skin="clerk"] .brands-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px !important;
  margin: 0 auto !important;
  max-width: 1100px !important;
}

[data-skin="clerk"] .brand-tile {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #eeeef0 !important;
  border-radius: 16px !important;
  padding: 28px !important;
  color: #131316 !important;
  box-shadow: var(--shadow-xs) !important;
  transition: border-color var(--t), transform var(--t), box-shadow var(--t) !important;
  position: relative;
  overflow: hidden;
}
[data-skin="clerk"] .brand-tile::before,
[data-skin="clerk"] .brand-tile::after { display: none !important; content: none !important; background: none !important; }
[data-skin="clerk"] .brand-tile:hover {
  border-color: #131316 !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md) !important;
}

[data-skin="clerk"] .brand-tile .tile-head { color: #131316 !important; }
[data-skin="clerk"] .brand-tile .tile-name {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  color: #131316 !important;
}
[data-skin="clerk"] .brand-tile .tile-slug,
[data-skin="clerk"] .brand-tile .tile-meta { color: #5e5f6e !important; font-family: 'Manrope', system-ui, sans-serif !important; font-size: 13px !important; letter-spacing: 0 !important; }
[data-skin="clerk"] .brand-tile .tile-foot {
  color: #5e5f6e !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
  border-top: 1px solid #eeeef0;
  padding-top: 14px;
  margin-top: auto;
}
[data-skin="clerk"] .brand-tile .tile-foot > * { color: #5e5f6e !important; }
[data-skin="clerk"] .brand-tile .tile-archive {
  background: #ffffff !important;
  border: 1px solid #eeeef0 !important;
  border-radius: 6px !important;
  color: #6e7080 !important;
  width: 28px !important;
  height: 28px !important;
  opacity: 0;
  transition: opacity var(--t), color var(--t), border-color var(--t) !important;
}
[data-skin="clerk"] .brand-tile:hover .tile-archive { opacity: 1; }
[data-skin="clerk"] .brand-tile .tile-archive:hover { color: #b91c1c !important; border-color: #fecaca !important; background: #fef2f2 !important; }

[data-skin="clerk"] .brand-tile.add-tile {
  background: transparent !important;
  border-style: dashed !important;
  border-color: #d9d9de !important;
  color: #5e5f6e !important;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
}
[data-skin="clerk"] .brand-tile.add-tile:hover {
  border-color: #131316 !important;
  background: #ffffff !important;
  color: #131316 !important;
  transform: translateY(-2px);
}
[data-skin="clerk"] .brand-tile.add-tile * { color: inherit !important; }

/* ── Brand pill in the appbar ───────────────────────────────────── */
[data-skin="clerk"] .brand-pill {
  background: #ffffff !important;
  border: 1px solid #d9d9de !important;
  border-radius: 999px !important;
  color: #131316 !important;
  padding: 4px 10px 4px 4px !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-shadow: var(--shadow-xs) !important;
}
[data-skin="clerk"] .brand-pill:hover { border-color: #131316 !important; }

/* ── Strategy tab ───────────────────────────────────────────────── */
[data-skin="clerk"] .strategy-section-label,
[data-skin="clerk"] .strategy-h1 {
  font-family: 'Manrope', system-ui, sans-serif !important;
  color: #131316 !important;
  letter-spacing: -0.02em !important;
}
/* The section title (Brand / Voice / Visual) was 12px — same as the
   cell-level eyebrow labels — which made it read as just another
   sub-label instead of a real section heading. 16px / weight 600
   sits between the page-title and the cell-eyebrows: clearly a
   section heading, not commanding the page. */
[data-skin="clerk"] .strategy-section-label {
  font-size: 16px !important;
  font-weight: 600 !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* Center-align the label with the blurb. Base CSS uses baseline
   alignment which only looked right when both texts were the same
   size; with the label at 16px and the blurb at 13px the smaller
   text appeared visually offset above the bigger one. */
[data-skin="clerk"] .strategy-section-head {
  align-items: center;
}
[data-skin="clerk"] .strategy-section-blurb { color: #5e5f6e !important; }
[data-skin="clerk"] .strategy-cell { padding: 20px 22px !important; }
/* Cell label was a small uppercase eyebrow at 12px — fine when the
   value was always visible underneath, but now that every cell is
   collapsed by default the label IS the primary thing the operator
   sees and clicks. Bumped to 15px sentence-case dark text so each
   cell reads as a titled card, not a tiny grey tag. */
[data-skin="clerk"] .strategy-cell .label {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  text-transform: none !important;
  color: #131316 !important;
  margin-bottom: 4px;
}
[data-skin="clerk"] .strategy-cell .help { color: #6e7080 !important; font-size: 12px !important; }
[data-skin="clerk"] .strategy-cell .value { color: #131316 !important; font-size: 14px !important; line-height: 1.55 !important; }
[data-skin="clerk"] .strategy-cell .value.muted { color: #6e7080 !important; }
[data-skin="clerk"] .strategy-cell .edit { color: var(--brand-accent, var(--accent)) !important; background: transparent !important; border: 1px solid #d9d9de !important; border-radius: 999px !important; padding: 8px 14px !important; font-weight: 600 !important; font-size: 12px !important; }
[data-skin="clerk"] .strategy-cell .edit:hover { color: var(--brand-accent, var(--accent)) !important; background: color-mix(in srgb, var(--brand-accent, var(--accent)) 8%, transparent) !important; border-color: var(--brand-accent, var(--accent)) !important; }
[data-skin="clerk"] .strategy-cell .save { background: #131316 !important; color: #ffffff !important; border-radius: 6px !important; border: 1px solid #131316 !important; padding: 6px 12px !important; font-weight: 600 !important; }
[data-skin="clerk"] .strategy-cell .cancel { background: #ffffff !important; color: #131316 !important; border: 1px solid #d9d9de !important; border-radius: 6px !important; padding: 6px 12px !important; font-weight: 500 !important; }
/* Structured-editor inputs match the clerk input treatment so field boundaries
   stay distinct (the default --border is too faint against the cell surface). */
[data-skin="clerk"] .strategy-cell .sve-role,
[data-skin="clerk"] .strategy-cell .sve-bullet { background: #ffffff !important; border: 1px solid #d9d9de !important; color: #131316 !important; border-radius: 6px !important; }
[data-skin="clerk"] .strategy-cell .sve-role:focus,
[data-skin="clerk"] .strategy-cell .sve-bullet:focus { border-color: #131316 !important; }
[data-skin="clerk"][data-theme="dark"] .strategy-cell .sve-role,
[data-skin="clerk"][data-theme="dark"] .strategy-cell .sve-bullet { background: rgba(255,255,255,0.03) !important; border-color: rgba(255,255,255,0.12) !important; color: #f7f7f8 !important; }
[data-skin="clerk"][data-theme="dark"] .strategy-cell .sve-role:focus,
[data-skin="clerk"][data-theme="dark"] .strategy-cell .sve-bullet:focus { border-color: #f7f7f8 !important; }

/* Setup checklist */
[data-skin="clerk"] .setup-check-icon.is-ok      { background: #f0fdf2 !important; color: #15802a !important; }
[data-skin="clerk"] .setup-check-icon.is-missing { background: #fef2f2 !important; color: #b91c1c !important; }
[data-skin="clerk"] .setup-check-group-title { color: #5e5f6e !important; font-weight: 600 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; font-size: 11px !important; }
[data-skin="clerk"] .setup-check-detail { color: #6e7080 !important; }

/* ── Ideas tab ──────────────────────────────────────────────────── */
[data-skin="clerk"] .idea-card { padding: 18px 20px !important; }
[data-skin="clerk"] .idea-card .idea-title {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #131316 !important;
  letter-spacing: -0.01em !important;
}
[data-skin="clerk"] .idea-card .idea-meta { color: #5e5f6e !important; font-size: 12px !important; }

/* ── Workshop / Studio — preserve density, lighten surfaces ────── */
[data-skin="clerk"] .ws-section,
[data-skin="clerk"] .ws-card,
[data-skin="clerk"] .ws-panel {
  background: #ffffff !important;
  border: 1px solid #eeeef0 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
[data-skin="clerk"] .ws-section-title,
[data-skin="clerk"] .ws-header h1 {
  font-family: 'Manrope', system-ui, sans-serif !important;
  color: #131316 !important;
  letter-spacing: -0.02em !important;
  font-weight: 600 !important;
}
[data-skin="clerk"] .ws-header .ws-stamp { color: #5e5f6e !important; font-family: 'Manrope', system-ui, sans-serif !important; letter-spacing: 0 !important; }
[data-skin="clerk"] .ws-header .ws-stamp .ws-stamp-edited { color: #131316 !important; }

/* Caption editors inside Workshop — the high-frequency surface */
[data-skin="clerk"] .ws-caption,
[data-skin="clerk"] .ws-caption-textarea,
[data-skin="clerk"] textarea.caption,
[data-skin="clerk"] textarea.pv-row-textarea {
  background: #ffffff !important;
  border: 1px solid #d9d9de !important;
  border-radius: 10px !important;
  color: #131316 !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  padding: 12px 14px !important;
}
[data-skin="clerk"] .ws-caption:focus,
[data-skin="clerk"] textarea.caption:focus,
[data-skin="clerk"] textarea.pv-row-textarea:focus {
  border-color: #131316 !important;
  box-shadow: 0 0 0 3px rgba(19, 19, 22, 0.08) !important;
  outline: none !important;
}

/* Platform-variant rows (LinkedIn / X / IG controls) */
[data-skin="clerk"] .pv-row {
  background: #fafafb !important;
  border: 1px solid #eeeef0 !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
}
[data-skin="clerk"] .pv-row-select {
  background: #ffffff !important;
  border: 1px solid #d9d9de !important;
  border-radius: 6px !important;
  color: #131316 !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 5px 8px !important;
  letter-spacing: 0 !important;
}
[data-skin="clerk"] .pv-row-select:hover { border-color: #131316 !important; }
[data-skin="clerk"] .pv-ai-mode-badge {
  background: #f0f0f2 !important;
  color: #42434d !important;
  border: 1px solid #eeeef0 !important;
  border-radius: 999px !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  padding: 3px 9px !important;
}

/* ── Approval tab ───────────────────────────────────────────────── */
[data-skin="clerk"] .approval-card,
[data-skin="clerk"] .approval-row {
  background: #ffffff !important;
  border: 1px solid #eeeef0 !important;
  border-radius: 12px !important;
  padding: 18px 20px !important;
}
[data-skin="clerk"] .card-head { border-bottom: 1px solid #eeeef0 !important; }
[data-skin="clerk"] .platform-row { border-top: 1px solid #eeeef0 !important; }

/* ── Calendar tab ───────────────────────────────────────────────── */
[data-skin="clerk"] .cal-shell {
  /* Transparent layout-only grid: the sidebar + calendar are each their own
     card, so the shell must NOT paint its own (it'd peek out behind both). */
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}
[data-skin="clerk"] .cal-cell {
  background: #ffffff !important;
  border-right: 1px solid #eeeef0 !important;
  border-bottom: 1px solid #eeeef0 !important;
  border-radius: 0 !important;
}
[data-skin="clerk"] .cal-cell:hover { background: #fafafb !important; }
[data-skin="clerk"] .cal-day-num { color: #5e5f6e !important; font-family: 'Manrope', system-ui, sans-serif !important; font-weight: 500 !important; }
[data-skin="clerk"] .cal-today .cal-day-num { color: #131316 !important; font-weight: 700 !important; }

/* ── Modals / overlays / popovers ───────────────────────────────── */
[data-skin="clerk"] .modal,
[data-skin="clerk"] .modal-card,
[data-skin="clerk"] .dialog,
[data-skin="clerk"] .popover {
  background: #ffffff !important;
  border: 1px solid #eeeef0 !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-lg) !important;
}
[data-skin="clerk"] .modal-overlay,
[data-skin="clerk"] .dialog-overlay { background: rgba(19, 19, 22, 0.32) !important; backdrop-filter: blur(2px); }
[data-skin="clerk"] .modal-title { font-family: 'Manrope', system-ui, sans-serif !important; font-weight: 600 !important; color: #131316 !important; letter-spacing: -0.02em !important; }

/* ── Loading / empty states ─────────────────────────────────────── */
[data-skin="clerk"] .empty-eyebrow {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #6e7080 !important;
}
[data-skin="clerk"] .empty-state { color: #5e5f6e !important; }
[data-skin="clerk"] .skeleton {
  background: linear-gradient(90deg, #eeeef0 0%, #f7f7f8 50%, #eeeef0 100%) !important;
  /* The `background` shorthand above resets background-size to auto, which kills
     the `shine` sweep (it animates background-position over a 200%-wide
     gradient). Re-assert the size so the shimmer slides on the light skin. */
  background-size: 200% 100% !important;
  border-radius: 8px !important;
}

/* ── CMDK / command palette ─────────────────────────────────────── */
[data-skin="clerk"] .cmdk-trigger,
[data-skin="clerk"] .cmdk-shell {
  background: #ffffff !important;
  border: 1px solid #eeeef0 !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-lg);
}
[data-skin="clerk"] .cmdk-input {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #eeeef0 !important;
  border-radius: 0 !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 15px !important;
  color: #131316 !important;
}
[data-skin="clerk"] .cmdk-item {
  font-family: 'Manrope', system-ui, sans-serif !important;
  color: #131316 !important;
  border-radius: 6px !important;
}
[data-skin="clerk"] .cmdk-item[aria-selected="true"],
[data-skin="clerk"] .cmdk-item:hover { background: #f0f0f2 !important; }

/* ── Mobile cap ─────────────────────────────────────────────────── */
[data-skin="clerk"] #mobile-guard { background: #f7f7f8 !important; color: #131316 !important; }
[data-skin="clerk"] #mobile-guard h1,
[data-skin="clerk"] #mobile-guard h2 { color: #131316 !important; letter-spacing: -0.02em !important; }
[data-skin="clerk"] #mobile-guard p { color: #5e5f6e !important; }
[data-skin="clerk"] #mobile-guard .card,
[data-skin="clerk"] #mobile-guard > div { background: #ffffff !important; border: 1px solid #eeeef0 !important; border-radius: 16px !important; box-shadow: var(--shadow-sm) !important; }

/* ── Scrollbar treatment (webkit) ───────────────────────────────── */
[data-skin="clerk"] ::-webkit-scrollbar { width: 10px; height: 10px; }
[data-skin="clerk"] ::-webkit-scrollbar-track { background: transparent; }
[data-skin="clerk"] ::-webkit-scrollbar-thumb { background: #d9d9de; border-radius: 999px; border: 2px solid #f7f7f8; }
[data-skin="clerk"] ::-webkit-scrollbar-thumb:hover { background: #b7b8c2; }

/* ── Focus rings — uniform, accessible ──────────────────────────── */
[data-skin="clerk"] :focus-visible {
  outline: 2px solid #131316 !important;
  outline-offset: 2px;
  border-radius: 6px;
}

/* Build badge removed — this is now the default build, not a preview. */

/* ============================================================================
   END CLERK SKIN
   ============================================================================ */