:root{
  --paper:#E7F1ED; --card:#FFFFFF; --well:#EFF6F2; --hl:#DFEEE7;
  --ink:#16394B; --ink-soft:#5A7484; --line:#DCE8E2; --line-strong:#C4D6CD;
  --ocean:#0E7490; --ocean-deep:#0B5B70; --ocean-soft:rgba(14,116,144,.10);
  --sunset:#F59E0B; --sunset-deep:#B45309; --sunset-soft:rgba(245,158,11,.14);
  --coral:#F26D5B;
  --panel:#0F2733; --panel-text:#DCE8EE; --panel-dim:#5A7484;
  --green:#2E9E6B; --green-soft:rgba(46,158,107,.12);
  --red:#E05252; --red-soft:rgba(224,82,82,.08);
  --amber:#E9A23B; --amber-deep:#B27516; --amber-soft:rgba(233,162,59,.14); --gray:#B9C2C8;
  --lavender:#8B7FD6; --lavender-soft:rgba(139,127,214,.12);
  --dot:rgba(22,57,75,.10);
  --radius:14px; --radius-sm:10px; --radius-pill:20px;
  --shadow-lg:0 24px 60px -12px rgba(22,57,75,.14), 0 4px 14px rgba(22,57,75,.05);
  --shadow-md:0 8px 24px rgba(22,57,75,.16);
  --seafoam:var(--hl); --paper-old:#FDF9F5; --ocean-ink:var(--panel);
}
:root[data-theme="dark"]{
  --paper:#0A171E; --card:#102430; --well:#0D1E28; --hl:rgba(63,179,206,.13);
  --ink:#E8EEF2; --ink-soft:#93A8B4; --line:#1F3642; --line-strong:#2C4855;
  --ocean:#3FB3CE; --ocean-deep:#5BC4DC; --ocean-soft:rgba(63,179,206,.12);
  --sunset:#F59E0B; --sunset-deep:#F5B04C; --sunset-soft:rgba(245,158,11,.16);
  --panel:#0B1D26; --panel-text:#D5E3EA; --panel-dim:#6E8797;
  --green:#43B77F; --green-soft:rgba(67,183,127,.14);
  --red:#E36A6A; --red-soft:rgba(227,106,106,.12);
  --amber-deep:#F0C177; --amber-soft:rgba(233,162,59,.16);
  --lavender:#A99CF0; --lavender-soft:rgba(169,156,240,.16);
  --dot:rgba(232,238,242,.045);
  --shadow-lg:0 24px 60px -12px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px rgba(0,0,0,.4);
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
body{font-family:'Karla',system-ui,sans-serif;background:var(--paper);color:var(--ink);min-height:100vh}
body::before{content:"";position:fixed;inset:0;pointer-events:none;
  background-image:radial-gradient(var(--dot) 1px,transparent 1.5px);background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 30%,black 30%,transparent 100%);
  mask-image:radial-gradient(ellipse 90% 70% at 50% 30%,black 30%,transparent 100%)}
button{font:inherit;cursor:pointer}

/* ---------- floating shell (Task 1: Enterprise Ocean) ---------- */
.frame{padding:24px;min-height:100vh}
.app{max-width:1480px;margin:0 auto;background:var(--card);border:1px solid var(--line);
  border-radius:24px;box-shadow:var(--shadow-lg);display:flex;overflow:hidden;position:relative}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{height:64px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 24px;flex-shrink:0}
.content{padding:28px 32px 48px}

/* Fixed-height dashboard on desktop (Jordan, Jul 28): the sidebar (nav + her
   name + footer) and the top bar stay put; only the content scrolls, in its own
   region. No more scrolling the whole page to the bottom to see her name. Scoped
   to desktop only -- the max-width:900px block below keeps mobile stacking and
   scrolling naturally. */
@media (min-width:901px){
  html, body{height:100%; overflow:hidden}
  .frame{height:100vh; overflow:hidden}
  .app{height:calc(100vh - 48px)}
  .main{min-height:0}
  .content{flex:1; min-height:0; overflow-y:auto}
  .sidebar{overflow-y:auto}
}

/* ---------- top bar: search, date range, money + waiting chips (Task 2) --- *
 * Ported from the approved Enterprise Ocean mockup (scratchpad, v7). */
.search{position:relative;display:flex;align-items:center;gap:8px;width:300px;height:36px;
  background:var(--well);border:1px solid var(--line);border-radius:var(--radius-pill);
  padding:0 14px;color:var(--ink-soft);font-size:.82rem}
.search svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;flex-shrink:0}
.search input{flex:1;min-width:0;border:none;background:none;outline:none;color:var(--ink);font:inherit}
.search input::placeholder{color:var(--ink-soft)}
.search .kbd{font-family:'Spline Sans Mono',monospace;font-size:.62rem;
  border:1px solid var(--line-strong);border-radius:5px;padding:1px 6px;flex-shrink:0}
.search-dropdown{display:none;position:absolute;top:calc(100% + 6px);left:0;width:100%;
  max-height:320px;overflow-y:auto;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-sm);box-shadow:var(--shadow-md);z-index:30;padding:6px}
.search-dropdown.show{display:block}
.search-hit{display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  background:none;border:none;border-radius:var(--radius-sm);padding:8px 9px;font-size:.82rem;color:var(--ink)}
.search-hit:hover{background:var(--seafoam)}
.search-hit-hook{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-btn{display:flex;align-items:center;gap:7px;height:36px;padding:0 14px;
  border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--card);
  color:var(--ink);font-size:.82rem;font-weight:500;cursor:pointer;transition:background .12s}
.tb-btn:hover{background:var(--seafoam)}
.tb-btn svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.tb-btn .chev{width:10px;height:10px;stroke-width:2}
.spacer{flex:1}
.tb-chip{display:flex;align-items:center;gap:6px;height:32px;padding:0 13px;
  border:1px solid var(--line);border-radius:var(--radius-pill);font-size:.76rem;color:var(--ink-soft);
  background:none;cursor:pointer;transition:background .12s;white-space:nowrap}
.tb-chip:hover{background:var(--seafoam)}
.tb-chip b{font-family:'Spline Sans Mono',monospace;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.tb-chip.money{color:var(--ink-soft)}
.tb-chip.waiting{background:var(--sunset-soft);border-color:transparent}
.tb-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--sunset);flex-shrink:0}

/* ---------- sidebar ---------- */
.sidebar{width:224px;flex-shrink:0;border-right:1px solid var(--line);padding:28px 18px;display:flex;flex-direction:column;gap:4px;height:auto}
.brand{margin-bottom:26px;padding-left:10px}
.brand .eyebrow{font-family:'Spline Sans Mono',monospace;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.brand h1{font-family:'Fraunces',serif;font-size:1.4rem;font-weight:600;color:var(--ink)}
.nav-btn{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:none;border-radius:var(--radius-sm);padding:10px 12px;color:var(--ink-soft);font-weight:500;font-size:.92rem}
.nav-btn.nav-hidden{display:none}
.nav-btn .dot{width:7px;height:7px;border-radius:50%;background:var(--line);flex-shrink:0}
.nav-btn:hover{background:var(--seafoam);color:var(--ink)}
.nav-btn.active{background:var(--hl);color:var(--ink);font-weight:700}
.nav-btn.active .dot{background:linear-gradient(135deg,var(--ocean),var(--sunset))}
.sidebar .foot{margin-top:auto;padding:10px;font-family:'Spline Sans Mono',monospace;font-size:.62rem;color:var(--ink-soft);line-height:1.6}
/* bottom admin section of the nav, set apart by a labeled divider */
.nav-divider{margin:16px 12px 6px;padding-top:14px;border-top:1px solid var(--line);
  font-family:'Spline Sans Mono',monospace;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gray)}
.nav-btn.admin{color:var(--ink-soft)}
.nav-btn.admin.active .dot{background:linear-gradient(135deg,var(--ocean),var(--coral))}

/* ---------- sidebar bottom: sync receipt + account row (Task 2) ---------- *
 * Ported from the approved Enterprise Ocean mockup (scratchpad, v7). The old
 * #theme-toggle button is gone (Task 1); .sync-row now carries the
 * margin-top:auto that used to pin .theme-toggle to the bottom, so this pair
 * plus #genfoot still sit flush against the sidebar's bottom edge. */
.medal{width:34px;height:34px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-family:'Fraunces',serif;font-weight:700;font-size:.88rem}
.sync-row{display:flex;align-items:center;gap:8px;padding:8px 10px;
  font-size:.72rem;color:var(--ink-soft);border-radius:var(--radius-sm);cursor:pointer;
  font-variant-numeric:tabular-nums;transition:background .12s,color .12s}
.sync-row:hover{background:var(--seafoam);color:var(--ink)}
.sync-row svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.sync-row .sync-fail{color:var(--red)}
.sync-row .mono-time{font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:11px}
.account{border-top:1px solid var(--line);padding:12px 10px 4px;margin-top:6px;
  display:flex;align-items:center;gap:10px;cursor:pointer;border-radius:var(--radius-sm);
  transition:background .12s}
.account:hover{background:var(--seafoam)}
.account .medal{width:36px;height:36px;background:var(--ocean);box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--sunset)}
.account .nm{font-weight:700;font-size:.84rem}
.account .st{font-size:.72rem;color:var(--ink-soft)}
.account .plan{font-family:'Spline Sans Mono',monospace;font-weight:700;font-size:.6rem;letter-spacing:.09em;
  color:var(--sunset-deep);background:var(--sunset-soft);border-radius:var(--radius-pill);padding:2px 8px;margin-left:auto}

/* ---------- main ---------- */
header.top{margin-bottom:8px}
.greeting{font-family:'Fraunces',serif;font-size:2rem;font-weight:600}
.datesub{color:var(--ink-soft);font-size:.9rem;margin-top:2px}

/* the horizon: ocean into sunset, sun placed by the real time of day. Now a
   thin full-width bar between the top bar and the content (Task 1). */
.horizon{position:relative;height:4px;margin:0;border-radius:0;
  background:linear-gradient(90deg,#0E7490 0%,#3A9DA8 38%,#F4A259 72%,#F26D5B 100%)}
.horizon .sun{position:absolute;top:50%;transform:translate(-50%,-50%);width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#FFE9B8,#F59E0B 70%);box-shadow:0 0 0 4px var(--sunset-soft)}

/* ---------- shared bits ---------- */
.panel{display:none}
.panel.show{display:block}
.cards{display:grid;gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.card h3{font-family:'Fraunces',serif;font-weight:600;font-size:1.05rem;margin-bottom:12px}
.section-note{color:var(--ink-soft);font-size:.85rem;margin:-6px 0 14px}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--seafoam);border:1px solid #D7E8E3;border-radius:var(--radius-pill);
  padding:5px 12px;font-family:'Spline Sans Mono',monospace;font-size:.7rem;color:var(--ocean)}
.chip:hover{background:#DDEEE9}
.chip::before{content:"\29C9";font-size:.75rem}
.chip.copied{background:var(--ocean);color:#fff;border-color:var(--ocean)}
.light{width:11px;height:11px;border-radius:50%;display:inline-block;flex-shrink:0}
.light.green{background:var(--green);box-shadow:0 0 0 4px rgba(46,158,107,.15)}
.light.amber{background:var(--amber);box-shadow:0 0 0 4px rgba(233,162,59,.15)}
.light.red{background:var(--red);box-shadow:0 0 0 4px rgba(224,82,82,.15)}
.light.gray{background:var(--gray)}
.pill{font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 9px;border-radius:var(--radius-pill)}
.pill.ready{background:#E4F3EA;color:var(--green)}
.pill.v1{background:#FBEFD9;color:#B27516}
.pill.not_built{background:#F0EDE7;color:var(--ink-soft)}

/* ---------- overview ---------- */
/* the KPI row (Task 3): Threads / Instagram / Email, real numbers with
 * honest deltas. Ported from the approved Enterprise Ocean mockup. */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:18px 20px;
  text-align:left;width:100%;cursor:pointer;transition:transform .12s,border-color .12s}
.kpi:hover{transform:translateY(-2px);border-color:var(--line-strong)}
.kpi .lbl{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);
  display:flex;justify-content:space-between;align-items:center}
.kpi .lbl svg{width:15px;height:15px;stroke:var(--ink-soft);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.kpi .val{font-family:'Spline Sans Mono',ui-monospace,monospace;font-weight:500;font-size:26px;
  margin:10px 0 6px;font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:var(--ink)}
.kpi .val.empty{color:var(--gray);font-size:20px}
.kpi .sub{font-size:12px;color:var(--ink-soft);line-height:1.45}
.delta{font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:11px;font-weight:500}
.delta.up{color:var(--green)} .delta.down{color:var(--red)} .delta.flat{color:var(--ink-soft)}
.scoreboard{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px}
.metric .label{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.metric .value{font-family:'Fraunces',serif;font-size:2rem;font-weight:600;margin:6px 0 8px}
.metric .value.empty{color:var(--gray);font-size:1.6rem}
.metric .src{font-size:.72rem;color:var(--ink-soft);margin-top:6px}

/* funnel strip (Task 4): config-driven stages (3-6), each naming its source.
   Overview's renderer -- ported from the approved Enterprise Ocean mockup.
   auto-fit keeps this honest about stage count: however many `data/metrics.json`
   lists, that's how many columns render, no hardcoded 4- or 5-up grid. */
.funnel{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:16px}
.fcell{padding:14px 18px;border-right:1px solid var(--line);position:relative}
.fcell:last-child{border-right:none}
.fcell .lbl{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.fcell .val{font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:1.15rem;font-weight:500;margin:5px 0 3px;font-variant-numeric:tabular-nums;display:block}
.fcell .val.empty{color:var(--gray)}
.fcell .conv{font-size:.72rem;color:var(--ocean-deep);font-variant-numeric:tabular-nums}
.fcell::after{content:"\2192";position:absolute;right:-7px;top:50%;transform:translateY(-50%);color:var(--line-strong);background:var(--card);z-index:2;font-size:.75rem}
.fcell:last-child::after{content:""}
.fbar{height:3px;background:var(--well);border-radius:99px;margin-top:8px;overflow:hidden}
.fbar i{display:block;height:100%;background:var(--ocean);border-radius:99px}
.fsrc{display:block;font-size:.68rem;color:var(--ink-soft);margin-top:7px;opacity:.85}
.fsrc .kw{color:var(--sunset-deep);font-weight:700}
.two-col{display:grid;grid-template-columns:1.45fr 1fr;gap:16px;margin-bottom:16px}
.avatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Fraunces',serif;font-weight:700;font-size:1.05rem;flex-shrink:0}

/* this week's play (Task 5): the sunrise hero, ported verbatim from the
 * approved v7 mockup -- eyebrow, Fraunces h4, excerpt, a source footer with
 * the horizon-gradient strip riding the top edge. */
.play .eyebrow{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sunset-deep);margin-bottom:10px;display:block}
.play h4{font-family:'Fraunces',serif;font-size:21px;font-weight:600;line-height:1.25;margin-bottom:10px}
.play p{font-size:13.5px;line-height:1.6;color:var(--ink);margin-bottom:14px}
.play .src{font-size:12px;color:var(--ink-soft);display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:12px}
.play.hero{position:relative;overflow:hidden;background-color:var(--card);
  background-image:linear-gradient(135deg, rgba(245,158,11,.15), rgba(242,109,91,.10));
  border-color:rgba(245,158,11,.45)}
.play.hero::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,#0E7490 0%,#3A9DA8 38%,#F4A259 72%,#F26D5B 100%)}
.play.hero .eyebrow{color:var(--sunset-deep)}
.play.hero .src{border-top-color:rgba(245,158,11,.30)}
.play-link{background:none;border:none;color:var(--ocean);font-weight:700;font-size:.85rem;padding:0}
.play-link:hover{text-decoration:underline}

/* trending, at a glance (Task 5): Tia's freshest three, riding under the
 * hero. .light reuses the same status-dot styling as the jobs table. */
.pulse{margin-top:16px}
.pulse .row{display:flex;align-items:flex-start;gap:9px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:12.5px;color:var(--ink-soft)}
.pulse .row:last-child{border-bottom:none}
.pulse .row b{color:var(--ink);font-weight:700}
.pulse .row .light{margin-top:5px}
.pulse .outlet{display:block;font-size:11px;color:var(--ink-soft);margin-top:2px}

/* your desk (Task 5), ported from the approved v7 mockup: employee medal,
 * bold title, a meta line, a status pill, and the same review/approve/fix
 * action link the desk has always used. */
.desk-line{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.desk-line:last-child{border-bottom:none}
.desk-line .medal{width:28px;height:28px;font-size:12px}
.desk-line .txt{flex:1;min-width:0}
.desk-line .t1{display:block;font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.desk-line .t2{display:block;font-size:11.5px;color:var(--ink-soft);margin-top:1px}
.desk-line .go{font-size:.74rem;color:var(--ocean);font-weight:700;white-space:nowrap;background:none;border:none;cursor:pointer;flex-shrink:0}
.desk-line .go:hover{text-decoration:underline}
.desk-line .go.done{color:var(--green)}
.desk-empty{font-size:.9rem;color:var(--ink-soft);padding:6px 0}
/* a broken automation on the desk: quiet red edge, no alarm bells */
.desk-line.broken{background:var(--red-soft);border-radius:8px;padding:11px 10px;margin:0 -10px;border-bottom-color:transparent}
.desk-more{display:block;margin-top:10px;background:none;border:none;color:var(--ocean);font-weight:700;font-size:.8rem;padding:4px 0;cursor:pointer}
.desk-more:hover{text-decoration:underline}
.pill.draft{background:var(--ocean-soft);color:var(--ocean-deep)}
.pill.cal{background:var(--sunset-soft);color:var(--sunset-deep)}
.pill.task{background:var(--well);color:var(--ink-soft)}
.pill.alert{background:var(--red-soft);color:var(--red)}
.pill.flagpill{background:var(--sunset-soft);color:var(--sunset-deep)}

/* top performers (Task 6): the ranked, scored card grid off
 * state.top_performers. Class names are namespaced (.piece-chip, not
 * .chip) because .chip already means "copy this command" elsewhere on the
 * page, with its own click handler and hover state -- reusing it here
 * would silently wire a format chip up to the clipboard. */
.sec-head{display:flex;align-items:baseline;justify-content:space-between;margin-top:20px}
.sec-head h3{font-family:'Fraunces',serif;font-weight:600;font-size:1.05rem}
.sec-head .meta{font-size:.75rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.pieces{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:14px}
@media (max-width:980px){.pieces{grid-template-columns:1fr}}
.piece{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:0;
  transition:transform .12s,border-color .12s;cursor:default;position:relative;overflow:hidden;
}
.piece:hover{transform:translateY(-2px);border-color:var(--line-strong)}
.piece .media{position:relative;height:300px;background:var(--well);border-bottom:1px solid var(--line)}
.piece .media img{width:100%;height:100%;object-fit:cover;display:block}
.piece .media .rank{position:absolute;top:10px;left:10px;z-index:2;box-shadow:0 1px 6px rgba(0,0,0,.18)}
.piece .media .ring{position:absolute;top:8px;right:8px;z-index:2;background:var(--card);border-radius:50%;box-shadow:0 1px 6px rgba(0,0,0,.14)}
.piece .media .playbtn,.piece .media .slidesbtn{
  position:absolute;inset:0;margin:auto;width:52px;height:52px;border-radius:50%;z-index:2;
  background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 14px rgba(0,0,0,.22);transition:transform .12s;
}
.piece:hover .playbtn,.piece:hover .slidesbtn{transform:scale(1.06)}
.piece .playbtn::after{
  content:"";display:block;width:0;height:0;margin-left:4px;
  border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent var(--panel);
}
.piece .slidesbtn svg{width:20px;height:20px;stroke:var(--panel);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* Light editorial quote-card (see .pcard.threads .quote): a finished text post
   reads on a light surface with the ocean-to-sunset quotation-mark signature,
   not the old dark navy tile. */
.piece .media.texttile{
  position:relative;background:var(--well);color:var(--ink);
  display:flex;flex-direction:column;justify-content:center;padding:28px 26px 26px 46px;
  border-bottom:1px solid var(--line);
}
.piece .media.texttile::before{content:"\201C";position:absolute;left:12px;top:50%;transform:translateY(-58%);
  font-family:'Fraunces',serif;font-size:2.8rem;line-height:1;font-weight:600;pointer-events:none;
  background:linear-gradient(135deg,var(--ocean),var(--sunset));
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.piece .texttile .q{font-family:'Fraunces',serif;font-size:20px;font-weight:600;line-height:1.4;color:var(--ink)}
.piece .texttile .at{font-size:12px;color:var(--ink-soft);margin-top:14px;display:block}
.piece .body{padding:14px 16px 16px}
.rank{
  font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:11px;font-weight:500;
  border-radius:99px;padding:3px 9px;
}
.rank.r1{background:var(--sunset);color:#231303}
.rank.rn{background:var(--well);color:var(--ink-soft);border:1px solid var(--line)}
.ring{position:relative;width:34px;height:34px}
.ring svg{width:34px;height:34px;transform:rotate(-90deg)}
.ring .bg{fill:none;stroke:var(--well);stroke-width:3}
.ring .fg{fill:none;stroke-width:3;stroke-linecap:round}
.ring .fg.hot{stroke:var(--sunset)}
.ring .fg.warm{stroke:var(--lavender)}
.ring .fg.low{stroke:var(--gray)}
.ring .num{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:10.5px;font-weight:500;
  color:var(--ink);
}
/* the score ring is a button now (opens the scorecard breakdown) */
.ring-btn{background:none;border:none;padding:0;margin:0;cursor:pointer;display:inline-flex;line-height:0}
.ring-btn:hover .ring{transform:scale(1.08);transition:transform .12s}
.ring-btn:focus-visible{outline:2px solid var(--ocean);outline-offset:3px;border-radius:50%}
/* scorecard pop-up: the score-vs-baseline breakdown Jordan loves */
.scorecard{max-width:460px}
.sc-top{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.sc-ring{flex-shrink:0}
.sc-h{font-family:'Fraunces',serif;font-size:1.3rem;font-weight:600;margin:0;color:var(--ink)}
.sc-sub{font-size:.8rem;color:var(--ink-soft);margin:2px 0 0;text-transform:capitalize}
.sc-quote{font-family:'Fraunces',serif;font-size:1.02rem;line-height:1.42;color:var(--ink);
  border-left:3px solid var(--lavender);padding-left:13px;margin:0 0 16px}
.sc-parts{display:flex;flex-direction:column;gap:11px;margin-bottom:14px}
.sc-row{display:grid;grid-template-columns:minmax(0,1fr) 130px 30px;align-items:center;gap:12px}
.sc-row.absent{opacity:.5}
.sc-lbl{display:flex;flex-direction:column;gap:1px;font-size:.88rem;color:var(--ink);min-width:0}
.sc-lbl em{font-style:normal;font-size:.64rem;color:var(--ink-soft);font-family:'Spline Sans Mono',monospace;letter-spacing:.03em}
.sc-bar{height:9px;background:var(--well);border:1px solid var(--line);border-radius:99px;overflow:hidden}
.sc-bar i{display:block;height:100%;border-radius:99px;transition:width .3s ease}
.sc-bar i.hot{background:var(--sunset)}
.sc-bar i.warm{background:var(--lavender)}
.sc-bar i.low{background:var(--gray)}
.sc-val{font-family:'Spline Sans Mono',monospace;font-size:.9rem;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.piece .hook{font-size:14px;font-weight:700;line-height:1.4;margin-bottom:10px;letter-spacing:-.005em;font-family:'Karla',system-ui,sans-serif}
.piece .hook q{quotes:"\201C" "\201D"}
.piece .stats{
  font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:11px;color:var(--ink-soft);
  display:flex;gap:12px;font-variant-numeric:tabular-nums;margin-bottom:12px;flex-wrap:wrap;
}
.piece .stats .er{color:var(--ocean-deep)}
.piece-chips{display:flex;gap:6px;flex-wrap:wrap}
.piece-chip{
  font-size:11px;font-weight:500;border-radius:6px;padding:3px 8px;
  background:var(--well);color:var(--ink-soft);border:1px solid var(--line);
}
.piece-chip.pf{background:var(--ocean-soft);color:var(--ocean-deep);border-color:transparent}
.piece .foot{
  display:flex;justify-content:space-between;align-items:center;margin-top:12px;
  padding-top:12px;border-top:1px solid var(--line);
}
.piece .foot .date{font-size:11.5px;color:var(--ink-soft)}
.piece .foot .go{font-size:.78rem;color:var(--ocean);font-weight:700;white-space:nowrap;background:none;border:none;cursor:pointer;text-decoration:none}
.piece .foot .go:hover{text-decoration:underline}
.top-performers-note{font-size:.78rem;color:var(--ink-soft);margin-top:10px;line-height:1.55}

/* task board */
.taskboard .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.taskboard input[type=text]{flex:1;min-width:200px;border:1px solid var(--line);border-radius:var(--radius-sm);padding:9px 12px;font:inherit;font-size:.88rem;background:#fff;color:var(--ink)}
.taskboard select{border:1px solid var(--line);border-radius:var(--radius-sm);padding:9px 12px;font:inherit;font-size:.88rem;background:#fff;color:var(--ink)}
.btn{border-radius:var(--radius-sm);padding:9px 16px;font-size:.82rem;font-weight:700;border:1px solid var(--line);background:#fff;color:var(--ink)}
.btn.primary{background:var(--ocean);border-color:var(--ocean);color:#fff}
.btn.primary:hover{background:#0b6377}
.btn:hover{background:var(--seafoam)}
.btn.quiet{background:none;border-color:transparent;font-weight:500;color:var(--ink-soft)}
.btn.quiet:hover{background:var(--seafoam);border-color:transparent}

/* ---------- the team tab ---------- */
.jobs-table{width:100%;border-collapse:collapse}
.jobs-table th{text-align:left;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);padding:8px 10px;border-bottom:1px solid var(--line)}
.jobs-table td{padding:12px 10px;border-bottom:1px solid var(--line);font-size:.88rem;vertical-align:middle}
.jobs-table tr:last-child td{border-bottom:none}
.jobs-table .mono{font-family:'Spline Sans Mono',monospace;font-size:.75rem;color:var(--ink-soft)}
.legend{display:flex;gap:18px;margin-top:14px;font-size:.78rem;color:var(--ink-soft);align-items:center}
.legend span{display:flex;align-items:center;gap:6px}
/* Team run triage: two columns (unsuccessful | successful) + employee filter */
.triage-bar{display:flex;align-items:center;gap:12px;margin-bottom:2px}
.triage-bar h3{margin:0;flex:1}
.triage-bar .cal-channel{margin-left:0}
.triage-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px}
@media(max-width:760px){.triage-cols{grid-template-columns:1fr}}
.triage-col{border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px;background:var(--well)}
.triage-col.bad{border-left:3px solid var(--red)}
.triage-col.good{border-left:3px solid var(--green)}
.triage-head{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.triage-head h3{margin:0;font-size:1rem}
.triage-count{font-family:'Spline Sans Mono',monospace;font-size:.74rem;font-weight:600;
  border-radius:var(--radius-pill);padding:1px 9px;font-variant-numeric:tabular-nums}
.triage-col.bad .triage-count{color:var(--red);background:var(--red-soft)}
.triage-col.good .triage-count{color:var(--green);background:var(--green-soft)}
.runline{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.runline:last-child{border-bottom:none}
.runline .light{margin-top:3px}
.runline-main{flex:1;min-width:0}
.runline-top{font-size:.9rem;color:var(--ink)}
.runline-sub{font-size:.72rem;color:var(--ink-soft);margin-top:2px}
.runline .btn{flex-shrink:0}
.triage-other{margin-top:12px;font-size:.78rem}
.roster-row{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.roster-row:last-child{border-bottom:none}
.roster-row .body{flex:1}
.roster-row .nm{font-weight:700}
.roster-row .rl{font-size:.8rem;color:var(--ink-soft);margin-bottom:6px}
.skill-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.skill-tag{font-size:.72rem;background:var(--seafoam);color:var(--ink);border-radius:var(--radius-pill);padding:3px 10px}
.skill-tag.planned{background:#F0EDE7;color:var(--ink-soft);font-style:italic}
.roster-row .note{font-size:.78rem;color:var(--ink-soft);margin-top:6px}

/* ---------- placeholder tabs ---------- */
.empty-state{border:1.5px dashed var(--line);border-radius:var(--radius);padding:34px;text-align:center;background:rgba(255,255,255,.5)}
.empty-state .big{font-family:'Fraunces',serif;font-size:1.15rem;margin-bottom:8px}
.empty-state p{color:var(--ink-soft);font-size:.9rem;max-width:460px;margin:0 auto 16px;line-height:1.55}
.ph-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
.ph-card{border:1.5px dashed var(--line);border-radius:var(--radius);padding:16px;color:var(--ink-soft);font-size:.8rem;line-height:1.5;background:rgba(255,255,255,.4)}
.ph-card .tag{font-family:'Spline Sans Mono',monospace;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gray);display:block;margin-bottom:6px}

.checklist-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cl-h{font-family:'Fraunces',serif;font-size:.95rem;font-weight:600;margin-bottom:8px}
.cl-h.done{color:var(--green)} .cl-h.doing{color:#B27516} .cl-h.next{color:var(--ocean)}
ul.cl{list-style:none;padding:0}
ul.cl li{font-size:.8rem;line-height:1.5;padding:5px 0;border-bottom:1px dashed var(--line);color:var(--ink)}
ul.cl li:last-child{border-bottom:none}
@media (max-width:900px){.checklist-cols{grid-template-columns:1fr}}

footer.gen{margin-top:40px;font-family:'Spline Sans Mono',monospace;font-size:.65rem;color:var(--ink-soft)}

.chip:focus-visible,.nav-btn:focus-visible{outline:2px solid var(--ocean);outline-offset:2px}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* ---------- toast ---------- */
.toast{position:fixed;bottom:24px;right:24px;background:var(--ink);color:#fff;padding:12px 18px;border-radius:var(--radius-sm);
  font-size:.86rem;font-weight:600;box-shadow:0 8px 24px rgba(22,57,75,.22);opacity:0;transform:translateY(10px);
  transition:opacity .2s ease,transform .2s ease;pointer-events:none;z-index:60;max-width:340px}
.toast.show{opacity:1;transform:translateY(0)}

/* ---------- modal ---------- */
.modal-backdrop{position:fixed;inset:0;background:rgba(22,57,75,.4);display:none;align-items:flex-start;justify-content:center;
  padding:5vh 20px;z-index:70;overflow-y:auto}
.modal-backdrop.show{display:flex}
.modal{background:var(--card);border-radius:var(--radius);max-width:680px;width:100%;padding:28px 32px;box-shadow:0 20px 60px rgba(22,57,75,.3);position:relative}
.modal .modal-close{position:absolute;top:16px;right:18px;background:none;border:none;font-size:1.4rem;color:var(--ink-soft);line-height:1}
.modal .modal-close:hover{color:var(--ink)}
.modal-body h1,.modal-body h2,.modal-body h3{font-family:'Fraunces',serif;color:var(--ink);margin:18px 0 8px}
.modal-body h1{font-size:1.4rem} .modal-body h2{font-size:1.15rem} .modal-body h3{font-size:1rem}
.modal-body p{font-size:.92rem;line-height:1.65;margin:8px 0;color:var(--ink)}
.modal-body ul{margin:8px 0 8px 22px} .modal-body li{font-size:.92rem;line-height:1.6;margin:4px 0}
.modal-body strong{font-weight:700}
/* strategy/weekly reports open here without a .report-body wrapper --
 * mirror the same list/quote/rule/code treatment so they read clean too */
.modal-body ol{margin:8px 0 8px 22px}
.modal-body ol li{font-size:.92rem;line-height:1.6;margin:4px 0}
.modal-body blockquote{margin:8px 0;padding:2px 0 2px 14px;border-left:3px solid var(--ocean);color:var(--ink-soft)}
.modal-body hr{border:none;border-top:1px solid var(--line);margin:18px 0}
.modal-body pre{background:var(--well);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:12px 14px;margin:8px 0;overflow-x:auto;font-family:'Spline Sans Mono',monospace;font-size:.82rem;line-height:1.5}
.modal-body pre code{background:none;padding:0;border-radius:0}
/* the report reader (Task 4): a constrained column reads easier than the
 * full 680px modal width, so Ada's and Tia's full reports get their own
 * measure inside the shared .modal-body chrome */
.modal-body .report-body{max-width:65ch;margin:0 auto}

/* ======================================================== Content Bank === */
/* Kanban board + "Notion feel" full-page doc editor. Reuses .tagpill, .pill,
 * and .btn from the shared component styles above. */

.bank-header{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.bank-filters{display:flex;gap:16px;flex-wrap:wrap}
.bank-filters label{display:flex;flex-direction:column;gap:4px;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft)}
.bank-filters select{border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 12px;font:inherit;font-size:.88rem;background:#fff;color:var(--ink);text-transform:none;letter-spacing:normal;font-weight:400}

/* the board: four columns of cards */
/* six columns, one per stage. minmax(0,1fr) so one unbreakable string (a
   pasted URL) can never stretch a track and force the page sideways. */
.bankboard{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;align-items:start}
.bankcol{background:var(--seafoam);border:1px solid #DCEBE6;border-radius:var(--radius);padding:12px;display:flex;flex-direction:column;min-height:120px}
.bankcol.over{border-color:var(--ocean);box-shadow:0 0 0 2px rgba(14,116,144,.2) inset}
.bankcol-head{font-family:'Fraunces',serif;font-weight:600;font-size:.95rem;color:var(--ink);display:flex;align-items:center;gap:8px;margin-bottom:10px;padding:0 2px}
.bankcol-count{font-family:'Spline Sans Mono',monospace;font-size:.68rem;color:var(--ink-soft);background:#fff;border:1px solid var(--line);border-radius:var(--radius-pill);padding:1px 8px;font-weight:400}
.bankcol-drop{display:flex;flex-direction:column;gap:10px;flex:1;min-height:40px;max-height:68vh;overflow-y:auto}
.bankcol-empty{font-size:.78rem;color:var(--ink-soft);text-align:center;padding:14px 6px;opacity:.7}

/* a card */
.bankcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 13px;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease;min-width:0}
.bankcard:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(22,57,75,.08)}
.bankcard.dragging{opacity:.45}
.bankcard-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.bankcard-top .who{width:24px;height:24px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-weight:700;font-size:.7rem;flex-shrink:0}
.tagpill{display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 9px;border-radius:var(--radius-pill);background:#EDE7DD;color:var(--ink-soft)}
.tagpill.platform{background:#E4EEF1;color:var(--ocean)}
.tagpill.format{background:#F3E9DA;color:#9A6B2F}
.tagpill.pillar{background:#E7EFE3;color:#4E7A3E}
.tagpill.bucket{background:#EFE4EE;color:#8A5A86}
.bankcard-pills{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.bankcard-topic{font-size:.7rem;color:var(--ink-soft);font-style:italic}
.pill.status.concept{background:#EFE4EE;color:#8A5A86}
.pill.status.queued{background:#FBEFD9;color:#B27516}
.doc-tags{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 12px}
.bank-actions{display:flex;gap:12px;align-items:center}
.bank-viewtoggle{display:flex;gap:4px}
.banktable-wrap{margin-top:12px;overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff}
.banktable{width:100%;border-collapse:collapse;font-size:.84rem}
.banktable th{text-align:left;font-size:.66rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);padding:11px 12px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--seafoam)}
.banktable td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.banktable tbody tr:last-child td{border-bottom:none}
.banktable-row{cursor:pointer}
.banktable-row:hover{background:var(--seafoam)}
.bt-title{font-weight:700;color:var(--ink);min-width:220px;max-width:360px}
.bt-topic{color:var(--ink-soft);font-style:italic;white-space:nowrap}
.bt-date{color:var(--ink-soft);white-space:nowrap}
.bank-wiplimit{margin:14px 0 0;padding:12px 16px;background:#FBEFD9;border:1px solid #E9C88A;border-radius:var(--radius-sm);color:#8A5A1F;font-size:.86rem;font-weight:700}
/* one-shot cap override (Jul 9): quiet button, loud when armed */
.bank-cap-override{margin-left:12px;font-size:.78rem;padding:4px 10px;vertical-align:middle}
.bank-cap-override.armed{background:var(--amber);border-color:var(--amber);color:#fff}
.bankcol.over{outline:2px solid var(--amber);outline-offset:2px}
.bankcol-count.over{background:var(--amber);color:#fff}
.bankcard-hook{font-weight:700;font-size:.92rem;line-height:1.35;margin-bottom:6px;color:var(--ink)}
/* clamp to 3 lines on the card: the full text lives one click away in the
   editor. Unclamped previews were making the board a 24,000px page. */
.bankcard-preview{font-size:.8rem;color:var(--ink-soft);line-height:1.45;margin-bottom:10px;white-space:pre-wrap;overflow-wrap:break-word;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bankcard-foot{display:flex;justify-content:space-between;align-items:center;gap:8px}
.bankcard-cta{font-family:'Spline Sans Mono',monospace;font-size:.64rem;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bankcard-date{font-family:'Spline Sans Mono',monospace;font-size:.64rem;color:var(--gray);flex-shrink:0}

/* status pill colors for the doc editor meta line */
.pill.status.draft{background:#F0EDE7;color:var(--ink-soft)}
.pill.status.needs_changes{background:#FBEFD9;color:#B27516}
.pill.status.approved{background:#E4F3EA;color:var(--green)}
.pill.status.posted{background:#E4EEF1;color:var(--ocean)}
.pill.status.archived{background:#EDE7DD;color:var(--ink-soft)}
.pill.status.killed{background:#FBE3E3;color:var(--red)}

/* the quiet destructive button (Kill it): red text, never a red slab */
.btn.danger{color:var(--red);border-color:#EFC7C7}
.btn.danger:hover{background:#FBE3E3;border-color:var(--red)}

/* markdown tables from mdToHtml (Ada's funnel table) */
.md-tablewrap{overflow-x:auto;margin:10px 0 14px;border:1px solid var(--line);border-radius:var(--radius-sm)}
.md-table{width:100%;border-collapse:collapse;font-size:.82rem}
.md-table th{text-align:left;font-size:.66rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);padding:9px 12px;border-bottom:1px solid var(--line);background:var(--seafoam);white-space:nowrap}
.md-table td{padding:8px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.md-table tbody tr:last-child td{border-bottom:none}
code{font-family:'Spline Sans Mono',monospace;font-size:.85em;background:var(--seafoam);border-radius:5px;padding:1px 5px}

/* ---------- the doc editor overlay ("Notion feel") ---------- */
.doc-overlay{position:fixed;inset:0;background:var(--paper);z-index:80;overflow-y:auto;display:flex;flex-direction:column}
.doc-bar{position:sticky;top:0;background:var(--paper);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:12px 24px;gap:12px;z-index:2}
.doc-bar-left,.doc-bar-right{display:flex;align-items:center;gap:8px}
.doc-bar .btn{font-size:.78rem;padding:7px 13px}
.doc-close{font-size:1.2rem;line-height:1;padding:4px 12px}
.doc-saved{font-family:'Spline Sans Mono',monospace;font-size:.68rem;color:var(--green);opacity:0;transition:opacity .3s ease}
.doc-pos{font-family:'Spline Sans Mono',monospace;font-size:.68rem;color:var(--ink-soft);white-space:nowrap}
.doc-bar .btn[disabled]{opacity:.35;cursor:default}
.doc-saved.show{opacity:1}

.doc-page{max-width:680px;width:100%;margin:0 auto;padding:44px 24px 120px}
.doc-hook{width:100%;border:none;background:none;outline:none;font-family:'Fraunces',serif;font-weight:600;font-size:2rem;line-height:1.2;color:var(--ink);padding:0;margin-bottom:14px;resize:none;overflow:hidden;display:block}
.doc-hook::placeholder{color:var(--gray)}
.doc-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.82rem;color:var(--ink-soft);margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.doc-dates{font-family:'Spline Sans Mono',monospace;font-size:.68rem;color:var(--gray)}
.doc-callout{background:#FBEFD9;border-left:4px solid var(--amber);border-radius:var(--radius-sm);padding:12px 14px;font-size:.88rem;line-height:1.5;color:#7A5210;margin-bottom:22px}
.doc-callout strong{color:#B27516}
.doc-body{width:100%;border:none;background:none;outline:none;resize:none;font-family:'Karla',sans-serif;font-size:1.05rem;line-height:1.7;color:var(--ink);padding:0;min-height:50vh}
.doc-body::placeholder{color:var(--gray)}

/* inline send-back note box inside the editor */
.doc-notebox{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px;margin-bottom:22px;display:flex;flex-direction:column;gap:10px}
.doc-notebox textarea{width:100%;min-height:90px;border:1px solid var(--line);border-radius:8px;padding:10px 12px;font:inherit;font-size:.92rem;resize:vertical}
.doc-notebox .btn{align-self:flex-start}
/* the why-box for a kill: same bones, a quiet red edge */
.doc-killbox{border-color:#EFC7C7;background:rgba(224,82,82,.04)}
html[data-theme="dark"] .doc-killbox{border-color:#5A2A2A}
.doc-sched-who{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft)}
.doc-sched-who select{border:1px solid var(--line);border-radius:8px;padding:6px 10px;font:inherit;font-size:.88rem;background:var(--card);color:var(--ink);text-transform:none;letter-spacing:normal;font-weight:400}
/* the two-text piece: caption block above the content (carousels/videos) */
.doc-caption-label{font-family:'Spline Sans Mono',monospace;font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin:14px 0 6px}
.doc-caption{width:100%;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card);outline:none;resize:vertical;font-family:'Karla',sans-serif;font-size:.95rem;line-height:1.6;color:var(--ink);padding:12px 14px;min-height:110px}
.doc-caption::placeholder{color:var(--gray)}

/* New piece meta inputs */
.doc-newmeta{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:22px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.doc-newmeta label{display:flex;flex-direction:column;gap:4px;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft)}
.doc-newmeta input,.doc-newmeta select{border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:inherit;font-size:.9rem;background:#fff;color:var(--ink);text-transform:none;letter-spacing:normal;font-weight:400}

@media (max-width:1200px){
  .bankboard{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .bankboard{grid-template-columns:minmax(0,1fr)}
  .bankcol-drop{max-height:none;overflow-y:visible}
  .doc-newmeta{grid-template-columns:1fr}
}

/* (Responsive top-bar + phone layer live at the END of this file, after every
   base rule, so their overrides always win the cascade.) */

/* ================================================== Living floor (Task 8) === */
/* The Team tab as a scene, ported from the approved office-floor-scene mockup.
   Pods are drawn from state.team: lamp = status_light, papers badge =
   pending_count, bobbing + bubble when working, floating z's when idle. No
   pixel art, no faces, just initials medallions. */

.scene{max-width:1060px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#FBF5EE;box-shadow:0 10px 40px rgba(22,57,75,.08);margin-bottom:18px}

/* back wall with windows onto the ocean/sunset */
.wall{position:relative;height:190px;background:linear-gradient(180deg,#F7EEE2,#F3E7D7);border-bottom:6px solid #E3D3BC}
.window{position:absolute;top:26px;width:190px;height:130px;border-radius:12px;border:7px solid #FFF;box-shadow:0 4px 14px rgba(22,57,75,.12);overflow:hidden}
.window .sky{position:absolute;inset:0;background:linear-gradient(180deg,#8AC6D0 0%,#B7DBD8 34%,#F7C97F 68%,#F2907C 100%)}
.window .sun{position:absolute;left:50%;top:52%;width:34px;height:34px;border-radius:50%;transform:translateX(-50%);background:radial-gradient(circle at 35% 35%,#FFE9B8,#F59E0B 75%);box-shadow:0 0 22px 8px rgba(245,158,11,.45)}
.window .sea{position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(180deg,#2E8CA0,#0E7490)}
.window .glint{position:absolute;left:20%;right:30%;bottom:16%;height:3px;border-radius:3px;background:rgba(255,236,180,.65)}
.w1{left:6%}.w2{left:50%;transform:translateX(-50%)}.w3{right:6%}
.wallclock{position:absolute;top:64px;left:33.5%;width:44px;height:44px;border-radius:50%;background:#fff;border:4px solid #E3D3BC;box-shadow:0 2px 8px rgba(22,57,75,.1)}
.wallclock::before{content:"";position:absolute;left:50%;top:50%;width:2px;height:12px;background:var(--ink);transform-origin:bottom;transform:translate(-50%,-100%) rotate(40deg)}
.wallclock::after{content:"";position:absolute;left:50%;top:50%;width:2px;height:8px;background:var(--coral);transform-origin:bottom;transform:translate(-50%,-100%) rotate(-70deg)}
.sign{position:absolute;top:70px;right:32.5%;font-family:'Fraunces',serif;font-weight:600;font-size:.9rem;color:#B99B6B;letter-spacing:.06em;transform:rotate(-2deg);background:#fff;border:2px solid #E3D3BC;border-radius:8px;padding:6px 14px;box-shadow:0 2px 8px rgba(22,57,75,.08)}

/* floor */
.floorarea{position:relative;padding:34px 34px 40px;background:repeating-linear-gradient(90deg,#F6EDE1 0 86px,#F2E7D8 86px 172px)}
.deskrow{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-bottom:30px}
.deskrow:last-child{margin-bottom:0}

/* one desk pod */
.pod{position:relative;cursor:pointer;transition:transform .15s ease}
.pod:hover{transform:translateY(-4px)}
.pod .hoverhint{position:absolute;inset:-10px -8px;border-radius:16px;border:2px dashed transparent;transition:border-color .15s}
.pod:hover .hoverhint{border-color:rgba(14,116,144,.4)}
.pod:hover .tooltip,.frontdesk:hover .tooltip{opacity:1;transform:translate(-50%,0)}
.pod:focus-visible,.frontdesk:focus-visible{outline:2px solid var(--ocean);outline-offset:4px;border-radius:16px}

/* the worker */
.worker{position:relative;width:72px;margin:0 auto;z-index:2}
.pod .head,.frontdesk .head{width:44px;height:44px;border-radius:50%;margin:0 auto;display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Fraunces',serif;font-weight:700;font-size:1.15rem;border:3px solid #fff;box-shadow:0 3px 10px rgba(22,57,75,.18);position:relative;z-index:2}
.torso{width:58px;height:26px;border-radius:14px 14px 4px 4px;margin:-6px auto 0;position:relative;z-index:1}
.working .worker{animation:bob 2.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* thought bubble while working */
.bubble{position:absolute;top:-26px;left:58%;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:2px 8px;font-family:'Spline Sans Mono',monospace;font-size:.6rem;color:var(--ocean);box-shadow:0 2px 6px rgba(22,57,75,.1);z-index:3;white-space:nowrap}
.bubble::after{content:"";position:absolute;bottom:-5px;left:10px;width:8px;height:8px;background:#fff;border-left:1.5px solid var(--line);border-bottom:1.5px solid var(--line);transform:rotate(-45deg)}
.working .bubble .dots::after{content:"";animation:think 1.6s steps(4,end) infinite}
@keyframes think{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.idle-z{position:absolute;top:-24px;left:60%;font-family:'Fraunces',serif;color:var(--gray);font-size:.85rem;font-weight:600;z-index:3}
.idle-z span{display:inline-block;animation:floatz 3s ease-in-out infinite}
.idle-z span:nth-child(2){animation-delay:.5s;font-size:.7rem}
@keyframes floatz{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-4px);opacity:1}}

/* the desk itself */
.desk3d{position:relative;margin-top:-8px;z-index:3}
.desktop3d{height:34px;border-radius:8px;background:linear-gradient(180deg,#E8D5BC,#D9C09E);box-shadow:0 6px 0 #C9B08C, 0 10px 16px rgba(22,57,75,.14);position:relative}
.legs{display:flex;justify-content:space-between;padding:0 12px}
.legs i{width:7px;height:22px;background:#C9B08C;border-radius:0 0 3px 3px}
.laptop{position:absolute;left:10px;top:-14px;width:26px;height:16px;background:#3E5A6B;border-radius:3px 3px 0 0;border-bottom:3px solid #2C4454}
.laptop::after{content:"";position:absolute;inset:2px;background:linear-gradient(135deg,#9FD8DF,#EAF4F1);border-radius:2px}
.working .laptop::after{animation:screenflicker 2.8s ease-in-out infinite}
@keyframes screenflicker{0%,100%{opacity:1}50%{opacity:.75}}
.papers{position:absolute;right:10px;top:-11px;width:22px;height:11px;background:#fff;border:1px solid var(--line);border-radius:2px;box-shadow:0 -3px 0 -1px #fff,0 -6px 0 -2px #FFF7EC}
.papers .count{position:absolute;top:-14px;right:-9px;min-width:18px;height:18px;border-radius:var(--radius-sm);background:var(--sunset);color:#fff;font-size:.62rem;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px;box-shadow:0 2px 6px rgba(245,158,11,.4)}
.deskplant{position:absolute;right:-16px;top:-20px;font-size:1.05rem}
.mug{position:absolute;left:44px;top:-9px;width:9px;height:8px;background:var(--coral);border-radius:1px 1px 3px 3px}
.mug::after{content:"";position:absolute;right:-4px;top:1px;width:4px;height:4px;border:1.5px solid var(--coral);border-left:none;border-radius:0 4px 4px 0}
/* status lamp on desk */
.lamp{position:absolute;left:-15px;top:-22px;width:10px;height:10px;border-radius:50%;z-index:4}
.lamp.green{background:var(--green);box-shadow:0 0 0 4px rgba(46,158,107,.18),0 0 12px rgba(46,158,107,.55)}
.lamp.amber{background:var(--amber);box-shadow:0 0 0 4px rgba(233,162,59,.18),0 0 12px rgba(233,162,59,.55)}
.lamp.gray{background:var(--gray);box-shadow:0 0 0 4px rgba(185,194,200,.2)}
.lamp::after{content:"";position:absolute;left:50%;top:9px;width:3px;height:14px;background:#C9B08C;transform:translateX(-50%);border-radius:2px;z-index:-1}

/* nameplate */
.plate{margin-top:16px;text-align:center}
.plate .nm{font-weight:700;font-size:.92rem}
.plate .rl{font-size:.72rem;color:var(--ink-soft)}
.plate .doing{font-family:'Spline Sans Mono',monospace;font-size:.64rem;margin-top:3px;color:var(--ocean)}
.plate .doing.idle{color:var(--gray)}

/* hover tooltip = the mini stat card */
.tooltip{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translate(-50%,6px);opacity:0;pointer-events:none;transition:all .18s ease;background:var(--ink);color:#fff;border-radius:var(--radius-sm);padding:10px 14px;font-size:.72rem;line-height:1.7;white-space:nowrap;z-index:20;box-shadow:0 10px 24px rgba(22,57,75,.3)}
.tooltip b{color:#FFD98E}
.tooltip .enter{color:#9FD8DF;font-weight:700}

/* front desk (claudisha) */
.frontdesk{position:absolute;top:118px;left:50%;transform:translateX(-50%);z-index:5;text-align:center;cursor:pointer;transition:transform .15s}
.frontdesk:hover{transform:translateX(-50%) translateY(-3px)}
.frontdesk .counter{width:150px;height:26px;border-radius:var(--radius-sm) 10px 4px 4px;background:linear-gradient(180deg,#F2907C,#E87B66);box-shadow:0 5px 0 #D66A56,0 9px 14px rgba(242,109,91,.28);position:relative;margin-top:-10px}
.frontdesk .counter::after{content:"FRONT DESK";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Spline Sans Mono',monospace;font-size:.55rem;letter-spacing:.16em;color:rgba(255,255,255,.85)}
.frontdesk .head{width:38px;height:38px;font-size:.95rem}
.frontdesk .plate .nm{font-size:.8rem}

/* rug */
.rug{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);width:46%;height:56px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(14,116,144,.12),rgba(14,116,144,.04) 70%,transparent 75%);border:2px dashed rgba(14,116,144,.15)}

/* legend row under the scene */
.floor-legend{display:flex;gap:22px;align-items:center;margin:4px 4px 18px;font-size:.78rem;color:var(--ink-soft);flex-wrap:wrap}
.floor-legend span{display:flex;align-items:center;gap:7px}
.floor-legend .dotk{width:10px;height:10px;border-radius:50%}

@media(max-width:900px){.deskrow{grid-template-columns:1fr;gap:40px}.frontdesk{display:none}.wallclock,.sign{display:none}}

/* ================================================== Employee rooms (Task 8) === */
/* Ported from the approved office-workspace-mockup room section: header, the
   Punch clock column, the Waiting on you column (reuses Task 7 contentCard),
   and Desk chat below it. */

.room{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);overflow:hidden;margin-bottom:16px}
.room .roomhead{padding:22px 24px 18px;background:linear-gradient(135deg,#FFF7EC,#FDF9F5 55%);border-bottom:1px solid var(--line);display:flex;gap:16px;align-items:center}
.room .roomhead .avatar{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Fraunces',serif;font-weight:700;font-size:1.4rem;border:3px solid #fff;box-shadow:0 2px 8px rgba(22,57,75,.16);flex-shrink:0}
.room .roomhead .nm{font-family:'Fraunces',serif;font-size:1.4rem;font-weight:600}
.room .roomhead .rl{font-size:.85rem;color:var(--ink-soft)}
.room .roomhead .backlink{margin-left:auto;font-size:.78rem;color:var(--ocean);font-weight:700;background:none;border:none;white-space:nowrap}
.room .roomhead .backlink:hover{text-decoration:underline}
.roomcols{display:grid;grid-template-columns:1.25fr 1fr;gap:0}
.roomcols>div{padding:20px}
.roomcols>div:first-child{border-right:1px solid var(--line)}
.roomcols h4{font-family:'Fraunces',serif;font-size:.95rem;font-weight:600;margin-bottom:12px}

.runrow{display:flex;gap:10px;align-items:baseline;padding:9px 0;border-bottom:1px dashed var(--line);font-size:.85rem}
.runrow:last-child{border-bottom:none}
.runrow .when{font-family:'Spline Sans Mono',monospace;font-size:.68rem;color:var(--ink-soft);width:86px;flex-shrink:0}
.runrow .what{flex:1}
.runrow .cost{font-family:'Spline Sans Mono',monospace;font-size:.7rem;color:var(--ink-soft)}
.punch-empty{font-size:.82rem;color:var(--ink-soft);padding:8px 0}
.spendline{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:.78rem;color:var(--ink-soft);line-height:1.55}
.spendline b{color:var(--ink)}

/* Waiting on you column: reuse Task 7 contentCards in a single stack */
.room-waiting{display:flex;flex-direction:column;gap:10px}
.room-empty{font-size:.82rem;color:var(--ink-soft);padding:8px 0}

/* Desk chat */
.deskchat{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.chatthread{display:flex;flex-direction:column;gap:10px;margin-bottom:12px;max-height:340px;overflow-y:auto}
.chatline{max-width:82%;font-size:.86rem;line-height:1.45}
.chatline .cts{display:block;font-family:'Spline Sans Mono',monospace;font-size:.6rem;color:var(--gray);margin-top:3px}
.chatline.northwind{align-self:flex-end;text-align:right}
.chatline.northwind .cbubble{background:var(--seafoam);color:var(--ink);border-radius:14px 14px 4px 14px;padding:9px 13px;display:inline-block;text-align:left}
.chatline.them{align-self:flex-start}
.chatline.them .cbubble{background:var(--card);border:1px solid var(--line);border-radius:14px 14px 14px 4px;padding:9px 13px;display:inline-block}
.chatempty{font-size:.82rem;color:var(--ink-soft);padding:6px 0 12px}
.chatform{display:flex;gap:8px;align-items:flex-start}
.chatform textarea{flex:1;min-height:52px;border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px;font:inherit;font-size:.88rem;resize:vertical;background:#fff}
.chatform .btn{flex-shrink:0}
.chatnote{font-family:'Spline Sans Mono',monospace;font-size:.66rem;color:var(--coral);margin-top:10px}

/* ---------- Analytics ---------- */
.report-body{font-size:.92rem;line-height:1.6;color:var(--ink)}
.report-body h1,.report-body h2,.report-body h3{font-family:'Fraunces',serif;margin:14px 0 8px}
.report-body h1{font-size:1.15rem}.report-body h2{font-size:1.05rem}.report-body h3{font-size:.98rem}
.report-body p{margin:0 0 10px}
.report-body ul{margin:0 0 10px 20px}
.report-body li{margin:3px 0}
/* ordered/nested lists, quotes, rules, code -- same treatment mdToHtml
 * now emits for Ada/Tia reports (task 3: the shared renderer fix) */
.report-body ol{margin:0 0 10px 20px}
.report-body ol li{margin:3px 0}
.report-body blockquote{margin:0 0 10px;padding:2px 0 2px 14px;border-left:3px solid var(--ocean);color:var(--ink-soft)}
.report-body hr{border:none;border-top:1px solid var(--line);margin:16px 0}
.report-body pre{background:var(--well);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:12px 14px;margin:0 0 10px;overflow-x:auto;font-family:'Spline Sans Mono',monospace;font-size:.82rem;line-height:1.5}
.report-body pre code{background:none;padding:0;border-radius:0}
/* ---------- Analytics header, Ada's verdict, placeholders (Task 4) ------- *
 * Ported from the approved Enterprise Ocean mockup; token names already
 * match this file's :root, so nothing here is a raw hex value. */
#panel-4 header{margin-bottom:22px}
.eyebrow{font-family:'Spline Sans Mono',monospace;font-size:.64rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--sunset-deep);margin:0}
h1.title{font-family:'Fraunces',serif;font-weight:600;font-size:1.9rem;letter-spacing:-.01em;margin:5px 0 6px}
.sub{color:var(--ink-soft);font-size:.92rem;margin:0;max-width:70ch}
.sub .stale{color:var(--sunset-deep);font-weight:600}

.sec-label{font-family:'Spline Sans Mono',monospace;font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);display:flex;align-items:center;gap:10px;margin:0 0 10px}
.sec-label::after{content:"";flex:1;height:1px;background:var(--line)}

.verdict{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:22px;align-items:start}
.verdict .head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.verdict .av{width:30px;height:30px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--ocean),var(--ocean-deep));
  color:#fff;display:grid;place-items:center;font-weight:700;font-size:.8rem}
.verdict h3{font-family:'Fraunces',serif;font-weight:600;font-size:1.12rem;margin:0}
.verdict h3 span{display:block;font-family:'Karla',sans-serif;font-size:.74rem;font-weight:400;color:var(--ink-soft)}
.moves{display:flex;flex-direction:column;gap:10px}
.move{display:flex;gap:11px;align-items:flex-start}
.move .n{width:22px;height:22px;border-radius:7px;background:var(--sunset-soft);color:var(--sunset-deep);
  font-family:'Spline Sans Mono',monospace;font-weight:600;font-size:.76rem;display:grid;place-items:center;
  flex-shrink:0;margin-top:1px}
.move p{margin:0;font-size:.9rem}

/* voice player: a real disabled control, not a fake one. aria-disabled +
 * not-allowed cursor + no click handler anywhere, so it calls no audio route
 * until an ElevenLabs key exists in Settings. */
.player{display:flex;align-items:center;gap:11px;margin-top:16px;padding:11px 13px;
  border:1px dashed var(--line-strong);border-radius:var(--radius-pill);color:var(--ink-soft);
  font-size:.82rem;cursor:not-allowed;background:var(--well)}
.player .play{width:26px;height:26px;border-radius:50%;background:var(--card);
  border:1px solid var(--line-strong);display:grid;place-items:center;flex-shrink:0}
.player .play::after{content:"";border-left:8px solid var(--ink-soft);border-top:5px solid transparent;
  border-bottom:5px solid transparent;margin-left:2px}
.player .cta{margin-left:auto;font-family:'Spline Sans Mono',monospace;font-size:.58rem;
  letter-spacing:.05em;text-transform:uppercase}

/* the Ada verdict card fills its height: the report excerpt grows into the
   white space and fades at the cut; "Read her full report" reveals the rest */
.verdict>.card:first-child{display:flex;flex-direction:column}
.report-excerpt{flex:1;position:relative;overflow:hidden;white-space:pre-wrap;
  font-size:.9rem;line-height:1.52;color:var(--ink);min-height:120px;max-height:300px}
.report-excerpt::after{content:"";position:absolute;left:0;right:0;bottom:0;height:56px;
  background:linear-gradient(transparent,var(--card));pointer-events:none}
.verdict .player{margin-top:14px}
.readbtn{margin-top:14px;border:1px solid var(--line);background:var(--card);color:var(--ocean-deep);
  font:inherit;font-weight:600;font-size:.84rem;padding:9px 14px;border-radius:10px;cursor:pointer;width:100%}
.readbtn:hover{border-color:var(--ocean)}

/* Refresh numbers + Last refreshed: a neutral utility bar, not an alarm
   (the flag list that used to live here moved to Your desk, Aug 22). */
.redcard-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.redcard-head h3{margin:0}
.refresh-btn{flex-shrink:0}
.refresh-btn:focus-visible{outline:2px solid var(--ocean);outline-offset:2px}
.refresh-btn:disabled{opacity:.6;cursor:not-allowed}
.refresh-line{font-size:.8rem;color:var(--ink-soft);margin:0 0 10px}
.refresh-when{font-family:'Spline Sans Mono',monospace;font-variant-numeric:tabular-nums;color:var(--ink)}

/* placeholder cards: the honest "not built yet" state (Tasks 6-8 replace these) */
.card.ph{border:1.5px dashed var(--line-strong);color:var(--ink-soft);font-size:.85rem;
  text-align:center;padding:34px 16px;margin-bottom:22px}

/* stat tiles + charts: "At a glance" (Task 5), lifted from the approved
 * mockup's .stats/.stat/.charts/.chart-h with its token names already
 * matching this file's :root, so nothing here is a raw hex value. */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:22px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px}
.stat .k{font-size:.74rem;color:var(--ink-soft);margin-bottom:5px}
.stat .v{font-family:'Spline Sans Mono',monospace;font-size:1.5rem;font-weight:500;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.stat .delta{font-size:.74rem;margin-top:3px}
.stat .delta.up{color:var(--green)}
.stat .delta.flat{color:var(--ink-soft)}
.stat .delta.down{color:var(--red)}
.charts{display:grid;grid-template-columns:1.15fr 1fr;gap:16px;margin-bottom:22px}
@media (max-width:760px){.charts{grid-template-columns:1fr}}
.chart-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.chart-h .t{font-weight:700;font-size:.9rem}
.chart-h .m{font-size:.72rem;color:var(--ink-soft)}
.charts svg{display:block;width:100%;height:auto;overflow:visible}
.chart-empty{color:var(--ink-soft);font-size:.85rem;padding:24px 4px;text-align:center}

/* ---------- Analytics: the play zone (Task 6) -----------------------------
 * Lifted from the approved mockup's .playbar/.seg/.sortsel/.feed/.pcard/
 * .metrics/.pact/.tablewrap, converted to this file's own token names (no
 * raw hex besides the established white-on-accent #fff) and this file's
 * 'Spline Sans Mono' literal (there is no --mono var here). */
/* sunset wash (Jordan's explicit ask): a soft tint at the top-left fading
   into the plain card surface, so this one zone reads a little more awake
   than its neighbors. --sunset-soft is already tuned per theme, so the same
   rule works unchanged in light and dark. */
.playzone{margin-bottom:22px;background:linear-gradient(165deg,var(--sunset-soft) 0%,var(--card) 60%)}
.playbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.seg{display:inline-flex;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-pill);padding:3px}
.seg button{border:none;background:none;color:var(--ink-soft);font:inherit;font-size:.8rem;font-weight:600;
  padding:6px 15px;border-radius:var(--radius-pill);cursor:pointer}
.seg button.on{background:var(--well);color:var(--ink);box-shadow:0 1px 2px rgba(22,57,75,.12)}
.seg.small button{padding:5px 12px;font-size:.76rem}
.seg button:focus-visible{outline:2px solid var(--ocean);outline-offset:2px}
.sortsel{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:.78rem;color:var(--ink-soft)}
.sortsel select{font:inherit;font-size:.8rem;color:var(--ink);background:var(--card);border:1px solid var(--line);
  border-radius:9px;padding:6px 10px;cursor:pointer}
.sortsel select:focus-visible{outline:2px solid var(--ocean);outline-offset:2px}
.count-note{font-size:.76rem;color:var(--ink-soft);font-family:'Spline Sans Mono',monospace;margin:12px 2px 0}

.feed{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-top:14px}
.feed.hidden,.tablewrap.hidden{display:none}
/* "See more"/"See fewer" on the FEED grid only (Jordan's review: caps the
   grid at 9 cards); spans every column so it reads as one row of its own,
   never squeezed into a card-width cell. */
.feed-more{grid-column:1/-1;justify-self:start;background:none;border:none;color:var(--ocean);
  font-weight:700;font-size:.82rem;padding:6px 2px;cursor:pointer}
.feed-more:hover{text-decoration:underline}
.feed-more:focus-visible{outline:2px solid var(--ocean);outline-offset:2px}
.pcard{border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;display:flex;flex-direction:column;
  background:var(--card);transition:border-color .14s,transform .14s}
.pcard:hover{border-color:var(--ocean);transform:translateY(-2px)}
.pcard .body{padding:14px 15px;display:flex;flex-direction:column;gap:10px;flex:1}
/* Light editorial quote-card (Jordan, redesign): the post in Fraunces on a
   light, theme-aware surface with one oversized ocean-to-sunset quotation-mark
   signature. Replaces the old dark navy tile -- dark --panel is reserved for
   genuinely raw material (transcripts) now, never a finished post. */
.pcard.threads .quote{position:relative;background:var(--well);color:var(--ink);margin:-14px -15px 0;
  padding:16px 15px 16px 42px;border-bottom:1px solid var(--line);
  font-family:'Fraunces',serif;font-size:1rem;line-height:1.45}
.pcard.threads .quote::before{content:"\201C";position:absolute;left:11px;top:6px;
  font-family:'Fraunces',serif;font-size:2.7rem;line-height:1;font-weight:600;pointer-events:none;
  background:linear-gradient(135deg,var(--ocean),var(--sunset));
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.pcard.threads .quote .h{font-family:'Spline Sans Mono',monospace;font-size:.6rem;color:var(--ink-soft);
  letter-spacing:.05em;margin-bottom:7px;display:block}
.pcard.ig .capwrap{display:flex;gap:11px}
.pcard.ig .thumb{width:54px;height:70px;border-radius:8px;background:var(--well);border:1px solid var(--line);
  flex-shrink:0;display:grid;place-items:center;color:var(--ink-soft);font-family:'Spline Sans Mono',monospace;
  font-size:.5rem;text-align:center;line-height:1.3;padding:4px}
.pcard.ig .cap{font-size:.9rem}
.prow1{display:flex;align-items:center;gap:9px}
.prow1 .rank{font-family:'Spline Sans Mono',monospace;font-size:.72rem;color:var(--ink-soft);font-weight:600}
.chipset{display:flex;gap:5px;flex-wrap:wrap}
.pchip{font-family:'Spline Sans Mono',monospace;font-size:.58rem;letter-spacing:.04em;text-transform:uppercase;
  border:1px solid var(--line);color:var(--ink-soft);border-radius:var(--radius-pill);padding:2px 8px}
.metrics{display:flex;gap:12px;flex-wrap:wrap;font-family:'Spline Sans Mono',monospace;font-size:.78rem;color:var(--ink);
  font-variant-numeric:tabular-nums;padding-top:2px}
.metrics span{display:flex;flex-direction:column}
.metrics .lab{font-family:'Karla',sans-serif;font-size:.62rem;color:var(--ink-soft);text-transform:none;letter-spacing:0}
.pcard .date{font-size:.72rem;color:var(--ink-soft);margin-left:auto}
.pact{display:flex;gap:8px;border-top:1px solid var(--line);padding:11px 15px;background:var(--well)}
.pact button{flex:1;border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-size:.76rem;
  font-weight:600;padding:7px;border-radius:9px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px}
.pact button.primary{color:var(--sunset-deep);border-color:var(--sunset-soft);background:var(--sunset-soft)}
.pact button:hover{border-color:var(--ocean)}
.pact button:focus-visible{outline:2px solid var(--ocean);outline-offset:2px}

.pnotebox{background:var(--well);border-top:1px solid var(--line);padding:12px 15px;display:flex;flex-direction:column;gap:8px}
.pnotebox textarea{width:100%;min-height:64px;border:1px solid var(--line);border-radius:8px;padding:8px 10px;
  font:inherit;font-size:.84rem;background:var(--card);color:var(--ink);resize:vertical}
.pnotebox textarea:focus-visible{outline:2px solid var(--ocean);outline-offset:2px}
.pnoterow{display:flex;gap:8px}
.pnoterow .btn{flex:none}

.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-sm);margin-top:14px}
.tablewrap table{border-collapse:collapse;width:100%;font-size:.84rem;min-width:560px}
.tablewrap th,.tablewrap td{text-align:right;padding:10px 13px;border-bottom:1px solid var(--line);
  font-variant-numeric:tabular-nums;font-family:'Spline Sans Mono',monospace}
.tablewrap th{font-family:'Karla',sans-serif;font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-soft);cursor:pointer;user-select:none;background:var(--well);position:sticky;top:0}
.tablewrap th.post,.tablewrap td.post{text-align:left;font-family:'Karla',sans-serif;white-space:normal}
.tablewrap td.post{color:var(--ink);max-width:340px}
.tablewrap tbody tr:hover{background:var(--hl)}
.tablewrap th .ar{color:var(--ocean);font-size:.7rem}
@media (max-width:640px){
  .seg button{padding:6px 11px;font-size:.76rem}
  .sortsel{margin-left:0;width:100%}
  .sortsel select{flex:1}
}

/* the play zone's TABLE view caps like the feed (Jordan's review): the
   toggle sits inside the same bordered .tablewrap box the table itself
   uses, so it gets its own breathing room instead of hugging the last row. */
.tablewrap .feed-more{display:inline-block;margin:8px 12px}

/* ---------- Analytics: Email section (Change 3, Jordan's review) ----------
   Sits under the play zone. Reads state.email (data/office/email.json); the
   open-rate row and lead-tag tiles reuse this file's own token names, no raw
   hex, and 'Spline Sans Mono' stays scoped to the numbers/timestamps within
   it (email-num, and .stat's own .v rule already carries the tag counts). */
.email-openrate-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.email-openrate-row .lab{font-weight:700;font-size:.9rem}
.email-openrate-row .val{font-family:'Spline Sans Mono',monospace;font-size:1.4rem;font-weight:600;
  color:var(--ocean);font-variant-numeric:tabular-nums}
.email-openrate-row .note{font-size:.76rem;color:var(--ink-soft)}
.email-tag-stats{margin-bottom:0}
.email-stamp{font-size:.76rem;color:var(--ink-soft);margin-top:12px}
.email-stamp .email-num{font-family:'Spline Sans Mono',monospace}

/* ---------- What's Trending ---------- */
.alertcard{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:var(--radius);padding:20px;margin-bottom:16px}
.alerthead{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.alerttag{font-family:'Spline Sans Mono',monospace;font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--amber);font-weight:700;background:#FBEFD9;padding:2px 8px;border-radius:var(--radius-pill)}
.alertdate{font-family:'Spline Sans Mono',monospace;font-size:.68rem;color:var(--ink-soft)}
.alertcard h3{font-family:'Fraunces',serif;font-weight:600;font-size:1.05rem;margin-bottom:10px}
.digest-list{display:flex;flex-direction:column}
.digest-row{display:flex;justify-content:space-between;align-items:center;width:100%;background:none;border:none;border-bottom:1px solid var(--line);padding:12px 4px;text-align:left;color:var(--ink)}
.digest-row:last-child{border-bottom:none}
.digest-row:hover{background:var(--seafoam)}
.digest-title{font-size:.92rem;font-weight:500}
.digest-date{font-family:'Spline Sans Mono',monospace;font-size:.7rem;color:var(--ink-soft)}

/* the feed: single column, centered, like a real feed */
/* Pinterest-style masonry on wide screens (Jordan, Jul 7): the feed uses the
   whole page width and flows into columns; each card keeps its own height.
   On narrow windows it collapses to one column by itself. The anchor digest
   stays a single full-width row above the grid. */
.trend-feed{columns:340px 3;column-gap:16px}
.trend-feed>*{break-inside:avoid;margin-bottom:16px}
.trend-anchor{columns:auto;column-gap:0}
.trend-anchor>*{margin-bottom:16px}
.trend-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.trend-filter{border:1px solid var(--line);background:var(--card);border-radius:var(--radius-pill);padding:7px 14px;font-size:.78rem;font-weight:700;color:var(--ink-soft);cursor:pointer}
.trend-filter:hover{background:var(--seafoam)}
.trend-filter.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.trend-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;overflow:hidden}
.trend-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.trend-badge{display:inline-block;font-family:'Spline Sans Mono',monospace;font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 10px;border-radius:var(--radius-pill)}
.trend-date{font-family:'Spline Sans Mono',monospace;font-size:.68rem;color:var(--ink-soft);white-space:nowrap}
.trend-title{display:block;font-family:'Fraunces',serif;font-weight:600;font-size:1.15rem;line-height:1.35;color:var(--ink);margin-bottom:8px;text-decoration:none;word-break:break-word}
a.trend-title:hover{color:var(--ocean);text-decoration:underline}
.trend-insight{font-size:.92rem;line-height:1.6;color:var(--ink);margin:0 0 14px}
.trend-suggest{background:var(--seafoam);border-left:4px solid var(--ocean);border-radius:0 10px 10px 0;padding:11px 14px}
.trend-suggest-label{display:block;font-family:'Spline Sans Mono',monospace;font-size:.58rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:4px}
.trend-suggest-text{font-size:.88rem;line-height:1.55;color:var(--ink)}
/* a real video, playing right in the feed card: 16:9, rounded to match */
.trend-video{position:relative;aspect-ratio:16/9;margin:0 0 14px;border-radius:var(--radius-sm);overflow:hidden;background:#000;border:1px solid var(--line)}
.trend-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
/* the actions under a suggestion (and on digest cards): Draft it + Tell Tia */
.trend-actions{display:flex;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap}
.trend-draft{background:var(--ocean);color:#fff;border:none;border-radius:var(--radius-sm);font:inherit;font-size:.78rem;font-weight:700;padding:7px 13px;cursor:pointer}
.trend-draft:hover{filter:brightness(1.08)}
.trend-draft.done,.trend-draft:disabled{background:var(--seafoam);color:var(--ink-soft);cursor:default;filter:none}
.trend-telltia{background:none;border:none;color:var(--ocean);font:inherit;font-size:.78rem;font-weight:600;padding:0;cursor:pointer;text-decoration:underline}
.trend-telltia:hover{color:var(--ink)}
/* footer action row inside the read-it-all modal */
.modal-actions{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);display:flex;gap:12px}
/* weekly digest recap, a touch wider and set apart inside the feed */
.trend-digest{background:linear-gradient(180deg,#fff,var(--seafoam));border:1px solid #D7E8E3;border-radius:var(--radius);padding:20px}
.trend-digest-badge{background:var(--ocean);color:#fff}
.trend-digest-title{font-family:'Fraunces',serif;font-weight:600;font-size:1.15rem;line-height:1.35;margin-bottom:8px}
.trend-digest-excerpt{font-size:.9rem;line-height:1.6;color:var(--ink);margin:0 0 12px}
.trend-readall{background:none;border:none;color:var(--ocean);font-weight:700;font-size:.85rem;padding:0}
.trend-readall:hover{text-decoration:underline}

/* ---------- Content Calendar ---------- *
 * Two-week grid + Month grid (Task 6): tokens only, no hardcoded hex, so
 * dark mode just works via the --*-soft custom properties already defined
 * per theme in :root. Four-state status vocabulary throughout (proposed
 * amber, scheduled ocean, posted green, failed warm red), each carrying a
 * glyph as well as a color -- the no-color-alone accessibility rule. */
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:6px}
.calcell{border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px;min-height:96px;background:var(--card)}
.calcell.today{outline:2px solid var(--sunset);outline-offset:-1px}
.calcell-head{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:6px}
.calday{font-family:'Spline Sans Mono',monospace;font-size:.66rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em}
.calcell-head .calday{margin-bottom:0}
.calcell-add{background:none;border:1px dashed var(--line-strong);border-radius:6px;width:20px;height:20px;
  flex-shrink:0;line-height:1;font-size:.86rem;font-weight:700;color:var(--ink-soft);
  display:flex;align-items:center;justify-content:center;padding:0}
.calcell-add:hover{border-color:var(--ocean);border-style:solid;color:var(--ocean);background:var(--ocean-soft)}
.calslots{display:flex;flex-direction:column;gap:6px}
.calslot{display:block;width:100%;text-align:left;border:none;border-radius:8px;padding:6px 8px;
  font:inherit;font-size:.76rem;line-height:1.3;color:var(--ink);cursor:pointer;
  transition:transform .1s ease,border-color .1s ease}
.calslot:hover{transform:translateY(-1px)}
.calslot:focus-visible{outline:2px solid var(--ocean);outline-offset:1px}
.calslot-mark{font-family:'Spline Sans Mono',monospace;font-weight:700;margin-right:4px}
.calslot.proposed{background:var(--amber-soft)}
.calslot.proposed .calslot-mark{color:var(--amber-deep)}
.calslot.sched{background:var(--ocean-soft)}
.calslot.sched .calslot-mark{color:var(--ocean-deep)}
.calslot.posted{background:var(--green-soft)}
.calslot.posted .calslot-mark{color:var(--green)}
.calslot.failed{background:var(--red-soft)}
.calslot.failed .calslot-mark{color:var(--red)}
.calplatform{display:block;font-family:'Spline Sans Mono',monospace;font-size:.6rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);margin-bottom:3px;overflow-wrap:anywhere}
.calhook{display:block;color:var(--ink)}
.callegend{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px;font-size:.76rem;color:var(--ink-soft);align-items:center}
.callegend span{display:flex;align-items:center;gap:6px}
.calkey{width:12px;height:12px;border-radius:3px;display:inline-block}
.calkey.proposed{background:var(--amber-soft)}
.calkey.sched{background:var(--ocean-soft)}
.calkey.posted{background:var(--green-soft)}
.calkey.failed{background:var(--red-soft)}
.furtherlist{display:flex;flex-direction:column}
.furtherrow{display:flex;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid var(--line);font-size:.86rem}
.furtherrow:last-child{border-bottom:none}
.furtherdate{font-family:'Spline Sans Mono',monospace;font-size:.72rem;color:var(--ink-soft);width:92px;flex-shrink:0}
.furtherhook{flex:1;color:var(--ink)}
.furtherhook[data-open-content]{cursor:pointer;text-decoration:underline;text-decoration-color:var(--line)}
.furtherhook[data-open-content]:hover{text-decoration-color:var(--ocean)}
.furtherstatus{font-family:'Spline Sans Mono',monospace;font-size:.64rem;text-transform:uppercase;letter-spacing:.05em;padding:2px 8px;border-radius:var(--radius-pill);white-space:nowrap}
.furtherstatus .calslot-mark{margin-right:3px}
.furtherstatus.proposed{background:var(--amber-soft);color:var(--amber-deep)}
.furtherstatus.sched{background:var(--ocean-soft);color:var(--ocean-deep)}
.furtherstatus.posted{background:var(--green-soft);color:var(--green)}
.furtherstatus.failed{background:var(--red-soft);color:var(--red)}
@media(max-width:720px){.calgrid{grid-template-columns:repeat(2,1fr)}}

/* the anchored slot popover (Task 6): a small card, not the full-screen
 * modal -- rendered into its own fixed root (index.html, a body-level
 * sibling of .app) so .app's overflow:hidden never clips it. Dismissed by
 * Escape, an outside click, its own close button, or scroll/resize. */
.calpop{position:fixed;z-index:65;display:none;width:260px;max-width:calc(100vw - 24px);
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-md);padding:14px 16px}
.calpop.show{display:block}
.calpop-close{position:absolute;top:8px;right:10px;background:none;border:none;
  font-size:1.1rem;line-height:1;color:var(--ink-soft);padding:2px 5px;border-radius:6px}
.calpop-close:hover{color:var(--ink);background:var(--seafoam)}
.calpop-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 22px 10px 0}
.calpop-hook{font-size:.88rem;line-height:1.45;color:var(--ink);margin-bottom:12px;
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;
  overflow-wrap:break-word}
.calpop-actions{display:flex;gap:6px;flex-wrap:wrap}
.calpop-actions .btn{font-size:.78rem;padding:7px 11px}
.calpop .railedit{margin-top:2px}

@media(max-width:860px){.roomcols{grid-template-columns:1fr}.roomcols>div:first-child{border-right:none;border-bottom:1px solid var(--line)}}

/* ================================================== Control Room =========== */
/* The admin tab: automations table (reuses .jobs-table) + a live log feed.
   Same ocean/sunset light theme, same dots and legend as the rest. */

.cr-card{margin-bottom:16px}
.cr-table{table-layout:auto}
.cr-owner{font-size:.72rem;color:var(--ink-soft);margin-top:2px}
.cr-what{color:var(--ink-soft);font-size:.84rem;line-height:1.45;max-width:280px}
.cr-dim{color:var(--ink-soft)}

/* last-run cell: the status dot + relative time, with the failing reason under it */
.cr-last{display:inline-flex;align-items:center;gap:8px}
.cr-health{display:block;margin-top:4px;font-family:'Spline Sans Mono',monospace;font-size:.66rem;color:var(--red)}

/* controls cell */
.cr-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cr-run{font-size:.78rem;padding:7px 13px;flex-shrink:0}

/* the on/off toggle: a small pill switch that reads clearly on or off */
.cr-toggle{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;
  border-radius:var(--radius-pill);padding:3px 12px 3px 4px;color:var(--ink-soft);font-size:.72rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;transition:background .15s ease,border-color .15s ease}
.cr-toggle .cr-knob{width:16px;height:16px;border-radius:50%;background:var(--gray);flex-shrink:0;transition:background .15s ease,transform .15s ease}
.cr-toggle.on{background:#E4F3EA;border-color:#C5E6D2;color:var(--green)}
.cr-toggle.on .cr-knob{background:var(--green);transform:translateX(2px)}
.cr-toggle:not([disabled]):hover{border-color:var(--ocean)}
.cr-toggle[disabled]{opacity:.6;cursor:not-allowed}
.cr-toggle-label{line-height:1}
.cr-unwired{font-size:.74rem;color:var(--gray);font-style:italic}

/* the live log feed */
.cr-feed{display:flex;flex-direction:column}
.cr-feed-empty{font-size:.85rem;color:var(--ink-soft);padding:10px 2px}
.cr-log{display:flex;gap:10px;align-items:flex-start;padding:10px 2px;border-bottom:1px dashed var(--line)}
.cr-log:last-child{border-bottom:none}
.cr-log-mark{width:9px;height:9px;border-radius:50%;flex-shrink:0;margin-top:5px;background:var(--gray)}
.cr-log-mark.ok{background:var(--green)}
.cr-log-mark.error{background:var(--red)}
.cr-log-mark.info{background:var(--ocean)}
.cr-log-body{flex:1;min-width:0}
.cr-log-text{font-size:.86rem;line-height:1.45;color:var(--ink)}
.cr-log-who{font-weight:700;color:var(--ink);margin-right:6px}
.cr-log-ts{display:block;font-family:'Spline Sans Mono',monospace;font-size:.66rem;color:var(--ink-soft);margin-top:3px}

@media(max-width:860px){.cr-what{max-width:none}}


/* ---- token pass (Jul 13): one chip standard. Seven badge families, one
   metric: .64rem, 2px 9px, pill radius. Colors stay per-family. ---- */
.stamp,.pill,.tagpill,.trend-badge,.alerttag,.furtherstatus,.series-confirm{font-size:.64rem;padding:2px 9px;border-radius:var(--radius-pill)}
/* one microlabel voice: every uppercase label reads at the same size */
.metric .label,.jobs-table th,.banktable th,.md-table th,.goal-label{font-size:.72rem;font-weight:700;letter-spacing:.06em}

/* ================================================== Dark mode ============== */
/* One switch flips these variables. Because the whole app paints from them, the
   ocean/sunset light theme becomes ocean-at-night. A handful of hard-coded
   whites (inputs, the calendar, tables, the toast) are nudged here so nothing
   glares. The decorative office-floor scene keeps its warm glow, like a lit
   room at dusk. This block is additive: with no data-theme, nothing changes. */

/* token values for [data-theme="dark"] now live in the :root[data-theme="dark"]
   block at the top of this file (Enterprise Ocean tokens, Task 1). */

/* dark: soften the hard-coded white surfaces so nothing glares */
html[data-theme="dark"] .btn,
html[data-theme="dark"] .taskboard input[type=text],
html[data-theme="dark"] .taskboard select,
html[data-theme="dark"] .bank-filters select,
html[data-theme="dark"] .doc-newmeta input,
html[data-theme="dark"] .doc-newmeta select,
html[data-theme="dark"] .doc-notebox textarea,
html[data-theme="dark"] .chatform textarea,
html[data-theme="dark"] .calcell,
html[data-theme="dark"] .banktable-wrap,
html[data-theme="dark"] .cr-toggle,
html[data-theme="dark"] .bankcol-count{background:var(--card);color:var(--ink)}

/* the primary button: dark ink reads better than white on the brighter ocean */
html[data-theme="dark"] .btn.primary{background:var(--ocean);border-color:var(--ocean);color:#04222B}
html[data-theme="dark"] .btn.primary:hover{filter:brightness(1.08);background:var(--ocean)}
html[data-theme="dark"] .btn.quiet{background:none}

/* the toast bg is normally var(--ink); in dark, ink is light, so pin it dark */
html[data-theme="dark"] .toast{background:#08171E;color:var(--ink)}

/* warm gradient headers and translucent-white veils -> flat dark panels */
html[data-theme="dark"] .room .roomhead{background:var(--card)}
html[data-theme="dark"] .trend-digest{background:var(--card)}
html[data-theme="dark"] .bankcol{background:#122A33;border-color:var(--line)}
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .ph-card{background:rgba(255,255,255,.03)}
html[data-theme="dark"] .chip{border-color:var(--line)}
html[data-theme="dark"] .chip:hover{background:#1C4650}

/* Dark chips (Jul 8): every hard-coded pastel chip family gets a deep-tone
   twin so no light-mode slab survives the theme switch. Same hue families:
   green / amber / red / ocean-blue / neutral / plum / tan / leaf. */
html[data-theme="dark"] .stamp.fresh,
html[data-theme="dark"] .pill.ready,
html[data-theme="dark"] .pill.status.approved{background:#0F3328;color:var(--green);border-color:#1E4A38}
html[data-theme="dark"] .stamp.aging,
html[data-theme="dark"] .pill.v1,
html[data-theme="dark"] .pill.status.queued,
html[data-theme="dark"] .pill.status.needs_changes,
html[data-theme="dark"] .alerttag,
html[data-theme="dark"] .series-confirm{background:#3A2C12;color:var(--amber);border-color:#57431E}
html[data-theme="dark"] .stamp.stale,
html[data-theme="dark"] .pill.status.killed{background:#3D1B1B;color:var(--red)}
html[data-theme="dark"] .tagpill.platform,
html[data-theme="dark"] .pill.status.posted{background:#12333E;color:var(--ocean)}
html[data-theme="dark"] .tagpill,
html[data-theme="dark"] .pill.not_built,
html[data-theme="dark"] .pill.status.draft,
html[data-theme="dark"] .pill.status.archived{background:#223A44;color:var(--ink-soft)}
html[data-theme="dark"] .tagpill.format{background:#37291A;color:#D8A860}
html[data-theme="dark"] .tagpill.pillar{background:#1F3320;color:#8FBF7A}
html[data-theme="dark"] .tagpill.bucket,
html[data-theme="dark"] .pill.status.concept{background:#2E2136;color:#C79BD4}
html[data-theme="dark"] .bank-wiplimit{background:#3A2C12;border-color:#57431E;color:var(--amber)}
html[data-theme="dark"] .doc-callout{background:#3A2C12;color:#E8C98F}
html[data-theme="dark"] .doc-callout strong{color:var(--amber)}
html[data-theme="dark"] .btn.danger{border-color:#5A2A2A;color:var(--red)}
html[data-theme="dark"] .btn.danger:hover{background:#3D1B1B}

/* dark: --ink flips light, so anything using ink-as-background must repin
   to a true dark ink or its white text vanishes (trend filter, tooltips) */
html[data-theme="dark"] .trend-filter.active{background:var(--ocean);color:#04222B;border-color:var(--ocean)}
html[data-theme="dark"] .tooltip{background:#08171E;color:var(--ink)}

/* ================================================== Responsive (Jul 7) ===== */
/* Office upgrade #2: reads cleanly on a phone. Lives last in the file so these
   overrides always beat the base rules. Pure styling, no data touched. */

/* Phone width: the floating frame flattens to full-bleed so mobile keeps the
   slim top-bar behavior instead of a padded, bordered card (Task 1). */
@media (max-width:740px){
  .frame{padding:0}
  .app{border-radius:0;border:none}
}

/* Narrow screens: the sidebar becomes a slim sticky top bar. Brand on the
   left, theme switch on the right, and the nav is one row of pills that
   scrolls sideways under a thumb. */
@media (max-width:900px){
  /* overflow:visible so the sticky top bar below can escape .app's clip and
     stick to the viewport (overflow:hidden/auto on an ancestor otherwise
     scopes position:sticky to that ancestor, which never itself scrolls;
     setting only overflow-y computes to "auto" here per the CSS overflow
     spec, which still traps sticky — both axes need to be visible) */
  .app{flex-direction:column;overflow:visible}
  .sidebar{width:100%;height:auto;position:sticky;top:0;z-index:40;background:var(--paper);
    flex-direction:column;gap:8px;padding:12px 16px 10px;border-right:none;border-bottom:1px solid var(--line)}
  .brand{margin:0;padding-left:2px;padding-right:110px}
  .brand h1{font-size:1.2rem}
  #nav{display:flex;gap:4px;align-items:center;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;margin:0 -16px;padding:0 16px}
  #nav::-webkit-scrollbar{display:none}
  .nav-btn{width:auto;white-space:nowrap;flex-shrink:0;padding:8px 12px;font-size:.86rem}
  /* the "Behind the scenes" divider reads as a thin wall between sections */
  .nav-divider{border-top:none;border-left:1px solid var(--line);width:1px;height:22px;flex-shrink:0;
    margin:0 8px;padding:0;overflow:hidden;text-indent:-999px}
  .sidebar .foot,.sync-row{display:none}
  /* #account-row is the only theme toggle phones have -- the .theme-toggle
     rule above targets a desktop button that no longer exists (Task 1's
     note up top). Collapse the account row to just its medal and pin it in
     that same reserved corner (.brand's padding-right above) so app.js's
     "#account-row" click delegation keeps firing toggleTheme() on phones
     (Task 7). */
  .account{position:absolute;top:8px;right:14px;margin:0;padding:0;border:none;
    width:auto;border-radius:50%}
  .account:hover{background:none}
  .account .nm,.account .st,.account .plan{display:none}
  .content{padding:20px 16px 60px}
  /* minmax(0,1fr), not bare 1fr: a bare 1fr track's implicit minimum is
     "auto" (its content's min-content size), so any card with unbreakable
     content (a nowrap task line, a long chip label) blows the track past
     the viewport and drags the whole page into horizontal scroll. minmax
     pins the floor to 0 so the track -- and the page -- actually fits
     (Task 7 sweep). */
  .scoreboard,.funnel,.two-col,.ph-grid,.kpis{grid-template-columns:minmax(0,1fr)}
  .fcell{border-right:none;border-bottom:1px solid var(--line)}
  .fcell::after{content:""}
  /* the top bar (search + range + money/waiting chips) never had a mobile
     layout -- it's one no-wrap flex row with a 300px search box and two
     nowrap chips, well over 375px wide. Letting it wrap keeps every piece
     (each individually under 375px) instead of forcing the page to scroll
     sideways to show them (Task 7 sweep). */
  .topbar{height:auto;flex-wrap:wrap;row-gap:8px;padding:10px 16px}
  .spacer{display:none}
}

/* Phone widths: tighter type, stacked filters, full-screen-friendly editor
   and modal. */
@media (max-width:640px){
  .greeting{font-size:1.5rem}
  .card{padding:16px}
  /* Content Bank */
  .bank-header{align-items:stretch;flex-direction:column}
  .bank-filters{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .bank-filters select{width:100%}
  .bank-actions{justify-content:space-between}
  /* the doc editor */
  .doc-bar{padding:10px 12px;flex-wrap:wrap}
  .doc-bar-left,.doc-bar-right{flex-wrap:wrap}
  .doc-bar .btn{font-size:.74rem;padding:6px 10px}
  .doc-page{padding:22px 16px 90px}
  .doc-hook{font-size:1.45rem}
  /* modals scroll inside themselves instead of past the screen */
  .modal{padding:20px 16px;max-height:85vh;overflow-y:auto}
  /* calendar: the further-out list tightens, and the status pill drops to
     its own line rather than force the row past the screen edge */
  .furtherdate{width:70px;font-size:.66rem}
  .furtherrow{flex-wrap:wrap}
  .furtherstatus{margin-left:auto}
  /* task board inputs go full width so nothing overflows */
  .taskboard .row{align-items:stretch;flex-direction:column}
  .taskboard .row input,.taskboard .row select,.taskboard .row .btn{width:100%}
  /* wide tables (Control Room jobs, team snapshot) scroll inside their card
     instead of clipping at the screen edge */
  .card:has(.jobs-table){overflow-x:auto}
  .jobs-table{min-width:600px}
}

/* ---------- Revenue strip (Analytics, upgrade #3) ---------- */
.rev-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.rev-head h3{font-family:'Fraunces',serif;font-weight:600;font-size:1.05rem}
.rev-list{list-style:none}
.rev-row{display:flex;align-items:baseline;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:.88rem}
.rev-row:last-child{border-bottom:none}
.rev-date{font-family:'Spline Sans Mono',monospace;font-size:.72rem;color:var(--ink-soft);width:56px;flex-shrink:0}
.rev-desc{flex:1;min-width:0;overflow-wrap:break-word}
.rev-amt{font-family:'Spline Sans Mono',monospace;font-weight:700;color:var(--green);flex-shrink:0}

/* revenue stats sit four across on a desktop; below 900px they inherit the
   stacked scoreboard layout */
@media (min-width:901px){
  .rev-strip .scoreboard{grid-template-columns:repeat(4,1fr)}
}

/* ---------- Threaded desk chat (the desk expansion, Jul 7) ---------- */
/* The conversation is the room's main space: a collapsible rail of titled
   threads on the left, the working chat on the right. */
.deskspace{display:grid;grid-template-columns:230px 1fr;border-bottom:1px solid var(--line);min-height:380px}
.deskspace.railclosed{grid-template-columns:0 1fr}
.deskspace.railclosed .thread-rail{display:none}
.thread-rail{border-right:1px solid var(--line);padding:16px 12px;display:flex;flex-direction:column;gap:10px;min-width:0}
.thread-rail .btn{font-size:.78rem}
.thread-list{display:flex;flex-direction:column;gap:2px;overflow-y:auto;max-height:420px}
.threadrow{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;background:none;border:none;border-radius:var(--radius-sm);padding:9px 10px;color:var(--ink-soft)}
.threadrow:hover{background:var(--seafoam)}
.threadrow.active{background:var(--seafoam);color:var(--ink)}
.threadrow.active .threadtitle{font-weight:700;color:var(--ink)}
.threadtitle{font-size:.84rem;line-height:1.3;overflow-wrap:break-word}
.threadwhen{font-family:'Spline Sans Mono',monospace;font-size:.6rem;color:var(--gray)}
.thread-main{padding:16px 20px;display:flex;flex-direction:column;min-width:0}
.thread-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.thread-head .btn{padding:7px 13px;font-size:.78rem;flex-shrink:0}
.thread-name{font-family:'Fraunces',serif;font-weight:600;font-size:1.05rem}
.thread-titlefield{flex:1;border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 12px;font:inherit;font-size:.9rem;background:#fff;color:var(--ink)}
.thread-main .chatthread{flex:1;max-height:52vh}
/* an employee's formatted delivery reads like a document, not a text bubble */
.cbubble.doc{max-width:100%;font-size:.9rem;line-height:1.6}
.cbubble.doc h1,.cbubble.doc h2,.cbubble.doc h3{font-family:'Fraunces',serif;font-weight:600;margin:12px 0 6px;font-size:1.02rem}
.cbubble.doc h1{font-size:1.12rem}
.cbubble.doc p{margin:6px 0}
.cbubble.doc ul{margin:6px 0 6px 18px}
.cbubble.doc li{margin:3px 0}
/* an employee room delivery is the same report, same treatment */
.cbubble.doc ol{margin:6px 0 6px 18px}
.cbubble.doc ol li{margin:3px 0}
.cbubble.doc blockquote{margin:6px 0;padding:2px 0 2px 12px;border-left:3px solid var(--ocean);color:var(--ink-soft)}
.cbubble.doc hr{border:none;border-top:1px solid var(--line);margin:12px 0}
.cbubble.doc pre{background:var(--well);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:10px 12px;margin:6px 0;overflow-x:auto;font-family:'Spline Sans Mono',monospace;font-size:.8rem;line-height:1.5}
.cbubble.doc pre code{background:none;padding:0;border-radius:0}
.chatline.them{max-width:94%}
@media (max-width:860px){
  .deskspace{grid-template-columns:1fr}
  .thread-rail{border-right:none;border-bottom:1px solid var(--line);max-height:220px}
}
html[data-theme="dark"] .thread-titlefield{background:#12303E;border-color:var(--line);color:var(--ink)}

/* blended totals line under the split revenue stats */
.rev-blend{font-size:.82rem;color:var(--ink-soft);margin-bottom:16px}
.rev-checks{margin-top:-10px;font-style:italic}
.rev-blend b{color:var(--ink)}

/* ------- the series strip on Overview: the week at a glance ------- */
.series-strip{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px}
.series-day{flex:0 0 200px;min-width:200px;border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px;background:#FDFBF7}
.series-day.today{border-color:var(--ocean);box-shadow:0 0 0 1px var(--ocean)}
.series-day.st-posted{background:#F2F8F4}
.series-day.st-planned{opacity:.75}
.series-day-head{display:flex;align-items:center;gap:6px;margin-bottom:6px;flex-wrap:wrap}
.series-daynum{font-weight:700;font-size:.82rem}
.series-date{font-size:.74rem;color:var(--ink-soft)}
.series-day-head .pill.status{margin-left:auto}
.series-topic{font-size:.84rem;line-height:1.35;margin-bottom:8px}
.series-confirm{display:inline-block;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:1px 7px;border-radius:var(--radius-pill);background:#FBEFD9;color:#B27516;vertical-align:1px}
.series-item{display:flex;align-items:center;gap:6px;width:100%;text-align:left;border:1px solid var(--line);border-radius:8px;background:#fff;padding:5px 7px;margin-top:5px;cursor:pointer;font:inherit}
.series-item:hover{border-color:var(--ocean)}
.series-item-hook{flex:1;font-size:.76rem;line-height:1.3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pill.status.planned{background:#F0EDE7;color:var(--ink-soft)}
html[data-theme="dark"] .series-day{background:#102935}
html[data-theme="dark"] .series-day.st-posted{background:#0F3028}
html[data-theme="dark"] .series-item{background:#12303E;color:var(--ink)}

/* ---------- Calendar views (upgrade #5, structure first) ---------- */
.calviews{display:flex;gap:8px;margin-bottom:16px;align-items:center;flex-wrap:wrap}
.calviews .btn{font-size:.8rem}
/* platform pills share .trend-filter's look; pushed to the right edge */
.cal-platforms{display:flex;gap:6px;margin-left:auto}
/* channels are a dropdown now (scales as platforms are added), not pills */
.cal-channel{margin-left:auto;border:1px solid var(--line);background:var(--card);color:var(--ink);
  border-radius:var(--radius-pill);padding:7px 12px;font:inherit;font-size:.8rem;font-weight:600;cursor:pointer}
.cal-channel:hover{border-color:var(--ocean)}

/* Today: agenda timeline on the left, the To-be-scheduled tray + reconcile as
   a right rail (the tray lives here only). */
.today-cols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.today-cols.norail{grid-template-columns:minmax(0,1fr)}
.today-main{min-width:0}
.today-rail{min-width:0}
.today-rail .card{margin-bottom:16px}
.today-rail .card:last-child{margin-bottom:0}
/* the rail is narrow: pill + hook on the first line, the action full-width below */
.today-rail .tray-row,.today-rail .recon-row{flex-wrap:wrap;row-gap:8px}
.today-rail .tray-hook,.today-rail .recon-hook{flex:1 1 auto}
.today-rail .tray-row .btn{flex:1 1 100%;margin-left:0;justify-content:center}
.today-rail .recon-row .btn{margin-left:auto}
@media(max-width:900px){.today-cols{grid-template-columns:minmax(0,1fr)}}

/* This week header mirrors the month head */
.calweek-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.calweek-head h3{margin:0}

/* empty Today keeps the timeline look: the day's two windows as open slots */
.today-empty-note{margin-bottom:14px}
.railrow.ghost .raildot.ghost{background:var(--card);border:2px dashed var(--line-strong);box-shadow:none;top:18px}
.railcard.ghost{background:var(--well);border:1px dashed var(--line-strong);color:var(--ink-soft);
  display:flex;align-items:center;min-height:48px}
.railcard.ghost .ghost-when{font-size:.86rem}

/* the Control Room job grid (Jordan, Jul 8: cards, not a table) */
.cr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin-bottom:14px}
.cr-jobcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;display:flex;flex-direction:column;gap:8px;min-width:0}
.cr-jobhead{display:flex;align-items:center;gap:9px}
.cr-jobhead .who{width:26px;height:26px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-weight:700;font-size:.75rem;flex-shrink:0}
.cr-jobname{font-size:.92rem;line-height:1.3;flex:1;min-width:0}
.cr-jobcard .cr-what{font-size:.78rem;color:var(--ink-soft);line-height:1.45;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cr-jobmeta{display:flex;flex-direction:column;gap:2px;font-size:.68rem;color:var(--ink-soft)}
.cr-jobcard .cr-actions{margin-top:auto;display:flex;align-items:center;gap:8px;padding-top:6px}
.cr-health.amber{color:#B27516}
/* Logs page bits */
.logs-day{font-family:'Spline Sans Mono',monospace;font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin:14px 0 4px;padding-bottom:4px;border-bottom:1px dashed var(--line)}
.logs-pinned{background:rgba(224,82,82,.05);border:1px solid #EFC7C7;border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:14px}
.logs-pinned h3{font-size:.92rem;margin-bottom:6px;color:var(--red)}
html[data-theme="dark"] .logs-pinned{border-color:#5A2A2A}
.logs-pill-gap{width:14px}

.trend-dismiss{margin-left:auto;background:none;border:none;color:var(--gray);font-size:1.05rem;line-height:1;padding:2px 6px;cursor:pointer;border-radius:6px}
.trend-dismiss:hover{color:var(--red);background:rgba(224,82,82,.08)}
.trend-card-top{position:relative}
.trend-card-top .trend-date{margin-left:auto}
.trend-card-top .trend-dismiss{margin-left:6px}

/* the three-angles chooser under the editor's hook (Jordan, Jul 8) */
.angles{display:flex;flex-direction:column;gap:6px;margin:0 0 18px}
.angles-label{font-family:'Spline Sans Mono',monospace;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:2px}
.angle{text-align:left;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:9px 12px;font:inherit;font-size:.88rem;line-height:1.4;color:var(--ink);cursor:pointer;transition:border-color .12s ease,background .12s ease}
.angle:hover{border-color:var(--ocean);background:var(--seafoam)}
.angle.active{border-color:var(--ocean);background:var(--seafoam);font-weight:700}
.angle.active:not(.angle-rich)::before{content:"\2713  ";color:var(--ocean);font-weight:700}
/* Labeled angles (Jul 9): type + tone tag, the hook, and the one-line why */
.angle-rich{display:flex;flex-direction:column;gap:3px;font-weight:400}
.angle-tag{font-family:'Spline Sans Mono',monospace;font-size:.6rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ocean);font-weight:700}
.angle-hook{color:var(--ink)}
.angle-rich.active .angle-hook{font-weight:700}
.angle-rich.active .angle-tag::before{content:"\2713  "}
.angle-why{font-size:.76rem;line-height:1.35;color:var(--ink-soft);font-style:italic}
/* ---------- Today view: the time-rail desk (Task 5) ----------
 * A vertical spine of mono times down the left, cards hanging off it in
 * time order. The soonest scheduled slot gets the elevated "next up"
 * treatment (border + top gradient bar, never a shadow -- the Enterprise
 * Ocean rule reserves shadows for the one floating shell). Everything else
 * stays calm. Tokens only, so both themes just work. */
.machine-strip{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--seafoam);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:11px 16px;margin-bottom:18px;font-family:'Spline Sans Mono',monospace;
  font-size:.72rem;color:var(--ink-soft);line-height:1.6}
.machine-strip b{color:var(--ink);font-weight:700}
.machine-strip .machine-link{margin-left:auto;background:none;border:none;color:var(--ocean);
  font-weight:700;font-family:'Spline Sans Mono',monospace;font-size:.72rem;cursor:pointer;
  padding:0;white-space:nowrap}
.machine-strip .machine-link:hover{text-decoration:underline}

.railrow{display:grid;grid-template-columns:64px 24px 1fr;column-gap:2px}
.railtime{font-family:'Spline Sans Mono',monospace;font-size:.72rem;color:var(--ink-soft);
  text-align:right;padding:20px 10px 0 0;font-variant-numeric:tabular-nums}
.railspine{position:relative}
.railspine::before{content:"";position:absolute;left:11px;top:0;bottom:0;width:2px;background:var(--line)}
.railrow:first-child .railspine::before{top:22px}
.railrow:last-child .railspine::before{bottom:auto;height:22px}
.raildot{position:absolute;left:6px;top:20px;width:12px;height:12px;border-radius:50%;
  border:2px solid var(--paper);display:block}
.raildot.green{background:var(--green);box-shadow:0 0 0 3px var(--green-soft)}
.raildot.red{background:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.raildot.ocean{background:var(--ocean);box-shadow:0 0 0 3px var(--ocean-soft)}
.raildot.amber{background:var(--amber);box-shadow:0 0 0 3px var(--amber-soft)}

.railcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:15px 18px;margin:0 0 10px;transition:transform .12s ease,border-color .12s ease}
.railcard:hover{transform:translateY(-2px);border-color:var(--line-strong)}
.railcard.posted{opacity:.88}
.railcard.next{border-color:var(--ocean);position:relative;overflow:hidden;padding-top:18px}
.railcard.next::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--ocean),var(--sunset))}
.railcard-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:9px}
.railcard-top .sp{flex:1}
.railstamp{font-family:'Spline Sans Mono',monospace;font-size:.64rem;letter-spacing:.03em;
  padding:3px 10px;border-radius:var(--radius-pill);white-space:nowrap;display:inline-block}
.railstamp.ocean{background:var(--ocean-soft);color:var(--ocean-deep)}
.railstamp.green{background:var(--green-soft);color:var(--green)}
.railstamp.red{background:var(--red-soft);color:var(--red)}
.railstamp.amber{background:var(--amber-soft);color:var(--amber-deep)}
.railstamp.gray{background:var(--well);color:var(--ink-soft)}
.raillink{color:var(--ocean);font-weight:700;font-size:.82rem;text-decoration:none}
.raillink:hover{text-decoration:underline}
.railtext{font-size:.94rem;line-height:1.55;white-space:pre-wrap;overflow-wrap:break-word;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:2px}
.railtext.expanded{-webkit-line-clamp:unset;overflow:visible}
.railtext[data-open-content]{cursor:pointer}
.railtext[data-open-content]:hover{color:var(--ocean-deep)}
.railtoggle{background:none;border:none;color:var(--ocean);font:inherit;font-size:.78rem;
  font-weight:700;cursor:pointer;padding:6px 0 4px;display:inline-block}
.railtoggle:hover{text-decoration:underline}
.railerr{font-family:'Spline Sans Mono',monospace;font-size:.74rem;color:var(--red);
  background:var(--red-soft);border-radius:var(--radius-sm);padding:9px 12px;margin:8px 0 0;
  line-height:1.5;white-space:pre-wrap;overflow-wrap:break-word}
.railedit{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.railedit input{border:1px solid var(--line);border-radius:var(--radius-sm);padding:7px 10px;
  font:inherit;font-size:.82rem;background:var(--card);color:var(--ink)}
.railactions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
@media (max-width:640px){
  .railrow{grid-template-columns:46px 18px 1fr}
  .railtime{font-size:.64rem;padding-top:17px}
  .railspine::before{left:9px}
  .raildot{left:4px;top:16px;width:10px;height:10px}
}

/* ---------- "+ Schedule a post" picker modal ---------- */
.cal-schedule-btn{margin-left:auto}
.sched-search{width:100%;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:9px 12px;font:inherit;font-size:.88rem;background:var(--card);color:var(--ink);margin-bottom:10px}
.sched-list{max-height:240px;overflow-y:auto;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:4px;display:flex;flex-direction:column;gap:2px;margin-bottom:14px}
.sched-row{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;
  border:1px solid transparent;border-radius:var(--radius-sm);padding:9px 10px;font:inherit;
  font-size:.86rem;color:var(--ink);cursor:pointer}
.sched-row:hover{background:var(--seafoam)}
.sched-row.selected{background:var(--ocean-soft);border-color:var(--ocean)}
.sched-row .hook{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sched-empty{color:var(--ink-soft);font-size:.85rem;padding:10px 4px}
.sched-group{font-family:'Spline Sans Mono',monospace;font-size:.62rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft);padding:8px 8px 4px}
.sched-picked{font-size:.82rem;color:var(--ink-soft);margin-bottom:10px}
.sched-picked b{color:var(--ink)}
.sched-when{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sched-when input{border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 10px;
  font:inherit;font-size:.86rem;background:var(--card);color:var(--ink)}
/* one-tap times: her two default posting windows, filled in one click */
.sched-quick{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 4px}
.sched-quick .btn{font-size:.8rem}
/* "To be scheduled" tray: the machine's inbox, with a small lavender accent */
.tray-card{border-left:3px solid var(--lavender);margin-bottom:16px}
.tray-head{display:flex;align-items:center;gap:10px;margin-bottom:2px}
.tray-head h3{margin:0}
.tray-count{font-family:'Spline Sans Mono',monospace;font-size:.74rem;font-weight:600;
  color:var(--lavender);background:var(--lavender-soft);border-radius:var(--radius-pill);
  padding:1px 9px;font-variant-numeric:tabular-nums}
.tray-list{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.tray-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--well)}
.tray-hook{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:.9rem;color:var(--ink);cursor:pointer}
.tray-hook:hover{color:var(--ocean)}
.tray-row .btn{flex-shrink:0}
/* "Already posted?" auto-reconcile card: green = already live (semantic) */
.recon-card{border-left:3px solid var(--green);margin-bottom:16px}
.recon-head{display:flex;align-items:center;gap:10px;margin-bottom:2px}
.recon-head h3{margin:0}
.recon-count{font-family:'Spline Sans Mono',monospace;font-size:.74rem;font-weight:600;
  color:var(--green);background:var(--green-soft);border-radius:var(--radius-pill);
  padding:1px 9px;font-variant-numeric:tabular-nums}
.recon-list{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.recon-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--well)}
.recon-hook{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:.9rem;color:var(--ink);cursor:pointer}
.recon-hook:hover{color:var(--ocean)}
.recon-when{font-size:.78rem;color:var(--ink-soft);flex-shrink:0}
.recon-row .btn{flex-shrink:0}
/* Month view */
.calmonth-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.calmonth-head h3{margin:0}
/* minmax(0,1fr), not a bare 1fr: without the explicit 0 floor, a grid track
   won't shrink past its content's min-content width, so a narrow phone
   forces the whole 7-column grid wider than the viewport instead of
   letting a chip's text wrap inside its own cell. */
.calgrid.month{grid-template-columns:repeat(7,minmax(0,1fr))}
.calgrid.month .calcell{min-height:76px;padding:6px}
.calcell.blank{border:none;background:none}
.calday.calhead{min-height:auto;text-align:center;font-weight:700;margin:0 0 2px}
.calslot.mini{padding:3px 6px}
.calslot.mini .calplatform{margin:0}
@media (max-width:640px){
  .calgrid.month .calcell{min-height:52px;padding:4px}
}
@media (max-width:480px){
  /* seven columns on a phone: the platform word has nowhere to go without
     letter-by-letter wrapping, so it hides and the glyph carries the status
     alone -- still never color-alone, the letter mark stays */
  .calgrid.month .calplatform{font-size:0}
  .calgrid.month .calslot-mark{font-size:.72rem;margin-right:0}
  .calgrid.month .calcell{min-height:38px}
}

/* the $100k goal bar: ocean fills toward sunset as the year gets paid */
.goalcard{margin-bottom:16px;padding:20px}
.goal-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px}
.goal-label{font-size:.82rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft)}
.goal-pct{font-family:'Fraunces',serif;font-weight:600;font-size:1.4rem;color:var(--ink)}
.goal-bar{height:12px;border-radius:8px;background:var(--seafoam);overflow:hidden}
.goal-fill{height:100%;border-radius:8px;background:linear-gradient(90deg,#0E7490,#3A9DA8 60%,#F4A259);min-width:6px}
.goal-sub{font-size:.8rem;color:var(--ink-soft);margin-top:10px}
html[data-theme="dark"] .goal-bar{background:#12303E}

/* Revenue redesign: hero goal card + the Lab/Clients split */
.rev-hero{margin-bottom:16px;padding:22px}
.rev-hero-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px}
.rev-hero-pct{font-family:'Spline Sans Mono',monospace;font-size:.78rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.rev-hero-num{font-family:'Fraunces',serif;font-size:2.5rem;font-weight:600;color:var(--ink);line-height:1;margin-bottom:14px}
.rev-hero-num span{font-family:'Karla',sans-serif;font-size:1rem;font-weight:400;color:var(--ink-soft)}
.rev-hero-sub{font-size:.82rem;color:var(--ink-soft);margin-top:11px}
.rev-split{margin-bottom:16px;padding:20px}
.rev-splitbar{display:flex;height:12px;border-radius:99px;overflow:hidden;margin:12px 0 18px;background:var(--well)}
.rev-splitbar i{display:block;height:100%}
.rev-splitbar i.lab{background:var(--lavender)}
.rev-splitbar i.cli{background:var(--ocean)}
.rev-split-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:560px){.rev-split-cols{grid-template-columns:1fr}}
.rev-seg{display:flex;flex-direction:column;gap:3px;min-width:0}
.rev-seg .seg-k{display:flex;align-items:center;gap:7px;font-size:.82rem;color:var(--ink-soft)}
.rev-seg .seg-k i{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.rev-seg.lab .seg-k i{background:var(--lavender)}
.rev-seg.cli .seg-k i{background:var(--ocean)}
.rev-seg .seg-v{font-family:'Fraunces',serif;font-size:1.55rem;font-weight:600;color:var(--ink);line-height:1.1}
.rev-seg .seg-sub{font-size:.74rem;color:var(--ink-soft)}

/* Settings page */
.set-head{margin-bottom:18px}
.set-title{font-family:'Fraunces',serif;font-weight:600;font-size:1.6rem;color:var(--ink);margin:0 0 4px}
.set-card{margin-bottom:16px;max-width:720px}
.set-card h3{margin-bottom:4px}
.set-theme{display:flex;gap:10px;margin-top:12px}
.set-theme-btn{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:var(--radius-pill);padding:8px 22px;font:inherit;font-size:.86rem;font-weight:600;cursor:pointer}
.set-theme-btn:hover{border-color:var(--ocean)}
.set-theme-btn.on{background:var(--ocean);color:#fff;border-color:var(--ocean)}
.set-days{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:14px 0 16px}
.set-day{display:flex;flex-direction:column;gap:5px}
.set-day-k{font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft)}
.set-day input,.set-frow input{border:1px solid var(--line);border-radius:var(--radius-sm);padding:9px 11px;font:inherit;font-size:.88rem;background:var(--card);color:var(--ink);width:100%;min-width:0}
.set-day input:focus,.set-frow input:focus{outline:none;border-color:var(--ocean)}
.set-funnel{display:flex;flex-direction:column;gap:10px;margin:14px 0 16px}
.set-frow{display:grid;grid-template-columns:170px 1fr;align-items:center;gap:12px}
.set-fstage{font-size:.88rem;font-weight:600;color:var(--ink)}
.set-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
@media(max-width:560px){.set-frow{grid-template-columns:1fr;gap:5px}}

/* ---------- the funnel stage table + money (Analytics tab, Task 7) --------- *
 * Lifted from the approved mockup's .funnel/.frow/.stg/.val/.conv/.money,
 * converted to this file's own token names (no raw hex besides the
 * established white-on-accent #fff) and this file's 'Spline Sans Mono'
 * literal (there is no --mono var here). Scoped as .fstage rather than the
 * mockup's bare .funnel: that class already belongs to the Overview funnel
 * STRIP a few rules up (funnelStrip(), the .fcell grid) -- reusing it here
 * would leak this table's row styling into that strip's own .val/.conv
 * cells, since both would sit under a shared .funnel ancestor. Likewise
 * .moneyblock, not the mockup's bare .money: the top bar's "$X collected"
 * chip already carries "money" as one of its classes (.tb-chip.money), and
 * a bare .money{} rule would style that button too. */
.fstage{margin-bottom:22px}
.fstage .frow{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:11px 4px;border-top:1px solid var(--line)}
.fstage .frow:first-child{border-top:none}
.fstage .stg{font-weight:600;font-size:.9rem}
.fstage .stg small{display:block;font-weight:400;font-size:.72rem;color:var(--ink-soft)}
.fstage .val{font-family:'Spline Sans Mono',monospace;font-size:1.05rem;font-variant-numeric:tabular-nums;text-align:right;min-width:64px}
.fstage .val.empty{color:var(--ink-soft);font-size:.82rem}
.fstage .conv{font-family:'Spline Sans Mono',monospace;font-size:.72rem;color:var(--ocean-deep);min-width:64px;text-align:right}
.moneyblock{margin-top:14px;padding:16px;border-radius:var(--radius-sm);
  background:linear-gradient(135deg,var(--sunset-soft),transparent);border:1px solid var(--sunset-soft)}
.moneyblock .lab{font-family:'Spline Sans Mono',monospace;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sunset-deep)}
.moneyblock .big{font-family:'Fraunces',serif;font-weight:600;font-size:1.7rem;margin:2px 0 8px}
.moneyblock .split{display:flex;gap:18px;flex-wrap:wrap;font-size:.84rem;color:var(--ink-soft)}
.moneyblock .split b{font-family:'Spline Sans Mono',monospace;color:var(--ink);font-variant-numeric:tabular-nums}
.moneyblock .split .bar{width:100%;height:9px;border-radius:5px;margin-top:6px;display:flex;overflow:hidden;border:1px solid var(--line)}
.moneyblock .split .bar i{display:block}
.moneyblock .split .bar .lab-i{background:var(--ocean)}
.moneyblock .split .bar .cli-i{background:var(--sunset)}
@media (max-width:640px){
  .fstage .frow{grid-template-columns:1fr;text-align:left;gap:2px}
  .fstage .val,.fstage .conv{text-align:left}
}

/* ---------- the pipeline + webinar log (Revenue tab; the webinar log also
   rides on Analytics as of Task 7 -- see .webinars below) ---------- */
.webinars{margin-bottom:22px}
/* the collapsed Webinars row (Jordan's review: no webinar for ~2 weeks, so
   the full log + add-form only show once she asks). Plain summary row inside
   its own card, matching this card's shared token language. */
.webinars-collapse-card{margin-bottom:14px;padding:16px 20px}
.webinar-toggle{display:flex;align-items:center;gap:12px;width:100%;background:none;border:none;
  padding:0;margin:0;text-align:left;color:var(--ink);cursor:pointer}
.webinar-toggle .wt-title{font-family:'Fraunces',serif;font-weight:600;font-size:1.05rem}
.webinar-toggle .wt-count{margin-left:auto;font-size:.82rem;color:var(--ink-soft)}
.webinar-toggle .wt-cta{font-size:.78rem;font-weight:700;color:var(--ocean);white-space:nowrap}
.webinar-toggle:hover .wt-cta{text-decoration:underline}
.webinar-toggle:focus-visible{outline:2px solid var(--ocean);outline-offset:2px;border-radius:8px}
.deal-table input,.deal-table select{border:1px solid transparent;border-radius:8px;padding:6px 8px;font:inherit;font-size:.86rem;background:none;color:var(--ink);width:100%;min-width:110px}
.deal-table input:hover,.deal-table select:hover{border-color:var(--line)}
.deal-table input:focus,.deal-table select:focus{border-color:var(--ocean);outline:none;background:#fff}
.deal-table .deal-value{min-width:80px;max-width:100px}
.deal-table .deal-offer{min-width:90px}
.deal-updated{font-family:'Spline Sans Mono',monospace;font-size:.68rem;color:var(--ink-soft);white-space:nowrap}
.deal-del{background:none;border:none;color:var(--gray);font-size:1rem;padding:2px 6px;border-radius:6px}
.deal-del:hover{color:var(--red);background:#FBE3E3}
.webinar-form{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.webinar-form input{border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:inherit;font-size:.86rem;background:#fff;color:var(--ink)}
.webinar-form input[type=number]{width:110px}
.webinar-form #wb-name{flex:1;min-width:140px}
@media (max-width:640px){.webinar-form input{width:100%}.webinar-form input[type=number]{width:100%}}
html[data-theme="dark"] .deal-table input:focus,html[data-theme="dark"] .deal-table select:focus,
html[data-theme="dark"] .webinar-form input{background:#12303E}

/* deal proposal-link cell + webinar luma links */
.deal-link{white-space:nowrap}
.deal-link input{min-width:110px;max-width:150px;display:inline-block}
.deal-link a{color:var(--ocean);font-weight:700;text-decoration:none;margin-left:2px}
.deal-link a:hover{text-decoration:underline}
.wb-luma{color:var(--ocean);text-decoration:none;font-weight:600}
.wb-luma:hover{text-decoration:underline}
.webinar-form #wb-luma{flex:1;min-width:150px}

/* ======================================================== The Studio ===== *
 * Jordan's carousel designer: template rail | canvas + filmstrip | inspector.
 * Everything reads the theme tokens, so light and dark both just work. */
.studio-topbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.studio-piece{min-width:200px;flex:1}
.studio-piece input{width:100%;border:none;background:none;color:var(--ink);
  font-family:'Fraunces',serif;font-weight:600;font-size:1.05rem;padding:0}
.studio-piece input:focus{outline:none;border-bottom:2px solid var(--ocean)}
.studio-piece .fmt{font-family:'Spline Sans Mono',monospace;font-size:.64rem;color:var(--ink-soft);margin-top:3px}
.studio-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.studio-actions select{border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 10px;
  font:inherit;font-size:.8rem;background:var(--card);color:var(--ink);max-width:190px}

.studio-grid{display:grid;grid-template-columns:170px minmax(0,1fr) 300px;gap:16px;align-items:start}
.zone-label{font-family:'Spline Sans Mono',monospace;font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}
.zone-label .zone-sub{display:block;text-transform:none;letter-spacing:0;margin-top:2px;color:var(--gray)}

.studio-rail{display:flex;flex-direction:column;gap:8px}
.stpl{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px;
  text-align:left;transition:transform .12s ease,box-shadow .12s ease}
.stpl:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(22,57,75,.07)}
.stpl.active{border-color:var(--ocean);box-shadow:0 0 0 2px rgba(14,116,144,.18)}
.stpl .nm{display:block;font-size:.82rem;font-weight:700}
.stpl .src{display:block;font-size:.66rem;color:var(--ink-soft);margin-top:2px}

.studio-center{min-width:0}
.studio-canvas{display:flex;justify-content:center;padding:18px}
.studio-scale{width:346px;height:432px;max-width:100%;overflow:hidden;border-radius:6px;
  box-shadow:0 10px 30px rgba(22,57,75,.14)}
.studio-scale iframe{width:1080px;height:1350px;border:none;transform:scale(.32);transform-origin:top left;
  pointer-events:none;background:#FBF6EF}
.studio-film{display:flex;gap:8px;overflow-x:auto;padding:12px 2px 6px}
.sframe{flex-shrink:0;width:60px;height:75px;border-radius:6px;border:1px solid var(--line);
  background:var(--card);padding:7px 6px;text-align:left;overflow:hidden}
.sframe .fn{display:block;font-family:'Spline Sans Mono',monospace;font-size:.55rem;color:var(--ink-soft)}
.sframe .fh{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
  font-family:'Fraunces',serif;font-size:.56rem;font-weight:600;line-height:1.15;color:var(--ink);margin-top:3px}
.sframe.active{border-color:var(--ocean);box-shadow:0 0 0 2px rgba(14,116,144,.2)}
.sframe.addnew{display:flex;align-items:center;justify-content:center;border-style:dashed;
  color:var(--ink-soft);font-size:1.1rem;background:none}

.studio-inspector{display:flex;flex-direction:column;gap:12px}
.studio-inspector select{width:100%;border:1px solid var(--line);border-radius:9px;padding:8px 10px;
  font:inherit;font-size:.82rem;background:var(--card);color:var(--ink)}
.sfield{margin-bottom:10px}
.sfield label{display:block;font-family:'Spline Sans Mono',monospace;font-size:.58rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:5px}
.sfield input,.sfield textarea{width:100%;border:1px solid var(--line);border-radius:9px;padding:8px 10px;
  font:inherit;font-size:.84rem;background:var(--card);color:var(--ink);resize:vertical;line-height:1.5}
.brainline{display:flex;align-items:center;gap:8px;padding:7px 0;font-size:.82rem;
  border-bottom:1px dashed var(--line)}
.brainline:last-child{border-bottom:none}
.ctanote{font-size:.7rem;color:var(--ink-soft);line-height:1.5;margin-top:8px}
.studio-addcta{margin-top:12px;border-top:1px dashed var(--line);padding-top:10px}
.studio-addcta summary{font-size:.78rem;font-weight:700;color:var(--ocean);cursor:pointer;margin-bottom:10px}
.studio-delslide{width:100%;margin-top:4px;color:var(--red);font-size:.76rem}
/* slide reorder + delete row (Studio "move slides") */
.studio-slide-move{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.studio-slide-move .btn{flex:1 1 auto;font-size:.76rem;min-width:0}
.studio-slide-move .studio-delslide{width:auto;margin-top:0;flex:1 1 100%}

@media (max-width: 980px){
  .studio-grid{grid-template-columns:1fr}
  .studio-rail{flex-direction:row;overflow-x:auto;padding-bottom:6px}
  .stpl{min-width:150px}
  .studio-actions{width:100%}
}

/* the Studio's picture shelf */
.studio-assets{display:flex;flex-direction:column;gap:6px}
.sasset{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:7px 10px;
  font-family:'Spline Sans Mono',monospace;font-size:.66rem;color:var(--ink);
  display:flex;justify-content:space-between;gap:8px;overflow-wrap:anywhere}
.sasset span{color:var(--ink-soft);white-space:nowrap}
.sasset.empty{color:var(--ink-soft);border-style:dashed;background:none}

/* =========================================================================
   What's Trending -- Tia's trending studio (redesign, ported from the
   approved mockup v11). EVERYTHING is scoped under `.tw` so the mockup's
   generic class names (.feed->.tw-feed, .pin, .badge, .filter, .digest-anchor,
   the coral alert...) never collide with the other tabs that already use some
   of those names. Enterprise Ocean tokens are reused, never redefined; the
   only additions are --coral-deep / --coral-soft, which the app's :root did
   not carry -- scoped to `.tw` so they inherit to the trending subtree and
   leak nowhere.
   ========================================================================= */
.tw{--coral-deep:#C6412F; --coral-soft:rgba(242,109,91,.12)}
:root[data-theme="dark"] .tw{--coral-deep:#F58C7C; --coral-soft:rgba(242,109,91,.16)}

/* header */
.tw .eyebrow{font-family:'Spline Sans Mono',monospace;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sunset-deep);font-weight:600}
.tw .tw-head{margin-bottom:20px}
.tw .tw-title{font-family:'Fraunces',serif;font-size:1.95rem;font-weight:600;line-height:1.1;margin:5px 0 8px;text-wrap:balance;color:var(--ink)}
.tw .tw-sub{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:.86rem;color:var(--ink-soft)}
.tw .tw-sub .fresh{color:var(--ink)}

/* voice pill (disabled shell) + past readings */
.tw .voice-wrap{display:inline-flex;align-items:center;gap:10px}
.tw .voice-pill{display:inline-flex;align-items:center;gap:9px;height:34px;padding:0 6px 0 4px;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--well);color:var(--ink-soft);cursor:not-allowed}
.tw .voice-pill .play{width:26px;height:26px;border-radius:50%;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-soft)}
.tw .voice-pill .vp-main{font-size:.8rem;color:var(--ink)}
.tw .voice-pill .vp-note{font-family:'Spline Sans Mono',monospace;font-size:.6rem;letter-spacing:.02em;color:var(--ink-soft);padding-right:8px}
.tw .past-link{background:none;border:none;font-size:.76rem;color:var(--ocean-deep);font-weight:600;text-decoration:underline;text-underline-offset:2px;cursor:pointer}

/* segmented toggle */
.tw .segmented{display:inline-flex;gap:3px;background:var(--well);border:1px solid var(--line);border-radius:var(--radius-pill);padding:3px;margin-bottom:22px}
.tw .seg-btn{border:none;background:none;border-radius:16px;padding:7px 18px;font-size:.86rem;font-weight:600;color:var(--ink-soft);display:flex;align-items:center;gap:8px;cursor:pointer}
.tw .seg-btn .seg-n{font-family:'Spline Sans Mono',monospace;font-size:.66rem;font-weight:500;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:0 6px;color:var(--ink-soft)}
.tw .seg-btn.active{background:var(--card);color:var(--ink);box-shadow:var(--shadow-md)}
.tw .seg-btn.active .seg-n{background:var(--ocean-soft);border-color:transparent;color:var(--ocean-deep)}
.tw .seg-btn:focus-visible{outline:2px solid var(--ocean);outline-offset:2px}

.tw .tw-hidden{display:none}

/* top row: coral siren alert, then the faded sunset weekly-digest anchor */
.tw .tw-top-row{display:block;margin-bottom:6px}
.tw .tw-top-row .tw-alertcard{margin-bottom:14px}
.tw .tw-top-row .digest-anchor{margin-bottom:22px}
.tw .tw-alertcard{border:1px solid var(--coral);background:var(--coral-soft);border-radius:var(--radius);padding:15px 17px;position:relative}
.tw .tw-alerthead{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.tw .tw-alerttag{font-family:'Spline Sans Mono',monospace;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:#fff;background:var(--coral-deep);border-radius:5px;padding:2px 7px;display:inline-flex;align-items:center;gap:5px}
.tw .tw-alerttag .siren{width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:tw-siren 2s infinite}
@keyframes tw-siren{0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}70%{box-shadow:0 0 0 6px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.tw .tw-alertdate{font-family:'Spline Sans Mono',monospace;font-size:.68rem;color:var(--ink-soft)}
.tw .tw-alert-x{margin-left:auto;width:24px;height:24px;border-radius:50%;border:1px solid var(--coral);background:var(--card);color:var(--coral-deep);font-size:1rem;line-height:1;display:grid;place-items:center;cursor:pointer}
.tw .tw-alert-x:hover{background:var(--coral);color:#fff}
.tw .tw-alertcard h3{font-family:'Fraunces',serif;font-size:1.06rem;font-weight:600;margin-bottom:4px;color:var(--ink)}
.tw .tw-alertcard h3.tw-alert-open{cursor:pointer}
.tw .tw-alertcard h3.tw-alert-open:hover{color:var(--coral-deep);text-decoration:underline;text-underline-offset:2px}
.tw .tw-alertcard p{font-size:.87rem;color:var(--ink-soft);line-height:1.5}
.tw .tw-alertcard.dismissed{opacity:0;transform:scale(.97);transition:opacity .28s,transform .28s;pointer-events:none}

.tw .digest-anchor{border:1px solid var(--line);background:linear-gradient(135deg,var(--sunset-soft),transparent 62%);border-radius:var(--radius);padding:16px 18px}
.tw .digest-anchor .dh{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.tw .digest-badge{font-family:'Spline Sans Mono',monospace;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--sunset-deep);background:var(--sunset-soft);border-radius:5px;padding:2px 8px}
.tw .digest-anchor h3{font-family:'Fraunces',serif;font-size:1.12rem;font-weight:600;margin-bottom:5px;line-height:1.2;color:var(--ink)}
.tw .digest-anchor p{font-size:.88rem;color:var(--ink-soft);line-height:1.5}
.tw .digest-foot{display:flex;align-items:center;gap:16px;margin-top:11px;flex-wrap:wrap}
.tw .readall{background:none;border:none;color:var(--ocean-deep);font-weight:700;font-size:.84rem;padding:0;cursor:pointer}
.tw .past-digests{background:none;border:none;color:var(--ink-soft);font-weight:600;font-size:.8rem;padding:0;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.tw .past-list{margin-top:10px;border-top:1px dashed var(--line);padding-top:9px;display:flex;flex-direction:column;gap:6px}
.tw .past-list[hidden]{display:none}
.tw .past-list a{display:flex;justify-content:space-between;gap:10px;font-size:.82rem;color:var(--ink);text-decoration:none;padding:3px 0;cursor:pointer}
.tw .past-list a:hover{color:var(--ocean-deep)}
.tw .past-list .pd{font-family:'Spline Sans Mono',monospace;font-size:.68rem;color:var(--ink-soft)}

/* source filter pills */
.tw .filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.tw .filter{height:30px;padding:0 13px;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--card);font-size:.78rem;font-weight:500;color:var(--ink-soft);cursor:pointer}
.tw .filter:hover{background:var(--seafoam)}
.tw .filter.active{background:var(--ink);color:var(--card);border-color:var(--ink)}
.tw .filter .fn{font-family:'Spline Sans Mono',monospace;font-size:.66rem;opacity:.75}

/* News feed: Pinterest pins (image-led, light text) in a true masonry */
.tw .tw-feed{position:relative;min-height:120px}
.tw .pin{position:absolute;top:0;left:0;width:248px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-md);transition:top .34s ease,left .34s ease,opacity .3s,transform .18s,box-shadow .18s}
.tw .pin:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.tw .pin.dismissed{opacity:0;transform:scale(.94);pointer-events:none}
.tw .pin-img{position:relative;width:100%;display:block;cursor:pointer;transition:filter .15s}
.tw .pin-photo{width:100%;display:block}
.tw .pin.filler .pin-img{cursor:default}
.tw .pin-img:hover{filter:brightness(1.05) saturate(1.06)}
.tw .pin.filler .pin-img:hover{filter:none}
/* the warm on-brand treatment that unifies functional article images */
.tw .pin-img::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 28% 18%,rgba(255,255,255,.10),transparent 44%);pointer-events:none}
.tw .pin.filler .pin-img::before{display:none}
.tw .pin-title-sm{font-family:'Fraunces',serif;font-size:.98rem;font-weight:600;line-height:1.25;color:var(--ink);margin-bottom:8px;display:block;text-decoration:none;word-break:break-word}
.tw a.pin-title-sm.pin-titlelink:hover{color:var(--ocean-deep);text-decoration:underline;text-underline-offset:2px}
.tw .badge{font-family:'Spline Sans Mono',monospace;font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:#fff;border-radius:6px;padding:3px 8px}
.tw .pin-badge{position:absolute;top:9px;left:9px;z-index:2;box-shadow:0 1px 6px rgba(0,0,0,.25)}
.tw .pin-textrow{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}
.tw .pin-x{position:absolute;top:8px;right:8px;z-index:3;width:26px;height:26px;border-radius:50%;border:none;background:rgba(15,39,51,.55);color:#fff;font-size:1.05rem;line-height:1;display:grid;place-items:center;backdrop-filter:blur(3px);cursor:pointer}
.tw .pin-text .pin-x{position:static;width:24px;height:24px;flex-shrink:0;background:var(--well);color:var(--ink-soft);border:1px solid var(--line)}
.tw .pin-x:hover{background:var(--red);color:#fff}
.tw .pin-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:30px 13px 12px;font-family:'Fraunces',serif;font-weight:600;font-size:1.02rem;line-height:1.22;color:#fff;background:linear-gradient(transparent,rgba(8,20,28,.86))}
.tw .pin-play{position:absolute;inset:0;z-index:2;display:grid;place-items:center;pointer-events:none}
.tw .pin-play span{width:46px;height:46px;border-radius:50%;background:rgba(0,0,0,.34);display:grid;place-items:center;color:#fff;font-size:1.05rem;backdrop-filter:blur(2px)}
.tw .pin-body{padding:11px 13px 13px}
.tw .pin-meta{display:flex;align-items:center;gap:9px;font-family:'Spline Sans Mono',monospace;font-size:.66rem;color:var(--ink-soft);margin-bottom:10px}
.tw .pin-meta a{color:var(--ocean-deep);text-decoration:none;font-weight:600}
.tw .pin-meta a:hover{text-decoration:underline}
.tw .pin-meta .mdot{width:3px;height:3px;border-radius:50%;background:var(--line-strong)}
.tw .pin-summary{font-size:.9rem;line-height:1.6;color:var(--ink);margin:2px 0 10px}
.tw .pin-ytembed{display:inline-flex;align-items:center;gap:6px;background:var(--well);border:1px solid var(--line);border-radius:var(--radius-pill);padding:6px 12px;color:var(--ink);font-size:.76rem;font-weight:600;margin-bottom:10px;cursor:pointer}
.tw .pin-ytembed:hover{background:var(--seafoam)}
.tw .pin-ytembed span{color:var(--coral)}
.tw .pin-expand{width:100%;background:var(--well);border:1px solid var(--line);border-radius:var(--radius-pill);padding:8px 14px;color:var(--ink-soft);font-size:.76rem;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:4px;cursor:pointer}
.tw .pin-expand:hover{background:var(--seafoam);color:var(--ink)}
.tw .pin-expand .chev{transition:transform .18s}
.tw .pin-expand[aria-expanded="true"] .chev{transform:rotate(180deg)}
.tw .pin-more{margin-top:11px;display:flex;flex-direction:column;gap:10px}
.tw .pin-more[hidden]{display:none}
.tw .pin-more .btn-penn{align-self:flex-start;margin-top:1px}
.tw .tc-why{background:var(--well);border-radius:var(--radius-sm);padding:10px 12px}
.tw .tc-why-label{font-family:'Spline Sans Mono',monospace;font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--ink-soft);display:block;margin-bottom:4px}
.tw .tc-why p{font-size:.84rem;line-height:1.5;color:var(--ink)}
.tw .tc-angles-label{font-family:'Spline Sans Mono',monospace;font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--ocean-deep);margin-bottom:7px}
.tw .tc-angles ul{list-style:none;display:flex;flex-direction:column;gap:6px;margin-top:2px;padding:0}
.tw .tc-angles li{position:relative;padding-left:15px;font-size:.83rem;line-height:1.4;color:var(--ink)}
.tw .tc-angles li::before{content:"";position:absolute;left:2px;top:8px;width:5px;height:5px;border-radius:50%;background:var(--sunset)}
.tw .btn-penn{background:var(--sunset);color:#3a2500;border:none;border-radius:var(--radius-pill);padding:8px 13px;font-size:.77rem;font-weight:700;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.tw .btn-penn:hover{background:var(--sunset-deep);color:#fff}
.tw .btn-penn.done{background:var(--green-soft);color:var(--green);pointer-events:none}
.tw .btn-penn .av{width:17px;height:17px;border-radius:50%;background:rgba(0,0,0,.14);display:grid;place-items:center;font-size:.58rem;font-weight:700}

/* competitors */
.tw .comp-intro{background:var(--well);border:1px solid var(--line);border-radius:var(--radius);padding:14px 17px;margin-bottom:18px;font-size:.87rem;line-height:1.55;color:var(--ink-soft);max-width:82ch}
.tw .comp-intro b{color:var(--ink)}
.tw .comp-bar{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.tw .comp-bar h2{font-family:'Fraunces',serif;font-size:1.15rem;font-weight:600;color:var(--ink)}
.tw .comp-bar .csub{font-size:.76rem;color:var(--ink-soft)}
.tw .comp-bar .spacer{flex:1}
.tw .btn-manage{display:inline-flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--line-strong);border-radius:var(--radius-pill);padding:8px 14px;font-size:.8rem;font-weight:600;color:var(--ink);cursor:pointer}
.tw .btn-manage:hover{background:var(--seafoam)}

/* watch-list manager */
.tw .wl-manager{border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--well);padding:16px 18px;margin-bottom:20px}
.tw .wl-manager[hidden]{display:none}
.tw .wl-manager h3{font-family:'Fraunces',serif;font-size:1rem;font-weight:600;margin-bottom:3px;color:var(--ink)}
.tw .wl-manager .wl-sub{font-size:.78rem;color:var(--ink-soft);margin-bottom:12px}
.tw .wl-add{display:flex;gap:8px;margin-bottom:14px;max-width:420px}
.tw .wl-add input{flex:1;height:36px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--card);color:var(--ink);padding:0 12px;font:inherit;font-size:.86rem;outline:none}
.tw .wl-add input:focus{border-color:var(--ocean)}
.tw .wl-add button{background:var(--ocean);color:#fff;border:none;border-radius:var(--radius-sm);padding:0 16px;font-weight:700;font-size:.82rem;cursor:pointer}
.tw .wl-add button:hover{background:var(--ocean-deep)}
.tw .wl-chips{display:flex;flex-wrap:wrap;gap:8px}
.tw .wl-chip{display:inline-flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-pill);padding:5px 8px 5px 12px;font-size:.82rem;font-weight:600;color:var(--ink)}
.tw .wl-chip .lane{font-family:'Spline Sans Mono',monospace;font-size:.56rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft)}
.tw .wl-chip button{width:18px;height:18px;border-radius:50%;border:none;background:var(--well);color:var(--ink-soft);font-size:.82rem;line-height:1;display:grid;place-items:center;cursor:pointer}
.tw .wl-chip button:hover{background:var(--red);color:#fff}
.tw .wl-empty{font-size:.82rem;color:var(--ink-soft);font-style:italic}

/* competitor cards -- media-led, visual */
.tw .comp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(410px,1fr));gap:16px}
.tw .comp-card{position:relative;border:1px solid var(--line);background:var(--card);border-radius:var(--radius);padding:14px;display:flex;gap:14px;box-shadow:var(--shadow-md);transition:opacity .3s,transform .18s,box-shadow .18s,margin .3s}
.tw .comp-card:hover{box-shadow:var(--shadow-lg)}
.tw .comp-card.dismissed{opacity:0;transform:scale(.96);pointer-events:none}
.tw .comp-x{position:absolute;top:8px;right:8px;z-index:4;width:24px;height:24px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink-soft);font-size:.95rem;line-height:1;display:grid;place-items:center;opacity:0;transition:opacity .15s;cursor:pointer}
.tw .comp-card:hover .comp-x,.tw .comp-x:focus{opacity:1}
.tw .comp-x:hover{background:var(--red);color:#fff;border-color:var(--red)}
.tw .comp-media{position:relative;width:130px;flex-shrink:0;aspect-ratio:4/5;border-radius:var(--radius-sm);overflow:hidden;background:linear-gradient(150deg,#1b3a49,#0f2733)}
.tw .comp-media.ig{background:linear-gradient(150deg,#8a3ab9,#e95950 60%,#fccc63)}
.tw .comp-media.yt{background:linear-gradient(150deg,#3a1414,#7a1f1f)}
.tw .comp-media .mcover-img{width:100%;height:100%;object-fit:cover;display:block}
.tw .comp-media .mplay{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:1.4rem;pointer-events:none}
.tw .comp-media .mplay span{width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,.32);display:grid;place-items:center;backdrop-filter:blur(2px)}
.tw .comp-media .mcover{position:absolute;left:0;right:0;bottom:0;padding:6px 8px;font-family:'Spline Sans Mono',monospace;font-size:.55rem;color:rgba(255,255,255,.92);background:linear-gradient(transparent,rgba(0,0,0,.55));text-transform:uppercase;letter-spacing:.04em}
.tw .comp-media.none{background:var(--panel);display:grid;place-items:center;text-align:center;padding:10px}
.tw .comp-media.none .nolabel{font-family:'Spline Sans Mono',monospace;font-size:.58rem;color:var(--panel-dim);line-height:1.4}
.tw .score-badge{position:absolute;top:7px;left:7px;z-index:2;width:34px;height:34px;border-radius:50%;background:var(--ocean);color:#fff;display:grid;place-items:center;font-family:'Spline Sans Mono',monospace;font-size:.86rem;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.3);border:2px solid rgba(255,255,255,.85)}
.tw .score-badge.mid{background:var(--sunset-deep)}
.tw .rank-tag{position:absolute;top:9px;right:8px;z-index:2;font-family:'Spline Sans Mono',monospace;font-size:.62rem;color:#fff;background:rgba(0,0,0,.4);border-radius:20px;padding:1px 7px}
.tw .comp-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.tw .comp-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-right:24px}
.tw .comp-handle{font-weight:700;font-size:.94rem;color:var(--ink)}
.tw .comp-chip{font-family:'Spline Sans Mono',monospace;font-size:.58rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ocean-deep);background:var(--ocean-soft);border-radius:5px;padding:2px 7px;font-weight:700}
.tw .comp-date{font-family:'Spline Sans Mono',monospace;font-size:.64rem;color:var(--ink-soft);margin-left:auto}
.tw .comp-hook{font-family:'Fraunces',serif;font-size:.98rem;font-weight:600;line-height:1.28;color:var(--ink)}
.tw .comp-metrics{display:flex;gap:14px;flex-wrap:wrap;font-size:.78rem;color:var(--ink-soft)}
.tw .comp-metrics b{font-family:'Spline Sans Mono',monospace;color:var(--ink);font-variant-numeric:tabular-nums;font-weight:600}
.tw .comp-metrics .dim b{color:var(--gray)}
.tw .comp-note{font-size:.7rem;color:var(--ink-soft);font-style:italic}
.tw .comp-pattern{background:var(--well);border-left:3px solid var(--ocean);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:8px 11px;font-size:.83rem;line-height:1.45;color:var(--ink)}
.tw .tia-read{font-family:'Spline Sans Mono',monospace;font-size:.56rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--ocean-deep);background:var(--ocean-soft);border-radius:5px;padding:2px 6px;margin-right:6px}
.tw .comp-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:1px}
.tw .btn-drawer{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-pill);padding:7px 13px;font-size:.77rem;font-weight:600;color:var(--ink-soft);cursor:pointer}
.tw .btn-drawer:hover{background:var(--seafoam);color:var(--ink)}
.tw .btn-remi{background:var(--ocean);color:#fff;border:none;border-radius:var(--radius-pill);padding:7px 15px;font-size:.77rem;font-weight:700;display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.tw .btn-remi:hover{background:var(--ocean-deep)}
.tw .btn-remi.done{background:var(--green-soft);color:var(--green);pointer-events:none}
.tw .btn-remi .av{width:17px;height:17px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;font-size:.58rem;font-weight:700}
.tw .comp-drawer{border-top:1px solid var(--line);padding-top:9px;margin-top:2px;font-size:.82rem;line-height:1.5;color:var(--ink-soft)}
.tw .comp-drawer[hidden]{display:none}
.tw .comp-drawer .struct{display:flex;flex-direction:column;gap:5px;margin-top:7px}
.tw .comp-drawer .struct div{display:flex;gap:9px}
.tw .comp-drawer .struct .n{font-family:'Spline Sans Mono',monospace;font-size:.64rem;color:var(--ocean-deep);flex-shrink:0;padding-top:2px}
.tw .tw-empty{border:1px dashed var(--line-strong);border-radius:var(--radius);background:var(--well);padding:26px 22px;text-align:center;color:var(--ink-soft);font-size:.9rem;line-height:1.6}
.tw .tw-empty b{color:var(--ink);font-family:'Fraunces',serif;font-weight:600}

@media (max-width:820px){
  .tw .comp-grid{grid-template-columns:1fr}
  .tw .tw-title{font-size:1.6rem}
}
@media (prefers-reduced-motion: reduce){
  .tw .pin,.tw .tw-alertcard,.tw .comp-card{transition:none}
  .tw .tw-alerttag .siren{animation:none}
}

/* ===================== Content Bank (Warm Console) =====================
 * Approved Jul 28: clean rows (not media cards), review-first, board in
 * Jordan's words. Background stays the shell seafoam; warmth is accent-only
 * (the sunrise hairline, warm --cbk-raise hover, sunset on eyebrow/count/
 * redraft). No shell background token is touched (spec invariant 9). */
.cbk-wrap{--cbk-raise:#FBF4E9}
:root[data-theme="dark"] .cbk-wrap{--cbk-raise:#241F16}

/* header: subhead + explainer toggle */
.cbk-subhead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.cbk-eyebrow{font-family:'Spline Sans Mono',monospace;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sunset-deep)}
.cbk-flowtoggle{border:1px solid var(--line);background:var(--well);color:var(--ink-soft);border-radius:9px;padding:7px 12px;font-size:.76rem;cursor:pointer}
.cbk-flow{margin:0 0 16px;border:1px dashed var(--line-strong);border-radius:var(--radius-sm);background:var(--well);padding:14px 16px;font-size:.8rem;color:var(--ink-soft);line-height:1.65}
.cbk-flow b{color:var(--ink)}
.cbk-flow .steps{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:9px}
.cbk-flow .step{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:4px 10px;font-size:.76rem;color:var(--ink)}
.cbk-flow .arr{color:var(--ink-soft)}

/* toolbar: view switch + filters + new */
.cbk-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.cbk-views{display:inline-flex;gap:3px;background:var(--card);border:1px solid var(--line);border-radius:11px;padding:3px}
.cbk-views button{border:0;background:transparent;color:var(--ink-soft);font-size:.82rem;padding:8px 15px;border-radius:8px;display:flex;align-items:center;gap:7px;cursor:pointer}
.cbk-views button .n{font-family:'Spline Sans Mono',monospace;font-size:.6rem;background:var(--well);color:var(--ink-soft);padding:1px 7px;border-radius:20px}
.cbk-views button.on{background:var(--well);color:var(--ink);font-weight:700;box-shadow:var(--shadow-md)}
.cbk-views button.on .n{background:var(--sunset);color:#3d2606}
.cbk-filters{display:flex;gap:7px;margin-left:auto;flex-wrap:wrap;align-items:center}
.cbk-filters select{font-family:inherit;font-size:.76rem;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:8px;padding:6px 9px}
.cbk-wip{margin:0 0 14px;background:var(--amber-soft);border:1px solid var(--amber);border-radius:var(--radius-sm);padding:10px 14px;font-size:.8rem;color:var(--ink);display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* the rows panel (Your review + List) */
.cbk-lead{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.cbk-lead .big{font-family:'Fraunces',serif;font-size:1.2rem;font-weight:600}
.cbk-lead .big b{color:var(--sunset-deep)}
.cbk-lead .hint{margin-left:auto;font-size:.74rem;color:var(--ink-soft)}
.cbk-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-md)}
.cbk-horizon{height:3px;background:linear-gradient(90deg,var(--sunset) 0%,var(--coral) 30%,var(--ocean) 78%)}
.cbk-thead,.cbk-row{display:grid;grid-template-columns:30px 1fr 148px 92px 96px;align-items:center;gap:14px;padding:0 18px}
.cbk-thead{height:38px;border-bottom:1px solid var(--line);font-family:'Spline Sans Mono',monospace;font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);background:linear-gradient(180deg,var(--well),transparent)}
.cbk-row{min-height:58px;padding-top:9px;padding-bottom:9px;border-bottom:1px solid var(--line);position:relative;transition:background .12s;cursor:pointer}
.cbk-row:last-child{border-bottom:0}
.cbk-row:hover,.cbk-row:focus-visible{background:var(--cbk-raise);outline:none}
.cbk-ic{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-weight:700;font-size:.72rem;color:#fff}
.cbk-ic.threads{background:var(--ocean)}.cbk-ic.instagram{background:#C65B86}.cbk-ic.email{background:var(--sunset-deep)}.cbk-ic.other{background:var(--gray)}
.cbk-piece{min-width:0}
.cbk-hook{display:block;font-size:.92rem;color:var(--ink);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cbk-redraft{font-family:'Spline Sans Mono',monospace;font-size:.6rem;color:var(--sunset-deep);margin-top:2px}
.cbk-redraft::before{content:"\21A9  "}
.cbk-type{font-family:'Spline Sans Mono',monospace;font-size:.62rem;color:var(--ink-soft)}
.cbk-pill{font-size:.62rem;color:var(--ink-soft);background:var(--well);border:1px solid var(--line);border-radius:20px;padding:2px 10px;width:fit-content}
.cbk-upd{font-family:'Spline Sans Mono',monospace;font-size:.66rem;color:var(--gray);text-align:right}
.cbk-act{position:absolute;right:14px;display:none;gap:7px;align-items:center;background:linear-gradient(90deg,transparent,var(--cbk-raise) 18%);padding-left:44px;height:100%}
.cbk-row:hover .cbk-act,.cbk-row:focus-within .cbk-act{display:flex}
.cbk-row:hover .cbk-upd{opacity:0}
.cbk-empty{padding:34px 18px;text-align:center;color:var(--ink-soft);font-size:.85rem}
.cbk-foot{padding:12px 18px;font-size:.72rem;color:var(--ink-soft);display:flex;gap:18px;border-top:1px solid var(--line);background:linear-gradient(0deg,var(--well),transparent)}
.cbk-foot b{color:var(--sunset-deep);font-weight:700;font-family:'Spline Sans Mono',monospace}

/* board */
.cbk-board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.cbk-col{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;box-shadow:var(--shadow-md);display:flex;flex-direction:column;min-height:360px}
.cbk-col-head{display:flex;align-items:center;gap:7px;padding:11px 12px 9px;font-size:.8rem;font-weight:700;border-bottom:1px solid var(--line)}
.cbk-col-head .n{margin-left:auto;font-family:'Spline Sans Mono',monospace;font-size:.6rem;background:var(--well);border:1px solid var(--line);color:var(--ink-soft);padding:1px 8px;border-radius:20px}
.cbk-col.hot .cbk-col-head{background:linear-gradient(180deg,var(--sunset-soft),transparent)}
.cbk-col.hot .cbk-col-head .n{background:var(--sunset);color:#3d2606;border-color:transparent}
.cbk-items{padding:8px;display:flex;flex-direction:column;gap:7px;overflow-y:auto}
.cbk-item{border:1px solid var(--line);border-radius:10px;padding:9px 10px;background:var(--card);cursor:pointer;transition:background .12s,box-shadow .12s}
.cbk-item:hover{background:var(--cbk-raise);box-shadow:var(--shadow-md)}
.cbk-item .r1{display:flex;align-items:center;gap:7px;margin-bottom:5px}
.cbk-item .mic{width:18px;height:18px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-family:'Spline Sans Mono',monospace;font-size:.5rem;color:#fff}
.cbk-item .mic.threads{background:var(--ocean)}.cbk-item .mic.instagram{background:#C65B86}.cbk-item .mic.email{background:var(--sunset-deep)}.cbk-item .mic.other{background:var(--gray)}
.cbk-item .mtype{font-family:'Spline Sans Mono',monospace;font-size:.54rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft)}
.cbk-item .mhook{font-size:.78rem;line-height:1.28;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cbk-item .mfoot{margin-top:6px;display:flex;align-items:center;gap:8px}
.cbk-drafting{font-family:'Spline Sans Mono',monospace;font-size:.6rem;color:var(--ocean-deep);display:inline-flex;align-items:center;gap:5px}
.cbk-drafting .pulse{width:6px;height:6px;border-radius:50%;background:var(--ocean);animation:cbkpulse 1.3s infinite}
@keyframes cbkpulse{0%,100%{opacity:.35}50%{opacity:1}}
.cbk-sched{font-family:'Spline Sans Mono',monospace;font-size:.6rem;color:var(--green)}
.cbk-score{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Spline Sans Mono',monospace;font-size:.66rem;font-weight:600}
.cbk-score.hi{color:var(--sunset-deep);box-shadow:inset 0 0 0 2px var(--sunset)}
.cbk-score.mid{color:var(--ocean-deep);box-shadow:inset 0 0 0 2px var(--ocean)}
.cbk-sidelanes{display:flex;gap:12px;margin-top:12px}
.cbk-sidelane{flex:1;display:flex;align-items:center;gap:10px;background:var(--card);border:1px dashed var(--line-strong);border-radius:var(--radius-sm);padding:11px 14px;cursor:pointer}
.cbk-sidelane:hover{background:var(--cbk-raise)}
.cbk-sidelane .lbl{font-weight:700;font-size:.85rem}
.cbk-sidelane .dsc{font-size:.72rem;color:var(--ink-soft)}
.cbk-sidelane .n{margin-left:auto;font-family:'Spline Sans Mono',monospace;font-size:.68rem;background:var(--well);border:1px solid var(--line);color:var(--ink-soft);padding:3px 10px;border-radius:20px}

@media (max-width:820px){
  .cbk-board{grid-template-columns:1fr 1fr}
  .cbk-thead,.cbk-row{grid-template-columns:30px 1fr 84px}
  .cbk-type,.cbk-upd{display:none}
  .cbk-sidelanes{flex-direction:column}
}

/* ===== Control Room + Logs: warm Console polish (Aug 5) =====
 * The pages were already built in the July audit; this brings them up to the
 * warm Console look: the sunrise hairline on each panel + a warm row/card
 * hover. Structure (job cards, needs-look box, filters, day separators) is
 * unchanged. */
.cr-card,.cr-feed-card,.logs-card{position:relative}
.cr-card::before,.cr-feed-card::before,.logs-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  border-radius:var(--radius) var(--radius) 0 0;
  background:linear-gradient(90deg,var(--sunset) 0%,var(--coral) 30%,var(--ocean) 78%)}
.cr-jobcard{transition:background .12s,box-shadow .12s,transform .12s}
.cr-jobcard:hover{background:rgba(224,138,30,.06);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.cr-log{transition:background .12s;border-radius:8px;padding-left:6px;padding-right:6px;margin-left:-6px;margin-right:-6px}
.cr-log:hover{background:rgba(224,138,30,.06)}

/* ---- Report voice player (Tia/Ada spoken editions) ---- */
/* the sticky bar: pinned at the top of the scroll area, under the tab row */
.rp-bar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:12px;
  background:var(--card);border:1px solid var(--line-strong);border-radius:12px;
  padding:9px 12px;margin:0 0 16px;box-shadow:var(--shadow-md)}
.rp-bar[hidden]{display:none}
.rp-toggle{width:30px;height:30px;border-radius:50%;flex-shrink:0;border:0;cursor:pointer;
  background:var(--ocean);position:relative}
.rp-toggle::after{content:"";position:absolute;left:50%;top:50%;
  transform:translate(-35%,-50%);border-left:9px solid #fff;
  border-top:6px solid transparent;border-bottom:6px solid transparent}
.rp-bar.playing .rp-toggle::after{border:0;left:50%;top:50%;width:3px;height:11px;
  transform:translate(-50%,-50%);background:#fff;
  box-shadow:4px 0 0 #fff,-4px 0 0 #fff}
.rp-meta{display:flex;flex-direction:column;min-width:118px}
.rp-label{font-size:.8rem;font-weight:700;color:var(--ink);line-height:1.2}
.rp-time{font-size:.6rem;color:var(--ink-soft)}
.rp-track{flex:1;height:6px;border-radius:6px;background:var(--well);cursor:pointer;overflow:hidden}
.rp-fill{height:100%;width:0;background:var(--ocean);border-radius:6px}
.rp-close{margin-left:2px;color:var(--ink-soft);font-size:1.2rem;line-height:1;
  cursor:pointer;background:none;border:0;padding:2px 4px}
.rp-close:hover{color:var(--ink)}
/* the now-live triggers (were disabled placeholders) */
.player[data-report-audio],.voice-pill[data-report-audio]{cursor:pointer;opacity:1;
  transition:border-color .15s,background .15s}
.player[data-report-audio]:hover{border-color:var(--ocean)}
.voice-pill[data-report-audio]:hover{border-color:var(--ocean);color:var(--ink)}