/* =============================================================
   app.css - consolidated stylesheet. Generated 2026-05-31T01:02Z.
   Order-preserving merge of: styles.css + v4.css + v5-glass.css + v6-refine.css
   Cascade is byte-identical to the previous 4-link setup. tokens.css loads first.
   ============================================================= */

/* ░░░░░░░░░░ 1/4 styles.css ░░░░░░░░░░ */
/* ============================================================
   TPMS Brain - Stylesheet
   Adapted from the canonical design reference (design-reference.html)
   Brand: Cherry red + Black sidebar, warm beige canvas
   Font: Inter (loaded via Google Fonts in HTML)
   ============================================================ */

/* ===========================================================
     TPMS Brain - design language adapted from concept-a-v2.1
     Brand: Cherry red (var(--cherry)) + Black sidebar, warm beige canvas
     =========================================================== */
  :root {
    /* Brand - cherry red replaces claret */
    --cherry:       #b8002b;
    --cherry-deep:  #8a001f;
    --cherry-soft:  #d4334e;
    --cherry-bg:    #fce9ee;
    --cherry-mid:   #e8a8b3;

    /* Surfaces */
    --paper:  #ffffff;
    --card:   #ffffff;
    --bg:     #f3ecd6;     /* warm beige canvas */
    --bg-2:   #ece4cf;

    /* Ink */
    --ink:        #1a1410;
    --ink-mid:    #57534e;
    --ink-soft:   #78716c;
    --muted:      #a8a29e;
    --line:       #e4d9bb;
    --line-soft:  #efe7cf;

    /* Pastels - used for tinted cards + pill backgrounds */
    --mint-bg:   #ebf5f0;  --mint-fg:   #2d7a56;  --mint:   #a8d9c0;
    --peach-bg:  #fef1e8;  --peach-fg:  #ad4e1a;  --peach:  #f5c4a2;
    --lilac-bg:  #f1ecfb;  --lilac-fg:  #5e3b8c;  --lilac:  #c9baea;
    --sky-bg:    #eaf4fb;  --sky-fg:    #2d6a8f;  --sky:    #a9cde3;
    --butter-bg: #fdf5df;  --butter-fg: #7a5210;  --butter: #f2d98a;
    --sage-bg:   #ecf3e8;  --sage-fg:   #3a5728;  --sage:   #bacdb4;
    --rose-bg:   #fbe9ec;  --rose-fg:   #8a2c2e;  --rose:   #f1b8be;

    /* Semantic */
    --good:   #3d8b5e;
    --warn:   #c07a28;
    --block:  #ba4244;
    --info:   #3570a0;

    /* Sidebar - pure TPMS black */
    --sb-bg:        #0a0a0a;
    --sb-bg-2:      #1a1a1a;
    --sb-ink:       rgba(255,255,255,0.88);
    --sb-muted:     rgba(255,255,255,0.46);
    --sb-line:      rgba(255,255,255,0.08);
    --sb-active-bg: rgba(255,255,255,0.10);
    --sb-hover-bg:  rgba(255,255,255,0.06);
    --sb-label:     rgba(255,255,255,0.34);

    /* Layout */
    --sb-w:   240px;
    --top-h:  56px;
    --r-sm:   10px;
    --r-md:   14px;
    --r-lg:   18px;
    --r-pill: 999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0,0,0,.05), 0 1px 5px rgba(0,0,0,.05);
    --shadow:    0 2px 8px rgba(0,0,0,.07), 0 8px 24px rgba(0,0,0,.06);
    --shadow-lg: 0 8px 32px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.08);

    /* Type */
    --font:  'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --mono:  ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    /* Compatibility shims for older class references */
    --black:        var(--sb-bg);
    --black-soft:   var(--sb-bg-2);
    --black-line:   rgba(255,255,255,0.08);
    --beige:        var(--bg);
    --beige-soft:   #f8f1de;
    --beige-card:   var(--paper);
    --beige-deep:   var(--bg-2);
    --text:         var(--ink);
    --text-muted:   var(--ink-soft);
    --text-dim:     var(--muted);
    --text-on-dark: var(--sb-ink);
    --text-dim-on-dark: var(--sb-muted);
    --line-soft:    var(--line-soft);
    --ok:           var(--good);
    --ok-bg:        var(--mint-bg);
    --risk:         var(--block);
    --risk-bg:      var(--rose-bg);
    --warn-bg:      var(--butter-bg);
    --info-bg:      var(--sky-bg);
    --neutral-bg:   #eee5cc;
    --cherry-dark:  var(--cherry-deep);
    --cherry-light: var(--cherry-soft);
    --cherry-fade:  rgba(184,0,43,0.08);
    --cherry-fade2: rgba(184,0,43,0.16);
    --font-sans:    var(--font);
    --font-mono:    var(--mono);
    --font-serif:   var(--font); /* concept doesn't use serif */
    --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
    --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
    --s-9: 56px; --s-10: 80px;
    --sidebar-w: var(--sb-w);
    --topbar-h:  var(--top-h);
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { height: 100%; }
  body {
    font-family: var(--font);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  a { color: var(--cherry); text-decoration: none; }
  a:hover { color: var(--cherry-deep); text-decoration: underline; }
  button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
  ::selection { background: var(--cherry-fill); color: var(--on-accent); }

  /* =============================================================
     TOPBAR
     ============================================================= */
  .topbar {
    position: fixed; top: 0; left: 0; right: 0;
    height: var(--top-h);
    background: rgba(255,255,255,.94);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--line);
    display: flex; align-items: center;
    padding: 0 24px;
    gap: 14px;
    z-index: 50;
  }
  .brand {
    display: flex; align-items: center; gap: 10px;
    width: calc(var(--sb-w) - 24px);
    padding-right: 12px;
  }
  .brand-mark {
    width: 30px; height: 30px;
    border-radius: var(--r-sm);
    background: linear-gradient(140deg, var(--cherry) 0%, var(--cherry-deep) 100%);
    color: var(--on-accent);
    display: grid; place-items: center;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: -0.02em;
    box-shadow: 0 1px 4px rgba(184,0,43,.35);
  }
  .brand-name {
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
  }
  .brand-name .accent { color: var(--cherry); }

  .topbar-search {
    flex: 1; max-width: 480px;
    margin: 0 16px 0 8px;
    position: relative;
  }
  .topbar-search input {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--ink);
    padding: 7px 12px 7px 32px;
    border-radius: var(--r-sm);
    font-size: 12.5px;
    font-family: var(--font);
    outline: none;
  }
  .topbar-search input::placeholder { color: var(--muted); }
  .topbar-search input:focus { border-color: var(--cherry-soft); box-shadow: 0 0 0 3px rgba(184,0,43,.08); }
  .topbar-search::before {
    content: "⌕";
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    color: var(--muted);
    font-size: 14px;
  }

  .topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
  .topbar-action {
    height: 32px;
    border-radius: var(--r-sm);
    padding: 0 10px;
    background: transparent;
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 500;
    display: inline-flex; align-items: center; gap: 6px;
  }
  .topbar-action:hover { background: var(--bg); color: var(--ink); }
  .topbar-badge {
    background: var(--cherry-fill); color: var(--on-accent);
    font-size: 10px; font-weight: 700;
    padding: 1px 6px; border-radius: var(--r-pill);
    line-height: 1.4;
  }
  .topbar-user {
    display: flex; align-items: center; gap: 8px;
    padding-left: 12px; margin-left: 4px;
    border-left: 1px solid var(--line);
  }
  .topbar-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: linear-gradient(140deg, var(--cherry), var(--cherry-deep));
    color: var(--on-accent); display: grid; place-items: center;
    font-weight: 700; font-size: 10.5px;
    box-shadow: 0 1px 3px rgba(184,0,43,.3);
  }
  .topbar-user-name { color: var(--ink); font-size: 12.5px; font-weight: 600; line-height: 1.2; }
  .topbar-user-role { color: var(--muted); font-size: 10.5px; line-height: 1.3; }

  /* =============================================================
     SIDEBAR
     ============================================================= */
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: var(--sb-w);
    background: var(--sb-bg);
    color: var(--sb-ink);
    overflow-y: auto;
    padding: var(--top-h) 8px 80px;
    z-index: 40;
    scrollbar-width: none;
  }
  .sidebar::-webkit-scrollbar { display: none; }
  .sidebar-section {
    padding: 16px 10px 6px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sb-label);
  }
  .sidebar-section:first-of-type { padding-top: 14px; }
  .nav-item {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 10px;
    border-radius: var(--r-sm);
    font-size: 13px;
    font-weight: 400;
    color: var(--sb-muted);
    cursor: pointer;
    transition: background .12s, color .12s;
    margin: 1px 0;
  }
  .nav-item:hover { background: var(--sb-hover-bg); color: var(--sb-ink); }
  .nav-item.active {
    background: var(--sb-active-bg);
    color: var(--on-accent);
    font-weight: 600;
  }
  .nav-item .icon {
    width: 16px; height: 16px;
    display: grid; place-items: center;
    color: var(--sb-muted);
    flex-shrink: 0;
    font-size: 13px;
    line-height: 1;
    opacity: .85;
    /* Unicode glyphs render slightly below their geometric box centre -
       nudge up so the icon's optical centre matches the text caps height. */
    transform: translateY(-1px);
  }
  .nav-item.active .icon { color: var(--cherry-soft); opacity: 1; }
  .nav-count {
    margin-left: auto;
    background: var(--sb-active-bg);
    color: var(--sb-muted);
    padding: 1px 7px; border-radius: var(--r-pill);
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    text-align: center;
  }
  .nav-item.active .nav-count {
    background: var(--cherry-fill); color: var(--on-accent);
  }

  /* =============================================================
     MAIN
     ============================================================= */
  .main {
    margin-left: var(--sb-w);
    margin-top: var(--top-h);
    min-height: calc(100vh - var(--top-h));
    padding: 24px 28px 72px;
    max-width: calc(1280px + 28px + 28px);
    background: var(--bg);
  }
  .page { display: none; }
  .page.active { display: block; animation: fadeUp .25s ease; }
  @keyframes fadeUp { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }

  /* =============================================================
     HERO + AI BRAIN  (concept lilac AI panel)
     ============================================================= */
  .hero {
    background:
      radial-gradient(ellipse 700px 160px at 100% 0%, rgba(232,168,179,.22) 0%, transparent 70%),
      radial-gradient(ellipse 500px 120px at 0% 120%, rgba(252,233,238,.30) 0%, transparent 70%),
      #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 22px 24px 20px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
  }
  .hero-eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--cherry);
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .hero h1 {
    font-family: var(--font);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin: 0 0 4px;
  }
  .hero-sub {
    font-size: 13px;
    color: var(--ink-soft);
    margin: 0 0 14px;
    max-width: 760px;
  }
  .ai-brain {
    background: var(--lilac-bg);
    border: 1px solid rgba(201,186,234,.6);
    border-radius: var(--r-md);
    padding: 13px 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
  }
  .ai-brain-icon {
    width: 26px; height: 26px;
    border-radius: 7px;
    background: linear-gradient(135deg, var(--lilac-fg), #9b6fcc);
    color: var(--on-accent);
    display: grid; place-items: center;
    font-size: 13px;
    flex-shrink: 0;
  }
  .ai-brain-body { flex: 1; min-width: 0; }
  .ai-brain-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--lilac-fg);
    text-transform: uppercase;
    margin-bottom: 4px;
  }
  .ai-brain-content {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--ink-mid);
  }
  .ai-brain-content strong { color: var(--ink); font-weight: 650; }
  .ai-brain-actions {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin-top: 10px;
  }
  .ai-brain-action {
    background: rgba(255,255,255,.7);
    color: var(--lilac-fg);
    border: 1px solid rgba(94,59,140,.18);
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--r-pill);
    font-family: var(--font);
  }
  .ai-brain-action:hover {
    background: var(--lilac-fg); color: var(--on-accent); border-color: var(--lilac-fg);
  }

  /* =============================================================
     BUTTONS
     ============================================================= */
  .btn-primary, .btn-secondary, .btn-ghost {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 16px;
    font-size: 12px; font-weight: 600;
    border-radius: var(--r-pill);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .12s, opacity .12s;
    line-height: 1.4;
    font-family: var(--font);
    white-space: nowrap;
  }
  .btn-primary { background: var(--cherry-fill); color: var(--on-accent); }
  .btn-primary:hover { background: var(--cherry-deep); }
  .btn-secondary {
    background: var(--card); color: var(--ink); border-color: var(--line);
  }
  .btn-secondary:hover { background: var(--bg); }
  .btn-ghost { background: transparent; color: var(--cherry); }
  .btn-ghost:hover { background: var(--cherry-bg); }
  .btn-sm { padding: 5px 12px; font-size: 11px; }

  .card-action {
    color: var(--cherry);
    font-size: 12px;
    font-weight: 600;
    background: none; border: none; padding: 0;
    cursor: pointer;
    font-family: var(--font);
  }
  .card-action:hover { text-decoration: underline; }

  /* =============================================================
     SECTION HEAD
     ============================================================= */
  .section-head {
    display: flex; align-items: center; justify-content: space-between;
    margin: 22px 0 12px;
    gap: 12px;
  }
  .section-head h2 {
    font-family: var(--font);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.09em;
    color: var(--muted);
    text-transform: uppercase;
    margin: 0;
  }
  .section-head .actions { display: flex; gap: 10px; align-items: center; }

  /* =============================================================
     CARDS + GRID
     ============================================================= */
  .grid { display: grid; gap: 14px; }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .grid-2-1 { grid-template-columns: 2fr 1fr; }
  .grid-1-2 { grid-template-columns: 1fr 2fr; }

  .card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 16px;
    box-shadow: var(--shadow-sm);
  }
  .card-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line-soft);
    gap: 10px;
  }
  .card-title {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0;
  }
  .card-title .dot {
    display: inline-block; width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--cherry-fill);
    margin-right: 7px;
    vertical-align: middle;
  }

  /* =============================================================
     KPI TILES (.stat)
     ============================================================= */
  .stat {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 14px 16px 13px;
    box-shadow: var(--shadow-sm);
    transition: transform .15s, box-shadow .15s;
    position: relative;
  }
  .stat:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
  .stat-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
  }
  .stat-value {
    font-family: var(--font);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.04em;
    color: var(--ink);
    line-height: 1;
    margin-bottom: 6px;
  }
  .stat-delta {
    font-size: 11px;
    font-weight: 500;
    display: inline-flex; align-items: center; gap: 4px;
  }
  .stat-delta.up { color: var(--good); font-weight: 600; }
  .stat-delta.down { color: var(--block); font-weight: 600; }
  .stat-delta.flat { color: var(--muted); }
  .stat-spark {
    position: absolute; top: 14px; right: 14px;
    width: 60px; height: 22px;
    opacity: 0.6;
  }

  /* =============================================================
     PILLS  (pastel palette from concept)
     ============================================================= */
  .pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px;
    border-radius: var(--r-pill);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    background: var(--bg);
    color: var(--ink-soft);
    border: 1px solid var(--line);
  }
  .pill.ok    { background: var(--mint-bg);   color: var(--mint-fg);   border-color: rgba(45,122,86,.18); }
  .pill.warn  { background: var(--butter-bg); color: var(--butter-fg); border-color: rgba(122,82,16,.18); }
  .pill.risk  { background: var(--rose-bg);   color: var(--block);     border-color: rgba(186,66,68,.20); }
  .pill.info  { background: var(--sky-bg);    color: var(--sky-fg);    border-color: rgba(45,106,143,.18); }
  .pill.cherry { background: var(--cherry-bg); color: var(--cherry);   border-color: rgba(184,0,43,.18); }
  .pill.dark  { background: var(--ink);       color: var(--on-accent);             border-color: var(--ink); }
  .pill.dot::before {
    content: ""; width: 5px; height: 5px; border-radius: 50%;
    background: currentColor; opacity: .7;
  }
  .pill.small { font-size: 10px; padding: 1px 7px; }

  .pill-handler {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    font-size: 11px; font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
  }
  .pill-handler.ai  { background: var(--lilac-bg); color: var(--lilac-fg); border: 1px solid rgba(94,59,140,.18); }
  .pill-handler.you { background: var(--peach-bg); color: var(--peach-fg); border: 1px solid rgba(173,78,26,.18); }

  /* =============================================================
     TABLES
     ============================================================= */
  .data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
  }
  .data-table thead th {
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    color: var(--muted);
    text-transform: uppercase;
    padding: 9px 14px 8px;
    border-bottom: 2px solid var(--line);
    background: transparent;
  }
  .data-table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: middle;
    color: var(--ink);
  }
  .data-table tbody tr:last-child td { border-bottom: none; }
  .data-table tbody tr:hover td { background: var(--bg); }
  .data-table .num { font-variant-numeric: tabular-nums; text-align: right; }
  .data-table .mono { font-family: var(--mono); font-size: 12px; }

  /* =============================================================
     TABS
     ============================================================= */
  .tabs {
    display: flex; gap: 2px;
    border-bottom: 2px solid var(--line);
    margin-bottom: 16px;
    padding-bottom: 0;
    flex-wrap: wrap;
  }
  .tab {
    background: none; border: none;
    padding: 8px 14px;
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    margin-bottom: -2px;
    transition: color .12s;
    font-family: var(--font);
  }
  .tab:hover { color: var(--ink); }
  .tab.active {
    color: var(--ink);
    border-bottom-color: var(--cherry);
    font-weight: 650;
  }
  .tab-panel { display: none; }
  .tab-panel.active { display: block; animation: fadeUp .2s ease; }

  /* =============================================================
     KANBAN
     ============================================================= */
  .kanban {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
  }
  .kanban-col {
    background: rgba(255,255,255,0.5);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 12px;
    min-height: 200px;
  }
  .kanban-col-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    /* No border here - .kanban-col-rule draws the single cherry line. */
  }
  .kanban-col-head h4 {
    margin: 0;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink);
  }
  .kanban-col-count {
    background: var(--cherry-fill); color: var(--on-accent);
    font-size: 10px; font-weight: 700;
    padding: 1px 7px; border-radius: var(--r-pill);
  }
  .kanban-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: border-color .12s, box-shadow .12s, transform .12s;
    box-shadow: var(--shadow-sm);
  }
  .kanban-card:hover {
    transform: translateY(-1px);
    border-color: var(--cherry-mid);
    box-shadow: var(--shadow);
  }
  .kanban-card-title {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 4px;
    line-height: 1.3;
  }
  .kanban-card-meta {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 10.5px;
    color: var(--muted);
  }
  .kanban-card-tags {
    display: flex; gap: 4px; flex-wrap: wrap;
    margin-top: 6px;
  }

  /* =============================================================
     CALENDAR
     ============================================================= */
  .calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
  }
  .cal-head {
    background: var(--ink);
    color: rgba(255,255,255,.85);
    padding: 6px 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-align: center;
    border-radius: 6px;
  }
  .cal-cell {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 10px 12px;
    min-height: 92px;
  }
  .cal-cell.muted { background: var(--bg); opacity: 0.55; }
  .cal-cell.today {
    background: var(--cherry-bg);
    border-color: var(--cherry-mid);
  }
  .cal-date {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 6px;
    color: var(--ink);
  }
  .cal-cell.today .cal-date { color: var(--cherry); }
  .cal-event {
    background: var(--lilac-bg); color: var(--lilac-fg);
    border-radius: 5px;
    padding: 3px 7px;
    font-size: 10.5px;
    font-weight: 500;
    margin-bottom: 3px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cal-event.record { background: var(--lilac-bg); color: var(--lilac-fg); }
  .cal-event.release { background: var(--mint-bg); color: var(--mint-fg); }
  .cal-event.social { background: var(--sky-bg); color: var(--sky-fg); }
  .cal-event.newsletter { background: var(--butter-bg); color: var(--butter-fg); }

  /* =============================================================
     METER
     ============================================================= */
  .meter {
    background: var(--line-soft);
    height: 4px;
    border-radius: var(--r-pill);
    overflow: hidden;
  }
  .meter-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--cherry-mid), var(--cherry));
    border-radius: var(--r-pill);
    transition: width .5s ease;
  }
  .meter-fill.ok { background: linear-gradient(90deg, var(--mint), var(--mint-fg)); }
  .meter-fill.warn { background: linear-gradient(90deg, var(--butter), var(--butter-fg)); }

  /* =============================================================
     CHECKLIST
     ============================================================= */
  .checklist { list-style: none; padding: 0; margin: 0; }
  .checklist li {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 12.5px;
  }
  .checklist li:last-child { border-bottom: none; }
  .checklist .check {
    width: 16px; height: 16px;
    border-radius: 4px;
    border: 1.5px solid var(--line);
    background: var(--card);
    display: grid; place-items: center;
    color: transparent;
    font-size: 11px;
    flex-shrink: 0;
  }
  .checklist li.done .check {
    background: var(--good);
    border-color: var(--good);
    color: var(--on-accent);
  }
  .checklist li.done span { color: var(--muted); text-decoration: line-through; }
  .checklist li.locked .check { opacity: 0.4; }
  .check::before { content: "✓"; }
  .checklist-owner {
    margin-left: auto;
    font-size: 10.5px;
    color: var(--muted);
  }

  /* =============================================================
     WORK BLOCKS
     ============================================================= */
  .work-block {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 14px 16px;
    margin-bottom: 6px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    align-items: start;
    cursor: pointer;
    transition: border-color .12s, box-shadow .12s;
    box-shadow: var(--shadow-sm);
  }
  .work-block:hover { border-color: var(--cherry-mid); box-shadow: var(--shadow); }
  .work-block.risk { border-left: 3px solid var(--block); }
  .work-block.stalled { border-left: 3px solid var(--warn); }
  .work-block-title {
    font-weight: 600; font-size: 13px;
    color: var(--ink);
    margin-bottom: 4px;
  }
  .work-block-meta {
    font-size: 11px; color: var(--muted);
    display: flex; gap: 12px; flex-wrap: wrap;
  }
  .work-block-flags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }

  /* =============================================================
     AGENT CARDS
     ============================================================= */
  .agent-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .2s;
  }
  .agent-card:hover { box-shadow: var(--shadow); }
  .agent-hero {
    background: linear-gradient(135deg, var(--sb-bg) 0%, var(--cherry-deep) 100%);
    color: var(--on-accent);
    padding: 18px 20px 16px;
  }
  .agent-name {
    font-family: var(--font);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 4px;
  }
  .agent-tag {
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--cherry-soft);
    text-transform: uppercase;
  }
  .agent-body { padding: 16px 20px; flex: 1; display: flex; flex-direction: column; }
  .agent-section {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--muted);
    text-transform: uppercase;
    margin: 14px 0 7px;
  }
  .agent-section:first-child { margin-top: 0; }
  .agent-list { padding-left: 16px; margin: 0; font-size: 12.5px; color: var(--ink-soft); line-height: 1.55; }
  .agent-list li { margin-bottom: 4px; }

  /* =============================================================
     ACTIVITY FEED
     ============================================================= */
  .activity { padding: 0; margin: 0; list-style: none; }
  .activity li {
    display: grid;
    grid-template-columns: 14px 1fr auto;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 12.5px;
  }
  .activity li:last-child { border-bottom: none; }
  .activity-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--cherry-fill);
    margin-top: 6px;
  }
  .activity-dot.ai { background: var(--lilac-fg); }
  .activity-dot.ok { background: var(--good); }
  .activity-time { font-size: 11px; color: var(--muted); white-space: nowrap; }

  /* =============================================================
     CHART
     ============================================================= */
  .chart-svg { width: 100%; display: block; }

  /* =============================================================
     HELPERS
     ============================================================= */
  .row { display: flex; gap: 12px; align-items: center; }
  .row.spread { justify-content: space-between; }
  .stack { display: flex; flex-direction: column; gap: 8px; }
  .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; }
  .mt-5 { margin-top: 20px; } .mt-6 { margin-top: 24px; }
  .text-muted { color: var(--ink-soft); }
  .text-dim { color: var(--muted); }
  .text-cherry { color: var(--cherry); }
  .small { font-size: 11.5px; }
  .num-big { font-family: var(--font); font-size: 22px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
  .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .avatar {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--cherry-fill); color: var(--on-accent);
    display: inline-grid; place-items: center;
    font-size: 10.5px; font-weight: 700;
    flex-shrink: 0;
  }
  .avatar.curt    { background: var(--mint-fg); }
  .avatar.chelsea { background: var(--butter-fg); }
  .avatar.alec    { background: var(--sky-fg); }
  .avatar.peter   { background: var(--cherry-fill); }
  .avatar.peach   { background: var(--peach-fg); }   /* Emilio */
  .avatar.conor   { background: var(--lilac-fg); }   /* Conor */
  .avatar.lg { width: 34px; height: 34px; font-size: 12px; }

  /* =============================================================
     DOC PANEL
     ============================================================= */
  .doc {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 22px 26px;
    font-family: var(--font);
    line-height: 1.6;
    max-height: 540px;
    overflow-y: auto;
  }
  .doc h3 { margin: 0 0 8px; font-size: 18px; font-weight: 700; letter-spacing: -0.015em; }
  .doc h4 { font-size: 13px; margin: 18px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--line-soft); font-weight: 700; }
  .doc p { font-size: 13px; color: var(--ink); margin: 10px 0; }
  .doc ul { padding-left: 18px; }
  .doc li { margin-bottom: 5px; font-size: 13px; }

  /* =============================================================
     LOGO TILE
     ============================================================= */
  .logo-tile {
    width: 40px; height: 40px;
    background: var(--ink); color: var(--cherry-soft);
    border-radius: var(--r-sm);
    display: grid; place-items: center;
    font-weight: 800; font-size: 13px;
    letter-spacing: -0.02em;
    flex-shrink: 0;
  }

  /* =============================================================
     PAGE HERO v2  (dark masthead + AI brain chips)
     Used by pages that adopt the universal page-hero component.
     The old .hero (above) is retained for un-migrated pages.
     ============================================================= */
  .page-hero {
    background:
      radial-gradient(ellipse 900px 240px at 100% 0%, rgba(184,0,43,0.22) 0%, transparent 65%),
      radial-gradient(ellipse 600px 180px at 0% 100%, rgba(184,0,43,0.10) 0%, transparent 70%),
      #14110d;
    border-radius: var(--r-lg);
    padding: 26px 28px 22px;
    margin-bottom: 22px;
    color: var(--on-accent);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
  }
  .page-hero-inner { position: relative; z-index: 1; }
  .page-hero-eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--cherry-mid);
    text-transform: uppercase;
    margin-bottom: 10px;
  }
  .page-hero-title {
    font-family: var(--font);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.028em;
    color: var(--on-accent);
    margin: 0 0 6px;
    line-height: 1.1;
  }
  .page-hero-meta {
    font-size: 12.5px;
    color: rgba(255,255,255,0.62);
    margin: 0 0 18px;
    letter-spacing: 0.01em;
  }

  /* Brain panel inside the dark hero */
  .page-hero-brain { margin-top: 4px; }
  .brain-panel {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--r-md);
    padding: 12px 14px 14px;
    backdrop-filter: blur(6px);
  }
  .brain-panel-err {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
  }
  .brain-label {
    display: flex; align-items: center; gap: 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.75);
    text-transform: uppercase;
    margin-bottom: 10px;
  }
  .brain-icon {
    width: 18px; height: 18px;
    border-radius: 5px;
    background: linear-gradient(135deg, var(--lilac), var(--lilac-fg));
    color: var(--on-accent);
    display: inline-grid; place-items: center;
    font-size: 10px;
    flex-shrink: 0;
  }
  .brain-chips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
  }
  .brain-chip {
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--r-sm, 8px);
    padding: 10px 12px;
    text-align: left;
    cursor: pointer;
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
    font-family: var(--font);
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 56px;
  }
  .brain-chip:hover {
    background: #fff;
    border-color: var(--cherry);
    transform: translateY(-1px);
  }
  .brain-chip-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
  }
  .brain-chip-body {
    font-size: 11.5px;
    color: var(--ink-mid);
    line-height: 1.4;
  }
  .brain-chip-skel {
    background: rgba(255,255,255,0.10);
    border-radius: var(--r-sm, 8px);
    min-height: 56px;
    animation: brainSkel 1.4s ease-in-out infinite;
  }
  @keyframes brainSkel {
    0%,100% { opacity: 0.4; }
    50%     { opacity: 0.7; }
  }

  /* Brain chip modal */
  .brain-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(20,17,13,0.55);
    display: flex; align-items: center; justify-content: center;
    z-index: 200;
    animation: fadeIn .15s ease;
  }
  @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  .brain-modal {
    background: #fff;
    border-radius: var(--r-lg);
    max-width: 520px;
    width: 92vw;
    max-height: 84vh;
    display: flex; flex-direction: column;
    box-shadow: 0 24px 60px rgba(0,0,0,0.35);
    overflow: hidden;
  }
  .brain-modal-head {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
  }
  .brain-modal-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    flex: 1;
    letter-spacing: -0.01em;
  }
  .brain-modal-close {
    background: transparent; border: none;
    font-size: 22px; line-height: 1;
    color: var(--ink-light);
    cursor: pointer;
    padding: 4px 8px;
  }
  .brain-modal-close:hover { color: var(--cherry); }
  .brain-modal-body {
    padding: 16px 20px;
    overflow-y: auto;
  }
  .brain-modal-body-text {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink);
    margin: 0 0 12px;
  }
  .brain-modal-detail {
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-mid);
    margin: 0;
  }
  .brain-modal-foot {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--line);
    background: var(--bg);
  }

  /* Brain toast */
  .brain-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #14110d;
    color: var(--on-accent);
    padding: 10px 18px;
    border-radius: var(--r-pill);
    font-size: 12.5px;
    font-weight: 600;
    box-shadow: 0 12px 28px rgba(0,0,0,0.30);
    opacity: 0;
    transition: opacity .18s ease, transform .18s ease;
    z-index: 250;
  }
  .brain-toast-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  /* =============================================================
     V2 DASHBOARD COMPONENTS
     ============================================================= */

  /* Generic skeleton */
  .panel-skel {
    height: 120px;
    background: linear-gradient(90deg, var(--bg) 0%, #f7f4ef 50%, var(--bg) 100%);
    background-size: 200% 100%;
    animation: skel 1.4s ease-in-out infinite;
    border-radius: var(--r-md);
    margin: 14px 16px 16px;
  }
  @keyframes skel { 0%,100% { background-position: 100% 0; } 50% { background-position: -100% 0; } }
  .task-empty {
    padding: 28px 16px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
    font-style: italic;
  }
  .task-empty.err { color: var(--cherry); font-style: normal; }

  /* Week calendar */
  .wk-cal-eyebrow {
    font-size: 10px;
    font-weight: 700;
    color: var(--ink-light);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .wk-cal {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 18px 20px 20px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 22px;        /* gap before the next panel */
  }
  .wk-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
  }
  .wk-cal-headleft { display: flex; align-items: baseline; gap: 12px; }
  .wk-cal-title {
    font-size: 14px; font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
  }
  .wk-cal-rangelabel {
    font-size: 12px; color: var(--ink-mid);
    font-weight: 500;
  }
  .wk-cal-headright { display: flex; align-items: center; gap: 10px; }
  .wk-cal-modes {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    overflow: hidden;
    background: var(--bg);
  }
  .wk-cal-mode {
    background: transparent;
    border: none;
    color: var(--ink-mid);
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font);
    transition: background .12s, color .12s;
  }
  .wk-cal-mode.active {
    background: var(--cherry-fill);
    color: var(--on-accent);
  }
  .wk-cal-mode:not(.active):hover {
    color: var(--cherry);
  }
  .wk-cal-nav { display: flex; gap: 4px; }
  .wk-cal-navbtn {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-mid);
    border-radius: var(--r-sm, 6px);
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font);
  }
  .wk-cal-navbtn:hover { border-color: var(--cherry); color: var(--cherry); }

  /* Sources / view-as toggle (top-left of header) */
  .wk-cal-sources {
    display: inline-flex; gap: 6px; align-items: center;
  }
  .wk-cal-sources-label {
    font-size: 12px;
    color: var(--ink-mid);
    font-weight: 600;
    margin-right: 4px;
  }
  .wk-cal-source {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent;
    border: 1.5px solid var(--line);
    border-radius: var(--r-pill);
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-mid);
    cursor: pointer;
    font-family: var(--font);
    transition: background .12s, color .12s, border-color .12s;
  }
  .wk-cal-source:hover { color: var(--cherry); border-color: var(--cherry-mid); }
  .wk-cal-source.active {
    background: var(--cherry-fill);
    color: var(--on-accent);
    border-color: var(--cherry);
  }
  .wk-cal-source.active .wk-cal-swatch { background: #fff !important; }

  /* View-mode toggle - separate pills to match design */
  .wk-cal-modes {
    display: inline-flex;
    gap: 6px;
    background: transparent;
    border: none;
    padding: 0;
  }
  .wk-cal-mode {
    background: transparent;
    border: 1.5px solid var(--line);
    border-radius: var(--r-pill);
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-mid);
    cursor: pointer;
    font-family: var(--font);
    transition: background .12s, color .12s, border-color .12s;
  }
  .wk-cal-mode:hover { color: var(--cherry); border-color: var(--cherry-mid); }
  .wk-cal-mode.active {
    background: var(--cherry-fill);
    color: var(--on-accent);
    border-color: var(--cherry);
  }

  /* Legend strip */
  .wk-cal-legend {
    display: flex; gap: 18px; flex-wrap: wrap;
    padding: 8px 0 14px;
    border-bottom: 1px solid var(--line-soft);
    margin-bottom: 14px;
  }
  .wk-cal-legend-item {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 10.5px; font-weight: 600;
    color: var(--ink-mid);
    letter-spacing: 0.01em;
  }
  .wk-cal-legend-item.private { color: var(--ink-light); font-weight: 500; }
  .wk-cal-swatch {
    width: 10px; height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
  }
  .wk-cal-swatch.interview { background: var(--lilac-fg); }
  .wk-cal-swatch.release   { background: var(--mint-fg); }
  .wk-cal-swatch.private   { background: var(--ink-light); }

  /* Loading + error states */
  .wk-cal-loading { padding: 36px; text-align: center; color: var(--ink-light); font-size: 12px; }
  .wk-cal-err     { padding: 36px; text-align: center; color: var(--cherry); font-size: 12px; }

  /* Week grid */
  .wk-cal-grid.view-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
  }
  .wk-cal-col {
    border: 1px solid var(--line-soft, var(--line));
    border-radius: var(--r-sm, 6px);
    padding: 8px 8px 10px;
    min-height: 124px;
    background: var(--bg);
  }
  .wk-cal-col.today {
    background: #fff;
    border-color: var(--cherry);
  }
  .wk-cal-col-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 8px;
  }
  .wk-cal-day {
    font-size: 10px;
    font-weight: 700;
    color: var(--ink-light);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .wk-cal-date {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    display: flex; align-items: baseline; gap: 4px;
  }
  .wk-cal-date.today { color: var(--cherry); }
  .wk-cal-mo {
    font-size: 9px;
    color: var(--ink-light);
    font-weight: 600;
    text-transform: uppercase;
  }
  .wk-cal-col-body { display: flex; flex-direction: column; gap: 6px; }
  .wk-cal-empty { font-size: 11px; color: var(--ink-light); font-style: italic; padding: 2px 0; }

  /* Chips - 2-line stacked */
  .wk-cal-chip {
    padding: 6px 8px;
    border-radius: 6px;
    display: flex; flex-direction: column; gap: 1px;
    line-height: 1.25;
    overflow: hidden;
    cursor: default;
    transition: transform .12s;
  }
  .wk-cal-chip:hover { transform: translateY(-1px); }
  .wk-cal-chip-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.85;
  }
  .wk-cal-chip-content {
    font-size: 11.5px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .wk-cal-chip.interview {
    background: var(--lilac-bg);
    color: var(--lilac-fg);
    border-left: 3px solid var(--lilac-fg);
  }
  .wk-cal-chip.release {
    background: var(--mint-bg);
    color: var(--mint-fg);
    border-left: 3px solid var(--mint-fg);
  }
  .wk-cal-chip.private {
    background: var(--sky, #e3edf5);
    color: var(--sky-fg);
    border-left: 3px solid var(--sky-fg);
  }

  /* Day view - left day-info card + right hour timeline */
  .wk-cal-grid.view-day {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 24px;
    align-items: start;
  }
  @media (max-width: 800px) {
    .wk-cal-grid.view-day { grid-template-columns: 1fr; }
  }
  .wk-cal-dayview {
    display: contents;
  }
  .wk-cal-day-info {
    padding-top: 14px;
  }
  .wk-cal-day-num {
    font-size: 72px;
    font-weight: 700;
    color: var(--cherry);
    line-height: 1;
    letter-spacing: -0.04em;
    margin-bottom: 4px;
  }
  .wk-cal-day-num.today {
    color: var(--cherry);
  }
  .wk-cal-day-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
  }
  .wk-cal-day-month {
    font-size: 12px;
    color: var(--ink-light);
    font-weight: 600;
    margin-top: 2px;
  }
  .wk-cal-day-allday {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
    display: flex; flex-direction: column; gap: 6px;
  }
  .wk-cal-day-allday-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--ink-light);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 4px;
  }
  /* Hour timeline */
  .wk-cal-day-timeline {
    position: relative;
    padding-top: 0;
    border-left: 1px solid var(--line-soft);
  }
  .wk-cal-dayhour {
    height: 60px;
    display: flex;
    align-items: flex-start;
    border-top: 1px solid var(--line-soft);
    position: relative;
  }
  .wk-cal-dayhour:first-child { border-top: none; }
  .wk-cal-dayhour-time {
    font-size: 11px;
    color: var(--ink-light);
    font-weight: 600;
    padding: 0 14px;
    transform: translateY(-7px);   /* center on the line */
    background: #fff;
  }
  .wk-cal-day-block {
    position: absolute;
    left: 60px; right: 0;
    background: var(--lilac-bg);
    color: var(--lilac-fg);
    border-left: 3px solid var(--lilac-fg);
    border-radius: 0 6px 6px 0;
    padding: 8px 12px;
    cursor: default;
    z-index: 2;
    overflow: hidden;
    transition: filter .12s;
  }
  .wk-cal-day-block:hover { filter: brightness(0.97); }
  .wk-cal-day-block-title {
    font-size: 13px; font-weight: 700;
  }
  .wk-cal-day-block-meta {
    font-size: 11px;
    opacity: 0.8;
    margin-top: 2px;
  }
  .wk-cal-day-block.interview {
    background: var(--lilac-bg);
    color: var(--lilac-fg);
    border-left-color: var(--lilac-fg);
  }
  .wk-cal-day-block.release {
    background: var(--mint-bg);
    color: var(--mint-fg);
    border-left-color: var(--mint-fg);
  }
  .wk-cal-day-block.private {
    background: #e8e4d8;
    color: var(--ink-mid);
    border-left-color: var(--muted);
  }

  /* Month view */
  .wk-cal-grid.view-month { display: block; }
  .wk-cal-monthrow.head {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 6px;
  }
  .wk-cal-monthcellhead {
    font-size: 10px;
    font-weight: 700;
    color: var(--ink-light);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 6px;
  }
  .wk-cal-monthbody {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
  }
  .wk-cal-monthcell {
    background: var(--bg);
    border-radius: var(--r-sm, 6px);
    padding: 8px;
    min-height: 70px;
    border: 1px solid var(--line-soft);
    display: flex; flex-direction: column; gap: 4px;
  }
  .wk-cal-monthcell.today {
    background: #fff;
    border-color: var(--cherry);
  }
  .wk-cal-monthcell.pad {
    background: transparent;
    border: none;
  }
  .wk-cal-monthnum {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
  }
  .wk-cal-monthcell.today .wk-cal-monthnum { color: var(--cherry); }
  .wk-cal-monthdots {
    display: flex; gap: 3px; align-items: center;
    margin-top: auto;
  }
  .wk-cal-monthdot {
    width: 6px; height: 6px;
    border-radius: 50%;
  }
  .wk-cal-monthdot.interview { background: var(--lilac-fg); }
  .wk-cal-monthdot.release   { background: var(--mint-fg); }

  /* Month flag pills (replace dots) */
  .wk-cal-monthflags {
    display: flex; flex-wrap: wrap; gap: 3px; align-items: center;
    margin-top: auto;
  }
  .wk-cal-monthflag {
    font-size: 9.5px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: var(--r-pill);
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .wk-cal-monthflag.interview { background: var(--lilac, #ece7f7); color: var(--lilac-fg); }
  .wk-cal-monthflag.release   { background: var(--mint); color: var(--mint-fg); }
  .wk-cal-monthflag.private   { background: var(--sky,   #e3edf5); color: var(--sky-fg); }
  .wk-cal-monthflag.more      { background: var(--bg);             color: var(--ink-light); }

  /* Month cell header - number + eye icon on the same row */
  .wk-cal-monthcell-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 4px;
  }
  .wk-cal-monthcell-eye {
    background: transparent;
    border: 1px solid var(--line-soft);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    color: var(--ink-light);
    opacity: 0.55;
    transition: opacity .12s, border-color .12s;
  }
  .wk-cal-monthcell-eye:hover { opacity: 1; border-color: var(--cherry); color: var(--cherry); }

  /* Day-detail popover (eye-icon → modal) */
  .wkdd { display: flex; flex-direction: column; gap: 0; }
  .wkdd-row {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 12px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--line-soft);
  }
  .wkdd-row:last-child { border-bottom: none; }
  .wkdd-hour {
    font-size: 11px; font-weight: 700; color: var(--ink-light);
    text-transform: uppercase; letter-spacing: 0.05em;
    padding-top: 2px;
  }
  .wkdd-items { display: flex; flex-direction: column; gap: 4px; }
  .wkdd-item {
    font-size: 12.5px;
    padding: 6px 10px;
    border-radius: 6px;
    border-left: 3px solid var(--line);
    background: var(--bg);
    color: var(--ink);
  }
  .wkdd-item.interview { border-left-color: var(--lilac-fg); background: var(--lilac, #ece7f7); color: var(--lilac-fg); }
  .wkdd-item.release   { border-left-color: var(--mint-fg);  background: var(--mint); color: var(--mint-fg); }
  .wkdd-item.private   { border-left-color: var(--sky-fg); background: var(--sky, #e3edf5); color: var(--sky-fg); }

  /* Agent finding status badges */
  .finding-status {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    line-height: 1.5;
  }
  .finding-status.with-ai    { background: var(--butter, #fff3d6); color: var(--butter-fg); }
  .finding-status.needs-info { background: var(--cherry-bg, #fde6eb); color: var(--cherry); }
  .finding-status.complete   { background: var(--mint); color: var(--mint-fg); }
  .finding-status.failed     { background: #f6dada; color: #a23030; }

  .finding-card.awaiting { border-top: 2px solid var(--cherry); }
  .finding-feedback {
    background: var(--cherry-bg, #fde6eb);
    border-radius: var(--r-sm);
    padding: 12px 14px;
    margin-top: 8px;
  }
  .finding-feedback-q {
    font-size: 12px;
    color: var(--cherry);
    margin-bottom: 10px;
  }
  .finding-feedback textarea {
    width: 100%;
    margin-top: 0;
  }

  /* Calendar legend strip */
  .wk-cal-legend {
    display: flex; flex-wrap: wrap; gap: 14px;
    padding: 8px 14px;
    margin: -4px 0 8px;
    background: var(--bg);
    border-radius: var(--r-sm, 6px);
    font-size: 11px;
    color: var(--ink-light);
  }
  .wk-cal-legend-item { display: inline-flex; align-items: center; gap: 6px; }
  .wk-cal-legend-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    display: inline-block;
  }
  .wk-cal-legend-dot.interview  { background: var(--lilac-fg); }
  .wk-cal-legend-dot.release    { background: var(--mint-fg); }
  .wk-cal-legend-dot.private    { background: var(--sky-fg); }
  .wk-cal-legend-dot.newsletter { background: var(--butter-fg); }

  /* Day view = 7-day × hourly grid (replaces single-day layout) */
  .wk-cal-grid.view-day {
    display: grid;
    grid-template-columns: 60px repeat(7, 1fr);
    grid-template-rows: auto;
    gap: 0;
    background: #fff;
    border-radius: var(--r-md);
    overflow: hidden;
    border: 1px solid var(--line-soft);
  }
  .wk7 { display: contents; }
  .wk7-labels, .wk7-col {
    display: flex; flex-direction: column;
    border-right: 1px solid var(--line-soft);
    min-width: 0;
  }
  .wk7-col:last-child { border-right: none; }
  .wk7-labels { background: var(--bg); }
  .wk7-col-head {
    height: 40px; padding: 6px 8px;
    border-bottom: 1px solid var(--line-soft);
    display: flex; align-items: center; justify-content: space-between;
    background: var(--g-surface);
  }
  .wk7-labels-head { background: var(--bg); border-bottom-color: var(--line-soft); }
  .wk7-col.today .wk7-col-head { background: var(--cherry-bg, #fff5f7); }
  .wk7-day-name {
    font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--ink-light);
  }
  .wk7-day-num {
    font-size: 14px; font-weight: 700; color: var(--ink);
  }
  .wk7-day-num.today { color: var(--cherry); }
  .wk7-allday {
    min-height: 28px; padding: 4px 6px;
    border-bottom: 1px solid var(--line-soft);
    display: flex; flex-direction: column; gap: 3px;
    background: #fff;
  }
  .wk7-allday-empty { font-size: 10px; color: var(--ink-light); }
  .wk7-allday-label { font-size: 10px; color: var(--ink-light); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
  .wk7-col-body {
    position: relative;
    flex: 1; min-height: 0;
  }
  .wk7-cell {
    height: 48px;
    border-bottom: 1px solid var(--line-soft);
  }
  .wk7-cell:last-child { border-bottom: none; }
  .wk7-hour-col { position: relative; }
  .wk7-hour-row {
    height: 48px;
    border-bottom: 1px solid var(--line-soft);
    position: relative;
  }
  .wk7-hour-row:last-child { border-bottom: none; }
  .wk7-hour-label {
    font-size: 10px;
    color: var(--ink-light);
    padding: 3px 6px 0;
    text-align: right;
    line-height: 1;
  }
  /* Day-blocks inside wk7-col-body - reuse .wk-cal-day-block absolute positioning */
  .wk7-col-body .wk-cal-day-block {
    left: 3px; right: 3px;
  }

  /* Stat tiles */
  .stat-tile {
    background: var(--g-surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 16px 18px 14px;
    position: relative;
    box-shadow: var(--shadow-sm);
    border-top: 3px solid var(--line);
  }
  .stat-tile.accent-cherry  { border-top-color: var(--cherry); }
  .stat-tile.accent-mint    { border-top-color: var(--mint-fg); }
  .stat-tile.accent-sky     { border-top-color: var(--sky-fg); }
  .stat-tile.accent-butter  { border-top-color: var(--butter-fg); }
  .stat-tile.accent-lilac   { border-top-color: var(--lilac-fg); }
  .stat-tile-eyebrow {
    font-size: 10px;
    font-weight: 700;
    color: var(--ink-light);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .stat-tile-row {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    margin-bottom: 4px;
  }
  .stat-tile-value {
    font-size: 26px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1.1;
  }
  .stat-tile-headline {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 4px;
    line-height: 1.2;
  }
  .stat-tile-delta {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
  }
  .stat-tile-delta.up   { color: var(--mint-fg); background: var(--mint-bg, #e3f2e7); }
  .stat-tile-delta.down { color: var(--cherry);          background: var(--cherry-bg, #fde2e8); }
  .stat-tile-delta.flat { color: var(--ink-light); }
  .stat-tile-sub {
    font-size: 11.5px;
    color: var(--ink-mid);
    line-height: 1.4;
  }
  .stat-tile-skel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    height: 92px;
    box-shadow: var(--shadow-sm);
    background-image: linear-gradient(90deg, #fff 0%, #f7f4ef 50%, #fff 100%);
    background-size: 200% 100%;
    animation: skel 1.4s ease-in-out infinite;
  }

  /* WB card */
  .wb-card-list { display: flex; flex-direction: column; gap: 8px; padding: 6px 14px 14px; }
  .wb-card {
    display: flex; align-items: center; gap: 12px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 12px 14px;
    cursor: pointer;
    transition: border-color .12s, background .12s, transform .12s;
    font-family: var(--font);
    text-align: left;
    width: 100%;
  }
  .wb-card:hover {
    border-color: var(--cherry);
    background: #fff;
    transform: translateY(-1px);
  }
  .wb-card-body { flex: 1; min-width: 0; }
  .wb-card-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 2px;
    line-height: 1.3;
  }
  .wb-card-detail {
    font-size: 11.5px;
    color: var(--ink-mid);
    line-height: 1.4;
    margin-bottom: 4px;
  }
  .wb-card-meta {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  }
  .wb-card-meta-line { font-size: 10.5px; color: var(--ink-light); }
  .wb-card-pill {
    flex-shrink: 0;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
  }
  .wb-flag {
    padding: 2px 7px;
    border-radius: var(--r-pill);
    font-size: 10px;
    font-weight: 700;
  }

  /* Task list */
  .task-list { display: flex; flex-direction: column; padding: 4px 0; }
  .task-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 18px;
    border-top: 1px solid var(--line-soft, var(--line));
  }
  .task-row:first-child { border-top: none; }
  .task-row-check {
    width: 16px; height: 16px;
    border-radius: 4px;
    border: 1.5px solid var(--line-strong, var(--line));
    flex-shrink: 0;
  }
  .task-row-body { flex: 1; min-width: 0; }
  .task-row-title {
    font-size: 13px; font-weight: 600;
    color: var(--ink);
    margin-bottom: 2px;
  }
  .task-row-meta {
    display: flex; align-items: center; gap: 10px;
    font-size: 11px; color: var(--ink-light);
  }
  .task-row-assignee {
    display: inline-flex; align-items: center; gap: 5px;
  }
  .task-row-due { font-weight: 600; }
  .task-row-due.overdue { color: var(--cherry); }
  .task-row.overdue .task-row-check { border-color: var(--cherry); }
  .avatar.tiny { width: 16px; height: 16px; font-size: 8px; }
  /* Wave 30 - checklist-driven task row (anchor variant) */
  .task-row-link {
    text-decoration: none;
    color: inherit;
    transition: background .12s;
  }
  .task-row-link:hover { background: rgba(184,0,43,0.04); }
  .task-row-ep {
    font-weight: 600;
    color: var(--ink);
  }
  .task-row-stage {
    font-size: 10.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 8px;
  }

  /* Unreleased / generic row list */
  .unreleased-list { display: flex; flex-direction: column; padding: 6px 0 12px; }
  .unreleased-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 18px;
    border-top: 1px solid var(--line-soft, var(--line));
  }
  .unreleased-row:first-child { border-top: none; }
  .unreleased-row-body { flex: 1; min-width: 0; }
  .unreleased-row-title {
    font-size: 12.5px; font-weight: 600;
    color: var(--ink);
    margin-bottom: 2px;
  }
  .unreleased-row-meta { font-size: 11px; color: var(--ink-light); text-transform: capitalize; }
  .unreleased-row-action { flex-shrink: 0; }
  .schedule-date-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm, 6px);
    font-size: 13px;
    font-family: var(--font);
    color: var(--ink);
  }
  .schedule-date-input:focus { outline: none; border-color: var(--cherry); }

  /* Team status */
  .team-list { display: flex; flex-direction: column; padding: 4px 0; }
  .team-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 18px;
    border-top: 1px solid var(--line-soft, var(--line));
  }
  .team-row:first-child { border-top: none; }
  .team-row-body { flex: 1; min-width: 0; }
  .team-row-name { font-size: 13px; font-weight: 600; color: var(--ink); }
  .team-row-meta { font-size: 10.5px; color: var(--ink-light); text-transform: capitalize; }
  .team-row-count {
    font-size: 11px; font-weight: 700;
    padding: 3px 9px;
    border-radius: var(--r-pill);
    background: var(--bg);
    color: var(--ink-light);
  }
  .team-row-count.has {
    background: var(--cherry-bg, #fde2e8);
    color: var(--cherry);
  }

  /* Wins list */
  .wins-list { list-style: none; padding: 6px 18px 14px; margin: 0; }
  .wins-list li {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 8px 0;
    font-size: 12.5px;
    color: var(--ink);
    border-top: 1px solid var(--line-soft, var(--line));
  }
  .wins-list li:first-child { border-top: none; }
  .wins-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--mint-fg);
    flex-shrink: 0;
    margin-top: 6px;
  }

  /* Bar chart */
  .bar-chart {
    position: relative;
    display: flex;
    padding: 0 18px 14px;
  }
  .bar-chart-axis {
    display: flex; flex-direction: column;
    justify-content: space-between;
    padding: 24px 8px 24px 0;
    font-size: 9px;
    font-weight: 600;
    color: var(--ink-light);
    text-align: right;
    min-width: 36px;
  }
  .bar-chart-bars {
    display: flex;
    align-items: flex-end;
    flex: 1;
    gap: 6px;
    border-left: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    position: relative;
  }
  .bar-chart-bar-wrap {
    display: flex; flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
  }
  .bar-chart-bar {
    width: 100%;
    background: linear-gradient(180deg, var(--cherry), var(--cherry-deep));
    border-radius: 3px 3px 0 0;
    position: relative;
    cursor: pointer;
    transition: opacity .15s;
  }
  .bar-chart-bar:hover { opacity: 0.85; }
  .bar-chart-bar:hover .bar-chart-tooltip { display: flex; }
  .bar-chart-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #14110d;
    color: var(--on-accent);
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 11px;
    line-height: 1.3;
    flex-direction: column;
    gap: 1px;
    white-space: nowrap;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  }
  .bar-chart-tooltip strong { font-weight: 700; font-size: 12px; }
  .bar-chart-xlabel {
    font-size: 9px;
    font-weight: 600;
    color: var(--ink-light);
    margin-top: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .bar-chart-empty {
    padding: 40px;
    text-align: center;
    color: var(--muted);
    font-style: italic;
  }

  /* Grid helpers */
  .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  @media (max-width: 1100px) {
    .grid-3 { grid-template-columns: 1fr; }
  }

  /* =============================================================
     AI CHIEF OF STAFF - 4 tiles + modals
     ============================================================= */
  .ceo-config-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-light);
    margin-bottom: 14px;
  }
  .ceo-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 6px;
  }
  @media (max-width: 1100px) { .ceo-tiles { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 640px)  { .ceo-tiles { grid-template-columns: 1fr; } }

  .ceo-tile {
    background: var(--g-surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 20px;
    text-align: left;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    font-family: var(--font);
    display: flex; flex-direction: column; gap: 10px;
    min-height: 180px;
    transition: transform .12s, box-shadow .12s;
    box-shadow: var(--shadow-sm);
  }
  .ceo-tile:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.09);
  }
  .ceo-tile-topbar {
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
  }
  .ceo-tile-icon { font-size: 28px; line-height: 1; }
  .ceo-tile-title {
    font-size: 15px; font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
  }
  .ceo-tile-desc {
    font-size: 12.5px;
    color: var(--ink-mid);
    line-height: 1.45;
    flex: 1;
  }
  .ceo-tile-foot {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 8px;
    border-top: 1px solid var(--line-soft);
  }
  .ceo-tile-stat {
    font-size: 11px;
    color: var(--ink-light);
    font-weight: 600;
  }
  .ceo-tile-badge {
    font-size: 9px; font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--butter-bg);
    color: var(--butter-fg);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .ceo-tile-cta {
    font-size: 12px; font-weight: 700;
    color: var(--cherry);
  }
  .ceo-tile-skel {
    background: linear-gradient(90deg, #fff 0%, #f7f4ef 50%, #fff 100%);
    background-size: 200% 100%;
    animation: skel 1.4s ease-in-out infinite;
    border-radius: var(--r-md);
    min-height: 180px;
    box-shadow: var(--shadow-sm);
  }

  /* CEO modal */
  .aiceo-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(20,17,13,0.55);
    display: flex; align-items: center; justify-content: center;
    z-index: 200;
    animation: fadeIn .15s ease;
  }
  .aiceo-modal {
    background: #fff;
    border-radius: var(--r-lg);
    max-width: 820px;
    width: 92vw;
    max-height: 84vh;
    display: flex; flex-direction: column;
    box-shadow: 0 24px 60px rgba(0,0,0,0.35);
    overflow: hidden;
  }
  .aiceo-modal-head {
    display: flex; align-items: center; gap: 14px;
    padding: 20px 26px;
    border-bottom: 1px solid var(--line);
  }
  .aiceo-modal-headicon {
    width: 38px; height: 38px;
    border-radius: 9px;
    display: grid; place-items: center;
    font-size: 18px;
    flex-shrink: 0;
  }
  .aiceo-modal-headtext { flex: 1; min-width: 0; }
  .aiceo-modal-headtitle {
    font-size: 18px; font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
  }
  .aiceo-modal-headsub {
    font-size: 12px; color: var(--ink-light);
    margin-top: 2px;
  }
  .aiceo-modal-close {
    background: transparent; border: none;
    font-size: 22px; line-height: 1;
    color: var(--ink-light);
    cursor: pointer;
    padding: 4px 10px;
    border-radius: var(--r-pill);
  }
  .aiceo-modal-close:hover { background: var(--bg); color: var(--cherry); }
  .aiceo-modal-body {
    padding: 20px 26px;
    overflow-y: auto;
    flex: 1;
    display: flex; flex-direction: column; gap: 14px;
  }
  .aiceo-modal-foot {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 14px 26px 20px;
    border-top: 1px solid var(--line);
    background: var(--bg);
  }
  .aiceo-subhdr {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-light);
    margin: 4px 0 -2px;
  }

  /* mblock - generic info box */
  .mblock {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 14px 16px;
  }
  .mblock-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-light);
    margin-bottom: 8px;
  }
  .mblock-body {
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink);
  }
  .mblock-body code {
    font-family: var(--mono);
    background: var(--bg-2);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 12px;
  }

  /* Spine file rows */
  .spine-row {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-top: 1px solid var(--line-soft);
  }
  .spine-row:first-child { border-top: none; }
  .spine-row-icon { font-size: 18px; }
  .spine-row-name { font-family: var(--mono); font-size: 12px; color: var(--ink); }
  .spine-row-desc { font-size: 11.5px; color: var(--ink-mid); margin-top: 2px; }
  .spine-row-when { font-size: 10.5px; color: var(--ink-light); font-weight: 600; }

  /* Ritual rows */
  .ritual-row {
    display: grid;
    grid-template-columns: 32px 1fr;
    align-items: baseline;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--line-soft);
  }
  .ritual-row:first-child { border-top: none; }
  .ritual-num { font-size: 12px; font-weight: 800; color: var(--cherry); }
  .ritual-text { font-size: 13px; color: var(--ink); line-height: 1.45; }

  /* Priority rows (Master Prompt modal) */
  .priority-row {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: var(--r-md);
  }
  .priority-num { font-size: 22px; font-weight: 800; line-height: 1; }
  .priority-title { font-size: 14px; font-weight: 700; color: var(--ink); }
  .priority-desc { font-size: 12px; color: var(--ink-mid); margin-top: 2px; line-height: 1.45; }
  .priority-badge {
    font-size: 9px; font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  /* Hard rule rows */
  .hardrule-row {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 10px;
    padding: 12px 14px;
    border-top: 1px solid var(--line-soft);
  }
  .hardrule-row:first-child { border-top: none; }
  .hardrule-icon {
    color: var(--cherry);
    font-size: 14px; font-weight: 800;
    line-height: 1.4;
  }
  .hardrule-title { font-size: 13px; font-weight: 700; color: var(--ink-mid); }
  .hardrule-desc { font-size: 12px; color: var(--ink-soft); margin-top: 2px; line-height: 1.45; }

  /* Master prompt text */
  .master-prompt-text {
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--ink-mid);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 14px 16px;
    max-height: 320px;
    overflow-y: auto;
    white-space: pre-wrap;
    line-height: 1.5;
    margin: 0;
  }

  /* Tier separator + discipline cards */
  .tier-sep {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    border-radius: 10px 10px 0 0;
    font-size: 12px;
    margin-bottom: 0;
  }
  .tier-sep + .discipline-card { border-radius: 0 0 8px 8px; margin-bottom: 18px; }
  .discipline-card {
    background: var(--g-surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--line);
    border-radius: var(--r-sm);
    margin-bottom: 6px;
  }
  .discipline-summary {
    list-style: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px;
    gap: 12px;
  }
  .discipline-summary::-webkit-details-marker { display: none; }
  .discipline-name { font-size: 13px; font-weight: 600; color: var(--ink); }
  .discipline-meta { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: var(--ink-light); }
  .discipline-badge {
    font-size: 9px; font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.05em;
  }
  .discipline-badge.ok      { background: var(--mint-bg); color: var(--mint-fg); }
  .discipline-badge.missing { background: var(--rose-bg); color: var(--rose-fg); }
  .discipline-expand { font-style: italic; }
  .discipline-body {
    padding: 4px 14px 14px;
    font-size: 12.5px;
    color: var(--ink);
    line-height: 1.5;
    border-top: 1px solid var(--line-soft);
  }
  .discipline-body pre {
    font-family: var(--mono);
    font-size: 11.5px;
    background: var(--bg);
    padding: 12px;
    border-radius: 6px;
    max-height: 340px;
    overflow-y: auto;
    white-space: pre-wrap;
    margin: 10px 0 0;
  }

  /* Posture rows (will / will never) */
  .posture-row {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 14px;
    border-radius: var(--r-sm);
    margin-bottom: 6px;
    line-height: 1.45;
  }
  .posture-row.will-do  { background: var(--mint-bg); border-left: 3px solid var(--good); color: var(--ink); }
  .posture-row.wont-do  { background: var(--rose-bg); border-left: 3px solid var(--block); color: var(--ink); }
  .posture-icon { font-weight: 800; flex-shrink: 0; }
  .posture-row.will-do .posture-icon { color: var(--good); }
  .posture-row.wont-do .posture-icon { color: var(--block); }

  /* Escalation rows */
  .escalation-row {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-top: 1px solid var(--line-soft);
  }
  .escalation-row:first-child { border-top: none; }
  .escalation-icon { font-size: 14px; color: var(--warn); }
  .escalation-trigger { font-size: 13px; font-weight: 700; color: var(--ink); }
  .escalation-desc { font-size: 11.5px; color: var(--ink-mid); margin-top: 2px; }
  .escalation-badge {
    font-size: 9px; font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.06em;
  }

  /* Security register items */
  .sec-item {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 0;
    border-top: 1px solid var(--line-soft);
  }
  .sec-item:first-child { border-top: none; }
  .sec-item-body { flex: 1; }
  .sec-item-text { font-size: 12.5px; color: var(--ink); }
  .sec-item-notes { font-size: 11px; color: var(--ink-light); margin-top: 2px; }
  .sec-item-pill {
    font-size: 10px; font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.04em;
  }
  .sec-item-pill.in_place       { background: var(--mint-bg);   color: var(--mint-fg); }
  .sec-item-pill.partial        { background: var(--butter-bg); color: var(--butter-fg); }
  .sec-item-pill.missing        { background: var(--rose-bg);   color: var(--rose-fg); }
  .sec-item-pill.not_applicable { background: var(--bg);        color: var(--ink-light); }
  .sec-item-pill.review_needed  { background: var(--peach-bg);  color: var(--peach-fg); }

  /* Activity list (recent activity panel) */
  .activity-list { padding: 4px 0; }
  .activity-row {
    display: grid;
    grid-template-columns: 12px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-top: 1px solid var(--line-soft);
  }
  .activity-row:first-child { border-top: none; }
  .activity-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--cherry-fill);
  }
  .activity-row-actor { font-size: 12px; font-weight: 700; color: var(--ink); }
  .activity-row-event { font-size: 11px; color: var(--ink-mid); margin-top: 2px; }
  .activity-row-time { font-size: 10.5px; color: var(--ink-light); white-space: nowrap; }

  /* Sidebar - nested nav items under a parent */
  .nav-item.nav-nested {
    padding-left: 36px;
    font-size: 12.5px;
  }
  .nav-item.nav-nested::before {
    content: '';
    position: absolute;
    left: 22px; top: 50%;
    width: 6px; height: 1px;
    background: rgba(255,255,255,0.18);
  }
  .nav-item.nav-nested { position: relative; }

  /* =============================================================
     EPISODES - Tabs + Kanban + Forms
     ============================================================= */
  .ep-tabs {
    display: flex; align-items: center; gap: 4px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 0;
  }
  .ep-tab {
    background: transparent;
    border: 1.5px solid transparent;
    border-bottom: none;
    border-radius: var(--r-sm, 6px) var(--r-sm, 6px) 0 0;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-light);
    cursor: pointer;
    font-family: var(--font);
    margin-bottom: -1px;
    display: inline-flex; align-items: center; gap: 8px;
    transition: color .12s;
  }
  .ep-tab:hover { color: var(--ink-mid); }
  .ep-tab.active {
    color: var(--cherry);
    border-color: var(--cherry);
    border-bottom-color: var(--bg);
    background: var(--bg);
  }
  .ep-tab-badge {
    background: var(--cherry-bg);
    color: var(--cherry);
    font-size: 10.5px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: var(--r-pill);
  }
  .ep-tabs-spacer { flex: 1; }

  /* Kanban */
  .kanban {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
  }
  @media (max-width: 1400px) { .kanban { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 900px)  { .kanban { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 600px)  { .kanban { grid-template-columns: 1fr; } }

  .kanban-col {
    background: var(--bg-2, #ece4cf);
    border-radius: var(--r-md);
    padding: 12px 12px 14px;
    display: flex; flex-direction: column;
    min-height: 200px;
  }
  .kanban-col-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 4px 8px;
  }
  .kanban-col-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--ink);
  }
  .kanban-col-count {
    background: var(--cherry-fill);
    color: var(--on-accent);
    font-size: 11px;
    font-weight: 700;
    min-width: 22px; height: 22px;
    border-radius: var(--r-pill);
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 7px;
  }
  .kanban-col-rule {
    height: 2px;
    background: var(--cherry-fill);
    margin: 0 4px 12px;
    border-radius: 1px;
  }
  .kanban-col-empty {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    color: var(--ink-light);
    font-size: 12px;
    font-style: italic;
    padding: 24px 12px;
    line-height: 1.5;
  }
  .kanban-col-body {
    display: flex; flex-direction: column; gap: 10px;
    min-height: 60px;
    flex: 1;
    transition: background .12s;
    padding: 4px;
    border-radius: var(--r-sm, 6px);
  }
  .kanban-col-body.drop-active {
    background: var(--cherry-bg);
    outline: 2px dashed var(--cherry);
    outline-offset: -4px;
  }

  .kanban-card {
    background: var(--g-surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 12px 14px;
    cursor: grab;
    transition: transform .12s, border-color .12s, box-shadow .12s;
    box-shadow: var(--shadow-sm);
  }
  .kanban-card:hover {
    border-color: var(--cherry);
    transform: translateY(-1px);
  }
  .kanban-card.dragging {
    opacity: 0.4;
    cursor: grabbing;
  }
  .kanban-card-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 3px;
    line-height: 1.3;
  }
  .kanban-card-sub {
    font-size: 11px;
    color: var(--ink-light);
    margin-bottom: 8px;
    white-space: pre-wrap;
    display: flex; justify-content: space-between;
    gap: 6px;
    line-height: 1.3;
  }
  .kanban-card-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
  }
  .kanban-card-pill.mint   { background: var(--mint-bg);   color: var(--mint-fg); }
  .kanban-card-pill.sky    { background: var(--sky-bg);    color: var(--sky-fg); }
  .kanban-card-pill.lilac  { background: var(--lilac-bg);  color: var(--lilac-fg); }
  .kanban-card-pill.butter { background: var(--butter-bg); color: var(--butter-fg); }
  .kanban-card-pill.rose   { background: var(--rose-bg);   color: var(--rose-fg); }
  .kanban-card-pill.cherry { background: var(--cherry-bg); color: var(--cherry); }
  .kanban-card-pill.peach  { background: var(--peach-bg);  color: var(--peach-fg); }

  /* Stage section in Add Episode modal - visually groups fields per stage */
  .form-stage-section {
    background: var(--bg);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm, 6px);
    padding: 12px 14px;
    margin-bottom: 10px;
  }
  .form-stage-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cherry);
    margin-bottom: 8px;
  }

  /* Form fields (used in episode modal + add modal) */
  .form-grid { display: flex; flex-direction: column; gap: 14px; }
  .form-field {
    display: flex; flex-direction: column; gap: 5px;
  }
  .form-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-light);
  }
  .form-input {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-sm, 6px);
    padding: 9px 12px;
    font-size: 13px;
    color: var(--ink);
    font-family: var(--font);
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
  }
  .form-input:focus { outline: none; border-color: var(--cherry); box-shadow: 0 0 0 3px var(--cherry-bg); }
  .form-check {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px;
    color: var(--ink);
  }

  /* Guest card with Book button on Potential Guests tab */
  .guest-card .small { font-size: 12px; }
  .guest-card .text-muted { color: var(--ink-mid); }

  /* Settings - Integrations panel */
  .integ-list { display: flex; flex-direction: column; gap: 0; padding: 4px 0; }
  .integ-row {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 16px;
    padding: 18px;
    border-top: 1px solid var(--line-soft);
  }
  .integ-row:first-child { border-top: none; }
  .integ-icon {
    width: 44px; height: 44px;
    border-radius: var(--r);
    display: grid; place-items: center;
    font-size: 20px;
  }
  .integ-body { min-width: 0; }
  .integ-name { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
  .integ-desc { font-size: 12px; color: var(--ink-mid); line-height: 1.45; margin-bottom: 10px; }
  .integ-desc code { background: var(--bg); padding: 1px 5px; border-radius: 4px; font-family: var(--mono); font-size: 11.5px; }
  .integ-empty { font-size: 12px; color: var(--ink-light); padding: 8px 0; font-style: italic; }
  .integ-connected { margin: 8px 0; }
  .integ-conn-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px;
    background: var(--bg);
    border-radius: var(--r-sm, 6px);
    margin-bottom: 6px;
    gap: 12px;
  }
  .integ-conn-label { font-size: 12.5px; font-weight: 600; color: var(--ink); }
  .integ-conn-meta { font-size: 11px; color: var(--ink-light); margin-top: 2px; }
  .integ-actions { margin-top: 10px; }
  .integ-add-form { display: flex; gap: 8px; }
  .integ-add-form .form-input { flex: 1; }
  .integ-stack-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 8px 24px;
    margin-top: 8px;
  }
  .btn-sm { padding: 4px 10px; font-size: 11px; }

  /* Guest tile grid (Guests page) */
  .guest-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
    padding: 12px;
  }
  .guest-tile {
    background: var(--bg);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm, 6px);
    padding: 10px 12px;
    text-align: left;
    cursor: pointer;
    font-family: var(--font);
    transition: border-color .12s, transform .12s, background .12s;
  }
  .guest-tile:hover {
    background: #fff;
    border-color: var(--cherry);
    transform: translateY(-1px);
  }
  .guest-tile-name { font-size: 12.5px; font-weight: 700; color: var(--ink); }
  .guest-tile-meta { font-size: 10.5px; color: var(--ink-light); margin-top: 3px; }

  /* =============================================================
     CHAT page
     ============================================================= */
  .chat-shell { display: flex; flex-direction: column; gap: 14px; }
  .chat-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
  .chat-pill {
    background: transparent;
    border: 1.5px solid var(--line);
    border-radius: var(--r-pill);
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-mid);
    cursor: pointer;
    font-family: var(--font);
    transition: all .12s;
  }
  .chat-pill:hover { color: var(--cherry); border-color: var(--cherry-mid); }
  .chat-pill.active {
    background: var(--cherry-fill);
    color: var(--on-accent);
    border-color: var(--cherry);
  }
  .chat-thread {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 16px;
    min-height: 300px;
    max-height: 460px;
    overflow-y: auto;
    display: flex; flex-direction: column; gap: 12px;
  }
  .chat-msg { display: flex; align-items: flex-start; gap: 10px; max-width: 85%; }
  .chat-msg.user { align-self: flex-end; flex-direction: row-reverse; }
  .chat-msg-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 14px;
    flex-shrink: 0;
  }
  .chat-msg.ai .chat-msg-avatar { background: var(--lilac-bg); color: var(--lilac-fg); }
  .chat-msg.user .chat-msg-avatar { background: var(--cherry-fill); color: var(--on-accent); font-size: 10px; font-weight: 700; }
  .chat-msg-bubble {
    background: var(--bg);
    border-radius: var(--r-md);
    padding: 9px 13px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink);
  }
  .chat-msg.user .chat-msg-bubble { background: var(--cherry-fill); color: var(--on-accent); }
  .chat-suggestions { display: flex; flex-wrap: wrap; gap: 6px; padding: 16px; justify-content: center; }
  .chat-ask-card { padding: 14px 16px; }
  .chat-ask-card .chat-input-bar { margin: 0; }
  .chat-suggestion {
    background: var(--bg);
    border: 1px dashed var(--line);
    border-radius: var(--r-pill);
    padding: 5px 12px;
    font-size: 11.5px;
    color: var(--ink-mid);
    cursor: pointer;
    font-family: var(--font);
  }
  .chat-suggestion:hover { border-color: var(--cherry); color: var(--cherry); }
  .chat-empty {
    padding: 30px 16px;
    text-align: center;
    color: var(--ink-light);
    font-size: 12.5px;
  }
  .chat-input-bar {
    display: flex; gap: 8px; align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 8px 10px;
  }
  .chat-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 13px;
    font-family: var(--font);
    color: var(--ink);
    outline: none;
    padding: 6px 4px;
  }
  .chat-archive-list { display: flex; flex-direction: column; }
  .chat-archive-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 18px;
    border-top: 1px solid var(--line-soft);
    cursor: pointer;
  }
  .chat-archive-row:first-child { border-top: none; }
  .chat-archive-row:hover { background: var(--bg); }
  .chat-archive-title { font-size: 12.5px; color: var(--ink); font-weight: 600; }
  .chat-archive-meta { font-size: 10.5px; color: var(--ink-light); }

  /* =============================================================
     AI AGENTS page rebuild
     ============================================================= */
  .agent-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
  @media (max-width: 1000px) { .agent-grid { grid-template-columns: 1fr; } }
  .agent-card {
    background: var(--g-surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 18px;
    position: relative;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
  }
  .agent-card-top {
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
  }
  .agent-card-head {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 12px;
  }
  .agent-card-avatar {
    width: 44px; height: 44px;
    border-radius: 11px;
    display: grid; place-items: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--on-accent);
    flex-shrink: 0;
  }
  .agent-card-meta { flex: 1; min-width: 0; }
  .agent-card-name { font-size: 14px; font-weight: 700; color: var(--ink); }
  .agent-card-domain { font-size: 11px; color: var(--ink-light); margin-top: 2px; }
  .agent-card-status {
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: var(--r-pill);
    background: var(--mint-bg);
    color: var(--mint-fg);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .agent-card-status.paused { background: var(--butter-bg); color: var(--butter-fg); }
  .agent-card-section { margin-top: 14px; }
  .agent-card-section-title {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--ink-light);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .agent-card-text { font-size: 12px; color: var(--ink-mid); line-height: 1.45; }
  .agent-card-list { font-size: 12px; color: var(--ink); padding-left: 18px; margin: 0; line-height: 1.55; }
  .agent-card-list li { margin-bottom: 2px; }

  /* =============================================================
     PRODUCTION CHECKLIST stage groups
     ============================================================= */
  .stage-group { margin-bottom: 28px; }
  .stage-group-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 12px;
  }
  .stage-group-title {
    font-size: 13px; font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
  }
  .stage-group-owner {
    font-size: 11px;
    color: var(--ink-light);
    font-weight: 600;
  }
  .stage-episode-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid var(--line-soft);
    cursor: pointer;
  }
  .stage-episode-row:first-child { border-top: none; }
  .stage-episode-row:hover { background: var(--bg); }
  .stage-episode-num { font-family: var(--mono); font-size: 11px; color: var(--ink-light); min-width: 40px; }
  .stage-episode-body { flex: 1; }
  .stage-episode-title { font-size: 13px; font-weight: 600; color: var(--ink); }
  .stage-episode-meta { font-size: 11px; color: var(--ink-light); margin-top: 2px; }

  /* =============================================================
     STUDIO SCHEDULE redesign
     ============================================================= */
  .studio-week {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 16px 18px;
    box-shadow: var(--shadow-sm);
  }
  .studio-grid {
    display: grid;
    grid-template-columns: 60px repeat(7, 1fr);
    gap: 1px;
    background: var(--line-soft);
    border-radius: var(--r-sm, 6px);
    overflow: hidden;
    margin-top: 14px;
  }
  .studio-grid-head, .studio-grid-cell, .studio-grid-time {
    background: #fff;
    padding: 8px 6px;
    min-height: 38px;
  }
  .studio-grid-head {
    font-size: 10px;
    font-weight: 700;
    color: var(--ink-light);
    text-transform: uppercase;
    text-align: center;
    background: var(--bg);
  }
  .studio-grid-head.today { background: var(--cherry-fill); color: var(--on-accent); }
  .studio-grid-time {
    font-size: 10.5px;
    color: var(--ink-light);
    font-weight: 600;
    text-align: right;
    padding-right: 10px;
    background: var(--bg);
  }
  .studio-grid-cell { font-size: 11px; color: var(--ink); }
  .studio-grid-cell.has-event {
    background: var(--lilac-bg);
    color: var(--lilac-fg);
    font-weight: 600;
    border-left: 3px solid var(--lilac-fg);
  }
  .studio-grid-cell.has-event.personal {
    background: var(--bg-2);
    color: var(--ink-light);
    border-left: 3px solid var(--ink-light);
    font-style: italic;
  }
  .studio-grid-cell.today-col { background: rgba(184,0,43,0.03); }
  .studio-grid-cell.has-event.today-col { background: var(--lilac-bg); }
  /* Wave 35 - tentative bookings (status = pitch) read as soft dashed */
  .studio-grid-cell.has-event.is-tentative {
    background: repeating-linear-gradient(45deg, var(--lilac-bg), var(--lilac-bg) 6px, rgba(255,255,255,0.6) 6px, rgba(255,255,255,0.6) 9px);
    border-left-style: dashed;
    opacity: 0.85;
  }
  /* Wave 35 - time TBC = same look + italic to flag uncertainty */
  .studio-grid-cell.has-event.is-time-tbc { font-style: italic; }
  /* Episode-derived cells are anchor tags - keep them flush with the grid */
  a.studio-grid-cell.has-event { text-decoration: none; }
  a.studio-grid-cell.has-event:hover { filter: brightness(0.96); }
  /* Wave 36 - multi-hour booking spans. Primary cell carries the label
     and a stacked time range. Continuation cells share the same lilac
     fill but drop their top border so the booking reads as one block. */
  .studio-grid-cell.has-event {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    line-height: 1.25;
    padding: 6px 8px;
  }
  .studio-cell-label { font-weight: 600; }
  .studio-cell-time {
    font-size: 10px; font-weight: 500;
    color: var(--lilac-fg);
    opacity: 0.75;
    letter-spacing: 0.03em;
  }
  .studio-grid-cell.has-event.is-span-start { border-bottom: none; }
  .studio-grid-cell.has-event.is-span-mid   { border-top: none; border-bottom: none; }
  .studio-grid-cell.has-event.is-span-end   { border-top: none; }
  /* Continuation cells on tentative bookings still get the stripe but lose
     their dashed border in the middle so the pattern reads as one block */
  .studio-grid-cell.has-event.is-tentative.is-span-mid,
  .studio-grid-cell.has-event.is-tentative.is-span-end { border-left-style: dashed; }

  /* =============================================================
     WORK BLOCK PREVIEW MODAL
     ============================================================= */
  .wbp-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(20,17,13,0.55);
    display: flex; align-items: center; justify-content: center;
    z-index: 200;
    animation: fadeIn .15s ease;
  }
  .wbp-modal {
    background: #fff;
    border-radius: var(--r-lg);
    max-width: 880px;
    width: 92vw;
    max-height: 86vh;
    display: flex; flex-direction: column;
    box-shadow: 0 24px 60px rgba(0,0,0,0.35);
    overflow: hidden;
  }
  .wbp-head {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 18px 22px 12px;
    border-bottom: 1px solid var(--line-soft);
  }
  .wbp-head-text { flex: 1; min-width: 0; }
  .wbp-head-title {
    font-size: 17px; font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
  }
  .wbp-head-sub {
    font-size: 11.5px; color: var(--ink-light);
    margin-top: 4px;
  }
  .wbp-head-pills {
    display: flex; gap: 6px; flex-wrap: wrap;
    align-items: center;
    margin-top: 2px;
  }
  .wbp-forced {
    font-size: 10.5px;
    color: var(--ink-light);
    font-style: italic;
  }
  .wbp-creator {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    font-size: 10.5px;
    font-weight: 700;
  }
  .wbp-creator.ai    { background: #F4E2EB; color: #8B3A4F; }
  .wbp-creator.human { background: #E2EBF4; color: #3A5C8B; }
  .wbp-detail {
    padding: 8px 22px 12px;
    font-size: 13px;
    color: var(--ink-mid);
    line-height: 1.5;
    border-bottom: 1px solid var(--line-soft);
  }
  .wbp-modal-body {
    padding: 16px 22px;
    overflow-y: auto;
    flex: 1;
  }
  .wbp-cols {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 18px;
  }
  @media (max-width: 760px) { .wbp-cols { grid-template-columns: 1fr; } }
  .wbp-main { display: flex; flex-direction: column; gap: 18px; }
  .wbp-side { display: flex; flex-direction: column; gap: 14px; }

  .wbp-section { }
  .wbp-h {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-light);
    margin: 0 0 8px;
  }
  .wbp-empty { font-size: 11.5px; color: var(--ink-light); font-style: italic; padding: 4px 0; }

  .wbp-action {
    background: var(--bg);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm, 6px);
    padding: 10px 12px;
    margin-bottom: 8px;
  }
  .wbp-action.done {
    background: var(--mint-bg);
    border-left: 3px solid var(--mint-fg);
    text-decoration: line-through;
    opacity: 0.85;
  }
  .wbp-action-text { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
  .wbp-action-noteslabel {
    display: block;
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-light);
    margin-bottom: 4px;
  }
  .wbp-action-notes-input {
    width: 100%; box-sizing: border-box;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 12px;
    font-family: var(--font);
    resize: vertical;
  }
  .wbp-action-notes { font-size: 11.5px; color: var(--ink-mid); }
  .wbp-action-btns { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }

  .wbp-question {
    border-left: 3px solid var(--line);
    background: var(--bg);
    padding: 10px 14px;
    margin-bottom: 8px;
    border-radius: 0 6px 6px 0;
  }
  .wbp-question.open { border-left-color: var(--cherry); }
  .wbp-question.answered { border-left-color: var(--mint-fg); }
  .wbp-q-text { font-size: 13px; margin-bottom: 4px; }
  .wbp-q-answer {
    width: 100%; box-sizing: border-box;
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 12px;
    font-family: var(--font);
    margin: 6px 0;
  }
  .wbp-q-answer-text { font-size: 12.5px; color: var(--ink-mid); }
  .wbp-q-meta { font-size: 10.5px; color: var(--ink-light); margin-top: 4px; }

  .wbp-talk {
    width: 100%; box-sizing: border-box;
    border: 1px solid var(--line);
    border-radius: var(--r-sm, 6px);
    padding: 9px 12px;
    font-size: 12.5px;
    font-family: var(--font);
    resize: vertical;
  }

  .wbp-log {
    background: var(--bg);
    border-radius: var(--r-sm, 6px);
    padding: 4px 0;
  }
  .wbp-log-row {
    display: grid;
    grid-template-columns: 12px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 8px 14px;
    border-top: 1px solid var(--line-soft);
    font-size: 11.5px;
  }
  .wbp-log-row:first-child { border-top: none; }
  .wbp-log-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cherry-fill); }
  .wbp-log-actor { font-weight: 700; color: var(--ink); font-size: 11.5px; }
  .wbp-log-event { color: var(--ink-mid); margin-top: 2px; }
  .wbp-log-time  { color: var(--ink-light); white-space: nowrap; font-size: 10.5px; }

  .wbp-side-section {
    background: var(--bg);
    border-radius: var(--r-sm, 6px);
    padding: 12px 14px;
  }
  .wbp-side-title {
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-light);
    margin-bottom: 8px;
  }
  .wbp-file {
    padding: 6px 0;
    border-top: 1px solid var(--line-soft);
  }
  .wbp-file:first-child { border-top: none; }
  .wbp-file-name { font-size: 12px; font-weight: 600; color: var(--ink); }
  .wbp-file-source { font-size: 10.5px; color: var(--ink-light); }

  .wbp-meta-row {
    display: flex; justify-content: space-between;
    padding: 5px 0;
    font-size: 11.5px;
    color: var(--ink-mid);
  }
  .wbp-meta-row strong { color: var(--ink); }

  .wbp-done-toggle {
    margin: 10px 0;
    font-size: 11.5px;
    color: var(--ink-light);
  }
  .wbp-done-toggle summary { cursor: pointer; padding: 4px 0; }

  .wbp-foot {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 14px 22px 18px;
    border-top: 1px solid var(--line);
    background: var(--bg);
  }
  .wbp-foot-link {
    font-size: 11.5px;
    color: var(--ink-light);
    text-decoration: none;
  }
  .wbp-foot-link:hover { color: var(--cherry); }
  .wbp-foot-spacer { flex: 1; }

  /* =============================================================
     EPISODE POPUP (Wave 14 - Squarespace-style left-nav modal)
     Structure:
       .ep-modal
         .ep-modal-head           (full-width top strip + close X)
         .ep-modal-split          (grid: nav | right)
           .ep-modal-nav          (full-height grey, no white cards
                                   except the active one)
           .ep-modal-right        (column: pane → foot)
             .ep-modal-pane
             .ep-modal-foot
     ============================================================= */
  @keyframes epModalIn {
    from { opacity: 0; transform: scale(0.97) translateY(4px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
  }
  .ep-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(20, 16, 18, 0.55);
    z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    overflow: auto;
  }
  .ep-modal {
    background: #fff;
    border-radius: 14px;
    width: min(960px, 100%);
    max-height: calc(100vh - 48px);
    display: flex; flex-direction: column;
    box-shadow: 0 12px 48px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.08);
    overflow: hidden;
    animation: epModalIn 200ms cubic-bezier(0.16,1,0.3,1) forwards;
  }
  /* Top strip - full width, sits ABOVE the left/right split */
  .ep-modal-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 22px 28px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    flex-shrink: 0;
  }
  .ep-modal-head-text { display: flex; flex-direction: column; gap: 6px; }
  .ep-modal-eyebrow {
    font-size: 11px; font-weight: 700; color: var(--grey-mid);
    text-transform: uppercase; letter-spacing: 0.08em;
  }
  .ep-modal-title { font-size: 22px; font-weight: 700; color: #1d1d1f; line-height: 1.1; }
  .ep-modal-close {
    width: 30px; height: 30px;
    border-radius: 50%; border: none;
    background: #f0f0f2;
    color: var(--g-ink-3);
    font-size: 18px; line-height: 1;
    cursor: pointer;
    display: grid; place-items: center;
    transition: background .12s, color .12s;
  }
  .ep-modal-close:hover { background: var(--grey-line); color: #1d1d1f; }

  /* Split row - nav fills its full height (down to modal bottom) */
  .ep-modal-split {
    display: grid;
    grid-template-columns: 220px 1fr;
    flex: 1 1 auto;
    min-height: 0;
  }
  .ep-modal-nav {
    background: #f5f5f7;
    border-right: 1px solid rgba(0,0,0,0.08);
    padding: 16px 12px;
    display: flex; flex-direction: column; gap: 4px;
    overflow-y: auto;
  }
  /* Inactive item - NO background, just icon + label on the grey */
  .ep-modal-navitem {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: var(--font);
    font-size: 14px;
    color: #1d1d1f;
    text-align: left;
    transition: background .12s, box-shadow .12s;
  }
  .ep-modal-navitem:hover { background: rgba(0,0,0,0.04); }
  /* Active item - raised white card with shadow */
  .ep-modal-navitem.active {
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.05);
    font-weight: 700;
  }
  .ep-modal-navicon {
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border-radius: var(--r-sm);
    background: var(--grey-line);
    color: var(--g-ink-3);
    font-size: 13px;
    flex-shrink: 0;
  }
  .ep-modal-navitem.active .ep-modal-navicon {
    background: var(--cherry-fill);
    color: var(--on-accent);
  }
  /* Wave 30 - locked sections: greyed, not interactive */
  .ep-modal-navitem.locked {
    cursor: not-allowed;
    opacity: 0.45;
  }
  .ep-modal-navitem.locked:hover { background: transparent; }
  .ep-modal-navitem.locked .ep-modal-navicon {
    background: var(--grey-line);
    color: var(--grey-mid);
  }
  .ep-modal-navitem.locked .ep-modal-navicon i { width: 14px; height: 14px; }
  .ep-modal-navlabel { flex: 1; }

  /* Right column - pane (form) + footer */
  .ep-modal-right {
    display: flex; flex-direction: column;
    min-width: 0;
    min-height: 0;
  }
  .ep-modal-pane {
    padding: 24px 28px;
    overflow-y: auto;
    flex: 1 1 auto;
  }
  .ep-pane-section { display: flex; flex-direction: column; gap: 18px; }
  .ep-pane-eyebrow {
    font-size: 11px; font-weight: 700; color: var(--grey-mid);
    text-transform: uppercase; letter-spacing: 0.08em;
    margin-bottom: 4px;
  }
  .ep-pane-divider {
    border: none; border-top: 1px solid rgba(0,0,0,0.08);
    margin: 24px 0;
  }
  .ep-field { display: flex; flex-direction: column; gap: 8px; }
  .ep-field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
  .ep-field-label {
    font-size: 11px; font-weight: 700;
    color: var(--grey-mid);
    text-transform: uppercase; letter-spacing: 0.06em;
  }
  .ep-field-hint {
    font-size: 11.5px; color: var(--grey-mid);
    margin-top: -2px;
  }
  .ep-modal .form-input {
    background: #fdfbf6;
    border: 1px solid var(--grey-line);
    border-radius: var(--r-sm);
    padding: 11px 14px;
    font-size: 14px;
    font-family: var(--font);
    color: #1d1d1f;
    width: 100%;
  }
  .ep-modal .form-input:focus {
    outline: none;
    border-color: var(--cherry);
    background: #fff;
  }

  /* iOS-style toggle (replaces the old checkbox) */
  .ep-toggle-field {
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 4px 0;
  }
  .ep-toggle-text { display: flex; flex-direction: column; gap: 2px; }
  .ep-toggle-label { font-size: 14px; font-weight: 600; color: #1d1d1f; }
  .ep-toggle-sub   { font-size: 12px; color: var(--grey-mid); }
  .ep-toggle {
    position: relative;
    display: inline-block;
    width: 44px; height: 26px;
    flex-shrink: 0;
  }
  .ep-toggle input { opacity: 0; width: 0; height: 0; }
  .ep-toggle-slider {
    position: absolute; inset: 0;
    background: var(--grey-line);
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: background .18s;
  }
  .ep-toggle-slider::before {
    content: '';
    position: absolute;
    left: 3px; top: 3px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
    transition: transform .18s;
  }
  .ep-toggle input:checked + .ep-toggle-slider { background: var(--cherry-fill); }
  .ep-toggle input:checked + .ep-toggle-slider::before { transform: translateX(18px); }

  /* Footer - inside the right column, with its own divider above */
  .ep-modal-foot {
    padding: 18px 28px 22px;
    border-top: 1px solid rgba(0,0,0,0.08);
    display: flex; flex-direction: column; gap: 10px;
    flex-shrink: 0;
  }
  .ep-modal-save, .ep-modal-cancel {
    width: 100%; padding: 14px;
    font-size: 15px; font-weight: 600;
    font-family: var(--font);
    border-radius: var(--r-pill);
    border: none;
    cursor: pointer;
    transition: background .12s;
  }
  .ep-modal-save  { background: var(--cherry-fill); color: var(--on-accent); }
  .ep-modal-save:hover { background: var(--cherry-deep, var(--cherry-deep)); }
  .ep-modal-cancel { background: #f0f0f2; color: #1d1d1f; }
  .ep-modal-cancel:hover { background: var(--grey-line); }
  .ep-modal-foot-links {
    margin-top: 6px;
    display: flex; justify-content: center; gap: 28px;
  }
  .ep-modal-link {
    background: none; border: none;
    color: #1d1d1f;
    font-family: var(--font);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    padding: 6px 4px;
  }
  .ep-modal-link:hover { color: var(--cherry); }
  .ep-modal-link.danger { color: var(--cherry); }
  .ep-modal-link.danger:hover { color: var(--cherry-deep, var(--cherry-deep)); }

  /* Guest autocomplete */
  .ga-wrap { position: relative; }
  .ga-list {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    box-shadow: 0 12px 30px rgba(0,0,0,0.10);
    max-height: 280px;
    overflow-y: auto;
    z-index: 10;
    padding: 4px;
  }
  .ga-opt {
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background .12s;
  }
  .ga-opt:hover, .ga-opt.active { background: var(--bg); }
  .ga-opt-name { font-size: 13px; color: var(--ink); font-weight: 600; }
  .ga-opt-meta { font-size: 11px; color: var(--ink-light); margin-top: 2px; }
  .ga-opt-create { border-top: 1px dashed var(--line-soft); margin-top: 4px; padding-top: 10px; }
  .ga-opt-create .ga-opt-name { color: var(--cherry); }

  /* Topic pills */
  .tp-wrap {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    background: #fdfbf9;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 8px 10px;
    cursor: text;
  }
  .tp-wrap:focus-within { border-color: var(--cherry); background: var(--apl-paper); }
  .tp-pills { display: contents; }
  .tp-pill {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--cherry-bg, #fde6eb);
    color: var(--cherry);
    border-radius: var(--r-pill);
    padding: 3px 4px 3px 10px;
    font-size: 12px;
    font-weight: 600;
  }
  .tp-pill-x {
    width: 18px; height: 18px;
    border-radius: 50%;
    border: none;
    background: rgba(184, 0, 43, 0.12);
    color: var(--cherry);
    font-size: 13px; line-height: 1;
    cursor: pointer;
    display: grid; place-items: center;
  }
  .tp-pill-x:hover { background: var(--cherry-fill); color: var(--on-accent); }
  .tp-input {
    flex: 1; min-width: 100px;
    border: none; outline: none; background: transparent;
    font-size: 13px;
    font-family: var(--font);
    color: var(--ink);
    padding: 2px 4px;
  }

  /* =============================================================
     EPISODE POPUP - Wave 15 designer pass
     Section cards, segmented control, progress strip
     ============================================================= */
  .ep-progress {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 22px;
    padding: 4px 2px;
  }
  .ep-progress-step {
    display: flex; align-items: center; gap: 8px;
    flex-shrink: 0;
  }
  .ep-progress-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: rgba(0,0,0,0.08);
    flex-shrink: 0;
    transition: background .18s, box-shadow .18s, transform .18s;
  }
  .ep-progress-label {
    font-size: 11px; font-weight: 600;
    color: var(--ink-light);
    text-transform: uppercase; letter-spacing: 0.06em;
  }
  .ep-progress-step.done .ep-progress-dot {
    background: var(--cherry-fill);
  }
  .ep-progress-step.active .ep-progress-dot {
    background: var(--cherry-fill);
    box-shadow: 0 0 0 4px rgba(184,0,43,0.12);
    transform: scale(1.08);
  }
  .ep-progress-step.active .ep-progress-label,
  .ep-progress-step.done   .ep-progress-label {
    color: var(--ink);
  }
  .ep-progress-bar {
    flex: 1; min-width: 16px;
    height: 2px;
    background: rgba(0,0,0,0.08);
    border-radius: 1px;
    transition: background .18s;
  }
  .ep-progress-bar.done { background: var(--cherry-fill); }

  .ep-card {
    background: var(--g-surface);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: var(--r);
    margin-bottom: 18px;
    overflow: hidden;
  }
  .ep-card-head {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 18px 12px;
  }
  .ep-card-icon {
    width: 32px; height: 32px;
    border-radius: var(--r-sm);
    display: grid; place-items: center;
    background: var(--cherry-bg, #fde6eb);
    color: var(--cherry);
    font-size: 14px;
    flex-shrink: 0;
  }
  .ep-card-title { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.2; }
  .ep-card-sub   { font-size: 12px; color: var(--ink-light); margin-top: 2px; }
  .ep-card-body {
    padding: 4px 18px 18px;
    display: flex; flex-direction: column; gap: 14px;
  }
  .ep-card-subhead {
    font-size: 10.5px; font-weight: 700; color: var(--ink-light);
    text-transform: uppercase; letter-spacing: 0.08em;
    margin: 14px 0 4px;
    padding-top: 14px;
    border-top: 1px solid rgba(0,0,0,0.06);
  }

  /* Segmented control - Pitch / Booked */
  .ep-seg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .ep-seg-opt {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    padding: 14px 16px;
    background: #fdfbf6;
    border: 1.5px solid var(--grey-line);
    border-radius: 10px;
    cursor: pointer;
    font-family: var(--font);
    text-align: left;
    transition: border-color .12s, background .12s, box-shadow .12s;
  }
  .ep-seg-opt:hover { border-color: var(--cherry-mid, #d49baa); }
  .ep-seg-opt.active {
    border-color: var(--cherry);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(184,0,43,0.08);
  }
  .ep-seg-mark {
    font-size: 14px;
    color: var(--ink-light);
  }
  .ep-seg-opt.active .ep-seg-mark { color: var(--cherry); }
  .ep-seg-label { font-size: 14px; font-weight: 700; color: var(--ink); }
  .ep-seg-sub   { font-size: 11.5px; color: var(--ink-light); }
  .ep-seg-opt.active .ep-seg-label { color: var(--cherry); }

  .ep-booked-block {
    display: flex; flex-direction: column; gap: 14px;
  }

  /* =============================================================
     EPISODE CENTRE (full page) - Wave 15 designer pass
     Hero with avatar + status + topics + quick stats,
     stage tracker, pill tabs, iconed pane cards.
     ============================================================= */
  /* Compact hero - single horizontal row */
  .ec-hero {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 14px;
    display: flex; align-items: center; gap: 14px;
  }
  .ec-hero-avatar {
    width: 44px; height: 44px;
    border-radius: var(--r);
    background: linear-gradient(135deg, var(--cherry) 0%, var(--cherry-deep, var(--cherry-deep)) 100%);
    color: var(--on-accent);
    display: grid; place-items: center;
    font-size: 18px; font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(184,0,43,0.18);
  }
  .ec-hero-text { flex: 1; min-width: 0; }
  .ec-hero-eyebrow {
    font-size: 10px; font-weight: 700; color: var(--ink-light);
    text-transform: uppercase; letter-spacing: 0.1em;
    line-height: 1;
  }
  .ec-hero-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin-top: 4px;
  }
  .ec-hero-title {
    font-size: 18px; font-weight: 700; color: var(--ink);
    line-height: 1.2;
    letter-spacing: -0.005em;
  }
  .ec-hero-subtitle {
    font-size: 12.5px; color: var(--ink-light);
    margin-top: 2px;
  }
  .ec-hero-status {
    background: var(--cherry-fill); color: var(--on-accent);
    padding: 2px 10px; border-radius: var(--r-pill);
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
  }
  .ec-hero-topic {
    background: var(--cherry-bg, #fde6eb); color: var(--cherry);
    padding: 2px 9px; border-radius: var(--r-pill);
    font-size: 11px; font-weight: 600;
  }
  .ec-hero-actions {
    display: flex; gap: 6px; align-items: center;
    flex-shrink: 0;
  }
  /* Backwards-compatibility: previously the hero rendered with .ec-hero-main */
  .ec-hero-main { display: contents; }

  /* Merged tracker + nav - six clickable steps including Released */
  .ec-tracker {
    display: flex; align-items: flex-start; gap: 4px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 14px;
    padding: 16px 20px;
    margin-bottom: 14px;
    overflow-x: auto;
  }
  .ec-tracker-step {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    flex-shrink: 0;
    min-width: 76px;
    background: transparent;
    border: none;
    padding: 4px 6px;
    font-family: var(--font);
    border-radius: var(--r-sm);
    transition: background .12s;
  }
  .ec-tracker-step.clickable { cursor: pointer; }
  .ec-tracker-step.clickable:hover { background: rgba(184,0,43,0.04); }
  .ec-tracker-step.locked { cursor: not-allowed; opacity: 0.48; }
  /* Wave 30 - lock icon on locked tracker steps */
  .ec-tracker-lock {
    width: 11px; height: 11px;
    color: var(--ink-light);
    margin-top: -2px;
  }
  .ec-tracker-dot {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: rgba(0,0,0,0.12);
    flex-shrink: 0;
    border: 2px solid transparent;
    transition: background .18s, box-shadow .18s, transform .18s, border-color .18s;
  }
  .ec-tracker-step.done .ec-tracker-dot    { background: var(--cherry-fill); }
  .ec-tracker-step.current .ec-tracker-dot {
    background: var(--cherry-fill);
    box-shadow: 0 0 0 5px rgba(184,0,43,0.12);
    transform: scale(1.1);
  }
  /* Active = currently-viewed tab (separate from "current stage") */
  .ec-tracker-step.selected .ec-tracker-dot {
    border-color: var(--cherry);
    background: #fff;
  }
  .ec-tracker-step.selected.done    .ec-tracker-dot,
  .ec-tracker-step.selected.current .ec-tracker-dot {
    background: var(--cherry-fill);
    border-color: var(--cherry);
  }
  .ec-tracker-label {
    font-size: 11px; font-weight: 600;
    color: var(--ink-light);
    text-transform: uppercase; letter-spacing: 0.06em;
    white-space: nowrap;
  }
  .ec-tracker-step.current .ec-tracker-label,
  .ec-tracker-step.done    .ec-tracker-label,
  .ec-tracker-step.selected .ec-tracker-label { color: var(--ink); }
  .ec-tracker-step.selected .ec-tracker-label { color: var(--cherry); font-weight: 700; }
  .ec-tracker-bar {
    flex: 1; min-width: 24px;
    height: 2px;
    background: rgba(0,0,0,0.1);
    border-radius: 1px;
    margin-top: 10px;   /* aligns with dot row, not labels */
    transition: background .18s;
  }
  .ec-tracker-bar.done { background: var(--cherry-fill); }

  /* Pane cards (one per tab) */
  .ec-pane-wrap { display: flex; flex-direction: column; gap: 16px; }
  .ec-pane-card {
    background: var(--g-surface);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: var(--r-lg);
    overflow: hidden;
  }
  .ec-pane-head {
    display: flex; align-items: center; gap: 14px;
    padding: 20px 24px 14px;
  }
  .ec-pane-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--cherry-bg, #fde6eb);
    color: var(--cherry);
    display: grid; place-items: center;
    font-size: 16px;
    flex-shrink: 0;
  }
  .ec-pane-title { font-size: 18px; font-weight: 700; color: var(--ink); line-height: 1.2; }
  .ec-pane-sub   { font-size: 12.5px; color: var(--ink-light); margin-top: 2px; }
  .ec-pane-body {
    padding: 8px 24px 22px;
    display: flex; flex-direction: column;
  }
  .ec-pane-empty {
    padding: 14px 16px;
    color: var(--ink-light);
    font-style: italic;
    font-size: 13px;
    background: var(--bg);
    border-radius: 10px;
    margin-top: 6px;
  }

  .ec-detail {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 18px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    align-items: start;
  }
  .ec-detail:last-child { border-bottom: none; }
  .ec-detail-label {
    font-size: 11px; font-weight: 700; color: var(--ink-light);
    text-transform: uppercase; letter-spacing: 0.06em;
    padding-top: 4px;
  }
  .ec-detail-value { color: var(--ink); font-size: 14px; line-height: 1.5; }
  .ec-prose { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink); white-space: pre-wrap; }
  .ec-yes { color: var(--mint-fg); font-weight: 600; }
  .ec-no  { color: var(--ink-light); font-style: italic; }
  .ec-link { color: var(--cherry); text-decoration: none; font-weight: 600; word-break: break-all; }
  .ec-link:hover { text-decoration: underline; }

  /* Edit progress meter */
  .ec-meter {
    display: inline-block;
    width: 220px; height: 8px;
    background: rgba(0,0,0,0.06);
    border-radius: var(--r-pill);
    overflow: hidden;
    vertical-align: middle;
    margin-right: 10px;
  }
  .ec-meter-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--cherry), var(--cherry-deep, var(--cherry-deep)));
    border-radius: var(--r-pill);
  }
  .ec-meter-text { font-size: 13px; font-weight: 700; color: var(--cherry); }

  /* ─── Show prep section (Booked tab only) ─────────────────── */
  .sp-card { margin-top: 16px; }
  /* Wave 28 - inside the Booked two-column split the .ec-booked-main
     column owns its own gap; the legacy margin pushed the show prep
     down out of alignment with the guest dossier. Zero it there. */
  .ec-booked-main .sp-card,
  .ec-booked-side .ec-pane-card { margin-top: 0; }
  .sp-empty {
    padding: 18px;
    color: var(--ink-light);
    font-size: 13.5px;
    line-height: 1.5;
    background: var(--bg);
    border-radius: 10px;
  }
  @keyframes spPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.6; transform: scale(1.06); }
  }
  .sp-icon-pulse { animation: spPulse 1.6s ease-in-out infinite; }
  .sp-running { padding: 4px 0 8px; }
  @keyframes spShimmer {
    0%   { background-position: -200px 0; }
    100% { background-position: 200px 0; }
  }
  .sp-skel {
    height: 14px;
    margin: 8px 0;
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(0,0,0,0.05) 25%, rgba(0,0,0,0.08) 50%, rgba(0,0,0,0.05) 75%);
    background-size: 400px 100%;
    animation: spShimmer 1.4s ease-in-out infinite;
  }

  .sp-body { display: flex; flex-direction: column; gap: 22px; }

  .sp-opener {
    background: linear-gradient(135deg, var(--lilac, #ece7f7) 0%, #f6f1fb 100%);
    border: 1px solid rgba(102, 73, 167, 0.18);
    border-radius: 14px;
    padding: 18px 22px;
  }
  .sp-opener-eyebrow {
    font-size: 11px; font-weight: 700;
    color: var(--lilac-fg);
    letter-spacing: 0.1em;
    margin-bottom: 8px;
  }
  .sp-opener-text {
    font-size: 18px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.45;
    letter-spacing: -0.005em;
  }

  .sp-arc { padding: 0 4px; }
  .sp-eyebrow {
    font-size: 11px; font-weight: 700; color: var(--ink-light);
    text-transform: uppercase; letter-spacing: 0.08em;
  }

  .sp-sections { display: flex; flex-direction: column; gap: 18px; }
  .sp-section {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: var(--r);
    padding: 16px 18px;
  }
  .sp-section.big {
    border-color: var(--cherry);
    box-shadow: 0 0 0 3px rgba(184,0,43,0.06);
  }
  .sp-section-head {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 12px;
  }
  .sp-section-num {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--bg);
    color: var(--ink-light);
    display: grid; place-items: center;
    font-size: 12px; font-weight: 700;
    flex-shrink: 0;
  }
  .sp-section.big .sp-section-num {
    background: var(--cherry-fill);
    color: var(--on-accent);
  }
  .sp-section-title {
    font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.3;
    flex: 1;
  }
  .sp-big-tag {
    background: var(--cherry-fill); color: var(--on-accent);
    padding: 2px 8px; border-radius: var(--r-pill);
    font-size: 9.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    margin-left: 4px;
    vertical-align: 2px;
  }

  .sp-questions {
    list-style: none;
    padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 4px;
  }
  .sp-q {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink);
    transition: background .12s;
  }
  .sp-q:hover { background: var(--bg); }
  .sp-q.big {
    background: linear-gradient(90deg, rgba(184,0,43,0.04), transparent);
    border-left: 3px solid var(--cherry);
    padding-left: 10px;
    font-weight: 600;
  }
  .sp-star {
    color: var(--cherry);
    font-size: 14px;
    line-height: 1.5;
    flex-shrink: 0;
  }
  .sp-q-text { flex: 1; }

  /* ─── Show prep v2: act-based render (Rupert Lowe style) ─── */
  .sp-opener-followups {
    list-style: none;
    margin: 18px 0 0; padding: 14px 0 0;
    border-top: 1px solid rgba(184,0,43,0.18);
  }
  .sp-opener-followups li {
    font-size: 13.5px;
    color: var(--ink-mid, var(--ink-light));
    line-height: 1.55;
    margin: 6px 0;
    padding-left: 20px;
    position: relative;
  }
  .sp-opener-followups li::before {
    content: '•';
    color: var(--cherry);
    font-weight: 700;
    position: absolute;
    left: 4px;
  }

  .sp-acts { display: flex; flex-direction: column; gap: 28px; }
  .sp-act {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 14px;
    padding: 20px 22px;
  }
  .sp-act-head {
    display: flex; align-items: baseline; gap: 14px;
    margin-bottom: 6px;
  }
  .sp-act-num {
    font-size: 11px; font-weight: 800;
    color: var(--cherry);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    flex-shrink: 0;
  }
  .sp-act-title {
    font-size: 18px; font-weight: 800;
    color: var(--ink); line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: -0.005em;
  }
  .sp-act-rule {
    height: 2px;
    width: 48px;
    background: var(--cherry-fill);
    border-radius: 1px;
    margin-bottom: 18px;
  }

  .sp-block { margin: 18px 0 0; }
  .sp-block:first-child { margin-top: 0; }
  .sp-block-label {
    font-size: 10.5px; font-weight: 800;
    color: var(--ink-light);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .sp-block-label.big { color: var(--cherry); }

  .sp-big-q {
    background: linear-gradient(135deg, #fde6eb 0%, #fceff3 100%);
    border-left: 4px solid var(--cherry);
    border-radius: 0 10px 10px 0;
    padding: 14px 18px;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.5;
  }
  .sp-big-q::before { content: '\\201C'; }
  .sp-big-q::after  { content: '\\201D'; }

  .sp-followups {
    list-style: none;
    margin: 0; padding: 0;
  }
  .sp-followups li {
    position: relative;
    padding: 6px 0 6px 22px;
    font-size: 14px;
    color: var(--ink);
    line-height: 1.55;
  }
  .sp-followups li::before {
    content: '•';
    color: var(--cherry);
    font-weight: 700;
    position: absolute;
    left: 6px;
  }

  .sp-tough {
    background: var(--bg);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 10px;
    padding: 14px 18px;
  }
  .sp-tough-from {
    font-size: 11px; font-weight: 800;
    color: var(--ink-light);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .sp-tough-from .accent { color: var(--cherry); }
  .sp-tough-setup {
    list-style: none;
    margin: 0; padding: 0;
  }
  .sp-tough-setup li {
    position: relative;
    padding: 4px 0 4px 22px;
    font-size: 13.5px;
    color: var(--ink-mid, var(--ink));
    line-height: 1.5;
  }
  .sp-tough-setup li::before {
    content: '•';
    color: var(--ink-light);
    position: absolute;
    left: 8px;
  }
  .sp-tough-question {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(0,0,0,0.1);
    font-size: 14px;
    font-weight: 600;
    font-style: italic;
    color: var(--ink);
  }
  .sp-tough-question::before { content: '\\201C'; }
  .sp-tough-question::after  { content: '\\201D'; }

  .sp-final-tough {
    margin-top: 12px;
    padding-top: 26px;
    border-top: 2px solid var(--cherry);
  }
  .sp-final-tough-label {
    font-size: 12px; font-weight: 800;
    color: var(--cherry);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 14px;
  }
  .sp-final-tough-framing {
    list-style: none;
    padding: 0; margin: 0 0 14px;
  }
  .sp-final-tough-framing li {
    font-size: 13px;
    color: var(--ink-light);
    line-height: 1.6;
    padding-left: 20px;
    position: relative;
  }
  .sp-final-tough-framing li::before {
    content: '•';
    color: var(--cherry);
    position: absolute;
    left: 4px;
  }
  .sp-final-tough-text {
    background: linear-gradient(135deg, #fffaf2 0%, #fdf5ea 100%);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: var(--r);
    padding: 18px 22px;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.55;
    white-space: pre-wrap;
  }

  /* Feedback panel */
  .sp-feedback {
    margin-top: 28px;
    padding: 18px 20px;
    background: var(--bg);
    border: 1px dashed rgba(0,0,0,0.12);
    border-radius: var(--r);
  }
  .sp-feedback-head { margin-bottom: 10px; }
  .sp-feedback-sub {
    font-size: 12px;
    color: var(--ink-light);
    margin-top: 2px;
  }
  .sp-feedback-input {
    width: 100%;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: var(--r-sm);
    padding: 10px 12px;
    font-family: var(--font);
    font-size: 13px;
    color: var(--ink);
    resize: vertical;
  }
  .sp-feedback-input:focus {
    outline: none;
    border-color: var(--cherry);
  }
  .sp-feedback-actions {
    display: flex; justify-content: flex-end;
    margin-top: 10px;
  }

  /* Mobile */
  @media (max-width: 760px) {
    .ec-hero-main { flex-wrap: wrap; }
    .ec-hero-actions { width: 100%; }
    .ec-detail { grid-template-columns: 1fr; gap: 4px; }
  }

  /* Narrow mobile: stack the modal body */
  @media (max-width: 760px) {
    .ep-modal-body { grid-template-columns: 1fr; }
    .ep-modal-nav  { border-right: none; border-bottom: 1px solid var(--line-soft); flex-direction: row; overflow-x: auto; padding: 12px; }
    .ep-modal-navitem { flex-shrink: 0; }
    .ec-row { grid-template-columns: 1fr; gap: 2px; }
  }

  /* =============================================================
     EMPTY / SCROLLBAR
     ============================================================= */
  .empty { padding: 40px; text-align: center; color: var(--muted); font-style: italic; }
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--cherry-mid); }

  /* =============================================================
     WAVE 20 - Canonical design tokens
     Adopted after the 7-item design audit. These are the single
     source of truth for eyebrows, pills, buttons, modals. New
     code uses these; older code gets aligned to them over time.
     ============================================================= */

  /* ─ Eyebrow (Item 05) ─────────────────────────────────────── */
  /* One token: 11px / 700 / uppercase / 0.1em / ink-light. */
  .eyebrow {
    font-family: var(--font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-light);
    line-height: 1.2;
  }
  .eyebrow.on-cherry { color: var(--cherry); }
  /* Align existing section-head h2 to the canonical eyebrow values */
  .section-head h2 {
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--ink-light);
  }

  /* ─ Pills (Item 02) ───────────────────────────────────────── */
  /* Two canonical variants. Solid for primary status of an object.
     Soft for categories, topics, counts. Same shape, same height. */
  .pill-solid, .pill-soft {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    font-family: var(--font);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: none;
    white-space: nowrap;
  }
  .pill-solid                  { background: var(--cherry-fill);    color: var(--on-accent); }
  .pill-solid.tone-mint        { background: var(--mint-fg); color: var(--on-accent); }
  .pill-solid.tone-sky         { background: var(--sky-fg); color: var(--on-accent); }
  .pill-solid.tone-butter      { background: var(--butter-fg); color: var(--on-accent); }
  .pill-solid.tone-ink         { background: var(--ink);       color: var(--on-accent); }
  .pill-soft                   { background: var(--cherry-bg, #fde6eb); color: var(--cherry); text-transform: none; font-weight: 600; letter-spacing: 0; font-size: 11.5px; padding: 3px 9px; }
  .pill-soft.tone-lilac        { background: var(--lilac, #ece7f7); color: var(--lilac-fg); }
  .pill-soft.tone-mint         { background: var(--mint); color: var(--mint-fg); }
  .pill-soft.tone-butter       { background: var(--butter, #fff3d6); color: var(--butter-fg); }
  .pill-soft.tone-sky          { background: var(--sky, #e3edf5); color: var(--sky-fg); }
  .pill-soft.tone-ink          { background: rgba(0,0,0,0.06); color: var(--ink); }

  /* ─ Buttons (Item 07) ─────────────────────────────────────── */
  /* .btn-block stretches any global button to full container width.
     The bespoke .ep-modal-save / .ep-modal-cancel classes are
     re-aliased below to the global system rather than re-implementing. */
  .btn-block {
    width: 100%;
    padding: 12px 20px;
    font-size: 14px;
    justify-content: center;
  }
  /* Re-alias the bespoke episode-popup buttons to use the global
     classes' visual definitions. Markup keeps the old class names
     for back-compat but they now resolve to the global look. */
  .ep-modal-save {
    background: var(--cherry-fill); color: var(--on-accent);
    border: none; cursor: pointer;
    font-family: var(--font); font-size: 14px; font-weight: 600;
    padding: 12px 20px; border-radius: var(--r-pill);
    width: 100%; line-height: 1.4;
  }
  .ep-modal-save:hover { background: var(--cherry-deep, var(--cherry-deep)); }
  .ep-modal-cancel {
    background: var(--card, #fff); color: var(--ink);
    border: 1px solid var(--line);
    cursor: pointer;
    font-family: var(--font); font-size: 14px; font-weight: 600;
    padding: 12px 20px; border-radius: var(--r-pill);
    width: 100%; line-height: 1.4;
  }
  .ep-modal-cancel:hover { background: var(--bg); }

  /* ─ Modal (Item 01) - canonical look applied across all systems ─ */
  /* The episode popup's shape is the standard. The two older modal
     systems (.aiceo-modal, .wbp-) get their visual properties
     overridden here to match without touching their markup. */
  .aiceo-modal-overlay,
  .wbp-modal-overlay {
    background: rgba(20, 16, 18, 0.55);
  }
  .aiceo-modal,
  .wbp-modal {
    border-radius: 14px !important;
    box-shadow: 0 12px 48px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.06) !important;
    border: 1px solid rgba(0,0,0,0.08);
    overflow: hidden;
  }
  .aiceo-modal-close,
  .wbp-modal-close,
  .wbp-close {
    width: 30px !important; height: 30px !important;
    border-radius: 50% !important;
    background: #f0f0f2 !important;
    color: var(--g-ink-3) !important;
    border: none !important;
    font-size: 18px !important;
    display: grid; place-items: center;
    cursor: pointer;
    transition: background .12s, color .12s;
  }
  .aiceo-modal-close:hover,
  .wbp-modal-close:hover,
  .wbp-close:hover { background: var(--grey-line) !important; color: #1d1d1f !important; }
  .aiceo-modal-foot,
  .wbp-foot {
    border-top: 1px solid rgba(0,0,0,0.08) !important;
  }

  /* ─ Cherry restraint (Item 04) ────────────────────────────── */
  /* Demote cherry on accessory surfaces. Cherry stays on:
       primary button, sidebar active, page-hero status pill,
       current-stage tracker dot. Everywhere else, neutralise. */
  .ec-hero-eyebrow                    { color: var(--ink-light); }
  .ec-hero-topic {
    background: rgba(0,0,0,0.06);
    color: var(--ink);
  }
  .ec-tracker-step.selected .ec-tracker-label { color: var(--ink); }
  .sp-act-num                         { color: var(--ink-light); }
  .sp-block-label.big                 { color: var(--ink); }
  .sp-section.big                     { border-color: rgba(0,0,0,0.08); box-shadow: none; }
  .sp-section.big .sp-section-num     { background: var(--ink); color: var(--on-accent); }
  .sp-big-tag                         { background: var(--ink); color: var(--on-accent); }
  .sp-q.big {
    background: linear-gradient(90deg, rgba(0,0,0,0.03), transparent);
    border-left-color: var(--ink);
  }
  .sp-star                            { color: var(--ink); }

  /* ─ Episode Centre - thin context strip (Item 06) ─────────── */
  /* Replaces .ec-hero-compact with a single 44px bar beneath the
     universal page hero. Only one hero per page. */
  .ec-strip {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: var(--r-pill);
    padding: 8px 16px;
    margin-bottom: 14px;
    display: flex; align-items: center; gap: 10px;
    font-size: 13px;
    flex-wrap: wrap;
  }
  .ec-strip-num   { font-weight: 700; color: var(--ink); }
  .ec-strip-name  { font-weight: 700; color: var(--ink); }
  .ec-strip-sub   { color: var(--ink-light); font-size: 12px; }
  .ec-strip-sep   { color: var(--ink-light); }
  .ec-strip-actions { margin-left: auto; display: flex; gap: 6px; align-items: center; }
  .ec-strip-actions .btn-ghost,
  .ec-strip-actions .btn-secondary { padding: 5px 12px; font-size: 12px; }

  /* ─ Icons (Item 03) - Lucide loaded via /index.html ───────── */
  /* Lucide icons render as <i data-lucide="name"> tags + script call.
     The icon container styling matches what the Unicode glyphs used
     so existing layouts don't shift. */
  [data-lucide] {
    width: 14px; height: 14px;
    stroke-width: 2;
    display: inline-block;
    vertical-align: middle;
  }
  .icon-tile {
    width: 28px; height: 28px;
    border-radius: var(--r-sm);
    display: grid; place-items: center;
    background: rgba(0,0,0,0.05);
    color: var(--ink-light);
    flex-shrink: 0;
  }
  .icon-tile.active {
    background: var(--cherry-fill);
    color: var(--on-accent);
  }
  .icon-tile[data-lucide],
  .icon-tile svg { width: 28px; height: 28px; }
  .icon-tile svg { width: 14px; height: 14px; }

  /* =============================================================
     WAVE 21 - Phase 1 enforcement sweep.
     The canonical pill / eyebrow tokens were added in Wave 20 but
     the old pill-like classes (.kanban-card-pill, .ec-hero-status,
     .finding-status, .ep-tab-badge, .sp-big-tag, etc.) kept their
     original shapes. This block forces them all onto the canonical
     pill geometry while preserving each one's colour intent.
     ============================================================= */

  /* Solid-variant geometry (uppercase, 10px, 0.08em tracking) */
  .ec-hero-status,
  .finding-status,
  .sp-big-tag {
    padding: 3px 10px !important;
    border-radius: var(--r-pill) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    line-height: 1.5 !important;
    border: none !important;
  }
  /* Soft-variant geometry (sentence-case, 11.5px, no tracking) */
  .kanban-card-pill,
  .ec-hero-topic,
  .ep-tab-badge,
  .ga-opt-meta-pill {
    padding: 3px 9px !important;
    border-radius: var(--r-pill) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 1.5 !important;
    border: none !important;
  }

  /* Canonical eyebrow enforcement - every eyebrow micro-pattern
     on the site now matches the .eyebrow token defined in Wave 20. */
  .ec-eyebrow,
  .ec-hero-eyebrow,
  .ec-pane-eyebrow,
  .ec-pane-card .ec-pane-sub,
  .sp-eyebrow,
  .sp-opener-eyebrow,
  .sp-block-label,
  .sp-final-tough-label,
  .ep-modal-eyebrow,
  .ep-pane-eyebrow,
  .ep-card-sub,
  .ep-field-label,
  .wbp-eyebrow {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
  }
  .ec-pane-card .ec-pane-sub,
  .ep-card-sub { text-transform: none !important; letter-spacing: 0 !important; font-weight: 500 !important; }

  /* Cherry restraint enforcement - eyebrows + card actions that
     don't carry primary brand weight. Cherry stays on btn-primary,
     sidebar active, page-hero status pill, current-stage dot. */
  .sp-opener-eyebrow      { color: var(--ink) !important; }
  .sp-final-tough-label   { color: var(--ink) !important; }
  .sp-act-num             { color: var(--ink-light) !important; }
  .sp-act-rule            { background: var(--ink) !important; }
  .ec-eyebrow             { color: var(--ink-light) !important; }
  .ec-hero-eyebrow        { color: var(--ink-light) !important; }
  .ec-pane-icon           { background: rgba(0,0,0,0.05) !important; color: var(--ink) !important; }
  .ec-pane-card .ec-pane-icon[style*="lilac"] { background: var(--lilac) !important; color: var(--lilac-fg) !important; }

  /* =============================================================
     WAVE 21 - Empty-state component (Phase 2 item #12)
     Single canonical empty-state. Use anywhere a list / table /
     chart has no data. Variants: .empty-state, .empty-state-sm.
     ============================================================= */
  .empty-state {
    background: var(--paper, #fff);
    border: 1px dashed var(--rule, rgba(0,0,0,0.1));
    border-radius: 14px;
    padding: 32px 24px;
    text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
  }
  .empty-state-icon {
    width: 44px; height: 44px;
    border-radius: 14px;
    background: var(--bg, #f3eedf);
    color: var(--ink-light);
    display: grid; place-items: center;
  }
  .empty-state-icon i { width: 22px; height: 22px; }
  .empty-state-title {
    font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.3;
    margin: 0;
  }
  .empty-state-sub {
    font-size: 13px; color: var(--ink-light); line-height: 1.5;
    margin: 0; max-width: 360px;
  }
  .empty-state-cta {
    margin-top: 4px;
  }
  .empty-state-sm {
    padding: 18px 16px;
    gap: 8px;
    font-size: 12.5px;
    color: var(--ink-light);
    text-align: center;
  }
  .empty-state-sm .empty-state-icon { width: 32px; height: 32px; border-radius: 10px; }
  .empty-state-sm .empty-state-icon i { width: 16px; height: 16px; }
  .empty-state-sm .empty-state-title { font-size: 13.5px; }
  .empty-state-sm .empty-state-sub   { font-size: 11.5px; }

  /* =============================================================
     WAVE 21 - Money page hero (Phase 2 item #11)
     Black hero + colour-coded tile row for Invoices / P&L / Budget.
     ============================================================= */
  .money-hero {
    background: var(--ink);
    color: var(--on-accent);
    border-radius: 14px;
    padding: 26px 28px;
    margin-bottom: 14px;
  }
  .money-hero-eyebrow {
    font-size: 11px; font-weight: 700;
    color: rgba(255,255,255,0.6);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .money-hero-value {
    font-size: 44px; font-weight: 900;
    line-height: 1.05;
    margin: 6px 0 4px;
    letter-spacing: -0.02em;
  }
  .money-hero-sub {
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    line-height: 1.4;
  }
  .money-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
  }
  .money-tile {
    border-radius: var(--r);
    padding: 14px 16px;
    background: var(--bg);
  }
  .money-tile.mint   { background: var(--mint);   color: var(--mint-fg); }
  .money-tile.butter { background: var(--butter, #fff3d6); color: var(--butter-fg); }
  .money-tile.cherry { background: var(--cherry-bg, #fde6eb); color: var(--cherry); }
  .money-tile.sky    { background: var(--sky, #e3edf5);    color: var(--sky-fg); }
  .money-tile-label  { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.85; }
  .money-tile-value  { font-size: 22px; font-weight: 800; margin-top: 4px; line-height: 1.1; }
  .money-tile-sub    { font-size: 11.5px; opacity: 0.75; margin-top: 4px; }

  /* =============================================================
     WAVE 21 - Dashboard Top Three (Phase 2 item #01)
     ============================================================= */
  .top3 {
    background: var(--ink); color: var(--on-accent);
    border-radius: var(--r-lg);
    padding: 24px 28px;
    margin-bottom: 14px;
  }
  .top3-eyebrow {
    font-size: 11px; font-weight: 700;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.12em; text-transform: uppercase;
  }
  .top3-head {
    font-size: 22px; font-weight: 800;
    line-height: 1.2;
    margin: 6px 0 4px;
    letter-spacing: -0.01em;
  }
  .top3-sub { font-size: 13px; color: rgba(255,255,255,0.7); }
  .top3-rest {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.15);
    display: flex; flex-direction: column; gap: 8px;
  }
  .top3-rest-item {
    display: flex; align-items: center; gap: 10px;
    font-size: 13.5px;
    color: rgba(255,255,255,0.92);
  }
  .top3-rest-item .num {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    color: var(--on-accent); font-size: 11px; font-weight: 700;
    display: grid; place-items: center;
    flex-shrink: 0;
  }
  .top3-collapse {
    margin-top: 14px;
    background: rgba(255,255,255,0.06);
    border: none;
    color: rgba(255,255,255,0.7);
    padding: 8px 14px;
    border-radius: var(--r-pill);
    font-family: var(--font); font-size: 12px; font-weight: 600;
    cursor: pointer;
  }
  .top3-collapse:hover { background: rgba(255,255,255,0.12); color: var(--on-accent); }

  /* =============================================================
     WAVE 21 - Sponsors revenue trio + attention banner (item #03)
     ============================================================= */
  .sp-banner {
    background: var(--cherry-bg, #fde6eb);
    color: var(--cherry);
    border-radius: var(--r);
    padding: 14px 18px;
    margin-bottom: 14px;
    display: flex; align-items: center; gap: 12px;
  }
  .sp-banner-icon {
    width: 32px; height: 32px;
    border-radius: 10px;
    background: var(--cherry-fill); color: var(--on-accent);
    display: grid; place-items: center;
    flex-shrink: 0;
  }
  .sp-banner-text strong { display: block; font-size: 13px; font-weight: 700; color: var(--cherry); }
  .sp-banner-text span { font-size: 12px; color: var(--cherry); opacity: 0.8; }

  /* =============================================================
     WAVE 21 - Production progress bars (item #05)
     ============================================================= */
  .prod-stage-banner {
    border-radius: var(--r);
    padding: 10px 16px;
    margin: 18px 0 8px;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
  }
  .prod-stage-banner.recorded { background: var(--mint); color: var(--mint-fg); }
  .prod-stage-banner.in_edit  { background: var(--lilac); color: var(--lilac-fg); }
  .prod-meter {
    background: rgba(0,0,0,0.08);
    height: 4px;
    border-radius: var(--r-pill);
    overflow: hidden;
    margin-top: 6px;
  }
  .prod-meter-fill { height: 100%; border-radius: var(--r-pill); transition: width .25s ease; }
  .prod-meter-fill.recorded { background: var(--mint-fg); }
  .prod-meter-fill.in_edit  { background: var(--lilac-fg); }

  /* =============================================================
     WAVE 21 - Guests card grid (item #02)
     ============================================================= */
  .guest-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
  }
  .guest-card {
    background: var(--paper, #fff);
    border: 1px solid var(--rule, rgba(0,0,0,0.1));
    border-radius: var(--r);
    padding: 14px;
    cursor: pointer;
    transition: border-color .12s, transform .12s, box-shadow .12s;
  }
  .guest-card:hover {
    border-color: var(--cherry);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  }
  .guest-card-head {
    display: flex; align-items: center; gap: 10px;
  }
  .guest-card-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    color: var(--on-accent);
    display: grid; place-items: center;
    font-size: 13px; font-weight: 700;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--cherry), var(--cherry-deep));
  }
  .guest-card-name { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.2; }
  .guest-card-meta { font-size: 11.5px; color: var(--ink-light); margin-top: 2px; }
  .guest-card-topics {
    margin-top: 10px;
    display: flex; flex-wrap: wrap; gap: 4px;
  }

  /* =============================================================
     WAVE 21 - AI Workspace (item #06)
     ============================================================= */
  .ws-hero {
    background: var(--g-surface);
    border: 1px solid var(--rule);
    border-radius: 14px;
    padding: 22px 24px;
    margin-bottom: 14px;
  }
  .ws-strip {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--rule-soft);
  }
  .ws-strip-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    border-radius: var(--r-pill);
    background: var(--bg);
    cursor: pointer;
    font-size: 12px; font-weight: 600;
    color: var(--ink);
    border: none; font-family: var(--font);
    transition: background .12s;
  }
  .ws-strip-item:hover { background: var(--cherry-bg); color: var(--cherry); }
  .ws-strip-item.active { background: var(--cherry-fill); color: var(--on-accent); }
  .ws-strip-item .count {
    font-size: 10px;
    background: rgba(0,0,0,0.06);
    padding: 1px 6px; border-radius: var(--r-pill);
    color: var(--ink-light);
  }
  .ws-strip-item.active .count { background: rgba(255,255,255,0.18); color: var(--on-accent); }

  /* =============================================================
     WAVE 21 - Chat briefing layout (item #07)
     ============================================================= */
  .chat-brief {
    display: flex; flex-direction: column; gap: 22px;
    padding: 24px;
  }
  .chat-brief-turn {
    display: flex; flex-direction: column; gap: 6px;
  }
  .chat-brief-by {
    font-size: 10.5px; font-weight: 700;
    color: var(--ink-light);
    text-transform: uppercase; letter-spacing: 0.1em;
  }
  .chat-brief-by.you  { color: var(--cherry); }
  .chat-brief-text {
    font-size: 14px; line-height: 1.65; color: var(--ink);
    white-space: pre-wrap;
  }

  /* =============================================================
     WAVE 21 - Content Calendar alert strip (item #08)
     ============================================================= */
  .cal-alerts {
    background: var(--cherry-bg, #fde6eb);
    border-left: 3px solid var(--cherry);
    border-radius: 0 12px 12px 0;
    padding: 14px 18px;
    margin-bottom: 14px;
    display: flex; align-items: flex-start; gap: 12px;
  }
  .cal-alerts-icon {
    color: var(--cherry); flex-shrink: 0;
    margin-top: 2px;
  }
  .cal-alerts-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 4px;
  }
  .cal-alerts-list li {
    font-size: 13px; color: var(--ink);
    line-height: 1.4;
  }
  .cal-alerts-list li strong { color: var(--cherry); font-weight: 700; }

  /* =============================================================
     WAVE 21 - Audience cadence hero (item #09)
     Used on Newsletter / Social / Community.
     ============================================================= */
  .cadence-hero {
    background: var(--ink); color: var(--on-accent);
    border-radius: 14px;
    padding: 22px 26px;
    margin-bottom: 14px;
    display: flex; align-items: center; gap: 24px;
    flex-wrap: wrap;
  }
  .cadence-hero-eyebrow {
    font-size: 11px; font-weight: 700;
    color: rgba(255,255,255,0.6);
    letter-spacing: 0.1em; text-transform: uppercase;
  }
  .cadence-hero-head {
    font-size: 28px; font-weight: 800; letter-spacing: -0.01em;
    line-height: 1.1; margin: 4px 0;
  }
  .cadence-hero-sub  { font-size: 13.5px; color: rgba(255,255,255,0.75); }
  .cadence-hero-cta  {
    margin-left: auto;
    background: #fff; color: var(--ink);
    border: none; border-radius: var(--r-pill);
    padding: 10px 18px;
    font-family: var(--font); font-size: 13px; font-weight: 600;
    cursor: pointer;
  }
  .cadence-hero-cta:hover { background: var(--cherry-fill); color: var(--on-accent); }

  /* =============================================================
     WAVE 23 - Production checklist component (.ck-*)
     Used in episode popup, Episode Centre, Production page Tab B.
     ============================================================= */
  .ck-wrap {
    background: #fff;
    border: 1px solid var(--rule, rgba(0,0,0,0.1));
    border-radius: 14px;
    padding: 16px 18px;
    margin-top: 14px;
  }
  .ck-head {
    display: flex; align-items: center; gap: 16px;
    margin-bottom: 14px;
  }
  .ck-head > div:first-child { flex: 1; }
  .ck-bar {
    margin-top: 6px;
    height: 4px;
    background: rgba(0,0,0,0.06);
    border-radius: var(--r-pill);
    overflow: hidden;
  }
  .ck-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--cherry), var(--cherry-deep));
    border-radius: var(--r-pill);
    transition: width .25s;
  }
  .ck-head-pct {
    font-size: 22px; font-weight: 800; color: var(--ink);
  }

  .ck-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 2px;
  }
  .ck-row {
    border-radius: var(--r-sm);
    transition: background .12s;
  }
  .ck-row.is-done { opacity: 0.78; }
  .ck-row-main {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 8px;
  }
  .ck-row.related_action { background: rgba(0,0,0,0.02); }
  .ck-grip {
    color: var(--ink-light);
    cursor: grab;
    opacity: 0.4;
    flex-shrink: 0;
    transition: opacity .12s;
  }
  .ck-row:hover .ck-grip { opacity: 0.9; }
  .ck-grip i { width: 14px; height: 14px; }

  .ck-check {
    width: 20px; height: 20px;
    border-radius: 5px;
    border: 1.5px solid var(--ink-light);
    background: transparent;
    color: var(--on-accent);
    display: grid; place-items: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .12s, border-color .12s;
  }
  .ck-check i { width: 12px; height: 12px; }
  .ck-check:hover:not(:disabled) { border-color: var(--cherry); }
  .ck-check:disabled { cursor: not-allowed; opacity: 0.5; }
  .ck-check.on { background: var(--mint-fg); border-color: var(--mint-fg); }
  .ck-check.ck-check-info {
    background: var(--lilac, #ece7f7);
    border-color: var(--lilac-fg);
    color: var(--lilac-fg);
    cursor: default;
  }

  .ck-label {
    flex: 1; min-width: 0;
    font-size: 14px; color: var(--ink); line-height: 1.4;
  }
  .ck-row.is-done .ck-label {
    text-decoration: line-through;
    color: var(--ink-light);
  }
  .ck-row.related_action .ck-label {
    color: var(--ink-light); font-style: italic;
  }

  .ck-owner {
    font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ink-light);
    padding: 3px 8px;
    border-radius: var(--r-pill);
    background: rgba(0,0,0,0.04);
    white-space: nowrap;
  }
  .ck-owner.is-ai { background: var(--lilac); color: var(--lilac-fg); }

  .ck-actions {
    display: flex; align-items: center; gap: 6px;
    flex-shrink: 0;
  }
  .ck-mini-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    border: 1px solid var(--rule, rgba(0,0,0,0.1));
    background: #fff;
    color: var(--ink);
    font-size: 11.5px; font-weight: 600;
    cursor: pointer;
    font-family: var(--font);
    text-decoration: none;
  }
  .ck-mini-btn:hover { border-color: var(--cherry); color: var(--cherry); }
  .ck-mini-btn i { width: 12px; height: 12px; }
  .ck-mini-btn.ck-uploaded { background: var(--mint); color: var(--mint-fg); border-color: var(--mint-fg); }
  .ck-mini-btn.ck-view-output { background: var(--lilac, #ece7f7); color: var(--lilac-fg); border-color: var(--lilac-fg); }
  .ck-completed-by {
    font-size: 10.5px; color: var(--ink-light); font-style: italic;
  }

  .ck-children {
    list-style: none;
    margin: 0 0 0 32px;
    padding: 0;
    border-left: 2px solid var(--rule-soft);
    display: flex; flex-direction: column; gap: 2px;
  }
  .ck-children .ck-row-main { padding-left: 14px; }

  /* Wave 29 - dependency note at top of every checklist section */
  .ck-depnote {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px;
    background: var(--lilac, #ece7f7);
    color: var(--lilac-fg);
    border-radius: 10px;
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 1.45;
  }
  .ck-depnote i {
    width: 16px; height: 16px;
    flex-shrink: 0;
    margin-top: 1px;
  }

  /* Wave 29 - not-mine rows are visibly de-emphasised */
  .ck-row.not-mine { opacity: 0.6; }
  .ck-row.not-mine .ck-check { cursor: not-allowed; background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.15); }
  .ck-row.not-mine .ck-check:hover { border-color: rgba(0,0,0,0.15); }
  .ck-row.is-mine .ck-owner { background: var(--cherry-fill); color: var(--on-accent); }
  .ck-row.is-mine .ck-check:not(.on) { border-color: var(--cherry); }

  /* =============================================================
     WAVE 27 - Episode Centre Booked tab two-column + dossier
     ============================================================= */
  .ec-booked-split {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 16px;
    margin-top: 16px;
    align-items: start;   /* Wave 28 - explicit top alignment so columns don't stretch unevenly */
  }
  .ec-booked-main, .ec-booked-side {
    min-width: 0;
    display: flex; flex-direction: column; gap: 16px;
  }
  @media (max-width: 1000px) {
    .ec-booked-split { grid-template-columns: 1fr; }
  }

  .ec-dossier-card .ec-pane-head { padding: 18px 20px 12px; }
  .ec-dossier-card .ec-pane-body { padding: 6px 20px 20px; }
  .ec-dossier-row {
    padding: 8px 0;
    border-bottom: 1px solid var(--rule-soft);
  }
  .ec-dossier-row:last-child { border-bottom: none; }
  .ec-dossier-row-label {
    font-size: 11px; font-weight: 700;
    color: var(--ink-light);
    text-transform: uppercase; letter-spacing: 0.06em;
  }
  .ec-dossier-row-value {
    font-size: 13.5px; color: var(--ink);
    margin-top: 2px;
    line-height: 1.4;
  }
  .ec-dossier-item {
    display: block;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    background: var(--bg);
    color: var(--ink);
    text-decoration: none;
    margin-bottom: 6px;
    transition: background .12s;
  }
  .ec-dossier-item:hover { background: var(--cherry-bg); color: var(--cherry); }
  .ec-dossier-item-title { font-size: 13.5px; font-weight: 700; line-height: 1.3; }
  .ec-dossier-item-sub   { font-size: 11.5px; color: var(--ink-light); margin-top: 3px; }
  .ec-dossier-item:hover .ec-dossier-item-sub { color: var(--cherry); opacity: 0.75; }

  .ec-news-row {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 12px 14px;
    background: var(--bg);
    border-radius: 10px;
    margin-bottom: 8px;
    text-decoration: none;
    color: var(--ink);
    transition: background .12s;
  }
  .ec-news-row:hover { background: var(--peach, #fce3d4); }
  .ec-news-date {
    font-size: 11px; color: var(--ink-light);
    white-space: nowrap; min-width: 90px;
    padding-top: 2px;
  }
  .ec-news-body { flex: 1; }
  .ec-news-headline { font-size: 14px; font-weight: 600; line-height: 1.4; }
  .ec-news-source   { font-size: 11.5px; color: var(--ink-light); margin-top: 3px; }

  /* AI artifact panels (inline on In Edit + Scheduled tabs) */
  .ec-ai-panel { margin-top: 16px; }

  /* Clip card on Scheduled tab */
  .ec-clip-card {
    background: var(--bg);
    border: 1px solid var(--rule-soft);
    border-radius: var(--r);
    padding: 16px 18px;
  }
  .ec-clip-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 8px;
  }
  .ec-clip-num {
    font-size: 11px; font-weight: 800; color: var(--cherry);
    letter-spacing: 0.1em; text-transform: uppercase;
  }
  .ec-clip-time {
    font-family: ui-monospace, monospace;
    font-size: 12px;
    color: var(--ink-light);
  }
  .ec-clip-hook {
    font-size: 16px; font-weight: 700; color: var(--ink);
    line-height: 1.4;
    margin-bottom: 12px;
  }
  .ec-clip-block { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule-soft); }
  .ec-clip-block:first-of-type { border-top: none; padding-top: 0; }
  .ec-clip-transcript {
    background: #fff;
    border-left: 3px solid var(--cherry);
    padding: 10px 14px;
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: var(--ink-mid, var(--ink));
  }
  .ec-clip-channels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
  }
  .ec-clip-channel {
    background: #fff;
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-sm);
    padding: 12px 14px;
  }
  .ec-clip-channel-name {
    font-size: 10px; font-weight: 800;
    color: var(--cherry);
    letter-spacing: 0.1em; text-transform: uppercase;
    margin-bottom: 6px;
  }
  .ec-clip-channel-title {
    font-size: 13.5px; font-weight: 700; color: var(--ink);
    line-height: 1.35;
    margin-bottom: 4px;
  }
  .ec-clip-channel-desc {
    font-size: 12px; color: var(--ink-light);
    line-height: 1.5;
  }

  /* =============================================================
     WAVE 25 - Production checklist template editor
     Drag-handle column + draggable rows
     ============================================================= */
  .prod-tpl-row {
    transition: background .12s;
  }
  .prod-tpl-row:hover { background: var(--bg); }
  .prod-tpl-grip {
    display: inline-grid; place-items: center;
    width: 22px; height: 22px;
    color: var(--ink-light);
    cursor: grab;
    opacity: 0.5;
    transition: opacity .12s, color .12s;
  }
  .prod-tpl-row:hover .prod-tpl-grip { opacity: 1; }
  .prod-tpl-grip:active { cursor: grabbing; }
  .prod-tpl-grip i { width: 14px; height: 14px; }

  /* The dragging row stays in place as a "ghost slot" - visible but
     faded - so the user can see where they came from. The cursor
     carries the native HTML5 drag image. */
  .prod-tpl-dragging {
    opacity: 0.35;
    background: var(--cherry-bg);
    cursor: grabbing;
  }
  .prod-tpl-dragging * { pointer-events: none; }

  /* Wave 28 - related-action rows (lifecycle-triggered, no manual ticking) */
  .prod-tpl-related { background: rgba(0,0,0,0.025); }
  .prod-tpl-related:hover { background: rgba(0,0,0,0.04); }
  .prod-tpl-related-icon {
    display: inline-grid; place-items: center;
    width: 22px; height: 22px;
    color: var(--lilac-fg);
    background: var(--lilac, #ece7f7);
    border-radius: 6px;
  }
  .prod-tpl-related-icon i { width: 12px; height: 12px; }
  .prod-tpl-related-tag {
    font-size: 10.5px; font-weight: 700;
    color: var(--lilac-fg);
    background: var(--lilac, #ece7f7);
    padding: 3px 9px;
    border-radius: var(--r-pill);
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .prod-tpl-sub td:nth-child(2) { color: var(--ink-light); }

  /* =============================================================
     WAVE 21 - Settings left-nav (item #10)
     Re-use of episode popup's split pattern as a full page.
     ============================================================= */
  .settings-split {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 18px;
    align-items: start;
  }
  .settings-nav {
    background: #f5f5f7;
    border-radius: 14px;
    padding: 14px 12px;
    display: flex; flex-direction: column; gap: 4px;
    position: sticky; top: 14px;
  }
  .settings-navitem {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: var(--font); font-size: 14px;
    color: var(--ink); text-align: left;
    transition: background .12s, box-shadow .12s;
  }
  .settings-navitem:hover { background: rgba(0,0,0,0.04); }
  .settings-navitem.active {
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.05);
    font-weight: 700;
  }
  .settings-navicon {
    width: 26px; height: 26px;
    border-radius: var(--r-sm);
    background: rgba(0,0,0,0.05);
    color: var(--ink-light);
    display: grid; place-items: center;
    flex-shrink: 0;
  }
  .settings-navitem.active .settings-navicon {
    background: var(--cherry-fill); color: var(--on-accent);
  }
  .settings-pane {
    background: var(--paper, #fff);
    border: 1px solid var(--rule);
    border-radius: 14px;
    padding: 24px 28px;
  }
  @media (max-width: 800px) {
    .settings-split { grid-template-columns: 1fr; }
    .settings-nav { position: static; flex-direction: row; overflow-x: auto; }
    .settings-navitem { flex-shrink: 0; }
  }

  /* =============================================================
     INTEL PAGE (Wave 39) - Guest Booking Intelligence
     Namespaced .intel-* so nothing collides with other pages.
     Built on the existing design tokens - palette, cards, pills,
     data-table all reused. These rules only add what's missing.
     ============================================================= */
  .intel-banner {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 14px 18px;
    background: linear-gradient(180deg, rgba(184,0,43,0.05), rgba(184,0,43,0.02));
    border: 1px solid rgba(184,0,43,0.2);
    border-left: 3px solid var(--cherry);
    border-radius: 6px;
  }
  .intel-banner-icon {
    width: 36px; height: 36px;
    border-radius: var(--r-sm);
    background: var(--cherry-fill); color: var(--on-accent);
    display: grid; place-items: center;
    flex-shrink: 0;
  }
  .intel-banner-icon i { width: 18px; height: 18px; }

  /* Target row (used in Briefing) */
  .intel-target {
    padding: 18px 20px;
    border-bottom: 1px solid var(--rule-soft);
    transition: background .15s;
  }
  .intel-target:last-child { border-bottom: none; }
  .intel-target:hover { background: var(--bg); }
  .intel-target-top {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 14px;
  }
  .intel-target-name {
    font-size: 17px; font-weight: 700; color: var(--ink);
    letter-spacing: -0.005em;
  }
  .intel-target-role {
    font-size: 12px; color: var(--ink-light); margin-top: 2px;
  }
  .intel-heat {
    display: inline-block;
    padding: 3px 10px;
    font-family: var(--mono);
    font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
  }
  .intel-heat.heat-hot { background: var(--cherry-fill); color: var(--on-accent); }
  .intel-heat.heat-warm { background: var(--butter-fg); color: var(--on-accent); }
  .intel-heat.heat-cold { background: var(--ink-light); color: var(--on-accent); }
  .intel-heat.heat-played { background: var(--bg-3, #ddd3bc); color: var(--ink-light); }

  /* Action row (Briefing) */
  .intel-action {
    display: grid; grid-template-columns: 32px 1fr auto;
    gap: 14px; align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--rule-soft);
  }
  .intel-action:last-child { border-bottom: none; }
  .intel-action.priority { background: var(--cherry-bg); border-left: 3px solid var(--cherry); padding-left: 15px; }
  .intel-action-num {
    font-family: var(--mono); font-size: 15px; font-weight: 700;
    color: var(--ink-light);
  }
  .intel-action.priority .intel-action-num { color: var(--cherry); }
  .intel-action-what { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.3; }
  .intel-action-why { font-size: 12px; color: var(--ink-light); margin-top: 3px; }
  .intel-action-meta {
    text-align: right;
    font-family: var(--mono);
    font-size: 10.5px; color: var(--ink-light);
    letter-spacing: 0.06em;
    display: flex; flex-direction: column; gap: 2px;
  }
  .intel-action-meta strong { color: var(--ink); font-size: 12px; }

  /* Feed item (Competitor + Audience tabs) */
  .intel-feed {
    display: grid; grid-template-columns: 80px 1fr;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--rule-soft);
  }
  .intel-feed:last-child { border-bottom: none; }
  .intel-feed-time {
    font-family: var(--mono); font-size: 10.5px; color: var(--ink-light);
    letter-spacing: 0.06em; padding-top: 2px;
  }
  .intel-feed-show {
    font-size: 10.5px; font-weight: 700; color: var(--cherry);
    letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 4px;
  }
  .intel-feed-guest {
    font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 4px;
  }
  .intel-feed-text { font-size: 12.5px; line-height: 1.55; color: var(--ink-mid); }

  /* Pipeline kanban cards (uses the .kanban + .kanban-col base styles) */
  .intel-kcard {
    background: var(--bg);
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-sm, 6px);
    padding: 12px 14px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color .15s, transform .12s;
    position: relative;
  }
  .intel-kcard:hover { border-color: var(--ink-mid); transform: translateY(-1px); }
  .intel-kcard.priority { border-left: 3px solid var(--cherry); padding-left: 13px; }
  .intel-kcard-flag {
    position: absolute; top: 0; right: 0;
    background: var(--cherry-fill); color: var(--on-accent);
    padding: 1px 6px;
    font-family: var(--mono); font-size: 9.5px; font-weight: 700;
    letter-spacing: 0.1em;
    border-bottom-left-radius: 4px;
  }
  .intel-kcard-name { font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: -0.005em; }
  .intel-kcard-role { font-size: 11px; color: var(--ink-light); margin-top: 1px; margin-bottom: 8px; }
  .intel-kcard-tag { margin-bottom: 8px; }
  .intel-kcard-tag .pill-soft { font-size: 10.5px; padding: 2px 7px; }
  .intel-kcard-hook { font-size: 12px; line-height: 1.45; color: var(--ink-mid); }

  /* Calendar chip (UK Calendar tab) */
  .intel-cal-chip {
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--rule-soft);
    border-radius: 6px;
    transition: border-color .15s, background .15s;
    cursor: pointer;
  }
  .intel-cal-chip:hover { border-color: var(--ink-mid); }
  .intel-cal-chip.priority { background: var(--cherry-bg); border-color: rgba(184,0,43,0.25); }
  .intel-cal-chip.priority div:first-child { color: var(--cherry); }

  /* btn-sm helper if not already defined elsewhere */
  .btn-sm { padding: 5px 10px; font-size: 11.5px; }

/* ░░░░░░░░░░ 2/4 v4.css ░░░░░░░░░░ */
/* =============================================================
   TPMS Brain - V4 design system (Silicon Valley / Apple style)
   Loads AFTER /css/styles.css. Owns the app shell + V4 components.
   Source of truth: /tpms-brain/FINAL_V4_01.html (etc.)
   ============================================================= */

:root {
  /* Brand */
  --cherry: #b8002b;
  --cherry-deep: #8a001f;
  --cherry-soft: #fde6eb;
  --cherry-tint: rgba(184,0,43,0.06);
  /* Apple-style gray scale */
  --g-50: #fafafa;
  --g-100: #f5f5f7;
  --g-150: #ebebef;
  --g-200: #e5e5ea;
  --g-300: #d2d2d7;
  --g-400: #a1a1a6;
  --g-500: #86868b;
  --g-600: #6e6e73;
  --g-700: #424245;
  --g-800: #1d1d1f;
  --g-900: #0e0e10;
  /* Status (SV refined) */
  --c-mint: #2f855a;
  --c-mint-bg: #ecfdf5;
  --c-peach: #c2410c;
  --c-peach-bg: #fff7ed;
  --c-butter: #92660d;
  --c-butter-bg: #fefce8;
  --c-sky: #1e6091;
  --c-sky-bg: #eff6ff;
  --c-lilac: #5e5ce6;
  --c-lilac-bg: #f0eeff;
  --c-rose: #be185d;
  --c-rose-bg: #fdf2f8;
  --c-sage: #4d7c0f;
  --c-sage-bg: #f7fee7;
  /* Brain panel - Apple indigo */
  --brain-bg: #1f1e3a;
  --brain-accent: #5e5ce6;
  /* Invariant tone tokens - single source for recurring fixed colours (same value light+dark) */
  --green-strong: #1b8a3c;
  --ink-deep: #161618;
  --green-ios: #34c759;
  --grey-line: #e5e5e7;
  --grey-mid: #98989d;
  --green-bright: #4ddb8c;
  --pink-bright: #ff8aa3;
  --amber-ios: #ff9f0a;
  --indigo: #4b46c2;
  --indigo-2: #4b45c4;
  --red-soft: #ff8a8a;
  --paper-soft: #fbfbf9;
  /* Shadows - refined */
  --sh-xs: 0 1px 2px rgba(0,0,0,0.04);
  --sh-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.06);
  --sh-md: 0 2px 4px rgba(0,0,0,0.04), 0 6px 16px rgba(0,0,0,0.06);
  --sh-lg: 0 8px 24px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --sh-xl: 0 24px 56px rgba(0,0,0,0.12), 0 6px 16px rgba(0,0,0,0.08);
  --sh-cherry: 0 4px 12px rgba(184,0,43,0.20);
  --f-v4: -apple-system, BlinkMacSystemFont, 'Inter', 'SF Pro Display', sans-serif;
}

/* ─── BASE ──────────────────────────────────────────────────── */
body.v4,
html:has(body.v4) {
  margin: 0;
  padding: 0;
}
body.v4 {
  background: var(--g-100);
  color: var(--g-800);
  font-family: var(--f-v4);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}
body.v4 *,
body.v4 *::before,
body.v4 *::after { box-sizing: border-box; }
body.v4 ::selection { background: var(--cherry-fill); color: var(--on-accent); }

/* SVG icon system */
body.v4 svg.ic {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
}
body.v4 svg.ic.solid { fill: currentColor; stroke: none; }
body.v4 .ic-lg { width: 18px; height: 18px; }
body.v4 .tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ─── APP SHELL ─────────────────────────────────────────────── */
/* V4 layout: sidebar full-height to top, topbar lives INSIDE .main.
   <div.app>
     <aside.sb>  sidebar (full height)
     <main.main>
       <header.topbar>  inline, not a chrome bar
       <div#app>  router mount
*/
body.v4 .app {
  display: grid;
  grid-template-columns: 228px 1fr;
  min-height: 100vh;
  background: var(--g-100);
}

/* TOPBAR - inline row at top of main (V4 mockup style, no chrome bar) */
body.v4 .topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  /* defeat old fixed positioning + chrome */
  position: static;
  background: transparent;
  border-bottom: none;
  height: auto;
  padding: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: auto;
}
body.v4 .topbar-crumb {
  font-size: 13px;
  color: var(--g-500);
  display: flex;
  align-items: center;
  gap: 6px;
}
body.v4 .topbar-crumb .leaf {
  color: var(--g-900);
  font-weight: 600;
}
/* Old topbar brand block - hide (brand lives in sidebar now) */
body.v4 .topbar .brand { display: none; }

/* SEARCH input (V4 - input itself is the styled element) */
body.v4 .topbar-search {
  position: relative;
  width: 260px;
  margin: 0;
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
}
body.v4 .topbar-search input,
body.v4 .topbar-search > input#global-search {
  width: 100%;
  background: #fff;
  border: 1px solid var(--g-200);
  border-radius: var(--r-sm);
  padding: 7px 12px 7px 34px;
  font-family: var(--f-v4);
  font-size: 13px;
  color: var(--g-800);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%2386868b' stroke-width='1.6'><circle cx='6.5' cy='6.5' r='4.5'/><path d='M10 10l3 3'/></svg>");
  background-repeat: no-repeat;
  background-position: 12px center;
}
body.v4 .topbar-search input::placeholder { color: var(--g-500); }
body.v4 .topbar-search input:focus {
  outline: none;
  border-color: var(--cherry);
  box-shadow: 0 0 0 3px var(--cherry-tint);
}

body.v4 .topbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
body.v4 .topbar-action {
  background: #fff;
  border: 1px solid var(--g-200);
  color: var(--g-700);
  font-family: var(--f-v4);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
body.v4 .topbar-action:hover {
  border-color: var(--g-400);
  color: var(--g-900);
}

body.v4 .topbar-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 10px;
  border-left: 1px solid var(--g-200);
  margin-left: 2px;
}
body.v4 .topbar-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c-mint);
  color: var(--on-accent);
  font-weight: 600;
  font-size: 11px;
  display: grid;
  place-items: center;
  letter-spacing: -0.01em;
  box-shadow: none;
}
body.v4 .topbar-user-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--g-900);
  line-height: 1.1;
}
body.v4 .topbar-user-role {
  font-size: 11px;
  color: var(--g-500);
  line-height: 1.1;
  margin-top: 2px;
}

/* ─── SIDEBAR ───────────────────────────────────────────────── */
body.v4 .sb,
body.v4 .sidebar.sb {
  background: var(--g-800);
  color: rgba(255, 255, 255, 0.92);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
}
body.v4 .sb-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 16px;
  margin-bottom: 8px;
}
body.v4 .sb-brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--cherry-fill);
  display: grid;
  place-items: center;
  font-weight: 700;
  color: var(--on-accent);
  font-size: 13px;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
body.v4 .sb-brand-name {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--on-accent);
}
body.v4 .sb-brand-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 1px;
}
body.v4 .sb-group {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  padding: 12px 12px 4px;
}
body.v4 .sb-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s;
  text-decoration: none;
}
body.v4 .sb-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--on-accent);
}
body.v4 .sb-item.on,
body.v4 .sb-item.active {
  background: var(--cherry-fill);
  color: var(--on-accent);
  font-weight: 600;
}
body.v4 .sb-item .ic { opacity: 0.85; flex-shrink: 0; }
body.v4 .sb-item.on .ic,
body.v4 .sb-item.active .ic { opacity: 1; }
body.v4 .sb-item .count {
  margin-left: auto;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.10);
  padding: 1px 7px;
  border-radius: 99px;
  font-weight: 600;
}
body.v4 .sb-item.on .count,
body.v4 .sb-item.active .count {
  background: rgba(0, 0, 0, 0.2);
  color: var(--on-accent);
}

/* ─── MAIN ─────────────────────────────────────────────────── */
body.v4 .main {
  padding: 24px 28px 36px;
  background: var(--g-100);
  overflow-x: hidden;
  /* defeat old layout: margin-left/top from /css/styles.css */
  margin-left: 0;
  margin-top: 0;
  max-width: none;
  min-height: auto;
}

/* defeat old sidebar width - let .app grid track set it */
body.v4 .sidebar.sb { width: auto; }

/* ─── HERO ─────────────────────────────────────────────────── */
body.v4 .hero {
  background: var(--g-900);
  color: var(--on-accent);
  border-radius: 14px;
  padding: 24px 28px;
  margin-bottom: 16px;
}
body.v4 .hero-eyebrow {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* Explicit colour overrides - old styles.css has `.hero h1 { color: var(--ink) }`
   which would otherwise render the title in dark grey on the dark V4 hero. */
body.v4 .hero h1,
body.v4 .hero-title {
  color: var(--on-accent);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.15;
  margin: 8px 0 6px;
}
body.v4 .hero-sub {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.72);
  max-width: 640px;
  line-height: 1.5;
}
body.v4 .hero-sub .pull {
  color: var(--on-accent);
  font-weight: 600;
}
body.v4 .hero-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}
body.v4 .hero-cta {
  background: var(--cherry-fill);
  color: var(--on-accent);
  padding: 8px 16px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  box-shadow: var(--sh-cherry);
  font-family: var(--f-v4);
}
body.v4 .hero-cta.ghost {
  background: rgba(255, 255, 255, 0.10);
  color: var(--on-accent);
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
body.v4 .hero-meta {
  margin-top: 12px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  display: flex;
  gap: 14px;
}
body.v4 .hero-meta .alert {
  color: #ffb8c5;
  font-weight: 500;
}
body.v4 .hero.light {
  background: #fff;
  color: var(--g-900);
  border: 1px solid var(--g-200);
}
body.v4 .hero.light .hero-eyebrow { color: var(--cherry); }
body.v4 .hero.light .hero-sub { color: var(--g-500); }
body.v4 .hero.light .hero-sub .pull { color: var(--g-900); }

/* ─── "THEN THIS WEEK" CARDS ───────────────────────────────── */
body.v4 .then-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}
body.v4 .then-card {
  background: var(--g-surface);
  border: 1px solid var(--g-200);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}
body.v4 .then-card:hover {
  border-color: var(--g-400);
  box-shadow: var(--sh-sm);
}
body.v4 .then-card .nm {
  width: 4px;
  align-self: stretch;
  border-radius: 99px;
}
body.v4 .then-card .body .meta {
  font-size: 11px;
  color: var(--g-500);
  font-weight: 500;
}
body.v4 .then-card .body .what {
  font-size: 14px;
  font-weight: 600;
  color: var(--g-900);
  margin-top: 2px;
}
body.v4 .then-card .body .why {
  font-size: 12px;
  color: var(--g-500);
  margin-top: 2px;
}

/* ─── AI BRAIN ─────────────────────────────────────────────── */
body.v4 .brain {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  background: var(--brain-bg);
  color: var(--on-accent);
  border-radius: var(--r);
  align-items: flex-start;
  margin-bottom: 20px;
}
body.v4 .brain-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--brain-accent);
  color: var(--on-accent);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
body.v4 .brain-body { flex: 1; }
body.v4 .brain-body .lbl {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.58);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
body.v4 .brain-body .lbl::after {
  content: '✦';
  opacity: 0.5;
  font-size: 11px;
  color: var(--on-accent);
}
body.v4 .brain-body .obs {
  font-size: 14px;
  color: var(--on-accent);
  margin: 6px 0 12px;
  line-height: 1.5;
  max-width: 760px;
}
body.v4 .brain-body .obs strong {
  color: #a5a4ff;
  font-weight: 600;
}
body.v4 .brain-prompts {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
body.v4 .brain-prompt {
  background: rgba(255, 255, 255, 0.10);
  color: var(--on-accent);
  font-size: 12px;
  font-weight: 500;
  padding: 5px 11px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
body.v4 .brain-prompt:hover { background: rgba(255, 255, 255, 0.16); }
body.v4 .brain-prompt.ask {
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.28);
}

/* ─── SECTION HEAD (card-head) ─────────────────────────────── */
body.v4 .card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
body.v4 .card-head h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--g-900);
  margin: 0;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
}
body.v4 .card-head h3 .badge {
  background: var(--g-100);
  color: var(--g-600);
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 6px;
  font-weight: 600;
}
body.v4 .card-head .more {
  font-size: 12px;
  color: var(--cherry);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}
body.v4 .card-head .more:hover { color: var(--cherry-deep); }

/* ─── STAT TILES (V4) ───────────────────────────────────────── */
body.v4 .stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
body.v4 .stat {
  background: var(--g-surface);
  border: 1px solid var(--g-200);
  border-radius: 10px;
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
  transition: border-color .12s, box-shadow .12s;
}
body.v4 .stat:hover {
  border-color: var(--g-300);
  box-shadow: var(--sh-sm);
}
body.v4 .stat .lbl {
  font-size: 12px;
  color: var(--g-500);
  font-weight: 500;
}
body.v4 .stat .val {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--g-900);
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
}
body.v4 .stat .val .unit {
  font-size: 14px;
  color: var(--g-500);
  margin-left: 2px;
  font-weight: 600;
}
body.v4 .stat .delta {
  font-size: 12px;
  color: var(--c-mint);
  font-weight: 500;
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
body.v4 .stat .delta.down { color: var(--cherry); }
body.v4 .stat .spark {
  position: absolute;
  right: 14px;
  bottom: 12px;
  width: 56px;
  height: 18px;
  opacity: 0.55;
}
body.v4 .stat.cherry {
  background: var(--cherry-fill);
  color: var(--on-accent);
  border: none;
}
body.v4 .stat.cherry .lbl { color: rgba(255, 255, 255, 0.72); }
body.v4 .stat.cherry .val { color: var(--on-accent); }
body.v4 .stat.cherry .val .unit { color: rgba(255, 255, 255, 0.6); }
body.v4 .stat.cherry .delta { color: #ffd2db; }
body.v4 .stat.cherry .spark { opacity: 0.85; }

/* ─── TWO COL ──────────────────────────────────────────────── */
body.v4 .two-col {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
body.v4 .one-one-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
  align-items: stretch;
}
/* Make both cards in the row match heights even if their content differs
   (Your tasks vs Open work blocks). The grid cell stretches by default; we
   also need the wrapper div + the .card inside to fill it. */
body.v4 .one-one-col > div { display: flex; flex-direction: column; }
body.v4 .one-one-col > div > .card { flex: 1; display: flex; flex-direction: column; }
body.v4 .card {
  background: var(--g-surface);
  border: 1px solid var(--g-200);
  border-radius: var(--r);
  padding: 16px 18px;
}

/* ─── MINI CALENDAR ─────────────────────────────────────────── */
body.v4 .mcal-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
body.v4 .mcal-month {
  font-size: 15px;
  font-weight: 600;
  color: var(--g-900);
}
body.v4 .mcal-nav {
  display: flex;
  gap: 2px;
  color: var(--g-500);
}
body.v4 .mcal-nav span {
  padding: 4px 7px;
  cursor: pointer;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
}
body.v4 .mcal-nav span:hover {
  background: var(--g-100);
  color: var(--g-900);
}
body.v4 .mcal-dow-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
}
body.v4 .mcal-dow {
  font-size: 11px;
  font-weight: 500;
  color: var(--g-500);
  text-align: center;
  padding: 4px 0;
}
body.v4 .mcal-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
body.v4 .mcal-day {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--g-700);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  font-variant-numeric: tabular-nums;
}
body.v4 .mcal-day:hover { background: var(--g-100); }
body.v4 .mcal-day.muted { color: var(--g-400); }
body.v4 .mcal-day.today {
  background: var(--cherry-fill);
  color: var(--on-accent);
  font-weight: 600;
}
body.v4 .mcal-day.has::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background: var(--cherry-fill);
  border-radius: 50%;
}

/* ─── TEAM ROWS ─────────────────────────────────────────────── */
body.v4 .team-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--g-150);
}
body.v4 .team-row:last-child { border-bottom: none; }
body.v4 .av {
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--on-accent);
  font-weight: 600;
  letter-spacing: -0.01em;
  width: 32px;
  height: 32px;
  font-size: 12px;
}
body.v4 .av.av-pm  { background: var(--c-mint); }
body.v4 .av.av-ch  { background: var(--c-lilac); }
body.v4 .av.av-ct  { background: var(--c-peach); }
body.v4 .av.av-aw  { background: var(--c-sky); }
body.v4 .av.av-ai  { background: var(--cherry-fill); }
body.v4 .av.av-lyn { background: #7c3aed; }
body.v4 .av.av-sd  { background: #9a3412; }
body.v4 .av.av-cl  { background: #047857; }
body.v4 .av.av-jb  { background: #a16207; }
body.v4 .av.av-gf  { background: #9f1239; }
body.v4 .av.av-ll  { background: #6d28d9; }
body.v4 .av.av-ah  { background: #3f6212; }
body.v4 .av.av-rb  { background: #831843; }
body.v4 .av.av-pp  { background: #075985; }
body.v4 .av.av-sm  { width: 24px; height: 24px; font-size: 10px; }
body.v4 .av.av-xs  { width: 20px; height: 20px; font-size: 9px; }
body.v4 .av.av-mini { width: 18px; height: 18px; font-size: 9px; border: 2px solid #fff; }
body.v4 .av.av-lg  { width: 48px; height: 48px; font-size: 16px; }
body.v4 .team-info .name {
  font-size: 13px;
  font-weight: 600;
  color: var(--g-900);
}
body.v4 .team-info .role {
  font-size: 11px;
  color: var(--g-500);
  margin-top: 1px;
}
body.v4 .team-status {
  font-size: 11px;
  color: var(--g-500);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
body.v4 .team-status .pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-mint);
}
body.v4 .team-status .pulse-dot.idle { background: var(--c-butter); }
body.v4 .team-status .pulse-dot.away { background: var(--g-400); }

/* ─── FEED ROWS ─────────────────────────────────────────────── */
body.v4 .feed-row {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 9px 0;
  border-bottom: 1px solid var(--g-150);
}
body.v4 .feed-row:last-child { border-bottom: none; }
body.v4 .feed-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--on-accent);
}
body.v4 .feed-icon.win { background: var(--c-mint); }
body.v4 .feed-icon.action { background: var(--cherry-fill); }
body.v4 .feed-icon.pending { background: var(--c-peach); }
body.v4 .feed-icon.note { background: var(--c-lilac); }
body.v4 .feed-text {
  font-size: 13px;
  color: var(--g-700);
  line-height: 1.4;
}
body.v4 .feed-text strong { color: var(--g-900); font-weight: 600; }
body.v4 .feed-when {
  font-size: 11px;
  color: var(--g-500);
  white-space: nowrap;
}

/* ─── SHOW RHYTHM ──────────────────────────────────────────── */
body.v4 .rhythm {
  background: #fff;
  border: 1px solid var(--g-200);
  border-radius: var(--r);
  padding: 16px 18px;
  margin-bottom: 12px;
}
body.v4 .rhythm-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}
body.v4 .rhythm-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--g-900);
}
body.v4 .rhythm-legend {
  font-size: 11px;
  color: var(--g-500);
  display: flex;
  gap: 14px;
}
body.v4 .rhythm-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
body.v4 .rhythm-legend .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

/* ─── EPISODE LIST ─────────────────────────────────────────── */
body.v4 .ep-list {
  background: #fff;
  border: 1px solid var(--g-200);
  border-radius: var(--r);
  overflow: hidden;
}
body.v4 .ep-row {
  display: grid;
  grid-template-columns: 48px 36px 1fr 100px 110px 110px 24px;
  gap: 14px;
  align-items: center;
  padding: 12px 18px;
  border-top: 1px solid var(--g-150);
  cursor: pointer;
  transition: background .12s;
}
body.v4 .ep-row:first-of-type { border-top: none; }
body.v4 .ep-row:hover { background: var(--g-50); }
body.v4 .ep-row.priority { background: var(--cherry-soft); }
body.v4 .ep-row.priority:hover { background: #f8d6dd; }
body.v4 .ep-num {
  font-size: 12px;
  font-weight: 600;
  color: var(--g-500);
  font-variant-numeric: tabular-nums;
}
body.v4 .ep-row.priority .ep-num { color: var(--cherry); }
body.v4 .ep-info .name {
  font-size: 14px;
  font-weight: 600;
  color: var(--g-900);
}
body.v4 .ep-info .desc {
  font-size: 12px;
  color: var(--g-500);
  margin-top: 1px;
}
body.v4 .ep-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--on-accent);
}
body.v4 .ep-pill.booked { background: var(--cherry-fill); }
body.v4 .ep-pill.recorded { background: var(--c-butter); }
body.v4 .ep-pill.edit { background: var(--c-sky); }
body.v4 .ep-pill.scheduled { background: var(--c-mint); }
body.v4 .ep-pill.hot { background: var(--c-lilac); }
body.v4 .ep-pill.pub { background: var(--g-700); }
body.v4 .ep-when {
  font-size: 12px;
  color: var(--g-700);
  font-variant-numeric: tabular-nums;
}
body.v4 .ep-when .sub {
  display: block;
  font-size: 11px;
  color: var(--g-500);
  margin-top: 1px;
}
body.v4 .ep-prog {
  display: flex;
  align-items: center;
  gap: 8px;
}
body.v4 .ep-prog-bar {
  width: 44px;
  height: 4px;
  background: var(--g-200);
  border-radius: 99px;
  overflow: hidden;
}
body.v4 .ep-prog-bar .fill {
  height: 100%;
  background: var(--cherry-fill);
  border-radius: 99px;
}
body.v4 .ep-prog-bar .fill.full { background: var(--c-mint); }
body.v4 .ep-prog-bar .fill.sky { background: var(--c-sky); }
body.v4 .ep-prog-pct {
  font-size: 11px;
  font-weight: 600;
  color: var(--g-700);
  font-variant-numeric: tabular-nums;
}
body.v4 .ep-prog .alert {
  color: var(--cherry);
  font-size: 11px;
  font-weight: 600;
}
body.v4 .ep-chevron {
  color: var(--g-400);
  font-size: 14px;
}
body.v4 .ep-row:hover .ep-chevron { color: var(--cherry); }

/* ─── TABS ─────────────────────────────────────────────────── */
body.v4 .tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--g-200);
  margin-bottom: 16px;
  overflow-x: auto;
}
body.v4 .tab {
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--g-600);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  margin-bottom: -1px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
body.v4 .tab:hover { color: var(--g-800); }
body.v4 .tab.on {
  color: var(--cherry);
  border-bottom-color: var(--cherry);
  font-weight: 600;
}
body.v4 .tab .count {
  background: var(--g-150);
  color: var(--g-600);
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 5px;
  font-weight: 600;
}
body.v4 .tab.on .count {
  background: var(--cherry-soft);
  color: var(--cherry);
}

/* ─── CHIPS ────────────────────────────────────────────────── */
body.v4 .chip-row {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  padding: 0 0 14px;
}
body.v4 .chip {
  background: #fff;
  border: 1px solid var(--g-200);
  padding: 4px 11px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--g-700);
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
body.v4 .chip.on {
  background: var(--g-800);
  color: var(--on-accent);
  border-color: var(--g-800);
}
body.v4 .chip:hover:not(.on) { border-color: var(--g-400); }

/* ─── BUTTONS (V4) ─────────────────────────────────────────── */
body.v4 .btn-v4 {
  font-family: var(--f-v4);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: var(--r-sm);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
body.v4 .btn-v4.btn-primary {
  background: var(--cherry-fill);
  color: var(--on-accent);
  box-shadow: var(--sh-cherry);
}
body.v4 .btn-v4.btn-secondary {
  background: #fff;
  color: var(--g-800);
  border: 1px solid var(--g-200);
}
body.v4 .btn-v4.btn-secondary:hover { border-color: var(--g-400); }
body.v4 .btn-v4.btn-ghost {
  background: transparent;
  color: var(--g-600);
}

/* ─── KANBAN (V4) ──────────────────────────────────────────── */
body.v4 .kanban {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
body.v4 .kb-col {
  background: var(--g-50);
  border: 1px solid var(--g-200);
  border-radius: 10px;
  padding: 12px;
  min-height: 380px;
}
body.v4 .kb-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--g-700);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--g-200);
}
body.v4 .kb-head .stage-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
body.v4 .kb-head .stage-dot.hot { background: var(--c-lilac); }
body.v4 .kb-head .stage-dot.book { background: var(--cherry-fill); }
body.v4 .kb-head .stage-dot.rec { background: var(--c-butter); }
body.v4 .kb-head .stage-dot.edit { background: var(--c-sky); }
body.v4 .kb-head .stage-dot.sched { background: var(--c-mint); }
body.v4 .kb-head .stage-dot.pub { background: var(--g-500); }
body.v4 .kb-head .n {
  background: #fff;
  color: var(--g-700);
  padding: 1px 7px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--g-200);
}
body.v4 .kb-card {
  background: var(--g-surface);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  margin-bottom: 6px;
  border: 1px solid var(--g-200);
  cursor: grab;
  position: relative;
}
body.v4 .kb-card:hover {
  border-color: var(--g-400);
  box-shadow: var(--sh-xs);
}
body.v4 .kb-card.urgent { padding-left: 14px; }
body.v4 .kb-card.urgent::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--cherry-fill);
  border-radius: 8px 0 0 8px;
}
body.v4 .kb-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--g-900);
  line-height: 1.3;
}
body.v4 .kb-card-sub {
  font-size: 11px;
  color: var(--g-500);
  margin-top: 2px;
}
body.v4 .kb-card-sub.warn {
  color: var(--cherry);
  font-weight: 600;
}
body.v4 .kb-card-meta {
  display: flex;
  gap: 4px;
  margin-top: 7px;
  align-items: center;
  flex-wrap: wrap;
}
body.v4 .kb-card-mini-pill {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 5px;
  color: var(--on-accent);
}
body.v4 .kb-card-mini-pill.solid-lilac { background: var(--c-lilac); }
body.v4 .kb-card-mini-pill.solid-mint { background: var(--c-mint); }
body.v4 .kb-card-mini-pill.solid-peach { background: var(--c-peach); }
body.v4 .kb-card-progress {
  height: 3px;
  background: var(--g-200);
  border-radius: 99px;
  margin-top: 7px;
  overflow: hidden;
}
body.v4 .kb-card-progress .fill {
  height: 100%;
  background: var(--cherry-fill);
  border-radius: 99px;
}
body.v4 .kb-card-progress .fill.full { background: var(--c-mint); }
body.v4 .kb-col-add {
  font-size: 11px;
  color: var(--g-500);
  padding: 7px;
  text-align: center;
  cursor: pointer;
  font-weight: 500;
  border: 1px dashed var(--g-300);
  border-radius: 7px;
  margin-top: 4px;
}
body.v4 .kb-col-add:hover {
  color: var(--cherry);
  border-color: var(--cherry);
}
body.v4 .kb-col.pub .kb-card { padding: 7px 11px; }
body.v4 .kb-col.pub .kb-card-title { font-size: 12px; }

/* ─── TASK ROWS (V4 - checkbox left of body) ───────────────── */
body.v4 .task-row {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  align-items: start;
  padding: 10px 0;
  border-bottom: 1px solid var(--g-150);
}
body.v4 .task-row:last-child { border-bottom: none; }
body.v4 .task-row .task-row-check {
  /* native checkbox, V4-styled */
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  border: 1.5px solid var(--g-300);
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .12s, border-color .12s;
  flex-shrink: 0;
}
body.v4 .task-row .task-row-check:hover { border-color: var(--cherry); }
body.v4 .task-row .task-row-check:checked {
  background: var(--cherry-fill);
  border-color: var(--cherry);
}
body.v4 .task-row .task-row-check:checked::after {
  content: '';
  width: 10px;
  height: 10px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l4 4 10-10'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}
body.v4 .task-row-body {
  cursor: pointer;
  min-width: 0;
}
/* Hover state intentionally absent - Peter doesn't want a colour change on
   row hover. Title stays normal until the row is opened. */
body.v4 .task-row-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--g-900);
  line-height: 1.35;
  transition: color .12s, opacity .12s;
}
body.v4 .task-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 3px;
  font-size: 11px;
  color: var(--g-500);
  align-items: center;
}
body.v4 .task-row-stage.pill-soft {
  background: var(--g-100);
  color: var(--g-600);
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
}
body.v4 .task-row-due.overdue,
body.v4 .task-row-due.due-today {
  color: var(--cherry);
  font-weight: 700;
}
/* Title stays neutral; only the date pill carries the cherry beat. */
/* Line-through + faded when done */
body.v4 .task-row.task-done .task-row-title,
body.v4 .task-row.task-done .task-row-meta {
  text-decoration: line-through;
  opacity: 0.55;
}
body.v4 .task-row.task-done .task-row-title { color: var(--g-500); }

/* ─── WEEK CALENDAR - narrow mode (single-day list) ────────── */
/* Triggered by JS adding .wk-cal-narrow to the host when width < 880px */
body.v4 .wk-cal-narrow .wk-cal-modes,
body.v4 .wk-cal-narrow .wk-cal-legend {
  display: none;
}
body.v4 .view-single-day {
  display: block !important;
  padding: 0;
  background: transparent;
}
body.v4 .wk-day-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px;
}
body.v4 .wk-day-item {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: var(--g-surface);
  border: 1px solid var(--g-200);
  align-items: center;
}
body.v4 .wk-day-item.kind-interview { border-left: 3px solid var(--cherry); }
body.v4 .wk-day-item.kind-release   { border-left: 3px solid var(--c-mint); }
body.v4 .wk-day-item.kind-private   { border-left: 3px solid var(--c-sky); }
body.v4 .wk-day-time {
  font-size: 13px;
  font-weight: 600;
  color: var(--g-700);
  font-variant-numeric: tabular-nums;
}
body.v4 .wk-day-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--g-900);
  line-height: 1.3;
}
body.v4 .wk-day-meta {
  font-size: 11px;
  color: var(--g-500);
  margin-top: 2px;
}
body.v4 .wk-day-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--g-500);
  font-size: 13px;
}

/* ─── MODAL Z-INDEX (upload + brief modals must sit above the episode popup) ── */
/* Old styles.css sets .ep-modal-overlay to z-index 2000 and
   .aiceo-modal-overlay (upload / brief modal) to 200 - so when you opened
   Upload from inside the episode popup, it rendered behind. Bump it above. */
body.v4 .aiceo-modal-overlay { z-index: 3000 !important; }

/* ─── CHECKBOX visibility (unchecked was nearly invisible) ──────────── */
/* Old styles.css `.ck-check { border: 1.5px solid var(--ink-light) }` -
   ink-light is so faint the checkbox disappears on white. Strong V4 border
   so the user can SEE the empty checkbox before clicking. */
body.v4 .ck-check {
  border: 1.5px solid var(--g-400) !important;
  background: #fff !important;
}
body.v4 .ck-check:hover:not(:disabled) {
  border-color: var(--cherry) !important;
  background: var(--cherry-soft) !important;
}
body.v4 .ck-check.on {
  background: var(--cherry-fill) !important;
  border-color: var(--cherry) !important;
}

/* ─── DISABLED upload button hover (was still showing cherry border) ──── */
/* Old styles.css `.ck-mini-btn:hover { border-color: var(--cherry) }` didn't
   exclude disabled buttons. Disabled buttons should stay quiet on hover. */
body.v4 .ck-mini-btn[disabled],
body.v4 .ck-mini-btn[disabled]:hover {
  opacity: 0.4;
  cursor: not-allowed;
  border-color: var(--g-200) !important;
  color: var(--g-500) !important;
  background: var(--g-50);
}

/* ─── SCROLLBAR (override old beige thumb) ──────────────────── */
/* Old styles.css sets thumb to var(--line) var(--line) - beige.
   Even with !important the old rule kept winning on some elements. Going
   maximum specificity: html-scoped + universal selector + scrollbar-color
   for non-webkit (Firefox). Now nothing else can override. */
html ::-webkit-scrollbar,
* ::-webkit-scrollbar { width: 8px !important; height: 8px !important; }
html ::-webkit-scrollbar-track,
* ::-webkit-scrollbar-track { background: transparent !important; }
html ::-webkit-scrollbar-thumb,
* ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 99px !important;
  border: none !important;
}
html ::-webkit-scrollbar-thumb:hover,
* ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.30) !important; }
html, body { scrollbar-color: rgba(0,0,0,0.15) transparent; scrollbar-width: thin; }

/* ─── MONTH CALENDAR (V4 - Episodes › Calendar tab) ─────────── */
body.v4 .big-cal-head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--g-200);
}
body.v4 .big-cal-dow {
  padding: 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--g-500);
  text-align: center;
}
body.v4 .big-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 110px;
}
body.v4 .big-cal-cell {
  border-right: 1px solid var(--g-150);
  border-bottom: 1px solid var(--g-150);
  padding: 8px;
  font-size: 11px;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}
body.v4 .big-cal-cell:nth-child(7n) { border-right: none; }
body.v4 .big-cal-cell.muted { background: var(--g-50); color: var(--g-400); }
body.v4 .big-cal-cell .date {
  font-weight: 600;
  font-size: 13px;
  color: var(--g-900);
}
body.v4 .big-cal-cell.today .date {
  background: var(--cherry-fill);
  color: var(--on-accent);
  border-radius: 5px;
  padding: 1px 7px;
  display: inline-block;
}
body.v4 .big-cal-event {
  display: block;
  margin-top: 3px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--on-accent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.v4 .big-cal-event.rec   { background: var(--cherry-fill); }
body.v4 .big-cal-event.edit  { background: var(--c-sky); }
body.v4 .big-cal-event.sched { background: var(--c-mint); }
body.v4 .big-cal-event.pub   { background: var(--g-700); }
body.v4 .big-cal-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
}
body.v4 .big-cal-nav .month-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--g-900);
  padding: 0 10px;
  min-width: 140px;
  text-align: center;
}

/* ─── CHECKLIST TEMPLATE EDITOR (V4) ─────────────────────────── */
body.v4 .tpl-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.v4 .tpl-row {
  display: grid;
  grid-template-columns: 24px 22px 1fr 140px 30px;
  gap: 12px;
  align-items: center;
  padding: 11px 14px;
  background: #fff;
  border: 1px solid var(--g-200);
  border-radius: var(--r-sm);
  font-size: 13px;
  cursor: grab;
  transition: opacity .12s, border-color .12s, box-shadow .12s;
}
body.v4 .tpl-row:active { cursor: grabbing; }
body.v4 .tpl-row.tpl-dragging {
  opacity: 0.4;
  cursor: grabbing;
}
body.v4 .tpl-row.ai { border-left: 3px solid var(--c-lilac); }
body.v4 .tpl-row:hover {
  border-color: var(--g-300);
  box-shadow: var(--sh-xs);
}
body.v4 .tpl-handle {
  color: var(--g-400);
  cursor: grab;
  font-weight: 700;
  text-align: center;
  user-select: none;
  font-size: 14px;
  line-height: 1;
}
body.v4 .tpl-row:hover .tpl-handle { color: var(--g-700); }
body.v4 .tpl-kind {
  display: grid;
  place-items: center;
  color: var(--g-500);
}
body.v4 .tpl-label {
  font-weight: 600;
  color: var(--g-900);
}
body.v4 .tpl-label .stage {
  display: block;
  font-size: 11px;
  color: var(--g-500);
  font-weight: 500;
  margin-top: 1px;
}
body.v4 .tpl-owner {
  font-size: 12px;
  color: var(--g-600);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
body.v4 .tpl-menu {
  cursor: pointer;
  color: var(--g-400);
  text-align: center;
  user-select: none;
}
body.v4 .tpl-menu:hover { color: var(--g-700); }

/* ─── AI CHIEF OF STAFF - V4 tile grid ─────────────────────── */
body.v4 .ceo-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
body.v4 .ceo-tile {
  background: var(--g-surface);
  border: 1px solid var(--g-200);
  border-radius: var(--r);
  padding: 16px 18px;
  transition: border-color .12s, box-shadow .12s;
}
body.v4 .ceo-tile:hover { border-color: var(--g-300); box-shadow: var(--sh-sm); }
body.v4 .ceo-tile-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
body.v4 .ceo-tile-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: var(--c-lilac-bg);
  color: var(--c-lilac);
  display: grid;
  place-items: center;
}
body.v4 .ceo-tile-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--g-900);
}
body.v4 .ceo-tile-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--cherry-fill);
  color: var(--on-accent);
  margin-left: auto;
}
body.v4 .ceo-tile-desc {
  font-size: 12.5px;
  color: var(--g-600);
  line-height: 1.5;
  margin: 0 0 10px;
}
body.v4 .ceo-tile-stat {
  font-size: 24px;
  font-weight: 700;
  color: var(--g-900);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  margin: 8px 0;
}
body.v4 .ceo-tile-cta {
  font-size: 12px;
  color: var(--cherry);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
body.v4 .ceo-tile-foot {
  border-top: 1px solid var(--g-150);
  padding-top: 10px;
  margin-top: 10px;
  font-size: 11px;
  color: var(--g-500);
}
body.v4 .ceo-tile-skel {
  background: var(--g-100);
  border-radius: 4px;
  height: 14px;
}
body.v4 .ceo-config-label {
  font-size: 11px;
  color: var(--g-500);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
body.v4 .aiceo-subhdr {
  font-size: 13px;
  color: var(--g-700);
  margin-bottom: 10px;
}

/* aiceo-modal - generic modal pattern across pages */
body.v4 .aiceo-modal {
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--sh-xl);
  max-width: 560px;
  width: 100%;
  overflow: hidden;
}
body.v4 .aiceo-modal-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--g-200);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
body.v4 .aiceo-modal-headicon {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: var(--g-100);
  display: grid;
  place-items: center;
  color: var(--g-700);
  flex-shrink: 0;
}
body.v4 .aiceo-modal-headtitle {
  font-size: 15px;
  font-weight: 600;
  color: var(--g-900);
}
body.v4 .aiceo-modal-headsub {
  font-size: 12px;
  color: var(--g-500);
  margin-top: 2px;
  line-height: 1.4;
}
body.v4 .aiceo-modal-close {
  font-size: 20px;
  color: var(--g-500);
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 4px 10px;
}
body.v4 .aiceo-modal-close:hover { color: var(--g-900); }
body.v4 .aiceo-modal-body {
  padding: 18px 22px;
  max-height: 60vh;
  overflow: auto;
  font-size: 13px;
  color: var(--g-700);
  line-height: 1.55;
}
body.v4 .aiceo-modal-foot {
  padding: 14px 20px;
  background: var(--g-100);
  border-top: 1px solid var(--g-200);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Activity feed (used by My Work + Chief) */
body.v4 .activity-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
body.v4 .activity-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--g-150);
  align-items: center;
}
body.v4 .activity-row:last-child { border-bottom: none; }
body.v4 .activity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cherry-fill);
}
body.v4 .activity-row-body { font-size: 13px; color: var(--g-700); line-height: 1.4; }
body.v4 .activity-row-actor { font-weight: 600; color: var(--g-900); }
body.v4 .activity-row-event { color: var(--g-700); }
body.v4 .activity-row-time { font-size: 11px; color: var(--g-500); white-space: nowrap; }

/* Tier filter (Guests) */
body.v4 .tier-filter {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}
body.v4 .tier-filter-btn {
  background: #fff;
  border: 1px solid var(--g-200);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--g-700);
  cursor: pointer;
  font-family: var(--f-v4);
}
body.v4 .tier-filter-btn.active {
  background: var(--g-800);
  color: var(--on-accent);
  border-color: var(--g-800);
}

/* Metric tiles (analytics) */
body.v4 .metric-card,
body.v4 .metric-tile {
  background: var(--g-surface);
  border: 1px solid var(--g-200);
  border-radius: 10px;
  padding: 14px 16px;
}
body.v4 .metric-label {
  font-size: 11px;
  color: var(--g-500);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
body.v4 .metric-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--g-900);
  font-variant-numeric: tabular-nums;
  margin-top: 6px;
}
body.v4 .metric-delta { font-size: 12px; color: var(--c-mint); margin-top: 4px; }
body.v4 .metric-delta.down { color: var(--cherry); }

/* Cal alerts (calendar page) */
body.v4 .cal-alerts {
  background: var(--cherry-soft);
  border: 1px solid rgba(184,0,43,0.18);
  border-left: 3px solid var(--cherry);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
}

/* ─── UNIVERSAL - V4 styling for cross-page primitives ────── */

/* Old .ep-tabs (used by Pipeline-style pages still on legacy markup) */
body.v4 .ep-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--g-200);
  margin-bottom: 16px;
  overflow-x: auto;
  align-items: center;
}
body.v4 .ep-tab {
  background: transparent;
  border: none;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--g-600);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  margin-bottom: -1px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-v4);
}
body.v4 .ep-tab:hover { color: var(--g-800); }
body.v4 .ep-tab.active,
body.v4 .ep-tab.on {
  color: var(--cherry);
  border-bottom-color: var(--cherry);
  font-weight: 600;
}
body.v4 .ep-tab-badge {
  background: var(--g-150);
  color: var(--g-600);
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 5px;
  font-weight: 600;
  margin-left: 2px;
}
body.v4 .ep-tab.active .ep-tab-badge,
body.v4 .ep-tab.on .ep-tab-badge {
  background: var(--cherry-soft);
  color: var(--cherry);
}
body.v4 .ep-tabs-spacer { flex: 1; }

/* WB (Work Block) cards - used on Dashboard + My Work + Chief */
body.v4 .wb-card,
body.v4 .wb-card-row {
  background: #fff;
  border: 1px solid var(--g-200);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}
body.v4 .wb-card:hover,
body.v4 .wb-card-row:hover { border-color: var(--g-400); box-shadow: var(--sh-xs); }
body.v4 .wb-card-title,
body.v4 .wb-card-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--g-900);
}
body.v4 .wb-card-meta,
body.v4 .wb-card-sub {
  font-size: 11px;
  color: var(--g-500);
  margin-top: 2px;
}
body.v4 .wb-card-list { display: flex; flex-direction: column; gap: 6px; }

/* Brain modal overlay (used by My Work / wb-preview / brain chips) */
body.v4 .brain-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(14,14,16,0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 3000;
  padding: 24px;
}
body.v4 .brain-modal {
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--sh-xl);
  max-width: 560px;
  width: 100%;
  overflow: hidden;
}
body.v4 .brain-modal-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--g-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
body.v4 .brain-modal-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--g-900);
}
body.v4 .brain-modal-close {
  font-size: 20px;
  color: var(--g-500);
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 4px 10px;
}
body.v4 .brain-modal-close:hover { color: var(--g-900); }
body.v4 .brain-modal-body {
  padding: 20px;
  max-height: 60vh;
  overflow: auto;
}
body.v4 .brain-modal-body-text {
  font-size: 14px;
  color: var(--g-700);
  line-height: 1.55;
  margin: 0 0 14px;
}
body.v4 .brain-modal-foot {
  padding: 14px 20px;
  background: var(--g-100);
  border-top: 1px solid var(--g-200);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Legacy buttons - make them V4-shaped */
body.v4 .btn-primary {
  background: var(--cherry-fill);
  color: var(--on-accent);
  border: none;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-v4);
  box-shadow: var(--sh-cherry);
}
body.v4 .btn-secondary {
  background: #fff;
  color: var(--g-800);
  border: 1px solid var(--g-200);
  padding: 8px 14px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-v4);
}
body.v4 .btn-secondary:hover { border-color: var(--g-400); }
body.v4 .btn-ghost {
  background: transparent;
  color: var(--g-600);
  border: none;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  font-family: var(--f-v4);
  text-decoration: none;
}
body.v4 .btn-ghost:hover { background: var(--g-100); color: var(--g-900); }
body.v4 .btn-sm { padding: 4px 8px; font-size: 11px; }

/* Form inputs */
body.v4 .form-input,
body.v4 input[type="text"].form-input,
body.v4 input[type="email"].form-input,
body.v4 input[type="date"].form-input,
body.v4 input[type="time"].form-input,
body.v4 input[type="number"].form-input,
body.v4 textarea.form-input,
body.v4 select.form-input {
  width: 100%;
  padding: 8px 11px;
  border: 1px solid var(--g-200);
  border-radius: 7px;
  font-size: 13px;
  font-family: var(--f-v4);
  color: var(--g-900);
  background: #fff;
}
body.v4 .form-input:focus {
  outline: none;
  border-color: var(--cherry);
  box-shadow: 0 0 0 3px var(--cherry-tint);
}

/* Old page-hero styles wrapper - make sure it doesn't reintroduce the old beige hero */
body.v4 .page-hero-wrap { margin-bottom: 0; }
body.v4 .page-hero { display: none; }  /* in case any page still uses raw .page-hero markup */

/* Old generic task-empty / placeholders */
body.v4 .task-empty,
body.v4 .panel-skel {
  padding: 28px 16px;
  text-align: center;
  color: var(--g-500);
  font-size: 13px;
}
body.v4 .task-empty.err { color: var(--cherry); }

/* Old avatar tones still seen across legacy pages */
body.v4 .avatar.peter   { background: var(--c-mint); color: var(--on-accent); }
body.v4 .avatar.chelsea { background: var(--c-lilac); color: var(--on-accent); }
body.v4 .avatar.curt    { background: var(--c-peach); color: var(--on-accent); }
body.v4 .avatar.conor   { background: var(--c-peach); color: var(--on-accent); }
body.v4 .avatar.alec    { background: var(--c-sky); color: var(--on-accent); }
body.v4 .avatar.tiny { width: 18px; height: 18px; font-size: 9px; }
body.v4 .avatar {
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  width: 26px; height: 26px;
  font-size: 11px;
  font-weight: 600;
  color: var(--on-accent);
  letter-spacing: -0.01em;
}

/* Old task-row (My Work uses both this AND the V4 task-row I added earlier) */
body.v4 .task-list { display: flex; flex-direction: column; gap: 0; }
body.v4 .task-row-assignee {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Old "row spread" + "small" utilities seen across pages */
body.v4 .row { display: flex; align-items: center; gap: 10px; }
body.v4 .row.spread { justify-content: space-between; }
body.v4 .small,
body.v4 .text-muted.small { font-size: 11px; color: var(--g-500); }
body.v4 .text-muted { color: var(--g-500); }
body.v4 .mono { font-family: 'SF Mono', ui-monospace, Menlo, Monaco, monospace; font-variant-numeric: tabular-nums; }

/* Topic-pill style (used by pipeline form + page-hero topics) */
body.v4 .tp-pill,
body.v4 .topic-pill {
  background: var(--g-100);
  color: var(--g-700);
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 5px;
  display: inline-block;
}

/* Pill-soft and pill-solid (used everywhere across legacy pages) */
body.v4 .pill-soft {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  background: var(--g-100);
  color: var(--g-700);
}
body.v4 .pill-soft.tone-cherry { background: var(--cherry-soft); color: var(--cherry); }
body.v4 .pill-soft.tone-mint   { background: var(--c-mint-bg); color: var(--c-mint); }
body.v4 .pill-soft.tone-peach  { background: var(--c-peach-bg); color: var(--c-peach); }
body.v4 .pill-soft.tone-lilac  { background: var(--c-lilac-bg); color: var(--c-lilac); }
body.v4 .pill-soft.tone-sky    { background: var(--c-sky-bg); color: var(--c-sky); }
body.v4 .pill-soft.tone-butter { background: var(--c-butter-bg); color: var(--c-butter); }

/* Settings page common patterns */
body.v4 .settings-section,
body.v4 .ai-agent-card,
body.v4 .integration-card {
  background: #fff;
  border: 1px solid var(--g-200);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 12px;
}

/* Chat persona switcher + bubbles */
body.v4 .chat-bubble {
  background: #fff;
  border: 1px solid var(--g-200);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 6px;
}
body.v4 .chat-bubble.mine {
  background: var(--cherry-fill);
  color: var(--on-accent);
  border-color: var(--cherry);
  align-self: flex-end;
}

/* Generic .form-grid + .field + field labels used by various forms */
body.v4 .form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  background: #fff;
  padding: 14px;
  border: 1px solid var(--g-200);
  border-radius: 10px;
}
body.v4 .form-label,
body.v4 .field-label {
  font-size: 11px;
  color: var(--g-500);
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}
body.v4 .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
body.v4 .form-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--g-700);
}

/* ─── INTEL PAGE - V4 styling for all 7 tabs ───────────────── */
/* Existing class names from intel.js stay in place; we override their
   visual treatment here so all 7 tabs look V4 without rewriting JS. */

/* Stat tiles (Briefing tab + Audience tab top rows) */
body.v4 .stat-tile {
  background: var(--g-surface);
  border: 1px solid var(--g-200);
  border-radius: 10px;
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
  transition: border-color .12s, box-shadow .12s;
}
body.v4 .stat-tile:hover { border-color: var(--g-300); box-shadow: var(--sh-sm); }
body.v4 .stat-tile-eyebrow {
  font-size: 11px;
  color: var(--g-500);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
body.v4 .stat-tile-value {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--g-900);
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
}
body.v4 .stat-tile-row { display: flex; align-items: baseline; gap: 8px; }
body.v4 .stat-tile-sub {
  font-size: 12px;
  color: var(--c-mint);
  font-weight: 500;
  margin-top: 4px;
}
body.v4 .stat-tile.accent-cherry { background: var(--cherry-fill); color: var(--on-accent); border: none; }
body.v4 .stat-tile.accent-cherry .stat-tile-eyebrow { color: rgba(255,255,255,0.72); }
body.v4 .stat-tile.accent-cherry .stat-tile-value { color: var(--on-accent); }
body.v4 .stat-tile.accent-cherry .stat-tile-sub { color: #ffd2db; }
body.v4 .stat-tile.accent-lilac .stat-tile-sub { color: var(--c-lilac); }
body.v4 .stat-tile.accent-butter .stat-tile-sub { color: var(--c-butter); }
body.v4 .stat-tile.accent-mint .stat-tile-sub { color: var(--c-mint); }

/* Intel banner (drift signal) */
body.v4 .intel-banner {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  background: var(--cherry-soft);
  border: 1px solid rgba(184,0,43,0.18);
  border-left: 3px solid var(--cherry);
  border-radius: 10px;
  align-items: flex-start;
}
body.v4 .intel-banner-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: var(--cherry-fill);
  color: var(--on-accent);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

/* Section head (across all tabs) */
body.v4 .section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
body.v4 .section-head h2 {
  font-size: 14px;
  font-weight: 600;
  color: var(--g-900);
  margin: 0;
  letter-spacing: -0.01em;
}
body.v4 .section-head .card-action,
body.v4 .card-action {
  font-size: 12px;
  color: var(--cherry);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}
body.v4 .card-action:hover { color: var(--cherry-deep); }

/* Card (generic container) */
body.v4 .card {
  background: var(--g-surface);
  border: 1px solid var(--g-200);
  border-radius: var(--r);
}

/* Briefing target rows */
body.v4 .intel-target {
  background: var(--g-surface);
  border: 1px solid var(--g-200);
  border-radius: 0;
  padding: 16px 18px;
  border-bottom: 1px solid var(--g-150);
  margin-bottom: 0;
  cursor: pointer;
  transition: background .12s;
}
body.v4 .card .intel-target:first-child { border-radius: 12px 12px 0 0; }
body.v4 .card .intel-target:last-child { border-radius: 0 0 12px 12px; border-bottom: none; }
body.v4 .intel-target:hover { background: var(--g-50); }
body.v4 .intel-target-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--g-900);
}
body.v4 .intel-target-role {
  font-size: 11px;
  color: var(--g-500);
  margin-top: 2px;
}
body.v4 .intel-target-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

/* Kanban (intel pipeline) */
body.v4 .kanban-col {
  background: var(--g-50);
  border: 1px solid var(--g-200);
  border-radius: 10px;
  padding: 12px;
  min-height: 340px;
}
body.v4 .kanban-col-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--g-700);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--g-200);
}
body.v4 .kanban-col-title { color: var(--g-700); font-weight: 600; }
body.v4 .kanban-col-count {
  background: #fff;
  color: var(--g-700);
  padding: 1px 7px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--g-200);
}

/* Intel kanban cards */
body.v4 .intel-kcard {
  background: var(--g-surface);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  margin-bottom: 6px;
  border: 1px solid var(--g-200);
  cursor: pointer;
  position: relative;
  transition: border-color .12s, box-shadow .12s;
}
body.v4 .intel-kcard:hover { border-color: var(--g-400); box-shadow: var(--sh-xs); }
body.v4 .intel-kcard.priority { padding-left: 14px; }
body.v4 .intel-kcard.priority::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--cherry-fill);
  border-radius: 8px 0 0 8px;
}
body.v4 .intel-kcard-flag {
  font-size: 9px;
  font-weight: 700;
  color: var(--cherry);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
body.v4 .intel-kcard-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--g-900);
  line-height: 1.3;
}
body.v4 .intel-kcard-role {
  font-size: 11px;
  color: var(--g-500);
  margin-top: 2px;
}
body.v4 .intel-kcard-tag { margin-top: 7px; }
body.v4 .intel-kcard-hook {
  font-size: 11.5px;
  color: var(--g-600);
  margin-top: 6px;
  line-height: 1.4;
  border-top: 1px solid var(--g-150);
  padding-top: 6px;
}

/* Heat pill (intel-heat) */
body.v4 .intel-heat {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-accent);
  display: inline-block;
  white-space: nowrap;
}
body.v4 .intel-heat.heat-hot { background: var(--cherry-fill); }
body.v4 .intel-heat.heat-warm { background: var(--c-butter); }
body.v4 .intel-heat.heat-played { background: var(--g-500); }

/* Data table (Topic Radar + Audience) */
body.v4 .data-table {
  width: 100%;
  border-collapse: collapse;
}
body.v4 .data-table th {
  background: var(--g-100);
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--g-500);
  border-bottom: 1px solid var(--g-200);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
body.v4 .data-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--g-150);
  font-size: 13px;
  vertical-align: middle;
  color: var(--g-700);
}
body.v4 .data-table tr:last-child td { border-bottom: none; }
body.v4 .data-table tr:hover td { background: var(--g-50); }

/* Pill variants (across tabs) */
body.v4 .pill,
body.v4 .pill-soft,
body.v4 .pill-solid {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  color: var(--on-accent);
}
body.v4 .pill.tone-ink,
body.v4 .pill-soft.tone-ink   { background: var(--g-700); color: var(--on-accent); }
body.v4 .pill.tone-mint,
body.v4 .pill-soft.tone-mint  { background: var(--c-mint); color: var(--on-accent); }
body.v4 .pill.tone-peach,
body.v4 .pill-soft.tone-peach { background: var(--c-peach); color: var(--on-accent); }
body.v4 .pill.tone-lilac,
body.v4 .pill-soft.tone-lilac { background: var(--c-lilac); color: var(--on-accent); }
body.v4 .pill.tone-rose,
body.v4 .pill-soft.tone-rose  { background: var(--c-rose); color: var(--on-accent); }
body.v4 .pill-solid { background: var(--cherry-fill); color: var(--on-accent); }

/* Topic radar cards (used as alternative to data-table view) */
body.v4 .topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
body.v4 .topic-card {
  background: var(--g-surface);
  border: 1px solid var(--g-200);
  border-radius: var(--r);
  padding: 16px;
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}
body.v4 .topic-card:hover { border-color: var(--cherry); box-shadow: var(--sh-sm); }
body.v4 .topic-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--g-900);
  letter-spacing: -0.01em;
}
body.v4 .topic-heat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--cherry);
  margin-top: 6px;
}
body.v4 .topic-snip {
  font-size: 12px;
  color: var(--g-600);
  margin-top: 10px;
  line-height: 1.5;
}
body.v4 .heat-bar { display: flex; gap: 2px; margin-top: 8px; }
body.v4 .heat-bar .seg {
  flex: 1;
  height: 5px;
  background: var(--g-200);
  border-radius: 99px;
}
body.v4 .heat-bar .seg.on { background: var(--cherry-fill); }

/* Competitor feed rows */
body.v4 .comp-item {
  background: var(--g-surface);
  border: 1px solid var(--g-200);
  border-radius: 10px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 14px;
  align-items: center;
  margin-bottom: 8px;
}
body.v4 .comp-thumb {
  width: 48px;
  height: 48px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--on-accent);
  background: var(--g-500);
}
body.v4 .comp-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--g-900);
  line-height: 1.3;
}
body.v4 .comp-meta {
  font-size: 11px;
  color: var(--g-500);
  margin-top: 4px;
}

/* Audience pulse items */
body.v4 .pulse-item {
  display: flex;
  gap: 14px;
  padding: 14px 18px;
  background: var(--g-surface);
  border: 1px solid var(--g-200);
  border-radius: 10px;
  margin-bottom: 8px;
  align-items: flex-start;
}
body.v4 .pulse-source {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  color: var(--on-accent);
  background: var(--cherry-fill);
}
body.v4 .pulse-quote {
  font-size: 13.5px;
  color: var(--g-900);
  line-height: 1.5;
  font-style: italic;
}
body.v4 .pulse-meta {
  font-size: 11px;
  color: var(--g-500);
  margin-top: 6px;
  display: flex;
  gap: 10px;
}
body.v4 .pulse-sentiment {
  display: inline-flex;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
body.v4 .pulse-sentiment.pos { background: var(--c-mint); }
body.v4 .pulse-sentiment.neg { background: var(--cherry-fill); }
body.v4 .pulse-sentiment.neu { background: var(--g-400); }

/* UK calendar event rows */
body.v4 .cal-event {
  background: #fff;
  border: 1px solid var(--g-200);
  border-left: 4px solid var(--cherry);
  border-radius: 10px;
  padding: 14px 18px;
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 16px;
  align-items: center;
  margin-bottom: 8px;
}
body.v4 .cal-date {
  font-size: 11px;
  color: var(--g-700);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
body.v4 .cal-date .day {
  font-size: 22px;
  display: block;
  line-height: 1;
  font-weight: 700;
  color: var(--g-900);
}
body.v4 .cal-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--g-900);
}
body.v4 .cal-desc {
  font-size: 12px;
  color: var(--g-500);
  margin-top: 3px;
}

/* Pitch library cards */
body.v4 .pitch-card {
  background: var(--g-surface);
  border: 1px solid var(--g-200);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 8px;
}
body.v4 .pitch-subject {
  font-size: 14px;
  font-weight: 600;
  color: var(--g-900);
}
body.v4 .pitch-snip {
  font-size: 11.5px;
  color: var(--g-500);
  margin-top: 4px;
  line-height: 1.4;
}
body.v4 .pitch-stats {
  font-size: 11px;
  color: var(--g-600);
  text-align: right;
}
body.v4 .pitch-stats strong {
  display: block;
  color: var(--g-900);
  font-size: 13px;
}

/* Grid helpers used across intel tabs */
body.v4 .grid { display: grid; gap: 12px; }
body.v4 .grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; }
body.v4 .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
body.v4 .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }

/* Eyebrow used liberally */
body.v4 .eyebrow {
  font-size: 11px;
  font-weight: 600;
  color: var(--g-500);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* mt-* utilities */
body.v4 .mt-4 { margin-top: 16px; }
body.v4 .mt-6 { margin-top: 22px; }

/* ─── EPISODE CENTRE - side card V4 styling ──────────────── */
/* The existing .ec-pane-card class is used by every side-column card
   (Pitch / Booked details / Guest dossier / Guest news / Show prep /
   AI artifacts / etc). V4-style them all here in one place rather
   than rewriting each render function. */
body.v4 .ec-pane-card {
  background: var(--g-surface);
  border: 1px solid var(--g-200);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
  box-shadow: none;
}
body.v4 .ec-pane-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}
body.v4 .ec-pane-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--g-100);
  color: var(--g-700);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
body.v4 .ec-pane-icon i {
  width: 14px;
  height: 14px;
}
body.v4 .ec-pane-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--g-900);
  letter-spacing: -0.01em;
}
body.v4 .ec-pane-sub {
  font-size: 11px;
  color: var(--g-500);
  margin-top: 1px;
}
body.v4 .ec-pane-body {
  font-size: 13px;
  color: var(--g-700);
  line-height: 1.5;
}
body.v4 .ec-detail {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--g-150);
  align-items: baseline;
}
body.v4 .ec-detail:last-child { border-bottom: none; }
body.v4 .ec-detail-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--g-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
body.v4 .ec-detail-value {
  font-size: 13px;
  color: var(--g-900);
  font-weight: 500;
  word-break: break-word;
}
body.v4 .ec-detail-value p,
body.v4 .ec-prose {
  font-size: 12.5px;
  color: var(--g-700);
  font-weight: 400;
  line-height: 1.55;
  margin: 0;
}
body.v4 .ec-pane-empty {
  padding: 18px 8px;
  text-align: center;
  color: var(--g-500);
  font-size: 12px;
}
body.v4 .ec-yes {
  color: var(--c-mint);
  font-weight: 600;
}
body.v4 .ec-no {
  color: var(--c-peach);
  font-weight: 600;
}

/* Dossier-specific (Guest dossier card on Booked tab) */
body.v4 .ec-dossier-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 8px;
  padding: 5px 0;
  font-size: 12px;
  border-bottom: 1px solid var(--g-150);
}
body.v4 .ec-dossier-row:last-child { border-bottom: none; }
body.v4 .ec-dossier-row-label {
  color: var(--g-500);
  font-weight: 500;
}
body.v4 .ec-dossier-row-value {
  color: var(--g-900);
  word-break: break-word;
}
body.v4 .ec-dossier-item {
  display: block;
  padding: 8px 0;
  border-bottom: 1px solid var(--g-150);
  text-decoration: none;
}
body.v4 .ec-dossier-item:last-child { border-bottom: none; }
body.v4 .ec-dossier-item:hover .ec-dossier-item-title { color: var(--cherry); }
body.v4 .ec-dossier-item-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--g-900);
  line-height: 1.4;
  transition: color .12s;
}
body.v4 .ec-dossier-item-sub {
  font-size: 11px;
  color: var(--g-500);
  margin-top: 2px;
  line-height: 1.4;
}

/* Eyebrow used inside dossier / news / show prep sections */
body.v4 .eyebrow {
  font-size: 11px;
  font-weight: 600;
  color: var(--g-500);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Booked tab split layout - show prep main + dossier side. Now that the
   context column is full-width below the checklist, give the show prep
   card the lion's share and let the dossier sit beside it. */
body.v4 .ec-booked-split {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 16px;
  margin: 0 0 12px;
  align-items: start;
}
@media (max-width: 1100px) {
  body.v4 .ec-booked-split { grid-template-columns: 1fr; }
}
body.v4 .ep-context-below { width: 100%; }

/* Episode Centre strip (legacy thin context strip) - hide in V4 since
   the new V4 hero already shows episode metadata. */
body.v4 .ec-strip { display: none; }

/* ─── EMPTY STATES (cards) ─────────────────────────────────── */
body.v4 .empty-state {
  padding: 28px 16px;
  text-align: center;
  color: var(--g-500);
  font-size: 13px;
  line-height: 1.5;
}

/* ============================================================
   CHECKLIST - uploaded file pill (name + × delete)
   ============================================================ */
body.v4 .ck-file-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 10px;
  background: var(--g-100);
  border: 1px solid var(--g-200);
  border-radius: var(--r-pill);
  font-size: 12px;
  max-width: 260px;
}
body.v4 .ck-file-pill > i {
  width: 12px; height: 12px;
  color: var(--g-500);
  flex-shrink: 0;
}
body.v4 .ck-file-pill-name {
  color: var(--g-900);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
body.v4 .ck-file-pill-name:hover { text-decoration: underline; }
body.v4 .ck-file-pill-x {
  background: transparent;
  border: 0;
  color: var(--g-500);
  width: 18px; height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
}
body.v4 .ck-file-pill-x:hover {
  background: var(--cherry-fill);
  color: var(--on-accent);
}

/* ============================================================
   CHECKLIST - "(brief required)" tag on AI tasks without a brief
   ============================================================ */
body.v4 .ck-brief-required {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--cherry);
  letter-spacing: 0;
  vertical-align: baseline;
}

/* ============================================================
   EPISODE POPUP - Transcript file upload row
   ============================================================ */
body.v4 .ep-upload-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.v4 .ep-upload-row input[type="file"] {
  font-family: inherit;
  font-size: 13px;
  color: var(--g-700);
}
/* Style the native "Choose File" button - supported on Chrome/Edge/Firefox/
   Safari modern. The button is the only visible affordance; the filename
   text that follows uses the native browser styling. */
body.v4 .ep-upload-row input[type="file"]::file-selector-button {
  background: var(--cherry-fill);
  border: 0;
  color: var(--on-accent);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  cursor: pointer;
  margin-right: 12px;
  transition: background .12s;
}
body.v4 .ep-upload-row input[type="file"]::file-selector-button:hover {
  background: #9b0024;
}
/* WebKit fallback (older Safari / older Chromium) */
body.v4 .ep-upload-row input[type="file"]::-webkit-file-upload-button {
  background: var(--cherry-fill);
  border: 0;
  color: var(--on-accent);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  cursor: pointer;
  margin-right: 12px;
}
body.v4 .ep-upload-status {
  font-size: 12px;
  padding: 8px 12px;
  background: var(--g-50);
  border: 1px solid var(--g-200);
  border-radius: 6px;
}
body.v4 .ep-upload-empty { color: var(--g-500); }
body.v4 .ep-upload-link {
  color: var(--cherry);
  text-decoration: none;
  font-weight: 600;
}
body.v4 .ep-upload-link:hover { text-decoration: underline; }

/* Legacy styles.css adds margin-top:14px to .ck-wrap. The aside doesn't
   have it, so the checklist box hangs ~14px below the side panel. Zero
   it inside V4 - the ep-layout grid gap already provides spacing. */
body.v4 .ck-wrap { margin-top: 0 !important; }

/* ============================================================
   EPISODE CENTRE - AI panel Generate / Feedback / Regenerate
   ============================================================ */
body.v4 .ec-ai-generate-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--cherry-fill);
  border: 0;
  color: var(--on-accent);
  font-size: 12px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .12s;
}
body.v4 .ec-ai-generate-btn:hover { background: #9b0024; }
body.v4 .ec-ai-generate-btn i { width: 12px; height: 12px; }
body.v4 .ec-ai-pulse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--cherry-soft);
  color: var(--cherry);
  font-size: 14px;
  animation: ecAiPulse 1.2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes ecAiPulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.15); opacity: 0.55; }
}

/* ============================================================
   EPISODE CENTRE - clamp long prose in side-rail rows to 2 lines
   ============================================================ */
body.v4 .ec-prose-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--g-800);
}

/* ============================================================
   EPISODE CENTRE - Edit button on detail cards (top-right)
   ============================================================ */
body.v4 .ec-pane-edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--g-200);
  color: var(--g-700);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  transition: background .12s, border-color .12s, color .12s;
}
body.v4 .ec-pane-edit:hover {
  background: var(--cherry-soft);
  border-color: var(--cherry);
  color: var(--cherry);
}
body.v4 .ec-pane-edit i {
  width: 12px;
  height: 12px;
}

/* ============================================================
   EPISODE POPUP - Booking details box (Pitch section reveal)
   ============================================================ */
body.v4 .ep-booking-box {
  margin-top: 16px;
  padding: 18px 18px 14px;
  background: var(--g-50);
  border: 1px solid var(--g-200);
  border-radius: 10px;
}
body.v4 .ep-booking-box-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--g-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 14px;
}
/* Comfortable vertical rhythm between every block inside the box.
   Applies to ep-field, ep-field-row AND any direct child div (the
   additional-guests host doesn't use ep-field). */
body.v4 .ep-booking-box > .ep-field,
body.v4 .ep-booking-box > .ep-field-row,
body.v4 .ep-booking-box > div {
  margin-bottom: 14px;
}
body.v4 .ep-booking-box > .ep-field:last-child,
body.v4 .ep-booking-box > .ep-field-row:last-child,
body.v4 .ep-booking-box > div:last-child {
  margin-bottom: 0;
}
body.v4 .ep-booking-box .ep-field-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
body.v4 .ep-booking-box .ep-toggle-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--g-200);
  border-radius: var(--r-sm);
}

/* ============================================================
   EPISODE POPUP - three-button footer row
   ============================================================ */
body.v4 .ep-modal-foot-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
}
body.v4 .ep-modal-foot-row .btn-primary,
body.v4 .ep-modal-foot-row .btn-secondary {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
body.v4 .ep-modal-foot-row .ep-modal-foot-links {
  flex: 1 1 100%;
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ============================================================
   TOPIC PILLS - × on the right of the word, not below
   ============================================================ */
body.v4 .tp-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
body.v4 .tp-pill-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
}
body.v4 .tp-pill-x:hover { opacity: 1; }

/* ============================================================
   TEAM PRESENCE - green/grey dot + label
   ============================================================ */
body.v4 .pulse-dot.online {
  background: var(--c-mint);
  box-shadow: 0 0 0 2px rgba(47, 133, 90, 0.18);
}
body.v4 .pulse-dot.offline {
  background: var(--g-300);
  box-shadow: none;
}
body.v4 .presence-label {
  font-size: 11px;
  font-weight: 700;
  margin-left: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
body.v4 .presence-label.online  { color: var(--c-mint); }
body.v4 .presence-label.offline { color: var(--g-500); }
body.v4 .team-status-sep {
  color: var(--g-300);
  margin: 0 6px;
}

/* ============================================================
   CALENDAR - V4 rebuild (Day = Production Board, Week = Production
   Board, Month = Agenda split). Ports CALENDAR_PROTOTYPES.html
   verbatim. The legacy .wk-cal-grid.view-{day,week,month} grids
   in styles.css are neutralised below so inner renderers control
   their own layout.
   ============================================================ */

/* Legend dot colour overrides - legacy styles.css uses --lilac-fg for
   interview / --mint-fg for release. Re-point them to the V4 palette so
   the legend matches the actual panel/chip colours. */
body.v4 .wk-cal-legend-dot.interview { background: var(--cherry-fill) !important; }
body.v4 .wk-cal-legend-dot.release   { background: var(--c-mint) !important; }
body.v4 .wk-cal-legend-dot.private   { background: var(--c-sky) !important; }

/* Neutralise the legacy view-* wrappers (they used to force the
   grid wrapper into a 60px+7×1fr / 7×1fr / block grid that fights
   the prototype's internal layout). */
body.v4 .wk-cal-grid,
body.v4 .wk-cal-grid.view-day,
body.v4 .wk-cal-grid.view-week,
body.v4 .wk-cal-grid.view-month,
body.v4 .wk-cal-grid.view-single-day {
  display: block !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  gap: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

/* ─── DAY VIEW - Production Board (two-pane) ─────────────── */
body.v4 .c-day {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  /* Default grid stretch - both panes match height. The shorter side's
     empty-state padding is intentionally small so empty panes don't
     bulge past the typical filled row. */
}
body.v4 .c-pane {
  background: #fff;
  border: 1px solid var(--g-200);
  border-radius: 10px;
  overflow: hidden;
}
body.v4 .c-pane-head {
  padding: 12px 16px;
  background: var(--g-50);
  border-bottom: 1px solid var(--g-200);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
body.v4 .c-pane.studio  .c-pane-head { background: var(--cherry-soft); border-bottom-color: var(--cherry-soft); }
body.v4 .c-pane.publish .c-pane-head { background: var(--c-mint-bg);   border-bottom-color: var(--c-mint-bg); }
body.v4 .c-pane-name {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cherry);
}
body.v4 .c-pane.publish .c-pane-name { color: var(--c-mint); }
body.v4 .c-pane-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--g-600);
}
body.v4 .c-pane-body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* No min-height - pane wraps to its content. The empty state has its
     own padding so an empty pane still has visible breathing room. */
}
body.v4 .c-row {
  display: grid;
  grid-template-columns: 60px 1fr;
  padding: 10px 12px;
  background: var(--g-50);
  border-radius: var(--r-sm);
  gap: 12px;
  align-items: center;
}
/* Clickable rows / chips open the standard episode popup. */
body.v4 .c-row.is-clickable,
body.v4 .c-week-item.is-clickable,
body.v4 .b-event.is-clickable {
  cursor: pointer;
  transition: background .12s, transform .08s;
}
body.v4 .c-row.is-clickable:hover { background: var(--g-100); }
body.v4 .c-week-item.is-clickable:hover { filter: brightness(0.97); }
body.v4 .b-event.is-clickable:hover { transform: translateY(-1px); }
body.v4 .c-row.empty {
  color: var(--g-400);
  text-align: center;
  padding: 14px 12px;   /* matches a filled .c-row's vertical footprint */
  font-size: 12px;
  background: transparent;
  display: block;
}
body.v4 .c-row-time {
  font-size: 13px;
  font-weight: 700;
  color: var(--g-700);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
body.v4 .c-row-time .sub {
  font-size: 10px;
  font-weight: 600;
  color: var(--g-500);
  display: block;
  margin-top: 1px;
}
body.v4 .c-row-body { font-size: 13px; }
body.v4 .c-row-title { font-weight: 700; color: var(--g-900); }
body.v4 .c-row-meta { font-size: 11px; color: var(--g-600); margin-top: 2px; }
body.v4 .c-busy-footer {
  padding: 8px 12px;
  font-size: 11px;
  color: var(--g-500);
  border-top: 1px dashed var(--g-200);
  margin-top: 8px;
}
body.v4 .c-busy-footer strong { color: var(--c-sky); }

/* ─── WEEK VIEW - Production Board (7-col, sections hide when empty) ── */
body.v4 .c-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
body.v4 .c-week-col {
  background: #fff;
  border: 1px solid var(--g-200);
  border-radius: 10px;
  overflow: hidden;
}
body.v4 .c-week-col.today {
  border-color: var(--cherry);
  box-shadow: 0 0 0 2px var(--cherry-soft);
}
body.v4 .c-week-col-head {
  padding: 8px 10px;
  background: var(--g-900);
  color: var(--on-accent);
  text-align: center;
}
body.v4 .c-week-col.today .c-week-col-head { background: var(--cherry-fill); }
body.v4 .c-week-day-name {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.7;
}
body.v4 .c-week-day-num { font-size: 18px; font-weight: 700; margin-top: 1px; }
body.v4 .c-week-section {
  border-top: 1px solid var(--g-200);
  padding: 6px 8px;
}
body.v4 .c-week-section-label {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
body.v4 .c-week-section.studio  .c-week-section-label { color: var(--cherry); }
body.v4 .c-week-section.publish .c-week-section-label { color: var(--c-mint); }
body.v4 .c-week-section.busy    .c-week-section-label { color: var(--c-sky); }
body.v4 .c-week-item {
  font-size: 11px;
  padding: 5px 7px;
  border-radius: 5px;
  background: var(--g-50);
  margin-bottom: 4px;
  font-weight: 600;
  color: var(--g-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.v4 .c-week-item.studio  { background: var(--cherry-soft); color: var(--cherry); }
body.v4 .c-week-item.publish { background: var(--c-mint-bg);   color: var(--c-mint); }
body.v4 .c-week-item.busy    { background: var(--c-sky-bg);    color: var(--c-sky); }
body.v4 .c-week-item .t {
  display: block;
  font-size: 9px;
  font-weight: 800;
  opacity: 0.7;
  margin-bottom: 1px;
}
body.v4 .c-week-col-body-empty {
  padding: 18px 8px;
  text-align: center;
  font-size: 11px;
  color: var(--g-400);
}

/* ─── MONTH VIEW - Agenda split (mini cal left, agenda right) ── */
body.v4 .b-month-split {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
}
body.v4 .b-mini-cal {
  background: #fff;
  border: 1px solid var(--g-200);
  border-radius: 10px;
  overflow: hidden;
  align-self: start;
}
body.v4 .b-mini-cal-head {
  padding: 10px 14px;
  background: var(--g-50);
  font-size: 13px;
  font-weight: 700;
  color: var(--g-800);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--g-200);
}
body.v4 .b-mini-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 8px;
  gap: 2px;
}
body.v4 .b-mini-cal-dow {
  font-size: 10px;
  font-weight: 700;
  color: var(--g-500);
  text-align: center;
  padding: 4px 0;
}
body.v4 .b-mini-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  border-radius: 6px;
  color: var(--g-700);
  position: relative;
  cursor: pointer;
  border: 0;
  background: transparent;
  font-family: inherit;
}
body.v4 .b-mini-day:hover:not(.pad):not(.today) { background: var(--g-100); }
body.v4 .b-mini-day.pad { color: var(--g-300); cursor: default; }
body.v4 .b-mini-day.has::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--cherry-fill);
}
body.v4 .b-mini-day.today {
  background: var(--cherry-fill);
  color: var(--on-accent);
  font-weight: 700;
}
body.v4 .b-mini-day.today.has::after { background: #fff; }
body.v4 .b-mini-day.sel:not(.today) {
  background: var(--g-200);
  font-weight: 700;
}
body.v4 .b-month-detail {
  background: #fff;
  border: 1px solid var(--g-200);
  border-radius: 10px;
  padding: 18px;
}
body.v4 .b-month-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--g-100);
  padding-bottom: 12px;
}
body.v4 .b-month-detail-title { font-size: 18px; font-weight: 700; color: var(--g-900); }
body.v4 .b-month-detail-sub { font-size: 12px; color: var(--g-500); }
body.v4 .b-event {
  display: grid;
  grid-template-columns: 116px 1fr auto;  /* widened so "15:00 – 17:00" fits */
  gap: 14px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: var(--g-50);
  border-left: 3px solid var(--g-300);
  align-items: center;
  margin-bottom: 6px;
}
body.v4 .b-event.rec  { border-left-color: var(--cherry); background: var(--cherry-soft); }
body.v4 .b-event.rel  { border-left-color: var(--c-mint);   background: var(--c-mint-bg); }
body.v4 .b-event.busy { border-left-color: var(--c-sky);    background: var(--c-sky-bg); }
body.v4 .b-event-time {
  font-size: 13px;
  font-weight: 700;
  color: var(--g-800);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
body.v4 .b-event-body { font-size: 13px; }
body.v4 .b-event-title { font-weight: 700; color: var(--g-900); font-size: 14px; }
body.v4 .b-event-meta { font-size: 11px; color: var(--g-600); margin-top: 2px; }
body.v4 .b-event-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.65);
  color: var(--g-700);
}
body.v4 .b-event.rec  .b-event-tag { color: var(--cherry); }
body.v4 .b-event.rel  .b-event-tag { color: var(--c-mint); }
body.v4 .b-event.busy .b-event-tag { color: var(--c-sky); }
body.v4 .b-month-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--g-400);
  font-size: 13px;
}

/* When the calendar host is narrow (<880px) the prototype splits stack */
body.v4 .wk-cal-narrow .c-day        { grid-template-columns: 1fr; }
body.v4 .wk-cal-narrow .b-month-split { grid-template-columns: 1fr; }

/* ─── EPISODE CENTRE - AI artifact renderer styles ────────── */
/* Used by renderArtifactInline() in episode-centre.js to display
   structured AI output (titles, intro options, edits, clips, social,
   brief, mentions). Each block is a labelled section inside the
   ec-pane-card AI panel. */
body.v4 .ec-art-block {
  padding: 12px 0;
  border-bottom: 1px solid var(--g-150);
}
body.v4 .ec-art-block:first-child { padding-top: 0; }
body.v4 .ec-art-block:last-child { border-bottom: none; padding-bottom: 0; }
body.v4 .ec-art-headline {
  font-size: 15px;
  font-weight: 700;
  color: var(--g-900);
  line-height: 1.35;
  margin: 4px 0 6px;
  letter-spacing: -0.01em;
}
body.v4 .ec-art-subhead {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--g-500);
  margin: 10px 0 6px;
}
body.v4 .ec-art-thumbnail-text {
  font-size: 12px;
  color: var(--g-600);
  margin-top: 4px;
}
body.v4 .ec-art-thumbnail-text strong { color: var(--g-900); font-weight: 600; }
body.v4 .ec-art-list {
  margin: 6px 0 0;
  padding-left: 20px;
}
body.v4 .ec-art-list li {
  font-size: 13px;
  color: var(--g-700);
  line-height: 1.55;
  margin-bottom: 4px;
}
body.v4 .ec-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}
body.v4 .ec-art-timecode {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--g-500);
  background: var(--g-100);
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}
body.v4 .ec-art-quote {
  font-size: 13px;
  color: var(--g-700);
  font-style: italic;
  line-height: 1.5;
}
body.v4 .ec-art-pulls {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.v4 .ec-art-pulls li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: start;
}
body.v4 .ec-art-ts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
body.v4 .ec-art-ts-table td {
  padding: 7px 0;
  border-bottom: 1px solid var(--g-150);
  vertical-align: top;
}
body.v4 .ec-art-ts-table td:first-child { width: 90px; padding-right: 12px; }
body.v4 .ec-art-ts-table tr:last-child td { border-bottom: none; }

body.v4 .ec-art-edits {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body.v4 .ec-art-edit-card {
  background: var(--g-50);
  border-radius: var(--r-sm);
  padding: 10px 12px;
}
body.v4 .ec-art-edit-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
body.v4 .ec-art-edit-reason {
  font-size: 13px;
  color: var(--g-700);
  line-height: 1.5;
}
body.v4 .ec-art-edit-action {
  font-size: 12.5px;
  color: var(--g-700);
  margin-top: 4px;
  line-height: 1.5;
}
body.v4 .ec-art-edit-action strong { color: var(--g-900); font-weight: 600; }

body.v4 .ec-clip-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
body.v4 .ec-clip-card {
  background: var(--g-50);
  border-radius: var(--r-sm);
  padding: 12px 14px;
}
body.v4 .ec-clip-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  gap: 10px;
}
body.v4 .ec-clip-num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--g-600);
}
body.v4 .ec-clip-time {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--g-500);
}
body.v4 .ec-clip-hook {
  font-size: 14px;
  font-weight: 700;
  color: var(--g-900);
  line-height: 1.35;
  margin-bottom: 6px;
}
body.v4 .ec-clip-block { margin-top: 8px; }
body.v4 .ec-clip-transcript {
  font-style: italic;
  color: var(--g-700);
  white-space: pre-wrap;
}

body.v4 .ec-art-tweet {
  background: var(--g-50);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--g-800);
  white-space: pre-wrap;
  margin-top: 4px;
}
body.v4 .ec-art-posts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}
body.v4 .ec-art-platform {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--g-600);
  margin-bottom: 4px;
}
body.v4 .ec-art-why {
  color: var(--g-500);
  font-size: 12.5px;
  font-style: italic;
}
body.v4 .ec-art-mention-card {
  background: var(--g-50);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  margin-bottom: 8px;
}
body.v4 .ec-art-mention-head {
  font-size: 13.5px;
  color: var(--g-900);
}

/* ─── WAVE 44B - Episode Centre redesign ──────────────────── */
/* Single-wave redesign per EPISODE_CENTRE_REDESIGN.html. Surfaces:
   tab strip → stage progress bar, glance stage cards, collapsible
   dossier, blue card restraint, AI accordion, feedback chips, Edit
   Brief mixed (per-axis + context cards), Show prep split editor. */

/* ── Stage progress bar (replaces .tabs) ─────────────────── */
body.v4 .ec-stage-bar {
  display: flex;
  align-items: center;
  gap: 0;
  background: #fff;
  border: 1px solid var(--g-200);
  border-radius: var(--r);
  padding: 14px 16px;
}
body.v4 .ec-stage-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  user-select: none;
  transition: opacity 120ms ease;
}
body.v4 .ec-stage-node--future { opacity: 0.5; }
body.v4 .ec-stage-node:hover .ec-stage-label { color: var(--cherry); }
body.v4 .ec-stage-node--future:hover .ec-stage-label { color: var(--g-500); }
body.v4 .ec-stage-dot {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 12px;
  background: var(--g-200);
  color: var(--g-500);
  position: relative;
  flex-shrink: 0;
}
body.v4 .ec-stage-node--reached .ec-stage-dot {
  background: var(--c-mint);
  color: var(--on-accent);
}
body.v4 .ec-stage-node--current .ec-stage-dot {
  background: var(--cherry-fill);
  color: var(--on-accent);
}
body.v4 .ec-stage-dot-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--cherry-fill);
  opacity: 0.6;
  animation: ec-stage-pulse 1.6s ease-out infinite;
}
@keyframes ec-stage-pulse {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(1.8); opacity: 0; }
}
body.v4 .ec-stage-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--g-500);
  text-align: center;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}
body.v4 .ec-stage-node--current .ec-stage-label {
  color: var(--cherry);
  font-weight: 700;
}
body.v4 .ec-stage-node.is-active .ec-stage-label {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: currentColor;
}
body.v4 .ec-stage-rule {
  flex: 0 0 8%;
  height: 2px;
  background: var(--g-200);
  margin: 0 2px;
  align-self: center;
  margin-bottom: 17px;  /* drop the rule to dot height, not label height */
}
body.v4 .ec-stage-rule--reached { background: var(--c-mint); }
body.v4 .ec-stage-rule--current {
  background: linear-gradient(90deg, var(--c-mint), var(--cherry));
}

/* ── Glance stage card ──────────────────────────────────── */
body.v4 .ec-glance-card { padding: 14px 16px; }
body.v4 .ec-glance-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
body.v4 .ec-glance-icon {
  width: 26px; height: 26px;
  border-radius: 7px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
body.v4 .ec-glance-icon i { width: 13px; height: 13px; }
body.v4 .ec-glance-icon--lilac  { background: var(--c-lilac-bg);  color: var(--c-lilac); }
body.v4 .ec-glance-icon--mint   { background: var(--c-mint-bg);   color: var(--c-mint); }
body.v4 .ec-glance-icon--peach  { background: var(--c-peach-bg);  color: var(--c-peach); }
body.v4 .ec-glance-icon--sky    { background: var(--c-sky-bg);    color: var(--c-sky); }
body.v4 .ec-glance-icon--cherry { background: var(--cherry-soft); color: var(--cherry); }
body.v4 .ec-glance-icon--butter { background: var(--c-butter-bg); color: var(--c-butter); }
body.v4 .ec-glance-icon--rose   { background: var(--c-rose-bg);   color: var(--c-rose); }
body.v4 .ec-glance-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--g-900);
  flex: 1;
  letter-spacing: -0.01em;
}
body.v4 .ec-glance-edit {
  padding: 4px 8px;
  font-size: 11px;
}
body.v4 .ec-glance-edit i { width: 12px; height: 12px; }
body.v4 .ec-glance-primary {
  font-size: 13px;
  font-weight: 600;
  color: var(--g-900);
  line-height: 1.4;
  margin-bottom: 2px;
}
body.v4 .ec-glance-secondary {
  font-size: 12px;
  color: var(--g-500);
  line-height: 1.4;
}

/* ── Collapsible Guest Dossier ──────────────────────────── */
body.v4 .ec-dossier-basic {
  background: var(--g-50);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  margin-bottom: 10px;
}
body.v4 .ec-dossier-section {
  border-top: 1px solid var(--g-150);
  padding: 0;
}
body.v4 .ec-dossier-section[open] { padding-bottom: 6px; }
body.v4 .ec-dossier-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  cursor: pointer;
  list-style: none;
  font-size: 11px;
  font-weight: 700;
  color: var(--g-600);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
body.v4 .ec-dossier-summary::-webkit-details-marker { display: none; }
body.v4 .ec-dossier-summary i { width: 14px; height: 14px; color: var(--g-500); }
body.v4 .ec-dossier-summary-label { flex: 1; }
body.v4 .ec-dossier-summary-count {
  background: var(--g-100);
  color: var(--g-700);
  padding: 1px 8px;
  border-radius: var(--r-pill);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
body.v4 .ec-dossier-summary-chev {
  color: var(--g-400);
  transition: transform 120ms ease;
}
body.v4 .ec-dossier-summary-chev i { width: 14px; height: 14px; }
body.v4 .ec-dossier-section[open] .ec-dossier-summary-chev {
  transform: rotate(180deg);
}
body.v4 .ec-dossier-section-body {
  padding: 4px 0 4px;
}
body.v4 .ec-dossier-empty {
  background: var(--g-50);
  border-radius: var(--r-sm);
  padding: 16px;
  text-align: center;
  margin-top: 8px;
}
body.v4 .ec-dossier-empty-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--g-700);
  margin-bottom: 4px;
}
body.v4 .ec-dossier-empty-sub {
  font-size: 11.5px;
  color: var(--g-500);
  margin-bottom: 10px;
  line-height: 1.5;
}
body.v4 .ec-dossier-refresh-btn {
  font-size: 12px;
  padding: 6px 12px;
}
body.v4 .ec-dossier-refresh-btn i { width: 12px; height: 12px; }
body.v4 .ec-dossier-footer {
  margin-top: 10px;
  padding-top: 8px;
  font-size: 10.5px;
  color: var(--g-400);
  text-align: right;
}

/* ── AI panels accordion ─────────────────────────────────── */
body.v4 .ec-ai-accordion {
  background: #fff;
  border: 1px solid var(--g-200);
  border-radius: var(--r);
  overflow: hidden;
}
body.v4 .ec-ai-accordion + .ec-ai-accordion { margin-top: 18px; }
body.v4 .ec-ai-accordion-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--g-50);
  border-bottom: 1px solid var(--g-200);
}
body.v4 .ec-ai-accordion-eye {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--g-600);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
body.v4 .ec-ai-accordion-eye i { width: 13px; height: 13px; color: var(--c-lilac); }
body.v4 .ec-ai-accordion-gen-all {
  font-size: 11.5px;
  padding: 5px 12px;
}
body.v4 .ec-ai-accordion-gen-all i { width: 12px; height: 12px; }
body.v4 .ec-ai-accordion-list { display: flex; flex-direction: column; }
body.v4 .ec-ai-row { border-bottom: 1px solid var(--g-150); }
body.v4 .ec-ai-row:last-child { border-bottom: none; }
body.v4 .ec-ai-row[open] { background: var(--c-lilac-bg); }
body.v4 .ec-ai-row[open].is-empty,
body.v4 .ec-ai-row[open].needs-brief { background: var(--g-50); }
body.v4 .ec-ai-row-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
  transition: background 100ms ease;
}
body.v4 .ec-ai-row-head::-webkit-details-marker { display: none; }
body.v4 .ec-ai-row-head:hover { background: var(--g-50); }
body.v4 .ec-ai-row[open] .ec-ai-row-head:hover { background: transparent; }
body.v4 .ec-ai-row-icon {
  width: 24px; height: 24px;
  border-radius: 6px;
  background: var(--g-150);
  color: var(--g-500);
  display: grid; place-items: center;
  flex-shrink: 0;
}
body.v4 .ec-ai-row.is-done .ec-ai-row-icon,
body.v4 .ec-ai-row.is-running .ec-ai-row-icon {
  background: var(--c-lilac-bg);
  color: var(--c-lilac);
}
body.v4 .ec-ai-row-icon i { width: 13px; height: 13px; }
body.v4 .ec-ai-row-text { flex: 1; min-width: 0; }
body.v4 .ec-ai-row-label {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--g-900);
  letter-spacing: -0.01em;
}
body.v4 .ec-ai-row-sub {
  font-size: 11.5px;
  color: var(--g-500);
  margin-top: 1px;
}
body.v4 .ec-ai-row-sub--running { color: var(--c-lilac); font-weight: 600; }
body.v4 .ec-ai-row-sub--needsbrief { color: var(--cherry); font-weight: 600; }
body.v4 .ec-ai-row-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
body.v4 .ec-ai-row-btn {
  padding: 5px 8px;
  font-size: 11.5px;
}
body.v4 .ec-ai-row-btn i { width: 12px; height: 12px; }
body.v4 .ec-ai-row-brief,
body.v4 .ec-ai-row-gen {
  padding: 5px 12px;
  font-size: 11.5px;
}
body.v4 .ec-ai-row-brief i,
body.v4 .ec-ai-row-gen i { width: 12px; height: 12px; }
body.v4 .ec-ai-row-pulse {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--cherry-fill);
  animation: ec-ai-row-pulse 1.2s ease-in-out infinite;
}
@keyframes ec-ai-row-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.3; transform: scale(0.7); }
}
body.v4 .ec-ai-row-chev {
  color: var(--g-400);
  transition: transform 120ms ease;
}
body.v4 .ec-ai-row-chev i { width: 14px; height: 14px; }
body.v4 .ec-ai-row[open] .ec-ai-row-chev { transform: rotate(180deg); }
body.v4 .ec-ai-row-body {
  padding: 0 16px 16px;
  background: #fff;
}

/* ── Blue card restraint pass ────────────────────────────── */
body.v4 .ec-bluecard {
  background: var(--g-surface);
  border: 1px solid var(--g-200);
  border-radius: 14px;
  padding: 22px 24px;
}
body.v4 .ec-bluecard-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}
body.v4 .ec-bluecard-head-icon {
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  background: var(--c-lilac-bg);
  color: var(--c-lilac);
  display: grid; place-items: center;
  flex-shrink: 0;
}
body.v4 .ec-bluecard-head-icon i { width: 16px; height: 16px; }
body.v4 .ec-bluecard-head-text { flex: 1; min-width: 0; }
body.v4 .ec-bluecard-head-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--g-900);
  letter-spacing: -0.01em;
}
body.v4 .ec-bluecard-head-sub {
  font-size: 11.5px;
  color: var(--g-500);
  margin-top: 2px;
}
body.v4 .ec-bluecard-head-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
body.v4 .ec-bluecard-head-actions .btn-secondary,
body.v4 .ec-bluecard-head-actions .btn-ghost {
  padding: 6px 12px;
  font-size: 12px;
}
body.v4 .ec-bluecard-head-actions i { width: 12px; height: 12px; }

/* Opener - the loudest thing on the card. */
body.v4 .ec-bluecard-opener {
  background: linear-gradient(135deg, var(--cherry), var(--cherry-deep));
  color: var(--on-accent);
  border-radius: var(--r);
  padding: 22px 24px;
  margin-bottom: 24px;
}
body.v4 .ec-bluecard-opener-eye {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.70);
  text-transform: uppercase;
}
body.v4 .ec-bluecard-opener-q {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  margin: 10px 0 14px;
}
body.v4 .ec-bluecard-opener-after {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
}
body.v4 .ec-bluecard-opener-fu {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.85);
}
body.v4 .ec-bluecard-opener-fu li { margin: 3px 0; }

/* Acts - quiet structural scaffolding. */
body.v4 .ec-bluecard-act {
  border-left: 3px solid var(--g-300);
  padding-left: 20px;
  margin-bottom: 18px;
}
body.v4 .ec-bluecard-act:last-of-type { margin-bottom: 0; }
body.v4 .ec-bluecard-act-eye {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--g-500);
  text-transform: uppercase;
}
body.v4 .ec-bluecard-act-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--g-900);
  margin: 2px 0 14px;
  letter-spacing: -0.01em;
}
body.v4 .ec-bluecard-block { margin-top: 14px; }
body.v4 .ec-bluecard-block-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--g-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
body.v4 .ec-bluecard-big-q {
  font-size: 16px;
  font-weight: 600;
  color: var(--g-900);
  line-height: 1.4;
}
body.v4 .ec-bluecard-fu {
  margin: 0;
  padding-left: 18px;
  font-size: 13.5px;
  color: var(--g-700);
}
body.v4 .ec-bluecard-fu li { margin: 4px 0; }

/* Tough questions - collapsed by default. */
body.v4 .ec-bluecard-tough {
  margin-top: 14px;
  background: var(--g-50);
  border-radius: var(--r-sm);
  padding: 10px 14px;
}
body.v4 .ec-bluecard-tough-summary {
  display: flex;
  align-items: center;
  cursor: pointer;
  list-style: none;
  font-size: 11px;
  font-weight: 700;
  color: var(--g-600);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  gap: 8px;
}
body.v4 .ec-bluecard-tough-summary::-webkit-details-marker { display: none; }
body.v4 .ec-bluecard-tough-eye { flex: 1; }
body.v4 .ec-bluecard-tough-chev {
  color: var(--g-400);
  transition: transform 120ms ease;
}
body.v4 .ec-bluecard-tough-chev i { width: 14px; height: 14px; }
body.v4 .ec-bluecard-tough[open] .ec-bluecard-tough-chev { transform: rotate(180deg); }
body.v4 .ec-bluecard-tough-body {
  margin-top: 10px;
  padding-left: 14px;
  border-left: 2px solid var(--g-300);
}
body.v4 .ec-bluecard-tough-setup {
  margin: 0 0 10px;
  padding-left: 14px;
  font-size: 12.5px;
  color: var(--g-600);
}
body.v4 .ec-bluecard-tough-setup li { margin: 3px 0; }
body.v4 .ec-bluecard-tough-q {
  font-size: 14px;
  font-weight: 600;
  color: var(--g-900);
  font-style: italic;
}

/* Feedback panel at the bottom. */
body.v4 .ec-bluecard-feedback {
  margin-top: 22px;
  background: var(--g-50);
  border: 1px solid var(--g-150);
  border-radius: 10px;
  padding: 16px 18px;
}
body.v4 .ec-bluecard-feedback-sub {
  font-size: 12px;
  color: var(--g-600);
  margin-bottom: 10px;
}
body.v4 .ec-bluecard-feedback-input {
  width: 100%;
  padding: 10px 12px;
  font-family: var(--f-v4);
  font-size: 13.5px;
  border: 1px solid var(--g-300);
  border-radius: var(--r-sm);
  background: #fff;
  resize: vertical;
}
body.v4 .ec-bluecard-feedback-actions {
  margin-top: 10px;
  text-align: right;
}
body.v4 .ec-bluecard-empty {
  padding: 24px;
  text-align: center;
  color: var(--g-500);
  font-size: 13px;
}

/* ── Feedback modal chips + scope ────────────────────────── */
body.v4 .ec-feedback-chips-eye {
  font-size: 11px;
  font-weight: 600;
  color: var(--g-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
body.v4 .ec-feedback-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
body.v4 .ec-feedback-chip {
  background: #fff;
  border: 1px solid var(--g-200);
  border-radius: var(--r-pill);
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--g-700);
  cursor: pointer;
  transition: all 100ms ease;
}
body.v4 .ec-feedback-chip:hover {
  border-color: var(--cherry);
  color: var(--cherry);
  background: var(--cherry-tint);
}
body.v4 .ec-feedback-scope {
  margin-top: 14px;
  background: var(--g-50);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  font-size: 12px;
  color: var(--g-600);
  line-height: 1.5;
}
body.v4 .ec-feedback-scope strong { color: var(--g-900); }

/* ── Edit Brief modal (mixed: per-axis + context cards) ───── */
body.v4 .ec-brief-body {
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
body.v4 .ec-brief-body--axes { padding: 0; gap: 0; }
body.v4 .ec-brief-body--axes > .ec-brief-axis {
  padding: 16px 22px;
  border-bottom: 1px solid var(--g-150);
}
body.v4 .ec-brief-body--axes > .field {
  padding: 16px 22px;
  border-top: 1px solid var(--g-150);
}
body.v4 .ec-brief-axis-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
body.v4 .ec-brief-axis-hint {
  font-size: 11.5px;
  color: var(--g-500);
}
body.v4 .ec-brief-axis-input {
  width: 100%;
  padding: 10px 12px;
  font-family: var(--f-v4);
  font-size: 13px;
  border: 1px solid var(--g-300);
  border-radius: var(--r-sm);
  resize: vertical;
}

/* Context cards (free-text mode) */
body.v4 .ec-brief-knows {
  background: var(--c-sky-bg);
  border: 1px solid #cde6ff;
  border-radius: 10px;
  padding: 12px 14px;
}
body.v4 .ec-brief-knows-eye {
  font-size: 11px;
  font-weight: 700;
  color: var(--c-sky);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
body.v4 .ec-brief-knows-list {
  margin: 4px 0 0;
  padding-left: 18px;
  font-size: 12.5px;
  color: var(--g-700);
}
body.v4 .ec-brief-knows-list li { margin: 3px 0; }
body.v4 .ec-brief-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
body.v4 .ec-brief-chip {
  background: #fff;
  border: 1px solid var(--g-200);
  border-radius: var(--r-pill);
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--g-700);
  cursor: pointer;
}
body.v4 .ec-brief-chip:hover {
  border-color: var(--cherry);
  color: var(--cherry);
  background: var(--cherry-tint);
}

/* ── Show prep split editor + live preview ───────────────── */
body.v4 .ec-sp-edit-modal { overflow: hidden; }
body.v4 .ec-sp-edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex: 1;
  min-height: 0;
}
body.v4 .ec-sp-edit-left {
  padding: 16px 18px;
  border-right: 1px solid var(--g-150);
  overflow-y: auto;
  max-height: calc(92vh - 80px);
}
body.v4 .ec-sp-edit-right {
  background: var(--g-50);
  overflow-y: auto;
  max-height: calc(92vh - 80px);
}
body.v4 .ec-sp-edit-eye {
  font-size: 11px;
  font-weight: 700;
  color: var(--g-500);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
body.v4 .ec-sp-edit-sections {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 4px;
}
body.v4 .ec-sp-edit-section {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--g-50);
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  text-align: left;
  transition: background 100ms ease;
}
body.v4 .ec-sp-edit-section:hover { background: var(--g-100); }
body.v4 .ec-sp-edit-section.is-active {
  background: var(--cherry-soft);
}
body.v4 .ec-sp-edit-section-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--g-400);
  flex-shrink: 0;
}
body.v4 .ec-sp-edit-section.is-active .ec-sp-edit-section-dot { background: var(--cherry-fill); }
body.v4 .ec-sp-edit-section-text { display: flex; flex-direction: column; min-width: 0; }
body.v4 .ec-sp-edit-section-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--g-700);
}
body.v4 .ec-sp-edit-section.is-active .ec-sp-edit-section-label {
  color: var(--cherry);
}
body.v4 .ec-sp-edit-section-sub {
  font-size: 10.5px;
  color: var(--g-500);
  margin-top: 1px;
}
body.v4 .ec-sp-edit-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 6px;
  border-top: 1px solid var(--g-150);
}
body.v4 .ec-sp-edit-form .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.v4 .ec-sp-edit-form .field-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--g-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
body.v4 .ec-sp-edit-form .form-input {
  width: 100%;
  padding: 8px 12px;
  font-family: var(--f-v4);
  font-size: 13px;
  border: 1px solid var(--g-300);
  border-radius: var(--r-sm);
  resize: vertical;
}
body.v4 .ec-sp-edit-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.v4 .ec-sp-edit-list-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
body.v4 .ec-sp-edit-list-row .form-input { flex: 1; }
body.v4 .ec-sp-edit-list-del {
  width: 26px; height: 26px;
  border: 1px solid var(--g-200);
  background: #fff;
  border-radius: 6px;
  color: var(--g-500);
  cursor: pointer;
  font-size: 16px;
  flex-shrink: 0;
}
body.v4 .ec-sp-edit-list-del:hover {
  color: var(--cherry);
  border-color: var(--cherry);
}
body.v4 .ec-sp-edit-list-empty {
  font-size: 11.5px;
  color: var(--g-400);
  font-style: italic;
  padding: 4px 0;
}
body.v4 .ec-sp-edit-add-row {
  font-size: 11.5px;
  padding: 3px 6px;
}
body.v4 .ec-sp-edit-tq {
  border: 1px solid var(--g-200);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  margin-bottom: 10px;
  background: #fff;
}
body.v4 .ec-sp-edit-tq legend {
  font-size: 11px;
  font-weight: 700;
  color: var(--cherry);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0 6px;
}
body.v4 .ec-sp-edit-tq-add {
  margin-top: 6px;
  font-size: 12px;
}
body.v4 .ec-sp-edit-tq-del {
  font-size: 11px;
  color: var(--g-500);
}
body.v4 .ec-sp-edit-tq-del:hover { color: var(--cherry); }
body.v4 .ec-sp-edit-preview {
  padding: 0 18px 18px;
}
body.v4 .ec-sp-edit-preview .ec-bluecard--preview {
  font-size: 80%;
  padding: 18px 20px;
  background: #fff;
}
body.v4 .ec-sp-edit-preview .ec-bluecard-opener {
  padding: 16px 18px;
}
body.v4 .ec-sp-edit-preview .ec-bluecard-opener-q {
  font-size: 16px;
  margin: 8px 0 10px;
}

/* ─── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 1200px) {
  body.v4 .app { grid-template-columns: 200px 1fr; }
  body.v4 .stat-row { grid-template-columns: repeat(2, 1fr); }
  body.v4 .two-col,
  body.v4 .one-one-col { grid-template-columns: 1fr; }
  body.v4 .kanban { grid-template-columns: repeat(3, 1fr); }
  body.v4 .ec-stage-label { font-size: 10px; max-width: 90px; }
  body.v4 .ec-sp-edit-grid { grid-template-columns: 1fr; }
  body.v4 .ec-sp-edit-left { border-right: none; border-bottom: 1px solid var(--g-150); max-height: 50vh; }
  body.v4 .ec-sp-edit-right { max-height: 40vh; }
}

/* ════════════════════════════════════════════════════════════════
   WAVE 45 - APPLE OVERLAY
   Quiet Authority + Highlights applied to every surface, per
   APPLE_APPLIED.html. Cherry retires to live/critical only; blue
   (var(--g-blue)) takes over. Light grey canvas, paper cards, gradient
   stat numerals, light+dark card pairing on dashboards.
   ════════════════════════════════════════════════════════════════ */

/* Apple tokens - extend the V4 palette without removing it. */
body.v4 {
  --apl-canvas:    #f5f5f7;
  --apl-paper:     #ffffff;
  --apl-paper-2:   #fafafa;
  --apl-rule:      #d2d2d7;
  --apl-rule-soft: #ebebef;
  --apl-ink:       #1d1d1f;
  /* Form fields render on a translucent-WHITE surface in BOTH themes (the
     modal chrome stays light in dark mode), so their text must stay dark in
     both. --field-ink is deliberately NOT remapped in the dark block. rgba
     (not hex) keeps css-guard happy. */
  --field-ink:     rgba(29,29,31,1);
  --apl-ink-2:     #424245;
  --apl-ink-3:     #6e6e73;
  --apl-ink-4:     #86868b;
  --apl-ink-5:     #a1a1a6;
  --apl-blue:      #0071e3;
  --apl-blue-2:    #0058b1;
  --apl-blue-bg:   #e8f1fc;
  --apl-blue-soft: #d2e6fb;
  --apl-orange:    #c2410c;
  --apl-orange-bg: #fff1e8;
  --apl-green:     #2f855a;
  --apl-green-bg:  #d6f5e3;
  --apl-lilac:     #5e5ce6;
  --apl-lilac-bg:  #ece9ff;
  --apl-cherry:    #b8002b;
  --apl-cherry-bg: #fde6eb;
  --apl-grad-blue: linear-gradient(180deg, #5e93ff 0%, #0058b1 100%);
  --apl-grad-rose: linear-gradient(180deg, var(--pink-bright) 0%, #b80038 100%);
  --apl-grad-mint: linear-gradient(180deg, var(--green-bright) 0%, #1f6f4a 100%);
  --apl-r-sm: 8px;
  --apl-r:    14px;
  --apl-r-lg: 22px;
  --apl-f-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif;
  --apl-sh: 0 1px 2px rgba(0,0,0,0.03), 0 12px 32px rgba(0,0,0,0.04);
}

/* ─── BODY + APP CANVAS ─────────────────────────────────────── */
body.v4,
html:has(body.v4) {
  background: var(--apl-canvas);
}
body.v4 { color: var(--apl-ink); }
body.v4 .app { background: var(--apl-canvas); }

/* ─── SIDEBAR · light grey · paper-pill active ──────────────── */
body.v4 .sb,
body.v4 .sidebar.sb {
  background: var(--apl-canvas);
  color: var(--apl-ink-2);
  padding: 18px 12px;
  border-right: 1px solid var(--apl-rule-soft);
}
body.v4 .sb-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 10px 18px;
  margin-bottom: 4px;
  border-bottom: none;
}
body.v4 .sb-brand-mark {
  width: 28px; height: 28px; border-radius: var(--r-sm);
  background: var(--apl-blue);
  color: var(--on-accent); font-weight: 700; font-size: 13px;
  display: grid; place-items: center;
  letter-spacing: -0.015em;
  box-shadow: none;
}
body.v4 .sb-brand-name {
  font-family: var(--apl-f-display);
  font-size: 15px; font-weight: 700; letter-spacing: -0.015em;
  color: var(--apl-ink);
}
body.v4 .sb-brand-sub {
  font-size: 11.5px; font-weight: 500;
  color: var(--apl-ink-4);
  margin-top: 1px;
  letter-spacing: -0.005em;
}
body.v4 .sb-group {
  font-size: 10.5px; font-weight: 600;
  color: var(--apl-ink-4);
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 14px 10px 4px;
}
body.v4 .sb-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  border-radius: var(--apl-r-sm);
  color: var(--apl-ink-2);
  font-size: 13px; font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  text-decoration: none;
  transition: background 100ms ease, color 100ms ease;
}
body.v4 .sb-item:hover {
  background: var(--apl-paper);
  color: var(--apl-ink);
}
body.v4 .sb-item.on,
body.v4 .sb-item.active {
  background: var(--apl-paper);
  color: var(--apl-ink);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
body.v4 .sb-item .ic { opacity: 0.8; flex-shrink: 0; color: currentColor; }
body.v4 .sb-item.on .ic,
body.v4 .sb-item.active .ic { opacity: 1; color: var(--apl-blue); }
body.v4 .sb-item .count {
  margin-left: auto;
  font-size: 11px; font-weight: 600;
  background: var(--apl-paper);
  color: var(--apl-ink-4);
  padding: 1px 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--apl-rule-soft);
}
body.v4 .sb-item.on .count,
body.v4 .sb-item.active .count {
  background: var(--apl-blue-bg);
  color: var(--apl-blue);
  border-color: transparent;
}

/* ─── TOPBAR · light, blue focus ring ───────────────────────── */
body.v4 .topbar {
  margin-bottom: 22px;
}
body.v4 .topbar-search input,
body.v4 .topbar-search > input#global-search {
  background: var(--apl-paper);
  border: 1px solid var(--apl-rule-soft);
  border-radius: var(--apl-r-sm);
  color: var(--apl-ink);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%2386868b' stroke-width='1.6'><circle cx='6.5' cy='6.5' r='4.5'/><path d='M10 10l3 3'/></svg>");
}
body.v4 .topbar-search input:focus {
  outline: none;
  border-color: var(--apl-blue);
  box-shadow: 0 0 0 3px rgba(0,113,227,0.15);
}
body.v4 .topbar-action {
  background: var(--apl-paper);
  border: 1px solid var(--apl-rule-soft);
  color: var(--apl-ink-2);
  border-radius: var(--r-pill);
  padding: 6px 13px;
  font-size: 12px;
  font-weight: 500;
}
body.v4 .topbar-action:hover {
  border-color: var(--apl-rule);
  color: var(--apl-ink);
}
body.v4 .topbar-user {
  border-left: 1px solid var(--apl-rule-soft);
}
body.v4 .topbar-avatar {
  background: var(--apl-blue);
}
body.v4 .topbar-user-name { color: var(--apl-ink); }
body.v4 .topbar-user-role { color: var(--apl-ink-3); }

/* ─── HERO · light Apple version (replaces dark charcoal hero) ─ */
body.v4 .hero {
  background: transparent;
  color: var(--apl-ink);
  padding: 4px 0 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--apl-rule-soft);
  border-radius: 0;
}
body.v4 .hero-eyebrow {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--apl-blue);
  text-transform: none;
  letter-spacing: -0.005em;
}
body.v4 .hero h1,
body.v4 .hero-title {
  font-family: var(--apl-f-display);
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.08;
  color: var(--apl-ink);
  margin: 6px 0 8px;
}
body.v4 .hero-sub,
body.v4 .hero p {
  color: var(--apl-ink-2);
  font-size: 16px;
  letter-spacing: -0.005em;
}
/* hero stat row - Apple stat treatment */
body.v4 .hero-stat-row,
body.v4 .stat-row {
  margin-top: 14px;
}
body.v4 .hero-stat .lbl,
body.v4 .stat-tile-label {
  color: var(--apl-ink-4);
  font-weight: 500;
  text-transform: none;
  letter-spacing: -0.005em;
  font-size: 11.5px;
}
body.v4 .hero-stat .val {
  font-family: var(--apl-f-display);
  background: var(--apl-grad-blue);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  font-size: 26px;
  letter-spacing: -0.022em;
}

/* ─── BUTTONS · primary becomes Apple blue pill ─────────────── */
body.v4 .btn-primary {
  background: var(--apl-blue);
  color: var(--on-accent);
  border: none;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--r-pill);
  letter-spacing: -0.005em;
  box-shadow: none;
}
body.v4 .btn-primary:hover { background: var(--apl-blue-2); }
body.v4 .btn-secondary {
  background: var(--apl-paper);
  color: var(--apl-ink);
  border: 1px solid var(--apl-rule);
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--r-pill);
  letter-spacing: -0.005em;
}
body.v4 .btn-secondary:hover {
  border-color: var(--apl-ink-3);
}
body.v4 .btn-ghost {
  background: transparent;
  color: var(--apl-ink-3);
  border: none;
  padding: 6px 10px;
  font-size: 12.5px;
  font-weight: 500;
  border-radius: var(--r-pill);
}
body.v4 .btn-ghost:hover { color: var(--apl-blue); }
body.v4 .card-action {
  color: var(--apl-blue);
  font-size: 12.5px;
  font-weight: 500;
}
body.v4 .card-action:hover { color: var(--apl-blue-2); }

/* ck-mini buttons (checklist row) - keep pill shape, restyle */
body.v4 .ck-mini-btn,
body.v4 .ck-mini {
  background: var(--apl-paper);
  border: 1px solid var(--apl-rule-soft);
  color: var(--apl-ink-2);
  border-radius: var(--r-pill);
  padding: 4px 11px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
body.v4 .ck-mini-btn:hover,
body.v4 .ck-mini:hover {
  border-color: var(--apl-rule);
  color: var(--apl-ink);
}
body.v4 .ck-mini-btn.ck-view-output,
body.v4 .ck-mini.lilac {
  background: var(--apl-lilac-bg);
  color: var(--apl-lilac);
  border-color: transparent;
}

/* ─── CARDS · paper insets on canvas ───────────────────────── */
body.v4 .card,
body.v4 .panel,
body.v4 .stat-tile,
body.v4 .ck-wrap,
body.v4 .ec-pane-card {
  background: var(--apl-paper);
  border: 1px solid var(--apl-rule-soft);
  box-shadow: none;
}
body.v4 .card,
body.v4 .panel,
body.v4 .ec-pane-card,
body.v4 .ck-wrap {
  border-radius: var(--apl-r);
}
body.v4 .stat-tile {
  border-radius: var(--apl-r);
  padding: 18px 20px;
}
body.v4 .stat-tile-value {
  font-family: var(--apl-f-display);
  background: var(--apl-grad-blue);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  letter-spacing: -0.025em;
  font-weight: 700;
}

/* ─── KANBAN · Apple shape (gradient counts) ───────────────── */
body.v4 .kanban-col,
body.v4 .kanban .col {
  background: var(--apl-paper);
  border: 1px solid var(--apl-rule-soft);
  border-radius: var(--apl-r);
}
body.v4 .kanban-col-head,
body.v4 .kanban-col-h {
  border-bottom: 1px solid var(--apl-rule-soft);
}
body.v4 .kanban-col-count {
  font-family: var(--apl-f-display);
  background: var(--apl-grad-blue);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  letter-spacing: -0.022em;
  font-weight: 700;
}

/* ─── TAGS · soft Apple pills ──────────────────────────────── */
body.v4 .pill,
body.v4 .pill-soft,
body.v4 .tp-pill {
  background: var(--apl-canvas);
  color: var(--apl-ink-2);
  border-radius: var(--r-pill);
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: 3px 10px;
  font-size: 11.5px;
}
body.v4 .pill-soft.tone-cherry,
body.v4 .pill.cherry { background: var(--apl-cherry-bg); color: var(--apl-cherry); }
body.v4 .pill-soft.tone-mint,
body.v4 .pill.mint   { background: var(--apl-green-bg); color: var(--apl-green); }
body.v4 .pill-soft.tone-peach,
body.v4 .pill.peach,
body.v4 .pill.orange { background: var(--apl-orange-bg); color: var(--apl-orange); }
body.v4 .pill-soft.tone-lilac,
body.v4 .pill.lilac  { background: var(--apl-lilac-bg); color: var(--apl-lilac); }
body.v4 .pill-soft.tone-sky,
body.v4 .pill.sky,
body.v4 .pill.blue   { background: var(--apl-blue-bg); color: var(--apl-blue); }

/* ─── EYEBROW + SECTION HEADS - Apple weight/colour ────────── */
body.v4 .eyebrow {
  color: var(--apl-ink-4);
  font-weight: 600;
  letter-spacing: 0.05em;
  font-size: 11px;
}
body.v4 .card-eye {
  color: var(--apl-blue);
  letter-spacing: -0.005em;
  text-transform: none;
  font-weight: 500;
  font-size: 12.5px;
}

/* ─── EPISODE-CENTRE STAGE BAR · Apple finish (Wave 44B kept) ─ */
body.v4 .ec-stage-bar {
  background: var(--apl-paper);
  border-color: var(--apl-rule-soft);
}
body.v4 .ec-stage-node--current .ec-stage-dot {
  background: var(--apl-blue);
}
body.v4 .ec-stage-node--reached .ec-stage-dot {
  background: var(--apl-green);
}
body.v4 .ec-stage-node--current .ec-stage-label {
  color: var(--apl-blue);
}
body.v4 .ec-stage-rule--current {
  background: linear-gradient(90deg, var(--apl-green), var(--apl-blue));
}

/* ─── BLUE CARD · Apple opener (replaces cherry gradient) ──── */
body.v4 .ec-bluecard {
  border-color: var(--apl-rule-soft);
  border-radius: var(--apl-r);
}
body.v4 .ec-bluecard-head-icon {
  background: var(--apl-lilac-bg);
  color: var(--apl-lilac);
  border-radius: var(--apl-r-sm);
}
body.v4 .ec-bluecard-head-title {
  font-family: var(--apl-f-display);
  letter-spacing: -0.015em;
}
/* OPTION: Highlights uses dark ink opener. Default to dark Apple ink. */
body.v4 .ec-bluecard-opener {
  background: var(--apl-ink);
  border-radius: var(--apl-r-sm);
}
body.v4 .ec-bluecard-opener-eye {
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.06em;
}
body.v4 .ec-bluecard-opener-q {
  font-family: var(--apl-f-display);
  letter-spacing: -0.015em;
}

/* ─── AI ACCORDION (Wave 44B) · Apple finish ───────────────── */
body.v4 .ec-ai-accordion {
  border-color: var(--apl-rule-soft);
  border-radius: var(--apl-r);
}
body.v4 .ec-ai-accordion-head {
  background: var(--apl-paper-2);
  border-bottom-color: var(--apl-rule-soft);
}
body.v4 .ec-ai-row[open] {
  background: var(--apl-blue-bg);
}
body.v4 .ec-ai-row.is-done .ec-ai-row-icon,
body.v4 .ec-ai-row.is-running .ec-ai-row-icon {
  background: var(--apl-blue-bg);
  color: var(--apl-blue);
}
body.v4 .ec-ai-row-pulse { background: var(--apl-blue); }

/* ─── DOSSIER (Wave 44B) · Apple finish ────────────────────── */
body.v4 .ec-dossier-card { border-color: var(--apl-rule-soft); }
body.v4 .ec-dossier-basic { background: var(--apl-canvas); }
body.v4 .ec-dossier-section { border-color: var(--apl-rule-soft); }
body.v4 .ec-dossier-summary-count {
  background: var(--apl-canvas);
}

/* ─── GLANCE STAGE CARD (Wave 44B) · Apple finish ──────────── */
body.v4 .ec-glance-card {
  border-color: var(--apl-rule-soft);
  border-radius: var(--apl-r);
}
body.v4 .ec-glance-title {
  font-family: var(--apl-f-display);
  letter-spacing: -0.012em;
  color: var(--apl-ink);
}
body.v4 .ec-glance-primary { color: var(--apl-ink); }
body.v4 .ec-glance-secondary { color: var(--apl-ink-3); }

/* ─── MODALS · Apple Quiet Authority shape ─────────────────── */
body.v4 .aiceo-modal-overlay {
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
}
body.v4 .aiceo-modal {
  background: var(--apl-paper);
  border-radius: var(--apl-r);
  border: 1px solid var(--apl-rule-soft);
  box-shadow: 0 16px 40px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.06);
  overflow: hidden;
}
body.v4 .aiceo-modal-head {
  padding: 16px 22px;
  border-bottom: 1px solid var(--apl-rule-soft);
  background: var(--apl-paper);
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
body.v4 .aiceo-modal-headtitle {
  font-family: var(--apl-f-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--apl-ink);
}
body.v4 .aiceo-modal-headsub {
  font-size: 12.5px;
  color: var(--apl-ink-3);
  margin-top: 2px;
  letter-spacing: -0.005em;
}
body.v4 .aiceo-modal-close {
  background: transparent;
  border: none;
  width: 28px; height: 28px;
  color: var(--apl-ink-4);
  font-size: 18px;
  cursor: pointer;
  border-radius: var(--r-pill);
}
body.v4 .aiceo-modal-close:hover {
  background: var(--apl-canvas);
  color: var(--apl-ink);
}
body.v4 .aiceo-modal-body {
  padding: 18px 22px;
  background: var(--apl-paper);
}
body.v4 .aiceo-modal-foot {
  padding: 14px 22px;
  border-top: 1px solid var(--apl-rule-soft);
  background: var(--apl-canvas);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Inputs inside modals + everywhere */
body.v4 .form-input,
body.v4 input[type="text"].form-input,
body.v4 input[type="date"].form-input,
body.v4 input[type="time"].form-input,
body.v4 select.form-input,
body.v4 textarea.form-input {
  background: var(--apl-paper);
  border: 1px solid var(--apl-rule);
  border-radius: var(--apl-r-sm);
  padding: 9px 12px;
  font-size: 13px;
  color: var(--apl-ink);
  /* Safari (esp. when macOS is in dark mode) overrides input text with a faint
     system colour unless -webkit-text-fill-color is pinned. Match the ink token
     so typed text is crisp in both light and dark app modes. (Chelsea, Safari) */
  -webkit-text-fill-color: var(--apl-ink);
  caret-color: var(--apl-ink);
  color-scheme: light;
  font-family: inherit;
}
body.v4.dark .form-input,
body.v4.dark textarea.form-input,
body.v4.dark select.form-input { color-scheme: light; }
/* keep placeholders muted (the text-fill pin above would otherwise darken them in WebKit) */
body.v4 .form-input::placeholder,
body.v4 textarea.form-input::placeholder { -webkit-text-fill-color: var(--apl-ink-4); color: var(--apl-ink-4); opacity: 1; }
body.v4 .form-input:focus,
body.v4 textarea.form-input:focus {
  outline: none;
  border-color: var(--apl-blue);
  box-shadow: 0 0 0 3px rgba(0,113,227,0.15);
}
body.v4 .ep-field-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--apl-ink-4);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  display: block;
}

/* ─── HIGHLIGHTS · light + dark card primitives ────────────── */
/* Used for Dashboard / Pipeline / Episode Centre hero rows.    */
body.v4 .apl-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 14px;
  align-items: stretch;
}
body.v4 .apl-row.tight { grid-template-columns: 1.4fr 1fr 1fr; }
body.v4 .apl-row.two   { grid-template-columns: 1.5fr 1fr; }
body.v4 .apl-row.equal { grid-template-columns: repeat(3, 1fr); }
/* Wave 132 - 4 equal cards (Release / Interview / Shipped / Revenue) */
body.v4 .apl-row.four  { grid-template-columns: repeat(4, 1fr); }
body.v4 .apl-card {
  background: var(--apl-paper);
  border: 1px solid var(--apl-rule-soft);
  border-radius: var(--apl-r-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  min-height: 240px;
}
body.v4 .apl-card.dark {
  background: var(--apl-ink);
  color: var(--on-accent);
  border-color: var(--apl-ink-2);
}
body.v4 .apl-card.compact { min-height: auto; padding: 18px; }
body.v4 .apl-eye {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--apl-ink-4);
  letter-spacing: -0.005em;
}
body.v4 .apl-card.dark .apl-eye { color: rgba(255,255,255,0.5); }
body.v4 .apl-h {
  font-family: var(--apl-f-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.15;
  margin: 6px 0 8px;
  color: var(--apl-ink);
}
body.v4 .apl-card.dark .apl-h { color: var(--on-accent); }
body.v4 .apl-h em { font-style: normal; color: var(--apl-ink-4); }
body.v4 .apl-h b {
  font-weight: 700;
  background: var(--apl-grad-blue);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
body.v4 .apl-sub {
  font-size: 13.5px;
  color: var(--apl-ink-3);
  letter-spacing: -0.005em;
  margin: 0 0 12px;
}
body.v4 .apl-card.dark .apl-sub { color: rgba(255,255,255,0.7); }
body.v4 .apl-foot {
  margin-top: auto;
  display: flex;
  gap: 8px;
  align-items: center;
  padding-top: 12px;
}
body.v4 .apl-dark-num {
  font-family: var(--apl-f-display);
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  margin: 14px 0 8px;
  background: linear-gradient(180deg, var(--hero-blue), #4a9eff);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
body.v4 .apl-dark-num.rose { background: var(--apl-grad-rose); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.v4 .apl-dark-num.mint { background: var(--apl-grad-mint); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Apple two-tone section head */
body.v4 .apl-sec-h {
  font-family: var(--apl-f-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.1;
  margin: 28px 0 14px;
  color: var(--apl-ink);
}
body.v4 .apl-sec-h em { font-style: normal; color: var(--apl-ink-4); }
body.v4 .apl-sec-h b {
  font-weight: 700;
  background: var(--apl-grad-blue);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* Apple float-CTA strip (used on Dashboard) */
body.v4 .apl-float-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--apl-paper);
  border: 1px solid var(--apl-rule-soft);
  border-radius: var(--r-pill);
  padding: 6px 7px 6px 18px;
  font-size: 12.5px;
  color: var(--apl-ink-2);
}
body.v4 .apl-float-cta strong { color: var(--apl-ink); font-weight: 600; }

/* Apple tiles (4-up dashboard tile row) */
body.v4 .apl-tile {
  background: var(--apl-paper);
  border: 1px solid var(--apl-rule-soft);
  border-radius: var(--apl-r);
  padding: 18px;
  min-height: 160px;
  display: flex;
  flex-direction: column;
}
body.v4 .apl-tile-eye {
  font-size: 11px;
  font-weight: 500;
  color: var(--apl-ink-4);
  letter-spacing: -0.005em;
}
body.v4 .apl-tile-h {
  font-family: var(--apl-f-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.012em;
  margin: 4px 0 4px;
  line-height: 1.25;
  color: var(--apl-ink);
}
body.v4 .apl-tile-sub {
  font-size: 12.5px;
  color: var(--apl-ink-3);
}
body.v4 .apl-tile-foot {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  gap: 6px;
}

/* Apple segmented control (used for tab strips, view switches) */
body.v4 .apl-seg {
  display: inline-flex;
  gap: 0;
  background: var(--apl-paper);
  border: 1px solid var(--apl-rule-soft);
  padding: 4px;
  border-radius: var(--r-pill);
}
body.v4 .apl-seg button {
  border: none;
  background: transparent;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--apl-ink-3);
  border-radius: var(--r-pill);
  cursor: pointer;
  font-family: inherit;
  letter-spacing: -0.005em;
}
body.v4 .apl-seg button.on {
  background: var(--apl-ink);
  color: var(--on-accent);
}

/* RESPONSIVE for Highlights row */
@media (max-width: 1100px) {
  body.v4 .apl-row,
  body.v4 .apl-row.tight,
  body.v4 .apl-row.equal { grid-template-columns: 1fr; }
  body.v4 .apl-row.two { grid-template-columns: 1fr; }
}

/* ─── BRAIN PANEL · Apple light card ──────────────────────── */
body.v4 .brain {
  background: var(--apl-paper);
  border: 1px solid var(--apl-rule-soft);
  color: var(--apl-ink);
  border-radius: var(--apl-r);
  padding: 18px 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
  box-shadow: none;
}
body.v4 .brain-icon {
  width: 36px; height: 36px;
  border-radius: var(--apl-r-sm);
  background: var(--apl-lilac-bg);
  color: var(--apl-lilac);
  display: grid; place-items: center;
  flex-shrink: 0;
}
body.v4 .brain-icon .ic { color: currentColor; opacity: 1; }
body.v4 .brain-body { flex: 1; min-width: 0; }
body.v4 .brain-body .lbl,
body.v4 .brain .lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--apl-ink-4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
body.v4 .brain-body .obs,
body.v4 .brain .obs {
  font-size: 14.5px;
  color: var(--apl-ink);
  letter-spacing: -0.005em;
  margin: 4px 0 10px;
  line-height: 1.45;
}
body.v4 .brain-prompts {
  display: flex; gap: 6px; flex-wrap: wrap;
}
body.v4 .brain-prompt {
  background: var(--apl-canvas);
  color: var(--apl-ink-2);
  border: 1px solid var(--apl-rule-soft);
  border-radius: var(--r-pill);
  padding: 5px 11px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
}
body.v4 .brain-prompt:hover {
  border-color: var(--apl-blue);
  color: var(--apl-blue);
}
body.v4 .brain-prompt.ask {
  background: transparent;
  border-style: dashed;
  color: var(--apl-ink-4);
}

/* ─── HERO ROW (Dashboard #2/#3 list) · Apple ink colours ───── */
/* The dashboard paints a numbered list of #2/#3 priorities under
   the hero title. Old styles used white text on the dark hero;
   re-target to ink colours now the hero is light. */
body.v4 .hero-row {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}
body.v4 .hero-cta {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--apl-blue);
  color: var(--on-accent);
  border: none;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--r-pill);
  letter-spacing: -0.005em;
  cursor: pointer;
}
body.v4 .hero-cta:hover { background: var(--apl-blue-2); }
body.v4 .hero-cta.ghost {
  background: var(--apl-paper);
  color: var(--apl-ink-2);
  border: 1px solid var(--apl-rule);
}

/* Dashboard #2 / #3 list-under-hero - re-target ink colours.
   The inline render uses rgba(255,255,255,0.72) which is invisible
   now the hero is light. This rule beats inline only via a wrapper. */
body.v4 .hero .hero-rest {
  margin-top: 14px;
  display: flex; flex-direction: column; gap: 6px;
}
body.v4 .hero .hero-rest-row {
  display: flex; align-items: baseline; gap: 10px;
  color: var(--apl-ink-3);
  font-size: 12.5px;
}
body.v4 .hero .hero-rest-num {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--apl-canvas);
  color: var(--apl-ink-3);
  font-weight: 700;
  font-size: 10px;
}
body.v4 .hero .hero-rest-row strong {
  color: var(--apl-ink);
  font-weight: 600;
}
body.v4 .hero .hero-rest-row .hero-rest-sub {
  color: var(--apl-ink-4);
}

/* Stat row · Dashboard 4 tile row */
body.v4 .stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 16px;
}
body.v4 .stat {
  background: var(--apl-paper);
  border: 1px solid var(--apl-rule-soft);
  border-radius: var(--apl-r);
  padding: 18px 20px;
  box-shadow: none;
}
body.v4 .stat .lbl {
  font-size: 11.5px;
  color: var(--apl-ink-4);
  font-weight: 500;
  letter-spacing: -0.005em;
  text-transform: none;
}
body.v4 .stat .val {
  font-family: var(--apl-f-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 6px 0 2px;
  background: var(--apl-grad-blue);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
body.v4 .stat .delta {
  font-size: 12px;
  color: var(--apl-ink-3);
  letter-spacing: -0.005em;
}

/* Generic dashboard card .card override (for tasks / wb / wins / team / unreleased panels) */
body.v4 .card .card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
body.v4 .card .card-head h3 {
  font-family: var(--apl-f-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--apl-ink);
  margin: 0;
}
body.v4 .card .card-head .badge {
  background: var(--apl-canvas);
  color: var(--apl-ink-3);
  font-size: 11px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  letter-spacing: -0.005em;
}
body.v4 .card .card-head .more {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--apl-blue);
  text-decoration: none;
  font-weight: 500;
}
body.v4 .card .card-head .more:hover { color: var(--apl-blue-2); }
body.v4 .card .empty-state {
  font-size: 13px;
  color: var(--apl-ink-3);
  padding: 16px 8px;
  text-align: center;
}

/* Topbar margin trim once hero is light (it was tighter on dark) */
body.v4 .topbar { margin-bottom: 16px; }

/* AI Brain panel - make icon SVG fully visible (override v4 default opacity) */
body.v4 .brain-icon svg { stroke: currentColor; opacity: 1; }

/* ─── EPISODE CENTRE HERO · light Apple finish ───────────────── */
body.v4 .hero-stat-row {
  display: flex;
  gap: 32px;
  margin-top: 16px;
}
body.v4 .hero-stat-cell .lbl {
  font-size: 11.5px;
  color: var(--apl-ink-4);
  font-weight: 500;
  letter-spacing: -0.005em;
  text-transform: none;
}
body.v4 .hero-stat-cell .val {
  font-family: var(--apl-f-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.022em;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
  background: var(--apl-grad-blue);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
body.v4 .hero-stat-cell.is-text .val,
body.v4 .hero-stat-cell .val.is-text {
  font-size: 15px;
  font-weight: 600;
  background: none;
  -webkit-text-fill-color: var(--apl-ink);
  color: var(--apl-ink);
  font-variant-numeric: normal;
}
body.v4 .hero-stat-cell .val .unit {
  font-size: 14px;
  font-weight: 600;
  color: var(--apl-ink-3);
  background: none;
  -webkit-text-fill-color: var(--apl-ink-3);
  margin-left: 2px;
}

/* Hero ghost back-link (← Episodes) */
body.v4 .hero a.hero-cta.ghost {
  background: transparent;
  border: none;
  color: var(--apl-blue);
  padding: 0;
  font-size: 12.5px;
  font-weight: 500;
}
body.v4 .hero a.hero-cta.ghost:hover { color: var(--apl-blue-2); }

/* ─── EPISODE CENTRE STAGE HEAD + AI accordion fine-tune ───── */
body.v4 .ep-stage-head .meta-left .eye {
  color: var(--apl-blue) !important;
  font-weight: 500 !important;
  font-size: 12.5px !important;
  text-transform: none;
  letter-spacing: -0.005em;
}
body.v4 .ep-stage-head .meta-left .title {
  font-family: var(--apl-f-display);
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em;
  color: var(--apl-ink) !important;
}
body.v4 .ep-stage-head .progress-meta {
  color: var(--apl-ink-3);
}
body.v4 .ep-stage-head .progress-meta strong {
  font-family: var(--apl-f-display);
  background: var(--apl-grad-blue);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* ─── PIPELINE / EPISODES PAGE · tab strip restyle ─────────── */
body.v4 .pipeline-tabs,
body.v4 .ep-tabs {
  background: var(--apl-paper);
  border: 1px solid var(--apl-rule-soft);
  padding: 4px;
  border-radius: var(--r-pill);
  display: inline-flex;
  gap: 0;
}
body.v4 .pipeline-tab,
body.v4 .ep-tab {
  background: transparent;
  border: none;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--apl-ink-3);
  border-radius: var(--r-pill);
  cursor: pointer;
  letter-spacing: -0.005em;
}
body.v4 .pipeline-tab.on,
body.v4 .ep-tab.on,
body.v4 .pipeline-tab.active,
body.v4 .ep-tab.active {
  background: var(--apl-ink);
  color: var(--on-accent);
}

/* Kanban card content */
body.v4 .kanban-card,
body.v4 .kanban .card {
  background: var(--apl-canvas);
  border: none;
  border-radius: var(--apl-r-sm);
  padding: 10px 12px;
}


/* ░░░░░░░░░░ 3/4 v5-glass.css ░░░░░░░░░░ */
/* ════════════════════════════════════════════════════════════
   v5 - LIQUID GLASS
   Complete reskin of the TPMS Brain V4 design system.
   Loads AFTER v4.css. Overrides every visible class so existing
   render functions emit Liquid Glass without changes to JS.

   Key principles:
   · Body is a soft photographic gradient (lilac / peach / mint).
   · Every panel is a frosted glass card with a thin white border
     and a backdrop-filter blur of 28–40 px @ saturate 180%.
   · Cherry retires - Apple blue (var(--g-blue)) is primary. Cherry only
     for live / critical / overdue states.
   · Stat numerals are blue gradient text. Mint / butter / rose
     gradients for revenue / cost / risk semantic colouring.
   · Sidebar floats inside the canvas, not against an edge.
   ════════════════════════════════════════════════════════════ */

body.v4 {
  --g-surface:   #ffffff;   /* solid card bg - flips in dark (v6) */
  --g-canvas:    #f5f5f7;
  --g-paper:     rgba(255, 255, 255, 0.58);
  --g-paper-2:   rgba(255, 255, 255, 0.45);
  --g-paper-3:   rgba(255, 255, 255, 0.78);
  --g-ink:       rgba(29, 29, 31, 0.85);
  --g-ink-bg:    rgba(29, 29, 31, 0.85);
  --g-border:    rgba(255, 255, 255, 0.65);
  --g-border-soft: rgba(255, 255, 255, 0.45);
  --g-rule:      rgba(0, 0, 0, 0.06);
  --g-rule-soft: rgba(0, 0, 0, 0.04);
  --g-ink-1:     #1d1d1f;
  --g-ink-2:     #424245;
  --g-ink-3:     #6e6e73;
  --g-ink-4:     #86868b;
  --g-blue:      #0071e3;
  --g-blue-2:    #0058b1;
  --g-blue-bg:   rgba(0, 113, 227, 0.15);
  --g-blue-soft: rgba(0, 113, 227, 0.10);
  --g-green:     #2f855a;
  --g-green-bg:  rgba(47, 133, 90, 0.15);
  --g-orange:    #c2410c;
  --g-orange-bg: rgba(194, 65, 12, 0.15);
  --g-lilac:     #5e5ce6;
  --g-lilac-bg:  rgba(94, 92, 230, 0.15);
  --g-butter:    #92660d;
  --g-butter-bg: rgba(146, 102, 13, 0.15);
  --g-cherry:    #b8002b;
  --g-cherry-bg: rgba(184, 0, 43, 0.13);
  --g-grad-b:    linear-gradient(180deg, #5e93ff 0%, #0058b1 100%);
  --g-grad-r:    linear-gradient(180deg, var(--pink-bright) 0%, #b80038 100%);
  --g-grad-m:    linear-gradient(180deg, var(--green-bright) 0%, #1f6f4a 100%);
  --g-grad-y:    linear-gradient(180deg, #ffd47a 0%, var(--c-butter) 100%);
  --g-blur:      blur(28px) saturate(180%);
  --g-blur-2:    blur(40px) saturate(180%);
  --g-sh:        0 1px 2px rgba(0,0,0,0.04), 0 16px 40px rgba(0,0,0,0.06);
  --g-sh-2:      0 1px 2px rgba(0,0,0,0.04), 0 24px 48px rgba(0,0,0,0.10);
  --g-sh-modal:  0 32px 80px rgba(0,0,0,0.20);
  --g-r-sm: 10px;
  --g-r:    14px;
  --g-r-lg: 18px;
  --g-r-xl: 22px;
  --g-r-2xl: 28px;
  --g-fd: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif;
}

/* ─── Selection colour - Apple blue, not cherry ───────────── */
body.v4 ::selection { background: rgba(0, 113, 227, 0.25); color: var(--g-ink-1); }

/* ════════════════════════════════════════════════════════════════
   Wave 57 - FULL AUDIT IMPLEMENTATION
   ════════════════════════════════════════════════════════════════
   Cross-page principles + UX layer + easter eggs.
   ════════════════════════════════════════════════════════════════ */

/* ─── Easing token - Apple "expressive" cubic-bezier everywhere ── */
body.v4 {
  --g-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --g-ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
  --g-d-fast: 120ms;
  --g-d: 180ms;
  --g-d-slow: 320ms;
}

/* ─── Body subtle noise texture (so glass sits on a real surface) ──
   Wave 58 bugfix: removed the `body.v4 > * { position: relative }` rule
   that was overriding `position: fixed` on modals/overlays - broke clicks
   to episodes and scrolling on some pages. The noise overlay below
   sits behind content naturally because pseudo-elements render BEHIND
   non-positioned siblings (z-index: -1). */
body.v4::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.018;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ─── PRINCIPLE 1 · CANONICAL EYEBROW ──────────────────────────
   Used on every page hero, every card eyebrow. Always blue, 10.5px,
   uppercase, 0.08em letter-spacing. */
body.v4 .eyebrow,
body.v4 [class*="-eye"]:not(.cal-hd-eye):not(.b-month-detail-hd-eye):not(.gh-eyebrow),
body.v4 .ep-pane-eyebrow,
body.v4 .agent-card-section-title,
body.v4 .ceo-tile-eye {
  font-family: var(--g-fd) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--g-blue) !important;
}
/* Eyebrows on dark cards stay light blue */
body.v4 .hero .eyebrow,
body.v4 .hero [class*="-eye"],
body.v4 .card-dark .eyebrow,
body.v4 .apl-card.dark .eyebrow { color: var(--hero-blue) !important; }

/* ─── PRINCIPLE 3 · CANONICAL EMPTY STATE ──────────────────────
   Italic muted line. Optional "+ Action" link below. */
body.v4 .empty,
body.v4 .empty-state,
body.v4 .empty-state-sm,
body.v4 .task-empty,
body.v4 .b-month-empty,
body.v4 .c-week-col-body-empty,
body.v4 .wk-day-free,
body.v4 .ev-empty {
  font-family: var(--g-f) !important;
  font-style: italic;
  color: var(--g-ink-4) !important;
  text-align: center;
  padding: 28px 18px;
  font-size: 13px;
  letter-spacing: -0.005em;
  line-height: 1.5;
  background: transparent !important;
  border: none !important;
}
body.v4 .empty a,
body.v4 .empty-state a {
  display: inline-block;
  margin-top: 8px;
  font-style: normal;
  color: var(--g-blue) !important;
  font-weight: 500;
  font-size: 12.5px;
  text-decoration: none;
}
body.v4 .empty a:hover { text-decoration: underline; }

/* ─── BUTTON HOVER LIFT (cross-page) ──────────────────────────
   Every primary button lifts + casts a tinted shadow. */
body.v4 .btn-primary,
body.v4 .btn-v4.btn-primary,
body.v4 button.cal-add,
body.v4 .ep-add,
body.v4 .hero-cta,
body.v4 .ep-modal-save,
body.v4 .btn-blue {
  transition:
    transform var(--g-d) var(--g-ease),
    box-shadow var(--g-d-slow) var(--g-ease),
    background var(--g-d-fast) ease !important;
}
body.v4 .btn-primary:hover,
body.v4 .btn-v4.btn-primary:hover,
body.v4 .ep-add:hover,
body.v4 .hero-cta:hover,
body.v4 .ep-modal-save:hover,
body.v4 .btn-blue:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 22px rgba(0, 113, 227, 0.32) !important;
}
body.v4 .btn-primary:active,
body.v4 .btn-v4.btn-primary:active,
body.v4 .ep-add:active,
body.v4 .hero-cta:active,
body.v4 .ep-modal-save:active {
  /* V3-STYL-3: was translateY(0) !important, which beat the un-!important
     press scale(0.97) below (13600 area) and froze the primary press.
     Pressing now scales like secondary/ghost. No !important added. */
  transform: scale(0.97) !important;
  transition: transform 60ms ease !important;
}

/* ─── CARD HOVER (3D LIFT with apple easing) ──────────────────
   Applies to every glass card with hover affordance. */
body.v4 .card:hover,
body.v4 .agent-card:hover,
body.v4 .ceo-tile:hover,
body.v4 .kb-card:hover,
body.v4 .ep-row:hover,
body.v4 .stat:hover,
body.v4 .stat-tile:hover,
body.v4 .b-event:hover,
body.v4 .ev:hover {
  transition: all var(--g-d) var(--g-ease);
}

/* ─── PULSE DOT - live signals ────────────────────────────────
   Use .pulse-dot, .pulse-green, .pulse-cherry, .pulse-blue */
body.v4 .pulse-dot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
body.v4 .pulse-dot::before,
body.v4 .live-pulse::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--g-green);
  box-shadow: 0 0 0 0 rgba(47, 133, 90, 0.5);
  animation: g-pulse 2s infinite;
  flex-shrink: 0;
}
body.v4 .pulse-dot.cherry::before { background: var(--g-cherry); box-shadow: 0 0 0 0 rgba(184, 0, 43, 0.5); animation-name: g-pulse-cherry; }
body.v4 .pulse-dot.blue::before { background: var(--g-blue); box-shadow: 0 0 0 0 rgba(0, 113, 227, 0.5); animation-name: g-pulse-blue; }
@keyframes g-pulse        { 0%{box-shadow:0 0 0 0 rgba(47,133,90,0.5)} 70%{box-shadow:0 0 0 10px rgba(47,133,90,0)} 100%{box-shadow:0 0 0 0 rgba(47,133,90,0)} }
@keyframes g-pulse-cherry { 0%{box-shadow:0 0 0 0 rgba(184,0,43,0.5)} 70%{box-shadow:0 0 0 10px rgba(184,0,43,0)} 100%{box-shadow:0 0 0 0 rgba(184,0,43,0)} }
@keyframes g-pulse-blue   { 0%{box-shadow:0 0 0 0 rgba(0,113,227,0.5)} 70%{box-shadow:0 0 0 10px rgba(0,113,227,0)} 100%{box-shadow:0 0 0 0 rgba(0,113,227,0)} }

/* ─── SKELETON loading (shimmer) ──────────────────────────────
   Use .skel + width modifier .skel.w-60 / .skel.w-40 */
body.v4 .skel {
  height: 14px;
  background: linear-gradient(90deg,
    rgba(0,0,0,0.05) 0%,
    rgba(0,0,0,0.10) 50%,
    rgba(0,0,0,0.05) 100%);
  background-size: 200% 100%;
  animation: g-shimmer 1.4s infinite;
  border-radius: 7px;
}
body.v4 .skel.w-30 { width: 30%; }
body.v4 .skel.w-40 { width: 40%; }
body.v4 .skel.w-60 { width: 60%; }
body.v4 .skel.w-80 { width: 80%; }
body.v4 .skel.h-32 { height: 32px; border-radius: 10px; }
body.v4 .skel + .skel { margin-top: 8px; }
@keyframes g-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ─── CHECKBOX spring pop + draw-the-tick ─────────────────────
   Applies to .task-row-check, .ck-check (both already styled as circles) */
body.v4 .task-row .task-row-check,
body.v4 .ck-check {
  transition:
    background var(--g-d) var(--g-ease),
    border-color var(--g-d) var(--g-ease) !important;
}
body.v4 .task-row .task-row-check:checked,
body.v4 .ck-check.on {
  animation: g-popcheck 320ms var(--g-ease-snap);
}
@keyframes g-popcheck { 0%{transform:scale(1)} 40%{transform:scale(1.2)} 100%{transform:scale(1)} }

/* ─── TOOLTIP - hover with 500ms delay ────────────────────────
   Mark up: <span class="g-tip" data-tip="Open · ⌘E">…</span> */
body.v4 .g-tip { position: relative; }
body.v4 .g-tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #1d1d1f;
  color: var(--on-accent);
  padding: 6px 11px;
  border-radius: var(--r-sm);
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--g-d) ease, transform var(--g-d) var(--g-ease);
  transition-delay: 0s;
  font-family: var(--g-fd);
  letter-spacing: -0.005em;
  z-index: 100;
}
body.v4 .g-tip::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #1d1d1f;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--g-d) ease;
  z-index: 100;
}
body.v4 .g-tip:hover::after,
body.v4 .g-tip:hover::before {
  opacity: 1;
  transition-delay: 500ms;
}
body.v4 .g-tip:hover::after { transform: translateX(-50%) translateY(0); }

/* ─── TOAST notifications (slide-up from bottom) ──────────────
   Mounted by JS at #g-toast-host. */
.g-toast-host {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 10000;
  pointer-events: none;
}
.g-toast {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #1d1d1f;
  color: var(--on-accent);
  padding: 12px 18px;
  border-radius: var(--r);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  animation: g-toast-in 320ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto;
}
.g-toast.out { animation: g-toast-out 240ms cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.g-toast .g-toast-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.g-toast.success .g-toast-icon { background: var(--c-mint); color: var(--on-accent); }
.g-toast.success .g-toast-icon::after { content: '✓'; }
.g-toast.error .g-toast-icon { background: var(--cherry); color: var(--on-accent); }
.g-toast.error .g-toast-icon::after { content: '!'; }
.g-toast.info .g-toast-icon { background: var(--g-blue); color: var(--on-accent); }
.g-toast.info .g-toast-icon::after { content: 'i'; font-style: italic; font-family: serif; }
.g-toast .g-toast-undo { margin-left: 10px; border: none; background: transparent; color: var(--blue); font-weight: 700; font-size: 12.5px; cursor: pointer; padding: 3px 8px; border-radius: 6px; }
.g-toast .g-toast-undo:hover { background: var(--blue-bg); }
/* Realtime "updates available" nudge - quiet, bottom-left, never auto-refreshes */
body.v4 .rt-nudge { position:fixed; left:18px; bottom:18px; z-index:9000; display:flex; align-items:center; gap:9px; padding:8px 10px 8px 14px; border-radius:var(--r-pill,999px); background:var(--paper-3,rgba(255,255,255,.9)); backdrop-filter:var(--blur); border:1px solid var(--border); box-shadow:var(--sh-2); font-size:12.5px; color:var(--ink-2); animation:g-toast-in 260ms cubic-bezier(0.16,1,0.3,1); }
body.v4 .rt-nudge-dot { width:7px; height:7px; border-radius:50%; background:var(--blue); flex:none; }
body.v4 .rt-nudge-btn { border:none; background:var(--blue); color:var(--on-accent); font-weight:700; font-size:12px; padding:5px 12px; border-radius:var(--r-pill,999px); cursor:pointer; }
body.v4 .rt-nudge-btn:hover { background:var(--blue-2); }
@keyframes g-toast-in  { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes g-toast-out { from{transform:translateY(0);opacity:1} to{transform:translateY(20px);opacity:0} }

/* ─── Cmd-K COMMAND PALETTE ───────────────────────────────────
   Mounted by JS. Overlay + glass panel + list. */
.g-cmdk-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.40);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  display: grid;
  place-items: start center;
  padding-top: 120px;
  opacity: 0;
  animation: g-cmdk-fade 200ms ease forwards;
}
.g-cmdk-overlay.out { animation: g-cmdk-fade-out 180ms ease forwards; }
@keyframes g-cmdk-fade     { from{opacity:0} to{opacity:1} }
@keyframes g-cmdk-fade-out { from{opacity:1} to{opacity:0} }
.g-cmdk {
  background: var(--g-surface);
  border-radius: 14px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.22), 0 4px 16px rgba(0, 0, 0, 0.08);
  width: 560px;
  max-width: calc(100vw - 32px);
  max-height: 480px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif;
  transform: scale(0.96) translateY(-8px);
  animation: g-cmdk-scale 240ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes g-cmdk-scale { to{transform:scale(1) translateY(0)} }
.g-cmdk-input {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.g-cmdk-input svg { width: 16px; height: 16px; color: var(--g-ink-3); flex-shrink: 0; }
.g-cmdk-input input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 15px;
  color: #1d1d1f;
  background: transparent;
  font-family: inherit;
  letter-spacing: -0.005em;
}
.g-cmdk-input input::placeholder { color: var(--g-ink-3); }
.g-cmdk-input kbd {
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 10.5px;
  color: var(--g-ink-3);
  font-weight: 600;
  font-family: inherit;
}
.g-cmdk-list {
  padding: 8px;
  overflow-y: auto;
  flex: 1;
}
.g-cmdk-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  color: var(--g-ink-2);
  cursor: pointer;
  letter-spacing: -0.005em;
}
.g-cmdk-item.on {
  background: rgba(0, 113, 227, 0.10);
  color: var(--g-blue);
  font-weight: 500;
}
.g-cmdk-item-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.04);
  color: var(--g-ink-3);
  flex-shrink: 0;
  font-size: 12px;
}
.g-cmdk-item.on .g-cmdk-item-icon { background: rgba(0, 113, 227, 0.18); color: var(--g-blue); }
.g-cmdk-item-meta {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--g-ink-4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.g-cmdk-empty {
  padding: 24px 18px;
  text-align: center;
  font-size: 13px;
  color: var(--g-ink-4);
  font-style: italic;
}

/* ─── ON AIR mode (recording in progress) ─────────────────────
   Replaces hero copy when a recording slot is currently active. */
body.v4 .hero.on-air {
  background: linear-gradient(180deg, #1a0508 0%, #0a0103 100%) !important;
}
body.v4 .hero.on-air::before {
  background:
    radial-gradient(ellipse 600px 320px at 12% -10%, rgba(184, 0, 43, 0.40), transparent),
    radial-gradient(ellipse 500px 260px at 95% 110%, rgba(184, 0, 43, 0.25), transparent) !important;
}
body.v4 .hero.on-air .hero-eyebrow {
  color: var(--pink-bright) !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
body.v4 .hero.on-air .hero-eyebrow::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--g-cherry);
  box-shadow: 0 0 12px rgba(184, 0, 43, 0.8);
  animation: g-onair-blink 1.2s infinite ease-in-out;
}
@keyframes g-onair-blink { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* ─── FRIDAY AFTERNOON MODE - REMOVED (R3-GEN-1) ──────────────
   The g-friday-pm golden tint (rgba 255,188,120 radials on the page
   AND the hero, auto-applied Friday ≥16:00 by levelups.js) was the
   "yellow tinge" on the page hero Peter reported. Feature deleted;
   the hero keeps its permanent charcoal + indigo/blue glow. */

/* ─── Inbox-zero confetti ─────────────────────────────────────
   .g-confetti container with 24 .g-confetti-piece children */
.g-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}
.g-confetti-piece {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  top: 50%;
  left: 50%;
  animation: g-confetti-burst 1.2s ease-out forwards;
}
@keyframes g-confetti-burst {
  0%   { transform: translate(0,0) rotate(0) scale(0); opacity: 1; }
  10%  { transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1); opacity: 1; }
  100% { transform: translate(calc(var(--dx)*1.6), calc(var(--dy)*1.6 + 80px)) rotate(calc(var(--r)*3)) scale(0.4); opacity: 0; }
}

/* ─── Staggered fade-up entrance for page sections ────────────
   JS adds .g-stagger to each section, .g-stagger-in after a frame */
body.v4 .g-stagger { opacity: 0; transform: translateY(8px); }
body.v4 .g-stagger.g-stagger-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 380ms ease, transform 380ms var(--g-ease);
}

/* ─── Smart-paste highlight ────────────────────────────────── */
body.v4 input.g-smartpaste-pulse,
body.v4 textarea.g-smartpaste-pulse {
  animation: g-paste-pulse 600ms ease;
}
@keyframes g-paste-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 113, 227, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.18); }
}

/* ─── Konami easter egg developer console ─────────────────── */
.g-konami {
  position: fixed;
  top: 80px;
  right: 24px;
  width: 320px;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(20px);
  color: var(--green-bright);
  font-family: 'SF Mono', Monaco, monospace;
  font-size: 11.5px;
  padding: 16px 18px;
  border-radius: var(--r);
  border: 1px solid rgba(77, 219, 140, 0.3);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.4);
  z-index: 9999;
  line-height: 1.6;
  animation: g-konami-in 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.g-konami h4 {
  color: var(--green-bright);
  font-family: 'SF Mono', Monaco, monospace;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: 0.05em;
}
.g-konami .row { display: flex; justify-content: space-between; padding: 2px 0; }
.g-konami .row span { color: rgba(255,255,255,0.6); }
.g-konami .row b { color: var(--green-bright); font-weight: 500; }
.g-konami button {
  background: rgba(77, 219, 140, 0.15);
  border: 1px solid rgba(77, 219, 140, 0.4);
  color: var(--green-bright);
  padding: 4px 10px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 10.5px;
  cursor: pointer;
  margin-top: 10px;
}
@keyframes g-konami-in { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }

/* ─── Modal scale-from-cursor ─────────────────────────────────
   When mounting modals, add transform-origin set by JS based on click point.
   Wave 58 bugfix: added `forwards` so the animation holds its end state
   (otherwise the modal can flash back to its initial scale/opacity). */
body.v4 .ep-modal,
body.v4 .aiceo-modal {
  animation: g-modal-pop 280ms var(--g-ease) forwards;
  transform-origin: var(--g-modal-origin-x, 50%) var(--g-modal-origin-y, 50%);
}
@keyframes g-modal-pop {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

/* ─── Tab content slide-in (replaces blink) ──────────────────── */
body.v4 .g-tab-content-in {
  animation: g-tab-slide 280ms var(--g-ease);
}
@keyframes g-tab-slide {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ─── Standardised stat tile (Principle 2) ────────────────────
   Force all .stat, .stat-tile, [class*="-stat"] to one shape. */
body.v4 .stat,
body.v4 .stat-tile {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--g-border) !important;
  border-radius: var(--g-r) !important;
  padding: 18px 20px !important;
  box-shadow: var(--g-sh);
  transition: transform var(--g-d) var(--g-ease), box-shadow var(--g-d-slow) var(--g-ease);
}
body.v4 .stat:hover,
body.v4 .stat-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 24px 56px rgba(0,0,0,0.08);
}
/* No more "stat cherry / stat green" dark variants */
body.v4 .stat.cherry,
body.v4 .stat.green,
body.v4 .stat.dark {
  background: rgba(255, 255, 255, 0.55) !important;
  color: var(--g-ink-1) !important;
}
body.v4 .stat.cherry .lbl,
body.v4 .stat.green .lbl { color: var(--g-ink-4) !important; }
body.v4 .stat.cherry .val,
body.v4 .stat.green .val {
  background: var(--g-grad-b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* ─── Animated number (set by JS) ─────────────────────────────
   Pure visual - JS handles the count, this stops cumulative-layout shift */
body.v4 .g-anim-num { font-variant-numeric: tabular-nums; }

/* ════════════════════════════════════════════════════════════════
   Wave 58 - REGRESSION SWEEP for items Peter keeps flagging
   ════════════════════════════════════════════════════════════════ */

/* ─── 1 · BEIGE DIVIDERS everywhere → hairline rgba 0.05 ────────
   Spec found in styles.css: var(--rule), var(--rule-soft), var(--line),
   var(--g-150), var(--line), #f0e7c5 - all show up beige on glass. Force
   to a faint cool hairline so tables read clean. */
body.v4 .task-row,
body.v4 .ck-row,
body.v4 .ep-row,
body.v4 .b-event + .b-event,
body.v4 .agent-card-section + .agent-card-section,
body.v4 .day-side-row,
body.v4 .integ-row,
body.v4 .tbl tr,
body.v4 .data-table tr,
body.v4 .ws-strip,
body.v4 .ceo-tile,
body.v4 .agent-card-actions {
  border-color: rgba(0, 0, 0, 0.05) !important;
}
body.v4 .task-row,
body.v4 .ck-row {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-top: none !important;
}
body.v4 .task-list .task-row:last-child,
body.v4 .ck-list .ck-row:last-child { border-bottom: none !important; }

/* ─── 2 · AI TEAM director chips (.ws-strip-item) ───────────────
   Was beige (var(--bg) = var(--bg)) - now glass tile with blue hover.
   Active = solid blue not cherry. */
body.v4 .ws-hero {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--g-border) !important;
  border-radius: var(--g-r-lg) !important;
  padding: 24px 26px !important;
  box-shadow: var(--g-sh);
}
body.v4 .ws-hero > div:nth-of-type(2) {   /* "Eight directors" headline */
  font-family: var(--g-fd) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--g-ink-1) !important;
}
body.v4 .ws-strip {
  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
  gap: 8px !important;
}
body.v4 .ws-strip-item {
  /* Wave 80.5 - strengthened to var(--g-blue-bg) (10% alpha) with a
     1px tinted border so the chips are legible regardless of the
     glass backdrop behind them. */
  background: var(--g-blue-bg) !important;
  color: var(--g-blue) !important;
  border: 1px solid rgba(0, 113, 227, 0.18) !important;
  font-family: var(--g-fd) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  padding: 8px 14px !important;
  border-radius: var(--r-pill) !important;
  letter-spacing: -0.005em !important;
  text-decoration: none !important;
  transition: background var(--g-d-fast) ease, transform var(--g-d) var(--g-ease), color var(--g-d-fast) ease !important;
}
body.v4 .ws-strip-item:hover {
  background: var(--g-blue) !important;
  color: var(--on-accent) !important;
  transform: translateY(-1px);
}
body.v4 .ws-strip-item.active {
  background: var(--g-ink-1) !important;
  color: var(--on-accent) !important;
}
body.v4 .ws-strip-item .count {
  background: rgba(255, 255, 255, 0.6) !important;
  color: var(--g-blue) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 1px 7px !important;
  border-radius: var(--r-pill) !important;
}
body.v4 .ws-strip-item:hover .count,
body.v4 .ws-strip-item.active .count {
  background: rgba(255, 255, 255, 0.20) !important;
  color: var(--on-accent) !important;
}

/* ─── 3 · CEO CONFIGURATION tiles ──────────────────────────────
   Kill the cheap emoji top + the colour stripe top bar. Replace with
   clean glass tiles + SF-symbol-style outline icons in coloured circle. */
body.v4 .ceo-tile-topbar { display: none !important; }
body.v4 .ceo-tile {
  background: rgba(255, 255, 255, 0.65) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-radius: var(--r-lg) !important;
  padding: 22px 24px !important;
  display: flex !important;
  flex-direction: column;
  gap: 0;
  cursor: pointer;
  transition: transform var(--g-d) var(--g-ease), box-shadow var(--g-d-slow) var(--g-ease), border-color var(--g-d) var(--g-ease);
}
body.v4 .ceo-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 16px 40px rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 113, 227, 0.18) !important;
}
body.v4 .ceo-tile-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: var(--r) !important;
  background: var(--g-blue-bg) !important;
  color: var(--g-blue) !important;
  display: grid !important;
  place-items: center !important;
  font-size: 0 !important; /* Hide emoji */
  margin-bottom: 14px !important;
}
/* Wave 80.6 - pseudo-element mask icons REMOVED. Wave 75 switched to
   Lucide <i data-lucide> inside .ceo-tile-icon; the masks were causing
   double icons (some tiles) or none (where the mask fetch failed).
   Single Lucide SVG per tile is the canonical render now.
   We do keep the per-tile coloured background so each box reads as
   sky / lilac / green / cherry per discipline. */
body.v4 .ceo-tile:nth-of-type(1) .ceo-tile-icon { background: rgba(58, 132, 220, 0.13) !important; color: var(--sky-fg) !important; }
body.v4 .ceo-tile:nth-of-type(2) .ceo-tile-icon { background: rgba(94, 92, 230, 0.13) !important; color: var(--g-lilac) !important; }
body.v4 .ceo-tile:nth-of-type(3) .ceo-tile-icon { background: rgba(47, 133, 90, 0.13) !important; color: var(--g-green) !important; }
body.v4 .ceo-tile:nth-of-type(4) .ceo-tile-icon { background: rgba(184, 0, 43, 0.10) !important; color: var(--g-cherry) !important; }
body.v4 .ceo-tile-icon::before { content: none !important; }
body.v4 .ceo-tile-title {
  font-family: var(--g-fd) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -0.018em !important;
  color: var(--g-ink-1) !important;
  margin-bottom: 6px !important;
}
body.v4 .ceo-tile-desc {
  font-size: 13px !important;
  color: var(--g-ink-3) !important;
  line-height: 1.5 !important;
  flex: 1;
}
body.v4 .ceo-tile-foot,
body.v4 .ceo-tile-stat {
  padding-top: 14px !important;
  margin-top: 14px !important;
  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
  font-size: 11.5px !important;
  color: var(--g-ink-4) !important;
}
body.v4 .ceo-tile-cta {
  color: var(--g-blue) !important;
  font-weight: 500 !important;
}

/* ─── 4 · YouTube BAR CHART · clean rounded-top bars ──────────── */
body.v4 .bar-chart-v2 {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 200px;
  padding: 12px 0 4px;
}
body.v4 .bcv2-col {
  flex: 1;
  display: flex;
  align-items: flex-end;
  height: 100%;
  cursor: pointer;
  position: relative;
}
body.v4 .bcv2-bar {
  width: 100%;
  background: rgba(0, 113, 227, 0.12);
  border-radius: 6px 6px 0 0;
  transition: background var(--g-d-fast) ease, transform var(--g-d) var(--g-ease);
  min-height: 8px;
}
body.v4 .bcv2-bar.is-recent {
  background: var(--g-blue);
}
body.v4 .bcv2-col:hover .bcv2-bar {
  background: rgba(0, 113, 227, 0.30);
}
body.v4 .bcv2-col:hover .bcv2-bar.is-recent {
  background: #1a82ec;
  transform: translateY(-2px);
}
/* Tooltip on hover */
body.v4 .bcv2-col::after {
  content: attr(data-value) ' · ' attr(data-label);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: #1d1d1f;
  color: var(--on-accent);
  padding: 5px 10px;
  border-radius: 7px;
  font-size: 11px;
  font-family: var(--g-fd);
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--g-d) ease;
  z-index: 5;
}
body.v4 .bcv2-col:hover::after { opacity: 1; }

/* Empty state for the YouTube chart when all months are zero */
body.v4 .bar-chart-zero {
  text-align: center;
  padding: 36px 24px;
  color: var(--g-ink-3);
  display: flex;
  flex-direction: column;
  align-items: center;
}
body.v4 .bar-chart-zero-title {
  font-family: var(--g-fd);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--g-ink-1);
  letter-spacing: -0.005em;
  margin-bottom: 4px;
}
body.v4 .bar-chart-zero-sub {
  font-size: 12.5px;
  color: var(--g-ink-3);
  margin-bottom: 12px;
  letter-spacing: -0.005em;
  max-width: 320px;
  line-height: 1.5;
}
body.v4 .bar-chart-zero-cta {
  color: var(--g-blue);
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: -0.005em;
}
body.v4 .bar-chart-zero-cta:hover { text-decoration: underline; }

/* ─── 5 · EMPTY STATE polish - work blocks, etc ────────────────
   Currently "No open work blocks." sits centered in a half-tall white
   card and looks bare. Add a dashed glass placeholder + CTA. */
body.v4 .empty-state-cta-wrap {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  border: 1px dashed rgba(0, 0, 0, 0.12);
  border-radius: 14px;
  margin: 8px 0;
  text-align: center;
}
body.v4 .empty-state-cta-wrap svg {
  width: 36px;
  height: 36px;
  color: var(--g-ink-4);
  margin-bottom: 10px;
}
body.v4 .empty-state-cta-wrap-title {
  font-family: var(--g-fd);
  font-size: 14px;
  font-weight: 600;
  color: var(--g-ink-1);
  letter-spacing: -0.005em;
  margin-bottom: 4px;
}
body.v4 .empty-state-cta-wrap-sub {
  font-size: 12.5px;
  color: var(--g-ink-3);
  margin-bottom: 12px;
  max-width: 280px;
  line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════════
   Wave 63-69 - Full implementation of DESIGN_DOC_WAVE_59
   ════════════════════════════════════════════════════════════════ */

/* ─── Wave 61 patches (Team-row beige + CEO icon padding + button override) ── */
body.v4 .team-row,
body.v4 .feed-row,
body.v4 .av-row {
  border-top: 1px solid rgba(0,0,0,0.05) !important;
  border-bottom: 1px solid rgba(0,0,0,0.05) !important;
}
body.v4 .team-row:first-child { border-top: none !important; }
body.v4 .team-row:last-child { border-bottom: none !important; }

/* CEO tile icon - kill legacy padding that was leaking bg outside */
body.v4 .ceo-tile-icon {
  padding: 0 !important;
  text-indent: -9999px; /* hide the emoji literal */
  overflow: hidden;
}
body.v4 button.ceo-tile {
  padding: 22px 24px !important;
  text-align: left !important;
  border: 1px solid rgba(0,0,0,0.05) !important;
  background: rgba(255,255,255,0.65) !important;
  overflow: visible !important;
}

/* ─── Wave 63 · EPISODE POPUP - per-stage pane content ──────────
   The popup uses .ep-modal with .ep-modal-pane as the content host.
   New stage panes use .epp2-* classes so legacy v4.css doesn't interfere. */
body.v4 .epp2-section { margin-bottom: 22px; }
body.v4 .epp2-section + .epp2-section { padding-top: 18px; border-top: 1px solid rgba(0,0,0,0.05); }
body.v4 .epp2-eye {
  font-family: var(--g-fd) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--g-blue) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: block;
}
body.v4 .epp2-h {
  font-family: var(--g-fd);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--g-ink-1);
  margin-bottom: 14px;
  line-height: 1.2;
}
body.v4 .epp2-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
body.v4 .epp2-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
body.v4 .epp2-field-l {
  font-family: var(--g-fd);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--g-ink-4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
body.v4 .epp2-field-i {
  background: var(--g-surface);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 14px;
  font-family: var(--g-f);
  color: var(--g-ink-1);
  width: 100%;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
body.v4 .epp2-field-i:focus {
  outline: none;
  border-color: var(--g-blue);
  box-shadow: 0 0 0 3px rgba(0,113,227,0.15);
}
body.v4 textarea.epp2-field-i { min-height: 60px; resize: vertical; font-family: var(--g-f); }
body.v4 .epp2-pill-row { display: flex; gap: 8px; flex-wrap: wrap; }
body.v4 .epp2-progress {
  height: 6px;
  background: rgba(0,0,0,0.06);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin: 10px 0;
}
body.v4 .epp2-progress > .fill {
  height: 100%;
  background: var(--g-blue);
  border-radius: var(--r-pill);
  transition: width 320ms cubic-bezier(0.16,1,0.3,1);
}
body.v4 .epp2-ck {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 11px 14px;
  border-radius: 10px;
  background: rgba(0,0,0,0.025);
  margin-bottom: 6px;
  border: none;
}
body.v4 .epp2-ck.done { opacity: 0.6; }
body.v4 .epp2-ck.done .epp2-ck-lbl { text-decoration: line-through; color: var(--g-ink-4); }
body.v4 .epp2-ck-cb {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,0.18);
  background: var(--g-surface);
  cursor: pointer;
  display: grid; place-items: center;
  transition: all 180ms cubic-bezier(0.16,1,0.3,1);
}
body.v4 .epp2-ck-cb:hover { border-color: var(--g-blue); }
body.v4 .epp2-ck-cb.on {
  background: var(--g-blue);
  border-color: var(--g-blue);
  position: relative;
  animation: g-popcheck 320ms cubic-bezier(0.34,1.56,0.64,1);
}
body.v4 .epp2-ck-cb.on::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 5px; height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translate(-50%, -60%) rotate(45deg);
}
body.v4 .epp2-ck-lbl {
  font-family: var(--g-fd);
  font-size: 13px;
  color: var(--g-ink-1);
  font-weight: 500;
  letter-spacing: -0.005em;
}
body.v4 .epp2-owner-pill {
  font-family: var(--g-fd);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 9px;
  border-radius: var(--r-pill);
}
body.v4 .epp2-owner-pill.peter   { background: rgba(0,113,227,0.13); color: var(--g-blue); }
body.v4 .epp2-owner-pill.chelsea { background: rgba(94,92,230,0.15); color: var(--g-lilac); }
body.v4 .epp2-owner-pill.curt    { background: rgba(194,65,12,0.13); color: var(--g-orange); }
body.v4 .epp2-owner-pill.conor   { background: rgba(194,65,12,0.13); color: var(--g-orange); }
body.v4 .epp2-owner-pill.alec    { background: rgba(47,133,90,0.13);  color: var(--g-green); }
body.v4 .epp2-owner-pill.ai      { background: rgba(0,113,227,0.13);  color: var(--g-blue); }
body.v4 .epp2-info {
  background: rgba(94,92,230,0.10);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 12.5px;
  color: var(--g-lilac);
  margin-bottom: 12px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
body.v4 .epp2-info::before {
  content: 'ⓘ';
  flex-shrink: 0;
  margin-top: 1px;
}
body.v4 .epp2-ai-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--g-surface);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: var(--r);
  padding: 12px 14px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: all 180ms cubic-bezier(0.16,1,0.3,1);
}
body.v4 .epp2-ai-row:hover {
  border-color: var(--g-blue);
  transform: translateY(-1px);
}
body.v4 .epp2-ai-row.on { background: rgba(0,113,227,0.06); border-color: var(--g-blue); }
body.v4 .epp2-ai-row-ic {
  width: 28px; height: 28px;
  border-radius: var(--r-sm);
  background: rgba(0,0,0,0.04);
  color: var(--g-ink-3);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 14px;
}
body.v4 .epp2-ai-row.on .epp2-ai-row-ic { background: var(--g-blue); color: var(--on-accent); }
body.v4 .epp2-ai-row-body { flex: 1; min-width: 0; }
body.v4 .epp2-ai-row-title {
  font-family: var(--g-fd);
  font-size: 13px;
  font-weight: 700;
  color: var(--g-ink-1);
  letter-spacing: -0.005em;
}
body.v4 .epp2-ai-row-meta {
  font-size: 11.5px;
  color: var(--g-ink-3);
  margin-top: 2px;
}
body.v4 .epp2-stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
body.v4 .epp2-stat-tile {
  background: var(--g-surface);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: var(--r);
  padding: 14px 16px;
}
body.v4 .epp2-stat-lbl {
  font-family: var(--g-fd);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--g-ink-4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
body.v4 .epp2-stat-val {
  font-family: var(--g-fd);
  font-size: 24px;
  font-weight: 700;
  color: var(--g-blue);
  letter-spacing: -0.022em;
  margin-top: 4px;
}
body.v4 .epp2-stat-delta { font-size: 11px; margin-top: 2px; font-family: var(--g-fd); }
body.v4 .epp2-stat-delta.up { color: var(--g-green); }
body.v4 .epp2-stat-delta.down { color: var(--g-cherry); }

/* ─── Wave 64 · EPISODE CENTRE - dark hero + glass progress + 3-col body ──
   Wave 116 - Refined Option A tracker. Single-green progress, no per-stage
   colour swap, no scale/halo on the current stage, no blue ring on the
   active tab. Reached stages (done OR currently on) get a green icon-pip
   and a green label. Connector bars load green between reached stages.
   The active tab (the one the user is viewing) is shown by a thin inset
   green stroke on the pip + bold label - quiet, not loud.                  */
body.v4 .ec2-progress {
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid var(--g-border);
  border-radius: 18px;
  padding: 18px 24px;
  margin: 14px 0 18px;
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  align-items: center;
  gap: 0;
  box-shadow: var(--g-sh);
}
body.v4 .ec2-progress-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
}
/* Pip = the round icon-chip. 36px green-tinted when reached, grey when
   future. Inline SVG strokes via currentColor so we colour the icon by
   the parent text colour. */
body.v4 .ec2-progress-dot {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,0.05);
  display: grid;
  place-items: center;
  color: var(--g-ink-4);
  transition: background 180ms var(--g-ease, ease-out), color 180ms var(--g-ease, ease-out);
}
body.v4 .ec2-progress-dot svg {
  width: 16px; height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Reached = done OR currently on. Same green treatment either way. */
body.v4 .ec2-progress-node.done .ec2-progress-dot,
body.v4 .ec2-progress-node.on   .ec2-progress-dot {
  background: var(--g-green-bg);
  color: var(--g-green);
}
/* Active tab - the one being viewed. Thin inset stroke + bold label. */
body.v4 .ec2-progress-node.is-active .ec2-progress-dot {
  box-shadow: inset 0 0 0 1.5px var(--g-green);
}
body.v4 .ec2-progress-lbl {
  font-family: var(--g-fd);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--g-ink-4);
  letter-spacing: 0.04em;
  text-align: center;
  line-height: 1.2;
}
body.v4 .ec2-progress-node.done .ec2-progress-lbl,
body.v4 .ec2-progress-node.on   .ec2-progress-lbl { color: var(--g-ink-2); }
body.v4 .ec2-progress-node.is-active .ec2-progress-lbl { color: var(--g-ink-1); font-weight: 700; }
body.v4 .ec2-progress-node.is-future .ec2-progress-lbl { color: var(--g-ink-4); }
/* Connector bar between nodes. 6px green-fillable bar. Defaults grey;
   .done = fully green, .on = green at 50% (mid-stage progress placeholder
   - left as a static 50% for now; can be data-driven later). */
body.v4 .ec2-progress-rule {
  height: 6px;
  background: rgba(0,0,0,0.06);
  border-radius: 3px;
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;
}
body.v4 .ec2-progress-rule::after {
  content: '';
  position: absolute;
  inset: 0 100% 0 0;
  background: var(--g-green);
  border-radius: 3px;
  transition: right 320ms var(--g-ease, ease-out);
}
body.v4 .ec2-progress-rule.done::after { inset: 0 0 0 0; }
body.v4 .ec2-progress-rule.on::after { inset: 0 50% 0 0; }
body.v4 .ec2-body {
  display: grid;
  grid-template-columns: 280px 1fr 320px;
  gap: 14px;
}
/* Wave 115 - when the left rail is empty (Hot Prospect after the dossier
   was merged into the centre column), collapse to a 2-col layout so the
   centre gets the freed space and doesn't sit beside a gap.
   Wave 116 - universal layout: every stage now uses .no-left-rail. When
   there's also no right-rail content (Hot Prospect, Recorded) the body
   collapses to a single column so the dossier + checklist run full width. */
body.v4 .ec2-body.no-left-rail {
  grid-template-columns: 1fr 320px;
}
body.v4 .ec2-body.no-left-rail.no-right-rail {
  grid-template-columns: 1fr;
}
@media (max-width: 1200px) {
  body.v4 .ec2-body { grid-template-columns: 240px 1fr 280px; }
  body.v4 .ec2-body.no-left-rail { grid-template-columns: 1fr 280px; }
  body.v4 .ec2-body.no-left-rail.no-right-rail { grid-template-columns: 1fr; }
}
@media (max-width: 1000px) {
  body.v4 .ec2-body,
  body.v4 .ec2-body.no-left-rail,
  body.v4 .ec2-body.no-left-rail.no-right-rail { grid-template-columns: 1fr; }
}
body.v4 .ec2-pane {
  background: rgba(255,255,255,0.55) !important;
  backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--g-border) !important;
  border-radius: var(--g-r-lg) !important;
  padding: 22px 24px !important;
  box-shadow: var(--g-sh);
}
body.v4 .ec2-pane.compact { padding: 18px 20px !important; }
body.v4 .ec2-pane-eye {
  font-family: var(--g-fd);
  font-size: 11px;
  font-weight: 600;
  color: var(--g-blue);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
body.v4 .ec2-pane-h {
  font-family: var(--g-fd);
  font-size: 18px;
  font-weight: 700;
  color: var(--g-ink-1);
  letter-spacing: -0.015em;
  margin-bottom: 14px;
  line-height: 1.25;
}

/* ─── Wave 65 · CHECKLIST EDITOR ─────────────────────────────────── */
body.v4 .cke-shell {
  display: grid;
  grid-template-columns: 1fr;   /* Wave 191 - listing is full width (preview panel removed) */
  gap: 14px;
}
body.v4 .cke-card {
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--g-border);
  border-radius: var(--g-r-lg);
  padding: 22px 24px;
  box-shadow: var(--g-sh);
}
body.v4 .cke-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 12px;
}
body.v4 .cke-stage-tabs {
  display: inline-flex;
  background: rgba(0,0,0,0.04);
  border-radius: var(--r-pill);
  padding: 2px;
  gap: 0;
  margin-bottom: 18px;
}
body.v4 .cke-stage-tab {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  font-family: var(--g-fd);
  border: none;
  background: transparent;
  color: var(--g-ink-3);
  border-radius: var(--r-pill);
  cursor: pointer;
  letter-spacing: -0.005em;
  transition: color 120ms ease, background 120ms ease;
}
body.v4 .cke-stage-tab:hover { color: var(--g-ink-1); }
body.v4 .cke-stage-tab.on {
  background: var(--g-ink-1);
  color: var(--on-accent);
  font-weight: 600;
}
body.v4 .cke-row {
  display: grid;
  grid-template-columns: auto auto auto 1fr auto auto auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  background: var(--g-surface);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: var(--r);
  margin-bottom: 8px;
  transition: all 180ms cubic-bezier(0.16,1,0.3,1);
}
body.v4 .cke-row:hover { border-color: var(--g-blue); transform: translateY(-1px); }
body.v4 .cke-row.dragging { opacity: 0.5; }
body.v4 .cke-row-handle { color: var(--g-ink-4); cursor: grab; }
body.v4 .cke-row-handle:active { cursor: grabbing; }
body.v4 .cke-row-body { min-width: 0; }
body.v4 .cke-row-title {
  font-family: var(--g-fd);
  font-size: 14px;
  font-weight: 600;
  color: var(--g-ink-1);
  letter-spacing: -0.005em;
}
body.v4 .cke-row-meta {
  font-size: 11.5px;
  color: var(--g-ink-3);
  margin-top: 2px;
}
body.v4 .cke-row-edit {
  background: transparent;
  border: none;
  color: var(--g-ink-3);
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
}
body.v4 .cke-row-edit:hover { background: var(--g-blue-bg); color: var(--g-blue); }
body.v4 .cke-add {
  border: 1px dashed rgba(0,0,0,0.12);
  border-radius: var(--r);
  padding: 14px;
  text-align: center;
  color: var(--g-ink-3);
  font-size: 13px;
  font-family: var(--g-fd);
  cursor: pointer;
  background: transparent;
  margin-top: 8px;
  transition: all 180ms cubic-bezier(0.16,1,0.3,1);
  display: block;
  width: 100%;
}
body.v4 .cke-add:hover {
  border-color: var(--g-blue);
  color: var(--g-blue);
  background: rgba(0,113,227,0.04);
}
body.v4 .cke-preview {
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(28px);
  border: 1px solid var(--g-border);
  border-radius: var(--g-r-lg);
  padding: 18px;
  box-shadow: var(--g-sh);
  align-self: start;
  position: sticky;
  top: 14px;
}
body.v4 .cke-preview-inner {
  background: var(--g-surface);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: var(--r);
  padding: 14px;
}
body.v4 .cke-preview-note {
  font-size: 11.5px;
  color: var(--g-ink-4);
  margin-top: 12px;
  line-height: 1.5;
}

/* ─── Wave 67 · INTEL - heat legend + sticky audience rail ─────── */
body.v4 .intel-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  padding: 10px 14px;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(20px);
  border: 1px solid var(--g-border);
  border-radius: 10px;
  font-size: 11.5px;
  color: var(--g-ink-3);
  margin-bottom: 18px;
  font-family: var(--g-fd);
  letter-spacing: -0.005em;
}
body.v4 .intel-legend strong {
  color: var(--g-ink-1);
  font-weight: 600;
  margin-right: 4px;
}
body.v4 .intel-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
body.v4 .intel-2col {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 14px;
}
@media (max-width: 1100px) { body.v4 .intel-2col { grid-template-columns: 1fr; } }
body.v4 .intel-rail { align-self: start; position: sticky; top: 14px; display: flex; flex-direction: column; gap: 10px; }
body.v4 .intel-rail-card {
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(28px);
  border: 1px solid var(--g-border);
  border-radius: var(--g-r-lg);
  padding: 18px 20px;
  box-shadow: var(--g-sh);
}

/* ─── Wave 68 · GUESTS - detail page ───────────────────────────── */
body.v4 .gd-shell {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 14px;
  /* Wave 150 (item 3c) - keep the rail and main column aligned at the
     top. Without this the rail can grow taller than the appearances list
     and the cards visually drift down. */
  align-items: start;
}
@media (max-width: 1000px) { body.v4 .gd-shell { grid-template-columns: 1fr; } }
body.v4 .gd-rail {
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--g-border);
  border-radius: var(--g-r-lg);
  padding: 22px 24px;
  box-shadow: var(--g-sh);
  align-self: start;
  position: sticky;
  top: 14px;
}
body.v4 .gd-rail-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--g-fd);
  font-size: 22px;
  font-weight: 700;
  color: var(--on-accent);
  margin: 0 auto 12px;
}
body.v4 .gd-rail-name {
  font-family: var(--g-fd);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.018em;
  text-align: center;
  color: var(--g-ink-1);
}
body.v4 .gd-rail-meta {
  font-size: 12.5px;
  color: var(--g-ink-3);
  text-align: center;
  margin-top: 4px;
}
body.v4 .gd-rail-list { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(0,0,0,0.05); }
body.v4 .gd-rail-list .lbl {
  font-family: var(--g-fd);
  font-size: 9.5px;
  font-weight: 600;
  color: var(--g-ink-4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 3px;
}
body.v4 .gd-rail-list .val { font-size: 12.5px; color: var(--g-ink-1); }
body.v4 .gd-main { display: flex; flex-direction: column; gap: 14px; }

/* ─── Wave 69 · CHAT - persona rail + thread + slash commands ── */
body.v4 .chat2-shell {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 14px;
  height: calc(100vh - 200px);
  min-height: 500px;
}
@media (max-width: 900px) { body.v4 .chat2-shell { grid-template-columns: 1fr; } }
body.v4 .chat2-rail {
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--g-border);
  border-radius: var(--g-r-lg);
  padding: 18px;
  box-shadow: var(--g-sh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body.v4 .chat2-rail-eye {
  font-family: var(--g-fd);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--g-ink-4);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
body.v4 .chat2-persona {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: transparent;
  color: var(--g-ink-2);
  cursor: pointer;
  font-family: var(--g-fd);
  font-size: 13px;
  border: none;
  text-align: left;
  width: 100%;
  transition: background 120ms;
}
body.v4 .chat2-persona:hover { background: rgba(0,113,227,0.06); color: var(--g-blue); }
body.v4 .chat2-persona.on { background: rgba(0,113,227,0.10); color: var(--g-blue); font-weight: 600; }
body.v4 .chat2-persona-av {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--g-fd);
  font-size: 10px;
  font-weight: 700;
  color: var(--on-accent);
  flex-shrink: 0;
}
body.v4 .chat2-persona-dot {
  margin-left: auto;
  font-size: 10px;
  color: var(--g-green);
}
body.v4 .chat2-main {
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--g-border);
  border-radius: var(--g-r-lg);
  padding: 24px 28px;
  box-shadow: var(--g-sh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body.v4 .chat2-main-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  margin-bottom: 14px;
}
body.v4 .chat2-main-hd-l { display: flex; align-items: center; gap: 12px; }
body.v4 .chat2-main-hd-name {
  font-family: var(--g-fd);
  font-size: 15px;
  font-weight: 700;
  color: var(--g-ink-1);
  letter-spacing: -0.012em;
}
body.v4 .chat2-main-hd-meta { font-size: 11.5px; color: var(--g-ink-3); }
body.v4 .chat2-thread {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px;
}
body.v4 .chat2-msg { display: flex; gap: 10px; align-items: flex-start; }
body.v4 .chat2-msg-av {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--g-fd);
  font-size: 11px;
  font-weight: 700;
  color: var(--on-accent);
  flex-shrink: 0;
}
body.v4 .chat2-msg-body {
  flex: 1;
  background: var(--g-surface);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: var(--r);
  padding: 12px 16px;
  min-width: 0;
}
body.v4 .chat2-msg.ai .chat2-msg-body {
  background: rgba(0,113,227,0.07);
  border-color: rgba(0,113,227,0.18);
}
body.v4 .chat2-msg-meta {
  font-size: 11.5px;
  color: var(--g-ink-3);
  margin-bottom: 4px;
  font-weight: 500;
}
body.v4 .chat2-msg.ai .chat2-msg-meta { color: var(--g-blue); font-weight: 600; }
body.v4 .chat2-msg-text {
  font-size: 13.5px;
  color: var(--g-ink-1);
  line-height: 1.6;
  letter-spacing: -0.005em;
}
body.v4 .chat2-msg-draft {
  background: rgba(0,0,0,0.04);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  margin-top: 8px;
  font-family: 'SF Mono', Monaco, monospace;
  font-size: 12.5px;
  color: var(--g-ink-2);
  line-height: 1.65;
  white-space: pre-wrap;
}
body.v4 .chat2-msg-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}
body.v4 .chat2-prompts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
body.v4 .chat2-prompt {
  text-align: left;
  padding: 12px 16px;
  background: var(--g-surface);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: var(--r);
  cursor: pointer;
  font-size: 13.5px;
  color: var(--g-ink-1);
  font-family: var(--g-f);
  transition: all 180ms cubic-bezier(0.16,1,0.3,1);
}
body.v4 .chat2-prompt:hover {
  border-color: var(--g-blue);
  color: var(--g-blue);
  transform: translateY(-1px);
}
body.v4 .chat2-input-bar {
  display: flex;
  gap: 10px;
  padding: 10px;
  background: var(--g-surface);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  margin-top: 10px;
}
body.v4 .chat2-input-bar input {
  flex: 1;
  border: none;
  outline: none;
  padding: 6px;
  font-size: 14px;
  font-family: var(--g-f);
  background: transparent;
  color: var(--g-ink-1);
}
body.v4 .chat2-empty {
  text-align: center;
  color: var(--g-ink-3);
  font-style: italic;
  font-size: 13px;
  margin: 18px 0;
}

/* ─── Avatar colour map (shared) ─────────────────────────── */
body.v4 .av-pm{background:var(--g-blue)}
body.v4 .av-ch{background:var(--g-lilac)}
body.v4 .av-ct,body.v4 .av-co{background:var(--g-orange)}
body.v4 .av-aw{background:var(--g-green)}
body.v4 .av-ai{background:var(--g-blue)}

/* ─── Wave 57 popup footer cleanup (audit P0 #13) ──────────────
   Hide EPISODE CENTRE / ARCHIVE / DELETE link row - actions still
   wired to window functions for keyboard/CLI access. Proper ⋯ menu
   in modal head is a follow-up. */
body.v4 .ep-modal-foot-links { display: none !important; }

/* ─── Wave 51 LIVE-AUDIT FIXES ─────────────────────────────────
   Issues found by opening brain.petermccormack.com in Chrome:
   1. .btn-v4.btn-primary still cherry (v4.css duplicate rule winning)
   2. .ck-owner pills solid cherry in episode popup
   3. .ck-check (checklist checkboxes) are SQUARES with cherry hover/mint check
   4. .b-mini-cal-grid was 143px wide (cells 18.75px) - already fixed above */

/* 1 - Add episode button & every other btn-v4.btn-primary instance */
body.v4 .btn-v4.btn-primary,
body.v4 button.btn-v4.btn-primary {
  background: var(--g-blue) !important;
  color: var(--on-accent) !important;
  border: none !important;
  box-shadow: none !important;
}
body.v4 .btn-v4.btn-primary:hover {
  background: var(--g-blue-2) !important;
}

/* 2 - Owner pills in checklist (was solid cherry "PETER MCCORMACK") */
body.v4 .ck-owner {
  background: rgba(0, 0, 0, 0.06) !important;
  color: var(--g-ink-2) !important;
  border: none !important;
  font-family: var(--g-fd) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase;
  padding: 3px 9px !important;
  border-radius: var(--r-pill) !important;
}
body.v4 .ck-owner.is-ai {
  background: var(--g-lilac-bg) !important;
  color: var(--g-lilac) !important;
}
/* "is-mine" was overriding to solid cherry - switch to a subtle blue tint */
body.v4 .ck-row.is-mine .ck-owner {
  background: var(--g-blue-bg) !important;
  color: var(--g-blue) !important;
}

/* 3 - Checklist checkboxes: SQUARES → CIRCLES with blue tick (per Apple Glass) */
body.v4 .ck-check {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(0, 0, 0, 0.18) !important;
  background: transparent !important;
  color: var(--on-accent) !important;
  transition: background 120ms ease, border-color 120ms ease !important;
}
body.v4 .ck-check:hover:not(:disabled) {
  border-color: var(--g-blue) !important;
}
body.v4 .ck-check.on {
  background: var(--g-blue) !important;
  border-color: var(--g-blue) !important;
}
body.v4 .ck-check.on i {
  color: var(--on-accent) !important;
}
body.v4 .ck-check.ck-check-info {
  background: var(--g-lilac-bg) !important;
  border-color: var(--g-lilac) !important;
  color: var(--g-lilac) !important;
}
/* "not mine" subtle, no cherry hover */
body.v4 .ck-row.not-mine .ck-check {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}
body.v4 .ck-row.is-mine .ck-check:not(.on) {
  border-color: var(--g-blue) !important;
}

/* ─── TASK ROWS · Your tasks widget (dashboard + My Work) ────
   Three fixes: circular blue-tick checkbox (matches APPLE_GLASS_FLOATING),
   faint divider between rows, readable stage pill (was white-on-white). */
body.v4 .task-row {
  padding: 12px 4px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  grid-template-columns: 22px 1fr !important;
  gap: 14px !important;
}
body.v4 .task-list .task-row:last-child { border-bottom: none !important; }

/* Circular checkbox - empty = thin grey outline, checked = solid blue + white tick */
body.v4 .task-row .task-row-check {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 22px !important;
  height: 22px !important;
  margin: 1px 0 0 !important;
  border: 1.5px solid rgba(0, 0, 0, 0.18) !important;
  border-radius: 50% !important;
  background: transparent !important;
  cursor: pointer !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0;
  transition: background 120ms ease, border-color 120ms ease;
}
body.v4 .task-row .task-row-check:hover {
  border-color: var(--g-blue) !important;
}
body.v4 .task-row .task-row-check:checked {
  background: var(--g-blue) !important;
  border-color: var(--g-blue) !important;
}
body.v4 .task-row .task-row-check:checked::after {
  content: '' !important;
  display: block !important;
  width: 5px !important;
  height: 9px !important;
  border: none !important;
  background: none !important;
  border-right: 2px solid #fff !important;
  border-bottom: 2px solid #fff !important;
  transform: rotate(45deg) translate(-1px, -1px) !important;
}

/* Stage pill - was invisible white-on-white. Tinted glass per stage. */
body.v4 .task-row-stage,
body.v4 .task-row-stage.pill-soft,
body.v4 .task-row-stage.pill-soft.tone-ink {
  background: rgba(0, 0, 0, 0.06) !important;
  color: var(--g-ink-2) !important;
  font-family: var(--g-fd) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 2px 8px !important;
  border-radius: var(--r-pill) !important;
  border: none !important;
}
/* Stage-specific tint - JS doesn't add a stage class yet, so fall back
   to attribute selector on the text content via :has if available, or
   leave as neutral grey. Below: optional manual tinting if a stage class
   is added in future. */
body.v4 .task-row-stage.stage-booked    { background: var(--g-cherry-bg) !important; color: var(--g-cherry) !important; }
body.v4 .task-row-stage.stage-recorded  { background: var(--g-butter-bg) !important; color: var(--g-butter) !important; }
body.v4 .task-row-stage.stage-in_edit,
body.v4 .task-row-stage.stage-edit      { background: var(--g-blue-bg) !important;   color: var(--g-blue) !important; }
body.v4 .task-row-stage.stage-scheduled { background: var(--g-green-bg) !important;  color: var(--g-green) !important; }
body.v4 .task-row-stage.stage-pitch,
body.v4 .task-row-stage.stage-hot       { background: var(--g-lilac-bg) !important;  color: var(--g-lilac) !important; }

/* Due-date pill - keep cherry for today/overdue but soften to glass pill */
body.v4 .task-row-due {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--g-ink-3) !important;
  letter-spacing: -0.005em;
}
body.v4 .task-row-due.overdue,
body.v4 .task-row-due.due-today,
body.v4 .task-row-due.due-tomorrow {
  color: var(--g-cherry) !important;
  font-weight: 600 !important;
}

/* Episode number / label - readable not invisible */
body.v4 .task-row-ep {
  font-family: var(--g-fd);
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--g-ink-3) !important;
  letter-spacing: -0.005em;
}

/* Title + meta colours */
body.v4 .task-row-title {
  font-family: var(--g-fd) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--g-ink-1) !important;
  letter-spacing: -0.005em;
}
body.v4 .task-row-meta {
  font-size: 11.5px !important;
  color: var(--g-ink-3) !important;
  margin-top: 4px !important;
  gap: 8px !important;
}

/* ─── BODY · photographic backdrop ─────────────────────────── */
html:has(body.v4),
body.v4 {
  background:
    radial-gradient(ellipse 900px 600px at 8% -5%, rgba(168, 182, 255, 0.55), transparent),
    radial-gradient(ellipse 800px 500px at 92% 25%, rgba(255, 184, 168, 0.40), transparent),
    radial-gradient(ellipse 800px 700px at 55% 105%, rgba(180, 255, 210, 0.32), transparent),
    linear-gradient(160deg, #eef0f5 0%, #f5f5f7 100%) fixed;
  background-attachment: fixed;
}
body.v4 .app {
  background: transparent;
  padding: 0;
}

/* ─── SIDEBAR · floating glass rail ────────────────────────── */
body.v4 .sb,
body.v4 .sidebar.sb {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-border);
  border-radius: var(--r-xl);
  margin: 18px 0 18px 18px;
  height: calc(100vh - 36px);
  position: sticky;
  top: 18px;
  padding: 18px 12px;
  box-shadow: var(--g-sh);
}
body.v4 .sb-brand {
  border-bottom: none;
  margin-bottom: 6px;
  padding: 4px 8px 14px;
}
body.v4 .sb-brand-mark {
  background: var(--g-blue) !important;
  color: var(--on-accent) !important;
  box-shadow: none;
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  letter-spacing: -0.015em;
}
body.v4 .sb-brand-name { color: var(--g-ink-1) !important; }
body.v4 .sb-brand-sub  { color: var(--g-ink-4) !important; }
body.v4 .sb-group {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--g-ink-4) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 12px 10px 4px;
}
body.v4 .sb-item {
  background: transparent;
  color: var(--g-ink-2) !important;
  border-radius: 10px;
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
body.v4 .sb-item:hover {
  background: rgba(255, 255, 255, 0.5);
  color: var(--g-ink-1) !important;
}
/* Active sidebar item - same dark+blue wash as the hero panel so
   the "you are here" badge visually matches the page hero. The hero
   reads blue because of the lilac+blue radial wash sitting on top
   of the dark base; replicate that wash here. */
body.v4 .sb-item.on,
body.v4 .sb-item.active {
  background:
    radial-gradient(ellipse 220px 80px at 0% 0%, rgba(94, 92, 230, 0.55), transparent),
    radial-gradient(ellipse 220px 80px at 100% 100%, rgba(0, 113, 227, 0.45), transparent),
    linear-gradient(180deg, #1d1d1f 0%, var(--ink-deep) 100%) !important;
  color: var(--on-accent) !important;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.10);
}
body.v4 .sb-item .ic { color: currentColor; opacity: 0.7; }
body.v4 .sb-item.on .ic,
body.v4 .sb-item.active .ic { color: var(--on-accent); opacity: 1; }
body.v4 .sb-item .count {
  background: rgba(255, 255, 255, 0.55);
  color: var(--g-ink-4);
  border: 1px solid rgba(0, 0, 0, 0.04);
  padding: 1px 8px;
  border-radius: var(--r-pill);
  font-size: 10.5px;
  font-weight: 600;
}
body.v4 .sb-item.on .count,
body.v4 .sb-item.active .count {
  background: rgba(255, 255, 255, 0.20);
  color: var(--on-accent);
  border-color: transparent;
}

/* ─── MAIN ─────────────────────────────────────────────────── */
body.v4 .main {
  background: transparent;
  padding: 24px 28px 36px;
  overflow-x: hidden;
  margin-left: 0;
  margin-top: 0;
  max-width: none;
  min-height: auto;
}

/* ─── TOPBAR · floating pill ───────────────────────────────── */
body.v4 .topbar {
  background: transparent;
  border-bottom: none;
  padding: 0;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
}
body.v4 .topbar-search input,
body.v4 .topbar-search > input#global-search {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-border);
  border-radius: var(--r-pill);
  padding: 8px 12px 8px 34px;
  color: var(--g-ink-1);
  font-size: 13px;
}
body.v4 .topbar-search input:focus {
  outline: none;
  border-color: var(--g-blue);
  box-shadow: 0 0 0 3px var(--g-blue-bg);
}
body.v4 .topbar-action {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-border);
  color: var(--g-ink-2);
  border-radius: var(--r-pill);
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 500;
}
body.v4 .topbar-action:hover {
  border-color: rgba(255, 255, 255, 0.85);
  color: var(--g-ink-1);
  background: rgba(255, 255, 255, 0.75);
}
body.v4 .topbar-user {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-border);
  border-radius: var(--r-pill);
  padding: 4px 12px 4px 4px;
  margin-left: 0;
  border-left: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
body.v4 .topbar-avatar { background: var(--g-blue); }
body.v4 .topbar-user-name { color: var(--g-ink-1); }
body.v4 .topbar-user-role { color: var(--g-ink-3); }

/* ─── HERO · dark ink panel ────────────────────────────────
   Hero is the only intentionally-dark surface on every page.
   Sits on the soft photographic body backdrop, then the light
   brain panel sits underneath it. This pairing reads strongly. */
body.v4 .hero {
  background: linear-gradient(180deg, #1d1d1f 0%, var(--ink-deep) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: var(--g-r-xl);
  padding: 26px 30px;
  color: var(--on-accent) !important;
  margin-bottom: 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 22px 60px rgba(0,0,0,0.18);
  position: relative;
  overflow: hidden;
}
body.v4 .hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 600px 320px at 12% -10%, rgba(94, 92, 230, 0.30), transparent),
    radial-gradient(ellipse 500px 260px at 95% 110%, rgba(0, 113, 227, 0.22), transparent);
  pointer-events: none;
}
body.v4 .hero > * { position: relative; z-index: 1; }
/* Wave 224 - the hero title panel is DARK in light mode; flip it LIGHT in dark
   mode (dark page → light hero for contrast). Per Peter. Everything else on the
   page stays dark; only the hero inverts (dashboard handles its own full flip). */
/* Apple-grade: the hero is THE gradient element in dark (was white). Light text
   inside (incl. the AI brain panel) now reads correctly on it. */
body.v4.dark .hero {
  background:
    radial-gradient(ellipse 120% 130% at 0% 0%, rgba(94,92,230,.42), transparent 60%),
    radial-gradient(ellipse 110% 120% at 100% 100%, rgba(0,113,227,.34), transparent 60%),
    var(--apl-grad-panel) !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,.92) !important;
}
body.v4.dark .hero::before { display: none; }
body.v4.dark .hero .hero-title,
body.v4.dark .hero h1 { color: rgba(255,255,255,1) !important; }
body.v4.dark .hero .hero-sub,
body.v4.dark .hero p { color: rgba(255,255,255,.72) !important; }
body.v4.dark .hero .hero-eyebrow { color: var(--cherry) !important; }
body.v4 .hero-eyebrow {
  color: var(--hero-blue) !important;
  font-weight: 500;
  text-transform: none;
  letter-spacing: -0.005em;
  font-size: 12.5px;
}
body.v4 .hero h1,
body.v4 .hero-title {
  font-family: var(--g-fd) !important;
  color: var(--on-accent) !important;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin: 6px 0 6px;
}
body.v4 .hero-sub,
body.v4 .hero p {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 16px;
  letter-spacing: -0.005em;
}
/* Hero stat row */
body.v4 .hero-stat-row {
  display: flex;
  gap: 32px;
  margin-top: 16px;
}
body.v4 .hero-stat .lbl,
body.v4 .hero-stat-cell .lbl {
  color: rgba(255, 255, 255, 0.55) !important;
  font-weight: 500;
  text-transform: none;
  letter-spacing: -0.005em;
  font-size: 11.5px;
}
/* Stat numerals on dark hero: SOLID white - no gradient shimmer.
   Peter explicitly disliked the "shiny" gradient effect on dark. */
body.v4 .hero-stat .val,
body.v4 .hero-stat-cell .val {
  font-family: var(--g-fd) !important;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.022em;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #fff !important;
  color: var(--on-accent) !important;
}
body.v4 .hero-stat-cell.is-text .val,
body.v4 .hero-stat-cell .val.is-text {
  font-size: 15px;
  -webkit-text-fill-color: #fff !important;
  color: var(--on-accent) !important;
}
body.v4 .hero-stat-cell .val .unit {
  font-size: 14px;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.5);
  color: rgba(255, 255, 255, 0.5);
}
/* Hero CTA - primary stays Apple blue; ghost reads on dark */
body.v4 .hero-cta {
  background: var(--g-blue);
  color: var(--on-accent);
  border: none;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--r-pill);
  letter-spacing: -0.005em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
body.v4 .hero-cta:hover { background: #1a82ec; }
body.v4 .hero-cta.ghost {
  background: rgba(255, 255, 255, 0.10) !important;
  color: var(--on-accent) !important;
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
body.v4 .hero-cta.ghost:hover {
  background: rgba(255, 255, 255, 0.18) !important;
}
body.v4 .hero a.hero-cta.ghost { text-decoration: none; }
body.v4 .hero .hero-rest {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.v4 .hero .hero-rest-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12.5px;
}
body.v4 .hero .hero-rest-num {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.7);
  font-weight: 700;
  font-size: 10px;
}
body.v4 .hero .hero-rest-row strong {
  color: var(--on-accent);
  font-weight: 600;
}
/* Anything inside hero relying on var(--ink) / dark text must flip white */
body.v4 .hero strong,
body.v4 .hero em,
body.v4 .hero b,
body.v4 .hero a:not(.hero-cta) { color: var(--on-accent); }
/* Dashboard hero "what should I be looking at" prompt cluster */
body.v4 .hero .hero-prompts a,
body.v4 .hero .hero-prompts .hero-prompt {
  background: rgba(255, 255, 255, 0.10) !important;
  color: var(--on-accent) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
}

/* ─── BRAIN PANEL · glass card ─────────────────────────────── */
body.v4 .brain {
  background: rgba(255, 255, 255, 0.58) !important;
  backdrop-filter: var(--g-blur-2);
  -webkit-backdrop-filter: var(--g-blur-2);
  border: 1px solid var(--g-border) !important;
  border-radius: var(--g-r-xl);
  padding: 18px 22px;
  color: var(--g-ink-1) !important;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
  box-shadow: var(--g-sh);
}
body.v4 .brain-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--g-lilac-bg);
  color: var(--g-lilac);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
body.v4 .brain-icon .ic,
body.v4 .brain-icon svg { color: currentColor; opacity: 1; stroke: currentColor; }
body.v4 .brain-body { flex: 1; min-width: 0; }
body.v4 .brain-body .lbl,
body.v4 .brain .lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--g-ink-4) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
body.v4 .brain-body .obs,
body.v4 .brain .obs {
  font-size: 14.5px;
  color: var(--g-ink-1) !important;
  letter-spacing: -0.005em;
  margin: 4px 0 10px;
  line-height: 1.45;
}
body.v4 .brain-prompts {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
body.v4 .brain-prompt {
  background: rgba(255, 255, 255, 0.60) !important;
  color: var(--g-ink-2) !important;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: var(--r-pill);
  padding: 5px 11px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
}
body.v4 .brain-prompt:hover {
  border-color: var(--g-blue);
  color: var(--g-blue) !important;
}
body.v4 .brain-prompt.ask {
  background: transparent !important;
  border-style: dashed;
  color: var(--g-ink-4) !important;
}

/* ─── CARDS · all variants reskinned ──────────────────────── */
body.v4 .card,
body.v4 .panel,
body.v4 .ck-wrap,
body.v4 .ec-pane-card,
body.v4 .ec-glance-card,
body.v4 .ec-dossier-card,
body.v4 .ec-bluecard,
body.v4 .ec-ai-accordion,
body.v4 .apl-card {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-border) !important;
  border-radius: var(--g-r-lg);
  box-shadow: var(--g-sh);
}
body.v4 .card { padding: 18px 22px; }
body.v4 .card-head h3 {
  font-family: var(--g-fd);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--g-ink-1);
}
body.v4 .card-head .badge {
  background: rgba(255, 255, 255, 0.6);
  color: var(--g-ink-3);
  border: 1px solid rgba(0, 0, 0, 0.04);
  font-size: 11px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: var(--r-pill);
}
body.v4 .card-head .more,
body.v4 .card-action {
  color: var(--g-blue);
  font-weight: 500;
  font-size: 12.5px;
}

/* Apple-row light + dark card pairing */
body.v4 .apl-card { padding: 22px; min-height: 220px; }
body.v4 .apl-card.dark {
  background: rgba(29, 29, 31, 0.78) !important;
  color: var(--on-accent);
  border-color: rgba(255, 255, 255, 0.12) !important;
}
body.v4 .apl-card.dark .apl-card-eye,
body.v4 .apl-card.dark .bigcard-eye { color: rgba(255, 255, 255, 0.55); }
body.v4 .apl-card.dark .apl-card-h,
body.v4 .apl-card.dark .bigcard-h { color: var(--on-accent); }
body.v4 .apl-card.dark .apl-card-sub,
body.v4 .apl-card.dark .bigcard-sub { color: rgba(255, 255, 255, 0.7); }
/* Numerals on dark cards: SOLID, not gradient. Peter explicitly
   disliked the shiny green gradient on dark surfaces. Use single
   bright colours that read clean on dark backgrounds. */
body.v4 .apl-dark-num,
body.v4 .big-num {
  font-family: var(--g-fd);
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  margin: 14px 0 8px;
  color: var(--on-accent);
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: #fff;
}
body.v4 .apl-dark-num.rose   { color: var(--pink-bright); -webkit-text-fill-color: var(--pink-bright); }
body.v4 .apl-dark-num.mint   { color: #5cd99a; -webkit-text-fill-color: #5cd99a; }
body.v4 .apl-dark-num.butter { color: #ffd47a; -webkit-text-fill-color: #ffd47a; }
body.v4 .apl-dark-num.blue   { color: var(--hero-blue); -webkit-text-fill-color: var(--hero-blue); }
/* Also kill blue-gradient text wherever it lands on a dark card */
body.v4 .apl-card.dark .apl-h b {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: var(--hero-blue);
  color: var(--hero-blue);
}

/* ─── STAT TILES ──────────────────────────────────────────── */
body.v4 .stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 16px;
}
body.v4 .stat,
body.v4 .stat-tile {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-border) !important;
  border-radius: var(--g-r);
  padding: 16px 18px;
  box-shadow: var(--g-sh);
}
body.v4 .stat .lbl,
body.v4 .stat-tile-label {
  color: var(--g-ink-4);
  font-weight: 500;
  text-transform: none;
  letter-spacing: -0.005em;
  font-size: 11.5px;
}
body.v4 .stat .val,
body.v4 .stat-tile-value {
  font-family: var(--g-fd);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.025em;
  background: var(--g-grad-b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 4px 0 2px;
}
body.v4 .stat .delta { color: var(--g-ink-3); font-size: 11.5px; }

/* ─── BUTTONS · Apple blue pill ──────────────────────────── */
body.v4 .btn-primary {
  background: var(--g-blue);
  color: var(--on-accent);
  border: none;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--r-pill);
  letter-spacing: -0.005em;
  box-shadow: none;
}
body.v4 .btn-primary:hover { background: var(--g-blue-2); }
body.v4 .btn-secondary {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
  color: var(--g-ink-1);
  border: 1px solid var(--g-border);
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 500;
  border-radius: var(--r-pill);
  letter-spacing: -0.005em;
}
body.v4 .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(255, 255, 255, 0.85);
}
body.v4 .btn-ghost {
  background: transparent;
  color: var(--g-ink-3);
  border: none;
  padding: 6px 10px;
  font-size: 12.5px;
}
body.v4 .btn-ghost:hover { color: var(--g-blue); }

/* ─── Wave 99 - universal button states ─────────────────────
   Until now the design system only defined :hover. This adds the
   missing :active press, :focus-visible keyboard outline, and
   :disabled greyout so every button across the app feels alive
   and accessible. Applies to the three canonical variants AND to
   the .btn-v4 alias and .btn-sm modifier so older callsites also
   pick up the behaviour. */
body.v4 .btn-primary,
body.v4 .btn-secondary,
body.v4 .btn-ghost,
body.v4 .btn-v4 {
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease,
              transform 90ms ease, opacity 140ms ease, box-shadow 140ms ease;
  -webkit-user-select: none;
  user-select: none;
}
body.v4 .btn-primary:active:not(:disabled),
body.v4 .btn-secondary:active:not(:disabled),
body.v4 .btn-ghost:active:not(:disabled),
body.v4 .btn-v4:active:not(:disabled) {
  transform: scale(0.97);
}
body.v4 .btn-primary:active:not(:disabled) {
  background: var(--g-blue-2);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
}
body.v4 .btn-secondary:active:not(:disabled) {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.18);
}
body.v4 .btn-primary:focus-visible,
body.v4 .btn-secondary:focus-visible,
body.v4 .btn-ghost:focus-visible,
body.v4 .btn-v4:focus-visible {
  outline: 2px solid var(--g-blue);
  outline-offset: 2px;
}
body.v4 .btn-primary:disabled,
body.v4 .btn-secondary:disabled,
body.v4 .btn-ghost:disabled,
body.v4 .btn-v4:disabled,
body.v4 .btn-primary[aria-busy="true"],
body.v4 .btn-secondary[aria-busy="true"],
body.v4 .btn-ghost[aria-busy="true"],
body.v4 .btn-v4[aria-busy="true"] {
  opacity: 0.55;
  cursor: progress;
  pointer-events: none;
  transform: none !important;
}
body.v4 .btn-primary:disabled,
body.v4 .btn-secondary:disabled,
body.v4 .btn-ghost:disabled,
body.v4 .btn-v4:disabled {
  cursor: not-allowed;
}
body.v4 .ck-mini-btn,
body.v4 .ck-mini {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
  border: 1px solid rgba(0, 0, 0, 0.05);
  color: var(--g-ink-2);
  border-radius: var(--r-pill);
  padding: 4px 11px;
  font-size: 11.5px;
  font-weight: 500;
}
body.v4 .ck-mini-btn:hover {
  border-color: var(--g-blue);
  color: var(--g-blue);
}
body.v4 .ck-mini-btn.ck-view-output,
body.v4 .ck-mini.lilac {
  background: var(--g-lilac-bg);
  color: var(--g-lilac);
  border-color: transparent;
}

/* ─── ALL OTHER BUTTONS · sweep beige out everywhere ──────────
   Any button or button-like control that wasn't covered by
   .btn-primary / .btn-secondary / .btn-ghost falls back here so
   no surface keeps the old beige paper/line tokens. */
body.v4 .wk-cal-navbtn,
body.v4 .wk-cal-mode,
body.v4 .wb-tab,
body.v4 .empty-state-cta,
body.v4 .ai-brain-action,
body.v4 .ceo-tile-cta,
body.v4 .cadence-hero-cta,
body.v4 .ec-bluecard-head-actions button,
body.v4 .ec-bluecard-feedback-actions button,
body.v4 .ec-art-edit-action,
body.v4 .ec-ai-row-actions button,
body.v4 .intel-action-body button,
body.v4 .wbp-action,
body.v4 .wbp-action-btns button,
body.v4 .integ-actions button,
body.v4 .agent-card-actions button,
body.v4 .ck-actions button:not(.btn-primary):not(.btn-secondary),
body.v4 .actions button:not(.btn-primary):not(.btn-secondary):not(.btn-ghost) {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: var(--g-ink-1) !important;
  border-radius: var(--r-pill) !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  font-family: var(--g-fd) !important;
  letter-spacing: -0.005em !important;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
body.v4 .wk-cal-navbtn:hover,
body.v4 .wk-cal-mode:hover,
body.v4 .wb-tab:hover,
body.v4 .empty-state-cta:hover,
body.v4 .ai-brain-action:hover,
body.v4 .ceo-tile-cta:hover,
body.v4 .cadence-hero-cta:hover,
body.v4 .ec-bluecard-head-actions button:hover,
body.v4 .ec-bluecard-feedback-actions button:hover,
body.v4 .ec-art-edit-action:hover,
body.v4 .ec-ai-row-actions button:hover,
body.v4 .wbp-action:hover,
body.v4 .wbp-action-btns button:hover {
  background: rgba(255, 255, 255, 0.80) !important;
  border-color: var(--g-blue) !important;
  color: var(--g-blue) !important;
}
/* Active state for calendar mode toggles */
body.v4 .wk-cal-mode.active,
body.v4 .wb-tab.on,
body.v4 .wb-tab.active {
  background: var(--g-ink-1) !important;
  color: var(--on-accent) !important;
  border-color: var(--g-ink-1) !important;
}
/* Plain <button class="btn ..."> with no -primary/-secondary */
body.v4 button.btn:not(.btn-primary):not(.btn-secondary):not(.btn-ghost) {
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: var(--g-ink-1) !important;
  border-radius: var(--r-pill) !important;
  padding: 6px 14px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  font-family: var(--g-fd) !important;
}
/* ─── AI TEAM · eight director cards (matches mockup) ────────
   Card chrome stays. Footer becomes a quiet meta strip with two
   buttons: "See latest" = blue text link (zero chrome), "Set brief"
   = the only filled Apple-blue pill. No beige. */
body.v4 .agent-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 1000px) { body.v4 .agent-grid { grid-template-columns: 1fr; } }
/* Batch 2 - AI Team: Directors / Agents groups, divider + group pills */
body.v4 .ai-team-group { margin-bottom: 8px; }
body.v4 .ai-team-grouphead { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; }
body.v4 .ai-team-pill { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 4px 12px; border-radius: var(--r-pill); }
body.v4 .ai-team-pill--dir { background: var(--c-lilac); color: var(--on-lilac); }
body.v4 .ai-team-pill--agt { background: var(--c-sky); color: var(--on-sky); }
body.v4 .ai-team-count { font-size: 12px; font-weight: 600; color: var(--g-ink-3); }
body.v4 .ai-team-divider { height: 1px; background: var(--line); margin: 22px 0; }
/* Batch 2 - findings pills (auto-daily / brief / who set it) */
body.v4 .finding-pill { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; padding: 2px 9px; border-radius: var(--r-pill); }
body.v4 .finding-pill--auto  { background: var(--c-sky);   color: var(--on-sky); }
body.v4 .finding-pill--brief { background: var(--c-lilac); color: var(--on-lilac); }
body.v4 .finding-pill--by    { background: var(--c-mint);  color: var(--on-mint); }
body.v4 .agent-card {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--g-border) !important;
  border-radius: var(--g-r-lg) !important;
  padding: 0 !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--g-sh);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
body.v4 .agent-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 24px 56px rgba(0,0,0,0.10) !important;
}
body.v4 .agent-card-top { height: 3px !important; }
body.v4 .agent-card-head {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 18px 20px 14px !important;
  background: transparent !important;
}
body.v4 .agent-card-avatar {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  font-family: var(--g-fd) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
  color: var(--on-accent) !important;
}
body.v4 .agent-card-name {
  font-family: var(--g-fd) !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: var(--g-ink-1) !important;
  letter-spacing: -0.005em !important;
}
body.v4 .agent-card-domain {
  font-size: 11.5px !important;
  color: var(--g-ink-3) !important;
  letter-spacing: -0.005em !important;
}
body.v4 .agent-card-status {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  padding: 3px 9px !important;
  border-radius: var(--r-pill) !important;
  background: var(--g-green-bg) !important;
  color: var(--g-green) !important;
  letter-spacing: -0.005em !important;
  border: none !important;
  text-transform: none;
}
body.v4 .agent-card-status.paused {
  background: var(--g-butter-bg) !important;
  color: var(--g-butter) !important;
}
body.v4 .agent-card-section {
  padding: 8px 20px 12px !important;
  margin-top: 0 !important;
}
body.v4 .agent-card-section-title {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  color: var(--g-ink-4) !important;
  margin-bottom: 4px !important;
}
body.v4 .agent-card-text {
  font-size: 12.5px !important;
  color: var(--g-ink-2) !important;
  line-height: 1.45 !important;
  letter-spacing: -0.005em !important;
}
body.v4 .agent-card-list {
  font-size: 12.5px !important;
  color: var(--g-ink-2) !important;
  line-height: 1.5 !important;
}
/* Footer - the redesign */
body.v4 .agent-card-actions {
  margin-top: auto !important;
  padding: 12px 16px !important;
  border-top: 1px solid var(--g-rule) !important;
  background: rgba(0, 0, 0, 0.018) !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 6px !important;
}
/* Override the inline style="flex:1" buttons get from agents.js */
body.v4 .agent-card-actions .btn-secondary {
  flex: 0 0 auto !important;
  background: transparent !important;
  border: none !important;
  color: var(--g-blue) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  padding: 7px 12px !important;
  border-radius: var(--r-pill) !important;
  font-family: var(--g-fd) !important;
  letter-spacing: -0.005em !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.v4 .agent-card-actions .btn-secondary:hover {
  background: rgba(0, 113, 227, 0.08) !important;
}
body.v4 .agent-card-actions .btn-primary {
  flex: 0 0 auto !important;
  background: var(--g-blue) !important;
  color: var(--on-accent) !important;
  border: none !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  padding: 7px 14px !important;
  border-radius: var(--r-pill) !important;
  font-family: var(--g-fd) !important;
  letter-spacing: -0.005em !important;
}
body.v4 .agent-card-actions .btn-primary:hover { background: var(--g-blue-2) !important; }

/* Booking box panel (beige background carryover) */
body.v4 .booking-box,
body.v4 .booking-panel,
body.v4 .inline-booking,
body.v4 .ep-modal-booking {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--g-border) !important;
  border-radius: var(--g-r-lg) !important;
}

/* ─── TAGS / PILLS ────────────────────────────────────────── */
body.v4 .pill,
body.v4 .pill-soft,
body.v4 .tp-pill,
body.v4 .tag {
  background: rgba(255, 255, 255, 0.6) !important;
  border: 1px solid rgba(0, 0, 0, 0.05);
  color: var(--g-ink-2);
  border-radius: var(--r-pill);
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
body.v4 .pill-soft.tone-cherry,
body.v4 .tag.cherry { background: var(--g-cherry-bg) !important; color: var(--g-cherry); border-color: transparent; }
body.v4 .pill-soft.tone-mint,
body.v4 .tag.mint,
body.v4 .tag.green { background: var(--g-green-bg) !important; color: var(--g-green); border-color: transparent; }
body.v4 .pill-soft.tone-peach,
body.v4 .tag.peach,
body.v4 .tag.orange { background: var(--g-orange-bg) !important; color: var(--g-orange); border-color: transparent; }
body.v4 .pill-soft.tone-lilac,
body.v4 .tag.lilac { background: var(--g-lilac-bg) !important; color: var(--g-lilac); border-color: transparent; }
body.v4 .pill-soft.tone-sky,
body.v4 .tag.sky,
body.v4 .tag.blue { background: var(--g-blue-bg) !important; color: var(--g-blue); border-color: transparent; }
body.v4 .pill-soft.tone-butter,
body.v4 .tag.butter { background: var(--g-butter-bg) !important; color: var(--g-butter); border-color: transparent; }

/* ─── FORM INPUTS · translucent ───────────────────────────── */
body.v4 .form-input,
body.v4 input[type="text"].form-input,
body.v4 input[type="date"].form-input,
body.v4 input[type="time"].form-input,
body.v4 input[type="email"].form-input,
body.v4 input[type="url"].form-input,
body.v4 select.form-input,
body.v4 textarea.form-input {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13px;
  /* Field sits on a light surface in both themes - pin dark text (incl.
     -webkit-text-fill-color, which Safari uses over `color`). Fixes white-on-
     white inputs in dark mode (Chelsea, Safari, 2026-06-21). */
  color: var(--field-ink);
  -webkit-text-fill-color: var(--field-ink);
  caret-color: var(--field-ink);
  color-scheme: light;
}
body.v4 .form-input:focus,
body.v4 textarea.form-input:focus {
  outline: none;
  border-color: var(--g-blue);
  box-shadow: 0 0 0 3px var(--g-blue-bg);
}
body.v4 .ep-field-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--g-ink-4);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ─── EYEBROWS / SECTION HEADS ─────────────────────────────── */
body.v4 .eyebrow {
  color: var(--g-ink-4) !important;
  font-weight: 600;
  letter-spacing: 0.05em;
  font-size: 11px;
}
body.v4 .card-eye {
  color: var(--g-blue);
  letter-spacing: -0.005em;
  text-transform: none;
  font-weight: 500;
  font-size: 12.5px;
}

/* ─── MODALS · heavy blur glass ────────────────────────────── */
body.v4 .aiceo-modal-overlay {
  background:
    radial-gradient(ellipse at top, rgba(168, 182, 255, 0.30), transparent 60%),
    rgba(0, 0, 0, 0.42) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body.v4 .aiceo-modal {
  /* Wave 179.x - near-white canvas for every popup, matched to the approved
     prototype (which reads almost white with a faint cool tint). White panels
     are separated by their border + shadow, not by a darker canvas. */
  background: #f8f9fc !important;
  backdrop-filter: var(--g-blur-2);
  -webkit-backdrop-filter: var(--g-blur-2);
  border: 1px solid var(--g-border);
  border-radius: var(--g-r-xl);
  box-shadow: var(--g-sh-modal);
  overflow: hidden;
}
body.v4 .aiceo-modal-head {
  background: transparent !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding: 16px 22px;
}
body.v4 .aiceo-modal-headtitle {
  font-family: var(--g-fd);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--g-ink-1);
}
body.v4 .aiceo-modal-headsub {
  color: var(--g-ink-3);
  font-size: 12.5px;
}
body.v4 .aiceo-modal-close {
  background: rgba(0, 0, 0, 0.05);
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  color: var(--g-ink-3);
  cursor: pointer;
  display: grid;
  place-items: center;
}
body.v4 .aiceo-modal-close:hover { background: rgba(0, 0, 0, 0.1); color: var(--g-ink-1); }
body.v4 .aiceo-modal-body { background: transparent; padding: 18px 22px; }
body.v4 .aiceo-modal-foot {
  background: rgba(0, 0, 0, 0.025) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding: 14px 22px;
}

/* Episode popup (full screen modal) - glass overlay variant */
/* ─── EPISODE POPUP · full glass redesign ──────────────────── */
body.v4 .ep-modal-overlay {
  background:
    radial-gradient(ellipse at top, rgba(168, 182, 255, 0.30), transparent 60%),
    rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body.v4 .ep-modal {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: var(--g-blur-2);
  -webkit-backdrop-filter: var(--g-blur-2);
  border: 1px solid var(--g-border);
  border-radius: var(--g-r-xl);
  box-shadow: var(--g-sh-modal);
}
body.v4 .ep-modal-head {
  background: transparent !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  padding: 22px 28px 18px !important;
}
body.v4 .ep-modal-eyebrow {
  color: var(--g-blue) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: -0.005em !important;
  font-size: 12.5px !important;
}
body.v4 .ep-modal-title {
  font-family: var(--g-fd) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  color: var(--g-ink-1) !important;
}
body.v4 .ep-modal-close {
  background: rgba(0, 0, 0, 0.05) !important;
  color: var(--g-ink-3) !important;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
body.v4 .ep-modal-close:hover {
  background: rgba(0, 0, 0, 0.10) !important;
  color: var(--g-ink-1) !important;
}
/* Left nav strip */
body.v4 .ep-modal-nav {
  background: rgba(0, 0, 0, 0.025) !important;
  border-right: 1px solid rgba(0, 0, 0, 0.05) !important;
  padding: 14px 10px !important;
}
body.v4 .ep-modal-navitem {
  color: var(--g-ink-2) !important;
  font-family: var(--g-fd) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: 10px;
  letter-spacing: -0.005em;
}
body.v4 .ep-modal-navitem:hover { background: rgba(0, 113, 227, 0.06) !important; }
/* Wave 53.2 - active nav: flat blue tint, blue text, blue icon (no raised white card) */
body.v4 .ep-modal-navitem.active {
  background: rgba(0, 113, 227, 0.10) !important;
  box-shadow: none !important;
  color: var(--g-blue) !important;
  font-weight: 600 !important;
}
/* Inactive icon - transparent, grey */
body.v4 .ep-modal-navicon {
  background: transparent !important;
  color: var(--g-ink-3) !important;
  border-radius: var(--r-sm);
  width: 22px !important;
  height: 22px !important;
}
/* Active icon - transparent (no box), blue glyph */
body.v4 .ep-modal-navitem.active .ep-modal-navicon {
  background: transparent !important;
  color: var(--g-blue) !important;
}
body.v4 .ep-modal-navitem.active .ep-modal-navicon svg,
body.v4 .ep-modal-navitem.active .ep-modal-navicon i { color: var(--g-blue) !important; }
/* Pane content */
body.v4 .ep-modal-pane {
  background: transparent !important;
  padding: 24px 28px !important;
}
body.v4 .ep-pane-eyebrow {
  color: var(--g-blue) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: -0.005em !important;
  font-size: 11.5px !important;
}
body.v4 .ep-pane-divider {
  border-top-color: rgba(0, 0, 0, 0.06) !important;
}
body.v4 .ep-field-label {
  color: var(--g-ink-4) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
body.v4 .ep-field-hint {
  color: var(--g-ink-4) !important;
  font-size: 11.5px !important;
}
/* Wave 53.2 - form inputs match screenshot: SOLID WHITE pill, full width,
   subtle hairline border, blue focus ring */
body.v4 .ep-modal .form-input,
body.v4 .ep-modal input[type="text"],
body.v4 .ep-modal input[type="date"],
body.v4 .ep-modal input[type="time"],
body.v4 .ep-modal input[type="number"],
body.v4 .ep-modal input[type="email"],
body.v4 .ep-modal input[type="url"],
body.v4 .ep-modal textarea,
body.v4 .ep-modal select {
  background: var(--g-surface) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: var(--r) !important;
  padding: 14px 18px !important;
  font-size: 14px !important;
  font-family: var(--g-fd) !important;
  color: var(--g-ink-1) !important;
  /* this modal's field bg flips with the theme (--g-surface), so its text-fill
     must flip too (specificity beats the global field-ink pin). */
  -webkit-text-fill-color: var(--g-ink-1);
  caret-color: var(--g-ink-1);
  width: 100% !important;
  transition: border-color 120ms ease, box-shadow 120ms ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}
body.v4 .ep-modal .form-input:focus,
body.v4 .ep-modal input:focus,
body.v4 .ep-modal textarea:focus,
body.v4 .ep-modal select:focus {
  outline: none;
  border-color: var(--g-blue) !important;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15) !important;
}
body.v4 .ep-modal .form-input::placeholder,
body.v4 .ep-modal input::placeholder,
body.v4 .ep-modal textarea::placeholder {
  color: var(--g-ink-4);
}
body.v4 .ep-modal textarea { min-height: 88px !important; resize: vertical !important; line-height: 1.5 !important; }
/* iOS toggle - Apple blue when checked (was cherry) */
body.v4 .ep-toggle-slider { background: rgba(0, 0, 0, 0.12) !important; }
body.v4 .ep-toggle input:checked + .ep-toggle-slider { background: var(--g-blue) !important; }
body.v4 .ep-toggle-label { color: var(--g-ink-1) !important; font-family: var(--g-fd); }
body.v4 .ep-toggle-sub { color: var(--g-ink-3) !important; }
/* Booking box inside popup */
body.v4 .ep-booking-box {
  background: rgba(255, 255, 255, 0.50) !important;
  backdrop-filter: blur(14px);
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-radius: var(--r) !important;
  padding: 16px !important;
}
/* Footer */
body.v4 .ep-modal-foot {
  background: rgba(0, 0, 0, 0.025) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
  padding: 16px 28px 20px !important;
}
/* Save / Cancel - Save becomes Apple blue, Cancel becomes glass */
body.v4 .ep-modal-save {
  background: var(--g-blue) !important;
  color: var(--on-accent) !important;
  border-radius: var(--r-pill) !important;
  font-family: var(--g-fd) !important;
  font-weight: 600 !important;
  padding: 12px 18px !important;
  font-size: 14px !important;
  border: none !important;
  letter-spacing: -0.005em;
}
body.v4 .ep-modal-save:hover { background: #0058b1 !important; }
body.v4 .ep-modal-cancel {
  background: rgba(255, 255, 255, 0.60) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: var(--g-ink-1) !important;
  border-radius: var(--r-pill) !important;
  font-family: var(--g-fd) !important;
  font-weight: 500 !important;
  padding: 12px 18px !important;
  font-size: 14px !important;
}
body.v4 .ep-modal-cancel:hover {
  background: rgba(255, 255, 255, 0.85) !important;
}
body.v4 .ep-modal-link {
  color: var(--g-ink-3) !important;
  font-size: 12px !important;
}
body.v4 .ep-modal-link:hover { color: var(--g-blue) !important; }
/* Footer row with primary/secondary side-by-side */
body.v4 .ep-modal-foot-row .btn-primary {
  background: var(--g-blue) !important;
  color: var(--on-accent) !important;
  border-radius: var(--r-pill) !important;
}
body.v4 .ep-modal-foot-row .btn-secondary {
  background: rgba(255, 255, 255, 0.60) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: var(--g-ink-1) !important;
}

/* ─── CHIEF OF STAFF · CEO tiles ──────────────────────────────
   Tiles on the Chief page that link to each director area. Reskin
   to glass cards with proper hover lift. */
body.v4 .ceo-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 1100px) { body.v4 .ceo-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { body.v4 .ceo-tiles { grid-template-columns: 1fr; } }
body.v4 .ceo-tile {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--g-border) !important;
  border-radius: var(--g-r-lg) !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
  cursor: pointer;
  text-align: left !important;
  box-shadow: var(--g-sh);
  transition: transform 120ms ease, box-shadow 120ms ease;
  min-height: 200px;
}
body.v4 .ceo-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 24px 56px rgba(0,0,0,0.10) !important;
}
body.v4 .ceo-tile-topbar { height: 3px; flex-shrink: 0; }
body.v4 .ceo-tile-icon {
  font-size: 22px;
  padding: 18px 20px 8px;
  display: inline-flex;
}
body.v4 .ceo-tile-title {
  font-family: var(--g-fd) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.012em !important;
  color: var(--g-ink-1) !important;
  padding: 0 20px;
}
body.v4 .ceo-tile-desc {
  font-size: 12.5px !important;
  color: var(--g-ink-3) !important;
  letter-spacing: -0.005em !important;
  padding: 6px 20px 12px;
  flex: 1;
  line-height: 1.45;
}
body.v4 .ceo-tile-stat {
  font-size: 11px !important;
  color: var(--g-ink-4) !important;
  padding: 0 20px 14px;
}
body.v4 .ceo-tile-foot {
  padding: 11px 20px !important;
  border-top: 1px solid var(--g-rule) !important;
  background: rgba(0, 0, 0, 0.018) !important;
}
body.v4 .ceo-tile-skel {
  background: rgba(255, 255, 255, 0.45) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: var(--g-r-lg) !important;
  height: 200px;
}

/* ─── Brain chips · prompts on dashboard / page tops ────────── */
body.v4 .brain-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body.v4 .brain-chip {
  background: rgba(255, 255, 255, 0.60) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--g-border) !important;
  border-radius: var(--g-r) !important;
  padding: 10px 14px !important;
  cursor: pointer;
  transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
body.v4 .brain-chip:hover {
  border-color: var(--g-blue) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
body.v4 .brain-chip-title {
  font-family: var(--g-fd);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--g-ink-1) !important;
  letter-spacing: -0.005em;
}
body.v4 .brain-chip-body {
  font-size: 12px;
  color: var(--g-ink-3) !important;
  margin-top: 2px;
  letter-spacing: -0.005em;
}

/* ─── EPISODE CENTRE TABS · same glass pill as .tabs ─────────
   .ep-tabs is the Episode Centre's tab strip (separate from .tabs
   used elsewhere). Must look identical. */
body.v4 .ep-tabs {
  display: inline-flex !important;
  flex-wrap: wrap;
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--g-border) !important;
  border-bottom: 1px solid var(--g-border) !important;
  border-radius: var(--r-pill) !important;
  padding: 4px !important;
  gap: 2px !important;
  margin-bottom: 16px !important;
  overflow: visible !important;
  align-items: center !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
body.v4 .ep-tab {
  padding: 7px 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  font-family: var(--g-fd) !important;
  color: var(--g-ink-3) !important;
  border: none !important;
  border-bottom: none !important;
  background: transparent !important;
  border-radius: var(--r-pill) !important;
  letter-spacing: -0.005em !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 !important;
  transition: color 120ms ease, background 120ms ease;
  white-space: nowrap;
}
body.v4 .ep-tab:hover {
  color: var(--g-ink-1) !important;
  background: rgba(0, 0, 0, 0.03) !important;
}
body.v4 .ep-tab.active,
body.v4 .ep-tab.on {
  background: var(--g-ink-1) !important;
  color: var(--on-accent) !important;
  font-weight: 600 !important;
  border-bottom: none !important;
}
body.v4 .ep-tab-badge {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  background: rgba(0, 0, 0, 0.07) !important;
  color: var(--g-ink-2) !important;
  border-radius: var(--r-pill) !important;
  font-variant-numeric: tabular-nums;
  margin-left: 2px;
}
body.v4 .ep-tab.active .ep-tab-badge,
body.v4 .ep-tab.on .ep-tab-badge {
  background: rgba(255, 255, 255, 0.20) !important;
  color: var(--on-accent) !important;
}
body.v4 .ep-tabs-spacer { flex: 1; }

/* ─── EPISODE STATUS PILLS - softer glass-tinted, not solid cherry ── */
body.v4 .ep-pill {
  border-radius: var(--r-pill) !important;
  padding: 3px 10px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--g-ink-2) !important;
  background: rgba(0, 0, 0, 0.06) !important;
  border: none !important;
}
body.v4 .ep-pill.hot       { background: var(--g-lilac-bg) !important;  color: var(--g-lilac) !important; }
body.v4 .ep-pill.booked    { background: var(--g-cherry-bg) !important; color: var(--g-cherry) !important; }
body.v4 .ep-pill.recorded  { background: var(--g-butter-bg) !important; color: var(--g-butter) !important; }
body.v4 .ep-pill.edit      { background: var(--g-blue-bg) !important;   color: var(--g-blue) !important; }
body.v4 .ep-pill.scheduled { background: var(--g-green-bg) !important;  color: var(--g-green) !important; }
body.v4 .ep-pill.pub       { background: rgba(0,0,0,0.06) !important;   color: var(--g-ink-3) !important; }

/* ─── INTEL chips + action cards ──────────────────────────── */
body.v4 .intel-action {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-border) !important;
  border-radius: var(--g-r) !important;
  padding: 14px 16px !important;
}
body.v4 .intel-action.priority {
  background: rgba(184, 0, 43, 0.06) !important;
  border-color: rgba(184, 0, 43, 0.22) !important;
}
body.v4 .intel-cal-chip {
  background: rgba(0, 113, 227, 0.12) !important;
  color: var(--g-blue) !important;
  border-radius: 6px !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  padding: 3px 7px !important;
  border: none !important;
}
body.v4 .intel-cal-chip.priority {
  background: rgba(184, 0, 43, 0.13) !important;
  color: var(--g-cherry) !important;
}
body.v4 .finding-toggle,
body.v4 .finding-status {
  border-radius: var(--r-pill) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  padding: 3px 10px !important;
  border: none !important;
}
body.v4 .finding-status.needs-info {
  background: var(--g-cherry-bg) !important;
  color: var(--g-cherry) !important;
}

/* ─── EC brief / feedback chips - tinted glass pills ──────── */
body.v4 .ec-brief-chip,
body.v4 .ec-feedback-chip {
  background: rgba(255, 255, 255, 0.65) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: var(--r-pill) !important;
  padding: 4px 11px !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: var(--g-ink-2) !important;
  font-family: var(--g-fd) !important;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease;
}
body.v4 .ec-brief-chip:hover,
body.v4 .ec-feedback-chip:hover {
  border-color: var(--g-blue) !important;
  color: var(--g-blue) !important;
}

/* ─── Checklist file pill - glass tile ────────────────────── */
body.v4 .ck-file-pill {
  background: rgba(255, 255, 255, 0.78) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-radius: var(--r-pill) !important;
  padding: 4px 10px !important;
  font-size: 11.5px !important;
  color: var(--g-ink-2) !important;
}
body.v4 .ck-file-pill-name { color: var(--g-blue) !important; font-weight: 500; }
body.v4 .ck-file-pill-x {
  color: var(--g-ink-4) !important;
  background: transparent !important;
}
body.v4 .ck-file-pill-x:hover { color: var(--g-cherry) !important; }

/* ─── Chat persona pill switcher ──────────────────────────── */
body.v4 .chat-tabs {
  display: inline-flex !important;
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--g-border) !important;
  border-radius: var(--r-pill) !important;
  padding: 4px !important;
  gap: 2px !important;
}
body.v4 .chat-pill {
  background: transparent !important;
  border: none !important;
  color: var(--g-ink-3) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  padding: 6px 12px !important;
  border-radius: var(--r-pill) !important;
  letter-spacing: -0.005em !important;
  font-family: var(--g-fd) !important;
}
body.v4 .chat-pill:hover { color: var(--g-ink-1) !important; }
body.v4 .chat-pill.active,
body.v4 .chat-pill.on {
  background: var(--g-ink-1) !important;
  color: var(--on-accent) !important;
  font-weight: 600 !important;
}

/* ─── WB card pill (work block status) ────────────────────── */
body.v4 .wb-card-pill {
  background: rgba(0, 0, 0, 0.06) !important;
  color: var(--g-ink-2) !important;
  border-radius: var(--r-pill) !important;
  padding: 2px 9px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  border: none !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ─── TABS · glass pill strip, solid-black active ────────────
   Replaces v4.css cherry-underline tabs. Applies wherever
   .tabs / .tab are emitted (Pipeline page, Episode Centre,
   Intel, Show Builder, Settings, etc.) */
body.v4 .tabs {
  display: inline-flex !important;
  flex-wrap: nowrap;            /* never wrap to a 2nd line - scroll instead */
  max-width: 100%;
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--g-border) !important;
  border-bottom: 1px solid var(--g-border) !important;
  border-radius: var(--r-pill) !important;
  padding: 4px !important;
  gap: 2px !important;
  margin-bottom: 16px !important;
  overflow-x: auto !important;  /* horizontal scroll when too narrow */
  overflow-y: visible !important;
  scrollbar-width: none;        /* tidy: hide the scrollbar, keep the scroll */
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
body.v4 .tabs::-webkit-scrollbar { display: none; }
body.v4 .tabs > .tab, body.v4 .tabs > button { flex: 0 0 auto; white-space: nowrap; }
/* Burger collapse (Bug7) - when JS adds .tabs-burger, the .tab items live in
   .tabs-pop and only show as a dropdown when menu-open. The trigger is a
   dark-blue pill (≡  current tab + count  ▾) modelled on the profile pill, so
   it's obviously a control. The row keeps the pill + any right-aligned action
   button. The dropdown drops below the pill, over the board. */
body.v4 .tabs[data-burger="1"] { position: relative; overflow: visible !important; }
/* When the menu is open, lift the whole bar above sibling page content
   (glass panels create stacking contexts) so the dropdown isn't hidden behind it. */
body.v4 .tabs.menu-open { z-index: 1200; }
body.v4 .tabs-burger {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
  height: 36px; padding: 0 12px 0 11px; border: none; cursor: pointer;
  border-radius: var(--r-pill); font-family: inherit; font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,.96); background: var(--black);
  box-shadow: 0 1px 2px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.16);
}
body.v4 .tabs-burger:hover { filter: brightness(1.06); }
body.v4 .tabs-burger:active { transform: translateY(.5px); }
body.v4 .tabs-burger-ico { width: 16px; height: 16px; display: block; flex: 0 0 auto; opacity: .95; }
body.v4 .tabs-burger-label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; max-width: 220px; overflow: hidden; }
/* count badges inside the cloned tab label sit on a translucent chip */
body.v4 .tabs-burger-label .badge,
body.v4 .tabs-burger-label .tab-count,
body.v4 .tabs-burger-label .pill { background: rgba(255,255,255,.22); color: rgba(255,255,255,.96); }
body.v4 .tabs-burger-chev { width: 14px; height: 14px; display: block; flex: 0 0 auto; opacity: .9; transition: transform 160ms ease; }
body.v4 .tabs.menu-open .tabs-burger-chev { transform: rotate(180deg); }
body.v4 .tabs-pop { display: none; }
body.v4 .tabs.menu-open .tabs-pop { display: flex; flex-direction: column; gap: 3px; position: absolute; top: calc(100% + 6px); left: 0; z-index: 1201; min-width: 210px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--sh-2); }
body.v4 .tabs.menu-open .tabs-pop > .tab { white-space: nowrap; width: 100%; box-sizing: border-box; }
body.v4 .tab {
  padding: 7px 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  font-family: var(--g-fd) !important;
  color: var(--g-ink-3) !important;
  border: none !important;
  border-bottom: none !important;
  background: transparent !important;
  border-radius: var(--r-pill) !important;
  letter-spacing: -0.005em !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 !important;
  transition: color 120ms ease, background 120ms ease;
  white-space: nowrap;
}
body.v4 .tab:hover {
  color: var(--g-ink-1) !important;
  background: rgba(0, 0, 0, 0.03) !important;
}
body.v4 .tab.on {
  background: var(--black) !important;
  color: var(--on-accent) !important;
  font-weight: 600 !important;
  border-bottom: none !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.14);
}
body.v4 .tab .count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  background: rgba(0, 0, 0, 0.07) !important;
  color: var(--g-ink-2) !important;
  border-radius: var(--r-pill) !important;
  font-variant-numeric: tabular-nums;
}
body.v4 .tab.on .count {
  background: rgba(255, 255, 255, 0.20) !important;
  color: var(--on-accent) !important;
}

/* ─── PIPELINE KANBAN · glass columns (matches APPLE_GLASS_FLOATING mockup) ──
   Pipeline uses .kb-col / .kb-head / .kb-card / .kb-col-add. v4.css gives
   them solid white + heavy borders. These rules reskin them to translucent
   glass with gradient column counts and subtle on-state. */
body.v4 .kanban {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px !important;
}
body.v4 .kb-col {
  background: rgba(255, 255, 255, 0.48) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 12px 32px rgba(0,0,0,0.05);
  padding: 12px !important;
  min-height: 260px;
}
body.v4 .kb-col.drag-over {
  border: 1px solid var(--g-blue) !important;
  background: rgba(232, 241, 252, 0.55) !important;
}
/* Wave 53.1/55 - kanban head: count BLUE first, label uppercase grey after.
   No stage dot. NO bottom rule (per latest screenshot). */
body.v4 .kb-head {
  display: flex !important;
  align-items: baseline !important;
  gap: 9px !important;
  padding: 14px 14px 12px !important;
  /* Batch 5 - breathing room between the column header box and the first card */
  margin: 0 0 10px !important;
  border-bottom: none !important;
  background: transparent !important;
}
body.v4 .kb-head .stage-dot { display: none !important; }
body.v4 .kb-head .n {
  font-family: var(--g-fd) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  color: var(--g-blue) !important;
  background: none !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  line-height: 1 !important;
  margin: 0 !important;
  order: 0 !important;
}
body.v4 .kb-head .kb-head-lbl,
body.v4 .kb-head > span:not(.n):not(.stage-dot) {
  font-family: var(--g-fd) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--g-ink-3) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  order: 1 !important;
}
/* Cards - Wave 55: clean white tiles, bold name + grey sub, hover lift only */
body.v4 .kb-card {
  background: var(--g-surface) !important;
  backdrop-filter: none !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  border-radius: 10px !important;
  padding: 13px 14px !important;
  margin-bottom: 6px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  cursor: grab;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, background 120ms ease;
}
body.v4 .kb-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
/* Open-card state - episode popup currently showing this episode */
body.v4 .kb-card.is-open {
  background: rgba(0, 113, 227, 0.08) !important;
  border-color: var(--g-blue) !important;
  box-shadow: 0 0 0 1px var(--g-blue) !important;
}
body.v4 .kb-card.is-open .kb-card-title,
body.v4 .kb-card.is-open .kb-card-sub { color: var(--g-blue) !important; }
/* Column-with-open-card state */
body.v4 .kb-col:has(.kb-card.is-open) {
  border-color: var(--g-blue) !important;
  box-shadow: 0 0 0 1px var(--g-blue), 0 12px 32px rgba(0, 113, 227, 0.10) !important;
}
body.v4 .kb-card-title {
  font-family: var(--g-fd);
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--g-ink-1) !important;
  letter-spacing: -0.005em;
  line-height: 1.25;
}
body.v4 .kb-card-sub {
  font-size: 11.5px !important;
  color: var(--g-ink-3) !important;
  margin-top: 3px;
  letter-spacing: -0.005em;
}

/* "+ N more" overflow row */
body.v4 .kb-more {
  background: var(--g-surface) !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  border-radius: 10px !important;
  padding: 11px 14px !important;
  margin-bottom: 6px !important;
  cursor: pointer;
  font-family: var(--g-fd);
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--g-ink-1) !important;
  letter-spacing: -0.005em;
  text-align: left;
  transition: background 120ms ease, border-color 120ms ease;
}
body.v4 .kb-more:hover {
  background: rgba(0, 113, 227, 0.04) !important;
  border-color: var(--g-blue) !important;
  color: var(--g-blue) !important;
}

/* Wave 121 - Trello-style expanded column. When the user clicks "+N more",
   the cards-area takes a max-height and scrolls internally so a 50-card
   column doesn't blow up the layout. Other columns stay at their normal
   height alongside it. */
body.v4 .kb-drop-expanded {
  max-height: 70vh;
  overflow-y: auto;
  padding-right: 4px;     /* room for scrollbar so cards don't get clipped */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.20) transparent;
}
body.v4 .kb-drop-expanded::-webkit-scrollbar {
  width: 8px;
}
body.v4 .kb-drop-expanded::-webkit-scrollbar-track {
  background: transparent;
}
body.v4 .kb-drop-expanded::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: var(--r-pill);
}
body.v4 .kb-drop-expanded::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.30);
}
/* "Show less" link styling - slightly muted vs "+ N more" so it reads
   as a secondary action. */
body.v4 .kb-more.kb-less {
  background: transparent !important;
  border: 1px dashed rgba(0, 0, 0, 0.10) !important;
  color: var(--g-ink-3) !important;
  font-weight: 600 !important;
  text-align: center;
}
body.v4 .kb-more.kb-less:hover {
  background: rgba(0, 113, 227, 0.04) !important;
  border-style: solid !important;
  border-color: var(--g-blue) !important;
  color: var(--g-blue) !important;
}

/* Tab icons (Wave 55) */
body.v4 .tab .tab-ic {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0;
  color: currentColor;
  margin-right: 2px;
}
body.v4 .tab.on .tab-ic { color: var(--on-accent) !important; }
body.v4 .tab .tab-lbl { display: inline; }
body.v4 .kb-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
body.v4 .kb-card-progress {
  height: 3px !important;
  background: rgba(0, 0, 0, 0.05) !important;
  border-radius: var(--r-pill);
  overflow: hidden;
  margin-top: 8px;
}
body.v4 .kb-card-progress .fill {
  background: var(--g-blue) !important;
  height: 100% !important;
  border-radius: var(--r-pill);
}
body.v4 .kb-card-progress .fill.full { background: var(--g-green) !important; }
body.v4 .kb-card-mini-pill {
  font-size: 9.5px !important;
  font-weight: 600 !important;
  padding: 2px 7px !important;
  border-radius: var(--r-pill) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--on-accent) !important;
}
body.v4 .kb-card-mini-pill.solid-lilac { background: var(--g-lilac) !important; }
body.v4 .kb-card-mini-pill.solid-mint  { background: var(--g-green) !important; }
body.v4 .kb-card-mini-pill.solid-peach { background: var(--g-orange) !important; }
/* + add row */
body.v4 .kb-col-add {
  margin-top: 6px !important;
  padding: 9px 10px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--g-ink-3) !important;
  background: transparent !important;
  border: 1px dashed rgba(0, 0, 0, 0.12) !important;
  border-radius: var(--r-sm) !important;
  text-align: center;
  cursor: pointer;
  letter-spacing: -0.005em;
}
body.v4 .kb-col-add:hover {
  border-color: var(--g-blue) !important;
  color: var(--g-blue) !important;
  background: rgba(0, 113, 227, 0.04) !important;
}
/* Published column is more compact */
body.v4 .kb-col.pub .kb-card { padding: 7px 11px !important; }
body.v4 .kb-col.pub .kb-card-title { font-size: 11.5px !important; }
/* Empty state inside a column */
body.v4 .kb-col .empty-state {
  background: transparent !important;
  border: 1px dashed rgba(0, 0, 0, 0.08) !important;
  color: var(--g-ink-4) !important;
  text-align: center;
  border-radius: var(--r-sm);
  font-size: 11px !important;
}
/* Old .kanban-col / .kcol catch-all (keep glass for any other kanbans) */
body.v4 .kanban-col,
body.v4 .kanban .col,
body.v4 .kcol {
  background: rgba(255, 255, 255, 0.48) !important;
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-border-soft) !important;
  border-radius: var(--r-lg);
}
body.v4 .kanban-card,
body.v4 .kanban .card,
body.v4 .kcard {
  background: rgba(255, 255, 255, 0.78) !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  border-radius: 10px;
}
/* Mobile: 3-col → 2-col → 1-col */
@media (max-width: 1100px) {
  body.v4 .kanban { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  body.v4 .kanban { grid-template-columns: 1fr; }
}

/* ─── EPISODE CENTRE · stage progress bar ─────────────────── */
body.v4 .ec-stage-bar {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-border) !important;
  border-radius: var(--r-pill);
  box-shadow: var(--g-sh);
  padding: 10px 18px;
}
body.v4 .ec-stage-node--current .ec-stage-dot {
  background: var(--g-blue);
  box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.18);
}
body.v4 .ec-stage-node--reached .ec-stage-dot {
  background: var(--g-green);
}
body.v4 .ec-stage-node--current .ec-stage-label {
  color: var(--g-blue);
  font-weight: 600;
}
body.v4 .ec-stage-rule--current {
  background: linear-gradient(90deg, var(--g-green), var(--g-blue));
}

/* ─── EPISODE CENTRE · stage head row ─────────────────────── */
body.v4 .ep-stage-head .meta-left .eye {
  color: var(--g-blue) !important;
  font-weight: 500 !important;
  font-size: 12.5px !important;
  text-transform: none;
  letter-spacing: -0.005em;
}
body.v4 .ep-stage-head .meta-left .title {
  font-family: var(--g-fd);
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em;
  color: var(--g-ink-1) !important;
}
body.v4 .ep-stage-head .progress-meta strong {
  font-family: var(--g-fd);
  background: var(--g-grad-b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
}

/* ─── EPISODE CENTRE · pane card (side rail) ──────────────── */
body.v4 .ec-pane-card {
  padding: 16px 18px;
}
body.v4 .ec-pane-icon {
  background: var(--g-lilac-bg);
  color: var(--g-lilac);
  border-radius: var(--r-sm);
}
body.v4 .ec-glance-card {
  padding: 14px 16px;
}
body.v4 .ec-glance-icon {
  border-radius: 7px;
}
body.v4 .ec-glance-icon--lilac { background: var(--g-lilac-bg); color: var(--g-lilac); }
body.v4 .ec-glance-icon--mint  { background: var(--g-green-bg);  color: var(--g-green); }
body.v4 .ec-glance-icon--peach,
body.v4 .ec-glance-icon--orange { background: var(--g-orange-bg); color: var(--g-orange); }
body.v4 .ec-glance-icon--sky    { background: var(--g-blue-bg);   color: var(--g-blue); }
body.v4 .ec-glance-icon--cherry { background: var(--g-cherry-bg); color: var(--g-cherry); }
body.v4 .ec-glance-icon--butter { background: var(--g-butter-bg); color: var(--g-butter); }

/* ─── EPISODE CENTRE · BLUE CARD (show prep) ──────────────── */
body.v4 .ec-bluecard { padding: 22px 24px; }
body.v4 .ec-bluecard-head-icon {
  background: var(--g-lilac-bg);
  color: var(--g-lilac);
  border-radius: var(--r-sm);
}
body.v4 .ec-bluecard-head-title {
  font-family: var(--g-fd);
  letter-spacing: -0.015em;
  color: var(--g-ink-1);
}
body.v4 .ec-bluecard-opener {
  background: rgba(29, 29, 31, 0.85) !important;
  border-radius: var(--g-r-sm);
  padding: 20px 22px;
  color: var(--on-accent);
}
body.v4 .ec-bluecard-opener-eye {
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.06em;
}
body.v4 .ec-bluecard-opener-q {
  font-family: var(--g-fd);
  letter-spacing: -0.015em;
  color: var(--on-accent);
}
body.v4 .ec-bluecard-opener ul,
body.v4 .ec-bluecard-opener li {
  color: rgba(255, 255, 255, 0.85);
}
body.v4 .ec-bluecard-act {
  border-left: 3px solid rgba(0, 0, 0, 0.1);
  padding-left: 18px;
}
body.v4 .ec-bluecard-act-eye {
  color: var(--g-ink-4);
}
body.v4 .ec-bluecard-act-title {
  font-family: var(--g-fd);
  color: var(--g-ink-1);
}
body.v4 .ec-bluecard-block-label {
  color: var(--g-ink-4);
}
body.v4 .ec-bluecard-big-q {
  color: var(--g-ink-1);
}
body.v4 .ec-bluecard-tough {
  background: rgba(255, 255, 255, 0.45);
  border-radius: 10px;
  padding: 10px 14px;
}

/* ─── Wave 118 · SHOW PREP VIEWER ───────────────────────────
   Read-only viewer for the Blue Card. Three header actions (PDF · Edit ·
   ×). When the user submits feedback, body swaps to a pulsing skeleton
   ("AI is rewriting…") until the API returns. */
body.v4 .sp-viewer-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}
body.v4 .sp-viewer-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
body.v4 .sp-viewer-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12.5px;
  text-decoration: none;
}
body.v4 .sp-viewer-btn i { width: 14px; height: 14px; }
body.v4 .sp-viewer-body { padding: 22px 26px; max-height: 70vh; overflow-y: auto; }

/* Working / pulsing state */
body.v4 .sp-working {
  padding: 36px 28px 28px;
  text-align: center;
}
body.v4 .sp-working-orb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 16px;
}
body.v4 .sp-working-orb span {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--g-blue);
  opacity: 0.35;
  animation: spWorkingOrb 1.1s ease-in-out infinite;
}
body.v4 .sp-working-orb span:nth-child(2) { animation-delay: 0.15s; }
body.v4 .sp-working-orb span:nth-child(3) { animation-delay: 0.30s; }
@keyframes spWorkingOrb {
  0%, 100% { transform: scale(0.8); opacity: 0.35; }
  50%      { transform: scale(1.15); opacity: 1; }
}
body.v4 .sp-working-h {
  font-family: var(--g-fd);
  font-size: 16px;
  font-weight: 600;
  color: var(--g-ink-1);
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
body.v4 .sp-working-s {
  font-size: 12.5px;
  color: var(--g-ink-3);
  max-width: 440px;
  margin: 0 auto 22px;
  line-height: 1.5;
}
body.v4 .sp-working-skel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
}
body.v4 .sp-working-skel .sp-skel,
body.v4 .sp-skel {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(0,0,0,0.06), rgba(0,113,227,0.12), rgba(0,0,0,0.06));
  background-size: 200% 100%;
  animation: spSkelShimmer 1.6s linear infinite;
}
@keyframes spSkelShimmer {
  0%   { background-position: 0% 0%; }
  100% { background-position: -200% 0%; }
}

/* ─── Wave 117 · AI ARTEFACTS RAIL ─────────────────────────
   Uniform right-rail across every stage. Eyebrow + stack of clickable
   panels. Each panel opens its artifact in a modal. */
body.v4 .ec-artefacts {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-border);
  border-radius: var(--g-r-lg);
  padding: 14px 14px 12px;
  box-shadow: var(--g-sh);
}
body.v4 .ec-artefacts-eye {
  font-family: var(--g-fd);
  font-size: 11px;
  font-weight: 600;
  color: var(--g-blue);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 4px 10px;
}
body.v4 .ec-artefacts-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.v4 .ec-artefact-panel {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: background 160ms var(--g-ease), border-color 160ms var(--g-ease), transform 160ms var(--g-ease);
}
body.v4 .ec-artefact-panel.is-clickable { cursor: pointer; }
body.v4 .ec-artefact-panel.is-clickable:hover {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(0, 113, 227, 0.20);
}
body.v4 .ec-artefact-panel.is-clickable:active { transform: scale(0.99); }
body.v4 .ec-artefact-panel.is-muted {
  opacity: 0.7;
  cursor: default;
}
body.v4 .ec-artefact-icon {
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  background: var(--g-blue-bg);
  color: var(--g-blue);
}
body.v4 .ec-artefact-icon i {
  width: 16px; height: 16px;
}
body.v4 .ec-artefact-panel.is-muted .ec-artefact-icon {
  background: rgba(0, 0, 0, 0.05);
  color: var(--g-ink-4);
}
body.v4 .ec-artefact-text { min-width: 0; }
body.v4 .ec-artefact-label {
  font-family: var(--g-fd);
  font-size: 13px;
  font-weight: 600;
  color: var(--g-ink-1);
  letter-spacing: -0.005em;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.v4 .ec-artefact-sub {
  font-size: 11.5px;
  color: var(--g-ink-4);
  margin-top: 2px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.v4 .ec-artefact-chev {
  color: var(--g-ink-4);
  display: grid;
  place-items: center;
  transition: transform 160ms var(--g-ease);
}
body.v4 .ec-artefact-chev i { width: 14px; height: 14px; }
body.v4 .ec-artefact-panel.is-clickable:hover .ec-artefact-chev {
  transform: translateX(2px);
  color: var(--g-blue);
}

/* Wave 120 - action buttons on each panel (Generate / Regenerate) */
body.v4 .ec-artefact-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
body.v4 .ec-artefact-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  font-family: var(--g-fd);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--r-pill);
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(255, 255, 255, 0.75);
  color: var(--g-ink-2);
  cursor: pointer;
  transition: background 140ms var(--g-ease), border-color 140ms var(--g-ease), color 140ms var(--g-ease);
}
body.v4 .ec-artefact-action i { width: 12px; height: 12px; }
body.v4 .ec-artefact-action:hover {
  background: var(--g-blue-bg);
  border-color: rgba(0, 113, 227, 0.25);
  color: var(--g-blue);
}
body.v4 .ec-artefact-action--generate {
  background: var(--g-blue);
  border-color: var(--g-blue);
  color: var(--on-accent);
}
body.v4 .ec-artefact-action--generate:hover {
  background: var(--g-blue-2);
  border-color: var(--g-blue-2);
  color: var(--on-accent);
}
body.v4 .ec-artefact-action--regenerate {
  background: rgba(255, 255, 255, 0.55);
  color: var(--g-ink-3);
}
body.v4 .ec-artefact-action--regenerate:hover {
  background: var(--g-blue-bg);
  border-color: rgba(0, 113, 227, 0.25);
  color: var(--g-blue);
}

/* Running state - icon pulse so the user sees AI activity in the rail. */
body.v4 .ec-artefact-panel.is-running {
  background: rgba(0, 113, 227, 0.06);
}
body.v4 .ec-artefact-icon.is-pulsing {
  animation: ecArtefactPulse 1.2s ease-in-out infinite;
}
@keyframes ecArtefactPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 113, 227, 0); }
  50%      { box-shadow: 0 0 0 6px rgba(0, 113, 227, 0.18); }
}

/* Empty-state block - same surface as a panel but no hover, with a
   centred icon + two lines of copy nudging the user to generate. */
body.v4 .ec-artefacts-empty {
  text-align: center;
  padding: 22px 14px 18px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.35);
  border: 1px dashed rgba(0, 0, 0, 0.08);
}
body.v4 .ec-artefacts-empty i {
  width: 22px; height: 22px;
  color: var(--g-ink-4);
  opacity: 0.55;
  margin-bottom: 8px;
}
body.v4 .ec-artefacts-empty-h {
  font-family: var(--g-fd);
  font-size: 13px;
  font-weight: 600;
  color: var(--g-ink-2);
  letter-spacing: -0.005em;
}
body.v4 .ec-artefacts-empty-s {
  font-size: 11.5px;
  color: var(--g-ink-4);
  margin-top: 4px;
  line-height: 1.4;
}

/* ─── AI ACCORDION (In Edit + Scheduled) ──────────────────── */
body.v4 .ec-ai-accordion {
  padding: 0;
  overflow: hidden;
}
body.v4 .ec-ai-accordion-head {
  background: rgba(0, 0, 0, 0.025) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  padding: 12px 18px;
}
body.v4 .ec-ai-accordion-list { padding: 0; }
body.v4 .ec-ai-row {
  background: transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
body.v4 .ec-ai-row:last-child { border-bottom: none; }
body.v4 .ec-ai-row[open] {
  background: rgba(0, 113, 227, 0.08);
}
body.v4 .ec-ai-row.is-done .ec-ai-row-icon,
body.v4 .ec-ai-row.is-running .ec-ai-row-icon {
  background: var(--g-blue-bg);
  color: var(--g-blue);
}
body.v4 .ec-ai-row-icon {
  background: rgba(255, 255, 255, 0.55);
  color: var(--g-ink-3);
  border-radius: 7px;
}
body.v4 .ec-ai-row-label {
  font-family: var(--g-fd);
  color: var(--g-ink-1);
}
body.v4 .ec-ai-row-pulse {
  background: var(--g-blue);
}

/* ─── DOSSIER ─────────────────────────────────────────────── */
body.v4 .ec-dossier-card { padding: 16px 18px; }
body.v4 .ec-dossier-basic {
  background: rgba(255, 255, 255, 0.45) !important;
  border-radius: 10px;
  padding: 10px 12px;
}
body.v4 .ec-dossier-section {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
body.v4 .ec-dossier-summary-count {
  background: rgba(255, 255, 255, 0.55);
  color: var(--g-ink-3);
  border: 1px solid rgba(0, 0, 0, 0.04);
}

/* Wave 116 - open dossier sections breathe a bit more, and BOOK rows
   get spacious padding + an Amazon search link beneath each entry.    */
body.v4 .ec-dossier-section[open] .ec-dossier-section-body {
  padding: 6px 4px 12px;
}
body.v4 .ec-dossier-book {
  display: block;
  padding: 14px 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
body.v4 .ec-dossier-book:last-child { border-bottom: none; }
body.v4 .ec-dossier-book-title-link {
  display: block;
  text-decoration: none;
}
body.v4 .ec-dossier-book-title-link:hover .ec-dossier-item-title { color: var(--cherry); }
body.v4 .ec-dossier-book .ec-dossier-item-sub {
  margin-top: 6px;
  line-height: 1.5;
  color: var(--g-ink-3);
}
body.v4 .ec-dossier-book-amazon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 5px 12px;
  background: rgba(255, 153, 0, 0.10);
  border: 1px solid rgba(255, 153, 0, 0.25);
  border-radius: var(--r-pill);
  font-family: var(--g-fd);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #b86e00;
  text-decoration: none;
  transition: background 160ms var(--g-ease), border-color 160ms var(--g-ease);
}
body.v4 .ec-dossier-book-amazon:hover {
  background: rgba(255, 153, 0, 0.18);
  border-color: rgba(255, 153, 0, 0.45);
}
body.v4 .ec-dossier-book-amazon i {
  width: 13px; height: 13px;
}
body.v4 .ec-dossier-book-amazon i[data-lucide="external-link"] {
  width: 11px; height: 11px;
  opacity: 0.7;
}

/* ─── CHECKLIST · glass body ──────────────────────────────── */
body.v4 .ck-wrap { padding: 16px 20px; }
body.v4 .ck-head .lbl { color: var(--g-ink-4); font-weight: 600; }
body.v4 .ck-head-pct {
  font-family: var(--g-fd);
  background: var(--g-grad-b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
  letter-spacing: -0.018em;
}
body.v4 .ck-bar {
  background: rgba(0, 0, 0, 0.06);
  height: 3px;
}
body.v4 .ck-bar > div {
  background: var(--g-grad-b);
}
body.v4 .ck-row {
  background: transparent;
}
body.v4 .ck-row + .ck-row { border-top: 1px solid rgba(0, 0, 0, 0.05); }
body.v4 .ck-check {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(0, 0, 0, 0.2);
}
body.v4 .ck-check.on {
  background: var(--g-blue);
  border-color: var(--g-blue);
}
body.v4 .ck-label { color: var(--g-ink-1); }
body.v4 .ck-row.is-done .ck-label,
body.v4 .ck-row.done .ck-label { color: var(--g-ink-4); }

/* upload pill */
body.v4 .ck-file-pill {
  background: var(--g-green-bg);
  border: 1px solid rgba(47, 133, 90, 0.18);
  color: var(--g-green);
}

/* ─── SEGMENTED TAB STRIPS ────────────────────────────────── */
body.v4 .tabs,
body.v4 .ep-tabs,
body.v4 .pipeline-tabs,
body.v4 .seg {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-border);
  padding: 4px;
  border-radius: var(--r-pill);
  display: inline-flex;
  gap: 0;
}
body.v4 .ep-tab,
body.v4 .pipeline-tab,
body.v4 .seg button {
  background: transparent;
  border: none;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--g-ink-3);
  border-radius: var(--r-pill);
  cursor: pointer;
  font-family: inherit;
  letter-spacing: -0.005em;
}
body.v4 .ep-tab.on,
body.v4 .ep-tab.active,
body.v4 .pipeline-tab.on,
body.v4 .pipeline-tab.active,
body.v4 .seg button.on {
  background: var(--black);
  color: var(--on-accent);
  box-shadow: 0 1px 3px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.14);
}

/* ─── TABLES (data-table / tbl / ep-list) ─────────────────── */
body.v4 .data-table,
body.v4 .tbl {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-border);
  border-radius: var(--g-r-lg);
  overflow: hidden;
  width: 100%;
  border-collapse: collapse;
}
body.v4 .data-table th,
body.v4 .tbl th {
  background: rgba(0, 0, 0, 0.03);
  color: var(--g-ink-4);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10.5px;
  padding: 11px 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
body.v4 .data-table td,
body.v4 .tbl td {
  padding: 12px 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  color: var(--g-ink-2);
  font-size: 13px;
}
body.v4 .data-table tr:hover td,
body.v4 .tbl tr:hover td { background: rgba(255, 255, 255, 0.35); }
body.v4 .data-table tr:last-child td,
body.v4 .tbl tr:last-child td { border-bottom: none; }

/* ─── ep-list rows ────────────────────────────────────────── */
body.v4 .ep-list,
body.v4 .ep-row {
  background: transparent;
}
body.v4 .ep-row + .ep-row { border-top: 1px solid rgba(0, 0, 0, 0.04); }
body.v4 .ep-pill {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.04);
}
body.v4 .ep-pill.booked    { background: var(--g-orange-bg);  color: var(--g-orange);  border-color: transparent; }
body.v4 .ep-pill.recorded  { background: var(--g-blue-bg);    color: var(--g-blue);    border-color: transparent; }
body.v4 .ep-pill.edit      { background: var(--g-blue-bg);    color: var(--g-blue);    border-color: transparent; }
body.v4 .ep-pill.scheduled { background: var(--g-green-bg);   color: var(--g-green);   border-color: transparent; }
body.v4 .ep-pill.pub       { background: rgba(0, 0, 0, 0.05); color: var(--g-ink-3); }

/* avatar - base only. Tone classes are defined ONCE at line ~1694
   (Wave 70 fix B1: deleted the duplicate tone block here that was
   overriding chat persona colours with the wrong values). */
body.v4 .av {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.04);
  color: var(--on-accent);
}

/* feed rows / wins */
body.v4 .feed-row { padding: 8px 0; }
body.v4 .feed-icon {
  background: rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  width: 22px; height: 22px;
  display: grid; place-items: center;
}
body.v4 .feed-icon.win { background: var(--g-green-bg); color: var(--g-green); }

/* presence dots */
body.v4 .pulse-dot.online  { background: var(--g-green); }
body.v4 .pulse-dot.offline { background: rgba(0, 0, 0, 0.2); }
body.v4 .presence-label.online  { color: var(--g-green); }
body.v4 .presence-label.offline { color: var(--g-ink-4); }

/* ─── SHOW PREP card · keep specifics light + glass ──────── */
body.v4 .sp-card {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: var(--g-blur) !important;
  -webkit-backdrop-filter: var(--g-blur) !important;
  border: 1px solid var(--g-border) !important;
}
body.v4 .sp-opener {
  background: rgba(29, 29, 31, 0.85) !important;
  color: var(--on-accent) !important;
  border-radius: var(--r);
  padding: 18px 22px;
}
body.v4 .sp-opener-eyebrow { color: rgba(255, 255, 255, 0.65); }
body.v4 .sp-opener-text { color: var(--on-accent); font-family: var(--g-fd); }
body.v4 .sp-opener-followups li { color: rgba(255, 255, 255, 0.85); }
body.v4 .sp-act {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: var(--r);
}
body.v4 .sp-tough {
  background: rgba(255, 255, 255, 0.55);
  border-radius: 10px;
}
body.v4 .sp-feedback-input {
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid rgba(0, 0, 0, 0.10) !important;
  border-radius: 10px;
}

/* ─── PAGE-SPECIFIC TWEAKS ────────────────────────────────── */
/* Settings split */
body.v4 .settings-split {
  background: transparent;
}
body.v4 .settings-nav {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-border);
  border-radius: var(--g-r-lg);
}
body.v4 .settings-pane {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-border);
  border-radius: var(--g-r-lg);
}

/* Money hero (Sponsors / Invoices / P&L / Budget) */
body.v4 .money-hero {
  background: rgba(255, 255, 255, 0.58) !important;
  backdrop-filter: var(--g-blur-2);
  -webkit-backdrop-filter: var(--g-blur-2);
  border: 1px solid var(--g-border);
  border-radius: var(--g-r-xl);
  padding: 24px 28px;
  box-shadow: var(--g-sh);
}
body.v4 .money-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
body.v4 .money-tile {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-border);
  border-radius: var(--g-r);
  padding: 18px 22px;
  box-shadow: var(--g-sh);
}
body.v4 .money-tile.mint   { background: rgba(214, 245, 227, 0.5) !important; }
body.v4 .money-tile.butter { background: rgba(254, 252, 232, 0.55) !important; }
body.v4 .money-tile.cherry { background: rgba(253, 230, 235, 0.55) !important; }

/* Cadence hero (Social / Newsletter / Community) */
body.v4 .cadence-hero {
  background: rgba(255, 255, 255, 0.58) !important;
  backdrop-filter: var(--g-blur-2);
  -webkit-backdrop-filter: var(--g-blur-2);
  border: 1px solid var(--g-border);
  border-radius: var(--g-r-xl);
  padding: 22px 26px;
}

/* Intel banner */
body.v4 .intel-banner {
  background: rgba(254, 252, 232, 0.65);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(146, 102, 13, 0.18);
  color: var(--g-butter);
  border-radius: var(--g-r);
}

/* Page hero wrap (universal renderPageHero) */
body.v4 .page-hero-wrap {
  margin-bottom: 18px;
}

/* Grid layouts pickup */
body.v4 .grid-4,
body.v4 .grid.grid-4 { grid-template-columns: repeat(4, 1fr) !important; gap: 12px; }
body.v4 .grid-3,
body.v4 .grid.grid-3 { grid-template-columns: 1.2fr 1fr 1fr !important; gap: 14px; }
body.v4 .grid-2,
body.v4 .grid.grid-2 { grid-template-columns: 1fr 1fr !important; gap: 14px; }
body.v4 .grid-2-1,
body.v4 .grid.grid-2-1 { grid-template-columns: 1.5fr 1fr !important; gap: 14px; }

/* ─── STUDIO SCHEDULE · Wave 53.3 match screenshot ─────────────
   Big card with eyebrow + display headline + sub-controls + grid.
   Lilac event cells (solid tint), DOW stacked above date number. */
body.v4 .studio-week {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--g-border) !important;
  border-radius: var(--g-r-lg) !important;
  padding: 28px 32px !important;
  box-shadow: var(--g-sh);
}
body.v4 .studio-eye {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  color: var(--g-blue) !important;
  margin: 0 0 8px !important;
}
body.v4 .studio-display {
  font-family: var(--g-fd) !important;
  font-size: 46px !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.05 !important;
  margin: 0 0 22px !important;
  color: var(--g-ink-1) !important;
}
body.v4 .studio-display-strong { color: var(--g-ink-1) !important; }
body.v4 .studio-display-soft   { color: var(--g-ink-4) !important; margin-left: 8px; }

body.v4 .studio-subbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 14px 0 !important;
  border-top: 1px solid var(--g-rule) !important;
  margin-bottom: 18px !important;
  flex-wrap: wrap;
}
body.v4 .studio-subbar-l {
  font-size: 13px;
  color: var(--g-ink-3);
  letter-spacing: -0.005em;
}
body.v4 .studio-subbar-l strong { color: var(--g-ink-1); font-weight: 600; }
body.v4 .studio-subbar-r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Studio/My calendar segmented - solid black active */
body.v4 .studio-seg {
  display: inline-flex !important;
  background: rgba(0, 0, 0, 0.04) !important;
  border-radius: var(--r-pill) !important;
  padding: 2px !important;
  gap: 0 !important;
}
body.v4 .studio-seg-btn {
  padding: 7px 16px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  font-family: var(--g-fd) !important;
  border: none !important;
  background: transparent !important;
  color: var(--g-ink-3) !important;
  border-radius: var(--r-pill) !important;
  letter-spacing: -0.005em !important;
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease;
}
body.v4 .studio-seg-btn:hover { color: var(--g-ink-1) !important; }
body.v4 .studio-seg-btn.on {
  background: var(--g-ink-1) !important;
  color: var(--on-accent) !important;
  font-weight: 600 !important;
}

/* Today nav pill */
body.v4 .studio-nav {
  display: inline-flex !important;
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid var(--g-rule) !important;
  border-radius: var(--r-pill) !important;
  padding: 2px !important;
}
body.v4 .studio-nav-btn {
  border: none !important;
  background: transparent !important;
  color: var(--g-ink-3) !important;
  border-radius: 50% !important;
  cursor: pointer;
  height: 30px;
  display: grid !important;
  place-items: center;
  font-family: var(--g-fd) !important;
}
body.v4 .studio-nav-btn.chev { width: 30px !important; padding: 0 !important; font-size: 14px !important; }
body.v4 .studio-nav-btn.today {
  width: auto !important;
  padding: 0 14px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: var(--r-pill) !important;
  color: var(--g-ink-2) !important;
}
body.v4 .studio-nav-btn:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  color: var(--g-ink-1) !important;
}

/* Grid */
body.v4 .studio-grid {
  background: var(--g-surface) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-radius: 14px !important;
  overflow: hidden;
  display: grid !important;
  grid-template-columns: 80px repeat(7, 1fr) !important;
}
/* Day header cells - DOW small uppercase, date number big */
body.v4 .studio-grid-head {
  padding: 16px 14px !important;
  text-align: center;
  border-right: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  background: transparent !important;
  font-family: var(--g-fd) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
}
body.v4 .studio-grid-head:last-of-type { border-right: none !important; }
body.v4 .studio-grid-head:first-child { background: transparent !important; }
body.v4 .studio-grid-head-dow {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  color: var(--g-ink-4) !important;
  text-transform: uppercase;
}
body.v4 .studio-grid-head-num {
  font-family: var(--g-fd) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.018em !important;
  color: var(--g-ink-1) !important;
  line-height: 1 !important;
}
body.v4 .studio-grid-head.today .studio-grid-head-dow { color: var(--g-blue) !important; }
body.v4 .studio-grid-head.today .studio-grid-head-num {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--g-blue) !important;
  color: var(--on-accent) !important;
}

/* Time column */
body.v4 .studio-grid-time {
  padding: 14px 12px !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: var(--g-ink-4) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  border-right: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
  text-align: left;
  font-family: var(--g-fd) !important;
}

/* Day cells (empty) */
body.v4 .studio-grid-cell {
  border-right: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
  min-height: 56px !important;
  position: relative;
  padding: 6px 8px !important;
}
body.v4 .studio-grid-cell:nth-of-type(8n) { border-right: none !important; }
body.v4 .studio-grid-cell.today-col { background: rgba(0, 113, 227, 0.025) !important; }

/* Event cell - SOLID LILAC tinted */
body.v4 .studio-grid-cell.has-event {
  background: rgba(94, 92, 230, 0.13) !important;
  cursor: pointer;
}
body.v4 .studio-grid-cell.has-event:hover {
  background: rgba(94, 92, 230, 0.20) !important;
}
body.v4 .studio-cell-label {
  display: block !important;
  font-family: var(--g-fd) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--g-lilac) !important;
  letter-spacing: -0.005em;
  line-height: 1.2;
}
body.v4 .studio-cell-time {
  display: block !important;
  font-size: 11.5px !important;
  color: var(--g-lilac) !important;
  opacity: 0.78;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}
/* Personal "Busy" - soft cherry */
body.v4 .studio-grid-cell.has-event.personal {
  background: rgba(184, 0, 43, 0.10) !important;
  color: var(--g-cherry) !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.005em;
  font-family: var(--g-fd);
}
body.v4 .studio-grid-cell.has-event.personal:hover {
  background: rgba(184, 0, 43, 0.18) !important;
}
/* Tentative / TBC */
body.v4 .studio-grid-cell.has-event.is-tentative { opacity: 0.7; }
body.v4 .studio-grid-cell.has-event.is-time-tbc::after {
  content: 'TBC';
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--g-lilac);
  opacity: 0.6;
}

/* ─── CALENDARS · proper design pass ──────────────────────────
   Three surfaces share the same glass language:
   1. Dashboard / Studio week calendar (.wk-cal-*, .b-month-split, .b-mini-cal)
   2. Pipeline month calendar (.big-cal-*)
   3. Content Calendar / Calendar page (.cal-cell, .cal-event)
   Cells: rgba 0.55 backdrop, white hover.
   Today: solid Apple-blue pill on the date number.
   Events: pastel-tinted chips with semantic colours. */

/* - shared month grid surface - */
body.v4 .b-month-grid,
body.v4 .big-cal-grid {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-border) !important;
  border-radius: var(--g-r-lg) !important;
  overflow: hidden;
}

/* - Pipeline big calendar (month view) - */
body.v4 .big-cal-head {
  background: rgba(0, 0, 0, 0.025) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}
body.v4 .big-cal-dow {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  color: var(--g-ink-4) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 10px 12px !important;
}
body.v4 .big-cal-cell {
  background: transparent !important;
  border-right: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  min-height: 110px !important;
  padding: 8px 10px !important;
  transition: background 120ms ease;
}
body.v4 .big-cal-cell:hover { background: rgba(255, 255, 255, 0.5) !important; }
body.v4 .big-cal-cell.muted {
  background: rgba(0, 0, 0, 0.015) !important;
  color: var(--g-ink-4) !important;
}
body.v4 .big-cal-cell .date {
  font-family: var(--g-fd);
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--g-ink-1) !important;
  letter-spacing: -0.005em;
  margin-bottom: 4px;
}
body.v4 .big-cal-cell.muted .date { color: var(--g-ink-4) !important; }
/* Today pill - solid blue circle around the number */
body.v4 .big-cal-cell.today .date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--g-blue) !important;
  color: var(--on-accent) !important;
  font-weight: 700;
}
/* Events inside cells - pastel chips */
body.v4 .big-cal-event {
  display: block;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  padding: 3px 7px !important;
  border-radius: 6px !important;
  margin-top: 3px;
  background: rgba(0, 113, 227, 0.12) !important;
  color: var(--g-blue) !important;
  border: none !important;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
body.v4 .big-cal-event.rec   { background: rgba(184, 0, 43, 0.12) !important; color: var(--g-cherry) !important; }
body.v4 .big-cal-event.edit  { background: rgba(0, 113, 227, 0.12) !important; color: var(--g-blue) !important; }
body.v4 .big-cal-event.sched { background: rgba(47, 133, 90, 0.12) !important;  color: var(--g-green) !important; }
body.v4 .big-cal-event.pub   { background: rgba(0, 0, 0, 0.06) !important;       color: var(--g-ink-3) !important; }

/* - Pipeline calendar nav strip - */
body.v4 .big-cal-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
body.v4 .big-cal-nav .month-label {
  font-family: var(--g-fd);
  font-size: 18px;
  font-weight: 700;
  color: var(--g-ink-1);
  letter-spacing: -0.015em;
}

/* ─── DASHBOARD WEEK VIEW · matches CALENDAR_DAY_WEEK_LIST_REDESIGN mockup ──
   Replace legacy dark-header .c-week-col with 7 glass columns. DOW small
   uppercase + big date number stacked. Today = blue pill on date + blue
   tinted background + blue border. Events = solid coloured chips, no stripe. */
body.v4 .c-week {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 10px !important;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
}
body.v4 .c-week-col {
  background: rgba(255, 255, 255, 0.65) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--g-border) !important;
  border-radius: 14px !important;
  /* Wave 179 P5 - content-driven depth with a small bottom buffer, instead
     of a fixed 280px that wasted space on empty weeks. Columns stretch to
     the tallest day in the row, so an empty/one-entry week stays shallow
     and the calendar only grows when a day has 2+ entries. */
  padding: 0 0 10px !important;
  overflow: hidden;
  display: flex !important;
  flex-direction: column;
  min-height: 116px;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
body.v4 .c-week-col:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}
/* Today - blue tint, blue border, blue pill on number */
body.v4 .c-week-col.today {
  background: rgba(0, 113, 227, 0.05) !important;
  border-color: var(--g-blue) !important;
  box-shadow: 0 0 0 1px var(--g-blue), 0 8px 22px rgba(0, 113, 227, 0.10);
}
/* Column header - small uppercase DOW + big date number, STACKED.
   Override legacy .c-week-col-head which is dark/cherry. */
body.v4 .c-week-col-head {
  background: transparent !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  padding: 14px 12px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 5px !important;
  color: var(--g-ink-2) !important;
}
body.v4 .c-week-col.today .c-week-col-head {
  background: transparent !important;
  border-bottom-color: rgba(0, 113, 227, 0.2) !important;
}
body.v4 .c-week-day-name {
  font-family: var(--g-fd) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  color: var(--g-ink-4) !important;
  text-transform: uppercase;
  margin: 0 !important;
}
body.v4 .c-week-col.today .c-week-day-name { color: var(--g-blue) !important; }
body.v4 .c-week-day-num {
  font-family: var(--g-fd) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.018em !important;
  color: var(--g-ink-1) !important;
  line-height: 1 !important;
  margin: 0 !important;
}
body.v4 .c-week-col.today .c-week-day-num {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--g-blue) !important;
  color: var(--on-accent) !important;
  font-size: 18px !important;   /* D2.1 - was squashed at 22px in a 32px circle */
  flex-shrink: 0;
}

/* Section labels (Studio / Publish / Busy) - uppercase small grey */
body.v4 .c-week-section {
  padding: 8px 8px 0 !important;
  background: transparent !important;
}
body.v4 .c-week-section-label {
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  color: var(--g-ink-4) !important;
  text-transform: uppercase;
  margin-bottom: 4px !important;
  padding: 0 4px !important;
}
body.v4 .c-week-section.studio  .c-week-section-label { color: var(--g-cherry) !important; }
body.v4 .c-week-section.publish .c-week-section-label { color: var(--g-green) !important; }
body.v4 .c-week-section.busy    .c-week-section-label { color: var(--g-lilac) !important; }

/* Event items inside columns - solid coloured chips, NO LEFT STRIPE */
body.v4 .c-week-item {
  border-radius: 10px !important;
  padding: 9px 11px !important;
  margin-bottom: 5px !important;
  border: none !important;
  background: rgba(0, 0, 0, 0.04) !important;
  color: var(--g-ink-2) !important;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
  font-family: var(--g-fd) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em;
  line-height: 1.25;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
body.v4 .c-week-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0,0,0,0.06);
}
body.v4 .c-week-item.studio {
  background: rgba(184, 0, 43, 0.15) !important;
  color: var(--g-cherry) !important;
}
body.v4 .c-week-item.publish {
  background: rgba(47, 133, 90, 0.15) !important;
  color: var(--g-green) !important;
}
body.v4 .c-week-item.busy {
  background: rgba(94, 92, 230, 0.17) !important;
  color: var(--g-lilac) !important;
}
body.v4 .c-week-item .t {
  display: block;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  opacity: 0.78;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  color: inherit !important;
}
body.v4 .c-week-col-body-empty {
  flex: 1;
  display: grid !important;
  place-items: center !important;
  padding: 20px 10px !important;
  font-size: 11.5px !important;
  font-style: italic;
  color: var(--g-ink-4) !important;
  letter-spacing: -0.005em;
}

/* ─── DASHBOARD CALENDAR · matches screenshot 100% ─────────
   wk-cal is the glass card. Head row: eyebrow + title left,
   Day/Week/Month/List segmented + Today nav pill right. */
body.v4 .wk-cal,
body.v4 .week-calendar {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-border) !important;
  border-radius: var(--g-r-lg) !important;
  padding: 22px 24px !important;
}
body.v4 .wk-cal-eyebrow {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  color: var(--g-blue) !important;
  margin: 0 !important;
}
body.v4 .wk-cal-title {
  font-family: var(--g-fd) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.018em !important;
  color: var(--g-ink-1) !important;
  margin-top: 4px !important;
}
body.v4 .wk-cal-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 0 0 16px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  margin-bottom: 18px !important;
  flex-wrap: wrap;
}
body.v4 .wk-cal-headleft { display: flex; flex-direction: column; gap: 0; }
body.v4 .wk-cal-headright {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap;
}
/* Day/Week/Month segmented pill */
body.v4 .wk-cal-modes {
  display: inline-flex !important;
  background: rgba(0, 0, 0, 0.04) !important;
  border-radius: var(--r-pill) !important;
  padding: 2px !important;
  gap: 0 !important;
  border: none !important;
}
body.v4 .wk-cal-mode {
  padding: 6px 14px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  font-family: var(--g-fd) !important;
  border: none !important;
  background: transparent !important;
  color: var(--g-ink-3) !important;
  border-radius: var(--r-pill) !important;
  letter-spacing: -0.005em !important;
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease;
}
body.v4 .wk-cal-mode:hover { color: var(--g-ink-1) !important; background: transparent !important; }
body.v4 .wk-cal-mode.active {
  background: var(--g-surface) !important;
  color: var(--g-ink-1) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
/* Prev/Today/Next nav pill */
body.v4 .wk-cal-nav {
  display: inline-flex !important;
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-radius: var(--r-pill) !important;
  padding: 2px !important;
  align-items: center;
  gap: 0;
}
body.v4 .wk-cal-navbtn {
  border: none !important;
  background: transparent !important;
  color: var(--g-ink-3) !important;
  border-radius: 50% !important;
  cursor: pointer;
  display: grid !important;
  place-items: center;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: var(--g-fd) !important;
  letter-spacing: -0.005em;
  padding: 0 !important;
  height: 30px;
  transition: background 120ms ease, color 120ms ease;
}
body.v4 .wk-cal-navbtn.chev { width: 30px !important; }
body.v4 .wk-cal-navbtn.today {
  width: auto !important;
  padding: 0 14px !important;
  font-size: 12px !important;
  border-radius: var(--r-pill) !important;
  color: var(--g-ink-2) !important;
}
body.v4 .wk-cal-navbtn:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  color: var(--g-ink-1) !important;
}

/* ─── Dashboard month split: mini-cal column | day detail ─── */
body.v4 .b-month-split {
  display: grid !important;
  grid-template-columns: 320px 1fr !important;
  gap: 22px !important;
}
body.v4 .b-mini-cal-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-self: start;
}
body.v4 .b-mini-cal {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
  width: 100% !important;
}
body.v4 .b-mini-cal-head {
  background: transparent !important;
  border-bottom: none !important;
  padding: 0 4px 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
body.v4 .b-mini-cal-month {
  font-family: var(--g-fd) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--g-ink-1) !important;
  letter-spacing: -0.005em;
}
body.v4 .b-mini-cal-wk {
  font-size: 11px !important;
  color: var(--g-ink-4) !important;
  font-weight: 500;
  letter-spacing: -0.005em;
}
body.v4 .b-mini-cal-grid {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  padding: 0 !important;
  gap: 2px !important;
  width: 100% !important;
}
body.v4 .b-mini-cal-dow {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  color: var(--g-ink-4) !important;
  text-transform: uppercase;
  text-align: center;
  padding: 6px 0 !important;
}
body.v4 .b-mini-day {
  aspect-ratio: 1;
  border-radius: 9px !important;
  color: var(--g-ink-2) !important;
  font-family: var(--g-fd) !important;
  font-weight: 500;
  font-size: 12.5px !important;
  border: 0 !important;
  background: transparent !important;
  cursor: pointer;
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
}
body.v4 .b-mini-day:hover:not(.pad):not(.today):not(.sel) {
  background: rgba(0, 113, 227, 0.08) !important;
  color: var(--g-blue) !important;
}
body.v4 .b-mini-day.pad { color: var(--g-ink-5) !important; cursor: default; }
/* Blue event-dot under days that have events */
body.v4 .b-mini-day.has::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--g-blue) !important;
}
/* Today = solid blue circle, inset so it's not edge-to-edge (D2). */
body.v4 .b-mini-day.today {
  background: var(--g-blue) !important;
  color: var(--on-accent) !important;
  font-weight: 700 !important;
  border-radius: 50% !important;
  width: 28px; height: 28px;
  margin: auto;
}
body.v4 .b-mini-day.today.has::after { background: var(--g-surface) !important; }
/* Wave 192 (D2) - type-coloured dots that match the legend key. */
body.v4 .b-mini-day.has::after { display: none; }   /* replaced by .b-mini-dots */
body.v4 .b-mini-dots {
  position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 2px;
}
body.v4 .b-mini-dot { width: 4px; height: 4px; border-radius: 50%; }
body.v4 .b-mini-dot.rec  { background: var(--g-cherry); }
body.v4 .b-mini-dot.rel  { background: var(--c-mint); }
body.v4 .b-mini-dot.busy { background: rgba(0,0,0,.35); }
body.v4 .b-mini-day.today .b-mini-dot { background: var(--g-surface) !important; }
/* Selected (non-today) = light blue tinted */
body.v4 .b-mini-day.sel:not(.today) {
  background: rgba(0, 113, 227, 0.12) !important;
  color: var(--g-blue) !important;
  font-weight: 700 !important;
}

/* Bottom legend under mini-cal */
body.v4 .b-mini-cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 12px 4px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
body.v4 .b-mini-legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--g-ink-3);
  font-weight: 500;
  letter-spacing: -0.005em;
}
body.v4 .b-mini-legend i {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
body.v4 .b-mini-legend.rec i { background: var(--g-cherry); }
body.v4 .b-mini-legend.rel i { background: var(--c-mint); }
body.v4 .b-mini-legend.busy i { background: rgba(0,0,0,.35); }
body.v4 .b-mini-legend.soc i { background: var(--g-lilac); }

/* ─── Day detail pane (right side of month split) ─────────── */
body.v4 .b-month-detail {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
body.v4 .b-month-detail-head {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 14px !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
}
body.v4 .b-month-detail-title {
  font-family: var(--g-fd) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--g-ink-1) !important;
  letter-spacing: -0.018em;
  line-height: 1.15;
}
body.v4 .b-month-detail-sub {
  font-size: 13px !important;
  color: var(--g-ink-3) !important;
  margin-top: 4px;
  letter-spacing: -0.005em;
}
body.v4 .b-month-detail-count {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--g-ink-3);
  background: rgba(0, 0, 0, 0.05);
  padding: 5px 11px;
  border-radius: var(--r-pill);
  letter-spacing: -0.005em;
  flex-shrink: 0;
  font-family: var(--g-fd);
}
/* Calendar day events - SOLID coloured rows. No left stripe.
   Grid: time-col | body-col | tag-col. Whole row is the colour. */
body.v4 .b-event {
  display: grid !important;
  grid-template-columns: 130px 1fr auto !important;
  gap: 16px !important;
  align-items: center !important;
  background: rgba(0, 0, 0, 0.03) !important;
  border-left: none !important;
  border: none !important;
  border-radius: var(--r) !important;
  padding: 16px 18px !important;
  margin-bottom: 8px !important;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
body.v4 .b-event:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}
/* SOLID coloured event rows per Peter - deeper tint, no stripe, text takes stage colour */
body.v4 .b-event.rec  { background: rgba(184, 0, 43, 0.13) !important; }
body.v4 .b-event.rel  { background: rgba(47, 133, 90, 0.13) !important; }
body.v4 .b-event.busy { background: rgba(94, 92, 230, 0.15) !important; }
body.v4 .b-event-time {
  font-family: var(--g-fd) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}
body.v4 .b-event-body { min-width: 0; }
body.v4 .b-event-title {
  font-family: var(--g-fd) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: -0.008em;
  line-height: 1.2;
}
body.v4 .b-event-meta {
  font-size: 12.5px !important;
  margin-top: 3px;
  letter-spacing: -0.005em;
  opacity: 0.78;
}
/* Time + title + meta pick up the stage colour */
body.v4 .b-event.rec  .b-event-time,
body.v4 .b-event.rec  .b-event-title,
body.v4 .b-event.rec  .b-event-meta { color: var(--g-cherry) !important; }
body.v4 .b-event.rel  .b-event-time,
body.v4 .b-event.rel  .b-event-title,
body.v4 .b-event.rel  .b-event-meta { color: var(--g-green) !important; }
body.v4 .b-event.busy .b-event-time,
body.v4 .b-event.busy .b-event-title,
body.v4 .b-event.busy .b-event-meta { color: var(--g-lilac) !important; }
/* Tag pill on the right - white background, coloured text */
body.v4 .b-event-tag {
  background: rgba(255, 255, 255, 0.85) !important;
  border-radius: var(--r-pill) !important;
  padding: 5px 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  font-size: 10px !important;
  text-transform: uppercase;
  font-family: var(--g-fd) !important;
  flex-shrink: 0;
}
body.v4 .b-event.rec  .b-event-tag { color: var(--g-cherry) !important; }
body.v4 .b-event.rel  .b-event-tag { color: var(--g-green) !important; }
body.v4 .b-event.busy .b-event-tag { color: var(--g-lilac) !important; }

/* Wave 123 - released = past publish_time. Mint switches to grey
   (same chip vocab as the Pipeline month calendar). */
body.v4 .b-event.rel.released {
  background: rgba(0, 0, 0, 0.05) !important;
}
body.v4 .b-event.rel.released .b-event-time,
body.v4 .b-event.rel.released .b-event-title,
body.v4 .b-event.rel.released .b-event-meta,
body.v4 .b-event.rel.released .b-event-tag {
  color: var(--g-ink-3) !important;
}

/* Wave 125 - proposed = pencilled in, not confirmed yet. Dashed border +
   blue tint so it reads as tentative vs the solid mint Scheduled chip. */
body.v4 .b-event.rel.proposed {
  background: rgba(0, 113, 227, 0.05) !important;
  border: 1px dashed rgba(0, 113, 227, 0.4) !important;
}
body.v4 .b-event.rel.proposed .b-event-time,
body.v4 .b-event.rel.proposed .b-event-title,
body.v4 .b-event.rel.proposed .b-event-tag {
  color: var(--g-blue) !important;
}
body.v4 .b-event.rel.proposed .b-event-meta { color: var(--g-ink-3) !important; }

/* Week-view + legend "PRO" kind chip - dashed blue */
body.v4 .c-week-kind.proposed {
  background: rgba(0, 113, 227, 0.08);
  color: var(--g-blue);
  border: 1px dashed rgba(0, 113, 227, 0.5);
}
body.v4 .c-week-item.publish.proposed {
  background: rgba(0, 113, 227, 0.08) !important;
  color: var(--g-blue) !important;
}
body.v4 .c-week-item.publish.proposed .t {
  color: var(--g-blue) !important;
  opacity: 0.7;
}

/* Pipeline month-calendar "proposed" chip - dashed blue pill */
body.v4 .big-cal-event.proposed {
  background: rgba(0, 113, 227, 0.08) !important;
  color: var(--g-blue) !important;
  border: 1px dashed rgba(0, 113, 227, 0.5) !important;
}
body.v4 .b-month-empty {
  color: var(--g-ink-4) !important;
  font-size: 13px !important;
  text-align: center;
  padding: 28px 16px;
}

/* - Content Calendar page (.cal-cell / .cal-event) - */
body.v4 .cal-head {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  color: var(--g-ink-4) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 10px 12px !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}
body.v4 .cal-cell {
  background: transparent !important;
  border-right: 1px solid rgba(0,0,0,0.05) !important;
  border-bottom: 1px solid rgba(0,0,0,0.05) !important;
  min-height: 92px !important;
  padding: 8px 10px !important;
}
body.v4 .cal-cell.muted {
  background: rgba(0,0,0,0.015) !important;
  opacity: 1 !important;
}
body.v4 .cal-cell.today { background: rgba(0, 113, 227, 0.04) !important; }
body.v4 .cal-cell.today .cal-date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--g-blue) !important;
  color: var(--on-accent) !important;
  font-weight: 700;
}
body.v4 .cal-date {
  font-family: var(--g-fd);
  font-weight: 600 !important;
  color: var(--g-ink-1) !important;
  font-size: 12.5px !important;
}
body.v4 .cal-event {
  font-size: 10.5px !important;
  padding: 3px 7px !important;
  border-radius: 6px !important;
  margin-top: 3px;
  letter-spacing: -0.005em;
  font-weight: 500 !important;
  background: rgba(0, 113, 227, 0.12) !important;
  color: var(--g-blue) !important;
  border: none !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.v4 .cal-event.record     { background: rgba(94, 92, 230, 0.12) !important; color: var(--g-lilac) !important; }
body.v4 .cal-event.release    { background: rgba(47, 133, 90, 0.12) !important; color: var(--g-green) !important; }
body.v4 .cal-event.social     { background: rgba(0, 113, 227, 0.12) !important; color: var(--g-blue) !important; }
body.v4 .cal-event.newsletter { background: rgba(146, 102, 13, 0.12) !important; color: var(--g-butter) !important; }

/* - Calendar alert banner (.cal-alerts) - */
body.v4 .cal-alerts {
  background: rgba(184, 0, 43, 0.06) !important;
  border: 1px solid rgba(184, 0, 43, 0.18) !important;
  border-radius: var(--g-r) !important;
  color: var(--g-ink-1) !important;
}
body.v4 .cal-alerts-icon { color: var(--g-cherry) !important; }

/* Chat thread */
body.v4 .chat-thread,
body.v4 .chat-brief {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-border) !important;
  border-radius: var(--g-r-lg);
}
body.v4 .chat-input-bar input {
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid rgba(0, 0, 0, 0.10) !important;
  border-radius: var(--r-pill);
}
body.v4 .chat-tabs .chat-pill {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--g-border);
  border-radius: var(--r-pill);
}
body.v4 .chat-tabs .chat-pill.on {
  background: var(--g-ink-1);
  color: var(--on-accent);
  border-color: var(--g-ink-1);
}

/* Empty state */
body.v4 .empty-state,
body.v4 .empty-state-sm {
  background: rgba(255, 255, 255, 0.4);
  border-radius: var(--g-r);
  color: var(--g-ink-3);
}

/* Float-bottom CTA strip */
body.v4 .apl-float-cta,
body.v4 .float-cta {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-border);
}

/* Apple row primitives (light + dark) */
body.v4 .apl-row,
body.v4 .row3 { gap: 14px; }
body.v4 .apl-row.two { grid-template-columns: 1.5fr 1fr; }
body.v4 .apl-row.equal { grid-template-columns: repeat(3, 1fr); }
/* Wave 134 - 4 equal cards, no card can balloon past 1/4 of the row.
   min-width: 0 stops the grid from honouring intrinsic min-content
   width (long uppercase eyebrows otherwise force the Release tile
   wider than the others and wrap a 4-col row onto two). */
body.v4 .apl-row.four { grid-template-columns: repeat(4, 1fr) !important; }
body.v4 .apl-row.four > .apl-card { min-width: 0; }
body.v4 .apl-h em { color: var(--g-ink-4); }
/* (.apl-card.dark .apl-h b solidified above - keep solid blue) */

/* Brain panel skeleton state */
body.v4 .brain[style*="opacity"] {
  opacity: 1 !important;
}

/* Hide old legacy chrome that conflicts */
body.v4 .topbar .brand { display: none; }

/* Make sure brain icon SVGs render at full opacity in glass */
body.v4 .brain-icon svg {
  stroke: currentColor;
  opacity: 1;
}

/* Responsive guard */
@media (max-width: 1200px) {
  body.v4 .sb,
  body.v4 .sidebar.sb { margin: 12px 0 12px 12px; height: calc(100vh - 24px); top: 12px; }
  body.v4 .main { padding: 18px 20px 28px; }
  body.v4 .stat-row { grid-template-columns: repeat(2, 1fr); }
  body.v4 .row-eq4,
  body.v4 .apl-row.equal { grid-template-columns: repeat(2, 1fr); }
  body.v4 .row3,
  body.v4 .apl-row { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
  body.v4 .app { grid-template-columns: 1fr; }
  body.v4 .sb,
  body.v4 .sidebar.sb { display: none; }
}

/* Card variant: intentionally dark (e.g. DOAC packaging lesson on Intel) */
body.v4 .card.card-dark,
body.v4 .panel.card-dark {
  background: rgba(29, 29, 31, 0.85) !important;
  color: var(--on-accent) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
body.v4 .card-dark .eyebrow { color: rgba(255, 255, 255, 0.65) !important; }
body.v4 .card-dark h2,
body.v4 .card-dark h3 { color: var(--on-accent) !important; }
body.v4 .card-dark p { color: rgba(255, 255, 255, 0.8); }

/* ═══════════════════════════════════════════════════════════════════
   WAVE 70 · review fixes (B1, S6, S9, M17)
   - .pill colour classes for aiRow / file pills / distribution tiles
   - .ep-modal-eye-dot for stage colour token in popup head
   - .pulse-dot for chat header presence indicator
   ═══════════════════════════════════════════════════════════════════ */

/* S6 - pill colour map so aiRow / filePill / distTile etc. don't need
   to ship inline backgrounds that override classes. */
body.v4 .pill.green,
body.v4 .pill.mint   { background: var(--g-green-bg)  !important; color: var(--g-green)  !important; }
body.v4 .pill.cherry { background: var(--g-cherry-bg) !important; color: var(--g-cherry) !important; }
body.v4 .pill.butter { background: var(--g-butter-bg) !important; color: var(--g-butter) !important; }
body.v4 .pill.lilac  { background: var(--g-lilac-bg)  !important; color: var(--g-lilac)  !important; }
body.v4 .pill.orange { background: var(--g-orange-bg) !important; color: var(--g-orange) !important; }
body.v4 .pill.blue   { background: rgba(0,113,227,0.12) !important; color: var(--g-blue) !important; }
body.v4 .pill.grey,
body.v4 .pill.ink    { background: rgba(0,0,0,0.06)    !important; color: var(--g-ink-3) !important; }
body.v4 .pill {
  font-family: var(--g-fd);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* S9 - eyebrow dot in episode popup head + episode centre meta */
body.v4 .ep-modal-eye-dot,
body.v4 .ec-eye-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--g-ink-3);
  margin-right: 7px;
  vertical-align: middle;
}

/* M17 - pulse-dot for chat header presence */
body.v4 .pulse-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--g-green);
  font-weight: 600;
}
body.v4 .pulse-dot::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--g-green);
  box-shadow: 0 0 0 0 rgba(47,133,90,0.5);
  animation: tpms-pulse 1.8s ease-out infinite;
}
@keyframes tpms-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(47,133,90,0.5); }
  70%  { box-shadow: 0 0 0 6px rgba(47,133,90,0); }
  100% { box-shadow: 0 0 0 0 rgba(47,133,90,0); }
}

/* ═══════════════════════════════════════════════════════════════════
   WAVE 71 · punch-list fixes
   71.1 · team-row divider matches .ep-row (hairline)
   71.2 · canonical empty-panel + empty-inline
   71.3 · CEO tile icon truly centred
   71.4 · kanban card progress bar
   71.5 · "Open Episode Centre" link in modal head (unhide foot-links)
   71.6 · Intel stat-tile readable on light bg + glass top-targets/actions
   ═══════════════════════════════════════════════════════════════════ */

/* 71.1 - team-row hairline divider (match .ep-row at 0.04 alpha) */
body.v4 .team-row {
  border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
}
body.v4 .team-row:last-child {
  border-bottom: none !important;
}

/* 71.2 - canonical empty states.
   .empty-panel  → large dashed card with icon + title + sub (existing .empty-state-cta-wrap aliased)
   .empty-inline → tile/cell-context centred muted line + icon, no border  */
body.v4 .empty-panel,
body.v4 .empty-state-cta-wrap {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 18px;
  border: 1px dashed rgba(0, 0, 0, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.35);
  text-align: center;
  gap: 6px;
}
body.v4 .empty-panel .empty-panel-icon,
body.v4 .empty-state-cta-wrap svg {
  width: 32px; height: 32px;
  color: var(--g-ink-4);
  display: grid; place-items: center;
  margin-bottom: 4px;
}
body.v4 .empty-panel-title,
body.v4 .empty-state-cta-wrap-title {
  font-family: var(--g-fd);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--g-ink-1);
  letter-spacing: -0.005em;
}
body.v4 .empty-panel-sub,
body.v4 .empty-state-cta-wrap-sub {
  font-size: 12px;
  color: var(--g-ink-3);
  max-width: 260px;
  line-height: 1.45;
}
body.v4 .empty-inline {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 12px;
  gap: 4px;
  text-align: center;
  color: var(--g-ink-3);
  font-size: 12px;
}
body.v4 .empty-inline-icon {
  width: 22px; height: 22px;
  color: var(--g-ink-4);
  opacity: 0.5;
  margin-bottom: 2px;
}
body.v4 .empty-inline-title {
  font-family: var(--g-fd);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--g-ink-2);
  letter-spacing: -0.005em;
}
body.v4 .empty-inline-sub {
  font-size: 11px;
  color: var(--g-ink-4);
}

/* 71.3 / 79 - CEO tile icon, truly centred + Lucide-friendly.
   font-size:0 hid the inner SVG; now allow normal sizing and force the
   nested SVG to a clean 22×22. */
body.v4 .ceo-tile-icon {
  padding: 0 !important;
  text-indent: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden;
  width: 40px !important;
  height: 40px !important;
  border-radius: var(--r) !important;
}
body.v4 .ceo-tile-icon svg,
body.v4 .ceo-tile-icon i[data-lucide],
body.v4 .ceo-tile-icon i.lucide {
  width: 22px !important;
  height: 22px !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  fill: none !important;
  flex-shrink: 0 !important;
}
body.v4 .ceo-tile-icon::before {
  display: inline-block !important;
  position: relative !important;
  left: 0 !important; top: 0 !important;
  transform: none !important;
  flex-shrink: 0 !important;
}

/* 71.4 - kanban card progress bar (per attached screenshot) */
body.v4 .kb-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
body.v4 .kb-card-num {
  font-family: var(--g-fd);
  font-size: 11px;
  color: var(--g-ink-4);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 2px;
}
body.v4 .kb-card-progress {
  height: 3px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: var(--r-pill);
  margin-top: 10px;
  overflow: hidden;
}
body.v4 .kb-card-progress-fill {
  height: 100%;
  background: var(--g-blue);
  border-radius: var(--r-pill);
  transition: width 0.4s var(--g-ease);
}
body.v4 .kb-card-progress-fill.done {
  background: var(--g-green);
}
body.v4 .kb-card-progress-fill.urgent {
  background: var(--g-cherry);
}
body.v4 .kb-card-owner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--g-ink-3);
  margin-top: 6px;
}
body.v4 .kb-card-owner .av {
  width: 18px; height: 18px;
  font-size: 8.5px;
}

/* 71.5 - show the modal foot-links again (Wave 57 hid it; Wave 71
   re-introduces the "Open Episode Centre" link as a small text link in the
   modal head right rail). */
body.v4 .ep-modal-foot-links { display: flex !important; gap: 12px; align-items: center; margin-left: auto; }
body.v4 .ep-modal-link {
  background: none;
  border: none;
  font-family: var(--g-fd);
  font-size: 11px;
  font-weight: 600;
  color: var(--g-blue);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  padding: 4px 0;
}
body.v4 .ep-modal-link:hover { text-decoration: underline; }
body.v4 .ep-modal-link.danger { color: var(--g-cherry); }
body.v4 .ep-modal-head-centre-link {
  font-family: var(--g-fd);
  font-size: 11px;
  font-weight: 600;
  color: var(--g-blue);
  text-decoration: none;
  letter-spacing: -0.005em;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: rgba(0, 113, 227, 0.08);
  transition: background 0.2s var(--g-ease);
  margin-right: 8px;
}
body.v4 .ep-modal-head-centre-link:hover {
  background: rgba(0, 113, 227, 0.16);
}

/* 71.6 - Intel stat tiles on light bg need ink-coloured numbers.
   The existing .stat-tile uses .accent-blue / .accent-cherry / .accent-lilac
   accents - none should give white text on white bg. Force-set the value
   colour explicitly so it can't be inherited from a dark-hero context. */
body.v4 .stat-tile {
  background: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-radius: 14px !important;
  padding: 16px 18px !important;
  box-shadow: var(--g-sh);
}
body.v4 .stat-tile .stat-tile-eyebrow {
  font-family: var(--g-fd);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--g-ink-4) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
body.v4 .stat-tile .stat-tile-row { margin-top: 6px; }
body.v4 .stat-tile .stat-tile-value {
  font-family: var(--g-fd);
  font-size: 30px !important;
  font-weight: 800 !important;
  letter-spacing: -0.022em !important;
  line-height: 1 !important;
  color: var(--g-ink-1) !important;
}
body.v4 .stat-tile.accent-cherry .stat-tile-value { color: var(--g-cherry) !important; }
body.v4 .stat-tile.accent-blue   .stat-tile-value { color: var(--g-blue)   !important; }
body.v4 .stat-tile.accent-lilac  .stat-tile-value { color: var(--g-lilac)  !important; }
body.v4 .stat-tile.accent-butter .stat-tile-value { color: var(--g-butter) !important; }
body.v4 .stat-tile .stat-tile-sub {
  font-size: 11.5px !important;
  color: var(--g-ink-3) !important;
  margin-top: 4px;
}

/* 71.6 - Intel target row + action row reskin (glass) */
body.v4 .intel-target,
body.v4 .intel-action {
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-radius: 14px !important;
  padding: 16px 18px !important;
  margin-bottom: 10px;
  box-shadow: var(--g-sh);
  transition: transform 0.2s var(--g-ease), border-color 0.2s var(--g-ease);
}
body.v4 .intel-target:hover,
body.v4 .intel-action:hover {
  border-color: var(--g-blue) !important;
  transform: translateY(-1px);
}
body.v4 .intel-target-name {
  font-family: var(--g-fd);
  font-size: 14px;
  font-weight: 700;
  color: var(--g-ink-1);
  letter-spacing: -0.012em;
}
body.v4 .intel-target-role {
  font-size: 11.5px;
  color: var(--g-ink-3);
  margin-top: 2px;
}
body.v4 .intel-heat {
  font-family: var(--g-fd);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-pill);
}
body.v4 .intel-heat.heat-hot   { background: var(--g-cherry-bg); color: var(--g-cherry); }
body.v4 .intel-heat.heat-warm  { background: var(--g-butter-bg); color: var(--g-butter); }
body.v4 .intel-heat.heat-cold,
body.v4 .intel-heat.heat-grey  { background: rgba(0,0,0,0.06);   color: var(--g-ink-3); }
body.v4 .intel-banner {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: rgba(184, 0, 43, 0.06) !important;
  border: 1px solid rgba(184, 0, 43, 0.18) !important;
  border-radius: 14px !important;
  padding: 16px 18px !important;
  margin-bottom: 16px;
}
body.v4 .intel-banner-icon {
  width: 32px; height: 32px;
  background: var(--g-cherry-bg);
  color: var(--g-cherry);
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   WAVE 72 · One canonical .hero rolled out everywhere.
   Aliases every page's custom hero variant (.cadence-hero, .money-hero,
   .ws-hero, .sp-opener, .studio-eye) to the canonical .hero dark-ink
   look. Inner classes (.money-hero-eyebrow etc.) inherit the canonical
   .hero-eyebrow / .hero-title / .hero-sub typography automatically.
   ═══════════════════════════════════════════════════════════════════ */

body.v4 .cadence-hero,
body.v4 .money-hero,
body.v4 .sp-opener,
body.v4 .stage-banner,
body.v4 .studio-week .studio-eye,                 /* studio.js wraps eye+display */
body.v4 .prod-stage-banner {
  /* Wave 79 - removed .ws-hero from this dark-alias list. Chief.js
     renders the "Your AI Team" box; it already has its own canonical
     glass styling at line ~687 and a headline + chip strip inside.
     Making it dark broke the inner text (ink-1 on dark) and chip pills. */
  background: linear-gradient(180deg, #1d1d1f, var(--ink-deep)) !important;
  color: var(--on-accent) !important;
  border-radius: 18px !important;
  padding: 28px 32px !important;
  position: relative;
  overflow: hidden;
  margin-bottom: 14px !important;
  border: none !important;
  border-left: none !important;
}
body.v4 .cadence-hero::before,
body.v4 .money-hero::before,
body.v4 .sp-opener::before,
body.v4 .prod-stage-banner::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 700px 360px at 12% -10%, rgba(94,92,230,0.30), transparent),
    radial-gradient(ellipse 500px 260px at 95% 110%, rgba(0,113,227,0.25), transparent);
  pointer-events: none;
  z-index: 0;
}
body.v4 .cadence-hero > *,
body.v4 .money-hero > *,
body.v4 .sp-opener > *,
body.v4 .prod-stage-banner > * { position: relative; z-index: 1; }

/* Eyebrow alias - match canonical .hero-eyebrow */
body.v4 .cadence-hero-eyebrow,
body.v4 .money-hero-eyebrow,
body.v4 .sp-opener .eye,
body.v4 .sp-opener .eyebrow {
  font-family: var(--g-fd) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--hero-blue) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
}

/* Title alias - match canonical .hero-title */
body.v4 .cadence-hero-title,
body.v4 .money-hero-value,
body.v4 .money-hero-title,
body.v4 .sp-opener h1,
body.v4 .sp-opener h2,
body.v4 .studio-display {
  font-family: var(--g-fd) !important;
  font-size: 34px !important;
  font-weight: 800 !important;
  letter-spacing: -0.024em !important;
  color: var(--on-accent) !important;
  margin: 6px 0 4px !important;
  line-height: 1.05 !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: none !important;
}
body.v4 .studio-display-strong { font-weight: 800 !important; color: var(--on-accent) !important; }
body.v4 .studio-display-soft   { font-weight: 400 !important; color: rgba(255,255,255,0.65) !important; }

/* Sub alias */
body.v4 .cadence-hero-sub,
body.v4 .money-hero-sub,
body.v4 .money-hero-meta,
body.v4 .sp-opener p {
  font-size: 14.5px !important;
  color: rgba(255,255,255,0.78) !important;
  margin: 4px 0 0 !important;
  max-width: 760px !important;
}

/* Money-tiles glass conversion - stat row inside the hero */
body.v4 .money-tiles {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 10px !important;
  margin-top: 16px !important;
}
/* Batch 6 ROOT CAUSE (recurring white-on-grey on Invoices / P&L / Budget):
   this block styled the tiles as glass-on-DARK (white text), but on every
   money page .money-tiles is a SIBLING of the dark .money-hero - the tiles
   sit on the light canvas. The Wave-179 ink fix lower down kept losing on
   specificity (.money-tile .money-tile-value beats .money-tile-value).
   Fixed at the source: light glass tiles, readable ink. */
body.v4 .money-tile {
  padding: 14px 16px !important;
  background: rgba(255,255,255,0.55) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: var(--r) !important;
  color: var(--g-ink-1) !important;
}
body.v4 .money-tile .money-tile-eyebrow,
body.v4 .money-tile .lbl {
  font-family: var(--g-fd) !important;
  font-size: 10px !important;
  color: var(--g-ink-3) !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}
body.v4 .money-tile .money-tile-value,
body.v4 .money-tile .val {
  font-family: var(--g-fd) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--g-ink-1) !important;
  letter-spacing: -0.022em !important;
  margin-top: 4px !important;
  line-height: 1 !important;
}
body.v4 .money-tile .money-tile-sub,
body.v4 .money-tile .sub {
  font-size: 11.5px !important;
  color: var(--g-ink-4) !important;
  margin-top: 4px !important;
}
/* Tone accents stay as quiet light surfaces (consistent with the rest of
   the app's plain-panel direction), not standalone coloured cards. */
body.v4 .money-tile.mint,
body.v4 .money-tile.butter,
body.v4 .money-tile.cherry,
body.v4 .money-tile.lilac { background: rgba(255,255,255,0.55) !important; }

/* Cadence-hero stat rows (Social, Newsletter, Community) */
body.v4 .cadence-hero + .grid,
body.v4 .cadence-hero + .grid-4 { margin-top: -2px; }
body.v4 .cadence-hero .stat-tile {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.08) !important;
}
body.v4 .cadence-hero .stat-tile .stat-tile-eyebrow {
  color: rgba(255,255,255,0.55) !important;
}
body.v4 .cadence-hero .stat-tile .stat-tile-value {
  color: var(--on-accent) !important;
}

/* sp-banner (Sponsors recovery alert) - keep its cherry accent but reskin */
body.v4 .sp-banner {
  background: rgba(184,0,43,0.06) !important;
  border: 1px solid rgba(184,0,43,0.18) !important;
  border-left: 1px solid rgba(184,0,43,0.18) !important;
  border-radius: 14px !important;
  padding: 16px 18px !important;
  color: var(--g-ink-1) !important;
}

/* Studio: keep the .studio-week wrapper plain; only the eye+display
   inside it form the hero. So scope properly. */
body.v4 .studio-week {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.v4 .studio-week > .studio-eye {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   WAVE 73 · .ep-tabs → .tabs alias (Show Builder, Guests, Production)
   .ep-tabs renders as the canonical glass-pill .tabs strip.
   ═══════════════════════════════════════════════════════════════════ */
body.v4 .ep-tabs {
  display: inline-flex !important;
  background: rgba(255,255,255,0.78) !important;
  backdrop-filter: blur(20px);
  border: 1px solid var(--g-border, rgba(0,0,0,0.06)) !important;
  border-radius: var(--r-pill) !important;
  padding: 4px !important;
  margin: 0 0 14px !important;
  gap: 0 !important;
}
body.v4 .ep-tab {
  background: transparent !important;
  border: none !important;
  font-family: var(--g-fd) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  padding: 6px 14px !important;
  border-radius: var(--r-pill) !important;
  cursor: pointer !important;
  color: var(--g-ink-3) !important;
  letter-spacing: -0.005em !important;
  transition: all 0.18s var(--g-ease) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
body.v4 .ep-tab:hover { color: var(--g-ink-1) !important; }
body.v4 .ep-tab.active {
  background: var(--g-ink) !important;
  color: var(--on-accent) !important;
  font-weight: 600 !important;
}
body.v4 .ep-tab-badge {
  font-size: 10px !important;
  background: rgba(0,0,0,0.06) !important;
  color: var(--g-ink-3) !important;
  padding: 1px 7px !important;
  border-radius: var(--r-pill) !important;
  font-weight: 700 !important;
  font-family: var(--g-fd) !important;
}
body.v4 .ep-tab.active .ep-tab-badge {
  background: rgba(255,255,255,0.2) !important;
  color: var(--on-accent) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   WAVE 74 · .task-empty → .empty-inline alias
   Every remaining "No results" plain-text empty becomes the canonical
   icon + title + sub vocabulary. JS that emits .task-empty just needs
   to wrap content in two lines (title + sub) for it to feel right.
   ═══════════════════════════════════════════════════════════════════ */
body.v4 .task-empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px 16px !important;
  gap: 4px !important;
  text-align: center !important;
  color: var(--g-ink-3) !important;
  font-size: 12.5px !important;
  font-style: normal !important;
  background: transparent !important;
  border: none !important;
}
body.v4 .task-empty::before {
  content: "";
  display: block;
  width: 22px; height: 22px;
  margin-bottom: 2px;
  opacity: 0.5;
  background: var(--g-ink-4);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M8 12h8'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M8 12h8'/></svg>") center/contain no-repeat;
}
body.v4 .task-empty.err {
  color: var(--g-cherry) !important;
}
body.v4 .task-empty.err::before {
  background: var(--g-cherry);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 9v4m0 4h.01'/><circle cx='12' cy='12' r='10'/></svg>") center/contain no-repeat;
}

/* ═══════════════════════════════════════════════════════════════════
   WAVE 80 · Dashboard calendar polish
   80.1 List view button dropped from shell
   80.2 Week chips carry an explicit kind tag + legend above grid
   80.3 My-calendar toggle restored next to mode buttons
   80.4 Team rows: dot on the right, red/green status, no "clear" text
   ═══════════════════════════════════════════════════════════════════ */

/* 80.2 - kind tag pill on every week chip + legend strip above grid */
body.v4 .c-week-legend {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 8px 12px;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(20px);
  border: 1px solid var(--g-border);
  border-radius: var(--r-pill);
  font-size: 11px;
  color: var(--g-ink-3);
  width: fit-content;
}
body.v4 .c-week-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
body.v4 .c-week-kind {
  font-family: var(--g-fd);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 1.5px 5px;
  border-radius: 4px;
  margin-right: 4px;
  text-transform: uppercase;
  vertical-align: middle;
}
body.v4 .c-week-kind.rec  { background: var(--g-cherry-bg); color: var(--g-cherry); }
body.v4 .c-week-kind.rel  { background: var(--g-green-bg);  color: var(--g-green);  }
body.v4 .c-week-kind.released { background: rgba(0,0,0,0.06); color: var(--g-ink-3); }
body.v4 .c-week-kind.busy { background: var(--g-lilac-bg);  color: var(--g-lilac);  }

/* Wave 124 - Week view release chip flips to grey-text once released */
body.v4 .c-week-item.publish.released {
  background: rgba(0, 0, 0, 0.06) !important;
  color: var(--g-ink-3) !important;
}
body.v4 .c-week-item.publish.released .t { color: var(--g-ink-4) !important; }

/* Wave 124 - Proposed release banner inside the Scheduled pane.
   Sits between the headline and the date inputs as a quiet blue card. */
body.v4 .ep-proposed-banner {
  background: rgba(0, 113, 227, 0.05);
  border: 1px solid rgba(0, 113, 227, 0.18);
  border-radius: var(--r);
  padding: 14px 16px;
  margin: 14px 0 18px;
}
body.v4 .ep-proposed-banner-eye {
  font-family: var(--g-fd);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g-blue);
  margin-bottom: 8px;
}
body.v4 .ep-proposed-banner-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
body.v4 .ep-proposed-banner-text { flex: 1; min-width: 220px; }
body.v4 .ep-proposed-banner-date {
  font-family: var(--g-fd);
  font-size: 16px;
  font-weight: 700;
  color: var(--g-ink-1);
  letter-spacing: -0.015em;
}
body.v4 .ep-proposed-banner-sub {
  font-size: 12px;
  color: var(--g-ink-3);
  margin-top: 4px;
  line-height: 1.4;
}
body.v4 .ep-proposed-banner-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* 80.3 - My-calendar source toggle (was hidden) */
body.v4 .wk-cal-sources {
  display: inline-flex !important;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--g-border);
  border-radius: var(--r-pill);
  padding: 3px;
  gap: 0;
  margin-right: 8px;
}
body.v4 .wk-cal-source {
  background: transparent;
  border: none;
  font-family: var(--g-fd);
  font-size: 11.5px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  cursor: pointer;
  color: var(--g-ink-3);
  letter-spacing: -0.005em;
  transition: all 0.18s var(--g-ease);
}
body.v4 .wk-cal-source:hover { color: var(--g-ink-1); }
body.v4 .wk-cal-source.active {
  background: var(--g-ink-1);
  color: var(--on-accent);
  font-weight: 600;
}

/* 80.4 - Team rows: right-aligned dot, red/green semantic */
body.v4 .team-row {
  display: grid !important;
  /* Wave 173 - 4 columns: avatar · info · status dot · chat icon.
     The chat icon column was missing, so it wrapped onto its own row
     below each team member. */
  grid-template-columns: 32px 1fr auto auto !important;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
}
body.v4 .team-row .team-row-clear { display: none !important; }
body.v4 .team-row .team-status-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--g-ink-4);
  /* margin-left: auto removed - the grid auto column on the right
     already pushes the dot toward the chat icon. */
  flex-shrink: 0;
}
/* Chat icon sits in column 4, directly to the right of the dot.
   Margin-left:8px on .team-chat-icon already gives breathing room. */
body.v4 .team-row .team-chat-icon { margin-left: 4px; }
body.v4 .team-row .team-status-dot.online  { background: var(--g-green); box-shadow: 0 0 0 3px rgba(47,133,90,0.12); }
/* Wave 101 - offline is neutral, not alarm. Grey dot with a faint halo
   matches the "they're just not here right now" vibe - cherry was reading
   as "something's wrong with this person". */
body.v4 .team-row .team-status-dot.offline { background: rgba(60, 60, 67, 0.35); box-shadow: 0 0 0 3px rgba(60, 60, 67, 0.10); }

/* ═══════════════════════════════════════════════════════════════════
   WAVE 81 · Episode popup tab-by-tab polish
   ═══════════════════════════════════════════════════════════════════ */

/* 81.2 / 81.7 - clickable AI artifact row */
body.v4 .epp2-ai-row.is-clickable {
  cursor: pointer;
  transition: border-color 0.18s var(--g-ease), background 0.18s var(--g-ease);
}
body.v4 .epp2-ai-row.is-clickable:hover {
  border-color: var(--g-blue) !important;
  background: rgba(0, 113, 227, 0.04) !important;
}
body.v4 .epp2-ai-row-chev {
  font-family: var(--g-fd);
  font-size: 14px;
  color: var(--g-ink-4);
  margin-left: 6px;
  transition: transform 0.18s var(--g-ease), color 0.18s var(--g-ease);
}
body.v4 .epp2-ai-row.is-clickable:hover .epp2-ai-row-chev {
  color: var(--g-blue);
  transform: translateX(2px);
}

/* 81.3 - file inputs styled as proper buttons.
   Wrap a native input[type=file] in label.btn-file; the input is hidden
   off-screen but still receives the click via the label. */
body.v4 .btn-file {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--g-fd);
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: var(--g-surface);
  color: var(--g-ink-1);
  border: 1px solid var(--g-rule);
  cursor: pointer;
  transition: all 0.18s var(--g-ease);
  letter-spacing: -0.005em;
}
body.v4 .btn-file:hover {
  border-color: var(--g-ink-3);
  background: rgba(255,255,255,0.95);
}
body.v4 .btn-file input[type="file"] {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* 81.4 - Booked pane breathing room between rows */
body.v4 .ep-booking-box .ep-field-row,
body.v4 .epp2-section .ep-field-row { margin-bottom: 14px !important; }
body.v4 .ep-booking-box .ep-field,
body.v4 .epp2-section .ep-field { margin-bottom: 14px !important; }
body.v4 .ep-booking-box .ep-toggle-field { margin: 18px 0 !important; }
body.v4 .ep-booking-box #ep-additional-guests-host { margin-top: 18px !important; }

/* 81.8 - "Open YouTube analytics" placeholder button */
body.v4 .epp2-info .btn-link-cta {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  font-family: var(--g-fd);
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: var(--g-blue);
  color: var(--on-accent) !important;
  border: 1px solid transparent;
  text-decoration: none !important;
  margin-top: 12px;
  transition: background 0.18s var(--g-ease);
}
body.v4 .epp2-info .btn-link-cta:hover { background: #0058b1; text-decoration: none !important; }

/* ═══════════════════════════════════════════════════════════════════
   WAVE 82 · Inline AI row expanders (dossier + topics)
   ═══════════════════════════════════════════════════════════════════ */
body.v4 .epp2-inline-panel {
  background: rgba(0, 113, 227, 0.04);
  border: 1px solid rgba(0, 113, 227, 0.14);
  border-radius: 14px;
  padding: 14px 16px;
  margin: -4px 0 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
body.v4 .epp2-inline-sub {
  background: var(--g-surface);
  border: 1px solid var(--g-rule);
  border-radius: 10px;
  overflow: hidden;
}
body.v4 .epp2-inline-sub-eye {
  font-family: var(--g-fd);
  font-size: 10px;
  font-weight: 700;
  color: var(--g-blue);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 14px 6px;
}
body.v4 .epp2-inline-sub-body { padding: 4px 4px 8px; }
body.v4 .epp2-inline-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  padding: 6px 14px;
  font-size: 12.5px;
}
body.v4 .epp2-inline-row-l {
  font-family: var(--g-fd);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--g-ink-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
body.v4 .epp2-inline-row-v { color: var(--g-ink-1); }
body.v4 .epp2-inline-item {
  display: block;
  padding: 8px 14px;
  text-decoration: none;
  color: inherit;
  border-top: 1px solid rgba(0,0,0,0.04);
}
body.v4 .epp2-inline-item:first-child { border-top: none; }
body.v4 .epp2-inline-item:hover { background: rgba(0, 113, 227, 0.04); }
body.v4 .epp2-inline-item-t {
  font-family: var(--g-fd);
  font-size: 13px;
  font-weight: 600;
  color: var(--g-ink-1);
  letter-spacing: -0.005em;
}
body.v4 .epp2-inline-item-meta { color: var(--g-ink-4); font-weight: 500; }
body.v4 .epp2-inline-item-s {
  font-size: 11.5px;
  color: var(--g-ink-3);
  margin-top: 2px;
}
body.v4 .epp2-inline-sub-more {
  padding: 6px 14px;
  font-size: 11.5px;
  color: var(--g-ink-4);
  font-style: italic;
}
body.v4 .epp2-inline-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--g-ink-4);
  padding-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════════
   WAVE 83 · Promote button capitalisation + sizing
   The popup footer primary CTAs (Save & Promote to Booked, etc) felt
   squashed. Bump padding + size so the verb-first label breathes.
   ═══════════════════════════════════════════════════════════════════ */
body.v4 .ep-modal-foot .btn-primary,
body.v4 .ep-modal-foot .btn-v4.btn-primary {
  padding: 10px 22px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em;
  line-height: 1.2 !important;
}
body.v4 .ep-modal-foot .btn-secondary,
body.v4 .ep-modal-foot .btn-v4.btn-secondary {
  padding: 10px 18px !important;
  font-size: 13.5px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   WAVE 84 · "+ New owner" modal radios
   ═══════════════════════════════════════════════════════════════════ */
body.v4 .epp2-emp-radio {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--g-surface);
  border: 1px solid var(--g-rule);
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--g-fd);
  font-size: 13px;
  font-weight: 500;
  color: var(--g-ink-2);
  transition: all 0.18s var(--g-ease);
}
body.v4 .epp2-emp-radio:hover {
  border-color: var(--g-ink-3);
}
body.v4 .epp2-emp-radio:has(input:checked) {
  border-color: var(--g-blue);
  background: rgba(0, 113, 227, 0.06);
  color: var(--g-blue);
  font-weight: 600;
}
body.v4 .epp2-emp-radio input[type="radio"] {
  accent-color: var(--g-blue);
  margin: 0;
}

/* ─── Wave 93 - Settings · Team staff editor ───────────────── */
body.v4 .staff-row {
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--g-border);
  border-radius: var(--r);
  align-items: center;
  backdrop-filter: var(--g-blur-1);
  -webkit-backdrop-filter: var(--g-blur-1);
}
body.v4 .staff-row strong { font-family: var(--g-fd); }

body.v4 .staff-modal {
  max-width: 760px !important;
  width: calc(100vw - 48px);
  max-height: calc(100vh - 64px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
body.v4 .staff-modal-pane {
  padding: 22px 28px !important;
  overflow-y: auto;
  flex: 1;
}
/* Wave 96 - breathing room between the two field rows in the staff
   editor (name+email above, role+employment below). The default
   .ep-field-row stack is too tight for a small modal. */
body.v4 .staff-modal-pane .ep-field-row + .ep-field-row {
  margin-top: 14px;
}

body.v4 .staff-emp-radio {
  display: flex;
  gap: 18px;
  padding-top: 8px;
}
body.v4 .staff-emp-radio label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  cursor: pointer;
  color: var(--g-ink-1);
}
body.v4 .staff-emp-radio input[type="radio"] {
  accent-color: var(--g-blue);
  margin: 0;
}

body.v4 .staff-admin-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 16px;
  padding: 12px 14px;
  background: rgba(0, 113, 227, 0.05);
  border: 1px solid rgba(0, 113, 227, 0.15);
  border-radius: var(--r);
  cursor: pointer;
}
body.v4 .staff-admin-row input[type="checkbox"] {
  accent-color: var(--g-blue);
  width: 18px;
  height: 18px;
  margin: 2px 0 0 0;
}

body.v4 .staff-perm-section {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
body.v4 .staff-perm-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
body.v4 .staff-perm-group {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--g-border);
  border-radius: var(--r);
  padding: 12px 14px;
}
body.v4 .staff-perm-group-title {
  font-family: var(--g-fd);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g-ink-3);
  margin-bottom: 8px;
}
body.v4 .staff-perm-list {
  display: flex;
  flex-direction: column;
}
body.v4 .staff-perm-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 13.5px;
  color: var(--g-ink-1);
  cursor: pointer;
  user-select: none;
}
body.v4 .staff-perm-row.always { color: var(--g-ink-3); }
body.v4 .staff-perm-label { flex: 1; }
body.v4 .staff-perm-hint {
  font-size: 10.5px;
  color: var(--g-ink-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Blue tick boxes - the bit Peter explicitly asked for. */
body.v4 .staff-perm-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid rgba(0, 0, 0, 0.18);
  border-radius: 5px;
  background: var(--g-surface);
  display: inline-block;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
body.v4 .staff-perm-row input[type="checkbox"]:hover:not(:disabled) {
  border-color: var(--g-blue);
}
body.v4 .staff-perm-row input[type="checkbox"]:checked {
  background: var(--g-blue);
  border-color: var(--g-blue);
}
body.v4 .staff-perm-row input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
body.v4 .staff-perm-row input[type="checkbox"]:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

@media (max-width: 720px) {
  body.v4 .staff-perm-grid { grid-template-columns: 1fr; }
}

/* ─── Wave 103 / Wave 112 - Upload modal file-selected pill ───
   Two-row layout: top row holds the paperclip + truncated filename
   + clear ×. Bottom row holds a small meta line ("size · ready").
   Truncation on the filename means even huge filenames stay on a
   single line and the pill never balloons or wraps word-by-word. */
body.v4 .ck-upload-selected {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: var(--g-blue-bg, rgba(0, 113, 227, 0.08));
  border: 1px solid rgba(0, 113, 227, 0.18);
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--g-ink-1);
  line-height: 1.4;
}
body.v4 .ck-upload-selected-top {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
body.v4 .ck-upload-selected-icon {
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}
body.v4 .ck-upload-selected-name {
  font-weight: 600;
  color: var(--g-ink-1);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.v4 .ck-upload-selected-meta {
  color: var(--g-ink-3);
  font-size: 11.5px;
  padding-left: 22px;  /* aligns with the filename column (icon 14px + 8px gap) */
}
body.v4 .ck-upload-selected-clear {
  background: transparent;
  border: none;
  color: var(--g-ink-3);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 6px;
  flex-shrink: 0;
}
body.v4 .ck-upload-selected-clear:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--g-ink-1);
}

/* ─── Wave 107 - Checklist upload pill on its own row ────────── */
/* When a row has an uploaded file, the file pill + replace button
   move to a second row beneath the main row. Prevents the main row's
   owner pill from overlapping the wrapped label. */
body.v4 .ck-row.has-upload .ck-row-main {
  /* Main row keeps its tight flex shape - no upload UI to crowd it. */
}
body.v4 .ck-row-upload {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px 10px 38px;  /* Left padding aligns with the .ck-label
                                column (checkbox is 20px + 10px gap + 8px row padding). */
  flex-wrap: wrap;
}
body.v4 .ck-row-upload .ck-file-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 10px;
  border-radius: var(--r-pill);
  font-size: 12px;
  max-width: 100%;
  min-width: 0;
}
body.v4 .ck-row-upload .ck-file-pill-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 320px;
}

/* ─── Wave 107 - Modal footer always visible ────────────────── */
/* The episode popup footer should stay pinned at the bottom of the
   modal regardless of pane height - otherwise on a tall Hot Prospect
   pane the Create / Create and Close buttons fall below the visible
   area. The pane scrolls; the footer doesn't. */
body.v4 .ep-modal {
  display: flex;
  flex-direction: column;
}
body.v4 .ep-modal-split {
  flex: 1;
  min-height: 0;
}
body.v4 .ep-modal-right {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
body.v4 .ep-modal-pane {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
body.v4 .ep-modal-foot {
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: var(--g-blur-1);
  -webkit-backdrop-filter: var(--g-blur-1);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  position: sticky;
  bottom: 0;
  z-index: 2;
}

/* ─── Wave 107 - Guest autocomplete dropdown z-index inside popup ───
   The popup has its own stacking context (backdrop-filter) and the
   pane is now overflow:auto for sticky footer. Push the dropdown above
   everything so it can't get hidden behind sibling fields or clipped
   by the pane scroll. */
body.v4 .ep-modal-pane .ga-list,
body.v4 .ga-list {
  z-index: 100;
}

/* ─── Wave 143 - AI Chief of Staff config tiles ───────────────
   The four CEO config tiles (Memory Spine, Master Prompt, Subagent
   Discipline, Security Posture) had two layout problems:

   1. A faint horizontal line sat at the bottom of every tile because
      `.ceo-tile-foot` carried a `border-top` + a tinted background. It
      looked like a stray divider drawn for no reason - the foot is
      already implicitly separated by being the last row of content.

   2. The foot contained two inline spans (stat / badge on the left,
      "View →" pill on the right) with no flex container. Long stat
      strings ("8/8 controls in place · 2 missing") pushed the View pill
      into a wrap or squashed it against the right edge.

   This wave restructures the foot as a clean flex row: stat truncates
   with ellipsis on the left, "View →" sits flush right as a quiet text
   link (not a pill button - pill styling came from the shared chrome
   rule and was visually heavy for what is effectively a "more" link). */
body.v4 .ceo-tile-foot {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 14px 20px !important;
  border-top: none !important;
  background: transparent !important;
  margin-top: 0 !important;
  padding-top: 14px !important;
}
body.v4 .ceo-tile-foot .ceo-tile-stat,
body.v4 .ceo-tile-foot .ceo-tile-badge {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: var(--g-ink-4) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* "View →" as a quiet right-aligned link, not a pill. Specificity beats
   the shared `.ceo-tile-cta` chrome rule at line ~2610. */
body.v4 .ceo-tile .ceo-tile-cta,
body.v4 .ceo-tile-foot .ceo-tile-cta {
  flex: 0 0 auto !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--g-blue) !important;
  white-space: nowrap !important;
  cursor: pointer;
}
body.v4 .ceo-tile:hover .ceo-tile-cta {
  color: var(--g-blue) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* ─── Wave 144 - Chat: iMessage-style row layout ──────────────
   Peter asked for messages to flow like iMessage: his replies on the
   right, the AI director's replies on the left. The renderer now tags
   each row with .me (Peter) or .ai (director); this block flips the row
   for `.me`, gives each side a bubble with appropriate colour, caps
   bubble width so long replies don't span the full pane. */
body.v4 .chat2-msg {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  width: 100%;
}
body.v4 .chat2-msg.me { flex-direction: row-reverse !important; }
body.v4 .chat2-msg-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 78%;
}
body.v4 .chat2-msg.me .chat2-msg-col { align-items: flex-end; }
body.v4 .chat2-msg.ai .chat2-msg-col { align-items: flex-start; }

body.v4 .chat2-msg-meta {
  font-size: 11.5px !important;
  color: var(--g-ink-3) !important;
  margin-bottom: 4px !important;
  font-weight: 500 !important;
  padding: 0 4px;
}
body.v4 .chat2-msg.ai .chat2-msg-meta {
  color: var(--g-blue) !important;
  font-weight: 600 !important;
}

body.v4 .chat2-msg-bubble {
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--g-ink-1);
  padding: 10px 14px;
  border-radius: 18px;
  white-space: pre-wrap;
  word-wrap: break-word;
  border: 1px solid transparent;
}
/* Peter's bubble - cherry (matches the brand) with white text */
body.v4 .chat2-msg.me .chat2-msg-bubble {
  background: var(--g-cherry);
  color: var(--on-accent);
  border-bottom-right-radius: 6px; /* iMessage-style tail corner */
}
/* AI director's bubble - soft frosted card */
body.v4 .chat2-msg.ai .chat2-msg-bubble {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom-left-radius: 6px;
}
/* Draft block (email composer view) stays inside the bubble flow */
body.v4 .chat2-msg.me .chat2-msg-draft {
  background: rgba(255, 255, 255, 0.18);
  color: var(--on-accent);
}
/* Action chips align to the same side as the bubble */
body.v4 .chat2-msg.me .chat2-msg-actions { justify-content: flex-end; }

/* ─── Wave 144 - Chat: save name modal input ──────────────────
   Single line input inside the .aiceo-modal-body. Frosted, focus ring
   matches the rest of the form fields in the app. */
body.v4 .chat-save-input {
  width: 100%;
  font-family: var(--g-f);
  font-size: 14px;
  color: var(--g-ink-1);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  padding: 11px 14px;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
body.v4 .chat-save-input:focus {
  border-color: var(--g-blue);
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15);
}

/* ─── Wave 145 - Chat: saved-thread pager ─────────────────────
   The sidebar list of saved chats now pages 10 at a time. Prev / Next
   sit underneath the list as quiet ghost chips, with a page counter
   between them. Buttons grey out on the first / last page. */
body.v4 .chat2-archive-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
body.v4 .chat2-pagebtn {
  font-family: var(--g-f);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--g-blue);
  background: transparent;
  border: none;
  padding: 4px 6px;
  cursor: pointer;
  border-radius: 6px;
  transition: background 120ms ease, color 120ms ease;
}
body.v4 .chat2-pagebtn:hover:not(:disabled) {
  background: rgba(0, 113, 227, 0.08);
}
body.v4 .chat2-pagebtn:disabled {
  color: var(--g-ink-4);
  cursor: not-allowed;
}
body.v4 .chat2-pagebtn-meta {
  font-size: 10.5px;
  color: var(--g-ink-4);
  font-variant-numeric: tabular-nums;
}

/* ─── Wave 146 - Global search spotlight panel ───────────────
   Topbar search now opens a categorised dropdown as you type. Panel
   floats below the input (position:fixed, body-attached so it can
   escape any topbar overflow:hidden). Six categories: Shows, On The
   Mic, On The Radar, Bankrolling It, The Crew, Jump To - each with
   a coloured pill heading that reuses the existing token palette. */
body.v4 .gsearch-panel {
  position: fixed;
  z-index: 9999;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 24px 64px rgba(0, 0, 0, 0.18);
  max-height: 72vh;
  overflow-y: auto;
  font-family: var(--g-f);
}
body.v4 .gsearch-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 22px;
  color: var(--g-ink-3);
  font-size: 13px;
}
body.v4 .gsearch-spinner {
  width: 14px; height: 14px;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-top-color: var(--g-blue);
  border-radius: 50%;
  animation: gsearch-spin 700ms linear infinite;
}
@keyframes gsearch-spin {
  to { transform: rotate(360deg); }
}
body.v4 .gsearch-empty {
  padding: 22px;
  color: var(--g-ink-2);
  font-size: 13.5px;
}
body.v4 .gsearch-empty-sub {
  margin-top: 6px;
  font-size: 12px;
  color: var(--g-ink-4);
}
body.v4 .gsearch-results { padding: 8px 0 4px; }
body.v4 .gsearch-group { padding: 4px 0 6px; }
body.v4 .gsearch-group + .gsearch-group {
  border-top: 1px solid rgba(0, 0, 0, 0.04);
  margin-top: 4px;
  padding-top: 8px;
}
body.v4 .gsearch-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px 4px;
}
body.v4 .gsearch-group-count {
  font-size: 10.5px;
  color: var(--g-ink-4);
  font-variant-numeric: tabular-nums;
}

/* Category chips - coloured pills using the existing pastel tokens. */
body.v4 .gsearch-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: var(--g-fd);
  border: 1px solid transparent;
}
body.v4 .gsearch-chip-cherry { background: rgba(184, 0, 43, 0.10); color: var(--g-cherry); border-color: rgba(184, 0, 43, 0.20); }
body.v4 .gsearch-chip-mint   { background: rgba(47, 133, 90, 0.13); color: var(--g-green); border-color: rgba(47, 133, 90, 0.22); }
body.v4 .gsearch-chip-peach  { background: rgba(217, 119, 6, 0.12); color: #b45309;                  border-color: rgba(217, 119, 6, 0.22); }
body.v4 .gsearch-chip-butter { background: rgba(180, 130, 0, 0.13); color: #8a6300;                  border-color: rgba(180, 130, 0, 0.22); }
body.v4 .gsearch-chip-sky    { background: rgba(58, 132, 220, 0.13); color: var(--sky-fg); border-color: rgba(58, 132, 220, 0.22); }
body.v4 .gsearch-chip-lilac  { background: rgba(94, 92, 230, 0.12); color: var(--g-lilac); border-color: rgba(94, 92, 230, 0.22); }

body.v4 .gsearch-rows {
  display: flex;
  flex-direction: column;
}
body.v4 .gsearch-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 18px;
  cursor: pointer;
  text-decoration: none;
  color: var(--g-ink-1);
  transition: background 100ms ease;
  border-left: 2px solid transparent;
}
body.v4 .gsearch-row:hover {
  background: rgba(0, 113, 227, 0.05);
  border-left-color: var(--g-blue);
}
body.v4 .gsearch-row-main {
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.008em;
  color: var(--g-ink-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.v4 .gsearch-row-prefix {
  color: var(--g-ink-4);
  font-variant-numeric: tabular-nums;
  margin-right: 4px;
  font-weight: 600;
}
body.v4 .gsearch-row-sub {
  font-size: 11.5px;
  color: var(--g-ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: capitalize;
}
body.v4 .gsearch-footer {
  display: flex;
  justify-content: space-between;
  padding: 9px 18px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  font-size: 11px;
  color: var(--g-ink-4);
  background: rgba(0, 0, 0, 0.012);
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}
body.v4 .gsearch-hint { font-variant: small-caps; letter-spacing: 0.04em; }

/* ─── Wave 147 - Director findings card redesign ─────────────
   Each card was a giant empty rectangle until clicked, with raw
   markdown spilling out when opened. New layout:

   COLLAPSED: dense single row - chevron · title + status · one-line
   peek of the brief/output · meta strip (type · time · word count).
   You can scan the feed without opening anything.

   EXPANDED: rendered prose (h1-h4 + bold/italic/lists), brief sits
   in a tinted strip above so it's clear what was asked. */
/* Deep-link flash when arriving from a research-email link */
@keyframes findingFlash { 0%{ box-shadow: 0 0 0 3px rgba(0,113,227,.45); } 100%{ box-shadow: 0 0 0 3px rgba(0,113,227,0); } }
body.v4 .finding-card-v2.finding-flash { animation: findingFlash 1.6s ease-out; }
body.v4 .finding-card-v2 {
  background: rgba(255, 255, 255, 0.70);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
body.v4 .finding-card-v2:hover {
  border-color: rgba(0, 0, 0, 0.10);
  box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 8px 24px rgba(0,0,0,0.06);
}
body.v4 .finding-card-v2.awaiting {
  border-color: rgba(180, 130, 0, 0.30);
  background: rgba(255, 248, 230, 0.65);
}

/* Header row - flex grid: chevron / body / meta. */
body.v4 .finding-row {
  all: unset;
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 18px;
  cursor: pointer;
  box-sizing: border-box;
}
body.v4 .finding-chev {
  display: inline-block;
  font-family: var(--g-fd);
  font-size: 18px;
  font-weight: 400;
  color: var(--g-ink-4);
  line-height: 1;
  transform: rotate(0deg);
  transition: transform 160ms ease;
}
body.v4 .finding-card-v2.is-open .finding-chev { transform: rotate(90deg); }

body.v4 .finding-row-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
body.v4 .finding-row-top {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
body.v4 .finding-title {
  font-family: var(--g-fd);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--g-ink-1);
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.v4 .finding-peek {
  font-size: 12.5px;
  color: var(--g-ink-3);
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
body.v4 .finding-row-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--g-ink-4);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}
body.v4 .finding-row-meta span + span::before {
  content: '·';
  margin-right: 10px;
  color: var(--g-ink-5, rgba(0,0,0,0.18));
}

/* Status pill - already styled at the page level, but tighten the
   sizing so it fits inline with the title rather than wrapping. */
body.v4 .finding-row .finding-status {
  padding: 2px 9px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  flex-shrink: 0;
}

/* Body - the expanded pane. */
body.v4 .finding-body-v2 {
  padding: 4px 18px 18px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
body.v4 .finding-brief {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(0, 113, 227, 0.06);
  border-left: 2px solid var(--g-blue);
  border-radius: var(--r-sm);
  margin: 14px 0;
  font-size: 12.5px;
  color: var(--g-ink-2);
}
body.v4 .finding-brief-lbl {
  font-family: var(--g-fd);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--g-blue);
  flex-shrink: 0;
}

/* Rendered prose - the markdown output. Sized down from a generic
   article style so it fits inside a card without dominating. */
body.v4 .finding-prose {
  font-size: 14px;
  line-height: 1.65;
  color: var(--g-ink-1);
  letter-spacing: -0.003em;
}
body.v4 .finding-prose > *:first-child { margin-top: 0; }
body.v4 .finding-prose > *:last-child  { margin-bottom: 0; }
body.v4 .finding-prose h1,
body.v4 .finding-prose h2 {
  font-family: var(--g-fd);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--g-ink-1);
  margin: 22px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
body.v4 .finding-prose h3 {
  font-family: var(--g-fd);
  font-size: 14px;
  font-weight: 700;
  color: var(--g-ink-1);
  margin: 18px 0 4px;
}
body.v4 .finding-prose h4 {
  font-family: var(--g-fd);
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--g-blue);
  margin: 16px 0 4px;
}
body.v4 .finding-prose p   { margin: 8px 0; }
body.v4 .finding-prose ul,
body.v4 .finding-prose ol  { margin: 8px 0 8px 22px; padding: 0; }
body.v4 .finding-prose li  { margin: 4px 0; }
body.v4 .finding-prose strong { font-weight: 700; color: var(--g-ink-1); }
body.v4 .finding-prose em     { font-style: italic; color: var(--g-ink-2); }
body.v4 .finding-prose code {
  font-family: 'SF Mono', Monaco, monospace;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.05);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--g-ink-1);
}

/* ─── Wave 148 - Topbar user pill rollover menu ──────────────
   The user pill (.topbar-user) used to be a div + sibling "Sign out"
   button. Now it's a real <button> that toggles a dropdown holding
   Settings + Sign out. Use a chevron to signal it's actionable. */
body.v4 button.topbar-user {
  appearance: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  /* Keep the existing pill chrome from line 2117. The button just inherits. */
}
body.v4 button.topbar-user:hover {
  background: rgba(255, 255, 255, 0.78) !important;
  border-color: rgba(255, 255, 255, 0.95) !important;
}
body.v4 button.topbar-user.is-open {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: var(--g-blue) !important;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.12);
}
body.v4 .topbar-user-chev {
  color: var(--g-ink-4);
  font-size: 9px;
  line-height: 1;
  margin-left: 4px;
  transition: transform 160ms ease;
}
body.v4 button.topbar-user.is-open .topbar-user-chev {
  transform: rotate(180deg);
  color: var(--g-blue);
}

/* The dropdown itself sits below the pill. position:absolute relative to
   the topbar so it tracks scroll without escaping the app shell. */
body.v4 .topbar-actions { position: relative; }
body.v4 .topbar-user-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--r);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 16px 40px rgba(0,0,0,0.14);
  padding: 6px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body.v4 .topbar-user-menu[hidden] { display: none; }
body.v4 .topbar-user-menu-item {
  all: unset;
  display: block;
  font-family: var(--g-f);
  font-size: 13px;
  color: var(--g-ink-1);
  padding: 9px 14px;
  border-radius: var(--r-sm);
  cursor: pointer;
  text-decoration: none;
}
body.v4 .topbar-user-menu-item:hover {
  background: rgba(0, 113, 227, 0.08);
  color: var(--g-blue);
}
body.v4 .topbar-user-menu-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.06);
  margin: 4px 6px;
}

/* ─── Wave 148 - Avatar image fallback ───────────────────────
   When a team member has uploaded an avatar, .av-has-img replaces
   the initials chip with a background-image. Keeps the round chip
   shape + sizing from .av so existing layouts don't shift. */
body.v4 .av.av-has-img {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat;
  color: transparent !important;
  text-indent: -9999px;
}
body.v4 .topbar-avatar[style*="background-image"] {
  /* When the topbar avatar shows an uploaded image, hide the initials
     text (which we leave in the DOM as a fallback for assistive tech). */
  background-size: cover !important;
  background-position: center !important;
}

/* ─── Wave 148 - Settings: My profile + Email subscriptions ──
   Both panes share frosted-card styling consistent with the rest of
   the Settings sections. Use the standard token palette only. */

/* My profile - avatar preview + upload row */
body.v4 .prof-row {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
body.v4 .prof-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--g-blue);
  color: var(--on-accent);
  display: grid;
  place-items: center;
  font-family: var(--g-fd);
  font-size: 32px;
  font-weight: 700;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 14px rgba(0,0,0,0.08);
}
body.v4 .prof-avatar-initials { background: var(--g-blue); }
body.v4 .prof-info { flex: 1; min-width: 0; }
body.v4 .prof-name {
  font-family: var(--g-fd);
  font-size: 18px;
  font-weight: 700;
  color: var(--g-ink-1);
  letter-spacing: -0.012em;
}
body.v4 .prof-email {
  font-size: 13px;
  color: var(--g-ink-3);
  margin-top: 2px;
}
body.v4 .prof-role {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--g-blue);
  margin-top: 8px;
}
body.v4 .prof-actions {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  align-items: center;
}
body.v4 .prof-hint {
  font-size: 11.5px;
  color: var(--g-ink-4);
  margin-top: 14px;
  line-height: 1.5;
  max-width: 460px;
}

/* Email subscriptions - single card with frequency + director checklist */
body.v4 .esubs-card {
  background: rgba(255, 255, 255, 0.70);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  padding: 22px;
}
body.v4 .esubs-card-hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
body.v4 .esubs-card-title {
  font-family: var(--g-fd);
  font-size: 16px;
  font-weight: 700;
  color: var(--g-ink-1);
}
body.v4 .esubs-card-sub {
  font-size: 12.5px;
  color: var(--g-ink-3);
  margin-top: 4px;
  max-width: 540px;
  line-height: 1.55;
}
body.v4 .esubs-count {
  background: rgba(0, 113, 227, 0.10);
  color: var(--g-blue);
  border-radius: var(--r-pill);
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

body.v4 .esubs-freq {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.025);
  border-radius: 10px;
  margin-bottom: 18px;
}
body.v4 .esubs-freq-lbl {
  font-family: var(--g-fd);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g-ink-4);
  margin-right: 6px;
}
body.v4 .esubs-freq-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--g-ink-2);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
body.v4 .esubs-freq-opt.on { color: var(--g-blue); font-weight: 600; }
body.v4 .esubs-freq-opt input { accent-color: var(--g-blue); }

body.v4 .esubs-dirs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
@media (max-width: 760px) {
  body.v4 .esubs-dirs { grid-template-columns: 1fr; }
}
body.v4 .esubs-dir {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
body.v4 .esubs-dir:hover {
  border-color: rgba(0, 113, 227, 0.30);
  background: rgba(255, 255, 255, 0.85);
}
body.v4 .esubs-dir.on {
  border-color: var(--g-blue);
  background: rgba(0, 113, 227, 0.04);
}
body.v4 .esubs-dir input[type="checkbox"] {
  margin-top: 3px;
  accent-color: var(--g-blue);
  flex-shrink: 0;
}
body.v4 .esubs-dir-body { min-width: 0; flex: 1; }
body.v4 .esubs-dir-name {
  font-family: var(--g-fd);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--g-ink-1);
  letter-spacing: -0.005em;
}
body.v4 .esubs-dir-desc {
  font-size: 11.5px;
  color: var(--g-ink-3);
  margin-top: 2px;
  line-height: 1.45;
}
body.v4 .esubs-dir-last {
  display: block;
  font-size: 10.5px;
  color: var(--g-blue);
  margin-top: 8px;
  font-weight: 500;
}
body.v4 .esubs-dir-last-muted { color: var(--g-ink-4); }

/* ─── Wave 149 - Episode popup Notes tab ─────────────────────
   Notes is pinned to the bottom of the left nav and separated by a
   hairline. Pane shows a warning banner + textarea + Save button. */
body.v4 .ep-modal-nav {
  display: flex !important;
  flex-direction: column !important;
}
body.v4 .ep-modal-nav-spacer { flex: 1 1 auto; min-height: 14px; }
body.v4 .ep-modal-navitem-bottom {
  margin-top: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding-top: 12px !important;
  padding-bottom: 10px !important;
  border-radius: 10px !important;
}

/* Notes pane - warning banner + textarea + saved-at meta. */
body.v4 .ep-notes { padding-top: 6px; }
body.v4 .ep-notes-warn {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(180, 130, 0, 0.10);
  border: 1px solid rgba(180, 130, 0, 0.25);
  border-radius: 10px;
  margin: 14px 0 18px;
  font-size: 12.5px;
  color: #6b4f00;
  line-height: 1.55;
}
body.v4 .ep-notes-warn strong { color: #4d3a00; font-weight: 600; }
body.v4 .ep-notes-warn-icon {
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  background: rgba(180, 130, 0, 0.18);
  border-radius: 6px;
}
body.v4 .ep-notes-warn-icon i,
body.v4 .ep-notes-warn-icon svg {
  width: 13px; height: 13px;
  color: #8a6300; stroke: #8a6300;
}
body.v4 .ep-notes-text {
  width: 100%;
  min-height: 320px;
  padding: 14px 16px;
  font-family: var(--g-f);
  font-size: 14px;
  line-height: 1.55;
  color: var(--g-ink-1);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: var(--r);
  resize: vertical;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
  box-sizing: border-box;
}
body.v4 .ep-notes-text:focus {
  border-color: var(--g-blue);
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.12);
}
body.v4 .ep-notes-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  gap: 12px;
}
body.v4 .ep-notes-saved {
  font-size: 11.5px;
  color: var(--g-ink-4);
}
body.v4 .ep-notes-loading {
  padding: 40px 0;
  text-align: center;
  color: var(--g-ink-4);
  font-size: 13px;
  font-style: italic;
}

/* ─── Wave 150 (item 1) - Calendar key redesign ──────────────
   Old key used cryptic 3-letter pills. New key is a frosted strip
   with a small KEY eyebrow + coloured swatches + clear labels. Each
   swatch mirrors the actual chip treatment used in the calendar so
   reading the key tells you exactly what to expect on the grid. */
body.v4 .c-week-key {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  margin: 0 0 12px;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--r);
  font-size: 12px;
  color: var(--g-ink-2);
}
body.v4 .c-week-key-lbl {
  font-family: var(--g-fd);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g-ink-4);
  padding-right: 6px;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  margin-right: 2px;
}
body.v4 .c-week-key-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
body.v4 .c-week-key-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  flex-shrink: 0;
  border: 1px solid transparent;
}
body.v4 .c-week-key-swatch.sw-rec {
  background: rgba(184, 0, 43, 0.18);
  border-color: rgba(184, 0, 43, 0.40);
}
body.v4 .c-week-key-swatch.sw-rel {
  background: rgba(47, 133, 90, 0.18);
  border-color: rgba(47, 133, 90, 0.40);
}
body.v4 .c-week-key-swatch.sw-released {
  background: rgba(0, 0, 0, 0.10);
  border-color: rgba(0, 0, 0, 0.20);
}
body.v4 .c-week-key-swatch.sw-proposed {
  background: rgba(0, 113, 227, 0.08);
  border: 1px dashed var(--g-blue);
}
body.v4 .c-week-key-swatch.sw-busy {
  background: repeating-linear-gradient(
    45deg,
    rgba(0,0,0,0.08),
    rgba(0,0,0,0.08) 4px,
    rgba(0,0,0,0.04) 4px,
    rgba(0,0,0,0.04) 8px
  );
  border-color: rgba(0, 0, 0, 0.18);
}

/* ─── Wave 151 - Email subscriptions: inline save feedback ────
   The page auto-saves on every click; without an affordance it
   feels like nothing happened. Two pieces:

   1. .esubs-save-status - transient pill next to the "N of 8 on"
      count. Empty by default; pops in for ~1.6s after each save.
   2. .esubs-dir.just-saved - brief blue border-glow on the card
      that was actually toggled, so Peter can see which one took. */

/* Pack the status pill and count chip into a tight right cluster. */
body.v4 .esubs-hd-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

body.v4 .esubs-save-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--g-fd);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--g-green);
  background: rgba(47, 133, 90, 0.10);
  border: 1px solid rgba(47, 133, 90, 0.30);
  border-radius: var(--r-pill);
  padding: 3px 10px 3px 8px;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 200ms ease, transform 200ms ease;
  pointer-events: none;
  white-space: nowrap;
}
body.v4 .esubs-save-status::before {
  content: '✓';
  font-size: 11px;
  font-weight: 700;
  margin-right: 2px;
}
body.v4 .esubs-save-status.show {
  opacity: 1;
  transform: translateY(0);
}
body.v4 .esubs-save-status.err {
  color: var(--g-cherry);
  background: rgba(184, 0, 43, 0.08);
  border-color: rgba(184, 0, 43, 0.30);
}
body.v4 .esubs-save-status.err::before { content: '⚠'; }

/* Director card: brief glow on the row that was just toggled. */
@keyframes esubs-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0, 113, 227, 0.45); }
  60%  { box-shadow: 0 0 0 6px rgba(0, 113, 227, 0.00); }
  100% { box-shadow: 0 0 0 0 rgba(0, 113, 227, 0.00); }
}
body.v4 .esubs-dir.just-saved {
  animation: esubs-pulse 900ms ease-out;
  border-color: var(--g-blue);
}

/* ─── Wave 152 - Guests page redesign ─────────────────────────
   Three pieces: search bar + meta count above the grid, frosted
   card grid with richer per-card info (tier-coloured avatar,
   relative-time stamp, topic chips, AI rationale for shortlist),
   and a consistent hover/focus treatment matching the rest of
   the app's interactive cards. */

/* Search row - input + result-count meta on the right */
body.v4 .guest-search-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0 14px;
}
body.v4 .guest-search {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}
body.v4 .guest-search-icon {
  position: absolute;
  left: 12px;
  display: inline-flex;
  align-items: center;
  color: var(--g-ink-4);
  pointer-events: none;
}
body.v4 .guest-search-icon i,
body.v4 .guest-search-icon svg {
  width: 14px; height: 14px;
  stroke: currentColor;
}
body.v4 .guest-search input {
  width: 100%;
  padding: 9px 14px 9px 36px;
  font-family: var(--g-f);
  font-size: 13.5px;
  color: var(--g-ink-1);
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
body.v4 .guest-search input::placeholder { color: var(--g-ink-4); }
body.v4 .guest-search input:focus {
  border-color: var(--g-blue);
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.12);
}
body.v4 .guest-search-meta {
  font-size: 11.5px;
  color: var(--g-ink-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Card grid - wider cards, more breathing room. Override the base
   .guest-grid auto-fill minmax so the cards have room for the new
   content blocks. */
body.v4 .guest-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 12px !important;
}

/* The card itself - frosted, hairline border, soft hover lift. */
body.v4 .guest-card-v2 {
  all: unset;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.70);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
  min-height: 0;
}
body.v4 .guest-card-v2:hover {
  background: rgba(255, 255, 255, 0.92);
  border-color: var(--g-blue);
  transform: translateY(-1px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 8px 22px rgba(0,0,0,0.06);
}
body.v4 .guest-card-v2:focus-visible {
  outline: 2px solid var(--g-blue);
  outline-offset: 2px;
}

/* Header row: avatar · titles · last-seen pill */
body.v4 .gcv2-head {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
body.v4 .gcv2-titles {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body.v4 .gcv2-name {
  font-family: var(--g-fd);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.008em;
  color: var(--g-ink-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.v4 .gcv2-sub {
  font-size: 11.5px;
  color: var(--g-ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.v4 .gcv2-last {
  font-size: 10.5px;
  color: var(--g-ink-4);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding: 3px 8px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: var(--r-pill);
}

/* Topic chips - soft, low-contrast, max 3 visible */
body.v4 .gcv2-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
body.v4 .gcv2-topic {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--g-ink-2);
  background: rgba(0, 113, 227, 0.06);
  border: 1px solid rgba(0, 113, 227, 0.18);
  border-radius: var(--r-pill);
  padding: 2px 9px;
  white-space: nowrap;
}

/* AI rationale strip (shortlist tier only) */
body.v4 .gcv2-rationale {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(94, 92, 230, 0.06);
  border-left: 2px solid var(--g-lilac);
  border-radius: 6px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--g-ink-2);
}
body.v4 .gcv2-rationale-lbl {
  font-family: var(--g-fd);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g-lilac);
  flex-shrink: 0;
  padding-top: 1px;
}

/* ─── Wave 152.3 - Studio schedule: subbar + flipped grid ───────
   Two fixes wrapped together. The OLD layout had:
   - .studio-subbar floating in unstyled whitespace (no card, no
     background, just a border-top - looked broken between the dark
     hero and the calendar)
   - a vertical hour-grid (time down, days across) with collapsed
     "no bookings" bands

   Peter asked for a frosted subbar AND a flipped axis (time across
   the top, days down the side). Empty cells now render as nothing -
   no grey "X hours empty" bands. */

body.v4 .ss-subbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  margin-bottom: 14px;
  background: rgba(255, 255, 255, 0.70);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--r);
  flex-wrap: wrap;
}
body.v4 .ss-subbar-l {
  font-size: 12.5px;
  color: var(--g-ink-3);
  letter-spacing: -0.005em;
}
body.v4 .ss-subbar-l strong {
  color: var(--g-ink-1);
  font-weight: 600;
}
body.v4 .ss-subbar-r {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ─── Flipped grid ─────────────────────────────────────────────
   CSS grid with N+1 columns (day-label + N hour cells). Each
   day row is rendered in order; multi-hour events use
   `grid-column: span N` to stretch horizontally. */
body.v4 .ss-grid {
  display: grid;
  /* grid-template-columns is set inline by the renderer because the
     hour count is dynamic. */
  gap: 4px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  overflow-x: auto;
}

/* Header row (hour labels) */
body.v4 .ss-grid-head {
  font-family: var(--g-fd);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--g-ink-4);
  padding: 8px 6px;
  text-align: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
body.v4 .ss-corner {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* Day label (row header) */
body.v4 .ss-day-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 12px 14px;
  border-right: 1px solid rgba(0, 0, 0, 0.05);
  position: sticky;
  left: 0;
  background: inherit;
}
body.v4 .ss-day-head .ss-dow {
  font-family: var(--g-fd);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--g-ink-4);
}
body.v4 .ss-day-head .ss-num {
  font-family: var(--g-fd);
  font-size: 22px;
  font-weight: 700;
  color: var(--g-ink-1);
  letter-spacing: -0.018em;
  line-height: 1.1;
  margin-top: 2px;
}

/* Today highlight on the row */
body.v4 .ss-today-row.ss-day-head .ss-dow {
  color: var(--g-blue);
}
body.v4 .ss-today-row.ss-day-head .ss-num {
  background: var(--g-blue);
  color: var(--on-accent);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  margin-top: 4px;
}
body.v4 .ss-cell.ss-today-row {
  background: rgba(0, 113, 227, 0.03);
}

/* Empty cells - quiet, just a faint outline so you can read the grid */
body.v4 .ss-cell {
  min-height: 56px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(0, 0, 0, 0.03);
}

/* Booking tile */
body.v4 .ss-event {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 8px 12px;
  background: rgba(94, 92, 230, 0.13);
  border: 1px solid rgba(94, 92, 230, 0.30);
  border-radius: var(--r-sm);
  color: var(--g-ink-1);
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
body.v4 .ss-event:hover {
  background: rgba(94, 92, 230, 0.20);
  border-color: var(--g-lilac);
  transform: translateY(-1px);
}
body.v4 .ss-event-label {
  font-family: var(--g-fd);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--g-ink-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.v4 .ss-event-time {
  font-size: 10.5px;
  color: var(--g-ink-3);
  font-variant-numeric: tabular-nums;
}

/* Tentative pitch - dashed border */
body.v4 .ss-event.is-tentative {
  background: rgba(94, 92, 230, 0.06);
  border-style: dashed;
}
/* Time TBC - peach tint to flag missing time */
body.v4 .ss-event.is-time-tbc {
  background: rgba(180, 130, 0, 0.10);
  border-color: rgba(180, 130, 0, 0.30);
}
body.v4 .ss-event.is-time-tbc .ss-event-label { color: #6b4f00; }

/* Personal calendar Busy block */
body.v4 .ss-event.ss-personal {
  background: repeating-linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.08),
    rgba(0, 0, 0, 0.08) 4px,
    rgba(0, 0, 0, 0.04) 4px,
    rgba(0, 0, 0, 0.04) 8px
  );
  border-color: rgba(0, 0, 0, 0.18);
  color: var(--g-ink-3);
  font-size: 11px;
  font-weight: 500;
  text-align: center;
  align-items: center;
}

/* ─── Wave 153 - Intel popup left-tabs redesign ─────────────────
   Mirrors the episode popup chrome: left nav with tabs + Notes
   pinned to the bottom, right pane carries per-tab content. These
   styles add the bits the existing .ep-modal-* family doesn't
   already cover. */

/* Info card - used on Audience + Outreach panes. Tonally the same
   as a checklist sub-card; sits inside the pane, not the modal. */
body.v4 .intel-info-card {
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--r);
}
body.v4 .intel-info-card.intel-info-empty {
  background: rgba(0, 0, 0, 0.02);
  border-style: dashed;
  color: var(--g-ink-4);
  font-size: 12.5px;
  font-style: italic;
  padding: 14px 16px;
}
body.v4 .intel-info-eye {
  font-family: var(--g-fd);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g-blue);
  margin-bottom: 8px;
}
body.v4 .intel-info-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--g-ink-1);
  white-space: pre-wrap;
}

/* Key-value rows on the Outreach card */
body.v4 .intel-kv {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 20px;
  font-size: 13px;
  color: var(--g-ink-1);
}
body.v4 .intel-kv-label {
  color: var(--g-ink-4);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  align-self: center;
}
body.v4 .intel-kv-value {
  color: var(--g-ink-1);
}

/* Promote pane - stack of large action buttons with a label + sub */
body.v4 .intel-promote-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}
body.v4 .intel-promote-btn {
  all: unset;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.70);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--r);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
body.v4 .intel-promote-btn:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: var(--g-blue);
  transform: translateY(-1px);
}
body.v4 .intel-promote-btn.is-busy {
  opacity: 0.6;
  cursor: progress;
}
body.v4 .intel-promote-btn-label {
  font-family: var(--g-fd);
  font-size: 14px;
  font-weight: 600;
  color: var(--g-ink-1);
  letter-spacing: -0.008em;
}
body.v4 .intel-promote-btn-sub {
  font-size: 11.5px;
  color: var(--g-ink-3);
  line-height: 1.45;
}

/* Variants: primary (blue), danger (cherry), ghost (muted) */
body.v4 .intel-promote-primary {
  background: rgba(0, 113, 227, 0.08);
  border-color: rgba(0, 113, 227, 0.30);
}
body.v4 .intel-promote-primary:hover {
  background: rgba(0, 113, 227, 0.14);
  border-color: var(--g-blue);
}
body.v4 .intel-promote-primary .intel-promote-btn-label { color: var(--g-blue); }

body.v4 .intel-promote-danger {
  background: rgba(184, 0, 43, 0.05);
  border-color: rgba(184, 0, 43, 0.25);
}
body.v4 .intel-promote-danger:hover {
  background: rgba(184, 0, 43, 0.10);
  border-color: var(--g-cherry);
}
body.v4 .intel-promote-danger .intel-promote-btn-label { color: var(--g-cherry); }

body.v4 .intel-promote-ghost {
  background: transparent;
  border-color: rgba(0, 0, 0, 0.06);
}
body.v4 .intel-promote-ghost .intel-promote-btn-label { color: var(--g-ink-3); }

/* Empty pane placeholder (e.g. Doctrine when status != passed) */
body.v4 .intel-empty-pane {
  padding: 32px 24px;
  background: rgba(0, 0, 0, 0.02);
  border: 1px dashed rgba(0, 0, 0, 0.10);
  border-radius: var(--r);
  margin-top: 18px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--g-ink-3);
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════
   WAVE 153 part 2 · Intel page → Briefing tab design pass.
   The .stat-tile / .intel-target / .intel-action / .intel-banner
   atoms already have Liquid Glass treatment from Wave 71.6 (line
   ~5917). This block tightens hierarchy in the row helpers
   (targetRow / actionRow), strips the pre-glass inline-style overrides
   they used to carry, and adds the matching audience card + drift
   banner micro-classes.
   ═══════════════════════════════════════════════════════════════════ */

/* List container around the row stacks. Each row is its own glass
   card now, so the outer wrapper is purely a flex column. */
body.v4 .intel-rowlist {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.v4 .intel-rowlist > .intel-target,
body.v4 .intel-rowlist > .intel-action {
  margin-bottom: 0 !important;
}

/* ─── Drift banner ─────────────────────────────────────────────── */
body.v4 .intel-banner {
  padding: 18px 20px !important;
  border-radius: 14px !important;
}
body.v4 .intel-banner-body { flex: 1; min-width: 0; }
body.v4 .intel-banner-eye {
  font-family: var(--g-fd);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g-cherry);
  margin-bottom: 6px;
}
body.v4 .intel-banner-text {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--g-ink-1);
  font-weight: 500;
}
body.v4 .intel-banner-text strong { color: var(--g-cherry); font-weight: 700; }

/* ─── Target row hierarchy ─────────────────────────────────────── */
body.v4 .intel-target {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px !important;
  border-radius: 14px !important;
}
body.v4 .intel-target-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
body.v4 .intel-target-id { min-width: 0; }
body.v4 .intel-target-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
body.v4 .intel-target-state {
  font-family: var(--g-fd);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g-ink-4);
}
body.v4 .intel-target-types {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}
body.v4 .intel-target-types .pill-soft {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  padding: 3px 9px !important;
}
body.v4 .intel-target-hook {
  font-family: var(--g-fd);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.008em;
  color: var(--g-ink-1);
  font-style: italic;
  margin: 0;
}
body.v4 .intel-target-case {
  font-size: 13px;
  line-height: 1.55;
  color: var(--g-ink-3);
  margin: 0;
}
body.v4 .intel-target-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 10px;
  margin-top: 2px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
body.v4 .intel-target-kv {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  color: var(--g-ink-1);
}
body.v4 .intel-target-kv strong { font-weight: 600; color: var(--g-ink-1); }
body.v4 .kv-lbl {
  font-family: var(--g-fd);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g-ink-4);
}

/* ─── Action row hierarchy ─────────────────────────────────────── */
body.v4 .intel-action {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px !important;
  border-radius: 14px !important;
}
body.v4 .intel-action-num {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(0, 113, 227, 0.10);
  color: var(--g-blue);
  font-family: var(--g-fd);
  font-size: 13px;
  font-weight: 700;
  display: grid;
  place-items: center;
  letter-spacing: -0.01em;
}
body.v4 .intel-action.priority .intel-action-num {
  background: var(--g-cherry-bg);
  color: var(--g-cherry);
}
body.v4 .intel-action-body { flex: 1; min-width: 0; }
body.v4 .intel-action-what {
  font-family: var(--g-fd);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--g-ink-1);
  line-height: 1.35;
  margin-bottom: 4px;
}
body.v4 .intel-action-why {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--g-ink-3);
  margin-bottom: 10px;
}
body.v4 .intel-action-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}
body.v4 .intel-action-tag {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  color: var(--g-ink-1);
}
body.v4 .intel-action-tag strong { font-weight: 600; }
body.v4 .intel-action-pri {
  font-family: var(--g-fd);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: var(--g-cherry-bg);
  color: var(--g-cherry);
  margin-left: auto;
}

/* ─── From the audience card ──────────────────────────────────── */
body.v4 .intel-audience-card {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: var(--g-sh);
}
body.v4 .intel-audience-eye {
  font-family: var(--g-fd);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g-cherry);
  margin-bottom: 10px;
}
body.v4 .intel-audience-quote {
  font-family: var(--g-fd);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.008em;
  color: var(--g-ink-1);
  margin: 0 0 12px;
}
body.v4 .intel-audience-quote strong { font-weight: 700; color: var(--g-blue); }
body.v4 .intel-audience-foot {
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--g-ink-3);
  padding-top: 12px;
  margin: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
body.v4 .intel-audience-foot strong { font-weight: 600; color: var(--g-ink-1); }
body.v4 .intel-audience-signal {
  display: inline-block;
  font-family: var(--g-fd);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--g-butter-bg);
  color: var(--g-butter);
}

/* ─── Wave 154 · Artefacts rail "From other stages" divider ───────
   Quiet sub-section heading inside .ec-artefacts when cross-stage
   artefacts are listed below the stage-native panels. */
body.v4 .ec-artefacts-cross-head {
  font-family: var(--g-fd);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g-ink-4);
  padding: 14px 4px 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  margin-top: 10px;
}

/* ─── Wave 155 · Settings cadence chip ─────────────────────────
   The TPMS Brain Updates rows show a tiny "· Every day at 8am" / "·
   Every Friday at 4pm" modifier next to the row name. */
body.v4 .esubs-cadence {
  font-family: var(--g-fd);
  font-size: 11px;
  font-weight: 500;
  color: var(--g-blue);
  letter-spacing: -0.003em;
  margin-left: 4px;
}

/* ═══════════════════════════════════════════════════════════════════
   WAVE 157 · Staff modal redesign (Employee / Supplier model) +
   per-section tier permissions + supplier shell.
   Signed off in _wave157_staff_modal_mockup.html.
   ═══════════════════════════════════════════════════════════════════ */

/* Section dividers inside the staff modal */
body.v4 .staff-section-head {
  display: flex; align-items: center; gap: 10px;
  margin: 20px 0 10px;
}
body.v4 .staff-section-eye {
  font-family: var(--g-fd);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g-blue);
}
body.v4 .staff-section-rule { flex: 1; height: 1px; background: rgba(0, 0, 0, 0.06); }

/* Conditional reveal panel (Employment / Supplier details) */
body.v4 .staff-reveal {
  background: rgba(0, 113, 227, 0.04);
  border: 1px solid rgba(0, 113, 227, 0.14);
  border-radius: var(--r);
  padding: 14px 16px;
  margin: 10px 0 4px;
}
body.v4 .staff-reveal-eye {
  font-family: var(--g-fd);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g-blue);
  margin-bottom: 10px;
}

/* Segmented controls used inside the reveal panel */
body.v4 .staff-seg {
  display: inline-flex;
  padding: 3px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: var(--r-pill);
  gap: 2px;
}
body.v4 .staff-seg-opt {
  all: unset;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--g-ink-3);
  border-radius: var(--r-pill);
  cursor: pointer;
}
body.v4 .staff-seg-opt.on {
  background: var(--g-surface);
  color: var(--g-ink-1);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Per-page tier grid */
body.v4 .staff-tier-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.v4 .staff-tier-group {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: var(--r);
  padding: 10px 12px;
  margin-bottom: 4px;
}
body.v4 .staff-tier-group-name {
  font-family: var(--g-fd);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g-ink-4);
  margin-bottom: 6px;
  padding: 4px 4px 6px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
body.v4 .staff-tier-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 4px;
}
body.v4 .staff-tier-label {
  font-size: 13px;
  color: var(--g-ink-1);
  letter-spacing: -0.003em;
}
body.v4 .staff-tier-seg {
  display: inline-flex;
  padding: 2px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: var(--r-pill);
  gap: 2px;
  flex-shrink: 0;
}
body.v4 .staff-tier-opt {
  all: unset;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  color: var(--g-ink-3);
  border-radius: var(--r-pill);
  cursor: pointer;
  letter-spacing: -0.003em;
}
body.v4 .staff-tier-opt.on {
  background: var(--g-surface);
  color: var(--g-ink-1);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
body.v4 .staff-tier-opt.on.tier-view  { color: var(--g-ink-1); }
body.v4 .staff-tier-opt.on.tier-edit  { color: var(--g-blue); }
body.v4 .staff-tier-opt.on.tier-full  { color: var(--g-cherry); }

/* Supplier shell - cherry "Supplier view" eyebrow on the topbar */
body.v4 .topbar-supplier-eye {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(184, 0, 43, 0.08);
  border: 1px solid rgba(184, 0, 43, 0.20);
  color: var(--g-cherry);
  border-radius: var(--r-pill);
  font-family: var(--g-fd);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Modal sub-line under the title */
body.v4 .staff-modal-v157 .ep-modal-sub {
  font-size: 12.5px;
  color: var(--g-ink-3);
  margin-top: 2px;
}

/* ─── Wave 158.B · Drag-to-move kanban (Monday + future)
   Drop target highlight + dragging card opacity. */
body.v4 .kb-col.drop-target {
  background: rgba(0, 113, 227, 0.06);
  outline: 2px dashed rgba(0, 113, 227, 0.40);
  outline-offset: -4px;
  border-radius: 14px;
}
body.v4 .kb-card.dragging {
  opacity: 0.4;
  cursor: grabbing;
}

/* ═══════════════════════════════════════════════════════════════════
   WAVE 158.B · Ad-slot column + picker modal.
   Signed off in _wave158b_ad_slot_picker_mockup.html.
   ═══════════════════════════════════════════════════════════════════ */

body.v4 .adslot-col {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 14px;
  padding: 18px 18px 16px;
  margin-bottom: 14px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 4px 14px rgba(0, 0, 0, 0.04);
  backdrop-filter: blur(20px);
}
body.v4 .adslot-col-loading { opacity: 0.55; }
body.v4 .adslot-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 14px;
}
body.v4 .adslot-h {
  font-family: var(--g-fd);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.008em;
  color: var(--g-ink-1);
}
body.v4 .adslot-s {
  font-size: 11px;
  color: var(--g-ink-4);
  margin-top: 2px;
}
body.v4 .adslot-counter {
  padding: 3px 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: rgba(0, 113, 227, 0.10);
  color: var(--g-blue);
  border-radius: var(--r-pill);
}
body.v4 .adslot {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 12px;
  border-radius: var(--r);
  margin-bottom: 8px;
  transition: all 0.18s ease;
  cursor: pointer;
}
body.v4 .adslot-empty {
  background: rgba(0, 0, 0, 0.02);
  border: 1.5px dashed rgba(0, 0, 0, 0.12);
  color: var(--g-ink-4);
}
body.v4 .adslot-empty:hover {
  background: rgba(0, 113, 227, 0.04);
  border-color: var(--g-blue);
  color: var(--g-blue);
}
body.v4 .adslot-filled {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  cursor: default;
}
body.v4 .adslot-filled:hover {
  border-color: var(--g-blue);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0, 113, 227, 0.10);
}
body.v4 .adslot-n {
  width: 26px; height: 26px; flex-shrink: 0;
  border-radius: 50%;
  background: rgba(0, 113, 227, 0.10);
  color: var(--g-blue);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
  font-family: var(--g-fd);
}
body.v4 .adslot-empty .adslot-n { background: rgba(0, 0, 0, 0.05); color: var(--g-ink-4); }
body.v4 .adslot-body { flex: 1; min-width: 0; }
body.v4 .adslot-empty-cta { font-size: 13px; font-weight: 500; }
body.v4 .adslot-adv {
  font-family: var(--g-fd);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--g-ink-1);
  line-height: 1.25;
}
body.v4 .adslot-meta {
  font-size: 11px;
  color: var(--g-ink-4);
  margin-top: 2px;
}
body.v4 .adslot-x {
  all: unset;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.04);
  display: grid; place-items: center;
  font-size: 14px;
  color: var(--g-ink-4);
  opacity: 0;
  transition: opacity 0.15s;
  cursor: pointer;
}
body.v4 .adslot-filled:hover .adslot-x { opacity: 1; }
body.v4 .adslot-x:hover { background: var(--g-cherry-bg); color: var(--g-cherry); }
body.v4 .adslot-foot {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  font-size: 11.5px;
  color: var(--g-ink-4);
  line-height: 1.5;
}

/* ─── Picker modal ─────────────────────────────────────────── */
body.v4 .adslot-picker-modal {
  max-width: 780px;
}
body.v4 .adslot-camp {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 14px;
  transition: all 0.15s;
}
body.v4 .adslot-camp:hover {
  border-color: var(--g-blue);
  background: var(--g-surface);
  box-shadow: 0 4px 12px rgba(0, 113, 227, 0.08);
}
body.v4 .adslot-camp-logo {
  width: 48px; height: 48px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(184, 0, 43, 0.10), rgba(94, 92, 230, 0.10));
  display: grid; place-items: center;
  font-size: 14px; font-weight: 700;
  color: var(--g-ink-1);
  font-family: var(--g-fd);
}
body.v4 .adslot-camp-body { min-width: 0; }
body.v4 .adslot-camp-adv {
  font-family: var(--g-fd);
  font-size: 14px; font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--g-ink-1);
}
body.v4 .adslot-camp-sub {
  font-size: 11.5px;
  color: var(--g-ink-3);
  margin-top: 2px;
}
body.v4 .adslot-camp-meta { display: flex; gap: 14px; margin-top: 8px; flex-wrap: wrap; }
body.v4 .adslot-camp-meta .item { font-size: 11px; color: var(--g-ink-4); }
body.v4 .adslot-camp-meta .item strong { color: var(--g-ink-1); font-weight: 600; font-family: var(--g-fd); }
body.v4 .adslot-progress {
  width: 120px; height: 4px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: var(--r-pill); overflow: hidden;
  margin-top: 6px;
}
body.v4 .adslot-progress-fill {
  height: 100%;
  background: var(--g-blue);
  border-radius: var(--r-pill);
}
body.v4 .adslot-camp-actions {
  display: flex; flex-direction: column; gap: 6px;
  align-items: flex-end;
}
body.v4 .adslot-camp-hint {
  font-size: 10.5px;
  color: var(--g-ink-4);
}

/* ═══════════════════════════════════════════════════════════════════
   WAVE 159 · Topbar Feedback + What's new buttons + popups.
   Signed off in _wave159_feedback_version_mockup.html.
   ═══════════════════════════════════════════════════════════════════ */

body.v4 .tb-pill {
  all: unset;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: -0.003em;
  cursor: pointer;
  font-family: var(--g-fd);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
body.v4 .tb-pill:hover { transform: translateY(-1px); }
body.v4 .tb-pill-feedback {
  background: var(--g-cherry);
  color: var(--on-accent);
  box-shadow: 0 4px 12px rgba(184, 0, 43, 0.24);
}
body.v4 .tb-pill-feedback:hover { box-shadow: 0 6px 16px rgba(184, 0, 43, 0.32); }
body.v4 .tb-pill-feedback .ic { width: 14px; height: 14px; }
body.v4 .tb-pill-version {
  background: rgba(0, 113, 227, 0.10);
  color: var(--g-blue);
  border: 1px solid rgba(0, 113, 227, 0.18);
}
body.v4 .tb-pill-version .tb-pill-num {
  font-family: var(--g-fd);
  font-weight: 700;
  letter-spacing: -0.005em;
}

/* Feedback modal */
body.v4 .fb-modal { max-width: 460px; }
body.v4 .fb-eye-cherry { color: var(--g-cherry) !important; }
body.v4 .fb-eye-blue   { color: var(--g-blue) !important; }
body.v4 .fb-ta-wrap {
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: var(--r);
  padding: 14px;
  margin: 16px 0 0;
}
body.v4 .fb-ta-wrap textarea {
  width: 100%;
  border: none;
  background: transparent;
  font-family: var(--g-fd);
  font-size: 14px;
  color: var(--g-ink-1);
  resize: vertical;
  min-height: 90px;
  outline: none;
  line-height: 1.55;
}
body.v4 .fb-ta-wrap textarea::placeholder { color: var(--g-ink-4); }
body.v4 .fb-btn-cherry {
  background: var(--g-cherry) !important;
  color: var(--on-accent) !important;
  box-shadow: 0 6px 18px rgba(184, 0, 43, 0.28) !important;
}

/* Version popup */
body.v4 .ver-modal { max-width: 640px; }
body.v4 .ver-list {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 520px;
  overflow-y: auto;
  padding-right: 6px;
}
body.v4 .ver-entry {
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 14px;
}
body.v4 .ver-entry-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
body.v4 .ver-num {
  font-family: var(--g-fd);
  font-size: 15px;
  font-weight: 700;
  color: var(--g-blue);
  letter-spacing: -0.005em;
}
body.v4 .ver-date {
  font-size: 11.5px;
  color: var(--g-ink-4);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
body.v4 .ver-headline {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--g-ink-1);
  margin-left: auto;
  letter-spacing: -0.003em;
}
body.v4 .ver-changes {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.v4 .ver-change {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--g-ink-2);
}
body.v4 .ver-section {
  font-family: var(--g-fd);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g-blue);
  min-width: 90px;
  flex-shrink: 0;
  padding-top: 1px;
}
body.v4 .ver-pagi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  font-size: 12px;
  color: var(--g-ink-4);
}
body.v4 .ver-older {
  padding: 8px 14px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: var(--r-pill);
  color: var(--g-ink-1);
  font-weight: 500;
  font-size: 12px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

/* ═══════════════════════════════════════════════════════════════════
   WAVE 160 · Onboarding flow. Full-screen takeover with a frosted
   Liquid Glass card centred over a gradient backdrop. Signed off in
   _wave160_onboarding_mockup.html.
   ═══════════════════════════════════════════════════════════════════ */

body.v4 .ob-scene {
  min-height: 100vh;
  background:
    radial-gradient(ellipse 800px 500px at 20% -10%, rgba(184, 0, 43, 0.10), transparent),
    radial-gradient(ellipse 700px 400px at 110% 110%, rgba(94, 92, 230, 0.12), transparent),
    linear-gradient(180deg, #f5f1ea, #ece6dc);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  position: relative;
}
body.v4 .ob-card {
  width: 640px;
  max-width: 100%;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 24px;
  padding: 48px 56px 40px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 24px 60px rgba(0, 0, 0, 0.10);
  backdrop-filter: blur(28px) saturate(180%);
  position: relative;
  text-align: center;
}
body.v4 .ob-brand {
  width: 64px; height: 64px;
  background: rgba(184, 0, 43, 0.10);
  border-radius: var(--r-lg);
  margin: 0 auto 22px;
  display: grid; place-items: center;
}
body.v4 .ob-dots {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; margin-bottom: 32px;
}
body.v4 .ob-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.10);
}
body.v4 .ob-dot.on {
  background: var(--g-blue);
  width: 24px;
  border-radius: var(--r-pill);
}
body.v4 .ob-dot.done { background: var(--g-ink-3); }
body.v4 .ob-eye {
  font-family: var(--g-fd);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g-blue);
  margin-bottom: 14px;
}
body.v4 .ob-title {
  font-family: var(--g-fd);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.026em;
  color: var(--g-ink-1);
  line-height: 1.1;
  margin: 0 0 14px;
}
body.v4 .ob-sub {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--g-ink-2);
  letter-spacing: -0.005em;
  margin: 0 auto 28px;
  max-width: 480px;
}
body.v4 .ob-privacy {
  background: rgba(0, 113, 227, 0.06);
  border: 1px solid rgba(0, 113, 227, 0.18);
  border-radius: 14px;
  padding: 16px 18px;
  margin: 0 0 26px;
  text-align: left;
}
body.v4 .ob-privacy-eye {
  font-family: var(--g-fd);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g-blue);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
body.v4 .ob-privacy-body {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--g-ink-1);
  letter-spacing: -0.003em;
}
body.v4 .ob-avatar-zone {
  width: 120px; height: 120px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.03);
  border: 2px dashed rgba(0, 0, 0, 0.15);
  margin: 0 auto 16px;
  display: grid; place-items: center;
  font-size: 32px;
  font-weight: 700;
  color: var(--g-ink-4);
  font-family: var(--g-fd);
  position: relative;
  cursor: pointer;
}
body.v4 .ob-avatar-plus {
  position: absolute;
  bottom: 0; right: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--g-blue);
  color: var(--on-accent);
  display: grid; place-items: center;
  font-size: 18px;
  box-shadow: 0 4px 12px rgba(0, 113, 227, 0.32);
}
body.v4 .ob-subs {
  text-align: left;
  margin: 0 auto 26px;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.v4 .ob-sub-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: var(--r);
  cursor: pointer;
}
body.v4 .ob-sub-row:hover { border-color: var(--g-blue); }
body.v4 .ob-sub-toggle {
  width: 36px; height: 22px;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, 0.10);
  position: relative;
  flex-shrink: 0;
  transition: background 0.15s ease;
}
body.v4 .ob-sub-toggle.on { background: var(--g-blue); }
body.v4 .ob-sub-toggle::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  background: var(--g-surface);
  border-radius: 50%;
  top: 2px; left: 2px;
  transition: transform 0.18s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
body.v4 .ob-sub-toggle.on::after { transform: translateX(14px); }
body.v4 .ob-sub-body { flex: 1; }
body.v4 .ob-sub-name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
body.v4 .ob-sub-desc {
  font-size: 11.5px;
  color: var(--g-ink-4);
  margin-top: 2px;
  line-height: 1.5;
}
body.v4 .ob-btn-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
}
body.v4 .ob-btn {
  padding: 13px 28px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  font-family: var(--g-fd);
  letter-spacing: -0.005em;
}
body.v4 .ob-btn-primary {
  background: var(--g-cherry);
  color: var(--on-accent);
  box-shadow: 0 8px 22px rgba(184, 0, 43, 0.28);
}
body.v4 .ob-btn-blue {
  background: var(--g-blue);
  color: var(--on-accent);
  box-shadow: 0 8px 22px rgba(0, 113, 227, 0.28);
}
body.v4 .ob-btn-secondary {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(0, 0, 0, 0.08);
  color: var(--g-ink-1);
}
body.v4 .ob-skip {
  position: absolute;
  bottom: 18px; left: 24px;
  font-size: 12px;
  color: var(--g-ink-4);
  text-decoration: none;
}
body.v4 .ob-skip:hover { color: var(--g-ink-3); }

/* ═══════════════════════════════════════════════════════════════════
   WAVE 161.A · Direct chat panel.
   ═══════════════════════════════════════════════════════════════════ */

#chat-root { position: fixed; bottom: 0; right: 0; z-index: 1500; pointer-events: none; }
#chat-root > * { pointer-events: auto; }

body.v4 .cp-panel {
  position: fixed; bottom: 24px; right: 24px;
  width: 360px; height: 520px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 18px 44px rgba(0,0,0,0.16);
  backdrop-filter: blur(28px) saturate(180%);
  display: flex; flex-direction: column; overflow: hidden;
  font-family: var(--g-fd);
}
body.v4 .cp-tabs {
  display: flex; gap: 0;
  padding: 8px 8px 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  background: rgba(255,255,255,0.5);
  overflow-x: auto;
}
body.v4 .cp-tab {
  padding: 8px 12px 10px;
  font-size: 12px; font-weight: 500;
  color: var(--g-ink-4);
  border-bottom: 2px solid transparent;
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
  border-radius: 8px 8px 0 0;
  white-space: nowrap;
}
body.v4 .cp-tab.on {
  color: var(--g-ink-1); font-weight: 600;
  border-color: var(--g-blue);
  background: rgba(0, 113, 227, 0.04);
}
body.v4 .cp-tab-avatar {
  width: 18px; height: 18px; border-radius: 50%;
  font-size: 9px; font-weight: 700;
  display: grid; place-items: center;
  color: var(--on-accent);
  overflow: hidden;
}
body.v4 .cp-tab-avatar img { width: 100%; height: 100%; object-fit: cover; }
body.v4 .cp-tab-unread {
  display: inline-grid; place-items: center;
  min-width: 16px; height: 16px; padding: 0 5px;
  background: var(--g-cherry); color: var(--on-accent);
  border-radius: var(--r-pill);
  font-size: 9px; font-weight: 700; letter-spacing: 0.02em;
}
body.v4 .cp-tab-x {
  margin-left: 4px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: rgba(0,0,0,0.06);
  display: inline-grid; place-items: center;
  font-size: 9px;
  color: var(--g-ink-4);
  cursor: pointer;
}
body.v4 .cp-tab-x:hover { background: var(--g-cherry-bg); color: var(--g-cherry); }

body.v4 .cp-head {
  padding: 12px 16px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  background: var(--g-surface);
}
body.v4 .cp-head-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--on-accent);
  font-size: 12px; font-weight: 700;
  overflow: hidden;
}
body.v4 .cp-head-avatar img { width: 100%; height: 100%; object-fit: cover; }
body.v4 .cp-head-name {
  font-size: 13.5px; font-weight: 700;
  letter-spacing: -0.005em;
}
body.v4 .cp-head-sub {
  font-size: 11px; color: var(--g-ink-4);
  margin-top: 1px;
}
body.v4 .cp-head-actions {
  display: flex; gap: 4px;
  margin-left: auto;
}
body.v4 .cp-icon {
  width: 26px; height: 26px; border-radius: 7px;
  background: rgba(0,0,0,0.04);
  display: grid; place-items: center;
  color: var(--g-ink-3);
  font-size: 12px; cursor: pointer;
}
body.v4 .cp-icon:hover { background: rgba(0,0,0,0.08); color: var(--g-ink-1); }

body.v4 .cp-body {
  flex: 1; overflow-y: auto;
  padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  background: linear-gradient(180deg, #fafaf8, #fff);
}
body.v4 .cp-day-divider {
  text-align: center;
  font-size: 10.5px; font-weight: 600;
  color: var(--g-ink-4);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin: 6px 0;
}
body.v4 .cp-msg {
  max-width: 78%;
  padding: 9px 12px;
  border-radius: 14px;
  font-size: 13px; line-height: 1.45;
  letter-spacing: -0.003em;
}
body.v4 .cp-msg.them {
  background: rgba(0,0,0,0.05);
  color: var(--g-ink-1);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
body.v4 .cp-msg.me {
  background: var(--g-blue); color: var(--on-accent);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
body.v4 .cp-msg-time {
  font-size: 10px; color: var(--g-ink-4);
  margin-top: 2px;
}
body.v4 .cp-msg-time.me { align-self: flex-end; }
body.v4 .cp-msg-time a { color: var(--g-blue); }
body.v4 .cp-attachment {
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 10px;
  padding: 10px;
  align-self: flex-start;
  max-width: 78%;
  cursor: pointer;
}
body.v4 .cp-attachment.me { align-self: flex-end; }
body.v4 .cp-attach-icon {
  width: 32px; height: 32px;
  background: rgba(0,113,227,0.10);
  color: var(--g-blue);
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  font-size: 14px; font-weight: 700;
}
body.v4 .cp-attach-name { font-size: 12px; font-weight: 600; color: var(--g-ink-1); }
body.v4 .cp-attach-meta { font-size: 10.5px; color: var(--g-ink-4); }
body.v4 .cp-empty {
  text-align: center;
  font-size: 12.5px;
  color: var(--g-ink-4);
  padding: 40px 12px;
}

body.v4 .cp-composer {
  padding: 10px 12px;
  border-top: 1px solid rgba(0,0,0,0.05);
  background: var(--g-surface);
  display: flex; align-items: flex-end; gap: 8px;
}
body.v4 .cp-composer-input {
  flex: 1;
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 14px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--g-ink-1);
  font-family: var(--g-fd);
  min-height: 36px;
  max-height: 120px;
  line-height: 1.4;
  resize: none;
  outline: none;
}
body.v4 .cp-attach {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(0,0,0,0.04);
  display: grid; place-items: center;
  color: var(--g-ink-3);
  font-size: 14px; cursor: pointer;
  flex-shrink: 0;
}
body.v4 .cp-send {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--g-blue);
  color: var(--on-accent);
  display: grid; place-items: center;
  cursor: pointer; flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0,113,227,0.28);
  font-size: 16px;
}

/* Bubble stack collapsed */
body.v4 .cp-bubbles {
  position: fixed;
  bottom: 24px; right: 24px;
  display: flex; flex-direction: column; gap: 8px;
  align-items: flex-end;
}
body.v4 .cp-bubble {
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--on-accent);
  font-size: 18px; font-weight: 700; font-family: var(--g-fd);
  box-shadow: 0 8px 22px rgba(0,0,0,0.18);
  cursor: pointer;
  position: relative;
  border: 3px solid #fff;
  transition: transform 0.12s ease;
  overflow: hidden;
}
body.v4 .cp-bubble img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
body.v4 .cp-bubble:hover { transform: translateY(-3px); }
body.v4 .cp-bubble-unread {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 22px; height: 22px;
  border-radius: var(--r-pill);
  background: var(--g-cherry);
  color: var(--on-accent);
  font-size: 10.5px; font-weight: 700;
  display: grid; place-items: center;
  border: 2px solid #fff;
  letter-spacing: 0.02em; padding: 0 4px;
}
body.v4 .cp-bubble-more {
  background: rgba(0,0,0,0.08) !important;
  color: var(--g-ink-3);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  font-size: 13px;
}

/* Wave 180 - make a new message visibly "pop": the unread badge springs in,
   and a bubble carrying an unread count gives a couple of attention nudges. */
@keyframes cp-pop {
  0%   { transform: scale(0); }
  70%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}
@keyframes cp-nudge {
  0%, 100% { transform: translateY(0); }
  30%      { transform: translateY(-7px); }
  60%      { transform: translateY(0); }
}
body.v4 .cp-bubble-unread { animation: cp-pop 0.34s cubic-bezier(0.34, 1.56, 0.64, 1); }
body.v4 .cp-bubble:has(.cp-bubble-unread) { animation: cp-nudge 0.5s ease 2; }
@media (prefers-reduced-motion: reduce) {
  body.v4 .cp-bubble-unread,
  body.v4 .cp-bubble:has(.cp-bubble-unread) { animation: none; }
}

/* Chat icon attached to team rows on Dashboard */
body.v4 .team-chat-icon {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(0,113,227,0.08);
  color: var(--g-blue);
  display: inline-grid; place-items: center;
  font-size: 14px; cursor: pointer;
  margin-left: 8px;
  border: 1px solid rgba(0,113,227,0.18);
  transition: background 0.12s ease, color 0.12s ease;
}
body.v4 .team-chat-icon:hover { background: var(--g-blue); color: var(--on-accent); }
body.v4 .team-chat-icon.disabled { opacity: 0.4; cursor: default; }

/* ═══════════════════════════════════════════════════════════════════
   WAVE 161.B · Squiggly-arrow product tour.
   ═══════════════════════════════════════════════════════════════════ */

body.v4 .tour-overlay {
  position: fixed; inset: 0;
  z-index: 2000;
  pointer-events: none;
}
body.v4 .tour-dim {
  position: fixed; inset: 0;
  background: rgba(29,29,31,0.42);
  backdrop-filter: blur(2px);
  pointer-events: auto;
}
body.v4 .tour-arrow-svg {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
}
body.v4 .tour-highlight {
  position: relative;
  z-index: 10 !important;
  outline: 2px solid var(--g-blue) !important;
  outline-offset: 3px;
  border-radius: 10px;
  box-shadow: 0 0 0 6px rgba(0,113,227,0.12);
}
body.v4 .tour-tip {
  position: fixed;
  width: 280px;
  /* Wave 185 - long interactive steps (e.g. email subscriptions) overflowed
     off-screen with no way to scroll to the list or the Save button. Cap to
     the viewport and let the tip scroll. */
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 18px 44px rgba(0,0,0,0.20);
  backdrop-filter: blur(28px) saturate(180%);
  pointer-events: auto;
  z-index: 5;
  font-family: var(--g-fd);
}
body.v4 .tour-tip-eye {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--g-blue);
  margin-bottom: 6px;
}
body.v4 .tour-tip-title {
  font-size: 14.5px; font-weight: 700;
  letter-spacing: -0.008em;
  color: var(--g-ink-1);
  line-height: 1.3;
  margin: 0 0 6px;
}
body.v4 .tour-tip-body {
  font-size: 12.5px; line-height: 1.55;
  color: var(--g-ink-2);
  letter-spacing: -0.003em;
}
body.v4 .tour-tip-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,0.05);
}
body.v4 .tour-dots {
  display: flex; gap: 5px; align-items: center;
}
body.v4 .tour-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(0,0,0,0.10);
}
body.v4 .tour-dot.on {
  background: var(--g-blue);
  width: 18px;
  border-radius: var(--r-pill);
}
body.v4 .tour-cta-row { display: flex; gap: 8px; align-items: center; }
body.v4 .tour-skip {
  font-size: 11px;
  color: var(--g-ink-4);
  text-decoration: underline;
  text-decoration-color: rgba(0,0,0,0.2);
  text-underline-offset: 2px;
}
body.v4 .tour-go {
  all: unset;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-size: 12px; font-weight: 500;
  background: var(--g-cherry);
  color: var(--on-accent);
  box-shadow: 0 4px 10px rgba(184,0,43,0.28);
  cursor: pointer;
  font-family: var(--g-fd);
}

/* Welcome intro - same Liquid Glass shell, larger + centred. */
body.v4 .tour-tip-intro {
  padding: 28px 32px 24px;
  border-radius: var(--r-xl);
  text-align: center;
}
body.v4 .tour-tip-intro .tour-tip-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.020em;
  line-height: 1.2;
  margin: 6px 0 12px;
}
body.v4 .tour-tip-intro .tour-tip-body {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--g-ink-2);
  max-width: 320px;
  margin: 0 auto 6px;
}
body.v4 .tour-tip-intro .tour-tip-foot-intro {
  display: flex; align-items: center; justify-content: center;
  gap: 16px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(0,0,0,0.05);
}
body.v4 .tour-tip-intro .tour-go {
  padding: 11px 22px;
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: 0 8px 22px rgba(184,0,43,0.28);
}

/* ═══════════════════════════════════════════════════════════════════
   WAVE 164 · Feedback popup polish + What's-new badge + admin inbox
   - Feedback popup textarea grows, footer buttons shrink to fb-btn
   - Attachment row with file-picker label + chip showing picked file
   - tb-pill-badge: small cherry pip on the What's new button
   - Feedback inbox page styles (stat tiles, cards, status segs)
   ═══════════════════════════════════════════════════════════════════ */

/* What's-new unseen badge - small cherry pip on the right of the pill.
   Mirrors the unread-count chip used in director cards.
   Wave 166 - explicit [hidden] override. inline-flex was winning over
   the HTML hidden attribute, so the empty badge rendered as a tiny
   red dot even when the user had no unseen releases. */
body.v4 .tb-pill-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--g-cherry);
  color: var(--on-accent);
  font-size: 10px;
  font-weight: 700;
  font-family: var(--g-fd);
  letter-spacing: 0.02em;
  box-shadow: 0 2px 5px rgba(184, 0, 43, 0.35);
  margin-left: 2px;
}
body.v4 .tb-pill-badge[hidden] { display: none !important; }

/* Feedback popup - bigger textarea, attachment row, smaller buttons.
   Wave 166 - modal widened so the footer hint fits on one line and
   the buttons sit further right. Also defensively keeps the × close
   button as a non-shrinking circle so a wider title block can't
   squash it. */
body.v4 .fb-modal { max-width: 620px; }
body.v4 .fb-modal .ep-modal-head {
  display: flex !important;
  align-items: flex-start;
  gap: 14px;
}
body.v4 .fb-modal .ep-modal-head > div:first-child { flex: 1; min-width: 0; }
body.v4 .fb-modal .ep-modal-close {
  flex-shrink: 0;
  width: 32px !important;
  height: 32px !important;
  border-radius: var(--r-pill) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  padding: 0 !important;
  margin-top: 2px;
}

body.v4 .fb-ta-wrap textarea {
  min-height: 180px;          /* up from 90 - Peter asked for bigger box */
  font-size: 14px;
  line-height: 1.6;
}

body.v4 .fb-attach-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 0;
  flex-wrap: wrap;
}
body.v4 .fb-attach-pick {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  background: rgba(0, 113, 227, 0.08);
  color: var(--g-blue);
  border: 1px solid rgba(0, 113, 227, 0.18);
  border-radius: var(--r-pill);
  font-size: 12.5px;
  font-weight: 600;
  font-family: var(--g-fd);
  cursor: pointer;
  transition: background 0.12s ease, transform 0.12s ease;
}
body.v4 .fb-attach-pick:hover {
  background: rgba(0, 113, 227, 0.14);
  transform: translateY(-1px);
}
body.v4 .fb-attach-pick svg { stroke: var(--g-blue); }

body.v4 .fb-attach-state {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px 7px 14px;
  background: rgba(0, 0, 0, 0.035);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--r-pill);
  font-size: 12.5px;
  font-family: var(--g-fd);
  color: var(--g-ink-1);
}
/* Wave 166 - explicit [hidden] override. inline-flex was winning over
   the HTML hidden attribute, so the empty pill rendered as a small
   circle to the right of the attach button. */
body.v4 .fb-attach-state[hidden] { display: none !important; }
body.v4 .fb-attach-state .fb-attach-name {
  font-weight: 600;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.v4 .fb-attach-state .fb-attach-size {
  color: var(--g-ink-4);
  font-weight: 500;
}
body.v4 .fb-attach-state .fb-attach-x {
  border: none;
  background: transparent;
  color: var(--g-ink-4);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  margin-left: 2px;
}
body.v4 .fb-attach-state .fb-attach-x:hover { color: var(--g-cherry); }

/* Footer - smaller pill buttons sized to the modal.
   Wave 166 - hint had max-width 260px which forced the copy onto
   two lines. Dropped the cap so the longer modal lets it sit on one
   line; flex:1 still pushes the buttons hard to the right. */
body.v4 .fb-foot { padding: 14px 28px 20px !important; gap: 14px; align-items: center; }
body.v4 .fb-foot-hint {
  flex: 1;
  font-size: 11.5px;
  color: var(--g-ink-4);
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.v4 .fb-btn {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 16px;
  border-radius: var(--r-pill);
  font-family: var(--g-fd);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: -0.003em;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
body.v4 .fb-btn:hover { transform: translateY(-1px); }
body.v4 .fb-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}
body.v4 .fb-btn-secondary {
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: var(--g-ink-1);
}
body.v4 .fb-btn-secondary:hover { background: rgba(255, 255, 255, 0.88); }
body.v4 .fb-btn-primary {
  background: var(--g-cherry);
  color: var(--on-accent);
  box-shadow: 0 4px 12px rgba(184, 0, 43, 0.26);
}
body.v4 .fb-btn-primary:hover {
  background: #a30026;
  box-shadow: 0 6px 16px rgba(184, 0, 43, 0.34);
}

/* ═══ Feedback inbox page ═══════════════════════════════════════ */

body.v4 .fb-stat-row { margin-top: 14px; gap: 12px; }
body.v4 .fb-stat-tile {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
body.v4 .fb-stat-num {
  font-family: var(--g-fd);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.1;
}
body.v4 .fb-stat-num.fb-st-new     { color: var(--g-cherry); }
body.v4 .fb-stat-num.fb-st-rev     { color: var(--g-blue); }
body.v4 .fb-stat-num.fb-st-ship    { color: var(--green-ios); }
body.v4 .fb-stat-num.fb-st-wontfix { color: var(--g-ink-4); }
body.v4 .fb-stat-label {
  font-size: 11.5px;
  color: var(--g-ink-4);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.v4 .fb-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 14px;
}
body.v4 .fb-toolbar-spacer { flex: 1; }
body.v4 .fb-toolbar-hint {
  font-size: 12px;
  color: var(--g-ink-4);
}
body.v4 .fb-filter-seg {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: 4px;
  border-radius: var(--r-pill);
  gap: 4px;
}
body.v4 .fb-filter-opt {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-size: 12.5px;
  font-weight: 600;
  font-family: var(--g-fd);
  color: var(--g-ink-3);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
body.v4 .fb-filter-opt:hover { color: var(--g-ink-1); }
body.v4 .fb-filter-opt.on {
  background: var(--g-blue);
  color: var(--on-accent);
}
body.v4 .fb-filter-count {
  display: inline-flex;
  min-width: 18px;
  padding: 0 6px;
  height: 16px;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, 0.06);
  color: var(--g-ink-3);
  font-size: 10.5px;
  font-weight: 700;
  align-items: center;
  justify-content: center;
}
body.v4 .fb-filter-opt.on .fb-filter-count {
  background: rgba(255, 255, 255, 0.22);
  color: var(--on-accent);
}

body.v4 .fb-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
body.v4 .fb-card {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
body.v4 .fb-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
body.v4 .fb-card-avatar {
  width: 34px;
  height: 34px;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--brain-accent), var(--g-blue));
  color: var(--on-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--g-fd);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.02em;
  overflow: hidden;
}
body.v4 .fb-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.v4 .fb-card-meta { flex: 1; min-width: 0; }
body.v4 .fb-card-who {
  font-family: var(--g-fd);
  font-weight: 600;
  font-size: 14px;
  color: var(--g-ink-1);
  letter-spacing: -0.005em;
}
body.v4 .fb-card-sub {
  font-size: 11.5px;
  color: var(--g-ink-4);
  letter-spacing: 0.02em;
  margin-top: 2px;
}

body.v4 .fb-status-pill {
  display: inline-flex;
  padding: 4px 11px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
}
body.v4 .fb-status-pill.fb-st-new {
  background: rgba(184, 0, 43, 0.10);
  color: var(--g-cherry);
  border-color: rgba(184, 0, 43, 0.22);
}
body.v4 .fb-status-pill.fb-st-rev {
  background: rgba(0, 113, 227, 0.10);
  color: var(--g-blue);
  border-color: rgba(0, 113, 227, 0.22);
}
body.v4 .fb-status-pill.fb-st-ship {
  background: rgba(52, 199, 89, 0.12);
  color: var(--green-strong);
  border-color: rgba(52, 199, 89, 0.30);
}
body.v4 .fb-status-pill.fb-st-wontfix {
  background: rgba(0, 0, 0, 0.05);
  color: var(--g-ink-4);
  border-color: rgba(0, 0, 0, 0.08);
}

body.v4 .fb-card-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--g-ink-1);
  white-space: pre-wrap;
  word-wrap: break-word;
  background: rgba(0, 0, 0, 0.025);
  border-radius: var(--r);
  padding: 14px 16px;
}

body.v4 .fb-attach-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(0, 113, 227, 0.08);
  border: 1px solid rgba(0, 113, 227, 0.18);
  color: var(--g-blue);
  border-radius: var(--r-pill);
  font-size: 12.5px;
  font-weight: 600;
  font-family: var(--g-fd);
  text-decoration: none;
  align-self: flex-start;
  transition: background 0.12s ease;
}
body.v4 .fb-attach-link:hover { background: rgba(0, 113, 227, 0.14); }
body.v4 .fb-attach-link-size {
  color: var(--g-ink-4);
  font-weight: 500;
}

body.v4 .fb-notes-wrap { display: flex; flex-direction: column; gap: 6px; }
body.v4 .fb-notes-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--g-ink-4);
}
body.v4 .fb-notes {
  width: 100%;
  resize: vertical;
  min-height: 50px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.7);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: var(--g-fd);
  font-size: 13px;
  color: var(--g-ink-1);
  outline: none;
  line-height: 1.55;
}
body.v4 .fb-notes:focus {
  border-color: rgba(0, 113, 227, 0.30);
  background: var(--g-surface);
}

body.v4 .fb-card-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
body.v4 .fb-status-seg {
  display: inline-flex;
  gap: 4px;
  background: rgba(0, 0, 0, 0.035);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--r-pill);
  padding: 3px;
}
body.v4 .fb-status-opt {
  all: unset;
  padding: 5px 11px;
  font-size: 11.5px;
  font-weight: 600;
  font-family: var(--g-fd);
  border-radius: var(--r-pill);
  color: var(--g-ink-3);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
body.v4 .fb-status-opt:hover { color: var(--g-ink-1); }
body.v4 .fb-status-opt.on.fb-st-new     { background: var(--g-cherry); color: var(--on-accent); }
body.v4 .fb-status-opt.on.fb-st-rev     { background: var(--g-blue); color: var(--on-accent); }
body.v4 .fb-status-opt.on.fb-st-ship    { background: var(--green-ios); color: var(--on-accent); }
body.v4 .fb-status-opt.on.fb-st-wontfix { background: var(--g-ink-3); color: var(--on-accent); }

body.v4 .fb-card-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
body.v4 .fb-go-page {
  font-size: 12px;
  color: var(--g-blue);
  text-decoration: none;
  font-weight: 600;
  font-family: var(--g-fd);
}
body.v4 .fb-go-page:hover { text-decoration: underline; }
body.v4 .fb-save-notes {
  all: unset;
  padding: 6px 14px;
  background: var(--g-blue);
  color: var(--on-accent);
  font-family: var(--g-fd);
  font-weight: 600;
  font-size: 12px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background 0.12s ease, transform 0.12s ease;
}
body.v4 .fb-save-notes:hover { background: #0058b1; transform: translateY(-1px); }
body.v4 .fb-save-notes:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* H6 - Feedback inbox dark mode: the cards/tiles get the apple-glass gradient
   via their .card class, but the bespoke inner controls used light backgrounds
   with no dark treatment (they'd read wrong on the gradient). Flip them to
   translucent-white glass. Token/rgba only. */
body.v4.dark .fb-filter-seg { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); }
body.v4.dark .fb-filter-count { background: rgba(255,255,255,.12); color: rgba(255,255,255,.7); }
body.v4.dark .fb-card-body { background: rgba(255,255,255,.05); }
body.v4.dark .fb-notes { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
body.v4.dark .fb-notes:focus { background: rgba(255,255,255,.10); border-color: rgba(0,113,227,.5); }
body.v4.dark .fb-status-seg { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.10); }
body.v4.dark .fb-status-pill.fb-st-wontfix { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); }
body.v4.dark .fb-attach-link { background: rgba(0,113,227,.16); border-color: rgba(0,113,227,.34); }

/* ═══════════════════════════════════════════════════════════════════
   WAVE 165 · Tour rebuild - mic icon welcome + avatar + email subs
   - Mic icon at top of welcome card
   - Larger headline + softer body
   - Cherry / Apple-blue CTA variants
   - Interactive avatar step (preview circle + upload button)
   - Interactive email-subs step (rows with checkboxes + freq pill)
   ═══════════════════════════════════════════════════════════════════ */

body.v4 .tour-mic {
  display: flex;
  justify-content: center;
  margin-bottom: 4px;
  filter: drop-shadow(0 8px 20px rgba(184, 0, 43, 0.28));
}
body.v4 .tour-mic svg { width: 64px; height: 64px; }

body.v4 .tour-tip-intro .tour-tip-eye {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--g-cherry);
  margin-top: 14px;
}
body.v4 .tour-tip-intro .tour-tip-title-xl {
  font-size: 30px !important;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 10px 0 14px !important;
  background: linear-gradient(135deg, #1d1d1f 0%, var(--g-ink-2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* CTA variants on interactive / intro cards */
body.v4 .tour-tip-intro .tour-go-cherry {
  background: var(--g-cherry);
  color: var(--on-accent);
  box-shadow: 0 8px 22px rgba(184, 0, 43, 0.28);
}
body.v4 .tour-tip-intro .tour-go-cherry:hover { background: #a30026; }
body.v4 .tour-tip-intro .tour-go-blue {
  background: var(--g-blue);
  color: var(--on-accent);
  box-shadow: 0 8px 22px rgba(0, 113, 227, 0.32);
}
body.v4 .tour-tip-intro .tour-go-blue:hover { background: #0058b1; }

/* ─── Avatar step ─────────────────────────────────────────── */
body.v4 .tour-avatar-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 18px 0 4px;
  padding: 18px;
  background: rgba(0, 0, 0, 0.025);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: var(--r-lg);
}
body.v4 .tour-avatar-preview {
  width: 96px;
  height: 96px;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--brain-accent), var(--g-blue));
  color: var(--on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--g-fd);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: 0.02em;
  background-size: cover;
  background-position: center;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
}
body.v4 .tour-avatar-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
body.v4 .tour-avatar-pick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: var(--g-blue);
  color: var(--on-accent);
  border-radius: var(--r-pill);
  font-family: var(--g-fd);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.12s ease;
}
body.v4 .tour-avatar-pick:hover { background: #0058b1; transform: translateY(-1px); }
body.v4 .tour-avatar-state {
  font-size: 12px;
  font-weight: 500;
  color: var(--g-ink-3);
}
body.v4 .tour-avatar-state[data-ok="1"] { color: var(--green-strong); font-weight: 600; }
body.v4 .tour-avatar-state[data-ok="0"] { color: var(--g-cherry); }

/* ─── Email subscriptions step ────────────────────────────── */
body.v4 .tour-subs-tools {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 12px 0 10px;
}
body.v4 .tour-subs-all,
body.v4 .tour-subs-none {
  all: unset;
  padding: 5px 14px;
  border-radius: var(--r-pill);
  font-family: var(--g-fd);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.12s ease;
}
body.v4 .tour-subs-all {
  background: rgba(0, 113, 227, 0.10);
  color: var(--g-blue);
  border-color: rgba(0, 113, 227, 0.22);
}
body.v4 .tour-subs-all:hover { background: rgba(0, 113, 227, 0.16); }
body.v4 .tour-subs-none {
  background: rgba(0, 0, 0, 0.04);
  color: var(--g-ink-3);
  border-color: rgba(0, 0, 0, 0.08);
}
body.v4 .tour-subs-none:hover { background: rgba(0, 0, 0, 0.08); }

/* Wave 167 - two clearly-separated groups inside the subs step.
   The scroller wraps both groups so the whole list can scroll together;
   each group has its own header explaining what it is and what cadence
   the rows follow. */
body.v4 .tour-subs-scroller {
  max-height: 340px;
  overflow-y: auto;
  padding: 4px 4px 4px 2px;
  text-align: left;
  margin-bottom: 6px;
}
body.v4 .tour-subs-group {
  margin-bottom: 14px;
}
body.v4 .tour-subs-group:last-child { margin-bottom: 0; }
body.v4 .tour-subs-group-head {
  padding: 10px 4px 10px 4px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  margin-bottom: 8px;
}
body.v4 .tour-subs-group-name {
  font-family: var(--g-fd);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--g-ink-1);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
body.v4 .tour-subs-group-sub {
  font-size: 11.5px;
  color: var(--g-ink-4);
  line-height: 1.5;
  margin-top: 4px;
}
body.v4 .tour-subs-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}
body.v4 .tour-sub-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: background 0.12s ease;
}
body.v4 .tour-sub-row:hover { background: rgba(255, 255, 255, 0.78); }
body.v4 .tour-sub-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--g-blue);
  flex-shrink: 0;
}
body.v4 .tour-sub-meta { flex: 1; min-width: 0; }
body.v4 .tour-sub-name {
  font-family: var(--g-fd);
  font-weight: 600;
  font-size: 13px;
  color: var(--g-ink-1);
  letter-spacing: -0.003em;
}
body.v4 .tour-sub-desc {
  font-size: 11.5px;
  color: var(--g-ink-4);
  line-height: 1.4;
  margin-top: 1px;
}
body.v4 .tour-sub-freq {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: rgba(0, 113, 227, 0.10);
  color: var(--g-blue);
  border: 1px solid rgba(0, 113, 227, 0.22);
  flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════════
   WAVE 171.B · Unified Episode Surface - v5 prototype styles.
   Pipeline rail on the LEFT with Notes greyed at the bottom.
   Right rail = 5 info panels (Booking · Dossier · Files · AI · Log).
   Every step has a human-owner avatar. AI artefact rows use the
   blue-card-with-sparkle icon Peter approved in v5 feedback.
   All classes prefixed `es-` to keep clear of the legacy popup/centre.
   ═══════════════════════════════════════════════════════════════════ */

body.v4 .es-stage-bg {
  padding: 20px;
  background: linear-gradient(135deg, rgba(0,113,227,0.03), rgba(94,92,230,0.04));
  border-radius: 28px;
  border: 1px solid var(--g-border);
  margin: 16px;
}

/* Wave 193 - surface is a vertical stack now (header / stepper / body).
   The 2-col split moved onto .es-body. */
body.v4 .es-surf {
  background: var(--g-surface);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 24px 56px rgba(0,0,0,0.20);
  display: flex;
  flex-direction: column;
  min-height: 780px;
}

/* HEADER */
body.v4 .es-head {
  padding: 16px 28px;
  background: linear-gradient(180deg, rgba(0,113,227,0.04), transparent);
  border-bottom: 1px solid var(--g-border);
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
body.v4 .es-head-main { flex: 1; min-width: 0; }
body.v4 .es-eye {
  font-size: 11px; letter-spacing: 0.10em;
  color: var(--g-ink-4); font-weight: 600;
  margin-bottom: 4px;
}
body.v4 .es-title {
  font-size: 24px; font-weight: 800;
  letter-spacing: -0.018em; line-height: 1.18;
  margin: 0 0 6px;
  padding: 2px 6px; margin-left: -6px;
  border-radius: 6px; cursor: text;
  display: inline-block; max-width: 100%;
  font-family: var(--g-fd);
}
body.v4 .es-title:hover { background: rgba(0,113,227,0.04); }
body.v4 .es-meta {
  display: flex; align-items: center;
  gap: 10px; font-size: 12.5px;
  color: var(--g-ink-3); flex-wrap: wrap;
}
body.v4 .es-meta strong { color: var(--g-ink-1); font-weight: 700; }
body.v4 .es-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--g-ink-4); }
body.v4 .es-head-acts { display: flex; gap: 6px; flex-shrink: 0; }
body.v4 .es-icon-btn {
  width: 32px; height: 32px;
  border-radius: var(--r-pill);
  background: rgba(0,0,0,0.05);
  color: var(--g-ink-3);
  display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 14px; border: none; cursor: pointer;
  transition: all 0.15s ease;
}
body.v4 .es-icon-btn:hover { background: rgba(0,0,0,0.10); color: var(--g-ink-1); }

/* Stage pill in header */
body.v4 .es-stage-pill {
  display: inline-flex; align-items: center;
  gap: 5px; padding: 3px 9px;
  border-radius: var(--r-pill); font-size: 11px;
  font-weight: 700; letter-spacing: 0.02em;
}
body.v4 .es-stage-pill-hp     { background: rgba(184,0,43,0.08);  color: var(--g-cherry); }
body.v4 .es-stage-pill-booked { background: rgba(0,113,227,0.10); color: var(--g-blue); }
body.v4 .es-stage-pill-rec    { background: rgba(94,92,230,0.10); color: var(--brain-accent); }
body.v4 .es-stage-pill-ie     { background: rgba(90,200,250,0.14);color: #007e9a; }
body.v4 .es-stage-pill-sch    { background: rgba(255,159,10,0.12);color: #c47100; }
body.v4 .es-stage-pill-pub    { background: rgba(52,199,89,0.14); color: var(--green-strong); }

/* Wave 193 - LEFT RAIL removed (.es-left, .es-stage-card*, .es-stage-num,
   .es-stage-prog*, .es-notes-block, .es-notes-h*). Replaced by the
   horizontal stepper (.es-stepper / .es-marker*) and the right-rail notes
   accordion. .es-notes-ta is redefined in the Wave 177.28 block below and
   reused by the accordion, so no notes-textarea rule is lost. */

/* CENTRE MAIN */
body.v4 .es-main { overflow-y: auto; padding: 24px 30px 28px; max-height: 780px; background: #f6f6f3; }
body.v4 .es-main::-webkit-scrollbar { width: 10px; }
body.v4 .es-main::-webkit-scrollbar-track { background: transparent; }
body.v4 .es-main::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.10); border-radius: var(--r-pill); }

/* Wave 193 - .es-prog* (in-main progress bar + counts + title/sub) removed.
   The stepper carries progress; .es-stage-led carries the stage intro. */

/* Numbered flow */
body.v4 .es-flow { display: flex; flex-direction: column; gap: 12px; }
body.v4 .es-step {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 18px; background: var(--g-surface);
  border: 1px solid var(--g-border); border-radius: 14px;
  transition: all 0.15s ease;
}
body.v4 .es-step:hover { border-color: rgba(0,113,227,0.20); }
body.v4 .es-step-done {
  background: rgba(52,199,89,0.03);
  border-color: rgba(52,199,89,0.18);
}
body.v4 .es-step-current {
  background: linear-gradient(135deg, rgba(0,113,227,0.04), rgba(94,92,230,0.03));
  border-color: var(--g-blue);
  box-shadow: 0 0 0 3px rgba(0,113,227,0.10);
}
body.v4 .es-step-locked { opacity: 0.55; background: rgba(0,0,0,0.02); }
body.v4 .es-step-pending { opacity: 1; background: var(--g-surface); }

body.v4 .es-step-num {
  width: 30px; height: 30px; border-radius: var(--r-pill);
  background: rgba(0,0,0,0.06); color: var(--g-ink-3);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0;
  border: 2px solid white;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
  font-family: var(--g-fd);
}
body.v4 .es-step-done .es-step-num { background: var(--green-ios); color: white; }
body.v4 .es-step-current .es-step-num {
  background: var(--g-blue); color: white;
  box-shadow: 0 0 0 4px rgba(0,113,227,0.18);
}

body.v4 .es-step-body { flex: 1; min-width: 0; }
body.v4 .es-step-h {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px; flex-wrap: wrap;
}
body.v4 .es-step-title {
  font-size: 14.5px; font-weight: 700;
  color: var(--g-ink-1); letter-spacing: -0.005em;
  font-family: var(--g-fd);
}
body.v4 .es-step-done .es-step-title { color: var(--g-ink-3); }
body.v4 .es-step-type {
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 7px; border-radius: var(--r-pill);
  background: rgba(0,0,0,0.04); color: var(--g-ink-4);
}
body.v4 .es-step-type-form   { background: rgba(0,113,227,0.10); color: var(--g-blue); }
body.v4 .es-step-type-upload { background: rgba(94,92,230,0.10); color: var(--brain-accent); }
body.v4 .es-step-type-tick   { background: rgba(52,199,89,0.12); color: var(--green-strong); }
body.v4 .es-step-type-auto   { background: rgba(255,159,10,0.14); color: #c47100; }
body.v4 .es-step-type-action { background: rgba(184,0,43,0.10); color: var(--g-cherry); }

/* Owner chip + avatar */
body.v4 .es-owner {
  display: inline-flex; align-items: center;
  gap: 5px; padding: 2px 8px 2px 3px;
  background: rgba(0,0,0,0.04); border-radius: var(--r-pill);
  font-size: 10.5px; color: var(--g-ink-2);
  font-weight: 600; margin-left: auto;
}
body.v4 .es-av {
  width: 18px; height: 18px; border-radius: var(--r-pill);
  color: white; display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; letter-spacing: 0.02em;
}
body.v4 .es-av-peter   { background: linear-gradient(135deg, var(--g-blue), var(--brain-accent)); }
body.v4 .es-av-curt    { background: linear-gradient(135deg, var(--amber-ios), var(--g-cherry)); }
body.v4 .es-av-chelsea { background: linear-gradient(135deg, var(--green-ios), #5ac8fa); }
body.v4 .es-av-alec    { background: linear-gradient(135deg, var(--brain-accent), var(--g-cherry)); }
body.v4 .es-av-ai      { background: linear-gradient(135deg, var(--brain-accent), var(--g-blue)); }
body.v4 .es-av-sys     { background: linear-gradient(135deg, var(--g-ink-4), var(--g-ink-3)); }

body.v4 .es-step-sub {
  font-size: 12.5px; color: var(--g-ink-4);
  line-height: 1.5; margin-bottom: 10px;
}
body.v4 .es-step-summary {
  background: rgba(52,199,89,0.06);
  border: 1px solid rgba(52,199,89,0.18);
  border-radius: var(--r-sm); padding: 7px 11px;
  font-size: 12.5px; color: var(--green-strong); font-weight: 600;
}

/* Form inline */
body.v4 .es-fminline { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
body.v4 .es-fld-full { grid-column: 1 / -1; }
body.v4 .es-fld { display: flex; flex-direction: column; gap: 4px; }
body.v4 .es-fld label {
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--g-ink-4);
}
body.v4 .es-fld input,
body.v4 .es-fld select {
  padding: 8px 11px; background: var(--g-surface);
  border: 1px solid var(--g-border);
  border-radius: var(--r-sm); font-size: 12.5px;
  color: var(--g-ink-1); font-family: var(--g-fd);
  outline: none;
}
body.v4 .es-fld input:focus, body.v4 .es-fld select:focus { border-color: var(--g-blue); }
/* CREATE MODE - locked preview of the rest of the prospect surface below the
   booking form. The booking form (with the role-aware sys_advertiser element)
   sits enabled at the top; this block shows what the deal becomes, dimmed +
   inert, until the advertiser is set and the deal is created. */
body.v4 .ds-create-locked { margin-top: 6px; }
/* Segmented control (booking type) - mirrors the .es-fld control styling.
   Reused by the role-aware sys_advertiser element's Internal/Agency choice. */
body.v4 .es-seg { display: inline-flex; gap: 0; background: var(--g-surface); border: 1px solid var(--g-border); border-radius: var(--r-sm); overflow: hidden; }
body.v4 .es-seg-btn {
  appearance: none; border: none; background: transparent; cursor: pointer;
  padding: 8px 14px; font-size: 12.5px; font-weight: 600; font-family: var(--g-fd);
  color: var(--g-ink-3); white-space: nowrap;
}
body.v4 .es-seg-btn + .es-seg-btn { border-left: 1px solid var(--g-border); }
body.v4 .es-seg-btn.on { background: var(--g-blue); color: var(--on-accent); }
/* Required-but-empty field on a failed save - showFormError() adds .es-fld-error
   to the field wrapper; make it visibly red (label + control border + halo). */
body.v4 .es-fld-error > label { color: var(--cherry); }
body.v4 .es-fld-error input,
body.v4 .es-fld-error select,
body.v4 .es-fld-error textarea,
body.v4 .es-fld-error .es-chip-input,
body.v4 .es-fld-error [data-sys] { border-color: var(--cherry) !important; box-shadow: 0 0 0 3px var(--cherry-bg); }
body.v4 .es-form-acts { display: flex; gap: 6px; margin-top: 10px; }
body.v4 .es-btn-primary {
  padding: 7px 14px; background: var(--g-blue);
  color: white; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 600;
  border: none; cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,113,227,0.20);
  font-family: var(--g-fd);
}
body.v4 .es-btn-secondary {
  padding: 7px 12px; background: var(--g-surface);
  color: var(--g-ink-2);
  border: 1px solid var(--g-border);
  border-radius: var(--r-pill);
  font-size: 12px; font-weight: 600; cursor: pointer;
  font-family: var(--g-fd);
}

/* Upload */
body.v4 .es-upload-drop {
  border: 2px dashed rgba(0,0,0,0.14);
  background: rgba(94,92,230,0.02);
  border-radius: 10px; padding: 18px;
  text-align: center; cursor: pointer;
  transition: all 0.15s ease;
}
body.v4 .es-upload-drop:hover {
  border-color: var(--brain-accent);
  background: rgba(94,92,230,0.06);
}
body.v4 .es-upload-h { font-size: 12.5px; font-weight: 600; color: var(--g-ink-2); }
body.v4 .es-upload-s { font-size: 10.5px; color: var(--g-ink-4); margin-top: 2px; }

/* Tick */
body.v4 .es-tick-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: rgba(52,199,89,0.04);
  border: 1px solid rgba(52,199,89,0.18);
  border-radius: 10px; cursor: pointer;
}
body.v4 .es-tick-row:hover { background: rgba(52,199,89,0.08); }
body.v4 .es-tick-box {
  width: 20px; height: 20px; border-radius: 5px;
  border: 2px solid var(--green-strong); background: var(--g-surface);
  flex-shrink: 0;
}
body.v4 .es-tick-text { font-size: 12.5px; color: var(--g-ink-2); font-weight: 600; }

/* Auto */
body.v4 .es-auto-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: rgba(255,159,10,0.04);
  border: 1px solid rgba(255,159,10,0.18);
  border-radius: 10px;
}
body.v4 .es-auto-row-live {
  background: rgba(0,113,227,0.04);
  border-color: rgba(0,113,227,0.22);
}
body.v4 .es-auto-ic, body.v4 .es-auto-ic-wait {
  width: 20px; height: 20px; border-radius: 5px;
  background: var(--amber-ios); color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; flex-shrink: 0;
}
body.v4 .es-auto-row-live .es-auto-ic {
  background: linear-gradient(135deg, var(--g-blue), var(--brain-accent));
}
body.v4 .es-auto-text { flex: 1; font-size: 12px; color: var(--g-ink-2); }
body.v4 .es-auto-text strong { color: var(--g-ink-1); font-weight: 700; }
body.v4 .es-auto-prog {
  height: 4px; width: 50px;
  background: rgba(0,113,227,0.10);
  border-radius: var(--r-pill);
  overflow: hidden; flex-shrink: 0;
}
body.v4 .es-auto-prog .bar {
  height: 100%; width: 60%;
  background: linear-gradient(90deg, var(--g-blue), var(--brain-accent));
  border-radius: var(--r-pill);
  animation: esSlideB 2s ease-in-out infinite;
}
@keyframes esSlideB {
  0%, 100% { width: 40%; }
  50%      { width: 80%; }
}

/* Action */
body.v4 .es-action-row { display: flex; align-items: center; gap: 10px; }
body.v4 .es-action-btn {
  padding: 8px 15px; background: var(--g-blue);
  color: white; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 600;
  border: none; cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,113,227,0.20);
  font-family: var(--g-fd);
}
body.v4 .es-action-meta { font-size: 11px; color: var(--g-ink-4); }

/* Advance row */
body.v4 .es-advance {
  margin-top: 24px; padding: 16px 20px;
  background: var(--g-surface); border: 2px solid var(--g-blue);
  border-radius: 14px;
  box-shadow: 0 0 0 4px rgba(0,113,227,0.06);
  display: flex; align-items: center; gap: 14px;
}
body.v4 .es-advance-locked {
  border-color: rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.02);
  box-shadow: none;
}
body.v4 .es-advance-t { flex: 1; }
body.v4 .es-advance-t h4 {
  font-size: 13.5px; font-weight: 700;
  margin: 0 0 2px; font-family: var(--g-fd);
  color: var(--g-ink-1);
}
body.v4 .es-advance-t p {
  font-size: 11.5px; color: var(--g-ink-4); margin: 0;
}
body.v4 .es-advance-cta {
  padding: 9px 18px; background: var(--g-blue);
  color: white; border-radius: var(--r-pill);
  font-size: 12.5px; font-weight: 600;
  border: none; cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,113,227,0.26);
  font-family: var(--g-fd);
}
body.v4 .es-advance-cta:disabled {
  background: rgba(0,0,0,0.10);
  color: var(--g-ink-4);
  box-shadow: none; cursor: not-allowed;
}

/* RIGHT RAIL - 5 info panels */
body.v4 .es-right {
  border-left: 1px solid var(--g-border);
  background: rgba(0,0,0,0.02);
  padding: 16px 14px;
  overflow-y: auto;
  max-height: 780px;
  display: flex; flex-direction: column;
  gap: 12px;
}
body.v4 .es-right::-webkit-scrollbar { width: 8px; }
body.v4 .es-right::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.10);
  border-radius: var(--r-pill);
}

body.v4 .es-panel {
  background: var(--g-surface);
  border: 1px solid var(--g-border);
  border-radius: var(--r);
  padding: 14px 14px;
}
body.v4 .es-panel-h {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
body.v4 .es-panel-name {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--g-ink-4);
}
body.v4 .es-panel-expand {
  font-size: 10.5px; color: var(--g-blue);
  font-weight: 700; cursor: pointer;
  background: none; border: none; padding: 0;
  font-family: var(--g-fd);
}
body.v4 .es-panel-expand:hover { text-decoration: underline; }
body.v4 .es-panel-empty {
  font-size: 11.5px; color: var(--g-ink-4);
  font-style: italic; padding: 4px 0;
}

body.v4 .es-booking-line {
  display: flex; justify-content: space-between;
  padding: 5px 0; font-size: 12px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
body.v4 .es-booking-line:last-child { border-bottom: none; }
body.v4 .es-booking-l {
  color: var(--g-ink-4); font-weight: 600;
  letter-spacing: 0.02em;
}
body.v4 .es-booking-v { color: var(--g-ink-1); font-weight: 600; }
body.v4 .es-booking-v-good { color: var(--green-strong); }

body.v4 .es-dos-mini { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
body.v4 .es-dos-av {
  width: 36px; height: 36px; border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--brain-accent), var(--g-blue));
  color: white; display: flex;
  align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  flex-shrink: 0; font-family: var(--g-fd);
}
body.v4 .es-dos-name { font-size: 13px; font-weight: 700; color: var(--g-ink-1); font-family: var(--g-fd); }
body.v4 .es-dos-role { font-size: 10.5px; color: var(--g-ink-4); line-height: 1.3; }
body.v4 .es-dos-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
body.v4 .es-dos-tag {
  padding: 1px 7px; background: rgba(94,92,230,0.10);
  color: var(--brain-accent); border-radius: var(--r-pill);
  font-size: 10px; font-weight: 600;
}
body.v4 .es-dos-bottom { font-size: 10.5px; color: var(--g-ink-4); margin-top: 8px; }

body.v4 .es-file-mini {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  font-size: 11.5px;
}
body.v4 .es-file-mini:last-child { border-bottom: none; }
body.v4 .es-file-ic {
  width: 22px; height: 22px; border-radius: 5px;
  background: rgba(0,113,227,0.10);
  color: var(--g-blue);
  display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 8px; font-weight: 700;
  flex-shrink: 0; font-family: var(--g-fd);
}
body.v4 .es-file-ic-pdf { background: rgba(184,0,43,0.10); color: var(--g-cherry); }
body.v4 .es-file-ic-aud { background: rgba(255,159,10,0.14); color: #c47100; }
body.v4 .es-file-ic-img { background: rgba(52,199,89,0.14); color: var(--green-strong); }
body.v4 .es-file-ic-txt { background: rgba(94,92,230,0.10); color: var(--brain-accent); }
body.v4 .es-file-mini-name {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--g-ink-2); font-weight: 600;
}
body.v4 .es-file-mini-size { font-size: 10px; color: var(--g-ink-4); }

/* AI artefact rows - blue card + sparkle icon (Peter's v5 ask) */
body.v4 .es-art-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 4px; border-radius: var(--r-sm);
  text-decoration: none; color: inherit;
  cursor: pointer; transition: background 0.12s ease;
}
body.v4 .es-art-row:hover { background: rgba(0,113,227,0.04); }
body.v4 .es-art-row-locked { opacity: 0.55; }
body.v4 .es-art-ic {
  width: 30px; height: 30px; border-radius: var(--r-sm);
  background: rgba(0,113,227,0.10);
  display: inline-flex;
  align-items: center; justify-content: center;
  flex-shrink: 0;
}
body.v4 .es-art-ic svg { width: 16px; height: 16px; }
body.v4 .es-art-body { flex: 1; min-width: 0; }
body.v4 .es-art-name {
  font-size: 12.5px; font-weight: 700;
  color: var(--g-ink-1); font-family: var(--g-fd);
  line-height: 1.2;
}
body.v4 .es-art-sub {
  font-size: 10.5px; color: var(--g-ink-4); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
body.v4 .es-art-tag-live {
  color: var(--g-blue); font-size: 8px;
  animation: esPulseB 1.4s infinite;
}
@keyframes esPulseB {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
body.v4 .es-art-chev {
  color: var(--g-ink-4); font-size: 18px;
  font-weight: 300; margin-left: 2px;
}

/* Log mini */
body.v4 .es-log-mini { display: flex; gap: 8px; padding: 5px 0; font-size: 11px; }
body.v4 .es-log-dot {
  width: 6px; height: 6px; border-radius: 50%;
  margin-top: 6px; flex-shrink: 0;
}
body.v4 .es-log-dot-upload { background: var(--brain-accent); }
body.v4 .es-log-dot-stage  { background: var(--g-blue); }
body.v4 .es-log-dot-edit   { background: var(--amber-ios); }
body.v4 .es-log-dot-ai     { background: var(--green-ios); }
body.v4 .es-log-mini-body { flex: 1; color: var(--g-ink-3); line-height: 1.4; }
body.v4 .es-log-mini-body strong { color: var(--g-ink-1); font-weight: 700; }
body.v4 .es-log-mini-time { font-size: 10px; color: var(--g-ink-4); margin-top: 1px; }

/* ═══════════════════════════════════════════════════════════════════
   WAVE 172 · Search status pills · What's-new card redesign
   ═══════════════════════════════════════════════════════════════════ */

/* Global search row pill */
body.v4 .gs-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-left: 8px;
  vertical-align: middle;
  flex-shrink: 0;
}
body.v4 .gs-pill-prospect  { background: rgba(184,0,43,0.10);  color: var(--g-cherry); border: 1px solid rgba(184,0,43,0.20); }
body.v4 .gs-pill-booked    { background: rgba(0,113,227,0.10); color: var(--g-blue); border: 1px solid rgba(0,113,227,0.20); }
body.v4 .gs-pill-recorded  { background: rgba(94,92,230,0.10); color: var(--brain-accent); border: 1px solid rgba(94,92,230,0.22); }
body.v4 .gs-pill-inedit    { background: rgba(90,200,250,0.14);color: #007e9a; border: 1px solid rgba(90,200,250,0.30); }
body.v4 .gs-pill-scheduled { background: rgba(255,159,10,0.12);color: #c47100; border: 1px solid rgba(255,159,10,0.28); }
body.v4 .gs-pill-live      { background: rgba(52,199,89,0.14); color: var(--green-strong); border: 1px solid rgba(52,199,89,0.30); }
body.v4 .gs-pill-guest     { background: rgba(94,92,230,0.10); color: var(--brain-accent); border: 1px solid rgba(94,92,230,0.22); }
body.v4 .gs-pill-default   { background: rgba(0,0,0,0.05);     color: var(--g-ink-3); border: 1px solid rgba(0,0,0,0.08); }

/* Search row main needs to allow inline pills */
body.v4 .gsearch-row-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
}

/* What's new modal v2 */
body.v4 .ver-modal-v2 {
  max-width: 680px;
  background: rgba(255,255,255,0.98);
  border-radius: var(--r-xl);
  overflow: hidden;
}
body.v4 .ver-head {
  padding: 24px 28px 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border-bottom: 1px solid var(--g-border);
  background: linear-gradient(180deg, rgba(0,113,227,0.04), transparent);
}
body.v4 .ver-head-l { flex: 1; min-width: 0; }
body.v4 .ver-eye {
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--g-blue);
  font-weight: 700;
  margin-bottom: 10px;
}
body.v4 .ver-title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.018em;
  color: var(--g-ink-1);
  font-family: var(--g-fd);
  margin: 0;
}
body.v4 .ver-sub {
  font-size: 12.5px;
  color: var(--g-ink-3);
  margin-top: 6px;
  line-height: 1.55;
}
body.v4 .ver-pane {
  max-height: 580px;
  overflow-y: auto;
  padding: 22px 28px 24px;
}
body.v4 .ver-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Wave 175 - simpler release row (replaces the broken .ver-card).
   One row per release. Head: version pill + ordinal date + headline
   on a single line. Below: a tight list of changes, each with an
   inline section pill. No flex/grid traps that can leave the body
   empty if the data shape varies. */
body.v4 .ver-row {
  background: var(--g-surface);
  border: 1px solid var(--g-border);
  border-radius: var(--r);
  padding: 14px 18px 12px;
  transition: border-color 0.15s ease;
}
body.v4 .ver-row:hover {
  border-color: rgba(0,113,227,0.18);
}
/* Wave 179 P2–P4 - title-first head: title + date stacked on the left,
   version pill on the right. Title left edge is identical card-to-card. */
body.v4 .ver-row-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
body.v4 .ver-row-headmain {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
body.v4 .ver-row-num {
  font-family: var(--g-fd);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -0.005em;
  color: var(--g-blue);
  background: rgba(0,113,227,0.08);
  padding: 2px 10px;
  border-radius: var(--r-pill);
  flex-shrink: 0;
}
body.v4 .ver-row-headline {
  font-size: 14px;
  font-weight: 700;
  color: var(--g-ink-1);
  letter-spacing: -0.005em;
  font-family: var(--g-fd);
  line-height: 1.35;
}
body.v4 .ver-row-date {
  font-size: 11.5px;
  color: var(--g-ink-4);
  font-weight: 600;
  letter-spacing: 0.01em;
}
body.v4 .ver-row-changes {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
/* Explanation text starts at the card's left edge (aligned with the title);
   the section pill sits to the right of the row. */
body.v4 .ver-row-changes li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--g-ink-2);
  line-height: 1.55;
}
body.v4 .ver-row-section {
  flex-shrink: 0;
  background: rgba(94,92,230,0.10);
  color: var(--brain-accent);
  padding: 1px 8px;
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 2px;
}
body.v4 .ver-row-text { flex: 1; min-width: 0; }

/* Show-older button */
body.v4 .ver-more {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--g-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
body.v4 .ver-more-btn {
  padding: 8px 18px;
  background: rgba(0,113,227,0.08);
  border: 1px solid rgba(0,113,227,0.18);
  color: var(--g-blue);
  border-radius: var(--r-pill);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--g-fd);
  transition: all 0.15s ease;
}
body.v4 .ver-more-btn:hover {
  background: rgba(0,113,227,0.14);
  transform: translateY(-1px);
}
body.v4 .ver-more-meta {
  font-size: 11.5px;
  color: var(--g-ink-4);
}

/* ═══════════════════════════════════════════════════════════════════
   WAVE 174 · Episode Surface as a modal popup.
   The same surface that lives at #/episode/<id> can be opened as an
   overlay from anywhere - kanban, dashboard, calendar, search. The
   legacy episode-popup is now a thin shim that delegates here.
   ═══════════════════════════════════════════════════════════════════ */

body.v4 .es-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 30, 0.55);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: esModalFade 0.2s ease-out;
}
@keyframes esModalFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body.v4 .es-modal-card {
  position: relative;
  width: min(1280px, calc(100vw - 48px));
  height: min(900px, calc(100vh - 48px));
  background: var(--g-surface);
  border-radius: var(--r-xl);
  box-shadow: 0 30px 80px rgba(0,0,0,0.30);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: esModalRise 0.22s cubic-bezier(.22,1,.36,1);
}
@keyframes esModalRise {
  from { transform: translateY(20px) scale(0.985); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

body.v4 .es-modal-body {
  flex: 1;
  overflow: hidden;
}

/* Tighter padding inside modal context - the stage-bg outer wrapper
   used in the route view is too generous for an overlay. */
body.v4 .es-modal-body .es-stage-bg {
  padding: 0;
  margin: 0;
  border-radius: 0;
  border: none;
  background: transparent;
  height: 100%;
}
body.v4 .es-modal-body .es-surf {
  border-radius: 0;
  box-shadow: none;
  min-height: 0;
  height: 100%;
  /* Constrain rails so the surface fits in the modal without cutting
     off the right-rail panels. */
  grid-template-rows: auto 1fr;
}
body.v4 .es-modal-body .es-main,
body.v4 .es-modal-body .es-right {
  max-height: none;
  height: 100%;
}
/* Wave 193 - the body grid fills the modal so the right rail sits alongside
   the main column; both scroll inside the modal. */
body.v4 .es-modal-body .es-body { flex: 1; min-height: 0; }
body.v4 .es-modal-body .es-body .es-main,
body.v4 .es-modal-body .es-body .es-right { overflow-y: auto; }

/* Floating close button on the modal - sits outside the surface
   chrome so it's always reachable even when the surface has its
   own × in the header. */
body.v4 .es-modal-close {
  position: absolute;
  top: 14px;
  right: 18px;
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  background: rgba(0,0,0,0.06);
  color: var(--g-ink-2);
  border: none;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.12s ease;
}
body.v4 .es-modal-close:hover {
  background: rgba(0,0,0,0.06);
  color: var(--g-blue);
}
body.v4 .es-modal-close svg { width: 18px; height: 18px; display: block; }
/* font-size/line-height on the button were pushing the inline glyph high; the
   SVG must be a block so flex centres it true. Zero the text metrics too. */
body.v4 .es-modal-close, body.v4 .es-modal-archive { font-size: 0; line-height: 0; }
/* Header archive/delete button - sits just left of the close, available at any
   stage so a deal/episode can be archived without first completing the stage. */
body.v4 .es-modal-archive {
  position: absolute; top: 14px; right: 60px;
  width: 36px; height: 36px; border-radius: var(--r-pill);
  background: rgba(0,0,0,0.06); color: var(--g-ink-2); border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 2; transition: background 0.12s ease, color 0.12s ease;
}
body.v4 .es-modal-archive svg { width: 18px; height: 18px; display: block; }
body.v4 .es-modal-delete { right: 102px; }
body.v4 .data-table tr.camp-row { cursor: pointer; }
body.v4 .data-table tr.camp-row:hover { background: var(--rule-soft); }
/* B2 - top-right modal buttons: hover keeps the same grey box, icon turns blue
   (was a pink/cherry fill). Applies to close, archive and delete (delete shares
   the .es-modal-archive base). */
body.v4 .es-modal-archive:hover { background: rgba(0,0,0,0.06); color: var(--g-blue); }
body.v4.dark .es-modal-archive, body.v4.dark .es-modal-close { background: rgba(255,255,255,0.08); color: var(--on-accent); }
body.v4.dark .es-modal-archive:hover { background: rgba(255,255,255,0.08); color: var(--g-blue); }
body.v4.dark .es-modal-close:hover { background: rgba(255,255,255,0.08); color: var(--g-blue); }

/* Hide the surface's own header × when rendered inside the modal -
   the floating modal-close handles it. (We still keep the surface
   close for the page route at #/episode/<id>.) */
body.v4 .es-modal-body .es-head-acts { display: none; }

/* ═══════════════════════════════════════════════════════════════════
   WAVE 176 · Checklist builder - type-picker cards.
   ═══════════════════════════════════════════════════════════════════ */
body.v4 .tpl-type-card {
  background: var(--g-surface);
  border: 1px solid var(--g-border);
  border-radius: 14px;
  padding: 18px 14px 16px;
  cursor: pointer;
  font-family: var(--g-fd);
  text-align: left;
  transition: all 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body.v4 .tpl-type-card:hover {
  border-color: var(--g-blue);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,113,227,0.10);
}
body.v4 .tpl-type-ico {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  font-family: var(--g-fd);
}
body.v4 .tpl-type-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--g-ink-1);
  letter-spacing: -0.005em;
}
body.v4 .tpl-type-sub {
  font-size: 11.5px;
  color: var(--g-ink-4);
  line-height: 1.45;
}

/* ═══════════════════════════════════════════════════════════════════
   WAVE 176.3 · In-app confirm modal - Liquid Glass replacement for
   window.confirm(). Used by checklist-ripple; available to anyone via
   asyncConfirm() from js/lib/confirm-modal.js.
   ═══════════════════════════════════════════════════════════════════ */
body.v4 .cm-overlay {
  position: fixed; inset: 0;
  background: rgba(20, 20, 30, 0.55);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: cmFade 0.18s ease-out;
}
@keyframes cmFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body.v4 .cm-card {
  width: min(440px, calc(100vw - 48px));
  max-height: 90vh;
  overflow-y: auto;
  background: var(--g-surface);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.28);
  padding: 24px 26px 18px;
  animation: cmRise 0.20s cubic-bezier(.22,1,.36,1);
  font-family: var(--g-fd);
}
@keyframes cmRise {
  from { transform: translateY(14px) scale(0.985); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
body.v4 .cm-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--g-ink-1);
  letter-spacing: -0.005em;
  margin-bottom: 10px;
}
body.v4 .cm-message p {
  font-size: 13.5px;
  color: var(--g-ink-3);
  line-height: 1.55;
  margin: 0 0 10px;
}
body.v4 .cm-message p:last-child { margin-bottom: 14px; }
body.v4 .cm-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 6px;
}
body.v4 .cm-btn {
  padding: 8px 16px;
  border-radius: var(--r-pill);
  font-size: 12.5px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-family: var(--g-fd);
  transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
body.v4 .cm-btn:hover { transform: translateY(-1px); }
body.v4 .cm-btn-secondary {
  background: rgba(0,0,0,0.05);
  color: var(--g-ink-2);
}
body.v4 .cm-btn-secondary:hover { background: rgba(0,0,0,0.10); }
body.v4 .cm-btn-primary.cm-btn-blue {
  background: var(--g-blue);
  color: white;
  box-shadow: 0 4px 14px rgba(0,113,227,0.26);
}
body.v4 .cm-btn-primary.cm-btn-blue:hover { background: #0058b1; }
body.v4 .cm-btn-primary.cm-btn-cherry {
  background: var(--g-cherry);
  color: white;
  box-shadow: 0 4px 14px rgba(184,0,43,0.28);
}
body.v4 .cm-btn-primary.cm-btn-cherry:hover { background: #a30026; }

/* ═══════════════════════════════════════════════════════════════════
   WAVE 177 · Form builder - the "Form" checklist step type.
   Palette (left) + element canvas (right) inside the aiceo-modal shell.
   Prefix fmb- (fb- is taken by the feedback component).
   ═══════════════════════════════════════════════════════════════════ */

/* Back link in the modal header */
body.v4 .fmb-back {
  background: none;
  border: none;
  color: var(--g-blue);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  font-family: var(--g-fd);
  margin-right: 10px;
  padding: 0;
}
body.v4 .fmb-back:hover { text-decoration: underline; }

/* Small uppercase field caption */
body.v4 .fmb-flabel {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--g-500);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* Frosted text input / select / textarea */
body.v4 .fmb-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: var(--r-sm);
  font-size: 14px;
  font-family: inherit;
  background: var(--g-surface);
  color: var(--g-ink-1);
  box-sizing: border-box;
}
body.v4 .fmb-input:focus {
  outline: none;
  border-color: var(--g-blue);
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.14);
}
body.v4 textarea.fmb-input { resize: vertical; line-height: 1.45; }

/* The builder modal is a flex column capped to the viewport so the head
   and footer stay put and the body scrolls - fixes the palette being
   unreachable on shorter screens. */
body.v4 .fmb-modal {
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}

/* Two-column body: palette + canvas, each scrolls independently.
   flex:1 + min-height:0 gives the columns a definite height to scroll in. */
body.v4 .fmb-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  flex: 1 1 auto;
  min-height: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* Palette */
body.v4 .fmb-palette {
  padding: 16px 14px;
  border-right: 1px solid rgba(0, 0, 0, 0.06);
  overflow-y: auto;
  min-height: 0;
  background: rgba(0, 0, 0, 0.018);
}
body.v4 .fmb-pal-group { margin-bottom: 16px; }
body.v4 .fmb-pal-grouptitle {
  font-family: var(--g-fd);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--g-ink-4);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 8px;
}
body.v4 .fmb-pal-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  text-align: left;
  background: var(--g-surface);
  border: 1px solid var(--g-border);
  border-radius: 9px;
  padding: 8px 10px;
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 500;
  font-family: var(--g-fd);
  color: var(--g-ink-1);
  cursor: pointer;
  transition: all 0.13s ease;
}
body.v4 .fmb-pal-btn:hover {
  border-color: var(--g-blue);
  background: rgba(0, 113, 227, 0.04);
  transform: translateX(2px);
}
body.v4 .fmb-pal-plus {
  color: var(--g-blue);
  font-weight: 700;
  font-size: 14px;
}

/* Canvas */
body.v4 .fmb-canvas {
  padding: 18px;
  overflow-y: auto;
  min-height: 0;
}
body.v4 .fmb-empty {
  border: 1.5px dashed var(--g-border);
  border-radius: var(--r);
  padding: 40px 24px;
  text-align: center;
  font-size: 13px;
  color: var(--g-ink-4);
  line-height: 1.5;
}

/* Element card */
body.v4 .fmb-card {
  background: var(--g-surface);
  border: 1px solid var(--g-border);
  border-radius: var(--r);
  padding: 12px 14px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
body.v4 .fmb-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
body.v4 .fmb-card-kind {
  font-family: var(--g-fd);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--g-blue);
  background: rgba(0, 113, 227, 0.09);
  padding: 3px 9px;
  border-radius: var(--r-pill);
}
body.v4 .fmb-card-tools { display: flex; gap: 4px; }
body.v4 .fmb-tool {
  width: 26px;
  height: 26px;
  border: 1px solid var(--g-border);
  border-radius: 7px;
  background: var(--g-surface);
  color: var(--g-ink-3);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  display: grid;
  place-items: center;
}
body.v4 .fmb-tool:hover:not(:disabled) { background: rgba(0, 0, 0, 0.04); color: var(--g-ink-1); }
body.v4 .fmb-tool:disabled { opacity: 0.35; cursor: default; }
body.v4 .fmb-tool-del:hover:not(:disabled) {
  border-color: var(--g-cherry);
  color: var(--g-cherry);
  background: rgba(184, 0, 43, 0.05);
}
body.v4 .fmb-label-input { font-weight: 600; margin-bottom: 10px; }
body.v4 .fmb-card-config { display: flex; flex-direction: column; gap: 8px; }

/* Checkbox row */
body.v4 .fmb-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--g-ink-2);
  cursor: pointer;
}
body.v4 .fmb-check input { margin: 0; }

/* Inline help note */
body.v4 .fmb-note {
  font-size: 11.5px;
  color: var(--g-ink-4);
  line-height: 1.45;
  background: rgba(0, 0, 0, 0.025);
  border-radius: 7px;
  padding: 8px 10px;
}

/* Multi-field sub-rows */
body.v4 .fmb-subrow {
  display: grid;
  grid-template-columns: 120px 1fr 28px;
  gap: 8px;
  align-items: center;
}
body.v4 .fmb-add-sub {
  align-self: flex-start;
  background: transparent;
  border: 1px dashed var(--g-border);
  border-radius: var(--r-sm);
  padding: 6px 11px;
  font-size: 12px;
  font-weight: 600;
  color: var(--g-blue);
  cursor: pointer;
  font-family: var(--g-fd);
}
body.v4 .fmb-add-sub:hover { background: rgba(0, 113, 227, 0.05); }

/* ── Split element - two side-by-side columns of child fields ── */
body.v4 .fmb-card-split { background: rgba(0, 113, 227, 0.025); }
body.v4 .fmb-split-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
body.v4 .fmb-split-col {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--g-border);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body.v4 .fmb-split-coltitle {
  font-family: var(--g-fd);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--g-ink-4);
}
body.v4 .fmb-split-list { display: flex; flex-direction: column; gap: 8px; }
body.v4 .fmb-split-empty {
  font-size: 11.5px;
  color: var(--g-ink-4);
  text-align: center;
  padding: 14px 8px;
  border: 1px dashed var(--g-border);
  border-radius: var(--r-sm);
}
body.v4 .fmb-split-add { font-size: 12.5px; color: var(--g-ink-2); }

/* A field card nested inside a Split column */
body.v4 .fmb-child {
  background: var(--g-surface);
  border: 1px solid var(--g-border);
  border-radius: 9px;
  padding: 9px 10px;
}
body.v4 .fmb-child-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
}
body.v4 .fmb-child .fmb-label-input { margin-bottom: 8px; }
body.v4 .fmb-child .fmb-tool { width: 22px; height: 22px; font-size: 12px; }

/* Stack split columns on very narrow widths */
@media (max-width: 560px) {
  body.v4 .fmb-split-cols { grid-template-columns: 1fr; }
}

/* Stack palette above canvas on narrow viewports */
@media (max-width: 720px) {
  body.v4 .fmb-grid { grid-template-columns: 1fr; max-height: 72vh; }
  body.v4 .fmb-palette {
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  body.v4 .fmb-pal-group { margin-bottom: 8px; width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════
   WAVE 177.9 · Checklist row type badge (to-do / form / upload).
   ═══════════════════════════════════════════════════════════════════ */
body.v4 .cke-row-num {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--g-cherry); color: var(--on-accent);
  font-weight: 700; font-size: 12.5px; font-family: var(--g-fd);
  display: inline-grid; place-items: center;
}
body.v4 .cke-row-type {
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.v4 .cke-row-type i,
body.v4 .cke-row-type svg { width: 17px; height: 17px; stroke-width: 2.25; }
body.v4 .cke-row-type-tick   { background: rgba(52,199,89,0.16);  color: var(--green-strong); }
body.v4 .cke-row-type-form   { background: rgba(0,113,227,0.14);  color: var(--g-blue); }
body.v4 .cke-row-type-upload { background: rgba(94,92,230,0.14);  color: var(--brain-accent); }

/* ═══════════════════════════════════════════════════════════════════
   WAVE 177.5 · Per-stage auto-advance - header link + rule modal.
   ═══════════════════════════════════════════════════════════════════ */
body.v4 .cke-advance-link {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--g-fd);
  font-size: 11px;
  font-weight: 600;
  color: var(--g-blue);
  padding: 0;
  white-space: nowrap;
}
body.v4 .cke-advance-link:hover { text-decoration: underline; }

body.v4 .adv-opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--g-ink-1);
  cursor: pointer;
  padding: 10px 12px;
  border: 1px solid var(--g-border);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.6);
}
body.v4 .adv-opt input { margin-top: 2px; }
body.v4 .adv-sub { font-size: 11.5px; color: var(--g-ink-4); }

/* ═══════════════════════════════════════════════════════════════════
   WAVE 177.8 · Episode Surface - template-driven stage forms (read-only).
   Reuses .es-fld / .es-fminline / .es-upload-drop; adds the section
   chrome + the field kinds the form renderer introduces.
   ═══════════════════════════════════════════════════════════════════ */
body.v4 .es-stage-forms {
  margin: 6px 0 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
body.v4 .es-stage-forms-note {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--g-blue);
  background: rgba(0, 113, 227, 0.07);
  border: 1px solid rgba(0, 113, 227, 0.18);
  border-radius: var(--r-sm);
  padding: 7px 10px;
}
body.v4 .es-form-card {
  background: var(--g-surface);
  border: 1px solid var(--g-border, rgba(0,0,0,0.1));
  border-radius: var(--r);
  padding: 14px 16px;
}
body.v4 .es-form-card-h {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g-ink-3);
  margin-bottom: 12px;
}
body.v4 .es-toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 500;
}
body.v4 .es-checks { display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
body.v4 .es-pills { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0; }
body.v4 .es-pill {
  background: var(--c-lilac-bg, rgba(94,92,230,0.12));
  color: var(--indigo);
  border-radius: var(--r-pill);
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
}
body.v4 .es-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
body.v4 .es-split-col { display: flex; flex-direction: column; gap: 12px; }
body.v4 .es-split-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--g-ink-4); margin-bottom: 6px;
}
body.v4 .es-mf-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
body.v4 .es-mf-row > input, body.v4 .es-mf-row > select { flex: 1; min-width: 0; }
body.v4 .es-mf-del {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  border: 1px solid var(--g-border, rgba(0,0,0,0.1));
  border-radius: 7px; background: var(--g-surface);
  color: var(--g-ink-3); cursor: pointer;
  font-size: 15px; line-height: 1;
}
body.v4 .es-mf-del:hover { border-color: var(--g-cherry); color: var(--g-cherry); }
body.v4 .es-mf-add {
  background: transparent;
  border: 1px dashed var(--g-border, rgba(0,0,0,0.1));
  border-radius: var(--r-sm);
  padding: 6px 11px;
  font-size: 12px;
  font-weight: 600;
  color: var(--g-blue);
  cursor: pointer;
}
body.v4 .es-form-card-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
body.v4 .es-form-saved { font-size: 12px; font-weight: 600; color: var(--green-strong); }
body.v4 .es-form-save {
  background: var(--g-blue);
  color: var(--on-accent);
  border: none;
  border-radius: var(--r-pill);
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--g-fd);
  cursor: pointer;
}
body.v4 .es-form-save:disabled { opacity: 0.6; cursor: default; }

/* Real checklist tasks on the surface */
body.v4 .es-tasks { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
body.v4 .es-task-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--g-surface); border: 1px solid var(--g-border, rgba(0,0,0,0.08));
  border-radius: 10px; padding: 11px 14px;
}
body.v4 .es-task-box {
  flex: 0 0 auto; width: 22px; height: 22px;
  border: 1.5px solid var(--g-border, rgba(0,0,0,0.18)); border-radius: 6px;
  background: var(--g-surface); cursor: pointer; color: var(--on-accent); font-size: 13px; line-height: 1;
  display: grid; place-items: center;
}
body.v4 .es-task-box.on { background: var(--green-strong); border-color: var(--green-strong); }
body.v4 .es-task-main { flex: 1; min-width: 0; }
body.v4 .es-task-label { font-size: 14px; font-weight: 500; color: var(--g-ink-1); }
body.v4 .es-task-done .es-task-label { text-decoration: line-through; color: var(--g-ink-3); }
body.v4 .es-task-meta { font-size: 11px; color: var(--brain-accent); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
body.v4 .es-task-owner { font-size: 11.5px; color: var(--g-ink-3); font-weight: 600; }

/* Real right-rail rows */
body.v4 .es-rr-body { padding: 4px 0; }
body.v4 .es-rr-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid rgba(0,0,0,0.05); font-size: 13px; }
body.v4 .es-rr-row:last-child { border-bottom: none; }
body.v4 .es-rr-k { color: var(--g-ink-3); }
body.v4 .es-rr-v { color: var(--g-ink-1); font-weight: 500; text-align: right; }
body.v4 .es-rr-empty { color: var(--g-ink-4); }

/* ═══════════════════════════════════════════════════════════════════
   WAVE 177.18 · Episode Surface - numbered sections + polished fields.
   ═══════════════════════════════════════════════════════════════════ */
body.v4 .es-sec {
  background: var(--g-surface);
  border: 1.5px solid rgba(0, 113, 227, 0.45);
  border-radius: var(--r-lg);
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 113, 227, 0.07);
}
body.v4 .es-sec-head { display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: rgba(0, 113, 227, 0.035); }
body.v4 .es-sec-titlerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
body.v4 .es-sec-kindpill {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 3px 9px; border-radius: var(--r-pill); line-height: 1.4;
}
body.v4 .es-kind-form   { background: rgba(0,113,227,0.12);  color: var(--g-blue); }
body.v4 .es-kind-upload { background: rgba(94,92,230,0.12);  color: var(--brain-accent); }
body.v4 .es-kind-tick   { background: rgba(52,199,89,0.16);  color: var(--green-strong); }
body.v4 .es-sec-num {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  background: var(--g-cherry); color: var(--on-accent);
  font-weight: 700; font-size: 15px; display: grid; place-items: center;
}
body.v4 .es-sec-headtext { flex: 0 1 auto; min-width: 0; }
body.v4 .es-sec-name { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--g-ink-1); }
body.v4 .es-sec-kind { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--g-ink-4); margin-top: 1px; }
body.v4 .es-sec-owner { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: 11px; justify-content: flex-start; }
body.v4 .es-sec-av-ext { background: var(--cherry); }
body.v4 .es-sec-av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; color: var(--on-accent); background: #888; }
body.v4 .es-sec-av-peter { background: var(--cherry); }
body.v4 .es-sec-av-chelsea { background: #d4537e; }
body.v4 .es-sec-av-curt { background: #1d9e75; }
body.v4 .es-sec-av-conor { background: var(--g-blue); }
body.v4 .es-sec-av-alec { background: #ba7517; }
body.v4 .es-sec-av-ai { background: #7f77dd; }
body.v4 .es-sec-owner-name { font-size: 12.5px; color: var(--g-ink-2); font-weight: 600; }
body.v4 .es-sec-body { padding: 18px 20px 20px; border-top: 1px solid rgba(0,0,0,0.06); }
body.v4 .es-sec-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(0,0,0,0.06); }
body.v4 .es-empty-stage { text-align: center; color: var(--g-ink-4); font-size: 13px; padding: 30px 0; }

/* Tick control inside a section */
body.v4 .es-tick {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--g-surface); border: 1px solid rgba(0,0,0,0.20);
  border-radius: 10px; padding: 10px 14px; font-size: 14px; font-weight: 500;
  color: var(--g-ink-1); cursor: pointer; font-family: var(--g-fd);
}
body.v4 .es-tick:hover { border-color: rgba(0,0,0,0.32); }
body.v4 .es-tick .es-tick-box { width: 20px; height: 20px; border-radius: 6px; background: var(--g-surface); border: 1.5px solid rgba(0,0,0,0.30); display: grid; place-items: center; color: var(--on-accent); font-size: 12px; }
body.v4 .es-tick.on { background: rgba(52,199,89,0.10); border-color: var(--green-ios); }
body.v4 .es-tick.on .es-tick-box { background: var(--green-strong); border-color: var(--green-strong); }

/* Polished form fields (override the earlier bare styles) */
body.v4 .es-fminline { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
body.v4 .es-fld { display: flex; flex-direction: column; }
/* Grid/flex items default to min-width:auto, so a long unbroken value (a URL,
   pasted text) forces its column wider and breaks the surface layout. Let the
   columns shrink and keep controls/values inside their box. */
body.v4 .es-fminline, body.v4 .es-fld { min-width: 0; }
body.v4 .es-fld input, body.v4 .es-fld textarea, body.v4 .es-fld select { max-width: 100%; box-sizing: border-box; }
body.v4 .es-fld textarea, body.v4 .es-fld .es-toggle-text { overflow-wrap: anywhere; }
body.v4 .es-fld textarea.es-autogrow { resize: none; overflow: hidden; min-height: 40px; line-height: 1.45; }
/* sys_sponsors - four pickable sponsor slots */
/* Bug9 - 4 inventory-style slot boxes (matches the Ad Inventory "4 slots each"
   design): dashed box, small uppercase "SLOT n", status/name line. Click an
   empty box → the live-sponsor picker (wired in mountFormWidgets). */
body.v4 .es-sponsor-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
body.v4 .es-sponsor-slot { position: relative; min-height: 64px; border-radius: var(--r); display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 11px 13px; box-sizing: border-box; min-width: 0; }
body.v4 .es-sponsor-slot.empty { border: 1px solid var(--line-2); background: var(--card); cursor: pointer; transition: border-color .12s, background .12s; }
body.v4 .es-sponsor-slot.empty:hover { border-color: var(--g-blue); background: rgba(0,113,227,.06); }
body.v4 .es-sponsor-num { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
body.v4 .es-sponsor-status { font-size: 13px; font-weight: 600; color: var(--ink-2); }
body.v4 .es-sponsor-slot.filled { border: 1px solid var(--line); background: var(--card); padding: 10px; }
body.v4 .es-sponsor-name { font-size: 13px; font-weight: 600; color: var(--ink-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px){ body.v4 .es-sponsor-grid { grid-template-columns: repeat(2, 1fr); } }
body.v4 .es-sponsor-x { position: absolute; top: 5px; right: 5px; border: none; background: transparent; color: var(--ink-3); font-size: 16px; cursor: pointer; line-height: 1; padding: 2px 4px; border-radius: 6px; flex: none; }
body.v4 .es-sponsor-x:hover { background: var(--cherry-bg); color: var(--cherry); }
body.v4 .es-sponsor-menu { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--sh-2); padding: 4px; max-height: 220px; overflow: auto; }
body.v4 .es-sponsor-opt { display: block; width: 100%; text-align: left; border: none; background: transparent; padding: 8px 10px; border-radius: 7px; font-size: 13px; color: var(--ink-1); cursor: pointer; }
body.v4 .es-sponsor-opt:hover { background: var(--blue-bg); color: var(--blue); }
body.v4 .es-sponsor-noneavail { padding: 10px; font-size: 12px; color: var(--ink-3); }
body.v4 .es-fld-full { grid-column: 1 / -1; }
body.v4 .es-fld > label { font-size: 11.5px; font-weight: 600; color: var(--g-ink-3); letter-spacing: 0.02em; margin-bottom: 6px; }
body.v4 .es-fld input, body.v4 .es-fld select, body.v4 .es-fld textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--g-border, rgba(0,0,0,0.12));
  border-radius: 10px; font-size: 14px; font-family: inherit; background: var(--g-surface); color: var(--g-ink-1);
  box-sizing: border-box; transition: border-color .12s, box-shadow .12s;
}
body.v4 .es-fld input::placeholder, body.v4 .es-fld textarea::placeholder { color: var(--g-ink-4); }
body.v4 .es-fld input:focus, body.v4 .es-fld select:focus, body.v4 .es-fld textarea:focus {
  outline: none; border-color: var(--g-blue); box-shadow: 0 0 0 3px rgba(0,113,227,0.13);
}
body.v4 .es-fld textarea { resize: vertical; line-height: 1.5; }

/* Pills field */
body.v4 .es-pills { display: flex; flex-wrap: wrap; gap: 7px; padding: 7px 9px; border: 1px solid var(--g-border, rgba(0,0,0,0.12)); border-radius: 10px; min-height: 44px; align-items: center; }
body.v4 .es-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--c-lilac-bg); color: var(--indigo); border-radius: var(--r-pill); padding: 4px 11px; font-size: 12.5px; font-weight: 600; }

/* Switch toggle */
body.v4 .es-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: rgba(0,0,0,0.018); border: 1px solid var(--g-border, rgba(0,0,0,0.1)); border-radius: 10px; }
body.v4 .es-toggle-text { font-size: 13.5px; font-weight: 500; color: var(--g-ink-1); }
body.v4 .es-toggle-sub { display: block; font-size: 11.5px; color: var(--g-ink-4); margin-top: 1px; font-weight: 400; }
body.v4 .es-switch { position: relative; width: 44px; height: 26px; flex: 0 0 auto; }
body.v4 .es-switch input { opacity: 0; width: 0; height: 0; }
body.v4 .es-switch-slider { position: absolute; inset: 0; background: var(--apl-rule); border-radius: var(--r-pill); transition: .15s; }
body.v4 .es-switch-slider:before { content: ""; position: absolute; height: 20px; width: 20px; left: 3px; top: 3px; background: var(--g-surface); border-radius: 50%; transition: .15s; box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
body.v4 .es-switch input:checked + .es-switch-slider { background: var(--green-ios); }
body.v4 .es-switch input:checked + .es-switch-slider:before { transform: translateX(18px); }

/* ═══════════════════════════════════════════════════════════════════
   WAVE 177.21 · Section visuals - white page, faint-blue card interior,
   consistent full-width white inputs. Scoped to .es-sec so it decisively
   beats the older demo .es-fld rules.
   ═══════════════════════════════════════════════════════════════════ */

/* 1. White behind the boxes. */
body.v4 .es-main { background: var(--g-surface); }

/* 2. Whole card interior faint blue (header + body uniform). */
body.v4 .es-sec { background: rgba(0, 113, 227, 0.05); }
body.v4 .es-sec-head { background: transparent; }
body.v4 .es-sec-body { background: transparent; border-top: 1px solid rgba(0, 113, 227, 0.12); }

/* 3. Consistent fields: single-column (full width), white inputs, visible border. */
body.v4 .es-sec .es-fminline { grid-template-columns: 1fr; gap: 16px; }
body.v4 .es-sec .es-fld > label {
  font-size: 11.5px; font-weight: 600; color: var(--g-ink-3);
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px;
}
body.v4 .es-sec .es-fld input,
body.v4 .es-sec .es-fld select,
body.v4 .es-sec .es-fld textarea,
body.v4 .es-sec .ga-input,
body.v4 .es-sec .es-pills {
  width: 100%; box-sizing: border-box;
  padding: 11px 13px; border: 1px solid rgba(0, 0, 0, 0.18); border-radius: 10px;
  font-size: 14px; font-family: inherit; background: var(--g-surface); color: var(--g-ink-1);
}
body.v4 .es-sec .es-fld input:focus,
body.v4 .es-sec .es-fld select:focus,
body.v4 .es-sec .es-fld textarea:focus,
body.v4 .es-sec .ga-input:focus {
  outline: none; border-color: var(--g-blue); box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.13);
}
body.v4 .es-sec .es-fld textarea { resize: vertical; line-height: 1.5; min-height: 84px; }

/* Mounted widgets read like the other fields. */
body.v4 .es-sec .es-pills { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 44px; padding: 7px 9px; }
body.v4 .es-sec .es-pills input,
body.v4 .es-sec .tp-input { border: none !important; background: transparent !important; box-shadow: none !important; flex: 1; min-width: 90px; padding: 4px; width: auto; }
body.v4 .es-sec .ga-wrap { width: 100%; }

/* Required marker + fixed one-line composite rows + full-width pills. */
body.v4 .es-req { color: var(--g-cherry); font-weight: 700; }
body.v4 .es-sec .es-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
body.v4 .es-sec .es-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
body.v4 .es-sec .es-pills, body.v4 .es-sec .tp-wrap { width: 100%; box-sizing: border-box; }

/* Collapse / expand + completed (green) state. */
body.v4 .es-sec-head { cursor: pointer; }
body.v4 .es-sec-chev { margin-left: 8px; color: var(--g-ink-4); font-size: 12px; transition: transform .15s; }
body.v4 .es-collapsed .es-sec-chev { transform: rotate(-90deg); }
body.v4 .es-collapsed .es-sec-body { display: none; }
body.v4 .es-collapsed .es-sec-head { background: transparent; }

body.v4 .es-sec-done { border-color: rgba(52, 199, 89, 0.55); background: rgba(52, 199, 89, 0.05); box-shadow: 0 2px 12px rgba(52, 199, 89, 0.07); }
body.v4 .es-sec-done .es-sec-head { background: rgba(52, 199, 89, 0.06); }
body.v4 .es-sec-done .es-sec-num { background: var(--green-strong); }
body.v4 .es-sec-done .es-sec-body { border-top-color: rgba(52, 199, 89, 0.18); }

/* Inline validation: red message left of Save, "Can't save" button, red field borders. */
body.v4 .es-sec-foot { justify-content: space-between; }
body.v4 .es-form-err { font-size: 12.5px; font-weight: 600; color: var(--g-cherry); flex: 1; }
body.v4 .es-form-save-err { background: var(--g-cherry) !important; }
body.v4 .es-fld-error input,
body.v4 .es-fld-error select,
body.v4 .es-fld-error textarea,
body.v4 .es-fld-error .es-pills,
body.v4 .es-fld-error .ga-input,
body.v4 .es-fld-error .tp-wrap {
  border-color: var(--g-cherry) !important;
  box-shadow: 0 0 0 3px rgba(184, 0, 43, 0.12) !important;
}

/* Wave 193 - the sticky .es-prog header is gone (no .es-prog block now). */

/* ── Wave 177.28 · Notes button + panel, delete-show button ── */
body.v4 .es-head-btn {
  background: var(--g-surface); border: 1px solid var(--g-border, rgba(0,0,0,0.12)); border-radius: var(--r-pill);
  padding: 6px 14px; font-size: 12.5px; font-weight: 600; color: var(--g-ink-1);
  cursor: pointer; font-family: var(--g-fd); margin-right: 8px;
}
body.v4 .es-head-btn.on { background: rgba(94,92,230,0.12); border-color: rgba(94,92,230,0.3); color: var(--indigo); }
body.v4 .es-notes-sec { background: rgba(94,92,230,0.05); border-color: rgba(94,92,230,0.35); }
body.v4 .es-notes-sec .es-sec-head { background: rgba(94,92,230,0.06); }
body.v4 .es-notes-ic { background: #7f77dd !important; }
body.v4 .es-kind-notes { background: rgba(94,92,230,0.14); color: var(--indigo); }
body.v4 .es-notes-ta {
  width: 100%; box-sizing: border-box; padding: 11px 13px;
  border: 1px solid rgba(0,0,0,0.18); border-radius: 10px;
  font-family: inherit; font-size: 14px; background: var(--g-surface); resize: vertical; line-height: 1.5; min-height: 120px;
}
body.v4 .es-notes-ta:focus { outline: none; border-color: var(--g-blue); box-shadow: 0 0 0 3px rgba(0,113,227,0.13); }
body.v4 .es-danger { margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(0,0,0,0.07); text-align: center; }
body.v4 .es-delete-btn {
  background: var(--g-surface); border: 1px solid rgba(184,0,43,0.35); color: var(--g-cherry);
  border-radius: var(--r-pill); padding: 9px 20px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--g-fd);
}
body.v4 .es-delete-btn:hover { background: rgba(184,0,43,0.06); }

/* Wave 177.31 - "Mark as done" box + checkbox: clear grey lines on the
   blue section (authoritative, scoped to .es-sec). */
body.v4 .es-sec .es-tick { background: var(--g-surface); border: 1.5px solid #c2c2c9; }
body.v4 .es-sec .es-tick:hover { border-color: #9b9ba1; }
body.v4 .es-sec .es-tick .es-tick-box { width: 20px; height: 20px; border-radius: 6px; background: var(--g-surface); border: 2px solid #8e8e93; }
body.v4 .es-sec .es-tick.on { background: rgba(52,199,89,0.10); border-color: var(--green-ios); }
body.v4 .es-sec .es-tick.on .es-tick-box { background: var(--green-strong); border-color: var(--green-strong); color: var(--on-accent); }

/* Upload drop zone - interactive (click + drag). */
body.v4 .es-sec .es-upload-drop { border: 1.5px dashed #c2c2c9; border-radius: 10px; padding: 22px; text-align: center; background: var(--g-surface); cursor: pointer; transition: border-color .12s, background .12s; }
body.v4 .es-sec .es-upload-drop:hover, body.v4 .es-sec .es-upload-drop.dragover { border-color: var(--g-blue); background: rgba(0,113,227,0.04); }
body.v4 .es-sec .es-upload-file { margin-top: 8px; font-size: 12.5px; color: var(--green-strong); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
body.v4 .es-sec .es-upload-del { border: none; background: rgba(184,0,43,0.10); color: var(--g-cherry); width: 18px; height: 18px; border-radius: 50%; font-size: 12px; line-height: 1; cursor: pointer; }
body.v4 .es-sec .es-upload-del:hover { background: rgba(184,0,43,0.2); }

/* Wave 193 - pipeline stage-card locked/viewing rules removed; the stepper
   markers (.es-marker-pending / .es-marker-viewing) carry these states. */

/* Dropdown arrows nudged ~5px in from the right edge (custom caret). */
body.v4 .es-fld select,
body.v4 select.fmb-input,
body.v4 .es-sec select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 34px;
}

/* ── Wave 177.11 - AI/notify circular checkboxes + editor row flags ── */
.tpl-circle-check{
  appearance:none;-webkit-appearance:none;
  width:20px;height:20px;flex-shrink:0;margin:0;
  border:1.5px solid var(--g-300);border-radius:50%;
  background: var(--g-surface);cursor:pointer;position:relative;
  transition:background .12s ease,border-color .12s ease;
}
.tpl-circle-check:checked{
  background:var(--g-blue);
  border-color:var(--g-blue);
}
.tpl-circle-check:checked::after{
  content:'';position:absolute;left:6.5px;top:3px;
  width:4px;height:9px;border:solid #fff;border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.cke-row-flag{
  display:inline-flex;align-items:center;gap:3px;
  margin-left:8px;padding:1px 7px;border-radius:var(--r-pill);
  font-size:10px;font-weight:700;letter-spacing:.03em;
  vertical-align:middle;
}
/* Wave 191 - AI trigger badge: bold artifacts-purple pill with a sparkle. */
.cke-flag-ai{background:rgba(94,92,230,.16);color:var(--indigo-2);box-shadow:inset 0 0 0 1px rgba(94,92,230,.28);}
.cke-flag-ai i{width:12px;height:12px;}
.cke-flag-ai svg{width:12px;height:12px;}
.cke-flag-notify{background:rgba(0,113,227,.12);color:var(--g-blue);}
.cke-flag-dep{background:rgba(0,0,0,.06);color:var(--g-ink-2);}
.cke-flag-dep i, .cke-flag-dep svg{width:11px;height:11px;}
/* Wave 191 - locked (dependant not met) task on the deal surface. */
body.v4 .es-sec.ds-sec-locked{ opacity:.7; background:rgba(0,0,0,0.02); }
body.v4 .ds-sec-locked .es-sec-num{ background:rgba(0,0,0,0.06); color:var(--g-ink-3); }
body.v4 .ds-locked-note{ font-size:12.5px; color:var(--g-ink-3); padding:6px 2px; display:flex; align-items:center; gap:6px; }

/* ── Wave 179 P1 - "Who can complete this?" multi-owner lists ── */
.tpl-owner-list, .fmb-owner-list{
  display:flex;flex-wrap:wrap;gap:10px 18px;
  padding:12px 14px;border:1px solid var(--g-200);border-radius:var(--r-sm);
  background:var(--g-50);
}
.tpl-owner-opt, .fmb-owner-opt{
  display:flex;align-items:center;gap:9px;font-size:13px;color:var(--g-800);cursor:pointer;
}
/* Overlapping avatar stack when a section has multiple assignees */
.es-sec-owner-multi .es-sec-av + .es-sec-av{ margin-left:-7px; }
.es-sec-owner-multi .es-sec-av{ box-shadow:0 0 0 1.5px #fff; }

/* ── Wave 179 P6/P7 - "Your tasks" rows: coloured guest avatar + name ── */
body.v4 .task-row.task-row-v2{ display:flex; align-items:center; gap:11px; }
body.v4 .task-row-av{
  flex-shrink:0; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--g-fd); font-size:12px; font-weight:800; letter-spacing:.02em;
}
body.v4 .task-row-av.tone-lilac { background:var(--c-lilac-bg);  color:var(--c-lilac); }
body.v4 .task-row-av.tone-mint   { background:var(--c-mint-bg);   color:var(--c-mint); }
body.v4 .task-row-av.tone-peach  { background:var(--c-peach-bg);  color:var(--c-peach); }
body.v4 .task-row-av.tone-butter { background:var(--c-butter-bg); color:var(--c-butter); }
body.v4 .task-row-av.tone-sky    { background:var(--c-sky-bg);    color:var(--c-sky); }
body.v4 .task-row-av.tone-rose   { background:var(--c-rose-bg);   color:var(--c-rose); }
body.v4 .task-row-av.tone-sage   { background:var(--c-sage-bg);   color:var(--c-sage); }
body.v4 .task-row-guestline{ display:flex; align-items:baseline; gap:7px; margin-bottom:1px; }
body.v4 .task-row-guest{ font-size:12px; font-weight:700; letter-spacing:.01em; color:var(--g-ink-1); }
body.v4 .task-row-epnum{ font-size:10.5px; font-weight:700; color:var(--g-ink-4); }

/* ── Wave 179 P10 - Master Prompt no longer squashed into a tiny box ── */
body.v4 .master-prompt-text{
  max-height: min(58vh, 640px);
  font-size: 12.5px;
  line-height: 1.62;
  padding: 16px 18px;
}

/* ── Wave 179 P11/P12 - Chief modals: clean icons/dots, no emoji ── */
body.v4 .sec-prio-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:7px; vertical-align:middle; }
body.v4 .tier-sep i, body.v4 .tier-sep svg{ width:16px; height:16px; flex-shrink:0; }
body.v4 .mblock .mb-ic{ width:15px; height:15px; vertical-align:-2px; }
body.v4 .escalation-icon svg{ width:16px; height:16px; }

/* ── Wave 179 P13/P14 - Guests: stat cards + appearance counts ── */
body.v4 .guest-stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width: 980px){ body.v4 .guest-stat-row{ grid-template-columns:repeat(2,1fr); } }
body.v4 .guest-stat{
  display:flex; align-items:center; gap:14px;
  background:rgba(255,255,255,0.65);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--g-border); border-radius:14px; padding:16px 18px;
}
body.v4 .guest-stat-ic{ width:42px; height:42px; border-radius:var(--r); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
body.v4 .guest-stat-ic svg{ width:20px; height:20px; }
body.v4 .guest-stat-sky    .guest-stat-ic{ background:var(--c-sky-bg);    color:var(--c-sky); }
body.v4 .guest-stat-mint   .guest-stat-ic{ background:var(--c-mint-bg);   color:var(--c-mint); }
body.v4 .guest-stat-lilac  .guest-stat-ic{ background:var(--c-lilac-bg);  color:var(--c-lilac); }
body.v4 .guest-stat-butter .guest-stat-ic{ background:var(--c-butter-bg); color:var(--c-butter); }
body.v4 .guest-stat-val{ font-family:var(--g-fd); font-size:26px; font-weight:800; line-height:1; color:var(--g-ink-1); letter-spacing:-0.02em; }
body.v4 .guest-stat-label{ font-size:12.5px; font-weight:700; color:var(--g-ink-1); margin-top:4px; }
body.v4 .guest-stat-sub{ font-size:11px; color:var(--g-ink-4); margin-top:1px; }
body.v4 .gcv2-stats{ display:flex; align-items:center; gap:7px; margin-top:8px; font-size:11.5px; color:var(--g-ink-3); }
body.v4 .gcv2-stat strong{ color:var(--g-ink-1); font-weight:800; }
body.v4 .gcv2-stat-dot{ color:var(--g-ink-4); }

/* ── Wave 179 P17/P18 - Intel: readable ink pills + full-width toggle bar ── */
/* tone-ink pill was white-on-white (dark bg fell through, text stayed #fff) */
body.v4 .pill-soft.tone-ink{ background:rgba(0,0,0,0.06); color:var(--apl-ink-2); }
body.v4 .intel-tabbar{ width:100%; }
body.v4 .intel-tabbar-action{ margin-left:auto; }
/* P15 - decline (✕) on a target card; appears on hover */
body.v4 .kb-card-decline{
  position:absolute; top:8px; right:8px; width:20px; height:20px;
  border:none; background:transparent; color:var(--g-ink-4);
  font-size:13px; line-height:1; border-radius:6px; cursor:pointer;
  opacity:0; transition:opacity .12s ease, background .12s ease, color .12s ease;
}
body.v4 .kb-card-intel:hover .kb-card-decline, body.v4 .ik-card:hover .kb-card-decline{ opacity:1; }
body.v4 .kb-card-decline:hover{ background:var(--cherry-soft, rgba(184,0,43,.08)); color:var(--cherry); }

/* ── Wave 179 P28/P29/P30 - money tiles were white-on-white ──
   The glass override whitens the tile background but left the text colour
   to a cascade that resolved to (near-)white. Force readable ink on the
   light glass tiles across Invoices, Revenue P&L and Annual Budget. */
body.v4 .money-tile-label{ color:var(--g-ink-3) !important; opacity:1; }
body.v4 .money-tile-value{ color:var(--g-ink-1) !important; }
body.v4 .money-tile-sub{ color:var(--g-ink-4) !important; opacity:1; }

/* ── Wave 179 P24/P25 - Sponsors: full-width toggle bar + add-deal spacing ── */
body.v4 .monday-tabbar{ width:100%; }
body.v4 .monday-tabbar-action{ margin-left:auto; }
/* Even vertical rhythm in the Add Deal modal (was cramped/uneven) */
body.v4 .monday-deal-modal-card .ep-field{ margin-bottom:14px; }
body.v4 .monday-deal-modal-card .ep-field-row{ margin-bottom:14px; }
body.v4 .monday-deal-modal-card .ep-field-row .ep-field{ margin-bottom:0; }
body.v4 .monday-deal-modal-card .staff-section-head{ margin:20px 0 12px; }
body.v4 .monday-deal-modal-card .staff-reveal{ margin-bottom:14px; }
/* P23 - Campaigns Live/Archived segmented toggle */
body.v4 .monday-camp-toggle .seg{
  border:1px solid var(--g-border); background:rgba(255,255,255,0.6);
  padding:6px 14px; border-radius:var(--r-pill); font-size:12.5px; font-weight:600;
  color:var(--g-ink-3); cursor:pointer; display:inline-flex; align-items:center; gap:6px;
}
body.v4 .monday-camp-toggle .seg.on{ background:var(--cherry); color:var(--on-accent); border-color:var(--cherry); }
body.v4 .monday-camp-toggle .seg-n{ font-size:11px; opacity:.75; font-weight:700; }

/* ── Wave 179 - Chief modals: shared glass-panel + row system (Option B) ──
   One language across all four popups (Memory Spine, Master Prompt,
   Subagent Discipline, Security Posture): tinted callouts, eyebrow section
   labels, frosted panels containing hairline-divided rows. */

/* Callouts - info (lilac) + semantic notes. Uniform soft tinted box, no
   left rail (Wave 179.x - removed the old darker left-bar wrap). */
body.v4 .sad-intro, body.v4 .sad-note{
  display:flex; gap:11px; align-items:flex-start;
  border:1px solid transparent;
  border-radius:var(--g-r); padding:14px 16px; margin-bottom:18px;
  font-size:13px; line-height:1.55; color:var(--g-ink-2);
}
body.v4 .sad-intro{ background:var(--c-lilac-bg); border-color:rgba(94,92,230,0.18); }
body.v4 .sad-note.cherry{ background:var(--cherry-bg); border-color:rgba(184,0,43,0.18); }
body.v4 .sad-note.mint{ background:var(--c-mint-bg); border-color:rgba(47,133,90,0.20); }
body.v4 .sad-note.butter{ background:var(--c-butter-bg); border-color:rgba(146,102,13,0.22); }
body.v4 .sad-ic, body.v4 .sad-intro-ic{ flex-shrink:0; margin-top:1px; }
body.v4 .sad-intro .sad-ic, body.v4 .sad-intro-ic{ color:var(--c-lilac); }
body.v4 .sad-note.cherry .sad-ic{ color:var(--cherry); }
body.v4 .sad-note.mint .sad-ic{ color:var(--c-mint); }
body.v4 .sad-note.butter .sad-ic{ color:var(--c-butter); }
body.v4 .sad-ic svg, body.v4 .sad-intro-ic svg{ width:18px; height:18px; }
body.v4 .sad-intro b, body.v4 .sad-note b{ color:var(--g-ink-1); font-weight:700; }

/* Section eyebrow */
body.v4 .aiceo-subhdr{ font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--g-ink-3); margin:20px 0 10px; }

/* Frosted glass panel.
   flex-shrink:0 is essential - .aiceo-modal-body is a flex column with
   overflow:auto, so without it flexbox compresses each panel (overflow:hidden
   then clips the rows) instead of letting the modal scroll. */
body.v4 .disc-panel{
  flex-shrink:0;
  background: var(--g-surface);
  border:1px solid var(--g-200); border-radius:var(--g-r-lg);
  box-shadow:var(--g-sh); margin-bottom:14px; padding-bottom:4px; overflow:hidden;
}
/* Callouts + eyebrows are also flex children of the modal body - keep them
   from being squeezed when content overflows. */
body.v4 .aiceo-modal-body > .sad-intro,
body.v4 .aiceo-modal-body > .sad-note,
body.v4 .aiceo-modal-body > .aiceo-subhdr{ flex-shrink:0; }
/* Panel header (tiered / sectioned) */
body.v4 .disc-phead{
  display:flex; align-items:center; gap:9px; padding:11px 16px;
  border-bottom:1px solid var(--g-rule);
  font-size:11.5px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--g-ink-2);
}
body.v4 .disc-phead-dim{ font-weight:600; letter-spacing:0; text-transform:none; color:var(--g-ink-4); }
body.v4 .disc-phead .disc-phead-count{ margin-left:auto; font-weight:700; color:var(--g-ink-4); }
body.v4 .disc-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; background:var(--g-ink-4); }
/* CH2 - section-head status dot reflects the section's worst control. */
body.v4 .disc-dot.mint{ background:var(--c-mint); }
body.v4 .disc-dot.butter{ background:var(--c-butter); }
body.v4 .disc-dot.cherry{ background:var(--cherry, var(--cherry)); }
body.v4 .disc-phead.tier-cherry{ color:var(--cherry); } body.v4 .disc-phead.tier-cherry .disc-dot{ background:var(--cherry); }
body.v4 .disc-phead.tier-lilac{ color:var(--c-lilac); } body.v4 .disc-phead.tier-lilac .disc-dot{ background:var(--c-lilac); }

/* Expandable item row */
body.v4 .disc-item{ border-top:1px solid var(--g-rule); }
body.v4 .disc-item:first-of-type, body.v4 .disc-phead + .disc-item{ border-top:0; }
body.v4 .disc-isum{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 16px; }
body.v4 .disc-isum::-webkit-details-marker{ display:none; }
body.v4 .disc-iname{ font-size:13.5px; font-weight:600; color:var(--g-ink-1); flex:1; }
body.v4 .disc-imeta{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
body.v4 .disc-ibody{ padding:14px 16px 18px; }
body.v4 .disc-ibody pre{ white-space:pre-wrap; font-size:12px; line-height:1.55; color:var(--g-ink-2); background:var(--g-50); border:1px solid var(--g-border); border-radius:var(--r-sm); padding:12px 14px; margin:4px 0 0; }
body.v4 .disc-ibody p{ font-size:13px; color:var(--g-ink-2); line-height:1.6; margin:0 0 10px; }
body.v4 .disc-ibody p:last-child{ margin-bottom:0; }
/* Custom bullets - neat lilac dot, even spacing (replaces cramped defaults) */
body.v4 .disc-ibody ul{ list-style:none; margin:8px 0 12px; padding:0; }
body.v4 .disc-ibody li{ position:relative; padding-left:18px; margin-bottom:8px; font-size:13px; color:var(--g-ink-2); line-height:1.5; }
body.v4 .disc-ibody li:last-child{ margin-bottom:0; }
body.v4 .disc-ibody li::before{ content:''; position:absolute; left:3px; top:8px; width:5px; height:5px; border-radius:50%; background:var(--g-ink-2); }
body.v4 .disc-ibody code{ background:var(--g-50); padding:1px 5px; border-radius:5px; font-size:12px; }

/* Static row */
body.v4 .disc-row{ display:flex; align-items:flex-start; gap:12px; padding:13px 16px; border-top:1px solid var(--g-rule); }
body.v4 .disc-row:first-child, body.v4 .disc-phead + .disc-row{ border-top:0; }
body.v4 .disc-row-ic{ flex-shrink:0; width:30px; height:30px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; background:var(--g-50); color:var(--g-ink-3); }
body.v4 .disc-row-ic svg{ width:16px; height:16px; }
body.v4 .disc-row-ic.mint{ background:var(--c-mint-bg); color:var(--c-mint); }
body.v4 .disc-row-ic.cherry{ background:var(--cherry-bg); color:var(--cherry); }
body.v4 .disc-row-ic.butter{ background:var(--c-butter-bg); color:var(--c-butter); }
body.v4 .disc-row-ic.lilac{ background:var(--c-lilac-bg); color:var(--c-lilac); }
body.v4 .disc-row-num{ flex-shrink:0; width:26px; height:26px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; font-family:var(--g-fd); font-weight:800; font-size:12.5px; background:var(--g-50); color:var(--g-ink-2); }
body.v4 .disc-row-num.cherry{ background:var(--cherry-bg); color:var(--cherry); }
body.v4 .disc-row-num.sky{ background:var(--c-sky-bg); color:var(--c-sky); }
body.v4 .disc-row-num.mint{ background:var(--c-mint-bg); color:var(--c-mint); }
body.v4 .disc-row-num.lilac{ background:var(--c-lilac-bg); color:var(--c-lilac); }
body.v4 .disc-row-body{ flex:1; min-width:0; }
body.v4 .disc-row-title{ font-size:13.5px; font-weight:600; color:var(--g-ink-1); }
body.v4 .disc-row-desc{ font-size:12.5px; color:var(--g-ink-3); line-height:1.5; margin-top:2px; }
body.v4 .disc-row-meta{ flex-shrink:0; align-self:center; font-size:11px; font-weight:700; color:var(--g-ink-4); letter-spacing:0.04em; text-transform:uppercase; }
body.v4 .disc-row-meta.cherry{ color:var(--cherry); }
body.v4 .disc-row-meta.sky{ color:var(--c-sky); }
body.v4 .disc-row-meta.mint{ color:var(--c-mint); }
body.v4 .disc-row-meta.lilac{ color:var(--c-lilac); }

/* Status pill + chevron (shared) */
body.v4 .discipline-badge{ font-size:10px; font-weight:700; letter-spacing:.02em; text-transform:none; padding:3px 9px; border-radius:var(--r-pill); white-space:nowrap; }
body.v4 .discipline-badge.ok{ background:var(--c-mint-bg); color:var(--c-mint); }
body.v4 .discipline-badge.missing{ background:var(--c-butter-bg); color:var(--c-butter); }
body.v4 .discipline-badge.bad{ background:var(--cherry-bg); color:var(--cherry); }
body.v4 .discipline-chev{ display:inline-flex; color:var(--g-ink-4); transition:transform .15s ease; }
body.v4 .discipline-chev svg{ width:16px; height:16px; }
body.v4 details[open] > .disc-isum .discipline-chev{ transform:rotate(180deg); }

/* Master prompt sits directly inside one butter box (no nested grey box) */
body.v4 .sad-note.sad-note-pre{ display:block; padding:0; }
body.v4 .sad-note-pre .master-prompt-text{
  margin:0; background:transparent !important; border:0 !important; box-shadow:none;
  padding:14px 16px; max-height:min(52vh,520px); color:var(--g-ink-2);
}

/* ── Wave 179 - Episode Surface: AI-trigger output panel ──
   Shown under a checklist section when that item carries an AI trigger.
   Lilac-tinted card matching the "✦ AI" treatment elsewhere. */
.es-ai-out{
  margin-top:12px; border:1px solid rgba(94,92,230,0.18);
  background:var(--c-lilac-bg, rgba(94,92,230,.08));
  border-radius:var(--g-r, 10px); padding:11px 13px;
}
.es-ai-out-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:7px; }
.es-ai-tag{ font-size:10.5px; font-weight:800; letter-spacing:.03em; color:var(--c-lilac); }
.es-ai-when{ font-size:10.5px; font-weight:600; color:var(--g-ink-4); }
.es-ai-out-body{ font-size:12.5px; line-height:1.6; color:var(--g-ink-1); white-space:pre-wrap; }
.es-ai-out.es-ai-working, .es-ai-out.es-ai-idle, .es-ai-out.es-ai-fail{
  display:flex; align-items:center; gap:10px;
}
/* Wave 191 - idle AI trigger keeps the artifacts purple (was grey). */
.es-ai-out.es-ai-idle{ background:var(--c-lilac-bg, rgba(94,92,230,.08)); border-color:rgba(94,92,230,0.18); }
.es-ai-out.es-ai-fail{ background:var(--cherry-bg, rgba(184,0,43,.08)); border-color:rgba(184,0,43,.20); }
.es-ai-status{ font-size:12px; color:var(--g-ink-3); }
.es-ai-out.es-ai-working .es-ai-status{ color:var(--c-lilac); font-weight:600; }
.es-ai-tag i, .es-ai-tag svg{ width:12px; height:12px; vertical-align:-2px; margin-right:3px; }

/* AI generation progress - determinate bar that fills toward a learned ETA, with
   a live "about Ns left" readout (run-trigger returns only when finished, so the
   ETA is an estimate that eases to ~90% then creeps, never lying by hitting 100%
   early). Fluid width - mobile-safe in any container. */
.es-aiprog{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:5px; }
.es-art .es-aiprog{ margin-top:8px; }
.es-aiprog-track{
  position:relative; height:5px; overflow:hidden;
  border-radius:var(--r-pill, 999px);
  background:var(--c-lilac-bg, rgba(94,92,230,.16));
}
.es-aiprog-fill{
  position:absolute; top:0; left:0; height:100%; width:3%;
  border-radius:inherit; background:var(--c-lilac);
  transition:width .9s linear;
}
.es-aiprog-meta{ font-size:11px; font-weight:600; color:var(--c-lilac); }
@media (prefers-reduced-motion: reduce){ .es-aiprog-fill{ transition:none; } }
/* Wave 191 - (?) brief tooltip beside an AI trigger title. */
.es-ai-help{ display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; margin-left:5px; border-radius:50%; background:rgba(94,92,230,.18); color:var(--indigo-2); font-size:9.5px; font-weight:700; cursor:help; vertical-align:middle; }
.es-ai-help:hover{ background:rgba(94,92,230,.30); }

/* ── Wave 182 - Episode Surface: AI Artifacts right-rail panel ── */
.es-art-body{ display:flex; flex-direction:column; gap:10px; }
.es-art{
  border:1px solid var(--g-200); border-radius:var(--g-r, 10px);
  background:var(--g-50); padding:10px 11px;
}
.es-art-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.es-art-name{ font-size:12px; font-weight:700; color:var(--c-lilac); line-height:1.3; }
.es-art-gen{
  flex-shrink:0; border:1px solid var(--c-lilac); background: var(--g-surface);
  color:var(--c-lilac); font-size:11px; font-weight:700;
  padding:3px 10px; border-radius:var(--r-pill); cursor:pointer; white-space:nowrap;
}
.es-art-gen:hover{ background:var(--c-lilac-bg, rgba(94,92,230,.10)); }
.es-art-status{ font-size:11.5px; color:var(--g-ink-4); margin-top:6px; }
.es-art-working{ color:var(--c-lilac); font-weight:600; }
.es-art-fail{ color:var(--cherry, var(--cherry)); }
.es-art-when{ font-size:10.5px; font-weight:600; color:var(--g-ink-4); margin-top:6px; }
.es-art-out{
  font-size:12px; line-height:1.55; color:var(--g-ink-1); white-space:pre-wrap;
  margin-top:5px; max-height:220px; overflow:auto;
  border-top:1px solid var(--g-200); padding-top:6px;
}

/* ── Wave 183 - artifact detail modal + refine chat ── */
.es-art-click, .es-ai-out-click{ cursor:pointer; transition:border-color .12s ease, background .12s ease; }
.es-art-click:hover{ border-color:var(--c-lilac); }
.es-ai-out-click:hover{ border-color:rgba(94,92,230,0.4); }

.es-art-modal-overlay{
  position:fixed; inset:0; z-index:9000;
  background:rgba(20,20,30,0.45); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; padding:28px;
}
.es-art-modal{
  width:min(720px,100%); max-height:88vh; display:flex; flex-direction:column;
  background: var(--g-surface); border-radius:var(--g-r-lg,16px); box-shadow:0 24px 70px rgba(0,0,0,0.3);
  overflow:hidden;
}
.es-art-modal-head{
  display:flex; align-items:flex-start; gap:12px; padding:18px 20px;
  border-bottom:1px solid var(--g-200);
}
.es-art-modal-title{ font-size:16px; font-weight:800; color:var(--c-lilac); }
.es-art-modal-sub{ font-size:12px; color:var(--g-ink-4); margin-top:3px; }
.es-art-modal-x{ margin-left:auto; background:none; border:none; font-size:22px; line-height:1; color:var(--g-ink-4); cursor:pointer; }
.es-art-modal-body{ padding:18px 20px; overflow:auto; display:flex; flex-direction:column; gap:18px; }
.es-art-modal-output{
  font-size:13.5px; line-height:1.6; color:var(--g-ink-1); white-space:pre-wrap;
  background:var(--g-50); border:1px solid var(--g-200); border-radius:10px; padding:14px 16px;
}
.es-art-chat{ display:flex; flex-direction:column; gap:10px; }
.es-art-chat-h{ font-size:11px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--g-ink-3); }
.es-art-chat-log{ display:flex; flex-direction:column; gap:8px; max-height:240px; overflow:auto; }
.es-art-chat-empty{ font-size:12.5px; color:var(--g-ink-4); line-height:1.5; }
.es-art-msg{ font-size:13px; line-height:1.5; padding:8px 12px; border-radius:var(--r); max-width:85%; white-space:pre-wrap; }
.es-art-msg-me{ align-self:flex-end; background:var(--c-lilac); color:var(--on-accent); border-bottom-right-radius:4px; }
.es-art-msg-ai{ align-self:flex-start; background:var(--g-100); color:var(--g-ink-1); border-bottom-left-radius:4px; }
.es-art-chat-compose{ display:flex; gap:8px; align-items:flex-end; }
.es-art-chat-compose textarea{
  flex:1; resize:vertical; min-height:38px; padding:9px 12px;
  border:1px solid var(--g-200); border-radius:10px; font:inherit; font-size:13.5px;
}
.es-art-modal-foot{
  display:flex; align-items:center; gap:10px; padding:14px 20px;
  border-top:1px solid var(--g-200);
}

/* ── Artifact viewer - split workspace (formatted document + Ask & refine rail) ── */
.es-art-modal.es-artws{
  width:min(1080px,100%); height:86vh; max-height:86vh; padding:0;
  display:grid; grid-template-columns:1fr 372px;
}
.es-artws-doc{ display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden; }
.es-artws-docbar{ display:flex; align-items:center; gap:8px; padding:12px 22px; border-bottom:1px solid var(--g-200); flex:none; }
.es-artws-dk{ flex:1; font-size:11px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; color:var(--cherry); }
.es-artws-docinner{ flex:1; min-height:0; padding:26px 36px 36px; overflow:auto; }
.es-artws-title{ font-family:var(--font,inherit); font-size:22px; font-weight:700; letter-spacing:-0.02em; line-height:1.25; color:var(--g-ink-1); margin:0 0 6px; }
.es-artws-meta{ font-size:12px; color:var(--g-ink-4); margin:0 0 2px; }
.es-artws-rule{ height:1px; background:var(--g-200); margin:16px 0 20px; }
.es-artws-rail{ display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--g-50); border-left:1px solid var(--g-200); }
.es-artws-railh{ display:flex; align-items:center; padding:13px 18px; border-bottom:1px solid var(--g-200); font-size:13px; font-weight:700; color:var(--g-ink-1); flex:none; }
.es-artws-railh span{ flex:1; }
.es-artws-railh .es-art-modal-x{ margin:0; }
.es-artws-log{ flex:1; padding:16px; overflow:auto; min-height:0; display:flex; flex-direction:column; gap:8px; }
.es-artws-compose{ padding:12px 16px; border-top:1px solid var(--g-200); background:var(--g-surface); flex:none; }
.es-artws-compose textarea{ width:100%; resize:none; min-height:46px; padding:9px 12px; border:1px solid var(--g-200); border-radius:10px; font:inherit; font-size:13px; margin-bottom:8px; }
.es-artws-askbtn{ width:100%; justify-content:center; }
.es-artws-rerun{ padding:12px 16px; border-top:1px dashed var(--g-200); background:var(--cherry-bg); flex:none; }
.es-artws-rerunbtn{ width:100%; font:inherit; font-size:13px; font-weight:700; padding:9px 14px; border-radius:var(--r-pill); border:1px solid var(--cherry); background:var(--cherry); color:var(--on-accent); cursor:pointer; }
.es-artws-rerunbtn:hover{ background:var(--cherry-deep); border-color:var(--cherry-deep); }
.es-artws-rerunbtn:disabled{ opacity:0.6; cursor:default; }
.es-artws-rerun-hint{ font-size:11px; color:var(--g-ink-4); margin-top:8px; text-align:center; line-height:1.4; }

/* document formatting - shared by the inline result panel (.es-artp-output)
   and the modal document pane. Markdown rendered via js/lib/markdown.js. */
.es-artdoc-body{ font-family:var(--font,inherit); font-size:14px; line-height:1.62; color:var(--g-ink-1); }
.es-artdoc-body h3{ font-size:16px; font-weight:700; letter-spacing:-0.01em; margin:22px 0 8px; color:var(--g-ink-1); }
.es-artdoc-body h3:first-child{ margin-top:0; }
.es-artdoc-body h4{ font-size:13.5px; font-weight:700; margin:16px 0 6px; color:var(--g-ink-1); }
.es-artdoc-body p{ margin:0 0 12px; }
.es-artdoc-body strong{ font-weight:700; }
.es-artdoc-body em{ font-style:italic; }
.es-artdoc-body code{ background:var(--g-100); padding:1px 5px; border-radius:4px; font-size:0.9em; }
.es-artdoc-body a{ color:var(--cherry); }
.es-artdoc-body ul{ margin:0 0 14px; padding-left:0; list-style:none; }
.es-artdoc-body ul li{ position:relative; padding-left:20px; margin-bottom:6px; }
.es-artdoc-body ul li::before{ content:""; position:absolute; left:5px; top:9px; width:5px; height:5px; border-radius:50%; background:var(--cherry-soft); }
.es-artdoc-body ol{ margin:0 0 14px; padding-left:22px; }
.es-artdoc-body ol li{ margin-bottom:6px; }
.es-artdoc-body blockquote{ margin:0 0 14px; padding:10px 16px; border-left:3px solid var(--cherry); background:var(--cherry-bg); border-radius:0 10px 10px 0; font-style:italic; color:var(--g-ink-2); }
.es-artdoc-body hr{ border:none; border-top:1px solid var(--g-200); margin:18px 0; }

/* compact result card (under a step / in a Show-artifact panel) - opens the popup */
.es-artcard{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer;
  background:var(--g-surface); border:1px solid var(--g-200); border-radius:12px; padding:11px 14px; margin-top:10px; font:inherit; transition:border-color .12s, box-shadow .12s; }
.es-artcard:hover{ border-color:var(--c-lilac); box-shadow:0 2px 10px rgba(94,92,230,0.12); }
.es-artcard-spark{ width:26px; height:26px; flex:none; display:grid; place-items:center; border-radius:8px; background:var(--c-lilac-bg); color:var(--c-lilac); font-size:13px; }
.es-artcard-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.es-artcard-name{ font-size:13px; font-weight:700; color:var(--g-ink-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.es-artcard-meta{ font-size:11.5px; color:var(--g-ink-4); }
.es-artcard-open{ flex:none; font-size:12px; font-weight:600; color:var(--c-lilac); padding:4px 12px; border:1px solid var(--c-lilac-bg); border-radius:var(--r-pill); }
.es-artcard:hover .es-artcard-open{ background:var(--c-lilac-bg); }

/* ── MOBILE: artifact viewer ── stack the split, rail below the document */
@media (max-width:720px){
  .es-art-modal.es-artws{ grid-template-columns:1fr; height:auto; max-height:92vh; overflow:auto; }
  .es-artws-rail{ border-left:none; border-top:1px solid var(--g-200); }
  .es-artws-docinner{ padding:20px 20px 28px; }
  .es-artws-log{ max-height:300px; }
}

/* ── Wave 184 - New supplier company popup ── */
.company-modal-overlay{
  position:fixed; inset:0; z-index:10050;   /* above the staff modal (.ep-modal-overlay = 9999) */
  background:rgba(20,20,30,0.45); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; padding:28px;
}
.company-modal{
  width:min(460px,100%); max-height:88vh; display:flex; flex-direction:column;
  background: var(--g-surface); border-radius:var(--g-r-lg,16px); box-shadow:0 24px 70px rgba(0,0,0,0.3); overflow:hidden;
}
.company-modal-head{
  display:flex; align-items:center; gap:12px; padding:16px 20px;
  border-bottom:1px solid var(--g-200); font-size:15px; font-weight:700; color:var(--g-ink-1);
}
.company-modal-x{ margin-left:auto; background:none; border:none; font-size:22px; line-height:1; color:var(--g-ink-4); cursor:pointer; }
.company-modal-body{ padding:18px 20px; overflow:auto; display:flex; flex-direction:column; gap:14px; }
.company-modal-foot{ display:flex; align-items:center; gap:10px; padding:14px 20px; border-top:1px solid var(--g-200); }

/* ── Wave 185 - fixes batch ── */
/* CH1 - master prompt box was collapsing to one line: it's a flex child of
   the scrolling modal body, so it got compressed. Stop it shrinking and let
   the prompt wrap + scroll inside. */
body.v4 #mp-box{ flex-shrink:0; }
body.v4 .sad-note-pre{ flex-shrink:0; }
body.v4 .master-prompt-text{ overflow:auto; white-space:pre-wrap; min-height:160px; }

/* P1 - tasks you don't own: tick control is shown but disabled. */
.es-tick-locked{ opacity:0.55; cursor:not-allowed; }
.es-tick-locked .es-tick-box{ border-style:dashed; }

/* D3 - "Your tasks" rows: no avatar; name-led with colour-coded stage pill. */
body.v4 .task-row.task-row-v3{ display:flex; align-items:flex-start; gap:11px; }
body.v4 .task-row-v3 .task-row-body{ flex:1; min-width:0; }
body.v4 .task-row-v3 .task-row-topline{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
body.v4 .task-row-v3 .task-row-guest{ font-size:15px; font-weight:800; letter-spacing:-0.01em; color:var(--g-ink-1); }
body.v4 .task-row-v3 .task-row-epnum{ font-size:11px; font-weight:700; color:var(--g-ink-4); }
body.v4 .task-row-v3 .task-row-reldate{ font-size:12px; color:var(--g-ink-3); }
body.v4 .task-row-v3 .task-row-reldate.due-today,
body.v4 .task-row-v3 .task-row-reldate.overdue{ color:var(--cherry,var(--cherry)); font-weight:600; }
body.v4 .task-row-v3 .task-row-reldate.due-tomorrow{ color:var(--c-butter); font-weight:600; }
body.v4 .task-row-v3 .task-row-title{ font-size:13px; color:var(--g-ink-2); margin-top:3px; }
body.v4 .task-row-v3 .stagepill{
  margin-left:auto; flex-shrink:0; align-self:center;
  font-size:10.5px; font-weight:700; letter-spacing:0.02em;
  padding:3px 10px; border-radius:var(--r-pill); white-space:nowrap;
  background:var(--g-100); color:var(--g-ink-2);
}
body.v4 .stagepill.stage-pitch{ background:var(--c-sky-bg); color:var(--c-sky); }
body.v4 .stagepill.stage-booked{ background:var(--c-butter-bg); color:var(--c-butter); }
body.v4 .stagepill.stage-recorded{ background:var(--c-lilac-bg); color:var(--c-lilac); }
body.v4 .stagepill.stage-in_edit{ background:var(--c-peach-bg); color:var(--c-peach); }
body.v4 .stagepill.stage-scheduled{ background:var(--c-mint-bg); color:var(--c-mint); }
body.v4 .stagepill.stage-published{ background:var(--c-sage-bg); color:var(--c-sage); }

/* E1 - multiple owner pills on a checklist editor row. */
body.v4 .cke-row-owners{ display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end; align-items:center; max-width:180px; }
/* E2 - dragging feedback for the cke-row list. */
body.v4 .cke-row.tpl-dragging{ opacity:0.5; }

/* D5 - Team now: stronger chat-icon contrast + reserve the slot for self so
   the online/offline dots line up across every row. */
body.v4 .team-chat-icon{ background:rgba(0,113,227,0.16) !important; border:1px solid rgba(0,113,227,0.40) !important; color:var(--g-blue); }
body.v4 .team-chat-icon:hover{ background:rgba(0,113,227,0.28) !important; }
body.v4 .team-chat-spacer{ display:inline-block; width:30px; height:30px; margin-left:8px; flex:0 0 auto; }

/* ── Wave 187 - admin "Viewing as" impersonation banner ── */
.view-as-banner{
  position:fixed; top:0; left:0; right:0; z-index:10100;
  display:flex; align-items:center; gap:12px;
  background:var(--cherry,var(--cherry)); color:var(--on-accent);
  padding:9px 18px; font-size:13px; font-weight:600;
  box-shadow:0 2px 12px rgba(0,0,0,0.22);
}
.view-as-dot{ width:9px; height:9px; border-radius:50%; background: var(--g-surface); box-shadow:0 0 0 3px rgba(255,255,255,0.35); flex-shrink:0; }
.view-as-text strong{ font-weight:800; }
.view-as-close{
  margin-left:auto; background:rgba(255,255,255,0.18); border:1px solid rgba(255,255,255,0.55);
  color:var(--on-accent); font-weight:700; font-size:12px; padding:4px 13px; border-radius:var(--r-pill); cursor:pointer; white-space:nowrap;
}
.view-as-close:hover{ background:rgba(255,255,255,0.32); }
body.is-impersonating{ padding-top:40px; }

/* ── Wave 189 - Sponsors → Inventory Calendar ── */
body.v4 .inv-head{ display:flex; align-items:center; gap:12px; padding:13px 18px; border-bottom:1px solid var(--g-rule); }
body.v4 .inv-head-name{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--g-ink-3); }
body.v4 .inv-slip{ font-size:12px; color:var(--g-ink-3); display:flex; align-items:center; gap:8px; }
body.v4 .inv-slip select{ font:inherit; font-size:12px; padding:4px 8px; border:1px solid var(--g-200); border-radius:var(--r-sm); background: var(--g-surface); }

body.v4 .inv-monthnav{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--g-ink-3); }
body.v4 .inv-monthnav button{ width:24px; height:24px; border-radius:7px; border:1px solid var(--g-200); background: var(--g-surface); color:var(--g-ink-2); cursor:pointer; font-size:14px; line-height:1; }
body.v4 .inv-monthnav button:disabled{ opacity:.4; cursor:default; }
body.v4 .inv-monthnav span{ font-weight:600; min-width:108px; text-align:center; }
body.v4 .inv-ep-undated{ background:repeating-linear-gradient(135deg,transparent,transparent 8px,var(--g-50) 8px,var(--g-50) 16px); }
body.v4 .inv-nodate{ color:var(--c-butter); font-weight:700; }
body.v4 .inv-months{ display:flex; gap:14px; padding:18px; overflow-x:auto; }
body.v4 .inv-month{ min-width:150px; flex:1; }
body.v4 .inv-m-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
body.v4 .inv-m-name{ font-size:13px; font-weight:700; }
body.v4 .inv-m-sub{ font-size:11px; color:var(--g-ink-4); }
body.v4 .inv-bar{ height:120px; border-radius:10px; overflow:hidden; display:flex; flex-direction:column-reverse; border:1px solid var(--g-200); background:var(--g-50); }
body.v4 .inv-bar.forecast{ border-style:dashed; border-color:var(--cherry); }
body.v4 .inv-seg{ width:100%; }
body.v4 .inv-seg.sold{ background:var(--c-mint); }
body.v4 .inv-seg.held{ background:var(--c-butter); }
body.v4 .inv-seg.open{ background:var(--g-200); }
body.v4 .inv-seg.fc{ background:repeating-linear-gradient(135deg,var(--g-100),var(--g-100) 5px,transparent 5px,transparent 10px); }
body.v4 .inv-fc-tag{ font-size:9px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--cherry); border:1px dashed var(--cherry); border-radius:var(--r-pill); padding:1px 6px; margin-left:5px; vertical-align:middle; }
body.v4 .inv-m-legend{ margin-top:8px; font-size:11px; color:var(--g-ink-3); }
body.v4 .inv-legend{ display:flex; gap:16px; flex-wrap:wrap; padding:0 18px 16px; font-size:11.5px; color:var(--g-ink-3); }
body.v4 .inv-dot{ display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:5px; vertical-align:middle; }

body.v4 .inv-grid2{ display:grid; grid-template-columns:1fr 320px; gap:16px; align-items:start; }
@media (max-width:1000px){ body.v4 .inv-grid2{ grid-template-columns:1fr; } }

body.v4 .inv-ep-row{ display:flex; align-items:center; gap:14px; padding:12px 18px; border-top:1px solid var(--g-rule); }
body.v4 .inv-ep-row:first-of-type{ border-top:0; }
body.v4 .inv-ep-meta{ width:230px; flex-shrink:0; }
body.v4 .inv-ep-guest{ font-size:14px; font-weight:700; letter-spacing:-.01em; }
body.v4 .inv-ep-sub{ font-size:11.5px; color:var(--g-ink-4); margin-top:2px; }
body.v4 .inv-ep-pill{ display:inline-block; font-size:9.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:2px 7px; border-radius:var(--r-pill); margin-top:5px; }
body.v4 .inv-ep-pill.pill-sch{ background:var(--c-mint-bg); color:var(--c-mint); }
body.v4 .inv-ep-pill.pill-rec{ background:var(--c-lilac-bg); color:var(--c-lilac); }
body.v4 .inv-ep-pill.pill-prj{ background:var(--g-100); color:var(--g-ink-3); }

body.v4 .inv-slots{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; flex:1; }
body.v4 .inv-slot{ border-radius:9px; padding:8px 10px; min-height:52px; font-size:11.5px; cursor:pointer; border:1px solid transparent; display:flex; flex-direction:column; justify-content:center; gap:2px; transition:transform .1s; }
body.v4 .inv-slot:hover{ transform:translateY(-1px); }
body.v4 .inv-s-idx{ font-size:9px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--g-ink-4); }
body.v4 .inv-s-name{ font-weight:700; }
body.v4 .inv-slot.open{ background:var(--g-50); border:1px dashed var(--g-200); }
body.v4 .inv-slot.open .inv-s-name{ color:var(--g-ink-3); font-weight:600; }
body.v4 .inv-slot.held{ background:var(--c-butter-bg); border:1px dashed var(--c-butter); }
body.v4 .inv-slot.held .inv-s-name{ color:var(--c-butter); }
body.v4 .inv-slot.tone-mint{ background:var(--c-mint-bg); }  body.v4 .inv-slot.tone-mint .inv-s-name{ color:var(--c-mint); }
body.v4 .inv-slot.tone-lilac{ background:var(--c-lilac-bg); } body.v4 .inv-slot.tone-lilac .inv-s-name{ color:var(--c-lilac); }
body.v4 .inv-slot.tone-sky{ background:var(--c-sky-bg); }    body.v4 .inv-slot.tone-sky .inv-s-name{ color:var(--c-sky); }
body.v4 .inv-slot.tone-rose{ background:var(--c-rose-bg); }  body.v4 .inv-slot.tone-rose .inv-s-name{ color:var(--c-rose); }
body.v4 .inv-slot.tone-sage{ background:var(--c-sage-bg); }  body.v4 .inv-slot.tone-sage .inv-s-name{ color:var(--c-sage); }
body.v4 .inv-slot.tone-peach{ background:var(--c-peach-bg); }body.v4 .inv-slot.tone-peach .inv-s-name{ color:var(--c-peach); }

body.v4 .inv-pace{ padding:14px 16px; border-top:1px solid var(--g-rule); }
body.v4 .inv-pace:first-of-type{ border-top:0; }
body.v4 .inv-pace-h{ display:flex; justify-content:space-between; align-items:baseline; }
body.v4 .inv-pace-name{ font-size:13px; font-weight:700; }
body.v4 .inv-pace-count{ font-size:12px; color:var(--g-ink-3); }
body.v4 .inv-pace-track{ height:8px; border-radius:var(--r-pill); background:var(--g-100); margin:8px 0 4px; overflow:hidden; }
body.v4 .inv-pace-fill{ height:100%; border-radius:var(--r-pill); }
body.v4 .inv-pace.ok .inv-pace-fill{ background:var(--c-mint); }     body.v4 .inv-pace.ok .inv-pace-status{ color:var(--c-mint); }
body.v4 .inv-pace.behind .inv-pace-fill{ background:var(--cherry); } body.v4 .inv-pace.behind .inv-pace-status{ color:var(--cherry); }
body.v4 .inv-pace.soft .inv-pace-fill{ background:var(--c-butter); } body.v4 .inv-pace.soft .inv-pace-status{ color:var(--c-butter); }
body.v4 .inv-pace-foot{ font-size:11px; }
body.v4 .inv-pace-status{ font-weight:700; }

body.v4 .inv-modal-overlay{ position:fixed; inset:0; z-index:9200; background:rgba(20,20,30,.45); backdrop-filter:blur(2px); display:flex; align-items:center; justify-content:center; padding:28px; }
body.v4 .inv-modal{ width:min(420px,100%); background: var(--g-surface); border-radius:var(--g-r-lg); box-shadow:0 24px 70px rgba(0,0,0,.3); overflow:hidden; }
body.v4 .inv-modal-head{ display:flex; align-items:center; gap:12px; padding:15px 18px; border-bottom:1px solid var(--g-rule); font-size:14px; font-weight:700; }
body.v4 .inv-modal-head button{ margin-left:auto; background:none; border:none; font-size:22px; line-height:1; color:var(--g-ink-4); cursor:pointer; }
body.v4 .inv-modal-body{ padding:16px 18px; }
body.v4 .inv-modal-state{ font-size:13px; color:var(--g-ink-2); }
body.v4 .inv-modal-foot{ display:flex; align-items:center; gap:8px; padding:14px 18px; border-top:1px solid var(--g-rule); }

/* ── Wave 190 - per-deal checklist surface ── */
body.v4 .ds-modal{ width:min(760px,100%); max-height:88vh; display:flex; flex-direction:column; background: var(--g-surface); border-radius:var(--g-r-lg); box-shadow:0 24px 70px rgba(0,0,0,.3); overflow:hidden; }
body.v4 .ds-head{ display:flex; align-items:flex-start; gap:12px; padding:16px 20px; border-bottom:1px solid var(--g-rule); }
body.v4 .ds-title{ font-size:16px; font-weight:800; }
body.v4 .ds-sub{ font-size:12px; color:var(--g-ink-4); margin-top:2px; }
body.v4 .ds-x{ margin-left:auto; background:none; border:none; font-size:22px; line-height:1; color:var(--g-ink-4); cursor:pointer; }
body.v4 .ds-rail{ display:flex; gap:6px; padding:12px 20px; border-bottom:1px solid var(--g-rule); overflow-x:auto; }
body.v4 .ds-stage{ flex-shrink:0; font-size:12px; font-weight:600; padding:6px 12px; border-radius:var(--r-pill); border:1px solid var(--g-200); background: var(--g-surface); color:var(--g-ink-3); cursor:pointer; }
body.v4 .ds-stage.on{ background:var(--cherry); color:var(--on-accent); border-color:var(--cherry); }
body.v4 .ds-stage.done{ color:var(--c-mint); border-color:var(--c-mint-bg); }
body.v4 .ds-body{ padding:16px 20px; overflow:auto; display:flex; flex-direction:column; gap:12px; }
body.v4 .ds-sec-foot{ display:flex; justify-content:flex-end; margin-top:10px; }
body.v4 .ds-foot{ display:flex; align-items:center; gap:10px; padding:14px 20px; border-top:1px solid var(--g-rule); }
body.v4 .kb-card-checklist{ margin-top:8px; background:var(--c-lilac-bg); border:none; color:var(--c-lilac); font-size:11px; font-weight:700; padding:4px 10px; border-radius:var(--r-pill); cursor:pointer; }
body.v4 .kb-card-checklist:hover{ background:rgba(94,92,230,.22); }
/* Wave 191 - card click now opens the deal surface; this subtle pill opens
   the commercial-terms edit modal instead. */
body.v4 .kb-card-edit{ margin-top:8px; background:rgba(0,0,0,.05); border:none; color:var(--g-ink-3); font-size:11px; font-weight:600; padding:4px 10px; border-radius:var(--r-pill); cursor:pointer; }
body.v4 .kb-card-edit:hover{ background:rgba(0,0,0,.09); color:var(--g-ink-1); }

/* =============================================================
   Wave 191 - Sponsor session (deal studio booking) on the calendars.
   Teal, distinct from lilac Recording / green Release / amber TBC.
   ============================================================= */
/* Studio Schedule grid block */
body.v4 .ss-event.ss-sponsor {
  background: rgba(0, 132, 158, 0.13);
  border-color: rgba(0, 132, 158, 0.34);
}
body.v4 .ss-event.ss-sponsor:hover {
  background: rgba(0, 132, 158, 0.20);
  border-color: #00849e;
}
body.v4 .ss-event.ss-sponsor .ss-event-label { color: #036077; }

/* Studio Schedule subbar key swatches */
body.v4 .ss-key-swatch {
  display: inline-block; width: 11px; height: 11px;
  border-radius: 3px; vertical-align: middle;
  margin: 0 2px; border: 1px solid rgba(0,0,0,0.15);
}
body.v4 .ss-key-swatch.ss-key-rec     { background: rgba(94, 92, 230, 0.30); border-color: rgba(94,92,230,0.45); }
body.v4 .ss-key-swatch.ss-key-sponsor { background: rgba(0, 132, 158, 0.30); border-color: rgba(0,132,158,0.45); }

/* =============================================================
   ST2-5 - studio@ calendar bookings on the Studio Schedule grid.
   Sage, distinct from lilac Recording / teal Sponsor / hatched Busy.
   Token pairs only (--sage-*) - they carry their own dark-mode remap
   (Wave 231 pastel pairs), so no .dark override is needed here.
   ============================================================= */
body.v4 .ss-event.ss-studiocal {
  background: var(--sage-bg);
  border-color: var(--sage);
}
body.v4 .ss-event.ss-studiocal:hover {
  border-color: var(--sage-fg);
}
body.v4 .ss-event.ss-studiocal .ss-event-label { color: var(--sage-fg); }
body.v4 .ss-key-swatch.ss-key-studio { background: var(--sage); border-color: var(--sage-fg); }
/* Option A - part-hour studio chips are inset within their hour columns
   (margins set inline by the renderer). Trim horizontal padding so the
   narrowed chip still reads, and never collapse below a usable width. */
body.v4 .ss-event.is-partial {
  padding-left: 9px;
  padding-right: 9px;
  min-width: 44px;
}

/* Dashboard week board chip + kind tag */
body.v4 .c-week-item.studio.sponsor {
  background: rgba(0, 132, 158, 0.10);
  border-color: rgba(0, 132, 158, 0.28);
  text-decoration: none;
}
body.v4 .c-week-kind.sponsor { background: rgba(0, 132, 158, 0.16); color: #036077; }
body.v4 .c-week-key-swatch.sw-sponsor {
  background: rgba(0, 132, 158, 0.18);
  border-color: rgba(0, 132, 158, 0.40);
}

/* =============================================================
   Wave 191 - Display module (deal checklist) + Ad Inventory view.
   ============================================================= */
body.v4 .es-sec-kindpill.es-kind-display { background: rgba(0,132,158,0.12); color: #036077; }
body.v4 .cke-row-type.cke-row-type-display { background: rgba(0,132,158,0.12); color: #036077; }

body.v4 .ds-inv { display: flex; flex-direction: column; gap: 12px; }
body.v4 .ds-inv-summary { font-size: 12px; color: var(--g-ink-3); font-weight: 600; }
body.v4 .ds-inv-empty { font-size: 13px; color: var(--g-ink-3); padding: 14px; background: rgba(0,0,0,0.02); border-radius: 10px; }
body.v4 .ds-inv-group { display: flex; flex-direction: column; gap: 4px; }
body.v4 .ds-inv-grouphead {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--g-ink-4); padding: 4px 2px;
}
body.v4 .ds-inv-grouphead.is-deployed { color: var(--green-strong); }
body.v4 .ds-inv-grouphead.is-upcoming { color: #c47100; }
body.v4 .ds-inv-row {
  display: grid; grid-template-columns: 48px 1fr auto auto; gap: 10px; align-items: center;
  padding: 8px 12px; background: var(--g-surface); border: 1px solid rgba(0,0,0,0.06); border-radius: var(--r-sm); font-size: 13px;
}
body.v4 .ds-inv-ep { font-weight: 700; color: var(--g-ink-2); font-variant-numeric: tabular-nums; }
body.v4 .ds-inv-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--g-ink-1); }
body.v4 .ds-inv-slot { font-size: 11px; color: var(--g-ink-3); }
body.v4 .ds-inv-date { font-size: 11.5px; color: var(--g-ink-3); font-variant-numeric: tabular-nums; }

/* Sponsor reach reports - launcher block inside the Ad inventory. */
body.v4 .ds-rep {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px; margin: 2px 0 6px; background: var(--g-surface);
  border: 1px solid rgba(0,0,0,0.06); border-radius: var(--r-sm);
}
body.v4 .ds-rep-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--g-ink-3); }
body.v4 .ds-rep-sub { font-size: 11px; font-weight: 600; color: var(--g-ink-3); margin-top: 4px; }
body.v4 .ds-rep-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
body.v4 .ds-rep-btn {
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  color: var(--g-ink-1); background: var(--g-bg, transparent);
  border: 1px solid var(--apl-rule-soft, rgba(0,0,0,0.12)); border-radius: 999px;
  padding: 7px 13px; transition: background .15s, border-color .15s;
}
body.v4 .ds-rep-btn:hover { border-color: var(--apl-blue); color: var(--apl-blue); }
body.v4 .ds-rep-primary { align-self: flex-start; background: var(--apl-blue); color: var(--on-accent); border-color: var(--apl-blue); }
body.v4 .ds-rep-primary:hover { filter: brightness(1.06); color: var(--on-accent); }
body.v4 .ds-rep-showbtn span { color: var(--g-ink-3); font-weight: 500; margin-left: 6px; font-variant-numeric: tabular-nums; }
body.v4 .ds-rep-showbtn:hover span { color: var(--apl-blue); }
body.v4.dark .ds-rep { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
body.v4.dark .ds-rep-btn { color: rgba(255,255,255,.9); }

/* Wave 192 - postponed episode card (pinned top of Booked, amber). */
body.v4 .kb-card.kb-postponed{ background:rgba(255,159,10,.10); box-shadow:inset 0 0 0 1px rgba(196,113,0,.30); }
body.v4 .kb-postpone-tag{ display:inline-block; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#c47100; background:rgba(255,159,10,.16); padding:2px 8px; border-radius:var(--r-pill); margin-bottom:6px; }

/* Wave 192 - notifications bell + dropdown. */
body.v4 .notif-bell{ position:relative; display:flex; align-items:center; }
body.v4 .notif-bell-btn{ position:relative; background:none; border:none; cursor:pointer; color:var(--g-ink-2); padding:6px; border-radius:10px; display:flex; align-items:center; }
body.v4 .notif-bell-btn:hover{ background:rgba(0,0,0,.05); color:var(--g-ink-1); }
body.v4 .notif-badge{ position:absolute; top:0; right:0; min-width:16px; height:16px; padding:0 4px; border-radius:var(--r-pill); background:var(--cherry,var(--cherry)); color:var(--on-accent); font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; }
/* The badge is toggled via the `hidden` attribute when count is 0; the
   display:flex above would otherwise defeat it, so honour [hidden] explicitly. */
body.v4 .notif-badge[hidden]{ display:none !important; }
/* ░░ Bug4 - non-dashboard panels hardcoded #fff / white-glass and never flipped
   in dark, so they read as murky grey over the dark canvas. Flip the common
   card/panel surfaces to dark tokens (dashboard panels use .dv2-row .p and are
   handled separately, so they're untouched). ░░ */
body.v4.dark .card,
body.v4.dark .notif-panel,
body.v4.dark .gsearch-panel,
body.v4.dark .intel-target,
body.v4.dark .mwk-card,
body.v4.dark .wb-card,
body.v4.dark .card.card-dark,
body.v4.dark .panel.card-dark,
body.v4.dark .velocity-ag .p,
body.v4.dark .brain,
body.v4.dark .kb-col,
body.v4.dark .dash-panel {
  /* Wave 224 - match the dashboard/hero apple-glass dark-blue gradient (was flat
     grey/black). Single-background stack (no ::before) avoids overflow clipping. */
  background:
    radial-gradient(ellipse 130% 140% at 0% 0%, rgba(94,92,230,.42), transparent 60%),
    radial-gradient(ellipse 120% 130% at 100% 100%, rgba(0,113,227,.34), transparent 60%),
    linear-gradient(180deg,#1d1d1f 0%,var(--ink-deep) 100%) !important;
  border-color: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.96);
}
body.v4.dark .card .card-sub,
body.v4.dark .card .card-title { color: var(--ink-2); }
/* Inner elements that sit ON the dark gradient (kanban cards, brain prompt box)
   become translucent glass with light text, not flat black/white. */
body.v4.dark .kb-card,
body.v4.dark .kb-more,
body.v4.dark .brain-prompt {
  background: rgba(255,255,255,.09) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.96);
}
/* ░░ Wave 225 - dark-mode sweep. Extends the Wave 224 apple-glass gradient to
   every remaining non-hero CONTAINER panel/card/col/cell that was still
   hardcoded #fff / rgba(255,255,255,…) (Group A) or flat var(--g-surface)
   grey #1c1c20 (Group B) in dark mode. Hero (.hero) is intentionally untouched
   - it flips light by design. .dv2-row .p is handled separately (Wave 224). ░░ */
body.v4.dark .metric-tile,
body.v4.dark .metric-card,
body.v4.dark .intel-kcard,
body.v4.dark .intel-info-card,
body.v4.dark .intel-rail-card,
body.v4.dark .intel-audience-card,
body.v4.dark .pitch-card,
body.v4.dark .sp-card,
body.v4.dark .money-tile,
body.v4.dark .guest-card,
body.v4.dark .guest-card-v2,
body.v4.dark .guest-tile,
body.v4.dark .guest-stat,
body.v4.dark .ceo-tile,
body.v4.dark .discipline-card,
body.v4.dark .ec-glance-card,
body.v4.dark .ec-dossier-card,
body.v4.dark .ec-pane-card,
body.v4.dark .ec-bluecard,
body.v4.dark .kanban-card,
body.v4.dark .kanban-col,
body.v4.dark .kcard,
body.v4.dark .kcol,
body.v4.dark .cp-panel,
body.v4.dark .settings-pane,
body.v4.dark .integration-card,
body.v4.dark .topic-card,
body.v4.dark .finding-card-v2,
body.v4.dark .esubs-card,
body.v4.dark .cal-cell,
body.v4.dark .big-cal-cell,
body.v4.dark .studio-grid-cell,
body.v4.dark .agent-card,
body.v4.dark .ai-agent-card,
body.v4.dark .booking-panel,
body.v4.dark .booking-box,
body.v4.dark .ep-card,
body.v4.dark .empty-panel,
body.v4.dark .stat-tile,
body.v4.dark .stat,
body.v4.dark .then-card,
body.v4.dark .ob-card,
body.v4.dark .chart-card,
body.v4.dark .cm-card,
body.v4.dark .epp2-stat-tile,
body.v4.dark .brain-card,
body.v4.dark .disc-panel,
body.v4.dark .es-panel,
body.v4.dark .es-form-card,
body.v4.dark .es-modal-card,
body.v4.dark .pcard,
body.v4.dark .pcard-big,
body.v4.dark .ver-card,
body.v4.dark .fmb-card,
body.v4.dark .tpl-type-card {
  background:
    radial-gradient(ellipse 130% 140% at 0% 0%, rgba(94,92,230,.42), transparent 60%),
    radial-gradient(ellipse 120% 130% at 100% 100%, rgba(0,113,227,.34), transparent 60%),
    linear-gradient(180deg,#1d1d1f 0%,var(--ink-deep) 100%) !important;
  border-color: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.96);
}
/* Wave 225 - small inner ROWS / chips / items / checkboxes that sit ON a dark
   panel become translucent glass with light text, not flat grey/white. */
body.v4.dark .wk-day-item,
body.v4.dark .wk7-col-head,
body.v4.dark .pulse-item,
body.v4.dark .comp-item,
body.v4.dark .epp2-ai-row,
body.v4.dark .es-task-box,
body.v4.dark .es-task-row,
body.v4.dark .es-tick-box,
body.v4.dark .guest-row,
body.v4.dark .guest-list-row,
body.v4.dark .staff-perm-row,
body.v4.dark .acc-prow,
body.v4.dark .acc-audit-row,
body.v4.dark .act-row,
body.v4.dark .ds-inv-row,
body.v4.dark .ver-row,
body.v4.dark .vrow,
body.v4.dark .vel-chip,
body.v4.dark .vel-item,
body.v4.dark .cke-row,
body.v4.dark .prio-edit-row {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.94);
}
body.v4 .notif-panel{ position:absolute; top:calc(100% + 8px); right:0; width:340px; max-height:60vh; overflow:auto; background: var(--g-surface); border:1px solid var(--g-200); border-radius:14px; box-shadow:0 12px 40px rgba(0,0,0,.18); z-index:10060; }
body.v4 .notif-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--g-100); font-size:13px; font-weight:700; color:var(--g-ink-1); }
body.v4 .notif-head button{ background:none; border:none; color:var(--g-blue); font-size:12px; font-weight:600; cursor:pointer; }
body.v4 .notif-list{ display:flex; flex-direction:column; }
body.v4 .notif-empty{ padding:22px 14px; text-align:center; color:var(--g-ink-3); font-size:13px; }
body.v4 .notif-item{ display:flex; gap:10px; align-items:flex-start; text-align:left; background:none; border:none; border-bottom:1px solid var(--g-100); padding:11px 14px; cursor:pointer; width:100%; }
body.v4 .notif-item:hover{ background:rgba(0,0,0,.025); }
body.v4 .notif-item.unread{ background:rgba(0,113,227,.05); }
body.v4 .notif-item.unread:hover{ background:rgba(0,113,227,.09); }
body.v4 .notif-item-ico{ flex-shrink:0; width:22px; height:22px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:12px; background:rgba(0,0,0,.05); }
body.v4 .notif-ico-ai{ background:rgba(94,92,230,.14); color:var(--indigo-2); }
body.v4 .notif-ico-urgent{ background:rgba(255,159,10,.16); color:#c47100; }
body.v4 .notif-item-main{ display:flex; flex-direction:column; gap:2px; min-width:0; }
body.v4 .notif-item-title{ font-size:13px; font-weight:600; color:var(--g-ink-1); }
body.v4 .notif-item-body{ font-size:12px; color:var(--g-ink-3); }
body.v4 .notif-item-when{ font-size:11px; color:var(--g-ink-4); }

/* Wave 192 - module dashboard (pickable panels). */
body.v4 .dash-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:900px){ body.v4 .dash-grid{ grid-template-columns:1fr; } }
body.v4 .dash-panel{ background:rgba(255,255,255,.55); backdrop-filter:blur(28px) saturate(180%); border:1px solid var(--g-border); border-radius:var(--g-r-lg,16px); box-shadow:var(--g-sh); display:flex; flex-direction:column; min-height:200px; overflow:hidden; }
body.v4 .dash-panel-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid rgba(0,0,0,.06); }
body.v4 .dash-panel-title{ font-family:var(--g-fd); font-weight:600; font-size:14px; color:var(--g-ink-1); }
body.v4 .dash-panel-x{ background:none; border:none; font-size:18px; line-height:1; color:var(--g-ink-4); cursor:pointer; padding:0 4px; }
body.v4 .dash-panel-x:hover{ color:var(--cherry); }
body.v4 .dash-panel-body{ padding:14px 16px; flex:1; overflow:auto; }
body.v4 .dash-panel-empty{ font-size:13px; color:var(--g-ink-3); padding:8px 2px; }
body.v4 .dash-empty{ border:2px dashed var(--g-200); border-radius:var(--g-r-lg,16px); background:transparent; min-height:200px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--g-ink-3); font-size:13px; font-weight:600; cursor:pointer; }
body.v4 .dash-empty:hover{ border-color:var(--g-blue); color:var(--g-blue); background:rgba(0,113,227,.03); }
body.v4 .dash-empty-plus{ font-size:26px; line-height:1; font-weight:400; }
body.v4 .dash-statlist{ display:flex; flex-direction:column; }
body.v4 .dash-statrow{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px solid rgba(0,0,0,.05); font-size:13px; color:var(--g-ink-1); }
body.v4 .dash-statrow.unread{ font-weight:600; }
body.v4 .dash-statn{ color:var(--g-ink-3); font-variant-numeric:tabular-nums; font-size:12.5px; }
body.v4 .dash-bignum{ font-size:30px; font-weight:600; font-family:var(--g-fd); color:var(--g-ink-1); padding:8px 0; }
body.v4 .dash-pick{ text-align:left; background: var(--g-surface); border:1px solid var(--g-200); border-radius:var(--r); padding:12px 14px; cursor:pointer; }
body.v4 .dash-pick:hover{ border-color:var(--g-blue); background:rgba(0,113,227,.03); }
body.v4 .dash-pick-title{ font-weight:600; font-size:13.5px; color:var(--g-ink-1); }
body.v4 .dash-pick-desc{ font-size:12px; color:var(--g-ink-3); margin-top:2px; }

/* Wave 192 - Master Brain learnings review. */
body.v4 .brain-note{ font-size:12.5px; color:var(--g-ink-3); margin:2px 0 14px; line-height:1.5; }
body.v4 .brain-sec-h{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--g-ink-4); margin:0 0 8px; }
body.v4 .brain-card{ border:1px solid var(--g-200); border-radius:var(--r); padding:12px 14px; margin-bottom:10px; background: var(--g-surface); }
body.v4 .brain-card-arch{ opacity:.6; background:rgba(0,0,0,.02); }
body.v4 .brain-card-top{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
body.v4 .brain-when{ font-size:11px; color:var(--g-ink-4); font-variant-numeric:tabular-nums; }
body.v4 .brain-cat{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:2px 8px; border-radius:var(--r-pill); background:rgba(94,92,230,.14); color:var(--indigo-2); }
body.v4 .brain-cat-sponsorship{ background:rgba(3,96,119,.14); color:#036077; }
body.v4 .brain-cat-production{ background:rgba(255,159,10,.14); color:#8a4b00; }
body.v4 .brain-cat-pipeline{ background:rgba(0,113,227,.12); color:#0c447c; }
body.v4 .brain-learning{ font-size:13.5px; color:var(--g-ink-1); line-height:1.5; }
body.v4 .brain-evidence{ font-size:12px; color:var(--g-ink-3); margin-top:5px; font-style:italic; }
body.v4 .brain-card-foot{ display:flex; justify-content:flex-end; margin-top:10px; }

/* Wave 192.1 - dashboard drag-reorder handle + grouped picker. */
body.v4 .dash-panel[draggable="true"]{ cursor:default; }
body.v4 .dash-drag{ display:inline-block; color:var(--g-ink-4); margin-right:6px; cursor:grab; font-size:11px; letter-spacing:-1px; }
body.v4 .dash-panel.dash-dragging{ opacity:.5; }
body.v4 .dash-pick-sec{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--g-ink-4); margin:0 0 8px; }

/* Wave 192 - sponsor-session styling on the dashboard Day + Month agenda. */
body.v4 .b-event.sponsor { text-decoration: none; }
body.v4 .b-event.sponsor .b-event-time { color: #036077; }
body.v4 .b-event.sponsor .b-event-tag { background: rgba(0,132,158,.14); color: #036077; }

/* Wave 192 (D4) - work-block popup: glass surface + on-screen delete confirm. */
body.v4 .wbp-modal {
  background: rgba(255,255,255,.72) !important;
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--g-border, rgba(0,0,0,.08));
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 24px 56px rgba(0,0,0,.22) !important;
}
body.v4 .wbp-confirm {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(0,0,0,.08);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
body.v4 .wbp-confirm-q { font-size: 13px; color: var(--g-ink-2); font-weight: 500; }
body.v4 .wbp-confirm-acts { display: flex; gap: 8px; }

/* Wave 192 (G1) - guests sort dropdown + panel/list toggle + list view. */
body.v4 .guests-toolbar-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
body.v4 .guests-sort {
  font-family: inherit; font-size: 13px; padding: 7px 10px;
  border: 1px solid var(--g-200); border-radius: 9px; background: var(--g-surface); color: var(--g-ink-1); cursor: pointer;
}
body.v4 .guests-view-toggle { display: inline-flex; border: 1px solid var(--g-200); border-radius: 9px; overflow: hidden; }
body.v4 .guests-view-btn { background: var(--g-surface); border: 0; padding: 6px 11px; font-size: 15px; line-height: 1; color: var(--g-ink-3); cursor: pointer; }
body.v4 .guests-view-btn + .guests-view-btn { border-left: 1px solid var(--g-200); }
body.v4 .guests-view-btn.on { background: rgba(0,113,227,.10); color: var(--g-blue); }
body.v4 .guest-list { display: flex; flex-direction: column; gap: 6px; }
body.v4 .guest-row {
  display: grid; grid-template-columns: 36px 1.4fr 1.6fr auto auto; gap: 14px; align-items: center;
  background: var(--g-surface); border: 1px solid var(--g-200); border-radius: 10px; padding: 9px 14px; cursor: pointer;
}
body.v4 .guest-row:hover { border-color: var(--g-blue); }
body.v4 .guest-avatar.sm { width: 36px; height: 36px; font-size: 12px; }
body.v4 .guest-row-id .guest-name { font-weight: 600; font-size: 14px; }
body.v4 .guest-row-id .guest-company { font-size: 12px; color: var(--g-ink-3); }
body.v4 .guest-row-tags { display: flex; gap: 5px; flex-wrap: wrap; }
body.v4 .guest-row-stat { font-size: 12.5px; color: var(--g-ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 760px) { body.v4 .guest-row { grid-template-columns: 36px 1fr auto; } body.v4 .guest-row-tags, body.v4 .guest-row-stat:last-child { display: none; } }

/* Wave 192 (IN1) - intel target detail popup blocks. */
body.v4 .intel-detail-block { display: flex; flex-direction: column; gap: 3px; }
body.v4 .intel-detail-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--g-ink-4); }
body.v4 .intel-detail-val { font-size: 13.5px; color: var(--g-ink-1); line-height: 1.55; white-space: pre-wrap; }

/* Wave 192 (G1) - guests sort dropdown + panel/list toggle + list view. */
body.v4 .guest-toolbar-controls { display: flex; align-items: center; gap: 10px; }
body.v4 .guest-sort { font-family: inherit; font-size: 13px; padding: 7px 10px; border: 1px solid var(--g-200); border-radius: 9px; background: var(--g-surface); color: var(--g-ink-1); cursor: pointer; }
body.v4 .guest-view-toggle { display: inline-flex; border: 1px solid var(--g-200); border-radius: 9px; overflow: hidden; }
body.v4 .guest-view-btn { background: var(--g-surface); border: 0; padding: 6px 11px; font-size: 15px; line-height: 1; color: var(--g-ink-3); cursor: pointer; }
body.v4 .guest-view-btn + .guest-view-btn { border-left: 1px solid var(--g-200); }
body.v4 .guest-view-btn.on { background: rgba(0,113,227,.10); color: var(--g-blue); }
body.v4 .guest-list { display: flex; flex-direction: column; gap: 6px; }
body.v4 .guest-list-row { display: grid; grid-template-columns: 34px 1.4fr 1.6fr auto auto; gap: 14px; align-items: center; width: 100%; text-align: left; background: var(--g-surface); border: 1px solid var(--g-200); border-radius: 10px; padding: 8px 14px; cursor: pointer; }
body.v4 .guest-list-row:hover { border-color: var(--g-blue); }
body.v4 .glr-name { font-weight: 600; font-size: 14px; color: var(--g-ink-1); }
body.v4 .glr-sub { font-size: 12px; color: var(--g-ink-3); }
body.v4 .glr-topics { display: flex; gap: 5px; flex-wrap: wrap; }
body.v4 .glr-stat { font-size: 12.5px; color: var(--g-ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { body.v4 .guest-list-row { grid-template-columns: 34px 1fr auto; } body.v4 .glr-topics, body.v4 .glr-stat:last-child { display: none; } }

/* End of v5-glass overlay */


/* ============================================================
   WAVE 193 - Episode Surface simplification
   Horizontal stepper (replaces .es-left), 2-col body, accordion
   right rail, slim/loud/muted step rows, notes badge. Spec:
   _SPEC_EPISODE_SURFACE_SIMPLIFIED.md §6.
   ============================================================ */

/* - Header notes badge (the ✎ icon shows a dot when notes exist) - */
body.v4 .es-icon-btn { position: relative; }
body.v4 .es-icon-btn.on { background: var(--g-blue); color: var(--on-accent); border-color: var(--g-blue); }
body.v4 .es-icon-badge {
  position: absolute; top: 3px; right: 3px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--g-blue); border: 1.5px solid #fff;
}
body.v4 .es-icon-btn.on .es-icon-badge { background: var(--g-surface); border-color: var(--g-blue); }

/* - Horizontal stepper - */
body.v4 .es-stepper {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  padding: 12px 28px 16px;
  background: #fbfbfb;
  border-bottom: 1px solid var(--hair, rgba(0,0,0,0.06));
}
body.v4 .es-marker {
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
  padding: 6px 8px; background: none; border: 0;
  cursor: pointer; text-align: left; font-family: inherit;
  border-radius: var(--r-sm);
}
body.v4 .es-marker:hover { background: rgba(0,0,0,0.03); }
body.v4 .es-marker-viewing { background: rgba(0,0,0,0.04); }
body.v4 .es-marker-bar {
  width: 100%; height: 3px; border-radius: 2px;
  background: rgba(0,0,0,0.08);
}
body.v4 .es-marker-done .es-marker-bar { background: var(--g-green); }
body.v4 .es-marker-current .es-marker-bar {
  background: linear-gradient(90deg,
    var(--g-green) 0, var(--g-green) var(--es-marker-pct, 50%),
    var(--g-blue) var(--es-marker-pct, 50%), var(--g-blue) 100%);
}
body.v4 .es-marker-pending .es-marker-bar { background: rgba(0,0,0,0.08); }
body.v4 .es-marker-lbl {
  font-size: 11px; font-weight: 600; color: var(--g-ink-4);
  letter-spacing: 0.01em;
}
body.v4 .es-marker-done .es-marker-lbl { color: var(--g-ink-3); }
body.v4 .es-marker-current .es-marker-lbl { color: var(--g-blue); font-weight: 700; }
body.v4 .es-marker-num { font-size: 10px; font-weight: 600; color: var(--g-ink-4); }
body.v4 .es-marker-current .es-marker-num { color: var(--g-ink-2); }

/* - 2-column body - */
body.v4 .es-body {
  display: grid;
  grid-template-columns: 1fr 320px;
}
body.v4 .es-body .es-main {
  border-right: 1px solid var(--hair, rgba(0,0,0,0.06));
  padding: 28px 32px 36px;
}
body.v4 .es-body .es-right {
  background: var(--g-50);
  padding: 18px 18px 26px;
  display: flex; flex-direction: column;
}

/* - Stage lead (replaces the old .es-prog header block) - */
body.v4 .es-stage-led { margin-bottom: 24px; }
body.v4 .es-stage-led h2 {
  font-size: 22px; font-weight: 700; color: var(--g-ink-1);
  letter-spacing: -0.018em; line-height: 1.25; margin: 0 0 6px;
}
body.v4 .es-stage-led p {
  margin: 0; font-size: 14px; color: var(--g-ink-3); line-height: 1.5;
}

/* - Accordion right rail - */
body.v4 .es-acc { border-bottom: 1px solid var(--hair, rgba(0,0,0,0.06)); }
body.v4 .es-acc:last-child { border-bottom: none; }
body.v4 .es-acc-head {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 14px 2px;
  background: none; border: 0; cursor: pointer; user-select: none;
  font-family: inherit; text-align: left;
}
body.v4 .es-acc-title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--g-ink-3);
}
body.v4 .es-acc-mini {
  font-size: 10.5px; font-weight: 500; letter-spacing: 0;
  text-transform: none; color: var(--g-ink-4);
}
body.v4 .es-acc-summary {
  margin-left: auto; font-size: 11.5px; color: var(--g-ink-4);
}
body.v4 .es-acc-chev {
  font-size: 11px; color: var(--g-ink-4);
  transition: transform .15s; flex-shrink: 0;
}
body.v4 .es-acc.es-acc-open .es-acc-chev { transform: rotate(180deg); color: var(--g-ink-2); }
body.v4 .es-acc-body { display: none; padding: 2px 2px 18px; }
body.v4 .es-acc.es-acc-open .es-acc-body { display: block; }
body.v4 .es-acc-sub {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--g-ink-4);
  margin-bottom: 8px;
}
body.v4 .es-notes-hint { font-size: 10.5px; color: var(--g-ink-4); margin-top: 4px; }

/* - Responsive: collapse the stepper labels on narrow widths - */
@media (max-width: 880px) {
  body.v4 .es-body { grid-template-columns: 1fr; }
  body.v4 .es-body .es-main { border-right: none; }
  body.v4 .es-marker-lbl, body.v4 .es-marker-num { display: none; }
  body.v4 .es-stepper { gap: 4px; }
}

/* Wave 193 - "DO NOW" pill on the current step (replaces the 5 type pills). */
body.v4 .es-step-now {
  background: var(--g-blue); color: var(--on-accent);
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
  padding: 3px 8px; border-radius: 5px;
}

/* ============================================================
   WAVE 195 - Velocity Engine (Phase 1)
   Chrome lifted from _DESIGN_VELOCITY_ENGINE.html: dark scorecard
   strip, four tabs, item rows grouped by urgency. Per-type colours
   match the design tokens.
   ============================================================ */
body.v4 .vel-wrap { max-width: 1180px; margin: 0 auto; }

/* Scorecard strip - dark hero gradient + gold accent */
body.v4 .vel-scorecard {
  background: linear-gradient(135deg, #0f1626, #1d1d1f 50%, #2a1a3e);
  color: var(--on-accent); border-radius: 18px 18px 0 0;
  padding: 18px 28px;
  display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center;
}
body.v4 .vel-sc-brand {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700; color: #d4a017;
  letter-spacing: 0.12em; text-transform: uppercase;
}
body.v4 .vel-chev { font-size: 14px; line-height: 1; }
body.v4 .vel-sc-stats { display: flex; gap: 28px; }
body.v4 .vel-sc-stat { display: flex; flex-direction: column; }
body.v4 .vel-sc-num { font-weight: 700; font-size: 18px; letter-spacing: -0.02em; line-height: 1; }
body.v4 .vel-sc-lbl { font-size: 10.5px; color: rgba(255,255,255,0.60); margin-top: 3px; letter-spacing: 0.03em; }
body.v4 .vel-sc-week { font-size: 11px; color: rgba(255,255,255,0.55); text-align: right; }

/* Tabs */
body.v4 .vel-tabs {
  background: var(--g-50); border: 1px solid var(--hair, rgba(0,0,0,0.06)); border-top: none;
  padding: 0 28px; display: flex; font-size: 13px;
}
body.v4 .vel-tab {
  padding: 14px 18px; color: var(--g-ink-3); font-weight: 600;
  cursor: pointer; background: none; border: none; border-bottom: 2px solid transparent;
  font-family: inherit;
}
body.v4 .vel-tab.on { color: var(--g-ink-1); border-bottom-color: var(--g-ink-1); }
body.v4 .vel-tab-badge:not(:empty) {
  background: var(--g-cherry); color: var(--on-accent);
  font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: 4px; margin-left: 6px;
}

/* Body */
body.v4 .vel-body {
  background: var(--g-surface); border: 1px solid var(--hair, rgba(0,0,0,0.06)); border-top: none;
  border-radius: 0 0 18px 18px; padding: 22px 28px; min-height: 240px;
}
body.v4 .vel-group { margin-bottom: 22px; }
body.v4 .vel-group:last-child { margin-bottom: 0; }
body.v4 .vel-group-head {
  display: flex; align-items: center; gap: 10px;
  font-size: 10.5px; font-weight: 700; color: var(--g-ink-3);
  letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 10px;
}
body.v4 .vel-group-head::after { content: ''; flex: 1; height: 1px; background: var(--hair, rgba(0,0,0,0.06)); }

/* Item row - left border + CTA tint driven by currentColor per type */
body.v4 .vel-item {
  background: var(--g-surface); border: 1px solid var(--hair, rgba(0,0,0,0.06));
  border-left: 3px solid currentColor; border-radius: 10px;
  padding: 14px 16px; margin-bottom: 8px;
  display: grid; grid-template-columns: 84px 1fr 120px 84px; gap: 14px; align-items: center;
  font-size: 13px;
}
body.v4 .vel-proj  { color: var(--brain-accent); }
body.v4 .vel-task  { color: var(--g-blue); }
body.v4 .vel-appr  { color: #ff9500; }
body.v4 .vel-quest { color: #ff375f; }
body.v4 .vel-alert { color: #ff3b30; }
body.v4 .vel-activ { color: var(--green-ios); }
body.v4 .vel-brief { color: var(--cherry); }
body.v4 .vel-item-resolved { opacity: 0.55; }
body.v4 .vel-it-type {
  font-size: 9.5px; font-weight: 700; color: currentColor;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: rgba(0,0,0,0.03); padding: 3px 8px; border-radius: 5px; text-align: center;
}
body.v4 .vel-it-body .vel-it-title { font-weight: 600; color: var(--g-ink-1); margin-bottom: 2px; }
body.v4 .vel-it-body .vel-it-ctx { font-size: 11.5px; color: var(--g-ink-3); line-height: 1.4; }
body.v4 .vel-it-src { font-size: 10.5px; color: var(--g-ink-3); text-align: right; }
body.v4 .vel-cta {
  background: currentColor; color: var(--on-accent); border: none;
  padding: 6px 12px; border-radius: 6px; font-size: 11px; font-weight: 600;
  text-align: center; cursor: pointer; text-decoration: none; display: inline-block;
}
body.v4 .vel-activ .vel-cta { background: transparent; color: var(--green-ios); border: 1px solid var(--green-ios); }
body.v4 .vel-cta-inert { opacity: 0.4; cursor: default; }
body.v4 .vel-more {
  display: block; margin: 6px auto 0; padding: 8px 18px;
  background: var(--g-surface); border: 1px solid var(--hair, rgba(0,0,0,0.10)); border-radius: var(--r-pill);
  font-size: 12.5px; font-weight: 600; color: var(--g-ink-2); cursor: pointer; font-family: inherit;
}

/* Empty + placeholder states */
body.v4 .vel-empty { text-align: center; padding: 48px 20px; }
body.v4 .vel-empty-t { font-size: 16px; font-weight: 700; color: var(--g-ink-1); margin-bottom: 6px; }
body.v4 .vel-empty-s { font-size: 13px; color: var(--g-ink-3); }
body.v4 .vel-placeholder { text-align: center; padding: 48px 20px; }
body.v4 .vel-ph-badge {
  display: inline-block; background: rgba(94,92,230,0.12); color: var(--brain-accent);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--r-pill); margin-bottom: 12px;
}
body.v4 .vel-ph-title { font-size: 18px; font-weight: 700; color: var(--g-ink-1); margin-bottom: 6px; }
body.v4 .vel-ph-msg { font-size: 13px; color: var(--g-ink-3); max-width: 420px; margin: 0 auto; }
@media (max-width: 720px) {
  body.v4 .vel-item { grid-template-columns: 70px 1fr auto; }
  body.v4 .vel-it-src { display: none; }
  body.v4 .vel-sc-stats { gap: 16px; flex-wrap: wrap; }
}

/* ============================================================
   WAVE 196 - Velocity Engine Phase 2
   Filter chips + the four new row affordances (approval preview,
   question default-action line, project progress bar, brief
   summary) + resolved tag. Tokens consistent with Wave 195.
   ============================================================ */
body.v4 .vel-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
body.v4 .vel-chip {
  background: var(--g-surface); border: 1px solid var(--hair, rgba(0,0,0,0.10)); border-radius: var(--r-pill);
  padding: 5px 13px; font-size: 12px; font-weight: 600; color: var(--g-ink-3);
  cursor: pointer; font-family: inherit;
}
body.v4 .vel-chip.on { background: var(--g-ink-1); color: var(--on-accent); border-color: var(--g-ink-1); }

/* Inline extra block shared spacing */
body.v4 .vel-extra { margin-top: 8px; font-size: 12px; }

/* Approval preview chip */
body.v4 .vel-appr-preview {
  color: var(--g-ink-2); background: rgba(255,149,0,0.08);
  border: 1px solid rgba(255,149,0,0.18); border-radius: var(--r-sm); padding: 8px 10px; line-height: 1.4;
}
/* Question default-action line */
body.v4 .vel-q-default { color: var(--g-ink-3); font-style: italic; }
/* Project progress bar */
body.v4 .vel-proj-prog { display: flex; align-items: center; gap: 10px; }
body.v4 .vel-proj-bar { flex: 1; height: 6px; background: rgba(0,0,0,0.08); border-radius: var(--r-pill); overflow: hidden; max-width: 260px; }
body.v4 .vel-proj-fill { height: 100%; background: var(--brain-accent); border-radius: var(--r-pill); }
body.v4 .vel-proj-count { font-size: 11px; color: var(--g-ink-3); white-space: nowrap; }
/* Brief summary */
body.v4 .vel-brief-sum { color: var(--g-ink-2); line-height: 1.45; }
/* Resolved tag (in All Activity) */
body.v4 .vel-resolved-tag { font-size: 10.5px; font-weight: 700; color: var(--g-ink-4); text-transform: uppercase; letter-spacing: 0.06em; }

/* ============================================================
   WAVE 197 - Dashboard panels v2 (Phase 1: foundation + customise UI)
   Ported from _DESIGN_DASHBOARD_PANELS_v2_styles.css + Docs 1/6.
   Tokens reuse the v2 palette; dark skin is the verbatim hero gradient
   from spec §6.2 / v5-glass hero. Scoped body.v4. Self-contained vars
   so it doesn't depend on the design file's :root.
   ============================================================ */
body.v4 .dv2-rows {
  --dv2-cherry:#b8002b; --dv2-ink:#1d1d1f; --dv2-ink3:#6e6e73; --dv2-ink4:#a1a1a6;
  --dv2-line:#e7e7e4; --dv2-card:#fff; --dv2-bg:#f4f3ee; --dv2-blue:#0071e3; --dv2-hero:#7cb6ff;
  display:flex; flex-direction:column; gap:18px;
}

/* Row + slots */
body.v4 .dv2-row { position:relative; }
body.v4 .dv2-slots { display:grid; gap:16px; }
body.v4 .dv2-wide   { grid-template-columns:1fr; }
body.v4 .dv2-split2 { grid-template-columns:1fr 1fr; }
body.v4 .dv2-split4 { grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ body.v4 .dv2-split2, body.v4 .dv2-split4 { grid-template-columns:1fr; } }

/* Panel chrome (mirrors design .p) */
body.v4 .dv2-row .p {
  background: var(--g-surface); border:1px solid #e7e7e4; border-radius:var(--r-lg);
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.06);
  overflow:hidden; transition:transform .2s, box-shadow .2s; min-height:120px;
}
body.v4 .dv2-row .p:hover { /* H2 - panels intentionally have no rollover lift */ }
body.v4 .dv2-row .p-head { display:flex; align-items:center; gap:10px; padding:14px 18px 12px; }
body.v4 .dv2-row .p-drag { font-size:12px; color:var(--g-400); cursor:grab; user-select:none; }
body.v4 .dv2-row .p-title { flex:1; font-size:13.5px; font-weight:600; color:#1d1d1f; letter-spacing:-.005em; }
body.v4 .dv2-row .p-acts { display:flex; gap:4px; color:var(--g-400); font-size:14px; align-items:center; }
body.v4 .dv2-row .p-act { width:24px; height:24px; display:flex; align-items:center; justify-content:center; border-radius:6px; cursor:pointer; transition:background .12s; }
body.v4 .dv2-row .p-act:hover { background:rgba(0,0,0,.05); color:#3a3a3c; }
body.v4 .dv2-row .p-body { padding:6px 18px 16px; }

/* Dark skin - verbatim from spec §6.2 */
body.v4 .dv2-row .p--dark {
  /* Apple-grade dark: panels are a NEUTRAL elevated grey (not a gradient).
     Gradient is reserved for the brain hero (see [data-panel-key="brain"]). */
  background:var(--apl-paper);
  border:1px solid var(--apl-rule);
  box-shadow:0 1px 2px rgba(0,0,0,0.04), 0 22px 60px rgba(0,0,0,0.18);
  color:var(--on-accent); position:relative; overflow:hidden;
}
body.v4 .dv2-row .p--dark::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:none;   /* glow removed for neutral panels; brain keeps it below */
}
body.v4 .dv2-row .p--dark > * { position:relative; z-index:1; }
body.v4 .dv2-row .p--dark .p-title { color:var(--on-accent); }
body.v4 .dv2-row .p--dark .p-drag, body.v4 .dv2-row .p--dark .p-acts { color:rgba(255,255,255,0.55); }
body.v4 .dv2-row .p--dark .p-act:hover { background:rgba(255,255,255,0.10); color:var(--on-accent); }
body.v4 .dv2-row .p--dark .dash-panel-empty { color:rgba(255,255,255,0.6); }

/* Row toolbar */
body.v4 .row-tools {
  position:absolute; top:-14px; right:8px; z-index:5;
  display:flex; align-items:center; gap:6px;
  background: var(--g-surface); border:1px solid #e7e7e4; border-radius:var(--r-pill);
  padding:4px 8px; box-shadow:0 6px 20px rgba(0,0,0,.10);
  opacity:0; transform:translateY(4px); transition:opacity .14s, transform .14s; pointer-events:none;
}
body.v4 .dv2-row:hover .row-tools, body.v4 .dv2-row:focus-within .row-tools { opacity:1; transform:none; pointer-events:auto; }
body.v4 .rt-grp { display:inline-flex; background:#f4f3ee; border-radius:var(--r-pill); padding:2px; }
body.v4 .rt-size { border:none; background:none; font-size:11px; font-weight:600; color:var(--g-ink-3); padding:4px 9px; border-radius:var(--r-pill); cursor:pointer; font-family:inherit; }
body.v4 .rt-size.on { background: var(--g-surface); color:#1d1d1f; box-shadow:0 1px 2px rgba(0,0,0,.08); }
body.v4 .rt-div { width:1px; height:18px; background:#e7e7e4; }
body.v4 .rt-icon { width:24px; height:24px; border:none; background:none; border-radius:50%; cursor:pointer; color:var(--g-ink-3); font-size:14px; }
body.v4 .rt-icon:hover { background:rgba(0,0,0,.06); color:#1d1d1f; }
body.v4 .rt-icon.danger:hover { background:rgba(184,0,43,.10); color:var(--cherry); }

/* Empty slot + add row */
body.v4 .dv2-slot-empty {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  min-height:120px; border:1.5px dashed #d9d9d4; border-radius:var(--r-lg); background:transparent;
  color:var(--g-400); font-size:12.5px; font-weight:600; cursor:pointer; font-family:inherit;
}
body.v4 .dv2-slot-empty:hover { border-color:var(--g-blue); color:var(--g-blue); background:rgba(0,113,227,.03); }
body.v4 .dv2-plus { font-size:22px; line-height:1; }
body.v4 .dv2-addrow {
  align-self:flex-start; margin-top:2px; border:1px dashed #d9d9d4; background:transparent;
  border-radius:var(--r-pill); padding:8px 16px; font-size:12.5px; font-weight:600; color:var(--g-ink-3); cursor:pointer; font-family:inherit;
}
body.v4 .dv2-addrow:hover { border-color:var(--g-blue); color:var(--g-blue); }

/* Drag */
body.v4 .dv2-dragging { opacity:.5; }
body.v4 .dv2-drop { outline:2px solid var(--cherry); outline-offset:2px; border-radius:var(--r-lg); }

/* Empty-state hero */
body.v4 .dv2-empty { text-align:center; padding:80px 24px; max-width:560px; margin:0 auto; }
body.v4 .dv2-empty-icon {
  width:56px; height:56px; border-radius:50%; margin:0 auto 20px;
  background:linear-gradient(135deg, rgba(94,92,230,.16), rgba(184,0,43,.14)); color:var(--brain-accent);
  display:flex; align-items:center; justify-content:center; font-size:24px;
}
body.v4 .dv2-empty-greet { font-size:28px; font-weight:700; letter-spacing:-.02em; margin:0 0 8px; color:#1d1d1f; }
body.v4 .dv2-empty-sub { font-size:14.5px; color:var(--g-ink-3); line-height:1.55; margin:0 0 24px; }
body.v4 .dv2-empty-cta { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
body.v4 .dv2-empty-hint { margin-top:18px; font-size:12px; color:var(--g-400); }

/* Shared buttons */
body.v4 .dv2-btn-primary { background:var(--cherry); color:var(--on-accent); border:none; border-radius:var(--r-pill); padding:10px 20px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; }
body.v4 .dv2-btn-primary:hover { background:#9c0024; }
body.v4 .dv2-btn-secondary { background: var(--g-surface); color:#1d1d1f; border:1px solid #d9d9d4; border-radius:var(--r-pill); padding:10px 20px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; }
body.v4 .dv2-btn-secondary:hover { border-color:#1d1d1f; }
body.v4 .dv2-btn-danger { background:var(--cherry); color:var(--on-accent); border:none; border-radius:var(--r-pill); padding:10px 20px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; }
body.v4 .dv2-confirm-acts { display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }

/* Undo toast */
body.v4 .dv2-undo {
  position:fixed; bottom:24px; right:24px; z-index:1200;
  background:#1d1d1f; color:var(--on-accent); border-radius:var(--r); padding:12px 16px;
  display:flex; align-items:center; gap:14px; font-size:13px; box-shadow:0 14px 40px rgba(0,0,0,.3);
}
body.v4 .dv2-undo button { background:none; border:none; color:var(--hero-blue); font-weight:700; cursor:pointer; font-family:inherit; font-size:13px; }

/* Picker modal */
body.v4 .pk-modal { width:880px; max-width:94vw; }
body.v4 .aiceo-modal-eye { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--cherry); margin-bottom:4px; }
body.v4 .pk-search { padding:0 18px 14px; }
body.v4 .pk-search input { width:100%; box-sizing:border-box; padding:10px 14px; border:1px solid #d9d9d4; border-radius:10px; font-size:13.5px; font-family:inherit; }
body.v4 .pk-search input:focus { outline:none; border-color:var(--g-blue); box-shadow:0 0 0 3px rgba(0,113,227,.13); }
body.v4 .pk-grid { display:grid; grid-template-columns:200px 1fr; gap:0; max-height:60vh; }
body.v4 .pk-rail { border-right:1px solid #e7e7e4; padding:8px; display:flex; flex-direction:column; gap:4px; overflow-y:auto; }
body.v4 .pk-chip { display:flex; align-items:center; justify-content:space-between; border:none; background:none; padding:8px 12px; border-radius:var(--r-sm); font-size:13px; font-weight:600; color:var(--g-ink-3); cursor:pointer; font-family:inherit; text-align:left; }
body.v4 .pk-chip.on { background:rgba(0,113,227,.10); color:var(--g-blue); }
body.v4 .pk-chip-n { font-size:11px; color:var(--g-400); }
body.v4 .pk-chip.on .pk-chip-n { color:var(--g-blue); }
body.v4 .pk-main { padding:14px 18px; overflow-y:auto; }
body.v4 .pk-sech { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--g-ink-3); margin:14px 0 8px; }
body.v4 .pk-sech:first-child { margin-top:0; }
body.v4 .panel-cards { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
body.v4 .pcard { text-align:left; border:1px solid #e7e7e4; border-radius:var(--r); padding:12px 14px; background: var(--g-surface); cursor:pointer; font-family:inherit; }
body.v4 .pcard:hover { border-color:var(--g-blue); box-shadow:0 4px 12px rgba(0,0,0,.05); }
body.v4 .pcard.on { opacity:.5; cursor:default; }
body.v4 .pcard-name { font-size:13.5px; font-weight:600; color:#1d1d1f; }
body.v4 .pcard-new { font-size:9px; font-weight:700; color:var(--on-mint); background:#e1f5ee; padding:1px 6px; border-radius:4px; letter-spacing:.04em; }
body.v4 .pcard-desc { font-size:11.5px; color:var(--g-ink-3); margin-top:3px; line-height:1.4; }
body.v4 .pcard-meta { font-size:10.5px; color:var(--g-400); margin-top:6px; }

/* Settings popover */
body.v4 .dv2-pop { position:fixed; z-index:1300; width:320px; background: var(--g-surface); border:1px solid #e7e7e4; border-radius:14px; box-shadow:0 18px 50px rgba(0,0,0,.22); padding:14px; }
body.v4 .dv2-pop-sec { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--g-ink-3); margin-bottom:10px; }
body.v4 .dv2-skins { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
body.v4 .skin-opt { border:1px solid #e7e7e4; border-radius:10px; padding:8px; background: var(--g-surface); cursor:pointer; font-family:inherit; display:flex; flex-direction:column; align-items:center; gap:6px; }
body.v4 .skin-opt.on { border-color:var(--g-blue); background:rgba(0,113,227,.06); }
body.v4 .skin-prev { width:100%; height:34px; border-radius:6px; border:1px solid rgba(0,0,0,.06); }
body.v4 .skin-prev-light { background:linear-gradient(135deg, #fff 0%, #f4f3ee 100%); }
body.v4 .skin-prev-dark { background:linear-gradient(180deg, #1d1d1f 0%, var(--ink-deep) 100%); }
body.v4 .skin-prev-auto { background:linear-gradient(135deg, #fff 0%, #fff 49%, #1d1d1f 51%, var(--ink-deep) 100%); }
body.v4 .skin-lbl { font-size:11.5px; font-weight:600; color:#3a3a3c; }
body.v4 .skin-opt.on .skin-lbl { color:var(--g-blue); }
body.v4 .dv2-pop-foot { display:flex; justify-content:space-between; align-items:center; margin-top:14px; }
body.v4 .dv2-pop-reset { background:none; border:none; color:var(--g-ink-3); font-size:12.5px; font-weight:600; cursor:pointer; font-family:inherit; }
body.v4 .dv2-pop-save { padding:7px 16px; font-size:12.5px; }
/* p--light is the default panel skin (same as base .p); explicit for parity. */
body.v4 .dv2-row .p--light { background: var(--g-surface); }
body.v4 .pcard-top { display:flex; align-items:center; justify-content:space-between; }

/* ============================================================
   WAVE 198 - Velocity Engine Apple-Glass restyle
   _SPEC_VELOCITY_ENGINE_DESIGN_FIX.md. CSS-ONLY - overrides the
   Wave 195/196 .vel-* rules to the Apple Glass language (frosted
   layers, soft depth, cream canvas). No JS/class change; every
   class velocity.js emits is still targeted. Values lifted from
   _DESIGN_VELOCITY_ENGINE_APPLE_GLASS.html.
   ============================================================ */
body.v4 .vel-wrap {
  --vg-blur: saturate(180%) blur(20px);
  --vg-sh-sm: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.05);
  --vg-sh: 0 1px 2px rgba(0,0,0,.04), 0 12px 32px rgba(0,0,0,.08);
  --vg-sh-lg: 0 2px 4px rgba(0,0,0,.04), 0 24px 60px rgba(0,0,0,.12);
}

/* Scorecard - frosted dark glass card (full radius, radial glows) */
body.v4 .vel-scorecard {
  border-radius: 24px;
  margin-bottom: 22px;
  background: linear-gradient(135deg, rgba(29,29,31,.94), rgba(22,22,24,.97));
  box-shadow: var(--vg-sh-lg);
  position: relative; overflow: hidden;
}
body.v4 .vel-scorecard::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 50% 70% at 8% -10%, rgba(94,92,230,.34), transparent),
    radial-gradient(ellipse 46% 64% at 96% 120%, rgba(0,113,227,.26), transparent);
}
body.v4 .vel-scorecard > * { position: relative; z-index: 1; }
body.v4 .vel-sc-num { font-size: 30px; }

/* Tabs - frosted pill row, floating (not joined to scorecard/body) */
body.v4 .vel-tabs {
  display: inline-flex; gap: 4px; width: fit-content;
  margin-bottom: 24px; padding: 5px;
  background: rgba(255,255,255,.6); -webkit-backdrop-filter: var(--vg-blur); backdrop-filter: var(--vg-blur);
  border: 1px solid var(--hair, #e7e7e4); border-radius: var(--r-pill); box-shadow: var(--vg-sh-sm);
}
body.v4 .vel-tab {
  padding: 8px 18px; border-radius: var(--r-pill); font-size: 13px; font-weight: 500;
  color: var(--g-ink-3); border: none; background: transparent; transition: all .15s;
}
body.v4 .vel-tab.on { background: var(--g-ink-1); color: var(--on-accent); border-bottom-color: transparent; box-shadow: var(--vg-sh-sm); }

/* Body - items sit as individual frosted cards on the cream canvas */
body.v4 .vel-body { background: transparent; border: none; border-radius: 0; padding: 0; min-height: 0; }

/* Item - frosted glass card, coloured left accent kept (currentColor) */
body.v4 .vel-item {
  border-radius: 18px; padding: 16px 18px; margin-bottom: 10px;
  background: rgba(255,255,255,.72); -webkit-backdrop-filter: var(--vg-blur); backdrop-filter: var(--vg-blur);
  border: 1px solid rgba(255,255,255,.5); border-left: 3px solid currentColor;
  box-shadow: var(--vg-sh);
  transition: transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .16s;
}
body.v4 .vel-item:hover { transform: translateY(-2px); box-shadow: var(--vg-sh-lg); }
body.v4 .vel-it-type {
  background: color-mix(in srgb, currentColor 14%, #fff);
  color: currentColor; border-radius: var(--r-sm);
}
body.v4 .vel-it-title { font-size: 14px; letter-spacing: -.01em; }
body.v4 .vel-cta {
  border-radius: 10px; padding: 8px 16px; font-size: 12.5px;
  border: 1px solid var(--hair, #e7e7e4); background: rgba(255,255,255,.7); color: var(--g-ink-1);
}
body.v4 .vel-activ .vel-cta { background: rgba(255,255,255,.7); }

/* Group header rule already present; tighten spacing to match design */
body.v4 .vel-group-head { margin: 26px 2px 12px; }

/* Placeholder / empty - softer, more air */
body.v4 .vel-placeholder, body.v4 .vel-empty { padding: 60px 20px; }

/* ============================================================
   WAVE 199 - Dashboard panels v2 Phase 2: panel BODY + six-state
   + size grammar. Ported VERBATIM from _DESIGN_DASHBOARD_PANELS_
   v2_styles.css (lines 61-250), scoped under body.v4 .dv2-row so
   it only touches the v2 dashboard. Wave 197 chrome (.p/.p-head/
   .p-body/.p--dark/.p--light) is untouched - this ADDS the body
   content components + the 6 states + per-size density that the
   panel renderers (2B-2D) will emit. Fixed-width .p[data-size]
   rules from the mockup are intentionally OMITTED - width comes
   from the .dv2-wide/split2/split4 grid, not fixed px.
   ============================================================ */

/* ── Token aliases (scoped) ──────────────────────────────────
   The body rules below were ported VERBATIM from the design
   stylesheet, which defines its own :root tokens (lines 6-24).
   Production (styles.css + v4.css) doesn't define many of them and
   INVERTS the pastel convention (design --c-mint = pastel tint;
   production --c-mint = saturated). So re-declare the design token
   names here, scoped to .dv2-row ONLY, with the design :root values
   verbatim - panels match the mockups, no global token changes. */
body.v4 .dv2-row{
  --cherry:#b8002b; --cherry-bg:rgba(184,0,43,.08);
  --ink:#1d1d1f; --ink2:#3a3a3c; --ink3:#6e6e73; --ink4:#a1a1a6;
  --line:#e7e7e4; --line2:#d9d9d4; --bg:#f4f3ee; --card:#ffffff;
  --blue:#0071e3; --blue-bg:rgba(0,113,227,.10);
  --lilac:#5e5ce6; --lilac-bg:rgba(94,92,230,.10);
  --mint:#1d9e75; --mint-bg:rgba(29,158,117,.10);
  --amber:#c47100; --amber-bg:rgba(196,113,0,.12);
  --teal:#036077; --teal-bg:rgba(3,96,119,.14);
  --c-lilac:#ece9fe; --c-mint:#e1f5ee; --c-peach:#faece7;
  --c-butter:#fbf2da; --c-sky:#e6f1fb; --c-rose:#fbeaf0; --c-sage:#eef3e2;
  --on-sky:#0c447c; --on-lilac:#3c3489; --on-ineditsky:#007e9a;
  --on-amber:#8a4b00; --on-mint:#0f6e56;
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px;
  --fd:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --hero-blue:#7cb6ff;
}
/* ── p-head title sub + status pip ── */
body.v4 .dv2-row .p-title .p-sub{font-weight:500; color:var(--ink3); font-size:12px; margin-left:6px; letter-spacing:0}
body.v4 .dv2-row .p--dark .p-title .p-sub{color:rgba(255,255,255,0.55)}
body.v4 .dv2-row .p-pip{font-size:10px; font-weight:700; padding:2px 7px; border-radius:5px; letter-spacing:.04em; text-transform:uppercase}
body.v4 .dv2-row .pip-fresh{background:var(--c-mint); color:var(--on-mint)}
body.v4 .dv2-row .pip-stale{background:rgba(255,159,10,.16); color:var(--on-amber)}
body.v4 .dv2-row .pip-live{background:var(--cherry-bg); color:var(--cherry)}

/* ── Panel footer ── */
body.v4 .dv2-row .p-foot{padding:11px 18px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; font-size:12px; background:var(--surface-2)}
body.v4.dark .dv2-row .p-foot{ background:rgba(255,255,255,.04); border-top-color:rgba(255,255,255,.08) }
body.v4 .dv2-row .p-foot a, body.v4 .dv2-row .pf-link{color:var(--cherry); font-weight:600; text-decoration:none; font-size:12px}
body.v4 .dv2-row .p-foot a:hover, body.v4 .dv2-row .pf-link:hover{text-decoration:underline}
body.v4 .dv2-row .pf-stat{color:var(--ink4); font-size:11.5px}
body.v4 .dv2-row .p-foot-act{display:flex; gap:8px; align-items:center}
body.v4 .dv2-row .p-mini{font-size:11px; color:var(--ink4); display:flex; align-items:center; gap:5px}
body.v4 .dv2-row .p-mini .dot{width:5px; height:5px; border-radius:50%; background:var(--ink4)}
body.v4 .dv2-row .p--dark .p-foot{background:rgba(255,255,255,0.04); border-top-color:rgba(255,255,255,0.08)}
body.v4 .dv2-row .p--dark .p-foot a, body.v4 .dv2-row .p--dark .pf-link{color:var(--hero-blue)}
body.v4 .dv2-row .p--dark .pf-stat{color:rgba(255,255,255,.55)}

/* ── SIX STATES ── */
/* loading - skeleton shimmer */
body.v4 .dv2-row .p--loading .p-body{position:relative; min-height:90px}
body.v4 .dv2-row .p--loading .skel{height:12px; border-radius:6px; background:linear-gradient(90deg, rgba(0,0,0,.06) 25%, rgba(0,0,0,.10) 37%, rgba(0,0,0,.06) 63%); background-size:400% 100%; animation:dv2-shimmer 1.4s ease infinite; margin-bottom:10px}
body.v4 .dv2-row .p--loading .skel:nth-child(1){width:70%}
body.v4 .dv2-row .p--loading .skel:nth-child(2){width:90%}
body.v4 .dv2-row .p--loading .skel:nth-child(3){width:55%}
body.v4 .dv2-row .p--loading .skel:last-child{margin-bottom:0}
@keyframes dv2-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
body.v4 .dv2-row .p--dark .skel{background:linear-gradient(90deg, rgba(255,255,255,.06) 25%, rgba(255,255,255,.12) 37%, rgba(255,255,255,.06) 63%); background-size:400% 100%}
/* empty + error - centred template */
body.v4 .dv2-row .p--empty .p-body, body.v4 .dv2-row .p--error .p-body{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-height:120px; gap:8px}
body.v4 .dv2-row .p-empty-ic{width:36px; height:36px; border-radius:10px; background:var(--c-mint); color:var(--on-mint); display:flex; align-items:center; justify-content:center; font-size:16px}
body.v4 .dv2-row .p-empty-txt{font-size:12.5px; color:var(--ink3); line-height:1.5; max-width:200px}
body.v4 .dv2-row .p-empty-sub{font-size:11.5px; color:var(--ink4)}
body.v4 .dv2-row .p-err-ic{width:36px; height:36px; border-radius:10px; background:var(--cherry-bg); color:var(--cherry); display:flex; align-items:center; justify-content:center; font-size:16px}
body.v4 .dv2-row .p-err-btn{margin-top:4px; background:rgba(0,0,0,.05); border:none; border-radius:var(--r-pill); padding:6px 14px; font-size:11.5px; font-weight:600; color:var(--ink2); cursor:pointer; font-family:var(--fd)}
body.v4 .dv2-row .p--dark .p-err-btn{background:rgba(255,255,255,.1); color:var(--on-accent)}
body.v4 .dv2-row .p--dark .p-empty-txt{color:rgba(255,255,255,.7)}
body.v4 .dv2-row .p--dark .p-empty-sub{color:rgba(255,255,255,.5)}
body.v4 .dv2-row .p--dark .p-err-ic{background:rgba(255,138,138,.16); color:var(--red-soft)}
/* minimal - hide footer, tighten head */
body.v4 .dv2-row .p--minimal .p-foot{display:none}
body.v4 .dv2-row .p--minimal .p-head{padding-bottom:8px}
/* busy - dim body, lock actions */
body.v4 .dv2-row .p--busy .p-body{opacity:.5; pointer-events:none}
body.v4 .dv2-row .p--busy .p-head .p-act{pointer-events:none; opacity:.4}

/* ── Body content components ── */
body.v4 .dv2-row .p-side-divider{height:1px; background:var(--line); margin:12px 0}
body.v4 .dv2-row .p-count-big{font-size:13px; font-weight:700; color:var(--ink); background:rgba(0,0,0,.05); border-radius:var(--r-pill); padding:1px 9px; font-variant-numeric:tabular-nums}
body.v4 .dv2-row .p--dark .p-count-big{background:rgba(255,255,255,.12); color:var(--on-accent)}
body.v4 .dv2-row .p-section-eye{font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink4); margin:12px 0 6px}

/* task rows */
body.v4 .dv2-row .row-task{display:grid; grid-template-columns:20px 1fr auto; gap:12px; align-items:center; padding:10px 8px; margin:0 -8px; border-radius:var(--r-sm); cursor:pointer; transition:background .12s; border-bottom:1px solid var(--line)}
body.v4 .dv2-row .row-task:last-child{border-bottom:none}
body.v4 .dv2-row .row-task:hover{background:rgba(0,113,227,.04)}
body.v4 .dv2-row .row-task .rt-tick{width:18px; height:18px; border-radius:50%; border:1.5px solid var(--line2); background:transparent}
body.v4 .dv2-row .row-task .rt-body{min-width:0}
body.v4 .dv2-row .row-task .rt-title{font-size:13.5px; font-weight:600; color:var(--ink); margin-bottom:2px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
body.v4 .dv2-row .row-task .rt-meta{display:flex; gap:6px; align-items:center; flex-wrap:wrap; font-size:11px; color:var(--ink3)}
body.v4 .dv2-row .row-task .rt-meta .dot{width:2px; height:2px; border-radius:50%; background:var(--ink4)}
body.v4 .dv2-row .row-task .rt-right{text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:2px}
body.v4 .dv2-row .row-task .rt-when{font-size:11px; font-weight:600; color:var(--ink3)}
body.v4 .dv2-row .row-task .rt-when.due-today{color:var(--cherry)}
body.v4 .dv2-row .row-task .rt-when.due-tom{color:var(--amber)}
body.v4 .dv2-row .row-task .rt-when.due-over{color:var(--cherry); background:var(--cherry-bg); padding:2px 7px; border-radius:5px; font-size:10px; font-weight:700}
body.v4 .dv2-row .row-task .rt-stage{font-size:9.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:1px 6px; border-radius:4px}
body.v4 .dv2-row .p--dark .row-task{border-bottom-color:rgba(255,255,255,.06)}
body.v4 .dv2-row .p--dark .row-task:hover{background:rgba(255,255,255,.04)}
body.v4 .dv2-row .p--dark .row-task .rt-title{color:var(--on-accent)}
body.v4 .dv2-row .p--dark .row-task .rt-meta{color:rgba(255,255,255,.65)}
body.v4 .dv2-row .p--dark .row-task .rt-when{color:rgba(255,255,255,.65)}
body.v4 .dv2-row .p--dark .row-task .rt-when.due-today{color:var(--red-soft)}
body.v4 .dv2-row .p--dark .row-task .rt-when.due-over{color:var(--red-soft); background:rgba(255,138,138,.16)}
/* stage pill colours */
body.v4 .dv2-row .stage-sc{background:rgba(255,159,10,.18); color:var(--on-amber)}
body.v4 .dv2-row .stage-ie{background:rgba(90,200,250,.20); color:var(--on-ineditsky)}
body.v4 .dv2-row .stage-bk{background:var(--c-sky); color:var(--on-sky)}
body.v4 .dv2-row .stage-rc{background:var(--c-lilac); color:var(--on-lilac)}
body.v4 .dv2-row .stage-hp{background:var(--cherry-bg); color:var(--cherry)}
body.v4 .dv2-row .stage-pu{background:var(--c-mint); color:var(--on-mint)}

/* big number */
body.v4 .dv2-row .bignum{display:flex; flex-direction:column; gap:4px; padding:8px 0}
body.v4 .dv2-row .bignum .bn-num{font-size:40px; font-weight:600; letter-spacing:-.025em; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1}
body.v4 .dv2-row .bignum .bn-sub{font-size:12.5px; color:var(--ink3)}
body.v4 .dv2-row .bignum .bn-delta{font-size:12px; font-weight:600; color:var(--teal)}
body.v4 .dv2-row .bignum .bn-delta.down{color:var(--cherry)}
body.v4 .dv2-row .p--dark .bignum .bn-num{color:var(--on-accent)}
body.v4 .dv2-row .p--dark .bn-sub{color:rgba(255,255,255,.72)}
body.v4 .dv2-row .p--dark .bignum .bn-delta{color:#9beb9d}
body.v4 .dv2-row .p--dark .bignum .bn-delta.down{color:var(--red-soft)}

/* sparkline */
body.v4 .dv2-row .spark{display:flex; align-items:flex-end; gap:3px; height:48px; margin-top:8px}
body.v4 .dv2-row .spark .bar{flex:1; background:var(--c-sky); border-radius:3px 3px 0 0; min-height:4px}
body.v4 .dv2-row .spark .bar.last{background:var(--cherry)}
body.v4 .dv2-row .p--dark .spark .bar.last{box-shadow:0 0 0 1px var(--hero-blue)}

/* generic list rows */
body.v4 .dv2-row .lst{display:flex; flex-direction:column}
body.v4 .dv2-row .lst-row{display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--line)}
body.v4 .dv2-row .lst-row:last-child{border-bottom:none}
body.v4 .dv2-row .lst-ic{width:30px; height:30px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0}
body.v4 .dv2-row .lst-body{flex:1; min-width:0}
body.v4 .dv2-row .lst-title{font-size:13px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
body.v4 .dv2-row .lst-meta{font-size:11px; color:var(--ink3); margin-top:1px}
body.v4 .dv2-row .lst-right{font-size:11.5px; color:var(--ink4); flex-shrink:0}
body.v4 .dv2-row .p--dark .lst-row{border-bottom-color:rgba(255,255,255,.08)}
body.v4 .dv2-row .p--dark .lst-title{color:var(--on-accent)}
body.v4 .dv2-row .p--dark .lst-meta{color:rgba(255,255,255,.6)}

/* count pills */
body.v4 .dv2-row .cntrow{display:flex; flex-wrap:wrap; gap:6px; padding:6px 0}
body.v4 .dv2-row .cnt-pill{display:flex; align-items:center; gap:6px; background:rgba(0,0,0,.04); border-radius:var(--r-pill); padding:5px 11px; font-size:12px; color:var(--ink2)}
body.v4 .dv2-row .cnt-pill .cp-n{font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums}
body.v4 .dv2-row .cnt-pill .cp-dot{width:7px; height:7px; border-radius:50%}
body.v4 .dv2-row .p--dark .cnt-pill{background:rgba(255,255,255,.08); color:rgba(255,255,255,.8)}
body.v4 .dv2-row .p--dark .cnt-pill .cp-n{color:var(--on-accent)}

/* wide-only side rail + grid */
body.v4 .dv2-row .wide-grid{display:grid; grid-template-columns:1fr 240px; gap:18px; align-items:start}
body.v4 .dv2-row .wide-side{background:var(--c-sky); border-radius:var(--r); padding:14px 16px}
body.v4 .dv2-row .ws-eye{font-size:11px; font-weight:500; color:var(--on-sky); margin-bottom:6px; letter-spacing:-.005em}
body.v4 .dv2-row .ws-num{font-size:30px; font-weight:600; letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1; margin-bottom:4px}
body.v4 .dv2-row .ws-sub{font-size:12px; color:var(--ink2); line-height:1.5}
body.v4 .dv2-row .ws-bar{margin-top:10px; height:6px; background:rgba(0,0,0,.06); border-radius:var(--r-pill); overflow:hidden}
body.v4 .dv2-row .ws-bar i{display:block; height:100%; background:var(--cherry); border-radius:var(--r-pill)}
body.v4 .dv2-row .p--dark .wide-side{background:rgba(255,255,255,.06)}
body.v4 .dv2-row .p--dark .ws-eye{color:var(--hero-blue); font-weight:500; letter-spacing:-.005em; font-size:12.5px}
body.v4 .dv2-row .p--dark .ws-num{color:var(--on-accent)}
body.v4 .dv2-row .p--dark .ws-sub{color:rgba(255,255,255,.72)}
body.v4 .dv2-row .p--dark .ws-bar{background:rgba(255,255,255,.10)}
body.v4 .dv2-row .p--dark .ws-bar i{background:var(--cherry)}

/* per-size density (width comes from the grid, not these) */
body.v4 .dv2-row .p[data-size="q"] .p-head{padding:13px 16px 10px}
body.v4 .dv2-row .p[data-size="q"] .p-body{padding:4px 16px 12px}
body.v4 .dv2-row .p[data-size="q"] .p-foot{padding:9px 16px; font-size:11px}
body.v4 .dv2-row .p[data-size="q"] .row-task{padding:8px 6px; margin:0 -6px; grid-template-columns:18px 1fr auto; gap:10px}
body.v4 .dv2-row .p[data-size="q"] .row-task .rt-title{font-size:12.5px}
body.v4 .dv2-row .p[data-size="q"] .row-task .rt-meta{font-size:10px}
body.v4 .dv2-row .p[data-size="q"] .row-task .rt-when{font-size:10px}
body.v4 .dv2-row .p[data-size="q"] .bignum .bn-num{font-size:32px}
body.v4 .dv2-row .p[data-size="q"] .wide-grid{display:block}
body.v4 .dv2-row .p[data-size="h"] .wide-grid{display:block}
body.v4 .dv2-row .size--quarter .p-body{min-height:auto}

/* ============================================================
   WAVE 200 - Dashboard panels v2 Phase 4 (polish, feasible subset)
   Mobile responsive collapse + first-run hint chip. The heavier
   Phase 4 items (saved presets, view-as admin, global Settings →
   Dashboard page, multi-step onboarding) are deferred - see
   open-questions.md. CSS-only here + a tiny hint-chip rule.
   ============================================================ */

/* Mobile collapse (Doc 6 §6 edge case #2): below 720px every row
   becomes a single stacked column regardless of size; row tools stay
   reachable (always shown, not hover, since there's no hover on touch). */
@media (max-width: 720px){
  body.v4 .dv2-split2,
  body.v4 .dv2-split4 { grid-template-columns:1fr; }
  body.v4 .dv2-row .row-tools { opacity:1; transform:none; pointer-events:auto; position:static; margin:0 0 8px; justify-content:flex-end; }
  body.v4 .dv2-row .p[data-size="w"] .wide-grid { display:block; }
  body.v4 .dv2-row .p[data-size="w"] .wide-side { margin-top:14px; }
  body.v4 .dv2-empty { padding:48px 16px; }
}
/* Tablet midpoint: split4 drops to 2-up so quarter panels stay legible. */
@media (min-width: 721px) and (max-width: 1024px){
  body.v4 .dv2-split4 { grid-template-columns:1fr 1fr; }
}

/* First-run hint chip (Doc 6 edge case #10, light version): a single
   dismissible nudge above the rows, not the full onboarding tour. */
body.v4 .dv2-hint{
  display:flex; align-items:center; gap:10px;
  background:rgba(0,113,227,.08); border:1px solid rgba(0,113,227,.18);
  border-radius:var(--r); padding:10px 14px; margin:0 0 14px;
  font-size:12.5px; color:var(--g-ink-2);
}
body.v4 .dv2-hint .dv2-hint-ic{ font-size:14px; }
body.v4 .dv2-hint .dv2-hint-x{ margin-left:auto; cursor:pointer; color:var(--g-ink-4); background:none; border:none; font-size:16px; line-height:1; padding:2px 4px; }
body.v4 .dv2-hint .dv2-hint-x:hover{ color:var(--g-ink-1); }

/* ============================================================
   WAVE 202 - Speed Work popup (.sw-*). Apple-glass modal: dark hero
   header + cream body, one task surface at a time. Self-contained;
   reads velocity_output, resolves via vResolve.
   ============================================================ */
/* W1-RAIL: Speed Work launcher is now a circular icon-button. It carries the
   shared .tb-ic styling (38px round glass icon-button, matching bell / what's-
   new / chat); .sw-topbar-btn only adds the cherry tint so the lightning reads
   as the "action" of the four. The count rides as an overlaid .notif-badge
   (.sw-tb-count below only sets the tabular numerals via the shared rule). */
body.v4 .sw-topbar-btn{ font-family:var(--g-fd); }
body.v4 .sw-topbar-btn svg{ color:var(--cherry); }
body.v4 .sw-topbar-btn:hover{ background:var(--g-paper); border-color:var(--cherry); }
body.v4 .sw-topbar-btn:hover svg{ color:var(--cherry); }

body.v4 .sw-overlay{ position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,.45); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:24px; }
body.v4 .sw-modal{ width:760px; max-width:96vw; max-height:90vh; overflow:hidden; display:flex; flex-direction:column; background: var(--g-surface); border-radius:20px; box-shadow:0 30px 80px rgba(0,0,0,.32); }

/* Dark hero header (canonical gradient) */
body.v4 .sw-head{ position:relative; background:linear-gradient(180deg,#1d1d1f 0%,var(--ink-deep) 100%); color:var(--on-accent); padding:20px 22px 16px; overflow:hidden; }
body.v4 .sw-head::before{ content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 70% at 12% -10%,rgba(94,92,230,.30),transparent),radial-gradient(ellipse 50% 60% at 95% 120%,rgba(0,113,227,.22),transparent); pointer-events:none; }
body.v4 .sw-head > *{ position:relative; z-index:1; }
body.v4 .sw-head-eye{ font-size:12.5px; font-weight:500; color:var(--hero-blue); letter-spacing:-.005em; }
body.v4 .sw-close{ position:absolute; top:14px; right:14px; z-index:2; background:rgba(255,255,255,.1); border:none; color:var(--on-accent); width:28px; height:28px; border-radius:50%; font-size:18px; line-height:1; cursor:pointer; }
body.v4 .sw-close:hover{ background:rgba(255,255,255,.2); }
body.v4 .sw-brain{ display:flex; gap:10px; align-items:flex-start; margin-top:12px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); border-radius:var(--r); padding:11px 13px; }
body.v4 .sw-brain-ic{ width:26px; height:26px; border-radius:var(--r-sm); background:var(--c-lilac); color:var(--on-lilac); display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; }
body.v4 .sw-brain-msg{ font-size:13px; color:rgba(255,255,255,.85); line-height:1.5; }
body.v4 .sw-brain-msg strong{ color:var(--on-accent); }

body.v4 .sw-body{ padding:22px; overflow-y:auto; }

/* Start screen */
body.v4 .sw-start-h{ font-size:17px; font-weight:600; color:#1d1d1f; margin:0 0 14px; }
body.v4 .sw-modes{ display:flex; flex-direction:column; gap:10px; }
body.v4 .sw-mode{ text-align:left; background: var(--g-surface); border:1px solid #e7e7e4; border-radius:14px; padding:14px 16px; cursor:pointer; font-family:inherit; transition:border-color .12s, box-shadow .12s; }
body.v4 .sw-mode:hover{ border-color:var(--g-blue); box-shadow:0 4px 14px rgba(0,0,0,.06); }
body.v4 .sw-mode-label{ font-size:14px; font-weight:600; color:#1d1d1f; }
body.v4 .sw-mode-sub{ font-size:12px; color:var(--g-ink-3); margin-top:2px; }

/* Loading */
body.v4 .sw-loading{ display:flex; justify-content:center; padding:48px; }
body.v4 .sw-spin{ width:28px; height:28px; border:3px solid #e7e7e4; border-top-color:var(--cherry); border-radius:50%; animation:sw-spin .8s linear infinite; }
@keyframes sw-spin{ to{ transform:rotate(360deg); } }

/* Task card + progress */
body.v4 .sw-progress{ height:4px; background:rgba(0,0,0,.06); border-radius:var(--r-pill); overflow:hidden; margin-bottom:6px; }
body.v4 .sw-progress-bar{ height:100%; background:var(--cherry); border-radius:var(--r-pill); transition:width .25s; }
body.v4 .sw-counter{ font-size:11px; color:var(--g-400); font-weight:600; margin-bottom:14px; font-variant-numeric:tabular-nums; }
body.v4 .sw-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px; }
body.v4 .sw-card-type{ font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--g-ink-3); margin-bottom:6px; }
/* Speed Work priority chip - names WHY the item is up (Peter's pipeline model) */
body.v4 .sw-prio{ display:inline-flex; align-items:center; gap:6px; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; padding:4px 10px; border-radius:var(--r-pill); }
body.v4 .sw-prio::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
body.v4 .sw-prio--ship{ color:var(--apl-cherry); background:var(--apl-cherry-bg); }
body.v4 .sw-prio--rec{ color:var(--apl-blue); background:var(--apl-blue-bg); }
body.v4 .sw-prio--reldate{ color:var(--apl-orange); background:var(--apl-orange-bg); }
body.v4 .sw-card-title{ font-size:16px; font-weight:600; color:#1d1d1f; letter-spacing:-.01em; line-height:1.3; }
body.v4 .sw-card-context{ font-size:13px; color:var(--g-ink-3); margin-top:6px; line-height:1.5; }
body.v4 .sw-preview, body.v4 .sw-q{ background: var(--g-surface); border:1px solid #e7e7e4; border-radius:10px; padding:12px 14px; margin-top:12px; font-size:13px; color:#3a3a3c; line-height:1.55; }

/* Actions */
body.v4 .sw-actions{ display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
body.v4 .sw-btn{ background:rgba(0,0,0,.05); color:#1d1d1f; border:none; border-radius:var(--r-pill); padding:9px 16px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; display:inline-flex; align-items:center; gap:7px; }
body.v4 .sw-btn:hover{ background:rgba(0,0,0,.09); }
body.v4 .sw-btn--primary{ background:var(--cherry); color:var(--on-accent); box-shadow:0 3px 10px rgba(184,0,43,.18); }
body.v4 .sw-btn--primary:hover{ background:#9c0024; }
body.v4 .sw-btn--ghost{ background:transparent; color:var(--g-ink-3); margin-left:auto; }
body.v4 .sw-btn--ghost:hover{ background:rgba(0,0,0,.05); }
body.v4 .sw-btn kbd{ background:rgba(255,255,255,.22); border-radius:5px; padding:1px 6px; font-size:10.5px; font-family:ui-monospace,monospace; }
body.v4 .sw-btn:not(.sw-btn--primary) kbd{ background:rgba(0,0,0,.08); }

/* Peek strip */
body.v4 .sw-peek{ display:flex; align-items:center; gap:8px; margin-top:18px; flex-wrap:wrap; }
body.v4 .sw-peek-l{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--g-400); }
body.v4 .sw-peek-chip{ background:rgba(0,0,0,.04); border-radius:var(--r-pill); padding:4px 11px; font-size:11.5px; color:var(--g-ink-3); max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Done + empty */
body.v4 .sw-done, body.v4 .sw-empty{ text-align:center; padding:36px 12px; }
body.v4 .sw-done-ic{ width:56px; height:56px; border-radius:50%; background:var(--c-mint); color:var(--on-mint); display:flex; align-items:center; justify-content:center; font-size:26px; margin:0 auto 14px; }
body.v4 .sw-empty-ic{ width:48px; height:48px; border-radius:50%; background:var(--cherry-bg,#fde9ee); color:var(--cherry); display:flex; align-items:center; justify-content:center; font-size:22px; margin:0 auto 12px; }
body.v4 .sw-done-h{ font-size:18px; font-weight:600; color:#1d1d1f; margin:0 0 6px; }
body.v4 .sw-done-sub{ font-size:13px; color:var(--g-ink-3); margin:0 0 18px; line-height:1.5; }

/* ============================================================
   WAVE 228 - Speed Work context cards + inline action surfaces
   (sw-ctx / sw-action-body / sw-upload), and Velocity recommendation
   cards (vrow.rec / vr-* / rec-*). Token-only; light + dark.
   ============================================================ */
/* Speed Work · new card-type accents (tick / upload / form) */

/* Speed Work · context card - full deal/episode detail */
body.v4 .sw-ctx{ background: var(--g-surface); border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin-top:12px; }
body.v4 .sw-ctx-head{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
body.v4 .sw-ctx-eye{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--g-ink-3); }
body.v4 .sw-ctx-stage{ margin-left:auto; font-size:10.5px; font-weight:600; color:var(--g-blue); background:rgba(0,113,227,.10); border-radius:var(--r-pill); padding:2px 9px; }
body.v4 .sw-ctx-title{ font-size:15px; font-weight:600; color:var(--g-ink-1); letter-spacing:-.01em; margin-bottom:10px; line-height:1.3; }
body.v4 .sw-ctx-rows{ display:grid; grid-template-columns:repeat(2,1fr); gap:6px 18px; }
body.v4 .sw-ctx-row{ display:flex; justify-content:flex-start; align-items:baseline; gap:10px; font-size:12.5px; border-bottom:1px solid var(--line); padding-bottom:5px; }
body.v4 .sw-ctx-k{ color:var(--g-ink-3); min-width:80px; flex:0 0 auto; }
body.v4 .sw-ctx-v{ color:var(--g-ink-1); font-weight:500; text-align:left; }
body.v4 .sw-ctx-sub{ font-size:13px; color:var(--g-ink-3); margin:-2px 0 8px; }
body.v4 .sw-ctx-surfacelink{ margin-left:auto; font-size:12px; font-weight:600; color:var(--g-blue); text-decoration:none; white-space:nowrap; }
body.v4 .sw-ctx-surfacelink:hover{ text-decoration:underline; }

/* Speed Work · inline action body (form / upload mount) */
body.v4 .sw-action-body{ margin-top:14px; }
body.v4 .sw-form-err{ display:block; color:var(--cherry); font-size:12px; font-weight:600; margin-top:8px; min-height:1em; }
body.v4 .sw-locknote{ background:rgba(196,113,0,.08); border:1px solid rgba(196,113,0,.20); color:var(--warn); border-radius:10px; padding:10px 13px; font-size:12.5px; margin-top:12px; }

/* Speed Work · upload dropzone */
body.v4 .sw-upload-drop{ border:1.5px dashed var(--line-2); border-radius:12px; padding:20px 16px; text-align:center; cursor:pointer; transition:border-color .12s, background .12s; }
body.v4 .sw-upload-drop:hover, body.v4 .sw-upload-drop.dragover{ border-color:var(--g-blue); background:rgba(0,113,227,.05); }
body.v4 .sw-upload-h{ font-size:13.5px; font-weight:600; color:var(--g-ink-1); }
body.v4 .sw-upload-s{ font-size:11.5px; color:var(--g-ink-3); margin-top:3px; }
body.v4 .sw-upload-file{ font-size:12.5px; color:var(--good); font-weight:600; margin-top:8px; }

/* Speed Work · dark mode legibility (modal already flips) */
body.v4.dark .sw-ctx{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.10); }
body.v4.dark .sw-ctx-title, body.v4.dark .sw-ctx-v, body.v4.dark .sw-upload-h{ color:rgba(255,255,255,.94); }
body.v4.dark .sw-ctx-eye, body.v4.dark .sw-ctx-k, body.v4.dark .sw-upload-s{ color:rgba(255,255,255,.6); }
body.v4.dark .sw-ctx-row{ border-bottom-color:rgba(255,255,255,.10); }
body.v4.dark .sw-upload-drop{ border-color:rgba(255,255,255,.18); }

/* Velocity · AI-Director recommendation cards */
body.v4 .vrow.rec{ border-left:3px solid var(--g-blue); }
body.v4 .vrow.rec.accepted{ border-left-color:var(--good); }
body.v4 .vrow.rec.rejected{ border-left-color:var(--g-ink-3); opacity:.72; }
body.v4 .vr-cat{ display:inline-block; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--g-ink-1); border-radius:var(--r-pill); padding:2px 9px; }
body.v4 .vr-effort{ font-size:11px; font-weight:600; color:var(--g-ink-3); margin-left:8px; }
body.v4 .vr-decided{ margin-left:8px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; border-radius:var(--r-pill); padding:2px 9px; }
body.v4 .vr-decided.accepted{ background:rgba(27,138,60,.12); color:var(--good); }
body.v4 .vr-decided.rejected{ background:rgba(0,0,0,.06); color:var(--g-ink-3); }
body.v4 .rec-feedback{ margin-top:10px; }
body.v4 .rec-fb-input{ width:100%; resize:vertical; }
body.v4 .rec-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:8px; }
body.v4 .rec-decided-foot{ margin-top:10px; }
body.v4 .rec-fb-shown{ font-size:12.5px; color:var(--g-ink-3); background:var(--g-surface); border:1px solid var(--line); border-radius:8px; padding:8px 11px; }
body.v4 .rec-fb-lbl{ display:block; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--g-ink-3); margin-bottom:3px; }
body.v4 .rec-decided-meta{ font-size:11px; color:var(--g-ink-3); margin-top:6px; }
body.v4.dark .vr-cat{ color:rgba(255,255,255,.92); }
body.v4.dark .rec-fb-shown{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.10); color:rgba(255,255,255,.8); }

/* ============================================================
   WAVE 229 - ONE list-row hover grammar (P15/UX-D). Every card/flex
   list row gets the same feedback: a subtle surface tint + blue border
   accent, NO lift/shadow jump (consistent with the H2 'no panel lift'
   rule). Data tables keep their existing row bg-tint. Appended last so
   it overrides the divergent per-family hovers (lift, border-only, etc.).
   ============================================================ */
body.v4 .disc-row, body.v4 .cke-row, body.v4 .guest-row, body.v4 .guest-list-row,
body.v4 .act-row, body.v4 .ver-row, body.v4 .acc-prow, body.v4 .acc-audit-row,
body.v4 .tpl-row, body.v4 .ds-inv-row, body.v4 .staff-perm-row, body.v4 .prio-edit-row,
body.v4 .velocity-ag .vrow, body.v4 .wb-card-row {
  transition: background .12s ease, border-color .12s ease;
}
body.v4 .disc-row:hover, body.v4 .cke-row:hover, body.v4 .guest-row:hover, body.v4 .guest-list-row:hover,
body.v4 .act-row:hover, body.v4 .ver-row:hover, body.v4 .acc-prow:hover, body.v4 .acc-audit-row:hover,
body.v4 .tpl-row:hover, body.v4 .ds-inv-row:hover, body.v4 .staff-perm-row:hover, body.v4 .prio-edit-row:hover,
body.v4 .velocity-ag .vrow:hover, body.v4 .wb-card-row:hover {
  background: rgba(0,0,0,.025);
  border-color: var(--g-blue);
  transform: none;
  box-shadow: none;
}
body.v4.dark .disc-row:hover, body.v4.dark .cke-row:hover, body.v4.dark .guest-row:hover, body.v4.dark .guest-list-row:hover,
body.v4.dark .act-row:hover, body.v4.dark .ver-row:hover, body.v4.dark .acc-prow:hover, body.v4.dark .acc-audit-row:hover,
body.v4.dark .tpl-row:hover, body.v4.dark .ds-inv-row:hover, body.v4.dark .staff-perm-row:hover, body.v4.dark .prio-edit-row:hover,
body.v4.dark .velocity-ag .vrow:hover, body.v4.dark .wb-card-row:hover {
  background: rgba(255,255,255,.05);
  border-color: var(--g-blue);
}
/* Batch 2 - Velocity recommended-item panels must stay SOLID on hover. The
   shared row-hover above replaces the panel's solid bg with a translucent
   tint, which made the whole panel look like it goes transparent. Keep the
   blue border affordance, restore a solid surface. */
body.v4 .velocity-ag .vrow:hover { background: var(--g-surface); }
body.v4.dark .velocity-ag .vrow:hover { background: var(--g-surface); }

/* ============================================================
   WAVE 203 - Access page (.acc-*). Settings → Access. Apple-glass:
   reuses .hero-ag/.brain-panel + .btn-primary; tab strip + people
   list/detail + override grid + role matrix + audit.
   ============================================================ */
body.v4 .acc-gate{ text-align:center; padding:80px 24px; }
body.v4 .acc-gate-ic{ font-size:40px; margin-bottom:12px; }
body.v4 .acc-hero{ margin-bottom:18px; }

body.v4 .acc-tabs{ display:inline-flex; gap:4px; padding:4px; background:rgba(0,0,0,.04); border-radius:var(--r-pill); margin-bottom:18px; }
body.v4 .acc-tab{ border:none; background:transparent; padding:7px 16px; border-radius:var(--r-pill); font-size:12.5px; font-weight:600; color:var(--g-ink-3); cursor:pointer; font-family:var(--g-fd); }
body.v4 .acc-tab.on{ background: var(--g-surface); color:var(--g-ink-1); box-shadow:0 1px 3px rgba(0,0,0,.08); }

body.v4 .acc-notice{ background:rgba(196,113,0,.08); border:1px solid rgba(196,113,0,.22); border-radius:var(--r); padding:14px 16px; font-size:13px; color:#8a4b00; line-height:1.55; }
body.v4 .acc-notice--soft{ background:rgba(0,113,227,.06); border-color:rgba(0,113,227,.18); color:#0c447c; margin-bottom:14px; }
body.v4 .acc-notice code{ background:rgba(0,0,0,.06); border-radius:5px; padding:1px 6px; }
body.v4 .acc-loading, body.v4 .acc-empty, body.v4 .acc-detail-empty{ color:var(--g-ink-4); font-size:13px; padding:24px; text-align:center; }

/* People: list + detail */
body.v4 .acc-people{ display:grid; grid-template-columns:380px 1fr; gap:18px; align-items:start; }
body.v4 .acc-list{ min-width:0; }
body.v4 .acc-body{ min-height:200px; }
body.v4 .acc-roles-wrap{ overflow-x:auto; }
body.v4 .acc-chips{ display:flex; flex-wrap:wrap; gap:5px; margin-bottom:12px; }
body.v4 .acc-chip{ background:rgba(0,0,0,.04); border:none; border-radius:var(--r-pill); padding:5px 11px; font-size:11.5px; font-weight:600; color:var(--g-ink-2); cursor:pointer; font-family:inherit; }
body.v4 .acc-chip.on{ background:var(--g-ink-1); color:var(--on-accent); }
body.v4 .acc-chip-n{ opacity:.6; margin-left:3px; }
body.v4 .acc-prow{ display:flex; align-items:center; gap:11px; width:100%; text-align:left; background: var(--g-surface); border:1px solid var(--g-border); border-radius:var(--r); padding:11px 13px; margin-bottom:7px; cursor:pointer; font-family:inherit; transition:border-color .12s; }
body.v4 .acc-prow:hover{ border-color:var(--g-blue); }
body.v4 .acc-prow.on{ border-color:var(--g-cherry); box-shadow:0 0 0 2px rgba(184,0,43,.10); }
body.v4 .acc-av{ width:34px; height:34px; border-radius:50%; color:var(--on-accent); font-size:14px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
body.v4 .acc-av--lg{ width:46px; height:46px; font-size:18px; }
body.v4 .acc-prow-body{ flex:1; min-width:0; display:flex; flex-direction:column; }
body.v4 .acc-prow-name{ font-size:13.5px; font-weight:600; color:var(--g-ink-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.v4 .acc-prow-meta{ font-size:11px; color:var(--g-ink-3); }
body.v4 .acc-prow-role{ font-size:11.5px; color:var(--g-ink-3); font-weight:600; }
body.v4 .acc-badge{ font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; border-radius:5px; padding:2px 7px; }
body.v4 .acc-badge--staff{ background:var(--g-cherry-bg); color:var(--g-cherry); }
body.v4 .acc-badge--supplier{ background:rgba(0,113,227,.12); color:var(--g-blue); }
body.v4 .acc-badge--client{ background:#e1f5ee; color:var(--on-mint); }
body.v4 .acc-badge--fan{ background:#ffeede; color:#b5530b; }

/* Detail */
body.v4 .acc-detail{ background: var(--g-surface); border:1px solid var(--g-border); border-radius:var(--r-lg); padding:20px 22px; box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 32px rgba(0,0,0,.06); }
body.v4 .acc-detail-head{ display:flex; align-items:center; gap:13px; margin-bottom:16px; }
body.v4 .acc-detail-name{ font-size:17px; font-weight:600; color:var(--g-ink-1); letter-spacing:-.01em; }
body.v4 .acc-detail-email{ font-size:12.5px; color:var(--g-ink-3); }
body.v4 .acc-field{ display:flex; align-items:center; gap:12px; margin-bottom:11px; }
body.v4 .acc-field-l{ font-size:12px; font-weight:600; color:var(--g-ink-3); width:54px; flex-shrink:0; }
body.v4 .acc-select{ flex:1; padding:8px 12px; border:1px solid var(--g-border); border-radius:10px; font-size:13px; font-family:inherit; background: var(--g-surface); }
body.v4 .acc-grid-h{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--g-ink-4); margin:16px 0 8px; }
body.v4 .acc-grid-hint{ font-weight:500; text-transform:none; letter-spacing:0; margin-left:6px; }
body.v4 .acc-grid{ display:flex; flex-direction:column; gap:6px; max-height:300px; overflow-y:auto; }
body.v4 .acc-grow{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
body.v4 .acc-grow-page{ font-size:13px; color:var(--g-ink-2); }
body.v4 .acc-pills{ display:inline-flex; gap:3px; background:rgba(0,0,0,.04); border-radius:var(--r-pill); padding:2px; }
body.v4 .acc-pill{ border:none; background:transparent; padding:4px 9px; border-radius:var(--r-pill); font-size:10.5px; font-weight:600; color:var(--g-ink-3); cursor:pointer; font-family:inherit; white-space:nowrap; }
body.v4 .acc-pill.on{ background: var(--g-surface); color:var(--g-ink-1); box-shadow:0 1px 2px rgba(0,0,0,.10); }
body.v4 .acc-pill:disabled{ opacity:.4; cursor:default; }
body.v4 .acc-detail-foot{ display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-top:18px; padding-top:16px; border-top:1px solid var(--g-border); }
body.v4 .acc-save-state{ font-size:12px; color:var(--g-ink-3); }

/* Roles matrix */
body.v4 .acc-matrix{ width:100%; border-collapse:collapse; font-size:12px; background: var(--g-surface); border:1px solid var(--g-border); border-radius:var(--r); overflow:hidden; }
body.v4 .acc-matrix th{ text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--g-ink-3); padding:10px 12px; border-bottom:1px solid var(--g-border); background:var(--paper-soft); }
body.v4 .acc-matrix td{ padding:9px 12px; border-bottom:1px solid var(--g-border); }
body.v4 .acc-matrix-page{ font-weight:600; color:var(--g-ink-1); }
body.v4 .acc-cell{ text-align:center; font-weight:600; font-size:11px; text-transform:capitalize; color:var(--g-ink-4); }
body.v4 .acc-cell--edit{ color:var(--on-mint); } body.v4 .acc-cell--full{ color:var(--cherry); }
body.v4 .acc-cell--view{ color:var(--g-blue); } body.v4 .acc-cell--scope{ color:#8a4b00; }
body.v4 .acc-roles-note{ font-size:12px; color:var(--g-ink-3); margin-top:12px; line-height:1.55; }

/* Audit */
body.v4 .acc-audit-row{ display:grid; grid-template-columns:140px 1fr auto; gap:12px; padding:10px 14px; background: var(--g-surface); border:1px solid var(--g-border); border-radius:10px; margin-bottom:6px; font-size:12.5px; align-items:center; }
body.v4 .acc-audit-kind{ font-weight:700; text-transform:capitalize; color:var(--g-ink-1); }
body.v4 .acc-audit-who{ color:var(--g-ink-2); }
body.v4 .acc-audit-when{ color:var(--g-ink-4); font-variant-numeric:tabular-nums; }

@media (max-width:820px){ body.v4 .acc-people{ grid-template-columns:1fr; } }

/* H7 - Access page dark mode: .acc-prow/.acc-audit-row already flip via the
   dark sweep; the remaining bespoke controls used light backgrounds (some
   unreadable in dark, e.g. .acc-chip.on was a light pill + white text). Flip
   them to translucent-white glass / readable accents. Token/rgba only. */
body.v4.dark .acc-tabs,
body.v4.dark .acc-pills,
body.v4.dark .acc-chip { background: rgba(255,255,255,.06); }
body.v4.dark .acc-tab.on,
body.v4.dark .acc-pill.on { background: rgba(255,255,255,.14); color: rgba(255,255,255,.95); }
body.v4.dark .acc-chip.on { background: rgba(255,255,255,.92); color: rgba(0,0,0,.85); }
body.v4.dark .acc-detail,
body.v4.dark .acc-matrix,
body.v4.dark .acc-select { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.10); }
body.v4.dark .acc-matrix th { background: rgba(255,255,255,.04); border-bottom-color: rgba(255,255,255,.10); }
body.v4.dark .acc-matrix td { border-bottom-color: rgba(255,255,255,.10); }
body.v4.dark .acc-detail-foot { border-top-color: rgba(255,255,255,.10); }
body.v4.dark .acc-notice { background: rgba(196,113,0,.16); border-color: rgba(196,113,0,.30); color: rgba(255,200,140,.95); }
body.v4.dark .acc-notice--soft { background: rgba(0,113,227,.16); border-color: rgba(0,113,227,.30); color: rgba(150,200,255,.95); }
body.v4.dark .acc-notice code { background: rgba(255,255,255,.10); }

/* ============================================================
   WAVE 212 - Intel booker score badge + component breakdown
   (on the Pipeline kanban cards). Score from intel-score cron.
   ============================================================ */
body.v4 .kb-card-intel .intel-score{
  position:absolute; top:10px; right:34px;
  min-width:24px; height:22px; padding:0 7px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:7px; font-size:12px; font-weight:700; font-variant-numeric:tabular-nums;
  color:var(--on-accent);
}
body.v4 .kb-card-intel .intel-score.sc-high{ background:var(--cherry); }
body.v4 .kb-card-intel .intel-score.sc-mid{ background:var(--g-blue); }
body.v4 .kb-card-intel .intel-score.sc-low{ background:var(--g-400); }
body.v4 .kb-card-intel .intel-sc-breakdown{
  display:flex; flex-wrap:wrap; gap:5px; margin-top:8px;
}
body.v4 .kb-card-intel .intel-sc-part{
  font-size:10px; font-weight:600; color:var(--g-ink-3);
  background:rgba(0,0,0,.05); border-radius:5px; padding:2px 7px;
  letter-spacing:.01em; font-variant-numeric:tabular-nums;
}

/* ============================================================
   WAVE 213 - Velocity Engine apple-glass FULL fidelity build
   Lifted VERBATIM from _DESIGN_VELOCITY_ENGINE_APPLE_GLASS.html
   <style> block (lines 29-266). Scoped under body.v4 .velocity-ag
   so it can't leak. SUPERSEDES the lighter Wave 198 restyle block.
   Token-alias rule first (these design tokens aren't in production
   CSS - values mirror _DESIGN_DASHBOARD_PANELS_v2_styles.css :root).
   ============================================================ */
body.v4 .velocity-ag{
  --cherry:#b8002b; --cherry-bg:rgba(184,0,43,.08);
  --ink:#1d1d1f; --ink2:#3a3a3c; --ink3:#6e6e73; --ink4:#a1a1a6;
  --line:#e7e7e4; --line2:#d9d9d4; --bg:#f4f3ee;
  --blue:#0071e3; --lilac:#5e5ce6; --mint:#1d9e75; --amber:#c47100; --teal:#036077;
  --c-lilac:#ece9fe; --c-mint:#e1f5ee; --c-peach:#faece7;
  --c-butter:#fbf2da; --c-sky:#e6f1fb; --c-rose:#fbeaf0; --c-sage:#eef3e2;
  --on-sky:#0c447c; --on-lilac:#3c3489; --on-peach:#b5530b;
  --on-amber:#8a4b00; --on-mint:#0f6e56; --on-butter:#8a6d00; --on-sage:#4a7a1f;
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px;
  --sh:0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.06);
  --fd:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* Apple-glass hero (lifted from v5-glass.css:2141) */
body.v4 .velocity-ag .hero-ag{
  background:linear-gradient(180deg, #1d1d1f 0%, var(--ink-deep) 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-xl); padding:26px 30px; color:var(--on-accent); position:relative; overflow:hidden;
  margin-bottom:18px;
}
body.v4 .velocity-ag .hero-ag::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 600px 320px at 12% -10%, rgba(94,92,230,0.30), transparent),
    radial-gradient(ellipse 500px 260px at 95% 110%, rgba(0,113,227,0.22), transparent);
  pointer-events:none;
}
body.v4 .velocity-ag .hero-ag > *{position:relative; z-index:1}
body.v4 .velocity-ag .hero-ag .ha-eye{font-size:12.5px; font-weight:500; color:var(--hero-blue); letter-spacing:-.005em; margin-bottom:5px}
body.v4 .velocity-ag .hero-ag h1{font-size:30px; letter-spacing:-.022em; color:var(--on-accent); margin-bottom:6px; line-height:1.15}
body.v4 .velocity-ag .hero-ag .ha-sub{font-size:14px; color:rgba(255,255,255,.65); margin-bottom:18px; max-width:680px; line-height:1.55}

/* AI brain panel in hero */
body.v4 .velocity-ag .brain-panel{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
  border-radius:14px; padding:14px 16px; display:flex; gap:14px; align-items:flex-start;
  backdrop-filter:blur(8px);
}
body.v4 .velocity-ag .brain-panel .bp-ic{
  width:36px; height:36px; border-radius:10px;
  background:var(--c-lilac); color:var(--on-lilac);
  display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0;
}
body.v4 .velocity-ag .brain-panel .bp-text{flex:1; min-width:0}
body.v4 .velocity-ag .brain-panel .bp-eye{font-size:10.5px; font-weight:700; color:var(--hero-blue); letter-spacing:.04em; text-transform:uppercase; margin-bottom:3px}
body.v4 .velocity-ag .brain-panel .bp-msg{font-size:13.5px; color:rgba(255,255,255,.85); line-height:1.55}
body.v4 .velocity-ag .brain-panel .bp-msg strong{color:var(--on-accent); font-weight:600}
body.v4 .velocity-ag .brain-panel .bp-refresh{margin-left:auto; color:rgba(255,255,255,.5); cursor:pointer; font-size:14px; background:none; border:none; flex-shrink:0}
body.v4 .velocity-ag .brain-panel .bp-when{font-size:10px; color:rgba(255,255,255,.4); margin-top:4px}

/* Scorecard strip */
body.v4 .velocity-ag .scorecard{
  background:linear-gradient(180deg, #1d1d1f 0%, var(--ink-deep) 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-xl); padding:20px 26px; color:var(--on-accent);
  position:relative; overflow:hidden; margin-bottom:18px;
}
body.v4 .velocity-ag .scorecard::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 50% 60% at 95% 110%, rgba(0,113,227,0.18), transparent);
  pointer-events:none;
}
body.v4 .velocity-ag .scorecard > *{position:relative; z-index:1}
body.v4 .velocity-ag .sc-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:14px}
body.v4 .velocity-ag .sc-tile{padding-right:14px; border-right:1px solid rgba(255,255,255,.10)}
body.v4 .velocity-ag .sc-tile:last-child{border-right:none}
body.v4 .velocity-ag .sc-tile .sct-l{font-size:10.5px; font-weight:700; color:rgba(255,255,255,.5); letter-spacing:.04em; text-transform:uppercase; margin-bottom:5px}
body.v4 .velocity-ag .sc-tile .sct-n{font-size:28px; font-weight:600; color:var(--on-accent); letter-spacing:-.018em; line-height:1; font-variant-numeric:tabular-nums; display:flex; align-items:baseline; gap:8px}
body.v4 .velocity-ag .sc-tile .sct-n .sct-d{font-size:12px; font-weight:600; color:var(--hero-blue); letter-spacing:0}
body.v4 .velocity-ag .sc-tile .sct-n .sct-d.neg{color:rgba(255,255,255,.5)}
body.v4 .velocity-ag .sc-tile .sct-n .sct-d.cherry{color:#ff8a96}
body.v4 .velocity-ag .sc-tile .sct-sub{font-size:11.5px; color:rgba(255,255,255,.55); margin-top:4px}

/* Tab strip */
body.v4 .velocity-ag .ag-tabs{display:flex; gap:5px; padding:4px; background:rgba(0,0,0,.04); border-radius:var(--r-pill); margin-bottom:18px; width:fit-content}
body.v4 .velocity-ag .ag-tabs button{
  background:transparent; border:none; padding:7px 16px; border-radius:var(--r-pill);
  font-size:12.5px; font-weight:600; color:var(--ink3); cursor:pointer; font-family:var(--fd);
  display:inline-flex; align-items:center; gap:6px;
}
body.v4 .velocity-ag .ag-tabs button .agt-c{background:rgba(0,0,0,.08); color:var(--ink2); padding:1px 7px; border-radius:var(--r-pill); font-size:10.5px; font-weight:700}
body.v4 .velocity-ag .ag-tabs button.on{background: var(--g-surface); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08)}
body.v4 .velocity-ag .ag-tabs button.on .agt-c{background:var(--cherry); color:var(--on-accent)}

/* Now feed - group headers + rows */
body.v4 .velocity-ag .feed-group{margin-bottom:18px}
body.v4 .velocity-ag .feed-h{font-size:11px; font-weight:700; color:var(--ink3); letter-spacing:.08em; text-transform:uppercase; margin-bottom:8px; padding:0 2px; display:flex; align-items:center; gap:8px}
body.v4 .velocity-ag .feed-h .fh-dot{width:8px; height:8px; border-radius:50%}
body.v4 .velocity-ag .feed-h .fh-c{margin-left:auto; color:var(--ink4); font-weight:600; letter-spacing:0; text-transform:none; font-size:11.5px}

body.v4 .velocity-ag .vrow{
  background: var(--g-surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:14px 16px; margin-bottom:8px; display:grid; grid-template-columns:40px 1fr auto;
  gap:14px; align-items:flex-start; box-shadow:0 1px 0 rgba(0,0,0,.02);
  transition:.15s;
}
body.v4 .velocity-ag .vrow:hover{box-shadow:0 6px 20px rgba(0,0,0,.06); transform:translateY(-1px)}

body.v4 .velocity-ag .vr-ic{width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; font-weight:700}
body.v4 .velocity-ag .vrow.task    .vr-ic{background:var(--c-mint);   color:var(--on-mint)}
body.v4 .velocity-ag .vrow.approve .vr-ic{background:var(--c-lilac);  color:var(--on-lilac)}
body.v4 .velocity-ag .vrow.quest   .vr-ic{background:var(--c-peach);  color:var(--on-peach)}
body.v4 .velocity-ag .vrow.alert   .vr-ic{background:var(--c-rose);   color:var(--cherry)}
body.v4 .velocity-ag .vrow.proj    .vr-ic{background:var(--c-sky);    color:var(--on-sky)}
body.v4 .velocity-ag .vrow.brief   .vr-ic{background:var(--c-butter); color:var(--on-butter)}
body.v4 .velocity-ag .vrow.act     .vr-ic{background:var(--c-sage);   color:var(--on-sage)}

body.v4 .velocity-ag .vr-body{min-width:0}
body.v4 .velocity-ag .vr-head{display:flex; align-items:center; gap:8px; margin-bottom:3px; flex-wrap:wrap}
body.v4 .velocity-ag .vr-type{font-size:9.5px; font-weight:700; padding:2px 7px; border-radius:5px; letter-spacing:.04em; text-transform:uppercase}
body.v4 .velocity-ag .vr-type.task    {background:var(--c-mint);   color:var(--on-mint)}
body.v4 .velocity-ag .vr-type.approve {background:var(--c-lilac);  color:var(--on-lilac)}
body.v4 .velocity-ag .vr-type.quest   {background:var(--c-peach);  color:var(--on-peach)}
body.v4 .velocity-ag .vr-type.alert   {background:var(--c-rose);   color:var(--cherry)}
body.v4 .velocity-ag .vr-type.proj    {background:var(--c-sky);    color:var(--on-sky)}
body.v4 .velocity-ag .vr-type.brief   {background:var(--c-butter); color:var(--on-butter)}
body.v4 .velocity-ag .vr-prio{font-size:10.5px; font-weight:600; color:var(--ink2); display:inline-flex; align-items:center; gap:5px; padding:2px 8px; background:rgba(0,0,0,.04); border-radius:var(--r-pill)}
body.v4 .velocity-ag .vr-prio .vp-dot{width:7px; height:7px; border-radius:50%}
body.v4 .velocity-ag .vr-context{font-size:11px; color:var(--ink4); font-weight:500}

body.v4 .velocity-ag .vr-title{font-size:13.5px; font-weight:600; color:var(--ink); letter-spacing:-.005em; line-height:1.35}
body.v4 .velocity-ag .vr-desc{font-size:12px; color:var(--ink3); margin-top:3px; line-height:1.5}

body.v4 .velocity-ag .vr-preview{background:var(--paper-soft); border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 12px; margin-top:8px; font-size:12px; color:var(--ink2); line-height:1.55}
body.v4 .velocity-ag .vr-preview strong{color:var(--ink); font-weight:600}

body.v4 .velocity-ag .vr-act{display:flex; flex-direction:column; align-items:flex-end; gap:6px}
body.v4 .velocity-ag .vr-score{
  background:var(--ink); color:var(--on-accent); padding:3px 10px; border-radius:6px; font-size:12px; font-weight:700;
  font-variant-numeric:tabular-nums; min-width:36px; text-align:center;
}
body.v4 .velocity-ag .vr-score.high{background:var(--cherry)}
body.v4 .velocity-ag .vr-score.mid{background:var(--blue)}
body.v4 .velocity-ag .vr-cta{background:var(--cherry); color:var(--on-accent); border:none; padding:6px 14px; border-radius:var(--r-pill); font-size:11.5px; font-weight:600; cursor:pointer; font-family:var(--fd); box-shadow:0 3px 10px rgba(184,0,43,.18)}
body.v4 .velocity-ag .vr-cta.sec{background:rgba(0,0,0,.05); color:var(--ink2); box-shadow:none}
body.v4 .velocity-ag .vr-menu{color:var(--ink4); cursor:pointer; font-size:14px; padding:4px}

/* Filter chip row */
body.v4 .velocity-ag .filter-row{display:flex; gap:5px; padding:8px 2px 14px; flex-wrap:wrap; align-items:center}
body.v4 .velocity-ag .filter-row .fr-l{font-size:10.5px; font-weight:700; color:var(--ink4); letter-spacing:.06em; text-transform:uppercase; margin-right:6px}
body.v4 .velocity-ag .fchip{background:rgba(0,0,0,.04); padding:5px 11px; border-radius:var(--r-pill); font-size:11.5px; color:var(--ink2); cursor:pointer; font-weight:500}
body.v4 .velocity-ag .fchip.on{background:var(--ink); color:var(--on-accent)}
body.v4 .velocity-ag .fchip.prio{background:var(--c-lilac); color:var(--on-lilac); font-weight:600}

/* Section header */
body.v4 .velocity-ag .vsec{margin-top:6px; margin-bottom:14px; display:flex; align-items:flex-end; justify-content:space-between; gap:14px}
body.v4 .velocity-ag .vsec h3{font-size:18px; letter-spacing:-.012em; margin-bottom:2px}
body.v4 .velocity-ag .vsec p{font-size:13px; color:var(--ink3); margin:0}
body.v4 .velocity-ag .vsec-act{font-size:12px; color:var(--blue); font-weight:600; cursor:pointer}

/* Score tab - velocity chart */
body.v4 .velocity-ag .chart-card{background: var(--g-surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px 22px; box-shadow:var(--sh); margin-bottom:14px}
body.v4 .velocity-ag .chart-card h4{font-size:14px; margin-bottom:3px}
body.v4 .velocity-ag .chart-card .cc-sub{font-size:12px; color:var(--ink3); margin:0 0 14px}
body.v4 .velocity-ag .chart{height:180px; position:relative}
body.v4 .velocity-ag .chart svg{width:100%; height:100%; display:block}

/* Per-priority progress rows */
body.v4 .velocity-ag .pprog{background: var(--g-surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px 22px; box-shadow:var(--sh); margin-bottom:14px}
body.v4 .velocity-ag .pprog h4{font-size:14px; margin-bottom:14px}
body.v4 .velocity-ag .pprog-row{padding:10px 0; border-bottom:1px solid var(--line)}
body.v4 .velocity-ag .pprog-row:last-child{border-bottom:none}
body.v4 .velocity-ag .pprog-h{display:flex; align-items:center; gap:8px; margin-bottom:5px}
body.v4 .velocity-ag .pprog-color{width:10px; height:10px; border-radius:3px; flex-shrink:0}
body.v4 .velocity-ag .pprog-name{font-size:13px; font-weight:600; color:var(--ink); flex:1}
body.v4 .velocity-ag .pprog-stats{font-size:11.5px; color:var(--ink3); font-variant-numeric:tabular-nums}
body.v4 .velocity-ag .pprog-stats strong{color:var(--ink); font-weight:600}
body.v4 .velocity-ag .pbar{height:6px; background:rgba(0,0,0,.05); border-radius:var(--r-pill); overflow:hidden}
body.v4 .velocity-ag .pbar i{display:block; height:100%; border-radius:var(--r-pill)}

/* Director leaderboard */
body.v4 .velocity-ag .lb{background: var(--g-surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:0; box-shadow:var(--sh); margin-bottom:14px; overflow:hidden}
body.v4 .velocity-ag .lb h4{font-size:14px; margin:0; padding:16px 22px 12px; border-bottom:1px solid var(--line)}
body.v4 .velocity-ag .lb-row{display:grid; grid-template-columns:28px 1fr 80px 80px 80px; gap:14px; padding:11px 22px; border-bottom:1px solid var(--line); font-size:12.5px; align-items:center}
body.v4 .velocity-ag .lb-row:last-child{border-bottom:none}
body.v4 .velocity-ag .lb-row .lb-rank{font-size:11px; color:var(--ink4); font-weight:700; text-align:center; font-variant-numeric:tabular-nums}
body.v4 .velocity-ag .lb-row .lb-name{font-weight:600; color:var(--ink)}
body.v4 .velocity-ag .lb-row .lb-n{text-align:right; font-variant-numeric:tabular-nums; color:var(--ink2); font-weight:600}
body.v4 .velocity-ag .lb-row .lb-n.accent{color:#0a7d2e}
body.v4 .velocity-ag .lb-row .lb-n.label-on{display:flex; flex-direction:column; align-items:flex-end}
body.v4 .velocity-ag .lb-row .lb-n .lb-l{font-size:10px; color:var(--ink4); letter-spacing:.04em; text-transform:uppercase; margin-top:1px; font-weight:600}
body.v4 .velocity-ag .lb-head{background:var(--paper-soft); padding:8px 22px; border-bottom:1px solid var(--line); display:grid; grid-template-columns:28px 1fr 80px 80px 80px; gap:14px; font-size:10px; font-weight:700; color:var(--ink4); letter-spacing:.06em; text-transform:uppercase}
body.v4 .velocity-ag .lb-head div:nth-child(n+3){text-align:right}

/* AI impact tiles */
body.v4 .velocity-ag .impact-row{display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-bottom:14px}
body.v4 .velocity-ag .impact{background:linear-gradient(180deg, #1d1d1f 0%, var(--ink-deep) 100%); border:1px solid rgba(255,255,255,.08); border-radius:var(--r-lg); padding:18px 20px; color:var(--on-accent); position:relative; overflow:hidden}
body.v4 .velocity-ag .impact::before{content:''; position:absolute; inset:0; background:radial-gradient(ellipse 50% 60% at 95% 110%, rgba(0,113,227,0.18), transparent); pointer-events:none}
body.v4 .velocity-ag .impact > *{position:relative; z-index:1}
body.v4 .velocity-ag .impact .imp-l{font-size:10.5px; font-weight:700; color:rgba(255,255,255,.5); letter-spacing:.04em; text-transform:uppercase; margin-bottom:6px}
body.v4 .velocity-ag .impact .imp-n{font-size:32px; font-weight:600; letter-spacing:-.022em; line-height:1; font-variant-numeric:tabular-nums; margin-bottom:5px}
body.v4 .velocity-ag .impact .imp-d{font-size:11.5px; color:var(--hero-blue); font-weight:500}

/* Priorities tab */
body.v4 .velocity-ag .priorities-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
body.v4 .velocity-ag .pcard-big{background: var(--g-surface); border:1px solid var(--line); border-radius:var(--r-xl); padding:20px 24px; box-shadow:var(--sh); position:relative; overflow:hidden}
body.v4 .velocity-ag .pcard-big .pcb-bar{height:5px; border-radius:var(--r-pill); margin:-20px -24px 14px}
body.v4 .velocity-ag .pcb-h{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:8px}
body.v4 .velocity-ag .pcb-h h4{font-size:16px; letter-spacing:-.008em; margin:0}
body.v4 .velocity-ag .pcb-h .pcb-w{font-size:11.5px; color:var(--ink3); padding:3px 9px; background:rgba(0,0,0,.04); border-radius:6px; font-weight:600}
body.v4 .velocity-ag .pcb-desc{font-size:13px; color:var(--ink2); line-height:1.55; margin-bottom:14px}
body.v4 .velocity-ag .pcb-stats{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-bottom:12px}
body.v4 .velocity-ag .pcb-stat .pcs-n{font-size:20px; font-weight:600; color:var(--ink); letter-spacing:-.012em; line-height:1; font-variant-numeric:tabular-nums}
body.v4 .velocity-ag .pcb-stat .pcs-l{font-size:10.5px; color:var(--ink3); margin-top:3px; letter-spacing:.04em; text-transform:uppercase; font-weight:600}
body.v4 .velocity-ag .pcb-prog{margin-top:6px}
body.v4 .velocity-ag .pcb-prog .pp-l{display:flex; justify-content:space-between; font-size:11px; color:var(--ink3); margin-bottom:5px}
body.v4 .velocity-ag .pcb-prog .pp-l strong{color:var(--ink); font-weight:600}

/* All activity feed */
body.v4 .velocity-ag .act-row{padding:12px 16px; background: var(--g-surface); border:1px solid var(--line); border-radius:10px; margin-bottom:6px; font-size:12.5px; display:grid; grid-template-columns:60px 32px 1fr auto; gap:12px; align-items:center}
body.v4 .velocity-ag .act-row .ar-when{font-size:11px; color:var(--ink4); font-weight:600; font-variant-numeric:tabular-nums}
body.v4 .velocity-ag .act-row .ar-ic{width:28px; height:28px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; font-size:12px}
body.v4 .velocity-ag .act-row .ar-text{color:var(--ink); line-height:1.45}
body.v4 .velocity-ag .act-row .ar-text strong{font-weight:600}
body.v4 .velocity-ag .act-row .ar-text .ar-meta{font-size:11.5px; color:var(--ink4); font-weight:400; margin-top:1px}
body.v4 .velocity-ag .act-row .ar-prio{font-size:11px; color:var(--blue); font-weight:600}

/* Empty state */
body.v4 .velocity-ag .empty-ag{
  background: var(--g-surface); border:1px solid var(--line); border-radius:var(--r-xl); padding:48px 32px; text-align:center; box-shadow:var(--sh);
}
body.v4 .velocity-ag .empty-ag .ea-ic{width:56px; height:56px; border-radius:14px; background:var(--c-mint); color:var(--on-mint); display:inline-flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:14px}
body.v4 .velocity-ag .empty-ag h3{font-size:20px; letter-spacing:-.012em; margin-bottom:5px}
body.v4 .velocity-ag .empty-ag p{font-size:13.5px; color:var(--ink3); max-width:380px; margin:0 auto 18px; line-height:1.55}

/* Settings → Engine page */
body.v4 .velocity-ag .se-tabs{display:flex; gap:0; border-bottom:1px solid var(--line); margin-bottom:18px}
body.v4 .velocity-ag .se-tabs button{background:transparent; border:none; padding:10px 16px 12px; font-size:12.5px; font-weight:600; color:var(--ink3); cursor:pointer; font-family:var(--fd); position:relative}
body.v4 .velocity-ag .se-tabs button.on{color:var(--ink)}
body.v4 .velocity-ag .se-tabs button.on::after{content:''; position:absolute; bottom:-1px; left:0; right:0; height:2px; background:var(--cherry); border-radius:999px 999px 0 0}

body.v4 .velocity-ag .prio-edit-row{
  background: var(--g-surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:14px 16px;
  margin-bottom:8px; display:grid; grid-template-columns:24px 14px 1fr 220px 80px 24px;
  gap:14px; align-items:center;
}
body.v4 .velocity-ag .prio-grip{color:var(--ink4); text-align:center; cursor:grab; font-size:12px}
body.v4 .velocity-ag .prio-color-dot{width:14px; height:14px; border-radius:4px}
body.v4 .velocity-ag .prio-name input{width:100%; border:none; font-size:14px; font-weight:600; color:var(--ink); font-family:var(--fd); background:transparent; padding:4px 0}
body.v4 .velocity-ag .prio-name input:focus{outline:none}
body.v4 .velocity-ag .prio-weight{display:flex; align-items:center; gap:8px}
body.v4 .velocity-ag .prio-weight-bar{flex:1; height:6px; background:rgba(0,0,0,.06); border-radius:var(--r-pill); overflow:hidden}
body.v4 .velocity-ag .prio-weight-bar i{display:block; height:100%; background:var(--cherry); border-radius:var(--r-pill)}
body.v4 .velocity-ag .prio-weight-n{font-size:11.5px; color:var(--ink2); font-weight:600; font-variant-numeric:tabular-nums; min-width:24px; text-align:right}
body.v4 .velocity-ag .prio-status{font-size:10.5px; font-weight:700; color:#0a7d2e; background:#0a7d2e1f; padding:3px 8px; border-radius:5px; letter-spacing:.04em; text-transform:uppercase; text-align:center}
body.v4 .velocity-ag .prio-status.off{color:var(--ink3); background:rgba(0,0,0,.04)}
body.v4 .velocity-ag .prio-menu{color:var(--ink4); cursor:pointer; text-align:center; font-size:14px}
body.v4 .velocity-ag .add-prio{background:transparent; border:1.5px dashed var(--line2); padding:14px; border-radius:var(--r-lg); width:100%; font-size:12.5px; color:var(--ink3); cursor:pointer; font-family:var(--fd); font-weight:600; margin-top:8px}
body.v4 .velocity-ag .add-prio:hover{border-color:var(--blue); color:var(--blue)}

/* ░░░░░░░░░░ 4/4 v6-refine.css ░░░░░░░░░░ */
/* =============================================================
   v6-refine.css - loads last. APPEARANCE ONLY.
   Genuine app-wide dark mode + theme-toggle + consistency polish.
   Dark mode works because v5-glass card backgrounds were switched
   from hardcoded white to var(--g-surface), which we flip here.
   ============================================================= */

/* ─── DARK MODE - flip the token source ───────────────────── */
body.v4.dark{
  --g-surface:   #1c1c20;
  --g-canvas:    #0c0c0f;
  --g-paper:     rgba(44, 44, 50, 0.62);
  --g-paper-2:   rgba(44, 44, 50, 0.48);
  --g-paper-3:   rgba(52, 52, 58, 0.9);
  --g-ink:       rgba(245, 245, 247, 0.9);
  --g-ink-bg:    rgba(245, 245, 247, 0.9);
  --g-border:    rgba(255, 255, 255, 0.10);
  --g-border-soft: rgba(255, 255, 255, 0.07);
  --g-rule:      rgba(255, 255, 255, 0.09);
  --g-rule-soft: rgba(255, 255, 255, 0.05);
  --g-ink-1:     #f5f5f7;
  --g-ink-2:     #d3d3d6;
  --g-ink-3:     #9b9ba1;
  --g-ink-4:     #74747c;
  --g-blue:      #3897ff;
  --g-blue-2:    #5aa6ff;
  --g-blue-bg:   rgba(56, 151, 255, 0.22);
  --g-blue-soft: rgba(56, 151, 255, 0.14);
  --g-cherry:    #ff3b5f;
  --g-cherry-bg: rgba(255, 59, 95, 0.18);
  --g-green:     #44c98a; --g-green-bg: rgba(68,201,138,0.16);
  --g-orange:    #ff8a4c; --g-orange-bg: rgba(255,138,76,0.16);
  --g-lilac:     #8e8bff; --g-lilac-bg: rgba(142,139,255,0.18);
  --g-butter:    #e8c25a; --g-butter-bg: rgba(232,194,90,0.16);
  /* deepen pastel surfaces so light pills don't glare */
  --c-lilac:#2a2752; --on-lilac:#c5c0ff; --c-mint:#16352b; --on-mint:#8ee9c4;
  --c-sky:#13314f; --on-sky:#9ccbff; --c-peach:#3d2a1c; --on-amber:#f2d479;
  --c-butter:#3a3318; --c-rose:#3a1f2c; --c-sage:#22331e;
}
/* the body gradient backdrop in dark */
body.v4.dark{
  background:
    radial-gradient(ellipse 900px 600px at 12% 8%, rgba(94,92,230,0.20), transparent),
    radial-gradient(ellipse 800px 600px at 88% 18%, rgba(184,0,43,0.13), transparent),
    radial-gradient(ellipse 700px 700px at 50% 100%, rgba(0,113,227,0.15), transparent),
    var(--g-canvas) !important;
}
/* a few inputs/dividers that were hardcoded light */
body.v4.dark input,
body.v4.dark textarea,
body.v4.dark select{ color: var(--g-ink-1); }
body.v4.dark .topbar-search input,
body.v4.dark .topbar-search > input#global-search{ background: rgba(255,255,255,0.06) !important; }

/* ─── THEME TOGGLE (the only NEW top-bar control) ───────────
   Sits right of the search bar; the app's real bell / speed-work /
   feedback already live in the top bar, so we add nothing else.     */
body.v4 .tb6-toggle{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer; flex:none;
  background: var(--g-paper); backdrop-filter: var(--g-blur);
  border:1px solid var(--g-border); border-radius:var(--r-pill); padding:7px 8px; box-shadow:var(--g-sh);
}
body.v4 .tb6-toggle .lbl{ font-size:11.5px; font-weight:600; color:var(--g-ink-2); padding:0 2px }
body.v4 .tb6-toggle .knob{ width:34px; height:19px; border-radius:var(--r-pill); background:rgba(0,0,0,0.14); position:relative; transition:background .16s }
body.v4.dark .tb6-toggle .knob{ background:var(--g-blue) }
body.v4 .tb6-toggle .knob::after{ content:''; position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .3s cubic-bezier(.34,1.4,.45,1) }
body.v4.dark .tb6-toggle .knob::after{ transform:translateX(15px) }

/* ─── USER-PILL ROLLOVER polish ─────────────────────────────
   The menu already toggles via JS; make it a clean glass card and
   give the rows a hover state + chip alignment.                      */
body.v4 .topbar-user{ transition:background .16s, transform .16s }
body.v4 .topbar-user:hover{ transform:translateY(-1px) }
body.v4 .topbar-user-menu{
  background: rgba(255,255,255,0.97) !important; backdrop-filter: var(--g-blur-2);
  border:1px solid var(--g-border); border-radius:14px; box-shadow:var(--g-sh-2); padding:7px;
  min-width:220px;
}
body.v4.dark .topbar-user-menu{ background: rgba(30,30,35,0.97) !important; }
body.v4 .topbar-user-menu-item{
  display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px;
  font-size:13px; color:var(--g-ink-2); text-decoration:none; cursor:pointer;
}
body.v4 .topbar-user-menu-item:hover{ background: var(--g-blue-soft); color:var(--g-ink-1); }
body.v4 .topbar-user-menu-divider{ height:1px; background:var(--g-rule); margin:5px 4px; }

/* ─── consistency: one pale-blue icon chip + dark-wash tabs ── */
body.v4 .pi, body.v4 .ric, body.v4 .vr-ic, body.v4 .ch .ci,
body.v4 .disc-row-ic, body.v4 .mb-ic, body.v4 .ti-ic, body.v4 .aic{
  background:var(--g-blue-soft) !important; color:var(--g-blue) !important;
}
body.v4 .ag-tabs button.on,
body.v4 .acc-tab.on, body.v4 .cke-stage-tab.on, body.v4 .wb-tab.on{
  /* active tab = cherry fill (guide: active = cherry). Was a blue/lilac gradient
     which read blue-on-blue in dark. cherry-fill = brand in light, legible in dark. */
  background: var(--cherry-fill) !important;
  color:var(--on-accent) !important;
}

/* ░░░░░░░░░░ Wave 215 - dark-mode customise-UI chrome ░░░░░░░░░░
   The dashboard v2 customise UI (rows, row toolbar, add-panel slots,
   empty state, undo, picker, settings popover) was built light-only:
   hardcoded #1d1d1f text, #e7e7e4 / #d9d9d4 borders, #f4f3ee fills,
   with NO dark variant - so in site dark mode the text rendered
   near-black on the near-black canvas (verified on live: dv2-row /
   row-tools / dv2-slots / dv2-hint-x all <1.2 contrast).
   This block adds the missing dark treatment. Scoped strictly to
   dashboard customise-UI classes - does NOT touch episode/sponsor
   surfaces or checklist editors. app.css is now the canonical sheet;
   edits go here, not the frozen source files. */
body.v4.dark .dv2-rows{
  --dv2-ink:#f5f5f7; --dv2-ink3:#9b9ba1; --dv2-ink4:#74747c;
  --dv2-line:#2c2c31; --dv2-card:#1c1c20; --dv2-bg:#232328;
}
/* default (un-skinned) panel chrome */
body.v4.dark .dv2-row .p{ border-color:var(--border); }
body.v4.dark .dv2-row .p-title{ color:var(--ink-1); }
body.v4.dark .dv2-row .p-act:hover{ background:rgba(255,255,255,.08); color:var(--ink-2); }
/* row toolbar */
body.v4.dark .row-tools{ border-color:var(--border); }
body.v4.dark .rt-grp{ background:rgba(255,255,255,.06); }
body.v4.dark .rt-size.on{ color:var(--ink-1); }
body.v4.dark .rt-div{ background:var(--line); }
body.v4.dark .rt-icon:hover{ background:rgba(255,255,255,.08); color:var(--ink-1); }
/* empty slots + add-row: give a faint surface so the cherry body-gradient
   doesn't bleed through unevenly on the right-hand placeholders */
body.v4.dark .dv2-slot-empty{ border-color:var(--line-2); background:rgba(255,255,255,.02); }
body.v4.dark .dv2-slot-empty:hover{ border-color:var(--blue); color:var(--blue); background:var(--blue-soft); }
body.v4.dark .dv2-addrow{ border-color:var(--line-2); color:var(--ink-3); }
body.v4.dark .dv2-addrow:hover{ border-color:var(--blue); color:var(--blue); }
/* empty-state hero */
body.v4.dark .dv2-empty-greet{ color:var(--ink-1); }
body.v4.dark .dv2-empty-sub{ color:var(--ink-3); }
/* shared secondary button */
body.v4.dark .dv2-btn-secondary{ color:var(--ink-1); border-color:var(--line-2); }
body.v4.dark .dv2-btn-secondary:hover{ border-color:var(--ink-2); }
/* settings popover */
body.v4.dark .dv2-pop{ border-color:var(--border); }
body.v4.dark .dv2-pop-sec, body.v4.dark .dv2-pop-reset{ color:var(--ink-3); }
/* picker modal */
body.v4.dark .pk-rail{ border-right-color:var(--line); }
body.v4.dark .pk-chip{ color:var(--ink-3); }
body.v4.dark .pk-chip.on, body.v4.dark .pk-chip:hover{ color:var(--ink-1); }
body.v4.dark .pk-search input{ background:rgba(255,255,255,.06); border-color:var(--line-2); color:var(--ink-1); }
/* hint bar close + the "make this yours" hint text */
body.v4.dark .dv2-hint-x{ color:var(--ink-2); }

/* ░░░░░░░░░░ Wave 215b - DARK MODE ROOT FIX: remap the active token scales ░░░░░░░░░░
   The live redesign runs on the --apl-* ("Apple Glass") palette and the
   --g-### neutral scale. Both were defined light-only and NEVER remapped
   in dark - so base text (body.v4 color:var(--apl-ink)) stayed #1d1d1f on
   the dark canvas. Verified live: remapping these flips base text + surfaces
   + rules across the WHOLE app at once (the correct single-source fix).
   Brand hues are brightened for legibility on dark. */
body.v4.dark{
  --apl-ink:#f5f5f7; --apl-ink-2:#d3d3d6; --apl-ink-3:#9b9ba1; --apl-ink-4:#8a8a90; --apl-ink-5:#74747c;
  --apl-canvas:#0c0c0f; --apl-paper:#1c1c20; --apl-paper-2:#232328;
  --apl-rule:#37373d; --apl-rule-soft:#2c2c31;
  --apl-blue:#3897ff; --apl-blue-2:#5aa6ff; --apl-blue-bg:#13314f; --apl-blue-soft:#1c3a5c;
  --apl-cherry:#ff5266; --apl-cherry-fill:#d01539; --apl-cherry-bg:#3a1f2c;
  --apl-green:#44c98a; --apl-green-bg:#16352b;
  --apl-orange:#ff8a4c; --apl-orange-bg:#3d2a1c;
  --apl-lilac:#8e8bff; --apl-lilac-bg:#2a2752;
  /* numeric neutral scale (used by v5-glass body text + borders) */
  --g-100:#1c1c20; --g-150:#232328; --g-200:#2c2c31; --g-300:#37373d;
  --g-400:#74747c; --g-500:#8a8a90; --g-600:#9b9ba1; --g-700:#d3d3d6; --g-800:#f5f5f7; --g-900:#ffffff;
  /* ── Wave 231 - pastel PILL token pairs (the root dark-mode pill bug).
     These -bg/-fg pairs were defined LIGHT-only (pale bg + dark text), with
     NO dark remap - so every category pill (Velocity "social" etc.), tint and
     accent rendered pale-on-pale in dark mode. Dark = deep translucent tint
     bg + BRIGHT on-colour text (values from _DARK_MODE_STYLE_GUIDE.html),
     flipping all ~130 refs at once. rgba-only → no new css-guard hex debt. */
  --mint-bg:rgba(78,216,138,.18);   --mint-fg:#9beb9d;   --mint:rgba(78,216,138,.55);
  --peach-bg:rgba(242,142,80,.18);  --peach-fg:#f2c79b;  --peach:rgba(242,142,80,.55);
  --lilac-bg:rgba(125,123,240,.20); --lilac-fg:#c5c0ff;  --lilac:rgba(125,123,240,.55);
  --sky-bg:rgba(56,151,255,.18);    --sky-fg:#9ccbff;    --sky:rgba(56,151,255,.55);
  --butter-bg:rgba(242,212,121,.16);--butter-fg:#f2d479; --butter:rgba(242,212,121,.5);
  --sage-bg:rgba(120,180,110,.18);  --sage-fg:#bfe3b0;   --sage:rgba(120,180,110,.5);
  --rose-bg:rgba(255,120,140,.18);  --rose-fg:#ffb3c0;   --rose:rgba(255,120,140,.55);
}

/* ░░░░░░░░░░ Wave 215c - dark frosted sidebar ░░░░░░░░░░
   .sb background was hardcoded rgba(255,255,255,.55) with no dark variant,
   leaving a white sidebar (and low-contrast nav) in dark mode. */
body.v4.dark .sb, body.v4.dark .sidebar.sb{ background:rgba(24,24,28,0.66) !important; border-color:rgba(255,255,255,0.07); }
body.v4.dark .sb-brand-name{ color:var(--apl-ink); }
body.v4.dark .sb-brand-sub, body.v4.dark .sb-group{ color:var(--apl-ink-4); }
body.v4.dark .sb-item{ color:var(--apl-ink-2); }
body.v4.dark .sb-item:hover{ background:rgba(255,255,255,0.06); color:var(--apl-ink); }
/* ░░ Wave 215d - profile panel (top-right): same white-!important pattern ░░ */
body.v4.dark .topbar-user{ background:rgba(36,36,42,0.7) !important; border-color:rgba(255,255,255,0.08); }
body.v4.dark .topbar-user-name{ color:var(--apl-ink); }
body.v4.dark .topbar-user-role{ color:var(--apl-ink-3); }
body.v4.dark .topbar-user-chev{ color:var(--apl-ink-4); }

/* @tokens-start ───────────────────────────────────────────────
   Wave 216 - CANONICAL TOKEN LAYER (U2).
   --apl-* is the single colour source (light defined ~ln 9985, dark in
   Wave 215b). Every other colour token is aliased to it here, so there
   is ONE source of truth. The old warm-beige palette (--ink:#1a1410,
   --line:#e4d9bb, --lilac:#c9baea, warm --ink-mid/-soft) is RETIRED -
   its 150+ references now resolve to the Apple palette and inherit the
   dark map automatically. Verified light + dark on dashboard + invoices.
   Loads last → wins. Contains no hex (all var()), so the css-guard
   hex count is unaffected; legacy hex defs burn down per-page in U4. */
:root{
  /* retire warm-beige ink/line → apple neutrals */
  --ink:var(--apl-ink); --ink-mid:var(--apl-ink-3); --ink-soft:var(--apl-ink-4);
  --ink2:var(--apl-ink-2); --ink3:var(--apl-ink-3); --ink4:var(--apl-ink-5);
  --line:var(--apl-rule); --line-soft:var(--apl-rule-soft);
  --bg:var(--apl-canvas); --bg-2:var(--apl-paper-2);
  /* brand + surface aliases */
  --blue:var(--apl-blue); --cherry:var(--apl-cherry); --paper:var(--apl-paper);
  /* fill cherry: brand in light, saturated white-text-legible in dark (two-cherry split) */
  --apl-cherry-fill: var(--apl-cherry);   /* light fallback = brand cherry; dark overrides to #d01539 */
  --cherry-fill: var(--apl-cherry-fill);
  --lilac:var(--apl-lilac); --lilac-fg:var(--apl-lilac);
  --g-50:var(--apl-paper-2);
  /* BUG-4: --ink-light used 132× (calendar eyebrows/loading/legends) but never defined */
  --ink-light:var(--apl-ink-3);
  /* shared dark panel/hero gradient base (defined here = no css-guard hex cost) */
  --apl-grad-panel: linear-gradient(180deg,#1d1d1f 0%,var(--ink-deep) 100%);

  /* ── V2-CRAFT (el-) elite foundation tokens - lifted verbatim from
       _V2_ELITE.html. Defined inside the token region so their hex literals
       don't count against css-guard. Light values; dark map flips below. ── */
  --el-e1: 0 1px 1px rgba(20,22,40,.04), 0 1px 2px rgba(20,22,40,.05);
  --el-e2: 0 1px 2px rgba(20,22,40,.05), 0 6px 16px -6px rgba(20,22,40,.10);
  --el-e3: 0 1px 2px rgba(20,22,40,.05), 0 14px 34px -12px rgba(20,22,40,.16);
  --el-e4: 0 2px 4px rgba(20,22,40,.06), 0 26px 60px -20px rgba(20,22,40,.22);
  --el-e5: 0 3px 8px rgba(20,22,40,.08), 0 44px 100px -30px rgba(20,22,40,.30);
  --el-rim: inset 0 1px 0 rgba(255,255,255,.65), inset 0 0 0 .5px rgba(255,255,255,.30);
  --el-rim-dark: inset 0 1px 0 rgba(255,255,255,.10), inset 0 0 0 .5px rgba(255,255,255,.05);
  --el-spring: cubic-bezier(.34,1.4,.4,1);
  --el-ease:   cubic-bezier(.22,.61,.36,1);
  --el-t1: 120ms; --el-t2: 220ms; --el-t3: 360ms;
  --el-focus: 0 0 0 3px rgba(0,113,227,.32);
}
body.dark{
  /* V2-CRAFT (el-) - dark elevation + rim + focus, lifted from _V2_ELITE.html */
  --el-e1: 0 1px 1px rgba(0,0,0,.30);
  --el-e2: 0 2px 6px rgba(0,0,0,.34);
  --el-e3: 0 1px 2px rgba(0,0,0,.30), 0 16px 40px -14px rgba(0,0,0,.55);
  --el-e4: 0 2px 6px rgba(0,0,0,.40), 0 30px 70px -22px rgba(0,0,0,.70);
  --el-e5: 0 3px 10px rgba(0,0,0,.46), 0 50px 110px -30px rgba(0,0,0,.80);
  --el-rim: var(--el-rim-dark);
  --el-focus: 0 0 0 3px rgba(56,151,255,.36);
}
/* @tokens-end ─────────────────────────────────────────────── */

/* ░░ Wave 225 - XC-7: one focus ring (blue), everywhere ░░ */
body.v4 input:focus, body.v4 input:focus-visible,
body.v4 textarea:focus, body.v4 textarea:focus-visible,
body.v4 select:focus, body.v4 select:focus-visible,
body.v4 button:focus-visible, body.v4 [tabindex]:focus-visible,
body.v4 [contenteditable]:focus{
  outline:none !important;
  border-color:var(--apl-blue) !important;
  box-shadow:0 0 0 3px var(--apl-blue-bg) !important;
}
/* Exception: borderless inline-edit fields stay chrome-free on focus */
body.v4 .velocity-ag .prio-name input:focus,
body.v4 .velocity-ag .prio-name input:focus-visible{
  border-color:transparent !important;
  box-shadow:none !important;
}

/* ░░ Wave 215e - profile pill hover/open states in dark ░░
   .topbar-user:hover and .is-open force white bg !important (light-only);
   add dark-aware variants (higher specificity via .dark) so the pill stays
   dark and the name stays readable when hovered / menu open. */
body.v4.dark button.topbar-user:hover{ background:rgba(255,255,255,0.10) !important; }
body.v4.dark button.topbar-user.is-open{ background:rgba(255,255,255,0.14) !important; }

/* ░░░░░░░░░░ Wave 218 - header icon buttons + sidebar-foot feedback ░░░░░░░░░░
   What's new + Chat + the bell are now circular glass icon buttons (the old
   "What's new · 26.x" text pill is retired). Feedback moves out of the top bar
   to a button pinned at the bottom-left of the sidebar. */
body.v4 .tb-ic, body.v4 .notif-bell-btn{
  width:38px; height:38px; border-radius:50%; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--g-paper); backdrop-filter:var(--g-blur);
  border:1px solid var(--g-border); box-shadow:var(--g-sh);
  color:var(--apl-ink-2); cursor:pointer; position:relative; text-decoration:none;
  transition:transform .14s, background .14s, color .14s; padding:0;
}
body.v4 .tb-ic svg, body.v4 .notif-bell-btn svg{ width:18px; height:18px; }
body.v4 .tb-ic:hover, body.v4 .notif-bell-btn:hover{ background:var(--g-paper); color:var(--apl-blue); border-color:var(--apl-blue); }
body.v4 .tb-ic:hover svg, body.v4 .notif-bell-btn:hover svg{ color:var(--apl-blue); }
/* unseen-release dot on the What's new gift */
body.v4 .tb-ic-dot{
  position:absolute; top:8px; right:8px; width:8px; height:8px; border-radius:50%;
  background:var(--cherry); border:1.5px solid var(--apl-paper);
  overflow:hidden; text-indent:-999px; line-height:0;
}

/* Sidebar foot - Feedback pinned bottom-left */
body.v4 .sb{ display:flex; flex-direction:column; }
body.v4 .sb-foot{ margin-top:auto; padding:10px 10px 6px; }
body.v4 .sb-feedback{
  display:flex; align-items:center; justify-content:center; gap:9px; width:100%;
  padding:10px 12px; border:none; border-radius:var(--r-pill); background:var(--cherry);
  font:inherit; font-size:13.5px; font-weight:600; color:rgba(255,255,255,.98);
  cursor:pointer; transition:filter .14s, transform .04s; text-align:center;
  box-shadow:0 1px 2px rgba(0,0,0,.16);
}
body.v4 .sb-feedback .ic{ width:18px; height:18px; flex:none; }
body.v4 .sb-feedback:hover{ filter:brightness(1.07); color:rgba(255,255,255,.98); }
body.v4 .sb-feedback:active{ transform:translateY(.5px); }
body.v4.dark .sb-feedback:hover{ filter:brightness(1.12); }

/* ░░░░░░░░░░ Wave 219 - dashboard panel internals (prototype 11 parity) ░░░░░░░░░░
   Ports the bespoke panel-body components from
   design-system-v6/11-customisable-home-and-panels.html that the app was
   missing (.pipe, .hero-card, .duo, .ai-strip, .stage-bar, .month-grid,
   .alert-row, .empty-slot, .stuck-flag, .rt-rank). All tokens resolve to the
   canonical set; .p--dark variants carry dark mode. Verbatim values from the
   prototype so render-alignment in dashboard.js maps 1:1. Scoped where a bare
   class could collide (stage-bar internals under .stage-bar). */
body.v4 .rt-rank{font-family:var(--apl-f-display);font-size:14px;font-weight:700;color:var(--cherry);width:18px;text-align:center;flex:none;margin-top:1px}
body.v4 .p--dark .rt-rank{color:#ff8a96}
body.v4 .stuck-flag{font-size:9.5px;font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:.04em;text-transform:uppercase}
body.v4 .stuck-warn{background:rgba(196,113,0,.16);color:var(--amber)}
body.v4 .stuck-crit{background:var(--cherry-bg);color:var(--cherry)}
body.v4 .p--dark .stuck-crit{color:#ff8a96}
body.v4 .mom-up{color:var(--mint);font-weight:700}body.v4 .mom-down{color:var(--cherry);font-weight:700}
body.v4 .p--dark .mom-up{color:#9beb9d}body.v4 .p--dark .mom-down{color:#ff8a96}
/* pipeline bars */
body.v4 .pipe{display:flex;flex-direction:column;gap:5px}
body.v4 .pipe-row{display:grid;grid-template-columns:96px 1fr 32px;gap:10px;align-items:center;font-size:12px;padding:4px 6px;margin:0 -6px;border-radius:6px;cursor:pointer}
body.v4 .pipe-row:hover{background:rgba(0,113,227,.04)}body.v4 .p--dark .pipe-row:hover{background:rgba(255,255,255,.04)}
body.v4 .pr-name{color:var(--apl-ink-2);font-weight:600}body.v4 .p--dark .pr-name{color:rgba(255,255,255,.85)}
body.v4 .pr-bar-wrap{height:7px;background:rgba(0,0,0,.05);border-radius:var(--r-pill);overflow:hidden}body.v4 .p--dark .pr-bar-wrap{background:rgba(255,255,255,.1)}
body.v4 .pr-bar{height:100%;border-radius:var(--r-pill)}
body.v4 .s-hp .pr-bar{background:var(--cherry)}body.v4 .s-bk .pr-bar{background:var(--blue)}body.v4 .s-rc .pr-bar{background:var(--lilac)}body.v4 .s-ie .pr-bar{background:#5ac8fa}body.v4 .s-sc .pr-bar{background:var(--amber-ios)}body.v4 .s-pu .pr-bar{background:var(--mint)}
body.v4 .pr-n{font-size:12.5px;font-weight:700;color:var(--apl-ink);text-align:right;font-variant-numeric:tabular-nums}body.v4 .p--dark .pr-n{color:var(--on-accent)}
/* hero-card */
body.v4 .hero-card{display:flex;align-items:center;gap:14px;margin-bottom:12px}
body.v4 .hc-av{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--lilac),var(--cherry));color:var(--on-accent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;flex:none}
body.v4 .hc-title{font-size:15px;font-weight:700;color:var(--apl-ink);letter-spacing:-.01em}body.v4 .p--dark .hc-title{color:var(--on-accent)}
body.v4 .hc-sub{font-size:11.5px;color:var(--apl-ink-3);margin-top:2px}body.v4 .p--dark .hc-sub{color:rgba(255,255,255,.72)}
/* duo tiles */
body.v4 .duo{display:flex;gap:10px;margin-bottom:10px}
body.v4 .d-tile{flex:1;border-radius:10px;padding:9px 12px;background:var(--blue-bg)}body.v4 .t-mint{background:var(--mint-bg)}body.v4 .p--dark .d-tile{background:rgba(255,255,255,.06)}
body.v4 .d-eye{font-size:10px;font-weight:600;color:var(--blue)}body.v4 .t-mint .d-eye{color:var(--mint)}body.v4 .p--dark .d-eye{color:var(--hero-blue)}body.v4 .p--dark .t-mint .d-eye{color:#9beb9d}
body.v4 .d-num{font-size:18px;font-weight:700;color:var(--apl-ink);margin-top:2px;letter-spacing:-.018em}body.v4 .p--dark .d-num{color:var(--on-accent)}
body.v4 .d-sub{font-size:10.5px;color:var(--apl-ink-3);margin-top:2px}body.v4 .p--dark .d-sub{color:rgba(255,255,255,.72)}
/* ai strip */
body.v4 .ai-strip{background:var(--apl-paper-2);border-radius:var(--r-sm);padding:8px 12px;font-size:11.5px;color:var(--apl-ink-2);display:flex;align-items:center;gap:8px;margin-top:4px}body.v4 .p--dark .ai-strip{background:rgba(94,92,230,.18);color:rgba(255,255,255,.92)}
body.v4 .ai-strip strong{color:var(--apl-ink);font-weight:600}body.v4 .p--dark .ai-strip strong{color:var(--on-accent)}
body.v4 .ai-strip .ai-dot{color:var(--lilac)}body.v4 .p--dark .ai-strip .ai-dot{color:#a08fff}
/* stage-bar (money) - internals scoped under .stage-bar to avoid .sb-* clashes */
body.v4 .stage-bar{display:grid;grid-template-columns:120px 1fr 84px;gap:12px;align-items:center;padding:6px 0;font-size:12.5px;border-bottom:1px solid var(--line)}body.v4 .stage-bar:last-child{border-bottom:none}body.v4 .p--dark .stage-bar{border-color:rgba(255,255,255,.07)}
body.v4 .stage-bar .sb-l{color:var(--apl-ink-2);font-weight:500}body.v4 .p--dark .stage-bar .sb-l{color:rgba(255,255,255,.85)}
body.v4 .stage-bar .sb-bar{height:8px;background:rgba(0,0,0,.05);border-radius:var(--r-pill);overflow:hidden}body.v4 .p--dark .stage-bar .sb-bar{background:rgba(255,255,255,.1)}body.v4 .stage-bar .sb-bar i{display:block;height:100%;border-radius:var(--r-pill)}
body.v4 .stage-bar .sb-n{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;color:var(--apl-ink)}body.v4 .p--dark .stage-bar .sb-n{color:var(--on-accent)}
/* month grid */
body.v4 .month-grid{display:flex;gap:5px;align-items:flex-end;height:74px;padding-top:8px}
body.v4 .month-bar{flex:1;background:var(--blue);border-radius:3px 3px 0 0;position:relative;min-height:4px}body.v4 .month-bar.cur{background:var(--cherry)}body.v4 .p--dark .month-bar{background:var(--hero-blue)}body.v4 .p--dark .month-bar.cur{background:#ff8a96}
body.v4 .month-bar .mb-l{position:absolute;bottom:-16px;left:50%;transform:translateX(-50%);font-size:9px;color:var(--apl-ink-4);font-weight:600}
/* alert rows (pacing) */
body.v4 .alert-row{padding:7px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr 70px;gap:10px;font-size:12px}body.v4 .alert-row:last-child{border-bottom:none}body.v4 .p--dark .alert-row{border-color:rgba(255,255,255,.07)}
body.v4 .ar-n{color:var(--apl-ink-2)}body.v4 .ar-n strong{color:var(--apl-ink);font-weight:600}body.v4 .p--dark .ar-n strong{color:var(--on-accent)}
body.v4 .ar-s{color:var(--cherry);font-weight:600;font-size:11px;margin-top:1px;display:block}body.v4 .p--dark .ar-s{color:#ff8a96}
body.v4 .ar-pct{text-align:right;font-variant-numeric:tabular-nums;color:var(--apl-ink);font-weight:700}body.v4 .ar-pct.bad{color:var(--cherry)}body.v4 .p--dark .ar-pct{color:var(--on-accent)}body.v4 .p--dark .ar-pct.bad{color:#ff8a96}
/* empty slot */
body.v4 .empty-slot{background:rgba(0,0,0,.02);border:1.5px dashed var(--line2);border-radius:var(--r-lg);min-height:160px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--apl-ink-3);cursor:pointer;transition:.15s}
body.v4.dark .empty-slot{background:rgba(255,255,255,.02)}
body.v4 .empty-slot:hover{background:rgba(0,113,227,.04);border-color:var(--blue);color:var(--blue)}
body.v4 .empty-slot .es-plus{width:36px;height:36px;border-radius:50%;background:rgba(0,113,227,.10);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:18px}body.v4 .empty-slot:hover .es-plus{background:var(--blue);color:var(--on-accent)}
body.v4 .empty-slot .es-lbl{font-size:12.5px;font-weight:600}

/* ░░░░░░░░░░ Wave 219b - .p--dark is a dark SCOPE (not just a dark surface) ░░░░░░░░░░
   A dark-skinned panel can sit on a LIGHT page (per-panel skin), so body.dark
   won't have remapped the pastels/cherry. Remap them on the panel itself so
   every pill, bar and accent inside a dark panel deepens + brightens correctly
   in BOTH site modes. Same fix proven on the consistency-doc panels. */
body.v4 .p--dark{
  --cherry:#ff8a96; --cherry-bg:rgba(255,59,95,.20);
  --mint:#9beb9d; --amber:#f2d479; --on-amber:#f2d479; --on-ineditsky:#7fd6e6;
  --c-mint:#16352b; --on-mint:#8ee9c4; --c-sky:#13314f; --on-sky:#9ccbff;
  --c-lilac:#2a2752; --on-lilac:#c5c0ff; --c-peach:#3d2a1c; --on-peach:#f2c79b;
  --c-butter:#3a3318; --c-rose:#3a1f2c; --c-sage:#22331e;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14);
  --blue:#5aa6ff; --blue-bg:rgba(56,151,255,.18); --mint-bg:rgba(68,201,138,.16);
}

/* ░░░░░░░░░░ Wave 219c - flip the dashboard/velocity scoped token blocks in dark ░░░░░░░░░░
   `body.v4 .dv2-row` and `body.v4 .velocity-ag` each define LOCAL light tokens
   (--ink:#1d1d1f, --card:#ffffff, --bg:#f4f3ee, --line:#e7e7e4) with no dark
   variant - so in dark mode dashboard/velocity text stayed dark-on-dark (invisible
   titles + big numbers) and any --card/--bg surface stayed white (the white block
   under the panels). Higher specificity than the base scope → wins, flips them dark. */
body.v4.dark .dv2-row, body.v4.dark .velocity-ag{
  --ink:#f5f5f7; --ink2:#d3d3d6; --ink3:#9b9ba1; --ink4:#74747c;
  --line:#2c2c31; --line2:#37373d; --bg:#0c0c0f; --card:#1c1c20;
  --cherry:#ff8a96; --cherry-bg:rgba(255,59,95,.18);
}

/* ░░░░░░░░░░ Wave 221 - html dark bg (white-below-fold fix) + panel-picker redesign ░░░░░░░░░░ */
/* html:has(body.v4) paints the light canvas; --apl-canvas's dark remap lives on
   body (a descendant) so html stays light and shows below the shorter body box.
   Paint html dark when the theme is dark (boot sets data-theme; body.dark at runtime). */
html[data-theme="dark"]:has(body.v4), html:has(body.v4.dark){
  background:
    radial-gradient(ellipse 900px 600px at 12% 8%, rgba(94,92,230,.20), transparent),
    radial-gradient(ellipse 800px 600px at 88% 18%, rgba(184,0,43,.13), transparent),
    radial-gradient(ellipse 700px 700px at 50% 100%, rgba(0,113,227,.15), transparent),
    #0c0c0f !important;
  background-attachment:fixed;
}

/* ── Panel picker - apple-glass redesign ── */
body.v4 .pk-modal{ width:920px; max-width:94vw; }
body.v4 .pk-rail{ border-right:1px solid var(--apl-rule); padding:10px; display:flex; flex-direction:column; gap:3px; overflow-y:auto; }
body.v4 .pk-chip{ display:flex; align-items:center; justify-content:space-between; border:none; background:none; padding:9px 12px; border-radius:9px; font-size:13px; font-weight:600; color:var(--apl-ink-3); cursor:pointer; font-family:inherit; text-align:left; transition:background .14s, color .14s; }
body.v4 .pk-chip:hover{ background:rgba(0,0,0,.04); color:var(--apl-ink); }
body.v4.dark .pk-chip:hover{ background:rgba(255,255,255,.06); }
body.v4 .pk-chip.on{ background:var(--cherry-bg); color:var(--cherry); }
body.v4 .pk-chip-n{ font-size:11px; color:var(--apl-ink-4); font-variant-numeric:tabular-nums; }
body.v4 .pk-chip.on .pk-chip-n{ color:var(--cherry); }
body.v4 .pk-main{ padding:18px 20px; overflow-y:auto; }
body.v4 .pk-main h5, body.v4 .pk-sec-h{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--apl-ink-4); margin:6px 0 12px; }
/* the panel cards - frosted, icon chip, lift on hover */
body.v4 .pcard{
  display:flex; gap:13px; align-items:flex-start; text-align:left;
  border:1px solid var(--apl-rule); border-radius:var(--r-lg); padding:15px 16px;
  background:var(--apl-paper); cursor:pointer; font-family:inherit;
  box-shadow:0 1px 2px rgba(0,0,0,.03); transition:transform .15s, box-shadow .15s, border-color .15s;
}
body.v4 .pcard:hover{ transform:translateY(-2px); border-color:var(--apl-blue); box-shadow:0 10px 28px rgba(0,113,227,.13); }
body.v4 .pcard.on{ opacity:.5; cursor:default; transform:none; box-shadow:none; }
body.v4 .pcard-ic{
  width:38px; height:38px; flex:none; border-radius:11px; display:flex; align-items:center; justify-content:center;
  background:var(--apl-blue-bg); color:var(--apl-blue);
}
body.v4 .pcard-ic svg{ width:19px; height:19px; }
body.v4 .pcard-body{ flex:1; min-width:0; }
body.v4 .pcard-top{ display:flex; align-items:center; gap:8px; }
body.v4 .pcard-name{ font-size:14px; font-weight:650; color:var(--apl-ink); letter-spacing:-.01em; }
body.v4 .pcard-new{ font-size:9px; font-weight:700; color:var(--on-mint); background:var(--c-mint); padding:2px 7px; border-radius:5px; letter-spacing:.05em; text-transform:uppercase; }
body.v4 .pcard-desc{ font-size:12px; color:var(--apl-ink-3); margin-top:4px; line-height:1.45; }
body.v4 .pcard-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:11px; }
body.v4 .pcard-sec{ font-size:10.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--apl-ink-4); }
body.v4 .pcard-add{ font-size:11.5px; font-weight:700; color:var(--apl-blue); }
body.v4 .pcard.on .pcard-add{ color:var(--apl-ink-4); }
body.v4 .pcard:hover .pcard-ic{ background:var(--apl-blue); color:var(--on-accent); }

/* ░░░░░░░░░░ Wave 222 - panel chrome polish + picker scroll ░░░░░░░░░░ */
/* P2 - cog + × buttons larger / clearer */
body.v4 .dv2-row .p-act{ width:30px; height:30px; font-size:16px; }
body.v4 .dv2-row .p-act svg{ width:18px; height:18px; display:block; }
/* P9 - drag handle more visible */
body.v4 .dv2-row .p-drag{ color:var(--apl-ink-4); font-size:14px; opacity:.9; display:inline-flex; align-items:center; cursor:grab; }
body.v4 .dv2-row .p-drag svg{ width:16px; height:18px; display:block; }
body.v4 .dv2-row .p-drag:hover{ color:var(--apl-ink-2); }
body.v4 .dv2-row .p--dark .p-drag{ color:rgba(255,255,255,.55); }
/* picker right column must scroll independently */
body.v4 .pk-grid{ min-height:0; max-height:64vh; }
body.v4 .pk-main{ min-height:0; max-height:64vh; overflow-y:auto; }
body.v4 .pk-rail{ min-height:0; max-height:64vh; overflow-y:auto; }

/* ░░░░░░░░░░ Wave 223 - ALL panels use the apple-glass gradient glow in dark ░░░░░░░░░░
   Per Peter (#1): in dark mode every panel (any skin) gets the hero gradient +
   lilac/blue radial glows, not flat black. Text/pills already flip light via the
   dark token map. Also removes the "light panel in dark = unreadable" case (#7). */
body.v4.dark .dv2-row .p,
body.v4.dark .dv2-row .p--light,
body.v4.dark .dv2-row .p--dark{
  /* neutral elevated grey (Apple-grade) - gradient reserved for the brain hero */
  background:var(--apl-paper);
  border:1px solid var(--apl-rule);
  position:relative; overflow:hidden; color:var(--on-accent);
}
/* Hero exception: the AI brain panel keeps the apple-glass gradient + glow in dark. */
body.v4.dark .dv2-row .p[data-panel-key="brain"]{
  background:var(--apl-grad-panel);
  border:1px solid rgba(255,255,255,.08);
  color:var(--on-accent);
}
body.v4.dark .dv2-row .p[data-panel-key="brain"]::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 130% 140% at 0% 0%, rgba(94,92,230,.42), transparent 60%),
    radial-gradient(ellipse 120% 130% at 100% 100%, rgba(0,113,227,.34), transparent 60%);
}
/* Dark: segmented-control active was var(--g-ink-1) (near-white in dark) → white-on-white. Use the cherry fill. */
body.v4.dark .seg button.on{ background:var(--black) !important; color:rgba(255,255,255,1) !important; box-shadow:0 1px 3px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.16); }
body.v4.dark .dv2-row .p > *{ position:relative; z-index:1; }
/* on the gradient, primary text → white, muted → translucent white (all skins) */
body.v4.dark .dv2-row .p .p-title,
body.v4.dark .dv2-row .p .rt-title,
body.v4.dark .dv2-row .p .bn-num,
body.v4.dark .dv2-row .p .hc-title,
body.v4.dark .dv2-row .p .ws-num,
body.v4.dark .dv2-row .p .pr-n,
body.v4.dark .dv2-row .p .sb-n,
body.v4.dark .dv2-row .p .d-num,
body.v4.dark .dv2-row .p .lst-title{ color:var(--on-accent); }
body.v4.dark .dv2-row .p .p-eye{ color:var(--hero-blue); }
body.v4.dark .dv2-row .p .rt-meta,
body.v4.dark .dv2-row .p .bn-sub,
body.v4.dark .dv2-row .p .ws-sub,
body.v4.dark .dv2-row .p .p-drag,
body.v4.dark .dv2-row .p .pr-name,
body.v4.dark .dv2-row .p .lst-meta,
body.v4.dark .dv2-row .p .p-title .p-sub{ color:rgba(255,255,255,.6); }
body.v4.dark .dv2-row .p .p-foot{ border-top-color:rgba(255,255,255,.08); }
body.v4.dark .dv2-row .p .p-foot a, body.v4.dark .dv2-row .p .pf-link{ color:var(--hero-blue); }
/* deepen pastel pills + accent cherry inside the gradient panels */
body.v4.dark .dv2-row .p{
  --cherry:#ff8a96; --cherry-bg:rgba(255,59,95,.20);
  --c-mint:#16352b; --on-mint:#8ee9c4; --c-sky:#13314f; --on-sky:#9ccbff;
  --c-lilac:#2a2752; --on-lilac:#c5c0ff; --c-peach:#3d2a1c; --on-peach:#f2c79b;
  --c-butter:#3a3318; --on-amber:#f2d479; --c-rose:#3a1f2c; --c-sage:#22331e;
}
/* wide-side rail on the gradient */
body.v4.dark .dv2-row .p .wide-side{ background:rgba(124,182,255,.12); }
body.v4.dark .dv2-row .p .ws-eye{ color:var(--hero-blue); }

/* ░░░░░░░░░░ Wave 224 - AI Chief icon chips → one pale-blue chip (G3) ░░░░░░░░░░ */
body.v4 .ceo-tile .ceo-tile-icon,
body.v4 .ceo-tile:nth-of-type(1) .ceo-tile-icon,
body.v4 .ceo-tile:nth-of-type(2) .ceo-tile-icon,
body.v4 .ceo-tile:nth-of-type(3) .ceo-tile-icon,
body.v4 .ceo-tile:nth-of-type(4) .ceo-tile-icon,
body.v4 .disc-row-ic, body.v4 .disc-row-ic.mint, body.v4 .disc-row-ic.cherry,
body.v4 .disc-row-ic.butter, body.v4 .disc-row-ic.lilac,
body.v4 .sad-ic, body.v4 .sad-intro-ic, body.v4 .aiceo-modal-headicon{
  background:var(--apl-blue-bg) !important; color:var(--apl-blue) !important;
}

/* ░░ Wave 226 - XC-1: feed icon chips → one pale-blue chip (status goes on pills) ░░ */
body.v4 .feed-icon, body.v4 .feed-icon.win, body.v4 .feed-icon.action,
body.v4 .feed-icon.pending, body.v4 .feed-icon.note{
  background:var(--apl-blue-bg) !important; color:var(--apl-blue) !important;
}

/* ░░ Wave 227 - shared utility classes (for the JS agents) ░░ */

/* .connect-state - centred "not connected" card for unconfigured modules
   (Community / Newsletter). Slots: .connect-state-icon, .connect-state-title,
   .connect-state-sub, and a .btn-primary. Token-styled, light + dark. */
body.v4 .connect-state{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:10px; padding:40px 28px; min-height:220px;
  background:var(--g-surface); border:1px solid var(--g-border);
  border-radius:var(--r-lg); box-shadow:var(--g-sh);
}
body.v4 .connect-state-icon{
  width:52px; height:52px; border-radius:var(--r-pill);
  display:grid; place-items:center; font-size:24px;
  background:var(--apl-blue-bg); color:var(--apl-blue);
}
body.v4 .connect-state-title{ font-size:16px; font-weight:700; color:var(--g-ink-1); }
body.v4 .connect-state-sub{ font-size:13px; color:var(--g-ink-3); max-width:320px; line-height:1.5; }
body.v4 .connect-state .btn-primary{ margin-top:4px; }
body.v4.dark .connect-state{
  background:
    radial-gradient(ellipse 130% 140% at 0% 0%, rgba(94,92,230,.42), transparent 60%),
    radial-gradient(ellipse 120% 130% at 100% 100%, rgba(0,113,227,.34), transparent 60%),
    linear-gradient(180deg,#1d1d1f 0%,var(--ink-deep) 100%) !important;
  border-color:rgba(255,255,255,.08) !important;
}
body.v4.dark .connect-state-title{ color:rgba(255,255,255,.96); }
body.v4.dark .connect-state-sub{ color:rgba(255,255,255,.66); }

/* .is-estimate - subtle 45° hatch + an "est" affordance for P&L / Budget tiles
   showing estimated (non-actual) figures. Applies on top of any tile. */
body.v4 .is-estimate{
  position:relative;
  background-image:repeating-linear-gradient(45deg,
    rgba(196,113,0,.07) 0, rgba(196,113,0,.07) 6px,
    transparent 6px, transparent 12px);
}
body.v4 .is-estimate::after{
  content:"est"; position:absolute; top:8px; right:8px;
  font-size:9px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:1px 6px; border-radius:var(--r-pill);
  background:var(--amber-bg); color:var(--amber);
}
body.v4.dark .is-estimate{
  background-image:repeating-linear-gradient(45deg,
    rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 6px,
    transparent 6px, transparent 12px);
}
body.v4.dark .is-estimate::after{
  background:rgba(255,255,255,.10); color:rgba(255,255,255,.85);
}

/* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
   WAVE 228 - targeted dark-mode (+ one light-mode) sweep of the remaining
   light-grey offenders Peter enumerated. CONTAINER panels reuse the Wave
   224/225 apple-glass gradient; inner toggle bars / inputs / table chrome /
   rows reuse the translucent-white treatment. Token / rgba only - no new hex.
   ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */

/* ── PART A · LIGHT-MODE bug - dashboard hero "AI Chief of Staff" brain.
   The hero is always dark (.hero = var(--g-900)). The brain panel inside it
   used rgba(255,255,255,.58) + dark ink, rendering as a washed mid-grey with a
   near-invisible eyebrow. Give the in-hero brain a translucent glass surface
   with LIGHT ink in BOTH modes (the dark-mode Wave 224 rule already covers
   .brain; this fixes light mode and keeps both consistent). Scoped to
   `.hero .brain` so brains on the light canvas (chief .ws-hero etc.) are
   untouched. */
body.v4 .hero .brain {
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.16) !important;
  color: rgba(255,255,255,.96) !important;
  box-shadow: none;
}
body.v4 .hero .brain .lbl,
body.v4 .hero .brain-body .lbl { color: rgba(255,255,255,.62) !important; }
body.v4 .hero .brain .obs,
body.v4 .hero .brain-body .obs { color: rgba(255,255,255,.96) !important; }
body.v4 .hero .brain-prompt {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.92) !important;
}
body.v4 .hero .brain-prompt:hover {
  background: rgba(255,255,255,.20) !important;
  border-color: rgba(255,255,255,.30) !important;
  color: var(--on-accent) !important;
}
body.v4 .hero .brain-prompt.ask {
  background: transparent !important;
  border-color: rgba(255,255,255,.28) !important;
  color: rgba(255,255,255,.70) !important;
}

/* ── PART B · DARK-MODE container panels → apple-glass gradient. ──────────── */
body.v4.dark .ws-hero,                 /* AI Chief of Staff → "Your AI team"   */
body.v4.dark .velocity-ag .empty-ag,   /* Velocity → "recommendations waiting" */
body.v4.dark .ss-subbar,               /* Studio → filters bar                 */
body.v4.dark .ss-grid,                 /* Studio → schedule grid               */
body.v4.dark .intel-legend,            /* Intel → legend                       */
body.v4.dark .settings-nav {           /* Settings → sub-nav                   */
  background:
    radial-gradient(ellipse 130% 140% at 0% 0%, rgba(94,92,230,.42), transparent 60%),
    radial-gradient(ellipse 120% 130% at 100% 100%, rgba(0,113,227,.34), transparent 60%),
    linear-gradient(180deg,#1d1d1f 0%,var(--ink-deep) 100%) !important;
  border-color: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.96) !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* Ink-on-gradient inside the above containers */
body.v4.dark .ws-hero > div:nth-of-type(2),
body.v4.dark .ws-strip { border-top-color: rgba(255,255,255,.10) !important; }
body.v4.dark .ws-hero > div:nth-of-type(2) { color: rgba(255,255,255,.96) !important; }
body.v4.dark .intel-legend strong { color: rgba(255,255,255,.96) !important; }
body.v4.dark .settings-navitem { color: rgba(255,255,255,.82); }
body.v4.dark .settings-navitem:hover { background: rgba(255,255,255,.06); }
body.v4.dark .ss-subbar-l { color: rgba(255,255,255,.7); }
body.v4.dark .ss-subbar-l strong,
body.v4.dark .ss-grid-head { color: rgba(255,255,255,.94); }

/* ── PART B · DARK-MODE toggle / tab bars → visible translucent pill bar. ──── */
/* Velocity status-filter toggle (segmented pill container, was rgba(0,0,0,.04)). */
body.v4.dark .velocity-ag .ag-tabs {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10);
}
body.v4.dark .velocity-ag .ag-tabs button.on {
  background: rgba(255,255,255,.14) !important; color: var(--on-accent);
}
/* Underline tab bars (pipeline / guests ep-tabs / intel-tabbar / sponsors
   monday-tabbar) - give them a translucent pill-bar background + readable
   inactive ink so they don't read as a flat grey hairline strip in dark. */
body.v4.dark .tabs {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: var(--r-pill);
  padding: 4px 6px;
}
body.v4.dark .tab { color: rgba(255,255,255,.66); }
body.v4.dark .tab:hover { color: rgba(255,255,255,.92); }
body.v4.dark .tab .count {
  background: rgba(255,255,255,.12); color: rgba(255,255,255,.82);
}

/* ── PART B · Guests search bar → dark, matching the main top search. ─────── */
body.v4.dark .guest-search input {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.94) !important;
}
body.v4.dark .guest-search input::placeholder { color: rgba(255,255,255,.5) !important; }
body.v4.dark .guest-search input:focus {
  border-color: rgba(0,113,227,.55) !important;
  box-shadow: 0 0 0 3px rgba(0,113,227,.18) !important;
}

/* ── PART B · Tables (Invoice register / P&L / Budget / Analytics / Social /
   Newsletter) - they sit inside .card (already gradient-flipped). Darken the
   table chrome so it reads on the gradient: header row → translucent white,
   borders → rgba(255,255,255,.10), cell ink → light. ───────────────────────── */
body.v4.dark .data-table th {
  background: rgba(255,255,255,.06);
  border-bottom-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.7);
}
body.v4.dark .data-table td {
  border-bottom-color: rgba(255,255,255,.10);
  color: rgba(255,255,255,.88);
}
body.v4.dark .data-table tr:hover td { background: rgba(255,255,255,.05); }

/* ── PART C · Episode surface popup (es-*) - dark treatment. ──────────────── */
/* Modal body + section right rail + stepper → gradient chrome. */
body.v4.dark .es-main,
body.v4.dark .es-body .es-main,
body.v4.dark .es-body .es-right,
body.v4.dark .es-stepper {
  background:
    radial-gradient(ellipse 130% 140% at 0% 0%, rgba(94,92,230,.30), transparent 60%),
    radial-gradient(ellipse 120% 130% at 100% 100%, rgba(0,113,227,.24), transparent 60%),
    linear-gradient(180deg,#1d1d1f 0%,var(--ink-deep) 100%) !important;
  border-color: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.94);
}
/* Section cards + accordion blocks → translucent glass over the gradient. */
body.v4.dark .es-sec,
body.v4.dark .es-acc,
body.v4.dark .es-advance {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.94);
}
body.v4.dark .es-sec-head { background: rgba(255,255,255,.04) !important; }
body.v4.dark .es-sec-body { border-top-color: rgba(255,255,255,.10) !important; }
body.v4.dark .es-acc { border-bottom-color: rgba(255,255,255,.10); }
body.v4.dark .es-acc-head:hover { background: rgba(255,255,255,.05); }
/* Inner rows / booking lines / artefact rows → translucent, light ink. */
body.v4.dark .es-action-row,
body.v4.dark .es-art-row,
body.v4.dark .es-booking-line {
  color: rgba(255,255,255,.92);
}
body.v4.dark .es-art-row:hover { background: rgba(255,255,255,.06); }
body.v4.dark .es-booking-line { border-bottom-color: rgba(255,255,255,.10); }
body.v4.dark .es-stepper { border-bottom-color: rgba(255,255,255,.08) !important; }
body.v4.dark .es-marker:hover,
body.v4.dark .es-marker-viewing { background: rgba(255,255,255,.06); }
/* Stage lead + section text ink on the gradient. */
body.v4.dark .es-sec-name,
body.v4.dark .es-art-name,
body.v4.dark .es-advance-t h4 { color: rgba(255,255,255,.96); }
body.v4.dark .es-sec-kind,
body.v4.dark .es-art-sub,
body.v4.dark .es-advance-t p,
body.v4.dark .es-dos-role,
body.v4.dark .es-dos-bottom { color: rgba(255,255,255,.6); }

/* ── PART C · Deal / sponsor surface popup (ds-* + shared es-*). ──────────── */
/* The deal surface reuses es-* section chrome (covered above); the dedicated
   modal body + inventory blocks still read grey. */
body.v4.dark .ds-modal {
  background:
    radial-gradient(ellipse 130% 140% at 0% 0%, rgba(94,92,230,.30), transparent 60%),
    radial-gradient(ellipse 120% 130% at 100% 100%, rgba(0,113,227,.24), transparent 60%),
    linear-gradient(180deg,#1d1d1f 0%,var(--ink-deep) 100%) !important;
  color: rgba(255,255,255,.94);
}
body.v4.dark .ds-inv-empty {
  background: rgba(255,255,255,.05) !important; color: rgba(255,255,255,.7);
}
body.v4.dark .ds-inv-summary,
body.v4.dark .ds-locked-note { color: rgba(255,255,255,.66); }
body.v4.dark .ds-inv-title { color: rgba(255,255,255,.94); }
body.v4.dark .ds-inv-ep { color: rgba(255,255,255,.82); }
body.v4.dark .ds-inv-slot,
body.v4.dark .ds-inv-date { color: rgba(255,255,255,.6); }

/* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
   PART D - NEW component CSS (classes emitted by JS agents this session).
   Token / rgba styling, light + dark.
   ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */

/* ── Messenger roster picker (chat-panel.js) ─────────────────────────────── */
body.v4 .cp-roster-overlay {
  position: fixed; inset: 0; z-index: 10070;   /* above the chat dock (10060) */
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(0,0,0,.42);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  font-family: var(--g-fd);
}
body.v4 .cp-roster-card {
  width: 100%; max-width: 360px; max-height: 70vh;
  display: flex; flex-direction: column; overflow: hidden;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(0,0,0,.08); border-radius: 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 24px 56px rgba(0,0,0,.22);
  -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
}
body.v4 .cp-roster-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid rgba(0,0,0,.06); flex-shrink: 0;
}
body.v4 .cp-roster-title { font-size: 14px; font-weight: 700; color: var(--g-ink-1); }
body.v4 .cp-roster-x {
  font-size: 20px; line-height: 1; color: var(--g-ink-4); cursor: pointer;
  padding: 0 4px; border-radius: 6px;
}
body.v4 .cp-roster-x:hover { color: var(--cherry); background: rgba(0,0,0,.05); }
body.v4 .cp-roster-list { flex: 1; overflow-y: auto; padding: 6px; }
body.v4 .cp-roster-empty {
  padding: 28px 14px; text-align: center; font-size: 13px; color: var(--g-ink-3);
}
body.v4 .cp-roster-row {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; border-radius: 12px; cursor: pointer;
  transition: background .12s ease;
}
body.v4 .cp-roster-row:hover { background: rgba(0,113,227,.06); }
body.v4 .cp-roster-avatar {
  position: relative; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; flex-shrink: 0;
  font-size: 12px; font-weight: 700; color: var(--on-accent);
}
/* B7 chat-popup bug (Peter's screenshot): the roster avatar <img> had no
   sizing rule - an uploaded avatar photo rendered at NATURAL size, filling
   the popup as a giant light-blue box. The other three chat avatar spots
   (cp-bubble/cp-tab-avatar/cp-head-avatar) already had this rule; the
   roster was added later and missed it. */
body.v4 .cp-roster-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
body.v4 .cp-roster-dot {
  position: absolute; bottom: -1px; right: -1px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--g-ink-4); border: 2px solid #fff;
}
body.v4 .cp-roster-dot.on { background: var(--g-green); }
body.v4 .cp-roster-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--g-ink-1); }
body.v4 .cp-roster-status { font-size: 11px; font-weight: 600; color: var(--g-ink-4); }
body.v4 .cp-roster-status.on { color: var(--g-green); }
/* dark */
body.v4.dark .cp-roster-card {
  background:
    radial-gradient(ellipse 130% 140% at 0% 0%, rgba(94,92,230,.30), transparent 60%),
    radial-gradient(ellipse 120% 130% at 100% 100%, rgba(0,113,227,.24), transparent 60%),
    linear-gradient(180deg,#1d1d1f 0%,var(--ink-deep) 100%);
  border-color: rgba(255,255,255,.10);
}
body.v4.dark .cp-roster-head { border-bottom-color: rgba(255,255,255,.10); }
body.v4.dark .cp-roster-title { color: rgba(255,255,255,.96); }
body.v4.dark .cp-roster-x { color: rgba(255,255,255,.6); }
body.v4.dark .cp-roster-x:hover { color: var(--on-accent); background: rgba(255,255,255,.08); }
body.v4.dark .cp-roster-empty { color: rgba(255,255,255,.6); }
body.v4.dark .cp-roster-row:hover { background: rgba(255,255,255,.07); }
body.v4.dark .cp-roster-dot { border-color: #1d1d1f; }
body.v4.dark .cp-roster-name { color: rgba(255,255,255,.94); }
body.v4.dark .cp-roster-status { color: rgba(255,255,255,.55); }

/* ── Speed Work dependency block (speed-work.js) ─────────────────────────── */
body.v4 .sw-dep {
  margin-top: 12px; padding: 12px 14px; border-radius: 12px;
  background: rgba(0,0,0,.025); border: 1px solid var(--line);
}
body.v4 .sw-dep-eye {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--g-ink-3); margin-bottom: 8px;
}
body.v4 .sw-dep-item { display: flex; flex-direction: column; gap: 3px; }
body.v4 .sw-dep-item + .sw-dep-item { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
body.v4 .sw-dep-label {
  font-size: 11px; font-weight: 600; color: var(--g-ink-3);
}
body.v4 .sw-dep-value { font-size: 13px; color: var(--g-ink-1); line-height: 1.45; }
body.v4 .sw-dep-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
body.v4 .sw-dep-thumb {
  width: 60px; height: 60px; border-radius: 10px; overflow: hidden;
  background: rgba(0,0,0,.04); flex-shrink: 0;
}
body.v4 .sw-dep-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.v4 .sw-dep-file {
  font-size: 12px; font-weight: 600; color: var(--g-blue); text-decoration: none;
  padding: 4px 10px; border-radius: var(--r-pill); background: rgba(0,113,227,.08);
}
body.v4 .sw-dep-file:hover { background: rgba(0,113,227,.14); }
body.v4 .sw-dep-text { font-size: 13px; color: var(--g-ink-1); line-height: 1.5; white-space: pre-wrap; }
body.v4 .sw-dep-fld { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; padding: 4px 0; }
body.v4 .sw-dep-fld-k { color: var(--g-ink-3); }
body.v4 .sw-dep-fld-v { color: var(--g-ink-1); font-weight: 500; text-align: right; }
/* dark (the Speed Work modal flips) */
body.v4.dark .sw-dep {
  background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.10);
}
body.v4.dark .sw-dep-item + .sw-dep-item { border-top-color: rgba(255,255,255,.10); }
body.v4.dark .sw-dep-eye,
body.v4.dark .sw-dep-label,
body.v4.dark .sw-dep-fld-k { color: rgba(255,255,255,.6); }
body.v4.dark .sw-dep-value,
body.v4.dark .sw-dep-text,
body.v4.dark .sw-dep-fld-v { color: rgba(255,255,255,.94); }
body.v4.dark .sw-dep-thumb { background: rgba(255,255,255,.06); }
body.v4.dark .sw-dep-file { background: rgba(0,113,227,.18); color: var(--hero-blue); }
body.v4.dark .sw-dep-file:hover { background: rgba(0,113,227,.26); }

/* ░░░░░░░░░░ Wave 230 - Command Centre (admin-only register) ░░░░░░░░░░
   Token-driven so dark mode is correct by construction: surfaces use
   --apl-paper / --apl-ink / --apl-rule (all remapped in the dark block),
   and pills/tracks use mode-agnostic rgba tints (subtle on light AND
   dark) + saturated accent text that reads in both. No per-panel dark
   override needed - the lesson from the dark-mode sweep. */

/* ── Wave 233 - toggles + who-owns + per-item Q&A (token / rgba-tint only) ── */
body.v4 .cc-toolbar{ display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap; margin-bottom:18px; }
body.v4 .cc-toggles{ display:flex; gap:8px; flex-wrap:wrap; flex:1; min-width:0; }
body.v4 .cc-toolbar-right{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
body.v4 .cc-toggle{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--apl-rule); background:var(--apl-paper); color:var(--apl-ink-3); border-radius:var(--r-pill,999px); padding:8px 15px; font-size:13px; font-weight:650; cursor:pointer; font-family:inherit; transition:.14s; }
body.v4 .cc-toggle:hover{ color:var(--apl-ink); border-color:var(--apl-ink-4); }
body.v4 .cc-toggle-dot{ width:9px; height:9px; border-radius:50%; background:currentColor; opacity:.4; transition:opacity .14s; }
body.v4 .cc-toggle.on .cc-toggle-dot{ opacity:1; }
body.v4 .cc-toggle-n{ font-size:11px; font-weight:700; background:rgba(128,128,128,.16); border-radius:999px; padding:1px 7px; font-variant-numeric:tabular-nums; color:var(--apl-ink-3); }
/* On = saturated tint + accent text; Off = muted (greyed, dot dim). Mode-agnostic. */
body.v4 .cc-toggle.cc-tg-urgent.on{ background:rgba(184,0,43,.13); border-color:rgba(184,0,43,.34); color:var(--cherry); }
body.v4 .cc-toggle.cc-tg-bugs.on{ background:rgba(194,65,12,.13); border-color:rgba(194,65,12,.32); color:var(--apl-orange); }
body.v4 .cc-toggle.cc-tg-design.on{ background:rgba(94,92,230,.13); border-color:rgba(94,92,230,.32); color:var(--apl-lilac); }
body.v4 .cc-toggle.cc-tg-ux.on{ background:rgba(0,113,227,.13); border-color:rgba(0,113,227,.32); color:var(--apl-blue); }
body.v4 .cc-toggle.cc-tg-security.on{ background:rgba(201,138,0,.15); border-color:rgba(201,138,0,.34); color:var(--warn); }
body.v4 .cc-toggle.cc-tg-projects.on{ background:rgba(31,157,87,.14); border-color:rgba(31,157,87,.32); color:var(--good); }
body.v4 .cc-toggle.on .cc-toggle-n{ background:rgba(128,128,128,.10); color:inherit; }

/* Command Centre - batch filter row (groups a delivered batch of tickets) */
body.v4 .cc-batches{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:-6px 0 18px; }
body.v4 .cc-batches-lbl{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--apl-ink-4); margin-right:2px; }
body.v4 .cc-batch{ display:inline-flex; align-items:center; gap:7px; border:1px solid var(--apl-rule); background:var(--apl-paper); color:var(--apl-ink-3); border-radius:var(--r-pill,999px); padding:6px 13px; font-size:12.5px; font-weight:650; cursor:pointer; font-family:inherit; transition:.14s; }
body.v4 .cc-batch:hover{ color:var(--apl-ink); border-color:var(--apl-ink-4); }
body.v4 .cc-batch.on{ background:var(--apl-ink); border-color:var(--apl-ink); color:var(--on-accent); }
body.v4 .cc-batch-n{ font-size:11px; font-weight:700; background:rgba(128,128,128,.16); border-radius:999px; padding:1px 7px; font-variant-numeric:tabular-nums; }
body.v4 .cc-batch.on .cc-batch-n{ background:rgba(255,255,255,.22); color:var(--on-accent); }
body.v4 .cc-you-count{ font-size:12px; font-weight:700; color:var(--cherry); background:rgba(184,0,43,.10); border-radius:999px; padding:4px 11px; }

/* item card v2 */
body.v4 .cc-card2{ background:var(--apl-paper); border:1px solid var(--apl-rule); border-radius:var(--apl-r,14px); padding:16px 18px; margin-bottom:12px; display:flex; flex-direction:column; gap:10px; box-shadow:var(--apl-sh,0 1px 2px rgba(0,0,0,.03)); }
body.v4 .cc-card2.cc-card-urgent{ border-left:3px solid var(--cherry); }
body.v4 .cc-card2.cc-card-done{ opacity:.55; }

/* CC02 - collapsed row design */
body.v4 .cc-item-wrap{ margin-bottom:4px; border:1px solid var(--apl-rule); border-radius:10px; overflow:hidden; background:var(--apl-paper); }
body.v4 .cc-row{ display:flex; align-items:center; gap:8px; padding:10px 14px; cursor:pointer; user-select:none; transition:background .1s; }
body.v4 .cc-row:hover{ background:rgba(0,0,0,.025); }
body.v4 .cc-row-urgent{ border-left:3px solid var(--cherry); }
body.v4 .cc-row-done{ opacity:.5; }
body.v4 .cc-row-chev{ font-size:14px; color:var(--apl-ink-4); display:inline-block; transition:transform .15s; flex-shrink:0; width:14px; }
body.v4 .cc-row-chev.open{ transform:rotate(90deg); }
body.v4 .cc-who-sm{ padding:2px 6px; font-size:10px; }
body.v4 .cc-row-title{ flex:1; min-width:0; font-size:13.5px; font-weight:600; color:var(--apl-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.v4 .cc-row-pills{ display:flex; gap:4px; flex-shrink:0; align-items:center; }
body.v4 .cc-row-actions{ flex-shrink:0; display:flex; align-items:center; gap:6px; }
body.v4 .cc-done-btn{ background:rgba(10,125,46,.12); color:#0a7d2e; border:none; padding:4px 10px; border-radius:6px; font-size:11.5px; font-weight:600; cursor:pointer; white-space:nowrap; }
body.v4 .cc-done-btn:hover{ background:rgba(10,125,46,.2); }
body.v4 .cc-reopen-sm{ font-size:11px; color:var(--apl-ink-4); background:none; border:none; cursor:pointer; }
body.v4 .cc-detail{ padding:12px 16px 14px; border-top:1px solid var(--apl-rule); display:flex; flex-direction:column; gap:10px; }
body.v4 .cc-detail-hidden{ display:none; }
body.v4 .cc-c2-top{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
body.v4 .cc-c2-title{ font-size:15.5px; font-weight:680; color:var(--apl-ink); letter-spacing:-.01em; line-height:1.3; }
body.v4 .cc-c2-detail{ font-size:13px; color:var(--apl-ink-3); line-height:1.5; }
body.v4 .cc-c2-foot{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:2px; }
body.v4 .cc-by-mini{ font-size:11px; color:var(--apl-ink-4); }

/* who owns it */
body.v4 .cc-who{ font-size:11px; font-weight:800; border-radius:6px; padding:3px 9px; letter-spacing:.01em; }
body.v4 .cc-who-peter{ background:rgba(184,0,43,.13); color:var(--cherry); }
body.v4 .cc-who-claude{ background:rgba(0,113,227,.12); color:var(--apl-blue); }

/* category pill (reuses the toggle tint palette, always-on look) */
body.v4 .cc-cat{ font-size:10.5px; font-weight:700; border-radius:6px; padding:2px 9px; text-transform:uppercase; letter-spacing:.03em; }
body.v4 .cc-cat.cc-tg-urgent{ background:rgba(184,0,43,.13); color:var(--cherry); }
body.v4 .cc-cat.cc-tg-bugs{ background:rgba(194,65,12,.13); color:var(--apl-orange); }
body.v4 .cc-cat.cc-tg-design{ background:rgba(94,92,230,.13); color:var(--apl-lilac); }
body.v4 .cc-cat.cc-tg-ux{ background:rgba(0,113,227,.13); color:var(--apl-blue); }
body.v4 .cc-cat.cc-tg-security{ background:rgba(201,138,0,.15); color:var(--warn); }
body.v4 .cc-cat.cc-tg-projects{ background:rgba(31,157,87,.14); color:var(--good); }

/* "what you need to do" steps block (Peter-owned items) */
body.v4 .cc-do{ background:rgba(184,0,43,.05); border:1px solid rgba(184,0,43,.18); border-radius:10px; padding:11px 14px; }
body.v4 .cc-do-h{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--cherry); margin-bottom:6px; }
body.v4 .cc-steps{ margin:0; padding-left:20px; display:flex; flex-direction:column; gap:5px; }
body.v4 .cc-steps li{ font-size:13px; color:var(--apl-ink-2); line-height:1.5; }
body.v4 .cc-step-single{ margin:0; font-size:13px; color:var(--apl-ink-2); line-height:1.5; }

/* question + answer */
body.v4 .cc-qa{ display:flex; flex-direction:column; gap:8px; }
body.v4 .cc-q{ font-size:12.5px; color:var(--apl-ink-2); background:rgba(128,128,128,.07); border-radius:8px; padding:8px 11px; line-height:1.45; }
body.v4 .cc-q-lbl{ display:block; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--apl-ink-4); margin-bottom:3px; }
body.v4 .cc-ans{ font-size:13px; color:var(--apl-ink-2); background:rgba(0,113,227,.06); border-left:2px solid var(--apl-blue); border-radius:0 8px 8px 0; padding:9px 12px; line-height:1.5; white-space:pre-wrap; }
body.v4 .cc-ans-lbl{ display:block; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--apl-blue); margin-bottom:3px; }
body.v4 .cc-ans-pending{ background:rgba(128,128,128,.07); border-left-color:var(--apl-ink-4); color:var(--apl-ink-3); font-style:italic; }
body.v4 .cc-ask{ display:flex; gap:8px; align-items:flex-end; }
body.v4 .cc-ask-in{ flex:1; resize:vertical; min-height:34px; border:1px solid var(--apl-rule); background:var(--apl-canvas,var(--apl-paper)); color:var(--apl-ink); border-radius:9px; padding:8px 11px; font-size:13px; font-family:inherit; line-height:1.4; }
body.v4 .cc-ask-in:focus{ outline:none; border-color:var(--apl-blue); }
body.v4 .cc-ask-btn{ flex:none; border:1px solid var(--apl-blue); background:rgba(0,113,227,.10); color:var(--apl-blue); border-radius:9px; padding:8px 16px; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; transition:.14s; }
body.v4 .cc-ask-btn:hover:not(:disabled){ background:var(--apl-blue); color:rgba(255,255,255,1); }
body.v4 .cc-ask-btn:disabled{ opacity:.5; cursor:default; }
body.v4 .cc-done-btn{ font-weight:700; color:var(--good); }
body.v4 .cc-done-btn:hover{ background:rgba(31,157,87,.12); }

/* ── Wave 234 - Settings · Systems & spend ── */
body.v4 .ss-summary{ display:flex; align-items:stretch; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
body.v4 .ss-sum-card{ display:flex; flex-direction:column; gap:2px; background:var(--apl-paper); border:1px solid var(--apl-rule); border-radius:12px; padding:12px 16px; min-width:130px; }
body.v4 .ss-sum-n{ font-size:18px; font-weight:750; color:var(--apl-ink); letter-spacing:-.01em; }
body.v4 .ss-sum-l{ font-size:11px; color:var(--apl-ink-3); text-transform:uppercase; letter-spacing:.04em; }
body.v4 .ss-summary .btn-primary{ margin-left:auto; align-self:center; }
body.v4 .ss-table td{ vertical-align:top; }
body.v4 .ss-purpose{ color:var(--apl-ink-3); font-size:12.5px; max-width:34ch; line-height:1.45; }
body.v4 .ss-cost{ font-variant-numeric:tabular-nums; white-space:nowrap; font-weight:600; color:var(--apl-ink); }
body.v4 .ss-link{ text-decoration:none; color:var(--apl-blue); font-weight:700; }
body.v4 .ss-cat{ font-size:11px; font-weight:600; background:rgba(128,128,128,.12); color:var(--apl-ink-3); border-radius:6px; padding:2px 8px; white-space:nowrap; }
body.v4 .ss-status{ font-size:10.5px; font-weight:700; border-radius:999px; padding:2px 9px; text-transform:capitalize; }
body.v4 .ss-status-active{ background:rgba(31,157,87,.16); color:var(--good); }
body.v4 .ss-status-trial{ background:rgba(0,113,227,.14); color:var(--apl-blue); }
body.v4 .ss-status-planned{ background:rgba(94,92,230,.16); color:var(--apl-lilac); }
body.v4 .ss-status-cancelled{ background:rgba(128,128,128,.16); color:var(--apl-ink-3); }

body.v4 .cc-peter{ background:rgba(184,0,43,.08); border:1px solid rgba(184,0,43,.28); border-radius:var(--apl-r,14px); padding:14px 16px; margin-bottom:18px; }
body.v4 .cc-peter-h{ font-size:13px; font-weight:700; color:var(--cherry); margin-bottom:10px; letter-spacing:.01em; }
body.v4 .cc-peter-list{ display:flex; flex-direction:column; gap:6px; }
body.v4 .cc-peter-row{ display:flex; align-items:center; gap:10px; background:rgba(128,128,128,.07); border:1px solid var(--apl-rule); border-radius:10px; padding:9px 12px; transition:background .14s; }
body.v4 .cc-peter-row:hover{ background:rgba(128,128,128,.13); }
body.v4 .cc-peter-main{ display:flex; flex-direction:column; gap:1px; text-align:left; flex:1; min-width:0; background:none; border:none; cursor:pointer; font-family:inherit; padding:0; }
body.v4 .cc-peter-title{ font-size:13.5px; font-weight:600; color:var(--apl-ink); }
body.v4 .cc-peter-note{ font-size:12px; color:var(--apl-ink-3); }
body.v4 .cc-peter-done{ flex:none; font-size:12px; font-weight:700; border:1px solid var(--good); background:rgba(31,157,87,.12); color:var(--good); border-radius:999px; padding:6px 14px; cursor:pointer; font-family:inherit; transition:.14s; }
body.v4 .cc-peter-done:hover{ background:var(--good); color:rgba(255,255,255,1); }

body.v4 .cc-tabs{ display:flex; gap:4px; flex-wrap:wrap; margin-bottom:16px; }
body.v4 .cc-tab{ display:inline-flex; align-items:center; gap:7px; border:1px solid var(--apl-rule); background:var(--apl-paper); color:var(--apl-ink-3); border-radius:var(--r-pill,999px); padding:8px 15px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; transition:.14s; }
body.v4 .cc-tab:hover{ color:var(--apl-ink); border-color:var(--apl-ink-4); }
body.v4 .cc-tab.on{ background:var(--cherry); border-color:var(--cherry); color:rgba(255,255,255,1); }
body.v4 .cc-tab-n{ font-size:11px; font-weight:700; background:rgba(128,128,128,.18); border-radius:999px; padding:1px 7px; font-variant-numeric:tabular-nums; }
body.v4 .cc-tab.on .cc-tab-n{ background:rgba(255,255,255,.25); color:rgba(255,255,255,1); }

body.v4 .cc-bar{ display:flex; align-items:center; gap:14px; margin-bottom:16px; flex-wrap:wrap; }
body.v4 .cc-blurb{ font-size:13.5px; color:var(--apl-ink-3); }
body.v4 .cc-showdone{ font-size:12.5px; color:var(--apl-ink-3); display:inline-flex; align-items:center; gap:6px; cursor:pointer; margin-left:auto; }
body.v4 .cc-add{ flex:none; }

body.v4 .cc-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:14px; }
body.v4 .cc-card{ background:var(--apl-paper); border:1px solid var(--apl-rule); border-radius:var(--apl-r,14px); padding:16px; display:flex; flex-direction:column; gap:9px; box-shadow:var(--apl-sh,0 1px 2px rgba(0,0,0,.03)); }
body.v4 .cc-card-done{ opacity:.6; }
body.v4 .cc-card-top{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
body.v4 .cc-card-title{ font-size:15px; font-weight:650; color:var(--apl-ink); letter-spacing:-.01em; line-height:1.3; }
body.v4 .cc-card-detail{ font-size:13px; color:var(--apl-ink-3); line-height:1.5; }
body.v4 .cc-card-foot{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:2px; }
body.v4 .cc-spacer{ flex:1; }
body.v4 .cc-link{ background:none; border:none; color:var(--apl-blue); font-size:12.5px; font-weight:600; cursor:pointer; font-family:inherit; padding:2px 4px; border-radius:6px; }
body.v4 .cc-link:hover{ background:rgba(0,113,227,.10); }
body.v4 .cc-del{ color:var(--cherry); }
body.v4 .cc-del:hover{ background:rgba(184,0,43,.10); }

/* status pill - click to cycle. Mode-agnostic rgba tints. */
body.v4 .cc-status{ font-size:10.5px; font-weight:700; border:none; border-radius:999px; padding:3px 10px; cursor:pointer; font-family:inherit; letter-spacing:.02em; text-transform:uppercase; }
body.v4 .cc-st-open{ background:rgba(0,113,227,.14); color:var(--apl-blue); }
body.v4 .cc-st-in_progress{ background:rgba(94,92,230,.16); color:var(--apl-lilac); }
body.v4 .cc-st-blocked{ background:rgba(201,138,0,.16); color:var(--warn); }
body.v4 .cc-st-done{ background:rgba(31,157,87,.16); color:var(--good); }
body.v4 .cc-st-wont_fix{ background:rgba(128,128,128,.16); color:var(--apl-ink-3); }

body.v4 .cc-prio{ font-size:10px; font-weight:700; border-radius:5px; padding:2px 7px; text-transform:uppercase; letter-spacing:.03em; }
body.v4 .cc-prio-critical{ background:rgba(184,0,43,.14); color:var(--cherry); }
body.v4 .cc-prio-high{ background:rgba(194,65,12,.16); color:var(--apl-orange); }
body.v4 .cc-prio-medium{ background:rgba(201,138,0,.16); color:var(--warn); }
body.v4 .cc-prio-low{ background:rgba(0,113,227,.12); color:var(--apl-blue); }

body.v4 .cc-flag{ font-size:10.5px; font-weight:700; background:rgba(184,0,43,.12); color:var(--cherry); border-radius:5px; padding:2px 8px; }
body.v4 .cc-by{ font-size:11px; color:var(--apl-ink-4); margin-left:auto; }
body.v4 .cc-tag{ font-size:11px; background:rgba(128,128,128,.12); color:var(--apl-ink-3); border-radius:6px; padding:2px 8px; }
body.v4 .cc-peter-inline{ font-size:12px; color:var(--apl-ink-2); background:rgba(184,0,43,.06); border-left:2px solid var(--cherry); border-radius:0 8px 8px 0; padding:7px 10px; line-height:1.45; }

body.v4 .cc-prog{ display:flex; align-items:center; gap:9px; }
body.v4 .cc-prog-bar{ flex:1; height:6px; border-radius:99px; background:rgba(128,128,128,.18); overflow:hidden; }
body.v4 .cc-prog-bar span{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--good),var(--apl-blue)); }
body.v4 .cc-prog-n{ font-size:11px; font-weight:600; color:var(--apl-ink-3); font-variant-numeric:tabular-nums; }

body.v4 .cc-empty{ text-align:center; padding:48px 20px; color:var(--apl-ink-3); font-size:14px; background:var(--apl-paper); border:1px dashed var(--apl-rule); border-radius:var(--apl-r,14px); }

/* add/edit modal */
body.v4 .cc-modal-ov{ position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,.42); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:20px; }
body.v4 .cc-modal{ width:560px; max-width:94vw; max-height:90vh; overflow:auto; background:var(--apl-paper); border:1px solid var(--apl-rule); border-radius:var(--apl-r-lg,22px); box-shadow:0 24px 70px rgba(0,0,0,.3); }
body.v4 .cc-modal-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--apl-rule); font-size:16px; font-weight:700; color:var(--apl-ink); }
body.v4 .cc-modal-x{ background:none; border:none; font-size:22px; line-height:1; color:var(--apl-ink-3); cursor:pointer; }
body.v4 .cc-modal-body{ padding:18px 20px; display:flex; flex-direction:column; gap:14px; }
body.v4 .cc-f{ display:flex; flex-direction:column; gap:5px; font-size:12px; font-weight:600; color:var(--apl-ink-3); }
body.v4 .cc-f input[type=text], body.v4 .cc-f input[type=number], body.v4 .cc-f select, body.v4 .cc-f textarea{ font-family:inherit; font-size:14px; color:var(--apl-ink); background:var(--apl-paper-2); border:1px solid var(--apl-rule); border-radius:10px; padding:10px 12px; font-weight:400; }
body.v4 .cc-f textarea{ resize:vertical; }
body.v4 .cc-f-row{ display:flex; gap:12px; }
body.v4 .cc-f-row .cc-f{ flex:1; }
body.v4 .cc-check{ flex-direction:row; align-items:center; gap:8px; font-size:13px; color:var(--apl-ink); }
body.v4 .cc-modal-foot{ display:flex; align-items:center; gap:10px; padding:14px 20px; border-top:1px solid var(--apl-rule); }
/* ░░░░░░░░░░ end Wave 230 ░░░░░░░░░░ */

/* =============================================================
   Wave 232 - Growth Intelligence (Stats) page. Tokens only.
   Reuses .card .stat-tile .tabs .data-table .btn-* primitives;
   adds layout + chart + modal chrome below. No hardcoded hex.
   ============================================================= */
.gi-head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; }
.gi-head .tabs { margin-bottom:0; flex:1 1 auto; }

.gi-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:18px 0; }
.gi-kpi { background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:16px 18px 14px; }
.gi-kpi-eyebrow { font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); }
/* GI-3 (Batch 1): KPI tiles use the standard panel style - no coloured top accent. */
.gi-kpi-big { font-size:30px; font-weight:800; letter-spacing:-.02em; color:var(--ink); line-height:1.05; margin-top:4px; }
.gi-kpi-sub { font-size:12px; color:var(--ink-2); font-weight:600; margin-top:3px; }
/* GI-4 (Batch 1): performance delta on its own line, colour-coded via gi-pill. */
.gi-kpi-delta { display:flex; align-items:center; gap:7px; margin-top:6px; }
.gi-kpi-delta-vs { font-size:11px; font-weight:600; color:var(--muted); }

.gi-pill { display:inline-flex; align-items:center; gap:3px; font-size:13px; font-weight:700; padding:2px 9px; border-radius:999px; vertical-align:middle; }
.gi-up   { color:var(--mint-fg);  background:var(--mint-bg); }
.gi-down { color:var(--cherry);   background:var(--rose-bg); }
.gi-flat { color:var(--muted);    background:var(--g-100); }

.gi-card-h { font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }

.gi-brief { display:flex; gap:14px; align-items:flex-start; margin-bottom:18px; }
.gi-brief-icon { flex:0 0 auto; width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:var(--lilac-fg); background:var(--lilac-bg); }
.gi-brief-icon .ic { width:22px; height:22px; }
.gi-brief-lbl { font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--lilac-fg); margin-bottom:5px; }
.gi-brief-text { font-size:14px; line-height:1.6; color:var(--ink); }

.gi-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.gi-bars { display:flex; flex-direction:column; gap:9px; }
/* GI05 - value column widened so "105.3k · 23.5%" never overflows */
.gi-bar-row { display:grid; grid-template-columns:100px 1fr 100px; gap:8px; align-items:center; }
.gi-bar-lbl { font-size:12px; color:var(--ink); text-transform:capitalize; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gi-bar-track { height:9px; background:var(--g-100); border-radius:999px; overflow:hidden; min-width:0; }
.gi-bar-fill { height:100%; background:var(--cherry); border-radius:999px; }
.gi-bar-val { text-align:right; font-size:11.5px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; flex-shrink:0; overflow:hidden; text-overflow:ellipsis; }

.gi-trend { width:100%; height:auto; display:block; }
.gi-line { fill:none; stroke:var(--cherry); stroke-width:2; }
.gi-line-avg { fill:none; stroke:var(--sky-fg); stroke-width:1.5; stroke-dasharray:4 3; opacity:.85; }
.gi-dot { fill:var(--cherry); }
.gi-axis { fill:var(--muted); font-size:9px; }
.gi-legend { font-size:11px; color:var(--muted); margin-top:8px; display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.gi-key { display:inline-block; width:16px; height:0; border-top:2px solid var(--cherry); }
.gi-key-avg { border-top:2px dashed var(--sky-fg); }

.gi-aud-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.gi-aud-card { display:flex; flex-direction:column; gap:6px; }
.gi-aud-big { font-size:22px; font-weight:800; color:var(--ink); display:flex; gap:8px; align-items:center; }
.gi-spark { width:100%; height:46px; display:block; }
.gi-spark-empty { font-size:11.5px; color:var(--muted); padding:14px 0; }

.gi-track { text-align:center; padding:20px; margin-bottom:16px; }
.gi-track-big { font-size:34px; font-weight:800; letter-spacing:-.02em; color:var(--cherry); }
.gi-track-sub { font-size:12.5px; color:var(--muted); margin-top:4px; }

.gi-proj-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.gi-proj { display:flex; flex-direction:column; gap:6px; }
.gi-proj-top { display:flex; justify-content:space-between; align-items:center; }
.gi-proj-dir { font-size:11px; color:var(--muted); }
.gi-proj-title { font-size:15px; font-weight:700; color:var(--ink); }
.gi-proj-desc { font-size:13px; line-height:1.5; color:var(--muted); }
.gi-proj-meta { font-size:11.5px; color:var(--muted); }
.gi-status { font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:3px 9px; border-radius:999px; }
.gi-status-sky    { color:var(--sky-fg);    background:var(--sky-bg); }
.gi-status-butter { color:var(--butter-fg); background:var(--butter-bg); }
.gi-status-lilac  { color:var(--lilac-fg);  background:var(--lilac-bg); }
.gi-status-mint   { color:var(--mint-fg);   background:var(--mint-bg); }
.gi-status-flat   { color:var(--muted);     background:var(--g-100); }
.gi-attr { font-size:12.5px; font-weight:700; padding:6px 10px; border-radius:8px; background:var(--mint-bg); color:var(--mint-fg); }
.gi-attr.gi-down { background:var(--rose-bg); color:var(--cherry); }
.gi-proj-actions { display:flex; gap:8px; margin-top:6px; }
.gi-sm { padding:5px 12px; font-size:12px; }

.gi-filterbar { display:flex; gap:14px; margin-bottom:12px; flex-wrap:wrap; }
.gi-fl { display:flex; flex-direction:column; gap:4px; font-size:11px; font-weight:600; color:var(--muted); }
.gi-fl select, .gi-fl input { border:1px solid var(--line); border-radius:8px; padding:7px 10px; font-size:13px; color:var(--ink); background:var(--paper); font-family:var(--font); }

.gi-modal-back { position:fixed; inset:0; background:rgba(0,0,0,.62); display:flex; align-items:center; justify-content:center; z-index:4000; padding:20px; isolation:isolate; }
.gi-modal { position:relative; z-index:1; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); max-width:620px; width:96%; max-height:88vh; overflow:auto; box-shadow:0 24px 64px rgba(0,0,0,.32); }
.gi-modal-h { display:flex; justify-content:space-between; align-items:flex-start; padding:18px 20px 12px; border-bottom:1px solid var(--line-soft); }
.gi-modal-title { font-size:17px; font-weight:800; color:var(--ink); }
.gi-modal-sub { font-size:12px; color:var(--muted); margin-top:3px; }
.gi-x { background:none; border:none; font-size:16px; color:var(--muted); cursor:pointer; line-height:1; padding:4px; }
.gi-modal-body { padding:16px 20px; display:flex; flex-direction:column; gap:14px; }
.gi-modal-foot { display:flex; justify-content:flex-end; gap:10px; padding:14px 20px 18px; border-top:1px solid var(--line-soft); }
.gi-section-h { font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.gi-aud-head { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.gi-aud-actions { display:flex; gap:8px; flex-wrap:wrap; }
.gi-pullrow { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.gi-autobox { min-height:4px; }
.gi-auto-pills { display:flex; flex-wrap:wrap; gap:7px; margin-top:7px; }
.gi-auto-pill { font-size:12px; padding:4px 10px; border-radius:999px; background:var(--g-100); color:var(--ink); }
.gi-manual-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.gi-wiz-steps { display:flex; flex-wrap:wrap; gap:8px; padding:10px 20px 0; }
.gi-wiz-dot { font-size:11px; font-weight:700; color:var(--muted); background:var(--g-100); padding:4px 10px; border-radius:999px; }
.gi-wiz-dot.on { color:var(--ink); background:var(--sky-bg); }
.gi-wiz-dot.done { color:var(--mint-fg); background:var(--mint-bg); }
.gi-wiz-lead { font-size:13.5px; line-height:1.55; color:var(--ink); margin:0 0 4px; }
.gi-sum { display:flex; flex-direction:column; gap:8px; }
.gi-sum-row { display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border:1px solid var(--line); border-radius:10px; font-size:13.5px; color:var(--ink); }

/* audience categories + composition */
.gi-aud-grand { font-size:30px; font-weight:800; letter-spacing:-.02em; color:var(--ink); display:flex; gap:10px; align-items:center; }
.gi-aud-cats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:16px 0; }
.gi-cat-card { border-top:3px solid var(--line); display:flex; flex-direction:column; gap:4px; }
.gi-cat-mint   { border-top-color:var(--mint-fg); }
.gi-cat-sky    { border-top-color:var(--sky-fg); }
.gi-cat-butter { border-top-color:var(--butter-fg); }
.gi-cat-lilac  { border-top-color:var(--lilac-fg); }
.gi-stk { width:26px; margin:0 auto; display:flex; flex-direction:column-reverse; border-radius:4px; overflow:hidden; min-height:2px; }
.gi-axis-lbl { font-size:9px; color:var(--muted); margin-top:5px; }
.gi-axis-lbl.on { color:var(--ink); font-weight:700; }
.gi-aud-break { display:grid; grid-template-columns:1fr; gap:14px; margin-top:14px; }

/* GI03 - bar chart hover tooltip */
.gi-stacked-wrap { position:relative; }
.gi-chart-tooltip {
  position:absolute;
  bottom:calc(100% + 6px);
  background:rgba(29,29,31,.92);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-radius:10px;
  padding:10px 12px;
  min-width:180px;
  max-width:210px;
  box-shadow:0 4px 20px rgba(0,0,0,.22);
  z-index:30;
  pointer-events:none;
}
.gi-bar-col { position:relative; }
.gi-bar-col:hover > div:first-child { color:var(--cherry,#b8002b) !important; }

@media (max-width:900px) {
  .gi-grid2, .gi-proj-grid { grid-template-columns:1fr; }
  .gi-kpis, .gi-aud-grid, .gi-aud-cats, .gi-manual-grid { grid-template-columns:repeat(2,1fr); }
}

/* Wave 233 - upload progress (indeterminate) bar on .es-upload-drop */
.es-upload-drop.is-uploading{position:relative;pointer-events:none;opacity:.9}
.es-upload-bar{position:absolute;left:0;right:0;bottom:0;height:3px;overflow:hidden;background:var(--line);border-bottom-left-radius:10px;border-bottom-right-radius:10px}
.es-upload-bar::before{content:"";position:absolute;top:0;bottom:0;width:38%;background:var(--cherry);border-radius:3px;animation:es-upload-slide 1.05s ease-in-out infinite}
@keyframes es-upload-slide{0%{left:-40%}50%{left:55%}100%{left:100%}}

/* ===================================================================
   KEITH - AI Chief of Staff front door. Apple-glass, tokens only.
   Chat-first: full-width conversation left, sticky brief cards right.
   =================================================================== */
.keith{width:100%}
.keith-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,.9fr);gap:20px;align-items:start}
@media(max-width:900px){.keith-grid{grid-template-columns:1fr}}

/* ── Conversation column ── */
.keith-convo{background:var(--surface);backdrop-filter:var(--blur);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh);display:flex;flex-direction:column;min-height:620px;overflow:hidden}
.kc-thread{flex:1 1 auto;overflow-y:auto;min-height:380px;max-height:64vh;display:flex;flex-direction:column;gap:16px;padding:22px 22px 8px}

.kc-intro{display:flex;gap:14px;align-items:flex-start;padding:14px 0 4px;color:var(--ink-2)}
.kc-intro-av{flex:0 0 40px;width:40px;height:40px;border-radius:var(--r-pill);display:grid;place-items:center;background:var(--lilac-bg);color:var(--apl-lilac)}
.kc-intro-av svg{width:24px;height:24px}
.kc-intro-t{font-family:var(--g-fd,inherit);font-size:17px;font-weight:800;color:var(--ink-1);letter-spacing:-.01em;margin-bottom:3px}
.kc-intro p{font-size:13.5px;line-height:1.5;margin:0;color:var(--ink-3)}

/* message rows: avatar + bubble stack */
.kc-msg{display:flex;gap:10px;align-items:flex-start;max-width:100%}
.kc-msg.kc-user{flex-direction:row-reverse}
.kc-av{flex:0 0 32px;width:32px;height:32px;border-radius:var(--r-pill);display:grid;place-items:center;font-size:12px;font-weight:700;overflow:hidden;box-shadow:var(--sh)}
.kc-av img{width:100%;height:100%;object-fit:cover}
.kc-av-keith{background:var(--hero-1);color:var(--hero-blue)}
.kc-av-keith svg{width:20px;height:20px}
.kc-stack{display:flex;flex-direction:column;gap:8px;min-width:0;max-width:80%}
.kc-msg.kc-user .kc-bubble{max-width:80%}

.kc-bubble{padding:11px 14px;border-radius:16px;font-size:13.5px;line-height:1.55;color:var(--ink-1);word-wrap:break-word;overflow-wrap:anywhere}
.kc-bubble p{margin:0 0 8px}
.kc-bubble p:last-child{margin-bottom:0}
.kc-bubble strong{font-weight:700}
.kc-ul{margin:4px 0;padding-left:18px;display:flex;flex-direction:column;gap:3px}
.kc-assistant .kc-bubble{background:var(--surface-2);border:1px solid var(--line-2);border-top-left-radius:5px}
.kc-user .kc-bubble{background:var(--apl-blue);color:var(--on-accent);border-top-right-radius:5px}
.kc-user .kc-bubble strong{color:var(--on-accent)}

/* cute "thinking" beat */
.kc-bubble-think{padding:13px 16px}
.kc-av-think{animation:keith-wiggle 1.6s ease-in-out infinite}
@keyframes keith-wiggle{0%,100%{transform:rotate(0) translateY(0)}25%{transform:rotate(-7deg) translateY(-1px)}75%{transform:rotate(7deg) translateY(-1px)}}
.kc-dots{display:inline-flex;gap:5px;align-items:center}
.kc-dots i{width:7px;height:7px;border-radius:var(--r-pill);background:var(--ink-4);display:inline-block;animation:keith-bounce 1.2s ease-in-out infinite}
.kc-dots i:nth-child(2){animation-delay:.18s}
.kc-dots i:nth-child(3){animation-delay:.36s}
@keyframes keith-bounce{0%,80%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-5px);opacity:1}}

/* suggested next-moves under a reply */
.kc-suggested{display:flex;flex-direction:column;gap:6px}
.kc-sg{display:flex;gap:8px;align-items:baseline;font-size:12.5px;color:var(--ink-2);background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);padding:7px 10px}
.kc-sg-t{font-weight:600}
.kc-sg-w{color:var(--ink-3)}
.kc-foot{font-size:12px;color:var(--good-fg)}

/* suggestion chips */
.kc-suggest{display:flex;flex-wrap:wrap;gap:7px;padding:4px 22px 0}
.kc-chip{font-size:12.5px;padding:7px 13px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);cursor:pointer;transition:border-color .12s,color .12s}
.kc-chip:hover{border-color:var(--apl-blue);color:var(--apl-blue)}

/* composer - one rounded bar, send as circular primary */
.kc-composer{display:flex;align-items:flex-end;gap:8px;margin:12px 18px 18px;padding:8px 8px 8px 16px;background:var(--surface);border:1px solid var(--line-2);border-radius:22px;box-shadow:var(--sh);transition:border-color .15s,box-shadow .15s}
.kc-composer:focus-within{border-color:var(--apl-blue);box-shadow:0 0 0 4px var(--blue-soft)}
.kc-input{flex:1 1 auto;border:0;background:transparent;resize:none;outline:none;font:inherit;font-size:14px;line-height:1.5;color:var(--ink-1);padding:6px 0;max-height:160px}
.kc-input::placeholder{color:var(--ink-4)}
.kc-send{flex:0 0 auto;width:38px;height:38px;border-radius:var(--r-pill);border:0;background:var(--apl-cherry);color:var(--on-accent);display:grid;place-items:center;cursor:pointer;transition:transform .12s,background .12s}
.kc-send svg{width:19px;height:19px}
.kc-send:hover{background:var(--cherry-2);transform:translateY(-1px)}
.kc-send:disabled{opacity:.5;cursor:default;transform:none}
.kc-link{color:var(--apl-blue);background:none;border:0;cursor:pointer;text-decoration:underline;font:inherit;padding:0}

/* proposal card inside a Keith reply */
.kc-proposal{border:1px solid var(--lilac-bg);background:var(--c-lilac);border-radius:var(--r-lg);padding:14px}
.kc-proposal.kp-dismissed{opacity:.5}
.kc-proposal.kp-done{border-color:var(--mint);background:var(--c-mint)}
.kp-eye{display:flex;align-items:center;gap:6px;font-size:11px;text-transform:uppercase;letter-spacing:.07em;font-weight:800;color:var(--on-lilac)}
.kp-eye-dot{width:7px;height:7px;border-radius:var(--r-pill);background:var(--apl-lilac)}
.kp-summary{font-size:14px;font-weight:700;color:var(--ink-1);margin:6px 0}
.kp-wf{font-size:11px;font-weight:600;color:var(--on-lilac);text-transform:uppercase;letter-spacing:.04em;opacity:.85}
.kp-fields{margin:10px 0;display:flex;flex-direction:column;gap:6px;background:var(--paper-3);border-radius:var(--r);padding:10px}
.kp-field{display:flex;gap:10px;font-size:12.5px}
.kp-k{color:var(--ink-4);min-width:96px;text-transform:capitalize}
.kp-v{color:var(--ink-1);font-weight:600}
.kp-actions{display:flex;gap:8px;margin-top:12px;justify-content:flex-end}
.kp-btn{padding:8px 18px;font-size:13px}

/* ── Brief rail (right), carded ── */
.keith-brief-wrap{position:sticky;top:16px;align-self:start}
.keith-brief{display:flex;flex-direction:column;gap:16px;max-height:calc(100vh - 32px);overflow:auto;padding-right:2px}
.keithb-skel{display:flex;flex-direction:column;gap:10px}
.keithb-skel span{height:48px;border-radius:var(--r);background:linear-gradient(90deg,var(--surface-2),var(--line-2),var(--surface-2));background-size:200% 100%;animation:keithb-shimmer 1.3s linear infinite}
@keyframes keithb-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.keithb-err,.keithb-empty{color:var(--ink-3);font-size:12.5px;padding:10px 0}

.keithb-head{background:var(--hero-1);border-radius:var(--r-lg);padding:18px;box-shadow:var(--sh)}
.keithb-eye{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--hero-blue);font-weight:800}
.keithb-situation{font-size:15px;line-height:1.45;font-weight:600;color:var(--on-accent);margin:8px 0 0}

.keithb-group{background:var(--surface);backdrop-filter:var(--blur);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh);padding:14px 16px}
.keithb-group-h{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);margin-bottom:10px}

/* K01 - pipeline stage grid in the brief header */
.keithb-pipeline{display:flex;flex-direction:column;gap:6px;margin:8px 0 10px;padding:10px 12px;background:rgba(0,0,0,.03);border-radius:10px}
.keithb-pipeline-row{display:flex;align-items:baseline;gap:8px}
.keithb-pipeline-eye{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);width:52px;flex-shrink:0}
.keithb-stage-grid{display:flex;gap:6px;flex-wrap:wrap}
.keithb-stage-pill{display:flex;align-items:baseline;gap:3px;background:var(--g-surface,#fff);border:1px solid var(--rule-soft);border-radius:7px;padding:3px 8px}
.keithb-stage-n{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.keithb-stage-l{font-size:10.5px;font-weight:500;color:var(--ink-3)}

/* K01 - situation as scannable list instead of prose block */
.keithb-situation-list{margin:6px 0 0;padding:0 0 0 14px;display:flex;flex-direction:column;gap:3px}
.keithb-situation-list li{font-size:12.5px;color:var(--ink-2);line-height:1.45;list-style:disc}

/* K02 - inline label prefix on why/action rows */
.keithb-inline-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-4);margin-right:5px}

/* K02 - risk / opp side label badge replaces the dot */
.keithb-item{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--rule-soft)}
.keithb-item:first-of-type{border-top:0;padding-top:2px}
.keithb-item-lbl{flex-shrink:0;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:3px 7px;border-radius:5px;margin-top:1px}
.keithb-lbl-risk{background:rgba(184,0,43,.12);color:var(--cherry)}
.keithb-lbl-opp{background:rgba(10,125,46,.12);color:#0a7d2e}
/* Keep existing dot classes for any legacy callers */
.keithb-dot{flex:0 0 8px;width:8px;height:8px;border-radius:var(--r-pill);margin-top:5px}
.keithb-dot-risk{background:var(--apl-cherry)}
.keithb-dot-opp{background:var(--good-2)}
.keithb-item-t{font-size:13px;font-weight:600;color:var(--ink-1);line-height:1.35}
.keithb-item-w{font-size:12px;color:var(--ink-3);margin-top:3px;line-height:1.45}

.keithb-action{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--rule-soft)}
.keithb-action:first-of-type{border-top:0;padding-top:2px}
.keithb-rank{flex:0 0 22px;height:22px;border-radius:var(--r-pill);background:var(--blue-bg);color:var(--apl-blue);font-weight:800;font-size:11px;display:grid;place-items:center;margin-top:1px}
.keithb-action-t{font-size:13px;font-weight:700;color:var(--ink-1);line-height:1.35}
.keithb-action-w{font-size:12px;color:var(--ink-3);margin-top:2px;line-height:1.4}
.keithb-action-tags{display:flex;gap:6px;align-items:center;margin-top:6px;flex-wrap:wrap}
.keithb-pill{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:var(--r-pill);white-space:nowrap}
.keithb-eff{font-size:11px;color:var(--ink-4)}

/* Batch 3 - "Get Keith's help" on every brief item */
.keithb-help{display:inline-block;margin-top:7px;font-size:11px;font-weight:700;color:var(--apl-blue);background:var(--blue-bg);border:0;border-radius:var(--r-pill);padding:4px 10px;cursor:pointer;transition:filter .12s}
.keithb-help:hover{filter:brightness(.94)}
.keithb-action-tags .keithb-help{margin-top:0}

/* Batch 3 - "Prompt Keith" quick prompts UNDER the composer */
.kc-suggest-wrap{margin-top:10px;padding:0 22px}
.kc-suggest-wrap .kc-suggest{padding:0}
.kc-suggest-h{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);margin-bottom:7px}

/* Batch 3 - urgency-ranked task buttons in chat */
.kc-taskq{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.kc-task{display:flex;gap:11px;align-items:flex-start;text-align:left;padding:11px 13px;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--sh);cursor:pointer;transition:border-color .12s,background .12s}
.kc-task:hover{border-color:var(--apl-blue)}
.kc-task:disabled{cursor:default;opacity:.62}
.kc-task.kc-task-on{border-color:var(--apl-blue);background:var(--blue-bg)}
.kc-task-rank{flex:0 0 22px;height:22px;border-radius:var(--r-pill);background:var(--blue-bg);color:var(--apl-blue);font-weight:800;font-size:11px;display:grid;place-items:center;margin-top:1px}
.kc-task-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.kc-task-t{font-size:13.5px;font-weight:700;color:var(--ink-1);line-height:1.3}
.kc-task-m{font-size:12px;font-weight:600;color:var(--ink-3);line-height:1.35}
.kc-task-w{font-size:12px;color:var(--ink-3);line-height:1.4}

/* Keith - embedded workflow element (real task / form / upload, in chat) */
.kc-element{margin-top:10px;border:1px solid var(--line-2);background:var(--surface);border-radius:var(--r-lg);padding:14px;box-shadow:var(--sh)}
.kc-element.kc-el-done{border-color:var(--mint);background:var(--c-mint)}
.kc-el-head{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.kc-el-eye{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-4)}
.kc-el-title{font-size:14px;font-weight:700;color:var(--ink-1)}
.kc-el-load{font-size:12.5px;color:var(--ink-3)}
.kc-el-note{font-size:13px;color:var(--ink-2)}
.kc-el-form{display:flex;flex-direction:column;gap:10px}
.kc-el-actions{display:flex;justify-content:flex-end;margin-top:12px}
.kc-el-tick{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--ink-1);cursor:pointer}
.kc-el-tick input{width:18px;height:18px;accent-color:var(--apl-cherry);cursor:pointer}

/* ===================================================================
   FIX - legacy→apl aliases were declared at :root, but --apl-* is
   defined at body.v4 scope, so the aliases resolved to EMPTY at :root
   and inherited empty everywhere (bare --cherry/--blue/--paper/--line/
   --lilac came out transparent app-wide). Re-declare them at body.v4
   (light) where --apl-* resolves. Dark mode keeps its own overrides
   (body.v4.dark is more specific). All var() → no css-guard hex cost.
   =================================================================== */
body.v4{
  --ink:var(--apl-ink); --ink-mid:var(--apl-ink-3); --ink-soft:var(--apl-ink-4);
  --ink2:var(--apl-ink-2); --ink3:var(--apl-ink-3); --ink4:var(--apl-ink-5);
  --line:var(--apl-rule); --line-soft:var(--apl-rule-soft);
  --bg:var(--apl-canvas); --bg-2:var(--apl-paper-2);
  --blue:var(--apl-blue); --cherry:var(--apl-cherry); --cherry-fg:var(--apl-cherry); --paper:var(--apl-paper);
  /* --apl-cherry-fill was itself aliased to --apl-cherry at :root (empty there) - re-point at body scope */
  --apl-cherry-fill:var(--apl-cherry); --cherry-fill:var(--apl-cherry);
  --lilac:var(--apl-lilac); --lilac-fg:var(--apl-lilac);
  --g-50:var(--apl-paper-2);
  --ink-light:var(--apl-ink-3);
}

/* Keith §2.3 - object cards (bring any system object into chat) */
.kc-objects{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.kc-object{border:1px solid var(--line-2);background:var(--surface);border-radius:var(--r-lg);padding:13px 14px;box-shadow:var(--sh)}
.kc-ob-head{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.kc-ob-ic{flex:0 0 30px;width:30px;height:30px;border-radius:9px;background:var(--c-lilac);color:var(--on-lilac);display:grid;place-items:center}
.kc-ob-ic svg{width:17px;height:17px}
.kc-ob-h{display:flex;flex-direction:column;gap:1px;min-width:0}
.kc-ob-eye{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-4)}
.kc-ob-t{font-size:14px;font-weight:700;color:var(--ink-1);line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kc-ob-body{font-size:12.5px;color:var(--ink-2)}
.kc-ob-load{color:var(--ink-4)}
.kc-ob-fields{display:flex;flex-direction:column;gap:5px;margin-bottom:8px}
.kc-ob-f{display:flex;gap:10px;align-items:baseline;justify-content:space-between}
.kc-ob-k{font-size:11.5px;color:var(--ink-4);font-weight:600;white-space:nowrap}
.kc-ob-v{font-size:12.5px;color:var(--ink-1);font-weight:600;text-align:right}
.kc-ob-list{display:flex;flex-direction:column}
.kc-ob-row{display:flex;gap:10px;align-items:center;padding:7px 0;border-top:1px solid var(--rule-soft);text-decoration:none;color:inherit}
.kc-ob-row:first-child{border-top:0}
.kc-ob-row:hover{opacity:.78}
.kc-ob-row-l{flex:1;font-size:13px;font-weight:600;color:var(--ink-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kc-ob-row-m{font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.kc-ob-spark{flex:0 0 56px;height:6px;border-radius:var(--r-pill);background:var(--line-2);overflow:hidden}
.kc-ob-spark span{display:block;height:100%;background:var(--apl-blue);border-radius:var(--r-pill)}
.kc-ob-open{display:inline-block;margin-top:8px;font-size:12px;font-weight:700;color:var(--apl-blue);text-decoration:none}
.kc-ob-open:hover{text-decoration:underline}
.kc-ob-empty{font-size:12.5px;color:var(--ink-4)}

/* Keith §2.4 - onboarding actions + replay link + inline reassign picker */
.kc-onboard-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.kc-tour{display:inline-block;margin-top:8px;font-size:12px;font-weight:600;background:none;border:0;color:var(--apl-blue);cursor:pointer;padding:0}
.kc-tour:hover{text-decoration:underline}
.kc-reassign{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.kc-rs-opt{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border:1px solid var(--line-2);border-radius:var(--r-pill);font-size:13px;color:var(--ink-1);cursor:pointer;background:var(--surface)}
.kc-rs-opt.on{border-color:var(--apl-cherry);background:var(--cherry-bg);color:var(--apl-cherry)}
.kc-rs-opt input{accent-color:var(--apl-cherry);cursor:pointer}

/* Keith §F - quiet health footer in the brief rail */
.keithb-health{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--ink-4);padding:8px 2px 2px;border-top:1px solid var(--rule-soft);margin-top:2px}
.keithb-health-dot{width:7px;height:7px;border-radius:var(--r-pill);flex:0 0 7px}
.keithb-health-ok{background:var(--good-2)}
.keithb-health-warn{background:var(--warn)}

/* ═════════ Wave: Peter's multi-page sweep (agents, 2026-06-04) ═════════ */
/* GI02 - clickable KPI tile affordance */
.gi-kpi-click { transition: transform .12s, box-shadow .12s; }
.gi-kpi-click:hover { transform: translateY(-1px); box-shadow: var(--sh); }
.gi-bar-fill.gi-fill-good { background: var(--good-2, var(--good)); }
/* GI04 - monthly + yearly charts side by side */
.gi-chartgrid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
@media (max-width: 900px) { .gi-chartgrid { grid-template-columns: 1fr; } }
/* GI08 - Total audience card accent */
.gi-cat-cherry { border-top-color: var(--cherry); }
/* GI10 - numeric header alignment */
body.v4 .data-table th.num { text-align: right; }

/* K08 · Useful Prompts - tidy pill grid */
.kc-suggest-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px;padding:0}
.kc-suggest-grid .kc-chip{text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* K04 · Problem / Solution / Action card */
.kc-pss{display:flex;flex-direction:column;gap:10px;padding:14px 16px}
.kc-pss-intro{font-size:13.5px;color:var(--ink-2)}
.kc-pss-block{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-radius:var(--r);border:1px solid var(--line)}
.kc-pss-lbl{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.07em}
.kc-pss-body{font-size:13.5px;color:var(--ink-1);line-height:1.45}
.kc-pss-body p{margin:0}
.kc-pss-problem{background:var(--surface)}
.kc-pss-problem .kc-pss-lbl{color:var(--ink-4)}
.kc-pss-solution{background:var(--c-sky)}
.kc-pss-solution .kc-pss-lbl{color:var(--on-sky)}
.kc-pss-action{background:var(--c-lilac);border-color:var(--on-lilac);border-width:1.5px;box-shadow:var(--sh)}
.kc-pss-action .kc-pss-lbl{color:var(--on-lilac);font-size:11px}
.kc-pss-action .kc-pss-body{font-weight:700;font-size:14.5px}
/* K07 · inline bar chart */
.kc-chart{margin-top:10px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:14px;box-shadow:var(--sh)}
.kc-chart-t{font-size:13px;font-weight:700;color:var(--ink-1);margin-bottom:10px}
.kc-chart-u{margin-left:8px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-4)}
.kc-chart-bars{display:flex;align-items:flex-end;gap:6px;height:140px}
.kc-chart-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;min-width:0;height:100%}
.kc-chart-v{font-size:10px;font-weight:700;color:var(--ink-3)}
.kc-chart-bar{width:100%;max-width:34px;flex:1;display:flex;align-items:flex-end;border-radius:6px 6px 0 0;overflow:hidden}
.kc-chart-bar span{display:block;width:100%;background:var(--cherry);border-radius:6px 6px 0 0;min-height:2px}
.kc-chart-l{font-size:9.5px;color:var(--ink-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* K05 · task panel - action row leads */
.kc-task-v2{display:flex;flex-direction:column;gap:0;padding:0;text-align:left;cursor:default}
.kc-task-v2:hover{border-color:var(--line)}
.kc-task-act{display:flex;align-items:center;gap:10px;padding:12px 13px;border-bottom:1px solid var(--line)}
.kc-task-act-ic{flex:0 0 26px;width:26px;height:26px;border-radius:8px;background:var(--c-lilac);color:var(--on-lilac);display:grid;place-items:center}
.kc-task-act-ic svg{width:15px;height:15px}
.kc-task-act-t{flex:1;font-size:14px;font-weight:800;color:var(--ink-1);line-height:1.3;min-width:0}
.kc-task-go{flex:0 0 auto;font-size:12px;padding:7px 14px}
.kc-task-meta{display:flex;gap:11px;align-items:center;padding:9px 13px}
.kc-task-meta .kc-task-main{flex:1}
.kc-task-open{flex:0 0 auto;font-size:11.5px;padding:5px 12px}
.kc-task-on .kc-task-act{opacity:.55}
/* K06 · Go To Show */
.kc-goto-show{display:inline-flex;align-items:center;font-size:12px;font-weight:700;padding:6px 14px;text-decoration:none;margin-top:8px}
.kc-el-head-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.kc-el-head-row .kc-goto-show{margin-top:0}
.kc-element .kc-el-sec.es-sec{margin-bottom:0}

/* AC01 · chat rail: scrollable, department groups */
body.v4 .chat2-rail-list{flex:1 1 auto;min-height:0;max-height:48vh;overflow-y:auto;margin:0 -6px;padding:0 6px}
body.v4 .chat2-dept{margin-bottom:2px}
body.v4 .chat2-dept-head:hover{background:var(--blue-soft)}
body.v4 .chat2-dept.open .chat2-dept-head{background:var(--blue-soft)}
/* SS01 · studio people chips + overlapping busy segments */
body.v4 .ss-people-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
body.v4 .ss-person-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);color:var(--ink-3);font-size:12px;font-weight:600;cursor:pointer;transition:background .12s ease,color .12s ease,border-color .12s ease}
body.v4 .ss-person-chip .ss-person-dot{width:8px;height:8px;border-radius:50%;opacity:.35}
body.v4 .ss-person-chip.on{background:var(--chip-bg);color:var(--chip-fg);border-color:transparent}
body.v4 .ss-person-chip.on .ss-person-dot{opacity:1}
body.v4 .ss-busy-multi{display:flex;align-items:stretch;gap:2px;padding:2px}
body.v4 .ss-busy-seg{flex:1 1 0;min-width:0;border-radius:6px;display:grid;place-items:center;font-size:10.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 4px}

/* EP01 · Ad Slot Schedule - three-panel rebuild */
body.v4 .adsch-panel{padding:0;overflow:hidden;margin-bottom:18px}
body.v4 .adsch-panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:14px 16px;border-bottom:1px solid var(--rule)}
body.v4 .adsch-panel-title{font-family:var(--g-fd);font-size:13px;font-weight:700;color:var(--g-ink)}
body.v4 .adsch-panel-sub{font-size:11.5px;color:var(--g-ink-4);margin-top:2px;max-width:560px}
body.v4 .adsch-panel-count{font-size:11px;font-weight:600;color:var(--g-ink-3);white-space:nowrap;background:var(--rule-soft);border-radius:var(--r-pill);padding:3px 10px}
body.v4 .adsch-row{display:grid;grid-template-columns:110px 1fr auto;gap:14px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--rule)}
body.v4 .adsch-row:last-child{border-bottom:none}
body.v4 .adsch-row-when{display:flex;flex-direction:column;gap:5px;align-items:flex-start}
body.v4 .adsch-row-date{font-family:var(--g-fd);font-size:13px;font-weight:700;color:var(--g-ink)}
body.v4 .adsch-row-stage{font-size:10.5px;color:var(--g-ink-4);text-transform:uppercase;letter-spacing:.04em}
body.v4 .adsch-row-title{font-family:var(--g-fd);font-size:13.5px;font-weight:600;color:var(--g-ink)}
body.v4 .adsch-slots{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
body.v4 .adsch-slot{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:3px 10px;border-radius:8px;font-size:12px;line-height:1}
body.v4 .adsch-slot-filled{background:var(--mint-bg);color:var(--mint-fg);font-weight:600;border:1px solid var(--rule)}
body.v4 .adsch-slot-logo{max-height:16px;max-width:54px;object-fit:contain;border-radius:3px;display:block}
body.v4 .adsch-slot-name{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.v4 .adsch-slot-x{border:none;background:transparent;color:var(--mint-fg);opacity:0;font-size:14px;line-height:1;padding:0 1px;cursor:pointer;border-radius:4px}
body.v4 .adsch-slot-filled:hover .adsch-slot-x{opacity:.75}
body.v4 .adsch-slot-x:hover{opacity:1;color:var(--cherry)}
body.v4 .adsch-slot-open{border:1px dashed var(--line-2);color:var(--g-ink-4);background:transparent;justify-content:center;min-width:34px}
body.v4 .adsch-slot-add{cursor:pointer;font-size:15px;font-weight:600}
body.v4 .adsch-slot-add:hover{border-color:var(--cherry);color:var(--cherry);background:var(--cherry-bg)}
body.v4 .adsch-slot-locked{opacity:.72;cursor:default}
body.v4 .adsch-slot-open.adsch-slot-locked{border-style:solid}
body.v4 .adsch-lock{width:12px;height:12px;flex-shrink:0}
body.v4 .adsch-row-meta{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--g-ink-3);white-space:nowrap}
@media (max-width:760px){body.v4 .adsch-row{grid-template-columns:1fr;gap:8px}body.v4 .adsch-row-meta{justify-self:start}}

/* ════════════════════════════════════════════════════════════════
   WAVE - Approved mockups: sponsor slots · publishing send-live rail ·
   intel kanban · settings split. CSS values lifted from the four
   _MOCKUP_*.html files; literal colours swapped for css/tokens.css
   tokens per the no-hardcoded-hex rule.
   ════════════════════════════════════════════════════════════════ */

/* ── _MOCKUP_sponsors_slots.html - episode Sponsors module ── */
body.v4 .es-spslot-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
body.v4 .es-spslot-left{background:var(--c-sky);color:var(--on-sky);font-size:11.5px;font-weight:700;padding:4px 12px;border-radius:var(--r-pill);white-space:nowrap}
body.v4 .es-spslot-grid{display:grid;gap:12px}
body.v4 .es-spslot{position:relative;border-radius:var(--r);padding:14px;min-height:96px;display:flex;flex-direction:column;justify-content:space-between;box-sizing:border-box;min-width:0}
body.v4 .es-spslot-filled{background:var(--surface);border:1px solid var(--line);box-shadow:0 1px 2px rgba(0,0,0,.05)}
body.v4 .es-spslot-kind{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4)}
body.v4 .es-spslot-logo{height:26px;display:flex;align-items:center;font-weight:800;font-size:15px;letter-spacing:-.02em;color:var(--ink-1);overflow:hidden}
body.v4 .es-spslot-name{font-size:12.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.v4 .es-spslot-empty{border:2px dashed var(--blue-bg);background:var(--blue-soft);align-items:center;justify-content:center;display:flex;flex-direction:column;gap:6px;cursor:pointer;transition:all .15s}
body.v4 .es-spslot-empty:hover{border-color:var(--blue);background:var(--blue-bg)}
body.v4 .es-spslot-plus{width:28px;height:28px;border-radius:50%;background:var(--blue-bg);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:600}
body.v4 .es-spslot-cta{font-size:12px;font-weight:600;color:var(--blue)}

/* sponsor picker popup (richer rows) */
body.v4 .es-sppk{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:18px}
body.v4 .es-sppk-title{font-size:14.5px;margin:0 0 2px;color:var(--ink-1)}
body.v4 .es-sppk-sub{font-size:12px;color:var(--ink-3);margin-bottom:14px}
body.v4 .es-sppk-adv{display:flex;align-items:center;gap:12px;padding:11px 10px;border-radius:var(--r);cursor:pointer}
body.v4 .es-sppk-adv:hover{background:var(--blue-bg)}
body.v4 .es-sppk-adv + .es-sppk-adv{border-top:1px solid var(--line)}
body.v4 .es-sppk-logo{width:38px;height:38px;border-radius:9px;background:var(--canvas);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;color:var(--ink-1);flex:none;overflow:hidden}
body.v4 .es-sppk-body{flex:1;min-width:0}
body.v4 .es-sppk-name{font-weight:650;font-size:13.5px;color:var(--ink-1)}
body.v4 .es-sppk-meta{font-size:11.5px;color:var(--ink-3);margin-top:1px}
body.v4 .es-sppk-inv{display:flex;gap:3px;margin-top:5px;flex-wrap:wrap}
body.v4 .es-sppk-inv b{width:14px;height:5px;border-radius:3px;background:var(--blue)}
body.v4 .es-sppk-inv b.free{background:var(--line)}
body.v4 .es-sppk-pill{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:var(--r-pill);white-space:nowrap;flex:none}
body.v4 .es-sppk-pill-mint{background:var(--c-mint);color:var(--on-mint)}
body.v4 .es-sppk-pill-warn{background:var(--c-butter);color:var(--warn-fg)}
body.v4 .es-sppk-blocked{opacity:.45;pointer-events:none}

/* ── _MOCKUP_publishing_sendlive.html - newsletter send rail ── */
body.v4 .es-nl-rail{display:flex;flex-direction:column;gap:14px;max-width:330px;margin-top:6px}
body.v4 .es-nl-step{display:flex;gap:10px;align-items:flex-start}
body.v4 .es-nl-tick{width:20px;height:20px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800}
body.v4 .es-nl-tick.done{background:var(--c-mint);color:var(--on-mint)}
body.v4 .es-nl-tick.todo{background:var(--canvas);color:var(--ink-4);border:1px solid var(--line)}
body.v4 .es-nl-step b{font-size:13px;display:block;color:var(--ink-1)}
body.v4 .es-nl-step span{font-size:11.5px;color:var(--ink-3)}
body.v4 .es-nl-hr{height:1px;background:var(--line)}
body.v4 .es-nl-btn{border:0;font:inherit;font-weight:700;border-radius:var(--r-pill);padding:11px 18px;cursor:pointer;width:100%}
body.v4 .es-nl-btn-sec{background:var(--surface);border:1.5px solid var(--line);color:var(--ink-1)}
body.v4 .es-nl-btn-sec:hover{border-color:var(--ink-4)}
body.v4 .es-nl-btn-pri{background:var(--cherry);color:var(--on-accent)}
body.v4 .es-nl-btn-pri:hover{background:var(--cherry-2)}
body.v4 .es-nl-btn[disabled]{opacity:.45;cursor:not-allowed}
body.v4 .es-nl-confirm{border:1.5px solid var(--cherry);border-radius:var(--r);padding:14px;background:var(--cherry-bg)}
body.v4 .es-nl-confirm h4{font-size:13px;margin:0 0 8px;color:var(--cherry)}
body.v4 .es-nl-fact{display:flex;justify-content:space-between;font-size:12.5px;padding:4px 0;gap:10px}
body.v4 .es-nl-fact b{font-weight:700;color:var(--ink-1)}
body.v4 .es-nl-fact span{color:var(--ink-3)}
body.v4 .es-nl-warnline{font-size:11.5px;color:var(--warn-fg);background:var(--c-butter);border-radius:8px;padding:8px 10px;margin:10px 0}
body.v4 .es-nl-typelbl{font-size:11.5px;color:var(--ink-3)}
body.v4 .es-nl-typeconfirm input{width:100%;box-sizing:border-box;font:inherit;font-size:13px;padding:9px 12px;border:1px solid var(--line);border-radius:8px;margin:4px 0 10px;background:var(--surface);color:var(--ink-1)}

/* ── _MOCKUP_intel_kanban.html - guest-pitches board ── */
body.v4 .ik-filters{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
body.v4 .ik-chip{font-size:12px;font-weight:600;padding:6px 14px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line);color:var(--ink-3);cursor:pointer}
body.v4 .ik-chip.on{background:var(--ink-1);color:var(--canvas);border-color:var(--ink-1)}
body.v4 .ik-board{display:grid;grid-template-columns:repeat(4,minmax(230px,1fr));gap:14px;align-items:start;overflow-x:auto}
body.v4 .ik-col-head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-radius:var(--r);font-weight:700;font-size:12.5px;margin-bottom:12px}
body.v4 .ik-head-lilac{background:var(--c-lilac);color:var(--on-lilac)}
body.v4 .ik-head-sky{background:var(--c-sky);color:var(--on-sky)}
body.v4 .ik-head-butter{background:var(--c-butter);color:var(--warn-fg)}
body.v4 .ik-head-mint{background:var(--c-mint);color:var(--on-mint)}
body.v4 .ik-col-cards{display:flex;flex-direction:column;gap:10px}
body.v4 .ik-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 1px 2px rgba(0,0,0,.05);padding:13px;cursor:pointer}
body.v4 .ik-card:hover{box-shadow:var(--sh)}
body.v4 .ik-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;gap:8px}
body.v4 .ik-card-name{font-weight:700;font-size:13.5px;color:var(--ink-1)}
body.v4 .ik-score{font-size:10.5px;font-weight:800;padding:2px 8px;border-radius:var(--r-pill);background:var(--c-mint);color:var(--on-mint);flex:none}
body.v4 .ik-score.mid{background:var(--c-butter);color:var(--warn-fg)}
body.v4 .ik-card-angle{font-size:12px;color:var(--ink-3);line-height:1.45;margin-bottom:8px}
body.v4 .ik-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px}
body.v4 .ik-topics{display:flex;gap:4px;flex-wrap:wrap}
body.v4 .ik-topic{font-size:10px;font-weight:600;padding:2px 8px;border-radius:var(--r-pill);background:var(--c-sky);color:var(--on-sky)}
body.v4 .ik-next{font-size:10.5px;font-weight:600;color:var(--ink-4);white-space:nowrap}
body.v4 .ik-next b{color:var(--ink-1)}
body.v4 .ik-handoff{border:1.5px dashed var(--on-mint);background:var(--c-mint)}
body.v4 .ik-handoff .ik-card-angle{color:var(--on-mint)}

/* ── _MOCKUP_settings_split.html - Publishing nav group + social rows ── */
body.v4 .settings-navgrp{font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-4);padding:12px 12px 5px}
body.v4 .set-eyebrow{font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-4);margin:16px 0 8px}
body.v4 .set-socrow{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line)}
body.v4 .set-socrow:first-of-type{border-top:0}
body.v4 .set-socic{width:34px;height:34px;border-radius:9px;background:var(--c-sky);color:var(--on-sky);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11px;flex:none}
body.v4 .set-socrow input{flex:1}

/* ═════════ Wave: AI Team departments + goals + meetings + morning briefing
   (AT01–AT05 + CC03, 2026-06-04). Tokens only - no hex. ═════════ */
/* Agent pill tokens - derived from the existing peach/amber pastels so the
   ORANGE agent pill is themable in one place. */
body.v4 { --agent-pill-bg: var(--c-peach-bg); --agent-pill-fg: var(--c-peach); --agent-pill-line: var(--c-peach); }
/* AT01 - department card grid */
body.v4 .dept-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;margin-top:16px}
body.v4 .dept-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;display:flex;flex-direction:column}
body.v4 .dept-card-top{height:4px}
body.v4 .dept-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px 8px}
body.v4 .dept-card-name{font-weight:800;font-size:15px;color:var(--ink-1)}
body.v4 .dept-card-count{font-size:10.5px;font-weight:700;color:var(--ink-4);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
/* AT02 - Director = existing BLUE pill; agents = ORANGE pills */
body.v4 .dept-pill{border:none;cursor:pointer;font-family:inherit}
body.v4 .dept-pill:hover{filter:brightness(1.06)}
body.v4 .dept-card .ai-team-pill--dir{display:inline-block;margin:4px 16px 8px;align-self:flex-start;background:var(--c-sky);color:var(--on-sky)}
body.v4 .dept-agents{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 12px}
body.v4 .dept-card .agent-pill{background:var(--agent-pill-bg);color:var(--agent-pill-fg);border:1px solid var(--agent-pill-line);text-transform:none;letter-spacing:0;font-weight:600;font-size:12px;padding:3px 11px}
body.v4 .dept-nodir{padding:4px 16px 8px}
body.v4 .dept-card-actions{margin-top:auto;display:flex;justify-content:flex-end;padding:6px 12px 10px;border-top:1px solid var(--line-soft,var(--line))}
/* AT03 - today's meeting block inside the dept card */
body.v4 .dept-meeting{border-top:1px solid var(--line-soft,var(--line));padding:10px 16px 12px;background:var(--canvas)}
body.v4 .dept-meeting-h{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-4);margin-bottom:5px}
body.v4 .dept-meeting-sum{font-size:12.5px;color:var(--ink-2);line-height:1.5;margin-bottom:6px}
body.v4 .dept-meeting-list{margin:0;padding-left:16px;display:flex;flex-direction:column;gap:5px}
body.v4 .dept-meeting-list li{font-size:12.5px;color:var(--ink-2);line-height:1.45}
body.v4 .dept-meeting-list li strong{color:var(--ink-1)}
/* AT04 - board report card at the top */
body.v4 .board-report{margin-bottom:16px;border-left:3px solid var(--cherry)}
body.v4 .board-report-sum{font-size:13.5px;color:var(--ink-1);line-height:1.6;margin-bottom:10px}
/* AT05 - goals card */
body.v4 .goals-card{margin-bottom:16px}
body.v4 .goals-list{padding:4px 0}
body.v4 .goal-row{display:flex;align-items:center;gap:12px;padding:10px 18px;border-top:1px solid var(--line-soft,var(--line));cursor:default}
body.v4 .goal-row[role="button"]{cursor:pointer}
body.v4 .goal-row[role="button"]:hover{background:var(--canvas)}
body.v4 .goal-row:first-child{border-top:0}
body.v4 .goal-title{flex:1;font-size:13.5px;font-weight:600;color:var(--ink-1);min-width:0}
body.v4 .goal-meta{font-size:12px;color:var(--ink-3);white-space:nowrap}
body.v4 .goal-status{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:3px 10px;border-radius:var(--r-pill);background:var(--c-sky-bg);color:var(--c-sky);flex:none}
body.v4 .goal-status--on_track{background:var(--c-mint-bg);color:var(--c-mint)}
body.v4 .goal-status--at_risk{background:var(--c-butter-bg);color:var(--c-butter)}
body.v4 .goal-status--achieved{background:var(--c-lilac-bg);color:var(--c-lilac)}
body.v4 .goal-status--dropped{background:var(--canvas);color:var(--ink-4)}
/* CC03 - Command Centre morning briefing (collapsed-row styled) */
body.v4 .cc-brief{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);margin-bottom:14px;overflow:hidden}
body.v4 .cc-brief-head{display:flex;align-items:center;gap:8px;padding:11px 14px;cursor:pointer}
body.v4 .cc-brief-head:hover{background:var(--canvas)}
body.v4 .cc-brief-title{flex:1;font-weight:800;font-size:13.5px;color:var(--ink-1)}
body.v4 .cc-brief-n{font-size:10.5px;font-weight:800;padding:2px 9px;border-radius:var(--r-pill);background:var(--agent-pill-bg);color:var(--agent-pill-fg)}
body.v4 .cc-brief-body{border-top:1px solid var(--line-soft,var(--line))}
body.v4 .cc-brief-row{cursor:default}
body.v4 .cc-brief-detail{font-weight:400;color:var(--ink-3)}
/* ░░░░░░░░░░ end Wave AT01–AT05 + CC03 ░░░░░░░░░░ */

/* ============================================================
   APPROVED MOCKUPS - Invoices header + Calendar dashboard module
   Source specs: _MOCKUP_invoice_header.html and
   _MOCKUP_calendar_dashboard_module.html. Values copied verbatim
   from the mockups; literal colours swapped for tokens.css tokens.
   Mockup class names kept, prefix-scoped (.inv-stats / .mcal) so
   the generic names (.stat .grid .day .legend …) can't collide.
   ============================================================ */

/* ── Invoices register - standard stat tiles (Received / Outstanding /
      Overdue): white card, dark text, status dot + chip ── */
body.v4 .inv-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px;margin-bottom:18px}
body.v4 .inv-stats .stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh);padding:16px 18px}
body.v4 .inv-stats .stat .k{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
body.v4 .inv-stats .dot{width:9px;height:9px;border-radius:50%;flex:none}
body.v4 .inv-stats .dot.rec{background:var(--on-mint)}
body.v4 .inv-stats .dot.out{background:var(--blue)}
body.v4 .inv-stats .dot.over{background:var(--cherry)}
body.v4 .inv-stats .stat .v{font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--ink-1)}
body.v4 .inv-stats .stat .sub{font-size:11.5px;color:var(--ink-4);margin-top:3px}
body.v4 .inv-stats .chip{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:var(--r-pill);margin-top:9px}
body.v4 .inv-stats .chip-mint{background:var(--c-mint);color:var(--on-mint)}
body.v4 .inv-stats .chip-sky{background:var(--c-sky);color:var(--on-sky)}
body.v4 .inv-stats .chip-rose{background:var(--rose-bg);color:var(--rose-fg)}
@media (max-width:900px){ body.v4 .inv-stats{grid-template-columns:1fr} }

/* ── Calendar dashboard module (.mcal, inside the .p panel chrome) ──
   Small = week strip · medium = month grid · wide = month + agenda.
   Event dots: studio = blue, record = cherry, publish = green. */
body.v4 .dv2-row .mcal .mcal-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
body.v4 .dv2-row .mcal .p-month{font-size:11.5px;font-weight:700;color:var(--ink-3)}
body.v4 .dv2-row .mcal .p-nav{display:flex;gap:6px}
body.v4 .dv2-row .mcal .p-nav b{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.05);color:var(--ink-3);font-size:12px;cursor:pointer}
/* month grid */
body.v4 .dv2-row .mcal .dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
body.v4 .dv2-row .mcal .dow span{font-size:9.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-4);text-align:center}
body.v4 .dv2-row .mcal .grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
body.v4 .dv2-row .mcal .day{aspect-ratio:1;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11.5px;font-weight:600;color:var(--ink-1);position:relative}
body.v4 .dv2-row .mcal .day.mut{color:var(--ink-4)}
body.v4 .dv2-row .mcal .day.today{background:var(--cherry);color:var(--on-accent)}
body.v4 .dv2-row .mcal .day .dots{display:flex;gap:2px;height:5px;align-items:center}
body.v4 .dv2-row .mcal .day .dots i{width:4px;height:4px;border-radius:50%;display:block}
body.v4 .dv2-row .mcal .i-studio{background:var(--blue)}
body.v4 .dv2-row .mcal .i-record{background:var(--cherry)}
body.v4 .dv2-row .mcal .i-publish{background:var(--on-mint)}
body.v4 .dv2-row .mcal .day.today .dots i{background:var(--on-accent);opacity:.9}
/* week strip (small panel) */
body.v4 .dv2-row .mcal .wstrip{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
body.v4 .dv2-row .mcal .wcell{border-radius:9px;padding:7px 0 6px;text-align:center;background:rgba(0,0,0,.03)}
body.v4 .dv2-row .mcal .wcell .wd{font-size:9px;font-weight:700;text-transform:uppercase;color:var(--ink-4)}
body.v4 .dv2-row .mcal .wcell .wn{font-size:14px;font-weight:700;margin:2px 0 4px;color:var(--ink-1)}
body.v4 .dv2-row .mcal .wcell.today{background:var(--cherry)}
body.v4 .dv2-row .mcal .wcell.today .wd,body.v4 .dv2-row .mcal .wcell.today .wn{color:var(--on-accent)}
body.v4 .dv2-row .mcal .wcell .dots{display:flex;gap:2px;justify-content:center;height:5px}
body.v4 .dv2-row .mcal .wcell .dots i{width:4px;height:4px;border-radius:50%}
body.v4 .dv2-row .mcal .wcell.today .dots i{background:var(--on-accent);opacity:.9}
/* upcoming list (wide panel side rail) */
body.v4 .dv2-row .mcal .agenda{border-left:1px solid var(--rule);padding-left:16px}
body.v4 .dv2-row .mcal .ag-h{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);margin-bottom:10px}
body.v4 .dv2-row .mcal .ev{display:flex;gap:9px;align-items:flex-start;margin-bottom:11px}
body.v4 .dv2-row .mcal .ev .bar{width:3px;border-radius:3px;flex:none;align-self:stretch}
body.v4 .dv2-row .mcal .ev .bar.studio{background:var(--blue)}
body.v4 .dv2-row .mcal .ev .bar.record{background:var(--cherry)}
body.v4 .dv2-row .mcal .ev .bar.publish{background:var(--on-mint)}
body.v4 .dv2-row .mcal .ev .when{font-size:10.5px;font-weight:700;color:var(--ink-4);width:46px;flex:none;padding-top:1px}
body.v4 .dv2-row .mcal .ev .what b{font-size:12.5px;font-weight:650;display:block;color:var(--ink-1)}
body.v4 .dv2-row .mcal .ev .what span{font-size:11px;color:var(--ink-3)}
/* legend */
body.v4 .dv2-row .mcal .legend{display:flex;gap:14px;margin-top:12px;padding-top:11px;border-top:1px solid var(--rule)}
body.v4 .dv2-row .mcal .legend span{display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;color:var(--ink-3)}
body.v4 .dv2-row .mcal .legend i{width:7px;height:7px;border-radius:50%;display:block}
/* wide internal split */
body.v4 .dv2-row .mcal .wide-body{display:grid;grid-template-columns:1.15fr .85fr;gap:16px}
body.v4 .dv2-row .p[data-size="q"] .mcal .wide-body,
body.v4 .dv2-row .p[data-size="h"] .mcal .wide-body{display:block}
/* dark skin - values from the mockup's dark block, hex swapped for
   white/rgba so the per-panel dark skin works in both site themes */
body.v4 .dv2-row .p--dark .mcal .p-month{color:rgba(255,255,255,.65)}
body.v4 .dv2-row .p--dark .mcal .p-nav b{background:rgba(255,255,255,.08);color:rgba(255,255,255,.65)}
body.v4 .dv2-row .p--dark .mcal .dow span{color:rgba(255,255,255,.45)}
body.v4 .dv2-row .p--dark .mcal .day{color:var(--on-accent)}
body.v4 .dv2-row .p--dark .mcal .day.mut{color:rgba(255,255,255,.42)}
body.v4 .dv2-row .p--dark .mcal .wcell{background:rgba(255,255,255,.06)}
body.v4 .dv2-row .p--dark .mcal .wcell .wd{color:rgba(255,255,255,.45)}
body.v4 .dv2-row .p--dark .mcal .wcell .wn{color:var(--on-accent)}
body.v4 .dv2-row .p--dark .mcal .agenda{border-left-color:rgba(255,255,255,.10)}
body.v4 .dv2-row .p--dark .mcal .ag-h{color:rgba(255,255,255,.45)}
body.v4 .dv2-row .p--dark .mcal .ev .when{color:rgba(255,255,255,.45)}
body.v4 .dv2-row .p--dark .mcal .ev .what b{color:var(--on-accent)}
body.v4 .dv2-row .p--dark .mcal .ev .what span{color:rgba(255,255,255,.65)}
body.v4 .dv2-row .p--dark .mcal .legend{border-top-color:rgba(255,255,255,.10)}
body.v4 .dv2-row .p--dark .mcal .legend span{color:rgba(255,255,255,.65)}
/* ░░░░░░░░░░ end APPROVED MOCKUPS - invoices header + calendar module ░░░░░░░░░░ */

/* ░░░░░░░░░░ CLIPS PIPELINE (Descript-centred) - episode-surface module + clips board ░░░░░░░░░░ */
/* Episode Surface · Clips section */
body.v4 .es-clips-sec .es-sec-head{align-items:center}
body.v4 .es-clip-headacts{display:flex;gap:8px;align-items:center;margin-left:auto}
body.v4 .es-clip-btn{font-size:12px;font-weight:650;padding:5px 11px;border-radius:999px;border:1px solid var(--apl-rule);background:var(--apl-paper);color:var(--apl-ink-2);cursor:pointer}
body.v4 .es-clip-btn:hover{border-color:var(--apl-ink-4);color:var(--apl-ink)}
body.v4 .es-clip-btn:disabled{opacity:.55;cursor:default}
body.v4 .es-clip-btn-add{background:var(--apl-blue);border-color:var(--apl-blue);color:var(--apl-paper)}
body.v4 .es-clip-btn-add:hover{background:var(--apl-blue-2);border-color:var(--apl-blue-2);color:var(--apl-paper)}
body.v4 .es-clip-btn-no{color:var(--apl-cherry)}
body.v4 .es-clip-btn-x{padding:5px 9px;color:var(--apl-ink-4)}
body.v4 .es-clip-descript{display:flex;gap:10px;align-items:flex-end;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--apl-rule-soft)}
body.v4 .es-clip-field{display:flex;flex-direction:column;gap:5px;font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--apl-ink-3)}
body.v4 .es-clip-field input,body.v4 .es-clip-field select,body.v4 .es-clip-field textarea{font-size:13px;font-weight:500;color:var(--apl-ink);background:var(--apl-paper);border:1px solid var(--apl-rule);border-radius:var(--apl-r-sm);padding:7px 10px;font-family:inherit}
body.v4 .es-clip-field-inline{flex:1;min-width:0}
body.v4 .es-clip-form{display:flex;flex-direction:column;gap:12px;margin-top:10px}
body.v4 .es-clip-list{display:flex;flex-direction:column;gap:8px}
body.v4 .es-clip-row{display:flex;gap:10px;align-items:center;padding:9px 11px;border:1px solid var(--apl-rule-soft);border-radius:var(--apl-r-sm);background:var(--apl-paper-2)}
body.v4 .es-clip-main{flex:1;min-width:0}
body.v4 .es-clip-title{font-size:13px;font-weight:650;color:var(--apl-ink);background:none;border:none;padding:0;cursor:pointer;text-align:left;font-family:inherit}
body.v4 .es-clip-title:hover{color:var(--apl-blue)}
body.v4 .es-clip-meta{display:flex;gap:8px;align-items:center;margin-top:3px;flex-wrap:wrap}
body.v4 .es-clip-chip{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:999px;background:var(--apl-blue-bg);color:var(--apl-blue-2)}
body.v4 .es-clip-chip-ai{background:var(--apl-lilac-bg);color:var(--apl-lilac)}
body.v4 .es-clip-link{font-size:11.5px;font-weight:650;color:var(--apl-blue);text-decoration:none}
body.v4 .es-clip-link:hover{text-decoration:underline}
body.v4 .es-clip-acts{display:flex;gap:6px;align-items:center;flex:none}
body.v4 .es-clip-status{font-size:10.5px;font-weight:750;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:999px;flex:none;background:var(--apl-paper);border:1px solid var(--apl-rule);color:var(--apl-ink-3)}
body.v4 .es-clip-status-suggested{background:var(--apl-lilac-bg);border-color:var(--apl-lilac-bg);color:var(--apl-lilac)}
body.v4 .es-clip-status-approved{background:var(--apl-blue-bg);border-color:var(--apl-blue-bg);color:var(--apl-blue-2)}
body.v4 .es-clip-status-in_edit{background:var(--apl-orange-bg);border-color:var(--apl-orange-bg);color:var(--apl-orange)}
body.v4 .es-clip-status-ready{background:var(--apl-green-bg);border-color:var(--apl-green-bg);color:var(--apl-green)}
body.v4 .es-clip-status-scheduled{background:var(--apl-blue-bg);border-color:var(--apl-blue-bg);color:var(--apl-blue-2)}
body.v4 .es-clip-status-published{background:var(--apl-green);border-color:var(--apl-green);color:var(--apl-paper)}
body.v4 .es-clip-status-rejected{background:var(--apl-cherry-bg);border-color:var(--apl-cherry-bg);color:var(--apl-cherry)}
body.v4 .es-clip-rej-h{font-size:11px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--apl-ink-4);margin:14px 0 8px}
body.v4 .es-clip-list-rej{opacity:.62}
/* Clips page · status board */
body.v4 .clb-board{display:grid;grid-template-columns:repeat(6,minmax(180px,1fr));gap:12px;align-items:start;overflow-x:auto}
@media (max-width:1200px){body.v4 .clb-board{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){body.v4 .clb-board{grid-template-columns:1fr 1fr}}
body.v4 .clb-col{background:var(--apl-paper-2);border:1px solid var(--apl-rule-soft);border-radius:var(--apl-r);padding:10px;min-width:0}
body.v4 .clb-col-h{display:flex;justify-content:space-between;align-items:center;padding:2px 4px 10px}
body.v4 .clb-col-name{font-size:11px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--apl-ink-3)}
body.v4 .clb-col-n{font-size:11px;font-weight:700;color:var(--apl-ink-4);background:var(--apl-paper);border:1px solid var(--apl-rule-soft);border-radius:999px;padding:1px 8px}
body.v4 .clb-col-body{display:flex;flex-direction:column;gap:8px}
body.v4 .clb-col-empty{font-size:12px;color:var(--apl-ink-5);text-align:center;padding:14px 0}
body.v4 .clb-card{background:var(--apl-paper);border:1px solid var(--apl-rule-soft);border-radius:var(--apl-r-sm);padding:10px 11px;box-shadow:var(--apl-sh)}
body.v4 .clb-title{font-size:13px;font-weight:650;color:var(--apl-ink);line-height:1.35}
body.v4 .clb-ep{font-size:11.5px;font-weight:600;color:var(--apl-ink-3);background:none;border:none;padding:0;margin-top:4px;cursor:pointer;text-align:left;font-family:inherit;display:block}
body.v4 .clb-ep:hover{color:var(--apl-blue)}
body.v4 .clb-meta{display:flex;gap:8px;align-items:center;margin-top:7px;flex-wrap:wrap}
body.v4 .clb-chip{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:999px;background:var(--apl-blue-bg);color:var(--apl-blue-2)}
body.v4 .clb-chip-ai{background:var(--apl-lilac-bg);color:var(--apl-lilac)}
body.v4 .clb-link{font-size:11px;font-weight:650;color:var(--apl-blue);text-decoration:none}
body.v4 .clb-link:hover{text-decoration:underline}
body.v4 .clb-acts{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}
body.v4 .clb-btn{font-size:11.5px;font-weight:650;padding:4px 10px;border-radius:999px;border:1px solid var(--apl-rule);background:var(--apl-paper);color:var(--apl-ink-2);cursor:pointer}
body.v4 .clb-btn:hover{border-color:var(--apl-ink-4);color:var(--apl-ink)}
body.v4 .clb-btn-no{color:var(--apl-cherry)}
body.v4 .clb-rejrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;opacity:.62}
/* ░░░░░░░░░░ end CLIPS PIPELINE ░░░░░░░░░░ */

/* ░░░░░░░░░░ UPLOAD PROGRESS - real percent bars (js/lib/upload-progress.js) ░░░░░░░░░░ */
/* .has-progress switches the Wave 233 indeterminate sweep off and shows a
   real fill driven by xhr.upload.onprogress. Tokens only. */
.es-upload-bar.has-progress{background:var(--line)}
.es-upload-bar.has-progress::before{display:none;animation:none}
.es-upload-bar-fill{position:absolute;top:0;bottom:0;left:0;width:0%;background:var(--cherry);border-radius:3px;transition:width .15s linear}
.es-upload-pct{position:absolute;right:8px;bottom:8px;font-size:11px;font-weight:700;color:var(--cherry);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:1px 8px;line-height:1.5;pointer-events:none}
.es-upload-size{position:absolute;left:8px;bottom:8px;font-size:11px;font-weight:600;color:var(--ink-soft);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:1px 8px;line-height:1.5;pointer-events:none}
.cp-attach-pct{font-size:10px;font-weight:700;color:var(--cherry)}
/* ░░░░░░░░░░ end UPLOAD PROGRESS ░░░░░░░░░░ */

/* ░░░░░░░░░░ SYS_CLIPS - Final Video File element (suggestion cards + lifecycle + schedule) ░░░░░░░░░░ */
.es-clipsx-descript{margin-top:10px;font-size:12.5px;color:var(--ink-soft)}
.es-clipsx-status{margin-top:6px;font-size:12.5px;min-height:0;color:var(--ink-soft)}
.es-clipsx-list{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.es-clipsx-h{font-size:11px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin:6px 0 2px}
.es-clipsx-empty{font-size:12.5px;color:var(--ink-soft);padding:8px 0}
.es-clipsx-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.es-clipsx-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.es-clipsx-card-title{font-size:13px;font-weight:700;color:var(--ink);line-height:1.35}
.es-clipsx-card-reason{font-size:12px;color:var(--ink-soft);line-height:1.45}
.es-clipsx-card-acts{display:flex;gap:8px;margin-top:auto;padding-top:4px}
.es-clipsx-row{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px 12px}
.es-clipsx-row-main{flex:1;min-width:0}
.es-clipsx-row-title{font-size:13px;font-weight:650;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.es-clipsx-row-acts{display:flex;gap:6px;flex:none}
.es-clipsx-platforms{display:flex;flex-wrap:wrap;gap:8px}
.es-clipsx-plat{display:inline-flex;align-items:center;gap:6px;font-size:13px;border:1px solid var(--line);border-radius:999px;padding:5px 12px;cursor:pointer;background:var(--card)}
.cal-event.clip{background:var(--lilac-bg);color:var(--lilac-fg)}
/* ░░░░░░░░░░ end SYS_CLIPS ░░░░░░░░░░ */

/* ░░░░░░░░░░ SYS_CLIPS - Already-in-Descript + Publer wave ░░░░░░░░░░
   One marked block: the "Already in Descript" row under the upload box
   and the Descript project pick-list modal rows. Tokens only. */
.es-clipsx-already{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:10px}
.es-clipsx-already-or{font-size:12.5px;color:var(--ink-soft)}
.es-clipsx-already-input{flex:1;min-width:180px;font-size:13px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink)}
.es-clipsx-dproj{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:9px 12px;cursor:pointer}
.es-clipsx-dproj:hover{border-color:var(--ink-soft)}
.es-clipsx-dproj-name{font-size:13px;font-weight:650;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.es-clipsx-dproj-date{font-size:12px;color:var(--ink-soft);flex:none}
/* ░░░░░░░░░░ end SYS_CLIPS - Already-in-Descript + Publer wave ░░░░░░░░░░ */

/* ░░░░░░░░░░ SYS_CLIPS - 5-step workflow wave ░░░░░░░░░░
   One marked block: the stepper header (visual grammar of the
   sys_newsletter es-nl-rail/es-nl-tick step design) + per-step panels
   for the redesigned Final Video File element. Tokens only. */
.es-clipsx-stepper{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;margin:8px 0 12px;padding:10px 12px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.es-clipsx-stepi{display:inline-flex;align-items:center;gap:8px}
.es-clipsx-steptick{width:20px;height:20px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800}
.es-clipsx-steptick.done{background:var(--c-mint);color:var(--on-mint)}
.es-clipsx-steptick.todo{background:var(--canvas);color:var(--ink-4);border:1px solid var(--line)}
.es-clipsx-stepi.active .es-clipsx-steptick.todo{border-color:var(--cherry);color:var(--cherry)}
.es-clipsx-steplbl{font-size:12px;font-weight:650;color:var(--ink-3)}
.es-clipsx-stepi.active .es-clipsx-steplbl{color:var(--ink-1)}
.es-clipsx-stepi.done .es-clipsx-steplbl{color:var(--ink-3)}
.es-clipsx-steppanel{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-top:10px;background:var(--card)}
.es-clipsx-steppanel.active{border-color:var(--cherry)}
.es-clipsx-steppanel.pending{opacity:.6}
.es-clipsx-panelhead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.es-clipsx-panelhead b{font-size:13px;color:var(--ink-1)}
.es-clipsx-panelhead span{font-size:11.5px;color:var(--ink-3)}
.es-clipsx-readygrp{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.es-clipsx-chanrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
/* ░░░░░░░░░░ end SYS_CLIPS - 5-step workflow wave ░░░░░░░░░░ */

/* ░░░░░░░░░░ TASK_SUBSCRIPTIONS - per-task email subscribe (0133) ░░░░░░░░░░
   One marked block: the per-row bell button in both checklist editors and
   the small anchored popover with the two subscribe checkboxes
   ("email me when it OPENS" / "when it is COMPLETE"). Tokens only. */
.cke-row-sub{display:inline-flex;align-items:center;justify-content:center}
.cke-row-edit svg{width:15px;height:15px;display:block}
.cke-row-sub:hover{color:var(--cherry)}
.tsub-pop{position:absolute;z-index:1300;min-width:240px;max-width:300px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);padding:12px 14px}
.tsub-pop-title{font-size:13px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tsub-pop-sub{font-size:11.5px;color:var(--ink-soft);margin:2px 0 8px}

/* ── Notification preferences tab (Episodes + Sponsors) ───────── */
.np-wrap{max-width:760px}
.np-intro{margin-bottom:18px}
.np-intro-title{font-size:15px;font-weight:700;color:var(--ink)}
.np-intro-sub{font-size:12.5px;color:var(--ink-soft);margin-top:4px;line-height:1.55}
.np-stage{margin-bottom:18px}
.np-stage-h{font-size:11px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}
.np-stage-n{opacity:0.6;font-weight:600;margin-left:4px}
.np-rows{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.np-row{border-top:1px solid var(--line)}
.np-row:first-child{border-top:none}
.np-row-main{display:flex;align-items:center;gap:10px;padding:11px 16px}
.np-row:hover .np-row-main{background:var(--row-hover,rgba(0,0,0,0.025))}
.np-row-label{flex:1;min-width:0;font-size:13.5px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.np-row-pills{display:flex;gap:6px;flex-shrink:0}
.np-pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase}
.np-pill-open{background:var(--blue-soft,rgba(0,113,227,0.10));color:var(--blue,var(--apl-blue))}
.np-pill-done{background:var(--ok-soft,rgba(52,199,89,0.12));color:var(--ok,var(--apl-green))}
.np-pill-none{background:var(--chip,rgba(0,0,0,0.05));color:var(--ink-soft);font-weight:600;text-transform:none;letter-spacing:0}
.np-row-act{flex-shrink:0}
.np-row-opts{display:flex;gap:22px;padding:4px 16px 13px;flex-wrap:wrap}
.np-opt{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink);cursor:pointer}
.np-row-open .np-row-main{background:var(--row-hover,rgba(0,0,0,0.025))}
.tsub-pop-opt{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:13px;color:var(--ink);cursor:pointer}
.tsub-pop-opt input{flex:none}
/* ░░░░░░░░░░ end TASK_SUBSCRIPTIONS - per-task email subscribe (0133) ░░░░░░░░░░ */

/* ── QA wave: SP ── */
/* QA-SP-1 - Sponsors panel (Inventory tab) view switch. The old
   .monday-camp-toggle pills overflowed the 320px panel header and wrapped.
   Replaced with a compact apple-glass segmented control on its own row
   under the panel label: hairline track, equal-width segments, white pill
   highlight on the active segment (same grammar as .wk-cal-modes / .seg). */
body.v4 .inv-head.inv-head-stack{
  flex-direction:column; align-items:stretch; gap:9px; padding:13px 14px 12px;
}
body.v4 .inv-spon-seg{
  display:flex; width:100%;
  background:rgba(0,0,0,0.045);
  border:1px solid var(--g-border);
  border-radius:var(--r-pill);
  padding:2px; gap:0;
}
body.v4 .inv-spon-seg-btn{
  flex:1 1 0; min-width:0;
  display:inline-flex; align-items:center; justify-content:center; gap:4px;
  padding:5px 4px;
  border:none; background:transparent;
  font-family:inherit; font-size:11.5px; font-weight:600;
  letter-spacing:-0.005em; color:var(--g-ink-3);
  border-radius:var(--r-pill); cursor:pointer;
  white-space:nowrap; overflow:hidden;
  transition:color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}
body.v4 .inv-spon-seg-btn:hover{ color:var(--g-ink-1); }
body.v4 .inv-spon-seg-btn.on{
  background:var(--g-surface); color:var(--g-ink-1); font-weight:700;
  box-shadow:0 1px 3px rgba(0,0,0,0.12), inset 0 0 0 1px rgba(0,0,0,0.03);
}
body.v4 .inv-spon-seg-n{
  font-size:10px; font-weight:700; line-height:1;
  color:var(--g-ink-4); font-variant-numeric:tabular-nums;
}
body.v4 .inv-spon-seg-btn.on .inv-spon-seg-n{ color:var(--g-ink-2); }
/* Dark mode - mirror the global dark segmented treatment (see .seg button.on dark override). */
body.v4.dark .inv-spon-seg{ background:rgba(255,255,255,0.06); }
body.v4.dark .inv-spon-seg-btn.on{
  background:var(--black);
  box-shadow:0 1px 3px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.16);
}

/* ── QA wave: SS ── */
/* QA-SS-1 - Studio Schedule source toggle now uses the standard .tabs/.tab
   pill strip. Scoped fixes so it sits flush inside the frosted subbar. */
body.v4 .tabs.ss-source-tabs { margin-bottom: 0; }
body.v4 .tabs.ss-source-tabs .tab.tab { padding: 6px 14px; font-size: 12.5px; }

/* QA-SS-2 - multi-person busy segments inherit the original hatched/lined
   busy treatment (the .ss-event.ss-personal pattern) instead of pastel
   fills. Segment shape kept from .ss-busy-seg; fill + ink set here. */
body.v4 .ss-busy-seg.ss-personal {
  background: repeating-linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.08),
    rgba(0, 0, 0, 0.08) 4px,
    rgba(0, 0, 0, 0.04) 4px,
    rgba(0, 0, 0, 0.04) 8px
  );
  border: 1px solid rgba(0, 0, 0, 0.18);
  color: var(--g-ink-3);
  font-weight: 500;
}

/* ── QA wave: GI ── */
/* QA-GI-1 - chart hover tooltip widened so typical rows
   ("Audio (Libsyn + Acast)" + value) no longer wrap. */
.gi-chart-tooltip { min-width: 230px; max-width: 340px; }
/* QA-GI-3 - By-platform rows: downloads and share % are two separate
   fixed-width right-aligned columns so all rows line up. */
.gi-bar-row.gi-bar-row-4 { grid-template-columns: 100px 1fr 72px 52px; }
.gi-bar-pct { text-align: right; font-size: 11.5px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 600px) {
  .gi-bar-row.gi-bar-row-4 { grid-template-columns: 84px 1fr 60px 44px; }
}

/* ── QA wave: GU ── */
/* QA-GU-1 - guest detail: the appearances panel inside .gd-main reuses the
   .gd-rail-list class, whose base rule (margin-top:16px + border-top) was
   written for the rail's inner meta list. Inside the main column it pushed
   the panel below the top of the guest card, so the two panels didn't
   top-align. Zero it out when the list is a direct child of .gd-main; the
   panel's own inline padding/background take over. */
body.v4 .gd-main > .gd-rail-list {
  margin-top: 0;
  border-top: none;
}

/* ── QA wave: QA-GEN-1 - What's New redesign (ver3 cards + tour strip) ── */
/* Tour strip - sits between the popup header and the release list.
   Frosted blue surface, copy on the left, primary play button right. */
body.v4 .ver-tour-strip{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 28px; border-bottom:1px solid var(--g-border);
  background:linear-gradient(90deg, rgba(0,113,227,0.07), rgba(94,92,230,0.06));
}
body.v4 .ver-tour-copy{ flex:1; min-width:0; }
body.v4 .ver-tour-t{
  font-family:var(--g-fd); font-size:13px; font-weight:700;
  color:var(--g-ink-1); letter-spacing:-0.005em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
body.v4 .ver-tour-s{ font-size:11.5px; color:var(--g-ink-3); margin-top:2px; }
body.v4 .ver-tour-btn{
  display:inline-flex; align-items:center; gap:7px; flex-shrink:0;
  padding:9px 18px; border:none; border-radius:var(--r-pill);
  background:var(--g-blue); color:rgba(255,255,255,1);
  font-family:var(--g-fd); font-size:12.5px; font-weight:700; letter-spacing:-0.005em;
  cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.14);
  transition:filter .14s, transform .14s;
}
body.v4 .ver-tour-btn:hover{ filter:brightness(1.08); transform:translateY(-1px); }
body.v4 .ver-tour-btn svg{ flex:none; }
body.v4.dark .ver-tour-strip{
  background:linear-gradient(90deg, rgba(56,151,255,0.12), rgba(142,139,255,0.10));
  border-color:rgba(255,255,255,.08);
}

/* Release card - version grouped, headline-first, generous spacing. */
body.v4 .ver3-card{
  background:var(--g-surface); border:1px solid var(--g-border);
  border-radius:var(--r-lg); padding:20px 22px 18px;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
  transition:border-color .15s ease;
}
body.v4 .ver3-card:hover{ border-color:rgba(0,113,227,0.18); }
body.v4 .ver3-card.is-new{ border-color:rgba(0,113,227,0.28); }
body.v4 .ver3-meta{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
body.v4 .ver3-num{
  font-family:var(--g-fd); font-weight:800; font-size:12.5px; letter-spacing:-0.005em;
  color:var(--g-blue); background:rgba(0,113,227,0.08);
  padding:2px 10px; border-radius:var(--r-pill); flex-shrink:0;
}
body.v4 .ver3-date{ font-size:11.5px; color:var(--g-ink-4); font-weight:600; letter-spacing:0.01em; }
body.v4 .ver3-new{
  font-size:10px; font-weight:800; letter-spacing:0.06em; text-transform:uppercase;
  color:rgba(255,255,255,1); background:var(--cherry); padding:2px 9px; border-radius:var(--r-pill);
  margin-left:auto; flex-shrink:0;
}
body.v4 .ver3-headline{
  margin:0 0 14px; font-family:var(--g-fd);
  font-size:17px; font-weight:800; letter-spacing:-0.015em; line-height:1.3;
  color:var(--g-ink-1);
}
body.v4 .ver3-changes{ display:flex; flex-direction:column; }
body.v4 .ver3-change{
  display:flex; align-items:flex-start; gap:14px;
  padding:11px 0;
  border-top:1px solid var(--rule-soft);
}
body.v4 .ver3-change:last-child{ padding-bottom:2px; }
body.v4 .ver3-text{ margin:0; flex:1; min-width:0; font-size:13px; line-height:1.6; color:var(--g-ink-2); }
body.v4 .ver3-chip{
  flex-shrink:0; min-width:78px; text-align:center;
  padding:3px 10px; border-radius:var(--r-pill);
  font-size:10px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
  margin-top:2px;
}
body.v4 .ver3-chip-lilac { background:var(--c-lilac);  color:var(--on-lilac); }
body.v4 .ver3-chip-mint  { background:var(--c-mint);   color:var(--on-mint); }
body.v4 .ver3-chip-sky   { background:var(--c-sky);    color:var(--on-sky); }
body.v4 .ver3-chip-peach { background:var(--c-peach);  color:var(--on-amber); }
body.v4 .ver3-chip-butter{ background:var(--c-butter); color:var(--on-amber); }
body.v4 .ver3-chip-rose  { background:var(--c-rose);   color:var(--cherry); }
body.v4 .ver3-chip-sage  { background:var(--c-sage);   color:var(--good-fg); }
/* dark - translucent glass card with light inks (pastel chips flip via tokens) */
body.v4.dark .ver3-card{
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.10);
}
body.v4.dark .ver3-card.is-new{ border-color:rgba(56,151,255,.45); }
body.v4.dark .ver3-headline{ color:rgba(255,255,255,.96); }
body.v4.dark .ver3-text{ color:rgba(255,255,255,.82); }
body.v4.dark .ver3-change{ border-top-color:rgba(255,255,255,.08); }
body.v4.dark .ver3-num{ background:rgba(56,151,255,.18); }

/* ── QA wave: AIC ── */
/* QA-AIC-1 · Chat - pinned "Everyone" channel above the department rail.
   The default target: ask anything, the right director answers. Reuses the
   frosted persona-row grammar but reads as a channel card so it stands
   apart from the collapsed department groups underneath it. */
body.v4 .chat2-everyone {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
  border-radius: 12px;
  border: 1px solid rgba(0, 113, 227, 0.16);
  background: rgba(0, 113, 227, 0.06);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
body.v4 .chat2-everyone:hover { background: rgba(0, 113, 227, 0.10); }
body.v4 .chat2-everyone.on {
  background: rgba(0, 113, 227, 0.12);
  border-color: rgba(0, 113, 227, 0.32);
}
body.v4 .chat2-everyone-av {
  width: 28px; height: 28px;
  font-size: 9px;
  flex-shrink: 0;
}
body.v4 .chat2-everyone-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
body.v4 .chat2-everyone-name {
  font-family: var(--g-fd);
  font-size: 13px;
  font-weight: 700;
  color: var(--g-ink-1);
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.v4 .chat2-everyone.on .chat2-everyone-name { color: var(--g-blue); }
body.v4 .chat2-everyone-note {
  font-size: 10.5px;
  color: var(--g-ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* QA-AIC-2 · Chat - typing bubble while the AI thinks: three bouncing dots
   inside an assistant bubble (same beat Keith's .kc-dots uses), with a line
   of rotating status microcopy fading in underneath. */
body.v4 .chat2-typing-bubble {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 10px 16px;
}
body.v4 .chat2-dots { display: inline-flex; gap: 5px; align-items: center; }
body.v4 .chat2-dots i {
  width: 7px; height: 7px;
  border-radius: var(--r-pill);
  background: var(--g-ink-4);
  display: inline-block;
  animation: chat2-bounce 1.2s ease-in-out infinite;
}
body.v4 .chat2-dots i:nth-child(2) { animation-delay: 0.18s; }
body.v4 .chat2-dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes chat2-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
  40%           { transform: translateY(-5px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  body.v4 .chat2-dots i { animation: none; opacity: 0.7; }
}
body.v4 .chat2-typing-status {
  font-size: 11px;
  font-style: italic;
  color: var(--g-ink-4);
  margin-top: 5px;
  padding: 0 4px;
}
body.v4 .chat2-status-in { animation: chat2-status-fade 360ms ease; }
@keyframes chat2-status-fade {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* QA-AIC-3 · Chat - markdown presentation inside assistant bubbles.
   The base bubble keeps white-space:pre-wrap for Peter's plain text; once
   the reply renders through mdToHtml() the <p>/<ul>/<h3> structure carries
   the line breaks itself, so pre-wrap must come OFF or every newline
   double-spaces. 13.5px body, tight typographic rhythm, no raw asterisks. */
body.v4 .chat2-msg-bubble.chat2-md {
  white-space: normal;
  font-size: 13.5px;
  line-height: 1.6;
}
body.v4 .chat2-md p { margin: 0 0 8px; }
body.v4 .chat2-md p:last-child,
body.v4 .chat2-md ul:last-child,
body.v4 .chat2-md ol:last-child { margin-bottom: 0; }
body.v4 .chat2-md h3,
body.v4 .chat2-md h4 {
  font-family: var(--g-fd);
  font-weight: 700;
  color: var(--g-ink-1);
  letter-spacing: -0.01em;
  margin: 12px 0 6px;
}
body.v4 .chat2-md h3 { font-size: 14px; }
body.v4 .chat2-md h4 { font-size: 13px; }
body.v4 .chat2-md h3:first-child,
body.v4 .chat2-md h4:first-child { margin-top: 0; }
body.v4 .chat2-md ul,
body.v4 .chat2-md ol { margin: 0 0 8px; padding-left: 20px; }
body.v4 .chat2-md li { margin: 3px 0; }
body.v4 .chat2-md strong { font-weight: 650; color: var(--g-ink-1); }
body.v4 .chat2-md code {
  font-family: 'SF Mono', Monaco, monospace;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 5px;
  padding: 1.5px 5px;
}

/* dark - frosted blue channel + bubbles flip via the same token overrides */
body.v4.dark .chat2-everyone {
  background: rgba(56, 151, 255, 0.10);
  border-color: rgba(56, 151, 255, 0.22);
}
body.v4.dark .chat2-everyone:hover { background: rgba(56, 151, 255, 0.15); }
body.v4.dark .chat2-everyone.on {
  background: rgba(56, 151, 255, 0.18);
  border-color: rgba(56, 151, 255, 0.40);
}
body.v4.dark .chat2-md code { background: rgba(255, 255, 255, 0.10); }

/* ── QA wave: CC ── */
/* Content Calendar redesign (QA-CC-1/2/3). Apple-glass grammar lifted
   from the Studio Schedule week grid + dashboard calendar panels:
   frosted header bar, hairline month cells, blue today pill, compact
   pastel chips with a type icon, pure-CSS glass tooltip. Type→tone
   map (keyed in the legend): show=cherry · clip=sky(blue) ·
   social=lilac · newsletter=butter. Scheduled items render dashed
   with a softer fill + small clock glyph (QA-CC-2). All tones use
   --g-* tokens so dark mode flips for free. */

/* - Header bar: month title + legend (left) · nav (right) - */
body.v4 .ccal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 18px;
  margin-bottom: 12px;
  background: var(--g-paper);
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-border);
  border-radius: var(--g-r);
  box-shadow: var(--g-sh);
}
body.v4 .ccal-bar-l {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  min-width: 0;
}
body.v4 .ccal-month {
  font-family: var(--g-fd);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--g-ink-1);
  white-space: nowrap;
}

/* - Legend (QA-CC-3) - same grammar as the Studio Schedule key:
     small swatch mirroring the actual chip treatment + 11px label - */
body.v4 .ccal-legend {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding-left: 16px;
  border-left: 1px solid var(--g-rule);
}
body.v4 .ccal-key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--g-ink-3);
  white-space: nowrap;
}
body.v4 .ccal-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
body.v4 .ccal-swatch.show       { background: var(--g-cherry-bg); border: 1px solid var(--g-cherry); }
body.v4 .ccal-swatch.clip       { background: var(--g-blue-soft); border: 1px solid var(--g-blue); }
body.v4 .ccal-swatch.social     { background: var(--g-lilac-bg);  border: 1px solid var(--g-lilac); }
body.v4 .ccal-swatch.newsletter { background: var(--g-butter-bg); border: 1px solid var(--g-butter); }
body.v4 .ccal-swatch.sched {
  background: transparent;
  border: 1.5px dashed var(--g-ink-4);
}

/* - Month nav: frosted pill buttons - */
body.v4 .ccal-nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
body.v4 .ccal-navbtn {
  font-family: var(--g-fd);
  font-size: 12px;
  font-weight: 600;
  color: var(--g-ink-2);
  background: var(--g-paper-3);
  border: 1px solid var(--g-rule);
  border-radius: var(--r-pill);
  padding: 5px 14px;
  cursor: pointer;
  line-height: 1.4;
  transition: background var(--g-d-fast) var(--g-ease), color var(--g-d-fast) var(--g-ease);
}
body.v4 .ccal-navbtn.chev {
  width: 30px;
  padding: 5px 0;
  text-align: center;
  font-size: 15px;
  line-height: 1.1;
}
body.v4 .ccal-navbtn:hover { background: var(--g-surface); color: var(--g-ink-1); }
body.v4 .ccal-navbtn.today { color: var(--g-blue); }
body.v4 .ccal-navbtn.today:hover { background: var(--g-blue-soft); }

/* - Month grid: hairline cells (QA-CC-1) - */
body.v4 .ccal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--g-paper);
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-border);
  border-radius: var(--g-r-lg);
  box-shadow: var(--g-sh);
  overflow: hidden;
}
body.v4 .ccal-dow {
  font-family: var(--g-fd);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g-ink-4);
  padding: 10px 12px;
  border-bottom: 1px solid var(--g-rule);
}
body.v4 .ccal-cell {
  min-height: 104px;
  padding: 8px 8px 10px;
  border-right: 1px solid var(--g-rule-soft);
  border-bottom: 1px solid var(--g-rule-soft);
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
body.v4 .ccal-cell:nth-child(7n + 7) { border-right: none; }
body.v4 .ccal-cell:nth-last-child(-n + 7) { border-bottom: none; }
body.v4 .ccal-cell.muted { background: var(--g-rule-soft); }
body.v4 .ccal-cell.muted .ccal-date { color: var(--g-ink-4); font-weight: 500; }
body.v4 .ccal-cell.today { background: var(--g-blue-soft); }
body.v4 .ccal-date {
  font-family: var(--g-fd);
  font-size: 12px;
  font-weight: 600;
  color: var(--g-ink-2);
  margin-bottom: 2px;
}
body.v4 .ccal-cell.today .ccal-date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--g-blue);
  color: var(--g-surface);
  font-weight: 700;
  align-self: flex-start;
}

/* - Content chips: compact, rounded, type icon + truncated title - */
body.v4 .ccal-chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.35;
  padding: 3px 8px;
  border-radius: 7px;
  border: 1px solid transparent;
  cursor: default;
  min-width: 0;
  transition: filter var(--g-d-fast) var(--g-ease);
}
body.v4 .ccal-chip:hover { filter: brightness(0.97); }
body.v4 .ccal-chip:focus-visible {
  outline: 2px solid var(--g-blue);
  outline-offset: 1px;
}
body.v4 .ccal-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
body.v4 i.ccal-chip-ic,
body.v4 svg.ccal-chip-ic {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  stroke-width: 2.4;
}

/* Type tones - match the legend swatches exactly */
body.v4 .ccal-chip.show       { background: var(--g-cherry-bg); color: var(--g-cherry); }
body.v4 .ccal-chip.clip       { background: var(--g-blue-soft); color: var(--g-blue); }
body.v4 .ccal-chip.social     { background: var(--g-lilac-bg);  color: var(--g-lilac); }
body.v4 .ccal-chip.newsletter { background: var(--g-butter-bg); color: var(--g-butter); }

/* Scheduled (QA-CC-2): dashed outline, softer fill, clock glyph */
body.v4 .ccal-chip.is-scheduled { border-style: dashed; }
body.v4 .ccal-chip.is-scheduled.show       { background: rgba(184, 0, 43, 0.05);  border-color: var(--g-cherry); }
body.v4 .ccal-chip.is-scheduled.clip       { background: rgba(0, 113, 227, 0.05); border-color: var(--g-blue); }
body.v4 .ccal-chip.is-scheduled.social     { background: rgba(94, 92, 230, 0.05); border-color: var(--g-lilac); }
body.v4 .ccal-chip.is-scheduled.newsletter { background: rgba(146, 102, 13, 0.05); border-color: var(--g-butter); }
body.v4 .ccal-chip.is-scheduled .ccal-chip-label::after {
  content: ' ◷';
  font-size: 10px;
  opacity: 0.75;
}

/* - Glass tooltip: pure CSS reveal on hover/focus - */
body.v4 .ccal-tip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 40;
  min-width: 190px;
  max-width: 260px;
  padding: 10px 12px;
  background: var(--g-paper-3);
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-border);
  border-radius: var(--g-r-sm);
  box-shadow: var(--g-sh-2);
  display: flex;
  flex-direction: column;
  gap: 5px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(3px);
  transition: opacity var(--g-d) var(--g-ease), transform var(--g-d) var(--g-ease), visibility var(--g-d);
  pointer-events: none;
  white-space: normal;
  cursor: auto;
}
body.v4 .ccal-chip:hover .ccal-tip,
body.v4 .ccal-chip:focus-within .ccal-tip,
body.v4 .ccal-chip:focus .ccal-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* First two rows of the grid: drop the tooltip below the chip so it
   isn't clipped by the viewport / hidden behind the header bar. */
body.v4 .ccal-cell:nth-child(-n + 21) .ccal-tip {
  bottom: auto;
  top: calc(100% + 6px);
}
body.v4 .ccal-tip-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-weight: 500;
}
body.v4 .ccal-tip-k {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--g-ink-4);
  flex-shrink: 0;
}
body.v4 .ccal-tip-v {
  font-size: 12px;
  color: var(--g-ink-1);
  text-align: right;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* - Dark mode: tokens flip; only hand-tuned alphas need overrides - */
body.v4.dark .ccal-chip.is-scheduled.show       { background: rgba(255, 59, 95, 0.08); }
body.v4.dark .ccal-chip.is-scheduled.clip       { background: rgba(56, 151, 255, 0.08); }
body.v4.dark .ccal-chip.is-scheduled.social     { background: rgba(142, 139, 255, 0.08); }
body.v4.dark .ccal-chip.is-scheduled.newsletter { background: rgba(232, 194, 90, 0.08); }
body.v4.dark .ccal-cell.today .ccal-date { color: var(--g-ink-1); }

/* - Responsive: legend wraps under the month title; cells shrink - */
@media (max-width: 900px) {
  body.v4 .ccal-legend { padding-left: 0; border-left: none; width: 100%; }
  body.v4 .ccal-cell { min-height: 76px; padding: 6px 5px 8px; }
  body.v4 .ccal-chip { font-size: 10px; padding: 2px 6px; }
}

/* ── QA wave: KE ── */
/* QA-KE-1 - the brief head is a DARK panel (--hero-1): every token that
   renders inside it must be light. The K01 pipeline strip + situation list
   previously inherited page inks (dark-on-dark - unreadable). */
.keithb-head .keithb-pipeline{background:rgba(255,255,255,.07)}
.keithb-head .keithb-pipeline-eye{color:rgba(255,255,255,.55)}
.keithb-head .keithb-stage-pill{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.14)}
.keithb-head .keithb-stage-pill .keithb-stage-n{color:var(--on-accent)}
.keithb-head .keithb-stage-l{color:rgba(255,255,255,.62)}
.keithb-head .keithb-situation{color:var(--on-accent)}
.keithb-head .keithb-situation-list li{color:rgba(255,255,255,.82)}
.keithb-head .keithb-empty,.keithb-head .keithb-err{color:rgba(255,255,255,.6)}
/* QA-KE-1 - "today at a glance" strip in the dark head */
.keithb-today{display:grid;grid-template-columns:repeat(auto-fit,minmax(86px,1fr));gap:8px;margin:12px 0 2px}
.keithb-today-cell{display:flex;flex-direction:column;gap:2px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:9px 11px}
.keithb-today-n{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1;color:var(--on-accent)}
.keithb-today-l{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:rgba(255,255,255,.58)}

/* QA-KE-2 - Keith reply presentation: refined authored cards */
.kc-name{display:flex;align-items:baseline;gap:7px;padding:0 2px}
.kc-name-n{font-size:11.5px;font-weight:800;letter-spacing:.01em;color:var(--ink-2)}
.kc-name-t{font-size:10.5px;font-weight:600;color:var(--ink-4);font-variant-numeric:tabular-nums}
.kc-assistant .kc-bubble{background:var(--surface);backdrop-filter:var(--blur);border:1px solid var(--line-2);border-radius:14px;border-top-left-radius:5px;box-shadow:var(--sh);padding:12px 15px}
.kc-assistant .kc-ul li{line-height:1.5}
.kc-assistant .kc-ul li::marker{color:var(--ink-4)}
.kc-suggested .kc-sg{backdrop-filter:var(--blur);box-shadow:var(--sh);border-radius:12px;padding:8px 11px;transition:border-color .12s}
.kc-suggested .kc-sg:hover{border-color:var(--apl-blue)}
.kc-object{transition:border-color .12s,transform .12s,box-shadow .12s}
.kc-object:hover{border-color:var(--apl-blue);transform:translateY(-1px)}
.kc-goto-show{font-size:12px;padding:6px 13px;text-decoration:none;white-space:nowrap}
.kc-el-head-row{display:flex;align-items:center;justify-content:space-between;gap:10px}

/* QA-KE-4 - line chart (house Growth-Intelligence trend grammar) */
.kc-linechart{display:block;width:100%;height:auto;margin-top:2px}
.kc-lc-line{fill:none;stroke:var(--cherry);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.kc-lc-area{fill:var(--cherry);fill-opacity:.1;stroke:none}
.kc-lc-dot{fill:var(--cherry)}
.kc-lc-xl{font-size:9.5px;fill:var(--ink-4);font-family:inherit}
.kc-lc-foot{display:flex;justify-content:space-between;margin-top:6px;font-size:10.5px;font-weight:700;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* QA-KE-4 - table renderer (data-table house grammar, chat-sized) */
.kc-tablewrap{overflow-x:auto}
.kc-table{width:100%;border-collapse:collapse;font-size:12.5px}
.kc-table th{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-4);text-align:left;padding:7px 10px;border-bottom:1px solid var(--line-2);white-space:nowrap}
.kc-table td{padding:8px 10px;border-bottom:1px solid var(--rule-soft);color:var(--ink-1);line-height:1.35}
.kc-table tbody tr:last-child td{border-bottom:0}
.kc-table tbody tr:hover td{background:rgba(0,0,0,.025)}
.kc-table th.num,.kc-table td.num{text-align:right;font-variant-numeric:tabular-nums}
.kc-table td.num{font-weight:700}

/* QA-KE-5 - Keith toolbar (name row + expand / plan actions) */
.kc-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 18px;border-bottom:1px solid var(--line-2);background:var(--surface);backdrop-filter:var(--blur)}
.kc-toolbar-id{display:flex;align-items:center;gap:9px;min-width:0}
.kc-toolbar-av{flex:0 0 28px;width:28px;height:28px;border-radius:var(--r-pill);display:grid;place-items:center;background:var(--lilac-bg);color:var(--apl-lilac)}
.kc-toolbar-av svg{width:17px;height:17px}
.kc-toolbar-name{font-size:14px;font-weight:800;color:var(--ink-1);letter-spacing:-.01em}
.kc-toolbar-sub{font-size:11px;font-weight:600;color:var(--ink-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kc-toolbar-acts{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.kc-tool{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--ink-2);background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-pill);padding:7px 13px;cursor:pointer;transition:border-color .12s,color .12s,background .12s;font-family:inherit}
.kc-tool svg{width:15px;height:15px}
.kc-tool:hover{border-color:var(--apl-blue);color:var(--apl-blue)}
.kc-tool-ic{padding:7px 9px}
/* QA-KE-5 - full-screen Keith: same conversation node, bigger home */
.kc-fs-overlay{display:grid;place-items:center;padding:24px}
.kc-fs-shell{width:min(1060px,96vw);height:min(92vh,940px);display:flex}
.kc-fs-shell .keith-convo{flex:1;min-height:0;max-height:100%}
.kc-fs-shell .kc-thread{max-height:none}

/* QA-KE-6 - Plan my day popup */
.kc-plan-modal{width:min(680px,94vw);max-height:84vh;display:flex;flex-direction:column}
.kc-plan-body{flex:1 1 auto;overflow-y:auto;padding:18px 22px 22px}
.kc-plan-load,.kc-plan-empty{font-size:13px;color:var(--ink-3);padding:14px 0}
.kc-plan-list{display:flex;flex-direction:column;gap:9px}
.kc-plan-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--sh)}
.kc-plan-kind{flex:0 0 auto;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:4px 9px;border-radius:var(--r-pill);white-space:nowrap}
.kc-plan-main{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;min-width:0}
.kc-plan-t{font-size:13.5px;font-weight:700;color:var(--ink-1);line-height:1.3}
.kc-plan-m{font-size:12px;color:var(--ink-3);line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kc-plan-acts{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.kc-plan-send{font-size:12px;padding:7px 13px}
.kc-plan-del{width:28px;height:28px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:var(--surface);color:var(--ink-4);font-size:16px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:color .12s,border-color .12s}
.kc-plan-del:hover{color:var(--apl-cherry);border-color:var(--apl-cherry)}

/* QA-KE-7 - Useful Prompts: a contained, designed strip (frosted card,
   eyebrow label, pill chips, soft lilac gradient bleed) */
.kc-suggest-wrap{margin:12px 18px 18px;padding:13px 16px 15px;background:linear-gradient(135deg,var(--c-lilac) 0%,var(--surface) 38%);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--sh);backdrop-filter:var(--blur)}
.kc-suggest-wrap .kc-suggest-h{display:flex;align-items:center;gap:6px;color:var(--on-lilac);margin-bottom:9px}
.kc-suggest-wrap .kc-chip{background:var(--surface);border-color:var(--rule-soft);box-shadow:var(--sh);transition:border-color .12s,color .12s,transform .12s}
.kc-suggest-wrap .kc-chip:hover{border-color:var(--apl-lilac);color:var(--on-lilac);transform:translateY(-1px)}

/* ── QA wave: AIT ── */
/* QA-AIT-1 - AI Team department org cards. Frosted (Liquid Glass)
   cards, one per department; pastel accent per dept via the --dept-*
   custom properties the renderer sets inline from the root token set.
   Director prominent at the top (avatar chip + name + role), member
   agents as smaller rows beneath. */
body.v4 .aiorg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;margin-top:14px;align-items:start}
body.v4 .aiorg-card{position:relative;display:flex;flex-direction:column;background:rgba(255,255,255,.65);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid rgba(0,0,0,.06);border-radius:14px;overflow:hidden}
body.v4 .aiorg-stripe{height:4px;background:var(--dept-fg,var(--cherry))}
body.v4 .aiorg-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:14px 16px 10px}
body.v4 .aiorg-name{font-weight:800;font-size:15px;color:var(--g-ink-1,var(--ink));letter-spacing:-.01em}
body.v4 .aiorg-remit{font-size:11.5px;color:var(--g-ink-3,var(--ink-soft));line-height:1.45;margin-top:2px}
body.v4 .aiorg-count{font-size:10.5px;font-weight:700;color:var(--g-ink-4,var(--muted));text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;padding-top:2px}
/* Director - the prominent block at the top of every card */
body.v4 .aiorg-director{display:flex;align-items:center;gap:10px;margin:0 12px 8px;padding:9px 10px;border:1px solid rgba(0,0,0,.05);border-radius:11px;background:var(--dept-bg,rgba(255,255,255,.55));cursor:pointer;font-family:inherit;text-align:left;width:calc(100% - 24px);transition:transform 120ms ease,box-shadow 120ms ease}
body.v4 .aiorg-director:hover{transform:translateY(-1px);box-shadow:0 2px 10px rgba(0,0,0,.07)}
body.v4 .aiorg-director-text{display:flex;flex-direction:column;min-width:0}
body.v4 .aiorg-director-name{font-size:13.5px;font-weight:700;color:var(--g-ink-1,var(--ink));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.v4 .aiorg-director-role{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--dept-fg,var(--ink-soft));margin-top:1px}
body.v4 .aiorg-nodir{margin:0 16px 8px}
/* Avatar chips - initials circle. Director = filled in the dept colour;
   agents = soft tint of the same hue. */
body.v4 .aiorg-avatar{flex:0 0 auto;display:grid;place-items:center;border-radius:50%;font-weight:800;letter-spacing:.02em}
body.v4 .aiorg-avatar--dir{width:36px;height:36px;font-size:12.5px;background:var(--dept-fg,var(--cherry));color:rgba(255,255,255,1)}
body.v4 .aiorg-avatar--agt{width:24px;height:24px;font-size:9.5px;background:var(--dept-bg,var(--neutral-bg));color:var(--dept-fg,var(--ink-mid));border:1px solid rgba(0,0,0,.05)}
/* Member agents - smaller rows beneath the director */
body.v4 .aiorg-agents{display:flex;flex-direction:column;gap:2px;padding:0 12px 8px}
body.v4 .aiorg-agent{display:flex;align-items:center;gap:9px;padding:5px 10px;border:none;border-radius:9px;background:transparent;cursor:pointer;font-family:inherit;text-align:left;width:100%;transition:background 120ms ease}
body.v4 .aiorg-agent:hover{background:rgba(0,0,0,.04)}
body.v4 .aiorg-agent-name{flex:1;min-width:0;font-size:12.5px;font-weight:600;color:var(--g-ink-2,var(--ink-mid));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.v4 .aiorg-agent-meta{font-size:10.5px;font-weight:700;color:var(--g-ink-4,var(--muted));font-variant-numeric:tabular-nums}
body.v4 .aiorg-actions{margin-top:auto;display:flex;justify-content:flex-end;padding:6px 12px 10px;border-top:1px solid var(--line-soft,var(--line))}
/* QA-AIT-2a - agenda/findings/actions section labels inside the
   existing .dept-meeting block (dept cards + board report). */
body.v4 .dept-meeting-sec{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--g-ink-4,var(--muted));margin:9px 0 4px}
body.v4 .board-report-body{padding:0 0 4px}
body.v4 .board-report-body .dept-meeting{border-top:none;background:transparent;padding:12px 18px 14px}

/* QA-AIT-2c - AI Calendar: staggered weekly meeting schedule grid.
   Studio Schedule grammar (days down the left, time slots across the
   top). Department slots paint in their dept colour via --dept-*;
   the board meeting is cherry - clearly different. */
body.v4 .aical-card{margin-bottom:16px}
body.v4 .aical-wrap{padding:12px 14px 14px}
body.v4 .aical-grid{display:grid;gap:4px;padding:12px;background:rgba(255,255,255,.65);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid rgba(0,0,0,.06);border-radius:14px;overflow-x:auto}
body.v4 .aical-head{font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--g-ink-4,var(--muted));padding:8px 6px;text-align:center;border-bottom:1px solid rgba(0,0,0,.05)}
body.v4 .aical-corner{border-bottom:1px solid rgba(0,0,0,.05)}
body.v4 .aical-day{display:flex;align-items:center;padding:12px 10px;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--g-ink-4,var(--muted));border-right:1px solid rgba(0,0,0,.05)}
body.v4 .aical-day.aical-today{color:var(--cherry)}
body.v4 .aical-cell{min-height:52px;border-radius:var(--r-sm);border:1px solid rgba(0,0,0,.03);display:flex;flex-direction:column;gap:3px;padding:3px}
body.v4 .aical-cell.aical-today{background:rgba(184,0,43,.03)}
body.v4 .aical-event{flex:1;display:flex;flex-direction:column;justify-content:center;gap:1px;padding:6px 10px;border-radius:var(--r-sm);background:var(--dept-bg,var(--neutral-bg));border:1px solid rgba(0,0,0,.05);overflow:hidden}
body.v4 .aical-event-label{font-size:12px;font-weight:700;letter-spacing:-.005em;color:var(--dept-fg,var(--ink));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.v4 .aical-event-time{font-size:10px;color:var(--g-ink-3,var(--ink-soft));font-variant-numeric:tabular-nums}
body.v4 .aical-event--board{background:var(--cherry);border-color:var(--cherry)}
body.v4 .aical-event--board .aical-event-label{color:rgba(255,255,255,1)}
body.v4 .aical-event--board .aical-event-time{color:rgba(255,255,255,.75)}
body.v4 .aical-key{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;padding:0 2px}
body.v4 .aical-key-item{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--g-ink-2,var(--ink-mid))}
body.v4 .aical-key-item--board{font-weight:800;color:var(--cherry)}
body.v4 .aical-key-swatch{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
body.v4 .aical-note{margin-top:8px;line-height:1.5;padding:0 2px}
/* Dark theme - the glass surfaces invert; pastel --dept-* tokens come
   from the root set, so only the card chrome needs adjusting here. */
body.v4.dark .aiorg-card,body.v4.dark .aical-grid{background:rgba(28,28,30,.65);border-color:rgba(255,255,255,.08)}
body.v4.dark .aiorg-director{border-color:rgba(255,255,255,.08)}
body.v4.dark .aiorg-agent:hover{background:rgba(255,255,255,.06)}
body.v4.dark .aical-head,body.v4.dark .aical-corner{border-bottom-color:rgba(255,255,255,.08)}
body.v4.dark .aical-day{border-right-color:rgba(255,255,255,.08)}
body.v4.dark .aical-cell{border-color:rgba(255,255,255,.05)}
body.v4.dark .aical-event{border-color:rgba(255,255,255,.08)}
/* QA-KE-7 - tighten the composer→prompts gap now the strip is a card */
.keith-convo .kc-composer{margin-bottom:6px}
/* ── QA wave: RPL ── */
/* QA-RPL-1 - P&L audit tab: income/cost toggle, ghosted suggestions */
.pnl-kind-toggle{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--card)}
.pnl-kt-btn{background:none;border:none;padding:4px 11px;font-size:11.5px;font-weight:600;color:var(--muted);cursor:pointer;font-family:var(--font);transition:background .12s,color .12s}
.pnl-kt-btn:disabled{cursor:not-allowed;opacity:.55}
.pnl-kt-btn.on.income{background:var(--mint-bg);color:var(--mint-fg)}
.pnl-kt-btn.on.cost{background:var(--cherry-bg);color:var(--cherry)}
.pnl-suggested td{opacity:.78}
.pnl-suggested .pnl-kind-toggle,.pnl-suggested .pnl-cat-select{opacity:.85;border-style:dashed}
.pnl-suggested:hover td{opacity:1}
.pnl-accept{display:inline-block;margin-top:4px;font-size:11.5px}

/* ── QA wave: CMD ── */
/* QA-CMD-1/2 - Command Centre: System/Operations master tabs, restored
   filter bar (search + section/status/priority/needs-me), "New since
   yesterday" grouping, and the item detail popup (reuses cc-modal grammar)
   with Approve/Reject and design Before/After previews. Tokens only. */

/* - Master area tabs - */
body.v4 .cc-areas{ display:flex; gap:6px; margin-bottom:16px; padding:4px; background:var(--g-100); border-radius:var(--r-pill,999px); width:max-content; max-width:100%; }
body.v4 .cc-area-tab{ display:inline-flex; align-items:center; gap:8px; border:none; background:transparent; color:var(--apl-ink-3); border-radius:var(--r-pill,999px); padding:9px 22px; font-size:13.5px; font-weight:700; cursor:pointer; font-family:inherit; transition:.14s; }
body.v4 .cc-area-tab:hover{ color:var(--apl-ink); }
body.v4 .cc-area-tab.on{ background:var(--apl-paper); color:var(--apl-ink); box-shadow:0 1px 4px rgba(0,0,0,.10); }
body.v4 .cc-area-n{ font-size:11px; font-weight:700; background:rgba(128,128,128,.16); border-radius:999px; padding:1px 7px; font-variant-numeric:tabular-nums; color:inherit; }
body.v4 .cc-area-tab.on .cc-area-n{ background:rgba(184,0,43,.10); color:var(--cherry); }

/* - Restored filter bar (QA-CMD-1) - */
body.v4 .cc-filterbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:-6px 0 16px; }
body.v4 .cc-search{ flex:1 1 220px; min-width:180px; max-width:340px; font-family:inherit; font-size:13px; color:var(--apl-ink); background:var(--apl-paper); border:1px solid var(--apl-rule); border-radius:var(--r-pill,999px); padding:8px 15px; }
body.v4 .cc-search::placeholder{ color:var(--apl-ink-4); }
body.v4 .cc-search:focus{ outline:none; border-color:var(--apl-ink-4); }
body.v4 .cc-fsel{ font-family:inherit; font-size:12.5px; font-weight:600; color:var(--apl-ink-2); background:var(--apl-paper); border:1px solid var(--apl-rule); border-radius:var(--r-pill,999px); padding:8px 12px; cursor:pointer; }
body.v4 .cc-fneeds{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--apl-ink-2); cursor:pointer; user-select:none; }
body.v4 .cc-fclear{ font-size:12px; }

/* - New-since-yesterday grouping (QA-CMD-2) - */
body.v4 .cc-group-h{ display:flex; align-items:center; gap:8px; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--apl-ink-4); margin:18px 0 8px; }
body.v4 .cc-group-h:first-child{ margin-top:0; }
body.v4 .cc-group-fresh{ color:var(--cherry); }
body.v4 .cc-group-dot{ width:8px; height:8px; border-radius:50%; background:var(--cherry); }
body.v4 .cc-group-n{ font-size:10.5px; font-weight:700; background:rgba(128,128,128,.14); color:var(--apl-ink-3); border-radius:999px; padding:1px 7px; font-variant-numeric:tabular-nums; }
body.v4 .cc-group-fresh .cc-group-n{ background:rgba(184,0,43,.12); color:var(--cherry); }
body.v4 .cc-fresh-pill{ display:inline-block; font-size:9.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; background:rgba(184,0,43,.12); color:var(--cherry); border-radius:999px; padding:1px 7px; vertical-align:middle; margin-left:4px; }

/* - Item detail popup (QA-CMD-2b) - */
body.v4 .cc-detail-modal{ width:640px; }
body.v4 .cc-meta-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
body.v4 .cc-meta-pill{ font-size:11px; font-weight:700; background:rgba(128,128,128,.12); color:var(--apl-ink-2); border-radius:999px; padding:3px 10px; }
body.v4 .cc-meta-dim{ font-size:11.5px; color:var(--apl-ink-4); }
body.v4 .cc-detail-modal .cc-modal-foot{ flex-wrap:wrap; }
body.v4 .cc-reject{ color:var(--cherry); border-color:rgba(184,0,43,.34); }

/* - Design Before/After (QA-CMD-2c) - */
body.v4 .cc-ba{ border:1px solid var(--apl-rule); border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; gap:10px; }
body.v4 .cc-ba-h{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--apl-ink-4); }
body.v4 .cc-ba-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
body.v4 .cc-ba-cell{ display:flex; flex-direction:column; gap:6px; min-width:0; }
body.v4 .cc-ba-lbl{ font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--apl-ink-3); }
body.v4 .cc-ba-none{ font-size:11px; font-weight:700; color:var(--apl-ink-4); text-transform:uppercase; letter-spacing:.05em; }
body.v4 .cc-ba-missing{ display:block; font-size:11.5px; font-weight:500; text-transform:none; letter-spacing:0; color:var(--apl-ink-4); margin-top:4px; }
body.v4 .cc-ba-img{ width:100%; height:auto; border:1px solid var(--apl-rule); border-radius:8px; display:block; }
body.v4 .cc-ba-link{ font-size:12.5px; font-weight:600; color:var(--apl-blue); text-decoration:none; word-break:break-all; }
body.v4 .cc-ba-link:hover{ text-decoration:underline; }
body.v4 .cc-ba-extras{ display:flex; gap:12px; flex-wrap:wrap; }

@media (max-width:640px){
  body.v4 .cc-ba-grid{ grid-template-columns:1fr; }
  body.v4 .cc-detail-modal{ width:100%; }
}

/* ── QA wave: SET ── */
/* QA-SET-1 - Users split: Staff / Suppliers / Roles + Advanced link */
body.v4 .users-adv-link{ border:none; background:transparent; cursor:pointer; font-size:12.5px; font-weight:600; color:var(--g-ink-3); padding:7px 4px; }
body.v4 .users-adv-link:hover{ color:var(--g-ink-1); }
body.v4 .users-adv-link.on{ color:var(--cherry); }
body.v4 .users-co-group{ margin-bottom:20px; }
body.v4 .users-co-name{ display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--g-ink-3); margin:0 0 8px 2px; }
body.v4 .users-co-name i, body.v4 .users-co-name svg{ width:14px; height:14px; }
body.v4 .users-co-n{ font-weight:600; color:var(--g-ink-4); text-transform:none; letter-spacing:0; }
body.v4 .users-role-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:12px; }
body.v4 .users-role-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; display:flex; flex-direction:column; gap:8px; }
body.v4 .users-role-card.inactive{ opacity:.55; }
body.v4 .users-role-head{ display:flex; align-items:center; gap:8px; font-size:14px; }
body.v4 .users-role-sum{ font-size:12.5px; line-height:1.5; color:var(--g-ink-2, var(--ink-mid)); }
body.v4 .users-role-who{ font-size:11.5px; color:var(--g-ink-4, var(--muted)); border-top:1px solid var(--line); padding-top:8px; }

/* QA-SET-1 - staff modal: role picker cards + Advanced collapse */
body.v4 .staff-role-cards{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
body.v4 .staff-role-card{ display:flex; align-items:flex-start; gap:10px; padding:11px 13px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); cursor:pointer; transition:border-color .12s ease, background .12s ease; }
body.v4 .staff-role-card:hover{ border-color:var(--g-ink-4); }
body.v4 .staff-role-card.on{ border-color:var(--cherry); background:var(--cherry-bg, rgba(184,0,43,.04)); }
body.v4 .staff-role-card input[type="radio"]{ margin-top:3px; accent-color:var(--cherry); flex:0 0 auto; }
body.v4 .staff-role-main{ display:flex; flex-direction:column; gap:3px; min-width:0; }
body.v4 .staff-role-name{ font-size:13.5px; font-weight:700; }
body.v4 .staff-role-desc{ font-size:12px; color:var(--g-ink-3, var(--ink-soft)); line-height:1.45; }
body.v4 .staff-role-can{ font-size:11.5px; line-height:1.5; color:var(--g-ink-2, var(--ink-mid)); background:var(--canvas, rgba(0,0,0,.03)); border-radius:var(--r-sm); padding:7px 9px; margin-top:3px; }
body.v4 .staff-role-more{ align-self:flex-start; border:none; background:transparent; padding:0; margin-top:2px; font-size:11.5px; font-weight:600; color:var(--g-ink-3); cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
body.v4 .staff-role-more:hover{ color:var(--g-ink-1); }
body.v4 .staff-role-card--none .staff-role-name{ font-weight:600; }
body.v4 .staff-adv{ margin-top:4px; }
body.v4 .staff-adv-toggle{ border:none; background:transparent; padding:6px 0; cursor:pointer; font-size:12.5px; font-weight:700; color:var(--g-ink-3); display:flex; align-items:center; gap:6px; }
body.v4 .staff-adv-toggle:hover{ color:var(--g-ink-1); }
body.v4 .staff-adv-chev{ font-size:11px; }

/* QA-SET-2 - cron run detail popup rows */
body.v4 .cron-d-row{ display:flex; gap:14px; padding:7px 0; border-bottom:1px solid var(--line); font-size:13px; }
body.v4 .cron-d-row:last-child{ border-bottom:none; }
body.v4 .cron-d-l{ flex:0 0 110px; font-weight:600; color:var(--g-ink-3, var(--ink-soft)); font-size:12px; padding-top:1px; }
body.v4 .cron-d-v{ min-width:0; word-break:break-word; }
body.v4 .cron-d-err{ color:var(--cherry); }
body.v4 .cron-d-row--err{ align-items:flex-start; }

/* Dark theme adjustments */
body.v4.dark .staff-role-card{ background:rgba(28,28,30,.65); border-color:rgba(255,255,255,.08); }
body.v4.dark .staff-role-card.on{ border-color:var(--cherry); background:rgba(184,0,43,.12); }
body.v4.dark .staff-role-can{ background:rgba(255,255,255,.05); }
body.v4.dark .users-role-card{ background:rgba(28,28,30,.65); border-color:rgba(255,255,255,.08); }

/* ── Backlog: sponsors module ──
   Bug9 - episode Sponsors slots + picker, Apple-glass upgrade.
   Appended overrides: later equal-specificity rules win over the
   _MOCKUP_sponsors_slots.html block at ~27180. Presentation only -
   markup hooks (data-slot / data-slot-id / data-sponsor-remove /
   data-sponsor-pick / data-sp-pick) are unchanged. */

/* Slot cards - frosted glass per slot */
body.v4 .es-spslot{
  border-radius:var(--g-r-lg);
  padding:16px 14px 14px;
  min-height:112px;
  gap:8px;
}
body.v4 .es-spslot-filled{
  background:var(--g-paper);
  border:1px solid var(--g-border);
  backdrop-filter:var(--g-blur);
  -webkit-backdrop-filter:var(--g-blur);
  box-shadow:var(--g-sh);
  transition:box-shadow .18s ease, transform .18s ease;
}
body.v4 .es-spslot-filled:hover{
  box-shadow:var(--g-sh-2);
  transform:translateY(-1px);
}
body.v4 .es-spslot-kind{
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--g-ink-4);
}
body.v4 .es-spslot-logo{
  height:34px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  font-weight:800;
  font-size:15px;
  letter-spacing:-.02em;
  color:var(--g-ink-1);
  overflow:hidden;
}
body.v4 .es-spslot-logo img{
  max-height:34px;
  border-radius:7px;
}
body.v4 .es-spslot-wordmark{
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body.v4 .es-spslot-name{
  font-size:12px;
  font-weight:600;
  color:var(--g-ink-3);
}
body.v4 .es-spslot-filled .es-sponsor-x{
  position:absolute;
  top:8px;
  right:8px;
  width:20px;
  height:20px;
  border:none;
  border-radius:50%;
  background:var(--g-paper-3);
  backdrop-filter:var(--g-blur);
  -webkit-backdrop-filter:var(--g-blur);
  color:var(--g-ink-3);
  font-size:13px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  opacity:0;
  transition:opacity .15s ease, color .15s ease;
}
body.v4 .es-spslot-filled:hover .es-sponsor-x{ opacity:1; }
body.v4 .es-spslot-filled .es-sponsor-x:hover{ color:var(--g-cherry); }

/* Empty slot - frosted invitation, blue glass plus-disc */
body.v4 .es-spslot-empty{
  border:1.5px dashed var(--g-blue-bg);
  background:var(--g-paper-2);
  backdrop-filter:var(--g-blur);
  -webkit-backdrop-filter:var(--g-blur);
  border-radius:var(--g-r-lg);
  transition:border-color .18s ease, background .18s ease, transform .18s ease;
}
body.v4 .es-spslot-empty:hover,
body.v4 .es-spslot-empty:focus-visible{
  border-color:var(--g-blue);
  background:var(--g-blue-soft);
  transform:translateY(-1px);
  outline:none;
}
body.v4 .es-spslot-plus{
  width:30px;
  height:30px;
  border-radius:50%;
  background:var(--g-blue-bg);
  color:var(--g-blue);
  font-size:18px;
  font-weight:600;
  transition:background .18s ease, color .18s ease;
}
body.v4 .es-spslot-empty:hover .es-spslot-plus{
  background:var(--g-blue);
  color:var(--g-surface);
}
body.v4 .es-spslot-cta{
  font-size:12px;
  font-weight:600;
  color:var(--g-blue);
}
body.v4 .es-spslot-left{
  background:var(--g-blue-bg);
  color:var(--g-blue-2);
  font-size:11px;
  font-weight:700;
  padding:4px 12px;
  border-radius:var(--r-pill);
}

/* Picker popup - frosted glass panel */
body.v4 .es-sppk{
  background:var(--g-paper-3);
  border:1px solid var(--g-border);
  border-radius:var(--g-r-xl);
  box-shadow:var(--g-sh-modal);
  backdrop-filter:var(--g-blur-2);
  -webkit-backdrop-filter:var(--g-blur-2);
  padding:20px;
}
body.v4 .es-sppk-title{ font-family:var(--g-fd); font-size:15px; font-weight:700; color:var(--g-ink-1); }
body.v4 .es-sppk-sub{ font-size:12px; color:var(--g-ink-3); }
body.v4 .es-sppk-adv{
  border-radius:var(--g-r);
  transition:background .15s ease;
}
body.v4 .es-sppk-adv:hover{ background:var(--g-blue-soft); }
body.v4 .es-sppk-adv:focus-visible{ outline:2px solid var(--g-blue); outline-offset:-2px; }
body.v4 .es-sppk-adv + .es-sppk-adv{ border-top:1px solid var(--g-rule); }
body.v4 .es-sppk-logo{
  width:42px;
  height:42px;
  border-radius:10px;
  background:var(--g-surface);
  border:1px solid var(--g-rule);
  box-shadow:0 1px 2px rgba(0,0,0,.05);
}
body.v4 .es-sppk-inv b{ background:var(--g-blue); }
body.v4 .es-sppk-inv b.free{ background:var(--g-rule); }
body.v4 .es-sppk-pill-mint{ background:var(--g-green-bg); color:var(--g-green); }
body.v4 .es-sppk-pill-warn{ background:var(--g-orange-bg); color:var(--g-orange); }
/* Stage-block pill - deal exists but isn't in the bookable (live) state */
body.v4 .es-sppk-pill-stage{ background:var(--g-butter-bg); color:var(--g-butter); font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:var(--r-pill); white-space:nowrap; flex:none; }
/* Stage-block note under the meta line */
body.v4 .es-sppk-block{ font-size:11px; color:var(--g-butter); margin-top:3px; }
/* Fully booked - greyed, unselectable, reason stays readable */
body.v4 .es-sppk-blocked{ opacity:.5; pointer-events:none; filter:saturate(.4); }
/* Amend #2 (Peter 2026-06-21): fully booked but still selectable (adding
   over-books the deal). Dimmed so the warning reads, but clickable. */
body.v4 .es-sppk-overbook{ opacity:.7; }
body.v4 .es-sppk-overbook:hover{ opacity:1; }
/* Touch devices can't hover - keep the remove × always visible there */
@media (hover:none){ body.v4 .es-spslot-filled .es-sponsor-x{ opacity:1; } }

/* ── Backlog: approver boxes ── */
/* Internal + External approver boxes in the checklist task add/edit modals
   (episode template editor + deal checklist editor). Two bordered boxes
   side-by-side per the editors' config-section grammar, with the precedence
   rule (external overrides internal) stated inline underneath. */
.tpl-approver-boxes{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
@media (max-width:560px){
  .tpl-approver-boxes{grid-template-columns:1fr;}
}
.tpl-approver-box{
  display:flex;flex-direction:column;gap:6px;
  padding:12px 14px;border:1px solid var(--g-200);border-radius:var(--r-sm);
  background:var(--g-50);
}
.tpl-approver-box-title{
  font-size:13px;font-weight:600;color:var(--g-800);
}
.tpl-approver-box-sub{
  font-size:11.5px;color:var(--g-ink-4);line-height:1.4;
  flex:1;
}
.tpl-approver-note{
  margin-top:6px;font-size:11px;color:var(--g-ink-4);
}

/* ── Multirole ── */
/* Role cards flipped radio → checkbox (multi-select). Mirrors the
   existing input[type="radio"] rule at the .staff-role-card scope so
   checkbox ticks sit and colour identically to the old radios. */
body.v4 .staff-role-card input[type="checkbox"]{ margin-top:3px; accent-color:var(--cherry); flex:0 0 auto; }

/* ── MOBILE: shell ── */
/* =============================================================
   MOBILE SHELL - bottom tab bar, "More" sheet, sidebar/topbar
   transforms, shared .m-sheet bottom-sheet treatment for the
   app's standard modal overlays, and global mobile base rules.
   ALL rules live inside media queries (or only match mobile-only
   markup like .m-tabbar), so desktop rendering is unchanged.
   ============================================================= */

/* The tab bar + its parts exist only in mobile markup; hard-hide on
   desktop regardless of the `hidden` attribute state. */
@media (min-width: 768px) {
  /* body.v4-scoped to outrank any later display rule without !important;
     no competing .m-tabbar display rule exists outside the <768px query. */
  body.v4 .m-tabbar, .m-tabbar { display: none; }
}

/* ─── Bottom tab bar (<768px) ───────────────────────────────── */
@media (max-width: 767.98px) {
  body.v4 .m-tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1600;                       /* above #chat-root (1500), below modals (2000+) */
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    background: var(--paper-3);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border-top: 1px solid var(--rule);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  body.v4 .m-tabbar[hidden] { display: none; }    /* pre-auth: stays hidden */
  body.v4 .m-tab {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    min-height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 4px 2px;
    background: none;
    border: none;
    border-radius: var(--r-sm);
    color: var(--ink-3);
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  body.v4 .m-tab:active { background: var(--rule-soft); }
  body.v4 .m-tab .m-tab-ic { width: 22px; height: 22px; flex: none; }
  body.v4 .m-tab .m-tab-lbl {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.01em;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Active tab - the bar owns its state via data-m-active (set by
     mobile-nav.js on hashchange; router .active toggling races with
     async page loads so it isn't relied on, but is honoured too). */
  body.v4 .m-tab.active,
  body.v4 .m-tabbar[data-m-active="dashboard"] .m-tab[data-route="dashboard"],
  body.v4 .m-tabbar[data-m-active="pipeline"] .m-tab[data-route="pipeline"],
  body.v4 .m-tabbar[data-m-active="speed-work"] .m-tab[data-route="speed-work"],
  body.v4 .m-tabbar[data-m-active="keith"] .m-tab[data-route="keith"],
  body.v4 .m-tabbar[data-m-active="more"] .m-tab-more { color: var(--cherry); }
  body.v4 .m-tab.active .m-tab-ic,
  body.v4 .m-tabbar[data-m-active="dashboard"] .m-tab[data-route="dashboard"] .m-tab-ic,
  body.v4 .m-tabbar[data-m-active="pipeline"] .m-tab[data-route="pipeline"] .m-tab-ic,
  body.v4 .m-tabbar[data-m-active="speed-work"] .m-tab[data-route="speed-work"] .m-tab-ic,
  body.v4 .m-tabbar[data-m-active="keith"] .m-tab[data-route="keith"] .m-tab-ic,
  body.v4 .m-tabbar[data-m-active="more"] .m-tab-more .m-tab-ic { stroke-width: 2.2; }
  body.v4 .m-tab-badge {
    position: absolute;
    top: 2px;
    left: calc(50% + 6px);
    min-width: 16px; height: 16px;
    padding: 0 4px;
    border-radius: var(--r-pill);
    background: var(--cherry);
    color: var(--on-accent);
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  body.v4 .m-tab-badge[hidden] { display: none; }

  /* ─── Shell: sidebar gone, main full-width, content clears the bar ── */
  body.v4 .app { grid-template-columns: 1fr; }
  body.v4 .sb,
  body.v4 .sidebar.sb { display: none; }
  body.v4 .main {
    padding: 12px 14px calc(76px + env(safe-area-inset-bottom, 0px));
  }
  body.v4.is-impersonating .main {
    padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px));
  }

  /* ─── Topbar compact ────────────────────────────────────────
     Search shrinks to fill, theme toggle moves to the More sheet,
     user pill collapses to the avatar. The Speed Work launcher is now a
     circular .tb-ic icon-button (W1-RAIL) so it needs no mobile collapse -
     it sits in the icon cluster (what's new / bell / chat) as-is. */
  body.v4 .topbar { margin-bottom: 14px; gap: 8px; }
  body.v4 .topbar-search { flex: 1 1 auto; min-width: 0; }
  body.v4 .topbar-search input,
  body.v4 .topbar-search > input#global-search { width: 100%; font-size: 16px; }
  body.v4 .tb6-toggle { display: none; }
  body.v4 .topbar-actions { gap: 6px; flex: none; }
  body.v4 .topbar-user { padding: 3px; gap: 0; }
  body.v4 .topbar-user-name,
  body.v4 .topbar-user-role,
  body.v4 .topbar-user-chev { display: none; }
  body.v4 .topbar-user > div:not(.topbar-avatar) { display: none; }
  body.v4 .topbar-supplier-eye { display: none; }

  /* ─── "More" bottom sheet (mobile-nav.js) ───────────────────── */
  body.v4 .m-more-overlay {
    position: fixed; inset: 0;
    z-index: 2400;                        /* above the tab bar + most modals */
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    animation: mSheetFade 0.18s ease-out;
  }
  body.v4 .m-more-overlay.m-out { animation: mSheetFadeOut 0.18s ease-in forwards; }
  body.v4 .m-more-overlay.m-out .m-sheet { animation: mSheetDown 0.18s ease-in forwards; }
  body.v4 .m-more-sheet { background: var(--surface); }
  body.v4 .m-more-body {
    display: flex;
    flex-direction: column;
    padding: 4px 12px calc(12px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  body.v4 .m-more-group {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ink-4);
    padding: 14px 10px 6px;
  }
  body.v4 .m-more-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    padding: 10px;
    background: none;
    border: none;
    border-radius: var(--r);
    color: var(--ink-1);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  body.v4 .m-more-item:active { background: var(--rule-soft); }
  body.v4 .m-more-item.active { background: var(--cherry-bg); color: var(--cherry); }
  body.v4 .m-more-item .ic { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  body.v4 .m-more-item .m-more-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* ─── Shared .m-sheet bottom-sheet treatment ─────────────────
     The app's standard modal overlays all centre their card via
     flex - re-anchor to the bottom edge and reshape the card into
     a sheet: full width, rounded top corners, drag-handle visual,
     max-height 90dvh with internal scroll, slide-up entrance.
     Covered overlays (overlay → card):
       .cm-overlay              → .cm-card        (confirm modal)
       .ep-modal-overlay        → .ep-modal       (episode popup family)
       .cc-modal-ov             → .cc-modal       (Command Centre)
       .aiceo-modal-overlay     → .aiceo-modal    (AI team modals)
       .sw-overlay              → .sw-modal       (Speed Work)
       .es-modal-overlay        → .es-modal-card  (episode surface modal)
       .es-art-modal-overlay    → .es-art-modal   (artwork picker)
       .inv-modal-overlay       → .inv-modal      (invoices)
       .brain-modal-overlay     → .brain-modal    (brain panel)
       .wbp-modal-overlay       → .wbp-modal      (week-builder preview)
       .company-modal-overlay   → .company-modal  (company editor)
       plus the More sheet itself (.m-more-overlay → .m-sheet). */
  body.v4 .cm-overlay,
  body.v4 .ep-modal-overlay,
  .ep-modal-overlay,
  body.v4 .cc-modal-ov,
  .aiceo-modal-overlay,
  body.v4 .sw-overlay,
  body.v4 .es-modal-overlay,
  .es-art-modal-overlay,
  body.v4 .inv-modal-overlay,
  .brain-modal-overlay,
  body.v4 .brain-modal-overlay,
  .wbp-modal-overlay,
  body.v4 .wbp-modal-overlay,
  .company-modal-overlay {
    align-items: flex-end;
    justify-content: stretch;
    padding: 0;
  }
  body.v4 .cm-card,
  body.v4 .ep-modal,
  .ep-modal,
  body.v4 .cc-modal,
  .aiceo-modal,
  body.v4 .sw-modal,
  body.v4 .es-modal-card,
  .es-art-modal,
  body.v4 .inv-modal,
  .brain-modal,
  body.v4 .brain-modal,
  .wbp-modal,
  body.v4 .wbp-modal,
  .company-modal,
  body.v4 .m-sheet {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 90dvh;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    border-bottom: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-top: 26px;                       /* room for the drag handle */
    animation: mSheetUp 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  }
  /* Flex-column modals (head→body→foot) keep their internal scroll -
     the BODY scrolls, the card doesn't. */
  body.v4 .ep-modal, .ep-modal,
  .aiceo-modal,
  body.v4 .sw-modal,
  body.v4 .es-modal-card,
  .es-art-modal,
  .brain-modal, body.v4 .brain-modal,
  .wbp-modal, body.v4 .wbp-modal,
  .company-modal { overflow-y: hidden; }
  /* Drag-handle bar visual on every sheet */
  body.v4 .cm-card::before,
  body.v4 .ep-modal::before,
  .ep-modal::before,
  body.v4 .cc-modal::before,
  .aiceo-modal::before,
  body.v4 .sw-modal::before,
  body.v4 .es-modal-card::before,
  .es-art-modal::before,
  body.v4 .inv-modal::before,
  .brain-modal::before,
  .wbp-modal::before,
  .company-modal::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4.5px;
    border-radius: var(--r-pill);
    background: var(--ink-4);
    opacity: 0.55;
    pointer-events: none;
    z-index: 5;
  }
  body.v4 .m-sheet .m-sheet-grab {
    position: absolute;
    top: 9px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4.5px;
    border-radius: var(--r-pill);
    background: var(--ink-4);
    opacity: 0.55;
  }
  /* Sheet feet: full-width, thumb-reachable buttons + safe-area pad */
  body.v4 .cm-card .cm-actions,
  body.v4 .ep-modal .ep-modal-foot,
  body.v4 .cc-modal .cc-modal-foot,
  .aiceo-modal .aiceo-modal-foot {
    flex-wrap: wrap;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }
  body.v4 .cm-card .cm-actions .cm-btn,
  body.v4 .ep-modal-foot .btn-v4,
  body.v4 .ep-modal-foot .btn-primary,
  body.v4 .ep-modal-foot .btn-secondary,
  body.v4 .aiceo-modal-foot .btn-v4,
  body.v4 .aiceo-modal-foot .btn-primary,
  body.v4 .aiceo-modal-foot .btn-secondary {
    flex: 1 1 auto;
    min-height: 44px;
    justify-content: center;
  }
  /* The giant episode-surface modal: full height sheet on a phone */
  body.v4 .es-modal-card { height: 90dvh; }

  /* ─── Global mobile base rules ──────────────────────────────── */
  html, body { overflow-x: hidden; }
  body.v4 input,
  body.v4 select,
  body.v4 textarea { font-size: 16px; }      /* stops iOS zoom-on-focus */
  body.v4 .btn-v4,
  body.v4 .tab { -webkit-tap-highlight-color: transparent; }
  body.v4 .btn-v4:active { transform: translateY(0.5px); filter: brightness(0.96); }
  body.v4 .tab:active { filter: brightness(0.95); }
}

/* Touch-target helper - page waves put .m-touch on interactive rows.
   Scoped to coarse pointers so a narrow desktop window keeps its
   density; phones get the 44px Apple HIG floor. */
@media (hover: none) and (pointer: coarse) {
  body.v4 .m-touch { min-height: 44px; }
}

/* Sheet animations - defined once, outside the media query (keyframes
   are global; only sheet rules reference them). */
@keyframes mSheetUp {
  from { transform: translateY(28px); opacity: 0.6; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes mSheetDown {
  from { transform: translateY(0); opacity: 1; }
  to   { transform: translateY(40px); opacity: 0; }
}
@keyframes mSheetFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes mSheetFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ─── Dark mode - mobile shell surfaces ─────────────────────── */
@media (max-width: 767.98px) {
  body.v4.dark .m-tabbar {
    background: var(--paper-3);              /* token flips under body.dark */
    border-top-color: var(--rule);
  }
  body.v4.dark .m-tab:active,
  body.v4.dark .m-more-item:active { background: var(--rule); }
  body.v4.dark .m-more-overlay { background: rgba(0, 0, 0, 0.6); }
  body.v4.dark .m-more-sheet { background: var(--surface); }
}

/* ── MOBILE: guests ── */
/* Guest grid → single column; stat row 2-up→1-up at 480; search row
   stacks (input full width, count + sort/view controls beneath); the
   filter tabs already burger-collapse via .tabs (initBurgerTabs measures
   overflow, no extra CSS needed). Detail view (.gd-shell) already stacks
   at 1000px - here the sticky rail un-sticks and appearance cards go
   single column so nothing renders at 2×unreadable width. */
@media (max-width: 767.98px) {
  /* Single column: the base .guest-grid locks display+template with
     !important, so we span every card across all tracks instead -
     same visual result, no new !important. */
  body.v4 .guest-grid > .guest-card-v2 { grid-column: 1 / -1; }
  body.v4 .guest-stat-row { gap: 10px; }
  body.v4 .guest-search-row {
    flex-wrap: wrap;
    gap: 10px;
  }
  body.v4 .guest-search { flex: 1 1 100%; }
  body.v4 .guest-search input { font-size: 16px; }   /* iOS zoom guard */
  body.v4 .guest-search-meta { order: 3; }
  body.v4 .guest-toolbar-controls {
    order: 2;
    flex: 1 1 auto;
    justify-content: flex-start;
  }
  body.v4 .guest-sort { min-height: 40px; font-size: 16px; }
  body.v4 .guest-view-btn { padding: 9px 13px; min-height: 40px; }
  /* List view rows: base CSS already drops to 3 cols ≤760px; give the
     remaining row a comfortable touch height. */
  body.v4 .guest-list-row { min-height: 52px; }
  /* Detail view - rail is full-width above the main column: un-stick it
     and let the appearance cards stack one per row. */
  body.v4 .gd-rail { position: static; }
  /* The appearance cards + scorecard tiles sit in INLINE-styled grids
     (style="grid-template-columns:…"), which only !important could
     re-template - instead span each child across all tracks: one card
     per row, zero new !important. */
  body.v4 .gd-main [style*="repeat(auto-fill,minmax(220px"] > a,
  body.v4 .gd-main > div[style*="repeat(3,1fr)"] > div { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  body.v4 .guest-stat-row { grid-template-columns: 1fr 1fr; gap: 8px; }
}
@media (hover: none) and (pointer: coarse) {
  /* Cards/rows are full buttons already; ensure the tap targets meet 44px. */
  body.v4 .guest-card-v2 { min-height: 44px; }
  body.v4 .guest-list-row { min-height: 44px; }
  body.v4 .guest-view-btn { min-width: 44px; min-height: 44px; }
}

/* ── MOBILE: intel ── */
/* The workspace becomes sequential: hero stats 2-up, the tab strip
   burger-collapses via .tabs (already wired), topic chips scroll in one
   horizontal lane, and the kanban becomes swipe lanes - one column per
   ~85vw with x-snap. The dossier already opens as a bottom sheet
   (.ep-modal-overlay is in the shell sheet family). Demo/static tabs:
   grid-2-1 and grid-4 stack (their base rules carry !important so the
   overrides do too), data tables get contained horizontal scroll. */
@media (max-width: 767.98px) {
  /* Tab bar: let the Re-run button drop to its own line under the burger. */
  body.v4 .intel-tabbar { flex-wrap: wrap; gap: 8px; }
  body.v4 .intel-tabbar-action { margin-left: 0; min-height: 44px; }

  /* Hero stat cells: 2-up instead of one cramped row. */
  body.v4 .hero-stat-row { flex-wrap: wrap; }

  /* Topic filter chips - one swipeable lane, no wrap walls of chips. */
  body.v4 .ik-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding-bottom: 6px;
    margin-bottom: 12px;
  }
  body.v4 .ik-chip { flex: 0 0 auto; min-height: 38px; display: inline-flex; align-items: center; }

  /* Kanban → swipe lanes: one lane ≈ a screen, snap per lane. */
  body.v4 .ik-board {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 85vw;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    gap: 12px;
    padding-bottom: 8px;
  }
  body.v4 .ik-board > [data-col] { scroll-snap-align: start; min-width: 0; }

  /* Layout grids inside Briefing / Competitor / Audience tabs stack.
     The base templates carry !important, so we sidestep them by
     switching display instead of fighting the template: flex column
     stacks grid-2-1/grid-3; flex-wrap 2-up handles the stat grid-4. */
  body.v4 #intel-pane .grid-2-1,
  body.v4 #intel-pane .grid-3 { display: flex; flex-direction: column; gap: 14px; }
  body.v4 #intel-pane .grid-4 { display: flex; flex-wrap: wrap; gap: 10px; }
  body.v4 #intel-pane .grid-4 > * { flex: 1 1 calc(50% - 5px); min-width: 0; }

  /* Radar / Audience data tables: contained sideways scroll - the PAGE
     never scrolls horizontally. Scoped to intel content only via the
     pane host id so other pages' tables are untouched. */
  body.v4 #intel-pane .card { overflow-x: auto; }
  body.v4 #intel-pane .data-table { min-width: 640px; }

  /* Legend chips wrap instead of overflowing. */
  body.v4 .intel-legend { flex-wrap: wrap; }

  /* Pitch card action row wraps; buttons get thumb height. */
  body.v4 #intel-pane .btn-sm { min-height: 40px; }
}
@media (hover: none) and (pointer: coarse) {
  /* Decline ✕ on intel kanban cards is hover-revealed on desktop -
     keep it persistently visible on touch, at a tappable size. */
  body.v4 .ik-card .kb-card-decline {
    opacity: 1;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
  }
  body.v4 .ik-card { min-height: 44px; }
}

/* ── MOBILE: dashboard ── */
/* Phase 4 prior art (≤720px collapse at ~25037) still holds post-v2:
   .dv2-split2/.dv2-split4 → 1fr and .row-tools forced visible. This block
   EXTENDS it: covers the 720–767px gap, persistent panel toolbars on touch,
   44px tap targets, touch-safe drag, and the settings popover as a sheet. */
@media (max-width: 767.98px) {
  /* Close the 720–767.98px gap the Phase 4 rule left (it stops at 720px). */
  body.v4 .dv2-split2,
  body.v4 .dv2-split4 { grid-template-columns: 1fr; }
  body.v4 .dv2-row .row-tools {
    opacity: 1; transform: none; pointer-events: auto;
    position: static; margin: 0 0 8px; justify-content: flex-end;
    flex-wrap: wrap;
  }
  body.v4 .dv2-row .p[data-size="w"] .wide-grid { display: block; }
  body.v4 .dv2-row .p[data-size="w"] .wide-side { margin-top: 14px; }
  /* Row toolbar buttons up to thumb size. */
  body.v4 .dv2-row .row-tools .rt-icon,
  body.v4 .dv2-row .row-tools .rt-size { min-width: 36px; min-height: 36px; }
  /* The hint chip mentions hover/⌘K - neither exists on a phone. */
  body.v4 .dv2-hint { display: none; }
  /* "+ Add panel" empty slots + "+ Add a row" are primary touch targets. */
  body.v4 .dv2-slot-empty { min-height: 64px; }
  body.v4 .dv2-addrow { min-height: 44px; }

  /* Settings popover → bottom sheet (class set by openSettingsPopover via
     matchMedia; no inline coords on mobile so plain CSS positions it). */
  body.v4 .dv2-pop.dv2-pop-msheet {
    position: fixed;
    top: auto; left: 0; right: 0; bottom: 0;
    width: 100%;
    max-height: 80dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    border-bottom: none;
    padding: 26px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 2400;
    animation: mSheetUp 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  }
  body.v4 .dv2-pop.dv2-pop-msheet::before {
    content: "";
    position: absolute;
    top: 9px; left: 50%;
    transform: translateX(-50%);
    width: 40px; height: 4.5px;
    border-radius: var(--r-pill);
    background: var(--ink-4);
    opacity: 0.55;
  }
  body.v4 .dv2-pop.dv2-pop-msheet .skin-opt { min-height: 44px; }
  body.v4 .dv2-pop.dv2-pop-msheet .dv2-pop-save,
  body.v4 .dv2-pop.dv2-pop-msheet .dv2-pop-reset { min-height: 44px; }

  /* Panel picker (.aiceo-modal.pk-modal - already sheet-ified by the shell):
     cards 2-up → 1-up, chips wrap, comfortable targets. */
  body.v4 .pk-modal .panel-cards { grid-template-columns: 1fr; }
  body.v4 .pk-modal .pk-chip { min-height: 40px; }
  body.v4 .pk-modal .pcard { min-height: 44px; }
  /* Confirm-modal option buttons (resize/delete row) full-width stack. */
  body.v4 .dv2-confirm-acts { display: flex; flex-direction: column-reverse; gap: 8px; }
  body.v4 .dv2-confirm-acts .dv2-btn-primary,
  body.v4 .dv2-confirm-acts .dv2-btn-secondary,
  body.v4 .dv2-confirm-acts .dv2-btn-danger { width: 100%; min-height: 44px; }
  /* Undo toast clears the tab bar. */
  body.v4 .dv2-undo { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

/* Touch pointers (any width): panel head controls are always-visible already,
   but get HIG-size tap areas; HTML5 drag is inert on touch, so make sure the
   drag handle and cards never block vertical scroll, and lean on the explicit
   ↑/↓ row-move buttons as the reorder alternative. */
@media (hover: none) and (pointer: coarse) {
  body.v4 .dv2-row .p-act { width: 40px; height: 40px; }
  body.v4 .dv2-row .p[draggable="true"],
  body.v4 .dv2-row .p-drag { touch-action: pan-y; }
  body.v4 .dv2-row .p-drag { cursor: default; }
}

/* ── MOBILE: agents (AI Team) ── */
/* Org cards single column (auto-fill minmax(320px) can wedge two
   unreadable columns on wide phones in landscape - force 1). The AI
   calendar keeps its week grid but scrolls horizontally inside its own
   wrapper with the day labels stuck to the left edge; meeting blocks
   keep readable type. Goal rows wrap. The brief/goal modals use
   .aiceo-modal-overlay, which is already a bottom sheet via the shell. */
@media (max-width: 767.98px) {
  body.v4 .aiorg-grid { grid-template-columns: 1fr; }

  /* Calendar: the grid itself scrolls (it already has overflow-x:auto)
     and its inline column template (72px + one track per hour) is kept -
     re-templating with auto-fit would break the row wrapping, which
     depends on exactly N+1 tracks. We only pin the day-label column +
     corner so you always know which row you are on while swiping across
     the hours, with a solid background so events slide underneath. */
  body.v4 .aical-day,
  body.v4 .aical-corner {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--surface);
  }
  body.v4 .aical-day { padding: 12px 6px; }
  body.v4 .aical-event { padding: 8px 10px; min-height: 44px; }
  body.v4 .aical-event-label { white-space: normal; line-height: 1.25; }
  body.v4 .aical-key { gap: 6px 10px; }

  /* Department card internals: director + agent rows get touch height;
     the actions row's ghost button too. */
  body.v4 .aiorg-director,
  body.v4 .aiorg-agent { min-height: 44px; }

  /* Goal rows: status + title + meta wrap rather than truncate. */
  body.v4 .goal-row { flex-wrap: wrap; row-gap: 4px; min-height: 44px; }

  /* Detail view: findings meta wraps; reply button thumb-sized. */
  body.v4 .finding-row { min-height: 44px; }
  body.v4 .finding-row-meta { flex-wrap: wrap; }
}
@media (max-width: 767.98px) {
  /* The calendar's inline template (72px + minmax(120px,1fr) per hour)
     totals ~430-560px for 3-4 hour tracks - wider than a phone, which is
     exactly why the grid's own overflow-x:auto carries it. No inline
     width on this page exceeds the viewport outside that scroller. */
  body.v4 .aical-wrap { padding: 10px 10px 12px; }
}
@media (hover: none) and (pointer: coarse) {
  body.v4 .goal-row[role="button"] { min-height: 44px; }
}

/* ── MOBILE: my-work ── */
/* .mw-grid replaces the !important-locked "grid grid-2" wrapper in
   my-work.js. Base rule reproduces the previous desktop computed style
   EXACTLY (1fr 1fr columns + 14px gap - the values the old
   `.grid-2 {…!important}` rule actually painted), so desktop is unchanged;
   the media query is what could never work before. */
body.v4 .mw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

@media (max-width: 767.98px) {
  /* Tasks card first, work blocks below - single column, full width. */
  body.v4 .mw-grid { grid-template-columns: 1fr; gap: 12px; }
  /* Checklist task rows: whole row is the target - give it the 44px floor
     and a visible press state (rows are click-to-open, no hover styling). */
  body.v4 #mw-body .task-row.task-row-v3 { min-height: 44px; padding: 12px 0; }
  body.v4 #mw-body .task-row.task-row-v3 .task-row-body {
    -webkit-tap-highlight-color: transparent;
  }
  body.v4 #mw-body .task-row.task-row-v3 .task-row-body:active { opacity: 0.7; }
  /* Work-block cards: 44px floor + press state. */
  body.v4 #mw-body .wb-card { min-height: 44px; -webkit-tap-highlight-color: transparent; }
  body.v4 #mw-body .wb-card:active { filter: brightness(0.97); }
  /* "+ Add work block" card action gets a real tap area without changing
     its text-link look. */
  body.v4 #mw-body .card-action { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ── MOBILE: speed-work ── */
/* The queue is a prime phone use case: tick / approve / answer one item at
   a time. The shell already turns .sw-overlay → .sw-modal into a bottom
   sheet with internal scroll (sw-modal overflow hidden, .sw-body scrolls).
   This block sizes the inside of the sheet for thumbs. */
@media (max-width: 767.98px) {
  /* The sheet is the whole working surface - let it use the full height so
     a form item (context card + form + actions) fits without cramping. */
  body.v4 .sw-modal { height: 92dvh; max-height: 92dvh; }
  body.v4 .sw-body { padding: 16px 14px calc(16px + env(safe-area-inset-bottom, 0px)); }
  body.v4 .sw-head { padding: 16px 16px 14px; }
  /* Close button: HIG-size. */
  body.v4 .sw-close { width: 40px; height: 40px; top: 10px; right: 10px; }

  /* Mode picker: full-width cards, big targets. */
  body.v4 .sw-mode { min-height: 64px; padding: 14px 16px; }

  /* The item card goes full-bleed-ish: tighter padding, full width. */
  body.v4 .sw-card { padding: 14px; }
  /* Priority chips + kind pill wrap instead of clipping. */
  body.v4 .sw-card-meta { flex-wrap: wrap; row-gap: 6px; }
  /* Context card detail rows: two columns don't fit a phone - stack. */
  body.v4 .sw-ctx-rows { grid-template-columns: 1fr; gap: 4px; }

  /* Big tick / approve / skip targets; primary actions full-width so the
     thumb can't miss. Skip keeps its trailing position but grows. */
  body.v4 .sw-actions { gap: 10px; }
  body.v4 .sw-actions .sw-btn { min-height: 48px; flex: 1 1 auto; justify-content: center; }
  body.v4 .sw-actions .sw-btn--ghost { flex: 0 0 auto; margin-left: auto; min-width: 84px; }
  body.v4 .sw-btn { -webkit-tap-highlight-color: transparent; }
  body.v4 .sw-btn:active { filter: brightness(0.94); }
  /* Keyboard hints are meaningless on touch. */
  body.v4 .sw-btn kbd { display: none; }

  /* Form items inside the sheet: inputs already get 16px from the shell;
     make the save button thumb-sized and full width. */
  body.v4 .sw-form .es-form-save,
  body.v4 [data-sw-form-save] { min-height: 48px; width: 100%; justify-content: center; }
  /* Upload drop zone is a tap zone on mobile, not a drag target. */
  body.v4 .sw-upload-drop { padding: 28px 16px; min-height: 88px; }

  /* "Up next" peek chips: single horizontal swipe lane, no wrap-stack. */
  body.v4 .sw-peek {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding-bottom: 4px;
  }
  body.v4 .sw-peek-chip { flex: 0 0 auto; }

  /* Speed Work landing page (#/speed-work): centre card breathes, the
     start button is a full-width thumb target. */
  body.v4 #sw-page-body .gi-track { padding: 24px 16px; }
  body.v4 #sw-page-body #sw-page-start { min-height: 48px; width: 100%; justify-content: center; }
}

/* ── MOBILE: speed-work (z-order fix) ── */
@media (max-width: 767.98px) {
  /* Desktop sw-overlay sits at z-index 1000 - UNDER the mobile tab bar
     (1600), which would cover the sheet's action buttons. Lift it above
     the bar on phones only. */
  body.v4 .sw-overlay { z-index: 2200; }
}

/* ── MOBILE: chat (AI Chat page) ── */
/* The left dept rail becomes a top horizontal scroller of channel chips:
   Everyone pinned first, then each department as a chip; an expanded
   department's directors/agents flow inline as further chips in the same
   lane. Saved-threads + divider are cut (deep feature, desktop-first).
   The thread takes the full width; the composer is the last flex child
   of .chat2-main, so sizing the shell to the visual viewport minus the
   tab bar keeps it thumb-reachable just above the tab bar. JS change in
   chat.js (matchMedia) only suppresses autofocus so the keyboard doesn't
   pop on every repaint. */
@media (max-width: 767.98px) {
  /* Shell: rail strip on top, chat fills the rest. The 900px base query
     already makes it 1 column; here we fix the height for the tab bar:
     100dvh − topbar/hero clearance handled by rows, bottom padding on
     .main already clears the tab bar. */
  body.v4 .chat2-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    height: calc(100dvh - 240px - env(safe-area-inset-bottom, 0px));
    min-height: 420px;
    gap: 10px;
  }

  /* Rail → one horizontal chip lane. */
  body.v4 .chat2-rail {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  body.v4 .chat2-rail > hr { display: none; }
  /* Saved threads block = everything after the hr; the heading/list/pager
     are inline elements rendered by archiveListHtml - hide them all. */
  body.v4 .chat2-rail > div:not(.chat2-everyone):not(.chat2-rail-list) { display: none; }
  body.v4 .chat2-archive-pager { display: none; }

  /* Everyone chip: compact pill, note hidden. */
  body.v4 .chat2-everyone {
    margin-bottom: 0;
    flex: 0 0 auto;
    min-height: 44px;
    padding: 8px 12px;
  }
  body.v4 .chat2-everyone-note { display: none; }

  /* Department groups flow inline; expanded members continue the lane. */
  body.v4 .chat2-rail-list {
    flex: 0 0 auto;
    max-height: none;
    overflow: visible;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
  }
  body.v4 .chat2-dept {
    margin-bottom: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
  }
  body.v4 .chat2-dept-head {
    flex: 0 0 auto;
    min-height: 44px;
    white-space: nowrap;
    border: 1px solid var(--rule);
    background: var(--surface);
    border-radius: var(--r-pill);
    /* inline style keeps its 7px 8px padding - min-height 44px carries
       the touch target, so no !important fight needed */
  }
  body.v4 .chat2-dept-body {
    display: flex;                  /* div default block - no inline display set */
    flex-direction: row;
    align-items: center;
    gap: 6px;
    /* inline 2px/6px padding kept - negligible in a horizontal lane */
  }
  body.v4 .chat2-persona {
    flex: 0 0 auto;
    min-height: 44px;
    white-space: nowrap;
    border: 1px solid var(--rule);
    background: var(--surface);
    border-radius: var(--r-pill);
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* Main column: tighter padding, full-width bubbles. */
  body.v4 .chat2-main { padding: 14px; min-height: 0; }
  body.v4 .chat2-msg-col { max-width: 100%; min-width: 0; }

  /* Composer: 16px input (no iOS zoom), 44px send. The bar is the last
     flex child so it already hugs the bottom of the shell, which itself
     ends above the tab bar (the .main bottom padding from the shell
     wave clears the bar + safe area). */
  /* 16px input stops iOS zoom-on-focus. The redundant inline 14px was
     removed from chat.js (the desktop 14px lives in .chat2-input-bar
     input), so the id selector wins here without !important. */
  body.v4 .chat2-input-bar input,
  body.v4 .chat2-input-bar #chat-input { font-size: 16px; }
  body.v4 .chat2-input-bar .btn-v4 { min-height: 44px; }

  /* Suggestion prompts: full-width tap rows. */
  body.v4 .chat2-prompt { min-height: 44px; }

  /* Header row above the thread: allow wrap so Save chat never clips. */
  body.v4 .chat2-main > div:first-child { flex-wrap: wrap; gap: 8px; }
}
@media (hover: none) and (pointer: coarse) {
  body.v4 .chat2-persona, body.v4 .chat2-dept-head { -webkit-tap-highlight-color: transparent; }
  body.v4 .chat2-persona:active, body.v4 .chat2-dept-head:active { background: var(--rule-soft); }
}

/* ── MOBILE: velocity ── */
/* Review desk on a phone = read a recommendation, accept/reject, move on.
   Scorecard 4-across → 2×2; the three status tabs fit a 390px viewport as-is
   (no burger needed - verified: 3 pills ≤ ~330px), so they just get touch
   sizing; rec cards stack their footer actions full-width. */
@media (max-width: 767.98px) {
  /* Hero: keep the headline readable, actions full width. */
  body.v4 .velocity-ag .hero-ag h1 { font-size: 24px; }
  body.v4 .velocity-ag .vel-hero-actions .vr-cta { min-height: 44px; flex: 1 1 auto; }

  /* Scorecard strip → 2×2 grid; right-borders become row separation. */
  body.v4 .velocity-ag .sc-grid { grid-template-columns: 1fr 1fr; gap: 14px 12px; }
  body.v4 .velocity-ag .sc-tile { padding-right: 0; border-right: none; }
  body.v4 .velocity-ag .sc-tile .sct-n { font-size: 24px; }

  /* Status tabs: full-width pill row, even thirds, 44px targets. */
  body.v4 .velocity-ag .ag-tabs { width: 100%; }
  body.v4 .velocity-ag .ag-tabs button { flex: 1 1 0; justify-content: center; min-height: 44px; padding: 7px 8px; }

  /* Category chips: 40px targets, wrap (kept - they're the only filter). */
  body.v4 .velocity-ag .fchip { min-height: 40px; display: inline-flex; align-items: center; }

  /* Recommendation cards: meta pills wrap above, title/desc full width
     (the card body already spans the grid), decision buttons full-width
     side-by-side with Accept dominant on the right (thumb side). */
  body.v4 .velocity-ag .vrow { padding: 14px; }
  body.v4 .velocity-ag .vrow:hover { transform: none; }
  body.v4 .velocity-ag .rec-actions { display: flex; gap: 10px; }
  body.v4 .velocity-ag .rec-actions .vr-cta { flex: 1 1 0; min-height: 48px; }
  body.v4 .velocity-ag .rec-decided-meta { flex-wrap: wrap; gap: 8px; }
  body.v4 .velocity-ag .rec-decided-meta .vr-cta { min-height: 44px; }
  body.v4 .velocity-ag .vr-cta { -webkit-tap-highlight-color: transparent; }
  body.v4 .velocity-ag .vr-cta:active { filter: brightness(0.94); }
}

/* ── MOBILE: monday ── */
/* =============================================================
   MONDAY (Sponsors · Ad sales) - phone layout.
   Kanban → horizontal swipe lanes (one stage ≈ 85vw, snap scroll);
   campaigns table → stacked cards (data-m-label pattern);
   inventory calendar stacks (episodes, then sponsors panel below),
   slot chips go 2×2 and grow to touch size; the segmented control
   stays on one line. All rules additive inside the phone query -
   desktop rendering unchanged.
   ============================================================= */
@media (max-width: 767.98px) {

  /* ─── Kanban → swipe lanes ─── */
  /* Wins over body.v4 .kanban { display:grid; grid-template-columns:… }
     (not !important) by cascade order; the !important gap rule still
     applies and is fine for flex. */
  body.v4 #monday-kanban.kanban {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  body.v4 #monday-kanban.kanban::-webkit-scrollbar { display: none; }
  body.v4 #monday-kanban .kb-col {
    flex: 0 0 85vw;
    max-width: 85vw;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  /* Drag stays available but must never trap the pan gesture, and a tap
     shouldn't trigger double-tap zoom. */
  body.v4 #monday-kanban .kb-card {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  body.v4 #monday-kanban .kb-card:active { filter: brightness(0.97); }

  /* ─── Campaigns table → stacked cards ─── */
  body.v4 #monday-pane .data-table:has(td[data-m-label]) thead { display: none; }
  body.v4 #monday-pane .data-table:has(td[data-m-label]) tbody { display: block; }
  body.v4 #monday-pane .data-table tbody tr.camp-row {
    display: block;
    padding: 12px 14px;
    border-bottom: 1px solid var(--rule);
    -webkit-tap-highlight-color: transparent;
  }
  body.v4 #monday-pane .data-table tbody tr.camp-row:active { background: var(--rule-soft); }
  body.v4 #monday-pane .data-table tr.camp-row td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
    border-bottom: none;
    font-size: 13px;
    text-align: left;
  }
  body.v4 #monday-pane .data-table tr.camp-row td::before {
    content: attr(data-m-label);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-4);
    flex: 0 0 auto;
  }
  /* Advertiser + Net are the glance fields - bigger, label hidden on the
     advertiser line so the name leads the card. */
  body.v4 #monday-pane .data-table tr.camp-row td[data-m-label="Advertiser"] { padding-bottom: 6px; }
  body.v4 #monday-pane .data-table tr.camp-row td[data-m-label="Advertiser"]::before { display: none; }
  body.v4 #monday-pane .data-table tr.camp-row td[data-m-label="Advertiser"] > div:first-child { font-size: 15px; }
  body.v4 #monday-pane .data-table tr.camp-row td[data-m-label="Net"] strong { font-size: 14.5px; }

  /* ─── Tab bar: Add deal button stays tappable ─── */
  body.v4 .monday-tabbar { flex-wrap: wrap; gap: 8px; }
  body.v4 .monday-tabbar-action { min-height: 44px; }

  /* ─── Inventory calendar ─── */
  /* inv-grid2 already stacks at ≤1000px (1fr); DOM order puts the
     sponsors panel below the episode list - nothing to reorder. */
  body.v4 #monday-pane .inv-head { flex-wrap: wrap; row-gap: 8px; padding: 12px 14px; }
  body.v4 #monday-pane .inv-head-stack { align-items: flex-start; }
  /* Segmented control: one line, never wraps - scrolls inside itself if tight. */
  body.v4 #monday-pane .inv-spon-seg {
    display: flex;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  body.v4 #monday-pane .inv-spon-seg::-webkit-scrollbar { display: none; }
  body.v4 #monday-pane .inv-spon-seg-btn { white-space: nowrap; min-height: 40px; }
  /* Episode rows stack: meta full width, the 4 slot chips go 2×2 at
     thumb size beneath. */
  body.v4 #monday-pane .inv-ep-row { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 14px; }
  body.v4 #monday-pane .inv-ep-meta { width: auto; }
  body.v4 #monday-pane .inv-slots { grid-template-columns: repeat(2, 1fr); width: 100%; }
  body.v4 #monday-pane .inv-slot { min-height: 48px; -webkit-tap-highlight-color: transparent; }
  body.v4 #monday-pane .inv-slot:active { transform: none; filter: brightness(0.96); }
  /* Month strip: keep its own horizontal scroll, snap per month. */
  body.v4 #monday-pane .inv-months {
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding: 14px;
  }
  body.v4 #monday-pane .inv-month { min-width: 42vw; scroll-snap-align: start; }
  body.v4 #monday-pane .inv-monthnav button { width: 36px; height: 36px; }
  body.v4 #monday-pane .inv-pace { -webkit-tap-highlight-color: transparent; }
  body.v4 #monday-pane .inv-pace:active { background: var(--rule-soft); }

  /* Slot modal (.inv-modal sheets via the shell): footer buttons reach
     thumb size; the sponsor logo grid is already a 2-col auto-fill. */
  body.v4 .inv-modal-foot .btn-sm { min-height: 44px; }
  body.v4 .inv-modal-foot { flex-wrap: wrap; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }

  /* Deal modal (ep-modal family - sheets via the shell). Field rows stack. */
  body.v4 .monday-deal-modal .ep-field-row { grid-template-columns: 1fr; }
}

/* ── MOBILE: chat-panel (human messenger dock) ── */
/* The floating 360×520 dock becomes a full-screen takeover sheet:
   full width, pinned to the bottom, rising to the top safe area, with
   rounded top corners - message body scrolls, composer sits above the
   home indicator. Collapsed bubbles float just above the tab bar.
   Everything is CSS-only; the dock's open/close/minimise JS untouched. */
@media (max-width: 767.98px) {
  body.v4 .cp-panel {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: calc(100dvh - max(12px, env(safe-area-inset-top, 0px)));
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    z-index: 2300;                  /* above the tab bar (1600) */
    animation: mSheetUp 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  }
  /* Tab strip + header rows: bigger touch targets. */
  body.v4 .cp-tab { min-height: 44px; }
  body.v4 .cp-icon {
    min-width: 44px;
    min-height: 44px;
    display: inline-grid;
    place-items: center;
  }
  /* Composer: 16px input, send/attach at thumb size, safe-area pad. */
  body.v4 .cp-composer {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }
  body.v4 .cp-composer-input { font-size: 16px; }
  body.v4 .cp-attach, body.v4 .cp-send { width: 44px; height: 44px; }

  /* Collapsed bubble stack: float above the tab bar, not under it. */
  body.v4 .cp-bubbles {
    bottom: calc(74px + env(safe-area-inset-bottom, 0px));
    right: 14px;
  }
}

/* ── MOBILE: pipeline ── */
/* =============================================================
   PIPELINE (Episodes board) <768px - the kanban becomes horizontal
   swipe lanes: one stage per ~85vw column, scroll-snap, the stage
   header pinned while the lane's cards scroll vertically inside the
   lane. Tab strip already burger-collapses via initBurgerTabs()
   (it overflows at phone widths). Cards/links get 44px touch.
   Additive only - every rule lives in a media query, desktop CSS
   above is untouched.
   ============================================================= */
@media (max-width: 767.98px) {
  /* Kanban → swipe lanes. display:flex beats the desktop display:grid
     (same selector, later in the file); the !important on the desktop
     gap is irrelevant to flex direction. */
  body.v4 .kanban {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding-bottom: 8px;
    /* edge peek of the next lane */
    scroll-padding-left: 4px;
  }
  body.v4 .kb-col {
    flex: 0 0 85vw;
    max-width: 85vw;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    max-height: 68dvh;
    min-height: 300px;
  }
  /* The lane's card area scrolls vertically; the stage header (count +
     label) stays pinned above it by construction. */
  body.v4 .kb-col .kb-drop {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
  }
  /* Expanded-column cap is redundant inside the lane scroller */
  body.v4 .kb-drop-expanded { max-height: none; }
  /* Touch targets - cards, "+N more", "+ add", archive rows, calendar nav */
  body.v4 .kb-card { min-height: 44px; -webkit-tap-highlight-color: transparent; }
  body.v4 .kb-card:active { filter: brightness(0.97); }
  body.v4 .kb-more, body.v4 .kb-col-add { min-height: 44px; display: flex; align-items: center; justify-content: center; }
  body.v4 .ep-row { min-height: 44px; -webkit-tap-highlight-color: transparent; }
  body.v4 .big-cal-nav .btn-v4 { min-height: 44px; min-width: 44px; }

  /* Pipeline-tab calendar (month grid) - compact cells so 7 columns fit;
     event chips shrink to readable slivers. */
  body.v4 .big-cal-grid { grid-auto-rows: 76px; }
  body.v4 .big-cal-cell { padding: 4px; font-size: 10px; }
  body.v4 .big-cal-cell .date { font-size: 11px; }
  body.v4 .big-cal-event { font-size: 8.5px; padding: 1px 3px; margin-top: 2px; }

  /* Ad Slot Schedule rows already stack ≤760px; widen the touch targets */
  body.v4 .adsch-slot { min-height: 34px; }
  body.v4 .adsch-slot-add { min-height: 44px; min-width: 44px; }
}
/* Hover-revealed unbook "×" on filled ad slots must be visible on touch */
@media (hover: none) {
  body.v4 .adsch-slot-filled .adsch-slot-x { opacity: 0.75; }
}

/* ── MOBILE: velocity (decided-meta layout) ── */
@media (max-width: 767.98px) {
  /* Base .rec-decided-meta is inline text; on a phone lay out who/when +
     the "Move back to pending" button as a wrapping flex row. */
  body.v4 .velocity-ag .rec-decided-meta { display: flex; align-items: center; }
}

/* ── MOBILE: invoices ── */
/* =============================================================
   INVOICES - phone layout. The register table re-renders as
   stacked cards (advertiser + amount prominent, status pill,
   date meta) via the data-m-label pattern; the three stat cards
   stack; section actions + the Mark received button hit 44px.
   ============================================================= */
@media (max-width: 767.98px) {

  /* Stat cards: 3-across → single column (each carries value + sub + chip). */
  body.v4 .inv-stats { grid-template-columns: 1fr; gap: 10px; }

  /* Section-head actions: thumb-sized. */
  body.v4 #inv-body .section-head .actions .btn-sm { min-height: 44px; }

  /* ─── Register table → stacked cards ─── */
  body.v4 #inv-body .data-table thead { display: none; }
  body.v4 #inv-body .data-table tbody { display: block; }
  body.v4 #inv-body .data-table tbody tr {
    display: block;
    padding: 12px 14px;
    border-bottom: 1px solid var(--rule);
    -webkit-tap-highlight-color: transparent;
  }
  body.v4 #inv-body .data-table tbody tr:active { background: var(--rule-soft); }
  body.v4 #inv-body .data-table tbody td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
    border-bottom: none;
    font-size: 13px;
    text-align: left;
  }
  body.v4 #inv-body .data-table tbody td::before {
    content: attr(data-m-label);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-4);
    flex: 0 0 auto;
  }
  /* Client leads the card (no label, bigger); Amount is the second glance
     field. Currency cell is cut - the amount string already carries it. */
  body.v4 #inv-body .data-table td[data-m-label="Client"] { padding-bottom: 2px; }
  body.v4 #inv-body .data-table td[data-m-label="Client"]::before { display: none; }
  body.v4 #inv-body .data-table td[data-m-label="Client"] strong { font-size: 15px; }
  body.v4 #inv-body .data-table td[data-m-label="Amount"] { font-weight: 700; font-size: 14.5px; }
  body.v4 #inv-body .data-table td[data-m-label="Currency"] { display: none; }
  /* Mark received: full-width thumb button on its own line. */
  body.v4 #inv-body .data-table td[data-m-label="Action"] { display: block; padding-top: 8px; }
  body.v4 #inv-body .data-table td[data-m-label="Action"]::before { display: none; }
  body.v4 #inv-body .data-table td[data-m-label="Action"] .btn-sm {
    display: flex;
    width: 100%;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }

  /* New-invoice / detail modal (aiceo family - sheets via the shell):
     foot buttons thumb-sized; the inline 2-col field grids hold (two
     short fields fit a phone). */
  body.v4 .aiceo-modal-foot .btn-sm { min-height: 44px; flex: 1 1 auto; }
}

/* ── MOBILE: command (Command Centre) ── */
/* System/Operations master tabs go full-width 2-up; the category toggle
   strip + filter bar stack and wrap with full-width search; batch chips
   become one swipe lane. Item rows restack: who-pill + title on the
   first line full width, category/priority pills + Done on a second
   line. The detail popup (.cc-modal-ov) already sheets via the shell;
   here the before/after design grid stacks vertically and the footer
   buttons go full-width thumb rows. */
@media (max-width: 767.98px) {
  /* Area tabs: stretch across the viewport, equal halves. */
  body.v4 .cc-areas { width: 100%; display: flex; }
  body.v4 .cc-area-tab { flex: 1; justify-content: center; min-height: 44px; padding: 9px 10px; }

  /* Toolbar: toggles scroll in one lane; right cluster wraps below. */
  body.v4 .cc-toolbar { gap: 10px; }
  body.v4 .cc-toggles {
    flex: 1 1 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding-bottom: 4px;
  }
  body.v4 .cc-toggle { flex: 0 0 auto; min-height: 40px; }
  body.v4 .cc-toolbar-right { flex: 1 1 100%; justify-content: space-between; }
  body.v4 .cc-add { min-height: 44px; }
  body.v4 .cc-showdone { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }

  /* Filter bar: search full width on its own row; selects share a row. */
  body.v4 .cc-filterbar { gap: 8px; }
  body.v4 .cc-search { flex: 1 1 100%; max-width: none; font-size: 16px; min-height: 44px; }
  body.v4 .cc-fsel { flex: 1 1 auto; min-width: 0; min-height: 44px; font-size: 16px; }
  body.v4 .cc-fneeds { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }

  /* Batch chips: one swipe lane. */
  body.v4 .cc-batches {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding-bottom: 4px;
  }
  body.v4 .cc-batch { flex: 0 0 auto; min-height: 40px; }

  /* Item rows: two-line stack. Title takes the full first line; pills +
     actions sit underneath. Title un-truncates (wrap, max 2 lines worth
     of space is fine on a list page). */
  body.v4 .cc-row {
    flex-wrap: wrap;
    row-gap: 6px;
    padding: 12px 14px;
    min-height: 44px;
  }
  body.v4 .cc-row-title {
    flex: 1 1 calc(100% - 70px);   /* shares line 1 with the who-pill */
    white-space: normal;
    line-height: 1.35;
  }
  body.v4 .cc-row-pills { flex: 1 1 auto; flex-wrap: wrap; }
  body.v4 .cc-row-actions { margin-left: auto; }
  body.v4 .cc-done-btn { min-height: 40px; padding: 6px 14px; }
  body.v4 .cc-reopen-sm { min-height: 40px; }

  /* Detail popup internals (the overlay is already a sheet): before/after
     grid stacks vertically; ask box + footer go thumb-sized. */
  body.v4 .cc-ba-grid { grid-template-columns: 1fr; }
  body.v4 .cc-modal-foot { flex-wrap: wrap; gap: 8px; }
  body.v4 .cc-modal-foot .btn-primary,
  body.v4 .cc-modal-foot .btn-secondary { flex: 1 1 auto; min-height: 44px; }
  body.v4 .cc-ask-in { font-size: 16px; }
  body.v4 .cc-ask-btn { min-height: 44px; }
  body.v4 .cc-modal-x { min-width: 44px; min-height: 44px; }
}

/* ── MOBILE: settings ── */
/* The settings-split already collapses ≤800px (nav → horizontal scroll
   strip), which covers 768 - here we top it up: pane padding tightens,
   nav items get touch height, staff/supplier rows stack (name block
   full width, admin action cluster wraps beneath), role cards single
   column, and the activity/cron data tables get contained horizontal
   scroll inside their card. 2FA + staff + company modals all use shell
   sheet overlay classes (.cm-overlay / .ep-modal-overlay /
   .company-modal-overlay) - nothing to add. */
@media (max-width: 767.98px) {
  body.v4 .settings-nav { padding: 10px; gap: 6px; }
  body.v4 .settings-navitem { min-height: 44px; white-space: nowrap; }
  body.v4 .settings-pane { padding: 16px 14px; }

  /* Staff / supplier rows: stack name above the action cluster. */
  body.v4 .staff-row { flex-wrap: wrap; row-gap: 8px; min-height: 44px; }
  body.v4 .staff-row > div:last-child { flex-wrap: wrap; row-gap: 6px; }
  body.v4 .staff-row .btn-sm { min-height: 40px; }

  /* Role reference cards: one per row. */
  body.v4 .users-role-cards { grid-template-columns: 1fr; }

  /* Activity log + cron health tables: scroll inside the card, never
     the page. Scoped to the settings pane only. */
  body.v4 .settings-pane .card { overflow-x: auto; }
  body.v4 .settings-pane .data-table { min-width: 560px; }
  body.v4 .settings-pane .data-table thead th,
  body.v4 .settings-pane .data-table tbody td { white-space: normal; }

  /* Cron rows' Run now / Detail cluster: thumb-sized. */
  body.v4 .settings-pane [data-cron-run],
  body.v4 .settings-pane .btn-sm { min-height: 40px; }

  /* Cron detail rows inside the popup (sheet via .cc-modal-ov): wrap. */
  body.v4 .cron-d-row { flex-wrap: wrap; }

  /* Form inputs inside panes (16px is set globally by the shell; selects
     in the staff modal sometimes carry inline sizes - belt & braces). */
  body.v4 .settings-pane input,
  body.v4 .settings-pane select,
  body.v4 .settings-pane textarea { font-size: 16px; }
}

/* ── MOBILE: pnl ── */
/* =============================================================
   REVENUE P&L - phone layout. Summary money tiles go 2-up
   (Unallocated spans the row); the monthly P&L table keeps its
   tabular scan inside a contained horizontal scroll; the Audit
   tab's transaction table re-renders as stacked cards (merchant +
   signed amount prominent, Income/Cost toggle + category select
   stacked full-width beneath, 44px accept buttons).
   ============================================================= */
@media (max-width: 767.98px) {

  /* money-tiles: the v4 rule is repeat(3,1fr) (not !important) → 2-up. */
  body.v4 #pnl-body .money-tiles { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  body.v4 #pnl-body .money-tiles .money-tile:nth-child(3) { grid-column: 1 / -1; }
  body.v4 #pnl-body .money-hero { padding: 18px 16px; }
  body.v4 #pnl-body .money-hero-value { font-size: 34px; }

  /* ─── Summary table: contained horizontal scroll, never page scroll ───
     display:block on the table makes it its own scroll container (the
     thead/tbody form an anonymous inner table). */
  body.v4 #pnl-body .data-table:not(:has(td[data-m-label])) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  body.v4 #pnl-body .data-table:not(:has(td[data-m-label])) th,
  body.v4 #pnl-body .data-table:not(:has(td[data-m-label])) td {
    white-space: nowrap;
    padding: 10px 12px;
  }

  /* ─── Audit table → stacked cards ─── */
  body.v4 #pnl-body .data-table:has(td[data-m-label]) { display: block; }
  body.v4 #pnl-body .data-table:has(td[data-m-label]) thead { display: none; }
  body.v4 #pnl-body .data-table:has(td[data-m-label]) tbody { display: block; }
  body.v4 #pnl-body .data-table:has(td[data-m-label]) tbody tr {
    display: block;
    padding: 12px 14px;
    border-bottom: 1px solid var(--rule);
  }
  body.v4 #pnl-body .data-table:has(td[data-m-label]) tbody td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
    border-bottom: none;
    font-size: 13px;
    text-align: left;
  }
  body.v4 #pnl-body .data-table:has(td[data-m-label]) tbody td::before {
    content: attr(data-m-label);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-4);
    flex: 0 0 auto;
  }
  /* Merchant leads (no label, bigger); signed amount is the second glance
     field; Date + State stay as small meta rows. */
  body.v4 #pnl-body .data-table td[data-m-label="Merchant"] { padding-bottom: 2px; }
  body.v4 #pnl-body .data-table td[data-m-label="Merchant"]::before { display: none; }
  body.v4 #pnl-body .data-table td[data-m-label="Merchant"] strong { font-size: 15px; }
  body.v4 #pnl-body .data-table td[data-m-label="Amount"] { font-size: 14.5px; }
  /* Toggle + category: stacked, full-width, thumb-sized controls. */
  body.v4 #pnl-body .data-table td[data-m-label="Income / Cost"],
  body.v4 #pnl-body .data-table td[data-m-label="Category"] {
    display: block;
    padding-top: 8px;
  }
  body.v4 #pnl-body .data-table td[data-m-label="Income / Cost"]::before,
  body.v4 #pnl-body .data-table td[data-m-label="Category"]::before {
    display: block;
    margin-bottom: 5px;
  }
  body.v4 #pnl-body .pnl-kind-toggle { display: flex; width: 100%; }
  body.v4 #pnl-body .pnl-kt-btn { flex: 1 1 0; min-height: 44px; font-size: 13px; }
  body.v4 #pnl-body .pnl-cat-select { min-height: 44px; }
  body.v4 #pnl-body .pnl-accept {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    margin-top: 8px;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    font-weight: 700;
  }
  /* Hover-only de-ghosting has no hover on a phone - suggested rows render
     at full opacity so they're readable; the dashed borders still mark them. */
  body.v4 #pnl-body .pnl-suggested td { opacity: 1; }
}

/* ── MOBILE: episode-surface ── */
/* =============================================================
   EPISODE SURFACE (+ the deal surface, which reuses every es-*
   class) <768px. The shell wave already turns .es-modal-overlay →
   .es-modal-card into a 90dvh bottom sheet; this block makes the
   INSIDE of that sheet phone-shaped:
   · one scroll container (.es-modal-body) - main column first,
     right accordion rail stacked below it (DOM order already
     main → right)
   · the 6-stage stepper becomes a horizontally scrollable snap
     row with labels restored (desktop ≤880px hides them)
   · 2-col form grids (.es-fminline / .es-split) stack
   · inline-styled .es-row2/.es-row3 grids stack via full-span
     children (inline grid-template-columns can't be overridden
     without !important - spanning the children sidesteps it)
   · sponsor slot grids go 2-up (inline repeat(N,1fr) handled per
     data-slot-count by child spans)
   · sys_clips 5-step stepper stacks vertically
   · checklist section cards, form fields, uploads: full width,
     44px touch, wrapped headers
   ============================================================= */
@media (max-width: 767.98px) {
  /* - Sheet internals: single scroller, stacked columns - */
  body.v4 .es-modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  body.v4 .es-modal-body .es-surf { height: auto; min-height: 100%; }
  body.v4 .es-body,
  body.v4 .es-modal-body .es-body { display: block; }
  body.v4 .es-main,
  body.v4 .es-modal-body .es-body .es-main {
    overflow: visible;
    height: auto;
    max-height: none;
    padding: 18px 14px 22px;
    border-right: none;
  }
  body.v4 .es-right,
  body.v4 .es-modal-body .es-body .es-right {
    overflow: visible;
    height: auto;
    max-height: none;
    border-left: none;
    border-top: 1px solid var(--g-border);
    padding: 14px 14px calc(18px + env(safe-area-inset-bottom, 0px));
  }
  /* Route view (#/episode-surface style pages): drop the decorative
     outer frame so the surface uses the full phone width. */
  body.v4 .es-stage-bg { margin: 0; padding: 0; border: none; border-radius: 0; background: transparent; }
  body.v4 .es-surf { min-height: 0; }

  /* CREATE MODE controls on a phone: segmented control full-width, 44px targets. */
  body.v4 .es-seg { display: flex; width: 100%; }
  body.v4 .es-seg-btn { flex: 1; min-height: 44px; }

  /* - Header: tighter, actions wrap, title steps down - */
  body.v4 .es-head { padding: 12px 14px; flex-wrap: wrap; }
  body.v4 .es-title { font-size: 19px; }
  body.v4 .es-icon-btn { width: 40px; height: 40px; }

  /* - Stage stepper → horizontal snap row with labels - */
  body.v4 .es-stepper {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding: 10px 14px 12px;
  }
  body.v4 .es-marker {
    flex: 0 0 auto;
    min-width: 104px;
    min-height: 44px;
    scroll-snap-align: start;
    -webkit-tap-highlight-color: transparent;
  }
  body.v4 .es-marker:active { background: var(--rule-soft); }
  /* Restore the labels the desktop ≤880px rule hides */
  body.v4 .es-marker-lbl, body.v4 .es-marker-num { display: block; }

  /* - Checklist section cards: full-width, wrapped heads, comfy body - */
  body.v4 .es-sec-head { padding: 12px 14px; flex-wrap: wrap; row-gap: 8px; }
  body.v4 .es-sec-body { padding: 14px; }
  body.v4 .es-sec-owner { margin-left: 0; }
  body.v4 .es-sec-foot { flex-wrap: wrap; }
  body.v4 .es-form-save { min-height: 44px; }

  /* - Forms stack to one column - */
  body.v4 .es-fminline { grid-template-columns: 1fr; }
  body.v4 .es-split { grid-template-columns: 1fr; }
  /* Inline-styled 2/3-col rows: span every child across the full row */
  body.v4 .es-row2 > *, body.v4 .es-row3 > * { grid-column: 1 / -1; }
  body.v4 .es-fld input, body.v4 .es-fld select, body.v4 .es-fld textarea { min-height: 44px; font-size: 16px; }
  body.v4 .es-fld textarea { min-height: 72px; }
  body.v4 .es-tick { min-height: 44px; width: 100%; -webkit-tap-highlight-color: transparent; }
  body.v4 .es-tick-row { min-height: 44px; }

  /* - Upload areas: full-width, generous drop/tap zone - */
  body.v4 .es-sec .es-upload-drop, body.v4 .es-upload-drop { width: 100%; box-sizing: border-box; padding: 18px 12px; min-height: 64px; }
  body.v4 .es-upload-del { min-width: 32px; min-height: 32px; }

  /* - Sponsor slot grids → 2-up - */
  body.v4 .es-sponsor-grid { grid-template-columns: repeat(2, 1fr); }
  /* sys_sponsors slot grid carries an inline repeat(N,1fr); make each
     slot span half the declared columns so the row wraps 2-up. Odd
     counts stack full-width (cleanest readable fallback). */
  body.v4 .es-spslot-grid[data-slot-count="2"] > * { grid-column: span 1; }
  body.v4 .es-spslot-grid[data-slot-count="3"] > * { grid-column: 1 / -1; }
  body.v4 .es-spslot-grid[data-slot-count="4"] > * { grid-column: span 2; }
  body.v4 .es-spslot-grid[data-slot-count="5"] > * { grid-column: 1 / -1; }
  body.v4 .es-spslot-grid[data-slot-count="6"] > * { grid-column: span 3; }
  body.v4 .es-spslot { min-height: 84px; }
  body.v4 .es-spslot-empty { min-height: 64px; }

  /* - sys_clips: the 5-step stepper stacks vertically - */
  body.v4 .es-clipsx-stepper { flex-direction: column; align-items: stretch; gap: 8px; }
  body.v4 .es-clipsx-stepi { min-height: 36px; }
  body.v4 .es-clip-btn { min-height: 40px; }
  body.v4 .es-clip-descript { flex-wrap: wrap; align-items: stretch; }
  body.v4 .es-clip-field { width: 100%; }
  body.v4 .es-clip-row { flex-wrap: wrap; min-height: 44px; }

  /* - Right-rail accordion: 44px headers - */
  body.v4 .es-acc-head { min-height: 44px; -webkit-tap-highlight-color: transparent; }
  body.v4 .es-acc-head:active { background: var(--rule-soft); }

  /* - Tasks / panels in the rail - */
  body.v4 .es-panel-h { min-height: 44px; }
}

/* ── MOBILE: deal-surface ── */
/* =============================================================
   DEAL SURFACE <768px - it renders inside the same .es-modal-card
   sheet and reuses the es-* layout classes (stepper, body, main,
   right rail, section cards, forms), so the episode-surface block
   above covers the whole transform. Only the deal-specific
   inventory rows (.ds-inv-row, a 4-col grid) need their own
   stacking + touch rules.
   ============================================================= */
@media (max-width: 767.98px) {
  body.v4 .ds-inv-row {
    grid-template-columns: auto 1fr;
    row-gap: 2px;
    min-height: 44px;
  }
  body.v4 .ds-inv-title { white-space: normal; }
  body.v4 .ds-inv-slot, body.v4 .ds-inv-date { grid-column: 2; justify-self: start; }
}

/* ── MOBILE: keith ── */
/* Phone Keith = read the brief at breakfast, ask one thing, act on the reply.
   The grid already stacks at ≤900px with the conversation FIRST and the brief
   rail BELOW (DOM order). This block: composer pinned above the tab bar,
   no nested scroll traps, full-width reply cards, resizing charts/tables,
   full-screen expand, and thumb-sized everything. */
@media (max-width: 767.98px) {
  /* ── Layout ── */
  body.v4 .keith-grid { gap: 14px; }
  /* The brief rail must not be its own scroll box on a phone - it reads as
     part of the page below the conversation. */
  body.v4 .keith-brief-wrap { position: static; }
  body.v4 .keith-brief { max-height: none; overflow: visible; padding-right: 0; }

  /* ── Conversation card ── */
  body.v4 .keith-convo { min-height: 0; }
  /* Thread: phone-sized internal scroll so toolbar+thread+composer fit one
     viewport; momentum scroll; contained so the page doesn't rubber-band. */
  body.v4 .kc-thread {
    min-height: 220px;
    max-height: calc(100dvh - 330px);
    padding: 16px 14px 8px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  body.v4 .kc-msg.kc-user .kc-bubble { max-width: 88%; }

  /* ── Composer: sticky above the tab bar ──
     Pins while any of the conversation card is in view, sitting clear of
     the bottom tab bar (bar ≈ 60px + safe inset, +6px breathing room). */
  body.v4 .kc-composer {
    position: sticky;
    bottom: calc(66px + env(safe-area-inset-bottom, 0px));
    z-index: 5;
    margin: 10px 12px 14px;
    background: var(--paper-3);
  }
  body.v4 .kc-input { font-size: 16px; }
  body.v4 .kc-send { width: 44px; height: 44px; }

  /* ── Useful Prompts: one swipe lane instead of a 2-col grid ── */
  body.v4 .kc-suggest-wrap { padding: 0 14px; }
  body.v4 .kc-suggest-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding-bottom: 6px;
  }
  body.v4 .kc-suggest-grid .kc-chip { flex: 0 0 auto; min-height: 40px; display: inline-flex; align-items: center; }

  /* ── Toolbar ── */
  body.v4 .kc-toolbar { padding: 10px 14px; }
  body.v4 .kc-toolbar-sub { display: none; }            /* "AI Chief of Staff" strapline - cut */
  body.v4 .kc-tool { min-height: 40px; }

  /* ── Reply cards: full width of the thread ── */
  body.v4 .kc-assistant .kc-stack { flex: 1; min-width: 0; }
  body.v4 .kc-proposal, body.v4 .kc-element, body.v4 .kc-chart { max-width: 100%; }
  /* Proposal + task buttons: thumb-sized, confirm full width. */
  body.v4 .kp-actions { display: flex; gap: 10px; }
  body.v4 .kp-actions .kp-btn { flex: 1 1 0; min-height: 48px; }
  body.v4 .kc-task-go { min-height: 44px; }
  body.v4 .kc-task-act { flex-wrap: wrap; row-gap: 8px; }
  body.v4 .kc-onboard-actions .btn-v4,
  body.v4 .kc-onboard-actions button { min-height: 44px; }

  /* ── Visual contract: charts + tables resize, never overflow ── */
  /* SVG line chart already uses viewBox + width:100%; bar chart columns get
     a sane minimum then scroll WITHIN their card for long series. */
  body.v4 .kc-linechart { width: 100%; height: auto; }
  body.v4 .kc-chart-bars { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  body.v4 .kc-chart-col { min-width: 34px; flex: 1 0 34px; }
  /* Table scrolls horizontally inside its card (kc-tablewrap is already
     overflow-x:auto) - give it touch momentum; the page itself never pans. */
  body.v4 .kc-tablewrap { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }

  /* ── Brief rail content ── */
  body.v4 .keithb-today { flex-wrap: wrap; }
  body.v4 .keithb-stage-grid { display: flex; flex-wrap: wrap; gap: 6px; }
  body.v4 .keithb-help { min-height: 40px; display: inline-flex; align-items: center; }

  /* ── Expand (QA-KE-5): full screen on a phone ──
     The overlay reuses .ep-modal-overlay, which the shell bottom-anchors;
     the shell only reshapes .ep-modal though, so size the kc-fs shell here. */
  body.v4 .kc-fs-overlay { padding: 0; align-items: stretch; }
  body.v4 .kc-fs-shell { width: 100%; height: 100dvh; max-height: 100dvh; }
  body.v4 .kc-fs-shell .keith-convo { border-radius: 0; border: none; }
  /* Inside the full-screen overlay there's no page scroll - let the thread
     take the room and pin the composer to the sheet's own bottom. */
  body.v4 .kc-fs-shell .kc-thread { max-height: none; }
  body.v4 .kc-fs-shell .kc-composer {
    position: static;
    margin-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }

  /* ── Plan my day (QA-KE-6): sheet via shell (.ep-modal); internals ── */
  body.v4 .kc-plan-modal { max-height: 90dvh; }
  body.v4 .kc-plan-item { flex-wrap: wrap; }
  body.v4 .kc-plan-acts { flex: 1 1 100%; justify-content: flex-end; }
  body.v4 .kc-plan-acts .kc-plan-send { min-height: 44px; flex: 1 1 auto; }
  body.v4 .kc-plan-acts .kc-plan-del { min-width: 44px; min-height: 44px; }
  body.v4 .kc-plan-body { padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 480px) {
  /* Small phones: toolbar "Plan my day" goes icon-text tighter, thread gets
     a touch more room, user bubbles a touch wider. */
  body.v4 .kc-toolbar { gap: 6px; }
  body.v4 .kc-tool { padding: 6px 10px; }
  body.v4 .kc-thread { max-height: calc(100dvh - 310px); }
}

/* ── MOBILE: episode-centre ── */
/* =============================================================
   EPISODE CENTRE <768px. The ec2-body already collapses to one
   column at ≤1000px; what's left for a phone:
   · the 11-track stage tracker (.ec2-progress) becomes a
     horizontally scrollable snap row (6 nodes + 5 rules never fit
     in 390px as a grid)
   · hero stat row wraps 2-up
   · checklist rows + dossier summaries get 44px touch
   ============================================================= */
@media (max-width: 767.98px) {
  body.v4 .ec2-progress {
    display: flex;
    align-items: center;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding: 14px 16px;
    gap: 2px;
  }
  body.v4 .ec2-progress-node {
    flex: 0 0 auto;
    min-width: 84px;
    min-height: 44px;
    scroll-snap-align: start;
    -webkit-tap-highlight-color: transparent;
  }
  body.v4 .ec2-progress-rule { flex: 0 0 22px; }
  body.v4 .hero-stat-row { flex-wrap: wrap; gap: 14px 24px; }
  /* Checklist + dossier touch targets (shared components rendered in
     the centre column) */
  body.v4 .ck-row-main { min-height: 44px; }
  body.v4 .ck-check { min-width: 28px; min-height: 28px; }
  body.v4 .ec-dossier-summary { min-height: 44px; }
  body.v4 .ec-pane-edit { min-width: 40px; min-height: 40px; }
}

/* ── MOBILE: show-notes ── */
/* =============================================================
   SHOW NOTES <768px - the 2fr/1fr grid (latest notes | recent list)
   stacks: notes first, recent list below. The desktop rule pins
   grid-template-columns with !important, so the stack is done by
   flexing the container instead (display/flex-direction are not
   !important anywhere for .grid-2-1). Rows get 44px touch.
   ============================================================= */
@media (max-width: 767.98px) {
  body.v4 .grid-2-1, body.v4 .grid.grid-2-1 {
    display: flex;
    flex-direction: column;
  }
  body.v4 .stage-episode-row { min-height: 44px; }
}

/* ── MOBILE: show-builder ── */
/* =============================================================
   SHOW BUILDER <768px - Pre-record uses the same .grid-2-1 (covered
   by the show-notes rule above: brief first, glance/schedule cards
   below); Post-record's .grid-2 (inputs | AI outputs) stacks the
   same way. Tab buttons get the 44px floor.
   ============================================================= */
@media (max-width: 767.98px) {
  body.v4 .grid-2, body.v4 .grid.grid-2 {
    display: flex;
    flex-direction: column;
  }
  body.v4 .ep-tabs { flex-wrap: wrap; }
  body.v4 .ep-tab { min-height: 44px; -webkit-tap-highlight-color: transparent; }
}

/* ── MOBILE: access ── */
/* People tab: the 380px list + detail two-pane stacks (list first,
   detail beneath - selecting a person repaints with the detail filled).
   Filter chips swipe in one lane; person rows wrap their role/badge
   pills under the name on narrow widths. Roles matrix keeps its
   purposeful horizontal scroll (.acc-roles-wrap already overflow-x).
   Audit rows wrap. */
@media (max-width: 767.98px) {
  body.v4 .acc-people { grid-template-columns: 1fr; gap: 14px; }

  body.v4 .acc-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding-bottom: 4px;
  }
  body.v4 .acc-chip { flex: 0 0 auto; min-height: 40px; }

  body.v4 .acc-prow { flex-wrap: wrap; row-gap: 6px; min-height: 44px; }
  body.v4 .acc-prow-body { flex: 1 1 auto; }
  body.v4 .acc-prow-name { white-space: normal; }

  /* Per-page override rows: page label above the pill group; pills wrap. */
  body.v4 .acc-grow { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
  body.v4 .acc-pills { flex-wrap: wrap; }
  body.v4 .acc-pill { min-height: 40px; }
  body.v4 .acc-select { min-height: 44px; font-size: 16px; width: 100%; }
  body.v4 .acc-field { width: 100%; }
  body.v4 .acc-save { min-height: 44px; }

  /* Matrix: keep the page-name column pinned while the roles scroll. */
  body.v4 .acc-matrix .acc-matrix-page,
  body.v4 .acc-matrix thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--surface);
  }

  body.v4 .acc-audit-row { flex-wrap: wrap; row-gap: 4px; min-height: 44px; }

  /* Page-level tabs (standalone #/access route). */
  body.v4 .acc-tabs { width: 100%; display: flex; }
  body.v4 .acc-tab { flex: 1; text-align: center; min-height: 44px; }
}

/* ── MOBILE: feedback ── */
/* Stat tiles 2-up; the filter segment swipes in one lane; cards keep
   their stack but the footer (status segment + actions) wraps with
   thumb-height options; notes textarea at 16px. */
@media (max-width: 767.98px) {
  /* Stat tiles 2-up - flex sidestep (the grid-4 template is !important). */
  body.v4 .fb-stat-row { display: flex; flex-wrap: wrap; }
  body.v4 .fb-stat-row > .fb-stat-tile { flex: 1 1 calc(50% - 6px); min-width: 0; }

  body.v4 .fb-toolbar { flex-wrap: wrap; }
  body.v4 .fb-filter-seg {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  body.v4 .fb-filter-opt { flex: 0 0 auto; min-height: 40px; }

  body.v4 .fb-card-foot { row-gap: 10px; }
  body.v4 .fb-status-seg {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  body.v4 .fb-status-opt { flex: 0 0 auto; min-height: 40px; }
  body.v4 .fb-card-actions { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
  body.v4 .fb-save-notes { min-height: 44px; }
  body.v4 .fb-go-page { min-height: 44px; display: inline-flex; align-items: center; }
  body.v4 .fb-notes { font-size: 16px; }
  body.v4 .fb-attach-link { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
}

/* ── MOBILE: onboarding ── */
/* The takeover card fits a 390px screen: tighter padding, buttons
   stack full-width in thumb order (primary last = lowest), the avatar
   zone and toggle rows keep 44px+ targets. The whole scene scrolls if a
   step runs long (subs list on small phones). */
@media (max-width: 767.98px) {
  body.v4 .ob-scene {
    padding: 16px 12px calc(24px + env(safe-area-inset-bottom, 0px));
    align-items: flex-start;
    overflow-y: auto;
    min-height: 100dvh;
  }
  body.v4 .ob-card {
    width: 100%;
    padding: 28px 20px 24px;
    border-radius: 18px;
  }
  body.v4 .ob-btn-row {
    flex-direction: column-reverse;   /* primary action lands nearest the thumb */
    align-items: stretch;
    gap: 10px;
  }
  body.v4 .ob-btn { min-height: 48px; width: 100%; }
  body.v4 .ob-sub-row { min-height: 44px; }
  /* Skip leaves the desktop absolute bottom-left anchor (it overlapped the
     stacked full-width buttons) and flows under them, centred. */
  body.v4 .ob-skip { position: static; display: block; text-align: center; margin-top: 14px; padding: 12px 8px; }
}

/* ── MOBILE: clips ── */
/* The 6-stage board becomes swipe lanes - one stage per ~85vw with
   x-snap (overrides the base 1fr 1fr ≤720px rule, which made two
   unreadable columns). Rejected strip stacks single column. Card
   actions get thumb height. The episode click-through opens the episode
   surface modal, which is already a shell sheet. */
@media (max-width: 767.98px) {
  body.v4 .clb-board {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 85vw;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    overflow-x: auto;
    gap: 10px;
    padding-bottom: 8px;
  }
  body.v4 .clb-col { scroll-snap-align: start; min-width: 0; }
  body.v4 .clb-rejrow { grid-template-columns: 1fr; }
  body.v4 .clb-btn { min-height: 40px; }
  body.v4 .clb-ep { min-height: 40px; }
  body.v4 .clb-link { min-height: 40px; display: inline-flex; align-items: center; }
}

/* ── MOBILE: budget ── */
/* =============================================================
   ANNUAL BUDGET - phone layout. The budget-vs-actual tables keep
   their 6-column comparative scan inside a contained horizontal
   scroll with a STICKY first column (line names always visible) -
   chosen over cards because variance reading is column-wise. The
   money hero + tiles go 2-up; the bank-feed mapping table scrolls
   the same way. The Set/Edit budget modal sheets via the shell;
   its inputs emit 16px inline on phones (budget.js isPhone()).
   ============================================================= */
@media (max-width: 767.98px) {

  body.v4 #bud-body .money-tiles { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  body.v4 #bud-body .money-tiles .money-tile:nth-child(3) { grid-column: 1 / -1; }
  body.v4 #bud-body .money-hero { padding: 18px 16px; }
  body.v4 #bud-body .money-hero-value { font-size: 34px; }

  /* Edit/Set budget button: thumb-sized. */
  body.v4 #bud-body .bud-toolbar .btn-sm { min-height: 44px; }

  /* ─── Tables: contained scroll + sticky first column ─── */
  body.v4 #bud-body .data-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  body.v4 #bud-body .data-table th,
  body.v4 #bud-body .data-table td {
    white-space: nowrap;
    padding: 10px 12px;
  }
  body.v4 #bud-body .data-table th:first-child,
  body.v4 #bud-body .data-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--surface);
    box-shadow: 2px 0 0 var(--rule);
    max-width: 46vw;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* The first-column pills wrap awkwardly when squeezed - keep them inline
     and let the cell ellipsise instead. */
  body.v4 #bud-body .data-table td:first-child .pill { vertical-align: middle; }
  /* + monthly-actual button: thumb-sized without inflating desktop rows. */
  body.v4 #bud-body .data-table [data-bud-add] { min-width: 44px; min-height: 44px; }

  /* Bank-feed select column needs real width inside the scroll. */
  body.v4 #bud-body .data-table [data-bank-map] { min-width: 200px; }
}

/* ── MOBILE: keith (composer surface fix) ── */
@media (max-width: 767.98px) {
  /* var(--surface) is the solid card token (paper-3 is translucent) - the
     pinned composer must be opaque so the prompt chips never ghost through. */
  body.v4 .kc-composer { background: var(--surface); }
}

/* ── MOBILE: chief ── */
/* AI Workspace on a phone = scan the director strip, open a feed, glance at
   the config tiles + activity. .chief-split replaces the !important-locked
   "grid grid-2-1" wrapper in chief.js - base rule reproduces the previous
   desktop computed style exactly (1.5fr 1fr, gap 14px), the media query
   stacks it. Tiles already collapse (640px rule); modals are sheet-ified by
   the shell (.aiceo-modal-overlay). */
body.v4 .chief-split { grid-template-columns: 1.5fr 1fr; gap: 14px; }

@media (max-width: 767.98px) {
  /* Activity above Open Questions, single column. */
  body.v4 .chief-split { grid-template-columns: 1fr; gap: 12px; }

  /* Director strip: one horizontal swipe lane of chips, 44px tall. */
  body.v4 .ws-strip {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding-bottom: 6px;
  }
  body.v4 .ws-strip-item { flex: 0 0 auto; min-height: 44px; display: inline-flex; align-items: center; }

  /* Config tiles stack from 640px in the existing rule - close the
     640–767.98px gap so phones in landscape don't get 2 cramped columns. */
  body.v4 .ceo-tiles { grid-template-columns: 1fr; }
  body.v4 .ceo-tile { min-height: 44px; -webkit-tap-highlight-color: transparent; }
  body.v4 .ceo-tile:active { filter: brightness(0.97); }
}

/* ── MOBILE: studio ── */
/* =============================================================
   STUDIO SCHEDULE <768px. The week grid is a single CSS grid
   (96px day column + 13 hour columns, set inline) whose DOM order
   is row-major - a CSS-only vertical day list isn't reachable from
   that shape, so the phone treatment is the other sanctioned
   option: a horizontally scrollable grid with the day column stuck
   to the left edge. Busy blocks keep their labels; the subbar
   (source tabs + week nav) wraps with 44px controls.
   ============================================================= */
@media (max-width: 767.98px) {
  body.v4 .ss-grid {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding: 8px;
    gap: 3px;
  }
  /* Sticky day rail: the corner cell + every day head pin to the left
     edge of the scroll container with a solid backing so hour cells
     slide beneath them. */
  body.v4 .ss-corner,
  body.v4 .ss-day-head {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--surface);
  }
  body.v4 .ss-day-head { box-shadow: 2px 0 6px rgba(0, 0, 0, 0.06); }
  /* Cells stay readable but compact */
  body.v4 .ss-cell { min-height: 44px; }
  body.v4 .ss-event { -webkit-tap-highlight-color: transparent; }
  /* ── MOBILE: studio part-hour chips ──
     Inset (Option A) is percentage-based so it scales with the column;
     tap height is held by .ss-cell min-height, tap width by the base
     .is-partial min-width:44px. The grid scrolls horizontally, so a
     narrow chip nudged to 44px never breaks the row layout. */
  body.v4 .ss-event.is-partial { padding-left: 7px; padding-right: 7px; }
  /* Subbar: legend + source tabs + nav wrap into rows; nav buttons 44px */
  body.v4 .ss-subbar { flex-wrap: wrap; gap: 10px; }
  body.v4 .ss-subbar-r { flex-wrap: wrap; gap: 8px; }
  body.v4 .studio-nav-btn { min-height: 44px; min-width: 44px; }
  body.v4 .ss-source-tabs .tab { min-height: 40px; }
}
@media (max-width: 767.98px) and (prefers-reduced-motion: no-preference) {
  body.v4 .ss-grid { scroll-behavior: smooth; }
}

/* ── MOBILE: calendar ── */
/* =============================================================
   CONTENT CALENDAR <768px. The month keeps its 7 columns but goes
   compact: chips collapse to colour-coded dots in a wrap row (the
   hover tooltip is unreachable on touch and is hidden), and tapping
   a day opens the day-detail bottom sheet (calendar.js, matchMedia-
   gated, reusing the shell's .m-more-overlay/.m-sheet treatment).
   Legend wraps; month-nav buttons get the 44px floor.
   ============================================================= */
@media (max-width: 767.98px) {
  body.v4 .ccal-bar { flex-wrap: wrap; gap: 10px; }
  body.v4 .ccal-legend { flex-wrap: wrap; row-gap: 4px; }
  body.v4 .ccal-navbtn { min-height: 44px; min-width: 44px; }
  body.v4 .grid-3, body.v4 .grid.grid-3 { display: flex; flex-direction: column; }
  /* Day cells: compact, tappable as a whole (calendar.js owns the tap) */
  body.v4 .ccal-cell {
    min-height: 56px;
    padding: 4px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  body.v4 .ccal-cell:active { background: var(--g-blue-soft); }
  body.v4 .ccal-cell .ccal-date { font-size: 11px; }
  /* Chips → dots. Label, icon and the hover tooltip disappear; the
     chip's existing background tint becomes the dot colour. Chips stop
     intercepting the cell tap. */
  body.v4 .ccal-chip {
    display: inline-block;
    vertical-align: top;
    width: 8px;
    height: 8px;
    min-width: 8px;
    padding: 0;
    margin: 2px 2px 0 0;
    border-radius: 50%;
    pointer-events: none;
  }
  body.v4 .ccal-chip .ccal-chip-ic,
  body.v4 .ccal-chip .ccal-chip-label,
  body.v4 .ccal-chip .ccal-tip { display: none; }
  /* Dots take the chip's TEXT colour so they read at 8px (the soft
     background tints vanish at dot size). */
  body.v4 .ccal-chip.show       { background: var(--g-cherry); }
  body.v4 .ccal-chip.clip       { background: var(--g-blue); }
  body.v4 .ccal-chip.social     { background: var(--g-lilac); }
  body.v4 .ccal-chip.newsletter { background: var(--g-butter); }
  body.v4 .ccal-chip.is-scheduled { background: transparent; border-width: 1.5px; }
  body.v4 .ccal-chip.is-scheduled.show       { border-color: var(--g-cherry); }
  body.v4 .ccal-chip.is-scheduled.clip       { border-color: var(--g-blue); }
  body.v4 .ccal-chip.is-scheduled.social     { border-color: var(--g-lilac); }
  body.v4 .ccal-chip.is-scheduled.newsletter { border-color: var(--g-butter); }
  /* "+N" overflow counter painted by calendar.js on mobile */
  body.v4 .ccal-dotmore {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    color: var(--g-ink-4);
    vertical-align: top;
    margin-top: 1px;
  }
  /* Day-detail sheet rows (inside the shell .m-sheet) */
  body.v4 .ccal-sheet-day {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink-1);
    padding: 12px 16px 4px;
  }
  body.v4 .ccal-sheet-list { padding: 4px 12px calc(16px + env(safe-area-inset-bottom, 0px)); }
  body.v4 .ccal-sheet-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 48px;
    padding: 10px;
    border-radius: var(--r);
  }
  body.v4 .ccal-sheet-row + .ccal-sheet-row { border-top: 1px solid var(--rule-soft); }
  body.v4 .ccal-sheet-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex: none;
    margin-top: 4px;
  }
  body.v4 .ccal-sheet-dot.show       { background: var(--g-cherry); }
  body.v4 .ccal-sheet-dot.clip       { background: var(--g-blue); }
  body.v4 .ccal-sheet-dot.social     { background: var(--g-lilac); }
  body.v4 .ccal-sheet-dot.newsletter { background: var(--g-butter); }
  body.v4 .ccal-sheet-main { flex: 1; min-width: 0; }
  body.v4 .ccal-sheet-title { font-size: 14px; font-weight: 600; color: var(--ink-1); }
  body.v4 .ccal-sheet-sub { font-size: 12px; color: var(--ink-3); margin-top: 1px; }
  body.v4 .ccal-sheet-empty { padding: 18px 16px calc(22px + env(safe-area-inset-bottom, 0px)); font-size: 13px; color: var(--ink-3); }
}

/* ── MOBILE: production ── */
/* =============================================================
   PRODUCTION <768px. In-production rows are flex and stack fine -
   they just get the 44px floor. The checklist-template table is a
   desktop authoring surface (fixed 220/180/80px columns): it stays
   a table but scrolls horizontally INSIDE its card so the page
   never scrolls sideways. Drag-reorder stays functional but yields
   to vertical scrolling (touch-action), and the hover-revealed
   drag grip is always visible on touch.
   ============================================================= */
@media (max-width: 767.98px) {
  /* Contain the template table's width inside its card */
  body.v4 .card:has(.prod-tpl-table) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  body.v4 .prod-tpl-table { min-width: 560px; }
  body.v4 .prod-tpl-row { min-height: 44px; }
  body.v4 .prod-tpl-row[draggable="true"] { touch-action: pan-y; }
  body.v4 .section-head { flex-wrap: wrap; gap: 8px; }
  body.v4 .section-head .btn-secondary { min-height: 40px; }
}
@media (hover: none) {
  body.v4 .prod-tpl-grip { opacity: 0.55; }
}

/* ── MOBILE: checklist-editors (template + deal) ── */
/* Both editors share the .cke-row 7-col grid (handle · № · type · body ·
   owners · bell · pencil). On touch the drag handle is hidden (HTML5
   drag-reorder is desktop work - the rows stay readable, reordering
   waits for a desktop session), the row re-templates to 5 usable
   columns, the label wraps instead of truncating, and the bell + pencil
   keep a 44px hit area. Stage tabs swipe in one lane. Add/edit modals
   use .aiceo-modal-overlay - already shell sheets; their multi-step
   bodies scroll internally because the sheet caps at 90dvh with the
   modal body owning overflow. */
@media (max-width: 767.98px) {
  body.v4 .cke-stage-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding-bottom: 4px;
  }
  body.v4 .cke-stage-tab { flex: 0 0 auto; min-height: 40px; }

  body.v4 .cke-row {
    grid-template-columns: auto auto 1fr auto auto;   /* № · type · body · bell · pencil */
    gap: 8px 10px;
    padding: 12px;
  }
  body.v4 .cke-row-handle { display: none; }          /* drag = desktop work */
  body.v4 .cke-row-title { white-space: normal; line-height: 1.35; }
  body.v4 .cke-row-meta { white-space: normal; }
  /* Owner pills drop to a second line spanning under the body. */
  body.v4 .cke-row-owners { grid-column: 3 / -1; justify-self: start; }
  body.v4 .cke-row-edit {
    min-width: 44px;
    min-height: 44px;
    display: inline-grid;
    place-items: center;
  }
  body.v4 .cke-add { min-height: 48px; }
  body.v4 .cke-advance-link { min-height: 40px; display: inline-flex; align-items: center; }

  /* Legacy .tpl-row fallback list (template editor pre-V4 path): same
     treatment - hide the handle, let the label wrap, size the menu. */
  body.v4 .tpl-row .tpl-handle { display: none; }
  body.v4 .tpl-row { flex-wrap: wrap; row-gap: 6px; }
  body.v4 .tpl-menu { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; }

  /* Add-modal 3-col body grid (inline style): span each field across
     all tracks → stacked, without fighting the inline template. */
  body.v4 .tpl-add-modal .aiceo-modal-body[style*="grid-template-columns"] > * {
    grid-column: 1 / -1;
  }
}
@media (hover: none) and (pointer: coarse) {
  /* If a coarse pointer hits these editors at >768px (tablet), still
     hide the grab handles - drag-reorder needs a mouse. */
  body.v4 .cke-row-handle, body.v4 .tpl-handle { display: none; }
  body.v4 .cke-row { min-height: 44px; }
}

/* MOBILE: checklist-editors - explicit grid placement follow-up.
   With the handle hidden and owners pushed to a second line, the two
   .cke-row-edit buttons must be pinned to row 1 (default sparse
   auto-placement would shove them below the owners span). Also pin the
   first four children so sub-task rows (which render an empty <span>
   instead of a № and/or bell) keep their columns. */
@media (max-width: 767.98px) {
  body.v4 .cke-row > :nth-child(2) { grid-row: 1; grid-column: 1; }   /* № (or spacer) */
  body.v4 .cke-row > .cke-row-type { grid-row: 1; grid-column: 2; }
  body.v4 .cke-row > .cke-row-body { grid-row: 1; grid-column: 3; }
  body.v4 .cke-row > .cke-row-owners { grid-row: 2; grid-column: 3 / -1; }
  body.v4 .cke-row > .cke-row-edit:nth-last-child(2),
  body.v4 .cke-row > span:nth-last-child(2) { grid-row: 1; grid-column: 4; }
  body.v4 .cke-row > .cke-row-edit:last-child { grid-row: 1; grid-column: 5; }
}

/* ── MOBILE: stats (Growth Intelligence) ── */
/* =============================================================
   ANALYTICS / GROWTH INTELLIGENCE - phone layout. KPI tiles are
   already 2-up ≤900px (existing rule); charts shrink inside their
   cards instead of overflowing (alternate month labels hidden, the
   annual fixed-width columns get a contained scroll); tooltips are
   tap-toggled on touch (stats.js TOUCH_TT); the by-platform rows
   re-template (label full row, bar + numbers beneath); episode /
   audience / competitor tables get contained horizontal scroll;
   the audience-upload modal becomes a bottom sheet.
   ============================================================= */
@media (max-width: 767.98px) {

  /* KPI tiles: tighten padding so 2-up values don't clip. */
  body.v4 #gi-body .gi-kpi { padding: 13px 13px 12px; }
  body.v4 #gi-body .gi-kpi-big { font-size: 22px; }

  /* Enter-data action + tab strip (burger-collapse handles overflow). */
  body.v4 #gi-body .gi-tabbar { flex-wrap: wrap; gap: 8px; }
  body.v4 #gi-body .gi-tabbar-action { min-height: 44px; }

  /* ─── Monthly stacked chart: 12 columns squeeze - hide alternate
     month labels so they stop colliding; the per-column totals drop
     too (the tap tooltip carries the numbers). ─── */
  body.v4 #gi-body .gi-stacked-wrap .gi-bar-col:nth-child(odd) > div:last-child { visibility: hidden; }
  body.v4 #gi-body .gi-stacked-wrap .gi-bar-col:not(.gi-year-col) > div:first-child { visibility: hidden; }

  /* ─── Annual chart: fixed 72px columns can outgrow a phone as years
     accumulate - the wrap becomes its own scroll container. ─── */
  body.v4 #gi-body .gi-stacked-wrap:has(.gi-year-col) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  /* Tooltip: cap to the viewport so the clamp maths never overflows. */
  body.v4 #gi-body .gi-chart-tooltip { min-width: 0; max-width: 78vw; }

  /* ─── By-platform rows: label takes the full row; bar + downloads +
     share sit beneath it. ─── */
  body.v4 #gi-body .gi-bar-row.gi-bar-row-4 {
    grid-template-columns: 1fr auto auto;
    grid-template-areas:
      "lbl   lbl  lbl"
      "track val  pct";
    row-gap: 4px;
  }
  body.v4 #gi-body .gi-bar-row-4 .gi-bar-lbl   { grid-area: lbl; }
  body.v4 #gi-body .gi-bar-row-4 .gi-bar-track { grid-area: track; }
  body.v4 #gi-body .gi-bar-row-4 .gi-bar-val   { grid-area: val; min-width: 52px; }
  body.v4 #gi-body .gi-bar-row-4 .gi-bar-pct   { grid-area: pct; min-width: 40px; }

  /* Top-shows rows: thumb-sized taps. */
  body.v4 #gi-body .gi-top-row { min-height: 44px; }

  /* ─── Tables (Episodes tab, audience breakdown, competitors, sponsor
     history): contained horizontal scroll, never page scroll. ─── */
  body.v4 #gi-body .data-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  body.v4 #gi-body .data-table th,
  body.v4 #gi-body .data-table td { white-space: nowrap; padding: 10px 12px; }

  /* Filter selects: touch-sized, 16px (stops iOS zoom-on-focus). */
  body.v4 #gi-body .gi-fl select,
  body.v4 #gi-body .gi-fl input { min-height: 44px; font-size: 16px; }

  /* ─── Audience-upload modal (.gi-modal-back) → bottom sheet ─── */
  body.v4 .gi-modal-back { align-items: flex-end; padding: 0; }
  body.v4 .gi-modal {
    width: 100%;
    max-width: 100%;
    max-height: 90dvh;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    border-bottom: none;
    padding-top: 14px;
    animation: mSheetUp 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  }
  body.v4 .gi-modal::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4.5px;
    border-radius: var(--r-pill);
    background: var(--ink-4);
    opacity: 0.55;
    pointer-events: none;
  }
  body.v4 .gi-modal-back .gi-modal { position: relative; }
  body.v4 .gi-modal-foot {
    flex-wrap: wrap;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }
  body.v4 .gi-modal-foot .btn-primary,
  body.v4 .gi-modal-foot .btn-ghost { flex: 1 1 auto; min-height: 44px; }
  body.v4 .gi-modal input { font-size: 16px; }

  /* Sponsor-compose modal (aiceo family - sheets via the shell): the
     preview iframe shortens so the sheet stays scrollable. */
  body.v4 .gi-sp-overlay iframe { height: 380px; }
}

/* ── MOBILE: dashboard (sheet centring) ── */
@media (max-width: 767.98px) {
  /* The dashboard confirm + panel-picker carry inline max-widths (460/880px)
     that CSS can't remove; ≤460px they're full-width anyway, but on wide
     phones/landscape the capped card would sit flex-start - centre it. */
  body.v4 .aiceo-modal-overlay .aiceo-modal { margin-inline: auto; }
}

/* ── MOBILE: stats (annual-chart label fix) ── */
/* Year columns scroll instead of squeezing - their labels and totals
   stay visible (the alternate-label hiding is for the 12-month chart). */
@media (max-width: 767.98px) {
  body.v4 #gi-body .gi-stacked-wrap .gi-bar-col.gi-year-col > div:last-child { visibility: visible; }
}

/* ── MOBILE: analytics+social+newsletter+editorial+community ── */
/* =============================================================
   Lower-traffic distribution pages - stack + touch + contained
   table scroll. The shared layout grids: .grid-4 (2-up), .grid-3
   and .grid-2-1 (1-col) are already handled globally in the intel
   mobile block. .grid-2 is stacked here by spanning its CHILDREN
   (grid-column: 1 / -1) - the base .grid-2 template rule carries
   !important, and spanning sidesteps it without adding any. Scoped
   to these pages' body hosts so other pages' 2-col grids (handled
   in their own waves) are untouched.
   ============================================================= */
@media (max-width: 767.98px) {

  /* .grid-2 → single column on these pages (children span the row). */
  body.v4 #an-body .grid-2 > *,
  body.v4 #soc-body .grid-2 > *,
  body.v4 #ed-body .grid-2 > * { grid-column: 1 / -1; }

  /* Cadence heroes (Social / Newsletter / Community): stack the CTA
     under the headline instead of squeezing beside it. */
  body.v4 #soc-body .cadence-hero,
  body.v4 #nl-body .cadence-hero,
  body.v4 #com-body .cadence-hero {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 16px;
  }
  body.v4 #soc-body .cadence-hero-cta,
  body.v4 #nl-body .cadence-hero-cta,
  body.v4 #com-body .cadence-hero-cta { min-height: 44px; }

  /* Tables (followers, episode performance, snapshots, recent sends):
     contained horizontal scroll inside their cards - the PAGE never
     scrolls sideways. display:block makes each table its own scroller. */
  body.v4 #an-body .data-table,
  body.v4 #soc-body .data-table,
  body.v4 #nl-body .data-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  body.v4 #an-body .data-table th,  body.v4 #an-body .data-table td,
  body.v4 #soc-body .data-table th, body.v4 #soc-body .data-table td,
  body.v4 #nl-body .data-table th,  body.v4 #nl-body .data-table td {
    white-space: nowrap;
    padding: 10px 12px;
  }

  /* Connect-state cards (Newsletter / Community): comfortable phone pad. */
  body.v4 #nl-body .connect-state,
  body.v4 #com-body .connect-state { padding: 28px 18px; }
  body.v4 #nl-body .connect-state .btn-primary,
  body.v4 #com-body .connect-state .btn-primary { min-height: 44px; }

  /* Card-header external links (YouTube Studio →, etc): tappable. */
  body.v4 #an-body .card-action { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ── MOBILE: calendar (dot row fix) ── */
/* The day cell is a flex COLUMN on desktop, so 8px dot-chips would
   stack one per row. On the phone the cell flows as a wrap row: the
   date takes the full first line, dots wrap beneath it. */
@media (max-width: 767.98px) {
  body.v4 .ccal-cell {
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 2px;
  }
  body.v4 .ccal-cell .ccal-date { width: 100%; }
}

/* ── Notif rework ── */
/* Per-row subscription bells removed from BOTH checklist editors. The
   .cke-row markup drops from 7 children (handle · № · type · body ·
   owners · bell · pencil) to 6 - re-template the base grid here as an
   appended override (the original 7-col rule at "body.v4 .cke-row" is
   never edited, per house rules). Desktop change is purely the removed
   bell track; every other track and value matches the original rule. */
body.v4 .cke-row {
  grid-template-columns: auto auto auto 1fr auto auto;   /* handle · № · type · body · owners · pencil */
}

/* "Email notifications" section on the task editor's final screen
   (AI actions & email) - per-person open/complete subscriptions.
   Same chrome-less bordered-box grammar as the AI + email sections. */
body.v4 .tsub-inline { border: 1px solid var(--g-200); border-radius: 10px; padding: 14px; }
body.v4 .tsub-inline-head { font-size: 13.5px; color: var(--g-blue); font-weight: 700; margin-bottom: 4px; }
body.v4 .tsub-inline-sub { font-size: 11.5px; color: var(--g-ink-4); margin-bottom: 10px; line-height: 1.5; }
body.v4 .tsub-inline-list { display: flex; flex-direction: column; }
body.v4 .tsub-line {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 6px 16px;
  align-items: center;
  padding: 7px 0;
  border-top: 1px dashed var(--g-200);
}
body.v4 .tsub-line:first-child { border-top: none; }
body.v4 .tsub-line-name { font-size: 13px; font-weight: 600; color: var(--g-ink-1); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.v4 .tsub-line-opt { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--g-ink-2); cursor: pointer; white-space: nowrap; }
body.v4 .tsub-line-opt input:disabled + span { opacity: 0.5; }
body.v4 .tsub-inline-note { margin-top: 10px; font-size: 11.5px; color: var(--cherry); }

/* Notifications tab - owner + dependency meta line under each task row.
   Owner chips are deliberately PROMINENT (bold ink chip with an
   avatar-initial disc), not grey meta; the dependency line stays quiet. */
.np-row-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 0 16px 11px; margin-top: -3px; }
.np-owners { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.np-owner { display: inline-flex; align-items: center; gap: 6px; }
.np-owner-av {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink); color: var(--card);
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.02em;
  flex-shrink: 0;
}
.np-owner-name { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.np-owner-ai .np-owner-av { background: var(--lilac-bg); color: var(--lilac); }
.np-owner-ai .np-owner-name { color: var(--ink-soft); font-weight: 600; }
.np-dep { font-size: 12px; color: var(--ink-soft); }
.np-dep strong { color: var(--ink); font-weight: 600; }

/* ── MOBILE: Notif rework ── */
@media (max-width: 767.98px) {
  /* Checklist editor rows with the bell removed: the earlier mobile
     block (MOBILE: checklist-editors) re-templated to 5 usable columns
     and pinned the bell via :nth-last-child(2) / pencil via :last-child
     col 5. With 6 children those selectors land on the wrong nodes
     (owners is now the span at :nth-last-child(2)), so re-pin here:
     4 usable columns - № · type · body · pencil - owners on row 2. */
  body.v4 .cke-row { grid-template-columns: auto auto 1fr auto; }
  body.v4 .cke-row > .cke-row-owners:nth-last-child(2) { grid-row: 2; grid-column: 3 / -1; justify-self: start; }
  body.v4 .cke-row > .cke-row-edit:last-child { grid-row: 1; grid-column: 4; }

  /* Email-notifications section in the (sheeted) task modal: each
     person stacks - name on its own line, the two checkboxes wrap
     beneath with 44px touch rows and 16px-safe text. */
  body.v4 .tsub-line { grid-template-columns: 1fr; gap: 2px; padding: 9px 0; }
  body.v4 .tsub-line-opt { min-height: 44px; }
  body.v4 .tsub-line-name { white-space: normal; }

  /* Notifications tab: rows stack - label full-width, pills wrap on
     their own line, owner/dependency meta wraps, all targets ≥44px. */
  .np-row-main { flex-wrap: wrap; row-gap: 6px; padding: 12px 14px 4px; }
  .np-row-label { flex: 1 1 100%; white-space: normal; line-height: 1.35; }
  .np-row-pills { flex-wrap: wrap; }
  .np-row-act { min-height: 44px; display: inline-flex; align-items: center; margin-left: auto; }
  .np-row-meta { padding: 0 14px 11px; row-gap: 6px; }
  .np-row-opts { gap: 4px 18px; padding: 0 14px 12px; }
  .np-opt { min-height: 44px; }
}

/* ── FX: command ── */
/* FX-CMD-1 - briefing rows that reference a real command_item open the
   item detail popup; give them the same clickable affordance as list rows. */
body.v4 .cc-brief-row.cc-brief-click{cursor:pointer}
body.v4 .cc-brief-row.cc-brief-click:hover{background:var(--canvas)}
body.v4 .cc-brief-row.cc-brief-click:focus-visible{outline:2px solid var(--cherry);outline-offset:-2px}

/* ── MOBILE: command (FX-CMD briefing rows) ── */
@media (max-width: 767.98px) {
  /* Hover is meaningless on touch - give clickable briefing rows a visible
     pressed state and a 44px target; restack like the main list rows. */
  body.v4 .cc-brief-row{flex-wrap:wrap;row-gap:6px;padding:12px 14px;min-height:44px}
  body.v4 .cc-brief-row .cc-row-title{flex:1 1 100%;white-space:normal;line-height:1.35}
  body.v4 .cc-brief-row.cc-brief-click{-webkit-tap-highlight-color:transparent}
  body.v4 .cc-brief-row.cc-brief-click:active{background:var(--canvas)}
  body.v4 .cc-brief-row .cc-done-btn{min-height:40px;padding:6px 14px}
}

/* ── FX: keith ── */
/* FX-KE-2 - Useful Prompts: a DARK apple-glass panel (the same
   hero-1 → ink-deep gradient the dark dashboard panels and the
   page hero wear), with chips designed FOR a dark ground: light
   text, subtle light-alpha fills + borders, hover brightens.
   Compact: tighter padding than the old lilac card. Source-order
   override of the lilac .kc-suggest-wrap rule above - same
   specificity, later wins; no !important. */
.kc-suggest-wrap {
  margin: 12px 18px 18px;
  padding: 11px 14px 12px;
  background: linear-gradient(180deg, var(--hero-1) 0%, var(--ink-deep) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 14px 38px rgba(0, 0, 0, 0.16);
  backdrop-filter: var(--blur);
}
.kc-suggest-wrap .kc-suggest-h {
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 8px;
}
.kc-suggest-wrap .kc-chip {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.86);
  box-shadow: none;
  transition: background .12s, border-color .12s, color .12s, transform .12s;
}
.kc-suggest-wrap .kc-chip:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.30);
  color: var(--on-accent);
  transform: translateY(-1px);
}
.kc-suggest-wrap .kc-chip:active {
  background: rgba(255, 255, 255, 0.22);
  transform: none;
}

/* ── MOBILE: keith (FX-KE-2) ── */
@media (max-width: 768px) {
  /* The horizontal swipe lane is retained (flex/nowrap/overflow rules from
     the existing Keith mobile block still apply); here the dark panel just
     tightens its frame and keeps 44px-friendly chips with a visible
     pressed state on touch (hover is meaningless on phones). */
  body.v4 .kc-suggest-wrap {
    margin: 10px 12px 14px;
    padding: 10px 12px 11px;
  }
  body.v4 .kc-suggest-wrap .kc-chip {
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
  }
  body.v4 .kc-suggest-wrap .kc-chip:active {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.30);
    color: var(--on-accent);
  }
}

/* ── FX: gi+intel ── */
/* =============================================================
   FX-GI-2 - Analytics "Downloads by Year" chart: the current year's
   bar carries two labels - the PREDICTED full-year total above the
   dashed run-rate extension, and the ACTUAL YTD total directly above
   the solid stacked segments. Prior / complete years keep a single
   total label (.gi-ybar-lbl without a modifier). Tabular numerals so
   the figures align; tokens only.
   ============================================================= */
body.v4 .gi-ybar-lbl {
  font-size: 9.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  margin-bottom: 4px;
  white-space: nowrap;
  text-align: center;
}
body.v4 .gi-ybar-pred {
  color: var(--cherry);
  opacity: 0.75;
}
body.v4 .gi-ybar-actual {
  color: var(--cherry);
  margin: 2px 0;
}

/* =============================================================
   FX-IN-1 - Intel pipeline board reverted to the Episodes/Sponsors
   kanban grammar (.kanban/.kb-col/.kb-head/.kb-card). .kanban-intel
   scopes the deltas intel needs on top of the shared kanban CSS:
   · 4 lanes (Suggested/Researching/Approached/Booked), not 6
   · cards open the dossier (pointer), they are NOT draggable (grab)
   · decline ✕ hover-reveal re-keyed to the new .kb-card shell
     (the old body.v4 .ik-card:hover rule no longer matches)
   Mobile: the shared pipeline swipe-lane block already targets
   body.v4 .kanban / .kb-col / .kb-drop, so the intel board inherits
   the 85vw snap lanes + 44px cards for free; only the decline ✕
   touch-visibility rule needed re-keying below.
   ============================================================= */
body.v4 .kanban.kanban-intel {
  grid-template-columns: repeat(4, 1fr);
}
body.v4 .kanban-intel .kb-card { cursor: pointer; }
body.v4 .kanban-intel .kb-card:hover .kb-card-decline { opacity: 1; }
/* Handoff (Booked) card - the Wave-55 kb-card reskin pins background and
   border with !important, so the old ik-handoff mint fill can't apply.
   Distinguish the handoff with a mint inset ring instead (box-shadow is
   not !important in the reskin, so this later rule wins) and keep the
   angle copy in the handoff green. */
body.v4 .kanban-intel .kb-card.ik-handoff {
  box-shadow: inset 0 0 0 1.5px var(--on-mint), 0 1px 2px rgba(0, 0, 0, 0.03);
}
body.v4 .kanban-intel .kb-card.ik-handoff .ik-card-angle { color: var(--on-mint); }

/* ── MOBILE: intel (FX-IN-1 kanban reskin) ── */
@media (hover: none) and (pointer: coarse) {
  /* Decline ✕ is hover-revealed on desktop - persistently visible and
     thumb-sized on touch (replaces the dead .ik-card-scoped rule). */
  body.v4 .kanban-intel .kb-card .kb-card-decline {
    opacity: 1;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
  }
}
@media (max-width: 767.98px) {
  /* The shared .kanban mobile rules make lanes 85vw with a 380px
     min-height column well; intel lanes are often short (a handful of
     cards) - let the lane shrink to content like the old ik-board did. */
  body.v4 .kanban-intel .kb-col { min-height: 200px; }
}
/* Tablet collapse parity with the Episodes board: the generic
   body.v4 .kanban → repeat(3,1fr) rule at ≤1100px loses to the more
   specific .kanban.kanban-intel desktop rule above, so mirror it here.
   (≤767.98px the shared swipe-lane flex rules take over - display:flex
   makes grid-template-columns moot.) */
@media (max-width: 1100px) {
  body.v4 .kanban.kanban-intel { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  body.v4 .kanban.kanban-intel { grid-template-columns: 1fr; }
}

/* ── AI Team departments (approved) ── */
/* Implements _PROTO_ai_team_departments.html verbatim, scoped under
   .aiteam (the agents list view paints inside <div class="aiteam">).
   Prototype class names are kept (.dept, .dir, .agent, .aiweek …) per
   the fidelity protocol; the .aiteam ancestor + body.v4 prefix scopes
   them away from unrelated rules (.dept-grid at 27276, .dept-meeting).
   Colour mapping: the prototype's :root palette is byte-identical to
   the app pastel tokens (--mint/-bg/-fg … --rose/-bg/-fg, --cherry,
   --ink, --ink-mid, --line, --r-lg:18px, --r-pill) so those map 1:1.
   Prototype-only values with no matching app token are carried as
   scoped custom properties below (rgba equivalents - no new hex):
   --ai-ink-light (#8a8377 → rgb(138,131,119)), --ai-hairline,
   --ai-line-soft, --ai-sh, --ai-sh-lift. #fff/#000 inside values
   become rgba(255,255,255,1) / the white|black keywords (identical
   computed colours). Font: the app's Inter stack (house font) replaces
   the prototype's SF stack - flagged deviation. */
body.v4 .aiteam{
  --ai-hairline:rgba(0,0,0,.075);
  --ai-line-soft:rgba(0,0,0,.06);
  --ai-ink-light:rgb(138,131,119);
  --ai-sh:0 1px 2px rgba(26,20,16,.04),0 4px 14px rgba(26,20,16,.05);
  --ai-sh-lift:0 2px 5px rgba(26,20,16,.07),0 14px 34px rgba(26,20,16,.11);
}
body.v4 .aiteam .u{text-transform:uppercase;letter-spacing:.09em}

/* ── Masthead stats ── */
body.v4 .aiteam .mast-stats{display:flex;gap:26px;margin-bottom:18px}
body.v4 .aiteam .mstat{display:flex;flex-direction:column}
body.v4 .aiteam .mstat b{font-size:22px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
body.v4 .aiteam .mstat span{font-size:11px;font-weight:750;color:var(--ai-ink-light)}

/* ── Weekly AI calendar strip ── */
body.v4 .aiteam .aiweek{background:rgba(255,255,255,.72);backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%);border:1px solid var(--ai-line-soft);border-radius:var(--r-lg);box-shadow:var(--ai-sh);padding:18px 20px 16px;margin-bottom:30px}
body.v4 .aiteam .aiweek-head{display:flex;align-items:baseline;gap:12px;margin-bottom:14px}
body.v4 .aiteam .aiweek-t{font-size:14px;font-weight:800;letter-spacing:-.012em;display:flex;align-items:center;gap:8px;color:var(--ink)}
body.v4 .aiteam .aiweek-t .dot{width:8px;height:8px;border-radius:50%;background:var(--cherry)}
body.v4 .aiteam .aiweek-sub{font-size:12px;color:var(--ai-ink-light);font-weight:650;margin-left:auto}
body.v4 .aiteam .aiweek-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
@media(max-width:920px){body.v4 .aiteam .aiweek-grid{grid-template-columns:repeat(2,1fr)}}
body.v4 .aiteam .aiday{border:1px solid var(--ai-hairline);border-radius:13px;background:rgba(255,255,255,.6);padding:10px 12px 11px;min-height:118px;display:flex;flex-direction:column;gap:7px}
body.v4 .aiteam .aiday.is-today{border-color:rgba(184,0,43,.3);background:linear-gradient(180deg,rgba(184,0,43,.035),rgba(255,255,255,.6) 40%);box-shadow:inset 0 2px 0 var(--cherry)}
body.v4 .aiteam .aiday-l{display:flex;align-items:baseline;gap:6px;font-size:10.5px;font-weight:850;color:var(--ai-ink-light)}
body.v4 .aiteam .aiday.is-today .aiday-l{color:var(--cherry)}
body.v4 .aiteam .aiday-l b{font-size:12px;color:inherit}
body.v4 .aiteam .aiday-today-tag{margin-left:auto;font-size:8.5px;font-weight:900;letter-spacing:.1em;color:rgba(255,255,255,1);background:var(--cherry);padding:2px 7px;border-radius:var(--r-pill)}
body.v4 .aiteam .aimeet{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:720;padding:5px 9px;border-radius:8px;background:var(--m-bg);color:var(--m-fg);line-height:1.2}
body.v4 .aiteam .aimeet time{margin-left:auto;font-size:10px;font-weight:800;opacity:.75;font-variant-numeric:tabular-nums}
body.v4 .aiteam .aimeet .sw{flex:0 0 6px;width:6px;height:6px;border-radius:50%;background:currentColor}
body.v4 .aiteam .aimeet.is-board{background:var(--cherry);color:rgba(255,255,255,1);box-shadow:0 1px 2px rgba(184,0,43,.35),0 4px 10px rgba(184,0,43,.25);font-weight:780}
body.v4 .aiteam .aimeet.is-board time{opacity:.85}

/* ── Section heading ── */
body.v4 .aiteam .sec-head{display:flex;align-items:baseline;gap:12px;margin:0 2px 16px}
body.v4 .aiteam .sec-head h2{font-size:19px;font-weight:800;letter-spacing:-.018em;color:var(--ink)}
body.v4 .aiteam .sec-head span{font-size:12.5px;color:var(--ai-ink-light);font-weight:650}

/* ── Department grid ── */
body.v4 .aiteam .dept-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:20px;align-items:start;margin-top:0}

/* ── Department card ── */
body.v4 .aiteam .dept{position:relative;background:rgba(255,255,255,.78);backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);border:1px solid var(--ai-line-soft);border-radius:var(--r-lg);box-shadow:var(--ai-sh);overflow:hidden;display:flex;flex-direction:column;transition:transform .16s ease,box-shadow .16s ease}
body.v4 .aiteam .dept:hover{transform:translateY(-2px);box-shadow:var(--ai-sh-lift)}
body.v4 .aiteam .dept-stripe{height:4px;background:linear-gradient(90deg,var(--d-fg),var(--d-soft) 70%,transparent)}
body.v4 .aiteam .dept-head{padding:16px 18px 13px;display:flex;align-items:flex-start;gap:12px}
body.v4 .aiteam .dept-name{font-size:16.5px;font-weight:800;letter-spacing:-.018em;line-height:1.2;color:var(--ink)}
body.v4 .aiteam .dept-remit{font-size:12px;color:var(--ink-mid);line-height:1.45;margin-top:4px;font-weight:550}
body.v4 .aiteam .dept-count{margin-left:auto;flex:0 0 auto;font-size:10.5px;font-weight:800;color:var(--d-fg);background:var(--d-bg);border:1px solid color-mix(in srgb,var(--d-fg) 14%,transparent);padding:4px 10px;border-radius:var(--r-pill);white-space:nowrap}

/* director row */
body.v4 .aiteam .dir{display:flex;align-items:center;gap:13px;margin:2px 12px 0;padding:12px 12px;border-radius:14px;background:linear-gradient(135deg,var(--d-bg),color-mix(in srgb,var(--d-bg) 40%,white));border:1px solid color-mix(in srgb,var(--d-fg) 12%,transparent);cursor:pointer;text-align:left;width:calc(100% - 24px);font-family:inherit;transition:border-color .14s}
body.v4 .aiteam .dir:hover{border-color:color-mix(in srgb,var(--d-fg) 32%,transparent)}
body.v4 .aiteam .dir-av{flex:0 0 46px;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:15px;font-weight:800;color:rgba(255,255,255,1);background:linear-gradient(140deg,var(--d-fg),color-mix(in srgb,var(--d-fg) 60%,black 8%));box-shadow:0 2px 6px color-mix(in srgb,var(--d-fg) 35%,transparent),inset 0 1px 0 rgba(255,255,255,.25);letter-spacing:.02em}
body.v4 .aiteam .dir-main{min-width:0;flex:1}
body.v4 .aiteam .dir-name{display:block;font-size:14.5px;font-weight:780;letter-spacing:-.012em;color:var(--ink);line-height:1.2}
body.v4 .aiteam .dir-sub{display:flex;align-items:center;gap:7px;margin-top:4px}
body.v4 .aiteam .dir-tag{font-size:9px;font-weight:900;letter-spacing:.1em;color:var(--d-fg);background:rgba(255,255,255,1);border:1px solid color-mix(in srgb,var(--d-fg) 22%,transparent);padding:2.5px 8px;border-radius:var(--r-pill)}
body.v4 .aiteam .dir-meta{font-size:11px;font-weight:700;color:var(--ink-mid)}
body.v4 .aiteam .dir-chev{flex:0 0 auto;color:var(--d-fg);opacity:.55}
body.v4 .aiteam .dept-nodir{margin:2px 16px 0}

/* agent rows */
body.v4 .aiteam .agents{display:flex;flex-direction:column;padding:8px 12px 4px}
body.v4 .aiteam .agent{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:11px;background:transparent;border:0;cursor:pointer;text-align:left;width:100%;font-family:inherit;transition:background .12s}
body.v4 .aiteam .agent:hover{background:rgba(0,0,0,.035)}
body.v4 .aiteam .agent + .agent{border-top:1px solid var(--ai-hairline)}
body.v4 .aiteam .agent-av{flex:0 0 30px;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:10.5px;font-weight:800;color:var(--d-fg);background:var(--d-bg);border:1px solid color-mix(in srgb,var(--d-fg) 14%,transparent)}
body.v4 .aiteam .agent-main{min-width:0;flex:1}
body.v4 .aiteam .agent-name{display:block;font-size:13px;font-weight:720;color:var(--ink);line-height:1.2}
body.v4 .aiteam .agent-role{display:block;font-size:11px;color:var(--ai-ink-light);font-weight:600;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.v4 .aiteam .agent-meta{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:1px}
body.v4 .aiteam .agent-n{font-size:12px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
body.v4 .aiteam .agent-d{font-size:10px;font-weight:700;color:var(--ai-ink-light)}

/* footer */
body.v4 .aiteam .dept-foot{margin-top:auto;display:flex;align-items:center;gap:4px;padding:11px 18px 13px;border-top:1px solid var(--ai-hairline);background:linear-gradient(180deg,transparent,rgba(0,0,0,.014))}
body.v4 .aiteam .dept-link{font-size:11.5px;font-weight:780;color:var(--d-fg);background:none;border:0;cursor:pointer;padding:4px 2px;font-family:inherit}
body.v4 .aiteam .dept-link:hover{text-decoration:underline}
body.v4 .aiteam .dept-link[disabled]{opacity:.45;cursor:default;text-decoration:none}
body.v4 .aiteam .dept-sep{color:var(--ai-ink-light);opacity:.5;font-size:11px}
body.v4 .aiteam .dept-meet{margin-left:auto;font-size:10.5px;font-weight:750;color:var(--ai-ink-light);display:inline-flex;align-items:center;gap:5px}
body.v4 .aiteam .dept-meet svg{width:11px;height:11px;opacity:.7}

/* collapsed latest-meeting block (QA-AIT-2a content relocated under the
   footer's "View findings" toggle - not in the prototype, kept compact) */
body.v4 .aiteam .dept-meeting-wrap{border-top:1px solid var(--ai-hairline)}
body.v4 .aiteam .dept-meeting-wrap .dept-meeting{border-top:0}

/* skeleton departments (LOADING state) */
body.v4 .aiteam .dept.is-skel .dept-head,body.v4 .aiteam .dept.is-skel .dir,body.v4 .aiteam .dept.is-skel .agents,body.v4 .aiteam .dept.is-skel .dept-foot{pointer-events:none}
body.v4 .aiteam .sk{display:inline-block;border-radius:6px;background:linear-gradient(90deg,rgba(0,0,0,.055) 25%,rgba(0,0,0,.085) 45%,rgba(0,0,0,.055) 65%);background-size:240% 100%;animation:aiteam-shimmer 1.8s infinite linear}
@keyframes aiteam-shimmer{0%{background-position:130% 0}100%{background-position:-110% 0}}
body.v4 .aiteam .dept.is-skel .dir{background:color-mix(in srgb,var(--d-bg) 55%,white);border-color:var(--ai-hairline)}
body.v4 .aiteam .dept.is-skel .dir-av{background:color-mix(in srgb,var(--d-fg) 70%,white 14%);opacity:.85}

/* dark theme - glass surfaces flip to the dark card treatment used by
   the rest of the page (aiorg/aical dark rules above set the pattern) */
body.v4.dark .aiteam .aiweek,body.v4.dark .aiteam .dept{background:rgba(28,28,30,.65);border-color:rgba(255,255,255,.08)}
body.v4.dark .aiteam .aiday{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
body.v4.dark .aiteam .aiday.is-today{background:linear-gradient(180deg,rgba(184,0,43,.12),rgba(255,255,255,.04) 40%)}
body.v4.dark .aiteam .agent:hover{background:rgba(255,255,255,.06)}
body.v4.dark .aiteam .agent + .agent,body.v4.dark .aiteam .dept-foot,body.v4.dark .aiteam .dept-meeting-wrap{border-color:rgba(255,255,255,.08)}
body.v4.dark .aiteam .dir-tag{background:rgba(28,28,30,.85)}
body.v4.dark .aiteam .dept-name,body.v4.dark .aiteam .dir-name,body.v4.dark .aiteam .agent-name,body.v4.dark .aiteam .agent-n,body.v4.dark .aiteam .mstat b,body.v4.dark .aiteam .sec-head h2,body.v4.dark .aiteam .aiweek-t{color:var(--ink)}

/* ── MOBILE: agents (AI Team departments) ── */
/* One column of department cards; the week strip becomes a horizontal
   swipe lane (one day ≈ 78vw, snap per day) instead of the 2-col wrap;
   director/agent rows and footer links get 44px touch targets. The
   role line keeps its single-line ellipsis (no page overflow - the
   only intentionally-wide element is the strip, contained in its own
   scroller). */
@media (max-width: 767.98px) {
  body.v4 .aiteam .mast-stats { gap: 18px; flex-wrap: wrap; }
  body.v4 .aiteam .aiweek { padding: 14px 14px 12px; }
  body.v4 .aiteam .aiweek-head { flex-wrap: wrap; gap: 4px 12px; }
  body.v4 .aiteam .aiweek-sub { margin-left: 0; flex-basis: 100%; }
  body.v4 .aiteam .aiweek-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    gap: 10px;
    padding-bottom: 4px;
  }
  body.v4 .aiteam .aiday {
    flex: 0 0 78vw;
    max-width: 320px;
    scroll-snap-align: start;
  }
  body.v4 .aiteam .aimeet { min-height: 32px; }
  body.v4 .aiteam .dept-grid { grid-template-columns: 1fr; gap: 14px; }
  body.v4 .aiteam .dir { min-height: 44px; -webkit-tap-highlight-color: transparent; }
  body.v4 .aiteam .agent { min-height: 44px; -webkit-tap-highlight-color: transparent; }
  body.v4 .aiteam .agent:active, body.v4 .aiteam .dir:active { background: rgba(0,0,0,.05); }
  body.v4 .aiteam .dept-link { min-height: 44px; display: inline-flex; align-items: center; -webkit-tap-highlight-color: transparent; }
  body.v4 .aiteam .dept-foot { padding: 4px 14px 6px; }
  body.v4 .aiteam .dept-meet { font-size: 10px; }
}

/* ── Keith Action Rail (approved B) ──────────────────────────────
   Source of truth: _PROTO_keith_actions.html · Option B "Action Rail"
   (Peter picked B, 2026-06-05). Values are lifted VERBATIM from the
   prototype's .b-* rules; classes prefix-scoped kar-*. Colour notes:
   · var(--cherry) - token resolves #b8002b = prototype --cherry ✓
   · prototype hexes with NO matching app token are written as their
     exact rgba equivalents (css-guard counts #hex only):
     #e0335a→rgba(224,51,90) #8f0021→rgba(143,0,33) cherry-deep
     #5e3b8c→rgba(94,59,140) #9b6fcc→rgba(155,111,204) lilac rail
     #2d6a8f→rgba(45,106,143) #5ba3cc→rgba(91,163,204) sky rail
     #3a5728→rgba(58,87,40)   #6e8f57→rgba(110,143,87) sage rail
     #d4577a→rgba(212,87,122) bar gradient top
   · prototype --ink/--ink-mid/--ink-light/--surface/--r-lg/--r-pill
     resolve through the app's live token layer (the prototype header
     says its tokens "mirror the live app palette") - flagged in
     _FIDELITY_PROOF_KEITH_B.html as token-resolution deltas.
   · --kar-hairline / --kar-sh are the prototype's literal hairline +
     shadow, scoped to the component (no app token matches them). */
.kar-rail{background:var(--surface);border:1px solid rgba(0,0,0,.065);border-left:none;border-radius:var(--r-lg);box-shadow:0 1px 2px rgba(26,20,16,.04),0 4px 14px rgba(26,20,16,.05);overflow:hidden;position:relative;padding-left:4px;margin-top:10px;--kar-hairline:rgba(0,0,0,.08)}
.kar-rail::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--kar-edge,var(--cherry))}
.kar-lilac{--kar-edge:linear-gradient(180deg,rgba(94,59,140,1),rgba(155,111,204,1))}
.kar-cherry{--kar-edge:linear-gradient(180deg,var(--cherry),rgba(224,51,90,1))}
.kar-sky{--kar-edge:linear-gradient(180deg,rgba(45,106,143,1),rgba(91,163,204,1))}
.kar-sage{--kar-edge:linear-gradient(180deg,rgba(58,87,40,1),rgba(110,143,87,1))}
.kar-u{text-transform:uppercase;letter-spacing:.085em}
.kar-head{display:flex;align-items:center;gap:9px;padding:11px 15px 10px;border-bottom:1px solid var(--kar-hairline)}
.kar-head-ic{flex:0 0 26px;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--canvas);color:var(--ink-mid);border:1px solid rgba(0,0,0,.065)}
.kar-head-ic svg{width:14px;height:14px}
.kar-eye{font-size:10px;font-weight:800;color:var(--ink-light)}
.kar-title{font-size:13.5px;font-weight:780;color:var(--ink-1);letter-spacing:-.012em;margin-top:1px;line-height:1.25}
.kar-unit{margin-left:7px;font-size:10px;font-weight:800;color:var(--ink-light);text-transform:uppercase;letter-spacing:.085em}
.kar-rows{display:flex;flex-direction:column}
.kar-row{display:flex;align-items:center;gap:10px;padding:9px 15px;border-bottom:1px solid var(--kar-hairline);font-size:12.5px}
.kar-row:last-child{border-bottom:none}
.kar-k{font-size:10px;font-weight:800;color:var(--ink-light);flex:0 0 84px}
.kar-v{font-weight:650;color:var(--ink-1);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kar-foot{display:flex;align-items:center;gap:10px;padding:11px 15px 13px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.018))}
.kar-btn{font-family:inherit;cursor:pointer;border:0;transition:transform .12s ease,box-shadow .12s ease,background .12s ease}
.kar-btn:active{transform:scale(.97)}
.kar-go{background:var(--cherry);color:var(--on-accent);font-size:12.5px;font-weight:780;padding:9px 20px;border-radius:10px;box-shadow:0 1px 2px rgba(184,0,43,.35),0 4px 12px rgba(184,0,43,.25);letter-spacing:.01em;text-decoration:none;display:inline-flex;align-items:center}
.kar-go:hover{background:rgba(143,0,33,1)}
.kar-skip{background:transparent;color:var(--ink-mid);font-size:12.5px;font-weight:700;padding:9px 12px;border-radius:10px}
.kar-skip:hover{background:rgba(0,0,0,.045);color:var(--ink-1)}
.kar-meta{margin-left:auto;font-size:11px;font-weight:700;color:var(--ink-light)}
/* rail task rows (queue + list-object rails) */
.kar-trow{display:flex;align-items:center;gap:11px;padding:10px 15px;border-bottom:1px solid var(--kar-hairline);width:100%;text-align:left;background:transparent;text-decoration:none;color:inherit;border-left:0;border-right:0;border-top:0;font-family:inherit;cursor:pointer;transition:background .12s ease}
.kar-trow:last-child{border-bottom:none}
.kar-trow:hover{background:rgba(0,0,0,.025)}
.kar-tnum{flex:0 0 20px;font-size:11px;font-weight:850;color:var(--ink-light);font-variant-numeric:tabular-nums}
.kar-tmain{flex:1;min-width:0;display:flex;flex-direction:column}
.kar-tt{font-size:13px;font-weight:720;color:var(--ink-1);line-height:1.3}
.kar-tm{font-size:11px;color:var(--ink-light);font-weight:650;margin-top:1px}
.kar-tact{font-size:11px;font-weight:850;color:var(--cherry);letter-spacing:.05em;white-space:nowrap;background:transparent;padding:0}
/* production keeps the K06 escape hatch as a second quiet row action */
.kar-topen{font-size:11px;font-weight:850;color:var(--ink-mid);letter-spacing:.05em;white-space:nowrap;background:transparent;padding:0}
.kar-topen:hover{color:var(--ink-1)}
/* rail chart body - existing kc-chart-* renderers live inside unchanged */
.kar-chart{padding:12px 15px 10px}
.kar-chart .kc-chart-bars{height:74px;gap:8px}
.kar-chart .kc-chart-bar span{background:linear-gradient(180deg,rgba(212,87,122,1),var(--cherry));box-shadow:inset 0 1px 0 rgba(255,255,255,.25);border-radius:6px 6px 3px 3px}
.kar-chart .kc-chart-v{font-size:9.5px;font-weight:800;color:var(--ink-light)}
.kar-chart .kc-chart-l{font-size:9.5px;font-weight:700;color:var(--ink-light);margin-top:2px}
/* object-rail body wrapper: a transparent shell so rows/foot reach the rail
   edges; the loading line keeps the row inset while fetching */
.kar-object .kc-ob-body{font-size:12.5px;color:var(--ink-2)}
.kar-object .kc-ob-body.kc-ob-load{padding:9px 15px;color:var(--ink-light)}
.kar-object .kc-ob-spark{flex:0 0 56px;height:6px;border-radius:var(--r-pill);background:rgba(0,0,0,.08);overflow:hidden}
.kar-object .kc-ob-spark span{display:block;height:100%;background:var(--cherry);border-radius:var(--r-pill)}
/* proposal lifecycle states (handlers unchanged) */
.kar-proposal.kp-dismissed{opacity:.5}
.kar-proposal.kp-done .kar-title{color:var(--ink-1)}
.kar-rail .kc-task-on{opacity:.55}
/* ── dark / expanded Keith (prototype .darkwrap .b-*) ── */
body.dark .kar-rail{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.10);box-shadow:0 8px 24px rgba(0,0,0,.3);--kar-hairline:rgba(255,255,255,.08)}
body.dark .kar-head,body.dark .kar-row,body.dark .kar-trow{border-bottom-color:rgba(255,255,255,.08)}
body.dark .kar-row:last-child,body.dark .kar-trow:last-child{border-bottom-color:transparent}
body.dark .kar-title,body.dark .kar-v,body.dark .kar-tt{color:rgba(242,237,249,1)}
body.dark .kar-eye,body.dark .kar-k,body.dark .kar-tm,body.dark .kar-tnum,body.dark .kar-meta,body.dark .kar-unit{color:rgba(235,228,250,.5)}
body.dark .kar-head-ic{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);color:rgba(205,188,240,1)}
body.dark .kar-skip{color:rgba(235,228,250,.65)}
body.dark .kar-skip:hover{background:rgba(255,255,255,.08);color:rgba(255,255,255,1)}
body.dark .kar-foot{background:linear-gradient(180deg,transparent,rgba(0,0,0,.15))}
body.dark .kar-trow:hover{background:rgba(255,255,255,.04)}
body.dark .kar-tact{color:rgba(255,125,156,1)}
body.dark .kar-topen{color:rgba(235,228,250,.65)}
body.dark .kar-topen:hover{color:rgba(255,255,255,1)}
body.dark .kar-object .kc-ob-spark{background:rgba(255,255,255,.12)}

/* ── MOBILE: keith action rail ── */
@media (max-width: 767.98px) {
  body.v4 .kar-rail{max-width:100%;margin-left:0;margin-right:0}
  /* 44px touch targets, prototype hierarchy preserved (strong cherry
     primary first, quiet secondary beside it, meta drops below) */
  body.v4 .kar-go{min-height:44px;padding:11px 22px;font-size:13px}
  body.v4 .kar-skip{min-height:44px;padding:11px 14px;font-size:13px}
  body.v4 .kar-foot{flex-wrap:wrap;row-gap:6px}
  body.v4 .kar-meta{flex-basis:100%;margin-left:0}
  body.v4 .kar-trow{min-height:44px;flex-wrap:wrap;row-gap:4px;-webkit-tap-highlight-color:transparent}
  body.v4 .kar-trow:active{background:rgba(0,0,0,.045)}
  body.v4 .kar-tact,body.v4 .kar-topen{min-height:44px;display:inline-flex;align-items:center;padding:0 6px}
  body.v4 .kar-btn{-webkit-tap-highlight-color:transparent}
  body.v4 .kar-chart .kc-chart-bars{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  body.v4 .kar-chart .kc-chart-col{min-width:34px;flex:1 0 34px}
  body.v4 .kar-v{white-space:normal}
}

/* ── QA F1 fix: approved prototype B rail radius is 16px (app --r-lg is 18px) ── */
body.v4 .kar-rail{border-radius:16px}

/* ── QA F2 (flagged decision): dark-mode .kar-go follows the app-wide dark cherry (--cherry → #ff5266)
   rather than the prototype strip's #b8002b - consistency rule beats the static strip. Glow aligned. ── */
body.dark .kar-go{box-shadow:0 2px 8px rgba(255,82,102,0.35)}

/* ── QA F3 fix: prototype Marketing purple - app --lilac-fg/--lilac remap to #5e5ce6 under body.v4.
   Scoped warm-lilac props restore the approved #5e3b8c / #c9baea. ── */
body.v4 .aiteam{--ai-lilac-fg:rgb(94,59,140);--ai-lilac-bg:rgb(241,236,251);--ai-lilac-soft:rgb(201,186,234)}

/* ── Sweep: ux-copy ── */
/* Sponsor-vocabulary rename: the campaigns table's lead cell now carries
   data-m-label="Sponsor" (was "Advertiser"). Mirror the three mobile
   glance-field rules for the new label; the old selectors stay harmless. */
@media (max-width: 767.98px) {
  body.v4 #monday-pane .data-table tr.camp-row td[data-m-label="Sponsor"] { padding-bottom: 6px; }
  body.v4 #monday-pane .data-table tr.camp-row td[data-m-label="Sponsor"]::before { display: none; }
  body.v4 #monday-pane .data-table tr.camp-row td[data-m-label="Sponsor"] > div:first-child { font-size: 15px; }
}

/* ── Sweep: design-consistency ── */
/* One sweep block: same kind of thing = identical component everywhere.
   Families touched here: (1) Clips status board → shared kanban chrome,
   (2) Speed-Work modal radius → large-modal token, (3) np-pill status
   pills → canonical solid-pill geometry (Wave 21), (4) filter chips
   (intel ik-chip / velocity vel-chip) → one metric set.
   Values are lifted verbatim from the canonical rules they align to -
   no re-derivation, no hex, no !important. Overrides win by appearing
   later in the file at equal specificity (the rules they replace carry
   no !important). */

/* (1) CLIPS BOARD → kanban grammar.
   js/pages/clips.js keeps its clb-* class names and data/logic; the
   column well, column head and card chrome now match the shared
   .kanban/.kb-col/.kb-head/.kb-card treatment used by Episodes
   (pipeline.js), Sponsors (monday.js) and Intel (intel.js).
   Source of the copied values: body.v4 .kb-col / .kb-head / .kb-card
   (Wave 53.1/55 reskin, ~line 14674 onwards). */
body.v4 .clb-col {
  background: rgba(255, 255, 255, 0.48);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 12px 32px rgba(0, 0, 0, 0.05);
  padding: 12px;
  min-height: 260px;
}
/* Column head: count-first big blue number + uppercase grey label
   (kb-head grammar). Markup order is name→count; flex order swaps it. */
body.v4 .clb-col-h {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  gap: 9px;
  padding: 2px 2px 0;
  margin: 0 0 10px;
}
body.v4 .clb-col-n {
  order: -1;
  font-family: var(--g-fd);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--g-blue);
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  line-height: 1;
}
body.v4 .clb-col-name {
  font-family: var(--g-fd);
  font-size: 11px;
  font-weight: 600;
  color: var(--g-ink-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
/* Card chrome: clean white tile, bold title, hover lift - kb-card values. */
body.v4 .clb-card {
  background: var(--g-surface);
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 10px;
  padding: 13px 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
body.v4 .clb-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
body.v4 .clb-title {
  font-family: var(--g-fd);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--g-ink-1);
  letter-spacing: -0.005em;
  line-height: 1.25;
}
/* Column gap parity with the shared board (10px between kb columns). */
body.v4 .clb-board { gap: 10px; }

/* (2) SPEED-WORK MODAL - large-modal radius token.
   Large desktop modals (aiceo-modal, cc-modal) sit at 22px (--g-r-xl);
   sw-modal was the lone 20px literal. */
body.v4 .sw-modal { border-radius: var(--g-r-xl); }

/* (3) NP-PILL (notification-prefs status pills) → canonical solid-pill
   geometry from the Wave 21 enforcement sweep (uppercase 10px / 700 /
   0.08em tracking / 3px 10px / r-pill). np-pill-none stays the quiet
   sentence-case soft variant, re-asserted after the base override. */
.np-pill {
  font-size: 10px;
  letter-spacing: 0.08em;
  line-height: 1.5;
}
.np-pill-none {
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  font-size: 11.5px;
}

/* (4) FILTER CHIPS - intel topic chips (.ik-chip) and velocity category
   chips (.vel-chip) are the same component (page-level filter row, dark
   ink fill when on). One metric set: 6px 14px padding, 12px/600 type. */
body.v4 .ik-chip,
body.v4 .vel-chip {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
}

/* ── MOBILE: clips (Sweep: design-consistency) ── */
/* The clips board keeps its existing ≤768px swipe treatment (appended
   earlier, ~line 30509). With the kb chrome applied above, mirror the
   shared kb lane behaviours the Episodes/Intel boards get: lanes may
   shrink to content, cards stay thumb-sized. Additive only. */
@media (max-width: 767.98px) {
  body.v4 .clb-card { min-height: 44px; -webkit-tap-highlight-color: transparent; }
  body.v4 .clb-card:active { filter: brightness(0.97); }
  body.v4 .clb-col { min-height: 200px; }
}

/* ── R3: keith ── */
/* R3-KE-1(i) - clear vertical separation between the at-a-glance count
   boxes and the situation content below: breathing room plus a soft
   hairline (the head is the dark hero panel, so the rule is a light
   rgba wash, matching the panel's existing rgba grammar - no hex). */
.keithb-head .keithb-today {
  margin: 12px 0 0;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.keithb-head .keithb-today + .keithb-situation,
.keithb-head .keithb-today + .keithb-situation-list { margin-top: 14px; }
/* R3-KE-1(ii) - the bolded lead word on the Pipeline:/Deals: situation
   lines reads slightly brighter than the body of the sentence. */
.keithb-head .keithb-situation strong,
.keithb-head .keithb-situation-list li strong { color: var(--on-accent); font-weight: 800; }

/* ── MOBILE: keith (R3) ── */
@media (max-width: 767.98px) {
  /* The separation survives the one-column brief: same hairline, slightly
     tighter spacing so the head doesn't balloon on a phone. */
  body.v4 .keithb-head .keithb-today { padding-bottom: 12px; }
  body.v4 .keithb-head .keithb-today + .keithb-situation,
  body.v4 .keithb-head .keithb-today + .keithb-situation-list { margin-top: 12px; }
}

/* ── R3: an+money+intel ── */
/* =============================================================
   R3-AN-1 - Downloads by Year: the actual YTD label renders INSIDE
   the solid part of the current year's bar (pinned to the top of the
   solid area), so the dashed predicted continuation joins the solid
   stack with no gap. White-on-fill via --on-accent (the topmost solid
   segment is always a saturated platform colour).
   ============================================================= */
body.v4 #gi-body .gi-ybar-inbar {
  position: absolute;
  top: 2px;
  left: 0;
  right: 0;
  margin: 0;
  color: var(--on-accent);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  z-index: 1;
}

/* =============================================================
   R3-AN-4 - Analytics tab bar spans the full content width; the
   "Enter <month> Data" + "Sponsor newsletter" buttons sit side by
   side at the right, INSIDE the bar. The entry button is disabled
   (with a tooltip) until the month it would enter has ended.
   ============================================================= */
body.v4 #gi-body .gi-tabbar {
  /* base .tabs is inline-flex (shrink-to-fit); width:100% makes the
     inline-level box span the full content width without fighting the
     !important display rule. */
  width: 100%;
  box-sizing: border-box;
  align-items: center;
}
body.v4 #gi-body .gi-tabbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex: 0 0 auto;
}
body.v4 #gi-body .gi-tabbar-action[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
/* sponsor button shows the dark selected state while its panel is open
   (same visual grammar as .tab.on) */
body.v4 #gi-body .gi-tabbar-action.gi-sponsor-on {
  background: var(--black);
  color: var(--on-accent);
  border-color: var(--black);
}

/* =============================================================
   R3-INV-1 - Invoices Received / Outstanding chips: --c-mint/--c-sky
   resolve globally to SATURATED fills (app.css :root "Status (SV
   refined)" block: #2f855a / #1e6091) while --on-mint/--on-sky are
   DARK on-pastel inks (#0f6e56 / #0c447c) → dark-on-dark, unreadable.
   Re-pair on the pastel -bg/-fg token family, which carries the Wave
   231 dark-mode remap:
     light: mint #ebf5f0/#2d7a56 · sky #eaf4fb/#2d6a8f
     dark:  mint rgba(78,216,138,.18)/#9beb9d · sky rgba(56,151,255,.18)/#9ccbff
   (.chip-rose already uses --rose-bg/--rose-fg - untouched.)
   ============================================================= */
body.v4 .inv-stats .chip-mint { background: var(--mint-bg); color: var(--mint-fg); }
body.v4 .inv-stats .chip-sky  { background: var(--sky-bg);  color: var(--sky-fg);  }

/* =============================================================
   R3-IN-1 - Intel pipeline score chip + guest-type pill: same broken
   token pairs as R3-INV-1. .ik-score used --c-mint (#2f855a) with
   --on-mint (#0f6e56); .ik-score.mid used --c-butter (#92660d - the
   brown pill) with --warn-fg (#8a4b00); .ik-topic used --c-sky
   (#1e6091) with --on-sky (#0c447c). All dark-on-dark. Re-paired on
   the pastel -bg/-fg family (light + dark verified):
     mint   #ebf5f0/#2d7a56 · dark rgba(78,216,138,.18)/#9beb9d
     butter #fdf5df/#7a5210 · dark rgba(242,212,121,.16)/#f2d479
     sky    #eaf4fb/#2d6a8f · dark rgba(56,151,255,.18)/#9ccbff
   ============================================================= */
body.v4 .ik-score     { background: var(--mint-bg);   color: var(--mint-fg);   }
body.v4 .ik-score.mid { background: var(--butter-bg); color: var(--butter-fg); }
body.v4 .ik-topic     { background: var(--sky-bg);    color: var(--sky-fg);    }

/* ── MOBILE: stats (R3-AN-4 tab bar) ── */
@media (max-width: 767.98px) {
  /* The right-aligned action pair wraps to its own full-width row under
     the tabs; both buttons stay ≥44px and split the row evenly. */
  body.v4 #gi-body .gi-tabbar-actions {
    flex: 1 1 100%;
    margin-left: 0;
    gap: 8px;
  }
  body.v4 #gi-body .gi-tabbar-actions .gi-tabbar-action {
    flex: 1 1 0;
    min-height: 44px;
    white-space: nowrap;
  }
}

/* ── MOBILE: intel (R3-IN-2 sort chip) ── */
@media (max-width: 767.98px) {
  /* The sort toggle keeps a 44px target and drops the auto-margin so it
     wraps naturally with the guest-type chips. */
  body.v4 .ik-filters .ik-sort {
    margin-left: 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* R3-IN-2 - sort chip (desktop): pushed to the right of the filter row;
   the mobile block above resets the margin so it wraps with the chips. */
body.v4 .ik-filters .ik-sort { margin-left: auto; }

/* ── R3: ep+misc ── */

/* R3-EP-2 - surface modal header actions in ONE flex row. The old layout
   absolutely positioned every .es-modal-archive at right:60px (only
   .es-modal-delete overrode to 102px), so bell / reassign / archive stacked
   on top of each other. The buttons are now static children of
   .es-modal-acts, anchored top-right as a row. */
body.v4 .es-modal-acts {
  position: absolute; top: 14px; right: 18px;
  display: flex; align-items: center; gap: 8px;
  z-index: 2;
}
body.v4 .es-modal-acts .es-modal-archive,
body.v4 .es-modal-acts .es-modal-close {
  position: static; top: auto; right: auto;
}

/* R3-EP-3 - episode surface leads with the GUEST NAME large; the episode
   title drops to this secondary line under the H1. Truncation-safe. */
body.v4 .es-title-sub {
  font-size: 13.5px; font-weight: 500;
  color: var(--g-ink-3);
  line-height: 1.35;
  margin: -2px 0 6px;
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
body.v4.dark .es-title-sub { color: var(--ink-soft); }

/* R3-EP-1 - explicit Unsubscribe affordance on the Notifications tab. */
body.v4 .np-unsub { color: var(--cherry); }
body.v4 .np-unsub:disabled { opacity: .55; cursor: default; }
body.v4 .np-orphan-why {
  font-size: 11px; font-weight: 500; color: var(--ink-soft);
}

/* R3-EP-1 - task editor Email-notifications people list: the signed-in
   user's own row gets an accent surface + border and a "you" tag. */
body.v4 .tsub-line.tsub-line-me {
  background: var(--lilac-bg);
  border: 1px solid var(--lilac);
  border-top: 1px solid var(--lilac);
  border-radius: var(--r-sm);
  padding: 7px 10px;
  margin: 2px 0;
}
body.v4 .tsub-line.tsub-line-me + .tsub-line { border-top: none; }
body.v4 .tsub-you-tag {
  display: inline-block; margin-left: 7px;
  padding: 1px 7px; border-radius: var(--r-pill);
  background: var(--lilac); color: var(--on-accent);
  font-size: 9.5px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; vertical-align: 1px;
}

/* R3-AIT-2 - AI Team masthead: proper stat PANELS (house stat-tile grammar
   inside .grid.grid-4). Overrides the old flex text-row rule. */
body.v4 .aiteam .mast-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

/* R3-AIT-4 - the weekly AI calendar strip shows the FULL week: 7 columns
   (Mon–Sun), Saturday + Sunday present even when empty. */
body.v4 .aiteam .aiweek-grid { grid-template-columns: repeat(7, 1fr); }

/* R3-GEN-3 - team chat dock elite pass (visual only, no behaviour change).
   Frosted panel chrome, proper header (avatar + presence), hairline message
   groups, refined composer (rounded field, 44px send), consistent radii. */
body.v4 .cp-panel {
  width: 380px; height: 560px;
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--g-200);
  border-radius: var(--g-r-xl, var(--r-xl));
  box-shadow: var(--sh-lg, 0 18px 44px rgba(0,0,0,0.16));
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
}
body.v4 .cp-tabs { padding: 10px 10px 0; background: transparent; border-bottom: 1px solid var(--g-200); }
body.v4 .cp-tab { border-radius: var(--r-sm) var(--r-sm) 0 0; }
body.v4 .cp-head {
  padding: 13px 16px;
  background: transparent;
  border-bottom: 1px solid var(--g-200);
}
body.v4 .cp-head-avwrap { position: relative; flex-shrink: 0; }
body.v4 .cp-head-avatar { width: 36px; height: 36px; font-size: 13px; }
body.v4 .cp-head-dot {
  position: absolute; right: -1px; bottom: -1px;
  width: 11px; height: 11px; border-radius: var(--r-pill);
  background: var(--g-300);
  border: 2px solid var(--g-surface);
}
body.v4 .cp-head-dot.on { background: var(--g-green); }
body.v4 .cp-head-name { font-size: 14px; letter-spacing: -0.01em; }
body.v4 .cp-head-sub.on { color: var(--g-green); font-weight: 600; }
body.v4 .cp-icon { width: 30px; height: 30px; border-radius: var(--r-sm); background: var(--chip, rgba(0,0,0,0.04)); }
body.v4 .cp-body { padding: 16px 16px 12px; gap: 8px; background: transparent; }
body.v4 .cp-day-divider { margin: 10px 0 4px; }
body.v4 .cp-msg { border-radius: var(--r-lg); padding: 9px 13px; font-size: 13.5px; }
body.v4 .cp-msg.them { background: var(--chip, rgba(0,0,0,0.05)); border-bottom-left-radius: var(--r-sm); }
body.v4 .cp-msg.me { border-bottom-right-radius: var(--r-sm); box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
body.v4 .cp-msg + .cp-msg { margin-top: 2px; }
body.v4 .cp-msg-time { margin: 2px 4px 4px; }
body.v4 .cp-composer {
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: transparent;
  border-top: 1px solid var(--g-200);
  align-items: center;
}
body.v4 .cp-composer-input {
  background: var(--g-surface);
  border: 1px solid var(--g-200);
  border-radius: var(--r-pill);
  padding: 10px 16px;
  min-height: 40px;
  font-size: 13.5px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
body.v4 .cp-composer-input:focus { border-color: var(--g-blue); box-shadow: 0 0 0 3px var(--g-blue-soft); }
body.v4 .cp-attach { width: 40px; height: 40px; border-radius: var(--r-pill); background: var(--chip, rgba(0,0,0,0.04)); }
body.v4 .cp-send {
  width: 44px; height: 44px;
  border-radius: var(--r-pill);
  box-shadow: 0 4px 12px var(--g-blue-soft);
  transition: transform .12s ease;
}
body.v4 .cp-send:active { transform: scale(0.94); }
/* Dark mode - the dock follows the app's dark panel language. */
body.v4.dark .cp-panel {
  background: linear-gradient(180deg, var(--g-ink-1) 0%, var(--ink-deep) 100%);
  border-color: rgba(255,255,255,0.10);
}
body.v4.dark .cp-tabs,
body.v4.dark .cp-head,
body.v4.dark .cp-composer { border-color: rgba(255,255,255,0.10); background: transparent; }
body.v4.dark .cp-head-name { color: var(--ink); }
body.v4.dark .cp-body { background: transparent; }
body.v4.dark .cp-msg.them { background: rgba(255,255,255,0.10); color: var(--ink); }
body.v4.dark .cp-msg-time, body.v4.dark .cp-day-divider, body.v4.dark .cp-head-sub { color: var(--ink-soft); }
body.v4.dark .cp-composer-input {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.12);
  color: var(--ink);
}
body.v4.dark .cp-icon { background: rgba(255,255,255,0.08); color: var(--ink-soft); }
body.v4.dark .cp-attach { background: rgba(255,255,255,0.08); color: var(--ink-soft); }
body.v4.dark .cp-attachment { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.10); }
body.v4.dark .cp-attach-name { color: var(--ink); }
body.v4.dark .cp-head-dot { border-color: var(--ink-deep); }

/* R3-GEN-4 - Speed Work hierarchy + header fix.
   (1) HEADER CUT-OFF: .sw-modal is a column flexbox with overflow:hidden;
   .sw-head had no flex-shrink:0, so when the queue mounted and .sw-body
   grew, flex shrank the header (it visibly collapsed/cut off). The header
   is now non-shrinking and the body owns the scroll.
   (2) PRIMARY ACTION above the fold: .sw-actions renders directly under
   the title inside the card (see speed-work.js paintCurrent), styled here
   with a hairline separator; supporting context flows below. */
body.v4 .sw-head { flex-shrink: 0; }
body.v4 .sw-body { flex: 1 1 auto; min-height: 0; }
body.v4 .sw-card .sw-actions {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
body.v4 .sw-card .sw-actions + .sw-action-body,
body.v4 .sw-card .sw-actions + .sw-ctx,
body.v4 .sw-card .sw-actions + .sw-dep { margin-top: 14px; }
body.v4 .sw-card .sw-action-body { margin-top: 14px; }
body.v4 .sw-card .sw-ctx { margin-top: 14px; }
/* Hierarchy: title prominent, meta quiet. */
body.v4 .sw-card-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; opacity: .92; }
body.v4 .sw-card-title { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; }

/* ── MOBILE: R3 ep+misc ── */
@media (max-width: 767.98px) {
  /* R3-EP-2 - surface sheet header actions: 44px touch targets in the
     single top-right row; nudge in from the sheet's rounded corner. */
  body.v4 .es-modal-acts { top: 10px; right: 10px; gap: 6px; }
  body.v4 .es-modal-acts .es-modal-archive,
  body.v4 .es-modal-acts .es-modal-close {
    width: 40px; height: 40px;
    min-width: 40px; min-height: 40px;
    -webkit-tap-highlight-color: transparent;
  }
  /* Keep the surface title clear of the action row. */
  body.v4 .es-modal-body .es-head-main { padding-right: 4px; }

  /* R3-EP-3 - guest-name headline + secondary title on a phone. */
  body.v4 .es-title-sub { font-size: 12.5px; -webkit-line-clamp: 2; }

  /* R3-EP-1 - Notifications tab: Unsubscribe + Edit both thumb-sized;
     the pair wraps under the label on narrow rows. */
  body.v4 .np-unsub { min-height: 44px; display: inline-flex; align-items: center; }

  /* R3-EP-1 - task editor people list: "you" row keeps its accent card
     and the grid collapses to label-over-options. */
  body.v4 .tsub-line { grid-template-columns: 1fr; }
  body.v4 .tsub-line-opt { min-height: 44px; }

  /* R3-AIT-2 - masthead stat panels: 2-up on a phone. */
  body.v4 .aiteam .mast-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  /* R3-AIT-4 - full-week strip on a phone: 2-up day cards (the existing
     920px rule already does this; restated so the 7-col desktop override
     can never leak down). */
  body.v4 .aiteam .aiweek-grid { grid-template-columns: repeat(2, 1fr); }

  /* R3-GEN-3 - chat dock is a bottom sheet on phones (existing block);
     the elite-pass chrome inherits. Width override so the new 380px
     desktop width never constrains the sheet. */
  body.v4 .cp-panel { width: 100%; }

  /* R3-GEN-4 - Speed Work sheet: the action bar sits right under the
     title (DOM order), header never shrinks, and the primary button is
     full-width at thumb size so "Mark as done" is above the fold. */
  body.v4 .sw-head { flex-shrink: 0; }
  body.v4 .sw-card .sw-actions { margin-top: 12px; padding-top: 12px; }
  body.v4 .sw-card-title { font-size: 17px; }
}

/* ── R3: shell ── */
/* R3-GEN-5 - Release history (What's New) category chips, THIRD ask.
   ROOT CAUSE: app.css's legacy ":root status" block redefines --c-lilac
   (#5e5ce6), --c-rose (#be185d), --c-mint/--c-sky/--c-peach/--c-butter/
   --c-sage as SATURATED foreground colours, stomping the tokens.css
   pastel surfaces in LIGHT mode. The ver3 chips paired those saturated
   backgrounds with the dark --on-* text → purple-on-purple. 216 other
   consumers rely on the saturated values, so the global tokens stay;
   the chips are re-pinned here to pastel-bg + matching -fg pairs that
   resolve correctly in BOTH modes:
     light → --c-*-bg pastels (#f0eeff/#ecfdf5/#eff6ff/#fff7ed/#fefce8/
             #fdf2f8/#f7fee7, never overridden) + dark --on-* text
     dark  → tokens.css body.dark dark-pastel --c-* (#2a2752 etc., wins
             over :root by element-level cascade) + light --on-* text */
body.v4 .ver3-chip-lilac { background: var(--c-lilac-bg);  color: var(--on-lilac); }
body.v4 .ver3-chip-mint  { background: var(--c-mint-bg);   color: var(--on-mint); }
body.v4 .ver3-chip-sky   { background: var(--c-sky-bg);    color: var(--on-sky); }
body.v4 .ver3-chip-peach { background: var(--c-peach-bg);  color: var(--on-amber); }
body.v4 .ver3-chip-butter{ background: var(--c-butter-bg); color: var(--on-amber); }
body.v4 .ver3-chip-rose  { background: var(--c-rose-bg);   color: var(--cherry); }
body.v4 .ver3-chip-sage  { background: var(--c-sage-bg);   color: var(--good-fg); }
body.v4.dark .ver3-chip-lilac { background: var(--c-lilac);  color: var(--on-lilac); }
body.v4.dark .ver3-chip-mint  { background: var(--c-mint);   color: var(--on-mint); }
body.v4.dark .ver3-chip-sky   { background: var(--c-sky);    color: var(--on-sky); }
body.v4.dark .ver3-chip-peach { background: var(--c-peach);  color: var(--on-amber); }
body.v4.dark .ver3-chip-butter{ background: var(--c-butter); color: var(--on-amber); }
body.v4.dark .ver3-chip-rose  { background: var(--c-rose);   color: var(--cherry); }
body.v4.dark .ver3-chip-sage  { background: var(--c-sage);   color: var(--good-fg); }

/* R3-GEN-6 - Cmd-K palette → current grammar: frosted panel, hairline
   rules, pale-blue line-icon chips (post-G3: --apl-blue-bg chip +
   currentColor stroke icon), dark mode via the same tokens. Behaviour
   in levelups.js unchanged; emoji icons replaced with stroke SVGs. */
.g-cmdk {
  background: var(--paper-3);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--border);
  border-radius: var(--r-lg, 16px);
  box-shadow: var(--sh-modal);
}
.g-cmdk-input { border-bottom: 1px solid var(--rule-soft); }
.g-cmdk-input svg { color: var(--ink-3); }
.g-cmdk-input input { color: var(--ink-1); }
.g-cmdk-input input::placeholder { color: var(--ink-3); }
.g-cmdk-input kbd {
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  color: var(--ink-3);
}
.g-cmdk-item { color: var(--ink-2); }
.g-cmdk-item + .g-cmdk-item { position: relative; }
.g-cmdk-item.on {
  background: var(--blue-soft, var(--blue-bg));
  color: var(--blue);
}
.g-cmdk-item-icon {
  width: 26px;
  height: 26px;
  border-radius: var(--r-sm, 8px);
  background: var(--apl-blue-bg);
  color: var(--apl-blue);
}
.g-cmdk-item-icon svg {
  width: 15px;
  height: 15px;
  display: block;
}
.g-cmdk-item.on .g-cmdk-item-icon {
  background: var(--apl-blue);
  color: var(--on-accent);
}
.g-cmdk-item-meta { color: var(--ink-4); }
.g-cmdk-empty { color: var(--ink-4); }

/* R3-GEN-7 - deploy nudge: centred horizontally (was bottom-left). */
body.v4 .rt-nudge {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

/* ── MOBILE: shell (R3) ── */
@media (max-width: 767.98px) {
  /* R3-GEN-7 - nudge sits ABOVE the bottom tab bar + home indicator. */
  body.v4 .rt-nudge {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    max-width: calc(100vw - 24px);
  }
  body.v4 .rt-nudge-btn { min-height: 32px; }
  /* R3-GEN-6 - Cmd-K on a phone: full-width sheet feel, 44px touch rows,
     16px input (stops iOS zoom-on-focus). */
  .g-cmdk-overlay { padding-top: 10vh; padding-left: 12px; padding-right: 12px; }
  .g-cmdk { width: 100%; max-width: none; }
  .g-cmdk-input input { font-size: 16px; }
  .g-cmdk-item {
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
  }
  .g-cmdk-item:active { background: var(--blue-soft, var(--blue-bg)); }
  .g-cmdk-item-icon { width: 30px; height: 30px; }
  .g-cmdk-item-icon svg { width: 17px; height: 17px; }
}

/* ── Build: velocity-merge ── */
/* Velocity Engine merged into the AI Team page as the Recommendations
   tab (js/pages/agents-recommendations.js). All existing .velocity-ag
   review-desk styles carry over because the tab wraps its markup in
   .velocity-ag. New here:
     .vel-tab-head - compact header replacing the standalone page's hero
       (ONE hero per page; the AI Team page already has one): headline +
       sub line on the left, the "Get recommendations" CTA on the right.
     .vr-src - per-card SOURCE chip: "<Dept> dept" (lilac pair tokens)
       for rows emitted by the AI department meetings, "System" (neutral)
       for director-run / manual rows. */
body.v4 .velocity-ag .vel-tab-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; flex-wrap:wrap; }
body.v4 .velocity-ag .vel-tab-head .vth-title{ font-size:18px; font-weight:600; letter-spacing:-.014em; color:var(--g-ink-1); line-height:1.2; }
body.v4 .velocity-ag .vel-tab-head .vth-sub{ font-size:12.5px; color:var(--g-ink-3); margin-top:3px; max-width:560px; line-height:1.5; }
body.v4 .velocity-ag .vel-tab-head .vr-cta{ flex-shrink:0; }
body.v4.dark .velocity-ag .vel-tab-head .vth-title{ color:rgba(255,255,255,.94); }
body.v4.dark .velocity-ag .vel-tab-head .vth-sub{ color:rgba(255,255,255,.6); }

body.v4 .vr-src{ display:inline-block; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; border-radius:var(--r-pill); padding:2px 9px; }
body.v4 .vr-src.dept{ background:var(--lilac-bg); color:var(--lilac-fg); }
body.v4 .vr-src.system{ background:var(--neutral-bg); color:var(--g-ink-3); }
body.v4.dark .vr-src.system{ background:rgba(255,255,255,.07); color:rgba(255,255,255,.65); }

/* ── MOBILE: agents (Recommendations tab) ── */
/* The whole review desk inherits the existing "MOBILE: velocity" block
   (same .velocity-ag classes). Only the NEW pieces need phone rules:
   the compact tab header stacks with a full-width 44px CTA; the source
   chip needs no change (wraps with the existing .vr-head flex-wrap). */
@media (max-width: 767.98px) {
  body.v4 .velocity-ag .vel-tab-head{ flex-direction:column; align-items:stretch; gap:10px; }
  body.v4 .velocity-ag .vel-tab-head .vr-cta{ min-height:44px; width:100%; }
}

/* ── Build: keith-replies-v2 ─────────────────────────────────────
   Source of truth: _PROTO_keith_replies_v2.html (approved). A Keith
   reply is a stack of the app's OWN components: the dashboard panel
   (.kp2-* - values lifted from the dv2 .p chrome, app.css 24612–24625,
   exactly as the prototype lifted them) and the episode-surface section
   (.es-sec - REUSED from the live Wave 177.18 rules, app.css 23213+,
   not re-declared) with the production checklist (.ck-*, Wave 23 rules,
   REUSED). Everything chat-specific is scoped under .kc-app so the
   app chrome applies inside the conversation without leaking out.
   Colour notes (tokens through the LIVE body.v4 cascade):
   · prototype #e7e7e4 border  → var(--line) (same value; flips dark)
   · prototype #1d1d1f title   → var(--g-ink-1) (flips dark)
   · prototype rgba hairlines  → var(--rule) where the value matches
   · dark strip = the body.v4.dark token remap + the explicit border /
     head overrides the prototype's .dark-strip block specifies.
   The kar-* rails are SUPERSEDED - emission removed in keith.js; their
   CSS above stays per house rules (dead, not deleted). */

/* the chat-context wrapper around any app component in a reply */
.kc-app{min-width:0}

/* ── dashboard panel chrome in a reply (prototype .kp2-*, lifted from
      body.v4 .dv2-row .p / .p-head / .p-title / .p-body) ── */
.kc-app .kp2-panel{background:var(--g-surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 30px rgba(0,0,0,.06);overflow:hidden}
.kc-app .kp2-head{display:flex;align-items:center;gap:10px;padding:14px 18px 12px}
.kc-app .kp2-head-ic{flex:0 0 26px;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--canvas);color:var(--ink-3);border:1px solid rgba(0,0,0,.065)}
.kc-app .kp2-head-ic svg{width:14px;height:14px}
.kc-app .kp2-headtext{flex:1;min-width:0}
.kc-app .kp2-eye{font-size:10px;font-weight:800;color:var(--ink-4);text-transform:uppercase;letter-spacing:.085em}
.kc-app .kp2-title{font-size:13.5px;font-weight:600;color:var(--g-ink-1);letter-spacing:-.005em;margin-top:1px}
.kc-app .kp2-unit{margin-left:7px;font-size:10px;font-weight:800;color:var(--ink-4);text-transform:uppercase;letter-spacing:.085em}
.kc-app .kp2-open{font-size:11px;font-weight:850;color:var(--g-ink-3);letter-spacing:.05em;white-space:nowrap;background:none;border:0;cursor:pointer;font-family:inherit;text-transform:uppercase;text-decoration:none}
.kc-app .kp2-open:hover{color:var(--ink-1)}
.kc-app .kp2-body{padding:6px 18px 16px}
.kc-app .kp2-foot{display:flex;align-items:center;gap:10px;padding:0 18px 14px}
/* a foot emitted INSIDE .kp2-body (object cards) keeps the body's inset */
.kc-app .kp2-body .kp2-foot{padding:8px 0 0}

/* panel data table - hairline rows, tabular numerals (prototype .kp2-table) */
.kc-app .kp2-table{width:100%;border-collapse:collapse;font-size:12.5px}
.kc-app .kp2-table th{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-4);text-align:left;padding:7px 0;border-bottom:1px solid var(--line)}
.kc-app .kp2-table th.num,.kc-app .kp2-table td.num{text-align:right;font-variant-numeric:tabular-nums}
.kc-app .kp2-table td{padding:9px 0;border-bottom:1px solid var(--rule);color:var(--ink-1);font-weight:600}
.kc-app .kp2-table tr:last-child td{border-bottom:none}
.kc-app .kp2-table .sub{color:var(--ink-3);font-weight:500}
.kc-app .kp2-up{color:var(--good);font-weight:700;font-variant-numeric:tabular-nums}
.kc-app .kp2-down{color:var(--cherry);font-weight:700;font-variant-numeric:tabular-nums}
.kc-app .kp2-pill{display:inline-block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:3px 9px;border-radius:var(--r-pill);line-height:1.4}
.kc-app .kp2-pill-mint{background:var(--c-mint);color:var(--on-mint)}
.kc-app .kp2-pill-lilac{background:var(--c-lilac);color:var(--on-lilac)}

/* the existing chart renderers inside the panel body keep their own kit,
   byte-identical (no kar-style re-scale - the prototype specifies none) */

/* ledger rows (proposal fields + object-card rows): the kp2-table row
   grammar as key/value lines */
.kc-app .kc-led{display:flex;flex-direction:column}
.kc-app .kc-led-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--rule);font-size:12.5px}
.kc-app .kc-led-row:last-child{border-bottom:none}
.kc-app .kc-led-k{flex:0 0 96px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-4)}
.kc-app .kc-led-v{font-weight:600;color:var(--ink-1);min-width:0;overflow-wrap:anywhere}
.kc-app .kc-led-empty{font-size:12.5px;color:var(--ink-3);padding:6px 0}

/* object-card list rows (studio schedule / performance) in the panel */
.kc-app .kc-ob-row{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--rule);text-decoration:none;color:inherit;font-size:12.5px}
.kc-app .kc-ob-row:last-of-type{border-bottom:none}
.kc-app .kc-ob-row:hover .kc-ob-row-l{color:var(--g-blue)}
.kc-app .kc-ob-row-l{flex:1;min-width:0;font-weight:600;color:var(--ink-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kc-app .kc-ob-row-m{font-size:11px;color:var(--ink-3);font-weight:600;white-space:nowrap}
.kc-app .kc-ob-spark{flex:0 0 56px;height:6px;border-radius:var(--r-pill);background:rgba(0,0,0,.08);overflow:hidden}
.kc-app .kc-ob-spark span{display:block;height:100%;background:var(--cherry);border-radius:var(--r-pill)}
.kc-app .kc-ob-meta{margin-left:auto;font-size:11px;font-weight:700;color:var(--ink-4)}
.kc-app .kc-ob-empty{color:var(--ink-3);font-weight:500}

/* ── episode-surface section in a reply - the LIVE .es-sec rules apply
      (body.v4 .es-sec, Wave 177.18); only chat-context deltas live here ── */
.kc-stack .kc-app .es-sec{margin-bottom:0}
/* prototype shows the in-chat form two-up (the surface forces 1-col inside
   .es-sec at 23336); restore the prototype's 2-col grid in chat only */
body.v4 .kc-app .es-sec .es-fminline{grid-template-columns:1fr 1fr;gap:14px 16px}
/* tick-kind section (prototype .es-sec-tick): green border + head wash */
body.v4 .kc-app .es-sec-tick{border-color:rgba(52,199,89,0.45);box-shadow:0 2px 12px rgba(52,199,89,0.07)}
body.v4 .kc-app .es-sec-tick .es-sec-head{background:rgba(52,199,89,0.05)}
/* the ghost Cancel (prototype .es-form-cancel - new app-wide form button) */
body.v4 .es-form-cancel{background:transparent;color:var(--g-ink-3);border:none;padding:8px 12px;font-size:12.5px;font-weight:500;border-radius:var(--r-pill);font-family:inherit;cursor:pointer}
body.v4 .es-form-cancel:hover{color:var(--g-blue)}
/* the trust meta line sits in the foot's flex:1 lead slot, quiet not red */
body.v4 .kc-app .es-sec-meta{color:var(--g-ink-4);font-weight:600;font-size:11.5px}
/* proposal/form lifecycle states (same classes the v1 cards used) */
.kc-prop.kp-dismissed,.kc-element-v2.kp-dismissed{opacity:.5}
.kc-prop.kp-dismissed .es-sec-foot,.kc-element-v2.kp-dismissed .es-sec-foot{display:none}
.kc-prop.kp-done .es-sec-name{color:var(--g-ink-1)}

/* checklist grammar in chat - LIVE .ck-* rules apply; chat-scale deltas
   from the prototype (head bar width, compact pct) */
.kc-app .ck-bar{width:120px}
.kc-app .ck-head-pct{font-size:15px;font-weight:800;color:var(--ink-1)}
.kc-app .ck-check{font-size:12px;line-height:1}
.kc-app .ck-label{display:flex;flex-direction:column;gap:1px}
.kc-app .kc-ck-meta{font-size:11px;color:var(--ink-3);font-weight:500}
.kc-app .ck-row.is-done .kc-ck-meta{text-decoration:none}
.kc-app .kc-ck-open{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);background:transparent;border:0;cursor:pointer;font-family:inherit;white-space:nowrap;padding:4px 6px}
.kc-app .kc-ck-open:hover{color:var(--ink-1)}

/* embedded workflow cards lose the old outer chrome - the section IS the
   card now; the eyebrow row (From the workflow + Go To Show) stays slim */
.kc-element-v2{border:none;background:transparent;border-radius:0;padding:0;box-shadow:none;margin-top:10px}
.kc-element-v2.kc-el-done{border:none;background:transparent}
.kc-element-v2 .kc-el-head{margin-bottom:8px}
.kc-element-v2 .kc-el-title{display:none}

/* ── dark mode - the body.v4.dark token remap does the heavy lifting;
      these are the prototype dark-strip's explicit component overrides ── */
body.v4.dark .kc-app .kp2-panel{box-shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35)}
body.v4.dark .kc-app .kp2-head-ic{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1)}
body.v4.dark .kc-app .es-sec{border-color:rgba(56,151,255,0.5);box-shadow:0 2px 12px rgba(0,0,0,0.3)}
body.v4.dark .kc-app .es-sec-head{background:rgba(56,151,255,0.07)}
body.v4.dark .kc-app .es-sec-body{border-top-color:rgba(255,255,255,0.07)}
body.v4.dark .kc-app .es-sec-foot{border-top-color:rgba(255,255,255,0.07)}
body.v4.dark .kc-app .es-sec-tick{border-color:rgba(68,201,138,0.45)}
body.v4.dark .kc-app .es-sec-tick .es-sec-head{background:rgba(68,201,138,0.07)}
body.v4.dark .kc-app .es-kind-form{background:rgba(56,151,255,0.2)}
body.v4.dark .kc-app .es-kind-tick{background:rgba(68,201,138,0.2);color:var(--green-strong)}
body.v4.dark .kc-app .ck-owner{background:rgba(255,255,255,.07)}
body.v4.dark .kc-app .ck-bar{background:rgba(255,255,255,.1)}
body.v4.dark .kc-app .ck-check{border-color:var(--ink-4)}
body.v4.dark .kc-app .kc-ob-spark{background:rgba(255,255,255,.12)}

/* ── MOBILE: keith-replies-v2 ── */
@media (max-width: 767.98px) {
  /* sections + panels run the full thread width */
  body.v4 .kc-app,body.v4 .kc-app .kp2-panel,body.v4 .kc-app .es-sec{max-width:100%}
  /* surface form back to one column on a phone (mirror of the surface rule) */
  body.v4 .kc-app .es-sec .es-fminline{grid-template-columns:1fr}
  /* 44px ticks + buttons (mobile-developer doctrine) */
  body.v4 .kc-app .ck-check{width:28px;height:28px;min-width:28px;position:relative}
  body.v4 .kc-app .ck-check::after{content:"";position:absolute;inset:-8px}
  body.v4 .kc-app .ck-row-main{min-height:44px}
  body.v4 .kc-app .kc-ck-open{min-height:44px;display:inline-flex;align-items:center}
  body.v4 .kc-app .es-sec-foot{flex-wrap:wrap;row-gap:8px}
  body.v4 .kc-app .es-form-save{min-height:44px;flex:1 1 auto}
  body.v4 .es-form-cancel{min-height:44px}
  body.v4 .kc-app .kp2-open{min-height:44px;display:inline-flex;align-items:center}
  /* panel tables scroll inside their card, the page never pans */
  body.v4 .kc-app .kp2-body .kc-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  body.v4 .kc-app .kp2-table th,body.v4 .kc-app .kp2-table td{white-space:nowrap;padding-right:10px}
  /* head wraps gracefully when eyebrow+title+action don't fit */
  body.v4 .kc-app .kp2-head{flex-wrap:wrap;row-gap:6px}
  /* tap feedback */
  body.v4 .kc-app .ck-check,body.v4 .kc-app .kc-ck-open,body.v4 .kc-app .kp2-open,body.v4 .es-form-cancel{-webkit-tap-highlight-color:transparent}
}

/* ── Build: newsletter-builder ── */
/* Sponsor Newsletter row builder (_PROTO_newsletter_builder.html, approved).
   The mockup reuses the dv2 dashboard grammar; its class names are kept
   verbatim but PREFIX-SCOPED under .nlb (the dashboard already owns global
   .p/.row-tools rules) per the design-implementation rule. Values lifted
   from the prototype; every colour resolves to a token (the proto's :root
   IS the app token palette). */
.nlb{margin-top:4px}
.nlb .nlb-topbar{display:flex;align-items:center;gap:14px;background:var(--paper);backdrop-filter:var(--blur);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh);padding:13px 18px;margin-bottom:22px;flex-wrap:wrap}
.nlb .tb-title{font-size:16px;font-weight:800;letter-spacing:-.015em;color:var(--ink-1)}
.nlb .tb-month{display:flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-pill);padding:6px 8px 6px 14px;font-size:13px;font-weight:600;color:var(--ink-1)}
.nlb .tb-month button{border:0;background:transparent;color:var(--ink-3);cursor:pointer;font-size:13px;width:24px;height:24px;border-radius:50%;font-family:inherit}
.nlb .tb-month button:hover{background:var(--rule);color:var(--ink-1)}
.nlb .tb-spacer{flex:1}
.nlb .tb-status{font-size:11.5px;font-weight:700;color:var(--ink-3)}
.nlb .tb-status b{color:var(--good)}
.nlb .nlb-warn{color:var(--warn)}
.nlb .nlb-btn{display:inline-flex;align-items:center;gap:7px}
.nlb .nlb-btn svg{width:14px;height:14px}
.nlb .nlb-send{background:var(--ink-1);color:var(--surface)}
.nlb .nlb-send:hover{background:var(--ink-2)}

/* split: canvas | preview */
.nlb .nlb-split{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(330px,1fr);gap:24px;align-items:start}
.nlb .col-h{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);margin:0 0 12px;display:flex;align-items:center;gap:8px}
.nlb .col-h .hint{font-weight:600;text-transform:none;letter-spacing:0;color:var(--ink-4)}

/* builder canvas - mirrors the dashboard dv2 row kit (proto verbatim) */
.nlb .nlb-canvas{display:flex;flex-direction:column;gap:18px}
.nlb .row{position:relative}
.nlb .row-slots{display:grid;gap:14px}
.nlb .row-wide{grid-template-columns:1fr}
.nlb .row-2{grid-template-columns:1fr 1fr}
.nlb .row-3{grid-template-columns:repeat(3,1fr)}
.nlb .row-4{grid-template-columns:repeat(4,1fr)}
.nlb .row-tools{position:absolute;top:-14px;right:8px;z-index:5;display:flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:4px 8px;box-shadow:var(--sh-2);opacity:0;transform:translateY(4px);transition:opacity .14s,transform .14s;pointer-events:none}
.nlb .row:hover .row-tools,.nlb .row:focus-within .row-tools{opacity:1;transform:none;pointer-events:auto}
.nlb .rt-grp{display:inline-flex;background:var(--canvas);border-radius:var(--r-pill);padding:2px}
.nlb .rt-size{border:none;background:none;font-size:11px;font-weight:600;color:var(--ink-3);padding:4px 9px;border-radius:var(--r-pill);cursor:pointer;font-family:inherit}
.nlb .rt-size.on{background:var(--surface);color:var(--ink-1);box-shadow:var(--sh)}
.nlb .rt-div{width:1px;height:18px;background:var(--line)}
.nlb .rt-icon{width:24px;height:24px;border:none;background:none;border-radius:50%;cursor:pointer;color:var(--ink-3);font-size:13px;display:grid;place-items:center}
.nlb .rt-icon:hover{background:var(--rule);color:var(--ink-1)}
.nlb .rt-icon.danger:hover{background:var(--cherry-bg);color:var(--cherry)}

/* panel chrome - proto .p verbatim, .nlb-scoped */
.nlb .p{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh);overflow:hidden;min-height:108px;display:flex;flex-direction:column}
.nlb .p-head{display:flex;align-items:center;gap:10px;padding:12px 16px 9px}
.nlb .p-drag{font-size:12px;color:var(--ink-4);cursor:grab;user-select:none}
.nlb .p-title{flex:1;font-size:12.5px;font-weight:600;color:var(--ink-1);letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nlb .p-kind{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;border-radius:var(--r-pill);padding:2px 8px}
.nlb .k-text{background:var(--c-sky);color:var(--on-sky)}
.nlb .k-content{background:var(--c-lilac);color:var(--on-lilac)}
.nlb .k-image{background:var(--c-peach);color:var(--on-amber)}
.nlb .p-acts{display:flex;gap:2px;color:var(--ink-4);align-items:center}
.nlb .p-act{width:22px;height:22px;display:grid;place-items:center;border-radius:6px;cursor:pointer;font-size:12px;border:0;background:none;color:inherit}
.nlb .p-act:hover{background:var(--rule);color:var(--ink-2)}
.nlb .p-body{padding:2px 16px 14px;flex:1;display:flex;flex-direction:column;justify-content:center}

/* empty slot + add-row */
.nlb .slot-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:108px;border:1.5px dashed var(--line-2);border-radius:var(--r-lg);background:transparent;color:var(--ink-4);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit}
.nlb .slot-empty:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-soft)}
.nlb .slot-plus{font-size:20px;line-height:1}
.nlb .addrow{align-self:flex-start;border:1px dashed var(--line-2);background:transparent;border-radius:var(--r-pill);padding:8px 16px;font-size:12.5px;font-weight:600;color:var(--ink-3);cursor:pointer;font-family:inherit}
.nlb .addrow:hover{border-color:var(--blue);color:var(--blue)}

/* panel contents - WIDE rendering */
.nlb .big-num{font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink-1)}
.nlb .big-row{display:flex;align-items:flex-end;gap:16px}
.nlb .spark{flex:1;display:flex;align-items:flex-end;gap:5px;height:46px;min-width:120px}
.nlb .spark i{flex:1;background:linear-gradient(180deg,var(--cherry-bg),var(--cherry));border-radius:4px 4px 2px 2px;display:block}
.nlb .growth{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:800;border-radius:var(--r-pill);padding:3px 10px;font-variant-numeric:tabular-nums;white-space:nowrap}
.nlb .g-up{background:var(--c-mint);color:var(--on-mint)}
.nlb .g-down{background:var(--c-rose);color:var(--cherry)}
.nlb .sub{font-size:11px;font-weight:600;color:var(--ink-4);margin-top:6px}

/* compact rendering (3/4-split) */
.nlb .c-num{font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1.05;font-variant-numeric:tabular-nums;color:var(--ink-1)}
.nlb .c-growth{font-size:11px;font-weight:800;margin-top:5px;display:inline-flex;align-items:center;gap:3px}
.nlb .c-up{color:var(--good)}
.nlb .c-down{color:var(--cherry)}

/* text panel content */
.nlb .txt{font-size:12.5px;line-height:1.6;color:var(--ink-2)}
.nlb .txt .ai-fill{background:linear-gradient(90deg,var(--lilac-bg),var(--cherry-bg));border-radius:6px;padding:1px 4px}
.nlb .nlb-empty-txt{color:var(--ink-4)}
.nlb .ai-chip{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;background:var(--c-lilac);color:var(--on-lilac);border-radius:var(--r-pill);padding:3px 9px;margin-top:8px;align-self:flex-start}

/* show rows with artwork */
.nlb .show-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--rule)}
.nlb .show-row:last-child{border-bottom:0}
.nlb .art{flex:0 0 36px;width:36px;height:36px;border-radius:8px;display:grid;place-items:center;font-size:11px;font-weight:800;color:var(--on-accent)}
.nlb .art-img{object-fit:cover}
.nlb .art-1{background:linear-gradient(135deg,var(--cherry-2),var(--cherry))}
.nlb .art-2{background:linear-gradient(135deg,var(--on-lilac),var(--lilac))}
.nlb .art-3{background:linear-gradient(135deg,var(--good-fg),var(--good-2))}
.nlb .show-t{flex:1;min-width:0}
.nlb .show-name{font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-1)}
.nlb .show-meta{font-size:10.5px;color:var(--ink-4);font-weight:600}
.nlb .show-n{font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink-1)}

/* platform split mini chart */
.nlb .psplit{display:flex;flex-direction:column;gap:7px}
.nlb .ps-row{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700}
.nlb .ps-l{width:58px;color:var(--ink-3)}
.nlb .ps-bar{flex:1;height:8px;border-radius:var(--r-pill);background:var(--rule);overflow:hidden}
.nlb .ps-bar i{display:block;height:100%;border-radius:var(--r-pill)}
.nlb .ps-spotify i{background:var(--mint)}
.nlb .ps-apple i{background:var(--lilac)}
.nlb .ps-yt i{background:var(--cherry)}
.nlb .ps-v{width:36px;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-2)}

/* sponsor slots */
.nlb .slotgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.nlb .sl{border-radius:9px;padding:8px 9px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.nlb .sl-open{border:1.5px dashed var(--line-2);color:var(--good);background:var(--c-mint)}
.nlb .sl-sold{border:1px solid var(--line);color:var(--ink-4);background:var(--surface-2)}
.nlb .sl b{display:block;font-size:11.5px;letter-spacing:0;text-transform:none;margin-top:2px;color:var(--ink-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nlb .sl-open b{color:var(--good)}

/* clip panel */
.nlb .clip{display:flex;gap:12px;align-items:center}
.nlb .clip-thumb{flex:0 0 86px;height:54px;border-radius:9px;background:linear-gradient(135deg,var(--hero-1),var(--ink-2));position:relative;display:grid;place-items:center;color:var(--on-accent)}
.nlb .clip-thumb::after{content:'▶';font-size:15px;opacity:.9}
.nlb .clip-t{font-size:12.5px;font-weight:700;line-height:1.35;color:var(--ink-1)}
.nlb .clip-m{font-size:11px;color:var(--ink-4);font-weight:600;margin-top:3px}

/* image panels */
.nlb .imgph{flex:1;min-height:64px;border-radius:10px;border:1.5px dashed var(--line-2);display:grid;place-items:center;color:var(--ink-4);font-size:11px;font-weight:700;background:repeating-linear-gradient(45deg,var(--rule-soft),var(--rule-soft) 8px,transparent 8px,transparent 16px)}
.nlb .img2{display:grid;grid-template-columns:1fr 1fr;gap:8px;flex:1}
.nlb .nlb-img{width:100%;max-height:140px;object-fit:cover;border-radius:10px;display:block}

/* upcoming guests */
.nlb .up-row{display:flex;align-items:center;gap:9px;padding:6px 0;border-bottom:1px solid var(--rule)}
.nlb .up-row:last-child{border-bottom:0}
.nlb .up-av{flex:0 0 26px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:9.5px;font-weight:800;color:var(--on-accent)}
.nlb .up-1{background:var(--cherry)}.nlb .up-2{background:var(--on-sky)}.nlb .up-3{background:var(--warn-fg)}
.nlb .up-n{flex:1;font-size:12.5px;font-weight:700;color:var(--ink-1)}
.nlb .up-d{font-size:10.5px;font-weight:700;color:var(--ink-4)}

/* picker sheet (rendered inside the app modal overlay) */
.nlb-pickwrap{max-width:760px;width:100%;background:transparent;box-shadow:none;padding:0;border:0}
.nlb .picker{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-modal);overflow:hidden}
.nlb .pk-head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.nlb .pk-eye{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cherry)}
.nlb .pk-h{font-size:16px;font-weight:800;letter-spacing:-.015em;color:var(--ink-1)}
.nlb .pk-x{margin-left:auto;width:28px;height:28px;border-radius:50%;border:0;background:var(--rule);color:var(--ink-3);font-size:14px;cursor:pointer}
.nlb .pk-body{padding:18px 20px 22px;max-height:62vh;overflow-y:auto}
.nlb .pk-group{margin-bottom:20px}
.nlb .pk-group:last-child{margin-bottom:0}
.nlb .pk-gh{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);margin-bottom:10px}
.nlb .pk-gh .p-kind{font-size:9px}
.nlb .pk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:10px}
.nlb .pk-card{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:12px 13px;cursor:pointer;text-align:left;font-family:inherit;transition:border-color .12s,box-shadow .12s;display:flex;flex-direction:column;gap:4px}
.nlb .pk-card:hover{border-color:var(--blue);box-shadow:var(--sh)}
.nlb .pk-ic{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-size:13px;margin-bottom:3px}
.nlb .pk-ic.t{background:var(--c-sky);color:var(--on-sky)}
.nlb .pk-ic.c{background:var(--c-lilac);color:var(--on-lilac)}
.nlb .pk-ic.i{background:var(--c-peach);color:var(--on-amber)}
.nlb .pk-t{font-size:12.5px;font-weight:700;color:var(--ink-1)}
.nlb .pk-s{font-size:11px;color:var(--ink-4);line-height:1.45;font-weight:500}
.nlb .pk-src{font-size:9.5px;font-weight:700;font-family:'SF Mono',Menlo,monospace;color:var(--ink-4);margin-top:2px}

/* live email preview (right column) */
.nlb .preview-wrap{position:sticky;top:18px}
.nlb .preview-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh);overflow:hidden}
.nlb .pv-bar{display:flex;align-items:center;gap:8px;padding:11px 16px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.nlb .pv-dot{width:9px;height:9px;border-radius:50%}
.nlb .pv-dot-r{background:var(--cherry)}
.nlb .pv-dot-y{background:var(--warn)}
.nlb .pv-dot-g{background:var(--good-2)}
.nlb .pv-bar span{font-size:11px;font-weight:700;color:var(--ink-3);margin-left:6px}
.nlb .pv-bar .pv-dot{margin-left:0}
.nlb .pv-live{margin-left:auto;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--good);display:inline-flex;align-items:center;gap:5px}
.nlb .pv-live::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--good-2);animation:nlb-pulse 1.6s infinite}
@keyframes nlb-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.nlb .pv-scroll{max-height:760px;overflow-y:auto;background:var(--canvas);padding:0}
.nlb .pv-scroll iframe{display:block;width:100%;height:740px;border:0;background:transparent}

/* panel editor inputs */
.nlb-ta{width:100%;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:13px;color:var(--ink-1);background:var(--surface);font-family:inherit;resize:vertical;box-sizing:border-box}
.nlb-input{width:100%;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:13px;color:var(--ink-1);background:var(--surface);font-family:inherit;box-sizing:border-box}
.nlb-upl{cursor:pointer;display:inline-flex;align-items:center;gap:6px;align-self:flex-start}

/* below ~1020px the preview drops under the canvas (proto breakpoint) */
@media (max-width: 1020px){
  .nlb .nlb-split{grid-template-columns:1fr}
  .nlb .preview-wrap{position:static}
}

/* ── MOBILE: newsletter-builder ── */
@media (max-width: 767.98px){
  /* one column; 3/4-splits become 2-up, 2-splits stack (proto breakpoint) */
  .nlb .row-3,.nlb .row-4{grid-template-columns:1fr 1fr}
  .nlb .row-2{grid-template-columns:1fr}
  .nlb .pk-grid{grid-template-columns:1fr 1fr}
  /* hover doesn't exist - row tools persistently visible */
  .nlb .row-tools{opacity:1;transform:none;pointer-events:auto;position:static;justify-content:flex-end;margin-bottom:6px;box-shadow:none;border-radius:var(--r);flex-wrap:wrap}
  /* 44px touch targets */
  .nlb .rt-size{min-height:36px;padding:6px 12px}
  .nlb .rt-icon{width:36px;height:36px}
  .nlb .p-act{width:36px;height:36px;-webkit-tap-highlight-color:transparent}
  .nlb .p-act:active{background:var(--blue-soft)}
  .nlb .slot-empty{min-height:88px;-webkit-tap-highlight-color:transparent}
  .nlb .slot-empty:active{border-color:var(--blue);color:var(--blue)}
  .nlb .addrow{min-height:44px;width:100%;text-align:center}
  .nlb .nlb-btn{min-height:44px}
  .nlb .tb-month button{width:36px;height:36px}
  /* topbar wraps cleanly */
  .nlb .nlb-topbar{gap:10px;padding:12px 14px}
  .nlb .tb-status{flex-basis:100%;order:5}
  /* picker → bottom-sheet feel */
  .nlb-pickwrap{max-width:none;align-self:flex-end;margin:0}
  .nlb .pk-body{max-height:58vh;-webkit-overflow-scrolling:touch}
  .nlb .pk-card{min-height:44px}
  /* preview height trimmed on a phone */
  .nlb .pv-scroll{max-height:520px}
  .nlb .pv-scroll iframe{height:520px}
  /* editor inputs - 16px stops iOS zoom-on-focus */
  .nlb-ta,.nlb-input{font-size:16px}
}

/* ── Build: intel-dossier ── */
/* The Intel prospect popup rebuilt as the approved dossier sheet
   (_PROTO_intel_dossier.html). Values lifted from the prototype;
   hexes mapped to tokens (cherry/lilac/pastel families), rgba kept
   verbatim. Themed through local --p-* custom properties exactly as
   the prototype does - body.v4.dark re-maps them (the prototype's
   .dossier.dark block) so one markup renders both modes. The card
   lives inside the standard .ep-modal-overlay; it carries its own
   .dossier class (NOT .ep-modal) so the glass episode-popup skin
   doesn't fight the sheet - the mobile bottom-sheet treatment is
   replicated for .dossier in the MOBILE block below. */
body.v4 .dossier{
  --p-surface:rgba(255,255,255,.97); --p-surface2:rgba(0,0,0,.025);
  --p-ink:var(--ink-1); --p-ink-mid:var(--ink-soft); --p-ink-light:var(--ink-3);
  --p-hairline:rgba(0,0,0,.08); --p-card:var(--surface); --p-card-bd:rgba(0,0,0,.09);
  --p-track:rgba(0,0,0,.08);
  width:100%;max-width:760px;background:var(--p-surface);
  backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);
  border-radius:22px;box-shadow:var(--sh-modal);overflow:hidden;color:var(--p-ink);
  border:1px solid rgba(255,255,255,.5);
  display:flex;flex-direction:column;max-height:calc(100vh - 48px);
}
body.v4.dark .dossier{
  --p-surface:rgba(36,31,27,.97); --p-surface2:rgba(255,255,255,.045);
  --p-ink:var(--ink-1); --p-ink-mid:var(--ink-soft); --p-ink-light:var(--ink-3);
  --p-hairline:rgba(255,255,255,.1); --p-card:rgba(255,255,255,.05); --p-card-bd:rgba(255,255,255,.12);
  --p-track:rgba(255,255,255,.13);
  border-color:rgba(255,255,255,.09);
}

/* ── HEADER ── */
body.v4 .dossier .dz-head{display:flex;align-items:center;gap:16px;padding:20px 24px 18px;border-bottom:1px solid var(--p-hairline);flex-shrink:0}
body.v4 .dossier .dz-photo{flex:0 0 64px;width:64px;height:64px;border-radius:18px;display:grid;place-items:center;font-size:20px;font-weight:850;letter-spacing:.01em;color:var(--on-accent);background:linear-gradient(140deg,var(--lilac),color-mix(in srgb,var(--lilac) 72%,black));box-shadow:0 3px 10px rgba(94,92,230,.35),inset 0 1px 0 rgba(255,255,255,.3)}
body.v4 .dossier .dz-id{min-width:0;flex:1}
body.v4 .dossier .dz-name{font-size:21px;font-weight:830;letter-spacing:-.02em;line-height:1.15}
body.v4 .dossier .dz-role{font-size:12.5px;font-weight:660;color:var(--p-ink-mid);margin-top:3px}
body.v4 .dossier .dz-pills{display:flex;align-items:center;gap:7px;margin-top:9px;flex-wrap:wrap}
body.v4 .dossier .dz-stage{font-size:10px;font-weight:880;letter-spacing:.09em;text-transform:uppercase;padding:4px 11px;border-radius:var(--r-pill);background:var(--sky-bg);color:var(--sky-fg);border:1px solid rgba(45,106,143,.25)}
body.v4 .dossier .dz-window{font-size:10px;font-weight:850;letter-spacing:.07em;text-transform:uppercase;padding:4px 11px;border-radius:var(--r-pill);background:rgba(184,0,43,.09);color:var(--cherry);border:1px solid rgba(184,0,43,.22)}
body.v4.dark .dossier .dz-window{background:rgba(255,82,109,.14);border-color:rgba(255,82,109,.3)}
body.v4.dark .dossier .dz-stage{background:rgba(169,205,227,.13);color:var(--on-sky);border-color:rgba(169,205,227,.26)}

/* score block - ring + EXPLAINED components */
body.v4 .dossier .dz-score{flex:0 0 auto;display:flex;align-items:center;gap:14px;padding-left:18px;border-left:1px solid var(--p-hairline)}
body.v4 .dossier .ring{position:relative;width:62px;height:62px}
body.v4 .dossier .ring svg{transform:rotate(-90deg)}
body.v4 .dossier .ring .trk{fill:none;stroke:var(--p-track);stroke-width:5.5}
body.v4 .dossier .ring .val{fill:none;stroke:var(--cherry);stroke-width:5.5;stroke-linecap:round;stroke-dasharray:163.4}
body.v4 .dossier .ring-n{position:absolute;inset:0;display:grid;place-items:center;font-size:18px;font-weight:850;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
body.v4 .dossier .ring-cap{position:absolute;left:0;right:0;bottom:-15px;text-align:center;font-size:8.5px;font-weight:880;letter-spacing:.1em;text-transform:uppercase;color:var(--p-ink-light)}
body.v4 .dossier .dims{display:flex;flex-direction:column;gap:6px;min-width:148px}
body.v4 .dossier .dim{display:grid;grid-template-columns:58px 1fr 18px;align-items:center;gap:8px}
body.v4 .dossier .dim .k{font-size:9.5px;font-weight:830;letter-spacing:.07em;text-transform:uppercase;color:var(--p-ink-light)}
body.v4 .dossier .dim .b{height:5px;border-radius:var(--r-pill);background:var(--p-track);position:relative;overflow:hidden}
body.v4 .dossier .dim .b i{position:absolute;inset:0 auto 0 0;border-radius:var(--r-pill);background:var(--dc,var(--cherry))}
body.v4 .dossier .dim .n{font-size:10.5px;font-weight:820;font-variant-numeric:tabular-nums;color:var(--p-ink-mid);text-align:right}
body.v4 .dossier .dz-x{align-self:flex-start;width:30px;height:30px;border-radius:9px;border:1px solid var(--p-card-bd);background:var(--p-card);font-size:15px;color:var(--p-ink-light);cursor:pointer;display:grid;place-items:center;flex:0 0 auto;margin-left:6px}

/* ── BODY ── */
body.v4 .dossier .dz-body{padding:6px 24px 10px;max-height:560px;overflow:auto;flex:1 1 auto;min-height:0}
body.v4 .dossier .dz-sec{padding:17px 0 16px;border-bottom:1px solid var(--p-hairline)}
body.v4 .dossier .dz-sec:last-child{border-bottom:0}
body.v4 .dossier .dz-eye{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px}
body.v4 .dossier .dz-eye .n{width:17px;height:17px;border-radius:6px;display:grid;place-items:center;font-size:9.5px;font-weight:900;letter-spacing:0}
/* section eyebrow tints (the prototype inlines these; tokenised here) */
body.v4 .dossier .dz-eye-1{color:var(--cherry)}
body.v4 .dossier .dz-eye-1 .n{background:rgba(184,0,43,.1);color:var(--cherry)}
body.v4.dark .dossier .dz-eye-1 .n{background:rgba(255,82,109,.13)}
body.v4 .dossier .dz-eye-2{color:var(--lilac-fg)}
body.v4 .dossier .dz-eye-2 .n{background:var(--lilac-bg);color:var(--lilac-fg)}
body.v4.dark .dossier .dz-eye-2{color:var(--on-lilac)}
body.v4.dark .dossier .dz-eye-2 .n{background:rgba(201,186,234,.14);color:var(--on-lilac)}
body.v4 .dossier .dz-eye-3{color:var(--sage-fg)}
body.v4 .dossier .dz-eye-3 .n{background:var(--sage-bg);color:var(--sage-fg)}
body.v4.dark .dossier .dz-eye-3{color:var(--on-mint)}
body.v4.dark .dossier .dz-eye-3 .n{background:rgba(168,217,192,.14);color:var(--on-mint)}
body.v4 .dossier .dz-eye-4{color:var(--p-ink-light)}
body.v4 .dossier .dz-eye-4 .n{background:rgba(0,0,0,.06);color:var(--p-ink-mid)}
body.v4.dark .dossier .dz-eye-4 .n{background:rgba(255,255,255,.08)}

/* 1 - WHY NOW */
body.v4 .dossier .whynow{background:linear-gradient(145deg,rgba(184,0,43,.07),transparent 70%);border:1px solid rgba(184,0,43,.18);border-left:4px solid var(--cherry);border-radius:13px;padding:15px 18px}
body.v4.dark .dossier .whynow{background:linear-gradient(145deg,rgba(255,82,109,.1),transparent 70%);border-color:rgba(255,82,109,.22);border-left-color:var(--cherry)}
body.v4 .dossier .whynow-hook{font-size:17px;font-weight:760;font-style:italic;letter-spacing:-.012em;line-height:1.35}
body.v4 .dossier .whynow-case{font-size:13px;font-weight:610;line-height:1.6;color:var(--p-ink-mid);margin-top:9px;white-space:pre-wrap}
body.v4 .dossier .whynow-case b{font-weight:790;color:var(--p-ink)}
body.v4 .dossier .whynow-moment{display:inline-flex;align-items:center;gap:7px;margin-top:11px;font-size:11px;font-weight:780;color:var(--cherry);background:var(--p-card);border:1px solid rgba(184,0,43,.2);padding:5px 12px;border-radius:var(--r-pill)}
body.v4.dark .dossier .whynow-moment{border-color:rgba(255,82,109,.28)}
body.v4 .dossier .whynow-moment svg{width:11px;height:11px;flex:0 0 auto}

/* 2 - WHAT TO ASK */
body.v4 .dossier .qs{display:flex;flex-direction:column;gap:8px}
body.v4 .dossier .q{display:flex;gap:11px;align-items:flex-start;background:var(--p-card);border:1px solid var(--p-card-bd);border-radius:12px;padding:11px 14px}
body.v4 .dossier .q .qn{flex:0 0 20px;width:20px;height:20px;border-radius:7px;display:grid;place-items:center;font-size:10px;font-weight:880;background:var(--lilac-bg);color:var(--lilac-fg)}
body.v4.dark .dossier .q .qn{background:rgba(201,186,234,.14);color:var(--on-lilac)}
body.v4 .dossier .q p{font-size:13.5px;font-weight:640;line-height:1.5;margin:0}
body.v4 .dossier .q small{display:block;font-size:11px;font-weight:620;color:var(--p-ink-light);margin-top:3px}
body.v4 .dossier .dz-genq{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--p-surface2);border:1px dashed var(--p-card-bd);border-radius:12px;padding:12px 15px;font-size:12.5px;font-weight:620;color:var(--p-ink-mid)}

/* 3 - AUDIENCE FIT */
body.v4 .dossier .fit-row{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:11px}
body.v4 .dossier .topic{font-size:11px;font-weight:780;padding:5px 13px;border-radius:var(--r-pill);background:var(--t-bg);color:var(--t-fg);border:1px solid color-mix(in srgb,var(--t-fg) 16%,transparent)}
body.v4.dark .dossier .topic{background:color-mix(in srgb,var(--t-fg) 16%,transparent);border-color:color-mix(in srgb,var(--t-fg) 35%,transparent);color:color-mix(in srgb,var(--t-fg) 45%,white)}
body.v4 .dossier .fit-note{display:flex;gap:11px;background:var(--p-surface2);border:1px solid var(--p-hairline);border-radius:12px;padding:12px 15px;font-size:12.5px;font-weight:620;line-height:1.55;color:var(--p-ink-mid)}
body.v4 .dossier .fit-note b{color:var(--p-ink);font-weight:790}
body.v4 .dossier .fit-note svg{flex:0 0 14px;width:14px;height:14px;margin-top:2px;color:var(--sage-fg)}
body.v4.dark .dossier .fit-note svg{color:var(--on-mint)}

/* 4 - HISTORY */
body.v4 .dossier .hist{display:flex;flex-direction:column}
body.v4 .dossier .hrow{display:flex;align-items:center;gap:11px;padding:8px 2px;font-size:12.5px;font-weight:640;color:var(--p-ink-mid)}
body.v4 .dossier .hrow + .hrow{border-top:1px solid var(--p-hairline)}
body.v4 .dossier .hrow .hd{flex:0 0 72px;font-size:10.5px;font-weight:800;color:var(--p-ink-light);font-variant-numeric:tabular-nums;text-transform:uppercase;letter-spacing:.05em}
body.v4 .dossier .hrow b{color:var(--p-ink);font-weight:760}
body.v4 .dossier .hrow .hk{margin-left:auto;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--p-ink-light);flex:0 0 auto}

/* Inline note editor (Add note toggles .dz-notehost.open) */
body.v4 .dossier .dz-notehost{display:none}
body.v4 .dossier .dz-notehost.open{display:block}
body.v4 .dossier .dz-eye-note{color:var(--p-ink-light)}
body.v4 .dossier .dz-note-priv{font-size:9px;font-weight:800;letter-spacing:.08em;background:var(--p-surface2);border:1px solid var(--p-hairline);border-radius:var(--r-pill);padding:2px 8px;color:var(--p-ink-light)}
body.v4 .dossier .dz-notesec textarea{width:100%;border:1px solid var(--p-card-bd);background:var(--p-card);border-radius:12px;padding:11px 14px;font:inherit;font-size:13px;line-height:1.5;color:var(--p-ink);resize:vertical;min-height:88px}
body.v4 .dossier .dz-notefoot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;font-size:11px;color:var(--p-ink-light);font-weight:640}

/* ── FOOTER ACTION BAR ── */
body.v4 .dossier .dz-foot{display:flex;align-items:center;gap:10px;padding:15px 24px;border-top:1px solid var(--p-hairline);background:var(--p-surface2);flex-shrink:0}
body.v4 .dossier .dz-btn{font:inherit;font-size:13px;font-weight:790;padding:11px 22px;border-radius:var(--r-pill);cursor:pointer;border:1px solid transparent;display:inline-flex;align-items:center;gap:8px;min-height:44px}
body.v4 .dossier .dz-btn svg{width:13px;height:13px;flex:0 0 auto}
body.v4 .dossier .dz-btn.advance{background:var(--cherry);color:var(--on-accent);box-shadow:0 2px 10px rgba(184,0,43,.35)}
body.v4 .dossier .dz-btn.advance:hover{background:var(--cherry-2)}
body.v4 .dossier .dz-btn.advance.is-busy{opacity:.6;cursor:wait}
body.v4 .dossier .dz-btn.quiet{background:transparent;color:var(--p-ink-light);border-color:transparent}
body.v4 .dossier .dz-btn.quiet:hover{color:var(--rose-fg);background:rgba(184,0,43,.05)}
body.v4.dark .dossier .dz-btn.quiet:hover{color:var(--cherry);background:rgba(255,82,109,.08)}
body.v4 .dossier .dz-btn.ghost{background:var(--p-card);color:var(--p-ink);border-color:var(--p-card-bd)}
body.v4 .dossier .dz-spacer{flex:1}

/* ── MOBILE: intel-dossier ── */
/* The dossier card replicates the shell's bottom-sheet treatment
   (it carries .dossier, not .ep-modal, so the shared sheet selectors
   don't catch it - the OVERLAY is already re-anchored bottom by the
   shell block). Header compresses: score block wraps under the
   identity row, mini-bars stretch; body loses its desktop max-height
   (the sheet's 90dvh governs); footer buttons get full thumb reach. */
@media (max-width: 767.98px) {
  body.v4 .dossier{
    position:relative;
    width:100%;max-width:100%;height:auto;max-height:90dvh;
    border-radius:var(--r-xl) var(--r-xl) 0 0;border-bottom:none;
    padding-top:26px;                       /* room for the drag handle */
    animation:mSheetUp 0.24s cubic-bezier(0.16,1,0.3,1);
  }
  body.v4 .dossier::before{
    content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);
    width:40px;height:4.5px;border-radius:var(--r-pill);
    background:var(--ink-4);opacity:.55;pointer-events:none;z-index:5;
  }
  body.v4 .dossier .dz-head{flex-wrap:wrap;gap:12px;padding:14px 18px 14px}
  body.v4 .dossier .dz-photo{flex-basis:52px;width:52px;height:52px;font-size:17px}
  body.v4 .dossier .dz-id{flex:1 1 0;min-width:0}
  body.v4 .dossier .dz-name{font-size:18px}
  body.v4 .dossier .dz-x{order:1;min-width:44px;min-height:44px;border-radius:12px}
  body.v4 .dossier .dz-score{order:2;flex:1 1 100%;padding-left:0;border-left:none;padding-top:4px}
  body.v4 .dossier .dims{flex:1;min-width:0}
  body.v4 .dossier .dz-body{padding:2px 18px 8px;max-height:none}
  body.v4 .dossier .dz-foot{flex-wrap:wrap;padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px))}
  body.v4 .dossier .dz-btn{min-height:44px}
  body.v4 .dossier .dz-btn.advance{flex:1 1 100%;justify-content:center}
  body.v4 .dossier .dz-genq{flex-wrap:wrap}
  body.v4 .dossier .dz-genq .dz-btn{min-height:44px}
  body.v4 .dossier .dz-notesec textarea{font-size:16px} /* stop iOS zoom */
  body.v4 .dossier .hrow{min-height:44px}
}

/* ── Build: goals+briefs ── */
/* _PROTO_ai_goals_briefs.html (approved) - Sections A (measured goals)
   + B (findings library, brief threads, set-brief sheet). Prototype
   class names kept verbatim per the fidelity protocol; scoped under
   body.v4 .aiteam (cards/stream) and the modal containers (.gmodal /
   .sheet get the .aig scope class). Colour mapping identical to the
   existing .aiteam block: prototype palette == app pastel tokens;
   --green→--mint-fg, --green-bg→--mint-bg, --red→--cherry,
   --red-bg→--rose-bg, lilac→--ai-lilac-* (QA F3 remap). Prototype-only
   rgba values carried inline (no new hex). */

/* ── tab bar (house .tabs grammar) ── */
body.v4 .aig-tabs { margin-bottom: 18px; }

/* ════ SECTION A - GOAL CARDS ════ */
body.v4 .aiteam.aig .sec-head .aig-add,
body.v4 .aiteam.aif .sec-head .aig-add { margin-left: auto; background: none; border: 0; cursor: pointer; font-family: inherit; }
body.v4 .aiteam .goal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:20px;align-items:start}
body.v4 .aiteam .goal{background:rgba(255,255,255,.78);backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);border:1px solid var(--ai-line-soft);border-radius:var(--r-lg);box-shadow:var(--ai-sh);overflow:hidden;transition:transform .16s,box-shadow .16s}
body.v4 .aiteam .goal:hover{transform:translateY(-2px);box-shadow:var(--ai-sh-lift)}
body.v4 .aiteam .goal-stripe{height:4px;background:linear-gradient(90deg,var(--gl),color-mix(in srgb,var(--gl) 30%,transparent) 70%,transparent)}
body.v4 .aiteam .goal.is-ontrack{--gl:var(--mint-fg)}
body.v4 .aiteam .goal.is-behind{--gl:var(--cherry)}
body.v4 .aiteam .goal.is-manual{--gl:var(--ai-ink-light)}
body.v4 .aiteam .goal-body{padding:18px 20px 16px}
body.v4 .aiteam .goal-top{display:flex;align-items:flex-start;gap:12px}
body.v4 .aiteam .goal-text{font-size:16.5px;font-weight:800;letter-spacing:-.016em;line-height:1.3;flex:1;color:var(--ink)}
body.v4 .aiteam .goal .goal-status{flex:0 0 auto;font-size:10px;font-weight:900;letter-spacing:.1em;padding:4px 11px;border-radius:var(--r-pill);white-space:nowrap}
body.v4 .aiteam .goal.is-ontrack .goal-status{background:var(--mint-bg);color:var(--mint-fg);border:1px solid rgba(45,122,86,.22)}
body.v4 .aiteam .goal.is-behind .goal-status{background:var(--rose-bg);color:var(--cherry);border:1px solid rgba(184,0,43,.22)}
body.v4 .aiteam .goal.is-manual .goal-status{background:rgba(0,0,0,.05);color:var(--ai-ink-light);border:1px solid var(--ai-hairline)}
body.v4 .aiteam .goal-interp{display:flex;align-items:center;gap:7px;margin-top:9px;font-size:11.5px;font-weight:600;color:var(--ai-ink-light);line-height:1.45}
body.v4 .aiteam .goal-interp .ai{flex:0 0 auto;width:16px;height:16px;border-radius:5px;display:grid;place-items:center;background:var(--ai-lilac-bg);color:var(--ai-lilac-fg)}
body.v4 .aiteam .goal-interp .ai svg{width:10px;height:10px}
body.v4 .aiteam .goal-prog{margin-top:16px}
body.v4 .aiteam .goal-prog-row{display:flex;align-items:baseline;gap:10px;margin-bottom:7px}
body.v4 .aiteam .goal-pct{font-size:24px;font-weight:850;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--gl)}
body.v4 .aiteam .goal-pace{font-size:12px;font-weight:750}
body.v4 .aiteam .goal.is-ontrack .goal-pace{color:var(--mint-fg)}
body.v4 .aiteam .goal.is-behind .goal-pace{color:var(--cherry)}
body.v4 .aiteam .goal-now{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--ai-ink-light);font-variant-numeric:tabular-nums}
body.v4 .aiteam .bar{position:relative;height:9px;border-radius:var(--r-pill);background:rgba(0,0,0,.07);overflow:visible}
body.v4 .aiteam .bar-fill{position:absolute;inset:0 auto 0 0;border-radius:var(--r-pill);background:linear-gradient(90deg,color-mix(in srgb,var(--gl) 75%,white),var(--gl))}
body.v4 .aiteam .bar-fill.is-manual-fill{background:var(--ai-ink-light)}
body.v4 .aiteam .bar-tick{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--ink);opacity:.45;border-radius:2px}
body.v4 .aiteam .bar-tick::after{content:"pace";position:absolute;top:-15px;left:50%;transform:translateX(-50%);font-size:8.5px;font-weight:850;letter-spacing:.08em;color:var(--ai-ink-light);text-transform:uppercase}
body.v4 .aiteam .goal-foot{display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:13px;border-top:1px solid var(--ai-hairline)}
body.v4 .aiteam .src-chip{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:780;padding:4px 11px;border-radius:var(--r-pill);background:var(--sc-bg);color:var(--sc-fg);border:1px solid color-mix(in srgb,var(--sc-fg) 15%,transparent)}
body.v4 .aiteam .src-chip.is-manual-chip{--sc-bg:rgba(0,0,0,.05);--sc-fg:var(--ai-ink-light)}
body.v4 .aiteam .src-chip .sw{width:6px;height:6px;border-radius:50%;background:currentColor}
body.v4 .aiteam .goal-checked{margin-left:auto;font-size:10.5px;font-weight:700;color:var(--ai-ink-light)}
body.v4 .aiteam .goal-fix{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:780;color:var(--cherry);background:none;border:0;cursor:pointer;font-family:inherit;padding:2px}
body.v4 .aiteam .goal-fix:hover{text-decoration:underline}
body.v4 .aiteam .goal-manual-box{margin-top:14px;background:rgba(0,0,0,.028);border:1px dashed rgba(0,0,0,.16);border-radius:12px;padding:13px 15px}
body.v4 .aiteam .goal-manual-q{font-size:13px;font-weight:700;color:var(--ink-mid);line-height:1.5}
body.v4 .aiteam .goal-manual-acts{display:flex;gap:8px;margin-top:11px}
body.v4 .aiteam .btn-mini{font-family:inherit;font-size:11.5px;font-weight:780;padding:6px 14px;border-radius:var(--r-pill);cursor:pointer;border:1px solid transparent}
body.v4 .aiteam .btn-mini.solid{background:var(--ink);color:white}
body.v4 .aiteam .btn-mini.ghost{background:white;color:var(--ink);border-color:rgba(0,0,0,.16)}
body.v4 .aiteam .btn-mini.cherry{background:var(--cherry);color:white}
body.v4 .aiteam .manual-meter{display:flex;align-items:center;gap:10px;margin-top:12px}
body.v4 .aiteam .manual-meter .bar{flex:1}
body.v4 .aiteam .manual-meter b{font-size:12px;font-weight:800;color:var(--ink-mid);font-variant-numeric:tabular-nums}

/* ════ SECTION A2 - CREATE GOAL MODAL (two panel) ════ */
body.v4 .gmodal.aig{--ai-hairline:rgba(0,0,0,.075);--ai-ink-light:rgb(138,131,119);--ai-lilac-fg:rgb(94,59,140);--ai-lilac-bg:rgb(241,236,251);width:100%;max-width:900px;background:rgba(255,255,255,.97);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);border-radius:20px;box-shadow:0 8px 24px rgba(26,20,16,.10),0 32px 80px rgba(26,20,16,.18);overflow:hidden;margin:auto}
body.v4 .gmodal-head{display:flex;align-items:center;gap:12px;padding:18px 24px;border-bottom:1px solid var(--ai-hairline)}
body.v4 .gmodal-head .ai-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--ai-lilac-bg);color:var(--ai-lilac-fg);border:1px solid rgba(94,59,140,.16)}
body.v4 .gmodal-head .ai-ic svg{width:17px;height:17px}
body.v4 .gmodal-head .ai-ic.is-brief-ic{background:rgba(184,0,43,.08);color:var(--cherry);border-color:rgba(184,0,43,.16)}
body.v4 .gmodal-title{font-size:16px;font-weight:800;letter-spacing:-.014em;color:var(--ink)}
body.v4 .gmodal-sub{font-size:11.5px;color:var(--ai-ink-light);font-weight:650;margin-top:1px}
body.v4 .gmodal-x{margin-left:auto;width:30px;height:30px;border-radius:9px;border:1px solid var(--ai-hairline);background:white;font-size:16px;color:var(--ai-ink-light);cursor:pointer;display:grid;place-items:center}
body.v4 .gmodal-split{display:grid;grid-template-columns:1fr 1.15fr;min-height:380px}
body.v4 .gmodal-left{padding:22px 24px;border-right:1px solid var(--ai-hairline)}
body.v4 .aig .f-lbl{font-size:10px;font-weight:850;letter-spacing:.11em;text-transform:uppercase;color:var(--ai-ink-light);margin-bottom:8px}
body.v4 .aig .f-ta{width:100%;font-family:inherit;font-size:15px;font-weight:600;line-height:1.5;color:var(--ink);background:white;border:1px solid rgba(0,0,0,.13);border-radius:12px;padding:13px 15px;resize:none;min-height:96px}
body.v4 .aig .f-ta:focus{outline:2px solid rgba(184,0,43,.25);border-color:var(--cherry)}
body.v4 .aig .f-hint{font-size:11.5px;color:var(--ai-ink-light);line-height:1.5;margin-top:9px}
body.v4 .aig .f-examples{margin-top:18px;display:flex;flex-direction:column;gap:7px}
body.v4 .aig .f-ex{font-size:12px;font-weight:650;color:var(--ink-mid);background:rgba(0,0,0,.035);border:1px solid var(--ai-hairline);border-radius:9px;padding:8px 12px;cursor:pointer}
body.v4 .aig .f-ex:hover{background:rgba(0,0,0,.06)}
body.v4 .gmodal-right{padding:22px 24px;background:linear-gradient(165deg,var(--ai-lilac-bg),rgba(241,236,251,.25) 55%,transparent)}
body.v4 .aig .interp-head{display:flex;align-items:center;gap:8px;margin-bottom:14px}
body.v4 .aig .interp-head .pulse{width:8px;height:8px;border-radius:50%;background:var(--ai-lilac-fg);box-shadow:0 0 0 3px rgba(94,59,140,.18);animation:aig-pulse 1.8s infinite}
@keyframes aig-pulse{0%,100%{opacity:1}50%{opacity:.45}}
body.v4 .aig .interp-head b{font-size:12.5px;font-weight:800;color:var(--ai-lilac-fg);letter-spacing:.02em}
body.v4 .aig .interp-rows{display:flex;flex-direction:column;gap:0}
body.v4 .aig .irow{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid rgba(94,59,140,.1)}
body.v4 .aig .irow:last-child{border-bottom:0}
body.v4 .aig .irow-k{flex:0 0 122px;font-size:10px;font-weight:850;letter-spacing:.1em;text-transform:uppercase;color:var(--ai-lilac-fg);padding-top:3px}
body.v4 .aig .irow-v{flex:1;font-size:13.5px;font-weight:650;line-height:1.5;color:var(--ink)}
body.v4 .aig .irow-v small{display:block;font-size:11px;color:var(--ai-ink-light);font-weight:600;margin-top:2px}
body.v4 .aig .picker{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
body.v4 .aig .pick{font-family:inherit;font-size:11px;font-weight:750;padding:5px 12px;border-radius:var(--r-pill);border:1px solid rgba(0,0,0,.13);background:white;color:var(--ink-mid);cursor:pointer}
body.v4 .aig .pick.on{background:var(--ai-lilac-fg);color:white;border-color:var(--ai-lilac-fg)}
body.v4 .aig .pick-edit{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
body.v4 .aig .pick-input{font-family:var(--font-mono,ui-monospace,monospace);font-size:12px;font-weight:700;width:110px;border:1px solid rgba(0,0,0,.13);border-radius:8px;padding:5px 9px;color:var(--ink);background:white}
body.v4 .gmodal-foot{display:flex;align-items:center;gap:10px;padding:15px 24px;border-top:1px solid var(--ai-hairline);background:rgba(0,0,0,.014)}
body.v4 .gmodal-foot .meta{font-size:11.5px;color:var(--ai-ink-light);font-weight:650}
body.v4 .gmodal-foot .spacer{flex:1}

/* ════ SECTION B - FINDINGS LIBRARY ════ */
body.v4 .aiteam .fbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:rgba(255,255,255,.72);backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%);border:1px solid var(--ai-line-soft);border-radius:15px;box-shadow:var(--ai-sh);padding:11px 13px;margin:18px 0 20px}
body.v4 .aiteam .fchip{font-family:inherit;font-size:11.5px;font-weight:760;padding:6px 13px;border-radius:var(--r-pill);border:1px solid var(--ai-hairline);background:white;color:var(--ink-mid);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
body.v4 .aiteam .fchip .sw{width:6px;height:6px;border-radius:50%;background:var(--c,var(--ai-ink-light))}
body.v4 .aiteam .fchip.on{background:var(--ink);color:white;border-color:var(--ink)}
body.v4 .aiteam .fchip.on .sw{background:white}
body.v4 .aiteam .fsep{width:1px;height:22px;background:var(--ai-hairline);margin:0 4px}
body.v4 .aiteam .fperson-sel{font-family:inherit;font-size:11.5px;font-weight:760;padding:6px 12px;border-radius:var(--r-pill);border:1px solid var(--ai-hairline);background:white;color:var(--ink-mid);cursor:pointer;max-width:200px}
body.v4 .aiteam .ftoggle{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:760;color:var(--ink-mid);cursor:pointer;padding:0 6px;background:none;border:0;font-family:inherit}
body.v4 .aiteam .ftoggle .sw2{width:30px;height:17px;border-radius:var(--r-pill);background:var(--cherry);position:relative;flex:0 0 auto}
body.v4 .aiteam .ftoggle .sw2::after{content:"";position:absolute;top:2px;right:2px;width:13px;height:13px;border-radius:50%;background:white;box-shadow:0 1px 2px rgba(0,0,0,.25)}
body.v4 .aiteam .ftoggle.off .sw2{background:rgba(0,0,0,.18)}
body.v4 .aiteam .ftoggle.off .sw2::after{right:auto;left:2px}
body.v4 .aiteam .fsearch{margin-left:auto;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--ai-hairline);background:white;border-radius:var(--r-pill);padding:7px 14px;color:var(--ai-ink-light);font-size:12px;font-weight:650;min-width:210px}
body.v4 .aiteam .fsearch svg{width:13px;height:13px;flex:0 0 auto}
body.v4 .aiteam .fsearch-in{border:0;outline:0;background:transparent;font-family:inherit;font-size:12px;font-weight:650;color:var(--ink);flex:1;min-width:0}
body.v4 .aiteam .stream{display:flex;flex-direction:column;gap:12px;max-width:980px}
body.v4 .aiteam .fcard{position:relative;background:rgba(255,255,255,.8);backdrop-filter:blur(20px) saturate(175%);-webkit-backdrop-filter:blur(20px) saturate(175%);border:1px solid var(--ai-line-soft);border-radius:15px;box-shadow:var(--ai-sh);padding:14px 18px 13px 22px;overflow:hidden;cursor:pointer;transition:transform .14s,box-shadow .14s}
body.v4 .aiteam .fcard:hover{transform:translateY(-1px);box-shadow:var(--ai-sh-lift)}
body.v4 .aiteam .fcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--d-fg)}
body.v4 .aiteam .fcard-top{display:flex;align-items:center;gap:10px}
body.v4 .aiteam .fav{flex:0 0 28px;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-size:9.5px;font-weight:850;color:var(--d-fg);background:var(--d-bg);border:1px solid color-mix(in srgb,var(--d-fg) 14%,transparent)}
body.v4 .aiteam .fwho{font-size:12.5px;font-weight:790;color:var(--ink)}
body.v4 .aiteam .fdept{font-size:10px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;color:var(--d-fg);background:var(--d-bg);padding:2.5px 9px;border-radius:var(--r-pill);border:1px solid color-mix(in srgb,var(--d-fg) 14%,transparent)}
body.v4 .aiteam .fdate{margin-left:auto;font-size:11px;font-weight:700;color:var(--ai-ink-light);font-variant-numeric:tabular-nums}
body.v4 .aiteam .fsum{font-size:13.5px;font-weight:620;line-height:1.55;color:var(--ink);margin-top:9px}
body.v4 .aiteam .fsum b{font-weight:800}
body.v4 .aiteam .fcard-foot{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
body.v4 .aiteam .fbrief-tag{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:780;color:var(--cherry);background:rgba(184,0,43,.07);border:1px solid rgba(184,0,43,.18);padding:3.5px 11px;border-radius:var(--r-pill)}
body.v4 .aiteam .fbrief-tag svg{width:10px;height:10px}
body.v4 .aiteam .fkind{font-size:10.5px;font-weight:750;color:var(--ai-ink-light)}
body.v4 .aiteam .aif-more-row{display:flex;justify-content:center;margin:18px 0 4px;max-width:980px}

/* ── department-brief grouped thread ── */
body.v4 .aiteam .thread{position:relative;background:rgba(255,255,255,.82);backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);border:1px solid rgba(184,0,43,.18);border-radius:var(--r-lg);box-shadow:var(--ai-sh-lift);overflow:hidden;max-width:980px}
body.v4 .aiteam .thread-head{display:flex;align-items:center;gap:11px;padding:14px 20px;background:linear-gradient(135deg,rgba(184,0,43,.06),transparent 65%);border-bottom:1px solid var(--ai-hairline)}
body.v4 .aiteam .thread-ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--cherry);color:white;box-shadow:0 2px 7px rgba(184,0,43,.35);flex:0 0 auto}
body.v4 .aiteam .thread-ic svg{width:15px;height:15px}
body.v4 .aiteam .thread-t{font-size:14.5px;font-weight:810;letter-spacing:-.012em;color:var(--ink)}
body.v4 .aiteam .thread-meta{font-size:11px;font-weight:700;color:var(--ai-ink-light);margin-top:1px}
body.v4 .aiteam .thread-state{margin-left:auto;font-size:10px;font-weight:900;letter-spacing:.1em;color:var(--mint-fg);background:var(--mint-bg);border:1px solid rgba(45,122,86,.22);padding:4px 11px;border-radius:var(--r-pill);flex:0 0 auto}
body.v4 .aiteam .thread-state.is-working{color:var(--butter-fg);background:var(--butter-bg);border-color:rgba(122,82,16,.22)}
body.v4 .aiteam .synth{margin:14px 16px 8px;background:linear-gradient(145deg,var(--peach-bg),color-mix(in srgb,var(--peach-bg) 35%,white));border:1px solid rgba(173,78,26,.2);border-radius:14px;padding:14px 17px;position:relative}
body.v4 .aiteam .synth-pin{position:absolute;top:-9px;left:16px;font-size:8.5px;font-weight:900;letter-spacing:.12em;color:white;background:var(--peach-fg);padding:3px 10px;border-radius:var(--r-pill);box-shadow:0 2px 6px rgba(173,78,26,.3)}
body.v4 .aiteam .synth-top{display:flex;align-items:center;gap:9px;margin-top:2px}
body.v4 .aiteam .synth-av{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:9px;font-weight:850;color:white}
body.v4 .aiteam .synth-who{font-size:12px;font-weight:800;color:var(--ink)}
body.v4 .aiteam .synth-when{margin-left:auto;font-size:10.5px;font-weight:700;color:var(--ai-ink-light)}
body.v4 .aiteam .synth-body{font-size:13.5px;font-weight:630;line-height:1.6;color:var(--ink);margin-top:9px}
body.v4 .aiteam .synth-body b,body.v4 .aiteam .synth-body strong{font-weight:810}
body.v4 .aiteam .synth-body p{margin:0 0 8px}
body.v4 .aiteam .synth-body p:last-child{margin-bottom:0}
body.v4 .aiteam .synth-body ul,body.v4 .aiteam .synth-body ol{margin:6px 0 8px 18px}
body.v4 .aiteam .synth-body h1,body.v4 .aiteam .synth-body h2,body.v4 .aiteam .synth-body h3,body.v4 .aiteam .synth-body h4{font-size:13.5px;font-weight:810;margin:10px 0 4px}
body.v4 .aiteam .contribs{padding:6px 16px 14px;display:flex;flex-direction:column}
body.v4 .aiteam .contrib{display:flex;gap:12px;padding:12px 4px}
body.v4 .aiteam .contrib + .contrib{border-top:1px solid var(--ai-hairline)}
body.v4 .aiteam .contrib .rail{flex:0 0 26px;display:flex;flex-direction:column;align-items:center}
body.v4 .aiteam .contrib .rail .av{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:9px;font-weight:850;border:1px solid var(--ai-hairline)}
body.v4 .aiteam .contrib-main{flex:1;min-width:0}
body.v4 .aiteam .contrib-who{display:flex;align-items:baseline;gap:8px}
body.v4 .aiteam .contrib-who b{font-size:12px;font-weight:790;color:var(--ink)}
body.v4 .aiteam .contrib-who span{font-size:10.5px;font-weight:700;color:var(--ai-ink-light)}
body.v4 .aiteam .contrib-txt{font-size:12.5px;font-weight:600;line-height:1.55;color:var(--ink-mid);margin-top:4px}

/* ════ SECTION B2 - SET BRIEF SHEET ════ */
body.v4 .sheet.aig{--ai-hairline:rgba(0,0,0,.075);--ai-ink-light:rgb(138,131,119);--ai-lilac-fg:rgb(94,59,140);--ai-lilac-bg:rgb(241,236,251);width:100%;max-width:620px;background:rgba(255,255,255,.97);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);border-radius:20px;box-shadow:0 8px 24px rgba(26,20,16,.10),0 32px 80px rgba(26,20,16,.18);overflow:hidden;margin:auto;max-height:92vh;overflow-y:auto}
body.v4 .aig .sheet-body{padding:20px 24px 6px}
body.v4 .aig .step-eye{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:880;letter-spacing:.12em;text-transform:uppercase;color:var(--cherry);margin-bottom:11px}
body.v4 .aig .step-eye .num{width:17px;height:17px;border-radius:50%;background:var(--cherry);color:white;display:grid;place-items:center;font-size:9.5px;font-weight:900;letter-spacing:0}
body.v4 .aig .aud-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:8px}
body.v4 .aig .aud{position:relative;border:2px solid var(--ai-hairline);border-radius:15px;background:white;padding:15px 16px;cursor:pointer;text-align:left;font-family:inherit;transition:border-color .14s,background .14s}
body.v4 .aig .aud.on{border-color:var(--cherry);background:linear-gradient(170deg,rgba(184,0,43,.045),transparent 60%)}
body.v4 .aig .aud .check{position:absolute;top:11px;right:11px;width:18px;height:18px;border-radius:50%;border:2px solid rgba(0,0,0,.18);background:white}
body.v4 .aig .aud.on .check{border-color:var(--cherry);background:var(--cherry);box-shadow:inset 0 0 0 3px white}
body.v4 .aig .aud-ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;margin-bottom:9px}
body.v4 .aig .aud-ic.dept-ic{background:var(--peach-bg);color:var(--peach-fg)}
body.v4 .aig .aud-ic.solo-ic{background:var(--sky-bg);color:var(--sky-fg)}
body.v4 .aig .aud-ic svg{width:16px;height:16px}
body.v4 .aig .aud-t{font-size:14px;font-weight:810;letter-spacing:-.012em;color:var(--ink)}
body.v4 .aig .aud-d{font-size:11.5px;font-weight:620;color:var(--ink-mid);line-height:1.5;margin-top:4px}
body.v4 .aig .target-pick{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0 4px}
body.v4 .aig .tp{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:760;padding:6px 13px 6px 8px;border-radius:var(--r-pill);border:1px solid var(--ai-hairline);background:white;color:var(--ink-mid);cursor:pointer;font-family:inherit}
body.v4 .aig .tp .sw{width:7px;height:7px;border-radius:50%;background:var(--c)}
body.v4 .aig .tp.on{border-color:var(--peach-fg);background:var(--peach-bg);color:var(--peach-fg)}
body.v4 .aig .sheet-sec{padding:15px 0 4px;border-top:1px solid var(--ai-hairline);margin-top:15px}
body.v4 .aig .brief-ta{width:100%;font-family:inherit;font-size:14px;font-weight:600;line-height:1.55;color:var(--ink);background:white;border:1px solid rgba(0,0,0,.13);border-radius:12px;padding:12px 15px;resize:none;min-height:84px}
body.v4 .aig .opt-row{display:flex;gap:12px;margin-top:4px}
body.v4 .aig .opt{flex:1}
body.v4 .aig .opt .f-lbl{margin-bottom:6px}
body.v4 .aig .opt-input{width:100%;font-family:inherit;font-size:13px;font-weight:650;border:1px solid rgba(0,0,0,.13);border-radius:11px;padding:9px 13px;color:var(--ink);background:white}
body.v4 .aig .deliver-row{display:flex;gap:8px;margin-top:4px;flex-wrap:wrap}
body.v4 .aig .dlv{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:760;padding:7px 14px;border-radius:var(--r-pill);border:1px solid var(--ai-hairline);background:white;color:var(--ink-mid);cursor:pointer;font-family:inherit}
body.v4 .aig .dlv svg{width:12px;height:12px}
body.v4 .aig .dlv.on{background:var(--ink);color:white;border-color:var(--ink)}
body.v4 .aig .runinfo{display:flex;gap:10px;align-items:flex-start;background:var(--ai-lilac-bg);border:1px solid rgba(94,59,140,.14);border-radius:12px;padding:11px 14px;margin-top:16px;font-size:11.5px;line-height:1.55;color:var(--ai-lilac-fg);font-weight:640}
body.v4 .aig .runinfo svg{flex:0 0 14px;width:14px;height:14px;margin-top:1px}

/* ── MOBILE: agents goals+briefs ── */
@media(max-width:768px){
  body.v4 .aig-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch}
  body.v4 .aig-tabs .tab{min-height:44px}
  /* goals: one column, full-bleed cards */
  body.v4 .aiteam .goal-grid{grid-template-columns:1fr;gap:14px}
  body.v4 .aiteam .goal-text{font-size:15px}
  body.v4 .aiteam .goal-fix,body.v4 .aiteam .btn-mini{min-height:44px;display:inline-flex;align-items:center}
  /* create-goal modal: stack the two panels, bottom-sheet feel */
  body.v4 .gmodal.aig{max-width:100%;border-radius:18px 18px 0 0;align-self:flex-end;max-height:92vh;overflow-y:auto;padding-bottom:env(safe-area-inset-bottom)}
  body.v4 .gmodal-split{grid-template-columns:1fr;min-height:0}
  body.v4 .gmodal-left{border-right:0;border-bottom:1px solid var(--ai-hairline)}
  body.v4 .aig .f-ta,body.v4 .aig .brief-ta,body.v4 .aig .opt-input,body.v4 .aig .pick-input{font-size:16px}
  body.v4 .aig .pick,body.v4 .aig .f-ex{min-height:44px;display:inline-flex;align-items:center}
  body.v4 .gmodal-foot{flex-wrap:wrap}
  body.v4 .gmodal-foot .meta{flex:1 1 100%;order:3;margin-top:6px}
  /* findings: filter bar wraps, search full width, stream cards edge-to-edge */
  body.v4 .aiteam .fbar{gap:6px}
  body.v4 .aiteam .fchip,body.v4 .aiteam .ftoggle,body.v4 .aiteam .fperson-sel{min-height:44px}
  body.v4 .aiteam .fsearch{margin-left:0;flex:1 1 100%;min-width:0}
  body.v4 .aiteam .fsearch-in{font-size:16px}
  body.v4 .aiteam .fsep{display:none}
  body.v4 .aiteam .fcard{padding:13px 14px 12px 18px}
  body.v4 .aiteam .fdate{flex:1 1 100%;margin-left:38px;order:5}
  body.v4 .aiteam .fcard-top{flex-wrap:wrap;row-gap:4px}
  /* thread: meta wraps, contributions get breathing room */
  body.v4 .aiteam .thread-head{flex-wrap:wrap;row-gap:6px}
  body.v4 .aiteam .thread-state{margin-left:0}
  body.v4 .aiteam .synth{margin:12px 10px 6px;padding:12px 13px}
  body.v4 .aiteam .contribs{padding:4px 10px 12px}
  /* set-brief sheet: bottom sheet, single-column audience cards */
  body.v4 .sheet.aig{max-width:100%;border-radius:18px 18px 0 0;align-self:flex-end;padding-bottom:env(safe-area-inset-bottom)}
  body.v4 .aig .aud-row{grid-template-columns:1fr}
  body.v4 .aig .aud{min-height:44px}
  body.v4 .aig .opt-row{flex-direction:column}
  body.v4 .aig .tp,body.v4 .aig .dlv{min-height:44px}
}

/* ── Fix: goals-datapoints ── */
/* Data-points picker inside the create/edit goal modal (.gmodal.aig):
   grouped checklist, live value per row, multi-select, selected total. */
body.v4 .aig .dp-picker{margin-top:9px;border:1px solid rgba(0,0,0,.1);border-radius:12px;background:var(--surface,white);max-height:240px;overflow-y:auto}
body.v4 .aig .dp-group{padding:2px 0}
body.v4 .aig .dp-group + .dp-group{border-top:1px solid var(--ai-hairline)}
body.v4 .aig .dp-group-h{font-size:9.5px;font-weight:850;letter-spacing:.11em;text-transform:uppercase;color:var(--ai-ink-light);padding:8px 13px 3px}
body.v4 .aig .dp-row{display:flex;align-items:center;gap:9px;padding:6px 13px;cursor:pointer;font-size:12.5px;font-weight:650;color:var(--ink)}
body.v4 .aig .dp-row:hover{background:rgba(0,0,0,.03)}
body.v4 .aig .dp-row.on{background:color-mix(in srgb,var(--ai-lilac-bg) 55%,transparent)}
body.v4 .aig .dp-cb{flex:0 0 auto;width:15px;height:15px;accent-color:var(--ai-lilac-fg);cursor:pointer}
body.v4 .aig .dp-lbl{flex:1;min-width:0;line-height:1.35}
body.v4 .aig .dp-val{flex:0 0 auto;font-size:11.5px;font-weight:780;color:var(--ai-ink-light);font-variant-numeric:tabular-nums}
body.v4 .aig .dp-row.on .dp-val{color:var(--ai-lilac-fg)}
body.v4 .aig .dp-total{margin-top:8px;font-size:12px;font-weight:700;color:var(--ink-mid)}
body.v4 .aig .dp-total b{font-weight:850;color:var(--ai-lilac-fg);font-variant-numeric:tabular-nums}
body.v4 .aig .dp-total-n{font-size:11px;font-weight:650;color:var(--ai-ink-light)}

/* ── MOBILE: goals-datapoints picker ── */
@media(max-width:768px){
  /* checklist rows hit 44px touch targets inside the bottom-sheet modal */
  body.v4 .aig .dp-row{min-height:44px;-webkit-tap-highlight-color:transparent}
  body.v4 .aig .dp-row:active{background:rgba(0,0,0,.06)}
  body.v4 .aig .dp-cb{width:18px;height:18px}
  body.v4 .aig .dp-picker{max-height:46vh;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
}
@media(max-width:480px){
  /* narrow phones: live value wraps under the label - no horizontal overflow */
  body.v4 .aig .dp-row{font-size:13px;flex-wrap:wrap;row-gap:2px}
  body.v4 .aig .dp-val{margin-left:27px;flex-basis:100%}
}

/* ── Fix: ccal tooltip+click ── */
/* 1) DARK tooltip - the frosted glass .ccal-tip was unreadable over the
   busy month grid. Restyle to the app's dark-tooltip precedent (.g-tip:
   near-black ink surface, light text, soft shadow, small radius), tokens
   only: in light mode --g-ink-1 IS #1d1d1f (the exact .g-tip surface) and
   --g-surface is white, so bg/text swap cleanly. Dark mode flips those
   tokens, so it gets its own block below: stays dark (--g-surface panel)
   with light text and a hairline border for contrast against the canvas. */
body.v4 .ccal-tip {
  background: var(--g-ink-1);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--g-ink-1);
  border-radius: var(--g-r-sm);
  box-shadow: var(--g-sh-2);
}
body.v4 .ccal-tip-k { color: var(--g-surface); opacity: 0.62; }
body.v4 .ccal-tip-v { color: var(--g-surface); }
/* Dark mode: --g-ink-1 flips to near-white, so re-pin the tooltip to the
   dark panel surface with light text + visible hairline. */
body.v4.dark .ccal-tip {
  background: var(--g-surface);
  border-color: var(--g-border);
}
body.v4.dark .ccal-tip-k { color: var(--g-ink-1); opacity: 0.62; }
body.v4.dark .ccal-tip-v { color: var(--g-ink-1); }

/* 2) Clickable chips - entries with a nav target (shows/clips/social →
   episode surface, newsletter → Analytics) get a pointer cursor and a
   hover affordance (slight lift + ring). Mobile is unaffected: <768px
   chips are inert dots (pointer-events:none in the MOBILE: calendar
   block), and navigation happens from the day sheet instead. */
body.v4 .ccal-chip.is-link { cursor: pointer; }
body.v4 .ccal-chip.is-link:hover {
  filter: brightness(0.94);
  box-shadow: 0 0 0 1px var(--g-border);
}
body.v4 .ccal-chip.is-link:active { filter: brightness(0.9); }

/* 3) Mobile day sheet - tappable rows. Same nav as desktop chips; the
   chevron signals "this row goes somewhere". 44px touch floor per the
   mobile-developer skill; :active feedback instead of hover. */
@media (max-width: 767.98px) {
  body.v4 .ccal-sheet-row.is-link {
    cursor: pointer;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
  }
  body.v4 .ccal-sheet-row.is-link:active { background: var(--g-blue-soft); }
  body.v4 .ccal-sheet-chev {
    margin-left: auto;
    align-self: center;
    flex-shrink: 0;
    font-size: 18px;
    line-height: 1;
    color: var(--g-ink-4);
    padding-left: 8px;
  }
}

/* ── NLB2 ── */
/* Sponsor Newsletter builder ROUND 2 (Peter's feedback). The side preview
   is gone - the canvas IS the email: a 600px email card with the compiled
   hero/footer rendered non-editable and the rows compiled by the SAME
   shared compiler between them; builder chrome overlays on hover.
   Original .nlb block above retained for shared chrome (topbar, picker
   base, modal inputs); rules below override/extend it. Tokens only. */

/* PILL FIX (round 2 item 2) - the recurring --c-* saturated-token stomp:
   app.css's legacy ":root status" block redefines --c-sky/--c-lilac/
   --c-peach as SATURATED foregrounds, so the original .k-* pills paired
   saturated bg with dark --on-* text → unreadable. Re-pinned to the
   R3-GEN-5 pattern (release chips): light = never-stomped --c-*-bg
   pastels + dark --on-* text; dark = tokens.css body.dark dark-pastel
   --c-* (element-level cascade beats :root) + light --on-* text.
   Resolved proof - light: #eff6ff/#0c447c (sky), #f0eeff/#3c3489 (lilac),
   #fff7ed/#8a4b00 (peach); dark: #13314f/#9ccbff, #2a2752/#c5c0ff,
   #3d2a1c/#f2d479 - all high-contrast pairs. */
.nlb .k-text{background:var(--c-sky-bg);color:var(--on-sky)}
.nlb .k-content{background:var(--c-lilac-bg);color:var(--on-lilac)}
.nlb .k-image{background:var(--c-peach-bg);color:var(--on-amber)}
body.dark .nlb .k-text{background:var(--c-sky);color:var(--on-sky)}
body.dark .nlb .k-content{background:var(--c-lilac);color:var(--on-lilac)}
body.dark .nlb .k-image{background:var(--c-peach);color:var(--on-amber)}

/* subject + preview-text fields (item 10) */
.nlb .nlb-meta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:14px;background:var(--paper);backdrop-filter:var(--blur);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh);padding:14px 18px;margin-bottom:20px}
.nlb .nlb-meta-f{display:flex;flex-direction:column;gap:6px;min-width:0}
.nlb .nlb-meta-l{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3)}
.nlb .nlb-meta-hint{font-weight:600;text-transform:none;letter-spacing:0;color:var(--ink-4)}

/* status - autosave indicator (item 11) */
.nlb .nlb-saved{color:var(--good);font-weight:700}
.nlb .nlb-saving{color:var(--ink-3)}

/* row/panel summary in the canvas heading (item 11) */
.nlb .nlb-summary{margin-left:auto;font-weight:600;text-transform:none;letter-spacing:0;color:var(--ink-4);font-variant-numeric:tabular-nums}

/* THE EMAIL CANVAS (item 1) - a 600px email card; the compiled email's own
   white card + cherry hero + #faf8f4 paper are EMAIL-side fixed colours
   (the compiler's palette, light-only by design: emails don't dark-mode
   with the app). The wrap supplies the email's paper backdrop. */
.nlb .nlb-emailwrap{display:flex;justify-content:center;background:var(--canvas);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 16px 30px;box-shadow:var(--sh)}
.nlb .nlb-email{width:600px;max-width:100%;background:var(--surface);border-radius:14px;box-shadow:var(--sh-2);display:flex;flex-direction:column}
/* the compiled hero/footer/row trs carry their own inline email styles;
   the wrapping tables just need full width (set inline). Email content is
   compiled with light-mode colours - keep the card white even in dark
   mode so the canvas matches the inbox. */
.nlb .nlb-email,.nlb .nlb-email table{color-scheme:light}
body.dark .nlb .nlb-email{background:var(--on-accent)}

/* non-editable compiled hero/footer */
.nlb .nlb-chrome{position:relative}
.nlb .nlb-chrome-tag{position:absolute;top:8px;right:10px;font-size:8.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--on-accent);background:rgba(0,0,0,.28);border-radius:var(--r-pill);padding:3px 9px;opacity:0;transition:opacity .14s;pointer-events:none}
.nlb .nlb-chrome:hover .nlb-chrome-tag{opacity:1}
.nlb .nlb-chrome:last-child .nlb-chrome-tag{color:var(--ink-3);background:var(--rule)}

/* a builder row = the compiled email row + hover chrome */
.nlb .nlb-email .row{position:relative}
.nlb .nlb-email .row:hover{outline:1.5px dashed var(--blue);outline-offset:-1px}
.nlb .nlb-email .row.nlb-dragging{opacity:.45}
.nlb .nlb-email .row.nlb-droprow{outline:2px solid var(--cherry);outline-offset:-2px}
.nlb .row-email{min-width:0}
/* row toolbar - original .row-tools grammar, plus drag handle + duplicate */
.nlb .nlb-email .row-tools{top:6px;right:10px}
.nlb .rt-drag{cursor:grab;color:var(--ink-4);font-size:12px;padding:0 4px;user-select:none}
.nlb .rt-drag:active{cursor:grabbing}

/* panel overlay - sits over the compiled columns; lets clicks through
   except on the bars/buttons */
.nlb .row-overlay{position:absolute;inset:0;display:grid;gap:0;pointer-events:none;z-index:3}
.nlb .row-overlay.row-wide{grid-template-columns:1fr}
.nlb .row-overlay.row-2{grid-template-columns:1fr 1fr}
.nlb .row-overlay.row-3{grid-template-columns:repeat(3,1fr)}
.nlb .row-overlay.row-4{grid-template-columns:repeat(4,1fr)}
.nlb .ov-slot{position:relative;min-width:0}
.nlb .ov-bar{position:absolute;top:-12px;left:10px;display:flex;align-items:center;gap:4px;opacity:0;transform:translateY(3px);transition:opacity .14s,transform .14s;pointer-events:none}
.nlb .nlb-email .row:hover .ov-bar{opacity:1;transform:none;pointer-events:auto}
.nlb .ov-bar .p-kind{box-shadow:var(--sh);white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis}
.nlb .ov-acts{display:inline-flex;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:1px 3px;box-shadow:var(--sh)}
.nlb .ov-acts .p-act{width:20px;height:20px;font-size:11px;color:var(--ink-3)}
.nlb .ov-textable{pointer-events:auto}

/* empty slots render INSIDE the compiled row's cells (same geometry as
   the email columns) - full-width clickable placeholders */
.nlb .row-email .slot-empty{width:100%;min-height:84px;border-radius:var(--r);background:var(--surface-2)}

/* add-row sits inside the email card between rows and footer */
.nlb .nlb-email .addrow{align-self:center;margin:14px 0}

/* INLINE RICH TEXT editor (item 4) */
.nlb-rt{position:relative;margin-top:18px}
.nlb-rt-bar{position:absolute;top:-34px;left:0;display:flex;align-items:center;gap:2px;background:var(--hero-1);border-radius:9px;padding:3px 4px;box-shadow:var(--sh-2);z-index:6}
.nlb-rt-bar button{min-width:26px;height:26px;border:0;border-radius:7px;background:transparent;color:var(--on-accent);font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;display:grid;place-items:center;padding:0 6px}
.nlb-rt-bar button:hover{background:rgba(255,255,255,.16)}
.nlb-rt-bar .nlb-rt-done{background:var(--cherry);font-size:11px;font-weight:800;padding:0 10px}
.nlb-rt-spacer{width:5px}
.nlb-rt-area{min-height:54px;outline:2px solid var(--blue);outline-offset:2px;border-radius:6px;font-size:12px;line-height:1.65;color:color-mix(in srgb,var(--hero-1) 86%,white);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;padding:2px}
.nlb-rt-area:focus{outline-color:var(--cherry)}
.nlb-rt-area p{margin:0 0 8px}
.nlb-rt-area h2{margin:14px 0 6px;font-size:15px;font-weight:800;letter-spacing:-.015em;color:var(--hero-1)}
.nlb-rt-area a{color:var(--cherry);font-weight:700}

/* PANEL PICKER v2 (item 6) - search + category chips + visual cards */
.nlb .pk-filters{display:flex;flex-direction:column;gap:10px;padding:14px 20px 4px}
.nlb .pk-search{width:100%;border:1px solid var(--line);border-radius:var(--r-pill);padding:9px 16px;font-size:13px;color:var(--ink-1);background:var(--surface-2);font-family:inherit;box-sizing:border-box}
.nlb .pk-search:focus{outline:2px solid var(--blue);outline-offset:-1px}
.nlb .pk-chips{display:flex;gap:6px;flex-wrap:wrap}
.nlb .pk-chip{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-pill);padding:5px 13px;font-size:11.5px;font-weight:700;color:var(--ink-3);cursor:pointer;font-family:inherit}
.nlb .pk-chip:hover{border-color:var(--ink-3);color:var(--ink-1)}
.nlb .pk-chip.on{background:var(--hero-1);border-color:var(--hero-1);color:var(--on-accent)}
.nlb .pk-none{grid-column:1/-1;padding:22px 0;text-align:center;font-size:12.5px;color:var(--ink-4);font-weight:600}
/* mini visual hints on picker cards */
.nlb .pkv{display:flex;align-items:center;justify-content:center;gap:3px;height:34px;border-radius:8px;background:var(--surface-2);border:1px solid var(--rule);margin-bottom:5px;overflow:hidden;font-size:11px;font-weight:800;color:var(--ink-3)}
.nlb .pkv-num{font-style:normal;font-size:13px;font-weight:800;color:var(--ink-1);font-variant-numeric:tabular-nums}
.nlb .pkv-up{font-style:normal;font-size:9px;color:var(--good)}
.nlb .pkv-rows{flex-direction:column;align-items:stretch;gap:3px;padding:6px 10px}
.nlb .pkv-rows i{height:4px;border-radius:2px;background:var(--rule);display:block}
.nlb .pkv-rows i:first-child{background:var(--cherry-bg)}
.nlb .pkv-stack{flex-direction:row;align-items:stretch;gap:0;padding:10px 10px}
.nlb .pkv-stack i{display:block;border-radius:0;background:var(--cherry);opacity:.9}
.nlb .pkv-stack i:nth-child(2){opacity:.65}
.nlb .pkv-stack i:nth-child(3){opacity:.4}
.nlb .pkv-stack i:nth-child(4){opacity:.2}
.nlb .pkv-stack i:first-child{border-radius:3px 0 0 3px}
.nlb .pkv-stack i:last-child{border-radius:0 3px 3px 0}
.nlb .pkv-bars{flex-direction:column;align-items:flex-start;gap:3px;padding:7px 10px}
.nlb .pkv-bars i{height:5px;border-radius:3px;background:var(--lilac-bg);display:block}
.nlb .pkv-bars i:first-child{background:var(--cherry-bg)}
.nlb .pkv-clip{color:var(--cherry);font-size:13px}
.nlb .pkv-av{width:auto;color:var(--on-accent)}
.nlb .pkv-av{background:var(--cherry);border-color:var(--cherry)}
.nlb .pkv-mile{background:var(--hero-1);border-color:var(--hero-1);color:var(--warn-fg);font-size:13px}
.nlb .pkv-slots{gap:4px;padding:0 8px}
.nlb .pkv-slots i{width:16px;height:14px;border-radius:3px;background:var(--rule);display:block}
.nlb .pkv-slots i.o{background:transparent;border:1.5px dashed var(--good-2)}
.nlb .pkv-logos{gap:5px}
.nlb .pkv-logos i{width:18px;height:10px;border-radius:2px;background:var(--rule);display:block}
.nlb .pkv-cta{background:var(--cherry);border-color:var(--cherry);color:var(--on-accent);font-size:10px;border-radius:999px;height:24px;align-self:center;padding:0 12px;margin:5px auto;display:inline-flex;width:auto}
.nlb .pk-card .pkv-cta{margin-bottom:5px}
.nlb .pkv-div{position:relative}
.nlb .pkv-div::after{content:'';position:absolute;left:12px;right:12px;top:50%;height:1.5px;background:var(--line-2)}
.nlb .pkv-quote{font-size:14px;color:var(--cherry)}
.nlb .pkv-img{font-size:14px;color:var(--on-amber);background:var(--c-peach-bg)}
.nlb .pkv-txt{font-size:13px;color:var(--on-sky);background:var(--c-sky-bg)}

/* PREVIEW POPUP (item 9) - Desktop / Mobile toggle */
.nlb-pvpop{max-width:720px;width:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-modal);overflow:hidden;padding:0;display:flex;flex-direction:column;max-height:calc(100vh - 60px)}
.nlb-pvpop-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.nlb-pvpop-sub{flex:1;min-width:0;font-size:13.5px;font-weight:800;letter-spacing:-.01em;color:var(--ink-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nlb-pvpop-toggle{display:inline-flex;background:var(--canvas);border-radius:var(--r-pill);padding:2px}
.nlb-pvpop-toggle button{border:0;background:none;font-size:11.5px;font-weight:700;color:var(--ink-3);padding:6px 14px;border-radius:var(--r-pill);cursor:pointer;font-family:inherit}
.nlb-pvpop-toggle button.on{background:var(--surface);color:var(--ink-1);box-shadow:var(--sh)}
.nlb-pvpop-pre{padding:8px 18px;border-bottom:1px solid var(--line);font-size:11.5px;color:var(--ink-3);background:var(--surface-2)}
.nlb-pvpop-pre b{color:var(--ink-2)}
.nlb-pvpop-stage{flex:1;min-height:0;overflow:auto;background:var(--canvas);display:flex;justify-content:center;padding:18px 12px}
.nlb-pvpop-frame{border:0;background:transparent;height:72vh;display:block}
.nlb-pvpop-stage[data-pv-stage="desktop"] .nlb-pvpop-frame{width:640px;max-width:100%}
.nlb-pvpop-stage[data-pv-stage="mobile"] .nlb-pvpop-frame{width:380px;border:1px solid var(--line-2);border-radius:22px;box-shadow:var(--sh-2)}

/* Builder | Past campaigns toggle on the sponsor tab (item 8) */
.nlb-viewtabs{display:inline-flex;background:var(--paper);backdrop-filter:var(--blur);border:1px solid var(--border);border-radius:var(--r-pill);padding:3px;margin-bottom:16px;box-shadow:var(--sh)}
.nlb-viewtab{border:0;background:none;font-size:12.5px;font-weight:700;color:var(--ink-3);padding:8px 18px;border-radius:var(--r-pill);cursor:pointer;font-family:inherit}
.nlb-viewtab.on{background:var(--hero-1);color:var(--on-accent)}

/* ── MOBILE: newsletter-builder round 2 ── */
@media (max-width: 767.98px){
  /* subject/preview stack */
  .nlb .nlb-meta{grid-template-columns:1fr;gap:10px;padding:12px 14px}
  /* email canvas hugs the phone width; overlay grids stay as the email's
     own table columns do (the email is fixed 600px-grammar but fluid) */
  .nlb .nlb-emailwrap{padding:14px 6px 18px}
  .nlb .nlb-email{width:100%}
  /* hover doesn't exist - row toolbar + panel bars persistently visible */
  .nlb .nlb-email .row-tools{position:static;opacity:1;transform:none;pointer-events:auto;justify-content:flex-end;margin:6px 8px 0;box-shadow:none;border-radius:var(--r);flex-wrap:wrap}
  .nlb .ov-bar{opacity:1;transform:none;pointer-events:auto;top:2px}
  /* 44px touch targets on overlay actions + drag handle */
  .nlb .ov-acts .p-act{width:32px;height:32px;-webkit-tap-highlight-color:transparent}
  .nlb .rt-drag{padding:8px 10px}
  .nlb .rt-icon{width:36px;height:36px}
  .nlb .rt-size{min-height:36px;padding:6px 12px}
  .nlb .nlb-btn{min-height:44px}
  .nlb .tb-month button{width:36px;height:36px}
  .nlb .nlb-topbar{gap:10px;padding:12px 14px}
  .nlb .tb-status{flex-basis:100%;order:5}
  /* summary drops under the heading */
  .nlb .col-h{flex-wrap:wrap}
  .nlb .nlb-summary{flex-basis:100%;margin-left:0}
  /* picker → bottom sheet; chips scroll horizontally */
  .nlb .pk-filters{padding:12px 14px 2px}
  .nlb .pk-chips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
  .nlb .pk-chip{white-space:nowrap;min-height:36px}
  .nlb .pk-search{font-size:16px;min-height:44px}
  /* inline editor toolbar wraps above without clipping */
  .nlb-rt-bar{flex-wrap:wrap;top:-36px}
  .nlb-rt-bar button{min-width:34px;height:34px}
  .nlb-rt-area{font-size:16px}
  /* preview popup → full-bleed sheet; mobile frame fits the phone */
  .nlb-pvpop{max-width:none;border-radius:var(--r-lg) var(--r-lg) 0 0;align-self:flex-end;margin:0;max-height:92vh}
  .nlb-pvpop-head{flex-wrap:wrap}
  .nlb-pvpop-toggle button{min-height:38px}
  .nlb-pvpop-stage[data-pv-stage="mobile"] .nlb-pvpop-frame{width:100%;max-width:380px}
  .nlb-pvpop-frame{height:64vh}
  /* view tabs full width */
  .nlb-viewtabs{display:flex;width:100%}
  .nlb-viewtab{flex:1;min-height:42px}
  /* meta inputs - 16px stops iOS zoom-on-focus (inherits .nlb-input rule) */
  .nlb .nlb-meta .nlb-input{font-size:16px}
}

/* ── DR2: design ── */
/* Design-consistency sweep 2 (2026-06-05) - dark-mode parity for the
   goals+briefs wave (the prototype shipped light-only; every other
   .aiteam surface already has a body.v4.dark override - these match
   the dept-card dark treatment at 31399), stomp-proofing the two
   remaining --c-* pill pairs (keith kp2), and the house dark
   active-segment ring on the two new NLB toggles. Tokens + the same
   rgba dark values the existing .aiteam/.seg dark blocks use. */

/* 1 ── GOALS TAB dark: cards flip to the dept-card dark glass */
body.v4.dark .aiteam .goal{background:rgba(28,28,30,.65);border-color:rgba(255,255,255,.08)}
body.v4.dark .aiteam .goal.is-manual .goal-status{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12)}
body.v4.dark .aiteam .bar{background:rgba(255,255,255,.12)}
body.v4.dark .aiteam .bar-tick{background:var(--ink);opacity:.7}
body.v4.dark .aiteam .goal-manual-box{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.16)}
body.v4.dark .aiteam .btn-mini.solid{background:var(--black);color:rgba(255,255,255,1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
body.v4.dark .aiteam .btn-mini.ghost{background:rgba(255,255,255,.06);color:var(--ink);border-color:rgba(255,255,255,.18)}
body.v4.dark .aiteam .src-chip.is-manual-chip{--sc-bg:rgba(255,255,255,.07);--sc-fg:var(--ink-3)}

/* 2 ── FINDINGS LIBRARY dark: bar, chips, cards, thread, synthesis */
body.v4.dark .aiteam .fbar,
body.v4.dark .aiteam .fcard{background:rgba(28,28,30,.65);border-color:rgba(255,255,255,.08)}
body.v4.dark .aiteam .fchip,
body.v4.dark .aiteam .fperson-sel,
body.v4.dark .aiteam .fsearch{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:var(--ink-2)}
body.v4.dark .aiteam .fchip.on{background:var(--black);border-color:rgba(255,255,255,.2);color:rgba(255,255,255,1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
body.v4.dark .aiteam .fsep{background:rgba(255,255,255,.12)}
body.v4.dark .aiteam .ftoggle{color:var(--ink-2)}
body.v4.dark .aiteam .ftoggle.off .sw2{background:rgba(255,255,255,.22)}
body.v4.dark .aiteam .thread{background:rgba(28,28,30,.72);border-color:rgba(255,82,109,.28)}
body.v4.dark .aiteam .thread-head{background:linear-gradient(135deg,rgba(255,82,109,.1),transparent 65%);border-bottom-color:rgba(255,255,255,.08)}
body.v4.dark .aiteam .synth{background:rgba(242,142,80,.1);border-color:rgba(242,142,80,.26)}
body.v4.dark .aiteam .contrib + .contrib{border-top-color:rgba(255,255,255,.08)}
body.v4.dark .aiteam .contrib .rail .av{border-color:rgba(255,255,255,.12)}
body.v4.dark .aiteam .fbrief-tag{background:rgba(255,82,109,.12);border-color:rgba(255,82,109,.3)}

/* 3 ── CREATE-GOAL MODAL + SET-BRIEF SHEET dark (the dossier precedent:
       flip the surface, re-pin the locally-pinned light tokens) */
body.v4.dark .gmodal.aig,
body.v4.dark .sheet.aig{
  --ai-hairline:rgba(255,255,255,.1);
  --ai-ink-light:var(--ink-3);
  --ai-lilac-bg:rgba(201,186,234,.14);
  --ai-lilac-fg:var(--on-lilac);
  background:rgba(36,31,27,.97);
  box-shadow:0 8px 24px rgba(0,0,0,.35),0 32px 80px rgba(0,0,0,.5);
}
body.v4.dark .gmodal-x{background:rgba(255,255,255,.06);color:var(--ink-3)}
body.v4.dark .gmodal-foot{background:rgba(255,255,255,.025)}
body.v4.dark .gmodal-right{background:linear-gradient(165deg,rgba(201,186,234,.1),transparent 55%)}
body.v4.dark .aig .f-ta,
body.v4.dark .aig .brief-ta,
body.v4.dark .aig .opt-input,
body.v4.dark .aig .pick-input{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:var(--ink)}
body.v4.dark .aig .f-ex{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.1)}
body.v4.dark .aig .f-ex:hover{background:rgba(255,255,255,.08)}
body.v4.dark .aig .irow{border-bottom-color:rgba(201,186,234,.16)}
body.v4.dark .aig .interp-head .pulse{box-shadow:0 0 0 3px rgba(201,186,234,.2)}
body.v4.dark .aig .pick{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:var(--ink-2)}
body.v4.dark .aig .pick.on{background:var(--ai-lilac-fg);color:var(--c-lilac);border-color:var(--ai-lilac-fg)}
body.v4.dark .aig .aud{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
body.v4.dark .aig .aud.on{border-color:var(--cherry);background:linear-gradient(170deg,rgba(255,82,109,.09),transparent 60%)}
body.v4.dark .aig .aud .check{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)}
body.v4.dark .aig .aud.on .check{background:var(--cherry);border-color:var(--cherry);box-shadow:inset 0 0 0 3px rgba(36,31,27,.97)}
body.v4.dark .aig .tp{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:var(--ink-2)}
body.v4.dark .aig .tp.on{border-color:var(--peach-fg);background:var(--peach-bg);color:var(--peach-fg)}
body.v4.dark .aig .dlv{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:var(--ink-2)}
body.v4.dark .aig .dlv.on{background:var(--black);color:rgba(255,255,255,1);border-color:rgba(255,255,255,.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
body.v4.dark .aig .runinfo{border-color:rgba(201,186,234,.2)}
body.v4.dark .aig .dp-picker{border-color:rgba(255,255,255,.14)}
body.v4.dark .aig .dp-group + .dp-group{border-top-color:rgba(255,255,255,.1)}
body.v4.dark .aig .dp-row:hover{background:rgba(255,255,255,.05)}
body.v4.dark .aig .dp-row.on{background:rgba(201,186,234,.1)}

/* 4 ── keith kp2 pills: stomp-proof pairing (the NLB2 .k-* fix pattern -
       light = never-stomped --c-*-bg pastel + dark --on-* text; dark =
       the element-level dark --c-* + light --on-* text). Currently only
       reachable from the panel-table renderer, fixed before first use. */
body.v4 .kc-app .kp2-pill-mint{background:var(--c-mint-bg);color:var(--on-mint)}
body.v4 .kc-app .kp2-pill-lilac{background:var(--c-lilac-bg);color:var(--on-lilac)}
body.v4.dark .kc-app .kp2-pill-mint{background:var(--c-mint);color:var(--on-mint)}
body.v4.dark .kc-app .kp2-pill-lilac{background:var(--c-lilac);color:var(--on-lilac)}

/* 5 ── NLB toggles in dark: --hero-1 is mode-fixed near-black, so the
       active segment needs the house dark inset ring (.seg button.on
       dark precedent at 26070) to read against the dark container. */
body.dark .nlb-viewtab.on{box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
body.dark .nlb .pk-chip.on{box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
body.dark .nlb .pkv-mile{box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}

/* 6 ── velocity source chip: retire the warm-beige --neutral-bg one-off -
       the System chip joins the app neutral-pill family (same look as
       .goal.is-manual / .src-chip.is-manual-chip neutrals). */
body.v4 .vr-src.system{background:rgba(0,0,0,.05);color:var(--g-ink-3)}

/* ── Wave RECS-IMPACT ── */
/* AI Team → Recommendations: goal-impact triage + AI Meetings view.
   Spec: _DESIGN_RECS_GOAL_IMPACT.html - values lifted verbatim, var()
   names mapped to live tokens. Class names are the mockup's class names,
   prefix-scoped under .velocity-ag.recs-impact (the live tab scope).

   Token plumbing first: the body.v4 .velocity-ag local token block
   (Wave ~219) shadows the pastel pairs + --blue/--lilac with LIGHT-only
   values, so inside this tab they never flipped in dark. `inherit`
   re-points them at the tokens.css pipeline (identical values in light,
   correct dark pastels in dark - the prototype's stated behaviour:
   "tokens flipped per body.dark in tokens.css; nothing restyled by
   hand"). --neutral-bg is re-scoped to the prototype's value (the
   global token is the legacy beige #eee5cc, a different thing). */
body.v4 .velocity-ag.recs-impact{
  --neutral-bg:rgba(0,0,0,.05);
  --blue:inherit; --lilac:inherit;
  --c-lilac:inherit; --on-lilac:inherit;
  --c-mint:inherit;  --on-mint:inherit;
  --c-sky:inherit;   --on-sky:inherit;
  --c-peach:inherit; --on-amber:inherit;
  --c-butter:inherit; --on-butter:inherit;
  --c-rose:inherit;  --on-rose:inherit;
  --c-sage:inherit;  --on-sage:inherit;
}
body.v4.dark .velocity-ag.recs-impact{
  --neutral-bg:rgba(255,255,255,.07);
}

/* ── mode bar (Recommendations | AI Meetings) ── */
body.v4 .velocity-ag.recs-impact .vel-modebar{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:14px; flex-wrap:wrap; }
body.v4 .velocity-ag.recs-impact .vth-title{ font-size:18px; font-weight:600; letter-spacing:-.014em; color:var(--g-ink-1); line-height:1.2; }
body.v4 .velocity-ag.recs-impact .vth-sub{ font-size:12.5px; color:var(--g-ink-3); margin-top:3px; max-width:600px; line-height:1.5; }
body.v4 .velocity-ag.recs-impact .vth-sub .digest-hot{ color:var(--cherry); font-weight:600; }
body.v4.dark .velocity-ag.recs-impact .vth-title{ color:var(--ink-1); }
body.v4.dark .velocity-ag.recs-impact .vth-sub{ color:var(--ink-3); }
body.v4 .velocity-ag.recs-impact .vel-modebar-acts{ display:flex; align-items:center; gap:10px; flex-shrink:0; flex-wrap:wrap; }
body.v4 .velocity-ag.recs-impact .mode-seg{ display:flex; gap:4px; padding:4px; background:rgba(0,0,0,.05); border-radius:var(--r-pill); flex-shrink:0; }
body.v4.dark .velocity-ag.recs-impact .mode-seg{ background:rgba(255,255,255,.06); }
body.v4 .velocity-ag.recs-impact .mode-seg button{ border:none; background:none; cursor:pointer; font-family:var(--fd); padding:6px 14px; border-radius:var(--r-pill); font-size:12px; font-weight:600; color:var(--g-ink-3); display:inline-flex; align-items:center; gap:6px; }
body.v4 .velocity-ag.recs-impact .mode-seg button.on{ background:var(--surface); color:var(--g-ink-1); box-shadow:0 1px 3px rgba(0,0,0,.08); }
body.v4.dark .velocity-ag.recs-impact .mode-seg button{ color:var(--ink-3); }
body.v4.dark .velocity-ag.recs-impact .mode-seg button.on{ color:var(--ink-1); }

/* ── triage strip ── */
body.v4 .velocity-ag.recs-impact .triage-strip{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; background:var(--paper-3); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); border:1px solid var(--border); border-radius:var(--r-lg); padding:12px 18px; margin-bottom:16px; box-shadow:var(--sh); }
body.v4 .velocity-ag.recs-impact .ts-stat{ display:flex; align-items:baseline; gap:7px; }
body.v4 .velocity-ag.recs-impact .ts-stat .n{ font-size:20px; font-weight:650; letter-spacing:-.02em; color:var(--g-ink-1); font-variant-numeric:tabular-nums; }
body.v4 .velocity-ag.recs-impact .ts-stat .l{ font-size:11.5px; color:var(--g-ink-3); font-weight:500; }
body.v4 .velocity-ag.recs-impact .ts-stat .n.hot{ color:var(--cherry); }
body.v4 .velocity-ag.recs-impact .ts-stat .n.good{ color:var(--good); }
body.v4.dark .velocity-ag.recs-impact .ts-stat .n{ color:var(--ink-1); }
body.v4.dark .velocity-ag.recs-impact .ts-stat .l{ color:var(--ink-3); }
body.v4 .velocity-ag.recs-impact .ts-div{ width:1px; height:24px; background:var(--rule); }
body.v4 .velocity-ag.recs-impact .ts-progress{ margin-left:auto; display:flex; align-items:center; gap:10px; min-width:200px; }
body.v4 .velocity-ag.recs-impact .ts-progress .bar{ flex:1; height:5px; border-radius:var(--r-pill); background:var(--rule); overflow:hidden; min-width:110px; }
body.v4 .velocity-ag.recs-impact .ts-progress .bar i{ display:block; height:100%; border-radius:var(--r-pill); background:linear-gradient(90deg, var(--good-2), var(--good)); }
body.v4 .velocity-ag.recs-impact .ts-progress .pl{ font-size:11.5px; color:var(--g-ink-3); font-weight:600; white-space:nowrap; }
body.v4.dark .velocity-ag.recs-impact .ts-progress .pl{ color:var(--ink-3); }
body.v4 .velocity-ag.recs-impact .ts-progress .pl-good{ color:var(--good); }

/* ── goal legend ── */
body.v4 .velocity-ag.recs-impact .goal-legend{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:0 2px 14px; }
body.v4 .velocity-ag.recs-impact .goal-legend .gl-l{ font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--g-ink-4); }
body.v4 .velocity-ag.recs-impact .gl-item{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color:var(--g-ink-2); background:var(--paper-2); border:1px solid var(--border-soft); border-radius:var(--r-pill); padding:3px 11px 3px 7px; backdrop-filter:var(--blur); }
body.v4.dark .velocity-ag.recs-impact .gl-item{ color:var(--ink-2); }
body.v4 .velocity-ag.recs-impact .gl-dot{ width:9px; height:9px; border-radius:3px; flex-shrink:0; }
body.v4 .velocity-ag.recs-impact .gl-dot.rev{ background:var(--good); }
body.v4 .velocity-ag.recs-impact .gl-dot.dl{ background:var(--blue); }
body.v4 .velocity-ag.recs-impact .gl-dot.rank{ background:var(--lilac); }
body.v4 .velocity-ag.recs-impact .gl-item .gl-w{ color:var(--g-ink-4); font-weight:500; font-size:10.5px; }

/* ── score bands ── */
body.v4 .velocity-ag.recs-impact .band-h{ display:flex; align-items:center; gap:10px; margin:20px 2px 8px; }
body.v4 .velocity-ag.recs-impact .band-h:first-of-type{ margin-top:4px; }
body.v4 .velocity-ag.recs-impact .band-h .bh-t{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
body.v4 .velocity-ag.recs-impact .band-h .bh-c{ font-size:11.5px; font-weight:600; color:var(--ink-4); }
body.v4 .velocity-ag.recs-impact .band-h .bh-line{ flex:1; height:1px; background:var(--rule); }
body.v4 .velocity-ag.recs-impact .band-h .bh-bulk{ font-size:11.5px; font-weight:600; color:var(--cherry); background:none; border:none; cursor:pointer; font-family:var(--fd); }
body.v4 .velocity-ag.recs-impact .band-h.hot .bh-t{ color:var(--cherry); }

/* ── recommendation row: score | content | per-goal impact | actions ── */
body.v4 .velocity-ag.recs-impact .rrow{ display:grid; grid-template-columns:54px minmax(0,1fr) 96px auto; gap:14px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:10px 14px 10px 10px; margin-bottom:6px; box-shadow:0 1px 2px rgba(0,0,0,.03); transition:box-shadow .15s, transform .15s; position:relative; }
body.v4 .velocity-ag.recs-impact .rrow:hover{ box-shadow:0 6px 20px rgba(0,0,0,.06); transform:translateY(-1px); }
body.v4 .velocity-ag.recs-impact .rrow.is-accepted{ border-left:3px solid var(--good); padding-left:8px; }
body.v4 .velocity-ag.recs-impact .rrow.flash{ box-shadow:0 0 0 2px var(--cherry), 0 6px 20px rgba(0,0,0,.06); }

/* score chip */
body.v4 .velocity-ag.recs-impact .score{ width:54px; height:46px; border-radius:10px; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; border:none; font-family:var(--fd); gap:1px; padding:0; }
body.v4 .velocity-ag.recs-impact .score .sn{ font-size:17px; font-weight:700; letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums; }
body.v4 .velocity-ag.recs-impact .score .sg{ font-size:8.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.75; line-height:1; }
body.v4 .velocity-ag.recs-impact .score.s-high{ background:var(--c-mint); color:var(--on-mint); }
body.v4 .velocity-ag.recs-impact .score.s-mid{ background:var(--c-butter); color:var(--on-butter); }
body.v4 .velocity-ag.recs-impact .score.s-low{ background:var(--neutral-bg); color:var(--g-ink-3); }
body.v4 .velocity-ag.recs-impact .score.s-neg{ background:var(--c-rose); color:var(--on-rose); }
body.v4 .velocity-ag.recs-impact .score.s-none{ background:transparent; border:1.5px dashed var(--line2); color:var(--g-ink-4); }
body.v4 .velocity-ag.recs-impact .score.s-none .sn{ font-size:13px; font-weight:600; }

/* content */
body.v4 .velocity-ag.recs-impact .rr-main{ min-width:0; }
body.v4 .velocity-ag.recs-impact .rr-title{ font-size:13.5px; font-weight:600; color:var(--ink-1); letter-spacing:-.005em; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.v4 .velocity-ag.recs-impact .rr-meta{ display:flex; align-items:center; gap:8px; margin-top:3px; flex-wrap:wrap; }
body.v4 .velocity-ag.recs-impact .rr-chip{ display:inline-block; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; border-radius:var(--r-pill); padding:2px 8px; }
body.v4 .velocity-ag.recs-impact .rr-chip.dept{ background:var(--lilac-bg); color:var(--lilac); }
body.v4 .velocity-ag.recs-impact .rr-chip.system{ background:var(--neutral-bg); color:var(--g-ink-3); }
body.v4 .velocity-ag.recs-impact .rr-chip.cat-marketing{ background:var(--c-sky); color:var(--on-sky); }
body.v4 .velocity-ag.recs-impact .rr-chip.cat-commercial{ background:var(--c-sage); color:var(--on-sage); }
body.v4 .velocity-ag.recs-impact .rr-chip.cat-production{ background:var(--c-mint); color:var(--on-mint); }
body.v4 .velocity-ag.recs-impact .rr-chip.cat-content{ background:var(--c-peach); color:var(--on-amber); }
body.v4 .velocity-ag.recs-impact .rr-chip.cat-editorial{ background:var(--c-rose); color:var(--on-rose); }
body.v4 .velocity-ag.recs-impact .rr-effort{ font-size:11px; font-weight:600; color:var(--g-ink-3); }
body.v4 .velocity-ag.recs-impact .rr-expiry{ font-size:11px; font-weight:600; color:var(--warn); display:inline-flex; align-items:center; gap:4px; }
body.v4 .velocity-ag.recs-impact .rr-expiry::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--warn); }
body.v4 .velocity-ag.recs-impact .rr-decided{ font-size:11px; font-weight:700; color:var(--good); }

/* per-goal impact micro-bars */
body.v4 .velocity-ag.recs-impact .gi{ display:flex; gap:7px; align-items:flex-end; justify-content:center; height:30px; cursor:pointer; }
body.v4 .velocity-ag.recs-impact .gi .g{ width:22px; display:flex; flex-direction:column-reverse; gap:2px; }
body.v4 .velocity-ag.recs-impact .gi .g i{ display:block; height:5px; border-radius:2px; background:var(--rule); }
body.v4 .velocity-ag.recs-impact .gi .g.rev i.on{ background:var(--good); }
body.v4 .velocity-ag.recs-impact .gi .g.dl i.on{ background:var(--blue); }
body.v4 .velocity-ag.recs-impact .gi .g.rank i.on{ background:var(--lilac); }
body.v4 .velocity-ag.recs-impact .gi .g i.neg{ background:var(--cherry); }
body.v4 .velocity-ag.recs-impact .gi.unscored{ opacity:.35; }

/* quick actions - one tap, no modal */
body.v4 .velocity-ag.recs-impact .rr-acts{ display:flex; gap:6px; align-items:center; }
body.v4 .velocity-ag.recs-impact .rr-btn{ width:34px; height:34px; border-radius:50%; border:1px solid var(--line2); background:var(--surface); cursor:pointer; font-size:14px; line-height:1; display:grid; place-items:center; color:var(--g-ink-3); font-family:var(--fd); transition:all .12s; padding:0; }
body.v4 .velocity-ag.recs-impact .rr-btn.acc:hover{ background:var(--c-mint); color:var(--on-mint); border-color:var(--good); }
body.v4 .velocity-ag.recs-impact .rr-btn.rej:hover{ background:var(--c-rose); color:var(--on-rose); border-color:var(--cherry); }
body.v4 .velocity-ag.recs-impact .rr-btn.acc{ color:var(--good); }
body.v4 .velocity-ag.recs-impact .rr-btn.rej{ color:var(--g-ink-3); }
body.v4 .velocity-ag.recs-impact .rr-done{ font-size:11px; font-weight:700; color:var(--on-mint); background:var(--c-mint); border-radius:var(--r-pill); padding:4px 12px; white-space:nowrap; }
body.v4 .velocity-ag.recs-impact .rr-done.rej{ color:var(--g-ink-3); background:var(--rule); }

/* ── score-explain popover (appended to body, shares row styles) ── */
body.v4 .explain-pop{ width:330px; background:var(--paper-3); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--sh-modal); padding:16px 18px; }
body.v4 .explain-pop .ep-h, body.v4 .explain-sheet .ep-h{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; gap:10px; }
body.v4 .explain-pop .ep-t, body.v4 .explain-sheet .ep-t{ font-size:12px; font-weight:700; color:var(--g-ink-1); }
body.v4.dark .explain-pop .ep-t, body.v4.dark .explain-sheet .ep-t{ color:var(--ink-1); }
body.v4 .explain-pop .ep-score, body.v4 .explain-sheet .ep-score{ font-size:13px; font-weight:700; color:var(--on-mint); background:var(--c-mint); border-radius:var(--r-pill); padding:2px 10px; white-space:nowrap; }
body.v4 .explain-pop .ep-score.s-none-pill, body.v4 .explain-sheet .ep-score.s-none-pill{ background:var(--rule); color:var(--g-ink-3); }
body.v4 .explain-pop .ep-row, body.v4 .explain-sheet .ep-row{ display:grid; grid-template-columns:14px 1fr auto 64px; gap:9px; align-items:center; padding:7px 0; border-bottom:1px solid var(--rule-soft); }
body.v4 .explain-pop .ep-row:last-of-type, body.v4 .explain-sheet .ep-row:last-of-type{ border-bottom:none; }
body.v4 .explain-pop .gl-dot, body.v4 .explain-sheet .gl-dot{ width:9px; height:9px; border-radius:3px; flex-shrink:0; margin-top:0; }
body.v4 .explain-pop .gl-dot.rev, body.v4 .explain-sheet .gl-dot.rev{ background:var(--good); }
body.v4 .explain-pop .gl-dot.dl, body.v4 .explain-sheet .gl-dot.dl{ background:var(--blue); }
body.v4 .explain-pop .gl-dot.rank, body.v4 .explain-sheet .gl-dot.rank{ background:var(--lilac); }
body.v4 .explain-pop .ep-g, body.v4 .explain-sheet .ep-g{ font-size:12px; font-weight:600; color:var(--g-ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.v4.dark .explain-pop .ep-g, body.v4.dark .explain-sheet .ep-g{ color:var(--ink-2); }
body.v4 .explain-pop .ep-v, body.v4 .explain-sheet .ep-v{ font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; text-align:right; }
body.v4 .explain-pop .ep-v.pos, body.v4 .explain-sheet .ep-v.pos{ color:var(--good); }
body.v4 .explain-pop .ep-v.neg, body.v4 .explain-sheet .ep-v.neg{ color:var(--cherry); }
body.v4 .explain-pop .ep-v.zero, body.v4 .explain-sheet .ep-v.zero{ color:var(--g-ink-4); }
body.v4 .explain-pop .ep-bar, body.v4 .explain-sheet .ep-bar{ width:64px; height:5px; border-radius:var(--r-pill); background:var(--rule); overflow:hidden; position:relative; }
body.v4 .explain-pop .ep-bar i, body.v4 .explain-sheet .ep-bar i{ position:absolute; top:0; bottom:0; border-radius:var(--r-pill); }
body.v4 .explain-pop .ep-why, body.v4 .explain-sheet .ep-why{ font-size:11.5px; color:var(--g-ink-3); line-height:1.5; margin:10px 0 0; padding-top:10px; border-top:1px solid var(--rule); }
body.v4 .explain-pop .ep-why b, body.v4 .explain-sheet .ep-why b{ color:var(--g-ink-1); }
body.v4.dark .explain-pop .ep-why b, body.v4.dark .explain-sheet .ep-why b{ color:var(--ink-1); }
body.v4 .explain-pop .ep-math, body.v4 .explain-sheet .ep-math{ display:flex; justify-content:space-between; font-size:11px; color:var(--g-ink-3); margin-top:10px; background:var(--rule-soft); border-radius:var(--r-sm); padding:7px 11px; font-variant-numeric:tabular-nums; gap:10px; }
body.v4 .explain-pop .ep-math b, body.v4 .explain-sheet .ep-math b{ color:var(--g-ink-1); white-space:nowrap; }
body.v4.dark .explain-pop .ep-math b, body.v4.dark .explain-sheet .ep-math b{ color:var(--ink-1); }
body.v4 .explain-pop .ep-scoredby, body.v4 .explain-sheet .ep-scoredby{ font-size:10.5px; color:var(--g-ink-4); margin-top:8px; }

/* ── bulk confirm bar ── */
body.v4 .velocity-ag.recs-impact .bulk-bar{ display:flex; align-items:center; gap:14px; background:var(--hero-1); color:var(--on-accent); border-radius:var(--r-lg); padding:12px 18px; margin:10px 0 6px; box-shadow:var(--sh-2); }
body.v4 .velocity-ag.recs-impact .bulk-bar .bb-t{ font-size:12.5px; flex:1; color:rgba(255,255,255,.85); }
body.v4 .velocity-ag.recs-impact .bulk-bar .bb-t b{ color:var(--on-accent); }
body.v4 .velocity-ag.recs-impact .bulk-bar .vr-cta.sec{ background:rgba(255,255,255,.12); color:var(--on-accent); border-color:rgba(255,255,255,.2); }

/* ── meetings view ── */
body.v4 .velocity-ag.recs-impact .mtg-day{ margin-bottom:18px; }
body.v4 .velocity-ag.recs-impact .mtg-day-h{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin:0 2px 8px; display:flex; align-items:center; gap:10px; }
body.v4 .velocity-ag.recs-impact .mtg-day-h .line{ flex:1; height:1px; background:var(--rule); }
body.v4 .velocity-ag.recs-impact .mrow{ display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; gap:14px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:11px 16px 11px 12px; margin-bottom:6px; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.03); transition:box-shadow .15s, transform .15s; }
body.v4 .velocity-ag.recs-impact .mrow:hover{ box-shadow:0 6px 20px rgba(0,0,0,.06); transform:translateY(-1px); }
body.v4 .velocity-ag.recs-impact .m-sum{ font-size:12.5px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.v4 .velocity-ag.recs-impact .m-counts{ display:flex; gap:14px; font-size:11.5px; color:var(--g-ink-3); font-weight:600; white-space:nowrap; }
body.v4 .velocity-ag.recs-impact .m-counts b{ color:var(--g-ink-1); font-weight:700; }
body.v4.dark .velocity-ag.recs-impact .m-counts b{ color:var(--ink-1); }
body.v4 .velocity-ag.recs-impact .m-end{ text-align:right; }

/* dept pill + kind + model - shared by the meetings list, the detail
   modal and the bottom sheet (modal/sheet append to body, outside the
   tab scope, so the rules are written against body.v4 directly). */
body.v4 .m-dept{ display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:700; border-radius:var(--r-pill); padding:4px 12px; background:var(--rule); color:var(--g-ink-2); }
body.v4 .m-dept.editorial{ background:var(--c-rose); color:var(--on-rose); }
body.v4 .m-dept.production{ background:var(--c-mint); color:var(--on-mint); }
body.v4 .m-dept.marketing{ background:var(--c-sky); color:var(--on-sky); }
body.v4 .m-dept.commercial{ background:var(--c-sage); color:var(--on-sage); }
body.v4 .m-dept.content{ background:var(--c-peach); color:var(--on-amber); }
body.v4 .m-kind{ font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--g-ink-4); }
body.v4 .m-model{ font-size:10.5px; color:var(--g-ink-4); font-family:ui-monospace, "SF Mono", Menlo, monospace; }

/* ── meeting detail - desktop modal (appended to body) ── */
body.v4 .ri-modal-scrim{ position:fixed; inset:0; z-index:1200; background:rgba(0,0,0,.32); padding:40px; display:flex; align-items:flex-start; justify-content:center; overflow-y:auto; }
body.v4.dark .ri-modal-scrim{ background:rgba(0,0,0,.55); }
body.v4 .mtg-modal{ width:640px; max-width:100%; background:var(--paper-3); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--sh-modal); overflow:hidden; }
body.v4 .mtg-modal .mm-head, body.v4 .ri-sheet-scrim .mm-head{ padding:20px 24px 16px; border-bottom:1px solid var(--rule); display:flex; align-items:flex-start; gap:12px; }
body.v4 .mtg-modal .mm-t, body.v4 .ri-sheet-scrim .mm-t{ flex:1; }
body.v4 .mtg-modal .mm-head h3, body.v4 .ri-sheet-scrim .mm-head h3{ margin:0 0 4px; font-size:17px; font-weight:650; letter-spacing:-.014em; color:var(--g-ink-1); }
body.v4.dark .mtg-modal .mm-head h3, body.v4.dark .ri-sheet-scrim .mm-head h3{ color:var(--ink-1); }
body.v4 .mtg-modal .mm-meta, body.v4 .ri-sheet-scrim .mm-meta{ font-size:11.5px; color:var(--g-ink-3); display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
body.v4 .mtg-modal .mm-close, body.v4 .ri-sheet-scrim .mm-close{ width:30px; height:30px; border-radius:50%; border:none; background:var(--rule); color:var(--g-ink-3); font-size:14px; cursor:pointer; display:grid; place-items:center; flex-shrink:0; font-family:var(--fd); }
body.v4 .mtg-modal .mm-body{ padding:18px 24px 24px; max-height:480px; overflow-y:auto; }
body.v4 .mtg-modal .mm-sec, body.v4 .ri-sheet-scrim .mm-sec{ margin-bottom:20px; }
body.v4 .mtg-modal .mm-sec:last-child, body.v4 .ri-sheet-scrim .mm-sec:last-child{ margin-bottom:0; }
body.v4 .mtg-modal .mm-sec-h, body.v4 .ri-sheet-scrim .mm-sec-h{ display:flex; align-items:center; gap:8px; font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--g-ink-4); margin-bottom:9px; }
body.v4 .mtg-modal .mm-sec-h .dot, body.v4 .ri-sheet-scrim .mm-sec-h .dot{ width:7px; height:7px; border-radius:50%; }
body.v4 .mtg-modal .mm-sec-h .dot.agenda, body.v4 .ri-sheet-scrim .mm-sec-h .dot.agenda{ background:var(--blue); }
body.v4 .mtg-modal .mm-sec-h .dot.disc, body.v4 .ri-sheet-scrim .mm-sec-h .dot.disc{ background:var(--lilac); }
body.v4 .mtg-modal .mm-sec-h .dot.act, body.v4 .ri-sheet-scrim .mm-sec-h .dot.act{ background:var(--cherry); }
body.v4 .mtg-modal .mm-agenda, body.v4 .ri-sheet-scrim .mm-agenda{ margin:0; padding:0 0 0 2px; list-style:none; counter-reset:ag; }
body.v4 .mtg-modal .mm-agenda li, body.v4 .ri-sheet-scrim .mm-agenda li{ font-size:13px; color:var(--ink-2); padding:6px 0 6px 30px; position:relative; line-height:1.45; border-bottom:1px solid var(--rule-soft); counter-increment:ag; }
body.v4 .mtg-modal .mm-agenda li:last-child, body.v4 .ri-sheet-scrim .mm-agenda li:last-child{ border-bottom:none; }
body.v4 .mtg-modal .mm-agenda li::before, body.v4 .ri-sheet-scrim .mm-agenda li::before{ content:counter(ag); position:absolute; left:0; top:6px; width:20px; height:20px; border-radius:6px; background:var(--c-sky); color:var(--on-sky); font-size:10.5px; font-weight:700; display:grid; place-items:center; }
body.v4 .mtg-modal .mm-disc, body.v4 .ri-sheet-scrim .mm-disc{ font-size:13px; color:var(--ink-2); line-height:1.6; margin:0; }
body.v4 .mtg-modal .mm-disc + .mm-disc, body.v4 .ri-sheet-scrim .mm-disc + .mm-disc{ margin-top:8px; }
body.v4 .mtg-modal .mm-action, body.v4 .ri-sheet-scrim .mm-action{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; padding:9px 12px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); margin-bottom:6px; }
body.v4 .mtg-modal .a-t, body.v4 .ri-sheet-scrim .a-t{ font-size:12.5px; font-weight:600; color:var(--ink-1); line-height:1.4; }
body.v4 .mtg-modal .a-s, body.v4 .ri-sheet-scrim .a-s{ font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; border-radius:var(--r-pill); padding:3px 10px; white-space:nowrap; }
body.v4 .mtg-modal .a-s.pending, body.v4 .ri-sheet-scrim .a-s.pending{ background:var(--c-butter); color:var(--on-butter); }
body.v4 .mtg-modal .a-s.accepted, body.v4 .ri-sheet-scrim .a-s.accepted{ background:var(--c-mint); color:var(--on-mint); }
body.v4 .mtg-modal .a-s.rejected, body.v4 .ri-sheet-scrim .a-s.rejected{ background:var(--rule); color:var(--g-ink-3); }
body.v4 .mtg-modal .a-link, body.v4 .ri-sheet-scrim .a-link{ font-size:11px; color:var(--cherry); font-weight:600; cursor:pointer; }

/* ── bottom sheet (mobile, appended to body) ── */
body.v4 .ri-sheet-scrim{ position:fixed; inset:0; z-index:1200; background:rgba(0,0,0,.38); display:flex; align-items:flex-end; }
body.v4 .ri-sheet-scrim .sheet{ width:100%; max-height:78%; background:var(--paper-3); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); border:1px solid var(--border); border-bottom:none; border-radius:var(--r-xl) var(--r-xl) 0 0; box-shadow:var(--sh-modal); padding:8px 18px calc(18px + env(safe-area-inset-bottom, 12px)); overflow-y:auto; }
body.v4 .ri-sheet-scrim .grab{ width:38px; height:5px; border-radius:var(--r-pill); background:var(--rule); margin:6px auto 14px; }
body.v4 .ri-sheet-scrim .mm-head{ padding:0 0 14px; }
body.v4 .ri-sheet-scrim .mm-sec{ margin-bottom:18px; }
body.v4 .ri-sheet-scrim .mm-action{ grid-template-columns:minmax(0,1fr); gap:7px; }
body.v4 .ri-sheet-scrim .mm-action .a-s{ justify-self:start; }

/* ── MOBILE: recs-impact ── */
/* One column, 44px targets, no horizontal scroll. The .rrow grid
   re-templates into the design's stacked mobile card (score top-left,
   bars under the title, full-width Accept / Pass in the thumb zone) -
   CSS-only, same DOM as desktop (mobile-developer skill rule 6). */
@media (max-width: 768px){
  body.v4 .velocity-ag.recs-impact .vel-modebar{ flex-direction:column; align-items:stretch; gap:10px; }
  body.v4 .velocity-ag.recs-impact .vel-modebar-acts{ width:100%; flex-direction:column; align-items:stretch; gap:10px; }
  body.v4 .velocity-ag.recs-impact .mode-seg{ width:100%; }
  body.v4 .velocity-ag.recs-impact .mode-seg button{ flex:1; justify-content:center; min-height:44px; -webkit-tap-highlight-color:transparent; }
  body.v4 .velocity-ag.recs-impact .vr-cta{ min-height:44px; width:100%; }
  body.v4 .velocity-ag.recs-impact .triage-strip{ padding:11px 14px; gap:12px; }
  body.v4 .velocity-ag.recs-impact .ts-progress{ min-width:100%; margin-left:0; }
  body.v4 .velocity-ag.recs-impact .goal-legend{ gap:8px; }

  /* rec row → stacked mobile card (design .mcard treatment, same DOM) */
  body.v4 .velocity-ag.recs-impact .rrow{
    grid-template-columns:50px minmax(0,1fr);
    grid-template-areas:
      "score main"
      "gi    gi"
      "acts  acts";
    gap:11px; padding:12px; margin-bottom:8px; align-items:start;
  }
  body.v4 .velocity-ag.recs-impact .rrow .score{ grid-area:score; width:50px; height:46px; }
  body.v4 .velocity-ag.recs-impact .rrow .rr-main{ grid-area:main; }
  body.v4 .velocity-ag.recs-impact .rrow .rr-title{ white-space:normal; }
  body.v4 .velocity-ag.recs-impact .rrow > div:nth-of-type(2){ grid-area:gi; }
  body.v4 .velocity-ag.recs-impact .rrow .gi{ height:26px; justify-content:flex-start; }
  body.v4 .velocity-ag.recs-impact .rrow .rr-acts{ grid-area:acts; gap:8px; }
  body.v4 .velocity-ag.recs-impact .rrow .rr-btn{ flex:1; width:auto; min-height:44px; border-radius:var(--r-pill); font-size:13px; font-weight:600; -webkit-tap-highlight-color:transparent; }
  body.v4 .velocity-ag.recs-impact .rrow .rr-btn.acc{ background:var(--c-mint); color:var(--on-mint); border:1px solid transparent; }
  body.v4 .velocity-ag.recs-impact .rrow .rr-btn.acc::after{ content:" Accept"; }
  body.v4 .velocity-ag.recs-impact .rrow .rr-btn.rej{ background:var(--surface); color:var(--g-ink-3); border:1px solid var(--line2); }
  body.v4 .velocity-ag.recs-impact .rrow .rr-btn.rej::after{ content:" Pass"; }
  body.v4 .velocity-ag.recs-impact .rrow .rr-btn:active{ opacity:.8; }
  body.v4 .velocity-ag.recs-impact .rrow .rr-done{ align-self:center; }

  /* bulk confirm bar stacks */
  body.v4 .velocity-ag.recs-impact .bulk-bar{ flex-wrap:wrap; }
  body.v4 .velocity-ag.recs-impact .bulk-bar .bb-t{ flex:1 1 100%; }
  body.v4 .velocity-ag.recs-impact .bulk-bar .vr-cta{ flex:1; min-height:44px; }
  body.v4 .velocity-ag.recs-impact .band-h .bh-bulk{ min-height:44px; -webkit-tap-highlight-color:transparent; }

  /* meetings rows → stacked */
  body.v4 .velocity-ag.recs-impact .mrow{ grid-template-columns:minmax(0,1fr); gap:7px; padding:13px 14px; min-height:44px; -webkit-tap-highlight-color:transparent; }
  body.v4 .velocity-ag.recs-impact .mrow .m-sum{ white-space:normal; }
  body.v4 .velocity-ag.recs-impact .mrow .m-end{ text-align:left; display:flex; gap:10px; align-items:center; }
}

/* ── RECS-IMPACT: QA fixes ── */
/* Independent design-QA corrections (see _FIDELITY_PROOF_RECS_IMPACT.html).
   Root cause traced through the LIVE cascade with a Node resolver:

   1. The wave block's pastel `--c-*` / `--on-*`:inherit lines resolve, in
      LIGHT mode, to the SATURATED app.css :root pastels (ln ~5496:
      --c-mint:#2f855a, --c-rose:#be185d, --c-sky:#1e6091 …) - production
      "inverts the pastel convention" (the dv2-row block documents this).
      Result: every score chip / category chip / dept pill rendered dark
      saturated instead of the prototype's pale tints. Fix: pin the
      prototype LIGHT values here (rgb() form per the repo's established
      rgba-no-hex-debt convention) and restore `inherit` in a dark block,
      where the parent (body.v4.dark) carries the correct deep pastels.
   2. --good/--warn at :root are legacy (#3d8b5e/#c07a28), not the
      prototype's #1b8a3c/#c47100 → route via the invariant
      --green-strong token and the velocity-scope --amber (#c47100);
      dark inherits tokens.css body.dark (#44c98a/#ffb45a). ✓ both modes.
   3. Dark --cherry inside .velocity-ag is Wave 219c's #ff8a96 and dark
      --lilac at body is the translucent Wave 231 pill value - the
      prototype wants #ff3b5f / #8e8bff, which are exactly --g-cherry /
      --g-lilac in dark. Re-point both (light values identical).
   4. --sh inside .velocity-ag is the Wave 213 local 10px/30px shadow with
      no dark flip; the prototype triage strip uses the tokens.css --sh
      (16px/40px + dark variant). `inherit` restores the token pipeline.
   5. --lilac-bg (dept chip) resolves to legacy #f1ecfb light / Wave 231
      rgba(125,123,240,.20) dark - prototype values restored literally.
   6. The popover / meeting modal / bottom sheet append to <body>, where
      --r-lg=18px, --r-sm=10px, --line=#d2d2d7 (apl aliases), --fd is
      UNDEFINED and the pastels are the saturated :root set. Pin the
      prototype tokens on the component roots, then restore the
      prototype's var(--neutral-bg) on .ep-math / .mm-close /
      .a-s.rejected (the wave had substituted --rule/--rule-soft).
   7. .rr-done text colour back to the prototype's var(--good). */
body.v4 .velocity-ag.recs-impact{
  --c-lilac:rgb(236,233,254); --on-lilac:rgb(60,52,137);
  --c-mint:rgb(225,245,238);  --on-mint:rgb(15,110,86);
  --c-sky:rgb(230,241,251);   --on-sky:rgb(12,68,124);
  --c-peach:rgb(250,236,231); --on-amber:rgb(138,75,0);
  --c-butter:rgb(251,242,218);--on-butter:rgb(138,106,0);
  --c-rose:rgb(251,234,240);  --on-rose:rgb(156,31,75);
  --c-sage:rgb(238,243,226);  --on-sage:rgb(74,99,32);
  --good:var(--green-strong);
  --warn:var(--amber);
  --lilac-bg:rgba(94,92,230,.10);
  --sh:inherit;
}
body.v4.dark .velocity-ag.recs-impact{
  --c-lilac:inherit; --on-lilac:inherit;
  --c-mint:inherit;  --on-mint:inherit;
  --c-sky:inherit;   --on-sky:inherit;
  --c-peach:inherit; --on-amber:inherit;
  --c-butter:inherit; --on-butter:inherit;
  --c-rose:inherit;  --on-rose:inherit;
  --c-sage:inherit;  --on-sage:inherit;
  --good:inherit; --warn:inherit;
  --cherry:var(--g-cherry);
  --lilac:var(--g-lilac);
  --lilac-bg:rgba(142,139,255,.18);
}
/* body-appended overlay components - pin the prototype token set */
body.v4 .explain-pop, body.v4 .explain-sheet,
body.v4 .ri-modal-scrim, body.v4 .ri-sheet-scrim{
  --r-lg:16px; --r-sm:8px;
  --line:rgb(231,231,228);
  --neutral-bg:rgba(0,0,0,.05);
  --fd:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, sans-serif;
  --c-lilac:rgb(236,233,254); --on-lilac:rgb(60,52,137);
  --c-mint:rgb(225,245,238);  --on-mint:rgb(15,110,86);
  --c-sky:rgb(230,241,251);   --on-sky:rgb(12,68,124);
  --c-peach:rgb(250,236,231); --on-amber:rgb(138,75,0);
  --c-butter:rgb(251,242,218);--on-butter:rgb(138,106,0);
  --c-rose:rgb(251,234,240);  --on-rose:rgb(156,31,75);
  --c-sage:rgb(238,243,226);  --on-sage:rgb(74,99,32);
  --good:var(--green-strong);
  --cherry:var(--g-cherry);
  --lilac:var(--g-lilac);
}
body.v4.dark .explain-pop, body.v4.dark .explain-sheet,
body.v4.dark .ri-modal-scrim, body.v4.dark .ri-sheet-scrim{
  --line:rgb(44,44,49);
  --neutral-bg:rgba(255,255,255,.07);
  --c-lilac:inherit; --on-lilac:inherit;
  --c-mint:inherit;  --on-mint:inherit;
  --c-sky:inherit;   --on-sky:inherit;
  --c-peach:inherit; --on-amber:inherit;
  --c-butter:inherit; --on-butter:inherit;
  --c-rose:inherit;  --on-rose:inherit;
  --c-sage:inherit;  --on-sage:inherit;
  --good:inherit;
}
/* restore the prototype's var(--neutral-bg) references */
body.v4 .explain-pop .ep-math, body.v4 .explain-sheet .ep-math{ background:var(--neutral-bg); }
body.v4 .mtg-modal .mm-close, body.v4 .ri-sheet-scrim .mm-close{ background:var(--neutral-bg); }
body.v4 .mtg-modal .a-s.rejected, body.v4 .ri-sheet-scrim .a-s.rejected{ background:var(--neutral-bg); }
/* .rr-done text colour per the prototype (.rr-done.rej keeps its
   production-only neutral state - no prototype rule exists for it) */
body.v4 .velocity-ag.recs-impact .rr-done{ color:var(--good); }

/* ── RECS-IMPACT: spec fixes r2 ── */
/* Second design-QA pass against _DESIGN_RECS_GOAL_IMPACT.html.
   1. Mobile card buttons: the spec's .mc-acts draws "✓ Accept" and
      "Pass" (no ✕ glyph). The shared-DOM buttons carry ✓/✕ text nodes,
      so zero the node and draw the spec strings via ::after.
   2. Mobile card bar spacing: spec .mcard puts the bars 8px under the
      meta (.gi margin-top:8px) and the actions 11px below (.mc-acts
      margin-top:11px). The grid gap was a flat 11px - row-gap to 8px,
      +3px on the actions row restores both spec distances.
   3. Mobile meeting row: spec .m-line2 = dept pill · kind · counts
      (counts right-aligned, joined with "·") on line one, summary on
      line two. Re-templated via grid areas on the same DOM; the model
      string is not in the spec's mobile frame. */
@media (max-width: 768px){
  /* 1 - spec button labels */
  body.v4 .velocity-ag.recs-impact .rrow .rr-btn.acc,
  body.v4 .velocity-ag.recs-impact .rrow .rr-btn.rej{ font-size:0; }
  body.v4 .velocity-ag.recs-impact .rrow .rr-btn.acc::after{ content:"✓ Accept"; font-size:13px; }
  body.v4 .velocity-ag.recs-impact .rrow .rr-btn.rej::after{ content:"Pass"; font-size:13px; }

  /* 2 - spec .mcard spacing (8px meta→bars, 11px bars→actions) */
  body.v4 .velocity-ag.recs-impact .rrow{ gap:8px 11px; }
  body.v4 .velocity-ag.recs-impact .rrow .rr-acts{ margin-top:3px; }

  /* 3 - spec .m-line2 arrangement */
  body.v4 .velocity-ag.recs-impact .mrow{
    grid-template-columns:auto auto minmax(0,1fr);
    grid-template-areas:
      "dept end counts"
      "sum  sum sum";
    gap:7px 10px; align-items:center;
  }
  body.v4 .velocity-ag.recs-impact .mrow .m-dept{ grid-area:dept; }
  body.v4 .velocity-ag.recs-impact .mrow .m-end{ grid-area:end; }
  body.v4 .velocity-ag.recs-impact .mrow .m-counts{ grid-area:counts; justify-self:end; gap:0; }
  body.v4 .velocity-ag.recs-impact .mrow .m-counts span + span::before{ content:" · "; white-space:pre; }
  body.v4 .velocity-ag.recs-impact .mrow .m-sum{ grid-area:sum; }
  body.v4 .velocity-ag.recs-impact .mrow .m-model{ display:none; }
}

/* ── RECS-IMPACT r3 ── */
/* Peter's corrective feedback (2026-06-05):
   1. The AI Meetings entry point moves to a page-level toggle at the
      top of the AI Team page (.ag-topbar - tab bar left, toggle right).
      The segmented control inside the Recommendations tab is gone.
   2. The meetings view is a FLAT list in strict date order - the .mrow
      grid gains a leading date cell + kind cell and loses .m-end / the
      day-group headers (.mtg-day rules are now inert).
   3. Clicking anywhere on a recommendation row opens ONE explain
      surface - the meeting-detail chrome (.mtg-modal desktop /
      .ri-sheet-scrim bottom sheet mobile) with the rx-* score
      visualisation: big composite score, a centre-axis bar per goal
      (cherry left = negative, goal colour right = positive), the why
      line under each, the arithmetic line, an importance sentence and
      Accept / Pass. The old anchored .explain-pop rules are inert.
   Tokens only - no new hex. */

/* 1 - page topbar: tab bar + AI Meetings toggle.
   The base .tabs rule carries margin-bottom:16px !important - the
   toggle mirrors that margin so align-items:center keeps both on the
   same line and the bar's spacing below is preserved. */
body.v4 .ag-topbar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
body.v4 .ag-topbar .tabs{ flex:1 1 auto; min-width:0; }
body.v4 .ag-meetings-toggle{
  display:inline-flex; align-items:center; gap:7px; flex-shrink:0;
  margin-bottom:16px;
  font-family:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
  padding:8px 16px; border-radius:var(--r-pill);
  background:var(--surface); color:var(--ink-2);
  border:1px solid var(--line); box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition:all .15s; -webkit-tap-highlight-color:transparent;
}
body.v4 .ag-meetings-toggle:hover{ border-color:var(--cherry); color:var(--cherry); }
body.v4 .ag-meetings-toggle.on{ background:var(--cherry); border-color:var(--cherry); color:var(--on-accent); }
body.v4 .ag-meetings-toggle svg{ flex-shrink:0; }

/* 2 - flat meetings list: date · dept pill · kind · summary · counts */
body.v4 .velocity-ag.recs-impact .mtg-flat .mrow{
  grid-template-columns:auto auto auto minmax(0,1fr) auto;
}
body.v4 .velocity-ag.recs-impact .m-date{
  font-size:11.5px; font-weight:700; color:var(--g-ink-2);
  font-variant-numeric:tabular-nums; white-space:nowrap; min-width:74px;
}
body.v4.dark .velocity-ag.recs-impact .m-date{ color:var(--ink-2); }

/* 3 - rec row is fully clickable */
body.v4 .velocity-ag.recs-impact .rrow.is-openable{ cursor:pointer; }
body.v4 .velocity-ag.recs-impact .rrow.is-openable .rr-acts,
body.v4 .velocity-ag.recs-impact .rrow.is-openable .score{ cursor:pointer; }

/* 3 - explain detail surface (body-appended; shares .mtg-modal /
   .ri-sheet-scrim chrome + the token pins from the QA-fix block) */
body.v4 .explain-modal{ width:560px; }
body.v4 .rx-detail .rx-body{ font-size:13px; color:var(--ink-2); line-height:1.6; margin:0 0 16px; }
body.v4 .rx-detail .rx-score-row{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
body.v4 .rx-detail .rx-big{
  width:62px; height:54px; border-radius:12px; flex-shrink:0;
  display:grid; place-items:center;
  font-size:24px; font-weight:700; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
body.v4 .rx-detail .rx-big.s-high{ background:var(--c-mint); color:var(--on-mint); }
body.v4 .rx-detail .rx-big.s-mid{ background:var(--c-butter); color:var(--on-butter); }
body.v4 .rx-detail .rx-big.s-low{ background:var(--neutral-bg); color:var(--g-ink-3); }
body.v4 .rx-detail .rx-big.s-neg{ background:var(--c-rose); color:var(--on-rose); }
body.v4 .rx-detail .rx-big.s-none-pill{ background:transparent; border:1.5px dashed var(--line); color:var(--g-ink-4); }
body.v4 .rx-detail .rx-band b{ display:block; font-size:13.5px; font-weight:700; color:var(--g-ink-1); margin-bottom:2px; }
body.v4.dark .rx-detail .rx-band b{ color:var(--ink-1); }
body.v4 .rx-detail .rx-band span{ font-size:12px; color:var(--g-ink-3); line-height:1.5; }
body.v4 .rx-detail .rx-goal{ padding:10px 0; border-bottom:1px solid var(--rule-soft); }
body.v4 .rx-detail .rx-goal:last-of-type{ border-bottom:none; }
body.v4 .rx-detail .rx-goal-h{ display:flex; align-items:center; gap:8px; margin-bottom:7px; }
body.v4 .rx-detail .rx-goal-h .ep-g{ flex:1; font-size:12.5px; font-weight:600; color:var(--g-ink-2); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.v4.dark .rx-detail .rx-goal-h .ep-g{ color:var(--ink-2); }
body.v4 .rx-detail .rx-goal-h .ep-v{ font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums; }
body.v4 .rx-detail .rx-goal-h .ep-v.pos{ color:var(--good); }
body.v4 .rx-detail .rx-goal-h .ep-v.neg{ color:var(--cherry); }
body.v4 .rx-detail .rx-goal-h .ep-v.zero{ color:var(--g-ink-4); }
body.v4 .rx-detail .gl-dot{ width:9px; height:9px; border-radius:3px; flex-shrink:0; }
body.v4 .rx-detail .gl-dot.rev{ background:var(--good); }
body.v4 .rx-detail .gl-dot.dl{ background:var(--blue); }
body.v4 .rx-detail .gl-dot.rank{ background:var(--lilac); }
body.v4 .rx-detail .rx-bar{ position:relative; height:8px; border-radius:var(--r-pill); background:var(--neutral-bg); overflow:hidden; }
body.v4 .rx-detail .rx-bar .rx-axis{ position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--g-ink-4); opacity:.55; }
body.v4 .rx-detail .rx-bar i{ position:absolute; top:0; bottom:0; border-radius:var(--r-pill); }
body.v4 .rx-detail .rx-why{ font-size:11.5px; color:var(--g-ink-3); line-height:1.5; margin-top:6px; }
body.v4 .rx-detail .ep-math{ display:flex; justify-content:space-between; gap:10px; font-size:11px; color:var(--g-ink-3); margin-top:14px; background:var(--neutral-bg); border-radius:var(--r-sm); padding:7px 11px; font-variant-numeric:tabular-nums; }
body.v4 .rx-detail .ep-math b{ color:var(--g-ink-1); white-space:nowrap; }
body.v4.dark .rx-detail .ep-math b{ color:var(--ink-1); }
body.v4 .rx-detail .ep-scoredby{ font-size:10.5px; color:var(--g-ink-4); margin-top:8px; }
body.v4 .rx-detail .rx-acts{ display:flex; justify-content:flex-end; gap:10px; margin-top:18px; padding-top:14px; border-top:1px solid var(--rule); }
/* source/category chips inside the body-appended detail (the
   .velocity-ag-scoped .rr-chip rules don't reach here) */
body.v4 .mtg-modal .rr-chip, body.v4 .ri-sheet-scrim .rr-chip{
  display:inline-block; font-size:9.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; border-radius:var(--r-pill); padding:2px 8px;
}
body.v4 .mtg-modal .rr-chip.dept, body.v4 .ri-sheet-scrim .rr-chip.dept{ background:var(--lilac-bg); color:var(--lilac); }
body.v4 .mtg-modal .rr-chip.system, body.v4 .ri-sheet-scrim .rr-chip.system{ background:var(--neutral-bg); color:var(--g-ink-3); }
body.v4 .mtg-modal .rr-chip.cat-marketing, body.v4 .ri-sheet-scrim .rr-chip.cat-marketing{ background:var(--c-sky); color:var(--on-sky); }
body.v4 .mtg-modal .rr-chip.cat-commercial, body.v4 .ri-sheet-scrim .rr-chip.cat-commercial{ background:var(--c-sage); color:var(--on-sage); }
body.v4 .mtg-modal .rr-chip.cat-production, body.v4 .ri-sheet-scrim .rr-chip.cat-production{ background:var(--c-mint); color:var(--on-mint); }
body.v4 .mtg-modal .rr-chip.cat-content, body.v4 .ri-sheet-scrim .rr-chip.cat-content{ background:var(--c-peach); color:var(--on-amber); }
body.v4 .mtg-modal .rr-chip.cat-editorial, body.v4 .ri-sheet-scrim .rr-chip.cat-editorial{ background:var(--c-rose); color:var(--on-rose); }

/* ── MOBILE: recs-impact r3 ── */
@media (max-width: 768px){
  /* topbar stacks: tabs full width, toggle full width beneath (44px) */
  body.v4 .ag-topbar{ flex-direction:column; align-items:stretch; gap:8px; }
  body.v4 .ag-meetings-toggle{ width:100%; justify-content:center; min-height:44px; }

  /* flat meeting row stacks: date+dept+kind on line one, counts right;
     summary full-width on line two (overrides the inert r2 .m-end map) */
  body.v4 .velocity-ag.recs-impact .mtg-flat .mrow{
    grid-template-columns:auto auto auto minmax(0,1fr);
    grid-template-areas:
      "date dept kind counts"
      "sum  sum  sum  sum";
    gap:7px 10px; align-items:center; min-height:44px;
  }
  body.v4 .velocity-ag.recs-impact .mtg-flat .m-date{ grid-area:date; min-width:0; }
  body.v4 .velocity-ag.recs-impact .mtg-flat .m-dept{ grid-area:dept; }
  body.v4 .velocity-ag.recs-impact .mtg-flat .m-kind{ grid-area:kind; }
  body.v4 .velocity-ag.recs-impact .mtg-flat .m-counts{ grid-area:counts; justify-self:end; gap:0; }
  body.v4 .velocity-ag.recs-impact .mtg-flat .m-counts span + span::before{ content:" · "; white-space:pre; }
  body.v4 .velocity-ag.recs-impact .mtg-flat .m-sum{ grid-area:sum; white-space:normal; }

  /* explain detail in the bottom sheet: 44px decision buttons */
  body.v4 .rx-detail .rx-acts{ flex-direction:column-reverse; gap:8px; }
  body.v4 .rx-detail .rx-acts .btn-primary,
  body.v4 .rx-detail .rx-acts .btn-secondary{ width:100%; min-height:44px; -webkit-tap-highlight-color:transparent; }
}

/* ── DR-FIX: bugs ── */
/* bug #2: band placement is numeric; "trade-off" is a SECONDARY sub-flag,
   not the band word. A trade-off rec keeps its score-driven chip colour
   (High/Mid/Low) plus a subtle rose ring on the chip and a rose pill in
   the meta row, so a high-scoring trade-off reads "High · trade-off" and
   stays in "Do these first". Reuses existing rose tokens - no new hex. */
body.v4 .velocity-ag.recs-impact .score.has-tradeoff{ box-shadow:inset 0 0 0 1.5px var(--c-rose); }
body.v4 .velocity-ag.recs-impact .rr-chip.tradeoff{ background:var(--c-rose); color:var(--on-rose); }
body.v4 .rx-detail .rx-band .rx-tradeoff{ color:var(--cherry); font-weight:700; }

/* ── DR-FIX: ux ── */
/* #5 - faint ⌘K affordance inside the global-search row. Presentational
   only; clicking opens the existing command palette (wired in levelups.js).
   Positioned over the right edge of the search input. */
body.v4 .topbar-search { position: relative; }
body.v4 .topbar-search > input#global-search { padding-right: 42px; }
body.v4 .topbar-cmdk-hint {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  font-family: var(--f-v4);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--g-500);
  background: var(--g-100);
  border: 1px solid var(--g-200);
  border-radius: var(--r-sm);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
body.v4 .topbar-cmdk-hint:hover { color: var(--g-800); border-color: var(--g-300); }
body.v4 .topbar-cmdk-hint:active { background: var(--g-200); }

/* #3 - recommendations Pending: orientation summary + mid-band expander. */
body.v4 .velocity-ag.recs-impact .rec-band-summary {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-3);
  margin: 2px 2px 10px;
  line-height: 1.45;
}
body.v4 .velocity-ag.recs-impact .rec-mid-more {
  display: block;
  width: 100%;
  margin: 6px 0 2px;
  padding: 9px 12px;
  font-family: var(--fd);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cherry);
  background: var(--paper-2);
  border: 1px dashed var(--rule);
  border-radius: var(--r-sm);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
body.v4 .velocity-ag.recs-impact .rec-mid-more:hover { background: var(--paper-3, var(--paper-2)); }

/* ── MOBILE: ux-fix ── */
@media (max-width: 768px) {
  /* #5 - the ⌘K hint is desktop-only (no physical keyboard / palette is the
     search itself on phones). Hide it and reclaim the input padding. */
  body.v4 .topbar-cmdk-hint { display: none; }
  body.v4 .topbar-search > input#global-search { padding-right: 12px; }
  /* #3 - keep the summary readable and the expander a 44px tap target. */
  body.v4 .velocity-ag.recs-impact .rec-band-summary { font-size: 13px; }
  body.v4 .velocity-ag.recs-impact .rec-mid-more { min-height: 44px; }
}

/* ── FEAT: attribution ── */
/* =============================================================
   Episode Performance Attribution - Stats → Attribution sub-view.
   Download leaderboard (card rows: rank · guest/title · topic pills ·
   download bar · number · share toggle), guest-share-lift KPI, and the
   Chelsea "ask to share" nudge. Tokens only (no hardcoded hex), no
   !important - css-guard stays at baseline. Mobile blocks follow.
   ============================================================= */
body.v4 #gi-body .attr-board { display: flex; flex-direction: column; }
body.v4 #gi-body .attr-board-card { padding: 14px 16px; }

body.v4 #gi-body .attr-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
body.v4 #gi-body .attr-row:last-child { border-bottom: none; }

body.v4 #gi-body .attr-rank {
  flex: 0 0 26px;
  height: 26px;
  border-radius: var(--r-pill);
  background: var(--cherry-bg);
  color: var(--cherry);
  font-weight: 800;
  font-size: 12.5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.v4 #gi-body .attr-main { flex: 1; min-width: 0; }
body.v4 #gi-body .attr-title {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--ink-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.v4 #gi-body .attr-num { color: var(--g-500); font-weight: 600; margin-left: 6px; font-size: 11px; }

body.v4 #gi-body .attr-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 6px; }
body.v4 #gi-body .attr-pill {
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  padding: 4px 8px;
  border-radius: var(--r-pill);
  background: var(--lilac-bg);
  color: var(--lilac-fg);
}
body.v4 #gi-body .attr-pill-empty { background: var(--canvas); color: var(--g-500); }

body.v4 #gi-body .attr-track {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--cherry-bg);
  overflow: hidden;
}
body.v4 #gi-body .attr-fill { height: 100%; background: var(--cherry-fill); border-radius: var(--r-pill); }

body.v4 #gi-body .attr-side {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}
body.v4 #gi-body .attr-dl {
  font-weight: 800;
  font-size: 14px;
  color: var(--ink-1);
  font-variant-numeric: tabular-nums;
}
body.v4 #gi-body .attr-share {
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--g-600);
  cursor: pointer;
}
body.v4 #gi-body .attr-share:hover { border-color: var(--cherry); color: var(--cherry); }
body.v4 #gi-body .attr-share.on {
  background: var(--mint-bg);
  border-color: var(--mint);
  color: var(--mint-fg);
}

body.v4 #gi-body .attr-nudge { margin-top: 16px; }
body.v4 #gi-body .attr-nudge-list { display: flex; flex-direction: column; }
body.v4 #gi-body .attr-nudge-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--line);
}
body.v4 #gi-body .attr-nudge-row:last-child { border-bottom: none; }
body.v4 #gi-body .attr-nudge-who { font-weight: 700; font-size: 13px; color: var(--ink-1); flex: 1; min-width: 0; }
body.v4 #gi-body .attr-nudge-meta { font-size: 11.5px; color: var(--g-500); white-space: nowrap; }
body.v4 #gi-body .attr-mark { font-size: 11.5px; padding: 5px 10px; }

/* ── MOBILE: stats (attribution) ── */
@media (max-width: 767.98px) {
  /* Leaderboard rows already stack as cards; widen the bar area and make
     every interactive control a 44px tap target. No page overflow: the
     row is flex with a min-width:0 main column, so long titles ellipsize. */
  body.v4 #gi-body .attr-row { gap: 10px; padding: 12px 0; min-height: 44px; }
  body.v4 #gi-body .attr-share,
  body.v4 #gi-body .attr-mark { min-height: 36px; }
  body.v4 #gi-body .attr-nudge-row { min-height: 44px; flex-wrap: wrap; }
  /* Filter selects inherit the existing .gi-fl 44px / 16px mobile rule. */
  body.v4 #gi-body .attr-filterbar { gap: 10px; }
}

/* ── FEAT: revenue ── */
/* Sponsor Reach & Renewal Engine (Renewals tab) + Dynamic Ad Inventory
   & Yield (Inventory → Yield). Tokens only; scoped under body.v4 +
   #monday-pane so nothing leaks to other pages. Wave 0152. */

/* Renewals: intro line + responsive card grid */
body.v4 #monday-pane .rnw-intro {
  font-size: 12.5px; color: var(--g-ink-3); margin: 0 0 14px; line-height: 1.5;
}
body.v4 #monday-pane .rnw-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px;
}
body.v4 #monday-pane .rnw-card {
  border: 1px solid var(--g-border); border-radius: var(--r-md);
  background: var(--card); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px;
  border-left: 3px solid var(--g-200);
}
body.v4 #monday-pane .rnw-card.prio-high   { border-left-color: var(--cherry); }
body.v4 #monday-pane .rnw-card.prio-medium { border-left-color: var(--on-amber); }
body.v4 #monday-pane .rnw-card.prio-low    { border-left-color: var(--on-mint); }
body.v4 #monday-pane .rnw-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
body.v4 #monday-pane .rnw-card-name { font-size: 14.5px; font-weight: 700; color: var(--g-ink-1); }
body.v4 #monday-pane .rnw-pill {
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: var(--r-pill);
  white-space: nowrap; background: var(--g-100); color: var(--g-ink-2);
}
body.v4 #monday-pane .rnw-pill.prio-high   { background: var(--cherry-bg); color: var(--cherry); }
body.v4 #monday-pane .rnw-pill.prio-medium { background: var(--c-butter); color: var(--on-amber); }
body.v4 #monday-pane .rnw-pill.prio-low    { background: var(--c-mint);   color: var(--on-mint); }
body.v4 #monday-pane .rnw-card-meta {
  display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; color: var(--g-ink-3);
}
body.v4 #monday-pane .rnw-card-reach { font-size: 12.5px; color: var(--g-ink-2); }
body.v4 #monday-pane .rnw-reach { font-weight: 600; }
body.v4 #monday-pane .rnw-reach.ok     { color: var(--on-mint); }
body.v4 #monday-pane .rnw-reach.soft   { color: var(--on-amber); }
body.v4 #monday-pane .rnw-reach.behind { color: var(--cherry); }
body.v4 #monday-pane .rnw-reach-muted  { color: var(--g-ink-4); font-style: italic; }
body.v4 #monday-pane .rnw-card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
body.v4 #monday-pane .rnw-pitch-err {
  font-size: 12px; color: var(--cherry); background: var(--cherry-bg);
  border-radius: var(--r-sm); padding: 8px 10px;
}
body.v4 #monday-pane .rnw-pitch-out {
  border-top: 1px solid var(--g-rule); padding-top: 8px; margin-top: 2px;
}
body.v4 #monday-pane .rnw-pitch-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--g-ink-4); margin-bottom: 5px;
}
body.v4 #monday-pane .rnw-pitch-body {
  white-space: pre-wrap; font-size: 12.5px; line-height: 1.55; color: var(--g-ink-2);
  background: var(--g-50); border: 1px solid var(--g-border); border-radius: var(--r-sm);
  padding: 10px 12px; margin: 0; font-family: inherit;
}

/* Inventory mode toggle (Slots | Yield) */
body.v4 #monday-pane .inv-modebar {
  display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 14px;
  background: var(--g-100); border-radius: var(--r-pill);
}
body.v4 #monday-pane .inv-mode-btn {
  border: 0; background: transparent; cursor: pointer; font-size: 12.5px; font-weight: 600;
  color: var(--g-ink-3); padding: 6px 16px; border-radius: var(--r-pill);
}
body.v4 #monday-pane .inv-mode-btn.on { background: var(--card); color: var(--g-ink-1); box-shadow: 0 1px 2px rgba(0,0,0,.06); }

/* Yield view: methodology note + table */
body.v4 #monday-pane .yld-note {
  font-size: 12.5px; color: var(--g-ink-3); line-height: 1.5;
  background: var(--g-50); border: 1px solid var(--g-border); border-radius: var(--r-md);
  padding: 12px 14px; margin-bottom: 14px;
}
body.v4 #monday-pane .yld-note strong { color: var(--g-ink-1); }
body.v4 #monday-pane .yld-table tbody td { font-variant-numeric: tabular-nums; }

/* ── MOBILE: revenue ── */
/* Renewals grid → single column; yield table → stacked cards (the same
   data-m-label transform the campaigns table uses, keyed to .yld-row).
   Action buttons reach 44px. Zero desktop regression (additive @media). */
@media (max-width: 767.98px) {
  body.v4 #monday-pane .rnw-grid { grid-template-columns: 1fr; gap: 12px; }
  body.v4 #monday-pane .rnw-card-actions .btn-sm { min-height: 44px; flex: 1 1 auto; }
  body.v4 #monday-pane .inv-modebar { display: flex; }
  body.v4 #monday-pane .inv-mode-btn { flex: 1 1 0; min-height: 40px; }

  body.v4 #monday-pane .data-table tbody tr.yld-row {
    display: block; padding: 12px 14px; border-bottom: 1px solid var(--rule);
  }
  body.v4 #monday-pane .data-table tr.yld-row td {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 3px 0; border-bottom: none; font-size: 13px; text-align: left;
  }
  body.v4 #monday-pane .data-table tr.yld-row td::before {
    content: attr(data-m-label); font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--g-ink-4); flex: 0 0 auto;
  }
  body.v4 #monday-pane .data-table tr.yld-row td[data-m-label="Episode"] { padding-bottom: 6px; }
  body.v4 #monday-pane .data-table tr.yld-row td[data-m-label="Episode"]::before { display: none; }
  body.v4 #monday-pane .data-table tr.yld-row td[data-m-label="Episode"] > div:first-child { font-size: 15px; }
}

/* ── FEAT: throughput ── */
/* Recommendation → Action throughput (Part A, agents-recommendations) +
   Keith Drafts review queue (Part B, keith.js). Tokens only; scoped so
   nothing leaks. The hard stop (Keith never sends) is reinforced in copy
   AND visually flagged in the drafts UI. */

/* Part A - batch-approve bar above the bands. */
body.v4 .recs-impact .rec-batch-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 12px 14px;
  border: 1px solid var(--g-border); border-left: 3px solid var(--cherry);
  border-radius: var(--r-sm); background: var(--g-surface);
}
body.v4 .recs-impact .rec-batch-bar .rbb-t { flex: 1 1 240px; font-size: 12.5px; color: var(--g-ink-3); line-height: 1.5; }
body.v4 .recs-impact .rec-batch-bar .rbb-t b { color: var(--g-ink-1); }

/* Part A - the one-click action line inside the explain detail. */
body.v4 .rx-action-line {
  margin: 14px 0 8px; padding: 10px 12px;
  border: 1px solid var(--g-border); border-left: 3px solid var(--cherry);
  border-radius: var(--r-sm); background: var(--cherry-bg);
  font-size: 12.5px; color: var(--g-ink-2); line-height: 1.5;
}
body.v4 .rx-action-line b { color: var(--g-ink-1); }
body.v4 .rx-acts.rx-acts-do { margin-bottom: 6px; }

/* Part B - Keith Drafts modal. */
body.v4 .kc-drafts-modal { max-width: 720px; width: min(720px, 94vw); display: flex; flex-direction: column; max-height: 88vh; }
body.v4 .kc-drafts-note {
  margin: 0 0 12px; padding: 10px 12px;
  border: 1px solid var(--g-border); border-left: 3px solid var(--cherry);
  border-radius: var(--r-sm); background: var(--cherry-bg);
  font-size: 12.5px; color: var(--g-ink-2); line-height: 1.5;
}
body.v4 .kc-drafts-note b { color: var(--cherry); }
body.v4 .kc-draft-new { margin: 0 0 14px; }
body.v4 .kc-draft-new-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
body.v4 .kc-draft-kind {
  height: 40px; border: 1px solid var(--g-border); border-radius: var(--r-sm);
  background: var(--g-surface); color: var(--g-ink-1); padding: 0 10px; font-size: 13px;
}
body.v4 .kc-draft-prompt {
  flex: 1 1 220px; height: 40px; border: 1px solid var(--g-border); border-radius: var(--r-sm);
  background: var(--g-surface); color: var(--g-ink-1); padding: 0 12px; font-size: 13px;
}
body.v4 .kc-drafts-body { overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
body.v4 .kc-draft {
  border: 1px solid var(--g-border); border-radius: var(--r-sm);
  background: var(--g-surface); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px;
}
body.v4 .kc-draft-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body.v4 .kc-draft-kindpill {
  font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--lilac-bg); color: var(--on-lilac);
}
body.v4 .kc-draft-title { flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--g-ink-1); }
body.v4 .kc-draft-status { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: var(--r-pill); }
body.v4 .kc-draft-status.kc-ds-draft { background: var(--g-200); color: var(--g-ink-3); }
body.v4 .kc-draft-status.kc-ds-approved { background: var(--mint); color: var(--good-fg); }
body.v4 .kc-draft-text {
  width: 100%; box-sizing: border-box; border: 1px solid var(--g-border); border-radius: var(--r-sm);
  background: var(--card, var(--g-surface)); color: var(--g-ink-1); padding: 10px 12px;
  font-size: 13px; line-height: 1.55; resize: vertical; font-family: inherit;
}
body.v4 .kc-draft-text[readonly] { opacity: 0.85; }
body.v4 .kc-draft-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
body.v4 .kc-draft-sendnote { flex: 1 1 auto; font-size: 11.5px; color: var(--cherry); font-weight: 600; }

/* ── MOBILE: throughput ── */
@media (max-width: 767.98px) {
  /* Batch bar + action line: stack, full-width CTAs, 44px targets. */
  body.v4 .recs-impact .rec-batch-bar { flex-direction: column; align-items: stretch; }
  body.v4 .recs-impact .rec-batch-bar .vr-cta { width: 100%; min-height: 44px; }
  body.v4 .rx-acts.rx-acts-do { flex-direction: column; }
  body.v4 .rx-acts.rx-acts-do button { width: 100%; min-height: 44px; }
  /* Drafts modal: full-bleed sheet, stacked composer, 44px controls. */
  body.v4 .kc-drafts-modal { width: 100vw; max-width: 100vw; max-height: 92vh; border-radius: 0; }
  body.v4 .kc-draft-new-row { flex-direction: column; align-items: stretch; }
  body.v4 .kc-draft-kind,
  body.v4 .kc-draft-prompt,
  body.v4 .kc-draft-new-row .kc-draft-go { width: 100%; min-height: 44px; }
  body.v4 .kc-draft-acts { justify-content: stretch; }
  body.v4 .kc-draft-acts button { flex: 1 1 auto; min-height: 44px; }
}

/* ── FEAT: money ── */
/* "One Money view" (Simplification #6) - the consolidated revenue roof.
   Tokens only; scoped under body.v4 + #money-body so nothing leaks. The
   four tiles, pace pill, and needs-chasing list mirror _SIMPLIFICATION_SPEC
   using real tokens. */

body.v4 #money-body .money1 { display: flex; flex-direction: column; }

/* Hero strip: target line + pace pill (folded into the page hero spirit). */
body.v4 #money-body .m1-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; margin: 0 0 14px;
  padding: 14px 16px; border: 1px solid var(--g-border); border-radius: var(--r-md);
  background: var(--card);
}
body.v4 #money-body .m1-hero-title { font-size: 20px; font-weight: 800; color: var(--g-ink-1); }
body.v4 #money-body .m1-hero-sub { font-size: 12.5px; color: var(--g-ink-3); margin-top: 3px; line-height: 1.5; }
body.v4 #money-body .m1-pace {
  font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: var(--r-pill);
  white-space: nowrap; flex-shrink: 0;
}
body.v4 #money-body .m1-pace-mint  { background: var(--c-mint);  color: var(--on-mint); }
body.v4 #money-body .m1-pace-peach { background: var(--c-peach); color: var(--peach-fg); }

/* Four stat tiles. */
body.v4 #money-body .m1-tiles {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; margin: 0 0 16px;
}
body.v4 #money-body .m1-tile {
  border: 1px solid var(--g-border); border-radius: var(--r-md);
  background: var(--card); padding: 13px 15px;
}
body.v4 #money-body .m1-tile-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--g-ink-3); margin-bottom: 6px;
}
body.v4 #money-body .m1-tile-value { font-size: 22px; font-weight: 800; color: var(--g-ink-1); }
body.v4 #money-body .m1-tile-warn .m1-tile-label { color: var(--peach-fg); }
body.v4 #money-body .m1-tile-warn .m1-tile-value { color: var(--peach-fg); }

/* "Needs chasing" section head. */
body.v4 #money-body .m1-qhead { display: flex; align-items: center; gap: 10px; margin: 2px 0 10px; }
body.v4 #money-body .m1-qlab { font-size: 13px; font-weight: 700; color: var(--g-ink-1); }
body.v4 #money-body .m1-qct {
  font-size: 11px; font-weight: 700; color: var(--g-ink-2);
  background: var(--g-100); border-radius: var(--r-pill); padding: 2px 9px;
}
body.v4 #money-body .m1-qline { flex: 1; height: 1px; background: var(--g-rule); }

/* Chasing list rows. */
body.v4 #money-body .m1-list { display: flex; flex-direction: column; gap: 8px; }
body.v4 #money-body .m1-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--g-border); border-radius: var(--r-md);
  background: var(--card); padding: 11px 14px;
}
body.v4 #money-body .m1-row-body { min-width: 0; }
body.v4 #money-body .m1-row-title { font-size: 13.5px; font-weight: 700; color: var(--g-ink-1); }
body.v4 #money-body .m1-row-meta { font-size: 11.5px; color: var(--g-ink-3); margin-top: 3px; }
body.v4 #money-body .m1-pill {
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: var(--r-pill);
  text-transform: uppercase; letter-spacing: 0.03em;
}
body.v4 #money-body .m1-pill-butter { background: var(--c-butter); color: var(--on-amber); }
body.v4 #money-body .m1-pill-sky    { background: var(--mint-bg);   color: var(--mint-fg); }
body.v4 #money-body .m1-pill-peach  { background: var(--c-peach);   color: var(--peach-fg); }
body.v4 #money-body .m1-row-action { flex-shrink: 0; text-decoration: none; }

/* Empty state. */
body.v4 #money-body .m1-empty {
  border: 1px solid var(--g-border); border-radius: var(--r-md);
  background: var(--card); padding: 20px; text-align: center;
}
body.v4 #money-body .m1-empty-title { font-size: 14px; font-weight: 700; color: var(--g-ink-1); }
body.v4 #money-body .m1-empty-sub { font-size: 12px; color: var(--g-ink-3); margin-top: 6px; line-height: 1.5; }

/* ── MOBILE: money ── */
@media (max-width: 767.98px) {
  /* Tiles stack two-up then full; hero stacks; rows become cards; 44px CTAs. */
  body.v4 #money-body .m1-hero { flex-direction: column; align-items: stretch; }
  body.v4 #money-body .m1-pace { align-self: flex-start; }
  body.v4 #money-body .m1-tiles { grid-template-columns: 1fr 1fr; gap: 9px; }
  body.v4 #money-body .m1-tile-value { font-size: 19px; }
  body.v4 #money-body .m1-row { flex-direction: column; align-items: stretch; gap: 10px; }
  body.v4 #money-body .m1-row-action {
    width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: center;
  }
}

/* ── FEAT: one-queue ── */
/* The unified Speed Work surface ("The One Queue / Today"): a digest strip,
   a capped "Do these first" band and a "Worth a look" band, each row a left
   chip + title/meta + ONE primary action and a dismiss. Lives inside the
   Speed Work overlay body (body.v4 .sw-overlay / .sw-body), so these rules
   are scoped the same way and inherit the modal's surface. Tokens only. */
body.v4 .sw-oq { display: flex; flex-direction: column; gap: 6px; }

/* Digest strip - counts + a one-line hint, cherry left-border like the mock. */
body.v4 .sw-oq-digest {
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
  background: var(--paper-3); border: 1px solid var(--line);
  border-left: 4px solid var(--cherry); border-radius: 14px;
  padding: 13px 16px; margin-bottom: 10px;
}
body.v4 .sw-oq-dnum { display: flex; flex-direction: column; line-height: 1.1; }
body.v4 .sw-oq-dnum b { color: var(--cherry); font-size: 21px; font-weight: 800; }
body.v4 .sw-oq-dnum span { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
body.v4 .sw-oq-dhint { flex: 1; min-width: 160px; font-size: 12.5px; color: var(--ink-3); }

/* Band header. */
body.v4 .sw-oq-band { display: flex; align-items: center; gap: 9px; margin: 12px 0 6px; }
body.v4 .sw-oq-band-l { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
body.v4 .sw-oq-band-c { font-size: 11px; font-weight: 700; color: var(--ink-4); background: rgba(0,0,0,.05); border-radius: 999px; padding: 1px 8px; }
body.v4 .sw-oq-band-line { flex: 1; height: 1px; background: var(--line); }

body.v4 .sw-oq-list { display: flex; flex-direction: column; gap: 8px; }
body.v4 .sw-oq-empty { font-size: 12.5px; color: var(--ink-4); padding: 8px 2px; }

/* One row: chip · main · actions. */
body.v4 .sw-oq-row {
  display: flex; align-items: center; gap: 13px;
  background: var(--paper-3); border: 1px solid var(--line);
  border-radius: 14px; padding: 12px 14px;
}
body.v4 .sw-oq-chip {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800; color: var(--ink-1);
  background: rgba(0,0,0,.05);
}
body.v4 .sw-oq-chip--high { background: var(--cherry-bg); color: var(--cherry); }
body.v4 .sw-oq-chip--mid  { background: var(--c-butter); color: var(--on-butter); }
body.v4 .sw-oq-chip--low  { background: rgba(0,0,0,.05); color: var(--ink-3); }
body.v4 .sw-oq-chip--none { background: rgba(0,0,0,.05); color: var(--ink-4); }
body.v4 .sw-oq-chip--task { background: var(--c-mint);   color: var(--on-mint); }
body.v4 .sw-oq-chip--episode { background: var(--c-sky); color: var(--on-sky); }
body.v4 .sw-oq-chip--flag { background: var(--c-peach);  color: var(--on-amber); }

body.v4 .sw-oq-main { flex: 1; min-width: 0; }
body.v4 .sw-oq-title { font-size: 14px; font-weight: 700; color: var(--ink-1); line-height: 1.25; }
body.v4 .sw-oq-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
body.v4 .sw-oq-why { font-size: 12px; color: var(--cherry); font-weight: 600; }

/* Source chip - pastel pairs (mirrors the mockup's per-source colours). */
body.v4 .sw-oq-src {
  font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 2px 9px;
  letter-spacing: .01em;
}
body.v4 .sw-oq-src--lilac { background: var(--c-lilac); color: var(--on-lilac); }
body.v4 .sw-oq-src--sky   { background: var(--c-sky);   color: var(--on-sky); }
body.v4 .sw-oq-src--peach { background: var(--c-peach); color: var(--on-amber); }
body.v4 .sw-oq-src--mint  { background: var(--c-mint);  color: var(--on-mint); }

/* Row actions - primary + dismiss. Override the base .sw-btn--ghost
   margin-left:auto so the two buttons stay grouped at the row's right. */
body.v4 .sw-oq-acts { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; }
body.v4 .sw-oq-acts .sw-btn--ghost { margin-left: 0; }
body.v4 a.sw-oq-link { text-decoration: none; }

/* Show-more / back affordances. */
body.v4 .sw-oq-more { align-self: flex-start; margin-top: 4px; }
body.v4 .sw-oq-back {
  background: none; border: none; color: var(--ink-3); font-size: 12.5px; font-weight: 600;
  cursor: pointer; padding: 2px 0; margin-bottom: 10px; font-family: inherit;
}
body.v4 .sw-oq-back:hover { color: var(--cherry); }

/* ── MOBILE: one-queue ── */
/* One column, full-width thumb-zone actions, 44px targets, no horizontal
   scroll. Additive @media - zero desktop regression. */
@media (max-width: 767.98px) {
  body.v4 .sw-oq-digest { gap: 12px 16px; padding: 12px 14px; }
  body.v4 .sw-oq-dhint { flex-basis: 100%; }
  body.v4 .sw-oq-row { flex-wrap: wrap; align-items: flex-start; padding: 12px; gap: 11px; }
  body.v4 .sw-oq-chip { width: 40px; height: 40px; }
  body.v4 .sw-oq-main { flex: 1 1 calc(100% - 53px); }
  /* Actions drop to a full-width row in the thumb zone, side by side. */
  body.v4 .sw-oq-acts { flex: 1 1 100%; width: 100%; }
  body.v4 .sw-oq-acts .sw-btn { flex: 1; min-height: 44px; justify-content: center; }
  body.v4 .sw-oq-acts .sw-btn--ghost { flex: 0 0 auto; }
  body.v4 .sw-oq-more { width: 100%; min-height: 44px; justify-content: center; }
}

/* ── FEAT: batch-decide ── */
/* Mid-band ("Worth a look") batch bar (Simplification #3). Threshold-dismiss
   chips + inline confirm reuse the long-tail bulk write; the apply-suggestions
   line reuses the per-row decision write. Tokens only; scoped under the recs
   tab so nothing leaks. The per-row "Suggest: accept/pass" chip is a sibling of
   the existing .rr-chip row meta. */
body.v4 .velocity-ag.recs-impact .rec-mid-batch {
  display: flex; flex-direction: column; gap: 10px;
  margin: 0 2px 12px; padding: 12px 14px;
  border: 1px solid var(--g-border); border-left: 3px solid var(--lilac);
  border-radius: var(--r-sm); background: var(--g-surface);
}
body.v4 .velocity-ag.recs-impact .rec-mid-batch .mbb-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
body.v4 .velocity-ag.recs-impact .rec-mid-batch .mbb-l {
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--g-ink-3);
}
body.v4 .velocity-ag.recs-impact .mbb-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--g-ink-2);
  background: var(--card, var(--g-surface)); border: 1px solid var(--g-border);
  border-radius: var(--r-pill); padding: 5px 11px; cursor: pointer; font-family: var(--fd);
}
body.v4 .velocity-ag.recs-impact .mbb-chip:hover { border-color: var(--cherry); }
body.v4 .velocity-ag.recs-impact .mbb-chip.on {
  background: var(--cherry-bg); border-color: var(--cherry); color: var(--cherry);
}
body.v4 .velocity-ag.recs-impact .mbb-chip:disabled { opacity: .45; cursor: default; }
body.v4 .velocity-ag.recs-impact .mbb-chip .mbb-cn {
  font-size: 10.5px; font-weight: 700; background: var(--neutral-bg); color: var(--g-ink-3);
  border-radius: var(--r-pill); padding: 1px 7px;
}
body.v4 .velocity-ag.recs-impact .mbb-chip.on .mbb-cn { background: var(--cherry); color: var(--on-accent); }

/* Inline confirm bar - same chrome language as the long-tail bulk-bar. */
body.v4 .velocity-ag.recs-impact .mbb-confirm {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--hero-1); color: var(--on-accent);
  border-radius: var(--r-sm); padding: 11px 14px; box-shadow: var(--sh-2);
}
body.v4 .velocity-ag.recs-impact .mbb-confirm .mbb-ct {
  flex: 1 1 240px; font-size: 12.5px; color: rgba(255,255,255,.85); line-height: 1.5;
}
body.v4 .velocity-ag.recs-impact .mbb-confirm .mbb-ct b { color: var(--on-accent); }
body.v4 .velocity-ag.recs-impact .mbb-confirm .vr-cta.sec {
  background: rgba(255,255,255,.12); color: var(--on-accent); border: 1px solid rgba(255,255,255,.2);
}

/* Keith pre-pass apply line. */
body.v4 .velocity-ag.recs-impact .mbb-suggest {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
body.v4 .velocity-ag.recs-impact .mbb-suggest .mbb-st {
  flex: 1 1 240px; font-size: 12.5px; color: var(--g-ink-3); line-height: 1.5;
}
body.v4 .velocity-ag.recs-impact .mbb-suggest .mbb-st b { color: var(--g-ink-1); }

/* Per-row suggestion chip. */
body.v4 .velocity-ag.recs-impact .rr-suggest {
  display: inline-block; font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; border-radius: var(--r-pill); padding: 2px 8px;
}
body.v4 .velocity-ag.recs-impact .rr-suggest.acc { background: var(--c-mint); color: var(--on-mint); }
body.v4 .velocity-ag.recs-impact .rr-suggest.pass { background: var(--c-rose); color: var(--on-rose); }

/* ── MOBILE: batch-decide ── */
@media (max-width: 767.98px) {
  body.v4 .velocity-ag.recs-impact .rec-mid-batch { margin: 0 0 12px; }
  body.v4 .velocity-ag.recs-impact .mbb-chip { min-height: 44px; flex: 1 1 auto; justify-content: center; -webkit-tap-highlight-color: transparent; }
  body.v4 .velocity-ag.recs-impact .mbb-confirm { flex-direction: column; align-items: stretch; }
  body.v4 .velocity-ag.recs-impact .mbb-confirm .mbb-ct { flex: 1 1 100%; }
  body.v4 .velocity-ag.recs-impact .mbb-confirm .vr-cta { width: 100%; min-height: 44px; }
  body.v4 .velocity-ag.recs-impact .mbb-suggest { flex-direction: column; align-items: stretch; }
  body.v4 .velocity-ag.recs-impact .mbb-suggest .vr-cta { width: 100%; min-height: 44px; }
}

/* ── FEAT: approvals ── */
/* Approve-by-reply v1 (Simplification #5) - the IN-APP "approve all" card in
   Keith's brief rail. A numbered list of pending, reversible advance_stage
   approvals; each row + an "Approve all" routes through /api/keith/execute.
   Wears the SAME .keithb-group card chrome as the rest of the brief. Tokens
   only - no hardcoded colours, no !important. */
.keithb-approvals .kb-appr-note {
  font-size: 11.5px; color: var(--ink-3); line-height: 1.45; margin-bottom: 10px;
}
.keithb-approvals .kb-appr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.keithb-approvals .kb-appr-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 0; border-top: 1px solid var(--rule-soft);
}
.keithb-approvals .kb-appr-row:first-child { border-top: 0; padding-top: 2px; }
.keithb-approvals .kb-appr-num {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: var(--cherry);
  background: var(--cherry-bg); margin-top: 1px;
}
.keithb-approvals .kb-appr-text {
  flex: 1; min-width: 0; font-size: 13px; font-weight: 600;
  color: var(--ink-1); line-height: 1.35;
}
.keithb-approvals .kb-appr-one { flex: 0 0 auto; padding: 5px 12px; font-size: 12px; white-space: nowrap; }
.keithb-approvals .kb-appr-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rule-soft);
}
.keithb-approvals .kb-appr-prog { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.keithb-approvals .kb-appr-all { flex: 0 0 auto; }

/* ── MOBILE: approvals ── */
/* One column, full-width 44px buttons, no horizontal scroll. Additive - zero
   desktop regression. */
@media (max-width: 767.98px) {
  .keithb-approvals .kb-appr-row { flex-wrap: wrap; }
  .keithb-approvals .kb-appr-text { flex: 1 1 calc(100% - 30px); }
  .keithb-approvals .kb-appr-one { flex: 1 1 100%; width: 100%; min-height: 44px; }
  .keithb-approvals .kb-appr-foot { flex-direction: column; align-items: stretch; gap: 8px; }
  .keithb-approvals .kb-appr-prog { text-align: center; }
  .keithb-approvals .kb-appr-all { width: 100%; min-height: 44px; }
}

/* ── FEAT: one-chat ── */
/* The persona switcher: a row of chips at the top of the Keith chat surface
   (between the toolbar and the thread). Keith is the default; each director
   chip routes the next message through /api/chat instead. Light-surface pills
   matching .kc-tool; the active chip is cherry-filled (the spec mockup's rose
   "Keith" pill + ink director chips). */
.kc-personabar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--line-2);
  background: var(--surface);
  backdrop-filter: var(--blur);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.kc-personabar::-webkit-scrollbar { display: none; }
.kc-persona {
  flex: 0 0 auto;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .12s, color .12s, background .12s;
  font-family: inherit;
}
.kc-persona:hover { border-color: var(--cherry); color: var(--cherry); }
.kc-persona.on {
  background: var(--cherry);
  border-color: var(--cherry);
  color: var(--on-accent);
}

/* ── MOBILE: one-chat ── */
@media (max-width: 768px) {
  /* The chip row scrolls horizontally (no page overflow); 44px touch targets;
     hover is meaningless on touch, so style the pressed state instead. */
  body.v4 .kc-personabar {
    padding: 9px 12px;
    gap: 6px;
    flex-wrap: nowrap;
  }
  body.v4 .kc-persona {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    -webkit-tap-highlight-color: transparent;
  }
  body.v4 .kc-persona:active {
    background: var(--cherry);
    border-color: var(--cherry);
    color: var(--on-accent);
  }
}

/* ════════════════════════════════════════════════════════════════════════
   ── V2-SHELL ──  Wave 1 of the approved V2 redesign.
   The horizontal topbar band is removed; search, the user pill, the theme
   toggle, the bell / what's-new / chat cluster all move into the left rail
   (.sb.sidebar). CSS lifted verbatim from _V2_SHELL.html (the .sh-* layer),
   with the prototype's --g-* / --apl-* tokens resolving against the live
   aliases already defined in this file. Loaded last → wins the cascade.
   ════════════════════════════════════════════════════════════════════════ */

/* topbar band removed in markup; neutralise any residual reference + reclaim
   the space so page content begins at the very top of the main column. */
body.v4 .topbar{ display:none; }
body.v4 .main{ padding-top:18px; }

/* rail becomes a flex column so the foot pins to the bottom */
body.v4 .sidebar.sb{ display:flex; flex-direction:column; }

/* ── search inside the rail (under the brand) ─────────────────────────── */
body.v4 .sh-railsearch{
  position:relative; margin:2px 2px 12px; display:flex; align-items:center;
}
body.v4 .sh-railsearch .sh-search-ic{
  position:absolute; left:11px; top:50%; transform:translateY(-50%);
  width:15px; height:15px; pointer-events:none; color:var(--g-ink-4);
}
body.v4 .sh-railsearch input{
  width:100%; box-sizing:border-box; height:34px;
  padding:0 44px 0 34px;
  background:var(--paper-2); color:var(--g-ink-1);
  border:1px solid var(--g-rule); border-radius:11px;
  font:inherit; font-size:13px; letter-spacing:-.006em;
  box-shadow:inset 0 1px 1px rgba(0,0,0,.02);
  transition:border-color var(--el-t2) var(--el-ease), box-shadow var(--el-t2) var(--el-ease), background var(--el-t2) var(--el-ease);
}
body.v4 .sh-railsearch input::placeholder{ color:var(--g-ink-4); }
body.v4 .sh-railsearch input:hover{ background:var(--paper-3); }
body.v4 .sh-railsearch input:focus{
  outline:none; background:var(--surface);
  border-color:rgba(0,113,227,.45); box-shadow:var(--el-focus);
}
body.v4 .sh-kbd{
  position:absolute; right:9px; top:50%; transform:translateY(-50%);
  display:inline-flex; align-items:center; gap:1px;
  font-size:10.5px; font-weight:600; color:var(--g-ink-4);
  padding:2px 6px; border-radius:6px; border:none;
  background:rgba(0,0,0,.04); box-shadow:inset 0 0 0 1px var(--g-rule);
  cursor:pointer; letter-spacing:.02em; font-variant-numeric:tabular-nums;
}
body.v4 .sh-kbd:hover{ color:var(--g-ink-2); }
body.v4.dark .sh-railsearch input{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.10); color:var(--apl-ink); }
body.v4.dark .sh-railsearch input:hover{ background:rgba(255,255,255,.06); }
body.v4.dark .sh-railsearch input:focus{ background:rgba(255,255,255,.08); border-color:rgba(56,151,255,.5); }
body.v4.dark .sh-railsearch input::placeholder{ color:var(--apl-ink-4); }
body.v4.dark .sh-railsearch .sh-search-ic{ color:var(--apl-ink-4); }
body.v4.dark .sh-kbd{ background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.10); color:var(--apl-ink-4); }

/* push the foot (feedback + actions + user) to the bottom of the rail */
body.v4 .sb-foot{ margin-top:auto; padding:10px 4px 2px; }
body.v4 .sb-foot .sb-feedback{ margin-bottom:8px; }

/* ── rail action cluster - bell · what's-new · speed-work · chat ───────── */
/* W1-RAIL: all four are now circular .tb-ic icon-buttons, so the cluster is a
   single non-wrapping row. The dark rail is ~220px wide; the .sb-foot padding
   (10px 4px) leaves ~212px, and 4×38px buttons + 3×6px gaps = ~170px - a tidy
   centred row with headroom. nowrap is what guarantees the single row. */
body.v4 .sh-railactions{
  display:flex; align-items:center; justify-content:center;
  gap:6px; flex-wrap:nowrap; margin:0 2px 8px;
}
body.v4 .sh-railactions:empty{ display:none; }
/* the injected quick-action icon buttons (.tb-ic / .notif-bell / version /
   speed-work) keep their own styling; here we only sit them in a row. */
body.v4 .sh-railactions .tb-ic,
body.v4 .sh-railactions .notif-bell-btn{ position:relative; flex:none; }

/* ── the user pill, in the rail foot, under Feedback ───────────────────── */
body.v4 .sh-userwrap{ position:relative; }
body.v4 .sh-userpill{
  display:flex; align-items:center; gap:10px; width:100%; box-sizing:border-box;
  padding:7px 8px 7px 7px; border:1px solid transparent; border-radius:13px;
  background:transparent; cursor:pointer; font:inherit; text-align:left;
  transition:background var(--el-t2) var(--el-ease), border-color var(--el-t2) var(--el-ease);
}
body.v4 .sh-userpill:hover{ background:var(--paper-2); border-color:var(--g-rule); }
body.v4 .sh-userpill.is-open{ background:var(--paper-3); border-color:var(--g-rule); }
body.v4 .sh-avatar{
  width:30px; height:30px; flex:none; border-radius:9px; display:grid; place-items:center;
  background:var(--g-blue); color:var(--on-accent);
  font-size:11.5px; font-weight:700; letter-spacing:-.01em;
  box-shadow:0 1px 2px rgba(0,0,0,.12);
}
body.v4 .sh-user-text{ flex:1; min-width:0; line-height:1.15; }
body.v4 .sh-user-name{ font-size:12.5px; font-weight:600; color:var(--g-ink-1); letter-spacing:-.008em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.v4 .sh-user-role{ font-size:10.5px; color:var(--g-ink-4); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.v4 .sh-user-chev{
  flex:none; width:14px; height:14px; color:var(--g-ink-4);
  transition:transform var(--el-t2) var(--el-spring);
}
body.v4 .sh-userpill.is-open .sh-user-chev{ transform:rotate(180deg); }
body.v4.dark .sh-userpill:hover{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.08); }
body.v4.dark .sh-userpill.is-open{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.08); }
body.v4.dark .sh-user-name{ color:var(--apl-ink); }
body.v4.dark .sh-user-role{ color:var(--apl-ink-4); }
body.v4.dark .sh-user-chev{ color:var(--apl-ink-4); }

/* upward dropdown - opens ABOVE the pill (it lives at the bottom) */
body.v4 .sh-usermenu{
  position:absolute; bottom:calc(100% + 8px); left:0; right:0; z-index:60;
  background:var(--surface); border:1px solid var(--g-border);
  border-radius:15px; padding:6px;
  box-shadow:var(--el-e4), var(--el-rim);
  transform-origin:bottom center;
  animation:sh-menu-rise var(--el-t2) var(--el-spring) both;
}
body.v4 .sh-usermenu[hidden]{ display:none; }
@keyframes sh-menu-rise{ from{opacity:0; transform:translateY(6px) scale(.98)} to{opacity:1; transform:translateY(0) scale(1)} }
body.v4 .sh-menu-item{
  display:flex; align-items:center; gap:10px; width:100%; box-sizing:border-box;
  padding:9px 10px; border:none; border-radius:9px; background:transparent;
  font:inherit; font-size:13px; font-weight:500; color:var(--g-ink-2);
  letter-spacing:-.006em; cursor:pointer; text-decoration:none; text-align:left;
  transition:background var(--el-t1) linear, color var(--el-t1) linear;
}
body.v4 .sh-menu-item .sh-mi-ic{ width:16px; height:16px; flex:none; color:var(--g-ink-4); }
body.v4 .sh-menu-item:hover{ background:var(--g-blue-soft); color:var(--g-ink-1); }
body.v4 .sh-menu-item:hover .sh-mi-ic{ color:var(--g-blue); }
body.v4 .sh-menu-divider{ height:1px; background:var(--g-rule); margin:5px 6px; }

/* ── the light/dark toggle, living inside the dropdown ─────────────────── */
body.v4 .sh-themerow{
  display:flex; align-items:center; gap:10px; width:100%; box-sizing:border-box;
  padding:6px 8px 6px 10px; border-radius:9px;
}
body.v4 .sh-themerow .sh-mi-ic{ width:16px; height:16px; flex:none; color:var(--g-ink-4); }
body.v4 .sh-theme-lbl{ font-size:13px; font-weight:500; color:var(--g-ink-2); letter-spacing:-.006em; }
body.v4 .sh-themetoggle{
  margin-left:auto;
  flex:none; width:40px; height:24px; border-radius:var(--r-pill); border:none; cursor:pointer;
  background:rgba(0,0,0,.14); position:relative; padding:0;
  transition:background var(--el-t2) var(--el-ease);
}
body.v4 .sh-themetoggle .sh-knob{
  position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
  background:var(--on-accent); box-shadow:0 1px 3px rgba(0,0,0,.3);
  transition:transform var(--el-t2) var(--el-spring);
}
body.v4.dark .sh-themetoggle{ background:var(--g-blue); }
body.v4.dark .sh-themetoggle .sh-knob{ transform:translateX(16px); }
body.v4.dark .sh-menu-item{ color:var(--apl-ink-2); }
body.v4.dark .sh-menu-item:hover{ background:var(--apl-blue-soft); color:var(--apl-ink); }
body.v4.dark .sh-theme-lbl{ color:var(--apl-ink-2); }
body.v4.dark .sh-themerow .sh-mi-ic,
body.v4.dark .sh-menu-item .sh-mi-ic{ color:var(--apl-ink-4); }

/* supplier "view as" eyebrow now sits under the rail brand, not the topbar */
body.v4 #topbar-supplier-eye{
  display:block; margin:0 2px 10px; padding:5px 10px;
  background:var(--cherry-bg); color:var(--cherry);
  border-radius:8px; font-size:11px; font-weight:600; letter-spacing:.01em;
}

/* ── MOBILE: V2-SHELL ──
   The rail is hidden < 768px (the bottom-tab bar from mobile-nav.js takes
   over). The rail-mounted search, user menu, theme + bell would be unreachable
   there, so we re-float the search to the top of the page body and keep the
   user/theme/feedback reachable via the existing "More" sheet (mobile-nav.js,
   which already clones the nav + drives #tb6-theme + opens feedback) and the
   bell via its own panel. */
@media (max-width: 767.98px){
  /* Re-show the rail container as a top-pinned search shell (overrides the
     `display:none` set in the MOBILE: shell block above - this rule is later
     in source so it wins without !important). */
  body.v4 .sidebar.sb{
    display:block; position:sticky; top:0; z-index:40;
    width:auto; height:auto; min-height:0; padding:10px 16px 0;
    background:transparent; border:none; box-shadow:none; overflow:visible;
  }
  /* hide everything in the rail except the search row */
  body.v4 .sidebar.sb > *{ display:none; }
  body.v4 .sidebar.sb .sh-railsearch{ display:flex; margin:0; }
  body.v4 .sidebar.sb .sh-railsearch input{ font-size:16px; height:40px; }  /* 16px = no iOS zoom */
}

/* ════════════════════════════════════════════════════════════════════════
   ── V2-CRAFT (el-) ──  Elite craft layer, additive + conservative.
   Wave 1 ports ONLY the global foundation from _V2_ELITE.html: the elevation
   ladder + rim + motion + focus tokens (defined in the token region above),
   plus three light, app-wide touches - a soft blue focus ring, tabular lining
   numerals on data figures, and global reduced-motion honour. Per-page hero
   rebuilds and component restyles are LATER waves; nothing here overrides
   existing page rules beyond focus-visible + numeral rendering.
   ════════════════════════════════════════════════════════════════════════ */

/* Global focus discipline - soft blue ring, never a hard outline. Lifted from
   _V2_ELITE.html and widened to the live button classes. */
body.v4 .btn-primary:focus-visible,
body.v4 .btn-secondary:focus-visible,
body.v4 .btn-ghost:focus-visible,
body.v4 .el-btn:focus-visible,
body.v4 .sh-userpill:focus-visible,
body.v4 .sh-menu-item:focus-visible,
body.v4 .sh-themetoggle:focus-visible,
body.v4 .sh-kbd:focus-visible{
  outline:none; box-shadow:var(--el-focus); border-radius:var(--r-pill);
}

/* Tabular lining numerals + tight tracking for data figures - lifted from
   _V2_ELITE.html, scoped to existing live number classes so totals/counts/
   stats align without touching layout. */
body.v4 .stat-value, body.v4 .kpi-value, body.v4 .metric-value,
body.v4 .count, body.v4 .notif-badge, body.v4 .m-tab-badge,
body.v4 .sw-tb-count, body.v4 .sh-kbd{
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Honour reduced motion globally for the elite interactions. */
@media (prefers-reduced-motion: reduce){
  body.v4 .sh-usermenu,
  body.v4 .sh-userpill,
  body.v4 .sh-themetoggle .sh-knob,
  body.v4 .sh-user-chev{ transition:none; animation:none; }
}

/* ════════════════════════════════════════════════════════════════════════
   ── V2-TODAY ──  Wave 2 of the approved V2 redesign - the Today / Speed
   Work landing surface, rendered INLINE in the page body (no overlay).

   Lifted character-by-character from the approved prototype _V2_SHELL.html
   (the "TODAY (V2 unified ranked stream)" + ELITE refinement blocks). The
   live Speed Work component now emits this markup inline: a dark "next move"
   lead OBJECT that doubles as the page header (TODAY · date folded in) →
   eyebrow → title → context → an at-a-glance artefact strip → ONE cherry
   primary action; then the ranked queue as a borderless floating list grouped
   "Do these first / This week", urgency left-edges, real stage pills,
   right-aligned due labels. Tokens only; reuses the live .dv2-row row-task /
   rt-* / stage-* grammar (the page is wrapped in .v2-today.dv2-row). The
   inline host has no page-hero title above it - the lead object IS the header.
   ════════════════════════════════════════════════════════════════════════ */

/* inline host: matches the dashboard rhythm, the lead object is the top of
   the page (the page-hero title is removed in markup) */
body.v4 .sw-inline-host{ display:block; }
body.v4 .v2-today{ display:flex; flex-direction:column; }

/* ── the "next move" lead - the canonical dark hero gradient, reused verbatim
      (same gradient + ::before glow as .hero), elevated to a premium object ── */
body.v4 .v2-lead{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,var(--ink-1) 0%,var(--ink-deep) 100%);
  border:1px solid rgba(255,255,255,.08);
  padding:30px 32px 28px; margin-bottom:26px;
  border-radius:24px; color:var(--on-accent);
  box-shadow:var(--el-e5), var(--el-rim-dark);
  transition:transform var(--el-t3) var(--el-spring), box-shadow var(--el-t3) var(--el-ease);
  will-change:transform;
}
/* deeper, deliberate lilac→blue inner glow */
body.v4 .v2-lead::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 680px 360px at 8% -16%, rgba(94,92,230,.40), transparent 60%),
    radial-gradient(ellipse 560px 300px at 102% 116%, rgba(0,113,227,.30), transparent 62%),
    radial-gradient(ellipse 300px 200px at 50% 50%, rgba(124,182,255,.05), transparent 70%);
}
/* a hairline of light along the very top edge of the object */
body.v4 .v2-lead::after{
  content:''; position:absolute; left:24px; right:24px; top:0; height:1px; z-index:2;
  background:linear-gradient(90deg, transparent, rgba(124,182,255,.55), rgba(255,255,255,.35), transparent);
  pointer-events:none;
}
body.v4 .v2-lead > *{ position:relative; z-index:1; }
body.v4 .v2-lead:hover{ transform:translateY(-3px); box-shadow:var(--el-e5), 0 60px 120px -34px rgba(20,22,40,.42), var(--el-rim-dark); }

/* page identity folded INTO the lead object (TODAY · date) */
body.v4 .v2-lead .sh-leadident{
  display:flex; align-items:center; gap:10px; margin-bottom:16px;
}
body.v4 .v2-lead .sh-ident-eye{
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.92);
}
body.v4 .v2-lead .sh-ident-dot{ width:3px; height:3px; border-radius:50%; background:rgba(255,255,255,.35); }
body.v4 .v2-lead .sh-ident-date{
  font-size:11.5px; font-weight:500; color:rgba(255,255,255,.6);
  letter-spacing:.01em; font-variant-numeric:tabular-nums;
}
/* the lead's own "Your next move" eyebrow now reads as a quiet sub-label */
body.v4 .v2-lead .v2-lead-eye{
  margin-top:2px; font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--hero-blue); display:flex; align-items:center; gap:8px; margin-bottom:14px;
}
body.v4 .v2-lead .v2-lead-eye::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--hero-blue); box-shadow:0 0 0 4px rgba(124,182,255,.18);
}
body.v4 .v2-lead-title{
  font-family:var(--g-fd); font-size:29px; font-weight:700; letter-spacing:-.026em;
  line-height:1.1; margin:0 0 12px; max-width:24ch; color:var(--on-accent);
}
body.v4 .v2-lead-context{ font-size:14.5px; line-height:1.62; color:rgba(255,255,255,.74); max-width:60ch; }

/* embedded artefact: a small "the deal at a glance" card inside the object */
body.v4 .el-lead-artefact{
  margin-top:20px; padding:16px 18px; border-radius:16px;
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.10), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  display:flex; align-items:center; gap:0; flex-wrap:wrap;
}
body.v4 .el-art-cell{ display:flex; flex-direction:column; gap:3px; padding:0 22px; position:relative; }
body.v4 .el-art-cell:first-child{ padding-left:0; }
body.v4 .el-art-cell + .el-art-cell::before{
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:26px; background:rgba(255,255,255,.12);
}
body.v4 .el-art-k{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.5); font-weight:600; }
body.v4 .el-art-v{
  font-size:17px; font-weight:600; color:#fff; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums lining-nums;
}

/* lead foot: the ONE cherry primary in the whole Today view + a glass ghost */
body.v4 .v2-lead-foot{ display:flex; align-items:center; gap:12px; margin-top:22px; flex-wrap:wrap; }
body.v4 .v2-lead .el-cta-cherry{
  background:var(--cherry); color:var(--on-accent); border:none;
  padding:11px 22px; font-size:13.5px; font-weight:600; border-radius:var(--r-pill);
  letter-spacing:-.006em; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--g-fd); text-decoration:none;
  box-shadow:0 1px 2px rgba(0,0,0,.18), 0 8px 22px -8px rgba(184,0,43,.55);
  transition:transform var(--el-t2) var(--el-spring), box-shadow var(--el-t2) var(--el-ease), background var(--el-t1) linear;
}
body.v4 .v2-lead .el-cta-cherry:hover{ transform:translateY(-1px); background:var(--cherry-soft); box-shadow:0 2px 4px rgba(0,0,0,.2), 0 12px 30px -8px rgba(184,0,43,.65); }
body.v4 .v2-lead .el-cta-cherry:active{ transform:translateY(0) scale(.985); }
body.v4 .v2-lead .v2-cta.ghost{
  background:rgba(255,255,255,.07); color:var(--on-accent);
  border:1px solid rgba(255,255,255,.14); padding:11px 20px;
  font-size:13.5px; font-weight:600; border-radius:var(--r-pill); letter-spacing:-.005em;
  cursor:pointer; display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  font-family:var(--g-fd); transition:background var(--el-t2) var(--el-ease);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
}
body.v4 .v2-lead .v2-cta.ghost:hover{ background:rgba(255,255,255,.14); }
body.v4 .v2-lead .v2-lead-meta{ margin-left:auto; font-size:12px; color:rgba(255,255,255,.55); display:flex; align-items:center; gap:8px; }
body.v4 .v2-lead .v2-lead-meta .dot{ width:3px; height:3px; border-radius:50%; background:rgba(255,255,255,.4); }
body.v4 .v2-lead .v2-lead-meta .sw-prio{ letter-spacing:.04em; font-size:10.5px; text-transform:uppercase; font-weight:600; padding:4px 10px; border-radius:var(--r-pill); }

/* ── the queue: borderless, whitespace-grouped, refined rhythm ── */
body.v4 .v2-stream-head{ display:flex; align-items:baseline; gap:10px; margin:6px 2px 14px; }
body.v4 .v2-stream-head .v2-sh-title{ font-family:var(--g-fd); font-size:13px; font-weight:700; letter-spacing:.02em; color:var(--g-ink-1); }
body.v4 .v2-stream-head .v2-sh-sub{ font-size:12.5px; color:var(--g-ink-3); }
body.v4 .v2-stream-head .v2-sh-count{ margin-left:auto; font-size:12px; color:var(--g-ink-3); }

body.v4 .v2-stream{
  background:var(--paper-3); border:none; border-radius:20px;
  box-shadow:var(--el-e3), var(--el-rim);
  padding:8px 22px; overflow:hidden;
}
/* the stream rows reuse the live .dv2-row .row-task grid; add the urgency
   left-edge + divider + hover (the prototype's borderless treatment) */
body.v4 .v2-stream .row-task{
  margin-left:-22px; margin-right:-22px; padding:15px 22px 15px 19px;
  border-left:2px solid transparent; border-bottom:1px solid rgba(0,0,0,.045);
  border-radius:0;
  transition:background var(--el-t2) var(--el-ease);
}
body.v4.dark .v2-stream .row-task{ border-bottom-color:rgba(255,255,255,.06); }
body.v4 .v2-stream .row-task:last-child{ border-bottom:none; }
body.v4 .v2-stream .row-task:hover{ background:rgba(0,113,227,.035); }
/* urgency = a quiet left edge; cherry only for the truly-now */
body.v4 .v2-stream .row-task.v2-edge-now{ border-left-color:var(--cherry); }
body.v4 .v2-stream .row-task.v2-edge-soon{ border-left-color:rgba(196,113,0,.55); }
body.v4 .v2-stream .row-task.v2-edge-cal{ border-left-color:rgba(0,113,227,.4); }
body.v4 .v2-stream .row-task.v2-edge-low{ border-left-color:transparent; }
/* rank index chip in the tick column - tabular, hairline ring */
body.v4 .v2-rank{
  width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  font-size:11px; font-weight:600; color:var(--g-ink-4);
  background:transparent; box-shadow:inset 0 0 0 1px rgba(0,0,0,.10);
  font-variant-numeric:tabular-nums lining-nums;
}
body.v4.dark .v2-rank{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); }
body.v4 .v2-stream .rt-title{ font-size:14px; letter-spacing:-.012em; font-weight:600; }
body.v4 .v2-stream .rt-when.due-today{ color:var(--cherry); font-weight:600; }
body.v4 .v2-stream .rt-when.due-tom{ color:var(--amber); font-weight:600; }

/* section eyebrow between stream groups */
body.v4 .v2-grouplbl{
  font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--g-ink-4); margin:24px 2px 10px;
}

/* count-tick: subtle entrance for the lead + stream when Today mounts */
@keyframes v2t-rise{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)} }
body.v4 .sw-inline-host .v2-lead{ animation:v2t-rise var(--el-t3) var(--el-ease) both; }
body.v4 .sw-inline-host .v2-stream{ animation:v2t-rise var(--el-t3) var(--el-ease) 60ms both; }

/* ── MOBILE: v2-today ──
   One column, the lead object compresses, the artefact strip wraps to a 2-col
   grid, and the stream rows keep the live mobile row-task behaviour. Additive
   @media only - zero desktop regression, tokens only. */
@media (max-width: 767.98px){
  body.v4 .v2-lead{
    padding:22px 18px 20px; border-radius:20px; margin-bottom:18px;
    box-shadow:var(--el-e4), var(--el-rim-dark);
  }
  body.v4 .v2-lead::after{ left:16px; right:16px; }
  body.v4 .v2-lead-title{ font-size:23px; max-width:none; }
  body.v4 .v2-lead-context{ font-size:13.5px; max-width:none; }
  /* artefact cells flow to a 2-up grid; drop the vertical dividers */
  body.v4 .el-lead-artefact{ gap:14px 0; padding:14px 16px; }
  body.v4 .el-art-cell{ flex:0 0 50%; padding:0; }
  body.v4 .el-art-cell + .el-art-cell::before{ display:none; }
  /* the foot stacks: the cherry primary goes full-width thumb-zone */
  body.v4 .v2-lead-foot{ gap:10px; }
  body.v4 .v2-lead .el-cta-cherry{ flex:1 1 100%; justify-content:center; min-height:44px; }
  body.v4 .v2-lead .v2-cta.ghost{ flex:1 1 auto; justify-content:center; min-height:44px; }
  body.v4 .v2-lead .v2-lead-meta{ margin-left:0; flex:1 1 100%; }
  /* the stream tightens to the phone gutter */
  body.v4 .v2-stream{ padding:6px 16px; border-radius:16px; }
  body.v4 .v2-stream .row-task{ margin-left:-16px; margin-right:-16px; padding:13px 16px 13px 14px; min-height:44px; }
  body.v4 .v2-stream-head{ margin:4px 2px 10px; flex-wrap:wrap; }
}

/* ════════════════════════════════════════════════════════════════════════
   ── V2-DASH ──  Wave 3 of the approved V2 redesign - the Dashboard.

   A calm, premium "how the business is doing" read. Lifted from the approved
   prototype (_V2_DESIGN_REAL.html #page-dashboard + the el- elite craft layer
   in _V2_ELITE.html), translated to the live tokens (the prototype's literal
   hexes resolve to --g-*/--cherry-*/--el-* already defined in this file, so no
   css-guard hex cost). Three moves only - the customisable panel SYSTEM
   (panel-kit, drag/resize, picker, skins, undo, layouts, permissions, realtime)
   is untouched; this restyles + gates visibility:

     (a) hero-as-header - the .hero now carries the page identity (today's date
         eyebrow) + a one-line situational summary, with a Read / Customise
         segmented control in a .section-head directly beneath it.
     (b) the Read / Customise gate - the .dv2-rows root carries .is-editing only
         in Customise mode. Read mode (DEFAULT) hides the editing chrome (row
         toolbars, drag handles, gear/remove acts, empty slots, + Add a row).
         NOTHING is removed - customise.js still wires every control; CSS simply
         shows/hides it. Flip is class-only → no panel re-fetch.
     (c) el- craft polish - refined glass on .p (elevation ladder + rim), tabular
         lining numerals on the big numbers, one dark anchor KPI, generous space.
   ════════════════════════════════════════════════════════════════════════ */

/* ── hero-as-header: the situational read sits at the very top ───────────── */
body.v4 .v2-dash-hero{ margin-bottom:16px; }

/* the Read / Customise control row - a quiet section head, action right ── */
body.v4 .v2-dash-shead{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin:6px 2px 16px;
}
body.v4 .v2-dash-shead h2{
  font-family:var(--g-fd); font-size:10.5px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--g-ink-4); margin:0;
}
body.v4 .v2-dash-shead .actions{ display:flex; gap:10px; align-items:center; }

/* the segmented Read | Customise control - glass pill, sliding "on" tab ── */
body.v4 .v2-seg{
  display:inline-flex; align-items:center; gap:2px; padding:3px;
  background:var(--paper-3); border:1px solid var(--g-rule); border-radius:var(--r-pill);
  box-shadow:inset 0 1px 1px rgba(0,0,0,.03);
}
body.v4 .v2-seg button{
  border:none; background:none; cursor:pointer; font:inherit;
  font-size:12px; font-weight:600; letter-spacing:-.004em; color:var(--g-ink-3);
  padding:6px 16px; border-radius:var(--r-pill);
  transition:background var(--el-t2) var(--el-ease), color var(--el-t2) var(--el-ease), box-shadow var(--el-t2) var(--el-ease);
}
body.v4 .v2-seg button:hover{ color:var(--g-ink-1); }
body.v4 .v2-seg button.on{
  background:var(--surface); color:var(--g-ink-1);
  box-shadow:0 1px 2px rgba(0,0,0,.10), var(--el-rim);
}
body.v4 .v2-seg button:focus-visible{ outline:none; box-shadow:var(--el-focus); }
body.v4.dark .v2-seg{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.10); }
body.v4.dark .v2-seg button{ color:var(--apl-ink-3); }
body.v4.dark .v2-seg button:hover{ color:var(--apl-ink); }
body.v4.dark .v2-seg button.on{ background:rgba(255,255,255,.10); color:var(--apl-ink); box-shadow:var(--el-rim-dark); }

/* ── (b) the Read / Customise GATE ──────────────────────────────────────────
   The chrome is present in the DOM at all times (customise.js wires it on
   every paint). In Read mode (.dv2-rows WITHOUT .is-editing) it's hidden; in
   Customise mode (.is-editing) it returns to its normal Wave 197 behaviour.
   We hide by display:none so it's truly inert in read mode (no hover ghost,
   no drag affordance, no tab stop). */
body.v4 .dv2-rows:not(.is-editing) .row-tools{ display:none; }
body.v4 .dv2-rows:not(.is-editing) .p-drag{ display:none; }
body.v4 .dv2-rows:not(.is-editing) .p-acts{ display:none; }
body.v4 .dv2-rows:not(.is-editing) .dv2-slot-empty{ display:none; }
body.v4 .dv2-rows:not(.is-editing) .dv2-addrow{ display:none; }
/* read mode: panels aren't draggable + the head reclaims the drag gutter so
   the title sits flush; the cursor stays default over the (now static) card */
body.v4 .dv2-rows:not(.is-editing) .p[draggable="true"]{ cursor:default; }
body.v4 .dv2-rows:not(.is-editing) .p-head{ padding-top:15px; }
/* a single-panel wide row whose only slot is empty would render an empty band
   in read mode; collapse rows that have no real panels left to show */
body.v4 .dv2-rows:not(.is-editing) .dv2-row:not(:has(.p)){ display:none; }

/* ── (c) el- craft polish on the panel chrome - refined glass + depth ─────── */
body.v4 .dv2-row .p{
  border:1px solid var(--g-border);
  border-radius:var(--r-xl);
  box-shadow:var(--el-e2), var(--el-rim);
  transition:transform var(--el-t3) var(--el-spring), box-shadow var(--el-t3) var(--el-ease);
}
/* in Read mode the panels are a calm gallery - a whisper of lift on hover so
   the read still feels alive without inviting interaction */
body.v4 .dv2-rows:not(.is-editing) .p:hover{ box-shadow:var(--el-e3), var(--el-rim); }
body.v4 .dv2-row .p-head{ padding:16px 18px 10px; }
body.v4 .dv2-row .p-title{ font-family:var(--g-fd); letter-spacing:-.008em; }

/* tabular lining numerals on every dashboard figure - the calm-data read ── */
body.v4 .dv2-row .bignum .bn-num,
body.v4 .dv2-row .stat-value,
body.v4 .dv2-row .bn-delta,
body.v4 .dv2-row .cp-n,
body.v4 .dv2-row .lst-right{
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;
}
/* the big number reads a touch larger + tighter - premium, deliberate */
body.v4 .dv2-row .bignum .bn-num{ font-family:var(--g-fd); letter-spacing:-.03em; }

/* ── the dark ANCHOR KPI - one panel per row reads as the heavyweight ──────
   When a panel is given the dark skin (config.skin = 'dark', via the existing
   settings popover) it becomes the row's anchor: the canonical dark hero
   gradient + rim + a lilac→blue inner glow, the same object language as the
   Today lead. This reuses the existing .p--dark hook - no new class, no JS. */
body.v4 .dv2-row .p--dark{
  background:linear-gradient(180deg,var(--ink-1) 0%,var(--ink-deep) 100%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--el-e4), var(--el-rim-dark);
  color:var(--on-accent);
}
body.v4 .dv2-row .p--dark::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 520px 280px at 6% -18%, rgba(94,92,230,.34), transparent 60%),
    radial-gradient(ellipse 420px 240px at 104% 118%, rgba(0,113,227,.26), transparent 62%);
}
body.v4 .dv2-row .p--dark .bignum .bn-num{ color:var(--on-accent); }
body.v4 .dv2-row .p--dark .bn-sub{ color:rgba(255,255,255,.66); }

/* ── MOBILE: v2-dash ──
   One column (the Wave 197 .dv2-split rules already collapse to 1fr < 768px).
   Here we only re-flow the hero-as-header + the Read/Customise control so the
   segment is reachable in the thumb zone, and keep the gate working on touch.
   Additive @media only - tokens, zero desktop regression. */
@media (max-width: 767.98px){
  body.v4 .v2-dash-shead{
    flex-direction:column; align-items:stretch; gap:10px; margin:4px 2px 14px;
  }
  body.v4 .v2-dash-shead .actions{ justify-content:stretch; }
  /* the segment goes full-width, each half a 44px target */
  body.v4 .v2-dash-shead .v2-seg{ flex:1 1 auto; }
  body.v4 .v2-dash-shead .v2-seg button{ flex:1 1 50%; min-height:38px; text-align:center; }
  /* the panel rhythm tightens to the phone gutter */
  body.v4 .dv2-row .p{ border-radius:var(--r-lg); }
}

/* ════════════════════════════════════════════════════════════════════════
   ── V2-KEITH ──  Wave 4 of the approved V2 redesign - the Keith
   chief-of-staff page.

   Lifted from the approved prototype (_V2_ELITE.html #page-keith + the
   "KEITH - the proactive brief as a floating object" CSS block) and the elite
   craft layer (_V2_ELITE.html el-* tokens). This is a RESTYLE of the live
   keith.js markup - every chat / persona / execute / approvals / drafts
   handler and endpoint is untouched; only the visual layer changes. The
   prototype's literal hexes resolve to --g-* / --cherry / --lilac / --el-*
   tokens already defined in this file (no css-guard hex cost); this block
   loads last so its plain selectors win the cascade WITHOUT !important.

   Five moves:
     (a) hero-as-header - renderPageHero already emits .page-hero-wrap > .hero;
         keith.js now folds the page identity + "he's already looked" sub into
         it. The .kc-toolbar (Plan my day / Drafts / Expand - all wired) goes
         quiet so the persona bar reads as the top of the conversation.
     (b) the conversation column becomes refined glass; the persona pills,
         user/assistant bubbles, suggestion chips + composer get the elite
         polish (soft shadow, spring hover, focus ring).
     (c) the proposal - the LIVE proposal markup is .kc-prop wrapping an
         .es-sec (NOT the prototype's .kc-proposal); the lilac-accent edge is
         applied to that real artefact so a confirm-able proposal reads as a
         crisp white glass card with a thin lilac left edge.
     (d) the daily brief becomes the floating OBJECT - a layered glass card
         with a faint lilac→blue inner glow at the head, the dark "situation"
         head (.keithb-head keeps its --hero-1 gradient), tabular stat cells,
         and ranked next-actions with hover lift + inline action chips.
     (e) one cherry primary where a primary exists (the proposal Confirm).
   ════════════════════════════════════════════════════════════════════════ */

/* ── (a) the toolbar goes quiet - the hero is the header, the persona bar is
      the top of the conversation. The action buttons stay (and stay wired). */
body.v4 .keith-convo .kc-toolbar{
  background:transparent; border-bottom:1px solid var(--line-2);
  padding:12px 18px 10px;
}
body.v4 .keith-convo .kc-toolbar-name{ font-family:var(--g-fd); letter-spacing:-.012em; }

/* ── (b) the conversation column - refined glass object ── */
body.v4 .keith-convo{
  border:1px solid var(--g-border); border-radius:22px;
  box-shadow:var(--el-e3), var(--el-rim);
}
/* persona pills + suggestion chips pick up the elite motion */
body.v4 .keith-convo .kc-persona{ transition:border-color var(--el-t2) var(--el-ease), color var(--el-t2) var(--el-ease), background var(--el-t2) var(--el-ease), transform var(--el-t2) var(--el-spring); }
body.v4 .keith-convo .kc-persona:hover{ transform:translateY(-1px); }
body.v4 .keith-convo .kc-chip{ transition:transform var(--el-t2) var(--el-spring), box-shadow var(--el-t2) var(--el-ease), border-color var(--el-t2) var(--el-ease), color var(--el-t2) var(--el-ease); }
body.v4 .keith-convo .kc-chip:hover{ transform:translateY(-1px); box-shadow:var(--el-e2); }

/* refined bubbles - a whisper of elevation on each, tighter display tracking */
body.v4 .keith-convo .kc-bubble{ box-shadow:var(--el-e1); }
body.v4 .keith-convo .kc-intro-t{ font-family:var(--g-fd); letter-spacing:-.014em; }
body.v4 .keith-convo .kc-name-n{ font-family:var(--g-fd); letter-spacing:-.008em; }

/* the composer - crisp glass bar, soft-blue focus ring (the elite focus) */
body.v4 .keith-convo .kc-composer{
  border:1px solid var(--g-border); border-radius:22px;
  box-shadow:var(--el-e1), var(--el-rim);
  transition:border-color var(--el-t2) var(--el-ease), box-shadow var(--el-t2) var(--el-ease);
}
body.v4 .keith-convo .kc-composer:focus-within{
  border-color:rgba(0,113,227,.45); box-shadow:var(--el-focus);
}
/* the send affordance keeps its cherry - a small, deliberate spring */
body.v4 .keith-convo .kc-send{ transition:transform var(--el-t2) var(--el-spring), background var(--el-t1) linear; }
body.v4 .keith-convo .kc-send:hover{ transform:translateY(-1px); }

/* ── (c) the proposal - live markup is .kc-prop > .es-sec; give that REAL
      artefact the calm white-glass + thin lilac left-edge treatment. The
      prototype styled .kc-proposal; the live page emits .kc-prop, so the
      accent lands on the surface section the confirm button actually sits in. */
body.v4 .kc-prop .es-sec{
  border-radius:16px;
  border:1px solid rgba(94,92,230,.16);
  border-left:3px solid var(--lilac);
  box-shadow:var(--el-e2), var(--el-rim);
}
/* the proposal's "Proposal" kind pill + owner disc read lilac, not the default */
body.v4 .kc-prop .es-sec .es-sec-kindpill{ background:var(--lilac-bg); color:var(--lilac-fg); }
/* the one cherry primary on the page lives on the proposal Confirm */
body.v4 .kc-prop .es-sec .es-form-save{
  box-shadow:0 1px 2px rgba(0,0,0,.14), 0 6px 16px -6px rgba(184,0,43,.5);
  transition:transform var(--el-t2) var(--el-spring), box-shadow var(--el-t2) var(--el-ease);
}
body.v4 .kc-prop .es-sec .es-form-save:hover{ transform:translateY(-1px); }
/* a confirmed proposal settles to the mint "done" read (kept from v1) */
body.v4 .kc-prop.kp-done .es-sec{ border-left-color:var(--good-2); border-color:rgba(29,158,117,.22); }

/* ── (d) the daily brief - the floating object ── */
body.v4 .keith-brief{
  border:none; border-radius:22px;
  box-shadow:var(--el-e4), var(--el-rim);
  background:var(--paper-3);
  overflow:hidden; position:relative;
  /* the rail still scrolls + sticks (live behaviour) - just wears the object */
  display:flex; flex-direction:column; gap:0;
}
/* a faint lilac→blue inner glow at the very top, like Today's object but light */
body.v4 .keith-brief::before{
  content:''; position:absolute; left:0; right:0; top:0; height:170px; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 420px 190px at 14% -30%, rgba(94,92,230,.12), transparent 70%),
    radial-gradient(ellipse 360px 170px at 100% -20%, rgba(0,113,227,.09), transparent 70%);
}
body.v4 .keith-brief > *{ position:relative; z-index:1; }
/* the groups inside the object lose their own card chrome - the object IS the
   card now, so they read as sections of one surface divided by hairlines */
body.v4 .keith-brief .keithb-group{
  background:transparent; border:none; box-shadow:none; backdrop-filter:none;
  border-top:1px solid var(--rule-soft); border-radius:0;
  padding:16px 20px;
}
body.v4 .keith-brief .keithb-group:first-of-type{ border-top:none; }
/* the dark "situation" head keeps its --hero-1 gradient; refine its rhythm */
body.v4 .keith-brief .keithb-head{
  border-radius:0; box-shadow:none; padding:20px 20px 18px;
}
body.v4 .keith-brief .keithb-eye{ letter-spacing:.1em; font-size:11px; }
body.v4 .keith-brief .keithb-situation{ font-size:13.5px; line-height:1.6; }
/* the at-a-glance strip: tabular display numerals, calmer labels */
body.v4 .keith-brief .keithb-today-n{ font-size:24px; font-weight:700; letter-spacing:-.028em; font-variant-numeric:tabular-nums lining-nums; }
body.v4 .keith-brief .keithb-today-l{ font-size:10.5px; letter-spacing:.04em; }
body.v4 .keith-brief .keithb-group-h{ letter-spacing:.06em; font-size:10.5px; }
/* ranked actions: rank chip a clean tabular index, the row lifts on hover */
body.v4 .keith-brief .keithb-action{
  border-top:none; border-radius:12px; padding:10px; margin:0 -10px;
  transition:background var(--el-t2) var(--el-ease);
}
body.v4 .keith-brief .keithb-action + .keithb-action{ border-top:1px solid var(--rule-soft); border-radius:0; }
body.v4 .keith-brief .keithb-action:hover{ background:rgba(0,113,227,.04); border-radius:12px; }
body.v4 .keith-brief .keithb-rank{ font-weight:600; letter-spacing:-.01em; font-variant-numeric:tabular-nums lining-nums; }
body.v4 .keith-brief .keithb-action-t{ font-size:13.5px; letter-spacing:-.01em; font-weight:600; }
body.v4 .keith-brief .keithb-action-w{ font-size:12.5px; line-height:1.5; }
/* the inline "Get Keith's help" action chip keeps its blue but gains the spring */
body.v4 .keith-brief .keithb-help{ transition:transform var(--el-t2) var(--el-spring), filter var(--el-t1) linear; }
body.v4 .keith-brief .keithb-help:hover{ transform:translateY(-1px); }
/* the risk/opp items inside the object read as flat hairline rows too */
body.v4 .keith-brief .keithb-item{ border-top-color:var(--rule-soft); }
/* the Approvals + health footer sit inside the object as further sections */
body.v4 .keith-brief .keithb-approvals{
  background:transparent; border:none; box-shadow:none; backdrop-filter:none;
  border-top:1px solid var(--rule-soft); border-radius:0; padding:16px 20px;
}

/* ── (e) dark-mode - the object + glass read on the dark canvas ── */
body.v4.dark .keith-convo{ border-color:rgba(255,255,255,.10); }
body.v4.dark .keith-convo .kc-composer{ border-color:rgba(255,255,255,.10); }
body.v4.dark .kc-prop .es-sec{ border-color:rgba(125,123,240,.30); border-left-color:var(--lilac); }
body.v4.dark .keith-brief{ background:rgba(255,255,255,.03); }
body.v4.dark .keith-brief::before{
  background:
    radial-gradient(ellipse 420px 190px at 14% -30%, rgba(125,123,240,.18), transparent 70%),
    radial-gradient(ellipse 360px 170px at 100% -20%, rgba(56,151,255,.12), transparent 70%);
}

/* honour reduced motion for the Keith interactions */
@media (prefers-reduced-motion: reduce){
  body.v4 .keith-convo .kc-persona,
  body.v4 .keith-convo .kc-chip,
  body.v4 .keith-convo .kc-send,
  body.v4 .keith-brief .keithb-action,
  body.v4 .keith-brief .keithb-help{ transition:none; }
}

/* ── MOBILE: v2-keith ──
   The keith-grid already collapses to one column < 900px (live rule) and the
   brief-wrap unsticks < 768px (live MOBILE: keith block). Here we only soften
   the object radii for the phone gutter and keep every target ≥44px. Additive
   @media only - tokens, zero desktop regression. */
@media (max-width: 767.98px){
  body.v4 .keith-convo{ border-radius:18px; }
  body.v4 .keith-convo .kc-composer{ border-radius:20px; }
  body.v4 .keith-brief{ border-radius:18px; }
  body.v4 .keith-brief .keithb-head{ padding:18px 16px 16px; }
  body.v4 .keith-brief .keithb-group,
  body.v4 .keith-brief .keithb-approvals{ padding:14px 16px; }
  /* the persona pills + chips keep a comfortable thumb target */
  body.v4 .keith-convo .kc-persona{ min-height:38px; }
  body.v4 .keith-convo .kc-chip{ min-height:38px; }
}

/* ════════════════════════════════════════════════════════════════════════
   ── V2-MONEY ──  Wave 5 of the approved V2 redesign - the Money revenue desk.

   The page identity, the four headline tiles, the "Needs chasing" ranked list
   and the empty state already ship as the live `.m1-*` block (the "FEAT: money"
   region above - `body.v4 #money-body .m1-*`, tokens only, no !important). This
   wave does NOT touch that markup or any handler in money.js (computeMoney /
   buildChasing / loadData / paint / chaseRow are untouched). It is an additive
   ELITE-CRAFT pass, lifted from the approved prototype's elite layer
   (_V2_ELITE.html el- foundation + the dark hero language used by the Today /
   Dashboard leads), translated to live tokens:

     (a) hero-as-header - the `.m1-hero` strip becomes the page's dark anchor
         OBJECT (the canonical ink→ink-deep gradient + lilac/blue inner glow +
         rim), so "Tracking toward £1.5m" + the pace pill read as the page
         identity, exactly like the Today lead and the Dashboard anchor KPI.
     (b) glass money-tiles - refined elevation ladder (--el-e2 + --el-rim),
         tabular lining numerals on the figures, a whisper of lift on hover.
     (c) chasing rows - the same calm glass + hover micro-lift, the pills get
         elite tracking; the overdue/warn tones stay token-driven so they flip
         in dark automatically.
     (d) full dark-mode - the live `.m1-*` block had no `body.v4.dark` variants;
         the surface/border/ink tokens already flip, here we only refine the
         glass rim, the warn tones and the hero glow for the dark canvas.

   All selectors are `body.v4 #money-body …` (ID-scoped → higher specificity
   than the FEAT: money base, so these win the cascade WITHOUT !important).
   Loaded last → wins. css-guard: tokens / rgba only, zero new !important.
   ════════════════════════════════════════════════════════════════════════ */

/* ── (a) hero-as-header - the dark anchor object ──────────────────────────────
   The base tone is the DARK-STABLE --ink-deep token (deep ink in BOTH themes,
   so the object never inverts in dark mode - unlike --g-ink-1 which flips to
   light). The depth + premium read comes entirely from the ::before lilac/blue
   glow + the rim, not a second colour stop, so we stay token-only (no literal
   hex → css-guard hex count stays flat). */
body.v4 #money-body .m1-hero{
  position:relative; overflow:hidden;
  background:var(--ink-deep);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-xl);
  box-shadow:var(--el-e4), var(--el-rim-dark);
  padding:22px 26px;
}
body.v4 #money-body .m1-hero::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 560px 280px at 8% -20%, rgba(94,92,230,.34), transparent 60%),
    radial-gradient(ellipse 460px 250px at 104% 120%, rgba(0,113,227,.26), transparent 62%);
}
body.v4 #money-body .m1-hero-text,
body.v4 #money-body .m1-hero .m1-pace{ position:relative; z-index:1; }
body.v4 #money-body .m1-hero-title{
  font-family:var(--g-fd); font-size:26px; font-weight:800; letter-spacing:-.024em;
  color:rgba(255,255,255,1); line-height:1.05;
  font-variant-numeric:tabular-nums lining-nums; font-feature-settings:"tnum" 1,"lnum" 1;
}
body.v4 #money-body .m1-hero-sub{
  font-size:13px; color:rgba(255,255,255,.72); margin-top:6px; line-height:1.5; max-width:680px;
  font-variant-numeric:tabular-nums lining-nums; font-feature-settings:"tnum" 1,"lnum" 1;
}
/* the pace pill sits on the dark object - give the tones a touch more presence */
body.v4 #money-body .m1-pace{
  box-shadow:var(--el-rim); backdrop-filter:var(--g-blur);
  -webkit-backdrop-filter:var(--g-blur);
}

/* ── (b) glass money-tiles - elevation ladder + tabular numerals ──────────── */
body.v4 #money-body .m1-tile{
  box-shadow:var(--el-e2), var(--el-rim);
  transition:transform var(--el-t3) var(--el-spring), box-shadow var(--el-t3) var(--el-ease);
}
body.v4 #money-body .m1-tile:hover{ transform:translateY(-1px); box-shadow:var(--el-e3), var(--el-rim); }
body.v4 #money-body .m1-tile-label{ font-family:var(--g-fd); letter-spacing:.05em; }
body.v4 #money-body .m1-tile-value{
  font-family:var(--g-fd); letter-spacing:-.022em; line-height:1;
  font-variant-numeric:tabular-nums lining-nums; font-feature-settings:"tnum" 1,"lnum" 1;
}

/* ── (c) chasing list - calm glass + micro-lift + elite pill tracking ─────── */
body.v4 #money-body .m1-qlab{ font-family:var(--g-fd); letter-spacing:-.008em; }
body.v4 #money-body .m1-qct{
  font-variant-numeric:tabular-nums lining-nums; font-feature-settings:"tnum" 1,"lnum" 1;
}
body.v4 #money-body .m1-row{
  box-shadow:var(--el-e2), var(--el-rim);
  transition:transform var(--el-t3) var(--el-spring), box-shadow var(--el-t3) var(--el-ease);
}
body.v4 #money-body .m1-row:hover{ transform:translateY(-1px); box-shadow:var(--el-e3), var(--el-rim); }
body.v4 #money-body .m1-row-title{ letter-spacing:-.006em; }
body.v4 #money-body .m1-pill{ letter-spacing:.04em; }
body.v4 #money-body .m1-empty{ box-shadow:var(--el-e2), var(--el-rim); }

/* ── (d) dark-mode - flip the card surface, refine the rim + warn tones ───────
   The FEAT: money base uses var(--card) for the tiles / rows / empty state, but
   --card has no global dark flip (it stays #ffffff), so on the dark canvas those
   surfaces would render white-on-dark. Mirror the Wave-219c idiom: scope a dark
   --card to these surfaces so they read as dark glass with light ink. */
body.v4.dark #money-body .m1-tile,
body.v4.dark #money-body .m1-row,
body.v4.dark #money-body .m1-empty{ --card:var(--g-surface); }
body.v4.dark #money-body .m1-hero{ border-color:rgba(255,255,255,.10); box-shadow:var(--el-e4), var(--el-rim-dark); }
body.v4.dark #money-body .m1-tile,
body.v4.dark #money-body .m1-row,
body.v4.dark #money-body .m1-empty{ box-shadow:var(--el-e2), var(--el-rim-dark); }
body.v4.dark #money-body .m1-tile:hover,
body.v4.dark #money-body .m1-row:hover{ box-shadow:var(--el-e3), var(--el-rim-dark); }
/* warn tile reads as a quiet peach wash rather than peach ink on the dark card */
body.v4.dark #money-body .m1-tile-warn{ background:var(--c-peach); border-color:rgba(242,142,80,.28); }
body.v4.dark #money-body .m1-tile-warn .m1-tile-label,
body.v4.dark #money-body .m1-tile-warn .m1-tile-value{ color:var(--on-amber); }

/* ── MOBILE: v2-money ──
   The live MOBILE: money block (above) already stacks the hero, two-ups the
   tiles, turns rows into full-width cards and gives the CTA a 44px target. Here
   we only soften the new dark hero's radius/padding for the phone gutter and
   keep the title legible at the narrower measure. Additive @media only -
   tokens, zero desktop regression. */
@media (max-width: 767.98px){
  body.v4 #money-body .m1-hero{ border-radius:var(--r-lg); padding:18px 18px; }
  body.v4 #money-body .m1-hero-title{ font-size:22px; }
  body.v4 #money-body .m1-tile{ border-radius:var(--r-lg); }
  body.v4 #money-body .m1-row{ border-radius:var(--r-lg); }
}

/* honour reduced motion for the money micro-lifts */
@media (prefers-reduced-motion: reduce){
  body.v4 #money-body .m1-tile,
  body.v4 #money-body .m1-row{ transition:none; }
}

/* ════════════════════════════════════════════════════════════════════════
   ── V2-SPONSORS ──  Wave 5 of the approved V2 redesign - the Sponsors deals
   desk (route 'monday').

   The deal kanban, the real tab strip (.tabs / .tab / .monday-tabbar), the
   add/edit deal modal (.ep-modal / .monday-deal-modal-card), the Renewals
   cards (#monday-pane .rnw-*) and the Inventory Calendar (#monday-pane .inv-*)
   already ship and are extensively V2-styled (the FEAT: revenue region above +
   the live kanban glass at body.v4 .kanban / .kb-*). This wave changes NOTHING
   those classes DO - every handler in monday.js (tab switch, drag-to-move,
   openDealSurface, saveDeal, the renewal-pitch endpoint, the inventory slot
   modal) is untouched. It is an additive ELITE-CRAFT pass lifted from the
   approved prototype's elite layer (_V2_ELITE.html el- foundation), translated
   to live tokens:

     (a) kanban - the column count number + card name get tabular lining
         numerals + display-font tracking; the card hover micro-lift is upgraded
         to the elite spring + elevation ladder. The base card surface/border
         (existing live !important glass rules) is LEFT as-is; we only refine the
         hover box-shadow/transform, which the base sets WITHOUT !important.
     (b) stage pills - the kb-card mini-pills + the existing pill chips get the
         elite uppercase tracking so the pipeline reads crisp.
     (c) renewals - the #monday-pane .rnw-card glass gets the elevation ladder +
         a micro-lift; the priority left-edge + reach tones stay token-driven so
         they flip in dark automatically.
     (d) the deal-detail modal - .monday-deal-modal-card section heads + fields
         already shipped; here we lift the modal card itself onto the elite
         elevation ladder so it reads as a premium sheet.
     (e) inventory - the Slots|Yield mode-bar + the pacing tracks get the elite
         segmented-control polish and tabular numerals.
     (f) full dark-mode refinement for the renewals cards + mode-bar (the kanban
         + tabs already carry dark rules in the PART B region above).

   Selectors scope to `body.v4 #monday-body …` / `body.v4 #monday-pane …` (ID
   specificity beats the FEAT/live base, so these win WITHOUT !important) and to
   the kanban / modal classes for the non-!important properties only. Loaded
   last → wins. css-guard: tokens / rgba only, zero new !important.
   ════════════════════════════════════════════════════════════════════════ */

/* ── (a) kanban - elite count/name type + refined hover micro-lift ─────────── */
body.v4 #monday-body .kb-head .n{
  font-variant-numeric:tabular-nums lining-nums; font-feature-settings:"tnum" 1,"lnum" 1;
}
body.v4 #monday-body .kb-card-title{ font-family:var(--g-fd); letter-spacing:-.008em; }
/* the base card hover (transform + box-shadow) is NOT !important - upgrade it to
   the elite spring + elevation ladder for a more deliberate, premium lift. */
body.v4 #monday-body .kb-card{
  transition:transform var(--el-t3) var(--el-spring), box-shadow var(--el-t3) var(--el-ease), border-color var(--el-t2) var(--el-ease);
}
body.v4 #monday-body .kb-card:hover{ transform:translateY(-2px); box-shadow:var(--el-e3), var(--el-rim); }
body.v4.dark #monday-body .kb-card:hover{ box-shadow:var(--el-e3), var(--el-rim-dark); }

/* ── (b) stage / mini pills - elite uppercase tracking ────────────────────── */
body.v4 #monday-body .kb-card-mini-pill{ letter-spacing:.03em; text-transform:uppercase; }

/* ── (c) renewals cards - elevation ladder + micro-lift ───────────────────── */
body.v4 #monday-pane .rnw-card{
  box-shadow:var(--el-e2), var(--el-rim);
  transition:transform var(--el-t3) var(--el-spring), box-shadow var(--el-t3) var(--el-ease);
}
body.v4 #monday-pane .rnw-card:hover{ transform:translateY(-1px); box-shadow:var(--el-e3), var(--el-rim); }
body.v4 #monday-pane .rnw-card-name{ font-family:var(--g-fd); letter-spacing:-.008em; }
body.v4 #monday-pane .rnw-pill{ letter-spacing:.02em; }
body.v4 #monday-pane .rnw-card-reach,
body.v4 #monday-pane .rnw-reach{
  font-variant-numeric:tabular-nums lining-nums; font-feature-settings:"tnum" 1,"lnum" 1;
}
/* the rnw-card base uses var(--card) (no global dark flip) - scope a dark
   surface so the renewals cards read as dark glass, not white-on-dark. */
body.v4.dark #monday-pane .rnw-card{ --card:var(--g-surface); box-shadow:var(--el-e2), var(--el-rim-dark); }
body.v4.dark #monday-pane .rnw-card:hover{ box-shadow:var(--el-e3), var(--el-rim-dark); }

/* ── (d) the deal-detail / add-deal modal - premium sheet elevation ───────── */
body.v4 .monday-deal-modal-card{
  box-shadow:var(--el-e4), var(--el-rim);
}
body.v4 .monday-deal-modal-card .ep-modal-title{ font-family:var(--g-fd); letter-spacing:-.012em; }
body.v4.dark .monday-deal-modal-card{ box-shadow:var(--el-e4), var(--el-rim-dark); }

/* ── (e) inventory - segmented mode-bar polish + tabular numerals ─────────── */
body.v4 #monday-pane .inv-mode-btn{
  transition:background var(--el-t2) var(--el-ease), color var(--el-t2) var(--el-ease), box-shadow var(--el-t2) var(--el-ease);
}
body.v4 #monday-pane .inv-mode-btn.on{ box-shadow:0 1px 2px rgba(0,0,0,.10), var(--el-rim); }
body.v4 #monday-pane .inv-mode-btn:focus-visible{ outline:none; box-shadow:var(--el-focus); }
body.v4 #monday-pane .inv-pace-count,
body.v4 #monday-pane .inv-m-sub{
  font-variant-numeric:tabular-nums lining-nums; font-feature-settings:"tnum" 1,"lnum" 1;
}
body.v4.dark #monday-pane .inv-modebar{ background:rgba(255,255,255,.06); }
body.v4.dark #monday-pane .inv-mode-btn.on{ box-shadow:var(--el-rim-dark); }

/* ── MOBILE: v2-sponsors ──
   The live MOBILE: monday block (kanban → swipe lanes), MOBILE: revenue
   (renewals → one column, yield table → cards) and MOBILE: deal-surface blocks
   already carry the phone layout. Here we only soften the new elite radii for
   the phone gutter and keep the modal sheet's lift readable. Additive @media
   only - tokens, zero desktop regression. */
@media (max-width: 767.98px){
  body.v4 #monday-pane .rnw-card{ border-radius:var(--r-lg); }
  body.v4 .monday-deal-modal-card{ box-shadow:var(--el-e3), var(--el-rim); }
}

/* honour reduced motion for the sponsor micro-lifts */
@media (prefers-reduced-motion: reduce){
  body.v4 #monday-body .kb-card,
  body.v4 #monday-pane .rnw-card,
  body.v4 #monday-pane .inv-mode-btn{ transition:none; }
}

/* ════════════════════════════════════════════════════════════════════════
   ── V2-AGENTS ──  Wave 6 of the approved V2 redesign - the AI Team /
   Recommendations desk (route 'agents', the .velocity-ag.recs-impact tab).

   The goal-impact triage logic already ships and is unchanged: the score
   bands (assignBands / Do these first · Worth a look · Long tail), the
   .score chips, the per-goal impact bars, the triage strip, one-tap
   ✓/✕ + undo, bulk-dismiss, the mid-band batch bar, the Recommendations |
   AI Meetings page toggle, the score-detail modal/sheet and realtime are
   ALL the load-bearing code in agents-recommendations.js - this wave does
   NOT touch any loader, decision write, band, toggle or realtime handler.

   It is an additive ELITE-CRAFT pass + a hero-as-header, lifted from the
   approved prototype's elite layer (_V2_ELITE.html el- foundation + the
   dark hero language used by the Today / Dashboard / Money leads), and
   matched to the approved AI Team page in _V2_PAGES2.html:

     (a) hero-as-header - the head + the old separate dark "scorecard" strip
         are folded into ONE dark anchor OBJECT (the canonical ink→ink-deep
         gradient + lilac/blue inner glow + rim) summarising the decision
         load: "N high-impact moves today, out of TOTAL the team surfaced",
         four stat cells (do these first / worth a look / long tail / new
         today) read straight off the live banding, ONE cherry primary
         "Review the top N" + a secondary "Sweep the long tail", and a
         "N directors active" stamp. ONE hero per page (Peter's rule).
     (b) elite bands + rows - refined glass on the rows (elevation ladder +
         rim + a whisper of hover lift), tabular lining numerals on the
         score chips and band counts, calmer band-header tracking. The
         score-chip tones stay token-driven so they flip in dark.
     (c) the supporting strips - triage strip, the batch bars, the mid-band
         control and the bulk-dismiss confirm get the same calm glass + el-
         elevation so the whole desk reads as one elite surface.
     (d) full dark-mode - the new hero is dark-stable; the row/strip glass
         picks up --el-rim-dark and the surface tokens already flip.

   Selectors are scoped `body.v4 .velocity-ag.recs-impact …` (the live tab
   scope, same specificity as the W1-W5 base but later in source → wins the
   cascade WITHOUT new !important). Tokens / rgba only; zero new hardcoded
   hex; zero new !important.
   ════════════════════════════════════════════════════════════════════════ */

/* ── (a) hero-as-header - the dark anchor object ─────────────────────────────
   The head mount (#vel-hero / .vel-modebar) becomes the page's dark anchor.
   Base tone is the dark-stable --ink-deep so it never inverts in dark mode;
   depth comes from the ::before lilac/blue glow + the rim (token-only). */
body.v4 .velocity-ag.recs-impact #vel-hero.vel-modebar{
  position:relative; overflow:hidden;
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap;
  background:var(--ink-deep);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-xl);
  box-shadow:var(--el-e4), var(--el-rim-dark);
  padding:22px 26px; margin-bottom:16px;
}
body.v4 .velocity-ag.recs-impact #vel-hero.vel-modebar::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 560px 280px at 6% -24%, rgba(94,92,230,.34), transparent 60%),
    radial-gradient(ellipse 460px 250px at 104% 124%, rgba(0,113,227,.26), transparent 62%);
}
body.v4 .velocity-ag.recs-impact #vel-hero.vel-modebar > *{ position:relative; z-index:1; }
body.v4 .velocity-ag.recs-impact .agh-main{ min-width:0; max-width:680px; }

/* eyebrow */
body.v4 .velocity-ag.recs-impact .agh-eyebrow{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--g-fd); font-size:10.5px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.62); margin-bottom:11px;
}
body.v4 .velocity-ag.recs-impact .agh-eb-dot{
  width:6px; height:6px; border-radius:50%; background:var(--cherry);
  box-shadow:0 0 0 3px rgba(184,0,43,.28);
}

/* title + sub - the decision-load summary reads as the page identity */
body.v4 .velocity-ag.recs-impact .agh-title{
  font-family:var(--g-fd); font-size:25px; font-weight:800; letter-spacing:-.022em;
  color:rgba(255,255,255,1); line-height:1.08;
  font-variant-numeric:tabular-nums lining-nums; font-feature-settings:"tnum" 1,"lnum" 1;
}
body.v4 .velocity-ag.recs-impact .agh-sub{
  font-size:13px; color:rgba(255,255,255,.72); margin-top:8px; line-height:1.5; max-width:600px;
  font-variant-numeric:tabular-nums lining-nums; font-feature-settings:"tnum" 1,"lnum" 1;
}
body.v4 .velocity-ag.recs-impact .agh-sub .digest-hot{ color:rgba(255,138,150,1); font-weight:600; }

/* four decision-load cells, inline on the dark object */
body.v4 .velocity-ag.recs-impact .agh-stats{
  display:flex; align-items:stretch; gap:0; margin:18px 0 4px; flex-wrap:wrap;
}
body.v4 .velocity-ag.recs-impact .agh-cell{ padding:0 22px 0 0; margin-right:22px; }
body.v4 .velocity-ag.recs-impact .agh-vd{ width:1px; align-self:stretch; background:rgba(255,255,255,.12); margin:2px 0; }
body.v4 .velocity-ag.recs-impact .agh-n{
  font-family:var(--g-fd); font-size:26px; font-weight:700; letter-spacing:-.02em; line-height:1;
  color:rgba(255,255,255,.92);
  font-variant-numeric:tabular-nums lining-nums; font-feature-settings:"tnum" 1,"lnum" 1;
}
body.v4 .velocity-ag.recs-impact .agh-cell.is-first .agh-n{ color:rgba(95,208,138,1); }
body.v4 .velocity-ag.recs-impact .agh-cell.is-new .agh-n{ color:rgba(255,138,150,1); }
body.v4 .velocity-ag.recs-impact .agh-l{
  font-size:10.5px; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
  color:rgba(255,255,255,.5); margin-top:7px;
}

/* actions - ONE cherry primary, a white-outline secondary, a quiet ghost */
body.v4 .velocity-ag.recs-impact .agh-acts{ margin-top:18px; gap:10px; }
body.v4 .velocity-ag.recs-impact .agh-acts .vr-cta{
  padding:9px 18px; font-size:12.5px; border-radius:var(--r-pill);
  box-shadow:0 4px 14px rgba(184,0,43,.30);
  transition:transform var(--el-t2) var(--el-spring), box-shadow var(--el-t2) var(--el-ease), filter var(--el-t2) var(--el-ease);
}
body.v4 .velocity-ag.recs-impact .agh-acts .vr-cta:hover{ transform:translateY(-1px); filter:brightness(1.04); }
body.v4 .velocity-ag.recs-impact .agh-acts .vr-cta.sec{
  background:rgba(255,255,255,.10); color:rgba(255,255,255,.92);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
body.v4 .velocity-ag.recs-impact .agh-acts .vr-cta.sec:hover{ background:rgba(255,255,255,.16); }
body.v4 .velocity-ag.recs-impact .agh-acts .vr-cta.ghost{
  background:transparent; color:rgba(255,255,255,.62);
  box-shadow:none; font-weight:600;
}
body.v4 .velocity-ag.recs-impact .agh-acts .vr-cta.ghost:hover{ color:rgba(255,255,255,.92); transform:none; }
body.v4 .velocity-ag.recs-impact .agh-acts .vr-cta:disabled{ opacity:.6; cursor:default; transform:none; }

/* "N directors active" stamp, pinned top-right on the dark object */
body.v4 .velocity-ag.recs-impact .agh-stamp{
  position:relative; z-index:1; flex-shrink:0;
  display:inline-flex; align-items:center; gap:7px; align-self:flex-start;
  font-family:var(--g-fd); font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(255,255,255,.62);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r-pill); padding:6px 13px;
  box-shadow:var(--el-rim-dark);
}
body.v4 .velocity-ag.recs-impact .agh-dot{
  width:6px; height:6px; border-radius:50%; background:rgba(95,208,138,1);
  box-shadow:0 0 0 3px rgba(52,199,89,.22);
}

/* the now-empty scorecard mount must reclaim no space (markup folded to hero) */
body.v4 .velocity-ag.recs-impact #vel-scorecard:empty{ display:none; }

/* ── (b) elite bands + rows - refined glass, tabular numerals, micro-lift ───── */
body.v4 .velocity-ag.recs-impact .rrow{
  box-shadow:var(--el-e2), var(--el-rim);
  transition:transform var(--el-t3) var(--el-spring), box-shadow var(--el-t3) var(--el-ease), border-color var(--el-t2) var(--el-ease);
}
body.v4 .velocity-ag.recs-impact .rrow:hover{ transform:translateY(-1px); box-shadow:var(--el-e3), var(--el-rim); }
/* tabular lining numerals on the big score figure + band counts */
body.v4 .velocity-ag.recs-impact .score .sn,
body.v4 .velocity-ag.recs-impact .band-h .bh-c,
body.v4 .velocity-ag.recs-impact .rec-band-summary,
body.v4 .velocity-ag.recs-impact .rx-big,
body.v4 .velocity-ag.recs-impact .ep-math b{
  font-variant-numeric:tabular-nums lining-nums; font-feature-settings:"tnum" 1,"lnum" 1;
}
/* the score chip gets a touch of lift + the el- rim so it reads as a token */
body.v4 .velocity-ag.recs-impact .score{
  box-shadow:var(--el-e2), var(--el-rim);
  transition:transform var(--el-t2) var(--el-spring), box-shadow var(--el-t2) var(--el-ease);
}
body.v4 .velocity-ag.recs-impact .score:hover{ transform:translateY(-1px); box-shadow:var(--el-e3), var(--el-rim); }
body.v4 .velocity-ag.recs-impact .score.s-none{ box-shadow:none; }
body.v4 .velocity-ag.recs-impact .score .sn{ font-family:var(--g-fd); letter-spacing:-.018em; }
/* band headers - calmer elite tracking on the label + count */
body.v4 .velocity-ag.recs-impact .band-h .bh-t{ font-family:var(--g-fd); }
/* the title gets the display face + tighter tracking */
body.v4 .velocity-ag.recs-impact .rr-title{ font-family:var(--g-fd); letter-spacing:-.008em; }
/* the row ✓/✕ quick actions get a spring + the el- focus ring */
body.v4 .velocity-ag.recs-impact .rr-btn{
  transition:transform var(--el-t2) var(--el-spring), background var(--el-t2) var(--el-ease), color var(--el-t2) var(--el-ease), border-color var(--el-t2) var(--el-ease);
}
body.v4 .velocity-ag.recs-impact .rr-btn:hover{ transform:translateY(-1px); }
body.v4 .velocity-ag.recs-impact .rr-btn:focus-visible,
body.v4 .velocity-ag.recs-impact .score:focus-visible,
body.v4 .velocity-ag.recs-impact .rrow.is-openable:focus-visible{
  outline:none; box-shadow:var(--el-focus);
}

/* ── (c) supporting strips - calm glass + el- elevation ──────────────────────
   The triage strip, the batch bars and the mid-band control all sit on the
   page canvas; give them the same elevation ladder + rim as the rows so the
   desk reads as one elite surface. Existing tokens/layout untouched. */
body.v4 .velocity-ag.recs-impact .triage-strip{ box-shadow:var(--el-e2), var(--el-rim); }
body.v4 .velocity-ag.recs-impact .triage-strip .ts-stat .n{ font-family:var(--g-fd); }
body.v4 .recs-impact .rec-batch-bar{ box-shadow:var(--el-e2), var(--el-rim); }
body.v4 .velocity-ag.recs-impact .rec-mid-batch{ box-shadow:var(--el-e2), var(--el-rim); }
body.v4 .velocity-ag.recs-impact .gl-item{ box-shadow:var(--el-rim); }

/* ── (d) dark-mode - refine the glass rim for the dark canvas ────────────────
   The surface/border/ink tokens already flip; here we only swap the rim to
   the dark variant on the elevated surfaces so the glass doesn't read with a
   bright top edge on the dark canvas. */
body.v4.dark .velocity-ag.recs-impact #vel-hero.vel-modebar{ border-color:rgba(255,255,255,.10); box-shadow:var(--el-e4), var(--el-rim-dark); }
body.v4.dark .velocity-ag.recs-impact .rrow{ box-shadow:var(--el-e2), var(--el-rim-dark); }
body.v4.dark .velocity-ag.recs-impact .rrow:hover{ box-shadow:var(--el-e3), var(--el-rim-dark); }
body.v4.dark .velocity-ag.recs-impact .score{ box-shadow:var(--el-e2), var(--el-rim-dark); }
body.v4.dark .velocity-ag.recs-impact .score:hover{ box-shadow:var(--el-e3), var(--el-rim-dark); }
body.v4.dark .velocity-ag.recs-impact .score.s-none{ box-shadow:none; }
body.v4.dark .velocity-ag.recs-impact .triage-strip,
body.v4.dark .velocity-ag.recs-impact .rec-mid-batch,
body.v4.dark .recs-impact .rec-batch-bar{ box-shadow:var(--el-e2), var(--el-rim-dark); }

/* ── MOBILE: V2-AGENTS ──
   The live MOBILE: recs block (above) already stacks the rrow grid into a
   card, gives the ✓/✕ 44px targets, and stacks the bars. Here we only soften
   the new dark hero for the phone gutter, wrap the stat cells two-up and make
   the hero CTAs full-bleed 44px targets. Additive @media only - tokens, zero
   desktop regression. */
@media (max-width: 767.98px){
  body.v4 .velocity-ag.recs-impact #vel-hero.vel-modebar{
    border-radius:var(--r-lg); padding:18px 18px; flex-direction:column;
  }
  body.v4 .velocity-ag.recs-impact .agh-title{ font-size:21px; }
  body.v4 .velocity-ag.recs-impact .agh-stats{ gap:0; }
  /* two-up the cells: hide the vertical dividers, let cells wrap to a grid */
  body.v4 .velocity-ag.recs-impact .agh-vd{ display:none; }
  body.v4 .velocity-ag.recs-impact .agh-stats{ display:grid; grid-template-columns:1fr 1fr; gap:16px 12px; }
  body.v4 .velocity-ag.recs-impact .agh-cell{ padding:0; margin:0; }
  body.v4 .velocity-ag.recs-impact .agh-acts{ width:100%; flex-direction:column; }
  body.v4 .velocity-ag.recs-impact .agh-acts .vr-cta{ width:100%; min-height:44px; -webkit-tap-highlight-color:transparent; }
  body.v4 .velocity-ag.recs-impact .agh-stamp{ align-self:flex-start; }
}

/* honour reduced motion for the V2-AGENTS micro-lifts */
@media (prefers-reduced-motion: reduce){
  body.v4 .velocity-ag.recs-impact .rrow,
  body.v4 .velocity-ag.recs-impact .score,
  body.v4 .velocity-ag.recs-impact .rr-btn,
  body.v4 .velocity-ag.recs-impact .agh-acts .vr-cta{ transition:none; }
}

/* ════════════════════════════════════════════════════════════════════════
   ── V2-PIPELINE ──  Wave 7 of the approved V2 redesign - the Episodes
   pipeline page (hero-as-header + the "Needs you now" rail above the calm
   6-stage glass kanban).

   CSS lifted from the approved prototype _V2_PAGES2.html (the Episodes page:
   the .p2-lead hero DNA folded onto the live .hero via .p2-hero, the
   .p2-artefact at-a-glance strip, the .p2-sec eyebrow + .p2-rail / .p2-railcard
   urgency rail). The 6-stage kanban already ships as a glass board (.kb-col /
   .kb-card, styled earlier in this file) - it is intentionally left calm and
   untouched here so the rich rail sits above a quiet board, exactly as the
   prototype intends. Tokens/rgba only; hex in the prototype (#1d1d1f / #161618
   gradient, cherry hover) resolved to --ink-1 / --ink-deep / --cherry +
   brightness, so no new hardcoded hex enters the file. body.v4-scoped, loaded
   last → wins the cascade. The board's existing rules are not duplicated.
   ════════════════════════════════════════════════════════════════════════ */

/* ── hero-as-header: the elite dark-glass gradient layered onto the live
      .hero markup, scoped to .p2-hero so no other page's hero changes ── */
body.v4 .hero.p2-hero{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--ink-1) 0%, var(--ink-deep) 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px; padding:28px 32px 26px;
  box-shadow:var(--el-e5), var(--el-rim-dark);
}
body.v4 .hero.p2-hero::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 680px 360px at 8% -16%, rgba(94,92,230,.40), transparent 60%),
    radial-gradient(ellipse 560px 300px at 102% 116%, rgba(0,113,227,.30), transparent 62%),
    radial-gradient(ellipse 300px 200px at 50% 50%, rgba(124,182,255,.05), transparent 70%);
}
body.v4 .hero.p2-hero::after{
  content:''; position:absolute; left:24px; right:24px; top:0; height:1px; z-index:2;
  background:linear-gradient(90deg, transparent, rgba(124,182,255,.55), rgba(255,255,255,.35), transparent);
  pointer-events:none;
}
body.v4 .hero.p2-hero > *{ position:relative; z-index:1; }
body.v4 .hero.p2-hero .hero-eyebrow{
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--hero-blue);
}
body.v4 .hero.p2-hero .hero-title{
  font-size:28px; letter-spacing:-.026em; line-height:1.12; max-width:34ch;
}
body.v4 .hero.p2-hero .hero-sub{ color:rgba(255,255,255,.74); }

/* the at-a-glance artefact inside the hero (same frosted glass as Today's lead) */
body.v4 .hero.p2-hero .p2-artefact{
  margin-top:20px; padding:14px 18px; border-radius:16px;
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.10), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  display:flex; align-items:center; gap:0; flex-wrap:wrap;
}
body.v4 .hero.p2-hero .p2-art-cell{ display:flex; flex-direction:column; gap:3px; padding:0 22px; position:relative; }
body.v4 .hero.p2-hero .p2-art-cell:first-child{ padding-left:0; }
body.v4 .hero.p2-hero .p2-art-cell + .p2-art-cell::before{ content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:26px; background:rgba(255,255,255,.12); }
body.v4 .hero.p2-hero .p2-art-k{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.5); font-weight:600; }
body.v4 .hero.p2-hero .p2-art-v{ font-size:17px; font-weight:600; color:var(--on-accent); letter-spacing:-.02em; font-variant-numeric:tabular-nums lining-nums; }
body.v4 .hero.p2-hero .p2-art-v.pos{ color:var(--good-2); }

/* ── section eyebrow that introduces the rail ── */
body.v4 .p2-sec{ font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--g-ink-4); margin:22px 2px 12px; display:flex; align-items:baseline; gap:10px; }
body.v4 .p2-sec .p2-sec-sub{ font-size:11px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--g-ink-4); }

/* ── the "needs you now" rail - rich cherry-edged cards above the calm board ── */
body.v4 .p2-rail{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }
body.v4 .p2-railcard{
  background:var(--paper-3); border-radius:16px; padding:16px 17px;
  box-shadow:var(--el-e2), var(--el-rim);
  border-left:3px solid var(--cherry); position:relative; cursor:pointer;
  transition:transform var(--el-t2) var(--el-spring), box-shadow var(--el-t2) var(--el-ease);
}
body.v4 .p2-railcard.soon{ border-left-color:var(--warn); }
body.v4 .p2-railcard.cal{ border-left-color:var(--g-blue); }
body.v4 .p2-railcard:hover{ transform:translateY(-2px); box-shadow:var(--el-e3), var(--el-rim); }
body.v4 .p2-railcard:focus-visible{ outline:none; box-shadow:var(--el-focus), var(--el-rim); }
body.v4 .p2-rc-top{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
body.v4 .p2-rc-ic{ min-width:30px; height:30px; padding:0 7px; border-radius:9px; display:grid; place-items:center; font-size:11px; font-weight:700; background:var(--cherry-bg); color:var(--cherry); font-variant-numeric:tabular-nums; flex:none; }
body.v4 .p2-rc-stage{ margin-left:auto; font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--g-ink-4); }
body.v4 .p2-rc-title{ font-size:14px; font-weight:600; letter-spacing:-.012em; color:var(--g-ink-1); line-height:1.3; }
body.v4 .p2-rc-meta{ font-size:12px; color:var(--g-ink-3); margin-top:5px; line-height:1.45; }
body.v4 .p2-rc-meta b{ color:var(--g-ink-2); font-weight:600; }
body.v4 .p2-rc-foot{ display:flex; align-items:center; gap:8px; margin-top:12px; }
body.v4 .p2-rc-when{ margin-left:auto; font-size:11.5px; font-weight:600; color:var(--cherry); font-variant-numeric:tabular-nums; }
body.v4 .p2-rc-when.soon{ color:var(--warn-fg); }
body.v4 .p2-rc-when.cal{ color:var(--g-blue); }

/* board breathing room - keep the kanban calm beneath the rich rail */
body.v4 .hero.p2-hero ~ #ep-body .kanban,
body.v4 #ep-hero ~ #ep-body .kanban{ gap:14px; }

/* dark mode - keep the hero rim dark-on-dark legible */
body.v4.dark .hero.p2-hero{ box-shadow:var(--el-e5), var(--el-rim-dark); }
body.v4.dark .p2-railcard{ box-shadow:var(--el-e2), var(--el-rim-dark); }

/* ── MOBILE: V2-PIPELINE ──
   The hero gutter softens, the artefact cells wrap two-up (drop the vertical
   dividers), and the rail collapses to a single column. Additive @media only;
   tokens; zero desktop regression. The board's own mobile block (the swipe
   lanes, earlier in this file) is untouched. */
@media (max-width: 767.98px){
  body.v4 .hero.p2-hero{ border-radius:var(--r-lg); padding:20px 18px; }
  body.v4 .hero.p2-hero .hero-title{ font-size:22px; }
  body.v4 .hero.p2-hero .p2-artefact{ display:grid; grid-template-columns:1fr 1fr; gap:14px 10px; }
  body.v4 .hero.p2-hero .p2-art-cell{ padding:0; }
  body.v4 .hero.p2-hero .p2-art-cell + .p2-art-cell::before{ display:none; }
  body.v4 .p2-rail{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  body.v4 .p2-railcard{ transition:none; }
}

/* ════════════════════════════════════════════════════════════════════════
   ── V2-EPSURFACE ──  Wave 7 of the approved V2 redesign - the Episode
   Surface (the per-episode production cockpit).

   The approved prototype (_V2_EPISODE.html) renders this surface with a NEW
   .ep-* visual grammar: a guest-name-first dark hero-as-header, a refined
   horizontal stage stepper, the signature ADVANCE TRAY (remaining/cleared
   tasks as chips that strike through, a progress fill, the cherry Advance
   button that blooms when the gate clears), numbered checklist sections with
   owner avatars + AI/dependency badges, and a context-accordion rail with AI
   artefacts.

   The LIVE surface already emits the .es-* classes for every one of those
   parts AND owns all the load-bearing wiring (stage stepper nav, the advance
   gate, the checklist ticks/forms/uploads/dependencies/AI triggers, the
   accordion, realtime, save-backs). So this block RESTYLES the existing
   .es-* classes to the prototype's .ep-* look - the prototype CSS lifted
   value-for-value and re-targeted onto the live class names. The ONLY markup
   change is additive: paintAdvance now emits the chip strip (.es-adv-*)
   inside the unchanged .es-advance / data-es-action="advance" tray, mirroring
   the numbered sections below (which keep the real handlers). No gate logic,
   no checklist write, no form, no AI trigger is touched.

   Tokens/rgba only; the prototype's hex (the dark hero gradient, cherry hover,
   blue/green accents, owner-avatar colours) is resolved to existing tokens
   (--ink-1 / --ink-deep / --cherry / --g-blue / --good / --apl-*) or rgba, so
   no new hardcoded hex and no new !important enters the file. The avatar
   colour hexes (.es-sec-av-*) already exist earlier in this file and are left
   as-is. body.v4-scoped, loaded last → wins the cascade.
   ════════════════════════════════════════════════════════════════════════ */

/* ── HERO-AS-HEADER - the light .es-head becomes the elite dark masthead.
      Guest name leads (.es-title), episode title drops to .es-title-sub. ── */
body.v4 .es-surf > .es-head{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--ink-1) 0%, var(--ink-deep) 100%);
  border:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08);
  border-radius:24px; padding:26px 30px 24px; margin-bottom:18px; color:var(--on-accent);
  box-shadow:var(--el-e5), var(--el-rim-dark);
}
body.v4 .es-surf > .es-head::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 680px 360px at 8% -16%, rgba(94,92,230,.40), transparent 60%),
    radial-gradient(ellipse 560px 300px at 102% 116%, rgba(0,113,227,.30), transparent 62%),
    radial-gradient(ellipse 300px 200px at 50% 50%, rgba(124,182,255,.05), transparent 70%);
}
body.v4 .es-surf > .es-head::after{
  content:''; position:absolute; left:24px; right:24px; top:0; height:1px; z-index:2;
  background:linear-gradient(90deg, transparent, rgba(124,182,255,.55), rgba(255,255,255,.35), transparent);
  pointer-events:none;
}
body.v4 .es-surf > .es-head > *{ position:relative; z-index:1; }
/* eyebrow - must beat the global [class*="-eye"] blue rule via specificity */
body.v4 .es-surf > .es-head .es-eye{
  font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--hero-blue); margin-bottom:9px;
}
body.v4 .es-surf > .es-head .es-title{
  font-size:34px; font-weight:700; letter-spacing:-.03em; line-height:1.04;
  margin:0 0 6px; padding:0; color:var(--on-accent); background:none; cursor:default;
}
body.v4 .es-surf > .es-head .es-title:hover{ background:none; }
body.v4 .es-surf > .es-head .es-title-sub{
  font-size:15px; font-weight:500; color:rgba(255,255,255,.7); letter-spacing:-.008em; margin-bottom:2px;
}
body.v4 .es-surf > .es-head .es-meta{
  margin-top:14px; gap:9px; font-size:12.5px; color:rgba(255,255,255,.62);
  font-variant-numeric:tabular-nums;
}
body.v4 .es-surf > .es-head .es-meta strong{ color:rgba(255,255,255,.92); font-weight:600; }
body.v4 .es-surf > .es-head .es-meta-dot{ background:rgba(255,255,255,.34); }
body.v4 .es-surf > .es-head .es-stage-pill{
  font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:4px 11px; color:var(--on-accent);
  background:rgba(124,182,255,.26); box-shadow:inset 0 0 0 .5px rgba(255,255,255,.18);
}
/* head action buttons sit on the dark masthead */
body.v4 .es-surf > .es-head .es-head-btn{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:rgba(255,255,255,.9);
  padding:9px 16px; font-size:12.5px; font-weight:600; border-radius:var(--r-pill); cursor:pointer;
  font-family:var(--g-fd); transition:background var(--el-t2) var(--el-ease);
}
body.v4 .es-surf > .es-head .es-head-btn:hover{ background:rgba(255,255,255,.16); }
body.v4 .es-surf > .es-head .es-icon-btn{
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16); color:rgba(255,255,255,.9); font-size:15px;
  transition:background var(--el-t2) var(--el-ease);
}
body.v4 .es-surf > .es-head .es-icon-btn:hover{ background:rgba(255,255,255,.16); color:var(--on-accent); }

/* ── STAGE STEPPER - refined V2 markers (sits on the surface body, not the
      dark hero). Keeps the live grid + the --es-marker-pct progress bar. ── */
body.v4 .es-surf .es-stepper{
  background:transparent; border-bottom:none; padding:4px 6px 18px;
}
body.v4 .es-surf .es-marker{ align-items:center; gap:8px; }
body.v4 .es-surf .es-marker-bar{ height:3px; border-radius:var(--r-pill); }
body.v4 .es-surf .es-marker-lbl{ font-size:12px; font-weight:600; letter-spacing:-.008em; }
body.v4 .es-surf .es-marker-done .es-marker-lbl{ color:var(--g-ink-3); }
body.v4 .es-surf .es-marker-current .es-marker-lbl{ color:var(--g-blue); font-weight:700; }
body.v4 .es-surf .es-marker-num{ font-size:10.5px; font-weight:600; font-variant-numeric:tabular-nums; }
body.v4 .es-surf .es-marker-viewing{ background:var(--g-blue-soft); }

/* ── STAGE LEAD ── */
body.v4 .es-surf .es-stage-led h2{ letter-spacing:-.022em; }

/* ── THE ADVANCE TRAY - the signature interaction. Stacks head · progress
      fill · chips · foot. Cherry blooms when the gate clears (button enabled).
      The gate is driven entirely by the live `disabled` binding. ── */
body.v4 .es-surf .es-advance{
  position:relative; flex-direction:column; align-items:stretch; gap:0;
  padding:22px 24px; margin-top:24px; border-radius:var(--apl-r-lg);
  background:var(--g-surface); border:none;
  box-shadow:var(--el-e5);
  overflow:hidden;
}
body.v4 .es-surf .es-advance::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 0 1.5px var(--cherry);
  background:radial-gradient(ellipse 520px 220px at 100% 0%, rgba(184,0,43,.08), transparent 62%);
  transition:box-shadow var(--el-t3) var(--el-ease), background var(--el-t3) var(--el-ease);
}
body.v4 .es-surf .es-advance.es-advance-locked{
  background:var(--g-surface);
}
body.v4 .es-surf .es-advance.es-advance-locked::before{
  box-shadow:inset 0 0 0 1px var(--g-blue-bg);
  background:radial-gradient(ellipse 520px 200px at 100% 0%, rgba(0,113,227,.06), transparent 60%);
}
body.v4 .es-surf .es-advance .es-advance-t{ position:relative; flex:none; margin-bottom:16px; }
body.v4 .es-surf .es-advance .es-advance-t h4{ font-size:17px; font-weight:600; letter-spacing:-.018em; color:var(--g-ink-1); margin:0; line-height:1.3; }
body.v4 .es-surf .es-advance .es-advance-t p{ font-size:12.5px; color:var(--g-ink-3); margin:5px 0 0; }
/* progress fill */
body.v4 .es-surf .es-adv-bar{
  position:relative; height:8px; border-radius:var(--r-pill); background:var(--apl-rule-soft);
  overflow:hidden; margin-bottom:16px;
}
body.v4 .es-surf .es-adv-fill{
  position:absolute; left:0; top:0; bottom:0; border-radius:var(--r-pill);
  background:linear-gradient(90deg, var(--g-blue), var(--blue-2));
  transition:width var(--el-t3) var(--el-spring), background var(--el-t3) var(--el-ease);
}
body.v4 .es-surf .es-advance:not(.es-advance-locked) .es-adv-fill{ background:linear-gradient(90deg, var(--cherry-2), var(--cherry)); }
/* chips */
body.v4 .es-surf .es-adv-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; position:relative; }
body.v4 .es-surf .es-adv-chip{
  display:inline-flex; align-items:center; gap:8px; padding:8px 14px 8px 10px;
  border-radius:var(--r-pill); background:var(--apl-paper-2); border:1px solid var(--apl-rule);
  font-size:12.5px; font-weight:600; color:var(--g-ink-2); font-family:var(--g-fd);
}
body.v4 .es-surf .es-adv-chip-tick{
  width:18px; height:18px; border-radius:50%; display:grid; place-items:center; flex-shrink:0;
  background:var(--g-surface); box-shadow:inset 0 0 0 1.5px var(--apl-rule); color:var(--on-accent); font-size:10px; font-weight:800;
}
body.v4 .es-surf .es-adv-chip-done{ background:var(--apl-green-bg); border-color:transparent; color:var(--apl-green); }
body.v4 .es-surf .es-adv-chip-done .es-adv-chip-lbl{ text-decoration:line-through; opacity:.72; }
body.v4 .es-surf .es-adv-chip-done .es-adv-chip-tick{ background:var(--good); box-shadow:none; }
body.v4 .es-surf .es-adv-chip-done .es-adv-chip-tick::after{ content:'✓'; }
/* foot CTA */
body.v4 .es-surf .es-advance .es-advance-cta{
  position:relative; align-self:flex-end; padding:11px 22px; font-size:13.5px; font-weight:600;
  border-radius:var(--r-pill); letter-spacing:-.006em; font-family:var(--g-fd);
  background:var(--cherry); color:var(--on-accent); border:none; cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.18), 0 10px 26px -8px rgba(184,0,43,.6);
  animation:es-adv-bloom var(--el-t3) var(--el-spring) both;
  transition:transform var(--el-t2) var(--el-spring), box-shadow var(--el-t2) var(--el-ease), filter var(--el-t1) linear;
}
body.v4 .es-surf .es-advance .es-advance-cta:not(:disabled):hover{ transform:translateY(-1px); filter:brightness(1.08); box-shadow:0 2px 4px rgba(0,0,0,.2), 0 14px 32px -8px rgba(184,0,43,.7); }
body.v4 .es-surf .es-advance .es-advance-cta:not(:disabled):active{ transform:translateY(0) scale(.985); }
body.v4 .es-surf .es-advance .es-advance-cta:disabled{
  background:var(--apl-ink-5); color:var(--on-accent); opacity:.55; cursor:not-allowed;
  box-shadow:none; animation:none;
}
@keyframes es-adv-bloom{ 0%{ transform:scale(.94); } 60%{ transform:scale(1.04); } 100%{ transform:scale(1); } }

/* ── CHECKLIST SECTIONS - clean white cards, blue current ring, green done. ── */
body.v4 .es-surf .es-sec{
  border-radius:var(--apl-r); background:var(--g-surface); box-shadow:var(--apl-sh);
  border:1px solid var(--apl-rule-soft); overflow:hidden;
  transition:box-shadow var(--el-t2) var(--el-ease), border-color var(--el-t2) var(--el-ease);
}
body.v4 .es-surf .es-sec-head{ gap:14px; padding:15px 18px; background:transparent; }
body.v4 .es-surf .es-sec-num{
  width:28px; height:28px; flex-shrink:0; border-radius:50%; display:grid; place-items:center;
  font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums;
  background:var(--apl-paper-2); color:var(--g-ink-3); box-shadow:inset 0 0 0 1px var(--apl-rule);
}
body.v4 .es-surf .es-sec-done .es-sec-num{ background:var(--good); color:var(--on-accent); box-shadow:none; }
body.v4 .es-surf .es-sec-name{ font-size:15px; font-weight:600; letter-spacing:-.01em; color:var(--g-ink-1); }
body.v4 .es-surf .es-sec-done .es-sec-name{ color:var(--g-ink-3); }
body.v4 .es-surf .ds-sec-locked .es-sec-name{ color:var(--g-ink-4); }
body.v4 .es-surf .es-sec-body{ border-top:1px solid var(--apl-rule-soft); }
body.v4 .es-surf .es-sec-foot{ border-top:1px solid var(--apl-rule-soft); }

/* ── CONTEXT ACCORDION RAIL - V2 polish on the existing accordion. ── */
body.v4 .es-surf .es-right .es-acc{
  border-radius:var(--apl-r); background:var(--g-surface); box-shadow:var(--apl-sh);
  border:1px solid var(--apl-rule-soft); overflow:hidden;
}
body.v4 .es-surf .es-right .es-acc-head{ padding:14px 16px; }
body.v4 .es-surf .es-right .es-acc-title{ font-size:13.5px; font-weight:700; letter-spacing:-.01em; color:var(--g-ink-1); }
body.v4 .es-surf .es-right .es-acc-mini{
  display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; margin-left:5px;
  font-size:10.5px; font-weight:700; border-radius:var(--r-pill); background:var(--apl-blue-bg); color:var(--apl-blue-2);
}
body.v4 .es-surf .es-right .es-rr-row{ padding:7px 0; border-top:1px solid var(--apl-rule-soft); }
body.v4 .es-surf .es-right .es-rr-row:first-child{ border-top:none; }
body.v4 .es-surf .es-right .es-rr-k{ font-size:12px; color:var(--g-ink-4); font-weight:500; }
body.v4 .es-surf .es-right .es-rr-v{ font-size:12.5px; font-weight:600; color:var(--g-ink-1); font-variant-numeric:tabular-nums; }

/* ── MOBILE: V2-EPSURFACE ──
   The dark masthead softens to the phone gutter, the hero name scales down,
   the stepper labels were already handled by the live mobile block, and the
   advance tray's CTA goes full-bleed 44px. Additive @media only; tokens; zero
   desktop regression. The body grid already collapses to one column in the
   live mobile block. */
@media (max-width: 767.98px){
  body.v4 .es-surf > .es-head{ border-radius:var(--r-lg); padding:20px 18px; }
  body.v4 .es-surf > .es-head .es-title{ font-size:26px; }
  body.v4 .es-surf .es-advance .es-advance-cta{ align-self:stretch; width:100%; min-height:44px; -webkit-tap-highlight-color:transparent; }
  body.v4 .es-surf .es-adv-chips{ gap:6px; }
}
@media (prefers-reduced-motion: reduce){
  body.v4 .es-surf .es-advance .es-advance-cta{ animation:none; transition:none; }
  body.v4 .es-surf .es-adv-fill{ transition:none; }
}

/* ════════════════════════════════════════════════════════════════════════
   ── V2-GUESTS ──  Wave 8 of the approved V2 redesign - the Guests page
   (hero-as-header = the booking signal · a lilac "Bring them back" rail of
   high-value lapsed guests · the searchable roster grid with refined chips
   + cards).

   CSS lifted from the approved prototype _V2_PAGES2.html (#page-guests + the
   "Guests" CSS block at .p2-railcard.bring / .p2-rc-recency / .p2-toolbar /
   .p2-search / .p2-chip). The hero-as-header reuses the SAME .p2-hero DNA the
   Episodes page (W7) already folded onto the live .hero markup, scoped to
   .gx-hero so no other page's hero changes. The rail reuses the .p2-rail /
   .p2-railcard / .p2-rc-* family already shipped in V2-PIPELINE (W7) - this
   wave adds only the .bring lilac edge + the .p2-rc-recency dot the prototype
   gives the Guests rail. The roster grid keeps its live .guest-grid /
   .guest-card-v2 (Wave 152) untouched; this wave only wraps a clean toolbar
   (.gx-toolbar / .gx-search / .gx-chip) around it so the existing filter
   buttons + search input read as the prototype's refined chips.

   Tokens/rgba only. The prototype names a handful of tokens the live app.css
   never defined (--paper-2/-3, --surface, --warn-fg); they are resolved here
   to their real live equivalents (--g-paper-2/-3, --g-surface, --amber) so
   nothing renders on an undefined custom property. body.v4-scoped, loaded last
   → wins the cascade. No new hardcoded hex, no new !important. The board /
   grid / search wiring in js/pages/guests.js is unchanged - restyle only.
   ════════════════════════════════════════════════════════════════════════ */

/* ── hero-as-header: the elite dark-glass gradient on the live .hero markup,
      scoped to .gx-hero (identical DNA to W7's .p2-hero) ── */
body.v4 .hero.gx-hero{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--ink-1) 0%, var(--ink-deep) 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px; padding:28px 32px 26px;
  box-shadow:var(--el-e5), var(--el-rim-dark);
}
body.v4 .hero.gx-hero::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 680px 360px at 8% -16%, rgba(94,92,230,.40), transparent 60%),
    radial-gradient(ellipse 560px 300px at 102% 116%, rgba(0,113,227,.30), transparent 62%),
    radial-gradient(ellipse 300px 200px at 50% 50%, rgba(124,182,255,.05), transparent 70%);
}
body.v4 .hero.gx-hero::after{
  content:''; position:absolute; left:24px; right:24px; top:0; height:1px; z-index:2;
  background:linear-gradient(90deg, transparent, rgba(124,182,255,.55), rgba(255,255,255,.35), transparent);
  pointer-events:none;
}
body.v4 .hero.gx-hero > *{ position:relative; z-index:1; }
body.v4 .hero.gx-hero .hero-eyebrow{
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--hero-blue);
}
body.v4 .hero.gx-hero .hero-title{
  font-size:28px; letter-spacing:-.026em; line-height:1.12; max-width:34ch;
}
body.v4 .hero.gx-hero .hero-sub{ color:rgba(255,255,255,.74); }

/* the at-a-glance artefact inside the hero (same frosted glass as Pipeline) */
body.v4 .hero.gx-hero .gx-artefact{
  margin-top:20px; padding:14px 18px; border-radius:16px;
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.10), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  display:flex; align-items:center; gap:0; flex-wrap:wrap;
}
body.v4 .hero.gx-hero .gx-art-cell{ display:flex; flex-direction:column; gap:3px; padding:0 22px; position:relative; }
body.v4 .hero.gx-hero .gx-art-cell:first-child{ padding-left:0; }
body.v4 .hero.gx-hero .gx-art-cell + .gx-art-cell::before{ content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:26px; background:rgba(255,255,255,.12); }
body.v4 .hero.gx-hero .gx-art-k{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.5); font-weight:600; }
body.v4 .hero.gx-hero .gx-art-v{ font-size:17px; font-weight:600; color:var(--on-accent); letter-spacing:-.02em; font-variant-numeric:tabular-nums lining-nums; }
body.v4 .hero.gx-hero .gx-art-v.pos{ color:var(--good-2); }

/* ── section eyebrow that introduces the rail / roster ── */
body.v4 .gx-sec{ font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--g-ink-4); margin:22px 2px 12px; display:flex; align-items:baseline; gap:10px; }
body.v4 .gx-sec .gx-sec-sub{ font-size:11px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--g-ink-4); }

/* ── the "Bring them back" rail - reuses the shipped .p2-rail / .p2-railcard /
      .p2-rc-* family (V2-PIPELINE, W7); this wave adds only the lilac .bring
      edge + the recency dot, lifted verbatim from the prototype Guests block ── */
body.v4 .p2-railcard.bring{ border-left-color:var(--lilac); }
body.v4 .p2-railcard.bring .p2-rc-ic{ background:var(--lilac-bg); color:var(--lilac); }
body.v4 .p2-rc-recency{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; color:var(--amber); }
body.v4 .p2-rc-recency::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--amber); }

/* ── roster lives in the real .guest-grid; just wrap a clean toolbar
      (search + filter chips), lifted verbatim from the prototype Guests
      block. The undefined prototype tokens resolve to live equivalents:
      --paper-2 → --g-paper-2 · --surface → --g-surface · --g-rule kept. ── */
body.v4 .gx-toolbar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 16px; }
body.v4 .gx-search{ position:relative; flex:1; min-width:220px; max-width:420px; }
body.v4 .gx-search input{
  width:100%; box-sizing:border-box; height:38px; padding:0 14px 0 38px;
  background:var(--g-paper-2); border:1px solid var(--g-rule); border-radius:11px;
  font:inherit; font-size:13.5px; letter-spacing:-.006em; color:var(--g-ink-1);
  transition:border-color var(--el-t2) var(--el-ease), box-shadow var(--el-t2) var(--el-ease), background var(--el-t2) var(--el-ease);
}
body.v4 .gx-search input:focus{ outline:none; background:var(--g-surface); border-color:rgba(0,113,227,.45); box-shadow:var(--el-focus); }
body.v4 .gx-search .gx-search-ic{ position:absolute; left:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--g-ink-4); pointer-events:none; }
body.v4 .gx-filters{ display:flex; gap:7px; flex-wrap:wrap; }
body.v4 .gx-chip{
  font-size:12.5px; font-weight:600; letter-spacing:-.006em; padding:8px 14px; border-radius:var(--r-pill);
  border:1px solid var(--g-rule); background:var(--g-paper-2); color:var(--g-ink-2); cursor:pointer; font-family:inherit;
  transition:background var(--el-t1) linear, color var(--el-t1) linear, border-color var(--el-t1) linear;
}
body.v4 .gx-chip:hover{ background:var(--g-paper-3); color:var(--g-ink-1); }
body.v4 .gx-chip.on{ background:var(--g-ink-1); color:var(--g-surface); border-color:var(--g-ink-1); }
body.v4 .gx-chip .gx-chip-n{ opacity:.6; margin-left:5px; font-variant-numeric:tabular-nums; }

/* dark mode - keep the hero rim dark-on-dark legible (same as W7) */
body.v4.dark .hero.gx-hero{ box-shadow:var(--el-e5), var(--el-rim-dark); }

/* ── MOBILE: V2-GUESTS ──
   The hero gutter softens, the artefact cells wrap two-up (drop the vertical
   dividers), the rail collapses to a single column (.p2-rail already does this
   in the W7 mobile block - guests reuse it), and the toolbar stacks the search
   above the chip row. Additive @media only; tokens; zero desktop regression.
   The .guest-grid + .guest-card-v2 already have their own mobile behaviour from
   Wave 152 and are untouched here. */
@media (max-width: 767.98px){
  body.v4 .hero.gx-hero{ border-radius:var(--r-lg); padding:20px 18px; }
  body.v4 .hero.gx-hero .hero-title{ font-size:22px; }
  body.v4 .hero.gx-hero .gx-artefact{ display:grid; grid-template-columns:1fr 1fr; gap:14px 10px; }
  body.v4 .hero.gx-hero .gx-art-cell{ padding:0; }
  body.v4 .hero.gx-hero .gx-art-cell + .gx-art-cell::before{ display:none; }
  body.v4 .gx-toolbar{ flex-direction:column; align-items:stretch; gap:10px; }
  body.v4 .gx-search{ max-width:none; }
}

/* ════════════════════════════════════════════════════════════════════════
   ── V2-ANALYTICS ──  Wave 9 of the approved V2 redesign - the Analytics
   (stats) page. Hero-as-header carrying the "this month in one line" insight
   + an at-a-glance metric strip · a refined mint headline-finding card above
   the KPI row · the four-accent gi-kpi tiles the live markup was always built
   for (the app never painted the gi-kpi-cherry/sky/mint/butter accents) · and
   sub-tab spacing. The downloads charts, platform bars and the attribution
   leaderboard keep their existing CSS (the leaderboard's .attr-* family was
   already V2-styled under the FEAT: attribution block; the bars use .gi-bars /
   .gi-bar-row); this wave restyles around them, it does not restructure them.

   CSS lifted from the approved prototype _V2_PAGES2.html (#page-stats + the
   "Analytics: refined headline finding card + leaderboard polish" block at
   .p2-finding / .gi-kpi accents / .p2-subtabs). The hero-as-header reuses the
   SAME dark-glass DNA the Guests page (W8) folded onto its .hero markup,
   re-scoped to .sx-hero so no other page's hero changes - and the metric strip
   reuses the already-shipped .gx-artefact / .gx-art-cell family verbatim.

   Tokens/rgba only, body.v4-scoped, loaded last → wins the cascade. No new
   hardcoded hex, no new !important. Every tab/handler/load/calc in
   js/pages/stats.js is unchanged - restyle + hero rewrite only.
   ════════════════════════════════════════════════════════════════════════ */

/* ── hero-as-header: the elite dark-glass gradient on the live .hero markup,
      scoped to .sx-hero (identical DNA to W8's .gx-hero) ── */
body.v4 .hero.sx-hero{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--ink-1) 0%, var(--ink-deep) 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px; padding:28px 32px 26px;
  box-shadow:var(--el-e5), var(--el-rim-dark);
}
body.v4 .hero.sx-hero::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 680px 360px at 8% -16%, rgba(94,92,230,.40), transparent 60%),
    radial-gradient(ellipse 560px 300px at 102% 116%, rgba(0,113,227,.30), transparent 62%),
    radial-gradient(ellipse 300px 200px at 50% 50%, rgba(124,182,255,.05), transparent 70%);
}
body.v4 .hero.sx-hero::after{
  content:''; position:absolute; left:24px; right:24px; top:0; height:1px; z-index:2;
  background:linear-gradient(90deg, transparent, rgba(124,182,255,.55), rgba(255,255,255,.35), transparent);
  pointer-events:none;
}
body.v4 .hero.sx-hero > *{ position:relative; z-index:1; }
body.v4 .hero.sx-hero .hero-eyebrow{
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--hero-blue);
}
body.v4 .hero.sx-hero .hero-title{
  font-size:28px; letter-spacing:-.026em; line-height:1.12; max-width:34ch;
}
body.v4 .hero.sx-hero .hero-sub{ color:rgba(255,255,255,.74); }

/* the at-a-glance metric strip inside the hero (reuses the W8 .gx-artefact
   family verbatim, scoped to .sx-hero) */
body.v4 .hero.sx-hero .gx-artefact{
  margin-top:20px; padding:14px 18px; border-radius:16px;
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.10), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  display:flex; align-items:center; gap:0; flex-wrap:wrap;
}
body.v4 .hero.sx-hero .gx-art-cell{ display:flex; flex-direction:column; gap:3px; padding:0 22px; position:relative; }
body.v4 .hero.sx-hero .gx-art-cell:first-child{ padding-left:0; }
body.v4 .hero.sx-hero .gx-art-cell + .gx-art-cell::before{ content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:26px; background:rgba(255,255,255,.12); }
body.v4 .hero.sx-hero .gx-art-k{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.5); font-weight:600; }
body.v4 .hero.sx-hero .gx-art-v{ font-size:17px; font-weight:600; color:var(--on-accent); letter-spacing:-.02em; font-variant-numeric:tabular-nums lining-nums; }
body.v4 .hero.sx-hero .gx-art-v.pos{ color:var(--good-2); }
body.v4.dark .hero.sx-hero{ box-shadow:var(--el-e5), var(--el-rim-dark); }

/* ── the refined headline finding card (mint), lifted verbatim from the
      prototype "Analytics" block ── */
body.v4 .p2-finding{
  display:flex; align-items:flex-start; gap:14px; padding:18px 20px; border-radius:16px;
  background:var(--c-mint-bg); box-shadow:var(--el-e2), var(--el-rim); margin-bottom:18px;
}
body.v4 .p2-finding-ic{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:var(--on-mint); color:var(--c-mint-bg); flex:none; }
body.v4 .p2-finding-t{ font-size:14px; font-weight:600; color:var(--on-mint); letter-spacing:-.01em; line-height:1.45; }
body.v4 .p2-finding-t b{ font-weight:700; }
body.v4 .p2-finding-sub{ font-size:12px; color:var(--on-mint); opacity:.85; margin-top:4px; }

/* ── sub-tabs row reuses production .tabs/.gi-tabbar; just scope the spacing ── */
body.v4 .p2-subtabs{ margin-bottom:18px; }

/* ── KPI tile accents - the stats markup names gi-kpi-cherry/sky/mint/butter
      but the live app.css never painted them; add the intended coloured edge
      (tokens only) + the refined glass tile, lifted verbatim from the
      prototype. ── */
/* Background uses the flipping --g-surface (same token .card uses) so the tiles
   read as cards in BOTH themes. The prototype's W9 block left .gi-kpi on the
   base bare-selector --card, which doesn't flip in dark → the big numbers went
   white-on-white in dark mode (visible in _p2_analytics_dark.png). Pinning the
   surface here keeps the four-accent tiles legible light AND dark; tokens only. */
body.v4 #gi-body .gi-kpi{ background:var(--g-surface); border-radius:18px; box-shadow:var(--el-e2), var(--el-rim); border:none; position:relative; overflow:hidden; }
body.v4 #gi-body .gi-kpi::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; }
body.v4 #gi-body .gi-kpi-cherry::before{ background:var(--cherry); }
body.v4 #gi-body .gi-kpi-sky::before{ background:var(--blue); }
body.v4 #gi-body .gi-kpi-mint::before{ background:var(--good-2); }
body.v4 #gi-body .gi-kpi-butter::before{ background:var(--warn); }
body.v4 #gi-body .gi-kpi-eyebrow{ color:var(--g-ink-3); }
body.v4 #gi-body .gi-kpi-big{ color:var(--g-ink-1); font-size:32px; letter-spacing:-.03em; }
body.v4 #gi-body .gi-kpi-sub{ color:var(--g-ink-3); }

/* ── MOBILE: V2-ANALYTICS ──
   The hero gutter softens + the title drops; the metric strip wraps two-up and
   drops its vertical dividers (same treatment as W8's .gx-artefact); the
   finding card keeps its row but tightens its padding. Additive @media only;
   tokens; zero desktop regression. The KPI grid, charts, platform bars and the
   attribution board already carry their own mobile blocks (gi-kpis mobile +
   FEAT: attribution mobile) and are untouched here. */
@media (max-width: 767.98px){
  body.v4 .hero.sx-hero{ border-radius:var(--r-lg); padding:20px 18px; }
  body.v4 .hero.sx-hero .hero-title{ font-size:22px; }
  body.v4 .hero.sx-hero .gx-artefact{ display:grid; grid-template-columns:1fr 1fr; gap:14px 10px; padding:14px 16px; }
  body.v4 .hero.sx-hero .gx-art-cell{ padding:0; }
  body.v4 .hero.sx-hero .gx-art-cell + .gx-art-cell::before{ display:none; }
  body.v4 .p2-finding{ padding:15px 16px; gap:12px; }
}

/* ════════════════════════════════════════════════════════════════════════
   ── V2-COMMAND ──  Wave 10 of the approved V2 redesign - the Command Centre
   (admin-only master register). Hero-as-header carrying the "N waiting on you"
   count + an at-a-glance metric strip (Need you / Claude's got / New today /
   Done this wk), an el- craft restyle of the existing register chrome
   (toggles, batches, rows, the needs-you cherry edge, the briefing strip read
   as the quiet "Claude is handling N" strip), and a polished detail/edit modal.

   Peter's standing instruction: the Command Centre STAYS a master-admin
   register functionally - only restyle, don't restructure. So every toggle /
   filter / batch / briefing / list / modal handler in js/pages/command.js is
   unchanged; this wave restyles the existing .cc-* classes + adds the new
   .cc-hero / .cx-artefact hero markup only.

   CSS lifted from the approved prototype _V2_PAGES2.html (#page-command +
   the "Command Centre" blocks: .p2-lead / .p2-metric / .p2-handling /
   .p2-needcard). The hero-as-header reuses the SAME dark-glass DNA W9 folded
   onto .sx-hero, re-scoped to .cc-hero so no other page's hero changes. Every
   token used here is defined (--on-accent / --good-2 / --hero-blue / the el-
   ladder in css/tokens.css; the --g-* card family in app.css); the body-chrome
   rules use the --g-paper-2/-3 / --g-surface / --g-rule-soft family so the
   register cards flip correctly in dark - same discipline as W8/W9. The one
   fallback (--good-2, var(--good)) mirrors the existing .gi-bar-fill pattern.

   Tokens/rgba only, body.v4-scoped, loaded last → wins the cascade. No new
   hardcoded hex, no new !important.
   ════════════════════════════════════════════════════════════════════════ */

/* ── hero-as-header: the elite dark-glass gradient on the new .cc-hero markup,
      identical DNA to W9's .sx-hero ── */
body.v4 .hero.cc-hero{
  position:relative; overflow:hidden; color:var(--on-accent);
  background:linear-gradient(180deg, var(--ink-1) 0%, var(--ink-deep) 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px; padding:28px 32px 26px;
  box-shadow:var(--el-e5), var(--el-rim-dark);
}
body.v4 .hero.cc-hero::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 680px 360px at 8% -16%, rgba(94,92,230,.40), transparent 60%),
    radial-gradient(ellipse 560px 300px at 102% 116%, rgba(0,113,227,.30), transparent 62%),
    radial-gradient(ellipse 300px 200px at 50% 50%, rgba(124,182,255,.05), transparent 70%);
}
body.v4 .hero.cc-hero::after{
  content:''; position:absolute; left:24px; right:24px; top:0; height:1px; z-index:2;
  background:linear-gradient(90deg, transparent, rgba(124,182,255,.55), rgba(255,255,255,.35), transparent);
  pointer-events:none;
}
body.v4 .hero.cc-hero > *{ position:relative; z-index:1; }
/* page identity strip folded into the hero (lifted from the prototype .p2-ident) */
body.v4 .cc-hero .cc-hero-ident{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
body.v4 .cc-hero .cc-hero-eye{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.92); }
body.v4 .cc-hero .cc-hero-dot{ width:3px; height:3px; border-radius:50%; background:rgba(255,255,255,.35); }
body.v4 .cc-hero .cc-hero-date{ font-size:11.5px; font-weight:500; color:rgba(255,255,255,.6); letter-spacing:.01em; font-variant-numeric:tabular-nums lining-nums; }
body.v4 .hero.cc-hero .hero-eyebrow{
  font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--hero-blue); display:inline-flex; align-items:center; gap:8px;
}
body.v4 .hero.cc-hero .hero-eyebrow::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--hero-blue); box-shadow:0 0 0 4px rgba(124,182,255,.18); }
body.v4 .hero.cc-hero .hero-title{
  font-size:28px; letter-spacing:-.026em; line-height:1.12; max-width:34ch;
  color:var(--on-accent); font-weight:700;
}
body.v4 .hero.cc-hero .hero-sub{ color:rgba(255,255,255,.74); max-width:66ch; }

/* the at-a-glance metric strip inside the hero (same frosted glass the W9
   .gx-artefact uses, re-scoped to .cx-artefact so it can't bleed) */
body.v4 .hero.cc-hero .cx-artefact{
  margin-top:20px; padding:14px 18px; border-radius:16px;
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.10), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  display:flex; align-items:center; gap:0; flex-wrap:wrap;
}
body.v4 .hero.cc-hero .cx-art-cell{ display:flex; flex-direction:column; gap:3px; padding:0 26px; position:relative; }
body.v4 .hero.cc-hero .cx-art-cell:first-child{ padding-left:0; }
body.v4 .hero.cc-hero .cx-art-cell + .cx-art-cell::before{ content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:26px; background:rgba(255,255,255,.12); }
body.v4 .hero.cc-hero .cx-art-k{ font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:rgba(255,255,255,.55); font-weight:600; }
body.v4 .hero.cc-hero .cx-art-v{ font-size:26px; font-weight:700; color:var(--on-accent); letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums lining-nums; }
body.v4 .hero.cc-hero .cx-art-v.pos{ color:var(--good-2, var(--good)); }
body.v4.dark .hero.cc-hero{ box-shadow:var(--el-e5), var(--el-rim-dark); }

/* ── register chrome restyle - softer area tabs + el- craft on the body. The
      live .cc-toggle / .cc-batch / .cc-row markup is unchanged; this just
      lifts the elevation, rounding and motion to the V2 craft layer. ── */
/* needs-you rows: the cherry left-edge the prototype gives its numbered cards,
   applied to the existing rows the needs_peter handler already renders. */
body.v4 .cc-row.cc-row-needs{ border-left:3px solid var(--cherry); }
/* keep the urgent edge winning when an item is both urgent and needs-you */
body.v4 .cc-row.cc-row-urgent.cc-row-needs{ border-left-color:var(--cherry); }

/* the "Done" inline action reads as the prototype's cherry mini-pill */
body.v4 .cc-done-btn{
  transition:transform var(--el-t2) var(--el-spring), box-shadow var(--el-t2) var(--el-ease), background var(--el-t1) linear;
}
body.v4 .cc-done-btn:hover{ transform:translateY(-1px); }

/* ── the briefing strip read as the quiet "Claude is handling N" strip
      (dashed, calm) - lifted from the prototype .p2-handling ── */
body.v4 .cc-brief{
  background:var(--g-paper-2); border:1px dashed var(--g-rule);
  border-radius:14px; box-shadow:none; margin-bottom:16px;
}
body.v4 .cc-brief-head:hover{ background:var(--g-paper-3); }
body.v4 .cc-brief-title{ font-weight:700; color:var(--g-ink-2); }
body.v4 .cc-brief-row{ border-bottom:1px solid var(--g-rule-soft); }

/* ── detail / edit modal: lift to the el- shadow ladder so the popup reads as
      the prototype's deal-detail card (chrome class names unchanged) ── */
body.v4 .cc-modal{ box-shadow:var(--el-e5), var(--el-rim); }

/* ── page entrance - the hero rises, the body follows (prototype p2-rise) ── */
@keyframes cc-rise{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)} }
body.v4 #cc-hero .cc-hero{ animation:cc-rise var(--el-t3) var(--el-ease) both; }
body.v4 #cc-body{ animation:cc-rise var(--el-t3) var(--el-ease) 60ms both; }
@media (prefers-reduced-motion: reduce){
  body.v4 #cc-hero .cc-hero, body.v4 #cc-body{ animation:none; }
}

/* ── MOBILE: V2-COMMAND ──
   The hero gutter softens + the title drops; the metric strip wraps two-up and
   drops its vertical dividers (same treatment W9 gives .gx-artefact). The
   register chrome (toggles, filter bar, batches, rows, briefing, modals) keeps
   its existing mobile block (── MOBILE: command ── earlier in this file) and is
   untouched here. Additive @media only; tokens; zero desktop regression. */
@media (max-width: 767.98px){
  body.v4 .hero.cc-hero{ border-radius:var(--r-lg); padding:20px 18px; }
  body.v4 .hero.cc-hero .hero-title{ font-size:21px; line-height:1.18; }
  body.v4 .hero.cc-hero .cx-artefact{ display:grid; grid-template-columns:1fr 1fr; gap:14px 10px; padding:14px 16px; }
  body.v4 .hero.cc-hero .cx-art-cell{ padding:0; }
  body.v4 .hero.cc-hero .cx-art-cell + .cx-art-cell::before{ display:none; }
  body.v4 .hero.cc-hero .cx-art-v{ font-size:23px; }
}

/* ════════════════════════════════════════════════════════════════════════
   ── V2-CONSISTENCY ──  Wave 11 (final) of the V2 redesign - the polish +
   consistency pass that brings the remaining SECONDARY pages up to the same
   hero-as-header standard the 10 primary surfaces (W1–W10) already ship.

   ONE shared dark-glass hero scope class - `.v2c-hero` - carrying the SAME
   DNA the shipped W8/W9/W10 heroes (.gx-hero / .sx-hero / .cc-hero) fold onto
   the live `.hero` markup: the --ink-1 → --ink-deep gradient, the 24px
   rounding, the el-e5 elevation + el-rim-dark, the indigo/blue radial glow
   (::before) and the top light line (::after). Pages opt in WITHOUT any body
   rewiring: js/components/page-hero.js now takes a `heroClass` option, and the
   seven secondary pages pass `heroClass:'v2c-hero'` (Intel, which hand-builds
   its hero, just adds the class to its existing .hero div). The page bodies,
   handlers, data loads and existing mobile blocks are all UNCHANGED.

   The base `.hero` is already a dark panel in this app (line ~13180), and the
   white-on-dark `.hero-stat-cell` treatment (line ~13247) already reads on it -
   so this block only layers the refined V2 finish on top, identical to the
   shipped scopes. Tokens/rgba only, body.v4-scoped, loaded last → wins the
   cascade. No new hardcoded hex, no new !important.

   Pages that DON'T fit a hero-as-header are flagged in the wave report; all
   seven named in the brief take it cleanly (each already had a single
   renderPageHero/.hero header - this only refines its finish).
   ════════════════════════════════════════════════════════════════════════ */

/* ── the shared dark-glass hero-as-header finish (identical DNA to W8 .gx-hero,
      W9 .sx-hero, W10 .cc-hero) ── */
body.v4 .hero.v2c-hero{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--ink-1) 0%, var(--ink-deep) 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px; padding:28px 32px 26px;
  box-shadow:var(--el-e5), var(--el-rim-dark);
}
body.v4 .hero.v2c-hero::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 680px 360px at 8% -16%, rgba(94,92,230,.40), transparent 60%),
    radial-gradient(ellipse 560px 300px at 102% 116%, rgba(0,113,227,.30), transparent 62%),
    radial-gradient(ellipse 300px 200px at 50% 50%, rgba(124,182,255,.05), transparent 70%);
}
body.v4 .hero.v2c-hero::after{
  content:''; position:absolute; left:24px; right:24px; top:0; height:1px; z-index:2;
  background:linear-gradient(90deg, transparent, rgba(124,182,255,.55), rgba(255,255,255,.35), transparent);
  pointer-events:none;
}
body.v4 .hero.v2c-hero > *{ position:relative; z-index:1; }
body.v4 .hero.v2c-hero .hero-eyebrow{
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--hero-blue);
}
body.v4 .hero.v2c-hero .hero-title{
  font-size:28px; letter-spacing:-.026em; line-height:1.12; max-width:46ch;
}
body.v4 .hero.v2c-hero .hero-sub{ color:rgba(255,255,255,.74); max-width:72ch; }

/* Intel hand-builds its hero with a .hero-stat-row strip (already white-on-dark
   from the live dark-hero block); just give that strip the refined frosted
   panel the shipped artefacts use, so it reads as the V2 at-a-glance strip. */
body.v4 .hero.v2c-hero .hero-stat-row{
  margin-top:20px; padding:14px 20px; border-radius:16px; gap:0;
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.10), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  display:flex; align-items:center; flex-wrap:wrap;
}
body.v4 .hero.v2c-hero .hero-stat-cell{ padding:0 24px; position:relative; }
body.v4 .hero.v2c-hero .hero-stat-cell:first-child{ padding-left:0; }
body.v4 .hero.v2c-hero .hero-stat-cell + .hero-stat-cell::before{
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:26px; background:rgba(255,255,255,.12);
}
body.v4 .hero.v2c-hero .hero-stat-cell .val{ font-size:22px; }

body.v4.dark .hero.v2c-hero{ box-shadow:var(--el-e5), var(--el-rim-dark); }

/* ── EASTER EGG (W11): sidebar brand-mark wink ────────────────────────────
   The "P" mark gets a quiet, completion-delight-adjacent wink on hover/press -
   a subtle lift + a sheen sweep across the tile. CSS-only, hover/active only,
   never an always-on loop, and silenced under reduce-motion. (The check-pop on
   tap-to-complete and the milestone confetti/mic-drop are already wired in
   js/lib/levelups.js + the .task-row-check / .ck-check pop earlier in this
   file; this is the one missing wink.) */
body.v4 .sb-brand-mark{
  position:relative; overflow:hidden;
  transition:transform var(--el-t2) var(--el-spring), box-shadow var(--el-t2) var(--el-ease);
}
body.v4 .sb-brand-mark::after{
  content:''; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-18deg); pointer-events:none; opacity:0;
}
body.v4 .sb-brand:hover .sb-brand-mark{
  transform:translateY(-1px) rotate(-3deg);
  box-shadow:0 4px 14px -4px rgba(0,113,227,.55);
}
body.v4 .sb-brand:hover .sb-brand-mark::after{
  animation:v2c-wink 620ms var(--el-ease) 1;
}
body.v4 .sb-brand-mark:active{ transform:translateY(0) scale(.94); }
@keyframes v2c-wink{
  0%{ left:-120%; opacity:0; }
  12%{ opacity:1; }
  100%{ left:160%; opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  body.v4 .sb-brand-mark,
  body.v4 .sb-brand:hover .sb-brand-mark{ transition:none; transform:none; box-shadow:none; }
  body.v4 .sb-brand:hover .sb-brand-mark::after{ animation:none; opacity:0; }
}

/* ── MOBILE: V2-CONSISTENCY ──
   The shared hero gutter softens + the title drops on phones, exactly as the
   shipped W8–W10 scopes do; Intel's stat strip wraps two-up and drops its
   vertical dividers. Additive @media only; tokens; zero desktop regression.
   The seven pages' existing bodies keep their own mobile blocks. */
@media (max-width: 767.98px){
  body.v4 .hero.v2c-hero{ border-radius:var(--r-lg); padding:20px 18px; }
  body.v4 .hero.v2c-hero .hero-title{ font-size:22px; line-height:1.16; }
  body.v4 .hero.v2c-hero .hero-stat-row{
    display:grid; grid-template-columns:1fr 1fr; gap:14px 10px; padding:14px 16px;
  }
  body.v4 .hero.v2c-hero .hero-stat-cell{ padding:0; }
  body.v4 .hero.v2c-hero .hero-stat-cell + .hero-stat-cell::before{ display:none; }
}

/* ════════════════════════════════════════════════════════════════════════
   ── V3-SHELL ──  Wave 1 of the v3 brief (SHELL-1 + SHELL-2).
   SHELL-1: the .sb-brand block is removed from the rail; the profile
   clicker (.sh-userwrap) moves to the TOP of the rail and its menu now
   opens DOWNWARD; the what's-new / speed-work / chat / bell cluster
   (.sh-railactions) sits directly under it as one row; .sb-foot keeps
   Feedback. SHELL-2: the rail search (.sh-railsearch) is gone - search
   lives behind a small icon button mounted top-right of every page hero
   (js/components/hero-search.js), which reveals the singleton #hero-search-bar
   hosting the live #global-search input. Tokens/rgba only - no new hex,
   no new !important. Appended last so it wins ties in the cascade.
   ════════════════════════════════════════════════════════════════════════ */

/* ── SHELL-1 · profile clicker at the TOP of the rail ─────────────────── */
body.v4 .sidebar.sb > .sh-userwrap{ margin:0 0 6px; }

/* the user menu now drops DOWNWARD (it used to rise from the rail foot) */
body.v4 .sh-usermenu{
  top:calc(100% + 8px); bottom:auto;
  transform-origin:top center;
  animation:v3-menu-drop var(--el-t2) var(--el-spring) both;
}
@keyframes v3-menu-drop{
  from{ opacity:0; transform:translateY(-6px) scale(.98); }
  to{   opacity:1; transform:translateY(0)    scale(1);   }
}

/* ── SHELL-1 · icon cluster directly under the profile ────────────────── */
body.v4 .sidebar.sb > .sh-railactions{
  position:relative;
  margin:0 2px 10px; padding:0 0 12px;
  border-bottom:1px solid var(--g-rule);
}
/* the bell dropdown used to open at the rail FOOT; at the top of the rail it
   opens downward, anchored to the full cluster row (not the 38px bell) so
   the rail's overflow-y:auto can't clip it sideways. */
body.v4 .sidebar.sb > .sh-railactions .notif-bell{ position:static; }
body.v4 .sidebar.sb > .sh-railactions .notif-panel{ left:0; right:0; width:auto; }

/* ── SHELL-2 · hero search icon (mounted by js/components/hero-search.js;
   default skin sits on the dark glass heroes, top-right) ──────────────── */
body.v4 .hsx-btn{
  position:absolute; top:16px; right:16px; z-index:3;
  width:34px; height:34px; padding:0; border-radius:var(--r-pill);
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.10); color:rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.16); cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background var(--el-t2) var(--el-ease), color var(--el-t2) var(--el-ease), border-color var(--el-t2) var(--el-ease);
}
body.v4 .hsx-btn svg{ width:16px; height:16px; }
body.v4 .hsx-btn:hover,
body.v4 .hsx-btn.is-open{
  background:rgba(255,255,255,.20); color:var(--on-accent);
  border-color:rgba(255,255,255,.30);
}
body.v4 .hsx-btn:focus-visible{ outline:none; box-shadow:var(--el-focus); }
/* light-surface skin (applied via opts.light for non-dark hero strips) */
body.v4 .hsx-btn--light{
  background:var(--paper-2); color:var(--g-ink-2); border-color:var(--g-rule);
}
body.v4 .hsx-btn--light:hover,
body.v4 .hsx-btn--light.is-open{
  background:var(--paper-3); color:var(--g-ink-1); border-color:var(--g-rule);
}
body.v4.dark .hsx-btn--light{
  background:rgba(255,255,255,.06); color:var(--apl-ink-2);
  border-color:rgba(255,255,255,.12);
}
/* Money strip hero is a light flex row - the icon joins the row (opts.flow)
   after the pace pill instead of overlapping it. */
body.v4 #money-body .m1-hero .hsx-btn{ position:static; flex:none; }

/* ── SHELL-2 · the singleton search bar the icon reveals ──────────────── */
body.v4 .hsx-bar{
  position:fixed; z-index:9998; display:flex; align-items:center;
  background:var(--surface); border:1px solid var(--g-border);
  border-radius:13px;
  box-shadow:var(--el-e4), var(--el-rim);
  animation:v3-menu-drop var(--el-t2) var(--el-spring) both;
}
body.v4 .hsx-bar[hidden]{ display:none; }
body.v4 .hsx-bar .hsx-ic{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:15px; height:15px; pointer-events:none; color:var(--g-ink-4);
}
body.v4 .hsx-bar input{
  width:100%; box-sizing:border-box; height:42px;
  padding:0 52px 0 36px; background:transparent; color:var(--g-ink-1);
  border:none; border-radius:13px;
  font:inherit; font-size:13.5px; letter-spacing:-.006em;
}
body.v4 .hsx-bar input:focus{ outline:none; }
body.v4 .hsx-bar input::placeholder{ color:var(--g-ink-4); }
body.v4.dark .hsx-bar{ border-color:rgba(255,255,255,.12); box-shadow:var(--el-e4), var(--el-rim-dark); }
body.v4.dark .hsx-bar input{ color:var(--apl-ink); }
body.v4.dark .hsx-bar input::placeholder{ color:var(--apl-ink-4); }
body.v4.dark .hsx-bar .hsx-ic{ color:var(--apl-ink-4); }

/* the spotlight results panel must never exceed the viewport (it anchors to
   the input and uses a 420px minimum width in JS) */
body.v4 .gsearch-panel{ max-width:calc(100vw - 24px); }

@media (prefers-reduced-motion: reduce){
  body.v4 .hsx-bar, body.v4 .hsx-btn{ transition:none; animation:none; }
}

/* ── MOBILE: V3-SHELL ──
   The rail search moved into the hero, so nothing in the rail is needed on
   phones any more (nav = bottom tab bar, profile/theme/feedback = the More
   sheet from mobile-nav.js). The V2-SHELL sticky search shell is retired:
   hide the rail entirely below 768px. The hero icon grows to a 44px touch
   target; the bar input holds 16px so iOS doesn't zoom-on-focus. */
@media (max-width: 767.98px){
  body.v4 .sidebar.sb{ display:none; }
  body.v4 .hsx-btn{ width:44px; height:44px; top:10px; right:10px; }
  body.v4 .hsx-btn svg{ width:18px; height:18px; }
  body.v4 .hsx-bar input{ font-size:16px; }
  body.v4 .gsearch-panel{ max-width:calc(100vw - 16px); }
}

/* ════════════════════════════════════════════════════════════════════════
   ── V3-DASH ──  Wave 2 of the v3 brief (DASH-1 + DASH-2 + DASH-3).
   DASH-1: the Dashboard's segmented Read|Customise control is replaced by
   ONE Customise on/off toggle (.v3-cust) - a switch track + label + an
   explicit On/Off state word. The .is-editing gate on .dv2-rows and every
   customise capability behind it are untouched.
   DASH-2: the Today page (#/today) - Keith's daily brief, risks and
   opportunities as page glass panels (.today-grid / .today-panel reusing
   the keithb-* item grammar) under a V2 hero-as-header.
   DASH-3: Keith's chat-with SIDE PANEL (.kc-people) - Keith pinned on top,
   collapsible department groups holding the director + agents.
   Tokens/rgba only - no new hex, no new !important. Appended last so it
   wins ties in the cascade.
   ════════════════════════════════════════════════════════════════════════ */

/* ── DASH-1 · the single Customise toggle ─────────────────────────────── */
body.v4 .v3-cust{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 14px 7px 10px;
  background:var(--surface); border:1px solid var(--g-rule);
  border-radius:var(--r-pill); cursor:pointer; font:inherit;
  font-size:12px; font-weight:600; letter-spacing:-.004em; color:var(--g-ink-3);
  box-shadow:var(--el-e1), var(--el-rim);
  -webkit-tap-highlight-color:transparent;
  transition:color var(--el-t2) var(--el-ease), border-color var(--el-t2) var(--el-ease), box-shadow var(--el-t2) var(--el-ease);
}
body.v4 .v3-cust:hover{ color:var(--g-ink-1); }
body.v4 .v3-cust:focus-visible{ outline:none; box-shadow:var(--el-focus); }
body.v4 .v3-cust-track{
  position:relative; width:30px; height:18px; flex:0 0 30px;
  border-radius:var(--r-pill); background:var(--paper-3);
  border:1px solid var(--g-rule);
  transition:background var(--el-t2) var(--el-ease), border-color var(--el-t2) var(--el-ease);
}
body.v4 .v3-cust-knob{
  position:absolute; top:1.5px; left:2px; width:13px; height:13px;
  border-radius:var(--r-pill); background:var(--surface);
  box-shadow:0 1px 2px rgba(0,0,0,.18);
  transition:transform var(--el-t2) var(--el-spring);
}
body.v4 .v3-cust.on{ color:var(--g-ink-1); border-color:rgba(184,0,43,.30); }
body.v4 .v3-cust.on .v3-cust-track{ background:var(--cherry); border-color:var(--cherry); }
body.v4 .v3-cust.on .v3-cust-knob{ transform:translateX(11px); }
body.v4 .v3-cust-state{
  min-width:24px; text-align:left;
  font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.07em;
  color:var(--g-ink-4);
}
body.v4 .v3-cust.on .v3-cust-state{ color:var(--cherry); }
body.v4.dark .v3-cust{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); color:var(--apl-ink-3); }
body.v4.dark .v3-cust:hover{ color:var(--apl-ink); }
body.v4.dark .v3-cust.on{ color:var(--apl-ink); }
body.v4.dark .v3-cust-track{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.14); }
body.v4.dark .v3-cust.on .v3-cust-track{ background:var(--cherry); border-color:var(--cherry); }
body.v4.dark .v3-cust-state{ color:var(--apl-ink-4); }
body.v4.dark .v3-cust.on .v3-cust-state{ color:var(--cherry-2); }

/* ── DASH-2 · the Today page - brief as page glass panels ─────────────── */
/* the hero stat row is painted after the brief loads; keep it truly hidden
   until then (author display:flex would otherwise beat the UA [hidden]) */
body.v4 .today-hero .hero-stat-row[hidden]{ display:none; }
body.v4 .today-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px; align-items:start;
}
body.v4 .today-grid > .today-lead{ grid-column:1 / -1; }
body.v4 .today-grid > .today-skel{ grid-column:1 / -1; }
body.v4 .today-grid > .today-health{ grid-column:1 / -1; border-top:none; padding:2px 6px; }
/* the panels: the keithb group card, raised to the page panel grammar */
body.v4 .keithb-group.today-panel{
  margin:0; padding:18px 20px;
  border:1px solid var(--g-border); border-radius:var(--r-xl);
  box-shadow:var(--el-e2), var(--el-rim);
}
body.v4 .today-panel .keithb-group-h{ font-size:10.5px; letter-spacing:.08em; color:var(--g-ink-4); }
body.v4 .today-situation,
body.v4 .today-panel .keithb-situation{ color:var(--g-ink-1); font-size:14px; margin:2px 0 0; }
body.v4 .today-situation-list{ margin:2px 0 0; gap:6px; }
body.v4 .today-situation-list li{ font-size:13px; color:var(--g-ink-2); }
body.v4 .today-panel .keithb-item-t{ font-size:13.5px; }
body.v4 .today-panel .keithb-action-t{ font-size:13.5px; }
body.v4.dark .keithb-group.today-panel{ border-color:rgba(255,255,255,.10); }

/* ── DASH-3 · Keith's chat-with side panel ────────────────────────────── */
body.v4 .kc-people-wrap{ position:sticky; top:16px; align-self:start; }
body.v4 .kc-people{
  display:flex; flex-direction:column; gap:2px;
  background:var(--surface); border:1px solid var(--g-border);
  border-radius:22px; box-shadow:var(--el-e3), var(--el-rim);
  padding:14px; max-height:calc(100vh - 32px); overflow:auto;
}
body.v4 .kcp-head{
  font-size:10.5px; font-weight:800; text-transform:uppercase;
  letter-spacing:.09em; color:var(--g-ink-4); padding:2px 10px 8px;
}
body.v4 .kcp-person{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  border:none; background:none; cursor:pointer; font:inherit;
  padding:7px 10px; min-height:44px; border-radius:12px; color:var(--g-ink-2);
  -webkit-tap-highlight-color:transparent;
  transition:background var(--el-t2) var(--el-ease), color var(--el-t2) var(--el-ease);
}
body.v4 .kcp-person:hover{ background:var(--paper-3); color:var(--g-ink-1); }
body.v4 .kcp-person:focus-visible{ outline:none; box-shadow:var(--el-focus); }
body.v4 .kcp-person.on{ background:var(--cherry); color:var(--on-accent); }
body.v4 .kcp-av{
  flex:0 0 30px; width:30px; height:30px; border-radius:var(--r-pill);
  display:grid; place-items:center;
  background:var(--paper-3); color:var(--g-ink-3);
  font-size:11px; font-weight:700; letter-spacing:.02em;
}
body.v4 .kcp-person.on .kcp-av{ background:rgba(255,255,255,.18); color:var(--on-accent); }
body.v4 .kcp-av-keith svg{ width:17px; height:17px; }
body.v4 .kcp-name{
  flex:1 1 auto; min-width:0; font-size:13px; font-weight:600; line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
body.v4 .kcp-keith .kcp-name{ display:flex; flex-direction:column; white-space:normal; font-weight:700; }
body.v4 .kcp-sub{ font-size:10.5px; font-weight:600; color:var(--g-ink-4); }
body.v4 .kcp-keith.on .kcp-sub{ color:rgba(255,255,255,.72); }
body.v4 .kcp-tier{
  flex:0 0 auto; font-size:9.5px; font-weight:800; text-transform:uppercase;
  letter-spacing:.05em; padding:2px 7px; border-radius:var(--r-pill);
  background:var(--lilac-bg); color:var(--lilac-fg);
}
body.v4 .kcp-person.on .kcp-tier{ background:rgba(255,255,255,.18); color:var(--on-accent); }
body.v4 .kcp-deptlbl{
  font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  color:var(--g-ink-4); padding:12px 10px 6px; margin-top:10px;
  border-top:1px solid var(--g-rule);
}
body.v4 .kcp-group-h{
  display:flex; align-items:center; gap:8px; width:100%;
  border:none; background:none; cursor:pointer; font:inherit;
  font-size:12.5px; font-weight:700; color:var(--g-ink-2);
  padding:9px 10px; min-height:44px; border-radius:10px;
  -webkit-tap-highlight-color:transparent;
  transition:background var(--el-t2) var(--el-ease);
}
body.v4 .kcp-group-h:hover{ background:var(--paper-3); }
body.v4 .kcp-group-h:focus-visible{ outline:none; box-shadow:var(--el-focus); }
body.v4 .kcp-group-n{ flex:1 1 auto; text-align:left; }
body.v4 .kcp-group-c{
  font-size:10.5px; font-weight:700; color:var(--g-ink-4);
  background:var(--paper-3); border-radius:var(--r-pill); padding:2px 8px;
}
body.v4 .kcp-chev{ width:13px; height:13px; flex:0 0 13px; color:var(--g-ink-4); transition:transform var(--el-t2) var(--el-ease); }
body.v4 .kcp-group.open .kcp-chev{ transform:rotate(180deg); }
body.v4 .kcp-group-body{ display:flex; flex-direction:column; gap:1px; padding:0 0 4px 6px; }
/* collapsed groups: the author display:flex must not beat the UA [hidden] */
body.v4 .kcp-group-body[hidden]{ display:none; }
/* the toolbar "chat with" trigger: drawer affordance - hidden on desktop
   where the panel is already in view beside the conversation */
body.v4 .kc-people-trigger{ display:none; }
/* full-screen Keith: the panel travels into the overlay shell and sits
   beside the conversation (same one-node-two-homes pattern as the convo) */
body.v4 .kc-fs-shell .kc-people-wrap{ position:static; flex:0 0 300px; margin-left:16px; max-height:100%; }
body.v4 .kc-fs-shell .kc-people{ max-height:100%; }
/* dark mode */
body.v4.dark .kc-people{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.10); }
body.v4.dark .kcp-person{ color:var(--apl-ink-2); }
body.v4.dark .kcp-person:hover{ background:rgba(255,255,255,.06); color:var(--apl-ink); }
body.v4.dark .kcp-person.on{ background:var(--cherry); color:var(--on-accent); }
body.v4.dark .kcp-av{ background:rgba(255,255,255,.08); color:var(--apl-ink-3); }
body.v4.dark .kcp-group-h{ color:var(--apl-ink-2); }
body.v4.dark .kcp-group-h:hover{ background:rgba(255,255,255,.06); }
body.v4.dark .kcp-group-c{ background:rgba(255,255,255,.08); color:var(--apl-ink-4); }
body.v4.dark .kcp-deptlbl{ border-top-color:rgba(255,255,255,.10); }

@media (prefers-reduced-motion: reduce){
  body.v4 .v3-cust, body.v4 .v3-cust-track, body.v4 .v3-cust-knob,
  body.v4 .kcp-person, body.v4 .kcp-group-h, body.v4 .kcp-chev,
  body.v4 .kc-people-wrap{ transition:none; }
}

/* ── MOBILE: V3-DASH ──
   DASH-1: the Customise toggle goes full-width with a 44px target (same
   thumb-zone treatment the old segmented control had).
   DASH-2: the Today grid stacks to one column; the v2c hero stat row
   already re-grids 2-up via the live MOBILE: V2C block.
   DASH-3: the chat-with panel becomes a TOP DRAWER opened from the
   toolbar's "chat with" trigger (44px), per the mobile skills. Additive
   @media only - tokens, zero desktop regression. */
@media (max-width: 767.98px){
  body.v4 .v2-dash-shead .actions{ display:flex; }
  body.v4 .v3-cust{ flex:1 1 auto; justify-content:center; min-height:44px; }
  body.v4 .today-grid{ grid-template-columns:1fr; gap:12px; }
  body.v4 .keithb-group.today-panel{ padding:16px; border-radius:var(--r-lg); }
  /* DASH-3 · top drawer */
  body.v4 .kc-people-wrap{
    position:fixed; top:0; left:0; right:0; z-index:11000;
    transform:translateY(-104%); pointer-events:none;
    transition:transform var(--el-t3) var(--el-ease);
  }
  body.v4 .kc-people-wrap.kc-people-open{ transform:translateY(0); pointer-events:auto; }
  body.v4 .kc-people{
    border-radius:0 0 20px 20px; max-height:74vh;
    box-shadow:var(--el-e4);
    padding-top:max(14px, env(safe-area-inset-top));
  }
  body.v4 .kc-people-trigger{ display:inline-flex; min-height:44px; }
  /* inside the full-screen overlay the drawer rules above still win (fixed
     positioning escapes the shell flex), so the trigger stays the way in */
  body.v4 .kc-fs-shell .kc-people-wrap{ position:fixed; margin-left:0; }
}
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce){
  body.v4 .kc-people-wrap{ transition:none; }
}
/* small phones: the toolbar gains a fourth control (the chat-with trigger);
   let the acts wrap and clamp the trigger's name so 390px never overflows */
@media (max-width: 480px){
  body.v4 .kc-toolbar-acts{ flex-wrap:wrap; justify-content:flex-end; }
  body.v4 .kc-people-trigger [data-kcp-current]{
    display:inline-block; max-width:64px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
}

/* ── V3-EPIS ──  Wave 3 of the v3 brief (EPIS-1..7) - Episodes section.
   Appended, token/rgba only, no new hex, no new !important.

   EPIS-1  pipeline hero = the NEXT RELEASE box (when + who/what blocks it)
   EPIS-2  breathing room between the hero block and the pages toggle bar
   EPIS-4a right-rail panel grammar on the episode surface (one label/value
           scale, one row rhythm, one inset) - designed against
           _V2_STYLE_GUIDE_ELITE.html's apl rules + tabular values
   EPIS-4b sponsor slot: + glyph truly centred; logo fills the box
   EPIS-5  surface-modal popup: blue masthead fills the rounded corners,
           visible bleed around the panel at every viewport, visible fills
           on the five header icon buttons
   EPIS-6  Ad Slot Schedule reuses the es-spslot sponsor-box design (shared
           classes; .adsch-spslot scope carries only the lock extras) */

/* - EPIS-1 · next-release hero - */
body.v4 .hero.p2-hero[data-ep-id]{ cursor:pointer; }
body.v4 .hero.p2-hero .p2-next-when{ color:var(--hero-blue); font-weight:600; }
body.v4 .hero.p2-hero .p2-next-sub{ line-height:1.55; }
body.v4 .hero.p2-hero .p2-next-sub b{ color:var(--on-accent); font-weight:600; }
body.v4 .hero.p2-hero .p2-next-hold{
  font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.55); margin-right:2px;
}
body.v4 .hero.p2-hero .p2-next-clear{ color:var(--good-2); font-weight:600; }

/* - EPIS-2 · the toggle bar sat flush under the hero block whenever the
     needs-you rail rendered (the rail had no bottom margin, and the hero's
     own 18px margin only separates hero→rail). One consistent 18px gap -
     the same rhythm as the hero's own margin-bottom. - */
body.v4 #ep-hero .p2-rail{ margin-bottom:18px; }

/* - EPIS-4a · right-rail grammar (episode surface, real-episode rail).
     One grammar across Booking / Guest / Files & artefacts / Activity /
     My notes: head inset 16px (existing), body inset 16px (was 2px -
     content sat misaligned 14px left of its own panel title), label column
     fixed 92px at 12px/500 ink-4, values 12.5px/600 ink-1 right-aligned
     tabular, rows on a 32px rhythm with a single hairline (the old rail
     drew TWO competing hairlines: base border-bottom + elite border-top). - */
body.v4 .es-surf .es-right .es-acc{ flex-shrink:0; }   /* the rail flex column was COMPRESSING open panels - content (guest tags) clipped mid-pill; cards keep natural height, the rail scrolls */
body.v4 .es-surf .es-right .es-acc-body{ padding:0 16px 14px; }
body.v4 .es-surf .es-right .es-rr-body{ padding:0; }
body.v4 .es-surf .es-right .es-rr-row{
  display:grid; grid-template-columns:92px 1fr; align-items:center;
  gap:12px; min-height:32px; padding:4px 0;
  border-bottom:none; border-top:1px solid var(--apl-rule-soft);
}
body.v4 .es-surf .es-right .es-rr-row:first-child{ border-top:none; }
body.v4 .es-surf .es-right .es-rr-k{
  font-size:12px; font-weight:500; color:var(--g-ink-4);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
body.v4 .es-surf .es-right .es-rr-v{
  font-size:12.5px; font-weight:600; color:var(--g-ink-1);
  text-align:right; font-variant-numeric:tabular-nums; min-width:0; overflow-wrap:anywhere;
}
body.v4 .es-surf .es-right .es-acc-sub{
  font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--g-ink-4); margin:0 0 8px;
}
body.v4 .es-surf .es-right .es-dos-mini{ margin:2px 0 8px; }
body.v4 .es-surf .es-right .es-dos-tags{ margin-top:8px; }
body.v4 .es-surf .es-right .es-art-body{ gap:10px; }
body.v4 .es-surf .es-right .es-art{ box-sizing:border-box; }
body.v4 .es-surf .es-right .es-rr-empty{ font-size:12px; color:var(--g-ink-4); padding:2px 0 4px; }
body.v4 .es-surf .es-right .es-notes-ta{ margin-top:2px; }
body.v4 .es-surf .es-right .es-sec-foot{ margin-top:10px; padding-top:0; border-top:none; }
body.v4 .es-surf .es-right .es-notes-hint{ margin-top:6px; }

/* - EPIS-4b · sponsor slot boxes (In Edit task + everywhere es-spslot
     renders). The + glyph sat off-centre in its blue disc (baseline drift
     from inherited line-height); the logo was capped at 26px inline and
     34px in CSS - it now fills the slot's logo band. - */
body.v4 .es-spslot-plus{
  display:grid; place-items:center; line-height:1; padding:0;
}
body.v4 .es-spslot-plus svg{ display:block; }
body.v4 .es-spslot-logo{ height:auto; min-height:44px; flex:1 1 auto; }
body.v4 .es-spslot-logo img{
  width:100%; height:44px; max-height:none; max-width:100%;
  object-fit:contain; object-position:left center;
  padding:2px 0; box-sizing:border-box; border-radius:7px; display:block;
}

/* - EPIS-5a · the popup's blue masthead fills to the panel's rounded top
     corners (the head's own 24px radius left white notches against the
     card's clip radius - square its top, keep the bottom curve; the card /
     surface overflow:hidden clips the top into the right curve). - */
body.v4 .es-surf > .es-head{ border-radius:0 0 24px 24px; }

/* - EPIS-5b · visible bleed around the episode panel at every size.
     Desktop already breathes via the overlay's 24px padding; the rule here
     guards the panel from ever outgrowing it. (Mobile bleed lives in the
     MOBILE: V3-EPIS block below.) - */
body.v4 .es-modal-overlay{ padding:24px; }
body.v4 .es-modal-card{ max-width:calc(100vw - 48px); max-height:calc(100dvh - 48px); }

/* - EPIS-5c · the five icon buttons top-right of the blue hero were
     near-invisible (6% black on a dark masthead). Visible glass fill,
     token/rgba only - the masthead is intentionally dark in BOTH themes,
     so the white-glass treatment works light + dark. - */
body.v4 .es-modal-acts .es-modal-archive,
body.v4 .es-modal-acts .es-modal-close{
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.25);
  color:var(--on-accent);
}
body.v4 .es-modal-acts .es-modal-archive:hover,
body.v4 .es-modal-acts .es-modal-close:hover{
  background:rgba(255,255,255,.28);
  color:var(--on-accent);
}
body.v4.dark .es-modal-acts .es-modal-archive,
body.v4.dark .es-modal-acts .es-modal-close{
  background:rgba(255,255,255,.16);
  color:var(--on-accent);
}
body.v4.dark .es-modal-acts .es-modal-archive:hover,
body.v4.dark .es-modal-acts .es-modal-close:hover{
  background:rgba(255,255,255,.28);
  color:var(--on-accent);
}

/* - EPIS-6 · Ad Slot Schedule slots - the es-spslot cards in a 3-up grid
     (same size + colours as the In Edit task). Scope extras only. - */
body.v4 .adsch-slots{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:8px;
}
body.v4 .adsch-spslot{ font-family:inherit; text-align:left; }
body.v4 button.adsch-spslot{ cursor:pointer; }
body.v4 .adsch-spslot .es-spslot-kind{
  display:inline-flex; align-items:center; gap:5px;
}
body.v4 .adsch-spslot.es-spslot-filled .es-sponsor-x{ opacity:1; }
body.v4 .adsch-spslot-locked{ opacity:.72; }
body.v4 .adsch-spslot-locked.es-spslot-empty{
  cursor:default; border-style:solid;
  color:var(--g-ink-4);
}
body.v4 .adsch-spslot-locked.es-spslot-empty:hover{
  border-color:var(--g-blue-bg); background:var(--g-paper-2); transform:none;
}
body.v4 .adsch-spslot-locked.es-spslot-empty .es-spslot-plus{
  background:var(--rule-soft); color:var(--g-ink-4);
}
body.v4 .adsch-spslot-locked.es-spslot-empty:hover .es-spslot-plus{
  background:var(--rule-soft); color:var(--g-ink-4);
}
body.v4 .adsch-spslot-locked.es-spslot-empty .es-spslot-cta{ color:var(--g-ink-4); }
body.v4 .adsch-spslot .adsch-lock{ width:12px; height:12px; }
body.v4 .adsch-spslot .es-spslot-plus .adsch-lock{ width:14px; height:14px; }

/* ── MOBILE: V3-EPIS ──
   EPIS-1: the next-release hero already wraps (title scales via the live
   MOBILE: V2-PIPELINE block); the blocker line gets breathing room.
   EPIS-5b: the popup keeps visible bleed on phones too - it floats with a
   10px gutter instead of the edge-to-edge bottom sheet (this modal only;
   every other sheet keeps the house pattern).
   EPIS-6: the 3-up slot grid stacks. Additive @media, tokens only, zero
   desktop regression. */
@media (max-width: 767.98px){
  body.v4 .hero.p2-hero .p2-next-sub{ font-size:13px; }
  body.v4 .es-modal-overlay{ padding:10px; align-items:center; justify-content:center; }
  body.v4 .es-modal-card{
    height:calc(100dvh - 20px); max-height:calc(100dvh - 20px);
    max-width:calc(100vw - 20px);
    margin:0 auto;
    border-radius:var(--r-xl);
  }
  body.v4 .adsch-slots{ grid-template-columns:1fr; gap:10px; }
  body.v4 button.adsch-spslot{ min-height:44px; -webkit-tap-highlight-color:transparent; }
}
@media (max-width: 767.98px){
  /* the floating popup is no longer a drag-up sheet - drop the grab bar
     AND the sheet padding that reserved room for it (QA W3 fix: the 26px
     white band above the masthead; header must fill the rounded corners) */
  body.v4 .es-modal-card::before{ display:none; }
  body.v4 .es-modal-card{ padding-top:0; }
  /* QA W3 design fix: header action buttons reach the 44px touch target.
     Class selectors to match the MOBILE: R3 rule's specificity (it sets 40px);
     equal specificity + later in file = this wins, mobile only. */
  body.v4 .es-modal-acts .es-modal-archive,
  body.v4 .es-modal-acts .es-modal-close{ width:44px; height:44px; min-width:44px; min-height:44px; }
}

/* ── V3-SPON ──  Wave 4 of the v3 brief (SPON-1) - Sponsors section.
   Appended, token/rgba only, no new hex, no new !important.

   SPON-1  the deal master page (#/deal/{id}) reuses the episode surface's
           es-* classes, so the EPIS-4a right-rail grammar (92px label
           column 12px/500, values 12.5px/600 right tabular, 32px rows,
           one --apl-rule-soft hairline, 16px inset) applies to the deal
           rail's Booking / Sponsor / Files & artefacts panels with ZERO
           new rules - the selectors are shared, not re-derived. The only
           deal-specific rail content is the Ad inventory list (.ds-inv-*),
           which still painted as boxed mini-cards inside the rail; the
           rules below fold it into the same grammar (scoped to the rail -
           the main-column display module keeps its boxed cards). */

/* - SPON-1 · ad-inventory rows inside the right rail: hairline rows on the
     32px rhythm, label-scale episode number / slot, value-scale title /
     date (date right-aligned tabular, matching .es-rr-v). - */
body.v4 .es-surf .es-right .ds-inv{ gap:8px; }
body.v4 .es-surf .es-right .ds-inv-summary{
  font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--g-ink-4);
}
body.v4 .es-surf .es-right .ds-inv-group{ gap:0; }
body.v4 .es-surf .es-right .ds-inv-grouphead{ padding:6px 0 2px; }
body.v4 .es-surf .es-right .ds-inv-row{
  grid-template-columns:auto 1fr auto auto; column-gap:12px;
  min-height:32px; padding:4px 0;
  background:transparent; border:none; border-top:1px solid var(--apl-rule-soft);
  border-radius:0;
}
body.v4 .es-surf .es-right .ds-inv-group .ds-inv-row:first-of-type{ border-top:none; }
body.v4 .es-surf .es-right .ds-inv-row:hover{ background:transparent; border-color:var(--apl-rule-soft); }
body.v4 .es-surf .es-right .ds-inv-ep{ font-size:12px; font-weight:500; color:var(--g-ink-4); }
body.v4 .es-surf .es-right .ds-inv-title{ font-size:12.5px; font-weight:600; color:var(--g-ink-1); }
body.v4 .es-surf .es-right .ds-inv-slot{ font-size:12px; font-weight:500; color:var(--g-ink-4); }
body.v4 .es-surf .es-right .ds-inv-date{
  font-size:12.5px; font-weight:600; color:var(--g-ink-1);
  text-align:right; font-variant-numeric:tabular-nums;
}
body.v4 .es-surf .es-right .ds-inv-empty{
  font-size:12px; color:var(--g-ink-4); background:transparent; padding:2px 0 4px;
}

/* ── MOBILE: V3-SPON ──
   The deal master page route reuses the MOBILE: episode-surface block
   (route-view selectors included: stacked .es-body, snap stepper, 44px
   accordion heads). Only the rail-scoped ad-inventory rules above need a
   mobile counterpart: they out-specify the existing `body.v4 .ds-inv-row`
   phone stacking rule, so re-assert the 2-col stack + 44px rows at the
   same (rail) specificity. Additive @media, tokens only, zero desktop
   regression. */
@media (max-width: 767.98px){
  body.v4 .es-surf .es-right .ds-inv-row{
    grid-template-columns:auto 1fr; row-gap:2px; min-height:44px; padding:6px 0;
  }
  body.v4 .es-surf .es-right .ds-inv-slot,
  body.v4 .es-surf .es-right .ds-inv-date{ grid-column:2; justify-self:start; text-align:left; }
}

/* ════════════════════════════════════════════════════════════════════════
   ── V3-ANLY ──  Wave 5 of the v3 brief (ANLY-1..5) - Analytics section.
   Appended, token/rgba only, no new hex, no new !important.

   ANLY-1   "Average downloads per show" panel joins the By-platform /
            Top-shows Overview row (3-up on desktop, .gi-grid-anly).
   ANLY-3   stacking-order fix is JS-only (stats.js STACK_SEGS).
   ANLY-4a  ONE shared dropdown-chevron rule, app-wide.
   ANLY-4b  Episodes-tab sort hint centres on the month dropdown.
   ANLY-4c  Episodes-tab rows get the style-guide hover lift.
   ANLY-5c  leaderboard share toggle between bar and number, bar shrunk.
   ════════════════════════════════════════════════════════════════════════ */

/* - ANLY-4a · the app-wide dropdown chevron. Every <select> under the v4
     shell either showed the native arrow flush against its right edge or
     carried a per-pocket caret (.es-fld / .fmb-input / .es-sec only). One
     shared rule: appearance off, an rgba-ink SVG chevron inset 14px from
     the right edge, and 34px right padding reserving its lane - the same
     inset/padding the .es-fld pocket already used, now global (Analytics
     month + guest/topic filters, Guests sort, Command Centre filters, every
     modal select). Background-COLOR is deliberately NOT set, so each select
     keeps whatever surface its own rules give it. - */
body.v4 select:not([multiple]):not([size]){
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(110,110,115,0.95)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:12px 12px;
  padding-right:34px;
}
body.v4.dark select:not([multiple]):not([size]){
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(155,155,161,0.95)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* - ANLY-1 · the avg-downloads-per-show panel. Container row goes 3-up on
     desktop; the new card reuses the .card surface + .gi-card-h head its
     two siblings already use, and the big figure takes the gi-kpi-big
     number scale. Collapses with its siblings below 900px. - */
body.v4 #gi-body .gi-grid-anly{ grid-template-columns:repeat(3, 1fr); }
body.v4 #gi-body .gi-avg-card .gi-avg-big{
  font-size:32px; font-weight:800; letter-spacing:-.03em;
  color:var(--g-ink-1); font-variant-numeric:tabular-nums;
  margin:4px 0 6px; line-height:1.1;
}
@media (max-width:900px){
  body.v4 #gi-body .gi-grid-anly{ grid-template-columns:1fr; }
}

/* - ANLY-4b · "Tap a header to sort" hint: centre it on the month dropdown
     beside it. The hint keeps the filterbar's flex-end seat but becomes an
     inline-flex box the same height as the select (1px border ×2 + 7px
     padding ×2 + ~16px line ≈ 32px) with its text vertically centred. - */
body.v4 #gi-body .gi-ep-hint{
  align-self:flex-end;
  display:inline-flex; align-items:center;
  min-height:32px;
  font-size:12px; font-weight:500; color:var(--g-ink-3);
}

/* - ANLY-4c · Episodes-tab list rows: the style-guide hover treatment -
     rows lift translateY(-1px) with the --el-e2/--el-e3 elevation ramp +
     the --el-rim highlight (the V2 surfaces grammar). Hover-capable
     pointers only; touch devices keep the flat row. border-collapse is
     separated on this table only so the row can cast a shadow. - */
body.v4 #gi-body .gi-ep-table{ border-collapse:separate; border-spacing:0; }
body.v4 #gi-body .gi-ep-table tbody tr{
  transition:transform var(--el-t1) var(--el-ease), box-shadow var(--el-t1) var(--el-ease);
}
@media (hover:hover){
  body.v4 #gi-body .gi-ep-table tbody tr:hover{
    position:relative; z-index:1;
    transform:translateY(-1px);
    box-shadow:var(--el-e2), var(--el-e3), var(--el-rim);
    background:var(--g-surface);
  }
}

/* - ANLY-5c · leaderboard row: share toggle now sits BETWEEN the bar and
     the number (markup order rank · main · share · number); both right-side
     cells centre on the row and never wrap, and the bar gives up a little
     width so the whole row holds one line. - */
body.v4 #gi-body .attr-row > .attr-share{
  flex:0 0 auto; align-self:center; white-space:nowrap;
}
body.v4 #gi-body .attr-row > .attr-dl{
  flex:0 0 auto; align-self:center; min-width:52px; text-align:right;
}
body.v4 #gi-body .attr-main .attr-track{ width:94%; }

/* - ANLY-5b · board head: title left, the import-tags action right, same
     .card-action grammar the section heads use. - */
body.v4 #gi-body .attr-board-h{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; flex-wrap:wrap;
}

/* ── MOBILE: V3-ANLY ──
   Additive @media only, tokens, zero desktop regression. The avg panel
   stacks with its siblings (the 900px rule above already covers tablets);
   the sort hint + import action take 44px touch heights; the leaderboard
   row keeps rank · main · share · number on one line at 390px by letting
   the bar run full width and the title ellipsize (attr-main min-width:0
   already set by the FEAT: attribution block). Hover lift is gated behind
   (hover:hover) above, so touch devices are untouched by ANLY-4c. */
@media (max-width:767.98px){
  body.v4 #gi-body .gi-ep-hint{ min-height:44px; }
  body.v4 #gi-body .attr-board-h .card-action{
    min-height:44px; display:inline-flex; align-items:center;
  }
  body.v4 #gi-body .attr-row > .attr-dl{ min-width:44px; }
  body.v4 #gi-body .attr-main .attr-track{ width:100%; }
  body.v4 #gi-body .gi-avg-card .gi-avg-big{ font-size:28px; }
}

/* ── V3-ANLY QA FIX ── confirm dialogs are by definition the topmost
   interaction; the shared .cm-overlay sat at z-index 2000 and rendered
   BEHIND the GI wizard modal (4000), making the new 10x guard invisible.
   Lift above every modal in the stack (highest is company-modal 10050). */
body.v4 .cm-overlay{ z-index: 12000; }

/* ════════════════════════════════════════════════════════════════════════
   ── V3-GUES ──  Wave 6 of the v3 brief (GUES-1..4) - Guests section.

   GUES-1 removed the W8 "Bring them back" rail in JS (js/pages/guests.js no
   longer emits .p2-rail / .p2-railcard.bring / .gx-sec on this page); the
   existing CSS rules for the retired rail stay in place per the append-only
   rule, but nothing on the Guests page renders them any more. The roster is
   the page's primary content.

   GUES-4 adds the preview-panel performance block (.gcv2-perf) on each
   roster card: "Avg downloads / appearance" + "Top show", fed by the SAME
   shared aggregation (js/lib/guest-stats.js) as the detail scorecard
   (GUES-2) and the Most/Least popular sort (GUES-3), so every surface shows
   the same numbers. Sits under the existing .gcv2-stats line, separated by
   a quiet rule. Tokens/rgba only, no new hex, no !important. */
body.v4 .gcv2-perf{
  margin-top:10px; padding-top:9px; border-top:1px solid var(--g-rule);
  display:flex; flex-direction:column; gap:4px; min-width:0;
}
body.v4 .gcv2-perf-row{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:10px; min-width:0;
}
body.v4 .gcv2-perf-k{
  font-size:10px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--g-ink-4); flex:none;
}
body.v4 .gcv2-perf-v{
  font-size:12px; font-weight:600; color:var(--g-ink-1);
  font-variant-numeric:tabular-nums lining-nums;
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ── MOBILE: V3-GUES ──
   Additive @media only; tokens; zero desktop regression. Cards are already
   single-column at this width (Wave 152 grid rules); the perf rows keep
   key + value on one line at 390px because the value ellipsizes (rule
   above). The sort select carries the two new options - keep its 44px
   touch height (the older guests mobile block set 40px; 44 is the house
   minimum from the mobile-developer skill). */
@media (max-width:767.98px){
  body.v4 .gcv2-perf{ gap:6px; }
  body.v4 .gcv2-perf-v{ font-size:12.5px; }
  body.v4 .guest-sort{ min-height:44px; }
}

/* ════════════════════════════════════════════════════════════════════════
   ── V3-MONY ──  Wave 7 of the v3 brief (MONY-1..3, INVC-1, PNLB-1) -
   Money section. MONY-2: the second hero panel (.m1-hero) is REMOVED from
   money.js markup - its numbers fold into the page hero sub line; the
   retired .m1-hero rules above stay per the append-only rule but nothing
   renders them. MONY-3: Invoices / Revenue P&L / Annual Budget mount as
   tabs of the Money page reusing the house .tabs/.tab grammar unchanged.
   Tokens/rgba only - zero new hardcoded colours, zero new importance
   overrides, appended last so it wins ties in the cascade. */

/* ── MONY-1 · Confirmed YTD staleness warning on the tile ──────────────────
   A £0 that comes from an unmaintained register reads as a warning surface
   (pale butter wash, amber ink), with the "register looks stale - newest
   invoice Mon YYYY" line under the figure. NOTE the v4 token inversion:
   at :root --c-butter is the SATURATED dark mustard and --c-butter-bg the
   pale wash - pale surface + dark ink in light, flipped pair in dark. */
body.v4 #money-body .m1-tile-stale{
  background:var(--c-butter-bg);
  border-color:rgba(0,0,0,.08);
}
body.v4 #money-body .m1-tile-stale .m1-tile-label,
body.v4 #money-body .m1-tile-stale .m1-tile-value{ color:var(--on-amber); }
body.v4 #money-body .m1-tile-note{
  font-size:11px; font-weight:600; line-height:1.45; margin-top:6px;
  color:var(--on-amber);
}
body.v4.dark #money-body .m1-tile-stale{ background:var(--c-butter); border-color:rgba(255,255,255,.10); }

/* ── MONY-2 · red-on-red fix ────────────────────────────────────────────────
   The unreadable element was the pace pill on the (now removed) second hero:
   .m1-pace-peach paired background var(--c-peach) (a saturated rust at the
   v4 :root, NOT the pastel tokens.css value) with color var(--peach-fg)
   (also rust) - red text on red fill. The panel merge removes that pill
   entirely (pace reads as hero sub text). The SAME token pairing made the
   chase-list OVERDUE / RENEW pills unreadable, so they're repaired here
   with readable wash + ink pairs, tokens only. */
body.v4 #money-body .m1-pill-peach{ background:var(--c-peach-bg); color:var(--c-peach); }
body.v4 #money-body .m1-pill-butter{ background:var(--c-butter-bg); color:var(--c-butter); }
body.v4.dark #money-body .m1-pill-peach{ background:var(--c-peach); color:var(--on-amber); }
body.v4.dark #money-body .m1-pill-butter{ background:var(--c-butter); color:var(--on-butter); }

/* ── PNLB-1c · unclassified-transactions call-to-action banner ─────────────
   Sits above the P&L tiles whenever completed transactions are unclassified,
   so the silent-£0 failure mode is visible work, not a mystery. */
body.v4 #pnl-tab-body .pnl-cta{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  flex-wrap:wrap; padding:13px 16px; margin-bottom:14px;
  border-left:3px solid var(--cherry);
}
body.v4 #pnl-tab-body .pnl-cta-text{
  display:flex; flex-direction:column; gap:2px; min-width:0;
  font-size:13px; color:var(--g-ink-2);
}
body.v4 #pnl-tab-body .pnl-cta-text strong{ color:var(--g-ink-1); font-size:13.5px; }
body.v4 #pnl-tab-body .pnl-cta-acts{
  display:flex; align-items:center; gap:12px; flex-shrink:0;
}

/* ── PNLB-1b · pre-feed month marker on the P&L table ── */
body.v4 #pnl-tab-body .pnl-prefeed{ font-size:10px; vertical-align:middle; }

/* ── PNLB-1a · Settings → Integrations "Sync from date" backfill control ── */
body.v4 .rev-sync-from-wrap{
  display:inline-flex; align-items:center; gap:6px; flex-shrink:0;
}
body.v4 .rev-sync-from-wrap .rev-sync-from{
  width:140px; padding:4px 8px; font-size:12.5px;
}

/* ── MOBILE: V3-MONY ──
   Additive @media only; tokens; zero desktop regression. The Money tab bar
   reuses the house .tabs pill which already horizontal-scrolls; tab buttons
   get the 44px touch height. The P&L CTA stacks with a full-width 44px
   button; the Settings backfill control stacks full-width with a 16px date
   input so iOS doesn't zoom-on-focus. */
@media (max-width: 767.98px){
  body.v4 .money-tabs .tab{ min-height:44px; }
  body.v4 #pnl-tab-body .pnl-cta{ flex-direction:column; align-items:stretch; }
  body.v4 #pnl-tab-body .pnl-cta-acts{ flex-direction:column; align-items:stretch; gap:8px; }
  body.v4 #pnl-tab-body .pnl-cta-acts .btn-primary{
    width:100%; min-height:44px; display:inline-flex; align-items:center; justify-content:center;
  }
  body.v4 #pnl-tab-body .pnl-cta-acts .card-action{ min-height:44px; display:inline-flex; align-items:center; }
  body.v4 .rev-sync-acts{ width:100%; justify-content:flex-start; }
  body.v4 .rev-sync-from-wrap{ width:100%; flex-wrap:wrap; }
  body.v4 .rev-sync-from-wrap .rev-sync-from{ flex:1 1 150px; min-height:44px; font-size:16px; }
  body.v4 .rev-sync-acts .btn-sm{ min-height:44px; }
  body.v4 #money-body .m1-tile-note{ font-size:11.5px; }
}

/* ===== merged from css/_w8v3.css (V3-AIT) - orchestrator integration, 2026-06-06 ===== */
/* =============================================================
   _w8v3.css - Wave 8 (AI Team) v3 fragment
   Tickets: AIT-1a (departments calendar compress), AIT-1b (skill
   popup), AIT-2b (individual goals UI), AIT-3 (meetings detail),
   AIT-4a/4b (recommendation detail popup restyle + implementation
   block). Tokens/rgba only - no hex, no !important, no em dashes.
   Mobile blocks at the bottom under the MOBILE marker.
   ============================================================= */

/* ── W8V3 AIT-1a: weekly AI calendar - windowed day view ────────
   The grid gets .w8-win + --w8-cols (set by the ResizeObserver in
   agents.js: 7 wide / 5 medium / 3 narrow). The extra class outranks
   the app.css media overrides (repeat(2,1fr) at 920px) so day blocks
   never wrap into an overflowing 2-column pile. minmax(0,1fr) lets
   pills shrink instead of pushing the column wider than its box. */
body.v4 .aiteam .aiweek-grid.w8-win{
  display:grid;
  grid-template-columns:repeat(var(--w8-cols, 7), minmax(0, 1fr));
  overflow:visible;
}
/* The legacy 768px block turned the strip into a flex swipe scroller
   (flex:0 0 78vw day cards). The windowed view replaces it: reset the
   flex sizing so the N visible days share the row instead. */
body.v4 .aiteam .aiweek-grid.w8-win .aiday{ min-width:0; flex:initial; max-width:none; }
body.v4 .aiteam .aiweek-grid.w8-win .aimeet{
  min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  display:flex; align-items:center;
}
body.v4 .aiteam .aiweek-grid.w8-win .aimeet time{ flex-shrink:0; }
body.v4 .aiteam .aiweek-nav{
  display:flex; align-items:center; gap:6px; margin-left:12px;
}
body.v4 .aiteam .aiweek-nav-btn{
  width:30px; height:30px; min-width:30px; border-radius:50%;
  border:1px solid var(--line); background:var(--surface);
  color:var(--ink-mid); cursor:pointer; display:grid; place-items:center;
  transition:background 120ms linear, color 120ms linear;
}
body.v4 .aiteam .aiweek-nav-btn:hover{ background:var(--neutral-bg); color:var(--ink); }
body.v4 .aiteam .aiweek-nav-btn:focus-visible{ outline:none; box-shadow:var(--el-focus); }
body.v4 .aiteam .aiweek-nav-btn[disabled]{ opacity:.35; cursor:default; }
body.v4 .aiteam .aiweek-nav-lbl{
  font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ai-ink-light); white-space:nowrap;
}
body.v4.dark .aiteam .aiweek-nav-btn{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); color:var(--ink-2); }

/* ── W8V3 AIT-1b: director/agent skill popup ────────────────────
   Style-guide glass grammar: frosted card, eyebrow, big title,
   label/value rows, ghost+secondary footer, dark mode. */
body.v4 .w8-skill-scrim{
  position:fixed; inset:0; z-index:1200; background:rgba(0,0,0,.32);
  padding:40px; display:flex; align-items:flex-start; justify-content:center; overflow-y:auto;
}
body.v4.dark .w8-skill-scrim{ background:rgba(0,0,0,.55); }
body.v4 .w8-skill{
  width:520px; max-width:100%;
  background:var(--paper-3); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--border); border-radius:var(--r-xl);
  box-shadow:var(--sh-modal); overflow:hidden;
}
body.v4 .w8-skill-h{
  display:flex; align-items:flex-start; gap:14px; padding:20px 24px 16px;
  border-bottom:1px solid var(--rule);
}
body.v4 .w8-skill-av{
  width:46px; height:46px; min-width:46px; border-radius:14px; display:grid; place-items:center;
  font-size:14px; font-weight:800; color:rgba(255,255,255,.96);
  background:linear-gradient(140deg, var(--w8-av-c, var(--cherry)), var(--ink));
}
body.v4 .w8-skill-who{ flex:1; min-width:0; }
body.v4 .w8-skill-name{ font-size:17px; font-weight:700; letter-spacing:-.014em; color:var(--g-ink-1); margin:0 0 3px; }
body.v4.dark .w8-skill-name{ color:var(--ink-1); }
body.v4 .w8-skill-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:11.5px; color:var(--g-ink-3); }
body.v4 .w8-skill-tag{
  font-size:9.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  padding:2px 9px; border-radius:var(--r-pill);
  background:var(--w8-av-bg, var(--neutral-bg)); color:var(--w8-av-c, var(--ink-mid));
}
body.v4 .w8-skill-x{
  width:30px; height:30px; min-width:30px; border-radius:50%; border:none;
  background:var(--rule); color:var(--g-ink-3); font-size:14px; cursor:pointer;
  display:grid; place-items:center;
}
body.v4 .w8-skill-x:hover{ color:var(--cherry); }
body.v4 .w8-skill-x:focus-visible{ outline:none; box-shadow:var(--el-focus); }
body.v4 .w8-skill-b{ padding:18px 24px 20px; }
body.v4 .w8-skill-eye{
  font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--blue); margin-bottom:7px;
}
body.v4 .w8-skill-title{ font-size:15px; font-weight:700; letter-spacing:-.01em; color:var(--g-ink-1); margin:0 0 9px; }
body.v4.dark .w8-skill-title{ color:var(--ink-1); }
body.v4 .w8-skill-body{ font-size:13.5px; line-height:1.65; color:var(--ink-2); white-space:pre-wrap; }
body.v4 .w8-skill-empty{ font-size:13px; color:var(--g-ink-4); font-style:italic; }
body.v4 .w8-skill-ver{ font-size:10.5px; color:var(--g-ink-4); margin-top:12px; }
body.v4 .w8-skill-foot{
  display:flex; gap:10px; justify-content:flex-end; padding:14px 24px;
  background:var(--neutral-bg); border-top:1px solid var(--rule);
}
body.v4.dark .w8-skill-foot{ background:rgba(255,255,255,.04); }

/* ── W8V3 AIT-2b: individual goals - ownership UI ───────────────
   Company/Individual choice in the goal modal + person picker, and
   the owner pill on goal cards. Reuses the house pill grammar. */
body.v4 .w8-own{ margin:0 0 14px; }
body.v4 .w8-own-row{ display:flex; gap:8px; margin-top:6px; }
body.v4 .w8-own-btn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
  min-height:38px; padding:8px 12px; border-radius:var(--r-pill);
  border:1px solid var(--line); background:var(--surface);
  font-size:12.5px; font-weight:650; color:var(--ink-mid); cursor:pointer;
  transition:background 120ms linear, color 120ms linear, border-color 120ms linear;
}
body.v4 .w8-own-btn:hover{ background:var(--neutral-bg); color:var(--ink); }
body.v4 .w8-own-btn:focus-visible{ outline:none; box-shadow:var(--el-focus); }
body.v4 .w8-own-btn.on{
  background:var(--cherry-bg); border-color:var(--cherry-soft); color:var(--cherry);
}
body.v4 .w8-own-pick{ margin-top:8px; }
body.v4 .w8-own-pick select{ width:100%; }
body.v4 .w8-own-self{
  margin-top:8px; font-size:12px; color:var(--g-ink-3);
  background:var(--neutral-bg); border-radius:var(--r-sm); padding:8px 11px;
}
body.v4 .w8-owner-pill{
  display:inline-flex; align-items:center; gap:5px;
  font-size:10px; font-weight:750; letter-spacing:.05em; text-transform:uppercase;
  padding:3px 9px; border-radius:var(--r-pill);
  background:var(--lilac-bg, var(--neutral-bg)); color:var(--lilac-fg, var(--ink-mid));
}
body.v4.dark .w8-own-btn{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); }
body.v4.dark .w8-own-self{ background:rgba(255,255,255,.05); }

/* ── W8V3 AIT-3: meetings list + detail additions ───────────────
   Attendee summary on rows, attendee chips and honest "not recorded"
   lines in the detail. Existing .mrow/.mtg-modal chrome untouched. */
/* The W8 row carries an extra stacked cell (summary + attendees), so it
   declares its own 5-column grid rather than inheriting the legacy one. */
body.v4 .velocity-ag.recs-impact .mrow.w8{
  grid-template-columns:auto auto auto minmax(0,1fr) auto;
}
body.v4 .velocity-ag.recs-impact .mrow.w8 .w8-mmain{
  min-width:0; display:flex; flex-direction:column; gap:2px;
}
body.v4 .velocity-ag .m-att{
  font-size:11px; color:var(--g-ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Detail chips live inside the meeting modal/sheet, which mounts on
   document.body (NOT inside .velocity-ag) - scope them like the other
   mm-* modal rules. */
body.v4 .mtg-modal .w8-att-row, body.v4 .ri-sheet-scrim .w8-att-row{ display:flex; flex-wrap:wrap; gap:6px; }
body.v4 .mtg-modal .w8-att, body.v4 .ri-sheet-scrim .w8-att{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:600; color:var(--ink-2);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-pill); padding:4px 10px 4px 4px;
}
body.v4 .mtg-modal .w8-att .av, body.v4 .ri-sheet-scrim .w8-att .av{
  width:20px; height:20px; border-radius:7px; display:grid; place-items:center;
  font-size:8.5px; font-weight:800; color:rgba(255,255,255,.96);
  background:linear-gradient(140deg, var(--cherry), var(--ink));
}
body.v4 .mtg-modal .w8-att.is-dir, body.v4 .ri-sheet-scrim .w8-att.is-dir{ border-color:var(--cherry-soft); }
body.v4 .mtg-modal .w8-att-note, body.v4 .ri-sheet-scrim .w8-att-note{ font-size:10.5px; color:var(--g-ink-4); margin-top:7px; }
body.v4 .mtg-modal .w8-missing, body.v4 .ri-sheet-scrim .w8-missing{
  font-size:12.5px; color:var(--g-ink-4); font-style:italic; margin:0;
}
body.v4 .mtg-modal .mm-sec-h .dot.prep, body.v4 .ri-sheet-scrim .mm-sec-h .dot.prep{ background:var(--c-butter, var(--butter, rgba(0,0,0,.2))); }
body.v4 .mtg-modal .mm-sec-h .dot.research, body.v4 .ri-sheet-scrim .mm-sec-h .dot.research{ background:var(--good); }
body.v4 .mtg-modal .mm-sec-h .dot.att, body.v4 .ri-sheet-scrim .mm-sec-h .dot.att{ background:var(--blue); }
body.v4.dark .mtg-modal .w8-att, body.v4.dark .ri-sheet-scrim .w8-att{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); }

/* ── W8V3 AIT-4a: recommendation detail popup - style-guide pass ─
   NOTE (QA correction): an earlier wave DID ship rx-* rules scoped
   body.v4 .rx-detail .rx-* (around line 33884). The new rules below
   are scoped the same way so they win by file order. Adds: body prose,
   score row as a label/value pair, per-goal centre-axis bars with
   why lines, arithmetic strip, action rows, focus states, dark mode.
   Handlers and class names unchanged (markup is the spec). */
body.v4 .rx-detail .rx-body{
  font-size:13.5px; line-height:1.65; color:var(--ink-2); margin:0 0 16px;
}
body.v4 .rx-detail .rx-score-row{
  display:flex; align-items:center; gap:14px; padding:12px 14px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); margin-bottom:18px;
}
body.v4 .rx-detail .rx-big{
  width:56px; height:50px; min-width:56px; border-radius:12px;
  display:grid; place-items:center;
  font-size:20px; font-weight:800; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
body.v4 .rx-detail .rx-big.s-high{ background:var(--c-mint); color:var(--on-mint); }
body.v4 .rx-detail .rx-big.s-mid{ background:var(--c-butter); color:var(--on-butter); }
body.v4 .rx-detail .rx-big.s-low{ background:var(--neutral-bg); color:var(--g-ink-3); }
body.v4 .rx-detail .rx-big.s-none-pill{ background:transparent; border:1.5px dashed var(--line2); color:var(--g-ink-4); font-size:15px; }
body.v4 .rx-detail .rx-band{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
body.v4 .rx-detail .rx-band b{ font-size:13px; font-weight:700; color:var(--g-ink-1); }
body.v4.dark .rx-detail .rx-band b{ color:var(--ink-1); }
body.v4 .rx-detail .rx-band span{ font-size:12px; line-height:1.5; color:var(--g-ink-3); }
body.v4 .rx-detail .rx-tradeoff{ color:var(--cherry); font-weight:700; }
body.v4 .rx-detail .rx-goal{ padding:9px 0; border-bottom:1px solid var(--rule-soft); }
body.v4 .rx-detail .rx-goal:last-of-type{ border-bottom:none; }
body.v4 .rx-detail .rx-goal-h{ display:flex; align-items:center; gap:8px; margin-bottom:7px; }
body.v4 .rx-detail .rx-goal-h .ep-g{ flex:1; min-width:0; }
body.v4 .rx-detail .rx-bar{
  position:relative; height:7px; border-radius:var(--r-pill);
  background:var(--rule); overflow:hidden;
}
body.v4 .rx-detail .rx-bar .rx-axis{
  position:absolute; left:50%; top:0; bottom:0; width:1.5px;
  background:var(--line2); transform:translateX(-50%); z-index:1;
}
body.v4 .rx-detail .rx-bar i{ position:absolute; top:0; bottom:0; border-radius:var(--r-pill); }
body.v4 .rx-detail .rx-why{
  font-size:11.5px; line-height:1.5; color:var(--g-ink-3); margin-top:6px;
}
body.v4 .rx-detail .ep-math{
  display:flex; justify-content:space-between; gap:10px;
  font-size:11px; color:var(--g-ink-3); margin-top:14px;
  background:var(--rule-soft); border-radius:var(--r-sm); padding:8px 12px;
  font-variant-numeric:tabular-nums;
}
body.v4 .rx-detail .ep-math b{ color:var(--g-ink-1); white-space:nowrap; }
body.v4.dark .rx-detail .ep-math{ background:var(--neutral-bg); }
body.v4.dark .rx-detail .ep-math b{ color:var(--ink-1); }
body.v4 .rx-detail .ep-scoredby{ font-size:10.5px; color:var(--g-ink-4); margin-top:8px; }
body.v4 .rx-detail .rx-acts{
  display:flex; gap:10px; justify-content:flex-end; align-items:center;
  margin-top:18px; padding-top:14px; border-top:1px solid var(--rule);
}
body.v4 .rx-detail .rx-acts.rx-acts-do{ margin-top:8px; padding-top:0; border-top:none; }
body.v4 .rx-detail .rx-acts button{ min-height:38px; }
body.v4 .rx-detail .rx-acts button:focus-visible{ outline:none; box-shadow:var(--el-focus); border-radius:var(--r-pill); }
body.v4 .rx-detail .rx-action-line{
  font-size:12px; color:var(--ink-2); margin-top:16px;
  background:var(--ok-bg, var(--neutral-bg)); border-radius:var(--r-sm); padding:8px 12px;
}
body.v4 .rx-detail .rx-action-line b{ color:var(--g-ink-1); }
body.v4.dark .rx-detail .rx-action-line b{ color:var(--ink-1); }
body.v4.dark .rx-detail .rx-score-row{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.1); }

/* ── W8V3 AIT-4b: "How we would implement" block ────────────────
   Stored implementation_path renders as numbered steps; derived
   paths render as plain lines; the honest fallback is muted italic. */
body.v4 .rx-detail .rx-impl-steps{ margin:0; padding:0 0 0 2px; list-style:none; counter-reset:w8i; }
body.v4 .rx-detail .rx-impl-steps li{
  font-size:13px; color:var(--ink-2); line-height:1.5;
  padding:6px 0 6px 30px; position:relative;
  border-bottom:1px solid var(--rule-soft); counter-increment:w8i;
}
body.v4 .rx-detail .rx-impl-steps li:last-child{ border-bottom:none; }
body.v4 .rx-detail .rx-impl-steps li::before{
  content:counter(w8i); position:absolute; left:0; top:6px;
  width:20px; height:20px; border-radius:6px;
  background:var(--c-sky, var(--sky, var(--neutral-bg))); color:var(--on-sky, var(--ink));
  font-size:10.5px; font-weight:700; display:grid; place-items:center;
}
body.v4 .rx-detail .rx-impl-line{ font-size:13px; color:var(--ink-2); line-height:1.55; margin:0 0 6px; }
body.v4 .rx-detail .rx-impl-fallback{ font-size:12.5px; color:var(--g-ink-4); font-style:italic; margin:0; }

/* ════════════════════════════════════════════════════════════════
   MOBILE: W8V3 (agents departments strip, skill popup, goals
   ownership, meetings detail, rec explain sheet)
   Additive only - desktop rules above unchanged.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px){
  /* AIT-1a: the ResizeObserver drives 3-day windows on phones; keep
     the strip header stacking and give arrows full touch targets. */
  body.v4 .aiteam .aiweek-nav-btn{ width:44px; height:44px; min-width:44px; }
  body.v4 .aiteam .aiweek-head{ flex-wrap:wrap; row-gap:8px; }
  body.v4 .aiteam .aiweek-nav{ margin-left:auto; }

  /* AIT-1b: skill popup becomes a bottom sheet. */
  body.v4 .w8-skill-scrim{ padding:0; align-items:flex-end; }
  body.v4 .w8-skill{
    width:100%; max-height:82vh; overflow-y:auto;
    border-radius:var(--r-xl) var(--r-xl) 0 0; border-bottom:none;
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }
  body.v4 .w8-skill-foot button{ flex:1; min-height:44px; justify-content:center; }
  body.v4 .w8-skill-x{ width:36px; height:36px; min-width:36px; }

  /* AIT-2b: ownership buttons stack with full touch targets. */
  body.v4 .w8-own-row{ flex-direction:column; }
  body.v4 .w8-own-btn{ min-height:44px; }
  body.v4 .w8-own-pick select{ min-height:44px; font-size:16px; }

  /* AIT-3: meeting rows stack to one column (the W8 grid declares its
     own columns, so it needs its own mobile override); the attendee
     summary hides (counts stay); detail chips wrap and stay tappable. */
  body.v4 .velocity-ag.recs-impact .mrow.w8{ grid-template-columns:minmax(0,1fr); }
  body.v4 .velocity-ag.recs-impact .mrow.w8 .m-sum{ white-space:normal; }
  body.v4 .velocity-ag .m-att{ display:none; }
  body.v4 .mtg-modal .w8-att, body.v4 .ri-sheet-scrim .w8-att{ min-height:32px; }

  /* AIT-4a/4b: explain sheet action buttons go full-width, thumb zone. */
  body.v4 .rx-detail .rx-acts{ flex-direction:column-reverse; align-items:stretch; }
  body.v4 .rx-detail .rx-acts button{ width:100%; min-height:44px; justify-content:center; }
  body.v4 .rx-detail .rx-score-row{ gap:11px; }
}
@media (max-width: 480px){
  body.v4 .rx-detail .rx-big{ width:48px; height:44px; min-width:48px; font-size:17px; }
  body.v4 .w8-skill-b{ padding:16px 18px 18px; }
  body.v4 .w8-skill-h{ padding:16px 18px 13px; }
  body.v4 .w8-skill-foot{ padding:12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); }
}


/* ===== merged from css/_w910v3.css (V3-STUD-CCAL-CMDC) - orchestrator integration, 2026-06-06 ===== */
/* =============================================================
   W910V3 fragment - Wave 9/10 of the v3 brief.
   Studio Schedule (STUD-2/3/4), Content Calendar (CCAL-1),
   Command Centre (CMDC-1/2, PROC-1/2).
   ALL Wave-9/10 CSS lives here (css/app.css untouched this wave).
   Tokens / rgba only - no hex, no bang-priority flags, no em dashes.
   Loaded by the three page modules via ensureW910Css()
   (js/lib/w910-css.js), so index.html needs no stylesheet change.
   ============================================================= */

/* ── STUD-4 · one continuous surface ──────────────────────────
   The date/controls subbar, the schedule grid and the (new) colour-key
   row read as ONE card: subbar = header band (top radii only, no bottom
   border), grid = middle band (no radii, hairline top divider), keyrow =
   footer band (bottom radii). This removes the seam Peter flagged:
   the two panels had mismatched radii (12px vs 14px), mismatched
   background alphas (.70 vs .65) and a canvas-coloured gap between them. */
body.v4 .ss-v2 .ss-subbar {
  margin-bottom: 0;
  border-radius: var(--r) var(--r) 0 0;
  border-bottom: none;
  background: rgba(255, 255, 255, 0.65);
}
body.v4 .ss-v2 .ss-grid {
  border-radius: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  border-bottom: none;
}

/* ── STUD-2 · colour KEY under the day headers ────────────────
   The key moved out of the subbar (it was inline with the date range) to
   a strip that starts under the day-header column, as the unified card's
   footer band. */
body.v4 .ss-v2 .ss-keyrow {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 10px 18px 12px;
  font-size: 12px;
  color: var(--ink-3);
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 0 0 var(--r) var(--r);
}
body.v4 .ss-v2 .ss-key { display: inline-flex; align-items: center; gap: 7px; }
/* hatched swatch for personal "Busy" blocks (mirrors .ss-event.ss-personal) */
body.v4 .ss-key-swatch.ss-key-busy {
  background: repeating-linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.10) 3px,
    rgba(0, 0, 0, 0.04) 3px, rgba(0, 0, 0, 0.04) 6px
  );
  border-color: rgba(0, 0, 0, 0.18);
}
/* dark mode: the subbar + grid get the app-level dark gradient from
   app.css; the keyrow matches with a quiet translucent band. */
body.v4.dark .ss-v2 .ss-keyrow {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.70);
}
body.v4.dark .ss-key-swatch.ss-key-busy {
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.18) 3px,
    rgba(255, 255, 255, 0.07) 3px, rgba(255, 255, 255, 0.07) 6px
  );
  border-color: rgba(255, 255, 255, 0.25);
}

/* ── STUD-2 · today + the active week stand out ───────────────
   .ss-curweek is set by studio.js only when the visible week IS the
   current week (weekOffset 0). Each day header gets a soft underline
   bar; today's gets the full-strength blue bar + a tinted chip
   background behind the whole header cell. Browsing other weeks shows
   none of this, so "am I on this week?" is answered at a glance. */
body.v4 .ss-curweek .ss-day-head { position: relative; }
body.v4 .ss-curweek .ss-day-head::after {
  content: '';
  position: absolute;
  left: 14px;
  bottom: 9px;
  width: 26px;
  height: 3px;
  border-radius: var(--r-pill);
  background: rgba(0, 113, 227, 0.28);
}
body.v4 .ss-curweek .ss-day-head .ss-dow { color: var(--ink-2); }
body.v4 .ss-curweek .ss-today-row.ss-day-head {
  background: rgba(0, 113, 227, 0.07);
  border-radius: var(--r-sm);
}
body.v4 .ss-curweek .ss-today-row.ss-day-head::after { background: var(--blue); }
body.v4 .ss-curweek .ss-today-row.ss-day-head .ss-dow { color: var(--blue); }
body.v4.dark .ss-curweek .ss-day-head::after { background: rgba(56, 151, 255, 0.40); }
body.v4.dark .ss-curweek .ss-today-row.ss-day-head { background: rgba(56, 151, 255, 0.14); }
body.v4.dark .ss-curweek .ss-today-row.ss-day-head::after { background: var(--blue); }

/* "This week" chip next to the range label in the subbar (tinted chip is
   one of the briefed emphasis options). */
body.v4 .ss-thisweek-pill {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  background: var(--blue-bg);
  color: var(--blue);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* ── STUD-3 · toggles aligned with the week-move buttons ──────
   body.v4 .tabs carries a bang-priority margin-bottom:16px (app.css,
   the shared tab-strip rule), which rode the Studio/Peter source
   toggles 8px high of the prev/Today/next cluster inside the centre-
   aligned subbar row. Priority flags are banned here, so the fix is a
   counterweight margin-top; the flex centring then puts both controls
   on one row axis. Measured: tabs centre 226px vs nav centre 234px
   before; identical after. */
body.v4 .ss-subbar-r .tabs.ss-source-tabs { margin-top: 16px; }
/* keep the subbar's visual height as before (+16px counterweight,
   -12px padding) */
body.v4 .ss-v2 .ss-subbar { padding: 9px 18px; }

/* ── CCAL-1 · RELEASES vs TARGET panel ────────────────────────
   Target fixed at 10/month. Solid segment = released, striped segment =
   scheduled, empty track = the gap to target. .is-short carries the
   cherry "Need X more bookings" flag. */
body.v4 .ccal-target {
  background: var(--paper-3);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  margin-bottom: 16px;
}
body.v4 .ccal-target-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
/* .ccal-target-eye needs no declarations here: the app-wide canonical
   eyebrow rule (app.css PRINCIPLE 1, [class*="-eye"]) already styles it
   blue 10.5px uppercase, which is the house grammar for card eyebrows. */
body.v4 .ccal-target-count {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink-1);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
body.v4 .ccal-target-of { font-size: 13px; font-weight: 600; color: var(--ink-4); margin-left: 4px; }
body.v4 .ccal-target.is-short .ccal-target-count strong { color: var(--cherry); }
body.v4 .ccal-target-bar {
  display: flex;
  height: 10px;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, 0.07);
  overflow: hidden;
}
body.v4.dark .ccal-target-bar { background: rgba(255, 255, 255, 0.10); }
/* solid released segment. NOTE: var(--mint) is re-mapped to a pastel
   (#a8d9c0-equivalent) by an app.css scope, so the strong mint is set as
   rgba here to keep released visually heavier than the striped scheduled
   segment. */
body.v4 .ccal-tb-rel { background: rgba(29, 158, 117, 0.92); }
body.v4.dark .ccal-tb-rel { background: rgba(68, 201, 138, 0.92); }
body.v4 .ccal-tb-sch {
  background: repeating-linear-gradient(
    45deg,
    rgba(29, 158, 117, 0.55), rgba(29, 158, 117, 0.55) 5px,
    rgba(29, 158, 117, 0.22) 5px, rgba(29, 158, 117, 0.22) 10px
  );
}
body.v4.dark .ccal-tb-sch {
  background: repeating-linear-gradient(
    45deg,
    rgba(68, 201, 138, 0.55), rgba(68, 201, 138, 0.55) 5px,
    rgba(68, 201, 138, 0.22) 5px, rgba(68, 201, 138, 0.22) 10px
  );
}
body.v4 .ccal-target-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
}
body.v4 .ccal-target-legend { font-size: 12.5px; color: var(--ink-3); }
body.v4 .ccal-target-flag {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
body.v4 .ccal-target.is-short .ccal-target-flag { background: var(--cherry-bg); color: var(--cherry); }
body.v4 .ccal-target.is-short { border-color: rgba(184, 0, 43, 0.22); }
body.v4.dark .ccal-target.is-short { border-color: rgba(255, 59, 95, 0.35); }
body.v4 .ccal-target.is-hit .ccal-target-flag,
body.v4 .ccal-target.is-past-ok .ccal-target-flag { background: var(--c-mint); color: var(--on-mint); }
body.v4 .ccal-target.is-missed .ccal-target-flag { background: rgba(0, 0, 0, 0.06); color: var(--ink-3); }
body.v4.dark .ccal-target.is-missed .ccal-target-flag { background: rgba(255, 255, 255, 0.08); }

/* ── CMDC-2 · Command Centre dropdowns on the house grammar ───
   The filter-bar selects were full pills (border-radius var(--r-pill));
   every other select in the app (es-fld pockets, cc-modal editor fields,
   form-input) is a 10px rounded rectangle. Standardise. The Wave 5
   global rule already supplies the inset chevron. The pill-shaped text
   SEARCH input is untouched: the ticket covers dropdowns. */
body.v4 .cc-fsel { border-radius: 10px; }

/* ── PROC-1 · pipeline stage chips ────────────────────────────
   Same chip grammar as the .cc-cat pills (10.5px bold uppercase, 6px
   radius); ringed so the stage reads as workflow state, not category.
   Stage source: command_items.stage column when migrated (draft 0158),
   stage:* tag fallback today. */
body.v4 .cc-stage {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 6px;
  padding: 2px 9px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
/* NOTE: the --c-* pastel-surface tokens are re-mapped to STRONG status
   colours inside body.v4 (app.css "SV refined" block), so chips here use
   the same rgba-wash + strong-ink pairing the .cc-cat pills on the same
   row use; both modes stay readable. */
body.v4 .cc-stage-architect    { background: rgba(94, 92, 230, 0.13);  color: var(--apl-lilac); }
body.v4 .cc-stage-design       { background: rgba(190, 24, 93, 0.12);  color: var(--c-rose); }
body.v4 .cc-stage-dev          { background: rgba(0, 113, 227, 0.13);  color: var(--apl-blue); }
body.v4 .cc-stage-qa           { background: rgba(146, 102, 13, 0.15); color: var(--c-butter); }
body.v4 .cc-stage-design-qa    { background: rgba(194, 65, 12, 0.13);  color: var(--apl-orange); }
body.v4 .cc-stage-peter-verify { background: var(--cherry-bg);         color: var(--cherry); }
body.v4 .cc-stage-done         { background: rgba(31, 157, 87, 0.14);  color: var(--good); }
/* dark mode: the rose/butter strong inks don't flip via tokens - lift them */
body.v4.dark .cc-stage-design  { background: rgba(244, 114, 182, 0.16); color: rgba(255, 159, 192, 1); }
body.v4.dark .cc-stage-qa      { background: rgba(242, 212, 121, 0.14); color: var(--warn-fg); }

/* ── CMDC-1 · approve-all progress pill ───────────────────────
   One fixed pill that updates in place during the sequential writes
   (toasts stack; 30 of them would flood the corner). */
body.v4 .caa-progress {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 4000;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: var(--ink-1);
  color: var(--canvas);
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--sh-2);
}

/* ── PROC-2 · done-gate modal ─────────────────────────────────
   Reuses the cc-modal grammar; these are just the gate-specific bits. */
body.v4 .dg-modal { max-width: 480px; }
body.v4 .dg-lead { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
body.v4 .dg-lead strong { color: var(--ink-1); }
body.v4 .dg-hint { margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--ink-4); }
body.v4 .dg-modal textarea { width: 100%; box-sizing: border-box; resize: vertical; }

/* ── MOBILE: W910V3 (studio key + subbar · calendar target · command) ──
   Additive only; desktop untouched (rules live inside the media query).
   44px targets are inherited from the existing page mobile blocks. */
@media (max-width: 768px) {
  /* studio: the subbar wraps to stacked rows on phones (app.css mobile
     block); the 16px counterweight would skew the stacked layout, and the
     shared .tabs margin-bottom is wanted there for separation. */
  body.v4 .ss-subbar-r .tabs.ss-source-tabs { margin-top: 0; }
  body.v4 .ss-v2 .ss-subbar { padding: 12px 14px; }
  body.v4 .ss-v2 .ss-keyrow { padding: 10px 14px 12px; gap: 12px; row-gap: 8px; }

  /* calendar: target panel stacks; the flag pill stays tappable-size */
  body.v4 .ccal-target { padding: 14px; }
  body.v4 .ccal-target-foot { flex-direction: column; align-items: flex-start; gap: 8px; }
  body.v4 .ccal-target-flag { min-height: 28px; display: inline-flex; align-items: center; }

  /* command: stage chip joins the wrapping pill row (cc-row-pills already
     wraps on mobile); the done-gate textarea keeps the 16px iOS-no-zoom
     size and the gate buttons the 44px target the modal grammar uses. */
  body.v4 .cc-stage { font-size: 10px; padding: 2px 7px; }
  body.v4 .dg-modal textarea { font-size: 16px; min-height: 88px; }
  body.v4 .dg-modal .cc-modal-foot button { min-height: 44px; }
  body.v4 .cc-approve-all { min-height: 44px; }
  body.v4 .caa-progress { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); }
}


/* ===== merged from css/_w11v3.css (V3-SETT-FDBK) - orchestrator integration, 2026-06-06 ===== */
/* =============================================================
   _w11v3.css - Wave 11 v3 (Settings + Feedback)
   Injected by js/pages/settings.js / js/pages/feedback.js via a
   <link id="w11v3-css"> (index.html is owned by another wave).
   Tokens + rgba only. No hex, no important-flags, additive only.
   ============================================================= */

/* ── SETT-1 · Newsletter / Social shared page grammar ─────────── */
body.v4 .w11nl{ max-width: 720px; }
body.v4 .w11-pagesub{
  margin: 0 0 18px; font-size: 13.5px; line-height: 1.6;
  color: var(--ink-3); max-width: 62ch;
}
body.v4 .w11-card{
  background: var(--paper);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh);
  padding: 18px 20px;
  margin-bottom: 14px;
}
body.v4 .w11-sechead{
  display: flex; align-items: center; gap: 12px; margin: 0 0 12px;
}
body.v4 .w11-secline{
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-4); white-space: nowrap;
}
body.v4 .w11-secrule{ flex: 1; height: 1px; background: var(--rule); }

/* label/value rows */
body.v4 .w11-kv{
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; padding: 11px 0; border-top: 1px solid var(--rule-soft);
}
body.v4 .w11-kv:first-of-type{ border-top: 0; padding-top: 2px; }
body.v4 .w11-kv-l{ min-width: 0; }
body.v4 .w11-kv-label{ font-size: 13.5px; font-weight: var(--fw-strong); color: var(--ink-1); }
body.v4 .w11-kv-sub{ font-size: 12px; color: var(--ink-3); margin-top: 2px; line-height: 1.55; max-width: 52ch; }
body.v4 .w11-kv-sub code{ font-size: 11px; }
body.v4 .w11-kv-v{ flex: none; display: flex; align-items: center; gap: 8px; }

/* fields */
body.v4 .w11-field{ margin: 0 0 14px; }
body.v4 .w11-field:last-child{ margin-bottom: 2px; }
body.v4 .w11-field-label{
  display: block; font-size: 12.5px; font-weight: var(--fw-strong);
  color: var(--ink-2); margin-bottom: 2px;
}
body.v4 .w11-field-sub{ font-size: 12px; color: var(--ink-3); margin: 0 0 7px; line-height: 1.5; }
body.v4 .w11-field-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
body.v4 .w11-actions{ display: flex; justify-content: flex-end; margin-top: 4px; }

/* switch (pure CSS, wraps the existing #nl-autosend checkbox) */
body.v4 .w11-switch{ position: relative; display: inline-flex; cursor: pointer; }
body.v4 .w11-switch input{ position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
body.v4 .w11-switch-track{
  width: 44px; height: 26px; border-radius: var(--r-pill);
  background: var(--line-2); transition: background .22s ease;
  display: inline-block; position: relative; pointer-events: none;
}
body.v4 .w11-switch-track::after{
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.18);
  transition: transform .22s ease;
}
body.v4 .w11-switch input:checked + .w11-switch-track{ background: var(--good-2); }
body.v4 .w11-switch input:checked + .w11-switch-track::after{ transform: translateX(18px); }
body.v4 .w11-switch input:focus-visible + .w11-switch-track{
  outline: 2px solid var(--blue); outline-offset: 2px;
}

/* ── SETT-2 · Social profile rows with platform logo chips ────── */
body.v4 .w11-socrow{
  display: flex; align-items: flex-start; gap: 14px;
  padding: 13px 0; border-top: 1px solid var(--rule-soft);
}
body.v4 .w11-socrow:first-of-type{ border-top: 0; padding-top: 2px; }
body.v4 .w11-socic{
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  display: flex; align-items: center; justify-content: center;
  margin-top: 16px;
}
body.v4 .w11-socic svg{ display: block; }
/* NOTE: in production app.css (v4 :root) the --c-X tokens are the
   SATURATED tone and --c-X-bg is the pastel tint (the inverse of the
   tokens.css convention) - same pairing as .ec-glance-icon--rose. */
body.v4 .w11-soc-rose  { background: var(--c-rose-bg);   color: var(--c-rose); }
body.v4 .w11-soc-sky   { background: var(--c-sky-bg);    color: var(--c-sky); }
body.v4 .w11-soc-lilac { background: var(--c-lilac-bg);  color: var(--c-lilac); }
body.v4 .w11-soc-mint  { background: var(--c-mint-bg);   color: var(--c-mint); }
body.v4 .w11-soc-butter{ background: var(--c-butter-bg); color: var(--c-butter); }
body.v4 .w11-soc-body{ flex: 1; min-width: 0; }
body.v4 .w11-soc-name{
  display: block; font-size: 12.5px; font-weight: var(--fw-strong);
  color: var(--ink-2); margin-bottom: 4px;
}

/* dark mode - pastel chips sit on dark glass; lift them slightly */
body.v4.dark .w11-soc-rose  { background: rgba(255,55,95,.18);  color: var(--cherry); }
body.v4.dark .w11-soc-sky   { background: rgba(56,151,255,.18); color: var(--blue); }
body.v4.dark .w11-soc-lilac { background: rgba(142,139,255,.18); color: var(--lilac); }
body.v4.dark .w11-soc-mint  { background: rgba(52,199,89,.16);  color: var(--good-2); }
body.v4.dark .w11-soc-butter{ background: rgba(255,214,10,.14); color: var(--warn); }

/* ── SETT-3 · Cron health additions ──────────────────────────── */
body.v4 .w11-cron-resp{ margin-top: 14px; }
body.v4 .w11-cron-resp-hd{
  font-size: 12px; font-weight: var(--fw-strong); color: var(--ink-2);
  margin-bottom: 6px;
}
body.v4 .w11-cron-resp-pre{
  margin: 0; padding: 10px 12px; max-height: 240px; overflow: auto;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); font-size: 11.5px; line-height: 1.55;
  color: var(--ink-2); white-space: pre-wrap; word-break: break-word;
}

/* ── SETT-4 · Systems & spend bank-fed actuals ───────────────── */
body.v4 .w11-bank{ margin: 0 0 16px; }
body.v4 .w11-bank-stats{ display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
body.v4 .w11-bank-stat{
  flex: 1; min-width: 140px; padding: 12px 14px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r); display: flex; flex-direction: column; gap: 2px;
}
body.v4 .w11-bank-n{ font-size: 19px; font-weight: var(--fw-title); color: var(--ink-1); }
body.v4 .w11-bank-l{ font-size: 11.5px; color: var(--ink-3); }
body.v4 .w11-bank-mrow{
  display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-top: 1px solid var(--rule-soft); font-size: 13px;
}
body.v4 .w11-bank-mname{ color: var(--ink-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.v4 .w11-bank-mval{ font-weight: var(--fw-strong); color: var(--ink-1); flex: none; }
body.v4 .w11-bank-empty{ padding: 6px 0 2px; }
body.v4 .w11-bank-empty-t{ font-size: 13.5px; font-weight: var(--fw-strong); color: var(--ink-1); }
body.v4 .w11-bank-empty-s{ font-size: 12.5px; color: var(--ink-3); line-height: 1.6; margin: 4px 0 10px; max-width: 62ch; }

/* ── FDBK-1 · Inbox image thumbnails + lightbox ──────────────── */
body.v4 .fb-attach-thumbwrap{
  display: inline-flex; flex-direction: column; align-items: flex-start;
  gap: 6px; margin: 10px 0 2px; padding: 0; border: 0; background: none;
  cursor: zoom-in; text-align: left;
}
body.v4 .fb-attach-thumb{
  display: block; max-width: 280px; max-height: 180px;
  border-radius: var(--r); border: 1px solid var(--line);
  box-shadow: var(--sh); object-fit: cover;
  transition: transform .18s ease, box-shadow .18s ease;
}
body.v4 .fb-attach-thumbwrap:hover .fb-attach-thumb{
  transform: scale(1.02); box-shadow: var(--sh-2);
}
body.v4 .fb-attach-thumbmeta{ font-size: 11.5px; color: var(--ink-3); }
body.v4 .fb-attach-unavailable{ opacity: .65; cursor: default; }
body.v4 .fb-lightbox{
  position: fixed; inset: 0; z-index: 4000;
  background: rgba(0,0,0,.78);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 32px; cursor: zoom-out;
}
body.v4 .fb-lightbox img{
  max-width: min(1100px, 92vw); max-height: 82vh;
  border-radius: var(--r); box-shadow: var(--sh-modal);
}
body.v4 .fb-lightbox-meta{ color: var(--on-accent); font-size: 12.5px; opacity: .8; }

/* ── MOBILE: settings-newsletter / settings-social (W11v3) ───── */
@media (max-width: 768px){
  body.v4 .w11nl{ max-width: none; }
  body.v4 .w11-field-row{ grid-template-columns: 1fr; gap: 0; }
  body.v4 .w11-card{ padding: 14px; border-radius: var(--r); }
  body.v4 .w11-kv{ flex-direction: column; gap: 8px; }
  body.v4 .w11-kv-v{ align-self: flex-start; }
  body.v4 .w11nl .form-input,
  body.v4 .w11nl select.form-input{ font-size: 16px; min-height: 44px; }
  body.v4 .w11-switch-track{ width: 52px; height: 31px; }
  body.v4 .w11-switch-track::after{ width: 25px; height: 25px; }
  body.v4 .w11-switch input:checked + .w11-switch-track::after{ transform: translateX(21px); }
  body.v4 .w11-actions .btn-primary{ width: 100%; min-height: 44px; }
  body.v4 .w11-socrow{ gap: 10px; }
  body.v4 .w11-socic{ width: 44px; height: 44px; margin-top: 12px; }
}

/* ── MOBILE: settings-systems + cron detail (W11v3) ──────────── */
@media (max-width: 768px){
  body.v4 .w11-bank-stats{ flex-direction: column; }
  body.v4 .w11-bank-stat{ min-width: 0; }
  body.v4 .w11-cron-resp-pre{ max-height: 180px; font-size: 11px; }
}

/* ── MOBILE: feedback inbox attachments (W11v3) ──────────────── */
@media (max-width: 768px){
  body.v4 .fb-attach-thumb{ max-width: 100%; max-height: 220px; }
  body.v4 .fb-attach-thumbwrap{ min-height: 44px; }
  body.v4 .fb-lightbox{ padding: 14px; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  body.v4 .fb-lightbox img{ max-width: 96vw; max-height: 76vh; }
}



/* ── V3-STYL ──  Wave 12 of the v3 brief (STYL-1, STYL-2) - style-guide gaps.
   STYL-1: row hover-lift on older list surfaces. Guide: rows lift slightly
   on hover (translateY(-1px) + var(--el-e2)/var(--el-e3) + var(--el-rim)).
   Gated to real pointer devices with (hover: hover) so touch never gets a
   sticky lift; prefers-reduced-motion drops the transform and keeps the
   shadow cue. MOBILE: nothing needed - the (hover: hover) gate means phones
   and tablets are untouched, no layout or tap-target change. */
@media (hover: hover) {
  body.v4 .cc-row { transition: background .1s, transform .14s ease, box-shadow .14s ease; }
  body.v4 .ep-row { transition: background .12s, transform .14s ease, box-shadow .14s ease; }
  body.v4 .es-art-row { transition: background .12s ease, transform .14s ease, box-shadow .14s ease; }
  body.v4 .es-tick-row,
  body.v4 .gi-attr,
  body.v4 .gi-bar-row,
  body.v4 .data-table tbody tr { transition: transform .14s ease, box-shadow .14s ease; }

  /* compact rows lift to e2 */
  body.v4 .es-tick-row:hover,
  body.v4 .es-art-row:hover,
  body.v4 .gi-attr:hover,
  body.v4 .gi-bar-row:hover,
  body.v4 .data-table tbody tr:hover {
    transform: translateY(-1px);
    box-shadow: var(--el-e2), var(--el-rim);
  }
  /* larger card-like rows lift to e3 */
  body.v4 .cc-row:hover,
  body.v4 .ep-row:hover {
    transform: translateY(-1px);
    box-shadow: var(--el-e3), var(--el-rim);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.v4 .cc-row:hover,
  body.v4 .ep-row:hover,
  body.v4 .es-tick-row:hover,
  body.v4 .es-art-row:hover,
  body.v4 .gi-attr:hover,
  body.v4 .gi-bar-row:hover,
  body.v4 .data-table tbody tr:hover {
    transform: none;
  }
}

/* V3-STYL-2: disabled toggle state (was unstyled - a disabled .ep-toggle
   looked live). Slider fades and signals not-allowed; the knob stays put
   because the :checked + ::before transform rules are untouched, so the
   knob keeps reflecting the real checked state. */
.ep-toggle input:disabled + .ep-toggle-slider {
  opacity: .5;
  cursor: not-allowed;
}

/* ── V3-PICKS-A ──
   Design Batch 2A approved picks: 1B Keith Drafts command palette /
   2C AI Meeting timeline narrative / 3B Recommendation two-column
   decision card. CSS lifted character-for-character from
   _DESIGN_BATCH2_A.html; the mockup inlined token VALUES, mapped back
   here to the var() tokens they came from (tokens.css). House rule:
   mockup class names ARE the production class names; the shared
   grammar (.gm/.pill/.lbl/.att/.zb/.seg/...) clashes with existing
   rules so every selector is prefix-scoped under .v3pa. */

/* Token re-pin on the component root. These popups append to <body>,
   where a later app.css :root block overrides the tokens.css pastels
   with SATURATED values and the body line-height/radius aliases drift -
   the exact trap the "RECS-IMPACT: QA fixes" block documents (its item
   6). Same remedy, same rgb() convention: pin the mockup's light values
   on .v3pa; the dark block restores `inherit` so body.dark's deep
   pastels flow through. The ink-2/ink-4 values are the mockup's own
   :root (the v4 glass ink ramp), lifted verbatim. */
body.v4 .v3pa{
  --c-lilac:rgb(236,233,254); --on-lilac:rgb(60,52,137);
  --c-mint:rgb(225,245,238);  --on-mint:rgb(15,110,86);
  --c-sky:rgb(230,241,251);   --on-sky:rgb(12,68,124);
  --c-peach:rgb(250,236,231); --on-amber:rgb(138,75,0);
  --c-butter:rgb(251,242,218);--on-butter:rgb(138,106,0);
  --c-rose:rgb(251,234,240);  --on-rose:rgb(156,31,75);
  --c-sage:rgb(238,243,226);  --on-sage:rgb(74,99,32);
  --ink-2:rgb(66,66,69); --ink-4:rgb(134,134,139);
  --good:rgb(27,138,60); --warn:rgb(196,113,0);
  --line:rgb(231,231,228); --line-2:rgb(217,217,212);
  --rule:rgba(0,0,0,.06); --rule-soft:rgba(0,0,0,.04);
  --border:rgba(255,255,255,.65);
  --surface:rgb(255,255,255);
  --paper-2:rgba(255,255,255,.45); --paper-3:rgba(255,255,255,.82);
  --blur:blur(28px) saturate(180%);
  --sh:0 1px 2px rgba(0,0,0,.04), 0 16px 40px rgba(0,0,0,.06);
  --sh-2:0 1px 2px rgba(0,0,0,.04), 0 24px 48px rgba(0,0,0,.10);
  --sh-modal:0 32px 80px rgba(0,0,0,.20);
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;
  --fd:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", sans-serif;
  font-family:var(--fd);
  line-height:normal;
}
body.v4.dark .v3pa{
  --c-lilac:inherit; --on-lilac:inherit;
  --c-mint:inherit;  --on-mint:inherit;
  --c-sky:inherit;   --on-sky:inherit;
  --c-peach:inherit; --on-amber:inherit;
  --c-butter:inherit; --on-butter:inherit;
  --c-rose:inherit;  --on-rose:inherit;
  --c-sage:inherit;  --on-sage:inherit;
  --ink-2:inherit; --ink-4:inherit;
  --good:inherit; --warn:inherit;
  --line:inherit; --line-2:inherit;
  --rule:inherit; --rule-soft:inherit;
  --border:inherit;
  --surface:inherit;
  --paper-2:inherit; --paper-3:inherit;
  --sh:inherit; --sh-2:inherit; --sh-modal:inherit;
}

/* shared component grammar (mockup "Shared component grammar") */
body.v4 .v3pa.gm{
  background:var(--paper-3); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--sh-modal);
  overflow:hidden; width:100%;
}
body.v4 .v3pa .gm-head{ padding:20px 24px 16px; border-bottom:1px solid var(--rule); display:flex; align-items:flex-start; gap:12px; }
body.v4 .v3pa .gm-head .gh-t{ flex:1; min-width:0; }
body.v4 .v3pa .gm-head .gh-eyebrow{ font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-4); margin-bottom:4px; }
body.v4 .v3pa .gm-head h3{ margin:0 0 5px; font-size:17px; font-weight:650; letter-spacing:-.014em; color:var(--ink-1); }
body.v4 .v3pa .gm-head .gh-meta{ font-size:11.5px; color:var(--ink-3); display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
body.v4 .v3pa .gm-close{
  width:30px; height:30px; border-radius:50%; border:none; background:var(--rule);
  color:var(--ink-3); font-size:14px; cursor:pointer; display:grid; place-items:center; flex-shrink:0;
}
body.v4 .v3pa .gm-close:hover{ background:rgba(0,0,0,.10); }

body.v4 .v3pa .pill{ font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; border-radius:var(--r-pill); padding:3px 10px; white-space:nowrap; display:inline-block; }
body.v4 .v3pa .pill.butter{ background:var(--c-butter); color:var(--on-butter); }
body.v4 .v3pa .pill.mint{ background:var(--c-mint); color:var(--on-mint); }
body.v4 .v3pa .pill.sky{ background:var(--c-sky); color:var(--on-sky); }
body.v4 .v3pa .pill.lilacp{ background:var(--c-lilac); color:var(--on-lilac); }
body.v4 .v3pa .pill.peach{ background:var(--c-peach); color:var(--on-amber); }
body.v4 .v3pa .pill.rose{ background:var(--c-rose); color:var(--on-rose); }
body.v4 .v3pa .pill.sage{ background:var(--c-sage); color:var(--on-sage); }
body.v4 .v3pa .pill.grey{ background:var(--rule); color:var(--ink-3); }

body.v4 .v3pa .lbl{ font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-4); }
body.v4 .v3pa .val{ font-size:13px; font-weight:600; color:var(--ink-1); font-variant-numeric:tabular-nums; }

body.v4 .v3pa .btn-primary, body.v4 .v3pa .btn-secondary, body.v4 .v3pa .btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border-radius:var(--r-pill); font-size:12.5px; font-weight:600; cursor:pointer;
  padding:8px 18px; line-height:1; border:1px solid transparent; white-space:nowrap;
}
body.v4 .v3pa .btn-primary{ background:var(--cherry); color:var(--on-accent); }
body.v4 .v3pa .btn-primary:hover{ background:var(--cherry-2); }
body.v4 .v3pa .btn-secondary{ background:var(--surface); color:var(--ink-1); border-color:var(--line-2); }
body.v4 .v3pa .btn-secondary:hover{ border-color:var(--ink-4); }
body.v4 .v3pa .btn-ghost{ background:transparent; color:var(--ink-3); }
body.v4 .v3pa .btn-ghost:hover{ background:var(--rule-soft); color:var(--ink-1); }

body.v4 .v3pa .sec-h{ display:flex; align-items:center; gap:8px; font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-4); margin-bottom:9px; }
body.v4 .v3pa .sec-h .dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; }
body.v4 .v3pa .dot.blue{ background:var(--blue); } body.v4 .v3pa .dot.lilacd{ background:var(--lilac); } body.v4 .v3pa .dot.cherryd{ background:var(--cherry); }
body.v4 .v3pa .dot.mintd{ background:var(--good); } body.v4 .v3pa .dot.butterd{ background:var(--warn); } body.v4 .v3pa .dot.greyd{ background:var(--ink-4); }

body.v4 .v3pa .input, body.v4 .v3pa .ta, body.v4 .v3pa .select{
  width:100%; border:1px solid var(--line-2); border-radius:10px; background:var(--surface);
  font-family:var(--fd); font-size:13px; color:var(--ink-1); padding:9px 12px; outline:none;
}
body.v4 .v3pa .input:focus, body.v4 .v3pa .ta:focus{ border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft); }
body.v4 .v3pa .ta{ resize:vertical; line-height:1.55; }

/* attendee chip */
body.v4 .v3pa .att{ display:inline-flex; align-items:center; gap:7px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pill); padding:4px 12px 4px 5px; font-size:11.5px; font-weight:600; color:var(--ink-2); }
body.v4 .v3pa .att .av{ width:21px; height:21px; border-radius:50%; background:var(--c-sky); color:var(--on-sky); font-size:8.5px; font-weight:800; display:grid; place-items:center; letter-spacing:.02em; }
body.v4 .v3pa .att.is-dir .av{ background:var(--hero-1); color:var(--on-accent); }
body.v4 .v3pa .att.is-dir{ border-color:var(--ink-4); }

/* zero-based goal impact bar (the Peter fix - origin hard-left at 0) */
body.v4 .v3pa .zb{ margin-bottom:13px; }
body.v4 .v3pa .zb:last-child{ margin-bottom:0; }
body.v4 .v3pa .zb-h{ display:flex; align-items:center; gap:8px; margin-bottom:5px; }
body.v4 .v3pa .zb-h .g-dot{ width:8px; height:8px; border-radius:50%; }
body.v4 .v3pa .g-dot.rev{ background:var(--good); } body.v4 .v3pa .g-dot.dl{ background:var(--blue); } body.v4 .v3pa .g-dot.rank{ background:var(--lilac); }
body.v4 .v3pa .zb-h .g-name{ font-size:12px; font-weight:600; color:var(--ink-2); flex:1; }
body.v4 .v3pa .zb-h .g-val{ font-size:12px; font-weight:800; font-variant-numeric:tabular-nums; }
body.v4 .v3pa .g-val.pos{ color:var(--good); } body.v4 .v3pa .g-val.neg{ color:var(--cherry); } body.v4 .v3pa .g-val.zero{ color:var(--ink-4); }
body.v4 .v3pa .zb-track{ position:relative; height:10px; border-radius:5px; background:var(--rule-soft); border:1px solid var(--rule); overflow:hidden; }
body.v4 .v3pa .zb-track .tick{ position:absolute; top:0; bottom:0; width:1px; background:var(--rule); }
body.v4 .v3pa .zb-track .fill{ position:absolute; left:0; top:0; bottom:0; border-radius:5px 0 0 5px; }
body.v4 .v3pa .fill.rev{ background:var(--good); } body.v4 .v3pa .fill.dl{ background:var(--blue); } body.v4 .v3pa .fill.rank{ background:var(--lilac); } body.v4 .v3pa .fill.neg{ background:var(--cherry); }
body.v4 .v3pa .zb-scale{ display:flex; justify-content:space-between; font-size:9px; font-weight:700; color:var(--ink-4); margin-top:3px; font-variant-numeric:tabular-nums; }
body.v4 .v3pa .zb-why{ font-size:11px; color:var(--ink-3); line-height:1.5; margin-top:4px; }
body.v4 .v3pa .zb-neg-tag{ font-size:9.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--cherry); }

/* score chips */
body.v4 .v3pa .score-big{ width:64px; height:64px; border-radius:16px; display:grid; place-items:center; align-content:center; flex-shrink:0; }
body.v4 .v3pa .score-big .sn{ font-size:22px; font-weight:800; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; }
body.v4 .v3pa .score-big .sg{ font-size:8.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; margin-top:3px; }
body.v4 .v3pa .score-big.hi{ background:var(--c-mint); color:var(--on-mint); }
body.v4 .v3pa .score-big.mid{ background:var(--c-butter); color:var(--on-butter); }

/* scoreboard shared bits */
body.v4 .v3pa .seg{ display:inline-flex; background:var(--rule-soft); border:1px solid var(--rule); border-radius:var(--r-pill); padding:2px; gap:2px; }
body.v4 .v3pa .seg button{ border:none; background:transparent; font-size:10.5px; font-weight:700; color:var(--ink-3); border-radius:var(--r-pill); padding:4px 11px; cursor:pointer; font-family:var(--fd); }
body.v4 .v3pa .seg button.on{ background:var(--surface); color:var(--ink-1); box-shadow:0 1px 2px rgba(0,0,0,.08); }

/* ═══ KE2-1 pick: Option 1B - command palette ═════════════════ */
body.v4 .v3pa.o1b{ max-width:620px; }
body.v4 .v3pa.o1b .cp-search{ display:flex; align-items:center; gap:11px; padding:16px 20px; border-bottom:1px solid var(--rule); }
body.v4 .v3pa.o1b .cp-search svg{ width:17px; height:17px; color:var(--ink-3); flex-shrink:0; }
body.v4 .v3pa.o1b .cp-search input{ flex:1; border:none; outline:none; background:transparent; font-family:var(--fd); font-size:15px; color:var(--ink-1); }
body.v4 .v3pa.o1b .cp-search input::placeholder{ color:var(--ink-4); }
body.v4 .v3pa.o1b .cp-kbd{ font-size:10px; font-weight:700; color:var(--ink-4); border:1px solid var(--line-2); border-radius:6px; padding:3px 7px; background:var(--surface); }
body.v4 .v3pa.o1b .cp-body{ max-height:620px; overflow-y:auto; padding:10px 10px 6px; }
body.v4 .v3pa.o1b .cp-grp{ padding:8px 12px 5px; }
body.v4 .v3pa.o1b .cp-row{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  border:none; background:transparent; border-radius:11px; padding:9px 12px; cursor:pointer;
  font-family:var(--fd);
}
body.v4 .v3pa.o1b .cp-row:hover, body.v4 .v3pa.o1b .cp-row.sel{ background:var(--blue-soft); }
body.v4 .v3pa.o1b .cp-row .ci{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; font-size:13px; flex-shrink:0; }
body.v4 .v3pa.o1b .cp-row .cm{ flex:1; min-width:0; }
body.v4 .v3pa.o1b .cp-row .cm b{ display:block; font-size:13px; font-weight:650; color:var(--ink-1); letter-spacing:-.005em; }
body.v4 .v3pa.o1b .cp-row .cm span{ display:block; font-size:11px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.v4 .v3pa.o1b .cp-row .ck{ font-size:9.5px; font-weight:700; color:var(--ink-4); border:1px solid var(--line-2); border-radius:6px; padding:2px 7px; background:var(--surface); flex-shrink:0; }
body.v4 .v3pa.o1b .cp-compose{ border-top:1px solid var(--rule); padding:13px 18px; display:flex; gap:9px; align-items:center; background:var(--paper-2); }
body.v4 .v3pa.o1b .cp-foot{ display:flex; gap:16px; padding:9px 20px 12px; font-size:10.5px; color:var(--ink-4); border-top:1px solid var(--rule-soft); }
body.v4 .v3pa.o1b .cp-foot b{ font-weight:700; color:var(--ink-3); }
body.v4 .v3pa.o1b .cp-foot .cp-doctrine{ margin-left:auto; }
/* production-only: the opened-draft editor state inside the palette
   (the mockup renders the palette list state only; the editor reuses the
   shared grammar + the existing Discard / Save edits / Approve actions) */
body.v4 .v3pa.o1b .cp-draft{ padding:14px 20px 6px; }
body.v4 .v3pa.o1b .cp-draft-head{ display:flex; align-items:center; gap:9px; margin-bottom:10px; flex-wrap:wrap; }
body.v4 .v3pa.o1b .cp-draft-head .ti{ font-size:15px; font-weight:700; letter-spacing:-.012em; flex:1; min-width:200px; color:var(--ink-1); }
body.v4 .v3pa.o1b .cp-back{ border:none; background:transparent; font-size:11.5px; font-weight:700; color:var(--blue); cursor:pointer; padding:10px 12px 2px; font-family:var(--fd); text-align:left; }
body.v4 .v3pa.o1b .cp-draft-acts{ display:flex; gap:9px; align-items:center; padding:12px 20px 16px; }
body.v4 .v3pa.o1b .cp-draft-acts .spacer{ flex:1; }
body.v4 .v3pa.o1b .cp-draft-sendnote{ font-size:10.5px; color:var(--ink-4); }
body.v4 .v3pa.o1b .cp-empty{ font-size:12px; color:var(--ink-4); padding:6px 12px 10px; }

/* ═══ AI2-2a pick: Option 2C - timeline narrative ═════════════ */
body.v4 .v3pa.o2c{ max-width:640px; }
body.v4 .v3pa.o2c .tl-att{ display:flex; gap:8px; flex-wrap:wrap; padding:16px 24px 4px; }
body.v4 .v3pa.o2c .tl-att-note{ font-size:10.5px; color:var(--ink-4); padding:6px 24px 2px; }
body.v4 .v3pa.o2c .tl-body{ padding:14px 24px 24px; max-height:480px; overflow-y:auto; }
body.v4 .v3pa.o2c .tl{ position:relative; margin-left:13px; padding-left:24px; border-left:2px solid var(--rule); }
body.v4 .v3pa.o2c .tl-node{ position:relative; padding-bottom:20px; }
body.v4 .v3pa.o2c .tl-node:last-child{ padding-bottom:0; }
body.v4 .v3pa.o2c .tl-node .nd{
  position:absolute; left:-33px; top:0; width:16px; height:16px; border-radius:50%;
  border:3px solid var(--paper-3); box-shadow:0 0 0 1px var(--rule);
}
body.v4 .v3pa.o2c .tl-node .nh{ display:flex; align-items:baseline; gap:9px; margin-bottom:7px; }
body.v4 .v3pa.o2c .tl-node .nh .lbl{ font-size:10.5px; }
body.v4 .v3pa.o2c .tl-node .nh .tm{ font-size:10px; color:var(--ink-4); font-variant-numeric:tabular-nums; font-weight:600; }
body.v4 .v3pa.o2c .tl-card{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px 15px; box-shadow:var(--sh); }
body.v4 .v3pa.o2c .tl-card p{ margin:0; font-size:12.5px; color:var(--ink-2); line-height:1.58; }
body.v4 .v3pa.o2c .tl-card p + p{ margin-top:7px; }
body.v4 .v3pa.o2c .tl-card ol{ margin:0; padding-left:18px; }
body.v4 .v3pa.o2c .tl-card ol li{ font-size:12.5px; color:var(--ink-2); line-height:1.6; padding:2px 0; }
body.v4 .v3pa.o2c .rec-line{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid var(--rule-soft); }
body.v4 .v3pa.o2c .rec-line:last-child{ border-bottom:none; }
body.v4 .v3pa.o2c .rec-line .rt{ font-size:12.5px; font-weight:600; color:var(--ink-1); line-height:1.4; }
body.v4 .v3pa.o2c .rec-line .rt .vlink{ font-size:11px; color:var(--cherry); font-weight:600; cursor:pointer; margin-left:6px; white-space:nowrap; }
body.v4 .v3pa.o2c .q-line{ display:flex; gap:10px; align-items:center; padding:7px 0; }
body.v4 .v3pa.o2c .q-line p{ margin:0; font-size:12.5px; color:var(--ink-2); line-height:1.5; flex:1; }
/* production-only: honest-fallback line inside a timeline card (same
   values as the existing .w8-missing rule, scoped for the new chrome) */
body.v4 .v3pa .w8-missing{ font-size:12.5px; color:var(--ink-4); font-style:italic; margin:0; }

/* ═══ AI2-3 pick: Option 3B - two-column decision card ════════ */
body.v4 .v3pa.o3b{ max-width:860px; display:grid; grid-template-columns:minmax(0,1fr) 270px; }
body.v4 .v3pa.o3b .db-main{ padding:0 0 8px; border-right:1px solid var(--rule); display:flex; flex-direction:column; }
body.v4 .v3pa.o3b .db-main .gm-head{ border-bottom:none; padding-bottom:8px; }
body.v4 .v3pa.o3b .db-scroll{ padding:6px 24px 18px; overflow-y:auto; }
body.v4 .v3pa.o3b .why{ font-size:13px; color:var(--ink-2); line-height:1.62; margin:0 0 18px; }
body.v4 .v3pa.o3b .math{ display:flex; justify-content:space-between; align-items:center; background:var(--rule-soft); border-radius:10px; padding:9px 14px; font-size:11.5px; color:var(--ink-3); margin-top:16px; font-variant-numeric:tabular-nums; }
body.v4 .v3pa.o3b .math b{ color:var(--ink-1); font-size:12.5px; }
body.v4 .v3pa.o3b .db-rail{ background:var(--paper-2); padding:20px 18px; display:flex; flex-direction:column; gap:16px; }
body.v4 .v3pa.o3b .facts .f{ display:flex; justify-content:space-between; align-items:center; padding:7px 0; border-bottom:1px solid var(--rule-soft); }
body.v4 .v3pa.o3b .facts .f:last-child{ border-bottom:none; }
body.v4 .v3pa.o3b .acts{ display:flex; flex-direction:column; gap:8px; }
body.v4 .v3pa.o3b .acts .btn-primary, body.v4 .v3pa.o3b .acts .btn-secondary, body.v4 .v3pa.o3b .acts .btn-ghost{ width:100%; padding:10px 16px; }
body.v4 .v3pa.o3b .notes{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px 13px; }
body.v4 .v3pa.o3b .notes .lbl{ display:block; margin-bottom:7px; }
body.v4 .v3pa.o3b .notes .row{ display:flex; gap:7px; margin-top:8px; }
body.v4 .v3pa.o3b .rail-board{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px 13px; }
body.v4 .v3pa.o3b .rail-board .b-h{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:9px; }
body.v4 .v3pa.o3b .b-row{ display:flex; align-items:center; gap:8px; padding:5px 0; }
body.v4 .v3pa.o3b .b-row .av{ width:22px; height:22px; border-radius:50%; font-size:8.5px; font-weight:800; display:grid; place-items:center; background:var(--c-sky); color:var(--on-sky); flex-shrink:0; }
body.v4 .v3pa.o3b .b-row .nm{ font-size:11.5px; font-weight:650; color:var(--ink-1); width:64px; flex-shrink:0; }
body.v4 .v3pa.o3b .b-row .bar{ flex:1; height:7px; border-radius:4px; background:var(--rule-soft); overflow:hidden; }
body.v4 .v3pa.o3b .b-row .bar i{ display:block; height:100%; background:var(--blue); border-radius:4px; }
body.v4 .v3pa.o3b .b-row .ct{ font-size:11px; font-weight:800; color:var(--ink-1); font-variant-numeric:tabular-nums; width:18px; text-align:right; }
/* production-only bits the brief keeps inside the new chrome: the
   implementation-path block (values copied from the existing
   .rx-detail rules) + honest board empty state + completed note */
body.v4 .v3pa .rx-impl-steps{ margin:0; padding:0 0 0 2px; list-style:none; counter-reset:w8i; }
body.v4 .v3pa .rx-impl-steps li{
  font-size:13px; color:var(--ink-2); line-height:1.5;
  padding:6px 0 6px 30px; position:relative;
  border-bottom:1px solid var(--rule-soft); counter-increment:w8i;
}
body.v4 .v3pa .rx-impl-steps li:last-child{ border-bottom:none; }
body.v4 .v3pa .rx-impl-steps li::before{
  content:counter(w8i); position:absolute; left:0; top:6px;
  width:20px; height:20px; border-radius:6px;
  background:var(--c-sky); color:var(--on-sky);
  font-size:10.5px; font-weight:700; display:grid; place-items:center;
}
body.v4 .v3pa .rx-impl-line{ font-size:13px; color:var(--ink-2); line-height:1.55; margin:0 0 6px; }
body.v4 .v3pa .rx-impl-fallback{ font-size:12.5px; color:var(--ink-4); font-style:italic; margin:0; }
body.v4 .v3pa .b-empty{ font-size:11px; color:var(--ink-4); padding:3px 0 1px; line-height:1.5; }
body.v4 .v3pa .score-big.lo{ background:var(--rule); color:var(--ink-3); }
body.v4 .v3pa .rx-action-line{ font-size:11px; color:var(--ink-2); line-height:1.5; background:var(--cherry-bg); border-radius:10px; padding:8px 11px; }
body.v4 .v3pa .rx-action-line b{ color:var(--ink-1); }
body.v4 .v3pa .rx-note-done{ margin:0; font-size:12px; color:var(--ink-2); line-height:1.55; white-space:pre-wrap; }
body.v4 .v3pa .rx-note-who{ display:block; font-size:10.5px; color:var(--ink-4); margin-top:6px; }
body.v4 .v3pa .mm-sec{ margin-bottom:20px; }
body.v4 .v3pa .mm-sec:last-child{ margin-bottom:0; }
body.v4 .v3pa .ep-scoredby{ font-size:10.5px; color:var(--ink-4); margin-top:8px; }

/* the mockup's own responsive rule (its 900px media block, o3b part) */
@media (max-width:900px){
  body.v4 .v3pa.o3b{ grid-template-columns:1fr; }
  body.v4 .v3pa.o3b .db-main{ border-right:none; border-bottom:1px solid var(--rule); }
}

/* ── MOBILE: v3-picks-a ── */
@media (max-width:768px){
  /* palette becomes a bottom sheet (mobile-designer doctrine: modals →
     bottom sheets, thumb-zone composer, safe-area padding) */
  body.v4 .kc-drafts-overlay{ align-items:flex-end; padding:0; }
  body.v4 .v3pa.o1b{ max-width:100%; border-radius:18px 18px 0 0; max-height:92vh; display:flex; flex-direction:column; padding-bottom:env(safe-area-inset-bottom); }
  body.v4 .v3pa.o1b .cp-body{ flex:1; max-height:none; }
  body.v4 .v3pa.o1b .cp-search input{ font-size:16px; }
  body.v4 .v3pa.o1b .cp-row{ min-height:44px; -webkit-tap-highlight-color:transparent; }
  body.v4 .v3pa.o1b .cp-row:active{ background:var(--blue-soft); }
  body.v4 .v3pa.o1b .cp-kbd{ display:none; }
  body.v4 .v3pa.o1b .cp-foot span:not(.cp-doctrine){ display:none; }
  body.v4 .v3pa.o1b .cp-foot .cp-doctrine{ margin-left:0; }

  /* shared touch + type rules for all three popups */
  body.v4 .v3pa .input, body.v4 .v3pa .ta{ font-size:16px; }
  body.v4 .v3pa .gm-close{ width:36px; height:36px; }
  body.v4 .v3pa .btn-primary, body.v4 .v3pa .btn-secondary, body.v4 .v3pa .btn-ghost{ min-height:44px; }
  body.v4 .v3pa .seg button{ min-height:32px; }

  /* timeline + decision card inside the existing bottom sheets */
  body.v4 .v3pa.o2c .tl-body{ max-height:none; }
  body.v4 .v3pa.o3b .db-scroll{ max-height:none; overflow:visible; }
}

/* ── V3-PICKS-B ── */
/* =============================================================
   DESIGN BATCH 2B - Peter's approved picks (builder B).
   Source mockup: _DESIGN_BATCH2_B.html. CSS lifted VERBATIM and
   mapped back from the mockup's inlined token values to live
   tokens (the mockup inlined css/tokens.css + the v5 glass block):
     --g-* → same live --g-* names (all exist) ·
     --g-cherry-2 → var(--cherry-2) ·
     #1d1d1f/#161618 ink band → var(--hero-1)/var(--hero-2) ·
     #fff on dark → var(--on-accent), #fff surfaces → var(--surface) ·
     mockup-only accent hexes → the same colours as rgba() so the
     css-guard hex baseline cannot rise (#ffd47a → rgba(255,212,122,1),
     #ff8aa0 → rgba(255,138,160,1), #ff5675/#8e8bff/#3897ff/#5fe0a0
     live in JS for the score stack, same rgba treatment).
   Structural additions beyond the mockup are commented inline and
   limited to: scroll containment, button-element resets, focus
   rings, disabled states, and the mobile blocks.

   1. MO2-1 Option C "The Sheet"        → .aiceo-modal.m3
   2. IN2-1 Option C "The Briefing Memo" → .dossier.i3
   3. GU2-2 Option C "The Split Band"   → .guest-grid .gc
   ============================================================= */

/* ════ 1 · MONEY - EDIT BUDGET SHEET (.m3) ════ */
/* mockup .modal shell + .m3{max-width:820px} */
body.v4 .aiceo-modal.m3{
  background:var(--g-paper-3);backdrop-filter:var(--g-blur-2);-webkit-backdrop-filter:var(--g-blur-2);
  border:1px solid var(--g-border);border-radius:var(--g-r-xl);box-shadow:var(--g-sh-modal);
  width:100%;overflow:hidden;display:flex;flex-direction:column;max-width:820px;
}
body.v4 .m3 .modal-head{display:flex;align-items:center;gap:14px;padding:18px 22px 14px;border-bottom:1px solid var(--g-rule);flex-shrink:0}
body.v4 .m3 .modal-title{font-size:16px;font-weight:700;letter-spacing:-0.015em}
body.v4 .m3 .modal-sub{font-size:12px;color:var(--g-ink-3);margin-top:2px}
/* structural: the sheet body scrolls between the pinned head and foot */
body.v4 .m3 .m3-scroll{overflow:auto;flex:1 1 auto;min-height:0}
body.v4 .m3 table{width:100%;border-collapse:collapse}
body.v4 .m3 th{font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--g-ink-4);
  text-align:left;padding:10px 14px;border-bottom:1px solid var(--g-rule);background:rgba(255,255,255,.4)}
body.v4 .m3 th.num,body.v4 .m3 td.num{text-align:right}
body.v4 .m3 td{padding:7px 14px;border-bottom:1px solid var(--g-rule-soft);font-size:13px;vertical-align:middle}
body.v4 .m3 td .cellin{width:100%;border:none;background:transparent;font-family:var(--g-fd);font-size:13px;
  font-weight:600;color:var(--g-ink-1);outline:none;border-bottom:1.5px dashed transparent;padding:3px 0}
body.v4 .m3 td .cellin:focus{border-bottom-color:var(--g-blue)}
body.v4 .m3 td .cellin.num{text-align:right;font-variant-numeric:tabular-nums}
/* structural: category column is read-only until budget_lines grows the column */
body.v4 .m3 td .cellin:disabled{color:var(--g-ink-4);cursor:not-allowed}
body.v4 .m3 td .auto{color:var(--g-ink-4);font-weight:500;font-variant-numeric:tabular-nums}
/* structural: derived monthly is click-to-override when the schema supports it */
body.v4 .m3 td .auto[data-auto]{cursor:pointer}
body.v4 .m3 .kindpill{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 9px;border-radius:var(--r-pill)}
body.v4 .m3 .kindpill.rev{background:var(--g-green-bg);color:var(--g-green)}
body.v4 .m3 .kindpill.cost{background:var(--g-cherry-bg);color:var(--g-cherry)}
/* structural: new ghost rows let the kind pill toggle */
body.v4 .m3 .kindpill[data-kind-toggle]{cursor:pointer}
body.v4 .m3 .rm{width:22px;height:22px;border:none;border-radius:50%;background:transparent;color:var(--g-ink-4);cursor:pointer}
body.v4 .m3 .rm:hover{background:var(--g-cherry-bg);color:var(--g-cherry)}
body.v4 .m3 .addrow td{padding:10px 14px;border-bottom:none}
body.v4 .m3 .addrow button{font-family:var(--g-fd);font-size:12px;font-weight:600;color:var(--g-blue);
  background:none;border:none;cursor:pointer}
body.v4 .m3 tfoot td{background:rgba(0,0,0,.035);font-weight:700;font-variant-numeric:tabular-nums;border-bottom:none;font-size:13px}
body.v4 .m3 .footnote{padding:10px 22px 0;font-size:11px;color:var(--g-ink-4)}

/* ════ shared modal atoms (mockup .modal-head family + .xclose) ════ */
body.v4 .m3 .modal-foot,
body.v4 .dossier.i3 .modal-foot{display:flex;align-items:center;gap:10px;padding:14px 22px;border-top:1px solid var(--g-rule);background:rgba(255,255,255,.35);flex-shrink:0}
body.v4 .m3 .modal-foot .spacer,
body.v4 .dossier.i3 .modal-foot .spacer{flex:1}
body.v4 .m3 .xclose,
body.v4 .dossier.i3 .xclose{width:30px;height:30px;border-radius:50%;border:none;background:rgba(0,0,0,.05);
  color:var(--g-ink-3);font-size:16px;cursor:pointer;display:grid;place-items:center;flex-shrink:0}
body.v4 .m3 .xclose:hover,
body.v4 .dossier.i3 .xclose:hover{background:rgba(0,0,0,.09)}

/* ════ 2 · INTEL - BRIEFING MEMO (.dossier.i3) ════ */
/* shell: mockup .modal + .i3{max-width:640px}; the .dossier base class
   keeps the existing overlay/mobile-sheet behaviour */
body.v4 .dossier.i3{
  max-width:640px;
  background:var(--g-paper-3);backdrop-filter:var(--g-blur-2);-webkit-backdrop-filter:var(--g-blur-2);
  border:1px solid var(--g-border);border-radius:var(--g-r-xl);box-shadow:var(--g-sh-modal);
}
/* masthead band */
body.v4 .dossier.i3 .band{background:linear-gradient(180deg,var(--hero-1) 0%,var(--hero-2) 100%);color:var(--on-accent);padding:20px 22px;position:relative;overflow:hidden;flex-shrink:0}
body.v4 .dossier.i3 .band::before{content:'';position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(ellipse 420px 220px at 10% -10%, rgba(94,92,230,.32), transparent),
  radial-gradient(ellipse 360px 200px at 96% 120%, rgba(0,113,227,.24), transparent)}
body.v4 .dossier.i3 .band>*{position:relative}
body.v4 .dossier.i3 .band .eyeb{color:var(--hero-blue);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
body.v4 .dossier.i3 .band .nm{font-size:24px;font-weight:750;letter-spacing:-0.02em;margin-top:4px}
body.v4 .dossier.i3 .band .rl{font-size:12.5px;color:rgba(255,255,255,.65);margin-top:2px}
body.v4 .dossier.i3 .band .chiprow{display:flex;gap:7px;margin-top:11px;flex-wrap:wrap}
/* warning chips (mockup .wchip atom + the band's dark variants) */
body.v4 .dossier.i3 .wchip{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;padding:4px 11px;border-radius:var(--r-pill)}
body.v4 .dossier.i3 .band .wchip.prev{background:rgba(255,200,90,.16);color:rgba(255,212,122,1);border:1px solid rgba(255,212,122,.3)}
body.v4 .dossier.i3 .band .wchip.btc{background:rgba(255,82,109,.16);color:rgba(255,138,160,1);border:1px solid rgba(255,138,160,.3)}
/* stacked score bar + key */
body.v4 .dossier.i3 .scorebar{margin-top:15px}
body.v4 .dossier.i3 .scorebar .top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
body.v4 .dossier.i3 .scorebar .top .lab{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5)}
body.v4 .dossier.i3 .scorebar .top .num{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}
body.v4 .dossier.i3 .stack{display:flex;height:8px;border-radius:4px;overflow:hidden;background:rgba(255,255,255,.12)}
body.v4 .dossier.i3 .stack i{display:block;height:100%}
body.v4 .dossier.i3 .stackkey{display:flex;gap:12px;margin-top:7px;flex-wrap:wrap}
body.v4 .dossier.i3 .stackkey span{font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.55);display:inline-flex;align-items:center;gap:5px}
body.v4 .dossier.i3 .stackkey span::before{content:'';width:7px;height:7px;border-radius:2px;background:var(--kc)}
/* ruled memo body (structural: it is the scroll region between the
   pinned band and footer - the mockup is a static render) */
body.v4 .dossier.i3 .memo{padding:16px 22px 6px;display:flex;flex-direction:column;gap:15px;overflow-y:auto;flex:1 1 auto;min-height:0}
body.v4 .dossier.i3 .msec .mh{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1.5px solid var(--g-ink-1);padding-bottom:5px;margin-bottom:8px}
body.v4 .dossier.i3 .msec .mh .t{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
body.v4 .dossier.i3 .msec .mh .x{font-size:10px;font-weight:600;color:var(--g-ink-4)}
body.v4 .dossier.i3 .msec p{font-size:12.5px;line-height:1.6;color:var(--g-ink-2)}
body.v4 .dossier.i3 .msec p b{color:var(--g-ink-1)}
/* strict date-first history table */
body.v4 .dossier.i3 table.h{width:100%;border-collapse:collapse}
body.v4 .dossier.i3 table.h td{font-size:12px;padding:6px 2px;border-bottom:1px solid var(--g-rule-soft);color:var(--g-ink-2);vertical-align:top}
body.v4 .dossier.i3 table.h td b{color:var(--g-ink-1)}
body.v4 .dossier.i3 table.h td.d{width:84px;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--g-ink-4);font-variant-numeric:tabular-nums;white-space:nowrap}
body.v4 .dossier.i3 table.h td.k{width:74px;text-align:right;font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--g-ink-4)}
/* reach line */
body.v4 .dossier.i3 .reachline{display:flex;gap:18px;flex-wrap:wrap}
body.v4 .dossier.i3 .reachline .rc .rv{font-size:16px;font-weight:750;font-variant-numeric:tabular-nums}
body.v4 .dossier.i3 .reachline .rc .rk{font-size:9.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--g-ink-4)}
/* topic pills (mockup .topic atom) */
body.v4 .dossier.i3 .topic{font-size:11px;font-weight:650;padding:4px 11px;border-radius:var(--r-pill)}
body.v4 .dossier.i3 .topic.t-lilac{background:var(--g-lilac-bg);color:var(--g-lilac)}
body.v4 .dossier.i3 .topic.t-sky{background:var(--g-blue-soft);color:var(--g-blue-2)}
body.v4 .dossier.i3 .topic.t-mint{background:var(--g-green-bg);color:var(--g-green)}
body.v4 .dossier.i3 .topic.t-butter{background:var(--g-butter-bg);color:var(--g-butter)}
/* note box */
body.v4 .dossier.i3 .notebox{width:100%;font-family:var(--g-fd);font-size:12.5px;line-height:1.5;color:var(--g-ink-1);
  background:var(--surface);border:1px solid var(--g-rule);border-radius:var(--g-r-sm);padding:10px 12px;
  resize:vertical;outline:none;min-height:64px}
body.v4 .dossier.i3 .notebox:focus{border-color:var(--g-blue);box-shadow:0 0 0 3px var(--g-blue-soft)}
body.v4 .dossier.i3 .notefoot{display:flex;align-items:center;justify-content:space-between;margin-top:7px}
body.v4 .dossier.i3 .notefoot .saved{font-size:11px;color:var(--g-ink-4)}
/* mockup button atoms, scoped to the two new modals (cherry-filled
   primary per the mockup - the v4 house .btn-primary renders blue
   inside modals, which would break fidelity) */
body.v4 .m3 .glassbtn,
body.v4 .dossier.i3 .glassbtn{font-family:var(--g-fd);font-size:13px;font-weight:600;border-radius:var(--r-pill);
  padding:9px 20px;cursor:pointer;border:1px solid transparent;display:inline-flex;
  align-items:center;gap:7px;letter-spacing:-0.005em;transition:all .18s var(--g-ease)}
body.v4 .m3 .glassbtn.primary,
body.v4 .dossier.i3 .glassbtn.primary{background:var(--g-cherry);color:var(--on-accent);box-shadow:0 2px 10px rgba(184,0,43,.35)}
body.v4 .m3 .glassbtn.primary:hover,
body.v4 .dossier.i3 .glassbtn.primary:hover{background:var(--cherry-2);transform:translateY(-1px)}
body.v4 .m3 .glassbtn.secondary,
body.v4 .dossier.i3 .glassbtn.secondary{background:var(--g-paper-3);color:var(--g-ink-1);border-color:var(--g-rule)}
body.v4 .m3 .glassbtn.secondary:hover,
body.v4 .dossier.i3 .glassbtn.secondary:hover{background:var(--surface)}
body.v4 .m3 .glassbtn.quiet,
body.v4 .dossier.i3 .glassbtn.quiet{background:transparent;color:var(--g-ink-4)}
body.v4 .m3 .glassbtn.quiet:hover,
body.v4 .dossier.i3 .glassbtn.quiet:hover{color:var(--g-cherry);background:rgba(184,0,43,.05)}
body.v4 .m3 .glassbtn.sm,
body.v4 .dossier.i3 .glassbtn.sm{font-size:12px;padding:6px 14px}
/* structural: the generate-questions row inside the What to ask section */
body.v4 .dossier.i3 .genq{display:flex;align-items:center;justify-content:space-between;gap:10px}

/* ════ 3 · GUESTS - SPLIT BAND CARD (.gc) ════ */
/* structural: the card is a <button> for the existing click/keyboard
   behaviour - reset, then the mockup .gc rules verbatim */
body.v4 .guest-grid button.gc{all:unset;box-sizing:border-box;display:block;width:100%}
body.v4 .guest-grid .gc{background:var(--g-paper-3);backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur);
  border:1px solid var(--g-border);border-radius:var(--g-r-lg);box-shadow:var(--g-sh);overflow:hidden;
  cursor:pointer;transition:all .18s var(--g-ease)}
body.v4 .guest-grid .gc:hover{transform:translateY(-2px);box-shadow:var(--g-sh-2)}
body.v4 .guest-grid .gc:focus-visible{outline:2px solid var(--g-blue);outline-offset:2px}
body.v4 .guest-grid .gc .top{display:flex;align-items:center;gap:12px;padding:14px 18px 12px}
body.v4 .guest-grid .gc .nm{font-size:15px;font-weight:750;letter-spacing:-0.015em}
body.v4 .guest-grid .gc .rl{font-size:11px;color:var(--g-ink-3)}
body.v4 .guest-grid .gc .avg{margin-left:auto;text-align:right}
body.v4 .guest-grid .gc .avg .v{font-size:21px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-0.025em;color:var(--g-blue-2)}
body.v4 .guest-grid .gc .avg .k{font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--g-ink-4)}
body.v4 .guest-grid .gc .band{display:flex;align-items:center;gap:10px;padding:10px 18px;background:linear-gradient(180deg,var(--hero-1),var(--hero-2));color:var(--on-accent)}
body.v4 .guest-grid .gc .band .tro{width:22px;height:22px;border-radius:7px;background:rgba(255,212,122,.18);color:rgba(255,212,122,1);
  display:grid;place-items:center;font-size:11px;flex:0 0 auto}
body.v4 .guest-grid .gc .band .t{flex:1;min-width:0;font-size:12px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.v4 .guest-grid .gc .band .t small{display:block;font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.5)}
body.v4 .guest-grid .gc .band .dl{font-size:14px;font-weight:750;font-variant-numeric:tabular-nums;white-space:nowrap}
body.v4 .guest-grid .gc .foot{display:flex;gap:0;border-top:1px solid var(--g-rule)}
body.v4 .guest-grid .gc .foot .fcell{flex:1;padding:9px 18px;display:flex;flex-direction:column;gap:1px}
body.v4 .guest-grid .gc .foot .fcell + .fcell{border-left:1px solid var(--g-rule)}
body.v4 .guest-grid .gc .foot .fk{font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--g-ink-4)}
body.v4 .guest-grid .gc .foot .fv{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}

/* ── MOBILE: budget (V3-PICKS-B sheet) ── */
@media (max-width: 767.98px) {
  body.v4 .m3 .m3-scroll{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  body.v4 .m3 table{min-width:600px}
  body.v4 .m3 th:first-child,
  body.v4 .m3 td:first-child{position:sticky;left:0;z-index:2;background:var(--surface)}
  body.v4 .m3 td .cellin{font-size:16px}   /* stop iOS zoom */
  body.v4 .m3 .rm{min-width:44px;min-height:44px}
  body.v4 .m3 .addrow button{min-height:44px}
  body.v4 .m3 .xclose{min-width:44px;min-height:44px}
  body.v4 .m3 .modal-foot{flex-wrap:wrap;padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px))}
  body.v4 .m3 .modal-foot .glassbtn{min-height:44px}
}

/* ── MOBILE: intel-dossier (V3-PICKS-B memo) ── */
/* The .dossier base mobile block already gives the bottom-sheet shell
   (radius, drag handle, 90dvh). These rules compress the memo inside it. */
@media (max-width: 767.98px) {
  body.v4 .dossier.i3{max-width:100%}
  body.v4 .dossier.i3 .band{padding:16px 18px}
  body.v4 .dossier.i3 .band .nm{font-size:20px}
  body.v4 .dossier.i3 .memo{padding:14px 18px 6px}
  body.v4 .dossier.i3 .notebox{font-size:16px}   /* stop iOS zoom */
  body.v4 .dossier.i3 .modal-foot{flex-wrap:wrap;padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px))}
  body.v4 .dossier.i3 .glassbtn{min-height:44px}
  body.v4 .dossier.i3 .glassbtn.primary{flex:1 1 100%;justify-content:center}
  body.v4 .dossier.i3 .xclose{min-width:44px;min-height:44px}
  body.v4 .dossier.i3 table.h td.d{width:74px}
}

/* ── MOBILE: guests (V3-PICKS-B split band) ── */
@media (max-width: 767.98px) {
  body.v4 .guest-grid > .gc{grid-column:1 / -1}
  body.v4 .guest-grid .gc .top{min-height:44px}
  body.v4 .guest-grid .gc .foot .fcell{min-height:44px;justify-content:center}
}

/* ── V3-PICKS-B (fidelity fixes after render-verify) ── */
/* The mockup proves the split-band card at ~420px; the live grid's
   minmax(280px,1fr) !important squeezed cards to ~300px and wrapped the
   "Average Per Show" label. Re-template (the !important matches the rule
   it overrides; net !important count stays at the css-guard baseline). */
body.v4 .guest-grid{grid-template-columns:repeat(auto-fill,minmax(340px,1fr)) !important}
/* the right-column label is a fixed unit in the design - never wraps */
body.v4 .guest-grid .gc .avg .k{white-space:nowrap}

/* ════════════════════════════════════════════════════════════════════════
   ── V3-N1 ──  Batch-2 wave N1 (SH2-1/2/3/4 · TD2-1/2/3 · KE2-2/3/5).
   SH2-1: the rail action cluster sits ABOVE the profile clicker (order
   swapped in index.html; the hairline divider moves under the profile).
   SH2-2/SH2-4: the ONE right-anchored flyout primitive (.flyx - built by
   js/lib/flyout.js) used by the notifications bell, the what's-new popup
   and the adopted chat roster card; caret points back at the rail icon.
   TD2-2/3: the Today page personal panels (calendar + tasks).
   KE2-2: dept-tinted feint circles in Keith's chat-with panel.
   KE2-3: the "Chat opened with {Name}" thread divider.
   KE2-5: Y-axis gridlines + right-aligned tick labels on Keith's charts.
   Tokens/rgba only - no new hex, no new !important. Appended last so it
   wins ties in the cascade.
   ════════════════════════════════════════════════════════════════════════ */

/* ── SH2-1 · icons above the profile panel ─────────────────────────────── */
body.v4 .sidebar.sb > .sh-railactions{
  margin:2px 2px 8px; padding:0; border-bottom:none;
}
body.v4 .sidebar.sb > .sh-userwrap{
  margin:0 0 10px; padding:0 0 12px;
  border-bottom:1px solid var(--g-rule);
}

/* ── SH2-2/SH2-4 · the shared right-anchored flyout (.flyx) ────────────── */
body.v4 .flyx{
  position:fixed; z-index:10080;
  width:min(392px, calc(100vw - 24px));
  background:var(--surface); border:1px solid var(--g-border);
  border-radius:16px;
  box-shadow:var(--el-e4), var(--el-rim);
  animation:v3-menu-drop var(--el-t2) var(--el-spring) both;
}
body.v4 .flyx-body{
  max-height:min(560px, 72vh); overflow:auto; border-radius:inherit;
}
/* the caret - a rotated square sharing the panel's surface + border, its
   left-pointing corner aimed back at the anchor icon */
body.v4 .flyx > .flyx-caret,
body.v4 .flyx-adopted > .flyx-caret{
  position:absolute; left:-7px; width:14px; height:14px;
  background:var(--surface);
  border-left:1px solid var(--g-border); border-bottom:1px solid var(--g-border);
  transform:rotate(45deg); border-radius:2px; z-index:1; pointer-events:none;
}
body.v4 .flyx-sheet > .flyx-caret{ display:none; }
body.v4.dark .flyx{ border-color:rgba(255,255,255,.12); box-shadow:var(--el-e4), var(--el-rim-dark); }
body.v4.dark .flyx > .flyx-caret{ background:var(--surface); border-color:rgba(255,255,255,.12); }
@media (prefers-reduced-motion: reduce){
  body.v4 .flyx{ animation:none; }
}

/* SH2-2 - the notifications feed inside the flyout. The .notif-head /
   .notif-list / .notif-item row grammar is reused verbatim from the old
   in-rail dropdown (those rules are panel-independent); only the shell
   (.notif-panel positioning) is superseded by .flyx. */
body.v4 .notif-fly .notif-head{
  position:sticky; top:0; z-index:2; background:var(--surface);
  border-radius:16px 16px 0 0;
}
body.v4.dark .notif-fly .notif-head{ background:var(--surface); }

/* SH2-4 - what's-new inside the flyout: the ver-* grammar is reused; the
   flyout shell replaces the centred modal, so paddings tighten and the
   pane scrolls inside .flyx-body's own max-height. */
body.v4 .ver-fly .ver-head{ padding:16px 18px 14px; }
body.v4 .ver-fly .ver-title{ font-size:18px; }
body.v4 .ver-fly .ver-pane{ max-height:none; overflow:visible; padding:14px 18px 16px; }
body.v4 .ver-fly .ver-tour-strip{ padding:12px 18px; }

/* SH2-4 - the ADOPTED chat roster card (chat-panel.js markup untouched):
   the overlay backdrop clears (click-away behaviour stays - the host still
   catches outside clicks) and the card takes the flyout position + caret. */
body.v4 .cp-roster-overlay.flyx-host-clear{
  background:transparent;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  align-items:flex-start; justify-content:flex-start; padding:0;
}
body.v4 .cp-roster-card.flyx-adopted{
  overflow:visible;
  animation:v3-menu-drop var(--el-t2) var(--el-spring) both;
}
body.v4 .cp-roster-card.flyx-adopted .cp-roster-list{ border-radius:0 0 18px 18px; }

/* ── TD2-2/TD2-3 · Today personal panels (calendar + tasks) ────────────── */
body.v4 .today-personal{
  display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px;
}
body.v4 .today-personal .tp-skel span{ height:38px; }
body.v4 .tp-list{ display:flex; flex-direction:column; }
body.v4 .tp-row{
  display:flex; align-items:flex-start; gap:10px;
  padding:9px 2px; border-bottom:1px solid var(--g-rule);
  text-decoration:none; color:inherit; border-radius:8px;
  -webkit-tap-highlight-color:transparent;
}
body.v4 .tp-row:last-child{ border-bottom:none; }
body.v4 a.tp-row:hover{ background:var(--paper-2); }
body.v4 a.tp-row:active{ background:var(--paper-3); }
body.v4 .tp-time{
  flex:0 0 76px; font-size:11.5px; font-weight:700; color:var(--g-ink-3);
  font-variant-numeric:tabular-nums; padding-top:1px; white-space:nowrap;
}
body.v4 .tp-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
body.v4 .tp-t{
  font-size:13px; font-weight:600; color:var(--g-ink-1); letter-spacing:-.006em;
  overflow:hidden; text-overflow:ellipsis;
}
body.v4 .tp-m{ font-size:11.5px; color:var(--g-ink-3); }
body.v4 .tp-kind{
  flex:none; align-self:flex-start;
  font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  padding:3px 8px; border-radius:var(--r-pill);
}
body.v4 .tp-kind-overdue{ background:var(--cherry-bg); color:var(--cherry); }
body.v4 .tp-note{
  margin-top:10px; font-size:11.5px; color:var(--g-ink-4); line-height:1.5;
}
body.v4 .tp-foot{ margin-top:10px; display:flex; justify-content:flex-end; }
body.v4 .tp-sw-open{
  background:none; border:none; cursor:pointer; font:inherit;
  font-size:12px; font-weight:600; color:var(--g-blue); padding:4px 2px;
}
body.v4 .tp-sw-open:hover{ text-decoration:underline; }

/* ── KE2-2 · dept-tinted feint circles in the chat-with panel ──────────── */
body.v4 .kcp-av.kcp-av-dept{
  border-radius:50%;
  background:var(--kcpd-bg, var(--paper-3));
  color:var(--kcpd-fg, var(--g-ink-3));
  box-shadow:inset 0 0 0 1px var(--g-rule);
}
body.v4 .kcp-person.on .kcp-av.kcp-av-dept{
  background:rgba(255,255,255,.20); color:var(--on-accent); box-shadow:none;
}

/* ── KE2-3 · "Chat opened with {Name}" thread divider ──────────────────── */
body.v4 .kc-switch{
  display:flex; align-items:center; gap:10px; margin:14px 6px;
}
body.v4 .kc-switch-line{ flex:1; height:1px; background:var(--g-rule); }
body.v4 .kc-switch-lbl{
  flex:none; font-size:11px; font-weight:600; color:var(--g-ink-4);
  letter-spacing:.02em; white-space:nowrap;
}

/* ── KE2-5 · Y axis on Keith's bar + line charts ───────────────────────── */
/* bar chart: the grid band aligns with the bar TRACK inside .kc-chart-bars
   (140px column minus the ~16px value label above and ~16px month label
   below each bar). Labels sit in a left gutter, right-aligned. */
body.v4 .kc-chart-plot{ position:relative; padding-left:44px; }
body.v4 .kc-chart-grid{
  position:absolute; left:44px; right:0; top:16px; bottom:16px;
  pointer-events:none;
}
body.v4 .kc-chart-gl{
  position:absolute; left:0; right:0; height:1px; background:var(--rule);
}
body.v4 .kc-chart-gl span{
  position:absolute; left:-44px; width:36px; text-align:right;
  transform:translateY(-50%);
  font-size:9.5px; font-weight:700; color:var(--ink-4);
  font-variant-numeric:tabular-nums; line-height:1;
}
/* line chart: hairline gridlines + right-aligned tick text inside the SVG */
.kc-lc-grid{ stroke:var(--rule); stroke-width:1; vector-effect:non-scaling-stroke; }
.kc-lc-yl{
  font-size:9.5px; fill:var(--ink-4); font-family:inherit;
  font-variant-numeric:tabular-nums; font-weight:700;
}

/* ── MOBILE: V3-N1 ──
   Today personal panels stack to one column with 44px rows; flyouts fall
   back to the sheet placement js/lib/flyout.js computes below 768px (the
   rail and its anchors are hidden there - the sheet centres instead).
   Keith chart gutters stay inside the bubble; the bar strip already
   scrolls horizontally from the earlier Keith mobile block. */
@media (max-width: 767.98px){
  body.v4 .today-personal{ grid-template-columns:1fr; gap:10px; }
  body.v4 .tp-row{ min-height:44px; align-items:center; }
  body.v4 .tp-time{ flex-basis:64px; }
  body.v4 .tp-sw-open{ min-height:44px; padding:8px 4px; }
  body.v4 .flyx.flyx-sheet{ width:auto; right:8px; }
  body.v4 .flyx-body{ max-height:70vh; }
  body.v4 .cp-roster-card.flyx-adopted{ max-width:calc(100vw - 16px); }
  body.v4 .kc-chart-plot{ padding-left:38px; }
  body.v4 .kc-chart-grid{ left:38px; }
  body.v4 .kc-chart-gl span{ left:-38px; width:32px; }
}

/* ── V3-N2 ── */
/* Batch-2 wave N2: Speed Work form chrome + overdue pill, Episodes
   calendar cursor/tooltip affordance, Ad Slot Schedule 4-up slots +
   centred plus disc, Guests tier colour key + list columns, Feedback
   fixed state, Settings social logo sizing. Tokens/rgba only. */

/* SW2-5 · Unblock form fields get the SAME visible chrome the episode
   surface gives them (.es-sec scope). Root cause: outside .es-sec the
   base .es-fld rule borrows --g-border, which the glass theme defines
   as rgba(255,255,255,.65) - a white border on a white surface, i.e.
   invisible. Only the Guest name input looked right because the
   autocomplete carries the global .form-input chrome. Values copied
   verbatim from the .es-sec block (border rgba(0,0,0,0.18)). */
body.v4 .sw-form .es-fld input,
body.v4 .sw-form .es-fld select,
body.v4 .sw-form .es-fld textarea,
body.v4 .sw-form .ga-input,
body.v4 .sw-form .es-pills {
  width: 100%; box-sizing: border-box;
  padding: 11px 13px; border: 1px solid rgba(0, 0, 0, 0.18); border-radius: 10px;
  font-size: 14px; font-family: inherit; background: var(--g-surface); color: var(--g-ink-1);
}
body.v4 .sw-form .es-fld input:focus,
body.v4 .sw-form .es-fld select:focus,
body.v4 .sw-form .es-fld textarea:focus,
body.v4 .sw-form .ga-input:focus {
  outline: none; border-color: var(--g-blue); box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.13);
}
body.v4 .sw-form .es-fld textarea { resize: vertical; line-height: 1.5; }
body.v4 .sw-form .es-fld textarea.es-autogrow { resize: none; min-height: 44px; }

/* SW2-2 · priority pills for the new overdue-first model. */
body.v4 .sw-prio--overdue { color: var(--apl-cherry); background: var(--apl-cherry-bg); }
body.v4 .sw-prio--today   { color: var(--apl-orange); background: var(--apl-orange-bg); }

/* EP2-2 · the hand cursor belongs to ENTRIES, not the whole month grid.
   The base cell rule sets cursor:pointer (cells are not clickable since
   V3-EPIS routed clicks through the chips) - scope it back to default;
   chips keep their pointer + get a keyboard focus ring (role="link"). */
body.v4 .big-cal-cell { cursor: default; }
body.v4 .big-cal-event { cursor: pointer; }
body.v4 .big-cal-event:focus-visible { outline: 2px solid var(--g-blue); outline-offset: 1px; }

/* EP2-3 · shows carry up to FOUR ad slots (the In Edit sponsors task
   defaults to 4) - the schedule grid now templates 4-up. */
body.v4 .adsch-slots { grid-template-columns: repeat(4, 1fr); }
/* EP2-3 · the + disc: re-assert the EPIS-4b centring pattern inside this
   surface (grid place-items beats the inherited baseline drift). */
body.v4 .adsch-spslot .es-spslot-plus { display: grid; place-items: center; line-height: 1; padding: 0; }

/* GU2-1 · tier colour key on the roster page. Swatches reuse the live
   .av tone classes so the legend can never drift from the avatars. */
body.v4 .guest-tier-key {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 10px 2px 12px; font-size: 11.5px; color: var(--g-ink-3);
}
body.v4 .guest-tier-key .gtk-label {
  font-weight: 700; font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--g-ink-4);
}
body.v4 .guest-tier-key .gtk-item { display: inline-flex; align-items: center; gap: 6px; }
body.v4 .guest-tier-key .gtk-swatch {
  width: 13px; height: 13px; min-width: 13px; border-radius: 50%;
  font-size: 0; display: inline-block; flex: none;
}

/* GU2-3 · list view: identity (name + tag pills inline) then the four
   performance columns - Shows / Last Show / Top Show / Avg Downloads. */
body.v4 .guest-list-row.glr-v2 {
  grid-template-columns: 34px minmax(180px, 1.8fr) 0.5fr 0.95fr minmax(140px, 1.7fr) 0.9fr;
}
body.v4 .guest-list-head.glr-v2 {
  display: grid;
  grid-template-columns: 34px minmax(180px, 1.8fr) 0.5fr 0.95fr minmax(140px, 1.7fr) 0.9fr;
  gap: 14px; align-items: center; padding: 2px 14px 6px;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--g-ink-4);
}
body.v4 .glr-namerow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
body.v4 .glr-namerow .glr-name { flex: none; }
body.v4 .glr-top { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
body.v4 .glr-num { font-variant-numeric: tabular-nums; }

/* FB2-1 · five lifecycle tiles (the .grid-4 modifier was dropped from the
   stat row - its template is locked with an importance flag). */
body.v4 .fb-stat-row { grid-template-columns: repeat(5, 1fr); }
/* FB2-1 · the Fixed state - lilac, sitting between In review and Shipped. */
body.v4 .fb-status-pill.fb-st-fixed {
  background: rgba(94, 92, 230, 0.10);
  color: var(--g-lilac);
  border-color: rgba(94, 92, 230, 0.25);
}
body.v4 .fb-stat-num.fb-st-fixed { color: var(--g-lilac); }
body.v4 .fb-status-opt.on.fb-st-fixed { color: var(--g-lilac); }
/* FB2-1 · "Set as fixed" - note-gated primary on the card foot. */
body.v4 .fb-set-fixed {
  all: unset;
  padding: 6px 14px;
  background: var(--g-lilac);
  color: var(--on-accent);
  font-family: var(--g-fd);
  font-weight: 600;
  font-size: 12px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: opacity 0.12s ease, transform 0.12s ease;
}
body.v4 .fb-set-fixed:hover { opacity: 0.88; transform: translateY(-1px); }

/* SE2-1 · Revolut connected/last-sync readout next to the row actions. */
body.v4 .rev-conn-status { font-size: 12px; white-space: nowrap; }

/* SE2-2 · social platform logos fill more of their 38px chips
   (the inline SVGs declare 16px; CSS sizing wins over attributes). */
body.v4 .w11-socic svg { width: 22px; height: 22px; }

/* ── MOBILE: V3-N2 ── */
@media (max-width: 767.98px) {
  /* EP2-3 - the 4-up slot grid stacks (re-asserted after the 4-col
     override above; the earlier V3-EPIS media rule sits before it). */
  body.v4 .adsch-slots { grid-template-columns: 1fr; }
  /* GU2-3 - list rows stack: identity full-width, the four stats become
     labelled lines; the header row disappears (labels travel with rows). */
  body.v4 .guest-list-head.glr-v2 { display: none; }
  body.v4 .guest-list-row.glr-v2 {
    grid-template-columns: 34px 1fr;
    row-gap: 4px;
    min-height: 44px;
  }
  body.v4 .guest-list-row.glr-v2 .glr-stat {
    grid-column: 2;
    white-space: normal;
    display: flex; gap: 8px; align-items: baseline;
  }
  body.v4 .guest-list-row.glr-v2 .glr-stat::before {
    content: attr(data-m-label);
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--g-ink-4); flex: none;
  }
  /* GU2-1 - the colour key wraps to two lines comfortably. */
  body.v4 .guest-tier-key { gap: 10px 14px; }
  /* FB2-1 - tap targets; the stat row already flex-wraps 2-up. */
  body.v4 .fb-set-fixed, body.v4 .fb-save-notes { min-height: 44px; display: inline-flex; align-items: center; -webkit-tap-highlight-color: transparent; }
  /* SW2-5 - form controls stay iOS-zoom-proof inside Speed Work. */
  body.v4 .sw-form .es-fld input, body.v4 .sw-form .es-fld select, body.v4 .sw-form .es-fld textarea { font-size: 16px; min-height: 44px; }
  /* SE2-1 - the status line wraps under the buttons instead of forcing width. */
  body.v4 .rev-conn-status { white-space: normal; width: 100%; text-align: right; }
}

/* ── V3-N3 ── */
/* Wave N3: Intel live wiring (IN2-2..8), Analytics tickets (AN2-1..8),
   AI Team meeting blocks + skeleton + timeline answers (AI2-1/2b/2d/2e).
   Tokens / rgba only - no new hex, no !important. */

/* Intel - freshness line per wired tab (IN2-2..6) */
body.v4 .intel-fresh { font-size: 11.5px; font-weight: 600; color: var(--g-ink-4); margin: 2px 0 10px; }
body.v4 .intel-fresh.is-stale { color: var(--cherry); }

/* Intel - IN2-7 warning chips on every prospect surface */
body.v4 .iwarn-row { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle; }
body.v4 .iwarn {
  display: inline-flex; align-items: center;
  font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; line-height: 1.4; white-space: nowrap;
  cursor: help;
}
body.v4 .iwarn.prev { background: var(--butter-bg); color: var(--butter-fg); border: 1px solid rgba(0,0,0,0.06); }
body.v4 .iwarn.btc  { background: var(--cherry-fade); color: var(--cherry); border: 1px solid rgba(184,0,43,0.18); }

/* Intel - briefing rows: live rows are clickable (IN2-2..6) */
body.v4 .intel-target.is-click,
body.v4 .intel-action.is-click { cursor: pointer; }
body.v4 .intel-target.is-click:hover,
body.v4 .intel-action.is-click:hover { background: rgba(0,0,0,0.025); }

/* Intel - Actions-this-week: the Effort / Window label-value grammar
   restored (the look was lost when the tab carried mockup HTML) */
body.v4 .intel-action-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 7px; }
body.v4 .intel-action-tag { display: inline-flex; align-items: baseline; gap: 5px; font-size: 11.5px; }
body.v4 .intel-action-tag .kv-lbl {
  font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--g-ink-4);
}
body.v4 .intel-action-tag strong { font-size: 12px; font-weight: 700; color: var(--g-ink); font-variant-numeric: tabular-nums; }
body.v4 .intel-action-tag.intel-action-convert strong { color: var(--cherry); }

/* Intel - calendar UK/US region toggle (IN2-2..6) */
body.v4 .intel-region {
  display: inline-flex; gap: 0; border: 1px solid rgba(0,0,0,0.10);
  border-radius: 999px; overflow: hidden; background: rgba(255,255,255,0.6);
  flex-shrink: 0;
}
body.v4 .intel-region-btn {
  border: none; background: transparent; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  padding: 7px 18px; color: var(--g-ink-3);
}
body.v4 .intel-region-btn.on { background: var(--cherry); color: rgba(255,255,255,1); }

/* Analytics - AN2-3 four-number avg-per-show grid */
body.v4 .gi-avg-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 14px; margin: 6px 0 10px; }
body.v4 .gi-avg-cell { min-width: 0; }
body.v4 .gi-avg-k { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--g-500); }
body.v4 .gi-avg-v { font-size: 22px; font-weight: 800; color: var(--apl-ink); font-variant-numeric: tabular-nums; line-height: 1.2; }
body.v4 .gi-avg-n { font-size: 10.5px; color: var(--g-500); }

/* Analytics - AN2-6 shared column template across all four audience panels */
body.v4 .gi-aud-break .gi-aud-table { table-layout: fixed; width: 100%; }
body.v4 .gi-aud-table th:nth-child(1) { width: auto; }
body.v4 .gi-aud-table th:nth-child(2) { width: 72px; }
body.v4 .gi-aud-table th:nth-child(3) { width: 82px; }
body.v4 .gi-aud-table th:nth-child(4) { width: 56px; }
body.v4 .gi-aud-table th:nth-child(5) { width: 120px; }
body.v4 .gi-aud-table td { overflow: hidden; text-overflow: ellipsis; }
body.v4 .gi-aud-table td.gi-aud-trend { width: 120px; }
/* AN2-6 - "MoM" keeps its casing (v4 data-table th uppercases to MOM) */
body.v4 .data-table th.mom { text-transform: none; }

/* Analytics - AN2-7 competitor capture labels */
body.v4 .gi-comp-captured { margin-top: 2px; }
body.v4 .gi-comp-mtd { font-size: 11px; font-weight: 600; color: var(--g-500); text-transform: none; letter-spacing: 0; }

/* Analytics - AN2-8 insight panel (rides the green .p2-finding grammar) */
body.v4 .gi-insight { margin-bottom: 12px; }
body.v4 .gi-insight-eyebrow {
  font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--good); margin-bottom: 2px;
}

/* Analytics - episode popup three-tile row (AN2-4) */
body.v4 .gi-kpis.gi-kpis-3 { grid-template-columns: repeat(3, 1fr); }

/* AI Team - AI2-1 two-line meeting blocks (time, then department) */
body.v4 .aiweek .aimeet { align-items: flex-start; }
body.v4 .aiweek .aimeet .aimeet-lines { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 1px; }
body.v4 .aiweek .aimeet .aimeet-lines time { font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums; opacity: .85; margin-left: 0; }
body.v4 .aiweek .aimeet .aimeet-dept {
  display: block; min-width: 0; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-weight: 700;
}

/* AI Team - AI2-2e skeleton chrome (stat tiles + week strip ghosts) */
body.v4 .aiteam .stat-tile.is-skel .sk,
body.v4 .aiteam .aiweek.is-skel .sk { display: inline-block; border-radius: 4px; background: rgba(0,0,0,0.07); animation: w8skel 1.2s ease-in-out infinite; }
@keyframes w8skel { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* AI Team - AI2-2d answer affordance on the timeline questions card */
body.v4 .tl-card .q-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 4px 0; }
body.v4 .tl-card .q-line > p { flex: 1 1 220px; margin: 0; min-width: 0; }
body.v4 .tl-card .q-answer-act { flex: 1 1 100%; }
body.v4 .tl-card .q-answer-open { font-size: 11.5px; font-weight: 700; color: var(--cherry); padding: 4px 10px; }
body.v4 .tl-card .q-answer-box { margin-top: 6px; }
body.v4 .tl-card .q-answer-box .ta {
  width: 100%; font: inherit; font-size: 12.5px; padding: 8px 10px;
  border: 1px solid rgba(0,0,0,0.12); border-radius: 9px; background: rgba(255,255,255,0.8);
  resize: vertical;
}
body.v4 .tl-card .q-answer-row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
body.v4 .tl-card .q-answered { flex: 1 1 100%; background: var(--ok-bg); border-radius: 9px; padding: 8px 10px; margin-top: 4px; }
body.v4 .tl-card .q-answered-lbl { font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--good); display: block; margin-bottom: 2px; }
body.v4 .tl-card .q-answered p { margin: 0; font-size: 12.5px; }

/* ── MOBILE: V3-N3 ── */
@media (max-width: 767.98px) {
  /* Intel - region toggle + chips stay tappable / wrappable */
  body.v4 .intel-region-btn { min-height: 44px; padding: 0 22px; }
  body.v4 .iwarn-row { flex-wrap: wrap; }
  body.v4 .intel-target.is-click, body.v4 .intel-action.is-click { min-height: 44px; }
  body.v4 .intel-fresh { margin-bottom: 8px; }
  /* Analytics - avg grid stays 2x2 but tightens; popup tiles stack */
  body.v4 .gi-avg-grid { gap: 8px 10px; }
  body.v4 .gi-avg-v { font-size: 19px; }
  body.v4 .gi-kpis.gi-kpis-3 { grid-template-columns: 1fr; }
  /* Analytics - audience tables keep purposeful horizontal scroll */
  body.v4 .gi-aud-break .gi-aud-table { min-width: 460px; }
  body.v4 .gi-aud-break .card { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  /* AI Team - meeting blocks + answer controls hit 44px */
  body.v4 .tl-card .q-answer-open { min-height: 44px; min-width: 44px; }
  body.v4 .tl-card .q-answer-row .btn-primary,
  body.v4 .tl-card .q-answer-row .btn-ghost { min-height: 44px; }
  body.v4 .tl-card .q-answer-box .ta { font-size: 16px; }   /* stop iOS zoom */
  body.v4 .aiweek .aimeet .aimeet-dept { font-size: 10px; }
}

/* ── V3-N3 (render-verify fix) ── */
/* The Answer button hides via the hidden attribute once the box opens;
   .btn-ghost's own display rule would otherwise override [hidden]. */
body.v4 .tl-card .q-answer-open[hidden] { display: none; }

/* ════════════════════════════════════════════════════════════════════════
   ── V3-FINAL ──  Final batch-2 items: ST2-1..3 (Studio week grid) +
   SP2-1 (sponsor renewal pitch deck, _DESIGN_BATCH2_B.html Option C
   "Bold Split Panel"). Append-only; the W910 STUD-2 emphasis blocks above
   are untouched - ST2-1 is a scoped override on top of them.
   ════════════════════════════════════════════════════════════════════════ */

/* ── ST2-1 · current day: keep the blue circle, drop the underline ───
   The W910 block gives every active-week day header an ::after underline
   bar (today's at full-strength blue). Peter: today already has the blue
   circle around the number (.ss-today-row .ss-num) - the second blue
   marker is noise. This higher-specificity override removes the bar on
   today ONLY; the other active-week days keep theirs. content:none kills
   the pseudo-element in light AND dark (the dark rule only recolours it). */
body.v4 .ss-curweek .ss-today-row.ss-day-head::after { content: none; }

/* ── ST2-2 · weekend band ─────────────────────────────────────────────
   Saturday + Sunday rows carry a feint grey wash across their hour cells
   (the grid is axis-flipped - days run down the left, so a "row" is one
   day). Booked/busy tiles keep their own fills (:not(.ss-event)); today's
   blue wash wins if today is a weekend day (:not(.ss-today-row)).
   --g-rule-soft flips automatically in dark mode (v6 redefines it to a
   translucent white), so one token-only rule covers both themes. */
body.v4 .ss-cell.ss-wkend:not(.ss-event):not(.ss-today-row) {
  background: var(--g-rule-soft);
}

/* ── ST2-3 · weeks-in-view dropdown + stacked week grids ─────────────
   The "This week" pill is replaced by a view dropdown (house select
   grammar - same family as .guest-sort). Selecting N renders N
   consecutive week grids down the page; each extra grid gets a quiet
   range caption, and .ss-curweek emphasis lands only on the real
   current week's block. */
body.v4 .ss-weeks-sel {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  margin-left: 10px;
  padding: 4px 9px;
  border: 1px solid var(--g-200);
  border-radius: 9px;
  background: var(--g-surface);
  color: var(--g-ink-1);
  cursor: pointer;
  vertical-align: middle;
}
body.v4 .ss-week-cap {
  margin: 20px 4px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--g-ink-4);
}
body.v4 .ss-week-cap.is-first { margin-top: 4px; }
body.v4 .ss-week-cap.is-cur { color: var(--g-blue); }

/* ── SP2-1 · Sponsor renewal pitch deck ──────────────────────────────
   Slide CSS lifted character-for-character from _DESIGN_BATCH2_B.html
   (Surface 4, Option C "Bold Split Panel"), scoped under .rnwdeck. The
   mockup's class names (.slide/.slidecap/.dc/.dc1/.dc2/.eyeb/.ttl …)
   are kept as the production names. Slides 3-5 extend the same grammar
   the mockup renders as thumbnails (3 = ink 38/62, 4 = cherry 46/54,
   5 = ink 46/54).
   COLOUR NOTE (flagged in the wave report): the deck is brand collateral
   that must stay identical in dark mode and on paper, so the mockup's
   colour values (#fff, var(--g-cherry)=#b8002b, #1d1d1f/#161618 ink,
   #ff8aa0 eyebrow pink, ink-1..4 greys) are inlined as rgba() literals -
   theme-stable AND css-guard stays at baseline (no new hex). */

/* full-screen preview overlay + chrome (app furniture, theme tokens OK) */
body.v4 .rnwdeck-overlay {
  position: fixed;
  inset: 0;
  z-index: 1400;
  overflow: auto;
  background: var(--g-canvas);
  padding: 14px clamp(14px, 5vw, 48px) 64px;
}
body.v4 .rnwdeck-bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 1040px;
  margin: 0 auto;
  padding: 10px 16px;
  border: 1px solid var(--g-border);
  border-radius: var(--g-r);
  background: var(--g-paper-3);
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
  box-shadow: var(--g-sh);
}
body.v4 .rnwdeck-bar-t {
  font-family: var(--g-fd);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--g-ink-1);
}
body.v4 .rnwdeck-bar-a { display: flex; align-items: center; gap: 10px; }
body.v4 .rnwdeck-close {
  width: 34px;
  height: 34px;
  border: 1px solid var(--g-200);
  border-radius: 50%;
  background: var(--g-surface);
  color: var(--g-ink-2);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

/* deck column - mockup .deckcol, verbatim */
body.v4 .rnwdeck {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 1040px;
  margin: 18px auto 0;
}
/* mockup .slide, verbatim */
body.v4 .rnwdeck .slide {
  aspect-ratio: 16/9;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  box-shadow: var(--g-sh-2);
  border: 1px solid var(--g-rule);
  width: 100%;
}
body.v4 .rnwdeck .slide .pageno {
  position: absolute;
  bottom: 14px;
  right: 18px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  opacity: 0.5;
}
/* mockup .slidecap, verbatim */
body.v4 .rnwdeck .slidecap {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g-ink-4);
  margin: -6px 0 0 2px;
}

/* Direction C base - mockup .dc (colours inlined, see note) */
body.v4 .rnwdeck .dc { background: rgba(255, 255, 255, 1); color: rgba(29, 29, 31, 1); }
body.v4 .rnwdeck .dc .eyeb {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* slide 1 + 4: cherry left / white right (mockup .dc1, verbatim) */
body.v4 .rnwdeck .dc1, body.v4 .rnwdeck .dc4 { display: grid; grid-template-columns: 46% 54%; }
body.v4 .rnwdeck .dc1 .left, body.v4 .rnwdeck .dc4 .left {
  background: rgba(184, 0, 43, 1);
  color: rgba(255, 255, 255, 1);
  padding: 8% 9%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
body.v4 .rnwdeck .dc1 .left::after, body.v4 .rnwdeck .dc4 .left::after {
  content: '';
  position: absolute;
  right: -30%;
  top: -20%;
  width: 80%;
  height: 140%;
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.14), transparent 70%);
}
body.v4 .rnwdeck .dc1 .left > *, body.v4 .rnwdeck .dc4 .left > * { position: relative; }
body.v4 .rnwdeck .dc1 .left .eyeb, body.v4 .rnwdeck .dc4 .left .eyeb { color: rgba(255, 255, 255, 0.75); }
body.v4 .rnwdeck .dc1 .left .ttl, body.v4 .rnwdeck .dc4 .left .ttl, body.v4 .rnwdeck .dc5 .left .ttl {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.04;
}
body.v4 .rnwdeck .dc1 .left .num, body.v4 .rnwdeck .dc4 .left .num, body.v4 .rnwdeck .dc5 .left .num {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
body.v4 .rnwdeck .dc1 .right, body.v4 .rnwdeck .dc4 .right, body.v4 .rnwdeck .dc5 .right {
  padding: 8% 9%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  background: radial-gradient(ellipse 70% 60% at 100% 0%, rgba(180, 170, 255, 0.13), transparent), rgba(255, 255, 255, 1);
}
body.v4 .rnwdeck .dc1 .right .for .k {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(134, 134, 139, 1);
}
body.v4 .rnwdeck .dc1 .right .for .v { font-size: 15px; font-weight: 750; margin-top: 2px; }
body.v4 .rnwdeck .dc1 .right .for .s { font-size: 10.5px; color: rgba(110, 110, 115, 1); margin-top: 1px; }

/* slide 2 + 3: ink left / white right (mockup .dc2, verbatim) */
body.v4 .rnwdeck .dc2, body.v4 .rnwdeck .dc3 { display: grid; grid-template-columns: 38% 62%; }
body.v4 .rnwdeck .dc2 .left, body.v4 .rnwdeck .dc3 .left {
  background: linear-gradient(180deg, rgba(29, 29, 31, 1), rgba(22, 22, 24, 1));
  color: rgba(255, 255, 255, 1);
  padding: 7% 8%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
}
body.v4 .rnwdeck .dc2 .left .eyeb, body.v4 .rnwdeck .dc3 .left .eyeb { color: rgba(255, 138, 160, 1); }
body.v4 .rnwdeck .dc2 .left .h, body.v4 .rnwdeck .dc3 .left .h {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.08;
}
body.v4 .rnwdeck .dc2 .left .a .v, body.v4 .rnwdeck .dc3 .left .a .v {
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
body.v4 .rnwdeck .dc2 .left .a .k, body.v4 .rnwdeck .dc3 .left .a .k {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
body.v4 .rnwdeck .dc2 .right, body.v4 .rnwdeck .dc3 .right {
  padding: 6% 7%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: radial-gradient(ellipse 60% 50% at 0% 100%, rgba(150, 220, 190, 0.14), transparent), rgba(255, 255, 255, 1);
}
body.v4 .rnwdeck .chartcap {
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(134, 134, 139, 1);
  margin: 6px 0;
}

/* slide 5: ink left at the dc1 split (matches the mockup's slide-5 thumb) */
body.v4 .rnwdeck .dc5 { display: grid; grid-template-columns: 46% 54%; }
body.v4 .rnwdeck .dc5 .left {
  background: linear-gradient(180deg, rgba(29, 29, 31, 1), rgba(22, 22, 24, 1));
  color: rgba(255, 255, 255, 1);
  padding: 8% 9%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
body.v4 .rnwdeck .dc5 .left .eyeb { color: rgba(255, 138, 160, 1); }

/* deck content helpers (new - white-panel evidence furniture, literal
   inks for theme-stable collateral) */
body.v4 .rnwdeck .rd-points {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(66, 66, 69, 1);
}
body.v4 .rnwdeck .rd-points li::marker { font-weight: 700; color: rgba(184, 0, 43, 1); }
body.v4 .rnwdeck .rd-ai {
  font-size: 11.5px;
  line-height: 1.55;
  color: rgba(66, 66, 69, 1);
  white-space: pre-wrap;
  overflow: auto;
  max-height: 100%;
}
body.v4 .rnwdeck .rd-ai.rd-why-long { font-size: 10px; line-height: 1.45; }
body.v4 .rnwdeck .rd-why { justify-content: flex-start; padding-top: 5%; padding-bottom: 5%; min-height: 0; }
body.v4 .rnwdeck .rd-foot { font-size: 10px; color: rgba(110, 110, 115, 1); margin-top: 4px; }
body.v4 .rnwdeck .rd-foot b { color: rgba(29, 29, 31, 1); }
body.v4 .rnwdeck .rd-missing { font-size: 11px; color: rgba(110, 110, 115, 1); font-style: italic; }
body.v4 .rnwdeck .rd-show {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
body.v4 .rnwdeck .rd-show-n { font-size: 13px; font-weight: 700; color: rgba(29, 29, 31, 1); }
body.v4 .rnwdeck .rd-show-s {
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: rgba(134, 134, 139, 1);
  white-space: nowrap;
}
body.v4 .rnwdeck .rd-contact .k {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(134, 134, 139, 1);
}
body.v4 .rnwdeck .rd-contact .v { font-size: 15px; font-weight: 750; margin-top: 2px; }
body.v4 .rnwdeck .rd-contact .s { font-size: 10.5px; color: rgba(110, 110, 115, 1); margin-top: 1px; }

/* ── SP2-1 · Download PDF = the browser print path ───────────────────
   One slide per page. The @page landscape rule is injected by the
   overlay itself (a <style> inside .rnwdeck-overlay), so app-wide
   printing is never forced landscape - these rules only bite while the
   deck is open (body.rnwdeck-open). */
@media print {
  body.rnwdeck-open > :not(.rnwdeck-overlay) { display: none; }
  body.v4.rnwdeck-open .rnwdeck-overlay {
    position: static;
    overflow: visible;
    padding: 0;
    background: rgba(255, 255, 255, 1);
  }
  body.v4.rnwdeck-open .rnwdeck-bar { display: none; }
  body.v4.rnwdeck-open .rnwdeck { display: block; max-width: none; margin: 0; }
  body.v4.rnwdeck-open .rnwdeck .slidecap { display: none; }
  body.v4.rnwdeck-open .rnwdeck .slide {
    page-break-after: always;
    break-inside: avoid;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  body.v4.rnwdeck-open .rnwdeck .slide:last-of-type { page-break-after: auto; }
}

/* ── MOBILE: V3-FINAL (studio weeks select + renewal deck) ──────────── */
@media (max-width: 720px) {
  /* ST2-3 - comfortable touch target for the weeks dropdown */
  body.v4 .ss-weeks-sel { min-height: 40px; font-size: 14px; }
  /* SP2-1 - deck preview on a phone: tighter gutter, wrapping bar,
     44px close target, type scaled so the 16:9 slides stay legible */
  body.v4 .rnwdeck-overlay { padding: 10px 10px 48px; }
  body.v4 .rnwdeck-bar { flex-wrap: wrap; }
  body.v4 .rnwdeck-close { width: 44px; height: 44px; }
  body.v4 .rnwdeck .dc1 .left .ttl,
  body.v4 .rnwdeck .dc4 .left .ttl,
  body.v4 .rnwdeck .dc5 .left .ttl { font-size: 15px; }
  body.v4 .rnwdeck .dc2 .left .h,
  body.v4 .rnwdeck .dc3 .left .h { font-size: 12px; }
  body.v4 .rnwdeck .dc1 .right .for .v,
  body.v4 .rnwdeck .rd-contact .v { font-size: 11.5px; }
  body.v4 .rnwdeck .rd-points { font-size: 9.5px; gap: 5px; padding-left: 14px; }
  body.v4 .rnwdeck .rd-ai { font-size: 9px; }
  body.v4 .rnwdeck .rd-show-n { font-size: 10.5px; }
  body.v4 .rnwdeck .dc2 .left .a .v,
  body.v4 .rnwdeck .dc3 .left .a .v { font-size: 11px; }
}

/* ── V3-STUDIO-BOOK ── */
/* ST2-4 - "New booking" modal on Studio Schedule. Reuses the house
   .aiceo-modal chrome (head/body/foot); these are only the booking
   form's additions. Tokens + rgba only - no hex, no !important. */
.stb-modal { max-width: 540px; }
.stb-field { display: flex; flex-direction: column; }
.stb-field .eyebrow { margin-bottom: 6px; }
.stb-field .form-input { width: 100%; box-sizing: border-box; }
.stb-field textarea.form-input { resize: vertical; min-height: 64px; }
.stb-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 10px;
}
.stb-hint {
  font-size: 11.5px;
  color: var(--ink-light);
  margin-top: 6px;
  letter-spacing: -0.005em;
}
.stb-err {
  font-size: 12.5px;
  color: var(--cherry);
  background: rgba(184, 0, 43, 0.07);
  border: 1px solid rgba(184, 0, 43, 0.18);
  border-radius: var(--r-sm);
  padding: 8px 12px;
}
.stb-new-btn { white-space: nowrap; }

/* ── MOBILE: studio booking modal ── */
@media (max-width: 720px) {
  /* Bottom sheet per the mobile doctrine: full-width, rounded top,
     44px targets, single-column date/time row. */
  .aiceo-modal-overlay.stb-overlay { align-items: flex-end; }
  .stb-modal {
    max-width: none;
    width: 100vw;
    margin: 0;
    border-radius: 18px 18px 0 0;
    max-height: 92dvh;
  }
  .stb-row { grid-template-columns: 1fr; }
  .stb-modal .form-input { min-height: 44px; }
  .stb-modal textarea.form-input { min-height: 72px; }
  .stb-modal .aiceo-modal-foot .btn-v4 { min-height: 44px; flex: 1; }
  .stb-new-btn { min-height: 44px; }
}

/* ── V3-B3S ── */
/* Studio diary upgrade: clickable chips, the entry details popup
   (RSVP rows + Open project + Delete) and the New Entry modal's hot
   prospects + guest-email capture. Tokens + rgba only - no hex, no
   !important. */

/* Every diary chip is now a click target (details popup). */
body.v4 .ss-event[role="button"] { cursor: pointer; }
body.v4 .ss-event[role="button"]:focus-visible {
  outline: 2px solid var(--cherry);
  outline-offset: 1px;
}

/* New Entry - hot prospects without a date */
.stb-pros {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 168px;
  overflow-y: auto;
  padding: 2px;
}
.stb-pro {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  font: inherit;
  cursor: pointer;
}
.stb-pro:hover { border-color: var(--ink-light); }
.stb-pro.is-on {
  border-color: var(--cherry);
  background: rgba(184, 0, 43, 0.05);
}
.stb-pro-name {
  font-weight: 700;
  font-size: 12.5px;
  color: var(--ink);
  white-space: nowrap;
}
.stb-pro-title {
  flex: 1;
  font-size: 12px;
  color: var(--ink-light);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stb-pro-stage {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--butter-bg);
  color: var(--butter-fg);
}
.stb-pro-stage.is-booked { background: var(--sage-bg); color: var(--sage-fg); }
.stb-warn { color: var(--cherry); }

/* Entry details popup */
.sde-modal { max-width: 480px; }
.sde-row { margin-bottom: 14px; }
.sde-row .eyebrow { margin-bottom: 5px; }
.sde-val {
  font-size: 13.5px;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.sde-notes { white-space: pre-wrap; }
.sde-quiet { color: var(--ink-light); font-size: 12.5px; }
.sde-att {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}
.sde-att:last-child { border-bottom: 0; }
.sde-att-who {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  min-width: 0;
  overflow-wrap: anywhere;
}
.sde-att-mail {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-light);
}
.sde-rsvp {
  flex: none;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 9px;
  border-radius: 999px;
}
.sde-rsvp.is-acc { background: var(--sage-bg);   color: var(--sage-fg); }
.sde-rsvp.is-dec { background: var(--rose-bg);   color: var(--rose-fg); }
.sde-rsvp.is-ten { background: var(--butter-bg); color: var(--butter-fg); }
.sde-rsvp.is-pen { background: var(--butter-bg); color: var(--butter-fg); }
.sde-err {
  font-size: 12.5px;
  color: var(--cherry);
  background: rgba(184, 0, 43, 0.07);
  border: 1px solid rgba(184, 0, 43, 0.18);
  border-radius: var(--r-sm);
  padding: 8px 12px;
}
.sde-foot { align-items: center; }
.sde-foot-gap { flex: 1; }
.sde-del { color: var(--cherry); border-color: rgba(184, 0, 43, 0.35); }
.sde-del:hover { background: rgba(184, 0, 43, 0.06); }
.sde-foot a.btn-v4 { text-decoration: none; }

/* ── MOBILE: V3-B3S (studio entry popup + New Entry additions) ── */
@media (max-width: 720px) {
  /* Details popup as a bottom sheet, 44px targets - mobile doctrine. */
  .aiceo-modal-overlay.sde-overlay { align-items: flex-end; }
  .sde-modal {
    max-width: none;
    width: 100vw;
    margin: 0;
    border-radius: 18px 18px 0 0;
    max-height: 92dvh;
  }
  .sde-foot { flex-wrap: wrap; gap: 8px; }
  .sde-modal .aiceo-modal-foot .btn-v4 { min-height: 44px; flex: 1; text-align: center; }
  .sde-att { min-height: 44px; }
  /* New Entry: comfortable prospect rows */
  .stb-pro { min-height: 44px; }
  .stb-pros { max-height: 200px; }
}

/* ════════════════════════════════════════════════════════════════════════
   ── V3-B3 ──  Batch-3 bug fixes.
   1  Dashboard empty state: role-based starter TEMPLATE chooser
      (.dv2-tpl-grid / .dv2-tpl cards; CEO card is admin-gated in JS).
   2  Today: Risks / Opportunities / Highest-leverage share ONE row in
      thirds (.today-third); stacks on mobile.
   3a Speed Work overlay raised above the floating chat dock (z 1500) -
      the dock's unread "1" badge was bleeding through to the right of
      the popup (the mobile block already ran at 2200; desktop didn't).
   3b Speed Work: the episode-context "Open in surface" link + stage
      chip were g-blue on the grey ctx card - lifted to readable ink
      weights (kept blue but heavier; see render check).
   4  Ad Slot Schedule: SVG plus sizing; filled-slot logos fill the box;
      picker logo tiles lose the gradient behind real logos.
   5  Guests: split-band card box restored (the button.gc all:unset
      reset OUTRANKED the .gc skin rule - (0,3,2) beats (0,3,1) - so
      background/border/radius/shadow were unset since integration);
      list view right-aligns the Avg Downloads end column.
   6  Intel dossier: light-glass card surface (the .i3 override painted
      var(--g-paper-3) 78% white over the dark overlay = mid grey; the
      .dossier base 97% surface wins back).
   Tokens / rgba only - no new hex, no new !important. Appended last so
   equal-specificity ties resolve here.
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1 · dashboard template chooser ───────────────────────────────────── */
body.v4 .dv2-empty-tpl{ max-width:980px; margin-left:auto; margin-right:auto; }
body.v4 .dv2-tpl-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:14px; margin:22px 0 16px; text-align:left;
}
body.v4 .dv2-tpl{
  display:flex; flex-direction:column; gap:8px; min-height:150px;
  padding:18px 18px 16px; cursor:pointer; font:inherit; text-align:left;
  background:var(--g-paper-3); backdrop-filter:var(--g-blur); -webkit-backdrop-filter:var(--g-blur);
  border:1px solid var(--g-border); border-radius:var(--g-r-lg); box-shadow:var(--g-sh);
  transition:transform .18s var(--g-ease), box-shadow .18s var(--g-ease), border-color .18s var(--g-ease);
}
body.v4 .dv2-tpl:hover{ transform:translateY(-2px); box-shadow:var(--g-sh-2); border-color:rgba(184,0,43,.25); }
body.v4 .dv2-tpl:focus-visible{ outline:2px solid var(--g-blue); outline-offset:2px; }
body.v4 .dv2-tpl-top{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
body.v4 .dv2-tpl-name{ font-size:15px; font-weight:750; letter-spacing:-.015em; color:var(--g-ink-1); }
body.v4 .dv2-tpl-you{
  font-size:9px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  padding:3px 9px; border-radius:var(--r-pill);
  background:var(--cherry); color:var(--on-accent);
}
body.v4 .dv2-tpl-desc{ font-size:12px; line-height:1.5; color:var(--g-ink-3); }
body.v4 .dv2-tpl-panels{ display:flex; gap:5px; flex-wrap:wrap; margin-top:auto; }
body.v4 .dv2-tpl-pill{
  font-size:10px; font-weight:700; padding:3px 9px; border-radius:var(--r-pill);
  background:rgba(0,0,0,.05); color:var(--g-ink-3); white-space:nowrap;
}
body.v4 .dv2-tpl-custom{ border-style:dashed; background:var(--g-paper-2); }
body.v4.dark .dv2-tpl{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); }
body.v4.dark .dv2-tpl-pill{ background:rgba(255,255,255,.08); }

/* ── 2 · Today - one row of thirds for risks / opps / leverage ────────── */
body.v4 .today-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
body.v4 .today-grid > .today-third{ grid-column:auto; }

/* ── 3a · Speed Work popup above the chat dock badge ──────────────────── */
body.v4 .sw-overlay{ z-index:2200; }

/* ── 4 · Ad Slot Schedule slots ───────────────────────────────────────── */
/* the SVG cross in the plus disc (geometrically centred by place-items) */
body.v4 .adsch-spslot .es-spslot-plus svg.adsch-plus{ width:14px; height:14px; display:block; }
/* filled-slot logos fill the slot's logo band edge to edge */
body.v4 .adsch-spslot .es-spslot-logo{ min-height:56px; }
body.v4 .adsch-spslot .es-spslot-logo img{
  height:56px; width:100%; max-height:none;
  object-fit:contain; object-position:left center; padding:0;
}
/* picker tiles: a real logo sits straight on the panel surface */
body.v4 .adslot-camp-logo.has-logo{ background:none; }

/* ── 5 · Guests ───────────────────────────────────────────────────────── */
/* 5a - restore the split-band card's box. ROOT CAUSE: the structural reset
   `body.v4 .guest-grid button.gc{all:unset;…}` is (0,3,2) while the skin
   rule `body.v4 .guest-grid .gc{…}` is (0,3,1) - per-property cascade let
   all:unset strip background/border/radius/shadow regardless of source
   order. Re-assert the box AT the reset's own specificity. */
body.v4 .guest-grid button.gc{
  background:var(--g-paper-3); backdrop-filter:var(--g-blur); -webkit-backdrop-filter:var(--g-blur);
  border:1px solid var(--g-border); border-radius:var(--g-r-lg); box-shadow:var(--g-sh);
  overflow:hidden; cursor:pointer; transition:all .18s var(--g-ease);
}
/* 5c - the Avg Downloads end column right-aligns (desktop rows only; the
   mobile card-stack keeps its labelled left-aligned lines) */
@media (min-width: 768px){
  body.v4 .guest-list-row.glr-v2 > .glr-stat:last-child,
  body.v4 .guest-list-head.glr-v2 > span:last-child{ text-align:right; }
}

/* ── 6 · Intel dossier - light glass card ─────────────────────────────── */
/* the .i3 skin painted var(--g-paper-3) (78% white) over the dark modal
   overlay = the mid-grey Peter flagged. The .dossier base surface
   (rgba(255,255,255,.97), dark-remapped by body.v4.dark .dossier) wins. */
body.v4 .dossier.i3{ background:var(--p-surface); }

/* ── MOBILE: V3-B3 ──
   Template cards stack one-per-row with 44px-friendly padding; the Today
   thirds re-stack to one column (this block is AFTER the desktop 3-col
   rule above, so it wins inside the query). Additive @media, tokens only. */
@media (max-width: 767.98px){
  body.v4 .dv2-tpl-grid{ grid-template-columns:1fr; gap:10px; }
  body.v4 .dv2-tpl{ min-height:44px; }
  body.v4 .today-grid{ grid-template-columns:1fr; }
}

/* ── V3-B3 · 3b render-verify fix - Speed Work chip/pill contrast ──────
   ROOT CAUSE: tokens.css pairs --c-X (a PASTEL surface) with --on-X (a
   deep ink), but app.css's later :root redefines --c-X as SOLID status
   inks with separate --c-X-bg surfaces. The one-queue chips and source
   pills were authored against the tokens.css pairing, so they rendered
   ink-on-ink (the unreadable blue "Episode" pill / blue and green
   squares). Re-pair them to the surface+ink tokens this stylesheet
   actually resolves. Tokens only. */
body.v4 .sw-oq-chip--mid     { background: var(--c-butter-bg); color: var(--c-butter); }
body.v4 .sw-oq-chip--task    { background: var(--c-mint-bg);   color: var(--c-mint); }
body.v4 .sw-oq-chip--episode { background: var(--c-sky-bg);    color: var(--c-sky); }
body.v4 .sw-oq-chip--flag    { background: var(--c-peach-bg);  color: var(--c-peach); }
body.v4 .sw-oq-src--lilac    { background: var(--c-lilac-bg);  color: var(--c-lilac); }
body.v4 .sw-oq-src--sky      { background: var(--c-sky-bg);    color: var(--c-sky); }
body.v4 .sw-oq-src--peach    { background: var(--c-peach-bg);  color: var(--c-peach); }
body.v4 .sw-oq-src--mint     { background: var(--c-mint-bg);   color: var(--c-mint); }

/* ── V3-B3 · 6a render-verify fix - the score bar painted EMPTY ────────
   ROOT CAUSE (measured in the harness): the legacy layout helper
   `.stack { display:flex; flex-direction:column; gap:8px }` (HELPERS
   block, ~line 920) leaks into the dossier's score bar - the .i3 rule
   sets display/height but never flex-direction, so the four segments
   stacked as a COLUMN inside an 8px-tall clipped box with 8px gaps and
   rendered 0px tall. THIS is why the bar never filled to the score.
   Re-assert the row axis + kill the helper gap, scoped to the memo. */
body.v4 .dossier.i3 .stack{ flex-direction:row; gap:0; }

/* ── V3-PICKS-B3 ── */
/* =============================================================
   DESIGN BATCH 3 - Peter's approved picks.
   Source mockup: _DESIGN_BATCH3.html. CSS lifted verbatim; the
   mockup's inlined token values mapped back to the var() tokens
   they mirror (its :root mirrors css/tokens.css light). House
   pattern (V3-PICKS-A): both components mount where later app.css
   :root blocks drift the tokens (--r-lg:18px, saturated pastels,
   legacy --good #3d8b5e), so the mockup's light values are pinned
   on each component root in rgb()/rgba() form (css-guard: no new
   hex) and a dark block restores inherit for body.dark's values.

   1. Surface 1 Option A "Compact confirm card"   → .cvA
      (js/components/intel-convert-card.js; overlay is the standard
      .ep-modal-overlay dim - no bespoke backdrop). The mockup's
      row-label class is `.eyebrow`; renamed `.cva-lbl` here because
      the canonical v5 eyebrow rule forces var(--g-blue) !important
      on .eyebrow / [class*="-eye"], and the mockup label is ink-3 -
      declarations otherwise verbatim. Shared atoms (.seg /
      .field-input / .btn / .pill-soft) clash with existing rules,
      so every selector is scoped under .cvA per the house rule.
   2. Surface 2 Option B "Centred date, symmetric clusters" → .h2b
      (js/pages/studio.js subbar; .ssx-* shared header atoms scoped
      under .h2b). Option 2B's inline Today-button override
      (border var(--rule) + var(--paper-3)) is folded into the
      scoped .ssx-today rule.
   Structural additions beyond the mockup are commented inline and
   limited to: focus rings, disabled states, wrap/min-width guards
   for live data volumes, dark-mode surfaces (the mockup is light-
   only), the grid-corner consequence of detaching the studio
   header, and the mobile blocks.
   ============================================================= */
body.v4 .cvA,
body.v4 .h2b{
  --ink-2:rgb(58,58,60); --ink-3:rgb(110,110,115); --ink-4:rgb(161,161,166);
  --rule:rgba(0,0,0,.06);
  --border:rgba(255,255,255,.65);
  --surface:rgb(255,255,255);
  --paper:rgba(255,255,255,.58); --paper-2:rgba(255,255,255,.45); --paper-3:rgba(255,255,255,.82);
  --good:rgb(27,138,60);
  --c-mint:rgb(225,245,238);  --on-mint:rgb(15,110,86);
  --c-sky:rgb(230,241,251);   --on-sky:rgb(12,68,124);
  --c-butter:rgb(251,242,218);--on-butter:rgb(138,106,0);
  --blur:blur(28px) saturate(180%);
  --sh-modal:0 18px 60px rgba(0,0,0,.14);
  --r-lg:16px; --r-xl:22px; --r-pill:999px;
}
body.v4.dark .cvA,
body.v4.dark .h2b{
  --ink-2:inherit; --ink-3:inherit; --ink-4:inherit;
  --rule:inherit; --border:inherit; --surface:inherit;
  --paper:inherit; --paper-2:inherit; --paper-3:inherit;
  --good:inherit;
  --c-mint:inherit; --on-mint:inherit;
  --c-sky:inherit;  --on-sky:inherit;
  --c-butter:inherit; --on-butter:inherit;
  --sh-modal:inherit;
}

/* ════ 1 · INTEL - CONVERT-TO-TARGET CONFIRM CARD (.cvA) ════ */
/* mockup .glass-card atom + .cvA{max-width:420px;overflow:hidden} */
body.v4 .cvA{
  background:var(--paper);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-modal);
  width:100%;max-width:420px;overflow:hidden;
}
body.v4 .cvA-head{display:flex;align-items:center;gap:14px;padding:20px 22px 16px;}
/* avatar gradient: mockup #7cb6ff → var(--hero-blue), #5e5ce6 → var(--g-lilac) */
body.v4 .cvA-ava{
  width:46px;height:46px;border-radius:50%;flex:0 0 auto;
  background:linear-gradient(135deg,var(--hero-blue),var(--g-lilac));
  color:var(--on-accent);font-size:16px;font-weight:700;letter-spacing:.02em;
  display:grid;place-items:center;
}
body.v4 .cvA-id{flex:1;min-width:0;}
body.v4 .cvA-name{font-size:16.5px;font-weight:700;letter-spacing:-.01em;color:var(--g-ink-1);}
body.v4 .cvA-role{font-size:12.5px;color:var(--ink-3);margin-top:1px;}
body.v4 .cvA-score{position:relative;width:46px;height:46px;flex:0 0 auto;}
body.v4 .cvA-score svg{position:absolute;inset:0;transform:rotate(-90deg);}
body.v4 .cvA-score .val{position:absolute;inset:0;display:grid;place-items:center;font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--g-ink-1);}
/* structural: flex-wrap added - live category labels run longer than the mockup's */
body.v4 .cvA-meta{display:flex;gap:6px;padding:0 22px 16px;flex-wrap:wrap;}
body.v4 .cvA-body{border-top:1px solid var(--rule);padding:18px 22px 20px;display:flex;flex-direction:column;gap:16px;}
/* mockup `.cvA-row .eyebrow` (renamed - see block comment) + the shared
   .eyebrow atom's declarations, verbatim */
body.v4 .cvA-row .cva-lbl{display:block;margin-bottom:8px;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}
body.v4 .cvA-foot{display:flex;justify-content:flex-end;gap:10px;padding:14px 22px 18px;border-top:1px solid var(--rule);background:var(--paper-2);}
/* mockup .seg atom, scoped (clashes with the app-wide .seg) */
body.v4 .cvA .seg{display:inline-flex;background:rgba(0,0,0,.045);border-radius:var(--r-pill);padding:3px;gap:2px;}
body.v4 .cvA .seg button{font-family:inherit;border:none;background:transparent;cursor:pointer;font-size:12.5px;font-weight:500;color:var(--ink-3);padding:6px 14px;border-radius:var(--r-pill);}
body.v4 .cvA .seg button.on{background:var(--surface);color:var(--g-ink-1);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.10);}
/* structural dark: the mockup is light-only; the .045 black track vanishes on dark */
body.v4.dark .cvA .seg{background:rgba(255,255,255,.08);}
/* mockup .field-input atom, scoped */
body.v4 .cvA .field-input{width:100%;font-family:inherit;font-size:13.5px;color:var(--g-ink-1);background:var(--paper-3);border:1px solid var(--rule);border-radius:10px;padding:10px 13px;outline:none;}
body.v4 .cvA .field-input::placeholder{color:var(--ink-4);}
/* structural: house focus ring */
body.v4 .cvA .field-input:focus{border-color:var(--g-blue);box-shadow:0 0 0 3px var(--g-blue-soft);}
/* mockup .pill-soft atom renamed .cva-pill (the app-wide TAGS/PILLS rule
   forces background rgba(255,255,255,.6) !important on .pill-soft, which
   would kill the mockup pastels); declarations verbatim, tone classes
   keep their mockup names */
body.v4 .cvA .cva-pill{display:inline-flex;align-items:center;font-size:11px;font-weight:600;padding:3px 10px;border-radius:var(--r-pill);text-transform:none;letter-spacing:0;}
body.v4 .cvA .pill-sky{background:var(--c-sky);color:var(--on-sky);}
body.v4 .cvA .pill-mint{background:var(--c-mint);color:var(--on-mint);}
body.v4 .cvA .pill-butter{background:var(--c-butter);color:var(--on-butter);}
/* mockup .btn atoms, scoped (the v4 house buttons differ) */
body.v4 .cvA .btn{font-family:inherit;font-size:13px;font-weight:600;border-radius:var(--r-pill);cursor:pointer;border:none;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;letter-spacing:-.005em;}
body.v4 .cvA .btn-primary{background:var(--g-cherry);color:var(--on-accent);box-shadow:0 1px 2px rgba(184,0,43,.25);}
body.v4 .cvA .btn-primary:hover{background:var(--cherry-2);}
body.v4 .cvA .btn-secondary{background:var(--paper-3);color:var(--g-ink-1);border:1px solid var(--rule);}
/* structural: busy/disabled state */
body.v4 .cvA .btn:disabled{opacity:.6;cursor:default;}

/* ════ 2 · STUDIO SCHEDULE - CENTRED HEADER (.h2b) ════ */
body.v4 .h2b{
  width:100%;
  background:rgba(255,255,255,.70);
  -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:14px 20px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;
}
/* structural dark surface (mockup is light-only; value = dark --paper) */
body.v4.dark .h2b{background:rgba(44,44,50,.62);}
/* structural: flex-wrap + min-width guard - live installs can carry more
   source tabs than the mockup's two */
body.v4 .h2b-l{display:flex;align-items:center;gap:10px;justify-self:start;flex-wrap:wrap;min-width:0;}
body.v4 .h2b-c{display:flex;align-items:center;gap:6px;justify-self:center;}
body.v4 .h2b-date{text-align:center;padding:0 10px;}
body.v4 .h2b-big{font-size:19px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--g-ink-1);}
body.v4 .h2b-cap{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:1px;}
body.v4 .h2b-cap .cur{color:var(--good);}
body.v4 .h2b-r{display:flex;align-items:center;gap:10px;justify-self:end;}
body.v4 .h2b-chev{width:34px;height:34px;border-radius:50%;border:1px solid var(--rule);background:var(--paper-3);cursor:pointer;color:var(--ink-2);font-size:15px;display:grid;place-items:center;font-family:inherit;}
body.v4 .h2b-chev:hover{background:var(--surface);color:var(--g-ink-1);}
/* shared header atoms (mockup .ssx-*), scoped under .h2b */
body.v4 .h2b .ssx-sel{
  font-family:inherit;font-size:12.5px;font-weight:500;color:var(--ink-2);
  background:var(--paper-3);border:1px solid var(--rule);border-radius:var(--r-pill);
  padding:7px 30px 7px 14px;outline:none;cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236e6e73' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
}
body.v4 .h2b .ssx-tabs{
  display:inline-flex;background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--rule);border-radius:var(--r-pill);padding:3px;gap:2px;
}
/* structural dark surface */
body.v4.dark .h2b .ssx-tabs{background:rgba(44,44,50,.55);}
body.v4 .h2b .ssx-tab{font-size:12.5px;font-weight:500;color:var(--ink-3);padding:6px 14px;border-radius:var(--r-pill);cursor:pointer;}
/* mockup var(--black) = the sidebar ink (production --black token) */
body.v4 .h2b .ssx-tab.on{background:var(--black);color:var(--on-accent);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.14);}
/* mockup .ssx-today base + Option 2B's inline border/background override, folded */
body.v4 .h2b .ssx-today{border:1px solid var(--rule);background:var(--paper-3);cursor:pointer;font-family:inherit;font-size:12px;font-weight:500;color:var(--ink-2);padding:6px 14px;border-radius:var(--r-pill);}
body.v4 .h2b .ssx-today:hover{background:rgba(0,0,0,.05);}
/* mockup .btn atoms for the header's primary action */
body.v4 .h2b .btn{font-family:inherit;font-size:13px;font-weight:600;border-radius:var(--r-pill);cursor:pointer;border:none;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;letter-spacing:-.005em;}
body.v4 .h2b .btn-primary{background:var(--g-cherry);color:var(--on-accent);box-shadow:0 1px 2px rgba(184,0,43,.25);}
body.v4 .h2b .btn-primary:hover{background:var(--cherry-2);}
/* structural consequence: the 2B header is a self-contained rounded bar
   (the mockup shows it detached), so the STUD-4 "one card" band geometry
   underneath changes - the header gets breathing room and the first
   week grid recovers its top radii (STUD-4 had squared them to butt
   against the old subbar band). */
body.v4 .ss-v2 .h2b{margin-bottom:10px;}
body.v4 .ss-v2 .ss-weekblock:first-of-type .ss-grid{border-top:1px solid var(--rule);border-radius:var(--r) var(--r) 0 0;}

/* ── MOBILE: intel-convert-card (V3-PICKS-B3 1A) ── */
@media (max-width: 767.98px){
  /* The overlay (.ep-modal-overlay family) already bottom-anchors on
     mobile; reshape the card into the house bottom sheet: full width,
     top radii, drag handle, slide-up, safe-area footer. */
  body.v4 .cvA{
    position:relative;max-width:100%;
    border-radius:var(--r-xl) var(--r-xl) 0 0;border-bottom:none;
    padding-top:10px;
    animation:mSheetUp 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  }
  body.v4 .cvA::before{
    content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);
    width:40px;height:4.5px;border-radius:var(--r-pill);
    background:var(--ink-4);opacity:.55;pointer-events:none;z-index:5;
  }
  body.v4 .cvA .field-input{font-size:16px;min-height:44px;}   /* stop iOS zoom + touch target */
  body.v4 .cvA .seg button{min-height:40px;}
  body.v4 .cvA-foot{padding:14px 18px calc(14px + env(safe-area-inset-bottom,0px));}
  body.v4 .cvA-foot .btn{min-height:44px;flex:1;justify-content:center;}
}

/* ── MOBILE: studio header (V3-PICKS-B3 2B) ── */
@media (max-width: 767.98px){
  /* The three desktop clusters restack: centred date row first (chevrons
     at the edges = thumb-reachable), then sources + weeks, then Today +
     New Entry full-width. 44px targets per the mobile doctrine. */
  body.v4 .h2b{display:flex;flex-wrap:wrap;gap:10px;padding:12px 14px;}
  body.v4 .h2b-c{order:-1;flex:1 1 100%;justify-content:space-between;}
  body.v4 .h2b-date{flex:1;}
  body.v4 .h2b-l{flex:1 1 100%;}
  body.v4 .h2b-r{flex:1 1 100%;gap:8px;}
  body.v4 .h2b-chev{width:44px;height:44px;}
  body.v4 .h2b .ssx-tab{min-height:40px;display:inline-flex;align-items:center;-webkit-tap-highlight-color:transparent;}
  body.v4 .h2b .ssx-sel{min-height:44px;font-size:16px;}       /* stop iOS zoom */
  body.v4 .h2b .ssx-today{min-height:44px;padding:6px 18px;}
  body.v4 .h2b .btn{min-height:44px;flex:1;justify-content:center;}
}

/* ── V3-FU1: studio multi-week = one continuous grid ─────────────────
   Peter 2026-06-07: selecting multiple weeks must show a single long
   list of days - no per-week caption bands or dividers. studio.js now
   renders ONE grid for the whole span, so the per-week .ss-curweek
   wrapper no longer exists in multi-week; the current-week emphasis
   lands per day-head row via .ss-cwd (same look as the .ss-curweek
   rules in the STUD-2 block). 1-week view is unchanged. */
body.v4 .ss-day-head.ss-cwd { position: relative; }
body.v4 .ss-day-head.ss-cwd::after {
  content: '';
  position: absolute;
  left: 14px;
  bottom: 9px;
  width: 26px;
  height: 3px;
  border-radius: var(--r-pill);
  background: rgba(0, 113, 227, 0.28);
}
body.v4 .ss-day-head.ss-cwd .ss-dow { color: var(--ink-2); }
body.v4 .ss-today-row.ss-day-head.ss-cwd {
  background: rgba(0, 113, 227, 0.07);
  border-radius: var(--r-sm);
}
/* today keeps the number circle, not the underline (ST2-1 parity) */
body.v4 .ss-today-row.ss-day-head.ss-cwd::after { content: none; }
body.v4 .ss-today-row.ss-day-head.ss-cwd .ss-dow { color: var(--blue); }
body.v4.dark .ss-day-head.ss-cwd::after { background: rgba(56, 151, 255, 0.40); }
body.v4.dark .ss-today-row.ss-day-head.ss-cwd { background: rgba(56, 151, 255, 0.14); }

/* -- WA-KEITH-W1 -- WhatsApp + Keith link flow (Settings card +
   onboarding step 4). Shared component classes from js/lib/wa-link.js.
   Tokens/rgba only - no new hex, no !important. */
body.v4 .wa-sub {
  font-size: 13px;
  color: var(--g-ink-4, var(--ink-3));
  line-height: 1.5;
}
body.v4 .wa-state { display: block; }
body.v4 .wa-state-t {
  font-weight: 700;
  font-size: 14px;
  color: var(--ink-1);
}
body.v4 .wa-grey {
  background: rgba(0, 0, 0, 0.04);
  border: 1px dashed rgba(0, 0, 0, 0.14);
  border-radius: var(--r-sm);
  padding: 14px;
}
body.v4 .wa-linked-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
body.v4 .wa-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(46, 125, 50, 0.12);
  color: var(--good-fg);
  font-weight: 800;
  flex: 0 0 28px;
}
body.v4 .wa-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 6px;
  color: var(--ink-1);
  background: rgba(0, 0, 0, 0.05);
  border-radius: var(--r-sm);
  padding: 14px 18px;
  text-align: center;
  margin: 12px 0 10px;
  user-select: all;
}
body.v4 .wa-btn-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 12px;
}
body.v4 a.wa-open-btn { text-decoration: none; display: inline-flex; align-items: center; }
body.v4 .wa-err {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--cherry);
}
body.v4 .ob-wa-host {
  text-align: left;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  margin: 0 0 22px;
}
body.v4.dark .wa-grey { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.16); }
body.v4.dark .wa-code { background: rgba(255, 255, 255, 0.07); }
body.v4.dark .ob-wa-host { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.10); }

/* -- MOBILE: settings-whatsapp -- additive only, desktop untouched */
@media (max-width: 768px) {
  body.v4 .wa-code {
    font-size: 28px;
    letter-spacing: 5px;
    padding: 12px 10px;
  }
  body.v4 .wa-btn-row { flex-direction: column; align-items: stretch; }
  body.v4 .wa-btn-row .btn-v4,
  body.v4 .wa-btn-row a.wa-open-btn {
    min-height: 44px;
    justify-content: center;
    text-align: center;
    width: 100%;
  }
}

/* -- MOBILE: onboarding-whatsapp -- step 4 host on small phones */
@media (max-width: 480px) {
  body.v4 .ob-wa-host { padding: 12px; margin-bottom: 16px; }
  body.v4 .wa-code { font-size: 24px; letter-spacing: 4px; }
}

/* -- BATCH C (C7): onboarding Back link - quiet text control, top-left of the
   card on steps 2-7. Inherits .ob-skip's type/colour; only position differs. */
body.v4 .ob-skip.ob-back {
  top: 18px;
  left: 24px;
  bottom: auto;
}

/* -- MOBILE: onboarding-back -- keep the back control pinned top-left (the
   base mobile rule turns .ob-skip static/centred; Back must not inherit that) */
@media (max-width: 480px) {
  body.v4 .ob-skip.ob-back {
    position: absolute;
    top: 12px; left: 14px; bottom: auto;
    margin: 0;
    padding: 10px 8px;   /* keeps a ~44px touch target with the line height */
    text-align: left;
    display: inline-block;
  }
}


/* ═══════════════════════════════════════════════════════════════
   Connections - Brain Protocol consent surface (BP v2 port wave P2)
   Plain-language grant review: who asked, what they can do (cell by
   cell), approve / disconnect. Tokens only. Spec: _SPEC_BP_V2_PORT.md
   ═══════════════════════════════════════════════════════════════ */
.bpc-list { display: flex; flex-direction: column; gap: 14px; max-width: 860px; }
.bpc-card { padding: 18px 20px; }
.bpc-card.bpc-dim { opacity: 0.62; }
.bpc-head { display: flex; align-items: center; gap: 12px; }
.bpc-mark {
  width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-2); border: 1px solid var(--line);
  font-size: 13px; font-weight: 750; color: var(--ink); letter-spacing: 0.04em;
}
.bpc-meta { min-width: 0; }
.bpc-name { font-size: 16.5px; font-weight: 720; color: var(--ink); }
.bpc-sub { font-size: 12px; color: var(--ink-mid); margin-top: 2px; }
.bpc-pill {
  margin-left: auto; flex: 0 0 auto; font-size: 11.5px; font-weight: 650;
  padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--bg-2); color: var(--ink-mid); white-space: nowrap;
}
.bpc-pill.bpc-st-pending { background: rgba(192, 122, 40, 0.12); color: var(--warn); border-color: rgba(192, 122, 40, 0.28); }
.bpc-pill.bpc-st-active  { background: rgba(61, 139, 94, 0.12); color: var(--good); border-color: rgba(61, 139, 94, 0.28); }
.bpc-pill.bpc-st-revoked { background: rgba(184, 0, 43, 0.08); color: var(--cherry); border-color: rgba(184, 0, 43, 0.20); }
.bpc-cells-label {
  margin: 16px 0 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-soft);
}
.bpc-cells { display: flex; flex-direction: column; gap: 6px; }
.bpc-cell {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 10px;
  background: var(--bg-2); border: 1px solid var(--line-soft, var(--line));
}
.bpc-cell-ic { width: 15px; height: 15px; flex: 0 0 auto; color: var(--good); }
.bpc-cell-text { font-size: 13.5px; color: var(--ink); min-width: 0; }
.bpc-cell-sens {
  margin-left: auto; flex: 0 0 auto; font-size: 10.5px; font-weight: 650;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(0, 113, 227, 0.10); color: var(--blue);
  border: 1px solid rgba(0, 113, 227, 0.20); white-space: nowrap;
}
.bpc-floor {
  margin-top: 12px; padding: 10px 12px; border-radius: 10px;
  font-size: 12.5px; color: var(--ink-mid);
  background: rgba(184, 0, 43, 0.05); border: 1px solid rgba(184, 0, 43, 0.12);
}
.bpc-fp { margin-top: 10px; font-size: 11px; color: var(--ink-soft); font-family: ui-monospace, monospace; word-break: break-all; }
.bpc-actions { display: flex; gap: 10px; margin-top: 14px; }
.bpc-actions:empty { display: none; }
.bpc-btn { cursor: pointer; }

/* P3: write-back undo list + removal receipts (same plain-language rows) */
.bpc-section { margin-top: 26px; max-width: 860px; }
.bpc-section-title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-soft);
}
.bpc-section-sub { font-size: 12.5px; color: var(--ink-mid); margin: 4px 0 10px; }
.bpc-rows { display: flex; flex-direction: column; gap: 6px; }
.bpc-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  background: var(--bg-2); border: 1px solid var(--line-soft, var(--line));
}
.bpc-row.bpc-row-done { opacity: 0.62; }
.bpc-row-main { min-width: 0; flex: 1; }
.bpc-row-title { font-size: 13.5px; font-weight: 650; color: var(--ink); }
.bpc-row-sub { font-size: 12px; color: var(--ink-mid); margin-top: 1px; }
.bpc-undo { flex: 0 0 auto; cursor: pointer; min-height: 32px; }

/* ── MOBILE: connections ── */
@media (max-width: 768px) {
  .bpc-card { padding: 14px; }
  .bpc-head { flex-wrap: wrap; }
  .bpc-pill { margin-left: 52px; order: 4; }
  .bpc-cell { min-height: 44px; }
  .bpc-cell-text { font-size: 13px; }
  .bpc-actions { flex-direction: column; }
  .bpc-actions .bpc-btn { width: 100%; min-height: 44px; }
  /* P3 rows: 44px targets, undo stays reachable with one thumb */
  .bpc-row { min-height: 44px; flex-wrap: wrap; }
  .bpc-undo { min-height: 44px; min-width: 44px; }
}
@media (max-width: 480px) {
  .bpc-cell-sens { display: none; }   /* glance-and-act: the sentence carries the meaning */
  .bpc-fp { display: none; }
  .bpc-row-sub { font-size: 11.5px; }
}

/* ============================================================
   Travel Sprint (Wave 242) - scoped .ts-* + sprint grid chips.
   Tokens only (no hex / no !important). Option C two-pane board
   with Option A dotted timeline spine.
   ============================================================ */
body.v4 .studio-tabs{ margin-bottom:14px; }

body.v4 .ts-wrap{ display:block; }
body.v4 .ts-loading{ padding:40px; text-align:center; color:var(--g-ink-3); font-size:13px; }

/* top bar: sprint switcher + plan button */
body.v4 .ts-topbar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
body.v4 .ts-select{ appearance:none; border:1px solid var(--g-rule); background:var(--g-surface);
  color:var(--g-ink-1); font:inherit; font-size:14px; font-weight:600; padding:9px 30px 9px 13px; border-radius:var(--g-r); cursor:pointer; }
body.v4 .ts-range{ font-size:12.5px; color:var(--g-ink-3); }
body.v4 .ts-spacer{ flex:1; }

/* empty states */
body.v4 .ts-empty{ background:var(--g-surface); border:1px solid var(--g-rule); border-radius:var(--g-r-lg);
  box-shadow:var(--g-sh); padding:48px 28px; text-align:center; }
body.v4 .ts-empty-ic{ font-size:34px; margin-bottom:10px; }
body.v4 .ts-empty-h{ font-size:16px; font-weight:800; letter-spacing:-.01em; color:var(--g-ink-1); }
body.v4 .ts-empty-sub{ font-size:13px; color:var(--g-ink-3); max-width:440px; margin:6px auto 16px; }
body.v4 .ts-tl-empty{ padding:36px 20px; text-align:center; border:1px dashed var(--g-rule); border-radius:var(--g-r); background:var(--g-paper-3); }

/* board */
body.v4 .ts-board{ display:grid; gap:18px; }
@media(min-width:880px){ body.v4 .ts-board{ grid-template-columns:300px 1fr; align-items:start; } }

/* rail */
body.v4 .ts-rail{ display:grid; gap:14px; }
body.v4 .ts-card{ background:var(--g-surface); border:1px solid var(--g-rule); border-radius:var(--g-r);
  box-shadow:var(--g-sh); padding:14px 16px; }
body.v4 .ts-card-h{ margin:0 0 10px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--g-ink-4); font-weight:700; }
body.v4 .ts-quiet{ font-size:12px; color:var(--g-ink-4); }

/* adders */
body.v4 .ts-adders{ display:flex; flex-wrap:wrap; gap:8px; }
body.v4 .ts-addchip{ display:inline-flex; align-items:center; gap:7px; min-height:38px; border:1px dashed var(--g-rule);
  background:var(--g-surface); border-radius:var(--g-r-xl); padding:8px 13px; font:inherit; font-size:13px; font-weight:600; color:var(--g-ink-2); cursor:pointer; }
body.v4 .ts-addchip:hover{ background:var(--g-blue-soft); border-color:var(--g-blue); }
body.v4 .ts-add-ic{ width:22px; height:22px; border-radius:7px; display:grid; place-items:center; font-size:12px; color:var(--g-surface); }
body.v4 .ts-add-ic.t-travel{ background:var(--g-blue); }
body.v4 .ts-add-ic.t-accommodation{ background:var(--g-lilac); }
body.v4 .ts-add-ic.t-interview{ background:var(--g-cherry); }
body.v4 .ts-add-ic.t-activity{ background:var(--g-green); }

/* who / avatars */
body.v4 .ts-who{ display:flex; flex-wrap:wrap; }
body.v4 .ts-av{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; color:var(--g-surface);
  font-size:11px; font-weight:700; border:2px solid var(--g-surface); margin-left:-6px; }
body.v4 .ts-av:first-child{ margin-left:0; }
body.v4 .ts-av.av-pm{ background:var(--g-green); }
body.v4 .ts-av.av-ct{ background:var(--g-blue); }
body.v4 .ts-av.av-ch{ background:var(--g-lilac); }
body.v4 .ts-av.av-co{ background:var(--g-orange); }
body.v4 .ts-av.av-al{ background:var(--g-butter); }

/* locations */
body.v4 .ts-loc{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--g-rule-soft); }
body.v4 .ts-loc:last-of-type{ border-bottom:0; }
body.v4 .ts-loc-name{ flex:1; font-weight:700; font-size:13.5px; color:var(--g-ink-1); }
body.v4 .ts-loc.is-red .ts-loc-name{ color:var(--g-cherry); }
body.v4 .ts-loc-checks{ display:flex; gap:5px; }
body.v4 .ts-chk{ font-size:10px; font-weight:700; padding:2px 8px; border-radius:var(--g-r-xl); }
body.v4 .ts-chk.yes{ background:var(--g-green-bg); color:var(--g-green); }
body.v4 .ts-chk.no{ background:var(--g-cherry-bg); color:var(--g-cherry); }
body.v4 .ts-loc-note{ font-size:11.5px; color:var(--g-ink-3); margin-top:9px; }

/* prospects parking */
body.v4 .ts-rps{ display:flex; flex-direction:column; gap:2px; }
body.v4 .ts-rp{ display:flex; align-items:center; gap:8px; min-height:40px; padding:8px 0; border-bottom:1px solid var(--g-rule-soft); cursor:pointer; }
body.v4 .ts-rp:last-child{ border-bottom:0; }
body.v4 .ts-rp:hover .ts-rp-name{ color:var(--g-blue); }
body.v4 .ts-rp-name{ flex:1; font-weight:600; font-size:13px; color:var(--g-ink-1); }

/* timeline + dotted spine */
body.v4 .ts-timeline{ min-width:0; }
body.v4 .ts-tl{ position:relative; margin-left:6px; padding-left:24px; border-left:2px dotted var(--g-rule); }
body.v4 .ts-daygrp{ position:relative; margin-bottom:6px; }
body.v4 .ts-dayhead{ position:relative; display:flex; align-items:center; gap:10px; margin:16px 0 12px; }
body.v4 .ts-dayhead::before{ content:""; position:absolute; left:-31px; top:50%; width:10px; height:10px; border-radius:50%;
  background:var(--g-cherry); transform:translateY(-50%); box-shadow:0 0 0 4px var(--g-canvas); }
body.v4 .ts-dnum{ font-size:14px; font-weight:800; letter-spacing:-.01em; color:var(--g-ink-1); }
body.v4 .ts-ddow{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--g-ink-4); }
body.v4 .ts-dsum{ margin-left:auto; font-size:12px; color:var(--g-ink-3); }

/* typed panels */
body.v4 .ts-panel{ background:var(--g-surface); border:1px solid var(--g-rule); border-left-width:4px;
  border-radius:var(--g-r); box-shadow:var(--g-sh); margin-bottom:12px; overflow:hidden; cursor:pointer; }
body.v4 .ts-panel:hover{ box-shadow:var(--g-sh-2); }
body.v4 .ts-panel.kind-travel{ border-left-color:var(--g-blue); }
body.v4 .ts-panel.kind-accommodation{ border-left-color:var(--g-lilac); }
body.v4 .ts-panel.kind-interview{ border-left-color:var(--g-cherry); }
body.v4 .ts-panel.kind-activity{ border-left-color:var(--g-green); }
body.v4 .ts-ptop{ display:flex; align-items:flex-start; gap:12px; padding:13px 15px; }
body.v4 .ts-ptag{ flex:none; width:38px; height:38px; border-radius:10px; display:grid; place-items:center; font-size:17px; }
body.v4 .ts-ptag.t-travel{ background:var(--g-blue-bg); }
body.v4 .ts-ptag.t-accommodation{ background:var(--g-lilac-bg); }
body.v4 .ts-ptag.t-interview{ background:var(--g-cherry-bg); }
body.v4 .ts-ptag.t-activity{ background:var(--g-green-bg); }
body.v4 .ts-pmid{ flex:1; min-width:0; }
body.v4 .ts-pkind{ font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; font-weight:700; color:var(--g-ink-4); }
body.v4 .ts-ptitle{ font-size:15.5px; font-weight:700; letter-spacing:-.01em; color:var(--g-ink-1); margin:1px 0 2px; }
body.v4 .ts-route{ font-size:14px; font-weight:700; color:var(--g-ink-1); margin:1px 0 2px; }
body.v4 .ts-arr{ color:var(--g-ink-4); font-weight:600; }
body.v4 .ts-pwhen{ font-size:12.5px; color:var(--g-ink-3); }
body.v4 .ts-pside{ flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
body.v4 .ts-pmeta{ padding:0 15px 13px 65px; display:grid; gap:6px; }
body.v4 .ts-metarow{ display:flex; gap:12px; font-size:12.5px; color:var(--g-ink-2); align-items:baseline; }
body.v4 .ts-metarow .ts-k{ flex:none; width:74px; color:var(--g-ink-4); font-size:10.5px; letter-spacing:.03em; text-transform:uppercase; font-weight:700; }
body.v4 .ts-metarow .ts-v{ flex:1; min-width:0; }
body.v4 .ts-subnote{ font-size:12.5px; color:var(--g-ink-3); }
body.v4 .ts-redtext{ color:var(--g-cherry); }

/* modal extras (sit on top of the shared aiceo-modal chrome) */
body.v4 .ts-field{ margin-bottom:12px; }
body.v4 .ts-field .eyebrow{ font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:var(--g-ink-4); margin-bottom:5px; }
body.v4 .ts-row{ display:flex; gap:10px; flex-wrap:wrap; }
body.v4 .ts-row .ts-field{ flex:1; min-width:120px; }
body.v4 .ts-subhead{ font-size:12px; font-weight:700; color:var(--g-ink-2); margin:6px 0 8px; padding-top:8px; border-top:1px solid var(--g-rule-soft); }
body.v4 .ts-seg{ display:inline-flex; gap:0; border:1px solid var(--g-rule); border-radius:var(--g-r-xl); overflow:hidden; }
body.v4 .ts-segbtn{ appearance:none; border:0; background:var(--g-surface); color:var(--g-ink-2); font:inherit; font-size:12.5px; font-weight:600; padding:8px 14px; min-height:40px; cursor:pointer; }
body.v4 .ts-segbtn + .ts-segbtn{ border-left:1px solid var(--g-rule); }
body.v4 .ts-segbtn.on{ background:var(--g-ink-1); color:var(--g-surface); }
body.v4 .ts-checks{ display:grid; gap:6px; }
body.v4 .ts-check{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--g-ink-1); min-height:32px; cursor:pointer; }
body.v4 .ts-hint{ font-size:11.5px; color:var(--g-ink-3); margin-top:-4px; }
body.v4 .ts-err{ font-size:12.5px; color:var(--g-cherry); margin-top:8px; }
body.v4 .ts-foot-gap{ flex:1; }
body.v4 .ts-modeblk{ margin-top:4px; }

/* sprint chips on the week grid (extend the existing ss-event family) */
body.v4 .ss-event.ss-sprint-int{ background:var(--g-cherry-bg); color:var(--g-cherry); border-color:var(--g-cherry); }
body.v4 .ss-event.ss-sprint-trav{ background:var(--g-blue-bg); color:var(--g-blue); border-color:var(--g-blue); }

/* ── MOBILE: travel-sprint ── */
@media (max-width:880px){
  body.v4 .ts-board{ grid-template-columns:1fr; }
}
@media (max-width:768px){
  body.v4 .ts-topbar{ gap:8px; }
  body.v4 .ts-select{ flex:1; min-width:0; }
  body.v4 .ts-pmeta{ padding-left:15px; }
  body.v4 .ts-metarow{ flex-direction:column; gap:1px; }
  body.v4 .ts-metarow .ts-k{ width:auto; }
  body.v4 .ts-tl{ margin-left:2px; padding-left:18px; }
  body.v4 .ts-dayhead::before{ left:-25px; }
  body.v4 .ts-modal .form-input{ font-size:16px; }   /* stop iOS zoom-on-focus */
  body.v4 .ts-segbtn{ flex:1; }
  body.v4 .ts-addchip{ min-height:44px; }
  body.v4 .ts-rp{ min-height:44px; }
  body.v4 .ts-staycont{ min-height:44px; }   /* 44px tap target for the stay strip */
}

/* Travel Sprint round 3 (Wave 242): status strip + collapsed past rows. Tokens only. */
body.v4 .ts-strip{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:var(--g-surface); border:1px solid var(--g-rule); border-radius:var(--g-r); box-shadow:var(--g-sh); padding:12px 16px; margin-bottom:16px; }
body.v4 .ts-strip-cell{ display:flex; flex-direction:column; gap:1px; }
body.v4 .ts-strip-k{ font-size:10px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--g-ink-4); }
body.v4 .ts-strip-v{ font-size:14.5px; font-weight:700; color:var(--g-ink-1); }
body.v4 .ts-strip-arrow{ color:var(--g-ink-4); font-weight:700; font-size:16px; }
body.v4 .ts-strip-spacer{ flex:1; }
body.v4 .ts-strip-warn{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--g-ink-3); }

body.v4 .ts-daygrp.is-past{ opacity:.9; }
body.v4 .ts-dayhead.is-past::before{ background:var(--g-ink-4); }
body.v4 .ts-dayhead.is-past .ts-dnum, body.v4 .ts-dayhead.is-past .ts-ddow{ color:var(--g-ink-4); }
body.v4 .ts-pastrow{ display:flex; align-items:center; gap:10px; min-height:40px; padding:8px 12px; margin-bottom:6px; border:1px solid var(--g-rule-soft); border-radius:var(--g-r-sm); background:var(--g-paper-3); color:var(--g-ink-3); cursor:pointer; }
body.v4 .ts-pastrow:hover{ background:var(--g-surface); }
body.v4 .ts-pastrow-ic{ flex:none; opacity:.6; font-size:14px; filter:grayscale(1); }
body.v4 .ts-pastrow-name{ flex:1; min-width:0; font-weight:600; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.v4 .ts-pastrow-time{ flex:none; font-size:11.5px; color:var(--g-ink-4); }
body.v4 .ts-pastrow-tag{ flex:none; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--g-ink-4); background:var(--g-rule-soft); padding:2px 8px; border-radius:var(--g-r-xl); }

/* Accommodation continuation strip (Peter 2026-06-28): a slim row on every
   covered night after check-in so a stay reads as continuous. Lilac accent
   to match the accommodation card; lighter than a full panel. Tokens only. */
body.v4 .ts-staycont{ display:flex; align-items:center; gap:9px; min-height:36px; padding:7px 12px; margin-bottom:8px;
  border:1px solid var(--g-rule-soft); border-left:3px solid var(--g-lilac); border-radius:var(--g-r-sm);
  background:var(--g-lilac-bg); color:var(--g-ink-2); cursor:pointer; }
body.v4 .ts-staycont:hover{ box-shadow:var(--g-sh); }
/* Past stay-continuation strips (Peter 2026-06-29): a night before today must
   read GREY like the other past items, not keep its lilac accent. Override the
   lilac border + background + ink to the grey/past palette. Covers the strip's
   own .is-past AND a strip inside a past day block (.ts-day.is-past). */
body.v4 .ts-staycont.is-past,
body.v4 .ts-day.is-past .ts-staycont{
  border-color:var(--g-rule-soft); border-left-color:var(--g-ink-4);
  background:var(--g-paper-3); color:var(--g-ink-3); opacity:1;
}
body.v4 .ts-staycont.is-past .ts-staycont-name,
body.v4 .ts-day.is-past .ts-staycont .ts-staycont-name{ color:var(--g-ink-3); }
body.v4 .ts-staycont.is-past .ts-staycont-ic,
body.v4 .ts-day.is-past .ts-staycont .ts-staycont-ic{ filter:grayscale(1); opacity:.6; }
body.v4 .ts-staycont-ic{ flex:none; font-size:13px; opacity:.85; }
body.v4 .ts-staycont-name{ flex:1; min-width:0; font-weight:600; font-size:12.5px; color:var(--g-ink-1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.v4 .ts-staycont-tag{ flex:none; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--g-ink-4); }

@media (max-width:768px){
  body.v4 .ts-strip{ gap:10px; }
  body.v4 .ts-strip-arrow, body.v4 .ts-strip-spacer{ display:none; }
  body.v4 .ts-strip-warn{ width:100%; }
}

/* Travel Sprint: give meta labels room so "Booking ref" etc. don't wrap (Peter 2026-06-21). */
body.v4 .ts-metarow{ align-items:baseline; }
/* Label column sizes to its content with a 92px floor (was a fixed 92px, which
   let long labels like "Guest location" / "Studio address" overflow and sit
   flush against the value). width:auto + min-width keeps short labels aligned
   while long ones grow, so the row gap always shows. */
body.v4 .ts-metarow .ts-k{ width:auto; min-width:92px; white-space:nowrap; }

/* Travel Sprint round 4: interactive locations + location segments. Tokens only. */
body.v4 .ts-loc-name{ flex:1; text-align:left; background:none; border:0; padding:0; font:inherit; font-weight:700; font-size:13.5px; color:var(--g-ink-1); cursor:pointer; }
body.v4 .ts-loc.is-red .ts-loc-name{ color:var(--g-cherry); }
body.v4 .ts-loc-home{ font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--g-green); background:var(--g-green-bg); padding:1px 6px; border-radius:var(--g-r-xl); margin-left:6px; }
body.v4 .ts-loc-x{ flex:none; background:none; border:0; color:var(--g-ink-4); font-size:18px; line-height:1; cursor:pointer; padding:0 2px; min-height:32px; }
body.v4 .ts-loc-x:hover{ color:var(--g-cherry); }
body.v4 .ts-locadd{ display:flex; gap:8px; margin-top:10px; }
body.v4 .ts-locadd-in{ flex:1; min-width:0; }

body.v4 .ts-locseg{ position:relative; margin-bottom:6px; }
body.v4 .ts-locseg-head{ position:relative; display:flex; align-items:center; gap:10px; margin:16px 0 12px; }
body.v4 .ts-locseg-head::before{ content:""; position:absolute; left:-31px; top:50%; width:12px; height:12px; border-radius:50%; background:var(--g-cherry); transform:translateY(-50%); box-shadow:0 0 0 4px var(--g-canvas); }
body.v4 .ts-locseg-head.is-past::before{ background:var(--g-ink-4); }
body.v4 .ts-locseg-loc{ font-size:15px; font-weight:800; letter-spacing:-.01em; color:var(--g-ink-1); }
body.v4 .ts-locseg.is-past .ts-locseg-loc{ color:var(--g-ink-4); }
body.v4 .ts-locseg-range{ font-size:12px; color:var(--g-ink-4); }
@media (max-width:768px){ body.v4 .ts-locseg-head::before{ left:-25px; } }

/* Travel Sprint round 5: per-day date circles on the spine + activity categories. Tokens only. */
body.v4 .ts-day{ display:flex; gap:12px; align-items:flex-start; margin-bottom:8px; }
body.v4 .ts-day-node{ flex:none; margin-left:-31px; width:40px; height:40px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--g-surface); border:2px solid var(--g-rule); box-shadow:0 0 0 4px var(--g-canvas); }
body.v4 .ts-day-num{ font-size:14px; font-weight:800; line-height:1; color:var(--g-ink-1); }
body.v4 .ts-day-mon{ font-size:8px; font-weight:700; letter-spacing:.04em; color:var(--g-ink-4); margin-top:1px; }
body.v4 .ts-day-body{ flex:1; min-width:0; }
body.v4 .ts-day.is-past .ts-day-num{ color:var(--g-ink-4); }

body.v4 .ts-catseg{ display:flex; flex-wrap:wrap; gap:6px; }
body.v4 .ts-catbtn{ appearance:none; border:1px solid var(--g-rule); background:var(--g-surface); color:var(--g-ink-2); font:inherit; font-size:12.5px; font-weight:600; padding:7px 12px; min-height:38px; border-radius:var(--g-r-xl); cursor:pointer; }
body.v4 .ts-catbtn.on{ background:var(--g-ink-1); color:var(--g-surface); border-color:var(--g-ink-1); }
@media (max-width:768px){ body.v4 .ts-day-node{ margin-left:-25px; width:36px; height:36px; } }

/* Travel Sprint round 6: each location is a bounding panel; the dotted day-spine
   now lives INSIDE it (Peter 2026-06-21). Tokens only. */
body.v4 .ts-tl{ padding-left:0; border-left:0; margin-left:0; }
body.v4 .ts-locseg{ background:var(--g-surface); border:1px solid var(--g-rule); border-radius:var(--g-r-lg); box-shadow:var(--g-sh); padding:14px 16px 12px; margin-bottom:14px; }
body.v4 .ts-locseg-head{ margin:0 0 12px; }
body.v4 .ts-locseg-head::before{ content:none; }
body.v4 .ts-locseg-days{ position:relative; margin-left:14px; padding-left:24px; border-left:2px dotted var(--g-rule); }
body.v4 .ts-locseg .ts-day-node{ box-shadow:0 0 0 4px var(--g-surface); }
body.v4 .ts-locseg .ts-panel{ box-shadow:none; }
body.v4 .ts-locseg .ts-panel:hover{ box-shadow:none; background:var(--g-paper-3); }
body.v4 .ts-locseg.is-past{ opacity:.92; }
@media (max-width:768px){ body.v4 .ts-locseg-days{ margin-left:6px; padding-left:18px; } }

/* Travel Sprint round 7: new-location input + date-required block. Tokens only. */
body.v4 .ts-locnew{ margin-top:6px; }
body.v4 .ts-locseg-days-nodate{ border-left:0; padding-left:0; margin-left:0; }
body.v4 .ts-locseg-nodate{ border-style:dashed; }

/* Travel Sprint round 9: empty-date items as dotted ghost panels on the bg. */
body.v4 .ts-locseg-nodate{ background:transparent; box-shadow:none; border:2px dotted var(--g-rule); }
body.v4 .ts-locseg-nodate .ts-panel{ background:transparent; border-style:dashed; }

/* Travel Sprint round 10: free-day placeholder within a stay. Tokens only. */
body.v4 .ts-freeday{ border:1.5px dotted var(--g-rule); border-radius:var(--g-r-sm); padding:11px 13px; font-size:12px; font-style:italic; color:var(--g-ink-4); }
body.v4 .ts-day.is-free .ts-day-node{ opacity:.55; }

/* Travel Sprint round 11: free days BETWEEN location blocks - bare dotted row on the page bg. */
body.v4 .ts-betweenday{ display:flex; gap:12px; align-items:center; margin:0 0 14px 30px; }
body.v4 .ts-betweenday .ts-day-node{ margin-left:0; box-shadow:none; border-style:dotted; opacity:.7; }
body.v4 .ts-freeday-bare{ flex:1; background:transparent; border:1.5px dotted var(--g-rule); color:var(--g-ink-4); }

/* Sprint Booking Intake: "Pending bookings" tray pinned above the timeline.
   Forwarded bookings parsed into proposals (spec: _SPEC_SPRINT_BOOKING_INTAKE.md).
   Scoped .ts-prop* / .ts-tray*, tokens only (no hex / no !important). */
body.v4 .ts-tray{ background:var(--g-lilac-bg); border:1px solid var(--g-rule); border-radius:var(--g-r); box-shadow:var(--g-sh); padding:14px 16px; margin-bottom:16px; }
body.v4 .ts-tray-head{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
body.v4 .ts-tray-title{ font-size:14px; font-weight:800; letter-spacing:-.01em; color:var(--g-ink-1); display:inline-flex; align-items:center; gap:8px; }
body.v4 .ts-tray-cards{ display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
body.v4 .ts-prop{ background:var(--g-surface); border:1px solid var(--g-rule); border-radius:var(--g-r-sm); padding:13px 14px; display:flex; flex-direction:column; gap:9px; }
body.v4 .ts-prop-top{ display:flex; gap:11px; align-items:flex-start; }
body.v4 .ts-prop-ic{ flex:none; font-size:20px; line-height:1; }
body.v4 .ts-prop-main{ min-width:0; flex:1; }
body.v4 .ts-prop-title{ font-size:14px; font-weight:700; color:var(--g-ink-1); letter-spacing:-.01em; }
body.v4 .ts-prop-sub{ font-size:12.5px; color:var(--g-ink-3); margin-top:2px; }
body.v4 .ts-prop-when{ font-size:12.5px; color:var(--g-ink-2); font-weight:600; margin-top:4px; }
body.v4 .ts-prop-flags{ display:flex; flex-wrap:wrap; gap:6px; }
body.v4 .ts-prop-acts{ display:flex; gap:8px; flex-wrap:wrap; margin-top:2px; }
body.v4 .ts-prop-acts .btn-v4{ flex:0 0 auto; }
body.v4 .ts-tray-un{ margin-top:14px; padding-top:12px; border-top:1px solid var(--g-rule-soft); }
body.v4 .ts-tray-un-head{ font-size:12px; font-weight:700; color:var(--g-ink-2); margin-bottom:8px; display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
body.v4 .ts-prop-un{ display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--g-rule-soft); border-radius:var(--g-r-sm); background:var(--g-surface); margin-bottom:6px; flex-wrap:wrap; }
body.v4 .ts-prop-un-ic{ flex:none; font-size:15px; }
body.v4 .ts-prop-un-title{ flex:1; min-width:120px; font-size:13px; font-weight:600; color:var(--g-ink-1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.v4 .ts-prop-un-when{ flex:none; font-size:12px; color:var(--g-ink-3); }
body.v4 .ts-prop-un-attach{ flex:none; }

/* ── MOBILE: travel-sprint pending bookings tray ── */
@media (max-width:768px){
  body.v4 .ts-tray{ padding:12px 13px; }
  body.v4 .ts-tray-cards{ grid-template-columns:1fr; }
  body.v4 .ts-prop-acts{ gap:8px; }
  body.v4 .ts-prop-acts .btn-v4{ flex:1 1 auto; min-height:44px; }
  body.v4 .ts-prop-un{ align-items:flex-start; }
  body.v4 .ts-prop-un-title{ flex:1 1 100%; white-space:normal; }
  body.v4 .ts-prop-un-attach{ flex:1 1 100%; min-height:44px; }
}

/* ============================================================
   Guest Check (The 100K Guest Check) - scoped .gc-*.
   Tokens only (no hex / no !important). Sits on the shared
   aiceo-modal chrome + .pill + .btn-v4. Spec: _SPEC_GUEST_CHECK.md.
   ============================================================ */
body.v4 .gc-wrap{ display:block; }
body.v4 .gc-quiet{ padding:40px; text-align:center; color:var(--g-ink-3); font-size:13px; }

/* top bar: count/status + New button */
body.v4 .gc-bar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
body.v4 .gc-bar-sub{ flex:1; font-size:13px; color:var(--g-ink-3); }

/* saved-check cards */
body.v4 .gc-grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
body.v4 .gc-card{ background:var(--g-surface); border:1px solid var(--g-rule); border-radius:var(--g-r-lg);
  box-shadow:var(--g-sh); padding:15px 16px; cursor:pointer; transition:box-shadow .12s ease; }
body.v4 .gc-card:hover{ box-shadow:var(--g-sh-2); }
body.v4 .gc-card-top{ display:flex; align-items:flex-start; gap:10px; }
body.v4 .gc-card-name{ flex:1; min-width:0; font-size:15.5px; font-weight:800; letter-spacing:-.01em; color:var(--g-ink-1); }
body.v4 .gc-card-idea{ font-size:13px; color:var(--g-ink-3); margin-top:8px; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
body.v4 .gc-card-foot{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px; }
body.v4 .gc-card-score{ font-size:17px; font-weight:800; letter-spacing:-.02em; color:var(--g-ink-1); }
body.v4 .gc-card-score-d{ font-size:11px; font-weight:600; color:var(--g-ink-4); }
body.v4 .gc-card-conf{ font-size:11px; color:var(--g-ink-4); font-weight:600; }
body.v4 .gc-card-date{ margin-left:auto; font-size:11.5px; color:var(--g-ink-4); }

/* empty state */
body.v4 .gc-empty{ background:var(--g-surface); border:1px solid var(--g-rule); border-radius:var(--g-r-lg);
  box-shadow:var(--g-sh); padding:48px 28px; text-align:center; color:var(--g-ink-3); font-size:13.5px; line-height:1.5; max-width:540px; margin:0 auto; }
body.v4 .gc-empty-h{ font-size:17px; font-weight:800; letter-spacing:-.01em; color:var(--g-ink-1); margin-bottom:6px; }
body.v4 .gc-empty-cta{ margin-top:16px; }

/* modal: a little wider for the result */
body.v4 .gc-modal{ max-width:680px; }
body.v4 .gc-foot{ display:flex; align-items:center; gap:10px; }
body.v4 .gc-foot-spacer{ flex:1; }

/* form fields (shared by entry + result override) */
body.v4 .gc-field{ margin-bottom:14px; }
body.v4 .gc-field .eyebrow{ font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:var(--g-ink-4); margin-bottom:5px; }
body.v4 .gc-row{ display:flex; gap:12px; flex-wrap:wrap; }
body.v4 .gc-row .gc-field{ flex:1; min-width:160px; }
body.v4 .gc-textarea{ resize:vertical; line-height:1.45; }
body.v4 .gc-err{ font-size:12.5px; color:var(--g-cherry); margin-top:10px; }

/* result: verdict header */
body.v4 .gc-result{ display:block; }
/* NOT sticky: a translucent sticky summary let the dossier text scroll
   through it + peek in the gaps above/beside (looked like a render bug).
   It sits as the first block in the scroll body - still seen first on open. */
body.v4 .gc-verdict{ background:var(--g-paper-3); border:1px solid var(--g-rule);
  border-radius:var(--g-r); padding:14px 16px; margin-bottom:16px; }
body.v4 .gc-verdict-main{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
body.v4 .gc-score-big{ font-size:30px; font-weight:800; letter-spacing:-.03em; color:var(--g-ink-1); line-height:1; }
body.v4 .gc-score-d{ font-size:14px; font-weight:600; color:var(--g-ink-4); }
body.v4 .gc-conf{ margin-left:auto; font-size:12px; font-weight:700; padding:4px 10px; border-radius:var(--g-r-xl); }
body.v4 .gc-conf-high{ background:var(--g-green-bg); color:var(--g-green); }
body.v4 .gc-conf-medium{ background:var(--g-paper-3); color:var(--g-ink-3); }
body.v4 .gc-conf-low{ background:var(--g-cherry-bg); color:var(--g-cherry); }
body.v4 .gc-review-note{ font-size:12.5px; color:var(--g-ink-3); margin-top:10px; font-style:italic; }
body.v4 .gc-conditions{ margin-top:12px; }
body.v4 .gc-cond-h{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:var(--g-ink-4); margin-bottom:6px; }
body.v4 .gc-conditions ul{ margin:0; padding-left:18px; }
body.v4 .gc-conditions li{ font-size:12.5px; color:var(--g-ink-2); line-height:1.5; margin-bottom:3px; }

/* result: sections */
body.v4 .gc-sec{ padding:14px 0; border-top:1px solid var(--g-rule-soft); }
body.v4 .gc-sec:first-child{ border-top:0; padding-top:0; }
body.v4 .gc-sec-h{ display:block; margin-bottom:10px; }
body.v4 .gc-two{ display:grid; gap:14px; grid-template-columns:1fr 1fr; }
body.v4 .gc-checks{ display:grid; gap:6px; }
body.v4 .gc-check{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--g-ink-1); min-height:34px; cursor:pointer; }
body.v4 .gc-flags{ display:grid; gap:6px; }
body.v4 .gc-flag{ align-items:flex-start; }
body.v4 .gc-flag-auto{ font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--g-orange); margin-left:4px; }

/* result: dimension rating rows */
body.v4 .gc-dim{ padding:9px 0; border-bottom:1px solid var(--g-rule-soft); }
body.v4 .gc-dim:last-child{ border-bottom:0; }
body.v4 .gc-dim-top{ display:flex; align-items:center; gap:10px; }
body.v4 .gc-dim-label{ flex:1; font-size:13.5px; font-weight:700; color:var(--g-ink-1); }
body.v4 .gc-dim-w{ font-size:10.5px; color:var(--g-ink-4); letter-spacing:.03em; text-transform:uppercase; font-weight:700; }
body.v4 .gc-dim-rating{ width:64px; flex:none; }
body.v4 .gc-dim-why{ font-size:12px; color:var(--g-ink-3); margin-top:4px; line-height:1.45; }

/* result: meta rows + framing */
body.v4 .gc-meta-row{ display:flex; gap:8px; font-size:12.5px; color:var(--g-ink-2); align-items:baseline; margin-top:8px; }
body.v4 .gc-meta-row .gc-k{ flex:none; width:120px; color:var(--g-ink-4); font-size:10.5px; letter-spacing:.03em; text-transform:uppercase; font-weight:700; }
body.v4 .gc-meta-row .gc-v{ flex:1; min-width:0; }
body.v4 .gc-missing{ font-size:12.5px; color:var(--g-ink-3); margin-top:10px; }
body.v4 .gc-framing{ font-size:12px; font-style:italic; color:var(--g-ink-3); background:var(--g-paper-3);
  border-radius:var(--g-r); padding:12px 14px; margin-top:14px; line-height:1.5; }

/* overflow safety - nothing in the dossier should force horizontal scroll */
body.v4 .gc-modal{ overflow:hidden; }
body.v4 .gc-body{ overflow-x:hidden; }
body.v4 .gc-body, body.v4 .gc-verdict{ overflow-wrap:anywhere; word-break:break-word; }
body.v4 .gc-verdict-main{ min-width:0; }
body.v4 .gc-meta-row .gc-v, body.v4 .gc-dimr, body.v4 .gc-bigline, body.v4 .gc-line{ min-width:0; }

/* summary recommendation line (sits under the score in the verdict card) */
body.v4 .gc-reco{ margin-top:10px; font-size:14px; font-weight:700; letter-spacing:-.01em; color:var(--g-ink-1); line-height:1.4; }

/* read-first dossier */
body.v4 .gc-modetoggle{ display:flex; justify-content:flex-end; margin-bottom:4px; }
body.v4 .gc-adjust{ appearance:none; border:1px solid var(--g-rule); background:var(--g-surface); color:var(--g-ink-2);
  font:inherit; font-size:12px; font-weight:600; padding:6px 12px; min-height:34px; border-radius:var(--g-r-xl); cursor:pointer; }
body.v4 .gc-adjust:hover{ background:var(--g-paper-3); }
body.v4 .gc-data-h{ font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:var(--g-ink-4); margin:12px 0 5px; }
body.v4 .gc-sec > .gc-data-h:first-child{ margin-top:0; }
body.v4 .gc-bigline{ font-size:15px; font-weight:600; letter-spacing:-.01em; color:var(--g-ink-1); line-height:1.42; }
body.v4 .gc-line{ font-size:13.5px; color:var(--g-ink-1); line-height:1.5; }
body.v4 .gc-good{ font-size:13px; color:var(--g-green); font-weight:600; }
body.v4 .gc-flaglist{ margin:0; padding-left:18px; }
body.v4 .gc-flaglist li{ font-size:13px; color:var(--g-ink-2); line-height:1.5; margin-bottom:3px; }

/* read-view dimension rows with score bars */
body.v4 .gc-dimr{ padding:9px 0; border-bottom:1px solid var(--g-rule-soft); }
body.v4 .gc-dimr:last-child{ border-bottom:0; }
body.v4 .gc-dimr-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
body.v4 .gc-dimr-label{ font-size:13.5px; font-weight:700; color:var(--g-ink-1); }
body.v4 .gc-dimr-num{ flex:none; font-size:12.5px; font-weight:700; color:var(--g-ink-2); }
body.v4 .gc-scorebar{ position:relative; height:6px; border-radius:999px; background:var(--g-rule); margin:7px 0 0; overflow:hidden; }
body.v4 .gc-scorebar-fill{ position:absolute; inset:0 auto 0 0; height:100%; background:var(--g-cherry); border-radius:999px; }
body.v4 .gc-dimr-why{ font-size:12px; color:var(--g-ink-3); margin-top:5px; line-height:1.45; }

/* ── MOBILE: guest-check ── */
@media (max-width:768px){
  body.v4 .gc-grid{ grid-template-columns:1fr; }
  body.v4 .gc-two{ grid-template-columns:1fr; }
  body.v4 .gc-bar .btn-v4{ width:100%; min-height:46px; }
  body.v4 .gc-foot{ flex-wrap:wrap; }
  body.v4 .gc-foot .btn-v4{ min-height:44px; }
  body.v4 .gc-foot-spacer{ display:none; }
  body.v4 .gc-check{ min-height:40px; }
  body.v4 .gc-verdict{ position:static; }
}

/* ============================================================
   Guest Finder - scoped .gf-* (on the gc modal chrome). Tokens only.
   ============================================================ */
body.v4 .gf-avoidrow{ margin:4px 0 2px; }
body.v4 .gf-results{ margin-top:6px; overflow-wrap:anywhere; }
body.v4 .gf-summary{ font-size:12px; font-weight:700; color:var(--g-ink-3); margin:14px 0 8px; padding-top:12px; border-top:1px solid var(--g-rule-soft); }
body.v4 .gf-note{ font-size:12.5px; color:var(--g-ink-3); font-style:italic; background:var(--g-paper-3); border-radius:var(--g-r); padding:9px 12px; margin-bottom:10px; }
body.v4 .gf-cards{ display:grid; gap:12px; }
body.v4 .gf-card{ border:1px solid var(--g-rule); border-radius:var(--g-r); background:var(--g-surface); box-shadow:var(--g-sh); padding:14px 15px; }
body.v4 .gf-card-top{ display:flex; align-items:flex-start; gap:10px; }
body.v4 .gf-card-name{ flex:1; min-width:0; font-size:15px; font-weight:800; letter-spacing:-.01em; color:var(--g-ink-1); }
body.v4 .gf-card-who{ font-size:12.5px; color:var(--g-ink-3); margin-top:3px; }
body.v4 .gf-card-idea{ font-size:13.5px; font-weight:600; color:var(--g-ink-1); margin-top:9px; line-height:1.42; }
body.v4 .gf-card-cons{ font-size:12.5px; color:var(--g-ink-2); margin-top:4px; line-height:1.45; }
body.v4 .gf-meta{ display:flex; gap:8px; font-size:12px; color:var(--g-ink-2); align-items:baseline; margin-top:7px; }
body.v4 .gf-meta .gc-k{ flex:none; width:74px; color:var(--g-ink-4); font-size:10px; letter-spacing:.03em; text-transform:uppercase; font-weight:700; }
body.v4 .gf-meta .gc-v{ flex:1; min-width:0; }
body.v4 .gf-srcs{ margin-top:9px; display:flex; flex-wrap:wrap; gap:10px; }
body.v4 .gf-src{ font-size:11px; font-weight:600; color:var(--g-blue); text-decoration:none; }
body.v4 .gf-src:hover{ text-decoration:underline; }
body.v4 .gf-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:12px; }
body.v4 .gf-excluded{ margin-top:14px; padding-top:12px; border-top:1px solid var(--g-rule-soft); }
body.v4 .gf-excluded ul{ margin:6px 0 0; padding-left:18px; }
body.v4 .gf-excluded li{ font-size:12.5px; color:var(--g-ink-2); line-height:1.5; margin-bottom:3px; }

/* Saved searches = a list view inside a panel (on the Finder tab, not the modal) */
body.v4 .gf-saved-panel{ border:1px solid var(--g-rule); border-radius:var(--g-r-lg); background:var(--g-surface); box-shadow:var(--g-sh); overflow:hidden; }
body.v4 .gf-srow{ display:flex; align-items:center; gap:12px; padding:13px 15px; border-top:1px solid var(--g-rule-soft); cursor:pointer; }
body.v4 .gf-srow:first-child{ border-top:0; }
body.v4 .gf-srow:hover{ background:var(--g-paper-3); }
body.v4 .gf-srow-main{ flex:1; min-width:0; }
body.v4 .gf-srow-title{ font-size:14px; font-weight:700; color:var(--g-ink-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.v4 .gf-srow-meta{ font-size:11.5px; color:var(--g-ink-4); margin-top:2px; }
body.v4 .gf-srow-del{ flex:none; padding:5px 12px; border:1px solid var(--g-rule); border-radius:999px; background:var(--g-surface); color:var(--g-ink-4); font-size:11.5px; font-weight:600; cursor:pointer; }
body.v4 .gf-srow-del:hover{ border-color:var(--cherry); color:var(--cherry); }

@media (max-width:768px){
  body.v4 .gf-actions{ flex-wrap:wrap; }
  body.v4 .gf-actions .btn-v4{ flex:1; min-height:44px; }
  body.v4 .gf-srow-del{ min-height:34px; }
}

/* ── In-Edit form polish: copy buttons + deep description boxes (v26.271) ── */
body.v4 .es-fld { position: relative; }
body.v4 .es-fld > label { padding-right: 30px; }
body.v4 .es-fld-copy {
  position: absolute; top: 0; right: 0; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 22px; padding: 0;
  border: 1px solid var(--g-border); border-radius: var(--r-sm);
  background: var(--g-surface); color: var(--ink-mid);
  cursor: pointer; opacity: 0;
  transition: opacity .12s ease, color .12s ease, border-color .12s ease;
}
body.v4 .es-fld:hover .es-fld-copy,
body.v4 .es-fld:focus-within .es-fld-copy { opacity: 1; }
body.v4 .es-fld-copy:hover { color: var(--g-blue); border-color: var(--g-blue); }
body.v4 .es-fld-copy.is-copied { color: var(--g-blue); border-color: var(--g-blue); opacity: 1; }
body.v4 .es-fld-copy svg { display: block; }
/* Deep, scrollable description boxes: double depth + visible scrollbar past the cap */
body.v4 .es-fld textarea.es-ta-deep {
  min-height: 168px; max-height: 360px; overflow-y: auto; resize: vertical;
}

/* ── AI artefact result panels: collapsed -> expand inline (v26.272) ── */
body.v4 .es-artp { padding: 0; overflow: hidden; }
body.v4 .es-artp-head {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: none; border: 0; padding: 10px 12px; cursor: pointer;
  text-align: left; font: inherit; color: inherit;
}
body.v4 .es-artp-head:hover { background: var(--c-lilac-bg, rgba(94,92,230,.06)); }
body.v4 .es-artp-chev {
  width: 0; height: 0; flex: none;
  border-style: solid; border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent var(--g-ink-4);
  transition: transform .15s ease;
}
body.v4 .es-artp.is-open .es-artp-chev { transform: rotate(90deg); }
body.v4 .es-artp-head .es-art-name { flex: 1; min-width: 0; }
body.v4 .es-artp-meta { font-size: 10.5px; font-weight: 600; color: var(--g-ink-4); flex: none; }
body.v4 .es-artp-body { padding: 0 12px 12px; border-top: 1px solid var(--g-border); }
body.v4 .es-artp-output {
  white-space: pre-wrap; font-size: 12px; line-height: 1.55; color: var(--g-ink-1);
  margin: 10px 0; max-height: 340px; overflow-y: auto;
}
body.v4 .es-artp-actions { display: flex; flex-wrap: wrap; gap: 6px; }
body.v4 .es-artp-act {
  font-size: 11px; font-weight: 600; padding: 5px 10px; cursor: pointer;
  border: 1px solid var(--g-border); border-radius: var(--r-sm);
  background: var(--g-surface); color: var(--g-ink-2);
}
body.v4 .es-artp-act:hover { border-color: var(--c-lilac); color: var(--c-lilac); }

/* ── AI result panel polish + Display-AI-artifact element (v26.273) ── */
/* Spacing: panels were flush with the save button and each other. */
body.v4 .es-sec-body .es-artp,
body.v4 .es-sec-body .es-ai-out { margin-top: 10px; }
/* Purple, not grey. */
body.v4 .es-artp {
  border-color: var(--c-lilac);
  background: var(--c-lilac-bg, rgba(94,92,230,.05));
}
body.v4 .es-artp-head:hover { background: rgba(94,92,230,.09); }
body.v4 .es-artp-body { border-top-color: var(--c-lilac); }
/* Less squashed: taller head + a little breathing room in the body. */
body.v4 .es-artp-head { padding: 13px 14px; }
body.v4 .es-artp-output { margin: 12px 0; }
/* "Display AI artifact" element empty state. */
body.v4 .es-display-art-empty {
  font-size: 11.5px; color: var(--g-ink-4); font-style: italic;
  padding: 11px 13px; border: 1px dashed var(--c-lilac); border-radius: var(--r-sm);
  background: var(--c-lilac-bg, rgba(94,92,230,.04));
}

/* ════════════════════════════════════════════════════════════════
   ST-TZ · Studio calendar timezone (lifted from
   docs/designs/_DESIGN_CALENDAR_TIMEZONE_POPUP.html, hex -> tokens).
   Scoped .cal-tz* (header clocks + per-entry link) and .tzpop* (the
   detect/switch popup). Tokens only, no hardcoded hex.
   ════════════════════════════════════════════════════════════════ */

/* Compact dual clocks above the grid (item 3) + tap-to-switch bar. */
body.v4 .cal-tzbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 8px 14px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--paper); cursor: pointer;
}
body.v4 .cal-tzbar:hover { border-color: var(--cherry-mid); }
body.v4 .cal-tzbar-state { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
body.v4 .cal-tzclocks { display: flex; gap: 8px; }
body.v4 .cal-zone {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 5px 11px; text-align: center; min-width: 84px;
}
body.v4 .cal-zone .z {
  display: block;
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-soft);
}
body.v4 .cal-zone .tt {
  display: block;
  font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2;
  color: var(--ink);
}
body.v4 .cal-zone.home { border-color: var(--cherry-mid); background: var(--cherry-bg); }
body.v4 .cal-zone.home .tt { color: var(--cherry-deep); }

/* Per-entry timezone link + dropdown (item 4). */
body.v4 .cal-tzrow, body.v4 .es-tzrow {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 7px;
}
body.v4 .cal-tzlink {
  font-size: 11.5px; font-weight: 600; color: var(--cherry); cursor: pointer;
  border-bottom: 1px dashed var(--cherry-mid); padding-bottom: 1px;
}
body.v4 .cal-tzlink b { font-weight: 700; }
body.v4 .cal-tzselect { max-width: 220px; }

/* The detect / switch popup (items 1-2): centred, dims the page. */
body.v4 .tzpop-overlay {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(26,20,16,.46);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
body.v4 .tzpop {
  background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  max-width: 420px; width: 100%; overflow: hidden;
  animation: tzpop-in .2s ease-out;
}
@keyframes tzpop-in {
  from { transform: translateY(8px) scale(.98); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
body.v4 .tzpop-body { padding: 24px 24px 20px; text-align: center; }
body.v4 .tzpop-ico {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--cherry-bg); color: var(--cherry);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; margin: 0 auto 14px;
}
body.v4 .tzpop-h { font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
body.v4 .tzpop-sub { color: var(--ink-mid); font-size: 13px; margin-top: 6px; }
body.v4 .tzpop-clocks {
  display: flex; align-items: stretch; gap: 10px; margin: 18px 0 6px; justify-content: center;
}
body.v4 .tzpop-zone {
  flex: 1; max-width: 150px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 12px 10px;
}
body.v4 .tzpop-zone.home { border-color: var(--cherry-mid); background: var(--cherry-bg); }
body.v4 .tzpop-zone .z {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-soft);
}
body.v4 .tzpop-zone .tt {
  font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 3px; color: var(--ink);
}
body.v4 .tzpop-zone.home .tt { color: var(--cherry-deep); }
body.v4 .tzpop-zone .d { font-size: 11px; color: var(--ink-soft); margin-top: 2px; }
body.v4 .tzpop-gap { display: flex; align-items: center; font-size: 11px; font-weight: 700; color: var(--ink-soft); }
body.v4 .tzpop-delta { font-size: 12px; color: var(--ink-mid); margin-top: 4px; }
body.v4 .tzpop-delta b { color: var(--ink); }
body.v4 .tzpop-actions { display: flex; flex-direction: column; gap: 9px; padding: 4px 24px 22px; }
body.v4 .tzpop-actions .btn-primary,
body.v4 .tzpop-actions .btn-secondary { width: 100%; border-radius: var(--r-pill); }
body.v4 .tzpop-remember {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 11.5px; color: var(--ink-soft); padding: 0 24px 18px; cursor: pointer;
}
body.v4 .tzpop-remember input { width: 15px; height: 15px; accent-color: var(--cherry); }

/* ── MOBILE: calendar timezone ── */
@media (max-width: 760px) {
  body.v4 .cal-tzbar { flex-direction: column; align-items: stretch; gap: 8px; }
  body.v4 .cal-tzclocks { justify-content: space-between; }
  body.v4 .cal-zone { flex: 1; min-height: 44px; display: flex; flex-direction: column; justify-content: center; }
  body.v4 .tzpop-overlay { align-items: flex-end; padding: 0; }
  body.v4 .tzpop {
    max-width: 100%; width: 100%;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
  }
  body.v4 .tzpop-clocks { gap: 8px; }
  body.v4 .tzpop-zone { max-width: none; }
  body.v4 .tzpop-actions .btn-primary,
  body.v4 .tzpop-actions .btn-secondary { min-height: 44px; }
  body.v4 .tzpop-remember { min-height: 44px; }
  body.v4 .cal-tzlink { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ============================================================
   Cross-Billing (js/pages/cross-billing.js) - scoped .xb-*.
   Tokens only, no hardcoded hex, no !important. Reuses the shared
   .stats/.card/.data-table/.tabs/.aiceo-modal/.kanban-card-pill
   chrome; this block only adds what those don't cover.
   ============================================================ */
body.v4 .xb-wrap { display: block; }
body.v4 .xb-tabs { margin-bottom: 14px; }
body.v4 .xb-quiet { color: var(--g-ink-3); font-size: 13px; }
body.v4 .xb-sub2 { color: var(--g-ink-3); font-size: 12px; font-weight: 500; }

/* stat dots (the shared .stat chrome scopes dot colours per page) */
body.v4 .xb-stats .dot.rec  { background: var(--on-mint); }
body.v4 .xb-stats .dot.out  { background: var(--blue); }
body.v4 .xb-stats .dot.over { background: var(--cherry); }

/* not-set-up banner */
body.v4 .xb-missing {
  background: var(--g-surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 16px 18px; margin: 4px 0 10px;
  color: var(--g-ink-2); font-size: 13.5px; line-height: 1.5;
}
body.v4 .xb-missing .kanban-card-pill { margin-right: 8px; }

/* month selector bar */
body.v4 .xb-monthbar { align-items: center; }
body.v4 .xb-monthpick { display: inline-flex; align-items: center; gap: 8px; }
body.v4 .xb-monthinput { width: 180px; max-width: 60vw; }
body.v4 .xb-monthbar .card-action { font-size: 20px; line-height: 1; padding: 0 6px; text-decoration: none; }

/* warnings block */
body.v4 .xb-warns {
  background: var(--g-surface); border: 1px solid var(--line);
  border-left: 3px solid var(--cherry); border-radius: var(--r);
  padding: 12px 16px; margin: 6px 0 12px;
}
body.v4 .xb-warns-h { font-weight: 700; font-size: 13.5px; color: var(--g-ink-1); display: flex; align-items: center; gap: 8px; }
body.v4 .xb-warns-h i { width: 15px; height: 15px; color: var(--cherry); }
body.v4 .xb-warns ul { margin: 8px 0 0; padding-left: 20px; }
body.v4 .xb-warns li { font-size: 12.5px; color: var(--g-ink-2); margin: 3px 0; }

/* settlement cards */
body.v4 .xb-settlements { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
body.v4 .xb-settle { padding: 0; overflow: hidden; }
body.v4 .xb-settle-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--line); gap: 12px;
}
body.v4 .xb-settle-flow { font-size: 14px; color: var(--g-ink-1); }
body.v4 .xb-settle-flow strong { font-weight: 700; }
body.v4 .xb-arrow { color: var(--g-ink-3); font-weight: 500; margin: 0 4px; }
body.v4 .xb-settle-amt { font-family: var(--g-fd, inherit); font-size: 20px; font-weight: 800; color: var(--g-ink-1); white-space: nowrap; }
body.v4 .xb-settle-lines { padding: 8px 18px 14px; }
body.v4 .xb-sl-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 13px; }
body.v4 .xb-sl-name { color: var(--g-ink-2); }
body.v4 .xb-sl-basis { display: block; color: var(--g-ink-3); font-size: 11px; margin-top: 1px; }
body.v4 .xb-sl-amt { color: var(--g-ink-1); font-weight: 600; white-space: nowrap; }
body.v4 .xb-sl-amt.neg { color: var(--g-ink-3); }

/* legends + notes */
body.v4 .xb-legend { color: var(--g-ink-3); font-size: 12.5px; line-height: 1.55; margin: 12px 2px 0; }
body.v4 .xb-note { background: var(--g-surface-2, var(--g-surface)); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; font-size: 12.5px; color: var(--g-ink-2); margin-bottom: 12px; }
body.v4 .xb-note2 { font-size: 12.5px; color: var(--g-ink-3); margin-bottom: 12px; line-height: 1.5; }

/* modal fields + split grids */
body.v4 .xb-fld { display: block; margin-bottom: 12px; }
body.v4 .xb-fld-lab { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--g-ink-3); margin-bottom: 5px; }
body.v4 .xb-splitgrid { border: 1px solid var(--line); border-radius: var(--r); padding: 12px; margin-bottom: 12px; }
body.v4 .xb-split-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--g-ink-3); margin-bottom: 8px; }
body.v4 .xb-split-row { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
body.v4 .xb-split-row span { flex: 1; font-size: 13px; color: var(--g-ink-1); }
body.v4 .xb-split-row .form-input { width: 120px; flex: 0 0 auto; }
body.v4 .xb-pctsign { flex: 0 0 auto; color: var(--g-ink-3); }
body.v4 .xb-pcttotal { font-size: 12.5px; color: var(--g-ink-2); margin-top: 6px; text-align: right; }
body.v4 .xb-err { color: var(--cherry); font-size: 12.5px; min-height: 16px; }

/* ── MOBILE: cross-billing ── */
@media (max-width: 760px) {
  body.v4 .xb-settlements { grid-template-columns: 1fr; }
  body.v4 .xb-monthbar { flex-direction: column; align-items: stretch; gap: 10px; }
  body.v4 .xb-monthinput { width: 100%; max-width: none; }
  body.v4 .xb-monthbar .actions { justify-content: space-between; }
  body.v4 .xb-split-row .form-input { width: 96px; }
  body.v4 .xb-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  body.v4 .xb-settle-amt { font-size: 18px; }
}

/* Cross-Billing Phase 2 (Xero) additions - tokens only */
body.v4 .xb-entacts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
body.v4 .xb-fld-hint { display: block; margin-top: 4px; font-size: 11px; color: var(--g-ink-3); line-height: 1.4; }
@media (max-width: 760px) {
  body.v4 .xb-entacts { gap: 6px; }
}

/* Cross-Billing: Xero connect-once bar + org picker - tokens only */
body.v4 .xb-xerobar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; margin: 4px 0 12px; background: var(--g-surface); border: 1px solid var(--line); border-radius: var(--r); }
body.v4 .xb-orgpick { display: inline-block; font-size: 13px; padding: 5px 8px; max-width: 260px; }
@media (max-width: 760px) {
  body.v4 .xb-xerobar { align-items: stretch; }
  body.v4 .xb-orgpick { max-width: 100%; width: 100%; }
}