/* ─────────────────────────────────────────────────────────────────────
   RunSignl — Operating Desk, premium shell
   Futuristic grotesk display (Space Grotesk) + mono readouts (JetBrains Mono) over a clean UI sans (Inter).
   Layered depth: elevated command surfaces, standard cards, compact
   rows, tinted insight panels. One accent (config-driven), agent
   secondary colors used sparingly. Real data only — even in the CSS,
   nothing decorative pretends to be information.
   ───────────────────────────────────────────────────────────────────── */

:root {
  /* ── RunSignl · Platinum (light) — cool porcelain, glass surfaces ── */
  --accent: #6D5DFF;                      /* ultraviolet (tenant-overridable) */
  --accent-hover: #5B4EE6;
  --accent-soft: rgba(109,93,255,0.12);
  --accent-ink: #ffffff;
  --live: #10B981;                        /* live-signal green (fixed brand) */

  --bg: #ECEAF2;                          /* cool porcelain */
  --bg-2: #F4F2FA;
  --bg-side: rgba(255,255,255,0.5);
  --surface: #FFFFFF;                     /* opaque fallback */
  --surface-2: #EFEDF7;                   /* cool, faint-violet (was warm cream) */
  --glass: rgba(255,255,255,0.62);        /* frosted card fill */
  /* ALIASES FOR THE PHANTOM TOKENS. --card/--line/--panel/--fg/--muted are
     referenced across the radar cards and dozens of inline styles but were
     never declared — every one computed to nothing, which is why evidence
     cards rendered borderless and background-less. Aliased rather than
     rewritten: one declaration fixes every consumer at once, in both themes
     (these resolve through the theme-scoped tokens they point at). */
  --card: var(--surface);
  --line: var(--border);
  --panel: var(--surface-2);
  --fg: var(--ink);
  --muted: var(--ink-2);
  --glass-2: rgba(255,255,255,0.44);
  --glass-hi: rgba(255,255,255,0.95);     /* top specular edge */
  --edge: rgba(255,255,255,0.7);          /* metallic edge highlight */
  /* cool violet-tinted neutrals — one gray family, matched to the ultraviolet
     accent (was warm brown, which read as "cream" against the cool porcelain) */
  --border: rgba(30,26,54,0.10);
  --border-strong: rgba(30,26,54,0.20);
  --ink: #171522;
  --ink-2: #565167;
  --ink-3: #6B6780;   /* was #8B87A0 — 2.9-3.5:1, under AA on every surface */
  --up: #10B981;
  --down: #D93838;
  --blur: 20px;
  --glow: rgba(109,93,255,0.28);
  --amber: #B8860B;
  /* The provenance amber the calendar has always drawn. It lived as a raw
     hex in one rule, so the queue reached for --amber and quietly taught a
     different colour for the same word. */
  --plan-direction: #F59E0B;

  --sh-1: 0 1px 2px rgba(26,22,45,0.05);
  --sh-2: 0 2px 6px rgba(26,22,45,0.06), 0 8px 22px rgba(26,22,45,0.05);
  --sh-3: 0 4px 12px rgba(26,22,45,0.07), 0 18px 44px rgba(26,22,45,0.09);
  --sh-4: 0 10px 24px rgba(26,22,45,0.10), 0 40px 80px rgba(26,22,45,0.16);

  --display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  --serif: var(--display); /* legacy alias → now the display grotesk */

  --radius: 16px;
  --radius-sm: 11px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

:root[data-theme="dark"] {
  /* ── RunSignl · Obsidian (dark) — deep black glass, aurora glow ── */
  --accent: #7C6CFF;
  --accent-hover: #8B7BFF;
  --accent-soft: rgba(124,108,255,0.16);
  --live: #34D399;                        /* live-signal green (brighter on black) */
  --bg: #050508;                          /* deeper obsidian */
  --bg-2: #0A0A10;
  --bg-side: rgba(16,16,24,0.5);
  --surface: #101017;
  --surface-2: #16161F;
  --glass: rgba(22,22,31,0.5);
  --glass-2: rgba(30,30,42,0.42);
  --glass-hi: rgba(255,255,255,0.13);
  --edge: rgba(255,255,255,0.14);         /* metallic edge highlight */
  --border: rgba(255,255,255,0.09);
  --border-strong: rgba(255,255,255,0.18);
  --ink: #F5F3FA;
  --ink-2: #ABA6B8;
  /* OBSIDIAN RAISES THE ACCENT, SO THE INK ON IT HAS TO MOVE TOO. --accent-ink
     was declared once in :root and never again, so every primary button label
     was #fff on the lighter dark-theme accent: 3.86:1 at 13px, under AA. */
  --accent-ink: #0B0912;   /* against the accent Obsidian actually renders */
  /* --ink-3 failed AA on every background in BOTH themes (2.9-3.6:1) and is used
     for text that carries meaning — section subheadings, drawer headings, the
     provenance tag. Raised to clear 4.5:1 while staying clearly tertiary. */
  --ink-3: #9B95A8;
  --up: #34D399;
  --down: #F87171;
  --blur: 22px;
  --glow: rgba(124,108,255,0.4);

  --sh-1: 0 1px 2px rgba(0,0,0,0.5);
  --sh-2: 0 2px 8px rgba(0,0,0,0.5), 0 10px 30px rgba(0,0,0,0.4);
  --sh-3: 0 8px 24px rgba(0,0,0,0.55), 0 24px 60px rgba(0,0,0,0.5);
  --sh-4: 0 20px 50px rgba(0,0,0,0.6), 0 50px 100px rgba(0,0,0,0.55);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  min-height: 100vh;
  font-size: 14px;
  position: relative;
}
/* ambient mesh glow — gives the frosted glass something to refract */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(70vw 55vh at 78% -8%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
    radial-gradient(60vw 50vh at 8% 6%, color-mix(in srgb, #7C6CFF 16%, transparent), transparent 55%),
    radial-gradient(70vw 60vh at 50% 116%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
    var(--bg);
}
:root[data-theme="dark"] body::before {
  background:
    radial-gradient(70vw 55vh at 80% -10%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 58%),
    radial-gradient(60vw 55vh at 4% 4%, color-mix(in srgb, #6D5DFF 26%, transparent), transparent 55%),
    radial-gradient(80vw 60vh at 50% 120%, color-mix(in srgb, #12E0C4 12%, transparent), transparent 60%),
    var(--bg);
}
/* fine film grain — the "expensive print" texture */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] body::after { opacity: 0.06; }

.tnum { font-variant-numeric: lining-nums tabular-nums; }
button { font-family: inherit; }
svg.li { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* display voice: editorial serif */
.display, .hero-title, .panel-title-lg, .stat-big {
  font-family: var(--display);
  font-optical-sizing: auto;
  letter-spacing: -0.01em;
}

/* ── shell layout ────────────────────────────────────────────────── */
.shell { display: flex; min-height: 100vh; }
.side {
  width: 232px; flex: none; background: var(--bg-side);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; padding: 22px 14px 18px;
}
.main { flex: 1; min-width: 0; padding: 0 clamp(16px, 3vw, 34px) 46px; }
.pages { max-width: 1160px; margin: 0 auto; }
.page { display: none; }
.page.on { display: block; animation: pagein .45s var(--ease); }
@keyframes pagein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* sidebar */
.side-brand { display: flex; align-items: center; gap: 11px; padding: 2px 8px 20px; }
.side-brand .logo { color: var(--accent); flex: none; }
.side-brand h1 { font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: 0.04em; line-height: 1; }
.side-brand .handle { font-size: 11px; color: var(--ink-3); margin-top: 3px; }

.side-nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px;
  border: 0; background: transparent; color: var(--ink-2); cursor: pointer;
  font-size: 13.5px; font-weight: 550; border-radius: 9px; text-align: left;
  transition: background .2s var(--ease), color .2s;
}
.nav-item .ni { width: 17px; height: 17px; flex: none; opacity: .8; }
.nav-item { position: relative; }
.nav-item:hover { color: var(--ink); background: color-mix(in srgb, var(--surface) 70%, transparent); }
.nav-item.on { background: var(--accent-soft); color: var(--ink); font-weight: 650; }
.nav-item.on::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  border-radius: 3px; background: var(--accent); }
.nav-item.on .ni { color: var(--accent); opacity: 1; }

/* brand-aware focus for keyboard + form interaction (replaces browser blue) */
/* A FOCUS RING AT 55% OPACITY IS NOT A FOCUS RING. Composited against every
   surface this product uses it measured between 2.0:1 and 2.3:1 in both themes,
   against a 3:1 minimum for non-text — and every button, link, nav item and
   form control in the app inherited it. Full-strength accent measures 4.5:1 in
   Platinum and 4.9:1 in Obsidian, which is what the four components that
   already override this rule were using. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
input[type="checkbox"], input[type="radio"], select, progress { accent-color: var(--accent); }
.nav-count {
  margin-left: auto; font-size: 10.5px; font-weight: 700; color: var(--accent-hover);
  background: var(--accent-soft); border-radius: 10px; padding: 1px 7px;
}
.side-foot { margin-top: auto; }
/* bottom-left account chip */
.side-user { display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 12px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  cursor: pointer; text-align: left; box-shadow: var(--sh-1); transition: border-color .2s, transform .15s var(--ease); }
.side-user:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.side-user .su-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.side-user .su-name { font-family: var(--display); font-size: 14px; font-weight: 650; line-height: 1.1; letter-spacing: 0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-user .su-handle { font-size: 11px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-user .su-caret { color: var(--ink-3); font-size: 14px; flex: none; }
.side-note {
  font-size: 11.5px; color: var(--ink-2); line-height: 1.55;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 13px; box-shadow: var(--sh-1);
}
.side-note b { font-family: var(--display); font-size: 13px; color: var(--ink); display: block; margin-bottom: 3px; }
.side-note .bar { height: 5px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--border); margin-top: 8px; overflow: hidden; }
.side-note .bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--accent), var(--accent-hover)); }

/* ── topbar ──────────────────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 2px 12px; margin-bottom: 20px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 40;
}
.platforms { display: flex; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 3px; }
.plat {
  border: 0; background: transparent; color: var(--ink-2); cursor: pointer;
  font-size: 12.5px; font-weight: 570; padding: 6px 13px; border-radius: 8px;
  display: flex; align-items: center; gap: 6px; transition: .2s var(--ease);
}
.plat:hover:not(:disabled) { color: var(--ink); }
.plat[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }
.plat:disabled { opacity: .5; cursor: default; }
.plat .soon { font-size: 8px; font-weight: 500; letter-spacing: 0.09em; color: var(--ink-3);
  background: color-mix(in srgb, var(--ink-3) 14%, transparent); border: 0; padding: 2px 5px; border-radius: 4px; }
.spacer { flex: 1; }
.nav-chip {
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border));
  background: var(--accent-soft); color: var(--accent-hover);
  font-size: 12px; font-weight: 680; padding: 6px 13px; border-radius: 20px; cursor: pointer; transition: .2s;
}
.nav-chip:hover { border-color: var(--accent); transform: translateY(-1px); }
.nav-chip.zero { background: var(--surface-2); color: var(--ink-3); border-color: var(--border); }
.synced { font-size: 11.5px; color: var(--ink-3); display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--live); animation: breathe 3s var(--ease) infinite; }
@keyframes breathe { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
.nav-btn {
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-2);
  font-size: 12px; font-weight: 570; padding: 7px 13px; border-radius: 9px; cursor: pointer; transition: .2s;
  box-shadow: var(--sh-1);
}
.nav-btn:hover { color: var(--ink); border-color: var(--border-strong); }

/* ── buttons ─────────────────────────────────────────────────────── */
.btn {
  border: 0; cursor: pointer; border-radius: 9px; font-size: 13px; font-weight: 640;
  padding: 9px 16px; transition: all .22s var(--ease);
}
.btn.primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent); }
.btn.primary:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 5px 16px color-mix(in srgb, var(--accent) 42%, transparent); }
.btn.ghost { background: var(--surface); color: var(--ink-2); border: 1px solid var(--border); box-shadow: var(--sh-1); }
.btn.ghost:hover { color: var(--ink); border-color: var(--border-strong); }
.btn.sm { font-size: 12px; padding: 6px 12px; border-radius: 8px; }
.linklike { border: 0; background: none; color: var(--accent-hover); font-size: 12.5px; font-weight: 640; cursor: pointer; padding: 4px 2px; }
.linklike:hover { text-decoration: underline; }

/* ── hero (command) ──────────────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--surface), color-mix(in srgb, var(--accent-soft) 40%, var(--surface)));
  border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--sh-3);
  padding: 30px 32px 26px; margin-bottom: 16px;
  display: flex; gap: 30px; align-items: center; flex-wrap: wrap;
}
/* the "signal instrument" language, in theme colors: a faint trace + corner ticks */
.hero-trace {
  position: absolute; z-index: 0; right: 0; top: 50%; transform: translateY(-50%);
  width: 52%; height: 120px; opacity: 0.5; pointer-events: none;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 40%, transparent));
}
.hero-tick { position: absolute; z-index: 1; width: 12px; height: 12px; pointer-events: none; opacity: 0.6; }
.hero-tick.tr { top: 12px; right: 12px; border-top: 1.5px solid var(--accent); border-right: 1.5px solid var(--accent); }
.hero-tick.bl { bottom: 12px; left: 12px; border-bottom: 1.5px solid var(--accent); border-left: 1.5px solid var(--accent); }
.hero .lead, .hero .nba { position: relative; z-index: 2; }
.hero .lead { flex: 1.5; min-width: 300px; }
.kicker { font-size: 11px; font-weight: 720; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.hero-title { font-size: clamp(34px, 4.4vw, 54px); font-weight: 540; line-height: 1.02; letter-spacing: -0.03em; }
.hero-title em { font-style: italic; color: var(--accent-hover); }
.hero .chips { display: flex; gap: 9px; margin-top: 16px; flex-wrap: wrap; }
.chip-stat {
  font-size: 12.5px; font-weight: 550; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 7px 14px;
  box-shadow: var(--sh-1);
}
.chip-stat b { color: var(--ink); font-weight: 750; font-family: var(--display); font-size: 14px; }
.hero .nba {
  flex: 1; min-width: 300px; background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border));
  border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--sh-2);
}
.hero .nba .l { font-size: 10.5px; font-weight: 750; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent-hover); }
.hero .nba .t { font-size: 15px; font-weight: 590; margin: 8px 0 14px; line-height: 1.4; }
.hero .nba .row { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── the content team (hero-adjacent, 3D personality cards) ──────── */
.team { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 18px; }
.agent {
  background: linear-gradient(175deg, var(--surface), color-mix(in srgb, var(--a) 3%, var(--surface)));
  border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--sh-2);
  padding: 17px 16px 14px; cursor: pointer; position: relative; overflow: hidden;
  display: flex; flex-direction: column; min-height: 190px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.agent:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-4), 0 12px 34px color-mix(in srgb, var(--a) 16%, transparent);
  border-color: color-mix(in srgb, var(--a) 38%, var(--border));
}
.agent .glow {
  position: absolute; inset: -55% 25% auto -25%; height: 150px; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--a) 14%, transparent), transparent 70%);
  opacity: 0; transition: opacity .5s var(--ease);
}
.agent:hover .glow { opacity: 1; }
.agent .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.agent .name { margin-top: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent .avatar {
  width: 38px; height: 38px; flex: none; padding: 8px; color: var(--a); border-radius: 11px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--a) 16%, var(--surface)), color-mix(in srgb, var(--a) 6%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--a) 32%, var(--border));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 6px color-mix(in srgb, var(--a) 18%, transparent);
}
:root[data-theme="dark"] .agent .avatar { box-shadow: 0 2px 6px color-mix(in srgb, var(--a) 18%, transparent); }
.agent .name { font-family: var(--display); font-size: 15px; font-weight: 620; }
.agent .state {
  flex: none; margin-top: 2px;
  font-size: 9.5px; font-weight: 750; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--a); background: color-mix(in srgb, var(--a) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--a) 26%, transparent);
  padding: 3px 8px; border-radius: 11px; display: flex; align-items: center; gap: 5px;
}
.agent .state i { width: 5px; height: 5px; border-radius: 50%; background: var(--a); animation: breathe 2.4s var(--ease) infinite; }
.agent .task { font-size: 11.5px; color: var(--ink-2); margin-top: 4px; line-height: 1.45;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.agent .out {
  margin-top: 8px; font-size: 11.5px; line-height: 1.5; color: var(--ink);
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
  border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.agent .metrics { margin-top: auto; display: flex; gap: 12px; padding-top: 12px; align-items: flex-end; }
.agent .metric .mv { font-family: var(--display); font-size: 19px; font-weight: 650; line-height: 1; }
.agent .metric .ml { font-size: 9px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 3px; }
.agent .spark { margin-left: auto; width: 58px; height: 22px; overflow: visible; }
.agent .spark polyline { fill: none; stroke: var(--a); stroke-width: 1.6; stroke-linecap: round; opacity: .85; }
.agent .a-pend {
  display: block; text-align: right; margin-top: 8px; padding-top: 7px;
  border-top: 1px solid var(--border);
  font-size: 10px; font-weight: 720; color: var(--accent-hover);
}

/* ── section heads ───────────────────────────────────────────────── */
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin: 24px 4px 12px; gap: 12px; }
.section-head h2 { font-family: var(--display); font-size: 18px; font-weight: 620; letter-spacing: -0.01em; }
.section-head span { font-size: 11.5px; color: var(--ink-3); }
.page-head { margin: 6px 4px 18px; }
.page-head h2 { font-family: var(--display); font-size: 26px; font-weight: 600; }
.page-head p { font-size: 13px; color: var(--ink-2); margin-top: 4px; }

/* ── panels & rows ───────────────────────────────────────────────── */
.panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--sh-2), inset 0 1px 0 var(--edge); padding: 18px 20px;
}
.panel.tinted { background: linear-gradient(165deg, var(--surface), color-mix(in srgb, var(--accent-soft) 45%, var(--surface))); }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; gap: 10px; }
.panel-head h3 { font-family: var(--sans); font-size: 13.5px; font-weight: 720; letter-spacing: -0.01em; }
.panel-sub { font-size: 11.5px; color: var(--ink-3); }

/* goal + mission strip */
.gm { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.gm .g-label { font-size: 10.5px; font-weight: 750; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent); }
.gm h3.g-name { font-family: var(--display); font-size: 21px; font-weight: 620; margin-top: 6px; }
.gm .g-desc { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; }
.bar-row { display: flex; align-items: center; gap: 13px; margin-top: 14px; }
.bar { flex: 1; height: 8px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-hover)); border-radius: 6px; width: 0; transition: width 1.1s var(--ease); }
.bar-num { font-family: var(--display); font-size: 14px; font-weight: 650; white-space: nowrap; }
.g-meta { display: flex; gap: 18px; margin-top: 12px; flex-wrap: wrap; align-items: center; }
.g-stat { font-size: 12px; color: var(--ink-2); }
.g-stat b { color: var(--ink); font-weight: 700; }
.m-agents { display: flex; gap: 5px; margin-left: auto; }
.m-agents .ma { width: 26px; height: 26px; border-radius: 8px; padding: 5px; border: 1px solid var(--border); color: var(--ac); background: var(--surface-2); }

/* approval rows (compact) */
.ap-row {
  display: flex; align-items: center; gap: 13px; padding: 11px 10px; margin: 0 -10px;
  border-radius: var(--radius-sm); cursor: pointer; transition: background .2s;
}
.ap-row:hover { background: var(--surface-2); }
.ap-row + .ap-row { border-top: 1px solid var(--border); }
.ap-tile {
  width: 42px; height: 42px; flex: none; border-radius: 10px; padding: 10px; color: var(--ac);
  background: linear-gradient(150deg, color-mix(in srgb, var(--ac) 14%, var(--surface)), color-mix(in srgb, var(--ac) 5%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--ac) 28%, var(--border));
  overflow: hidden; position: relative;
}
.ap-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ap-main { flex: 1; min-width: 0; }
.ap-kind { font-size: 9.5px; font-weight: 750; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ac); }
.ap-title { font-size: 13.5px; font-weight: 640; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-prev { font-size: 11.5px; color: var(--ink-2); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.ap-side { display: flex; gap: 7px; align-items: center; flex: none; }
.ap-state { font-size: 11.5px; font-weight: 680; }
.ap-state.ok { color: var(--up); } .ap-state.no { color: var(--down); } .ap-state.later { color: var(--ink-3); }
.undo { border: 0; background: none; color: var(--ink-3); font-size: 11px; cursor: pointer; text-decoration: underline; }

/* filters */
.filters { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.f-chip {
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-2);
  font-size: 11.5px; font-weight: 570; padding: 5px 12px; border-radius: 16px; cursor: pointer; transition: .2s;
}
.f-chip:hover { color: var(--ink); }
.f-chip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* activity */
.act-item { display: flex; gap: 11px; padding: 10px 2px; }
.act-item + .act-item { border-top: 1px solid var(--border); }
.act-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ac); flex: none; margin-top: 5px; animation: breathe 2.8s var(--ease) infinite; }
.act-text { font-size: 12.5px; line-height: 1.5; }
.act-meta { font-size: 10.5px; color: var(--ink-3); margin-top: 2px; }
.act-needs { color: var(--accent-hover); font-weight: 680; }
.act-item.alert { background: var(--accent-soft); margin: 0 -10px; padding: 10px; border-radius: var(--radius-sm); border-top: 0 !important; }

/* two-col ops */
.cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; margin-bottom: 4px; }

/* intel */
.intel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
/* A COLUMN, SO THE SLACK LANDS SOMEWHERE DELIBERATE. The row is sized by its
   tallest card, which left the other three with 100–134px of blank card under
   the last line — measured, and most of why this page read as static. Pinning
   the note to the bottom turns that slack into alignment: the four notes sit on
   one line and the evidence above them breathes, instead of everything bunching
   at the top over an empty half. */
.icard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--sh-2), inset 0 1px 0 var(--edge); padding: 17px 18px;
  display: flex; flex-direction: column; }
.icard .k { font-size: 10.5px; font-weight: 720; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); }
.icard .v { font-family: var(--display); font-size: 30px; font-weight: 620; margin-top: 8px; }
.icard .v.up { color: var(--up); } .icard .v.down { color: var(--down); } .icard .v.flag { color: var(--accent-hover); }
.icard .s { font-size: 11.5px; color: var(--ink-2); margin-top: 4px; line-height: 1.45; }
.icard .note { font-size: 11.5px; margin-top: auto; padding-top: 9px; border-top: 1px solid var(--border); line-height: 1.5; }
/* A FIXED 84px HEIGHT LETTERBOXED THE POST. Measured: the box came out
   237×84 — 2.8:1 — against a source frame of 1.78:1, so object-fit: cover threw
   away ~37% of the image height; against a 9:16 reel frame, which is what most
   top posts are, it kept a horizontal sliver of the middle and cut off the rest.
   An aspect ratio crops far less and never changes shape with the column, and
   16/10 is the proportion this codebase already settled on for .rd-thumb after
   the same "preview, not a poster" argument. */
.icard .thumb { width: 100%; aspect-ratio: 16 / 10; height: auto; max-height: 112px; border-radius: 9px;
  object-fit: cover; object-position: center; margin-top: 10px; border: 1px solid var(--border); background: var(--surface-2); }

/* The evidence behind each stat card's number — filling the 100–134px of empty
   card the row's tallest member was leaving underneath the other three. */
.iviz { margin-top: 11px; }
.iviz-cap { font: 500 10px/1.4 var(--mono); color: var(--ink-3); margin-top: 5px; letter-spacing: .02em; }
.ispark { width: 100%; height: 26px; display: block; overflow: visible; }
.ispark polyline { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ispark .base { stroke: var(--border-strong); stroke-dasharray: 3 3; stroke-width: 1; }
.ibars { display: flex; flex-direction: column; gap: 5px; }
.ibar { display: flex; align-items: center; gap: 8px; }
.ibl { width: 44px; flex: none; font-size: 11px; color: var(--ink-2); }
.ibt { flex: 1; height: 7px; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.ibt i { display: block; height: 100%; background: var(--accent); opacity: .82; border-radius: 5px; }
.ibv { flex: none; font-size: 10.5px; font-weight: 640; color: var(--ink-2); }

/* ── the momentum chart, readable ──────────────────────────────────────────
   Twenty posts drawn as one line and nothing else: no post identifiable, no
   value legible. Each point is a real button carrying that post's own figures.
   HTML rather than SVG circles because the line keeps preserveAspectRatio="none"
   to fill the panel, and anything drawn in that viewBox is stretched with it. */
.mchart { position: relative; }
.mpts { position: absolute; inset: 0; pointer-events: none; }
/* Positioned by left%/bottom% and centred on that coordinate with a transform —
   negative margins do not centre an element that is anchored from the bottom. */
.mpt {
  position: absolute; width: 22px; height: 22px; padding: 0;
  transform: translate(-50%, 50%);
  background: none; border: 0; cursor: pointer; pointer-events: auto;
  display: grid; place-items: center;
}
.mpt i {
  width: 6px; height: 6px; border-radius: 50%; display: block;
  background: var(--surface); border: 1.5px solid var(--accent);
  transition: transform .16s var(--ease), background .16s var(--ease);
}
.mpt.over i { background: var(--accent); }
.mpt:hover i, .mpt:focus-visible i, .mpt.on i { transform: scale(1.7); background: var(--accent); }
.mpt:hover, .mpt:focus-visible, .mpt.on { transform: translate(-50%, 50%); }
.mpt:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 50%; }
.mtip {
  position: absolute; z-index: 3; pointer-events: none; white-space: nowrap;
  font: 500 11px/1.3 var(--mono); color: var(--ink);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--border-strong); border-radius: 8px; padding: 6px 9px;
  box-shadow: var(--sh-3);
}
@media (prefers-reduced-motion: reduce) { .mpt i { transition: none; } }

/* sparkline / charts */
/* The chart gets the room the panel already had. At 96px in a panel sized by
   its taller neighbour, half the box was empty and twenty points were crushed
   into a band too shallow to read one against another. The viewBox stretches
   with preserveAspectRatio="none" and the points are placed from the same
   scale, so both grow together. */
.spark-panel svg { width: 100%; height: 132px; overflow: visible; }
.sparkline path.area { fill: url(#sparkfill); opacity: .5; }
.sparkline polyline { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
.sparkline .base { stroke: var(--border-strong); stroke-dasharray: 4 4; stroke-width: 1; }
.chart-note { font-size: 11px; color: var(--ink-3); margin-top: 8px; }
.fbars .fb { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.fbars .fl { width: 96px; flex: none; font-size: 12px; color: var(--ink-2); }
.fbars .ft { flex: 1; height: 9px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.fbars .ft i { display: block; height: 100%; background: var(--accent); opacity: .8; border-radius: 6px; }
.fbars .fv { width: 84px; flex: none; font-size: 11.5px; font-weight: 640; text-align: right; }
.donut-wrap { display: flex; gap: 18px; align-items: center; }
.donut { width: 112px; height: 112px; border-radius: 50%; flex: none; position: relative; }
.donut::after { content: ""; position: absolute; inset: 26px; background: var(--surface); border-radius: 50%; box-shadow: inset 0 1px 3px rgba(28,22,14,.07); }
.legend { flex: 1; }
.legend .lg { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-2); padding: 2.5px 0; }
.legend .lg i { width: 8px; height: 8px; border-radius: 3px; flex: none; }
.legend .lg b { margin-left: auto; color: var(--ink); font-weight: 640; }

/* pattern / posts */
.pat-attrs { display: flex; gap: 7px; flex-wrap: wrap; margin: 10px 0 12px; }
.pat-attr { font-size: 11px; font-weight: 570; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: 15px; padding: 4px 11px; }
.pat-result { font-size: 13px; font-weight: 720; color: var(--up); margin-bottom: 8px; }
.mini-post { display: flex; gap: 11px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border); text-decoration: none; color: inherit; }
.mini-post .mthumb { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; border: 1px solid var(--border); flex: none; background: var(--surface-2); }
.mini-post .c { flex: 1; font-size: 12px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-post .n { font-size: 12px; font-weight: 680; white-space: nowrap; }

/* gaps */
.gap-row { display: flex; align-items: center; gap: 10px; padding: 5.5px 0; }
.gap-label { width: 118px; flex: none; font-size: 12px; color: var(--ink-2); }
.gap-bar { flex: 1; height: 8px; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.gap-bar i { display: block; height: 100%; background: var(--gc, var(--accent)); opacity: .8; border-radius: 5px; }
.gap-val { width: 80px; flex: none; font-size: 10.5px; color: var(--ink-3); text-align: right; }
.gap-findings { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.gap-findings li { font-size: 12px; color: var(--ink-2); line-height: 1.55; margin: 6px 0 6px 16px; }

/* week + queue */
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-bottom: 14px; }
.day-cell { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--sh-1); padding: 12px 13px; min-height: 96px; transition: transform .25s var(--ease), box-shadow .25s; }
.day-cell:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.day-cell .d { font-size: 10px; font-weight: 750; letter-spacing: 0.07em; text-transform: uppercase; color: var(--dc); }
.day-cell .t { font-family: var(--display); font-size: 13.5px; font-weight: 620; margin-top: 5px; line-height: 1.25; }
.day-cell .st { font-size: 9.5px; font-weight: 700; margin-top: 9px; display: inline-block; padding: 2px 8px; border-radius: 10px; }
.st.ready { color: var(--up); background: color-mix(in srgb, var(--up) 10%, transparent); }
.st.wait { color: var(--accent-hover); background: var(--accent-soft); }
.q-item { display: flex; align-items: center; gap: 13px; padding: 11px 0; }
.q-item + .q-item { border-top: 1px solid var(--border); }
.q-plat { font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-hover); width: 84px; flex: none; }
.q-body { flex: 1; min-width: 0; }
.q-title { font-size: 13px; font-weight: 640; }
.q-cap { font-size: 11.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.q-status { font-size: 10.5px; color: var(--up); font-weight: 680; white-space: nowrap; }

/* recs */
.recs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.rec { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--sh-2); padding: 16px 18px; display: flex; flex-direction: column; transition: transform .25s var(--ease), box-shadow .25s; }
.rec:hover { transform: translateY(-2px); box-shadow: var(--sh-3); }
.rec .t { font-family: var(--display); font-size: 15px; font-weight: 640; line-height: 1.3; }
.rec .why { font-size: 12px; color: var(--ink-2); line-height: 1.55; margin-top: 7px; }
.rec .ev { font-size: 11px; color: var(--ink-3); margin-top: 7px; font-style: italic; }
.rec .chips { display: flex; gap: 6px; margin-top: auto; padding-top: 12px; flex-wrap: wrap; }
.rec .rc { font-size: 10px; font-weight: 640; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--border); padding: 3px 9px; border-radius: 12px; }
.rec .rc b { color: var(--ink); }

/* empty states */
.empty {
  text-align: center; padding: 34px 20px;
  border: 1px dashed var(--border-strong); border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
}
.empty .e-title { font-family: var(--display); font-size: 16px; font-weight: 620; }
.empty .e-desc { font-size: 12.5px; color: var(--ink-2); margin: 7px auto 14px; max-width: 420px; line-height: 1.55; }

/* ── drawer ──────────────────────────────────────────────────────── */
.scrim { position: fixed; inset: 0; background: rgba(28,22,14,0.35); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .35s var(--ease); z-index: 60; }
.scrim.on { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: min(560px, 94vw);
  background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--sh-4);
  transform: translateX(102%); transition: transform .45s var(--ease); z-index: 70;
  display: flex; flex-direction: column;
}
.drawer.on { transform: translateX(0); }
.drawer-head { padding: 22px 26px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 13px; }
.drawer-head .avatar { width: 44px; height: 44px; flex: none; padding: 10px; color: var(--a); border-radius: 12px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--a) 15%, var(--surface)), color-mix(in srgb, var(--a) 5%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--a) 30%, var(--border)); }
.drawer-head h3 { font-family: var(--display); font-size: 20px; font-weight: 640; }
.drawer-head p { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.drawer-head .x { margin-left: auto; width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--border);
  background: transparent; color: var(--ink-2); cursor: pointer; font-size: 13px; }
.drawer-head .x:hover { color: var(--ink); }
.drawer-body { padding: 20px 26px 44px; overflow-y: auto; }
.drawer-body .summary { font-size: 13px; color: var(--ink-2); margin-bottom: 20px; line-height: 1.6; }
.block { margin-bottom: 24px; }
.block h4 { font-size: 10.5px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); margin-bottom: 10px; }
.card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 13px 15px; margin-bottom: 9px; }
.card .t { font-size: 13.5px; font-weight: 660; margin-bottom: 4px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card .d { font-size: 12.5px; color: var(--ink-2); line-height: 1.55; }
.card .src { font-size: 10px; font-weight: 680; color: var(--accent-hover); margin-top: 7px; text-transform: uppercase; letter-spacing: 0.05em; }
.tags { display: flex; flex-wrap: wrap; gap: 7px; }
.tag { font-size: 11px; font-weight: 620; padding: 5px 11px; border-radius: 14px; background: var(--accent-soft);
  color: var(--accent-hover); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); }
.tag .c { opacity: .65; margin-left: 5px; }
.hookline { display: flex; gap: 10px; align-items: flex-start; }
.hookline .d { flex: 1; min-width: 0; }
.hookline .num { color: var(--a, var(--accent)); font-family: var(--display); font-weight: 700; font-size: 14px; flex: none; }
.chip { font-size: 9.5px; font-weight: 680; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3);
  border: 1px solid var(--border); padding: 2px 7px; border-radius: 4px; margin-left: 8px; }
.post-row { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.post-row .pthumb { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; border: 1px solid var(--border); flex: none; background: var(--surface-2); }
.post-row .meta { flex: 1; min-width: 0; }
.post-row .cap { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post-row .sub { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.post-row .go { font-size: 11px; color: var(--ink-3); }
.day-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; }
.day-row + .day-row { border-top: 1px solid var(--border); }
.day-row .day { width: 40px; flex: none; font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dc); margin-top: 2px; }
.day-row .type { font-size: 13px; font-weight: 650; }
.day-row .idea { font-size: 11.5px; color: var(--ink-2); margin-top: 2px; }
.dm-card { border-left: 3px solid var(--a, var(--accent)); }
.dm-in { font-size: 12px; color: var(--ink-2); font-style: italic; margin-bottom: 8px; }
.dm-flag { font-size: 9.5px; font-weight: 720; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-hover);
  background: var(--accent-soft); padding: 2px 8px; border-radius: 10px; margin-left: 8px; }
.dm-draft { font-size: 12.5px; background: var(--surface); border: 1px dashed var(--border-strong); border-radius: 9px; padding: 10px 12px; line-height: 1.55;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.dm-draft > .copy-btn { flex: none; }

/* reusable "Copy" pill */
.copy-btn {
  flex: none; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px;
  padding: 4px 9px; cursor: pointer; transition: color .2s, border-color .2s, background .2s;
  align-self: flex-start;
}
.copy-btn:hover { color: var(--ink); border-color: var(--border-strong); }
.copy-btn.copied { color: var(--live); border-color: color-mix(in srgb, var(--live) 45%, var(--border)); background: color-mix(in srgb, var(--live) 12%, var(--surface-2)); }
.dm-note { font-size: 10.5px; color: var(--ink-3); margin-top: 7px; }
.safety-banner { border: 1px solid color-mix(in srgb, var(--up) 32%, var(--border)); background: color-mix(in srgb, var(--up) 6%, transparent);
  color: var(--ink-2); font-size: 12px; border-radius: var(--radius-sm); padding: 11px 13px; margin-bottom: 18px; line-height: 1.55; }
.safety-banner b { color: var(--up); }
.ap-detail-actions { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.reasons { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.reason-chip { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink-2);
  font-size: 11px; padding: 5px 11px; border-radius: 15px; cursor: pointer; transition: .2s; }
.reason-chip:hover { color: var(--down); border-color: var(--down); }
.edit-area { width: 100%; min-height: 74px; font: inherit; font-size: 12.5px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 9px; padding: 10px 12px; margin-top: 8px; resize: vertical; }

/* ── settings tabs ────────────────────────────────────────────────────
   Settings was one column of thirteen unrelated panels, and People — the only
   place workspace access is granted — sat third from the top of a page most
   people never scrolled. These are groups, not a new surface.

   THE STRIP *IS* ENGAGE'S TAB, not a copy of it. The markup carries
   `class="eg-tab set-tab"`, so the appearance comes from the one ruleset the
   app already had (.eg-tabs / .eg-tab, further down this file). Nothing about
   the look is redefined here.

   The first version of this DUPLICATED those declarations under .set-tab, and
   the duplicate is exactly how it broke: a browser holding a stylesheet from
   before that release found no .set-tab rules at all and painted five native
   <button>s — grey chrome, borders, sentence case — right next to an Engage
   strip that still looked correct, because .eg-tab had shipped releases
   earlier. A copy can be missing. Reuse cannot: any stylesheet new enough to
   render Engage renders these identically.

   `set-tab` survives only as the hook the tab controller queries and the tests
   pin — it carries no appearance of its own, deliberately. The one rule below
   is the only thing tabs did not already need: which pane is on screen.

   (An earlier draft also kept a `.set-tabs { margin-inline: 4px }` gutter here.
   It was dead on arrival — `.eg-tabs` sets `margin: 2px 0 18px` further down
   the file at equal specificity, so the later rule won and the gutter never
   applied. A rule that reads as if it does something is worse than no rule;
   Settings now sits exactly where Engage's strip sits, which is the point.) */
.set-pane[hidden] { display: none; }

/* ── settings & wizard forms ─────────────────────────────────────── */
.set-panel { margin-bottom: 14px; }
.field { margin-bottom: 15px; }
.field label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); margin-bottom: 6px; }
.field input[type="text"], .field input[type="number"], .field input[type="date"], .field textarea, .field select {
  width: 100%; font: inherit; font-size: 13.5px; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px;
  padding: 9px 12px; transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}
.field textarea { resize: vertical; }
.hint { display: block; font-size: 11px; color: var(--ink-3); margin-top: 5px; }

.swatches { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.swatch {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer; border: 0;
  background: var(--sw); position: relative;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.55), var(--sh-1);
  transition: transform .2s var(--ease), box-shadow .2s;
}
.swatch:hover { transform: scale(1.1); }
.swatch.on { box-shadow: inset 0 0 0 2.5px var(--surface), 0 0 0 2.5px var(--sw), var(--sh-2); }
.swatch.custom { display: grid; place-items: center; background: var(--surface-2); border: 1px dashed var(--border-strong); }
.swatch.custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.swatch.custom span { font-size: 15px; color: var(--ink-3); pointer-events: none; }

.seg { display: inline-flex; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; padding: 3px; }
.seg-b { border: 0; background: transparent; color: var(--ink-2); font-size: 12.5px; font-weight: 570; padding: 6px 15px; border-radius: 7px; cursor: pointer; transition: .2s; }
.seg-b.on { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }

.logo-row { display: flex; align-items: center; gap: 10px; }
.logo-preview { width: 44px; height: 44px; border-radius: 11px; border: 1px solid var(--border); background: var(--surface-2); display: grid; place-items: center; overflow: hidden; flex: none; }
.logo-preview img { width: 100%; height: 100%; object-fit: cover; }
.mono-prev { font-family: var(--display); font-size: 18px; font-weight: 650; color: var(--accent); }

.chips-edit { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.chip-x {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 570;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px; padding: 5px 6px 5px 12px;
}
.chip-x button { border: 0; background: var(--border); color: var(--ink-2); width: 17px; height: 17px; border-radius: 50%; cursor: pointer; font-size: 11px; line-height: 1; }
.chip-x button:hover { background: var(--down); color: #fff; }
.chip-add { display: flex; gap: 8px; }
.chip-add input { flex: 1; font: inherit; font-size: 13px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; padding: 8px 12px; color: var(--ink); }
.chip-add input:focus { outline: none; border-color: var(--accent); }

.toggle-row { display: flex; gap: 12px; align-items: flex-start; font-size: 12.5px; color: var(--ink-2); line-height: 1.55; cursor: pointer; }
.toggle-row b { color: var(--ink); }
.toggle-row input { width: 36px; height: 21px; appearance: none; background: var(--border-strong); border-radius: 12px; position: relative; cursor: pointer; transition: background .25s; flex: none; margin-top: 2px; }
.toggle-row input::after { content: ""; position: absolute; top: 2.5px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .25s var(--ease); box-shadow: var(--sh-1); }
.toggle-row input:checked { background: var(--up); }
.toggle-row input:checked::after { left: 17px; }

.savebar {
  position: sticky; bottom: 14px; margin-top: 18px;
  display: flex; align-items: center; justify-content: flex-end; gap: 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--sh-3); padding: 11px 14px; z-index: 30;
}
#page-settings { padding-bottom: 60px; }

/* settings helpers */
.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.chip-x.lock { padding-right: 12px; opacity: .85; }
.chip-rm { border: 0; background: var(--border); color: var(--ink-2); width: 20px; height: 20px; border-radius: 50%; cursor: pointer; font-size: 12px; line-height: 1; flex: none; }
.chip-rm:hover { background: var(--down); color: #fff; }

.comp-row { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.comp-row:last-of-type { border-bottom: 0; }
.comp-row.paused { opacity: .55; }
.comp-h { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comp-row select { font: inherit; font-size: 11.5px; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px; padding: 5px 7px; max-width: 150px; }
.comp-pause { border: 1px solid var(--border); background: var(--surface-2); color: var(--up); font-size: 10px; font-weight: 700; padding: 4px 9px; border-radius: 11px; cursor: pointer; flex: none; }
.comp-row.paused .comp-pause { color: var(--ink-3); }

.conn { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 10px; background: var(--surface-2); }
.conn.dim { opacity: .68; }
.conn-top { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.conn-status { font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 9px; border-radius: 10px; }
.conn-status.ok { color: var(--up); background: color-mix(in srgb, var(--up) 10%, transparent); }
.conn-status.soon { color: var(--ink-3); background: var(--surface); border: 1px solid var(--border); }
.conn-meta { font-size: 11.5px; color: var(--ink-2); margin-top: 6px; line-height: 1.5; }
.conn-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }

.notif-grid { font-size: 12px; }
.notif-head, .notif-row { display: grid; grid-template-columns: 1fr 74px 74px 74px; align-items: center; }
.notif-head { font-size: 9.5px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); padding-bottom: 7px; border-bottom: 1px solid var(--border); }
.notif-head span, .notif-row span { text-align: center; }
.notif-head span:first-child, .notif-row .nl { text-align: left; }
.notif-row { padding: 7px 0; border-bottom: 1px solid var(--border); }
.notif-row:last-child { border-bottom: 0; }
.notif-row .nl { font-size: 12px; color: var(--ink); }
.notif-row input { width: 15px; height: 15px; cursor: pointer; }
.notif-row input:disabled { opacity: .3; cursor: default; }

.wizard-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  display: grid; place-items: center; padding: 20px;
}
.wizard {
  width: min(520px, 94vw); background: var(--surface);
  border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--sh-4);
  padding: 30px 34px 26px; animation: pagein .45s var(--ease);
}
.wizard h2 { font-size: 26px; font-weight: 600; margin: 4px 0 6px; }
.wz-sub { font-size: 13px; color: var(--ink-2); margin-bottom: 20px; line-height: 1.5; }
.wz-dots { display: flex; gap: 6px; margin-bottom: 16px; }
.wz-dots i { width: 26px; height: 4px; border-radius: 3px; background: var(--border); transition: background .3s; }
.wz-dots i.on { background: var(--accent); }
.wz-actions { display: flex; gap: 10px; margin-top: 24px; align-items: center; }

/* ── adaptive onboarding (Phase 2A.1) ────────────────────────────────
   Reuses the wizard shell; adds the choice groups, the autosave status and
   the conflict dialog. Calm by default: nothing pulses, nothing celebrates. */
.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;
}
.wizard.onb { width: min(600px, 94vw); max-height: 88vh; overflow-y: auto; }
.wizard.onb .wz-body { display: grid; gap: 18px; }

.onb-group { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 6px 0 0; }
.onb-opt {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 9px 13px; border: 1px solid var(--border); border-radius: 11px;
  font-size: 12.5px; color: var(--ink-2); background: var(--surface-2);
  transition: border-color .18s var(--ease), color .18s var(--ease), background .18s var(--ease);
}
.onb-opt input { position: absolute; opacity: 0; pointer-events: none; }
.onb-opt:hover { border-color: var(--accent); color: var(--ink); }
/* SELECTED, BY THE CHECKBOX ITSELF AND NOT ONLY BY A CLASS.
   `.on` is written once, when the step is rendered from saved answers. Clicking
   a chip checks a real input and autosaves — the status line even said SAVED —
   but nothing re-rendered and nothing added the class, so a beta creator could
   click every option on the page and watch it stay grey. The input is
   `opacity: 0`, so its native checked state was invisible too: there was no
   surface anywhere that said "this one is chosen".
   `:has(input:checked)` reads the answer straight from the DOM, so the paint
   cannot drift from the state. `.on` is kept for the first render and for the
   one hard-coded chip that has no live input to read. */
.onb-opt.on,
.onb-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); font-weight: 600; }
.onb-opt:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.onb-opt.disabled { cursor: not-allowed; opacity: .55; }
.onb-opt.disabled:hover { border-color: var(--border); color: var(--ink-2); }
.onb-tag {
  font-family: var(--mono); font-size: 8.5px; font-style: normal; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--border);
  border-radius: 5px; padding: 1px 5px; margin-left: 5px;
}
.onb-opt.on .onb-tag,
.onb-opt:has(input:checked) .onb-tag { color: var(--accent-hover); border-color: var(--accent); }

.onb-status {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); opacity: 0; transition: opacity .2s var(--ease), color .2s var(--ease);
}
.onb-status:not(:empty) { opacity: 1; }
.onb-status.ok { color: var(--live); }
.onb-status.warn { color: var(--ink-2); }
.field.invalid input, .field.invalid textarea { border-color: var(--danger, #ef4444); }

.onb-conflict {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 20px;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.onb-conflict-card {
  width: min(420px, 92vw); background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--sh-4); padding: 24px 26px 20px;
}
.onb-conflict-card h3 { font-size: 17px; font-weight: 600; margin: 0 0 8px; }
.onb-conflict-card p { font-size: 13px; color: var(--ink-2); line-height: 1.55; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .onb-opt, .onb-status { transition: none; }
  .wizard.onb { animation: none; }
}
@media (max-width: 560px) {
  .wizard.onb { padding: 22px 18px 18px; border-radius: 16px; }
  .onb-opt { padding: 10px 12px; }              /* keep comfortable tap targets */
  .wz-actions { flex-wrap: wrap; }
}

/* ── team role sub-line + provenance tag ─────────────────────────── */
.agent .role-sub { font-size: 9.5px; color: var(--ink-3); margin-top: 2px; letter-spacing: 0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prov-tag { font-size: 9.5px; font-weight: 650; color: var(--accent-hover); background: var(--accent-soft);
  padding: 1px 7px; border-radius: 8px; margin-left: 6px; }

/* agent rename rows (settings) */
.agent-name-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.agent-name-row + .agent-name-row { border-top: 1px solid var(--border); }
.anr-ic { width: 30px; height: 30px; flex: none; padding: 6px; color: var(--a); border-radius: 8px;
  background: color-mix(in srgb, var(--a) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--a) 26%, var(--border)); }
.agent-name-row input { width: 128px; flex: none; font: inherit; font-size: 13px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; color: var(--ink); }
.anr-role { font-size: 11px; color: var(--ink-3); }

/* ── collaborations ──────────────────────────────────────────────── */
.collab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 13px; }
.collab-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--sh-2); padding: 16px 18px; cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s; }
.collab-card:hover { transform: translateY(-2px); box-shadow: var(--sh-3); }
.cc-top { display: flex; align-items: center; justify-content: space-between; }
.cc-status { font-size: 9.5px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3);
  background: var(--surface-2); border: 1px solid var(--border); padding: 3px 9px; border-radius: 10px; }
.cc-status.ok { color: var(--up); background: color-mix(in srgb, var(--up) 10%, transparent); border-color: transparent; }
.cc-name { font-family: var(--display); font-size: 16px; font-weight: 640; margin-top: 10px; }
.cc-meta { font-size: 11.5px; color: var(--ink-2); margin-top: 4px; }
.cc-foot { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.cc-foot .pend { color: var(--accent-hover); font-weight: 650; }

.gs-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 10px; }
.gs-mode { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 13px 14px; background: var(--surface-2); }
.gs-mode b { font-size: 13px; } .gs-mode span { display: block; font-size: 11.5px; color: var(--ink-2); margin-top: 4px; line-height: 1.45; }

/* import */
.imp-drop { border: 1.5px dashed var(--border-strong); border-radius: var(--radius-sm); padding: 22px; text-align: center;
  margin-bottom: 15px; transition: border-color .2s, background .2s; }
.imp-drop.over { border-color: var(--accent); background: var(--accent-soft); }
.imp-drop-in { font-size: 13px; color: var(--ink-2); }
.imp-actions { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.map-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 18px; }
.map-row { display: flex; align-items: center; gap: 10px; }
.map-label { width: 110px; flex: none; font-size: 12px; color: var(--ink-2); }
.map-row select { flex: 1; min-width: 0; font: inherit; font-size: 12px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 7px 9px; color: var(--ink); }

/* workspace tabs */
.ws-tabs { display: flex; align-items: center; gap: 4px; margin: 8px 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--border); flex-wrap: wrap; row-gap: 8px; }
.pl-open-mobile { display: none; }   /* desktop keeps the per-day pluses */
.ws-tab { border: 0; background: transparent; color: var(--ink-2); font-size: 13px; font-weight: 570; padding: 7px 13px;
  border-radius: 8px; cursor: pointer; transition: .2s; }
.ws-tab:hover { color: var(--ink); background: var(--surface-2); }
.ws-tab.on { background: var(--accent-soft); color: var(--accent-hover); font-weight: 680; }
.ws-badge { background: var(--accent); color: #fff; font-size: 10px; font-weight: 750; padding: 0 6px; border-radius: 9px; margin-left: 4px; }
.ws-note { font-size: 12px; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 13px; margin-bottom: 14px; line-height: 1.5; }

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.plan-table { width: 100%; border-collapse: collapse; font-size: 12px; background: var(--surface); }
.plan-table th { text-align: left; font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-3); padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--surface-2); white-space: nowrap; }
.plan-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--ink); vertical-align: top; max-width: 240px; }
.plan-table tr:last-child td { border-bottom: 0; }
.cell-link { color: var(--accent-hover); text-decoration: none; font-weight: 550; }
.cell-link:hover { text-decoration: underline; }
.cell-changed { background: color-mix(in srgb, var(--up) 8%, transparent); }
.cell-orig { display: block; font-size: 10.5px; color: var(--ink-3); text-decoration: line-through; margin-top: 3px; }

.rev-head { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.rev-ic { width: 34px; height: 34px; flex: none; padding: 7px; color: var(--a); border-radius: 9px;
  background: color-mix(in srgb, var(--a) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--a) 26%, var(--border)); }
.rev-head b { font-size: 14px; } .rev-role { display: block; font-size: 10.5px; color: var(--ink-3); }
.rev-find { display: flex; gap: 9px; font-size: 12.5px; color: var(--ink); line-height: 1.5; padding: 8px 0; border-top: 1px solid var(--border); }
.rev-find .rev-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; margin-top: 5px; background: var(--ink-3); }
.rev-find.warn .rev-dot { background: var(--accent); }
.rev-find.warn { color: var(--ink); }

.dec { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 11px; background: var(--surface); }
.dec.accepted { border-color: color-mix(in srgb, var(--up) 40%, var(--border)); }
.dec.rejected { opacity: .6; }
.dec-head { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.dec-ic { width: 26px; height: 26px; flex: none; padding: 5px; color: var(--a); border-radius: 7px;
  background: color-mix(in srgb, var(--a) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--a) 26%, var(--border)); }
.dec-agent { font-size: 12.5px; font-weight: 680; }
.dec-where { font-size: 11px; color: var(--ink-3); }
.dec-state { margin-left: auto; font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 8px; border-radius: 9px; }
.dec-state.accepted { color: var(--up); background: color-mix(in srgb, var(--up) 10%, transparent); }
.dec-state.rejected { color: var(--down); background: color-mix(in srgb, var(--down) 10%, transparent); }
.dec-state.later { color: var(--ink-3); background: var(--surface-2); }
.dec-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dec-col .dec-tag { font-size: 9.5px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); }
.dec-val { font-size: 12.5px; line-height: 1.5; margin-top: 5px; padding: 9px 11px; border-radius: 8px; }
.dec-val.old { background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-2); }
.dec-val.new { background: color-mix(in srgb, var(--up) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--up) 30%, var(--border)); }
.dec-reason { font-size: 11.5px; color: var(--ink-2); margin-top: 10px; line-height: 1.5; }
.dec-comment { font-size: 11.5px; color: var(--ink); margin-top: 8px; background: var(--surface-2); border-radius: 8px; padding: 7px 10px; }
.dec-actions { display: flex; gap: 7px; margin-top: 12px; flex-wrap: wrap; align-items: center; }

/* The live Overview's pipeline columns carry no handler (the fixture's do);
   cursor:pointer and a hover lift on them promised a click that did nothing. */
.pl-col:not([data-go]) { cursor: default; }
.pl-col:not([data-go]):hover { transform: none; }
.pop-menu { position: fixed; z-index: 170; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--sh-3); padding: 6px; min-width: 220px; }
.pop-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; background: transparent;
  color: var(--ink); font-size: 13px; padding: 9px 11px; border-radius: 7px; cursor: pointer; }
.pop-item:hover { background: var(--surface-2); }
.pop-item.soon { color: var(--ink-3); }
.soon-tag { margin-left: auto; font-size: 9px; font-weight: 750; text-transform: uppercase; color: var(--ink-3);
  border: 1px solid var(--border); padding: 1px 6px; border-radius: 8px; }

@media (max-width: 700px) { .dec-cmp, .map-grid, .gs-modes { grid-template-columns: 1fr; } }

/* ── avatars, profile button + menu ──────────────────────────────── */
.av { border-radius: 50%; object-fit: cover; border: 1px solid var(--border); display: inline-block; vertical-align: middle; background: var(--surface-2); }
.av-initial { display: inline-grid; place-items: center; border-radius: 50%; color: #fff; font-weight: 700;
  background: linear-gradient(150deg, var(--accent), var(--accent-hover)); border: 0; font-family: var(--display); }
.profile-btn { width: 36px; height: 36px; padding: 0; border: 1px solid var(--border); background: var(--surface); border-radius: 50%;
  cursor: pointer; box-shadow: var(--sh-1); display: grid; place-items: center; overflow: hidden; transition: .2s; }
.profile-btn:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.profile-btn .av { border: 0; }
.profile-menu { min-width: 232px; padding: 8px; }
.pm-head { display: flex; align-items: center; gap: 10px; padding: 8px 9px 12px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.pm-name { font-size: 13px; font-weight: 700; }
.pm-email { font-size: 11px; color: var(--ink-3); }
.pop-item.danger { color: var(--down); }
.pop-item.danger:hover { background: color-mix(in srgb, var(--down) 10%, transparent); }
.greet { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 12px; }
.greet .av { box-shadow: var(--sh-1); }
.avatar-preview { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2);
  display: grid; place-items: center; overflow: hidden; flex: none; }
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.avatar-preview .mono-prev { font-family: var(--display); font-size: 22px; font-weight: 650; color: var(--accent); }

/* ── sign-in screen ──────────────────────────────────────────────── */
.login-screen { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px;
  background: var(--bg); overflow: hidden; }
.login-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(680px 420px at 82% -8%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 60%),
    radial-gradient(560px 380px at -6% 108%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 55%); }
.login-card { position: relative; z-index: 1; width: min(400px, 94vw); background: var(--surface);
  border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--sh-4); padding: 34px 32px 26px; text-align: center; }
.login-logo { color: var(--accent); display: grid; place-items: center; margin-bottom: 14px; }
.login-title { font-size: 26px; font-weight: 600; letter-spacing: 0.03em; }
.login-sub { font-size: 12.5px; color: var(--ink-2); margin: 6px 0 22px; }
.login-field { display: block; text-align: left; margin-bottom: 13px; }
.login-field span { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); margin-bottom: 6px; }
.login-field input { width: 100%; font: inherit; font-size: 14px; color: var(--ink); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; }
.login-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.login-btn { width: 100%; margin-top: 4px; padding: 11px; }
.login-btn.ghost { margin-top: 9px; }
.login-note { font-size: 10.5px; color: var(--ink-3); margin-top: 16px; }

/* "Not synced yet" must not wear the live-green dot — the dot is the signal that
   real data landed. An unsynced workspace is waiting, not live. */
#synced.unsynced { color: var(--ink-3); }
#synced.unsynced::before { background: var(--ink-3); box-shadow: none; animation: none; }


/* the post-invite "check your email" block — no inputs, so it carries the whole
   message itself: what we sent, where, and the exact button to look for. */
/* NOTE: --ink / --ink-2 / --ink-3, not --text / --text-dim. The first draft used
   tokens that do not exist in this stylesheet; an undefined custom property fails
   SILENTLY — the text simply inherits and the check "does it render?" still says
   yes. Same class of bug as the undeclared width tokens that shipped an
   edge-to-edge marketing site. Use the tokens the login card already uses. */
.login-sent { text-align: center; padding: 4px 0 14px; }
.login-sent .ls-lead { margin: 0 0 8px; font-size: 15px; color: var(--ink); line-height: 1.5; }
.login-sent .ls-lead b { color: var(--ink); font-weight: 600; word-break: break-word; }
.login-sent .ls-sub { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }
.login-sent .ls-sub b { color: var(--ink); font-weight: 600; }

/* the 3-step request form — reuses the wizard's dot language, so the product's
   two multi-step flows read as the same product. Tokens verified to exist:
   --border, --accent, --ink, --surface-2, --ease all resolve. (An undefined
   custom property fails SILENTLY — the rule renders, wrong, and looks fine.) */
.rq-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 14px; }
.rq-dots i { width: 26px; height: 3px; border-radius: 2px; background: var(--border); transition: background .3s var(--ease); }
.rq-dots i.on { background: var(--accent); }
.rq-title { font-size: 22px; margin: 2px 0 6px; text-align: center; color: var(--ink); }
.login-card textarea { width: 100%; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
  color: var(--ink); font: inherit; font-size: 16px; padding: 10px 12px; resize: vertical; min-height: 76px; }
.login-card textarea:focus { outline: none; border-color: var(--accent); }


/* ── notes ───────────────────────────────────────────────────────── */
.notes-wrap { display: grid; grid-template-columns: 260px 1fr; gap: 14px; min-height: 460px; }
.notes-list { display: flex; flex-direction: column; }
.note-item { display: block; text-align: left; width: 100%; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 11px 13px; margin-bottom: 8px; cursor: pointer; transition: .2s; }
.note-item:hover { border-color: var(--border-strong); }
.note-item.on { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--accent-soft); }
.ni-title { display: block; font-size: 13px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ni-snip { display: block; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.ni-date { display: block; font-size: 10px; color: var(--ink-3); margin-top: 5px; }
.notes-editor { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--sh-2);
  padding: 20px 22px; display: flex; flex-direction: column; }
.note-title-in { font-family: var(--display); font-size: 22px; font-weight: 620; color: var(--ink); border: 0; background: transparent;
  width: 100%; padding: 0 0 10px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.note-title-in:focus { outline: none; border-color: var(--accent); }
.note-body-in { flex: 1; min-height: 300px; font: inherit; font-size: 14px; line-height: 1.65; color: var(--ink);
  border: 0; background: transparent; resize: none; width: 100%; }
.note-body-in:focus { outline: none; }
.note-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }

@media (max-width: 760px) { .notes-wrap { grid-template-columns: 1fr; } }

/* toast + foot */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(70px);
  background: var(--ink); color: var(--bg); font-size: 12.5px; font-weight: 620;
  padding: 10px 18px; border-radius: 11px; box-shadow: var(--sh-3);
  /* ABOVE .login-screen (z-index 200), which is opaque and covers the
     viewport during the build. A toast fired behind it — the "we couldn't
     finish analyzing your account" notice, in particular — was painted where
     nobody could read it, which is the same as not sending it. */
  opacity: 0; transition: .35s var(--ease); z-index: 260; pointer-events: none; }
/* pointer-events returns WITH visibility. The base rule keeps a hidden toast
   from blocking clicks — but it also made every toast ACTION dead: "Saved to
   Content as an idea. [Open] [Undo]" rendered buttons no human could press.
   The no-bypass journey lane caught it; API-driven lanes never could. */
.toast.on { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.foot { text-align: center; font-size: 11px; color: var(--ink-3); margin-top: 40px; }
.foot b { color: var(--ink-2); font-weight: 620; }

.reveal { opacity: 0; transform: translateY(10px); animation: rise .6s var(--ease) forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ── responsive ──────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .team { grid-template-columns: repeat(3, 1fr); }
  .intel { grid-template-columns: repeat(2, 1fr); }
  .cols, .gm { grid-template-columns: 1fr; }
  .recs { grid-template-columns: 1fr; }
  .week { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 760px) {
  .team { grid-template-columns: 1fr; }
  .intel { grid-template-columns: 1fr; }
  .week { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } .reveal, .page.on { opacity: 1; transform: none; } }

/* ═══════════════════════════════════════════════════════════════════
   PREMIUM SKIN — frosted glass surfaces, specular edges, ambient glow.
   Appended last so it re-skins existing components without touching
   layout. Every card floats as glass over the ambient mesh background.
   ═══════════════════════════════════════════════════════════════════ */

.side, .topbar, .hero, .panel, .agent, .icard, .rec, .day-cell, .collab-card,
.notes-editor, .drawer, .login-card, .side-note, .stat, .conn, .ap-item {
  background: var(--glass);
  backdrop-filter: blur(var(--blur)) saturate(1.6);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.6);
  border: 1px solid var(--border);
}
/* specular top edge — light catching the glass */
.hero, .panel, .agent, .icard, .rec, .collab-card, .notes-editor, .drawer, .login-card {
  box-shadow: var(--sh-2), inset 0 1px 0 var(--glass-hi);
}

.side { border-width: 0 1px 0 0; border-radius: 0; }
.topbar {
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  border-width: 0 0 1px 0; border-radius: 0;
}

/* hero: a touch more presence + accent wash */
.hero {
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 46%),
    var(--glass);
}

/* the agent cards — futuristic "unit online" feel */
.agent { background: var(--glass); overflow: hidden; }
.agent::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--a) 60%, transparent), transparent);
  opacity: .5;
}
.agent:hover {
  border-color: color-mix(in srgb, var(--a) 50%, var(--border));
  box-shadow: var(--sh-3), inset 0 1px 0 var(--glass-hi),
              0 0 0 1px color-mix(in srgb, var(--a) 22%, transparent),
              0 18px 50px color-mix(in srgb, var(--a) 22%, transparent);
}
.agent .avatar {
  box-shadow: 0 0 18px color-mix(in srgb, var(--a) 30%, transparent), inset 0 1px 0 var(--glass-hi);
}
.agent .state i { box-shadow: 0 0 8px color-mix(in srgb, var(--a) 90%, transparent); }

/* hover glow for other interactive cards */
.rec:hover, .collab-card:hover, .icard:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  box-shadow: var(--sh-3), inset 0 1px 0 var(--glass-hi), 0 14px 40px var(--glow);
}
.day-cell:hover { box-shadow: var(--sh-2), inset 0 1px 0 var(--glass-hi), 0 8px 22px var(--glow); }

/* primary actions glow; active states get accent light */
.btn.primary { box-shadow: 0 2px 10px var(--glow), inset 0 1px 0 rgba(255,255,255,0.25); }
.btn.primary:hover { box-shadow: 0 6px 20px var(--glow), inset 0 1px 0 rgba(255,255,255,0.3); }
.nav-chip { backdrop-filter: blur(10px); }
.pulse-dot { box-shadow: 0 0 9px color-mix(in srgb, var(--live) 85%, transparent); }
.nav-item.on { box-shadow: inset 0 0 0 1px var(--border), 0 0 20px -6px var(--glow); }

/* stat / metric numbers: crisp, engineered */
.icard .v, .stat .v, .bar-num, .agent .metric .mv { text-shadow: 0 1px 0 var(--glass-hi); }

/* menus + toast as glass */
.pop-menu, .toast {
  background: var(--glass); backdrop-filter: blur(var(--blur)) saturate(1.6);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.6);
  border: 1px solid var(--border); box-shadow: var(--sh-3), inset 0 1px 0 var(--glass-hi);
}
.toast { background: color-mix(in srgb, var(--ink) 92%, transparent); color: var(--bg); }

/* drawer: stronger glass so content stays legible */
.drawer { background: color-mix(in srgb, var(--surface) 82%, transparent); }

/* login card: premium frosted panel */
.login-card { background: color-mix(in srgb, var(--surface) 78%, transparent); }

/* inputs sit on glass */
.field input, .field textarea, .field select, .chip-add input, .login-field input,
.note-title-in, .note-body-in, .edit-area {
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  backdrop-filter: blur(6px);
}

/* nav-btn glass */
.nav-btn, .profile-btn { backdrop-filter: blur(10px); background: color-mix(in srgb, var(--surface) 60%, transparent); }

/* sidebar brand name in serif keeps its weight on glass */
.side-brand h1 { text-shadow: 0 1px 0 var(--glass-hi); }

/* ═══════════════════════════════════════════════════════════════════
   LIVING STUDIO — agent activity + Agent Console
   ═══════════════════════════════════════════════════════════════════ */

/* agents visibly "at work" (paused when tab hidden / reduced-motion) */
@media (prefers-reduced-motion: no-preference) {
  .agent::before {
    background: linear-gradient(90deg, transparent 0%,
      color-mix(in srgb, var(--a) 75%, transparent) 50%, transparent 100%);
    background-size: 55% 100%; background-repeat: no-repeat;
    opacity: .9; animation: agentSweep 5.5s var(--ease) infinite;
  }
  .agent:nth-child(2)::before { animation-delay: .8s; }
  .agent:nth-child(3)::before { animation-delay: 1.6s; }
  .agent:nth-child(4)::before { animation-delay: 2.4s; }
  .agent:nth-child(5)::before { animation-delay: 3.2s; }
  @keyframes agentSweep { 0% { background-position: -60% 0; } 55%,100% { background-position: 170% 0; } }
  .agent .avatar { animation: avatarBreathe 3.4s ease-in-out infinite; }
  @keyframes avatarBreathe {
    0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--a) 30%, transparent), inset 0 1px 0 var(--glass-hi); }
    50% { box-shadow: 0 0 16px 2px color-mix(in srgb, var(--a) 40%, transparent), inset 0 1px 0 var(--glass-hi); }
  }
  /* the live status dot emits a soft data-pulse */
  .agent .state i { animation: dotPulse 2.6s ease-in-out infinite; }
  @keyframes dotPulse {
    0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--a) 70%, transparent); opacity: 1; }
    70% { box-shadow: 0 0 0 6px transparent; opacity: .5; }
  }
}
body.anim-paused *, body.anim-paused *::before, body.anim-paused *::after { animation-play-state: paused !important; }

/* Ask-the-team button */
.ask-btn { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600;
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.ask-btn:hover { border-color: var(--accent); box-shadow: 0 0 16px -4px var(--glow); }
.ask-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--live);
  box-shadow: 0 0 8px var(--live); animation: dotPulse 2.4s ease-in-out infinite; }

/* ── the console: a floating command/chat palette ── */
.console-scrim { position: fixed; inset: 0; z-index: 150; display: grid; place-items: start center;
  padding: 8vh 20px; background: color-mix(in srgb, var(--bg) 55%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); }
.console-scrim { visibility: hidden; transition: opacity .3s var(--ease), visibility 0s .3s; }
.console-scrim.on { opacity: 1; pointer-events: auto; visibility: visible; transition: opacity .3s var(--ease); }
.console { width: min(640px, 96vw); max-height: 88vh; height: 680px; display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  backdrop-filter: blur(30px) saturate(1.7); -webkit-backdrop-filter: blur(30px) saturate(1.7);
  border: 1px solid var(--border-strong); border-radius: 20px;
  box-shadow: var(--sh-4), inset 0 1px 0 var(--glass-hi); overflow: hidden; }
.console-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 12px; }
.console-title { font-family: var(--display); font-size: 17px; font-weight: 620; }
.console-head .x { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--ink-2); cursor: pointer; }
.console-agents { display: flex; gap: 7px; padding: 0 18px 12px; overflow-x: auto; border-bottom: 1px solid var(--border); }
.console-chip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--ink-2);
  font-size: 12px; font-weight: 560; padding: 6px 11px 6px 8px; border-radius: 20px; transition: .2s; }
.console-chip svg, .console-chip .cc-team { width: 15px; height: 15px; color: var(--a); flex: none; }
.console-chip .cc-team { font-size: 11px; line-height: 15px; text-align: center; }
.console-chip:hover { color: var(--ink); }
.console-chip.on { color: var(--ink); border-color: color-mix(in srgb, var(--a) 55%, var(--border));
  background: color-mix(in srgb, var(--a) 12%, var(--surface)); box-shadow: 0 0 14px -5px color-mix(in srgb, var(--a) 80%, transparent); }
/* overscroll-behavior: contain — without this, the moment the message list hits
   its top or bottom the wheel CHAINS to the page underneath and the whole
   dashboard scrolls behind the modal. `contain` keeps the scroll where the
   pointer is. `position: relative` so offsetTop inside here is measured against
   this box, not .console. */
.console-msgs {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  position: relative;
  padding: 16px 18px; display: flex; flex-direction: column; gap: 12px;
  min-height: 200px;
}
/* the scrim scrolls too if the modal is ever taller than the viewport */
.console-scrim { overscroll-behavior: contain; }
/* flex: none — THIS is what was cutting the agents' replies off, and no amount of
   scroll maths was ever going to fix it. .console-msgs is a COLUMN flex container,
   and flex items default to flex-shrink:1. So the moment the conversation got taller
   than the box, flexbox SQUASHED each message below its content height and the text
   simply spilled out of the invisible overflow. A reply measured 190px tall while
   its own body was 296px. Messages must never shrink. */
.msg { display: flex; gap: 10px; max-width: 92%; flex: none; }
.msg.user { align-self: flex-end; }
.msg-av { width: 28px; height: 28px; flex: none; padding: 6px; border-radius: 8px; color: var(--a);
  background: color-mix(in srgb, var(--a) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--a) 30%, var(--border)); }
.msg-av .cc-team, .cc-team { display: inline-grid; place-items: center; }
.msg-body { font-size: 13px; line-height: 1.6; padding: 10px 13px; border-radius: 13px;
  background: var(--surface-2); border: 1px solid var(--border); border-top-left-radius: 4px; }
.msg.user .msg-body { background: var(--accent); color: var(--accent-ink); border: 0; border-top-left-radius: 13px; border-top-right-radius: 4px; }
.msg-body .ac-a { font-weight: 700; color: var(--a); }
.msg-body .ac-q { font-weight: 700; color: var(--ink-3); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.msg-body .ac-hint { font-size: 11px; color: var(--ink-3); margin-top: 7px; }
.console-quick { display: flex; gap: 7px; padding: 10px 18px; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--border); }
.qchip { font-size: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--ink-2);
  padding: 6px 12px; border-radius: 16px; cursor: pointer; transition: .2s; }
.qchip:hover { color: var(--ink); border-color: var(--border-strong); }
.qchip.cmd { color: var(--accent-hover); border-color: color-mix(in srgb, var(--accent) 24%, var(--border)); background: var(--accent-soft); }
.qsep { width: 1px; height: 18px; background: var(--border); margin: 0 2px; }
.console-input { display: flex; gap: 9px; padding: 12px 18px; }
.console-input input { flex: 1; font: inherit; font-size: 14px; color: var(--ink);
  background: color-mix(in srgb, var(--surface) 60%, transparent); border: 1px solid var(--border-strong);
  border-radius: 11px; padding: 11px 14px; }
.console-input input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.console-note { font-size: 10.5px; color: var(--ink-3); padding: 0 18px 14px; }

/* ═══════════════════════════════════════════════════════════════════
   THE PRODUCTION LINE — content moving through the studio
   ═══════════════════════════════════════════════════════════════════ */
.pipeline-wrap { position: relative; }
/* right-edge fade = "there's more, scroll →". Hidden once scrolled to the end. */
.pipeline-wrap::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 16px; width: 64px;
  background: linear-gradient(to right, transparent, var(--bg));
  pointer-events: none; opacity: 1; transition: opacity .2s ease; border-radius: 0 14px 14px 0;
}
.pipeline-wrap.at-end::after { opacity: 0; }
/* a small nudge arrow that pulses to advertise the scroll, fades at the end */
.pipeline-wrap::before {
  content: "›"; position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
  font: 700 22px/1 var(--mono); color: var(--accent); z-index: 2; pointer-events: none;
  opacity: .8; animation: plNudge 1.6s ease-in-out infinite; transition: opacity .2s ease;
}
.pipeline-wrap.at-end::before { opacity: 0; }
@keyframes plNudge { 0%,100% { transform: translateY(-50%) translateX(0); } 50% { transform: translateY(-50%) translateX(4px); } }
.pipeline {
  display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding: 4px 2px 14px;
  scrollbar-width: thin;
}
.pl-col {
  flex: 1 0 148px; min-width: 148px; cursor: pointer;
  background: var(--glass); backdrop-filter: blur(var(--blur)) saturate(1.6);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.6);
  border: 1px solid var(--border); border-radius: 14px; padding: 12px 11px;
  box-shadow: var(--sh-1), inset 0 1px 0 var(--glass-hi);
  transition: transform .25s var(--ease), box-shadow .25s, border-color .25s;
}
.pl-col:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  box-shadow: var(--sh-3), inset 0 1px 0 var(--glass-hi), 0 12px 34px var(--glow); }
.pl-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.pl-name { font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); }
.pl-count { font-family: var(--display); font-size: 15px; font-weight: 640; color: var(--ink);
  min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; }
.pl-caps { display: flex; flex-direction: column; gap: 6px; }
.pl-cap {
  display: flex; align-items: center; gap: 7px; padding: 7px 9px; border-radius: 9px;
  background: color-mix(in srgb, var(--a) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--a) 22%, var(--border));
  border-left: 2px solid var(--a);
  opacity: 0; animation: capIn .5s var(--ease) forwards;
}
.pl-caps .pl-cap:nth-child(2) { animation-delay: .06s; }
.pl-caps .pl-cap:nth-child(3) { animation-delay: .12s; }
@keyframes capIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.pl-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--a); flex: none;
  box-shadow: 0 0 7px color-mix(in srgb, var(--a) 90%, transparent); }
.pl-label { font-size: 11px; font-weight: 550; color: var(--ink); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.pl-metric { font-family: var(--display); font-size: 11px; font-weight: 640; color: var(--a); flex: none; }
.pl-empty { font-size: 12px; color: var(--ink-3); padding: 6px 2px; }
.pl-more { font-size: 10px; color: var(--ink-3); padding: 3px 2px 0; }
/* the flowing connector between stages */
.pl-flow { flex: 0 0 22px; align-self: center; height: 2px; position: relative; overflow: hidden;
  background: var(--border); border-radius: 2px; margin-top: 8px; }
@media (prefers-reduced-motion: no-preference) {
  .pl-flow::after { content: ""; position: absolute; inset: 0; width: 40%;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    animation: flowMove 2.4s linear infinite; }
  @keyframes flowMove { from { transform: translateX(-120%); } to { transform: translateX(320%); } }
}
@media (max-width: 900px) { .pl-flow { display: none; } .pl-col { flex: 1 0 44%; } }

/* ═══════════════════════════════════════════════════════════════════
   v11 — mission core, daily briefing, metallic edges
   ═══════════════════════════════════════════════════════════════════ */

/* metallic top edge on the marquee surfaces */
.hero, .mission-core, .console, .login-card, .brief-card { position: relative; }
.hero::after, .mission-core::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 1px 0 var(--edge), inset 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent);
}

/* ── mission core: the studio's power source ── */
.mission-core {
  display: flex; align-items: center; gap: 30px; margin-bottom: 18px; padding: 24px 30px;
  border-radius: 22px; overflow: hidden;
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 12%, var(--glass)) 0%, var(--glass) 46%);
  border: 1px solid var(--border-strong);
  box-shadow: var(--sh-4), inset 0 1px 0 var(--glass-hi);
  backdrop-filter: blur(var(--blur)) saturate(1.7); -webkit-backdrop-filter: blur(var(--blur)) saturate(1.7);
}
.mc-ring { position: relative; width: 178px; height: 178px; flex: none; display: grid; place-items: center; }
.mc-svg { width: 152px; height: 152px; transform: rotate(-90deg); }
.mc-track { fill: none; stroke: color-mix(in srgb, var(--ink-3) 30%, transparent); stroke-width: 6; }
.mc-arc { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round;
  transition: stroke-dashoffset 1.5s var(--ease); filter: drop-shadow(0 0 7px var(--glow)); }
.mc-ring-c { position: absolute; text-align: center; }
.mc-pct { font-family: var(--display); font-size: 36px; font-weight: 640; line-height: 1; }
.mc-pct::after { content: "%"; font-size: 17px; margin-left: 1px; color: var(--ink-2); }
.mc-pct-l { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); margin-top: 4px; }
.mc-orbit { position: absolute; inset: 0; pointer-events: none; }
.mc-orbit::before { content: ""; position: absolute; inset: 4px; border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--ink-3) 35%, transparent); }
@media (prefers-reduced-motion: no-preference) { .mc-orbit::before { animation: mcspin 34s linear infinite; } }
@keyframes mcspin { to { transform: rotate(360deg); } }
.mc-agent { position: absolute; top: 50%; left: 50%; width: 0; height: 0; transform: rotate(var(--ang)) translate(86px); }
.mc-agent-i { position: absolute; width: 28px; height: 28px; margin: -14px; padding: 6px; border-radius: 9px;
  color: var(--ac); background: color-mix(in srgb, var(--ac) 15%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--ac) 38%, var(--border));
  transform: rotate(calc(-1 * var(--ang)));
  box-shadow: 0 0 14px color-mix(in srgb, var(--ac) 40%, transparent), inset 0 1px 0 var(--glass-hi); }
.mc-body { flex: 1; min-width: 0; }
.mc-name { font-size: 27px; font-weight: 600; margin: 7px 0 5px; letter-spacing: -0.02em; }
.mc-stats { display: flex; gap: 28px; margin-top: 18px; flex-wrap: wrap; }
.mc-stat .mc-v { font-family: var(--display); font-size: 26px; font-weight: 640; line-height: 1; }
.mc-stat .mc-l { font-size: 10px; color: var(--ink-3); margin-top: 5px; text-transform: uppercase; letter-spacing: 0.06em; }
@media (max-width: 760px) { .mission-core { flex-direction: column; text-align: center; } .mc-stats { justify-content: center; } }

/* ── daily briefing ── */
.briefing { position: fixed; inset: 0; z-index: 220; display: grid; place-items: center; text-align: center;
  background: var(--bg); overflow: hidden; }
.brief-bg { position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(60vw 50vh at 78% -10%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 58%),
    radial-gradient(55vw 50vh at 6% 8%, color-mix(in srgb, #6D5DFF 20%, transparent), transparent 55%); }
.brief-card { position: relative; z-index: 1; max-width: 560px; padding: 40px 30px; }
.brief-logo { color: var(--accent); display: grid; place-items: center; margin-bottom: 24px; }
.brief-line { opacity: 0; transform: translateY(12px); animation: briefIn .8s var(--ease) forwards; }
.brief-line.l1 { font-family: var(--display); font-size: clamp(32px, 5.2vw, 48px); font-weight: 560; letter-spacing: -0.02em; line-height: 1.05; }
.brief-line.l2, .brief-line.l3, .brief-line.l4 { font-size: 17px; color: var(--ink-2); margin-top: 15px; line-height: 1.5; }
.brief-line b { color: var(--ink); font-weight: 700; }
.l1 { animation-delay: .1s; } .l2 { animation-delay: .55s; } .l3 { animation-delay: 1s; } .l4 { animation-delay: 1.45s; }
.brief-go { margin-top: 30px; padding: 12px 30px; opacity: 0; animation: briefIn .8s var(--ease) 1.9s forwards; }
.brief-skip { font-size: 11px; color: var(--ink-3); margin-top: 16px; opacity: 0; animation: briefIn .8s var(--ease) 2.2s forwards; }
@keyframes briefIn { to { opacity: 1; transform: none; } }
.briefing.out { opacity: 0; transition: opacity .4s var(--ease); }
@media (prefers-reduced-motion: reduce) { .brief-line, .brief-go, .brief-skip { opacity: 1; transform: none; animation: none; } }

/* ═══════════════════════════════════════════════════════════════════
   TYPE BRAND — mono readouts (data) + HUD micro-labels. The command-
   center signal: numbers and labels are monospace; words are grotesk.
   ═══════════════════════════════════════════════════════════════════ */
.tnum, .mc-pct, .mc-v, .icard .v, .stat .v, .agent .metric .mv, .pl-count,
.pl-metric, .bar-num, .nav-count, .ws-badge {
  font-family: var(--mono); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.02em;
}
/* HUD micro-labels — uppercase mono with wide tracking */
.kicker, .g-label, .pl-name, .mc-pct-l, .mc-l, .icard .k, .conn-status, .cc-status,
.ap-kind, .dec-tag, .rev-role, .day-cell .d, .day-row .day, .notif-head, .field label,
.side-note b, .conn-status.soon, .plat .soon {
  font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.1em;
}
/* nav + platform switcher read as system controls */
.nav-item, .plat, .ask-btn, .nav-btn, .console-title { font-family: var(--mono); letter-spacing: 0.01em; }
.nav-item { font-size: 12.5px; letter-spacing: 0.02em; }
/* display grotesk keeps its own tight tracking on the big moments */
.hero-title, .mc-name, .login-title, .brief-line.l1 { font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════
   WOW pass — power-on boot, pointer-reactive glass, thinking replies
   ═══════════════════════════════════════════════════════════════════ */

/* pointer-reactive tilt + glare */
.agent, .icard, .rec, .collab-card, .mission-core, .hero { transform-style: preserve-3d; will-change: transform; }
.tilting { transition: transform .08s linear !important; }
.icard, .rec, .collab-card { position: relative; }
.icard::after, .rec::after, .collab-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 20%, transparent), transparent 60%);
  opacity: 0; transition: opacity .3s var(--ease); mix-blend-mode: soft-light;
}
.icard.tilting::after, .rec.tilting::after, .collab-card.tilting::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .tilting { transform: none !important; } }

/* power-on boot */
.boot { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: var(--bg); overflow: hidden; }
.boot-bg { position: absolute; inset: 0;
  background:
    radial-gradient(50vw 44vh at 50% 30%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 60%),
    radial-gradient(46vw 40vh at 18% 90%, color-mix(in srgb, #6D5DFF 22%, transparent), transparent 58%);
  animation: bootPulse 2.6s ease-in-out infinite; }
@keyframes bootPulse { 0%,100% { opacity: .7; } 50% { opacity: 1; } }
.boot-core { position: relative; z-index: 1; width: min(420px, 90vw); text-align: center; }
.boot-logo { color: var(--accent); display: grid; place-items: center; margin-bottom: 16px;
  filter: drop-shadow(0 0 18px var(--glow)); animation: bootLogo 2.4s ease-in-out infinite; }
@keyframes bootLogo { 0%,100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.06); opacity: 1; } }
.boot-name { font-size: 30px; font-weight: 700; letter-spacing: 0.14em; margin-bottom: 22px; }
.boot-lines { text-align: left; min-height: 132px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); }
.boot-line { padding: 3px 0; opacity: 0; transform: translateX(-6px); animation: bootLine .35s var(--ease) forwards; }
.boot-line:last-child { color: var(--ink); font-weight: 600; }
.boot-tick { color: var(--accent); margin-right: 9px; }
@keyframes bootLine { to { opacity: 1; transform: none; } }
.boot-bar { height: 2px; border-radius: 2px; background: var(--border); margin-top: 18px; overflow: hidden; }
.boot-bar i { display: block; height: 100%; width: 0; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover)); box-shadow: 0 0 10px var(--glow);
  transition: width .32s var(--ease); }
.boot.out { opacity: 0; transition: opacity .5s var(--ease); }

/* console "thinking" typing dots + reveal */
.typing { display: inline-flex; gap: 4px; align-items: center; padding: 3px 0; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--a, var(--accent)); opacity: .4; animation: typing 1.1s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .18s; } .typing i:nth-child(3) { animation-delay: .36s; }
@keyframes typing { 0%,100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.msg-av.thinking { animation: avatarBreathe 1.4s ease-in-out infinite; }
.reveal-msg { animation: msgReveal .4s var(--ease); }
@keyframes msgReveal { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ═══════════════════════════════════════════════════════════════════
   MOBILE — off-canvas nav drawer + bottom tab bar (thumb-first)
   Desktop hides these; ≤820px switches to the mobile shell.
   ═══════════════════════════════════════════════════════════════════ */
.hamburger, .topbar-brand, .mobile-tabs, .nav-scrim { display: none; }

@media (max-width: 820px) {
  .shell { display: block; }
  .main { padding: 0 clamp(14px, 4vw, 20px) 96px; }

  /* topbar becomes a compact app header */
  .topbar { gap: 10px; padding: 12px 4px; top: 0; }
  .hamburger { display: grid; place-items: center; width: 38px; height: 38px; flex: none;
    border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--ink); cursor: pointer; }
  .hamburger .li { width: 20px; height: 20px; }
  .topbar-brand { display: block; font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: 0.06em; }
  .platforms, .ask-btn, #exportBtn, .synced, #approvalChip { display: none; }
  .topbar .theme-toggle, .topbar #themeToggle { display: none; }

  /* sidebar → off-canvas drawer */
  .side { display: flex !important; position: fixed; top: 0; left: 0; bottom: 0; height: 100dvh; width: 284px; z-index: 160;
    padding: 20px 14px; border-right: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(26px) saturate(1.6); -webkit-backdrop-filter: blur(26px) saturate(1.6);
    box-shadow: var(--sh-4); transform: translateX(-104%); transition: transform .38s var(--ease); overflow-y: auto; }
  .side.open { transform: none; }
  .side-nav { gap: 4px; }
  .nav-item { padding: 12px 14px; font-size: 14px; }
  .nav-scrim { display: block; position: fixed; inset: 0; z-index: 150; background: rgba(0,0,0,.45);
    backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); }
  .nav-scrim.on { opacity: 1; pointer-events: auto; }

  /* bottom tab bar — primary thumb navigation */
  .mobile-tabs { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
    justify-content: space-around; align-items: flex-end; gap: 2px;
    padding: 9px 8px calc(9px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--surface) 85%, transparent);
    backdrop-filter: blur(24px) saturate(1.7); -webkit-backdrop-filter: blur(24px) saturate(1.7);
    border-top: 1px solid var(--border); box-shadow: 0 -6px 24px rgba(0,0,0,.12); }
  .mtab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative;
    border: 0; background: transparent; cursor: pointer; padding: 3px 2px;
    color: var(--ink-3); font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.06em; text-transform: uppercase; }
  .mtab .mti { width: 23px; height: 23px; }
  .mtab.on { color: var(--accent); }
  .mtab.center .mti { width: 46px; height: 46px; margin-top: -20px; padding: 12px; border-radius: 50%;
    color: #fff; background: linear-gradient(150deg, var(--accent), var(--accent-hover));
    box-shadow: 0 8px 22px var(--glow), inset 0 1px 0 rgba(255,255,255,.3); }
  .mtab.center { color: var(--accent); }
  .mbadge { position: absolute; top: -2px; right: 24%; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px;
    background: var(--accent); color: #fff; font-family: var(--mono); font-size: 8.5px; display: grid; place-items: center;
    box-shadow: 0 0 0 2px var(--surface); }

  /* comfortable spacing + no cursor-tilt jank on touch */
  .hero { padding: 22px; }
  .mission-core { padding: 22px; gap: 20px; }
  /* STACK, don't squeeze. .section-head is a baseline-aligned flex row, which
     works when the heading is short. "What's working in your space" wraps to
     three lines at 390px and the subheading was pushed into a narrow column
     beside it, the two colliding. On a phone the heading, its explanation and
     any action belong on separate lines. */
  .section-head {
    margin: 20px 2px 10px;
    flex-direction: column; align-items: flex-start; gap: 6px;
  }
  .section-head h2 { max-width: 100%; }
  .section-head span { font-size: 12px; line-height: 1.5; max-width: 100%; }
  .savebar { bottom: 84px; }
  .console-scrim { padding: 5vh 12px; align-items: end; }
  .console { max-height: 86vh; }
  .drawer { width: 100vw; }
}

@media (max-width: 480px) {
  .stats, .cols, .recs, .duo, .ops, .two-up { grid-template-columns: 1fr !important; }
  .week { grid-template-columns: repeat(2, 1fr); }
  .hero-title { font-size: clamp(30px, 8vw, 40px); }
  /* THE LABEL IS THE ACCESSIBLE NAME. display:none removed it from the
     accessibility tree as well as the screen, so below 480px the whole bottom
     navigation became five unnamed icons. Visually hidden keeps the name. */
  .mtab .label-full {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .mtab { min-height: 44px; }   /* was ~29px — under the 44px touch minimum */
  /* EVERY PRIMARY CONTROL IS A TARGET. Measured on a phone: .btn 34px,
     .btn.sm 27-29px, the ✕ buttons 27-32px, "Skip the tour" 16px. */
  .btn, .btn.sm, .linklike { min-height: 40px; }
  .drawer-head .x, .console-head .x, .beta-x, [data-cap-close], [data-dk-close] { min-height: 40px; min-width: 40px; }
  .tour-skip { min-height: 40px; padding: 10px 8px; }
}

/* real-comment vs example-DM tag */
.dm-src { display: inline-block; font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 7px; border-radius: 10px; margin-right: 8px; vertical-align: 1px; }
.dm-src.real { color: var(--live); background: color-mix(in srgb, var(--live) 14%, transparent); }
.dm-src.ex { color: var(--ink-3); background: var(--surface-2); border: 1px solid var(--border); }

/* ═══════════════════════════════════════════════════════════════════
   MOBILE OVERFLOW HARDENING
   Root cause of "page looks tiny + must slide sideways": a grid/flex
   child (an SVG with a wide viewBox, a <select> with long option text,
   a long label) refused to shrink below its own content's natural
   size, so the grid track — and the whole page — grew past the
   viewport. A real phone then auto-zooms out to fit it, which is what
   made everything look small. Grid/flex items default to
   min-width:auto (= their content's size); min-width:0 lets them
   actually shrink to fit, which is what we want everywhere here.
   ═══════════════════════════════════════════════════════════════════ */
.cols > *, .duo > *, .gm > *, .ops > *, .stats > *, .recs > *, .intel > *,
.team > *, .week > *, .notif-grid > *, .map-grid > *, .gs-modes > *,
.donut-wrap > *, .fbars > .fb > *, .mission-core > * {
  min-width: 0;
}
select, input, textarea { min-width: 0; max-width: 100%; }
svg { max-width: 100%; }

/* belt-and-suspenders: the page itself never scrolls sideways. Elements
   that are MEANT to scroll horizontally (.pipeline, .table-wrap, tab
   strips, the console's agent chips) declare their own overflow-x:auto
   and keep working — this only stops accidental whole-page overflow. */
/* `clip`, NOT `hidden`. overflow-x:hidden silently computes overflow-y to `auto`,
   which turns <body> into a scroll container — and any scroll-container ancestor
   makes position:sticky anchor to IT instead of the viewport. That is what made
   the sidebar scroll away with the page. `clip` blocks the same sideways overflow
   without creating a scroll container, so sticky keeps working. */
html, body { overflow-x: clip; }

/* ══════════════════════════════════════════════════════════════════════
   INSPIRATION — saved reels and the work they become.
   The board is the first place in RunSignl that shows real media at scale, so
   it carries the weight: vertical posters, depth on hover, mono numbers.
   ══════════════════════════════════════════════════════════════════════ */

/* ── the signal panel ──────────────────────────────────────────────────────
   Where the reels on this board came from, and what it would take to get more.
   Sits above the paste bar because it answers the question a creator arrives
   with — "why is this empty / where did these come from" — before offering
   them a text field. Deliberately quiet: it is a status surface, not a pitch. */
.sig { padding: 16px 18px; margin-bottom: 14px; }
.sig-h { display: flex; align-items: baseline; gap: 10px; }
.sig-h h3 { font-family: var(--sans); font-size: 13.5px; font-weight: 720; letter-spacing: -0.01em; }
.sig-n {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2);
  background: var(--glass-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}
.sig-d { font-size: 12.5px; color: var(--ink-2); line-height: 1.6; margin-top: 5px; max-width: 68ch; }
.sig-d.bad { color: var(--down); }

.sig-l { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 1px;
  background: var(--border); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.sig-c, .sig-r {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  background: var(--surface); padding: 8px 12px; font-size: 12px; min-width: 0;
}
.sig-c b, .sig-r b { font-family: var(--mono); font-size: 11.5px; font-weight: 500; color: var(--ink);
  overflow-wrap: anywhere; }
/* --ink-2, NOT --ink-3. Measured: --ink-3 on --surface is 3.46:1 in Platinum,
   which is below AA for text this size — and this line is where the finding
   lives ("2 posts stood out", "could not be read"). Secondary styling is fine
   for a hint; it is not fine for the sentence carrying the result. */
.sig-c span, .sig-r span { color: var(--ink-2); font-size: 11.5px; overflow-wrap: anywhere; }
/* A result that found something, one that could not be read, and one that was
   skipped must be distinguishable at a glance — and never by colour alone,
   which is why each also carries its own sentence.

   THE HANDLE STAYS --ink. Colouring it --live measured 2.54:1 on the row's own
   background: the single result state that reports SUCCESS was the least
   legible text in the panel. The status now rides on a dot, which is a UI
   component rather than text and is held to 3:1, so --live keeps its job as
   the product's live-signal green without carrying a sentence. */
.sig-r.good b::before, .sig-r.bad b::before {
  content: ""; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; margin-right: 7px; vertical-align: 1px;
}
.sig-r.good b::before { background: var(--live); }
.sig-r.bad b::before { background: var(--down); }
/* NO opacity. A blanket 0.72 here quietly undid the --ink-2 chosen six lines
   above for exactly these rows — the skipped list would have rendered below AA
   while the rule that set its colour claimed otherwise. Skipped rows are told
   apart by the word "skipped" and the reason that follows it. */
.sig-r.muted b { color: var(--ink-2); font-weight: 400; }

/* Accounts the provider says are real, waiting on the customer's decision.
   Tinted because it is the only block here that asks for an action that costs
   nothing — the paid one below is deliberately plainer. */
.sig-p {
  margin-top: 12px; padding: 12px 14px; border-radius: 10px;
  /* Mixed from the OPAQUE --accent, not from --accent-soft. --accent-soft
     carries its own alpha (0.12 / 0.16), so mixing it produced a translucent
     panel whose effective contrast depended on whatever happened to be behind
     it — measured at 2.75:1 in Platinum for the explainer text inside. An
     opaque tint makes the contrast a fact about this rule rather than about
     the stacking context. */
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
}
.sig-pt { font-size: 12.5px; font-weight: 650; color: var(--ink); }
.sig-pd { font-size: 11.5px; color: var(--ink-2); line-height: 1.6; margin-top: 3px; max-width: 66ch; }
.sig-ph { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0 10px; }
.sig-hd {
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 2px 9px; overflow-wrap: anywhere; min-width: 0;
}

.sig-a { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
/* THE PRICE, BEFORE THE CLICK. Small, but never hidden, never truncated, and
   never styled below AA — a spend disclosure the customer cannot comfortably
   read is not a disclosure. --ink-3 measured 3.46:1 here; --ink-2 is 7.3:1. */
.sig-cost { font-size: 11.5px; color: var(--ink-2); line-height: 1.55; flex: 1 1 260px; min-width: 0; }

/* When we looked, and the caveat that goes with it — a scraped number is a
   snapshot, and a card that hides the date implies it is current.

   NO opacity, and --ink-2 stated explicitly. .read-s is --ink-3, and dimming
   it a further 0.78 put the staleness caveat at 2.38:1 — the least legible
   text in the drawer was the one sentence telling the reader the numbers may
   have moved. The margin is !important because .read-s sets its own later in
   the file at identical specificity, so this element's spacing rule was being
   silently discarded. */
.read-when { color: var(--ink-2); margin-top: 3px !important; }
/* The no-baseline line. `.muted` (defined at the foot of this file) would also
   have coloured it --ink-3; this exists to say --ink-2 instead, because "we
   have no baseline for this account" is the whole content of that row and
   3.2:1 is not enough for the only sentence present. */
.read-none { color: var(--ink-2); }

/* ── the paste bar ── */
.ins-add { padding: 16px 18px; }
.ins-add-r { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.inp {
  font-family: var(--sans); font-size: 13px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 13px; min-width: 0; flex: 1 1 240px;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.inp::placeholder { color: var(--ink-3); }
.inp:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.inp.sel { flex: 0 1 260px; max-width: 100%; cursor: pointer; }
.ins-add-h { font-size: 11.5px; color: var(--ink-3); line-height: 1.6; margin-top: 11px; max-width: 720px; }
.ins-add-h b { color: var(--ink-2); font-weight: 640; }

/* ── lane bar ── */
.lane-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 20px 4px 14px; }
.lane-sp { flex: 1 1 auto; min-width: 0; }
.lane-chip {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-2); background: var(--glass-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 7px 13px; cursor: pointer; white-space: nowrap;
  backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
  transition: all .18s var(--ease);
}
.lane-chip span { color: var(--ink-3); margin-left: 6px; }
.lane-chip:hover { color: var(--ink); border-color: var(--border-strong); transform: translateY(-1px); }
.lane-chip.on {
  color: var(--l, var(--accent)); border-color: color-mix(in srgb, var(--l, var(--accent)) 45%, transparent);
  background: color-mix(in srgb, var(--l, var(--accent)) 10%, var(--surface));
  box-shadow: 0 2px 10px color-mix(in srgb, var(--l, var(--accent)) 20%, transparent);
}
.lane-chip.on span { color: inherit; opacity: .7; }
.pend {
  font-family: var(--mono); font-size: 9.5px; margin-left: 6px; padding: 1px 5px;
  border-radius: 6px; background: var(--accent); color: var(--accent-ink);
}

/* ── the board ── */
.ins-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 12px; margin: 0 4px;
}
.ins-card {
  display: flex; flex-direction: column; min-width: 0; text-align: left;
  background: var(--glass); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; cursor: pointer; padding: 0;
  backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
  box-shadow: var(--sh-2);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.ins-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  box-shadow: var(--sh-4), 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}
.ins-thumb {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden; flex: none;
  background: linear-gradient(150deg, var(--surface-2), var(--bg-2));
}
.ins-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s var(--ease);
}
.ins-card:hover .ins-thumb img { transform: scale(1.05); }
.ins-thumb::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 45%;
  background: linear-gradient(to top, rgba(0,0,0,0.42), transparent); pointer-events: none;
}
.ins-ph {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-3);
}
.ins-lane {
  position: absolute; top: 9px; left: 9px; z-index: 2;
  font-family: var(--mono); font-size: 9px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: #fff; background: color-mix(in srgb, var(--l) 88%, transparent);
  padding: 3px 8px; border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.ins-mult {
  position: absolute; top: 9px; right: 9px; z-index: 2;
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  color: #0a0a0a; background: var(--live);
  padding: 3px 8px; border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
/* SCAN-FIRST. The reel is the object being chosen; the metadata is the label.
   Tightened padding, one identity row, and a one-line hook for a READY reel —
   the two-line clamp survives only for the statuses whose subtitle is an error
   sentence worth reading in full. Everything removed from the face is in the
   drawer a click away. */
.ins-meta { padding: 8px 10px 9px; min-width: 0; }
.ins-idline {
  display: flex; align-items: center; gap: 6px; min-width: 0;
}
.ins-owner {
  font-family: var(--mono); font-size: 11px; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1 1 auto; min-width: 0;
}
.ins-hook {
  font-size: 12.5px; font-weight: 560; color: var(--ink); line-height: 1.4;
  margin: 4px 0 7px; display: -webkit-box; -webkit-line-clamp: 1;
  -webkit-box-orient: vertical; overflow: hidden;
}
.ins-hook.two { -webkit-line-clamp: 2; }
.ins-src.made { color: var(--live); border-color: color-mix(in srgb, var(--live) 45%, var(--border)); }
.ins-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ins-v { font-family: var(--mono); font-size: 10.5px; color: var(--ink-2); }
.ins-src {
  font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--ink-3); border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px;
}
.ins-src.you { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.ins-legend {
  font-size: 11.5px; color: var(--ink-3); line-height: 1.65;
  margin: 22px 4px 4px; padding: 13px 15px; max-width: 780px;
  border-left: 2px solid color-mix(in srgb, var(--live) 55%, transparent);
  background: var(--glass-2); border-radius: 0 10px 10px 0;
}
.ins-legend b { color: var(--ink-2); font-weight: 640; }

/* ── drawer: the breakdown ── */
.ins-hero { display: flex; gap: 14px; margin-bottom: 20px; align-items: stretch; }
.ins-hero-img, .ins-noimg {
  width: 108px; flex: none; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2);
}
.ins-noimg {
  display: grid; place-items: center; font-family: var(--mono);
  font-size: 9.5px; text-transform: uppercase; color: var(--ink-3);
}
.ins-hero-m { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
.ins-nums { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 6px; }
.ins-nums div { min-width: 0; }
.ins-nums b { display: block; font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--ink); }
.ins-nums span {
  font-family: var(--mono); font-size: 9px; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--ink-3);
}
.ins-pending { font-size: 12px; color: var(--ink-3); line-height: 1.5; }
.ins-hero-m .btn { align-self: flex-start; }

.sect-h {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-family: var(--display); font-size: 15px; font-weight: 620;
  margin: 24px 0 11px; padding-top: 18px; border-top: 1px solid var(--border);
}
.sub-h {
  font-family: var(--mono); font-size: 9.5px; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--ink-3); margin: 16px 0 8px;
}
.tag.real    { background: color-mix(in srgb, var(--live) 14%, transparent); color: var(--live); }
.tag.derived { background: var(--accent-soft); color: var(--accent); }
.tag.drafted { background: color-mix(in srgb, var(--amber) 14%, transparent); color: var(--amber); }
.sect-h .tag {
  font-family: var(--mono); font-size: 8.5px; font-weight: 500;
  letter-spacing: 0.09em; padding: 3px 8px; border-radius: 5px;
}

.read { display: flex; flex-direction: column; gap: 2px; }
.read-r { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.read-r:last-child { border-bottom: none; }
.read-k {
  flex: 0 0 128px; font-family: var(--mono); font-size: 9.5px;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3);
  padding-top: 3px; min-width: 0;
}
.read-v { flex: 1; min-width: 0; font-size: 13px; color: var(--ink); line-height: 1.5; }
.read-v .big {
  font-family: var(--mono); font-size: 20px; font-weight: 600;
  color: var(--live); margin-right: 7px;
}
.read-s { font-size: 11.5px; color: var(--ink-3); line-height: 1.6; margin-top: 5px; }
.read-v .quote {
  font-family: var(--display); font-size: 15px; font-weight: 560; color: var(--ink);
  line-height: 1.45; padding-left: 11px;
  border-left: 2px solid color-mix(in srgb, var(--accent) 50%, transparent);
}
.muted { color: var(--ink-3); }

.fit { border-radius: 12px; padding: 14px 16px; border: 1px solid var(--border); background: var(--surface-2); }
.fit-b {
  font-family: var(--mono); font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; margin-bottom: 6px; color: var(--ink-2);
}
.fit-l { font-size: 13px; color: var(--ink); line-height: 1.55; }
.fit-g { font-size: 12px; color: var(--ink-2); line-height: 1.55; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
.fit.strong { background: color-mix(in srgb, var(--live) 8%, var(--surface)); border-color: color-mix(in srgb, var(--live) 32%, transparent); }
.fit.strong .fit-b { color: var(--live); }
.fit.proven { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 28%, transparent); }
.fit.proven .fit-b { color: var(--accent); }
.fit.untested .fit-b, .fit.unknown .fit-b { color: var(--amber); }

.note-line {
  font-size: 11.5px; color: var(--ink-3); line-height: 1.6;
  margin: 10px 0 14px; padding: 10px 13px; border-radius: 9px; background: var(--glass-2);
}
.note-line b { color: var(--ink-2); font-weight: 640; }
.note-line.real-note {
  border-left: 2px solid var(--live); border-radius: 0 9px 9px 0;
  background: color-mix(in srgb, var(--live) 7%, transparent); color: var(--ink-2);
}

.beats { display: flex; flex-direction: column; gap: 1px; }
.beat { display: flex; gap: 13px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.beat:last-child { border-bottom: none; }
.bt {
  flex: 0 0 54px; font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  color: var(--accent); padding-top: 2px;
}
.bd { flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }

.gate {
  border: 1px dashed var(--border-strong); border-radius: 12px;
  padding: 16px 17px; background: var(--glass-2);
}
.gate-t { font-family: var(--display); font-size: 14px; font-weight: 620; color: var(--ink); }
.gate-d { font-size: 12.5px; color: var(--ink-2); line-height: 1.6; margin: 7px 0 13px; }
.gate-d code {
  font-family: var(--mono); font-size: 11px; background: var(--surface-2);
  padding: 1px 5px; border-radius: 4px; border: 1px solid var(--border);
}
.gate-e {
  font-family: var(--mono); font-size: 10.5px; color: var(--down);
  margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--border);
  word-break: break-word;
}
.deep-s { padding: 13px 0; border-bottom: 1px solid var(--border); }
.deep-s:last-child { border-bottom: none; }
.deep-t { font-family: var(--display); font-size: 13.5px; font-weight: 620; margin-bottom: 6px; }
.deep-b { font-size: 12.5px; color: var(--ink-2); line-height: 1.65; white-space: pre-line; }
.deep > .tag { display: inline-block; margin-bottom: 6px; }
/* WHERE EACH LINE CAME FROM, and what the read still cannot answer. Both were
   in the response and neither was rendered, which is how an evidence-based
   breakdown could be mistaken for a viewing. */
.deep-label { font-family: var(--display); font-size: 13px; font-weight: 620; color: var(--ink); margin-bottom: 2px; }
.deep-e { margin-top: 5px; font: 500 11px/1.5 var(--mono); letter-spacing: .02em; color: var(--ink-3); }
.deep-open { margin-top: 13px; padding: 11px 13px; border-radius: 11px;
  background: var(--surface-2); border: 1px solid var(--border); }
.deep-open-h { font: 600 10.5px/1.5 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 5px; }
.deep-open-i { font-size: 12.5px; line-height: 1.6; color: var(--ink-2); margin-top: 4px; }
.deep-open-i b { color: var(--ink); font-weight: 600; }

.drawer-actions {
  display: flex; gap: 9px; flex-wrap: wrap;
  margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border);
}

@media (max-width: 760px) {
  .ins-grid { grid-template-columns: repeat(auto-fill, minmax(142px, 1fr)); gap: 10px; }
  .ins-add-r { flex-direction: column; align-items: stretch; }
  .inp, .inp.sel { flex: 1 1 auto; width: 100%; }
  .read-r { flex-direction: column; gap: 5px; }
  .read-k { flex: none; }
  .ins-hero-img, .ins-noimg { width: 84px; }
  .ins-nums { grid-template-columns: repeat(2, 1fr); }
}

/* ── import: account for every line, and reject spreadsheets clearly ──── */
.imp-report {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12.5px; color: var(--ink-2); line-height: 1.55;
  margin: 0 0 14px; padding: 11px 14px; border-radius: 10px;
  background: color-mix(in srgb, var(--live) 8%, transparent);
  border-left: 2px solid var(--live);
}
.imp-report b { color: var(--ink); font-family: var(--mono); font-weight: 600; }
.imp-report.warn {
  background: color-mix(in srgb, var(--amber) 10%, transparent);
  border-left-color: var(--amber);
}
.imp-report-h { font-size: 11.5px; color: var(--ink-3); }

.imp-drop.bad { border-color: var(--down); background: color-mix(in srgb, var(--down) 6%, transparent); }
.imp-bad { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; text-align: left; }
.imp-bad b { font-size: 13.5px; color: var(--ink); }
.imp-bad span { font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }
.imp-bad span b { font-size: inherit; font-family: var(--mono); }

/* the Collaborations empty state is a real drop target — the dashed border
   promised it, so it has to behave like one */
.empty.over {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.empty.over .e-title { color: var(--accent); }
.imp-report .dim { color: var(--ink-3); }

/* ══════════════════════════════════════════════════════════════════════
   THE LEARNING LOOP — agents that generate, and get better at it.
   Generated work is visually distinct from the deterministic baseline. It
   must never be possible to mistake one for the other.
   ══════════════════════════════════════════════════════════════════════ */
.gen-btn {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 10px;
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--accent); cursor: pointer;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 999px; padding: 5px 11px; white-space: nowrap;
  transition: all .18s var(--ease);
}
.gen-btn:hover:not(:disabled) {
  background: var(--accent); color: var(--accent-ink);
  transform: translateY(-1px);
  box-shadow: 0 3px 12px color-mix(in srgb, var(--accent) 40%, transparent);
}
.gen-btn:hover:not(:disabled) .gen-dot { background: var(--accent-ink); }
.gen-btn:disabled { opacity: .6; cursor: default; }
.gen-dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none;
  animation: genpulse 1.8s ease-in-out infinite;
}
@keyframes genpulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .gen-dot { animation: none; } }

.gen-panel {
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
  background: linear-gradient(168deg, color-mix(in srgb, var(--accent) 6%, var(--surface)), var(--surface));
}
.tag.gen {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.09em;
  padding: 3px 8px; border-radius: 5px;
  background: var(--accent-soft); color: var(--accent);
}

/* what it learned — shown before the work, so it's never a black box */
.learned {
  margin-bottom: 12px; padding: 12px 14px; border-radius: 10px;
  background: var(--glass-2); border: 1px solid var(--border);
}
.learned-h {
  font-family: var(--mono); font-size: 9px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--ink-3); margin-bottom: 9px;
}
.learned-row {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 12.5px; color: var(--ink-2); line-height: 1.55; padding: 3px 0;
}
.learned-row span { width: 5px; height: 5px; border-radius: 50%; flex: none; margin-top: 7px; }
.learned-row.up span   { background: var(--live); }
.learned-row.down span { background: var(--down); }
.learned-row.edit span { background: var(--amber); }
.learned-row.cold span { background: var(--ink-3); }

.gen-card { position: relative; }
.gen-card.done { opacity: .55; }
.gen-card .t { align-items: flex-start; }
.mini {
  width: 24px; height: 24px; flex: none; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface);
  font-size: 12px; line-height: 1; color: var(--ink-3);
  transition: all .15s var(--ease);
}
.mini:hover { transform: translateY(-1px); }
.mini.ok:hover { color: var(--live); border-color: var(--live); background: color-mix(in srgb, var(--live) 12%, var(--surface)); }
.mini.no:hover { color: var(--down); border-color: var(--down); background: color-mix(in srgb, var(--down) 12%, var(--surface)); }

.gen-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--ink-3);
}

/* the drawer's generate prompt */
.gen-bar {
  margin: 4px 0 18px; padding: 15px 16px; border-radius: 12px;
  border: 1px dashed color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.gen-bar-t { font-family: var(--display); font-size: 14px; font-weight: 620; color: var(--ink); }
.gen-bar-d { font-size: 12.5px; color: var(--ink-2); line-height: 1.6; margin: 6px 0 12px; }
.gen-bar-d b { color: var(--ink); font-weight: 620; }
.gen-bar .gen-btn { margin-left: 0; }

.pop-menu .pop-h {
  font-family: var(--mono); font-size: 9px; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--ink-3);
  padding: 9px 12px 7px; border-bottom: 1px solid var(--border);
}

/* Short screens (laptops, a half-height window) squeeze the console badly: the
   scrim eats 16vh in padding and the quick-prompt chips wrap to two rows, so the
   message area collapses and long replies get clipped. Reclaim that space. */
@media (max-height: 780px) {
  .console-scrim { padding: 3vh 16px; }
  .console { height: 680px; max-height: 94vh; }
  /* keep the prompts to ONE row that scrolls, instead of wrapping and stealing height */
  .console-quick {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; padding: 8px 18px;
  }
  .console-quick::-webkit-scrollbar { display: none; }
  .qchip { flex: none; }
}
@media (max-height: 620px) {
  .console-scrim { padding: 2vh 12px; }
  .console { max-height: 96vh; }
  .console-msgs { min-height: 150px; }
}

.mini.vary:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

/* ══════════════════════════════════════════════════════════════════════
   "THE SIGNAL INSTRUMENT" — cinematic boot/login surface.
   A deliberately single-world DARK moment (like the reference sites): the app's
   working screens keep both themes; this arrival screen is always obsidian.
   Fuses the three refs into something ours: huge ghost wordmark (Iceberg),
   an oscilloscope signal trace where they had a scribble (on-brand), tick-mark
   instrument framing, and the frosted-glass card floating with real depth.
   ══════════════════════════════════════════════════════════════════════ */
.sg-cine {
  --v: #7C6CFF; --g: #34D399; --ink: #ECEAF6; --ink3: #7A7194; --ob: #06060A;
  background: var(--ob);
  overflow: hidden;
}
.sg-cine .sg-aurora {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 82% 12%, color-mix(in srgb, var(--v) 30%, transparent), transparent 70%),
    radial-gradient(55% 45% at 12% 92%, color-mix(in srgb, var(--g) 12%, transparent), transparent 70%);
}
.sg-cine .sg-ghost {
  position: absolute; z-index: 0; left: -3vw; bottom: -6vh; pointer-events: none;
  display: flex; flex-direction: column; align-items: flex-start;
  font-family: var(--display); font-weight: 300; font-size: clamp(200px, 36vw, 520px);
  letter-spacing: -0.04em; line-height: 0.8; white-space: nowrap;
  color: rgba(255,255,255,0.028); user-select: none;
}
/* "RUN" stacked above the main ghost word, at a proportionally smaller scale */
.sg-ghost-run { font-size: clamp(70px, 13vw, 190px); }
.sg-cine .sg-wave {
  position: absolute; z-index: 0; left: 0; right: 0; top: 46%; width: 100%; height: 200px;
  transform: translateY(-50%); opacity: 0.55; pointer-events: none;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--v) 55%, transparent));
}
.sg-cine .sg-ruler-t, .sg-cine .sg-ruler-l { position: absolute; z-index: 1; pointer-events: none; opacity: 0.5; }
.sg-cine .sg-ruler-t { top: 0; left: 0; right: 0; height: 8px;
  background: repeating-linear-gradient(90deg, rgba(190,184,230,0.28) 0 1px, transparent 1px 27px); }
.sg-cine .sg-ruler-l { top: 0; bottom: 0; left: 0; width: 8px;
  background: repeating-linear-gradient(0deg, rgba(190,184,230,0.28) 0 1px, transparent 1px 27px); }
.sg-cine .sg-tel {
  position: absolute; z-index: 2; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; color: var(--ink3); text-transform: uppercase;
  display: flex; align-items: center; gap: 7px;
}
.sg-cine .sg-tel.tl { top: 20px; left: 22px; }
.sg-cine .sg-tel.tr { top: 20px; right: 22px; }
.sg-cine .sg-tel.bl { bottom: 20px; left: 22px; }
.sg-cine .sg-tel.br { bottom: 20px; right: 22px; }
.sg-cine .sg-live {
  width: 6px; height: 6px; border-radius: 50%; background: var(--g);
  box-shadow: 0 0 9px var(--g); animation: sgpulse 2.4s ease-in-out infinite;
}
@keyframes sgpulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .sg-cine .sg-live { animation: none; } }

/* the frosted card, floating over the trace with real depth */
.sg-cine .login-card {
  z-index: 3; width: min(408px, 92vw); padding: 34px 32px 26px;
  background: rgba(255,255,255,0.045);
  backdrop-filter: blur(34px) saturate(1.5); -webkit-backdrop-filter: blur(34px) saturate(1.5);
  border: 1px solid rgba(190,184,230,0.16); border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.14);
  text-align: center;
}
.sg-cine .login-logo { color: var(--v); margin-bottom: 16px; }
.sg-cine .login-title { color: var(--ink); font-size: 30px; letter-spacing: 0.02em; }
.sg-cine .login-sub {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink3); margin: 9px 0 24px;
}
.sg-cine .login-field { text-align: left; margin-bottom: 13px; }
.sg-cine .login-field span { color: var(--ink3); }
.sg-cine .login-field input {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(190,184,230,0.16);
  color: var(--ink); border-radius: 11px; padding: 11px 13px;
}
.sg-cine .login-field input::placeholder { color: rgba(190,184,230,0.35); }
.sg-cine .login-field input:focus { border-color: var(--v); box-shadow: 0 0 0 3px color-mix(in srgb, var(--v) 22%, transparent); }
.sg-cine .login-btn.primary { background: var(--v); color: #fff; border: 0; box-shadow: 0 6px 22px color-mix(in srgb, var(--v) 45%, transparent); }
.sg-cine .login-btn.primary:hover { background: color-mix(in srgb, var(--v) 88%, #fff); transform: translateY(-1px); }
.sg-cine .login-btn.ghost {
  background: rgba(255,255,255,0.04); color: var(--ink); border: 1px solid rgba(190,184,230,0.18);
}
.sg-cine .login-btn.ghost:hover { border-color: rgba(190,184,230,0.4); background: rgba(255,255,255,0.07); }
.sg-cine .login-note { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; color: var(--ink3); margin-top: 18px; }
.sg-cine .login-err { color: #FF6B6B; font-size: 12px; min-height: 16px; text-align: left; }

@media (max-width: 560px) {
  .sg-cine .sg-tel.tl, .sg-cine .sg-tel.tr { font-size: 9px; }
  .sg-cine .sg-tel.bl, .sg-cine .sg-tel.br { display: none; }
}

/* boot sequence takes the same cinematic surface as the login */
.sg-cine.boot .sg-wave { top: 62%; }
.sg-cine .boot-core {
  z-index: 3; width: min(440px, 90vw); padding: 30px 30px 26px; text-align: center;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(30px) saturate(1.4); -webkit-backdrop-filter: blur(30px) saturate(1.4);
  border: 1px solid rgba(190,184,230,0.14); border-radius: 20px;
  box-shadow: 0 28px 74px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.12);
}
.sg-cine .boot-logo { color: var(--v); }
.sg-cine .boot-name { color: var(--ink); }
.sg-cine .boot-lines { color: var(--ink3); }
.sg-cine .boot-line:last-child { color: var(--ink); }
.sg-cine .boot-tick { color: var(--g); }
.sg-cine .boot-bar { background: rgba(190,184,230,0.14); }
.sg-cine .boot-bar i { background: linear-gradient(90deg, var(--v), var(--g)); }

/* daily briefing joins the arrival trilogy (login · boot · briefing) */
.sg-cine.briefing { background: var(--ob); }
.sg-cine .brief-card {
  z-index: 3; position: relative; text-align: center; width: min(460px, 92vw); padding: 34px 34px 28px;
  background: rgba(255,255,255,0.045);
  backdrop-filter: blur(34px) saturate(1.5); -webkit-backdrop-filter: blur(34px) saturate(1.5);
  border: 1px solid rgba(190,184,230,0.16); border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.14);
}
.sg-cine .brief-logo { color: var(--v); display: grid; place-items: center; margin-bottom: 14px; }
.sg-cine .brief-line.l1 { color: var(--ink); }
.sg-cine .brief-line.l2, .sg-cine .brief-line.l3 { color: var(--ink3); }
.sg-cine .brief-line.l2 b, .sg-cine .brief-line.l3 b { color: var(--ink); }
.sg-cine .brief-line.l4 { color: color-mix(in srgb, var(--g) 80%, var(--ink)); }
.sg-cine .brief-skip { color: var(--ink3); }

/* ══════════════════════════════════════════════════════════════════════
   PREMIUM PASS — elevating the WORKING surfaces (redesign-existing-projects).
   The arrival is cinematic; this makes the day-to-day screens feel expensive
   too: physical clicks, real-glass depth, cursor light on the feature cards,
   violet-tinted shadows, and typographic finish. Cohesive, not busy.
   ══════════════════════════════════════════════════════════════════════ */

/* 1 — PHYSICAL PRESS. Every interactive element now answers to a click (was 0). */
.btn:active, .btn.sm:active { transform: translateY(1px) scale(0.985); transition-duration: .05s; }
.nav-item:active, .plat:active, .lane-chip:active, .qchip:active, .console-chip:active,
.ws-tab:active, .copy-btn:active, .gen-btn:active, .mini:active, .linklike:active,
.chip-rm:active, .pill:active, .mtab:active { transform: scale(0.94); transition-duration: .05s; }
.ins-card:active, .collab-card:active, .icard:active { transform: translateY(-2px) scale(0.995); transition-duration: .06s; }

/* 2 — GLASS EDGE REFRACTION. The workhorse cards read as real glass, not flat fills. */
.card { box-shadow: inset 0 1px 0 var(--edge); }

/* 3 — CURSOR LIGHT reaches the agent cards too (they tilted but never glowed).
   Reuses the --mx/--my the tilt engine already sets; ::after is free on .agent. */
.agent { position: relative; }
.agent::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%);
  opacity: 0; transition: opacity .3s var(--ease); mix-blend-mode: soft-light;
}
.agent.tilting::after { opacity: 1; }

/* 4 — TYPOGRAPHY finish: no orphaned words in headings; digits line up in data. */
.hero-title, .page-head h2, .section-head h2, .panel-head h3, .mc-name,
.brief-line.l1, .drawer-head h3, .e-title, .gate-t, .deep-t, .fit-l, .dk-t, .dk-head { text-wrap: balance; }
.icard .v, .chip-stat b, .ins-nums b, .read-v .big, .num, .goal-note b,
.lane-chip span, .nav-count, .ws-badge, .ins-v, .pill, .mbadge,
.gm-num, .stat-v, .mc-metric { font-variant-numeric: tabular-nums; }

/* 5 — TINTED SHADOWS in dark: deep violet-black instead of flat pure black,
   so elevation carries the brand's hue (the audit's "colored shadow" note). */
@media (prefers-color-scheme: dark) {
  :root {
    --sh-1: 0 1px 2px rgba(8,5,24,0.5);
    --sh-2: 0 2px 8px rgba(8,5,24,0.5), 0 10px 30px rgba(8,5,24,0.42);
    --sh-3: 0 8px 24px rgba(8,5,24,0.55), 0 24px 60px rgba(8,5,24,0.5);
    --sh-4: 0 20px 50px rgba(8,5,24,0.6), 0 50px 100px rgba(8,5,24,0.55);
  }
}
:root[data-theme="dark"] {
  --sh-1: 0 1px 2px rgba(8,5,24,0.5);
  --sh-2: 0 2px 8px rgba(8,5,24,0.5), 0 10px 30px rgba(8,5,24,0.42);
  --sh-3: 0 8px 24px rgba(8,5,24,0.55), 0 24px 60px rgba(8,5,24,0.5);
  --sh-4: 0 20px 50px rgba(8,5,24,0.6), 0 50px 100px rgba(8,5,24,0.55);
}
:root[data-theme="light"] {
  --sh-1: 0 1px 2px rgba(26,22,45,0.05);
  --sh-2: 0 2px 6px rgba(26,22,45,0.06), 0 8px 22px rgba(26,22,45,0.05);
  --sh-3: 0 4px 12px rgba(26,22,45,0.07), 0 18px 44px rgba(26,22,45,0.09);
  --sh-4: 0 10px 24px rgba(26,22,45,0.10), 0 40px 80px rgba(26,22,45,0.16);
}

/* ══════════════════════════════════════════════════════════════════════
   VISIBLE PASS — enhancements you can actually SEE (not just feel).
   ══════════════════════════════════════════════════════════════════════ */

/* 1 — STAGGERED CASCADE. Cards rise + fade in on every page, one after another. */
.stagger-in { animation: staggerRise .52s cubic-bezier(0.22,0.61,0.36,1) both; animation-delay: var(--sd, 0ms); }
@keyframes staggerRise {
  from { opacity: 0; transform: translateY(16px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .stagger-in { animation: none; } }

/* 2 — HOVER LIFT + ACCENT GLOW on the workhorse cards. Unmistakable on hover. */
.panel, .card, .icard { transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); }
.panel:hover, .icard:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: var(--sh-3), inset 0 1px 0 var(--edge),
              0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent),
              0 12px 40px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* 3 — BRIGHTER CURSOR SPOTLIGHT. The feature cards clearly light under the cursor. */
.icard::after, .rec::after, .collab-card::after, .agent::after {
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--accent) 40%, transparent), transparent 55%) !important;
  mix-blend-mode: normal !important;
}

/* 4 — BIGGER, MORE EDITORIAL HEADERS (Iceberg-scale confidence). */
.page-head h2 { font-size: clamp(30px, 3.6vw, 40px); letter-spacing: -0.03em; line-height: 1.02; }
.page-head p { font-size: 14px; margin-top: 8px; }
.section-head h2 { font-size: 21px; letter-spacing: -0.02em; }
/* accent kicker line on section heads — a thin instrument tick before the title */
.section-head h2::before {
  content: ""; display: inline-block; width: 14px; height: 2px; vertical-align: middle;
  margin-right: 10px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--live));
}

/* ── the S|gnl wordmark — the "i" is a live signal bar ─────────────────
   Ties the logotype to the whole "signal instrument" language. Green = the
   live-signal color used by the logo arrow, sync dot and waveform. */
.wm { white-space: nowrap; }
.wm-bar {
  display: inline-block; width: 0.1em; height: 0.7em;
  margin: 0 0.07em; border-radius: 1px;
  background: var(--live);
  /* dropped below the baseline so the bar's bottom sits ~mid-"g", a touch
     lower than the S — same height, just lowered. */
  vertical-align: baseline; transform: translateY(0.14em);
  box-shadow: 0 0 7px color-mix(in srgb, var(--live) 55%, transparent);
}
/* the trailing period, in signal green — the "i"'s dot, stamped at the end. */
.wm-dot { color: var(--live); text-shadow: 0 0 8px color-mix(in srgb, var(--live) 45%, transparent); }

/* ── "building your workspace" — the post-signup data-pull screen ── */
.wu-status { font: 600 12px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--live); margin: 16px 0 12px; }
.wu-bar { height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--accent) 16%, transparent); overflow: hidden; margin-bottom: 14px; }
.wu-fill { display: block; height: 100%; width: 40%; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--live)); animation: wuSlide 1.5s ease-in-out infinite; }
@keyframes wuSlide { 0% { margin-left: -42%; } 100% { margin-left: 100%; } }

/* ── "Signl's" — the wait-time signal-catcher ──────────────────────────── */
.wu-play { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 9px 15px; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--text); font: 600 12.5px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: background 0.18s ease, transform 0.12s ease; }
.wu-play:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.wu-play:active { transform: translateY(1px); }
.wu-play-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--live); box-shadow: 0 0 8px var(--live); }
.sg-game-wrap { margin-top: 14px; }
.sg-game { border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: color-mix(in srgb, var(--accent) 4%, transparent); }
.sg-game-top { display: flex; justify-content: space-between; margin-bottom: 8px; }
.sg-game-lbl { font: 600 11px/1 var(--mono); letter-spacing: 0.14em; color: var(--muted); }
.sg-game-lbl b { color: var(--accent); font-weight: 700; margin-left: 4px; }
.sg-game-canvas { display: block; width: 100%; height: auto; border-radius: 8px; background: radial-gradient(120% 100% at 50% 100%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%); cursor: crosshair; touch-action: none; }
.sg-game-hint { margin-top: 8px; text-align: center; font: 500 11.5px/1.4 var(--body, inherit); color: var(--muted); }

/* ── Beta feedback (Phase A) ──────────────────────────────────────────── */
.beta-tag { display:inline-block; font:700 9.5px/1 var(--mono); letter-spacing:.14em; color:var(--accent-ink); background:var(--accent); padding:3px 6px; border-radius:5px; vertical-align:middle; margin-left:8px; }
.page-head h2 .beta-tag { margin-left:10px; }

/* persistent floating button */
.beta-fab { position:fixed; right:20px; bottom:20px; z-index:150; display:inline-flex; align-items:center; gap:8px; padding:10px 15px; border:1px solid var(--border-strong); border-radius:999px; background:var(--surface); color:var(--ink); box-shadow:var(--sh-2); font:600 12.5px/1 var(--body, inherit); cursor:pointer; transition:transform .14s ease, box-shadow .18s ease; }
.beta-fab:hover { transform:translateY(-2px); box-shadow:0 8px 22px color-mix(in srgb, var(--accent) 30%, transparent); }
.beta-fab:active { transform:translateY(0); }
.beta-fab-dot { width:7px; height:7px; border-radius:50%; background:var(--live); box-shadow:0 0 8px var(--live); }
.beta-fab-tag { font:700 9.5px/1 var(--mono); letter-spacing:.12em; color:var(--accent); }
@media (max-width:640px){ .beta-fab { bottom:78px; right:14px; } .beta-fab-txt { display:none; }
  /* Settings' save bar sits at bottom:84px, right-aligned — the FAB covered
     19% of its Save button and a tap there opened the feedback modal. */
  body:has(.savebar) .beta-fab { bottom: 148px; } }

/* modal */
.beta-overlay { position:fixed; inset:0; z-index:210; display:flex; align-items:flex-start; justify-content:center; padding:40px 16px; overflow-y:auto; background:color-mix(in srgb, #000 55%, transparent); backdrop-filter:blur(3px); animation:betaIn .18s ease; }
.beta-overlay.out { opacity:0; transition:opacity .2s ease; }
@keyframes betaIn { from{opacity:0} to{opacity:1} }
.beta-modal { width:100%; max-width:520px; background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:0 24px 60px rgba(0,0,0,.42); padding:20px 22px; }
.beta-modal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.beta-modal-head h3 { display:inline; font-family:var(--display); font-size:19px; font-weight:600; }
.beta-modal-head .beta-tag { margin-left:0; margin-right:8px; }
.beta-x { background:none; border:none; color:var(--ink-3); font-size:15px; cursor:pointer; padding:4px 8px; border-radius:6px; }
.beta-x:hover { color:var(--ink); background:var(--surface-2); }
.beta-cats { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:6px; }
.beta-cat { padding:7px 12px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--ink-2); font:600 12.5px/1 var(--body, inherit); cursor:pointer; transition:background .15s ease, border-color .15s ease, color .15s ease; }
.beta-cat:hover { border-color:var(--border-strong); color:var(--ink); }
.beta-cat.on { background:var(--accent-soft); border-color:var(--accent); color:var(--ink); }
.beta-l { display:block; font:600 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin:12px 0 6px; }
.beta-in { width:100%; padding:9px 11px; border:1px solid var(--border); border-radius:9px; background:var(--bg-2); color:var(--ink); font:14px/1.5 var(--body, inherit); resize:vertical; }
.beta-in:focus { outline:none; border-color:var(--accent); }
.beta-two { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.beta-row { display:flex; align-items:center; gap:12px; margin-top:12px; flex-wrap:wrap; }
.beta-seg { display:inline-flex; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.beta-seg button { padding:6px 11px; background:var(--surface); color:var(--ink-3); border:none; border-right:1px solid var(--border); font:600 11px/1 var(--mono); text-transform:uppercase; letter-spacing:.04em; cursor:pointer; }
.beta-seg button:last-child { border-right:none; }
.beta-seg button.on { background:var(--accent); color:var(--accent-ink); }
.beta-check { display:inline-flex; align-items:center; gap:7px; font:500 12.5px/1 var(--body, inherit); color:var(--ink-2); cursor:pointer; }
.beta-shot-name { font:500 12px/1 var(--body, inherit); color:var(--live); }
.beta-captured { margin-top:14px; font:400 11.5px/1.5 var(--body, inherit); color:var(--ink-3); }
.beta-foot { display:flex; align-items:center; justify-content:space-between; margin-top:16px; gap:12px; }
.beta-hub-link { font:600 12.5px/1 var(--body, inherit); color:var(--accent); text-decoration:none; }
.beta-hub-link:hover { text-decoration:underline; }

/* Beta Hub page */
.beta-hub-actions { display:flex; align-items:center; gap:14px; margin:0 4px 16px; flex-wrap: wrap; row-gap: 8px; }
.beta-ver { font:600 11px/1 var(--mono); letter-spacing:.1em; color:var(--ink-3); }
.beta-list { display:flex; flex-direction:column; }
.beta-item { padding:11px 2px; border-bottom:1px solid var(--border); }
.beta-item:last-child { border-bottom:none; }
.beta-item-t { display:flex; align-items:center; gap:8px; font:600 13.5px/1.4 var(--body, inherit); color:var(--ink); flex-wrap:wrap; }
.beta-item-d { margin-top:4px; font:400 12.5px/1.5 var(--body, inherit); color:var(--ink-2); }
.beta-item-meta { margin-top:4px; font:500 11px/1 var(--mono); letter-spacing:.03em; color:var(--ink-3); text-transform:uppercase; }
.beta-empty { padding:14px 2px; font:400 13px/1.5 var(--body, inherit); color:var(--ink-3); }
.beta-status { font:700 9.5px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; padding:3px 7px; border-radius:5px; background:var(--surface-2); color:var(--ink-2); border:1px solid var(--border); }
.beta-status.fixed, .beta-status.needs_tester_confirmation { background:color-mix(in srgb, var(--live) 18%, transparent); color:var(--live); border-color:transparent; }
.beta-status.in_progress, .beta-status.planned, .beta-status.reproduced { background:var(--accent-soft); color:var(--accent); border-color:transparent; }
.beta-status.declined, .beta-status.duplicate { opacity:.65; }
.beta-sev-tag { font:700 9px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; padding:2px 6px; border-radius:4px; background:var(--surface-2); color:var(--ink-2); }
.beta-sev-tag.high, .beta-sev-tag.critical { background:color-mix(in srgb, #ef4444 18%, transparent); color:#ef4444; }
@media (max-width:640px){ .beta-two { grid-template-columns:1fr; } }

/* ── First-run tour (coach-marks) ─────────────────────────────────────── */
.tour-root { position:fixed; inset:0; z-index:190; }
.tour-root.out { opacity:0; transition:opacity .2s ease; }
.tour-spot { position:fixed; border-radius:10px; border:2px solid var(--accent); box-shadow:0 0 0 9999px color-mix(in srgb, #000 55%, transparent), 0 0 22px color-mix(in srgb, var(--accent) 45%, transparent); pointer-events:none; transition:all .25s cubic-bezier(.4,0,.2,1); }
.tour-pop { position:fixed; width:300px; max-width:calc(100vw - 24px); background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:0 18px 44px rgba(0,0,0,.4); padding:16px 18px; pointer-events:auto; transition:left .25s ease, top .25s ease; }
.tour-pop.centered { left:50% !important; top:50% !important; transform:translate(-50%,-50%); }
.tour-step { font:700 10px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.tour-title { font-family:var(--display); font-size:17px; font-weight:600; color:var(--ink); margin:8px 0 6px; }
.tour-body { font:400 13.5px/1.55 var(--body, inherit); color:var(--ink-2); }
.tour-actions { display:flex; align-items:center; justify-content:space-between; margin-top:16px; gap:10px; }
.tour-skip { background:none; border:none; color:var(--ink-3); font:500 12.5px/1 var(--body, inherit); cursor:pointer; padding:6px 4px; }
.tour-skip:hover { color:var(--ink); }
.tour-nav { display:flex; gap:8px; }

/* ── Saved items (★ save-before-generate) ─────────────────────────────── */
.save-btn { float: right; background: none; border: none; cursor: pointer; font: 15px/1 var(--body, inherit); color: var(--ink-3); padding: 2px 5px; margin-left: 4px; border-radius: 6px; transition: color .15s ease, transform .12s ease; }
.save-btn:hover { color: var(--accent); }
.save-btn:active { transform: scale(.88); }
.save-btn.on { color: var(--accent); }
.saved-sec { margin: 0 0 14px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); border-radius: 12px; background: color-mix(in srgb, var(--accent) 6%, transparent); }
.saved-h { font: 700 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; display: flex; align-items: baseline; gap: 8px; }
.saved-h span { font-weight: 500; letter-spacing: .03em; color: var(--ink-3); text-transform: none; font-size: 10.5px; }
.saved-sec .saved-card { margin-bottom: 8px; }
.saved-sec .saved-card:last-child { margin-bottom: 0; }

/* ── Intelligence: expandable insight cards + drawer ──────────────────── */
.icard-click { cursor: pointer; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.icard-click:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); box-shadow: var(--sh-3), inset 0 1px 0 var(--edge); }
.icard-click:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.icard-open { position: absolute; top: 12px; right: 14px; z-index: 2; font: 700 9.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); opacity: 0; transform: translateY(-2px); transition: opacity .18s ease, transform .18s ease; pointer-events: none; }
.icard-click:hover .icard-open, .icard-click:focus-visible .icard-open { opacity: .85; transform: translateY(0); }
.insight-hero { margin-bottom: 14px; }
.insight-v { font-family: var(--display); font-size: 40px; font-weight: 640; line-height: 1; }
.insight-v.up { color: var(--up); } .insight-v.down { color: var(--down); } .insight-v.flag { color: var(--accent-hover); }
.insight-s { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.prov { display: flex; align-items: flex-start; gap: 10px; padding: 13px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.prov .tag { flex: none; }
.prov-line { font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.prov-post-h { font: 600 10.5px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }

/* ── Elevate — the idea workbench ─────────────────────────────────────── */
.elevate-mini { float: right; background: none; border: none; cursor: pointer; font: 14px/1 var(--body, inherit); color: var(--ink-3); padding: 2px 5px; margin-left: 2px; border-radius: 6px; transition: color .15s ease, transform .12s ease; }
.elevate-mini:hover { color: var(--accent); transform: scale(1.1); }
.elevate-mini:active { transform: scale(.9); }
.elevate-seed-h { font: 700 10.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 8px; }
.elevate-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 4px; }
.elevate-act { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border: 1px solid color-mix(in srgb, var(--a) 45%, var(--border)); border-radius: 10px; background: color-mix(in srgb, var(--a) 8%, transparent); color: var(--ink); font: 600 13px/1 var(--body, inherit); cursor: pointer; transition: background .15s ease, transform .12s ease; }
.elevate-act:hover { background: color-mix(in srgb, var(--a) 16%, transparent); transform: translateY(-1px); }
.elevate-act:active { transform: translateY(0); }
.elevate-act .pl-dot { background: var(--a); }
.elevate-out { margin-top: 8px; }
.elevate-empty { padding: 14px 2px; font: 400 13px/1.55 var(--body, inherit); color: var(--ink-3); }
.elevate-res-h { display: flex; align-items: center; gap: 8px; font: 500 12px/1.4 var(--body, inherit); color: var(--ink-2); margin: 6px 0 10px; }

/* ── the signal line, BEHIND the content ──────────────────────────────────
   The frosted cards blur it where it passes under them; it shows sharp in the
   open gaps, and stays continuous the whole time — so as you scroll and space
   opens up, more of it is revealed. z-index below content, above the aurora. */
.bg-trace {
  position: fixed; left: 232px; right: 0; top: 52vh; height: 480px;
  transform: translateY(-50%); z-index: -1; pointer-events: none;
  opacity: 0.5;
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--accent) 50%, transparent));
}
:root[data-theme="dark"] .bg-trace { opacity: 0.55; }
:root[data-theme="light"] .bg-trace { opacity: 0.30; }
@media (max-width: 760px) { .bg-trace { left: 0; top: 46vh; opacity: 0.36; } }

/* the traveling light source — a short bright segment sweeps the line
   left→right, then goes dark for a long pause. Subtle, not attention-grabbing. */
.bg-trace-spark {
  stroke-dasharray: 42 1000;   /* one short lit segment, the rest gap */
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 6px var(--live)) drop-shadow(0 0 14px color-mix(in srgb, var(--live) 60%, transparent));
  animation: traceSpark 9s linear infinite;
}
@keyframes traceSpark {
  0%   { stroke-dashoffset: 0;    opacity: 0; }
  4%   { opacity: 0.9; }
  38%  { stroke-dashoffset: -840; opacity: 0.9; }
  44%  { stroke-dashoffset: -840; opacity: 0; }
  100% { stroke-dashoffset: -840; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .bg-trace-spark { display: none; } }

/* subtle branded ghost wordmark, bottom-right (as on the login) */
.bg-ghost {
  position: fixed; right: -0.22em; bottom: -0.16em; z-index: -1; pointer-events: none;
  font-family: var(--display); font-weight: 300; font-size: clamp(120px, 15vw, 300px);
  letter-spacing: -0.03em; line-height: 0.8; white-space: nowrap; user-select: none;
  color: var(--ink); opacity: 0.045;
}
@media (max-width: 760px) { .bg-ghost { right: -0.3em; font-size: 34vw; opacity: 0.05; } }

/* ── frosted-glass cards: they blur the signal line where it passes behind ──
   The production-line columns and agent cards were already glass; bring the
   panels, stat cards and hero into the same frosted-bubble language so the
   line softens under every surface and stays sharp only in the open gaps.
   Text sits on the translucent fill over a dark blurred backdrop → still legible. */
.panel, .icard {
  background: var(--glass);
  backdrop-filter: blur(var(--blur)) saturate(1.5);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.5);
}
.hero {
  background: linear-gradient(160deg, var(--glass), color-mix(in srgb, var(--accent-soft) 26%, var(--glass)));
  backdrop-filter: blur(calc(var(--blur) * 1.5)) saturate(1.5);
  -webkit-backdrop-filter: blur(calc(var(--blur) * 1.5)) saturate(1.5);
}

/* traveling light on the arrival-screen trace (login · boot · briefing) */
.sg-wave-spark {
  stroke-dasharray: 42 1000; stroke-dashoffset: 0;
  filter: drop-shadow(0 0 5px var(--g)) drop-shadow(0 0 12px color-mix(in srgb, var(--g) 55%, transparent));
  animation: traceSpark 7s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .sg-wave-spark { display: none; } }

/* ══════════════════════════════════════════════════════════════════════
   PREMIUM TOPBAR — frosted-glass housing + cohesive controls, matching the
   rest of the instrument language instead of reading as a plain bar.
   ══════════════════════════════════════════════════════════════════════ */
.topbar {
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  padding: 12px 6px 12px;
}
:root[data-theme="dark"] .topbar { background: color-mix(in srgb, var(--bg) 52%, transparent); }

/* platform switcher — a frosted pill group with a lit active tab */
.platforms {
  background: var(--glass-2); border: 1px solid var(--border); padding: 4px; border-radius: 12px;
  backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
  box-shadow: inset 0 1px 0 var(--glass-hi);
}
.plat { border-radius: 9px; font-weight: 600; letter-spacing: -0.005em; transition: all .2s var(--ease); }
.plat[aria-selected="true"] {
  background: color-mix(in srgb, var(--accent) 15%, var(--surface));
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  box-shadow: 0 1px 4px rgba(0,0,0,0.18), inset 0 1px 0 var(--glass-hi), 0 0 16px -5px var(--accent);
}

/* the control cluster (approvals · ask · export · theme) reads as one frosted set */
.nav-btn, .nav-chip {
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  background: var(--glass-2); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: inset 0 1px 0 var(--glass-hi);
}
.nav-btn:hover { background: var(--glass); border-color: var(--border-strong); }
.nav-chip { color: var(--accent-hover); border-color: color-mix(in srgb, var(--accent) 26%, var(--border)); background: var(--accent-soft); }
.nav-chip:hover { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.ask-btn { border-color: color-mix(in srgb, var(--live) 30%, var(--border)); }

/* ── production pipeline: clickable, bottleneck, view-all ─────────────── */
.pl-cap { width: 100%; text-align: left; cursor: pointer; font: inherit; }
.pl-cap:hover { border-color: color-mix(in srgb, var(--a) 55%, var(--border)); background: color-mix(in srgb, var(--a) 15%, var(--surface)); transform: translateX(1px); }
.pl-name { white-space: normal; line-height: 1.2; }   /* let "Awaiting Approval" wrap */
.pl-more { cursor: pointer; font: inherit; background: none; border: 0; text-align: left;
  color: var(--accent-hover); font-size: 10px; font-weight: 640; padding: 5px 2px 0; }
.pl-more:hover { color: var(--accent); }
.pl-col.bottleneck { border-color: color-mix(in srgb, var(--amber) 50%, var(--border));
  box-shadow: var(--sh-2), inset 0 1px 0 var(--glass-hi), 0 0 18px -6px var(--amber); }
.pl-bottle { font-family: var(--mono); font-size: 8px; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--amber); margin: -6px 0 8px; }
/* capsule detail drawer */
.cap-detail { display: flex; flex-direction: column; margin-bottom: 6px; }
.cap-row { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0;
  border-bottom: 1px solid var(--border); font-size: 13px; }
.cap-row:last-child { border-bottom: 0; }
.cap-k { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); }
.cap-v { color: var(--ink); font-weight: 560; text-align: right; min-width: 0; }
.cap-list-row { display: flex; align-items: center; gap: 10px; width: 100%; cursor: pointer; font: inherit; }
.cap-list-row .pl-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--a); flex: none; }

/* ── on-brand toast: frosted pill with a live signal dot ─────────────── */
.toast {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.01em;
  padding: 11px 16px; border-radius: 12px;
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: var(--sh-3), inset 0 1px 0 var(--glass-hi);
}
:root[data-theme="dark"] .toast { background: color-mix(in srgb, var(--surface) 78%, transparent); color: var(--ink); }
:root[data-theme="light"] .toast { background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--ink); }
.toast-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--live);
  box-shadow: 0 0 9px var(--live); flex: none; animation: sgpulse 2s ease-in-out infinite; }
.toast-msg { display: inline; }
.toast-msg .wm { font-family: var(--display); font-weight: 600; margin-right: 0.15em; }
.toast-msg .wm-bar { background: var(--live); box-shadow: 0 0 6px color-mix(in srgb, var(--live) 55%, transparent); }
@media (prefers-reduced-motion: reduce) { .toast-dot { animation: none; } }


/* ── two-path beta gate ────────────────────────────────────────────────────
   Already approved · Have an invite code. Same obsidian glass card, same
   signal language — the gate should read as exclusive and clear, never hostile. */
.auth-modes{display:flex; gap:6px; padding:4px; margin:0 0 18px; border-radius:12px;
  background:rgba(255,255,255,0.04); border:1px solid var(--border, rgba(255,255,255,0.09))}
.auth-mode{flex:1; padding:9px 10px; border:0; border-radius:9px; cursor:pointer; background:transparent;
  color:var(--ink-3, #6E6979); font-family:var(--mono, ui-monospace, Menlo, monospace);
  font-size:11px; letter-spacing:0.06em; transition:background .25s, color .25s}
.auth-mode:hover{color:var(--ink-2, #ABA6B8)}
.auth-mode.on{background:linear-gradient(180deg, rgba(124,108,255,0.22), rgba(124,108,255,0.10));
  color:var(--ink, #F5F3FA); box-shadow:inset 0 1px 0 rgba(255,255,255,0.12)}
.auth-mode:focus-visible{outline:2px solid var(--live, #34D399); outline-offset:2px}
.login-field .opt{color:var(--ink-3, #6E6979); font-weight:400; text-transform:none; letter-spacing:0}
.login-ok{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono, monospace);
  font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--live, #34D399)}
.login-err a{color:var(--accent, #7C6CFF)}
@media(max-width:420px){ .auth-mode{font-size:10px; padding:8px 6px} }


/* ── touch targets on the beta gate ────────────────────────────────────────
   The login buttons measured 38px on a 390px viewport — below the 44px that a
   thumb can reliably hit. This is where a beta creator's very first tap lands. */
@media (hover: none), (max-width: 480px) {
  .login-btn, .login-card .btn { min-height: 48px; }
  /* The build screen's card can outgrow a phone once the game mounts, and
     the screen was overflow:hidden — "Done playing" sat below the fold with
     no way to reach it. */
  .login-screen { overflow: auto; align-items: start; place-items: start center; }
  .login-field input { min-height: 46px; font-size: 16px; }  /* 16px: stops iOS zooming on focus */
  .auth-mode { min-height: 44px; }
}

/* No-goal honest state. The neutral default is target:0 — we never invent a
   creator's target — so these carry the "ask, don't fabricate" states that
   replaced "1,842 of 0 followers · 0 to go" and a dial pinned at 100%. */
.goal-cta{display:inline-block; text-decoration:none; margin-top:6px; padding:7px 12px; border-radius:8px; cursor:pointer;
  font-family:var(--mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  transition:background .25s var(--ease), border-color .25s var(--ease)}
.goal-cta:hover{background:color-mix(in srgb, var(--accent) 22%, transparent);
  border-color:color-mix(in srgb, var(--accent) 55%, transparent)}
.mc-pct-none{font-family:var(--display); font-size:30px; font-weight:600; color:var(--ink-3); line-height:1}

/* ── Founder admin queue (#admin) ─────────────────────────────────────────
   Reachable only by a platform admin via the emailed link or a direct URL;
   the server, not this stylesheet, decides what loads. */
/* override .login-screen's grid-centering: a tall queue must scroll from the
   top, not be vertically centered (which clips the first cards), and it must be
   fully opaque so the dashboard behind the fixed overlay never bleeds through. */
.admin-screen{display:block; place-items:initial; overflow-y:auto; padding:0; background:var(--bg)}
.admin-wrap{max-width:840px; margin:0 auto; padding:48px 24px 80px; position:relative; z-index:1}
.admin-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:28px}
.admin-eyebrow{display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.admin-title{font-size:clamp(26px,4vw,38px); font-weight:600; letter-spacing:-.02em; margin:8px 0 0}
.admin-count{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:14px}
.admin-empty,.admin-noaccess{padding:44px 24px; text-align:center; color:var(--ink-2); border:1px solid var(--border); border-radius:16px; background:var(--surface)}
.admin-noaccess h2{font-family:var(--display); font-size:20px; margin:0 0 8px; color:var(--ink)}
.admin-noaccess p{margin:0 0 18px; font-size:14px; color:var(--ink-2)}
.linklike{background:none; border:0; color:var(--accent); cursor:pointer; text-decoration:underline; font:inherit}

.ar-card{border:1px solid var(--border); border-radius:16px; background:var(--surface); padding:18px 20px; margin-bottom:14px}
.ar-top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.ar-name{font-family:var(--display); font-weight:600; font-size:16px; color:var(--ink)}
.ar-email{font-family:var(--mono); font-size:12.5px; color:var(--ink-2); margin-top:2px}
.ar-fields{display:grid; grid-template-columns:1fr 1fr; gap:10px 24px; margin:16px 0}
@media(max-width:640px){.ar-fields{grid-template-columns:1fr}}
.ar-field{display:flex; flex-direction:column; gap:2px; min-width:0}
.ar-k{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.ar-v{font-size:14px; color:var(--ink); word-break:break-word}
.ar-v a{color:var(--accent); text-decoration:none}
.ar-v a:hover{text-decoration:underline}
.ar-muted{color:var(--ink-3)}
.ar-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; border-top:1px solid var(--border); padding-top:14px}
.ar-when{font-family:var(--mono); font-size:11px; color:var(--ink-3)}
.ar-actions{display:flex; gap:8px; flex-wrap:wrap}
.ar-status{font-family:var(--mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase; padding:5px 10px; border-radius:999px; white-space:nowrap; border:1px solid transparent}
.ar-status-new,.ar-status-reviewing{color:#7C6CFF; background:color-mix(in srgb,#7C6CFF 12%,transparent); border-color:color-mix(in srgb,#7C6CFF 30%,transparent)}
.ar-status-approved,.ar-status-invited{color:var(--live); background:color-mix(in srgb,var(--live) 12%,transparent); border-color:color-mix(in srgb,var(--live) 30%,transparent)}
.ar-status-redeemed{color:var(--live); background:color-mix(in srgb,var(--live) 20%,transparent); border-color:color-mix(in srgb,var(--live) 45%,transparent)}
.ar-status-waitlisted{color:#B45309; background:color-mix(in srgb,#B45309 14%,transparent); border-color:color-mix(in srgb,#B45309 32%,transparent)}
.ar-status-declined,.ar-status-revoked,.ar-status-duplicate{color:var(--ink-3); background:color-mix(in srgb,var(--ink-3) 12%,transparent); border-color:var(--border)}

/* ── RunSignl HQ (#founder) + Beta Feedback (#feedback) ───────────────────
   Platform-level surfaces for a server-confirmed platform admin only. */
.founder-wrap{max-width:960px}
.founder-head-actions{display:flex; gap:8px; align-items:center}
.fc-strip{display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin:6px 0 26px}
@media(max-width:720px){.fc-strip{grid-template-columns:repeat(3,1fr)}}
.fc-stat{border:1px solid var(--border); border-radius:12px; background:var(--surface); padding:14px 12px; text-align:center}
.fc-stat-v{font-family:var(--display); font-size:24px; font-weight:600; color:var(--ink); line-height:1}
.fc-stat-l{font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-top:6px}
/* pull usage (founder) */
.pu-list{display:flex; flex-direction:column; gap:8px}
.pu-row{display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid var(--border); border-radius:12px; background:var(--surface); padding:10px 12px}
.pu-ws{font-size:13px; color:var(--ink-2); min-width:0}
.pu-ws code{font-family:var(--mono); color:var(--ink); background:rgba(255,255,255,0.04); padding:1px 6px; border-radius:6px}
.pu-meta{font-family:var(--mono); font-size:10.5px; color:var(--ink-3); letter-spacing:.02em}
.pu-due{color:var(--accent)}
.fc-note{font-family:var(--mono); font-size:10.5px; color:var(--ink-3); line-height:1.5; margin-top:18px; padding-top:14px; border-top:1px solid var(--border)}
.fc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:34px}
@media(max-width:720px){.fc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.fc-grid{grid-template-columns:1fr}}
.fc-card{text-align:left; border:1px solid var(--border); border-radius:16px; background:var(--surface); padding:18px; cursor:pointer; transition:border-color .2s, transform .2s; display:flex; flex-direction:column; gap:6px; min-height:104px}
.fc-card:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--border)); transform:translateY(-1px)}
.fc-card.soon{cursor:default; opacity:.72} .fc-card.soon:hover{transform:none; border-color:var(--border)}
.fc-card-top{display:flex; align-items:center; justify-content:space-between; gap:8px}
.fc-card-title{font-family:var(--display); font-weight:600; font-size:15px; color:var(--ink)}
.fc-card-badge{font-family:var(--mono); font-size:12px; color:var(--accent); background:color-mix(in srgb,var(--accent) 14%,transparent); border-radius:999px; padding:2px 9px}
.fc-card-desc{font-size:12.5px; color:var(--ink-2); flex:1}
.fc-open{font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent)}
.fc-soon{font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.fc-section-h{display:flex; align-items:baseline; gap:12px; font-family:var(--display); font-weight:600; font-size:16px; color:var(--ink); margin-bottom:12px}
.fc-hint{font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
.fc-ws-list{display:flex; flex-direction:column; gap:10px}
.ws-row{display:flex; align-items:center; justify-content:space-between; gap:14px; border:1px solid var(--border); border-radius:14px; background:var(--surface); padding:14px 16px}
.ws-row.ws-locked{opacity:.66}
.ws-name{font-family:var(--display); font-weight:600; font-size:15px; color:var(--ink); display:flex; align-items:center; gap:8px}
.ws-role{font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); border:1px solid var(--border); border-radius:999px; padding:2px 7px}
.ws-meta{font-family:var(--mono); font-size:11.5px; color:var(--ink-2); margin-top:3px}
.ws-slug{color:var(--ink-3)}
.ws-right{display:flex; align-items:center; gap:12px; white-space:nowrap}
.ws-tag{font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); border:1px solid var(--border); border-radius:999px; padding:3px 9px}
.ws-tag.ok{color:var(--live); border-color:color-mix(in srgb,var(--live) 35%,transparent)}
.ws-tag.warn{color:#B45309; border-color:color-mix(in srgb,#B45309 35%,transparent)}
.ws-noaccess{font-family:var(--mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3)}

/* founder nav section in the tenant sidebar */
.nav-admin-sec{margin-top:14px; padding-top:12px; border-top:1px solid var(--border)}
.nav-sec-label{font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); padding:0 12px 6px}
.nav-admin-item.danger{color:#E11D48}
.nav-admin-item.danger .li{stroke:#E11D48}

/* beta feedback */
.fb-meta{font-family:var(--mono); font-size:11.5px; color:var(--ink-2); margin-top:3px}
.fb-cat{color:var(--accent)} .fb-route{color:var(--ink-3)}
.fb-badges{display:flex; flex-wrap:wrap; gap:6px; margin:12px 0}
.fb-badge{font-family:var(--mono); font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-2); border:1px solid var(--border); border-radius:999px; padding:3px 9px}
.fb-badge.blocking{color:#E11D48; border-color:color-mix(in srgb,#E11D48 35%,transparent)}
.fb-badge.sev-high,.fb-badge.sev-critical{color:#B45309; border-color:color-mix(in srgb,#B45309 35%,transparent)}
.fb-msg{font-size:14px; color:var(--ink); line-height:1.5; margin:2px 0 14px; padding:12px 14px; background:color-mix(in srgb,var(--ink) 3%,transparent); border-radius:10px}
.fb-chips{display:flex; gap:6px; flex-wrap:wrap}
.fb-chip{font-family:var(--mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-2); border:1px solid var(--border); border-radius:999px; padding:5px 11px; cursor:pointer; background:none; transition:all .2s}
.fb-chip:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--border))}
.fb-chip.on{color:var(--accent); border-color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent)}
.fb-status-new,.fb-status-reviewing{color:#7C6CFF; background:color-mix(in srgb,#7C6CFF 12%,transparent); border-color:color-mix(in srgb,#7C6CFF 30%,transparent)}
.fb-status-planned{color:#B45309; background:color-mix(in srgb,#B45309 12%,transparent); border-color:color-mix(in srgb,#B45309 30%,transparent)}
.fb-status-resolved{color:var(--live); background:color-mix(in srgb,var(--live) 14%,transparent); border-color:color-mix(in srgb,var(--live) 32%,transparent)}
.fb-status-closed{color:var(--ink-3); border-color:var(--border)}

/* RunSignl HQ — description + overview label */
.fc-desc{font-size:14px; color:var(--ink-2); margin:0 0 20px; max-width:560px}
.fc-strip-label{font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:10px}

/* ── Inspiration: recoverable item states ─────────────────────────────────
   Retry/Remove live INSIDE the card. The first attempt put them in a sibling
   below it, which rendered them ~6px outside the card in the grid gutter —
   detached, and visually colliding with the next row. */
.ins-cell { display: flex; min-width: 0; }
.ins-cell > .ins-card { flex: 1; min-width: 0; }
/* the card is a div+role=button now (it contains real buttons), so it needs the
   focus affordance a <button> gave it for free */
.ins-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ins-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--border);
}
/* THE BUTTON WHOSE LABEL FELL OUT OF IT — reported four times, and the reason
   was never the padding. `.mini` (line 1983) is a 24x24 ICON button:
   `width:24px; height:24px`. These are TEXT buttons, and this override changed
   the font and the padding but never released the fixed box. width:24px is
   border-box, so it is both the flex basis AND the automatic minimum, letting
   the box size below its own label; height:24px has no matching release, so a
   label taller than 24px simply paints outside the border. Release both, floor
   the height instead of fixing it, and let the ROW wrap rather than the word. */
.ins-actions .mini {
  width: auto; height: auto;
  min-height: 28px;                 /* a floor for the touch target, not a ceiling */
  padding: 5px 10px;
  font-size: 11px; line-height: 1.4;
  display: inline-flex; align-items: center; justify-content: center;
  white-space: nowrap;              /* wrap the row of buttons, never the label */
  flex: 0 1 auto; text-align: center;
}
.ins-actions { flex-wrap: wrap; }
.ins-actions .mini[disabled] { opacity: .55; cursor: default; }
.ins-status {
  position: absolute; left: 8px; bottom: 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
  padding: 2px 7px; border-radius: 999px; text-transform: uppercase;
  background: rgba(15, 23, 42, .78); color: #fff; backdrop-filter: blur(6px);
}
.ins-status.failed  { background: rgba(220, 38, 38, .88); }
.ins-status.syncing { background: rgba(109, 93, 255, .88); }
.ins-status.queued  { background: rgba(100, 116, 139, .85); }
/* drawer recovery panel — sits at the top, above any analysis */
.ins-fail {
  margin-top: 10px; padding: 10px 12px; border-radius: var(--radius);
  border: 1px solid rgba(220, 38, 38, .35); background: rgba(220, 38, 38, .07);
  font-size: 13px; line-height: 1.5;
}
.ins-fail.queued  { border-color: var(--border); background: var(--glass); }
.ins-fail.syncing { border-color: rgba(109, 93, 255, .35); background: rgba(109, 93, 255, .07); }
.ins-fail b { display: block; margin-bottom: 2px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; }
.ins-fail .row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
@media (max-width: 560px) {
  .ins-actions .mini { flex: 1 1 100%; }   /* stack, never squeeze below a tap target */
}

/* ═══════════════════════════════════════════════════════════════════
   INSPIRATION RADAR — the Overview centrepiece
   Real posts that beat their own creator's average, with the evidence
   visible. Desktop shows up to 6 in a grid that never scrolls; mobile
   shows 3 across with GENUINE horizontal scroll. The scroll cue is
   driven by a class the JS sets only when overflow actually exists —
   an affordance that lies about scrollability is a bug, not a hint.
   ═══════════════════════════════════════════════════════════════════ */
.rd-wrap { position: relative; }
.rd-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px; padding: 4px 2px 10px;
}
@media (min-width: 1180px) { .rd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.rd-card {
  display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden; transition: border-color .2s ease, transform .2s ease;
}
.rd-card:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.rd-card.rd-done { opacity: .75; }

/* A dismissed card LEAVES. It used to just fade to .35 and sit in the grid,
   which read as "we heard you and did nothing" — the item still occupying the
   space an opportunity should have. The row is durably dismissed server-side;
   this is only the exit, long enough to read the confirmation first. */
.rd-leaving { transition: opacity .35s ease, transform .35s ease; opacity: 0; transform: translateY(6px) scale(.985); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .rd-leaving { transition: none; } }
.rd-card.is-built { border-color: color-mix(in srgb, var(--live) 45%, var(--line)); }

/* A POSTER, NOT A CARD. At 4/5 in a 317px column the image alone is 394px —
   half a screen before a single word of evidence, which is why one card filled
   the founder's viewport with empty space beside it. 16/10 is a preview: enough
   to recognise the post, small enough that the numbers and the reason are on
   screen with it. The detail below it now lives behind a disclosure. */
.rd-thumb {
  position: relative; aspect-ratio: 16 / 10; background: var(--panel);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.rd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* No usable image — either none was stored, or re-hosting failed and we refuse
   to hot-link Instagram's CDN (it returns 200 to curl and paints broken).
   COLLAPSE rather than reserve the 4/5 block: an empty 300px well above the
   evidence pushed everything that matters below the fold and read as broken. */
.rd-thumb.no-img { aspect-ratio: auto; min-height: 42px; justify-content: flex-start; }
.rd-thumb.no-img img { display: none; }
.rd-thumb.no-img .rd-prov { position: static; margin: 8px 0 8px 10px; }
.rd-thumb.no-img .rd-mult { top: 8px; }
.rd-prov {
  position: absolute; left: 8px; top: 8px; max-width: calc(100% - 16px);
  /* see the :has() rule below — the multiple badge shares this corner */
  font: 600 10.5px/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase;
  background: color-mix(in srgb, var(--bg) 82%, transparent); color: var(--fg);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 8px;
  backdrop-filter: blur(6px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rd-mult {
  position: absolute; right: 8px; top: 8px;
  font: 700 12px/1 var(--mono); color: var(--bg); background: var(--accent);
  border-radius: 999px; padding: 5px 9px;
}
/* THE BADGE IS NOT PART OF THE CHIP'S SPACE. Both are absolutely positioned in
   the same corner strip, so the provenance chip ellipsised at the CONTAINER
   edge and its last characters rendered UNDERNEATH the multiple — at four
   cards across, "FROM @a_long_handle (BENCHMARK)" lost the word BENCHMARK to a
   badge sitting on top of it. Reserve the badge's width so the ellipsis lands
   where a reader can see it. */
.rd-thumb:has(.rd-mult) .rd-prov { max-width: calc(100% - 74px); }

.rd-body { padding: 12px 13px 6px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.rd-why { font: 600 13px/1.45 var(--body); color: var(--fg); }
.rd-cap { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.rd-metrics { display: flex; gap: 12px; flex-wrap: wrap; }
.rd-m { font: 500 11.5px/1 var(--mono); color: var(--muted); }
.rd-m b { color: var(--fg); font-weight: 700; }
.rd-fresh { font: 500 11px/1 var(--mono); color: var(--muted); letter-spacing: .03em; }
.rd-fit {
  font-size: 12.5px; line-height: 1.55; color: var(--muted);
  border-left: 2px solid color-mix(in srgb, var(--accent) 50%, transparent);
  padding-left: 9px; margin-top: 2px;
}

.rd-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 13px 13px; align-items: center; }
.rd-actions .btn.sm { font-size: 12px; padding: 6px 10px; }
.rd-actions .linklike.sm { font-size: 11.5px; }

/* THE PANEL ENDS WHERE ITS SENTENCE ENDS. This is the first thing a creator
   with no benchmarks sees, and it was a 1140px-wide box holding a 62ch column —
   46% used, the rest a blank slab. The founder's note was exact: nothing should
   "span the whole screen for nothing". Bounding the panel rather than only the
   paragraph inside it is what actually removes the emptiness. */
#radarEmpty { max-width: 660px; }

/* Qualifications on the SECTION, where they qualify everything below them.
   A wider window or thin coverage is a property of the whole board, and
   repeating it on six cards would read as six separate warnings. */
.rd-notes { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 14px; }
.rd-note {
  font-size: 12.5px; line-height: 1.5; color: var(--muted);
  padding: 7px 11px; border-radius: 8px;
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  border-left: 2px solid color-mix(in srgb, var(--fg) 22%, transparent);
}

/* The deep breakdown no longer renders inside the card — it lives in the
   evidence panel (dialog.ev-modal), which has the width to show it whole.
   The .rd-bd-* rules that styled the in-card version are gone with it. */

/* ── the Content drawer: the library is the page, editing is a side panel ──
   Wide enough to build in, never the whole screen — the founder's exact ask.
   On mobile the drawer already goes full-width via the base drawer rules. */
#drawer.wide { width: min(720px, 92vw); }
.co-drawer-body { padding-top: 4px; }
.co-drawer-body .page-head h2 { font-size: 18px; }
.co-drawer-body .panel { margin-bottom: 12px; }
/* the workflow rail — where this record stands, always visible.

   IT USED TO PAINT ON TOP OF THE RECORD. `background: inherit` resolved to
   transparent, because .co-drawer-body sets no background of its own, so a
   sticky bar with nothing behind it let the title, the shot plan and the
   cover text scroll straight through it. Sticky reserves its own slot in
   flow, so the bar was never in the wrong place — it was simply see-through,
   and every later section scrolled underneath it in the same pixels.

   Fixed with a real surface behind it and a stacking context above the
   content it covers. --fg and --muted, used throughout this block, are not
   declared anywhere in this stylesheet: every rule that referenced them was
   invalid, which is why the inactive steps had no chip background at all. */
.co-rail {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
  position: sticky; top: 0; z-index: 5;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  /* FULL-BLEED, FLUSH TO THE SCROLLPORT. .drawer-body is the scroll container
     and carries 20px 26px of padding. A STICKY INSET RESOLVES AGAINST THE
     SCROLLPORT'S PADDING BOX, so `top: 0` parks the bar 20px down however much
     negative margin it carries, and content slides through that strip above it
     — the same defect wearing a smaller coat. The container's top padding is
     therefore removed when the rail is present, and the bar takes the side
     padding itself so it still reaches both edges. */
  margin: 0 -26px 6px; padding: 12px 26px;
}
.drawer-body:has(> .co-rail) { padding-top: 0; }
.co-rail-step {
  font: 600 10px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase;
  padding: 5px 8px; border-radius: 6px; white-space: nowrap;
  color: var(--ink-3); background: var(--surface-2);
  border: 1px solid var(--border);
}
.co-rail-step.done { color: var(--ink); border-color: color-mix(in srgb, var(--live, #10B981) 45%, transparent); }
.co-rail-step.here { color: #fff; background: var(--accent); border-color: var(--accent); }
.co-rail-link { flex: 0 0 10px; height: 1px; background: var(--border-strong); }
.co-rail-link.done { background: color-mix(in srgb, var(--live, #10B981) 55%, transparent); }
/* On a phone five wrapped chips become a four-line bar that owns the screen.
   One scrollable line instead — the rail reports status, it is not the page. */
@media (max-width: 560px) {
  .co-rail { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .co-rail::-webkit-scrollbar { display: none; }
}

/* ── boot pending / boot error — the two states that replace "blank" ──────
   Full-viewport, above everything, deliberately plain: this paints before the
   app's data exists, so it can depend on nothing but the brand tokens. */
#bootPending, #bootError {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg, #0b0b12);
}
#bootPending .bp-core, #bootError .bp-core {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  max-width: 46ch; text-align: center; padding: 24px;
}
.bp-line { font: 500 14px/1.5 var(--body, sans-serif); color: var(--fg, #eee); }
.bp-sub { font-size: 13px; line-height: 1.6; color: var(--muted, #9aa); }
.bp-bar { width: 160px; height: 2px; border-radius: 2px; overflow: hidden;
  background: color-mix(in srgb, var(--fg, #fff) 12%, transparent); }
.bp-bar i { display: block; height: 100%; width: 40%;
  background: var(--accent, #6D5DFF); border-radius: 2px;
  animation: bpSlide 1.2s ease-in-out infinite; }
@keyframes bpSlide { 0% { transform: translateX(-100%); } 100% { transform: translateX(400%); } }

.rd-reasons { padding: 0 13px 13px; }
.rd-reasons-t { font-size: 12px; color: var(--muted); margin-bottom: 7px; line-height: 1.5; }
.rd-reasons-c { display: flex; flex-wrap: wrap; gap: 6px; }

.rd-said {
  padding: 10px 13px 13px; font-size: 12.5px; line-height: 1.55;
  color: var(--live); border-top: 1px solid var(--line);
}

/* ── mobile: 3 across, real horizontal scroll ── */
@media (max-width: 860px) {
  .rd-grid {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 12px; padding-bottom: 14px; scrollbar-width: thin;
  }
  .rd-card { flex: 0 0 calc((100% - 24px) / 3); min-width: 200px; scroll-snap-align: start; }
  /* the cue appears ONLY when .has-overflow is set by JS after measuring */
  .rd-wrap.has-overflow::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 14px; width: 48px;
    background: linear-gradient(to right, transparent, var(--bg));
    pointer-events: none; opacity: 1; transition: opacity .2s ease;
  }
  .rd-wrap.has-overflow.at-end::after { opacity: 0; }
}

/* ── Benchmark Discovery ──────────────────────────────────────────────────
   Candidate cards. Selection is the whole interaction, so the selected state
   has to be unmistakable at a glance — a creator picking 3 of 8 should never
   have to count checkmarks to know where they are. */
.bm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 16px; }
/* ══ WHAT WE WILL LOOK FOR — the queries, before they are run ═══════════════
   Editable, quiet, and deliberately not styled like a result: this is a
   settings surface the creator passes through, not the payoff. */
.bm-intent-g { margin-top: 16px; }
.bm-intent-l { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-3); margin-bottom: 7px; }
.bm-chips { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.bm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px 5px 11px;
  border-radius: 999px; font-size: 12.5px; line-height: 1;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent); color: var(--ink); }
/* An exclusion is not an accent — it is the absence of one. */
.bm-chip.no { background: var(--surface-2); border-color: var(--border); color: var(--muted); }
.bm-chip-x { border: 0; background: none; cursor: pointer; padding: 0 2px; line-height: 1;
  font-size: 15px; color: inherit; opacity: .55; }
.bm-chip-x:hover { opacity: 1; }
.bm-chip-in { flex: 1 1 170px; min-width: 150px; padding: 6px 10px; border-radius: 999px;
  border: 1px dashed var(--border); background: transparent; color: var(--ink);
  font: inherit; font-size: 12.5px; }
.bm-chip-in:focus { outline: none; border-style: solid; border-color: var(--accent); }
.bm-toggle { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px;
  font-size: 13px; cursor: pointer; }
.bm-toggle input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }

/* COMPARABLE OR ASPIRATIONAL, legible at a glance and never blended. */
.bm-stage { display: inline-flex; align-items: center; gap: 7px; margin-top: 9px;
  font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.bm-stage.cmp { color: var(--live); }
.bm-stage.asp { color: var(--ink-3); }
.bm-stage-x { opacity: .7; text-transform: none; letter-spacing: 0; font-size: 10.5px; }

/* The matched terms, shown as data rather than prose. */
.bm-terms { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.bm-terms span { font-family: var(--mono); font-size: 10px; padding: 2px 6px; border-radius: 4px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-3); }

.bm-ev-c { color: var(--muted); }
.bm-ev-m { margin-top: 2px; font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }
/* An absence of numbers should not look like a number. */
.bm-ev-m.none { font-style: italic; opacity: .75; }
/* One post at several times an account's own normal reach is the strongest
   evidence we ever have. It is allowed to look like it. */
.bm-ev-p.out { padding-left: 8px; border-left: 2px solid var(--accent); }

/* ══ THE GUIDED CONTENT WORKSPACE ══════════════════════════════════════════
   The workbench was five stacked panels of empty white boxes. This is the
   answer to "where am I, what's done, what's missing, what do I do next" —
   asked and answered before a creator has to scroll. */
.cw-head { padding: 4px 2px 18px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.cw-stage { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.cw-stage-now { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--accent); }
.cw-stage-src { font-size: 11.5px; color: var(--ink-3); }
.cw-title { font-size: 21px; line-height: 1.25; margin: 0 0 12px; }

/* Progress is a fact about the record, not a motivational device: it counts
   sections that genuinely hold something. */
.cw-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cw-bar { flex: 1 1 auto; height: 4px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.cw-bar i { display: block; height: 100%; background: var(--accent); transition: width .3s ease; }
.cw-count { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); white-space: nowrap; }
.cw-secs { display: flex; flex-wrap: wrap; gap: 6px; }
.cw-sec { font-size: 11.5px; padding: 3px 8px; border-radius: 999px; color: var(--ink-3);
  background: var(--surface-2); border: 1px solid var(--border); }
.cw-sec.on { color: var(--live); border-color: color-mix(in srgb, var(--live) 40%, transparent); }

/* ONE next action. A workspace that offers six equal buttons has told the
   creator nothing about which one is theirs. */
.cw-next { margin-top: 16px; padding: 14px; border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent); }
.cw-next-l { font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--accent); margin-bottom: 7px; }
.cw-next-w { margin-top: 8px; font-size: 12.5px; line-height: 1.6; color: var(--muted); max-width: 60ch; }

.cw-block { margin-bottom: 22px; }
.cw-block-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.cw-block-h h3 { font-size: 14px; margin: 0; }
.cw-block-h span { font-size: 11.5px; color: var(--ink-3); }
.cw-empty { padding: 12px 14px; border-radius: 9px; border: 1px dashed var(--border);
  font-size: 12.5px; line-height: 1.65; color: var(--muted); max-width: 64ch; }
.cw-note { margin-top: 8px; font-size: 12px; color: var(--ink-3); max-width: 62ch; }
.cw-note.inline { margin-left: 10px; }

.cw-field { margin-bottom: 12px; }
.cw-field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.cw-field input, .cw-field textarea { width: 100%; box-sizing: border-box; padding: 9px 11px;
  border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2);
  color: var(--ink); font: inherit; font-size: 13.5px; line-height: 1.6; }
.cw-field input:focus, .cw-field textarea:focus { outline: none; border-color: var(--accent); }
.cw-prov { font-size: 10px; font-family: var(--mono); text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-3); opacity: .85; margin-left: 6px; }
.cw-ro { padding: 9px 11px; border-radius: 8px; background: var(--surface-2);
  border: 1px solid var(--border); font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.cw-ro-empty { color: var(--ink-3); font-style: italic; }
.cw-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* How it reads — the closest thing to seeing the post before it exists. */
.cw-preview { padding: 14px 16px; border-radius: 10px; background: var(--surface-2);
  border: 1px solid var(--border); }
.cw-prev-hook { font-size: 15.5px; font-weight: 600; line-height: 1.4; }
.cw-prev-cap { margin-top: 9px; font-size: 13px; line-height: 1.7; color: var(--muted); white-space: pre-line; }
.cw-prev-cta { margin-top: 9px; font-size: 12.5px; color: var(--accent); }

.cw-script { margin: 0; padding-left: 22px; font-size: 13.5px; line-height: 1.85; }
.cw-script li { margin: 3px 0; }
.cw-shots { display: flex; flex-direction: column; gap: 9px; }
.cw-shot { padding: 10px 12px; border-radius: 9px; background: var(--surface-2);
  border: 1px solid var(--border); font-size: 13px; line-height: 1.6; }
.cw-shot-h { font-weight: 600; margin-bottom: 3px; }
.cw-shot-h span { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); font-weight: 400; }
.cw-shot-m { margin-top: 4px; font-size: 11.5px; color: var(--ink-3); }
.cw-kv { margin-bottom: 10px; font-size: 13px; line-height: 1.65; }
.cw-kv b { display: block; font-size: 11.5px; color: var(--ink-3); font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }

.cw-warn { margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.8; color: var(--muted); }
.cw-lists { display: flex; flex-wrap: wrap; gap: 18px; }
.cw-list { flex: 1 1 180px; min-width: 160px; }
.cw-list-h { font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-3); margin-bottom: 6px; }
.cw-list-i { font-size: 12.5px; line-height: 1.9; color: var(--muted); }
.cw-list-i.done { color: var(--live); }
.cw-list-i em { font-style: normal; font-size: 10.5px; color: var(--ink-3); }

.cw-save { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.cw-save-s { font-size: 12.5px; color: var(--muted); }
.cw-exports { display: flex; flex-wrap: wrap; gap: 7px; }

@media (max-width: 620px) { .cw-two { grid-template-columns: 1fr; } }

/* WHERE A SAVED REEL ENDED UP. A board of saved things that never says what
   became of them is a graveyard; this is the line that makes it a workflow. */
.ins-dest { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px;
  padding: 7px 10px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); }
.ins-dest.card { margin-top: 8px; padding: 5px 8px; font-size: 12px; }
.ins-dest-l { font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--live); }

/* ── DECIDED WORK, kept but stood down ─────────────────────────────────────
   A decision removes the card from the active batch. It does not remove the
   record of it: a creator who approved six things should be able to see the
   six, and reach what each one became. */
.gen-decided { margin-top: 10px; }
.gen-decided > summary { cursor: pointer; font-size: 12.5px; color: var(--ink-3); padding: 4px 0; }
.gen-decided-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 7px 2px; border-top: 1px solid var(--border); font-size: 12.5px; }
.gen-decided-t { color: var(--muted); flex: 1 1 220px; min-width: 0; }
.gen-decided-why { color: var(--ink-3); font-size: 11.5px; }
.gen-empty { padding: 14px 2px; font-size: 13px; color: var(--muted); }

/* WHY THIS CREATOR — the evidence a card owes the person reading it. Quiet
   type: this is supporting reasoning, not a headline, and it must never
   out-shout the handle it explains. */
.bm-why { margin: 8px 0 0; padding-left: 15px; font-size: 12.5px; line-height: 1.65; color: var(--ink-3); }
.bm-why li { margin: 1px 0; }
.bm-match { margin-top: 7px; font-size: 11.5px; font-family: var(--mono, "JetBrains Mono", monospace);
  text-transform: uppercase; letter-spacing: .04em; color: var(--accent); }
.bm-ev { margin-top: 9px; padding: 8px 10px; border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--border); }
.bm-ev-l { display: block; font-size: 10.5px; font-family: var(--mono, "JetBrains Mono", monospace);
  text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin-bottom: 4px; }
.bm-ev-p { font-size: 12px; line-height: 1.55; color: var(--muted); }
.bm-ev-p + .bm-ev-p { margin-top: 3px; }

/* The search is genuinely still working — a live dot says so without claiming
   progress we can't measure. `--live` green is fixed brand, never the accent. */
.bm-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--live); flex: 0 0 auto;
  box-shadow: 0 0 0 0 var(--live); animation: bmPulse 1.8s ease-out infinite; }
@keyframes bmPulse { 70% { box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } }
@media (prefers-reduced-motion: reduce) { .bm-pulse { animation: none; } }
.bm-card {
  border: 1px solid var(--border); border-radius: 12px; padding: 14px;
  background: var(--surface); cursor: pointer; transition: border-color .15s, background .15s, transform .1s;
}
.bm-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.bm-card:active { transform: scale(.995); }
.bm-card.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 40%, var(--surface)); }
.bm-top { display: flex; align-items: center; gap: 10px; }
.bm-av { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: 0 0 38px; background: var(--surface-2); }
.bm-av-x { display: grid; place-items: center; font-family: var(--mono); font-size: 15px; color: var(--ink-2); }
.bm-h { font-family: var(--mono); font-size: 13px; font-weight: 600; }
.bm-n { font-size: 12px; color: var(--ink-3); margin-top: 1px; }
.bm-check { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--border); color: #fff; font-size: 13px; }
.bm-card.on .bm-check { background: var(--accent); border-color: var(--accent); }
.bm-f { font-size: 12.5px; color: var(--ink-2); margin-top: 10px; }
.bm-f b { font-family: var(--mono); }
.bm-w { font-size: 12.5px; line-height: 1.55; color: var(--ink-2); margin-top: 8px; }
/* The claim and its limit, on the card itself: existence, not endorsement. */
.bm-v { font-size: 11.5px; color: var(--ink-3); margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); }

.bm-cost { margin-top: 16px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.bm-cost-n { font-family: var(--mono); font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
.bm-cost-s { font-size: 12.5px; line-height: 1.6; color: var(--ink-3); margin-top: 6px; }

@media (max-width: 720px) {
  .bm-grid { grid-template-columns: 1fr; }
}

/* Limited benchmark coverage — stated plainly, never hidden. One real, active
   account is genuine evidence; pretending otherwise blocked a creator who had
   exactly that. The note explains the narrower view and what widens it. */
.bm-limited {
  margin-top: 12px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  background: color-mix(in srgb, var(--accent-soft) 30%, var(--surface-2));
  font-size: 12.5px; line-height: 1.6; color: var(--ink-2); max-width: 64ch;
}

/* Content list rows. The title is the long, unpredictable part — it must wrap
   rather than push the Open button off a 390px screen, which is how a list
   turns into a horizontal-scroll dead end. */
.co-row .t { gap: 10px; }
.co-row .t > span { overflow-wrap: anywhere; line-height: 1.45; }
.co-row .t > .btn { flex: 0 0 auto; }
.co-row .src { font-size: 11px; }

/* ══ DISCOVERY IS A POST GRID ═══════════════════════════════════════════════
   The screen this replaces was a column of tall creator cards — one of them,
   on a real account, ran the length of the viewport with no image on it. The
   founder's words: "the Card shouldn't be that long".

   So the unit on screen is now the POST: a thumbnail, a caption line, a date,
   the real public numbers, and a link to the original. Creators are a compact
   header over their own posts, not a wall of prose above them. Every card has a
   hard ceiling on both desktop and mobile, and the reasoning collapses. */
.bm-groups { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.bm-group { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); padding: 12px 14px 14px; }

.bm-ghead { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.bm-gwho { min-width: 0; }
.bm-ghead .bm-h { display: inline-flex; align-items: center; gap: 4px; color: var(--ink);
  text-decoration: none; border-bottom: 1px solid transparent; }
.bm-ghead .bm-h:hover { color: var(--accent); border-bottom-color: currentColor; }
.bm-gnum { margin-left: auto; text-align: right; font-size: 12.5px; color: var(--ink-2); }
.bm-gnum b { font-family: var(--mono); }
.bm-gnum .bm-stage { display: block; margin-top: 2px; }
.bm-learn { flex: 0 0 auto; font-size: 12.5px; padding: 7px 12px; }

/* THE POSTS. A responsive grid that stays legible from 320px to a wide desktop
   without ever letting one card grow taller than the rest. */
.bm-posts { display: grid; gap: 10px; margin-top: 12px;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); }
.bm-post { margin: 0; border: 1px solid var(--border); border-radius: 11px; overflow: hidden;
  background: var(--surface-2); cursor: pointer; display: flex; flex-direction: column;
  max-height: 320px; transition: border-color .15s, box-shadow .15s, transform .1s; }
.bm-post:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.bm-post:active { transform: scale(.995); }
.bm-post:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bm-post.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.bm-post.out { border-left: 3px solid var(--accent); }

.bm-thumb { position: relative; aspect-ratio: 4 / 5; background: var(--surface-3, var(--surface)); overflow: hidden; }
.bm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A thumbnail we could not re-host says so. Instagram's CDN blocks hot-linking,
   so the alternative is a torn-image icon that reads as a broken product. */
.bm-thumb-x { width: 100%; height: 100%; display: grid; place-items: center; padding: 8px; text-align: center;
  font-family: var(--mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.bm-vid { position: absolute; left: 7px; bottom: 7px; font-size: 10px; color: #fff;
  background: rgba(0, 0, 0, .55); border-radius: 5px; padding: 1px 5px; }
.bm-tick { position: absolute; right: 7px; top: 7px; width: 21px; height: 21px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; color: #fff;
  background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .55); }
.bm-post.on .bm-tick { background: var(--accent); border-color: var(--accent); }

.bm-post figcaption { padding: 8px 9px 9px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bm-pc { font-size: 12px; line-height: 1.45; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bm-pm { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }
.bm-pm.none { font-style: italic; opacity: .75; }
.bm-out { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); }
.bm-open { font-size: 11.5px; color: var(--muted); text-decoration: none; margin-top: 1px; }
.bm-open:hover { color: var(--accent); text-decoration: underline; }

/* The reasoning is real and checkable — it is just not what anyone wants to
   read before they have looked at a single picture. */
.bm-why-d { margin-top: 11px; }
.bm-why-d > summary { cursor: pointer; font-size: 12px; color: var(--muted); }
.bm-excl { margin-top: 14px; }
.bm-excl > summary { cursor: pointer; font-size: 12.5px; color: var(--muted); }
.bm-excl-b { margin-top: 8px; font-size: 12.5px; color: var(--muted); line-height: 1.7; max-height: 260px; overflow-y: auto; }
.bm-excl-h { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3); margin: 9px 0 3px; }

.bm-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.bm-cta { margin-top: 18px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* THE DIRECTION, IN THE CREATOR'S OWN WORDS — editable, because the product
   composing a sentence it got wrong is worse than not composing one. */
.bm-direction { width: 100%; max-width: 66ch; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
  font: inherit; font-size: 13.5px; line-height: 1.5; resize: vertical; }
.bm-direction:focus { outline: none; border-color: var(--accent); }

/* A SUBJECT LANE, and where it came from. Traceable, so a creator can tell the
   difference between what they said and what we inferred. */
.bm-lanes { display: flex; flex-wrap: wrap; gap: 8px; }
.bm-lane { text-align: left; border: 1px solid var(--border); border-radius: 10px; padding: 7px 11px;
  background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); cursor: pointer;
  transition: opacity .15s, border-color .15s; }
.bm-lane.off { background: var(--surface-2); opacity: .5; border-style: dashed; }
.bm-lane-t { display: block; font-size: 13px; font-weight: 600; color: var(--ink); }
.bm-lane-s { display: block; font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-3); margin-top: 2px; }

@media (max-width: 640px) {
  .bm-posts { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
  .bm-post { max-height: 286px; }
  .bm-gnum { margin-left: 0; text-align: left; width: 100%; }
  .bm-learn { width: 100%; }
  .bm-group { padding: 11px 11px 12px; }
}

/* A SUBJECT WE KEPT BUT WILL NOT SEARCH. Held, not deleted: it is the
   creator's own word for what they make, and it becomes searchable the moment
   they tell us who it is for. Dashed and quiet, never red — nothing is wrong,
   it is simply waiting. */
.bm-lane.held { background: var(--surface-2); border-style: dashed; opacity: .72; }
.bm-lane.held .bm-lane-s { color: var(--accent); }



/* ═══════════════════════════════════════════════════════════════════
   WHAT SHOULD YOU CREATE NEXT — three contained capsules.
   The first pass was three oversized flat panels that bled into the
   page background and dumped every field at once; the founder could
   not scan them. These are bounded surfaces with a real edge, a
   compact hierarchy, and one deliberate disclosure for the rest.

   TOKENS: --border / --glass / --ink-2 are the ones this stylesheet actually
   defines. `--line`, `--card` and `--muted` are used by older components and
   are declared NOWHERE, so `border: 1px solid var(--line)` computes to no
   border at all — which is exactly why those cards dissolve into the page.
   Reported separately; not fixed here.
   ═══════════════════════════════════════════════════════════════════ */
.clo-wrap { margin-bottom: 22px; }
/* align-items:start defeated the point of margin-top:auto on .clo-actions —
   the capsules never stretched to a shared height, so each button sat at the
   bottom of its own shorter box and the row of actions stepped down by 50px.
   Stretch is the default; it was overridden. */
.clo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.clo-status { padding: 18px 20px; font-size: 13.5px; color: var(--ink-2);
  background: var(--glass); border: 1px solid var(--border); border-radius: 16px; }
.clo-cap { display: flex; flex-direction: column; gap: 9px; margin: 0;
  background: var(--glass); border: 1px solid var(--border); border-radius: 16px;
  padding: 16px 17px 15px;
  /* A real edge, so the capsule sits ON the page rather than dissolving into
     it — the specific thing that made the first pass feel unfinished. */
  box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 8px 24px -16px rgba(0,0,0,.5);
  transition: border-color .18s ease; }
.clo-cap:hover { border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); }
.clo-cap h4 { font: 600 14.5px/1.35 var(--display); margin: 0; letter-spacing: -.005em; }
.clo-obj { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.clo-labels { display: flex; gap: 5px; flex-wrap: wrap; }
.clo-label { font: 600 9px var(--mono); letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 999px; }
.clo-own   { color: var(--live);   background: color-mix(in srgb, var(--live) 15%, transparent); }
.clo-bench { color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent); }
.clo-stated{ color: var(--ink-3);  background: var(--surface-2); }
.clo-meta { font: 10.5px var(--mono); letter-spacing: .03em; color: var(--ink-3); }
.clo-hook { font-size: 12.5px; line-height: 1.5; color: var(--ink);
  background: var(--surface-2); border-radius: 10px; padding: 9px 11px; }
.clo-hook span { display: block; font: 600 9px var(--mono); letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px; }
.clo-limits { font-size: 11px; line-height: 1.45; color: var(--ink-3); }
.clo-more summary { font: 600 11.5px var(--body); cursor: pointer; color: var(--accent);
  list-style: none; padding: 2px 0; }
.clo-more summary::-webkit-details-marker { display: none; }
.clo-more summary::before { content: "+ "; font-weight: 400; }
.clo-more[open] summary::before { content: "- "; }
.clo-detail { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 9px;
  display: flex; flex-direction: column; gap: 6px; }
.clo-line { font-size: 12px; line-height: 1.55; color: var(--ink-2); }
.clo-line b { color: var(--ink); font-weight: 600; }
.clo-detail ul { margin: 0 0 0 16px; font-size: 12px; line-height: 1.6; color: var(--ink-2); }
.clo-warn { font-size: 11.5px; line-height: 1.5; color: var(--ink-2);
  border-left: 2px solid var(--accent); padding-left: 9px; }
.clo-note { font-size: 11.5px; line-height: 1.5; color: var(--ink-3);
  border-left: 2px solid var(--border-strong); padding-left: 9px; }
/* Evidence and strategy are visually distinct, because conflating them is
   the failure this whole pass is about. */
.clo-detail ul.clo-ev  { list-style: none; margin-left: 0; }
.clo-detail ul.clo-ev li::before  { content: "✓ "; color: var(--live); }
.clo-detail ul.clo-gs  { list-style: none; margin-left: 0; color: var(--ink-3); }
.clo-detail ul.clo-gs li::before  { content: "· "; }
/* THE ACTION SITS ON THE SAME LINE IN ALL THREE. The capsules are grid
   siblings of differing text length, so the buttons landed at three different
   heights; margin-top:auto pushes each one to the bottom of its own capsule
   and the row reads level. "Open the draft" keeps its own words — an already
   built opportunity must not offer to build again — but wears the same
   button, so only the label differs, not the weight. */
.clo-actions { margin-top: auto; padding-top: 10px; }
.clo-actions .btn { width: 100%; justify-content: center; }
@media (max-width: 1080px) { .clo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .clo-grid { grid-template-columns: 1fr; gap: 12px; }
  .clo-cap { padding: 15px 16px 14px; } }

/* A capsule with no subject in it is a template and looks like one: the accent
   border comes off, and the label says what it is instead of claiming to be
   "based on your onboarding answers". */
.clo-cap.is-template { border-style: dashed; }
.clo-label.is-tmpl { color: var(--ink-3); background: var(--surface-2); border-color: var(--border-strong); }

/* Why "Mark ready" was refused, named section by section, and it stays on
   screen until the creator fixes it. */
.rd-refusal {
  margin-top: 10px; padding: 10px 12px; border-radius: 10px;
  font-size: 12.5px; line-height: 1.55; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--border-strong);
  border-left: 3px solid var(--accent);
}
.rd-refusal[hidden] { display: none; }

/* THE READINESS CONDITIONS, as rows a creator can act on. Every one of these
   is a condition the server's gate actually reads (scripts/content-ops.js
   readinessReport) — three of them used to be invisible, which is how a record
   could be refused for boxes no screen had ever offered. */
.rd-list { display: flex; flex-direction: column; gap: 2px; padding: 6px 0 2px; }
.rd-item { display: flex; align-items: flex-start; gap: 9px; padding: 7px 8px; border-radius: 9px;
  font-size: 13.5px; line-height: 1.45; color: var(--ink); cursor: pointer; }
.rd-item:hover { background: var(--surface-2); }
.rd-item input { margin-top: 2px; flex: none; accent-color: var(--accent); width: 16px; height: 16px; }
.rd-item span { flex: 1 1 auto; min-width: 0; }
.rd-item.done span { color: var(--ink-2); }
.rd-req, .rd-opt { flex: none; font: 600 9.5px/1.6 var(--mono); letter-spacing: .09em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--ink-2); font-style: normal; }
.rd-req { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
/* A package section is NOT a box to tick — saying so stops the panel implying
   the creator can declare a missing script done. */
.rd-open { margin-top: 8px; padding: 10px 12px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--border); }
.rd-open-h { font: 600 11px/1.5 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.rd-open ul { margin: 6px 0 0; padding-left: 16px; font-size: 13px; line-height: 1.7; color: var(--ink); }
.rd-open i { color: var(--ink-2); font-style: normal; }
.rd-left { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }

/* ── the package, printed ──────────────────────────────────────────────────
   A creator standing in a room with a phone and a printout.

   THE FIRST VERSION WAS UNREADABLE, and the reason is worth writing down: it
   set `color` on `.pp-doc` and trusted inheritance. Inheritance loses. Every
   global rule in this stylesheet that targets `h1`, `h2` or `p` directly beats
   an inherited value, so the dark-theme ink stayed dark and printed onto a
   page the printer renders white — dark on dark, exactly as reported.

   So the print rules do not inherit anything. They reset every descendant to
   black on transparent with one blanket rule, then re-apply the few tones that
   carry meaning. Backgrounds, shadows and borders from the app are stripped
   rather than overridden one at a time, because the next component added to
   this document would arrive dark again. */
#printPackage { display: none; }
.cw-exports-strong { margin-top: 8px; }

@media print {
  /* The page itself, not just the body — a dark html background prints. */
  html, body { background: #fff !important; }

  /* Nothing of the app: nav, drawer, modal, toasts, the feedback button and
     the decorative aurora are all direct children of body or inside one. */
  body.printing-package > * { display: none !important; }
  body.printing-package #printPackage { display: block !important; }

  /* THE BLANKET RESET. Anything inside the printed document is black text on
     nothing, with no app chrome carried in. */
  body.printing-package #printPackage,
  body.printing-package #printPackage * {
    color: #000 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
  }

  .pp-doc { max-width: 100%; font: 11.5pt/1.55 Georgia, "Times New Roman", serif; }
  .pp-doc h1 { font-size: 21pt; line-height: 1.2; margin: 0 0 10pt; font-weight: 700; }
  .pp-doc h2 { font-size: 12pt; margin: 16pt 0 6pt; text-transform: uppercase;
    letter-spacing: .06em; font-weight: 700;
    /* A visible rule under every section label, in ink the printer will lay
       down rather than a token that resolves to a dark-theme grey. */
    border-bottom: 0.75pt solid #000 !important; padding-bottom: 3pt; }
  .pp-doc p { margin: 0 0 7pt; }
  /* The two tones that carry meaning survive the reset, restated after it. */
  .pp-doc .pp-meta { font-size: 9.5pt; color: #333 !important; margin: 0 0 3pt; }
  .pp-doc .pp-li { margin: 0 0 4pt; padding-left: 12pt; }
  .pp-doc hr { border: 0 !important; border-top: 0.75pt solid #999 !important; margin: 12pt 0; }

  /* The incompleteness notice has to survive the printer — a creator who
     prints this and drives to a shoot needs to see it. */
  .pp-doc .pp-warn { border: 1.5pt solid #000 !important; padding: 8pt 10pt;
    margin: 10pt 0 14pt; font-weight: 700; break-inside: avoid; page-break-inside: avoid; }

  /* Long sections break cleanly: a heading never ends a page, and a paragraph
     never splits across one. */
  .pp-doc h1, .pp-doc h2 { break-after: avoid; page-break-after: avoid; }
  .pp-doc p, .pp-doc .pp-li { break-inside: avoid; page-break-inside: avoid; orphans: 3; widows: 3; }

  @page { margin: 16mm; }
}
/* A second closing brace lived here. CSS's error recovery reconsumes a stray
   top-level `}` as the start of the NEXT rule's prelude, which silently
   deletes that rule — and the rule after this brace was the subject modal's
   backdrop. The founder's "popup overlaps the app, bottom-left" was this one
   character: the dialog's positioning never parsed at all. */

/* ── the subject modal: the one input the whole journey turns on ─────────── */
.sg-modal-back { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  padding: 20px; background: color-mix(in srgb, #000 62%, transparent); backdrop-filter: blur(3px); }
/* `color` IS NOT OPTIONAL ON A <dialog>. A dialog in the top layer takes the
   user-agent default `color: CanvasText` — literally black — and does NOT
   inherit the themed colour from the page behind it. Every line in here that
   set its own colour looked right, so the one element that did not — the
   heading — rendered black on the Obsidian surface at 1.11:1, and two rounds
   of contrast fixes aimed at the numerals never touched it. Setting it once,
   here, covers the heading and anything added later that forgets. */
.sg-modal { width: min(560px, 100%); max-height: 88vh; overflow-y: auto;
  color: var(--ink);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 18px;
  padding: 22px 22px 18px; box-shadow: var(--sh-4); }
.sg-modal-head { display: flex; align-items: flex-start; gap: 12px; }
.sg-modal-head h3 { font-family: var(--display); font-size: 19px; font-weight: 640; line-height: 1.25; }
.sg-modal-head .x { margin-left: auto; width: 30px; height: 30px; flex: none; border-radius: 9px;
  border: 1px solid var(--border); background: transparent; color: var(--ink-2); cursor: pointer; }
.sg-modal-lede { font-size: 12.5px; line-height: 1.6; color: var(--ink-2); margin: 8px 0 16px; }
.subj-rows { display: flex; flex-direction: column; gap: 8px; }
.subj-row { display: flex; gap: 8px; align-items: center; }
.subj-row input { flex: 1; min-width: 0; padding: 10px 12px; font-size: 13.5px; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; }
.subj-row input:focus { outline: none; border-color: var(--accent); }
.subj-del { width: 32px; height: 32px; flex: none; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--border); background: transparent; color: var(--ink-3); }
.subj-del:hover { color: var(--ink); border-color: var(--border-strong); }
.subj-count { font-size: 11.5px; color: var(--ink-3); margin: 10px 0 0; }
.sg-modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }
@media (max-width: 560px) {
  .sg-modal { padding: 18px 16px 14px; border-radius: 16px; }
  .sg-modal-actions { flex-direction: column-reverse; }
  .sg-modal-actions .btn { width: 100%; justify-content: center; }
}

/* ── deciding on a card ─────────────────────────────────────────────────── */
.clo-secondary { display: flex; gap: 6px; margin-bottom: 8px; }
.clo-secondary .btn { flex: 1; justify-content: center; }
/* Anchored ABOVE the button and pinned to the card's left edge. Absolutely
   positioned with no offsets it landed wherever the flow put it — which on a
   3-up grid meant partly under the next card, visible but not clickable. */
.clo-reasons { position: fixed; z-index: 210; min-width: 220px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px;
  box-shadow: var(--sh-4); display: flex; flex-direction: column; gap: 2px; }
.clo-reasons-t { font: 600 9.5px var(--mono); letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3); padding: 6px 8px 4px; }
.clo-reasons button { text-align: left; padding: 7px 9px; border-radius: 8px; border: 0;
  background: transparent; color: var(--ink); font-size: 12.5px; cursor: pointer; }
.clo-reasons button:hover { background: var(--surface-2); }
.clo-reasons-skip { color: var(--ink-3) !important; border-top: 1px solid var(--border) !important;
  border-radius: 0 0 8px 8px !important; margin-top: 2px; }
.clo-cap { position: relative; }
.clo-secondary { position: relative; }
.clo-poolnote { font-size: 11.5px; color: var(--ink-3); margin: 12px 0 0; }
.clo-recent { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-top: 6px;
  font-size: 11.5px; color: var(--ink-3); }
.clo-recent > span { font: 600 9.5px var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.linkish { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer;
  font-size: 11.5px; text-align: left; }
.linkish:hover { text-decoration: underline; }

/* ── the Content library ───────────────────────────────────────────────────
   It was one full-bleed panel with a single row inside it, so the page read
   emptier the more you had. Constrained width, real cards, a grid that
   scales past two records. */
.co-lib { max-width: 1040px; margin: 0 auto; }
.co-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.co-filter { padding: 6px 11px; border-radius: 999px; cursor: pointer; font-size: 12px;
  color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--border); }
.co-filter b { font: 600 10.5px var(--mono); color: var(--ink-3); margin-left: 3px; }
.co-filter:hover { border-color: var(--border-strong); color: var(--ink); }
.co-filter.on { color: #fff; background: var(--accent); border-color: var(--accent); }
.co-filter.on b { color: #fff; opacity: .8; }
.co-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.co-card { display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 17px 18px 16px;
  background: var(--glass); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--sh-1); transition: border-color .18s var(--ease), transform .18s var(--ease); }
.co-card:hover { border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); transform: translateY(-1px); }
.co-card[hidden] { display: none; }
.co-card-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
/* A long unbroken title must not push the card wider than its column. The
   grid already uses minmax(0,1fr) so the track can shrink; this makes the
   TEXT able to as well. */
.co-card h4 { font: 600 15px/1.35 var(--display); margin: 0; letter-spacing: -.005em;
  min-width: 0; overflow-wrap: anywhere; }
.co-card-top, .co-card-foot { min-width: 0; }
.co-card-foot > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.co-card-meta { font: 500 10.5px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.co-bar { height: 4px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.co-bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.co-card-foot { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; color: var(--ink-3); }
.co-when { white-space: nowrap; }
.co-card .btn { margin-top: auto; width: 100%; justify-content: center; }
.co-none { font-size: 13px; color: var(--ink-3); padding: 22px 2px; }
@media (max-width: 860px) { .co-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .co-card { padding: 15px 16px 14px; } .co-lib { max-width: 100%; } }

/* ══════════════════════════════════════════════════════════════════════
   EVIDENCE-FIRST OVERVIEW — the compact header, the collapsed tool shelf,
   and the density pass.

   The founder's finding, three times over: the dashboard led with a
   near-viewport hero and generated idea cards, while the visual evidence
   that justifies everything was either hidden or below the fold. The order
   is now identity → evidence → derived ideas → work in motion → tools,
   and the header is a strip rather than a stage.
   ══════════════════════════════════════════════════════════════════════ */
.ov-head {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 14px 18px; margin-bottom: 18px;
  background: var(--glass); border: 1px solid var(--border); border-radius: 14px;
}
.ov-id { display: flex; align-items: center; gap: 11px; min-width: 0; }
.ov-greet { font-size: 15px; font-weight: 680; letter-spacing: -0.01em; }
.ov-kicker { font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--ink-3); margin-top: 2px; }
.ov-stats { display: flex; gap: 8px; flex-wrap: wrap; }
/* The next action reads as one line with its buttons beside it — not a card. */
.ov-nba { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-left: auto; min-width: 0; max-width: 560px; }
.ov-nba-t { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); min-width: 0; }
.ov-nba-b { display: flex; gap: 8px; flex-shrink: 0; }
@media (max-width: 900px) {
  .ov-head { align-items: flex-start; flex-direction: column; gap: 12px; }
  .ov-nba { margin-left: 0; max-width: none; }
}

/* The collapsed tool shelf. A <details>, so it is real content one click away
   rather than two screens of scroll standing before the evidence. */
.ov-more { margin-top: 22px; border-top: 1px solid var(--border); padding-top: 4px; }
.ov-more > summary {
  display: flex; align-items: baseline; gap: 12px; cursor: pointer;
  list-style: none; padding: 12px 4px; border-radius: 10px; user-select: none;
}
.ov-more > summary::-webkit-details-marker { display: none; }
.ov-more > summary::before { content: "▸"; color: var(--ink-3); font-size: 11px; transition: transform .18s var(--ease); }
.ov-more[open] > summary::before { transform: rotate(90deg); }
.ov-more-t { font-family: var(--display); font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.ov-more-s { font-size: 11.5px; color: var(--ink-3); }
.ov-more > summary:hover { background: var(--glass); }

/* Theme control icons — the sun/moon that replaced "Platinum"/"Obsidian". */
.th-ic { width: 15px; height: 15px; display: inline-block; vertical-align: -3px;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#themeToggle { display: inline-grid; place-items: center; }
.seg-b .th-ic { width: 12px; height: 12px; vertical-align: -2px; margin-right: 5px; }

/* DENSITY. Evidence cards go four across where the viewport supports it —
   a grid a creator scans, not a column they scroll. */
@media (min-width: 1360px) { .rd-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rd-grid { gap: 12px; }

/* The floating Feedback chip must never sit ON the work. Whenever a drawer or
   any modal layer is open, it stands down — it returns when the surface does. */
body:has(.drawer.on) .beta-fab, body:has(.scrim.on) .beta-fab,
body:has(dialog[open]) .beta-fab { opacity: 0; pointer-events: none; transition: opacity .18s var(--ease); }


/* ══ THE TOPICS DIALOG (native <dialog>, top layer) ═══════════════════════ */
dialog.sg-modal { position: fixed; margin: auto; inset: 0; border: 1px solid var(--border-strong); }
dialog.sg-modal::backdrop { background: color-mix(in srgb, #000 62%, transparent); backdrop-filter: blur(3px); }

/* Topic suggestions mined from the workspace's own captions. */
.subj-sugg { margin: 2px 0 14px; }
.subj-sugg-t { font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--ink-3); margin-bottom: 7px; }
.subj-sugg-row { display: flex; flex-wrap: wrap; gap: 6px; }
.subj-chip { font-size: 12px; color: var(--ink); cursor: pointer;
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  border-radius: 999px; padding: 5px 11px; transition: border-color .15s var(--ease); }
.subj-chip:hover { border-color: var(--accent); }
.subj-sugg-none { font-size: 11.5px; color: var(--ink-3); margin: 0 0 12px; }

/* ══ CAPSULE DENSITY ══════════════════════════════════════════════════════
   The idea cards read as posters. Same content, less stage. */
.clo-cap { padding: 13px 14px 12px; gap: 8px; }
.clo-cap h4 { font-size: 13.5px; }
.clo-hook { padding: 8px 10px; }
.clo-actions { padding-top: 8px; }
.clo-actions .btn { padding: 8px 12px; font-size: 12.5px; }
.section-head { margin: 20px 4px 10px; }

/* ══ THE COLLAPSED WORKFLOW AREA in the content workbench ═════════════════ */
.wb-flow { margin-top: 18px; border: 1px solid var(--border); border-radius: 12px; }
.wb-flow > summary { display: flex; align-items: baseline; gap: 10px; cursor: pointer;
  list-style: none; padding: 12px 14px; user-select: none; }
.wb-flow > summary::-webkit-details-marker { display: none; }
.wb-flow > summary::before { content: "▸"; color: var(--ink-3); font-size: 11px; transition: transform .18s var(--ease); }
.wb-flow[open] > summary::before { transform: rotate(90deg); }
.wb-flow-t { font-size: 13px; font-weight: 680; }
.wb-flow-s { font-size: 11px; color: var(--ink-3); }
.wb-flow > summary:hover { background: var(--glass); }

/* ══ MOBILE: ONE CLEAN COLUMN ═════════════════════════════════════════════
   The evidence grid had a ≤860px rule turning it into a horizontally-scrolled
   filmstrip — three cards at 200px minimum inside a 390px viewport. A creator
   holding a phone got a sideways scroller where the founder asked for one
   readable column, and the card that mattered was half off-screen. */
@media (max-width: 720px) {
  .rd-grid { display: grid !important; grid-template-columns: 1fr !important;
    overflow-x: visible !important; gap: 12px; }
  .rd-card { flex: none !important; min-width: 0 !important; }
  .rd-thumb { aspect-ratio: 16 / 10; }        /* wide, not a tall poster, in one column */
  /* The header stacks; keep it from becoming its own screen. */
  .ov-head { padding: 12px 14px; gap: 10px; margin-bottom: 14px; }
  .ov-greet { font-size: 14px; }
  .ov-stats { gap: 6px; }
  .chip-stat { font-size: 11.5px; padding: 5px 10px; }
  .chip-stat b { font-size: 12.5px; }
  .ov-nba-t { font-size: 12px; line-height: 1.45; }
  /* The CTA shares the row with its sentence instead of claiming one of its
     own — three stacked full-width rows was the header becoming a screen. */
  .ov-nba { flex-direction: row; align-items: center; gap: 10px; }
  .ov-nba-b .btn { white-space: nowrap; }
  .ov-head { flex-direction: column; align-items: stretch; }
  .ov-id { gap: 9px; }
}

/* ── BETA WELCOME ──────────────────────────────────────────────────────────
   The one screen a new tester meets before anything else. It inherits the
   product's dialog (.sg-modal) rather than inventing a second one, and it is
   deliberately compact: 560px is a card, not a hero, and the three steps are a
   list rather than a layout. */
.bw-modal { width: min(560px, 100%); }
.bw-eyebrow { font: 600 10.5px/1 var(--mono); letter-spacing: .16em; color: var(--accent); margin-bottom: 6px; }
.bw-steps { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.bw-step { display: flex; gap: 11px; align-items: flex-start; }
/* The number is decoration — the <ol> already carries the ordering for a
   screen reader, so it is aria-hidden and this is purely the visual anchor.

   THE NUMERAL'S LEGIBILITY MUST NOT DEPEND ON BRANDING. This was
   `color: var(--bg)` on a solid accent (black on ultraviolet — a founder
   review caught it on sight), then `color: var(--accent)`, which passed on the
   DEFAULT tokens at 4.91:1 and then failed at 3.77:1 in production the moment
   a workspace overrode `brand.accent` to a darker colour. `--accent` is
   tenant-overridable, so any foreground derived from it is one branding choice
   away from being unreadable.

   So the FOREGROUND is --ink, which is derived from the theme and is the same
   colour the surrounding prose already uses — ~18:1 in Obsidian, ~16:1 in
   Platinum, and unaffected by any accent a tenant picks. The accent survives
   where it cannot hurt anyone: the ring around the numeral, which carries no
   information a reader has to decode. */
.bw-n { flex: none; width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center;
  font: 700 11px/1 var(--mono); color: var(--ink); background: transparent;
  border: 1.5px solid var(--accent); margin-top: 1px; }
.bw-step b { display: block; font-size: 13.5px; font-weight: 640; color: var(--ink); margin-bottom: 2px; }
.bw-step span { display: block; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
.bw-mission { font-size: 12.5px; line-height: 1.6; color: var(--ink); margin: 0 0 10px;
  padding: 10px 12px; border-radius: 10px; background: var(--accent-soft);
  border-left: 2px solid var(--accent); }
.bw-mission b { font-weight: 640; }
/* The honest limit, said quietly and never removed — but QUIETLY IS NOT
   FAINTLY. --ink-3 measured 3.57:1 in Obsidian and 3.46:1 in Platinum, both
   below AA, which made the one sentence about what RunSignl will not do the
   hardest sentence in the dialog to read. --ink-2 is 8.01:1 / 7.59:1. */
.bw-foot { font-size: 11.5px; line-height: 1.55; color: var(--ink-2); margin: 0 0 16px; }

/* 390×844 IS THE BAR: everything fits without the dialog scrolling inside
   itself, because a first-run screen that hides its own primary action behind
   a scroll is worse than no first-run screen. */
@media (max-width: 460px) {
  .bw-modal { width: 100%; max-height: 92vh; padding: 18px 16px 14px; }
  .bw-modal .sg-modal-head h3 { font-size: 17px; }
  .bw-modal .sg-modal-lede { margin: 6px 0 12px; }
  .bw-steps { gap: 9px; margin-bottom: 11px; }
  .bw-step span { font-size: 12px; line-height: 1.5; }
  .bw-mission { margin-bottom: 8px; padding: 9px 10px; }
  .bw-foot { margin-bottom: 12px; }
  .bw-modal .sg-modal-actions { flex-direction: column-reverse; gap: 8px; }
  .bw-modal .sg-modal-actions .btn { width: 100%; }
}

/* ── DASHBOARD TOUR ────────────────────────────────────────────────────────
   Callouts over the REAL Overview. The spotlight is a ring, not a scrim: the
   creator has to be able to SEE the control being described, and a full-page
   dim would hide the very thing the step is about. */
.tour-spot { position: fixed; z-index: 300; border-radius: 12px; pointer-events: none;
  border: 2px solid var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent),
  0 0 0 9999px color-mix(in srgb, #000 34%, transparent); transition: top .2s var(--ease), left .2s var(--ease),
  width .2s var(--ease), height .2s var(--ease); }
.tour-pop { position: fixed; z-index: 301; width: 320px; background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: 14px; padding: 14px 15px 12px;
  box-shadow: var(--sh-4); }
.tour-pop:focus { outline: none; }
.tour-top { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
/* --ink-3 measured 3.57:1 on the callout surface — below AA at 10.5px. */
.tour-prog { font: 600 10.5px/1 var(--mono); letter-spacing: .1em; color: var(--ink-2); }
.tour-x { margin-left: auto; background: none; border: 0; cursor: pointer; padding: 2px 4px;
  font: 500 11.5px/1 var(--sans); color: var(--ink-2); text-decoration: underline; }
.tour-x:hover { color: var(--ink); }
.tour-pop h3 { font-family: var(--display); font-size: 15px; font-weight: 640; line-height: 1.3; margin-bottom: 5px; }
.tour-pop p { font-size: 12.5px; line-height: 1.6; color: var(--ink-2); margin: 0 0 12px; }
.tour-actions { display: flex; gap: 7px; justify-content: flex-end; flex-wrap: wrap; }
.tour-pop :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The feedback chip must not sit on top of a callout it is not part of. */
/* Stood down for the whole tour — except on the step that is ABOUT it, where
   hiding the control we are pointing at would be its own small absurdity. */
body.tour-on .beta-fab { opacity: 0; pointer-events: none; }
body.tour-on.tour-spotlights-fab .beta-fab { opacity: 1; }

/* 390×844: the callout docks to the bottom so the highlighted section stays
   visible ABOVE it, and never scrolls inside itself or sideways. */
/* THE CLOSING CARD IS A CARD, NOT A BANNER. With no anchor to sit beside it
   fell back to the docked style, which is `left:12px; right:12px` — on a
   1440px window that is a 1400px-wide strip of text across the whole screen.
   Docked still, but bounded and centred. */
.tour-pop.is-bottom { left: 50%; right: auto; transform: translateX(-50%);
  bottom: 20px; top: auto; width: min(420px, calc(100vw - 24px)); }
@media (max-width: 640px) {
  .tour-pop, .tour-pop.is-bottom { left: 12px; right: 12px; bottom: 12px; top: auto;
    width: auto; max-width: none; transform: none; }
  /* The dock moves to the top when the highlighted control is in the lower
     half of the phone — the feedback chip (bottom:78px) and the tab bar live
     down there, and a callout pinned above them hid the very ring it was
     describing. */
  .tour-pop.is-top, .tour-pop.is-bottom.is-top { top: 12px; bottom: auto; }
  .tour-pop h3 { font-size: 14.5px; }
  .tour-pop p { font-size: 12px; margin-bottom: 10px; }
  .tour-actions .btn { flex: 1 1 auto; }
}

/* A read that failed, said as a state rather than as six zeroed counts. */
.ov-readfail { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 10px; padding: 10px 13px; border-radius: 11px;
  background: var(--surface-2); border: 1px solid var(--border-strong);
  font-size: 12.5px; line-height: 1.55; color: var(--ink); }

/* What RunSignl understood about this creator — core content, in the main
   flow, not hidden behind the agents disclosure it used to live inside. */
.ov-know { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
@media (max-width: 820px) { .ov-know { grid-template-columns: 1fr; } }

/* Recent benchmark posts — dense, thumbnail-led, never labelled as standouts. */
.rc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 10px; }
/* An author-origin display beats the UA's [hidden] rule, so hiding a card from
   JavaScript does nothing without this. The two other places in this sheet that
   hide by attribute already had to write it out. */
.rc-card[hidden] { display: none; }
.rc-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; background: var(--surface); }
.rc-thumb { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; background: var(--surface-2); }
.rc-noimg { background: var(--surface-2); }
.rc-body { padding: 9px 11px 11px; display: flex; flex-direction: column; gap: 5px; }
.rc-who { font: 600 12.5px/1.3 var(--sans); color: var(--ink); display: flex; justify-content: space-between; gap: 8px; }
.rc-when { font: 500 10.5px/1.4 var(--mono); color: var(--ink-3); white-space: nowrap; }
.rc-cap { font-size: 12px; line-height: 1.5; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rc-nums { font: 500 11px/1.4 var(--mono); color: var(--ink-3); }

/* Who RunSignl is learning from — compact, persistent, never a giant panel. */
.cw-list-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-top: 10px; }
.cwl { border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px; background: var(--surface); }
.cwl-h { font: 640 13.5px/1.3 var(--display); color: var(--ink); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cwl-name { font: 400 11.5px/1.4 var(--sans); color: var(--ink-3); }
.cwl-m { font: 500 11px/1.5 var(--mono); color: var(--ink-2); margin-top: 4px; }
.cwl-a { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.cwl-more { margin-top: 10px; }
/* The re-check answers here, beside the accounts it re-read — a toast four
   sections up was read as the control doing nothing. */
.cwl-said {
  margin-top: 10px; padding: 9px 12px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--live) 28%, var(--border));
  background: color-mix(in srgb, var(--live) 7%, transparent);
  font-size: 12.5px; line-height: 1.6; color: var(--ink-2); max-width: 74ch;
}
@media (max-width: 820px) {
  .rc-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .cw-list-grid { grid-template-columns: 1fr; }
}

/* The first batch, on the page instead of inside a disclosure. Dense cards —
   the work was already done and paid for; it should not need excavating. */
.fb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 11px; margin-top: 10px; }
.fb-card { border: 1px solid var(--border); border-radius: 12px; padding: 12px 13px; background: var(--surface);
  display: flex; flex-direction: column; gap: 6px; }
.fb-kind { font: 700 9.5px/1 var(--mono); letter-spacing: .11em; text-transform: uppercase; color: var(--accent); }
.fb-t { font: 620 13.5px/1.4 var(--display); color: var(--ink); }
.fb-why { font-size: 12px; line-height: 1.55; color: var(--ink-2); }
.fb-card .btn { margin-top: auto; align-self: flex-start; }
.fb-plan { margin-top: 12px; border: 1px solid var(--border); border-radius: 12px; padding: 4px 13px; background: var(--surface); }
.fb-plan > summary { cursor: pointer; padding: 9px 0; display: flex; gap: 10px; align-items: baseline; list-style: none; }
.fb-plan > summary::-webkit-details-marker { display: none; }
.fb-plan > summary::before { content: "▸"; color: var(--ink-3); font-size: 11px; }
.fb-plan[open] > summary::before { content: "▾"; }
.fb-plan-t { font: 640 13.5px/1.3 var(--display); color: var(--ink); }
.fb-plan-s { font: 500 11px/1.4 var(--mono); color: var(--ink-3); }
.fb-days { margin: 0 0 12px; padding-left: 20px; font-size: 13px; line-height: 1.75; color: var(--ink); }
.fb-days span { color: var(--ink-2); font-size: 12px; }
@media (max-width: 820px) { .fb-grid { grid-template-columns: 1fr; } }

/* ── WHAT RUNSIGNL NOTICED ────────────────────────────────────────────────
   The agents' real findings, in the main flow. They were computed on every
   render and then sealed inside a collapsed <details> at the foot of the page,
   so the product read as thoughtless until the creator found a grey summary. */
.ov-noticed { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin: 0 0 30px; }
/* FIVE SPECIALISTS, ONE LINE. auto-fit at a 260px floor lands 4 across on a
   laptop and drops the fifth onto a row of its own — a production line with a
   worker standing apart from it. Above this width all five fit and they read
   as one line; below it, auto-fit still does the right thing. */
@media (min-width: 1180px) { .ov-noticed { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.ovn { display: flex; flex-direction: column; gap: 5px; text-align: left; width: 100%;
  padding: 13px 15px; border: 1px solid var(--border); border-radius: 11px;
  background: var(--surface); color: var(--ink); cursor: pointer;
  transition: border-color .16s ease, transform .16s ease; }
.ovn:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); transform: translateY(-1px); }
.ovn-who { font: 600 9.5px/1 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }
.ovn-what { font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.ovn-what b { color: var(--ink); font-weight: 650; }
@media (max-width: 640px) { .ov-noticed { grid-template-columns: 1fr; } }

/* A batch written for a direction the creator has since changed. It stays on
   screen — it is still their work — but it may not pose as current advice. */
.fb-stale { border: 1px solid color-mix(in srgb, var(--down) 40%, var(--border));
  background: color-mix(in srgb, var(--down) 7%, transparent);
  border-radius: 12px; padding: 15px 17px; margin: 0 0 16px;
  font-size: 13px; line-height: 1.65; color: var(--ink-2); max-width: 74ch; }
.fb-stale b { display: block; color: var(--ink); font-weight: 650; margin-bottom: 4px; }
.fb-stale > div { margin-top: 12px; }

/* The audit trail behind a click. Every fact stays; it just opens in a panel
   with room to lay them side by side, instead of unrolling down a 260px card
   until one item is taller than the viewport. */
.rd-audit-btn {
  margin: 2px 0 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  font: 600 9.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); padding: 5px 0; background: none; border: 0;
}
.rd-audit-x { font-size: 11px; opacity: .8; }
.rd-audit-btn:hover { color: var(--ink-2); }
.rd-audit-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ══ THE EVIDENCE PANEL ═════════════════════════════════════════════════════
   Frosted, wide, and sized so the whole reference table is on screen at once.
   A native <dialog>: the top layer cannot be mispositioned or overlapped, and
   Escape, focus containment and ::backdrop come free.

   `color` IS NOT OPTIONAL ON A <dialog> — one in the top layer takes the UA
   default `color: CanvasText` (black) and does NOT inherit the page's theme.
   Set once here so nothing added later renders black on Obsidian. */
dialog.ev-modal {
  position: fixed; inset: 0; margin: auto; padding: 0;
  width: min(1040px, 94vw); max-height: min(88vh, 820px);
  color: var(--ink);
  /* Frosted, but never at the cost of the text on it. At 72% the body copy sat
     on whatever happened to be behind the panel; 84% keeps the blur reading as
     glass while the contrast stops depending on the page underneath. */
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  backdrop-filter: blur(var(--blur)) saturate(1.7);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.7);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border-strong));
  border-radius: 22px; box-shadow: var(--sh-4);
  overflow: hidden; display: flex; flex-direction: column;
}
dialog.ev-modal::backdrop {
  background: color-mix(in srgb, #000 46%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.ev-head {
  display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2) 40%, transparent);
}
.ev-thumb { width: 84px; height: 84px; flex: none; border-radius: 14px; object-fit: cover;
  border: 1px solid var(--border); background: var(--surface-2); }
.ev-thumb.no-img { background: linear-gradient(150deg, var(--surface-2), var(--surface)); }
.ev-id { min-width: 0; flex: 1; }
.ev-who { display: flex; align-items: center; gap: 9px; font: 640 16px/1.2 var(--display); color: var(--ink); }
.ev-mult {
  font: 700 11px/1 var(--mono); color: #fff; background: var(--accent);
  border-radius: 999px; padding: 4px 8px; letter-spacing: .02em;
}
.ev-cap { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.ev-lede { margin-top: 6px; font: 500 11px/1.5 var(--mono); color: var(--ink-3); }
.ev-x {
  flex: none; width: 32px; height: 32px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 60%, transparent); color: var(--ink-2);
}
.ev-x:hover { color: var(--ink); border-color: var(--border-strong); }
.ev-body { padding: 16px 20px 20px; overflow-y: auto; }
/* THE WHOLE POINT: a grid, so eight short facts are read together. */
.ev-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: 10px; }
.ev-fact {
  border: 1px solid var(--border); border-radius: 13px; padding: 11px 13px;
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
}
.ev-k { font: 600 9.5px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.ev-v { margin-top: 5px; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.ev-n { margin-top: 5px; font: 500 10.5px/1.45 var(--mono); color: var(--ink-3); opacity: .85; }
.ev-deep { margin-top: 14px; }
.ev-sec-head { margin: 4px 0 10px; }
.ev-offer {
  border: 1px dashed color-mix(in srgb, var(--accent) 34%, var(--border));
  border-radius: 14px; padding: 14px 16px;
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.ev-offer-t { font: 640 14px/1.3 var(--display); color: var(--ink); }
.ev-offer-b { margin: 6px 0 11px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); max-width: 74ch; }
.ev-wait, .ev-err { font-size: 12.5px; line-height: 1.6; color: var(--muted); padding: 10px 0; }
.ev-gaps {
  margin-top: 12px; border-radius: 13px; padding: 12px 14px;
  border: 1px solid var(--border); background: color-mix(in srgb, var(--surface-2) 55%, transparent);
}
.ev-gaps-t { font: 600 9.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.ev-gaps-c { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
.ev-gap { font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
.ev-gap b { color: var(--ink); font-weight: 620; }
.ev-note { margin-top: 9px; font-size: 12px; line-height: 1.55; color: var(--muted); font-style: italic; }
@media (max-width: 640px) {
  dialog.ev-modal { width: 96vw; max-height: 92vh; border-radius: 18px; }
  .ev-head { padding: 14px 14px 12px; gap: 11px; }
  .ev-thumb { width: 60px; height: 60px; border-radius: 11px; }
  .ev-body { padding: 13px 14px 16px; }
  .ev-grid { grid-template-columns: 1fr; }
}

/* The reason behind the finding. Already computed on every render; showing it
   is the difference between a card that looks empty and one that reads. */
.ovn-why { font-size: 12px; line-height: 1.5; color: var(--ink-3); }

/* A near match is checked and real; it just did not clear the evidence bar on
   its own. The creator gets to override that, so the control sits beside the
   profile link rather than the card being read-only. */
.bm-adopt-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }

/* The recent-post card is a link now, so it must not inherit link underlines
   and must show it is reachable by keyboard. */
.rc-card { text-decoration: none; color: inherit; display: block; }
.rc-card:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.rc-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rc-nums { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rc-go { font: 600 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.rc-card:hover .rc-go { color: var(--accent); }

/* A stage nobody has reached takes the room a fact deserves — not the room a
   column of work deserves. The count is unchanged and nothing is invented. */
/* AND IT MUST NOT BE STRETCHED TO THE TALLEST COLUMN EITHER. Shortening the
   CONTENT of an empty stage changed nothing on screen: .pipeline is
   `align-items: stretch`, so five empty boxes were still pulled to the full
   height of the drafts column beside them — which is exactly the wall of empty
   boxes the founder keeps seeing. align-self lets an empty stage be as tall as
   the fact it is stating, and no taller. The count and the status are
   untouched. */
.pl-col.pl-col-empty { opacity: .72; align-self: flex-start; }
.pl-col.pl-col-empty .pl-caps { min-height: 0; }
.pl-col.pl-col-empty .pl-empty {
  font-size: 11.5px; line-height: 1.45; color: var(--ink-3);
  padding: 2px 0 0; white-space: normal;
}

/* THE AGENT LINE. A specialist that has produced something says what and why; a
   specialist that genuinely has not says what it is waiting on. Both are listed
   — a missing worker reads as a broken line, and blankness after RunSignl has
   read an entire account is simply untrue. */
.ovn-who { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* THE SPECIALIST'S OWN MARK. Identical treatment to .agent .avatar, scaled to
   the strip — same per-agent --a, same gradient, same border, same dark-theme
   shadow — so the two surfaces read as the same five workers rather than as an
   illustrated set and an anonymous one. */
.ovn-id { display: flex; align-items: center; gap: 7px; min-width: 0; }
.ovn-ic {
  width: 21px; height: 21px; flex: none; padding: 4px; border-radius: 7px; color: var(--a);
  background: linear-gradient(150deg, color-mix(in srgb, var(--a) 16%, var(--surface)), color-mix(in srgb, var(--a) 6%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--a) 32%, var(--border));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
:root[data-theme="dark"] .ovn-ic { box-shadow: 0 2px 6px color-mix(in srgb, var(--a) 18%, transparent); }
.ovn-ic svg { width: 100%; height: 100%; display: block; }
.ovn:hover .ovn-ic { transform: translateY(-1px) scale(1.04); box-shadow: 0 3px 10px color-mix(in srgb, var(--a) 30%, transparent); }
.ovn-state {
  display: flex; align-items: center; gap: 4px;
  font: 600 8.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--live); border: 1px solid color-mix(in srgb, var(--live) 40%, transparent);
  border-radius: 4px; padding: 2px 5px; flex: none;
}
/* The same breathing dot the workbench card uses for a working specialist. */
.ovn-state i { width: 4px; height: 4px; border-radius: 50%; background: var(--live); animation: breathe 2.4s var(--ease) infinite; }
@media (prefers-reduced-motion: reduce) { .ovn-state i { animation: none; } .ovn:hover .ovn-ic { transform: none; } }
.ovn-idle { opacity: .82; }
.ovn-idle .ovn-state { color: var(--ink-3); border-color: var(--border); }
/* A waiting specialist keeps its mark, drained of colour — recognisable, and
   visibly not working. */
.ovn-idle .ovn-ic { filter: grayscale(1); opacity: .75; }
.ovn-idle .ovn-what { color: var(--ink-3); }

/* ── INTELLIGENCE: the page head carries the one action that makes it newer ── */
.page-head.ph-row { display: flex; align-items: flex-start; gap: 18px; justify-content: space-between; flex-wrap: wrap; }
.page-head.ph-row > div:first-child { min-width: 0; flex: 1 1 420px; }
.ph-act { display: flex; align-items: center; gap: 10px; flex: none; padding-top: 4px; }
.ph-stamp { font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

/* ── YOUR RHYTHM ─────────────────────────────────────────────────────────────
   How often, when, and how that compares — the question the rest of the page
   never answered. Cadence only: views are never compared across accounts of
   different sizes. */
.rhy { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.rhy-t { border: 1px solid var(--border); border-radius: 13px; padding: 12px 14px; background: var(--surface-2); }
.rhy-k { font: 600 9.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.rhy-v { font-family: var(--display); font-size: 25px; font-weight: 620; color: var(--ink); margin-top: 7px; display: flex; align-items: baseline; gap: 6px; }
.rhy-u { font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--ink-3); }
.rhy-n { font-size: 11.5px; line-height: 1.5; color: var(--ink-2); margin-top: 6px; }
.rhy-cmp { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.rhy-cmp-k { font: 600 9.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.rhy-rows { display: flex; flex-direction: column; gap: 7px; }
.rhy-row { display: flex; align-items: center; gap: 10px; }
.rhy-h { width: 128px; flex: none; font-size: 12px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rhy-row.me .rhy-h { color: var(--ink); font-weight: 640; }
.rhy-bar { flex: 1; height: 8px; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.rhy-bar i { display: block; height: 100%; border-radius: 5px; background: color-mix(in srgb, var(--accent) 45%, var(--border-strong)); }
.rhy-row.me .rhy-bar i { background: var(--accent); }
.rhy-pw { width: 76px; flex: none; text-align: right; font-size: 11.5px; font-weight: 640; color: var(--ink-2); }
.rhy-cmp-n { margin-top: 11px; font-size: 11.5px; line-height: 1.55; color: var(--ink-3); max-width: 78ch; }
@media (max-width: 640px) { .rhy-h { width: 92px; } .ph-act { padding-top: 0; } }

/* ══ THE 30-DAY EXECUTION PLAN ═══════════════════════════════════════════════
   Two views over ONE set of durable records. Nothing here implies that anything
   was scheduled on a platform: a piece is planned inside RunSignl. */
.pl-sum { padding: 18px 20px 20px; }
.pl-sum-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pl-sum-head h3 { font: 640 17px/1.25 var(--display); color: var(--ink); }
.pl-sum-note { margin-top: 6px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); max-width: 72ch; }
.pl-sum-act { display: flex; gap: 8px; flex: none; flex-wrap: wrap; }
.pl-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 16px; }
.pl-stat { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--surface-2); }
.pl-stat-n { font: 620 22px/1.1 var(--display); color: var(--ink); }
.pl-stat-l { margin-top: 4px; font: 500 10.5px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.pl-series { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.pl-serie { font: 600 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius: 999px; padding: 5px 9px; }
.pl-serie.sm { font-size: 9.5px; padding: 3px 7px; }
.pl-bands { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-top: 16px; }
.pl-band { border-top: 1px solid var(--border); padding-top: 10px; }
.pl-band-t { font: 600 9.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.pl-band-l { margin: 8px 0 0; padding-left: 16px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
.pl-band-l li { margin-bottom: 4px; }
.pl-await { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: 12px; line-height: 1.6; color: var(--ink-3); max-width: 78ch; }

.pl-toggle { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface-2); }
.pl-tab { border: 0; background: none; cursor: pointer; border-radius: 8px; padding: 6px 11px;
  font: 600 11.5px/1 var(--sans); color: var(--ink-3); }
.pl-tab.on { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }
.pl-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* CALENDAR VIEW — a day is a column of slots, so two pieces on one day are two
   cards rather than a collision. */
  border: 1px solid var(--border); border-radius: 10px; padding: 9px 10px; background: var(--surface-2); color: var(--ink); }
  border-radius: 4px; padding: 3px 5px; color: var(--ink-2); border: 1px solid var(--border); }

/* EXECUTION LIST — dense and scannable. Long captions and scripts live in the
   record, not in a row. */
.pl-list-wrap { margin-top: 14px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); overflow-x: auto; }
.pl-list { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 720px; }
.pl-list th { text-align: left; font: 600 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); padding: 11px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.pl-list td { padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: top; color: var(--ink-2); }
.pl-list tr:last-child td { border-bottom: 0; }
.pll-d { white-space: nowrap; font: 500 11.5px/1.4 var(--mono); color: var(--ink); }
.pll-slot { color: var(--ink-3); }
.pll-c { color: var(--ink); font-weight: 600; max-width: 40ch; }
.pll-why { display: block; margin-top: 3px; font-weight: 400; font-size: 11.5px; line-height: 1.5; color: var(--ink-3); }
.pll-st { font: 600 9.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }

.pl-cta { padding: 22px; }
.pl-cta-t { font: 640 17px/1.3 var(--display); color: var(--ink); }
.pl-cta-b { margin: 8px 0 10px; font-size: 13.5px; line-height: 1.7; color: var(--ink-2); max-width: 70ch; }
.pl-cta-n { margin: 0 0 14px; font-size: 12px; line-height: 1.6; color: var(--ink-3); max-width: 70ch; }
.pl-setup { padding: 18px 20px; margin-top: 14px; }
.pl-cad { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; margin-top: 12px; }
.pl-cad-b { text-align: left; cursor: pointer; border: 1px solid var(--border); border-radius: 11px;
  padding: 10px 12px; background: var(--surface-2); color: var(--ink); display: flex; flex-direction: column; gap: 4px; }
.pl-cad-b.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface-2)); }
.pl-cad-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pl-cad-b:disabled { cursor: default; opacity: .6; }
.pl-cad-l { font-size: 13px; font-weight: 600; }
.pl-cad-n { font: 500 10.5px/1.4 var(--mono); color: var(--ink-3); }
.pl-cad-n2 { margin-top: 11px; font-size: 12px; line-height: 1.6; color: var(--ink-3); max-width: 74ch; }
.pl-status { margin: 12px 0 0; padding: 10px 13px; border-radius: 10px; font-size: 12.5px; line-height: 1.6;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--ink-2); max-width: 82ch; }
.pl-status-ok { border-color: color-mix(in srgb, var(--live) 30%, var(--border)); background: color-mix(in srgb, var(--live) 7%, transparent); }
.pl-status-warn { border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.pl-more { margin-top: 16px; }
.pl-more > summary { cursor: pointer; list-style: none; display: flex; gap: 10px; align-items: baseline; padding: 10px 0; }
.pl-more > summary::-webkit-details-marker { display: none; }

/* MOBILE — an agenda, not a seven-column grid squeezed onto a phone. */
@media (max-width: 820px) {
  .pl-cal { grid-template-columns: 1fr; }
  .pl-day { flex-direction: row; align-items: flex-start; gap: 12px; }
  .pl-day-h { flex: 0 0 96px; flex-direction: column; align-items: flex-start; gap: 2px; }
  .pl-day-b { flex: 1; min-width: 0; }
  .pl-sum-head { flex-direction: column; }
  .pl-stats { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}

/* An open day becomes a small form in place — never a browser prompt, which
   cannot be styled, explained or trusted on a phone. */
.plc-open { padding: 0; border: 0; background: none; display: block; }
.plc-open-b { display: flex; flex-direction: column; gap: 4px; text-align: left; width: 100%; cursor: pointer;
  border: 1px dashed var(--border); border-radius: 10px; padding: 9px 10px; background: none; color: var(--ink-3); }
.plc-open-b:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); color: var(--ink-2); }
.plc-open-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.plc-open-b:disabled { cursor: default; opacity: .55; }
/* THE WALL OF FORMS. `hidden` sets display:none through the UA stylesheet, and
   this rule's display:flex won every time — so the toggle worked, the attribute
   was set, and all sixty empty slots still rendered an expanded editor. A month
   of open days looked like homework. The attribute wins now. */
.plc-form { display: flex; flex-direction: column; gap: 7px; border: 1px solid var(--accent);
  border-radius: 10px; padding: 9px 10px; background: var(--surface-2); }
.plc-form[hidden] { display: none; }
.plc-form input { width: 100%; min-width: 0; font-size: 12.5px; color: var(--ink); padding: 7px 9px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.plc-form input:focus { outline: none; border-color: var(--accent); }
.plc-form-a { display: flex; gap: 6px; flex-wrap: wrap; }
.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; }

/* The replan confirmation, on the page, with what it will spare stated. */
.pl-confirm { margin-top: 14px; padding: 14px 16px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
  background: color-mix(in srgb, var(--accent) 6%, transparent); }
.pl-confirm-t { font: 640 14px/1.3 var(--display); color: var(--ink); }
.pl-confirm-b { margin: 6px 0 11px; font-size: 12.5px; line-height: 1.65; color: var(--ink-2); max-width: 76ch; }
.pl-confirm-a { display: flex; gap: 8px; flex-wrap: wrap; }

/* Partial progress is a state the creator must be able to read at a glance —
   a plan that is not finished must never look finished. */
.pl-await-open { border-left: 3px solid var(--accent); padding-left: 11px; color: var(--ink-2); }
.pl-await-done { border-left: 3px solid var(--live); padding-left: 11px; color: var(--ink-2); }
.pl-await b { color: var(--ink); font-weight: 640; }

/* ══ ENGAGE ═══════════════════════════════════════════════════════════════
   Built from the tokens the rest of the app already uses — no new palette, no
   new type scale. The only new idea is the state dot, because Engage is the
   one surface where "is this actually live" is the question every card answers. */
.eg-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.eg-dot.live  { background: var(--live, #10B981); box-shadow: 0 0 0 3px color-mix(in srgb, var(--live, #10B981) 18%, transparent); }
.eg-dot.ready { background: var(--accent, #6D5DFF); }
.eg-dot.hold  { background: #F59E0B; }
.eg-dot.bad   { background: #EF4444; }
.eg-dot.idle  { background: var(--line, #3a3a44); }

.eg-kicker { font-family: var(--mono, ui-monospace, monospace); font-size: 11px; letter-spacing: .14em;
  color: var(--muted); margin-bottom: 10px; }
.eg-intro-body { padding: 26px 26px 28px; max-width: 62ch; }
.eg-intro-body h3 { font-family: var(--display, inherit); font-size: 21px; margin: 0 0 10px; line-height: 1.25; }
.eg-intro-body p { color: var(--muted); font-size: 13.5px; line-height: 1.7; margin: 0 0 16px; }
.eg-steps { margin: 0 0 20px; padding-left: 20px; color: var(--muted); font-size: 13.5px; line-height: 1.75; }
.eg-steps li { margin-bottom: 8px; }
.eg-steps b { color: var(--fg); font-weight: 600; }

.eg-conn { padding: 20px 22px; }
.eg-conn-head { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.eg-conn-t { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 600; }
.eg-conn-d { color: var(--muted); font-size: 13px; line-height: 1.6; margin-top: 6px; max-width: 58ch; }
.eg-mask { font-family: var(--mono, ui-monospace, monospace); font-size: 12.5px; color: var(--muted);
  letter-spacing: .06em; white-space: nowrap; }
.eg-conn-acts { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.eg-note { color: var(--muted); font-size: 12.5px; line-height: 1.6; margin-top: 10px; }
.eg-warn { color: #F59E0B; font-size: 12.5px; line-height: 1.6; margin-top: 12px; }
.eg-hint { color: var(--muted); font-weight: 400; font-size: 11.5px; }

.eg-sec-h { display: flex; align-items: center; gap: 12px; font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 26px 0 12px; }
.eg-status-note { padding: 14px 18px; font-size: 13.5px; line-height: 1.6; }

.eg-auto-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); align-items: start; }
.eg-auto { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.eg-auto-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.eg-auto-name { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.eg-status { display: flex; align-items: center; gap: 7px; font-family: var(--mono, ui-monospace, monospace);
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.eg-auto-meta { color: var(--muted); font-size: 12.5px; display: flex; gap: 6px; flex-wrap: wrap; }
.eg-sep { opacity: .5; }
.eg-auto-kws { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.eg-auto-dm { font-size: 13px; line-height: 1.6; color: var(--muted);
  border-left: 2px solid var(--line, #3a3a44); padding-left: 12px; }
.eg-auto-btn { font-size: 12.5px; color: var(--muted); }
.eg-auto-err { font-size: 12.5px; line-height: 1.6; color: #F59E0B; }
.eg-auto-acts { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 4px; }

.eg-editor, .eg-keyform { padding: 20px 22px; }
.eg-editor-h { font-size: 15px; font-weight: 600; margin-bottom: 16px; }
.eg-editor-acts { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
.eg-two { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.eg-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--muted);
  line-height: 1.6; margin: 4px 0 2px; cursor: pointer; }

.eg-confirm { padding: 22px; border: 1px solid var(--accent, #6D5DFF); border-radius: 14px;
  background: color-mix(in srgb, var(--accent, #6D5DFF) 7%, transparent); margin-bottom: 16px; }
.eg-confirm-h { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.eg-confirm-l { margin: 0 0 18px; padding-left: 20px; font-size: 13.5px; line-height: 1.75; color: var(--muted); }
.eg-confirm-l li { margin-bottom: 6px; }
.eg-confirm-acts { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

.eg-act { padding: 8px 4px; }
.eg-act-l { list-style: none; margin: 0; padding: 0; }
.eg-act-l li { display: flex; align-items: center; gap: 10px; padding: 11px 18px;
  border-bottom: 1px solid var(--line, #2a2a32); font-size: 13px; }
.eg-act-l li:last-child { border-bottom: 0; }
.eg-act-w { flex: 1 1 auto; min-width: 0; }
.eg-act-t { color: var(--muted); font-size: 11.5px; white-space: nowrap; }

@media (max-width: 720px) {
  .eg-auto-grid { grid-template-columns: 1fr; }
  .eg-two { grid-template-columns: 1fr; }
  .eg-intro-body { padding: 20px 18px 22px; }
  .eg-conn, .eg-editor, .eg-keyform { padding: 16px 16px; }
  .eg-conn-head { flex-direction: column; gap: 10px; }
  .eg-mask { align-self: flex-start; }
  .eg-auto-head { flex-direction: column; gap: 6px; }
  .eg-act-l li { padding: 11px 14px; flex-wrap: wrap; }
  .eg-confirm-acts, .eg-editor-acts { justify-content: stretch; }
  .eg-confirm-acts .btn, .eg-editor-acts .btn { flex: 1 1 auto; }
}

/* ══ PLAN — A CONTAINED PLANNING SURFACE ══════════════════════════════════
   THE WIDENING IS GONE. Stretching the Calendar to 1680px did use the screen,
   and it turned the month into a spreadsheet filling every remaining pixel —
   the page stopped reading as RunSignl and the background treatment vanished
   behind it. The month keeps the product's own 1160px measure, and seven days
   are solved by density and typography instead of width. */

/* Live generation progress — every number here is a durable row. */
.pl-prog { padding: 18px 20px; margin-top: 14px; }
.pl-prog-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pl-prog-t { font-size: 15px; font-weight: 600; }
.pl-prog-p { color: var(--muted, var(--ink-3)); font-size: 13px; margin-top: 4px; }
.pl-prog-n { font-family: var(--mono, ui-monospace, monospace); font-size: 13px; white-space: nowrap; }
.pl-prog-bar { height: 6px; border-radius: 999px; background: var(--surface-2); margin: 14px 0 10px; overflow: hidden; }
.pl-prog-bar span { display: block; height: 100%; border-radius: 999px; background: var(--accent);
  transition: width .5s ease; }
.pl-prog-f { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--ink-3); }
.pl-prog-note { margin-top: 12px; font-size: 12.5px; line-height: 1.6; color: var(--ink-3); max-width: 70ch; }

/* ══ THE IDEA CAPSULE ═════════════════════════════════════════════════════
   Over the Calendar, never instead of it. */
/* IT APPEARED FROM NOTHING. The Capsule had no entry transition at all — it
   simply existed on the next frame, which reads as a glitch rather than as
   something opening. A modal is occasional enough to earn a real animation, and
   it keeps transform-origin: center because it is not anchored to a trigger.
   Scale starts at .97, never 0: nothing in the world appears out of nowhere. */
.cap-back { position: fixed; inset: 0; z-index: 120; background: color-mix(in srgb, #000 52%, transparent);
  display: flex; align-items: flex-start; justify-content: center; padding: 40px 20px; overflow-y: auto;
  backdrop-filter: blur(3px);
  animation: capBack 180ms var(--ease) both; }
.cap { width: min(860px, 100%); background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; box-shadow: 0 24px 70px rgba(0,0,0,.34); overflow: hidden;
  animation: capIn 200ms var(--ease) both; }
@keyframes capBack { from { opacity: 0; } to { opacity: 1; } }
@keyframes capIn { from { opacity: 0; transform: scale(.97) translateY(6px); }
                   to   { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  /* Motion goes; the fade stays, because appearing instantly is the thing that
     read as broken in the first place. */
  .cap { animation: capBack 140ms var(--ease) both; }
}
.cap-h { position: relative; padding: 22px 60px 18px 24px; border-bottom: 1px solid var(--border);
  background: var(--surface-2); }
.cap-h-meta { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.cap-st { font-family: var(--mono, ui-monospace, monospace); font-size: 10.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3); }
.cap-t { font-family: var(--display, inherit); font-size: 21px; line-height: 1.25; margin: 0 0 8px; }
.cap-sub { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-3); }
.cap-sub span::after { content: "·"; margin-left: 10px; opacity: .45; }
.cap-sub span:last-child::after { content: ""; margin: 0; }
.cap-x { position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); cursor: pointer; font-size: 13px; }
.cap-x:hover { color: var(--ink); border-color: var(--ink-3); }
.cap-b { padding: 6px 24px 20px; max-height: min(66vh, 760px); overflow-y: auto; }
.cap-sec { padding: 18px 0; border-bottom: 1px solid var(--border); }
.cap-sec:last-child { border-bottom: 0; }
.cap-sec h4 { font-family: var(--mono, ui-monospace, monospace); font-size: 10.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 10px; display: flex; gap: 8px; align-items: center; }
.cap-ev { font-size: 9.5px; padding: 2px 6px; border-radius: 5px; background: var(--surface-2);
  border: 1px solid var(--border); letter-spacing: .1em; }
.cap-hook { font-size: 17px; line-height: 1.45; margin: 0; font-weight: 500; }
.cap-cover, .cap-cta { font-size: 14px; line-height: 1.6; margin: 0; }
.cap-cap { font-size: 13.5px; line-height: 1.7; margin: 0; white-space: pre-wrap; }
.cap-lead { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); margin: 0 0 12px; }
.cap-why { font-size: 13px; line-height: 1.6; color: var(--ink-2); margin: 0 0 10px; }
.cap-note { font-size: 12.5px; line-height: 1.6; color: var(--ink-3); margin: 8px 0 0; }
.cap-note.sm { font-size: 11.5px; }
.cap-dir { font-size: 13.5px; line-height: 1.6; margin: 0; }
.cap-script { margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 1.75; }
.cap-script li { margin-bottom: 6px; }
.cap-shots { display: flex; flex-direction: column; gap: 12px; }
.cap-shot { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: start; }
.cap-shot-l { font-family: var(--mono, ui-monospace, monospace); font-size: 10.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3); padding-top: 2px; }
.cap-shot-b { font-size: 13.5px; line-height: 1.6; }
.cap-shot-f, .cap-shot-o { color: var(--ink-3); font-size: 12.5px; margin-top: 3px; }
.cap-src { display: flex; gap: 14px; align-items: flex-start; padding: 12px; border: 1px solid var(--border);
  border-radius: 12px; background: var(--surface-2); margin-bottom: 14px; }
.cap-src-img { width: 74px; height: 96px; border-radius: 9px; object-fit: cover; flex: 0 0 auto; background: var(--surface); }
.cap-src-noimg { border: 1px dashed var(--border); }
.cap-src-b { min-width: 0; }
.cap-src-w { font-size: 14px; font-weight: 600; }
.cap-src-s { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.cap-src-c { font-size: 12.5px; line-height: 1.55; color: var(--ink-2); margin-top: 7px; }
.cap-src-l { display: inline-block; margin-top: 9px; font-size: 12.5px; color: var(--accent); text-decoration: none; }
.cap-src-l:hover { text-decoration: underline; }
.cap-adapt { display: flex; flex-direction: column; gap: 10px; }
.cap-adapt > div { display: grid; grid-template-columns: 168px 1fr; gap: 12px; align-items: start; }
.cap-k { font-family: var(--mono, ui-monospace, monospace); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); padding-top: 3px; }
.cap-v { font-size: 13.5px; line-height: 1.6; }
.cap-tags { margin-top: 14px; }
.cap-tag-l { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.cap-f { display: flex; justify-content: space-between; gap: 12px; padding: 14px 24px;
  border-top: 1px solid var(--border); background: var(--surface-2); flex-wrap: wrap; }
.cap-f-l, .cap-f-r { display: flex; gap: 8px; flex-wrap: wrap; }
/* A direction's plan in the Capsule (Overview → View plan). Same shell; the
   plan's own lines simply read a size larger than they did inside a card. */
.cap-opp .clo-detail { border-top: 0; margin-top: 4px; padding-top: 0; gap: 10px; }
.cap-opp .clo-line { font-size: 13.5px; line-height: 1.6; }
.cap-opp .clo-detail ul { font-size: 13.5px; line-height: 1.65; }
.cap-opp .clo-hook { margin: 4px 0 12px; font-size: 13.5px; }
.cap-opp .cap-h-meta .clo-label { font-size: 9.5px; }

@media (max-width: 720px) {
  /* A full-height sheet: a centred modal on a phone is a card you fight. */
  .cap-back { padding: 0; align-items: stretch; }
  .cap { width: 100%; min-height: 100vh; border-radius: 0; border: 0; }
  .cap-h { padding: 18px 54px 16px 16px; }
  .cap-b { padding: 4px 16px 18px; max-height: none; }
  .cap-shot, .cap-adapt > div { grid-template-columns: 1fr; gap: 4px; }
  .cap-f { padding: 12px 16px; position: sticky; bottom: 0; }
  .cap-f-l, .cap-f-r { flex: 1 1 auto; }
  .cap-f .btn { flex: 1 1 auto; }
}

/* The Capsule header's series and class chips — still used there after the
   month itself stopped using them. */
.plc-serie { font: 600 8.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.plc-cls { font: 700 8px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 6px; border: 1px solid var(--border); border-radius: 5px; color: var(--ink-3); }
.plc-double_down { color: var(--up); border-color: color-mix(in srgb, var(--up) 34%, transparent); }
.plc-adapt { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 34%, transparent); }
.plc-experiment { color: var(--ink-3); border-style: dashed; }

/* Structure and shot steps — readable rows, never a raw dump. */
.cap-script li { margin-bottom: 10px; }
.cap-step-l { display: block; font-family: var(--mono, ui-monospace, monospace); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px; }
.cap-step-t { display: block; }
.cap-step-o, .cap-step-x { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.cap-shot-x { margin-left: 8px; opacity: .8; }
.cap-onscreen { margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 1.7; }
.cap-onscreen li { margin-bottom: 5px; }

/* ══ PLAN — THE MONTH, REDESIGNED ═════════════════════════════════════════
   The previous version put a border around every slot and a dashed box around
   every empty one, so a month rendered as sixty rectangles and read as a
   database table. Hierarchy and whitespace do that work now: the DAY is the
   only container with an edge, and the ideas inside it are entries. */

/* Compact header — counts on one line, actions on the right. */
.pl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; margin: 4px 0 12px; }
.pl-head h3 { font-family: var(--display, inherit); font-size: 20px; margin: 0 0 8px; letter-spacing: -.01em; }
.pl-counts { display: flex; gap: 16px; flex-wrap: wrap; align-items: baseline; }
.pl-bit { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.pl-bit b { color: var(--ink); font-weight: 600; margin-right: 3px; }
.pl-bit-lead b { font-size: 14px; }
.pl-head-a { display: flex; gap: 8px; flex-wrap: wrap; }
/* While the month is unfinished, replanning must not compete with finishing. */
.pl-head-a .pl-quiet { opacity: .55; }
.pl-head-a .pl-quiet:hover { opacity: 1; }

.pl-series { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }

/* The reasoning is kept, not deleted — it simply stops standing in front of
   the month. */
.pl-why { margin-bottom: 16px; border-top: 1px solid var(--border); padding-top: 10px; }
.pl-why > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 7px; }
.pl-why > summary::-webkit-details-marker { display: none; }
.pl-why-t { font-size: 12.5px; color: var(--ink-3); border-bottom: 1px dotted var(--border); }
.pl-why[open] .pl-why-t { color: var(--ink-2); }
.pl-why > summary::after { content: "›"; color: var(--ink-3); transition: transform .18s ease; }
.pl-why[open] > summary::after { transform: rotate(90deg); }
.pl-why-b { padding-top: 12px; }

/* ── the month ─────────────────────────────────────────────────────────── */
/* One canvas. Weeks are rows, days are columns inside them, and the only rules
   are hairlines — no card around a date, because a card around a date is what
   made a populated day cramped and an empty week enormous. */
/* ONE PREMIUM GLASS SURFACE, NOT THIRTY GLASS CARDS.
   The month was painted on opaque --surface with no blur and no elevation, so
   it sat flat against a page whose every other component floats. It now uses
   the product's OWN glass language — the same --glass fill, --blur, saturation,
   --sh-2 elevation and specular top edge that .panel and .hero already carry —
   applied once, to the whole canvas. The page treatment stays visible through
   it, which is the point of the material. */
/* SUBTLE TO THE POINT OF ABSENT. --glass is rgba(255,255,255,.62) and the page
   is #ECEAF2 — about four percent of lightness between them, which is not a
   surface, it is a rounding error. --sh-2 tops out at .06 alpha. The month read
   flat because every value I reached for was the quietest one available.
   It gets a fill that actually separates, the strong border, and real
   elevation — still translucent, so the wave and the wordmark read through. */
.pl-cal { margin-top: 6px; border: 1px solid var(--border-strong); border-radius: 16px;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: blur(var(--blur)) saturate(1.7);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.7);
  box-shadow: var(--sh-3), inset 0 1px 0 var(--glass-hi); }
/* THE DIVIDERS WERE 55% OF A 10%-ALPHA TOKEN — about five percent, which is
   not a line. A calendar is READ along its grid: you find Thursday by counting
   columns. The lines are the structure, not decoration on it. */
.pl-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid var(--border); }
.pl-week:last-child { border-bottom: 0; }
/* The days before the plan starts. Part of the same surface — a distinctly
   shaded slab reads as a broken cell, not as "nothing here yet". */
.pl-pad { background: transparent; }
/* Days carry no fill of their own — they are regions of one surface, separated
   by a line you can actually see. */
.pl-day { padding: 9px 9px 10px; border-right: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.pl-day:last-child { border-right: 0; }
/* A WEEK WITH NOTHING IN IT IS A STRIP. Seven blank cards is the thing that
   made an unbuilt month look like a field of homework. */
.pl-week.is-quiet .pl-day { padding: 7px 9px 8px; min-height: 0; }
.pl-week.is-quiet { background: color-mix(in srgb, var(--ink) 5%, transparent); }
/* TODAY IS LIFTED, NOT BOXED. A tint plus the faintest inner top edge reads as
   the surface catching light there — a border would make it a card again. */
.pl-day.is-today { background: color-mix(in srgb, var(--accent) 11%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--glass-hi) 80%, transparent); }
/* Muted, not disabled — past work stays legible. */
.pl-day.is-past .pl-day-n, .pl-day.is-past .pl-day-wd { opacity: .55; }
.pl-day.is-past .pl-entry-t { color: var(--ink-2); }
.pl-day.is-past .pl-entry-m, .pl-day.is-past .pl-prov { opacity: .75; }

.pl-day-h { display: flex; align-items: baseline; gap: 5px; }
.pl-day-wd { font-family: var(--mono, ui-monospace, monospace); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); }
.pl-day-n { font-size: 13px; font-weight: 600; }
.pl-today { font-family: var(--mono, ui-monospace, monospace); font-size: 8.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent); margin-left: auto; }
.pl-day-b { display: flex; flex-direction: column; gap: 7px; }

/* An idea is a row of type, not a card. Title, one metadata line, one dot. */
.pl-entry { display: flex; flex-direction: column; gap: 2px; text-align: left; width: 100%;
  border: 0; background: none; padding: 6px 7px; margin: 0 -7px; border-radius: 8px; cursor: pointer;
  color: inherit; font: inherit; }
.pl-entry { transition: background 140ms var(--ease), box-shadow 140ms var(--ease), transform 140ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .pl-entry:hover { background: color-mix(in srgb, var(--glass-hi) 42%, transparent);
    box-shadow: var(--sh-1); transform: translateY(-1px); }
}
/* PRESS FEEDBACK, NOT ITS ABSENCE. This was `transform: none` — which removed
   the hover lift and gave nothing back, so pressing an idea felt like the
   surface had stopped listening. It settles INTO the page instead. A row this
   wide only needs a hair of scale; .97 on something 200px across looks broken. */
.pl-entry:active { transform: scale(.995); box-shadow: none;
  transition-duration: 60ms; }
@media (prefers-reduced-motion: reduce) {
  .pl-entry { transition: background 140ms var(--ease); }
  .pl-entry:hover, .pl-entry:active { transform: none; }
}
.pl-entry:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pl-entry-t { font-size: 12.5px; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* WRAPS, NEVER TRUNCATES. Ellipsing this line cut the strategy class off —
   "SHORT VIDEO · 32S · D…" — which threw away the one token that says WHY the
   piece is there. Two short lines beat one clipped one. */
.pl-entry-m { font-family: var(--mono, ui-monospace, monospace); font-size: 8.5px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-3); line-height: 1.5; }
/* The dot leads the metadata line and carries the provenance by colour. */
.pl-entry-m { display: block; padding-left: 9px; position: relative; }
.pl-entry-m::before { content: ""; position: absolute; left: 0; top: .48em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--ink-3); }
.pl-entry-m.pl-prov-double_down::before { background: var(--live, #10B981); }
.pl-entry-m.pl-prov-adapt::before { background: var(--accent); }
.pl-entry-m.pl-prov-direction::before { background: var(--plan-direction); }
.pl-entry-m.pl-prov-experiment::before { background: var(--ink-3); }
.pl-entry-st { font-family: var(--mono, ui-monospace, monospace); font-size: 8.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--accent); }

/* Nearly silent: a plus that appears on approach. Open slots are capacity. */
.pl-open { margin-top: auto; }
.pl-open-b { width: 20px; height: 20px; line-height: 1; border: 0; background: none; padding: 0;
  font: inherit; font-size: 14px; color: var(--ink-3); cursor: pointer; border-radius: 6px; opacity: .32;
  /* It jumped from .32 to 1 on the same frame. Named properties, not `all`. */
  transition: opacity 140ms var(--ease), background 140ms var(--ease), color 140ms var(--ease); }
/* A TAP IS NOT A HOVER. Touch devices fire :hover on tap, so an ungated hover
   state sticks after the finger leaves — the affordance lights up and stays lit
   on exactly the devices where it means nothing. */
@media (hover: hover) and (pointer: fine) {
  .pl-day:hover .pl-open-b { opacity: 1; background: var(--surface-2); color: var(--accent); }
}
.pl-open-b:focus-visible { opacity: 1; background: var(--surface-2); color: var(--accent); }
.pl-open-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pl-open .plc-form { margin-top: 6px; }

@media (max-width: 900px) {
  /* An agenda, not seven unreadable columns. Every day becomes its own row and
     empty days drop out entirely — on a phone they are pure noise. */
  .pl-cal { border-radius: 12px; }
  .pl-week { grid-template-columns: 1fr; border-bottom: 0; }
  .pl-week.is-quiet { display: none; }
  .pl-pad { display: none; }
  .pl-day { border-right: 0; border-bottom: 1px solid var(--border); padding: 12px 14px 13px; }
  .pl-day.is-open { display: none; }
  /* …but the phone still needs ONE way to add. The day cells are hidden on
     purpose; the header carries a single add strip for the next open slot,
     using the same wrapper and handlers as a day cell. */
  .pl-open-mobile { display: flex; align-items: center; gap: 10px; margin: 10px 0 2px; }
  /* One line, not three stacked. */
  .pl-day-h { gap: 8px; flex-direction: row; align-items: baseline; }
  .pl-day-n { font-size: 14px; }
  .pl-today { margin-left: 0; }
  .pl-entry-t { font-size: 13.5px; }
  .pl-entry-m { font-size: 10px; }
  .pl-open-b { opacity: 1; }
}

/* Structure and shot steps — readable rows, never a raw dump. */
.cap-script li { margin-bottom: 10px; }
.cap-step-l { display: block; font-family: var(--mono, ui-monospace, monospace); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px; }
.cap-step-t { display: block; }
.cap-step-o, .cap-step-x { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.cap-shot-x { margin-left: 8px; opacity: .8; }
.cap-onscreen { margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 1.7; }
.cap-onscreen li { margin-bottom: 5px; }

/* ══ PLAN — THE MONTH, REDESIGNED ═════════════════════════════════════════
   The previous version put a border around every slot and a dashed box around
   every empty one, so a month rendered as sixty rectangles and read as a
   database table. Hierarchy and whitespace do that work now: the DAY is the
   only container with an edge, and the ideas inside it are entries. */

/* Compact header — counts on one line, actions on the right. */
.pl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; margin: 4px 0 12px; }
.pl-head h3 { font-family: var(--display, inherit); font-size: 20px; margin: 0 0 8px; letter-spacing: -.01em; }
.pl-counts { display: flex; gap: 16px; flex-wrap: wrap; align-items: baseline; }
.pl-bit { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.pl-bit b { color: var(--ink); font-weight: 600; margin-right: 3px; }
.pl-bit-lead b { font-size: 14px; }
.pl-head-a { display: flex; gap: 8px; flex-wrap: wrap; }
/* While the month is unfinished, replanning must not compete with finishing. */
.pl-head-a .pl-quiet { opacity: .55; }
.pl-head-a .pl-quiet:hover { opacity: 1; }

.pl-series { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }

/* The reasoning is kept, not deleted — it simply stops standing in front of
   the month. */
.pl-why { margin-bottom: 16px; border-top: 1px solid var(--border); padding-top: 10px; }
.pl-why > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 7px; }
.pl-why > summary::-webkit-details-marker { display: none; }
.pl-why-t { font-size: 12.5px; color: var(--ink-3); border-bottom: 1px dotted var(--border); }
.pl-why[open] .pl-why-t { color: var(--ink-2); }
.pl-why > summary::after { content: "›"; color: var(--ink-3); transition: transform .18s ease; }
.pl-why[open] > summary::after { transform: rotate(90deg); }
.pl-why-b { padding-top: 12px; }


/* ══ ENGAGE BUILDER ═══════════════════════════════════════════════════════
   Four short steps of one form. Steps are sections with a leading verb, not a
   wizard — the creator sees the whole automation at once. */
.eg-step { padding: 16px 0 14px; border-top: 1px solid var(--border); }
.eg-step:first-of-type { border-top: 0; padding-top: 4px; }
.eg-step-t { font-size: 13.5px; margin-bottom: 12px; color: var(--ink-2); }
.eg-step-t b { color: var(--ink); font-weight: 600; }
.eg-adv > summary { cursor: pointer; list-style: none; font-size: 12.5px; color: var(--ink-3);
  display: inline-flex; gap: 7px; align-items: center; }
.eg-adv > summary::-webkit-details-marker { display: none; }
.eg-adv > summary::after { content: "›"; transition: transform .16s var(--ease); }
.eg-adv[open] > summary::after { transform: rotate(90deg); }
.eg-adv[open] > .field, .eg-adv[open] > .eg-two { margin-top: 10px; }

/* Keyword chips — type, Enter, done. */
.eg-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 7px 8px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: text; }
.eg-chips:focus-within { border-color: var(--accent); }
.eg-kw { display: inline-flex; align-items: center; gap: 5px; }
.eg-kw-x { border: 0; background: none; padding: 0 2px; font-size: 10px; color: var(--ink-3);
  cursor: pointer; border-radius: 4px; }
.eg-kw-x:hover { color: var(--down, #D93838); }
.eg-kw-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
[data-eg-kw-input] { flex: 1 1 120px; min-width: 120px; border: 0; background: none;
  font: inherit; font-size: 13px; color: var(--ink); padding: 4px 2px; }
[data-eg-kw-input]:focus { outline: none; }

/* Button rows — label + link + remove, up to three. */
.eg-btns { margin-top: 12px; }
.eg-btns-h { font-size: 12.5px; color: var(--ink-2); margin-bottom: 8px; }
.eg-btn-row { display: grid; grid-template-columns: 140px 1fr 28px; gap: 8px; align-items: center;
  margin-bottom: 8px; }
.eg-btn-row input { font: inherit; font-size: 13px; color: var(--ink); padding: 7px 9px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); min-width: 0; }
.eg-btn-row input:focus { outline: none; border-color: var(--accent); }
@media (max-width: 720px) {
  .eg-btn-row { grid-template-columns: 1fr 28px; }
  .eg-btn-row [data-eg-btn-url] { grid-column: 1; }
}
.eg-auto-when { font-size: 11.5px; color: var(--ink-3); text-transform: uppercase;
  letter-spacing: .04em; font-family: var(--mono, inherit); margin-right: 2px; }

/* ══ ENGAGE V1.1 — the conversation layer ═════════════════════════════════
   One page, four places to be. The overview answers in seconds; the review
   queue holds only what needs a human; status is never color alone. */
.eg-nav { display: flex; gap: 8px; flex-wrap: wrap; margin: 2px 0 16px; position: sticky; top: 0; z-index: 3;
  padding: 8px 0; background: var(--bg); }
.eg-nav-i { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); text-decoration: none; padding: 7px 13px; border: 1px solid var(--border);
  border-radius: 999px; background: var(--surface); transition: color .15s, border-color .15s;
  min-height: 30px; display: inline-flex; align-items: center; gap: 5px; }
.eg-nav-i:hover { color: var(--ink); border-color: var(--accent); }
.eg-nav-n { color: var(--ink-2); }
.eg-nav-hot { color: var(--accent); font-weight: 700; }
.eg-sec-n { font-size: 12px; color: var(--accent); margin-left: 6px; }

.eg-overview { margin-bottom: 18px; }
.eg-ov-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.eg-ov-tile { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); padding: 14px 16px; }
.eg-ov-v { font-size: 21px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.eg-ov-l { font-family: var(--mono, monospace); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); margin-top: 4px; }
.eg-ov-line { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: 13px; color: var(--muted); margin-top: 10px; padding: 0 2px; }
.eg-ov-next { color: var(--ink-2); }

/* the automation type toggle — two whole sentences, one choice */
.eg-type-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.eg-type { text-align: left; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); color: var(--ink-2); cursor: pointer; font-size: 13px; line-height: 1.45; }
.eg-type.on { border-color: var(--accent); color: var(--ink); box-shadow: 0 0 0 1px var(--accent) inset; }
@media (max-width: 640px) { .eg-type-row { grid-template-columns: 1fr; } }

/* the Reply Assistant card */
.eg-assist-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.eg-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 640px) { .eg-three { grid-template-columns: 1fr; } }

/* the review queue */
.eg-rev-list { display: grid; gap: 12px; }
.eg-rev { padding: 16px 18px; }
.eg-rev-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.eg-rev-who { font-weight: 700; color: var(--ink); font-size: 13.5px; }
.eg-rev-meta { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.eg-rev-why { font-family: var(--mono, monospace); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px; }
.eg-rev-comment { font-size: 14px; color: var(--ink); line-height: 1.55; margin: 8px 0 2px; }
.eg-rev-post { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.eg-rev-post a { color: var(--accent); }
.eg-rev-draft { margin-top: 12px; margin-bottom: 8px; }
.eg-rev-acts { display: flex; gap: 8px; }
.eg-rev-sent { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--muted); margin-top: 10px; }

/* activity filters + quoted comments */
.eg-act-filters { display: flex; gap: 6px; flex-wrap: wrap; padding: 12px 14px 0; }
.eg-filter { font-family: var(--mono, monospace); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px; background: transparent;
  color: var(--ink-3); cursor: pointer; min-height: 30px; display: inline-flex; align-items: center; }
.eg-filter.on { color: var(--ink); border-color: var(--accent); }
.eg-act-q { color: var(--ink-3); font-style: italic; }

/* ══ REPLY VOICE (0020) ════════════════════════════════════════════════════
   How RunSignl should sound — a preset, optional instructions, a live try. */
.eg-voice { border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
  padding: 16px 18px; margin: 4px 0 14px; }
.eg-voice-h { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2); margin-bottom: 4px; }
.eg-voice-styles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
@media (max-width: 720px) { .eg-voice-styles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .eg-voice-styles { grid-template-columns: 1fr; } }
.eg-vstyle { display: grid; grid-template-rows: auto auto; gap: 2px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 11px; background: var(--bg); cursor: pointer; }
.eg-vstyle input { position: absolute; opacity: 0; pointer-events: none; }
.eg-vstyle.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.eg-vstyle-t { font-size: 13px; font-weight: 600; color: var(--ink); }
.eg-vstyle-d { font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.eg-voice-instr textarea { min-height: 52px; }
.eg-voice-controls { margin-top: 4px; }
.eg-voice-followup .eg-check { font-size: 12.5px; }
.eg-try { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border); }
.eg-try-h { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.eg-try-samples { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.eg-try-sample { font-size: 12.5px; padding: 7px 13px; border: 1px solid var(--border); border-radius: 999px;
  background: transparent; color: var(--ink-2); cursor: pointer; min-height: 32px; }
.eg-try-sample.on { color: var(--ink); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.eg-try-out { border: 1px solid var(--border); border-radius: 11px; background: var(--bg); padding: 12px 14px;
  font-size: 13.5px; color: var(--muted); }
.eg-try-comment { font-size: 12.5px; color: var(--ink-3); margin-bottom: 8px; }
.eg-try-reply { font-size: 14.5px; color: var(--ink); line-height: 1.5; }
.eg-try-note-t { font-size: 13px; color: var(--muted); font-style: italic; }
.eg-try-acts { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* Connect recovery banner — the one obvious primary CTA when a hosted
   workspace isn't connected yet (cancelled / failed / still finishing). */
.eg-reconnect{border:1px solid var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent);padding:18px 20px}
.eg-reconnect .eg-conn-acts{margin-top:14px}

/* ══ ENGAGE V2 — THE COMMAND CENTER + FOCUSED SURFACES ════════════════════
   Engage stopped being one long scroll of every control. The default surface
   is a compact command center; a tab strip swaps to one focused section at a
   time; the builder journey is its own contained surface. Same tokens, same
   type scale, no new palette. State never rides on colour alone — every dot is
   paired with its word. */

/* ── the in-Engage view switcher ─────────────────────────────────────────── */
.eg-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0 18px;
  border-bottom: 1px solid var(--border); padding-bottom: 0; }
.eg-tab { appearance: none; background: transparent; border: 0; cursor: pointer;
  font-family: var(--mono, monospace); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); padding: 9px 12px 11px; border-bottom: 2px solid transparent; margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px; transition: color .15s ease, border-color .15s ease; }
.eg-tab:hover { color: var(--ink); }
.eg-tab.on { color: var(--ink); border-bottom-color: var(--accent); }
.eg-tab-n { font-family: var(--mono, monospace); font-size: 10.5px; font-weight: 700; color: var(--ink-2);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px; line-height: 1.5; }
.eg-tab-n.hot { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.eg-view { animation: egViewIn .16s var(--ease, ease) both; }
@keyframes egViewIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ← back from a focused surface */
.eg-back { appearance: none; background: transparent; border: 0; cursor: pointer; color: var(--ink-2);
  font-size: 13px; padding: 6px 4px; margin: 0 0 6px; display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; border-radius: 8px; }
.eg-back:hover { color: var(--ink); }

/* ── the command center ──────────────────────────────────────────────────── */
.eg-cc-next { display: flex; align-items: center; gap: 10px; padding: 12px 16px; margin-bottom: 16px;
  border: 1px solid var(--border); border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface)); font-size: 14px; color: var(--ink); }
.eg-cc-next-k { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 6px; padding: 3px 7px; flex: 0 0 auto; }
.eg-cc-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); align-items: stretch; }
.eg-cc-card { border: 1px solid var(--border); border-radius: 16px; background: var(--surface);
  padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0;
  box-shadow: var(--sh-1, 0 1px 2px rgba(0,0,0,.04)); }
.eg-cc-card.hot { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.eg-cc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.eg-cc-k { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); }
.eg-cc-v { font-size: 19px; font-weight: 600; line-height: 1.2; color: var(--ink); word-break: break-word; }
.eg-cc-at { font-size: 15px; font-weight: 500; color: var(--ink-2); }
.eg-cc-d { font-size: 12.5px; color: var(--muted); line-height: 1.5; flex: 1 1 auto; }
.eg-cc-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

/* ── the honest surface map (Reply Assistant view) ───────────────────────── */
.eg-surfaces { border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
  padding: 6px 4px; margin: 4px 0 20px; }
.eg-surfaces-h { font-family: var(--mono, monospace); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); padding: 12px 16px 8px; }
.eg-surface { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 16px; border-top: 1px solid var(--border); }
.eg-surface-n { font-size: 14px; font-weight: 600; color: var(--ink); }
.eg-surface-d { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-top: 2px; max-width: 52ch; }
.eg-surface-r { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.eg-surface-b { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3); border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.eg-surface-b.on { color: var(--live); border-color: color-mix(in srgb, var(--live) 40%, transparent);
  background: color-mix(in srgb, var(--live) 10%, transparent); }
.eg-surface-b.via { color: var(--ink-2); }
.eg-surface-go { appearance: none; background: transparent; border: 0; cursor: pointer; color: var(--accent);
  font-size: 12.5px; padding: 6px; min-height: 40px; white-space: nowrap; }
.eg-surface-go:hover { text-decoration: underline; }

/* ── Quick Starts: outcomes first ────────────────────────────────────────
   Cards name what the creator gets, not what the system does. Same tokens as
   the rest of Engage; nothing new invented. */
.eg-qs-head { margin-bottom: 16px; }
.eg-qs-h { font-family: var(--display, inherit); font-size: 19px; line-height: 1.3; color: var(--ink); }
.eg-qs-d { font-size: 13px; color: var(--muted); line-height: 1.6; margin-top: 6px; max-width: 62ch; }
.eg-qs-warn { margin: 0 0 14px; }
.eg-qs-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }
.eg-qs { appearance: none; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 7px;
  border: 1px solid var(--border); border-radius: 16px; background: var(--surface); padding: 15px 17px 16px;
  transition: border-color .15s ease, transform .15s ease; min-height: 128px; }
.eg-qs:hover:not([disabled]) { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); transform: translateY(-1px); }
.eg-qs:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.eg-qs[disabled] { opacity: .55; cursor: not-allowed; }
.eg-qs-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.eg-qs-icon { font-size: 15px; color: var(--accent); line-height: 1; }
.eg-qs-state { font-family: var(--mono, monospace); font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.eg-qs-state.live { color: var(--live); border-color: color-mix(in srgb, var(--live) 40%, transparent);
  background: color-mix(in srgb, var(--live) 10%, transparent); }
.eg-qs-t { font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.eg-qs-o { font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.eg-qs-foot { margin-top: 16px; }
.eg-linkish { appearance: none; background: none; border: 0; padding: 0; cursor: pointer; color: var(--accent);
  font: inherit; text-decoration: underline; }
.eg-linkish:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* the focused explanation before anything is configured */
.eg-qs-focus { padding: 20px 22px; margin-bottom: 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); }
.eg-qs-focus-h { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; color: var(--ink); }
.eg-qs-focus-o { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin-top: 6px; }
.eg-qs-sec { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); margin: 16px 0 8px; }
.eg-qs-list { margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 1.7; color: var(--ink); }
.eg-qs-list li { margin-bottom: 4px; }

@media (max-width: 720px) {
  .eg-qs-grid { grid-template-columns: 1fr; }
  .eg-qs { min-height: 0; }
  .eg-qs-focus { padding: 16px; }
}

/* ── the per-surface autonomy control (0022) ─────────────────────────────
   A real <select> with a real <label>: keyboard-operable everywhere, native
   on mobile, and the chosen level is READ OUT rather than inferred from a
   colour or a knob position. `Off` is one of the four values, so there is no
   separate enable switch that could disagree with the level.

   A live surface is marked by an accent rail on the row AND by the level text
   inside the control — never by colour alone. */
.eg-surface { border-left: 3px solid transparent; padding-left: 13px; }
.eg-surface.on { border-left-color: var(--accent); }
.eg-surface-sel { appearance: none; -webkit-appearance: none;
  font: inherit; font-size: 13px; color: var(--ink); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 10px; padding: 9px 32px 9px 12px; cursor: pointer;
  min-height: 40px; max-width: 100%;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.eg-surface.on .eg-surface-sel { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.eg-surface-sel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.eg-surface-sel:disabled { opacity: .55; cursor: not-allowed; }
.eg-surface.on .eg-surface-n { color: var(--ink); }
.eg-surface-n { cursor: pointer; }
/* the save status: empty at rest, so it never competes with the control */
.eg-surface-w { font-family: var(--mono, monospace); font-size: 10.5px; font-weight: 600; letter-spacing: .06em;
  color: var(--ink-3); min-width: 54px; white-space: nowrap; }
.eg-surface-w.eg-surface-busy { color: var(--ink-3); }
.eg-surface-sel[aria-busy="true"] { opacity: .6; }
.eg-surfaces-n { padding: 10px 16px 12px; margin-top: 0; }
.eg-rev-kind { font-family: var(--mono, monospace); font-size: 10.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--accent); }

/* ── Reply Voice, folded so it no longer dominates ───────────────────────── */
.eg-voice-fold { border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
  margin: 6px 0 14px; overflow: hidden; }
.eg-voice-fold > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 14px 16px; min-height: 40px; }
.eg-voice-fold > summary::-webkit-details-marker { display: none; }
.eg-voice-fold-l { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.eg-voice-fold-l b { font-size: 14px; color: var(--ink); }
.eg-voice-fold-s { font-size: 12.5px; color: var(--muted); }
.eg-voice-fold-cta { font-family: var(--mono, monospace); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); flex: 0 0 auto; }
.eg-voice-fold[open] > summary { border-bottom: 1px solid var(--border); }
.eg-voice-fold[open] .eg-voice-fold-cta::after { content: " ▲"; }
.eg-voice-fold:not([open]) .eg-voice-fold-cta::after { content: " ▼"; }
/* inside the fold the voice panel is already contained — drop its double frame */
.eg-voice-fold .eg-voice { border: 0; border-radius: 0; background: transparent; padding: 14px 16px 16px; margin: 0; }
.eg-voice-fold .eg-voice-h { display: none; }

/* ── automation ON / OFF pill ────────────────────────────────────────────── */
.eg-onoff { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono, monospace);
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--border); white-space: nowrap; }
.eg-onoff.on { color: var(--live); border-color: color-mix(in srgb, var(--live) 45%, transparent);
  background: color-mix(in srgb, var(--live) 10%, transparent); }
.eg-onoff.off { color: var(--ink-3); background: var(--surface-2); }

/* ── activation success — the loop, visibly closed ───────────────────────── */
.eg-success { border: 1px solid color-mix(in srgb, var(--live) 45%, var(--border)); border-radius: 16px;
  background: color-mix(in srgb, var(--live) 8%, var(--surface)); padding: 18px 20px; margin-bottom: 18px;
  animation: egViewIn .2s var(--ease, ease) both; }
.eg-success:focus { outline: none; }
.eg-success-h { display: flex; align-items: center; gap: 9px; font-size: 15.5px; font-weight: 600; color: var(--ink); }
.eg-success-b { margin: 12px 0 4px; }
.eg-success-when { font-size: 13.5px; color: var(--ink); line-height: 1.7; display: flex; align-items: center;
  gap: 8px; flex-wrap: wrap; }
.eg-success-then { font-size: 12.5px; color: var(--muted); margin: 10px 0 6px; }
.eg-success-l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.eg-success-l li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink); }
.eg-success-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

/* ── accessibility: a visible focus ring for keyboard users, everywhere the
   redesign adds interactivity; and headings that take programmatic focus must
   not paint a ring when they receive it by script ── */
.eg-tab:focus-visible, .eg-back:focus-visible, .eg-cc-acts .btn:focus-visible,
.eg-surface-go:focus-visible, .eg-voice-fold > summary:focus-visible, .eg-success-acts .btn:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.eg-view .eg-sec-h:focus, .eg-cc:focus, .eg-assist:focus { outline: none; }

/* ── mobile (390×844 first) ──────────────────────────────────────────────── */
@media (max-width: 720px) {
  /* WRAP, never scroll: a hidden tab is an unreachable section. All five stay
     visible, flowing to a second row, none clipped past the viewport edge. */
  .eg-tabs { flex-wrap: wrap; gap: 2px 4px; margin-bottom: 14px; border-bottom: 0; }
  .eg-tab { white-space: nowrap; padding: 9px 11px; min-height: 40px; border: 1px solid var(--border);
    border-radius: 999px; margin-bottom: 0; }
  .eg-tab.on { border-color: var(--accent); color: var(--ink);
    background: color-mix(in srgb, var(--accent) 10%, transparent); }
  .eg-cc-grid { grid-template-columns: 1fr; gap: 12px; }
  .eg-cc-card { padding: 15px 16px 13px; }
  .eg-cc-acts { }
  .eg-cc-acts .btn { flex: 1 1 auto; }
  .eg-cc-next { align-items: flex-start; }
  .eg-surface { flex-direction: column; align-items: flex-start; gap: 8px; }
  /* the control takes the whole row and the save status wraps beneath it —
     an empty status must not steal width from the level the creator reads */
  .eg-surface-r { align-self: stretch; flex-wrap: wrap; justify-content: flex-start; }
  .eg-surface-sel { flex: 1 1 100%; }
  .eg-surface-w { flex: 1 1 100%; min-width: 0; min-height: 13px; }
  .eg-success-acts .btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .eg-view, .eg-success { animation: none; }
  .eg-tab { transition: none; }
}

/* ── PEOPLE: who else can work in this workspace ─────────────────────────
   Membership is the only authorization RunSignl has, so this panel is a plain
   readable roster — no badges implying capability the server doesn't grant. */
.people-body { padding: 4px 2px 6px; }
.people-list { display: grid; gap: 2px; }
.people-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--border); }
.people-row:last-child { border-bottom: 0; }
.people-who { min-width: 0; }
.people-email { font-size: 13.5px; color: var(--ink); font-weight: 600; word-break: break-word; }
.people-you { font-family: var(--mono, monospace); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent); margin-left: 6px; }
.people-role { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-top: 2px; }
.people-add { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.people-add-h { font-family: var(--mono, monospace); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.people-add-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* the same chrome every other Settings field wears — a raw browser control
   inside a styled panel reads as unfinished */
.people-add-row input[type="email"], .people-add-row select {
  font: inherit; font-size: 13.5px; color: var(--ink); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; min-height: 40px; }
.people-add-row input[type="email"]::placeholder { color: var(--ink-3); }
.people-add-row input[type="email"]:focus-visible, .people-add-row select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; }
.people-add-row input[type="email"] { flex: 1 1 220px; min-width: 0; }
.people-add-row select { flex: 0 0 auto; cursor: pointer; }
.people-msg { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin-top: 8px; min-height: 1em; }
@media (max-width: 640px) {
  .people-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .people-add-row { flex-direction: column; align-items: stretch; }
  /* flex-basis becomes a HEIGHT once the row stacks — without this reset the
     email field grew into a 220px-tall empty box on a phone */
  .people-add-row input[type="email"], .people-add-row select, .people-add-row .btn {
    width: 100%; flex: 0 0 auto; }
}

/* the workspace switcher, for anyone who belongs to more than one */
.pm-sec { font-family: var(--mono, monospace); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); padding: 10px 14px 4px; }
.pop-item.pm-ws { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pop-item.pm-ws.on { color: var(--accent); }
.pm-ws-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-ws-r { font-family: var(--mono, monospace); font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); flex: 0 0 auto; }

/* a tour step may offer a door to the thing it just described */
.tour-cta { margin: 12px 0 2px; }
.tour-cta .btn { width: 100%; }

/* ── INCOMPLETE AUTOMATIONS: one state, said once ────────────────────────
   The status word, this line and the primary action all come from the same
   server verdict, so they cannot contradict each other the way a live status
   beside a stale stored error used to. */
.eg-auto-needs { font-size: 12.5px; line-height: 1.55; color: var(--ink-2);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 12px; margin-top: 10px; }
/* the review screen an incomplete automation gets instead of an Activate button */
.eg-confirm-blocked { border-color: var(--border); }
.eg-confirm-why { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); margin: 6px 0 4px; }
/* a field the validator actually named — never decoration, never colour alone */
.eg-need { border-color: var(--accent) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent) inset; }
.eg-need-note { font-size: 12.5px; line-height: 1.5; color: var(--accent); margin-top: 6px; }
@media (max-width: 640px) {
  .eg-auto-needs { padding: 10px; }
  .eg-confirm-blocked .eg-confirm-acts { flex-direction: column; align-items: stretch; }
  .eg-confirm-blocked .eg-confirm-acts .btn { width: 100%; }
}

/* A finished month states itself where the press used to be. */
.pl-gen-done { display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px;
  border-radius: 11px; border: 1px solid var(--border); background: var(--surface-2);
  font-size: 13px; font-weight: 620; color: var(--ink); }
.pl-gen-tick { width: 8px; height: 8px; border-radius: 50%; background: var(--live);
  box-shadow: 0 0 7px color-mix(in srgb, var(--live) 55%, transparent); flex: 0 0 auto; }
@media (max-width: 640px) { .pl-gen-done { width: 100%; justify-content: center; min-height: 44px; } }

/* ── THE MONTH IS THE PAGE; THE STARTER WEEK IS A REFERENCE ────────────────
   Seven full rows under the calendar took the Plan page over — the month they
   supersede was scrolled off beneath them. One compact line, and the whole
   week one press away in the capsule this page already uses. */
.pl-starter { display: flex; align-items: center; gap: 14px; margin: 16px 0 0;
  padding: 13px 15px; border: 1px solid var(--border); border-radius: 13px;
  background: var(--surface-2); }
.pl-starter-l { flex: 1 1 auto; min-width: 0; }
.pl-starter-t { font-size: 13px; font-weight: 640; color: var(--ink); }
.pl-starter-s { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.pl-starter .btn { flex: 0 0 auto; }
.cap-starter .cap-b { padding-top: 4px; }
.cap-starter .fp-days { margin: 0; }

/* ── THE PRESS ANSWERS WHERE IT WAS PRESSED ────────────────────────────────
   The Generate control becomes the status in place. It is not a button any
   more while a run is live, and it does not look like one. */
.pl-gen-live { display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 16px; border-radius: 11px; border: 1px solid var(--border-strong);
  background: var(--surface); font-size: 13px; font-weight: 620; color: var(--ink);
  cursor: default; user-select: none; }
.pl-gen-spin { width: 13px; height: 13px; flex: 0 0 auto; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-top-color: var(--accent); animation: pl-gen-rot .8s linear infinite; }
@keyframes pl-gen-rot { to { transform: rotate(360deg); } }
.pl-gen-c { font-family: var(--mono); font-size: 12px; color: var(--ink-2);
  padding-left: 10px; border-left: 1px solid var(--border); }
@media (prefers-reduced-motion: reduce) { .pl-gen-spin { animation: none; } }
@media (max-width: 640px) {
  .pl-starter { flex-wrap: wrap; }
  .pl-starter .btn { flex: 1 1 100%; min-height: 40px; }
  .pl-gen-live { width: 100%; justify-content: center; min-height: 44px; }
}

/* ══ THE CAROUSEL DECK ════════════════════════════════════════════════════
   A deck is a sequence, so it is drawn as one: numbered frames in package
   order, each carrying the job it does. The frame is deliberately the loudest
   thing on the row and the direction beside it is deliberately quiet — the
   question this surface answers is "does this read in order?", and burying the
   headline in a table of eight equal fields is exactly how the flat shot-plan
   list failed to answer it.

   Prefix `dk-`. It does NOT reuse `cap-`: the Capsule's rules are already
   declared twice in this file and its `capIn` keyframe is redefined at 4432,
   so borrowing that namespace would inherit two live cascade collisions. */

/* ── the strip inside the Content drawer ─────────────────────────────────── */
.dk-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.dk-strip-b { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }
.dk-strip-t { font-family: var(--mono, ui-monospace, monospace); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); }
.dk-strip-n { font-size: 12.5px; color: var(--muted); }
.dk-strip-a { display: flex; gap: 8px; flex: 0 0 auto; }
.dk-strip-a .btn { min-height: 40px; }
.dk-strip-msg { flex: 1 1 100%; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.dk-strip-msg:empty { display: none; }
/* Why a build is not on offer. Same column as the message line so the panel
   keeps one reading order, and muted because it is an explanation, not a
   failure — the record is fine, it just is not at that stage yet. */
.dk-strip-why { flex: 1 1 100%; margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); }

/* ── the verdict chip, shared by the strip and the modal ─────────────────── */
.dk-verdict { font-family: var(--mono, ui-monospace, monospace); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; padding: 4px 8px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
.dk-verdict.ok { color: var(--live); border-color: color-mix(in srgb, var(--live) 40%, transparent);
  background: color-mix(in srgb, var(--live) 10%, transparent); }
.dk-verdict.bad { color: var(--down, #F87171); border-color: color-mix(in srgb, var(--down, #F87171) 40%, transparent);
  background: color-mix(in srgb, var(--down, #F87171) 10%, transparent); }

/* ── the modal ───────────────────────────────────────────────────────────── */
.dk-back { position: fixed; inset: 0; z-index: 130; background: color-mix(in srgb, #000 52%, transparent);
  display: flex; align-items: flex-start; justify-content: center; padding: 40px 20px; overflow-y: auto;
  backdrop-filter: blur(3px); animation: dkBack 180ms var(--ease, ease) both; }
.dk { width: min(920px, 100%); background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; box-shadow: var(--sh-4, 0 24px 70px rgba(0,0,0,.34)); overflow: hidden;
  animation: dkIn 200ms var(--ease, ease) both; }
@keyframes dkBack { from { opacity: 0; } to { opacity: 1; } }
@keyframes dkIn { from { opacity: 0; transform: scale(.97) translateY(6px); } to { opacity: 1; transform: none; } }
/* NO LOCAL prefers-reduced-motion RULE HERE, ON PURPOSE. The global switch at
   the top of this file is `* { animation: none !important }`, which no
   component rule can outrank — so a local override would be a line that reads
   like a decision and does nothing. Under reduced motion the deck simply
   appears, fully opaque, with no keyframe running: `animation` is the ONLY
   thing carrying the entry, and neither `opacity` nor `transform` is set on
   `.dk` itself, so killing it leaves a correctly painted modal rather than an
   invisible one. That is the property worth pinning, and the UI suite pins it. */
.dk-h { position: relative; padding: 22px 60px 18px 24px; border-bottom: 1px solid var(--border);
  background: var(--surface-2); }
.dk-h-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.dk-tag { font-family: var(--mono, ui-monospace, monospace); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent); }
.dk-st { font-family: var(--mono, ui-monospace, monospace); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); }
.dk-t { margin: 0; font-family: var(--display, inherit); font-size: 21px; line-height: 1.25; color: var(--ink); }
.dk-sub { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: var(--ink-3); }
.dk-x { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); cursor: pointer; font-size: 13px; }
.dk-b { padding: 6px 24px 20px; max-height: min(72vh, 760px); overflow-y: auto; }
.dk-sec { padding: 18px 0; border-bottom: 1px solid var(--border); }
.dk-sec:last-child { border-bottom: 0; }
.dk-sec h4 { margin: 0 0 12px; font-family: var(--mono, ui-monospace, monospace); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.dk-hook { margin: 0 0 10px; font-family: var(--display, inherit); font-size: 18px; line-height: 1.4; color: var(--ink); }
.dk-angle, .dk-cta { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink); }
.dk-caption { margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2);
  font-size: 13.5px; line-height: 1.65; color: var(--ink); white-space: pre-wrap; }
.dk-kv { display: flex; gap: 10px; font-size: 13px; margin-top: 6px; }
.dk-k { font-family: var(--mono, ui-monospace, monospace); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); flex: 0 0 auto; padding-top: 3px; min-width: 132px; }
.dk-v { color: var(--ink); line-height: 1.6; min-width: 0; }
/* AN ABSENCE IS STATED, NEVER FILLED IN. A blank where a field should be reads
   as "nothing needed here"; this reads as "nobody has written this yet". */
.dk-gap { font-style: italic; color: var(--ink-3); }
.dk-gap-p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-3); }

/* ── the sequence ────────────────────────────────────────────────────────── */
.dk-slides { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.dk-slide { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 16px; align-items: start; }
.dk-frame { position: relative; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2);
  padding: 14px; display: flex; flex-direction: column; gap: 10px;
  /* 4:5 is the shape a carousel frame is actually read in. The preview is not
     a render, but a frame that is not frame-shaped teaches the wrong thing
     about how much copy fits. */
  min-height: 200px; }
.dk-slide.flagged .dk-frame { border-color: color-mix(in srgb, var(--down, #F87171) 45%, var(--border)); }
.dk-frame-top { display: flex; align-items: center; gap: 8px; }
.dk-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: 7px; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 700; flex: none; }
.dk-purpose { font-family: var(--mono, ui-monospace, monospace); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); }
.dk-p-hook, .dk-p-cta, .dk-p-takeaway { color: var(--accent); }
.dk-p-none { color: var(--down, #F87171); }
.dk-frame-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* A CREATOR PASTES A URL, A HASHTAG CHAIN, OR A 280-CHARACTER RUN WITH NO
   SPACES, and an unbreakable word is wider than any column that contains it.
   Without this the frame grew to 2092px inside a 375px sheet — the deck was
   still in order, and completely unreadable. `anywhere` rather than
   `break-word` because only `anywhere` also shrinks the intrinsic min-content
   size, which is what the grid track is sized from. */
.dk-head, .dk-copy, .dk-dir dd, .dk-caption, .dk-angle, .dk-cta, .dk-hook,
.dk-chk-l, .dk-chk-note, .dk-v, .dk-warns li, .dk-pnotes li, .dk-prov-v,
.dk-frame-foot { overflow-wrap: anywhere; min-width: 0; }
.dk-head { margin: 0; font-family: var(--display, inherit); font-size: 16px; line-height: 1.3; color: var(--ink); }
.dk-copy { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.dk-frame-foot { font-family: var(--mono, ui-monospace, monospace); font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); }
.dk-dir { margin: 0; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px 12px; align-items: start; }
.dk-dir dt { font-family: var(--mono, ui-monospace, monospace); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); padding-top: 2px; }
.dk-dir dd { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); min-width: 0; }

/* ── the verdict list ────────────────────────────────────────────────────── */
.dk-chks { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; }
.dk-chk { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: start;
  padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.dk-chk:last-child { border-bottom: 0; }
.dk-chk-i { font-size: 12px; line-height: 1.5; }
.dk-chk-ok .dk-chk-i { color: var(--live); }
.dk-chk-bad .dk-chk-i { color: var(--down, #F87171); }
.dk-chk-warn .dk-chk-i { color: var(--accent); }
.dk-chk-b { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dk-chk-l { color: var(--ink); }
.dk-chk-ok .dk-chk-l { color: var(--ink-2); }
.dk-chk-n { font-size: 12px; color: var(--muted); }
.dk-chk-note { font-size: 12px; line-height: 1.5; color: var(--ink-3); }
.dk-chk-sev { font-family: var(--mono, ui-monospace, monospace); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); white-space: nowrap; padding-top: 3px; }
.dk-adv-h { margin: 14px 0 6px; font-family: var(--mono, ui-monospace, monospace); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.dk-note { margin: 10px 0 0; font-size: 12px; line-height: 1.55; color: var(--ink-3); }
.dk-warns, .dk-pnotes { margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.65; color: var(--ink-2); }
.dk-prov { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dk-prov li { display: flex; gap: 10px; font-size: 12.5px; }
.dk-prov-k { font-family: var(--mono, ui-monospace, monospace); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); min-width: 110px; }
.dk-prov-v { color: var(--ink-2); }

.dk-f { display: flex; align-items: center; gap: 12px; padding: 14px 24px; border-top: 1px solid var(--border);
  background: var(--surface-2); }
.dk-f-l { flex: 1 1 auto; min-width: 0; }
.dk-f-note { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.dk-f-r { display: flex; gap: 8px; flex: 0 0 auto; }

@media (max-width: 720px) {
  /* A full-height sheet: a centred modal on a phone is a card you fight. */
  .dk-back { padding: 0; align-items: stretch; }
  .dk { width: 100%; min-height: 100vh; border-radius: 0; border: 0; }
  .dk-h { padding: 18px 54px 16px 16px; }
  .dk-b { padding: 4px 16px 18px; max-height: none; }
  /* The frame stacks ABOVE its direction rather than beside it — the frame is
     what has to stay frame-shaped, and two 130px columns is neither. */
  /* minmax(0, 1fr), never a bare 1fr: a bare `1fr` floors at the track's
     min-content width, so one long word pushes the whole sheet sideways. */
  .dk-slide { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .dk-kv { flex-direction: column; gap: 2px; }
  .dk-k { min-width: 0; padding-top: 0; }
  .dk-dir { grid-template-columns: 72px minmax(0, 1fr); }
  .dk-chk { grid-template-columns: 18px minmax(0, 1fr); }
  .dk-chk-sev { grid-column: 2; padding-top: 0; }
  .dk-f { padding: 12px 16px; position: sticky; bottom: 0; }
  .dk-f-r { flex: 1 1 auto; }
  .dk-f .btn { flex: 1 1 auto; }
  .dk-strip-a { flex: 1 1 100%; }
  .dk-strip-a .btn { flex: 1 1 auto; }
}

/* ══ THE FIRST SCREEN — evidence, one pick, one way to learn ═══════════════
   The setup pull writes ideas, hooks, a plan and insights for THIS account,
   and the Overview used to scatter them: four preview lines inside a
   disclosure, a plan behind a summary, insights in an agent drawer. A creator
   who came back through the ready email landed on a page that made the work
   look like it had not happened. This block is where that work is seen first:
   what RunSignl read (real data), the one idea worth creating (written for
   them), and the honest state of what RunSignl compares them with. */
.fv { margin: 0 0 22px; }
.fv-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 14px; align-items: stretch; }
.fv-card {
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
  background: var(--glass); border: 1px solid var(--border); border-radius: 16px;
  padding: 18px 20px 17px;
  box-shadow: 0 1px 2px rgba(0,0,0,.14), 0 10px 28px -18px rgba(0,0,0,.45);
}
.fv-create { border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 7%, var(--surface)), var(--glass) 62%); }
.fv-kicker { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font: 600 10px/1 var(--mono); letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3); }
.fv-kicker .tag { padding: 4px 9px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; font-family: var(--mono); }
.fv-nums { display: flex; gap: 8px; flex-wrap: wrap; }
.fv-n { display: inline-flex; flex-direction: column; gap: 2px; padding: 8px 11px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--border); min-width: 74px; }
.fv-n b { font: 700 16px/1.1 var(--mono); color: var(--ink); letter-spacing: -.01em; }
.fv-n span { font: 500 10px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); }
.fv-top { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 11px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.fv-top.no-img { grid-template-columns: minmax(0, 1fr); }
.fv-top-th { width: 64px; height: 80px; object-fit: cover; border-radius: 8px; display: block; background: var(--surface); }
.fv-top-k { font: 600 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px; }
.fv-top-v { font-size: 13px; line-height: 1.45; color: var(--ink); }
.fv-top-v b { font-family: var(--mono); font-weight: 700; }
.fv-top-c { font-size: 12px; line-height: 1.5; color: var(--ink-2); margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fv-top-o { font-size: 11.5px; color: var(--accent); text-decoration: none; margin-top: 4px; display: inline-block; }
.fv-obs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fv-obs li { font-size: 12.5px; line-height: 1.5; color: var(--ink); display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 10px; }
.fv-obs li span { font: 500 10px/1.6 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.fv-empty { font-size: 13px; line-height: 1.65; color: var(--ink-2); max-width: 52ch; }
.fv-title { font: 640 19px/1.28 var(--display); letter-spacing: -.015em; color: var(--ink); margin: 0; }
.fv-why, .fv-src { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.fv-why span, .fv-src span, .fv-hooks-k { display: block; font: 600 9.5px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.fv-src { font-size: 12px; color: var(--ink-3); }
.fv-hooks { display: flex; flex-direction: column; gap: 6px; }
.fv-hooks-k em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--ink-3); font-weight: 500; }
.fv-hook-row { display: flex; flex-wrap: wrap; gap: 6px; }
.fv-hook { font: 500 12.5px/1.4 var(--sans); color: var(--ink); text-align: left; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 6px 12px;
  transition: border-color .15s var(--ease), background .15s var(--ease); }
.fv-hook:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.fv-hook.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.fv-hook.on::before { content: "✓ "; color: var(--accent); font-weight: 700; }
.fv-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }
.fv-saved { display: inline-flex; align-items: center; gap: 7px; font: 600 11px/1 var(--mono); letter-spacing: .08em;
  text-transform: uppercase; color: var(--live); }
.fv-saved i { width: 7px; height: 7px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 3px color-mix(in srgb, var(--live) 22%, transparent); }
.fv-said { margin-top: 4px; padding: 10px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2);
  border: 1px solid color-mix(in srgb, var(--live) 30%, var(--border)); background: color-mix(in srgb, var(--live) 7%, transparent); }
.fv-said b { color: var(--ink); }
.fv-wait { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); }
.fv-fresh { margin-top: 4px; padding: 9px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2);
  border: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--border)); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.fv-fresh .linklike { font-size: 12.5px; }
/* LEARN — one strip, one honest state at a time. */
.fv-learn { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 14px; padding: 14px 18px; border-radius: 14px;
  background: var(--glass); border: 1px dashed color-mix(in srgb, var(--accent) 38%, var(--border)); }
.fv-learn-on { border-style: solid; border-color: var(--border); }
.fv-learn-t { font-size: 13px; line-height: 1.6; color: var(--ink-2); max-width: 66ch; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fv-learn-t b { color: var(--ink); font-weight: 650; }
.fv-learn-t .tag { flex: none; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; padding: 4px 9px; }
.fv-learn-a { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; flex: 0 1 300px; }
.fv-learn-a .btn { align-self: flex-start; }
.fv-learn-n { font-size: 11.5px; line-height: 1.5; color: var(--ink-3); }
.fv-learn-row { display: flex; gap: 8px; flex-wrap: wrap; }
/* The discovery panel's mount keeps its heading for the moment the panel is
   open; while the first screen carries the offer, an empty mount is silent. */
.fv-radar:not(:has(#bmPanel > *)) > .section-head { display: none; }

/* What RunSignl made for you — four doors, each named for where the work lives. */
.fb-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; margin-top: 10px; }
.fb-tile { display: flex; flex-direction: column; gap: 5px; text-align: left; cursor: pointer; min-width: 0;
  border: 1px solid var(--border); border-radius: 13px; padding: 13px 14px 12px; background: var(--surface); color: var(--ink);
  transition: border-color .15s var(--ease), transform .15s var(--ease); }
.fb-tile:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); transform: translateY(-1px); }
.fb-tile-n { font: 700 22px/1 var(--mono); letter-spacing: -.02em; color: var(--ink); }
.fb-tile-n small { font: 600 12px/1 var(--mono); color: var(--ink-3); margin-left: 4px; letter-spacing: 0; }
.fb-tile-l { font: 620 13px/1.3 var(--display); color: var(--ink); }
.fb-tile-p { font-size: 11.5px; line-height: 1.5; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fb-tile-go { margin-top: auto; padding-top: 6px; font: 600 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }

/* Suggested by RunSignl — on Content, where a suggestion becomes a draft. */
.sg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 11px; margin-top: 10px; }
.sg-card { display: flex; flex-direction: column; gap: 7px; border: 1px solid var(--border); border-radius: 13px; padding: 13px 14px 12px; background: var(--surface); }
.sg-card.is-saved { border-color: color-mix(in srgb, var(--live) 40%, var(--border)); }
.sg-kind { display: flex; align-items: center; gap: 8px; font: 600 9.5px/1 var(--mono); letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3); }
.sg-kind .sg-saved { color: var(--live); display: inline-flex; align-items: center; gap: 6px; }
.sg-kind .sg-saved i { width: 6px; height: 6px; border-radius: 50%; background: var(--live); }
.sg-kind .sg-sugg { color: var(--accent); }
.sg-card h4 { margin: 0; font: 620 14px/1.38 var(--display); color: var(--ink); letter-spacing: -.005em; }
.sg-why { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
.sg-src { margin: 0; font: 500 11px/1.5 var(--mono); color: var(--ink-3); }
.sg-act { margin-top: auto; padding-top: 6px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sg-hooks { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 8px; margin-top: 10px; }
.sg-hook { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--surface); }
.sg-hook.is-saved { border-color: color-mix(in srgb, var(--live) 40%, var(--border)); }
.sg-hook-n { font: 700 13px/1 var(--display); color: var(--accent); }
.sg-hook-t { font-size: 13px; line-height: 1.45; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.sg-hook-t .chip { margin-left: 6px; }
.sg-note { margin: 6px 4px 0; font-size: 12px; line-height: 1.6; color: var(--ink-3); max-width: 74ch; }
.sg-bridge { margin-top: 10px; font-size: 13.5px; line-height: 1.7; color: var(--ink-2); max-width: 64ch; }

/* Your first 7-day plan — a list a creator can read top to bottom. */
.fp-panel { padding: 6px 18px 8px; }
.fp-days { list-style: none; margin: 0; padding: 0; }
.fp-day { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 14px; align-items: start;
  padding: 13px 0; border-top: 1px solid var(--border); }
.fp-day:first-child { border-top: 0; }
.fp-when { display: flex; flex-direction: column; gap: 2px; }
.fp-when b { font: 700 12px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.fp-when span { font: 500 11px/1.3 var(--mono); color: var(--ink-3); }
.fp-t { font: 620 13.5px/1.4 var(--display); color: var(--ink); }
.fp-why { font-size: 12.5px; line-height: 1.55; color: var(--ink-2); margin-top: 3px; }
.fp-src { font: 500 11px/1.5 var(--mono); color: var(--ink-3); margin-top: 3px; }
.fp-act { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.fp-wrap { margin-top: 18px; }
.fp-wrap .fp-days { margin: 0 4px 10px; }

/* What RunSignl noticed in your posts — Intelligence leads with the insights. */
.fi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 11px; margin: 0 0 18px; }
.fi-card { position: relative; display: flex; flex-direction: column; gap: 7px; border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 15px 13px 15px; background: var(--glass); }
.fi-n { font: 700 11px/1 var(--mono); color: var(--accent); letter-spacing: .06em; }
.fi-card h4 { margin: 0; font: 620 14px/1.4 var(--display); color: var(--ink); letter-spacing: -.005em; }
.fi-why { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
.fi-src { margin: 0; font: 500 10.5px/1.5 var(--mono); color: var(--ink-3); }

@media (max-width: 1100px) { .fb-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .fv-grid { grid-template-columns: 1fr; }
  .fv-obs li { grid-template-columns: 1fr; gap: 1px; }
  .fv-learn { flex-direction: column; align-items: stretch; }
  .fv-learn-a { flex: 1 1 auto; }
}
@media (max-width: 600px) {
  .fv-card { padding: 15px 15px 14px; }
  .fv-title { font-size: 17px; }
  .fb-tiles { grid-template-columns: 1fr; }
  .fp-day { grid-template-columns: 1fr; gap: 6px; }
  .fp-act { align-items: flex-start; }
  .sg-hook { grid-template-columns: 22px minmax(0, 1fr); }
  .sg-hook > .btn, .sg-hook > .sg-hook-a { grid-column: 2; justify-self: start; }
}

/* ══ VISUAL EVIDENCE — the media leads, the words follow ═══════════════════
   "What's working in your space" was a grid of text cards with a thumbnail
   on top: provenance chip, reason, caption, three metrics, a fit line, a
   measurement link and seven buttons under every image. The founder's read
   was exact — an analytics report, not a creator-intelligence product. The
   image is now the card. The multiple stays as a badge, the creator stays as
   a chip, one concise reason and one line of numbers sit under it, and the
   actions live on the media: revealed on hover or keyboard focus, and on a
   phone by a tap or the always-visible Actions control. Nothing is hidden
   behind hover alone, and nothing about the evidence changed. */
.rd-card { position: relative; }
.rd-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rd-thumb { aspect-ratio: 4 / 4.6; background: var(--panel); }
.rd-thumb img { transition: transform .35s var(--ease), filter .2s var(--ease); }
.rd-card:hover .rd-thumb img, .rd-card:focus-within .rd-thumb img, .rd-card.is-open .rd-thumb img {
  transform: scale(1.03); filter: brightness(.55) saturate(.9) blur(1px); }
.rd-thumb.no-img { aspect-ratio: 4 / 4.6; min-height: 0; justify-content: center; }
.rd-thumb.no-img .rd-prov { position: absolute; margin: 0; }
.rd-thumb.no-img .rd-mult { top: 8px; }
.rd-mult { font-size: 12.5px; padding: 6px 10px; box-shadow: 0 2px 10px rgba(0,0,0,.28); }
/* The actions, on the media. Invisible and inert until revealed; a keyboard
   user tabbing into the card (or its Actions control) reveals them the same
   way a pointer does, so no control is reachable only by hover. */
.rd-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  gap: 6px; padding: 12px; opacity: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,8,14,.12) 0%, rgba(8,8,14,.62) 55%, rgba(8,8,14,.84) 100%);
  transition: opacity .18s var(--ease);
}
.rd-card:hover .rd-overlay, .rd-card:focus-within .rd-overlay, .rd-card.is-open .rd-overlay { opacity: 1; pointer-events: auto; }
.rd-overlay-row { display: flex; flex-wrap: wrap; gap: 6px; }
.rd-overlay .btn { font-size: 12px; padding: 7px 11px; }
.rd-overlay .btn.ghost { background: color-mix(in srgb, #fff 14%, transparent); border-color: color-mix(in srgb, #fff 28%, transparent); color: #fff; }
.rd-overlay .btn.ghost:hover { background: color-mix(in srgb, #fff 24%, transparent); }
.rd-overlay .rd-link { font: 600 11px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: #fff;
  background: none; border: 0; padding: 4px 2px; cursor: pointer; opacity: .85; }
.rd-overlay .rd-link:hover, .rd-overlay .rd-link:focus-visible { opacity: 1; text-decoration: underline; }
.rd-overlay .rd-audit-btn { color: #fff; opacity: .85; padding: 4px 2px; }
.rd-overlay .rd-audit-btn:hover, .rd-overlay .rd-audit-btn:focus-visible { color: #fff; opacity: 1; text-decoration: underline; }
.rd-overlay .btn:focus-visible, .rd-overlay .rd-link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Resting state: the reason, one line of numbers, and the Actions control. */
.rd-body { padding: 11px 13px 12px; gap: 6px; }
.rd-why { font: 600 13px/1.45 var(--body); color: var(--fg);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rd-metrics { gap: 10px; }
.rd-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.rd-primary-touch { display: none; }
.rd-more { font: 600 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
  background: none; border: 1px solid var(--border); border-radius: 999px; padding: 6px 10px; cursor: pointer; }
.rd-more:hover, .rd-more:focus-visible { color: var(--ink); border-color: var(--ink-3); }
.rd-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rd-card.is-open .rd-more { color: var(--accent); border-color: var(--accent); }
/* No pointer that hovers: the primary action stays on the card, always. */
@media (hover: none) {
  .rd-card:hover .rd-overlay { opacity: 0; pointer-events: none; }
  .rd-card.is-open .rd-overlay, .rd-card:focus-within .rd-overlay { opacity: 1; pointer-events: auto; }
  .rd-card:hover .rd-thumb img { transform: none; filter: none; }
  .rd-card.is-open .rd-thumb img, .rd-card:focus-within .rd-thumb img { filter: brightness(.55) saturate(.9) blur(1px); }
  .rd-primary-touch { display: inline-flex; }
}

/* ── ONE MEDIA FALLBACK, EVERYWHERE ─────────────────────────────────────────
   A post whose thumbnail RunSignl does not hold on its own origin is shown as
   what it is — a reel, a carousel, a photo — in a tile the size the image
   would have taken, with a small mark. Never a hot-linked Instagram URL (it
   returns 200 to curl and paints broken), never a white slab. */
.media-fb { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px; background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    linear-gradient(180deg, var(--surface-2), var(--panel)); color: var(--ink-3); }
.media-fb-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  border: 1px solid var(--border-strong); background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--ink-2); }
.media-fb-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.media-fb-t { font: 600 9.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.media-fb-s { font: 500 10.5px/1.3 var(--sans); color: var(--ink-3); opacity: .8; }
.media-kind { position: absolute; left: 8px; bottom: 8px; font: 600 9.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: rgba(8,8,14,.55); border-radius: 999px; padding: 4px 8px; backdrop-filter: blur(6px); }

/* Recent from your benchmarks — the same media language as the evidence grid. */
.rc-media { position: relative; width: 100%; aspect-ratio: 4 / 4.6; overflow: hidden; background: var(--surface-2); }
.rc-media .rc-thumb { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.rc-card:hover .rc-media .rc-thumb { transform: scale(1.03); }
.rc-media .rc-thumb { transition: transform .35s var(--ease); }
@media (max-width: 820px) {
  .rd-thumb, .rd-thumb.no-img, .rc-media { aspect-ratio: 4 / 4.2; }
  .rd-overlay { padding: 10px; }
}

/* "View plan" opens the direction in the Capsule — the same floating panel
   the Plan already uses — instead of unfolding a document inside a card. The
   three directions keep their height and stay comparable while any one plan
   is open. */
.clo-more-b { font: 600 11.5px var(--body); cursor: pointer; color: var(--accent); background: none; border: 0;
  padding: 2px 0; text-align: left; align-self: flex-start; }
.clo-more-b::before { content: "+ "; font-weight: 400; }
.clo-more-b:hover { text-decoration: underline; }
.clo-more-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ── PIECES ON DAYS THE PLAN NO LONGER HAS ──────────────────────────────────
   Present, counted and un-drawable: a cadence change rebuilds the month from
   the days the creator now publishes on. Quiet, not alarming — nothing has
   gone wrong and nothing was lost; it is a decision waiting to be made. */
.pl-off { margin: 14px 0 0; padding: 13px 15px; border: 1px solid var(--border);
  border-radius: 13px; background: var(--surface-2); }
.pl-off-h { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.pl-off-h b { color: var(--ink); display: block; margin-bottom: 2px; }
.pl-off-l { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.pl-off-r { display: flex; align-items: center; gap: 10px; padding: 7px 9px;
  border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.pl-off-d { font-family: var(--mono); font-size: 11px; color: var(--ink-3); flex: 0 0 auto; }
.pl-off-t { font-size: 12.5px; color: var(--ink); flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-off-a { display: flex; gap: 6px; flex: 0 0 auto; }
.pl-off-lock { font-size: 11px; color: var(--ink-3); font-family: var(--mono); }
.pl-off-more { margin-top: 8px; font-size: 11.5px; color: var(--ink-3); }
@media (max-width: 640px) {
  .pl-off-r { flex-wrap: wrap; }
  .pl-off-t { flex: 1 1 100%; white-space: normal; }
  .pl-off-a { flex: 1 1 100%; }
  .pl-off-a .btn { min-height: 40px; flex: 1 1 auto; }
}

/* ══ THE EXECUTION LIST IS A WORK QUEUE ════════════════════════════════════
   It was a seven-column table: thirty near-identical rows of 11px text, the
   concept squeezed into one narrow cell, "Open →" repeating down the page,
   every column equally loud so none of them carried. The calendar answers
   WHEN. This answers WHAT DO I MAKE — so the title carries the row, metadata
   goes quiet beneath it, and the month breaks into weeks the eye can hold. */
.pq { max-width: 1080px; }          /* room for a real title; no 27" sprawl */

.pq-bar { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 18px; }
.pq-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px;
  border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
  font-size: 12.5px; font-weight: 560; color: var(--ink-2); cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease); }
.pq-chip:hover { border-color: var(--border-strong); color: var(--ink); }
.pq-chip.on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.pq-chip-n { font-family: var(--mono); font-size: 11px; }
.pq-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* THE READING SURFACE. Thirty rows of text are not decorative chrome, and the
   page treatment — mesh gradient, film grain, signal trace, ghost wordmark —
   was reading straight through them. Opaque var(--surface), and `isolation`
   so nothing composites across it. The artwork stops here. */
.pq-sheet { background: var(--surface); border: 1px solid var(--border);
  border-radius: 15px; box-shadow: var(--sh-1); isolation: isolate;
  overflow: hidden; padding: 4px 0; }

/* A week is a band on that sheet, parted by one rule — not a stack of cards. */
.pq-week + .pq-week { border-top: 1px solid var(--border); }
.pq-week-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 14px 18px 10px; margin: 0; }
.pq-week-t { font-family: var(--display); font-size: 14px; font-weight: 640; color: var(--ink); margin: 0; }
.pq-week-d { font-size: 12px; color: var(--ink-3); }
.pq-week-s { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }

.pq-list { list-style: none; margin: 0; padding: 0 0 6px; }
.pq-row { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center; gap: 14px; min-height: 62px; padding: 11px 18px;
  position: relative; transition: background .14s var(--ease); }
/* Separation by a hairline inset to the title column, so the eye reads a list
   rather than a table — and never a border around every row. */
.pq-row + .pq-row::after { content: ""; position: absolute; left: 86px; right: 18px; top: 0;
  height: 1px; background: var(--border); }
/* A ROW IS THE SAME ROW WHETHER IT WAS REACHED BY MOUSE OR BY TAB. Suppressing
   the hairlines for :hover alone gave the keyboard a dirtier band than the
   cursor — a rule slicing across the top and bottom of the highlighted row.
   And the band alone is a 1.05:1 step in Obsidian, so keyboard focus carries a
   real edge; the cursor does not need one. */
.pq-row:hover, .pq-row:focus-within { background: var(--surface-2); }
.pq-row:focus-within { box-shadow: inset 0 0 0 1px var(--accent); }
.pq-row:hover::after, .pq-row:hover + .pq-row::after,
.pq-row:focus-within::after, .pq-row:focus-within + .pq-row::after { background: transparent; }
/* Provenance stays a colour, never another word — the Capsule spells it out. */
.pq-row::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--border-strong); opacity: .5; }
.pq-row.pl-prov-double_down::before { background: var(--live); opacity: .85; }
.pq-row.pl-prov-adapt::before { background: var(--accent); opacity: .85; }
/* The SAME colour means the SAME thing as on the calendar entries — direction
   amber, experiment quiet — or the two surfaces teach different vocabularies
   for one fact. (I had them the wrong way round, and the hex was raw.) */
.pq-row.pl-prov-direction::before { background: var(--plan-direction); opacity: .85; }
.pq-row.pl-prov-experiment::before { background: var(--ink-3); opacity: .7; }

.pq-when { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; flex: 0 0 auto; }
.pq-dow { font-size: 10px; font-weight: 620; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.pq-dnum { font-family: var(--mono); font-size: 17px; font-weight: 500; color: var(--ink); line-height: 1; }

.pq-main { min-width: 0; }
.pq-t { font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pq-m { margin-top: 3px; font-size: 12px; color: var(--ink-3); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }

/* One track holds the status and the action, so a row without a status does
   not leave an empty column behind and shunt its button 14px inward — the
   single action column stayed ragged all the way down a mixed month. */
.pq-end { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.pq-st { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .03em;
  text-transform: uppercase; color: var(--ink-2); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 999px; padding: 4px 9px; white-space: nowrap; }
.pq-row:hover .pq-st { background: var(--surface); }

/* One action, quiet until the row is under the cursor — thirty shouting
   buttons is what made the old page unreadable. */
/* QUIET IS A COLOUR, NOT AN OPACITY. Fading the whole control to .55 took its
   label to 2.4:1 and its border to 1.1:1 — a fully active button below every
   contrast floor, on every resting row. It rests in a legible muted ink and
   gains its edge on approach instead. */
/* Scoped through .pq-row deliberately: .btn.ghost is two classes, so a bare
   .pq-go loses to it and every one of these declarations would be dead while
   still reading correctly in the file. */
.pq-row .pq-go { flex: 0 0 auto; border-color: transparent; background: transparent;
  box-shadow: none; color: var(--ink-2);
  transition: color .14s var(--ease), border-color .14s var(--ease), background .14s var(--ease); }
.pq-row:hover .pq-go, .pq-row:focus-within .pq-go {
  color: var(--ink); border-color: var(--border-strong); background: var(--surface);
  box-shadow: var(--sh-1); }

@media (max-width: 720px) {
  /* The sheet is the surface on a phone too — the rows do not each become a
     card again, they stay bands on one opaque ground. */
  .pq-row { grid-template-columns: 46px minmax(0, 1fr); grid-template-areas: "when main" "go go";
    align-items: start; row-gap: 10px; padding: 14px 14px 16px; }
  .pq-row + .pq-row::after { left: 14px; right: 14px; }
  .pq-when { grid-area: when; }
  .pq-main { grid-area: main; }
  .pq-t { -webkit-line-clamp: 3; }
  .pq-m { white-space: normal; }
  /* The pill was lifted out of the flow and pinned to the corner, where it
     painted over the title it was sitting beside — 139px of the first line
     gone on every row that had any work on it. It stays in the flow and takes
     its own line, above the action. */
  .pq-end { grid-area: go; display: flex; width: 100%; flex-wrap: wrap; gap: 8px;
    justify-content: flex-start; align-items: center; }
  .pq-st { position: static; }
  /* There is no hover on a phone to reveal the action, so it is drawn at full
     strength: the raised fill, the strong border and the shadow together.
     Measured honestly, --surface-2 on --surface is only a 1.05:1 step in
     Obsidian — the fill separates the control, it does not carry it. What
     identifies this button is its label, at 15.5:1 light and 16.3:1 dark,
     which is how every ghost button in RunSignl is read. */
  .pq-row .pq-go { flex: 1 0 100%; min-height: 40px; color: var(--ink);
    border-color: var(--border-strong); background: var(--surface-2); box-shadow: var(--sh-1); }
  .pq-week-s { margin-left: 0; width: 100%; }
  .pq-week-h { padding: 14px 14px 8px; }
  .pq-sheet { border-radius: 13px; }
}