/* ═══════════════════════════════════════════════════
   PRISM — design system
   Light editorial. Warm canvas, ink text, white cards.
   The spectrum gradient is the identity; status colors
   carry meaning in the matrix. Nothing else competes.
   ═══════════════════════════════════════════════════ */

:root {
  --canvas: #FAF8F4;
  --card: #FFFFFF;
  --ink: #1A1723;
  --ink-soft: #4A4556;
  --muted: #8B8698;
  --border: #E9E4DB;
  --border-strong: #D8D2C6;

  --spectrum: linear-gradient(120deg, #FF5E5B 0%, #FFB800 26%, #00C48C 52%, #2D9CDB 76%, #7B61FF 100%);

  /* status colors — the matrix language */
  --st-gap: #C9C3B8;
  --st-production: #E8A200;
  --st-production-bg: #FFF4D6;
  --st-live: #2D9CDB;
  --st-live-bg: #E3F1FA;
  --st-winning: #00A876;
  --st-winning-bg: #DDF5EC;
  --st-fatigued: #E5484D;
  --st-fatigued-bg: #FDE7E7;

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --r: 10px;
  --r-lg: 16px;
  --shadow: 0 1px 2px rgba(26,23,35,.05), 0 4px 16px rgba(26,23,35,.05);
  --shadow-lift: 0 2px 4px rgba(26,23,35,.06), 0 12px 32px rgba(26,23,35,.10);
}

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

html, body { height: 100%; }

body {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: 13.5px; color: var(--ink); }
::placeholder { color: var(--muted); opacity: .8; }

/* ── layout shell ─────────────────────────────── */

.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 232px; flex-shrink: 0;
  background: var(--card);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  padding: 20px 14px 14px;
}

.main {
  flex: 1; min-width: 0;
  padding: 36px 44px 80px;
  max-width: 1240px;
}

/* logo */
.logo { display: flex; align-items: center; gap: 10px; padding: 2px 8px 18px; }
.logo-mark {
  width: 26px; height: 26px; flex-shrink: 0;
  background: var(--spectrum);
  clip-path: polygon(50% 4%, 96% 92%, 4% 92%);
  border-radius: 2px;
}
.logo-word {
  font-family: var(--font-display);
  font-size: 21px; font-weight: 600; letter-spacing: .01em;
}

/* brand switcher */
.brand-switch {
  margin: 0 0 18px;
  padding: 9px 12px;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--canvas);
  font-size: 13px; font-weight: 600;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' stroke='%238B8698' fill='none' stroke-width='1.5' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

/* platform switcher — secondary to the brand switcher */
.platform-switch {
  margin-top: -10px;
  font-weight: 500;
  color: var(--ink-soft);
  background-color: var(--card);
}

/* nav */
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border: none; background: none;
  border-radius: var(--r);
  font-size: 13.5px; font-weight: 500;
  color: var(--ink-soft);
  text-align: left; width: 100%;
  transition: background .12s;
}
.nav-item:hover { background: var(--canvas); color: var(--ink); }
.nav-item.active { background: var(--ink); color: #fff; }
.nav-item .nav-ico { width: 17px; text-align: center; font-size: 14px; opacity: .85; }

.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-top: 14px; border-top: 1px solid var(--border); }
.sidebar-foot .nav-item { font-size: 12.5px; color: var(--muted); }
.sidebar-foot .nav-item:hover { color: var(--ink); }

/* ── page primitives ──────────────────────────── */

.page-head { margin-bottom: 28px; }
.page-title {
  font-family: var(--font-display);
  font-size: 30px; font-weight: 600; letter-spacing: -.01em;
  line-height: 1.15;
}
.page-sub { color: var(--muted); margin-top: 6px; font-size: 13.5px; max-width: 640px; }

.section-title {
  font-size: 11.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted);
  margin: 34px 0 12px;
  display: flex; align-items: center; gap: 10px;
}
.section-title:first-child { margin-top: 0; }
.section-title .grow { flex: 1; height: 1px; background: var(--border); }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow: var(--shadow);
}

.grid { display: grid; gap: 14px; }
.grid.c2 { grid-template-columns: 1fr 1fr; }
.grid.c3 { grid-template-columns: repeat(3, 1fr); }
.grid.c4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .grid.c3, .grid.c4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: 1fr; }
  .main { padding: 24px 18px 60px; }
  .sidebar { width: 190px; }
}

/* ── buttons ──────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px;
  border-radius: var(--r);
  border: 1px solid var(--border-strong);
  background: var(--card);
  font-size: 13px; font-weight: 600; color: var(--ink);
  transition: all .12s;
}
.btn:hover { border-color: var(--ink); }
.btn.primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn.primary:hover { background: #2E2A3A; }
.btn.ai {
  border: none; color: #fff;
  background: var(--ink);
  position: relative;
}
.btn.ai::before {
  content: ''; position: absolute; inset: -1.5px;
  border-radius: 11.5px; background: var(--spectrum);
  z-index: -1;
}
.btn.sm { padding: 5px 10px; font-size: 12px; border-radius: 8px; }
.btn.ghost { border-color: transparent; background: none; color: var(--muted); }
.btn.ghost:hover { color: var(--ink); background: var(--canvas); }
.btn.danger:hover { border-color: var(--st-fatigued); color: var(--st-fatigued); }
.btn:disabled { opacity: .5; cursor: default; }

/* ── forms ────────────────────────────────────── */

.fg { margin-bottom: 14px; }
.fg label {
  display: block; font-size: 11.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px;
}
/* A bare <input> — which is most of them — matched none of the old type
   selectors and fell back to the browser's ~170px default, which is why fields
   in popups sat at odd widths and pushed their rows sideways. Match every text
   entry instead of enumerating types. */
.fg input:not([type=checkbox]):not([type=radio]), .fg textarea, .fg select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--card);
  transition: border-color .12s;
}
.fg textarea { min-height: 74px; resize: vertical; line-height: 1.5; }
.fg input:focus, .fg textarea:focus, .fg select:focus {
  outline: none; border-color: var(--ink);
}
.fg .hint { font-size: 12px; color: var(--muted); margin-top: 5px; }

/* ── chips, badges, tags ──────────────────────── */

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: .03em;
  padding: 3px 9px; border-radius: 99px;
}
.badge.ai-draft { background: linear-gradient(120deg, #FFF0EF, #F0EBFF); color: #7B61FF; border: 1px solid #E4DBFF; }
.badge.st-production { background: var(--st-production-bg); color: var(--st-production); }
.badge.st-live { background: var(--st-live-bg); color: var(--st-live); }
.badge.st-winning { background: var(--st-winning-bg); color: var(--st-winning); }
.badge.st-fatigued { background: var(--st-fatigued-bg); color: var(--st-fatigued); }
.badge.st-gap { background: var(--canvas); color: var(--muted); border: 1px dashed var(--border-strong); }
.badge.neutral { background: var(--canvas); color: var(--ink-soft); border: 1px solid var(--border); }

.angle-type {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  padding: 2px 7px; border-radius: 5px;
}
.angle-type.pain      { background: #FDE7E7; color: #C4373C; }
.angle-type.desire    { background: #E7F0FD; color: #2668C4; }
.angle-type.objection { background: #FFF4D6; color: #A87400; }
.angle-type.trigger   { background: #F5E7FD; color: #8A2BC4; }
.angle-type.proof     { background: #DDF5EC; color: #00815B; }

/* ── entry cards (Brand Brain collections) ────── */

.entry {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px;
  position: relative;
  transition: box-shadow .15s;
}
.entry:hover { box-shadow: var(--shadow); }
.entry-head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.entry-title { font-weight: 700; font-size: 14px; flex: 1; }
.entry-body { font-size: 13px; color: var(--ink-soft); }
.entry-body .kv { margin-top: 6px; }
.entry-body .kv b { color: var(--ink); font-weight: 600; }
.entry-actions { display: flex; gap: 2px; opacity: 0; transition: opacity .12s; }
.entry:hover .entry-actions { opacity: 1; }
.icon-btn {
  border: none; background: none; color: var(--muted);
  width: 26px; height: 26px; border-radius: 7px;
  font-size: 13px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn:hover { background: var(--canvas); color: var(--ink); }
.icon-btn.danger:hover { background: var(--st-fatigued-bg); color: var(--st-fatigued); }

/* ── stat tiles (dashboard) ───────────────────── */

.stat { padding: 18px 20px; }
.stat .stat-label { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.stat .stat-value { font-family: var(--font-display); font-size: 34px; font-weight: 600; margin-top: 4px; line-height: 1.1; }
.stat .stat-note { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.stat .stat-value .unit { font-size: 18px; color: var(--muted); }

.meter { height: 6px; border-radius: 99px; background: var(--border); overflow: hidden; margin-top: 10px; }
.meter > div { height: 100%; border-radius: 99px; background: var(--spectrum); }

/* ── matrix ───────────────────────────────────── */

.matrix-wrap { overflow-x: auto; padding-bottom: 8px; }
.matrix { border-collapse: separate; border-spacing: 6px; }
.matrix th { font-size: 12px; font-weight: 600; color: var(--ink-soft); padding: 6px 10px; text-align: left; vertical-align: bottom; }
.matrix th.col-head { max-width: 150px; min-width: 120px; }
.matrix th.col-head .angle-title { display: block; margin-top: 4px; font-weight: 700; color: var(--ink); font-size: 12.5px; line-height: 1.3; }
.matrix td.row-head { font-weight: 700; font-size: 13px; white-space: nowrap; padding-right: 14px; }

.cell {
  width: 100%; min-width: 120px; height: 62px;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--card);
  font-size: 11.5px; font-weight: 600;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 3px; padding: 8px 11px;
  transition: transform .1s, box-shadow .12s;
  text-align: left;
}
.cell:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.cell .cell-state { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }
.cell .cell-count { color: var(--muted); font-weight: 500; font-size: 11px; }
.cell.gap { border-style: dashed; border-color: var(--border-strong); background: transparent; }
.cell.gap .cell-state { color: var(--muted); }
.cell.production { background: var(--st-production-bg); border-color: #F2D389; }
.cell.production .cell-state { color: var(--st-production); }
.cell.live { background: var(--st-live-bg); border-color: #A8D4EE; }
.cell.live .cell-state { color: var(--st-live); }
.cell.winning { background: var(--st-winning-bg); border-color: #93DFC4; }
.cell.winning .cell-state { color: var(--st-winning); }
.cell.fatigued { background: var(--st-fatigued-bg); border-color: #F3AFB1; }
.cell.fatigued .cell-state { color: var(--st-fatigued); }
.cell.selected { outline: 2px solid var(--ink); outline-offset: 1px; }

.matrix-legend { display: flex; gap: 16px; flex-wrap: wrap; margin: 14px 2px; font-size: 12px; color: var(--ink-soft); }
.matrix-legend .dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 5px; vertical-align: -1px; }

/* ── suggestion / alert rows ──────────────────── */

.row-item {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.row-item .row-main { flex: 1; min-width: 0; }
.row-item .row-title { font-weight: 600; font-size: 13.5px; }
.row-item .row-sub { font-size: 12.5px; color: var(--muted); margin-top: 1px; }

/* ── modal ────────────────────────────────────── */

.modal-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(26,23,35,.4);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 6vh 20px; overflow-y: auto;
  backdrop-filter: blur(2px);
}
.modal {
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
  width: 100%; max-width: 560px;
  padding: 26px;
  animation: pop .16s ease-out;
}
.modal.wide { max-width: 780px; }
@keyframes pop { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-title { font-family: var(--font-display); font-size: 21px; font-weight: 600; margin-bottom: 16px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* ── toast ────────────────────────────────────── */

.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff;
  font-size: 13px; font-weight: 600;
  padding: 11px 20px; border-radius: 99px;
  box-shadow: var(--shadow-lift);
  z-index: 100; animation: pop .18s ease-out;
  max-width: 80vw;
}

/* ── empty states ─────────────────────────────── */

.empty {
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--r-lg);
  padding: 40px 24px;
  text-align: center; color: var(--muted);
}
.empty .empty-title { font-family: var(--font-display); font-size: 18px; color: var(--ink-soft); margin-bottom: 6px; }
.empty .btn { margin-top: 14px; }

/* ── misc ─────────────────────────────────────── */

.spectrum-bar { height: 3px; border-radius: 99px; background: var(--spectrum); }
.mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12px; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.flex { display: flex; align-items: center; gap: 10px; }
.flex .grow { flex: 1; }
.mt0 { margin-top: 0; } .mt8 { margin-top: 8px; } .mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; }
.spin { display: inline-block; animation: rot 1s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }

.prompt-block {
  background: #211D2B; color: #EDEAF4;
  border-radius: var(--r);
  padding: 16px; font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 12px; line-height: 1.6;
  white-space: pre-wrap; max-height: 340px; overflow-y: auto;
}

/* hook code chip — hover (native title) reveals the full hook text */
.hook-code {
  display: inline-block;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px; font-weight: 700;
  color: var(--accent, #7B61FF);
  background: #F0EBFF;
  border: 1px solid #E4DBFF;
  border-radius: 5px;
  padding: 1px 6px;
  cursor: help;
  vertical-align: middle;
}

/* demo-mode ribbon */
.demo-ribbon {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 700;
  color: #7B61FF;
  background: linear-gradient(120deg, #FFF0EF, #F0EBFF);
  border: 1px solid #E4DBFF;
  padding: 4px 11px; border-radius: 99px;
}

/* ═══ Home — all brands ═══ */
.home-card{cursor:pointer;padding:16px}
.home-card:hover{box-shadow:0 4px 14px rgba(20,20,30,.08)}
.home-new{display:flex;align-items:center;justify-content:center;color:var(--ink-soft);border-style:dashed}
.home-metric{font-size:22px;font-weight:600;margin-top:8px}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:8px;flex-shrink:0}
.dot-good{background:#2eae60}.dot-watch{background:#e2a63d}.dot-bad{background:#d64545}.dot-none{background:#c8c8c8}

/* ═══ Signals — review surface ═══ */
.seg{display:inline-flex;border:1px solid var(--border,#ddd);border-radius:9px;overflow:hidden}
.seg-btn{border:0;background:var(--card,#fff);padding:7px 13px;cursor:pointer;font:inherit;font-size:13px;color:var(--ink-soft)}
.seg-btn.on{background:var(--ink,#1c1c28);color:#fff}
.board{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.board-head{font-weight:600;font-size:13px;margin-bottom:10px}
.board-head.up{color:#2eae60}.board-head.down{color:#d64545}
.board-card{display:flex;gap:12px;background:var(--card,#fff);border:1px solid var(--border,#e6e2da);border-radius:12px;padding:12px;margin-bottom:10px;cursor:pointer}
.board-card:hover{box-shadow:0 4px 14px rgba(20,20,30,.08)}
.ad-thumb{width:84px;height:84px;border-radius:8px;object-fit:cover;background:#eee;flex-shrink:0}
.ad-thumb.ph{display:flex;align-items:center;justify-content:center;color:#bbb;font-size:26px}
.ad-thumb.vid{position:relative;overflow:hidden}
.ad-thumb.vid img{width:100%;height:100%;object-fit:cover}
.ad-thumb.vid .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.board-body{min-width:0}
.gap{gap:12px}
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:13px;background:var(--card,#fff);border-radius:12px}
.tbl th,.tbl td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--border,#eee);white-space:nowrap}
.click{cursor:pointer}
.det{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.det-media img,.det-media video{width:100%;border-radius:10px;margin-bottom:10px;background:#111}
.det-ph{width:100%;height:220px}
.det-met{margin-right:10px}
@media(max-width:900px){.det{grid-template-columns:1fr}.board{grid-template-columns:1fr}}

/* ═══ Review notes panel ═══ */
#notes-root .notes-panel{position:fixed;z-index:60;background:var(--card,#fff);border-left:1px solid var(--border,#ddd);display:flex;flex-direction:column;box-shadow:-4px 0 18px rgba(20,20,30,.06)}
#notes-root .notes-panel.float{border:1px solid var(--border,#ddd);border-radius:12px;box-shadow:0 10px 32px rgba(20,20,30,.18)}
.notes-head{display:flex;align-items:center;gap:6px;padding:10px 12px;cursor:grab;border-bottom:1px solid var(--border,#eee);user-select:none}
.notes-tabs{display:flex;gap:2px;padding:6px 8px;border-bottom:1px solid var(--border,#eee);flex-wrap:wrap}
.notes-tab{border:0;background:transparent;font:inherit;font-size:12px;padding:4px 8px;border-radius:8px;cursor:pointer;color:var(--ink-soft)}
.notes-tab.on{background:var(--ink,#1c1c28);color:#fff}
.notes-list{flex:1;overflow-y:auto;padding:6px 10px}
.notes-item{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;font-size:13px;padding:7px 8px;border-bottom:1px solid var(--border,#f2efe9)}
.notes-foot{padding:8px 10px;border-top:1px solid var(--border,#eee);display:flex;gap:6px;align-items:flex-end;flex-wrap:wrap}
.notes-foot textarea{flex:1;min-width:120px}
.notes-grip{position:absolute;bottom:2px;left:4px;cursor:nwse-resize;color:#bbb;user-select:none}
#notes-root .notes-panel.float .notes-grip{left:auto;right:4px}
.notes-edge{position:absolute;left:-3px;top:0;width:6px;height:100%;cursor:ew-resize}
.notes-pill{position:fixed;right:16px;bottom:16px;z-index:60;border:1px solid var(--border,#ddd);background:var(--card,#fff);border-radius:20px;padding:8px 14px;font:inherit;font-size:13px;cursor:pointer;box-shadow:0 4px 14px rgba(20,20,30,.12)}
.wrap-row{align-items:flex-start}
.wrap-row .wrap-text{flex:1;margin-left:8px}

/* ═══ Insights ═══ */
.insight{font-size:13px;padding:6px 8px;border-radius:8px;margin-bottom:6px;background:#faf8f4}
.insight.win{color:#1d7a44}.insight.warn{color:#a33}.insight.info{color:var(--ink-soft)}

/* ═══════════════════════════════════════════════════
   UI CLARITY SYSTEM (2026-08 redesign)
   One visual vocabulary per meaning: accents say WHERE,
   pills say WHAT, bars say HOW GOOD, category colors
   say WHICH KIND of learning. Grey rows are for lists.
   ═══════════════════════════════════════════════════ */

:root {
  --ac-signals: #E06552;   /* Performance (review surface) */
  --ac-brain:   #7B61FF;
  --ac-performance: #0E9F8D;
  --ac-review:  #E06552;
  --ac-batches: #E2A200;
  --ac-tests:   #2D9CDB;
  --ac-learnings: #C2557E;
  --ac-home:    #1A1723;

  --cat-dos:        #1D8A4C; --cat-dos-bg:        #E3F4EA;
  --cat-donts:      #CE4747; --cat-donts-bg:      #FBE7E7;
  --cat-learnings:  #3A6BB0; --cat-learnings-bg:  #E6EEF9;
  --cat-hypotheses: #A97B1D; --cat-hypotheses-bg: #FAF0DA;
  --cat-scratch:    #6E6879; --cat-scratch-bg:    #EFEDF2;
}

/* view accents: nav + page title */
.nav-item.active.v-signals{box-shadow:inset 3px 0 0 var(--ac-signals)}
.nav-item.active.v-brain{box-shadow:inset 3px 0 0 var(--ac-brain)}
.nav-item.active.v-performance{box-shadow:inset 3px 0 0 var(--ac-performance)}
.nav-item.active.v-review{box-shadow:inset 3px 0 0 var(--ac-review)}
.nav-item.active.v-batches{box-shadow:inset 3px 0 0 var(--ac-batches)}
.nav-item.active.v-tests{box-shadow:inset 3px 0 0 var(--ac-tests)}
.nav-item.active.v-learnings{box-shadow:inset 3px 0 0 var(--ac-learnings)}
.nav-item.active.v-home{box-shadow:inset 3px 0 0 var(--ac-home)}

.page-title.t-brain{border-bottom:3px solid var(--ac-brain);display:inline-block;padding-bottom:3px}
.page-title.t-performance{border-bottom:3px solid var(--ac-performance);display:inline-block;padding-bottom:3px}
.page-title.t-review{border-bottom:3px solid var(--ac-review);display:inline-block;padding-bottom:3px}
.page-title.t-batches{border-bottom:3px solid var(--ac-batches);display:inline-block;padding-bottom:3px}
.page-title.t-tests{border-bottom:3px solid var(--ac-tests);display:inline-block;padding-bottom:3px}
.page-title.t-learnings{border-bottom:3px solid var(--ac-learnings);display:inline-block;padding-bottom:3px}

/* pills — entity tags (persona / angle / format) */
.pill{display:inline-block;border-radius:9px;padding:1px 8px;font-size:11px;font-weight:600;white-space:nowrap}
.pill.persona{background:#FBE3EF;color:#A94B77}
.pill.angle{background:#EAE5FF;color:#6A55C8}
.pill.format{background:#E0F2E6;color:#2B7A4B}
.pill.demo{background:#F3EFFA;color:#7B61FF}

/* score bars — metric vs benchmark */
.score{display:flex;align-items:center;gap:7px;font-size:11.5px;margin-top:3px}
.score .score-label{width:86px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.score .score-track{flex:1;height:5px;background:var(--border);border-radius:3px;overflow:hidden;min-width:40px}
.score .score-fill{display:block;height:5px;border-radius:3px}
.score .good{background:var(--st-winning)}
.score .close{background:#E2A63D}
.score .bad{background:var(--st-fatigued)}
.score .none{background:var(--border-strong)}

/* stat strip + stat tiles */
.stat-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-top:14px}
.stat-tile{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:12px 14px}
.stat-tile .stat-label{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.stat-tile .stat-value{font-size:22px;font-weight:650;margin-top:2px}
.stat-tile .stat-trend{font-size:12px;font-weight:600;margin-left:6px}
.stat-tile .up{color:var(--st-winning)}
.stat-tile .down{color:var(--st-fatigued)}
.stat-tile .flat{color:var(--muted)}

/* board zones + rank badges */
.board-col.zone-top{background:#F2FAF5;border:1px solid #CFE8D8;border-radius:var(--r-lg);padding:12px}
.board-col.zone-under{background:#FDF4F4;border:1px solid #ECD2D2;border-radius:var(--r-lg);padding:12px}
.rank{width:20px;height:20px;border-radius:50%;color:#fff;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.rank.r-top{background:var(--st-winning)}
.rank.r-under{background:var(--st-fatigued)}

/* category colors — notes, wrap-up, playbook */
.cat-tab{border:0;font:inherit;font-size:12px;font-weight:600;padding:4px 9px;border-radius:9px;cursor:pointer;background:transparent;color:var(--muted)}
.cat-tab.on.c-dos{background:var(--cat-dos-bg);color:var(--cat-dos)}
.cat-tab.on.c-donts{background:var(--cat-donts-bg);color:var(--cat-donts)}
.cat-tab.on.c-learnings{background:var(--cat-learnings-bg);color:var(--cat-learnings)}
.cat-tab.on.c-hypotheses{background:var(--cat-hypotheses-bg);color:var(--cat-hypotheses)}
.cat-tab.on.c-scratch{background:var(--cat-scratch-bg);color:var(--cat-scratch)}
.cat-item{border-left:3px solid var(--border);padding:6px 9px;font-size:13px;margin-bottom:5px;border-radius:0 7px 7px 0;background:var(--card)}
.cat-item.c-dos{border-left-color:var(--cat-dos);background:#FBFDFB}
.cat-item.c-donts{border-left-color:var(--cat-donts);background:#FDFAFA}
.cat-item.c-learnings{border-left-color:var(--cat-learnings);background:#FAFBFD}
.cat-item.c-hypotheses{border-left-color:var(--cat-hypotheses);background:#FDFCF8}
.cat-item.c-scratch{border-left-color:var(--cat-scratch)}
.pb-card{border-top:3px solid var(--border)}
.pb-card.c-dos{border-top-color:var(--cat-dos)}
.pb-card.c-donts{border-top-color:var(--cat-donts)}
.pb-card.c-learnings{border-top-color:var(--cat-learnings)}
.pb-card.c-hypotheses{border-top-color:var(--cat-hypotheses)}

/* distinct timeframe chip (never confusable with brand switcher) */
.tf-chip{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--ink);border-radius:20px;padding:6px 12px;font-size:12.5px;font-weight:600;background:var(--card);cursor:pointer}
.tf-chip select{border:0;background:transparent;font:inherit;font-weight:600;cursor:pointer;outline:none}


/* guidance strip */
.guide-strip{display:flex;align-items:center;gap:14px;border:1.5px dashed #C9B8E8;background:#F8F5FD;border-radius:var(--r);padding:9px 14px;font-size:12.5px;margin-top:12px;flex-wrap:wrap}
.guide-strip b{color:var(--ac-brain)}
.guide-strip .guide-x{margin-left:auto;border:0;background:transparent;color:var(--muted);font-size:14px}

/* brain jump bar */
.jump-bar{position:sticky;top:0;z-index:5;display:flex;gap:6px;background:var(--canvas);padding:8px 0;margin-bottom:4px;flex-wrap:wrap}
.jump-bar a{text-decoration:none;font-size:12px;font-weight:600;color:var(--ink-soft);border:1px solid var(--border);border-radius:16px;padding:4px 11px;background:var(--card)}
.jump-bar a:hover{border-color:var(--ac-brain);color:var(--ac-brain)}

/* computed verdict badges */
.badge.v-win{background:var(--st-winning-bg);color:var(--st-winning)}
.badge.v-fatigue{background:var(--st-fatigued-bg);color:var(--st-fatigued)}

/* ═══ sidebar: active brand + platform system switcher ═══ */
.brand-bar{margin:0 0 12px}
.brand-bar-label{font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:1px}
.brand-bar-name{flex:1;min-width:0;font-family:var(--font-display);font-size:14.5px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.brand-bar-switch{border:0;background:transparent;color:var(--muted);font:inherit;font-size:11px;
  text-decoration:underline;padding:2px 0}
.brand-bar-switch:hover{color:var(--ink)}
.plat-row{display:flex;gap:3px;margin:0 0 14px;padding:3px;border:1px solid var(--border);
  border-radius:20px;background:var(--card)}
.plat-pill{flex:1;border:0;background:transparent;font:inherit;font-size:12px;padding:5px 4px;
  border-radius:16px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plat-pill:hover{background:var(--canvas)}
.plat-pill.on{background:var(--ink);color:#fff;font-weight:600}

/* page-header echo of the active platform system */
.plat-echo{display:inline-block;border:1px solid var(--border-strong);border-radius:14px;
  padding:2px 10px;font-size:11.5px;font-weight:600;color:var(--ink-soft);background:var(--card);
  vertical-align:middle;margin-left:2px}
.plat-echo.all{border-style:dashed;color:var(--muted)}

/* ═══ structured brief ═══ */
.deliv-list{border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.deliv-row{display:flex;align-items:center;gap:12px;padding:9px 12px;border-bottom:1px solid var(--border)}
.deliv-row:last-child{border-bottom:0}
.deliv-count{width:56px;text-align:center;padding:6px;border:1px solid var(--border);border-radius:7px;font-weight:600}
.brief-readonly{background:var(--canvas);border:1px solid var(--border);border-left:3px solid var(--ac-brain);
  border-radius:0 var(--r) var(--r) 0;padding:10px 12px;font-size:13px}
.brief-readonly a{color:var(--ac-brain)}

/* nav groups: brand knowledge above the platform switcher, work below */
#brand-nav{margin-bottom:14px}
#platform-nav{margin-bottom:8px}
.pill.test{background:#EAF0FB;color:#3A6BB0}

/* ═══ test block at the top of a brief ═══ */
.test-block{border:1.5px dashed var(--border-strong);border-radius:var(--r);padding:12px 14px;background:var(--card)}
.test-block.on{border-style:solid;border-color:var(--ac-tests);background:#F7FBFE}
.brief-locked-note{background:var(--cat-hypotheses-bg);color:var(--cat-hypotheses);border-radius:var(--r);padding:8px 12px;font-size:12.5px}

.logo{border:0;background:transparent;cursor:pointer;text-align:left;width:100%;padding:2px 8px 30px}
.logo:hover .logo-word{opacity:.7}

/* reference links on a brief — real links, not a text blob */
.ref-row{display:flex;align-items:center;gap:8px;padding:5px 9px;border:1px solid var(--border);
  border-radius:8px;margin-bottom:4px;font-size:13px;background:var(--card)}
.ref-row a{color:var(--ac-brain);text-decoration:none;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ref-row a:hover{text-decoration:underline}
.ref-chip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--border);border-radius:14px;
  padding:3px 10px;font-size:12px;text-decoration:none;color:var(--ac-brain);background:var(--card);margin:0 5px 5px 0}
.ref-chip:hover{border-color:var(--ac-brain)}

/* ═══ a brief, presented as a document ═══ */
.bf-doc{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--card);padding:16px;margin-top:12px}
.bf-meta{display:flex;flex-wrap:wrap;gap:8px;font-size:12px;color:var(--ink-soft);
  padding-bottom:12px;margin-bottom:4px;border-bottom:1px solid var(--border)}
.bf-meta span{background:var(--canvas);border-radius:12px;padding:3px 10px}
.bf-block{padding:11px 0;border-bottom:1px solid var(--border)}
.bf-block:last-child{border-bottom:0}
.bf-block.accent{border-left:3px solid var(--ac-review);padding-left:11px;background:#fffaf9;
  border-radius:0 8px 8px 0;border-bottom:0;margin:6px 0}
.bf-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:4px}
.bf-body{font-size:14px;line-height:1.6}
.bf-list{margin:6px 0 0 18px;font-size:13px;color:var(--ink-soft)}
.bf-deliv{padding:6px 0}
.bf-test{border:1.5px solid var(--ac-tests);background:#F7FBFE;border-radius:var(--r);padding:12px;margin-bottom:12px}
.bf-arms{display:flex;flex-direction:column;gap:5px;margin-top:6px}
.bf-arm{display:flex;align-items:center;gap:8px;font-size:13.5px}

/* ═══ creative filters + responsive ad grid ═══ */
.filter-bar{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.filter-pill{border:1px solid var(--border);background:var(--card);border-radius:16px;padding:5px 11px;
  font:inherit;font-size:12.5px;color:var(--ink-soft);cursor:pointer}
.filter-pill:hover{border-color:var(--border-strong)}
.filter-pill.on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}
.filter-n{opacity:.6;font-size:11px}
.filter-pill.on .filter-n{opacity:.75}
/* fills whatever width is available; never scrolls sideways */
.ad-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-top:12px}
.ad-grid .board-card{margin-bottom:0}
.tbl-wrap{overflow-x:auto;max-width:100%}
.tbl{table-layout:auto;width:100%}
.tbl td,.tbl th{white-space:normal}
.tbl td:first-child{min-width:150px}

/* ═══ connection walkthrough ═══ */
.cx-how{border:1px solid var(--border);border-left:3px solid var(--ac-performance);border-radius:0 var(--r) var(--r) 0;
  background:var(--card);padding:14px 16px;margin-top:14px;font-size:13.5px;line-height:1.6}
.cx-how p{margin-top:7px;color:var(--ink-soft)}
.cx-warn{border:1.5px dashed #C9B8E8;background:#F8F5FD;border-radius:var(--r);padding:11px 14px;
  margin-top:12px;font-size:13px;line-height:1.6}
.cx-step{display:flex;gap:14px;background:var(--card);border:1px solid var(--border);
  border-radius:var(--r);padding:14px 16px;margin-top:10px}
.cx-step.done{border-color:#CFE8D8;background:#FCFEFD}
.cx-num{width:26px;height:26px;flex-shrink:0;border-radius:50%;background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700}
.cx-step.done .cx-num{background:var(--st-winning)}
.cx-body{flex:1;min-width:0}
.cx-title{font-weight:600;font-size:14.5px}
.cx-what{font-size:13px;color:var(--ink-soft);margin-top:3px;line-height:1.6}
.cx-where{margin-top:9px;background:var(--canvas);border-radius:9px;padding:9px 12px}
.cx-where-label{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:4px}
.cx-where ol{margin:0 0 0 16px;font-size:12.5px;line-height:1.75;color:var(--ink-soft)}
.cx-confirm{display:flex;align-items:flex-start;gap:8px;margin-top:9px;font-size:13px;cursor:pointer}
.cx-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:16px}

/* ═══ filter bar — quiet by default ═══
   One button; chips appear only for filters that are actually set. Nothing on
   screen when you are not filtering. */
.fbar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:14px}
.fbtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--card);
  border-radius:8px;padding:6px 11px;font:inherit;font-size:13px;color:var(--ink-soft);cursor:pointer;
  transition:border-color .12s ease,color .12s ease}
.fbtn:hover{border-color:var(--border-strong);color:var(--ink)}
.fbtn.on{border-color:var(--ink);color:var(--ink);font-weight:600}
.fbtn-ico{font-size:13px;opacity:.7}
.fbtn-n{background:var(--ink);color:#fff;border-radius:99px;font-size:10.5px;font-weight:700;
  min-width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px}
.fchip{display:inline-flex;align-items:center;gap:6px;border:0;background:var(--cat-hypotheses-bg,#EEF1F6);
  color:var(--ink);border-radius:8px;padding:6px 8px 6px 10px;font:inherit;font-size:12.5px;cursor:pointer}
.fchip:hover .fchip-x{opacity:1}
.fchip-x{opacity:.45;font-size:14px;line-height:1}
.flink{border:0;background:transparent;font:inherit;font-size:12.5px;color:var(--ink-soft);
  cursor:pointer;text-decoration:underline;text-underline-offset:2px;padding:6px 4px}
.flink:hover{color:var(--ink)}
.fsheet{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media(max-width:640px){.fsheet{grid-template-columns:1fr}}

/* ═══ column picker + ads-manager table ═══ */
.colgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:4px 14px;margin-top:4px}
.colrow{display:flex;align-items:center;gap:8px;font-size:13px;padding:3px 0;cursor:pointer}
.tbl td.num,.tbl th.num{text-align:right;font-variant-numeric:tabular-nums}
.tbl tr.tot{font-weight:700;background:var(--bg)}
.tbl tr.tot td{border-top:1.5px solid var(--border-strong)}

/* ═══ tabs ═══ */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin:20px 0 6px;flex-wrap:wrap}
.tab{border:0;background:transparent;padding:9px 14px;font:inherit;font-size:13.5px;color:var(--ink-soft);
  cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .12s ease}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--ink);font-weight:600;border-bottom-color:var(--ink)}
.tab-n{opacity:.45;font-size:11.5px;margin-left:6px;font-weight:400}

/* ═══ hierarchy tree — pillar › angle › hook ═══ */
.tree{margin-top:12px}
.tree-group{border:1px solid var(--border);border-radius:12px;background:var(--card);margin-top:10px;overflow:hidden}
.tree-head{display:flex;align-items:center;gap:10px;padding:13px 15px;cursor:pointer}
.tree-head:hover{background:var(--bg)}
.tree-title{font-weight:600;font-size:14px}
.tree-meta{color:var(--ink-soft);font-size:12.5px;margin-left:auto}
.tree-row{display:flex;align-items:center;gap:10px;padding:11px 15px 11px 32px;border-top:1px solid var(--border)}
.tree-row:hover{background:var(--bg)}
.tree-row .tree-title{font-size:13.5px;font-weight:600}
.tree-hooks{padding:4px 15px 10px 52px;background:var(--bg);border-top:1px solid var(--border)}
.tree-hook{display:flex;align-items:center;gap:9px;padding:7px 0;font-size:13px}
.tree-hook + .tree-hook{border-top:1px solid var(--border)}
.tree-caret{width:14px;color:var(--ink-soft);font-size:11px;flex-shrink:0}
.tree-acts{display:flex;gap:2px;opacity:0;transition:opacity .12s ease}
.tree-head:hover .tree-acts,.tree-row:hover .tree-acts,.tree-hook:hover .tree-acts{opacity:1}
.tree-empty{padding:14px 15px 14px 32px;color:var(--ink-soft);font-size:13px;border-top:1px solid var(--border)}
.fbar.inline{margin-top:0}

/* ═══ briefs board — two columns, then production beneath ═══ */
.bcols{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px}
@media(max-width:900px){.bcols{grid-template-columns:1fr}}
.bcol-head{display:flex;align-items:baseline;gap:8px;font-size:12px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);
  padding-bottom:8px;border-bottom:1px solid var(--border)}
.bcol-n{font-weight:400;opacity:.6}
.bcol-empty{padding:22px 4px;color:var(--ink-soft);font-size:13px}

/* ═══ opportunity cards ═══ */
.opp{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--border);
  border-radius:12px;background:var(--card);padding:13px 15px;margin-top:8px}
.opp-body{flex:1;min-width:0}
.opp-title{font-weight:600;font-size:14px}
.opp-why{color:var(--ink-soft);font-size:13px;line-height:1.55;margin-top:4px}
.opp-pick{margin-top:2px}
.brand-bar-pick{display:block;width:100%;text-align:left;border:0;background:transparent;
  font:inherit;cursor:pointer;padding:0;border-radius:8px}
.brand-bar-pick:hover .brand-bar-name{color:var(--accent,#7B61FF)}
.brand-bar-pick:hover .brand-bar-switch{color:var(--ink)}

/* ═══ sync indicator — lives in the shell, outlives the view ═══ */
.syncbar{display:flex;gap:9px;align-items:flex-start;border:1px solid var(--border);
  border-radius:10px;background:var(--card);padding:9px 11px;margin-bottom:10px;font-size:12.5px}
.syncbar.warn{border-color:#E2A63D}
.syncbar.err{border-color:var(--st-fatigued)}
.syncbar-body{min-width:0;flex:1}
.syncbar-title{font-weight:600;color:var(--ink)}
.syncbar-sub{color:var(--ink-soft);font-size:11.5px;margin-top:2px;word-break:break-word}
.syncbar-acts{display:flex;gap:10px;margin-top:4px}
.syncbar-acts .flink{padding:0;font-size:11.5px}
.syncbar .spin{display:inline-block;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* ═══ ad-naming builder ═══
   The built name is the hero: a monospace preview on top, then the segments
   that produce it. Pills carry their own example value so the mapping between
   a segment and what it renders never needs explaining. */
.nbuild{max-width:860px}
.npreview{background:var(--ink,#1c1c28);border-radius:11px;padding:15px 17px;margin-bottom:18px;overflow-x:auto}
.npreview code{color:#fff;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;white-space:nowrap}
.nrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-height:44px}
.npill{display:inline-flex;align-items:center;gap:7px;background:var(--card,#fff);
  border:1px solid var(--border,#ddd);border-radius:10px;padding:6px 8px 6px 9px;cursor:grab;user-select:none}
.npill:active{cursor:grabbing}
.npill.locked{background:transparent;border-style:dashed;opacity:.6;cursor:default}
.npill-grip{opacity:.3;font-size:13px;line-height:1}
.npill-label{font-size:13px;font-weight:600}
.npill-eg{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;
  color:var(--ink-soft,#6b6b7b);background:var(--bg,#f4f4f6);border-radius:6px;padding:2px 6px}
.npill-btn{border:0;background:transparent;cursor:pointer;font:inherit;font-size:11px;
  color:var(--ink-soft,#6b6b7b);opacity:.45;padding:2px 3px;line-height:1}
.npill:hover .npill-btn{opacity:.8}
.npill-btn:hover{opacity:1}
.npill-btn:disabled{opacity:.15;cursor:default}
.npill-btn.x{font-size:13px}
.nadd{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.nchip{border:1px dashed var(--border,#ddd);background:transparent;border-radius:10px;
  padding:6px 11px;font:inherit;font-size:12.5px;color:var(--ink-soft,#6b6b7b);cursor:pointer}
.nchip:hover{border-style:solid;color:var(--ink,#1c1c28)}
/* secondary rows under the naming builder */
.nsub{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--border,#e6e6ea)}
.nsub-label{font-size:12px;font-weight:600;color:var(--ink-soft,#6b6b7b);min-width:104px}
.nchip.own{border-style:solid;color:var(--ink,#1c1c28)}
.nchip-kind{margin-left:7px;font-size:11px;opacity:.5}

/* ═══ modal containment ═══

   Popups spilled their contents, and it was never one popup's fault: a grid or
   flex child defaults to `min-width:auto`, which means it refuses to shrink
   below its longest unbreakable word. One long ad name, campaign name or URL
   and the whole box widens past its own edge. Fixing it per-modal would fix it
   until the next modal; these rules fix the container, so every popup — the
   ones written and the ones not yet written — is contained by default. */

.modal { max-width: min(560px, calc(100vw - 32px)); overflow-wrap: anywhere; }
.modal.wide { max-width: min(880px, calc(100vw - 32px)); }
.modal, .modal *, .modal *::before, .modal *::after { box-sizing: border-box; }

/* the actual fix — nothing inside may claim an intrinsic minimum */
.modal .det, .modal .flex, .modal .grid, .modal .row-item,
.modal .stat-strip, .modal .fbar, .modal .nrow, .modal .colgrid { min-width: 0; }
.modal .det > *, .modal .flex > *, .modal .grid > *, .modal .row-item > *,
.modal .stat-strip > *, .modal .colgrid > * { min-width: 0; }
.modal .row-main { min-width: 0; }
.modal .row-title, .modal .row-sub { overflow-wrap: anywhere; }

/* media and form controls never exceed the frame */
.modal img, .modal video, .modal canvas, .modal svg { max-width: 100%; height: auto; }
.modal input, .modal select, .modal textarea { max-width: 100%; }
.modal textarea { resize: vertical; }

/* wide tables scroll inside themselves rather than widening the box */
.modal .tbl { display: block; overflow-x: auto; max-width: 100%; }
.modal pre, .modal code { white-space: pre-wrap; overflow-wrap: anywhere; }

/* a footer with several buttons wraps instead of pushing sideways */
.modal-foot { flex-wrap: wrap; }
.modal-title { overflow-wrap: anywhere; }

/* very tall popups scroll themselves, so the action row stays reachable */
.modal { max-height: 88vh; overflow-y: auto; overscroll-behavior: contain; }

/* ═══ creative preview ═══ */
.det-asset { position: relative; margin-bottom: 10px; }
.det-asset img, .det-asset video { display: block; width: 100%; border-radius: 10px;
  background: var(--bg, #f0f0f3); margin-bottom: 0; }
.det-asset-tag { position: absolute; top: 8px; left: 8px; padding: 3px 8px; border-radius: 7px;
  background: rgba(20,20,28,.72); color: #fff; font-size: 10.5px; font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase; }
.det-asset-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 30px; color: #fff; text-decoration: none; text-shadow: 0 2px 12px rgba(0,0,0,.6);
  border-radius: 10px; background: rgba(20,20,28,.18); }
.det-asset-play:hover { background: rgba(20,20,28,.34); }

/* ad copy, laid out the way the platform stacks it */
.copy-card { border: 1px solid var(--border, #e6e6ea); border-radius: 11px; overflow: hidden; }
.copy-row { padding: 10px 13px; border-bottom: 1px solid var(--border, #e6e6ea); }
.copy-row:last-child { border-bottom: 0; }
.copy-label { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-soft, #6b6b7b); margin-bottom: 4px; }
.copy-text { font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; }
.copy-text.head { font-weight: 600; font-size: 14.5px; }
.copy-text.desc { color: var(--ink-soft, #6b6b7b); }
.copy-text.cta { display: inline-block; padding: 4px 11px; border-radius: 8px;
  background: var(--bg, #f0f0f3); font-size: 12px; font-weight: 600; text-transform: capitalize; }
.empty-copy { padding: 14px; }

/* an ad in a matrix cell — recognisable, and a way in */
.cell-ad { align-items: center; gap: 10px; }
.cell-thumb { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex: 0 0 44px;
  background: var(--bg, #f0f0f3); display: block; }
.cell-thumb.ph { border: 1px dashed var(--border, #ddd); }
.cell-ad .row-main.click:hover .row-title { text-decoration: underline; }
.ndetect { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; overflow-x: auto; white-space: nowrap; padding: 7px 10px;
  background: var(--bg, #f0f0f3); border-radius: 8px; }

/* Fixed column counts are fine on a page and wrong in a 560px popup, so grids
   inside a modal collapse on their own rather than overflowing. */
.modal .grid.c2, .modal .grid.c3, .modal .grid.c4 {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.modal .stat-strip { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); }
.modal .colgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

@media (max-width: 560px) {
  .modal-overlay { padding: 3vh 12px; }
  .modal, .modal.wide { max-width: calc(100vw - 24px); padding: 20px 18px; }
  .modal .grid.c2, .modal .grid.c3, .modal .grid.c4,
  .modal .colgrid, .modal .det { grid-template-columns: 1fr; }
  .modal-foot > .btn { flex: 1 1 auto; }
}

/* ═══ Creative Review: lobby ═══ */
.begin-card { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 18px 20px; margin: 18px 0 4px; border-radius: var(--r-lg, 14px);
  border: 1px solid var(--border, #e6e6ea); background: var(--card, #fff); }
.begin-title { font-family: var(--font-display); font-size: 17px; font-weight: 600; margin-bottom: 3px; }
.ends { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.ends-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
@media (max-width: 900px) { .ends { grid-template-columns: 1fr; } }

/* in-session banner + per-card note capture */
.in-review { margin-top: 14px; padding: 8px 13px; border-radius: 9px;
  background: var(--bg, #f0f0f3); font-size: 12.5px; color: var(--ink-soft, #6b6b7b); }
.board-card { position: relative; }
.card-note { position: absolute; top: 8px; right: 8px; z-index: 2; border: 0; cursor: pointer;
  width: 26px; height: 26px; border-radius: 8px; font-size: 13px; line-height: 1;
  background: rgba(20,20,28,.62); color: #fff; opacity: 0; transition: opacity .12s; }
.board-card:hover .card-note { opacity: 1; }
.card-note:hover { background: rgba(20,20,28,.85); }

/* ═══════════════════════════════════════════════════════════════════
   CONTAINMENT — platform-wide

   The modal rules earlier in this file fixed popups. The same defect
   exists everywhere else for the same reason: a flex or grid child
   defaults to `min-width:auto`, meaning it refuses to shrink below its
   longest unbreakable word. Ad names are long unbreakable words —
   `Video_01_Prospecting_Promo_MultiCollection_SwimGoggles_4thJuly_...`
   is one token to a browser — so every card holding one grew past its
   own border.

   Fixing it per component fixes it until the next component. These
   rules make containment the default and let anything that genuinely
   needs to overflow opt out explicitly.
   ═══════════════════════════════════════════════════════════════════ */

.flex, .grid, .board, .board-card, .row-item, .stat-strip, .ends, .ends-grid,
.tree-hook, .tree-head, .bcols, .colgrid, .nrow, .fbar, .det {
  min-width: 0;
}
.flex > *, .grid > *, .board > *, .board-card > *, .row-item > *,
.ends > *, .det > * { min-width: 0; }

/* text shrinks; controls do not */
.flex > .btn, .row-item > .btn, .flex > .icon-btn, .row-item > .icon-btn,
.flex > .seg, .row-item > select, .flex > select, .row-item > .badge {
  flex-shrink: 0;
}

/* a long ad name truncates cleanly instead of escaping the card */
.board-title {
  display: block; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.board-head-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.board-head-row > * { min-width: 0; }
.board-head-row .rank { flex-shrink: 0; }

/* pills clip rather than push */
.pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.pill-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; min-width: 0; }
.pill-row > .pill { min-width: 0; }

/* score bars stay inside the body they belong to */
.score { min-width: 0; }
.score-track { min-width: 0; }

/* row titles and subtitles wrap on long tokens rather than widening the row */
.row-title, .row-sub { overflow-wrap: anywhere; }
.tree-title, .empty-title { overflow-wrap: anywhere; }

/* nothing on a page may push the body sideways */
.main { overflow-x: hidden; }
.matrix-wrap, .scroll-x { overflow-x: auto; }

/* ═══ Review lobby: two lists, not one merged grid ═══
   Cards stacked in each column read as two distinct rankings; side by
   side they ran together into a single indistinguishable block. */
.ends-grid { display: flex; flex-direction: column; gap: 10px; }
.ends-grid .board-card { margin-bottom: 0; }

/* ═══ brief modal: grouped, not scrolled ═══ */
.bt-head { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.bt-head > * { min-width: 0; }
.bt-tabs { margin-top: 14px; margin-bottom: 18px; }
.bt-tabs .tab.dim { opacity: .5; }
.bt-panel > .fg:first-child, .bt-panel > .grid:first-child { margin-top: 0; }

/* ═══ creative detail: identity and actions above the fold ═══ */
.det-top { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--border, #e6e2da); }
.det-top-id { flex: 1 1 240px; min-width: 0; }
.det-name { font-family: var(--font-display); font-size: 18px; font-weight: 600;
  line-height: 1.3; overflow-wrap: anywhere; }
.det-top-acts { display: flex; gap: 6px; flex-wrap: wrap; flex-shrink: 0; align-items: center; }
.det-top-acts .btn { flex-shrink: 0; }

/* a video with no playable file: the frame is the button */
.det-asset-play { cursor: pointer; }
.det-asset:hover .det-asset-play { background: rgba(20,20,28,.42); }
.det-watch { display: inline-flex; margin: -4px 0 10px; text-decoration: none; }
.det-asset-note { display: block; font-size: 12px; color: var(--ink-soft, #6b6b7b);
  margin: -4px 0 10px; }

/* ═══ auth screens ═══
   These take over the whole shell: until a session and a workspace exist there
   is nothing else the app can honestly render. */

.auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:32px; }
.auth-card { width:100%; max-width:380px; background:var(--card); border:1px solid var(--border);
             border-radius:14px; padding:32px; box-shadow:0 1px 3px rgba(0,0,0,.05); }
.auth-mark { width:28px; height:28px; border-radius:8px; margin-bottom:20px;
             background:linear-gradient(135deg,var(--ac-brain),var(--ac-performance)); }
.auth-title { font-size:20px; font-weight:600; margin:0 0 6px; letter-spacing:-.01em; }
.auth-sub { font-size:13px; line-height:1.5; color:var(--ink-soft); margin:0 0 20px; }
.auth-label { display:block; font-size:12px; font-weight:500; color:var(--ink-soft);
              margin:14px 0 6px; }
.auth-input { width:100%; box-sizing:border-box; padding:9px 11px; font-size:14px;
              border:1px solid var(--border); border-radius:8px; background:var(--canvas);
              color:var(--ink); font-family:inherit; }
.auth-input:focus { outline:none; border-color:var(--border-strong); }
.auth-btn { width:100%; margin-top:20px; padding:10px; font-size:14px; font-weight:500;
            border:none; border-radius:8px; background:var(--ink); color:var(--card);
            cursor:pointer; font-family:inherit; }
.auth-btn:disabled { opacity:.55; cursor:default; }
.auth-btn-quiet { background:transparent; color:var(--ink); border:1px solid var(--border); }
.auth-link { display:block; width:100%; margin-top:12px; padding:6px; background:none;
             border:none; color:var(--ink-soft); font-size:12px; cursor:pointer;
             font-family:inherit; text-decoration:underline; }
.auth-err { background:#fef2f2; border:1px solid #fecaca; color:#b91c1c; font-size:12.5px;
            padding:8px 10px; border-radius:7px; margin-bottom:4px; }
.auth-foot { font-size:11.5px; color:var(--ink-soft); margin:14px 0 0; text-align:center; line-height:1.5; }
.auth-list { display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.auth-ws { display:flex; align-items:center; justify-content:space-between; width:100%;
           padding:12px 14px; border:1px solid var(--border); border-radius:9px;
           background:var(--canvas); cursor:pointer; font-family:inherit; text-align:left; }
.auth-ws:hover { border-color:var(--border-strong); }
.auth-ws-name { font-size:14px; font-weight:500; color:var(--ink); }
.auth-ws-role { font-size:11px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; }

/* platform admin */
.ws-flag { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-soft);
           white-space:nowrap; margin-right:12px; }
.btn-quiet { padding:5px 10px; font-size:12px; border:1px solid var(--border); border-radius:7px;
             background:var(--card); color:var(--ink); cursor:pointer; font-family:inherit;
             white-space:nowrap; }
.btn-quiet:hover { border-color:var(--border-strong); }
.modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:20px; }
.mb16 { margin-bottom:16px; }

/* Entering a workspace from platform admin. The name IS the control, so it
   has to look like one without becoming a button in a list of buttons. */
.ws-enter { display:inline-flex; align-items:center; gap:6px; padding:0; border:none;
            background:none; font-family:var(--font-display); font-size:15px; font-weight:600;
            color:var(--ink); cursor:pointer; text-align:left; }
.ws-enter:hover { text-decoration:underline; }
.ws-enter-go { font-size:13px; color:var(--muted); }
.ws-enter:hover .ws-enter-go { color:var(--ink); }

/* Where you are, and the two ways out. */
.ws-foot { margin-top:10px; padding-top:10px; border-top:1px solid var(--border); }
.ws-foot-name { display:flex; align-items:baseline; gap:6px; padding:2px 10px 8px;
                font-size:12px; font-weight:600; color:var(--ink); }
.ws-foot-role { font-size:10px; font-weight:500; color:var(--muted);
                text-transform:uppercase; letter-spacing:.05em; }
.cred-box { margin:12px 0; padding:12px 14px; background:var(--canvas);
            border:1px solid var(--border); border-radius:var(--r);
            font-size:15px; letter-spacing:.04em; user-select:all; word-break:break-all; }
.mt16 { margin-top:16px; } .mt24 { margin-top:24px; }
.link-inline { background:none; border:none; padding:0; font:inherit; color:var(--ink);
               cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.link-inline:hover { color:var(--st-live); }
.btn-quiet.danger { color:var(--st-fatigued); }
.btn-quiet.danger:hover { border-color:var(--st-fatigued); }
.save-state { padding:6px 10px; font-size:11px; border-radius:var(--r); margin-bottom:4px; }
.save-state.ok   { color:var(--muted); }
.save-state.busy { color:var(--ink); }
.save-state.err  { color:var(--st-fatigued); font-weight:600; }
button.save-state { border:none; background:none; text-align:left; width:100%; cursor:pointer; font:inherit; }
.fail-list { max-height:240px; overflow:auto; margin:12px 0; }
.fail-row { padding:8px 0; border-bottom:1px solid var(--border); }