/* ─── Legacy token aliases (v5 redesign Phase 0) ─────────────────────
   Every legacy variable now points at a token from tokens.css. Keeps
   existing rules working unchanged while we migrate them off the old
   names over the rest of the redesign phases. Verified visually
   identical: every aliased value resolves to the same hex as the old
   hand-rolled token (--bg, --border, --text, --text-secondary already
   share names with tokens.css and so are not re-declared here).

   Plan: phase out direct usage of these aliases over PRs 1-5; remove
   this block when grep returns no remaining hits in widget/.
*/
:root {
    /* C1 — --text-secondary / --text-primary are referenced ~70 times across
       styles.css + components.css but tokens.css names them --text-muted /
       --text. Without these aliases every use fell back to `inherit`
       (muted text rendered full-strength). Aliasing to the token means the
       [data-theme="dark"] override in tokens.css flows through untouched. */
    --text-secondary: var(--text-muted);
    --text-primary: var(--text);
    --teal-dark: var(--teal-500);
    --teal: var(--teal-400);
    --navy: var(--navy-500);
    --sidebar-bg: var(--surface-muted);
    --card: var(--surface);
    --table-header-bg: var(--surface-muted);
    --hover-bg: var(--hover);
    --red: var(--chart-3);
    --orange: var(--chart-4);
    --yellow: var(--chart-5);
    --green: var(--chart-6);
    --blue: var(--chart-1);
    --purple: var(--chart-2);
}

/* ─── Typography utilities (Phase 4) ─────────────────────────────────
   .mono — every number in the app should pick this up. tnum gives
   tabular figures so columns of numbers line up vertically.
   .cell-num — auto-applied by the row renderer to <td>s carrying
   numeric formats (currency, number, pct*, micros). Also right-
   aligns since numbers read better right-aligned in tables.
*/
.mono {
    font-family: var(--font-mono);
    font-feature-settings: "tnum";
}
td.cell-num {
    font-family: var(--font-mono);
    font-feature-settings: "tnum";
    text-align: right;
}
/* Recat table: bound the Lead snippet's width (inner div on the `wrap` format) so
   it wraps to a few lines instead of hogging the table — shown IN FULL, no clamp or
   ellipsis. And floor the Why / Uncertainty columns so they don't get squished. */
.cell-wrap { max-width: 340px; }
/* Meta optimisation: the Build link on a "write variations" row (opens the Meta builder). */
.mb-build-link { white-space: nowrap; font-weight: 600; margin-left: 4px; }
.mb-concepts { margin: 6px 0 0; padding-left: 18px; font-size: 0.92em; }
.mb-concepts li { margin: 2px 0; }
/* DL-20: Creatives full-copy view — an expandable <details> per row with the
   current + drafted headlines/descriptions and a copy-to-clipboard button. */
/* Creatives copy block — the MAIN column of a creatives row. Drafted copy on top
   (prominent, each asset individually copyable), current copy below for reference.
   Pre-expanded (<details open>) and stacked so all assets are visible at a glance. */
/* Copy block is the working area — give it the most room and a readable size. */
.copyblock { max-width: 760px; }
.copyblock > summary { cursor: pointer; color: var(--teal-700, #0f766e); font-size: 0.85em; }
.copyblock-keywords {
    font-size: 13px; color: var(--text); font-weight: 500;
    margin: 6px 0 2px; line-height: 1.45;
}
/* The ad's landing page, right under the keywords — clickable. */
.copyblock-lp {
    font-size: 13px; margin: 2px 0 4px; line-height: 1.45; word-break: break-all;
}
.copyblock-lp a { color: var(--teal-600, #2e635c); text-decoration: none; }
.copyblock-lp a:hover { text-decoration: underline; }
/* Per-asset performance as three fixed-width columns (CTR · impr · ad-groups)
   so they line up down the list — plus the delete button + asset text as their
   own aligned columns. */
.copyblock-list { list-style: none; padding-left: 0; }
.copyblock-list li { display: flex; align-items: baseline; gap: 6px; }
/* Two metric columns — Ad + Campaign, each = CTR + impressions. Numbers render at
   the SAME size as the asset text / drafted copy (1em, not shrunk) so they're easy
   to read — we have the width. */
.am-ad, .am-camp {
    flex: 0 0 auto; text-align: right; white-space: nowrap; min-width: 98px;
    font-family: var(--font-mono); font-size: 1em; color: var(--text-secondary, #64748b);
}
/* CTR (.am-pct) + impressions (.am-sub) each get their OWN fixed-width, right-aligned
   sub-slot so both line up as clean columns down the list. */
.am-pct  { display: inline-block; min-width: 52px; text-align: right; }
.am-sub  { display: inline-block; min-width: 40px; text-align: right; margin-left: 4px; opacity: 0.72; }
.am-ad .am-pct  { color: var(--navy-500, #1e293b); font-weight: 600; }
.am-camp .am-pct { color: var(--text-secondary, #64748b); font-weight: 600; }  /* campaign = muted vs ad */
.am-ad.none .am-pct, .am-camp.none .am-pct { color: var(--border, #cbd5e1); font-weight: 400; }
/* Column header row above the existing-asset list. */
.cb-metric-hdr { opacity: 0.55; font-size: 0.7em; text-transform: uppercase; letter-spacing: 0.03em; }
.cb-metric-hdr .am-ad, .cb-metric-hdr .am-camp, .cb-metric-hdr .am-pct {
    color: var(--text-secondary, #64748b); font-weight: 600;
}
.copyblock-list li .del-asset { flex: 0 0 auto; }
.copyblock-list li .copyblock-asset-text { flex: 1 1 auto; min-width: 0; }
.copyblock-body { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.copyblock-col { min-width: 220px; }
.copyblock-draft { background: var(--teal-50, #f0fdfa); padding: 10px 12px; border-radius: 6px; }
.copyblock-current { opacity: 0.95; }
.copyblock-head { font-weight: 600; font-size: 0.85em; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.copyblock-label { font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.03em; color: #64748b; margin-top: 6px; }
.copyblock-list { margin: 2px 0 6px; padding-left: 18px; }
.copyblock-list li { font-size: 0.85em; line-height: 1.4; }
.copyblock-copy { margin-left: auto; cursor: pointer; }
/* Drafted assets: no bullet, a per-asset ⧉ copy button aligned with each line, and a
   larger font than the rest of the table so it's easy to read while pasting. */
.copyblock-list-draft { list-style: none; padding-left: 0; }
.copyblock-list-draft li { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; font-size: 1em; line-height: 1.5; }
.copyblock-asset-text { flex: 1 1 auto; }
.copy-asset {
    flex: 0 0 auto; cursor: pointer; padding: 1px 6px; font-size: 0.95em; line-height: 1.4;
    color: var(--teal-700, #0f766e); background: #fff;
    border: 1px solid var(--teal-200, #99f6e4); border-radius: 4px;
}
.copy-asset:hover { background: var(--teal-100, #ccfbf1); color: var(--teal-700, #0f766e); }
/* Quick-edit a drafted line before adding — same subtle style as copy. */
.edit-asset {
    flex: 0 0 auto; cursor: pointer; padding: 1px 6px; font-size: 0.95em; line-height: 1.4;
    color: var(--text-secondary, #64748b); background: #fff;
    border: 1px solid var(--border, #e2e8f0); border-radius: 4px;
}
.edit-asset:hover { background: var(--surface-muted, #f1f5f9); }
/* Inline editor: hide the normal row content, show the input + Save/Cancel. */
.copyblock-list-draft li.li-editing > *:not(.edit-wrap) { display: none; }
.edit-wrap { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; width: 100%; }
.edit-input {
    flex: 1 1 auto; min-width: 0; font-size: 1em; line-height: 1.4; padding: 2px 6px;
    border: 1px solid var(--teal-500, #14b8a6); border-radius: 4px;
}
.edit-count { flex: 0 0 auto; font-size: 0.75em; color: var(--text-muted, #94a3b8); font-variant-numeric: tabular-nums; }
.edit-count.over { color: var(--red, #dc2626); font-weight: 600; }
.edit-save {
    flex: 0 0 auto; cursor: pointer; padding: 1px 8px; font-size: 0.9em; line-height: 1.4; white-space: nowrap;
    color: #fff; background: var(--teal-500, #14b8a6); border: 1px solid var(--teal-500, #14b8a6); border-radius: 4px;
}
.edit-cancel {
    flex: 0 0 auto; cursor: pointer; padding: 1px 7px; font-size: 0.9em; line-height: 1.4;
    color: var(--text-secondary, #64748b); background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: 4px;
}
/* "Add to Google" per-asset button — solid teal to read as the primary action
   next to the light copy button; greys out once the asset is added. */
.add-asset {
    flex: 0 0 auto; cursor: pointer; padding: 1px 8px; font-size: 0.9em; line-height: 1.4;
    color: #fff; background: var(--teal-500, #14b8a6);
    border: 1px solid var(--teal-500, #14b8a6); border-radius: 4px; white-space: nowrap;
}
.add-asset:hover:not(:disabled) { filter: brightness(0.95); }
.add-asset:disabled, .add-asset.added {
    cursor: default; color: var(--text-muted, #64748b);
    background: var(--surface-muted, #f1f5f9); border-color: var(--border, #e2e8f0); filter: none;
}
/* "Create new" — draft one more headline/description with the copywriter. Sits at
   the end of a drafted subsection; outlined (secondary) vs the solid ＋Add. */
.create-asset {
    display: inline-flex; align-items: center; cursor: pointer; margin-top: 4px;
    padding: 2px 10px; font-size: 0.9em; line-height: 1.5; white-space: nowrap;
    color: var(--teal-700, #0f766e); background: #fff;
    border: 1px dashed var(--teal-500, #14b8a6); border-radius: 4px;
}
.create-asset:hover:not(:disabled) { background: var(--teal-50, #f0fdfa); }
.create-asset:disabled { cursor: default; opacity: 0.6; }
/* Delete an existing asset from the RSA — subtle until hovered. */
.del-asset {
    flex: 0 0 auto; cursor: pointer; padding: 1px 6px; font-size: 0.9em; line-height: 1.4;
    color: var(--text-muted, #64748b); background: #fff;
    border: 1px solid var(--border, #e2e8f0); border-radius: 4px;
}
.del-asset:hover:not(:disabled) { color: var(--red, #dc2626); border-color: var(--red, #dc2626); }
.del-asset.done {
    color: var(--teal-600, #0d9488); border-color: var(--teal-200, #99f6e4);
    background: var(--teal-50, #f0fdfa); cursor: default;
}
/* Per-line pin dropdown on current RSA assets — pushes pin/unpin to Google. */
.pin-select {
    flex: 0 0 auto; cursor: pointer; font-size: 0.8em; line-height: 1.3; padding: 1px 4px;
    color: var(--text-secondary, #64748b); background: #fff;
    border: 1px solid var(--border, #e2e8f0); border-radius: 4px; max-width: 110px;
}
.pin-select:disabled { opacity: 0.6; cursor: default; }
/* Pinned (any non-empty position) reads teal so it stands out from Unpinned. */
.pin-select[data-cur]:not([data-cur=""]) {
    color: var(--teal-700, #0f766e); border-color: var(--teal-500, #14b8a6); font-weight: 600;
}
/* An asset removed this session — struck through + faded in place. */
.asset-removed .copyblock-asset-text { text-decoration: line-through; opacity: 0.5; }
.asset-removed .am-ad, .asset-removed .am-camp { opacity: 0.4; }
td.recat-col-md { min-width: 150px; }
/* Inline category dropdowns (recat) — a bare native <select> renders short and
   cramped. Size it to the design-system control height (32px) with real padding so
   it reads as a comfortable button, not a tight one. */
.recat-cat-select, .recat-popup-select, .neg-keep-select {
    /* A native <select> ignores height/padding (the OS draws it), so it renders as
       a tight little button. appearance:none strips the native widget so our
       sizing/padding actually apply; we supply our own chevron. */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 32px;
    padding: 0 30px 0 12px;          /* room for text + the custom arrow on the right */
    border: 1px solid var(--border-strong, #cbd5e1);
    border-radius: var(--r-md, 6px);
    background-color: var(--surface, #fff);
    color: var(--text, #1f2937);
    font: inherit;
    line-height: 1.4;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
}
/* Negative Simplifier dedupe — coverage-guard warning under the keeper select. */
.neg-keep-select { max-width: 22em; }
.neg-keep-warn {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--amber-700, #b45309);
}
/* Shared-negative-list OWNERSHIP. A manager(MCC)-owned list is shared with that
   manager's other accounts, so editing it is a CROSS-ACCOUNT change — flag it. */
.neg-owner-mcc {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    background: var(--amber-100, #fef3c7);
    color: var(--amber-700, #b45309);
    border: 1px solid var(--amber-300, #fcd34d);
    white-space: nowrap;
    cursor: help;
}
.neg-owner-acct { color: var(--navy-400, #64748b); font-size: 12px; }
.neg-owner-unknown { color: var(--navy-300, #94a3b8); font-size: 12px; cursor: help; }
.neg-owner-note {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--amber-700, #b45309);
}
/* Tightened headings per DESIGN_SYSTEM.md §3.2 */
h1, h2, h3 {
    letter-spacing: -0.025em;
    font-weight: 700;
    color: var(--navy-500);
}

/* ─── Reset & Base ─── */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: 'Inter', var(--font-sans);     /* Inter primary, system fallback */
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
    height: 100vh;
    height: 100dvh;   /* the phone's real viewport — a 100vh body overflows it under the toolbar and gives iOS a window to scroll (2026-09-20) */
    overflow: hidden;
}

/* ─── Layout (v5: vertical with top brand bar) ─── */
#layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;   /* standalone on a phone: don't hide the bottom under the address bar */
}

/* ─── Top Bar (gradient brand chrome from v5.jsx BrandChrome) ─── */
#topbar {
    height: var(--header-h);            /* 52px from tokens.css */
    /* 24px both sides; the right side is minus the Dialer button's own 6px
       padding so its glyph sits on the same line as the logo (whose -8px
       margin-left does the same on the left). Operator 2026-09-19: the right
       cluster stays on top while the tabs scroll under it, so it covers as
       little as possible. */
    padding: 0 calc(var(--s-6) - 6px) 0 var(--s-6);
    display: flex;
    align-items: center;
    background: var(--brand-gradient);
    color: #fff;
    flex-shrink: 0;
    position: relative;
    z-index: 10;
    box-shadow:
        inset 0 -1px 0 rgba(0,0,0,0.18),
        0 1px 0 rgba(0,0,0,0.06);
}
/* Subtle dark overlay → text contrast on the brighter half of the gradient. */
#topbar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.12) 100%);
    pointer-events: none;
}
#topbar > * { position: relative; z-index: 1; }

.topbar-brand {
    display: flex; align-items: center;
    gap: 10px;
    margin-right: var(--s-8);           /* 32px */
    /* Anchor — acts as the home/dashboard link. */
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    padding: 4px 8px;
    margin-left: -8px;                  /* visually align logo to bar edge */
    border-radius: var(--r-md);
    transition: background 0.15s;
}
.topbar-brand:hover {
    background: rgba(255, 255, 255, 0.08);
}
.topbar-logo {
    width: 24px; height: 24px;
    border-radius: 6px;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.25);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 11px;
    letter-spacing: -0.04em; color: #fff;
}
.topbar-logo span { opacity: 0.65; }
.topbar-wordmark {
    display: flex; align-items: baseline; gap: 6px;
    font-family: var(--font-sans);
}
.topbar-wordmark-name {
    font-size: 13px; font-weight: 600; letter-spacing: -0.01em;
}
.topbar-wordmark-name sup { font-size: 8px; opacity: 0.7; }
.topbar-wordmark-tag {
    font-size: 11px; font-weight: 400;
    opacity: 0.7; letter-spacing: 0.04em;
}

.topbar-nav {
    display: flex;
    height: 100%;
    align-items: stretch;
    /* Stay reachable when the panel is narrow: shrink + scroll horizontally
       instead of clipping tabs off the edge (Projects was unclickable). */
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;          /* Firefox */
    -webkit-overflow-scrolling: touch;
}
.topbar-nav::-webkit-scrollbar { display: none; }   /* Chrome/Safari */
.topbar-tab {
    display: flex; align-items: center; gap: 6px;
    padding: 0 14px;
    white-space: nowrap;            /* don't wrap/squish */
    flex-shrink: 0;                 /* keep full tap target; nav scrolls instead */
    font-size: 12.5px; font-weight: 500;
    color: rgba(255,255,255,0.92);
    text-shadow: 0 1px 1px rgba(0,0,0,0.12);
    background: transparent;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;                /* sit on top of the bar's bottom shadow */
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease;
}
.topbar-tab:hover {
    background: rgba(255,255,255,0.06);
    color: #fff;
}
.topbar-tab.active {
    color: #fff;
    font-weight: 600;
    background: rgba(255,255,255,0.12);
    border-bottom-color: #fff;
}
.topbar-tab-count {
    font-size: 10px;
    font-family: var(--font-mono);
    background: rgba(255,255,255,0.14);
    color: #fff;
    padding: 1px 6px;
    border-radius: 999px;
    min-width: 18px;
    text-align: center;
}
.topbar-tab-count:empty { display: none; }
.topbar-tab.active .topbar-tab-count { background: rgba(255,255,255,0.22); }

.topbar-spacer { flex: 1; }

/* "Me" selector (me.js): who the badges and assignee filters are for. White-on-
   gradient like the tabs; a picked person gets the same filled pill as an active
   tab so "you are filtered" is visible from any view. */
.topbar-me {
    appearance: none; -webkit-appearance: none;
    height: 28px;
    margin-right: 10px;
    padding: 0 26px 0 10px;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 999px;
    background: rgba(255,255,255,0.10) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='white' stroke-width='1.5'/></svg>") no-repeat right 10px center;
    color: #fff;
    font: 500 12px/1 var(--font-sans, inherit);
    cursor: pointer;
    max-width: 140px;
    flex-shrink: 0;
}
.topbar-me:hover { background-color: rgba(255,255,255,0.18); }
.topbar-me.topbar-me-set { background-color: rgba(255,255,255,0.26); border-color: rgba(255,255,255,0.6); }
.topbar-me option { color: #111; background: #fff; }


/* Hide the legacy sidebar + hamburger — kept in DOM as a no-op so any
   stray script reference doesn't blow up, but invisible. Phase 2 will
   remove the markup; for now styling alone is the cheapest revert. */
#sidebar, #sidebar-overlay { display: none !important; }
.hamburger-btn { display: none !important; }

/* ─── Main Content ─── */
#main-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: margin-right 0.3s ease;
    background: var(--surface-muted);
}

/* ─── View Sections ─── */
.view-section { display: none; height: 100%; overflow: hidden; }
.view-section.active { display: flex; flex-direction: column; }

/* ─── List / Detail sub-views ─── */
#rec-list-view, #pb-list-view, #cl-list-view, #pr-list-view,
#rec-detail-view, #pb-detail-view, #cl-detail-view, #pr-detail-view,
#cl-dash-view {
    display: flex; flex-direction: column; flex: 1;
    min-height: 0; overflow: hidden;
}

/* ─── Page Header (v5 pattern, cream surface beneath gradient bar) ─── */
.page-header {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-5) var(--s-8);              /* 20px 32px */
    background: var(--surface-muted);
    border-bottom: 1px solid var(--border);
    color: var(--navy-500);
    flex-shrink: 0;
}
.page-header-text {
    flex: 1;
    min-width: 0;
}
.page-header h1 {
    margin: 0;
    font-size: var(--fs-2xl);                    /* 24px */
    line-height: 1.2;
    font-weight: var(--fw-bold);
    letter-spacing: -0.025em;
    color: var(--navy-500);
}
.page-header-subtitle {
    margin: 4px 0 0;
    font-size: var(--fs-base);
    color: var(--text-muted);
}
.page-header-actions {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    flex-shrink: 0;
}
/* Legacy aliases — page-header-left/right are still in DOM for views
   that haven't been touched yet. Treat them like the new lead/actions. */
.page-header-left { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s-3); }
.page-header-right { display: flex; align-items: center; gap: var(--s-2); flex-shrink: 0; }

/* Brand eyebrow — used above page titles per DESIGN_SYSTEM.md §3.3 */
.eyebrow {
    display: block;
    font-size: var(--fs-xs);                     /* 11px */
    font-weight: var(--fw-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--teal-500);
    margin-bottom: 4px;
}

/* Refresh icon-button — sits on the cream page-header now, not the
   teal gradient. Restyled to match the secondary ghost-button look. */
.refresh-btn {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 0 10px;
    height: 30px;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.15s;
}
.refresh-btn:hover {
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--navy-500);
}

/* Count chip used inline next to the page title (e.g. "Recommendations 47") */
.badge {
    display: inline-block;
    background: var(--surface);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: var(--fw-semibold);
    padding: 2px 8px;
    border-radius: var(--r-full);
    border: 1px solid var(--border);
    vertical-align: middle;
    position: relative;
    top: -3px;                      /* optical-center with 24px h1 */
    margin-left: var(--s-2);
}
.badge:empty { display: none; }

/* ─── Hidden ─── */
.hidden { display: none !important; }

/* ─── Notification Bar ─── */
#notification-bar {
    background: var(--teal-dark); color: white; padding: 10px 16px;
    margin: 0 24px 0; border-radius: 0 0 6px 6px;
    display: flex; justify-content: space-between; align-items: center;
    animation: slideDown 0.3s ease;
    flex-shrink: 0;
}
#notification-bar button {
    background: rgba(255,255,255,0.2); border: none; color: white;
    padding: 4px 12px; border-radius: 4px; cursor: pointer; font-size: 12px;
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ─── Tabs ─── */
.tab-bar {
    display: flex;
    gap: 0;
    padding: 0 var(--s-8);                         /* 32px to match page-header */
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    align-items: center;
    /* Scroll the tabs + filters sideways whenever they don't fit — at ANY width,
       not just below a phone breakpoint (a landscape phone is ~840–930px wide,
       above the old 720px cutoff, and was overflowing the page). Safe because
       the Plays popover is portaled to <body>, so this overflow box can't clip
       it. On wide screens everything fits, so no scrollbar shows. */
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;                         /* Firefox */
    -webkit-overflow-scrolling: touch;
}
.tab-bar::-webkit-scrollbar { display: none; }     /* Chrome/Safari */
.tab-bar .tab { flex-shrink: 0; }
.tab {
    background: none;
    border: none;
    padding: 10px 16px;
    font-size: var(--fs-sm);                       /* 12px */
    font-weight: var(--fw-semibold);
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.tab:hover { color: var(--navy-500); }
.tab.active {
    color: var(--navy-500);
    border-bottom-color: var(--teal-500);
}
.tab-count {
    display: inline-block;
    min-width: 18px; height: 18px; line-height: 18px;
    padding: 0 6px;
    border-radius: var(--r-full);
    font-size: 10px;
    font-family: var(--font-mono);
    font-weight: var(--fw-semibold);
    text-align: center;
    background: var(--surface-muted);
    color: var(--text-muted);
    border: 1px solid var(--border);
}
.tab-count:empty { display: none; }
.tab.active .tab-count {
    background: var(--teal-500);
    color: #fff;
    border-color: var(--teal-500);
}
.level-filter {
    margin-left: auto;
    display: flex; gap: 6px; align-items: center;
    padding: 6px 0;
    /* Don't shrink/wrap the filter controls — the tab-bar scrolls instead. */
    flex-shrink: 0;
    flex-wrap: nowrap;
}
.level-filter > * { flex-shrink: 0; }
.level-filter input[type="text"] {
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    color: var(--navy-500);
    background: var(--surface);
    width: 200px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.level-filter input[type="text"]:focus {
    outline: none;
    border-color: var(--teal-400);
    box-shadow: 0 0 0 2px rgba(89, 172, 154, 0.18);
}
.level-filter select.applied-status-filter,
.level-filter select.play-filter,
.level-filter select.client-filter {
    height: 28px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    color: var(--navy-500);
    background: var(--surface);
    cursor: pointer;
}
.level-filter select.applied-status-filter.hidden { display: none; }

/* Standalone filter bar — the same strip as the Recommendations .tab-bar, for
   views that have filters but no status sub-tabs (Playbooks, Clients). It
   reuses the .level-filter control styling above, so the selects look identical
   to the recs filter bar, and the controls sit at the RIGHT edge (via
   .level-filter's margin-left:auto) exactly where the recs filters are.
   Horizontally scrollable at any width, like .tab-bar. */
.filter-bar {
    display: flex;
    align-items: center;
    padding: 0 var(--s-8);                         /* match page-header + tab-bar */
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.filter-bar::-webkit-scrollbar { display: none; }

/* Play filter — grouped multi-select checkbox popover (replaces the old
   single <select>). The trigger matches the other filter controls; the
   panel anchors below it. */
.play-filter-wrap { position: relative; }
.play-filter-btn {
    height: 28px;
    display: flex; align-items: center; gap: 6px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    color: var(--navy-500);
    background: var(--surface);
    cursor: pointer;
    max-width: 200px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.play-filter-btn:hover { border-color: var(--teal-400); }
.play-filter-btn.active {
    border-color: var(--teal-400);
    color: var(--teal-600, var(--teal-400));
    font-weight: 600;
}
.play-filter-btn #filter-play-label {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.play-filter-btn .pf-caret { font-size: 10px; opacity: 0.7; margin-left: auto; }

.play-filter-menu {
    position: absolute; top: calc(100% + 4px); right: 0; z-index: 50;
    display: flex; flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: 0 8px 24px rgba(16, 33, 60, 0.16);
    padding: 10px;
    /* Grow to fit ALL category columns (width:max-content) so nothing is hidden
       behind a horizontal scroll on a normal screen; the JS clamps the box to
       the viewport and only then do the columns scroll inside (narrow/short
       screens). Breakpoint-independent. */
    width: max-content; min-width: 240px; max-width: 92vw; max-height: 85vh;
}
.play-filter-menu.hidden { display: none; }
.play-filter-cols {
    display: flex; gap: 18px; align-items: flex-start;
    /* Scroll the category columns both ways within the capped menu so all 5
       stay reachable however narrow/short the screen is. min-height:0 lets this
       flex child actually shrink so its own scrollbar engages. */
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto; min-height: 0;
    padding-bottom: 4px;
}
/* Keep each column at full width so the row scrolls rather than squishing. */
.pf-col { display: flex; flex-direction: column; gap: 2px; min-width: 150px; flex-shrink: 0; }
/* Lead Gen is the longest group — render its items across 2 sub-columns under a
   single header (the group's "select all" toggle still governs the whole set). */
.pf-col--wide { min-width: 312px; }
.pf-2col { column-count: 2; column-gap: 14px; }
.pf-2col > .pf-item { break-inside: avoid; }
.pf-col-head {
    display: flex; align-items: center; gap: 6px;
    text-align: left;
    background: none; border: none; cursor: pointer;
    font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--navy-400, var(--navy-500));
    padding: 2px 4px; margin-bottom: 2px;
    border-bottom: 1px solid var(--border);
}
.pf-col-head:hover { color: var(--teal-400); }
.pf-col-head.all-on { color: var(--teal-400); }
.pf-item {
    display: flex; align-items: center; gap: 7px;
    padding: 3px 4px; border-radius: var(--r-sm, 4px);
    font-size: var(--fs-sm); color: var(--navy-500); cursor: pointer;
}
.pf-item:hover { background: var(--navy-50, rgba(16, 33, 60, 0.05)); }
.pf-item input { cursor: pointer; margin: 0; }
.pf-item .pf-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Per-play / per-group recommendation count — right-aligned pill. Muted when
   zero so plays with active recs stand out. */
.pf-count {
    flex: 0 0 auto; margin-left: auto;
    min-width: 18px; text-align: center;
    font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
    color: var(--navy-400, var(--navy-500));
    background: var(--navy-50, rgba(16, 33, 60, 0.06));
    border-radius: 9px; padding: 0 6px; line-height: 17px;
}
.pf-col-head .pf-count { background: none; padding: 0; color: inherit; opacity: 0.75; }
.pf-loading { color: var(--navy-400, var(--navy-500)); font-size: var(--fs-sm); padding: 6px; margin: 0; }
.play-filter-actions {
    display: flex; justify-content: flex-end; gap: 8px;
    margin-top: 10px; padding-top: 8px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;   /* stay pinned at the menu bottom while the columns scroll */
}
.pf-btn {
    height: 28px; padding: 0 14px;
    border-radius: var(--r-md); font-size: var(--fs-sm); cursor: pointer;
    border: 1px solid var(--border);
}
.pf-clear { background: var(--surface); color: var(--navy-500); }
.pf-clear:hover { border-color: var(--teal-400); }
/* Client filter popover reuses the play-filter styles; these cover its
   single-select rows (a <button> instead of a <label>+checkbox). */
.pf-item-btn { width: 100%; text-align: left; background: none; border: 0; font: inherit; color: inherit; }
.pf-item.active { background: rgba(89, 172, 154, 0.14); color: var(--teal-400); font-weight: 600; }
.pf-item .pf-check { margin-left: auto; color: var(--teal-400); font-weight: 700; }
.pf-apply { background: var(--teal-400); border-color: var(--teal-400); color: #fff; font-weight: 600; }
.pf-apply:hover { filter: brightness(0.96); }

/* Clients page header search — same shape as the recs filter input
   but lives directly inside .page-header-actions (no .level-filter
   wrapper since clients has no L1/L2/L3 buttons). */
.cl-filter-search {
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    color: var(--navy-500);
    background: var(--surface);
    width: 280px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.cl-filter-search:focus {
    outline: none;
    border-color: var(--teal-400);
    box-shadow: 0 0 0 2px rgba(89, 172, 154, 0.18);
}

/* Dashboards tab — embeds the per-client dashboard (same page as the secure
   client link) in an iframe so the top-nav keeps one URL structure. */
/* Retired with the Dashboards tab (2026-09-04): #dash-picker, .dash-row,
   .dash-share-cell, #dash-picker-search and the .dash-picker-grid / .dash-client-cell
   rules — the client table they styled now IS the Clients tab's table. .dash-na went
   with the metric columns the operator removed the next day. */
/* 🔴 The frame FILLS THE PANE by flex — never a viewport calc. It used to be
   `calc(100vh - 150px)` with `min-height: 520px` (420 under 720px), a guess about
   the chrome above it; on a phone inside the Creator app the widget's viewport is
   shorter than that minimum, the iframe overran #view-clients (overflow: hidden)
   and the bottom third of every dashboard was clipped with nothing to scroll
   (operator, 2026-09-19). #cl-dash-view is a flex column like the list/detail
   sub-views, so the strip, the top bar and Creator's own chrome are all accounted
   for by layout, not arithmetic. */
#dash-frame-wrap { padding: 0; flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
#dash-frame {
    width: 100%;
    flex: 1 1 0;
    min-height: 0;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
}
/* Full-pane iframe (e.g. the Webhooks tab): fill the pane exactly instead of a
   viewport calc, so there is no nested/outer double scroll. The view-section is
   a column flex and .content-area is flex:1 — making this pane a column lets the
   iframe flex to fill the remaining height precisely. */
.content-area--frame {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 16px 24px;
}
.content-area--frame > iframe {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
}
.level-btn {
    height: 28px;
    padding: 0 10px;
    border-radius: var(--r-md);
    font-size: var(--fs-xs);                       /* 11px */
    font-family: var(--font-mono);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.04em;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
}
.level-btn:hover { border-color: var(--navy); color: var(--navy); }
.level-btn.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.level-badge {
    display: inline-block; padding: 2px 8px; border-radius: 4px;
    font-size: 11px; font-weight: 700; text-align: center;
}
.level-1 { background: #e8f5e9; color: #2e7d32; }
.level-2 { background: #fff3e0; color: #e65100; }
.level-3 { background: #fce4ec; color: #c62828; }

/* Assignee filter buttons (Recommendations tab — replaced L1/L2/L3). One per
   roster member; single-select toggle. Shares the level-btn shape but drops the
   mono/letterspacing since these are names, not codes. */
/* Filter-bar toggle buttons. Born as the rec-tab assignee buttons; those moved to
   the topbar "Me" selector on 2026-09-19 (.topbar-me) and the same day the class
   was reused, byte-identical, for the CHANNEL buttons (Google · Meta · Bing · Other). */
.assignee-filter { display: inline-flex; gap: 6px; align-items: center; }
.assignee-btn {
    height: 28px;
    padding: 0 12px;
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
}
.assignee-btn:hover { border-color: var(--navy); color: var(--navy); }
.assignee-btn.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.assignee-count {
    display: inline-block; margin-left: 6px; vertical-align: middle;
    font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums;
    background: rgba(16, 33, 60, 0.10); border-radius: 8px; padding: 0 5px; line-height: 15px;
}
.assignee-btn.active .assignee-count { background: rgba(255, 255, 255, 0.24); }

/* Inline assignee dropdown in the Playbooks table. */
.pb-assignee {
    height: 26px;
    max-width: 130px;
    padding: 0 6px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    color: var(--navy-500);
    background: var(--surface);
    cursor: pointer;
}
.pb-assignee:hover { border-color: var(--teal-400); }

/* Assignee badge in the play detail subheader (read-only; edited in the table). */
.assignee-badge {
    display: inline-block; padding: 2px 10px; border-radius: 4px;
    font-size: 11px; font-weight: 700; text-align: center;
    background: var(--navy); color: #fff;
}
.assignee-badge.unassigned { background: var(--surface-subtle, #eee); color: var(--text-muted); }

/* (rec-filters removed — search is now in tab-bar) */

/* ─── Data Tables (Phase 5 density) ──────────────────────────────────
   36px row height, 12px body, uppercase header in 11px / 600 / navy-500,
   hover row fill on --surface-subtle. Numeric cells already get
   right-align + mono via Phase 4's td.cell-num.
*/
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);                      /* 12px */
    line-height: 1.4;
}
.data-table th {
    text-align: left;
    padding: 8px 12px;
    background: var(--surface-muted);
    font-size: var(--fs-xs);                      /* 11px */
    font-weight: var(--fw-semibold);
    color: var(--navy-500);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 1;
    white-space: nowrap;
}
/* Sortable rec-table headers — click to sort, ▲/▼ marks the active column. */
.data-table th.rec-sortable { cursor: pointer; user-select: none; }
.data-table th.rec-sortable:hover { background: var(--surface-subtle, #eef2f7); color: var(--teal-700, #0f766e); }
.data-table th.rec-sorted { color: var(--teal-700, #0f766e); }
/* Sortable proposed-changes group-table headers (config.sortable). */
.change-table th.ct-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.change-table th.ct-sortable:hover { background: var(--surface-subtle, #eef2f7); color: var(--teal-700, #0f766e); }
.change-table th.ct-sortable .ct-caret::after { content: '⇅'; opacity: .35; margin-left: 2px; font-size: .85em; }
.change-table th.ct-sorted { color: var(--teal-700, #0f766e); }
.change-table th.ct-sorted[data-sort="asc"] .ct-caret::after { content: '▲'; opacity: .9; }
.change-table th.ct-sorted[data-sort="desc"] .ct-caret::after { content: '▼'; opacity: .9; }
.data-table td {
    padding: 8px 12px;
    height: 36px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    color: var(--navy-500);
}
.data-table tbody tr {
    cursor: pointer;
    transition: background 0.1s;
}
.data-table tbody tr:hover { background: var(--surface-subtle); }
.data-table .row-inactive { opacity: 0.5; }
/* Zoho-billed service columns on the Clients tab (compact ✓/·/⚠). */
.data-table th.cl-svc, .data-table td.cl-svc { padding-left: 4px; padding-right: 4px; font-size: 12px; white-space: nowrap; }
.data-table th.cl-svc { color: var(--navy-400, #64748b); font-weight: 600; }
.cl-svc-first { border-left: 2px solid var(--border); }
.cl-svc-on { color: var(--teal-700, #0f766e); font-weight: 700; }
.cl-svc-off { color: var(--navy-300, #cbd5e1); }
.cl-svc-none { color: var(--navy-300, #cbd5e1); }
.cl-svc-warn { color: #d97706; margin-left: 2px; cursor: help; }
/* Right-align numeric headers to match the cell-num bodies underneath */
.data-table th.col-numeric,
.data-table tr > th:has(+ td.cell-num:first-child) { text-align: right; }

/* ─── Collapsible breakdown columns (qualified_leads Data tables) ─── */
/* `Leads` parent aggregates Calls Ads / Phone Calls / Forms / Others;
   `Qualified` parent aggregates Phone Value / Form Value. Breakdown
   children are hidden by default — click the parent header to expand. */
.data-table.has-breakdowns th.col-parent { cursor: pointer; user-select: none; }
.data-table.has-breakdowns th.col-parent:hover { background: var(--hover-bg); }
.data-table.has-breakdowns th.col-parent .expand-caret {
    display: inline-block; font-size: 10px; opacity: 0.55;
    transition: transform 0.12s ease;
}
.data-table.expanded-leads th.col-parent-leads .expand-caret,
.data-table.expanded-qualified th.col-parent-qualified .expand-caret {
    transform: rotate(90deg); opacity: 0.9;
}
.data-table .col-child { display: none; }
.data-table.expanded-leads .col-group-leads,
.data-table.expanded-qualified .col-group-qualified { display: table-cell; }
/* Subtle tint so the expanded breakdown columns read as a distinct
   block rather than blending into the main metrics. */
.data-table tbody td.col-group-leads { background: rgba(120, 130, 150, 0.06); }
.data-table tbody td.col-group-qualified { background: rgba(90, 140, 110, 0.08); }
.data-table thead th.col-group-leads { background: rgba(120, 130, 150, 0.12); }
.data-table thead th.col-group-qualified { background: rgba(90, 140, 110, 0.14); }

/* ─── Group Headers (for playbooks) ─── */
.group-header td {
    padding: 8px 16px;
    background: var(--border);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ─── Table Scroll Wrapper ─── */
.table-wrapper {
    flex: 1; overflow-y: auto; overflow-x: auto;
}

/* ─── Status Badges ─── */
.status {
    display: inline-block; padding: 2px 10px; border-radius: 12px;
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px;
}
.status.pending { background: #fef3d0; color: #8a6d00; }
.status.review { background: #deeeff; color: #1a5bb5; }
.status.archived { background: #dff5e3; color: #1d6b2d; }
.status.expired { background: #ede6dd; color: #6b6460; }
.status.queued { background: #ede6dd; color: #6b6460; }
.status.processing { background: #fef3d0; color: #8a6d00; }
.status.completed { background: #dff5e3; color: #1d6b2d; }
.status.verification_pending { background: #d8f0ee; color: #2a7a6f; }

/* ─── Play Status ─── */
.play-status {
    font-size: 10px; font-weight: 700; padding: 2px 8px;
    border-radius: 10px; text-transform: uppercase;
}
.play-status.active { background: #dff5e3; color: #1d6b2d; }
.play-status.paused { background: #ede6dd; color: #6b6460; }

/* ─── Clients table: action cells + inline Owner select ─── */
/* Keep the trailing action buttons on one line (a width:1% column with no
   nowrap wrapped the button text — the "Re-run" rendering bug). */
.data-table td.cl-link-cell { white-space: nowrap; }
/* Owner sits to the RIGHT of the actions (operator, 2026-09-05) so the client
   name and its buttons are adjacent — the pairing you actually have to make when
   clicking. The name is clamped to one line for the same reason: a wrapping name
   made its row taller than its neighbours, and a ragged row height is the thing
   that breaks the horizontal read. Full text stays in the cell's title. */
.data-table td.cl-name-cell {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* An inactive client keeps LEGIBLE buttons — you still open their file and their
   dashboard — but its data reads back. Opacity on the whole row would have made
   the buttons look disabled. */
.data-table tr.cl-row.is-inactive td:not(.cl-link-cell) { opacity: 0.55; }
/* Freshness of the seven billed-service columns. They come from a nightly Zoho
   pull whose failure only logs a warning, so without this the columns look
   authoritative no matter how old they are. */
/* Accessible-but-invisible label (the actions column heading). Clipped rather
   than display:none, which would drop it from the accessibility tree too. */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.cl-sync-note { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; }
.cl-sync-note.is-stale { color: var(--warning, #b45309); font-weight: var(--fw-semibold); }
/* Per-row actions (Dashboard / Client Info / Plays / Zoho File). These are the
   buttons in this app that get clicked every day, so they are deliberately bigger
   than the global .btn-sm — which is NOT touched here, because it dresses every
   button in the product and resizing it would move the whole UI.

   min-width makes the four the same width, which does more than tidy one row: the
   Plays label carries a varying count and Zoho File is absent for a client with no
   Zoho record, so without it the buttons landed at a different x on every row and
   you had to re-aim for each one. Now they form four straight columns you can
   click down. The action cell trades vertical padding back so the taller buttons
   only cost the row ~4px, not 12. */
.data-table td.cl-link-cell { padding-top: 4px; padding-bottom: 4px; }
.cl-actions { display: flex; align-items: center; gap: 8px; }
.data-table td.cl-link-cell .btn-sm {
    height: 32px;
    padding: 0 14px;
    min-width: 104px;
    justify-content: center;
    font-size: var(--fs-base);
}
/* Clients rows stopped being clickable (2026-09-05) — the four per-row buttons
   replaced the whole-row navigation, so the inherited pointer would promise a
   click that does nothing. Hover still highlights: the row is scannable, just
   not a link. */
.data-table tbody tr.cl-row { cursor: default; }
.cl-plays-btn { white-space: nowrap; }
/* Owner column: read-only fact (the account manager). Editing lives on the
   client detail page, not here. */
.cl-owner-name { font-weight: 600; color: var(--navy-500); }
.cl-owner-none { color: var(--text-subtle, #9aa0ad); }
/* Detail-page owner setter: a small segmented control (Martin / Nathanaël),
   deliberately NOT a dropdown and NOT the play-assignment selector. */
.cl-owner-detail { margin-top: 12px; display: flex; align-items: center; gap: 10px; }
.cl-owner-seg { display: inline-flex; gap: 4px; }
.cl-owner-opt {
    border: 1px solid var(--border); background: var(--surface); cursor: pointer;
    font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 999px;
    color: var(--text-muted);
}
.cl-owner-opt:hover { border-color: var(--navy-300, #9aa4bd); color: var(--navy-500); }
.cl-owner-opt.active { background: var(--navy-500); border-color: var(--navy-500); color: #fff; }
.cl-owner-clear { border-radius: 50%; padding: 4px 8px; }

/* ─── Back Button (legacy, kept for any unmigrated call sites) ───── */
.back-btn {
    background: none; border: none; color: var(--teal-500);
    cursor: pointer; font-size: var(--fs-base); font-weight: 500;
    padding: 0;
}
.back-btn:hover { text-decoration: underline; }

/* ─── Breadcrumb (v5 detail-page pattern) ────────────────────────────
   Mirrors v5.jsx: small muted trail with "/" separators, last item
   bold + navy-500. Earlier items are clickable links into the
   parent list view. */
.breadcrumb {
    display: flex; align-items: center;
    gap: 6px;
    font-size: var(--fs-xs);                      /* 11px */
    color: var(--text-muted);
    line-height: 1.4;
}
.breadcrumb a {
    color: var(--text-muted);
    text-decoration: none;
    cursor: pointer;
}
.breadcrumb a:hover {
    color: var(--navy-500);
    text-decoration: underline;
}
.breadcrumb .crumb-sep { opacity: 0.5; }
.breadcrumb .crumb-current {
    color: var(--navy-500);
    font-weight: var(--fw-semibold);
}
.detail-crumb-row {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-2);
}

/* ─── Detail Subheader ─── */
.detail-subheader {
    background: var(--card);
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
/* The action row has grown to ~9 controls (Zoho file, two max(V) links, the
   assignee select, Review/Archive/Refresh/Rerun/Notes). Nothing here limited
   shrinking, so below roughly 1500px the buttons squeezed until their labels
   wrapped ("Zoho Client / File") and the centred title shredded a client name
   into one word per line ("IMG / Media / — / Agency"). The only breakpoints
   were 720/480px, so every desktop width in between had no handling at all.
   Wrapping to a second row — rather than squeezing — is the fix, and it needs
   no magic breakpoint: the row wraps exactly when it no longer fits. */
.detail-subheader-single {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.detail-left {
    font-size: 12px; color: var(--text-secondary);
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.detail-left .sep { color: var(--border); }
/* min-width:0 lets this shrink below its content so the ellipsis below can
   engage; without it a flex item refuses to go under its intrinsic width. */
.detail-client-info {
    display: flex; flex-direction: column; align-items: center;
    flex: 1 1 220px; min-width: 0; text-align: center;
}
.detail-subheader-single h2 {
    font-size: 16px; font-weight: 700; margin: 0; color: var(--navy);
    max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.detail-account-id { font-size: 11px; color: var(--text-secondary); margin-top: 1px; }
/* Never squeeze the actions; wrap them as a block and keep them right-aligned. */
.detail-right {
    display: flex; align-items: center; gap: 8px;
    flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; margin-left: auto;
}
.detail-right .btn-sm,
.detail-right button { white-space: nowrap; }
.detail-meta-row { font-size: 11px; color: var(--text-secondary); display: flex; gap: 6px; align-items: center; margin-top: 4px; }
.detail-meta-row .sep { color: var(--border); }

/* ─── Content Area ─── */
.content-area {
    flex: 1; overflow: auto; padding: 20px 24px;
}

/* ─── Cards (Phase 5 — uniform border + radius + xs shadow) ───────── */
.content-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);                  /* 10px */
    padding: var(--s-5);                          /* 20px */
    box-shadow: var(--shadow-xs);
    margin-bottom: var(--s-4);                    /* 16px */
}
.content-card h3 {
    font-size: var(--fs-md);                      /* 14px */
    font-weight: var(--fw-bold);
    margin-bottom: var(--s-3);                    /* 12px */
    color: var(--navy-500);
}

/* ─── Client Context Editor ─── */
.context-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.context-header h3 { margin-bottom: 0; }
/* Group of header action buttons (Edit + Fetch/Refresh) on the right of a
   context-header, so they sit together instead of being spread by space-between. */
.ctx-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
/* Clean read-view for the creatives inspiration boxes — mirrors the Client
   Context box's rendered display (vs a raw always-open textarea). */
.cl-readview {
    white-space: pre-wrap;
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--navy-500);
    max-height: 220px;
    overflow-y: auto;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface-muted, #f7f8fa);
}
/* Per-landing-page subsection inside the "Landing page content" card. */
.cl-lp-sub { padding: 12px 0; border-top: 1px solid var(--border); }
.cl-lp-sub:first-child { padding-top: 4px; border-top: none; }
.cl-lp-sub-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-lp-sub-title a { font-weight: var(--fw-semibold); }
/* ─── Buttons (Phase 5 — 32px default, 12px font, 6px radius) ─────── */
/* Note: a second .btn-sm rule exists below at the rec-detail action
   row that overrides the border + sets variant-specific solid fills.
   That second rule is intentional — it gives bulk-action buttons a
   denser, flatter look. Both rules set the same height/radius/font so
   they stay visually consistent. */
.btn-sm {
    height: 28px;
    padding: 0 12px;
    font-size: var(--fs-sm);                      /* 12px */
    font-weight: var(--fw-medium);
    border-radius: var(--r-md);                   /* 7px */
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--navy-500);
    transition: all 0.15s;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.btn-sm:hover { background: var(--surface-subtle); border-color: var(--border-strong); }
.btn-save {
    background: var(--teal-500);
    color: #fff;
    border-color: var(--teal-500);
    font-weight: var(--fw-semibold);
}
.btn-save:hover { background: var(--teal-400); border-color: var(--teal-400); }
.btn-cancel { margin-left: 8px; }
#context-textarea {
    width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 8px;
    font-family: inherit; font-size: 13px; line-height: 1.6; resize: vertical;
    background: var(--bg); color: var(--text);
}
#context-textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 2px rgba(89,172,154,0.2); }
.context-editor-btns { margin-top: 10px; display: flex; }

/* ─── Changes Table (in detail view) ─── */
.change-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.change-table th, .change-table td {
    text-align: left; padding: 8px 10px;
    border-bottom: 1px solid var(--border);
}
.change-table th { background: var(--table-header-bg); font-weight: 600; font-size: 12px; color: var(--text-secondary); }
/* Single-value columns flagged `narrow` in the play config shrink to their
   content (width:1% is the auto-layout shrink-to-fit trick) so a content column
   in the same table — e.g. the creatives "Ad copy" — takes all the slack. */
.change-table th.col-narrow, .change-table td.col-narrow { width: 1%; white-space: nowrap; }
/* Fixed column grid (config.fixedLayout): widths come from the column config so
   every group's table lines up; wrapped cells take the width, never widen it. */
.change-table.ct-fixed { table-layout: fixed; }
.change-table.ct-fixed td, .change-table.ct-fixed th { overflow-wrap: anywhere; }
.change-table.ct-fixed .cell-wrap { max-width: none; }
/* The snooze controls need ~106px (7d · 30d · ∞ + padding); at 84px the table
   overflowed its container by 26px and every group grew a horizontal scrollbar
   (measured headless, 2026-09-18). */
.change-table.ct-fixed th.snooze-col { width: 110px; }
/* "Why" as a hover / focus tip after the recommendation (config.whyTip). */
.why-tip { display: inline-block; width: 16px; height: 16px; line-height: 16px; text-align: center; border-radius: 50%;
  font-size: 11px; font-weight: 700; margin-left: 6px; cursor: help; vertical-align: middle;
  background: var(--surface-subtle, #eef2f7); color: var(--teal-700, #0f766e); border: 1px solid var(--border); }
.why-tip:hover, .why-tip:focus-visible { background: var(--teal-700, #0f766e); color: #fff; outline: none; }
/* Creatives table — compact stacked "Where" + "Stats" columns so the Ad copy
   column dominates (wider + bigger font). The copy is what the human works in. */
.change-table td { vertical-align: top; }
.change-table .ctx-primary { font-weight: 600; line-height: 1.35; }
.change-table .ctx-sub { color: var(--text-secondary); font-size: 11px; line-height: 1.35; }
.change-table .ctx-badge { margin-top: 4px; }
.change-table .stat-row { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; line-height: 1.55; }
.change-table .stat-label { color: var(--text-secondary); }
.change-table .stat-val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.change-table td.copyblock-cell { width: 100%; }
.change-table td.copyblock-cell .copyblock { max-width: none; }
.change-table td.copyblock-cell .copyblock-list li,
.change-table td.copyblock-cell .copyblock-list-draft li { font-size: 14px; line-height: 1.55; }
/* With the roomy Ad copy column, place Drafted + Current copy SIDE BY SIDE (two
   columns) instead of stacked; they wrap back to stacked when the cell is
   narrow. Drafted stays on the left (the deliverable), Current on the right. */
.change-table td.copyblock-cell .copyblock-body {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px 28px;
    align-items: flex-start;
}
.change-table td.copyblock-cell .copyblock-col { flex: 1 1 300px; min-width: 240px; }
.change-table .increase { color: var(--green); font-weight: 600; }
.change-table .decrease { color: var(--red); font-weight: 600; }

/* ─── Group sub-tables (used when config.groupBy is set) ─── */
.group-title {
    margin: 18px 0 6px; font-size: 13px; font-weight: 600;
    color: var(--navy); text-transform: uppercase; letter-spacing: 0.4px;
}
.group-title .group-count {
    color: var(--text-secondary); font-weight: 400; font-size: 12px;
    text-transform: none; letter-spacing: 0;
}
.group-actions {
    display: flex; align-items: center; gap: 8px;
    margin-top: 8px; margin-bottom: 4px;
}
.group-count-inline {
    margin-left: auto; color: var(--text-secondary); font-size: 12px;
}
.btn-sm.btn-table-action {
    background: white; color: var(--navy); border: 1px solid var(--border);
}
.btn-sm.btn-table-action:hover { background: var(--hover-bg); }
.btn-sm.btn-table-action.primary {
    background: var(--teal-dark); color: white; border-color: var(--teal-dark);
}
.btn-sm.btn-table-action.primary:hover { background: var(--teal); }
.btn-sm.btn-table-action.is-applied,
.btn-sm.btn-table-action.is-applied:hover {
    background: #e5e7eb; color: #6b7280; border-color: #d1d5db;
    cursor: not-allowed; opacity: 0.85;
}
.btn-sm.btn-table-action.is-partial,
.btn-sm.btn-table-action.is-partial:hover {
    background: #fef3d0; color: #8a6d00; border-color: #f0d98a;
    cursor: not-allowed; opacity: 0.9;
}
.btn-sm.btn-table-action.is-not-applied,
.btn-sm.btn-table-action.is-not-applied:hover {
    background: #fde2e0; color: #9b1b1b; border-color: #f4b8b3;
    cursor: not-allowed; opacity: 0.9;
}

/* ─── In-app modal (showConfirmModal / showAlertModal) ─── */
.modal-backdrop {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(15, 23, 42, 0.55);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.15s ease-out;
}
.modal-backdrop.open { opacity: 1; }
.modal-dialog {
    background: white; border-radius: 10px;
    min-width: 420px; max-width: 560px; width: 90%;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    transform: translateY(8px) scale(0.98);
    transition: transform 0.15s ease-out;
    overflow: hidden;
}
.modal-backdrop.open .modal-dialog { transform: translateY(0) scale(1); }
.modal-header {
    padding: 16px 20px; border-bottom: 1px solid var(--border);
    font-weight: 600; color: var(--navy); font-size: 15px;
}
/* Navigable lead-details popup header: ◀ title ▶ */
.lead-detail-header { display: flex; align-items: center; gap: 8px; }
.lead-detail-header .lead-detail-title { flex: 1; text-align: center; }
.lead-detail-header .lead-nav { min-width: 32px; padding: 2px 8px; }
.lead-detail-header .lead-nav:disabled { opacity: 0.35; cursor: default; }
.modal-body {
    padding: 16px 20px; color: var(--text); font-size: 13px; line-height: 1.5;
    max-height: 60vh; overflow-y: auto;
}
.modal-body p { margin: 0 0 10px; }
.modal-body p:last-child { margin-bottom: 0; }
.modal-change-list {
    margin: 10px 0; padding-left: 20px; font-size: 13px;
}
.modal-change-list li { margin-bottom: 4px; }
.modal-warning {
    background: #fef3c7; border-left: 3px solid #f59e0b;
    padding: 8px 12px; border-radius: 4px; margin-top: 12px;
    font-size: 12px; color: #92400e;
}
.modal-success {
    background: #d1fae5; border-left: 3px solid #10b981;
    padding: 8px 12px; border-radius: 4px; margin-top: 12px;
    font-size: 12px; color: #065f46;
}
.modal-log {
    background: #f8fafc; border: 1px solid var(--border);
    padding: 10px; border-radius: 6px; font-size: 11px;
    max-height: 240px; overflow: auto; font-family: monospace;
    white-space: pre-wrap; word-break: break-word;
}

/* ─── Apply-result modal (post-mutation summary) ─── */
.apply-summary-fail { color: #b91c1c; }
.apply-summary-mixed { color: #92400e; }
.apply-summary-warn { color: var(--text-secondary); font-style: italic; }
.apply-item-list {
    list-style: none; padding: 0; margin: 8px 0 12px;
    font-size: 13px;
}
.apply-item {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 6px 8px; border-radius: 4px; margin-bottom: 4px;
    border-left: 3px solid transparent; background: #f8fafc;
}
.apply-item-pass { border-left-color: #059669; }
.apply-item-fail { border-left-color: #b91c1c; background: #fef2f2; }
.apply-item-icon {
    flex-shrink: 0; width: 18px; text-align: center;
    font-weight: bold; font-size: 13px; line-height: 1.4;
}
.apply-item-icon-pass { color: #059669; }
.apply-item-icon-fail { color: #b91c1c; }
.apply-item-body { flex: 1; min-width: 0; }
.apply-item-head { line-height: 1.4; }
.apply-item-head code {
    font-size: 11px; padding: 1px 4px; border-radius: 3px;
    background: rgba(0,0,0,0.05);
}
.apply-item-tag {
    display: inline-block; font-size: 10px; font-weight: 600;
    padding: 1px 6px; margin-left: 6px; border-radius: 3px;
    background: var(--teal-dark); color: white;
    text-transform: uppercase; letter-spacing: 0.4px;
}
.apply-item-reason {
    font-size: 12px; color: #b91c1c; margin-top: 4px;
    font-family: monospace; word-break: break-word;
}
.apply-raw-log { margin-top: 12px; }
.apply-raw-log summary {
    cursor: pointer; font-size: 12px; color: var(--text-secondary);
    padding: 4px 0;
}
.apply-raw-log[open] summary { margin-bottom: 6px; }
.modal-copy-textarea {
    width: 100%; min-height: 180px; margin-top: 8px;
    padding: 10px; border: 1px solid var(--border); border-radius: 6px;
    font-family: monospace; font-size: 12px; resize: vertical;
    background: #f8fafc; color: var(--text);
}

/* ─── Compose Email modal ─── */
.modal-dialog.modal-dialog-wide { max-width: 720px; }
.modal-subcount { color: var(--text-secondary); font-weight: 400; font-size: 12px; }
.compose-label {
    display: block; margin: 10px 0 4px; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-secondary);
}
.compose-input {
    width: 100%; padding: 8px 10px; border: 1px solid var(--border);
    border-radius: 6px; font-size: 13px; background: white; color: var(--text);
    box-sizing: border-box;
}
.compose-input:focus { outline: none; border-color: var(--teal-dark); }
.compose-body {
    width: 100%; min-height: 260px; padding: 10px; border: 1px solid var(--border);
    border-radius: 6px; font-family: monospace; font-size: 12px; line-height: 1.5;
    resize: vertical; background: #f8fafc; color: var(--text); box-sizing: border-box;
}
.compose-body:focus { outline: none; border-color: var(--teal-dark); background: white; }
.compose-invalid { border-color: #dc2626; background: #fef2f2; }
.compose-hint { color: var(--text-secondary); font-weight: 400; text-transform: none; letter-spacing: 0; }

/* Rich-text body — contenteditable WYSIWYG + raw HTML toggle */
.compose-toolbar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    background: #f8fafc;
}
.compose-tb-btn {
    padding: 4px 8px; font-size: 12px; line-height: 1.1;
    border: 1px solid transparent; background: transparent; color: var(--text);
    border-radius: 4px; cursor: pointer; min-height: 24px;
    font-family: inherit;
}
.compose-tb-btn:hover { background: white; border-color: var(--border); }
.compose-tb-btn.active { background: var(--teal-dark); color: white; border-color: var(--teal-dark); }
.compose-tb-sep {
    width: 1px; height: 18px; background: var(--border); margin: 0 4px;
}
.compose-tb-spacer { flex: 1; }
.compose-tb-source { font-family: monospace; font-size: 11px; }
.compose-body-rich {
    width: 100%; min-height: 260px; padding: 10px; border: 1px solid var(--border);
    border-radius: 0 0 6px 6px; font-size: 13px; line-height: 1.6;
    background: white; color: var(--text); box-sizing: border-box;
    overflow-y: auto;
}
.compose-body-rich:focus { outline: none; border-color: var(--teal-dark); }
.compose-body-rich p { margin: 0 0 0.6em; }
.compose-body-rich p:last-child { margin-bottom: 0; }
.compose-body-rich a { color: var(--teal-dark); }
.compose-body-rich ul, .compose-body-rich ol { margin: 0.4em 0 0.6em; padding-left: 1.5em; }
.compose-body-raw {
    border-radius: 0 0 6px 6px;
}
/* ─── Internal Monthly Report — template editor (parent rec) ─── */
.topic-decision { display: flex; flex-direction: column; gap: var(--s-3); }
.topic-card { padding: var(--s-3); }
.topic-card .topic-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: var(--s-2);
}
.topic-card .topic-header h3 { margin: 0; font-size: 16px; }
.topic-tabs { display: flex; gap: 4px; }
.topic-tab {
    padding: 4px 10px; font-size: 11px; font-weight: 600;
    border: 1px solid var(--border); background: white; color: var(--text-secondary);
    border-radius: 4px; cursor: pointer;
    text-transform: uppercase; letter-spacing: 0.4px;
}
.topic-tab.active { background: var(--teal-dark); border-color: var(--teal-dark); color: white; }
.topic-pane .compose-body { min-height: 180px; }

/* Body editor: rich text (left) → generated email HTML (right). Two columns on
   desktop; stacks below 900px so the panes stay usable on a narrow window. */
.mr-body-split {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3);
    align-items: start;
}
@media (max-width: 900px) { .mr-body-split { grid-template-columns: 1fr; } }
.mr-body-col { display: flex; flex-direction: column; min-width: 0; }
.mr-toolbar { display: flex; gap: 4px; margin-bottom: 4px; flex-wrap: wrap; }
.mr-tb {
    padding: 3px 8px; font-size: 12px; line-height: 1.4; cursor: pointer;
    border: 1px solid var(--border); border-radius: 4px; background: white;
    color: var(--text);
}
.mr-tb:hover { border-color: var(--teal-dark); color: var(--teal-dark); }
.mr-tb:focus-visible { outline: 2px solid var(--teal-dark); outline-offset: 1px; }
.mr-tb-translate { margin-left: auto; }
/* Invisible height-match for the left column's toolbar row, so the rich editor
   and the generated-HTML pane start on the same line. */
.mr-toolbar-ghost { visibility: hidden; pointer-events: none; }
.mr-tb-status { font-size: 11.5px; align-self: center; color: var(--text-muted, #64748b); }
.mr-tb-status.ok { color: var(--teal-dark); }
.mr-tb-status.err { color: #b91c1c; }
.mr-rich {
    min-height: 200px; padding: 10px; border: 1px solid var(--border);
    border-radius: 6px; background: white; color: var(--text);
    font-size: 13px; line-height: 1.6; overflow-wrap: anywhere;
}
.mr-rich:focus { outline: none; border-color: var(--teal-dark); }
.mr-rich p, .mr-rich div { margin: 0 0 8px; }
.mr-rich ul, .mr-rich ol { margin: 0 0 8px; padding-left: 20px; }
.mr-html-out {
    min-height: 200px; max-height: 380px; margin: 0; padding: 10px;
    border: 1px solid var(--border); border-radius: 6px; background: #f8fafc;
    color: var(--text-muted, #475569); font-family: monospace; font-size: 11.5px;
    line-height: 1.55; white-space: pre-wrap; overflow: auto; overflow-wrap: anywhere;
}
/* Edited but not yet regenerated (regenerates on blur). */
.mr-html-out.mr-html-stale { opacity: .45; }
/* The store textarea keeps the original id for _mrSave; it is never shown. */
.mr-body-store { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.topic-actions {
    display: flex; align-items: center; gap: var(--s-2);
    margin-top: var(--s-2);
}
.topic-save-status { font-size: 11px; color: var(--text-secondary); }
.topic-save-status.ok { color: #059669; }
.topic-save-status.err { color: #dc2626; }
.topic-fanout {
    margin-top: var(--s-2); padding-top: var(--s-3);
    border-top: 1px solid var(--border);
    display: flex; flex-direction: column; gap: var(--s-2);
}
.topic-fanout-help { margin: 0; font-size: 12px; color: var(--text-secondary); }

/* ─── LP register modal results ─── */
.lpreg-results { margin-top: 12px; }
.lpreg-summary {
    margin: 0 0 6px; font-size: 12px; font-weight: 600;
    color: var(--text-secondary);
}
.lpreg-list {
    list-style: none; padding: 0; margin: 0;
    max-height: 240px; overflow-y: auto;
    font-size: 12px; line-height: 1.6;
}
.lpreg-list li {
    padding: 4px 8px;
    border-bottom: 1px solid var(--border);
    word-break: break-all;
}
.lpreg-list li:last-child { border-bottom: none; }
.lpreg-list code { font-size: 11px; color: var(--text-secondary); }

/* ─── Buy Twilio modal ─── */
.buy-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px;
    margin-bottom: 4px;
}
.buy-grid .compose-label { margin-top: 0; }
.compose-checkbox {
    display: flex; align-items: center; gap: 6px;
    margin: 12px 0 4px; font-size: 12px; color: var(--text);
}
.compose-checkbox input[type="checkbox"] { margin: 0; }
.buy-results { margin-top: 12px; }
.buy-copy-bar {
    margin-top: 10px; display: flex; align-items: center;
    padding-top: 10px; border-top: 1px solid var(--border);
}
.zoho-badge {
    display: inline-block; font-size: 10px; font-weight: 600;
    padding: 1px 6px; border-radius: 3px; margin-left: 4px;
    vertical-align: middle;
}
.zoho-badge.ok { background: #d1fae5; color: #065f46; }
.zoho-badge.bad { background: #fee2e2; color: #991b1b; }

/* ─── Analysis card — collapsed accordion ─── */
details.analysis-card { padding: 0; }
details.analysis-card > summary {
    list-style: none; cursor: pointer;
    padding: 16px 20px; margin: 0;
    display: flex; align-items: center; justify-content: space-between;
    border-radius: 8px;
}
details.analysis-card > summary::-webkit-details-marker { display: none; }
details.analysis-card > summary h3 { margin: 0; }
details.analysis-card > summary::after {
    content: '▸'; color: var(--navy); font-size: 22px; line-height: 1;
    transition: transform 0.15s ease-out;
    padding-left: 12px;
}
details.analysis-card[open] > summary::after { transform: rotate(90deg); }
details.analysis-card > summary:hover { background: var(--hover-bg); }
details.analysis-card .analysis-body {
    padding: 0 20px 16px;
    border-top: 1px solid var(--border);
    padding-top: 12px;
}

/* ─── Onboarding Stepper ─── */
.onboarding-progress {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 16px;
}
.onboarding-progress-bar {
    flex: 1; height: 8px; background: #e5e7eb; border-radius: 4px; overflow: hidden;
}
.onboarding-progress-fill {
    height: 100%; background: var(--teal-dark); transition: width 0.3s ease-out;
}
.onboarding-progress-label {
    font-size: 12px; color: var(--text-secondary); font-weight: 500; white-space: nowrap;
}
.onboarding-progress-pct { color: var(--teal-dark); font-weight: 700; }

.onboarding-stepper {
    list-style: none; padding: 0; margin: 0;
    counter-reset: step;
}
.onboarding-step {
    display: block; padding: 14px 16px; margin-bottom: 10px;
    background: white; border: 1px solid var(--border); border-radius: 8px;
    transition: all 0.15s ease-out;
}
.onboarding-step.status-done { background: #f0fdf4; border-color: #86efac; opacity: 0.9; }
.onboarding-step.status-skipped { background: #f9fafb; border-color: var(--border); opacity: 0.6; }
.onboarding-step.status-blocked { background: #fef2f2; border-color: #fca5a5; }

/* <details>/<summary> wrapper used to collapse done/skipped steps. */
.step-details { display: block; }
.step-details > summary {
    list-style: none;             /* Firefox + Safari */
    cursor: pointer;
}
.step-details > summary::-webkit-details-marker { display: none; }  /* Chrome/Safari old */
.step-details > summary::marker { display: none; }                  /* spec syntax */

/* Chevron on EVERY step header (not only done/skipped) so collapsing is
   discoverable regardless of status. Rotates when the step is open. */
.step-details > summary {
    position: relative;
    padding-right: 22px;
}
.step-details > summary::after {
    content: "▾";
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    color: var(--text-secondary); font-size: 12px;
    transition: transform 0.15s ease-out;
}
.step-details[open] > summary::after {
    transform: translateY(-50%) rotate(180deg);
}
.step-details > summary:hover::after { color: var(--navy); }

.step-header { display: flex; align-items: center; gap: 12px; }
/* C9 — the `idx+1` circle is gone: the procedure number is in the title. */
.onboarding-phases { display: block; }

.step-title-block {
    display: flex; flex-direction: column; gap: 2px; flex: 1;
}
.step-title { margin: 0; font-size: 14px; font-weight: 600; color: var(--navy); }
.status-done .step-title { text-decoration: line-through; color: var(--text-secondary); }

.step-status-badge {
    display: inline-block; align-self: flex-start;
    padding: 1px 7px; font-size: 10px; font-weight: 600;
    letter-spacing: 0.3px; text-transform: uppercase;
    border-radius: 4px; background: #e5e7eb; color: var(--text-secondary);
}
.step-status-badge.status-done { background: #d1fae5; color: #065f46; }
.step-status-badge.status-skipped { background: #f3f4f6; color: #6b7280; }
.step-status-badge.status-blocked { background: #fee2e2; color: #991b1b; }

.step-body { padding: 10px 0 0 2px; }
.step-description {
    font-size: 13px; color: var(--text); line-height: 1.5; margin-bottom: 8px;
}
.step-link { margin: 6px 0; font-size: 12px; }
.step-link a { color: var(--teal-dark); text-decoration: underline; }
.step-completed-meta {
    margin: 4px 0 8px; font-size: 11px; color: var(--text-secondary);
}
.step-actions {
    display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap;
}
.btn-step-action {
    background: white; color: var(--navy); border: 1px solid var(--border);
}
.btn-step-action:hover { background: var(--hover-bg); }
.btn-step-action.primary {
    background: var(--teal-dark); color: white; border-color: var(--teal-dark);
}
.btn-step-action.primary:hover { background: var(--teal); }
/* The Active Sync kill switch (Local SEO onboarding 2.6): red border, red on hover. */
.btn-step-action.danger { color: var(--red, #dc2626); border-color: var(--red, #dc2626); }
.btn-step-action.danger:hover { background: var(--red, #dc2626); color: white; }
/* Skip is the muted, borderless option next to Mark done. */
.btn-step-skip {
    color: var(--text-secondary); background: transparent; border-color: transparent;
}
.btn-step-skip:hover { background: var(--hover-bg); border-color: var(--border); }
/* H6 — Run disabled while Zoho inputs are missing (reason in the tooltip). */
.btn-step-action[disabled] {
    opacity: 0.45; cursor: not-allowed; pointer-events: auto;
}
.btn-step-action.primary[disabled]:hover { background: var(--teal-dark); }
.step-blocked-note {
    margin: 4px 0 0; font-size: 11px; color: var(--text-secondary);
}
.zoho-field-req { color: var(--red); font-weight: 700; margin-left: 2px; }
.zoho-field-input.compose-invalid { border-color: var(--red); }
/* C6 — brief highlight when "Go to landing pages" scrolls to the card. */
.onb-lps-card-flash { box-shadow: 0 0 0 3px var(--teal-light, #e6f3f1); transition: box-shadow 0.3s; }

/* Inline form for action_kind=zoho_field_write steps. Renders above
   the step-actions row. Each row is a label + text input on its own
   line so multi-field steps (Phase 5.4 has 5 inputs) read clearly. */
.zoho-field-form {
    display: flex; flex-direction: column; gap: 8px;
    margin: 8px 0;
    padding: 10px;
    background: var(--hover-bg);
    border: 1px solid var(--border);
    border-radius: 4px;
}
.zoho-field-row {
    display: flex; flex-direction: column; gap: 3px;
}
.zoho-field-label {
    font-size: 11px; color: var(--text-secondary); font-weight: 500;
}
.zoho-field-input {
    font-size: 13px; padding: 6px 8px;
    border: 1px solid var(--border); border-radius: 3px;
    background: white; color: var(--text);
    font-family: inherit;
}
.zoho-field-input:focus {
    outline: none; border-color: var(--teal-dark);
}

/* Phase headers between steps in the v2-shaped onboarding stepper */
.onboarding-phase-header {
    list-style: none;
    margin: 18px 0 6px;
    padding: 8px 0 6px;
    border-top: 2px solid var(--teal-dark);
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.onboarding-phase-header:first-child { margin-top: 4px; }
.onboarding-phase-header .phase-num {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--teal-dark);
    background: var(--teal-light, #e6f3f1);
    padding: 2px 8px;
    border-radius: 3px;
}
.onboarding-phase-header .phase-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

/* LP substeps under Phase 7.0 (action_kind=lp_substeps) */
.lp-substeps {
    list-style: none; padding: 0; margin: 8px 0 4px;
    border-top: 1px dashed var(--border);
}
.lp-substep {
    display: block; padding: 10px 4px; border-bottom: 1px dashed var(--border);
}
.lp-substep:last-child { border-bottom: 0; }
.lp-substep.status-done { opacity: 0.75; }
.lp-substep.status-skipped { opacity: 0.55; }
.lp-substep-row {
    display: flex; align-items: center; gap: 12px;
}
.lp-substep-number {
    flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
    background: #e5e7eb; color: var(--text-secondary); font-weight: 700; font-size: 11px;
    display: flex; align-items: center; justify-content: center;
}
.status-done .lp-substep-number { background: var(--teal-dark); color: white; }
.lp-substep-main { flex: 1; min-width: 0; }
.lp-substep-url {
    display: block; font-size: 13px; color: var(--teal-dark);
    text-decoration: none; word-break: break-all;
}
.lp-substep-url:hover { text-decoration: underline; }
.lp-substep-pills {
    display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; align-items: center;
}
.lp-substep-meta {
    margin: 4px 0 0; font-size: 11px; color: var(--text-secondary);
}
.lp-substep-actions {
    display: flex; gap: 6px; flex-shrink: 0;
}
.lp-mark-done-suggested {
    box-shadow: 0 0 0 2px #fbbf24; /* amber halo when ping arrived */
}

/* Capture/ping pills (used in stepper substeps + Client-detail Landing Pages card) */
.lp-pill {
    display: inline-block; padding: 1px 7px; font-size: 10px; font-weight: 600;
    letter-spacing: 0.3px; text-transform: uppercase; border-radius: 4px;
    background: #e5e7eb; color: var(--text-secondary);
}
.lp-pill.loading { color: #9ca3af; font-style: italic; }
.lp-pill.unavailable { background: #f3f4f6; color: #6b7280; font-style: italic; }
.lp-pill.not-found { background: #fee2e2; color: #991b1b; }
.lp-pill.capture-deferred { background: #fef3c7; color: #92400e; }
.lp-pill.capture-pending,
.lp-pill.capture-capturing { background: #dbeafe; color: #1e40af; }
.lp-pill.capture-complete { background: #d1fae5; color: #065f46; }
.lp-pill.capture-failed { background: #fee2e2; color: #991b1b; }
.lp-pill.ping-ok { background: #d1fae5; color: #065f46; }
.lp-pill.ping-none { background: #f3f4f6; color: #6b7280; }

/* Client-detail Landing Pages card: Add LP form */
.cl-lps-add-form {
    display: flex; gap: 8px; margin-top: 12px;
    padding-top: 12px; border-top: 1px dashed var(--border);
}
.cl-lps-add-form input[type="url"] {
    flex: 1; padding: 6px 10px; font-size: 13px;
    border: 1px solid var(--border); border-radius: 4px;
}

/* Brand status pills (drafted / no brief) used in the merged Landing
   Pages & Briefs card */
.lp-pill.brief-drafted { background: #d1fae5; color: #065f46; }
.lp-pill.brief-none { background: #f3f4f6; color: #6b7280; }
.lp-pill.brief-legacy { background: #fef3c7; color: #78350f; font-style: italic; }

/* Website URL quick-set form (Brand card, when website_url is empty) */
.brand-website-quickset {
    display: flex; gap: 6px; align-items: center;
}
.brand-website-quickset input[type="url"] {
    flex: 1; min-width: 220px; padding: 4px 8px; font-size: 13px;
    border: 1px solid var(--border); border-radius: 4px;
}


.dot-ok { color: #10b981; font-weight: 700; }
.dot-bad { color: #dc2626; font-weight: 700; }
.modal-footer {
    padding: 12px 20px; border-top: 1px solid var(--border);
    display: flex; gap: 8px; justify-content: flex-end;
    background: #f8fafc;
}
.btn-modal-cancel { background: white; color: var(--text); border: 1px solid var(--border); }
.btn-modal-cancel:hover { background: var(--hover-bg); }
.btn-modal-primary { background: var(--teal-dark); color: white; border: 1px solid var(--teal-dark); }
.btn-modal-primary:hover { background: var(--teal); }
.btn-modal-danger { background: #dc2626; color: white; border: 1px solid #dc2626; }
.btn-modal-danger:hover { background: #b91c1c; }

/* ─── Worker queue job labels ─── */
.dash-job-type {
    display: inline-block;
    background: var(--teal); color: white;
    padding: 1px 6px; border-radius: 4px;
    font-size: 10px; font-weight: 600; letter-spacing: 0.3px;
    margin-right: 4px; vertical-align: middle;
}
.dash-worker-tag {
    font-size: 10px; color: var(--text-secondary);
    background: #f1f5f9; padding: 1px 5px; border-radius: 3px;
    margin-left: 6px; font-weight: 400;
}

/* ─── Data Summary Table ─── */
.data-summary-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-summary-table th, .data-summary-table td {
    text-align: left; padding: 8px 10px;
    border-bottom: 1px solid var(--border);
}
.data-summary-table th { background: var(--table-header-bg); font-weight: 600; font-size: 12px; color: var(--text-secondary); }
.data-summary-table tr:hover td { background: var(--hover-bg); }
.data-summary-table tr.total-row td { border-top: 2px solid var(--text-secondary); font-weight: 600; }

/* Collapsible column groups */
.col-hidden { display: none; }
.col-parent { cursor: pointer; user-select: none; }
.col-parent:hover { background: var(--hover-bg); }
.col-toggle { display: inline-flex; align-items: center; gap: 4px; }
.col-arrow { font-size: 16px; color: var(--teal-dark); font-weight: 700; }
.col-child { background: rgba(89, 172, 154, 0.04); }


/* ─── Row Toggle Checkbox ─── */
.row-toggle {
    width: 16px; height: 16px; cursor: pointer;
    accent-color: var(--teal-dark);
}

/* Replaces the checkbox on rows already covered by an earlier work
   order (partial applies, e.g. per-list negatives). */
.row-applied-mark {
    display: inline-block; padding: 1px 8px; border-radius: 10px;
    background: #dff5e3; color: #1d6b2d; border: 1px solid #b7e3c2;
    font-size: 10px; font-weight: 700; white-space: nowrap;
    text-transform: uppercase; letter-spacing: 0.02em; cursor: default;
}
/* Per-row "Snoozed" badge — amber, mirrors .row-applied-mark. A snoozed row is
   skipped on future runs; when every row is applied or snoozed the rec archives. */
.row-snoozed-mark {
    display: inline-block; padding: 1px 8px; border-radius: 10px;
    background: #fdf1d6; color: #8a5a00; border: 1px solid #f0d79a;
    font-size: 10px; font-weight: 700; white-space: nowrap;
    text-transform: uppercase; letter-spacing: 0.02em; cursor: default;
}

/* Per-row "Done" control on flag-only / advisory rows (no Apply button). The
   reviewer clicks "Done" to tick a finding off; it flips to a green ✓ Done that
   can be clicked again to undo (while the rec is still actionable). */
.done-btn {
    display: inline-block; padding: 2px 10px; border-radius: 10px;
    background: var(--surface-subtle); color: var(--navy-500);
    border: 1px solid var(--border-strong);
    font-size: 10px; font-weight: 700; white-space: nowrap; cursor: pointer;
    text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.4;
}
.done-btn:hover { background: #dff5e3; color: #1d6b2d; border-color: #b7e3c2; }
.done-btn.done-btn-on {
    background: #dff5e3; color: #1d6b2d; border-color: #b7e3c2;
}
.done-btn.done-btn-on:hover { background: #cdeed6; }
/* Access-audit ledger cell (widget-utils `accessledger`): phase label, the
   current ledger entry, then the three ledger buttons (Notifié / Garder
   l'accès / Retiré) reusing .done-btn. */
.aa-ledger-cell { white-space: nowrap; }
.aa-ledger-cur { font-size: 11px; color: var(--navy-500); margin-top: 3px; }
.aa-ledger-btns { display: flex; gap: 4px; margin-top: 4px; }
.aa-ledger-btn:disabled { cursor: default; opacity: 0.85; }
/* Access-audit customer GROUP HEADER (one group per customer): client link +
   counts, then status / reason / contact, then the compose action + expander. */
.aa-group-head { margin: 22px 0 6px; padding: 10px 12px 8px; border: 1px solid var(--border);
  border-left: 3px solid var(--navy); border-radius: 8px; background: var(--card-bg, #fff); }
.aa-group-head .aa-group-title { margin: 0 0 6px; }
.aa-group-meta { display: flex; flex-wrap: wrap; gap: 6px 24px; align-items: flex-start; font-size: 12px; }
.aa-group-meta .aa-ledger-cell { white-space: normal; }
.aa-group-reason, .aa-group-contact { max-width: 60ch; line-height: 1.4; color: var(--text-secondary); }
.aa-group-meta .aa-k { font-weight: 600; color: var(--navy); margin-right: 4px; }
.aa-group-meta .aa-k::after { content: ':'; }
.aa-group-email { display: flex; align-items: flex-start; gap: 14px; margin-top: 8px; flex-wrap: wrap; }
.aa-group-email .aa-compose-btn { text-decoration: none; display: inline-block; }
.aa-group-email .cell-expand { flex: 1 1 320px; }
.aa-group-empty { margin: 4px 0 12px 14px; font-size: 12px; }
/* Static ✓ Done badge on a read-only / archived rec (mirrors .row-applied-mark). */
.row-done-mark {
    display: inline-block; padding: 1px 8px; border-radius: 10px;
    background: #dff5e3; color: #1d6b2d; border: 1px solid #b7e3c2;
    font-size: 10px; font-weight: 700; white-space: nowrap;
    text-transform: uppercase; letter-spacing: 0.02em; cursor: default;
}

/* Clickable lead # in the spam-retraction table → opens the lead-details popup */
.lead-link { color: var(--teal-dark); font-weight: 600; text-decoration: underline;
    text-decoration-style: dotted; cursor: pointer; }
.lead-link:hover { color: var(--teal); }
/* Lead-details popup body */
.lead-detail-table { width: 100%; border-collapse: collapse; margin: 4px 0 10px; }
.lead-detail-table th { text-align: left; vertical-align: top; white-space: nowrap;
    color: var(--navy-400); font-weight: 600; font-size: 12px; padding: 3px 12px 3px 0; }
.lead-detail-table td { vertical-align: top; color: var(--navy-600); font-size: 13px;
    padding: 3px 0; word-break: break-word; }
.lead-detail-retract { font-size: 12px; color: var(--navy-500); margin: 6px 0; }
/* Scrollable lead-content blocks (form message / call summary + transcript),
   shared by the retraction + recategorization popups — long text scrolls inside
   the block instead of stretching the modal. */
.lead-detail-block-label { font-weight: 600; font-size: 12px; color: var(--navy-400);
    margin: 8px 0 2px; }
.lead-detail-scroll { white-space: pre-wrap; max-height: 240px; overflow: auto;
    margin: 2px 0 8px; padding: 8px; background: var(--surface-2, #f6f6f6);
    border-radius: 4px; font-size: 12px; line-height: 1.45; color: var(--navy-600); }
.lead-detail-transcript > summary { cursor: pointer; font-size: 12px; font-weight: 600;
    color: var(--navy-400); margin: 8px 0 2px; }

/* ─── Header Actions (inline in subheader) ─── */
.header-actions {
    margin-left: auto;
    display: flex; gap: 8px; align-items: center;
}
/* Reassign control (per-rec owner override) in the rec-detail action bar. */
.reassign-wrap { display: inline-flex; align-items: center; gap: 5px; }
.reassign-lbl {
    font-size: 11px; text-transform: uppercase; letter-spacing: .03em;
    color: var(--text-muted, #6b7280); font-weight: 600;
}
.reassign-select {
    font-size: 13px; padding: 4px 8px; border-radius: 6px;
    border: 1px solid var(--border-strong, #cbd2da); background: var(--surface, #fff);
    color: var(--text, #1f2430); cursor: pointer;
}
.reassign-select:hover { border-color: var(--navy-500, #3b4a6b); }
/* Bulk-action variants — solid fills, no border, share the base size
   from the canonical .btn-sm rule above. */
.btn-sm.btn-approve { background: var(--teal-500); color: #fff; border-color: var(--teal-500); font-weight: var(--fw-semibold); }
.btn-sm.btn-approve:hover { background: var(--teal-400); border-color: var(--teal-400); }
.btn-sm.btn-reject { background: var(--surface); color: var(--danger); border-color: var(--danger); }
.btn-sm.btn-reject:hover { background: var(--danger-bg); }
.btn-sm.btn-review { background: var(--info); color: #fff; border-color: var(--info); font-weight: var(--fw-semibold); }
.btn-sm.btn-review:hover { opacity: 0.9; }
.btn-sm.btn-archive { background: var(--navy-500); color: #fff; border-color: var(--navy-500); font-weight: var(--fw-semibold); }
.btn-sm.btn-archive:hover { opacity: 0.9; }
.btn-sm.btn-pause { background: var(--surface); color: var(--warning); border-color: var(--warning); }
.btn-sm.btn-pause:hover { background: var(--warning-bg); }
.btn-sm.btn-resume { background: var(--surface); color: var(--teal-500); border-color: var(--teal-500); }
.btn-sm.btn-resume:hover { background: var(--teal-50); }
.btn-sm:disabled { opacity: 0.5; cursor: not-allowed; }

/* ─── Detail Badges (Phase 5 — semantic tokens) ──────────────────── */
.detail-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--r-full);
    font-size: var(--fs-xs);                      /* 11px */
    font-weight: var(--fw-semibold);
    text-transform: lowercase;
    background: var(--teal-50);
    color: var(--teal-500);
    border: 1px solid var(--teal-100);
    white-space: nowrap;
    line-height: 1.4;
}
.detail-badge-link { cursor: pointer; text-decoration: none; }
.detail-badge-link:hover { background: var(--teal-100); }
.detail-client-link { color: inherit; text-decoration: none; }
.detail-client-link:hover { text-decoration: underline; color: var(--teal-dark); }
.detail-account-link { text-decoration: none; }
.detail-account-link:hover { text-decoration: underline; color: var(--teal-dark); }
.detail-subheader-top { display: flex; align-items: center; gap: 12px; }
.detail-subheader-top .detail-left { display: flex; align-items: center; gap: 8px; flex: 1; }
.detail-subheader-top .detail-left h2 { font-size: 18px; font-weight: 700; margin: 0; color: var(--navy); }
.detail-subheader-top .detail-right { flex-shrink: 0; }
.detail-subheader-meta { font-size: 11px; color: var(--text-secondary); display: flex; gap: 6px; align-items: center; margin-top: 4px; }
.detail-subheader-meta .sep { color: var(--border); }
.rec-number { font-weight: 600; color: var(--text); }
.action-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--r-full);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    background: var(--warning-bg);
    color: var(--warning);
    border: 1px solid var(--warning-border);
    white-space: nowrap;
}
.severity-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--r-full);
    font-size: var(--fs-xs);                      /* 11px */
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
}
.severity-badge.critical { background: var(--danger-bg);  color: var(--danger);  border-color: var(--danger-border); }
.severity-badge.warning  { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-border); }
.severity-badge.success  { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.severity-badge.info     { background: var(--info-bg);    color: var(--info);    border-color: var(--info-border); }

/* ─── Table Scroll ─── */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ─── Strategy Content (Markdown) ─── */
.strategy-content {
    line-height: 1.7;
}
.md-h2 { font-size: 16px; font-weight: 700; margin: 20px 0 8px; color: var(--navy); border-bottom: 2px solid var(--border); padding-bottom: 6px; }
.md-h3 { font-size: 14px; font-weight: 700; margin: 16px 0 6px; color: var(--navy); }
.md-h4 { font-size: 13px; font-weight: 600; margin: 12px 0 4px; color: var(--text-secondary); }
.md-p { margin-bottom: 8px; color: #555; font-size: 13px; }
.md-ul { margin: 8px 0 8px 20px; }
.md-ul .md-ul-nested { margin: 2px 0 2px 18px; }
.md-li { margin-bottom: 4px; font-size: 13px; color: #555; }
.code-block {
    background: var(--navy); color: #ede6dd; padding: 12px 16px;
    border-radius: 8px; margin: 8px 0; overflow-x: auto;
    font-size: 12px; line-height: 1.6;
}
.code-block code { font-family: 'Fira Code', 'Consolas', monospace; }
.inline-code {
    background: var(--hover-bg); color: var(--red); padding: 1px 5px;
    border-radius: 3px; font-size: 12px;
    font-family: 'Fira Code', 'Consolas', monospace;
}

/* ─── Verification ─── */
.verification-card {
    background: var(--card); border-radius: 10px; padding: 16px;
    margin-top: 12px; box-shadow: 0 1px 4px rgba(32,31,64,0.06);
    border: 1px solid var(--border);
}
.verification-card h3 { font-size: 14px; margin-bottom: 8px; }
.verification-card h4 { font-size: 13px; margin-top: 12px; margin-bottom: 4px; color: var(--text-secondary); }
.verification-card p { margin-bottom: 6px; }
.verification-card .field-label { font-weight: 600; color: var(--text-secondary); font-size: 12px; text-transform: uppercase; }
.outcome-badge {
    display: inline-block; padding: 2px 10px; border-radius: 12px;
    font-size: 11px; font-weight: 700; text-transform: uppercase;
}
.outcome-badge.improved { background: #dff5e3; color: #1d6b2d; }
.outcome-badge.declined { background: #fde2e0; color: #9b1b1b; }
.outcome-badge.neutral { background: #fef3d0; color: #8a6d00; }
.outcome-badge.inconclusive { background: #ede6dd; color: #6b6460; }

/* Archived-view applied-status labels. */
.applied-badge {
    display: inline-block; padding: 2px 10px; border-radius: 12px;
    font-size: 11px; font-weight: 700; white-space: nowrap;
}
.applied-badge.applied     { background: #dff5e3; color: #1d6b2d; }
.applied-badge.partial     { background: #fef3d0; color: #8a6d00; }
.applied-badge.not-applied { background: #fde2e0; color: #9b1b1b; }
.applied-badge.flag-only   { background: #e7eef6; color: #3a5a7a; }

/* Recs list "Action" column — intended action (Apply vs advisory Flag) + the
   number of proposed changes, so a reviewer can triage from the list. */
.rec-action { white-space: nowrap; }
.rec-type {
    display: inline-block; padding: 1px 6px; border-radius: 4px;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    vertical-align: middle;
}
.rec-type.apply { background: #eef3ff; color: #2952cc; }
.rec-type.flag  { background: #eef0f3; color: var(--text-muted); }
.rec-type.none  { background: none; color: var(--text-muted); font-weight: 400; }
.rec-chg { margin-left: 6px; font-size: 12px; color: var(--navy-500); vertical-align: middle; }

/* ─── Playbook Detail Sub-tabs ─── */
.sub-tab-bar {
    display: flex; gap: 0; margin-bottom: 16px;
    border-bottom: 2px solid var(--border);
}
.sub-tab {
    background: none; border: none; padding: 8px 16px;
    font-size: 13px; font-weight: 600; color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
}
.sub-tab.active { color: var(--navy); border-bottom-color: var(--teal-dark); }
.sub-tab:hover { color: var(--navy); }

/* ─── Loading / Empty ─── */
.loading, .empty {
    text-align: center; color: var(--text-secondary); padding: 40px;
    font-size: 14px;
}


/* ─── Field Label ─── */
.field-label { font-weight: 600; color: var(--text-secondary); font-size: 12px; text-transform: uppercase; }

/* ─── Timeline cards (in playbook rec list) ─── */
.timeline-card {
    background: var(--card); border-radius: 10px; padding: 14px 16px;
    margin-bottom: 8px; cursor: pointer;
    border-left: 4px solid var(--teal);
    border: 1px solid var(--border);
    border-left: 4px solid var(--teal);
    box-shadow: 0 1px 4px rgba(32,31,64,0.06);
    transition: transform 0.15s, box-shadow 0.15s;
}
.timeline-card:hover {
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(32,31,64,0.1);
}
.timeline-card .card-header {
    display: flex; justify-content: space-between; align-items: center;
}
.timeline-card .card-title { font-weight: 600; font-size: 14px; }
.timeline-card .rationale {
    margin-top: 6px; color: #555; font-size: 13px;
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}
.timeline-card .meta { color: var(--text-secondary); font-size: 11px; margin-top: 6px; }

/* Red unread bubble — a reply landed while the project Conversation
   subtab was not open. */
.acq-subtab .conv-unread {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: #e03131; margin-left: 6px; vertical-align: middle;
}

/* ─── Client Detail Info Grid ─── */
.info-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.info-item { }
.info-item .info-label {
    font-size: 11px; font-weight: 700; color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: 0.3px;
    margin-bottom: 4px;
}
.info-item .info-value { font-size: 14px; color: var(--navy); }

/* ─── Notes Slide-out Panel ─── */
.notes-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.25); z-index: 900;
}
.notes-panel {
    position: fixed; top: 0; right: 0; bottom: 0; width: 380px; max-width: 90vw;
    background: #fff; z-index: 910; box-shadow: -4px 0 20px rgba(0,0,0,0.12);
    display: flex; flex-direction: column;
    transform: translateX(100%); transition: transform 0.25s ease;
}
.notes-panel:not(.hidden) { transform: translateX(0); }
.notes-panel.hidden { pointer-events: none; }
.notes-panel-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.notes-panel-header h3 { margin: 0; font-size: 16px; color: var(--navy); }
.notes-panel-header .btn-sm {
    font-size: 18px; padding: 2px 8px; line-height: 1; border: none; background: none;
    color: var(--text-secondary); cursor: pointer;
}
.notes-panel-body {
    flex: 1; overflow-y: auto; padding: 16px 20px;
}
#notes-input-section {
    margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border);
}
#notes-input-section textarea {
    width: 100%; border: 1px solid var(--border); border-radius: 6px;
    padding: 10px; font-size: 13px; font-family: inherit; resize: vertical;
    margin-bottom: 8px;
}
.notes-actions {
    display: flex; align-items: center; gap: 10px;
}
.notes-actions .btn-save { flex: 1; }
.ai-exception-label {
    display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--navy);
    cursor: pointer; white-space: nowrap; font-weight: 600;
}
.ai-exception-label input[type="checkbox"] { cursor: pointer; accent-color: var(--orange); }

/* ─── AI Exceptions List ─── */
.ai-exceptions-section {
    margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.ai-exceptions-section h4 {
    font-size: 13px; color: var(--navy); margin: 0 0 8px 0;
    display: flex; align-items: center; gap: 6px;
}
.ai-exceptions-section .badge {
    background: var(--orange); color: #fff; font-size: 10px;
    padding: 1px 6px; border-radius: 10px; font-weight: 700;
}
.ai-exception-item {
    background: #fff8f0; border: 1px solid #f0d9b5; border-radius: 6px;
    padding: 8px 10px; margin-bottom: 6px;
}
.ai-exception-text { font-size: 12px; color: var(--navy); margin-bottom: 4px; }
.ai-exception-target { font-size: 11px; color: var(--text-muted, #888); margin-bottom: 4px; }
.ai-exception-target code { font-size: 11px; }
/* An EXPIRED snooze is still is_active (audit history) but suppresses nothing —
   make that unmistakable next to a note the panel otherwise shows as active. */
.ai-exception-expired { color: var(--danger, #c0392b); font-weight: 600; }
.ai-exception-fired { font-size: 11px; color: var(--text-muted, #888); margin-bottom: 4px; }
/* Observation, not an alarm — a seasonal finding may legitimately not recur. */
.ai-exception-never { font-size: 11px; color: var(--warning, #b7791f); margin-bottom: 4px; }
/* Dismissed exceptions collapse behind this toggle — 44% of all exceptions are
   dismissed, so without it the live rules sit buried under their own history. */
.ai-exceptions-toggle {
    display: block; width: 100%; text-align: left;
    background: none; border: none; padding: 6px 0; margin-top: 4px;
    font-size: 11px; color: var(--text-muted, #888); cursor: pointer;
}
.ai-exceptions-toggle:hover { color: var(--text, #333); text-decoration: underline; }
.ai-exceptions-dismissed { border-top: 1px dashed var(--border, #ddd); padding-top: 6px; }
/* Basis banner above the audit KPI bar: this account records no qualified
   conversions, so every threshold is measured against conversions instead. */
.audit-basis-note {
    font-size: 12px; line-height: 1.45; margin: 0 0 8px;
    padding: 8px 10px; border-radius: 4px;
    background: var(--warning-bg, #fff8e6);
    border-left: 3px solid var(--warning, #b7791f);
    color: var(--text, #333);
}
/* Competitor-context banner (negatives plays): sits above the competitor group,
   in large type — the reviewer reads it before ticking those rows. */
.competitor-context-banner {
    margin: 10px 0 10px; padding: 14px 16px; border-radius: 6px;
    background: var(--warning-bg, #fff8e6); border-left: 5px solid var(--warning, #b7791f);
    color: var(--text, #333);
}
.competitor-context-banner.cc-unmeasured { font-size: 15px; font-weight: 600; }
.competitor-context-banner .cc-source { font-size: 12px; color: var(--text-muted, #777); margin-top: 6px; }
.competitor-context-banner .cc-title { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.competitor-context-banner .cc-grid { display: flex; flex-wrap: wrap; gap: 18px 32px; margin-bottom: 8px; }
.competitor-context-banner .cc-k { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted, #777); }
.competitor-context-banner .cc-v { font-size: 26px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.competitor-context-banner .cc-line { font-size: 13px; margin-top: 2px; }
.competitor-context-banner .cc-verdict { font-size: 16px; font-weight: 700; margin-top: 8px; }
.competitor-context-banner .cc-brands { font-size: 11px; color: var(--text-muted, #777); margin-top: 6px; }
.ai-exception-meta {
    display: flex; gap: 8px; align-items: center; font-size: 11px; color: var(--text-secondary);
}
.btn-xs {
    background: none; border: none; color: var(--text-secondary); cursor: pointer;
    font-size: 14px; padding: 0 2px; line-height: 1;
}
.btn-xs:hover { color: var(--red); }
.btn-xs.btn-enable:hover { color: var(--teal-dark); }
.ai-exception-disabled { opacity: 0.5; }
.ai-exception-disabled .ai-exception-text { text-decoration: line-through; }
.ai-exception-status { font-size: 10px; color: var(--red); font-weight: 600; text-transform: uppercase; }

.btn-rerun {
    background: var(--teal-light); color: var(--teal-dark); border: none;
    padding: 5px 12px; border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: 600;
}
.btn-rerun:hover { background: var(--teal); color: #fff; }
.toast-msg {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    background: var(--navy); color: #fff; padding: 10px 24px; border-radius: 8px;
    font-size: 13px; font-weight: 600; opacity: 0; transition: opacity 0.3s; z-index: 9999;
    pointer-events: none;
}
.toast-msg.toast-visible { opacity: 1; }
.token-info { color: var(--text-secondary); font-size: 10px; }
.dash-cost-total { font-size: 12px; font-weight: 400; color: var(--text-secondary); margin-left: 8px; }
.dash-bar-cost { background: var(--orange); }
.dash-bar-count { font-size: 10px; color: var(--text-secondary); }
.btn-dashboard {
    background: var(--teal, #0f8b8d); color: #fff;
    border-color: var(--teal, #0f8b8d); font-weight: var(--fw-semibold, 600);
}
.btn-dashboard:hover { background: var(--teal-dark, #0b6e70); border-color: var(--teal-dark, #0b6e70); color: #fff; }
/* "Create a task" on a rec (Tasks phase 4): same look as the dashboard buttons, its own
   class because nav.js hides .btn-dashboard wholesale. */
.btn-create-task { background: var(--teal, #0f8b8d); color: #fff; border-color: var(--teal, #0f8b8d); font-weight: var(--fw-semibold, 600); }
.btn-create-task:hover { background: var(--teal-dark, #0b6e70); border-color: var(--teal-dark, #0b6e70); color: #fff; }


.btn-notes {
    background: var(--gray-200); color: var(--navy); border: none;
    padding: 5px 12px; border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: 600;
}
.btn-notes:hover { background: var(--gray-300); }

/* Refresh = reload this rec's labels (not a rerun). Neutral, sits before Rerun. */
.btn-refresh {
    background: var(--gray-200); color: var(--navy); border: none;
    padding: 5px 12px; border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: 600;
}
.btn-refresh:hover { background: var(--gray-300); }
.btn-refresh.is-busy { opacity: 0.6; cursor: default; }

/* ─── Notes History Items ─── */
.history-item {
    border-bottom: 1px solid var(--border);
    padding: 12px 0;
}
.history-item:last-child { border-bottom: none; }
.history-item.current { background: var(--teal-light); margin: 0 -20px; padding: 12px 20px; border-radius: 6px; }
.history-meta {
    display: flex; gap: 10px; align-items: center;
    margin-bottom: 6px; font-size: 12px; color: var(--text-secondary);
}
.history-id { font-weight: 600; color: var(--navy); }
.history-notes { font-size: 13px; color: var(--text); }
.history-notes p { margin: 0; }

/* Inline edit affordance for AI exceptions and history notes. The Edit
   button swaps the text element for a textarea + Save/Cancel below. */
.btn-edit-inline { font-size: 11px; padding: 2px 6px; }
.edit-mode-textarea {
    width: 100%; min-height: 60px; padding: 6px 8px; box-sizing: border-box;
    font-family: inherit; font-size: 13px; color: var(--text);
    border: 1px solid var(--border, #d0d5dd); border-radius: 4px; resize: vertical;
}
.edit-mode-actions { display: flex; gap: 6px; margin-top: 6px; }
.ai-exception-meta .edited-tag { color: var(--text-muted, #667085); font-style: italic; }

/* Notes button count chip — visible only when active AI exceptions > 0. */
.notes-badge {
    display: inline-block; min-width: 18px; padding: 1px 6px;
    border-radius: 9px; background: var(--accent, #f97316); color: #fff;
    font-size: 11px; font-weight: 600; line-height: 1.4;
    text-align: center; vertical-align: middle;
}

/* Per-row snooze controls (7d / 30d) — created via snoozeChangeItem. */
th.snooze-col { width: 84px; text-align: center; }
/* Accept-All bar — bottom-of-rec button that applies every checked row across all
   sections in one go (multi-section recs only). */
.accept-all-bar {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 2px solid var(--border, #e5e7eb);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.accept-all-bar .accept-all-btn { font-weight: 600; }

/* Account Audit KPI summary bar (rendered above the finding sections). */
.audit-kpis {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 4px 0 18px;
}
.audit-kpi {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 96px;
    padding: 8px 12px;
    background: var(--surface-2, #f8fafc);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
}
.audit-kpi-num { font-size: 18px; font-weight: 700; line-height: 1.1; }
.audit-kpi-lbl { font-size: 11px; color: var(--text-muted, #6b7280); margin-top: 2px; }
.audit-kpi-warn { border-color: #f59e0b; background: #fffbeb; }
.audit-kpi-warn .audit-kpi-num { color: #b45309; }
/* Competitor context carried from the negatives play (2026-09-18): two cells in
   the same bar, one line under it. Deliberately not a banner. */
.audit-kpi-cc { border-color: var(--warning, #b7791f); }
.audit-cc-line { font-size: 12px; line-height: 1.45; margin: -10px 0 16px; color: var(--text, #333); }
.audit-cc-line strong { font-weight: 700; }

/* Account Audit coverage list — every check + its count (0 included). */
.audit-coverage { margin: 4px 0 18px; }
.audit-coverage h4 { margin: 0 0 8px; font-size: 13px; }
.qs-spend-exposure {
    margin: 14px 0 10px; padding: 10px 12px; font-size: 16px; line-height: 1.55;
    color: var(--navy);
}
.qs-spend-title { font-weight: 700; margin-right: 6px; color: var(--navy); }
.qs-spend-seg { white-space: nowrap; }
.qs-spend-cost { color: var(--text-muted, #888); }
.qs-spend-total { font-weight: 700; white-space: nowrap; }
.audit-cov-list {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 2px 18px;
}
.audit-cov-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 0; border-bottom: 1px solid var(--border, #eef1f4); font-size: 12.5px;
}
.audit-cov-label { color: var(--text); }
.audit-cov-count { font-weight: 700; min-width: 22px; text-align: right; }
.audit-cov-zero { opacity: 0.5; }
.audit-cov-zero .audit-cov-count { font-weight: 500; color: var(--text-muted, #9ca3af); }
/* Generic play coverage card ("What this checked") — three states per check:
   found N (amber), clear ✓ (green, dimmed), couldn't verify (grey italic). */
.cov-found .audit-cov-count { color: var(--warning, #b45309); }
.cov-clear { opacity: 0.6; }
.cov-clear .audit-cov-count { font-weight: 600; color: var(--success, #16a34a); }
.cov-unavail .audit-cov-count { font-weight: 500; font-style: italic; color: var(--text-muted, #9ca3af); }
.cov-banner {
    margin: 0 0 10px; padding: 7px 11px; border-radius: 6px; font-size: 12.5px;
    background: #fff6e9; border: 1px solid #f0d9b0; color: #8a5a00;
}
/* tROAS "Decision logic" ladder (decision_trace expander, collapsed by default) */
.decision-ladder { font-size: 12px; }
.decision-ladder > summary {
    cursor: pointer; color: var(--navy-500); white-space: nowrap; user-select: none; font-weight: 600;
}
.decision-ladder[open] > summary { margin-bottom: 4px; }
.dl-list { margin: 4px 0 2px; padding-left: 0; list-style: none; min-width: 320px; }
.dl-step {
    display: grid; grid-template-columns: 16px 1fr; column-gap: 6px; align-items: baseline;
    padding: 2px 0; border-bottom: 1px solid var(--border, #eef1f4);
}
.dl-icon { text-align: center; }
.dl-label { font-weight: 600; }
.dl-detail { grid-column: 2; color: var(--text-muted, #888); font-size: 11.5px; }
.dl-fired .dl-label, .dl-fired .dl-icon { color: var(--success, #16a34a); font-weight: 700; }
.dl-skip { opacity: 0.75; }
.dl-skip .dl-icon { color: var(--text-muted, #9ca3af); }
.dl-na { list-style: none; color: var(--text-muted, #888); font-style: italic; padding: 3px 0 0; }
.accept-all-bar .accept-all-hint { color: var(--text-muted, #95a5a6); font-size: 12px; }

td.snooze-cell { white-space: nowrap; text-align: center; }
td.snooze-cell .btn-snooze {
    font-size: 11px; padding: 2px 6px; margin: 0 2px;
    border: 1px solid var(--border, #d0d5dd); background: #fff;
    border-radius: 4px; cursor: pointer; color: var(--text-secondary, #475467);
}
td.snooze-cell .btn-snooze:hover { background: var(--surface-hover, #f3f4f6); }

/* Bulk snooze row, below a table — snoozes all ticked rows at once. Reuses
   the per-row .btn-snooze look so the 7d / 30d / ∞ set reads identically. */
.bulk-snooze-actions {
    display: flex; align-items: center; justify-content: flex-end; gap: 4px;
    margin: 6px 0 2px; flex-wrap: wrap;
}
.bulk-snooze-actions .bulk-snooze-label {
    font-size: 11px; color: var(--text-secondary, #475467); margin-right: 4px;
}
.bulk-snooze-actions .btn-snooze {
    font-size: 11px; padding: 2px 6px;
    border: 1px solid var(--border, #d0d5dd); background: #fff;
    border-radius: 4px; cursor: pointer; color: var(--text-secondary, #475467);
}
.bulk-snooze-actions .btn-snooze:hover { background: var(--surface-hover, #f3f4f6); }

/* ─── Dashboard ─── */
.dash-stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 8px; margin-bottom: 16px;
}

/* ── Needs-attention triage strip (Failed / Overdue / Partial) ── */
.dash-na-strip {
    border: 1px solid var(--border); border-left: 3px solid #dc2626;
    background: var(--surface); border-radius: var(--r-md);
    padding: 10px 12px; margin-bottom: 16px;
}
.dash-na-title { font-weight: 600; font-size: 13px; color: var(--navy); margin-bottom: 8px; }
.dash-na-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dash-na-tile {
    border: 1px solid var(--border); border-radius: var(--r-md);
    padding: 10px 12px; text-align: center; background: var(--surface-subtle);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.dash-na-tile[role="button"] { cursor: pointer; }
.dash-na-tile[role="button"]:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,0.08); }
.dash-na-tile.na-empty { opacity: 0.5; }
.dash-na-count { font-size: 22px; font-weight: 700; line-height: 1.1; }
.dash-na-label { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.dash-na-tile.na-failed  .dash-na-count { color: #dc2626; }
.dash-na-tile.na-overdue .dash-na-count { color: #d97706; }
.dash-na-tile.na-partial .dash-na-count { color: #ca8a04; }
/* Data-source tile + its list. Sources are not plays: no rerun, no dismiss — the
   row exists to name the source, its state, and WHICH accounts are affected. */
.dash-na-tile.na-sources .dash-na-count { color: #7c3aed; }
/* A clean day still shows the Data-sources tile (operator, 2026-09-13). */
.dash-na-strip.na-clear .dash-na-title { color: var(--text-secondary); }
.dash-na-tile.na-ok { border-color: #16a34a; background: rgba(22, 163, 74, .08); }
.dash-na-tile.na-ok .dash-na-count { color: #16a34a; }
.na-src-row { align-items: flex-start; }
.na-src-dot {
    display: inline-block; width: 9px; height: 9px; border-radius: 50%;
    margin-right: 7px; vertical-align: middle;
}
.na-src-ok      { background: var(--success, #16a34a); }
.na-src-warn    { background: var(--warning, #b8791a); }
.na-src-fail    { background: var(--danger, #dc2626); }
/* 🔴 Grey, NOT green: "could not measure" must never look like "measured and fine". */
.na-src-unknown { background: var(--text-subtle); }
.na-src-items { margin: 6px 0 0 18px; padding: 0; font-size: var(--fs-sm); color: var(--text-muted); }
.na-src-items li { margin: 1px 0; }
.na-src-note { color: var(--text-subtle); }
/* Per-alert Close on the System alerts row (2026-09-29). */
.na-src-items .sa-close-btn { margin-left: 6px; padding: 1px 8px; font-size: var(--fs-xs); }
.na-src-items li.sa-closed { text-decoration: line-through; color: var(--text-subtle); }
.sa-closed-note { margin-left: 6px; font-style: italic; color: var(--text-subtle); text-decoration: none; display: inline-block; }
/* Data-sources modal footer: the recovery control reads left-to-right as a sentence
   — [Refresh snapshots now] [what is happening] ............ [Close]. The note takes
   the auto margin so it stays put whether it is empty or mid-progress. */
.na-modal .modal-footer { justify-content: flex-start; align-items: center; }
.na-modal .na-rewarm-note {
    color: var(--text-subtle); font-size: 12px; margin-right: auto;
}
.na-modal .na-rewarm[disabled] { opacity: .55; cursor: default; }

/* Popup list rows + rerun buttons */
.na-modal .modal-body.na-list { max-height: 60vh; overflow-y: auto; padding: 8px 0; }
.na-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 20px; border-bottom: 1px solid var(--border);
}
.na-row:last-child { border-bottom: none; }
.na-row-main { font-size: 13px; color: var(--navy); min-width: 0; }
.na-row-detail { font-size: 12px; color: var(--text-muted); margin-top: 2px; word-break: break-word; }
.na-row-actions { display: flex; gap: 6px; flex-shrink: 0; }
.na-rerun-btn, .na-rerun-all, .na-dismiss-btn, .na-dismiss-all { white-space: nowrap; flex-shrink: 0; }
.na-rerun-btn.queued { color: var(--teal-500); border-color: var(--teal-500); }
/* "Reran since?" live badge on Failed/Overdue rows (recovered vs still-broken). */
.na-rerun-status { display: inline-block; margin-top: 3px; font-size: 11px; font-weight: var(--fw-semibold); }
.na-rerun-status.checking { color: var(--text-muted); font-weight: 400; font-style: italic; }
.na-rerun-status.ok { color: var(--success); }
.na-rerun-status.bad { color: var(--warning); }
/* Client-detail Plays list: per-play Rerun button (queued state) + muted cell. */
.pl-rerun-btn.queued { color: var(--teal-500); border-color: var(--teal-500); }
.cell-muted { color: var(--text-muted); }
/* Customer share-link card (Clients detail) */
.cl-share-note { font-size: 12px; color: var(--text-muted); margin: 0 0 8px; }
.cl-share-row { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.cl-share-input { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 12px;
    padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px;
    background: var(--surface-subtle); color: var(--text); }
.cl-share-actions { display: flex; gap: 6px; }
.na-dismiss-btn, .na-dismiss-all { color: var(--text-muted); }
.na-dismiss-btn:hover, .na-dismiss-all:hover { color: var(--navy); }
.dash-stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 10px 12px;
    text-align: center;
    box-shadow: var(--shadow-xs);
}
/* Clickable cards deep-link into the filtered recs list. */
.dash-stat-card.clickable { cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.dash-stat-card.clickable:hover { border-color: var(--teal-400); box-shadow: var(--shadow-sm, 0 2px 6px rgba(16,33,60,0.10)); }
.dash-stat-card.clickable:focus-visible { outline: 2px solid var(--teal-400); outline-offset: 2px; }
.dash-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--navy-500);
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.dash-stat-label {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 2px;
}
.dash-stat-card.pending .dash-stat-value { color: var(--warning); }
.dash-stat-card.review  .dash-stat-value { color: var(--info); }
.dash-stat-card.running .dash-stat-value { color: var(--purple); }
.dash-stat-card.teal    .dash-stat-value { color: var(--teal-500); }
.dash-stat-card.muted   .dash-stat-value { color: var(--text-muted); }
.dash-stat-card.failed  .dash-stat-value { color: var(--danger); }

/* Auto-fix PR flag — top-of-dashboard banner when a remediation PR awaits review */
.dash-autofix-banner {
    display: flex; align-items: flex-start; gap: 10px;
    background: #eef6ff; border: 1px solid #bcdcff; border-left: 4px solid var(--info, #1e6fe0);
    border-radius: 8px; padding: 10px 14px; margin-bottom: 14px;
}
/* Failed read (DL-1) — the "we couldn't ask GitHub" state must not look like
   the informational "here are your open PRs" one. Red, not blue. */
.dash-autofix-banner.dash-autofix-failed {
    background: #fdecec; border-color: #f5b7b7;
    border-left-color: var(--danger, #d64545);
}
.dash-autofix-failed .dash-autofix-link { color: var(--danger, #d64545); }
.dash-autofix-icon { font-size: 18px; line-height: 1.3; }
.dash-autofix-text { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.dash-autofix-link { color: var(--info, #1e6fe0); text-decoration: none; font-size: 12px; }
.dash-autofix-link:hover { text-decoration: underline; }

.dash-health {
    display: flex; gap: 24px; flex-wrap: wrap;
}

/* Bar charts (Phase 3 — chart palette discipline).
   The cost chart is the only visualization in the widget today.
   Single series → use --chart-1 (the canonical "primary series"
   per DESIGN_SYSTEM.md §2.5). When more series get added later,
   they should pick --chart-2, --chart-3, etc. in plotting order —
   never picked aesthetically. */
/* Stacked daily-cost chart (replaces the per-play horizontal bars).
   Layout: y-axis labels on the left, plot area with horizontal grid +
   one column per day, x-axis labels below, legend at the bottom.
   Pure CSS — no charting library. */
.dash-cost-card { padding-bottom: 12px; }
.dash-cost-chart-wrap {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 8px;
    height: 220px;
    margin: 12px 0 4px;
}
.dash-cost-yaxis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
}
.dash-cost-ytick {
    font-size: 10px;
    color: var(--text-secondary);
    line-height: 1;
}
.dash-cost-plot {
    position: relative;
    border-bottom: 1px solid var(--border);
    border-left: 1px solid var(--border);
}
.dash-cost-grid {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
    pointer-events: none;
}
.dash-cost-gridline {
    height: 1px;
    background: var(--border);
    opacity: 0.5;
}
.dash-cost-bars {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    gap: 1px;
    padding: 0 2px;
}
.dash-cost-bar-col {
    flex: 1 1 0;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    cursor: default;
    position: relative;
}
/* Weekend columns get a subtle gray stripe behind the bar. The stripe
   spans the full plot height so day-of-week patterns pop visually
   even on $0 days (when the bar itself is invisible). */
.dash-cost-bar-col--weekend::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(100, 116, 139, 0.10);  /* slate-500 @ 10% */
    pointer-events: none;
    z-index: 0;
}
.dash-cost-bar-col .dash-cost-bar { position: relative; z-index: 1; }
.dash-cost-bar {
    width: 90%;
    max-width: 24px;
    display: flex;
    flex-direction: column-reverse;  /* segments stack bottom-up */
    border-radius: 2px 2px 0 0;
    overflow: hidden;
    transition: opacity 0.12s;
}
.dash-cost-bar-col:hover .dash-cost-bar { opacity: 0.85; }
.dash-cost-seg {
    width: 100%;
    min-height: 1px;
}
/* X-axis tick row mirrors the bar layout exactly: same flex gap + padding
   so each tick sits under its column. The leading 48px spacer matches
   the y-axis label gutter above it. */
.dash-cost-xaxis {
    display: flex;
    gap: 1px;
    padding: 4px 2px 0 calc(48px + 8px + 2px);
    font-size: 10px;
    color: var(--text-secondary);
}
.dash-cost-xtick {
    flex: 1 1 0;
    text-align: center;
    line-height: 1.4;
}

/* Two-column body layout: chart on left, legend on right. */
.dash-cost-body {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}
.dash-cost-main {
    flex: 1 1 auto;
    min-width: 0;  /* allow flex shrink so the bars don't overflow */
}

/* Vertical legend stack on the right of the chart. Each row is one
   play with its swatch, name, and total — name takes the middle
   space and the total right-aligns so dollar figures form a clean
   column. */
.dash-cost-legend {
    flex: 0 0 240px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    color: var(--text);
    padding: 4px 0;
    max-height: 280px;
    overflow-y: auto;
}
.dash-cost-legend-item {
    display: grid;
    grid-template-columns: 12px 1fr auto;
    align-items: center;
    gap: 8px;
    line-height: 1.3;
}
.dash-cost-swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
}
.dash-cost-legend-name {
    font-family: var(--font-mono, ui-monospace, monospace);
    color: var(--navy-700);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-cost-legend-total {
    color: var(--text-secondary);
    font-size: 11px;
}

/* Monthly-report daily chart — reuses .dash-cost-* layout (yaxis +
   plot + grid + bars + weekend stripe + xaxis + legend) and adds:
   - a second y-axis on the right for the leads count scale,
   - a non-scaling SVG overlay drawing the spend line and budget
     dashed step-line across the plot area.
   The plot height is the same 220px the dashboard chart uses so the
   two charts read as siblings when stacked. */
.monthly-chart-card {
    /* Match dash-cost-card spacing without forcing nested grids. */
    padding-bottom: 12px;
}
.monthly-chart-title {
    margin: 0 0 4px 0;
    font-size: var(--fs-sm, 13px);
    font-weight: var(--fw-semibold, 600);
    color: var(--text);
}
.monthly-chart-title .monthly-chart-total {
    color: var(--text-secondary);
    font-weight: 400;
    margin-left: 6px;
    font-size: 11px;
}
.monthly-chart-wrap {
    /* 48px (left $) + 1fr plot + 40px (right leads scale) */
    grid-template-columns: 48px 1fr 40px;
}
.monthly-chart-yaxis-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    font-size: 10px;
    color: var(--text-secondary);
    line-height: 1;
    padding-left: 4px;
}
.monthly-chart-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}
.monthly-chart-overlay .monthly-chart-spend-line {
    fill: none;
    stroke: var(--chart-1, #3274e5);
    stroke-width: 1.5px;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}
.monthly-chart-overlay .monthly-chart-spend-fill {
    fill: var(--chart-1, #3274e5);
    fill-opacity: 0.08;
    stroke: none;
}
.monthly-chart-overlay .monthly-chart-budget-step {
    fill: none;
    stroke: var(--chart-4, #ee8733);
    stroke-width: 1.5px;
    stroke-dasharray: 5 3;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}
/* Leads-bar fill — neutral so it reads as background context and lets
   the spend/budget lines pop. Subtle slate matching the weekend stripe
   family. */
.monthly-chart-leads-bar {
    background: rgba(100, 116, 139, 0.55);
}
/* Legend variant — horizontal row below the chart instead of the
   vertical column the dashboard uses for per-play breakdown. */
.monthly-chart-legend {
    flex: 1 1 auto;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    padding: 8px 0 0;
    max-height: none;
    overflow: visible;
}
.monthly-chart-legend .dash-cost-legend-item {
    grid-template-columns: 18px auto auto;
}
.monthly-chart-legend .monthly-chart-legend-line {
    width: 16px;
    height: 2px;
    background: var(--chart-1, #3274e5);
    border-radius: 1px;
}
.monthly-chart-legend .monthly-chart-legend-step {
    width: 16px;
    height: 2px;
    background: repeating-linear-gradient(
        to right,
        var(--chart-4, #ee8733) 0 5px,
        transparent 5px 8px
    );
}

/* Period banner — single line "Avril 2026 vs Mars 2026" above the
   stat cards. Tells the reviewer at a glance which calendar months
   the cards' deltas compare. */
.monthly-period-banner {
    font-size: 12px;
    color: var(--text-secondary, #5f6368);
    margin: 0 0 8px;
    text-transform: capitalize;
}
.monthly-period-banner .monthly-period-current {
    font-weight: var(--fw-semibold, 600);
    color: var(--text, #1f2937);
}
.monthly-period-banner .monthly-period-vs {
    /* Inherit the muted secondary color so the comparison reads as
       supporting context, not a primary label. */
    color: var(--text-secondary, #5f6368);
}

/* Monthly-report stat cards — render at the top of the chart card,
   one card per headline metric (Investissement / Leads qualifiés /
   CPQL / Leads totaux). Replaces the markdown bullets emitted by
   _format_trends_block when the chart is present. */
.monthly-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 8px;
    margin: 0 0 12px;
}
.monthly-stat-card {
    padding: 10px 12px;
    background: var(--surface-muted, #f8f9fc);
    border: 1px solid var(--border, #e1e4ea);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.monthly-stat-label {
    font-size: 11px;
    color: var(--text-secondary, #5f6368);
    line-height: 1.2;
}
.monthly-stat-value {
    font-size: 18px;
    font-weight: var(--fw-semibold, 600);
    color: var(--text, #1f2937);
    line-height: 1.2;
}
.monthly-stat-delta {
    font-size: 12px;
    font-weight: var(--fw-semibold, 600);
    min-height: 1.2em;  /* keep card heights aligned when delta is absent */
}
.monthly-stat-delta--good    { color: var(--chart-6, #5ecb3c); }
.monthly-stat-delta--bad     { color: var(--chart-3, #e93323); }
.monthly-stat-delta--neutral { color: var(--text-secondary, #5f6368); }
.monthly-stat-delta--flat    { color: var(--text-secondary, #5f6368); }
.monthly-stat-delta--none    { color: transparent; }

/* Legacy horizontal bar chart (still used by other widgets/pages) */
.dash-bar-chart { display: flex; flex-direction: column; gap: 6px; }
.dash-bar-row { display: grid; grid-template-columns: 200px 1fr 1fr; align-items: center; gap: 10px; }
.dash-bar-label { font-size: var(--fs-sm); color: var(--navy-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.dash-bar-clickable { cursor: pointer; }
.dash-bar-clickable:hover { text-decoration: underline; color: var(--teal-500); }
.dash-bar-track {
    flex: 1;
    height: 14px;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    overflow: hidden;
}
.dash-bar-fill {
    height: 100%;
    background: var(--chart-1);                  /* primary series, plotting order #1 */
    border-radius: var(--r-full);
    min-width: 4px;
    transition: width 0.3s var(--ease-out);
}
/* Cost-chart fill uses chart-1 too (single series). Kept as a
   distinct class so a future second-series swap is one-line. */
.dash-bar-cost { background: var(--chart-1); }
.dash-bar-value { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--navy-500); min-width: 24px; text-align: right; }

.badge-inline {
    font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 10px;
    vertical-align: middle; margin-left: 4px;
}
.badge-inline.warning { background: #fef3d0; color: #8a6d00; }

.dash-activity { display: flex; flex-direction: column; gap: 6px; }
.dash-activity-item {
    display: flex; align-items: center; gap: 10px; padding: 6px 0;
    border-bottom: 1px solid var(--border); font-size: 13px;
}
.dash-activity-item:last-child { border-bottom: none; }
.dash-activity-icon { font-size: 11px; flex-shrink: 0; }
.dash-activity-text { flex: 1; color: var(--text); }
.dash-rec-link { color: var(--primary, #3498db); font-weight: 600; font-size: 12px; text-decoration: none; margin-left: 4px; }
.dash-rec-link:hover { text-decoration: underline; }
.dash-activity-time { font-size: 11px; color: var(--text-secondary); white-space: nowrap; }
.dash-queue-idle { font-size: 13px; color: var(--text-secondary); margin: 8px 0 0; }
.dash-queue-summary { font-size: 12px; color: var(--text-secondary); margin: 8px 0 0; }
.dash-completed-label { font-size: 11px; color: var(--text-secondary); text-transform: uppercase; font-weight: 600; margin-top: 12px; margin-bottom: 4px; }
.badge-inline.pending { background: #fdf0d5; color: #8a6d00; }
.badge-inline.review  { background: #dbeafe; color: #1e40af; }
.badge-inline.red     { background: var(--danger-bg); color: var(--danger); }

/* Worker-queue play-failure rows (always-live dead-letter surface) */
.status.red { background: var(--danger-bg); color: var(--danger); }
.dash-failed-label { color: var(--danger); }
.dash-failed-item { align-items: flex-start; }
.dash-job-cust { color: var(--text-secondary); font-size: 12px; }
.dash-failed-err {
    font-family: var(--font-mono, monospace); font-size: 11px;
    color: var(--text-secondary); margin-top: 2px;
    white-space: pre-wrap; word-break: break-word;
}

/* "Plays awaiting action" dashboard card */
.dash-play-list { display: flex; flex-direction: column; }
.dash-play-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 9px 4px; border-bottom: 1px solid var(--border); cursor: pointer;
}
.dash-play-row:last-child { border-bottom: none; }
.dash-play-row:hover { background: var(--surface-2, #f8fafc); }
.dash-play-name { font-size: 13px; font-weight: 600; color: var(--text); }
.dash-play-seg {
    font-size: 10px; font-weight: 600; color: var(--text-muted, #6b7280);
    text-transform: uppercase;
}
.dash-play-counts { display: flex; gap: 6px; flex-shrink: 0; }
.dash-play-counts .badge-inline { margin-left: 0; }

/* ─── Campaigns View ─── */
.campaigns-summary { font-size: 12px; color: var(--text-secondary); padding: 8px 16px; display: flex; gap: 6px; align-items: center; }
.camp-client-card { border: 1px solid var(--border); border-radius: 8px; margin: 8px 16px; overflow: hidden; }
.camp-client-header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--surface); cursor: pointer; font-size: 13px; }
.camp-client-header:hover { background: var(--hover-bg); }
.camp-chevron { font-size: 10px; color: var(--text-secondary); min-width: 12px; }
.camp-client-name { font-weight: 700; color: var(--navy); }
.camp-account-id { font-size: 11px; color: var(--text-secondary); }
.camp-meta { font-size: 11px; color: var(--text-secondary); margin-left: auto; }
.camp-client-body { padding: 0 8px 8px; }
.camp-strategy-group { margin: 6px 0; border-left: 3px solid var(--teal); border-radius: 4px; background: var(--surface); }
.camp-strategy-header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; font-size: 12px; }
.camp-strategy-header:hover { background: var(--hover-bg); }
.camp-strategy-badge { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 10px; text-transform: uppercase; }
.badge-portfolio { background: #e6f0ee; color: var(--teal-dark); }
.badge-budget { background: #fdf0d5; color: #8a6d00; }
.camp-strategy-name { font-weight: 600; color: var(--navy); }
.camp-strategy-info { font-size: 11px; color: var(--text-secondary); margin-left: auto; }
.camp-strategy-body { padding: 0 8px 8px; }
.camp-table { font-size: 12px; table-layout: fixed; width: 100%; }
.camp-table th { font-size: 11px; }
.camp-table th:first-child, .camp-table td:first-child { width: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.camp-col-num { width: 90px; text-align: right; white-space: nowrap; }
.camp-match { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 10px; }
.match-exact { background: #dbeafe; color: #1e40af; }
.match-broad { background: #ffedd5; color: #9a3412; }
.match-phrase { background: #dcfce7; color: #166534; }
.match-pmax { background: #ede9fe; color: #5b21b6; }
.match-dsa { background: #fef3c7; color: #92400e; }
.match-unknown { background: #f3f4f6; color: #6b7280; }
.camp-flag { font-size: 9px; font-weight: 600; padding: 1px 5px; border-radius: 8px; white-space: nowrap; }
.flag-gray { background: #e5e7eb; color: #6b7280; }
.flag-red { background: #fee2e2; color: #991b1b; }

/* (search input styles moved to .level-filter) */

/* ─── TL;DR Bar ─── */
.actions-summary {
    font-size: 13px; color: var(--text-secondary); margin: -4px 0 12px;
}

/* ─── Client Filter & Navigation ─── */
.client-link { cursor: pointer; color: var(--teal-dark); text-decoration: underline; }
.client-link:hover { color: var(--navy); }
.client-filter-badge {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 16px; margin-bottom: 8px; border-radius: 6px;
    background: #e8f0fe; font-size: 13px; color: var(--navy);
}
.client-filter-badge .btn-sm { padding: 2px 10px; font-size: 11px; }

/* Active-filter chips — one removable pill per active rec filter, + Clear all. */
.filter-chips {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    padding: 8px 16px;
}
.filter-chip {
    display: inline-flex; align-items: center; gap: 4px;
    background: #eef3ff; color: #2952cc;
    border: 1px solid #d5e0fb; border-radius: 14px;
    padding: 2px 4px 2px 10px; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.chip-x {
    border: none; background: transparent; cursor: pointer;
    color: inherit; font-size: 15px; line-height: 1; padding: 0 4px; border-radius: 50%;
}
.chip-x:hover { background: rgba(41, 82, 204, 0.14); }
.chip-clear-all {
    border: none; background: transparent; cursor: pointer;
    color: var(--text-muted); font-size: 12px; font-weight: 600; text-decoration: underline;
    padding: 2px 6px;
}
.chip-clear-all:hover { color: var(--navy-500); }
.nav-pos { font-size: 12px; color: var(--text-secondary); font-weight: 600; }

/* Infinite-scroll sentinel — sits below the list; IntersectionObserver
   triggers the next page when it enters the viewport. */
.rec-sentinel {
    height: 24px;
    padding: 12px 0 32px;
    text-align: center;
    font-size: 12px;
    color: var(--text-secondary);
    opacity: 0.7;
}

/* ─── Bulk Action Bar ─── */
.bulk-bar {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 24px; background: var(--navy); color: white;
    font-size: 13px; flex-shrink: 0;
}
.bulk-bar .btn-sm { font-size: 11px; padding: 4px 10px; }

/* ─── Empty State ─── */
.empty-state {
    text-align: center; padding: 60px 24px;
}
.empty-state-icon {
    font-size: 48px; color: var(--teal); margin-bottom: 12px;
}
.empty-state h3 {
    font-size: 18px; color: var(--navy); margin-bottom: 6px;
}
.empty-state p {
    font-size: 14px; color: var(--text-secondary); margin: 0;
}
.empty-state-sub {
    font-size: 12px !important; margin-top: 12px !important;
    color: var(--text-secondary);
}

/* ─── Dialer tab (Twilio softphone) ─────────────────────────────── */
#dialer-shell {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(220px, 320px);
    gap: 32px;
    align-items: start;
    justify-content: center;
    padding: 24px 16px;
}
@media (max-width: 720px) {
    #dialer-shell { grid-template-columns: 1fr; }
    /* Rec detail top bar: on a vertical phone the button row (dashboard links, Review,
       Archive) overflowed off-screen with no way to reach the trailing buttons. Make the
       whole subheader a horizontal-scroll row so every action stays reachable
       (operator, 2026-07-17). Each group keeps its natural width (no shrink). */
    .detail-subheader-single {
        flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
        gap: 8px; scrollbar-width: thin;
    }
    .detail-subheader-single > * { flex: 0 0 auto; }
    /* Narrow header: reclaim space so all nav tabs fit / stay scroll-reachable. */
    #topbar { padding: 0 12px; }
    .topbar-brand { margin-right: 12px; }
    .topbar-wordmark-tag { display: none; }   /* drop "· img média" */
    .topbar-spacer { display: none; }         /* let the nav take the slack + scroll */
    .topbar-me { max-width: 96px; margin-right: 6px; padding-left: 8px; }
    .topbar-tab { padding: 0 11px; }

    /* Page header: keep the title + actions (e.g. the refresh button) on ONE
       row with the actions pinned top-RIGHT, instead of dropping the actions
       full-width below the h1 (refresh was landing bottom-left). Search-bearing
       headers (Clients/Projects) still wrap — their .cl-filter-search is
       flex 1 1 100%, so that group takes its own row while the refresh stays
       right of the title. */
    .page-header { flex-wrap: wrap; padding: 14px 16px; gap: 10px; }
    .page-header-text { flex: 1 1 auto; min-width: 0; }
    .page-header h1 { font-size: 20px; }
    .page-header-actions, .page-header-right {
        flex: 1 1 auto; margin-left: auto; justify-content: flex-end;
        flex-wrap: wrap; gap: 8px;
    }
    .page-header-left { flex: 1 1 100%; }
    .cl-filter-search { flex: 1 1 100%; width: 100%; }

    /* Filter bar horizontal-scroll is now global (see base .tab-bar) so it
       covers landscape phones too; here just tighten padding + input width. */
    .tab-bar { padding: 0 16px; }
    .level-filter input[type="text"] { width: 160px; }

    /* Compact the dashboard stat cards on phones so they don't dominate. */
    .dash-stats { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 6px; }
    .dash-stat-card { padding: 8px 8px; }
    .dash-stat-value { font-size: 19px; }

    /* Dashboards client picker (customer selector): comfortable touch targets,
       full-width search, and let long client names wrap instead of truncating
       to an ellipsis. Narrower columns so 2 fit on a landscape phone. */
    #dash-picker-search { width: 100%; }
    .dash-picker-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
    .dash-client-cell {
        padding: 13px 14px;             /* ≥44px tall touch target */
        white-space: normal;            /* wrap long names, no ellipsis clip */
        overflow: visible;
        text-overflow: clip;
        font-size: var(--fs-base, 14px);
    }

    /* Tables: keep cells on one line and let the container scroll sideways
       instead of clipping columns (GATE was getting cut off). */
    .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .content-area { padding: 14px 16px; }
    .content-area .content-card { overflow-x: auto; }
    .data-table th, .data-table td { white-space: nowrap; }
    /* Pin the last column to the right edge so its BUTTONS stay visible while the
       rest of a wide table scrolls under it — otherwise Generate/Approve sit
       off-screen right and read as "missing" on a phone (#358, the briefs table).

       🔴 OPT-IN, via `pin-actions`. It shipped applying to every .data-table, which
       silently assumed every table ends in buttons. Counted 2026-09-06: 13 do, and
       about 20 end in DATA — so the rule was wrong more often than right, and what
       it produced there was a data column frozen over the table while everything
       scrolled beneath it. Operator hit it twice in two days (Clients "Rpt", then
       the Recommendations "Client" column), which is what prompted the count.

       The two failure modes are not symmetric, and that is why this is opt-in: a
       table that SHOULD pin and doesn't costs a sideways scroll to reach a button,
       while a table that pins a data column looks broken. When you add a table
       whose last column is buttons, add the class. */
    .data-table.pin-actions td:last-child, .data-table.pin-actions th:last-child {
        position: sticky;
        right: 0;
        background: var(--surface);
        box-shadow: -6px 0 6px -5px rgba(15, 23, 42, 0.18);
    }
    .data-table.pin-actions th:last-child { background: var(--surface-subtle, var(--surface)); }

    /* Project detail sub-tabs: scroll on one row rather than wrapping oddly. */
    .acq-subtabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .acq-subtab { flex: 0 0 auto; white-space: nowrap; }
}
@media (max-width: 480px) {
    .topbar-wordmark { display: none; }        /* logo alone remains the home link */
    /* Single column so each client is an easy full-width tap on a phone. */
    .dash-picker-grid { grid-template-columns: 1fr; }
}

#dialer-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#dialer-display {
    display: flex;
    align-items: center;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #d1d5db);
    border-radius: 12px;
    padding: 12px 14px;
}
#dialer-display input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 22px;
    font-weight: 500;
    background: transparent;
    color: var(--text-primary, #1f2937);
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 1px;
}
#dialer-display input[readonly] { color: var(--text-secondary, #6b7280); }

.dialer-status {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    background: var(--bg-subtle, #f9fafb);
    color: var(--text-secondary, #6b7280);
    border: 1px solid var(--border, #e5e7eb);
}
.dialer-status.busy {
    background: #fffbeb; color: #92400e; border-color: #fcd34d;
}
.dialer-status.on_call {
    background: #ecfdf5; color: #065f46; border-color: #6ee7b7;
}
.dialer-status.error {
    background: #fef2f2; color: #991b1b; border-color: #fca5a5;
}

#dialer-keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.dialer-key {
    aspect-ratio: 1.4 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border, #d1d5db);
    background: var(--bg-card, #fff);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.1s, transform 0.05s;
    user-select: none;
}
.dialer-key:hover { background: var(--hover, #f3f4f6); }
.dialer-key:active { transform: scale(0.96); }
.dialer-key-digit {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary, #1f2937);
    font-family: 'JetBrains Mono', monospace;
}
.dialer-key-sub {
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--text-secondary, #6b7280);
    text-transform: uppercase;
    margin-top: 2px;
}

#dialer-actions {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}
#dialer-actions button {
    padding: 12px 8px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.1s, transform 0.05s, opacity 0.1s;
}
#dialer-actions button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
#dialer-actions button:not(:disabled):active { transform: scale(0.97); }

.dialer-action-call {
    background: #059669;  /* green */
    color: #fff;
    border-color: #059669;
}
.dialer-action-call:hover:not(:disabled) {
    background: #047857;
    border-color: #047857;
}
.dialer-action-hangup {
    background: #f3f4f6;
    color: #374151;
    border-color: #d1d5db;
}
.dialer-action-hangup:not(:disabled) {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #991b1b;
}
.dialer-action-mute {
    background: #f3f4f6;
    color: #374151;
    border-color: #d1d5db;
}
.dialer-action-mute.active {
    background: #fde68a;
    border-color: #f59e0b;
    color: #92400e;
}

.dialer-caller-id {
    text-align: center;
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
    margin-top: 4px;
    font-family: 'JetBrains Mono', monospace;
}

/* Recent-calls side panel */
#dialer-side {
    background: var(--bg-subtle, #f9fafb);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    padding: 16px;
    max-height: 540px;
    overflow-y: auto;
}
.dialer-side-title {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary, #6b7280);
}
.dialer-recent-empty {
    margin: 0;
    text-align: center;
    color: var(--text-secondary, #9ca3af);
    font-size: 13px;
    padding: 24px 8px;
}
.dialer-recent-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    margin-bottom: 6px;
}
.dialer-recent-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.dialer-recent-number {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    color: var(--text-primary, #1f2937);
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dialer-recent-time {
    font-size: 11px;
    color: var(--text-secondary, #9ca3af);
    margin-top: 2px;
}
.dialer-recent-redial {
    background: #059669;
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.1s, transform 0.05s;
}
.dialer-recent-redial:hover { background: #047857; }
.dialer-recent-redial:active { transform: scale(0.96); }

/* ─── Acquisition Projects tab (Phase E) ─────────────────────────── */
.acq-subtabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid #e2e8f0;
    margin: 0 0 16px;
    flex-wrap: wrap;
}
.acq-subtab {
    padding: 8px 14px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    color: #64748b;
    font-size: 13px;
}
.acq-subtab.active { color: var(--navy, #0f766e); border-bottom-color: var(--navy, #0f766e); font-weight: 600; }
.acq-subtab:hover { color: #0f172a; }

.sitetree-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 10px 16px;
    background: var(--surface, #fff);
    border-bottom: 1px solid var(--border, #e2e8f0);
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.st-views, .st-controls { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.sitetree-toolbar .info-meta { font-size: 12px; color: var(--text-muted, #64748b); font-weight: 600; }
/* floating zoom control — bottom-right of the standalone tree canvas */
#sitetree-zoom {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--surface, #fff);
    padding: 6px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,.16);
}
#sitetree-zoom .btn-sm { min-width: 38px; }
.st-view-btn.active, .st-scope-btn.active, .st-lang-btn.active {
    background: var(--navy, #0f766e);
    color: #fff;
    border-color: var(--navy, #0f766e);
}
.sitetree-mount {
    position: relative;
    display: flex;
    justify-content: center;
    min-height: 440px;
}
.sitetree-tooltip {
    position: absolute;
    z-index: 20;
    background: #0f172a;
    color: #f8fafc;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 12px;
    pointer-events: none;
    max-width: 320px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

/* New-acquisition-project form (Phase E) — stack label → control vertically. */
.acq-form label {
    display: block;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary, #475569);
}
.acq-form input,
.acq-form select,
.acq-form textarea {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 8px 10px;
    border: 1px solid var(--border, #d6d3d1);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 400;
    box-sizing: border-box;
}
.acq-form small.info-meta {
    display: block;
    margin-top: 4px;
    font-weight: 400;
}
.acq-form .req { color: var(--orange, #d97706); }

/* Build stamp — tiny, unobtrusive, bottom corner. Shows which widget bundle is
   loaded so a stale Zoho/browser cache is obvious. Updated each deploy. */
#build-badge {
    position: fixed;
    bottom: 4px;
    left: 6px;
    z-index: 5;
    font-size: 9px;
    line-height: 1;
    font-family: var(--font-mono, monospace);
    color: var(--text-muted, #94a3b8);
    opacity: 0.45;
    pointer-events: none;
    user-select: none;
    /* Scrolling content used to pass straight under the badge and both became
       unreadable. Since this is how you confirm which bundle is live (i.e. that
       a deploy actually reached the browser), it has to stay legible: an opaque
       chip on the page background, above the content layer. */
    padding: 2px 5px;
    border-radius: 3px;
    background: var(--bg, #f7f6f3);
}

/* Topbar phone (replaces the "Dialer" text tab) — white icon, left of the
   Pusher status dot. */
.topbar-phone {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: var(--r-md, 6px);
    color: #fff;
    line-height: 0;
    transition: background 0.15s;
}
.topbar-phone:hover { background: rgba(255,255,255,0.12); }
.topbar-phone + .topbar-phone { margin-left: 4px; }   /* Dialer → full-screen link */
.topbar-phone svg { display: block; }
/* Full-screen link: touch devices only (the framed check is in JS) — an iPad is
   wider than a phone and wraps the widget in the same Creator chrome, so this keys
   on the pointer, not the width. Desktop Creator has no chrome worth escaping. */
#topbar-fullscreen { display: none; }
@media (pointer: coarse) { #topbar-fullscreen:not(.hidden) { display: flex; } }
/* Standalone session ended (device token expired / revoked): the page is no longer
   usable, so this covers everything rather than letting each call fail one by one. */
#device-session-ended {
    position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center;
    background: var(--brand-gradient); color: #fff; padding: 24px; text-align: center;
}
#device-session-ended > div { max-width: 360px; }
#device-session-ended .dse-logo { font-size: 34px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 12px; }
#device-session-ended .dse-logo sup { font-size: 12px; opacity: 0.7; }
#device-session-ended h2 { font-size: 22px; margin: 0 0 8px; }
#device-session-ended p { font-size: 15px; line-height: 1.5; opacity: .92; margin: 0; }
.dash-help { color: var(--text-secondary); font-size: var(--fs-sm, 13px); margin: 0 0 10px; }

/* ─── Site Tree (Octopus.do-style card sitemap) ─────────────────────── */
.sitetree-legend {
    display: flex; flex-wrap: wrap; gap: 14px;
    margin: 4px 0 10px; padding: 6px 2px;
    font-size: 11px; color: var(--text-secondary, #475569);
}
.st-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.st-legend-item i {
    width: 12px; height: 12px; border-radius: 3px; display: inline-block;
}
.sitetree-mount {
    position: relative;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    background:
        radial-gradient(circle, rgba(100,116,139,0.10) 1px, transparent 1px) 0 0 / 22px 22px,
        var(--surface-subtle, #f8fafc);
    overflow: hidden;
}
.sitetree-mount svg { display: block; }
.sitetree-mount svg:active { cursor: grabbing; }

/* Page card (rendered inside a foreignObject) */
.st-card {
    box-sizing: border-box;
    width: 100%; height: 100%;
    background: #fff;
    border: 1px solid var(--border, #e2e8f0);
    border-top: 3px solid #94a3b8;     /* accent = status/view colour */
    border-radius: 7px;
    padding: 5px 9px;
    box-shadow: 0 1px 3px rgba(15,23,42,0.10);
    cursor: pointer;
    display: flex; flex-direction: column; gap: 3px;
    overflow: hidden;
    transition: box-shadow 0.12s, transform 0.05s;
    font-family: var(--font-sans, sans-serif);
}
.st-card:hover { box-shadow: 0 3px 10px rgba(15,23,42,0.18); transform: translateY(-1px); }
.st-card-title {
    font-size: 12px; font-weight: 600; color: var(--navy, #0f172a);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.st-card-meta { display: flex; gap: 4px; flex-wrap: wrap; }
.st-chip {
    font-size: 9px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.02em;
    background: var(--surface-muted, #eef2f6); color: var(--text-secondary, #475569);
    padding: 1px 5px; border-radius: 999px; line-height: 1.5;
}
.st-chip-muted { opacity: 0.8; }

/* Site Tree — disabled toggle buttons + unclassified chip */
.st-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.st-chip-warn { background: #fef3c7; color: #92400e; }

/* ─── Page editor (right slide-out) ─────────────────────────────────── */
.pe-overlay { position: fixed; inset: 0; background: rgba(15,23,42,0.28); z-index: 60; }
.pe-panel {
    position: fixed; top: 0; right: 0; height: 100%; width: 420px; max-width: 92vw;
    background: #fff; z-index: 61; box-shadow: -6px 0 24px rgba(15,23,42,0.18);
    display: flex; flex-direction: column;
    transform: translateX(100%); transition: transform 0.18s ease;
}
.pe-panel.open { transform: translateX(0); }
.pe-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid var(--border, #e2e8f0);
}
.pe-head h3 { margin: 0; font-size: 15px; color: var(--navy, #0f172a); word-break: break-all; }
.pe-body { flex: 1; overflow-y: auto; padding: 16px 18px; }
.pe-artifacts { margin-top: 18px; border-top: 1px solid var(--border, #e2e8f0); padding-top: 12px; }
.pe-artifacts h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; color: var(--text-secondary, #475569); }
.pe-art {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    padding: 5px 0; font-size: 12px; border-bottom: 1px dashed #eef2f6;
}
.pe-art span { color: var(--text-secondary, #475569); }
.pe-art em { color: #94a3b8; font-style: normal; }

/* ── Conversation tab — per-project agent chat (the control plane) ── */
.acq-conv { display: flex; flex-direction: column; height: calc(100vh - 250px); min-height: 420px; }
.conv-messages { flex: 1; overflow-y: auto; padding: 8px 4px; }
.conv-msg { max-width: 88%; margin: 10px 0; padding: 10px 14px; border-radius: 12px;
    line-height: 1.5; font-size: 14px; }
.conv-user { margin-left: auto; background: var(--teal-dark, #2f6a62); color: #fff; }
.conv-assistant { margin-right: auto; background: var(--tint, #f3eee4);
    color: var(--text, #222); border: 1px solid var(--border, #e6ded2); }
.conv-assistant p:first-child { margin-top: 0; }
.conv-assistant table { font-size: 13px; border-collapse: collapse; margin: 8px 0; }
.conv-assistant th, .conv-assistant td { border: 1px solid var(--border, #e6ded2); padding: 4px 8px; }
.conv-steps { font-size: 12px; opacity: .65; margin-bottom: 6px; }
.conv-steps summary { cursor: pointer; }
.conv-steps code { background: rgba(0,0,0,.07); padding: 1px 5px; border-radius: 4px; }
.conv-confirm { margin-top: 10px; }
.conv-input-row { display: flex; gap: 8px; padding-top: 8px; border-top: 1px solid var(--border, #e6ded2); }
.conv-input { flex: 1; resize: none; padding: 9px 12px; border: 1px solid var(--border, #e6ded2);
    border-radius: 8px; font: inherit; font-size: 14px; }

/* ─── Performance card: period picker + perf table ───────────────────
   Date-range selector for the Clients-detail Performance card. The
   chart/cards themselves reuse the existing .monthly-chart-* styles. */
.perf-period-picker { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.perf-preset { padding: 5px 10px; border: 1px solid var(--border, #e6ded2);
    background: var(--surface, #fff); border-radius: 7px; font: inherit;
    font-size: 13px; cursor: pointer; color: var(--text, #2b2b2b); }
.perf-preset:hover { background: var(--surface-alt, #f6f1e8); }
.perf-preset.active { background: var(--accent, #2b6cb0); color: #fff;
    border-color: var(--accent, #2b6cb0); }
.perf-custom { display: inline-flex; align-items: center; gap: 6px; }
.perf-custom.hidden { display: none; }
.perf-date { padding: 4px 8px; border: 1px solid var(--border, #e6ded2);
    border-radius: 7px; font: inherit; font-size: 13px; }
.perf-custom-sep { color: var(--text-muted, #8a8175); }
.perf-note { margin: 8px 0 0; font-size: 12px; color: var(--text-muted, #8a8175);
    font-style: italic; }
.perf-tables { margin-top: 16px; }
.perf-tables table { width: 100%; }

/* ─── Performance timeline: change-event bubbles (GA4-insights style) ──
   Colored dots per actor on each day that had account modifications,
   anchored to the chart's per-day columns. Overlaid after the chart
   paints (see overlayChangeBubbles in clients.js). */
.perf-event-dots {
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 2px;
    z-index: 3;            /* above the spend/budget overlay svg (z-index 2) */
    cursor: help;
}
.perf-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    border: 1px solid var(--surface, #fff);
    box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.15);
    display: inline-block;
}
.perf-dot--img    { background: #dc2626; }  /* IMG team — red (only actor shown) */
.perf-dot--client { background: #d97706; }  /* client — amber (unused: IMG-only) */
.perf-dot--google { background: #6b7280; }  /* google — slate (unused: IMG-only) */

/* "Changes" entry placed inside the chart's main legend row */
.perf-legend-changes { display: inline-flex; align-items: center; }
.perf-legend-changes .perf-dot--img { margin-right: 6px; cursor: default; }

.perf-events-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--border, #e6ded2);
    font-size: 12px;
    color: var(--text-muted, #8a8175);
}
.perf-events-legend-title { font-weight: 600; color: var(--text, #2b2b2b); }
.perf-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.perf-legend-item .perf-dot { cursor: default; }
.perf-events-legend-note { font-style: italic; margin-left: auto; }

/* ─── Performance: rich hover tooltip (day stats + change bullets) ─────
   Custom floating tooltip replacing the native title on the chart's day
   columns. Position is set in JS (clients.js _showPerfTooltip). */
.perf-tooltip {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    max-width: 280px;
    background: var(--surface, #fff);
    color: var(--text, #2b2b2b);
    border: 1px solid var(--border, #e6ded2);
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);
    padding: 10px 12px;
    font-size: 12.5px;
    line-height: 1.5;
}
.perf-tt-date {
    font-weight: 700;
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border, #e6ded2);
}
.perf-tt-stats { display: flex; flex-direction: column; gap: 2px; }
.perf-tt-stats > div { display: flex; justify-content: space-between; gap: 16px; }
.perf-tt-k { color: var(--text-muted, #8a8175); }
.perf-tt-v { font-weight: 600; }
.perf-tt-changes-title {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px dashed var(--border, #e6ded2);
    font-weight: 700;
    color: #dc2626;            /* matches the red change dot */
    display: flex;
    align-items: center;
    gap: 6px;
}
.perf-tt-changes-title::before {
    content: '';
    width: 7px; height: 7px; border-radius: 50%;
    background: #dc2626; display: inline-block;
}
.perf-tt-list { margin: 4px 0 0; padding-left: 18px; }
.perf-tt-list li { margin: 1px 0; }

/* Fast apply toggle (Recommendations header) */
.fast-apply-toggle {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 600; color: var(--navy-500, #33415a);
    cursor: pointer; user-select: none; white-space: nowrap;
    padding: 3px 8px; border: 1px solid var(--border); border-radius: var(--r-sm, 6px);
}
.fast-apply-toggle input { cursor: pointer; margin: 0; }

/* Fast apply / Auto-advance: obvious ON state so a reviewer can see it's active
   (they default ON — a plain checkbox looked ambiguous and got clicked OFF). */
.fast-apply-toggle:has(input:checked) {
    background: var(--teal, #0f8b8d); color: #fff; border-color: var(--teal, #0f8b8d);
}
.fast-apply-toggle:has(input:checked) input { accent-color: #fff; }

/* AI-QA conversation expander (format: 'expand') */
.cell-expand summary { cursor: pointer; color: var(--accent, #3b7d74); font-size: 12px; }
.cell-expand-pre { white-space: pre-wrap; max-width: 480px; max-height: 320px; overflow-y: auto;
  font-size: 12px; line-height: 1.45; background: rgba(0,0,0,0.04); border-radius: 6px; padding: 8px; }


/* ── Outcomes tab ─────────────────────────────────────────────────────
   Per-play outcome mix: which plays humans accept whole (auto-apply
   readiness). Not a rec list, so it shares none of the table styles. */
.oc-wrap { padding: 4px 2px 24px; }
.oc-intro { color: var(--text-muted); font-size: 13.5px; max-width: 76ch;
            line-height: 1.55; margin: 4px 0 16px; }
.oc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.oc-table th { text-align: right; font-size: 11px; text-transform: uppercase;
               letter-spacing: .05em; color: var(--text-muted); font-weight: 600;
               padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.oc-table th:nth-child(1), .oc-table th:nth-child(2) { text-align: left; }
.oc-table td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.oc-table tbody tr:hover { background: var(--surface-sunken); }
.oc-pie { width: 74px; }
.oc-name { min-width: 240px; }
.oc-name strong { font-weight: 600; }
.oc-sub { display: block; font-size: 11px; color: var(--text-muted); }
/* Tabular figures so the columns line up down the page. */
.oc-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.oc-dim { color: var(--text-muted); }
.oc-flag { display: inline-block; margin-top: 3px; font-size: 10.5px; font-weight: 600;
           padding: 2px 7px; border-radius: 3px; letter-spacing: .02em; }
.oc-ready { background: rgba(46,125,81,.14); color: #2e7d51; }
.oc-near  { background: rgba(201,146,46,.16); color: #8a6a12; }
.oc-h { margin: 26px 0 6px; font-size: 13px; }
.oc-note { color: var(--text-muted); font-size: 12.5px; line-height: 1.6; max-width: 82ch; }
.oc-note li { margin-bottom: 3px; }

/* Category rows nested under a play in the Outcomes tab. Indented and lighter
   so the play row stays the unit you scan, with its checks as detail. */
.oc-cat td { border-bottom: 1px solid var(--border); }
.oc-cat { background: var(--surface-sunken); }
.oc-catname { padding-left: 22px !important; font-size: 12.5px; color: var(--text-muted); }
.oc-cat .oc-num { font-size: 12.5px; color: var(--text-muted); }
.oc-never td { font-size: 12px; color: var(--text-muted); padding-left: 22px !important; }
.oc-noisy { background: rgba(168,68,42,.13); color: #a8442a; margin-left: 8px; }

/* Onboarding — the last partial/failed run outcome kept on the step */
.step-last-result { margin: 6px 0 0; padding: 6px 10px; font-size: 12.5px; border-left: 3px solid #b7791f; background: #fbf3e3; color: #5c3d0c; }
.step-last-result-failed { border-left-color: #b3362b; background: #f8e5e2; color: #6b1f18; }
.step-last-result ul { margin: 2px 0 0 16px; padding: 0; }
/* Column explainers + per-check descriptions in the Outcomes tab. */
.oc-q { display: inline-block; margin-left: 4px; font-size: 9px; opacity: .5;
        border: 1px solid currentColor; border-radius: 50%; width: 11px; height: 11px;
        line-height: 10px; text-align: center; cursor: help; }
.oc-catnote { display: block; font-size: 11.5px; color: var(--text-muted);
              font-weight: 400; margin-top: 2px; max-width: 62ch; line-height: 1.45; }
.oc-legend { margin: 8px 0 0; font-size: 12.5px; line-height: 1.55; }
.oc-legend dt { font-weight: 600; margin-top: 8px; }
.oc-legend dd { margin: 0; color: var(--text-muted); max-width: 84ch; }

/* Outcomes window selector. */
.oc-range { margin: 2px 0 12px; font-size: 12.5px; color: var(--text-muted); }
.oc-rbtn { margin-right: 4px; padding: 3px 10px; font-size: 12px; border-radius: 4px;
           border: 1px solid var(--border); background: var(--surface); cursor: pointer;
           color: inherit; }
.oc-rbtn.active { background: var(--accent, #0e5c63); border-color: var(--accent, #0e5c63);
                  color: #fff; font-weight: 600; }

/* Auto-apply control (Playbooks). Deliberately loud when armed — this one
   writes to live client accounts. */
.aa-btn { padding: 3px 10px; font-size: 11.5px; border-radius: 4px; cursor: pointer;
          border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); }
.aa-btn.aa-on { background: #a8442a; border-color: #a8442a; color: #fff; font-weight: 700;
                letter-spacing: .02em; }
.aa-na { color: var(--text-muted); opacity: .5; }
.pb-aa-cell { white-space: nowrap; }

/* An auto-applied rec in Archived — must never look like "nobody touched it". */
.aa-badge { display: inline-block; padding: 1px 7px; border-radius: 3px; font-size: 11px;
            font-weight: 600; background: rgba(168,68,42,.13); color: #a8442a; }

/* Exact Capture Builder — the indented campaign / ad group / keyword tree.
   Monospace so the indentation actually lines up, and scrollable rather than
   stretching the table: a plan can run to dozens of keywords. */
.cell-pre {
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    line-height: 1.45;
    white-space: pre;
    max-height: 280px;
    overflow: auto;
    background: var(--surface-2, #f6f7f9);
    border: 1px solid var(--border, #e3e6ea);
    border-radius: 4px;
    padding: 6px 8px;
}

/* Exact Capture Builder — the tickable campaign / ad group / keyword tree.
   All boxes render checked; the reviewer only unticks what they don't want. */
.ec-tree { max-height: 320px; overflow: auto; font-size: 12px; line-height: 1.5;
           border: 1px solid var(--border, #e3e6ea); border-radius: 4px; padding: 6px 8px;
           background: var(--surface-2, #f6f7f9); min-width: 26em; }
.ec-ag { margin-bottom: 6px; }
.ec-line { display: flex; align-items: baseline; gap: 6px; cursor: pointer; padding: 1px 0; }
.ec-line:hover { background: var(--surface-3, #eef0f3); }
.ec-line input { margin: 0; flex: none; }
.ec-kw { padding-left: 18px; }
.ec-kw code { font-size: 11px; }
.ec-count { color: var(--text-muted, #6b7280); font-size: 11px; }
.ec-metric { color: var(--text-muted, #6b7280); font-size: 11px; margin-left: auto;
             white-space: nowrap; padding-left: 10px; }
.ec-src { color: #7c3aed; font-size: 10px; text-transform: uppercase;
          letter-spacing: .03em; padding-left: 6px; }


/* ─── Knowledge base card (client file) ─── */
.cl-kb-sec { border-top: 1px solid var(--border); padding: 6px 0; }
.cl-kb-sec:first-of-type { border-top: 0; }
.cl-kb-sec > summary { cursor: pointer; font-weight: 600; font-size: 13px; padding: 4px 0; }
.cl-kb-n { font-weight: 400; font-size: 11px; color: var(--text-secondary); margin-left: 6px; }
.cl-kb-off { font-weight: 400; font-size: 11px; color: var(--text-secondary); }
.cl-kb-dl { margin: 6px 0 4px; font-size: 13px; }
.cl-kb-dl dt { font-weight: 600; margin-top: 8px; }
.cl-kb-dl dd { margin: 2px 0 0 0; white-space: pre-wrap; color: var(--text); }
.cl-kb-raw { white-space: pre-wrap; font-size: 12px; margin: 6px 0; }
/* Categorization examples: one column per category (operator, 2026-09-12). */
.cl-kb-cols { display: grid; gap: 12px; margin: 6px 0 4px; font-size: 13px; }
.cl-kb-col-h { font-weight: 600; padding-bottom: 4px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.cl-kb-col ul { list-style: none; margin: 0; padding: 0; }
.cl-kb-col li { padding: 4px 0; border-bottom: 1px dotted var(--border); white-space: pre-wrap; }
/* Leads hub (all clients) */
.lh-actions { display: flex; align-items: center; gap: 8px; }
.lh-toolbar { display: flex; flex-direction: column; gap: 8px; padding: 10px 0 12px; }
.lh-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lh-chip { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 4px 12px; font-size: 12px; cursor: pointer; color: var(--navy-500); }
.lh-chip.active { background: var(--navy, #1f3a5f); color: #fff; border-color: var(--navy, #1f3a5f); }
.lh-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.lh-select { height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--r-md, 6px); font-size: 13px; color: var(--navy-500); background: var(--surface); cursor: pointer; max-width: 220px; }
.lh-searchrow { display: flex; align-items: center; gap: 12px; }
.lh-search { flex: 1; height: 36px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--r-md, 6px); font-size: 14px; background: var(--surface); }
/* Fixed layout with a floor: below the floor the table scrolls sideways inside
   .table-scroll instead of squeezing the unsized Lead column to nothing (which is
   what hid it on phones — operator, 2026-09-14). Data over mobile: scroll, never drop. */
.lh-table { table-layout: fixed; width: 100%; min-width: 1180px; }
.lh-table .lh-c-lead { min-width: 360px; }
.lh-table th, .lh-table td { vertical-align: top; overflow: hidden; text-overflow: ellipsis; }
.lh-table .lh-c-date { width: 118px; } .lh-table .lh-c-client { width: 150px; } .lh-table .lh-c-num { width: 70px; }
.lh-table .lh-c-chan { width: 68px; } .lh-table .lh-c-src { width: 60px; } .lh-table .lh-c-page { width: 150px; }
.lh-table .lh-c-cat { width: 190px; }
.lh-lead-name { font-weight: 600; }
.lh-reach { font-size: 12px; color: var(--text-secondary); white-space: normal; }
.lh-summary { font-size: 12px; color: var(--text-secondary); white-space: normal; margin-top: 3px; max-height: 2.8em; overflow: hidden; }
.lh-summary.open { max-height: none; }
.lh-more { font-size: 11px; color: var(--navy-500); cursor: pointer; }
.lh-table .lh-c-cat { overflow: visible; white-space: normal; }
.lh-cat { display: inline-block; max-width: 100%; box-sizing: border-box; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; line-height: 1.4; background: #eef1f5; color: #1f3a5f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.lh-cat.qualified, .lh-cat.unanswered-qualified { background: #e3f3ea; color: #176a3b; }
.lh-cat.unqualified, .lh-cat.spam, .lh-cat.employment-inquiry { background: #f7e6e4; color: #8b3a30; }
.lh-cat.unanswered { background: #fbf0dc; color: #7a4d00; }
.lh-cat.follow-up-call { background: #e8eefb; color: #2b4a8a; }
.lh-recat { -webkit-appearance: menulist; appearance: menulist; height: 30px; padding: 0 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; color: var(--navy-500); background: var(--surface); cursor: pointer; box-sizing: border-box; }
.lh-msg { font-size: 12px; }
.lh-today { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 8px; font-size: 10px; background: #fff3cd; color: #7a5600; }
.lh-page { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; font-size: 12px; }
.lh-ai { font-size: 11px; background: #eef1f5; border-radius: 8px; padding: 0 6px; }
.lh-service { font-size: 12px; margin-top: 3px; }
.lh-slabel { font-size: 11px; text-transform: uppercase; letter-spacing: .02em; color: var(--text-secondary); margin-top: 6px; }
.lh-outcome { font-size: 12px; margin-top: 4px; color: #1f3a5f; }
.lh-fields { margin-top: 6px; font-size: 12px; white-space: normal; }
.lh-field { margin: 1px 0; }
.lh-flabel { color: var(--text-secondary); margin-right: 4px; }
.lh-attr .lh-flabel { color: #2b4a8a; }
.lh-actions-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.lh-btn { font-size: 11px; padding: 2px 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); cursor: pointer; color: var(--navy-500); text-decoration: none; }
.lh-panel { display: none; margin-top: 6px; padding: 8px 10px; background: #f7f8fa; border-radius: 6px; font-size: 12px; white-space: normal; }
.lh-panel.open { display: block; }
.lh-arow { margin: 2px 0; } .lh-alabel { color: var(--text-secondary); margin-right: 4px; } .lh-arow ul { margin: 2px 0 2px 16px; padding: 0; }
.lh-tx { margin: 2px 0; } .lh-who { font-weight: 600; } .lh-who.agent { color: #2b4a8a; } .lh-who.cust { color: #176a3b; }
.lh-recat-row { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.lh-recat-row .lh-recat { width: 100%; max-width: none; }
.lh-recat-row .btn-sm { align-self: flex-start; padding: 3px 12px; }
.lh-c-lead { white-space: normal; }
/* Embedded dashboard header: name + copy link (operator, 2026-09-14) */
.mvnav-strip .mvnav-refresh { padding: 0 9px; font-size: 15px; }

/* ─── Meta builder ─── */
.mb-toolbar { display: flex; gap: 8px; align-items: center; padding: 8px 16px; flex-wrap: wrap; }
.mb-note { font-size: 11px; color: var(--text-secondary); margin-left: auto; }
.mb-acct { font-size: 11px; color: var(--text-secondary); padding: 4px 16px 8px; }
.mb-badge { font-size: 10px; padding: 1px 6px; border-radius: 10px; background: var(--hover-bg); color: var(--text-secondary); }
.mb-badge.mb-acquisition { background: #e8f3ee; color: #1d6b4b; }
.mb-badge.mb-awareness { background: #eef1fb; color: #33489b; }
.mb-badge.mb-remarketing { background: #fdeef0; color: #97283a; }
.mb-add { margin-left: 8px; }
.mb-line { font-size: 12px; padding: 3px 12px; color: var(--text-primary); }
.mb-line.mb-muted { color: var(--text-secondary); }
.mb-line.mb-warn { color: #97283a; }
.mb-line.mb-ad { border-left: 3px solid var(--border); margin-left: 12px; }
.mb-defaults { margin: 8px 0; border: 1px dashed var(--border); border-radius: 6px; }
.mb-defaults-head { cursor: pointer; font-size: 12px; padding: 6px 10px; color: var(--text-secondary); }
.mb-field { display: block; font-size: 12px; margin: 8px 0; color: var(--text-secondary); }
.mb-field input, .mb-field select { display: block; width: 100%; margin-top: 3px; padding: 6px; font-size: 13px; }
.mb-check { display: block; font-size: 12px; padding: 2px 12px; }
.mb-results { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 12px; }
.mb-pre { font-size: 10px; max-height: 220px; overflow: auto; background: var(--surface); padding: 6px; }
.mb-modal { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 60; display: flex; align-items: center; justify-content: center; }
.mb-modal-card { background: var(--bg); border-radius: 10px; width: min(560px, 94vw); max-height: 88vh; overflow: auto; }
.mb-modal-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; font-weight: 700; border-bottom: 1px solid var(--border); }
.mb-modal-body { padding: 10px 14px; }
.mb-modal-actions { display: flex; gap: 8px; justify-content: flex-end; padding: 10px 14px; border-top: 1px solid var(--border); }

.mb-gen { border: 1px dashed var(--border); border-radius: 6px; padding: 8px 10px; margin-bottom: 10px; }
.mb-gen textarea { width: 100%; font-size: 13px; padding: 6px; }
.mb-questions { background: var(--surface); border-radius: 6px; padding: 6px 10px; margin: 8px 0; font-size: 12px; }
.mb-draft { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin: 8px 0; }
.mb-draft-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.mb-draft-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.mb-thumbs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.mb-thumb { display: block; width: 86px; text-align: center; font-size: 10px; color: var(--text-secondary); }
.mb-thumb img { width: 86px; height: 86px; object-fit: cover; border-radius: 4px; display: block; }
.mb-badge.mb-draft { background: var(--hover-bg); }
.mb-badge.mb-rendered { background: #eef1fb; color: #33489b; }
.mb-badge.mb-built { background: #e8f3ee; color: #1d6b4b; }
.mb-badge.mb-failed { background: #fdeef0; color: #97283a; }

/* Meta builder: paused rows, structured setup, previews */
.mb-toggle { font-size: 12px; color: var(--text-secondary); display: inline-flex; gap: 4px; align-items: center; }
.camp-client-card.mb-paused, .camp-strategy-group.mb-paused, .mb-ad-row.mb-paused { opacity: .55; }
.camp-client-card.mb-paused .camp-client-header, .camp-strategy-group.mb-paused .camp-strategy-header { padding: 5px 12px; font-size: 12px; }
.mb-badge.mb-paused-badge { background: var(--hover-bg); color: var(--text-secondary); }
/* Advantage+ audience, both states: the agency default is ON, so an ad set
   without it is the thing worth seeing at a glance. */
.mb-badge.mb-adv { background: #e8f3ee; color: #1d6b4b; }
.mb-badge.mb-adv-off { background: var(--hover-bg); color: var(--text-secondary); }
/* The creative's live date, right-aligned inside the name cell so the dates
   form their own column down the ad rows. */
.mb-ad-date { margin-left: auto; padding-left: 8px; color: var(--text-secondary);
              font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mb-facts { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; padding: 6px 12px 8px; font-size: 12px; }
.mb-facts-warn { border-left: 3px solid #97283a; }
.mb-fact { display: contents; }
.mb-fact-k { color: var(--text-secondary); }
.mb-fact-v { color: var(--text-primary); }
.mb-warn-inline { color: #97283a; }
.mb-ad-row { font-size: 12px; }
.mb-ad-name { flex: 1; min-width: 160px; }
.mb-preview { width: 100%; }
.mb-preview-frame { padding: 6px 0; overflow: auto; }
.mb-preview-frame iframe { border: 0; max-width: 100%; }

/* ── the metric grid ──────────────────────────────────────────────────
 * One template for campaign, ad set and ad, so a number sits in the same
 * column at every depth and the tree can be read straight down. The ONLY
 * thing that shifts with depth is the name cell's own left padding —
 * nested containers contribute no horizontal padding (see the resets
 * below), because any would move the numeric columns out of line. */
.mb-row { display: grid; grid-template-columns: minmax(150px, 1fr) repeat(8, minmax(52px, 76px));
          align-items: center; column-gap: 8px; padding: 6px 12px; }
.mb-cell-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mb-cell-name > .camp-client-name, .mb-cell-name > .camp-strategy-name, .mb-cell-name > .mb-ad-name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-cell-num { text-align: right; font-variant-numeric: tabular-nums; font-size: 12px;
               color: var(--text-primary); white-space: nowrap; }
.mb-cell-num.mb-cell-none { color: var(--text-secondary); }
.mb-row-head { margin: 6px 17px 0; padding: 2px 12px; font-size: 9px; text-transform: uppercase;
               letter-spacing: .03em; color: var(--text-secondary); }
.mb-row-head .mb-cell-name, .mb-row-head .mb-cell-num { font-size: 9px; color: var(--text-secondary); }
#mb-tree { overflow-x: auto; }
/* Depth lives here and nowhere else. */
.camp-strategy-header.mb-row .mb-cell-name { padding-left: 14px; }
.mb-ad-line.mb-row .mb-cell-name { padding-left: 28px; }
/* Nested bodies add no horizontal padding, and the ad set's teal rule is an
   inset shadow rather than a border, so neither steals width from the grid. */
#mb-tree .camp-client-body, #mb-tree .camp-strategy-body { padding-left: 0; padding-right: 0; }
#mb-tree .camp-strategy-group { border-left: 0; box-shadow: inset 3px 0 0 var(--teal); }
/* The ad's image, at the start of its row and the handle for the mockup. */
/* The approved-image picker. Selection MUST be visible: a control whose state
   cannot be seen is silently broken, and the operator would not know which
   images the concepts were written against. */
.mb-thumb.mb-pick { cursor: pointer; border: 2px solid transparent; border-radius: 6px; }
.mb-thumb.mb-picked { border-color: var(--teal); }
.mb-standing { padding: 4px 12px; font-size: 12px; }
.mb-link { width: 100%; font: inherit; font-size: 12px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; margin-top: 4px; }
.mb-thumb .btn-sm { display: block; margin: 4px auto 0; font-size: 10px; padding: 1px 6px; }
.mb-standing b { display: block; color: var(--text-secondary); font-size: 11px;
                 text-transform: uppercase; letter-spacing: .03em; }
.mb-ad-thumb-sm { width: 34px; height: 34px; object-fit: cover; border-radius: 4px;
                  flex: 0 0 auto; background: var(--hover-bg); cursor: zoom-in; }
.mb-thumb-none { display: inline-block; }
.mb-hover { position: absolute; z-index: 60; width: 380px; max-height: 80vh; overflow: hidden;
            background: var(--bg, #fff); border: 1px solid var(--border); border-radius: 8px;
            padding: 8px; box-shadow: 0 8px 28px rgba(0,0,0,.18); pointer-events: none; }
.mb-hover iframe { border: 0; max-width: 100%; }
.mb-detail { margin: 4px 8px 6px; border-top: 1px solid var(--border); }
.mb-detail-head { cursor: pointer; font-size: 11px; color: var(--text-secondary); padding: 5px 4px; text-transform: uppercase; letter-spacing: .03em; }
.mb-ad-row { display: block; }
.mb-ad-line { cursor: pointer; }
/* What an opened ad shows, indented to start under its own image so the panel
 * reads as belonging to that ad, and capped so it never runs under the metric
 * columns. There is no second copy of the creative here: the row carries it,
 * and hovering it gives the full mockup. */
.mb-ad-open { padding-left: 60px; max-width: 900px; }
.mb-ad-actions { display: flex; gap: 6px; flex-wrap: wrap; padding: 4px 12px 0; }
.mb-ad-detail-body { padding: 2px 0 6px; }


/* Simplifier — "Shared negative lists served": fixed-width action column so the
   "Apply to all" button (or the reason there is none) never shifts the row. */
.sl-action { width: 190px; min-width: 190px; text-align: right; white-space: nowrap; }
.sl-apply-none { color: var(--muted, #8a8f98); font-size: 12px; }
.sl-apply-btn.added { opacity: .7; }

/* Data sources — repair button: fixed width so the footer never shifts when its label changes */
.na-rewarm { min-width: 190px; }
.na-repair-results { margin-top: 10px; }
.na-repair-label { font-weight: 600; margin-top: 8px; }
.na-fix-ok::marker { content: "\2713  "; color: #2e9e5b; }
.na-fix-fail::marker { content: "\2717  "; color: #d64545; }
.na-fix-na::marker { content: "\2013  "; color: #8a8f98; }

/* ── Tasks tab (phase 1, 2026-09-18) ── */
.tk-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.tk-layout:has(#tk-detail:not(.hidden)) { grid-template-columns: minmax(0, 1fr) minmax(360px, 50%); }
.tk-layout.tk-wide:has(#tk-detail:not(.hidden)) { grid-template-columns: minmax(0, 1fr); }
.tk-layout.tk-wide #tk-table { display: none; }
@media (max-width: 900px) { .tk-layout:has(#tk-detail:not(.hidden)) { grid-template-columns: minmax(0, 1fr); } }
/* Peek (2026-09-21): while a task is open the list keeps title, client, assignee; one line per row */
.tk-short, .tk-layout.tk-peek .tk-full { display: none; }
.tk-layout.tk-peek .tk-short { display: inline; }
.tk-layout.tk-peek .tk-table th:nth-child(7), .tk-layout.tk-peek .tk-table td:nth-child(7),
.tk-layout.tk-peek .tk-table th:nth-child(8), .tk-layout.tk-peek .tk-table td:nth-child(8),
.tk-layout.tk-peek .tk-table th:nth-child(9), .tk-layout.tk-peek .tk-table td:nth-child(9) { display: none; }
.tk-layout.tk-peek .tk-table td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-layout.tk-peek .tk-table td:nth-child(4) { max-width: 260px; }
.tk-layout.tk-peek .tk-table td:nth-child(5) { max-width: 160px; }
.tk-plus { font-size: 12px; }
/* The pane stays in view while the list scrolls; the comment box is pinned at its bottom */
@media (min-width: 901px) {
  #tk-detail:not(.hidden) { position: sticky; top: 0; max-height: calc(100dvh - 150px); overflow: auto; }
}
.tk-composer { position: sticky; bottom: -1px; background: var(--surface, #fff); padding: 8px 0 4px; margin-top: 6px; border-top: 1px solid var(--border, #e3e6ea); z-index: 2; }
.tk-wide-btn { margin-left: auto; }
/* Group headers stay visible while the list scrolls */
.tk-table tr.tk-group td { position: sticky; top: 0; z-index: 1; }
/* Accordions that read as clickable: a filled band, a firmer border, one card style everywhere */
.tk-fold { border: 1px solid #d5dbe1; overflow: hidden; }
.tk-fold > summary { background: var(--surface-2, #f3f6f7); margin: 0 -12px; padding: 8px 12px; }
.tk-fold > summary:hover { background: #e9eef1; }
.tk-fold[open] > summary { border-bottom: 1px solid #e3e6ea; margin-bottom: 8px; }
.tk-fold.tk-checklist .tk-check-bar { margin-top: 2px; }
.tk-fold.tk-checklist .tk-check-add { padding-bottom: 10px; }
.tk-table tr.tk-row { cursor: pointer; }
.tk-table tr.tk-open td { background: var(--surface-2, #f3f6f7); }
.tk-table tr.tk-selected td { background: #eef4ff; }
.tk-table .tk-tick { width: 26px; text-align: center; }
.tk-table .tk-tick input { cursor: pointer; }
.tk-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #2563eb; margin-right: 6px; vertical-align: middle; }
/* Filled gabarit (2026-09-29): was a red dot on EMPTY tasks (2026-09-21), which filled the grid */
.tk-dot-filled { background: #16a34a; }
/* Landing-page CNAMEs (2026-09-29): tracked number + Unbounce page id per CNAME */
.tk-cnames-table td.tk-cname-pid { font-family: ui-monospace, monospace; font-size: 12px; word-break: break-all; }
/* CNAME DNS marks (2026-09-29): hourly scan, ✓ = points to Unbounce */
.tk-dns-ok { color: #16a34a; font-weight: 700; }
.tk-dns-wrong, .tk-dns-missing { color: #b45309; }
.tk-dns-unknown { color: #94a3b8; }
/* Landing-page QA in the job pane (2026-09-30) */
.tk-qa { margin-top: 12px; }
.tk-qa-table .tk-qa-icon { width: 22px; text-align: center; }
.tk-qa-table .tk-qa-last { font-size: 12px; margin-top: 2px; }
/* Priority flag + menu (2026-09-21): a control on every row, not a dot */
.tk-prio { display: inline-flex; align-items: center; gap: 4px; border: 1px solid transparent; border-radius: 6px; background: transparent; padding: 3px 5px; cursor: pointer; font: inherit; font-size: 13px; line-height: 1; color: var(--navy-700, #23303d); }
.tk-prio:hover, .tk-prio:focus-visible { border-color: var(--border, #cbd5e1); background: var(--surface, #fff); }
.tk-prio .tk-flag { display: block; }
.tk-prio-caret { font-size: 10px; color: var(--navy-500); }
.tk-prio-menu { position: fixed; z-index: 60; min-width: 160px; background: var(--surface, #fff); border: 1px solid var(--border, #e3e6ea); border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.14); padding: 4px 0; }
.tk-prio-item { display: flex; align-items: center; gap: 8px; padding: 6px 12px; cursor: pointer; font-size: 13px; }
.tk-prio-item:hover { background: #eef4ff; }
.tk-prio-item.active { font-weight: 600; }
.tk-prio-tick { margin-left: auto; color: #2e9e5b; }
.tk-age { font-variant-numeric: tabular-nums; color: var(--navy-500); white-space: nowrap; }
.tk-age.tk-age-amber { color: #8a6d00; font-weight: 600; }
.tk-age.tk-age-red { color: var(--danger, #b42318); font-weight: 600; }
.tk-waiting { font-size: 12px; color: #8a6d00; margin-top: 2px; }
.tk-subline { font-size: 12px; color: var(--muted, #6b7280); margin-top: 2px; }
.tk-pills { margin-left: 6px; white-space: nowrap; }
.tk-pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 10px; font-weight: 600; letter-spacing: 0.02em; margin-right: 4px; vertical-align: 1px; }
.tk-pill-urgent { background: #b53a2f; color: #fff; }
.tk-pill-low { background: #eef0f4; color: #5d6b85; }
.tk-pill-in_progress { background: #1bbc9b; color: #000; }
.tk-pill-waiting { background: #818c8e; color: #fff; }
/* The people pills sit in the filter row, right of the selects (operator, 2026-09-21: same row as the other tabs' filters) */
.tk-people-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }
.tk-people-strip:empty { display: none; }
.tk-person { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border, #e3e6ea); background: var(--surface, #fff); border-radius: 999px; padding: 3px 10px 3px 12px; font: inherit; font-size: 12px; cursor: pointer; color: var(--navy-700, #23303d); }
.tk-person:hover { background: var(--surface-2, #f3f6f7); }
.tk-person.active { border-color: #2563eb; background: #eef4ff; }
.tk-person-n { background: var(--surface-2, #f3f6f7); border-radius: 999px; padding: 0 7px; font-variant-numeric: tabular-nums; }
.tk-person.active .tk-person-n { background: #2563eb; color: #fff; }
.tk-person-urgent { background: var(--danger-bg, #fde8e6); color: var(--danger, #b42318); border-radius: 999px; padding: 0 6px; font-size: 11px; }
.tk-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; padding: 8px 12px; border: 1px solid #2563eb; background: #eef4ff; border-radius: 6px; }
.tk-waitbox { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 10px; padding: 8px 12px; border: 1px solid #f0d78a; background: #fff8e1; border-radius: 6px; font-size: 13px; }
.tk-waitbox-empty { border-style: dashed; }
.tk-waitbox-reminder { border-color: #b7d3f5; background: #eef5fe; }
.tk-waiting.tk-reminder { color: #1d4ed8; }
.tk-waiting.tk-reminder.tk-followup-due { color: #b91c1c; font-weight: 600; }
.tk-waiton-other { display: inline-flex; align-items: center; gap: 6px; }
.tk-cancelled-link { margin-left: 10px; font-size: 12px; text-decoration: underline dotted; }
.tk-cancelled-link:empty { display: none; }
.tk-more { margin: 10px 0 4px; font-size: 13px; color: var(--muted, #6b7280); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tk-tagbox { margin: 6px 0 10px; padding: 8px 12px; border: 1px solid #f0d78a; background: #fff8e1; border-radius: 6px; font-size: 13px; }
.tk-waitbox input[type=text] { min-width: 180px; height: auto; padding: 5px 10px; }
.tk-table td:nth-child(4) { max-width: 360px; }   /* the Task column: title + state lines only (2026-09-20) */
.tk-detail-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tk-detail-head h3 { margin: 0; flex: 1; }
.tk-controls { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.tk-controls label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--navy-500); }
.tk-body { white-space: pre-wrap; font: inherit; margin: 8px 0; max-height: 50vh; overflow: auto; }
/* An email body is HTML: its source newlines are not line breaks (Outlook puts
   every <div> on its own line, which doubled the spacing under pre-wrap). */
.tk-body-html { white-space: normal; }
.tk-body-html img { max-width: 100%; height: auto; }
.tk-attachments, .tk-events { padding-left: 18px; margin: 4px 0 10px; }
.tk-att-all { margin: -6px 0 10px 18px; font-size: 12px; }
.tk-att-all .tk-check-x { margin-left: 0; padding: 0; }
.tk-events li { margin: 3px 0; }
.tk-events li.tk-comment > div { padding: 6px 10px; margin-top: 3px; background: var(--surface-2, #f3f6f7); border-radius: 6px; white-space: pre-wrap; }
.tk-events li.tk-failed { color: var(--danger, #b42318); }
.tk-commentbox { display: flex; gap: 8px; align-items: flex-start; }
/* Phase 4: the New task dialog + the "from recommendation" line */
.tk-new-dialog { max-width: 640px; width: 95%; }
.tk-new-dialog .compose-label { margin-top: 8px; }
.tk-new-dialog textarea { width: 100%; box-sizing: border-box; }
.tk-new-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.tk-new-row label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--navy-500); }
.tk-new-with { margin-top: 10px; font-size: 12px; line-height: 1.9; }
.tk-new-remind { margin-top: 10px; font-size: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tk-new-remind label { display: inline-flex; align-items: center; gap: 6px; }
.tk-new-remind .cell-muted { flex-basis: 100%; }
.tk-with { white-space: nowrap; margin-right: 6px; }
.tk-from-rec { margin: 4px 0 8px; }
.tk-commentbox textarea { height: auto; padding: 8px 12px; }
/* Tasks v3 (2026-09-20): follow-up (row line + pane box), the comment hint, file attach */
.tk-followup { font-size: 12px; color: #1d4ed8; margin-top: 2px; }
.tk-followup-due { color: #b42318; font-weight: 600; }
.tk-followbox { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 10px; padding: 8px 12px; border: 1px solid #bfd3f7; background: #eef4ff; border-radius: 6px; font-size: 13px; }
.tk-followbox-empty { border-style: dashed; background: transparent; }
.tk-followbox input[type=date] { height: auto; padding: 5px 10px; width: auto; }
/* iOS Safari draws an EMPTY date input with no placeholder text and no intrinsic width, so
   with width:auto / flex sizing the box shrinks to its padding (a sliver next to the label)
   and the phone reads as "no dates or reminders" (operator, 2026-09-25). Give every task
   date input a floor and a visible control, in the new-task dialog, the detail props and the
   Follow up / Waiting boxes alike. */
input[type=date].tk-followdate { min-width: 160px; flex: 0 1 auto; min-height: 32px; box-sizing: border-box; }
.tk-new-remind label { flex: 1 1 auto; }
.tk-new-remind input[type=date].tk-followdate { flex: 1 1 160px; height: auto; padding: 5px 10px; }
.tk-commenthint { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 10px; font-size: 12px; }
.tk-attach { cursor: pointer; padding: 3px 8px; border: 1px dashed var(--border, #cbd5e1); border-radius: 6px; }
.tk-attach input[type=file] { display: none; }
.tk-comment-files { margin-top: 4px; font-size: 12px; }
.tk-job { margin: 12px 0; padding: 10px 12px; border: 1px solid var(--border, #e3e6ea); border-radius: 6px; }
.tk-job h4 { margin: 0 0 6px; }
.tk-people { list-style: none; margin: 0 0 8px; padding: 0; }
.tk-people li { padding: 2px 0; }
.tk-people li.tk-me { font-weight: 600; }
/* Tasks v4 (2026-09-20): pin ★ + drag order, paste/drop files, comment thumbnails */
.tk-table .tk-pin-th, .tk-table .tk-pin-td { width: 22px; padding-left: 0; padding-right: 0; text-align: center; }
.tk-pin { border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 14px; line-height: 1; color: var(--navy-300, #b8c0c8); padding: 2px 4px; }
.tk-pin:hover { color: var(--navy-700, #23303d); }
.tk-pin.tk-pinned { color: #d97706; }
.tk-table tr.tk-row-pinned td { background: #fffbeb; }
.tk-table tr.tk-row-pinned { cursor: grab; }
.tk-table tr.tk-row-pinned-last td { border-bottom: 2px solid #f0d78a; }
.tk-table tr.tk-drop-target td { box-shadow: inset 0 2px 0 #d97706; }
.tk-commentbox textarea.tk-drop-target { border-color: #2563eb; background: #eef4ff; }
.tk-pending-file { display: inline-block; padding: 1px 6px; border: 1px solid var(--border, #e3e6ea); border-radius: 999px; margin: 1px 0; }
.tk-pending-file a { text-decoration: none; color: var(--navy-500); margin-left: 2px; }
.tk-thumb { display: inline-block; margin: 4px 6px 0 0; vertical-align: top; }
.tk-thumb img { max-width: 240px; max-height: 160px; border: 1px solid var(--border, #e3e6ea); border-radius: 6px; display: block; }
/* v4: checklist on the job */
.tk-check-bar { height: 4px; background: var(--surface-2, #f3f6f7); border-radius: 2px; margin: 0 0 8px; overflow: hidden; }
.tk-check-bar > div { height: 100%; background: #2e9e5b; }
.tk-checks { list-style: none; margin: 0 0 8px; padding: 0; }
.tk-check { padding: 3px 0; display: flex; align-items: baseline; gap: 6px; }
.tk-check label { display: inline-flex; align-items: baseline; gap: 6px; cursor: pointer; }
.tk-check input { cursor: pointer; }
.tk-check-done .tk-check-title { text-decoration: line-through; color: var(--navy-500); }
.tk-check-x { text-decoration: none; color: var(--navy-300, #b8c0c8); margin-left: auto; padding: 0 4px; }
.tk-check-x:hover { color: var(--danger, #b42318); }
.tk-check-add { display: flex; gap: 6px; }
.tk-check-add input { flex: 1; height: auto; padding: 5px 10px; }
.tk-check-badge { font-size: 12px; }
.tk-check-badge-done { color: #2e9e5b; }
/* v4: related work on the same client */
.tk-related { margin: 12px 0; padding: 10px 12px; border: 1px solid var(--border, #e3e6ea); border-radius: 6px; }
.tk-related h4 { margin: 0 0 6px; }
.tk-rel-head { font-size: 12px; margin: 6px 0 2px; }
.tk-rel { list-style: none; margin: 0; padding: 0; }
.tk-rel li { padding: 2px 0; }
.tk-rel-closed { color: var(--navy-500); }
.tk-rel-person { display: inline-block; font-size: 12px; padding: 0 6px; border-radius: 999px; background: var(--surface-2, #f3f6f7); }
.tk-rel-person-off { text-decoration: line-through; opacity: .7; }
/* Tasks (2026-09-20): @mention menu under the comment box */
.tk-commentwrap { position: relative; flex: 1; }
.tk-commentwrap textarea { width: 100%; box-sizing: border-box; }
.tk-mention-menu { position: absolute; left: 0; top: 100%; z-index: 20; min-width: 200px; background: var(--surface, #fff); border: 1px solid var(--border, #e3e6ea); border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.12); padding: 4px 0; }
.tk-mention-menu.hidden { display: none; }
.tk-mention-item { padding: 5px 12px; cursor: pointer; font-size: 13px; }
.tk-mention-item.active, .tk-mention-item:hover { background: #eef4ff; }
/* Tasks (2026-09-21): Open list grouped by status; the task pane restructured */
.tk-table tr.tk-group td { background: var(--surface-2, #f3f6f7); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--navy-500); cursor: pointer; padding: 6px 10px; }
.tk-table tr.tk-group:hover td { background: #e9eef1; }
.tk-group-caret { display: inline-block; width: 12px; color: var(--navy-300, #b8c0c8); }
.tk-group-n { background: var(--surface, #fff); border: 1px solid var(--border, #e3e6ea); border-radius: 999px; padding: 0 7px; font-weight: 500; margin-left: 4px; font-variant-numeric: tabular-nums; }
.tk-detail-head h3 { font-size: 17px; line-height: 1.3; }
.tk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 12px; margin: 2px 0 10px; }
.tk-meta-actions { margin-left: auto; }
.tk-props { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px 14px; padding: 10px 12px; margin: 0 0 12px; border: 1px solid var(--border, #e3e6ea); border-radius: 6px; background: var(--surface-2, #f3f6f7); }
.tk-prop { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tk-prop-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--navy-500); }
.tk-prop-value { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tk-prop-value .lh-select, .tk-prop-value .tk-followdate { max-width: 100%; }
.tk-prop-value input[type=date] { height: auto; padding: 5px 8px; width: auto; min-width: 160px; }
.tk-fold { margin: 10px 0; border: 1px solid var(--border, #e3e6ea); border-radius: 6px; padding: 0 12px; }
.tk-fold > summary { cursor: pointer; padding: 8px 0; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 6px; }
.tk-fold > summary::-webkit-details-marker { display: none; }
.tk-fold > summary::before { content: '▸'; color: var(--navy-300, #b8c0c8); width: 12px; }
.tk-fold[open] > summary::before { content: '▾'; }
.tk-fold > summary .tk-fold-n { font-weight: 500; font-size: 12px; color: var(--navy-500); background: var(--surface-2, #f3f6f7); border-radius: 999px; padding: 0 7px; }
.tk-fold > .tk-job, .tk-fold > .tk-related { margin: 0; padding: 0 0 10px; border: 0; }
.tk-fold > .tk-attachments, .tk-fold > .tk-events { margin: 0 0 10px; }
.tk-h-comments { margin: 14px 0 6px; }
.tk-h-comments .tk-fold-n { font-weight: 500; font-size: 12px; color: var(--navy-500); background: var(--surface-2, #f3f6f7); border-radius: 999px; padding: 0 7px; }
.tk-thread { list-style: none; padding: 0; }
.tk-thread li.tk-comment { margin: 0 0 8px; }
.tk-history { margin-top: 14px; }
.tk-history .tk-events { font-size: 12px; }
.tk-brief { margin: 4px 0 12px; }
.tk-brief-title { font-weight: 600; margin: 0 0 4px; }
.tk-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0 4px; }
.tk-sec-title { font-weight: 600; }
.tk-sec-edit { height: 24px; padding: 0 10px; font-size: 11px; }
.tk-desc-wrap .tk-body { margin-top: 0; }
.tk-desc-none { margin: 0 0 8px; font-size: 12px; }
.tk-desc-editor { width: 100%; box-sizing: border-box; font: inherit; padding: 6px 8px; border: 1px solid #cfd6dc; border-radius: 4px; margin: 8px 0 4px; }
.tk-desc-actions { margin: 0 0 8px; }
.tk-brief-form td { padding: 3px 6px; }
.tk-brief-form .tk-bf { width: 100%; box-sizing: border-box; font: inherit; padding: 4px 6px; border: 1px solid #cfd6dc; border-radius: 4px; }
.tk-brief-form select.tk-bf { width: auto; max-width: 100%; }
.tk-bf-multi label { display: inline-block; margin: 0 12px 2px 0; }
.tk-bf-ro { white-space: pre-wrap; }
.tk-req { color: #c0392b; }
.tk-brief-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.tk-brief-table th { text-align: left; font-weight: 500; color: var(--navy-500); padding: 3px 10px 3px 0; width: 38%; vertical-align: top; white-space: nowrap; }
.tk-brief-table td { padding: 3px 0; white-space: pre-wrap; vertical-align: top; }
.tk-brief-off.hidden { display: none; }
.tk-brief-more { font-size: 12px; text-decoration: underline dotted; }

/* Octopus boards in the Site Tree tab (one embed per view) */
.octo-bar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.octo-tab.active { background: var(--accent, #2f7fef); color: #fff; border-color: transparent; }
.octo-link { margin-left: auto; font-size: 12px; }
.octo-frame iframe { width: 100%; height: 72vh; min-height: 480px; border: 1px solid var(--border, #d9dee7); border-radius: 8px; display: block; }

/* ─── Split view (split.js, 2026-09-21) ───
   #mv-split wraps #main-content in a ROW: main on the left, the pinned pane on
   the right. The pane is a plain iframe (a second client dashboard, or this
   widget again with ?pane=1). Hidden under 1100px: no room for two panes. */
#mv-split { flex: 1; min-height: 0; display: flex; flex-direction: row; }
#mv-split > #main-content { flex: 1 1 0; min-width: 0; }
#mv-pane { flex: 0 0 auto; width: 50%; min-width: 360px; max-width: 70%; display: flex; flex-direction: row;
           border-left: 1px solid var(--border); background: var(--surface); }
#mv-pane[hidden] { display: none; }
#mv-pane-handle { flex: 0 0 6px; cursor: col-resize; background: var(--border); }
#mv-pane-handle:hover { background: var(--accent); }
#mv-pane-body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
/* The pane's own strip (b736): a reduced copy of the main strip (it carries
   .mvnav-strip, so nav.js's row/scroll/slot CSS applies), driving the pane only. */
#mv-pane-head { flex: 0 0 auto; padding: 6px 10px; font-size: 13px; }
#mv-pane-head .mvnav-pickwrap { flex: 0 0 200px; width: 200px; }
#mv-pane-head .mv-pane-client { width: 100%; overflow: hidden; text-overflow: ellipsis; text-align: left; font-weight: 600; white-space: nowrap; }
#mv-pane-head .mv-pane-on { background: var(--accent-soft, #e6f4ef); border-color: var(--accent, #0f6b5c); }
#mv-pane-head .mv-pane-close { margin-left: auto; }
#mv-pane-frame { flex: 1 1 0; min-height: 0; width: 100%; border: 0; background: var(--surface); }
/* while the divider is dragged no iframe may take the pointer, or the drag dies at its edge */
body.mv-split-dragging iframe { pointer-events: none; }
body.mv-split-dragging { cursor: col-resize; user-select: none; }
@media (max-width: 1099px) { .mvnav-split { display: none !important; } }
/* the widget loaded AS a pane (?pane=1): no chrome, the parent has it */
body.mv-pane #topbar, body.mv-pane #mvnav-strip, body.mv-pane #build-badge { display: none !important; }

/* "Working…" modal (2026-09-23): a step action in flight is visibly in flight. */
.modal-working-body { display: flex; align-items: center; gap: 12px; }
.modal-working .working-text { flex: 1; }
.modal-working .working-clock { font-variant-numeric: tabular-nums; color: var(--muted, #64748b); font-size: 13px; }
.working-spinner {
    width: 18px; height: 18px; flex: 0 0 18px; border-radius: 50%;
    border: 2px solid rgba(15, 23, 42, 0.15); border-top-color: var(--navy, #0f172a);
    animation: working-spin 0.8s linear infinite;
}
@keyframes working-spin { to { transform: rotate(360deg); } }

/* Proposal list editor on a step (2.3 keywords / 2.4 prompts), 2026-09-23. */
.onb-proposal { margin: 8px 0 12px; padding: 10px 12px; border: 1px solid var(--border, #e2e8f0); border-radius: 8px; background: #f8fafc; }
.onb-proposal-head { font-weight: 600; font-size: 13px; color: var(--navy, #0f172a); margin-bottom: 6px; }
.onb-proposal-src { font-weight: 400; color: var(--muted, #64748b); }
.onb-proposal-list { margin: 0; padding-left: 22px; }
.onb-proposal-item { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.onb-proposal-input { flex: 1; min-width: 0; padding: 5px 8px; border: 1px solid var(--border, #cbd5e1); border-radius: 6px; font: inherit; font-size: 13px; }
.onb-proposal-del { flex: 0 0 auto; padding: 2px 8px; line-height: 1; }
.onb-proposal-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.onb-proposal-hint { font-size: 12px; color: var(--muted, #64748b); }

/* Local SEO onboarding: the two-phase chain panel + the listing chooser (2026-09-24). */
.lso-chain { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--border, #e2e8f0); border-left: 4px solid #94a3b8; border-radius: 8px; background: #f8fafc; font-size: 13px; }
.lso-chain.is-running { border-left-color: #2563eb; background: #eff6ff; }
.lso-chain.is-review { border-left-color: #d97706; background: #fffbeb; }
.lso-chain.is-stopped { border-left-color: #dc2626; background: #fef2f2; }
.lso-chain.is-done { border-left-color: #16a34a; background: #f0fdf4; }
.lso-chain-text { flex: 1 1 320px; min-width: 0; }
.lso-chain-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.lso-spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid #93c5fd; border-top-color: #2563eb; border-radius: 50%; vertical-align: -2px; animation: lso-spin 0.9s linear infinite; }
@keyframes lso-spin { to { transform: rotate(360deg); } }
.lso-chooser, .lso-others { margin: 8px 0 12px; padding: 10px 12px; border: 1px solid var(--border, #e2e8f0); border-radius: 8px; background: #f8fafc; font-size: 13px; }
.lso-choice { display: block; margin: 4px 0 8px; }
.lso-choice-id { color: var(--muted, #64748b); font-size: 12px; }
.lso-choice-warn { color: #b45309; font-size: 12px; }
.lso-other { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0; }
.lso-add { margin: 8px 0 12px; padding: 10px 12px; border: 1px dashed var(--border, #e2e8f0); border-radius: 8px; font-size: 13px; }
.lso-add-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lso-add-q { flex: 1 1 260px; min-width: 200px; padding: 6px 8px; border: 1px solid var(--border, #e2e8f0); border-radius: 6px; font-size: 13px; }
.lso-add-results { margin-top: 6px; }

/* Business Profile editor: widget/gbp-profile.css (shared with the client dashboard since 2026-09-23). */