/* ═══════════════════════════════════════════════════
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: var(--sidebar-w, 232px); flex-shrink: 0; position: relative;
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 */
/* The mark sits on the same left edge as the nav icons below it, and carries a
little more weight — reported 18 Sep 2026. */
.logo { display: flex; align-items: center; gap: 11px; padding: 2px 12px 20px; }
.logo-mark {
width: 30px; height: 30px; flex-shrink: 0;
filter: drop-shadow(0 2px 6px rgba(26,23,35,.18));
background: var(--spectrum);
clip-path: polygon(50% 4%, 96% 92%, 4% 92%);
border-radius: 2px;
}
.logo-word {
font-family: var(--font-display);
font-size: 23px; font-weight: 700; letter-spacing: -.005em;
}
/* 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,");
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-head.flex { flex-wrap: wrap; row-gap: 10px; column-gap: 12px; align-items: center; }
.page-head.flex > .grow { min-width: 260px; }
.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 — 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: 70; /* above the notes panel (60) and the history drawer (62) */
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;padding:9px 12px;border-radius:var(--r);width:100%;text-align:left;
border:1px solid transparent;background:none}
.brand-bar-pick:hover{background:var(--canvas);border-color:var(--border)}
.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; }
/* The way out of the creative detail. First in the row and first in the tab
order, because a window you cannot leave is the bug this fixed. */
.det-back { flex-shrink: 0; max-width: 260px; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; }
/* A stat tile that opens what it counts. */
.stat-tile.click:hover { border-color: var(--ink-soft, #7a736a); }
/* The fold on a collapsed section — retired ads, and anything else that is
context rather than work. */
.disc { display: inline-block; width: 1em; color: var(--muted); }
/* 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); }
/* Creative Execution — the pipeline is drawn because the order is the product. */
.pipe { display:flex; flex-direction:column; gap:2px; margin:16px 0 8px; }
.pipe-step { display:flex; gap:12px; align-items:flex-start; padding:10px 12px;
border-left:2px solid var(--border); }
.pipe-n { width:20px; height:20px; flex:none; border-radius:50%; background:var(--canvas);
border:1px solid var(--border); font-size:11px; line-height:19px; text-align:center;
color:var(--muted); }
.pipe-label { font-size:13px; font-weight:600; color:var(--ink); }
.pipe-sub { font-size:12px; color:var(--muted); margin-top:1px; }
.pipe-ready { border-left-color:var(--st-live); }
.pipe-ready .pipe-n { border-color:var(--st-live); color:var(--st-live); }
.pipe-gate { border-left-color:var(--ac-brain); }
.pipe-needs-setup{ border-left-color:var(--st-fatigued); }
.pipe-off { opacity:.5; }
.pipe-planned { opacity:.65; }
.v-execution { color:var(--ac-batches); }
.prompt-box { padding:14px; background:var(--canvas); border:1px solid var(--border);
border-radius:var(--r); font-size:12.5px; line-height:1.6; white-space:pre-wrap; margin:12px 0 6px; }
.warn-box { margin:12px 0; }
.warn-row { padding:8px 10px; background:var(--st-fatigued-bg); color:var(--st-fatigued);
border-radius:var(--r); font-size:12.5px; margin-bottom:6px; }
.deliv-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; margin-top:12px; }
.deliv img { width:100%; border-radius:var(--r); border:1px solid var(--border); display:block; }
.key-row { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); font-size:13px; }
.key-row span:first-child { flex:1; }
.pipe-cols { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:8px 0; }
@media (max-width:900px){ .pipe-cols { grid-template-columns:1fr; } }
.exec-block { border:1px solid var(--border); border-radius:var(--r); padding:14px; margin:14px 0; }
.exec-head { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
color:var(--muted); margin-bottom:6px; }
.radar-bar { display:flex; align-items:center; justify-content:space-between; gap:12px;
padding:12px 14px; border:1px solid var(--border); border-radius:var(--r);
background:var(--card); margin-bottom:16px; }
.radar-bar.stale { border-color:var(--st-fatigued); }
.deliv video { width:100%; border-radius:var(--r); border:1px solid var(--border); display:block; }
.rubric { display:flex; flex-wrap:wrap; gap:14px; margin-top:10px; }
.rub { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--muted); cursor:help; }
.rub input[type=range] { width:74px; }
.rub b { color:var(--ink); min-width:10px; }
.weak-note { color:var(--st-fatigued); margin-top:6px; }
.dir-row.picked { border-color:var(--st-live); background:var(--st-live-bg); }
.badge.sc-strong { background:var(--st-winning-bg); color:var(--st-winning); }
.badge.sc-worth { background:var(--st-live-bg); color:var(--st-live); }
.badge.sc-weak, .badge.sc-thin { background:var(--st-fatigued-bg); color:var(--st-fatigued); }
.shot { border:1px solid var(--border); border-radius:var(--r); padding:12px; margin-bottom:10px; }
.shot-head { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600;
color:var(--muted); margin-bottom:8px; }
.shot-sec { width:52px; padding:2px 6px; border:1px solid var(--border); border-radius:6px; }
.shot-head button { margin-left:auto; }
.prod-shots { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; align-items:flex-start; }
.prod-shot { position:relative; width:84px; }
.prod-shot img { width:84px; height:84px; object-fit:cover; border-radius:var(--r); border:1px solid var(--border); display:block; }
.prod-file { width:84px; height:84px; display:flex; align-items:center; justify-content:center;
font-size:9px; text-align:center; padding:4px; border:1px dashed var(--border);
border-radius:var(--r); color:var(--muted); overflow:hidden; }
.prod-kind { display:block; font-size:9px; color:var(--muted); margin-top:3px; text-align:center; }
.prod-x { position:absolute; top:2px; right:2px; width:18px; height:18px; border:none; border-radius:50%;
background:rgba(0,0,0,.55); color:#fff; cursor:pointer; line-height:1; font-size:13px; }
.prod-add { width:84px; height:84px; border:1px dashed var(--border); border-radius:var(--r);
background:none; color:var(--muted); cursor:pointer; font-size:11px; }
.prod-add:hover { border-color:var(--ink); color:var(--ink); }
/* The strategic agenda */
.agenda { display:flex; flex-direction:column; gap:10px; margin-bottom:8px; }
.gap { border:1px solid var(--border); border-left:3px solid var(--muted);
border-radius:var(--r); padding:12px 14px; background:var(--card); }
.gap-contested { border-left-color:var(--st-fatigued); }
.gap-segment { border-left-color:var(--st-winning); }
.gap-belief { border-left-color:var(--ac-performance); }
.gap-fatigue { border-left-color:var(--st-fatigued); }
.gap-head { display:flex; align-items:baseline; gap:10px; justify-content:space-between; }
.gap-title { font-size:13.5px; font-weight:600; color:var(--ink); }
.gap-why { font-size:12.5px; color:var(--ink-soft); margin-top:6px; line-height:1.55; }
.gap-ev { font-size:11.5px; color:var(--muted); margin-top:6px; }
.gap-ev b { color:var(--ink-soft); }
.gap-counter { font-style:italic; }
.badge.conf-high { background:var(--st-winning-bg); color:var(--st-winning); }
.badge.conf-medium { background:var(--st-live-bg); color:var(--st-live); }
.badge.conf-low { background:var(--canvas); color:var(--muted); }
/* ═══ generated options ═══
Four thumbnails you can actually compare, and one you can open properly.
Judging a creative by downloading it and finding it in Finder is not judging
it — the picture belongs on the screen that asks the question. */
.deliv { position: relative; padding: 0; border: 2px solid transparent; background: none;
border-radius: 12px; cursor: zoom-in; overflow: hidden; display: block; }
.deliv img, .deliv video { display: block; width: 100%; height: auto; border-radius: 10px; }
.deliv:hover { border-color: var(--border, #d8d4cc); }
.deliv.picked { border-color: var(--accent, #2f7d5b); cursor: zoom-in; }
.deliv-n { position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: 7px;
background: rgba(20,20,28,.72); color: #fff; font-size: 11px; font-weight: 600; }
.deliv.picked .deliv-n { background: var(--accent, #2f7d5b); }
.lightbox { display: flex; align-items: center; justify-content: center;
background: var(--sunk, #f4f2ee); border-radius: 12px; overflow: hidden; }
.lightbox img, .lightbox video { display: block; max-width: 100%;
max-height: 68vh; width: auto; height: auto; }
/* ═══════════════════════════════════════════════════════════════════════
BETA — bug reports · history · who is here
═══════════════════════════════════════════════════════════════════════ */
/* ── avatars: one colour per person, everywhere ── */
.pav {
--pav-s: 28px; --pav-h: 260;
width: var(--pav-s); height: var(--pav-s); flex-shrink: 0;
border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
font-size: calc(var(--pav-s) * .38); font-weight: 700; letter-spacing: .02em;
color: hsl(var(--pav-h) 45% 28%);
background: linear-gradient(140deg, hsl(var(--pav-h) 85% 90%), hsl(calc(var(--pav-h) + 40) 80% 82%));
box-shadow: inset 0 0 0 1px hsl(var(--pav-h) 50% 70% / .45);
user-select: none;
}
.pav.away { filter: grayscale(.8); opacity: .6; }
.pav.more { --pav-h: 40; background: var(--canvas); color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--border-strong); }
/* ── presence, in the sidebar ── */
#presence-bar:empty { display: none; }
#presence-bar { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.presence-head {
width: 100%; display: flex; align-items: center; gap: 8px;
background: none; border: 0; padding: 6px 10px; border-radius: 9px; cursor: pointer; font: inherit;
color: var(--ink-soft); font-size: 12px; font-weight: 600;
}
.presence-head:hover { background: var(--canvas); }
.presence-live { width: 7px; height: 7px; border-radius: 50%; background: #00B37A; flex-shrink: 0;
box-shadow: 0 0 0 0 rgba(0,179,122,.5); animation: live 2.4s infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(0,179,122,.45); } 70% { box-shadow: 0 0 0 7px rgba(0,179,122,0); } 100% { box-shadow: 0 0 0 0 rgba(0,179,122,0); } }
.presence-label { flex: 1; text-align: left; white-space: nowrap; }
.pav-stack { display: inline-flex; }
.pav-stack .pav { --pav-s: 22px !important; margin-left: -6px; box-shadow: 0 0 0 2px var(--card); }
.presence-list { padding: 4px 4px 2px; animation: pop .14s ease-out; }
.presence-row { display: flex; align-items: center; gap: 9px; padding: 6px; border-radius: 8px; }
.presence-row.away { opacity: .6; }
.presence-who { min-width: 0; }
.presence-name { font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.presence-you { font-size: 10px; font-weight: 600; color: var(--muted); background: var(--canvas); border-radius: 5px; padding: 0 5px; margin-left: 2px; }
.presence-where { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ── the history button ── */
.hist-open { gap: 6px; }
.hist-open-ico { font-size: 14px; line-height: 1; }
/* ── the history drawer ── */
.hist-scrim { position: fixed; inset: 0; z-index: 61; background: rgba(26,23,35,.18); animation: fade .2s ease-out; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.hist-drawer {
--acc: var(--ac-brain);
position: fixed; top: 0; right: 0; bottom: 0; z-index: 62;
width: min(520px, 100vw); background: var(--canvas);
box-shadow: -18px 0 48px rgba(26,23,35,.14);
display: flex; flex-direction: column;
animation: slidein .26s cubic-bezier(.2,.8,.2,1);
}
@keyframes slidein { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.hist-drawer.ac-batches { --acc: var(--ac-batches); }
.hist-drawer.ac-review { --acc: var(--ac-review); }
.hist-drawer.ac-learnings { --acc: var(--ac-learnings); }
.hist-head { position: relative; padding: 26px 26px 18px; background: var(--card); border-bottom: 1px solid var(--border); }
.hist-head::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--spectrum); }
.hist-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--acc); }
.hist-title { font-family: var(--font-display); font-size: 26px; font-weight: 600; line-height: 1.15; margin-top: 2px; }
.hist-sub { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.hist-x { position: absolute; top: 18px; right: 18px; width: 32px; height: 32px; border-radius: 50%;
border: 1px solid var(--border); background: var(--card); font-size: 18px; color: var(--ink-soft); cursor: pointer; }
.hist-x:hover { border-color: var(--ink); color: var(--ink); }
.hist-body { flex: 1; overflow-y: auto; padding: 16px 22px 40px; }
.hist-filters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.hist-filters.hidden { display: none; }
.hist-chip { border: 1px solid var(--border); background: var(--card); border-radius: 999px; padding: 4px 11px;
font: inherit; font-size: 12px; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.hist-chip.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.hist-people { display: inline-flex; gap: 3px; margin-left: auto; }
.hist-person { border: 0; background: none; padding: 1px; border-radius: 50%; cursor: pointer; opacity: .55; transition: opacity .12s, transform .12s; }
.hist-person:hover, .hist-person.on { opacity: 1; transform: translateY(-1px); }
.hist-person.on .pav { box-shadow: 0 0 0 2px var(--canvas), 0 0 0 4px var(--acc); }
.hist-day { position: sticky; top: -16px; z-index: 1; margin: 18px -22px 6px; padding: 8px 22px;
background: linear-gradient(var(--canvas) 70%, transparent);
font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.hist-entry { position: relative; display: grid; grid-template-columns: 32px 1fr; gap: 12px; padding: 6px 0 14px; }
.hist-entry::before { content: ''; position: absolute; left: 15.5px; top: 40px; bottom: -6px; width: 1px; background: var(--border-strong); }
.hist-entry:last-child::before { display: none; }
.hist-rail { position: relative; padding-top: 2px; }
.hist-rail::after { content: ''; position: absolute; right: -3px; top: 24px; width: 11px; height: 11px; border-radius: 50%;
border: 2px solid var(--canvas); background: var(--st-live); }
.op-added .hist-rail::after { background: var(--st-winning); }
.op-removed .hist-rail::after { background: var(--st-fatigued); }
.op-restored .hist-rail::after { background: var(--ac-brain); }
.hist-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; box-shadow: var(--shadow);
transition: box-shadow .15s, border-color .15s; min-width: 0; }
.hist-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-lift); }
.hist-top { display: flex; gap: 10px; align-items: baseline; }
.hist-say { flex: 1; font-size: 13.5px; color: var(--ink-soft); line-height: 1.45; min-width: 0; overflow-wrap: anywhere; }
.hist-say b { color: var(--ink); font-weight: 650; }
.hist-time { font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hist-meta { display: flex; gap: 8px; margin-top: 3px; font-size: 11.5px; color: var(--muted); }
.hist-current { color: var(--st-winning); font-weight: 650; }
.hist-chgs { list-style: none; margin: 9px 0 0; padding: 0; display: grid; gap: 5px; }
.hist-chg { display: grid; grid-template-columns: 18px 1fr; gap: 6px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; }
.hist-chg-body { min-width: 0; overflow-wrap: anywhere; }
.hist-glyph { width: 18px; height: 18px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 12px; margin-top: 1px; }
.hist-chg.add .hist-glyph { background: var(--st-winning-bg); color: var(--st-winning); }
.hist-chg.rem .hist-glyph { background: var(--st-fatigued-bg); color: var(--st-fatigued); }
.hist-chg.edit .hist-glyph { background: var(--st-production-bg); color: var(--st-production); }
.hist-verb { font-weight: 650; color: var(--ink); }
.hist-field { display: inline-block; font-size: 11px; font-weight: 600; color: var(--acc); background: color-mix(in srgb, var(--acc) 10%, transparent);
border-radius: 5px; padding: 0 6px; margin-left: 2px; }
.hist-where { color: var(--muted); }
.hist-diff { margin-top: 5px; padding: 8px 10px; background: var(--canvas); border-radius: 8px; font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; }
.hist-diff del { background: var(--st-fatigued-bg); color: #9b2c2f; text-decoration: line-through; text-decoration-color: rgba(155,44,47,.5); border-radius: 3px; }
.hist-diff ins { background: var(--st-winning-bg); color: #0b6b4c; text-decoration: none; border-radius: 3px; }
.hist-fields { margin-top: 5px; padding: 8px 10px; background: var(--canvas); border-radius: 8px; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: 12px; }
.hist-fields dt { color: var(--muted); text-transform: capitalize; }
.hist-fields dd { margin: 0; color: var(--ink-soft); }
.hist-link { border: 0; background: none; padding: 0; margin-top: 6px; font: inherit; font-size: 12px; font-weight: 600; color: var(--acc); cursor: pointer; }
.hist-actions { display: flex; gap: 4px; margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--border); flex-wrap: wrap; }
.hist-act { border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--ink-soft); padding: 4px 8px; border-radius: 7px; cursor: pointer; }
.hist-act:hover { background: var(--canvas); color: var(--ink); }
.hist-act.strong { margin-left: auto; color: var(--acc); }
.hist-act.strong:hover { background: color-mix(in srgb, var(--acc) 10%, transparent); }
.hist-empty { text-align: center; color: var(--muted); font-size: 13px; padding: 56px 24px; line-height: 1.6; }
.hist-empty-title { font-family: var(--font-display); font-size: 19px; color: var(--ink); margin-bottom: 6px; }
.hist-empty-orb { width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 50%; background: var(--spectrum); opacity: .8;
-webkit-mask: radial-gradient(circle, transparent 42%, #000 44%); mask: radial-gradient(circle, transparent 42%, #000 44%); }
.hist-foot { text-align: center; font-size: 11.5px; color: var(--muted); margin-top: 18px; }
.hist-skel { display: grid; gap: 14px; margin-top: 18px; }
.hist-skel i { display: block; height: 92px; border-radius: 12px;
background: linear-gradient(90deg, var(--card) 25%, #F3EFE8 50%, var(--card) 75%); background-size: 200% 100%; animation: shimmer 1.3s infinite; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
/* a version, read */
.snap-meta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); margin: -8px 0 16px; }
.snap { max-height: 62vh; overflow-y: auto; display: grid; gap: 14px; }
.snap-sec ul { margin: 4px 0 0 18px; display: grid; gap: 4px; font-size: 13px; color: var(--ink-soft); }
.snap-h { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.snap-h span { color: var(--ink-soft); margin-left: 4px; }
.snap-row { display: grid; grid-template-columns: 190px 1fr; gap: 12px; font-size: 13px; }
.snap-k { color: var(--muted); text-transform: capitalize; }
.snap-v { color: var(--ink-soft); white-space: pre-wrap; overflow-wrap: anywhere; }
/* ── bug reports: the button, always there ── */
#bug-root { position: relative; z-index: 1000; }
.bug-btn {
position: fixed; right: 18px; bottom: 18px; z-index: 1000;
display: inline-flex; align-items: center; gap: 7px;
padding: 9px 15px 9px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12);
background: var(--ink); color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
box-shadow: 0 6px 20px rgba(26,23,35,.25); transition: transform .15s, box-shadow .15s;
}
.bug-btn::before { content: ''; position: absolute; inset: -2px; border-radius: 999px; background: var(--spectrum); z-index: -1; opacity: 0; transition: opacity .2s; }
.bug-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(26,23,35,.3); }
.bug-btn:hover::before, .bug-btn.on::before { opacity: 1; }
.bug-btn svg { color: #FF8A80; }
.notes-pill { bottom: 66px !important; }
@media (max-width: 720px) { .bug-btn-label { display: none; } .bug-btn { padding: 11px; } }
.bug-pop {
position: fixed; right: 18px; bottom: 70px; z-index: 1001; width: min(360px, calc(100vw - 32px));
background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 18px;
box-shadow: var(--shadow-lift); animation: pop .16s ease-out;
}
.bug-pop-head, .bug-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.bug-pop-title { font-family: var(--font-display); font-size: 20px; font-weight: 600; }
.bug-pop-sub { font-size: 12.5px; color: var(--ink-soft); margin: 4px 0 12px; line-height: 1.5; }
.bug-x { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); background: var(--card); color: var(--ink-soft);
font-size: 17px; cursor: pointer; flex-shrink: 0; }
.bug-x:hover { border-color: var(--ink); color: var(--ink); }
.bug-opt { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; padding: 11px 12px; margin-top: 7px;
border: 1px solid var(--border); border-radius: 12px; background: var(--card); font: inherit; cursor: pointer; transition: all .12s; }
.bug-opt:hover:not([disabled]) { border-color: var(--ink); transform: translateX(2px); }
.bug-opt[disabled] { opacity: .45; cursor: not-allowed; }
.bug-opt-text { display: grid; }
.bug-opt-text b { font-size: 13.5px; color: var(--ink); }
.bug-opt-text small { font-size: 11.5px; color: var(--muted); }
.bug-opt-ico { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; position: relative; background: var(--canvas); }
.bug-opt-ico.shot::after { content: ''; position: absolute; inset: 9px 8px; border: 2px solid var(--ac-performance); border-radius: 3px; }
.bug-opt-ico.rec::after { content: ''; position: absolute; inset: 11px; border-radius: 50%; background: #E5484D; box-shadow: 0 0 0 4px rgba(229,72,77,.18); }
.bug-opt-ico.note::after { content: '✎'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ac-brain); font-size: 16px; }
.bug-pop-foot { font-size: 11.5px; color: var(--muted); margin-top: 12px; }
.bug-msg { font-size: 12.5px; color: #8A5A00; background: var(--st-production-bg); border-radius: 9px; padding: 8px 10px; margin: 8px 0; }
.bug-msg.err { color: #9b2c2f; background: var(--st-fatigued-bg); }
.bug-rec {
position: fixed; right: 18px; bottom: 18px; z-index: 1002;
display: inline-flex; align-items: center; gap: 8px; padding: 7px 7px 7px 14px; border-radius: 999px;
background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; box-shadow: 0 8px 24px rgba(26,23,35,.3);
}
.bug-rec-dot { width: 9px; height: 9px; border-radius: 50%; background: #FF5E5B; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .25; } }
.bug-rec-time { font-variant-numeric: tabular-nums; }
.bug-rec-max { color: rgba(255,255,255,.5); font-weight: 500; }
.bug-rec-stop { border: 0; border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-weight: 700; padding: 5px 13px; cursor: pointer; }
.bug-rec-x { border: 0; background: none; color: rgba(255,255,255,.6); font-size: 18px; width: 26px; cursor: pointer; }
.bug-rec-x:hover { color: #fff; }
.bug-scrim { position: fixed; inset: 0; z-index: 1003; background: rgba(26,23,35,.45); backdrop-filter: blur(3px); animation: fade .2s ease-out; }
.bug-sheet {
position: fixed; z-index: 1004; left: 50%; top: 50%; transform: translate(-50%, -50%);
width: min(980px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto;
background: var(--card); border-radius: 20px; box-shadow: 0 30px 80px rgba(26,23,35,.35);
padding: 22px 24px 20px; animation: sheet .22s cubic-bezier(.2,.8,.2,1);
}
.bug-sheet::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--spectrum); border-radius: 20px 20px 0 0; }
@keyframes sheet { from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)); } to { opacity: 1; transform: translate(-50%, -50%); } }
.bug-eyebrow { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #E5484D; }
.bug-sheet-title { font-family: var(--font-display); font-size: 26px; font-weight: 600; margin-top: 2px; }
.bug-sheet-body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 22px; margin-top: 16px; }
@media (max-width: 820px) { .bug-sheet-body { grid-template-columns: 1fr; } }
.bug-media-col { min-width: 0; }
.bug-media { display: block; width: 100%; max-height: 58vh; object-fit: contain; border-radius: 12px; background: #0E0C14;
border: 1px solid var(--border); box-shadow: var(--shadow); }
.bug-media-empty { height: 100%; min-height: 240px; border: 1.5px dashed var(--border-strong); border-radius: 14px; background: var(--canvas);
display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; gap: 4px; }
.bug-media-empty-title { font-family: var(--font-display); font-size: 18px; }
.bug-media-empty-sub { font-size: 12.5px; color: var(--muted); }
.bug-media-empty-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
.bug-media-actions { display: flex; gap: 14px; margin-top: 8px; }
.bug-link { border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.bug-link:hover { color: var(--ink); }
.bug-note-col { display: flex; flex-direction: column; min-width: 0; }
.bug-label { font-size: 12px; font-weight: 700; color: var(--ink-soft); margin-bottom: 6px; }
.bug-note { flex: 1; min-height: 190px; resize: vertical; width: 100%; font: inherit; font-size: 14px; line-height: 1.55; color: var(--ink);
border: 1px solid var(--border-strong); border-radius: 12px; padding: 12px 14px; background: var(--card); }
.bug-note:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(123,97,255,.16); }
.bug-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.bug-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-soft); background: var(--canvas);
border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; }
.bug-chip i { font-style: normal; color: var(--muted); }
.bug-sheet-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.bug-private { flex: 1; font-size: 11.5px; color: var(--muted); }
.bug-private::before { content: '🔒 '; }
.bug-sent { position: fixed; right: 18px; bottom: 18px; z-index: 1002; display: flex; align-items: center; gap: 12px;
background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 12px 16px 12px 12px;
box-shadow: var(--shadow-lift); animation: pop .18s ease-out; }
.bug-sent b { display: block; font-size: 13.5px; }
.bug-sent small { font-size: 12px; color: var(--muted); }
.bug-sent-check { width: 32px; height: 32px; border-radius: 50%; background: var(--st-winning-bg); color: var(--st-winning);
display: flex; align-items: center; justify-content: center; font-weight: 800; }
/* ── the superadmin's bug inbox ── */
.bug-inbox { margin: 8px 0 30px; }
.bug-inbox-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.bug-inbox-head > div:first-child { flex: 1; min-width: 220px; }
.bug-inbox-title { font-family: var(--font-display); font-size: 22px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.bug-count { font-family: var(--font-ui); font-size: 12px; font-weight: 700; color: #fff; background: #E5484D; border-radius: 999px; padding: 2px 9px; }
.bug-inbox-loading, .bug-empty { color: var(--muted); font-size: 13px; padding: 22px; background: var(--card); border: 1px dashed var(--border-strong); border-radius: 14px; text-align: center; }
.bug-empty b { color: var(--ink); }
.bug-card { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 16px; background: var(--card); border: 1px solid var(--border);
border-radius: 14px; padding: 14px; margin-bottom: 10px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.bug-card.is-open::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #E5484D; }
.bug-card.is-done { opacity: .82; }
@media (max-width: 720px) { .bug-card { grid-template-columns: 1fr; } }
.bug-thumb { height: 108px; border-radius: 10px; border: 1px solid var(--border); background: var(--canvas); overflow: hidden; padding: 0;
display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; font: inherit; color: var(--muted); position: relative; }
.bug-thumb[disabled] { cursor: default; }
.bug-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.bug-thumb.recording { background: linear-gradient(135deg, #1A1723, #3A3450); color: #fff; }
.bug-thumb-play { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; font-size: 14px; }
.bug-thumb-len { position: absolute; right: 8px; bottom: 6px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bug-thumb-none, .bug-thumb-wait { font-size: 12px; }
.bug-card-top { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-soft); flex-wrap: wrap; }
.bug-ago { color: var(--muted); }
.bug-status { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 6px; padding: 2px 7px; }
.bug-status.open { color: #B4262B; background: var(--st-fatigued-bg); }
.bug-status.done { color: var(--st-winning); background: var(--st-winning-bg); }
.bug-card-note { margin-top: 7px; font-size: 14px; line-height: 1.55; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.bug-card-note.clamp { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.bug-by { display: flex; align-items: center; gap: 8px; margin-top: 9px; font-size: 12.5px; color: var(--ink-soft); }
.bug-where { color: var(--muted); }
.bug-tech { margin-top: 8px; font-size: 12px; }
.bug-tech summary { cursor: pointer; color: var(--muted); font-weight: 600; }
.bug-tech dl { display: grid; grid-template-columns: 110px 1fr; gap: 4px 12px; margin-top: 8px; padding: 10px 12px; background: var(--canvas); border-radius: 9px; }
.bug-tech dt { color: var(--muted); }
.bug-tech dd { margin: 0; color: var(--ink-soft); overflow-wrap: anywhere; }
.bug-errs { margin: 0; padding-left: 16px; display: grid; gap: 3px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; }
.bug-errs time { color: var(--muted); }
.bug-done { margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--st-winning); }
.bug-done-note { font-weight: 400; color: var(--ink-soft); margin-top: 2px; white-space: pre-wrap; }
.bug-card-actions { margin-top: 10px; display: flex; gap: 8px; }
.bug-close-form { margin-top: 10px; display: grid; gap: 8px; }
.bug-close-form textarea { font: inherit; font-size: 13px; border: 1px solid var(--border-strong); border-radius: 10px; padding: 8px 10px; min-height: 60px; resize: vertical; }
.bug-close-actions { display: flex; gap: 8px; justify-content: flex-end; }
.bug-viewer img, .bug-viewer video { display: block; width: 100%; max-height: 70vh; object-fit: contain; border-radius: 10px; background: #0E0C14; }
/* ── platform admin: its own sidebar ── */
.sa-bar { padding: 2px 10px 12px; }
.sa-label { font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 1px; }
.sa-name { font-family: var(--font-display); font-size: 14.5px; font-weight: 600; color: var(--ink); }
.nav-new { color: var(--ink); font-weight: 600; }
.nav-new:hover { background: var(--canvas); }
.nav-new .nav-ico { font-weight: 700; }
.nav-gap { height: 10px; margin: 4px 10px; border-top: 1px solid var(--border); }
.nav-item.active.v-super { box-shadow: inset 3px 0 0 var(--ink); background: var(--canvas); color: var(--ink); }
.filter-n.hot { opacity: 1; font-weight: 700; color: #fff; background: #E5484D; border-radius: 999px; padding: 1px 7px; font-size: 10.5px; }
.page-title.t-super { display: inline-flex; align-items: center; gap: 12px; padding-bottom: 3px;
border-bottom: 3px solid transparent; border-image: var(--spectrum) 1; }
.bug-inbox-head.compact { margin-bottom: 10px; }
.bug-inbox-head .grow { flex: 1; }
/* ── sending a bug report to engineering ── */
.bug-release { margin-top: 12px; padding: 14px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--canvas); }
.bug-release-head { font-family: var(--font-display); font-size: 16px; font-weight: 600; margin-bottom: 10px; }
.bug-release textarea { width: 100%; min-height: 96px; resize: vertical; font: inherit; font-size: 13.5px; line-height: 1.55;
border: 1px solid var(--border-strong); border-radius: 10px; padding: 10px 12px; background: var(--card); }
.bug-release textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(123,97,255,.15); }
.bug-share { display: grid; grid-template-columns: auto 1fr; gap: 4px 9px; align-items: start; margin-top: 10px; font-size: 13px; cursor: pointer; }
.bug-share input { margin-top: 3px; }
.bug-share small { grid-column: 2; color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.bug-release-none { margin-top: 10px; font-size: 12px; color: var(--muted); }
.bug-release-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.bug-triage { margin-top: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border);
background: var(--canvas); border-left: 3px solid var(--st-live); }
.bug-triage.done { border-left-color: var(--st-winning); }
.bug-triage.warn { border-left-color: var(--st-production); }
.bug-triage.alarm { border-left-color: #E5484D; background: var(--st-fatigued-bg); }
.bug-triage-top { display: flex; align-items: baseline; gap: 8px; }
.bug-triage-label { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.bug-triage-when, .bug-triage-note { font-size: 11.5px; color: var(--muted); }
.bug-triage-note { margin-top: 4px; }
.bug-solution { margin-top: 6px; font-size: 13px; color: var(--ink-soft); white-space: pre-wrap; }
.bug-solution b { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bug-fixref { margin-top: 5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--ink-soft); }
/* ── locked ── */
.lock-banner { display: flex; align-items: center; gap: 16px; padding: 16px 18px; margin-bottom: 22px;
border-radius: 14px; background: #1A1723; color: #fff; box-shadow: var(--shadow-lift); }
.lock-banner-main { flex: 1; }
.lock-banner-title { font-family: var(--font-display); font-size: 19px; font-weight: 600; }
.lock-banner-title::before { content: '🔒 '; }
.lock-banner-sub { font-size: 12.5px; color: rgba(255,255,255,.65); margin-top: 2px; }
.lock-banner-reason { margin-top: 8px; padding: 8px 10px; background: rgba(255,255,255,.08); border-radius: 8px; font-size: 13px; }
.lock-banner .btn { background: #fff; border-color: #fff; color: var(--ink); }
.locked-screen { max-width: 520px; margin: 14vh auto; text-align: center; }
.locked-mark { width: 60px; height: 60px; margin: 0 auto 20px; border-radius: 50%; background: var(--spectrum); opacity: .85;
-webkit-mask: radial-gradient(circle, transparent 40%, #000 42%); mask: radial-gradient(circle, transparent 40%, #000 42%); }
.locked-title { font-family: var(--font-display); font-size: 30px; font-weight: 600; }
.locked-sub { color: var(--ink-soft); font-size: 14px; margin-top: 10px; line-height: 1.6; }
.locked-reason { margin-top: 18px; padding: 12px 14px; background: var(--card); border: 1px solid var(--border); border-radius: 12px;
font-size: 13.5px; color: var(--ink); text-align: left; }
.locked-when { margin-top: 10px; font-size: 12px; color: var(--muted); }
/* the progress trail on a report that went to engineering */
.bug-trail { list-style: none; margin: 8px 0 0; padding: 0; }
.bug-trail li { position: relative; padding: 0 0 9px 18px; }
.bug-trail li:not(:last-child)::before { content: ''; position: absolute; left: 4px; top: 12px; bottom: 0; width: 1px; background: var(--border-strong); }
.bug-trail-dot { position: absolute; left: 0; top: 5px; width: 9px; height: 9px; border-radius: 50%;
background: var(--card); box-shadow: 0 0 0 2px var(--st-live); }
.bug-trail li:last-child .bug-trail-dot { background: var(--st-live); }
.bug-trail-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.bug-trail-top time { color: var(--muted); font-size: 11.5px; }
.bug-trail-gap { color: var(--muted); font-size: 11px; }
.bug-trail-note { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; white-space: pre-wrap; }
/* Platform admin heads: the action keeps its distance from the count. */
.page-head.flex { display: flex; align-items: center; gap: 20px; }
.page-head.flex .grow { flex: 1; min-width: 0; }
.page-title.t-super .bug-count { margin-left: 4px; }
/* ── the column's own width, and the grip that sets it ── */
.sidebar-grip { position: absolute; top: 0; right: -3px; width: 7px; height: 100%; cursor: col-resize; z-index: 30; }
.sidebar-grip::after { content: ''; position: absolute; top: 0; bottom: 0; left: 3px; width: 1px; background: transparent; transition: background .12s; }
.sidebar-grip:hover::after, body.resizing .sidebar-grip::after { background: var(--ac-brain); }
body.resizing { cursor: col-resize; user-select: none; }
.sidebar-foot #ws-foot { border-top: 0; margin-top: 0; padding-top: 0; }
.sidebar-foot .ws-foot { border-top: 0; margin-top: 0; padding-top: 0; }
/* ── who is here, beside the page ── */
.work { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.work-top { position: relative; width: 100%; max-width: 1240px; padding: 14px 44px 0; display: flex; justify-content: flex-end; }
.work-top:empty { display: none; }
.work .main { padding-top: 22px; }
.presence-top { display: flex; align-items: center; gap: 8px; }
.presence-top:empty { display: none; }
.presence-top .pav { --pav-s: 28px !important; margin-left: -7px; box-shadow: 0 0 0 2px var(--canvas); cursor: pointer;
transition: transform .12s; }
.presence-top .pav:first-child { margin-left: 0; }
.presence-top .pav:hover { transform: translateY(-2px); }
.presence-here { display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border-radius: 999px;
background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow); }
.presence-here-dot { width: 7px; height: 7px; border-radius: 50%; background: #00B37A; animation: live 2.4s infinite; }
.presence-here-n { font-size: 11.5px; font-weight: 600; color: var(--ink-soft); }
.presence-pop { position: absolute; top: calc(100% + 6px); right: 44px; z-index: 41; width: 264px; background: var(--card);
border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lift); padding: 8px; animation: pop .14s ease-out; }
.presence-pop .presence-row { cursor: default; }
.presence-soon { font-size: 11px; color: var(--muted); padding: 6px 8px 2px; border-top: 1px solid var(--border); margin-top: 4px; }
/* ── messages ── */
.presence-msgs { position: relative; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border);
background: var(--card); color: var(--ink-soft); font-size: 14px; cursor: pointer; box-shadow: var(--shadow); }
.presence-msgs:hover { border-color: var(--ink); color: var(--ink); }
.chat-unread { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
background: #E5484D; color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.chat-scrim { position: fixed; inset: 0; z-index: 61; background: rgba(26,23,35,.18); animation: fade .2s ease-out; }
.chat-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 62; width: min(440px, 100vw);
background: var(--canvas); box-shadow: -18px 0 48px rgba(26,23,35,.14); display: flex; flex-direction: column;
animation: slidein .24s cubic-bezier(.2,.8,.2,1); }
.chat-head { position: relative; display: flex; align-items: center; gap: 10px; padding: 22px 60px 16px 22px;
background: var(--card); border-bottom: 1px solid var(--border); }
.chat-head > div:first-child { flex: 1; }
.chat-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ac-brain); }
.chat-title { font-family: var(--font-display); font-size: 20px; font-weight: 600; }
.chat-body-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.chat-list { overflow-y: auto; padding: 8px; }
.chat-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 10px; border: 0;
background: none; border-radius: 10px; cursor: pointer; font: inherit; }
.chat-row:hover { background: var(--card); }
.chat-row.unread .chat-row-last { color: var(--ink); font-weight: 500; }
.chat-row-main { flex: 1; min-width: 0; }
.chat-row-top { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; }
.chat-row-top time { color: var(--muted); font-size: 11.5px; }
.chat-row-last { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-row .chat-unread { position: static; }
.chat-thread-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--card); }
.chat-back { border: 0; background: none; font-size: 17px; color: var(--ink-soft); cursor: pointer; padding: 2px 6px; }
.chat-thread-who { flex: 1; min-width: 0; }
.chat-thread-who b { display: block; font-size: 13.5px; }
.chat-thread-who small { font-size: 11.5px; color: var(--muted); }
.chat-msgs { flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 10px; }
.chat-msg { display: flex; align-items: flex-end; gap: 8px; max-width: 86%; }
.chat-msg.mine { align-self: flex-end; flex-direction: row-reverse; }
.chat-msg.pending { opacity: .55; }
.chat-bubble { background: var(--card); border: 1px solid var(--border); border-radius: 14px 14px 14px 4px; padding: 8px 12px; }
.chat-msg.mine .chat-bubble { background: var(--ink); border-color: var(--ink); color: #fff; border-radius: 14px 14px 4px 14px; }
.chat-bubble-top { display: flex; align-items: baseline; gap: 8px; font-size: 11px; color: var(--muted); }
.chat-msg.mine .chat-bubble-top { color: rgba(255,255,255,.6); justify-content: flex-end; }
.chat-body { font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-compose { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--border); background: var(--card); }
.chat-compose textarea { flex: 1; resize: none; min-height: 40px; max-height: 120px; font: inherit; font-size: 13.5px;
border: 1px solid var(--border-strong); border-radius: 10px; padding: 9px 12px; }
.chat-compose textarea:focus { outline: none; border-color: var(--ink); }
.chat-add { padding: 10px; display: grid; gap: 4px; }
.chat-add-row { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 8px 10px; border: 0;
background: var(--card); border-radius: 10px; cursor: pointer; font: inherit; font-size: 13.5px; }
.chat-add-row:hover { box-shadow: inset 0 0 0 1px var(--border-strong); }
.chat-add-note, .chat-empty-sub { font-size: 11.5px; color: var(--muted); padding: 4px 10px; }
.chat-empty { text-align: center; color: var(--muted); font-size: 13px; padding: 48px 26px; line-height: 1.6; }
.chat-empty-title { font-family: var(--font-display); font-size: 18px; color: var(--ink); margin-bottom: 6px; }
.chat-foot { padding: 10px 16px; border-top: 1px solid var(--border); font-size: 11px; color: var(--muted); background: var(--card); }
/* ── rules & compliance: what is fixed, and what is yours ── */
.req { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #B4262B;
background: var(--st-fatigued-bg); border-radius: 5px; padding: 1px 6px; margin-left: 6px; vertical-align: 1px; }
.rules-block { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; background: var(--canvas); }
.rules-block.fixed { border-left: 3px solid var(--ink); }
.rules-block.guide { border-left: 3px solid var(--ac-performance); }
.rules-block.house { border-left: 3px solid var(--ac-brain); background: var(--card); }
.rules-head { display: flex; align-items: baseline; gap: 10px; }
.rules-head b { font-size: 13.5px; }
.rules-tag { margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rules-note { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.rules-list { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 5px; font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
.rules-list.muted { color: var(--muted); }
/* Rules read from the brand's own words, rather than from its category.
Leads the card, because it is the only part that is about this brand. */
.rules-block.brandspec { border-left: 3px solid var(--ac-brain); background: var(--card); }
.claim { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.claim:first-of-type { border-top: 0; }
.claim-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.claim-note { font-size: 13px; color: var(--ink-soft); line-height: 1.5; margin-top: 3px; }
/* Why a rule is on screen. A rule that cannot say what triggered it is one
nobody can argue with — this is what makes a wrong one deletable. */
.rules-why { font-size: 11.5px; color: var(--muted); font-style: italic; }
.rules-list .rules-why { display: block; font-style: normal; margin-top: 1px; }
/* The category rules, folded away rather than dropped. */
.rules-rest { margin-top: 8px; }
.rules-more { background: none; border: 0; padding: 0; font: inherit; font-size: 11.5px;
color: var(--muted); cursor: pointer; }
.rules-more:hover { color: var(--ink); }
.rules-block.house textarea { width: 100%; min-height: 90px; margin-top: 8px; resize: vertical; font: inherit; font-size: 13.5px;
border: 1px solid var(--border-strong); border-radius: 10px; padding: 10px 12px; background: var(--card); }
.rules-foot { font-size: 11.5px; color: var(--muted); border-top: 1px dashed var(--border); padding-top: 10px; margin-top: 4px; }
.page-actions { display: flex; gap: 8px; margin: -6px 0 16px; }
/* finding an ad */
.ad-search { min-width: 260px; max-width: 360px; flex: 1; font: inherit; font-size: 13px; padding: 7px 12px;
border: 1px solid var(--border-strong); border-radius: 999px; background: var(--card); color: var(--ink); }
.ad-search:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(123,97,255,.14); }
.search-results { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: var(--card); }
.cell-retired { opacity: .85; }
tr.more td { padding-top: 6px; }
/* ── sister brands: a section shared from the main brand ── */
.shared-tag { font-weight: 400; font-size: 11px; color: var(--muted, #6b7280); margin-left: 6px; }
.shared-note { font-size: 13px; color: var(--muted, #6b7280); margin-bottom: 12px; }
.shared-lock { pointer-events: none; opacity: .75; }
.fg textarea:disabled, .fg input:disabled { background: transparent; color: inherit; opacity: .75; cursor: default; }
/* ── Inbox and Teams ── */
button.inbox-row { width: 100%; text-align: left; background: none; font: inherit; color: inherit; cursor: pointer; }
button.inbox-row:hover { background: rgba(0,0,0,.025); }
.inbox-change { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 14px; }
.inbox-change-label { font-size: 11.5px; color: var(--muted); margin-bottom: 4px; }
.inbox-change-value { white-space: pre-wrap; font-size: 13.5px; }
.st { padding: 8px 0; border-top: 1px solid var(--border); font-size: 13.5px; line-height: 1.5; }
.st:first-of-type { border-top: 0; }
.st-main .st-text { font-weight: 600; }
.st-kind { display: inline-block; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.st-quote { margin: 6px 0 2px; padding-left: 10px; border-left: 2px solid var(--border); color: var(--muted); font-size: 13px; }
.st-src { font-size: 12px; }
button.fig { font: inherit; font-weight: 600; background: none; border: 0; border-bottom: 1px dotted currentColor; padding: 0; cursor: pointer; color: inherit; }
.fig-how { min-height: 18px; font-size: 12.5px; color: var(--muted); margin: 10px 0 4px; }
.tm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin: 22px 0 6px; }
.tm-value { font-weight: 600; font-size: 14px; }
.tm-share { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 6px 0 14px; }
.tm-check { font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px; }
.tm-note { display: flex; gap: 8px; margin-top: 8px; }
.tm-note input { flex: 1; min-width: 0; }
/* ── key check, owner's agent screens ── */
.kc { margin-top: 10px; }
.kc-line { font-size: 13.5px; margin-bottom: 6px; }
.kc-row { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 2px 0; }
.kc-w { min-width: 110px; color: var(--muted); }
.ow-text { width: 100%; min-height: 150px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.ow-text.tall { min-height: 320px; }