/* ===== PeakKR · dark-mode-first design system =====
   Modern startup meets mission control. Premium, minimal, intentional.
   Borders over shadows. Navy + slate surfaces, summit-green → teal accents. */
:root {
    --bg:         #f5f6f9;   /* light app background */
    --bg-2:       #eceef3;   /* slightly deeper */
    --surface:    #ffffff;   /* cards & surfaces */
    --surface-2:  #f3f5f8;   /* raised — inputs, hovers */
    --panel:      #ffffff;   /* editable areas (15 rules used var(--panel,#fff) with NO definition — in dark mode that meant white boxes with near-white text: unreadable. Field report from Page Fit.) */
    --ink:        #09132d;   /* primary text (logo navy) */
    --muted:      #4a5470;   /* secondary text — darkened for AA contrast on light bg */
    --line:       rgba(9,19,45,.10);   /* subtle borders */
    --line-2:     rgba(9,19,45,.17);   /* stronger borders */

    --lime:       #faca2c;   /* brand gold */
    --teal:       #ff5a4e;   /* brand coral — primary accent */
    --primary:    #ff5a4e;
    --primary-d:  #e8483d;
    --accent:     #faca2c;
    --grad:       linear-gradient(120deg, #ff5a4e 0%, #faca2c 100%);

    --success:    #16a34a;
    --warning:    #e0890b;
    --danger:     #dc2626;

    /* Grade / score scale — one source of truth for A–F score chips everywhere
       (GBP, AI Visibility, site audit, public client reports). */
    --grade-a: #16a34a; --grade-b: #65a30d; --grade-c: #d97706; --grade-d: #ea580c; --grade-f: #dc2626;

    --radius:     18px;
    --radius-sm:  12px;
    --radius-xs:  8px;    /* chips, small inputs */
    --radius-md:  12px;   /* cards-sm, buttons */
    --radius-lg:  18px;   /* cards, panels */
    --radius-pill: 999px; /* pills, breadcrumb, badges */
    --shadow:     0 1px 2px rgba(9,19,45,.07);
    --shadow-lg:  0 18px 50px rgba(9,19,45,.15);
    --focus-ring: 0 0 0 3px rgba(255,90,78,.22);   /* unified focus halo */

    /* Spacing scale (4px base) — use for new work; existing ad-hoc values still valid */
    --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
    --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;

    --font:       'Inter', system-ui, -apple-system, sans-serif;
    --display:    'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;

    color-scheme: light;
}

/* ===== Dark theme ===== */
html[data-theme="dark"] {
    --bg:         #0b1120;
    --bg-2:       #131d30;
    --surface:    #151f33;
    --surface-2:  #1e2a44;
    --panel:      #1b2740;
    --ink:        #e9eef7;
    --muted:      #98a5bd;
    --line:       rgba(255,255,255,.10);
    --line-2:     rgba(255,255,255,.18);
    --shadow:     0 1px 2px rgba(0,0,0,.5);
    --shadow-lg:  0 20px 50px rgba(0,0,0,.6);
    color-scheme: dark;
}
html[data-theme="dark"] body {
    background:
        radial-gradient(1100px 560px at 100% -8%, rgba(255, 90, 78,.12) 0%, transparent 55%),
        radial-gradient(900px 520px at -8% 0%, rgba(250, 202, 44,.06) 0%, transparent 52%),
        var(--bg);
}
[data-theme="dark"] .topbar { background: var(--surface); border-bottom-color: var(--line);
    box-shadow: 0 1px 0 rgba(255,255,255,.03), 0 8px 24px rgba(0,0,0,.45); }
/* Must out-specify the later `.popover.nav-mega { background:#fff }` rule, or
   the mega-menu renders white-on-white in dark mode. */
[data-theme="dark"] .popover.nav-mega { background: var(--surface);
    box-shadow: 0 26px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08); }
[data-theme="dark"] .popover, [data-theme="dark"] .cmdk-panel { background: var(--surface-2); }
[data-theme="dark"] .topbar .topnav a, [data-theme="dark"] .nav-group > summary { color: #aeb9cd; }
[data-theme="dark"] .topbar .topnav a:hover, [data-theme="dark"] .nav-group > summary:hover { background: rgba(255,255,255,.07); color: #fff; }
[data-theme="dark"] .topbar .topnav a.active, [data-theme="dark"] .nav-group[open] > summary { background: rgba(255,255,255,.10); color: #fff; }
[data-theme="dark"] .btn-ghost { background: rgba(255,255,255,.04); color: var(--ink); }
[data-theme="dark"] .btn-ghost:hover { background: rgba(255,255,255,.09); }
[data-theme="dark"] .org-switcher summary:hover, [data-theme="dark"] .cmdk-trigger:hover { background: rgba(255,255,255,.07); }
[data-theme="dark"] .cmdk-trigger { background: rgba(255,255,255,.05); color: var(--muted);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 3px rgba(0,0,0,.35); }
[data-theme="dark"] .topbar-profile, [data-theme="dark"] .topbar-name { color: var(--ink); }
[data-theme="dark"] .topbar .link-btn { color: var(--muted); }
[data-theme="dark"] .topbar .link-btn:hover { color: #fff; }
[data-theme="dark"] .topbar .bell { color: var(--ink); }
[data-theme="dark"] .topbar .bell:hover { background: rgba(255,255,255,.08); }
[data-theme="dark"] .topbar .bell-badge { box-shadow: 0 0 0 2px var(--surface); }
[data-theme="dark"] .org-switcher summary, [data-theme="dark"] .org-chip-name { color: var(--ink); }
[data-theme="dark"] .org-switcher summary:hover { background: rgba(255,255,255,.08); }
[data-theme="dark"] .nav-mega-item:hover, [data-theme="dark"] .nav-pop-item:hover,
[data-theme="dark"] .ms-row:hover, [data-theme="dark"] .af-reply:hover { background: rgba(255,255,255,.05); }
[data-theme="dark"] .verify-banner { background: #2a2416; border-color: #5a4a1e; color: #f1d188; }
[data-theme="dark"] .brand-icon, [data-theme="dark"] .auth-logo-sm { filter: none; }
[data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: #6f7d96; }
[data-theme="dark"] .tpl-card .pc-banner, [data-theme="dark"] .project-card .pc-banner { opacity: .9; }
/* Dark-mode contrast for the newer coloured chips (audit ranks/scores, workload
   unassigned): dark green/amber text reads poorly on a dark surface — lift it. */
[data-theme="dark"] .sa-pos-good, [data-theme="dark"] .ga-rank-top, [data-theme="dark"] .pub-rank-top,
[data-theme="dark"] .ga-sb-good { color: #4ade80; }
[data-theme="dark"] .sa-pos-warn, [data-theme="dark"] .ga-rank-mid, [data-theme="dark"] .wl-task-unassigned { color: #fbbf24; }
[data-theme="dark"] .sa-pos-far, [data-theme="dark"] .ga-rank-low, [data-theme="dark"] .ga-rank-none,
[data-theme="dark"] .ga-topic { background: rgba(255,255,255,.06); }
[data-theme="dark"] .ga-miss { color: #f87171; }
[data-theme="dark"] .cron-warn { background: rgba(220,38,38,.12); }
[data-theme="dark"] .ms-recurring { background: rgba(240,165,0,.09); }

/* Theme toggle button */
.theme-toggle { background: none; border: none; cursor: pointer; font-size: 1.05rem; line-height: 1;
    padding: 6px 7px; border-radius: 9px; flex: 0 0 auto; }
.theme-toggle:hover { background: rgba(15,25,42,.06); }
[data-theme="dark"] .theme-toggle:hover { background: rgba(255,255,255,.08); }
/* Mobile search: opens the command palette where the "Jump to…" pill is hidden. */
.topbar-search-btn { display: none; background: none; border: none; cursor: pointer; color: var(--muted);
    padding: 6px 8px; border-radius: 9px; flex: 0 0 auto; align-items: center; justify-content: center; font-size: 1.05rem; line-height: 1; }
.topbar-search-btn:hover { background: rgba(15,25,42,.06); color: var(--ink); }
[data-theme="dark"] .topbar-search-btn:hover { background: rgba(255,255,255,.08); }
@media (max-width: 960px) { .topbar-search-btn { display: inline-flex; } }
.theme-sun { display: none; } .theme-moon { display: inline; }
[data-theme="dark"] .theme-sun { display: inline; } [data-theme="dark"] .theme-moon { display: none; }

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

body {
    font-family: var(--font);
    color: var(--ink);
    background:
        radial-gradient(1100px 560px at 100% -8%, rgba(255, 90, 78,.10) 0%, transparent 55%),
        radial-gradient(900px 520px at -8% 0%, rgba(250, 202, 44,.07) 0%, transparent 52%),
        var(--bg);
    background-attachment: fixed;
    min-height: 100vh;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-d); text-decoration: none; }

h1, h2, h3 { line-height: 1.2; letter-spacing: -0.02em; font-family: var(--display); }
.display { font-family: var(--display); font-weight: 700; font-size: clamp(1.8rem, 4vw, 2.5rem); letter-spacing: -0.03em; }
.muted { color: var(--muted); }
.small { font-size: .82rem; }
.lead  { font-size: 1.08rem; color: var(--muted); }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 700;
    background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

::selection { background: rgba(255, 90, 78,.28); }

/* Subtle global scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; }

/* ===== Top bar ===== */
.topbar {
    position: sticky; top: var(--timer-strip-h, 0px); z-index: 120; isolation: isolate;
    background: #ffffff;
    border-bottom: 1px solid var(--line);
}
.topbar-inner {
    /* Full-width bar: the nav hugs the brand on the left, search + actions pin
       right. (The old centered 1140px column made the wider nav overflow and
       shove everything toward the right edge on big monitors.) */
    max-width: none; margin: 0; padding: 0 20px;
    height: 64px; display: flex; align-items: center; gap: 18px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand-mark { font-size: 1.5rem; }
.brand-name { font-family: var(--display); font-size: 1.25rem; }
.brand-logo { height: 28px; width: auto; display: block; }
/* Auto margins on both the nav and the user cluster split the leftover width
   evenly, so wide monitors get a balanced, centered nav instead of one big
   dead gap between the last menu and "+ New". */
.topnav { display: flex; gap: 1px; margin-left: auto; }
.nav-mobile-foot { display: none; }
.topnav a {
    color: var(--muted); font-weight: 500; font-size: .88rem;
    padding: 8px 11px; border-radius: 10px; transition: .15s;
    white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
}
.topnav a:hover { background: rgba(15,25,42,.06); color: var(--ink); text-decoration: none; }
.topnav a.active { background: rgba(15,25,42,.07); color: var(--ink); }
/* Icons only show on wide screens; labels never wrap. */
@media (max-width: 1180px) { .topnav > .nav-link .icon, .nav-group > summary .icon { display: none; } }
/* Small laptops (or 1280 screens at 125% OS scaling): the seven nav items +
   the user cluster were ~87px wider than the viewport, so EVERY page scrolled
   sideways. Tighten the chrome before hiding anything. */
@media (max-width: 1200px) {
    .topbar-inner { padding: 0 10px; gap: 6px; }
    .topnav a, .nav-group > summary { padding: 8px 5px; font-size: .83rem; }
    .topnav a, .nav-group > summary { gap: 4px; }
    .topbar-user { gap: 6px; }
}
.topbar-user { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.topbar-user .link-btn { white-space: nowrap; flex-shrink: 0; }
.topbar-name { font-weight: 600; font-size: .88rem; white-space: nowrap; }
@media (max-width: 1240px) { .topbar-name { display: none; } }
@media (max-width: 680px) { .topnav .nav-link:first-child { display: none; } }

/* ===== Grouped nav dropdowns ===== */
.nav-group { position: relative; }
.nav-group > summary {
    list-style: none; cursor: pointer; color: var(--muted); font-weight: 500; font-size: .88rem;
    padding: 8px 11px; border-radius: 10px; transition: .15s; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 6px;
}
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary:hover { background: rgba(15,25,42,.06); color: var(--ink); }
.nav-group > summary.active { color: var(--ink); }
.nav-group > summary.active .icon { color: var(--teal); opacity: 1; }
.nav-group[open] > summary { background: rgba(15,25,42,.06); color: var(--ink); }
.nav-group[open] > summary .org-caret { transform: rotate(180deg); }
.nav-group .org-caret { transition: transform .15s; }
.popover.nav-pop { left: 0; right: auto; top: 42px; width: 210px; padding: 8px; }

/* Mega menu panel */
.nav-group { position: relative; z-index: 0; }
.nav-group[open] { z-index: 140; }
/* Closed menus must not exist for layout. Newer Chromium hides closed
   <details> content with content-visibility rather than display:none, so the
   660px absolutely-positioned panel still stretched scrollWidth — every page
   scrolled sideways by ~87px on small laptops with the menus CLOSED. */
.nav-group:not([open]) > .popover { display: none; }
.popover.nav-mega { width: 320px; padding: 10px; z-index: 140; background: #ffffff; opacity: 1;
    box-shadow: 0 26px 60px rgba(8,19,32,.30), 0 0 0 1px rgba(9,19,45,.10); }
/* A small invisible bridge so the gap between the tab and panel doesn't show
   page content through (and keeps hover open). */
.nav-mega::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; background: transparent; }
.nav-mega-head { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
    color: var(--muted); padding: 6px 10px 8px; }
/* white-space: normal beats the .topnav a nowrap these links inherit — with
   three columns the descriptions must wrap, or they run over the panel edge. */
.topnav .nav-mega-item, .nav-mega-item { display: flex; align-items: flex-start; gap: 12px; padding: 9px 10px; border-radius: 11px; color: var(--ink); white-space: normal; }
.nav-mega-item:hover { background: rgba(9,19,45,.05); text-decoration: none; }
.nav-mega-ic { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto; border-radius: 10px;
    background: linear-gradient(135deg, rgba(255,90,78,.14), rgba(250,202,44,.12)); color: var(--primary); }
.nav-mega-item:hover .nav-mega-ic { background: var(--grad); color: #fff; }
.nav-mega-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nav-mega-text strong { font-size: .92rem; font-weight: 600; }
/* One line per description — condensed, scannable; the wordiest labels were
   trimmed to fit, stragglers ellipsize (full text in the title tooltip). */
.nav-mega-desc { font-size: .76rem; color: var(--muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.nav-mega-item.current .nav-mega-ic { background: var(--grad); color: #fff; }
.nav-mega-item.current strong { color: var(--teal); }
/* Sectioned (mega) menus: labelled columns side by side. */
.popover.nav-mega-wide { width: 660px; max-width: calc(100vw - 24px); }
.nav-mega-cols { display: flex; gap: 14px; align-items: flex-start; }
.nav-mega-col { flex: 1 1 0; min-width: 0; }
.nav-mega-wide .nav-mega-col + .nav-mega-col { border-left: 1px solid var(--line); padding-left: 14px; }
.nav-mega-colh { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 4px 10px 6px; }
/* Keep long descriptions inside their column instead of bleeding into the next. */
.nav-mega-desc { overflow-wrap: anywhere; }
@media (max-width: 700px) { .popover.nav-mega, .popover.nav-mega-wide { width: auto; } .nav-mega-cols { flex-direction: column; gap: 4px; } .nav-mega-wide .nav-mega-col + .nav-mega-col { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 4px; margin-top: 4px; } }
@media (max-width: 560px) { .popover.nav-mega { width: auto; } }
.nav-pop-item {
    display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 9px;
    color: var(--ink); font-size: .9rem; font-weight: 500;
}
.nav-pop-item:hover { background: rgba(9, 19, 45, .06); text-decoration: none; }
.nav-pop-item .icon { color: var(--muted); opacity: .9; }
.nav-pop-item.current { color: var(--teal); font-weight: 600; }
.nav-pop-item.current .icon { color: var(--teal); opacity: 1; }

/* ===== Avatars ===== */
.avatar {
    --s: 38px;
    width: var(--s); height: var(--s); border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: calc(var(--s) * .38);
    flex: 0 0 auto; box-shadow: inset 0 0 0 1.5px rgba(9, 19, 45, .18);
}
.avatar.sm { --s: 30px; }
.avatar.xs { --s: 22px; }
.avatar.lg { --s: 72px; }

/* ===== Buttons ===== */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--font); font-weight: 600; font-size: .92rem;
    padding: 10px 18px; border-radius: 12px; border: 1px solid transparent;
    cursor: pointer; transition: transform .08s ease, filter .15s, background .15s, border-color .15s;
    white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); color: #fff; font-weight: 700;
    box-shadow: 0 4px 14px rgba(255, 90, 78,.22); }
.btn-primary:hover { background: var(--primary-d); color: #fff; }
.btn-ghost { background: rgba(9, 19, 45, .02); color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { background: rgba(9, 19, 45, .06); }
.btn-sm { padding: 7px 13px; font-size: .84rem; border-radius: 10px; }
.btn-block { width: 100%; }
.link-btn { background: none; border: none; color: var(--muted); cursor: pointer; font: inherit; font-size: .9rem; padding: 0; }
.link-btn:hover { color: var(--ink); text-decoration: underline; }
.link-btn.danger { color: var(--danger); }
form.inline { display: inline; }

/* ===== Layout ===== */
.page { max-width: 1140px; margin: 0 auto; padding: 38px 24px 72px; }
.narrow { max-width: 720px; margin: 0 auto; }
.card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow);
}
.footer { text-align: center; color: var(--muted); font-size: .82rem; padding: 36px; }
/* Generic data table (was defined only inside the vault view; promoted so other
   pages — e.g. the Content Writer drafts list — get the same padded, full-width look). */
.ga-tablewrap { padding: 0; overflow: hidden; }
.ga-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.ga-table th { text-align: left; padding: 13px 18px; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-bottom: 1px solid var(--line); }
.ga-table td { padding: 13px 18px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ga-table tr:last-child td { border-bottom: 0; }
.ga-name { font-weight: 600; color: var(--ink); text-decoration: none; }
.ga-name:hover { text-decoration: underline; }
/* Content Writer cards — the base .card has no padding, so bare ones need it. */
.cw-card { padding: 20px 22px; }
.cw-card > *:first-child { margin-top: 0; }
#cw-proj-input.cw-proj-matched { border-color: rgba(47,158,68,.55); box-shadow: 0 0 0 2px rgba(47,158,68,.12); }

/* ===== Flash → toast: fixed top-right, slides in, auto-dismisses (errors stay) ===== */
.flash {
    position: fixed; top: 72px; right: 16px; z-index: 420;
    max-width: 440px; min-width: 240px; padding: 13px 16px;
    border-radius: 13px; font-weight: 600; font-size: .9rem; line-height: 1.45;
    display: flex; align-items: flex-start; gap: 12px;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--line); border-left-width: 4px;
    box-shadow: 0 14px 38px -14px rgba(9,19,45,.45);
    animation: flash-in .28s cubic-bezier(.2, .9, .3, 1.15);
    overflow: hidden;
}
[data-theme="dark"] .flash { box-shadow: 0 14px 38px -12px rgba(0,0,0,.7); }
.flash > span { flex: 1; }
.flash-x { flex: none; background: none; border: none; color: var(--muted); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 2px; }
.flash-x:hover { color: var(--ink); }
.flash.is-hiding { animation: flash-out .28s ease forwards; }
/* Countdown bar mirrors the auto-dismiss; hover pauses it (and the JS timer). */
.flash::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
    background: currentColor; opacity: .22; transform-origin: left;
    animation: flash-count 6s linear forwards; }
.flash:hover::after { animation-play-state: paused; }
.flash-error::after { display: none; }  /* errors persist until dismissed */
@keyframes flash-count { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes flash-in  { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes flash-out { to { opacity: 0; transform: translateX(24px); } }
@media (max-width: 560px) { .flash { left: 12px; right: 12px; max-width: none; top: auto; bottom: 14px; } }
.flash-success { border-left-color: #16a34a; }
.flash-success::after { color: #16a34a; opacity: .5; }
.flash-error   { border-left-color: #dc2626; }
.flash-warning { border-left-color: #d97706; }
.inline-flash  { margin: 0 0 16px; }

/* Inbound-email log table */
.il-card { padding: 0; overflow-x: auto; }
.il-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.il-table th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.il-table td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.il-table tbody tr { transition: background .12s; }
.il-table tbody tr:hover td { background: var(--surface-2); }
.il-table tr:last-child td { border-bottom: none; }
.il-when { white-space: nowrap; }
.il-addr { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; word-break: break-all; }
.il-detail { max-width: 420px; }
.il-badge { display: inline-block; font-size: .7rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }

/* Disabled buttons + inline spinner for async actions */
.btn:disabled, .btn[disabled] { opacity: .6; cursor: not-allowed; box-shadow: none; }
.btn-primary:disabled, .btn-primary[disabled] { background: var(--muted); }
.spinner { display: inline-block; width: 13px; height: 13px; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -2px; margin-right: 7px; }
.btn-ghost .spinner, .btn-ghost.btn-sm .spinner { border-color: rgba(9,19,45,.2); border-top-color: var(--ink); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .flash, .flash.is-hiding { animation: none; } .spinner { animation-duration: 1.6s; } }

/* ===== Hero / dashboard ===== */
.hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 34px; flex-wrap: wrap; }
/* Daily agenda */
.agenda-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 26px; align-items: start; }
@media (max-width: 860px) { .agenda-grid { grid-template-columns: 1fr; } }

/* Combined Agenda + Today tabs */
.ag-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin: 4px 0 20px; }
.ag-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: none; border: none;
    border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; font-size: .95rem; font-weight: 600;
    color: var(--muted); }
.ag-tab:hover { color: var(--ink); }
.ag-tab.active { color: var(--ink); border-bottom-color: var(--brand, #ff5a4e); }
.ag-tab-n { font-size: .72rem; font-weight: 800; min-width: 20px; text-align: center; padding: 1px 7px;
    border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.ag-tab.active .ag-tab-n { background: var(--brand, #ff5a4e); color: #fff; }
.rb-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.rb-toolbar .rb-filter { margin: 0; }
.agenda-list { display: grid; gap: 8px; }
.agenda-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px; }
.agenda-item-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.agenda-item-title { font-weight: 600; color: var(--ink); }
.agenda-item-side { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.agenda-est { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; color: var(--ink);
    background: var(--surface-2); border: 1px solid var(--line); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.agenda-est-avg { color: var(--muted); font-weight: 500; }
.agenda-est-none { color: var(--muted); font-weight: 500; }
.agenda-total { margin-top: 10px; }
.agenda-add { margin-top: 22px; }
.agenda-add-h { font-size: 1rem; margin: 0 0 10px; }
.agenda-add-search { display: flex; align-items: center; gap: 8px; max-width: 320px; margin-bottom: 14px;
    background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 12px; color: var(--muted); }
.agenda-add-search input { flex: 1; border: none; background: none; outline: none; font-size: .92rem; color: var(--ink); }
.agenda-add-search:focus-within { border-color: var(--teal); }

/* Date-bucketed task boxes (tap to add to your day) */
.agenda-boxes { display: flex; flex-direction: column; gap: 18px; }
.agenda-bucket-h { display: flex; align-items: center; gap: 8px; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em;
    font-weight: 800; color: var(--muted); margin: 0 0 10px; }
.agenda-bucket-h.is-over { color: var(--danger); }
.agenda-bucket-h.is-today { color: var(--teal); }
.agenda-bucket-n { background: var(--surface-2); color: var(--muted); border-radius: 999px; padding: 1px 8px; font-size: .72rem; }
.agenda-box-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.agenda-box { text-align: left; cursor: pointer; appearance: none; -webkit-appearance: none; color: var(--ink); display: flex; flex-direction: column; gap: 6px; min-width: 0;
    background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent, var(--line-2)); border-radius: 11px;
    padding: 11px 13px; transition: transform .12s, box-shadow .12s, border-color .12s; }
.agenda-box:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(9,19,45,.10); }
.agenda-box-date { align-self: flex-start; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
    color: var(--muted); background: var(--surface-2); border-radius: 6px; padding: 2px 8px; }
.agenda-box-date.is-over { color: #fff; background: var(--danger); }
.agenda-box-title { font-size: .9rem; font-weight: 600; color: var(--ink); line-height: 1.35; }
.agenda-box-proj { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; color: var(--muted); }
.agenda-box-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.agenda-options { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; max-height: 320px; overflow-y: auto;
    background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; }
.agenda-option { display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; cursor: pointer;
    background: none; border: none; border-radius: 9px; padding: 9px 12px; }
.agenda-option:hover, .agenda-option:focus-visible { background: var(--surface-2); outline: none; }
.agenda-option-name { font-weight: 600; color: var(--ink); font-size: .92rem; }
.agenda-option-side { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.agenda-option-proj { font-size: .76rem; color: var(--muted); }
.agenda-option-due { font-size: .74rem; font-weight: 700; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.agenda-option-due.is-overdue { color: var(--danger); }
.agenda-options-empty { color: var(--muted); font-size: .86rem; padding: 12px; margin: 0; text-align: center; }
.agenda-person { padding: 14px 16px; margin-bottom: 10px; }
.agenda-person-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.agenda-person-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.agenda-person-list li { display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.agenda-person-list li.done a { text-decoration: line-through; color: var(--muted); }
.agenda-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }

/* Client emails + AI task suggestions */
.ib-addrs { display: flex; flex-wrap: wrap; gap: 10px 28px; padding: 14px 16px; margin-bottom: 16px; }
.ib-addr { display: flex; flex-direction: column; gap: 3px; }
.ib-addr-l { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.ib-addr-v { font-size: .92rem; font-weight: 600; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); padding: 5px 10px; border-radius: 8px; cursor: pointer; }
.ib-addr-v:hover { border-color: var(--primary); }
.ib-setup-note { margin-bottom: 16px; }
.ib-steps { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--primary); color: #fff; font-size: .68rem; font-weight: 800; }
.sugg-block { background: rgba(250,202,44,.07); border: 1px solid rgba(250,202,44,.22); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 18px; }
.sugg-title { font-size: .95rem; margin-bottom: 10px; }
.sugg-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid rgba(250,202,44,.18); }
.sugg-row:first-of-type { border-top: none; }
.sugg-text { flex: 1 1 auto; font-size: .92rem; }
.sugg-actions { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.email-threads { display: grid; gap: 10px; }
.email-thread > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; padding: 14px 16px; }
.email-thread > summary::-webkit-details-marker { display: none; }
.email-thread-subj { font-weight: 700; }
.email-msgs { padding: 0 16px 14px; display: grid; gap: 12px; }
.email-msg { border-top: 1px solid var(--line); padding-top: 12px; }
.email-msg-from { margin: 0 0 4px; }
.email-msg-body { font-size: .92rem; color: var(--ink); white-space: normal; }

/* Gmail-style email threads */
.gmail { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); box-shadow: 0 1px 2px rgba(9,19,45,.03); }
.gm-inbox-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 16px;
    background: var(--surface-2); border-bottom: 1px solid var(--line); }
.gm-inbox-title { font-weight: 700; font-size: .92rem; display: inline-flex; align-items: center; gap: 8px; }
.gm-inbox-count { font-size: .8rem; color: var(--muted); }
.gm-thread { border-bottom: 1px solid var(--line); }
.gm-thread:last-child { border-bottom: none; }
/* One dense inbox row: avatar · sender · subject — snippet · meta */
.gm-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; cursor: pointer; list-style: none; }
.gm-row::-webkit-details-marker { display: none; }
.gm-row:hover { background: var(--surface-2); }
.gm-thread[open] .gm-row { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--primary); }
.gm-av { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-size: .78rem; font-weight: 700; }
.gm-av-sm { width: 30px; height: 30px; font-size: .72rem; }
.gm-from { flex: 0 0 168px; max-width: 168px; font-weight: 600; color: var(--ink); font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-n { font-size: .7rem; color: #fff; background: var(--muted); border-radius: 999px; padding: 0 6px; font-weight: 700; vertical-align: middle; }
.gm-body { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .9rem; }
.gm-subj { color: var(--ink); font-weight: 600; }
.gm-snip { color: var(--muted); font-weight: 400; }
.gm-meta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; }
.gm-time { font-size: .76rem; color: var(--muted); white-space: nowrap; }
.gm-flag { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 700; color: #15803d; background: rgba(74,222,128,.14); border-radius: 999px; padding: 2px 8px; }
.gm-convo { padding: 4px 16px 16px; background: var(--surface); }
@media (max-width: 600px) { .gm-from { flex-basis: 100px; max-width: 100px; } .gm-snip { display: none; } }
.gm-analyze { display: flex; flex-direction: column; gap: 10px; padding: 12px 0 4px; }
.gm-summary { padding: 11px 13px; background: rgba(111,124,242,.07); border: 1px solid rgba(111,124,242,.22); border-radius: 12px; }
.gm-summary-l { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #4f46e5; }
.gm-summary p { margin: 4px 0 0; font-size: .9rem; line-height: 1.55; color: var(--ink); }
.gm-tasks { margin: 6px 0; padding: 10px 12px; background: rgba(74,222,128,.06); border: 1px solid rgba(74,222,128,.22); border-radius: 12px; }
.gm-tasks-h { font-size: .78rem; font-weight: 700; color: var(--ink); margin: 0 0 6px; }
.gm-task { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 8px; }
.gm-task:hover { background: rgba(9,19,45,.03); text-decoration: none; }
.gm-task-text { font-size: .88rem; color: var(--ink); font-weight: 500; }
.gm-task-meta { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.gm-msg { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.gm-msg:first-child { border-top: none; }
.gm-msg-b { flex: 1 1 auto; min-width: 0; }
.gm-msg-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 4px; flex-wrap: wrap; }
.gm-msg-text { font-size: .9rem; line-height: 1.55; color: var(--ink); white-space: normal; word-break: break-word; }

/* Cross-client stage board */
.stage-legend { display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 14px; }
.stage-legend span { display: inline-flex; align-items: center; gap: 6px; }
.stage-dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.stage-dot.st-done { background: #22c55e; } .stage-dot.st-doing { background: #f5b50a; }
.stage-dot.st-todo { background: var(--line-2); } .stage-dot.st-na { background: transparent; border: 1px dashed var(--line-2); }
/* Scroll affordance: edge shadows appear when there's more table off-screen. */
.stage-scroll { position: relative; }
.stage-scroll::before, .stage-scroll::after { content: ''; position: absolute; top: 0; bottom: 0; width: 28px; pointer-events: none; z-index: 3; opacity: 0; transition: opacity .15s; border-radius: var(--radius); }
.stage-scroll::before { left: 0; background: linear-gradient(90deg, rgba(9,19,45,.10), transparent); }
.stage-scroll::after { right: 0; background: linear-gradient(270deg, rgba(9,19,45,.10), transparent); }
.stage-scroll.can-left::before { opacity: 1; }
.stage-scroll.can-right::after { opacity: 1; }
.stage-wrap { padding: 0; overflow-x: auto; scrollbar-width: thin; }
.stage-wrap::-webkit-scrollbar { height: 10px; }
.stage-wrap::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; }
.stage-sort { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font: inherit; color: inherit;
    text-transform: inherit; letter-spacing: inherit; font-weight: inherit; white-space: nowrap; }
.stage-sort:hover { color: var(--ink); }
.stage-caret { width: 9px; height: 9px; opacity: .35; background-repeat: no-repeat; background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='3'%3E%3Cpath d='M8 9l4-4 4 4M8 15l4 4 4-4'/%3E%3C/svg%3E"); }
.stage-sort[data-active] { color: var(--ink); }
.stage-sort[data-active] .stage-caret { opacity: 1; }
.stage-sort[data-active][data-dir="asc"] .stage-caret { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff5a4e' stroke-width='3'%3E%3Cpath d='M6 14l6-6 6 6'/%3E%3C/svg%3E"); }
.stage-sort[data-active][data-dir="desc"] .stage-caret { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff5a4e' stroke-width='3'%3E%3Cpath d='M6 10l6 6 6-6'/%3E%3C/svg%3E"); }
.stage-table { border-collapse: collapse; width: 100%; font-size: .86rem; }
.stage-table th, .stage-table td { border-bottom: 1px solid var(--line); padding: 10px 12px; text-align: center; white-space: nowrap; }
.stage-table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; position: sticky; top: 0; background: var(--surface); z-index: 1; }
.stage-table tbody tr:last-child th, .stage-table tbody tr:last-child td { border-bottom: none; }
.stage-table tbody tr:hover td, .stage-table tbody tr:hover th { background: var(--surface-2); }
.stage-client-h, .stage-client { text-align: left; position: sticky; left: 0; background: var(--surface); z-index: 2; min-width: 180px; }
.stage-table tbody tr:hover .stage-client { background: var(--surface-2); }
.stage-client-link { display: flex; flex-direction: column; gap: 1px; border-left: 3px solid var(--accent, var(--teal)); padding-left: 10px; }
.stage-client-name { font-weight: 600; color: var(--ink); }
.stage-prog-h, .stage-prog { text-align: left; min-width: 150px; }
.stage-bar { height: 6px; border-radius: 999px; background: rgba(9,19,45,.08); overflow: hidden; }
.stage-bar span { display: block; height: 100%; background: var(--grad); border-radius: 999px; }
.stage-prog-t { font-weight: 700; font-size: .8rem; color: var(--ink); margin-right: 6px; }
.stage-current { font-size: .74rem; color: var(--muted); }
.stage-current.st-done { color: #15803d; font-weight: 600; }
.stage-cell { font-weight: 700; font-size: .82rem; }
.stage-cell.st-done { background: rgba(34,197,94,.13); color: #15803d; }
.stage-cell.st-doing { background: rgba(245,181,10,.15); color: #b45309; }
.stage-cell.st-todo { color: var(--muted); }
.stage-cell.st-na { color: var(--line-2); }

/* Task approval / proofing */
.task-approval .ap-state { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ap-badge { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.ap-badge-sm { font-size: .64rem; padding: 2px 8px; }
.ap-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 2px; }
.ap-cat { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 9px; border-radius: 999px; background: rgba(67,56,202,.1); color: #4338ca; }
.ap-cat-sm { font-size: .62rem; vertical-align: middle; }
.ap-todo { display: inline-flex; align-items: center; gap: 4px; }
.stage-appr-chip { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 700;
    padding: 4px 11px; border-radius: 999px; background: rgba(240,140,0,.14); color: #b06a00; white-space: nowrap; }
.stage-appr-chip:hover { background: rgba(240,140,0,.24); text-decoration: none; }
.ap-pending .ap-badge, .ap-badge.ap-pending { background: rgba(240,140,0,.14); color: #e8890b; }
.ap-approved .ap-badge, .ap-badge.ap-approved { background: rgba(47,158,68,.14); color: #2f9e44; }
.ap-rejected .ap-badge, .ap-badge.ap-rejected { background: rgba(224,49,49,.14); color: #e03131; }
.ap-note { font-style: italic; color: var(--muted); margin: 8px 0 0; font-size: .9rem; }
.ap-decide { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.ap-decide textarea, .ap-request-form textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--line-2); border-radius: 9px; font-size: .9rem; background: var(--surface); color: var(--ink); resize: vertical; }
.ap-decide-btns { display: flex; gap: 8px; }
.ap-request, .ap-history { margin-top: 10px; }
.ap-request > summary, .ap-history > summary { cursor: pointer; list-style: none; font-size: .85rem; }
.ap-request > summary::-webkit-details-marker, .ap-history > summary::-webkit-details-marker { display: none; }
.ap-request-form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.ap-history-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.ap-history-list li { font-size: .85rem; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.ap-history-note { font-style: italic; color: var(--muted); }

.ap-inbox { padding: 6px 8px; }
.ap-inbox-row { display: flex; align-items: center; gap: 12px; padding: 14px; border-bottom: 1px solid var(--line); color: var(--ink); border-radius: 10px; }
.ap-inbox-row:last-child { border-bottom: none; }
.ap-inbox-row:hover { background: var(--bg-2); text-decoration: none; }
.ap-inbox-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent, var(--primary)); flex: 0 0 auto; }
.ap-inbox-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ap-client-row { flex-wrap: wrap; }
.ap-client-acts { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; flex-wrap: wrap; }
.ap-proj-link { color: var(--muted); font-weight: 600; }
.ap-proj-link:hover { color: var(--primary); }

/* Connectors as workspace "plugins" */
.plugins-head { margin-bottom: 18px; }
.plugin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
.plugin-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.plugin-card.is-active { border-color: rgba(47,158,68,.35); box-shadow: 0 0 0 1px rgba(47,158,68,.12) inset; }
/* Featured connector — our own flagship plugin, so it doesn't get lost in the grid */
.plugin-card--feature { position: relative; border-color: rgba(255,90,78,.4); box-shadow: 0 0 0 1px rgba(255,90,78,.15) inset, 0 8px 24px rgba(255,90,78,.1); overflow: hidden; }
.plugin-card--feature.is-active { border-color: rgba(255,90,78,.55); box-shadow: 0 0 0 1px rgba(255,90,78,.2) inset, 0 8px 24px rgba(255,90,78,.12); }
.plugin-card--feature::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, var(--primary), #ffb020); }
.plugin-ribbon { position: absolute; top: 12px; right: -30px; transform: rotate(45deg); background: linear-gradient(90deg, var(--primary), #ff7a2e); color: #fff; font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 3px 34px; box-shadow: 0 2px 6px rgba(0,0,0,.18); pointer-events: none; }
.plugin-ic--logo { background: #fff; border-color: rgba(255,90,78,.25); padding: 4px; overflow: hidden; }
.plugin-ic--logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.plugin-head { display: flex; align-items: center; gap: 12px; }
.plugin-ic { font-size: 1.5rem; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; flex: 0 0 auto; }
.plugin-title { flex: 1 1 auto; min-width: 0; }
.plugin-title h3 { font-size: 1.08rem; margin: 0; }
.plugin-status { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.plugin-status--on { color: #2f9e44; }
.plugin-status--off { color: var(--muted); }
.plugin-status--warn { color: #e8890b; }
.plugin-desc { font-size: .9rem; color: var(--muted); margin: 0; flex: 1 1 auto; }
.plugin-toggle-inline { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 2px; font-weight: 600; font-size: .9rem; cursor: pointer; }
.plugin-toggle-inline input { width: 16px; height: 16px; accent-color: var(--teal); }
.plugin-toggle { position: relative; display: inline-block; width: 42px; height: 24px; flex: 0 0 auto; cursor: pointer; }
.plugin-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.plugin-switch { position: absolute; inset: 0; background: var(--line-2); border-radius: 999px; transition: background .15s; }
.plugin-switch::before { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.plugin-toggle input:checked + .plugin-switch { background: #2f9e44; }
.plugin-toggle input:checked + .plugin-switch::before { transform: translateX(18px); }

/* ---- Connectors browser: search + filters (WordPress-repo style) ---- */
.plugin-browse { margin: 4px 0 20px; display: flex; flex-direction: column; gap: 12px; }
.plugin-search { position: relative; display: flex; align-items: center; gap: 10px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; height: 46px; width: 100%; max-width: 520px;
    box-shadow: 0 1px 2px rgba(16,24,40,.04); transition: border-color .12s, box-shadow .12s; }
.plugin-search:hover { border-color: var(--line-2); }
.plugin-search:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(32,178,170,.14); }
.plugin-search svg, .plugin-search .fa-magnifying-glass, .plugin-search i { color: var(--muted); flex: 0 0 auto; font-size: .95rem; }
.plugin-search input { flex: 1 1 auto; border: 0; background: transparent; padding: 0; height: 100%; font-size: .95rem; color: var(--ink); outline: none; min-width: 0; }
.plugin-search input::placeholder { color: var(--muted); opacity: .8; }
/* Strip the native search-field affordances (the stray round × / decoration). */
.plugin-search input[type="search"]::-webkit-search-cancel-button,
.plugin-search input[type="search"]::-webkit-search-decoration,
.plugin-search input[type="search"]::-webkit-search-results-button { -webkit-appearance: none; appearance: none; display: none; }
.plugin-search input[type="search"] { appearance: none; -webkit-appearance: none; }
.plugin-search-clear { flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 50%;
    background: var(--bg-subtle, rgba(127,127,127,.12)); color: var(--muted); font-size: 1.05rem; line-height: 1; cursor: pointer; padding: 0; }
.plugin-search-clear:hover { color: var(--ink); background: var(--line-2); }
.plugin-search-clear[hidden] { display: none; }
.plugin-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pf-chip { border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 999px;
    padding: 6px 13px; font-size: .82rem; font-weight: 600; cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.pf-chip:hover { border-color: var(--line-2); color: var(--ink); }
.pf-chip.is-on { background: var(--primary); border-color: var(--primary); color: #fff; }
.pf-chip .pf-n { display: inline-block; margin-left: 5px; font-size: .72rem; font-weight: 800; opacity: .7; }
.plugin-cats { border-top: 1px dashed var(--line); padding-top: 12px; }
.plugin-noresults { color: var(--muted); padding: 24px 4px; font-size: .95rem; }
.plugin-card[hidden] { display: none !important; }

/* ---- Connectors: modern tabbed browse ---- */
.cbrowse { margin: 4px 0 22px; display: flex; flex-direction: column; gap: 14px; }
.cbrowse-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cbrowse-controls .plugin-search { flex: 1 1 320px; max-width: 520px; margin: 0; }
/* Status segmented control */
.cstatus-group { display: inline-flex; gap: 3px; padding: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; }
.cstatus { border: 0; background: transparent; color: var(--muted); font-size: .82rem; font-weight: 600; padding: 5px 11px; border-radius: 7px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.cstatus:hover { color: var(--ink); }
.cstatus.is-on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.cstatus .pf-n { font-size: .72rem; font-weight: 800; opacity: .6; }
/* Category tab bar */
.cbrowse-tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 2px solid var(--line); }
.ctab { position: relative; border: 0; background: transparent; color: var(--muted); font-size: .92rem; font-weight: 600; padding: 9px 14px; cursor: pointer; border-radius: 8px 8px 0 0; margin-bottom: -2px; border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ctab:hover { color: var(--ink); background: var(--surface-2); }
.ctab.is-on { color: var(--primary); border-bottom-color: var(--primary); }
.ctab .pf-n { font-size: .72rem; font-weight: 800; opacity: .55; }
.ctab.is-on .pf-n { opacity: .9; }
/* Full-width section heading inside the grid (All tab only) */
.cgroup-head { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; margin: 10px 0 -2px; }
.cgroup-head:first-child { margin-top: 0; }
.cgroup-head h2 { font-size: .98rem; margin: 0; }
.cgroup-head .cgroup-hint { font-size: .8rem; color: var(--muted); flex: 1 1 auto; }
.cgroup-head .cgroup-n { font-size: .74rem; font-weight: 800; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; }
.cgroup-head[hidden] { display: none; }
@media (max-width: 640px) {
    .cbrowse-controls .plugin-search { max-width: none; flex-basis: 100%; }
    .cstatus-group { width: 100%; justify-content: space-between; }
    .cbrowse-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .cbrowse-tabs::-webkit-scrollbar { display: none; }
    .cgroup-head .cgroup-hint { display: none; }
}
/* Card polish: category pill + hover lift */
.plugin-card { transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.plugin-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.07); border-color: var(--line-2); }
.plugin-cat { display: inline-block; margin-top: 3px; font-size: .64rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .05em; color: var(--muted); background: var(--bg-subtle, rgba(127,127,127,.1)); border-radius: 5px; padding: 2px 7px; }
@media (max-width: 640px) { .plugin-search { max-width: none; } }
.plugin-settings { border-top: 1px solid var(--line); padding-top: 10px; }
.plugin-settings > summary { cursor: pointer; list-style: none; font-size: .82rem; font-weight: 600; color: var(--primary); display: inline-flex; align-items: center; gap: 6px; }
.plugin-settings > summary::-webkit-details-marker { display: none; }
.plugin-settings .field { margin-top: 10px; }
.plugin-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; flex-wrap: wrap;
    position: sticky; bottom: 0; background: var(--bg); padding: 14px 0; border-top: 1px solid var(--line); }

/* Home board search + quick filters */
.proj-search { display: flex; align-items: center; gap: 12px; width: 100%; margin: 6px 0 12px;
    padding: 14px 20px; background: var(--surface); border: 1.5px solid var(--line-2); border-radius: 14px; color: var(--muted);
    box-shadow: 0 1px 2px rgba(9,19,45,.03); transition: border-color .15s, box-shadow .15s; }
.proj-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(255,90,78,.10); }
.proj-search > i, .proj-search > .i-emoji { font-size: 1.1rem; color: var(--muted); flex: 0 0 auto; }
.proj-search input { border: none; background: none; outline: none; flex: 1 1 auto; min-width: 0; font-size: 1.05rem; color: var(--ink); }
.proj-search input::placeholder { color: var(--muted); }
.proj-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; }
.proj-filters { display: inline-flex; gap: 7px; flex-wrap: wrap; }
.pf-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 600; cursor: pointer;
    padding: 8px 15px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--muted); }
.pf-chip:hover { border-color: var(--line); color: var(--ink); }
.pf-chip.active { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.pf-chip.active i, .pf-chip.active .i-emoji { color: var(--surface); }
.proj-count { margin-left: auto; }
/* "More" filter overflow — a native <details> dropdown of the rarer filters */
.pf-more { position: relative; display: inline-flex; }
.pf-more > summary { list-style: none; }
.pf-more > summary::-webkit-details-marker { display: none; }
.pf-more-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 600; cursor: pointer;
    padding: 8px 15px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--muted); }
.pf-more-toggle:hover, .pf-more[open] .pf-more-toggle { border-color: var(--line); color: var(--ink); }
.pf-more--on .pf-more-toggle { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.pf-more--on .pf-more-toggle i, .pf-more--on .pf-more-toggle .i-emoji { color: var(--surface); }
.pf-more-pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; min-width: 196px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
    padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.pf-more-pop .pf-chip { justify-content: flex-start; }
.proj-sort { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; }
.proj-sort select { font-size: .85rem; font-weight: 600; color: var(--ink); background: var(--surface);
    border: 1px solid var(--line-2); border-radius: 999px; padding: 7px 12px 7px 12px; cursor: pointer; }
.proj-controls .proj-count { margin-left: 14px; }
.proj-tagfilter { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: -4px 0 18px; }
.ptf-label { font-size: .8rem; font-weight: 600; color: var(--muted); margin-right: 2px; }
.ptf-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; cursor: pointer;
    color: var(--muted); background: var(--surface); border: 1px solid var(--line-2); border-radius: 999px; padding: 5px 11px; transition: color .12s, border-color .12s, background .12s; }
.ptf-chip:hover { color: var(--ink); border-color: var(--line); }
.ptf-chip.active { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.ptf-n { font-size: .68rem; opacity: .6; }
.ptf-chip.active .ptf-n { opacity: .85; }
/* Masonry: cards pack tightly regardless of height (no row-stretch gaps). */
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.project-card {
    --accent: var(--teal);
    position: relative; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 24px; color: var(--ink);
    transition: transform .15s, border-color .15s, background .15s; overflow: hidden;
}
.project-card::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: linear-gradient(90deg, var(--accent), transparent 80%);
}
.project-card:hover { transform: translateY(-3px); border-color: var(--line-2); background: var(--surface-2); text-decoration: none; }
.project-icon {
    width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
    font-size: 1.6rem; background: color-mix(in srgb, var(--accent) 18%, var(--surface-2)); margin-bottom: 14px;
}
.project-card h3 { font-size: 1.15rem; margin-bottom: 4px; }
.project-card p { font-size: .9rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.project-meta { display: block; margin-top: 14px; font-size: .78rem; color: var(--muted); }
/* Card wrapper holds the priority dropdown as a sibling (a <form> can't live
   inside the card's <a>). */
.project-card-wrap { position: relative; display: flex; }
.project-card-wrap > .project-card { flex: 1 1 auto; width: 100%; }
.pc-prio-form { position: absolute; top: 12px; right: 12px; left: auto; z-index: 4; margin: 0; }
.pc-prio { font-size: .68rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(9,19,45,.18);
    background: rgba(255,255,255,.82); color: var(--muted); cursor: pointer; appearance: none; -webkit-appearance: none; text-align: center; backdrop-filter: blur(6px); }
.pc-prio:hover { border-color: rgba(9,19,45,.32); }
.pc-prio--low     { color: #2f9e44; border-color: rgba(47,158,68,.4);  background: rgba(47,158,68,.10); }
.pc-prio--medium  { color: #f08c00; border-color: rgba(240,140,0,.4);  background: rgba(240,140,0,.12); }
.pc-prio--high    { color: #e8590c; border-color: rgba(232,89,12,.45); background: rgba(232,89,12,.12); }
.pc-prio--urgent  { color: #e03131; border-color: rgba(224,49,49,.5);   background: rgba(224,49,49,.14); }
.pc-pm-row { font-weight: 600; }
.proj-prio-chip { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; }
.proj-prio-chip.prio-low     { color: #2f9e44; background: rgba(47,158,68,.12); }
.proj-prio-chip.prio-medium  { color: #f08c00; background: rgba(240,140,0,.14); }
.proj-prio-chip.prio-high    { color: #e8590c; background: rgba(232,89,12,.14); }
.proj-prio-chip.prio-urgent  { color: #e03131; background: rgba(224,49,49,.16); }
.proj-prio-chip { font-size: .72rem; padding: 1px 8px; vertical-align: middle; }
/* Accounts: connector data strip */
.acct-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.acct-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 10px; }
.acct-data { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; }
.acct-metric { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 11px;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; min-width: 56px; }
.acct-metric-v { font-family: var(--display); font-weight: 800; font-size: 1.05rem; line-height: 1.1; color: var(--ink); display: inline-flex; align-items: baseline; gap: 5px; }
.acct-trend { font-family: var(--font); font-size: .66rem; font-weight: 700; }
.acct-trend.up { color: #2f9e44; }
.acct-trend.down { color: #e03131; }
.acct-metric-l { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.acct-metric--health { flex-direction: row; align-items: center; gap: 7px; }
.acct-metric--health .acct-metric-v { font-size: .92rem; }
.acct-health-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.acct-data--empty { font-size: .8rem; color: var(--muted); padding: 8px 0; gap: 6px; align-items: center; }
.acct-data-cap { font-size: .72rem; color: var(--muted); margin: 4px 0 0; display: flex; align-items: center; gap: 5px; }
.acct-data-cap .i-emoji, .acct-data-cap i { color: var(--accent); }
.project-card--new { border-style: dashed; background: transparent; }
.project-card--new:hover { background: rgba(9, 19, 45, .02); }
.project-card--new .project-icon { background: rgba(9, 19, 45, .05); }

/* ===== Empty states ===== */
.empty-state { text-align: center; padding: 56px 32px; }
.empty-emoji { font-size: 3rem; margin-bottom: 12px; }
.empty-state h2, .empty-state h1 { margin-bottom: 8px; }
.empty-state .btn { margin-top: 18px; }
.empty-inline { color: var(--muted); padding: 30px 26px; text-align: center; border: 1px dashed var(--line-2); border-radius: var(--radius); background: rgba(9, 19, 45, .02); line-height: 1.55; }
.empty-inline > i:first-child, .empty-inline > .i-emoji:first-child { display: block; font-size: 1.8rem; margin-bottom: 10px; opacity: .55; }
.center-screen { max-width: 460px; margin: 8vh auto 0; }

/* ===== Forms ===== */
.stack { display: flex; flex-direction: column; gap: 16px; }
.form-card { padding: 24px; }
/* Add-a-client onboarding wizard (grouped steps) */
.cw-onboard { gap: 16px; }
.cw-onboard .ob-step { padding: 20px 22px; }
.ob-step-head { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.ob-step-head h2 { font-family: var(--display); font-size: 1.15rem; margin: 0; }
.ob-step-head .muted { margin-left: auto; }
.ob-step-n { flex: 0 0 auto; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
    background: linear-gradient(120deg, #ff5a4e, #faca2c); color: #fff; font-weight: 800; font-size: .85rem; }
.ob-conn { padding: 14px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.ob-conn:first-of-type { border-top: 0; padding-top: 4px; }
.ob-conn-title { font-weight: 700; font-size: .95rem; display: flex; align-items: center; gap: 8px; }
.ob-conn-title i, .ob-conn-title .i-emoji { color: var(--primary); }
.cw-onboard .row { display: flex; gap: 14px; flex-wrap: wrap; }
.cw-onboard .row > .field { flex: 1; min-width: 200px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-weight: 600; font-size: .86rem; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=url],
input[type=number], input[type=search], input[type=datetime-local], input[type=time], input[type=tel], textarea, select {
    font: inherit; color: var(--ink); padding: 11px 14px;
    border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--bg-2);
    transition: border .15s, box-shadow .15s; width: 100%;
}
input::placeholder, textarea::placeholder { color: #5b6878; }
input:focus, textarea:focus, select:focus {
    outline: none; border-color: var(--primary);
    box-shadow: var(--focus-ring);
}
textarea { resize: vertical; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* ===== Auth ===== */
.auth-body { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.auth-wrap { width: 100%; max-width: 400px; }
.auth-card { background: var(--surface); border: 1px solid var(--line-2); border-radius: 22px; box-shadow: var(--shadow-lg); padding: 36px; }
.auth-brand { text-align: center; margin-bottom: 24px; }
.auth-brand h1 { font-family: var(--display); font-size: 1.7rem; margin-top: 8px; font-weight: 700; }
.auth-switch { text-align: center; margin-top: 18px; }
.auth-foot { text-align: center; margin-top: 18px; font-size: .8rem; }

/* ===== Breadcrumb ===== */
/* Breadcrumb — pill bar with chevron separators; trailing text = current page */
.breadcrumb {
    display: inline-flex; align-items: center; flex-wrap: wrap; gap: 3px;
    font-size: .82rem; font-weight: 600; color: var(--ink); line-height: 1.4;
    margin-bottom: 18px; max-width: 100%;
    padding: 6px 12px 6px 10px;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-pill); box-shadow: var(--shadow);
}
.breadcrumb a {
    color: var(--muted); text-decoration: none; font-weight: 600;
    padding: 2px 7px; border-radius: var(--radius-xs);
    transition: color .12s, background .12s;
}
.breadcrumb a:hover { color: var(--primary); background: var(--surface-2); }
.breadcrumb span { font-size: 0; line-height: 0; margin: 0; }
.breadcrumb span::after { content: '\203A'; font-size: .92rem; font-weight: 700; color: var(--muted); opacity: .5; }

/* ===== Project header ===== */
.project-head {
    --accent: var(--teal);
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 24px; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); margin-bottom: 22px;
    border-left: 3px solid var(--accent); flex-wrap: wrap;
}
.project-head-main { display: flex; align-items: center; gap: 16px; }
.project-head-icon {
    width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center;
    font-size: 1.9rem; background: color-mix(in srgb, var(--accent) 20%, var(--surface-2));
}
.project-head h1 { font-size: 1.5rem; }
.member-stack { display: flex; align-items: center; flex-wrap: wrap; row-gap: 4px; max-width: 100%; }
.member-stack .avatar { margin-left: -8px; border: 2px solid var(--surface); }
.member-stack .ms-more { display: inline-flex; align-items: center; justify-content: center; background: var(--line-2); color: var(--ink); font-size: .72rem; font-weight: 800; text-decoration: none; }
.member-stack .ms-more:hover { background: var(--accent); color: #fff; }
a.avatar.add {
    background: var(--surface); color: var(--primary); border: 2px dashed var(--primary);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; text-decoration: none; cursor: pointer; }
a.avatar.add:hover { background: rgba(255,90,78,.10); border-style: solid; }
a.avatar.add i { font-size: .82em; }
.add-member { position: relative; margin-left: -8px; }
.add-member summary { list-style: none; cursor: pointer; background: var(--surface-2); color: var(--muted); border: 2px dashed var(--line-2); }
.add-member summary::-webkit-details-marker { display: none; }
.popover {
    position: absolute; right: 0; top: 42px; z-index: 20; width: 300px;
    background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); padding: 16px;
}

/* ===== Tabs ===== */
.tabs { display: flex; gap: 4px; margin-bottom: 22px; flex-wrap: wrap; background: rgba(9, 19, 45, .03); padding: 5px; border-radius: 14px; border: 1px solid var(--line); max-width: 100%; }
.tabs .tab { flex: 0 0 auto; white-space: nowrap; }
.tab {
    border: none; background: transparent; font: inherit; font-weight: 600; font-size: .88rem;
    padding: 8px 16px; border-radius: 10px; cursor: pointer; color: var(--muted); transition: .15s;
}
.tab:hover { color: var(--ink); }
.tab.active { background: var(--surface-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.panel { display: none; animation: fade .25s ease; }
.panel.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.panel-head h2 { font-family: var(--display); font-size: 1.4rem; }

/* ===== Messages ===== */
.pill {
    display: inline-block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--teal); background: rgba(255, 90, 78,.12); padding: 3px 10px; border-radius: 999px;
}
.message-list { display: flex; flex-direction: column; gap: 8px; }
.message-row { display: flex; gap: 14px; padding: 15px 18px; align-items: flex-start; color: var(--ink); transition: transform .12s, background .15s, border-color .15s; }
.message-row:hover { transform: translateX(3px); background: var(--surface-2); border-color: var(--line-2); text-decoration: none; }
.message-row.is-pinned { border-color: color-mix(in srgb, var(--brand, #ff5a4e) 40%, var(--line)); background: color-mix(in srgb, var(--brand, #ff5a4e) 5%, var(--surface)); }
.msg-pin-badge { color: var(--brand, #ff5a4e); margin-right: 2px; }
.link-btn.is-pinned { color: var(--brand, #ff5a4e); font-weight: 600; }
.msg-pinned-flag { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; color: var(--brand, #ff5a4e);
    text-transform: uppercase; letter-spacing: .04em; margin: 0 0 4px; }
.message-row .avatar { flex: 0 0 auto; }
.message-row-body { flex: 1 1 auto; min-width: 0; }
.message-row-body h3 { font-size: 1.05rem; margin: 0 0 3px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; line-height: 1.3; }
.message-row-meta { font-size: .8rem; color: var(--muted); margin: 0 0 3px; }
.message-row-meta strong { color: var(--ink-2, var(--ink)); font-weight: 600; }
.message-row-snippet { font-size: .9rem; color: var(--muted); margin: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.message-row-count { flex: 0 0 auto; align-self: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--primary); color: #fff; font-size: .76rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.pill-sm { font-size: .6rem; padding: 2px 8px; vertical-align: middle; }

.message-detail .display { margin: 10px 0 18px; }
.byline { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.push-right { margin-left: auto; }
.prose { font-size: 1.02rem; color: var(--ink); line-height: 1.7; overflow-wrap: anywhere; word-break: break-word; }
.prose p { margin-bottom: 1em; }
.prose p:last-child { margin-bottom: 0; }
.prose ul, .prose ol { margin: 0 0 1em; padding-left: 1.5em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin: .25em 0; }
.prose ul:last-child, .prose ol:last-child { margin-bottom: 0; }
.prose a { color: var(--teal); text-decoration: underline; overflow-wrap: anywhere; word-break: break-word; }

/* ===== Comments ===== */
.comments { margin-top: 40px; }
.comments h2 { font-size: 1.12rem; margin-bottom: 18px; }
.comment { display: flex; gap: 12px; padding: 16px 0; border-top: 1px solid var(--line); }
.comment-meta { margin-bottom: 4px; }
.comment-form { display: flex; gap: 12px; padding: 16px; margin-top: 18px; align-items: flex-start; }
.comment-form-main { flex: 1; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.comment-form-main textarea { width: 100%; }

/* ===== To-dos ===== */
.todo-columns { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.todo-list { padding: 20px; }
.todo-list-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.todo-list-head h3 { font-size: 1.05rem; }
.count-badge { font-size: .76rem; font-weight: 700; color: var(--muted); background: rgba(9, 19, 45, .06); padding: 3px 10px; border-radius: 999px; }
.progress { height: 6px; background: rgba(9, 19, 45, .07); border-radius: 999px; margin: 12px 0 4px; overflow: hidden; }
.progress-bar { height: 100%; background: var(--grad); border-radius: 999px; transition: width .3s; }
.todo-items { list-style: none; margin: 8px 0; }
.todo-item { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.todo-item:last-child { border-bottom: none; }
/* Zebra-stripe the board rows so long lists are easier to scan. */
.todo-list .todo-items > .todo-item { padding-left: 8px; padding-right: 8px; margin-left: -8px; margin-right: -8px; border-radius: 7px; }
.todo-list .todo-items > .todo-item:nth-of-type(even) { background: var(--surface-2); border-bottom-color: transparent; }
.todo-list .todo-items > .todo-item:hover { background: var(--bg-2); }
.todo-item .checkbox {
    width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--line-2); background: transparent;
    cursor: pointer; display: grid; place-items: center; color: #09132d; font-size: .8rem; font-weight: 800; flex: 0 0 auto; transition: .15s;
}
.todo-item .checkbox:hover { border-color: var(--primary); }
.todo-item.done .checkbox { background: var(--grad); border-color: transparent; }
.todo-text { flex: 1; font-size: .93rem; }
.todo-item.done .todo-text { text-decoration: line-through; color: var(--muted); }
.due { font-size: .76rem; color: var(--accent); font-weight: 600; margin-left: 6px; }
.del-form { opacity: 0; transition: .15s; }
.todo-item:hover .del-form { opacity: 1; }
.del-x { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1.3rem; line-height: 1; padding: 0 4px; }
.del-x:hover { color: var(--danger); }
.add-todo { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line-2); }
.add-todo input[type=text] { grid-column: 1 / -1; }
.add-todo select, .add-todo input[type=date] { font-size: .85rem; padding: 8px 10px; }
.new-list { display: flex; flex-direction: column; gap: 12px; border-style: dashed; justify-content: flex-start; }

/* ===== Schedule ===== */
.schedule-grid { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
@media (max-width: 820px) { .schedule-grid { grid-template-columns: 1fr; } }
.event-list { display: flex; flex-direction: column; gap: 12px; }
.event-row { display: flex; align-items: center; gap: 16px; padding: 16px 20px; }
.event-date {
    width: 56px; height: 62px; border-radius: 12px; background: color-mix(in srgb, var(--teal) 16%, var(--surface-2));
    display: grid; place-content: center; text-align: center; flex: 0 0 auto;
}
.event-month { font-size: .7rem; font-weight: 700; text-transform: uppercase; color: var(--teal); }
.event-day { font-size: 1.5rem; font-weight: 800; line-height: 1; }
.event-body { flex: 1; }
.event-body h3 { font-size: 1.02rem; }

/* ===== Campfire ===== */
.campfire { display: flex; flex-direction: column; height: 60vh; min-height: 420px; overflow: hidden; }
.chat-scroll { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.chat-msg { display: flex; gap: 10px; max-width: 78%; }
.chat-msg.me { margin-left: auto; flex-direction: row-reverse; }
.bubble { background: var(--surface-2); padding: 10px 14px; border-radius: 14px 14px 14px 4px; border: 1px solid var(--line); }
.chat-msg.me .bubble { background: rgba(255, 90, 78,.16); border-color: rgba(255, 90, 78,.3); border-radius: 14px 14px 4px 14px; }
.chat-author { font-weight: 600; font-size: .82rem; display: block; margin-bottom: 2px; }
.bubble p { font-size: .94rem; }
.chat-form { display: flex; gap: 10px; padding: 14px; border-top: 1px solid var(--line); background: var(--surface); }

/* ===== Danger zone ===== */
.danger-zone { margin-top: 40px; text-align: center; }

/* ===== Docs ===== */
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.doc-card { padding: 22px; color: var(--ink); transition: transform .12s, background .15s, border-color .15s; }
.doc-card:hover { transform: translateY(-3px); background: var(--surface-2); border-color: var(--line-2); text-decoration: none; }
.doc-icon { font-size: 1.6rem; margin-bottom: 10px; }
.doc-card h3 { font-size: 1.02rem; margin-bottom: 6px; }
.doc-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.doc-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.danger-btn { color: var(--danger); }
.danger-btn:hover { border-color: var(--danger); background: rgba(248,113,113,.12); }
/* Modernized document page: paper surface, link resource cards */
.doc-paper { background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
    box-shadow: 0 1px 3px rgba(9,19,45,.04), 0 12px 32px rgba(9,19,45,.05); padding: 36px 40px 40px; }
.doc-title { font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.15; letter-spacing: -.02em; margin: 0; }
.doc-byline { margin-top: 14px; }
.doc-byline > div { display: flex; flex-direction: column; line-height: 1.35; }
.doc-resources { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 4px 0 24px; }
.doc-res-card { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border: 1px solid var(--line);
    border-radius: 13px; background: var(--bg-2); color: var(--ink); text-decoration: none;
    transition: border-color .14s, background .14s, transform .1s, box-shadow .14s; }
.doc-res-card:hover { border-color: var(--teal); background: var(--surface); text-decoration: none;
    transform: translateY(-1px); box-shadow: 0 4px 14px rgba(9,19,45,.07); }
.doc-res-icon { font-size: 1.5rem; flex: 0 0 auto; line-height: 1; }
.doc-res-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.doc-res-text strong { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-res-text .small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-res-open { flex: 0 0 auto; color: var(--muted); }
.doc-res-card:hover .doc-res-open { color: var(--teal); }
.doc-body { font-size: 1.02rem; line-height: 1.7; }
.doc-empty { padding: 8px 0; }
@media (max-width: 640px) { .doc-paper { padding: 24px 20px 28px; } }

/* ===== My stuff ===== */
.mystuff-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 820px) { .mystuff-grid { grid-template-columns: 1fr; } }
.section-title { font-family: var(--display); font-size: 1.25rem; margin-bottom: 14px; }
.assignment-list { display: flex; flex-direction: column; gap: 10px; }
.assignment {
    --accent: var(--teal);
    display: flex; align-items: center; gap: 12px; padding: 14px 18px;
    border-left: 3px solid var(--accent);
}
.assignment-body { flex: 1; }
.assignment-body .todo-text { font-weight: 500; }
.due.overdue { color: var(--danger); }

/* ===== Account ===== */
/* Account hero — keeps the avatar alongside the standard hero eyebrow/title/lead */
.acct-hero-id { display: flex; align-items: center; gap: 18px; }
.color-picker { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch {
    width: 38px; height: 38px; border-radius: 50%; cursor: pointer; position: relative;
    box-shadow: inset 0 0 0 2px rgba(9, 19, 45, .15); transition: transform .1s;
}
.swatch:hover { transform: scale(1.1); }
.swatch input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.swatch:has(input:checked) { box-shadow: 0 0 0 3px var(--ink), inset 0 0 0 2px rgba(255,255,255,.3); }
.swatch:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--teal), inset 0 0 0 2px rgba(255,255,255,.4); outline: none; }
.form-card h3 { font-family: var(--display); font-size: 1.2rem; }
.form-card h3.mt { margin-top: 12px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .grid-2 { grid-template-columns: 1fr; } }

/* ===== Topbar profile link ===== */
.topbar-profile { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.topbar-profile:hover { text-decoration: none; opacity: .8; }
/* Quick-create ("+ New") dropdown in the topbar. */
.quicknew-pop { position: relative; }
.quicknew-pop > summary { list-style: none; cursor: pointer; }
.quicknew-pop > summary::-webkit-details-marker { display: none; }
.quicknew-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 9px; font-size: .86rem; font-weight: 700;
    color: #fff; background: var(--grad); box-shadow: 0 2px 8px rgba(255,90,78,.25); white-space: nowrap; }
.quicknew-btn:hover { filter: brightness(1.04); }
.quicknew-menu { width: 288px; padding: 8px; }
.quicknew-h { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 4px 10px 6px; margin: 0; }
.qn-item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 9px; color: var(--ink); text-decoration: none; }
.qn-item:hover { background: rgba(9,19,45,.06); text-decoration: none; }
.qn-item > span { display: flex; flex-direction: column; min-width: 0; }
.qn-item strong { font-size: .9rem; font-weight: 600; }
.qn-item em { font-style: normal; font-size: .74rem; color: var(--muted); }
.qn-item .icon, .qn-item svg, .qn-item i { color: var(--muted); flex: 0 0 auto; }
.qn-item-sm { font-size: .88rem; font-weight: 500; padding: 8px 10px; }
.qn-sep { height: 1px; background: var(--line); margin: 6px 4px; }
[data-theme="dark"] .qn-item:hover { background: rgba(255,255,255,.06); }
@media (max-width: 700px) { .quicknew-label { display: none; } .quicknew-btn { padding: 8px 10px; } }

/* Profile dropdown — folds Account / billing / sign out into one clean menu. */
.profile-pop { position: relative; }
.profile-pop > summary { list-style: none; cursor: pointer; }
.profile-pop > summary::-webkit-details-marker { display: none; }
.profile-pop .org-caret { color: var(--muted); font-size: .7rem; }
.profile-menu { width: 248px; padding: 8px; }
.profile-menu-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.profile-menu-id { display: flex; flex-direction: column; min-width: 0; }
.profile-menu-id strong { font-size: .9rem; }
.profile-menu-id .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 9px;
    color: var(--ink); font-size: .9rem; font-weight: 500; text-decoration: none; background: none; border: 0; cursor: pointer; font-family: inherit; text-align: left; }
.profile-menu-item:hover { background: rgba(9,19,45,.06); text-decoration: none; }
.profile-menu-item .icon, .profile-menu-item svg, .profile-menu-item i { color: var(--muted); }
.profile-menu-sep { height: 1px; background: var(--line); margin: 6px 4px; }
.profile-signout { color: var(--danger); }
.profile-signout:hover { background: rgba(220,38,38,.08); }
.profile-signout svg, .profile-signout i { color: var(--danger); }
[data-theme="dark"] .profile-menu-item:hover { background: rgba(255,255,255,.06); }

/* ===== Topbar search ===== */
.topbar-search { margin-left: 2px; }
.topbar-search input {
    width: 180px; padding: 8px 14px; border-radius: 10px; font-size: .86rem;
    background: rgba(9, 19, 45, .05); border: 1px solid var(--line); transition: .15s; color: var(--ink);
}
.topbar-search input:focus { background: var(--bg-2); width: 220px; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(255, 90, 78,.14); }
@media (max-width: 900px) { .topbar-search { display: none; } }

/* ===== Search page ===== */
.search-page-form { display: flex; gap: 10px; margin-bottom: 18px; }
.search-page-form input { flex: 1; padding: 14px 18px; border-radius: 14px; font-size: 1rem; }
.search-count { margin-bottom: 16px; }
.search-results { display: flex; flex-direction: column; gap: 10px; }
.search-result { display: flex; gap: 16px; padding: 18px 20px; color: var(--ink); border-left: 3px solid var(--accent); transition: transform .12s, background .15s; }
.search-result:hover { transform: translateX(3px); background: var(--surface-2); text-decoration: none; }
.result-icon { font-size: 1.4rem; }
.result-body h3 { font-size: 1.02rem; margin-bottom: 4px; }
.result-meta { font-size: .76rem; color: var(--muted); text-transform: capitalize; }

/* ===== Activity feed ===== */
.activity-title { margin: 40px 0 16px; }
.activity-feed { display: flex; flex-direction: column; gap: 2px; }
.activity-item {
    --accent: var(--teal);
    display: flex; gap: 12px; padding: 12px 14px; color: var(--ink); border-radius: var(--radius-sm);
    align-items: flex-start; transition: background .12s; border-left: 2px solid transparent;
}
.activity-item:hover { background: var(--surface); border-left-color: var(--accent); text-decoration: none; }
.activity-text p { font-size: .93rem; line-height: 1.4; }
.activity-subject { color: var(--muted); }
.activity-meta { font-size: .76rem; color: var(--muted); }

/* ===== Notification bell ===== */
.bell {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 11px; font-size: 1.05rem; text-decoration: none;
    transition: background .15s;
}
.bell:hover { background: rgba(9, 19, 45, .06); text-decoration: none; }
.bell-badge {
    position: absolute; top: 2px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px;
    background: var(--danger); color: #1a0606; border-radius: 999px; font-size: .68rem; font-weight: 800;
    display: grid; place-items: center; box-shadow: 0 0 0 2px var(--bg);
}
.bell.has-unread { animation: bell-wiggle 2.5s ease-in-out 1; }
@keyframes bell-wiggle {
    0%, 92%, 100% { transform: rotate(0); }
    94% { transform: rotate(-12deg); } 96% { transform: rotate(10deg); } 98% { transform: rotate(-6deg); }
}

/* ===== Hey! notifications list ===== */
.notif-list { display: flex; flex-direction: column; gap: 8px; }
.notif { margin: 0; }
.notif-btn {
    width: 100%; display: flex; align-items: center; gap: 14px; text-align: left;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 16px 18px; cursor: pointer; font: inherit; color: var(--ink);
    transition: transform .12s, background .15s, border-color .15s;
}
.notif-btn:hover { transform: translateX(3px); background: var(--surface-2); border-color: var(--line-2); }
.notif.unread .notif-btn { border-left: 3px solid var(--teal); background: rgba(255, 90, 78,.05); }
.notif-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.notif-summary { font-size: .94rem; font-weight: 500; }
.notif.unread .notif-summary { font-weight: 600; }
.notif-meta { font-size: .76rem; color: var(--muted); }
.unread-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--teal); flex: 0 0 auto; }

/* ===== Phases & locking ===== */
.panel-head .phase-toggle { margin: 0; }
.phase-hint { margin: -8px 0 16px; }
.phase-num { display: inline-block; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--teal); background: rgba(255, 90, 78,.12); padding: 2px 8px; border-radius: 999px; margin-right: 6px; }
.todo-list.locked { opacity: .65; background:
    repeating-linear-gradient(45deg, var(--surface), var(--surface) 12px, var(--bg-2) 12px, var(--bg-2) 24px); }
.locked-note { font-size: .8rem; color: var(--muted); background: rgba(9, 19, 45, .04); padding: 8px 10px; border-radius: 8px; margin: 8px 0; }
/* Empty lists collapse to a single clickable header and sit at the bottom. */
/* Completed list — collapses into an accordion and sinks to the bottom. */
.todo-list.is-done { padding-top: 14px; padding-bottom: 14px; }
.todo-list.is-done > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; }
.todo-list.is-done > summary::-webkit-details-marker { display: none; }
.todo-list.is-done > summary h3 { flex: 1; min-width: 0; color: var(--muted); }
.todo-list.is-done > summary .list-dot { background: var(--success) !important; }
.todo-list.is-done > summary .count-badge { color: var(--success); border-color: rgba(22,163,74,.32); }
.todo-list.is-done:not([open]) { opacity: .85; }
.todo-list.is-done > summary::after { content: "▸"; color: var(--muted); font-size: .85rem; flex: 0 0 auto; }
.todo-list.is-done[open] > summary::after { content: "▾"; }
/* When expanded, show the completed to-dos regardless of the global show-done toggle. */
#todos .todo-list.is-done[open] .todo-item.done { display: flex; }

.todo-list.is-empty { padding-top: 14px; padding-bottom: 14px; }
.todo-list.is-empty > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.todo-list.is-empty > summary::-webkit-details-marker { display: none; }
.todo-list.is-empty:not([open]) { opacity: .72; }
.todo-list.is-empty > summary::after { content: "Empty — click to add"; font-size: .7rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-left: auto; }
.todo-list.is-empty[open] > summary::after { content: "Collapse"; }
.todo-list.is-empty > summary .count-badge { display: none; }
.todo-item .checkbox:disabled { cursor: not-allowed; opacity: .5; }

/* ===== Subtasks ===== */
.subtask-items { list-style: none; margin: 0 0 0 30px; padding: 0; border-left: 2px solid var(--line); }
.todo-item.is-sub { padding: 6px 0 6px 12px; }
.todo-item.is-sub .todo-text { font-size: .86rem; }
.subcount { font-size: .72rem; font-weight: 600; color: var(--muted); background: rgba(9, 19, 45, .06); padding: 1px 7px; border-radius: 999px; margin-left: 6px; }
.toggle-form.blocked .checkbox { border-color: var(--warning); cursor: help; }
.add-sub { margin: 2px 0 8px 30px; }
.add-sub summary { list-style: none; cursor: pointer; font-size: .78rem; color: var(--muted); padding: 2px 0; }
.add-sub summary::-webkit-details-marker { display: none; }
.add-sub summary:hover { color: var(--primary); }
.add-sub-form { display: flex; gap: 6px; margin-top: 6px; }
.add-sub-form input { font-size: .85rem; padding: 6px 10px; }

/* ===== Recurring ===== */
.recurring-block { margin: 10px 0; padding: 10px 12px; background: rgba(250, 202, 44,.06); border: 1px solid rgba(250, 202, 44,.16); border-radius: var(--radius-sm); }
.recurring-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); margin-bottom: 6px; }
.recurring-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .85rem; padding: 3px 0; }
.recurring-actions { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.btn-xs { padding: 3px 9px; font-size: .74rem; border-radius: 7px; line-height: 1.3; }
.recurring-now { white-space: nowrap; color: var(--primary); border-color: var(--line-2); }
.add-todo-acc { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line-2); }
.add-todo-acc > summary { cursor: pointer; font-size: .88rem; color: var(--primary); font-weight: 700; list-style: none;
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; }
.add-todo-acc > summary::-webkit-details-marker { display: none; }
.add-todo-acc[open] > summary { margin-bottom: 4px; }
.add-todo-acc .add-todo { margin-top: 0; padding-top: 0; border-top: none; }
.add-recurring { margin-top: 10px; }
.add-recurring summary { cursor: pointer; font-size: .82rem; color: var(--primary); font-weight: 600; list-style: none; }
.add-recurring summary::-webkit-details-marker { display: none; }
.add-recurring-form { margin-top: 10px; padding: 12px; background: rgba(9, 19, 45, .03); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.recurring-row { display: flex; gap: 8px; }
.add-recurring-form input, .add-recurring-form select { font-size: .85rem; }

/* ===== Timer ===== */
.timer-pill { display: inline-flex; align-items: center; gap: 7px; background: rgba(220,38,38,.1); color: #b91c1c;
    padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: .82rem; font-variant-numeric: tabular-nums; }
.timer-pill:hover { text-decoration: none; background: rgba(220,38,38,.16); color: #b91c1c; }
.timer-pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--danger); animation: pulse 1.4s infinite; flex: 0 0 auto; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.8); } }
/* Sticky action bar under the nav — utility actions (notifications, theme) +
   the running timer, so they don't crowd the main nav. */
/* Frosted-glass strip: translucent so the page scrolls softly underneath,
   a hairline + faint soft shadow instead of a hard border, and the utility
   cluster lifted as a floating "glass" segmented pill. */
.action-bar { position: sticky; top: var(--topbar-h, 57px); z-index: 110; display: flex; align-items: center; justify-content: center;
    gap: 14px; padding: 7px 20px; min-height: 46px;
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
    border-bottom: 1px solid var(--line);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 8px 22px -18px rgba(9,19,45,.55); }
[data-theme="dark"] .action-bar { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 22px -16px rgba(0,0,0,.7); }
/* Older browsers with no backdrop-filter get an opaque fallback so it never looks broken. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .action-bar { background: var(--surface); }
}
.action-bar-l { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 0; }
.action-bar-r { display: flex; align-items: center; gap: 6px; flex: 1 1 0; justify-content: flex-end; }
/* Center: a floating "glass" segmented pill of click-to-open utility icons
   (Up next / Bookmarks / Alerts / Activity / Summit). */
.action-bar-c { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 4px 6px; border-radius: 999px;
    background: color-mix(in srgb, var(--surface-2) 65%, transparent);
    border: 1px solid var(--line);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 3px rgba(9,19,45,.06); }
[data-theme="dark"] .action-bar-c { background: rgba(255,255,255,.045); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 3px rgba(0,0,0,.35); }
.ab-pop { position: relative; display: inline-flex; }
.ab-pop > summary { list-style: none; cursor: pointer; }
.ab-pop > summary::-webkit-details-marker { display: none; }
.ab-icon { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px; background: transparent; color: var(--muted); font-size: .82rem; font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background .12s ease, color .12s ease, box-shadow .12s ease; }
.ab-icon:hover { background: var(--surface); color: var(--ink); text-decoration: none; box-shadow: 0 1px 3px rgba(9,19,45,.1); border-color: var(--line); }
.ab-pop[open] > .ab-icon { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(9,19,45,.12); border-color: var(--line); }
.ab-icon svg, .ab-icon i, .ab-icon .icon { color: var(--muted); }
/* Each chip's icon carries its own tint so the row reads as distinct controls
   rather than a monochrome grey strip. Text stays muted; only the glyph is colored. */
.ab-ic-upnext svg, .ab-ic-upnext i { color: #f59e0b; }
.ab-ic-bm svg, .ab-ic-bm i, .ab-ic-bm .icon { color: #6366f1; }
.ab-icon.bell svg, .ab-icon.bell i, .ab-icon.bell .icon { color: #ef4444; }
/* Brighter tints on the dark surface so the glyphs don't go muddy. */
[data-theme="dark"] .ab-ic-upnext svg, [data-theme="dark"] .ab-ic-upnext i { color: #fbbf24; }
[data-theme="dark"] .ab-ic-bm svg, [data-theme="dark"] .ab-ic-bm i, [data-theme="dark"] .ab-ic-bm .icon { color: #818cf8; }
[data-theme="dark"] .ab-icon.bell svg, [data-theme="dark"] .ab-icon.bell i, [data-theme="dark"] .ab-icon.bell .icon { color: #f87171; }
[data-theme="dark"] .ab-live-dot { background: #34d399; }
[data-theme="dark"] .ab-summit, [data-theme="dark"] .ab-summit svg, [data-theme="dark"] .ab-summit i { color: #ff8a7a; }
.ab-icon:hover svg, .ab-pop[open] > .ab-icon svg, .ab-icon:hover .icon, .ab-pop[open] > .ab-icon .icon { filter: brightness(.92) saturate(1.15); }
.ab-icon .icon svg { color: inherit; }
.ab-icon-n { font-size: .64rem; font-weight: 800; background: var(--primary); color: #fff; border-radius: 999px; padding: 0 6px; min-width: 16px; text-align: center; }
[data-theme="dark"] .ab-icon:hover, [data-theme="dark"] .ab-pop[open] > .ab-icon { background: rgba(255,255,255,.08); box-shadow: none; }
/* Live-activity dot — a soft pulsing green presence indicator. */
.ab-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #16a34a; flex: 0 0 auto;
    box-shadow: 0 0 0 0 rgba(22,163,74,.5); animation: ab-live-pulse 2s infinite; }
@keyframes ab-live-pulse { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,.45); } 70% { box-shadow: 0 0 0 6px rgba(22,163,74,0); } 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); } }
/* Summit chip — subtle brand accent so the AI guide stands out. */
.ab-summit { color: var(--primary); }
.ab-summit svg, .ab-summit i { color: var(--primary); }
.ab-menu { width: 300px; left: 50%; right: auto; transform: translateX(-50%); padding: 8px; }
.ab-activity { width: 360px; max-height: 70vh; overflow: auto; left: auto; right: 0; transform: none; }
.ab-menu-h { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 4px 10px 6px; margin: 0; }
.ab-menu-row { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 9px; color: var(--ink); text-decoration: none; }
.ab-menu-row:hover { background: rgba(9,19,45,.06); text-decoration: none; }
.ab-menu-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; }
.ab-menu-empty { padding: 12px 10px; }
.ab-menu-foot { display: block; margin-top: 4px; padding: 8px 10px; border-top: 1px solid var(--line); color: var(--primary); font-size: .82rem; font-weight: 600; text-decoration: none; }
[data-theme="dark"] .ab-menu-row:hover { background: rgba(255,255,255,.06); }
/* Bell in the action-bar middle + its badge + centered menu. */
/* The Alerts chip carries the legacy `.bell` class (a 40×40 icon button); reset
   its box model so it behaves as a normal pill chip, not a fixed square. */
.ab-icon.bell { position: relative; width: auto; height: auto; border-radius: 999px; justify-content: flex-start; }
.ab-icon.bell:hover { background: var(--surface); }
[data-theme="dark"] .ab-icon.bell:hover { background: rgba(255,255,255,.08); }
.ab-icon.bell .bell-badge { position: absolute; top: -3px; right: -2px; box-shadow: 0 0 0 2px var(--surface); }
.ab-bell-menu { left: 50%; right: auto; transform: translateX(-50%); }
.bell-head-actions { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; }
/* System alerts group (connector-driven: ranking/DR drops, audit warnings). */
.bell-group-alert { display: flex; align-items: center; gap: 6px; color: #b45309; }
.bell-group-alert svg, .bell-group-alert i { color: #d97706; }
.bell-row.bell-row-alert { display: flex; align-items: center; gap: 4px; }
.bell-alert-main { flex: 1 1 auto; min-width: 0; }
.bell-alert-main button { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; cursor: pointer; text-align: left; padding: 10px 8px 10px 11px; border-radius: 11px; color: var(--ink); font: inherit; }
.bell-alert-main button:hover { background: rgba(217,119,6,.08); }
.bell-alert-ic { flex: 0 0 auto; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; background: rgba(217,119,6,.14); color: #b45309; }
.bell-alert-ic.bell-alert-retainer { background: rgba(37,99,235,.14); color: #2563eb; }
.bell-alert-when { margin-left: auto; flex: 0 0 auto; font-size: .68rem; }
.bell-alert-read button { border: 0; background: none; cursor: pointer; color: var(--muted); padding: 0 8px; border-radius: 8px; height: 100%; }
.bell-alert-read button:hover { color: #16a34a; background: rgba(22,163,74,.1); }
@media (max-width: 700px) { .ab-icon-l { display: none; } }
@media (max-width: 520px) { .action-bar-c { display: none; } }

/* Running-timer strip: a thin status bar at the very top, above the nav. */
.timer-strip { position: sticky; top: 0; z-index: 130; display: flex; align-items: center; gap: 10px; padding: 4px 18px;
    background: #dc2626; color: #fff; font-size: .82rem; }
.timer-strip.is-paused { background: #d97706; }
.timer-strip-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: pulse 1.4s infinite; flex: 0 0 auto; }
.timer-strip.is-paused .timer-strip-dot { animation: none; opacity: .7; }
.timer-strip-clock { font-weight: 800; font-variant-numeric: tabular-nums; color: #fff; text-decoration: none; }
.timer-strip-label { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.timer-strip-task { font-weight: 500; opacity: .9; }
.timer-strip-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.timer-strip-btn { display: inline-flex; align-items: center; gap: 5px; border: 1px solid rgba(255,255,255,.6); background: transparent; color: #fff;
    border-radius: 7px; padding: 2px 9px; font-size: .74rem; font-weight: 700; cursor: pointer; }
.timer-strip-btn:hover { background: rgba(255,255,255,.16); }
.timer-strip-stop { background: rgba(255,255,255,.18); border-color: transparent; }
.timer-strip-stop:hover { background: rgba(255,255,255,.3); }
@media (max-width: 560px) { .timer-strip-task { display: none; } }
/* Idle variant: a quiet, low-contrast nudge to start tracking when no timer runs. */
.timer-strip-idle { background: var(--surface-2); color: var(--muted); border-bottom: 1px solid var(--line); }
.timer-strip-idle .timer-strip-label { font-weight: 500; }
.timer-strip-idle-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
    background: var(--muted); opacity: .55; box-shadow: 0 0 0 3px rgba(148,163,184,.14); }
.timer-strip-idle .timer-strip-btn { border-color: var(--line-2); color: var(--ink); }
.timer-strip-idle .timer-strip-btn:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
/* Must be opaque — the strip is sticky at the top, so a translucent background
   lets scrolled page content show through. */
[data-theme="dark"] .timer-strip-idle { background: var(--surface-2); color: var(--muted); }
/* Running timer, folded into the left of the action bar. */
.ab-timer { display: inline-flex; align-items: center; gap: 8px; padding: 3px 10px; border-radius: 999px; min-width: 0;
    background: rgba(220,38,38,.1); color: #b91c1c; font-size: .82rem; }
.ab-timer.is-paused { background: rgba(217,119,6,.12); color: #b45309; }
.ab-timer-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); animation: pulse 1.4s infinite; flex: 0 0 auto; }
.ab-timer.is-paused .ab-timer-dot { background: #d97706; animation: none; }
.ab-timer-clock { font-weight: 800; font-variant-numeric: tabular-nums; color: inherit; text-decoration: none; }
.ab-timer-label { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ab-timer-task { font-weight: 500; opacity: .85; }
.ab-timer-btn { display: inline-flex; align-items: center; gap: 4px; border: 1px solid currentColor; background: transparent; color: inherit;
    border-radius: 7px; padding: 2px 8px; font-size: .74rem; font-weight: 700; cursor: pointer; }
.ab-timer-btn:hover { background: rgba(255,255,255,.5); }
.ab-timer-stop { background: var(--danger); border-color: var(--danger); color: #fff; }
.ab-timer-stop:hover { background: #b91c1c; }
[data-theme="dark"] .ab-timer { background: rgba(248,113,113,.14); color: #fca5a5; }
[data-theme="dark"] .ab-timer.is-paused { background: rgba(217,119,6,.18); color: #fbbf24; }
[data-theme="dark"] .ab-timer-btn:hover { background: rgba(255,255,255,.1); }
@media (max-width: 560px) { .ab-timer-task { display: none; } .ab-timer-btn { font-size: 0; padding: 3px 6px; } .ab-timer-btn svg, .ab-timer-btn i { font-size: .85rem; } }
.timer-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; margin-bottom: 24px; }
.timer-live { display: flex; align-items: center; gap: 14px; }
.timer-info { display: flex; flex-direction: column; }
.timer-clock { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; font-family: var(--display); }
.timer-start { display: flex; gap: 10px; flex: 1; flex-wrap: wrap; }
.timer-start input[type=text] { flex: 1; min-width: 160px; }
.timer-start select { width: auto; min-width: 140px; }

/* ===== Week / day bars ===== */
.week-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.week-nav { display: flex; align-items: center; gap: 8px; }
.week-label { font-weight: 600; }
.week-total strong { font-size: 1.1rem; }
.day-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-bottom: 28px; align-items: end; }
.day-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.day-bar-wrap { height: 90px; width: 100%; display: flex; align-items: flex-end; background: rgba(9, 19, 45, .04); border-radius: 10px; overflow: hidden; }
.day-bar { width: 100%; background: linear-gradient(180deg, var(--teal), rgba(255, 90, 78,.4)); border-radius: 10px 10px 0 0; transition: height .3s; }
.day-col.is-today .day-bar { background: var(--grad); }
.day-name { font-weight: 600; font-size: .82rem; }
.day-col.is-today .day-name { color: var(--accent-ink); }

/* ===== Timesheet grid ===== */
.timesheet-grid { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; }
@media (max-width: 820px) { .timesheet-grid { grid-template-columns: 1fr; } }
/* Entries grouped by day */
.entry-days { display: flex; flex-direction: column; gap: 20px; }
.entry-day-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 0 2px 7px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.entry-day-date { font-size: .82rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.entry-day.is-today .entry-day-date { color: var(--accent-ink); }
.entry-day-total { font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.entry-list { display: flex; flex-direction: column; gap: 2px; }
.entry-row { display: block; padding: 0; background: var(--surface); border: 1px solid transparent; border-radius: 11px; transition: background .12s, border-color .12s; }
.entry-row:hover { background: var(--bg-2); }
.entry-row[open] { background: var(--bg-2); border-color: var(--line); }
.entry-summary { display: flex; align-items: center; gap: 13px; padding: 12px 14px; cursor: pointer; list-style: none; }
.entry-summary::-webkit-details-marker { display: none; }
.entry-swatch { width: 4px; align-self: stretch; min-height: 30px; border-radius: 999px; flex: 0 0 auto; }
.entry-edit-ic { color: var(--muted); opacity: 0; transition: opacity .12s; flex: 0 0 auto; }
.entry-row[open] .entry-edit-ic, .entry-summary:hover .entry-edit-ic { opacity: .8; }
.entry-edit-form { display: flex; flex-direction: column; gap: 8px; padding: 4px 14px 14px 31px; }
.entry-edit-actions { display: flex; align-items: center; gap: 14px; }
.entry-mins { font-weight: 700; font-variant-numeric: tabular-nums; font-size: .95rem; white-space: nowrap; margin-left: auto; }
.entry-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.entry-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; font-size: .93rem; line-height: 1.3; }
.entry-project { font-weight: 600; color: var(--ink); }
.entry-task { color: var(--muted); font-weight: 500; }
.entry-task::before { content: "·"; margin-right: 6px; color: var(--line-2); }
.entry-note { font-style: italic; }
.ts-empty { text-align: center; padding: 40px 20px; color: var(--muted); background: var(--surface); border: 1px dashed var(--line-2); border-radius: 14px; }
.ts-empty p { font-size: 1rem; font-weight: 600; color: var(--ink); margin: 10px 0 2px; }
.ts-empty .icon, .ts-empty i { font-size: 1.6rem; color: var(--line-2); }
.byproject-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.byproject-row:last-child { border-bottom: none; }
.byproject-name { flex: 1; font-size: .9rem; }
.byproject-mins { font-weight: 600; font-variant-numeric: tabular-nums; }
.dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.hm-row { display: flex; gap: 10px; }
.time-nudge { display: block; }

/* ===== Reminders ===== */
.reminder-list { display: flex; flex-direction: column; gap: 10px; }
.reminder { display: flex; align-items: center; gap: 14px; padding: 14px 18px; }
.reminder-icon { font-size: 1.3rem; }
.reminder-body { flex: 1; display: flex; flex-direction: column; }
.reminder-summary { font-weight: 500; }
.reminder-edit { color: var(--muted); padding: 0 4px; font-size: .95rem; }
.reminder-edit:hover { color: var(--accent); }
.reminder-editing { outline: 1px solid var(--accent); outline-offset: -1px; }

/* Meeting recordings in the Connector Tools sidebar card. */
.ov-call-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.ov-call { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 8px; min-width: 0; }
.ov-call:hover { background: var(--surface-2); }
.ov-call-when { flex: 0 0 auto; }
.ov-call-url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.ov-calls-send { color: var(--accent); }
.ic-recall { background: rgba(168,85,247,.14); color: #a855f7; }

/* Billing lock: the freeze banner + badges. Deliberately loud. */
.billing-lock-bar { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; padding: 12px 16px;
    border: 1px solid rgba(239,68,68,.45); border-radius: 12px; background: rgba(239,68,68,.08); }
.billing-lock-bar > div { flex: 1; }
.billing-lock-ic { font-size: 1.2rem; color: var(--danger); }
.proj-lock-badge { background: rgba(239,68,68,.35); }
.pc-lock-chip { display: inline-flex; align-items: center; gap: 5px; font-size: .68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; color: var(--danger); background: rgba(239,68,68,.1);
    border: 1px solid rgba(239,68,68,.35); border-radius: 999px; padding: 2px 9px; width: fit-content; }

/* ===== Brand logo (auth) ===== */
.auth-logo { width: 76px; height: 76px; border-radius: 20px; display: block; margin: 0 auto;
    box-shadow: 0 10px 34px rgba(0,0,0,.5); }

/* ===== Line icons ===== */
.icon { display: inline-block; vertical-align: -0.22em; flex: 0 0 auto; }
.tab { display: inline-flex; align-items: center; gap: 7px; }
.tab .icon { vertical-align: middle; }
.topnav a { display: inline-flex; align-items: center; gap: 6px; }
.topnav a .icon { opacity: .85; }
.bell .icon { stroke-width: 2; }
.tab.active .icon, .topnav a.active .icon { color: var(--teal); opacity: 1; }

/* ============================================================
   Marketing / landing page
   ============================================================ */
.lp-body { background: var(--bg); }

/* Nav */
.lp-nav { position: sticky; top: 0; z-index: 50; background: rgba(8,19,32,.72);
    backdrop-filter: saturate(160%) blur(16px); border-bottom: 1px solid var(--line); }
.lp-nav-inner { max-width: 1140px; margin: 0 auto; padding: 0 24px; height: 96px; display: flex; align-items: center; gap: 24px; }
@media (max-width: 560px) { .lp-nav-inner { height: 74px; } }
.lp-nav-links { display: flex; gap: 6px; margin-left: 14px; }
.lp-nav-links a { color: var(--muted); font-weight: 500; font-size: .92rem; padding: 8px 12px; border-radius: 10px; }
.lp-nav-links a:hover { color: var(--ink); background: rgba(9, 19, 45, .05); text-decoration: none; }
.lp-nav-cta { margin-left: auto; display: flex; gap: 10px; align-items: center; }
@media (max-width: 720px) { .lp-nav-links { display: none; } }

/* Hero */
.lp-hero { position: relative; overflow: hidden; padding: 84px 24px 40px; }
.lp-hero-glow { position: absolute; inset: -20% 0 auto 0; height: 600px; pointer-events: none;
    background: radial-gradient(620px 320px at 50% 0%, rgba(255, 90, 78,.18), transparent 70%),
                radial-gradient(520px 280px at 70% 10%, rgba(250, 202, 44,.12), transparent 70%); }
.lp-hero-inner { position: relative; max-width: 920px; margin: 0 auto; text-align: center; }
.lp-badge { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 600; color: var(--ink);
    background: rgba(9, 19, 45, .04); border: 1px solid var(--line-2); padding: 6px 14px; border-radius: 999px; margin-bottom: 26px; }
.lp-badge:hover { text-decoration: none; border-color: rgba(255, 90, 78,.4); }
.lp-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 10px var(--teal); }
.lp-h1 { font-family: var(--display); font-weight: 800; font-size: clamp(2.4rem, 6.5vw, 4.4rem); line-height: 1.02; letter-spacing: -0.04em; }
.lp-grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-sub { max-width: 620px; margin: 22px auto 0; font-size: 1.18rem; color: var(--muted); line-height: 1.6; }
.lp-hero-cta { display: flex; gap: 12px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }
.lp-hero-cta .btn { padding: 13px 26px; font-size: 1rem; }
.lp-hero-note { margin-top: 16px; }

/* Hero mockup */
.lp-mockup { margin: 56px auto 0; max-width: 880px; background: var(--surface); border: 1px solid var(--line-2);
    border-radius: 18px; overflow: hidden; box-shadow: 0 40px 120px rgba(0,0,0,.55); text-align: left; }
.lp-mockup-bar { display: flex; align-items: center; gap: 7px; padding: 13px 16px; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.lp-dot { width: 11px; height: 11px; border-radius: 50%; background: #38475c; }
.lp-mockup-url { margin-left: 14px; font-size: .8rem; color: var(--muted); font-family: var(--font); }
.lp-mockup-body { padding: 22px; }
.lp-mock-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.lp-mock-proj { display: flex; align-items: center; gap: 12px; }
.lp-mock-proj-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.4rem;
    background: color-mix(in srgb, var(--teal) 18%, var(--surface-2)); }
.lp-mock-avatars { display: flex; }
.lp-mock-avatars .avatar { margin-left: -8px; border: 2px solid var(--surface); }
.lp-mock-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 620px) { .lp-mock-cols { grid-template-columns: 1fr; } }
.lp-mock-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.lp-mock-card-head { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .92rem; margin-bottom: 10px; }
.lp-phase { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--teal);
    background: rgba(255, 90, 78,.12); padding: 2px 7px; border-radius: 999px; }
.lp-count { margin-left: auto; font-size: .76rem; color: var(--muted); }
.lp-lock { margin-left: auto; font-size: .74rem; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.lp-mock-prog { height: 6px; background: rgba(9, 19, 45, .07); border-radius: 999px; overflow: hidden; margin-bottom: 12px; }
.lp-mock-prog div { height: 100%; background: var(--grad); }
.lp-mock-todos { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.lp-mock-todos li { display: flex; align-items: center; gap: 9px; font-size: .9rem; color: var(--ink); }
.lp-mock-todos li i { width: 18px; height: 18px; border-radius: 6px; border: 2px solid var(--line-2); flex: 0 0 auto; }
.lp-mock-todos li.done i { background: var(--grad); border-color: transparent; }
.lp-mock-todos li.done { color: var(--muted); text-decoration: line-through; }
.lp-mock-locked { opacity: .7; }

/* Sections */
.lp-section { max-width: 1100px; margin: 0 auto; padding: 64px 24px; }
.lp-section-head { text-align: center; max-width: 680px; margin: 0 auto 40px; }
.lp-h2 { font-family: var(--display); font-weight: 800; font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -0.03em; }
.lp-section-sub { margin-top: 14px; font-size: 1.08rem; }

/* Feature grid */
.lp-feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.lp-feature { padding: 26px; transition: transform .15s, border-color .15s, background .15s; }
.lp-feature:hover { transform: translateY(-3px); border-color: var(--line-2); background: var(--surface-2); }
.lp-feature-icon { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 12px;
    background: color-mix(in srgb, var(--teal) 16%, var(--surface-2)); color: var(--teal); margin-bottom: 16px; }
.lp-feature h3 { font-size: 1.12rem; margin-bottom: 8px; }
.lp-feature p { font-size: .92rem; line-height: 1.55; }

/* Workflow */
.lp-workflow { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 760px) { .lp-steps { grid-template-columns: 1fr; } }
.lp-step { padding: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.lp-step-num { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font-family: var(--display);
    font-weight: 800; font-size: 1.1rem; color: #09132d; background: var(--grad); margin-bottom: 16px; }
.lp-step h3 { font-size: 1.15rem; margin-bottom: 8px; }

/* Pricing */
.lp-pricing { display: grid; grid-template-columns: repeat(2, minmax(0, 360px)); gap: 18px; justify-content: center; align-items: start; }
@media (max-width: 760px) { .lp-pricing { grid-template-columns: 1fr; } }
.lp-plan { padding: 30px; position: relative; }
.lp-plan h3 { font-size: 1.2rem; }
.lp-price { font-family: var(--display); font-weight: 800; font-size: 2.6rem; margin: 8px 0 4px; }
.lp-price span { font-size: .9rem; font-weight: 500; color: var(--muted); }
.lp-plan-list { list-style: none; display: flex; flex-direction: column; gap: 11px; margin: 20px 0 24px; }
.lp-plan-list li { display: flex; align-items: center; gap: 10px; font-size: .92rem; }
.lp-plan-list .icon { color: var(--teal); }
.lp-plan-pro { border-color: rgba(255, 90, 78,.45); box-shadow: 0 0 0 1px rgba(255, 90, 78,.2), 0 24px 60px rgba(0,0,0,.4); }
.lp-plan-tag { position: absolute; top: -11px; left: 30px; font-size: .7rem; font-weight: 700; color: #09132d;
    background: var(--grad); padding: 4px 12px; border-radius: 999px; }

/* CTA band */
.lp-cta { padding: 24px 24px 96px; }
.lp-cta-inner { max-width: 880px; margin: 0 auto; text-align: center; padding: 60px 32px; border-radius: 26px;
    background: linear-gradient(135deg, rgba(250, 202, 44,.12), rgba(255, 90, 78,.12)); border: 1px solid var(--line-2); }
.lp-cta .btn { margin-top: 26px; padding: 14px 30px; font-size: 1.02rem; }

/* Footer */
.lp-footer { border-top: 1px solid var(--line); background: var(--surface); padding: 64px 24px 24px; }
.lp-footer-inner { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 44px 32px; }
.lp-footer-brand { max-width: 340px; }
.lp-footer-blurb { color: var(--muted); font-size: .92rem; line-height: 1.65; margin: 6px 0 20px; }
.lp-footer-col { display: flex; flex-direction: column; gap: 11px; align-items: flex-start; }
.lp-footer-col h4 { font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin: 2px 0 5px; }
.lp-footer-col a { color: var(--ink); font-size: .92rem; opacity: .82; transition: opacity .12s, color .12s; }
.lp-footer-col a:hover { opacity: 1; color: var(--teal); text-decoration: none; }
.lp-footer-bar { max-width: 1140px; margin: 52px auto 0; padding-top: 22px; border-top: 1px solid var(--line);
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.lp-footer-copy { color: var(--muted); font-size: .85rem; margin: 0; }
.lp-footer-bar-links { display: flex; gap: 20px; }
.lp-footer-bar-links a { color: var(--muted); font-size: .85rem; }
.lp-footer-bar-links a:hover { color: var(--ink); }
@media (max-width: 820px) {
    .lp-footer-inner { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
    .lp-footer-brand { grid-column: 1 / -1; max-width: 520px; }
}
@media (max-width: 480px) {
    .lp-footer { padding-top: 48px; }
    .lp-footer-inner { grid-template-columns: 1fr; gap: 30px; }
    .lp-footer-bar { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ===== Invitations ===== */
.invite-card { text-align: center; }
.invite-card .avatar.lg { margin: 0 auto 14px; }
.invite-project { font-family: var(--display); font-size: 1.6rem; margin: 6px 0 4px; }
.invite-actions { margin-top: 22px; }
.invite-pending { background: rgba(9, 19, 45, .06) !important; color: var(--muted); border: 1px dashed var(--line-2); margin-left: -8px; }
.add-existing { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }

/* ===== Toggle row ===== */
.toggle-row { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; padding: 6px 0; }
.toggle-row input[type=checkbox] { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--teal); flex: 0 0 auto; }

/* ===== Org switcher ===== */
.org-switcher { position: relative; }
.org-switcher summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(9, 19, 45, .03);
    font-size: .86rem; font-weight: 600; color: var(--ink); max-width: 180px; }
.org-switcher summary::-webkit-details-marker { display: none; }
.org-switcher summary:hover { background: rgba(9, 19, 45, .06); }
.org-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-caret { color: var(--muted); font-size: .7rem; }
.org-pop { left: 0; right: auto; width: 240px; top: 46px; }
.org-pop-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 8px; }
.org-pop-item { margin: 0; }
.org-pop-item button { width: 100%; text-align: left; background: none; border: none; color: var(--ink); font: inherit;
    padding: 8px 10px; border-radius: 8px; cursor: pointer; display: flex; justify-content: space-between; }
.org-pop-item button:hover { background: rgba(9, 19, 45, .06); }
.org-pop-item button.current { color: var(--teal); font-weight: 600; }
.org-pop-foot { display: flex; align-items: center; gap: 7px; margin-top: 8px; padding-top: 10px;
    border-top: 1px solid var(--line); font-size: .86rem; color: var(--muted); }
.org-pop-foot:hover { color: var(--ink); text-decoration: none; }
@media (max-width: 680px) { .org-switcher { display: none; } }

/* ===== Member directory ===== */
.member-dir { display: flex; flex-direction: column; gap: 10px; }
.member-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; }
.member-row.pending { opacity: .8; }
.member-info { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.member-name { font-weight: 600; }
.member-info .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-badge { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    padding: 3px 10px; border-radius: 999px; }
.role-owner  { color: var(--lime); background: rgba(250, 202, 44,.12); }
.role-admin  { color: var(--teal); background: rgba(255, 90, 78,.12); }
.role-member { color: var(--muted); background: rgba(9, 19, 45, .06); }
.member-actions { display: flex; align-items: center; gap: 8px; }
.inline-role select { padding: 6px 8px; font-size: .8rem; width: auto; }

/* ===== Priorities ===== */
.prio { display: inline-block; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
    padding: 1px 7px; border-radius: 999px; vertical-align: 1px; }
.prio-1 { color: #2563eb; background: rgba(37,99,235,.1); }
.prio-2 { color: var(--warning); background: rgba(224,137,11,.14); }
.prio-3 { color: #c2410c; background: rgba(194,65,12,.1); }
.prio-4 { color: var(--danger); background: rgba(248,113,113,.16); }

/* ===== Do date ===== */
.do-date { font-size: .76rem; color: #2563eb; font-weight: 600; margin-left: 6px; }

/* ===== Add-todo extra rows ===== */
.add-todo-row { display: flex; gap: 8px; }
.add-todo-row select { font-size: .82rem; padding: 7px 9px; }
.add-todo-notes { grid-column: 1 / -1; width: 100%; font: inherit; font-size: .85rem; padding: 8px 10px;
    border: 1px solid var(--line-2); border-radius: 9px; background: var(--surface); color: var(--ink); resize: vertical; }
.mini-date { display: flex; align-items: center; gap: 6px; font-size: .76rem; color: var(--muted); flex: 1; }
.mini-date input[type=date] { font-size: .8rem; padding: 6px 8px; }

/* ===== Phase target date + cascade ===== */
.phase-date { margin: 6px 0 4px; }
.phase-date > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: .8rem; }
.phase-date > summary::-webkit-details-marker { display: none; }
.phase-target { font-weight: 600; color: var(--ink); }
.phase-target.muted { color: var(--muted); font-weight: 500; }
.phase-status { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 1px 8px; border-radius: 999px; }
.phase-status.ahead { color: var(--success); background: rgba(74,222,128,.14); }
.phase-status.behind { color: var(--danger); background: rgba(248,113,113,.14); }
.phase-date-form { display: flex; gap: 6px; margin: 8px 0; }
.list-assign-all { margin: 4px 0 6px; }
.list-assign-all > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--muted); font-weight: 600; }
.list-assign-all > summary:hover { color: var(--ink); }
.list-assign-all > summary::-webkit-details-marker { display: none; }
.list-assign-form { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin: 10px 0 4px; padding: 12px; background: var(--surface-2); border-radius: 10px; }
.list-assign-form label { display: flex; flex-direction: column; gap: 4px; }
.list-assign-form select, .list-assign-form input[type=date] { padding: 7px 9px; }
.phase-date-form input { font-size: .8rem; padding: 6px 8px; }
.phase-shift { margin-top: 8px; }
.phase-shift-manual { margin-top: 8px; }
.phase-shift-manual summary { cursor: pointer; font-size: .76rem; color: var(--muted); list-style: none; }
.phase-shift-manual summary::-webkit-details-marker { display: none; }
.phase-shift-manual summary:hover { color: var(--primary); }
.phase-shift-form { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.phase-shift-form input[type=number] { width: 70px; font-size: .8rem; padding: 6px 8px; }

/* ============================================================
   Landing v2 — distinctive summit / mission-control redesign
   (these rules come later in the file and override the originals)
   ============================================================ */
.lp-hero { position: relative; overflow: hidden; padding: 70px 24px 60px;
    background:
      radial-gradient(900px 480px at 78% 18%, rgba(255, 90, 78,.16), transparent 60%),
      radial-gradient(700px 420px at 10% 0%, rgba(250, 202, 44,.08), transparent 55%); }
.lp-topo { position: absolute; inset: 0; width: 100%; height: 100%; color: rgba(255, 90, 78,.14);
    pointer-events: none; animation: topo-drift 40s ease-in-out infinite alternate; }
@keyframes topo-drift { from { transform: translateY(0); } to { transform: translateY(-26px); } }

.lp-hero-grid { position: relative; max-width: 1180px; margin: 0 auto; display: grid;
    grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; }
@media (max-width: 900px) { .lp-hero-grid { grid-template-columns: 1fr; text-align: center; } }

.lp-kicker { display: inline-flex; align-items: center; gap: 9px; font-size: .8rem; font-weight: 600;
    color: var(--ink); background: rgba(9, 19, 45, .04); border: 1px solid var(--line-2);
    padding: 7px 15px; border-radius: 999px; margin-bottom: 26px; }
.lp-kicker-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 12px var(--teal); }
.lp-h1 { font-family: var(--display); font-weight: 800; font-size: clamp(2.7rem, 6vw, 4.6rem);
    line-height: .98; letter-spacing: -0.04em; margin: 0; }
.lp-grad-text { background: linear-gradient(110deg, #ff5a4e, #faca2c 35%, #ff7a33 60%, #faca2c 85%, #ff5a4e);
    background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: grad-shimmer 7s ease-in-out infinite; }
@keyframes grad-shimmer { 0%, 100% { background-position: 0 0; } 50% { background-position: 100% 0; } }
@media (prefers-reduced-motion: reduce) { .lp-grad-text { animation: none; } }

/* Product preview — a CSS browser window with a mini dashboard */
.lp-workswith { max-width: 980px; margin: 0 auto; padding: 8px 24px 4px; text-align: center; }
.lp-ww-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--muted); margin: 0 0 16px; }
.lp-ww-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 30px; }
.lp-ww-logo { font-family: var(--display); font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em;
    color: color-mix(in srgb, var(--ink) 45%, transparent); transition: color .15s ease; }
.lp-ww-logo:hover { color: var(--ink); }
@media (max-width: 560px) { .lp-ww-row { gap: 12px 20px; } .lp-ww-logo { font-size: 1rem; } }

.pm-hide { display: none !important; }

/* Stages progress breakdown */
.stage-summary { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 16px; }
@media (max-width: 720px) { .stage-summary { grid-template-columns: repeat(2, 1fr); } }
.ss-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 13px 16px; display: flex; flex-direction: column; gap: 3px; }
.ss-card b { font-family: var(--display); font-weight: 800; font-size: 1.5rem; color: var(--ink); line-height: 1; }
.ss-card span { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ss-low { border-left: 3px solid var(--danger); }
.ss-mid { border-left: 3px solid #e0890b; }
.ss-done { border-left: 3px solid #16a34a; }
.ss-done b { color: #166534; }

/* Messages-with-images audit */
.mi-list { display: flex; flex-direction: column; gap: 8px; }
.mi-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: var(--ink); border-left: 3px solid var(--accent, var(--line-2)); }
.mi-row:hover { background: var(--surface-2); text-decoration: none; }
.mi-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.mi-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.mi-title { font-weight: 600; }
.mi-badge { flex: 0 0 auto; font-size: .74rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.mi-bad { background: #fdecec; color: #b3261e; }
.mi-ok { background: #dcfce7; color: #166534; }
.mi-only { display: inline-flex; align-items: center; gap: 7px; font-size: .85rem; color: var(--muted); margin-left: auto; }

/* Inbound email routing */
.db-route-alert { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding: 13px 18px; border-radius: 12px;
    background: #fff4e0; border: 1px solid #f3d39a; color: #8a5a00; font-size: .92rem; }
.db-route-alert:hover { background: #ffedcc; text-decoration: none; }
.db-route-alert--send { background: #e8f7f0; border-color: #a7e0c8; color: #0f7a52; }
.db-route-alert--send:hover { background: #d9f2e6; }
.db-route-ic { font-size: 1.1rem; }

/* ===== Dashboard "team pulse" stats ===== */
.db-pulse { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 24px; }
@media (min-width: 900px) { .db-pulse { grid-template-columns: 1fr 300px; align-items: start; } }
/* One seamless panel, hairline dividers, sharp numerals — a data strip, not
   a grid of soft cards. The accent survives only as the icon's color and a
   colored number where the number IS the signal. */
.db-pulse-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
    background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.db-pulse-tile { --pc: #8a93a6; display: flex; flex-direction: column; gap: 8px; padding: 18px 20px;
    background: var(--surface); text-decoration: none; border: 0; border-radius: 0; box-shadow: none;
    transition: background .12s ease; }
a.db-pulse-tile:hover { background: var(--surface-2); text-decoration: none; }
.db-pulse-ic { display: inline-flex; color: var(--pc); font-size: .8rem; width: auto; }
.db-pulse-n { font-family: var(--display); font-weight: 700; font-size: 2rem; line-height: 1; color: var(--ink);
    letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.db-pulse-u { font-size: .95rem; font-weight: 600; margin-left: 2px; color: var(--muted); }
.db-pulse-l { font-size: .78rem; font-weight: 500; color: var(--muted); display: inline-flex; align-items: center; gap: 7px; }
.db-pulse-tile--bad { --pc: #ef4444; }
.db-pulse-tile--good { --pc: #16a34a; }
.db-pulse-tile--warn { --pc: #e0890b; }
.db-pulse-tile--bad .db-pulse-n { color: var(--danger); }
.db-pulse-tile--good .db-pulse-n { color: #16a34a; }
.db-pulse-tile--warn .db-pulse-n { color: #e0890b; }
@media (min-width: 900px) { .db-pulse-grid { grid-template-columns: repeat(4, 1fr); } }
.db-leaderboard { padding: 18px 20px; }
.db-leaderboard h3 { margin: 0 0 12px; font-size: 1rem; display: flex; align-items: center; gap: 8px; }
.db-lb-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.db-lb-row:last-child { border-bottom: none; }
.db-lb-rank { width: 22px; text-align: center; font-size: 1.1rem; }
/* FA medal icons: gold / silver / bronze for the top-finisher ranks */
.db-lb-rank .medal-1 { color: #d4a017; }
.db-lb-rank .medal-2 { color: #94a3b8; }
.db-lb-rank .medal-3 { color: #b45309; }
.db-lb-name { flex: 1; font-size: .9rem; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-lb-n { font-size: .82rem; color: var(--muted); white-space: nowrap; }
.db-lb-n strong { color: var(--ink); }
.route-list { display: flex; flex-direction: column; gap: 14px; }
.route-card { padding: 16px 18px; }
.route-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.route-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.route-snippet { font-size: .88rem; line-height: 1.5; margin: 8px 0 12px; }
.route-pick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 12px; }
.route-pick select { padding: 8px 11px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--surface); color: var(--ink); min-width: 220px; }

/* Filter a client list by PM */
.list-filterbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.pm-filter { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 600; color: var(--muted); }
.pm-filter select { font-size: .88rem; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--surface); color: var(--ink); }

/* Audit log */
.au-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.au-fchip { font-size: .82rem; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); background: var(--surface); }
.au-fchip:hover { color: var(--ink); text-decoration: none; }
.au-fchip.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.au-list { display: flex; flex-direction: column; }
.au-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line); }
.au-row:last-child { border-bottom: none; }
.au-ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: .95rem; background: var(--surface-2); }
.au-ic.au-bad { background: #fdecec; } .au-ic.au-warn { background: #fff4e0; } .au-ic.au-good { background: #dcfce7; }
.au-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.au-summary { font-size: .92rem; color: var(--ink); font-weight: 500; }
.au-meta { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.au-action { font-family: var(--mono, monospace); font-size: .7rem; background: var(--surface-2); color: var(--muted); padding: 1px 7px; border-radius: 6px; }

/* Basecamp duplicate cleanup */
.bc-diag-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 10px 0 12px; }
@media (max-width: 560px) { .bc-diag-grid { grid-template-columns: 1fr 1fr; } }
.bc-diag-grid > div { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.bc-diag-grid b { display: block; font-family: var(--display); font-weight: 800; font-size: 1.5rem; color: var(--ink); line-height: 1; }
.bc-diag-grid span { font-size: .74rem; color: var(--muted); }
.btn-danger { background: var(--danger); color: #fff; border: 1px solid var(--danger); }
.btn-danger:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.bc-dd-daterow { display: flex; align-items: flex-end; gap: 12px; }
.bc-dd-daterow .field { margin: 0; }
.bc-dd-summary { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.bc-dd-pill { font-size: .85rem; padding: 6px 13px; border-radius: 999px; background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); }
.bc-dd-pill b { font-weight: 800; }
.bc-dd-pill.bc-dd-del { background: #fdecec; color: #b3261e; border-color: #f6c9c9; }
.bc-dd-list { list-style: none; margin: 12px 0 16px; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 360px; overflow: auto; }
.bc-dd-list li { display: flex; flex-direction: column; gap: 1px; padding: 9px 12px; border-radius: 8px; }
.bc-dd-list li:nth-child(odd) { background: var(--surface-2); }
.bc-dd-name { font-weight: 600; color: var(--ink); font-size: .92rem; }
.bc-dd-apply { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px; display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.bc-dd-apply .field { margin: 0; }

/* Social proof / testimonials */
.lp-proof-grid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .lp-proof-grid { grid-template-columns: 1fr; max-width: 560px; } }
.lp-sticky-cta { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 20px; border-radius: 999px; font-weight: 700; font-size: .95rem; text-decoration: none; color: #fff;
    background: linear-gradient(120deg, #ff5a4e, #ff7a33); box-shadow: 0 10px 30px rgba(255,90,78,.42);
    opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .25s, transform .25s; }
.lp-sticky-cta.is-on { opacity: 1; transform: translateY(0); pointer-events: auto; }
.lp-sticky-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(255,90,78,.5); }
@media (max-width: 560px) { .lp-sticky-cta { right: 12px; bottom: 12px; padding: 11px 17px; } }
@media (prefers-reduced-motion: reduce) { .lp-sticky-cta { transition: opacity .2s; transform: none; } }
.lp-value { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px;
    display: flex; flex-direction: column; gap: 10px; transition: transform .14s, box-shadow .14s; }
.lp-value:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(9,19,45,.08); }
.lp-value-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; font-size: 1.25rem;
    background: color-mix(in srgb, var(--primary) 12%, var(--surface)); color: var(--primary); }
.lp-value h3 { margin: 4px 0 0; font-size: 1.12rem; letter-spacing: -.01em; }
.lp-value p { margin: 0; color: var(--muted); line-height: 1.6; }
.lp-quote { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 26px 24px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 1px 2px rgba(9,19,45,.03); }
.lp-quote-stars { color: #f5a623; font-size: 1rem; letter-spacing: 2px; }
.lp-quote blockquote { margin: 0; font-size: 1.04rem; line-height: 1.55; color: var(--ink); font-weight: 500; }
.lp-quote-by { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.lp-quote-av { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
    color: #fff; font-weight: 800; font-size: .85rem; font-family: var(--display); }
.lp-quote-meta { display: flex; flex-direction: column; line-height: 1.25; }
.lp-quote-meta strong { font-size: .92rem; color: var(--ink); }

/* ---- Founder story ---- */
.lp-founder { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: 300px 1fr; gap: 52px; align-items: center; }
.lp-founder-photo { position: relative; }
.lp-founder-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 22px;
    box-shadow: 0 24px 60px rgba(9,19,45,.22); border: 1px solid var(--line); display: block; }
.lp-founder-mono { width: 100%; aspect-ratio: 4 / 5; border-radius: 22px; align-items: center; justify-content: center;
    font-family: var(--display); font-weight: 800; font-size: 4rem; color: #fff; background: var(--grad);
    box-shadow: 0 24px 60px rgba(9,19,45,.22); }
.lp-founder-badge { position: absolute; right: -14px; bottom: -14px; width: 54px; height: 54px; border-radius: 50%;
    display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line);
    box-shadow: 0 8px 24px rgba(9,19,45,.16); font-size: 1.4rem; color: var(--teal); }
.lp-founder-copy .eyebrow { margin-bottom: 8px; }
.lp-founder-story { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.lp-founder-story p { margin: 0; font-size: 1.06rem; line-height: 1.7; color: var(--ink); }
.lp-founder-kicker { font-weight: 700; color: var(--ink); }
.lp-founder-sign { margin-top: 22px; display: flex; flex-direction: column; gap: 2px; }
.lp-founder-name { font-family: var(--display); font-weight: 800; font-size: 1.3rem; color: var(--ink); }
@media (max-width: 820px) {
    .lp-founder { grid-template-columns: 1fr; gap: 32px; max-width: 560px; text-align: center; }
    .lp-founder-photo { max-width: 260px; margin: 0 auto; }
    .lp-founder-story { text-align: left; }
    .lp-founder-sign { align-items: center; }
}

.lp-preview { padding: 24px 24px 56px; }
.lp-preview-inner { max-width: 980px; margin: 0 auto; }
.lp-preview-eyebrow { text-align: center; margin-bottom: 16px; }
.lp-preview-window { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface);
    box-shadow: 0 30px 70px rgba(9,19,45,.16), 0 6px 18px rgba(9,19,45,.06); }
.lp-pw-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.lp-pw-dot { width: 11px; height: 11px; border-radius: 50%; background: #d6dbe4; }
.lp-pw-dot:nth-child(1) { background: #ff5f57; } .lp-pw-dot:nth-child(2) { background: #febc2e; } .lp-pw-dot:nth-child(3) { background: #28c840; }
.lp-pw-url { margin-left: 12px; font-size: .78rem; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 7px; padding: 3px 12px; }
.lp-pw-body { padding: 22px; background:
    radial-gradient(560px 200px at 90% -30%, rgba(255,90,78,.07), transparent 60%), var(--surface); }
.lp-pw-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.lp-pw-stat { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.lp-pw-stat b { display: block; font-family: var(--display); font-size: 1.5rem; font-weight: 800; color: var(--ink); line-height: 1; }
.lp-pw-stat b.hot { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-pw-stat b.warn { color: #e0890b; }
.lp-pw-stat span { font-size: .72rem; color: var(--muted); }
.lp-pw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.lp-pw-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px; box-shadow: 0 4px 14px rgba(9,19,45,.05); }
.lp-pw-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.lp-pw-ic { width: 30px; height: 30px; border-radius: 9px; background: var(--grad); color: #fff; display: grid; place-items: center; font-size: .8rem; }
.lp-pw-status { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 3px 8px; border-radius: 999px; }
.lp-pw-status.good { color: #15803d; background: rgba(74,222,128,.16); }
.lp-pw-status.warn { color: #b45309; background: rgba(250,204,21,.18); }
.lp-pw-name { font-weight: 700; font-size: .92rem; color: var(--ink); margin-bottom: 7px; }
.lp-pw-tags { display: flex; gap: 5px; margin-bottom: 12px; }
.lp-pw-tags span { font-size: .6rem; font-weight: 700; text-transform: uppercase; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 7px; }
.lp-pw-bar2 { height: 6px; background: rgba(9,19,45,.08); border-radius: 999px; overflow: hidden; margin-bottom: 10px; }
.lp-pw-bar2 i { display: block; height: 100%; background: var(--grad); border-radius: 999px; }
.lp-pw-foot { display: flex; align-items: center; gap: 4px; }
.lp-pw-foot .av { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--surface); margin-left: -6px; }
.lp-pw-foot .av:first-child { margin-left: 0; }
.lp-pw-foot .av.a { background: #ff7a59; } .lp-pw-foot .av.b { background: #4cc4b0; } .lp-pw-foot .av.c { background: #6f7cf2; }
.lp-pw-foot em { margin-left: auto; font-style: normal; font-size: .78rem; font-weight: 700; color: var(--ink); }
@media (max-width: 720px) {
    .lp-pw-stats { grid-template-columns: 1fr 1fr; }
    .lp-pw-grid { grid-template-columns: 1fr; }
}
.lp-hero .lp-sub { max-width: 540px; margin: 24px 0 0; font-size: 1.16rem; color: var(--muted); line-height: 1.6; }
@media (max-width: 900px) { .lp-hero .lp-sub { margin-left: auto; margin-right: auto; } }
.lp-hero .lp-hero-cta { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; justify-content: flex-start; }
@media (max-width: 900px) { .lp-hero .lp-hero-cta { justify-content: center; } }
.lp-cta-btn { padding: 14px 28px; font-size: 1.02rem; }
.lp-trust { display: flex; gap: 18px; margin-top: 24px; flex-wrap: wrap; color: var(--muted); font-size: .85rem; }
@media (max-width: 900px) { .lp-trust { justify-content: center; } }

/* Summit illustration */
.lp-summit { display: flex; justify-content: center; }
.lp-summit-svg { width: 100%; max-width: 440px; height: auto; filter: drop-shadow(0 22px 38px rgba(9,19,45,.16)); }
.lp-route { stroke-dashoffset: 0; animation: rope 18s linear infinite; }
@keyframes rope { to { stroke-dashoffset: -300; } }
.lp-camp circle { fill: #fff; stroke: var(--teal); stroke-width: 3.5; }
/* Outlined labels stay legible over both the dark peak and the light sky. */
.lp-camp text { fill: #fff; font-size: 12.5px; font-weight: 700; font-family: var(--font);
    paint-order: stroke; stroke: rgba(9, 19, 45, .6); stroke-width: 3.5px; stroke-linejoin: round; }
.lp-camp { opacity: 0; animation: camp-pop .5s ease forwards; animation-delay: var(--d); }
@keyframes camp-pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
.lp-flag { opacity: 0; transform-origin: 255px 84px; animation: flag-plant .6s cubic-bezier(.2,1.4,.4,1) forwards; animation-delay: 2s; }
@keyframes flag-plant { from { opacity: 0; transform: translateY(-12px) scale(.6); } to { opacity: 1; transform: none; } }

/* POV band */
.lp-pov { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    background: rgba(9, 19, 45, .015); padding: 54px 24px; }
.lp-pov p { max-width: 880px; margin: 0 auto; text-align: center; font-family: var(--display);
    font-weight: 600; font-size: clamp(1.3rem, 3vw, 1.9rem); line-height: 1.35; letter-spacing: -0.02em; color: var(--ink); }
.lp-pov strong { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Route stages */
.lp-route-stages { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: stage; }
@media (max-width: 860px) { .lp-route-stages { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .lp-route-stages { grid-template-columns: 1fr; } }
.lp-route-stages li { position: relative; padding: 26px 22px; background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius); }
.lp-route-stages li::before { content: ''; position: absolute; top: 0; left: 22px; right: 22px; height: 2px;
    background: linear-gradient(90deg, var(--teal), transparent); border-radius: 2px; }
.lp-stage-no { font-family: var(--display); font-weight: 800; font-size: 1.4rem; color: transparent;
    background: var(--grad); -webkit-background-clip: text; background-clip: text; }
.lp-route-stages h3 { font-size: 1.08rem; margin: 10px 0 6px; }
.lp-route-stages p { font-size: .92rem; line-height: 1.5; }

/* Mock priority chips */
.lp-mp { font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
    padding: 1px 7px; border-radius: 999px; margin-left: 6px; }
.lp-mp.prio-4 { color: var(--danger); background: rgba(248,113,113,.16); }
.lp-mp.do { color: #2563eb; background: rgba(37,99,235,.1); }
.lp-lock { margin-left: auto; font-size: .74rem; color: var(--muted); }

/* Feature cards — bordered, hover lift */
.lp-feature { padding: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    transition: transform .15s, border-color .15s, background .15s; }
.lp-feature:hover { transform: translateY(-4px); border-color: rgba(255, 90, 78,.4); background: var(--surface-2); }
.lp-feature-icon { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 12px;
    background: color-mix(in srgb, var(--teal) 16%, var(--surface-2)); color: var(--teal); margin-bottom: 16px; }

/* Pricing — bordered plans */
.lp-plan { padding: 30px; position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.lp-plan-pro { border-color: rgba(255, 90, 78,.45); box-shadow: 0 0 0 1px rgba(255, 90, 78,.18), 0 30px 70px rgba(0,0,0,.4); }

/* Finale */
.lp-finale { position: relative; overflow: hidden; padding: 96px 24px 110px; text-align: center; }
.lp-finale-peak { position: absolute; left: 0; bottom: 0; width: 100%; height: 220px; }
.lp-finale-inner { position: relative; max-width: 720px; margin: 0 auto; }
.lp-finale .lp-cta-btn { margin-top: 26px; }

/* ============================================================
   Light header (so the dark "PeakKR" wordmark is legible)
   Scoped to .topbar and .lp-nav — the rest of the app stays dark.
   ============================================================ */
.topbar, .lp-nav {
    border-bottom: 1px solid rgba(15,25,42,.10);
    box-shadow: 0 1px 0 rgba(15,25,42,.04), 0 6px 24px rgba(8,19,32,.18);
}
/* Solid (no backdrop-filter) on .topbar: a blurred backdrop ancestor makes the
   overflowing mega-menu composite behind page content. .lp-nav keeps the blur. */
.topbar { background: #ffffff; }
.lp-nav { background: rgba(255,255,255,.95); backdrop-filter: saturate(160%) blur(16px); }

/* Nav links */
.topbar .topnav a, .lp-nav-links a { color: #51607a; }
.topbar .topnav a:hover, .lp-nav-links a:hover { background: rgba(15,25,42,.06); color: #0f192a; }
/* Active page: a quiet tinted pill, not a solid ink block — the old filled
   tile read as a heavy black square on the icon-only Home link. */
.topbar .topnav a.active { background: rgba(15,25,42,.07); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.topbar .topnav a.active .icon { color: var(--teal); }

/* Search */
.topbar-search input { background: rgba(15,25,42,.05); color: #0f192a; border-color: rgba(15,25,42,.10); }
.topbar-search input::placeholder { color: #8a97a8; }
.topbar-search input:focus { background: #fff; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(255, 90, 78,.18); }

/* User area */
.topbar-profile, .topbar-name { color: #1a2332; }
.topbar .link-btn { color: #51607a; }
.topbar .link-btn:hover { color: #0f192a; }

/* Bell */
.topbar .bell { color: #1a2332; }
.topbar .bell:hover { background: rgba(15,25,42,.06); }
.topbar .bell-badge { box-shadow: 0 0 0 2px #fff; }

/* Ghost buttons sit on a light bg in the header → dark outline */
.topbar .btn-ghost, .lp-nav .btn-ghost {
    background: transparent; color: #1a2332; border-color: rgba(15,25,42,.16);
}
.topbar .btn-ghost:hover, .lp-nav .btn-ghost:hover { background: rgba(15,25,42,.05); }

/* Logo sizing on the light bar */
.brand-logo { height: 42px; }
@media (max-width: 560px) { .brand-logo { height: 34px; } }

/* ===== Attachments / Files ===== */
.file-upload { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.file-upload input[type=file] { font-size: .85rem; max-width: 260px; }
/* Per-file label/description rows, injected when files are picked. */
.file-label-rows { flex-basis: 100%; display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.file-label-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.file-label-row .file-label-name { flex: 0 1 180px; font-size: .78rem; color: var(--muted); font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-label-row input[type=text] { flex: 1 1 180px; width: auto; padding: 6px 9px; font-size: .82rem; }
.attach-note { display: block; font-size: .74rem; color: var(--muted); font-weight: 400;
    white-space: normal; overflow-wrap: anywhere; line-height: 1.4; }
input[type=file] { color: var(--muted); font: inherit; }
input[type=file]::file-selector-button { font: inherit; font-weight: 600; font-size: .82rem; cursor: pointer;
    background: var(--surface-2); color: var(--ink); border: 1px solid var(--line-2); border-radius: 8px;
    padding: 7px 12px; margin-right: 10px; }
input[type=file]::file-selector-button:hover { background: rgba(9, 19, 45, .08); }

.attach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-top: 4px; }
.attach-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.attach-thumb { display: block; height: 110px; background-size: cover; background-position: center; background-color: var(--bg-2); }
.attach-meta { display: flex; flex-direction: column; padding: 9px 11px; gap: 2px; }
.attach-meta a { font-size: .84rem; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attach-meta span { font-size: .74rem; color: var(--muted); }
.attach-file { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px; color: var(--ink); height: 100%; }
.attach-file:hover { background: var(--surface-2); text-decoration: none; }
.attach-glyph { font-size: 1.7rem; }
.attach-name { font-size: .84rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.attach-size { font-size: .74rem; color: var(--muted); }
.attach-del { position: absolute; top: 6px; right: 6px; opacity: 0; transition: .15s; }
.attach-card:hover .attach-del { opacity: 1; }
.attach-del .del-x { background: rgba(8,19,32,.7); border-radius: 6px; width: 24px; height: 24px; color: #fff; }

/* ===== Dashboard banner ===== */
.db-banner { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius);
    background:
      radial-gradient(700px 320px at 92% 140%, rgba(255, 90, 78,.16), transparent 60%),
      radial-gradient(520px 280px at 6% 150%, rgba(250, 202, 44,.09), transparent 55%),
      var(--surface);
    padding: 22px 26px 0; margin-bottom: 20px; }
.db-banner { --brand: #ff5a4e; }
.db-topo { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--brand, #ff5a4e); opacity: .12; pointer-events: none; }
/* On the dashboard the ridge lines sit at the bottom as a horizon — so the
   greeting (not the mountain) is the first thing you read. */
.db-banner .db-topo { inset: auto 0 0 0; height: 58%; opacity: .14; }
.db-banner .eyebrow { color: var(--brand, #ff5a4e); }
.db-brand-logo { max-height: 36px; max-width: 180px; object-fit: contain; display: block; margin-bottom: 10px; }
.db-banner-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.db-banner-inner .lead { color: var(--muted); font-size: .92rem; margin-top: 2px; }
.db-banner .display { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem); }
.db-banner .eyebrow { margin-bottom: 3px; }
.db-stats { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
    margin-top: 16px; margin-bottom: 16px;
    background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.db-health { position: relative; max-width: 680px; padding-bottom: 22px; }
.db-health-bar { display: flex; gap: 2px; height: 8px; border-radius: 999px; overflow: hidden; background: var(--surface-2); }
.dh-seg { height: 100%; }
.dh-good { background: #22c55e; } .dh-warn { background: #f5b50a; } .dh-bad { background: #ef4444; } .dh-none { background: var(--line-2); }
.db-health-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 9px; }
.dh-key { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; color: var(--muted); }
.dh-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.db-stat { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; min-width: 0; color: var(--ink);
    background: var(--surface); border: 0; border-radius: 0; box-shadow: none;
    transition: background .12s ease; }
a.db-stat:hover { background: var(--surface-2); text-decoration: none; }
.db-stat-n { font-family: var(--display); font-weight: 700; font-size: 1.75rem; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.db-stat-accent { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.db-stat--alert { background: color-mix(in srgb, var(--danger) 6%, var(--surface)); }
.db-stat--alert .db-stat-n { color: var(--danger); }
.db-stat-l { font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.section-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }

/* ===== Summit mark (empty states) ===== */
.summit-mark { display: block; margin: 0 auto 16px; filter: drop-shadow(0 6px 16px rgba(255, 90, 78,.2)); }

/* ===== Hill Chart ===== */
.hill-add { position: relative; }
.hill-add > summary { list-style: none; }
.hill-add > summary::-webkit-details-marker { display: none; }
.hill-add-form { position: absolute; right: 0; top: 40px; z-index: 20; width: 280px;
    background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.hill-colors { display: flex; gap: 8px; }
.hill-swatch { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; position: relative; box-shadow: inset 0 0 0 2px rgba(9, 19, 45, .18); }
.hill-swatch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.hill-swatch:has(input:checked) { box-shadow: 0 0 0 2px var(--ink), inset 0 0 0 2px rgba(255,255,255,.3); }
.hill-hint { margin: -8px 0 14px; }

.hill { position: relative; padding: 16px 16px 0; }
.hill-svg { display: block; width: 100%; height: 280px; }
.hill-mid { stroke: rgba(232,237,242,.12); }
.hill-axis { display: flex; justify-content: space-between; padding: 0 6px 14px; margin-top: -8px;
    font-size: .78rem; color: var(--muted); font-weight: 500; }
.hill-axis span:first-child::before { content: '↑ '; }
.hill-axis span:last-child::after { content: ' ↓'; }

/* dots overlay sits exactly over the 280px svg */
.hill-dots { position: absolute; left: 16px; right: 16px; top: 16px; height: 280px; pointer-events: none; }
.hill-dot { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column;
    align-items: center; pointer-events: auto; --c: var(--teal); }
.hill-bead { width: 22px; height: 22px; border-radius: 50%; background: var(--c); cursor: grab;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 28%, transparent), 0 4px 10px rgba(0,0,0,.4);
    touch-action: none; transition: transform .1s; }
.hill-bead:hover { transform: scale(1.12); }
.hill-dot.grabbing .hill-bead { cursor: grabbing; transform: scale(1.2); }
.hill-label { margin-top: 7px; font-size: .8rem; font-weight: 600; white-space: nowrap;
    background: var(--surface-2); border: 1px solid var(--line); padding: 2px 9px; border-radius: 999px;
    color: var(--ink); max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.hill-del { position: absolute; top: -9px; right: -9px; opacity: 0; transition: .12s; }
.hill-dot:hover .hill-del { opacity: 1; }
.hill-del button { width: 20px; height: 20px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--danger); color: #1a0606; font-weight: 800; font-size: .9rem; line-height: 1; }
.hill-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: .9rem; pointer-events: none; }

/* ============================================================
   Landing v3 — bigger mountain, no browser chrome, unique sections
   ============================================================ */
/* Announcement strip */
.lp-announce { display: flex; align-items: center; gap: 10px; justify-content: center;
    max-width: max-content; margin: 22px auto 0; padding: 8px 18px; border-radius: 999px;
    background: rgba(9, 19, 45, .04); border: 1px solid var(--line-2); color: var(--ink);
    font-size: .86rem; font-weight: 500; }
.lp-announce:hover { border-color: rgba(255, 90, 78,.45); text-decoration: none; }
.lp-announce-tag { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
    color: #09132d; background: var(--grad); padding: 2px 9px; border-radius: 999px; }
.lp-announce-arrow { color: var(--teal); }

/* Bigger summit */
.lp-hero { padding-top: 36px; }
.lp-summit-svg { max-width: 560px; }
@media (max-width: 900px) { .lp-summit-svg { max-width: 420px; margin: 0 auto; } }

/* Problem band */
.lp-problem { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(9, 19, 45, .02), transparent); padding: 80px 24px; }
.lp-problem-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 860px) { .lp-problem-inner { grid-template-columns: 1fr; gap: 32px; } }
.lp-problem-text { color: var(--muted); font-size: 1.08rem; line-height: 1.65; margin: 16px 0 24px; }
.lp-cascade { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.lp-cascade-row { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 14px; }
.lp-cc-name { font-size: .85rem; font-weight: 600; color: var(--muted); }
.lp-cc-bar { height: 8px; border-radius: 999px; background: rgba(9, 19, 45, .06); overflow: hidden; }
.lp-cc-bar b { display: block; height: 100%; background: var(--grad); border-radius: 999px; }
.lp-cc-bar.done b { background: var(--success); }
.lp-cc-date { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lp-cc-date i { color: var(--teal); font-style: normal; font-weight: 600; }
.lp-cc-date.was { text-decoration: line-through; opacity: .6; }
.lp-cascade-note { font-size: .82rem; color: var(--ink); border-top: 1px solid var(--line); padding-top: 12px; }

/* Signature spotlights */
.lp-spot-wrap { max-width: 1000px; margin: 0 auto; padding: 64px 24px; display: flex; flex-direction: column; gap: 46px; }
.lp-spot { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.lp-spot-rev .lp-spot-copy { order: 2; }
@media (max-width: 860px) { .lp-spot { grid-template-columns: 1fr; gap: 26px; } .lp-spot-rev .lp-spot-copy { order: 0; } }
.lp-spot-kicker { display: inline-block; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
    color: var(--teal); margin-bottom: 12px; }
.lp-spot-copy h3 { font-family: var(--display); font-size: clamp(1.4rem, 2.6vw, 1.9rem); letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 12px; }
.lp-spot-copy h3 em { font-style: italic; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-spot-copy p { font-size: 1.02rem; line-height: 1.6; }
.lp-spot-visual { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }

.lp-mini-hill { width: 100%; height: auto; }
.lp-mini-axis { display: flex; justify-content: space-between; font-size: .72rem; color: var(--muted); margin-top: 4px; }

.lp-mini-phases { display: flex; flex-direction: column; gap: 10px; }
.lp-mph { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 12px; font-weight: 600; font-size: .92rem;
    background: var(--bg-2); border: 1px solid var(--line); }
.lp-mph b { margin-left: auto; font-weight: 700; color: var(--muted); }
.lp-mph-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.lp-mph.done { border-color: rgba(74,222,128,.3); } .lp-mph.done .lp-mph-dot { background: var(--success); }
.lp-mph.active { border-color: rgba(255, 90, 78,.4); } .lp-mph.active .lp-mph-dot { background: var(--teal); }
.lp-mph.locked { opacity: .6; }

.lp-mini-timer { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 16px; }
.lp-mt-pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); animation: pulse 1.4s infinite; }
.lp-mt-clock { display: block; font-family: var(--display); font-weight: 800; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.lp-mt-stop { margin-left: auto; font-size: .82rem; font-weight: 700; color: var(--danger); border: 1px solid rgba(248,113,113,.4); padding: 6px 14px; border-radius: 999px; }
.lp-mini-week { display: flex; align-items: flex-end; gap: 8px; height: 80px; }
.lp-mini-week span { flex: 1; background: linear-gradient(180deg, var(--teal), rgba(255, 90, 78,.3)); border-radius: 6px 6px 0 0; min-height: 4px; }
.lp-mini-week span.hot { background: var(--grad); }

/* For-teams */
.lp-team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 760px) { .lp-team-grid { grid-template-columns: 1fr; } }
.lp-team-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.lp-team-emoji { font-size: 1.8rem; }
.lp-team-card h3 { font-size: 1.15rem; margin: 12px 0 8px; }
.lp-team-card p { font-size: .94rem; line-height: 1.55; }

/* ===== Task statuses ===== */
.status-menu { position: relative; flex: 0 0 auto; }
.status-menu > summary { list-style: none; cursor: pointer; }
.status-menu > summary::-webkit-details-marker { display: none; }
.status-pill { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .02em;
    padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.st-open    { color: #5d6781; background: rgba(93,103,129,.12); }
.st-prog    { color: var(--teal); background: rgba(255, 90, 78,.14); }
.st-review  { color: var(--warning); background: rgba(250,204,21,.14); }
.st-wait    { color: #b45309; background: rgba(245,158,11,.14); }
.st-blocked { color: var(--danger); background: rgba(248,113,113,.16); }
.st-done    { color: var(--success); background: rgba(74,222,128,.14); }
.status-pop { position: absolute; right: 0; top: 26px; z-index: 30; width: 200px; padding: 10px;
    background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: var(--shadow-lg);
    display: flex; flex-direction: column; gap: 5px; }
.status-reason { font-size: .8rem; padding: 7px 9px; margin-bottom: 4px; }
.status-opt { text-align: left; border: 1px solid transparent; cursor: pointer; font: inherit; font-size: .82rem;
    font-weight: 600; padding: 6px 10px; border-radius: 8px; }
.status-opt.is-current { outline: 2px solid var(--line-2); }

/* status accent on the row */
.todo-item.status-waiting { border-left: 2px solid rgba(245,158,11,.55); padding-left: 8px; margin-left: -10px; }
.todo-item.status-blocked { border-left: 2px solid rgba(248,113,113,.6); padding-left: 8px; margin-left: -10px; }
.todo-item.status-in_review { border-left: 2px solid rgba(250,204,21,.5); padding-left: 8px; margin-left: -10px; }
.todo-item.status-in_progress { border-left: 2px solid rgba(255, 90, 78,.5); padding-left: 8px; margin-left: -10px; }

/* ===== Dependencies / blocked ===== */
.dep-badge { font-size: .68rem; font-weight: 700; color: var(--warning); background: rgba(250,204,21,.12);
    padding: 1px 8px; border-radius: 999px; margin-left: 6px; }
.blocked-reason { font-size: .72rem; color: var(--danger); margin-left: 6px; max-width: 180px;
    display: inline-block; vertical-align: bottom; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== Waiting on client ===== */
.waiting-note { font-size: .72rem; color: #b45309; margin-left: 6px; max-width: 220px;
    display: inline-block; vertical-align: bottom; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-wait { display: flex; flex-direction: column; gap: 4px; padding-bottom: 4px; margin-bottom: 2px; border-bottom: 1px dashed var(--line-2); }
.status-wait .status-reason { margin-bottom: 0; }
.status-wait-row { display: flex; gap: 4px; }
.status-wait-row input, .status-wait-row select { flex: 1 1 50%; min-width: 0; font-size: .74rem; padding: 5px 7px;
    border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-2); color: var(--ink); }
.task-waitbar { display: flex; align-items: flex-start; gap: 9px; font-size: .84rem; color: #92600a;
    background: rgba(245,158,11,.09); border: 1px solid rgba(245,158,11,.3); border-radius: 11px;
    padding: 9px 13px; margin: 10px 0 0; }
[data-theme="dark"] .task-waitbar { color: #fbbf24; }
.prop-wait { display: flex; flex-direction: column; gap: 8px; padding: 8px 10px; margin: -2px 0 8px;
    background: rgba(245,158,11,.07); border: 1px solid rgba(245,158,11,.25); border-radius: 10px; }
.prop-wait-f { display: flex; align-items: center; gap: 8px; }
.prop-wait-f input, .prop-wait-f select { flex: 1; min-width: 0; }
.rp-wait-days { font-weight: 700; }
.rp-wait-days.is-aging { color: #b45309; }
.rp-wait-days.is-old { color: var(--danger); }

/* ===== Testimonials & referrals ===== */
.tm-add { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; padding: 16px 18px; margin-bottom: 20px; }
.tm-add .field { margin: 0; }
.tm-add-proj select { width: auto; min-width: 220px; }
.tm-add-why { flex: 1 1 280px; }
.tm-add-why input { width: 100%; }
.tm-h { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; margin: 22px 0 10px; }
.tm-count { font-size: .72rem; font-weight: 800; background: var(--grad); color: #fff; border-radius: 999px; padding: 2px 9px; }
.tm-card { padding: 15px 18px; margin-bottom: 12px; }
.tm-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.tm-proj { display: inline-flex; align-items: center; gap: 7px; }
.tm-chip { font-size: .68rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: rgba(93,103,129,.12); color: #5d6781; }
.tm-chip-seo { background: rgba(34,197,94,.14); color: #15803d; }
.tm-chip-health { background: rgba(236,72,153,.12); color: #be185d; }
.tm-chip-ann { background: rgba(245,158,11,.14); color: #b45309; }
.tm-reason { margin: 0 0 10px; font-weight: 600; }
.tm-draft { width: 100%; font: inherit; font-size: .86rem; line-height: 1.5; color: var(--ink); background: var(--bg-2);
    border: 1px solid var(--line-2); border-radius: 10px; padding: 11px 13px; resize: vertical; }
.tm-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.tm-recv { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tm-recv input { flex: 1 1 260px; min-width: 0; }
.tm-shelf { padding: 6px 18px; }
.tm-trophy { display: flex; align-items: flex-start; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.tm-trophy:last-child { border-bottom: 0; }
.tm-trophy-ico { color: #f0a500; font-size: 1.1rem; margin-top: 1px; }
.tm-result { font-size: .84rem; margin-top: 3px; overflow-wrap: anywhere; }

/* ===== Post graphic studio ===== */
.gfx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.gfx-tile { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.gfx-thumb { display: flex; align-items: center; justify-content: center; background:
    conic-gradient(#eceff3 25%, #f7f8fa 0 50%, #eceff3 0 75%, #f7f8fa 0) 0 0/22px 22px; border-radius: 9px; overflow: hidden; }
.gfx-thumb img { width: 100%; height: 100%; object-fit: contain; }
.gfx-thumb-x { font-size: 2rem; opacity: .5; }
.gfx-tile-name { font-weight: 650; display: block; }
.gfx-tile-actions { display: flex; gap: 10px; margin-top: 2px; }
.gfx-topbar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 12px; flex-wrap: wrap; }
.gfx-name { flex: 1 1 280px; min-width: 0; font: inherit; font-weight: 600; padding: 8px 11px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--bg-2); color: var(--ink); }
.gfx-topbar select { max-width: 220px; }
.gfx-savestate { margin-left: auto; }
.gfx-shell { display: grid; grid-template-columns: 250px 1fr 260px; gap: 12px; align-items: start; }
.gfx-side, .gfx-props { padding: 12px 14px; position: sticky; top: 70px; max-height: calc(100vh - 90px); overflow-y: auto; }
.gfx-side-l { display: block; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 12px 0 5px; }
.gfx-side-l:first-child { margin-top: 0; }
.gfx-side select, .gfx-props select, .gfx-props input[type="number"], .gfx-props textarea {
    width: 100%; font: inherit; font-size: .84rem; padding: 6px 8px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-2); color: var(--ink); }
.gfx-addrow { display: flex; flex-wrap: wrap; gap: 6px; }
.gfx-bgrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gfx-bgrow select { flex: 1 1 110px; width: auto; }
.gfx-color input[type="color"] { width: 34px; height: 30px; padding: 2px; border: 1px solid var(--line-2); border-radius: 7px; background: var(--bg-2); cursor: pointer; }
.gfx-layers { display: flex; flex-direction: column; gap: 3px; }
.gfx-lrow { display: flex; align-items: center; gap: 3px; padding: 5px 7px; border-radius: 7px; cursor: pointer; font-size: .8rem; }
.gfx-lrow:hover { background: var(--bg-2); }
.gfx-lrow.active { background: rgba(79,124,255,.1); outline: 1px solid rgba(79,124,255,.4); }
.gfx-lname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gfx-lrow button { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: .72rem; padding: 2px 3px; }
.gfx-lrow button:hover { color: var(--ink); }
.gfx-lico { flex: 0 0 auto; font-size: .7rem; width: 16px; text-align: center; color: var(--muted); }
.gfx-leye, .gfx-llock { font-size: .78rem !important; }
.gfx-lrow.is-hidden .gfx-lname, .gfx-lrow.is-hidden .gfx-lico { opacity: .38; text-decoration: line-through; }
.gfx-lrow.is-locked .gfx-lname { font-style: italic; }
.gfx-palette { display: flex; flex-wrap: wrap; gap: 6px; }
.gfx-swatch { width: 26px; height: 26px; border-radius: 8px; border: 1px solid rgba(9,19,45,.18); cursor: pointer; padding: 0; }
.gfx-swatch:hover { transform: scale(1.12); }
.gfx-swatch-add { background: var(--bg-2); color: var(--muted); font-weight: 700; font-size: .9rem; line-height: 1; }
.gfx-ideas { margin-top: 4px; }
.gfx-idea { display: block; width: 100%; text-align: left; font: inherit; font-size: .78rem; font-weight: 600;
    background: rgba(255,90,78,.06); border: 1px solid rgba(255,90,78,.25); color: var(--ink);
    border-radius: 9px; padding: 7px 9px; margin-bottom: 5px; cursor: pointer;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gfx-idea:hover { background: rgba(255,90,78,.12); }
.gfx-rangewrap { display: flex; align-items: center; gap: 7px; }
.gfx-rangewrap input[type="range"] { flex: 1; }
.gfx-rangev { font-variant-numeric: tabular-nums; min-width: 26px; text-align: right; }
.gfx-stage { min-height: 70vh; display: flex; align-items: center; justify-content: center; border-radius: 12px; overflow: hidden;
    background: conic-gradient(#e7eaef 25%, #f3f5f8 0 50%, #e7eaef 0 75%, #f3f5f8 0) 0 0/26px 26px; }
[data-theme="dark"] .gfx-stage { background: conic-gradient(#20242c 25%, #171a20 0 50%, #20242c 0 75%, #171a20 0) 0 0/26px 26px; }
#gfx-canvas { box-shadow: 0 8px 40px rgba(9,19,45,.25); touch-action: none; }
.gfx-proprow { display: flex; gap: 8px; margin-top: 8px; }
.gfx-proprow label { flex: 1; font-size: .74rem; font-weight: 600; color: var(--muted); display: flex; flex-direction: column; gap: 3px; }
.gfx-proprow input[type="color"] { width: 100%; height: 32px; padding: 2px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-2); }
.gfx-check { flex-direction: row !important; align-items: center; gap: 6px !important; }
.gfx-props #gp-removebg { margin-top: 10px; width: 100%; }
.gfx-bgr { position: fixed; inset: 0; z-index: 500; background: rgba(9,19,45,.55); display: flex; align-items: center; justify-content: center; padding: 20px; }
.gfx-bgr-panel { width: min(960px, 96vw); max-height: 92vh; overflow: auto; padding: 18px 20px; }
.gfx-bgr-tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 10px 0; font-size: .82rem; }
.gfx-bgr-tools label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--muted); }
.gfx-bgr-stage { background: conic-gradient(#e7eaef 25%, #f7f8fa 0 50%, #e7eaef 0 75%, #f7f8fa 0) 0 0/20px 20px; border-radius: 10px; display: flex; justify-content: center; padding: 8px; }
#gfx-bgr-canvas { max-width: 100%; max-height: 58vh; cursor: crosshair; }
.gfx-bgr-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }
.gfx-air-presets { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0; }
.gfx-air-chip { font: inherit; font-size: .8rem; font-weight: 600; padding: 7px 12px; border-radius: 999px; cursor: pointer;
    background: rgba(255,90,78,.07); border: 1px solid rgba(255,90,78,.28); color: var(--ink); }
.gfx-air-chip:hover { background: rgba(255,90,78,.14); }
#gfx-air-prompt { width: 100%; font: inherit; font-size: .86rem; padding: 9px 11px; border: 1px solid var(--line-2);
    border-radius: 9px; background: var(--bg-2); color: var(--ink); margin-bottom: 10px; resize: vertical; }
#gfx-air-canvas { max-width: 100%; max-height: 46vh; }
.gfx-air-msg { margin: 8px 0 0; font-weight: 600; }

/* ===== Page compare (old vs new URL) ===== */
.pgc-form { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 16px; align-items: end;
    padding: 20px 22px; margin-bottom: 18px; }
.pgc-url { margin: 0; min-width: 0; }
.pgc-url input { width: 100%; }
.pgc-vs { font-weight: 800; color: var(--muted); padding-bottom: 11px; }
.pgc-form .btn { margin-bottom: 1px; }
@media (max-width: 860px) { .pgc-form { grid-template-columns: 1fr; } .pgc-vs { display: none; } }
.pgc-verdict { padding: 16px 20px; margin-bottom: 16px; font-size: .96rem; line-height: 1.55; border-left: 4px solid #16a34a; }
.pgc-verdict.is-bad { border-left-color: #dc2626; }
.pgc-card { padding: 18px 22px; margin-bottom: 16px; }
.pgc-card > h3 { margin: 0 0 14px; }
.pgc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .pgc-grid { grid-template-columns: 1fr; } }
.pgc-table { table-layout: fixed; min-width: 760px; }
.pgc-table th:nth-child(1), .pgc-table td:nth-child(1) { width: 15%; }
.pgc-table th:nth-child(2), .pgc-table td:nth-child(2) { width: 31%; }
.pgc-table th:nth-child(3), .pgc-table td:nth-child(3) { width: 31%; }
.pgc-table th:nth-child(4), .pgc-table td:nth-child(4) { width: 23%; }
/* The shared .rp-table dialect nowraps cells (fine for numbers, fatal for
   sentence-long titles in fixed columns — text painted across neighbours).
   Extra specificity so file order can never re-break it. */
table.pgc-table td { white-space: normal; overflow-wrap: anywhere; vertical-align: top; padding-top: 12px; padding-bottom: 12px; }
.pgc-el { font-weight: 650; }
.pgc-val { overflow-wrap: anywhere; font-size: .85rem; line-height: 1.5; color: var(--ink); }
.pgc-chip { display: inline-block; font-size: .7rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.pgc-ok   { background: rgba(22,163,74,.12); color: #15803d; }
.pgc-diff { background: rgba(245,158,11,.14); color: #b45309; }
.pgc-miss { background: rgba(220,38,38,.12); color: #b91c1c; }
.pgc-warn { background: rgba(220,38,38,.18); color: #991b1b; }
.pgc-add  { background: rgba(79,124,255,.12); color: #3556c8; }
.pgc-none { background: var(--bg-2); color: var(--muted); }
.pgc-ign  { background: rgba(93,103,129,.1); color: var(--muted); text-decoration: line-through; }
.pgc-igrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; grid-column: 1 / -1; font-size: .82rem; }
.pgc-igrow-l { font-weight: 700; color: var(--muted); cursor: help; margin-right: 4px; }
/* Pill toggles. The sweep form's width:100% input rule must never stretch
   these checkboxes (that's what scattered them across the row once). */
.pgc-igbox { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink); cursor: pointer;
    white-space: nowrap; padding: 5px 12px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface);
    transition: border-color .12s ease, background .12s ease; }
.pgc-igbox:hover { border-color: var(--ink); }
.pgc-igbox input[type="checkbox"] { width: auto !important; flex: 0 0 auto; margin: 0; accent-color: var(--primary); }
.pgc-igbox:has(input:checked) { background: rgba(255,90,78,.09); border-color: rgba(255,90,78,.55); }
.pgc-siteform .pgc-igrow { margin: 10px 0 2px; }
.pgc-igedit { padding: 12px 18px; margin-bottom: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }

/* ===== Admin email log ===== */
.el-kind { display: inline-block; font-size: .72rem; font-weight: 700; padding: 2px 9px; border-radius: 999px;
    background: rgba(79,124,255,.09); color: #3556c8; white-space: nowrap; margin: 1px 2px 1px 0; }
.el-addr { overflow-wrap: anywhere; font-size: .85rem; }
.el-subj { overflow-wrap: anywhere; font-size: .85rem; white-space: normal; }
table.el-recent td, table.el-people td { white-space: normal; vertical-align: top; }
.el-when { white-space: nowrap !important; }

/* Message board bulk delete */
.msg-bulk-row { display: flex; align-items: flex-start; gap: 10px; }
.msg-bulk-check { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 26px; accent-color: var(--primary); cursor: pointer; }
.msg-bulk-row .message-row { flex: 1; min-width: 0; }
.msg-bulk-bar { display: flex; align-items: center; gap: 14px; padding: 10px 16px; margin-bottom: 12px; font-size: .9rem; }
.msg-bulk-del { background: rgba(220,38,38,.1); color: #b91c1c; border: 1px solid rgba(220,38,38,.3); }
.msg-bulk-del:hover { background: rgba(220,38,38,.18); color: #991b1b; }
.pgc-note { display: block; margin-top: 4px; overflow-wrap: anywhere; white-space: normal; }
.pgc-r-missing td, .pgc-r-warn td { background: rgba(220,38,38,.045); }
.pgc-stat { margin: 8px 0; line-height: 1.6; }
.pgc-misshead { font-weight: 700; font-size: .86rem; margin: 16px 0 7px; }
.pgc-list { margin: 0; padding-left: 20px; font-size: .87rem; line-height: 1.55; columns: 1; }
.pgc-list li { margin: 3px 0; break-inside: avoid; }
@media (min-width: 1100px) { .pgc-card .pgc-list { columns: 2; column-gap: 28px; } }
.pgc-cov { display: flex; align-items: center; gap: 18px; margin-bottom: 6px; }
.pgc-cov-n { font-size: 2.4rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; flex: 0 0 auto; }
.pgc-cov-n.is-good { color: #16a34a; } .pgc-cov-n.is-mid { color: #d97706; } .pgc-cov-n.is-bad { color: #dc2626; }
.pgc-cov-t { flex: 1; font-size: .92rem; line-height: 1.5; }
.pgc-cov-bar { display: flex; height: 8px; border-radius: 999px; background: rgba(220,38,38,.15); overflow: hidden; margin-top: 8px; }
.pgc-cov-ok { background: #16a34a; } .pgc-cov-part { background: #f59e0b; }
.pgc-paras { display: flex; flex-direction: column; gap: 7px; }
.pgc-para { font-size: .86rem; line-height: 1.55; padding: 9px 13px; border-radius: 9px; }
.pgc-para-miss { background: rgba(220,38,38,.06); border: 1px solid rgba(220,38,38,.16); }
.pgc-para-part { background: rgba(245,158,11,.07); border: 1px solid rgba(245,158,11,.22); }
.pgc-para-moved { background: rgba(79,124,255,.06); border: 1px solid rgba(79,124,255,.2); }
.pgc-para .pgc-chip { margin-right: 6px; }
.pgc-terms { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.pgc-term { font-size: .78rem; font-weight: 600; background: rgba(220,38,38,.08); color: #b91c1c;
    border: 1px solid rgba(220,38,38,.2); border-radius: 999px; padding: 3px 10px; }
.pgc-foot { margin-top: 4px; }
.pgc-runbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.pgc-runbar-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pgc-share-url { font: inherit; font-size: .78rem; padding: 6px 9px; border: 1px solid var(--line-2); border-radius: 8px;
    background: var(--bg-2); color: var(--muted); width: 260px; }
.pgc-delta { padding: 12px 18px; margin-bottom: 12px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: .92rem; }
.pgc-jsr { padding: 12px 18px; margin-bottom: 12px; font-size: .9rem; line-height: 1.55; border-radius: 12px;
    background: rgba(79,124,255,.07); border: 1px solid rgba(79,124,255,.25); }
.pgc-sitecard { margin-top: 4px; }
.pgc-siteform textarea, .pgc-siteform input { width: 100%; }
.pgc-siterow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 800px) { .pgc-siterow { grid-template-columns: 1fr; } }
.pgc-siteform .btn { margin-top: 12px; }
.pgc-progress { padding: 16px 20px; margin-bottom: 14px; font-size: .95rem; }
.pgc-progress .pgc-cov-bar { margin-top: 10px; background: var(--bg-2); }
.pgc-cov-mini { font-weight: 800; margin-right: 8px; }
.pgc-cov-mini.is-good { color: #16a34a; } .pgc-cov-mini.is-mid { color: #d97706; } .pgc-cov-mini.is-bad { color: #dc2626; }
.pgc-saved-name { font-weight: 650; display: block; }
.pgc-saved-x { text-align: right; }
table.pgc-saved td { white-space: normal; vertical-align: top; padding-top: 12px; padding-bottom: 12px; }
@media (max-width: 1100px) { .gfx-shell { grid-template-columns: 1fr; } .gfx-side, .gfx-props { position: static; max-height: none; } .gfx-stage { min-height: 50vh; } }
.todo-extras { display: flex; gap: 14px; margin: 2px 0 8px 30px; flex-wrap: wrap; }
.todo-extras .add-sub { margin: 0; }
.add-dep summary { color: var(--warning); }
.dep-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .82rem; margin: 4px 0; }
.dep-row .dep-done { color: var(--muted); text-decoration: line-through; }
.add-dep select { font-size: .82rem; max-width: 200px; }

/* ===== Board filter ===== */
.todo-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.board-filter { display: flex; gap: 8px; }
.board-filter select { font-size: .84rem; padding: 7px 10px; width: auto; min-width: 120px; }
.filtered-out { display: none !important; }

/* ===== Workload ===== */
.workload-total { text-align: right; }
.workload-total .db-stat-n { display: block; }
.workload-list { padding: 8px 22px; }
.wl-row { display: grid; grid-template-columns: 220px 1fr auto; align-items: center; gap: 18px;
    padding: 16px 0; border-bottom: 1px solid var(--line); }
.wl-row:last-child { border-bottom: none; }
.wl-who { display: flex; align-items: center; gap: 12px; }
.wl-who strong { display: block; font-size: .95rem; }
.wl-bar-wrap { height: 12px; background: rgba(9, 19, 45, .05); border-radius: 999px; overflow: hidden; }
.wl-bar { height: 100%; background: var(--grad); border-radius: 999px; min-width: 0; transition: width .3s; }
.wl-counts { display: flex; gap: 12px; align-items: center; font-size: .82rem; white-space: nowrap; }
.wl-open { font-weight: 700; }
.wl-due { color: var(--accent-ink); }
.wl-over { color: var(--danger); font-weight: 600; }
.wl-free { color: var(--success); font-weight: 600; }
@media (max-width: 720px) {
    .wl-row { grid-template-columns: 1fr; gap: 8px; }
    .wl-counts { flex-wrap: wrap; }
}

/* ===== Project favicon icon ===== */
.project-icon { position: relative; overflow: hidden; }
.pi-emoji { line-height: 1; }
.pi-fav { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
    padding: 22%; border-radius: inherit; background: color-mix(in srgb, var(--accent) 16%, var(--surface-2)); }
.project-head-main .project-icon { margin-bottom: 0; }

/* ===== Project domain editor ===== */
.proj-domain { margin-top: 8px; font-size: .85rem; }
.proj-domain > summary { list-style: none; cursor: pointer; color: var(--teal); display: inline-block; }
.proj-domain > summary::-webkit-details-marker { display: none; }
.proj-domain > summary:hover { text-decoration: underline; }
.proj-domain-form { display: flex; gap: 8px; margin-top: 8px; max-width: 320px; }
.proj-domain-form input { font-size: .85rem; padding: 7px 10px; }

/* Clickable domain + pencil edit */
.proj-domain-wrap { display: inline-flex; align-items: center; gap: 4px; position: relative; }
.proj-domain-link { display: inline-flex; align-items: center; gap: 6px; color: var(--primary); font-weight: 600; font-size: .9rem; }
.proj-domain-link:hover { color: var(--primary-d); text-decoration: none; }
.proj-domain-link:hover span:not(.proj-domain-ext) { text-decoration: underline; }
.proj-domain-fav { width: 15px; height: 15px; border-radius: 4px; flex: 0 0 auto; }
.proj-domain-ext { font-size: .72rem; opacity: .65; }
.proj-domain-edit { margin: 0; }
.proj-domain-edit > summary { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px;
    color: var(--muted); cursor: pointer; }
.proj-domain-edit > summary:hover { background: rgba(9, 19, 45, .06); color: var(--ink); text-decoration: none; }
.proj-domain-edit[open] > summary { background: rgba(9, 19, 45, .06); color: var(--ink); }
.proj-pm { position: relative; margin: 0; }
.proj-pm > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; }
.proj-pm > summary::-webkit-details-marker { display: none; }
.proj-pm-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; color: var(--muted); white-space: nowrap; }
.proj-pm-chip strong { color: var(--ink); font-weight: 600; }
.proj-pm-chip .icon { color: var(--muted); opacity: .6; }
.proj-pm > summary:hover .proj-pm-chip { color: var(--ink); }
.proj-desc-edit .proj-desc { color: var(--muted); white-space: normal; }
.proj-desc-edit .proj-desc .icon { color: var(--muted); opacity: .6; vertical-align: middle; }
.proj-pop-form { position: absolute; top: 28px; left: 0; z-index: 20; display: flex; gap: 8px; align-items: center;
    background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; padding: 10px; box-shadow: var(--shadow-lg); }
.proj-pop-form input[type=text] { min-width: 240px; font-size: .85rem; padding: 7px 10px; }
.proj-pop-form select { font-size: .85rem; padding: 7px 10px; }
/* Priority popover: stack the picker row above the "detect" link (they used to
   be two overlapping absolute popovers, hiding the dropdown). */
.proj-prio-pop { flex-direction: column; align-items: stretch; gap: 10px; min-width: 220px; }
.proj-prio-pick { display: flex; gap: 8px; align-items: center; }
.proj-prio-pick select { flex: 1; }
.proj-prio-detect { align-self: flex-start; }
/* PM picker: wider, taller hit area, and never clipped by the popover. */
.proj-pm-form { flex-wrap: wrap; max-width: min(92vw, 360px); }
.proj-pm-select { min-width: 240px; flex: 1 1 240px; font-size: .9rem !important; padding: 10px 12px !important;
    min-height: 42px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--surface); cursor: pointer; }
.proj-domain-edit .proj-domain-form { position: absolute; top: 30px; left: 0; z-index: 20; background: var(--surface);
    border: 1px solid var(--line-2); border-radius: 12px; padding: 10px; box-shadow: var(--shadow-lg); margin: 0; }

/* ===== Project activity strip (Basecamp-style, top of project) ===== */
.proj-activity { display: flex; align-items: flex-start; gap: 14px; background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 18px; margin-bottom: 18px; flex-wrap: wrap; }
.proj-activity-label { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
    color: var(--muted); padding-top: 14px; flex: 0 0 auto; }
.proj-activity .activity-feed { flex: 1; min-width: 240px; }
.proj-activity .activity-item { padding: 8px 10px; }

/* ===== Project pulse: Activity · Deliverables · Connector data (under the header) ===== */
.proj-pulse { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 14px; margin-bottom: 18px; align-items: start; }
@media (max-width: 1100px) { .proj-pulse { grid-template-columns: 1fr 1fr; } .pls-feed { grid-column: 1 / -1; } }
@media (max-width: 700px) { .proj-pulse { grid-template-columns: 1fr; } }
.pls-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.pls-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px 10px; border-bottom: 1px solid var(--line); user-select: none; }
.pls-head h3 { margin: 0; font-size: .95rem; }
/* Foldable sidebar cards: chevron + collapsed look (state saved per card). */
.pls-chev { margin-left: auto; color: var(--muted); font-size: .78rem; line-height: 1; }
.pls-chev::before { content: '▾'; }
.pls-card.is-folded .pls-chev::before { content: '▸'; }
.pls-card.is-folded .pls-head { border-bottom: 0; }
/* Bulk bar: the shared note posted under every selected task. */
.bulk-bar .bulk-note { flex: 1 1 180px; min-width: 140px; max-width: 340px; }

/* On-page batches: one note to every brief at once. */
.op-batch-note { margin: 8px 0 4px; }
.op-batch-note > summary { cursor: pointer; list-style: none; }
.op-batch-note > summary::-webkit-details-marker { display: none; }
.op-batch-note-form { display: flex; gap: 8px; margin-top: 8px; align-items: flex-start; }
.op-batch-note-form textarea { flex: 1; }

/* Auto-blog client rows: the card link + a remove ✕ beside it. */
.ab-client-row { display: flex; align-items: center; gap: 6px; }
.ab-client-row .ab-client { flex: 1; min-width: 0; }
.ab-client-remove { flex: 0 0 auto; }

/* Platform admin panel. */
.pa-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.pa-tile { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.pa-tile-n { font-size: 1.6rem; font-weight: 800; }
.pa-card { padding: 18px 20px; margin-bottom: 16px; }
.pa-plumb { display: flex; flex-direction: column; }
.pa-plumb-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px dashed var(--line); }
.pa-plumb-row:first-child { border-top: 0; }

/* Content Writer: background-generation status page. */
.cw-pending { max-width: 620px; margin: 40px auto; padding: 36px 40px; text-align: center; }
.cw-pending h2 { margin: 14px 0 10px; }
.cw-pending .btn { margin: 12px 6px 0; }
.cw-pending-spin { width: 44px; height: 44px; margin: 0 auto; border-radius: 50%;
    border: 4px solid var(--line); border-top-color: var(--primary); animation: cwspin 1s linear infinite; }
@keyframes cwspin { to { transform: rotate(360deg); } }
.cw-pending-failed { border-color: rgba(239,68,68,.4); }
.cw-pending-stall { margin: 14px auto 0; max-width: 480px; padding: 10px 14px; border-radius: 10px;
    background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.35); font-size: .86rem; text-align: left; }

/* Client engagement report: bucket chips. */
.rp-eng { display: inline-block; font-size: .68rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .04em; border-radius: 999px; padding: 2px 9px; }
.rp-eng-engaged { background: rgba(34,197,94,.12); color: #15803d; }
.rp-eng-cooling { background: rgba(245,158,11,.14); color: #b45309; }
.rp-eng-quiet { background: rgba(239,68,68,.12); color: #dc2626; }

/* Banner de-clutter: unset "+ Add …" chips hide behind one "+ N more". */
.pbm-hidden { display: none !important; }
.pbm-more { background: none; border: none; cursor: pointer; font: inherit; font-size: .78rem;
    color: rgba(255,255,255,.65); padding: 2px 6px; border-radius: 999px; }
.pbm-more:hover { color: #fff; background: rgba(255,255,255,.12); }

/* Empty Goals/Approvals cards compact to one calm line until they have data. */
.ov-block.ov-quiet { padding: 10px 16px; }
.ov-block.ov-quiet .ov-goals-head { margin-bottom: 0; }
.ov-block.ov-quiet > p.muted { display: none; }

/* "Since last time" recap folds (the board sidebar carries the live feed). */
details.ov-since > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; list-style: none; }
details.ov-since > summary::-webkit-details-marker { display: none; }
details.ov-since > summary h3 { margin: 0; }
details.ov-since[open] > summary { margin-bottom: 10px; }
details.ov-since:not([open]) .pls-chev::before { content: '▸'; }

/* Overview aside: same folding for the ov-blocks (h3 headers aren't flex). */
.ov-chev { float: right; margin-left: 8px; margin-top: 2px; }
.ov-side .ov-block.card.is-folded > :not(h3):not(.ov-client-head) { display: none; }
.ov-side .ov-block.card.is-folded .ov-chev::before, .ov-side .ov-block.card.is-folded .pls-chev::before { content: '▸'; }
.ov-side .ov-block.card.is-folded { padding-bottom: 12px; }
.pls-head svg, .pls-head i { color: var(--primary); }
.pls-count { font-size: .68rem; font-weight: 800; background: rgba(9,19,45,.07); color: var(--muted); border-radius: 999px; padding: 1px 8px; }
[data-theme="dark"] .pls-count { background: rgba(255,255,255,.08); }
.pls-body { padding: 8px; max-height: 300px; overflow-y: auto; flex: 1; }
.pls-empty { padding: 14px 10px; }
.pls-foot { display: block; padding: 10px 16px; border-top: 1px solid var(--line); color: var(--primary);
    font-size: .8rem; font-weight: 600; text-decoration: none; }
.pls-foot:hover { background: var(--surface-2); text-decoration: none; }
/* .pls-foot was written for an <a>; as a <button> it kept the browser's own
   grey buttonface background, outset border and font. Reset those so the
   "Show N more" control reads as part of the card, not a raw form control. */
button.pls-foot { width: 100%; background: none; border: 0; border-top: 1px solid var(--line);
    font: inherit; font-size: .8rem; font-weight: 600; color: var(--primary);
    text-align: center; cursor: pointer; letter-spacing: .01em; }
button.pls-foot::after { content: '▾'; margin-left: 7px; font-size: .8em; opacity: .75; }
button.pls-foot:hover { background: var(--surface-2); color: var(--primary); }
button.pls-foot:active { background: var(--bg-2); }
button.pls-foot:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
/* Social-style activity rows: avatar with a type bubble, bold actor, tinted
   verb — plus a quick mascot-react strip that appears on hover. */
.pls-item { position: relative; border-radius: 11px; transition: background .12s ease; }
.pls-item:hover { background: var(--surface-2); }
.pls-item + .pls-item::before { content: ''; position: absolute; left: 25px; top: -8px; height: 8px; width: 2px; background: var(--line); }
.pls-item-a { display: flex; align-items: flex-start; gap: 11px; padding: 9px 10px; text-decoration: none; color: var(--ink); }
.pls-item-a:hover { text-decoration: none; }
.pls-react { display: none; position: absolute; right: 8px; top: 6px; align-items: center; gap: 2px; padding: 3px 5px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-lg); z-index: 5; }
.pls-item:hover .pls-react, .pls-react:focus-within { display: inline-flex; }
.pls-rx { border: 0; background: none; cursor: pointer; padding: 2px; border-radius: 50%; display: grid; place-items: center;
    transition: transform .1s ease; }
.pls-rx:hover { transform: scale(1.25); }
.pls-rx .rx-img { width: 20px; height: 20px; display: block; }
.pls-ava { position: relative; flex: 0 0 auto; }
.pls-type { position: absolute; right: -4px; bottom: -4px; width: 16px; height: 16px; border-radius: 50%;
    display: grid; place-items: center; color: #fff; box-shadow: 0 0 0 2px var(--surface); }
.pls-type svg { width: 9px; height: 9px; }
.pls-txt { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pls-line { font-size: .86rem; line-height: 1.35; }
.pls-verb { font-weight: 600; }
.pls-subj { font-weight: 600; }
.pls-item:hover .pls-subj { text-decoration: underline; }
.pls-meta { font-size: .72rem; color: var(--muted); }
/* Deliverables column */
.pls-dlv-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 9px; }
.pls-dlv-row:hover { background: var(--surface-2); }
.pls-dlv-l { flex: 1 1 auto; min-width: 0; font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pls-dlv-v { flex: 0 0 auto; font-size: .82rem; color: var(--muted); }
.pls-dlv-v strong { color: var(--ink); }
.pls-dlv-chip { background: rgba(9,19,45,.06); border-radius: 999px; padding: 2px 9px; font-size: .76rem; font-weight: 600; color: var(--ink); }
[data-theme="dark"] .pls-dlv-chip { background: rgba(255,255,255,.08); }
.pls-dlv-bar { flex: 0 0 64px; height: 6px; background: rgba(9,19,45,.08); border-radius: 999px; overflow: hidden; }
[data-theme="dark"] .pls-dlv-bar { background: rgba(255,255,255,.1); }
.pls-dlv-bar i { display: block; height: 100%; border-radius: 999px; background: var(--primary); }
.pls-dlv-bar.met i { background: #16a34a; }
.pls-dlv-bar.partial i { background: #e0890b; }
.pls-dlv-bar.none i { background: #dc2626; }
/* Connector-data column: each source is a soft brand-tinted row with a solid
   brand tag on the left (no border-line gimmick). */
.pls-conn-grp { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 8px 10px; margin: 3px 0;
    border-radius: 11px; background: color-mix(in srgb, var(--cc, #64748b) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--cc, #64748b) 16%, transparent); }
.pls-conn-src { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
    background: var(--cc, var(--muted)); color: #fff; border-radius: 6px; padding: 3px 7px; flex: 0 0 auto; line-height: 1; }
.pls-conn-kv { font-size: .8rem; color: var(--muted); white-space: nowrap; }
.pls-conn-kv strong { color: var(--ink); font-variant-numeric: tabular-nums; }
/* ▲/▼ trend vs ~30 days ago (ConnectorSnapshot baseline). */
.pls-tr { font-size: .68rem; font-weight: 800; border-radius: 999px; padding: 1px 6px; font-variant-numeric: tabular-nums; }
.pls-tr.is-good { color: #15803d; background: rgba(22,163,74,.12); }
.pls-tr.is-bad { color: #b91c1c; background: rgba(220,38,38,.1); }
[data-theme="dark"] .pls-tr.is-good { color: #4ade80; background: rgba(34,197,94,.16); }
[data-theme="dark"] .pls-tr.is-bad { color: #f87171; background: rgba(248,113,113,.14); }
.pls-health { font-size: .68rem; font-weight: 800; color: #fff; border-radius: 999px; padding: 2px 9px; }
.pls-conn-ai { display: flex; align-items: center; gap: 7px; font-size: .82rem; font-weight: 600; color: var(--primary); padding: 8px 10px; margin: 0; }
[data-theme="dark"] .pls-conn-grp { background: color-mix(in srgb, var(--cc, #64748b) 13%, transparent);
    border-color: color-mix(in srgb, var(--cc, #64748b) 28%, transparent); }
/* Tasks-late list (middle column, under deliverables) */
.pls-sub { display: flex; align-items: center; gap: 7px; font-size: .68rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .05em; color: var(--muted); padding: 12px 10px 5px; margin-top: 6px; border-top: 1px dashed var(--line); }
.pls-sub svg, .pls-sub i { color: var(--danger); }
.pls-count-bad { background: rgba(220,38,38,.12); color: #dc2626; }
.pls-late { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 9px; text-decoration: none; color: var(--ink); font-size: .84rem; }
.pls-late:hover { background: var(--surface-2); text-decoration: none; }
.pls-late-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); }
.pls-late-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pls-late-who { flex: 0 0 auto; font-size: .72rem; color: var(--muted); }
.pls-late-more { display: block; padding: 5px 10px; font-size: .78rem; font-weight: 600; color: var(--danger); text-decoration: none; }
.pls-late-more:hover { text-decoration: underline; }

/* Header connector chips (banner stats row) */
.pb-conns { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-left: auto; }
.pb-conn { position: relative; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px;
    font-size: .8rem; text-decoration: none; transition: transform .12s ease, box-shadow .12s ease; }
.pb-conn.is-on { color: var(--cc); background: color-mix(in srgb, var(--cc) 13%, transparent); }
.pb-conn.is-on svg, .pb-conn.is-on i { color: var(--cc); }
.pb-conn.is-off { color: var(--muted); background: rgba(9,19,45,.05); opacity: .6; }
.pb-conn.is-off svg, .pb-conn.is-off i { color: var(--muted); filter: grayscale(1); }
[data-theme="dark"] .pb-conn.is-off { background: rgba(255,255,255,.06); }
.pb-conn:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(9,19,45,.14); opacity: 1; text-decoration: none; }
.pb-conn-plus { position: absolute; top: -4px; right: -4px; width: 13px; height: 13px; border-radius: 50%;
    background: var(--primary); color: #fff; font-size: .6rem; font-weight: 800; line-height: 13px; text-align: center;
    box-shadow: 0 0 0 2px var(--surface); }
/* Hover preview: headline stats without leaving the page. */
.pb-conn-pop { display: none; position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    min-width: 168px; max-width: 240px; padding: 10px 13px; background: var(--surface); border: 1px solid var(--line-2);
    border-radius: 12px; box-shadow: var(--shadow-lg); z-index: 60; text-align: left;
    flex-direction: column; gap: 3px; pointer-events: none; }
.pb-conn:hover .pb-conn-pop { display: flex; }
.pb-conn-pop::before { content: ''; position: absolute; top: -5px; left: 50%; transform: translateX(-50%) rotate(45deg);
    width: 9px; height: 9px; background: var(--surface); border-left: 1px solid var(--line-2); border-top: 1px solid var(--line-2); }
.pb-conn-pop-h { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.pb-conn-pop-l { font-size: .82rem; color: var(--ink); font-weight: 600; white-space: nowrap; }
.pb-conn-pop-l.muted { color: var(--muted); font-weight: 500; white-space: normal; }
.pb-conn-pop-at { font-size: .7rem; color: var(--muted); margin-top: 2px; }
/* The chips near the row's right edge: keep their popover on-screen. */
.pb-conns .pb-conn:nth-last-child(-n+3) .pb-conn-pop { left: auto; right: -6px; transform: none; }
.pb-conns .pb-conn:nth-last-child(-n+3) .pb-conn-pop::before { left: auto; right: 14px; transform: rotate(45deg); }
@media (max-width: 900px) { .pb-conns { margin-left: 0; width: 100%; } }
/* Red variant for the To-dos overdue tab badge. */
.tab-badge-bad { background: var(--danger); }

/* ===== Trends page (connector sparklines + competitor gap) ===== */
.tr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 18px; }
.tr-card { padding: 18px 20px 14px; display: flex; flex-direction: column; gap: 10px; border-radius: 16px; transition: transform .12s ease, box-shadow .12s ease; }
.tr-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.tr-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.tr-label { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; font-weight: 700; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.tr-now { font-family: var(--display); font-weight: 800; font-size: 1.55rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.tr-spark { width: 100%; height: auto; display: block; }
.tr-foot { display: flex; align-items: center; gap: 8px; }
/* Capacity chip on the workload forecast: booked hours vs capacity, next 7 days. */
.wl-fc-cap { text-align: center; white-space: nowrap; }
.wl-cap-chip { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; font-weight: 800; border-radius: 999px; padding: 2px 9px; font-variant-numeric: tabular-nums; }
.wl-cap-ok { background: rgba(22,163,74,.12); color: #15803d; }
.wl-cap-warm { background: rgba(224,137,11,.14); color: #b45309; }
.wl-cap-over { background: rgba(220,38,38,.13); color: #b91c1c; }
[data-theme="dark"] .wl-cap-ok { color: #4ade80; }
[data-theme="dark"] .wl-cap-warm { color: #fbbf24; }
[data-theme="dark"] .wl-cap-over { color: #f87171; }
.np-group { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
    margin: 14px 0 2px; padding-top: 10px; border-top: 1px dashed var(--line); }
.np-group:first-of-type { margin-top: 4px; border-top: none; padding-top: 0; }
/* Bell/Email channel matrix + iOS-style toggle switches. */
.np-mx-head { display: grid; grid-template-columns: 1fr 64px 64px; gap: 8px; font-size: .68rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .05em; color: var(--muted); position: sticky; top: var(--topbar-h, 57px);
    background: var(--surface); padding: 6px 0; z-index: 2; }
.np-mx-head span { text-align: center; }
.np-row { display: grid; grid-template-columns: 1fr 64px 64px; gap: 8px; align-items: center; padding: 8px 0;
    border-top: 1px solid var(--line); }
.np-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.np-txt strong { font-size: .9rem; }
.np-cell { display: grid; place-items: center; }
.np-na { color: var(--muted); opacity: .5; }
.tgl { position: relative; width: 40px; height: 23px; flex: 0 0 auto; cursor: pointer; display: inline-block; }
.tgl input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.tgl i { display: block; width: 40px; height: 23px; border-radius: 999px; background: rgba(9,19,45,.18);
    transition: background .15s ease; pointer-events: none; }
.tgl i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(9,19,45,.35); transition: transform .15s ease; }
.tgl input:checked + i { background: var(--primary); }
.tgl input:checked + i::after { transform: translateX(17px); }
.tgl input:focus-visible + i { outline: 2px solid var(--primary); outline-offset: 2px; }
[data-theme="dark"] .tgl i { background: rgba(255,255,255,.16); }
[data-theme="dark"] .tgl input:checked + i { background: var(--primary); }
@media (max-width: 560px) { .np-mx-head, .np-row { grid-template-columns: 1fr 48px 48px; } }
/* ===== Local rank geo-grid ===== */
.rg-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
@media (max-width: 640px) { .rg-stats { grid-template-columns: 1fr; } }
.rg-stat { padding: 16px; text-align: center; }
.rg-stat-n { display: block; font-family: var(--display); font-weight: 800; font-size: 2rem; color: var(--ink); line-height: 1.1; }
.rg-stat-l { font-size: .78rem; color: var(--muted); }
.rg-card { padding: 22px; }
.rg-actions { display: flex; align-items: center; gap: 8px; }
.rg-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.rg-compass { font-size: .7rem; font-weight: 800; color: var(--muted); letter-spacing: .1em; }
.rg-map { display: grid; grid-template-columns: repeat(var(--rg-size, 5), 52px); gap: 10px; }
/* Variant with mile markers: an extra label column (left) + label row (top). */
.rg-map-labeled { grid-template-columns: 44px repeat(var(--rg-size, 5), 52px); align-items: center; }
.rg-axis { font-size: .68rem; font-weight: 700; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rg-scale { text-align: center; max-width: 460px; margin: 0; }
/* Real-map view (Leaflet + OSM tiles) above the schematic grid. */
.rg-real-wrap { margin-bottom: 20px; }
.rg-real { height: 430px; border-radius: 12px; border: 1px solid var(--line); z-index: 0; }
.rg-osm { text-align: right; margin: 4px 2px 0; font-size: .68rem; }
.rg-pt-map { width: 38px; height: 38px; font-size: .88rem; display: grid; place-items: center; border-radius: 50%;
    box-shadow: 0 1px 4px rgba(9,19,45,.4); border: 2px solid #fff; }
.rg-pt-map.rg-center { outline: 3px solid #09132d; }
@media (max-width: 560px) { .rg-map { grid-template-columns: repeat(var(--rg-size, 5), 44px); gap: 7px; } .rg-map-labeled { grid-template-columns: 34px repeat(var(--rg-size, 5), 44px); } .rg-pt { width: 44px !important; height: 44px !important; } .rg-axis { font-size: .6rem; } }
.rg-pt { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
    font-weight: 800; font-size: 1rem; color: #fff; font-variant-numeric: tabular-nums;
    box-shadow: inset 0 -2px 4px rgba(0,0,0,.14), 0 1px 3px rgba(9,19,45,.18); }
.rg-top { background: #16a34a; }
.rg-mid { background: #e0890b; }
.rg-low { background: #dc2626; }
.rg-none { background: #94a3b8; color: rgba(255,255,255,.85); }
[data-theme="dark"] .rg-none { background: #475569; }
.rg-center { outline: 3px solid var(--ink); outline-offset: 2px; position: relative; }
.rg-center::after { content: '⭑'; position: absolute; top: -12px; right: -7px; font-size: .8rem; color: var(--ink); text-shadow: 0 1px 2px var(--surface); }
.rg-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; font-size: .8rem; color: var(--muted); }
.rg-key { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.rg-share { padding: 16px 20px; margin-top: 16px; }
.rg-delta { display: flex; align-items: center; gap: 8px; margin: -6px 0 16px; padding: 10px 14px; border-radius: 11px;
    background: rgba(22,163,74,.08); border: 1px solid rgba(22,163,74,.2); font-size: .9rem; }
[data-theme="dark"] .rg-delta { background: rgba(34,197,94,.1); }
.rg-history { padding: 6px; }
.rg-hrow { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--ink); }
.rg-hrow:hover { background: var(--surface-2); text-decoration: none; }
.rg-hrow.is-current { background: rgba(9,19,45,.04); }
[data-theme="dark"] .rg-hrow.is-current { background: rgba(255,255,255,.05); }
.rg-h-kw { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rg-h-avg { font-size: .82rem; color: var(--muted); white-space: nowrap; }

/* ===== Rank-grid client report (public) — modern layout ===== */
.rgp { max-width: 860px; margin: 0 auto; }
.rgp-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 28px;
    border-radius: 18px; margin-bottom: 16px; background: linear-gradient(135deg, rgba(9,19,45,.035), rgba(9,19,45,.01));
    border: 1px solid rgba(9,19,45,.08); position: relative; overflow: hidden; }
.rgp-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(60% 130% at 100% 0%, color-mix(in srgb, var(--gc, #16a34a) 10%, transparent), transparent 60%); }
.rgp-hero-l { min-width: 0; position: relative; z-index: 1; }
.rgp-kw { font-size: 2rem; margin: 2px 0 6px; line-height: 1.15; }
.rgp-sub { margin: 0 0 12px; color: #5d6781; }
.rgp-verdict { margin: 0; font-size: 1.05rem; line-height: 1.5; color: #09132d; max-width: 46ch; }
.rgp-score { flex: 0 0 auto; position: relative; z-index: 1; }
.rgp-ring { width: 148px; height: 148px; border-radius: 50%; display: grid; place-items: center; }
.rgp-ring-in { width: 116px; height: 116px; border-radius: 50%; background: #fff; display: grid; place-items: center;
    align-content: center; gap: 2px; box-shadow: 0 2px 10px rgba(9,19,45,.08); }
.rgp-grade { font-size: 2.6rem; font-weight: 800; line-height: 1; }
.rgp-ring-l { font-size: .72rem; font-weight: 700; color: #5d6781; }
.rgp-delta { padding: 12px 18px; border-radius: 12px; margin-bottom: 16px; font-size: .95rem;
    background: rgba(22,163,74,.09); border: 1px solid rgba(22,163,74,.22); }
.rgp-delta-down { background: rgba(220,38,38,.07); border-color: rgba(220,38,38,.2); }
/* Print/PDF: the client reports come out attach-to-invoice clean — grade ring
   and rank dots keep their colors, the interactive map is dropped (tiles don't
   print reliably; the schematic grid carries the story), no mid-card breaks. */
@media print {
    .rgp, .rgp * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .rgp-hero, .rgp-stat, .rgp-insight, .rgp-delta, .rgp-cta, .rg-card, .pub-card { box-shadow: none !important; break-inside: avoid; }
    .rg-real-wrap, .public-pdf-btn { display: none !important; }
    .rgp-hero::after { display: none; }
    .public-wrap { max-width: none; padding: 0; }
    .rg-pt { box-shadow: none !important; }
}
.rgp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.rgp-stat { background: #fff; border: 1px solid rgba(9,19,45,.08); border-radius: 14px; padding: 18px 16px;
    display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
    box-shadow: 0 1px 3px rgba(9,19,45,.05); }
.rgp-stat-ic { font-size: 1.2rem; }
.rgp-stat-n { font-size: 2rem; font-weight: 800; line-height: 1.1; color: #09132d; }
.rgp-stat-l { font-size: .78rem; color: #5d6781; line-height: 1.35; max-width: 20ch; }
.rgp-insights { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 18px; }
.rgp-insight { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid rgba(9,19,45,.08);
    border-radius: 14px; padding: 14px 16px; box-shadow: 0 1px 3px rgba(9,19,45,.05); }
.rgp-insight-ic { font-size: 1.3rem; flex: 0 0 auto; }
.rgp-insight strong { font-size: .92rem; display: block; margin-bottom: 2px; }
.rgp-insight p { margin: 0; font-size: .84rem; color: #5d6781; line-height: 1.45; }
.rgp-mapcard { padding: 22px 24px; }
.rgp-h2 { margin: 0 0 2px; font-size: 1.2rem; }
.rgp-mapnote { margin: 0 0 16px; }
.rgp-read { margin: 16px auto 0; max-width: 62ch; color: #3d4663; line-height: 1.6; text-align: center; font-size: .95rem; }
.rgp-star { font-size: 1.05em; }
.rgp-green { color: #16a34a; font-weight: 700; }
.rgp-grey { color: #64748b; font-weight: 700; }
.rgp-cta { margin: 22px auto 0; max-width: 560px; text-align: center; padding: 18px 22px; border-radius: 14px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand, #ff5a4e) 9%, #fff), #fff);
    border: 1px solid color-mix(in srgb, var(--brand, #ff5a4e) 25%, transparent);
    display: flex; flex-direction: column; gap: 4px; font-size: .95rem; color: #3d4663; }
.rgp-cta strong { color: #09132d; }
@media (max-width: 700px) {
    .rgp-hero { flex-direction: column; text-align: center; }
    .rgp-verdict { max-width: none; }
    .rgp-stats { grid-template-columns: 1fr; }
}

/* ===== Client report timeline (public) ===== */
.ctl { display: flex; flex-direction: column; gap: 8px; }
.ctl-month { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: #5d6781; margin: 14px 0 2px; }
.ctl-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: #fff; border: 1px solid rgba(9,19,45,.08);
    border-left: 4px solid var(--cc, #64748b); border-radius: 12px; text-decoration: none; color: #09132d;
    box-shadow: 0 1px 3px rgba(9,19,45,.05); transition: transform .12s ease, box-shadow .12s ease; }
a.ctl-row:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(9,19,45,.1); text-decoration: none; }
.ctl-ic { font-size: 1.3rem; flex: 0 0 auto; }
.ctl-txt { min-width: 0; display: flex; flex-direction: column; gap: 1px; flex: 1; }
.ctl-sub { font-size: .84rem; color: #5d6781; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctl-chip { flex: 0 0 auto; font-size: .74rem; font-weight: 800; border-radius: 999px; padding: 3px 11px; }
.ctl-chip.is-good { background: rgba(22,163,74,.12); color: #15803d; }
.ctl-chip.is-warn { background: rgba(224,137,11,.14); color: #b45309; }
.ctl-when { flex: 0 0 auto; font-size: .78rem; color: #5d6781; white-space: nowrap; }
@media (max-width: 620px) { .ctl-sub { white-space: normal; } .ctl-when { display: none; } }

/* Rank-grid keyword suggestions */
.rg-sugg { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rg-sugg-chip { border: 1px solid var(--line-2); background: var(--surface); border-radius: 999px; padding: 3px 10px;
    font-size: .76rem; font-weight: 600; color: var(--ink); cursor: pointer; }
.rg-sugg-chip:hover { border-color: var(--primary); color: var(--primary); }

/* Content-decay banner in the GSC connector section */
.conn-decay { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; margin: 8px 0 12px;
    background: rgba(224,137,11,.08); border: 1px solid rgba(224,137,11,.25); border-radius: 11px; font-size: .9rem; }

/* New-hire onboarding checklist (Home) */
.ob-card { padding: 16px 20px; margin-bottom: 18px; }
.ob-head { display: flex; align-items: center; gap: 12px; }
.ob-head h3 { margin: 0; font-size: 1.05rem; flex: 1; }
.ob-progress { font-size: .74rem; font-weight: 800; color: var(--muted); background: rgba(9,19,45,.06); border-radius: 999px; padding: 2px 10px; }
[data-theme="dark"] .ob-progress { background: rgba(255,255,255,.08); }
.ob-bar { height: 6px; border-radius: 999px; background: rgba(9,19,45,.07); margin: 10px 0 12px; overflow: hidden; }
[data-theme="dark"] .ob-bar { background: rgba(255,255,255,.09); }
.ob-bar i { display: block; height: 100%; background: var(--grad); border-radius: 999px; transition: width .3s; }
.ob-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
/* Scoped under .ob-steps: the create-client form reuses the .ob-step class for
   its section cards — unscoped, this flex-row squashed that form's fields. */
.ob-steps .ob-step { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--line);
    text-decoration: none; color: var(--ink); }
.ob-steps .ob-step:hover { background: var(--surface-2); text-decoration: none; }
.ob-steps .ob-step.is-done { opacity: .6; }
.ob-steps .ob-step.is-done .ob-txt strong { text-decoration: line-through; }
.ob-check { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-2); display: grid;
    place-items: center; font-size: .7rem; font-weight: 800; color: #fff; margin-top: 1px; }
.ob-steps .ob-step.is-done .ob-check { background: #16a34a; border-color: #16a34a; }
.ob-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ob-txt strong { font-size: .88rem; }

/* Email SLA: "client is waiting" chips on the inbox threads. */
.gm-sla { font-size: .7rem; font-weight: 800; border-radius: 999px; padding: 1px 8px; white-space: nowrap;
    background: rgba(224,137,11,.14); color: #b45309; }
.gm-sla.is-breach { background: rgba(220,38,38,.13); color: #b91c1c; }
[data-theme="dark"] .gm-sla { color: #fbbf24; }
[data-theme="dark"] .gm-sla.is-breach { color: #f87171; }
.gm-sla-count { margin-left: auto; font-size: .74rem; font-weight: 800; border-radius: 999px; padding: 2px 10px;
    background: rgba(220,38,38,.12); color: #b91c1c; }
[data-theme="dark"] .gm-sla-count { color: #f87171; }
/* Connector-source toggles (which connectors feed your drop/spike alerts). */
.np-conns { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px 14px; }
.np-conn { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 600; padding: 4px 0; cursor: pointer; }
.tgl-sm { width: 32px; height: 19px; }
.tgl-sm i { width: 32px; height: 19px; }
.tgl-sm i::after { width: 13px; height: 13px; }
.tgl-sm input:checked + i::after { transform: translateX(13px); }
.check-row { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; cursor: pointer; }
.check-row input { margin-top: 3px; flex: 0 0 auto; }
.api-token-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.api-token-field { flex: 1 1 280px; font-family: ui-monospace, Menlo, monospace; font-size: .82rem; }
.tr-events { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 16px; margin-top: 14px; font-size: .82rem; }
.tr-events-h { font-weight: 700; color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; }
.tr-event { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.tr-event i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.tr-comp-setup { padding: 14px 16px; display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.tr-comp-form { display: flex; align-items: flex-end; gap: 10px; flex: 1 1 420px; }
.tr-comp-at { flex-basis: 100%; margin: 0; }
/* Pulse connector column: dual footer (data + trends). */
.pls-foot-row { display: flex; border-top: 1px solid var(--line); }
.pls-foot-row .pls-foot { flex: 1; border-top: none; text-align: center; }
.pls-foot-row .pls-foot + .pls-foot { border-left: 1px solid var(--line); }
/* Connectors tab: right-side actions (Trends / Settings / alert threshold). */
.conn-hero-r { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.conn-alert-th { position: relative; }
.conn-alert-th > summary { list-style: none; cursor: pointer; }
.conn-alert-th > summary::-webkit-details-marker { display: none; }
.conn-alert-th-form { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 250px; padding: 12px 14px;
    background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: var(--shadow-lg); }
.conn-alert-th-row { display: flex; align-items: center; gap: 7px; margin-top: 5px; }
.conn-alert-th-row input { width: 76px; }
/* GSC panel header: "Create tasks" sits at the right edge. */
.sa-gsc-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sa-gsc-taskbtn { margin-left: auto; }

/* ===== Task select on timesheet ===== */
.timer-start .task-select { width: auto; min-width: 170px; max-width: 240px; }

/* ===== Aging + stalled badges ===== */
.age-badge { font-size: .68rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; margin-left: 6px; }
.age-1 { color: var(--warning); background: rgba(250,204,21,.12); }
.age-2 { color: #c2410c; background: rgba(194,65,12,.1); }
.age-3 { color: var(--danger); background: rgba(248,113,113,.16); }
.stall-badge { display: inline-block; font-size: .66rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; margin-left: 8px; }
.stall-1 { color: var(--warning); background: rgba(250,204,21,.12); }
.stall-2 { color: var(--danger); background: rgba(248,113,113,.16); }

/* ===== Reports / health ===== */
.report-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 28px; }
@media (max-width: 720px) { .report-stats { grid-template-columns: 1fr 1fr; } }
.rs-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; }
.rs-card.rs-bad { border-color: rgba(248,113,113,.4); }
.rs-card.rs-warn { border-color: rgba(250,204,21,.4); }
.rs-n { display: block; font-family: var(--display); font-weight: 800; font-size: 2.2rem; line-height: 1; }
.rs-l { font-size: .82rem; color: var(--muted); }
.rs-bad .rs-n { color: var(--danger); } .rs-warn .rs-n { color: var(--warning); }

.report-grid { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: start; }
@media (max-width: 860px) { .report-grid { grid-template-columns: 1fr; } }

.health-list { padding: 6px 18px; }
.health-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.health-row:last-child { border-bottom: none; }
.health-row .project-icon { width: 40px; height: 40px; margin: 0; font-size: 1.2rem; border-radius: 11px; }
.health-main { flex: 1; min-width: 0; }
.health-name { font-weight: 600; font-size: .95rem; display: flex; align-items: center; gap: 8px; }
.health-prog { margin: 8px 0 0; }
.risk-pill { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--danger); background: rgba(248,113,113,.16); padding: 1px 8px; border-radius: 999px; }
.health-stats { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: .78rem; white-space: nowrap; }
.hs-pct { font-weight: 800; font-size: 1rem; }
.hs-bad { color: var(--danger); } .hs-warn { color: var(--warning); } .hs-stall { color: var(--muted); }

.bottle-list { padding: 4px 18px; }
.bottle-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.bottle-row:last-child { border-bottom: none; }
.bottle-row:hover { text-decoration: none; }
.bottle-name { font-weight: 500; font-size: .92rem; }
.bottle-icon { font-size: 1.1rem; }

.aging-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: .9rem; border-bottom: 1px solid var(--line); }
.aging-row:last-child { border-bottom: none; }
.aging-row b { margin-left: auto; font-size: 1.05rem; }
.age-dot { width: 10px; height: 10px; border-radius: 50%; }
.age-dot.age-1 { background: var(--warning); } .age-dot.age-2 { background: #fdba74; } .age-dot.age-3 { background: var(--danger); }
.overdue-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.overdue-name { flex: 1; font-size: .9rem; }
.overdue-n { font-weight: 800; color: var(--danger); }

/* ============================================================
   Project card + favicon redesign (favicon = dominant app tile)
   ============================================================ */
.project-card {
    padding: 22px; border-radius: 20px;
    background:
        radial-gradient(360px 140px at 100% -30%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
        var(--surface);
}
.project-card::before { height: 4px; opacity: .9; }
.project-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }

/* Bigger icon box; favicon rendered as a crisp white app tile. */
.project-card .project-icon { width: 64px; height: 64px; border-radius: 18px; font-size: 2rem; margin: 0;
    box-shadow: 0 8px 22px rgba(0,0,0,.28), inset 0 0 0 1px rgba(9, 19, 45, .06); }
.pi-fav { padding: 16%; background: #fff;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }

/* Domain chip */
.project-domain-chip { font-size: .72rem; font-weight: 600; color: var(--muted);
    background: rgba(9, 19, 45, .05); border: 1px solid var(--line); padding: 4px 10px; border-radius: 999px;
    max-width: 56%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-card:hover .project-domain-chip { border-color: rgba(255, 90, 78,.35); color: var(--ink); }
.project-card h3 { font-size: 1.22rem; }

/* Project header: dominant favicon too */
.project-head-icon { width: 66px; height: 66px; border-radius: 18px; }
.project-head-main .pi-fav { padding: 15%; }

/* ============================================================
   Modern project banner (replaces the old .project-head)
   ============================================================ */
.proj-banner {
    --accent: var(--teal);
    /* overflow must stay visible so the ⋯ menu popover isn't clipped; the
       decorative topo is clipped to the rounded box via clip-path instead. */
    position: relative; overflow: visible; margin-bottom: 22px;
    border: 1px solid var(--line); border-radius: 22px; padding: 26px 28px 0;
    background:
        radial-gradient(620px 240px at 100% -55%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 60%),
        radial-gradient(420px 220px at 0% -30%, rgba(250, 202, 44,.05), transparent 55%),
        var(--surface);
}
.proj-banner .db-topo { color: color-mix(in srgb, var(--accent) 13%, transparent); opacity: .6; clip-path: inset(0 round 22px); }
.proj-banner-top { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.proj-banner-id { display: flex; align-items: center; gap: 18px; }
.proj-banner .project-head-icon { width: 72px; height: 72px; border-radius: 20px;
    box-shadow: 0 8px 20px rgba(9, 19, 45, .14), inset 0 0 0 1px rgba(9, 19, 45, .07); }
.proj-banner-titles h1 { font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -0.03em; }
.proj-name-h { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.proj-name-edit { position: relative; display: inline-flex; }
.proj-name-edit > summary { list-style: none; cursor: pointer; color: var(--muted); opacity: .55; display: inline-flex; }
.proj-name-edit > summary::-webkit-details-marker { display: none; }
.proj-name-h:hover .proj-name-edit > summary { opacity: 1; }
.proj-banner-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: .9rem; color: var(--muted); flex-wrap: wrap; }
.proj-banner-meta .proj-domain { margin: 0; }
.proj-desc { max-width: 520px; }
.proj-banner .member-stack { position: relative; }

.proj-banner-stats { position: relative; display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
    margin-top: 24px; padding: 16px 2px; border-top: 1px solid var(--line); }
.pb-stat { font-size: .86rem; color: var(--muted); }
.pb-stat b { font-family: var(--display); font-weight: 800; font-size: 1.25rem; color: var(--ink); margin-right: 5px; }
.pb-stat.pb-bad b { color: var(--danger); }
.pb-prog { flex: 1; min-width: 140px; height: 18px; background: rgba(9, 19, 45, .07); border-radius: 999px; overflow: hidden; }
.pb-prog-fill { height: 100%; min-width: 34px; background: var(--grad); border-radius: 999px; transition: width .3s;
    display: flex; align-items: center; justify-content: flex-end; }
.pb-prog-fill span { color: #fff; font-weight: 800; font-size: .72rem; padding-right: 8px; line-height: 1;
    text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.pb-prog-pct { flex: 0 0 auto; font-size: .82rem; font-weight: 600; }

/* Sleeker tab bar */
.tabs { background: rgba(9, 19, 45, .025); padding: 5px; border-radius: 14px; gap: 2px; }
.tab { border-radius: 9px; }
.tab.active { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2), 0 2px 8px rgba(0,0,0,.2); }
.tab.active .icon { color: var(--teal); }

/* ===== Phase tracks (department lanes) ===== */
.track-head { margin: 6px 0 10px; }
.track-chip { display: inline-flex; align-items: center; gap: 7px; font-family: var(--display);
    font-weight: 700; font-size: .92rem; letter-spacing: -0.01em; color: var(--ink);
    padding: 5px 14px 5px 12px; border-radius: 999px; background: rgba(9, 19, 45, .04);
    border: 1px solid var(--line-2); }
.track-chip::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--tc, var(--teal)); }
.track-chip--general { color: var(--muted); }
.track-chip--general::before { background: var(--muted); }
.phase-date-form { flex-wrap: wrap; }
.phase-date-form input[type=text] { width: 110px; font-size: .8rem; padding: 6px 8px; }

/* ===== Bulk selection ===== */
.bulk-check { width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--teal); cursor: pointer;
    opacity: .35; transition: opacity .15s; margin-right: 2px; }
.bulk-check:checked, .todo-item:hover .bulk-check { opacity: 1; }
.todo-item:has(.bulk-check:checked) { background: rgba(255, 90, 78,.06); border-radius: 8px; }

.bulk-bar { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 140%);
    z-index: 60; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 14px;
    padding: 10px 14px; box-shadow: var(--shadow-lg); transition: transform .2s ease; max-width: 94vw; }
.bulk-bar.active { transform: translate(-50%, 0); }
.bulk-count { font-size: .85rem; font-weight: 600; white-space: nowrap; }
.bulk-count b { color: var(--teal); }
.bulk-bar select, .bulk-bar input[type=date] { width: auto; font-size: .82rem; padding: 6px 9px; }
.bulk-delete-btn { color: var(--danger); border-color: rgba(248,113,113,.3); }
.bulk-delete-btn:hover { background: rgba(248,113,113,.12); }
.bulk-cancel { background: none; border: none; color: var(--muted); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.bulk-cancel:hover { color: var(--ink); }

/* ===== Track roll-up ===== */
.track-head { display: flex; align-items: center; gap: 14px; }
.track-rollup { display: flex; align-items: center; gap: 10px; }
.track-rollup-bar { width: 120px; height: 6px; background: rgba(9, 19, 45, .07); border-radius: 999px; overflow: hidden; }
.track-rollup-bar span { display: block; height: 100%; background: var(--grad); border-radius: 999px; }
.track-rollup-n { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ===== Hey! filter ===== */
.hey-tools { display: flex; align-items: center; gap: 14px; }
.hey-filter { display: inline-flex; background: rgba(9, 19, 45, .04); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.hey-tab { border: none; background: transparent; font: inherit; font-weight: 600; font-size: .84rem; color: var(--muted);
    padding: 6px 16px; border-radius: 999px; cursor: pointer; }
.hey-tab.active { background: var(--ink); color: #fff; }
.notif-routine .notif-summary { font-weight: 500; color: var(--muted); }
.notif-routine .notif-summary .icon { opacity: .7; }

/* AI message draft */
.msg-new-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.msg-new-head .display { margin: 0; }
.msg-ai-form { margin: 0; }
.msg-ai-note { display: flex; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: 16px; font-size: .9rem;
    background: linear-gradient(160deg, rgba(255,90,78,.08), rgba(250,202,44,.06)); border: 1px solid rgba(255,90,78,.25);
    border-radius: var(--radius-md); color: var(--ink); }
.panel-head-actions { display: inline-flex; align-items: center; gap: 8px; }

/* Shared AI Assist panel (catch-up, lead draft) */
.ai-panel { white-space: pre-wrap; line-height: 1.55; color: var(--ink); font-size: .92rem;
    background: linear-gradient(160deg, rgba(255,90,78,.06), rgba(250,202,44,.05)); border: 1px solid rgba(255,90,78,.22);
    border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 18px; }
.ai-panel.ai-panel-loading { color: var(--muted); font-style: italic; background: var(--surface-2); border-color: var(--line); }
.ai-panel-draft { user-select: all; margin-top: 14px; }
.ai-panel strong { font-weight: 700; }
.tab-ai { margin-left: auto; color: var(--primary); }

/* AI task breakdown */
.ai-breakdown { padding: 14px 16px; margin: 0 0 16px; }
.ai-breakdown > summary { cursor: pointer; font-weight: 600; color: var(--ink); list-style: none; display: inline-flex; align-items: center; gap: 8px; }
.ai-breakdown > summary::-webkit-details-marker { display: none; }
.ai-breakdown[open] > summary { margin-bottom: 12px; }
.ai-breakdown-form { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.ai-breakdown-form textarea { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--radius-md); background: var(--bg-2); color: var(--ink); resize: vertical; }
.ai-task-list { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ai-task-row { display: flex; align-items: center; gap: 10px; }
.ai-task-input { flex: 1; font: inherit; padding: 8px 11px; border: 1px solid var(--line-2); border-radius: var(--radius-xs); background: var(--surface); color: var(--ink); }
.ai-task-off .ai-task-input { opacity: .4; text-decoration: line-through; }
.ai-task-dest { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }

/* ===== Hey! action center ===== */
.hey-readall { align-self: flex-end; }

.hey-digest { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
.hey-kpi { display: flex; flex-direction: column; gap: 2px; text-decoration: none;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
    padding: 14px 16px; box-shadow: var(--shadow); transition: border-color .12s, box-shadow .12s, transform .06s; }
.hey-kpi:hover { border-color: var(--line-2); box-shadow: 0 4px 14px rgba(9,19,45,.10); transform: translateY(-1px); }
.hey-kpi-n { font-size: 1.7rem; font-weight: 800; line-height: 1; color: var(--ink); }
.hey-kpi-l { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.hey-kpi-danger { border-color: rgba(220,38,38,.4); background: rgba(220,38,38,.05); }
.hey-kpi-danger .hey-kpi-n { color: #dc2626; }
.hey-kpi-accent { border-color: rgba(255,90,78,.3); background: linear-gradient(160deg, rgba(255,90,78,.08), transparent); }
.hey-kpi-accent .hey-kpi-n { color: var(--primary-d); }
.hey-kpi-warn { border-color: rgba(224,137,11,.4); background: rgba(224,137,11,.05); }
.hey-kpi-warn .hey-kpi-n { color: #c2740a; }

.hey-section { margin-bottom: 26px; scroll-margin-top: 80px; }
.hey-section-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.hey-section-h h2 { font-size: 1.05rem; margin: 0; }
.hey-section-count { font-size: .72rem; font-weight: 800; color: #fff; background: var(--primary); border-radius: 999px; padding: 1px 9px; }
.hey-section-link { margin-left: auto; font-size: .82rem; font-weight: 600; color: var(--primary); text-decoration: none; }
.hey-section-link:hover { text-decoration: underline; }

.hey-list { display: flex; flex-direction: column; gap: 8px; }

/* Respond items — full cards with actions */
.hey-item { display: flex; align-items: center; gap: 12px; background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px 14px; box-shadow: var(--shadow); }
.hey-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.hey-item-summary { font-weight: 600; color: var(--ink); line-height: 1.35; }
.hey-item-meta { font-size: .76rem; color: var(--muted); }
.hey-item-acts { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: 0 0 auto; }
.hey-dismiss { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
    border: 1px solid var(--line); background: var(--surface-2); border-radius: 8px; color: var(--muted);
    font-size: 1rem; line-height: 1; cursor: pointer; }
.hey-dismiss:hover { color: var(--ink); border-color: var(--line-2); }
.hey-snooze > summary.hey-dismiss { text-align: center; }  /* keep the clock centered in the <summary> */

/* Activity — compact clickable rows */
.hey-item-sm { padding: 0; }
.hey-item-btn { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
    background: none; border: none; font: inherit; color: inherit; cursor: pointer; padding: 11px 14px; border-radius: var(--radius-md); }
.hey-item-btn:hover { background: var(--surface-2); }
.hey-item-sm.unread { border-left: 3px solid var(--primary); background: rgba(255,90,78,.04); }
.hey-item-sm .hey-item-summary { font-weight: 500; }
.hey-item-sm .unread-dot { margin-left: auto; flex: 0 0 auto; }

/* Tasks — checkbox + ranked rows */
.hey-task { display: flex; align-items: center; gap: 12px; background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px 14px; box-shadow: var(--shadow); }
.hey-task-check { flex: 0 0 auto; display: flex; }
.hey-check { width: 22px; height: 22px; border: 2px solid var(--line-2); border-radius: 7px; background: var(--surface);
    cursor: pointer; position: relative; transition: border-color .12s, background .12s; }
.hey-check:hover { border-color: var(--success); background: rgba(22,163,74,.1); }
.hey-check::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 800; color: var(--success); opacity: 0; transition: opacity .12s; }
.hey-check:hover::after { opacity: .6; }
.hey-task-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-decoration: none; }
.hey-task-content { font-weight: 600; color: var(--ink); line-height: 1.35; }
.hey-task-main:hover .hey-task-content { color: var(--primary); }
.hey-task-meta { font-size: .76rem; color: var(--muted); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.hey-task-proj { display: inline-flex; align-items: center; gap: 5px; }
.hey-task-proj::before { content: ''; width: 8px; height: 8px; border-radius: 3px; background: var(--pc, #6b7280); }
.hey-task-tags { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: 0 0 auto; }
.hey-task-controls { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: 0 0 auto; }
.hey-ctl { display: inline-flex; margin: 0; }
.hey-ctl-sel, .hey-ctl-date { font: inherit; font-size: .8rem; color: var(--ink); background: var(--surface-2);
    border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; cursor: pointer; max-width: 130px; }
.hey-ctl-sel:hover, .hey-ctl-date:hover { border-color: var(--line-2); }
.hey-ctl-date { color: var(--muted); }
/* Deliberate reschedule: a chip that opens a small date editor with an explicit Set. */
.hey-resched { position: relative; }
.hey-resched > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
    font-size: .8rem; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line);
    border-radius: 8px; padding: 5px 9px; white-space: nowrap; }
.hey-resched > summary::-webkit-details-marker { display: none; }
.hey-resched > summary:hover { border-color: var(--line-2); color: var(--ink); }
.hey-resched[open] > summary { border-color: var(--primary); color: var(--primary); }
.hey-resched-form { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; display: flex; align-items: center; gap: 6px;
    padding: 8px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: var(--shadow-lg); }
.btn-xs { padding: 4px 10px; font-size: .76rem; border-radius: 7px; }
.hey-bk { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.hey-bk-overdue  { background: rgba(220,38,38,.14); color: #dc2626; }
.hey-bk-today    { background: rgba(255,90,78,.14); color: var(--primary-d); }
.hey-bk-progress { background: rgba(58,142,230,.16); color: #2f6fb0; }
.hey-bk-soon     { background: rgba(224,137,11,.16); color: #b5851f; }
.hey-bk-open     { background: var(--surface-2); color: var(--muted); }

/* AI writing assistant toolbar (under any data-ai-write textarea) */
.ai-write-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.ai-write-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--primary); margin-right: 2px; }
.ai-write-btn { font: inherit; font-size: .78rem; font-weight: 600; color: var(--muted); background: var(--surface-2);
    border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px; cursor: pointer; transition: color .12s, border-color .12s, background .12s; }
.ai-write-btn:hover:not(:disabled) { color: var(--primary); border-color: var(--line-2); background: var(--surface); }
.ai-write-btn:disabled { opacity: .55; cursor: default; }
.ai-write-undo { color: var(--ink); }
.ai-subtask-trigger { margin: 10px 0 4px; }
.hey-plan-btn { margin-left: 4px; }

/* AI client-update draft cards in the action center */
.hey-draft-item { border-left: 3px solid var(--primary); }
.hey-draft-preview { font-size: .82rem; line-height: 1.4; display: block; margin-top: 2px;
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.field-check { flex-direction: row; align-items: flex-start; gap: 8px; cursor: pointer; }
.field-check input { margin-top: 3px; flex: 0 0 auto; }
.field-check span { font-weight: 400; color: var(--muted); font-size: .88rem; }

/* Snooze popover on a respond item */
.hey-snooze { position: relative; }
.hey-snooze > summary { list-style: none; }
.hey-snooze > summary::-webkit-details-marker { display: none; }
.hey-snooze-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 160px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.hey-snooze-h { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 4px 8px; }
.hey-snooze-menu button { width: 100%; text-align: left; background: none; border: none; font: inherit;
    color: var(--ink); padding: 7px 8px; border-radius: 7px; cursor: pointer; }
.hey-snooze-menu button:hover { background: var(--surface-2); color: var(--primary); }

/* Inline reply composer on a "waiting on you" card — iOS-notification styling.
   Every item here is unread (the query only pulls read_at IS NULL), so the
   whole card gets the "needs attention" treatment. */
.hey-respond-item { flex-wrap: wrap; position: relative; border-radius: 16px;
    border: 1px solid var(--line); border-left: 3px solid var(--primary);
    background: linear-gradient(90deg, rgba(255,90,78,.06), var(--surface) 55%);
    box-shadow: 0 6px 20px rgba(9,19,45,.07); transition: box-shadow .15s, transform .15s; }
.hey-respond-item:hover { box-shadow: 0 12px 28px rgba(9,19,45,.12); transform: translateY(-1px); }
.hey-respond-item .hey-item-summary { font-weight: 700; }
.hey-unread-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--primary); flex: 0 0 auto;
    align-self: center; box-shadow: 0 0 0 4px rgba(255,90,78,.16); animation: hey-dot-pulse 2s ease-in-out infinite; }
@keyframes hey-dot-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(255,90,78,.16); } 50% { box-shadow: 0 0 0 4px rgba(255,90,78,.04); } }
.hey-open-link { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
    border: 1px solid var(--line); border-radius: 8px; color: var(--muted); text-decoration: none; }
.hey-open-link:hover { color: var(--primary); border-color: var(--line-2); }
.hey-reply { flex-basis: 100%; margin-top: 4px; }
.hey-reply > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
    font-size: .82rem; font-weight: 600; color: var(--primary); padding: 4px 0; }
.hey-reply > summary::-webkit-details-marker { display: none; }
.hey-reply[open] > summary { color: var(--muted); }
.hey-reply-form { margin-top: 6px; }
.hey-reply-form textarea { width: 100%; font: inherit; padding: 9px 11px; border: 1px solid var(--line-2);
    border-radius: var(--radius-md); background: var(--bg-2); color: var(--ink); resize: vertical; }
.hey-reply-actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; }

/* Snoozed section (collapsible) */
.hey-snoozed { border: 1px dashed var(--line-2); border-radius: var(--radius-md); padding: 4px 14px 14px; background: rgba(9,19,45,.015); }
.hey-snoozed-sum { list-style: none; cursor: pointer; padding: 12px 0; margin-bottom: 0; }
.hey-snoozed-sum::-webkit-details-marker { display: none; }
.hey-snoozed[open] .hey-snoozed-sum { margin-bottom: 12px; }
.hey-count-muted { background: var(--surface-2); color: var(--muted); }
.hey-item-snoozed { opacity: .85; }

@media (max-width: 720px) {
    .hey-digest { grid-template-columns: repeat(2, 1fr); }
    .hey-item, .hey-task { flex-wrap: wrap; }
    .hey-item-acts, .hey-task-tags { margin-left: 46px; }
}

/* ===== Bell quick-peek dropdown ===== */
.bell-pop { position: relative; }
.bell-pop > summary { list-style: none; }
.bell-pop > summary::-webkit-details-marker { display: none; }
.bell-menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; width: 372px; max-width: 92vw;
    background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg);
    padding: 6px; max-height: min(76vh, 680px); overflow-y: auto; overscroll-behavior: contain; }
/* Header: title on the left; compact actions that never wrap on the right. */
.bell-menu-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 12px 12px 12px; margin: -6px -6px 6px; border-bottom: 1px solid var(--line);
    position: sticky; top: -6px; z-index: 3;
    background: var(--surface) linear-gradient(180deg, rgba(9,19,45,.028), rgba(9,19,45,.028)); }
[data-theme="dark"] .bell-menu-head { background: var(--surface) linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.03)); }
.bell-menu-head strong { font-size: .95rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bell-head-actions { display: inline-flex; align-items: baseline; gap: 8px; flex: 0 0 auto; white-space: nowrap; font-size: .78rem; }
.bell-head-actions .link-btn { font-size: .78rem; }
.bell-menu-head a { font-size: .78rem; font-weight: 600; color: var(--primary); text-decoration: none; white-space: nowrap; }
.bell-menu-head a:hover { text-decoration: underline; }
.bell-group-h { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 12px 12px 5px; display: flex; align-items: center; gap: 6px; }
.bell-row { display: block; }
.bell-row > button, .bell-row { width: 100%; text-align: left; background: none; border: none; font: inherit; color: inherit; cursor: pointer; }
.bell-row > button, a.bell-row { display: flex; align-items: center; gap: 11px; padding: 10px 11px; border-radius: 11px; text-decoration: none; color: var(--ink); transition: background .12s ease; }
.bell-row > button:hover, a.bell-row:hover { background: var(--surface-2); }
.bell-row-txt { font-size: .87rem; line-height: 1.35; min-width: 0; }
.bell-row-task { gap: 9px; }
.bell-empty { padding: 22px 12px; text-align: center; }
.bell-menu-foot { display: block; margin: 6px -6px -6px; padding: 12px; text-align: center; border-top: 1px solid var(--line);
    color: var(--primary); font-size: .82rem; font-weight: 600; text-decoration: none;
    position: sticky; bottom: -6px; z-index: 3; background: var(--surface); }
.bell-menu-foot:hover { background: var(--surface-2); text-decoration: none; }

/* ===== Search filters + highlight ===== */
.search-filters { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.search-chip { font-size: .82rem; font-weight: 600; color: var(--muted); padding: 6px 14px; border-radius: 999px;
    border: 1px solid var(--line); background: rgba(9, 19, 45, .03); }
.search-chip:hover { color: var(--ink); border-color: var(--line-2); text-decoration: none; }
.search-chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }
mark { background: rgba(250, 202, 44,.28); color: var(--ink); border-radius: 3px; padding: 0 2px; }
.result-snippet { line-height: 1.5; }
.result-icon .icon { color: var(--teal); }

/* ===== Templates ===== */
.save-tpl { display: inline-block; margin-bottom: 14px; text-align: left; }
.save-tpl > summary { list-style: none; cursor: pointer; color: var(--muted); font-size: .9rem; }
.save-tpl > summary::-webkit-details-marker { display: none; }
.save-tpl > summary:hover { color: var(--ink); }
.save-tpl-form { display: flex; gap: 8px; margin: 10px 0; justify-content: center; flex-wrap: wrap; }
.save-tpl-form input { width: 240px; font-size: .85rem; }
.tpl-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }

/* ===== Calendar subscribe ===== */
.cal-card { max-width: 720px; }
.cal-url { display: flex; gap: 10px; margin: 6px 0 4px; }
.cal-url input { font-family: ui-monospace, monospace; font-size: .82rem; }
.cal-how { margin-top: 14px; }
.cal-how summary { cursor: pointer; color: var(--primary); font-weight: 600; font-size: .9rem; list-style: none; }
.cal-how summary::-webkit-details-marker { display: none; }
.cal-steps { margin: 12px 0 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: .9rem; color: var(--muted); }
.cal-steps strong { color: var(--ink); }

/* ===== Import ===== */
.import-help { margin-top: 18px; }
.import-help h3 { font-size: 1.05rem; }
.import-cols { list-style: none; margin: 10px 0; display: flex; flex-direction: column; gap: 6px; font-size: .9rem; color: var(--muted); }
.import-cols code { background: rgba(9, 19, 45, .06); padding: 1px 7px; border-radius: 6px; color: var(--teal); font-size: .85rem; }

/* ===== Command palette (⌘K) ===== */
/* Lives in the action-bar's left slot (sub-nav strip), styled to match the glass pill. */
.cmdk-trigger { display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
    background: color-mix(in srgb, var(--surface-2) 65%, transparent); border: 1px solid var(--line); border-radius: 999px;
    padding: 5px 8px 5px 14px; color: var(--muted); font: inherit; font-size: .84rem; min-width: 190px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 3px rgba(9,19,45,.06); }
.cmdk-trigger:hover { border-color: var(--line-2); color: var(--ink); }
.cmdk-trigger-text { flex: 1; text-align: left; }
.cmdk-trigger-key { font-size: .72rem; font-weight: 700; background: rgba(15,25,42,.08); border: 1px solid var(--line);
    border-radius: 999px; padding: 1px 8px; color: var(--muted); }
@media (max-width: 1100px) { .cmdk-trigger { min-width: 0; } .cmdk-trigger-text { display: none; } }

.cmdk { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-start; justify-content: center; }
.cmdk[hidden] { display: none; }
.cmdk-backdrop { position: absolute; inset: 0; background: rgba(4,9,16,.6); backdrop-filter: blur(3px); }
.cmdk-panel { position: relative; margin-top: 12vh; width: 92%; max-width: 580px;
    background: var(--surface); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: var(--shadow-lg);
    overflow: hidden; animation: cmdk-in .14s ease; }
@keyframes cmdk-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.cmdk-input { width: 100%; border: none; background: transparent; color: var(--ink); font-size: 1.05rem;
    padding: 18px 20px; border-bottom: 1px solid var(--line); border-radius: 0; }
.cmdk-input:focus { outline: none; box-shadow: none; }
.cmdk-list { list-style: none; max-height: 50vh; overflow-y: auto; padding: 8px; }
.cmdk-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px; cursor: pointer; }
.cmdk-item.active { background: var(--surface-2); }
.cmdk-type { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
    background: rgba(9, 19, 45, .05); border: 1px solid var(--line); padding: 2px 8px; border-radius: 999px; min-width: 56px; text-align: center; }
.cmdk-item.active .cmdk-type { color: var(--teal); border-color: rgba(255, 90, 78,.4); }
.cmdk-label { font-size: .95rem; font-weight: 500; }
.cmdk-empty { padding: 18px; text-align: center; color: var(--muted); }
.cmdk-foot { display: flex; gap: 16px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--line);
    font-size: .72rem; color: var(--muted); }
.cmdk-foot-k { margin-left: auto; }

/* ===== Task detail ===== */
.todo-link { color: var(--ink); }
.todo-link:hover { color: var(--teal); text-decoration: none; }
.todo-item.done .todo-link { color: var(--muted); }
.todo-comment-count { font-size: .72rem; color: var(--muted); margin-left: 6px; }
.todo-comment-count:hover { color: var(--teal); text-decoration: none; }

.task-detail .task-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; }
.task-head h1 { font-family: var(--display); font-size: clamp(1.5rem, 3.5vw, 2.1rem); letter-spacing: -0.02em; }
.task-head h1.task-done { text-decoration: line-through; color: var(--muted); }
.checkbox.lg { width: 30px; height: 30px; border-radius: 9px; font-size: 1rem; margin-top: 4px; }
.checkbox.lg.done { background: var(--grad); border-color: transparent; }

.task-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px;
    padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 18px; }
.tm { display: flex; flex-direction: column; gap: 6px; }
.tm-l { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.tm-assignee { display: inline-flex; align-items: center; gap: 7px; font-size: .92rem; }
.task-completed-note { display: inline-flex; align-items: center; gap: 8px; background: rgba(22,163,74,.1);
    border: 1px solid rgba(22,163,74,.28); color: #15803d; padding: 8px 14px; border-radius: var(--radius-sm);
    margin-bottom: 16px; font-size: .9rem; }
.task-completed-note .icon { color: #15803d; }
.task-notes-view { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 10px; }
.task-notes-edit > summary { list-style: none; cursor: pointer; color: var(--teal); font-size: .88rem; font-weight: 600; }
.task-notes-edit > summary::-webkit-details-marker { display: none; }
.task-notes-input { width: 100%; margin-top: 8px; font: inherit; }

/* Task attachments */
.att-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.att-item { position: relative; }
.att-thumb { display: block; width: 96px; height: 96px; border-radius: 10px; border: 1px solid var(--line-2);
    background-size: cover; background-position: center; }
.att-doc { display: flex; align-items: center; gap: 8px; max-width: 220px; padding: 10px 12px; border-radius: 10px;
    background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); }
.att-doc:hover { text-decoration: none; border-color: var(--line-2); }
.att-doc-ic { color: var(--teal); flex: 0 0 auto; }
.att-doc-name { font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-del button { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 50%; border: none;
    background: var(--ink); color: #fff; cursor: pointer; font-size: 1rem; line-height: 1; display: grid; place-items: center; box-shadow: var(--shadow); }
.att-del button:hover { background: var(--danger); }
.att-upload { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.att-pick { cursor: pointer; }
.att-pick input { display: none; }
.att-pick span { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; font-weight: 600; color: var(--ink);
    background: var(--surface-2); border: 1px dashed var(--line-2); border-radius: 10px; padding: 9px 14px; }
.att-pick:hover span { border-color: var(--primary); color: var(--primary); }
.paste-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 200;
    background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 999px; font-size: .88rem; font-weight: 600; box-shadow: var(--shadow-lg); }
.avatar-img { background-size: cover; background-position: center; background-repeat: no-repeat; color: transparent; overflow: hidden; }
.mc-load { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: .82rem; color: var(--muted);
    background: rgba(9,19,45,.04); border: 1px solid var(--line); padding: 4px 10px; border-radius: 999px; }
.mc-load:hover { color: var(--ink); border-color: var(--line-2); text-decoration: none; }
.mc-load strong { color: var(--ink); }
.mc-load .icon { color: var(--teal); }
.mc-merge { display: inline-block; }
.mc-merge > summary { list-style: none; cursor: pointer; }
.mc-merge > summary::-webkit-details-marker { display: none; }
.mc-merge-form { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.mc-merge-form select { font-size: .82rem; padding: 6px 8px; max-width: 160px; }

/* ===== Cleanup / duplicates ===== */
.cu-count { font-size: .8rem; font-weight: 700; color: var(--muted); background: rgba(9,19,45,.06); padding: 1px 9px; border-radius: 999px; margin-left: 6px; }
.cu-group { padding: 18px 20px; margin-bottom: 14px; }
.cu-group-h { font-size: 1.02rem; margin-bottom: 6px; }
.cu-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line); }
.cu-item:first-of-type { border-top: none; }
.cu-item-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cu-del { color: var(--danger); border-color: rgba(220,38,38,.3); white-space: nowrap; }
.cu-del:hover:not(:disabled) { background: rgba(220,38,38,.08); }
.cu-del:disabled { color: var(--muted); opacity: .6; cursor: default; }
.cu-hint { margin-top: 8px; }

/* ===== Suggestion box ===== */
.sg-grid { display: grid; grid-template-columns: 340px 1fr; gap: 22px; align-items: start; }
@media (max-width: 820px) { .sg-grid { grid-template-columns: 1fr; } }
.sg-form { position: sticky; top: 84px; }
@media (max-width: 820px) { .sg-form { position: static; } }
.sg-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; margin-bottom: 10px; }
.sg-check-form { margin: 0; flex: 0 0 auto; }
.sg-item .checkbox { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--line-2); background: transparent;
    cursor: pointer; display: grid; place-items: center; color: #fff; transition: .15s; padding: 0; margin-top: 1px; }
.sg-item .checkbox:hover { border-color: var(--success); }
.sg-item .checkbox.checked { background: var(--success); border-color: transparent; }
.sg-item .checkbox .icon { width: 13px; height: 13px; stroke-width: 3; }
.sg-cat-ic { font-size: 1.1rem; flex: 0 0 auto; margin-top: 1px; }
.sg-main { flex: 1; min-width: 0; }
.sg-title { font-size: .98rem; font-weight: 600; color: var(--ink); }
.sg-body { font-size: .9rem; color: var(--muted); margin-top: 4px; line-height: 1.5; }
.sg-meta { display: flex; align-items: center; gap: 7px; font-size: .78rem; color: var(--muted); margin-top: 8px; }
.sg-tag { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; margin-left: 4px; vertical-align: middle; }
.sg-tag-feature { color: #2563eb; background: rgba(37,99,235,.1); }
.sg-tag-fix { color: #c2410c; background: rgba(194,65,12,.1); }
.sg-done { opacity: .7; }
.sg-done .sg-title { text-decoration: line-through; color: var(--muted); }

/* ===== Connectors (project tab) ===== */
.conn-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
    padding: 22px 24px; border-radius: var(--radius); border: 1px solid var(--line);
    background: radial-gradient(520px 200px at 100% -40%, rgba(255,90,78,.12), transparent 60%), var(--surface); }
.conn-back { font-size: .82rem; font-weight: 600; color: var(--muted); }
.conn-back:hover { color: var(--ink); text-decoration: none; }
.conn-title { font-family: var(--display); font-size: 1.5rem; margin: 8px 0 2px; }
.conn-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.conn-settings-link { font-size: .82rem; font-weight: 600; color: var(--muted); align-self: center; }
.conn-settings-link:hover { color: var(--ink); }

.conn-empty { text-align: center; padding: 40px 24px; }
.conn-empty-ic { font-size: 2.4rem; }
.conn-empty h3 { font-family: var(--display); font-size: 1.2rem; margin: 8px 0 4px; }

.conn-section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; margin-bottom: 16px; box-shadow: var(--shadow); }
.conn-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.conn-sec-head h3 { font-family: var(--display); font-size: 1.15rem; }
.conn-sec-actions { display: inline-flex; align-items: center; gap: 12px; }

.conn-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0 0 6px; }
@media (max-width: 640px) { .conn-stats { grid-template-columns: repeat(2, 1fr); } }
.conn-stat { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; }
.conn-stat-ic { font-size: 1.1rem; }
.conn-stat-n { display: block; font-family: var(--display); font-weight: 800; font-size: 1.5rem; color: var(--ink); margin-top: 4px; }
.conn-stat-l { font-size: .78rem; color: var(--muted); }
.conn-pos { display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 6px; border-radius: 6px;
    font-size: .8rem; font-weight: 700; background: rgba(22,163,74,.12); color: #15803d; }
.conn-h { font-family: var(--display); font-size: 1.05rem; margin: 18px 0 10px; }
.conn-trend { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.conn-trend-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px;
    display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 8px; }
.conn-trend-l { font-size: .78rem; color: var(--muted); grid-column: 1 / -1; }
.conn-trend-n { font-family: var(--display); font-weight: 800; font-size: 1.4rem; color: var(--ink); }
.conn-trend-d { font-size: .8rem; font-weight: 700; }
.conn-trend-d.up { color: var(--success); } .conn-trend-d.down { color: var(--danger); }
.conn-trend-card .spark { grid-column: 1 / -1; width: 100%; height: 36px; margin-top: 6px; }

/* ===== PM assignment board ===== */
.pmb-toolbar { position: sticky; top: 72px; z-index: 20; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; padding: 12px 16px; margin-bottom: 14px; box-shadow: var(--shadow); }
.pmb-pick { display: flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 600; color: var(--muted); }
.pmb-pick-label { white-space: nowrap; }
.pmb-pick select { width: auto; min-width: 220px; cursor: pointer; appearance: none; -webkit-appearance: none;
    padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
.pmb-table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.pmb-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.pmb-table th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
    padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.pmb-table td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.pmb-table tr:last-child td { border-bottom: none; }
.pmb-table tbody tr:hover { background: rgba(9,19,45,.02); }
[data-theme="dark"] .pmb-table tbody tr:hover { background: rgba(255,255,255,.04); }
.pmb-check { width: 40px; }
.pmb-check input { width: 17px; height: 17px; accent-color: var(--teal); }
.pmb-name { font-weight: 600; color: var(--ink); display: block; }
.pmb-name:hover { color: var(--teal); text-decoration: none; }
.pmb-desc { max-width: 380px; color: var(--muted); }
.pmb-pm { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 500; }
.conn-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.conn-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.conn-table th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
    padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.conn-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); }
.conn-table tr:last-child td { border-bottom: none; }
.conn-url { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conn-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.conn-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--line); font-size: .85rem; color: var(--ink); }
.conn-chip img { width: 16px; height: 16px; border-radius: 4px; }
.conn-chip:hover { border-color: var(--line-2); text-decoration: none; }
.conn-ai { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 22px 18px; }

/* ===== Rendered markdown ===== */
.markdown { color: var(--ink); line-height: 1.6; font-size: .94rem; }
.markdown h1 { font-family: var(--display); font-size: 1.5rem; margin: 20px 0 10px; letter-spacing: -.02em; }
.markdown h2 { font-family: var(--display); font-size: 1.2rem; margin: 20px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.markdown h3 { font-size: 1.05rem; margin: 16px 0 6px; }
.markdown h4 { font-size: .96rem; margin: 14px 0 6px; }
.markdown p { margin: 0 0 12px; }
.markdown ul, .markdown ol { margin: 0 0 12px; padding-left: 22px; }
.markdown li { margin: 4px 0; }
.markdown a { color: var(--teal); text-decoration: underline; }
.markdown code { background: rgba(9,19,45,.07); padding: 1px 6px; border-radius: 5px; font-size: .9em; }
.markdown hr { border: none; border-top: 1px solid var(--line); margin: 18px 0; }
.markdown blockquote { margin: 0 0 14px; padding: 10px 16px; border-left: 3px solid var(--teal);
    background: rgba(255,90,78,.05); border-radius: 0 8px 8px 0; color: var(--ink); }
.markdown .md-table { width: 100%; border-collapse: collapse; margin: 6px 0 16px; font-size: .9rem; display: block; overflow-x: auto; }
.markdown .md-table th, .markdown .md-table td { border: 1px solid var(--line); padding: 8px 11px; text-align: left; vertical-align: top; }
.markdown .md-table th { background: var(--surface-2); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .02em; }
[data-theme="dark"] .markdown code { background: rgba(255,255,255,.08); }

/* Inline (embedded/pasted) images in bodies & comments */
.md-img { max-width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line); margin: 6px 0; display: block; cursor: zoom-in; }
.prose .md-img { max-width: 480px; }
.comment .md-img, .comment-body .md-img { max-width: 300px; }
.attach-thumb { cursor: zoom-in; }

/* Full-size image viewer for comment / message / attachment images */
.lightbox { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center;
    background: rgba(9, 19, 45, .85); padding: 32px; cursor: zoom-out; backdrop-filter: blur(2px); }
.lightbox.open { display: flex; }
.lightbox img { max-width: 95vw; max-height: 92vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
    background: #fff; cursor: default; }
.lightbox-close { position: absolute; top: 18px; right: 24px; width: 40px; height: 40px; border-radius: 999px;
    border: none; background: rgba(255, 255, 255, .16); color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer; }
.lightbox-close:hover { background: rgba(255, 255, 255, .3); }

/* Overview connectors summary card */
.ov-connectors { display: block; color: var(--ink); position: relative; overflow: hidden; padding-top: 18px; }
.ov-connectors::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad); }
.ov-connectors:hover { text-decoration: none; border-color: rgba(255,90,78,.4); box-shadow: var(--shadow-lg); }
.ov-connectors h3 { margin-bottom: 12px; display: flex; align-items: center; gap: 7px; }
.ov-conn-stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 6px; }
.ov-conn-stats span { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 7px 11px; font-size: .72rem; color: var(--muted); }
.ov-conn-stats strong { color: var(--ink); font-size: 1.15rem; font-family: var(--display); font-weight: 800; line-height: 1; }
.ov-connectors > p.muted { margin: 0 0 12px; padding-left: 2px; }
.ov-conn-ai { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; font-weight: 600; margin: 4px 0 12px;
    padding: 6px 12px; background: rgba(255,90,78,.06); border: 1px solid rgba(255,90,78,.18); border-radius: 999px; }
.ov-conn-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: .85rem; font-weight: 700; color: var(--teal); }
.ov-connectors:hover .ov-conn-link { gap: 9px; }
.mc-dept-form { margin: 0; }
.mc-dept-form input { font-size: .82rem; padding: 6px 10px; max-width: 160px; }

/* ===== Reports (output) ===== */
.rp-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 18px 0 24px; }
@media (max-width: 640px) { .rp-summary { grid-template-columns: 1fr; } }
.rp-stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; }
.rp-stat-n { display: block; font-family: var(--display); font-weight: 800; font-size: 2.1rem; line-height: 1.1; letter-spacing: -.02em; color: var(--ink); }
.rp-stat-l { font-size: .86rem; color: var(--muted); margin-top: 2px; }
.rp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 760px) { .rp-grid { grid-template-columns: 1fr; } }
.rp-card-wide { grid-column: 1 / -1; }
.rp-card { padding: 22px 24px; }
.rp-card h3 { font-family: var(--display); font-size: 1.08rem; margin: 0 0 6px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.rp-row { display: grid; grid-template-columns: minmax(140px, 1.1fr) 1fr 76px; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.rp-row:last-child { border-bottom: none; }
.rp-row-label { display: flex; align-items: center; gap: 9px; min-width: 0; }
.rp-row-name { font-size: .92rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-row-sub { font-size: .76rem; color: var(--muted); }
.rp-dot { width: 11px; height: 11px; border-radius: 4px; flex: 0 0 auto; }
.rp-row-bar { height: 10px; background: rgba(9,19,45,.06); border-radius: 999px; overflow: hidden; }
.rp-row-bar span { display: block; height: 100%; border-radius: 999px; transition: width .4s ease; }
.rp-row-val { font-size: .9rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.rp-range { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 18px; }
.rp-rbtn { padding: 6px 13px; border-radius: 999px; font-size: .82rem; font-weight: 600; background: var(--surface); border: 1px solid var(--line-2); color: var(--muted); }
.rp-rbtn:hover { color: var(--ink); border-color: var(--ink); text-decoration: none; }
.rp-rbtn.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.rp-table-wrap { overflow-x: auto; padding: 4px 8px; }
.rp-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.rp-table th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.rp-table td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.rp-table tbody tr:last-child td { border-bottom: none; }
.rp-table tbody tr:hover { background: rgba(9,19,45,.02); }

/* Timesheet log */
.rp-log { margin-top: 22px; padding: 18px 20px; }
.rp-log-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.rp-log-head h3 { margin: 0; }
.rp-log-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.rp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border: 1px solid var(--line); border-radius: 999px; font-size: .8rem; font-weight: 600; color: var(--ink); background: var(--surface); }
.rp-chip:hover { border-color: var(--primary); }
.rp-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.rp-chip.active .avatar { box-shadow: 0 0 0 1.5px #fff; }
.rp-log-table td { white-space: normal; }
.rp-log-date { white-space: nowrap; color: var(--muted); }
.rp-log-person { display: inline-flex; align-items: center; gap: 6px; color: inherit; white-space: nowrap; }
.rp-log-task { color: var(--ink); font-weight: 500; }
.rp-log-note { color: var(--muted); max-width: 420px; }
.rp-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rp-log-cap { margin: 10px 4px 0; }
[data-theme="dark"] .rp-table tbody tr:hover { background: rgba(255,255,255,.04); }
.rp-proj { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; }
.rp-proj:hover { color: var(--teal); text-decoration: none; }
.rp-proj + .muted { display: block; margin-left: 17px; }
.rp-fav { width: 16px; height: 16px; border-radius: 4px; }
.rp-pm { display: inline-flex; align-items: center; gap: 6px; }
.rp-prog { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.rp-prog-bar { flex: 1; height: 7px; background: rgba(9,19,45,.08); border-radius: 999px; overflow: hidden; }
.rp-prog-bar span { display: block; height: 100%; background: var(--grad); }
.rp-prog-n { font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.rp-bad { color: var(--danger); font-weight: 700; }
.rp-warn { color: var(--warning); font-weight: 700; }
.rp-trend { font-size: .76rem; font-weight: 700; }
.rp-trend.up { color: var(--success); } .rp-trend.down { color: var(--danger); }

/* Reports: range row + CSV + retainers */
.rp-range { justify-content: space-between; align-items: center; }
.rp-rbtns { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
/* Custom from/to range: a pill that holds two date inputs (Marc's ask). */
.rp-custom { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); }
.rp-custom.active { border-color: var(--ink); }
.rp-custom input[type="date"] { border: 0; background: transparent; font-size: .8rem; font-weight: 600; color: var(--muted); padding: 3px 0; width: 8.2em; font-family: inherit; }
.rp-custom input[type="date"]:focus { outline: none; color: var(--ink); }
.rp-custom.active input[type="date"] { color: var(--ink); }
.rp-custom-sep { color: var(--muted); font-size: .8rem; }
.rp-custom-go { border: 0; background: var(--ink); color: #fff; cursor: pointer; padding: 4px 11px; }
.rp-custom-go:hover { color: #fff; }
.rp-csv { font-size: .82rem; font-weight: 600; color: var(--primary); padding: 6px 13px; border: 1px solid var(--line-2); border-radius: 999px; }
.rp-csv:hover { border-color: var(--primary); text-decoration: none; }
.rp-note { margin: -6px 0 16px; }
.rp-budget-form { display: inline-flex; align-items: center; gap: 4px; }
.rp-budget-in { width: 64px; padding: 5px 7px; border: 1px solid var(--line-2); border-radius: 7px; font-size: .85rem; background: var(--surface); color: var(--ink); font-variant-numeric: tabular-nums; }
.rp-budget-unit { font-size: .8rem; color: var(--muted); }
.rp-budget-save { border: none; background: var(--surface-2); color: var(--success); width: 26px; height: 26px; border-radius: 7px; cursor: pointer; font-weight: 700; }
.rp-budget-save:hover { background: var(--success); color: #fff; }
.rp-rem.neg { color: var(--danger); font-weight: 700; }
.rp-prog-ret .rp-prog-bar span { background: var(--success); }
.rp-prog-ret.warn .rp-prog-bar span { background: var(--warning); }
.rp-prog-ret.over .rp-prog-bar span { background: var(--danger); }
.rp-prog-ret.warn .rp-prog-n { color: var(--warning); }
.rp-prog-ret.over .rp-prog-n { color: var(--danger); }
.ov-ret-nums { font-size: .95rem; margin-bottom: 8px; }
.ov-retainer .rp-prog { min-width: 0; margin-bottom: 6px; }

/* Deliverables (plan spec) */
.dlv-list { margin: 4px 0 0; display: grid; gap: 0; }
.dlv-item { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.dlv-item:last-child { border-bottom: none; }
.dlv-item dt { color: var(--muted); font-size: .85rem; }
.dlv-item dd { margin: 0; font-weight: 600; text-align: right; }
.dlv-chip { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line-2); font-size: .8rem; font-weight: 600; }
.dlv-form .dlv-rows { display: grid; gap: 7px; margin: 6px 0; }
.dlv-row { display: flex; align-items: center; gap: 6px; }
.dlv-row .dlv-label { flex: 1 1 40%; min-width: 0; }
.dlv-row .dlv-value { flex: 1 1 40%; min-width: 0; }
.dlv-row input, .dlv-row select { padding: 6px 8px; border: 1px solid var(--line-2); border-radius: 7px; font-size: .85rem; background: var(--surface); color: var(--ink); }
.dlv-del { flex: 0 0 auto; width: 26px; height: 26px; border: 1px solid var(--line-2); background: var(--surface); color: var(--muted); border-radius: 7px; cursor: pointer; line-height: 1; font-size: 1.05rem; }
.dlv-del:hover { color: #fff; background: var(--danger); border-color: var(--danger); }
.dlv-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.dlv-tpl-link { display: inline-block; margin-top: 8px; }
/* Delivered vs. promised */
.dlv-item.tracked { display: block; }
.dlv-track-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dlv-track-head dt { color: var(--muted); font-size: .85rem; }
.dlv-track-head dd { margin: 0; font-weight: 600; }
.dlv-prog { min-width: 0; margin: 6px 0 2px; }
.dlv-prog.met .rp-prog-bar span { background: var(--success); }
.dlv-prog.partial .rp-prog-bar span { background: var(--accent); }
.dlv-prog.none .rp-prog-bar span { background: var(--line-2); }
.dlv-prog.met .rp-prog-n { color: var(--success); }
.deliv-recur { display: flex; align-items: flex-start; gap: 7px; margin-top: 7px; font-size: .8rem; color: var(--muted); cursor: pointer; line-height: 1.3; }
.deliv-recur input { margin-top: 1px; }

/* Font Awesome (duotone) — house style */
.i-emoji { font-style: normal; }
/* FA glyphs reusing the legacy .icon slot keep consistent baseline */
i.icon[class*="fa-"] { vertical-align: -0.125em; line-height: 1; }
/* Duotone defaults: a touch more presence on the secondary layer */
:root { --fa-secondary-opacity: 0.42; }
/* Signature/header icons get the coral→gold brand duotone */
.ov-block h3, .ov-recap-head h3, .conn-title, .panel-head h2 { display: inline-flex; align-items: center; gap: 9px; }
.ov-block h3 > i[class*="fa-"], .ov-recap-head h3 > i[class*="fa-"],
.conn-title > i[class*="fa-"], .panel-head h2 > i[class*="fa-"] {
    color: var(--primary); font-size: 1em; width: 1.1em; text-align: center; flex: 0 0 auto;
    --fa-secondary-color: var(--accent); --fa-secondary-opacity: 0.8;
}
/* AI surfaces share one signature: coral wand, gold sparkles */
.ov-recap-head h3 > .fa-wand-magic-sparkles,
.conn-ai-head h3 > .fa-wand-magic-sparkles { color: var(--primary); --fa-secondary-color: var(--accent); --fa-secondary-opacity: 1; }
/* Keep the small in-checkbox check the right size when routed to FA */
.sg-item .checkbox i.fa-square-check { font-size: 13px; }
/* Template editor (settings) wider rows with type + options + track */
.dlv-thead { display: none; }
.dlv-row-tpl .dlv-type { flex: 0 0 100px; }
.dlv-row-tpl .dlv-opts { flex: 1 1 28%; min-width: 0; }
.dlv-row-tpl .dlv-monthly { flex: 0 0 70px; }
.dlv-row-tpl .dlv-track { flex: 1 1 22%; min-width: 0; }
@media (min-width: 820px) {
    .dlv-thead { display: grid; grid-template-columns: 1fr 100px 1fr 70px 1fr 26px; gap: 6px; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 2px; }
}

/* Project Overview: AI catch-up card */
.ov-recap { position: relative; padding: 18px 20px; border-color: rgba(255,90,78,.25);
    background: radial-gradient(420px 160px at 100% -30%, rgba(255,90,78,.07), transparent 60%), var(--surface); }
.ov-recap-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.ov-recap-head h3 { font-family: var(--display); font-size: 1.15rem; }
.ov-recap-body { font-size: .92rem; }
.ov-recap-body p:first-child { margin-top: 0; }

/* ===== Avatar focal-point picker ===== */
.avatar.xl { width: 84px; height: 84px; font-size: 1.6rem; }
.ap-body { display: flex; align-items: center; gap: 18px; margin: 12px 0 6px; padding: 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.ap-preview { flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(9,19,45,.08); }
.ap-controls { flex: 1; min-width: 0; }
.ap-slider { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; font-size: .78rem; color: var(--muted); }
.ap-slider input[type="range"] { width: 100%; accent-color: var(--primary); }
.task-blocked { background: rgba(220,38,38,.08); border: 1px solid rgba(220,38,38,.25); color: #b91c1c;
    padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 18px; font-size: .92rem; }
.task-section { margin: 22px 0; }
.task-section h3 { font-size: 1rem; margin-bottom: 10px; }
.task-dep { padding: 4px 0; }
.task-dep .dep-done { color: var(--muted); text-decoration: line-through; }

/* ===== Task detail edit form ===== */
.task-check-static { width: 28px; height: 28px; border-radius: 9px; border: 2px solid var(--line-2);
    display: grid; place-items: center; color: #09132d; font-weight: 800; flex: 0 0 auto; margin-top: 4px; }
.task-check-static.done { background: var(--grad); border-color: transparent; }
.task-title-input { font-family: var(--display); font-weight: 700; font-size: clamp(1.4rem, 3vw, 2rem);
    letter-spacing: -0.02em; border: 1px solid transparent; background: transparent; padding: 4px 8px; }
.task-title-input:hover { border-color: var(--line); }
.task-title-input.task-done { text-decoration: line-through; color: var(--muted); }
.task-meta-grid label.tm select, .task-meta-grid label.tm input { font-size: .9rem; padding: 8px 10px; }
.task-blocked-field { margin-bottom: 18px; }

/* ===== @mentions ===== */
.mention { color: var(--teal); font-weight: 600; background: rgba(255, 90, 78,.1); padding: 0 4px; border-radius: 5px; }
.comment-form-main { position: relative; }
.mention-menu { position: absolute; left: 0; bottom: 100%; margin-bottom: 6px; z-index: 40; list-style: none;
    width: 240px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 12px;
    box-shadow: var(--shadow-lg); padding: 6px; max-height: 220px; overflow-y: auto; }
.mention-menu li { padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: .9rem; font-weight: 600; }
.mention-menu li span { color: var(--muted); font-weight: 400; margin-left: 6px; font-size: .82rem; }
.mention-menu li.active { background: rgba(255, 90, 78,.14); }

/* ===== Onboarding empty state ===== */
.onboard { display: flex; gap: 28px; padding: 36px; align-items: center; flex-wrap: wrap; }
.onboard-art { flex: 0 0 auto; }
.onboard-body { flex: 1; min-width: 260px; }
.onboard-body h2 { font-size: 1.5rem; margin-bottom: 8px; }
.onboard-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }
@media (max-width: 720px) { .onboard-actions { grid-template-columns: 1fr; } }
.onboard-opt { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left;
    padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2);
    color: var(--ink); transition: transform .12s, border-color .15s, background .15s; }
.onboard-opt:hover { transform: translateY(-3px); border-color: rgba(255, 90, 78,.4); background: var(--surface-2); text-decoration: none; }
.onboard-opt strong { font-size: 1rem; }
.onboard-opt-ic { font-size: 1.5rem; margin-bottom: 6px; }
.onboard-opt--form { padding: 0; }
.onboard-opt-btn { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left;
    width: 100%; height: 100%; padding: 18px; background: none; border: none; cursor: pointer; font: inherit; color: var(--ink); }

/* ============================================================
   Mobile responsiveness
   ============================================================ */
.nav-toggle { display: none; flex-direction: column; gap: 4px; width: 38px; height: 38px;
    align-items: center; justify-content: center; background: rgba(15,25,42,.05); border: 1px solid var(--line);
    border-radius: 10px; cursor: pointer; padding: 0; margin-left: auto; }
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 960px) {
    .topbar-inner { gap: 10px; }
    .nav-toggle { display: flex; }
    .cmdk-trigger { display: none; }        /* keyboard-only palette — not useful on touch */
    .topbar-user > form { display: none; }  /* sign out lives in the drawer on mobile */

    /* Nav becomes a solid dropdown drawer (var(--surface) keeps dark mode legible). */
    .topnav {
        position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; gap: 2px;
        background: var(--surface); border-bottom: 1px solid var(--line);
        box-shadow: 0 18px 40px rgba(8,19,32,.28);
        padding: 10px; margin: 0; display: none; z-index: 60; max-height: calc(100vh - 64px); overflow-y: auto;
    }
    .topnav.open { display: flex; }
    .topnav a, .topnav .nav-link { padding: 12px 14px; font-size: .95rem; border-radius: 12px; }
    .topnav .icon { display: inline-block !important; }
    .topbar-search { display: none; }
    .topbar-name { display: none; }

    /* Groups become inline accordions; flatten the mega-menu so it's not a nested card. */
    .nav-group { width: 100%; }
    .nav-group > summary { width: 100%; padding: 12px 14px; font-size: .95rem; border-radius: 12px; justify-content: flex-start; }
    .nav-group > summary .org-caret { margin-left: auto; }
    .popover.nav-pop, .popover.nav-mega, .popover.nav-mega-wide {
        position: static; width: auto; box-shadow: none; border: none; background: transparent;
        padding: 2px 0 4px 14px; margin-top: 2px;
    }
    .nav-pop-item, .nav-mega-item { padding: 10px 12px; font-size: .92rem; }
    .nav-mega-head { padding-left: 12px; }

    /* Account + sign out at the bottom of the drawer. */
    .nav-mobile-foot { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
    .nav-mobile-foot form { width: 100%; }
    .nav-signout { width: 100%; text-align: left; background: none; border: none; cursor: pointer; font: inherit; color: var(--danger); }
    .nav-signout:hover { background: rgba(248,113,113,.10); }
}

@media (max-width: 560px) {
    .page { padding: 22px 16px 56px; }
    .cmdk-trigger { min-width: 0; padding: 8px; }
    .cmdk-trigger-text { display: none; }
    .display { font-size: clamp(1.5rem, 7vw, 2rem); }
    .hero { gap: 14px; }
    .db-banner, .proj-banner { padding: 22px 18px 0; }
    .db-stats { grid-template-columns: 1fr 1fr; gap: 1px; }
    .db-stat { padding: 13px 14px; }
    .tabs { width: 100%; flex-wrap: wrap; }
    .tab { white-space: nowrap; padding: 7px 12px; font-size: .84rem; }
    .bulk-bar { left: 8px; right: 8px; transform: translateY(140%); max-width: none; }
    .bulk-bar.active { transform: translateY(0); }
    .form-actions { flex-wrap: wrap; }
    .timesheet-grid, .schedule-grid, .mystuff-grid, .report-grid, .proj-activity { gap: 16px; }
    .cmdk-panel { margin-top: 8vh; }
}

/* ===== Verify-email banner ===== */
.verify-banner { max-width: 1140px; margin: 14px auto 0; padding: 11px 18px; display: flex; align-items: center;
    justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .9rem;
    background: #fff7e6; border: 1px solid #f1d188; color: #8a5d08; border-radius: var(--radius-sm); }
.verify-banner .link-btn { color: #8a5d08; font-weight: 700; text-decoration: underline; }
.verify-banner .link-btn:hover { color: #6e4a05; }

/* ===== Danger row ===== */
.danger-row { display: inline-flex; gap: 22px; align-items: center; }

/* ===== Calendar subscribe (project) + danger zone ===== */
.cal-subscribe { position: relative; }
.cal-subscribe > summary { list-style: none; }
.cal-subscribe > summary::-webkit-details-marker { display: none; }
.cal-subscribe-pop { position: absolute; right: 0; top: 42px; z-index: 20; width: 340px; max-width: 90vw;
    background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 16px; }
.danger-zone { display: flex; flex-direction: column; gap: 10px; align-items: center; }

/* ===== Billing ===== */
.bill-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 720px) { .bill-grid { grid-template-columns: 1fr; } }
.bill-current { display: inline-block; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
    color: #09132d; background: var(--grad); padding: 3px 10px; border-radius: 999px; margin-bottom: 10px; }
.bill-note { text-align: center; margin-top: 22px; }
.bill-per { font-size: .9rem; font-weight: 500; color: var(--muted); }
.bill-current.bill-trialing { background: rgba(255,90,78,.12); color: var(--primary); }
.bill-current.bill-active { background: rgba(22,163,74,.14); color: var(--success); }
.bill-current.bill-past_due { background: rgba(224,137,11,.16); color: var(--warning); }
.bill-current.bill-canceled, .bill-current.bill-none { background: var(--surface-2); color: var(--muted); }
.bill-facts { list-style: none; margin: 14px 0; display: grid; gap: 8px; font-size: .9rem; color: var(--muted); }
.bill-facts li { display: flex; align-items: center; gap: 9px; }
.bill-facts i { color: var(--primary); }
.bill-paywall { text-align: center; padding: 30px; margin-bottom: 18px;
    border-color: rgba(255,90,78,.3); background: radial-gradient(500px 180px at 50% 0%, rgba(255,90,78,.08), transparent 65%), var(--surface); }
.bill-paywall-ic { font-size: 1.8rem; color: var(--primary); }
.bill-paywall h2 { font-family: var(--display); margin: 8px 0 6px; }

/* ===== Workload by department ===== */
.wl-dept-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.wl-dept { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.wl-dept-n { display: block; font-family: var(--display); font-weight: 800; font-size: 1.7rem; line-height: 1; }
.wl-dept-l { font-size: .82rem; color: var(--muted); }
.wl-dept-bar { display: block; height: 5px; background: rgba(9, 19, 45, .07); border-radius: 999px; overflow: hidden; margin-top: 10px; }
.wl-dept-bar span { display: block; height: 100%; background: var(--grad); border-radius: 999px; }

/* ============================================================
   Today resource board
   ============================================================ */
.emg { position: relative; }
.emg > summary { list-style: none; cursor: pointer; }
.emg > summary::-webkit-details-marker { display: none; }
.emg-form { position: absolute; right: 0; top: 52px; z-index: 30; width: 340px; max-width: 92vw;
    display: flex; flex-direction: column; gap: 10px; padding: 16px; }

.rb-filter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px; }
.rb-filter-label { font-size: .8rem; font-weight: 600; color: var(--muted); }
.rb-fbtn { font: inherit; font-size: .84rem; font-weight: 600; padding: 6px 13px; border-radius: 999px; cursor: pointer;
    background: var(--surface); border: 1px solid var(--line-2); color: var(--muted); transition: .12s; }
.rb-fbtn:hover { color: var(--ink); border-color: var(--ink); }
.rb-fbtn.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.resource-board { display: flex; gap: 14px; overflow-x: auto; padding: 6px 2px 18px; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; overscroll-behavior-x: contain; }
.resource-board.rb-grabbing { cursor: grabbing; user-select: none; }
.rb-lane.rb-hidden { display: none; }

/* Hide completed to-dos by default; reveal when "Show completed" is on */
#todos:not(.show-done) .todo-item.done { display: none; }
/* Keep a just-completed task visible (crossed off) until the next reload, so
   you see it check off in place instead of vanishing — even with "show done" off. */
#todos:not(.show-done) .todo-item.done.just-done { display: flex; opacity: .6; }

/* Lightweight transient notice (used by inline to-do toggling). */
.mini-toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 12px); z-index: 200;
    background: var(--ink); color: #fff; font-size: .86rem; font-weight: 500; padding: 10px 16px; border-radius: 10px;
    box-shadow: 0 8px 26px rgba(9,19,45,.22); opacity: 0; transition: opacity .2s ease, transform .2s ease; pointer-events: none; max-width: 90vw; }
.mini-toast.show { opacity: 1; transform: translate(-50%, 0); }
.show-done-toggle { display: inline-flex; align-items: center; gap: 9px; font-size: .85rem; font-weight: 600;
    color: var(--ink); white-space: nowrap; cursor: pointer; padding: 5px 12px 5px 8px;
    border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); transition: border-color .12s; }
.show-done-toggle:hover { border-color: var(--ink); }
.show-done-toggle input { appearance: none; -webkit-appearance: none; position: relative; flex: 0 0 auto;
    width: 38px; height: 22px; border-radius: 999px; background: var(--line-2); cursor: pointer; margin: 0; transition: background .15s; }
.show-done-toggle input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(9,19,45,.3); transition: transform .15s; }
.show-done-toggle input:checked { background: var(--teal); }
.show-done-toggle input:checked::after { transform: translateX(16px); }
.show-done-toggle:has(input:checked) { border-color: var(--teal); color: var(--teal); }

/* Sticky quick-add to-do helper */
.todo-quickadd { position: sticky; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 30; margin-top: 18px; }
.todo-quickadd-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; padding: 10px 12px;
    box-shadow: 0 12px 34px rgba(8,19,32,.16); }
.todo-quickadd-form .qa-plus { font-size: 1.2rem; color: var(--primary); font-weight: 700; line-height: 1; }
.todo-quickadd-form input[type=text] { flex: 1; min-width: 180px; width: auto; }
.todo-quickadd-form select { width: auto; font-size: .85rem; padding: 8px 10px; }
.todo-quickadd-form .qa-notes { flex: 1 0 100%; min-width: 0; font-size: .85rem; color: var(--ink); }
@media (max-width: 560px) {
    /* 3 compact rows instead of pushing the selects/notes off-screen:
       [content + Add] · [list + assignee] · [notes]. */
    .todo-quickadd-form { gap: 6px; }
    .todo-quickadd-form .qa-plus { display: none; }
    .todo-quickadd-form input[name="content"] { flex: 1 1 auto; min-width: 0; order: 1; }
    .todo-quickadd-form .btn { order: 2; flex: 0 0 auto; }
    .todo-quickadd-form select { flex: 1 1 45%; width: auto; min-width: 0; max-width: 100%; order: 3; }
    .todo-quickadd-form .qa-notes { flex: 1 1 100%; order: 4; }
}
.rb-lane { flex: 0 0 260px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    display: flex; flex-direction: column; min-height: 180px; transition: border-color .12s, background .12s; }
.rb-lane.rb-over { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 6%, var(--surface)); }
.rb-lane--pool { flex-basis: 230px; background: var(--bg-2); }
.rb-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px;
    border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; }
.rb-who { display: flex; align-items: center; gap: 10px; }
.rb-who strong { display: block; font-size: .9rem; }
.rb-pool-ic { font-size: 1.2rem; }
.rb-count { font-family: var(--display); font-weight: 800; font-size: 1rem; min-width: 26px; height: 26px;
    display: grid; place-items: center; border-radius: 8px; background: rgba(9, 19, 45, .06); }
/* load tint on the header */
.load-free  { background: rgba(74,222,128,.10); }   .load-free .rb-count  { background: rgba(74,222,128,.2); color: var(--success); }
.load-light { background: rgba(255, 90, 78,.08); }
.load-busy  { background: rgba(250,204,21,.10); }   .load-busy .rb-count  { background: rgba(250,204,21,.2); color: var(--warning); }
.load-over  { background: rgba(248,113,113,.12); }  .load-over .rb-count  { background: rgba(248,113,113,.25); color: var(--danger); }

.rb-cards { padding: 10px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.rb-card { display: block; background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--accent);
    border-radius: 10px; padding: 10px 12px; cursor: grab; color: var(--ink); }
.rb-card:hover { border-color: var(--line-2); text-decoration: none; transform: translateY(-1px); }
.rb-card.rb-dragging { opacity: .4; }
.rb-card-top { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.rb-card-text { display: block; font-size: .9rem; font-weight: 500; line-height: 1.35; }
.rb-card-proj { display: block; font-size: .72rem; color: var(--muted); margin-top: 5px; }
.rb-due { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
    background: rgba(9, 19, 45, .06); padding: 1px 7px; border-radius: 999px; }
.rb-due.overdue { color: var(--danger); background: rgba(248,113,113,.16); }
.rb-empty { font-size: .8rem; color: var(--muted); text-align: center; padding: 18px 8px; border: 1px dashed var(--line); border-radius: 10px; }

/* ===== In-app month calendar ===== */
.cal-month { padding: 18px; margin-bottom: 22px; }
.cal-month-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cal-month-head h2 { font-size: 1.3rem; min-width: 180px; }
.cal-today-btn { margin-left: auto; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-dow { margin-bottom: 6px; }
.cal-dow span { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); text-align: center; padding: 4px 0; }
.cal-cell { min-height: 96px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.cal-cell--blank { background: transparent; border-color: transparent; }
.cal-cell--today { border-color: rgba(255, 90, 78,.5); box-shadow: inset 0 0 0 1px rgba(255, 90, 78,.3); }
.cal-daynum { font-size: .78rem; font-weight: 700; color: var(--muted); }
.cal-cell--today .cal-daynum { color: var(--teal); }
.cal-item { display: block; font-size: .7rem; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    border-left: 3px solid var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); padding: 2px 6px; border-radius: 5px; }
.cal-item:hover { text-decoration: none; background: color-mix(in srgb, var(--c) 22%, transparent); }
.cal-more { font-size: .66rem; color: var(--muted); padding-left: 4px; }
@media (max-width: 640px) { .cal-cell { min-height: 64px; } .cal-item { font-size: 0; padding: 4px; } .cal-item::first-letter { font-size: .8rem; } }

/* ===== Labels / tags ===== */
.label-chip { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 600;
    color: var(--lc); background: color-mix(in srgb, var(--lc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--lc) 35%, transparent);
    padding: 2px 9px; border-radius: 999px; }
.label-chip.sm { font-size: .68rem; padding: 1px 8px; margin-left: 4px; }
.label-x { background: none; border: none; color: inherit; cursor: pointer; font-size: .9rem; line-height: 1; padding: 0; opacity: .6; }
.label-x:hover { opacity: 1; }
.label-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.label-add { position: relative; }
.label-add-btn { cursor: pointer; font-size: .8rem; font-weight: 600; color: var(--muted); border: 1px dashed var(--line-2); padding: 3px 11px; border-radius: 999px; list-style: none; }
.label-add-btn::-webkit-details-marker { display: none; }
.label-pop { position: absolute; left: 0; top: 30px; z-index: 30; width: 240px; background: var(--surface-2); border: 1px solid var(--line-2);
    border-radius: 12px; box-shadow: var(--shadow-lg); padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.label-pick button { width: 100%; text-align: left; border: 1px solid color-mix(in srgb, var(--lc) 35%, transparent); background: color-mix(in srgb, var(--lc) 14%, transparent);
    color: var(--lc); font: inherit; font-size: .82rem; font-weight: 600; padding: 5px 10px; border-radius: 7px; cursor: pointer; }
.label-new { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; display: flex; flex-direction: column; gap: 8px; }
.label-colors { display: flex; gap: 6px; }
.label-colors label { width: 20px; height: 20px; border-radius: 50%; position: relative; cursor: pointer; box-shadow: inset 0 0 0 2px rgba(9, 19, 45, .2); }
.label-colors input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.label-colors label:has(input:checked) { box-shadow: 0 0 0 2px var(--ink); }

/* ===== Reactions (boosts) ===== */
.reactions { display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.rx-form { display: inline; }
.rx-chip { display: inline-flex; align-items: center; gap: 4px; font-size: .82rem; cursor: pointer;
    background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; color: var(--ink); }
.rx-chip.mine { background: rgba(255, 90, 78,.14); border-color: rgba(255, 90, 78,.4); }
.rx-chip span { font-weight: 700; font-size: .75rem; }
.rx-add { position: relative; }
.rx-add-btn { cursor: pointer; list-style: none; font-size: .9rem; opacity: .45; padding: 2px 6px; border-radius: 999px; }
.rx-add-btn::-webkit-details-marker { display: none; }
.rx-add-btn:hover { opacity: 1; background: var(--bg-2); }
.rx-pop { position: absolute; left: 0; top: 28px; z-index: 30; display: grid; grid-template-columns: repeat(8, 34px);
    gap: 3px; padding: 8px; width: max-content; max-width: 92vw;
    background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: var(--shadow-lg); }
/* Own (right-aligned) comment bubbles: open the picker toward the left so it doesn't clip. */
.chat-msg--own .rx-pop { left: auto; right: 0; }
.rx-opt { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer; font-size: 1.2rem; padding: 0; border-radius: 8px; line-height: 1; }
.rx-opt:hover { background: rgba(9, 19, 45, .08); }

/* FontAwesome Pro duotone reaction icons — coloured per reaction. */
.rx-ico { font-size: 1rem; --fa-secondary-opacity: .42; }
.rx-opt .rx-ico { font-size: 1.18rem; }
.rx-add-btn .rx-ico { font-size: 1rem; }
.rx-opt:hover .rx-ico { transform: scale(1.18); transition: transform .12s; }

/* ---- Custom mascot reaction emojis (PNG) + neumorphic picker ---- */
.rx-img { width: 30px; height: 30px; display: block; object-fit: contain; -webkit-user-drag: none; }
.rx-chip .rx-img { width: 26px; height: 26px; }
.rx-chip { padding: 3px 11px; }
/* Bigger, softer picker with a squishy neumorphic press. */
.rx-pop { grid-template-columns: repeat(5, 60px); gap: 11px; padding: 16px; border-radius: 24px; }
.rx-opt { width: 60px; height: 60px; border-radius: 17px; background: var(--surface-2);
    box-shadow: 4px 4px 9px rgba(9,19,45,.10), -4px -4px 9px rgba(255,255,255,.75);
    transition: box-shadow .14s ease, transform .1s ease; }
.rx-opt .rx-img { width: 40px; height: 40px; }
.rx-opt:hover { background: var(--surface-2); transform: translateY(-2px);
    box-shadow: 6px 6px 13px rgba(9,19,45,.14), -6px -6px 13px rgba(255,255,255,.85); }
.rx-opt:hover .rx-img { transform: scale(1.08); transition: transform .12s; }
.rx-opt:active { transform: translateY(0) scale(.96);
    box-shadow: inset 4px 4px 8px rgba(9,19,45,.16), inset -4px -4px 8px rgba(255,255,255,.55); }
/* Reaction count chips: a soft pressed look when it's your reaction. */
.rx-chip { transition: box-shadow .12s, transform .08s; }
.rx-chip.mine { box-shadow: inset 2px 2px 4px rgba(255,90,78,.22), inset -2px -2px 4px rgba(255,255,255,.5); }
.rx-chip:active { transform: scale(.95); }
@media (prefers-color-scheme: dark) {
    .rx-opt { box-shadow: 4px 4px 9px rgba(0,0,0,.5), -4px -4px 9px rgba(255,255,255,.045); }
    .rx-opt:hover { box-shadow: 6px 6px 13px rgba(0,0,0,.6), -6px -6px 13px rgba(255,255,255,.06); }
    .rx-opt:active { box-shadow: inset 4px 4px 8px rgba(0,0,0,.55), inset -4px -4px 8px rgba(255,255,255,.045); }
}
:root[data-theme="dark"] .rx-opt { box-shadow: 4px 4px 9px rgba(0,0,0,.5), -4px -4px 9px rgba(255,255,255,.045); }
:root[data-theme="dark"] .rx-opt:hover { box-shadow: 6px 6px 13px rgba(0,0,0,.6), -6px -6px 13px rgba(255,255,255,.06); }
:root[data-theme="dark"] .rx-opt:active { box-shadow: inset 4px 4px 8px rgba(0,0,0,.55), inset -4px -4px 8px rgba(255,255,255,.045); }
:root[data-theme="light"] .rx-opt { box-shadow: 4px 4px 9px rgba(9,19,45,.10), -4px -4px 9px rgba(255,255,255,.75); }
.rx-ico--thumbs-up      { --fa-primary-color: #1f6feb; --fa-secondary-color: #1f6feb; }
.rx-ico--heart          { --fa-primary-color: #e8345a; --fa-secondary-color: #e8345a; }
.rx-ico--party-horn     { --fa-primary-color: #9c36b5; --fa-secondary-color: #faca2c; }
.rx-ico--face-laugh     { --fa-primary-color: #f0a500; --fa-secondary-color: #f0a500; }
.rx-ico--hands-clapping { --fa-primary-color: #e8590c; --fa-secondary-color: #faca2c; }
.rx-ico--eyes           { --fa-primary-color: #0c8599; --fa-secondary-color: #0c8599; }
.rx-ico--fire           { --fa-primary-color: #e8590c; --fa-secondary-color: #faca2c; }
.rx-ico--rocket-launch  { --fa-primary-color: #1f6feb; --fa-secondary-color: #e8590c; }
.rx-ico--lightbulb-on   { --fa-primary-color: #f0a500; --fa-secondary-color: #faca2c; }
.rx-ico--circle-check   { --fa-primary-color: #2f9e44; --fa-secondary-color: #2f9e44; }
.rx-ico--star           { --fa-primary-color: #f0a500; --fa-secondary-color: #f0a500; }
.rx-ico--handshake      { --fa-primary-color: #5f3dc4; --fa-secondary-color: #5f3dc4; }

/* ===== Bookmarks ===== */
.task-toolbar, .msg-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.bm-toggle { display: inline; }
.bm-star { background: none; border: none; cursor: pointer; font-size: 1.4rem; line-height: 1; color: var(--muted); padding: 0; }
.bm-star.on { color: #facc15; }
.bm-star:hover { color: #facc15; }
.bm-list { padding: 6px 18px; }
.bm-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.bm-row:last-child { border-bottom: none; }
.bm-main { display: flex; align-items: center; gap: 12px; color: var(--ink); font-weight: 500; }
.bm-type { font-size: 1.1rem; }

/* ===== Custom fields ===== */
.cf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 14px; }
.cf-field { display: flex; flex-direction: column; gap: 6px; }
.cf-manage { width: 100%; max-width: 520px; text-align: left; }
.cf-manage > summary { cursor: pointer; }
.cf-manage-body { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.cf-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--line); }
.cf-add-form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.cf-add-form input[type=text] { flex: 1; min-width: 130px; }

/* ===== Project Overview (account pulse) ===== */
.ov-grid { display: grid; grid-template-columns: 1fr 320px; gap: 18px; align-items: start; }
@media (max-width: 900px) { .ov-grid { grid-template-columns: 1fr; } }
/* min-width:0 is load-bearing: a grid item defaults to min-width:auto, so it
   refuses to shrink below its widest child's min-content width. One stat strip
   inside .ov-main measured 428px, which pushed the whole project page 54px wide
   on a 390px phone — a horizontal scrollbar on the most-visited page. */
.ov-main, .ov-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ov-status { padding: 18px 20px; }
.ov-status-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ov-status-note { font-size: 1.02rem; line-height: 1.55; }
.ov-status-form { margin-top: 12px; }
.ov-status-form > summary { list-style: none; cursor: pointer; display: inline-block; }
.ov-status-form > summary::-webkit-details-marker { display: none; }
.ov-status-form form { margin-top: 12px; }
.ov-state-pick { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.ov-state-pick label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

.ov-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 560px) { .ov-stats { grid-template-columns: 1fr 1fr; } }
.ov-stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.ov-stat-n { display: block; font-family: var(--display); font-weight: 800; font-size: 1.8rem; line-height: 1; }
.ov-stat-l { font-size: .78rem; color: var(--muted); }
.ov-stat .progress { margin-top: 10px; }
.ov-bad .ov-stat-n { color: var(--danger); } .ov-warn .ov-stat-n { color: var(--warning); }

.ov-block { padding: 16px 18px; }
/* Content Writer pieces on the project overview */
.ov-cw-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ov-cw-head h3 { margin: 0; }
.ov-cw-list { list-style: none; margin: 10px 0 0; padding: 0; }
.ov-cw-list li { border-top: 1px solid var(--line); }
.ov-cw-list li:first-child { border-top: 0; }
.ov-cw-list a { display: flex; flex-direction: column; gap: 1px; padding: 8px 0; text-decoration: none; color: var(--ink); }
.ov-cw-list a:hover .ov-cw-title { text-decoration: underline; color: var(--primary); }
.ov-cw-title { font-weight: 600; font-size: .9rem; line-height: 1.25; }
/* Wider layout in the main column: title left, meta right */
.ov-cw-list--main a { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 14px; padding: 10px 0; }
.ov-cw-list--main .ov-cw-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-cw-list--main .ov-cw-meta { flex: 0 0 auto; white-space: nowrap; }
/* Client-facing content preview */
.cw-preview { max-width: 760px; margin: 0 auto; }
.cw-preview-eyebrow { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--brand, var(--muted)); }
.cw-preview-h1 { font-size: 1.9rem; margin: 4px 0 18px; }
.cw-preview-body { line-height: 1.65; }
.cw-approve-bar { padding: 12px 16px; border-radius: 10px; margin: 0 0 18px; font-weight: 600; }
.cw-approve-ok { background: rgba(47,158,68,.1); color: #2f9e44; }
.cw-approve-changes { background: rgba(217,119,6,.1); color: #b45309; }
.cw-approve-actions { margin-top: 28px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.cw-approve-actions h3 { margin: 0 0 12px; }
.cw-changes { margin-top: 12px; }
.cw-changes summary { cursor: pointer; color: var(--muted); font-size: .9rem; }
/* Auto-blog topic queue */
.ab-topics { list-style: none; margin: 12px 0 0; padding: 0; }
.ab-topic { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.ab-topic:first-child { border-top: 0; }
.ab-topic-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ab-topic-t { font-weight: 600; font-size: .88rem; line-height: 1.25; }
.ab-topic.ab-used { opacity: .8; }
.ab-topic-now { display: inline-flex; gap: 12px; margin-top: 3px; }
.ab-topic-now .link-btn { font-size: .8rem; opacity: 0; transition: opacity .12s; }
.ab-topic:hover .ab-topic-now .link-btn, .ab-topic-now form[data-busy] .link-btn { opacity: 1; }
.ab-gennow { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 6px; }
.ab-gennow-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.ab-gennow-row .field span { margin-bottom: 3px; }
.ab-gennow-row select { min-width: 110px; }
.ab-wp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.ab-wp-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.ab-clients { display: grid; gap: 8px; margin-top: 12px; }
.ab-client { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--surface, #fff); transition: border-color .12s, transform .12s; }
.ab-client:hover { text-decoration: none; border-color: var(--brand, #ff5a4d); transform: translateY(-1px); }
.ab-client-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ab-client-name { font-weight: 650; }
.ab-client-meta { display: block; }
.ab-client-go { color: var(--muted); flex: 0 0 auto; }
.op-recent-list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 0; border-top: 1px solid var(--line); }
.op-recent-list li:first-child { border-top: 0; }
.op-recent-name { flex: 1 1 220px; min-width: 0; }
.op-recent-status select { padding: 4px 8px; border: 1px solid var(--line); border-radius: 7px; font-size: .82rem; }

/* Time-saved dashboard */
.ts-hero { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 26px 24px; }
.ts-hero-num { display: flex; flex-direction: column; }
.ts-big { font-size: clamp(2.2rem, 6vw, 3.2rem); font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.ts-unit { color: var(--muted); font-size: .9rem; margin-top: 6px; }
.ts-hero-x { font-size: 1.6rem; color: var(--muted); }
.ts-rate { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.ts-rate input { padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; }
.ts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
@media (max-width: 760px) { .ts-grid { grid-template-columns: 1fr; } .ts-rate { margin-left: 0; } }

/* Content score card */
.cw-score-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cw-score-ring { --v: 0; --c: #2f9e44; width: 92px; height: 92px; border-radius: 50%; flex: 0 0 auto;
    background: conic-gradient(var(--c) calc(var(--v) * 1%), var(--line) 0); display: grid; place-items: center; }
.cw-score-num { width: 70px; height: 70px; border-radius: 50%; background: var(--surface, #fff); display: grid; place-items: center; text-align: center; line-height: 1; }
.cw-score-num span { font-size: 1.5rem; font-weight: 800; }
.cw-score-num small { display: block; font-size: .6rem; color: var(--muted); margin-top: 2px; }
.cw-score-lead { flex: 1 1 240px; min-width: 0; }
.cw-grade { color: #fff; font-size: .78rem; font-weight: 800; padding: 1px 8px; border-radius: 6px; vertical-align: middle; margin-left: 4px; }
.cw-score-bars { margin-top: 16px; display: grid; gap: 7px; }
.cw-score-bar { display: grid; grid-template-columns: 150px 1fr 48px; align-items: center; gap: 10px; font-size: .82rem; }
.cw-score-bl { color: var(--ink); }
.cw-score-track { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.cw-score-track i { display: block; height: 100%; border-radius: 999px; }
.cw-score-bv { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.cw-score-fix { margin-top: 14px; padding: 10px 12px; border-radius: 8px; background: rgba(217,119,6,.07); border-left: 3px solid #d97706; }
.cw-score-fix ul { margin: 6px 0 0; padding-left: 18px; }
.cw-terms { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.cw-term { font-size: .78rem; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); }
.cw-term b { font-weight: 700; opacity: .7; margin-left: 2px; }
.cw-term--on { background: rgba(47,158,68,.1); border-color: rgba(47,158,68,.35); color: #1a7f3c; }
.cw-term--off { background: rgba(192,57,43,.06); border-color: rgba(192,57,43,.28); color: #a5342a; }
@media (max-width: 560px) { .cw-score-bar { grid-template-columns: 110px 1fr 42px; } }

/* Sign-in activity / multiple-IP flag */
.signin-flag { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 800; letter-spacing: .02em; padding: 3px 9px; border-radius: 999px; color: #92600a; background: rgba(217, 119, 6, .14); border: 1px solid rgba(217, 119, 6, .35); white-space: nowrap; }
.signin-flag--sm { margin: 6px 0 0; text-decoration: none; }
.signin-flag--sm:hover { background: rgba(217, 119, 6, .22); text-decoration: none; }
.signin-stats { display: flex; gap: 16px; flex-wrap: wrap; margin: 12px 0 0; font-size: .9rem; }
.signin-note { margin: 10px 0 0; padding: 9px 12px; border-radius: 8px; background: rgba(217, 119, 6, .08); border-left: 3px solid #d97706; }
.signin-tablewrap { margin-top: 12px; overflow-x: auto; }
.signin-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.signin-table th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 800; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.signin-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.signin-table tr:last-child td { border-bottom: 0; }
.signin-dev { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; margin-right: 6px; }
.signin-ip { font-size: .82rem; background: var(--surface-2, rgba(127,127,127,.1)); padding: 2px 7px; border-radius: 5px; }
.ov-block h3 { font-size: 1rem; margin-bottom: 12px; }
.ov-att { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.ov-att:last-child { border-bottom: none; }
.ov-att:hover { text-decoration: none; }
.ov-att-text { flex: 1; font-size: .9rem; }
.ov-att-why { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; }
.ov-why-blocked { color: var(--danger); background: rgba(248,113,113,.15); }
.ov-why-waiting { color: var(--warning); background: rgba(250,204,21,.13); }
.ov-why-overdue { color: #c2410c; background: rgba(194,65,12,.1); }
.ov-agenda { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: .88rem; color: var(--ink); border-bottom: 1px solid var(--line); }
.ov-agenda:last-child { border-bottom: none; }
.ov-agenda:hover { text-decoration: none; }
.ov-agenda-date { font-size: .72rem; font-weight: 700; color: var(--muted); min-width: 44px; }
.ov-who { display: flex; align-items: center; gap: 9px; padding: 6px 0; }
.ov-who-name { flex: 1; font-size: .9rem; }
.ov-who-n { font-size: .8rem; font-weight: 600; }
/* Expandable "N open" → per-person task table */
.ov-who-d > summary { list-style: none; cursor: pointer; border-radius: 8px; }
.ov-who-d > summary::-webkit-details-marker { display: none; }
.ov-who-d > summary:hover { background: var(--surface-2); }
.ov-who-link { display: inline-flex; align-items: center; gap: 4px; color: var(--primary); }
.ov-who-caret { font-size: .7rem; transition: transform .15s; }
.ov-who-d[open] .ov-who-caret { transform: rotate(180deg); }
.ov-who-tasks { padding: 2px 0 10px 33px; }
.ov-who-table { width: 100%; border-collapse: collapse; }
.ov-who-table td { padding: 5px 0; border-bottom: 1px solid var(--line); vertical-align: top; font-size: .82rem; }
.ov-who-table tr:last-child td { border-bottom: none; }
.ov-wt-task a { color: var(--ink); text-decoration: none; font-weight: 500; }
.ov-wt-task a:hover { color: var(--primary); text-decoration: underline; }
.ov-wt-list { display: block; font-size: .72rem; margin-top: 1px; }
.ov-wt-due { text-align: right; white-space: nowrap; padding-left: 10px !important; font-size: .76rem; }
.ov-wt-overdue { color: var(--danger); font-weight: 700; }
.ov-wt-check { width: 22px; padding-right: 8px !important; }
.ov-wt-done { width: 17px; height: 17px; border: 1.5px solid var(--line-2); border-radius: 50%; background: none;
    cursor: pointer; padding: 0; display: block; transition: background .12s, border-color .12s; }
.ov-wt-done:hover { border-color: #16a34a; background: rgba(22,163,74,.15); }
.ov-who-unassigned { background: var(--surface-2); color: var(--muted); font-weight: 700; }
.ov-block .activity-feed { margin: 0; }
.ov-block .activity-item { padding: 7px 0; }

/* ===== Accounts portfolio ===== */
.acct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.acct-card { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.acct-card:hover { text-decoration: none; transform: translateY(-2px); }
.acct-top { display: flex; align-items: center; gap: 12px; }
.acct-top .project-icon { width: 44px; height: 44px; margin: 0; font-size: 1.3rem; border-radius: 12px; }
.acct-titles strong { display: block; font-size: 1rem; }
.acct-note { font-size: .85rem; line-height: 1.45; }
.acct-prog { margin: 2px 0; }
.acct-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: .8rem; color: var(--muted); }
.acct-bad { color: var(--danger); font-weight: 600; } .acct-warn { color: var(--warning); font-weight: 600; }

/* ===== Message detail (redesigned) ===== */
.message-page { max-width: 1040px; margin: 0 auto; }
.msg-card { padding: 30px 34px; }
.msg-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.msg-card-actions { display: flex; align-items: center; gap: 14px; }
.msg-title { font-family: var(--display); font-weight: 800; font-size: clamp(1.7rem, 4vw, 2.5rem); letter-spacing: -0.03em; line-height: 1.12; margin-bottom: 18px; }
.msg-byline { display: flex; align-items: center; gap: 12px; padding-bottom: 20px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.msg-byline strong { display: block; }
.msg-notified { margin: -10px 0 20px; }
.msg-notified > summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
    font-size: .85rem; font-weight: 600; color: var(--muted); padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; }
.msg-notified > summary::-webkit-details-marker { display: none; }
.msg-notified > summary:hover { border-color: var(--line-2); color: var(--ink); }
.msg-notified-ic { color: var(--primary); }
.msg-notified-avs { display: inline-flex; margin-left: 4px; }
.msg-notified-avs .avatar { margin-left: -6px; border: 2px solid var(--surface); }
.msg-notified-list { list-style: none; margin: 12px 0 0; padding: 12px 0 0; display: grid; gap: 10px; border-top: 1px solid var(--line); }
.msg-notified-list li { display: flex; align-items: center; gap: 10px; }
.msg-notified-name { flex: 1 1 auto; font-size: .92rem; }
.msg-seen { font-size: .78rem; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.msg-seen.seen { color: #2f9e44; font-weight: 600; }
.msg-body { font-size: 1.06rem; line-height: 1.7; }
.msg-body p { margin: 0 0 1em; }
.msg-attach { margin-top: 22px; }
.msg-react { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.comments-title { font-size: 1.15rem; margin: 32px 0 16px; }
.comment.card { display: flex; gap: 14px; padding: 16px 18px; margin-bottom: 12px; }
.comment .comment-meta { margin-bottom: 4px; }
/* Comment meta: name · time · edit/delete on one line */
.comment-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.comment-meta .comment-actions { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; }
.comment-meta .comment-actions .inline { display: inline-flex; }

/* ===== Client contact ===== */
/* Title always sits on top (block); the Edit toggle pins to the top-right and
   the form flows full-width below, so nothing centres on the side. */
.ov-client-head { position: relative; display: block; }
.ov-client-head h3 { margin: 0; padding-right: 50px; }
.ov-client-edit > summary { position: absolute; top: 0; right: 0; list-style: none; cursor: pointer; font-size: .85rem; }
.ov-client-edit > summary::-webkit-details-marker { display: none; }
.ov-client-edit form { margin-top: 12px; }
.ov-contact { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; font-size: .92rem; border-bottom: 1px solid var(--line); }
.ov-contact:last-child { border-bottom: none; }
.ov-contact-l { flex: 0 0 20px; width: 20px; text-align: center; }
/* Long emails/links must wrap inside the card instead of overflowing it. */
.ov-contact > a, .ov-contact > span:not(.ov-contact-l) { min-width: 0; overflow-wrap: anywhere; }
.ov-client { padding-top: 16px; }
.project-client { display: block; font-size: .8rem; color: var(--accent); font-weight: 500; margin: 2px 0 4px; }

/* ============================================================
   Dashboard: richer project cards + timeline activity feed
   ============================================================ */
.project-card { display: flex; flex-direction: column; min-height: 0; }
.pc-desc { font-size: .9rem; min-height: 2.5em; }
.pc-progress { display: flex; align-items: center; gap: 10px; margin: 14px 0 12px; }
.pc-progress-bar { flex: 1; height: 7px; background: rgba(9, 19, 45, .07); border-radius: 999px; overflow: hidden; }
.pc-progress-bar span { display: block; height: 100%; background: var(--grad); border-radius: 999px; transition: width .3s; }
.pc-pct { font-size: .78rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
.pc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto;
    padding-top: 14px; border-top: 1px solid var(--line); }
.pc-avatars { display: flex; }
.pc-avatars .avatar { margin-right: -8px; box-shadow: 0 0 0 2px var(--surface); }
.pc-more { background: var(--bg-2) !important; color: var(--muted); font-size: .6rem; }
.pc-counts { display: flex; align-items: center; gap: 8px; font-size: .76rem; color: var(--muted); white-space: nowrap; }
.pc-overdue { color: var(--danger); font-weight: 700; }

/* Timeline activity feed */
.activity-feed { position: relative; margin-top: 6px; }
.activity-item { display: grid; grid-template-columns: 38px 1fr; gap: 14px; padding: 8px 0 14px; position: relative; color: var(--ink); align-items: start; }
.activity-item:not(:last-child)::before { content: ''; position: absolute; left: 18px; top: 44px; bottom: -2px; width: 2px; background: var(--line); }
.activity-item:hover { text-decoration: none; }
.activity-item:hover .activity-subject { color: var(--teal); }
.act-avatar { position: relative; z-index: 1; }
.act-badge { position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%;
    display: grid; place-items: center; color: #09132d; box-shadow: 0 0 0 2px var(--bg); }
.act-badge .icon { width: 11px; height: 11px; }
.act-badge--message { background: #ff5a4e; }
.act-badge--comment { background: #1f6feb; color: #fff; }
.act-badge--todo { background: #4ade80; }
.act-badge--doc { background: #9c36b5; color: #fff; }
.act-badge--event { background: #facc15; }
.activity-text p { font-size: .92rem; line-height: 1.4; }
.activity-subject { font-weight: 600; }
.activity-meta { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; color: var(--muted); margin-top: 3px; }
.act-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.activity-title { margin-top: 36px; }

/* Live activity: sticky footer button → slide-up panel (keeps grid full width) */
.db-live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--success); animation: pulse 1.8s infinite; flex: 0 0 auto; }
.feed-fab { position: fixed; right: 24px; bottom: 24px; z-index: 90; display: inline-flex; align-items: center; gap: 9px;
    background: var(--ink); color: #fff; border: none; border-radius: 999px; padding: 12px 20px; font: inherit;
    font-weight: 600; font-size: .9rem; cursor: pointer; box-shadow: 0 12px 30px rgba(8,19,32,.3); transition: transform .12s; }
.feed-fab:hover { transform: translateY(-2px); }
.feed-fab .db-live-dot { background: #4ade80; }
.feed-backdrop { position: fixed; inset: 0; background: rgba(8,19,32,.4); z-index: 95; }
.feed-panel { position: fixed; right: 20px; bottom: 20px; z-index: 96; width: 400px; max-width: calc(100vw - 40px);
    max-height: min(560px, 80vh); display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--line-2); border-radius: 18px;
    box-shadow: 0 30px 70px rgba(8,19,32,.4); transform: translateY(12px); opacity: 0;
    transition: transform .18s ease, opacity .18s ease; }
.feed-panel.open { transform: translateY(0); opacity: 1; }
.feed-panel[hidden], .feed-backdrop[hidden] { display: none !important; }
.feed-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 8px; }
.feed-panel-head .section-title { margin: 0; font-size: 1.1rem; }
.feed-panel-close { background: none; border: none; font-size: 1.5rem; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 4px; }
.feed-panel-close:hover { color: var(--ink); }
.feed-panel-body { overflow: auto; padding: 0 18px 16px; }
@media (max-width: 560px) { .feed-panel { right: 10px; left: 10px; width: auto; } .feed-fab { right: 14px; bottom: 14px; } }

/* ===== Grouped activity feed (Basecamp-style timeline) ===== */
.af { position: relative; }
.af-day { display: flex; align-items: center; gap: 14px; margin: 30px 0 14px; }
.af-day:first-child { margin-top: 8px; }
.af-day-label { background: var(--ink); color: #fff; font-size: .72rem; font-weight: 700;
    letter-spacing: .04em; padding: 6px 12px; border-radius: 8px; white-space: nowrap; }
.af-day-rule { flex: 1; height: 1px; background: var(--line); min-width: 12px; }
.af-active { font-size: .82rem; color: var(--muted); white-space: nowrap; }
.af-active-avatars { display: inline-flex; }
.af-active-avatars .avatar { margin-left: -6px; box-shadow: 0 0 0 2px var(--bg); }

.af-item { display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 4px 0 18px; position: relative; }
.af-item::before { content: ''; position: absolute; left: 75px; top: 24px; bottom: -4px; width: 2px; background: var(--line); }
.af-item:last-child::before { display: none; }
.af-time { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding-top: 2px; }
.af-check { width: 20px; height: 20px; border-radius: 50%; background: var(--success); color: #fff;
    display: grid; place-items: center; flex: 0 0 auto; box-shadow: 0 0 0 3px var(--bg); }
.af-check .icon { width: 12px; height: 12px; stroke-width: 3; }
.af-ago { font-size: .74rem; color: var(--muted); white-space: nowrap; }
.af-main { min-width: 0; position: relative; z-index: 1; }
.af-head { display: flex; align-items: flex-start; gap: 10px; }
.af-headline { font-size: .95rem; line-height: 1.45; color: var(--ink); margin: 1px 0; }
.af-headline strong { font-weight: 700; }
.af-subject { font-weight: 600; color: var(--teal); }
.af-subject:hover { text-decoration: underline; }
.af-proj { color: var(--muted); font-weight: 500; }
.af-thread { margin: 8px 0 0 34px; display: flex; flex-direction: column; gap: 7px;
    border-left: 2px solid var(--line); padding-left: 14px; }
.af-reply { display: flex; align-items: flex-start; gap: 8px; font-size: .9rem; line-height: 1.45; color: var(--muted); }
.af-reply strong { color: var(--ink); font-weight: 600; }
.af-reply-text { min-width: 0; }
.af-reply .avatar { flex: 0 0 auto; margin-top: 1px; }
.af-more-link { font-size: .82rem; color: var(--teal); font-weight: 600; margin-left: 30px; }
@media (max-width: 560px) {
    .af-item { grid-template-columns: 58px 1fr; }
    .af-item::before { left: 57px; }
    .af-day-label { font-size: .66rem; padding: 5px 9px; }
}

/* ============================================================
   Task detail — two-column (main + properties sidebar)
   ============================================================ */
.task-detail.task-grid { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 26px; align-items: start; max-width: 1240px; margin: 0 auto; }
@media (max-width: 860px) { .task-detail.task-grid { grid-template-columns: 1fr; } .task-col-side { order: -1; } }
.task-col-main { min-width: 0; display: flex; flex-direction: column; gap: 18px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 22px 24px; box-shadow: var(--shadow); }
/* Comments sit as recessed sub-cards inside the main card (avoid card-in-card). */
.task-col-main .comment.card, .task-col-main .comment-form.card { background: var(--surface-2); box-shadow: none; }

.task-titlebar { display: flex; align-items: flex-start; gap: 12px; }
.task-title-input { flex: 1; font-family: var(--display); font-weight: 800; font-size: clamp(1.4rem, 3vw, 2rem);
    letter-spacing: -0.02em; line-height: 1.2; border: 1px solid transparent; background: transparent; padding: 4px 8px; border-radius: 10px; }
.task-title-input:hover { border-color: var(--line); }
.task-title-input:focus { border-color: var(--line-2); background: var(--surface); }
.task-title-input.task-done { text-decoration: line-through; color: var(--muted); }
.task-titlebar .bm-toggle { margin-top: 6px; }
/* Title is read-only text until the pencil is clicked */
.task-title-wrap { flex: 1; display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.task-title-text { margin: 0; flex: 1; min-width: 0; font-family: var(--display); font-weight: 800;
    font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: -0.02em; line-height: 1.2; padding: 4px 8px;
    border: 1px solid transparent; border-radius: 10px; overflow-wrap: anywhere; }
.task-title-text.task-done { text-decoration: line-through; color: var(--muted); }
.task-title-pencil { flex: 0 0 auto; margin-top: 8px; background: none; border: none; cursor: pointer;
    color: var(--muted); font-size: .9rem; padding: 4px; border-radius: 8px; opacity: .55; transition: opacity .12s, color .12s, background .12s; }
.task-title-wrap:hover .task-title-pencil { opacity: 1; }
.task-title-pencil:hover { color: var(--teal); background: var(--surface-2); }
.task-title-wrap.is-editing .task-title-input { flex: 1; }
/* Time-tracking badge in the meta bar */
.task-time-badge { font-weight: 600; color: var(--teal); text-decoration: none;
    padding: 2px 9px; border-radius: 999px; background: rgba(20,184,166,.10); }
.task-time-badge i { color: var(--teal); }
.task-time-badge:hover { background: rgba(20,184,166,.18); }
.task-time-badge.is-zero { color: var(--muted); background: var(--surface-2); }
.task-time-badge.is-zero i { color: var(--muted); }
.task-time-badge.is-zero:hover { color: var(--teal); background: rgba(20,184,166,.12); }
/* Track-time sidebar card */
.task-track h3 { display: flex; align-items: center; gap: 7px; }
.tt-live { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 12px;
    background: rgba(20,184,166,.08); border: 1px solid rgba(20,184,166,.25); margin-bottom: 10px; }
.tt-live.is-paused { background: var(--surface-2); border-color: var(--line-2); }
.tt-clock { font-family: var(--display); font-weight: 800; font-size: 1.35rem; letter-spacing: -.01em; color: var(--ink); }
.tt-live .timer-pulse { flex: 0 0 auto; }
.tt-actions { display: flex; gap: 8px; }
.tt-actions form { flex: 1; }
.tt-actions .btn { width: 100%; }
.tt-start { display: flex; flex-direction: column; gap: 8px; }
.tt-start input[type=text], .tt-manual-form input[type=text] { width: 100%; font: inherit; padding: 8px 11px;
    border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg-2); color: var(--ink); }
.tt-elsewhere { margin: 0 0 10px; }
.tt-total { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tt-total-val { font-family: var(--display); font-size: 1.05rem; }
.tt-breakdown { margin-top: 10px; }
.tt-breakdown summary { cursor: pointer; font-size: .82rem; }
.tt-entry-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow: auto; }
.tt-entry { display: flex; align-items: center; gap: 8px; font-size: .82rem; padding: 4px 0; border-bottom: 1px solid var(--line); }
.tt-entry-when { flex: 0 0 46px; color: var(--muted); }
.tt-entry-who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-entry-src { font-size: .62rem; font-weight: 800; letter-spacing: .03em; color: var(--muted); background: var(--surface-2); border-radius: 4px; padding: 1px 4px; vertical-align: middle; }
.tt-entry-dur { flex: 0 0 auto; font-weight: 600; }
.tt-manual { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.tt-manual summary { cursor: pointer; }
.tt-manual-form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.tt-manual-row { display: flex; gap: 10px; }
.tt-manual-row label { display: inline-flex; align-items: center; gap: 5px; font-size: .85rem; color: var(--muted); }
.tt-manual-row input[type=number] { width: 64px; font: inherit; padding: 7px 9px; border: 1px solid var(--line-2);
    border-radius: 9px; background: var(--bg-2); color: var(--ink); }
/* Clickable complete toggle + quick-glance meta bar */
.task-check-form { flex: 0 0 auto; margin-top: 6px; }
.task-check { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--surface);
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: #fff; transition: background .12s, border-color .12s, transform .1s; }
.task-check:hover { border-color: var(--success); }
.task-check:active { transform: scale(.92); }
.task-check.done { background: var(--success); border-color: var(--success); }
.task-check i { font-size: .82rem; }
.task-metabar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin: 10px 0 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.task-meta-status { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 3px 11px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.task-meta-item { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; color: var(--ink); }
.task-meta-item.muted { color: var(--muted); }
.task-meta-item i { color: var(--muted); }
.task-meta-overdue, .task-meta-overdue i { color: var(--danger); font-weight: 600; }
.task-complete-form { margin-left: auto; }

/* Properties card */
/* Side cards flow naturally — they used to be sticky, but with several stacked
   cards (edit form, "Seen by", "Remind me") the sticky siblings overlapped on
   short/laptop viewports, hiding the blocked-reason box and Save button. */
.task-props { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.prop { display: flex; flex-direction: column; gap: 6px; }
.prop-l { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.prop select, .prop input { width: 100%; font-size: .9rem; padding: 8px 10px; }
.prop-static { font-size: .92rem; padding: 4px 0; }
.prop-actions { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; border-top: 1px solid var(--line); margin-top: 2px; }

.task-section { margin: 0; }
.task-col-main .task-section h3 { font-size: .95rem; margin-bottom: 10px; }
.task-col-main .comments-title { margin: 6px 0 14px; font-size: 1.1rem; }

/* Connector Tools card (project overview) */
.ov-tools h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 1rem; }
.ov-tools-list { display: flex; flex-direction: column; gap: 8px; }
.ov-tool { display: flex; align-items: center; gap: 12px; padding: 10px 11px; border: 1px solid transparent;
    border-radius: var(--radius-md); text-decoration: none; color: var(--ink); background: transparent;
    transition: background .12s, border-color .12s; }
.ov-tool:hover { background: var(--surface-2, rgba(0,0,0,.02)); border-color: var(--line); }
.ov-tool-ic { flex: 0 0 auto; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px;
    background: var(--surface-2, rgba(0,0,0,.04)); color: var(--muted); font-size: 1rem; }
.ic-onpage { background: rgba(59,130,246,.13); color: #3b82f6; }
.ic-link   { background: rgba(139,92,246,.14); color: #8b5cf6; }
.ic-conn   { background: rgba(16,185,129,.14); color: #10b981; }
.ic-trends { background: rgba(255,90,78,.13); color: #ff5a4e; }
.ic-audit  { background: rgba(255,90,78,.13); color: var(--primary); }
.ov-tool-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.ov-tool-txt strong { font-size: .9rem; }
.ov-tool-txt .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-tool-go { flex: 0 0 auto; color: var(--muted); font-size: .8rem; transition: transform .12s, color .12s; }
.ov-tool:hover .ov-tool-go { color: var(--primary); transform: translateX(3px); }
/* Featured SEO-audit block */
.ov-featured { border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2, rgba(0,0,0,.02)); padding: 12px; margin-top: 6px; }
.ov-featured-head { display: flex; align-items: center; gap: 12px; margin-bottom: 11px; }
.ov-featured-head .ov-tool-txt strong { font-size: .9rem; }
.ov-seg { display: flex; gap: 3px; padding: 3px; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; margin-bottom: 9px; }
.ov-seg label { flex: 1; position: relative; cursor: pointer; }
.ov-seg input { position: absolute; opacity: 0; width: 0; height: 0; }
.ov-seg span { display: block; text-align: center; font-size: .78rem; font-weight: 600; color: var(--muted); padding: 6px; border-radius: 6px; transition: .1s; }
.ov-seg input:checked + span { background: var(--primary); color: #fff; }
.ov-seg label:focus-within span { outline: 2px solid var(--primary); outline-offset: 1px; }
.ov-featured-run { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; /* flex-basis:100% details (Excludes, Sitemap URL) get their own full-width row */ }
.ov-excl input[type="url"] { width: 100%; margin: 6px 0 2px; font: inherit; font-size: .8rem; border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; }
.ov-run { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: var(--primary); color: #fff; border: 0; border-radius: 9px; padding: 9px; font: inherit; font-weight: 700; font-size: .82rem; cursor: pointer; }
.ov-run:hover { filter: brightness(1.06); }
.ov-js { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; color: var(--muted); border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; cursor: pointer; background: var(--surface); user-select: none; }
.ov-js input { margin: 0; }
.ov-sched { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--line); font-size: .76rem; color: var(--muted); }
.ov-sched select { font: inherit; font-size: .74rem; border: 1px solid var(--line); border-radius: 8px; padding: 5px 7px; background: var(--surface); color: var(--ink); }
.ov-lastaudit { margin-top: 9px; text-align: center; font-size: .74rem; color: var(--muted); }
.ov-lastaudit a { color: var(--primary); text-decoration: none; font-weight: 600; }

/* ============================================================
   Project cards v4 — one cohesive card with an inline header
   ============================================================ */
.project-grid .project-card {
    position: relative; padding: 0; overflow: hidden; border-radius: 16px;
    display: flex; flex-direction: column; min-height: 0; background: var(--surface);
    border: 1px solid var(--line); box-shadow: var(--shadow);
    transition: transform .14s ease, border-color .15s, box-shadow .15s;
}
.project-grid .project-card::before { content: ''; display: block; height: 4px; flex: 0 0 auto;
    background: linear-gradient(90deg, var(--accent, var(--primary)), color-mix(in srgb, var(--accent, var(--primary)) 45%, #faca2c)); }
.project-grid .project-card:hover { transform: translateY(-3px); border-color: rgba(9, 19, 45, .14); box-shadow: 0 16px 34px rgba(9,19,45,.13); }

.pc-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 84px 0 16px; }
.pc-head-icon { flex: 0 0 auto; }
.pc-head-icon .project-icon { width: 48px; height: 48px; border-radius: 13px; font-size: 1.5rem; margin: 0;
    box-shadow: inset 0 0 0 1px rgba(9, 19, 45, .08); }
.pc-head-icon .pi-fav { padding: 14%; }
.pc-head-text { min-width: 0; flex: 1; }
.pc-head-text h3 { font-size: 1.06rem; line-height: 1.25; margin: 0; letter-spacing: -.01em;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-domain { display: inline-flex; align-items: center; gap: 5px; font-size: .76rem; color: var(--muted); margin-top: 3px;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pc-body { padding: 12px 16px 16px; }
.pc-body h3 { font-size: 1.22rem; letter-spacing: -0.01em; }
.pc-desc { font-size: .9rem; min-height: 1.3em; margin-top: 2px; }

.pc-client { display: flex; flex-direction: column; gap: 5px; margin: 14px 0 4px; padding: 12px 14px;
    background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; }
.pc-client-row { display: flex; align-items: center; gap: 9px; font-size: .85rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-ci { width: 18px; text-align: center; flex: 0 0 auto; }

.project-grid .pc-progress { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px; }
.pc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }

/* Project-health pill on the card */
.pc-status { display: inline-flex; align-items: center; gap: 6px; margin: 7px 0 2px; font-size: .72rem;
    font-weight: 700; padding: 3px 9px 3px 8px; border-radius: 999px; line-height: 1.4; }
.pc-status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

/* Hierarchy: let name / status / progress lead; client + contact rows recede */
.project-grid .pc-client-row { font-size: .8rem; color: var(--muted); }
.project-grid .pc-pm-row { color: var(--ink); font-weight: 600; }


/* Project tags */
.pc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.pc-tag { font-size: .68rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
    color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px;
    padding: 3px 9px; cursor: pointer; transition: color .12s, border-color .12s; }
.pc-tag:hover { color: var(--teal); border-color: var(--teal); }
.proj-tags-chips { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.proj-tag { font-size: .68rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
    color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; }

/* Connector freshness chip */
.pc-meta { margin: 0 0 10px; }
.pc-sync { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 600; color: var(--muted); }
.pc-sync--stale, .pc-sync--off { color: var(--warning); }
/* …and on the project header */
.proj-sync { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; color: var(--muted); }
.proj-sync:hover { color: var(--ink); text-decoration: none; }
.proj-sync--warn { color: var(--warning); }
.proj-uptime { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 700; letter-spacing: .02em; }
.proj-uptime i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.proj-uptime--up { color: #2e9e5b; }
.proj-uptime--up i { background: #2e9e5b; box-shadow: 0 0 0 3px rgba(46, 158, 91, .15); }
.proj-uptime--down { color: #d23f3f; }
.proj-uptime--down i { background: #d23f3f; box-shadow: 0 0 0 3px rgba(210, 63, 63, .18); animation: uptime-pulse 1.4s ease-in-out infinite; }
@keyframes uptime-pulse { 50% { box-shadow: 0 0 0 6px rgba(210, 63, 63, .06); } }

/* My stuff: status + comment visibility on task rows */
.ms-status { flex: 0 0 auto; }
.ms-chip.ms-comments { color: var(--muted); }
.ms-row:hover .ms-chip.ms-comments { color: var(--ink); }

/* On-page batches: new-page vs existing split */
.op-newpage { display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .04em; padding: 1px 8px;
    border-radius: 999px; color: #7c3aed; background: rgba(124, 58, 237, .12); vertical-align: middle; }
.op-batch-stagger { white-space: nowrap; }

/* Platform admin: per-workspace billing controls */
.pa-bill { white-space: nowrap; }
.pa-bill-pop { display: inline-block; margin-left: 6px; }
.pa-bill-panel { display: grid; gap: 8px; padding: 12px; width: 230px; }
.pa-bill-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.pa-bill-form input[type="number"] { padding: 4px 7px; border: 1px solid var(--line); border-radius: 6px; font: inherit; background: var(--panel, #fff); color: var(--ink); }

/* Page Fit: dev handoff page */
.pfd-table td { vertical-align: top; }
.pfd-where { max-width: 220px; }
.pfd-copy { white-space: pre-wrap; max-width: 460px; }
.pfd-type { white-space: nowrap; font-size: .8rem; font-weight: 700; }

/* Page Fit: keyword strategy check */
.pf-kw-card { padding: 12px 14px; margin-bottom: 14px; }
.pf-attach-form { display: flex; gap: 8px; margin-bottom: 6px; }
.pf-attach-form input[type="text"] { flex: 1; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: .84rem; background: var(--panel, #fff); color: var(--ink); }
.pf-kw-verdict { font-size: .86rem; font-weight: 600; padding: 9px 12px; border-radius: 9px; margin-bottom: 8px;
    color: var(--muted); background: rgba(93, 103, 129, .08); }
.pf-kw-verdict.pf-kw-good { color: #166534; background: rgba(74, 222, 128, .15); }
.pf-kw-verdict.pf-kw-warn { color: #b45309; background: rgba(245, 158, 11, .14); }
.pf-kw-verdict.pf-kw-bad { color: #b91c1c; background: rgba(248, 113, 113, .16); }
.pf-kw-list { display: grid; gap: 3px; max-height: 220px; overflow-y: auto; }
.pf-kw-row { display: flex; justify-content: space-between; gap: 10px; font-size: .82rem; padding: 3px 8px; border-radius: 6px; }
.pf-kw-row em { font-style: normal; font-size: .68rem; font-weight: 800; color: var(--primary, #ff5a4e); }
.pf-kw-row.pf-kw-miss { color: var(--muted); }
.pf-kw-row.pf-kw-ok { background: rgba(74, 222, 128, .1); }
.pf-kw-row.pf-kw-over { background: rgba(245, 158, 11, .12); color: #b45309; }
.pf-kw-n { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Page Fit: annotated preview + slot editor */
.pf-preview-card { padding: 14px 16px; }
.pf-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.pf-legend { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--muted); }
.pf-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.pf-lg-g { background: rgba(220, 38, 38, .85); }
.pf-lg-s { background: rgba(37, 99, 235, .85); }
.pfs-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.pfs-chip { border: none; cursor: pointer; font: 700 .74rem/1.7 inherit; padding: 1px 9px; border-radius: 999px; color: #fff; }
.pfs-chip-g { background: #dc2626; }
.pfs-chip-s { background: #2563eb; }
.pfs-chip-c { background: #7c3aed; }
.pfs-chip-add { background: var(--panel, #fff); color: #7c3aed; border: 1px dashed #7c3aed; }
.pfs-chip-add.active { background: #7c3aed; color: #fff; border-style: solid; }
.pf-slot-x { border: none; background: none; color: var(--muted); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.pf-slot-x:hover { color: #d23f3f; }
.pfs-chip:hover { filter: brightness(1.12); }
.pf-frame-wrap { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.pf-frame { border: none; background: #fff; transform-origin: 0 0; display: block; }
.pf-devices { display: inline-flex; gap: 4px; }
.pf-device { border: 1px solid var(--line); background: var(--panel, #fff); color: var(--muted); font: 700 .76rem/1.6 inherit;
    padding: 3px 11px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.pf-device.active { border-color: var(--primary, #ff5a4e); color: var(--primary, #ff5a4e); }
.pf-brief-col { position: sticky; top: 74px; align-self: start; }
@media (max-width: 960px) { .pf-brief-col { position: static; } }
.pf-task-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.pf-task-form select { flex: 1 1 140px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: .85rem; background: var(--panel, #fff); color: var(--ink); }
.pf-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pf-editor { padding: 6px 16px 14px; }
.pf-slot { padding: 12px 0; border-bottom: 1px solid var(--line); }
.pf-slot:last-child { border-bottom: none; }
.pf-slot-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.pf-slot-l { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-slot-type { padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: .8rem; background: var(--panel, #fff); color: var(--ink); }
.pf-count { font-size: .78rem; font-weight: 800; font-variant-numeric: tabular-nums; padding: 2px 9px; border-radius: 999px; color: var(--muted); background: rgba(93, 103, 129, .1); }
.pf-count.pf-ok { color: #166534; background: rgba(74, 222, 128, .18); }
.pf-count.pf-near { color: #b45309; background: rgba(245, 158, 11, .16); }
.pf-count.pf-bad { color: #b91c1c; background: rgba(248, 113, 113, .18); }
.pf-slot-text { width: 100%; box-sizing: border-box; font: inherit; font-size: .88rem; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel, #fff); color: var(--ink); resize: vertical; }

/* Page Fit: layout-shaped word budgets */
.pf-form { display: flex; gap: 10px; padding: 14px 16px; margin-bottom: 16px; }
.pf-form input[type="url"] { flex: 1; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; font: inherit; background: var(--panel, #fff); color: var(--ink); }
.pf-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 960px) { .pf-grid { grid-template-columns: 1fr; } }
.pf-group { padding: 14px 16px; margin-bottom: 12px; }
.pf-group-uneven { border-left: 3px solid #b45309; }
.pf-group-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.pf-budget { font-size: .82rem; font-weight: 700; color: var(--primary, #ff5a4e); }
.pf-flag { font-size: .74rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; color: #b45309; background: rgba(245, 158, 11, .14); }
.pf-items { display: grid; gap: 6px; }
.pf-item { display: grid; grid-template-columns: 150px 1fr 44px; gap: 10px; align-items: center; font-size: .85rem; }
.pf-item-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-bar { height: 8px; border-radius: 999px; background: rgba(93, 103, 129, .12); overflow: hidden; }
.pf-bar i { display: block; height: 100%; background: var(--primary, #ff5a4e); border-radius: 999px; }
.pf-item-n { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.pf-sections { padding: 10px 16px; }
.pf-sec { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .88rem; }
.pf-sec:last-child { border-bottom: none; }
.pf-sec-l3 { padding-left: 18px; }
.pf-sec-h { flex: 0 0 auto; font-size: .72rem; font-weight: 800; color: var(--muted); }
.pf-sec-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-brief-card { padding: 12px; display: grid; gap: 10px; }
.pf-brief { width: 100%; box-sizing: border-box; font: 12px/1.5 ui-monospace, Menlo, Consolas, monospace; padding: 12px;
    border: 1px solid var(--line); border-radius: 10px; background: var(--panel, #fff); color: var(--ink); resize: vertical; }
.pf-brief-card .btn { justify-self: start; }

/* Audit trail */
.at-filter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.at-filter input[type="search"] { flex: 1 1 220px; max-width: 340px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; font: inherit; background: var(--panel, #fff); color: var(--ink); }
.at-filter select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; background: var(--panel, #fff); color: var(--ink); }
.at-when { white-space: nowrap; }
.at-who { white-space: nowrap; display: flex; align-items: center; gap: 7px; }
.at-action { font-size: .78rem; padding: 2px 7px; border-radius: 6px; background: rgba(93, 103, 129, .1); }
.at-what { max-width: 480px; }

/* Vault hygiene: password age + access trail */
.vault-age { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; margin-right: 8px;
    padding: 2px 9px; border-radius: 999px; font-size: .74rem; font-weight: 700; color: var(--muted); background: rgba(93, 103, 129, .1); }
.vault-age-old { color: #b45309; background: rgba(245, 158, 11, .14); }
.vault-lastview { margin: 6px 0 0; display: inline-flex; align-items: center; gap: 6px; }

/* Workload: blocked-clients summary table */
.wl-fbtn-blocked.active { border-color: #d23f3f; color: #d23f3f; }
.wl-blocked-sum { margin: 4px 0 18px; padding: 14px 18px; }
.wl-blocked-sum > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wl-blocked-sum > summary::-webkit-details-marker { display: none; }
.wl-bs-title { display: inline-flex; align-items: center; gap: 8px; }
.wl-blocked-sum[open] > summary { margin-bottom: 10px; }
.wl-blocked-sum[open] > summary .pls-chev { transform: rotate(180deg); }
.wl-bs-table td { vertical-align: top; }
.wl-bs-client { min-width: 140px; }
.wl-bs-client .muted { display: block; }
.wl-bs-phases { min-width: 140px; }
.wl-bs-phase { display: inline-flex; align-items: center; gap: 5px; margin: 0 6px 4px 0; padding: 2px 9px;
    border-radius: 999px; font-size: .78rem; background: rgba(248, 113, 113, .12); color: var(--danger, #d23f3f); }
.wl-bs-why { display: grid; gap: 4px; font-size: .85rem; }
.wl-bs-line a { color: var(--ink); font-weight: 600; text-decoration: none; }
.wl-bs-line a:hover { text-decoration: underline; }

/* Graphic studio: sibling pages inside one design */
.gfx-pages { display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin: 10px 0 0; overflow-x: auto; }
.gfx-pages-l { flex: 0 0 auto; margin-right: 2px; }
.gfx-page { flex: 0 0 auto; width: 52px; height: 52px; border: 2px solid var(--line); border-radius: 8px; overflow: hidden;
    display: grid; place-items: center; background: var(--panel, #fff); cursor: pointer; text-decoration: none; }
.gfx-page img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gfx-page.active { border-color: var(--primary, #ff5a4e); box-shadow: 0 0 0 3px rgba(255, 90, 78, .15); }
.gfx-page:hover { border-color: var(--primary, #ff5a4e); }
.gfx-page-n { font-weight: 800; color: var(--muted); }
.gfx-page-add { color: var(--muted); font-size: .95rem; border-style: dashed; }
.gfx-page-add:hover { color: var(--primary, #ff5a4e); }
.gfx-thumb { position: relative; }
.gfx-thumb-pages { position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 999px; background: rgba(9, 19, 45, .78); color: #fff; font-size: .75rem; font-weight: 700; }

/* Client hub: ask-us-anything widget */
.cs-chat { position: fixed; right: 18px; bottom: 18px; z-index: 60; font-size: .92rem; }
.cs-chat-fab { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border: none; border-radius: 999px;
    background: var(--primary, #ff5a4e); color: #fff; font-weight: 700; cursor: pointer; box-shadow: 0 6px 24px rgba(9, 19, 45, .25); }
.cs-chat-fab:hover { filter: brightness(1.05); }
.cs-chat-panel { position: fixed; right: 18px; bottom: 76px; width: min(360px, calc(100vw - 36px));
    background: var(--panel, #fff); border: 1px solid var(--line); border-radius: 14px;
    box-shadow: 0 16px 48px rgba(9, 19, 45, .28); display: flex; flex-direction: column; overflow: hidden; }
.cs-chat-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.cs-chat-x { background: none; border: none; font-size: 1.2rem; line-height: 1; cursor: pointer; color: var(--muted); }
.cs-chat-log { padding: 12px; max-height: 320px; overflow-y: auto; display: grid; gap: 8px; }
.cs-chat-msg { padding: 8px 12px; border-radius: 12px; max-width: 88%; white-space: pre-wrap; word-break: break-word; }
.cs-chat-msg--ai { background: rgba(9, 19, 45, .06); justify-self: start; border-bottom-left-radius: 4px; }
.cs-chat-msg--client { background: var(--primary, #ff5a4e); color: #fff; justify-self: end; border-bottom-right-radius: 4px; }
.cs-chat-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); }
.cs-chat-form input { flex: 1; border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px; font: inherit; background: var(--panel, #fff); color: var(--ink); }
.cs-chat-send { border: none; border-radius: 999px; width: 40px; background: var(--primary, #ff5a4e); color: #fff; cursor: pointer; }
@media print { .cs-chat { display: none; } }

/* Closed report: deal-level "clients sold" roster */
.pl-deals-card { margin-top: 14px; }
.pl-deals-wrap { overflow-x: auto; }
.pl-deals-table { min-width: 640px; }
.pl-deals-table thead th { text-align: left; font-size: .78rem; color: var(--muted); padding: 6px 10px; border-bottom: 1px solid var(--line); }
.pl-deals-table thead th.num, .pl-deals-table td.num { text-align: right; }
.pl-deals-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); }
.pl-deals-table tr:last-child td { border-bottom: none; }
.pl-deal-name { color: var(--ink); text-decoration: none; }
.pl-deal-name:hover { text-decoration: underline; }
.pl-deal-closer { white-space: nowrap; }
.pl-closer-edit { display: inline-block; position: relative; vertical-align: middle; margin-left: 4px; }
.pl-closer-edit > summary { list-style: none; cursor: pointer; color: var(--muted); opacity: 0; transition: opacity .12s; display: inline-flex; }
.pl-closer-edit > summary::-webkit-details-marker { display: none; }
.pl-deals-table tr:hover .pl-closer-edit > summary, .pl-closer-edit[open] > summary { opacity: 1; }
.pl-closer-edit > summary:hover { color: var(--ink); }
.pl-closer-panel { display: flex; gap: 8px; align-items: center; padding: 10px 12px; }
.pl-closer-form { display: flex; gap: 8px; align-items: center; margin: 0; }

/* Pipeline insights: stage funnel row */
.pi-funnel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 4px 0 18px; }
@media (max-width: 720px) { .pi-funnel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pi-stage { padding: 14px 16px; display: grid; gap: 2px; border-top: 3px solid var(--line); }
.pi-stage--lead { border-top-color: #7c8db5; }
.pi-stage--proposal { border-top-color: #f0a500; }
.pi-stage--won { border-top-color: #2e9e5b; }
.pi-stage--lost { border-top-color: #d23f3f; }
.pi-stage-n { font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.pi-stage-l { font-size: .82rem; font-weight: 600; color: var(--muted); }
.pi-stage-v { font-size: .82rem; color: var(--ink); }

/* New-project card matches the grid but stays a simple dashed CTA */
.project-card--new { display: grid !important; place-items: center; border-style: dashed; min-height: 230px; background: transparent; }
.project-card--new .pc-new-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 24px; }
.project-card--new .project-icon { margin: 0 0 6px; }
.project-card--new:hover { border-color: rgba(255, 90, 78,.4); }

/* Accounts cards reuse the v3 project-card look */
.pc-banner-status { position: absolute; top: 12px; right: 14px; backdrop-filter: blur(6px);
    box-shadow: 0 2px 10px rgba(4,9,16,.3); }
.acct-foot { flex-wrap: wrap; gap: 10px 14px; font-size: .76rem; color: var(--muted); }
.acct-foot .acct-warn { color: var(--warning); font-weight: 700; }

/* Template cards reuse the v3 card look */
.tpl-foot { border-top: 1px solid var(--line); }
.tpl-card .tpl-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }

/* Favicon in the command palette */
.cmdk-fav { width: 18px; height: 18px; border-radius: 4px; object-fit: contain; background: #fff; padding: 1px; flex: 0 0 auto; }

/* ===== View toggle + Accounts list view ===== */
.view-toggle { display: inline-flex; background: rgba(9, 19, 45, .04); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.vt-btn { border: none; background: transparent; font: inherit; font-size: .82rem; font-weight: 600; color: var(--muted);
    padding: 6px 14px; border-radius: 999px; cursor: pointer; }
.vt-btn.active { background: var(--ink); color: #fff; }

.acct-list { padding: 6px 8px; }
.acct-list-head, .acct-list-row { display: grid; grid-template-columns: 2fr 0.9fr 1fr 1.1fr 1.9fr; gap: 14px; align-items: center; }
.alr-data .acct-data { margin: 0; }
.alr-data .acct-metric { padding: 3px 8px; min-width: 0; }
.alr-data .acct-metric-v { font-size: .85rem; }
.alr-data .acct-data-cap { display: none; }
.acct-list-head { padding: 10px 14px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border-bottom: 1px solid var(--line); }
.acct-list-row { padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--ink); border-radius: 10px; }
.acct-list-row:last-child { border-bottom: none; }
.acct-list-row:hover { background: var(--bg-2); text-decoration: none; }
.alr-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.alr-name .project-icon { width: 38px; height: 38px; margin: 0; font-size: 1.1rem; border-radius: 10px; flex: 0 0 auto; }
.alr-titles { min-width: 0; }
.alr-titles strong { display: block; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alr-titles .small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alr-prog { display: flex; align-items: center; gap: 8px; }
.alr-prog .pc-progress-bar { flex: 1; height: 6px; background: rgba(9, 19, 45, .07); border-radius: 999px; overflow: hidden; }
.alr-prog .pc-progress-bar span { display: block; height: 100%; background: var(--grad); border-radius: 999px; }
.alr-flags { display: flex; flex-wrap: wrap; gap: 8px; font-size: .76rem; }
.alr-flags .acct-bad { color: var(--danger); font-weight: 700; } .alr-flags .acct-warn { color: var(--warning); font-weight: 700; }
.alr-next { font-size: .8rem; color: var(--muted); white-space: nowrap; }
@media (max-width: 760px) {
    .acct-list-head { display: none; }
    .acct-list-row { grid-template-columns: 1fr auto; gap: 8px; }
    .alr-prog, .alr-flags, .alr-next { grid-column: 1 / -1; }
}

/* ============================================================
   To-do board v2 — rows become clean task cards
   ============================================================ */
.todo-items { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.todo-item {
    border-bottom: none !important;
    padding: 11px 12px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 11px;
    transition: border-color .12s, transform .1s, box-shadow .12s;
}
.todo-item:hover { border-color: var(--line-2); box-shadow: 0 4px 14px rgba(4,9,16,.25); }
.todo-item.done { opacity: .62; background: transparent; }
.todo-item.done:hover { box-shadow: none; }

/* status accent (replaces the negative-margin hack) */
.todo-item.status-blocked,
.todo-item.status-in_review,
.todo-item.status-in_progress { margin-left: 0; padding-left: 12px; border-left-width: 3px; }
.todo-item.status-blocked { border-left-color: rgba(248,113,113,.7); }
.todo-item.status-in_review { border-left-color: rgba(250,204,21,.6); }
.todo-item.status-in_progress { border-left-color: rgba(255, 90, 78,.6); }

.todo-item:has(.bulk-check:checked) { background: rgba(255, 90, 78,.08); border-color: rgba(255, 90, 78,.45); }

/* nested subtasks: indented, lighter */
.subtask-items { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 6px 26px; position: relative; }
.subtask-items::before { content: ''; position: absolute; left: -12px; top: 4px; bottom: 4px; width: 2px; background: var(--line); border-radius: 2px; }
.todo-item.is-sub { padding: 8px 11px; background: var(--surface); }

/* chip-ify the inline metadata */
.todo-text { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; line-height: 1.3; }
.todo-text .due, .todo-text .do-date, .todo-text .subcount {
    font-size: .7rem; font-weight: 600; padding: 2px 8px; border-radius: 999px;
    background: rgba(9, 19, 45, .05); border: 1px solid var(--line); color: var(--muted); }
.todo-text .due.overdue { color: var(--danger); background: rgba(248,113,113,.13); border-color: rgba(248,113,113,.3); }
.todo-link { font-weight: 500; }

/* phase column polish */
.todo-list { border-radius: 16px; }
.todo-list-head h3 { letter-spacing: -0.01em; }
.add-todo { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }

/* ============================================================
   My Stuff — grouped, client-aware task cards
   ============================================================ */
.hero-tight { margin-bottom: 14px; }

/* Tabs */
.ms-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 6px; flex-wrap: wrap; }
.ms-tab { padding: 9px 14px; font-size: .9rem; font-weight: 600; color: var(--muted);
    border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 8px 8px 0 0; }
.ms-tab:hover { color: var(--ink); background: rgba(9,19,45,.03); text-decoration: none; }
.ms-tab.active { color: var(--ink); border-bottom-color: var(--primary); }

/* Up Next */
.upnext { background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px;
    padding: 22px 22px 18px; margin: 16px 0 26px; text-align: center; position: relative; }
.upnext-tag { display: inline-block; background: #6b5a45; color: #fff; font-size: .68rem; font-weight: 800;
    letter-spacing: .08em; padding: 5px 14px; border-radius: 0 0 9px 9px; position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
.upnext-hint { color: var(--muted); font-size: .92rem; line-height: 1.6; margin-top: 8px; }
.upnext .ms-rows { text-align: left; max-width: 760px; margin: 6px auto 0; }
.upnext:not(.has-items) .ms-rows { display: none; }
.upnext.has-items .upnext-hint { display: none; }

/* Grouped assignment list */
.ms-list { margin-top: 6px; }
.ms-project { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 16px 18px 6px; margin-bottom: 16px; box-shadow: var(--shadow); }
.ms-project-h { display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 800;
    letter-spacing: .05em; color: var(--ink); margin-bottom: 4px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.ms-project-h a { color: var(--ink); }
.ms-project-h a:hover { color: var(--teal); text-decoration: none; }
.ms-pdot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.ms-pfav { width: 16px; height: 16px; border-radius: 4px; flex: 0 0 auto; object-fit: cover; }
.ms-pclient { color: var(--muted); font-weight: 600; }
.ms-listgroup { margin: 4px 0 0; }
.ms-list-h { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 14px 0 2px; }
.ms-bucket-h-over { color: var(--danger); }
.ms-bucket-h-today { color: var(--teal); }
.ms-bucket-count { font-size: .7rem; font-weight: 700; background: rgba(9,19,45,.06); color: var(--muted); padding: 1px 8px; border-radius: 999px; margin-left: 6px; }

/* Workload filters + drill-down */
.wl-deptfilter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.wl-deptfilter-l { font-size: .8rem; font-weight: 700; color: var(--muted); margin-right: 2px; }
.wl-dchip { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; font-size: .82rem;
    font-weight: 600; color: var(--muted); border: 1px solid var(--line); background: var(--surface); }
.wl-dchip:hover { color: var(--ink); border-color: var(--ink); text-decoration: none; }
.wl-dchip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.wl-filter { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 18px; }
.wl-fbtn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; font-size: .86rem; font-weight: 600;
    background: var(--surface); border: 1px solid var(--line-2); color: var(--muted); }
.wl-fbtn:hover { color: var(--ink); border-color: var(--ink); text-decoration: none; }
.wl-fbtn.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.wl-fbtn-n { font-size: .76rem; background: rgba(9,19,45,.08); padding: 1px 8px; border-radius: 999px; }
.wl-fbtn.active .wl-fbtn-n { background: rgba(255,255,255,.2); }
.wl-fbtn-over.active { background: var(--danger); border-color: var(--danger); }
.wl-drill-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.wl-drill-tip { margin: 2px 0 14px; }
.wl-client-group { margin-bottom: 18px; }
.wl-client-head { display: flex; align-items: center; gap: 8px; font-size: .95rem; font-weight: 700; color: var(--ink);
    margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.wl-client-link { color: var(--ink); text-decoration: none; }
.wl-client-link:hover { color: var(--primary); text-decoration: underline; }
.wl-client-n { margin-left: auto; font-size: .74rem; font-weight: 700; color: var(--muted); background: var(--surface-2);
    padding: 1px 9px; border-radius: 999px; }
.wl-due, .wl-over { cursor: pointer; }
a.wl-over:hover, a.wl-due:hover { text-decoration: underline; }
.wl-task-list { padding: 4px 14px; }
.wl-task { display: grid; grid-template-columns: 10px 1fr auto auto; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--line); }
.wl-task:last-child { border-bottom: none; }
.wl-task-dot { width: 9px; height: 9px; border-radius: 50%; }
.wl-task-main { min-width: 0; color: var(--ink); display: flex; flex-direction: column; gap: 2px; }
.wl-task-main:hover { text-decoration: none; } .wl-task-main:hover .wl-task-content { color: var(--teal); }
.wl-task-content { font-size: .92rem; font-weight: 500; }
.wl-task-sub { font-size: .76rem; color: var(--muted); }
.wl-task-who { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--muted); white-space: nowrap; }
.wl-task-who:hover { color: var(--ink); text-decoration: none; }
.wl-task-unassigned { color: #b45309; font-weight: 600; }
/* Bulk select + actions */
.wl-fbtn-unassigned.active { background: #d97706; border-color: #d97706; }
.wl-task-selectable { grid-template-columns: 22px 10px 1fr auto auto; }
.wl-check-wrap { display: flex; align-items: center; justify-content: center; cursor: pointer; }
.wl-check { cursor: pointer; width: 16px; height: 16px; }
.wl-task.is-checked { background: rgba(255,90,78,.06); }
.wl-bulkbar { position: sticky; top: 8px; z-index: 5; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; padding: 8px 12px; margin-bottom: 6px; box-shadow: 0 6px 20px rgba(8,19,32,.10); }
.wl-bulk-all { display: inline-flex; align-items: center; gap: 7px; font-size: .85rem; font-weight: 600; cursor: pointer; }
.wl-bulk-count { font-size: .82rem; color: var(--muted); }
.wl-bulk-spacer { flex: 1 1 auto; }
.wl-bulk-assignee { font-size: .85rem; padding: 7px 10px; max-width: 190px; }
.wl-del-btn:hover:not(:disabled) { color: var(--danger); border-color: var(--danger); }
.wl-bulk-tip { margin: 2px 0 12px; }
@media (max-width: 560px) { .wl-bulk-spacer { flex-basis: 100%; } .wl-bulk-assignee { max-width: none; flex: 1; } }
.wl-task-due { display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; color: var(--muted); white-space: nowrap; }
.wl-task-due.overdue { color: var(--danger); font-weight: 600; }
.wl-task-due.overdue .icon { color: var(--danger); }
@media (max-width: 620px) { .wl-task { grid-template-columns: 10px 1fr; } .wl-task-who, .wl-task-due { grid-column: 2; justify-self: start; } }
.ms-rows { display: flex; flex-direction: column; }

.ms-row { display: flex; align-items: center; gap: 11px; padding: 9px 6px; border-radius: 9px;
    border-bottom: 1px solid var(--line); transition: background .12s; }
.ms-row:last-child { border-bottom: none; }
.ms-row:hover { background: rgba(9,19,45,.025); }
.ms-row:hover .ms-pin { opacity: 1; }
.ms-row-main { flex: 1; min-width: 0; color: var(--ink); }
.ms-row-main:hover { text-decoration: none; }
.ms-row-main:hover .ms-row-title { color: var(--teal); }
.ms-row-title { font-size: .95rem; line-height: 1.4; }
.ms-row-done .ms-row-title { text-decoration: line-through; color: var(--muted); }
.ms-row-meta { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
.ms-chip { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; color: var(--muted); white-space: nowrap; }
.ms-chip .icon { color: var(--muted); opacity: .85; }
.ms-assignee { font-weight: 500; color: var(--ink); }
.ms-proj { font-weight: 600; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); padding: 3px 9px; border-radius: 999px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.ms-proj:hover { border-color: var(--line-2); text-decoration: none; }
.ms-proj-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.ms-date.overdue { color: var(--danger); font-weight: 600; }
.ms-date.overdue .icon { color: var(--danger); opacity: 1; }
.ms-detail .icon { color: var(--muted); }
.ms-pin { background: none; border: 1px solid var(--line-2); color: var(--muted); cursor: pointer;
    width: 26px; height: 26px; border-radius: 7px; flex: 0 0 auto; font-size: 1rem; line-height: 1;
    opacity: 0; transition: .12s; display: grid; place-items: center; }
.ms-pin:hover { color: var(--primary); border-color: var(--primary); }
.ms-pin.pinned { opacity: 1; background: var(--primary); color: #fff; border-color: transparent; }

/* Standalone checkbox (assignment rows + Up Next) */
.ms-row .checkbox { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--line-2);
    background: transparent; cursor: pointer; display: grid; place-items: center; color: #fff;
    flex: 0 0 auto; transition: .15s; padding: 0; }
.ms-row .checkbox:hover { border-color: var(--primary); }
.ms-row .checkbox.checked { background: var(--success); border-color: transparent; }
.ms-row .checkbox .icon { width: 13px; height: 13px; stroke-width: 3; }

.ms-foot { margin: 8px 0 30px; }
.ms-foot-link { font-size: .9rem; font-weight: 600; color: var(--teal); }
.ms-upcoming { margin-top: 18px; }

@media (max-width: 620px) {
    .ms-row { flex-wrap: wrap; }
    .ms-row-meta { width: 100%; justify-content: flex-start; padding-left: 33px; }
}

/* ============================================================
   Hey! notifications — timeline feed
   ============================================================ */
.notif-group { margin-bottom: 22px; }
.notif-group-h { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 10px; }
.notif-feed { position: relative; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 8px 12px; box-shadow: var(--shadow); }
.notif { display: block; }
.notif-btn { display: grid; grid-template-columns: 38px 1fr auto; gap: 14px; align-items: start; width: 100%;
    text-align: left; background: transparent; border: none; cursor: pointer; padding: 12px; border-radius: 12px;
    position: relative; color: var(--ink); }
.notif-btn:hover { background: var(--surface-2); }
.notif.unread .notif-btn { background: rgba(255, 90, 78,.05); }
.notif.unread .notif-btn::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; background: var(--teal); border-radius: 2px; }
.notif-feed .notif:not(:last-child) .notif-btn::after { content: ''; position: absolute; left: 30px; top: 46px; bottom: -6px; width: 2px; background: var(--line); }
.notif .act-avatar { position: relative; z-index: 1; }
.notif-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.notif-summary { font-size: .92rem; line-height: 1.4; font-weight: 500; }
.notif-routine .notif-summary { font-weight: 400; color: var(--muted); }
.notif-meta { font-size: .76rem; color: var(--muted); }
.notif .unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); margin-top: 8px; }
/* extra badge colors */
.act-badge--mention { background: #f0a500; color: #09132d; }
.act-badge--client_update { background: #ff5a4e; color: #fff; }
.act-badge--reminder { background: #9c36b5; color: #fff; }
.act-badge--bell { background: var(--muted); }

/* ============================================================
   Team directory — member cards
   ============================================================ */
.member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.member-card { padding: 20px; position: relative; }
.member-card.pending { opacity: .8; border-style: dashed; }
.mc-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; }
.member-card .avatar.lg { --s: 52px; font-size: 1.05rem; }
.mc-name { font-size: 1.05rem; margin-bottom: 2px; }
.mc-role { font-size: .82rem; color: var(--muted); margin-bottom: 6px; }
.mc-dept { color: var(--teal); font-weight: 600; }
.mc-email { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-email:hover { color: var(--teal); }
.mc-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.mc-edit { display: flex; gap: 10px; }
.mc-field { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.mc-field > span { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.mc-field form { margin: 0; }
.mc-actions select, .mc-dept-form input { width: 100%; font-size: .84rem; padding: 7px 9px; }
.mc-links { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
.mc-links .mc-merge { display: inline-flex; }

/* Search result type badges */
.search-result .result-icon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: 0 0 auto; }
.search-result .result-icon .icon { color: #09132d; }
.search-result .result-icon.act-badge--comment .icon, .search-result .result-icon.act-badge--doc .icon { color: #fff; }

/* ============================================================
   Auth — branded split-screen
   ============================================================ */
.auth-split { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; }
@media (max-width: 860px) { .auth-split { grid-template-columns: 1fr; } .auth-hero { display: none; } }

.auth-hero { position: relative; overflow: hidden; color: #fff;
    background:
        radial-gradient(120% 100% at 0% 0%, rgba(255, 90, 78,.35), transparent 55%),
        radial-gradient(120% 120% at 100% 100%, rgba(250, 202, 44,.18), transparent 55%),
        linear-gradient(160deg, #0a1626, #06101d); }
.auth-topo { position: absolute; inset: 0; width: 100%; height: 100%; color: rgba(255, 90, 78,.18); }
.auth-hero-inner { position: relative; z-index: 2; padding: 56px 56px 0; }
.auth-hero-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 1.3rem; color: #fff; }
.auth-hero-logo { width: 34px; height: 34px; border-radius: 9px; }
.auth-hero-title { font-family: var(--display); font-weight: 800; font-size: clamp(1.8rem, 3.4vw, 2.8rem); letter-spacing: -0.03em; line-height: 1.12; margin: 40px 0 26px; }
.auth-hero-list { list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 1rem; color: rgba(255,255,255,.85); }
.auth-hero-mtn { position: absolute; right: -10px; bottom: -10px; width: 60%; max-width: 360px; opacity: .9; z-index: 1; }
.auth-hero-mtn svg { width: 100%; height: auto; }

.auth-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px; background: var(--bg); }
.auth-panel .auth-card { width: 100%; max-width: 380px; background: transparent; border: none; box-shadow: none; padding: 0; }
.auth-brand-sm { display: none; align-items: center; gap: 8px; font-family: var(--display); font-weight: 800; margin-bottom: 18px; }
.auth-logo-sm { width: 30px; height: 30px; border-radius: 8px; }
@media (max-width: 860px) { .auth-brand-sm { display: flex; justify-content: center; } }
.auth-heading { font-family: var(--display); font-weight: 800; font-size: 1.7rem; letter-spacing: -0.02em; margin-bottom: 20px; }
.auth-foot { margin-top: 24px; font-size: .82rem; }

/* ============================================================
   Landing cleanup — tighter rhythm + clear section separation
   ============================================================ */
.lp-hero { padding-bottom: 28px !important; }
.lp-problem { padding: 60px 24px !important; }
.lp-section { border-top: 1px solid var(--line); }
.lp-spot-wrap { border-top: 1px solid var(--line); gap: 0 !important; }
.lp-spot { padding: 40px 0; }
.lp-spot + .lp-spot { border-top: 1px solid var(--line); }
.lp-spot-visual { background: var(--surface); }
.lp-finale { padding: 72px 24px 84px !important; border-top: 1px solid var(--line); }
/* a touch more presence for the hero summit */
.lp-summit-svg { max-width: 600px !important; }
@media (max-width: 900px) { .lp-summit-svg { max-width: 420px !important; } }
/* keep the announce pill from feeling cramped under the nav */
.lp-announce { margin-top: 18px; }

/* ============================================================
   Landing — impactful trust chips + hero mountain ridge
   ============================================================ */
.lp-trust { gap: 10px !important; margin-top: 26px; }
.lp-trust-item { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 600; color: var(--ink);
    background: rgba(9, 19, 45, .04); border: 1px solid var(--line-2); padding: 7px 15px 7px 9px; border-radius: 999px; }
.lp-trust-check { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
    background: var(--grad); color: #09132d; font-size: .72rem; font-weight: 900; flex: 0 0 auto; }

.lp-hero { padding-bottom: 140px !important; }
.lp-hero-grid { position: relative; z-index: 2; }
.lp-ridge { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 180px; z-index: 0; pointer-events: none; }
.lp-ridge-3 { fill: rgba(250, 202, 44,.10); }
.lp-ridge-2 { fill: rgba(255, 90, 78,.12); }
.lp-ridge-1 { fill: var(--bg); }
@media (max-width: 900px) { .lp-hero { padding-bottom: 100px !important; } .lp-ridge { height: 120px; } }

/* Full-bleed section bands — give the page rhythm and clear divides */
.lp-body { overflow-x: clip; }
.lp-band { position: relative; }
.lp-band::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw;
    transform: translateX(-50%); z-index: 0; border-top: 1px solid var(--line); }
.lp-band--surface::before { background: var(--surface); }
.lp-band--tint::before { background: linear-gradient(180deg, rgba(255, 90, 78,.085), rgba(250, 202, 44,.06)); }
.lp-band--soft::before { background: rgba(9, 19, 45,.05); }
.lp-band > * { position: relative; z-index: 1; }

/* Lift landing cards so they read clearly on the tinted section bands */
.lp-feature, .lp-team-card, .lp-step, .lp-int, .lp-route-stages li,
.lp-faq-item, .lp-cascade, .lp-spot-visual, .lp-oneprice-card {
    box-shadow: 0 4px 16px rgba(9, 19, 45, .05);
}

/* How it works — numbered steps */
.lp-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.lp-step { padding: 26px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.lp-step-n { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
    border-radius: 50%; font-family: var(--display); font-weight: 800; color: #fff; background: var(--grad);
    box-shadow: 0 6px 16px rgba(255, 90, 78,.25); margin-bottom: 14px; }
.lp-step h3 { font-size: 1.06rem; margin: 0 0 6px; }
.lp-step p { font-size: .94rem; line-height: 1.55; margin: 0; }
@media (max-width: 900px) { .lp-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .lp-steps { grid-template-columns: 1fr; } }

/* Integrations / connectors */
.lp-int-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.lp-int { display: flex; flex-direction: column; gap: 7px; padding: 22px; border: 1px solid var(--line);
    border-radius: var(--radius); background: var(--surface); transition: transform .14s, box-shadow .14s; }
.lp-int:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(9, 19, 45,.07); }
.lp-int-name { font-family: var(--display); font-weight: 700; font-size: 1.1rem; color: var(--ink); }
.lp-int-note { text-align: center; margin-top: 22px; }
@media (max-width: 820px) { .lp-int-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .lp-int-grid { grid-template-columns: 1fr; } }

/* FAQ — native details accordion */
.lp-faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.lp-faq-item { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); padding: 2px 22px; }
.lp-faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: 16px;
    cursor: pointer; list-style: none; padding: 17px 0; font-weight: 600; color: var(--ink); font-size: 1.02rem; }
.lp-faq-item summary::-webkit-details-marker { display: none; }
.lp-faq-mark { flex: none; font-size: 1.45rem; line-height: 1; color: var(--teal); transition: transform .18s; }
.lp-faq-item[open] .lp-faq-mark { transform: rotate(45deg); }
.lp-faq-item p { margin: 0 0 18px; line-height: 1.62; }

/* Summit flag "key result" label */
.lp-summit-goal { fill: #09132d; font-size: 13.5px; font-weight: 800; font-family: var(--font);
    paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }

/* Scroll-reveal — subtle entrance for landing sections. The .reveal class is
   only added by JS when IntersectionObserver is supported and motion is
   allowed, so without JS everything stays visible. */
.lp-body .reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); will-change: opacity, transform; }
.lp-body .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .lp-body .reveal { opacity: 1; transform: none; transition: none; }
}

/* Feature cards — less generic: gradient hairline top, gradient icon on hover */
.lp-feature { position: relative; overflow: hidden; }
.lp-feature::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .22s ease; }
.lp-feature:hover::before { transform: scaleX(1); }
.lp-feature-icon { background: linear-gradient(135deg, rgba(255, 90, 78,.16), rgba(250, 202, 44,.12));
    color: var(--primary); transition: background .18s, color .18s, transform .18s; }
.lp-feature:hover .lp-feature-icon { background: var(--grad); color: #fff; transform: rotate(-4deg) scale(1.05); }

/* ===== Stats band ===== */
.lp-statsband { padding: 40px 24px; }
.lp-statsband-inner { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; text-align: center; }
@media (max-width: 720px) { .lp-statsband-inner { grid-template-columns: repeat(2, 1fr); gap: 26px 18px; } }
.lp-statf { display: flex; flex-direction: column; gap: 4px; }
.lp-statf-n { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1;
    letter-spacing: -.03em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-statf-u { font-size: .9rem; -webkit-text-fill-color: var(--muted); color: var(--muted); }
.lp-statf-l { font-size: .9rem; color: var(--muted); }

/* ===== Feature bento ===== */
.lp-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 14px; }
.lp-bento .lp-feature { margin: 0; display: flex; flex-direction: column; }
.lp-feat-lg { grid-column: span 2; grid-row: span 2; }
.lp-feat-lg h3 { font-size: 1.4rem; }
.lp-feat-lg .lp-spot-kicker { margin: 4px 0 8px; }
.lp-feat-mock { margin-top: auto; padding-top: 18px; }
.lp-feat-cta { background: linear-gradient(135deg, rgba(255,90,78,.1), rgba(250,202,44,.08)); border-color: rgba(255,90,78,.3);
    color: var(--ink); justify-content: center; }
.lp-feat-cta:hover { text-decoration: none; border-color: rgba(255,90,78,.55); transform: translateY(-4px); }
.lp-feat-cta::before { display: none; }
.lp-feat-cta-plus { font-size: 1.6rem; line-height: 1; color: var(--primary); font-weight: 700; }
.lp-feat-cta h3 { margin: 10px 0 4px; }
.lp-feat-cta p { font-size: .9rem; color: var(--muted); }
.lp-feat-cta-go { margin-top: 10px; font-weight: 700; color: var(--primary); }
@media (max-width: 900px) {
    .lp-bento { grid-template-columns: repeat(2, 1fr); }
    .lp-feat-lg { grid-column: span 2; grid-row: auto; }
}
@media (max-width: 560px) { .lp-bento { grid-template-columns: 1fr; } .lp-feat-lg { grid-column: auto; } }

/* ===== Richer audience cards ===== */
.lp-team-card { position: relative; overflow: hidden; transition: transform .15s, border-color .15s, box-shadow .15s; }
.lp-team-card:hover { transform: translateY(-4px); border-color: rgba(255,90,78,.35); box-shadow: 0 20px 50px rgba(8,19,32,.1); }
.lp-team-medallion { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; font-size: 1.5rem;
    background: linear-gradient(135deg, rgba(255,90,78,.16), rgba(250,202,44,.14)); box-shadow: inset 0 0 0 1px rgba(255,90,78,.14); }
.lp-team-card h3 { margin: 16px 0 8px; }
.lp-team-out { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; font-size: .82rem; font-weight: 600; color: var(--ink);
    background: rgba(9,19,45,.04); border: 1px solid var(--line); padding: 6px 12px; border-radius: 999px; }
.lp-team-out .icon { color: var(--success); }

/* ===== One flat price ===== */
.lp-oneprice { display: flex; justify-content: center; }
.lp-oneprice-card { position: relative; width: 100%; max-width: 520px; padding: 38px 34px; text-align: center;
    background: var(--surface); border: 1px solid rgba(255,90,78,.35); border-radius: 24px;
    box-shadow: 0 0 0 1px rgba(255,90,78,.12), 0 30px 70px rgba(8,19,32,.12); }
.lp-oneprice-card .lp-plan-tag { left: 50%; transform: translateX(-50%); }
.lp-oneprice .lp-price { font-size: clamp(3rem, 7vw, 4rem); margin: 14px 0 2px; }
.lp-oneprice .lp-price-cur { font-size: .55em; vertical-align: super; }
.lp-oneprice .lp-price span { font-size: 1rem; font-weight: 600; color: var(--muted); }
.lp-oneprice-flat { color: var(--muted); margin-bottom: 22px; }
.lp-plan-list--2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; text-align: left; margin: 0 0 26px; }
@media (max-width: 480px) { .lp-plan-list--2col { grid-template-columns: 1fr; } }
.lp-oneprice-note { margin-top: 14px; }

/* ============================================================
   To-do board v3 — Basecamp-style stacked, readable lists
   (phases stack full-width instead of cramped 300px columns)
   ============================================================ */
.todo-columns { grid-template-columns: 1fr !important; max-width: 880px; gap: 14px; }
.track-head { max-width: 880px; }

.todo-list { padding: 22px 26px; }
.todo-list-head h3 { font-size: 1.15rem; letter-spacing: -0.01em; }
.phase-hint { max-width: 880px; }

.todo-items { gap: 7px; margin: 16px 0; }
.todo-item { padding: 12px 14px; gap: 12px; align-items: flex-start; }
.todo-item .checkbox { margin-top: 1px; }
.todo-text { font-size: .96rem; line-height: 1.5; padding-top: 1px; }
.todo-link { font-weight: 600; }
.todo-item .status-menu, .todo-item > .avatar.xs, .todo-item > .del-form { margin-top: 1px; }

/* roomier add-todo + extras within a full-width list */
.add-todo { max-width: 560px; }
.todo-extras { margin-left: 30px; }

/* ============================================================
   To-do board v4 — flat Basecamp-style rows + list dots + descriptions
   ============================================================ */
/* Flatten task cards into clean divider rows */
.todo-item {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 11px 6px !important;
    margin: 0 !important;
}
.todo-items > .todo-item:last-of-type { border-bottom: none !important; }
.todo-item:hover { background: rgba(9, 19, 45, .018) !important; box-shadow: none !important; }
.todo-item.done { opacity: .55; }
.todo-item:has(.bulk-check:checked) { background: rgba(255, 90, 78,.06) !important; }
.todo-items { gap: 0 !important; margin: 8px 0 !important; }

/* status as a small left marker instead of a card border */
.todo-item.status-blocked,
.todo-item.status-in_review,
.todo-item.status-in_progress { border-left: none !important; padding-left: 6px !important; }

/* subtasks: lighter, indented, on a connector */
.subtask-items { margin-left: 30px !important; }
.todo-item.is-sub { background: transparent !important; }

/* List header: colored dot + description */
.todo-list-head h3 { display: flex; align-items: center; gap: 9px; }
.list-dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 0%, transparent); }
.list-desc { color: var(--muted); font-size: .9rem; line-height: 1.45; margin: 6px 0 2px 20px; }
.phase-desc-input { width: 100%; }

/* ===== Basecamp import ===== */
.bc-connect-card { display: flex; align-items: center; gap: 14px; padding: 18px 20px; margin-bottom: 18px; color: var(--ink);
    border: 1px solid var(--line-2); }
.bc-connect-card:hover { border-color: rgba(255, 90, 78,.5); text-decoration: none; transform: translateY(-2px); }
.bc-connect-ic { font-size: 1.8rem; }
.bc-connect-arrow { margin-left: auto; color: var(--teal); font-size: 1.3rem; }
.bc-list { display: flex; flex-direction: column; gap: 4px; max-height: 360px; overflow-y: auto; margin: 6px 0 14px; }
.bc-row { display: flex; align-items: flex-start; gap: 12px; padding: 11px 12px; border-radius: 10px; }
.bc-row:hover { background: var(--bg-2); }
.bc-row input { margin-top: 3px; }
.bc-row-pick { display: flex; align-items: flex-start; gap: 12px; flex: 1 1 auto; min-width: 0; cursor: pointer; }
.bc-tpl-link { flex: 0 0 auto; align-self: center; font-size: .82rem; font-weight: 600; color: var(--primary); white-space: nowrap;
    padding: 5px 11px; border: 1px solid var(--line-2); border-radius: 999px; }
.bc-tpl-link:hover { border-color: var(--primary); text-decoration: none; }

/* ===== New brand assets (icon in header, wordmark in footer/elsewhere) ===== */
.brand-icon { height: 38px; width: 38px; display: block; object-fit: contain; }
.brand-icon--org { width: auto; max-width: 150px; border-radius: 8px; }
/* Workspace branding page */
.brand-logo-row { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.brand-logo-preview { flex: 0 0 auto; min-width: 140px; min-height: 64px; padding: 12px 16px; display: flex; align-items: center; justify-content: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; }
.brand-logo-preview img { max-height: 48px; max-width: 200px; object-fit: contain; }
.brand-color-row { display: inline-flex; align-items: center; gap: 12px; }
.brand-color-row input[type="color"] { width: 48px; height: 38px; padding: 0; border: 1px solid var(--line-2); border-radius: 8px; background: none; cursor: pointer; }
.card-title { font-size: 1rem; font-family: var(--display); margin-bottom: 4px; }

/* ---- Branding page: two-column layout with a live email preview ---- */
.brand-page { max-width: 1100px; margin: 0 auto; }
.brand-head { margin-bottom: 20px; }
.brand-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.brand-forms { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.brand-preview-sticky { position: sticky; top: 84px; }
.bp-label { display: inline-flex; align-items: center; gap: 7px; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 10px; }
/* Faux inbox row above the email */
.bp-inbox { background: var(--surface-2); border: 1px solid var(--line); border-bottom: 0; border-radius: 12px 12px 0 0; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; }
.bp-inbox-from { font-size: .82rem; color: var(--ink); }
.bp-inbox-subj { font-size: .82rem; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The branded email card — mirrors Mailer::wrap() */
.bp-email { background: #fff; border: 1px solid #e4e7ee; border-radius: 0 0 14px 14px; overflow: hidden; box-shadow: 0 8px 30px rgba(9,19,45,.08); color: #1d2536; }
.bp-email-head { padding: 22px 24px 6px; }
.bp-email-head img { max-height: 40px; max-width: 180px; object-fit: contain; display: block; }
.bp-email-name { font-family: var(--display), Inter, Arial, sans-serif; font-weight: 800; font-size: 20px; letter-spacing: -.02em; }
.bp-email-body { padding: 6px 24px 22px; font-size: .9rem; line-height: 1.55; }
.bp-email-body p { margin: 0 0 10px; }
.bp-cta { display: inline-block; margin: 6px 0 14px; padding: 10px 20px; border-radius: 10px; color: #fff; font-weight: 700; font-size: .86rem; }
.bp-email-sign { color: #4a5468; }
.bp-email-foot { padding: 16px 24px; border-top: 1px solid #eef0f4; font-size: .72rem; color: #8a93a6; }
.bp-email-foot a { text-decoration: none; }
.bp-note { margin-top: 12px; }
@media (max-width: 900px) {
    .brand-grid { grid-template-columns: 1fr; }
    .brand-preview-sticky { position: static; }
    .brand-preview-col { order: -1; } /* show the preview first on mobile */
}
.brand:hover .brand-icon { transform: translateY(-1px); transition: transform .12s; }
.brand-wordmark { display: block; }
.footer { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.footer .brand-wordmark { opacity: .9; }
/* The wordmark's dark lettering vanishes on dark backgrounds — render it
   monochrome white there (no dark logo asset exists). */
[data-theme="dark"] .brand-wordmark { filter: brightness(0) invert(1); opacity: .8; }
.footer-inner { width: 100%; max-width: 1160px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.footer-brand p { margin: 0; }
.footer-links { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.footer-links a, .footer-link { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .82rem; font-weight: 600;
    text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.footer-links a:hover, .footer-link:hover { color: var(--teal); }
.footer-links kbd { font-size: .68rem; font-weight: 700; background: var(--bg-subtle, rgba(127,127,127,.12)); border: 1px solid var(--line);
    border-radius: 5px; padding: 1px 5px; color: var(--muted); }
.footer-copy { margin: 0; font-size: .74rem; color: var(--muted); opacity: .8; }
@media (max-width: 640px) { .footer-inner { flex-direction: column; align-items: center; text-align: center; } .footer-brand { align-items: center; } }
.lp-footer-brand .brand-wordmark { margin-bottom: 8px; }

/* New PNG brand assets sizing */
.brand-wordmark { height: 68px; width: auto; display: block; }
.footer .brand-wordmark { height: 44px; opacity: .9; }
.lp-footer-brand .brand-wordmark { height: 56px; margin-bottom: 8px; }
/* Keep the taller logo from crowding the marketing header on small screens. */
@media (max-width: 560px) {
    .brand-wordmark { height: 50px; }
    .lp-footer-brand .brand-wordmark { height: 46px; }
}

/* ============================ Comparison pages ============================ */
.lp-h3 { font-family: var(--display); font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em; }
.lp-crumb { max-width: 1100px; margin: 0 auto; padding: 20px 24px 0; font-size: .85rem; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; }
.lp-crumb a { color: var(--muted); } .lp-crumb a:hover { color: var(--ink); }
.lp-crumb span { opacity: .5; }

.cmp-hero { text-align: center; padding-top: 40px; padding-bottom: 40px; }
.cmp-h1 { margin: 10px auto 0; }
.cmp-vs { font-style: italic; color: var(--primary); font-weight: 700; -webkit-text-fill-color: var(--primary); }
.cmp-sub { margin-left: auto; margin-right: auto; }
.cmp-hero .lp-hero-cta { justify-content: center; margin-top: 28px; }
.cmp-trust { margin-top: 16px; }
.cmp-trust i { color: var(--success); }

/* At-a-glance cards */
.cmp-glance { padding-top: 24px; }
.cmp-glance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cmp-glance-card { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); }
.cmp-glance-peakkr { border-color: rgba(255,90,78,.35);
    background: radial-gradient(420px 200px at 0% 0%, rgba(255,90,78,.07), transparent 60%), var(--surface); }
.cmp-glance-card h3 { display: flex; align-items: center; gap: 9px; font-family: var(--display); font-size: 1.35rem; }
.cmp-logo { width: 26px; height: 26px; border-radius: 7px; }
.cmp-tagline { color: var(--ink); font-weight: 600; margin: 6px 0 10px; }
.cmp-price { margin-top: 14px; font-family: var(--display); font-weight: 800; font-size: 1.5rem; color: var(--primary); }
.cmp-price span { font-size: .82rem; font-weight: 500; color: var(--muted); }
.cmp-price-alt { color: var(--ink); font-size: 1rem; font-weight: 600; }

/* Matrix table */
.cmp-matrix-wrap { text-align: center; }
.cmp-table-scroll { overflow-x: auto; margin: 30px auto 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.cmp-table { width: 100%; border-collapse: collapse; text-align: left; min-width: 520px; }
.cmp-table-wide { min-width: 820px; }
.cmp-table th, .cmp-table td { padding: 15px 18px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.cmp-table thead th { font-family: var(--display); font-size: .9rem; font-weight: 700; color: var(--ink); white-space: nowrap; text-align: center; }
.cmp-table thead th.cmp-feat { text-align: left; }
.cmp-table tbody tr:last-child td { border-bottom: none; }
.cmp-table td:not(.cmp-feat) { text-align: center; }
.cmp-feat { font-weight: 600; color: var(--ink); font-size: .95rem; }
.cmp-col-peakkr { background: rgba(255,90,78,.05); }
.cmp-table thead th.cmp-col-peakkr { color: var(--primary); }
.cmp-mark { font-size: 1.15rem; line-height: 1; }
.cmp-mark.cmp-yes { color: var(--success); }
.cmp-mark.cmp-partial { color: var(--warning); }
.cmp-mark.cmp-no { color: var(--line-2); }
.cmp-note { display: block; font-size: .74rem; color: var(--muted); margin-top: 4px; max-width: 220px; margin-left: auto; margin-right: auto; line-height: 1.35; }
.cmp-disclaimer { margin-top: 18px; }
.cmp-disclaimer i { color: var(--muted); }
.cmp-legend { display: inline-flex; flex-wrap: wrap; gap: 14px; margin-left: 10px; align-items: center; }
.cmp-legend .cmp-mark { font-size: .95rem; }

/* Why-switch grid */
.cmp-why { text-align: center; }
.cmp-why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 34px; text-align: left; }
.cmp-why-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.cmp-why-ic { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; font-size: 1.25rem; margin-bottom: 12px;
    background: color-mix(in srgb, var(--accent) 16%, var(--surface-2)); color: var(--primary); }
.cmp-why-ic i { --fa-secondary-color: var(--accent); --fa-secondary-opacity: .9; }
.cmp-why-item h3 { font-family: var(--display); font-size: 1.08rem; margin-bottom: 6px; }

.cmp-fair { text-align: center; }
.cmp-fair-body { max-width: 720px; margin: 18px auto 0; font-size: 1.08rem; color: var(--muted); line-height: 1.7; }

/* CTA + cards */
.cmp-cta { text-align: center; }
.cmp-cta-card { background: radial-gradient(600px 240px at 50% 0%, rgba(255,90,78,.10), transparent 65%), var(--surface);
    border: 1px solid var(--line-2); border-radius: var(--radius); padding: 48px 28px; }
.cmp-cta-card .lp-hero-cta { justify-content: center; margin-top: 24px; }

.cmp-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cmp-card { display: flex; flex-direction: column; gap: 6px; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); transition: transform .12s, box-shadow .12s, border-color .12s; }
.cmp-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--line-2); text-decoration: none; }
.cmp-card-h { font-family: var(--display); font-size: 1.3rem; color: var(--ink); }
.cmp-card-tag { color: var(--ink); font-weight: 600; }
.cmp-card-link { margin-top: auto; padding-top: 10px; color: var(--primary); font-weight: 600; font-size: .9rem; }

.cmp-others { text-align: center; }
.cmp-others-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 22px; }
.cmp-other-chip { padding: 9px 16px; border: 1px solid var(--line-2); border-radius: 999px; font-size: .9rem; font-weight: 600; color: var(--ink); background: var(--surface); }
.cmp-other-chip:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }

@media (max-width: 860px) {
    .cmp-glance-grid, .cmp-why-grid, .cmp-card-grid { grid-template-columns: 1fr; }
    .cmp-why-grid { gap: 14px; }
}

/* Comparison FAQ + listicles */
.cmp-faq { max-width: 820px; }
.cmp-faq-list { margin-top: 26px; display: grid; gap: 12px; }
.cmp-faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px 20px; }
.cmp-faq-item summary { cursor: pointer; font-weight: 600; font-family: var(--display); padding: 16px 0; list-style: none; position: relative; padding-right: 28px; }
.cmp-faq-item summary::-webkit-details-marker { display: none; }
.cmp-faq-item summary::after { content: '+'; position: absolute; right: 2px; top: 14px; font-size: 1.3rem; color: var(--primary); font-weight: 400; }
.cmp-faq-item[open] summary::after { content: '\2212'; }
.cmp-faq-item p { margin: 0 0 18px; color: var(--muted); line-height: 1.6; }

.cmp-rank { display: grid; gap: 18px; }
.cmp-rank-card { display: flex; gap: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); }
.cmp-rank-top { border-color: rgba(255,90,78,.35);
    background: radial-gradient(560px 220px at 0% 0%, rgba(255,90,78,.08), transparent 60%), var(--surface); }
.cmp-rank-badge { flex: 0 0 auto; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px;
    font-family: var(--display); font-weight: 800; font-size: 1.2rem; color: #fff; background: var(--grad); }
.cmp-rank-num { background: var(--surface-2); color: var(--muted); }
.cmp-rank-body { flex: 1 1 auto; min-width: 0; }
.cmp-rank-h { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 1.4rem; flex-wrap: wrap; }
.cmp-pick { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--primary);
    background: rgba(255,90,78,.10); border: 1px solid rgba(255,90,78,.25); padding: 3px 9px; border-radius: 999px; }
.cmp-rank-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 14px 0 16px; font-size: .85rem; color: var(--muted); }
.cmp-rank-meta strong { color: var(--ink); display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.cmp-hub-guides { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; }
@media (max-width: 700px) { .cmp-rank-card { flex-direction: column; gap: 14px; } }

/* ===== Template editor ===== */
.tpl-title-input { font-family: var(--display); font-weight: 800; font-size: clamp(1.6rem, 4vw, 2.2rem); letter-spacing: -0.02em;
    border: none; background: transparent; color: var(--ink); width: 100%; padding: 2px 0; }
.tpl-title-input:focus { outline: none; border-bottom: 2px solid var(--primary); }
.tpl-desc-input { border: none; background: transparent; color: var(--muted); width: 100%; font-size: 1rem; padding: 4px 0; margin-top: 4px; }
.tpl-desc-input:focus { outline: none; }
.tpl-help { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; margin: 4px 0 16px; }
.tpl-help i { color: var(--primary); }
.tpl-phased { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 600; color: var(--ink); margin-bottom: 16px; cursor: pointer; }
.tpl-lists { display: grid; gap: 16px; }
.tpl-list { padding: 18px; }
.tpl-list-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
/* Override the global width:100% on inputs/selects so editor controls size to content */
.tpl-list-name, .tpl-list-track, .tpl-task-content, .tpl-week, .tpl-dow, .tpl-pri, .tpl-rec, .tpl-assignee { width: auto; }
.tpl-list-name { flex: 1 1 240px; min-width: 0; font-family: var(--display); font-weight: 700; font-size: 1.05rem;
    border: none; background: transparent; color: var(--ink); padding: 4px 0; }
.tpl-list-name:focus { outline: none; border-bottom: 2px solid var(--primary); }
.tpl-list-track { flex: 0 0 130px; padding: 6px 9px; border: 1px solid var(--line-2); border-radius: 8px; font-size: .82rem; background: var(--surface); color: var(--ink); }
.tpl-phasenum { width: 46px; }
.tpl-phase-f .tpl-due-l { color: var(--primary); }
.tpl-assignee { flex: 0 0 auto; max-width: 150px; padding: 7px 8px; border: 1px solid var(--line-2); border-radius: 8px; font-size: .82rem; background: var(--surface); color: var(--ink); }
.tpl-tasks { display: grid; gap: 8px; }
.tpl-task { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tpl-note { flex: 1 1 100%; order: 9; margin-left: 24px; }
.tpl-note > summary { list-style: none; cursor: pointer; font-size: .76rem; font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; padding: 2px 0; }
.tpl-note > summary::-webkit-details-marker { display: none; }
.tpl-note[open] > summary { color: var(--primary); }
.tpl-note-ta { width: 100%; margin-top: 5px; padding: 8px 11px; border: 1px solid var(--line-2); border-radius: 9px; font: inherit; font-size: .86rem; background: var(--surface); color: var(--ink); resize: vertical; }
.tpl-grip { color: var(--line-2); cursor: default; font-size: .8rem; letter-spacing: -2px; flex: 0 0 auto; }
.tpl-task-content { flex: 1 1 auto; min-width: 120px; padding: 8px 11px; border: 1px solid var(--line-2); border-radius: 9px; font-size: .92rem; background: var(--surface); color: var(--ink); }
.tpl-due { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.tpl-due-l { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); white-space: nowrap; }
.tpl-week { flex: 0 0 auto; width: 52px; padding: 7px 6px; border: 1px solid var(--line-2); border-radius: 8px; font-size: .85rem; text-align: center; background: var(--surface); color: var(--ink); }
.tpl-dow, .tpl-pri, .tpl-rec { flex: 0 0 auto; padding: 7px 6px; border: 1px solid var(--line-2); border-radius: 8px; font-size: .85rem; background: var(--surface); color: var(--ink); }
.tpl-dow { min-width: 72px; }
.tpl-rec { width: 92px; }
.tpl-pri { min-width: 68px; }
.tpl-del-task { flex: 0 0 auto; width: 28px; height: 28px; border: 1px solid var(--line-2); background: var(--surface); color: var(--muted); border-radius: 8px; cursor: pointer; font-size: 1.1rem; line-height: 1; }
.tpl-del-task:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
.tpl-add-task { margin-top: 12px; }
.tpl-list-due { margin-left: auto; }
.tpl-editor-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
@media (max-width: 680px) {
    .tpl-task { flex-wrap: wrap; }
    .tpl-task-content { flex: 1 1 100%; }
    .tpl-list-due { margin-left: 0; }
}

/* Deliverables editor in the narrow overview sidebar: stack label over value */
.ov-deliverables .dlv-row { flex-wrap: wrap; gap: 4px 6px; padding-bottom: 9px; border-bottom: 1px dashed var(--line); }
.ov-deliverables .dlv-rows .dlv-row:last-child { border-bottom: none; padding-bottom: 0; }
.ov-deliverables .dlv-row .dlv-label { flex: 1 1 100%; font-weight: 600; font-size: .82rem; }
.ov-deliverables .dlv-row .dlv-value { flex: 1 1 auto; min-width: 0; }

.bc-selectall { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; margin-bottom: 8px; cursor: pointer; }
.bc-selectall input { margin: 0; }

/* Template editor — message board section */
.tpl-msgs-section { margin: 26px 0 8px; padding-top: 20px; border-top: 1px solid var(--line); }
.tpl-section-title { font-size: 1.1rem; font-family: var(--display); margin-bottom: 4px; }
.tpl-msgs { display: grid; gap: 12px; margin: 12px 0; }
.tpl-msg { padding: 14px 16px; }
.tpl-msg-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.tpl-msg-title { flex: 1 1 auto; min-width: 0; font-family: var(--display); font-weight: 700; font-size: 1rem; border: none; background: transparent; color: var(--ink); padding: 4px 0; border-bottom: 1px solid transparent; }
.tpl-msg-title:focus { outline: none; border-bottom: 1px solid var(--primary); }
.tpl-msg-body { width: 100%; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 9px; font-size: .9rem; background: var(--surface); color: var(--ink); resize: vertical; }

/* Beat the global input[type=number]{width:100%} so week boxes stay compact */
.tpl-editor .tpl-week { width: 52px; flex: 0 0 auto; }
.tpl-editor .tpl-list-head { row-gap: 8px; }
.tpl-editor .tpl-list-due { flex: 0 0 auto; }

/* ===== Sticky time tracker ===== */
.time-fab { position: fixed; left: 24px; bottom: 24px; z-index: 90; display: inline-flex; align-items: center; gap: 10px;
    padding: 9px 12px 9px 14px; border-radius: 999px; background: var(--ink); color: #fff;
    box-shadow: 0 10px 30px rgba(9,19,45,.28); }
.time-fab-pulse { width: 9px; height: 9px; border-radius: 50%; background: #ff5a4e; flex: 0 0 auto;
    box-shadow: 0 0 0 0 rgba(255,90,78,.7); animation: timePulse 1.6s infinite; }
@keyframes timePulse { 0% { box-shadow: 0 0 0 0 rgba(255,90,78,.6); } 70% { box-shadow: 0 0 0 8px rgba(255,90,78,0); } 100% { box-shadow: 0 0 0 0 rgba(255,90,78,0); } }
.time-fab-main { display: inline-flex; align-items: baseline; gap: 9px; color: #fff; }
.time-fab-main:hover { text-decoration: none; }
.time-fab-clock { font-family: var(--display); font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.time-fab-label { font-size: .82rem; color: rgba(255,255,255,.7); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.time-fab-stopform { margin: 0; }
.time-fab-stop { display: inline-flex; align-items: center; gap: 5px; border: none; cursor: pointer;
    background: rgba(255,255,255,.14); color: #fff; font-weight: 700; font-size: .82rem; padding: 6px 12px; border-radius: 999px; }
.time-fab-stop:hover { background: var(--primary); }
.time-fab-stop i { --fa-secondary-opacity: .5; }
@media (max-width: 560px) { .time-fab { left: 12px; bottom: 12px; } .time-fab-label { display: none; } }

/* Sticky timer: start state (on a project) */
/* Compact round FAB; the picker pops up on click */
.time-fab-start { padding: 0; border-radius: 50%; background: var(--ink); border: none; box-shadow: 0 8px 24px rgba(9,19,45,.28); }
.time-fab-start .time-fab-startbtn { width: 50px; height: 50px; display: inline-flex; align-items: center; justify-content: center;
    border: none; background: none; cursor: pointer; padding: 0; gap: 0; font-size: 0; border-radius: 50%; }
.time-fab-start .time-fab-startbtn:hover { background: rgba(255,255,255,.12); }
.time-fab-start .time-fab-startbtn i { color: #fff; font-size: 1.3rem; }
.time-fab-start .time-fab-label { display: none; }

.wl-drill-actions { display: inline-flex; align-items: center; gap: 14px; }
.wl-drill-actions .fa-file-excel { color: #1d6f42; }
.wl-open[href]:hover { color: var(--primary); text-decoration: none; }

/* SEOApp connector */
.conn-health-badge { display: inline-block; padding: 4px 14px; border-radius: 999px; color: #fff; font-weight: 800; font-size: .85rem; letter-spacing: .01em; }
/* Multi-location Business Profile: linked-locations list (in the tile) + breakdown cards. */
.gbp-loc-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow-y: auto; }
.gbp-loc-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .82rem; padding: 3px 0; }
.gbp-loc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gbp-loc-primary { font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; background: var(--bg-subtle, rgba(127,127,127,.14)); color: var(--muted); border-radius: 4px; padding: 1px 5px; }
.gbp-loc-x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0 2px; }
.gbp-loc-x:hover { color: var(--danger); }
.gbp-loc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.gbp-loc-card { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; }
.gbp-loc-card-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.gbp-loc-card-h strong { font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gbp-loc-card-h .conn-health-badge { padding: 2px 8px; font-size: .72rem; flex: 0 0 auto; }
.gbp-loc-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: .8rem; color: var(--muted); }
.gbp-loc-mini strong { color: var(--ink); font-variant-numeric: tabular-nums; }
/* Audited-locations list in the project's GBP-audit tool. */
.gbp-aud-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.gbp-aud-list li { display: flex; align-items: center; gap: 8px; font-size: .84rem; }
.gbp-aud-name { flex: 1 1 auto; min-width: 0; color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gbp-aud-name:hover { text-decoration: underline; }
.gbp-aud-grade { flex: 0 0 auto; display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 5px; color: #fff; font-weight: 800; font-size: .72rem; }
/* Prominent GBP audit locations card (multi-location clients). */
.gbp-locs-manage { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; }
.gbp-locs-manage li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.gbp-locs-manage li:last-child { border-bottom: 0; }
.gbp-locs-grade { flex: 0 0 auto; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; color: #fff; font-weight: 800; font-size: .82rem; }
.gbp-locs-name { flex: 1 1 auto; min-width: 0; font-weight: 600; color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gbp-locs-name:hover { text-decoration: underline; }
.gbp-locs-when { flex: 0 0 auto; }
.gbp-locs-act { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.gbp-locs-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gbp-locs-add input[name="business_name"] { flex: 2 1 200px; }
.gbp-locs-add input[name="location"] { flex: 1 1 130px; }
.gbp-locs-add input { padding: 8px 11px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--surface); color: var(--ink); font-size: .9rem; }
@media (max-width: 560px) { .gbp-locs-manage li { flex-wrap: wrap; } .gbp-locs-when { display: none; } .gbp-locs-act { margin-left: auto; } }
.conn-seoapp-health { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; }
.conn-seoapp-link { display: inline-block; }
.conn-seoapp-link > summary { list-style: none; cursor: pointer; }
.conn-seoapp-link > summary::-webkit-details-marker { display: none; }
.conn-seoapp-form { display: inline-flex; gap: 6px; margin-top: 8px; }
.conn-seoapp-form input { width: 160px; }

/* Sticky timer quick-start picker */
.time-fab-picker, .time-fab.time-fab-start { position: fixed; left: 24px; bottom: 24px; }
.time-pop { position: absolute; bottom: calc(100% + 10px); left: 0; width: 340px; max-width: calc(100vw - 28px);
    background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: var(--shadow-lg);
    overflow: hidden; display: flex; flex-direction: column; }
.time-pop[hidden] { display: none !important; }
.time-pop-head { padding: 10px; border-bottom: 1px solid var(--line); }
.time-pop-search { width: 100%; padding: 9px 12px; border: 1px solid var(--line-2); border-radius: 9px; font-size: .9rem; background: var(--bg-2); color: var(--ink); }
.time-pop-list { max-height: 320px; overflow-y: auto; padding: 6px; }
.time-pop-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: none; cursor: pointer;
    background: none; color: var(--ink); padding: 9px 10px; border-radius: 9px; font: inherit; }
.time-pop-item:hover, .time-pop-item.active { background: var(--surface-2); }
.time-pop-none { font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--line); border-radius: 0; margin-bottom: 4px; }
.time-pop-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.time-pop-text { display: flex; flex-direction: column; min-width: 0; }
.time-pop-task { font-size: .9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.time-pop-proj { font-size: .76rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.time-pop-empty { padding: 18px; text-align: center; color: var(--muted); font-size: .85rem; }

/* SEOApp: project picker, keyword table, overview badge */
.conn-seoapp-select { min-width: 220px; }
.conn-seoapp-hint { margin-top: 6px; }
.conn-kw { margin-top: 14px; }
.conn-kw > summary { cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--primary); }
.conn-kw > summary::-webkit-details-marker { display: none; }
.conn-kw-wrap { max-height: 360px; overflow-y: auto; margin-top: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.conn-kw-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.conn-kw-table th { position: sticky; top: 0; background: var(--surface); text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 9px 12px; border-bottom: 1px solid var(--line); }
.conn-kw-table th:last-child, .conn-kw-table td:last-child { text-align: right; width: 90px; }
.conn-kw-table td { padding: 8px 12px; border-bottom: 1px solid var(--line); }
.conn-kw-table tr:last-child td { border-bottom: none; }
.conn-kw-pos { font-weight: 800; font-variant-numeric: tabular-nums; }
/* Wide data tables scroll horizontally on small screens instead of overflowing. */
.conn-kw-wrap { overflow-x: auto; }
@media (max-width: 640px) {
    .conn-kw > .conn-kw-table { display: block; overflow-x: auto; white-space: nowrap; }
}
.ov-health-badge { display: inline-block; padding: 1px 9px; border-radius: 999px; color: #fff; font-weight: 700; font-size: .72rem; }
.ov-conn-seoapp { align-items: center; }

/* Sticky timer: custom / client panel */
.time-pop-action { font-weight: 600; color: var(--primary); border-bottom: 1px solid var(--line); border-radius: 0; margin-bottom: 4px; }
.time-pop-custom { padding: 12px; display: flex; flex-direction: column; gap: 9px; }
.time-pop-custom-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }

/* Recall: meeting recorder */
.conn-recall { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.recall-form { display: flex; flex-direction: column; gap: 12px; }
.recall-url { max-width: 460px; }
.recall-people-l { display: block; font-size: .8rem; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.recall-people-grid { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.recall-person { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; cursor: pointer; }
.recall-reminder { display: flex; align-items: flex-start; gap: 8px; font-size: .85rem; color: var(--ink);
    background: rgba(31,111,235,.08); border: 1px solid rgba(31,111,235,.22); border-radius: 10px; padding: 9px 12px; margin: 4px 0 0; }
.recall-reminder i, .recall-reminder .i-emoji { color: #1f6feb; flex: 0 0 auto; margin-top: 1px; }

/* "Call in progress" banner shown above the project tabs. */
.call-alert { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; padding: 12px 16px;
    background: rgba(224,49,49,.07); border: 1px solid rgba(224,49,49,.28); border-radius: var(--radius-sm); }
.call-alert-rec { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; font-size: .72rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .05em; color: #e03131; }
.call-rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #e03131; animation: callpulse 1.4s ease-in-out infinite; }
@keyframes callpulse { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(224,49,49,.45); } 50% { opacity: .55; box-shadow: 0 0 0 6px rgba(224,49,49,0); } }
.call-alert-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.call-alert form { flex: 0 0 auto; }
.call-alert-act { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.call-alert-dismiss { border: 0; background: transparent; color: var(--muted); font-size: .82rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; border-radius: 7px; }
.call-alert-dismiss:hover { color: #e03131; background: rgba(224,49,49,.1); }
.recall-dismiss { color: var(--muted); }
.recall-dismiss:hover { color: #e03131; }
.recall-status.recall-cancelled, .recall-status.recall-dismissed { background: var(--surface-2); color: var(--muted); }
@media (max-width: 640px) { .call-alert { flex-wrap: wrap; } .call-alert-act { width: 100%; } }
.recall-list { margin-top: 16px; display: grid; gap: 6px; }
.recall-row { display: flex; align-items: center; gap: 12px; font-size: .85rem; padding: 7px 0; border-top: 1px solid var(--line); }
.recall-row-url { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recall-status { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 2px 9px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.recall-status.recall-done { background: rgba(22,163,74,.14); color: var(--success); }
.recall-status.recall-sent { background: rgba(255,90,78,.12); color: var(--primary); }

/* Sticky timer — compact & out of the way on mobile */
@media (max-width: 600px) {
    .time-fab { left: 12px; bottom: 12px; }
    .time-fab-label { display: none; }
    /* Start states collapse to a small round icon button */
    .time-fab-start { padding: 0 !important; border-radius: 50%; }
    .time-fab-start .time-fab-startbtn { width: 46px; height: 46px; padding: 0; justify-content: center; gap: 0; font-size: 0; border-radius: 50%; }
    .time-fab-start .time-fab-startbtn i { font-size: 1.15rem; }
    /* Running pill stays small; stop becomes icon-only */
    .time-fab[data-started] { padding: 7px 10px; gap: 8px; }
    .time-fab-clock { font-size: .98rem; }
    .time-fab-stop { padding: 6px 9px; font-size: 0; gap: 0; }
    .time-fab-stop i { font-size: 1rem; }
    /* Picker popover fits the viewport */
    .time-pop { width: calc(100vw - 24px); max-height: 72vh; }
    .time-pop-list { max-height: 48vh; }
    /* Keep clear of the live-activity button on the opposite corner */
    .feed-fab { bottom: 12px; }
}

/* Avatar upload */
.ap-upload { display: flex; align-items: center; gap: 12px; margin: 8px 0; flex-wrap: wrap; }
.ap-upload-btn { cursor: pointer; }

/* Deliverables auto-fill + migration page */
.dlv-extract-form { margin-top: 6px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dlv-extract { color: var(--primary); font-weight: 600; }
.dlv-extract i { --fa-secondary-color: var(--accent); --fa-secondary-opacity: 1; }
.mig-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; margin-bottom: 16px; flex-wrap: wrap; }
.mig-list { padding: 6px 10px; }
.mig-row { display: flex; align-items: center; gap: 12px; padding: 11px 8px; border-bottom: 1px solid var(--line); }
.mig-row:last-child { border-bottom: none; }
.mig-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.mig-name { font-weight: 600; flex: 0 0 auto; }
.mig-status { flex: 1 1 auto; }
.mig-status.mig-ok { color: var(--success); font-weight: 600; }
.mig-status.mig-err { color: var(--danger); font-weight: 600; }

/* Project overview: total time tracked block */
.ov-timetotal { display: block; }
.ov-timetotal:hover { text-decoration: none; border-color: var(--primary); }
.ov-tt-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ov-tt-l { font-weight: 700; font-size: .95rem; display: inline-flex; align-items: center; gap: 8px; }
.ov-tt-l i { color: var(--primary); }
.ov-tt-link { font-size: .8rem; color: var(--primary); font-weight: 600; }
.ov-tt-n { display: block; font-family: var(--display); font-weight: 800; font-size: 1.9rem; line-height: 1.1; margin: 8px 0 4px; color: var(--ink); }

/* Connectors actions: buttons row + links row */
.conn-actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.conn-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.conn-links { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.conn-id-link { position: relative; }
.conn-id-link > summary { list-style: none; cursor: pointer; font-size: .84rem; color: var(--muted); font-weight: 600; }
.conn-id-link > summary::-webkit-details-marker { display: none; }
.conn-id-link[open] > summary { color: var(--ink); }
.conn-id-form { display: inline-flex; gap: 6px; margin-top: 8px; }
.conn-id-form input { width: 190px; }



/* Project People page */
.ppl-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 820px) { .ppl-grid { grid-template-columns: 1fr; } }
.ppl-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ppl-sec-head h3 { margin: 0; }
.ppl-selectall { display: inline-flex; align-items: center; gap: 7px; font-size: .85rem; font-weight: 600; color: var(--primary); cursor: pointer; }
.ppl-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px; max-height: 340px; overflow-y: auto; margin: 0 -6px; padding: 0 6px; }
.ppl-person { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 9px; cursor: pointer; transition: background .12s; }
.ppl-person:hover { background: var(--surface-2); }
.ppl-person input { flex: 0 0 auto; }
.ppl-person-name { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ppl-or { margin: 22px 0 10px; padding-top: 18px; border-top: 1px solid var(--line); }
.ppl-members { display: grid; gap: 2px; }
.ppl-member { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 9px; font-size: .92rem; }
.ppl-member:hover { background: var(--surface-2); }
.ppl-member-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ppl-owner { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: var(--surface-2); padding: 1px 7px; border-radius: 999px; }
.ppl-remove button { width: 24px; height: 24px; border: 1px solid var(--line-2); background: var(--surface); color: var(--muted); border-radius: 7px; cursor: pointer; font-size: 1rem; line-height: 1; flex: 0 0 auto; }
.ppl-remove button:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
.ppl-pending-h { margin: 18px 0 8px; }
.ppl-pending { color: var(--muted); }
.ppl-pending-ic i { color: var(--primary); }

/* Message notify selector */
.msg-notify-opt { display: inline-flex; align-items: center; gap: 7px; margin-right: 18px; font-size: .92rem; cursor: pointer; }
.msg-notify-preview { font-size: .86rem; font-weight: 600; color: var(--ink); background: var(--surface-2);
    border: 1px solid var(--line); border-radius: 9px; padding: 8px 12px; margin: 10px 0 0; }
.msg-recipients { margin-top: 12px; padding: 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.msg-recip-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.msg-recip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.msg-recip { position: relative; display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 10px;
    background: var(--surface); border: 1.5px solid var(--line-2); cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.msg-recip:hover { border-color: var(--line-2); box-shadow: var(--shadow); }
.msg-recip input { position: absolute; opacity: 0; pointer-events: none; }
.msg-recip-name { font-size: .88rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; }
.msg-recip-check { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface-2); color: transparent; font-size: .6rem; transition: background .12s, color .12s; }
.msg-recip:has(input:checked) { border-color: var(--primary); background: rgba(255,90,78,.06); }
.msg-recip:has(input:checked) .msg-recip-check { background: var(--primary); color: #fff; }

/* ===== Credentials vault ===== */
.vault-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-bottom: 18px; }
.vault-item { padding: 14px 16px; }
.vault-item-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.vault-label { font-weight: 600; font-size: .98rem; color: var(--ink); }
.vault-url { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--primary);
    text-decoration: none; word-break: break-all; margin-bottom: 10px; }
.vault-url:hover { text-decoration: underline; }
.vault-fields { display: flex; flex-direction: column; gap: 8px; }
.vault-field { display: flex; align-items: center; gap: 8px; }
.vault-k { flex: 0 0 54px; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.vault-v { flex: 1 1 auto; min-width: 0; font-family: var(--mono, ui-monospace, monospace); font-size: .86rem;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 5px 9px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.vault-secret { letter-spacing: .06em; }
.vault-reveal, .vault-copy { flex: 0 0 auto; background: transparent; border: 1px solid var(--line); border-radius: 8px;
    padding: 4px 8px; font-size: .9rem; line-height: 1; cursor: pointer; color: var(--muted); transition: border-color .12s, color .12s, background .12s; }
.vault-reveal:hover, .vault-copy:hover { border-color: var(--primary); color: var(--primary); background: var(--surface-2); }
.vault-notes { margin: 10px 0 0; }
.vault-add { margin-top: 4px; padding: 16px 18px; }
.vault-add > summary { cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--ink); list-style: none; display: inline-flex; align-items: center; gap: 7px; }
.vault-add > summary::-webkit-details-marker { display: none; }
.vault-add[open] > summary { margin-bottom: 12px; }
.vault-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; align-items: end; }
.vault-form > button { grid-column: 1 / -1; justify-self: start; }
.vault-edit { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.vault-edit > summary { cursor: pointer; list-style: none; font-size: .82rem; font-weight: 600; color: var(--muted);
    display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; }
.vault-edit > summary::-webkit-details-marker { display: none; }
.vault-edit > summary:hover { color: var(--primary); }
.vault-edit[open] > summary { margin-bottom: 12px; color: var(--ink); }

/* ===== Agency analytics ===== */
.an-rangebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 6px; }
.an-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.an-preset { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: .85rem; font-weight: 500;
    color: var(--muted); text-decoration: none; background: var(--surface); transition: border-color .12s, color .12s, background .12s; }
.an-preset:hover { border-color: var(--primary); color: var(--ink); }
.an-preset.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.an-custom { display: inline-flex; align-items: center; gap: 8px; }
.an-custom input[type=date] { padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: .85rem; }
.an-rangenote { margin: 0 0 18px; }

.an-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 22px; }
.an-kpi { padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.an-kpi-l { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.an-kpi-n { font-size: 2rem; font-weight: 700; line-height: 1.1; color: var(--ink); }
.an-kpi-u { font-size: 1.1rem; font-weight: 600; color: var(--muted); margin-left: 2px; }
.an-kpi.an-pos .an-kpi-n { color: var(--ok, #1a8f4c); }
.an-kpi.an-neg .an-kpi-n { color: var(--danger, #d23f3f); }

.an-table-wrap { overflow-x: auto; }
.an-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.an-table th { text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
    font-weight: 600; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.an-table td { padding: 11px 12px; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: middle; }
.an-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.an-table tbody tr:hover { background: var(--surface-2); }
.an-table tfoot .an-total td { font-weight: 700; border-top: 2px solid var(--line-2); border-bottom: none; }
.an-neg-t { color: var(--danger, #d23f3f); }

.an-person { display: flex; align-items: center; gap: 9px; }
.an-person > div { display: flex; flex-direction: column; line-height: 1.2; }
.an-person-n { font-weight: 600; color: var(--ink); text-decoration: none; }
a.an-person-n:hover { color: var(--primary); }
.an-person-d { font-size: .76rem; }
.an-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }

.an-bar-row { display: flex; align-items: center; gap: 9px; min-width: 140px; }
.an-bar { flex: 1 1 auto; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.an-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--primary); }
.an-bar-fill.band-low { background: #c9ccd1; }
.an-bar-fill.band-ok  { background: #3a8ee6; }
.an-bar-fill.band-hot { background: #e0663a; }
.an-bar-pct { flex: 0 0 38px; text-align: right; font-variant-numeric: tabular-nums; font-size: .82rem; color: var(--muted); }

.an-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.pill-good { background: rgba(26,143,76,.14); color: #1a8f4c; }
.pill-warn { background: rgba(214,158,46,.16); color: #b5851f; }
.pill-bad  { background: rgba(210,63,63,.14); color: #d23f3f; }

.an-rates { margin-top: 8px; padding: 16px 18px; }
.an-rates > summary { cursor: pointer; font-weight: 600; color: var(--ink); list-style: none; display: inline-flex; align-items: center; gap: 8px; }
.an-rates > summary::-webkit-details-marker { display: none; }
.an-rates[open] > summary { margin-bottom: 14px; }
.an-rates-defaults { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 10px; }
.an-rates-defaults .field { max-width: 240px; }
.an-rates-h { font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 16px 0 8px; }
.an-rates-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 16px; }
.an-rate-row { display: flex; align-items: center; gap: 10px; }
.an-rate-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; }
.an-rate-row input { flex: 0 0 100px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); text-align: right; }
.an-rates-form > button { margin-top: 16px; }

@media (max-width: 640px) {
    .an-rangebar { flex-direction: column; align-items: stretch; }
    .an-kpi-n { font-size: 1.6rem; }
}

/* ===== Workload: view toggle + 2-week forecast heatmap ===== */
.wl-viewtoggle { display: inline-flex; align-items: center; gap: 4px; padding: 4px; background: rgba(9,19,45,.04); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 18px; }
.wl-span-l { margin-left: 10px; text-transform: uppercase; letter-spacing: .06em; font-size: .7rem; }
.wl-vt { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 9px; font-size: .86rem; font-weight: 600; color: var(--muted); text-decoration: none; transition: .15s; }
.wl-vt:hover { color: var(--ink); }
.wl-vt.active { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.wl-fc-tip { margin: 0 0 14px; }
.wl-fc-wrap { padding: 0; overflow-x: auto; }
.wl-fc { border-collapse: collapse; width: 100%; font-size: .84rem; }
.wl-fc th, .wl-fc td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); text-align: center; }
.wl-fc th { font-size: .7rem; font-weight: 700; color: var(--muted); padding: 7px 6px; text-transform: uppercase; letter-spacing: .03em; position: sticky; top: 0; background: var(--surface); z-index: 1; }
.wl-fc-mon { display: block; font-size: .62rem; opacity: .65; font-weight: 600; }
.wl-fc-who { text-align: left; position: sticky; left: 0; background: var(--surface); z-index: 2; min-width: 140px; padding: 8px 12px; }
.wl-fc tbody .wl-fc-who { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.wl-fc tbody tr:hover td { background: var(--surface-2); }
.wl-fc tbody tr:hover .wl-fc-who { background: var(--surface-2); }
.wl-fc-od { min-width: 64px; padding: 6px 8px; }
.wl-fc-od .wl-over { color: #c0392b; font-weight: 700; font-size: .82rem; text-decoration: none; white-space: nowrap; }
.wl-fc-day { min-width: 30px; }
.wl-fc-wknd { background: rgba(9,19,45,.025); }
.wl-fc-cell { padding: 9px 4px; font-weight: 700; color: var(--ink); min-width: 30px; }
.wl-fc-cell.lvl-0 { color: transparent; }
.wl-fc-cell.lvl-1 { background: rgba(58,142,230,.16); }
.wl-fc-cell.lvl-2 { background: rgba(245,181,10,.28); }
.wl-fc-cell.lvl-4 { background: rgba(224,80,58,.34); color: #7a1f12; }
.wl-fc-tot { min-width: 44px; padding: 8px 10px; font-variant-numeric: tabular-nums; background: var(--surface); }
.wl-fc-key { display: inline-block; width: 13px; height: 13px; border-radius: 3px; vertical-align: middle; margin-right: 2px; }
.wl-fc-key.lvl-1 { background: rgba(58,142,230,.16); }
.wl-fc-key.lvl-2 { background: rgba(245,181,10,.28); }
.wl-fc-key.lvl-4 { background: rgba(224,80,58,.34); }
[data-theme="dark"] .wl-fc-cell.lvl-4 { color: #ffd9d0; }

/* ===== Monthly retainer checklist ===== */
.retainer-checklist { padding: 16px 18px; margin-bottom: 18px; }
.retainer-checklist > summary { cursor: pointer; font-weight: 600; color: var(--ink); list-style: none; display: inline-flex; align-items: center; gap: 8px; }
.retainer-checklist > summary::-webkit-details-marker { display: none; }
.retainer-checklist[open] > summary { margin-bottom: 6px; }
.retainer-form textarea { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--bg-2); color: var(--ink); resize: vertical; margin-bottom: 12px; }
.retainer-opts { display: flex; flex-wrap: wrap; align-items: end; gap: 14px; }
.retainer-opts .field { margin: 0; }
.retainer-opts .field span { display: block; font-size: .78rem; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.retainer-opts select, .retainer-opts input[type=number] { width: auto; min-width: 150px; }
.retainer-opts input[type=number] { min-width: 90px; }

/* ===== Sales pipeline (CRM-lite) ===== */
.pl-stats { display: flex; gap: 22px; }
.pl-stat { display: flex; flex-direction: column; }
.pl-stat-n { font-size: 1.5rem; font-weight: 800; color: var(--ink); line-height: 1.1; }
.pl-stat-l { font-size: .78rem; color: var(--muted); }
.pl-add { padding: 16px 18px; margin-bottom: 18px; }
.pl-add > summary { cursor: pointer; font-weight: 600; color: var(--ink); list-style: none; display: inline-flex; align-items: center; gap: 8px; }
.pl-add > summary::-webkit-details-marker { display: none; }
.pl-add[open] > summary { margin-bottom: 14px; }
.pl-add-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; align-items: end; }
.pl-add-form > button { grid-column: 1 / -1; justify-self: start; }
.pl-add-notes { grid-column: 1 / -1; }

/* align-items: stretch → every column is as tall as the tallest, so a card at
   the bottom of a full column can always be dropped onto a shorter column. */
.pl-board { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 14px; align-items: stretch; overflow-x: auto; padding-bottom: 6px; }
.pl-col { background: rgba(9,19,45,.03); border: 1px solid var(--line); border-radius: 14px; min-height: 120px; display: flex; flex-direction: column; }
.pl-col-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 8px; }
.pl-col-title { font-weight: 700; font-size: .9rem; color: var(--ink); }
.pl-col-meta { font-size: .76rem; color: var(--muted); font-weight: 600; }
.pl-col-won  { background: rgba(34,197,94,.06); border-color: rgba(34,197,94,.22); }
.pl-col-lost { background: rgba(120,130,145,.06); }
.pl-col-body { display: flex; flex-direction: column; gap: 9px; padding: 4px 10px 12px; flex: 1 1 auto; min-height: 60px; transition: background .12s; border-radius: 0 0 14px 14px; }
.pl-col-body.pl-over { background: rgba(255,90,78,.07); box-shadow: inset 0 0 0 2px rgba(255,90,78,.3); }
.pl-col-empty { text-align: center; padding: 18px 8px; border: 1px dashed var(--line-2); border-radius: 10px; }

.pl-card { background: var(--surface); border: 1px solid var(--line-2); border-radius: 11px; padding: 11px 12px; box-shadow: var(--shadow); cursor: grab; transition: box-shadow .12s, transform .06s; }
.pl-card:hover { box-shadow: 0 4px 14px rgba(9,19,45,.10); }
.pl-card.dragging { opacity: .5; cursor: grabbing; }
.pl-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pl-card-name { font-weight: 700; font-size: .92rem; color: var(--ink); }
.pl-card-fee { font-size: .8rem; font-weight: 700; color: #1a8f4c; white-space: nowrap; }
.pl-card-contact { margin-top: 2px; }
.pl-card-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.pl-card-src { font-size: .72rem; background: var(--surface-2); color: var(--muted); padding: 2px 7px; border-radius: 999px; white-space: nowrap;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: bottom; }
.pl-card-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.pl-convert { background: transparent; border: 1px solid var(--line-2); border-radius: 8px; padding: 3px 9px; font-size: .78rem; font-weight: 700; color: var(--primary); cursor: pointer; white-space: nowrap; }
.pl-convert:hover { background: rgba(255,90,78,.08); border-color: var(--primary); }
.pl-link { font-size: .78rem; font-weight: 600; color: var(--primary); text-decoration: none; white-space: nowrap; }
.pl-edit-toggle { background: transparent; border: 1px solid var(--line-2); border-radius: 8px; color: var(--muted); font-weight: 800; cursor: pointer; padding: 1px 8px; line-height: 1.3; }
.pl-edit-toggle:hover, .pl-edit-toggle.open { background: var(--surface-2); color: var(--ink); }
.pl-card-deliv { margin-top: 8px; display: flex; gap: 6px; align-items: start; }
.pl-edit-panel { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.pl-convert-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pl-convert-tpl { flex: 1 1 140px; min-width: 0; font-size: .82rem; padding: 7px 9px; width: auto; }
.pl-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pl-edit-panel .field span { font-size: .74rem; font-weight: 600; color: var(--muted); }
.pl-edit-panel textarea { width: 100%; font: inherit; padding: 7px 9px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-2); color: var(--ink); resize: vertical; }
.pl-edit-del { border-top: 1px solid var(--line); padding-top: 10px; }
.link-btn.danger { color: #d23f3f; }
@media (max-width: 760px) { .pl-board { grid-template-columns: repeat(4, minmax(200px, 1fr)); } .pl-stats { display: none; } }

/* ===== Client intake ===== */
.public-body { background: var(--bg, #f6f7f9); min-height: 100vh; }
.public-wrap { max-width: 720px; margin: 0 auto; padding: 32px 20px 60px; }
.public-head { text-align: center; margin-bottom: 22px; }
.public-brand { font-family: var(--display); font-weight: 800; font-size: 1.3rem; color: var(--ink); }
.public-logo { max-height: 46px; }
.public-foot { text-align: center; margin-top: 26px; }
.intake-card { padding: 28px 30px; }
.intake-card h1 { font-family: var(--display); font-size: 1.6rem; margin: 0 0 8px; }
.intake-h { font-size: 1rem; margin: 24px 0 12px; display: inline-flex; align-items: center; gap: 8px; }
.intake-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.intake-form .field { margin-bottom: 12px; }
.intake-form textarea { width: 100%; font: inherit; padding: 11px 14px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--bg-2); color: var(--ink); resize: vertical; }
.intake-logins { display: flex; flex-direction: column; gap: 12px; margin-bottom: 10px; }
.intake-login { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.intake-submit { margin-top: 22px; width: 100%; }
.intake-done { text-align: center; padding: 48px 30px; }
.intake-done-ic { font-size: 3rem; color: #22c55e; margin-bottom: 12px; }
.intake-done h1 { font-size: 1.5rem; }

.intake-link { padding: 16px 18px; }
.intake-link-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.intake-link-label { font-weight: 600; font-size: .85rem; color: var(--muted); white-space: nowrap; }
.intake-link-input { flex: 1 1 240px; font-family: var(--mono, monospace); font-size: .85rem; }
.intake-link-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.intake-list { display: flex; flex-direction: column; gap: 14px; }
.intake-item { padding: 16px 18px; }
.intake-item-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.intake-item-name { font-weight: 700; font-size: 1.02rem; color: var(--ink); margin-right: 8px; }
.intake-item-body { margin: 10px 0; display: flex; flex-direction: column; gap: 6px; }
.intake-meta { font-size: .9rem; }
.intake-goals { font-size: .92rem; }
.intake-item-actions { display: flex; align-items: center; gap: 14px; }
@media (max-width: 520px) { .intake-login { grid-template-columns: 1fr; } }

/* ===== Per-client goals / KPIs ===== */
.ov-goals-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ov-goals-add { position: relative; }
.ov-goals-add > summary { list-style: none; cursor: pointer; font-size: .82rem; }
.ov-goals-add > summary::-webkit-details-marker { display: none; }
.goal-form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; padding: 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; }
.goal-form .field span { font-size: .76rem; font-weight: 600; color: var(--muted); }
.goal-list { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.goal-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.goal-label { font-weight: 600; font-size: .9rem; color: var(--ink); }
.goal-nums { font-size: .86rem; color: var(--muted); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 6px; }
.goal-nums strong { color: var(--ink); }
.goal-badge { font-size: .68rem; font-weight: 800; padding: 1px 7px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; }
.goal-hit { background: rgba(34,197,94,.16); color: #15803d; }
.goal-late { background: rgba(210,63,63,.14); color: #d23f3f; }
.goal-bar { height: 7px; border-radius: 999px; background: rgba(9,19,45,.08); overflow: hidden; margin: 6px 0 5px; }
.goal-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--grad, var(--primary)); }
.goal-bar > span.goal-bar-hit { background: #22c55e; }
.goal-row-foot { display: flex; align-items: center; gap: 8px; }
.goal-del { margin-left: auto; }
.goal-del button { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 4px; }
.goal-del button:hover { color: #d23f3f; }

/* off / conflict cells in the workload forecast */
.wl-fc-cell.wl-fc-off { background: repeating-linear-gradient(45deg, rgba(120,130,145,.10), rgba(120,130,145,.10) 4px, rgba(120,130,145,.18) 4px, rgba(120,130,145,.18) 8px); color: var(--muted); }
.wl-fc-cell.wl-fc-conflict { background: repeating-linear-gradient(45deg, rgba(224,80,58,.18), rgba(224,80,58,.18) 4px, rgba(224,80,58,.30) 4px, rgba(224,80,58,.30) 8px); color: #7a1f12; }
.wl-fc-key.wl-fc-off { background: repeating-linear-gradient(45deg, rgba(120,130,145,.2), rgba(120,130,145,.2) 3px, rgba(120,130,145,.35) 3px, rgba(120,130,145,.35) 6px); }

/* ===== Availability / PTO ===== */
.av-add { padding: 16px 18px; }
.av-add > summary { cursor: pointer; font-weight: 600; color: var(--ink); list-style: none; display: inline-flex; align-items: center; gap: 8px; }
.av-add > summary::-webkit-details-marker { display: none; }
.av-add[open] > summary { margin-bottom: 12px; }
.av-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; align-items: end; }
.av-form > button { grid-column: 1 / -1; justify-self: start; }
.av-note { grid-column: 1 / -1; }
.av-list { padding: 6px 4px; }
.av-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.av-row:last-child { border-bottom: none; }
.av-emoji { font-size: 1.2rem; flex: 0 0 auto; }
.av-who { display: flex; align-items: center; gap: 9px; flex: 1 1 auto; min-width: 0; }
.av-who > div { display: flex; flex-direction: column; line-height: 1.25; }
.av-dates { font-size: .86rem; color: var(--ink); white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.av-now { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; background: rgba(245,181,10,.18); color: #b5851f; padding: 2px 7px; border-radius: 999px; }
.av-del { margin-left: 6px; }
.av-del button { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1.1rem; line-height: 1; }
.av-del button:hover { color: #d23f3f; }

/* SEO site audit */
.ov-tool-form { border: none; background: none; text-align: left; cursor: default; }
.ov-tool-form .ov-tool-go { border: none; background: none; cursor: pointer; font: inherit; color: var(--muted); }
.ov-audit-mode { font-size: .74rem; border: 1px solid var(--line); border-radius: 8px; padding: 3px 6px; background: var(--surface); color: var(--ink); max-width: 100%; }
/* SEO audit tool: keep the label on one line, drop the controls to their own row
   so it doesn't get crushed in the narrow sidebar. */
.ov-tool-form.ov-audit { flex-wrap: wrap; align-items: center; }
.ov-audit-controls { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; margin-left: 46px; flex-wrap: wrap; }
.ov-audit-controls .ov-audit-mode { flex: 1 1 auto; min-width: 0; }
.ov-audit-controls .ov-tool-go { flex: 0 0 auto; padding: 3px 8px; border: 1px solid var(--line); border-radius: 8px; font-size: .74rem; }
.ov-audit-sched { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 2px 12px 0 12px; }
.ov-audit-sched select { font-size: .74rem; border: 1px solid var(--line); border-radius: 8px; padding: 3px 6px; background: var(--surface); color: var(--ink); }
.sa-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sa-health { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 82px; height: 82px; border-radius: 50%; border: 4px solid; position: relative; }
.sa-health-n { font-size: 1.6rem; font-weight: 800; line-height: 1; }
.sa-health small { font-size: .6rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.sa-health-good { border-color: #16a34a; } .sa-health-good .sa-health-n { color: #15803d; }
.sa-health-watch { border-color: #d97706; } .sa-health-watch .sa-health-n { color: #b45309; }
.sa-health-risk { border-color: var(--danger, #dc2626); } .sa-health-risk .sa-health-n { color: #b91c1c; }
.sa-health-d { position: absolute; bottom: -8px; font-size: .66rem; font-weight: 800; padding: 0 6px; border-radius: 999px; background: var(--surface); }
.sa-health-d.up { color: #15803d; } .sa-health-d.down { color: #b91c1c; }
.sa-cwv { padding: 14px 18px; margin-bottom: 14px; }
.sa-cwv-h { font-weight: 800; display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.sa-cwv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.sa-cwv-metric { text-align: center; padding: 12px; border-radius: 12px; border: 1px solid var(--line); }
.sa-cwv-v { display: block; font-size: 1.4rem; font-weight: 800; }
.sa-cwv-l { display: block; font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.sa-cwv-good { background: rgba(22,163,74,.08); border-color: rgba(22,163,74,.3); } .sa-cwv-good .sa-cwv-v { color: #15803d; }
.sa-cwv-ni { background: rgba(217,119,6,.08); border-color: rgba(217,119,6,.3); } .sa-cwv-ni .sa-cwv-v { color: #b45309; }
.sa-cwv-poor { background: rgba(220,38,38,.07); border-color: rgba(220,38,38,.3); } .sa-cwv-poor .sa-cwv-v { color: #b91c1c; }
.sa-cwv-na .sa-cwv-v { color: var(--muted); }
@media (max-width: 560px) { .sa-cwv-grid { grid-template-columns: repeat(2, 1fr); } }
.sa-sitechecks { padding: 14px 18px; margin-bottom: 14px; }
.sa-sc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sa-sc-title { font-weight: 800; display: inline-flex; align-items: center; gap: 8px; }
.sa-sc-sum { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.sa-sc-chip { font-size: .76rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--surface-2); }
.sa-sc-chip-ok { color: #047857; background: rgba(22,163,74,.12); }
.sa-sc-chip-warn { color: #b45309; background: rgba(217,119,6,.13); }
.sa-sc-chip-fail { color: #b91c1c; background: rgba(220,38,38,.12); }
.sa-sc-chip-na { color: var(--muted); }
.sa-sc-flags { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px; margin-top: 12px; }
.sa-sc-allgood { margin: 12px 0 0; font-size: .88rem; font-weight: 600; color: #047857; display: flex; align-items: center; gap: 7px; }
.sa-sc-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.sa-sc-pill { display: inline-flex; align-items: center; gap: 5px; font-size: .76rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; cursor: default; }
.sa-sc-pill-ok { color: #047857; background: rgba(22,163,74,.09); }
.sa-sc-pill-ok .svg-inline--fa, .sa-sc-pill-ok i { font-size: .68rem; }
.sa-sc-pill-na { color: var(--muted); background: var(--surface-2); }
/* Sitemap health */
.sa-sitemap { padding: 14px 18px; margin-bottom: 14px; }
.sa-sitemap-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 700; flex-wrap: wrap; }
.sa-sitemap-clean { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 700; color: #047857; background: rgba(22,163,74,.12); border-radius: 999px; padding: 3px 11px; }
.sa-sitemap-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.sa-sm-stat { flex: 0 0 auto; display: flex; flex-direction: column; gap: 1px; min-width: 96px; padding: 9px 13px; border-radius: 10px; border: 1px solid var(--line); }
.sa-sm-n { font-size: 1.3rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.sa-sm-l { font-size: .74rem; color: var(--muted); }
.sa-sm-bad  { background: rgba(220,38,38,.06); } .sa-sm-bad .sa-sm-n { color: #b91c1c; }
.sa-sm-warn { background: rgba(217,119,6,.07); } .sa-sm-warn .sa-sm-n { color: #b45309; }
.sa-sm-info .sa-sm-n { color: var(--ink); }
.sa-sm-lists { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.sa-sm-list { border: 1px solid var(--line); border-radius: 9px; padding: 8px 12px; background: var(--surface); }
.sa-sm-list > summary { cursor: pointer; font-size: .84rem; font-weight: 600; display: flex; align-items: center; gap: 7px; list-style: none; }
.sa-sm-list > summary::-webkit-details-marker { display: none; }
.sa-sm-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--muted); }
.sa-sm-dot.sa-sm-bad { background: #dc2626; } .sa-sm-dot.sa-sm-warn { background: #d97706; } .sa-sm-dot.sa-sm-info { background: #64748b; }
.sa-sm-urls { margin: 8px 0 2px; padding: 0 0 0 16px; display: flex; flex-direction: column; gap: 3px; max-height: 260px; overflow-y: auto; }
.sa-sm-urls li { font-size: .82rem; line-height: 1.5; word-break: break-all; }
.sa-sm-urls a { color: var(--teal); text-decoration: none; } .sa-sm-urls a:hover { text-decoration: underline; }
.sa-sitemap-note { margin: 12px 0 0; }
.sa-scheck { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); }
.sa-sc-ic { flex: 0 0 auto; margin-top: 2px; }
.sa-sc-warn { background: rgba(217,119,6,.06); border-color: rgba(217,119,6,.25); }
.sa-sc-fail { background: rgba(220,38,38,.05); border-color: rgba(220,38,38,.25); }
.sa-sc-warn .sa-sc-ic { color: #d97706; } .sa-sc-fail .sa-sc-ic { color: var(--danger, #dc2626); }
.sa-sc-body { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.sa-sc-label { font-weight: 700; font-size: .86rem; }
.sa-sc-detail { line-height: 1.45; }
.sa-diff { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 18px; margin-bottom: 14px; }
.sa-diff-h { font-weight: 800; display: inline-flex; align-items: center; gap: 8px; }
.sa-diff-item { font-size: .84rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--surface-2); }
.sa-diff-good { color: #15803d; background: rgba(22,163,74,.12); }
.sa-diff-bad { color: #b91c1c; background: rgba(220,38,38,.1); }
.sa-new { font-size: .6rem; font-weight: 800; letter-spacing: .04em; background: #16a34a; color: #fff; border-radius: 4px; padding: 1px 5px; vertical-align: middle; }
.sa-progress { padding: 14px 18px; margin-bottom: 14px; }
.sa-prog-bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-bottom: 8px; }
.sa-prog-bar span { display: block; height: 100%; background: var(--primary); border-radius: 999px; transition: width .4s; }
.sa-prog-txt { font-size: .88rem; }
.sa-err { color: var(--danger, #dc2626); }
.sa-blocked-note { margin: 12px 0 0; padding: 14px 18px; border: 1px solid rgba(220, 38, 38, .35); background: rgba(220, 38, 38, .05); border-radius: 12px; font-size: .92rem; line-height: 1.55; }
.sa-blocked-note strong { display: block; margin-bottom: 3px; color: var(--danger, #dc2626); }
.sa-blocked-note code { background: rgba(9, 19, 45, .06); padding: 1px 6px; border-radius: 6px; font-size: .85em; }
.sa-live { margin-left: 8px; color: var(--primary); }
.sa-live .fa-spinner { animation: ip-spin 1s linear infinite; }
.sa-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.sa-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; font-size: .8rem; font-weight: 600; color: var(--ink); background: var(--surface); }
.sa-chip:hover { border-color: var(--primary); }
.sa-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.sa-chip-issue { color: #b91c1c; }
.sa-chip-issue.active { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.sa-chip-n { background: rgba(0,0,0,.08); border-radius: 999px; padding: 0 6px; font-size: .72rem; }
.sa-chip.active .sa-chip-n { background: rgba(255,255,255,.25); }
/* AI executive summary */
.sa-aisum { padding: 16px 20px; margin-bottom: 14px; border-left: 3px solid var(--primary); }
.sa-aisum-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 700; margin-bottom: 4px; }
.sa-aisum-overview { font-size: .98rem; line-height: 1.5; margin: 8px 0 0; }
.sa-aisum-recs { margin: 12px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; font-size: .92rem; }
.sa-aisum-recs li { padding-left: 3px; }
.sa-aisum-empty { margin: 6px 0 0; }
/* Health trend sparkline */
.sa-trend { padding: 16px 20px; margin-bottom: 14px; }
.sa-trend-h { font-weight: 700; display: flex; align-items: center; gap: 8px; }
.sa-trend-delta.up { color: #16a34a; } .sa-trend-delta.down { color: #dc2626; }
.sa-trend-svg { width: 100%; height: 150px; display: block; margin-top: 10px; }
.sa-trend-grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .7; }
.sa-trend-labels em { font-style: normal; font-weight: 700; margin-left: 6px; }
.sa-ovr-delta { font-size: .74rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; letter-spacing: 0; }
.sa-ovr-delta.is-good { color: #15803d; background: rgba(22, 163, 74, .14); }
.sa-ovr-delta.is-bad { color: #b91c1c; background: rgba(220, 38, 38, .12); }
.sa-ovr-spark { width: 84px; height: 24px; margin-top: 6px; opacity: .8; }
.sa-ovr-spark polyline { fill: none; stroke: var(--oc, #64748b); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sa-ovr-go:hover { box-shadow: 0 4px 14px color-mix(in srgb, var(--oc, #64748b) 20%, transparent); transform: translateY(-1px); }
.sa-ovr-tile { transition: box-shadow .12s, transform .12s; }
.sa-trend-good { color: #16a34a; } .sa-trend-watch { color: #d97706; } .sa-trend-risk { color: #dc2626; }
.sa-trend-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sa-trend-area { fill: currentColor; opacity: .12; stroke: none; }
.sa-trend-dot { fill: currentColor; }
.sa-trend-labels { display: flex; justify-content: space-between; margin-top: 4px; font-size: .74rem; color: var(--muted); }
/* Keyword cannibalization */
.sa-cannibal { padding: 14px 18px; margin-bottom: 14px; }
.sa-cannibal summary { cursor: pointer; font-weight: 700; }
.sa-cannibal-body { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.sa-cannibal-q { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.sa-cannibal-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 8px 12px; background: rgba(217,119,6,.08); flex-wrap: wrap; }
.sa-cannibal-term { font-weight: 700; }
.sa-cannibal-q .sa-gsc-table td { padding: 6px 12px; }
.sa-cannibal-note { margin: 12px 0 0; }
/* Issues-by-folder rollup */
.sa-folders { padding: 14px 18px; margin-bottom: 14px; }
.sa-folders summary { cursor: pointer; font-weight: 700; }
.sa-folders-body { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.sa-folder-row { display: grid; grid-template-columns: minmax(90px, 1.2fr) 2fr auto; align-items: center; gap: 12px; padding: 7px 10px; border-radius: 8px; text-decoration: none; color: var(--ink); }
.sa-folder-row:hover { background: var(--surface-2, rgba(0,0,0,.03)); }
.sa-folder-row.active { background: rgba(255,90,78,.08); box-shadow: inset 3px 0 0 var(--primary); }
.sa-folder-name { font-weight: 600; font-family: monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-folder-bar { height: 8px; border-radius: 999px; background: var(--surface-2, rgba(0,0,0,.06)); overflow: hidden; }
.sa-folder-bar span { display: block; height: 100%; background: #f59e0b; }
.sa-folder-n { font-size: .78rem; color: var(--muted); white-space: nowrap; }
/* Table toolbar (search / clear / count / PDF) */
.sa-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.sa-search { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; background: var(--surface); color: var(--muted); flex: 1; max-width: 320px; }
.sa-search input { border: none; background: none; outline: none; font: inherit; font-size: .86rem; color: var(--ink); width: 100%; }
.sa-clear { font-size: .8rem; font-weight: 600; color: var(--muted); text-decoration: none; }
.sa-clear:hover { color: var(--primary); }
.sa-toolbar-count { margin-left: auto; }
.sa-table th a { color: inherit; text-decoration: none; }
.sa-table th a:hover { color: var(--primary); }
.sa-table-wrap { overflow-x: auto; padding: 0; }
/* Print: turn the audit page into a clean PDF. */
@media print {
    .topbar, .breadcrumb, .sa-actions, .sa-toolbar, .sa-fix-btn, .sa-issue-fix, .sa-aisum-gen, .sa-prog-bar, .sa-share, .sa-bench-form, footer { display: none !important; }
    .page { margin: 0 !important; padding: 0 !important; max-width: none !important; }
    details > *:not(summary) { display: block !important; }
    .sa-table-wrap { overflow: visible !important; }
    .card, .sa-tier, .sa-table-wrap, .sa-folder-row, tr { box-shadow: none !important; break-inside: avoid; }
    .sa-table { font-size: 8.5pt; }
    body { background: #fff !important; }
    a { color: #000 !important; }
}
/* Fixed layout so the table always fits its card — columns truncate instead of
   forcing a horizontal scroll. */
.sa-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: .84rem; }
.sa-table .c-status { width: 62px; }
.sa-table .c-num { width: 52px; }
.sa-table .c-traf { width: 84px; }
.sa-table .c-idx { width: 52px; }
.sa-table .c-issues { width: 27%; }
.sa-table .c-url { width: 22%; }
.sa-table th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; padding: 11px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; position: sticky; top: 0; background: var(--surface-2, var(--surface)); z-index: 1; }
.sa-table td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; overflow: hidden; }
.sa-table tbody tr { transition: background .1s; }
.sa-table tbody tr:hover { background: var(--surface-2, rgba(0,0,0,.02)); }
.sa-table .c-num, .sa-num { text-align: right; }
/* Left severity stripe on the URL cell */
.sa-url { position: relative; padding-left: 18px !important; }
.sa-url::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: transparent; }
.sa-sev-error > .sa-url::before { background: #ef4444; }
.sa-sev-warning > .sa-url::before { background: #f59e0b; }
.sa-url-path { font-weight: 600; text-decoration: none; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-url-path:hover { color: var(--primary); }
/* Stacked Title & meta cell */
.sa-content { line-height: 1.3; }
.sa-content-line { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.sa-content-meta { margin-top: 2px; }
.sa-content-meta .sa-cell-t { color: var(--muted); font-size: .82rem; }
.sa-cell-t { flex: 1; min-width: 0; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.sa-px { flex: 0 0 auto; font-size: .64rem; color: var(--muted); background: var(--surface-2); border-radius: 5px; padding: 0 5px; white-space: nowrap; }
.sa-px::after { content: "px"; opacity: .6; }
.sa-px.over { color: #b45309; background: rgba(240,165,0,.14); }
.sa-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sa-flag { color: #b45309; font-weight: 700; }
.sa-code { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; font-weight: 700; font-size: .78rem; font-variant-numeric: tabular-nums; padding: 3px 8px; border-radius: 7px; }
.sa-code-ok { color: #15803d; background: rgba(22,163,74,.12); }
.sa-code-warn { color: #b45309; background: rgba(217,119,6,.13); }
.sa-code-bad { color: #b91c1c; background: rgba(220,38,38,.10); }
.sa-idx-cell { text-align: center; }
.sa-idx { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; font-size: .7rem; }
.sa-idx-yes { color: #15803d; background: rgba(22,163,74,.12); }
.sa-idx-no { color: #b91c1c; background: rgba(220,38,38,.10); }
.sa-issues { max-width: 300px; }
.sa-badge-more { background: var(--surface-2, rgba(0,0,0,.06)); color: var(--muted); cursor: default; }
.sa-badge { display: inline-block; margin: 1px 3px 1px 0; font-size: .68rem; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: rgba(220,38,38,.1); color: #b91c1c; }
.sa-badge-err { background: rgba(120,120,120,.15); color: var(--muted); }
/* Severity-tiered issue badges (error/warning/notice) */
.sa-badge-error   { background: rgba(220,38,38,.10); color: #b91c1c; }
.sa-badge-warning { background: rgba(217,119,6,.12); color: #b45309; }
.sa-badge-notice  { background: rgba(100,116,139,.14); color: #475569; }
/* SEMrush-style Errors / Warnings / Notices breakdown */
.sa-breakdown { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
.sa-allpages { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: .82rem; font-weight: 600; color: var(--ink); background: var(--surface); }
.sa-allpages.active { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.sa-tier { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
/* Tinted tier header bar + faint section wash, so severity reads as color. */
.sa-tier-h { display: flex; align-items: center; gap: 9px; margin: 0; padding: 11px 16px; font-size: .92rem; font-weight: 800; letter-spacing: .01em; border-bottom: 1px solid var(--line); }
.sa-tier-dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.sa-tier-n { font-size: .82rem; font-weight: 800; opacity: .7; }
.sa-breakdown-intro { margin: 0 0 10px; line-height: 1.5; max-width: 760px; }
.sa-tier-desc { font-weight: 500; font-size: .76rem; }
@media (max-width: 680px) { .sa-tier-desc { display: none; } }
.sa-tier-error   .sa-tier-h { background: rgba(220,38,38,.10); color: #b91c1c; }
.sa-tier-error   .sa-tier-dot { background: #ef4444; }
.sa-tier-warning .sa-tier-h { background: rgba(217,119,6,.12); color: #b45309; }
.sa-tier-warning .sa-tier-dot { background: #f59e0b; }
.sa-tier-notice  .sa-tier-h { background: rgba(100,116,139,.12); color: #475569; }
.sa-tier-notice  .sa-tier-dot { background: #64748b; }
.sa-tier-rows { display: flex; flex-direction: column; }
.sa-issue { border-bottom: 1px solid var(--line); }
.sa-issue:last-child { border-bottom: none; }
.sa-issue:nth-child(even) { background: var(--surface-2, rgba(0,0,0,.015)); }
.sa-issue-main { display: flex; align-items: center; gap: 12px; padding: 10px 16px; }
.sa-issue-main:hover { background: rgba(255,90,78,.05); }
.sa-issue-link { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); font-size: .88rem; flex: 1; min-width: 0; }
.sa-issue-cnt { flex: 0 0 auto; font-weight: 800; font-size: 1rem; font-variant-numeric: tabular-nums; text-align: right; min-width: 56px; }
.sa-issue-link.active .sa-issue-cnt, .sa-issue-link:hover .sa-issue-cnt { color: var(--primary); }
.sa-issue-label { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-issue-fix { flex: 0 0 auto; margin-left: auto; border: 1px solid var(--line); background: var(--surface); color: var(--primary); font: inherit; font-size: .76rem; font-weight: 600; cursor: pointer; padding: 3px 10px; border-radius: 999px; }
.sa-issue-fix:hover { border-color: var(--primary); background: var(--primary); color: #fff; }
.sa-issue-fix.open { color: var(--muted); }
.sa-issue-new { flex: 0 0 auto; font-size: .7rem; font-weight: 700; color: #b45309; background: rgba(240,165,0,.16); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
/* Team triage on issue rows: create-tasks button, in-progress badge, WP deep-link */
.sa-issue-taskbtn { flex: 0 0 auto; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: .76rem; font-weight: 600; cursor: pointer; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.sa-issue-taskbtn:hover { border-color: var(--primary); color: var(--primary); }
.sa-issue-tasked { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 700; color: #6d28d9; background: rgba(124,58,237,.1); border-radius: 999px; padding: 3px 10px; text-decoration: none; white-space: nowrap; }
.sa-issue-tasked.is-done { color: #047857; background: rgba(22,163,74,.12); }
.sa-issue-tasked:hover { filter: brightness(.94); }
.sa-issue-wp { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 700; color: #1d4ed8; background: rgba(37,99,235,.09); border: 1px solid rgba(37,99,235,.25); border-radius: 999px; padding: 2px 10px; text-decoration: none; white-space: nowrap; }
.sa-issue-wp:hover { background: #1d4ed8; color: #fff; }
.sa-issue-recheck { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: .74rem; font-weight: 600; cursor: pointer; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.sa-issue-recheck:hover { border-color: #047857; color: #047857; }
/* De-clutter: 18 rows × 4 pill buttons is a wall. On pointer devices the
   secondary actions fade in on row hover/focus; How-to-fix and the triage
   badge stay visible. Touch devices keep everything visible. */
@media (hover: hover) {
    .sa-issue .sa-issue-taskbtn, .sa-issue .sa-issue-recheck, .sa-issue .sa-issue-wp, .sa-issue .sa-ignore-form { opacity: 0; transition: opacity .12s; }
    .sa-issue:hover .sa-issue-taskbtn, .sa-issue:hover .sa-issue-recheck, .sa-issue:hover .sa-issue-wp, .sa-issue:hover .sa-ignore-form,
    .sa-issue:focus-within .sa-issue-taskbtn, .sa-issue:focus-within .sa-issue-recheck, .sa-issue:focus-within .sa-issue-wp, .sa-issue:focus-within .sa-ignore-form { opacity: 1; }
}

/* On-page brief: tech-audit overlay for the target page */
.op-tech-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.op-tech-list li { display: flex; align-items: flex-start; gap: 9px; padding: 8px 11px; border-radius: 9px; border: 1px solid var(--line); font-size: .88rem; }
.op-tech-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; background: var(--muted); }
.op-tech-error { background: rgba(220,38,38,.05); border-color: rgba(220,38,38,.22); } .op-tech-error .op-tech-dot { background: #dc2626; }
.op-tech-warning { background: rgba(217,119,6,.05); border-color: rgba(217,119,6,.22); } .op-tech-warning .op-tech-dot { background: #d97706; }
.op-tech-notice .op-tech-dot { background: #64748b; }
.op-tech-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.op-tech-clean { margin: 4px 0 0; font-size: .88rem; font-weight: 600; color: #047857; display: flex; align-items: center; gap: 7px; }
.op-tech-link { margin: 10px 0 0; }
.op-tech-siteflags { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.op-tech-siteflags-h { display: block; font-size: .8rem; font-weight: 800; margin-bottom: 8px; }

/* Audit form: crawl-exclude patterns fold */
.ov-excl { flex-basis: 100%; }
.ov-excl > summary { cursor: pointer; font-size: .78rem; font-weight: 600; color: var(--muted); list-style: none; }
.ov-excl > summary::-webkit-details-marker { display: none; }
.ov-excl textarea { width: 100%; margin: 6px 0 2px; font: inherit; font-size: .8rem; border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; }

/* Client reports: print / save-as-PDF */
@media print {
    .no-print, .pub-cta, .pub-comments, form, button { display: none !important; }
    body { background: #fff !important; }
    .pub-card, .rgp-insight, .op-pub-card { break-inside: avoid; box-shadow: none !important; }
}
.pub-printbtn { position: fixed; right: 18px; bottom: 18px; z-index: 50; border: 1px solid var(--line); background: var(--surface, #fff); color: inherit; font: inherit; font-size: .82rem; font-weight: 700; padding: 8px 14px; border-radius: 999px; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.pub-printbtn:hover { filter: brightness(.97); }

/* On-page brief: Search Console for this page */
.op-gsc-stats { display: flex; gap: 22px; flex-wrap: wrap; margin: 4px 0 10px; }
.op-gsc-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.op-gsc-table th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 4px 8px; border-bottom: 1px solid var(--line); }
.op-gsc-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); }
.op-gsc-table tr:last-child td { border-bottom: 0; }
.op-gsc-n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.op-gsc-kw td { background: rgba(37,99,235,.06); font-weight: 600; }
.op-gsc-target { font-size: .68rem; font-weight: 800; text-transform: uppercase; color: #1d4ed8; background: rgba(37,99,235,.12); border-radius: 999px; padding: 1px 7px; margin-left: 6px; }

/* GSC panels: deep link into a prefilled on-page brief */
.sa-gsc-brief { margin-left: 8px; font-size: .74rem; font-weight: 700; color: var(--teal); text-decoration: none; white-space: nowrap; }
.sa-gsc-brief:hover { text-decoration: underline; }

/* "What changed" receipt: fixed vs new since the previous crawl */
.sa-changes { padding: 14px 18px; margin-bottom: 14px; }
.sa-changes-h { font-weight: 800; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sa-changes-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.sa-links-empty { padding: 18px; margin-bottom: 14px; }
.sa-links-empty h3 { margin: 0 0 6px; font-size: 1rem; display: flex; align-items: center; gap: 8px; }

/* Font Awesome failed to load (blocked kit / ad blocker): swap every icon
   for its emoji fallback so buttons never render as empty shapes. */
.sa-changes-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 12px; }
.sa-changes-col h4 { margin: 0 0 8px; font-size: .86rem; display: flex; align-items: center; gap: 7px; }
.sa-changes-good h4 { color: #047857; } .sa-changes-bad h4 { color: #b91c1c; }
.sa-change { border: 1px solid var(--line); border-radius: 9px; padding: 7px 11px; margin-bottom: 6px; background: var(--surface); }
.sa-changes-good .sa-change { background: rgba(22,163,74,.04); border-color: rgba(22,163,74,.2); }
.sa-changes-bad .sa-change { background: rgba(220,38,38,.03); border-color: rgba(220,38,38,.2); }
.sa-change > summary { cursor: pointer; font-size: .84rem; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 8px; }
.sa-change > summary::-webkit-details-marker { display: none; }
.sa-change > summary em { font-style: normal; font-size: .74rem; font-weight: 700; color: var(--muted); margin-left: auto; white-space: nowrap; }
.sa-change-urls { margin: 8px 0 2px; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; max-height: 220px; overflow-y: auto; }
.sa-change-urls li { font-size: .8rem; word-break: break-all; }
.sa-change-urls a { color: var(--teal); text-decoration: none; } .sa-change-urls a:hover { text-decoration: underline; }

/* Severity distribution graph + per-issue bars + filter banner */
.sa-sevcard { padding: 14px 16px; margin-bottom: 14px; }
.sa-sevcard-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-weight: 800; font-size: .92rem; margin-bottom: 10px; }
.sa-sevbar { display: flex; height: 28px; border-radius: 7px; overflow: hidden; background: var(--surface-2, #f1f5f9); gap: 1px; }
.sa-sevseg { display: flex; align-items: center; justify-content: center; color: #fff; font-size: .74rem; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 2px; text-decoration: none; transition: width .3s ease, filter .12s; position: relative; }
.sa-sevseg:hover { filter: brightness(1.08); }
.sa-sevseg.active { box-shadow: inset 0 0 0 2px rgba(255,255,255,.85); }
.sa-sevseg-error { background: #ef4444; }
.sa-sevseg-warning { background: #f59e0b; }
.sa-sevseg-notice { background: #64748b; }
.sa-issue-trend { flex: 0 0 auto; display: inline-flex; align-items: center; }
.sa-isspark { width: 52px; height: 16px; fill: none; }
.sa-isspark polyline { stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.sa-isspark-up polyline { stroke: #ef4444; }
.sa-isspark-down polyline { stroke: #16a34a; }
.sa-isspark-flat polyline { stroke: #94a3b8; }
.sa-sevlegend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 11px; font-size: .82rem; }
.sa-sevleg-item { display: flex; align-items: center; gap: 6px; text-decoration: none; color: var(--ink); }
.sa-sevleg-item:hover { text-decoration: underline; }
.sa-sevleg-dot { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.sa-sevleg-dot.is-error { background: #ef4444; }
.sa-sevleg-dot.is-warning { background: #f59e0b; }
.sa-sevleg-dot.is-notice { background: #64748b; }
.sa-issue-bar { height: 4px; margin: 0 16px 8px; border-radius: 3px; background: rgba(100,116,139,.12); overflow: hidden; }
.sa-issue-bar-fill { display: block; height: 100%; border-radius: 3px; transition: width .3s ease; }
.sa-issue-bar-fill.is-error { background: #ef4444; }
.sa-issue-bar-fill.is-warning { background: #f59e0b; }
.sa-issue-bar-fill.is-notice { background: #94a3b8; }
.sa-tier { scroll-margin-top: 74px; }
.sa-filterbar { position: sticky; top: 8px; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; margin-bottom: 10px; border-radius: 9px; background: var(--surface, #fff); border: 1px solid rgba(37,99,235,.4); box-shadow: 0 2px 10px rgba(0,0,0,.07); font-size: .9rem; }
.sa-filterbar-l { display: flex; align-items: center; gap: 7px; min-width: 0; }
.sa-filterbar strong { font-weight: 800; }
.sa-filterbar-clear { text-decoration: none; font-weight: 700; color: var(--primary, #2563eb); white-space: nowrap; }
.sa-filterbar-clear:hover { text-decoration: underline; }
#sa-results { scroll-margin-top: 70px; }
.sa-alliss-btn { flex: 0 0 auto; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font: inherit; font-size: .7rem; font-weight: 700; cursor: pointer; padding: 1px 8px; border-radius: 999px; }
.sa-alliss-btn:hover, .sa-alliss-btn.on { border-color: var(--primary); color: var(--primary); }
.sa-alliss-detail td { padding: 8px 16px 10px; background: var(--surface-2, rgba(0,0,0,.02)); }
.sa-alliss-lbl { font-size: .74rem; font-weight: 700; color: var(--muted); margin-right: 8px; }
.sa-alliss-detail .sa-badge { margin: 2px 4px 2px 0; }
.sa-rel { margin-top: 6px; font-size: .8rem; line-height: 1.9; }
.sa-rel-lbl { font-size: .74rem; font-weight: 700; color: var(--muted); margin-right: 8px; }
.sa-rel-url { display: inline-block; margin: 0 6px 2px 0; padding: 1px 7px; border-radius: 6px; background: var(--surface, #fff); border: 1px solid var(--line-2, #e2e8f0); color: var(--teal, #0f766e); text-decoration: none; font-size: .78rem; }
.sa-rel-url:hover { text-decoration: underline; }
.sa-rel-url.sa-rel-bad { color: #dc2626; border-color: rgba(220,38,38,.35); }
.sa-rel-note { font-size: .82rem; color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ov-audits h3 { margin: 0 0 10px; }
.ov-audit-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--ink); border: 1px solid var(--line); margin-bottom: 6px; }
.ov-audit-row:last-child { margin-bottom: 0; }
a.ov-audit-row:hover { border-color: var(--teal); }
.ov-audit-l { font-weight: 600; font-size: .88rem; display: inline-flex; align-items: center; gap: 7px; }
.ov-audit-none { opacity: .7; }
.cron-warn { display: flex; gap: 10px; align-items: flex-start; max-width: 1180px; margin: 14px auto 0; padding: 12px 16px;
    border: 1px solid rgba(220,38,38,.35); background: rgba(220,38,38,.06); border-radius: 12px; font-size: .9rem; }
.cron-warn > svg, .cron-warn > i { color: #dc2626; margin-top: 1px; flex: 0 0 auto; }
.cron-warn a { color: var(--teal); font-weight: 600; }
.ms-recurring { border: 1px solid var(--line); border-radius: 12px; background: rgba(240,165,0,.05); padding: 12px 16px; margin: 0 0 16px; }
.ms-recurring-h { font-weight: 700; font-size: .84rem; margin-bottom: 6px; display: flex; align-items: center; gap: 7px; color: var(--ink); }
.ms-recur-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.ms-recurring-h + .ms-recur-row { border-top: 0; }
.ms-recur-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.ms-recur-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.ms-recur-content { font-weight: 600; }
.ms-recur-meta a { color: var(--teal); text-decoration: none; } .ms-recur-meta a:hover { text-decoration: underline; }
/* ---- Project connectors: tools bar + connector status tiles ---- */
.conn-control { margin: 4px 0 4px; }
.conn-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; padding: 0 0 16px; border-bottom: 1px solid var(--line); }
.conn-tools-h { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-right: 2px; }
.conn-tool-more { position: relative; }
.conn-tool-more > summary { list-style: none; cursor: pointer; }
.conn-tool-more > summary::-webkit-details-marker { display: none; }
.conn-tool-form { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; width: 260px; display: flex; flex-direction: column; gap: 8px;
    padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 12px 34px rgba(16,24,40,.16); }
.conn-tool-form input { width: 100%; }
.conn-tool-form-row { display: flex; align-items: center; gap: 12px; }
.conn-tool-checks { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .8rem; }
.conn-tool-checks label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
/* ---- Modernized Tools & Sources internals ---- */
/* Tools row: the label gets its own line; buttons read as tidy action cards. */
.conn-panel[data-panel="tools"] .conn-tools { gap: 10px; align-items: center; }
.conn-panel[data-panel="tools"] .conn-tools-h { width: 100%; margin: 0 0 4px; }
.conn-panel[data-panel="tools"] .conn-tools .btn,
.conn-panel[data-panel="tools"] .conn-tools .conn-tool-more > summary {
    padding: 9px 15px; font-size: .87rem; font-weight: 600; border-radius: 11px;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.conn-panel[data-panel="tools"] .conn-tools .btn-ghost,
.conn-panel[data-panel="tools"] .conn-tools .conn-tool-more > summary {
    background: var(--surface); border: 1px solid var(--line); color: var(--ink); box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.conn-panel[data-panel="tools"] .conn-tools .btn-ghost:hover,
.conn-panel[data-panel="tools"] .conn-tools .conn-tool-more > summary:hover {
    border-color: var(--line-2); box-shadow: 0 4px 12px rgba(16,24,40,.09); transform: translateY(-1px); }
.conn-panel[data-panel="tools"] .conn-tools .conn-tool-more[open] > summary { border-color: var(--primary); color: var(--primary); }

.conn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); gap: 12px; }
/* Sources tiles: tinted per-state icon, a status chip, and a clear pull CTA. */
.conn-tile { padding: 12px 14px; border-radius: 14px; }
.conn-tile--live .conn-tile-ic { background: rgba(47,158,68,.12); color: #2f9e44; }
.conn-tile--needs .conn-tile-ic { background: rgba(232,137,11,.13); color: #e8890b; }
.conn-tile-meta { padding: 2px 9px 2px 8px; border-radius: 999px; font-weight: 600; background: var(--surface-2); white-space: nowrap; }
.conn-tile--live .conn-tile-meta { background: rgba(47,158,68,.1); }
.conn-tile--needs .conn-tile-meta { background: rgba(232,137,11,.1); }
/* Not pulled yet → nudge Pull as the call-to-action (tinted, fills on hover);
   once live, Refresh is quiet so a fresh project isn't a wall of solid buttons. */
.conn-tile--idle .conn-pull:not([disabled]) { background: rgba(255,90,78,.1); border-color: rgba(255,90,78,.4); color: var(--primary); font-weight: 600; }
.conn-tile--idle .conn-pull:not([disabled]):hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.conn-tile--live .conn-tile-act .conn-pull { color: var(--muted); }
.conn-tile { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
    transition: border-color .12s, box-shadow .12s; }
.conn-tile:hover { border-color: var(--line-2); box-shadow: 0 2px 12px rgba(16,24,40,.06); }
.conn-tile-ic { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; font-size: 1.05rem;
    background: var(--bg-subtle, rgba(127,127,127,.1)); line-height: 1; }
.conn-tile-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.conn-tile-name { font-weight: 700; font-size: .88rem; line-height: 1.2; overflow-wrap: break-word; }
.conn-tile-meta { font-size: .71rem; display: inline-flex; align-items: center; gap: 5px; color: var(--muted); white-space: nowrap; }
.conn-tile-meta::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.conn-tile--live .conn-tile-meta { color: #2f9e44; }
.conn-tile--needs .conn-tile-meta { color: #e8890b; }
.conn-tile--idle .conn-tile-meta { color: var(--muted); }
.conn-tile-act { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.conn-tile-act .conn-pull { white-space: nowrap; }
.conn-tile .conn-id-link { position: relative; }
.conn-tile .conn-id-link > summary { font-size: .8rem; white-space: nowrap; }
.conn-tile .conn-id-form { position: absolute; z-index: 40; top: calc(100% + 6px); right: 0; display: flex; flex-direction: column; align-items: stretch;
    width: 240px; gap: 8px; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 12px 34px rgba(16,24,40,.16); }
.conn-tile .conn-id-form input, .conn-tile .conn-id-form select { width: 100%; }
@media (max-width: 560px) { .conn-grid { grid-template-columns: 1fr; } .conn-tile .conn-id-form, .conn-tool-form { width: 220px; } }

.conn-audits { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.conn-audit { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line-2, #e2e8f0); background: var(--surface); color: var(--ink); text-decoration: none; font-size: .82rem; font-weight: 600; }
.conn-audit:hover { border-color: var(--teal); }
.gbp-audit-run { display: inline-flex; align-items: center; gap: 4px; }
.gbp-audit-loc { width: 96px; padding: 5px 8px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--surface); color: var(--ink); font-size: .82rem; }
/* Public client report — issue distribution */
.pub-sevbar { display: flex; height: 26px; border-radius: 7px; overflow: hidden; background: #eef2f7; gap: 1px; }
.pub-sevseg { display: flex; align-items: center; justify-content: center; color: #fff; font-size: .74rem; font-weight: 800; }
.pub-sevseg-error { background: #ef4444; }
.pub-sevseg-warning { background: #f59e0b; }
.pub-sevseg-notice { background: #64748b; }
.pub-sevlegend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 11px; font-size: .84rem; }
.pub-sevleg { display: flex; align-items: center; gap: 6px; }
.pub-sevdot { width: 11px; height: 11px; border-radius: 3px; }
.plugin-hr { border: none; border-top: 1px solid var(--line); margin: 14px 0; }
.plugin-inline-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
/* Summit risk radar */
.sm-radar { display: flex; flex-direction: column; gap: 12px; }
.sm-radar-row { border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 11px; padding: 14px 16px; background: var(--surface); }
.sm-radar-high { border-left-color: #ef4444; }
.sm-radar-med { border-left-color: #f59e0b; }
.sm-radar-low { border-left-color: #64748b; }
.sm-radar-head { display: flex; align-items: center; gap: 12px; }
.sm-radar-score { flex: 0 0 auto; min-width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 10px; font-weight: 800; font-size: 1.05rem; color: #fff; background: #64748b; font-variant-numeric: tabular-nums; }
.sm-radar-high .sm-radar-score { background: #ef4444; }
.sm-radar-med .sm-radar-score { background: #f59e0b; }
.sm-radar-title { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.sm-radar-title a { text-decoration: none; color: var(--ink); }
.sm-radar-title a:hover { text-decoration: underline; }
.sm-radar-reasons { list-style: none; margin: 11px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.sm-radar-reasons li { font-size: .88rem; line-height: 1.45; }
.sm-radar-flag { font-weight: 700; }
.sm-radar-foot { margin-top: 14px; }
.sm-radar-empty { text-align: center; padding: 40px 20px; }
.sm-radar-empty-ic { font-size: 2.2rem; color: #16a34a; display: block; margin-bottom: 8px; }
.summit-action { margin-top: 10px; padding: 10px 12px; border: 1px dashed var(--primary, #2563eb); border-radius: 9px; background: rgba(37,99,235,.05); }
.summit-action-l { font-weight: 700; font-size: .88rem; margin-bottom: 8px; }
.summit-action-btns { display: flex; gap: 8px; }
.summit-action-res { margin-top: 10px; }
/* Site audit portfolio overview */
.sa-ov-tiles { display: grid; grid-template-columns: repeat(auto-fit,minmax(130px,1fr)); gap: 12px; margin: 4px 0 16px; }
.sa-ov-tile { border: 1px solid var(--line); border-radius: 11px; padding: 14px 16px; background: var(--surface); display: flex; flex-direction: column; gap: 2px; }
.sa-ov-tile--bad { border-color: color-mix(in srgb, var(--danger,#dc2626) 40%, var(--line)); background: color-mix(in srgb, var(--danger,#dc2626) 6%, var(--surface)); }
.sa-ov-n { font-size: 1.7rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.sa-ov-tile--bad .sa-ov-n { color: var(--danger,#dc2626); }
.sa-ov-l { font-size: .8rem; color: var(--muted); }
.sa-ov-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.sa-ov-table-wrap { padding: 0; overflow-x: auto; }
.sa-ov-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.sa-ov-table th, .sa-ov-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.sa-ov-table th.num, .sa-ov-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.sa-ov-table thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.sa-ov-table tbody tr:hover { background: var(--surface-2, rgba(0,0,0,.02)); }
.sa-ov-acct { text-decoration: none; color: var(--ink); }
.sa-ov-acct:hover { text-decoration: underline; }
.sa-ov-acct + .muted { margin-left: 6px; }
.sa-ov-nodom { margin-left: 6px; font-size: .7rem; color: #b45309; background: rgba(240,165,0,.16); border-radius: 999px; padding: 1px 7px; }
.sa-ov-badge { font-size: .74rem; font-weight: 700; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.sa-ov-badge--on { color: #15803d; background: rgba(22,163,74,.14); }
.sa-ov-badge--off { color: var(--muted); background: rgba(100,116,139,.12); }
.sa-ov-health { font-weight: 800; padding: 2px 9px; border-radius: 7px; }
.sa-ov-good { color: #15803d; background: rgba(22,163,74,.14); }
.sa-ov-watch { color: #b45309; background: rgba(217,119,6,.14); }
.sa-ov-risk { color: #b91c1c; background: rgba(220,38,38,.12); }
.sa-ov-delta.up { color: #16a34a; font-weight: 700; }
.sa-ov-delta.down { color: #dc2626; font-weight: 700; }
/* AI Agents */
.ag-enable { padding: 22px; text-align: center; }
.ag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-bottom: 20px; }
.ag-card { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.ag-head { display: flex; gap: 12px; align-items: flex-start; }
.ag-ic { font-size: 1.4rem; color: var(--primary, #2563eb); flex: 0 0 auto; }
.ag-head h3 { margin: 0; font-size: 1rem; }
.ag-run > summary, .ag-prompt > summary { cursor: pointer; display: inline-flex; width: fit-content; }
.ag-run > summary { list-style: none; }
.ag-run > summary::-webkit-details-marker { display: none; }
.ag-form { display: flex; flex-direction: column; gap: 9px; margin-top: 10px; }
.ag-prompt { margin-top: 4px; }
.ag-prompt-ta { font-family: ui-monospace, monospace; font-size: .8rem; }
.ag-recent-h { font-size: 1.05rem; margin: 8px 0 10px; }
.ag-runs { padding: 4px 0; }
.ag-run-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.ag-run-row:last-child { border-bottom: none; }
.ag-run-row:hover { background: var(--surface-2, rgba(0,0,0,.02)); }
.ag-run-agent { font-weight: 700; font-size: .85rem; flex: 0 0 auto; }
.ag-run-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.ag-inputs { padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.ag-input-chip { font-size: .8rem; background: var(--surface-2, rgba(0,0,0,.04)); border-radius: 999px; padding: 3px 10px; }
.ag-report { padding: 22px 26px; line-height: 1.6; }
.ag-report h1, .ag-report h2, .ag-report h3 { margin-top: 1.2em; }
.ag-report table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.ag-report th, .ag-report td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; font-size: .9rem; }
.sa-issue-newbadge { flex: 0 0 auto; font-size: .6rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--primary); border-radius: 5px; padding: 1px 6px; }
.sa-issue-hint { padding: 2px 16px 12px 84px; font-size: .82rem; color: var(--ink-2, var(--muted)); display: flex; gap: 7px; align-items: baseline; }
.sa-issue-hint[hidden] { display: none; }
/* AI fix drafts */
.sa-fix-btn { display: inline-block; margin: 2px 0 1px; font-size: .68rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--primary); background: transparent; color: var(--primary); cursor: pointer; white-space: nowrap; }
.sa-fix-btn:hover { background: var(--primary); color: #fff; }
.sa-fix-btn.on { background: var(--primary); color: #fff; }
.sa-fix-btn:disabled { opacity: .6; cursor: default; }
.sa-fix-detail td { background: var(--surface-2, rgba(0,0,0,.02)); padding: 0 14px 14px; }
.sa-fix-card { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; }
.sa-fix-row { display: flex; align-items: flex-start; gap: 10px; }
.sa-fix-k { flex: 0 0 92px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); padding-top: 2px; }
.sa-fix-k em { display: block; font-style: normal; font-weight: 500; opacity: .8; }
.sa-fix-v { flex: 1; font-size: .9rem; color: var(--ink); }
.sa-fix-list ul { margin: 4px 0 0; padding-left: 18px; font-size: .86rem; }
.sa-fix-list li { margin: 3px 0; }
.sa-copy { flex: 0 0 auto; font-size: .68rem; font-weight: 600; padding: 2px 9px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; }
.sa-copy:hover { color: var(--ink); border-color: var(--primary); }
.sa-fix-err { padding: 12px 0; color: #b91c1c; font-size: .88rem; }
/* Internal-link opportunities */
.sa-links { padding: 14px 18px; margin-bottom: 14px; }
.sa-links summary { cursor: pointer; font-weight: 700; }
.sa-links-body { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.sa-link-op { padding: 10px 0; border-top: 1px solid var(--line); }
.sa-link-op:first-child { border-top: none; }
.sa-link-target { display: flex; align-items: center; gap: 8px; font-weight: 600; flex-wrap: wrap; }
.sa-link-in { flex: 0 0 auto; font-size: .68rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: rgba(220,38,38,.1); color: #b91c1c; }
.sa-link-srcs { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-top: 6px; padding-left: 4px; }
.sa-link-src { display: inline-flex; align-items: center; gap: 5px; font-size: .84rem; }
.sa-anchor-btn { font-size: .66rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--primary); background: transparent; color: var(--primary); cursor: pointer; }
.sa-anchor-btn:hover { background: var(--primary); color: #fff; }
.sa-anchor-btn:disabled { opacity: .6; }
.sa-anchor-out { flex-basis: 100%; margin: 4px 0 2px; padding: 8px 10px; background: var(--surface-2, rgba(0,0,0,.02)); border-radius: 8px; font-size: .86rem; }
.sa-anchor-a { font-weight: 700; color: var(--primary); }
.sa-anchor-s { color: var(--ink); }
/* JS-render toggle + badge */
.ov-audit-render { display: inline-flex; align-items: center; gap: 3px; font-size: .72rem; font-weight: 600; color: var(--muted); cursor: pointer; }
.ov-audit-render input { margin: 0; }
.sa-render-tag { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; color: var(--primary); }
/* Traffic-weighted priorities */
.sa-priorities { padding: 14px 18px; margin-bottom: 14px; }
.sa-prio-h { font-weight: 700; margin-bottom: 10px; }
.sa-prio-list { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.sa-prio-list li { padding: 4px 0; }
.sa-prio-list > li > a { font-weight: 600; }
.sa-prio-traf { display: inline-block; margin: 0 8px; font-size: .72rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: rgba(16,185,129,.12); color: #047857; }
.sa-prio-iss { display: inline; }
.sa-fix-detail-inline { margin-top: 8px; padding: 4px 12px; background: var(--surface-2, rgba(0,0,0,.02)); border-radius: 8px; }
/* Ranking keywords under a URL */
.sa-kws { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.sa-kw { font-size: .66rem; padding: 0 6px; border-radius: 999px; background: var(--surface-2, rgba(0,0,0,.05)); color: var(--muted); }
.sa-kw em { font-style: normal; font-weight: 700; color: var(--primary); }
/* Traffic column */
.sa-th-traf a.active { color: var(--primary); }
.sa-traf { white-space: nowrap; }
.sa-traf-bar { display: inline-block; width: 42px; height: 6px; border-radius: 3px; background: rgba(0,0,0,.08); overflow: hidden; vertical-align: middle; margin-right: 5px; }
.sa-traf-bar span { display: block; height: 100%; background: #10b981; }
.sa-traf-n { font-size: .74rem; font-weight: 600; color: var(--ink); }
/* Search Console panels */
.sa-gsc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; margin-bottom: 14px; }
.sa-gsc { padding: 14px 16px; }
.sa-gsc-h { font-weight: 700; margin-bottom: 10px; }
.sa-gsc-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.sa-gsc-table th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); padding: 4px 8px; border-bottom: 1px solid var(--line); }
.sa-gsc-table td { padding: 5px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.sa-gsc-table tr:last-child td { border-bottom: none; }
.sa-gsc-table tbody tr { transition: background .12s; }
.sa-gsc-table tbody tr:hover { background: var(--surface-2, rgba(0,0,0,.02)); }
.sa-gsc-q { font-weight: 600; word-break: break-word; line-height: 1.35; }
.sa-gsc-p { max-width: 210px; vertical-align: middle; white-space: nowrap; }
.sa-gsc-p a { color: var(--ink); display: inline-block; max-width: 168px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; text-decoration: none; }
.sa-gsc-p a:hover { text-decoration: underline; }
.sa-gsc-n { text-align: right; white-space: nowrap; vertical-align: middle; font-variant-numeric: tabular-nums; color: var(--muted); }
.sa-gsc-cc { text-align: center; white-space: nowrap; vertical-align: middle; }
/* Rank chip */
.sa-pos { display: inline-block; min-width: 34px; padding: 2px 7px; border-radius: 6px; font-weight: 700; font-size: .78rem; font-variant-numeric: tabular-nums; }
.sa-pos-good { background: rgba(22,163,74,.12); color: #15803d; }
.sa-pos-warn { background: rgba(217,119,6,.13); color: #b45309; }
.sa-pos-far  { background: var(--surface-2, #eef2f7); color: var(--muted); }
.sa-ctr-a { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
/* Fix button: subtle, reveals on row hover, never overflows the cell */
.sa-gsc-table .sa-fix-btn { border: 0; background: transparent; padding: 0 3px; margin-left: 3px; font-size: .82rem; line-height: 1; opacity: .4; transition: opacity .12s; }
.sa-gsc-table tbody tr:hover .sa-fix-btn { opacity: .8; }
.sa-gsc-table .sa-fix-btn:hover { opacity: 1; background: transparent; }
.sa-gsc-table .sa-fix-btn.on { opacity: 1; }
.sa-gsc-ctr { font-weight: 600; }
.sa-gsc-chip em { color: #1a73e8; }
.sa-gsc-table .sa-fix-btn { padding: 0 5px; margin-left: 2px; }
/* Competitor benchmark */
.sa-bench { padding: 14px 18px; margin-bottom: 14px; }
.sa-bench-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sa-bench-form { display: flex; gap: 6px; }
.sa-bench-form input { padding: 5px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: .85rem; }
.sa-bench-meta { margin: 8px 0 6px; }
.sa-bench-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.sa-bench-table th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); padding: 5px 10px; border-bottom: 1px solid var(--line); }
.sa-bench-table td { padding: 6px 10px; border-bottom: 1px solid var(--line); }
.sa-bench-table tr:last-child td { border-bottom: none; }
.sa-bench-n { font-weight: 700; font-variant-numeric: tabular-nums; }
.sa-bench-n.good { color: #047857; }
.sa-bench-n.bad { color: #b91c1c; }
.sa-bench-flag { font-size: .78rem; color: var(--muted); }
.sa-bench-gap { margin-top: 14px; }
.sa-gap-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.sa-gap-chip { font-size: .76rem; padding: 2px 9px; border-radius: 999px; background: var(--surface-2, rgba(0,0,0,.05)); color: var(--ink); }
.sa-gap-chip em { font-style: normal; font-weight: 700; color: var(--muted); }
/* Client-report share box */
.sa-share { padding: 12px 18px; margin-bottom: 14px; }
.sa-share-l { font-weight: 700; }
.sa-share-row { display: flex; gap: 6px; margin-top: 8px; align-items: center; }
.sa-share-row input { flex: 1; min-width: 0; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2, rgba(0,0,0,.03)); color: var(--ink); font-size: .82rem; font-family: monospace; }
/* Public (client-facing) audit report */
.pub-audit { display: flex; flex-direction: column; gap: 18px; }
.pub-audit-head h1 { margin: 2px 0; font-size: 1.7rem; }
.pub-eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 700; color: var(--brand, #ff5a4e); margin: 0; }
.pub-score-row { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.pub-score { flex: 0 0 auto; width: 150px; padding: 18px; border-radius: 16px; text-align: center; color: #fff; }
.pub-score-good { background: var(--grade-a); } .pub-score-watch { background: var(--grade-c); } .pub-score-risk { background: var(--grade-f); }
.pub-score-n { display: block; font-size: 3rem; font-weight: 800; line-height: 1; }
.pub-score-l { display: block; font-size: .8rem; opacity: .95; margin-top: 4px; }
.pub-score-d { display: block; font-size: .72rem; margin-top: 6px; font-weight: 600; }
.pub-score-notes { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 8px; }
.pub-note { font-size: .95rem; }
.pub-note-good { color: #047857; }
.pub-card { border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
.pub-card h2 { font-size: 1.05rem; margin: 0 0 12px; }
.pub-issues { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: .98rem; }
.pub-issues li { padding-left: 4px; }
.pub-checks-sum { float: right; font-size: .8rem; font-weight: 700; color: #047857; background: rgba(16,185,129,.1); border-radius: 999px; padding: 3px 11px; }
.pub-checks-flags { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px; }
.pub-check { display: flex; align-items: flex-start; gap: 9px; font-size: .92rem; padding: 10px 13px; border-radius: 10px; border: 1px solid rgba(0,0,0,.08); }
.pub-check-ic { margin-top: 2px; }
.pub-check-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pub-check-l { font-weight: 700; }
.pub-check-d { font-size: .82rem; opacity: .75; line-height: 1.45; }
.pub-check-warn { background: rgba(245,158,11,.07); border-color: rgba(245,158,11,.3); }
.pub-check-fail { background: rgba(239,68,68,.06); border-color: rgba(239,68,68,.3); }
.pub-check-ok .pub-check-ic { color: #10b981; } .pub-check-warn .pub-check-ic { color: #f59e0b; }
.pub-check-fail .pub-check-ic { color: #ef4444; }
.pub-checks-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pub-check-pill { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 600; color: #047857; background: rgba(16,185,129,.09); border-radius: 999px; padding: 3px 11px; }
.pub-speed { display: flex; align-items: center; gap: 14px; }
.pub-speed-n { font-size: 2rem; font-weight: 800; }
.pub-speed-n small { font-size: 1rem; font-weight: 500; opacity: .6; }
.pub-speed-good .pub-speed-n { color: #10b981; } .pub-speed-ni .pub-speed-n { color: #f59e0b; } .pub-speed-poor .pub-speed-n { color: #ef4444; }
.pub-audit-foot { margin-top: 4px; }

/* Smart notification triage — Today's focus */
.hey-focus { padding: 16px 20px; margin-bottom: 18px; border-left: 4px solid var(--primary); }
.hey-focus-h { font-weight: 800; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.hey-focus-h i { color: var(--primary); }
.hey-focus-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hey-focus-row { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 10px; text-decoration: none; color: inherit; }
.hey-focus-row:hover { background: rgba(9,19,45,.03); }
.hey-focus-tag { flex: 0 0 auto; font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; }
.hey-ft-overdue { background: rgba(220,38,38,.14); color: #b91c1c; }
.hey-ft-urgent { background: rgba(234,88,12,.16); color: #c2410c; }
.hey-ft-today { background: rgba(240,165,0,.18); color: #b45309; }
.hey-ft-reply { background: rgba(31,111,235,.14); color: #1d4ed8; }
.hey-focus-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
.hey-focus-go { flex: 0 0 auto; color: var(--muted); }

/* Recurring suggestions */
.rc-list { display: flex; flex-direction: column; gap: 10px; max-width: 900px; }
.rc-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; }
.rc-main { min-width: 0; }
.rc-content { font-weight: 600; margin-bottom: 4px; }
.rc-form { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.rc-form select { padding: 6px 10px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-2); color: var(--ink); font-size: .85rem; }
@media (max-width: 620px) { .rc-row { flex-direction: column; align-items: stretch; } }

/* Smart staffing suggestion — quick-add inline */
.add-todo-suggest { margin: -2px 0 6px; padding: 7px 11px; border-radius: 9px; background: rgba(31,111,235,.06); border: 1px dashed var(--primary); font-size: .82rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.add-todo-suggest .ats-use { margin-left: auto; border: none; background: var(--primary); color: #fff; font-size: .74rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; cursor: pointer; }
.add-todo-suggest .ats-use:hover { filter: brightness(1.05); }

/* Smart staffing suggestion */
.task-suggest { display: flex; align-items: center; gap: 14px; margin: 12px 0 4px; padding: 12px 16px; border: 1px dashed var(--primary); border-radius: 12px; background: rgba(31,111,235,.05); }
.task-suggest-ic { flex: 0 0 auto; color: var(--primary); font-size: 1.1rem; }
.task-suggest-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.task-suggest-h { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--primary); }
.task-suggest-line { font-size: .88rem; }

/* Who's in the building */
.pr-count { font-size: 1rem; font-weight: 800; background: #16a34a; color: #fff; border-radius: 999px; padding: 2px 12px; vertical-align: middle; }
.pr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.pr-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); text-decoration: none; color: inherit; transition: border-color .12s, transform .12s; }
.pr-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.pr-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pr-name { font-weight: 700; }
.pr-in { font-size: .8rem; color: #15803d; display: inline-flex; align-items: center; gap: 6px; margin-top: 3px; }
.pr-foot { margin-top: 16px; }

/* PTO balances */
.av-balance { padding: 16px 20px; margin-bottom: 16px; }
.av-balance-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.av-balance-t { font-size: 1rem; margin: 0; display: flex; align-items: center; gap: 8px; }
.av-allow-form { display: flex; align-items: center; gap: 8px; font-size: .85rem; }
.av-allow-form input { width: 64px; padding: 5px 8px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-2); color: var(--ink); }
.av-bal-list { display: flex; flex-direction: column; gap: 8px; }
.av-bal-row { display: grid; grid-template-columns: 150px 1fr 130px; gap: 12px; align-items: center; }
.av-bal-who { display: inline-flex; align-items: center; gap: 7px; font-size: .88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av-bal-bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.av-bal-bar span { display: block; height: 100%; border-radius: 999px; }
.av-bal-ok span { background: #16a34a; }
.av-bal-warn span { background: #d97706; }
.av-bal-over span { background: var(--danger, #dc2626); }
.av-bal-n { text-align: right; white-space: nowrap; }
@media (max-width: 560px) { .av-bal-row { grid-template-columns: 110px 1fr; } .av-bal-n { grid-column: 2; text-align: left; } }

/* PTO request/approval */
.av-pending { padding: 16px 18px; margin-bottom: 16px; border: 1px solid rgba(245,181,10,.4); background: rgba(245,181,10,.05); }
.av-pending-h { display: flex; align-items: center; gap: 8px; font-size: 1rem; margin: 0 0 12px; }
.av-pending-h i { color: #b5851f; }
.av-pending-n { background: #b5851f; color: #fff; font-size: .72rem; font-weight: 800; border-radius: 999px; padding: 1px 8px; }
.av-prow { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.av-prow:last-child { border-bottom: none; }
.av-prow .av-who { flex: 1 1 auto; }
.av-decide { display: flex; gap: 8px; flex: 0 0 auto; }
.av-badge { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; background: rgba(245,181,10,.18); color: #b5851f; padding: 1px 7px; border-radius: 999px; vertical-align: middle; }
.av-row.av-is-pending { opacity: .72; }

/* ===== Client approvals / proofing ===== */
.ap-list { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.ap-item { padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.ap-item-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ap-item-title { font-weight: 600; font-size: .9rem; color: var(--ink); }
.ap-badge { font-size: .68rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.ap-badge.ap-pending { background: rgba(120,130,145,.16); color: var(--muted); }
.ap-badge.ap-approved { background: rgba(34,197,94,.16); color: #15803d; }
.ap-badge.ap-changes { background: rgba(245,181,10,.18); color: #b5851f; }
.ap-item-resp { margin: 6px 0 0; font-style: italic; }
.ap-item-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.ap-item-foot .ap-del { margin-left: auto; }
.ap-del button { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1.1rem; line-height: 1; }
.ap-del button:hover { color: #d23f3f; }
.ap-item-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; word-break: break-all; }
.ap-edit > summary { list-style: none; cursor: pointer; }
.ap-edit > summary::-webkit-details-marker { display: none; }
.ap-edit[open] { flex-basis: 100%; order: 1; }
.ap-edit-form { margin-top: 8px; }

/* public approval page */
.ap-public h1 { font-family: var(--display); font-size: 1.5rem; margin: 6px 0 12px; }
.ap-body { font-size: .98rem; line-height: 1.6; color: var(--ink); margin-bottom: 18px; }
.ap-review-link { margin-bottom: 22px; }
.ap-form .field span { font-weight: 600; font-size: .85rem; }
.ap-form textarea { width: 100%; font: inherit; padding: 11px 14px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--bg-2); color: var(--ink); resize: vertical; }
.ap-actions { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.ap-approve { background: #22c55e; border-color: #22c55e; }
.ap-status { margin-top: 16px; padding: 14px 16px; border-radius: 10px; font-weight: 600; }
.ap-status.ap-approved { background: rgba(34,197,94,.12); color: #15803d; }
.ap-status.ap-changes { background: rgba(245,181,10,.14); color: #b5851f; }
.ap-thanks { text-align: center; padding: 30px 10px; }

/* Pipeline table view */
.pl-tbadge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .74rem; font-weight: 700; }
.pl-tbadge.pl-col-lead { background: rgba(58,142,230,.14); color: #2f6fb0; }
.pl-tbadge.pl-col-proposal { background: rgba(245,181,10,.18); color: #b5851f; }
.pl-tbadge.pl-col-won { background: rgba(34,197,94,.16); color: #15803d; }
.pl-tbadge.pl-col-lost { background: rgba(120,130,145,.16); color: var(--muted); }
.pl-trow-actions { display: flex; align-items: center; gap: 10px; justify-content: flex-end; white-space: nowrap; }
.stage-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Notification preferences */
.notif-prefs { margin: 8px 0 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.notif-prefs-h { display: block; font-weight: 700; font-size: .92rem; color: var(--ink); }
.notif-prefs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 16px; margin-top: 12px; }
.notif-pref { display: flex; align-items: center; gap: 9px; font-size: .88rem; cursor: pointer; }
.notif-pref input { width: 17px; height: 17px; accent-color: var(--teal); flex: 0 0 auto; }

/* Intake form builder + custom fields */
.intake-fields-editor { padding: 16px 18px; }
.intake-fields-editor > summary { cursor: pointer; font-weight: 600; color: var(--ink); list-style: none; display: inline-flex; align-items: center; gap: 8px; }
.intake-fields-editor > summary::-webkit-details-marker { display: none; }
.intake-fields-editor[open] > summary { margin-bottom: 8px; }
.ifx-rows { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.ifx-row { display: grid; grid-template-columns: 1.4fr 1fr 1.4fr auto auto; gap: 8px; align-items: center; }
.ifx-row input[type=text], .ifx-row select { padding: 7px 9px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-2); color: var(--ink); font-size: .85rem; }
.ifx-req { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; color: var(--muted); white-space: nowrap; }
.ifx-del { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1.2rem; line-height: 1; }
.ifx-del:hover { color: #d23f3f; }
.ifx-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.intake-check { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0; cursor: pointer; }
.intake-check input { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--teal); }
.intake-answers { margin: 8px 0 0; padding-left: 18px; font-size: .9rem; }
.intake-answers li { margin: 2px 0; }
@media (max-width: 620px) { .ifx-row { grid-template-columns: 1fr 1fr; } }

/* Pipeline labels, import, report */
.pl-chip { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .7rem; font-weight: 700; color: #fff; }
.pl-chip-fu { background: var(--surface-2); color: var(--muted); }
.pl-chip-over { background: rgba(210,63,63,.15); color: #d23f3f; }
.pl-card-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.pl-card-org { margin-top: 3px; display: flex; gap: 5px; align-items: center; }
.pl-import-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.pl-import-form input[type=file] { font-size: .85rem; }
.pl-import-sep { border: none; border-top: 1px solid var(--line); margin: 14px 0; }
.pl-import-opt { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--muted); width: 100%; }
.pl-report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.pl-report-card { padding: 16px 18px; }
.pl-report-card h3 { margin: 0 0 12px; font-size: 1rem; }
.pl-report-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.pl-report-table th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 4px 8px; border-bottom: 1px solid var(--line); }
.pl-report-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.pl-report-table tbody tr { transition: background .12s; }
.pl-report-table tbody tr:hover td { background: var(--surface-2); }
.pl-report-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.pl-report-table tr:last-child td { border-bottom: none; }
.pl-report-table td:first-child { position: relative; }
.pl-rep-bar { position: absolute; left: 0; top: 4px; bottom: 4px; background: rgba(255,90,78,.10); border-radius: 5px; z-index: 0; }
.pl-rep-name { position: relative; z-index: 1; font-weight: 500; }

/* ===== Lead detail + timeline ===== */
.ld-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ld-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.ld-stage-move { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 12px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 999px; flex-wrap: wrap; }
.ld-move-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ld-stage-btn { border: 1px solid var(--line-2); background: var(--bg-2); color: var(--ink); cursor: pointer;
    font: inherit; font-size: .8rem; font-weight: 600; padding: 4px 11px; border-radius: 999px; transition: .12s; }
.ld-stage-btn:hover { border-color: var(--ink); background: var(--surface-2); }
.ld-cta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ld-convert { display: inline-flex; align-items: center; gap: 8px; }
.ld-convert-tpl { max-width: 170px; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 9px;
    background: var(--surface); font: inherit; font-size: .86rem; color: var(--ink); }
@media (max-width: 720px) { .ld-actions { align-items: stretch; } .ld-cta, .ld-stage-move { justify-content: flex-start; } }
.ld-grid { display: grid; grid-template-columns: 1fr 320px; gap: 22px; align-items: start; }
.ld-compose { padding: 14px 16px; margin-bottom: 20px; }
.ld-compose textarea { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg-2); color: var(--ink); resize: vertical; margin-bottom: 10px; }
.ld-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ld-kind { position: relative; }
.ld-kind input { position: absolute; opacity: 0; }
.ld-kind span { display: inline-block; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line-2); font-size: .82rem; font-weight: 600; color: var(--muted); cursor: pointer; }
.ld-kind input:checked + span { background: var(--primary); border-color: var(--primary); color: #fff; }
.ld-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.ld-timeline::before { content: ''; position: absolute; left: 15px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.ld-tl-item { display: flex; gap: 14px; padding: 0 0 18px; position: relative; }
.ld-tl-ic { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line-2); display: inline-flex; align-items: center; justify-content: center; font-size: .9rem; z-index: 1; }
.ld-tl-body { flex: 1 1 auto; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 13px; }
.ld-tl-head { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.ld-tl-time { margin-left: auto; }
.ld-tl-del { }
.ld-tl-del button { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1; opacity: 0; transition: opacity .12s; }
.ld-tl-item:hover .ld-tl-del button { opacity: 1; }
.ld-tl-del button:hover { color: #d23f3f; }
.ld-tl-body p { margin: 0; white-space: pre-wrap; }
.ld-tl-editwrap { margin-top: 6px; }
.ld-tl-editwrap > summary { font-size: .8rem; color: var(--muted); opacity: 0; transition: opacity .12s; }
.ld-tl-item:hover .ld-tl-editwrap > summary, .ld-tl-editwrap[open] > summary { opacity: 1; }
.ld-tl-editform { display: grid; gap: 8px; margin-top: 8px; }
.ld-tl-editform textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel, #fff); color: var(--ink); }
.ld-tl-editform .btn { justify-self: start; }
.ld-bg-notes { padding: 16px 18px; margin-top: 14px; }
.ld-bg-notes h3 { margin: 0 0 4px; font-size: 1rem; }
.ld-bg-notes > p:last-child { margin: 8px 0 0; white-space: pre-wrap; }
.et-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 900px) { .et-grid { grid-template-columns: 1fr; } }
.et-email, .et-form { padding: 18px 20px; }
.et-email-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.et-email-time { margin-left: auto; }
.et-email-subject { margin: 6px 0 10px; font-weight: 700; }
.et-email-body { border-top: 1px solid var(--line); padding-top: 10px; font-size: .92rem; line-height: 1.55; color: var(--ink); max-height: 420px; overflow: auto; white-space: pre-wrap; }
.ld-contact { padding: 16px 18px; }
.ld-contact h3 { margin: 0 0 12px; font-size: 1rem; }
.ld-field { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .88rem; }
.ld-field:last-of-type { border-bottom: none; }
.ld-field-l { color: var(--muted); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ld-field-v { text-align: right; color: var(--ink); word-break: break-word; }
.ld-edit { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.ld-edit > summary { cursor: pointer; }
.pl-note-badge { font-size: .68rem; font-weight: 700; color: var(--muted); background: var(--surface-2); padding: 1px 6px; border-radius: 999px; margin-left: 4px; }
.pl-card-edit { margin-left: auto; color: var(--muted); text-decoration: none; padding: 2px 6px; border-radius: 6px; }
.pl-card-edit:hover { background: var(--surface-2); color: var(--primary); }
.pl-name-link { text-decoration: none; color: var(--ink); }
.pl-name-link:hover strong { color: var(--primary); }
@media (max-width: 820px) { .ld-grid { grid-template-columns: 1fr; } }

/* Pipeline table: wrap cells so the wide table fits the page (no cut-off) */
.stage-simple th, .stage-simple td { white-space: normal; }
.stage-simple td .muted.small { display: block; }
.pl-col-more { display: block; text-align: center; padding: 9px; font-size: .82rem; font-weight: 600; color: var(--primary); text-decoration: none; border: 1px dashed var(--line-2); border-radius: 10px; margin-top: 4px; }
.pl-col-more:hover { background: var(--surface-2); }

/* Pipeline inbound-email hint */
.pl-inbox-hint { font-size: .86rem; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; line-height: 1.5; }
.pl-inbox-addr { background: var(--surface); border: 1px solid var(--line-2); border-radius: 6px; padding: 1px 7px; font-family: var(--mono, monospace); font-size: .85rem; color: var(--primary); cursor: pointer; }
.pl-inbox-addr:hover { border-color: var(--primary); }
.ld-inbox { margin: 0 0 12px; }

/* ===== Sales priority (follow-ups + activity) ===== */
.sp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.sp-followups, .sp-activity { padding: 14px 16px; }
.sp-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.sp-head h2 { font-size: 1.02rem; margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.sp-count { background: var(--primary); color: #fff; font-size: .72rem; font-weight: 800; border-radius: 999px; padding: 1px 8px; }
.sp-empty { padding: 14px 4px; display: flex; align-items: center; gap: 8px; }
.sp-list { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; }
.sp-item { display: flex; align-items: center; gap: 8px; padding: 9px 6px; border-bottom: 1px solid var(--line); }
.sp-item:last-child { border-bottom: none; }
.sp-item-main { flex: 1 1 auto; min-width: 0; text-decoration: none; display: flex; flex-direction: column; gap: 1px; }
.sp-item-name { font-weight: 600; color: var(--ink); }
.sp-item-main:hover .sp-item-name { color: var(--primary); }
.sp-item-why { font-size: .8rem; color: var(--muted); }
.sp-reason { font-weight: 600; }
.sp-over .sp-reason { color: #d23f3f; }
.sp-done button { background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 8px; color: var(--muted); cursor: pointer; padding: 5px 9px; line-height: 1; }
.sp-done button:hover { border-color: #16a34a; color: #16a34a; background: rgba(34,197,94,.08); }
.sp-feed { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; }
.sp-feed-item { display: flex; gap: 10px; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.sp-feed-item:last-child { border-bottom: none; }
.sp-feed-ic { flex: 0 0 auto; font-size: .95rem; }
.sp-feed-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sp-feed-lead { font-weight: 600; color: var(--ink); text-decoration: none; }
.sp-feed-lead:hover { color: var(--primary); }
.sp-feed-text { font-size: .85rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) { .sp-grid { grid-template-columns: 1fr; } }

/* Dark mode: Live activity button + timer pill weren't adapting (washed out) */
[data-theme="dark"] .feed-fab {
    background: var(--surface-2); color: var(--ink);
    border: 1px solid var(--line-2); box-shadow: 0 12px 30px rgba(0,0,0,.5);
}
[data-theme="dark"] .feed-fab:hover { background: #26344f; }
[data-theme="dark"] .timer-pill,
[data-theme="dark"] .timer-pill:hover { background: rgba(248,113,113,.16); color: #fca5a5; }

/* Project banner: actions menu (archive/delete) + archived badge */
/* Keep the avatars + actions menu together on the right, never wrapping the
   menu alone to the left (where its popover would clip off-screen). */
/* Must be allowed to shrink and wrap: search + a capped avatar stack + invites
   + menu can exceed the viewport on laptops if this is flex:0 0 auto — the
   "people go off screen" bug. */
.proj-banner-right { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
/* Client contact card in the banner's top right — always in reach. */
.proj-client-card { display: flex; flex-direction: column; gap: 3px; background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.26); border-radius: 12px; padding: 8px 12px;
    max-width: 250px; min-width: 0; font-size: .78rem; backdrop-filter: blur(2px); }
.pcc-row { display: flex; align-items: center; gap: 7px; color: #fff; min-width: 0; }
.pcc-row .pcc-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.pcc-row:hover .pcc-t { text-decoration: underline; }
/* Search hugs the LEFT of its row; avatars + menu keep the right edge. */
.proj-banner-right .proj-search { flex: 0 1 230px; min-width: 150px; margin-right: auto; }
.proj-banner-right .member-stack { flex: 0 1 auto; min-width: 0; justify-content: flex-end; }
.proj-banner-menu { position: relative; flex: 0 0 auto; align-self: center; }
.proj-menu-btn { list-style: none; cursor: pointer; width: 34px; height: 34px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; line-height: 1; font-weight: 700;
    color: #fff; background: rgba(9,19,45,.42); border: 1px solid rgba(255,255,255,.5);
    box-shadow: 0 2px 8px rgba(0,0,0,.20); backdrop-filter: blur(2px); }
.proj-menu-btn::-webkit-details-marker { display: none; }
.proj-menu-btn:hover { background: rgba(9,19,45,.62); }
.proj-menu-pop { right: 0; left: auto; top: 40px; width: 220px; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.proj-menu-pop form { margin: 0; }
.proj-menu-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: none; border: none;
    font: inherit; font-size: .9rem; color: var(--ink); padding: 9px 11px; border-radius: 8px; cursor: pointer; text-decoration: none; }
.proj-menu-item:hover { background: var(--surface-2); }
.proj-menu-item.danger { color: #d23f3f; }
.proj-menu-item.danger:hover { background: rgba(210,63,63,.10); }
.proj-archived-badge { display: inline-block; vertical-align: middle; font-size: .62rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .05em; background: rgba(255,255,255,.22); color: #fff; padding: 3px 9px; border-radius: 999px; margin-left: 10px; }

/* Completed to-dos: make the count badge a clear reveal affordance */
.count-badge-btn { cursor: pointer; border: 1px solid var(--line-2); background: var(--surface-2); font: inherit;
    transition: border-color .12s, color .12s; }
.count-badge-btn:hover { border-color: #16a34a; color: #15803d; }
#todos.show-done .count-badge-btn { border-color: #16a34a; color: #15803d; background: rgba(34,197,94,.08); }
.show-done-n { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
    padding: 0 5px; border-radius: 999px; background: rgba(34,197,94,.16); color: #15803d; font-size: .7rem; font-weight: 800; }
[data-theme="dark"] .show-done-n { background: rgba(34,197,94,.2); color: #4ade80; }

/* Task reminders */
.task-reminders { padding: 16px 18px; margin-top: 14px; }
.task-reminders h3 { margin: 0 0 6px; font-size: 1rem; display: inline-flex; align-items: center; gap: 8px; }

/* Task read receipts (sidebar) */
.task-seen { padding: 16px 18px; margin-top: 14px; }
.task-seen h3 { margin: 0 0 10px; font-size: 1rem; display: flex; align-items: center; gap: 8px; }
.seen-tally { margin-left: auto; font-size: .72rem; font-weight: 700; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: 1px 9px; }
.seen-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.seen-item { display: flex; align-items: center; gap: 9px; }
.seen-item.seen-none { opacity: .55; }
.seen-name { font-size: .86rem; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.seen-role { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: 1px 6px; }
.seen-status { margin-left: auto; font-size: .76rem; font-weight: 600; white-space: nowrap; }
.seen-status.seen-ok { color: var(--success); }
.seen-status.seen-behind { color: #b5851f; }

/* "Read by" avatars under the comment thread */
.comments-seen { display: flex; align-items: center; gap: 8px; margin: 14px 0 4px; }
.comments-seen-avs { display: inline-flex; align-items: center; }
.comments-seen-avs > span { margin-left: -6px; border-radius: 999px; box-shadow: 0 0 0 2px var(--surface); }
.comments-seen-avs > span:first-child { margin-left: 0; }
.tr-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tr-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .85rem;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; }
.tr-cancel { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1.1rem; line-height: 1; }
.tr-cancel:hover { color: #d23f3f; }
.tr-form { display: flex; flex-direction: column; gap: 8px; }
.tr-form input { width: 100%; font: inherit; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-2); color: var(--ink); }

/* Pipeline bulk-action bar */
.lead-check-col { width: 34px; text-align: center; }
.lead-check, #lead-all { width: 16px; height: 16px; accent-color: var(--teal); cursor: pointer; }
.lead-bulk-bar { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 160%); z-index: 80;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--ink); color: #fff;
    padding: 10px 16px; border-radius: 14px; box-shadow: 0 18px 50px rgba(8,19,32,.4); transition: transform .2s ease; max-width: calc(100vw - 24px); }
.lead-bulk-bar.active { transform: translate(-50%, 0); }
.lb-count { font-size: .88rem; font-weight: 600; white-space: nowrap; }
.lb-control { font-size: .84rem; padding: 6px 9px; border-radius: 8px; border: 1px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.1); color: #fff; }
.lb-control option { color: var(--ink); }
.lb-label-wrap { display: inline-flex; gap: 5px; }
.lb-label-wrap input { width: 110px; }
.lead-bulk-bar .lb-del { background: #d23f3f; color: #fff; border: none; }
.lead-bulk-bar .lb-del:hover { background: #b62f2f; }
.lead-bulk-bar .link-btn { color: rgba(255,255,255,.7); }
.lead-bulk-bar .link-btn:hover { color: #fff; }
[data-theme="dark"] .lead-bulk-bar { background: var(--surface-2); border: 1px solid var(--line-2); }

/* Follow-up hub: snooze + done actions */
.sp-item-acts { display: inline-flex; gap: 6px; flex: 0 0 auto; }
.sp-snooze button { background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 8px; color: var(--muted); cursor: pointer; padding: 5px 9px; line-height: 1; }
.sp-snooze button:hover { border-color: #f5b50a; color: #b5851f; background: rgba(245,181,10,.08); }

/* Scheduler health card */
.sched-card { padding: 14px 20px; margin-bottom: 20px; }
.sched-card > summary.sched-head { cursor: pointer; list-style: none; margin: 0; }
.sched-card > summary.sched-head::-webkit-details-marker { display: none; }
.sched-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sched-head-title { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sched-head h3 { margin: 0; font-size: 1.05rem; display: inline-flex; align-items: center; gap: 9px; }
.sched-head-hint { color: var(--muted); }
.sched-card[open] .sched-head-hint { opacity: .5; }
.sched-card[open] .sched-head { margin-bottom: 10px; }
.sched-body { display: flex; flex-direction: column; gap: 2px; }
.sched-card .field input { font-family: var(--mono, monospace); font-size: .82rem; }

/* ===== Dark mode: fix var(--ink)-background elements that washed out =====
   In dark, --ink flips to light, so any 'background: var(--ink); color:#fff'
   element became light-on-light. Remap active chips to a subtle light overlay
   and floating/badge elements to an elevated dark surface. */
[data-theme="dark"] .topnav a.active,
[data-theme="dark"] .hey-tab.active,
[data-theme="dark"] .search-chip.active,
[data-theme="dark"] .vt-btn.active,
[data-theme="dark"] .rp-rbtn.active,
[data-theme="dark"] .wl-fbtn.active,
[data-theme="dark"] .rb-fbtn.active {
    background: rgba(255, 255, 255, .14); color: #fff; border-color: transparent;
}
[data-theme="dark"] .time-fab,
[data-theme="dark"] .paste-toast,
[data-theme="dark"] .af-day-label {
    background: var(--surface-2); color: var(--ink); border: 1px solid var(--line-2);
}
[data-theme="dark"] .time-fab-start { background: var(--primary); }
[data-theme="dark"] .att-del button { background: var(--surface-2); color: var(--ink); }

/* ===== On-Page tool ===== */
.op-form { padding: 18px 20px; margin-bottom: 20px; }
.op-mode { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 14px; font-size: .9rem; }
.op-mode label { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.op-grid { display: grid; grid-template-columns: 2fr 1.4fr 1fr; gap: 14px; }
.op-form textarea { width: 100%; font: inherit; padding: 9px 11px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--bg-2); color: var(--ink); resize: vertical; }
#op-run { margin-top: 14px; }
.op-status { margin-left: 12px; }
.op-status.op-err { color: #d23f3f; font-weight: 600; }
.op-diag-out { margin-top: 12px; padding: 12px 14px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; }
.op-diag-tbl { width: 100%; border-collapse: collapse; }
.op-diag-tbl td { padding: 3px 8px 3px 0; vertical-align: top; }
.op-diag-tbl td:first-child { width: 130px; white-space: nowrap; }
.op-diag-verdict { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); line-height: 1.55; }
.op-diag-verdict.op-err { color: #d23f3f; font-weight: 600; }
.op-diag-bar-row { display: flex; align-items: center; gap: 8px; margin: 3px 0; }
.op-diag-bar-lbl { flex: 0 0 200px; font-size: 12px; }
.op-diag-bar { flex: 1; height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; }
.op-diag-bar > span { display: block; height: 100%; background: var(--accent, #4a90d9); border-radius: 4px; }
.op-diag-bar-ms { flex: 0 0 46px; text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .op-grid { grid-template-columns: 1fr; } }

.op-stats { display: flex; flex-wrap: wrap; gap: 14px 26px; padding: 16px 20px; margin-bottom: 18px; }
.op-stat { display: flex; flex-direction: column; }
.op-stat b { font-size: 1.15rem; color: var(--ink); }
.op-stat span { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.op-stat.op-stat-wide { flex: 1 1 240px; }
.op-stat.op-stat-wide b { font-size: .95rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.op-block { padding: 16px 18px; margin-bottom: 16px; }
.op-block h3 { margin: 0 0 12px; font-size: 1.02rem; display: flex; align-items: center; justify-content: space-between; }
.op-meta-row { display: flex; align-items: flex-start; gap: 10px; }
.op-meta-input { flex: 1 1 auto; font: inherit; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--bg-2); color: var(--ink); resize: vertical; }
.op-px { flex: 0 0 auto; font-size: .76rem; font-weight: 700; color: var(--muted); background: var(--surface-2); border-radius: 8px; padding: 6px 9px; white-space: nowrap; }
.op-px-over { color: #fff; background: #d23f3f; }
.op-options { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.op-opt { text-align: left; background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.3); border-radius: 9px; padding: 7px 10px; font: inherit; font-size: .82rem; cursor: pointer; display: flex; flex-direction: column; gap: 2px; max-width: 320px; }
.op-opt:hover { background: rgba(34,197,94,.16); }
.op-opt em { font-style: normal; font-size: .68rem; color: var(--muted); }

.op-faq { border: 1px solid var(--line); border-radius: 10px; padding: 11px; margin-bottom: 10px; }
.op-faq-top { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; align-items: center; }
/* The EEAT dropdown gets a fixed width (overriding the shared width:100%), so the
   question input can actually take the rest of the row instead of a sliver. */
.op-faq-eeat { flex: 0 0 170px; width: 170px; }
.op-faq-q { flex: 1 1 200px; min-width: 0; }
.op-faq-del { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1.2rem; line-height: 1; }
.op-faq-del:hover { color: #d23f3f; }
.op-faq input, .op-faq select, .op-faq textarea { font: inherit; padding: 7px 9px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-2); color: var(--ink); width: 100%; }
.op-faq textarea { resize: vertical; }

.op-hl { display: flex; align-items: center; gap: 9px; padding: 6px 0; }
.op-hl-lvl { flex: 0 0 34px; font-size: .68rem; font-weight: 800; color: var(--muted); }
.op-hl-h1 .op-hl-lvl { color: var(--primary); }
.op-hl-text { flex: 1 1 auto; font: inherit; padding: 6px 9px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-2); color: var(--ink); }
.op-hl-kw { flex: 0 0 auto; font-size: .72rem; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: 2px 8px; }
.op-hl-h3 { padding-left: 22px; }

#op-tech { width: 100%; font: var(--mono, monospace); font-size: .85rem; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--bg-2); color: var(--ink); resize: vertical; }
.op-save-bar { display: flex; align-items: center; gap: 14px; margin: 8px 0 30px; }

.op-recent { padding: 16px 18px; margin-top: 8px; }
.op-recent-list { list-style: none; margin: 10px 0 0; padding: 0; }
.op-recent-list li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.op-recent-list li:last-child { border-bottom: none; }
.op-rstatus { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: 2px 8px; border-radius: 999px; margin-left: auto; }
.op-rstatus.op-draft { background: rgba(245,181,10,.16); color: #b5851f; }
.op-rstatus.op-final { background: rgba(34,197,94,.16); color: #15803d; }
.op-rstatus.op-meta_implemented { background: rgba(37,99,235,.16); color: #1d4ed8; }
.op-rstatus.op-live { background: rgba(34,197,94,.16); color: #15803d; }
.op-rstatus.op-content { margin-left: 0; text-decoration: none; background: rgba(37,99,235,.12); color: #1d4ed8; }
.op-rstatus.op-content:hover { background: rgba(37,99,235,.2); }

.op-report-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.op-report-actions { display: inline-flex; align-items: center; gap: 10px; }
.op-meta-val { font-size: 1rem; color: var(--ink); margin: 0 0 6px; }
.op-faq-view { padding: 9px 0; border-bottom: 1px solid var(--line); }
.op-faq-view:last-child { border-bottom: none; }
.op-faq-q { font-weight: 600; margin: 0 0 4px; }
.op-eeat { font-size: .66rem; font-weight: 800; text-transform: uppercase; background: var(--surface-2); color: var(--muted); padding: 2px 7px; border-radius: 999px; margin-left: 6px; }
.op-hl-view { list-style: none; margin: 0; padding: 0; }
.op-hl-view li { padding: 5px 0; }
.op-hl-view-h2 { padding-left: 16px; }
.op-hl-view-h3 { padding-left: 32px; font-size: .92rem; color: var(--muted); }
.op-tech-view { white-space: pre-wrap; font-family: var(--mono, monospace); font-size: .85rem; background: var(--surface-2); border-radius: 9px; padding: 12px; margin: 0; color: var(--ink); }

/* Prev/next navigation between a client's briefs */
.op-brief-nav { display: flex; align-items: stretch; gap: 10px; margin: 4px 0 16px; }
.op-brief-nav-btn { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
    padding: 9px 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--ink);
    transition: border-color .12s, box-shadow .12s; }
.op-brief-nav-btn:hover { border-color: var(--primary); box-shadow: 0 1px 3px rgba(9,19,45,.1); text-decoration: none; }
.op-brief-nav-r { justify-content: flex-end; text-align: right; }
.op-brief-nav-btn.is-disabled { opacity: .4; pointer-events: none; color: var(--muted); }
.op-brief-nav-arrow { font-size: 1.1rem; font-weight: 700; color: var(--muted); flex: 0 0 auto; }
.op-brief-nav-btn:hover .op-brief-nav-arrow { color: var(--primary); }
.op-brief-nav-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.op-brief-nav-dir { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 800; color: var(--muted); }
.op-brief-nav-name { font-size: .85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-brief-nav-count { flex: 0 0 auto; display: inline-flex; align-items: center; padding: 0 14px; border: 1px solid var(--line);
    border-radius: 11px; background: var(--bg-2); color: var(--muted); font-size: .8rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.op-brief-nav-count:hover { color: var(--primary); border-color: var(--primary); text-decoration: none; }
@media (max-width: 560px) { .op-brief-nav-name { display: none; } .op-brief-nav-btn { flex: 0 0 auto; } .op-brief-nav-count { flex: 1 1 auto; justify-content: center; } }

/* On-Page SEO scorecard */
.op-scorecard { padding: 20px 22px; margin-bottom: 18px; }
.op-score-head { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.op-score-ring { position: relative; width: 92px; height: 92px; border-radius: 50%; flex: 0 0 auto;
    background: conic-gradient(var(--c) calc(var(--pct) * 1%), var(--line) 0);
    /* flex column, not a 2-row grid: the number + /100 must center as ONE group,
       or the score rides up over the ring's top edge. */
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.op-score-ring::before { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: var(--surface); }
.op-score-num { position: relative; font-size: 1.9rem; font-weight: 800; color: var(--c); line-height: 1; }
.op-score-of { position: relative; font-size: .7rem; color: var(--muted); font-weight: 700; }
.op-score-summary h3 { margin: 0 0 2px; font-size: 1.1rem; }
.op-score-tally { display: flex; gap: 14px; margin-top: 8px; font-size: .82rem; font-weight: 700; flex-wrap: wrap; }
.op-ck-pass { color: #16a34a; } .op-ck-warn { color: #c2740a; } .op-ck-fail { color: #dc2626; } .op-ck-info { color: var(--muted); }
.op-score-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px 26px; }
.op-score-cat h4 { font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 8px; }
.op-ck-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.op-ck { display: flex; gap: 9px; align-items: flex-start; }
.op-ck-mark { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
    font-size: .72rem; font-weight: 800; color: #fff; margin-top: 1px; }
.op-ck-pass > .op-ck-mark { background: #16a34a; } .op-ck-warn > .op-ck-mark { background: #e0890b; }
.op-ck-fail > .op-ck-mark { background: #dc2626; } .op-ck-info > .op-ck-mark { background: var(--line-2); color: var(--ink); }
.op-ck-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.op-ck-label { font-weight: 600; font-size: .86rem; color: var(--ink); }
.op-ck-detail { font-size: .8rem; color: var(--muted); line-height: 1.4; }
.op-ck-fix { color: var(--primary); }

/* On-Page competitor comparison */
.op-compare { padding: 18px 22px; margin-bottom: 18px; }
.op-compare-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.op-compare-head h3 { margin: 0; font-size: 1.05rem; }
.op-compare-table { width: 100%; border-collapse: collapse; }
.op-compare-table th { text-align: right; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 6px 12px; border-bottom: 1px solid var(--line); }
.op-compare-table th:first-child { text-align: left; }
.op-compare-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); }
.op-compare-table tr:last-child td { border-bottom: none; }
.op-cmp-label { text-align: left !important; font-weight: 600 !important; color: var(--muted) !important; }
.op-cmp-win { color: #16a34a; }
.op-cmp-behind { color: #dc2626; background: rgba(220,38,38,.06); }

/* On-Page priority fixes (AI-written per flagged check) */
.op-fixes { padding: 18px 22px; margin-bottom: 18px; }
.op-fixes h3 { margin: 0 0 12px; font-size: 1.05rem; }
.op-fix-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; }
.op-fix-list li { padding-left: 4px; }
.op-fix-issue { display: block; font-weight: 700; color: var(--ink); font-size: .9rem; }
.op-fix-do { display: block; color: var(--muted); font-size: .9rem; line-height: 1.5; margin-top: 2px; }

/* On-Page Batch 2: before→after, content benchmark, schema, social preview */
.op-ba { display: flex; flex-direction: column; gap: 12px; }
.op-ba-row { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.op-ba-same { opacity: .7; }
.op-ba-label { font-weight: 700; font-size: .82rem; color: var(--ink); margin-bottom: 8px; }
.op-ba-cells { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .op-ba-cells { grid-template-columns: 1fr; } }
.op-ba-before, .op-ba-after { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.op-ba-after { background: rgba(46, 160, 90, .08); }
.op-ba-tag { font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--muted); }
.op-ba-tag-new { color: #2ea05a; }
.op-ba-text { font-size: .86rem; line-height: 1.4; color: var(--ink); }
.op-ba-empty { color: var(--muted); font-style: italic; }

.op-bench { display: flex; gap: 10px; margin: 4px 0 10px; }
.op-bench-item { flex: 1; text-align: center; padding: 12px 8px; border: 1px solid var(--line); border-radius: 12px; }
.op-bench-item b { display: block; font-size: 1.3rem; color: var(--ink); line-height: 1.1; }
.op-bench-item span { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.op-bench-target { border-color: #2ea05a; background: rgba(46, 160, 90, .07); }
.op-bench-target b { color: #2ea05a; }
.op-bench-short .op-bench-item:first-child b { color: #d23f3f; }

.op-chip { display: inline-block; font-size: .72rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--ink); margin: 0 4px 4px 0; }
.op-chip-rec { background: rgba(46, 160, 90, .12); color: #1f7a44; }
.op-chip-warn { background: #fdecec; color: #b3261e; }
.op-schema-have { font-size: .86rem; margin: 0 0 10px; }
.op-schema-rec { list-style: none; margin: 6px 0 12px; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: .86rem; color: var(--muted); }
.op-code-wrap { position: relative; }
/* The copy button floats over the dark code block, so it needs a SOLID
   background — a transparent ghost button lets the white code show through
   behind its label (looked like "white code overlapping the text" in dark mode). */
.op-code-copy { position: absolute; top: 8px; right: 8px; z-index: 2; }
.op-code-copy.btn-ghost { background: #1e293b; color: #e2e8f0; border-color: #334155; }
.op-code-copy.btn-ghost:hover { background: #334155; color: #fff; }
.op-code { background: #0f172a; color: #e2e8f0; border-radius: 10px; padding: 14px 14px; padding-right: 84px; overflow-x: auto; font-size: .78rem; line-height: 1.5; margin: 0; }

.op-social-card { display: flex; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; max-width: 520px; margin-bottom: 10px; }
.op-social-img { flex: 0 0 140px; background-size: cover; background-position: center; min-height: 110px; background-color: var(--surface-2); }
.op-social-img-empty { display: flex; align-items: center; justify-content: center; font-size: .72rem; color: var(--muted); text-align: center; padding: 8px; }
.op-social-body { padding: 12px 14px; min-width: 0; }
.op-social-host { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.op-social-title { font-weight: 700; font-size: .92rem; color: var(--ink); margin: 3px 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.op-social-desc { font-size: .82rem; color: var(--muted); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* On-Page Batch 3: AI content-strategy pack */
.op-strategy { padding: 18px 22px; margin-bottom: 18px; }
.op-strategy h3 { margin: 0 0 14px; font-size: 1.05rem; }
.op-strat-intent { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); margin-bottom: 16px; font-size: .88rem; line-height: 1.5; }
.op-strat-intent-badge { flex: 0 0 auto; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 4px 10px; border-radius: 999px; background: #4338ca; color: #fff; }
.op-strat-intent em { color: var(--muted); font-style: italic; }
.op-strat-block { margin-bottom: 16px; }
.op-strat-block:last-child { margin-bottom: 0; }
.op-strat-block h4 { margin: 0 0 8px; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.op-strat-paa, .op-strat-gaps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: .9rem; line-height: 1.45; }
.op-strat-gaps li { color: #b3261e; }
.op-strat-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.op-strat-tags li { font-size: .82rem; font-weight: 600; padding: 4px 11px; border-radius: 999px; background: rgba(67, 56, 202, .1); color: #4338ca; }
.op-strat-sections { display: flex; flex-direction: column; gap: 10px; }
.op-strat-sec { border: 1px solid var(--line); border-radius: 10px; padding: 10px 13px; }
.op-strat-sec-h { display: block; font-weight: 700; font-size: .9rem; color: var(--ink); margin-bottom: 3px; }
.op-strat-sec-g { display: block; font-size: .86rem; color: var(--muted); line-height: 1.5; }

/* On-Page: audit history / progress over time */
.op-history h3 { margin: 0 0 14px; }
.op-hist-top { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-bottom: 14px; }
.op-hist-score { display: flex; flex-direction: column; gap: 4px; }
.op-hist-now { font-size: 2.1rem; font-weight: 800; color: var(--ink); line-height: 1; }
.op-hist-now small { font-size: .9rem; font-weight: 600; color: var(--muted); }
.op-hist-delta { font-size: .82rem; font-weight: 700; }
.op-hist-delta.op-up { color: #16a34a; }
.op-hist-delta.op-down { color: #dc2626; }
.op-hist-spark { flex: 1; min-width: 200px; color: #4338ca; }
.op-spark { width: 100%; height: 48px; display: block; }
.op-hist-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.op-hist-table th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 6px 10px; border-bottom: 1px solid var(--line); }
.op-hist-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); color: var(--ink); }
.op-hist-table tr:last-child td { border-bottom: none; }

/* On-Page: keyword cannibalization */
.op-cn-warn { padding: 16px 20px; margin-bottom: 16px; border-left: 4px solid #e0890b; background: #fffaf0; }
.op-cn-warn h3 { margin: 0 0 8px; font-size: 1rem; color: #9a5b00; }
.op-cn-warn-list { margin: 8px 0 4px; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; font-size: .86rem; }
.op-cn-warn-list a { word-break: break-all; }
.op-cn-pos { font-weight: 700; color: var(--muted); font-size: .78rem; margin-left: 4px; }
.op-cn-warn-link { margin: 8px 0 0; font-size: .85rem; }
.op-cn-summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.op-cn-pill { font-size: .8rem; padding: 5px 12px; border-radius: 999px; font-weight: 600; }
.op-cn-pill b { font-weight: 800; }
.op-cn-high { background: #fdecec; color: #b3261e; }
.op-cn-med { background: #fff4e0; color: #9a5b00; }
.op-cn-low { background: var(--surface-2); color: var(--muted); }
.op-cn-conflict { padding: 16px 20px; margin-bottom: 14px; }
.op-cn-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.op-cn-head h3 { margin: 0; font-size: 1.02rem; }
.op-cn-tags { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.op-cn-vol { font-size: .76rem; font-weight: 700; color: var(--muted); }
.op-cn-sev { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: 3px 9px; border-radius: 999px; }
.op-cn-sev.op-cn-high { background: #fdecec; color: #b3261e; }
.op-cn-sev.op-cn-med { background: #fff4e0; color: #9a5b00; }
.op-cn-sev.op-cn-low { background: var(--surface-2); color: var(--muted); }
.op-cn-note { font-size: .86rem; margin: 0 0 10px; line-height: 1.5; }
.op-cn-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.op-cn-table th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 6px 10px; border-bottom: 1px solid var(--line); }
.op-cn-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); }
.op-cn-table tr:last-child td { border-bottom: none; }
.op-cn-url a { word-break: break-all; }

/* On-Page: Core Web Vitals (internal report) */
.op-cwv h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; }
.op-cwv-overall { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: 3px 10px; border-radius: 999px; }
.op-cwv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-top: 12px; }
.op-cwv-item { border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 4px; border-left-width: 4px; }
.op-cwv-val { font-size: 1.5rem; font-weight: 800; color: var(--ink); line-height: 1; }
.op-cwv-val small { font-size: .8rem; font-weight: 600; color: var(--muted); }
.op-cwv-lbl { font-size: .82rem; font-weight: 700; color: var(--ink); }
.op-cwv-lbl em { font-weight: 400; font-style: normal; }
.op-cwv-badge { align-self: flex-start; font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-top: 2px; }
.op-cwv-item.op-cwv-good { border-left-color: #16a34a; }
.op-cwv-item.op-cwv-ni { border-left-color: #e0890b; }
.op-cwv-item.op-cwv-poor { border-left-color: #dc2626; }
.op-cwv-badge.op-cwv-good, .op-cwv-overall.op-cwv-good { background: #dcfce7; color: #166534; }
.op-cwv-badge.op-cwv-ni, .op-cwv-overall.op-cwv-ni { background: #fff4e0; color: #9a5b00; }
.op-cwv-badge.op-cwv-poor, .op-cwv-overall.op-cwv-poor { background: #fdecec; color: #b3261e; }

/* On-Page: Core Web Vitals (client report) */
.op-pub-cwv { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.op-pub-cwv-item { border: 1px solid #ebebed; border-radius: 12px; padding: 16px 14px; text-align: center; border-top: 3px solid #cbd2dc; }
.op-pub-cwv-item.op-cwv-good { border-top-color: #16a34a; }
.op-pub-cwv-item.op-cwv-ni { border-top-color: #e0890b; }
.op-pub-cwv-item.op-cwv-poor { border-top-color: #dc2626; }
.op-pub-cwv-val { display: block; font-size: 1.7rem; font-weight: 800; color: #1f2733; line-height: 1; }
.op-pub-cwv-val small { font-size: .8rem; font-weight: 600; color: #6b7280; }
.op-pub-cwv-lbl { display: block; font-weight: 700; font-size: .86rem; color: #1f2733; margin-top: 5px; }
.op-pub-cwv-sub { display: block; font-size: .74rem; color: #6b7280; }
.op-cwv-opt { display: flex; align-items: center; gap: 8px; font-size: .88rem; margin: 2px 0 4px; }

/* On-Page: batch client-share UI + multi-page client report */
.op-batch-share { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; padding: 10px 12px; background: var(--surface-2); border-radius: 10px; }
.op-batch-share input { flex: 1; min-width: 200px; }
.op-batch-share-form { margin: 4px 0 12px; }
.op-pub-batch > .op-pub-hero { margin-bottom: 8px; }
.op-pub-nav { background: #fff; border: 1px solid #ebebed; border-radius: 12px; padding: 14px 18px; margin-bottom: 26px; }
.op-pub-nav-lbl { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; font-weight: 700; margin-bottom: 8px; }
.op-pub-nav ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.op-pub-nav a { color: var(--b); font-weight: 600; }
.op-pub-page { position: relative; padding-top: 18px; }
.op-pub-page + .op-pub-page { border-top: 2px dashed #e5e7eb; margin-top: 30px; }
.op-pub-page-tag { display: inline-block; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 800; color: var(--b); background: rgba(0,0,0,.03); padding: 4px 10px; border-radius: 999px; margin-bottom: 6px; }
.op-pub-page .op-pub { padding: 0; }
.op-pub-totop { text-align: center; margin: 20px 0 0; }
.op-pub-totop a { font-size: .82rem; color: #6b7280; }

/* On-Page client report: "Your progress" wins */
.op-pub-progress { border-top: 3px solid var(--b); }
.op-pub-prog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.op-pub-prog { border: 1px solid #ebebed; border-radius: 12px; padding: 16px; background: linear-gradient(180deg, rgba(0,0,0,.012), transparent); }
.op-pub-prog-label { display: block; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; font-weight: 700; margin-bottom: 8px; }
.op-pub-prog-nums { display: flex; align-items: baseline; gap: 8px; }
.op-pub-prog-from { font-size: 1.05rem; color: #9aa3af; text-decoration: line-through; }
.op-pub-prog-arrow { color: var(--b); font-weight: 800; }
.op-pub-prog-to { font-size: 1.5rem; font-weight: 800; color: #1f2733; }
.op-pub-prog-delta { display: inline-block; margin-top: 8px; font-size: .82rem; font-weight: 800; color: #166534; background: #dcfce7; padding: 3px 10px; border-radius: 999px; }

/* On-Page: traffic opportunity (internal) */
.op-opp h3 { margin: 0 0 12px; }
.op-opp-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.op-opp-item { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.op-opp-item b { font-size: 1.3rem; font-weight: 800; color: var(--ink); line-height: 1.1; }
.op-opp-item span { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.op-opp-target { border-color: #4338ca; background: rgba(67,56,202,.06); }
.op-opp-target b { color: #4338ca; }
.op-opp-up { border-color: #16a34a; background: rgba(22,163,74,.06); }
.op-opp-up b { color: #166534; }

/* On-Page: traffic opportunity (client) */
.op-pub-opp { border-top: 3px solid var(--b); }
.op-pub-opp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 4px; }
.op-pub-opp-stat { text-align: center; padding: 8px; }
.op-pub-opp-n { display: block; font-size: 2rem; font-weight: 800; color: var(--b); line-height: 1.05; }
.op-pub-opp-l { display: block; font-size: .84rem; color: #4b5563; margin-top: 4px; }

/* On-Page client report: PDF / print */
.public-head { position: relative; }
.public-pdf-btn { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--brand, #ff5a4e); background: #fff; color: var(--brand, #ff5a4e); cursor: pointer; }
.public-pdf-btn:hover { background: var(--brand, #ff5a4e); color: #fff; }
@media print {
    .no-print { display: none !important; }
    body.public-body { background: #fff; }
    .public-wrap { max-width: none; margin: 0; padding: 0; box-shadow: none; }
    .op-pub-card, .card.op-block { break-inside: avoid; page-break-inside: avoid; box-shadow: none; border: 1px solid #e5e7eb; }
    .op-pub-h2 { break-after: avoid; page-break-after: avoid; }
    .op-pub-page { break-before: page; page-break-before: always; }
    .op-pub-page:first-of-type { break-before: auto; page-break-before: auto; }
    .op-pub-hero { break-after: avoid; }
    a[href]::after { content: ""; }   /* don't print raw URLs after links */
    .op-pub-serp, .op-pub-cwv-item, .op-pub-prog, .op-pub-opp-stat { break-inside: avoid; }
}

/* On-Page Phase 2: toolbar, mapping, batches, internal links, finalize */
.op-toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.op-map-form { padding: 18px 20px; }
.op-map-text { width: 100%; font-family: var(--mono, monospace); font-size: .85rem; padding: 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg-2); color: var(--ink); resize: vertical; margin: 12px 0; }
.op-batch { padding: 14px 18px; margin-bottom: 14px; }
.op-batch-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.op-batch-head h3 { margin: 0; font-size: 1rem; }
.op-links-status { padding: 10px 2px; }
.op-links-status.op-err { color: #d23f3f; }
.op-links { display: flex; flex-direction: column; gap: 10px; }
.op-link { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.op-link-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.op-link-top a { font-size: .85rem; word-break: break-all; }
.op-link-del { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1.2rem; line-height: 1; }
.op-link-del:hover { color: #d23f3f; }
.op-link-sentence { width: 100%; font: inherit; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-2); color: var(--ink); resize: vertical; }
.op-link-alts { display: block; margin-top: 5px; }
.op-link-view { padding: 8px 0; border-bottom: 1px solid var(--line); }
.op-link-view:last-child { border-bottom: none; }
.op-link-view a { font-size: .85rem; word-break: break-all; }
.op-link-view p { margin: 3px 0 0; }
.op-final-banner { background: rgba(34,197,94,.1); color: #15803d; border: 1px solid rgba(34,197,94,.25); border-radius: 10px; padding: 11px 16px; font-weight: 600; margin-bottom: 18px; }
.op-final-banner a { color: #166534; text-decoration: underline; }

/* On-Page keyword usage checklist + paste checker */
.op-kw-progress { display: flex; align-items: center; gap: 12px; margin: 6px 0 14px; }
.op-kw-bar-wrap { flex: 1; background: var(--surface-2); border-radius: 8px; height: 22px; overflow: hidden; }
.op-kw-bar { height: 100%; background: linear-gradient(90deg, #16c0b7, #0d9488); color: #fff; font-size: 12px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; min-width: 30px; transition: width .35s ease; }
.op-kw-grouphead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 6px;
    font-weight: 700; font-size: .9rem; padding: 6px 10px; border-radius: 8px; background: var(--surface-2); }
.op-kw-grouphead.op-kwt-primary { background: #dbeafe; color: #1e40af; }
.op-kw-grouphead.op-kwt-supporting { background: #fef3c7; color: #92400e; }
.op-kw-grouphead.op-kwt-related { background: #e0e7ff; color: #4338ca; }
.op-kw-target { font-size: .72rem; font-weight: 700; }
.op-kw-list { list-style: none; margin: 0; padding: 0; }
.op-kw-item { display: flex; align-items: center; gap: 9px; padding: 6px 4px; border-bottom: 1px solid var(--line); }
.op-kw-item:last-child { border-bottom: none; }
.op-kw-item input[type="checkbox"] { width: 17px; height: 17px; accent-color: #16c0b7; flex: 0 0 auto; }
.op-kw-word-input { flex: 1 1 auto; min-width: 0; font: inherit; padding: 6px 9px; border: 1px solid var(--line-2);
    border-radius: 8px; background: var(--bg-2); color: var(--ink); }
.op-kw-word-input:focus { outline: none; border-color: var(--primary); }
.op-kw-item.is-done .op-kw-word-input { text-decoration: line-through; color: var(--muted); }
.op-kw-remove { flex: 0 0 auto; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1.15rem;
    line-height: 1; padding: 2px 6px; border-radius: 6px; }
.op-kw-remove:hover { color: #d23f3f; background: color-mix(in srgb, #d23f3f 12%, transparent); }
.op-kw-add { margin: 8px 0 2px; background: none; border: 1px dashed var(--line-2); color: var(--primary); cursor: pointer;
    font: inherit; font-size: .82rem; font-weight: 600; padding: 6px 12px; border-radius: 8px; }
.op-kw-add:hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); }
.op-kw-group { margin-bottom: 4px; }
.op-kw-goal { flex: 0 0 auto; font-weight: 700; color: var(--muted); font-size: .82rem; display: inline-flex; align-items: center; gap: 3px; }
.op-kw-goal-input { width: 48px; min-height: 30px; text-align: center; font-family: inherit; font-size: .92rem; font-weight: 700;
    color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: 8px; padding: 4px 6px;
    /* Hide the native number spinner — in a small box it crowded out the digit. */
    -moz-appearance: textfield; appearance: textfield; }
.op-kw-goal-input::-webkit-outer-spin-button,
.op-kw-goal-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.op-kw-goal-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent); }
.op-kw-checker { margin-top: 16px; border-top: 1px dashed var(--line-2); padding-top: 14px; }
.op-kw-checker-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.op-kw-paste { width: 100%; min-height: 150px; font: inherit; font-size: .9rem; padding: 11px 13px; border: 1px solid var(--line-2);
    border-radius: 10px; background: var(--bg-2); color: var(--ink); resize: vertical; }
.op-kw-paste:focus { outline: 2px solid #16c0b7; border-color: transparent; }
.op-kw-results { margin-top: 12px; }
.op-kw-rhead, .op-kw-row { display: grid; grid-template-columns: 1fr 100px 64px 64px 30px; align-items: center; gap: 8px; padding: 7px 6px; }
.op-kw-rhead { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-bottom: 2px solid var(--line); }
.op-kw-row { border-bottom: 1px solid var(--line); font-size: .88rem; }
.op-kw-r-kw { font-weight: 600; }
.op-kw-r-type { justify-self: start; font-size: .68rem; font-weight: 700; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; }
.op-kw-r-type.op-kwt-primary { background: #dbeafe; color: #1e40af; }
.op-kw-r-type.op-kwt-supporting { background: #fef3c7; color: #92400e; }
.op-kw-r-type.op-kwt-related { background: #e0e7ff; color: #4338ca; }
.op-kw-r-found, .op-kw-r-target { text-align: center; font-weight: 700; }
.op-kw-row.is-bad .op-kw-r-found { color: #dc2626; }
.op-kw-row.is-ok .op-kw-r-found { color: #16a34a; }
.op-kw-r-status { text-align: center; font-weight: 800; }
.op-kw-row.is-ok .op-kw-r-status { color: #16a34a; }
.op-kw-row.is-bad .op-kw-r-status { color: #dc2626; }
.op-kw-summary { margin-top: 12px; padding: 10px 14px; border-radius: 8px; font-weight: 700; font-size: .9rem; }
.op-kw-summary.is-good { background: #d1fae5; color: #065f46; }
.op-kw-summary.is-warn { background: #fef3c7; color: #92400e; }
.op-kw-summary.is-bad { background: #fee2e2; color: #991b1b; }
@media (max-width: 560px) { .op-kw-rhead, .op-kw-row { grid-template-columns: 1fr 54px 50px 26px; } .op-kw-r-type { display: none; } }

/* On-Page client comments (internal report view) */
.op-cm-card .op-cm-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px;
    padding: 0 7px; border-radius: 999px; background: var(--primary); color: #fff; font-size: .75rem; font-weight: 700; }
.op-cm-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.op-cm { padding: 10px 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--bg-2); }
.op-cm-team { background: rgba(22,192,183,.08); border-color: rgba(22,192,183,.3); }
.op-cm-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.op-cm-tag { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.op-cm-team .op-cm-tag { background: #16c0b7; color: #fff; }
.op-cm-email { font-size: .8rem; }
.op-cm-when { margin-left: auto; }
.op-cm-body { white-space: pre-wrap; }
.op-cm-reply { display: flex; flex-direction: column; gap: 8px; }
.op-cm-reply textarea { width: 100%; font: inherit; padding: 9px 11px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); color: var(--ink); resize: vertical; }
.op-cm-reply button { align-self: flex-start; }

/* On-Page client comments (public report view) */
.op-pub-comments { border: 1.5px solid #e2e8f0; }
.op-pub-cm-intro { color: #64748b; font-size: .95rem; margin: -4px 0 14px; }
.op-pub-cm-pg { font-size: .8rem; font-weight: 500; }
.op-pub-cm-list { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.op-pub-cm { padding: 12px 15px; border-radius: 12px; background: #f8fafc; border: 1px solid #e2e8f0; }
.op-pub-cm-team { background: #ecfeff; border-color: #a5f3fc; }
.op-pub-cm-head { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; }
.op-pub-cm-badge { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 1px 7px; border-radius: 999px; background: #16c0b7; color: #fff; }
.op-pub-cm-when { margin-left: auto; color: #94a3b8; font-size: .82rem; }
.op-pub-cm-body { color: #334155; white-space: pre-wrap; line-height: 1.55; }
.op-pub-cm-form { display: flex; flex-direction: column; gap: 10px; }
.op-pub-cm-row { display: flex; gap: 10px; flex-wrap: wrap; }
.op-pub-cm-row input { flex: 1; min-width: 180px; }
.op-pub-cm-form input, .op-pub-cm-form textarea { font: inherit; font-size: .95rem; padding: 11px 13px; border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; color: #0f172a; }
.op-pub-cm-form textarea { resize: vertical; }
.op-pub-cm-form input:focus, .op-pub-cm-form textarea:focus { outline: 2px solid #16c0b7; border-color: transparent; }
.op-pub-cm-btn { align-self: flex-start; background: #16c0b7; color: #fff; border: none; cursor: pointer; font-weight: 700;
    padding: 11px 22px; border-radius: 10px; font-size: .95rem; }
.op-pub-cm-btn:hover { background: #0d9488; }
/* Per-section comment widget (injected into each report card) */
.op-cm-sec { font-size: .64rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.op-pub-sec-cm { margin-top: 16px; padding-top: 12px; border-top: 1px dashed #e2e8f0; }
.op-pub-sec-cm-toggle { display: inline-flex; align-items: center; gap: 7px; background: none; border: 1px solid #cbd5e1; cursor: pointer;
    color: #475569; font-weight: 600; font-size: .85rem; padding: 7px 14px; border-radius: 999px; }
.op-pub-sec-cm-toggle:hover { border-color: #16c0b7; color: #0d9488; }
.op-pub-sec-cm-n { display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 19px; padding: 0 6px;
    border-radius: 999px; background: #16c0b7; color: #fff; font-size: .72rem; font-weight: 700; }
.op-pub-sec-cm-panel { margin-top: 12px; }
.op-pub-sec-cm-panel .op-pub-cm-list { margin-bottom: 12px; }
.op-pub-sec-cm-form textarea { min-height: 64px; }
@media print { .op-pub-sec-cm, .op-pub-comments { display: none !important; } }
/* ===== Internal team notes — a deliberately bold, can't-miss private panel ===== */
.op-notes-card { padding: 0; overflow: hidden; border: 1px solid #f59e0b;
    box-shadow: 0 6px 20px -12px rgba(180,83,9,.5); }
[data-theme="dark"] .op-notes-card { border-color: #b45309; }
/* Filled amber header band so it reads as a distinct, private zone. */
.op-notes-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 12px 18px; background: linear-gradient(90deg, #b45309, #d97706);
    color: #fff; }
.op-notes-head h3 { margin: 0; color: #fff; display: inline-flex; align-items: center; gap: 9px; font-size: 1.02rem; }
.op-notes-head h3 svg, .op-notes-head h3 i { color: #fff; }
.op-notes-count { font-size: .72rem; font-weight: 800; background: rgba(255,255,255,.28); color: #fff;
    border-radius: 999px; padding: 1px 9px; }
.op-notes-priv { font-size: .74rem; font-weight: 700; color: #fff; display: inline-flex; align-items: center; gap: 6px;
    background: rgba(0,0,0,.16); padding: 4px 11px; border-radius: 999px; }
.op-notes-priv svg, .op-notes-priv i { color: #fff; }
.op-notes-body { padding: 16px 18px 18px; background: rgba(217,119,6,.05); }
[data-theme="dark"] .op-notes-body { background: rgba(245,158,11,.06); }
.op-notes-list { margin: 0 0 14px; display: flex; flex-direction: column; gap: 10px; }
.op-notes-inline-hint { margin: 0 0 12px; }
/* A single note card (used both in the central panel and inline by a section). */
.op-inote { display: flex; gap: 9px; align-items: flex-start; padding: 9px 11px; border: 1px solid rgba(180,83,9,.22);
    border-radius: 10px; background: var(--surface); }
[data-theme="dark"] .op-inote { background: rgba(255,255,255,.03); border-color: rgba(245,158,11,.22); }
.op-inote-main { flex: 1 1 auto; min-width: 0; }
.op-inote-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.op-inote-head strong { font-size: .86rem; }
.op-inote-body { font-size: .9rem; margin-top: 2px; white-space: pre-wrap; word-break: break-word; }
.op-cm-del { background: none; border: 0; cursor: pointer; color: var(--muted); font-size: 1.1rem; line-height: 1; padding: 0 4px; }
.op-cm-del:hover { color: #c0392b; }
.op-note-del { display: inline; margin-left: auto; }

/* Inline notes anchored to a brief section (Google-Docs style): attached under
   the section's content with an amber margin so they read as "on this box". */
.op-secnotes { margin: 12px -4px -4px; padding: 10px 12px 8px; border-radius: 10px;
    background: rgba(217,119,6,.06); border: 1px dashed rgba(180,83,9,.32);
    display: flex; flex-direction: column; gap: 8px; }
[data-theme="dark"] .op-secnotes { background: rgba(245,158,11,.07); border-color: rgba(245,158,11,.3); }
.op-secnotes .op-inote { background: var(--surface); }
[data-theme="dark"] .op-secnotes .op-inote { background: rgba(255,255,255,.04); }
/* The "add a note here" button — quiet until you hover the section card. */
.op-secnote-add { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    background: none; border: 1px dashed rgba(180,83,9,.4); color: #b45309; font: inherit; font-size: .76rem; font-weight: 600;
    padding: 4px 11px; border-radius: 999px; opacity: .62; transition: opacity .12s, background .12s; }
.op-secnote-add:hover { opacity: 1; background: rgba(217,119,6,.12); }
[data-theme="dark"] .op-secnote-add { color: #fbbf24; border-color: rgba(245,158,11,.4); }
.op-secnote-add svg, .op-secnote-add i { color: inherit; }
/* When a section has no notes yet, keep the lone add-button whisper-quiet. */
.op-secnotes:not(:has(.op-inote)) { background: none; border: 0; padding: 8px 0 0; margin: 8px 0 0; }
.op-secnotes:not(:has(.op-inote)) .op-secnote-add { opacity: .4; }
.card:hover .op-secnotes:not(:has(.op-inote)) .op-secnote-add { opacity: .85; }
/* Briefly flash a section's note box when jumped to from the composer. */
.op-note-flash { animation: op-note-flash 1.6s ease; }
@keyframes op-note-flash { 0%, 40% { box-shadow: 0 0 0 3px rgba(217,119,6,.45); } 100% { box-shadow: 0 0 0 0 rgba(217,119,6,0); } }
/* Stacked form — robust against the global width:100% on select/textarea. */
.op-note-form { display: block; }
.op-note-about { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 600;
    color: var(--muted); margin-bottom: 8px; }
.op-note-sec { width: auto; min-width: 150px; padding: 7px 9px; border: 1px solid var(--line-2); border-radius: 8px;
    background: var(--surface); font-size: .82rem; }
.op-note-text { width: 100%; margin-bottom: 10px; background: var(--surface); }

/* ===== Per-section inline brief editing (edit each box in place, any status) ===== */
.op-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.op-sec-head h3 { margin: 0; }
/* The Edit button hides until you hover the section (quiet by default). */
.op-sec-edit { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; background: none;
    border: 1px solid var(--line-2); color: var(--muted); font: inherit; font-size: .78rem; font-weight: 600;
    padding: 4px 11px; border-radius: 999px; opacity: 0; transition: opacity .12s, color .12s, border-color .12s; }
.op-sec:hover .op-sec-edit, .op-sec:focus-within .op-sec-edit { opacity: 1; }
.op-sec-edit:hover { color: var(--primary); border-color: var(--primary); }
.op-sec-edit svg, .op-sec-edit i { color: inherit; }
@media (hover: none) { .op-sec-edit { opacity: 1; } } /* touch: always show */
/* View <-> form swap driven by .is-editing on the card. */
.op-sec-form { display: none; margin-top: 10px; }
.op-sec.is-editing > .op-sec-view, .op-sec.is-editing .op-schema-notes-view { display: none; }
.op-sec.is-editing .op-sec-form { display: block; }
.op-sec.is-editing { box-shadow: 0 0 0 2px var(--primary); }
.op-sec-form-actions { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
.op-edit-input { width: 100%; padding: 8px 11px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; }
textarea.op-edit-input { resize: vertical; }
.op-faq-edit-row, .op-hl-edit-row { padding: 10px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; background: var(--bg-2); }
.op-faq-edit-top { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.op-faq-edit-top .op-edit-input { flex: 1 1 auto; }
.op-hl-edit-row { display: flex; gap: 8px; align-items: center; }
.op-hl-edit-row .op-edit-input { flex: 1 1 auto; }
/* width:auto beats the global `select { width:100% }` — without it the
   dropdown claims the whole flex row and crushes the question/headline
   input to ~30px, which reads as "it won't let me edit". */
.op-edit-eeat, .op-edit-lvl { flex: 0 0 auto; width: auto; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: .82rem; }
.op-edit-lvl { width: 66px; }

/* On-Page "how to combine pages" help panel */
.op-howto { padding: 14px 18px; margin-bottom: 18px; }
.op-howto > summary { cursor: pointer; font-weight: 700; font-size: .95rem; list-style: none; display: flex; align-items: center; gap: 8px; }
.op-howto > summary::-webkit-details-marker { display: none; }
.op-howto[open] > summary { margin-bottom: 10px; }
.op-howto-body ol { margin: 8px 0 10px; padding-left: 20px; }
.op-howto-body li { margin: 5px 0; }
.op-howto-body code { background: var(--surface-2); padding: 1px 6px; border-radius: 5px; font-size: .9em; }

/* On-Page client report v2 — in-depth, workspace-branded (--brand from layout) */
.public-wrap:has(.op-pub) { max-width: 860px; }
.public-wrap:has(.op-ov) { max-width: 1120px; } /* the page-by-page table needs room for its columns */
.op-pub { --b: var(--brand, #ff5a4e); color: #1f2733; }
.op-pub-hero { text-align: center; padding: 8px 0 24px; }
.op-pub-eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .74rem; font-weight: 800; color: var(--b); margin: 0 0 6px; }
.op-pub-title { font-family: var(--display); font-size: clamp(1.6rem, 4vw, 2.2rem); line-height: 1.15; margin: 0 0 8px; color: #111827; }
.op-pub-sub a { color: #6b7280; font-size: .92rem; text-decoration: none; }
.op-pub-card { background: #fff; border: 1px solid #e7e9ee; border-radius: 14px; padding: 22px 26px; margin-bottom: 16px; box-shadow: 0 1px 2px rgba(9,19,45,.05); }
.op-pub-h2 { font-size: 1.15rem; margin: 0 0 12px; padding-left: 12px; border-left: 4px solid var(--b); color: #111827; }
.op-pub-lead { color: #4b5563; margin: 0 0 14px; line-height: 1.6; }
.op-pub-status { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; padding: 12px 16px;
    border: 1px solid #dbe4ff; border-left: 3px solid #4c6ef5; border-radius: 10px; background: #f5f8ff; }
.op-pub-status.is-published { border-color: #c3e6cb; border-left-color: #2f9e44; background: #f3fbf5; }
.op-pub-status-badge { flex: 0 0 auto; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
    padding: 3px 10px; border-radius: 999px; background: #4c6ef5; color: #fff; }
.op-pub-status.is-published .op-pub-status-badge { background: #2f9e44; }
.op-pub-status-text { color: #374151; font-weight: 600; font-size: .92rem; }
.op-pub-status-text a { color: #2f9e44; text-decoration: underline; }
.op-pub-note { color: #6b7280; font-size: .82rem; margin: 12px 0 0; padding: 10px 12px; background: #f8fafc; border: 1px solid #eef1f5; border-radius: 8px; }

.op-pub-overview { margin: 0; display: grid; gap: 0; }
.op-pub-overview > div { display: flex; gap: 14px; padding: 11px 0; border-bottom: 1px solid #f0f2f6; }
.op-pub-overview > div:last-child { border-bottom: none; }
.op-pub-overview dt { flex: 0 0 150px; font-weight: 700; color: #6b7280; font-size: .9rem; margin: 0; }
.op-pub-overview dd { margin: 0; color: #1f2733; font-weight: 600; word-break: break-word; }
.op-pub-kwhi { color: var(--b) !important; }

.op-pub-approach { list-style: none; margin: 0; padding: 0; }
.op-pub-approach li { position: relative; padding: 9px 0 9px 30px; border-bottom: 1px solid #f0f2f6; color: #374151; line-height: 1.5; }
.op-pub-approach li:last-child { border-bottom: none; }
.op-pub-approach li::before { content: '✓'; position: absolute; left: 4px; top: 9px; color: #fff; background: var(--b); width: 18px; height: 18px; border-radius: 50%; font-size: .7rem; font-weight: 800; display: grid; place-items: center; }

/* "Potential technical issues" — neutral review markers, not ✓ (these aren't done) */
.op-pub-tech-list { list-style: none; margin: 0; padding: 0; }
.op-pub-tech-list li { position: relative; padding: 9px 0 9px 28px; border-bottom: 1px solid #f0f2f6; color: #374151; line-height: 1.5; }
.op-pub-tech-list li:last-child { border-bottom: none; }
.op-pub-tech-list li::before { content: ''; position: absolute; left: 6px; top: 15px; width: 9px; height: 9px; border-radius: 50%; background: #e0890b; box-shadow: 0 0 0 3px rgba(224,137,11,.15); }

/* "What happens next" numbered workflow */
.op-pub-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.op-pub-steps li { display: flex; gap: 14px; align-items: flex-start; }
.op-pub-steps li > div { color: #374151; line-height: 1.55; padding-top: 2px; }
.op-pub-step-n { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: var(--b); color: #fff; font-weight: 800; font-size: .9rem; display: grid; place-items: center; }
.op-pub-cover { margin-top: 20px; padding-top: 18px; border-top: 1px solid #eef1f5; }
.op-pub-cover-h { font-weight: 800; font-size: .95rem; color: #1f2733; margin: 0 0 8px; }
.op-pub-cover-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.op-pub-cover-list li { position: relative; padding: 9px 12px 9px 34px; background: #f8fafc; border: 1px solid #eef1f5; border-radius: 8px; color: #374151; line-height: 1.45; counter-increment: cover; }
.op-pub-cover-list { counter-reset: cover; }
.op-pub-cover-list li::before { content: counter(cover); position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--b); font-weight: 800; font-size: .8rem; }

.op-pub-serp { background: #fff; border: 1px solid #ebebed; border-radius: 10px; padding: 16px 18px; font-family: arial, sans-serif; max-width: 600px; }
.op-serp-url { color: #202124; font-size: .82rem; }
.op-serp-url span { color: #5f6368; }
.op-serp-title { color: #1a0dab; font-size: 1.25rem; line-height: 1.3; margin-top: 5px; }
.op-serp-desc { color: #4d5156; font-size: .87rem; line-height: 1.58; margin-top: 4px; }
.op-serp-date { color: #70757a; }

.op-pub-ba { display: flex; flex-direction: column; gap: 12px; }
.op-pub-ba-row { display: grid; grid-template-columns: 130px 1fr 26px 1fr; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid #ebebed; border-radius: 10px; }
.op-pub-ba-label { font-weight: 700; font-size: .82rem; color: #1f2937; }
.op-pub-ba-now, .op-pub-ba-new { display: flex; flex-direction: column; gap: 4px; font-size: .86rem; line-height: 1.4; color: #374151; }
.op-pub-ba-now { opacity: .75; }
.op-pub-ba-tag { font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 800; color: #9aa3af; }
.op-pub-ba-tag-new { color: var(--b); }
.op-pub-ba-arrow { text-align: center; color: var(--b); font-weight: 800; font-size: 1.1rem; }
@media (max-width: 640px) { .op-pub-ba-row { grid-template-columns: 1fr; } .op-pub-ba-arrow { display: none; } }

.op-pub-headlines { display: flex; flex-direction: column; gap: 8px; }
.op-pub-hl { display: flex; gap: 12px; align-items: baseline; }
.op-pub-hl-lvl { flex: 0 0 auto; min-width: 34px; text-align: center; padding: 3px 8px; border-radius: 5px; font-size: .66rem; font-weight: 800; letter-spacing: .03em; background: #eef1f5; color: #475569; }
.op-pub-hl-h1 .op-pub-hl-lvl { background: var(--b); color: #fff; }
.op-pub-hl-h1 .op-pub-hl-text { font-size: 1.2rem; font-weight: 700; }
.op-pub-hl-h2 { margin-left: 18px; } .op-pub-hl-h2 .op-pub-hl-text { font-size: 1.02rem; font-weight: 600; }
.op-pub-hl-h3 { margin-left: 36px; } .op-pub-hl-h3 .op-pub-hl-text { font-size: .94rem; color: #475569; }
.op-pub-hl-text { color: #111827; }

.op-pub-kw { width: 100%; border-collapse: collapse; font-size: .9rem; }
.op-pub-kw th { text-align: left; background: #f8fafc; color: #475569; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; padding: 10px 12px; border-bottom: 2px solid #eef1f5; }
.op-pub-kw td { padding: 10px 12px; border-bottom: 1px solid #f0f2f6; vertical-align: middle; }
.op-kw-term { font-weight: 600; color: #1f2733; }
.op-kw-how { color: #6b7280; font-size: .84rem; }
.op-kw-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.op-kw-primary { background: color-mix(in srgb, var(--b) 16%, #fff); color: var(--b); }
.op-kw-support { background: #fef3c7; color: #92400e; }
.op-kw-related { background: #dcfce7; color: #166534; }

.op-pub-faq { background: #f8fafc; border: 1px solid #eef1f5; border-radius: 10px; padding: 16px 18px; margin-bottom: 12px; }
.op-pub-eeat { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 8px; }
.op-pub-faq-q { font-weight: 700; color: #111827; margin: 0 0 6px; font-size: 1rem; }
.op-pub-faq-a { color: #4b5563; margin: 0; line-height: 1.6; }

.op-pub-link { background: #f8fafc; border: 1px solid #eef1f5; border-radius: 10px; padding: 13px 16px; margin-bottom: 10px; }
.op-pub-link-url { font-family: var(--mono, monospace); font-size: .82rem; color: var(--b); word-break: break-all; margin-bottom: 5px; }
.op-pub-link-sentence { color: #374151; line-height: 1.5; }

.op-pub-authority { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px; text-align: center; }
.op-auth { padding: 12px; background: #f8fafc; border: 1px solid #eef1f5; border-radius: 10px; }
.op-auth-n { display: block; font-size: 1.8rem; font-weight: 800; color: #111827; line-height: 1; }
.op-auth-l { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: #6b7280; margin-top: 5px; }

.op-pub-recs { color: #374151; line-height: 1.7; }

/* On-Page Phase 3: client report */
.op-client-card { padding: 16px 18px; margin-bottom: 16px; }
.op-client-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.op-client-head h3 { margin: 0; font-size: 1rem; }
.op-client-link { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.op-client-link input { flex: 1 1 260px; font-family: var(--mono, monospace); font-size: .82rem; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-2); color: var(--ink); }
.op-public { padding: 30px 32px; }
.op-public h1 { font-family: var(--display); font-size: 1.6rem; margin: 6px 0 4px; }
.op-public-url { margin: 0 0 22px; }
.op-public-block { margin-bottom: 24px; }
.op-public-block h2 { font-size: 1.05rem; margin: 0 0 8px; }

/* Pipeline: stuck/aging chip + reasons grid */
.pl-chip-stuck { background: rgba(210,63,63,.15); color: #d23f3f; }
.pl-reasons-grid { margin-bottom: 18px; }

/* ===== Pipeline redesign: topbar, KPI strip, popovers, controls ===== */
.pl-topbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.pl-topbar-head .display { margin: 2px 0 6px; }
.pl-topbar-head .lead { max-width: 52ch; }
.pl-topbar-actions { display: flex; gap: 8px; align-items: center; }

/* Add / Import popovers built on <details> */
.pl-pop { position: relative; }
.pl-pop > summary { list-style: none; cursor: pointer; user-select: none; }
.pl-pop > summary::-webkit-details-marker { display: none; }
.pl-pop[open] > summary { box-shadow: 0 0 0 3px rgba(255,90,78,.18); }
.pl-pop-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: 360px; max-width: 92vw; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg, 0 16px 44px rgba(9,19,45,.18)); padding: 16px; }
.pl-pop-panel.pl-pop-wide { width: 560px; }
.pl-pop-wide .pl-add-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
.pl-pop-wide .pl-add-form > button { grid-column: 1 / -1; justify-self: start; }
.pl-pop-wide .pl-add-notes { grid-column: 1 / -1; }

/* KPI strip */
.pl-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 18px; }
.pl-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; box-shadow: var(--shadow); }
.pl-kpi-l { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.pl-kpi-n { font-size: 1.5rem; font-weight: 800; color: var(--ink); line-height: 1.1; }
.pl-kpi-u { font-size: .9rem; font-weight: 700; color: var(--muted); }
.pl-kpi-pos { color: #1a8f4c; }
.pl-kpi-accent { background: linear-gradient(160deg, rgba(255,90,78,.09), rgba(255,90,78,.02)); border-color: rgba(255,90,78,.25); }
.pl-kpi-link { text-decoration: none; transition: border-color .12s, box-shadow .12s; }
.pl-kpi-link:hover { border-color: var(--primary); box-shadow: 0 4px 14px rgba(9,19,45,.10); }
.pl-kpi-warn { border-color: rgba(210,63,63,.4); background: rgba(210,63,63,.05); }
.pl-kpi-warn .pl-kpi-n { color: #d23f3f; }

/* Attention drawer */
.pl-attention { margin-bottom: 18px; border: 1px solid var(--line); border-radius: 14px; background: rgba(9,19,45,.02); }
.pl-attention-sum { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; font-weight: 700; color: var(--ink); }
.pl-attention-sum::-webkit-details-marker { display: none; }
.pl-attention[open] .pl-attention-sum { border-bottom: 1px solid var(--line); }
.pl-attention .sp-grid { padding: 14px 16px 0; margin: 0; }
.pl-inbox-line { padding: 12px 16px 14px; margin: 0; }
.pl-inbox-line .pl-inbox-addr { padding: 1px 7px; }

/* Controls bar (view toggle + filters), sticky while scrolling the board */
.pl-controls { display: flex; align-items: center; justify-content: space-between; gap: 14px 18px; flex-wrap: wrap; margin-bottom: 18px; position: sticky; top: 0; z-index: 20; background: var(--bg); padding: 8px 0; }
.pl-controls .wl-viewtoggle { margin-bottom: 0; }

/* Filter bar */
.pl-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pl-filter-search { display: flex; align-items: center; gap: 6px; flex: 1 1 200px; min-width: 170px; padding: 0 10px; background: rgba(9,19,45,.04); border: 1px solid var(--line); border-radius: 10px; }
.pl-filter-search input { flex: 1; border: 0; background: transparent; padding: 8px 0; font: inherit; color: inherit; outline: none; }
.pl-filter-sel { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface, #fff); font: inherit; color: inherit; }
.pl-filter-clear { margin-left: 2px; }

@media (max-width: 1100px) { .pl-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .pl-kpis { grid-template-columns: repeat(2, 1fr); } .pl-controls { position: static; } .pl-pop-panel, .pl-pop-panel.pl-pop-wide { width: 92vw; } .pl-pop-wide .pl-add-form { grid-template-columns: 1fr; } }

/* ============================================================
   To-do board v3 — Basecamp-style airy rows
   Flatten the v2 cards into clean rows with round checkboxes,
   a faint divider, hover affordance, and the assignee on the right.
   ============================================================ */
#todos .todo-items { gap: 0; margin: 6px 0; }
#todos .todo-item {
    background: transparent;
    border: none !important;
    border-bottom: 1px solid var(--line) !important;
    border-radius: 0;
    padding: 10px 10px 10px 4px;
    box-shadow: none !important;
    transition: background .12s;
}
#todos .todo-item:last-child { border-bottom: none !important; }
/* Zebra stripe — needs #todos in the selector to outrank the transparent base above. */
#todos .todo-items > .todo-item:nth-of-type(even) { background: var(--surface-2); }
#todos .todo-item:hover { background: rgba(9,19,45,.045); box-shadow: none !important; }
#todos .todo-items > .todo-item:nth-of-type(even):hover { background: var(--bg-2); }

/* round, Basecamp-like checkbox */
#todos .todo-item .checkbox { width: 21px; height: 21px; border-radius: 50%; border-width: 2px; font-size: .72rem; }
#todos .todo-item.done .checkbox { background: var(--success); border-color: transparent; color: #fff; }
#todos .toggle-form.blocked .checkbox { border-color: var(--warning); }

/* status accent as a subtle left tick, not a heavy bordered card */
#todos .todo-item.status-blocked,
#todos .todo-item.status-in_review,
#todos .todo-item.status-in_progress {
    padding-left: 10px; margin-left: 0; border-left: 3px solid transparent !important; border-radius: 6px 0 0 6px;
}
#todos .todo-item.status-blocked { border-left-color: rgba(248,113,113,.7) !important; }
#todos .todo-item.status-in_review { border-left-color: rgba(250,204,21,.6) !important; }
#todos .todo-item.status-in_progress { border-left-color: rgba(255,90,78,.6) !important; }

/* push the assignee avatar + status pill to the right edge, like Basecamp's row meta */
#todos .todo-item .avatar.xs { margin-left: 2px; }
#todos .todo-item .status-menu { margin-left: auto; }
#todos .todo-item .status-menu + .avatar.xs { margin-left: 6px; }
/* when there's no status menu (subtasks/locked), still right-align the avatar */
#todos .todo-item > .avatar.xs:not(.status-menu ~ .avatar) { margin-left: auto; }

/* subtasks: lighter, slightly inset, no card */
#todos .subtask-items { margin: 0 0 0 30px; gap: 0; }
#todos .todo-item.is-sub { background: transparent; padding: 8px 10px 8px 2px; }

/* roomier list card so the rows breathe */
#todos .todo-list { padding: 18px 20px; }

/* ============================================================
   Client update drafter (project To-dos panel)
   ============================================================ */
.client-update { margin-bottom: 18px; position: relative; overflow: hidden; padding: 20px 24px;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(250,202,44,.10), transparent 55%),
        linear-gradient(135deg, rgba(255,90,78,.07), rgba(250,202,44,.05));
    border: 1px solid rgba(255,90,78,.20); }
@media (max-width: 640px) { .client-update { padding: 16px 18px; } }
.cu-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cu-icon { width: 44px; height: 44px; border-radius: 13px; flex: 0 0 auto; display: grid; place-items: center;
    background: var(--grad); color: #fff; font-size: 1.1rem; box-shadow: 0 6px 16px rgba(255,90,78,.30); }
.cu-copy { min-width: 220px; flex: 1; }
.cu-copy h3 { font-size: 1.06rem; margin: 0 0 4px; letter-spacing: -.01em; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.cu-copy p { margin: 0; max-width: 58ch; line-height: 1.5; }
.cu-ai-badge { font-size: .64rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; line-height: 1;
    color: var(--accent); background: rgba(255,90,78,.12); border: 1px solid rgba(255,90,78,.28);
    padding: 4px 9px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.cu-ai-badge i, .cu-ai-badge .i-emoji { font-size: .85em; line-height: 1; --fa-secondary-opacity: .55; }
.cu-head .btn { flex: 0 0 auto; white-space: nowrap; align-self: center; }
.cu-draft-btn { box-shadow: 0 6px 16px rgba(255,90,78,.28); }
@media (max-width: 640px) { .cu-head .btn { width: 100%; justify-content: center; } }
.cu-panel { white-space: normal; margin-top: 14px; margin-bottom: 0; }
.cu-panel[hidden] { display: none; }
.cu-form { display: flex; flex-direction: column; gap: 12px; }
.cu-field { display: flex; flex-direction: column; gap: 5px; }
.cu-field > span { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.cu-form input[type=text], .cu-form textarea { width: 100%; font: inherit; }
.cu-form textarea { line-height: 1.55; resize: vertical; }
.cu-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.cu-warn { color: var(--danger); font-weight: 600; }
.cu-tip { margin: 0; }

/* Phase-complete actions (per-list draft email) */
.phase-done { margin: 10px 0 4px; padding: 12px 14px; border: 1px solid rgba(22,163,74,.28);
    background: rgba(22,163,74,.06); border-radius: 12px; }
.phase-done.not-notified { border-color: rgba(217,119,6,.32); background: rgba(217,119,6,.06); }
.phase-done-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.phase-done-tag { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .04em; color: var(--success); }
.notify-chip { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 700;
    padding: 3px 10px; border-radius: 999px; border: 1px solid transparent; }
.notify-chip--yes { color: var(--success); background: rgba(22,163,74,.12); border-color: rgba(22,163,74,.28); }
.notify-chip--no { color: #b45309; background: rgba(217,119,6,.12); border-color: rgba(217,119,6,.3); }
.phase-done-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.phase-done-actions .phase-notify { margin: 0; }
.phase-done .cu-panel { background: var(--surface); border-color: var(--line); }

/* "Completed phases not emailed to client" roll-up (top of To-dos) */
.notify-rollup { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; padding: 13px 16px;
    border: 1px solid rgba(217,119,6,.32); background: rgba(217,119,6,.07); border-radius: 12px; }
.notify-rollup-ic { color: #b45309; font-size: 1.1rem; line-height: 1.3; flex: 0 0 auto; }
.notify-rollup strong { display: block; color: #92400e; font-size: .95rem; }
.notify-rollup p { margin: 2px 0 0; }

/* ===== Pausable timer ===== */
.timer-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.timer-paused-tag { font-weight: 700; color: #b45309; }
/* When paused, freeze the pulse and tint it amber so the state is obvious. */
.timer-live.is-paused .timer-pulse,
.timer-pill.is-paused .timer-pulse,
.time-fab.is-paused .time-fab-pulse { animation: none; background: #d97706; }
.timer-pill.is-paused { background: rgba(217,119,6,.12); color: #b45309; }
.timer-pill.is-paused:hover { background: rgba(217,119,6,.18); color: #b45309; }
.time-fab.is-paused { background: #7c5408; }
.time-fab-pauseform { margin: 0; }
.time-fab-pause { padding-left: 12px; padding-right: 12px; }

/* ===== Updates due (completed phases to email clients) ===== */
.cu-due-count { margin: 0 0 14px; }
.cu-due-list { display: flex; flex-direction: column; gap: 14px; }
.cu-due-project { padding: 16px 18px; }
.cu-due-phead { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; margin-bottom: 6px;
    border-bottom: 1px solid var(--line); font-size: .92rem; flex-wrap: wrap; }
.cu-due-pname { font-weight: 700; color: var(--ink); }
.cu-due-pname:hover { color: var(--teal); text-decoration: none; }
.cu-due-noemail { margin-left: auto; font-size: .7rem; font-weight: 700; color: #b45309;
    background: rgba(217,119,6,.12); border: 1px solid rgba(217,119,6,.3); padding: 2px 8px; border-radius: 999px; }
.cu-due-row { display: flex; align-items: center; justify-content: space-between; gap: 14px;
    flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--line); }
.cu-due-row:last-of-type { border-bottom: none; }
.cu-due-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cu-due-phase { font-weight: 600; font-size: .96rem; }
.cu-due-who { color: var(--text); font-weight: 700; }
.cu-due-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cu-due-actions form { margin: 0; }
.cu-due-row .cu-panel { flex: 1 1 100%; margin-top: 6px; }

/* ===== Comment composer toolbar (format + photo) ===== */
.comment-toolbar { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.md-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px;
    padding: 0 8px; border: 1px solid var(--line-2); background: var(--surface); border-radius: 8px;
    color: var(--muted); cursor: pointer; font-size: .9rem; line-height: 1; transition: .12s; }
.md-btn:hover { color: var(--ink); border-color: var(--ink); }
.md-photo { cursor: pointer; }
.md-photo input { position: absolute; width: 0; height: 0; opacity: 0; }
.comment-toolbar .comment-submit { margin-left: auto; }
/* rendered strikethrough in comments */
.prose del, .comment-body del { color: var(--muted); }

/* ===== Agenda multi-select ===== */
.agenda-selectbar { position: sticky; top: 8px; z-index: 6; display: flex; align-items: center; gap: 12px;
    margin-bottom: 14px; padding: 9px 14px; border-radius: 12px;
    background: var(--ink); color: #fff; box-shadow: 0 8px 22px rgba(9,19,45,.22); }
.agenda-selectbar-n { font-size: .9rem; }
.agenda-selectbar-n strong { font-size: 1.02rem; }
.agenda-selectbar .btn-primary { margin-left: auto; }
.agenda-selectbar .btn-ghost { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.3); }
.agenda-selectbar .btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
.agenda-box.is-selected { border-color: var(--accent, var(--teal)); border-left-width: 3px;
    box-shadow: 0 0 0 2px var(--accent, var(--teal)) inset; background: var(--surface-2); }
.agenda-box.is-selected::after { content: "✓"; position: absolute; top: 6px; right: 8px;
    width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%;
    background: var(--accent, var(--teal)); color: #fff; font-size: .72rem; font-weight: 800; }
.agenda-box { position: relative; }
/* .agenda-box is display:flex, which overrides the [hidden] attribute — force it. */
.agenda-box[hidden], .agenda-bucket[hidden] { display: none !important; }

/* Updates due: bulk bar + mark-sent */
.cu-due-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cu-due-bar form { margin: 0; }
.cu-mark-done { color: var(--success); }
.cu-mark-done:hover { border-color: var(--success); color: var(--success); }

/* Team board: tasks a teammate planned for today (from their agenda) */
.rb-card.is-planned { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal) inset; }
.rb-planned { display: inline-flex; align-items: center; gap: 4px; font-size: .64rem; font-weight: 800;
    letter-spacing: .03em; text-transform: uppercase; color: #0c8599; background: rgba(12,133,153,.12);
    border: 1px solid rgba(12,133,153,.28); padding: 1px 7px; border-radius: 999px; }

/* Email-my-agenda form */
.agenda-email-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.agenda-email-to { padding: 7px 11px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--surface); font: inherit; color: inherit; min-width: 200px; }
.agenda-email-form .btn { flex: 0 0 auto; }

/* Inline image previews under a comment composer */
.comment-previews { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.comment-prev { display: block; width: 84px; height: 84px; border-radius: 10px; overflow: hidden;
    border: 1px solid var(--line); background: var(--surface-2); }
.comment-prev img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Cleanup: unassigned bulk actions */
.cu-bulkbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px;
    padding: 10px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; position: sticky; top: 8px; z-index: 5; }
.cu-assign-sel { padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--surface); font: inherit; color: inherit; }
.cu-item-check { display: flex; align-items: center; gap: 11px; cursor: pointer; }
.cu-item-check .cu-item-main { display: flex; flex-direction: column; gap: 1px; }
.cu-check { width: 17px; height: 17px; flex: 0 0 auto; }

/* Agenda picker: Mine / All scope toggle */
.agenda-add-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.agenda-add-controls .agenda-add-search { margin-bottom: 0; }
.agenda-scope { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px; }
.agenda-scope-btn { border: none; background: none; cursor: pointer; font: inherit; font-size: .84rem; font-weight: 600;
    color: var(--muted); padding: 5px 14px; border-radius: 999px; }
.agenda-scope-btn.active { background: var(--ink); color: #fff; }
.agenda-box.not-mine { opacity: .92; }
.agenda-box-who { color: var(--muted); }

.cu-due-actions-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cu-due-actions-bar form { margin: 0; }

/* Per-project search box (project banner) */
.proj-search { display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px; border-radius: 999px;
    background: var(--surface); border: 1.5px solid var(--line); color: var(--muted);
    box-shadow: 0 1px 2px rgba(9,19,45,.04); transition: border-color .15s, box-shadow .15s, width .15s; }
.proj-search:hover { border-color: var(--teal); }
.proj-search:focus-within { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(20,184,166,.12); }
.proj-search > i, .proj-search > .i-emoji { color: var(--teal); font-size: 1rem; flex: 0 0 auto; }
.proj-search input { border: none; background: none; outline: none; font: inherit; font-size: .95rem; color: var(--ink); width: 240px; max-width: 38vw; }
.proj-search:focus-within input { width: 300px; }
.proj-search input::placeholder { color: var(--muted); }
@media (max-width: 720px) { .proj-search input { width: 150px; } }

/* Comment formatting: highlight, bullets, edit, preview */
.prose mark, .comment-body mark, .md-preview mark { background: #fde68a; color: #422006; padding: 0 3px; border-radius: 3px; }
.md-hl-demo { background: #fde68a; color: #422006; padding: 0 4px; border-radius: 3px; }
/* Code in comments / notes — inline + copy-friendly blocks */
.prose code.ic, .comment-rendered code.ic, .md-preview code.ic, .task-notes-view code.ic {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86em;
    background: var(--surface-2); border: 1px solid var(--line); padding: 1px 5px; border-radius: 5px; }
.codeblock { position: relative; margin: 10px 0; }
.codeblock pre { margin: 0; background: #0f172a; color: #e6edf3; border-radius: 11px; padding: 13px 15px;
    overflow-x: auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; line-height: 1.55; }
.codeblock pre code { font: inherit; color: inherit; background: none; border: none; padding: 0; white-space: pre; }
.code-copy { position: absolute; top: 8px; right: 8px; font-size: .68rem; font-weight: 700; letter-spacing: .02em;
    padding: 3px 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.12);
    color: #e6edf3; cursor: pointer; opacity: 0; transition: opacity .12s, background .12s; }
.codeblock:hover .code-copy, .code-copy:focus { opacity: 1; }
.code-copy:hover { background: rgba(255,255,255,.24); }
.md-code-demo { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .78em; }
.comment-rendered ul, .md-preview ul { margin: 6px 0; padding-left: 22px; }
.comment-rendered li, .md-preview li { margin: 2px 0; }
.comment-actions { display: inline-flex; align-items: center; gap: 2px; margin-left: 4px; }
.comment-actions .inline { display: inline-flex; }
.comment-edit-btn { background: none; border: none; color: var(--muted); cursor: pointer; font-size: .85rem; padding: 0 4px; opacity: .6; transition: opacity .12s, color .12s; }
.comment:hover .comment-edit-btn { opacity: 1; }
.comment-edit-btn:hover { color: var(--teal); opacity: 1; }
.comment-del-btn:hover { color: var(--danger); }
.comment-edit-form { margin: 8px 0 2px; }
.comment-edit-form textarea { width: 100%; font: inherit; padding: 9px 11px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg-2); color: var(--ink); resize: vertical; }
.comment-edit-actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.comment-form-actions { display: flex; align-items: center; gap: 12px; }

/* ===== iMessage-style to-do comment thread ===== */
/* Box the whole comments area so it reads as its own space, separated from the
   task details above. */
.comments.chat-thread { display: flex; flex-direction: column; margin-top: 26px;
    padding: 20px 22px 22px; border: 1px solid var(--line); border-radius: 16px;
    background: var(--surface); box-shadow: 0 2px 10px rgba(9, 19, 45, .04); }
.chat-thread .comments-title { margin: 0 0 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
/* The composer inside the box reads as an inset input, not a second card. */
.chat-thread .comment-form.card { box-shadow: none; background: var(--surface-2); border-color: var(--line); margin-top: 6px; }
.chat-msg { display: flex; gap: 8px; align-items: flex-end; margin-top: 14px; max-width: 100%; }
.chat-msg--cont { margin-top: 3px; }
.chat-av { width: 30px; flex: 0 0 30px; align-self: flex-start; margin-top: 20px; }
.chat-msg--other.chat-msg--cont .chat-av { margin-top: 0; }
.chat-col { display: flex; flex-direction: column; gap: 3px; max-width: 84%; min-width: 0; }
.chat-author { font-size: .74rem; font-weight: 700; color: var(--muted); margin: 0 0 1px 13px; }
.chat-line { display: flex; align-items: center; gap: 6px; position: relative; }
.chat-bubble { padding: 9px 14px; border-radius: 19px; font-size: .95rem; line-height: 1.5;
    width: fit-content; max-width: 100%; min-width: 0; overflow-wrap: break-word; word-break: normal;
    box-shadow: 0 1px 1px rgba(9,19,45,.05); }
.chat-line { min-width: 0; max-width: 100%; }
.chat-bubble > p:first-child { margin-top: 0; }
.chat-bubble > p:last-child { margin-bottom: 0; }
.chat-bubble .md-img { max-width: 240px; border-radius: 12px; margin: 4px 0; }
/* Long code must scroll/wrap inside the bubble, never widen it. */
.chat-bubble .codeblock, .chat-bubble .codeblock pre { max-width: 100%; }
.chat-bubble code.ic { overflow-wrap: anywhere; word-break: break-all; white-space: pre-wrap; }
.chat-bubble a { overflow-wrap: anywhere; }
.chat-time { font-size: .68rem; color: var(--muted); margin: 1px 13px 0; }
/* Float edit/delete beside the bubble so they don't steal width from it. */
.chat-actions { position: absolute; top: 50%; transform: translateY(-50%); display: inline-flex; gap: 1px;
    opacity: 0; transition: opacity .12s; pointer-events: none; }
.chat-msg:hover .chat-actions { opacity: 1; pointer-events: auto; }
.chat-msg--other .chat-actions { left: calc(100% + 4px); }
.chat-msg--own .chat-actions { right: calc(100% + 4px); }
.chat-actions .comment-edit-btn { width: 26px; height: 26px; }

/* Other people → left, grey bubble */
.chat-msg--other { justify-content: flex-start; }
.chat-msg--other .chat-bubble { background: var(--surface-2); color: var(--ink); border-bottom-left-radius: 6px; }
.chat-msg--other.chat-msg--cont .chat-bubble { border-bottom-left-radius: 19px; }

/* Me → right, brand-gradient bubble */
.chat-msg--own { justify-content: flex-end; }
.chat-msg--own .chat-col { align-items: flex-end; }
.chat-msg--own .chat-line { flex-direction: row-reverse; }
.chat-msg--own .chat-bubble { background: var(--primary); color: #fff; border-bottom-right-radius: 6px; }
.chat-msg--own .chat-time { align-self: flex-end; }
.chat-msg--own .comment-edit-form,
.chat-msg--own .md-preview { align-self: stretch; width: 100%; text-align: left; }
/* Keep text readable inside the coloured "own" bubble */
.chat-msg--own .chat-bubble a { color: #fff; text-decoration: underline; }
.chat-msg--own .chat-bubble strong,
.chat-msg--own .chat-bubble em,
.chat-msg--own .chat-bubble mark { color: #fff; }
.chat-msg--own .chat-bubble mark { background: rgba(255,255,255,.28); }
.chat-msg--own .chat-bubble .mention { color: #fff; background: rgba(255,255,255,.22); }
.chat-msg--own .chat-bubble code { background: rgba(255,255,255,.20); color: #fff; }
.chat-msg--own .chat-bubble .codeblock { background: rgba(0,0,0,.22); }
/* Own bubbles use the coral --primary background, so the global coral-tinted
   ::selection is nearly invisible when you highlight text inside them to copy.
   Give selected text a high-contrast light fill with dark ink instead. */
.chat-msg--own .chat-bubble ::selection,
.chat-msg--own .chat-bubble::selection { background: #fff; color: var(--primary); }
.chat-msg--own .chat-bubble ::-moz-selection,
.chat-msg--own .chat-bubble::-moz-selection { background: #fff; color: var(--primary); }
/* Reactions sit under the bubble, aligned to the sender's side */
.chat-msg .reactions { margin-top: 2px; }
.chat-msg--own .reactions { justify-content: flex-end; }
@media (max-width: 620px) {
    .chat-col { max-width: 82%; }
    /* On phones the side rail of hover actions (now reply + edit + delete)
       pokes past the viewport — park it above the bubble instead. */
    .chat-msg--other .chat-actions { left: auto; right: 0; top: auto; bottom: calc(100% + 2px); transform: none; }
}
.comment-img-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: .84rem;
    font-weight: 600; color: var(--muted); padding: 5px 10px; border-radius: 8px; border: 1px solid var(--line-2); }
.comment-img-btn:hover { color: var(--primary); border-color: var(--primary); background: var(--surface-2); }
.md-preview { margin-top: 8px; padding: 10px 13px; background: var(--surface-2); border: 1px dashed var(--line-2); border-radius: 10px; }
.md-btn.is-on { border-color: var(--ink); background: var(--surface-2); }

/* Inbound log: file-to-project action */
.il-file-form { display: inline-flex; gap: 6px; align-items: center; }
.il-file-form select { font-size: .8rem; padding: 5px 8px; max-width: 150px; }

/* Inbound log actions */
.il-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.il-file-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* Hidden phases (task lists kept in reserve) */
.hidden-phases { margin: 8px 0 18px; border: 1px dashed var(--line-2); border-radius: 12px; padding: 10px 14px; background: var(--surface-2); }
.hidden-phases > summary { cursor: pointer; font-weight: 600; font-size: .9rem; display: flex; align-items: center; gap: 8px; }
.hidden-phases-n { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--muted); color: #fff; font-size: .72rem; font-weight: 700; }
.hidden-phases-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.hidden-phase-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; }
.hidden-phase-name { font-weight: 600; display: inline-flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.hidden-phase-row .muted { flex: 0 0 auto; }
.phase-hide-form { margin-top: 6px; }

/* Visible per-phase Hide button */
.phase-hide-form { margin: 6px 0 2px; }
.phase-hide-btn { background: none; border: none; cursor: pointer; color: var(--muted); font-size: .78rem; font-weight: 600;
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 7px; }
.phase-hide-btn:hover { color: var(--primary); background: var(--surface-2); }

/* ===== Website Link Checker ===== */
.lc-hero { align-items: flex-start; margin-bottom: 24px; }
.lc-hero .display { margin-top: 4px; }
.lc-wrap { max-width: 1000px; }
.lc-form { display: flex; flex-direction: column; gap: 14px; padding: 24px 26px; }
.lc-form .btn-primary { align-self: flex-start; }
.lc-check { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--muted); }
.lc-check input { width: auto; transform: scale(1.15); }
#lc-progress { margin-top: 20px; }
.lc-progress-stats { display: flex; justify-content: space-between; font-size: .85rem; font-weight: 600; margin-bottom: 8px; }
.lc-bar-track { width: 100%; height: 12px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.lc-bar-fill { width: 0%; height: 100%; background: var(--grad); border-radius: 999px; transition: width .3s ease; }
#lc-results { margin-top: 22px; padding: 24px 26px; }
#lc-results h3 { margin: 0 0 6px; }
.lc-table-scroll { overflow-x: auto; margin-top: 14px; }
.lc-table { width: 100%; min-width: 820px; border-collapse: collapse; font-size: .86rem; }
.lc-table th, .lc-table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.lc-table th { background: var(--surface-2); font-weight: 700; text-transform: uppercase; font-size: .72rem; letter-spacing: .4px; color: var(--muted); }
.lc-table tbody tr:nth-child(even), .lc-table tbody tr:nth-of-type(even) { background: var(--surface-2); }
.lc-code { text-align: center; font-weight: 700; }
.lc-link { font-family: var(--mono, monospace); font-size: .8rem; word-break: break-all; }
.lc-link a { color: var(--ink); text-decoration: none; }
.lc-link a:hover { text-decoration: underline; }
.lc-ok { color: #16a34a; }
.lc-err { color: var(--danger); }
.lc-warn { color: #e0890b; }
.lc-summary { margin-top: 18px; padding: 14px 16px; border-radius: 10px; font-weight: 600; text-align: center; }
.lc-summary-err { background: rgba(220, 38, 38, .08); border: 1px solid var(--danger); color: var(--danger); }
.lc-summary-ok { background: rgba(22, 163, 74, .08); border: 1px solid #16a34a; color: #16a34a; }

/* Link Checker — create-a-to-do */
.lc-act { white-space: nowrap; }
.btn-xs { padding: 3px 9px; font-size: .74rem; border-radius: 7px; }
.lc-todo-btn.is-added { color: #16a34a; border-color: #16a34a; opacity: 1; }
.lc-modal { position: fixed; inset: 0; z-index: 9998; display: flex; align-items: flex-start; justify-content: center;
    background: rgba(9, 19, 45, .55); padding: 60px 20px; overflow-y: auto; }
.lc-modal[hidden] { display: none; }
.lc-modal-card { position: relative; width: 100%; max-width: 520px; padding: 26px; }
.lc-modal-card h3 { margin: 0 0 16px; }
.lc-modal-x { position: absolute; top: 14px; right: 16px; background: none; border: none; font-size: 1.5rem;
    line-height: 1; color: var(--muted); cursor: pointer; }
.lc-modal-x:hover { color: var(--ink); }
.lc-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.lc-modal-grid .field:first-child { grid-column: 1 / -1; }
.lc-modal-actions { display: flex; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
#lc-todo-notes { font-family: var(--mono, monospace); font-size: .8rem; line-height: 1.5; }
.lc-summary .btn { margin-left: 12px; vertical-align: middle; }

/* ===== Summit — sticky AI mascot assistant (glassmorphism) ===== */
.summit { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
/* Glowing gradient ring around the mascot — high-tech "AI online" feel. */
.summit-fab { position: relative; width: 62px; height: 62px; border-radius: 50%; border: none; padding: 3px; cursor: pointer;
    background: conic-gradient(from 140deg, #ff5a4e, #faca2c, #16c0b7, #ff5a4e);
    box-shadow: 0 8px 26px rgba(9, 19, 45, .28), 0 0 0 1px rgba(255,255,255,.25) inset; overflow: visible;
    transition: transform .15s, box-shadow .15s; }
.summit-fab::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; z-index: -1;
    background: conic-gradient(from 140deg, #ff5a4e, #faca2c, #16c0b7, #ff5a4e); filter: blur(9px); opacity: .5;
    animation: summit-spin 6s linear infinite; }
@keyframes summit-spin { to { transform: rotate(360deg); } }
.summit-fab:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 14px 36px rgba(9, 19, 45, .34); }
.summit-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; background: var(--surface); }
.summit-fab--fallback { background: var(--grad); }
.summit-fab--fallback::after { content: '⛰️'; font-size: 1.7rem; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; }
.summit-panel { width: 304px; max-width: min(304px, 82vw); padding: 0 16px 16px;
    background: rgba(255, 255, 255, .72); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5);
    border: 1px solid rgba(255, 255, 255, .55); border-radius: 20px;
    box-shadow: 0 20px 50px rgba(9, 19, 45, .28), 0 0 0 1px rgba(9,19,45,.04);
    max-height: min(72vh, 600px); overflow-y: auto; overscroll-behavior: contain; }
[data-theme="dark"] .summit-panel { background: rgba(20, 28, 48, .68); border-color: rgba(255,255,255,.10); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .summit-panel { background: rgba(20, 28, 48, .68); border-color: rgba(255,255,255,.10); } }
.summit-panel[hidden] { display: none; }
/* Sticky header so the close button stays reachable while the plan scrolls. */
.summit-panel-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center;
    gap: 10px; padding: 14px 0 8px; margin-bottom: 4px; border-bottom: 1px solid rgba(9,19,45,.08);
    background: rgba(255,255,255,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
[data-theme="dark"] .summit-panel-head { background: rgba(20,28,48,.55); border-bottom-color: rgba(255,255,255,.08); }
.summit-illus { width: 40px; height: 40px; object-fit: contain; flex: 0 0 auto; }
.summit-name { font-family: var(--display); font-weight: 800; font-size: 1.05rem; flex: 1; }
.summit-act--cta { background: var(--grad); color: #fff; border-color: transparent; justify-content: center; }
.summit-act--cta:hover { color: #fff; filter: brightness(1.05); }
.summit-x { background: none; border: none; font-size: 1.35rem; line-height: 1; color: var(--muted); cursor: pointer; }
.summit-x:hover { color: var(--ink); }
.summit-head-txt { flex: 1; display: flex; flex-direction: column; line-height: 1.15; }
.summit-tag { font-size: .72rem; font-weight: 600; color: var(--muted); }
.summit-hi { font-size: .92rem; color: var(--ink); font-weight: 600; margin: 0 0 12px; line-height: 1.5; }
.summit-actions { display: flex; flex-direction: column; gap: 8px; }
.summit-act { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line);
    background: var(--surface-2); font-size: .85rem; font-weight: 600; color: var(--ink); cursor: pointer; text-align: left; width: 100%; }
.summit-act:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }
.summit-act--ai { background: var(--grad); color: #fff; border-color: transparent; justify-content: center; }
.summit-act--ai:hover { color: #fff; filter: brightness(1.05); border-color: transparent; }
.summit-ai { margin-top: 10px; font-size: .85rem; }
.summit-ai:not([hidden]) { margin-bottom: 4px; }
/* Quick-action grid */
.summit-grid-label { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 16px 0 8px; }
.summit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.summit-qa { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(9,19,45,.08);
    background: rgba(255,255,255,.45); font-size: .8rem; font-weight: 600; color: var(--ink); }
.summit-qa:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; background: rgba(255,255,255,.75); }
[data-theme="dark"] .summit-qa { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.09); }
[data-theme="dark"] .summit-qa:hover { background: rgba(255,255,255,.12); }
.summit-qa-ic { display: inline-flex; width: 16px; justify-content: center; color: var(--muted); }
.summit-qa:hover .summit-qa-ic { color: var(--primary); }
.summit-qa--bad .summit-qa-ic { color: var(--danger); }
.summit-qa--warn .summit-qa-ic { color: #e0890b; }

/* ===== Landing: Meet Summit ===== */
.lp-summit-band { overflow: hidden; }
.lp-summit-wrap { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: 380px 1fr; gap: 48px; align-items: center; }
.lp-summit-art { position: relative; text-align: center; }
.lp-summit-art > img { width: 100%; max-width: 340px; filter: drop-shadow(0 24px 48px rgba(9,19,45,.18)); }
.lp-summit-poses { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
.lp-summit-poses img { width: 56px; height: 56px; object-fit: contain; border-radius: 50%; background: var(--surface);
    border: 1px solid var(--line); box-shadow: 0 4px 12px rgba(9,19,45,.08); padding: 4px; }
.lp-summit-copy .eyebrow { margin-bottom: 8px; }
.lp-summit-list { list-style: none; padding: 0; margin: 18px 0 24px; display: flex; flex-direction: column; gap: 12px; }
.lp-summit-list li { display: flex; align-items: center; gap: 12px; font-size: 1.02rem; color: var(--ink); }
.lp-summit-ck { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
    background: rgba(255,90,78,.1); color: var(--primary); }
@media (max-width: 860px) {
    .lp-summit-wrap { grid-template-columns: 1fr; gap: 28px; max-width: 520px; text-align: center; }
    .lp-summit-list { text-align: left; }
    .lp-summit-art > img { max-width: 240px; }
}

.gm-sent-badge { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: .68rem; font-weight: 700;
    color: #0f7a52; background: #e8f7f0; border: 1px solid #a7e0c8; padding: 1px 8px; border-radius: 999px; vertical-align: middle; }

/* Summit — ask box, actions, remember, memory link */
.summit-ask { display: flex; gap: 6px; margin-bottom: 10px; }
.summit-ask input { flex: 1; min-width: 0; font: inherit; font-size: .85rem; padding: 9px 12px; border-radius: 999px;
    border: 1px solid rgba(9,19,45,.12); background: rgba(255,255,255,.6); color: var(--ink); }
[data-theme="dark"] .summit-ask input { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
.summit-ask input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(255,90,78,.16); }
.summit-ask-send { flex: 0 0 auto; width: 38px; border: none; border-radius: 50%; cursor: pointer; color: #fff;
    background: var(--grad); font-size: .85rem; }
.summit-act-row { display: flex; flex-direction: column; gap: 8px; }
.summit-act--ai2 { background: #09132d; color: #fff; border-color: transparent; justify-content: center; }
[data-theme="dark"] .summit-act--ai2 { background: rgba(255,255,255,.12); }
.summit-act--ai2:hover { color: #fff; filter: brightness(1.12); border-color: transparent; }
.summit-remember { margin-top: 16px; border-top: 1px solid rgba(9,19,45,.08); padding-top: 12px; }
.summit-remember > summary { list-style: none; cursor: pointer; font-size: .82rem; font-weight: 700; color: var(--muted);
    display: inline-flex; align-items: center; gap: 7px; }
.summit-remember > summary::-webkit-details-marker { display: none; }
.summit-remember > summary:hover { color: var(--primary); }
.summit-remember-hint { margin: 8px 0; }
.summit-remember textarea { width: 100%; font: inherit; font-size: .84rem; padding: 8px 10px; border-radius: 10px;
    border: 1px solid rgba(9,19,45,.12); background: rgba(255,255,255,.6); color: var(--ink); resize: vertical; }
[data-theme="dark"] .summit-remember textarea { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
.summit-remember-scope { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--muted); margin: 6px 0; }
.summit-remember-scope input { width: auto; }
.summit-remember-actions { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.summit-mem-link { display: block; margin-top: 12px; font-size: .78rem; font-weight: 600; color: var(--muted); text-align: center; }
.summit-mem-link:hover { color: var(--primary); }

/* Summit memory review page */
.sm-mem-group { max-width: 760px; margin: 0 auto 26px; }
.sm-mem-h { font-size: 1rem; margin: 0 0 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-size: .78rem; font-weight: 800; }
.sm-mem-list { padding: 4px 18px; }
.sm-mem-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.sm-mem-row:last-child { border-bottom: none; }
.sm-mem-note { font-size: .95rem; color: var(--ink); }
.sm-mem-tag { display: inline-block; margin-left: 8px; font-size: .7rem; font-weight: 700; color: var(--muted); background: var(--surface-2); padding: 1px 8px; border-radius: 999px; }
.sm-mem-auto { background: rgba(22,192,183,.14); color: #0f766e; }
.sm-mem-meta { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; white-space: nowrap; }
.sm-mem-x { background: none; border: none; color: var(--muted); cursor: pointer; }
.sm-mem-x:hover { color: var(--danger); }

/* Summit memory — empty state */
.sm-mem-hero .eyebrow i, .sm-mem-hero .eyebrow .i-emoji { color: var(--brand, #ff5a4e); margin-right: 4px; }
.sm-mem-empty { max-width: 560px; margin: 8px auto 26px; padding: 40px 32px; text-align: center; }
.sm-mem-empty-art { display: flex; justify-content: center; margin-bottom: 6px; }
.sm-mem-empty-art .summit-mark { filter: drop-shadow(0 6px 14px rgba(255,90,78,.18)); }
.sm-mem-empty h2 { font-size: 1.15rem; margin: 8px 0 6px; }
.sm-mem-empty > p { margin: 0 auto; max-width: 420px; line-height: 1.55; }
.sm-mem-examples { list-style: none; margin: 22px auto 0; padding: 0; max-width: 380px; display: grid; gap: 8px; text-align: left; }
.sm-mem-examples li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); color: var(--ink); font-size: .9rem; }
.sm-mem-examples li i, .sm-mem-examples li .i-emoji { color: var(--brand, #ff5a4e); opacity: .7; font-size: .85rem; }

/* Summit proactive nudge */
.summit-fab-dot { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px;
    border-radius: 999px; background: var(--danger); color: #fff; font-size: .68rem; font-weight: 800;
    display: grid; place-items: center; border: 2px solid var(--surface); box-shadow: 0 2px 6px rgba(0,0,0,.25);
    animation: summit-dot-pulse 1.8s ease-in-out infinite; }
@keyframes summit-dot-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.summit-nudge { display: flex; align-items: center; gap: 9px; margin: 2px 0 12px; padding: 10px 12px; border-radius: 12px;
    background: rgba(220,38,38,.08); border: 1px solid rgba(220,38,38,.25); color: var(--danger); font-size: .82rem; font-weight: 600; }
.summit-nudge:hover { background: rgba(220,38,38,.14); text-decoration: none; }

/* ===== Public client status page ===== */
.cs-hero { text-align: center; margin: 8px 0 34px; }
.cs-eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; font-weight: 800; color: var(--brand, #ff5a4e); margin-bottom: 8px; }
.cs-title { font-family: var(--display); font-weight: 800; font-size: clamp(1.7rem, 4vw, 2.5rem); letter-spacing: -.02em; margin: 0 0 20px; }
.cs-progress { display: flex; align-items: center; gap: 14px; max-width: 520px; margin: 0 auto; }
.cs-progress-track { flex: 1; height: 12px; background: rgba(9,19,45,.08); border-radius: 999px; overflow: hidden; }
.cs-progress-fill { height: 100%; background: var(--brand, #ff5a4e); border-radius: 999px; transition: width .4s; }
.cs-progress-pct { font-weight: 800; font-family: var(--display); white-space: nowrap; }
.cs-section { max-width: 640px; margin: 0 auto 32px; }
.cs-h2 { font-size: 1.15rem; font-weight: 800; margin: 0 0 16px; }
.cs-phases { list-style: none; margin: 0; padding: 0; }
.cs-phase { display: flex; gap: 14px; padding: 0 0 18px; position: relative; }
.cs-phase:not(:last-child)::before { content: ''; position: absolute; left: 12px; top: 26px; bottom: 0; width: 2px; background: rgba(9,19,45,.1); }
.cs-phase-dot { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
    font-size: .8rem; font-weight: 800; color: #fff; background: rgba(9,19,45,.18); z-index: 1; }
.cs-phase--complete .cs-phase-dot { background: #16a34a; }
.cs-phase--active .cs-phase-dot { background: var(--brand, #ff5a4e); }
.cs-phase-body { flex: 1; min-width: 0; }
.cs-phase-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.cs-phase-name { font-weight: 700; }
.cs-phase--upcoming .cs-phase-name { color: var(--muted); }
.cs-phase-meta { font-size: .8rem; color: var(--muted); white-space: nowrap; }
.cs-phase-track { height: 6px; background: rgba(9,19,45,.07); border-radius: 999px; overflow: hidden; margin-top: 8px; }
.cs-phase-bar { height: 100%; background: var(--brand, #ff5a4e); border-radius: 999px; }
.cs-phase--complete .cs-phase-bar { background: #16a34a; }
.cs-updates { display: flex; flex-direction: column; gap: 14px; }
.cs-update { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; background: var(--surface); }
.cs-update-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-bottom: 8px; }
.cs-update-title { font-weight: 700; }
.cs-update-date { font-size: .8rem; color: var(--muted); white-space: nowrap; }
.cs-empty { text-align: center; color: var(--muted); padding: 40px 0; }

/* Project-side share control */
.share-status { display: flex; flex-direction: column; gap: 8px; }
.share-status-link { display: flex; gap: 6px; }
.share-status-link input { flex: 1; min-width: 0; font-size: .82rem; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--ink); }

/* ===== Automations ===== */
.au-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.au-rule { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; }
.au-rule.au-off { opacity: .55; }
.au-rule-name { font-weight: 700; margin-bottom: 4px; }
.au-rule-flow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.au-chip { font-size: .82rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.au-when { background: rgba(255,90,78,.1); color: var(--primary); }
.au-do { background: rgba(22,163,74,.12); color: #16a34a; }
.au-arrow { color: var(--muted); font-weight: 800; }
.au-scope { margin-left: 4px; }
.au-rule-meta { margin-top: 6px; }
.au-rule-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.au-add { padding: 16px 18px; }
.au-add > summary { cursor: pointer; font-weight: 700; list-style: none; display: inline-flex; align-items: center; gap: 7px; }
.au-add > summary::-webkit-details-marker { display: none; }
.au-add[open] > summary { margin-bottom: 14px; }
.au-form { display: flex; flex-direction: column; gap: 14px; }
.au-grid { display: grid; grid-template-columns: 2fr 1fr 2fr; gap: 12px; align-items: end; }
.au-action-cfg { display: flex; flex-direction: column; gap: 12px; padding: 12px 14px; background: var(--surface-2); border-radius: 10px; }
@media (max-width: 640px) { .au-grid { grid-template-columns: 1fr; } }

/* Zapier-style builder */
.au-h2 { font-size: 1.12rem; margin: 0 0 3px; display: flex; align-items: center; gap: 8px; }
.au-h2-sub { margin: 0 0 14px; }
.au-recipes { margin: 6px 0 30px; }
.au-recipe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.au-recipe { display: flex; gap: 12px; text-align: left; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); cursor: pointer; transition: border-color .12s, transform .12s, box-shadow .12s; }
.au-recipe:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(9,19,45,.08); }
.au-recipe-picked { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(31,111,235,.18); }
.au-recipe-ic { flex: 0 0 auto; font-size: 1.3rem; line-height: 1.4; color: var(--primary); width: 1.5rem; text-align: center; }
.au-recipe-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.au-recipe-t { font-weight: 700; font-size: .92rem; }
.au-recipe-d { color: var(--muted); font-size: .8rem; line-height: 1.4; }
.au-recipe-flow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; font-size: .68rem; }
.au-mini-when, .au-mini-do { background: var(--surface-2); border-radius: 999px; padding: 2px 8px; color: var(--ink); white-space: nowrap; }
.au-mini-arrow { color: var(--muted); }

.au-builder { padding: 22px 24px; max-width: 900px; }
.au-builder #au-form { display: flex; flex-direction: column; gap: 0; }
.au-step { padding: 4px 0 2px; }
.au-step-head { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1rem; margin: 14px 0 12px; }
.au-step-n { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 800; }
.au-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.au-tile { position: relative; display: flex; align-items: flex-start; gap: 11px; padding: 13px 14px; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; background: var(--surface); transition: border-color .12s, background .12s; }
.au-tile:hover { border-color: var(--primary); }
.au-tile input { position: absolute; opacity: 0; pointer-events: none; }
.au-tile.selected { border-color: var(--primary); background: rgba(31,111,235,.05); }
.au-tile-ic { flex: 0 0 auto; font-size: 1.05rem; line-height: 1.3; color: var(--primary); width: 1.3rem; text-align: center; }
.au-tile-body { display: flex; flex-direction: column; gap: 2px; }
.au-tile-t { font-weight: 700; font-size: .88rem; }
.au-tile-d { color: var(--muted); font-size: .76rem; line-height: 1.35; }
.au-tile-check { position: absolute; top: 10px; right: 11px; color: var(--primary); opacity: 0; font-size: .8rem; }
.au-tile.selected .au-tile-check { opacity: 1; }
.au-days-wrap { margin-top: 12px; max-width: 220px; }
.au-flow-arrow { text-align: center; color: var(--muted); font-size: 1.1rem; margin: 6px 0; }
.au-cfg-wrap { margin-top: 12px; }
.au-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.au-ph { margin-top: 12px; }
.au-preview { margin-top: 18px; padding: 14px 16px; border: 1px dashed var(--primary); border-radius: 12px; background: rgba(31,111,235,.05); display: flex; flex-direction: column; gap: 8px; }
.au-preview-tag { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--primary); display: inline-flex; align-items: center; gap: 6px; }
.au-preview-flow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.au-preview-when { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.au-preview-msg { flex: 1 1 220px; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: .86rem; white-space: pre-wrap; }
.au-preview-note { margin: 0; }
.au-builder .btn-primary { margin-top: 20px; align-self: flex-start; }

/* Automation run history */
.au-hist { padding: 6px 18px; max-width: 800px; }
.au-hist-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.au-hist-row:last-child { border-bottom: none; }
.au-hist-ic { flex: 0 0 auto; color: var(--muted); }
.au-oc-ok .au-hist-ic { color: #16a34a; }
.au-oc-failed .au-hist-ic { color: var(--danger, #dc2626); }
.au-oc-skipped .au-hist-ic { color: #d97706; }
.au-hist-text { flex: 1 1 auto; font-size: .9rem; }
.au-hist-when { flex: 0 0 auto; white-space: nowrap; }
.au-hist-foot { max-width: 800px; margin: 10px auto 0; text-align: center; }
@media (max-width: 640px) { .au-grid2 { grid-template-columns: 1fr; } }

/* Changelog */
.cl-add { padding: 16px 18px; max-width: 760px; margin: 0 auto 22px; }
.cl-add > summary { cursor: pointer; font-weight: 700; list-style: none; display: inline-flex; align-items: center; gap: 7px; }
.cl-add > summary::-webkit-details-marker { display: none; }
.cl-add[open] > summary { margin-bottom: 14px; }
.cl-form { display: flex; flex-direction: column; gap: 12px; }
.cl-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cl-check { display: flex; align-items: flex-start; gap: 8px; font-size: .9rem; }
.cl-check input { margin-top: 3px; }
@media (max-width: 560px) { .cl-form-row { grid-template-columns: 1fr; } }

.cl-timeline { list-style: none; margin: 0 auto; padding: 0; max-width: 760px; position: relative; }
.cl-timeline::before { content: ''; position: absolute; left: 15px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.cl-daymark { margin: 22px 0 12px 44px; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.cl-daymark:first-child { margin-top: 4px; }
.cl-item { display: flex; gap: 16px; padding: 0 0 18px; position: relative; }
.cl-dot { flex: 0 0 32px; height: 32px; width: 32px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: .95rem; z-index: 1; }
.cl-dot.cl-feature { border-color: #7c3aed; background: rgba(124,58,237,.1); }
.cl-dot.cl-improvement { border-color: #f0a500; background: rgba(240,165,0,.1); }
.cl-dot.cl-fix { border-color: #2f9e44; background: rgba(47,158,68,.1); }
.cl-dot.cl-announcement { border-color: #1f6feb; background: rgba(31,111,235,.1); }
.cl-body { flex: 1 1 auto; padding-top: 3px; }
.cl-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.cl-badge { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; }
.cl-badge.cl-feature { background: rgba(124,58,237,.14); color: #6d28d9; }
.cl-badge.cl-improvement { background: rgba(240,165,0,.16); color: #b45309; }
.cl-badge.cl-fix { background: rgba(47,158,68,.14); color: #15803d; }
.cl-badge.cl-announcement { background: rgba(31,111,235,.14); color: #1d4ed8; }
.cl-title { font-weight: 700; }
.cl-ver-tag { font-size: .7rem; font-weight: 700; color: var(--muted); background: var(--surface-2); padding: 1px 7px; border-radius: 6px; }
.cl-note { margin: 5px 0 0; color: var(--ink); line-height: 1.55; }
.cl-meta { margin: 6px 0 0; }

/* Workspace tools */
.tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; max-width: 940px; }
.tools-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); text-decoration: none; color: inherit; transition: border-color .12s, transform .12s, box-shadow .12s; }
.tools-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(9,19,45,.07); }
.tools-ic { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--primary); }
.tools-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tools-t { font-weight: 700; font-size: .95rem; }
.tools-d { line-height: 1.4; }
.tools-go { flex: 0 0 auto; color: var(--muted); }
.tools-card:hover .tools-go { color: var(--primary); }

/* Wins feed & employee of the month */
.w-eom-banner { display: flex; align-items: center; gap: 16px; padding: 16px 20px; max-width: 720px; margin-bottom: 16px; background: linear-gradient(100deg, rgba(240,165,0,.12), rgba(240,165,0,.03)); border: 1px solid rgba(240,165,0,.35); }
.w-eom-crown { font-size: 1.9rem; color: #f0a500; flex: 0 0 auto; }
.w-eom-body { display: flex; flex-direction: column; gap: 3px; }
.w-eom-label { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #b45309; }
.w-eom-name { display: inline-flex; align-items: center; gap: 8px; font-size: 1.05rem; text-decoration: none; color: inherit; }
/* Employee-of-the-Month voting */
.w-vote { max-width: 720px; margin-bottom: 16px; padding: 16px 20px; }
.w-vote-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.w-vote-title { font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.w-vote-sub { margin: 4px 0 12px; }
.w-vote-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.w-vote-opt { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.w-vote-form .w-vote-opt:hover { border-color: var(--primary); }
.w-vote-opt.picked { border-color: var(--primary); background: rgba(255,90,78,.06); }
.w-vote-opt input[type=radio] { margin: 0; flex: 0 0 auto; }
.w-vote-name { flex: 1; font-weight: 600; }
.w-vote-count { flex: 0 0 auto; min-width: 22px; text-align: center; font-weight: 700; font-size: .8rem; padding: 1px 8px; border-radius: 999px; background: var(--surface-2, rgba(0,0,0,.05)); color: var(--muted); }
.w-vote-reason { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: .88rem; margin-bottom: 10px; }
.w-vote-you { margin-left: 10px; }
.w-vote-list.closed .w-vote-opt { cursor: default; }
.w-feed { display: flex; flex-direction: column; gap: 8px; max-width: 720px; }
.w-row { display: flex; align-items: center; gap: 13px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-decoration: none; color: inherit; border-left: 3px solid var(--line); }
a.w-row:hover { border-color: var(--primary); }
.w-row.w-ach { border-left-color: #f0a500; }
.w-row.w-deal { border-left-color: #16a34a; }
.w-row.w-eom { border-left-color: #7c3aed; }
.w-row.w-kudos { border-left-color: #db2777; }
.w-ic { flex: 0 0 auto; width: 22px; text-align: center; }
.w-ach .w-ic { color: #f0a500; }
.w-deal .w-ic { color: #16a34a; }
.w-eom .w-ic { color: #7c3aed; }
.w-text { flex: 1 1 auto; min-width: 0; font-size: .9rem; color: inherit; text-decoration: none; }
a.w-text:hover { text-decoration: underline; }
.w-clap { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 3px 10px; font-size: .82rem; cursor: pointer; color: var(--muted); transition: transform .1s, border-color .1s, background .1s; }
.w-clap:hover { border-color: var(--primary); }
.w-clap:active { transform: scale(1.15); }
.w-clap.on { background: rgba(240,165,0,.14); border-color: rgba(240,165,0,.5); color: #b45309; font-weight: 700; }
.w-clap-n { font-variant-numeric: tabular-nums; }
.w-when { flex: 0 0 auto; white-space: nowrap; }

/* Team leaderboard */
.lb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-width: 720px; }
.lb-row { display: flex; align-items: center; gap: 14px; padding: 12px 18px; }
.lb-row.lb-top { border: 1px solid rgba(240,165,0,.3); }
.lb-row.lb-me { background: rgba(31,111,235,.05); }
.lb-rank { flex: 0 0 auto; width: 28px; text-align: center; font-weight: 800; color: var(--muted); font-size: 1rem; }
.lb-rank i { font-size: 1.15rem; }
.lb-person { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; text-decoration: none; color: inherit; }
.lb-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-metric { flex: 0 0 auto; text-align: right; min-width: 70px; font-size: .9rem; }
.lb-primary strong { color: var(--primary); }
.lb-streak { color: #ea580c; min-width: 64px; }
@media (max-width: 560px) { .lb-metric { min-width: 52px; font-size: .82rem; } .lb-primary { min-width: 60px; } }

/* Person profile */
.mc-name-link { color: inherit; text-decoration: none; }
.mc-name-link:hover { text-decoration: underline; }
.mc-avatar-link { display: inline-block; }
.pf-head { display: flex; align-items: center; gap: 20px; padding: 22px 24px; flex-wrap: wrap; }
.pf-avatar .avatar { width: 76px; height: 76px; font-size: 1.6rem; }
.pf-id { flex: 1 1 auto; min-width: 0; }
.pf-id h1 { margin: 0 0 3px; font-size: 1.4rem; }
.pf-you { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; background: var(--surface-2); color: var(--muted); padding: 2px 8px; border-radius: 999px; vertical-align: middle; }
.pf-top { margin: 6px 0 0; }
.pf-streak { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; color: #ea580c; background: rgba(234,88,12,.1); border-radius: 14px; padding: 10px 16px; }
.pf-streak span { font-size: 1.5rem; font-weight: 800; line-height: 1; margin-top: 2px; }
.pf-streak small { color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; }
.pf-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin: 18px 0 26px; }
.pf-stat { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px; text-align: center; }
.pf-stat-n { display: block; font-size: 1.5rem; font-weight: 800; }
.pf-stat-l { display: block; font-size: .72rem; color: var(--muted); margin-top: 2px; }
.pf-section { margin-bottom: 26px; }
.pf-h2 { font-size: 1.05rem; display: flex; align-items: center; gap: 8px; margin: 0 0 14px; }
.pf-h2 i { color: var(--primary); }
.pf-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.pf-badge { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 16px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.pf-badge.locked { opacity: .45; filter: grayscale(1); }
.pf-badge-ic { font-size: 1.6rem; color: var(--primary); }
.pf-badge.earned .pf-badge-ic { color: #f0a500; }
.pf-badge-l { font-weight: 800; font-size: .9rem; }
.pf-badge-d { line-height: 1.35; }
.pf-recent { padding: 4px 18px; }
.pf-recent-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.pf-recent-row:last-child { border-bottom: none; }
.pf-recent-row:hover { background: rgba(9,19,45,.02); }
.pf-recent-check { color: #16a34a; flex: 0 0 auto; }
.pf-recent-task { flex: 1 1 auto; min-width: 0; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-recent-proj { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--muted); }
.pf-dot { width: 8px; height: 8px; border-radius: 50%; }
.pf-recent-when { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 820px) { .pf-stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .pf-stats { grid-template-columns: repeat(2, 1fr); } }

/* Client health & churn radar */
.ch-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 640px; margin: 0 0 22px; }
.ch-stat { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; text-align: center; }
.ch-stat-n { display: block; font-size: 1.7rem; font-weight: 800; }
.ch-stat-l { display: block; font-size: .78rem; color: var(--muted); margin-top: 2px; }
.ch-avg-good { color: #16a34a; }
.ch-avg-watch { color: #d97706; }
.ch-avg-risk { color: var(--danger, #dc2626); }
.ch-list { display: flex; flex-direction: column; gap: 10px; }
.ch-row { display: flex; align-items: center; gap: 16px; padding: 14px 18px; text-decoration: none; color: inherit; border-left: 4px solid var(--line); transition: transform .12s, box-shadow .12s; }
.ch-row:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(9,19,45,.07); }
.ch-band-good { border-left-color: #16a34a; }
.ch-band-watch { border-left-color: #d97706; }
.ch-band-risk { border-left-color: var(--danger, #dc2626); }
.ch-score { position: relative; flex: 0 0 auto; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; }
.ch-score-n { position: relative; z-index: 1; font-size: 1.1rem; font-weight: 800; }
.ch-score-ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(currentColor calc(var(--pct) * 1%), var(--surface-2) 0); -webkit-mask: radial-gradient(circle 18px at center, transparent 98%, #000 100%); mask: radial-gradient(circle 18px at center, transparent 98%, #000 100%); }
.ch-band-good .ch-score-ring { color: #16a34a; }
.ch-band-watch .ch-score-ring { color: #d97706; }
.ch-band-risk .ch-score-ring { color: var(--danger, #dc2626); }
.ch-main { flex: 1 1 auto; min-width: 0; }
.ch-name { display: flex; align-items: center; gap: 8px; font-weight: 700; flex-wrap: wrap; }
.ch-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.ch-reasons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.ch-reason { font-size: .74rem; padding: 2px 9px; border-radius: 999px; background: rgba(220,38,38,.08); color: #b91c1c; }
.ch-reason-ok { background: rgba(22,163,74,.12); color: #15803d; }
.ch-action { margin-top: 8px; font-size: .82rem; color: var(--ink); font-weight: 600; }
.ch-action i, .ch-action svg { color: var(--primary, #2563eb); margin-right: 4px; }
.ch-band { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: 0 0 auto; }
.ch-band-tag { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 2px 9px; border-radius: 999px; }
.ch-band-tag.ch-band-good { background: rgba(22,163,74,.14); color: #15803d; }
.ch-band-tag.ch-band-watch { background: rgba(217,119,6,.14); color: #b45309; }
.ch-band-tag.ch-band-risk { background: rgba(220,38,38,.14); color: #b91c1c; }
.ch-trend-up { color: #16a34a; }
.ch-trend-down { color: var(--danger, #dc2626); }
.ch-trend-flat { color: var(--muted); }
.ch-delta { font-size: .74rem; font-weight: 800; display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 999px; }
.ch-delta-up { color: #15803d; background: rgba(22,163,74,.12); }
.ch-delta-down { color: #b91c1c; background: rgba(220,38,38,.1); }
.ch-delta-flat { color: var(--muted); background: var(--surface-2); }
.ch-foot { max-width: 760px; margin-top: 14px; }
@media (max-width: 560px) { .ch-summary { grid-template-columns: 1fr; } .ch-band { flex-direction: row; } }

/* Instant project from a domain */
.db-head-actions { display: flex; gap: 10px; align-items: center; }
.ip-card { max-width: 720px; margin: 0 auto; padding: 22px 24px; }
.ip-form { display: flex; flex-direction: column; gap: 14px; }
.ip-url input { font-size: 1.05rem; padding: 12px 14px; }
.ip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ip-note { display: flex; align-items: center; gap: 8px; }
.ip-note .fa-spinner { animation: ip-spin 1s linear infinite; }
@keyframes ip-spin { to { transform: rotate(360deg); } }
.ip-stats { margin-top: 8px; }
.ip-plan { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.ip-phase { padding: 16px 20px; }
.ip-phase-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ip-phase-n { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .82rem; font-weight: 800; }
.ip-phase-head h3 { margin: 0; font-size: 1rem; }
.ip-track { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.ip-track-dev { background: rgba(31,111,235,.14); color: #1d4ed8; }
.ip-track-content { background: rgba(22,163,74,.14); color: #15803d; }
.ip-track-backlink { background: rgba(124,58,237,.14); color: #6d28d9; }
.ip-track-research { background: rgba(217,119,6,.14); color: #b45309; }
.ip-track-local { background: rgba(8,145,178,.14); color: #0e7490; }
.ip-phase-count { margin-left: auto; }
.ip-tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.ip-tasks li { display: flex; align-items: flex-start; gap: 9px; font-size: .9rem; line-height: 1.4; }
.ip-tasks li i { color: var(--muted); font-size: .5rem; margin-top: 6px; }
.ip-create { max-width: 860px; margin: 16px auto 0; padding: 20px 24px; }
.ip-create-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.ip-create-actions { display: flex; justify-content: flex-end; gap: 10px; margin: 16px 0 8px; }
@media (max-width: 680px) { .ip-grid, .ip-create-grid { grid-template-columns: 1fr; } }

/* Feature guide */
.guide-toc { display: flex; flex-wrap: wrap; gap: 8px; max-width: 1080px; margin: 0 auto 26px; }
.guide-toc a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; font-size: .82rem; font-weight: 600; color: var(--ink); background: var(--surface); }
.guide-toc a:hover { border-color: var(--brand, #ff5a4e); color: var(--brand, #ff5a4e); }
.guide-section { max-width: 1080px; margin: 0 auto 36px; scroll-margin-top: 80px; }
.guide-sec-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.guide-sec-ic { flex: 0 0 42px; height: 42px; width: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--brand, #ff5a4e); }
.guide-sec-head h2 { margin: 0 0 2px; font-size: 1.2rem; }
.guide-sec-head p { margin: 0; }
.guide-grid { column-count: 3; column-gap: 16px; }
@media (max-width: 1000px) { .guide-grid { column-count: 2; } }
@media (max-width: 640px) { .guide-grid { column-count: 1; } }
.guide-card { break-inside: avoid; display: block; margin: 0 0 16px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.guide-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.guide-card-ic { flex: 0 0 auto; color: var(--brand, #ff5a4e); }
.guide-card-top h3 { margin: 0; font-size: 1rem; }
.guide-card-desc { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.5; }
.guide-steps { margin: 12px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.guide-steps li { font-size: .85rem; line-height: 1.45; color: var(--ink); }
.guide-steps li::marker { color: var(--brand, #ff5a4e); font-weight: 700; }
.guide-eg { margin: 12px 0 0; padding: 9px 12px; border-radius: 10px; background: var(--surface-2); font-size: .82rem; line-height: 1.45; color: var(--ink); }
.guide-eg-tag { display: inline-block; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--brand, #ff5a4e); margin-right: 6px; }
.guide-card-go { display: inline-block; margin-top: 12px; font-size: .78rem; font-weight: 700; color: var(--brand, #ff5a4e); text-decoration: none; }
.guide-card-go:hover { text-decoration: underline; }
.guide-foot { max-width: 1080px; margin: 8px auto 0; text-align: center; }

/* Google Chat spaces panel */
.chat-spaces { max-width: 960px; margin: 18px auto 0; padding: 22px 24px; }
.chat-spaces-head h2 { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; margin: 0 0 4px; }
.chat-space-list { list-style: none; margin: 16px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.chat-space-row { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.chat-space-name { font-weight: 700; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; }
.chat-space-tag { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; background: rgba(31,111,235,.14); color: #1d4ed8; padding: 1px 7px; border-radius: 999px; }
.chat-space-url { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; color: var(--muted); }
.chat-space-add { display: grid; grid-template-columns: 1fr 2fr auto; gap: 12px; align-items: end; padding-top: 6px; border-top: 1px solid var(--line); }
.chat-space-help { margin-top: 10px; }
@media (max-width: 640px) { .chat-space-add { grid-template-columns: 1fr; } .chat-space-row { flex-wrap: wrap; } }

/* Open Graph link preview cards (task notes, message bodies). */
.lp-card { display: flex; gap: 12px; align-items: stretch; margin: 8px 0; max-width: 540px; border: 1px solid var(--line, #e3e8ef); border-radius: 10px; overflow: hidden; text-decoration: none; color: inherit; background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.lp-card:hover { border-color: var(--brand, #e5484d); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.lp-thumb { width: 104px; align-self: stretch; object-fit: cover; flex: 0 0 auto; background: var(--line, #f2f4f7); }
.lp-meta { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; min-width: 0; }
.lp-title { font-weight: 600; font-size: .9rem; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lp-desc { font-size: .8rem; color: var(--muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lp-site { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-top: 2px; }
@media (max-width: 640px) { .lp-thumb { width: 80px; } }

/* Searchable select (type-to-filter client/project picker). */
.ss-wrap { position: relative; display: inline-block; min-width: 200px; }
.ss-native { display: none !important; }
.ss-input { width: 100%; background: var(--surface); color: var(--ink); }
.ss-menu { position: absolute; z-index: 60; top: calc(100% + 2px); left: 0; right: 0; max-height: 280px; overflow-y: auto; background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); border-radius: 8px; box-shadow: 0 12px 28px rgba(9,19,45,.32); padding: 4px; }
.ss-opt { padding: 7px 10px; border-radius: 6px; cursor: pointer; color: var(--ink); font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-opt:hover, .ss-opt.is-active { background: var(--surface-2); }
.ss-opt.is-sel { font-weight: 600; }
.ss-none { padding: 8px 10px; color: var(--muted); font-size: .85rem; }

/* Phase templates: add-a-saved-phase picker + save-as-phase in list header. */
.new-list-or { display: flex; align-items: center; gap: 10px; margin: 14px 0 8px; color: var(--muted); font-size: .78rem; }
.new-list-or::before, .new-list-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.add-phase-form { display: flex; gap: 8px; align-items: center; }
.add-phase-form select { flex: 1 1 auto; min-width: 0; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: .86rem; }
.list-save-phase { margin: 4px 0 2px; }
.list-save-phase > summary { list-style: none; cursor: pointer; font-size: .78rem; color: var(--muted); font-weight: 600; }
.list-save-phase > summary::-webkit-details-marker { display: none; }
.list-save-phase[open] > summary { color: var(--primary); }
.list-save-phase .conn-id-form { display: flex; gap: 6px; margin-top: 6px; }
.list-save-phase input { flex: 1 1 auto; min-width: 0; }

/* ---- Phase autopilot (re-add a phase template on a cadence) ---- */
.phase-repeat-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 10px; }
.phase-repeat-row .deliv-recur { flex: 1 1 auto; margin: 0; }
.phase-repeat-row select { width: auto; font-size: .82rem; padding: 4px 8px; }

/* ---- Prospect pitches ---- */
.pitch-run h3 { margin: 0 0 4px; }
.pitch-run-form { margin-top: 10px; }
.pitch-run-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.pitch-run-row .field { flex: 1 1 220px; margin: 0; }
.pitch-lead-tag { font-size: .85rem; color: var(--muted); margin: 0 0 8px; }
.pitch-list { padding: 6px 0; }
.pitch-row { display: flex; align-items: center; gap: 12px; padding: 11px 18px; color: inherit; text-decoration: none; border-bottom: 1px solid var(--line, rgba(9,19,45,.07)); }
.pitch-row:last-child { border-bottom: 0; }
.pitch-row:hover { background: rgba(9,19,45,.03); text-decoration: none; }
.pitch-grade { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: var(--gc); background: color-mix(in srgb, var(--gc) 14%, transparent); flex: 0 0 auto; }
.pitch-grade-lg { width: 54px; height: 54px; border-radius: 14px; font-size: 1.5rem; }
.pitch-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pitch-row-lead, .pitch-row-shared { font-size: .78rem; color: var(--muted); white-space: nowrap; }
.pitch-verdict { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-left: 4px solid var(--gc); }
.pitch-verdict-t { font-size: 1.05rem; font-weight: 600; margin: 0 0 2px; }
.pitch-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 16px; }
.pitch-col { padding: 18px 20px; }
.pitch-col h3 { margin: 0 0 10px; font-size: .95rem; }
.pitch-item { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 10px; margin-bottom: 8px; }
.pitch-item--bad { background: rgba(220,38,38,.06); }
.pitch-item--good { background: rgba(22,163,74,.07); }
.pitch-close { font-style: italic; color: var(--muted); margin: 10px 2px 0; }
.pitch-check { display: flex; align-items: center; gap: 8px; padding: 5px 2px; font-size: .88rem; }
.pitch-check span { width: 20px; height: 20px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; flex: 0 0 auto; }
.pitch-check.is-pass span { background: rgba(22,163,74,.14); color: #16a34a; }
.pitch-check.is-fail span { background: rgba(220,38,38,.12); color: #dc2626; }
.pitch-kw { display: flex; align-items: center; gap: 8px; padding: 5px 2px; font-size: .88rem; }
.pitch-kw-pos { font-weight: 700; color: var(--accent); flex: 0 0 auto; }
[data-theme="dark"] .pitch-row:hover { background: rgba(255,255,255,.04); }
[data-theme="dark"] .pitch-item--bad { background: rgba(248,113,113,.10); }
[data-theme="dark"] .pitch-item--good { background: rgba(74,222,128,.10); }

/* ---- Indexation monitor ---- */
.idx-stats { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 10px 0 12px; }
.idx-stat { font-size: .9rem; display: inline-flex; align-items: center; gap: 8px; }
.idx-stat strong { font-size: 1.05rem; }
.idx-run { margin-left: auto; }
.idx-table { display: flex; flex-direction: column; }
.idx-row { display: flex; align-items: center; gap: 10px; padding: 7px 2px; border-top: 1px solid var(--line, rgba(9,19,45,.07)); font-size: .88rem; }
.idx-chip { flex: 0 0 auto; font-size: .74rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.idx-chip.is-ok { background: rgba(22,163,74,.13); color: #16a34a; }
.idx-chip.is-bad { background: rgba(220,38,38,.12); color: #dc2626; }
.idx-url { font-weight: 600; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.idx-cov { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-theme="dark"] .idx-chip.is-ok { background: rgba(74,222,128,.14); }
[data-theme="dark"] .idx-chip.is-bad { background: rgba(248,113,113,.14); }
.idx-chip.is-warn { background: rgba(224,137,11,.14); color: #e0890b; }
a.pls-conn-src { color: #fff; text-decoration: none; }
a.pls-conn-src:hover { text-decoration: underline; }


/* ---- Trends v2: bigger charts, axis labels, task-impact picker ---- */
.tr-spark { color: var(--ink); }
.tr-ax { font-size: 9.5px; fill: var(--muted); font-family: inherit; }
.tr-spark-one { display: flex; align-items: center; justify-content: center; min-height: 90px; background: var(--surface-2); border-radius: 12px; padding: 10px 14px; text-align: center; }
.tr-taskpick { margin-bottom: 18px; padding: 14px 18px; }
.tr-taskpick > summary { cursor: pointer; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tr-taskpick-form { margin-top: 12px; }
.tr-taskpick-list { max-height: 240px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; padding: 6px; display: flex; flex-direction: column; }
.tr-taskpick-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px; cursor: pointer; font-size: .88rem; }
.tr-taskpick-row:hover { background: var(--surface-2); }
.tr-taskpick-t { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-taskpick-row .muted { margin-left: auto; white-space: nowrap; flex: 0 0 auto; }
.tr-taskpick-actions { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.tr-taskpick-search { width: 100%; margin-bottom: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; background: var(--surface); color: var(--ink); }
.tr-impact { margin-top: 22px; padding: 18px 20px; }
.tr-impact-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.tr-impact-h h3 { margin: 0; }
.tr-impact-task { padding: 12px 0 4px; border-top: 1px solid var(--line); margin-top: 10px; }
.tr-impact-task:first-of-type { border-top: 0; margin-top: 0; }
.tr-impact-t { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tr-impact-pin { width: 10px; height: 10px; border-radius: 999px; background: #e11d48; flex: 0 0 auto; }
.tr-impact-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 8px; }
.tr-impact-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; font-size: .88rem; background: var(--surface-2); flex-wrap: wrap; }
.tr-impact-row.is-good { background: rgba(22,163,74,.08); }
.tr-impact-row.is-bad { background: rgba(220,38,38,.07); }
.tr-impact-row.is-good .tr-impact-arrow, .tr-impact-row.is-good .tr-impact-pct { color: #16a34a; }
.tr-impact-row.is-bad .tr-impact-arrow, .tr-impact-row.is-bad .tr-impact-pct { color: #dc2626; }
.tr-impact-m { font-weight: 700; }
.tr-impact-v { font-variant-numeric: tabular-nums; }
.tr-impact-note { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin-left: auto; }
[data-theme="dark"] .tr-impact-row.is-good { background: rgba(74,222,128,.10); }
[data-theme="dark"] .tr-impact-row.is-bad { background: rgba(248,113,113,.09); }

/* ---- Public growth report ---- */
.gpr .gpr-grid { margin-top: 8px; }
.gpr .tr-card { break-inside: avoid; }
.gpr .rgp-h2 { margin-top: 26px; }
@media print { .gpr .tr-card:hover { transform: none; box-shadow: none; } }

/* ---- Connectors tab: flow (sub-nav + group rails) ---- */
/* Connectors sub-tabs — a real tab bar (JS shows one panel at a time) */
.conn-subnav { display: flex; gap: 2px; flex-wrap: wrap; margin: 0 0 20px; border-bottom: 2px solid var(--line); }
.conn-subnav a { display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; font-size: .9rem; font-weight: 600; color: var(--muted); text-decoration: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -2px; border-radius: 8px 8px 0 0; cursor: pointer; white-space: nowrap; }
.conn-subnav a:hover { color: var(--ink); background: var(--surface-2); text-decoration: none; }
.conn-subnav a.is-on { color: var(--primary); border-bottom-color: var(--primary); }
.conn-panel[hidden] { display: none; }
/* Tools is its own tab now — drop the divider it used to have under it */
.conn-panel[data-panel="tools"] .conn-tools { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.conn-panel > .conn-group-h:first-child { margin-top: 4px; }
@media (max-width: 640px) {
    .conn-subnav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .conn-subnav::-webkit-scrollbar { display: none; }
}
.conn-group-h { display: flex; align-items: baseline; gap: 10px; margin: 30px 0 14px; }
.conn-group-h h3 { margin: 0; font-size: 1.05rem; display: inline-flex; align-items: center; gap: 8px; }
.conn-group-h .muted { font-size: .8rem; }
.conn-group-h::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); align-self: center; }
.conn-tile-act { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.conn-tile-x { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 4px 7px; border-radius: 7px; font-size: .8rem; line-height: 1; }
.conn-tile-x:hover { color: #dc2626; background: rgba(220,38,38,.08); }
.pls-period { font-size: .62rem; font-weight: 700; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: 2px 7px; }
/* Tile names wrap at spaces only; compact actions so they never squeeze the name. */
.conn-tile-name { overflow-wrap: normal; word-break: normal; }
.conn-tile-act .btn, .conn-tile-act .link-btn { padding: 4px 9px; font-size: .74rem; }
.conn-tile-act .conn-id-link summary { font-size: .74rem; }

/* ---- Status sheets ---- */
.sh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.sh-card { display: flex; align-items: center; gap: 12px; padding: 16px 18px; text-decoration: none; color: inherit; transition: transform .12s ease, box-shadow .12s ease; }
.sh-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); text-decoration: none; }
.sh-card-ic { font-size: 1.4rem; }
.sh-card-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sh-new-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.sh-new { padding: 18px 20px; }
.sh-new .sh-card-ic { display: inline-block; margin-bottom: 4px; }
.sh-new input[type=text] { width: 100%; }
.sh-new-custom > summary { cursor: pointer; display: flex; align-items: center; gap: 8px; }
.sh-builder { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.sh-builder-col { display: grid; grid-template-columns: 1fr 130px; gap: 8px; }
.sh-builder-col textarea { grid-column: 1 / -1; }
.sh-builder-actions { display: flex; gap: 10px; }
.sh-people { display: flex; flex-wrap: wrap; gap: 14px; padding: 12px 16px; margin-bottom: 12px; }
.sh-person { display: inline-flex; align-items: center; gap: 7px; font-size: .86rem; }
.sh-person strong { background: var(--surface-2); border-radius: 999px; padding: 1px 9px; font-size: .78rem; }
.sh-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-bottom: 12px; }
.sh-filter-group { display: flex; flex-wrap: wrap; gap: 6px; }
.sh-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; color: var(--ink); }
.sh-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--oc, var(--muted)); }
.sh-chip em { font-style: normal; color: var(--muted); }
.sh-chip.active { border-color: var(--accent); color: var(--accent-ink); }
.sh-filter-people { padding-left: 14px; border-left: 1px solid var(--line); }
.sh-chip-me { border-style: dashed; }
.sh-search { margin-left: auto; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font: inherit; min-width: 220px; background: var(--surface); color: var(--ink); }
.sh-wrap { padding: 0; overflow-x: auto; }
.sh-table { width: 100%; border-collapse: collapse; font-size: .87rem; }
.sh-table th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 11px 10px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); z-index: 2; white-space: nowrap; }
.sh-td { padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.sh-table tbody tr:hover .sh-td { background: var(--surface-2); }
.sh-input, .sh-notes, .sh-sel { width: 100%; border: 1px solid transparent; background: transparent; font: inherit; color: var(--ink); border-radius: 8px; padding: 6px 8px; }
.sh-input:hover, .sh-notes:hover, .sh-sel:hover { border-color: var(--line); }
.sh-input:focus, .sh-notes:focus, .sh-sel:focus { border-color: var(--accent); background: var(--surface); outline: none; }
.sh-title-cell { font-weight: 600; min-width: 180px; }
.sh-notes { resize: none; min-width: 200px; font-size: .82rem; }
.sh-sel { font-weight: 700; font-size: .8rem; color: var(--oc, var(--ink)); background: color-mix(in srgb, var(--oc, #64748b) 12%, transparent); min-width: 120px; }
.sh-td-date .sh-input { min-width: 130px; }
.sh-url { display: flex; align-items: center; gap: 4px; }
.sh-url .sh-input { min-width: 120px; font-size: .78rem; }
.sh-url-go { flex: 0 0 auto; text-decoration: none; padding: 2px 6px; border-radius: 6px; background: var(--surface-2); }
.sh-ppl > summary { list-style: none; cursor: pointer; display: flex; gap: 3px; align-items: center; padding: 4px; border-radius: 8px; min-width: 70px; }
.sh-ppl > summary:hover { background: var(--surface-2); }
.sh-ppl { position: relative; }
.sh-ppl-pop { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 8px; display: flex; flex-direction: column; gap: 2px; min-width: 180px; max-height: 220px; overflow-y: auto; }
.sh-ppl-pop label { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 7px; font-size: .84rem; cursor: pointer; }
.sh-ppl-pop label:hover { background: var(--surface-2); }
.sh-td.sh-ok { animation: shok .9s ease; }
@keyframes shok { 0% { background: rgba(22,163,74,.18); } 100% { background: transparent; } }
.sh-td.sh-err { background: rgba(220,38,38,.12); }
.sh-td-x { width: 30px; text-align: center; }
.sh-del { opacity: 0; }
.sh-table tbody tr:hover .sh-del { opacity: 1; }
.sh-addrow { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-top: 1px solid var(--line); }
.sh-addrow input { flex: 1 1 auto; max-width: 420px; }
.sh-saved { color: #16a34a; font-weight: 700; }
.sh-titlewrap { display: flex; align-items: center; gap: 2px; }
.sh-proj-go { flex: 0 0 auto; text-decoration: none; padding: 2px 7px; border-radius: 7px; background: color-mix(in srgb, var(--pc, #64748b) 15%, transparent); color: var(--pc, #64748b); font-weight: 700; }
.sh-proj-pick { position: relative; flex: 0 0 auto; }
.sh-proj-pick > summary { list-style: none; cursor: pointer; opacity: .35; padding: 2px 5px; border-radius: 6px; }
.sh-proj-pick > summary:hover { opacity: 1; background: var(--surface-2); }
.sh-proj-pick .sh-ppl-pop { min-width: 240px; }
/* Sheets index v2 */
.sh-card { border-left: 4px solid var(--kc, var(--line)); }
.sh-card-meta { display: flex; align-items: center; gap: 8px; }
.sh-kind { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--kc, var(--muted)); background: color-mix(in srgb, var(--kc, #64748b) 12%, transparent); padding: 2px 8px; border-radius: 999px; }
.sh-card-go { margin-left: auto; color: var(--muted); font-weight: 700; }
.sh-card:hover .sh-card-go { color: var(--accent); }
.sh-new-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.sh-new-head .sh-card-ic { margin: 0; }
.sh-prev { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0 12px; }
.sh-prev-col { display: inline-flex; align-items: center; gap: 4px; font-size: .7rem; font-weight: 600; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: 7px; padding: 3px 8px; }
.sh-prev-col i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.sh-new-foot { display: flex; gap: 8px; align-items: center; }
.sh-new-foot input { flex: 1 1 auto; margin: 0 !important; }
.sh-new-custom > summary { cursor: pointer; display: block; }
.sh-new-custom > summary::-webkit-details-marker { display: none; }

/* ---- "Why pages aren't indexed" breakdown ---- */
.idx-reasons { margin: 10px 0 14px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.idx-reasons-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.idx-reason > summary { cursor: pointer; display: flex; align-items: center; gap: 9px; padding: 7px 4px; font-size: .88rem; border-top: 1px solid var(--line); }
.idx-reason:first-of-type > summary { border-top: 0; }
.idx-reason-n { font-weight: 800; font-variant-numeric: tabular-nums; background: rgba(220,38,38,.1); color: #dc2626; border-radius: 8px; padding: 1px 9px; min-width: 34px; text-align: center; }
.idx-reason-urls { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 4px 10px 47px; }
.idx-reason-urls a { font-size: .78rem; background: var(--surface-2); border-radius: 7px; padding: 3px 9px; text-decoration: none; color: var(--ink); max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.idx-reason-urls a:hover { color: var(--accent); }

/* ---- Status sheet readability pass ---- */
.sh-table { font-size: .88rem; }
.sh-table th { padding: 12px 12px; background: var(--surface-2); }
.sh-td { padding: 10px 10px; vertical-align: middle; }
.sh-td-textarea { vertical-align: top; }
.sh-table tbody tr:nth-child(even) .sh-td { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
.sh-table tbody tr:hover .sh-td { background: var(--surface-2); }
/* Sticky client column so wide sheets keep their anchor while scrolling. */
.sh-table th:first-child, .sh-table .sh-td:first-child { position: sticky; left: 0; z-index: 1; }
.sh-table .sh-td:first-child { background: var(--surface); box-shadow: 6px 0 10px -8px rgba(9,19,45,.25); }
.sh-table tbody tr:nth-child(even) .sh-td:first-child { background: color-mix(in srgb, var(--surface-2) 45%, var(--surface)); }
.sh-table tbody tr:hover .sh-td:first-child { background: var(--surface-2); }
/* Comfortable column widths. */
.sh-title-cell { min-width: 210px; }
.sh-td-select .sh-sel { min-width: 150px; }
.sh-td-date .sh-input { min-width: 142px; }
.sh-td-people { min-width: 100px; }
.sh-td-url { min-width: 160px; }
.sh-notes { min-width: 280px; line-height: 1.45; }
.sh-td-person select { min-width: 150px; }
.sh-ppl > summary { white-space: nowrap; }
.sh-ppl > summary .muted { white-space: nowrap; font-size: .76rem; }
.sh-ppl-pop { box-shadow: 0 12px 32px rgba(9,19,45,.22); }
.sh-titlewrap { white-space: nowrap; }
.sh-titlewrap .sh-input { min-width: 180px; }
[data-theme="dark"] .sh-table .sh-td:first-child { box-shadow: 6px 0 10px -8px rgba(0,0,0,.6); }
.pls-sheetrow { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 10px; text-decoration: none; color: inherit; font-size: .84rem; }
.pls-sheetrow:hover { background: var(--surface-2); text-decoration: none; }
.pls-sheetrow-n { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pls-sheetpill { flex: 0 0 auto; font-size: .72rem; font-weight: 700; color: var(--oc); background: color-mix(in srgb, var(--oc) 13%, transparent); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.pls-sheetdate { margin-left: auto; white-space: nowrap; }
a.idx-chip { text-decoration: none; cursor: pointer; }
a.idx-chip:hover { filter: brightness(.92); text-decoration: none; }

/* Sheets break out of the 1140px page column — wide trackers need the room. */
.sh-people, .sh-filters, .sh-wrap {
    width: calc(100vw - 72px);
    max-width: none;
    margin-left: calc((100% - (100vw - 72px)) / 2);
}
/* The Tools dock lives on the right edge at >=1201px and sat ON TOP of the
   sheet's delete column (field report) — keep the left edge at 36px but end
   the sheet before the dock's rail. */
@media (min-width: 1201px) {
    .sh-people, .sh-filters, .sh-wrap { width: calc(100vw - 118px); }
}
@media (max-width: 900px) {
    .sh-people, .sh-filters, .sh-wrap { width: 100%; margin-left: 0; }
}

/* Sheets index v3: status distribution cards */
.sh-card-v2 { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 12px; }
.sh-card-top { display: flex; align-items: center; gap: 12px; }
.sh-dist { display: flex; height: 10px; border-radius: 999px; overflow: hidden; gap: 2px; margin-top: 2px; }
.sh-dist i { display: block; min-width: 8px; }
.sh-dist-chips { display: flex; flex-wrap: wrap; gap: 5px 10px; }
.sh-dist-chip { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 600; color: var(--ink); }
.sh-dist-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--oc); }
.sh-dist-chip em { font-style: normal; color: var(--muted); }
.sh-card-foot { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 2px; }
/* Task finder */
.sh-task-find { flex: 0 0 auto; border: 0; background: none; cursor: pointer; padding: 2px 5px; border-radius: 7px; opacity: .45; font-size: .85rem; }
.sh-task-find:hover { opacity: 1; background: var(--surface-2); }
.sh-tf-pop { min-width: 320px; z-index: 80; }
.sh-tf-q { width: 100%; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; font: inherit; margin-bottom: 6px; background: var(--surface); color: var(--ink); }
.sh-tf-list { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; }
.sh-tf-item { text-align: left; border: 0; background: none; font: inherit; font-size: .84rem; padding: 6px 8px; border-radius: 7px; cursor: pointer; color: var(--ink); display: flex; flex-direction: column; gap: 1px; }
.sh-tf-item:hover { background: var(--surface-2); }

/* Pipeline: one-click bulk move on the active filter */
.pl-quickbulk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 14px; border-left: 4px solid var(--accent); }
.pl-quickbulk-l { font-size: .9rem; }
.pl-quickbulk select { width: auto; }

/* ---- Resource center (/resources) ---- */
.rsc-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rsc-search { position: relative; display: flex; align-items: center; margin-bottom: 18px; }
.rsc-search-ic { position: absolute; left: 14px; color: var(--muted); pointer-events: none; }
.rsc-search input { width: 100%; padding: 12px 40px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--card); font-size: .95rem; }
.rsc-search-clear { position: absolute; right: 12px; color: var(--muted); text-decoration: none; font-weight: 700; }
.rsc-depts { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 10px; margin-bottom: 14px; }
.rsc-dept { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--card); text-decoration: none; color: inherit; transition: border-color .12s, box-shadow .12s; }
.rsc-dept:hover { border-color: var(--dc); }
.rsc-dept.active { border-color: var(--dc); box-shadow: inset 0 0 0 1px var(--dc); }
.rsc-dept-ic { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto; background: color-mix(in srgb, var(--dc) 14%, transparent); color: var(--dc); font-size: .9rem; }
.rsc-dept-name { font-weight: 600; font-size: .86rem; line-height: 1.15; flex: 1; min-width: 0; overflow: hidden; }
.rsc-dept-n { font-size: .76rem; font-weight: 700; color: var(--muted); background: rgba(9, 19, 45, .05); border-radius: 999px; padding: 2px 8px; flex: 0 0 auto; }
.rsc-cats { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.rsc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--card); font-size: .82rem; font-weight: 600; text-decoration: none; color: inherit; }
.rsc-chip:hover { border-color: var(--accent); }
.rsc-chip.on { background: var(--ink, #0b1220); color: #fff; border-color: var(--ink, #0b1220); }
.rsc-chip.on i { color: #fff; }
.rsc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.rsc-card { display: flex; flex-direction: column; gap: 9px; padding: 20px 22px; text-decoration: none; color: inherit; transition: border-color .12s, box-shadow .12s; }
.rsc-card:hover { border-color: color-mix(in srgb, var(--dc) 45%, var(--line)); box-shadow: 0 6px 18px rgba(9, 19, 45, .07); }
.rsc-card-head { display: flex; align-items: baseline; gap: 7px; }
.rsc-card-title { font-size: 1rem; line-height: 1.35; }
.rsc-pin { color: #d97706; font-size: .82rem; }
.rsc-private { color: var(--muted); font-size: .78rem; }
.rsc-card-desc { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rsc-card-foot { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); }
.rsc-badge { font-size: .74rem; font-weight: 700; color: var(--dc); background: color-mix(in srgb, var(--dc) 11%, transparent); border-radius: 999px; padding: 2px 9px; }
.rsc-tag { font-size: .75rem; color: var(--muted); background: rgba(9, 19, 45, .05); border-radius: 999px; padding: 2px 8px; text-decoration: none; }
a.rsc-tag:hover { color: var(--accent); }
.rsc-meta { margin-left: auto; white-space: nowrap; }
.rsc-crumbs { margin-bottom: 14px; }
.rsc-crumbs a { color: var(--muted); text-decoration: none; }
.rsc-crumbs a:hover { color: var(--accent); }
.rsc-show-hero { margin-bottom: 22px; }
.rsc-show-hero .display { font-size: 1.7rem; }
.rsc-show-actions form { margin: 0; }
.rsc-show-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
@media (max-width: 900px) { .rsc-show-grid { grid-template-columns: 1fr; } }
.rsc-content { padding: 26px 28px; line-height: 1.65; font-size: .95rem; }
.rsc-content p { margin: 0 0 12px; }
.rsc-content ol, .rsc-content ul { margin: 0 0 12px; padding-left: 22px; }
.rsc-content li { margin: 4px 0; }
.rsc-side { display: flex; flex-direction: column; gap: 12px; }
.rsc-side-card { padding: 16px 18px; }
.rsc-side-h { margin: 0 0 10px; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.rsc-link { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; margin: 0 -10px; border-radius: 9px; text-decoration: none; color: inherit; }
.rsc-link:hover { background: rgba(9, 19, 45, .04); }
.rsc-link-t { font-weight: 600; font-size: .88rem; }
.rsc-form { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px; max-width: 860px; }
.rsc-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.rsc-link-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; margin-bottom: 8px; }
.rsc-form-actions { display: flex; gap: 10px; }
#rsc-add-link { align-self: flex-start; }

/* ---- Audit: cannibalization verdicts + lost-traffic 404s ---- */
.sa-cannibal-verdict { display: inline-block; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--vc); background: color-mix(in srgb, var(--vc) 12%, transparent); border-radius: 999px; padding: 2px 9px; }
.sa-cannibal-win { color: #d97706; font-weight: 800; }
.sa-cannibal-advice { margin: 6px 0 0; line-height: 1.45; }
.sa-cannibal-taskbtn { display: block; margin-bottom: 12px; }
.sa-lost404 { padding: 18px 20px; margin-top: 16px; }
.sa-404-code { font-weight: 800; color: #dc2626; }
.idx-stat-hint { font-weight: 500; font-size: .78rem; opacity: .85; }
.cwv-pill { display: inline-block; font-size: .74rem; font-weight: 800; color: var(--rc); background: color-mix(in srgb, var(--rc) 12%, transparent); border-radius: 999px; padding: 2px 10px; }

/* ---- Client brain (project pulse) ---- */
.brain-brief-btn { margin-left: auto; }
.brain-brief-out { margin: 6px 0 8px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 10px; background: rgba(9, 19, 45, .02); font-size: .87rem; line-height: 1.5; }
.brain-brief-out h1, .brain-brief-out h2, .brain-brief-out h3 { font-size: .9rem; margin: 8px 0 3px; }
.brain-brief-out p, .brain-brief-out ul { margin: 0 0 6px; }
.brain-fact { display: flex; align-items: flex-start; gap: 6px; padding: 4px 0; border-top: 1px dashed var(--line); }
.brain-fact:first-of-type { border-top: 0; }
/* min-width:0 + anywhere-wrapping: a pasted doc URL is one long unbroken
   token — without these it blows the flex row open and shoves the × out. */
.brain-fact-t { flex: 1; min-width: 0; overflow-wrap: anywhere; word-break: break-word; font-size: .84rem; line-height: 1.4; }
.brain-fact-x { flex: 0 0 auto; }
.brain-fact-x button { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: .8rem; padding: 0 2px; }
.brain-fact-x button:hover { color: #dc2626; }
.brain-add { display: flex; gap: 6px; margin-top: 8px; }
.brain-add input { flex: 1; padding: 7px 10px; font-size: .84rem; }

/* ---- Power Up WP dashboard ---- */
.puwp-connect { padding: 22px 24px; max-width: 620px; }
.puwp-connect-form { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.puwp-status { padding: 16px 20px; margin-bottom: 14px; }
.puwp-status-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.puwp-state { font-weight: 700; font-size: .85rem; color: var(--sc); }
.puwp-status-spacer { flex: 1; }
.puwp-settings { position: relative; }
.puwp-settings-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 340px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: var(--shadow-lg, 0 12px 30px rgba(9,19,45,.14)); padding: 16px; }
.puwp-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.puwp-chip { display: inline-flex; align-items: baseline; gap: 5px; padding: 5px 12px; border-radius: 999px; font-size: .8rem; color: var(--cc); background: color-mix(in srgb, var(--cc) 10%, transparent); }
.puwp-chip strong { font-size: .95rem; }
.puwp-trend { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.puwp-spark { width: 200px; height: 30px; }
.puwp-tabs { display: flex; gap: 7px; flex-wrap: wrap; margin: 4px 0 14px; }
.puwp-tabs em { font-style: normal; opacity: .75; }
.puwp-issues { display: flex; flex-direction: column; gap: 8px; }
.puwp-issue { padding: 0; }
.puwp-issue > summary { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; list-style: none; flex-wrap: wrap; }
.puwp-issue > summary::-webkit-details-marker { display: none; }
.puwp-prio { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--pc); background: color-mix(in srgb, var(--pc) 12%, transparent); border-radius: 999px; padding: 2px 9px; flex: 0 0 auto; }
.puwp-issue-act { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.puwp-issue-items { margin: 0; padding: 4px 16px 14px 38px; font-size: .87rem; line-height: 1.6; }
.puwp-issue-items form { margin-left: 6px; }
.puwp-panel { padding: 16px 18px; }
.puwp-panel + .puwp-panel { margin-top: 12px; }
/* Power Up WP button in the project Tools & audits row — branded so it doesn't get lost */
.puwp-toolbtn { display: inline-flex; align-items: center; gap: 7px; font-weight: 600;
    background: linear-gradient(180deg, rgba(255,90,78,.1), rgba(255,90,78,.05));
    border: 1px solid rgba(255,90,78,.45); color: var(--ink); }
.puwp-toolbtn:hover { background: linear-gradient(180deg, rgba(255,90,78,.18), rgba(255,90,78,.08)); border-color: rgba(255,90,78,.65); }
.puwp-toolbtn-logo { width: 18px; height: 18px; object-fit: contain; flex: 0 0 auto; }
/* Jolt SEO & AI (ex-PowerUp WP) mark: a bolt glyph until their new logo asset lands. */
.puwp-bolt { display: inline-flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1;
    background: linear-gradient(135deg, #f59e0b, #ff5a4e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.puwp-hero-logo.puwp-bolt { font-size: 40px; filter: none; }
.puwp-bolt-lg { width: 44px; height: 44px; font-size: 30px; }
.puwp-toolbtn-dot { color: #16a34a; font-size: .7em; }
/* Power Up WP brand logo in the hero */
.puwp-hero-h { display: inline-flex; align-items: center; gap: 12px; }
.puwp-hero-logo { width: 48px; height: 48px; object-fit: contain; flex: 0 0 auto; filter: drop-shadow(0 2px 4px rgba(0,0,0,.18)); }
/* "Back up first" advisory before any bulk write to the live site */
.puwp-backup-note { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; padding: 11px 14px; border-radius: 10px;
    background: rgba(255,176,32,.1); border: 1px solid rgba(255,176,32,.4); color: var(--ink); font-size: .86rem; line-height: 1.45; }
.puwp-backup-note strong { color: var(--ink); }
.puwp-backup-ic { color: #b8860b; font-size: 1.05rem; line-height: 1.3; flex: 0 0 auto; }
@media (prefers-color-scheme: dark) { .puwp-backup-ic { color: #e6b34a; } }
.puwp-redir-form { display: flex; gap: 6px; align-items: center; }
.puwp-redir-form input[type=text] { padding: 6px 9px; font-size: .82rem; width: 170px; }
.puwp-redir-new { margin-bottom: 12px; }
.puwp-redir-new input[type=text] { width: 220px; }
.puwp-kw-edit { margin-top: 12px; }
.puwp-kw-edit textarea { width: 100%; margin-top: 8px; }
.puwp-opt-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.puwp-opt-head strong { font-size: 1.05rem; }
.puwp-toggles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.puwp-toggle { display: flex; align-items: center; gap: 10px; font-size: .85rem; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; background: var(--surface); transition: border-color .12s, background .12s; }
.puwp-toggle:hover { border-color: var(--line-2); }
.puwp-toggle.is-on { border-color: color-mix(in srgb, #16a34a 45%, var(--line)); background: color-mix(in srgb, #16a34a 5%, var(--surface)); }
.puwp-toggle input[type=checkbox] { position: absolute; opacity: 0; width: 0; height: 0; }
.puwp-toggle-sw { flex: 0 0 auto; width: 34px; height: 20px; border-radius: 999px; background: var(--line-2); position: relative; transition: background .15s; }
.puwp-toggle-sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.puwp-toggle.is-on .puwp-toggle-sw { background: #16a34a; }
.puwp-toggle.is-on .puwp-toggle-sw::after { transform: translateX(14px); }
.puwp-toggle-t { flex: 1; font-weight: 600; }
.puwp-toggle-state { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.puwp-toggle.is-on .puwp-toggle-state { color: #15803d; }
.puwp-opt-actions { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
#puwp-opt-dirty { color: #b45309; font-weight: 600; }
.puwp-serp ol { margin: 6px 0 0; padding-left: 18px; font-size: .8rem; }
.puwp-pager { display: flex; gap: 12px; align-items: center; margin-top: 10px; }

/* ---- Power Up WP: bulk meta editor ---- */
/* "Fix in WP" from the tech audit: pre-filtered editor notice */
.puwp-auditfilter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .84rem; font-weight: 600; color: #1d4ed8; background: rgba(37,99,235,.07); border: 1px solid rgba(37,99,235,.22); border-radius: 9px; padding: 8px 12px; margin-bottom: 10px; }
.puwp-auditfilter .link-btn { margin-left: auto; }
/* ---- Power Up meta editor: modernized ---- */
.puwp-meta-bar { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 4px; }
.pmb-primary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; background: var(--surface-2, rgba(9,19,45,.03)); }
.pmb-secondary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 14px; border-top: 1px solid var(--line); }
.pmb-vsep { width: 1px; height: 22px; background: var(--line-2); }
.pmb-spacer { flex: 1 1 auto; min-width: 8px; }
.pmb-frlabel { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; color: var(--muted); margin-right: 4px; }
.pmb-status { font-size: .84rem; min-height: 1em; margin-left: 8px; font-weight: 600; }
.pmb-status:empty { display: none; }
.pmb-status.is-ok, .pmb-status.is-err { padding: 5px 14px; border-radius: 999px; font-weight: 800; }
.pmb-status.is-ok { color: #15803d; background: rgba(22,163,74,.13); }
.pmb-status.is-ok::before { content: "\2713  "; }
.pmb-status.is-err { color: #b91c1c; background: rgba(220,38,38,.12); }
.pmb-status.is-err::before { content: "\26A0  "; }
.pmb-pop { animation: pmbpop .35s cubic-bezier(.2,1.3,.5,1); }
@keyframes pmbpop { 0% { transform: scale(.85); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.pmb-help { margin: 12px 2px 14px; }
.pmb-input { padding: 7px 12px; font-size: .82rem; border: 1px solid var(--line-2); border-radius: 9px; background: var(--surface); color: var(--ink); }
.pmb-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.pmb-kw { width: 190px; }
.pmb-fr-in { width: 150px; }
/* AI field picker — a modern segmented toggle so it's not missed */
.pmb-seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 999px; }
.pmb-seg-btn { border: 0; background: transparent; color: var(--muted); font-size: .78rem; font-weight: 700; padding: 5px 13px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background .12s, color .12s; }
.pmb-seg-btn:hover { color: var(--ink); }
.pmb-seg-btn.active { background: var(--accent); color: #fff; box-shadow: 0 1px 4px color-mix(in srgb, var(--accent) 35%, transparent); }
.puwp-meta-sep, .puwp-meta-kw { display: none; }
.puwp-meta-selall { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }

.puwp-meta-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.puwp-meta-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .86rem; }
.puwp-meta-table th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 11px 12px; background: var(--surface-2, rgba(9,19,45,.03)); border-bottom: 1px solid var(--line-2); position: sticky; top: 0; z-index: 2; }
.puwp-meta-table td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: top; position: relative; }
.puwp-meta-table tbody tr:last-child td { border-bottom: 0; }
.puwp-meta-table tbody tr:hover td { background: color-mix(in srgb, var(--accent) 3%, transparent); }
.puwp-meta-table .pm-page { max-width: 240px; }
.puwp-meta-table .pm-page a { font-weight: 700; display: block; line-height: 1.3; }
.pm-path { display: block; font-size: .72rem; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-score { display: inline-block; margin-top: 6px; font-size: .68rem; font-weight: 800; color: #fff; background: var(--ss, #64748b); border-radius: 999px; padding: 1px 8px; }
.puwp-meta-table input.pm-title, .puwp-meta-table textarea.pm-desc, .puwp-meta-table input.pa-alt {
    width: 100%; padding: 9px 40px 9px 11px; font-size: .85rem; border: 1px solid var(--line-2); border-radius: 9px; background: var(--surface); transition: border-color .12s, box-shadow .12s; }
.puwp-meta-table input.pm-title { min-width: 260px; }
.puwp-meta-table textarea.pm-desc { min-width: 320px; font-size: .83rem; resize: vertical; line-height: 1.45; }
.puwp-meta-table input.pm-title:focus, .puwp-meta-table textarea.pm-desc:focus, .puwp-meta-table input.pa-alt:focus {
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.pm-count { position: absolute; right: 20px; top: 20px; font-size: .66rem; font-weight: 700; color: var(--muted); background: var(--surface); padding: 1px 5px; border-radius: 6px; pointer-events: none; }
.pm-state { min-width: 84px; }
tr.pm-dirty td:first-child::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: #d97706; }
tr.pm-saved td { animation: pmflash 1.2s ease-out; }
tr.pm-error td { animation: pmflashbad 1.2s ease-out; }
@keyframes pmflash { 0% { background: rgba(22, 163, 74, .16); } 100% { background: transparent; } }
@keyframes pmflashbad { 0% { background: rgba(220, 38, 38, .14); } 100% { background: transparent; } }

/* ---- Power Up WP: alt editor, schema, fleet ---- */
.pa-thumb img { width: 52px; height: 40px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line-2); background: rgba(9,19,45,.04); }
.puwp-meta-table input.pa-alt { min-width: 300px; font-size: .84rem; }
tr.pa-missing input.pa-alt { border-color: color-mix(in srgb, #dc2626 45%, var(--line-2)); }
.puwp-schema-json { width: 100%; font-family: ui-monospace, monospace; font-size: .8rem; line-height: 1.5; padding: 12px; }
.puwp-schema-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 14px; margin-top: 12px; }
.task-vault-link { text-decoration: none; }
.task-vault-link:hover { color: var(--accent); }
.task-vault-n { display: inline-block; font-size: .72rem; font-weight: 700; background: rgba(9, 19, 45, .07); border-radius: 999px; padding: 0 7px; }

/* ---- Tech audit: tabbed layout ---- */
.sa-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 16px; position: sticky; top: calc(var(--timer-strip-h, 0px) + 64px); z-index: 20; background: var(--bg); padding: 8px 0; border-bottom: 1px solid var(--line); }
.sa-tabs button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--card); font: inherit; font-size: .87rem; font-weight: 600; cursor: pointer; color: inherit; }
.sa-tabs button:hover { border-color: var(--accent); }
.sa-tabs button.active { background: var(--ink, #0b1220); color: #fff; border-color: var(--ink, #0b1220); }
.sa-tabs button.active i { color: #fff; }
.sa-tabpill { font-size: .72rem; font-weight: 800; border-radius: 999px; padding: 1px 7px; background: rgba(9, 19, 45, .08); }
.sa-tabs button.active .sa-tabpill { background: rgba(255, 255, 255, .22); }
.sa-tabs button.active .sa-tabpill-err, .sa-tabs button.active .sa-tabpill-warn { background: rgba(255, 255, 255, .92); }
.sa-tabpill-err { background: #fdecec; color: #b91c1c; }
.sa-tabpill-warn { background: #fdf3e2; color: #b45309; }
.sa-tab-off { display: none !important; }
@media print { .sa-tabs { display: none; } .sa-tab-off { display: none !important; } }

/* ---- Tech audit: overview verdict block ---- */
.sa-ovr { padding: 18px 20px; }
.sa-ovr-tiles { display: flex; gap: 10px; flex-wrap: wrap; }
.sa-ovr-tile { display: flex; flex-direction: column; gap: 3px; min-width: 148px; padding: 16px 20px 14px; border: 1px solid color-mix(in srgb, var(--oc, #64748b) 22%, var(--line-2)); border-radius: 16px; background: color-mix(in srgb, var(--oc, #64748b) 6%, var(--card)); font: inherit; text-align: left; color: inherit; text-decoration: none; }
.sa-ovr-tile strong { display: flex; align-items: baseline; gap: 8px; font-size: 1.8rem; line-height: 1.05; color: var(--oc, inherit); font-weight: 800; letter-spacing: -.02em; }
.sa-ovr-tile span { font-size: .78rem; color: var(--muted); font-weight: 600; }
button.sa-ovr-go, a.sa-ovr-go { cursor: pointer; }
.sa-ovr-go:hover { border-color: var(--oc, var(--accent)); }
.sa-ovr-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.sa-ovr-top-h { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.sa-ovr-issue { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--line-2); border-radius: 999px; font-size: .82rem; font-weight: 600; text-decoration: none; color: inherit; }
.sa-ovr-issue:hover { border-color: var(--accent); }
.sa-ovr-issue em { font-style: normal; font-weight: 800; }
.sa-ovr-dot-error { background: #dc2626; }
.sa-ovr-dot-warning { background: #e0890b; }
.sa-ovr-dot-notice { background: #64748b; }

/* ---- Audit banner ---- */
.sa-banner { --accent: #e0890b; }
.sa-banner .sa-health { margin: 0; flex: 0 0 auto; }
.sa-banner .sa-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.sa-banner-stats { gap: 18px; }
.pb-go { border: 0; background: none; font: inherit; padding: 0; cursor: pointer; text-align: left; color: var(--muted); text-decoration: none; display: inline-flex; align-items: baseline; gap: 5px; }
.pb-go:hover b { text-decoration: underline; }
.pb-stat.pb-warn b { color: #d97706; }
.pb-stat.pb-good b { color: #16a34a; }
.sa-banner-stats .sa-ovr-delta { margin-left: 2px; }

/* ---- Lead files ---- */
.ld-files { padding: 16px 18px; }
.ld-files h3 { margin: 0 0 6px; font-size: 1rem; display: flex; align-items: center; gap: 7px; }
.ld-files-list { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 10px; }
.ld-file { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin: 0 -8px; border-radius: 8px; }
.ld-file:hover { background: rgba(9, 19, 45, .04); }
.ld-file-name { flex: 1; min-width: 0; font-size: .86rem; font-weight: 600; text-decoration: none; color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-file-name:hover { color: var(--accent); }
.ld-side { display: grid; gap: 14px; align-content: start; }
.ld-side > .card { margin: 0; }
.ld-contracts { padding: 16px 18px; }
.ld-contracts h3 { margin: 0 0 6px; font-size: 1rem; display: flex; align-items: center; gap: 7px; }
.ld-files-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.ld-files-form input[type=file] { flex: 1; min-width: 0; font-size: .8rem; }

/* Audit overview: break the table out of the page column + keep actions on one line, right-aligned. */
.sa-ov-table-wrap {
    width: calc(100vw - 72px);
    max-width: none;
    margin-left: calc((100% - (100vw - 72px)) / 2);
}
@media (max-width: 900px) { .sa-ov-table-wrap { width: 100%; margin-left: 0; } }
.sa-ov-go { text-align: right; white-space: nowrap; }
.sa-ov-go .btn { display: inline-flex; vertical-align: middle; }
.sa-ov-go .btn + .btn, .sa-ov-go .btn + button, .sa-ov-go a + button { margin-left: 6px; }

/* ---- Body of work builder ---- */
.bw-grid { display: grid; grid-template-columns: minmax(320px, 5fr) minmax(360px, 6fr); gap: 16px; align-items: start; }
@media (max-width: 1000px) { .bw-grid { grid-template-columns: 1fr; } }
.bw-picker, .bw-editor { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.bw-picker-head { display: flex; align-items: center; gap: 10px; }
.bw-months { margin-left: auto; padding: 5px 9px; font-size: .82rem; width: auto; }
.bw-picker-tools { display: flex; align-items: center; gap: 6px; font-size: .84rem; }
.bw-picker-tools input { margin-left: auto; padding: 6px 10px; font-size: .82rem; width: 150px; }
.bw-pool { max-height: 560px; overflow-y: auto; }
.bw-group { margin-bottom: 6px; }
.bw-group + .bw-group { border-top: 1px solid var(--line-2); }
.bw-group-h { display: flex; align-items: baseline; gap: 8px; padding: 12px 6px 4px; margin: 0 -6px; border-radius: 8px; cursor: pointer; position: sticky; top: 0; background: var(--surface); z-index: 2; }
.bw-group-h:hover { background: rgba(9, 19, 45, .04); }
.bw-group-h input { align-self: center; }
.bw-group-sel { margin-left: auto; white-space: nowrap; }
.bw-group .bw-month-h { top: 34px; padding-left: 22px; z-index: 1; }
.bw-group .bw-item { padding-left: 22px; }
.bw-month-h { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 10px 0 4px; position: sticky; top: 0; background: var(--surface); }
.bw-item { display: flex; align-items: baseline; gap: 8px; padding: 5px 6px; margin: 0 -6px; border-radius: 8px; cursor: pointer; font-size: .87rem; }
.bw-item:hover { background: rgba(9, 19, 45, .04); }
.bw-item-t { flex: 1; min-width: 0; }
.bw-item-c { flex: 0 0 auto; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bw-gen-row { display: flex; align-items: center; gap: 12px; }
.bw-editor textarea { font-family: ui-monospace, monospace; font-size: .86rem; line-height: 1.55; }
.bw-reports { display: flex; flex-direction: column; gap: 8px; }
.bw-report { display: flex; align-items: center; gap: 10px; padding: 12px 16px; flex-wrap: wrap; }
.bw-report-main { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; }
.bw-report-url { flex: 2 1 260px; padding: 7px 10px; font-size: .8rem; color: var(--muted); }
.sa-ov-table td:first-child { max-width: 240px; }
.sa-ov-acct { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bw-metrics { border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px; background: rgba(9, 19, 45, .02); }
.bw-metrics-toggle { display: flex; align-items: baseline; gap: 8px; font-size: .88rem; cursor: pointer; flex-wrap: wrap; }
.bw-metrics-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.bw-metric-chip { font-size: .76rem; padding: 3px 10px; border-radius: 999px; background: var(--card); border: 1px solid var(--line-2); }
.bw-metric-chip b { font-weight: 700; }
.bw-metric-chip em { font-style: normal; font-weight: 800; }
.bw-metric-chip.is-good em { color: #16a34a; }
.bw-metric-chip.is-bad em { color: #dc2626; }

/* Firewall-blocked crawl notice — the "fetch failed" pages aren't broken */
.sa-waf-note { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; margin-bottom: 16px;
    border-left: 4px solid var(--warning); }
.sa-waf-note .sa-waf-ic { color: var(--warning); font-size: 1.3rem; margin-top: 2px; }
.sa-waf-note p { margin: 4px 0 0; }
.sa-waf-note code { font-size: .8rem; background: var(--surface-2); padding: 1px 6px; border-radius: 6px; }
/* Total block — nothing crawled at all: red, not amber. */
.sa-waf-note--total { border-left-color: var(--danger, #dc2626); }
.sa-waf-note--total .sa-waf-ic { color: var(--danger, #dc2626); }

/* ===== Localized Variable Matrix ===== */
.lm-form { padding: 18px 20px; margin-bottom: 16px; }
.lm-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 800px) { .lm-form-grid { grid-template-columns: 1fr; } }
.lm-form-foot { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.lm-tip { margin: 0 0 12px; }

/* One card per town — labeled fields wrap instead of forcing a wide table. */
.lm-loc { padding: 16px 20px; margin-bottom: 14px; }
.lm-loc-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.lm-loc-ic { color: var(--primary); }
.lm-loc-name { font-size: 1.05rem; letter-spacing: -0.01em; }
.lm-loc-spacer { flex: 1; }
.lm-loc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
@media (max-width: 760px) { .lm-loc-grid { grid-template-columns: 1fr; } }
.lm-f-l { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--muted); font-weight: 700; margin-bottom: 2px; }
.lm-f-sm { }
.lm-cell { min-height: 1.4em; border-radius: 6px; padding: 3px 6px; margin: -3px -6px; outline: none; font-size: .92rem; }
.lm-cell:hover { background: var(--surface-2); }
.lm-cell:focus { background: var(--surface-2); box-shadow: 0 0 0 2px var(--primary); }
.lm-act { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 4px 10px;
    cursor: pointer; font-size: .8rem; color: var(--muted); white-space: nowrap; }
.lm-act:hover { color: var(--ink); border-color: var(--line-2); }
.lm-del:hover { color: var(--danger); border-color: var(--danger); }

/* Localize-a-page panel */
.lm-localize { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.lm-localize > summary { cursor: pointer; font-weight: 650; font-size: .88rem; color: var(--primary); list-style: none; }
.lm-localize > summary::-webkit-details-marker { display: none; }
.lm-localize-body { margin-top: 10px; }
.lm-localize-inputs { display: flex; flex-direction: column; gap: 8px; max-width: 720px; }
.lm-lz-url, .lm-lz-content { width: 100%; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--ink); font: inherit; font-size: .9rem; }
.lm-lz-go { align-self: flex-start; }
.lm-lz-outwrap { margin-top: 12px; }
.lm-lz-out { white-space: pre-wrap; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: 14px 16px; font-family: var(--font); font-size: .88rem; line-height: 1.55; max-height: 480px; overflow-y: auto; }
.ov-tool-ic.ic-locations { background: rgba(13,148,136,.12); color: #0d9488; }

/* ===== Unified markdown composer: textarea + toolbar as one framed unit ===== */
.md-composer, .comment-form-main {
    border: 1px solid var(--line-2); border-radius: 14px; background: var(--surface);
    display: flex; flex-direction: column; gap: 0; align-items: stretch; width: 100%;
}
.md-composer:focus-within, .comment-form-main:focus-within {
    border-color: var(--primary); box-shadow: 0 0 0 3px rgba(255, 90, 78, .13);
}
.md-composer > textarea, .comment-form-main > textarea {
    border: 0 !important; box-shadow: none !important; background: transparent;
    padding: 12px 14px; border-radius: 14px 14px 0 0; width: 100%; resize: vertical; min-height: 74px;
}
.md-composer > textarea:focus, .comment-form-main > textarea:focus { outline: none; }
.md-composer .comment-toolbar, .comment-form-main .comment-toolbar {
    margin-top: 0; padding: 6px 8px; border-top: 1px solid var(--line);
    background: var(--surface-2); border-radius: 0 0 13px 13px; width: 100%;
}
.md-composer .md-btn, .comment-form-main .md-btn {
    border: 0; background: transparent; color: var(--muted);
}
.md-composer .md-btn:hover, .comment-form-main .md-btn:hover { background: rgba(9, 19, 45, .08); color: var(--ink); }
[data-theme="dark"] .md-composer .md-btn:hover, [data-theme="dark"] .comment-form-main .md-btn:hover { background: rgba(255, 255, 255, .1); }
.md-btn.is-on { background: rgba(255, 90, 78, .14); color: var(--primary); }
.md-composer-submit { margin-left: auto; }
.md-composer .md-preview, .comment-form-main .md-preview {
    border-top: 1px dashed var(--line-2); padding: 12px 14px; margin: 0;
}
.task-notes-meta { margin: 6px 0 0; }
/* The mention dropdown anchors to the composer — keep it positioned. */
.md-composer { position: relative; }

/* Composer polish: the AI assist row reads as part of the framed unit. */
.md-composer .ai-write-bar, .comment-form-main .ai-write-bar {
    margin: 0; width: 100%; padding: 7px 10px; border-top: 1px dashed var(--line); background: var(--surface);
}
.comment-form > .avatar { margin-top: 6px; }
.md-composer .comment-toolbar, .comment-form-main .comment-toolbar { gap: 2px; }
.md-composer .md-btn + .btn, .comment-form-main .md-btn + .btn { margin-left: auto; }
.md-composer > textarea::placeholder, .comment-form-main > textarea::placeholder { color: var(--muted); opacity: .75; }

/* ==highlight== inside your OWN (coral) bubble was invisible — gold chip
   with dark ink stands out on both bubble colors. */
.chat-msg--own .chat-bubble mark { background: var(--accent); color: #3b2d00; }
.chat-msg--own .chat-bubble a { color: #fff; text-decoration: underline; }
.chat-msg--own .chat-bubble code.ic { background: rgba(255,255,255,.2); color: #fff; }

/* ===== Marketing blog ===== */
.lp-blog-hero { text-align: center; }
.lp-blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; margin-top: 22px; }
.lp-blog-card { display: flex; flex-direction: column; gap: 8px; padding: 22px; background: var(--surface);
    border: 1px solid var(--line); border-radius: 18px; text-decoration: none; color: var(--ink);
    transition: transform .14s, box-shadow .14s, border-color .14s; }
.lp-blog-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(9,19,45,.10); border-color: var(--line-2); text-decoration: none; }
.lp-blog-card h2, .lp-blog-card h3 { font-size: 1.08rem; line-height: 1.35; margin: 0; letter-spacing: -0.01em; }
.lp-blog-card p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.lp-blog-kw { align-self: flex-start; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--primary); background: rgba(255,90,78,.1); padding: 3px 10px; border-radius: 999px; }
.lp-blog-date { margin-top: auto; color: var(--muted); font-size: .8rem; }
.lp-blog-more { text-align: center; margin-top: 20px; }
.lp-blog-home .lp-eyebrow, .lp-blog-home .lp-h2 { text-align: center; }

.lp-article { max-width: 760px; margin: 0 auto; }
.lp-article-crumbs { font-size: .85rem; color: var(--muted); margin-bottom: 14px; }
.lp-article-meta { color: var(--muted); font-size: .9rem; margin: 8px 0 26px; }
.lp-article-body { font-size: 1.04rem; line-height: 1.75; }
.lp-article-body h2 { margin: 34px 0 12px; letter-spacing: -0.02em; }
.lp-article-body h3 { margin: 26px 0 10px; }
.lp-article-body p { margin: 0 0 16px; }
.lp-article-body ul, .lp-article-body ol { margin: 0 0 16px; padding-left: 24px; }
.lp-article-body li { margin-bottom: 6px; }
.lp-article-faq { margin-top: 40px; }
.lp-article-cta { margin: 44px 0; padding: 28px; text-align: center; border-radius: 18px;
    background: linear-gradient(120deg, rgba(255,90,78,.08), rgba(250,202,44,.10)); border: 1px solid var(--line); }
.lp-article-cta h3 { margin: 0 0 6px; }
.lp-article-cta p { color: var(--muted); margin: 0 0 14px; }
.lp-article-related { margin-top: 40px; }

/* ===== Blog design pass: hero band, richer article typography, author box ===== */
.lp-article-hero { background: linear-gradient(135deg, rgba(255,90,78,.07), rgba(250,202,44,.09)), var(--bg);
    border-bottom: 1px solid var(--line); padding: 48px 20px 36px; }
.lp-article-hero-inner { max-width: 760px; margin: 0 auto; }
.lp-article-hero .lp-h1 { margin: 8px 0 14px; max-width: 18ch; text-wrap: balance; }
.lp-article-hero .lp-article-meta { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lp-author-chip { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; color: var(--ink); }
.lp-author-avatar { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
    background: linear-gradient(120deg, #ff5a4e, #faca2c); color: #fff; font-weight: 800; font-size: .85rem; }
.lp-author-avatar-lg { width: 235px; height: 235px; font-size: 4rem; flex: 0 0 auto; border-radius: 22px; }
@media (max-width: 640px) { .lp-author-box { flex-direction: column; } .lp-author-avatar-lg { width: 160px; height: 160px; } }

.lp-article-body h2 { font-size: 1.5rem; padding-top: 10px; position: relative; }
.lp-article-body h2::before { content: ""; display: block; width: 44px; height: 4px; border-radius: 2px;
    background: linear-gradient(90deg, #ff5a4e, #faca2c); margin-bottom: 10px; }
.lp-article-body a { color: var(--primary); text-decoration: underline; text-decoration-color: rgba(255,90,78,.4);
    text-underline-offset: 3px; }
.lp-article-body a:hover { text-decoration-color: var(--primary); }
.lp-article-body ul li::marker { color: var(--primary); }
.lp-article-body ol li::marker { color: var(--primary); font-weight: 700; }
.lp-article-body strong { color: var(--ink); }

.lp-author-box { display: flex; gap: 16px; align-items: flex-start; margin: 40px 0 0; padding: 22px 24px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }
.lp-author-name { margin: 0 0 2px; font-size: 1.02rem; }
.lp-author-title { margin: 0 0 8px; color: var(--primary); font-size: .82rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em; }
.lp-author-bio { margin: 0 0 10px; color: var(--ink); font-size: 1.02rem; line-height: 1.7; }
.lp-author-links { margin: 0; display: flex; gap: 14px; flex-wrap: wrap; font-size: .85rem; }

.lp-author-img { object-fit: cover; border: 2px solid var(--surface); box-shadow: 0 2px 8px rgba(9,19,45,.15); }
img.lp-author-avatar { display: inline-block; }

/* ── Author profile page ─────────────────────────────────────────────── */
.lp-author-hero { background: linear-gradient(135deg, rgba(255,90,78,.08), rgba(250,202,44,.10)), var(--bg);
    border-bottom: 1px solid var(--line); padding: 40px 24px 48px; }
.lp-author-hero-inner { max-width: 1080px; margin: 0 auto; }
.lp-crumbs { font-size: .82rem; color: var(--muted); margin: 0 0 22px; display: flex; gap: 8px; align-items: center; }
.lp-crumbs a { color: var(--primary); text-decoration: none; font-weight: 600; }
.lp-crumbs a:hover { text-decoration: underline; }
.lp-author-grid { display: grid; grid-template-columns: 260px 1fr; gap: 44px; align-items: start; }
.lp-author-side { display: flex; flex-direction: column; gap: 18px; }
.lp-author-photo { width: 100%; aspect-ratio: 1; max-width: 260px; border-radius: 24px; object-fit: cover;
    display: block; border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(9,19,45,.14);
    background: linear-gradient(120deg, #ff5a4e, #faca2c); }
span.lp-author-photo { display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 5rem; font-family: var(--display); }
.lp-author-social { display: flex; flex-direction: column; gap: 8px; }
.lp-author-social-link { display: inline-flex; align-items: center; gap: 9px; font-size: .9rem; font-weight: 600;
    color: var(--ink); padding: 9px 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 11px;
    text-decoration: none; transition: border-color .14s, transform .14s; }
.lp-author-social-link:hover { border-color: var(--primary); transform: translateY(-1px); text-decoration: none; }
.lp-author-social-link i, .lp-author-social-link .i-emoji { color: var(--primary); font-size: .82rem; }
.lp-author-main .lp-eyebrow { display: inline-block; background: rgba(255,90,78,.1); padding: 5px 13px; border-radius: 999px; }
.lp-author-main .lp-h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin: 4px 0 8px; }
.lp-author-role { margin: 0 0 14px; color: var(--primary); font-size: .9rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em; }
.lp-author-role .lp-author-dot { color: var(--muted); margin: 0 4px; }
.lp-author-tagline { margin: 0 0 14px; font-size: 1.22rem; font-weight: 600; color: var(--ink); line-height: 1.45; max-width: 40ch; }
.lp-author-main .lp-author-bio { font-size: 1.08rem; line-height: 1.7; color: var(--muted); max-width: 62ch; margin: 0 0 22px; }
.lp-author-stats { display: flex; gap: 14px; flex-wrap: wrap; margin: 0 0 22px; }
.lp-author-stat { display: flex; flex-direction: column; gap: 2px; padding: 12px 20px; background: var(--surface);
    border: 1px solid var(--line); border-radius: 14px; min-width: 96px; }
.lp-author-stat-n { font-family: var(--display); font-weight: 800; font-size: 1.7rem; line-height: 1; color: var(--ink); }
.lp-author-stat-l { font-size: .76rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.lp-author-expertise { display: flex; gap: 8px; flex-wrap: wrap; }
.lp-author-pill { font-size: .82rem; font-weight: 600; color: var(--ink); padding: 6px 13px; border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line)); }

.lp-author-about { border-top: 1px solid var(--line); }
.lp-author-about-inner { max-width: 820px; }
.lp-author-about .lp-h2 { margin: 0 0 20px; }
.lp-author-highlights { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.lp-author-highlights li { display: flex; gap: 13px; align-items: flex-start; font-size: 1.06rem; line-height: 1.6; color: var(--ink); }
.lp-author-check { flex: 0 0 auto; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
    background: color-mix(in srgb, var(--primary) 14%, var(--surface)); color: var(--primary); font-size: .8rem; margin-top: 2px; }

.lp-author-posts-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.lp-author-posts-count { font-size: .85rem; color: var(--muted); font-weight: 600; }

@media (max-width: 760px) {
    .lp-author-grid { grid-template-columns: 1fr; gap: 26px; }
    .lp-author-side { flex-direction: row; align-items: flex-start; gap: 18px; }
    .lp-author-photo { width: 128px; height: 128px; }
    .lp-author-social { flex: 1; }
}
@media (max-width: 460px) { .lp-author-side { flex-direction: column; } .lp-author-photo { width: 108px; height: 108px; } }

/* The marketing eyebrow/kicker had no styling at all — it rendered as plain
   body text above titles. Proper kicker treatment: uppercase, tracked, coral. */
.lp-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .74rem; font-weight: 800;
    color: var(--primary); margin: 0 0 10px; }
.lp-article-hero .lp-eyebrow { display: inline-block; background: rgba(255,90,78,.1);
    padding: 5px 13px; border-radius: 999px; }

/* Blog index: featured card + bylines */
.lp-blog-index-hero .lp-sub { max-width: 58ch; }
.lp-blog-list { max-width: 1080px; margin: 0 auto; }
.lp-blog-featured { display: flex; gap: 20px; align-items: stretch; padding: 30px 34px; margin-bottom: 26px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 22px; text-decoration: none; color: var(--ink);
    box-shadow: 0 10px 30px rgba(9,19,45,.06); transition: transform .14s, box-shadow .14s; position: relative; overflow: hidden; }
.lp-blog-featured::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px;
    background: linear-gradient(180deg, #ff5a4e, #faca2c); }
.lp-blog-featured:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(9,19,45,.11); text-decoration: none; }
.lp-blog-featured-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.lp-blog-featured-main h2 { margin: 0; font-size: 1.5rem; letter-spacing: -0.02em; line-height: 1.25; text-wrap: balance; }
.lp-blog-featured-main p { margin: 0; color: var(--muted); line-height: 1.6; max-width: 62ch; }
.lp-blog-featured-side { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; flex: 0 0 auto; }
.lp-blog-featured-badge { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
    color: #fff; background: linear-gradient(120deg, #ff5a4e, #faca2c); padding: 5px 12px; border-radius: 999px; }
.lp-blog-featured-arrow { color: var(--primary); font-size: 1.3rem; }
.lp-blog-byline { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 8px; font-size: .88rem; line-height: 1.35; }
.lp-blog-byline .muted { color: var(--muted); }
.lp-blog-byline-sm { font-size: .8rem; color: var(--muted); }
.lp-author-avatar-sm { width: 22px; height: 22px; font-size: .7rem; }
@media (max-width: 640px) { .lp-blog-featured { flex-direction: column; } .lp-blog-featured-side { flex-direction: row; align-items: center; width: 100%; } }

/* Blog featured images */
.lp-article-figure { margin: 0 0 30px; }
.lp-article-figure img { width: 100%; border-radius: 18px; border: 1px solid var(--line); display: block; }
.lp-blog-featured-img { flex: 0 0 320px; border-radius: 14px; overflow: hidden; align-self: stretch; }
.lp-blog-featured-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-blog-card-img { margin: -22px -22px 4px; border-radius: 18px 18px 0 0; overflow: hidden; aspect-ratio: 16/9; }
.lp-blog-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 760px) { .lp-blog-featured-img { flex-basis: auto; height: 180px; } }

/* Featured image as the post-hero backdrop: blurred + veiled for legibility */
.lp-article-hero--img { position: relative; background-size: cover; background-position: center 30%; overflow: hidden; }
.lp-article-hero--img::before { content: ""; position: absolute; inset: -20px;
    background: linear-gradient(135deg, rgba(255, 250, 244, .94) 0%, rgba(255, 247, 238, .82) 60%, rgba(255, 247, 238, .72) 100%);
    backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.lp-article-hero--img .lp-article-hero-inner { position: relative; z-index: 1; }
.lp-article-hero--img .lp-eyebrow { background: rgba(255, 90, 78, .14); }

/* Logged-out marketing nav: give the brand real presence */
.lp-nav { border-top: 3px solid transparent;
    border-image: linear-gradient(90deg, #ff5a4e, #faca2c) 1; border-bottom: 1px solid var(--line); }
.lp-nav .brand-wordmark { height: 78px; transition: transform .15s; }
.lp-nav .brand:hover .brand-wordmark { transform: scale(1.04); }
@media (max-width: 560px) { .lp-nav .brand-wordmark { height: 56px; } }
.lp-nav-links a { color: var(--ink); font-weight: 600; position: relative; font-size: 1.02rem; }
/* Optically align links + CTA with the wordmark's text baseline (the logo's
   flag pushes its visual center down). */
.lp-nav-links, .lp-nav-cta { margin-top: 7px; }
.lp-nav-links a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px;
    border-radius: 2px; background: linear-gradient(90deg, #ff5a4e, #faca2c); transform: scaleX(0); transition: transform .16s; }
.lp-nav-links a:hover { background: transparent; }
.lp-nav-links a:hover::after { transform: scaleX(1); }
.lp-nav-cta .btn-primary { background: linear-gradient(120deg, #ff5a4e, #f97316); border: 0;
    box-shadow: 0 6px 18px rgba(255, 90, 78, .35); font-weight: 700; padding: 10px 20px; }
.lp-nav-cta .btn-primary:hover { box-shadow: 0 8px 24px rgba(255, 90, 78, .45); transform: translateY(-1px); }

/* Compare/guide heroes: gradient wash + balanced type */
.cmp-hero { background: linear-gradient(135deg, rgba(255,90,78,.07), rgba(250,202,44,.09)), var(--bg);
    border-bottom: 1px solid var(--line); border-radius: 0; padding-top: 56px; padding-bottom: 52px; }
.cmp-hero .lp-h1 { text-wrap: balance; }
.cmp-hero .lp-sub { max-width: 640px; }
.cmp-cta-card { position: relative; overflow: hidden; padding: 64px 36px; }
.cmp-cta-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
    background: linear-gradient(90deg, #ff5a4e, #faca2c); }
.cmp-cta-card .lp-h2 { text-wrap: balance; }

/* ================= Social planner ================= */
.sp-monthnav { display: flex; align-items: center; gap: 10px; }
.sp-monthlabel { font-size: 1.05rem; min-width: 130px; text-align: center; }
.sp-summary { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; padding: 12px 16px; margin-bottom: 14px; }
.sp-sum-item { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; color: var(--muted); }
.sp-sum-item strong { color: var(--text); }
.sp-sum-met i, .sp-sum-met svg { color: #16a34a; }
.sp-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--oc, #64748b); display: inline-block; }
.sp-personsel { max-width: 170px; }

.sp-client { padding: 0; overflow: visible; margin-bottom: 14px; }
.sp-head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.sp-head-main { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; min-width: 220px; }
.sp-name { font-size: 1.02rem; }
.sp-plats { display: inline-flex; gap: 5px; align-items: center; }
.sp-plat { width: 24px; height: 24px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--pc) 13%, transparent); color: var(--pc); font-size: .8rem; }
.sp-perweek { font-size: .74rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--chip-bg, rgba(100,116,139,.12)); color: var(--muted); }
.sp-head-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sp-owner { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; }
.sp-meta-chip { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; color: var(--muted); }
.sp-meta-chip i, .sp-meta-chip svg { opacity: .7; }
a.sp-drive { color: var(--accent); text-decoration: none; }
.sp-head-right { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-wrap: wrap; }
.sp-meter { display: inline-flex; align-items: center; gap: 8px; }
.sp-meter-bar { width: 84px; height: 7px; border-radius: 999px; background: var(--line); overflow: hidden; display: inline-block; }
.sp-meter-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #ff5a4e, #16a34a); transition: width .25s; }
.sp-meter em { font-style: normal; font-size: .78rem; color: var(--muted); white-space: nowrap; }
.sp-met-badge { display: inline-flex; align-items: center; gap: 5px; font-size: .75rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: rgba(100,116,139,.1); color: var(--muted); opacity: .55; }
.sp-met-badge.is-met { background: rgba(22,163,74,.13); color: #16a34a; opacity: 1; }
.sp-check { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; cursor: pointer; user-select: none; }
.sp-check input { accent-color: #16a34a; width: 16px; height: 16px; }
.sp-settings summary { list-style: none; cursor: pointer; color: var(--muted); padding: 4px 6px; border-radius: 8px; }
.sp-settings summary:hover { background: var(--line); color: var(--text); }
.sp-settings-pop { width: 320px; max-height: 480px; overflow-y: auto; display: flex; flex-direction: column; gap: 9px; }
.sp-set-label { font-size: .75rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.sp-set-plats { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-plat-opt { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; cursor: pointer; user-select: none; }
.sp-plat-opt i, .sp-plat-opt svg { color: var(--pc); }
.sp-plat-opt:has(input:checked) { border-color: var(--pc); background: color-mix(in srgb, var(--pc) 9%, transparent); }
.sp-plat-opt input { accent-color: var(--pc); }

.sp-table { width: 100%; }
.sp-table .sp-th-week { width: 110px; }
.sp-week { white-space: nowrap; }
.sp-week-date { font-weight: 600; font-size: .86rem; display: block; }
.sp-platsel { max-width: 150px; }
.sp-media .sh-url { min-width: 160px; }
.sp-add { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.sp-add-row { display: grid; grid-template-columns: 2fr .7fr 1.2fr 1fr 1fr; gap: 12px; }
.sp-add-perweek input { max-width: 90px; }
@media (max-width: 980px) {
    .sp-add-row { grid-template-columns: 1fr 1fr; }
    .sp-head-right { margin-left: 0; }
}
.sp-promo { display: flex; align-items: center; gap: 14px; padding: 13px 18px; margin-bottom: 16px; text-decoration: none; color: var(--text); border-left: 4px solid #ff5a4e; }
.sp-promo strong { color: var(--text); }
.sp-promo .sp-promo-ic { font-size: 1.3rem; color: #ff5a4e; }
.sp-promo .sh-card-go { margin-left: auto; }

/* Social planner v2: contained filter bar, view toggle, calendar, approval chips */
.sp-monthnav { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.sp-montrio { display: flex; align-items: center; gap: 10px; }
.sp-viewtoggle { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.sp-vt { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; font-size: .82rem; font-weight: 600; text-decoration: none; color: var(--muted); }
.sp-vt.active { background: var(--accent); color: #1a1406; }
.sp-vt:hover:not(.active) { background: var(--line); text-decoration: none; }
.sp-filters { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px; margin-bottom: 14px; }
.sp-filter-chips { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.sp-filter-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sp-filter-tools .sh-input { max-width: 180px; }
.sp-search { flex: 1; min-width: 180px; max-width: 320px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font: inherit; background: var(--surface); color: var(--ink); }
.sp-approval { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: rgba(2,132,199,.1); color: #0284c7; }
.sp-approval-auto, .sp-approval-timed { background: rgba(13,148,136,.1); color: #0d9488; }
.sp-cellinput { width: 100%; border: 1px solid transparent; border-bottom: 1px dashed var(--line); border-radius: 6px 6px 0 0; background: transparent; font: inherit; font-size: .85rem; padding: 6px 8px; color: var(--ink); }
.sp-cellinput:hover { background: color-mix(in srgb, var(--line) 30%, transparent); }
.sp-cellinput:focus { outline: none; border: 1px solid var(--accent); border-radius: 8px; background: var(--surface); }
.sp-cal-week { display: flex; gap: 16px; padding: 14px 16px; margin-bottom: 12px; align-items: flex-start; }
.sp-cal-datebox { flex: 0 0 120px; display: flex; flex-direction: column; gap: 2px; }
.sp-cal-wklabel { font-weight: 700; font-size: .95rem; }
.sp-cal-lane { display: flex; flex-wrap: wrap; gap: 10px; flex: 1; }
.sp-cal-chip { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); border-left: 4px solid var(--oc, #64748b); border-radius: 10px; padding: 8px 10px; min-width: 190px; background: var(--surface); }
.sp-cal-chip-top { display: flex; align-items: center; gap: 7px; font-size: .84rem; }
.sp-cal-chip-plat { display: inline-flex; gap: 4px; color: var(--muted); font-size: .78rem; margin-left: auto; }
.sp-cal-sel { font-size: .78rem; padding: 4px 8px; }
@media (max-width: 720px) { .sp-cal-week { flex-direction: column; gap: 8px; } .sp-cal-datebox { flex-direction: row; gap: 8px; align-items: baseline; } }
.pls-dlv-social { text-decoration: none; color: inherit; }
.pls-dlv-social:hover .pls-dlv-l { color: var(--accent); }
.dlv-track-head dt a { font-weight: 400; text-decoration: none; }

/* Social planner: breathing room + brand-colored platform pills */
.sp-head { padding: 16px 20px; }
.sp-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.sp-table td:first-child, .sp-table th:first-child { padding-left: 20px; }
.sp-table td:last-child, .sp-table th:last-child { padding-right: 20px; }
.sp-table tbody tr:last-child td { border-bottom: 0; }
.sp-table tbody tr:hover td { background: var(--surface-2); }
.sp-table td.sh-ok { animation: shok .9s ease; }
.sp-table td.sh-err { background: rgba(220,38,38,.12); }
.sp-table input.sp-cellinput { width: 100%; border: 1px solid transparent; border-radius: 8px; background: transparent; font: inherit; font-size: .85rem; padding: 7px 9px; color: var(--ink); box-shadow: none; }
.sp-table input.sp-cellinput:hover { border-color: var(--line); }
.sp-table input.sp-cellinput:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.sp-platsel { min-width: 138px; }
.sp-client { margin-bottom: 18px; }
.sp-week { padding-top: 12px; }

/* Social planner: Doc + Drive links under the client name */
.sp-name-block { display: flex; flex-direction: column; gap: 3px; }
.sp-name-row { display: inline-flex; align-items: center; gap: 8px; }
.sp-links { display: inline-flex; gap: 12px; }
.sp-links a { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 600; color: var(--accent); text-decoration: none; }
.sp-links a:hover { text-decoration: underline; }
.sp-links i, .sp-links svg { font-size: .82rem; }
.sp-add-row-2 { grid-template-columns: 1fr 1fr; }
/* Nested lists in rendered comments/messages keep visible indentation */
.prose ul ul, .prose ol ol, .prose ul ol, .prose ol ul,
.comment-body ul ul, .comment-body ol ol, .comment-body ul ol, .comment-body ol ul { margin: 2px 0 2px 4px; }

/* Social planner: weekly/monthly cadence */
.sp-add-row { grid-template-columns: 2fr .6fr .9fr 1.1fr 1fr 1fr; }
.sp-add-cadence select { min-width: 110px; }

/* Power Up: 404 matchmaker + client report */
.puwp-404-tools { display: flex; align-items: center; gap: 12px; padding: 0 0 12px; flex-wrap: wrap; }
/* A 404 row whose 301 is already live: visibly settled, not re-actionable. */
.puwp-404-done td { opacity: .55; }
.puwp-404-done .ok-msg { opacity: 1; }
.puwp-redir-sugg input[name=target] { border-color: #7c3aed; background: rgba(124,58,237,.05); }
.puwp-sugg-badge { color: #7c3aed; font-size: .8rem; }
.pub-fixedlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.pub-fixedlist li { display: flex; align-items: baseline; gap: 9px; }
.pub-fixed-check { color: #16a34a; }
.pub-exp { display: flex; gap: 14px; align-items: flex-start; padding: 10px 0; border-top: 1px solid rgba(9,19,45,.08); }
.pub-exp:first-of-type { border-top: 0; }
.pub-exp-verdict { flex: 0 0 auto; font-size: .74rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: rgba(100,116,139,.12); color: #475569; white-space: nowrap; }
.pub-exp-winner { background: rgba(22,163,74,.13); color: #15803d; }
.pub-exp-title { font-weight: 600; }
.pub-monthnav { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 22px 0; }

/* ================= Success tool ================= */
.ov-tool-ic.ic-success { background: rgba(250,202,44,.16); color: #b45309; }
.suc-best { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding: 18px 22px; margin-bottom: 6px; }
.suc-best-l { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #0d9488; }
.suc-best-pct { font-size: 2rem; font-weight: 800; color: #0d9488; }
.suc-best-what { font-size: .95rem; }
.suc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.suc-metric { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; cursor: pointer; opacity: .6; position: relative; }
.suc-metric.is-on, .suc-metric:has(input:checked) { opacity: 1; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--gc) 45%, transparent); }
.suc-metric input { position: absolute; top: 12px; right: 12px; accent-color: var(--gc); width: 17px; height: 17px; }
.suc-metric-pct { font-size: 1.55rem; font-weight: 800; color: var(--gc); }
.suc-metric-pct.is-neg { color: #dc2626; }
.suc-metric-label em { font-style: normal; color: var(--muted); font-size: .82rem; }
.suc-custom { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }
.suc-custom-row { display: grid; grid-template-columns: 1.4fr .5fr .6fr 1.4fr .8fr; gap: 8px; }
.suc-report-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.suc-report-row:last-child { border-bottom: 0; }
.suc-report-row form { margin-left: auto; }
/* public report */

.suc-msg-body { font-size: 1.05rem; line-height: 1.65; margin: 0; }
.suc-pub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
.suc-pub-box { padding: 20px 22px; border-radius: 12px; border: 1px solid rgba(9,19,45,.09); background: color-mix(in srgb, var(--gc) 5%, #fff); display: flex; flex-direction: column; gap: 4px; }
.suc-pub-pct { font-size: 2.2rem; font-weight: 800; color: var(--gc); line-height: 1.1; }
.suc-pub-label { font-size: .92rem; color: #333; }
.suc-pub-label strong { text-transform: uppercase; font-size: .78rem; letter-spacing: .03em; }
.suc-pub-desc { font-size: .8rem; color: #667; }
.suc-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; font-size: .82rem; color: #64748B; }
.suc-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; }
.suc-kw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.suc-kw { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-radius: 10px; background: #fff; border: 1px solid rgba(9,19,45,.09); }
.suc-kw-badge { min-width: 34px; height: 34px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; }
.suc-kw-top3 .suc-kw-badge { background: linear-gradient(135deg, #10B981, #059669); }
.suc-kw-top10 .suc-kw-badge { background: linear-gradient(135deg, #3B82F6, #2563EB); }
.suc-kw-top20 .suc-kw-badge { background: linear-gradient(135deg, #F59E0B, #D97706); }
.suc-kw-other .suc-kw-badge { background: #F1F5F9; color: #64748B; }
.suc-kw-text { font-size: .9rem; }
.suc-kw-up { font-style: normal; color: #059669; font-weight: 700; font-size: .8rem; }
@media print {
    .suc-kw-grid { grid-template-columns: repeat(3, 1fr); }
    .suc-kw, .suc-pub-box { page-break-inside: avoid; }
    .suc-kw-badge, .suc-pub-pct { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Success report: the % actually fits inside the hero ring */
.suc-pub .rgp-grade { font-size: 1.8rem; letter-spacing: -0.02em; }
.suc-pub.suc-longpct .rgp-grade { font-size: 1.35rem; }
.suc-pub .rgp-ring-l { font-size: .72rem; }

/* Power Up connection doctor */
.puwp-diag { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: var(--surface-2, rgba(100,116,139,.06)); display: flex; flex-direction: column; gap: 7px; }
.puwp-diag-h { margin: 0; font-weight: 700; font-size: .9rem; }
.puwp-diag-row { font-size: .87rem; line-height: 1.45; }

/* Power Up pairing */
.puwp-conn-h { margin: 0 0 10px; font-size: .95rem; }
.puwp-manual { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.puwp-manual > summary { list-style: none; cursor: pointer; }
.puwp-repair-form { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; }

/* Availability: dept filter, per-person allowance, calendar */
.av-deptbar { display: flex; align-items: center; gap: 8px; }
.av-deptbar select { min-width: 160px; }
.av-allow-edit { display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; }
.av-allow-edit input { width: 64px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: .85rem; text-align: right; background: transparent; }
.av-allow-edit input:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.av-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.av-cal { padding: 14px 16px; }
.av-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.av-cal-dn { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 2px 4px; }
.av-cal-cell { min-height: 74px; border: 1px solid var(--line); border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 3px; }
.av-cal-empty { border: 0; }
.av-cal-we { background: var(--surface-2, rgba(100,116,139,.05)); }
.av-cal-today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.av-cal-overlap { background: rgba(250,202,44,.08); }
.av-cal-d { font-size: .78rem; font-weight: 700; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.av-cal-n { font-style: normal; background: #d97706; color: #fff; border-radius: 999px; font-size: .66rem; padding: 0 6px; font-weight: 800; }
.av-cal-chip { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px 1px 4px; white-space: nowrap; overflow: hidden; }
.av-cal-chip i { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.av-cal-chip.is-pending { opacity: .55; border-style: dashed; }
@media (max-width: 760px) { .av-cal-grid { gap: 3px; } .av-cal-cell { min-height: 54px; padding: 4px; } .av-cal-chip { font-size: .66rem; } }

/* Admin balance rows gain a 4th column for the per-person allowance editor */
.av-bal-row:has(.av-allow-edit) { grid-template-columns: 150px 1fr 130px auto; }
.av-allow-edit { margin-left: 0; white-space: nowrap; }
@media (max-width: 700px) {
    .av-bal-row:has(.av-allow-edit) { grid-template-columns: 110px 1fr; }
    .av-bal-row:has(.av-allow-edit) .av-bal-n, .av-bal-row:has(.av-allow-edit) .av-allow-edit { grid-column: 2; text-align: left; }
}

/* Availability: partial-day (hours) markers */
.av-partial { font-weight: 700; color: #7c3aed; }
.av-cal-chip.is-partial { border-style: dashed; }
.av-cal-hh { font-style: normal; font-weight: 800; color: #7c3aed; font-size: .68rem; }
.av-hours-custom input { width: 90px; }

/* Workload: PTO conflict banner (task due while assignee is off) */
.wl-conflicts { padding: 16px 18px; margin-bottom: 16px; border: 1px solid #f5c9c4; background: linear-gradient(#fff, #fff6f5); }
.wl-conflicts-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.wl-conflicts-ic { font-size: 1.3rem; color: #dc2626; }
.wl-conflicts-head p { margin: 2px 0 0; }
.wl-conflicts-list { display: flex; flex-direction: column; gap: 2px; }
.wl-conflict-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--ink); font-size: .88rem; }
.wl-conflict-row:hover { background: rgba(220,38,38,.06); }
.wl-conflict-who { font-weight: 600; min-width: 78px; }
.wl-conflict-task { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-conflict-proj { font-size: .74rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--pc) 14%, transparent); color: var(--pc); white-space: nowrap; }
.wl-conflict-when { color: var(--muted); white-space: nowrap; font-size: .82rem; }
.wl-conflict-soft { color: #d97706; font-weight: 600; }
@media (max-width: 640px) { .wl-conflict-proj, .wl-conflict-who { display: none; } }

/* Task board: one-click saved views */
.board-views { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.bv-chip { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; font-weight: 600; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; }
.bv-chip:hover { border-color: var(--accent); color: var(--ink); }
.bv-chip.active { background: var(--accent); border-color: var(--accent); color: #1a1406; }
.bv-chip i, .bv-chip svg { font-size: .78rem; }

/* Client hub sections (extends the client status page) */
.cs-sub { text-align: center; color: var(--muted); margin: -8px 0 16px; }
.cs-needsyou .cs-h2 { color: #b45309; }
.cs-approvals { display: flex; flex-direction: column; gap: 10px; }
.cs-approval { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; border: 1px solid #f0d9a8; background: #fffbf2; border-radius: 12px; text-decoration: none; color: inherit; }
.cs-approval:hover { border-color: #e0a92e; }
.cs-approval strong { display: block; }
.cs-approval-badge { display: inline-block; font-size: .68rem; font-weight: 800; text-transform: uppercase; color: #b45309; background: #fbe7c0; border-radius: 999px; padding: 1px 8px; margin-top: 3px; }
.cs-approval-note { display: block; color: var(--muted); font-size: .85rem; margin-top: 3px; }
.cs-approval-go { flex: 0 0 auto; font-weight: 700; color: var(--accent); white-space: nowrap; }
.cs-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.cs-card { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: inherit; background: var(--surface); }
.cs-card:hover { border-color: var(--accent); }
.cs-card-k { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.cs-card-metric { font-weight: 800; color: #0d9488; }
.cs-card-date { font-size: .8rem; color: var(--muted); }
.cs-social { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.cs-social li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; font-size: .88rem; }
.cs-social-plat { font-weight: 700; }
.cs-social-when { color: var(--muted); font-size: .82rem; }
.cs-social-note { color: var(--muted); flex: 1; }
.cs-social-link { color: var(--accent); text-decoration: none; font-weight: 600; }
.cs-timeline-link { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: inherit; }
.cs-timeline-link:hover { border-color: var(--accent); }

/* Workspace setup wizard (extends .ob-card) */
.ob-setup { border-left: none; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, var(--surface)), var(--surface)); }
.ob-setup-sub { margin: -4px 0 6px; }
.ob-setup-step { align-items: center; }
.ob-setup-step .ob-txt { flex: 1; }
.ob-setup-actions { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px; }

/* ---- Modern first-run setup wizard ---- */
.ob-wizard { padding: 20px 22px; margin-bottom: 18px;
    background: linear-gradient(135deg, rgba(255,90,78,.06), var(--surface) 60%); border: 1px solid var(--line); }
.obw-top { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.obw-ring { position: relative; width: 58px; height: 58px; flex: 0 0 auto; border-radius: 50%;
    background: conic-gradient(var(--primary) calc(var(--pct, 0) * 1%), rgba(9,19,45,.09) 0); display: grid; place-items: center; }
[data-theme="dark"] .obw-ring { background: conic-gradient(var(--primary) calc(var(--pct, 0) * 1%), rgba(255,255,255,.1) 0); }
.obw-ring::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--surface); }
.obw-ring-n { position: relative; z-index: 1; font-weight: 800; font-size: .82rem; color: var(--ink); }
.obw-intro { flex: 1 1 auto; min-width: 0; }
.obw-intro h3 { margin: 0 0 2px; font-size: 1.15rem; }
.obw-dismiss { flex: 0 0 auto; align-self: flex-start; }
.obw-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.obw-step { display: flex; align-items: center; gap: 13px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.obw-step.is-next { border-color: rgba(255,90,78,.5); box-shadow: 0 0 0 1px rgba(255,90,78,.25) inset, 0 4px 16px rgba(255,90,78,.08); }
.obw-step.is-done { opacity: .72; }
.obw-num { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .9rem;
    background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.obw-step.is-next .obw-num { background: var(--primary); color: #fff; border-color: var(--primary); }
.obw-step.is-done .obw-num { background: #16a34a; color: #fff; border-color: #16a34a; }
.obw-step-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.obw-step-body strong { font-size: .92rem; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.obw-step.is-done .obw-step-body strong { text-decoration: line-through; text-decoration-color: var(--line-2); }
.obw-tag { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--primary);
    background: rgba(255,90,78,.12); border-radius: 999px; padding: 2px 8px; text-decoration: none; }
.obw-actions { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.obw-done-tag { flex: 0 0 auto; font-size: .74rem; font-weight: 700; color: #16a34a; display: inline-flex; align-items: center; gap: 5px; }
@media (max-width: 620px) {
    .obw-step { flex-wrap: wrap; }
    .obw-actions { width: 100%; justify-content: flex-start; padding-left: 41px; }
}

/* A .field carrying the hidden attribute must actually hide (flex overrode it) */
.field[hidden] { display: none; }

/* Power Up: grouped tool tabs (was a flat wall of 15) */
.puwp-orient { margin: 6px 0 12px; }
/* Modernized tool nav: grouped in a soft card with divided clusters */
.puwp-tabgroups { display: flex; flex-wrap: wrap; gap: 12px 0; margin: 4px 0 18px; align-items: stretch;
    padding: 14px 6px; background: var(--surface-2, rgba(9,19,45,.03)); border: 1px solid var(--line); border-radius: 14px; }
.puwp-tabgroup { display: flex; flex-direction: column; gap: 8px; padding: 0 16px; }
.puwp-tabgroup + .puwp-tabgroup { border-left: 1px solid var(--line); }
.puwp-tabgroup-l { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); padding-left: 2px; }
.puwp-tabgroup .puwp-tabs { margin: 0; gap: 6px; }
.puwp-tabgroups .rsc-chip { border-color: transparent; background: var(--surface); box-shadow: 0 1px 2px rgba(9,19,45,.05); padding: 6px 13px; transition: transform .1s, box-shadow .1s; }
.puwp-tabgroups .rsc-chip:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 3px 8px rgba(9,19,45,.09); }
/* Active tab: dark high-contrast fill (brand accent can be a pale gold that
   fails white text), with a coloured left accent bar for brand presence. */
.puwp-tabgroups .rsc-chip.on { background: #0f1b33; color: #fff; border-color: #0f1b33; box-shadow: 0 2px 8px rgba(15,27,51,.28); }
.puwp-tabgroups .rsc-chip.on em { background: rgba(255,255,255,.24); color: #fff; }
.puwp-tabgroups .rsc-chip em { background: rgba(15,27,51,.08); color: #0f1b33; border-radius: 999px; padding: 0 7px; font-size: .72rem; font-weight: 800; }
[data-theme="dark"] .puwp-tabgroups .rsc-chip.on { background: var(--accent); color: #0b1220; border-color: var(--accent); }
[data-theme="dark"] .puwp-tabgroups .rsc-chip.on em { background: rgba(0,0,0,.2); color: #0b1220; }
@media (max-width: 760px) { .puwp-tabgroup + .puwp-tabgroup { border-left: 0; } .puwp-tabgroup { padding: 0 12px; } }

/* Power Up: "How it works" walkthrough */
.puwp-howto { padding: 0; margin: 8px 0 12px; overflow: hidden; }
.puwp-howto > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; }
.puwp-howto > summary::-webkit-details-marker { display: none; }
.puwp-howto-t { font-weight: 700; }
.puwp-howto[open] .puwp-howto-hint { display: none; }
.puwp-howto-body { padding: 0 16px 16px; }
.puwp-howto-steps { list-style: none; padding: 0; margin: 0 0 6px; display: flex; flex-direction: column; gap: 12px; }
.puwp-howto-steps li { display: flex; gap: 12px; align-items: flex-start; font-size: .9rem; line-height: 1.5; }
.puwp-howto-n { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; font-size: .82rem; display: grid; place-items: center; }

/* Power Up meta editor: clear per-row save state + prominent Save all */
.pm-state { width: auto; min-width: 74px; text-align: left; font-weight: 700; font-size: .78rem; white-space: nowrap; }
tr.pm-dirty .pm-state::before { content: none; }
.pm-state-unsaved { color: #d97706; }
.pm-state-saving { color: var(--muted); }
.pm-state-saved, .pm-state-ai { color: #16a34a; }
.pm-state-error { color: #dc2626; }
.pm-saveall.is-pending { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.pm-saveall.is-pending:hover { filter: brightness(1.05); }

/* Power Up meta editor: inherited-default placeholder hint */
.pm-inherited::placeholder { color: #94a3b8; font-style: italic; }
.pm-inherited { border-color: #cbd5e1; }

/* Power Up: AI-ready state chip (reads status().ai_ready) */
.puwp-airdy { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.puwp-airdy.on { background: rgba(124,58,237,.12); color: #7c3aed; }
.puwp-airdy.off { background: rgba(217,119,6,.12); color: #b45309; }

/* Power Up: optimizer before/after speed report */
.pus-card { background: linear-gradient(180deg, color-mix(in srgb, #16a34a 5%, var(--surface)), var(--surface)); }
.pus-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.pus-head strong { display: block; }
.pus-ic { font-size: 1.4rem; color: #16a34a; }
.pus-grid { display: flex; flex-direction: column; gap: 2px; }
.pus-col-h, .pus-row { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 8px; align-items: center; padding: 8px 10px; }
.pus-col-h { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-bottom: 1px solid var(--line); }
.pus-row { border-bottom: 1px solid var(--line); font-size: .88rem; }
.pus-row:last-child { border-bottom: 0; }
.pus-l { font-weight: 600; }
.pus-b { color: var(--muted); }
.pus-a { font-weight: 700; }
.pus-delta { font-weight: 800; font-size: .82rem; }
.pus-delta.good { color: #15803d; }
.pus-delta.bad { color: #b91c1c; }
.pus-flat { color: var(--muted); font-size: .82rem; }
.pus-note { margin: 12px 0 0; }

/* Power Up: database cleanup panel */
.puwp-db-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.puwp-db-ic { font-size: 1.4rem; color: #7c3aed; }
.puwp-db-head strong { font-size: 1.05rem; }
.puwp-db-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.puwp-db-chip { font-size: .8rem; padding: 4px 11px; border-radius: 999px; background: rgba(100,116,139,.1); color: var(--muted); }
.puwp-db-chip strong { color: var(--ink); }
.puwp-db-chip.warn { background: rgba(217,119,6,.12); color: #b45309; }
.puwp-db-chip.warn strong { color: #b45309; }
.puwp-db-table td .pm-path { display: block; }
.puwp-db-clean td { opacity: .55; }
.puwp-db-flag { font-size: .72rem; font-weight: 700; color: #7c3aed; background: rgba(124,58,237,.1); border-radius: 999px; padding: 1px 8px; }
.puwp-db-actions { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }

/* Power Up: speed trend sparklines */
.pus-trend-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pus-trend-metric { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; }
.pus-trend-l { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.pus-spark { width: 100%; height: 34px; display: block; }
.pus-trend-v { font-size: .85rem; }
.pus-trend-v em { font-style: normal; font-weight: 800; margin-left: 4px; }
.pus-trend-v em.good { color: #15803d; }
.pus-trend-v em.bad { color: #b91c1c; }
@media (max-width: 560px) { .pus-trend-grid { grid-template-columns: 1fr; } }

/* Progress bar for slow full-page POSTs (auto-blog publish/draft, draft publish) */
.pub-progress { margin: 10px 0 2px; max-width: 460px; }
.pub-progress-bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.pub-progress-fill { display: block; height: 100%; width: 0; border-radius: 999px;
    background: linear-gradient(90deg, var(--primary), var(--primary-d, #e8483d)); transition: width .18s ease; }
.pub-progress-label { display: flex; align-items: center; gap: 8px; margin-top: 7px; font-size: .82rem; font-weight: 600; color: var(--muted); }
.pub-progress-spin { width: 13px; height: 13px; flex: 0 0 auto; border: 2px solid var(--line-2); border-top-color: var(--primary); border-radius: 50%; animation: pub-progress-spin .7s linear infinite; }
@keyframes pub-progress-spin { to { transform: rotate(360deg); } }

/* Editorial calendar (month grid across clients) */
.edcal-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 10px; }
.edcal-month { margin: 0; font-size: 1.15rem; }
.edcal-legend { display: flex; gap: 14px; flex-wrap: wrap; margin: 0 0 12px; font-size: .78rem; font-weight: 600; color: var(--muted); }
.edcal-card { padding: 14px 16px 16px; }
.edcal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.edcal-dow { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 2px 6px; }
.edcal-day { min-height: 92px; border: 1px solid var(--line); border-radius: 9px; padding: 5px 6px; background: var(--bg-2); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.edcal-blank { border: 0; background: none; }
.edcal-today { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); background: var(--surface); }
.edcal-num { font-size: .72rem; font-weight: 700; color: var(--muted); }
.edcal-today .edcal-num { color: var(--primary); }
.edcal-chip { display: block; min-width: 0; padding: 3px 7px; border-radius: 7px; font-size: .7rem; line-height: 1.3;
    text-decoration: none; color: var(--ink); border-left: 3px solid var(--c, var(--muted)); background: var(--surface); box-shadow: 0 1px 2px rgba(9,19,45,.06); }
.edcal-chip:hover { text-decoration: none; filter: brightness(.97); }
.edcal-chip-client { display: block; font-weight: 800; font-size: .62rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.edcal-chip-label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.edcal-published { --c: #16a34a; } .edcal-draft { --c: #d97706; } .edcal-task { --c: #7c3aed; } .edcal-scheduled { --c: #2563eb; }
.edcal-leg-published { color: #16a34a; } .edcal-leg-draft { color: #d97706; } .edcal-leg-task { color: #7c3aed; } .edcal-leg-scheduled { color: #2563eb; }
[data-theme="dark"] .edcal-chip { background: rgba(255,255,255,.05); }
@media (max-width: 800px) { .edcal-grid { grid-template-columns: repeat(2, 1fr); } .edcal-dow { display: none; } .edcal-blank { display: none; } .edcal-day { min-height: 0; }
    .edcal-day:not(:has(.edcal-chip)) { display: none; } .edcal-num::after { content: ' ' attr(data-m); } }

/* On-Page saved-briefs filters */
.op-brief-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0 4px; }
.op-brief-filters input[type=search] { flex: 1 1 200px; min-width: 160px; width: auto; padding: 7px 11px; }
.op-brief-filters select { width: auto; padding: 7px 9px; font-size: .85rem; }

/* Dashboard connector meter ("workspace X% wired") */
.connmeter { padding: 14px 18px; margin-bottom: 16px; }
.connmeter-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.connmeter-x { margin-left: auto; }
.connmeter-x button { background: none; border: 0; cursor: pointer; color: var(--muted); font-size: 1.15rem; line-height: 1; }
.connmeter-x button:hover { color: var(--ink); }
.connmeter-bar { height: 7px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin: 9px 0 10px; box-shadow: inset 0 0 0 1px var(--line); }
.connmeter-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--accent)); }
.connmeter-missing { display: flex; gap: 8px; flex-wrap: wrap; }
.connmeter-chip { font-size: .78rem; font-weight: 600; color: var(--ink); text-decoration: none; padding: 4px 11px;
    border: 1px dashed var(--line-2); border-radius: 999px; }
.connmeter-chip:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }
.connmeter-chip .muted { font-weight: 500; }

/* Draft-restore offer above a textarea with stashed unsaved text */
.ta-restore { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 0 0 6px; padding: 7px 11px;
    border: 1px dashed #d97706; border-radius: 9px; background: rgba(217,119,6,.07); font-size: .8rem; color: var(--ink); }
.ta-restore button { font: inherit; font-weight: 700; cursor: pointer; border: 0; border-radius: 7px; padding: 3px 11px; }
.ta-restore .ta-restore-yes { background: #d97706; color: #fff; }
.ta-restore .ta-restore-no { background: none; color: var(--muted); }
.ta-restore .ta-restore-no:hover { color: var(--ink); }

/* Project-page content pipeline card */
.cp-stages { display: flex; gap: 6px; flex-wrap: wrap; }
.cp-stage { flex: 1 1 0; min-width: 74px; text-align: center; padding: 8px 6px; border: 1px solid var(--line);
    border-radius: 10px; background: var(--bg-2); text-decoration: none; color: var(--ink); }
.cp-stage:hover { border-color: var(--primary); text-decoration: none; }
.cp-stage b { display: block; font-size: 1.15rem; line-height: 1.1; }
.cp-stage span { display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: var(--muted); margin-top: 2px; }
.cp-stage.cp-warn { border-color: rgba(217,119,6,.5); } .cp-stage.cp-warn b { color: #d97706; }
.cp-stage.cp-go { border-color: rgba(47,158,68,.5); } .cp-stage.cp-go b { color: #2f9e44; }

/* Year in review — the "wrapped" page */
.yr-wrap { max-width: 760px; margin: 10px auto; }
.yr-hero { text-align: center; padding: 34px 20px 26px; border-radius: 18px; margin-bottom: 18px; color: #fff;
    background: linear-gradient(135deg, var(--brand, var(--primary)) 0%, #7c3aed 100%); }
.yr-eyebrow { margin: 0 0 4px; font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.yr-title { margin: 0 0 8px; font-size: 2rem; }
.yr-sub { margin: 0 auto; max-width: 480px; opacity: .92; }
.yr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.yr-tile { background: var(--surface, #fff); border: 1px solid var(--line, #e5e7ef); border-radius: 14px; padding: 18px 14px; text-align: center;
    box-shadow: 0 4px 14px -10px rgba(9,19,45,.35); }
.yr-ic { display: block; font-size: 1.5rem; margin-bottom: 4px; }
.yr-tile b { display: block; font-size: 1.7rem; line-height: 1.1; color: var(--ink, #09132d); }
.yr-lbl { display: block; margin-top: 3px; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #6b7280); }
.yr-best { display: flex; gap: 12px; align-items: center; margin-top: 14px; padding: 16px 20px; border-left: 4px solid #f59e0b; }
.yr-best-ic { font-size: 1.7rem; flex: 0 0 auto; }
.yr-list { margin-top: 14px; padding: 16px 22px; }
.yr-list ul { margin: 6px 0 0; padding-left: 20px; }
.yr-list li { margin: 4px 0; }
.yr-fun { margin-top: 14px; padding: 14px 22px; background: rgba(124,58,237,.06); border: 1px dashed rgba(124,58,237,.3); }
.yr-fun p { margin: 6px 0; font-weight: 600; }
.yr-foot { text-align: center; margin: 18px 0 6px; }

/* Migration guardian */
.mg-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.mg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: .88rem; }
.mg-list li { overflow-wrap: anywhere; }

/* Client identity dot — shared across mixed-client views */
.cdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; vertical-align: baseline; }

/* "What's new" pulse dot on Changelog links */
.nav-newdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--primary);
    margin-left: 6px; vertical-align: middle; animation: navdot-pulse 2.2s infinite; }
@keyframes navdot-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,90,78,.45); } 70% { box-shadow: 0 0 0 5px rgba(255,90,78,0); } 100% { box-shadow: 0 0 0 0 rgba(255,90,78,0); } }

/* "Needs attention" panel — one designed card, not a stack of colored strips */
.attn-card { padding: 16px 18px; margin-bottom: 16px; }
.attn-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.attn-head h3 { margin: 0; font-size: 1.02rem; display: inline-flex; align-items: center; gap: 8px; }
.attn-head h3 svg, .attn-head h3 i { color: #f59e0b; }
.attn-count { font-size: .72rem; font-weight: 800; background: var(--ink); color: var(--surface); border-radius: 999px; padding: 1px 9px; }
.attn-rows { display: flex; flex-direction: column; gap: 8px; }
.attn-row { display: flex; align-items: center; gap: 14px; padding: 11px 14px; border-radius: 12px; text-decoration: none; color: var(--ink);
    border: 1px solid var(--line); background: var(--bg-2); transition: border-color .12s, transform .12s, box-shadow .12s; }
.attn-row:hover { text-decoration: none; border-color: var(--tone, var(--primary)); transform: translateX(2px); box-shadow: 0 3px 10px -6px rgba(9,19,45,.3); }
.attn-ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 1.05rem;
    color: #fff; background: var(--tone, var(--muted)); }
.attn-ic svg, .attn-ic i { color: #fff; }
.attn-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.attn-txt strong { font-size: .95rem; }
.attn-cta { flex: 0 0 auto; font-size: .82rem; font-weight: 700; color: var(--tone, var(--primary)); white-space: nowrap; }
.attn-arr { display: inline-block; transition: transform .12s; }
.attn-row:hover .attn-arr { transform: translateX(3px); }
.attn-warn { --tone: #d97706; }
.attn-go   { --tone: #16a34a; }
.attn-bad  { --tone: #dc2626; }
[data-theme="dark"] .attn-row { background: rgba(255,255,255,.03); }
@media (max-width: 560px) { .attn-cta { display: none; } }

/* Avatar hover-card */
.hovercard { position: absolute; z-index: 430; width: 250px; padding: 13px 15px; border-radius: 13px;
    background: var(--surface); border: 1px solid var(--line); box-shadow: 0 16px 40px -16px rgba(9,19,45,.5);
    animation: flash-in .18s ease; }
.hc-top { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.hc-top > div { display: flex; flex-direction: column; min-width: 0; }
.hc-top strong { font-size: .95rem; }
.hc-stats { display: flex; gap: 12px; flex-wrap: wrap; font-size: .8rem; color: var(--muted); }
.hc-stats b { color: var(--ink); }
.hc-due { color: #d97706; } .hc-due b { color: #d97706; }
.hc-off { color: #7c3aed; font-weight: 600; }

/* Back-to-top */
.backtop { position: fixed; right: 18px; bottom: 20px; z-index: 380; width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 1.15rem; font-weight: 700;
    cursor: pointer; box-shadow: 0 8px 22px -10px rgba(9,19,45,.4); transition: color .12s, transform .12s; }
.backtop:hover { color: var(--primary); transform: translateY(-2px); }

/* Sticky mini-TOC chips (long tool pages) */
.minitoc { position: sticky; top: calc(var(--topbar-h, 57px) + 4px); z-index: 105; display: flex; gap: 6px; flex-wrap: wrap;
    padding: 7px 10px; margin: 0 0 12px; border-radius: 12px; border: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.minitoc a { font-size: .78rem; font-weight: 700; color: var(--muted); text-decoration: none; padding: 4px 11px; border-radius: 999px; }
.minitoc a:hover { color: var(--ink); background: var(--surface-2); text-decoration: none; }
.minitoc a.is-active { color: #fff; background: var(--ink); }
[data-theme="dark"] .minitoc a.is-active { background: var(--primary); }

/* Needs-attention: who owns each row + "includes you" callout */
.attn-who { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.attn-who .avatar.xs { width: 22px; height: 22px; font-size: .6rem; margin-left: -6px; border: 2px solid var(--surface); }
.attn-who > span:first-child .avatar.xs { margin-left: 0; }
.attn-who-more { font-size: .68rem; font-weight: 800; color: var(--muted); margin-left: 2px; }
.attn-you-chip { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; padding: 3px 10px; border-radius: 999px;
    font-size: .72rem; font-weight: 800; background: var(--primary); color: #fff; white-space: nowrap;
    animation: attn-you-pop .4s cubic-bezier(.2,.9,.3,1.4); }
.attn-you-chip svg, .attn-you-chip i { color: #fff; }
.attn-row.attn-you { border-color: color-mix(in srgb, var(--primary) 45%, var(--line)); background: color-mix(in srgb, var(--primary) 4%, var(--bg-2)); }
@keyframes attn-you-pop { from { transform: scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 700px) { .attn-who .avatar.xs { display: none; } .attn-who-more { display: none; } }

/* Summit starter chips */
.summit-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px; }
.summit-chip { font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; color: var(--muted);
    background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px;
    transition: color .12s, border-color .12s, transform .12s; }
.summit-chip:hover { color: var(--primary); border-color: var(--primary); transform: translateY(-1px); }

/* Sortable + sticky table headers */
.signin-table thead th, .op-gsc-table thead th { position: sticky; top: calc(var(--topbar-h, 57px) + 2px); background: var(--surface); z-index: 5; }
.th-sort { cursor: pointer; user-select: none; }
.th-sort:hover { color: var(--ink); }
.th-sort.is-sorted::after { content: ''; display: inline-block; margin-left: 5px; border: 4px solid transparent; border-top-color: var(--primary); vertical-align: 1px; }
.th-sort[data-dir="asc"].is-sorted::after { border-top-color: transparent; border-bottom-color: var(--primary); vertical-align: -3px; }

/* Consistent keyboard focus rings on custom controls */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.tgl input:focus-visible + i, .plugin-toggle input:focus-visible + .plugin-switch { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Empty-state upgrade: friendlier, centered, with breathing room */
.empty-inline { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
    padding: 34px 20px; border: 1px dashed var(--line-2); border-radius: 14px; color: var(--muted); background: var(--bg-2); }
.empty-inline svg, .empty-inline i, .empty-inline .icon { font-size: 1.8rem; opacity: .55; }

/* The hidden attribute must ALWAYS win. Any class that sets display
   (like .empty-inline's flex above) silently overrides the browser's
   [hidden]{display:none} — which is exactly how "No projects match"
   showed on the dashboard under a full grid of projects. */
[hidden] { display: none !important; }

/* Print: internal tool pages print as clean documents */
@media print {
    .topbar, .action-bar, .timer-strip, .minitoc, .backtop, .summit, .flash, .breadcrumb,
    .op-report-actions, .op-brief-nav, .op-toolbar, .hero-actions, .op-secnotes, .op-note-form,
    .op-notes-card, .op-cm-card, .op-client-card, .op-sec-edit, .op-sec-form, .attn-card,
    form, button:not(.no-print-keep) { display: none !important; }
    .card, .op-block { box-shadow: none !important; border: 1px solid #ddd !important; break-inside: avoid; }
    body { background: #fff !important; }
    a { color: inherit !important; text-decoration: none !important; }
}

/* ── Summit chat thread (popover + /summit page) ─────────────────────────── */
.summit-thread { display: flex; flex-direction: column; gap: 8px; margin: 0 0 10px; padding: 4px 2px;
    max-height: 300px; overflow-y: auto; scroll-behavior: smooth; }
.st-b { max-width: 88%; padding: 8px 12px; border-radius: 14px; font-size: .86rem; line-height: 1.45;
    overflow-wrap: anywhere; }
.st-user { align-self: flex-end; background: var(--primary); color: #fff; border-bottom-right-radius: 4px; }
.st-ai { align-self: flex-start; background: var(--bg-2); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
[data-theme="dark"] .st-ai { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
.st-ai p { margin: 0 0 6px; } .st-ai p:last-child { margin-bottom: 0; }
.st-ai ul, .st-ai ol { margin: 4px 0; padding-left: 18px; }
.st-err { color: #c0392b; border-color: rgba(192,57,43,.4); }
.st-live::after { content: '▍'; animation: st-blink 1s steps(2) infinite; opacity: .7; }
@keyframes st-blink { 50% { opacity: 0; } }
.summit-thread .summit-action { align-self: flex-start; max-width: 88%; margin-top: 0; }

/* The full-page Summit workspace */
.sp-hero { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.sp-hero-img { width: 104px; height: auto; flex: 0 0 auto; }
.sp-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 18px; align-items: start; }
@media (max-width: 900px) { .sp-wrap { grid-template-columns: 1fr; } .sp-hero-img { display: none; } }
.sp-main { padding: 16px 18px; }
.sp-ctx { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.sp-ctx select { font: inherit; font-size: .85rem; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line);
    background: var(--surface); color: inherit; max-width: 320px; }
.summit-thread--page { max-height: min(52vh, 560px); min-height: 120px; }
.sp-ask { margin-bottom: 4px; }
.sp-chips { margin-top: 8px; }
.sp-side { display: flex; flex-direction: column; gap: 14px; }
.sp-side-card { padding: 14px 16px; }
.sp-side-card h3 { margin: 0 0 8px; font-size: .95rem; }
.sp-can { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: .85rem; }
.sp-can-note { margin: 10px 0 0; }

/* Project overview: who chatted with Summit about this client */
.ov-summit { border-top: 1px solid var(--line); }
.ov-summit:first-of-type { border-top: 0; }
.ov-summit summary { display: flex; align-items: center; gap: 8px; padding: 7px 2px; cursor: pointer; list-style: none; }
.ov-summit summary::-webkit-details-marker { display: none; }
.ov-summit summary:hover { background: var(--bg-2); border-radius: 8px; }
.ov-summit .avatar-xs, .ov-summit .avatar { width: 22px; height: 22px; font-size: .62rem; flex: 0 0 auto; }
.ov-summit-q { flex: 1 1 auto; min-width: 0; font-size: .82rem; line-height: 1.35; }
.ov-summit-at { display: block; }
.ov-summit-a { padding: 4px 6px 10px 30px; font-size: .84rem; }
.ov-summit-full { margin: 0 0 6px; font-style: italic; }

/* Route-emails page: "likely a reply to X" attribution chip */
.route-owner { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 4px 10px;
    font-size: .78rem; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-2); width: fit-content; }
.route-owner .avatar { width: 18px; height: 18px; font-size: .55rem; }
.route-owner--you { border-color: var(--primary); background: rgba(37,99,235,.07); }

/* Summit conversations card sits in the overview's main column — keep the
   answer body readable at that width */
.ov-summit-card .ov-summit-a { max-width: 720px; }

/* Summit's proactive assist bubble (project pages, above the mascot) */
.summit-bubble { position: relative; max-width: 264px; padding: 12px 14px; border-radius: 16px 16px 4px 16px;
    background: var(--surface); border: 1px solid var(--line); box-shadow: 0 14px 38px rgba(9,19,45,.22);
    animation: sb-in .28s ease-out; }
[data-theme="dark"] .summit-bubble { background: rgba(28,36,58,.96); border-color: rgba(255,255,255,.12); }
@keyframes sb-in { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
.summit-bubble[hidden] { display: none; }
.summit-bubble-txt { margin: 0 18px 10px 0; font-size: .84rem; line-height: 1.45; font-weight: 600; }
.summit-bubble-x { position: absolute; top: 6px; right: 8px; border: 0; background: none; cursor: pointer;
    font-size: 1.05rem; line-height: 1; color: var(--muted); padding: 2px 4px; }
.summit-bubble-x:hover { color: var(--ink); }

/* ── Summit chat v2: bigger panel, redesigned action cards, follow-up chips ── */
.summit-panel { width: 400px; max-width: min(400px, 92vw); }
.summit-thread { max-height: min(46vh, 430px); }
.summit-ask input { font-size: .9rem; padding: 10px 14px; }
.summit-thread--page { max-height: min(62vh, 680px); min-height: 160px; }
.st-b { font-size: .88rem; }

/* Confirm-before-act cards: a designed proposal, not a bare dashed box */
.summit-action { border: 1px solid rgba(37,99,235,.30); border-left: 4px solid var(--primary);
    border-radius: 12px; padding: 10px 12px; margin-top: 10px;
    background: linear-gradient(135deg, rgba(37,99,235,.07), rgba(22,192,183,.06));
    box-shadow: 0 4px 14px rgba(9,19,45,.08); }
[data-theme="dark"] .summit-action { background: linear-gradient(135deg, rgba(37,99,235,.16), rgba(22,192,183,.10)); border-color: rgba(37,99,235,.45); }
.sa-head { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.sa-ic { width: 24px; height: 24px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface); border: 1px solid var(--line); border-radius: 8px; font-size: .8rem;
    box-shadow: 0 1px 3px rgba(9,19,45,.10); }
.sa-kicker { font-size: .66rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--primary); }
.summit-action-l { font-weight: 700; font-size: .85rem; line-height: 1.4; margin-bottom: 9px; overflow-wrap: anywhere; }
.summit-action-btns { display: flex; gap: 8px; }
.sa-go { box-shadow: 0 3px 10px rgba(37,99,235,.30); }
.sa-no { opacity: .8; }

/* Follow-up suggestion chips under the latest answer */
.st-next { display: flex; flex-wrap: wrap; gap: 6px; align-self: flex-start; max-width: 92%; margin-top: 2px; }
.st-next-chip { font-size: .76rem; }

/* ── New-employee onboarding course (/training) ─────────────────────────── */
.tut-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.tut-hero-progress { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 0 0 auto; }
.tut-ring { width: 92px; height: 92px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: conic-gradient(var(--primary) calc(var(--pct) * 1%), var(--line) 0); }
.tut-ring span { width: 72px; height: 72px; border-radius: 50%; background: var(--surface);
    display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.05rem; }
.tut-grad { font-weight: 800; color: var(--primary); }

.tut-list { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.tut-card { display: flex; align-items: center; gap: 14px; padding: 14px 18px; text-decoration: none; color: inherit;
    transition: transform .12s, box-shadow .12s; }
.tut-card:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(9,19,45,.12); }
.tut-num { width: 30px; height: 30px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; border: 2px solid var(--line-2); font-weight: 800; font-size: .85rem; color: var(--muted); }
.tut-done .tut-num { border-color: #2f9e44; background: #2f9e44; color: #fff; }
.tut-emoji { font-size: 1.3rem; flex: 0 0 auto; }
.tut-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tut-mins { flex: 0 0 auto; }
.tut-done { opacity: .78; }

/* Lesson page */
.tut-shell { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 860px) { .tut-shell { grid-template-columns: 1fr; } .tut-side { display: none; } }
.tut-side { position: sticky; top: calc(var(--topbar-h, 57px) + 14px); display: flex; flex-direction: column; gap: 2px; }
.tut-side-h { font-weight: 800; font-size: .82rem; margin: 0 0 6px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.tut-side-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 9px;
    font-size: .84rem; text-decoration: none; color: var(--muted); }
.tut-side-item:hover { background: var(--bg-2); color: var(--ink); }
.tut-side-on { background: var(--bg-2); color: var(--ink); font-weight: 700; }
.tut-side-n { width: 20px; height: 20px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; border: 1.5px solid var(--line-2); font-size: .68rem; font-weight: 800; }
.tut-side-done .tut-side-n { border-color: #2f9e44; background: #2f9e44; color: #fff; }
.tut-main { padding: 26px 30px 22px; max-width: 780px; }
.tut-kicker { margin: 0 0 6px; font-size: .78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.tut-done-tag { color: #2f9e44; }
.tut-title { margin: 0 0 14px; font-size: 1.6rem; }
.tut-content h2 { margin: 22px 0 8px; font-size: 1.08rem; }
.tut-content ul, .tut-content ol { margin: 8px 0; padding-left: 22px; }
.tut-content li { margin: 5px 0; }
.tut-callout, .tut-try { margin: 16px 0; padding: 11px 14px; border-radius: 10px; font-size: .9rem; }
.tut-callout { background: rgba(37,99,235,.07); border: 1px solid rgba(37,99,235,.22); }
.tut-try { background: rgba(47,158,68,.08); border: 1px solid rgba(47,158,68,.28); }
[data-theme="dark"] .tut-callout { background: rgba(37,99,235,.14); }
[data-theme="dark"] .tut-try { background: rgba(47,158,68,.14); }
.tut-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 24px;
    padding-top: 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.tut-foot form { display: flex; gap: 8px; align-items: center; }

/* Dashboard new-hire banner */
.tut-banner { display: flex; align-items: center; gap: 14px; padding: 13px 18px; margin: 0 0 16px;
    text-decoration: none; color: inherit; border-left: 4px solid var(--primary); }
.tut-banner:hover { box-shadow: 0 10px 26px rgba(9,19,45,.12); }
.tut-banner-ic { font-size: 1.5rem; flex: 0 0 auto; }
.tut-banner-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tut-banner-bar { flex: 0 0 140px; height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.tut-banner-bar i { display: block; height: 100%; background: var(--primary); border-radius: 999px; }
@media (max-width: 700px) { .tut-banner-bar { display: none; } }

/* Body-of-work confirm card: per-phase preview list */
.sa-preview { list-style: none; margin: 0 0 9px; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.sa-preview li { font-size: .8rem; padding: 4px 8px; background: var(--surface); border: 1px solid var(--line);
    border-radius: 7px; overflow-wrap: anywhere; }
[data-theme="dark"] .sa-preview li { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }

/* Edit-in-place for on-page team notes */
.op-note-editbtn { font-size: .72rem; }
.op-note-editform { margin-top: 6px; }
.op-note-editform textarea { width: 100%; font: inherit; font-size: .85rem; padding: 8px 10px;
    border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: inherit; resize: vertical; }
.op-note-edit-actions { display: flex; gap: 8px; margin-top: 6px; }

/* SOP attached to a task */
.task-sop { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 9px 12px;
    border: 1px solid rgba(37,99,235,.25); border-left: 4px solid var(--primary); border-radius: 10px;
    background: rgba(37,99,235,.06); }
[data-theme="dark"] .task-sop { background: rgba(37,99,235,.13); }
.task-sop-link { flex: 1 1 auto; min-width: 0; text-decoration: none; color: inherit; font-size: .88rem; }
.task-sop-link:hover strong { text-decoration: underline; }
.task-sop-attach { margin: 8px 0 0; }
.task-sop-attach summary { cursor: pointer; }
.task-sop-form { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.task-sop-form select { flex: 1 1 240px; font: inherit; font-size: .85rem; padding: 7px 10px;
    border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: inherit; }

/* Seasonal content planner card */
.sp-season-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.sp-season-m { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.sp-season-topic { display: flex; align-items: center; gap: 6px; font-size: .85rem; padding: 4px 0; overflow-wrap: anywhere; }
.sp-season-topic form { margin-left: auto; }
.sp-season-add { display: flex; gap: 6px; flex-wrap: wrap; }
.sp-season-add select { flex: 0 0 auto; }
.sp-season-add input[name="title"] { flex: 1 1 180px; }
.sp-season-add input[name="keyword"] { flex: 1 1 120px; }
.sp-season-add select, .sp-season-add input { font: inherit; font-size: .84rem; padding: 7px 9px;
    border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: inherit; }

/* Internal-link map */
.lm-kpis { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.lm-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
@media (max-width: 980px) { .lm-grid { grid-template-columns: 1fr; } }
.lm-canvas-card { padding: 16px 18px; }
#lm-canvas { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); }
.lm-side { display: flex; flex-direction: column; gap: 14px; }
.lm-card { padding: 14px 16px; }
.lm-card h3 { margin: 0 0 6px; font-size: .95rem; }
.lm-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px;
    max-height: 300px; overflow-y: auto; font-size: .84rem; }
.lm-list a { overflow-wrap: anywhere; }
.pl-kpi-warn { border-color: rgba(217,119,6,.5); }

/* ===== Design tokens: one pill/badge scale platform-wide =====
   Every feature grew its own tiny status badge over time — same idea, a dozen
   slightly different sizes/weights/paddings. These overrides sit at the end of
   the sheet and normalize the METRICS (size, weight, padding, radius, spacing)
   of the whole family; each family keeps its own colors and casing. */
:root {
    --pill-fs: .7rem; --pill-fw: 700; --pill-ls: .035em;
    --pill-pad: 2px 9px; --pill-rad: 999px;
    --count-fs: .72rem; --count-pad: 1px 8px;
}
/* Status pills — colored word badges (Open / In progress / Breach / Signed…) */
.pill, .status-pill, .task-meta-status, .gm-sla, .ap-badge, .ap-cat, .il-badge,
.mi-badge, .phase-status, .hey-bk, .risk-pill, .gm-flag, .pc-prio, .lp-pw-status,
.age-badge, .stall-badge, .sg-tag, .ov-att-why {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: var(--pill-fs); font-weight: var(--pill-fw); letter-spacing: var(--pill-ls);
    padding: var(--pill-pad); border-radius: var(--pill-rad);
    line-height: 1.55; white-space: nowrap; vertical-align: middle;
}
/* Count bubbles — small numeric badges next to headings and buckets */
.attn-count, .hey-section-count, .agenda-bucket-n, .cgroup-head .cgroup-n,
.pls-count, .subcount, .ms-bucket-count, .gm-n, .count-badge, .wl-fbtn-n, .ob-progress {
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--count-fs); font-weight: 700; padding: var(--count-pad);
    border-radius: 999px; line-height: 1.5; font-variant-numeric: tabular-nums;
    vertical-align: middle;
}
/* Deliberate small variants keep their compact size */
.pill-sm { font-size: .6rem; padding: 2px 8px; }
.label-chip.sm { font-size: .68rem; padding: 1px 8px; }

/* Busy submit buttons (global POST busy-state in app.js) */
button.is-busy, input.is-busy { pointer-events: none; opacity: .85; }

/* ===== Mobile hardening pass (consolidated) =====
   Global small-screen fixes the per-feature queries missed: no sideways page
   scroll, tables scroll inside their card, comfortable touch targets, and no
   iOS focus-zoom on form fields. */
@media (max-width: 700px) {
    body { overflow-x: clip; }                     /* wide stragglers scroll their card, never the page */
    .card:has(table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .panel-head { row-gap: 8px; }
    /* Comfortable touch targets (44px guideline, without blowing up density) */
    .btn, button.btn, a.btn { min-height: 38px; }
    .bv-chip { padding: 7px 13px; }
    .board-views { row-gap: 8px; }
    .todo-item { padding-top: 9px; padding-bottom: 9px; }
    /* iOS zooms any focused field under 16px — hold text fields at 16px */
    input[type="text"], input[type="search"], input[type="email"], input[type="url"],
    input[type="number"], input[type="date"], select, textarea { font-size: 16px; }
    /* Filter chip rows scroll sideways instead of stacking ten-deep */
    .cbrowse-tabs, .conn-subnav { max-width: 100%; }
}

/* Per-project setup meter (overview sidebar, hidden once 100%) */
.pm-meter h3 { display: flex; align-items: center; gap: 8px; }
.pm-meter-pct { margin-left: auto; font-size: .72rem; font-weight: 800; color: var(--muted);
    background: rgba(9,19,45,.06); border-radius: 999px; padding: 1px 9px; }
.pm-meter-bar { height: 6px; border-radius: 999px; background: rgba(9,19,45,.08); overflow: hidden; margin: 8px 0 10px; }
.pm-meter-bar span { display: block; height: 100%; border-radius: 999px; background: var(--success, #2f9e44); transition: width .4s ease; }
.pm-meter-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: .84rem; }
.pm-meter-list li { display: flex; align-items: center; gap: 7px; }
.pm-meter-list li.is-done { color: var(--muted); }
.pm-meter-list li.is-done .pm-meter-ic { color: var(--success, #2f9e44); }
.pm-meter-ic { flex: 0 0 auto; width: 16px; text-align: center; color: var(--muted); }
[data-theme="dark"] .pm-meter-pct, [data-theme="dark"] .pm-meter-bar { background: rgba(255,255,255,.08); }

/* "More settings" collapsed card on the project overview sidebar */
.ov-more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
    font-weight: 700; font-size: .9rem; }
.ov-more > summary::-webkit-details-marker { display: none; }
.ov-more > summary::after { content: '▾'; margin-left: auto; color: var(--muted); font-size: .8rem; transition: transform .15s; }
.ov-more[open] > summary::after { transform: rotate(180deg); }
.ov-more > summary .muted.small { font-weight: 600; }
.ov-more-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.ov-more-txt { flex: 1 1 auto; min-width: 0; }

/* Hey! activity grouped by client */
.hey-act-filters { display: flex; gap: 6px; margin-left: auto; }
.hey-act-group { margin-bottom: 14px; }
.hey-act-group-h { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.hey-act-client { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: .88rem; color: var(--ink); text-decoration: none; }
a.hey-act-client:hover { color: var(--primary); text-decoration: none; }
.hey-act-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: 0 0 auto; }
.hey-act-groupread { margin-left: auto; }
@media (max-width: 700px) { .hey-act-filters { margin-left: 0; width: 100%; } }

/* Inline quick-edit popover on board rows (assignee + due without opening the task) */
.qe-menu { position: relative; flex: 0 0 auto; }
.qe-menu > summary { list-style: none; cursor: pointer; }
.qe-menu > summary::-webkit-details-marker { display: none; }
.qe-btn { color: var(--muted); font-size: .82rem; padding: 0 4px; opacity: 0; transition: opacity .12s; }
.todo-item:hover .qe-btn, .qe-menu[open] .qe-btn { opacity: 1; }
.qe-btn:hover { color: var(--primary); }
.qe-pop { position: absolute; right: 0; top: 24px; z-index: 30; width: 230px; padding: 12px;
    background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: var(--shadow-lg);
    display: flex; flex-direction: column; gap: 9px; }
.qe-l { display: flex; flex-direction: column; gap: 3px; font-size: .72rem; font-weight: 700; color: var(--muted); }
.qe-l select, .qe-l input { font: inherit; font-size: .84rem; font-weight: 500; color: var(--ink);
    padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
@media (max-width: 700px) { .qe-btn { opacity: 1; } }

/* "Next up" flow on the task page */
.next-up-banner { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 16px;
    background: color-mix(in srgb, var(--success, #2f9e44) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--success, #2f9e44) 35%, var(--line));
    border-radius: 12px; color: var(--ink); text-decoration: none; transition: transform .12s, box-shadow .15s; }
.next-up-banner:hover { text-decoration: none; transform: translateX(2px); box-shadow: 0 4px 14px -8px rgba(9,19,45,.4); }
.next-up-done { flex: 0 0 auto; font-weight: 800; color: var(--success, #2f9e44); white-space: nowrap; }
.next-up-txt { flex: 1 1 auto; min-width: 0; }
.next-up-go { flex: 0 0 auto; color: var(--success, #2f9e44); transition: transform .12s; }
.next-up-banner:hover .next-up-go { transform: translateX(3px); }
.next-up-side { display: flex; flex-direction: column; gap: 1px; margin-top: 4px; padding: 9px 12px;
    border: 1px dashed var(--line-2); border-radius: 10px; text-decoration: none; color: var(--ink); }
.next-up-side:hover { text-decoration: none; border-color: var(--primary); }
.next-up-side-t { font-size: .86rem; font-weight: 600; }

/* Undo toast (deferred deletes) — mini-toast is pointer-events:none, but the
   Undo button must be clickable */
.undo-toast { display: flex; align-items: center; gap: 12px; pointer-events: auto; }
.undo-btn { background: none; border: none; cursor: pointer; color: #7cc0ff; font: inherit; font-weight: 800;
    text-transform: uppercase; letter-spacing: .04em; font-size: .78rem; padding: 2px 4px; }
.undo-btn:hover { text-decoration: underline; }

/* Mobile bottom nav — hidden on desktop, fixed on phones */
.mobile-nav { display: none; }
@media (max-width: 700px) {
    .mobile-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
        display: flex; justify-content: space-around; align-items: stretch;
        background: color-mix(in srgb, var(--surface) 88%, transparent);
        -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
        border-top: 1px solid var(--line);
        padding: 4px 6px calc(4px + env(safe-area-inset-bottom, 0px)); }
    .mobile-nav a { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 2px;
        padding: 6px 2px 4px; font-size: .62rem; font-weight: 700; letter-spacing: .02em;
        color: var(--muted); text-decoration: none; border-radius: 10px; }
    .mobile-nav a:hover { text-decoration: none; }
    .mobile-nav a.active { color: var(--primary); }
    .mobile-nav a i, .mobile-nav a svg { font-size: 1.05rem; }
    .mobile-nav-ic { position: relative; display: inline-flex; }
    .mobile-nav-badge { position: absolute; top: -5px; right: -9px; min-width: 15px; height: 15px; padding: 0 3px;
        border-radius: 999px; background: var(--danger, #dc2626); color: #fff; font-size: .58rem; font-weight: 800;
        display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
    /* Content (and Summit's floating button) clear the bar */
    body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
    .summit { bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
    .mini-toast { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
    /* The timer FAB was never lifted with the others, so on a phone it sat ON TOP
       of the bottom bar's leftmost tab — a 50px button covering a nav target. */
    .time-fab { left: 12px; bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
    /* Idle, it's just a "start a timer" affordance; shrink it so it isn't a second
       thumb-sized blob competing with Summit across the bottom of a small screen. */
    .time-fab-start { width: 42px; height: 42px; }
}

/* Page-notes card on the project overview (extension sticky notes) */
.pn-card h3 { display: flex; align-items: center; gap: 8px; }
.pn-n { font-size: .72rem; font-weight: 700; color: var(--muted); background: rgba(9,19,45,.06); border-radius: 999px; padding: 1px 9px; }
.pn-note { padding: 9px 11px; border: 1px solid var(--line); border-left: 3px solid #f59e0b; border-radius: 8px; margin-bottom: 8px; background: color-mix(in srgb, #f59e0b 4%, var(--surface)); }
.pn-note:last-child { margin-bottom: 0; }
.pn-body { margin: 0 0 3px; font-size: .88rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.pn-meta { margin: 0; overflow-wrap: anywhere; }
[data-theme="dark"] .pn-n { background: rgba(255,255,255,.08); }

/* Landing: Chrome extension showcase */
.lp-ext-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 980px; margin: 0 auto; }
@media (max-width: 800px) { .lp-ext-grid { grid-template-columns: 1fr; } }
.lp-ext-col { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 24px 26px; box-shadow: var(--shadow, 0 2px 10px rgba(9,19,45,.05)); }
.lp-ext-h { margin: 0 0 12px; font-size: 1.08rem; display: flex; align-items: center; gap: 9px; }
.lp-ext-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lp-ext-list li { position: relative; padding-left: 24px; font-size: .92rem; line-height: 1.45; }
.lp-ext-list li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--success, #2f9e44); font-weight: 800; }
.lp-ext-note { text-align: center; margin: 18px 0 0; }

/* Landing: the $100 full breakdown */
.lp-included { max-width: 1060px; margin: 42px auto 0; }
.lp-included-h { text-align: center; font-size: 1.25rem; margin: 0 0 20px; }
.lp-included-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 980px) { .lp-included-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .lp-included-grid { grid-template-columns: 1fr; } }
.lp-inc-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
.lp-inc-card h4 { margin: 0 0 10px; font-size: .98rem; display: flex; align-items: center; gap: 8px; }
.lp-inc-ic { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 9px;
    background: color-mix(in srgb, var(--primary) 10%, var(--surface)); color: var(--primary); font-size: .85rem; flex: 0 0 auto; }
.lp-inc-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lp-inc-card li { position: relative; padding-left: 20px; font-size: .86rem; color: var(--muted); line-height: 1.4; }
.lp-inc-card li::before { content: '·'; position: absolute; left: 6px; font-weight: 900; color: var(--primary); }
.lp-included-note { text-align: center; margin: 16px 0 0; }

/* ===== Extension doc pages (/extension-support, /extension-privacy) =====
   Public, brand-forward: navy hero band + card sections. */
.xd { max-width: 820px; margin: 0 auto 60px; padding: 0 18px; }
.xd-hero { position: relative; overflow: hidden; border-radius: 20px; padding: 44px 46px 40px; margin: 26px 0 22px;
    background: radial-gradient(700px 420px at 85% 10%, #1d2c5e 0%, #0c142c 60%, #0a0f22 100%); color: #fff; }
.xd-kicker { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 14px; font-size: .82rem; font-weight: 800;
    letter-spacing: .12em; text-transform: uppercase; color: #ff5a4e; }
.xd-kicker svg { width: 22px; height: 22px; fill: currentColor; }
.xd-hero h1 { margin: 0 0 10px; font-family: var(--display, inherit); font-size: 2.3rem; letter-spacing: -.01em; }
.xd-sub { margin: 0; max-width: 560px; color: #aeb9dc; font-size: 1.02rem; line-height: 1.6; }
.xd-links { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.xd-links a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px;
    background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16); color: #dfe6f8;
    font-size: .84rem; font-weight: 700; text-decoration: none; transition: background .12s; }
.xd-links a:hover { background: rgba(255,255,255,.16); text-decoration: none; }
.xd-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 26px 30px; margin-bottom: 16px;
    box-shadow: 0 2px 10px rgba(9,19,45,.04); }
.xd-card--accent { border-color: color-mix(in srgb, var(--success, #2f9e44) 35%, var(--line));
    background: color-mix(in srgb, var(--success, #2f9e44) 4%, var(--surface)); }
.xd-card h2 { display: flex; align-items: center; gap: 11px; margin: 0 0 14px; font-size: 1.15rem; }
.xd-card p { margin: 0 0 10px; line-height: 1.65; }
.xd-card p:last-child { margin-bottom: 0; }
.xd-ic { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; flex: 0 0 auto;
    background: color-mix(in srgb, var(--primary) 10%, var(--surface)); color: var(--primary); font-size: .95rem; }
.xd-ic--warn { background: color-mix(in srgb, #d97706 12%, var(--surface)); color: #d97706; }
.xd-ic--good { background: color-mix(in srgb, var(--success, #2f9e44) 12%, var(--surface)); color: var(--success, #2f9e44); }
.xd-steps { list-style: none; counter-reset: xd; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.xd-steps li { position: relative; padding-left: 44px; line-height: 1.6; counter-increment: xd; }
.xd-steps li::before { content: counter(xd); position: absolute; left: 0; top: 1px; width: 28px; height: 28px;
    display: grid; place-items: center; border-radius: 50%; background: var(--primary); color: #fff;
    font-weight: 800; font-size: .82rem; }
.xd kbd { display: inline-block; padding: 1px 7px; border: 1px solid var(--line-2); border-bottom-width: 2px;
    border-radius: 6px; background: var(--bg-2); font: 700 .8em ui-monospace, monospace; }
.xd-trouble { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.xd-trouble li { padding: 12px 14px; border-radius: 11px; line-height: 1.55; }
.xd-trouble li:nth-child(odd) { background: var(--bg-2); }
.xd-trouble li > strong { display: block; margin-bottom: 2px; }
.xd-trouble li span { color: var(--muted); font-size: .93rem; }
.xd-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.xd-list li { position: relative; padding-left: 26px; line-height: 1.6; }
.xd-list li::before { content: '✓'; position: absolute; left: 0; color: var(--primary); font-weight: 800; }
.xd-list--never li::before { content: '✕'; color: var(--success, #2f9e44); }
.xd-faq { margin: 0; }
.xd-faq dt { font-weight: 700; margin: 16px 0 4px; }
.xd-faq dt:first-child { margin-top: 0; }
.xd-faq dd { margin: 0; color: var(--muted); line-height: 1.6; }
.xd-contact { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; border-radius: 16px; padding: 26px 30px;
    background: radial-gradient(500px 300px at 90% 0%, #1d2c5e 0%, #0c142c 70%) , #0c142c; color: #fff; }
.xd-contact h2 { margin: 0 0 6px; font-size: 1.15rem; }
.xd-contact p { margin: 0; color: #aeb9dc; }
.xd-contact p a { color: #9db8ff; }
.xd-contact > div { flex: 1 1 320px; }
.xd-contact-btn { flex: 0 0 auto; padding: 12px 22px; border-radius: 999px; background: #ff5a4e; color: #fff;
    font-weight: 800; text-decoration: none; transition: transform .12s, box-shadow .15s; }
.xd-contact-btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(255,90,78,.4); }
@media (max-width: 620px) {
    .xd-hero { padding: 32px 24px 28px; }
    .xd-hero h1 { font-size: 1.8rem; }
    .xd-card { padding: 20px 20px; }
}

/* Landing: extension screenshot slider */
.lp-ext-slider { max-width: 980px; margin: 26px auto 0; }
.lp-ext-track { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px; }
.lp-ext-track::-webkit-scrollbar { display: none; }
.lp-ext-slide { flex: 0 0 min(760px, 92%); margin: 0; scroll-snap-align: center; }
.lp-ext-slide img { width: 100%; height: auto; display: block; border-radius: 16px;
    border: 1px solid var(--line); box-shadow: 0 18px 44px -18px rgba(9,19,45,.35); }
.lp-ext-slide figcaption { text-align: center; font-size: .86rem; font-weight: 600; color: var(--muted); margin-top: 10px; }
.lp-ext-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.lp-ext-dot { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
    background: var(--line-2); transition: background .15s, transform .15s; }
.lp-ext-dot.on { background: var(--primary); transform: scale(1.25); }

/* Landing: Chrome extension showcase band (v2 — the big store moment) */
.lp-ext-band { background: radial-gradient(900px 600px at 80% 0%, #1d2c5e 0%, #0c142c 55%, #0a0f22 100%);
    border-radius: 28px; margin: 30px auto; max-width: 1240px; padding: 64px 28px 56px; color: #eef1fa; }
.lp-ext-head { text-align: center; max-width: 780px; margin: 0 auto 36px; }
.lp-ext-store-badge { display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px; border-radius: 999px;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); font-weight: 800; font-size: .84rem;
    letter-spacing: .07em; text-transform: uppercase; color: #fff; margin: 0 0 18px; }
.lp-ext-chrome { width: 20px; height: 20px; border-radius: 50%; position: relative; flex: 0 0 auto;
    background: conic-gradient(from -45deg, #ea4335 0 120deg, #fbbc05 0 240deg, #34a853 0 360deg); }
.lp-ext-chrome::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: #4285f4; border: 2px solid #fff; }
.lp-ext-band .lp-h2 { color: #fff; font-size: clamp(1.9rem, 4vw, 2.7rem); margin: 0 0 14px; }
.lp-ext-lede { color: #aeb9dc; font-size: 1.06rem; line-height: 1.65; margin: 0 auto 26px; max-width: 660px; }
.lp-ext-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.lp-ext-cta-main { background: #ff5a4e !important; color: #fff !important; font-weight: 800; padding: 14px 26px;
    border-radius: 13px; font-size: 1rem; transition: transform .15s, box-shadow .2s; }
.lp-ext-cta-main:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(255,90,78,.45); text-decoration: none; }
.lp-ext-cta-ghost { background: rgba(255,255,255,.08) !important; color: #dfe6f8 !important;
    border: 1px solid rgba(255,255,255,.22) !important; padding: 14px 24px; border-radius: 13px; font-weight: 700; }
.lp-ext-cta-ghost:hover { background: rgba(255,255,255,.15) !important; text-decoration: none; }
.lp-ext-show { position: relative; max-width: 920px; margin: 0 auto; }
.lp-ext-window { border-radius: 18px; overflow: hidden; background: #0d1424;
    box-shadow: 0 40px 90px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08); }
.lp-ext-winbar { display: flex; align-items: center; gap: 7px; padding: 11px 16px; background: #101a33; }
.lp-ext-winbar span { width: 11px; height: 11px; border-radius: 50%; }
.lp-ext-winbar span:nth-child(1) { background: #ff5f57; }
.lp-ext-winbar span:nth-child(2) { background: #febc2e; }
.lp-ext-winbar span:nth-child(3) { background: #28c840; }
.lp-ext-winbar em { margin-left: 10px; flex: 1; font: 500 12px/1 ui-monospace, Menlo, monospace; font-style: normal;
    color: #93a0bd; background: rgba(255,255,255,.06); padding: 6px 13px; border-radius: 8px; overflow: hidden; white-space: nowrap; }
.lp-ext-stage { position: relative; aspect-ratio: 1280 / 800; }
.lp-ext-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .55s ease; }
.lp-ext-frame.on { opacity: 1; }
.lp-ext-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 46px; height: 46px;
    border-radius: 50%; border: 1px solid rgba(255,255,255,.22); background: rgba(10,15,34,.72); color: #fff;
    font-size: 26px; line-height: 1; cursor: pointer; backdrop-filter: blur(6px); transition: background .15s; }
.lp-ext-prev { left: -23px; }
.lp-ext-next { right: -23px; }
.lp-ext-arrow:hover { background: #ff5a4e; }
.lp-ext-cap { text-align: center; color: #aeb9dc; font-size: .93rem; font-weight: 600; margin: 16px 0 10px; }
.lp-ext-band .lp-ext-dots { display: flex; justify-content: center; gap: 8px; margin: 0; }
.lp-ext-band .lp-ext-dot { width: 9px; height: 9px; border-radius: 999px; border: 0; padding: 0; cursor: pointer;
    background: rgba(255,255,255,.24); transition: width .2s, background .2s; }
.lp-ext-band .lp-ext-dot.on { background: #ff5a4e; width: 26px; }
.lp-ext-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 1020px; margin: 42px auto 0; }
.lp-ext-feat { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 16px;
    padding: 20px 22px; transition: transform .15s, border-color .15s; }
.lp-ext-feat:hover { transform: translateY(-3px); border-color: rgba(255,90,78,.5); }
.lp-ext-feat-ic { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 11px;
    background: rgba(255,90,78,.16); color: #ff8a80; font-size: 1rem; margin-bottom: 12px; }
.lp-ext-feat h3 { margin: 0 0 6px; font-size: 1.02rem; color: #fff; }
.lp-ext-feat p { margin: 0; color: #aeb9dc; font-size: .9rem; line-height: 1.55; }
.lp-ext-band .lp-ext-note { text-align: center; color: #8fa0c8; font-size: .88rem; margin: 28px auto 0; max-width: 660px; }
@media (max-width: 900px) { .lp-ext-feats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) {
    .lp-ext-band { padding: 44px 16px 40px; border-radius: 0; }
    .lp-ext-feats { grid-template-columns: 1fr; }
    .lp-ext-prev { left: 8px; } .lp-ext-next { right: 8px; }
}

/* ===== Free tools pages (/free) ===== */
.ft-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1020px; margin: 0 auto; }
@media (max-width: 900px) { .ft-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .ft-grid { grid-template-columns: 1fr; } }
.ft-card { display: flex; flex-direction: column; gap: 8px; background: var(--surface); border: 1px solid var(--line);
    border-radius: 16px; padding: 22px 24px; text-decoration: none; color: var(--ink); transition: transform .15s, border-color .15s, box-shadow .2s; }
.ft-card:hover { transform: translateY(-3px); border-color: var(--primary); box-shadow: 0 14px 30px -18px rgba(9,19,45,.4); text-decoration: none; }
.ft-card--hot { border-color: color-mix(in srgb, var(--accent, #ff5a4e) 45%, var(--line)); }
.ft-emoji { font-size: 1.6rem; }
.ft-card h3 { margin: 0; font-size: 1.05rem; }
.ft-card p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.5; flex: 1; }
.ft-go { color: var(--primary); font-weight: 700; font-size: .88rem; }
.ft-tool { max-width: 860px; margin: 0 auto; }
.ft-h1 { font-family: var(--display, inherit); font-size: clamp(1.7rem, 3.5vw, 2.3rem); margin: 10px 0 10px; }
.ft-lede { color: var(--muted); font-size: 1.02rem; line-height: 1.65; margin: 0 0 22px; max-width: 720px; }
.ft-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 24px 26px; margin-bottom: 26px; box-shadow: 0 2px 10px rgba(9,19,45,.04); }
.ft-label { display: block; font-weight: 700; font-size: .88rem; margin-bottom: 12px; }
.ft-label input, .ft-label textarea { display: block; width: 100%; margin-top: 6px; font: inherit; padding: 10px 12px;
    border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg-2); color: var(--ink); }
.ft-meter { height: 8px; border-radius: 999px; background: var(--bg-2); position: relative; overflow: visible; margin: 2px 0 4px; }
.ft-meter-fill { height: 100%; width: 0; border-radius: 999px; background: var(--line-2); transition: width .12s; }
.ft-meter-fill.ok { background: var(--success, #2f9e44); }
.ft-meter-fill.warn { background: #d97706; }
.ft-meter-fill.bad { background: var(--danger, #dc2626); }
.ft-meter-cap { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--muted); opacity: .5; }
.ft-read { font-size: .82rem; color: var(--muted); margin: 0 0 6px; }
.ft-sub { margin: 18px 0 10px; font-size: 1rem; }
.ft-serp { display: block; background: #fff; border: 1px solid #dfe1e5; border-radius: 12px; padding: 16px 20px; max-width: 600px; }
.ft-serp--mobile { max-width: 400px; }
.ft-serp-url { display: block; font: 400 12px/1.4 arial, sans-serif; color: #202124; margin-bottom: 2px; }
.ft-serp-title { display: block; font: 400 20px/1.3 arial, sans-serif; color: #1a0dab; margin-bottom: 3px; }
.ft-serp-desc { display: block; font: 400 14px/1.55 arial, sans-serif; color: #4d5156; }
.ft-toggle { display: flex; gap: 8px; margin: 14px 0; }
.ft-toggle button { font: inherit; font-weight: 700; font-size: .85rem; padding: 7px 14px; border-radius: 999px;
    border: 1px solid var(--line-2); background: var(--surface); color: var(--muted); cursor: pointer; }
.ft-toggle button.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.ft-row { display: flex; gap: 10px; flex-wrap: wrap; }
.ft-row input { flex: 1 1 260px; font: inherit; padding: 11px 13px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg-2); color: var(--ink); }
.ft-hop { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line); font-size: .9rem; }
.ft-hop-code { flex: 0 0 64px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ft-hop-code.ok { color: var(--success, #2f9e44); } .ft-hop-code.warn { color: #d97706; } .ft-hop-code.bad { color: var(--danger, #dc2626); }
.ft-hop-url { overflow-wrap: anywhere; }
.ft-ok { color: var(--success, #2f9e44); font-weight: 700; }
.ft-ok-inline { color: var(--success, #2f9e44); font-weight: 700; font-size: .82rem; }
.ft-err { color: var(--danger, #dc2626); font-weight: 600; }
.ft-schema { border: 1px solid color-mix(in srgb, var(--success, #2f9e44) 35%, var(--line)); background: color-mix(in srgb, var(--success, #2f9e44) 4%, var(--surface)); border-radius: 12px; padding: 12px 15px; margin: 12px 0 0; font-size: .9rem; }
.ft-schema.warn { border-color: color-mix(in srgb, #d97706 40%, var(--line)); background: color-mix(in srgb, #d97706 5%, var(--surface)); }
.ft-schema p { margin: 0 0 6px; } .ft-schema p:last-child { margin: 0; }
.ft-copy { max-width: 720px; line-height: 1.7; }
.ft-copy h2 { font-size: 1.25rem; margin: 26px 0 10px; }
.ft-copy ul { padding-left: 22px; } .ft-copy li { margin-bottom: 8px; }
.ft-cta { background: radial-gradient(500px 300px at 90% 0%, #1d2c5e 0%, #0c142c 70%), #0c142c; color: #fff;
    border-radius: 16px; padding: 24px 28px; margin: 30px auto; max-width: 860px; }
.ft-cta p { margin: 0 0 14px; color: #dfe6f8; }
/* The banner is always dark navy, but .btn-ghost inherits light-theme ink —
   which made "Try PeakKR free" invisible until hover. Force a light ghost. */
.ft-cta .btn-ghost { color: #fff; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.08); }
.ft-cta .btn-ghost:hover { background: rgba(255,255,255,.16); color: #fff; }
.ft-more { max-width: 860px; margin: 0 auto 40px; }
.ft-more h3 { font-size: 1rem; margin: 0 0 10px; }
.ft-more-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ft-more-row a { padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
    color: var(--ink); font-size: .85rem; font-weight: 600; text-decoration: none; }
.ft-more-row a:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }

/* ===== Use-case pages (/for) + template pages (/agency-templates) ===== */
.uc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 34px; }
@media (max-width: 700px) { .uc-grid { grid-template-columns: 1fr; } }
.uc-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px;
    box-shadow: 0 2px 10px rgba(9,19,45,.04); }
.uc-pain { margin: 0 0 8px; font-weight: 800; color: var(--danger, #dc2626); font-size: .95rem; }
.uc-fix { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.6; }
.tpl-body h2 { border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.tpl-check { list-style: none; padding-left: 0; }
.tpl-check li { position: relative; padding: 6px 0 6px 32px; border-bottom: 1px dashed var(--line); }
.tpl-check li::before { content: ''; position: absolute; left: 2px; top: 9px; width: 16px; height: 16px;
    border: 2px solid var(--line-2); border-radius: 5px; background: var(--bg-2); }

/* ===== SEO pages v2 (sx-) — heroes, layout, rich content blocks ===== */
.sx-hero { position: relative; overflow: hidden; padding: 54px 24px 46px; border-bottom: 1px solid var(--line);
    background:
      radial-gradient(820px 420px at 82% 8%, rgba(255, 90, 78,.14), transparent 60%),
      radial-gradient(620px 380px at 6% 0%, rgba(250, 202, 44,.09), transparent 55%); }
.sx-hero-inner { position: relative; max-width: 1020px; margin: 0 auto; }
.sx-crumb { font-size: .82rem; color: var(--muted); margin: 0 0 22px; }
.sx-crumb a { color: var(--muted); text-decoration: none; font-weight: 600; }
.sx-crumb a:hover { color: var(--primary); }
.sx-crumb span { margin: 0 7px; opacity: .5; }
.sx-badge { width: 62px; height: 62px; border-radius: 18px; display: grid; place-items: center; font-size: 1.9rem;
    background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box;
    border: 2px solid transparent; box-shadow: 0 10px 26px -14px rgba(255, 90, 78,.55); margin-bottom: 20px; }
.sx-h1 { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 4.4vw, 3.2rem);
    letter-spacing: -.035em; line-height: 1.04; margin: 0 0 16px; max-width: 860px; }
.sx-lede { font-size: 1.1rem; color: var(--muted); line-height: 1.7; max-width: 780px; margin: 0; }
.sx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.sx-chip { display: inline-flex; align-items: center; gap: 7px; font-size: .84rem; font-weight: 600; color: var(--ink);
    background: rgba(9, 19, 45,.04); border: 1px solid var(--line-2); padding: 7px 14px 7px 9px; border-radius: 999px; }
html[data-theme="dark"] .sx-chip { background: rgba(255,255,255,.05); }
.sx-chip-dot { display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 50%;
    background: var(--grad); color: #09132d; font-size: .68rem; font-weight: 900; }
.sx-wrap { max-width: 1020px; margin: 0 auto; padding: 0 24px; }
.sx-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 44px; align-items: start; padding-top: 38px; }
@media (max-width: 940px) { .sx-layout { grid-template-columns: 1fr; } }
.sx-side { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 940px) { .sx-side { position: static; } }
.sx-side-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; box-shadow: 0 2px 10px rgba(9,19,45,.04); }
.sx-side-card h4 { margin: 0 0 12px; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.sx-side-card nav a { display: block; padding: 7px 0; font-size: .9rem; font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 1px dashed var(--line); }
.sx-side-card nav a:last-child { border-bottom: 0; }
.sx-side-card nav a:hover { color: var(--primary); }
.sx-side-cta { background:
      radial-gradient(340px 220px at 90% 0%, #24356b 0%, #0c142c 70%), #0c142c;
    color: #fff; border: 0; border-radius: 16px; padding: 22px; }
.sx-side-cta h4 { margin: 0 0 8px; font-family: var(--display); font-size: 1.05rem; color: #fff; }
.sx-side-cta p { margin: 0 0 14px; font-size: .88rem; line-height: 1.6; color: #c9d4ee; }
.sx-sec { margin: 0 0 44px; }
.sx-k { display: block; text-transform: uppercase; letter-spacing: .13em; font-size: .72rem; font-weight: 800;
    color: var(--primary); margin-bottom: 6px; }
.sx-sec > h2 { font-family: var(--display); font-size: 1.5rem; letter-spacing: -.02em; margin: 0 0 14px; }
.sx-sec p, .sx-sec li { line-height: 1.75; color: var(--ink); }
.sx-sec > p { margin: 0 0 14px; }
.sx-sec ul { padding-left: 22px; margin: 0 0 14px; }
.sx-sec li { margin-bottom: 9px; }
.sx-steps { list-style: none; counter-reset: sxstep; padding: 0; margin: 0 0 10px; display: grid; gap: 14px; }
.sx-steps li { counter-increment: sxstep; position: relative; padding: 16px 18px 16px 62px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px; margin: 0; }
.sx-steps li::before { content: counter(sxstep); position: absolute; left: 16px; top: 15px; width: 30px; height: 30px;
    display: grid; place-items: center; border-radius: 50%; background: var(--grad); color: #09132d;
    font-family: var(--display); font-weight: 800; font-size: .95rem; }
.sx-steps b { font-family: var(--display); }
.sx-callout { border: 1px solid var(--line); border-left: 4px solid var(--accent, #faca2c); background: color-mix(in srgb, #faca2c 6%, var(--surface));
    border-radius: 12px; padding: 14px 18px; margin: 0 0 16px; font-size: .95rem; line-height: 1.65; }
.sx-callout--warn { border-left-color: var(--primary); background: color-mix(in srgb, #ff5a4e 5%, var(--surface)); }
.sx-callout b { font-family: var(--display); }
.sx-table-scroll { overflow-x: auto; margin: 0 0 16px; }
.sx-table { width: 100%; border-collapse: collapse; font-size: .92rem; background: var(--surface);
    border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.sx-table th { text-align: left; font-family: var(--display); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em;
    background: rgba(9, 19, 45,.045); padding: 11px 14px; border-bottom: 1px solid var(--line); }
html[data-theme="dark"] .sx-table th { background: rgba(255,255,255,.05); }
.sx-table td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.55; }
.sx-table tr:last-child td { border-bottom: 0; }
.sx-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 0 44px; }
@media (max-width: 700px) { .sx-stats { grid-template-columns: 1fr; } }
.sx-stat { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; text-align: center; }
.sx-stat b { display: block; font-family: var(--display); font-weight: 800; font-size: 1.9rem; letter-spacing: -.03em;
    background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sx-stat span { font-size: .88rem; color: var(--muted); }

/* Template pages — numbered phase rail */
.tplx-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 34px; }
.tplx-toc a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--surface); font-size: .85rem; font-weight: 600;
    color: var(--ink); text-decoration: none; }
.tplx-toc a:hover { border-color: var(--primary); color: var(--primary); }
.tplx-toc b { font-family: var(--display); color: var(--primary); }
.tplx-phase { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 0 20px; padding-bottom: 26px; }
.tplx-phase::before { content: ''; position: absolute; left: 25px; top: 52px; bottom: 0; width: 2px;
    background: linear-gradient(180deg, var(--line-2), transparent); }
.tplx-phase:last-child::before { display: none; }
.tplx-num { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
    font-family: var(--display); font-weight: 800; font-size: 1.2rem; color: #09132d;
    background: var(--grad); box-shadow: 0 8px 20px -10px rgba(255, 90, 78,.6); }
.tplx-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px 26px;
    box-shadow: 0 2px 10px rgba(9,19,45,.04); }
.tplx-card h2 { font-family: var(--display); font-size: 1.22rem; letter-spacing: -.015em; margin: 0 0 4px; }
.tplx-meta { font-size: .82rem; color: var(--muted); margin: 0 0 12px; font-weight: 600; }
.tplx-card .tpl-check { margin: 0; }
.tplx-card .tpl-check li:last-child { border-bottom: 0; }

/* Use-case pages — deep-dive feature rows */
.ucx-feats { display: grid; gap: 16px; margin: 0 0 10px; }
.ucx-feat { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; align-items: start;
    background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; }
@media (max-width: 600px) { .ucx-feat { grid-template-columns: 1fr; } }
.ucx-feat-ic { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; font-size: 1.5rem;
    background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box; border: 2px solid transparent; }
.ucx-feat h3 { margin: 0 0 6px; font-family: var(--display); font-size: 1.08rem; }
.ucx-feat p { margin: 0; color: var(--muted); line-height: 1.68; font-size: .95rem; }

/* Referee pages — scoreboard + decision guide */
.vsx-board { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 24px 26px; margin: 0 0 10px; }
.vsx-row { display: grid; grid-template-columns: 130px minmax(0, 1fr) 44px; gap: 14px; align-items: center; padding: 8px 0; }
.vsx-row b { font-family: var(--display); font-size: .95rem; }
.vsx-track { height: 12px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.vsx-fill { height: 100%; border-radius: 999px; background: var(--grad); }
.vsx-fill--b { background: linear-gradient(120deg, #4776ff 0%, #58c7f3 100%); }
.vsx-pts { font-family: var(--display); font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.vsx-note { font-size: .82rem; color: var(--muted); margin: 10px 0 0; }
.vsx-picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 860px) { .vsx-picks { grid-template-columns: 1fr; } }
.vsx-pick { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; }
.vsx-pick--pk { border: 2px solid transparent;
    background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box; }
.vsx-pick h3 { margin: 0 0 8px; font-family: var(--display); font-size: 1.02rem; }
.vsx-pick p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.65; }

/* Index card upgrades (free tools + templates) */
.ft-card .ft-emoji { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; font-size: 1.5rem;
    background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box;
    border: 2px solid transparent; margin-bottom: 4px; }

/* Mobile fixes for the marketing surface: nav no longer overflows small
   screens, and the collapsed sx- column can't be widened by min-content. */
@media (max-width: 560px) {
    .lp-nav-inner { gap: 12px; padding: 0 14px; }
    .lp-nav-cta { gap: 8px; }
    .lp-nav-cta .btn-ghost { display: none; }
}
@media (max-width: 940px) { .sx-layout { grid-template-columns: minmax(0, 1fr); } }

/* ===== Landing: "PeakKR is the whole mountain" stack band (stk-) =====
   A layered mountain silhouette — connectors at the base feed data up,
   every stratum above is PeakKR. Layer widths shrink 100→81→62→43→24%,
   so the trapezoid side slope stays constant and reads as one mountain. */
.stk-band { margin: 64px auto 56px; max-width: 1020px; }
.stk-grid { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 8px 34px; align-items: start; }
.stk-mtn, .stk-callouts { display: grid; grid-template-rows: 112px 96px 96px 96px 104px; gap: 5px; }
.stk-layer { position: relative; align-self: stretch; justify-self: center; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px; text-align: center; padding: 8px 12%; }
.stk-em { font-size: 1.35rem; line-height: 1; }
.stk-name { font-family: var(--display); font-weight: 800; font-size: .98rem; letter-spacing: -.01em; white-space: nowrap; }
@media (max-width: 880px) { .stk-name { white-space: normal; } }
.stk-chips { font-size: .74rem; font-weight: 600; color: var(--muted); line-height: 1.45; max-width: 92%; }
.stk-copy { display: none; }
.stk-layer--peak { width: 24%; clip-path: polygon(50% 0, 100% 100%, 0 100%); justify-content: flex-end; padding-bottom: 10px;
    background: linear-gradient(150deg, #ff5a4e 0%, #ff7a33 55%, #faca2c 100%); color: #09132d; }
.stk-layer--peak .stk-name { white-space: nowrap; font-size: .9rem; }
.stk-layer--peak .stk-chips { color: rgba(9,19,45,.75); }
.stk-layer--clients { width: 43%; clip-path: polygon(22.1% 0, 77.9% 0, 100% 100%, 0 100%);
    background: color-mix(in srgb, #ff5a4e 9%, var(--surface)); }
.stk-layer--seo { width: 62%; clip-path: polygon(15.3% 0, 84.7% 0, 100% 100%, 0 100%);
    background: color-mix(in srgb, #faca2c 13%, var(--surface)); }
.stk-layer--ops { width: 81%; clip-path: polygon(11.7% 0, 88.3% 0, 100% 100%, 0 100%);
    background: color-mix(in srgb, #09132d 7%, var(--surface)); }
html[data-theme="dark"] .stk-layer--ops { background: color-mix(in srgb, #e9eef7 8%, var(--surface)); }
.stk-layer--data { width: 100%; clip-path: polygon(9.5% 0, 90.5% 0, 100% 100%, 0 100%);
    background: var(--bg-2); }
.stk-layer--data .stk-name::after { content: ' (the only part that isn\2019t PeakKR)'; font-family: inherit;
    font-weight: 600; font-size: .72rem; color: var(--muted); }
.stk-callouts { padding-top: 0; }
.stk-co { position: relative; align-self: center; padding-left: 46px; }
.stk-co::before { content: ''; position: absolute; left: 0; top: .72em; width: 34px;
    border-top: 2px dashed var(--line-2); }
.stk-co::after { content: ''; position: absolute; left: 30px; top: calc(.72em - 3.5px); width: 0; height: 0;
    border-left: 7px solid var(--line-2); border-top: 4px solid transparent; border-bottom: 4px solid transparent;
    transform: rotate(180deg); }
.stk-co h4 { margin: 0 0 4px; font-family: var(--display); font-size: .95rem; letter-spacing: -.01em; }
.stk-co p { margin: 0; font-size: .8rem; line-height: 1.5; color: var(--muted); }
.stk-note { margin: 22px auto 0; max-width: 760px; text-align: center; font-size: .95rem; color: var(--muted); line-height: 1.65; }
.stk-note strong { color: var(--ink); }
.stk-note-up { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; }
@media (max-width: 880px) {
    .stk-grid { grid-template-columns: 1fr; }
    .stk-callouts { display: none; }
    .stk-mtn { grid-template-rows: none; gap: 10px; }
    .stk-layer { width: 100% !important; clip-path: none !important; border-radius: 14px; border: 1px solid var(--line);
        padding: 18px 20px; justify-content: center; }
    .stk-layer--peak { padding-bottom: 18px; }
    .stk-copy { display: block; font-size: .84rem; color: var(--muted); line-height: 1.55; margin-top: 4px; }
    .stk-layer--peak .stk-copy { color: rgba(9,19,45,.8); }
    .stk-copy strong { color: var(--ink); }
    .stk-layer--peak .stk-copy strong { color: #09132d; }
}

/* ===== System health (/tools/health) ===== */
.hlt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .hlt-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .hlt-grid { grid-template-columns: 1fr; } }
.hlt-card h3 { margin: 0 0 8px; font-size: .95rem; display: flex; align-items: center; gap: 7px; }
.hlt-card p { margin: 0 0 4px; }
.hlt-scroll { overflow-x: auto; }
.hlt-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.hlt-table th { text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line); }
.hlt-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.hlt-table tr:last-child td { border-bottom: 0; }
.hlt-msg { max-width: 460px; overflow-wrap: anywhere; }
.pill-green { background: color-mix(in srgb, #16a34a 14%, var(--surface)); color: #15803d; border: 1px solid color-mix(in srgb, #16a34a 35%, var(--line)); }
.pill-red { background: color-mix(in srgb, #dc2626 12%, var(--surface)); color: #b91c1c; border: 1px solid color-mix(in srgb, #dc2626 35%, var(--line)); }
.op-count { margin: 6px 0 0; font-variant-numeric: tabular-nums; }
.op-count-over { color: var(--danger, #dc2626); font-weight: 600; }

/* ===== Task page: content implementation pages/docs/QA (tp-) ===== */
.tp-qa-banner { background: color-mix(in srgb, #16a34a 8%, var(--surface)); border: 1px solid color-mix(in srgb, #16a34a 30%, var(--line));
    border-radius: 10px; padding: 9px 13px; font-size: .9rem; margin: 0 0 12px; }
.tp-docs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.tp-doc { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-2); border: 1px solid var(--line);
    border-radius: 999px; padding: 5px 8px 5px 12px; font-size: .86rem; font-weight: 600; }
.tp-doc a { text-decoration: none; }
.tp-x { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 4px; }
.tp-x:hover { color: var(--danger, #dc2626); }
.tp-list { margin: 4px 0 6px; padding-left: 26px; }
.tp-list li { margin: 3px 0; overflow-wrap: anywhere; }
.tp-list li form { margin-left: 6px; }
.tp-add { margin: 8px 0 0; }
.tp-add summary { cursor: pointer; color: var(--primary); font-weight: 600; font-size: .88rem; list-style: none; }
.tp-add summary::-webkit-details-marker { display: none; }
.tp-add textarea { width: 100%; margin-top: 8px; font: inherit; padding: 9px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg-2); color: var(--ink); }
.tp-doc-form { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.tp-doc-form select { width: auto; flex: 0 0 auto; }
.tp-doc-form input[type=url] { flex: 1 1 240px; }
.tp-qa-toggle { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 12px; }
.tp-qa-label { display: flex; gap: 9px; align-items: flex-start; cursor: pointer; font-size: .9rem; }
.tp-qa-label input { margin-top: 3px; width: auto; }
.tp-qa-label span { line-height: 1.55; color: var(--muted); }
.tp-qa-label strong { color: var(--ink); }
.hlt-card { padding: 18px 20px; }
.hlt-sec { padding: 20px 22px; margin-top: 18px; }
.hlt-sec > h2 { font-family: var(--display); font-size: 1.15rem; margin: 0 0 12px; }
[data-push-status].is-bad { color: var(--danger, #dc2626); }
.bh-bar { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding: 16px 18px; margin-bottom: 16px; }
.bh-bar .field { margin: 0; } .bh-bar .field input { width: auto; }
.bh-bar p { margin: 0 auto 8px 0; }
.bh-custom { display: inline-flex; align-items: center; gap: 6px; }
.bh-custom input[type="date"] { width: auto; }
.lb-tabs { align-items: center; flex-wrap: wrap; }
.lb-custom { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.lb-custom input[type="date"] { border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: .82rem; padding: 5px 8px; font-family: inherit; }
.lb-custom.active input[type="date"] { border-color: var(--ink); }
.bh-totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px; }
@media (max-width: 700px) { .bh-totals { grid-template-columns: 1fr; } }
.bh-rate { margin-top: 18px; max-width: 460px; }
.wh-events { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin-top: 6px; }
@media (max-width: 700px) { .wh-events { grid-template-columns: 1fr; } }
.wh-event { display: flex; align-items: baseline; gap: 7px; font-size: .86rem; }
.wh-event input { width: auto; }
.wh-secret { font-size: .8rem; }

/* ============================================================
   Project overview: readability pass
   Six fixes driven by real use: three nested scrollbars, an AI
   nudge covering the data it referenced, an unlabeled wall of
   connector icons, permanently-visible edit pencils, a 100%
   progress bar shouting where nothing needs attention, and no
   answer to "what now?" when a project runs out of open work.
   ============================================================ */

/* 1 · No inner scrollbars. Cards grow to their (now shorter) content and the
   page scrolls once, instead of three independent scroll traps. */
.pls-body { max-height: none; overflow: visible; }

/* 3 · The connector strip gets a label and splits connected from not-yet-set-up,
   so twelve identical icons stop reading as noise. */
.pb-conns-wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pb-conns-label { font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    color: var(--muted); flex: 0 0 auto; }
.pb-conns-more { font-size: .72rem; font-weight: 700; color: var(--muted); background: rgba(9,19,45,.05);
    border: 1px dashed var(--line-2); border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.pb-conns-more:hover { color: var(--primary); border-color: var(--primary); }
[data-theme="dark"] .pb-conns-more { background: rgba(255,255,255,.05); }
.pb-conns-off[hidden] { display: none; }
/* Revealed not-yet-connected chips join the SAME horizontal row as the
   connected ones — without this the bare <span> stacked them vertically. */
.pb-conns-off:not([hidden]) { display: contents; }

/* 4 · Edit affordances appear on hover/focus instead of competing with the
   content permanently. Touch devices (no hover) keep them always visible. */
@media (hover: hover) {
    .proj-banner-titles .proj-name-edit > summary,
    .proj-banner-titles .proj-domain-edit > summary,
    .proj-banner-titles .proj-tags-edit .icon-pencil,
    .proj-banner-titles .proj-desc-edit .icon-pencil { opacity: 0; transition: opacity .12s ease; }
    .proj-banner:hover .proj-name-edit > summary,
    .proj-banner:hover .proj-domain-edit > summary,
    .proj-banner:hover .proj-tags-edit .icon-pencil,
    .proj-banner:hover .proj-desc-edit .icon-pencil,
    .proj-banner-titles details[open] > summary,
    .proj-banner-titles :focus-visible { opacity: 1 !important; }
    /* Empty-state prompts ("+ Add tags") stay quiet until you look for them. */
    .proj-banner .proj-pm-chip.muted { opacity: .55; transition: opacity .12s ease; }
    .proj-banner:hover .proj-pm-chip.muted { opacity: 1; }
}

/* 5 · A finished bar is information, not an alarm — mute it, and let the
   numbers that still need a human carry the weight. */
.pb-prog.is-done .pb-prog-fill { background: var(--success, #16a34a); opacity: .5; }
.pb-stat.pb-zero b { color: var(--success, #16a34a); }

/* 6 · "What's next" — the card that appears when a project has no open work. */
.nxt-card { border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--line));
    background: color-mix(in srgb, var(--primary) 5%, var(--surface));
    border-radius: var(--radius); padding: 18px 20px; margin-bottom: 18px; }
.nxt-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.nxt-head h3 { margin: 0; font-size: 1.05rem; font-family: var(--display); }
.nxt-sub { margin: 0 0 14px; color: var(--muted); font-size: .9rem; line-height: 1.6; }
.nxt-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.nxt-actions .btn { font-size: .85rem; }

/* 2 · The proactive nudge, inline on the page instead of floating over it. */
.nudge-inline { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; margin-bottom: 14px;
    border-radius: var(--radius-sm); border: 1px solid color-mix(in srgb, var(--accent, #faca2c) 45%, var(--line));
    background: color-mix(in srgb, var(--accent, #faca2c) 9%, var(--surface)); }
.nudge-inline-ic { font-size: 1.05rem; line-height: 1.4; flex: 0 0 auto; }
.nudge-inline p { margin: 0; font-size: .9rem; line-height: 1.55; flex: 1; }
.nudge-inline .btn { flex: 0 0 auto; }

/* ============================================================
   To-do board density pass
   Measured before: 4,590px and 155 forms to show 15 tasks — more
   machinery than work. Quarterly phase admin folds into a ⋯ menu,
   locked phases collapse to a summary line, and the create forms
   hide behind a button. 4,590px -> 3,026px. Nothing is removed;
   it's all one interaction away.
   ============================================================ */

/* Per-task actions (+ subtask / waiting on) were going to move onto the row and
   reveal on hover — but `.todo-extras` is rendered as a SIBLING after the task's
   </li>, not inside it, so `.todo-item:hover > .todo-extras` never matches and
   the actions would have shipped invisible AND unclickable. Doing this properly
   needs the markup moved inside the row first; left alone until then. */

/* Phase admin behind a ⋯ menu instead of two permanent links per phase. */
.phase-admin { position: relative; display: inline-block; }
/* A bare "…" reads as stray punctuation, not a control. Give it a chip outline so
   it looks clickable before you hover it. */
.phase-admin > summary { list-style: none; cursor: pointer; padding: 3px 10px; border-radius: 8px;
    border: 1px solid var(--line); background: var(--surface-2, transparent);
    color: var(--muted); font-weight: 800; letter-spacing: .06em; line-height: 1; }
.phase-admin > summary::-webkit-details-marker { display: none; }
.phase-admin > summary:hover { background: var(--bg-2); color: var(--ink); }
/* Anchored to the button's LEFT edge: the ⋯ sits at the card's left, so a
   right-aligned popup ran off the side of the screen (measured at x = -80). */
.phase-admin-pop { position: absolute; left: 0; top: 26px; z-index: 20; min-width: 230px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
    box-shadow: var(--shadow-lg); padding: 10px 12px; }
.phase-admin-pop .list-save-phase, .phase-admin-pop .phase-hide-form { margin: 0 0 6px; }
.phase-admin-pop .phase-hide-form:last-child { margin-bottom: 0; }

/* A locked phase renders as one summary line you can open to look ahead. */
.todo-list.locked > summary { cursor: pointer; }
.todo-list.locked[open] > summary { margin-bottom: 6px; }

/* The create-phase forms, folded away. */
.new-phase-wrap { margin-top: 4px; }
.new-phase-wrap > summary { list-style: none; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.new-phase-wrap > summary::-webkit-details-marker { display: none; }
.new-phase-wrap[open] > summary { margin-bottom: 12px; }

/* ============================================================
   Density & clarity pass 2
   ============================================================ */

/* --- Getting started: one track at a time -------------------
   The dashboard used to stack three onboarding panels (workspace setup, your
   first week, the training course) — about 600px of checklist before the first
   project. The view now renders the most urgent unfinished one and demotes the
   rest to this footer strip. */
.ob-more { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    margin: 0 0 16px; padding: 10px 4px 0; }
.ob-card .ob-more, .ob-wizard .ob-more { margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); }
.ob-more-link { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px;
    border: 1px solid var(--line); border-radius: 999px; font-size: .8rem; font-weight: 600;
    color: var(--muted); background: var(--surface); }
.ob-more-link:hover { color: var(--primary); border-color: var(--primary); text-decoration: none; }
.ob-more-n { font-size: .72rem; font-weight: 800; font-variant-numeric: tabular-nums;
    color: var(--ink); background: rgba(9,19,45,.06); border-radius: 999px; padding: 1px 7px; }
[data-theme="dark"] .ob-more-n { background: rgba(255,255,255,.10); }

/* --- Portfolio strip heading --------------------------------
   The hero tiles are about you; these are about everything. Without a heading
   the two strips read as one contradictory set of numbers. */
/* grid-column is required, not decorative: .db-pulse is a two-column grid
   (tiles | leaderboard), so an un-spanned heading takes the first cell and
   squeezes the tiles into the narrow second one. */
.db-pulse-h { grid-column: 1 / -1; display: flex; align-items: center; gap: 9px; margin: 0;
    font-family: var(--display); font-size: .95rem; font-weight: 800;
    letter-spacing: .02em; color: var(--muted); }

/* --- Project overview: fold the secondary column on phones ---
   The aside is ~3,000px of tools/settings/contact stacked under the work you
   came for. It ships open; app.js folds it only below the breakpoint, so with
   JS off nothing is lost. */
.ov-side-fold > summary { list-style: none; }
.ov-side-fold > summary::-webkit-details-marker { display: none; }
/* The card gap must exist at EVERY width — it only lived in the phone media
   query, so desktop sidebar cards sat flush against each other. */
.ov-side-fold-body { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 901px) {
    /* Desktop keeps the two-column layout — no disclosure, no behaviour change. */
    .ov-side-fold > summary { display: none; }
}
@media (max-width: 900px) {
    .ov-side-fold > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px;
        cursor: pointer; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px;
        background: var(--surface); font-weight: 700; font-size: .95rem; color: var(--ink); }
    .ov-side-fold[open] > summary { margin-bottom: 16px; }
    .ov-side-fold-hint { font-size: .78rem; font-weight: 600; color: var(--muted); }
    .ov-side-fold[open] .ov-side-fold-hint { visibility: hidden; }
}

/* --- "Extension is live on the Web Store" bar ---------------
   Sits above the topbar, once per person until dismissed. Deliberately quiet:
   full-bleed, one line, no card chrome — it is an announcement, not a panel. */
.extbar { display: flex; align-items: center; gap: 12px; padding: 9px 20px;
    background: linear-gradient(100deg, #0c142c, #16224a 62%, #1d1240); color: #fff;
    font-size: .86rem; line-height: 1.4; }
.extbar-ic { font-size: 1rem; flex: 0 0 auto; opacity: .9; }
.extbar-txt { flex: 1 1 auto; min-width: 0; color: rgba(255,255,255,.82); }
.extbar-txt strong { color: #fff; font-weight: 700; }
.extbar-cta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 13px; border-radius: 999px; background: var(--primary); color: #fff;
    font-weight: 700; font-size: .82rem; }
.extbar-cta:hover { text-decoration: none; filter: brightness(1.08); }
.extbar-x { flex: 0 0 auto; margin: 0; }
.extbar-x button { border: 0; background: none; color: rgba(255,255,255,.55); cursor: pointer;
    font-size: 1.1rem; line-height: 1; padding: 2px 4px; }
.extbar-x button:hover { color: #fff; }
@media (max-width: 700px) {
    .extbar { padding: 8px 12px; gap: 9px; font-size: .8rem; }
    /* On a phone the headline alone carries it — the supporting sentence is the
       first thing to go, not the button that actually installs the thing. */
    .extbar-txt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .extbar-ic { display: none; }
}

/* --- Rank sightings card (passive SERP log from the extension) ---- */
.rs-rows { display: flex; flex-direction: column; }
.rs-row { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); }
.rs-row:first-child { border-top: 0; }
.rs-pos { flex: 0 0 auto; min-width: 34px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--muted); }
.rs-pos.rs-top { color: var(--primary); }
.rs-delta { flex: 0 0 auto; font-size: .72rem; font-weight: 800; }
.rs-delta.up { color: #16a34a; }
.rs-delta.down { color: #dc2626; }
.rs-q { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; }
.rs-when { flex: 0 0 auto; }
.rs-foot { margin: 8px 0 0; }

/* --- Audit "Create tasks" assignee picker ---------------------
   A details-popover on each issue row: click shows who gets the fix list.
   The select needs width:auto — the global `select { width:100% }` is the
   same rule that once crushed the on-page FAQ input to 30px. */
.sa-assign-pop { position: relative; display: inline-block; }
.sa-assign-pop > summary { list-style: none; cursor: pointer; }
.sa-assign-pop > summary::-webkit-details-marker { display: none; }
.sa-assign-caret { font-size: .72em; opacity: .7; margin-left: 2px; }
.sa-assign-form { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
    display: flex; flex-direction: column; gap: 7px; min-width: 230px; padding: 11px 12px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
    box-shadow: var(--shadow-lg); }
.sa-assign-form select { width: auto; }
.sa-assign-form label { margin: 0; }

/* --- /my/stuff: reassign a whole list ------------------------ */
.ms-list-h { display: flex; align-items: baseline; gap: 10px; }
.ms-reassign { position: relative; margin-left: auto; }
.ms-reassign > summary { list-style: none; cursor: pointer; font-size: .76rem; font-weight: 700; color: var(--muted); }
.ms-reassign > summary::-webkit-details-marker { display: none; }
.ms-reassign > summary:hover { color: var(--primary); }
.ms-reassign-form { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
    display: flex; flex-direction: column; gap: 7px; min-width: 240px; padding: 11px 12px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); }
.ms-reassign-form select { width: auto; }

/* AI Overview chips on the rank-sightings card */
.rs-ai { flex: 0 0 auto; font-size: .66rem; font-weight: 800; letter-spacing: .03em; border-radius: 6px; padding: 1px 6px; }
.rs-ai.is-cited { background: rgba(22,163,74,.13); color: #16a34a; }
.rs-ai.is-missed { background: rgba(220,38,38,.11); color: #dc2626; }

/* Header variant of the audit assignee popover opens leftward-safe (the header
   sits near the page's left edge, so right:0 would clip). */
.sa-assign-form--left { left: 0; right: auto; }

/* On-page report: metadata edit pencil in the eyebrow */
.op-meta-pop { margin-left: 6px; vertical-align: 1px; }
.op-meta-edit { list-style: none; cursor: pointer; color: var(--muted); font-size: .85em; padding: 1px 6px; border-radius: 6px; }
.op-meta-edit::-webkit-details-marker { display: none; }
.op-meta-edit:hover { color: var(--primary); background: var(--bg-2); }
.op-meta-form { min-width: 300px; }
.op-meta-form input { width: auto; }
.op-meta-form label { margin: 0; }

/* ===== Client meeting planner (/meetings) ===== */
.mt-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.mt-add select, .mt-add input[type=date] { width: auto; }
.mt-add input[type=text] { flex: 1 1 180px; width: auto; }
.mt-scroll { overflow-x: auto; }
.mt-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.mt-table th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--muted); padding: 6px 10px; border-bottom: 1px solid var(--line); }
.mt-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.mt-table tr:last-child td { border-bottom: 0; }
.mt-client { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; }
.mt-client .proj-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; display: inline-block; }
.mt-when { white-space: nowrap; font-weight: 600; }
.mt-soon { color: var(--accent-ink); }
.mt-edit { display: inline-block; margin-left: 6px; }
.mt-edit > summary { list-style: none; cursor: pointer; color: var(--muted); }
.mt-edit > summary::-webkit-details-marker { display: none; }
.mt-edit > summary:hover { color: var(--ink); }
.mt-edit .sa-assign-form { text-align: left; font-weight: 400; white-space: normal; }
.mt-edit .sa-assign-form label { display: flex; flex-direction: column; gap: 3px; font-weight: 600; }
.mt-att { max-width: 220px; }
.mt-status { padding: 4px 8px; border-radius: 999px; font-size: .8rem; font-weight: 700; width: auto;
    border: 1px solid var(--line-2); background: var(--surface); }
.mt-status-scheduled { color: #b45309; border-color: rgba(217,119,6,.45); background: rgba(217,119,6,.08); }
.mt-status-booked { color: #1d4ed8; border-color: rgba(37,99,235,.4); background: rgba(37,99,235,.08); }
.mt-status-completed { color: var(--ok); border-color: rgba(22,163,74,.4); background: rgba(22,163,74,.08); }
.mt-done { margin-top: 14px; }
.mt-row-done td { opacity: .7; }

/* Meetings: roomier cards + the month grid */
.mt-card { padding: 18px 20px; margin-bottom: 16px; }
.mt-add { row-gap: 10px; }
.mt-add select, .mt-add input { margin: 0; }
.mt-table th { padding: 8px 12px; }
.mt-table td { padding: 10px 12px; }
.mt-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.mt-cal-dow { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
    color: var(--muted); padding: 2px 4px; }
.mt-cal-day { min-height: 86px; border: 1px solid var(--line); border-radius: 10px; padding: 6px;
    background: var(--bg); display: flex; flex-direction: column; gap: 4px; }
.mt-cal-empty { border-style: dashed; opacity: .45; }
.mt-cal-today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.mt-cal-n { font-size: .72rem; font-weight: 700; color: var(--muted); }
.mt-cal-today .mt-cal-n { color: var(--accent); }
.mt-cal-chip { display: block; font-size: .72rem; font-weight: 700; padding: 3px 7px; border-radius: 7px;
    border: 1px solid var(--line-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 860px) { .mt-cal { gap: 3px; } .mt-cal-day { min-height: 64px; padding: 4px; } }

/* Meetings: PM filter in the hero + past-date nudge */
.mt-pmfilter select { font-size: .84rem; padding: 6px 9px; width: auto; }
.mt-past { color: var(--bad); }

/* My stuff: this week's client calls strip */
.ms-meetings { padding: 13px 16px; margin-bottom: 14px; }
.ms-meetings h3 { margin: 0 0 9px; font-size: .95rem; display: flex; align-items: baseline; gap: 10px; }
.ms-meet-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ms-meet-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-size: .84rem; text-decoration: none; }
.ms-meet-chip:hover { border-color: var(--accent); text-decoration: none; }
.ms-meet-chip .proj-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.ms-meet-today { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--bg)); }

/* Account: per-family email modes + quiet hours row */
.np-famgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 14px; margin: 0 0 6px; }
.np-famgrid .field span { font-size: .82rem; }
.np-quiet { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; margin: 0 0 6px; }

/* Content writer: the auto-blog setup picker in the card header */
.ov-cw-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ab-setup { margin-left: auto; width: auto; font-size: .84rem; padding: 6px 9px; }

/* On-page: Now vs Recommended side by side inside the meta sections */
.op-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.op-cmp .op-now-cmp:only-child { grid-column: 1 / -1; }
.op-now-cmp .op-ba-tag { display: inline-block; margin-bottom: 4px; }
.op-now-val { color: var(--muted); }
.op-sec-form .op-now-cmp { margin-bottom: 8px; padding: 8px 10px; background: var(--bg-2, var(--bg)); border-radius: 9px; }
@media (max-width: 700px) { .op-cmp { grid-template-columns: 1fr; } }

/* Write-ups: restricted HR records */
.wu-new { padding: 14px 18px; margin-bottom: 14px; }
.wu-new > summary { list-style: none; cursor: pointer; font-weight: 700; }
.wu-new > summary::-webkit-details-marker { display: none; }
.wu-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; }
@media (max-width: 700px) { .wu-grid { grid-template-columns: 1fr; } }
.wu-lab { display: block; font-weight: 600; margin-bottom: 6px; }
.wu-viewers { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.wu-viewer { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; font-weight: 500; }
.wu-note { padding: 10px 0; border-top: 1px solid var(--line); }
.wu-note:first-of-type { border-top: 0; }
.wu-note-head { display: flex; align-items: center; gap: 8px; }

/* Write-ups: room to breathe — the record read like a cramped form */
.wu-card { padding: 18px 20px; margin-bottom: 16px; }
.wu-card h3 { margin-bottom: 10px; }
.wu-card .form-actions { margin-top: 10px; }
.wu-card textarea { margin-top: 4px; }
.wu-viewers { padding: 4px 0 6px; }

/* Three-column mega menu (Clients): wider panel, same viewport-fit JS clamp */
.popover.nav-mega-x3 { width: 880px; max-width: calc(100vw - 24px); }
@media (max-width: 960px) { .popover.nav-mega-x3 { width: 660px; } }  /* below the JS clamp boundary: behave like the old wide menu */
@media (max-width: 700px) { .popover.nav-mega-x3 { width: auto; } }   /* mobile drawer stacking */

/* ===== Mega menu, modernized: depth, motion, hover affordances =====
   Appended layer — backgrounds stay untouched so the dark-theme overrides
   above keep winning; everything here rides on vars or alpha colors. */
.popover.nav-mega {
    border-radius: 18px; padding: 14px;
    box-shadow: 0 4px 14px rgba(8,19,32,.10), 0 30px 70px rgba(8,19,32,.28), 0 0 0 1px rgba(9,19,45,.08);
}
/* Warm signature: the gradient rides the top edge AND its rounded corners,
   then dissolves down the sides. Ring = padding + xor mask; the diagonal
   alpha ramp in the paint is what makes it fade. Fallback (no mask-composite
   support): the flat inset hairline. */
.popover.nav-mega::after {
    content: ''; position: absolute; left: 18px; right: 18px; top: 0; height: 3px;
    border-radius: 0 0 3px 3px; background: var(--grad); opacity: .85; pointer-events: none;
}
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
    .popover.nav-mega::after {
        left: 0; right: 0; top: 0; bottom: 0; height: auto; opacity: 1;
        border-radius: inherit; padding: 2px;
        background: linear-gradient(165deg, #ff5147 0%, #ff7a33 14%, rgba(251,197,43,.6) 30%, rgba(251,197,43,0) 52%);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask-composite: exclude;
    }
}
.nav-group[open] .nav-mega { animation: navPopIn .16s cubic-bezier(.2,.8,.3,1); }
@keyframes navPopIn {
    from { opacity: 0; transform: translateY(-7px) scale(.985); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .nav-group[open] .nav-mega { animation: none; } }

/* Column labels get a small brand tick; the group title stays plain so the
   two heading levels don't read as duplicates. */
.nav-mega-colh::before {
    content: ''; display: inline-block; width: 14px; height: 3px; border-radius: 2px;
    background: var(--grad); margin-right: 7px; vertical-align: 2px;
}
/* Soft gradient dividers between columns instead of a hard rule. */
.nav-mega-wide .nav-mega-col + .nav-mega-col {
    border-left: 1px solid transparent;
    border-image: linear-gradient(180deg, transparent, var(--line-2) 22%, var(--line-2) 78%, transparent) 1;
}

/* Rows: gentle lift, tile pops, a chevron slides in from the right. */
.topnav .nav-mega-item, .nav-mega-item {
    border-radius: 12px; position: relative; padding: 7px 10px;
    transition: background .14s ease, transform .14s ease;
}
.nav-mega-text { gap: 0; }
/* The chevron floats absolutely so it reserves NO row width — one-line
   descriptions get every pixel of the column. */
.nav-mega-item::after {
    content: '›'; position: absolute; right: 9px; top: 50%; margin-top: -0.6em;
    color: var(--accent); font-weight: 700; font-size: 1rem; line-height: 1.2;
    opacity: 0; transform: translateX(-5px); transition: opacity .14s ease, transform .14s ease;
}
.nav-mega-item:hover { transform: translateX(2px); }
.nav-mega-item:hover::after { opacity: 1; transform: none; }
.nav-mega-ic {
    width: 38px; height: 38px; border-radius: 12px;
    box-shadow: inset 0 0 0 1px rgba(255,90,78,.16);
    transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.nav-mega-item:hover .nav-mega-ic {
    transform: scale(1.06) rotate(-2deg);
    box-shadow: 0 4px 12px rgba(255,90,78,.32);
}
/* The page you're ON reads as a soft pill with an accent spine. */
.nav-mega-item.current { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.nav-mega-item.current::before {
    content: ''; position: absolute; left: 3px; top: 10px; bottom: 10px; width: 3px;
    border-radius: 3px; background: var(--grad);
}
[data-theme="dark"] .nav-mega-item:hover { background: rgba(255,255,255,.07); }
[data-theme="dark"] .nav-mega-ic { box-shadow: inset 0 0 0 1px rgba(255,122,51,.25);
    background: linear-gradient(135deg, rgba(255,90,78,.22), rgba(250,202,44,.16)); }

/* =====================================================================
   Design batch: one table language, empty-state kit, sparklines,
   completion feedback, gradient signature, auth polish, skeletons.
   ===================================================================== */

/* --- 1. One table language: shared rhythm for the recurring dialects --- */
.sa-gsc-table, .conn-kw-table, .hlt-table, .ga-table, .rp-table, .op-gsc-table,
.sh-table, .an-table, .pmb-table, .mt-table, .lc-table, .il-table, .conn-table, .signin-table {
    width: 100%; border-collapse: collapse; font-size: .9rem;
}
.sa-gsc-table th, .conn-kw-table th, .hlt-table th, .ga-table th, .rp-table th, .op-gsc-table th,
.sh-table th, .an-table th, .pmb-table th, .mt-table th, .lc-table th, .il-table th, .conn-table th, .signin-table th {
    text-align: left; font-size: .7rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .05em; color: var(--muted); padding: 8px 12px; border-bottom: 1px solid var(--line);
}
.sa-gsc-table td, .conn-kw-table td, .hlt-table td, .ga-table td, .rp-table td, .op-gsc-table td,
.sh-table td, .an-table td, .pmb-table td, .mt-table td, .lc-table td, .il-table td, .conn-table td, .signin-table td {
    padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle;
}
.sa-gsc-table tbody tr:last-child td, .conn-kw-table tbody tr:last-child td, .hlt-table tbody tr:last-child td,
.ga-table tbody tr:last-child td, .rp-table tbody tr:last-child td, .op-gsc-table tbody tr:last-child td,
.sh-table tbody tr:last-child td, .an-table tbody tr:last-child td, .pmb-table tbody tr:last-child td,
.mt-table tbody tr:last-child td, .lc-table tbody tr:last-child td, .il-table tbody tr:last-child td,
.conn-table tbody tr:last-child td, .signin-table tbody tr:last-child td { border-bottom: 0; }
.sa-gsc-table tbody tr, .conn-kw-table tbody tr, .hlt-table tbody tr, .ga-table tbody tr,
.rp-table tbody tr, .op-gsc-table tbody tr, .sh-table tbody tr, .an-table tbody tr,
.pmb-table tbody tr, .mt-table tbody tr, .lc-table tbody tr, .il-table tbody tr,
.conn-table tbody tr, .signin-table tbody tr { transition: background .12s ease; }
.sa-gsc-table tbody tr:hover, .conn-kw-table tbody tr:hover, .hlt-table tbody tr:hover,
.ga-table tbody tr:hover, .rp-table tbody tr:hover, .op-gsc-table tbody tr:hover,
.sh-table tbody tr:hover, .an-table tbody tr:hover, .pmb-table tbody tr:hover,
.mt-table tbody tr:hover, .lc-table tbody tr:hover, .il-table tbody tr:hover,
.conn-table tbody tr:hover, .signin-table tbody tr:hover { background: rgba(9,19,45,.028); }
[data-theme="dark"] .sa-gsc-table tbody tr:hover, [data-theme="dark"] .conn-kw-table tbody tr:hover,
[data-theme="dark"] .hlt-table tbody tr:hover, [data-theme="dark"] .ga-table tbody tr:hover,
[data-theme="dark"] .rp-table tbody tr:hover, [data-theme="dark"] .op-gsc-table tbody tr:hover,
[data-theme="dark"] .sh-table tbody tr:hover, [data-theme="dark"] .an-table tbody tr:hover,
[data-theme="dark"] .pmb-table tbody tr:hover, [data-theme="dark"] .mt-table tbody tr:hover,
[data-theme="dark"] .lc-table tbody tr:hover, [data-theme="dark"] .il-table tbody tr:hover,
[data-theme="dark"] .conn-table tbody tr:hover, [data-theme="dark"] .signin-table tbody tr:hover { background: rgba(255,255,255,.045); }

/* --- 2. Empty-state kit: a doorway, not a dead end --- */
.empty-inline { padding: 38px 24px; gap: 10px; border: 1px solid var(--line); background: var(--bg-2); }
.empty-inline > i:first-child, .empty-inline > svg:first-child, .empty-inline > .icon:first-child {
    width: 48px; height: 48px; display: grid; place-items: center; font-size: 1.25rem;
    color: var(--accent); opacity: 1; border-radius: 15px;
    background: linear-gradient(135deg, rgba(255,90,78,.13), rgba(250,202,44,.11));
    box-shadow: inset 0 0 0 1px rgba(255,90,78,.16);
}
.empty-inline > svg:first-child { padding: 13px; box-sizing: border-box; }
.empty-inline strong { color: var(--ink); }
.empty-inline .btn, .empty-inline .link-btn { margin-top: 6px; }

/* --- 3. Dashboard sparklines: numbers with a pulse --- */
.db-spark { display: block; margin-top: 7px; color: var(--accent); opacity: .9; }
.db-stat--alert .db-spark { color: var(--bad); }
.db-delta { display: inline-block; margin-left: 7px; padding: 1px 8px; border-radius: 999px;
    font-size: .68rem; font-weight: 800; vertical-align: 4px; }
.db-delta-up { color: #15803d; background: rgba(22,163,74,.12); }
.db-delta-down { color: #b45309; background: rgba(217,119,6,.12); }

/* --- 4. Completion feedback: the most-clicked control earns a moment --- */
.todo-item .checkbox { transition: transform .12s ease, border-color .12s ease, background .12s ease; position: relative; }
.todo-item .checkbox:hover { transform: scale(1.12); }
.todo-item .checkbox:active { transform: scale(.9); }
/* The button already renders its ✓ icon — give THAT the pop, don't add one. */
.todo-item.done .checkbox svg, .todo-item.done .checkbox i {
    animation: tickPop .28s cubic-bezier(.3,1.6,.4,1);
}
@keyframes tickPop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.25); } 100% { transform: scale(1); opacity: 1; } }
.pc-progress-bar span { position: relative; overflow: hidden; }
.pc-progress-bar span::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
}
*:hover > .pc-progress-bar span::after, .pc-progress-bar:hover span::after { animation: progShine .9s ease; }
@keyframes progShine { to { left: 120%; } }
@media (prefers-reduced-motion: reduce) {
    .todo-item.done .checkbox svg, .todo-item.done .checkbox i,
    .pc-progress-bar span::after { animation: none !important; }
}

/* --- 5. The gradient signature, threaded through --- */
.hero-tight { position: relative; padding-bottom: 12px; }
.hero-tight::after {
    content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: min(340px, 60%);
    border-radius: 3px;
    background: linear-gradient(90deg, #ff5147, #ff7a33 45%, rgba(251,197,43,.5) 80%, transparent);
}
.ms-tab.active { border-bottom-color: transparent; position: relative; }
.ms-tab.active::after {
    content: ''; position: absolute; left: 10px; right: 10px; bottom: -2px; height: 3px;
    border-radius: 3px; background: var(--grad);
}

/* --- 6. Auth polish: signature + confident form --- */
.auth-hero-title { position: relative; padding-bottom: 14px; }
.auth-hero-title::after {
    content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 130px;
    border-radius: 3px; background: var(--grad);
}
.auth-panel .btn-primary { background: var(--grad); border: 0; font-weight: 800; }
.auth-panel input[type=text]:focus, .auth-panel input[type=email]:focus, .auth-panel input[type=password]:focus {
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,90,78,.16);
}

/* --- 7. Skeletons: async cards hold their shape while loading --- */
.skel { height: 12px; border-radius: 7px; margin: 9px 0;
    background: linear-gradient(90deg, rgba(9,19,45,.06) 25%, rgba(9,19,45,.11) 42%, rgba(9,19,45,.06) 60%);
    background-size: 220% 100%; animation: skelShimmer 1.2s linear infinite; }
[data-theme="dark"] .skel { background: linear-gradient(90deg, rgba(255,255,255,.06) 25%, rgba(255,255,255,.12) 42%, rgba(255,255,255,.06) 60%); background-size: 220% 100%; }
@keyframes skelShimmer { to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }
.skel-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin-bottom: 14px; }

/* ===== Consistency sweep: focus rings, gradient primaries, popover
   language, flash signature, and the h3 paper-cut ===== */

/* Keyboard focus reads as one deliberate ring everywhere. Inputs keep their
   own box-shadow ring (defined with :focus above); this covers the rest. */
:is(a, button, summary, [role="tab"], [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px;
}
.btn:focus-visible, .tab:focus-visible, .ms-tab:focus-visible { border-radius: inherit; }

/* The primary action wears the brand gradient — same as the menus, the
   progress bars, and the auth screen. Hover brightens instead of swapping. */
.btn-primary { background: var(--grad); }
.btn-primary:hover { background: var(--grad); filter: brightness(1.07); }

/* Popovers speak the mega menu's panel language. */
.popover, .sa-assign-form, .ms-reassign-form {
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(8,19,32,.10), 0 24px 54px rgba(8,19,32,.24), 0 0 0 1px rgba(9,19,45,.07);
}
[data-theme="dark"] .popover, [data-theme="dark"] .sa-assign-form, [data-theme="dark"] .ms-reassign-form {
    box-shadow: 0 4px 14px rgba(0,0,0,.35), 0 24px 54px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08);
}

/* Success toasts carry the signature; errors keep their red spine.
   Like the nav mega menu, the gradient rides the rounded corner and dissolves
   away — ring = padding + xor mask, the alpha ramp in the paint does the fade.
   Fallback (no mask-composite): the flat left spine. */
.flash:not(.flash-error) { border-left-color: transparent; }
.flash:not(.flash-error)::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--grad);
    pointer-events: none;
}
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
    .flash:not(.flash-error) { border-left-width: 1px; }
    .flash:not(.flash-error)::before {
        right: 0; width: auto; border-radius: inherit; padding: 2px;
        background: linear-gradient(140deg, #ff5147 0%, #ff7a33 16%, rgba(251,197,43,.6) 34%, rgba(251,197,43,0) 58%);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask-composite: exclude;
    }
}

/* Cards start flush: no more style="margin-top:0" on every first heading. */
.card > h2:first-child, .card > h3:first-child, .card > h4:first-child { margin-top: 0; }

/* ============================================================
   Project cards — modern refresh (field request): the flat grey
   client slab becomes a quiet divided section with accent icon
   tiles, the progress bar slims down and takes the project's own
   accent, and empty descriptions no longer print filler text.
   ============================================================ */
.project-grid .pc-desc { min-height: 0; }
.project-grid .pc-client { background: transparent; border: none; border-top: 1px solid var(--line);
    border-radius: 0; margin: 12px 0 0; padding: 12px 2px 2px; gap: 7px; }
.project-grid .pc-client-row { gap: 10px; }
.project-grid .pc-ci { width: 24px; height: 24px; border-radius: 8px; display: inline-flex; align-items: center;
    justify-content: center; font-size: .72rem; flex: 0 0 auto;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: color-mix(in srgb, var(--accent) 80%, var(--ink)); }
.project-grid .pc-pm-row .pc-ci { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.project-grid .pc-progress { margin: 14px 0 10px; }
.project-grid .pc-progress-bar { height: 6px; background: color-mix(in srgb, var(--accent) 10%, rgba(9, 19, 45, .05)); }
.project-grid .pc-progress-bar span { background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 75%, #fff), var(--accent)); }
.project-grid .pc-pct { font-size: .74rem; color: var(--muted); }
.project-grid .project-card:hover { box-shadow: 0 16px 36px color-mix(in srgb, var(--accent) 13%, rgba(9, 19, 45, .10)); }
.project-grid .pc-foot { padding-top: 12px; font-size: .8rem; }

/* ---- Project banner: missing-domain nudge -------------------------------- */
/* A muted "+ Add domain" was invisible on the tinted banner (field report:
   "it should say add domain if none is added"). Make it an amber pill. */
.proj-domain-add-pill { display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: 999px; font-weight: 700; font-size: .8rem;
    color: #7a4a05; background: color-mix(in srgb, #f5a623 18%, var(--surface, #fff));
    border: 1px solid color-mix(in srgb, #d97706 55%, transparent); }
.proj-domain-missing > summary:hover { text-decoration: none; }
.proj-domain-missing > summary:hover .proj-domain-add-pill { background: color-mix(in srgb, #f5a623 30%, var(--surface, #fff)); }
.proj-domain-missing[open] .proj-domain-add-pill { background: color-mix(in srgb, #f5a623 30%, var(--surface, #fff)); }
.proj-domain-missing .small { display: block; margin-top: 6px; }
[data-theme="dark"] .proj-domain-add-pill { color: #ffd28a; }

/* ---- Graphic editor: rulers & alignment guides --------------------------- */
.gfx-ruler { position: absolute; z-index: 2; border-radius: 4px; cursor: crosshair; }
.gfx-ruler-h { cursor: row-resize; }
.gfx-ruler-v { cursor: col-resize; }
.gfx-ruler-toggle { position: absolute; top: 10px; right: 10px; z-index: 3;
    font-size: .72rem; font-weight: 600; padding: 4px 10px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--surface, #fff); color: var(--ink, #111);
    cursor: pointer; box-shadow: 0 2px 8px rgba(9, 19, 45, .08); }
.gfx-ruler-toggle.is-off { opacity: .55; }
.gfx-ruler-toggle:hover { opacity: 1; border-color: var(--primary); }
.gfx-alignrow { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.gfx-alignrow .btn { padding: 3px 9px; font-size: .9rem; line-height: 1.2; }

/* ---- Pipeline board: delete a prospect from its card ---------------------- */
.pl-card-del button { border: none; background: none; cursor: pointer; padding: 2px 6px;
    border-radius: 6px; font-size: 15px; line-height: 1; color: var(--muted); opacity: 0; }
.pl-card:hover .pl-card-del button, .pl-card-del button:focus-visible { opacity: .75; }
.pl-card-del button:hover { color: var(--danger, #dc2626); background: rgba(220, 38, 38, .08); opacity: 1; }

/* ---- PM rounds ------------------------------------------------------------ */
.rd-card { margin-bottom: 16px; padding: 18px 20px; }
.rd-head { display: flex; align-items: center; gap: 10px; }
.rd-you { font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    color: var(--primary, #ff5a4e); background: color-mix(in srgb, var(--primary, #ff5a4e) 10%, transparent);
    padding: 2px 9px; border-radius: 999px; }
.rd-counts { margin-left: auto; }
.rd-sec { margin: 14px 0 6px; font-size: .82rem; font-weight: 700; display: flex; align-items: baseline; gap: 6px; }
.rd-list { display: flex; flex-direction: column; }
.rd-row { display: grid; grid-template-columns: 150px minmax(200px, 1.1fr) 1.4fr; gap: 12px; align-items: baseline;
    padding: 8px 0; border-top: 1px solid var(--line); }
.rd-who { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; min-width: 0; }
.rd-what { min-width: 0; display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.rd-what a { font-weight: 600; }
.rd-proj { font-size: .7rem; font-weight: 700; color: var(--pc); background: color-mix(in srgb, var(--pc) 12%, transparent);
    padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.rd-why { min-width: 0; }
.rd-age { color: var(--muted); }
.rd-age--old { color: #e0890b; }
.rd-due { font-size: .74rem; font-weight: 800; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.rd-due--over { color: #b91c1c; background: rgba(239,68,68,.1); }
.rd-due--today { color: #92600a; background: rgba(245,158,11,.14); }
.rd-due--later { color: var(--muted); background: var(--surface-2); }
@media (max-width: 760px) { .rd-row { grid-template-columns: 1fr; gap: 4px; } }

/* PM rounds nav badge + row actions */
.nav-badge { display: inline-block; min-width: 17px; text-align: center; padding: 1px 5px; margin-left: 4px;
    border-radius: 999px; font-size: .66rem; font-weight: 800; line-height: 1.4;
    color: #fff; background: var(--primary, #ff5a4e); vertical-align: 1px; }
.rd-act { display: inline-flex; gap: 10px; margin-left: 6px; white-space: nowrap; }
.rd-nudged { color: var(--muted); font-size: .74rem; font-style: italic; }

/* PM rounds v3: summary strip, collapsible sections, client groups */
.rd-strip { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px; margin-bottom: 14px; }
.rd-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 6px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--surface); font-size: .8rem; font-weight: 600; color: var(--ink); }
.rd-chip:hover { border-color: var(--line-2); text-decoration: none; background: var(--surface-2); }
.rd-chip b { font-size: .74rem; background: var(--surface-2); border-radius: 999px; padding: 1px 7px; }
.rd-chip--me { border-color: color-mix(in srgb, var(--primary, #ff5a4e) 45%, var(--line)); }
.rd-chip--me b { background: color-mix(in srgb, var(--primary, #ff5a4e) 12%, transparent); color: var(--primary, #ff5a4e); }
.rd-card > summary.rd-head { cursor: pointer; list-style: none; }
.rd-card > summary.rd-head::-webkit-details-marker { display: none; }
.rd-count { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; font-weight: 700;
    padding: 1px 9px; border-radius: 999px; background: var(--surface-2); color: var(--muted); margin-left: 6px; }
.rd-count--aw { color: #b45309; background: rgba(245,158,11,.12); }
.rd-count--ck { color: #4338ca; background: rgba(99,102,241,.1); }
.rd-count--ap { color: #0f766e; background: rgba(20,184,166,.1); }
.rd-counts { margin-left: auto; display: inline-flex; align-items: center; }
.rd-projgroup { margin-top: 4px; }
.rd-projhead { display: flex; align-items: center; gap: 7px; margin: 10px 0 2px; font-size: .8rem; font-weight: 700; }
.rd-projhead a { color: var(--ink); }

/* Pipeline board: previous months fold away in the closed columns */
.pl-month { margin-top: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.pl-month > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 12px; cursor: pointer; list-style: none; font-size: .8rem; font-weight: 700; }
.pl-month > summary::-webkit-details-marker { display: none; }
.pl-month > summary::before { content: '▸'; font-size: .7rem; color: var(--muted); margin-right: 2px; }
.pl-month[open] > summary::before { content: '▾'; }
.pl-month-meta { font-weight: 600; font-size: .74rem; color: var(--muted); white-space: nowrap; }
.pl-month[open] { background: var(--surface); }
.pl-month .pl-card { margin: 0 8px 8px; }
.pl-month--stale > summary .pl-month-name { color: #b45309; }

/* Pipeline: owner colors on cards + legend spotlight */
.pl-card--owned { border: 2px solid color-mix(in srgb, var(--oc, #8a93a6) 55%, var(--line));
    box-shadow: inset 3px 0 0 var(--oc, transparent); }
.pl-card--owned:hover { border-color: var(--oc); }
.pl-card--unowned { border: 2px dashed var(--line-2); }
.pl-owner-name { font-size: .72rem; font-weight: 700; margin-left: 5px; white-space: nowrap; }
.pl-card-owner { white-space: nowrap; display: inline-flex; align-items: center; }
.pl-card--dim { opacity: .22; filter: grayscale(.7); }
.pl-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.pl-legend-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px 3px 4px; border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--oc, #8a93a6) 45%, var(--line)); background: var(--surface);
    font-size: .78rem; font-weight: 700; color: var(--ink); cursor: pointer; }
.pl-legend-chip:hover { background: color-mix(in srgb, var(--oc, #8a93a6) 8%, var(--surface)); }
.pl-legend-chip.active { background: color-mix(in srgb, var(--oc, #8a93a6) 16%, var(--surface));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--oc, #8a93a6) 40%, transparent); }

/* Dashboard triage emphasis + timer prominence + leaderboard fix */
.db-pulse-tile--hot.db-pulse-tile--bad { background: color-mix(in srgb, var(--danger, #dc2626) 9%, var(--surface)); }
.db-pulse-tile--hot.db-pulse-tile--warn { background: color-mix(in srgb, #e0890b 9%, var(--surface)); }
.db-pulse-tile--hot .db-pulse-n { font-size: 2.15rem; }
.pc-deliv { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 0; }
.pc-deliv-chip { font-size: .7rem; font-weight: 700; padding: 2px 9px; border-radius: 999px;
    background: color-mix(in srgb, var(--accent, #64748b) 11%, transparent);
    color: color-mix(in srgb, var(--accent, #334155) 80%, var(--ink)); white-space: nowrap; }
.timer-strip-idle { border-bottom: 1px dashed color-mix(in srgb, var(--primary, #ff5a4e) 35%, transparent); }
.timer-strip-idle .timer-strip-label { font-weight: 600; }
.timer-strip-idle [data-start-timer] { border: 1px solid color-mix(in srgb, var(--primary, #ff5a4e) 55%, transparent);
    color: var(--primary, #ff5a4e); border-radius: 999px; font-weight: 800; }
.timer-strip-idle [data-start-timer]:hover { background: color-mix(in srgb, var(--primary, #ff5a4e) 10%, transparent); }
.timer-strip .timer-strip-dot { animation: tsPulse 1.6s ease-in-out infinite; }
.timer-strip.is-paused .timer-strip-dot { animation: none; }
@keyframes tsPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.78); } }
.db-lb-row { padding: 8px 0; }
.db-lb-row .avatar, .db-lb-row img { flex: none; position: relative; z-index: 1; }


/* Nav: icon-only entries + laptop compression so 6 groups fit at 1100px */
.visually-hidden-nav { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.topnav .nav-iconly { padding-inline: 9px; }
@media (max-width: 1360px) {
    .topnav { gap: 2px; }
    .topnav .nav-link, .topnav .nav-group > summary { padding-inline: 9px; font-size: .84rem; }
    .topnav .org-caret { display: none; }
}
@media (max-width: 1160px) {
    .topnav .nav-link, .topnav .nav-group > summary { padding-inline: 7px; font-size: .8rem; }
    .topnav { margin-left: 2px; }
}

/* Topbar wins feed */
.ab-win-ic { flex: none; font-size: .95rem; width: 22px; text-align: center; }
.ab-win-at { flex: none; margin-left: auto; white-space: nowrap; }

/* ---- Wins: kudos card + celebratory topbar feed -------------------------- */
.w-kudos-card { margin-bottom: 16px; padding: 18px 20px;
    background: linear-gradient(135deg, color-mix(in srgb, #db2777 5%, var(--surface)), var(--surface) 55%); }
.w-kudos-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.w-kudos-head h2 { margin: 0; font-size: 1.05rem; }
.w-kudos-form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.w-kudos-form select { max-width: 200px; }
.w-kudos-form input[type="text"] { flex: 1 1 260px; }
.w-kudos-board { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.w-kudos-chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px 4px 5px;
    border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
    font-size: .8rem; font-weight: 600; color: var(--ink); }
.w-kudos-chip:hover { border-color: #db2777; text-decoration: none; }
.w-kudos-chip b { color: #db2777; }
.w-kudos-recent { font-style: normal; font-size: .68rem; font-weight: 800; color: #059669; }
.ab-win-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border-radius: 10px;
    text-decoration: none; color: var(--ink); }
.ab-win-row:hover { background: color-mix(in srgb, var(--wc, #7c3aed) 7%, var(--surface-2)); text-decoration: none; }
.ab-win-med { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px;
    background: color-mix(in srgb, var(--wc, #7c3aed) 14%, transparent); color: var(--wc, #7c3aed); font-size: .82rem; }
.ab-win-body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ab-win-who { font-size: .8rem; }
.ab-win-txt { font-size: .76rem; color: var(--muted); overflow: hidden; }
.ab-win-side { margin-left: auto; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.ab-win-new { font-size: .6rem; font-weight: 900; letter-spacing: .06em; color: #fff; padding: 1px 6px;
    border-radius: 999px; background: linear-gradient(90deg, #db2777, #7c3aed); }
.ab-win-foot { display: flex; }
.ab-win-foot .bell-menu-foot { flex: 1; }
.ab-win-kudos { color: #db2777; }
.w-kudos .w-ic { background: rgba(219,39,119,.12); color: #db2777; }

/* ===== Dashboard kudos strip (between pulse stats and Projects) ===== */
.db-kudos { margin: 4px 0 6px; }
.db-kudos-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.db-kudos-head .db-pulse-h { margin: 0; }
.db-kudos-give { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 600;
    color: #db2777; text-decoration: none; border: 1px solid rgba(219,39,119,.35); border-radius: 999px;
    padding: 4px 12px; background: rgba(219,39,119,.06); }
.db-kudos-give:hover { background: rgba(219,39,119,.14); }
.db-kudos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.db-kudo { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 11px 14px;
    border: 1px solid var(--line); border-left: 3px solid #db2777; border-radius: 12px; background: var(--surface);
    text-decoration: none; color: var(--ink); font-size: .84rem; box-shadow: 0 1px 2px rgba(9,19,45,.04);
    transition: box-shadow .15s, transform .15s; }
.db-kudo:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(9,19,45,.10); text-decoration: none; }
.db-kudo-head { display: flex; align-items: center; gap: 7px; min-width: 0; }
.db-kudo-head strong { white-space: nowrap; }
.db-kudo-from { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; }
.db-kudo-when { margin-left: auto; flex: 0 0 auto; font-size: .74rem; }
.db-kudo-note { font-style: italic; color: var(--muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.db-kudos-empty { margin: 0; }
[data-theme="dark"] .db-kudo { background: rgba(255,255,255,.03); }
[data-theme="dark"] .db-kudos-give { background: rgba(219,39,119,.14); color: #f9a8d4; border-color: rgba(249,168,212,.35); }

/* ===== Workspace gear in the right cluster (desktop) ===== */
@media (min-width: 961px) { .topnav .nav-ws { display: none; } }
@media (max-width: 960px) { .topbar-user .ws-gear { display: none; } }
.topbar-user .ws-gear > summary { padding: 8px 9px; }
.topbar-user .ws-gear > summary .org-caret { display: none; }

/* ===== Jump-to trigger inside the action-bar pill, after Summit ===== */
.action-bar-c .cmdk-trigger { min-width: 170px; margin-left: 6px; padding: 4px 6px 4px 12px; }

/* ===== Social profile: cover hero, chips, kudos wall ===== */
.pf-hero { padding: 0; overflow: hidden; }
.pf-cover { height: 96px; background:
    linear-gradient(120deg, color-mix(in srgb, var(--pc, #2563eb) 85%, #000) 0%, var(--pc, #2563eb) 45%, color-mix(in srgb, var(--pc, #2563eb) 55%, #ff7a33) 100%); }
.pf-hero-body { display: flex; align-items: flex-start; gap: 18px; padding: 0 24px 18px; flex-wrap: wrap; }
.pf-hero .pf-avatar { margin-top: -34px; }
.pf-hero .pf-avatar .avatar { width: 84px; height: 84px; font-size: 1.7rem; border: 4px solid var(--surface); box-shadow: 0 4px 14px rgba(9,19,45,.18); }
.pf-hero .pf-id { padding-top: 12px; }
.pf-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pf-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--muted);
    border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; background: var(--surface-2); white-space: nowrap; }
.pf-chip strong { color: var(--ink); font-weight: 600; }
.pf-chip-fire { color: #ea580c; border-color: rgba(234,88,12,.35); background: rgba(234,88,12,.08); }
.pf-hero-side { margin-left: auto; display: flex; align-items: center; gap: 14px; padding-top: 12px; flex-wrap: wrap; }
.pf-kudos-count { display: flex; flex-direction: column; align-items: center; line-height: 1.1;
    color: #db2777; background: rgba(219,39,119,.08); border-radius: 14px; padding: 8px 16px; }
.pf-kudos-count b { font-size: 1.25rem; font-weight: 800; }
.pf-kudos-count small { color: var(--muted); font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; }
.pf-give { position: relative; }
.pf-give > summary { list-style: none; cursor: pointer; }
.pf-give > summary::-webkit-details-marker { display: none; }
.pf-give-pop { display: flex; flex-direction: column; gap: 8px; width: 280px; right: 0; top: 40px; }
.pf-give-pop input[type="text"] { width: 100%; padding: 8px 11px; border: 1px solid var(--line-2); border-radius: 10px; font: inherit; font-size: .88rem; background: var(--surface); color: var(--ink); }
.pf-kudos-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.pf-kudo { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid #db2777; border-radius: 12px; padding: 12px 14px; }
.pf-kudo-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: .84rem; }
.pf-kudo-head .muted { margin-left: auto; }
.pf-kudo-note { margin: 0; font-size: .88rem; line-height: 1.45; }
@media (max-width: 640px) { .pf-hero-side { margin-left: 0; } }
[data-theme="dark"] .pf-hero .pf-avatar .avatar { border-color: var(--surface); }


/* ===== Data hub (/data): the numbers page ===== */
.dt-section { margin-bottom: 30px; }
.dt-more { margin-left: auto; font-size: .82rem; font-weight: 500; color: var(--muted); text-decoration: none; }
.dt-more:hover { color: var(--ink); }
.dt-sheets { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.dt-sheet { display: block; padding: 14px 16px; text-decoration: none; color: inherit; border-top: 3px solid var(--kc, var(--line)); }
.dt-sheet:hover { text-decoration: none; box-shadow: 0 10px 24px rgba(9,19,45,.10); }
.dt-sheet-top { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; min-width: 0; }
.dt-sheet-top strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-sheet-ic { flex: 0 0 auto; }
.dt-sheet-n { margin-left: auto; flex: 0 0 auto; font-size: .76rem; color: var(--muted); background: var(--surface-2);
    border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.dt-funnel { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.dt-fstage { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; text-decoration: none; color: inherit;
    background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--fc); border-radius: 12px; }
.dt-fstage:hover { text-decoration: none; box-shadow: 0 8px 18px rgba(9,19,45,.08); }
.dt-fstage-l { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.dt-fstage-n { font-size: 1.5rem; font-weight: 800; }
.dt-fstage-fee { font-size: .78rem; color: color-mix(in srgb, var(--fc) 72%, #000); font-weight: 600; }
html[data-theme="dark"] .dt-fstage-fee { color: var(--fc); }
.dt-people { padding: 6px 18px; overflow-x: auto; }
.dt-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.dt-table th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
    font-weight: 700; padding: 10px 12px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dt-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dt-table tbody tr:last-child td { border-bottom: none; }
.dt-table tbody tr:hover { background: rgba(9,19,45,.02); }
[data-theme="dark"] .dt-table tbody tr:hover { background: rgba(255,255,255,.03); }
.dt-person a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font-weight: 600; }
.dt-person a:hover { color: var(--teal); }
.dt-bad { color: var(--danger); font-weight: 700; }
.dt-good { color: #16a34a; font-weight: 700; }
.dt-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.dt-link { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 12px 14px; text-decoration: none;
    color: var(--ink); font-weight: 600; font-size: .9rem; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.dt-link:hover { text-decoration: none; border-color: var(--line-2); box-shadow: 0 6px 14px rgba(9,19,45,.06); }
.dt-link em { font-style: normal; font-weight: 400; font-size: .78rem; color: var(--muted); }
.dt-link .icon { color: var(--teal); align-self: center; }

/* ===== Backlink intelligence (/backlinks) ===== */
.bl-form-card { padding: 20px 22px; }
.bl-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
@media (max-width: 640px) { .bl-modes { grid-template-columns: 1fr; } }
.bl-mode input { position: absolute; opacity: 0; pointer-events: none; }
.bl-mode-card { display: flex; flex-direction: column; gap: 4px; padding: 13px 15px; border: 1.5px solid var(--line);
    border-radius: 14px; cursor: pointer; transition: border-color .15s, background .15s; }
.bl-mode-card strong { display: flex; align-items: center; gap: 8px; font-size: .95rem; }
.bl-mode-card em { font-style: normal; font-size: .8rem; color: var(--muted); line-height: 1.4; }
.bl-mode input:checked + .bl-mode-card { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 7%, transparent); }
.bl-mode input:focus-visible + .bl-mode-card { outline: 2px solid var(--teal); outline-offset: 2px; }
.bl-input-row { display: flex; gap: 10px; }
.bl-input-row input { flex: 1 1 auto; min-width: 0; padding: 11px 14px; border: 1px solid var(--line-2); border-radius: 12px;
    font: inherit; font-size: .95rem; background: var(--surface); color: var(--ink); }
.bl-input-row .btn { flex: 0 0 auto; white-space: nowrap; }
.bl-note { margin: 10px 0 0; }
.bl-verdict-pill { display: inline-block; font-size: .76rem; font-weight: 700; border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.bl-v-great .bl-hero-verdict, .bl-verdict-pill.bl-v-great { color: #059669; }
.bl-verdict-pill.bl-v-great { background: rgba(5,150,105,.1); }
.bl-v-good .bl-hero-verdict, .bl-verdict-pill.bl-v-good { color: #d97706; }
.bl-verdict-pill.bl-v-good { background: rgba(217,119,6,.1); }
.bl-v-bad .bl-hero-verdict, .bl-verdict-pill.bl-v-bad { color: #dc2626; }
.bl-verdict-pill.bl-v-bad { background: rgba(220,38,38,.1); }
.bl-hist-link { font-weight: 600; color: var(--ink); text-decoration: none; }
.bl-hist-link:hover { color: var(--teal); }
.bl-hero { display: flex; align-items: center; gap: 24px; padding: 24px 26px; flex-wrap: wrap;
    border-left: 5px solid var(--line); }
.bl-hero.bl-v-great { border-left-color: #059669; }
.bl-hero.bl-v-good { border-left-color: #d97706; }
.bl-hero.bl-v-bad { border-left-color: #dc2626; }
.bl-hero-main { flex: 1 1 320px; min-width: 0; }
.bl-hero-kicker { margin: 0 0 4px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.bl-hero-verdict { margin: 0 0 6px; font-size: 2rem; line-height: 1.1; }
.bl-hero-head { margin: 0 0 8px; font-size: 1rem; }
.bl-score { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 130px; }
.bl-score-n { font-size: 2.4rem; font-weight: 800; line-height: 1; }
.bl-score-l { color: var(--muted); font-size: .8rem; margin-top: -6px; }
.bl-score-bar { width: 120px; height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.bl-score-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #dc2626, #d97706 45%, #059669); }
.bl-tiles { margin: 18px 0 22px; }
.bl-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-bottom: 26px; }
.bl-cols-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.bl-col { padding: 18px 20px; }
.bl-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; font-size: .9rem; line-height: 1.45; }
.bl-signals { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.bl-signal { display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: 8px; padding: 11px 14px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 12px; font-size: .86rem; }
.bl-signal em { font-style: normal; color: var(--muted); grid-column: 1 / -1; }
.bl-signal-dot { width: 9px; height: 9px; border-radius: 50%; align-self: center; }
.bl-sig-good .bl-signal-dot { background: #16a34a; }
.bl-sig-warn .bl-signal-dot { background: #d97706; }
.bl-sig-bad .bl-signal-dot { background: #dc2626; }
.bl-anchor { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
[data-theme="dark"] .bl-mode input:checked + .bl-mode-card { background: color-mix(in srgb, var(--teal) 14%, transparent); }

/* ===== Success story: post-publish editing + comments ===== */
.suc-reports { display: flex; flex-direction: column; gap: 10px; }
.suc-report { padding: 0; overflow: hidden; }
.suc-report > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px;
    padding: 13px 18px; min-width: 0; flex-wrap: wrap; }
.suc-report > summary::-webkit-details-marker { display: none; }
.suc-report > summary:hover { background: rgba(9,19,45,.03); }
[data-theme="dark"] .suc-report > summary:hover { background: rgba(255,255,255,.04); }
.suc-report-hint { margin-left: auto; }
.suc-report[open] > summary .org-caret { transform: rotate(180deg); }
.suc-report-body { border-top: 1px solid var(--line); padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 16px; }
.suc-report-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.suc-report-actions form { margin-left: auto; }
.suc-edit { display: flex; flex-direction: column; gap: 6px; max-width: 720px; }
.suc-edit input[type="text"], .suc-edit textarea, .suc-cmt-form textarea { width: 100%; padding: 9px 12px;
    border: 1px solid var(--line-2); border-radius: 10px; font: inherit; font-size: .9rem; background: var(--surface); color: var(--ink); }
.suc-edit .btn { align-self: flex-start; margin-top: 4px; }
.suc-cmts { border-top: 1px dashed var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 10px; max-width: 720px; }
.suc-cmts-h { margin: 0; font-size: .84rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.suc-cmt { display: flex; align-items: flex-start; gap: 10px; }
.suc-cmt-main { min-width: 0; flex: 1 1 auto; }
.suc-cmt-meta { margin: 0 0 2px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: .84rem; }
.suc-cmt-body { margin: 0; font-size: .9rem; line-height: 1.45; }
.suc-cmt-pub { font-size: .7rem; font-weight: 700; color: #0d9488; background: rgba(13,148,136,.1);
    border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.suc-cmt-form { display: flex; flex-direction: column; gap: 8px; }
.suc-cmt-form-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; }
.suc-update { padding: 10px 0 0; }
.suc-update + .suc-update { border-top: 1px solid var(--line); margin-top: 10px; }
.suc-update-date { display: inline-block; font-size: .74rem; font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: .05em; margin-bottom: 3px; }

/* ===== Backlink analyze: staged progress panel ===== */
.bl-progress { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; padding: 16px 18px;
    border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.bl-progress-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bl-progress-head .spinner { align-self: center; }
.bl-progress-head em { font-style: normal; color: var(--teal); }
.bl-steps { margin: 0; padding-left: 4px; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: .88rem; }
.bl-steps li { color: var(--muted); display: flex; align-items: center; gap: 8px; transition: color .2s; }
.bl-steps li::before { content: '○'; color: var(--line-2); width: 14px; text-align: center; }
.bl-steps li.active { color: var(--ink); font-weight: 600; }
.bl-steps li.active::before { content: '◔'; color: var(--teal); animation: bl-pulse 1.2s ease-in-out infinite; }
.bl-steps li.done { color: var(--muted); }
.bl-steps li.done::before { content: '●'; color: #16a34a; animation: none; }
@keyframes bl-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .bl-steps li.active::before { animation: none; } }
.bl-progress-bar { height: 7px; border-radius: 999px; background: var(--line); overflow: hidden; }
.bl-progress-bar i { display: block; height: 100%; width: 4%; border-radius: 999px;
    background: linear-gradient(90deg, var(--teal), #7c3aed); transition: width 1.4s ease; }

/* ===== Internal linking (/internal-links) ===== */
.il-form .bl-input-row select { flex: 1 1 auto; min-width: 0; padding: 11px 14px; border: 1px solid var(--line-2);
    border-radius: 12px; font: inherit; font-size: .95rem; background: var(--surface); color: var(--ink); }
.il-target { padding: 16px 18px; margin-bottom: 14px; }
.il-target-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.il-inlinks { flex: 0 0 auto; font-size: .74rem; font-weight: 800; border-radius: 999px; padding: 3px 10px;
    background: rgba(217,119,6,.12); color: #d97706; white-space: nowrap; }
.il-inlinks-zero { background: rgba(220,38,38,.12); color: #dc2626; }
.il-target-url { font-weight: 700; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.il-target-url:hover { color: var(--teal); }
.il-anchor { margin-left: auto; font-size: .82rem; color: var(--teal); background: color-mix(in srgb, var(--teal) 9%, transparent);
    border-radius: 999px; padding: 3px 11px; }
.il-src a { font-weight: 600; color: var(--ink); text-decoration: none; display: block; overflow-wrap: anywhere; }
.il-src a:hover { color: var(--teal); }
.il-src { white-space: normal !important; max-width: 260px; }
.il-place { white-space: normal !important; font-size: .86rem; line-height: 1.5; }
@media (max-width: 700px) { .il-anchor { margin-left: 0; } }

/* Recurring block collapses (details) — the count chip says what's inside */
.ms-recurring > summary.ms-recurring-h { list-style: none; cursor: pointer; margin-bottom: 0; }
.ms-recurring > summary.ms-recurring-h::-webkit-details-marker { display: none; }
.ms-recurring[open] > summary.ms-recurring-h { margin-bottom: 6px; }
.ms-recurring > summary .org-caret { margin-left: auto; }
.ms-recurring[open] > summary .org-caret { transform: rotate(180deg); }
.ms-recur-n { font-size: .72rem; font-weight: 800; background: rgba(240,165,0,.18); color: #b45309;
    border-radius: 999px; padding: 1px 8px; }
[data-theme="dark"] .ms-recur-n { color: #fbbf24; }

/* AI placement rows: where → sentence to add → nearby context */
.il-where { display: block; font-size: .8rem; font-weight: 600; color: var(--muted); margin-bottom: 3px; }
.il-addline { display: block; }
.il-anchor-in { color: var(--teal); text-decoration: underline; }
.il-context { display: block; margin-top: 3px; }

/* "Crawled, not indexed" badge on internal-link targets */
.il-nidx { flex: 0 0 auto; font-size: .72rem; font-weight: 800; border-radius: 999px; padding: 3px 10px;
    background: rgba(220,38,38,.1); color: #dc2626; white-space: nowrap; }

/* Internal links: plain-English reasoning + numbered steps per suggestion */
.il-target-reason { margin: 0 0 12px; font-size: .87rem; line-height: 1.5; color: var(--muted);
    background: rgba(9,19,45,.03); border-radius: 10px; padding: 9px 13px; }
.il-target-reason strong { color: var(--ink); }
[data-theme="dark"] .il-target-reason { background: rgba(255,255,255,.04); }
.il-sgs { display: flex; flex-direction: column; gap: 10px; }
.il-sg { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.il-sg-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.il-sg-n { flex: 0 0 auto; width: 20px; height: 20px; display: inline-grid; place-items: center; align-self: center;
    border-radius: 50%; background: var(--teal); color: #fff; font-size: .72rem; font-weight: 800; }
.il-sg-src { font-weight: 700; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.il-sg-src:hover { color: var(--teal); }
.il-sg-why::before { content: 'why: '; font-weight: 700; text-transform: uppercase; font-size: .68rem; letter-spacing: .04em; }
.il-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: .88rem; line-height: 1.5; }
.il-steps code { background: rgba(9,19,45,.06); padding: 1px 7px; border-radius: 6px; font-size: .82rem; }
[data-theme="dark"] .il-steps code { background: rgba(255,255,255,.08); }
.il-copy { vertical-align: baseline; }

/* Internal links: priority color coding (P1 red / P2 amber / P3 blue) */
.il-legend { display: flex; gap: 16px; flex-wrap: wrap; margin: 0 0 14px; font-size: .8rem; color: var(--muted); }
.il-leg { display: inline-flex; align-items: center; gap: 6px; }
.il-leg i { width: 10px; height: 10px; border-radius: 3px; }
.il-leg-p1 i { background: #dc2626; } .il-leg-p2 i { background: #d97706; } .il-leg-p3 i { background: #2563eb; }
.il-target { position: relative; border-left: 5px solid var(--line); }
.il-target.il-p1 { border-left-color: #dc2626; }
.il-target.il-p2 { border-left-color: #d97706; }
.il-target.il-p3 { border-left-color: #2563eb; }
.il-prio { position: absolute; top: -9px; left: 14px; font-size: .68rem; font-weight: 800; letter-spacing: .03em;
    color: #fff; border-radius: 999px; padding: 2px 10px; }
.il-prio-1 { background: #dc2626; } .il-prio-2 { background: #d97706; } .il-prio-3 { background: #2563eb; }
.il-target .il-target-head { margin-top: 4px; }

/* Internal links: filter tabs + completed suggestions */
.il-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.il-tab { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: .84rem; font-weight: 600;
    cursor: pointer; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px;
    background: var(--surface); color: var(--muted); }
.il-tab:hover:not(:disabled) { border-color: var(--line-2); color: var(--ink); }
.il-tab.active { background: var(--ink); color: #fff; border-color: var(--ink); }
[data-theme="dark"] .il-tab.active { background: rgba(255,255,255,.14); color: #fff; border-color: transparent; }
.il-tab:disabled { opacity: .45; cursor: default; }
.il-tab em { font-style: normal; font-size: .72rem; font-weight: 800; background: rgba(9,19,45,.08);
    border-radius: 999px; padding: 1px 7px; }
.il-tab.active em { background: rgba(255,255,255,.2); }
.il-tab i { width: 9px; height: 9px; border-radius: 3px; }
.il-tab-p1 i { background: #dc2626; } .il-tab-p2 i { background: #d97706; } .il-tab-p3 i { background: #2563eb; }
.il-tab-done .icon, .il-tab-done { color: #16a34a; }
.il-tab-done.active { background: #16a34a; border-color: #16a34a; color: #fff; }
.il-done-form { margin-left: auto; }
.il-done-btn.is-done { color: #16a34a; font-weight: 700; }
.il-sg-done { background: rgba(22,163,74,.05); border-color: rgba(22,163,74,.35); }
.il-sg-done .il-sg-n { background: #16a34a; }
.il-sg-done .il-steps { opacity: .55; }

/* Internal links: live client search above the picker */
.il-find { width: 100%; margin-bottom: 10px; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: 12px;
    font: inherit; font-size: .92rem; background: var(--surface); color: var(--ink); }

/* Internal links: searchable client combobox */
.il-cbx { position: relative; flex: 1 1 auto; min-width: 0; }
.il-cbx input[type="text"] { width: 100%; padding: 11px 14px; border: 1px solid var(--line-2); border-radius: 12px;
    font: inherit; font-size: .95rem; background: var(--surface); color: var(--ink); }
.il-cbx input.is-invalid { border-color: var(--danger); animation: il-shake .3s; }
@keyframes il-shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.il-cbx-list { left: 0; right: 0; top: 46px; width: auto; max-height: 320px; overflow-y: auto; padding: 6px; z-index: 60; }
.il-cbx-item { padding: 9px 12px; border-radius: 9px; cursor: pointer; font-size: .9rem; }
.il-cbx-item:hover:not(.is-off), .il-cbx-item.is-active { background: rgba(9,19,45,.06); }
[data-theme="dark"] .il-cbx-item:hover:not(.is-off), [data-theme="dark"] .il-cbx-item.is-active { background: rgba(255,255,255,.08); }
.il-cbx-item.is-off { color: var(--muted); cursor: default; opacity: .7; }

/* ===== Pipeline: Sold charts ===== */
.plc-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 14px; margin-top: 16px; }
.plc-card { padding: 16px 18px; }
.plc-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; font-size: 1rem; }
.plc-h .icon, .plc-h i { color: var(--muted); }
.plc-svg { width: 100%; height: auto; display: block; }
.plc-grid { stroke: var(--line); stroke-width: 1; }
.plc-tick, .plc-x { fill: var(--muted); font-size: 11px; }
.plc-name { fill: var(--ink); font-size: 12px; font-weight: 600; }
.plc-val { fill: var(--ink); font-size: 11.5px; font-weight: 700; }
.plc-bar path, .plc-bar rect { transition: opacity .12s; }
.plc-bar:hover path, .plc-bar:hover rect { opacity: .8; }
.plc-note { margin: 12px 2px 0; }
.plc-table { margin-top: 14px; padding: 0; overflow: hidden; }
.plc-table > summary { list-style: none; cursor: pointer; padding: 12px 18px; font-weight: 600; font-size: .9rem; color: var(--muted); }
.plc-table > summary::-webkit-details-marker { display: none; }
.plc-table > summary:hover { color: var(--ink); }
.plc-table-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; padding: 4px 18px 16px; }

/* ===== Site copier ===== */
.sc-form select { flex: 0 0 auto; width: auto; padding: 11px 12px; border: 1px solid var(--line-2); border-radius: 12px;
    font: inherit; font-size: .9rem; background: var(--surface); color: var(--ink); }
.sc-form input[type="text"] { flex: 1 1 auto; min-width: 0; padding: 11px 14px; border: 1px solid var(--line-2);
    border-radius: 12px; font: inherit; font-size: .95rem; background: var(--surface); color: var(--ink); }
.sc-stats { display: flex; gap: 18px; flex-wrap: wrap; font-size: .9rem; color: var(--muted); }
.sc-stats b { color: var(--ink); }
.sc-done { text-align: center; padding: 10px 0 6px; }
.sc-done-big { font-size: 1.05rem; font-weight: 600; margin: 0 0 14px; }

/* Convert-to-project start date pickers */
.pl-convert-date { font: inherit; font-size: .78rem; padding: 3px 6px; border: 1px solid var(--line);
    border-radius: 8px; background: var(--surface); color: var(--muted); margin-right: 4px; max-width: 130px; }

/* ===== Time insights bars ===== */
.ti-bars { display: flex; flex-direction: column; gap: 7px; }
.ti-bar { display: grid; grid-template-columns: 170px 1fr 64px; align-items: center; gap: 10px; font-size: .86rem; }
.ti-bar-l { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ti-bar-track { height: 14px; border-radius: 7px; background: rgba(9,19,45,.05); overflow: hidden; }
[data-theme="dark"] .ti-bar-track { background: rgba(255,255,255,.06); }
.ti-bar-track i { display: block; height: 100%; border-radius: 7px 4px 4px 7px; background: #0d9488; }
.ti-bar-v { text-align: right; font-weight: 700; color: var(--ink); }
@media (max-width: 560px) { .ti-bar { grid-template-columns: 110px 1fr 56px; } }

/* ===== Social batch composer ===== */
.sb-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 16px; }
.sb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.sb-post { padding: 13px 15px; display: flex; flex-direction: column; gap: 8px; }
.sb-post-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.sb-post-head .sb-copy { margin-left: auto; }
.sb-idea { width: 100%; padding: 7px 11px; border: 1px solid var(--line); border-radius: 9px; font: inherit;
    font-size: .84rem; background: var(--surface-2); color: var(--ink); }
.sb-copy-ta { width: 100%; padding: 9px 11px; border: 1px solid var(--line-2); border-radius: 10px; font: inherit;
    font-size: .88rem; line-height: 1.5; background: var(--surface); color: var(--ink); resize: vertical; }
.sb-save { margin: 16px 0; text-align: right; }
.sp-batch-link { white-space: nowrap; }

/* ===== Workload batch queue ===== */
.wl-batch-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 14px; }
.wl-batch-pick { display: inline-flex; align-items: center; gap: 8px; }
.wl-batch-pick select { width: auto; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 10px;
    font: inherit; font-size: .88rem; background: var(--surface); color: var(--ink); }
.wl-batch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.wl-batch-group { padding: 14px 16px; }
.wl-batch-list { display: flex; flex-direction: column; }
.wl-batch-item { display: flex; align-items: center; gap: 8px; padding: 7px 4px; border-bottom: 1px solid var(--line);
    text-decoration: none; color: var(--ink); font-size: .87rem; min-width: 0; }
.wl-batch-item:last-of-type { border-bottom: none; }
.wl-batch-item:hover { background: rgba(9,19,45,.03); }
[data-theme="dark"] .wl-batch-item:hover { background: rgba(255,255,255,.04); }
.wl-batch-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-batch-proj, .wl-batch-due { flex: 0 0 auto; white-space: nowrap; }

/* Sweep rows: live old/new links beside the page path */
.pgc-livelinks { margin-left: 8px; font-size: .74rem; white-space: nowrap; }
.pgc-livelinks a { color: var(--muted); text-decoration: none; }
.pgc-livelinks a:hover { color: var(--teal); text-decoration: underline; }

/* ===== Timesheet: bulk log across clients ===== */
.ts-bulk > summary.ts-bulk-sum { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.ts-bulk > summary.ts-bulk-sum::-webkit-details-marker { display: none; }
.ts-bulk > summary h3 { margin: 0; }
.ts-bulk > summary .org-caret { margin-left: auto; }
.ts-bulk[open] > summary .org-caret { transform: rotate(180deg); }
.ts-bulk-find { width: 100%; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 10px;
    font: inherit; font-size: .86rem; background: var(--surface); color: var(--ink); }
.ts-bulk-list { max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px;
    padding: 6px 10px; display: flex; flex-direction: column; }
.ts-bulk-item { display: flex; align-items: center; gap: 8px; padding: 5px 2px; font-size: .87rem; cursor: pointer; }
.ts-bulk-item:hover { color: var(--teal); }
.ts-bulk-foot { display: flex; align-items: center; justify-content: space-between; }

/* ===== Page-compare sweep: spreadsheet look + row notes ===== */
.pgc-sheet { border-collapse: collapse; }
.pgc-sheet th, .pgc-sheet td { border: 1px solid var(--line); padding: 7px 10px; vertical-align: top; }
.pgc-sheet thead th { position: sticky; top: 0; background: var(--surface-2); z-index: 5;
    font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.pgc-sheet tbody tr:nth-child(even) td { background: rgba(9,19,45,.02); }
[data-theme="dark"] .pgc-sheet tbody tr:nth-child(even) td { background: rgba(255,255,255,.02); }
.pgc-sheet tbody tr:hover td { background: rgba(13,148,136,.05); }
.pgc-notes-cell { min-width: 220px; max-width: 320px; }
.pgc-note { font-size: .8rem; line-height: 1.45; margin-bottom: 5px; overflow-wrap: anywhere; }
.pgc-note-add > summary { list-style: none; cursor: pointer; }
.pgc-note-add > summary::-webkit-details-marker { display: none; }
.pgc-note-form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.pgc-note-form input { padding: 6px 9px; border: 1px solid var(--line-2); border-radius: 8px; font: inherit;
    font-size: .8rem; background: var(--surface); color: var(--ink); }
.pgc-note-form .btn { align-self: flex-start; }
@media print { .pgc-note-add { display: none; } .pgc-sheet thead th { position: static; } }

/* Bulk log: the PM's own accounts grouped on top */
.ts-bulk-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
    font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
    padding: 7px 2px 3px; border-bottom: 1px dashed var(--line); margin-bottom: 3px; }
.ts-bulk-h:not(:first-child) { margin-top: 8px; }

/* Wide public pages (site-sweep spreadsheet): use the whole screen */
.public-wrap--wide { max-width: 1500px; }

/* The 4-column width recipe on .pgc-table belongs to the single-report view;
   the 6-column sweep sheet sets its own proportions, lays out fixed at 100%
   width and WRAPS — a spreadsheet that never side-scrolls. */
.pgc-sheet { table-layout: fixed; width: 100%; }
.pgc-sheet th:nth-child(1), .pgc-sheet td:nth-child(1) { width: 24%; }
.pgc-sheet th:nth-child(2), .pgc-sheet td:nth-child(2) { width: 10%; }
.pgc-sheet th:nth-child(3), .pgc-sheet td:nth-child(3) { width: 14%; }
.pgc-sheet th:nth-child(4), .pgc-sheet td:nth-child(4) { width: 13%; }
.pgc-sheet th:nth-child(5), .pgc-sheet td:nth-child(5) { width: 17%; }
.pgc-sheet th:nth-child(6), .pgc-sheet td:nth-child(6) { width: 22%; }
.pgc-sheet th, .pgc-sheet td { white-space: normal; overflow-wrap: anywhere; }
.pgc-sheet .pgc-chip, .pgc-sheet .pgc-livelinks { white-space: nowrap; }
.pgc-sheet .pgc-notes-cell { min-width: 0; max-width: none; }
.pgc-sheet .pgc-note-add > summary { white-space: nowrap; }

/* ===== Analytics emails batcher ===== */
.ae-list { display: flex; flex-direction: column; gap: 10px; }
.ae-row { padding: 0; overflow: hidden; }
.ae-row > summary.ae-sum { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; flex-wrap: wrap; }
.ae-row > summary.ae-sum::-webkit-details-marker { display: none; }
.ae-row > summary:hover { background: rgba(9,19,45,.03); }
[data-theme="dark"] .ae-row > summary:hover { background: rgba(255,255,255,.04); }
.ae-sum .org-caret { margin-left: auto; }
.ae-row[open] > summary .org-caret { transform: rotate(180deg); }
.ae-sent > summary { opacity: .75; }
.ae-body { border-top: 1px solid var(--line); padding: 12px 16px 16px; }
.ae-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.ae-draft { white-space: pre-wrap; font: inherit; font-size: .9rem; line-height: 1.55; background: var(--surface-2);
    border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin: 0 0 8px; max-width: 780px; }

/* ===== Redirect map builder ===== */
.rm-form textarea { width: 100%; padding: 10px 13px; border: 1px solid var(--line-2); border-radius: 12px;
    font: inherit; font-size: .9rem; background: var(--surface); color: var(--ink); resize: vertical; }
.rm-form .bl-input-row { margin-top: 10px; align-items: center; }
.rm-form .bl-input-row input[type="text"] { flex: 1 1 auto; min-width: 0; }
.rm-table th:nth-child(1), .rm-table td:nth-child(1) { width: 42%; }
.rm-table th:nth-child(2), .rm-table td:nth-child(2) { width: 42%; }
.rm-table th:nth-child(3), .rm-table td:nth-child(3) { width: 16%; }
.rm-new { width: 100%; padding: 6px 9px; border: 1px solid var(--line-2); border-radius: 8px;
    font-family: ui-monospace, monospace; font-size: .8rem; background: var(--surface); color: var(--ink); }
.rm-old { font-size: .8rem; overflow-wrap: anywhere; }
.rm-exports { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

/* ===== Tools dock: Production pinned to the right edge ===== */
/* Centered in the space BELOW the sticky header stack (timer strip + extbar +
   topnav + action bar, z-index 110-130) — the dock is z-90, so letting it rise
   under the headers hid its top icons. app.js measures --header-clear.
   The rail holds one button per tool group; each group's tools open in a
   side panel (hover, click or keyboard), so the rail stays short. */
.tool-dock { position: fixed; right: 10px; top: calc(50vh + var(--header-clear, 150px) / 2); transform: translateY(-50%); z-index: 90; }
.tool-dock-inner { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 5px;
    border-radius: 18px; border: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 80%, transparent);
    -webkit-backdrop-filter: saturate(1.5) blur(14px); backdrop-filter: saturate(1.5) blur(14px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 10px 30px -12px rgba(9,19,45,.35); }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .tool-dock-inner { background: var(--surface); }
}
[data-theme="dark"] .tool-dock-inner { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 30px -10px rgba(0,0,0,.7); }
.tool-dock-head { display: flex; padding: 2px 0 6px; margin-bottom: 2px; border-bottom: 1px solid var(--line); }
.tool-dock-head .tool-dock-ic { width: 28px; height: 28px; font-size: .85rem; }
/* Group button: tinted icon chip + a tiny label underneath. */
.tool-dock-gbtn { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 52px; padding: 5px 2px;
    border: 0; border-radius: 12px; background: none; color: var(--muted); cursor: pointer; font: inherit;
    transition: background .12s, color .12s; }
.tool-dock-gbtn:hover, .tool-dock-grp.is-open .tool-dock-gbtn { background: rgba(9,19,45,.05); color: var(--ink); }
[data-theme="dark"] .tool-dock-gbtn:hover, [data-theme="dark"] .tool-dock-grp.is-open .tool-dock-gbtn { background: rgba(255,255,255,.07); }
.tool-dock-gl { font-size: .62rem; font-weight: 700; letter-spacing: .02em; line-height: 1; }
.tool-dock-grp.has-active .tool-dock-gbtn { color: var(--ink); }
.tool-dock-grp.has-active .tool-dock-gbtn .tool-dock-ic { box-shadow: 0 0 0 2px color-mix(in srgb, var(--tc, var(--teal)) 55%, transparent); }
/* Each icon sits in its own tinted chip — distinct at a glance. */
.tool-dock-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; flex: 0 0 auto;
    background: color-mix(in srgb, var(--tc, #64748b) 13%, transparent);
    color: var(--tc, #64748b); font-size: .95rem; }
.tool-dock-ic .icon, .tool-dock-ic i { color: var(--tc, #64748b); }
[data-theme="dark"] .tool-dock-ic { background: color-mix(in srgb, var(--tc, #94a3b8) 20%, transparent); }
/* The side panel: anchored to the dock (not the button) so a long group
   never runs off the bottom of the screen. */
.tool-dock-fly { display: none; position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%);
    width: 300px; max-height: calc(100vh - var(--header-clear, 150px) - 16px); overflow-y: auto; overscroll-behavior: contain;
    padding: 8px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface);
    box-shadow: 0 18px 40px -14px rgba(9,19,45,.35); scrollbar-width: thin; }
[data-theme="dark"] .tool-dock-fly { box-shadow: 0 18px 40px -12px rgba(0,0,0,.75); }
.tool-dock-grp.is-open .tool-dock-fly { display: block; animation: tool-dock-in .14s ease-out; }
@keyframes tool-dock-in { from { opacity: 0; margin-right: -6px; } to { opacity: 1; margin-right: 0; } }
@media (prefers-reduced-motion: reduce) { .tool-dock-grp.is-open .tool-dock-fly { animation: none; } }
/* Invisible bridge across the gap so moving the mouse to the panel keeps it open. */
.tool-dock-fly::after { content: ""; position: absolute; top: 0; bottom: 0; right: -12px; width: 12px; }
.tool-dock-flyh { margin: 2px 6px 6px; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.tool-dock-item { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 11px;
    color: var(--ink); text-decoration: none; transition: background .12s; }
.tool-dock-item:hover, .tool-dock-item:focus-visible { background: rgba(9,19,45,.05); text-decoration: none; }
[data-theme="dark"] .tool-dock-item:hover, [data-theme="dark"] .tool-dock-item:focus-visible { background: rgba(255,255,255,.07); }
.tool-dock-item.active { background: color-mix(in srgb, var(--tc, var(--teal)) 12%, transparent); }
.tool-dock-item.active .tool-dock-ic { box-shadow: 0 0 0 2px color-mix(in srgb, var(--tc, var(--teal)) 55%, transparent); }
.tool-dock-txt { display: flex; flex-direction: column; min-width: 0; }
.tool-dock-l { font-size: .86rem; font-weight: 600; line-height: 1.25; }
.tool-dock-d { font-size: .74rem; color: var(--muted); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-height: 720px) {
    .tool-dock-head { display: none; }
    .tool-dock-item { padding: 4px 6px; }
    .tool-dock-item .tool-dock-ic { width: 26px; height: 26px; font-size: .8rem; }
}
/* Desktop-only: below 1201px the dock hides and Production stays in the nav. */
@media (max-width: 1200px) { .tool-dock { display: none; } }
@media (min-width: 1201px) { .topnav .nav-prod { display: none; } }
@media print { .tool-dock { display: none; } }

/* ===== Status sheets: clickable column-header filters ===== */
.sh-table thead th[data-key] { cursor: pointer; -webkit-user-select: none; user-select: none; }
.sh-table thead th[data-key]:hover { color: var(--ink); background: rgba(9,19,45,.04); }
[data-theme="dark"] .sh-table thead th[data-key]:hover { background: rgba(255,255,255,.06); }
.sh-th-fic { opacity: .35; font-size: .72em; margin-left: 2px; }
.sh-table thead th.sh-th-on { color: var(--teal); }
.sh-table thead th.sh-th-on .sh-th-fic { opacity: 1; }
.sh-thp { display: flex; flex-direction: column; gap: 2px; min-width: 190px; max-width: 280px; max-height: 320px; overflow-y: auto; z-index: 450; }
.sh-thp-o { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border: 0; background: none;
    border-radius: 8px; cursor: pointer; text-align: left; font: inherit; font-size: .85rem; color: var(--ink); }
.sh-thp-o:hover { background: rgba(9,19,45,.05); }
[data-theme="dark"] .sh-thp-o:hover { background: rgba(255,255,255,.07); }
.sh-thp-o.on { background: color-mix(in srgb, var(--teal) 13%, transparent); font-weight: 700; }
.sh-thp-o i { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.sh-thp-o em { margin-left: auto; font-style: normal; color: var(--muted); font-size: .76rem; }
.sh-thp-q { width: 100%; min-width: 220px; }
.sh-thp-sort { display: flex; gap: 4px; padding-bottom: 4px; margin-bottom: 3px; border-bottom: 1px solid var(--line); }
.sh-thp-s { flex: 1; padding: 5px 7px; border: 0; background: var(--surface-2); border-radius: 8px; cursor: pointer;
    font: inherit; font-size: .78rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
.sh-thp-s:hover { background: color-mix(in srgb, var(--teal) 14%, transparent); }
.sh-table thead th[data-sorted]::after { content: ' ▲'; font-size: .62rem; color: var(--teal); }
.sh-table thead th[data-sorted="desc"]::after { content: ' ▼'; }

/* ===== Pre-flight Check ===== */
.pfc-grid { display: flex; flex-direction: column; gap: 16px; }
.pfc-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.pfc-row label { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; font-weight: 600; color: var(--muted); min-width: 220px; }
.pfc-form textarea { width: 100%; font: inherit; font-size: .85rem; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.pfc-form .btn { margin-right: 10px; }
.pfc-verdict { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 999px; font-size: .8rem; font-weight: 800; }
.pfc-verdict-ready { background: color-mix(in srgb, #16a34a 14%, transparent); color: #15803d; }
.pfc-verdict-needs { background: color-mix(in srgb, #d97706 15%, transparent); color: #b45309; }
.pfc-summary { margin: 4px 0 12px; font-size: .95rem; }
/* .dt-table forces nowrap on cells — long quoted titles/metas must WRAP here,
   not draw over the next column. Own fixed layout + explicit widths. */
.pfc-issues { table-layout: fixed; }
.pfc-issues td { vertical-align: top; white-space: normal; overflow-wrap: anywhere; }
.pfc-issues th:nth-child(1), .pfc-issues td:nth-child(1) { width: 30px; }
.pfc-issues th:nth-child(2) { width: 26%; }
.pfc-issues th:nth-child(4) { width: 30%; }
.pfc-where { font-weight: 600; }
.pfc-sev-block td:first-child { font-size: 1rem; }
.pfc-sev-tip { opacity: .8; }
.pfc-rules { margin: 0 0 14px; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; font-size: .88rem; }
.pfc-rules li { line-height: 1.45; }
.pfc-rule-tag { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
    background: var(--surface-2); border-radius: 6px; padding: 1px 7px; margin-left: 6px; }
.pfc-rule-learned { background: color-mix(in srgb, var(--teal) 14%, transparent); color: var(--teal); }
.pfc-teach { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line); padding-top: 12px; }
.pfc-teach textarea { width: 100%; font: inherit; font-size: .85rem; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin: 6px 0 8px; }
.pfc-addrule { display: flex; gap: 8px; }
.pfc-addrule input[type="text"] { flex: 1; }
/* October: floaty Halloween bits on the dashboard banner (decorative only —
   pointer-events none, parked still for reduced-motion, hidden on phones). */
.db-spooky { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.db-spooky-i { position: absolute; font-size: 1.7rem; opacity: .85; filter: drop-shadow(0 4px 8px rgba(9,19,45,.25)); animation: spooky-bob 5.2s ease-in-out infinite; }
.db-spooky-pumpkin { right: 36%; top: 14px; animation-delay: 0s; }
.db-spooky-ghost { right: 30%; bottom: 16px; font-size: 1.35rem; animation-delay: -1.8s; animation-duration: 6.4s; }
.db-spooky-bat { right: 42%; top: 46px; font-size: 1.1rem; animation-delay: -3.4s; animation-duration: 4.4s; }
@keyframes spooky-bob { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-9px) rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .db-spooky-i { animation: none; } }
@media (max-width: 900px) { .db-spooky { display: none; } }
/* The greeting pumpkin is ALSO the easter egg (triple-click) — no cursor
   hint, just a tiny wiggle for the curious. */
.db-pumpkin { display: inline-block; cursor: default; -webkit-user-select: none; user-select: none; transition: transform .15s; }
.db-pumpkin:hover { transform: rotate(-8deg) scale(1.08); }
.spooky-fly { position: fixed; left: -70px; z-index: 9999; pointer-events: none;
    animation: spooky-fly-across 3.6s linear forwards; }
@keyframes spooky-fly-across {
    0%   { transform: translateX(0) translateY(0) rotate(-6deg); opacity: 0; }
    6%   { opacity: 1; }
    30%  { transform: translateX(32vw) translateY(-5vh) rotate(8deg); }
    60%  { transform: translateX(66vw) translateY(4vh) rotate(-8deg); }
    94%  { opacity: 1; }
    100% { transform: translateX(110vw) translateY(-3vh) rotate(6deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .spooky-fly { display: none; } }
/* 👻 The ⌘K ghost: lights out, lunge at the viewer, BOO, drift away. */
.ghost-scare { position: fixed; inset: 0; z-index: 99998; display: grid; place-items: center; overflow: hidden;
    pointer-events: none; animation: ghost-lights 3.4s ease forwards; }
.ghost-scare-g { font-size: 3rem; opacity: 0; animation: ghost-lunge 2.7s cubic-bezier(.3,.6,.3,1) .15s forwards;
    filter: drop-shadow(0 0 34px rgba(170,190,255,.85)); }
.ghost-scare-boo { position: absolute; opacity: 0; color: #fff; letter-spacing: .08em;
    font-size: clamp(3rem, 12vw, 9rem); font-weight: 900; line-height: 1;
    text-shadow: 0 0 34px rgba(150,170,255,.9); animation: ghost-boo 2.7s ease .15s forwards; }
@keyframes ghost-lights {
    0% { background: rgba(2,4,12,0); } 15% { background: rgba(2,4,12,.92); }
    78% { background: rgba(2,4,12,.92); } 100% { background: rgba(2,4,12,0); }
}
@keyframes ghost-lunge {
    0%   { transform: scale(.15) translateY(32vh) rotate(-10deg); opacity: 0; }
    22%  { transform: scale(1) translateY(8vh) rotate(7deg); opacity: 1; }
    48%  { transform: scale(7.5) translateY(-2vh) rotate(-5deg); opacity: 1; }
    62%  { transform: scale(6.8) translateY(-1vh) rotate(4deg); }
    100% { transform: scale(.35) translateY(-48vh) translateX(40vw) rotate(16deg); opacity: 0; }
}
@keyframes ghost-boo {
    0%, 42% { opacity: 0; transform: scale(.6) rotate(-3deg); }
    52% { opacity: 1; transform: scale(1.12) rotate(2deg); }
    62% { transform: scale(1) rotate(0deg); }
    82% { opacity: 1; }
    100% { opacity: 0; transform: scale(1.15); }
}
body.ghost-shake { animation: ghost-shake .32s linear 3; }
@keyframes ghost-shake {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(-8px, 4px); } 40% { transform: translate(7px, -5px); }
    60% { transform: translate(-6px, -4px); } 80% { transform: translate(6px, 5px); }
}
/* Reduced motion: a calm apparition — fade in, BOO softly, fade out. */
.ghost-scare--calm { animation-duration: 2.6s; }
.ghost-scare--calm .ghost-scare-g { animation: ghost-calm 2.4s ease forwards; font-size: 6rem; }
@keyframes ghost-calm { 0% { opacity: 0; } 30% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }

.pfc-mine { display: flex; flex-direction: column; gap: 8px; border-top: 1px dashed var(--line); padding-top: 10px; }
.pfc-mine-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* Auto pre-flight panel on the on-page brief */
.op-pfc { margin-bottom: 16px; padding: 12px 16px; }
.op-pfc > summary { cursor: pointer; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; list-style: none; }
.op-pfc > summary::-webkit-details-marker { display: none; }
.op-pfc-list { margin: 10px 0 2px; padding-left: 4px; display: flex; flex-direction: column; gap: 7px; list-style: none; font-size: .88rem; }
.op-pfc-list li { line-height: 1.5; }
.op-pfc-fix { display: block; color: var(--muted); font-size: .84rem; padding-left: 22px; }

/* GBP no-listing retry (share-link rescue) */
.ga-nolisting-body { flex: 1; }
.ga-retry { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.ga-retry input[name="business_name"] { flex: 1; min-width: 260px; }
.ga-retry-loc { max-width: 160px; }

/* ===== Growth plan ===== */
.gw-head { display: flex; align-items: flex-start; gap: 14px; }
.gw-rank { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px;
    background: color-mix(in srgb, #16a34a 13%, transparent); color: #15803d; font-weight: 800; }
.gw-head-txt { flex: 1; min-width: 200px; }
.gw-title { margin: 0 0 2px; font-size: 1.05rem; }
.gw-why { margin: 0; }
.gw-badges { display: flex; gap: 6px; flex: 0 0 auto; }
.gw-impact, .gw-effort { padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 800; }
.gw-impact { background: color-mix(in srgb, var(--teal) 13%, transparent); color: var(--teal); }
.gw-effort { background: var(--surface-2); color: var(--muted); }
.gw-action { margin: 10px 0 6px; font-weight: 600; }
.gw-urls { margin: 6px 0 10px; padding-left: 4px; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: .86rem; }
.gw-urls li { display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; overflow-wrap: anywhere; }
.gw-more { margin: -6px 0 10px; }
.gw-more > summary { cursor: pointer; font-size: .84rem; font-weight: 600; color: var(--accent, #4f46e5); padding: 2px 4px; }
.gw-more[open] > summary { margin-bottom: 4px; }
.gw-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 10px; }
.gw-task-form { display: flex; gap: 8px; align-items: center; margin-left: auto; flex-wrap: wrap; }
.gw-assignee { max-width: 170px; }

/* ===== SEO Triage ===== */
.tg-pick { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tg-custom { display: inline-flex; gap: 6px; align-items: center; }
.tg-custom input[type="date"] { padding: 6px 8px; font-size: .85rem; max-width: 150px; }
.tg-brand { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 14px; }
.tg-brand input[name="terms"] { flex: 1 1 260px; min-width: 200px; max-width: 460px; }
.tg-brand-sw { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; font-size: .88rem; }
.tg-brand > .muted.small { flex-basis: 100%; }
.tg-brand-note { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tg-brand-chip { display: inline-flex; gap: 5px; align-items: center; border: 1px solid var(--line, #e5e7eb);
    border-radius: 999px; padding: 2px 10px; background: var(--surface-2, #f1f5f9); color: inherit;
    font-size: .82rem; cursor: pointer; }
.tg-brand-chip span { opacity: .55; font-weight: 700; }
.tg-brand-chip:hover { border-color: #dc2626; color: #dc2626; }
.tg-brand-chip:hover span { opacity: 1; }
.tg-split { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 2px 0 10px; }
.tg-split-pill { display: inline-flex; gap: 5px; align-items: center; border: 1px solid var(--line, #e5e7eb);
    border-radius: 8px; padding: 3px 9px; white-space: nowrap; }
.tg-ours-list { margin: 4px 0 0; }
.tg-ours-list .tg-dot { vertical-align: middle; }
.tg-qbtns { white-space: nowrap; }
.tg-qbtns .link-btn + .link-btn { margin-left: 8px; }
.tg-spark { display: block; width: 100%; max-width: 640px; height: auto; margin: 6px 0; }

.op-pfc-nudge { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 14px; }
.op-pfc summary { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.op-pfc summary form { margin-left: auto; }

.bl-review-bar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 14px;
    position: sticky; top: var(--header-clear, 70px); z-index: 30; }
.bl-review-actions { margin-left: auto; display: inline-flex; gap: 8px; }
.bl-mail { padding: 12px 16px; margin-bottom: 10px; }
.bl-mail-head { display: flex; gap: 9px; align-items: baseline; cursor: pointer; }
.bl-mail-subj { margin: 6px 0 4px; font-size: .92rem; }
.bl-mail-body { white-space: normal; font-size: .9rem; line-height: 1.55; color: var(--muted-strong, #334155);
    border-left: 3px solid var(--line, #e5e7eb); padding-left: 12px; margin-top: 6px; }
.bl-mail-body p { margin: 0 0 10px; }
.bl-mail-body ul, .bl-mail-body ol { margin: 0 0 10px; padding-left: 22px; }
.bl-mail-body li { margin: 2px 0; }
.bl-fmt-hint { margin: -4px 0 10px; }
.bl-fmt-hint code { padding: 1px 5px; }
.bl-pv-subj { font-weight: 600; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line, #e5e7eb); overflow-wrap: anywhere; }
.bl-pv .bl-mail-body { border-left: 0; padding-left: 0; }

/* Blocked tasks on the workload lists: visibly skippable at a glance. */
.wl-task-blocked { background: rgba(220, 38, 38, .055); border-left: 3px solid rgba(220, 38, 38, .55); border-radius: 6px; }
.wl-task-blocked .wl-task-content { opacity: .75; }
html[data-theme="dark"] .wl-task-blocked { background: rgba(248, 113, 113, .08); }

/* ===== Rankings Playground ===== */
.rp-key { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rp-key input { flex: 1 1 280px; min-width: 220px; }
.rp-run .row { display: flex; gap: 12px; }
.rp-single { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.rp-single input { flex: 1 1 150px; min-width: 130px; }
#rp-single-out ol { margin: 8px 0 0; padding-left: 22px; font-size: .86rem; }
#rp-single-out li { margin: 3px 0; overflow-wrap: anywhere; }

/* ===== Accessibility audit ===== */
.ay-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ay-form input[type="text"] { flex: 1 1 260px; min-width: 220px; }
.ay-issue { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin-bottom: 10px; }
.ay-issue summary { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; cursor: pointer; }
.ay-impact { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .4px; color: #fff; background: var(--ic, #64748b); }
.ay-fix { margin: 10px 0 8px; font-size: .9rem; background: var(--surface-2, #f3f5f8); border-radius: 8px; padding: 9px 12px; }
.ay-critical { border-left: 4px solid #dc2626; }
.ay-serious  { border-left: 4px solid #ea580c; }
.ay-moderate { border-left: 4px solid #d97706; }
.ay-minor    { border-left: 4px solid #94a3b8; }

/* ===== Flow board ===== */
.fl-filter { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.fl-filter input[type="search"] { min-width: 180px; }
.fl-scroll { overflow-x: auto; }
.fl-table th { white-space: nowrap; }
.fl-sort { cursor: pointer; user-select: none; }
.fl-sort:hover { color: var(--ink); text-decoration: underline; }
.fl-table td { padding-top: 7px; padding-bottom: 7px; vertical-align: middle; }
.fl-exp { width: 26px; }
.fl-expand { border: 0; background: none; cursor: pointer; font-size: .9rem; color: var(--muted); padding: 2px 4px; }
.fl-expand:hover { color: var(--ink); }
.fl-client { white-space: nowrap; max-width: 230px; overflow: hidden; text-overflow: ellipsis; }
.fl-client a { display: inline-flex; gap: 7px; align-items: center; color: inherit; font-weight: 600; }
.fl-neverbadge { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: .72rem;
    background: rgba(124,58,237,.12); color: #7c3aed; white-space: nowrap; }
.fl-cell { white-space: nowrap; }
.fl-pill { display: inline-flex; gap: 4px; align-items: center; border-radius: 999px; padding: 3px 4px 3px 10px;
    font-size: .8rem; font-weight: 600; border: 1px solid transparent; }
.fl-pill a { color: inherit; text-decoration: none; }
.fl-pill a:hover { text-decoration: underline; }
.fl-ok   { background: rgba(22,163,74,.10);  color: #15803d; border-color: rgba(22,163,74,.25); }
.fl-warn { background: rgba(217,119,6,.12);  color: #b45309; border-color: rgba(217,119,6,.3); }
.fl-red  { background: rgba(220,38,38,.10);  color: #dc2626; border-color: rgba(220,38,38,.35); }
.fl-off  { background: transparent; color: var(--muted); border-style: dashed; border-color: var(--line-2); font-weight: 400; }
html[data-theme="dark"] .fl-ok   { color: #4ade80; }
html[data-theme="dark"] .fl-warn { color: #fbbf24; }
html[data-theme="dark"] .fl-red  { color: #f87171; }
.fl-run { border: 0; background: none; cursor: pointer; color: inherit; font: inherit; font-weight: 600; padding: 0; }
.fl-run:hover { text-decoration: underline; }
.fl-sorted-desc::after { content: ' ↓'; }
.fl-sorted-asc::after { content: ' ↑'; }
.fl-skipform { display: inline; }
.fl-skip { border: 0; background: none; cursor: pointer; color: inherit; opacity: 0; font-size: .78rem; padding: 0 5px; transition: opacity .12s; }
.fl-pill:hover .fl-skip, .fl-off .fl-skip { opacity: .7; }
.fl-skip:hover { opacity: 1 !important; }
.fl-next { max-width: 280px; }
.fl-allgreen { color: #15803d; font-weight: 600; }
.fl-tools-row td { background: var(--surface-2, #f3f5f8); border-radius: 10px; }
.fl-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 6px 2px; }
.fl-tool { display: inline-flex; gap: 6px; align-items: center; border-radius: 9px; padding: 5px 11px; font-size: .8rem;
    text-decoration: none; border: 1px solid var(--line); color: var(--ink); background: var(--surface, #fff); }
.fl-tool em { font-style: normal; font-weight: 700; font-size: .74rem; }
.fl-tool-ok em    { color: #15803d; }
.fl-tool-warn em  { color: #b45309; }
.fl-tool-stale em { color: #dc2626; }
.fl-tool-never    { border-color: rgba(124,58,237,.5); background: rgba(124,58,237,.07); }
.fl-tool-never em { color: #7c3aed; }
.fl-tool:hover { border-color: var(--line-2); text-decoration: none; }

.sb-source { margin: 4px 2px 0; }
.pf-doc-type, #pf-doc-type { max-width: 190px; }

/* Up Next rows carry their project chip (hidden in the grouped list, where
   the header already says it; shown once a row is promoted out of context). */
.ms-proj-upnext { display: none; }
#upnext-list .ms-proj-upnext { display: inline-flex; }

/* ===== Keyword Ops ===== */
.ko-form { display: flex; gap: 14px; flex-wrap: wrap; align-items: stretch; }
.ko-file { flex: 1 1 280px; display: flex; flex-direction: column; gap: 5px; border: 1px dashed var(--line, #cbd5e1);
    border-radius: 10px; padding: 12px 14px; cursor: pointer; }
.ko-file:hover { border-color: #0891b2; }
.ko-go { flex-basis: 100%; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ko-go input[type="text"] { min-width: 220px; }
.ko-table td { white-space: normal; overflow-wrap: anywhere; vertical-align: top; padding-top: 7px; padding-bottom: 7px; }
.ko-table { margin-bottom: 18px; }
.ko-plan { min-width: 200px; }
.ko-page { margin: 6px 0 2px; font-size: .84rem; }
.ko-plan-acts { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.ko-gen-out { white-space: pre-wrap; font-family: inherit; font-size: .84rem; line-height: 1.5; background: var(--surface-2, #f1f5f9);
    border-radius: 8px; padding: 10px 12px; margin-top: 8px; max-width: 560px; overflow-wrap: anywhere; }
.ko-reports { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; margin: 12px 0 0; flex-basis: 100%; }
.ko-plan summary { cursor: pointer; color: var(--accent, #0d9488); }
.ko-plan ol { margin: 6px 0 0; padding-left: 18px; font-size: .84rem; line-height: 1.5; }
.ko-plan li { margin: 3px 0; }

.gw-pf-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.gw-pf-bar input[type="search"] { min-width: 200px; flex: 0 1 260px; }
.gw-pf-bar select { max-width: 220px; }
.gw-pf-bar .tg-filters { margin-left: 0; }

/* ===== Meta Match ===== */
.mm-table { table-layout: fixed; }
.mm-table th:first-child { width: 24%; }
.mm-table th:last-child { width: 64px; }
.mm-table td { white-space: normal; overflow-wrap: anywhere; vertical-align: top; padding-top: 9px; padding-bottom: 9px; }
.mm-cell .tg-pill { margin-bottom: 4px; }
.mm-diff { font-size: .82rem; margin-top: 4px; line-height: 1.45; }
.mm-k { display: inline-block; min-width: 42px; font-weight: 600; color: var(--muted, #64748b); }
.tg-filters { display: inline-flex; gap: 7px; align-items: center; margin-left: 12px; flex-wrap: wrap; }
.tg-filters input[type="search"] { min-width: 170px; }
.tg-table td { white-space: normal; overflow-wrap: anywhere; padding-top: 7px; padding-bottom: 7px; }
.tg-table tbody tr[data-href] { cursor: pointer; }
.tg-table tbody tr[data-href]:hover { background: color-mix(in srgb, var(--teal) 5%, transparent); }
.tg-path a { font-weight: 600; }
.tg-num { white-space: nowrap !important; }
.tg-pill { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: .74rem; font-weight: 800; }
.tg-pill.tg-down { background: color-mix(in srgb, #dc2626 11%, transparent); }
.tg-pill.tg-up { background: color-mix(in srgb, #16a34a 11%, transparent); }
.tg-was { display: block; color: var(--muted); font-size: .74rem; font-weight: 400; }
.tg-ai-out { margin: 8px 0 12px; padding: 12px 15px; border: 1px solid color-mix(in srgb, #7c3aed 30%, var(--line));
    border-radius: 12px; background: color-mix(in srgb, #7c3aed 5%, var(--surface)); font-size: .9rem; }
.tg-ai-text { margin: 8px 0 0; white-space: pre-wrap; line-height: 1.55; }
.tg-chart-tick { font-size: 10px; font-weight: 700; }
.tg-chart-v { font-size: 12px; font-weight: 800; }
.tg-tiles { margin: 4px 0 14px; }
.tg-tiles .db-pulse-tile { position: relative; }
.tg-tiles .tg-pill { margin: 4px 0 0; align-self: flex-start; }
.tg-chart-wrap { position: relative; }
.tg-readout { position: absolute; top: 8px; left: 0; padding: 6px 11px; border-radius: 9px; background: var(--ink, #0b1220);
    color: #fff; font-size: .78rem; pointer-events: none; white-space: nowrap; box-shadow: 0 8px 22px -8px rgba(9,19,45,.5); z-index: 5; }
.tg-up { color: #15803d; font-weight: 700; }
.tg-down { color: #b91c1c; font-weight: 700; }
.tg-overlays { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 4px 0 8px; font-size: .84rem; }
.tg-overlays label { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.tg-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.tg-chart { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); margin-bottom: 14px; }
.tg-chart-l { font-size: 11px; fill: var(--muted); }
.tg-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 22px; }
@media (max-width: 1000px) { .tg-grid { grid-template-columns: 1fr; } }
.tg-h { margin: 14px 0 8px; font-size: .95rem; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.tg-q { max-width: 260px; overflow-wrap: anywhere; white-space: normal; }
.tg-qtable td { white-space: normal; }
.tg-list { margin: 0; padding-left: 4px; list-style: none; display: flex; flex-direction: column; gap: 5px; font-size: .87rem; }
.tg-serp-row > td { background: color-mix(in srgb, var(--teal) 4%, transparent); }
.tg-serp-out { padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px; font-size: .86rem; white-space: normal; }
.tg-serp-spin { display: inline-block; width: 13px; height: 13px; border: 2px solid var(--teal); border-right-color: transparent;
    border-radius: 50%; vertical-align: -2px; animation: tg-spin .7s linear infinite; }
@keyframes tg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tg-serp-spin { animation: none; } }
.tg-serp-close { margin-left: 8px; }
.tg-serp-out ol { margin: 8px 0 0; padding-left: 26px; display: flex; flex-direction: column; gap: 4px; }
.tg-todo { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tg-todo input[type="text"] { flex: 1; min-width: 200px; }
.tg-note-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.tg-note-form input[type="text"] { flex: 1; min-width: 220px; }
.tg-notes li { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }

/* Growth portfolio + public plan */
.gw-pf-table td { white-space: normal; overflow-wrap: anywhere; vertical-align: top; }
.gw-pf-rank { font-weight: 800; color: var(--teal); }
.gw-pf-client a { font-weight: 700; }
.gw-pf-do { max-width: 260px; }
.gwp-list { display: flex; flex-direction: column; gap: 16px; margin: 26px 0; }
.gwp-card { border: 1px solid var(--line, #e5e7eb); border-radius: 14px; padding: 18px 20px; background: #fff; }
.gwp-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gwp-head h2 { margin: 0; font-size: 1.08rem; flex: 1; min-width: 200px; }
.gwp-rank { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto;
    background: #ecfdf5; color: #047857; font-weight: 800; }
.gwp-effort { padding: 3px 11px; border-radius: 999px; background: #f1f5f9; color: #475569; font-size: .74rem; font-weight: 700; }
.gwp-why { margin: 8px 0 0; color: #475569; }
.gwp-urls { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; font-size: .86rem; }
.gwp-urls code { background: #f1f5f9; border-radius: 6px; padding: 1px 7px; margin-right: 8px; }
.gwp-urls span { color: #64748b; }
.gwp-note { color: #64748b; font-size: .88rem; margin: 20px 0 40px; }

/* Audit brief editor */
.ab-body { width: 100%; font: 500 .92rem/1.6 ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }

/* ===== Review queue ===== */
.rq-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    padding: 12px 2px; border-bottom: 1px solid var(--line); }
.rq-row:last-child { border-bottom: none; }
.rq-main { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 260px; }
.rq-notes { font-style: italic; }
.rq-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rq-state { display: inline-block; align-self: flex-start; padding: 2px 10px; border-radius: 999px; font-size: .72rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .04em; }
.rq-s-queued { background: color-mix(in srgb, #d97706 14%, transparent); color: #b45309; }
.rq-s-active { background: color-mix(in srgb, #2563eb 13%, transparent); color: #1d4ed8; }
.rq-s-ok { background: color-mix(in srgb, #16a34a 14%, transparent); color: #15803d; }
.rq-s-back { background: color-mix(in srgb, #db2777 13%, transparent); color: #be185d; }
.rq-decide { position: relative; }
.rq-decide > summary { list-style: none; cursor: pointer; display: inline-block; }
.rq-decide > summary::-webkit-details-marker { display: none; }
.rq-decide-form { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; width: 320px; max-width: 86vw;
    display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px;
    background: var(--surface); box-shadow: 0 12px 34px -12px rgba(9,19,45,.4); }
.rq-decide-form textarea { width: 100%; font: inherit; font-size: .85rem; border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; }
.rq-decide-btns { display: flex; gap: 8px; }

/* "PeakKR updated" refresh bar */
.pk-update-bar { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 300;
    display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 999px;
    background: var(--ink, #0b1220); color: #fff; font-size: .88rem; box-shadow: 0 14px 40px -12px rgba(9,19,45,.5); }
.pk-update-bar .pk-update-go { border: 0; border-radius: 999px; padding: 6px 14px; font: inherit; font-weight: 700;
    background: var(--teal, #0d9488); color: #fff; cursor: pointer; }
.pk-update-bar .pk-update-x { border: 0; background: none; color: rgba(255,255,255,.7); font-size: 1.1rem; cursor: pointer; }
.pk-update-bar .pk-update-x:hover { color: #fff; }

/* ===== Client broadcast ===== */
.bc-label { display: block; font-size: .85rem; font-weight: 600; color: var(--muted); margin-bottom: 10px; }
.bc-label input[type="text"], .bc-label textarea { display: block; width: 100%; margin-top: 4px; font: inherit;
    border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; }
.bc-fields { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 2px 0 16px; }
.bc-field { cursor: pointer; background: var(--surface-2); border: 1px solid var(--line); border-radius: 7px;
    padding: 2px 8px; font-size: .8rem; }
.bc-field:hover { border-color: var(--teal); color: var(--teal); }
.bc-aud-h { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 1rem; margin: 0 0 8px; }
.bc-aud-h input[type="search"] { margin-left: auto; min-width: 200px; }
.bc-aud { max-height: 300px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; padding: 6px 10px; margin-bottom: 14px; }
.bc-aud-row { display: flex; align-items: center; gap: 9px; padding: 5px 4px; border-bottom: 1px solid var(--line); cursor: pointer; }
.bc-aud-row:last-child { border-bottom: none; }
.bc-aud-name { font-weight: 600; }
.bc-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bc-test-sel { max-width: 220px; }

/* ===== Task ↔ tool link ===== */
.task-toolcard { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; padding: 12px 15px;
    border: 1px solid color-mix(in srgb, var(--teal) 35%, var(--line)); border-radius: 12px;
    background: color-mix(in srgb, var(--teal) 7%, var(--surface)); }
.task-toolcard-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; flex: 0 0 auto;
    background: color-mix(in srgb, var(--teal) 15%, transparent); color: var(--teal); font-size: 1.1rem; }
.task-toolcard-txt { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 200px; }
.task-toolcard-edit { position: relative; }
.task-toolcard-edit > summary { cursor: pointer; list-style: none; color: var(--muted); padding: 4px 6px; border-radius: 8px; }
.task-toolcard-edit > summary::-webkit-details-marker { display: none; }
.task-toolcard-edit > summary:hover { background: rgba(9,19,45,.06); color: var(--ink); }
.task-toolcard-form { position: absolute; right: 0; top: calc(100% + 4px); z-index: 50; display: flex; gap: 6px;
    padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
    box-shadow: 0 10px 30px -12px rgba(9,19,45,.35); }
.task-toolhint { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 8px 13px;
    border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); font-size: .88rem; }

/* ===== Outbound Prospector — forms breathe =====
   (pros- prefix: .pr-card is already a flex row elsewhere — the second
   prefix collision caught on this page family; always grep first.) */
.pros-card { display: block; padding: 20px 22px; margin-top: 16px; }
.pros-card h2 { margin: 0 0 12px; }
.pros-card > p.muted { margin: 0 0 16px; }
.pros-form { display: grid; gap: 16px; justify-items: start; }
.pros-form .row { display: flex; gap: 14px; flex-wrap: wrap; width: 100%; }
.pros-form .row .field { flex: 1 1 200px; margin: 0; }
.pros-form .field { display: grid; gap: 5px; width: 100%; }
.pros-form .field > span { font-size: .82rem; font-weight: 600; color: var(--muted); }
.pros-form input[type="text"], .pros-form input[type="password"], .pros-form select, .pros-form textarea { width: 100%; }
.pros-form .btn { justify-self: start; }
.pros-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.pros-list { display: grid; width: 100%; }
.pros-biz { display: grid; grid-template-columns: 20px 40px minmax(260px, 1.1fr) 1.4fr; gap: 14px; align-items: start;
    padding: 13px 4px; border-bottom: 1px solid var(--line); cursor: pointer; }
.pros-biz:last-child { border-bottom: none; }
.pros-biz:hover { background: color-mix(in srgb, var(--teal) 4%, transparent); }
.pros-biz input[type="checkbox"] { margin-top: 3px; }
.pros-main { display: grid; gap: 2px; min-width: 0; }
.pros-main strong { font-size: .95rem; }
.pros-sub { font-size: .8rem; color: var(--muted); overflow-wrap: anywhere; }
.pros-sub a { color: var(--teal); }
.pros-grade { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; font-weight: 800;
    font-size: 1rem; background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--muted); }
.pros-grade[data-g="A"] { background: #16a34a22; color: #15803d; }
.pros-grade[data-g="B"] { background: #65a30d22; color: #4d7c0f; }
.pros-grade[data-g="C"] { background: #d9770622; color: #b45309; }
.pros-grade[data-g="D"] { background: #ea580c22; color: #c2410c; }
.pros-grade[data-g="F"] { background: #dc262622; color: #b91c1c; }
.pros-pains { display: flex; flex-wrap: wrap; gap: 5px; align-content: start; min-width: 0; }
.pros-chip { font-size: .76rem; padding: 3px 9px; border-radius: 999px; border: 1px solid color-mix(in srgb, #d97706 45%, var(--line));
    background: color-mix(in srgb, #d97706 8%, var(--surface)); color: var(--ink); overflow-wrap: anywhere; }
.pros-angle { flex-basis: 100%; font-size: .82rem; font-style: italic; color: var(--muted); margin-top: 3px; }
.pros-em-fix { border: none; background: none; cursor: pointer; font-size: .78rem; padding: 0 2px; opacity: .55; }
.pros-em-fix:hover { opacity: 1; }
.pros-mailprev { white-space: pre-wrap; font-family: inherit; font-size: .8rem; margin: 6px 0 4px; padding: 10px 12px;
    border-radius: 10px; border: 1px solid var(--line); background: color-mix(in srgb, var(--ink) 3%, var(--surface)); overflow-wrap: anywhere; }
.blr-editbox { display: grid; gap: 8px; margin-top: 10px; padding: 12px 14px; border: 1px dashed var(--line); border-radius: 10px; }
.blr-editbox input, .blr-editbox textarea { width: 100%; }
.blr-edit { margin-left: 8px; }
.pros-known { font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #dc262618; color: #b91c1c; vertical-align: 2px; }
.pros-known.is-lead { background: color-mix(in srgb, var(--teal) 12%, transparent); color: var(--teal); }
@media (max-width: 860px) { .pros-biz { grid-template-columns: 20px 36px 1fr; } .pros-pains { grid-column: 2 / -1; } }

/* ===== Rankings Playground — results table ===== */
/* .dt-table forces nowrap on cells, which beats .tg-q's wrap rule and lets a
   long keyword + inline API error paint straight across the neighbor columns.
   Playground tables must wrap. (rpg- prefix: .rp-table belongs to the admin
   report tables and page-compare — do NOT restyle it.) */
.rpg-table td { white-space: normal; vertical-align: top; overflow-wrap: anywhere; }
.rpg-table td.tg-q { min-width: 200px; max-width: 320px; }
.rpg-table td:nth-child(2), .rpg-table td:nth-child(3), .rpg-table td:nth-child(4) { white-space: nowrap; }
.rpg-err { display: block; margin-top: 3px; color: var(--muted); font-size: .8rem; }
.rpg-loc { display: block; margin-top: 2px; color: var(--muted); font-size: .78rem; }

/* ===== Rankings Playground — distribution bars + sent reports ===== */
.rp-bars { display: grid; gap: 7px; margin: 14px 0; max-width: 620px; }
.rp-bar-row { display: grid; grid-template-columns: 92px 1fr 128px; align-items: center; gap: 10px; font-size: .86rem; }
.rp-bar-lbl { font-weight: 600; }
.rp-bar-track { height: 20px; border-radius: 7px; overflow: hidden; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.rp-bar { display: block; height: 100%; min-width: 3px; border-radius: 7px; background: var(--bc, var(--teal)); transition: width .4s ease; }
.rp-bar-n { color: var(--muted); white-space: nowrap; }
.rp-reports { display: grid; gap: 0; }
.rp-report-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 8px 2px; border-bottom: 1px solid var(--line); font-size: .9rem; }
.rp-report-row:last-child { border-bottom: none; }
.rp-headline { display: flex; gap: 18px; flex-wrap: wrap; align-items: baseline; margin: 10px 0 2px; }
.rp-headline strong { font-size: 1.25rem; }

/* Rankings Playground: weekly auto-check card. */
.rpw-card.rpw-on { border-left: 4px solid #16a34a; }
.rpw-badge { font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  background: var(--surface-2); border-radius: 999px; padding: 3px 10px; margin-left: 8px; vertical-align: middle; }
.rpw-on .rpw-badge { color: #16a34a; background: color-mix(in srgb, #16a34a 12%, transparent); }
.rpw-auto { color: #16a34a; font-weight: 700; }
.rpw-controls { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; margin-bottom: 10px; }
.rpw-pages-sel { padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel, #fff); color: var(--ink); font-size: .85rem; width: auto; max-width: 160px; margin-left: 6px; }
.rpw-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.rpw-table th { text-align: left; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 7px 10px; border-bottom: 1px solid var(--line-2); }
.rpw-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); }
.rpw-table tfoot td { border-bottom: none; padding-top: 10px; }
.rpw-table .rpw-num { text-align: right; font-variant-numeric: tabular-nums; }
.rpw-row-on td { background: color-mix(in srgb, #16a34a 5%, transparent); }
.rpw-live { font-style: normal; color: #d97706; font-weight: 700; }
.rpw-est { display: flex; flex-wrap: wrap; gap: 8px 34px; align-items: flex-start; padding: 10px 14px; margin-top: 10px; background: var(--surface-2); }
.rpw-est-block { display: grid; gap: 3px; }
.rpw-est-worst strong, .rpw-est-worst .rpw-est-row { font-size: .82rem; }
.rpw-wins a { text-decoration: none; color: inherit; font-size: .86rem; }
.rpw-wins a:hover { text-decoration: underline; }
.rpw-delta { font-style: normal; color: #16a34a; font-weight: 800; }
.rpw-newrk { font-style: normal; color: #2563eb; font-weight: 700; font-size: .78rem; }
.rpw-status { margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.rpw-warn { color: #d97706; font-weight: 700; }
.rpw-rollup { display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: baseline; margin: 2px 0 12px; padding: 12px 16px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.rpw-roll { display: inline-flex; align-items: baseline; gap: 7px; }
.rpw-roll strong { font-size: 1.35rem; line-height: 1; }
.rpw-roll em { font-style: normal; font-size: .78rem; color: var(--muted); }
.rpw-roll-up strong { color: #16a34a; }
.rpw-roll-new strong { color: #2563eb; }
.rpw-manage > summary { cursor: pointer; list-style: none; margin: 4px 0 10px; }
.rpw-manage > summary::-webkit-details-marker { display: none; }
.rpw-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0 0 8px; }
.rpw-tools .sh-search { margin-left: 0; min-width: 260px; }
.rpw-scroll { max-height: 430px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.rpw-scroll .rpw-table th { position: sticky; top: 0; background: var(--surface); z-index: 2; }
.rpw-scroll .rpw-table tfoot td { position: sticky; bottom: 0; background: var(--surface); }
.rpw-fast { margin: 0 0 10px; }
.rpw-fast-url { cursor: copy; user-select: all; padding: 3px 8px; border: 1px dashed var(--line-2); border-radius: 8px; word-break: break-all; }
.rph-table .rph-row { cursor: pointer; }
.rph-table .rph-row:hover td { background: color-mix(in srgb, var(--primary, #ff5a4e) 5%, transparent); }
.rph-go { color: var(--muted); font-weight: 700; }
.rph-push form { margin: 0; }
/* Demo Studio */
.dms-new { padding: 16px 18px; display: grid; gap: 10px; margin: 0 0 16px; }
.dms-pages { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.dms-page { font-size: .86rem; display: inline-flex; align-items: center; gap: 5px; }
.dms-page code { font-size: .72rem; color: var(--muted); }
.dms-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 4px 0 6px; }
.dms-head-main { flex: 1; min-width: 260px; }
.dms-title-in { width: 100%; font: 800 1.4rem/1.2 var(--display, inherit); border: 1px solid transparent; border-radius: 8px; padding: 4px 6px; background: transparent; color: var(--ink); }
.dms-title-in:hover, .dms-title-in:focus { border-color: var(--line); background: var(--panel, #fff); }
.dms-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dms-status { margin: 0 0 10px; }
.dms-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .dms-grid { grid-template-columns: 1fr; } }
.dms-stage-card { padding: 12px; }
.dms-stage-wrap { position: relative; overflow: hidden; border-radius: 10px; background: #0b1120; }
.dms-stage { position: absolute; top: 0; left: 0; width: 1280px; height: 720px; transform-origin: 0 0; background: #fff; }
.dms-stage iframe { width: 1280px; height: 720px; border: none; display: block; background: #fff; }
.dms-overlay { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.dms-spot { position: absolute; border-radius: 10px; box-shadow: 0 0 0 4px #f59e0b, 0 0 0 9999px rgba(9, 19, 45, .38); opacity: 0;
  transition: left .45s ease, top .45s ease, width .45s ease, height .45s ease, opacity .25s ease; }
.dms-spot.on { opacity: 1; }
.dms-cursor { position: absolute; left: 640px; top: 360px; transition: left .65s cubic-bezier(.3,.7,.2,1), top .65s cubic-bezier(.3,.7,.2,1); z-index: 3; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.dms-ripple { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 3px solid #f59e0b; opacity: 0; z-index: 2; }
.dms-ripple.on { animation: dms-ripple .55s ease-out; }
@keyframes dms-ripple { from { opacity: 1; transform: scale(.6); } to { opacity: 0; transform: scale(3.2); } }
.dms-caption { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%) translateY(14px); max-width: 980px; padding: 14px 26px;
  background: rgba(9, 19, 45, .9); color: #fff; font: 600 26px/1.35 'Inter', system-ui, sans-serif; border-radius: 14px; text-align: center;
  opacity: 0; transition: opacity .3s ease, transform .3s ease; z-index: 4; }
.dms-caption.on { opacity: 1; transform: translateX(-50%) translateY(0); }
.dms-toast { position: absolute; top: 18px; right: 18px; background: #16a34a; color: #fff; font: 700 14px/1.4 'Inter', sans-serif; padding: 8px 14px; border-radius: 10px; opacity: 0; transition: opacity .25s; z-index: 5; }
.dms-toast.on { opacity: 1; }
.dms-card { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; background: linear-gradient(135deg, #0b1120, #1e293b);
  color: #fff; opacity: 0; transition: opacity .5s ease; z-index: 6; }
.dms-card.on { opacity: 1; }
.dms-card strong { display: block; font: 800 54px/1.15 'Plus Jakarta Sans', 'Inter', sans-serif; max-width: 1000px; padding: 0 40px; }
.dms-editor { padding: 12px 14px; max-height: 80vh; overflow: auto; }
.dms-editor-head { display: flex; align-items: center; gap: 10px; }
.dms-editor-head .btn { margin-left: auto; }
.dms-steps { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.dms-step { border: 1px solid var(--line); border-radius: 10px; padding: 7px 9px; background: var(--surface); }
.dms-step.now { border-color: #f59e0b; box-shadow: 0 0 0 2px color-mix(in srgb, #f59e0b 35%, transparent); }
.dms-step-head { display: flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 700; }
.dms-step-head .muted { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.dms-step-tools { margin-left: auto; display: inline-flex; gap: 2px; }
.dms-step-tools button { border: none; background: none; color: var(--muted); cursor: pointer; padding: 2px 5px; border-radius: 5px; }
.dms-step-tools button:hover { color: var(--ink); background: var(--surface-2); }
.dms-cap { width: 100%; margin-top: 5px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel, #fff); color: var(--ink); font: inherit; font-size: .86rem; }
#dms-scan { position: absolute; left: -20000px; top: 0; width: 1280px; height: 720px; border: 0; visibility: hidden; }
.dms-site { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.dms-site label { font-size: .9rem; cursor: pointer; }
.dms-other { display: grid; gap: 8px; padding: 10px 12px; border: 1px dashed var(--line-2); border-radius: 10px; }
.dms-ext { padding: 16px 18px; }
.dms-ext-state { font-weight: 700; margin: 6px 0 10px; }
.dms-ext-ok { color: #16a34a; }
.dms-ext-bad { color: #b45309; }
.dms-ext-how { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
/* Recording: the stage alone, as large as the window allows (crop target). */
body.dms-rec { overflow: hidden; }
body.dms-rec .dms-stage-card { position: fixed; inset: 0; z-index: 10000; margin: 0; padding: 0; border-radius: 0; background: #000; display: grid; place-items: center; }
body.dms-rec .dms-stage-card > p { display: none; }
body.dms-rec .dms-stage-wrap { width: min(100vw, calc(100vh * 16 / 9)); border-radius: 0; }

/* UX/UI audit */
.uxa-run { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px 16px; margin: 0 0 16px; }
.uxa-run input[type=url] { flex: 1 1 420px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel, #fff); color: var(--ink); font: inherit; }
.uxa-run select { padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel, #fff); color: var(--ink); max-width: 280px; }
.uxa-grade { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; font-weight: 800; font-size: .8rem; color: #fff; background: var(--gc); margin-right: 4px; }
.uxa-head { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding: 16px 18px; margin: 0 0 12px; }
.uxa-score { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; align-content: center; border: 6px solid var(--gc); flex: 0 0 auto; }
.uxa-score strong { font-size: 1.8rem; line-height: 1; color: var(--gc); }
.uxa-score span { font-size: .7rem; color: var(--muted); }
.uxa-head-main { flex: 1; min-width: 240px; }
.uxa-title { margin: 0; font-size: 1.25rem; }
.uxa-title a { color: inherit; text-decoration: none; }
.uxa-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.uxa-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 18px; align-items: start; }
@media (max-width: 1100px) { .uxa-grid { grid-template-columns: minmax(0, 1fr); } }
.uxa-preview-col { position: sticky; top: 74px; }
@media (max-width: 1100px) { .uxa-preview-col { position: static; } }
.uxa-preview { padding: 12px; }
.uxa-preview-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 8px; }
.uxa-frame-wrap { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.uxa-frame-wrap iframe { border: none; transform-origin: 0 0; display: block; background: #fff; }
.uxa-summary { padding: 12px 16px; margin: 0 0 14px; border-left: 4px solid #7c3aed; }
.uxa-summary p { margin: 6px 0 0; }
.uxa-sug { padding: 12px 14px; margin: 0 0 10px; border-left: 4px solid var(--line-2); }
.uxa-sug.uxa-p1 { border-left-color: #dc2626; } .uxa-sug.uxa-p2 { border-left-color: #d97706; } .uxa-sug.uxa-p3 { border-left-color: #64748b; }
.uxa-sug-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.uxa-prio { font-size: .7rem; font-weight: 800; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
.uxa-chip { font-size: .72rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.uxa-effort { color: #15803d; border-color: color-mix(in srgb, #16a34a 35%, var(--line)); }
.uxa-why { margin: 6px 0 2px; }
.uxa-how { margin: 4px 0 0; font-size: .9rem; }
.uxa-area { margin: 14px 0 6px; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.uxa-find { padding: 10px 12px; margin: 0 0 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.uxa-find p { margin: 6px 0 0; font-size: .9rem; }
.uxa-find-high { border-left: 4px solid #dc2626; } .uxa-find-med { border-left: 4px solid #d97706; } .uxa-find-low { border-left: 4px solid #94a3b8; }
.uxa-sev { font-size: .7rem; font-weight: 800; border-radius: 6px; padding: 1px 6px; }
.uxa-sev-high { color: #dc2626; background: color-mix(in srgb, #dc2626 10%, transparent); }
.uxa-sev-med { color: #b45309; background: color-mix(in srgb, #d97706 12%, transparent); }
.uxa-sev-low { color: #64748b; background: color-mix(in srgb, #64748b 12%, transparent); }
.uxa-jump { font: 700 .72rem/1.5 inherit; color: #fff; background: #dc2626; border: none; border-radius: 5px; padding: 1px 7px; cursor: pointer; margin-right: 4px; }
.uxa-jump-off { background: #64748b; cursor: default; }
.uxa-taskbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; margin-top: 14px; position: sticky; bottom: 10px; z-index: 5; }
.uxa-copy { cursor: copy; word-break: break-all; }
.pros-compliance { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin: 8px 0; background: var(--surface-2); }
.pros-compliance-warn { border-color: color-mix(in srgb, #d97706 55%, var(--line)); }
.pros-warn-tag { font-style: normal; font-size: .72rem; font-weight: 800; color: #d97706; }
.pros-supp { margin-top: 12px; }
.pros-supp > summary { cursor: pointer; }
.rph-scroll { max-height: 70vh; }
.rph-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 10px; }
.rph-tools .sh-search { margin-left: 0; min-width: 280px; }
.rph-range { margin-left: auto; }
.rph-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; }
.rph-push .btn { white-space: nowrap; padding: 4px 10px; font-size: .78rem; }
.rph-row:hover .rph-go { color: var(--primary, #ff5a4e); }
.rpw-est-rows { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.rpw-est-row { display: inline-flex; align-items: baseline; gap: 6px; font-size: .88rem; }
.rpw-est-row i { width: 9px; height: 9px; border-radius: 50%; align-self: center; }
.rpw-est-row em { font-style: normal; font-size: .76rem; color: var(--muted); }

/* Sheets index v3: calm cards — icon tile, one-line name, kind pill,
   a tall rounded status bar with a real legend, hover reveals Open. */
.sh3-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; margin: 4px 0 8px; }
.sh3-card { display: flex; flex-direction: column; gap: 12px; padding: 18px 18px 14px; text-decoration: none; color: inherit;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.sh3-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--kc) 45%, var(--line)); text-decoration: none; }
.sh3-head { display: flex; align-items: center; gap: 11px; min-width: 0; }
.sh3-ic { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; font-size: 1.25rem; border-radius: 12px;
  background: color-mix(in srgb, var(--kc) 12%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--kc) 22%, var(--line)); }
.sh3-name { font-size: 1.04rem; min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh3-kind { flex: 0 0 auto; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--kc); background: color-mix(in srgb, var(--kc) 10%, transparent); border-radius: 999px; padding: 4px 10px; }
.sh3-bar { display: flex; gap: 3px; height: 10px; border-radius: 6px; overflow: hidden; }
.sh3-bar i { border-radius: 3px; min-width: 8px; }
.sh3-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.sh3-leg { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--muted); }
.sh3-leg i { width: 8px; height: 8px; border-radius: 50%; background: var(--oc); flex: 0 0 auto; }
.sh3-leg em { font-style: normal; font-weight: 700; color: var(--ink); }
.sh3-leg-more { color: var(--muted); }
.sh3-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); }
.sh3-open { font-size: .82rem; font-weight: 700; color: var(--kc); opacity: 0; transform: translateX(-4px); transition: opacity .15s ease, transform .15s ease; }
.sh3-card:hover .sh3-open { opacity: 1; transform: none; }
.sh3-promo { display: block; margin: 14px 0 0; font-size: .88rem; color: var(--muted); text-decoration: none; padding: 10px 14px;
  border: 1px dashed var(--line-2); border-radius: 12px; }
.sh3-promo strong { color: var(--ink); }
.sh3-promo:hover { border-color: var(--line-2); background: var(--surface-2); text-decoration: none; }
.sh3-promo-go { font-weight: 700; color: var(--primary, #ff5a4e); white-space: nowrap; }

/* Sheets: column editor panel. */
.sh-coled { padding: 14px 16px; margin: 0 0 14px; }
.sh-coled-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 10px; }
.sh-coled-row { display: grid; grid-template-columns: auto 240px auto auto 1fr; gap: 8px 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.sh-coled-row:last-child { border-bottom: none; }
.sh-coled-move { display: inline-flex; flex-direction: column; gap: 1px; }
.sh-coled-move button { border: none; background: none; color: var(--muted); cursor: pointer; font-size: .6rem; line-height: 1; padding: 2px 4px; }
.sh-coled-move button:hover { color: var(--ink); }
.sh-coled-label { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel, #fff); color: var(--ink); font: inherit; font-size: .9rem; }
.sh-coled-type { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel, #fff); color: var(--ink); font-size: .85rem; }
.sh-coled-typetag { font-size: .75rem; font-weight: 700; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; cursor: help; }
.sh-coled-x { border: none; background: none; color: var(--muted); font-size: 1.1rem; cursor: pointer; padding: 2px 8px; border-radius: 6px; }
.sh-coled-x:hover { color: #dc2626; background: color-mix(in srgb, #dc2626 10%, transparent); }
.sh-coled-opts { grid-column: 1 / -1; padding-left: 34px; }
.sh-coled-optlist { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 6px; }
.sh-coled-opt { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 999px; padding: 3px 7px; background: var(--surface); }
.sh-coled-opt input[type=color] { width: 20px; height: 20px; border: none; background: none; padding: 0; cursor: pointer; }
.sh-coled-v { border: none; background: none; color: var(--ink); font-size: .84rem; width: 150px; outline: none; }
.sh-coled-ox { border: none; background: none; color: var(--muted); cursor: pointer; padding: 0 2px; }
.sh-coled-ox:hover { color: #dc2626; }
.sh-coled-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
@media (max-width: 760px) { .sh-coled-row { grid-template-columns: auto 1fr auto auto; } .sh-coled-opts { padding-left: 0; } }

/* Deliverables: per-month / per-quarter window picker + quarter chip. */
.dlv-period { font-size: .8rem; padding: 4px 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel, #fff); color: var(--ink); }
.pls-dlv-per { font-style: normal; font-size: .68rem; color: var(--muted); margin-left: 3px; }

/* Internal links: URL/anchor search beside the priority tabs. */
.il-search { margin-left: auto; min-width: 230px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel, #fff); color: var(--ink); font: inherit; font-size: .86rem; }

/* Page Fit editing comfort: bigger type in the slot boxes (14px was squinty,
   worst in dark mode), roomier default height, and the whole-page toggle. */
.pf-slot-text { font-size: .95rem; min-height: 72px; }
.pf-brief { font-size: 13px; }
html[data-theme="dark"] .pf-slot-text::placeholder, html[data-theme="dark"] .pf-brief::placeholder { color: #8c9ab5; }
.pf-gdoc-full { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; color: var(--muted); cursor: pointer; }

/* Up next popover: whose task is it — dot + project under the task text. */
.ab-menu-txt { white-space: normal; }
.ab-menu-proj { display: flex; align-items: center; gap: 5px; font-size: .74rem; color: var(--muted); margin-top: 1px; min-width: 0; }
.ab-menu-proj .ms-proj-dot { width: 7px; height: 7px; }

/* ===== Contracts / e-sign (.esg-*) ===== */
.esg-grid > main > .card, .esg-grid > aside > .card { padding: 18px 20px; }
.esg-blank { background: rgba(250,202,44,.35); color: inherit; border-radius: 4px; padding: 0 3px; }
.esg-hero-links { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.esg-new { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.esg-new .field { flex: 1 1 200px; margin: 0; }
.esg-new-hint { flex-basis: 100%; margin: 0; }
.esg-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 10px; }
.esg-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink); text-decoration: none; font-size: .85rem; background: var(--surface); }
.esg-chip span { color: var(--muted); font-variant-numeric: tabular-nums; }
.esg-chip.is-on { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.esg-table { width: 100%; border-collapse: collapse; }
.esg-table th { text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 6px 10px; border-bottom: 1px solid var(--line); }
.esg-table td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.esg-table tr:last-child td { border-bottom: 0; }
.esg-num { text-align: right; font-variant-numeric: tabular-nums; }
.esg-list { overflow-x: auto; }
.esg-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .74rem; font-weight: 700; background: rgba(100,116,139,.14); color: #475569; margin-right: 4px; white-space: nowrap; }
.esg-st-sent   { background: rgba(37,99,235,.13); color: #1d4ed8; }
.esg-st-viewed { background: rgba(217,119,6,.15); color: #b45309; }
.esg-st-signed, .esg-pay-paid { background: rgba(22,163,74,.15); color: #15803d; }
.esg-st-void   { background: rgba(220,38,38,.12); color: #b91c1c; }
.esg-pay-due, .esg-pay-pending { background: rgba(217,119,6,.15); color: #b45309; }
html[data-theme="dark"] .esg-badge { filter: brightness(1.35); }
.esg-safe { margin-top: 18px; }
.esg-safe h2, .esg-safe h3 { font-size: 1rem; margin: 0 0 8px; }
.esg-safe ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.esg-safe li { line-height: 1.5; }

.esg-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
@media (max-width: 960px) { .esg-grid { grid-template-columns: 1fr; } }
.esg-main, .esg-side { display: grid; gap: 16px; min-width: 0; }
.esg-h { font-size: 1rem; margin: 18px 0 10px; display: flex; align-items: center; gap: 8px; }
.esg-form > .esg-h:first-of-type { margin-top: 0; }
.esg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.esg-row-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 700px) { .esg-row, .esg-row-4 { grid-template-columns: 1fr; } }
.esg-note { margin: -4px 0 10px; }
.esg-check { display: flex; gap: 8px; align-items: flex-start; font-size: .9rem; margin: 6px 0 10px; line-height: 1.45; }
.esg-check input { margin-top: 3px; flex: 0 0 auto; }
.esg-body-input { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.55; margin-bottom: 10px; }
.esg-fields { margin: 0 0 14px; }
.esg-fields-grid { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; margin: 10px 0; }
.esg-fields-grid code { font-size: .8rem; }
.esg-send h3, .esg-trail h3, .esg-fields-card h3 { margin: 0 0 8px; font-size: 1rem; display: flex; gap: 8px; align-items: center; }
.esg-problems { margin: 0 0 8px; padding-left: 18px; color: var(--danger); font-size: .88rem; display: grid; gap: 4px; }
.esg-link { display: flex; gap: 6px; margin-bottom: 6px; }
.esg-link input { flex: 1; min-width: 0; font-size: .8rem; }
.esg-void { margin-top: 10px; }
.esg-signed-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.esg-ok { color: var(--success); }
.esg-bad { color: var(--danger); }
.esg-events { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.esg-events li { display: flex; gap: 8px; font-size: .88rem; line-height: 1.4; }
.esg-ev-ic { flex: 0 0 22px; text-align: center; }
.esg-hash code { word-break: break-all; font-size: .72rem; }
.esg-tpl summary { cursor: pointer; }
.esg-tpl form { margin-top: 12px; }
.esg-tpl-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* The contract document itself (staff preview + client page). */
.esg-doc { background: var(--surface); color: var(--ink); line-height: 1.65; font-size: 15px; }
.esg-doc h2 { font-size: 1.35rem; margin: 0 0 12px; }
.esg-doc h3 { font-size: 1.05rem; margin: 22px 0 6px; }
.esg-doc h4 { font-size: .95rem; margin: 16px 0 4px; }
.esg-doc p { margin: 0 0 12px; }
.esg-doc ul, .esg-doc ol { margin: 0 0 12px; padding-left: 22px; }
.esg-doc li { margin: 3px 0; }
.esg-doc hr { border: 0; border-top: 1px solid var(--line-2); margin: 18px 0; }
.esg-preview .esg-doc { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 24px 28px; max-height: 720px; overflow: auto; }
.esg-sigblock { margin-top: 14px; }
.esg-sig-typed { font-family: "Dancing Script", "Brush Script MT", "Segoe Script", "Snell Roundhand", "Apple Chancery", cursive; font-size: 2rem; line-height: 1.2; color: var(--ink); min-height: 2.4rem; padding: 4px 0; overflow-wrap: anywhere; }
.esg-sig-img { display: block; max-width: 280px; width: 100%; height: auto; margin: 4px 0; }
html[data-theme="dark"] .esg-sig-img { filter: invert(1) hue-rotate(180deg); }
.esg-leadrow { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); font-size: .88rem; }
.esg-leadnew { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.esg-leadnew select { flex: 1 1 140px; min-width: 0; }

/* Public signing page. */
.esg-pub { display: grid; gap: 16px; }
.esg-pub-head h1 { font-size: 1.6rem; margin: 2px 0 6px; line-height: 1.25; }
.esg-pub-head p { margin: 0; }
.esg-trust { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .82rem; color: var(--muted); padding: 10px 14px; border-radius: var(--radius-sm); background: var(--surface-2); }
.esg-trust span { display: inline-flex; gap: 6px; align-items: center; }
.esg-done { padding: 12px 16px; border-radius: var(--radius-sm); background: rgba(22,163,74,.1); border: 1px solid rgba(22,163,74,.35); line-height: 1.5; }
.esg-paybox { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; padding: 14px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line-2); background: var(--surface); }
.esg-paybox p { margin: 4px 0 0; max-width: 460px; }
.esg-doc-pub { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 28px 30px; }
@media (max-width: 600px) { .esg-doc-pub { padding: 18px 16px; } .esg-preview .esg-doc { padding: 16px; } }
.esg-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .esg-parties { grid-template-columns: 1fr; } }
.esg-party { border-top: 2px solid var(--ink); padding-top: 8px; display: grid; gap: 2px; }
.esg-sig-empty { color: var(--muted); font-style: italic; min-height: 2.4rem; padding: 8px 0; }
.esg-signform { border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 18px 20px; background: var(--surface); display: grid; gap: 4px; }
.esg-signform h2 { font-size: 1.15rem; margin: 0 0 8px; }
.esg-sigtabs { display: inline-flex; gap: 4px; margin: 6px 0 8px; }
.esg-sigtab { border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink); border-radius: 999px; padding: 4px 14px; font-size: .85rem; cursor: pointer; }
.esg-sigtab.is-on { border-color: var(--primary); background: var(--surface); box-shadow: inset 0 0 0 1px var(--primary); }
.esg-sigpad { border: 1px dashed var(--line-2); border-radius: var(--radius-xs); padding: 8px 12px; margin-bottom: 8px; }
.esg-sigpad canvas { width: 100%; height: auto; max-height: 160px; display: block; background: #fff; border-radius: 6px; cursor: crosshair; }
.esg-consent { font-size: .86rem; }
.esg-signbtn { justify-self: start; }
.esg-cert { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 18px; font-size: .86rem; }
.esg-cert h2 { font-size: 1rem; margin: 0 0 10px; }
.esg-cert dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 12px; }
.esg-cert dt { color: var(--muted); }
.esg-cert dd { margin: 0; overflow-wrap: anywhere; }
.esg-cert code { font-size: .74rem; word-break: break-all; }
.esg-gone { text-align: center; padding: 40px 0; }
.esg-provs { display: grid; gap: 8px; }
.esg-row-tight { display: flex; gap: 6px; }
.esg-row-tight select { flex: 1; min-width: 0; }
.esg-secure { display: flex; gap: 8px; align-items: flex-start; color: var(--muted); margin: 4px 0 10px; line-height: 1.45; }
.esg-autopay { border: 1px solid var(--line-2); border-radius: var(--radius-xs); padding: 10px 12px; margin: 4px 0 8px; background: var(--surface-2); }
.esg-autopay .esg-check { margin: 6px 0 4px; }
.esg-prov { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); cursor: pointer; line-height: 1.45; }
.esg-prov input { margin-top: 4px; }
.esg-prov.is-on { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
/* Phones: the floating PDF button sat on top of the agency name in every public page's header. */
@media (max-width: 600px) { .public-head .public-pdf-btn { position: static; margin: 10px auto 0; display: flex; width: max-content; } }
@media print {
    .esg-doc-pub { border: 0; padding: 0; }
    .esg-cert { break-inside: avoid; }
    .esg-parties { break-inside: avoid; }
}

/* ===== Live Chat (.lvc-*) ===== */
.lvc-list, .lvc-form, .lvc-new, .lvc-warn { padding: 18px 20px; }
.lvc-list + .lvc-form { margin-top: 16px; }
.lvc-unblock summary { cursor: pointer; list-style: none; }
.lvc-unblock summary::-webkit-details-marker { display: none; }
.lvc-unblock summary .lvc-h { margin: 0; flex-wrap: wrap; }
.lvc-unblock[open] summary { margin-bottom: 8px; }
.lvc-allow { display: grid; gap: 6px; padding: 10px 12px; border-radius: var(--radius-xs); background: var(--surface-2); margin: 8px 0 12px; font-size: .88rem; }
.lvc-allow > div { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.lvc-allow > div > span:first-child { min-width: 140px; }
.lvc-allow code { overflow-wrap: anywhere; }
.lvc-unblock-h { font-size: .92rem; margin: 12px 0 4px; }
.lvc-steps { margin: 0 0 6px; padding-left: 20px; display: grid; gap: 4px; font-size: .88rem; line-height: 1.5; }
.ubk { margin-top: 10px; }
.ubk summary { font-weight: 600; }
.ubk-allow { display: grid; gap: 6px; padding: 10px 12px; border-radius: var(--radius-xs); background: var(--surface-2); margin: 10px 0; font-size: .86rem; }
.ubk-allow > div { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.ubk-allow > div > span:first-child { min-width: 130px; }
.ubk-h { font-size: .9rem; margin: 10px 0 4px; }
.ubk-steps { margin: 0 0 6px; padding-left: 20px; display: grid; gap: 4px; font-size: .86rem; line-height: 1.5; }
.lvc-persona { display: flex; gap: 16px; align-items: flex-start; margin: 4px 0 8px; }
.lvc-avatar-prev { position: relative; width: 72px; height: 72px; flex: 0 0 72px; border-radius: 50%; background: var(--c, #ff5a4e); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 28px; }
.lvc-avatar-prev img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.lvc-avatar-prev i { position: absolute; right: 2px; bottom: 2px; width: 16px; height: 16px; border-radius: 50%; background: #22c55e; border: 3px solid var(--surface); }
.lvc-detected { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lvc-swatch { display: inline-block; width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--line-2); }
.lvc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; margin: 4px 0 10px; }
.lvc-kpis > div { background: var(--surface-2); border-radius: var(--radius-xs); padding: 8px 10px; }
.lvc-kpis b { display: block; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.lvc-kpis span { font-size: .74rem; color: var(--muted); }
.lvc-report h4 { font-size: .82rem; margin: 10px 0 4px; }
.lvc-mini { width: 100%; border-collapse: collapse; font-size: .84rem; }
.lvc-mini th { text-align: left; color: var(--muted); font-weight: 600; font-size: .74rem; padding: 3px 4px; border-bottom: 1px solid var(--line); }
.lvc-mini td { padding: 4px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.lvc-mini td + td, .lvc-mini th + th { text-align: right; width: 50px; }
.lvc-gap { border-top: 1px solid var(--line); padding: 8px 0; display: grid; gap: 6px; }
.lvc-gap-q { font-size: .88rem; }
.lvc-gap-actions { display: flex; gap: 10px; align-items: center; }
.lvc-okline { color: var(--success); }
.lvc-pmonth { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; background: var(--surface); margin: 12px 0 18px; }
.lvc-pmonth-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.lvc-pmonth-h h2 { font-size: 1.1rem; margin: 0 0 8px; }
.lvc-pub-h2 { font-size: 1.1rem; margin: 6px 0 4px; }
.lvc-learn { border-top: 1px solid var(--line); padding: 7px 0; font-size: .84rem; display: grid; gap: 2px; overflow-wrap: anywhere; }
.uxa-five { border-left: 4px solid var(--warning); padding: 14px 18px; margin: 0 0 14px; display: grid; gap: 8px; }
.uxa-five-who { margin: 0; padding-bottom: 10px; border-bottom: 1px solid var(--line); line-height: 1.5; }
.uxa-five-pass { border-left-color: var(--success); }
.uxa-five-fail { border-left-color: var(--danger); }
.uxa-five-q { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: .9rem; line-height: 1.5; }
.uxa-five-q span { font-weight: 700; margin-right: 4px; }
.uxa-screens { display: grid; gap: 6px; padding: 14px 18px; margin: 0 0 14px; }
.uxa-fold-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0; }
.uxa-fold { width: 54px; height: 86px; border-radius: 10px; border: 2px solid; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; padding-top: 6px; font-size: .7rem; }
.uxa-fold b { font-size: .95rem; }
.uxa-fold i { font-style: normal; font-weight: 600; text-align: center; line-height: 1.15; }
.uxa-fold.is-ok { border-color: var(--success); background: rgba(22,163,74,.08); }
.uxa-fold.is-gap { border-color: var(--danger); background: rgba(220,38,38,.07); }
.lvc-hero-links { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.lvc-warn { border-left: 4px solid var(--warning); margin-bottom: 14px; }
.lvc-new { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin-bottom: 16px; }
.lvc-new .field { flex: 1 1 240px; margin: 0; }
.lvc-table { width: 100%; border-collapse: collapse; }
.lvc-table th { text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 6px 10px; border-bottom: 1px solid var(--line); }
.lvc-table td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.lvc-total td { border-bottom: 0; }
.lvc-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lvc-list { overflow-x: auto; }
.lvc-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .74rem; font-weight: 700; background: rgba(100,116,139,.14); color: #475569; white-space: nowrap; }
.lvc-on, .lvc-st-qualified { background: rgba(22,163,74,.15); color: #15803d; }
.lvc-warnb, .lvc-st-open { background: rgba(217,119,6,.15); color: #b45309; }
.lvc-st-not_qualified { background: rgba(220,38,38,.12); color: #b91c1c; }
html[data-theme="dark"] .lvc-badge { filter: brightness(1.35); }
.lvc-filter { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 12px; }
.lvc-chip { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink); text-decoration: none; font-size: .85rem; background: var(--surface); }
.lvc-chip.is-on { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.lvc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
@media (max-width: 960px) { .lvc-grid { grid-template-columns: 1fr; } }
.lvc-main, .lvc-side { display: grid; gap: 16px; min-width: 0; }
.lvc-grid > main > .card, .lvc-grid > aside > .card { padding: 18px 20px; }
.lvc-side h3 { margin: 0 0 8px; font-size: 1rem; }
.lvc-h { font-size: 1rem; margin: 18px 0 10px; display: flex; gap: 8px; align-items: center; }
.lvc-main .card > .lvc-h:first-child, .lvc-form > .lvc-h:first-of-type { margin-top: 0; }
.lvc-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 12px; }
.lvc-check { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0 12px; font-size: .9rem; }
.lvc-check > span { min-width: 0; overflow-wrap: anywhere; }
.lvc-code { display: flex; gap: 6px; margin: 8px 0; }
.lvc-code input { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
.lvc-boxes { display: grid; gap: 6px; margin-bottom: 8px; }
.lvc-boxrow { display: grid; grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1.4fr); gap: 6px; }
.lvc-openers { display: grid; gap: 8px; margin-bottom: 8px; }
.lvc-openrow { display: grid; grid-template-columns: 150px minmax(0, 1.2fr) minmax(0, 1.2fr); gap: 6px; align-items: start; }
.lvc-openrow textarea { font-size: .85rem; }
.lvc-hours .field { max-width: 220px; }
.lvc-days { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 4px 0 10px; font-size: .9rem; }
.lvc-days label { display: inline-flex; gap: 5px; align-items: center; }
.lvc-rate { font-size: .74rem; font-weight: 600; } .lvc-rate-up { color: var(--success); } .lvc-rate-down { color: var(--danger); }
@media (max-width: 720px) { .lvc-openrow { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .lvc-boxrow { grid-template-columns: 52px 1fr; } }
.lvc-knowledge { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
.lvc-srow { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); font-size: .88rem; }
.lvc-thread { display: grid; gap: 10px; }
.lvc-msgs { max-height: 560px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px; }
.lvc-msg { max-width: 80%; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); line-height: 1.45; font-size: .92rem; }
.lvc-msg.lvc-visitor { align-self: flex-start; }
.lvc-msg.lvc-bot, .lvc-msg.lvc-agent { align-self: flex-end; background: rgba(255,90,78,.12); }
.lvc-msg.lvc-agent { background: rgba(37,99,235,.13); }
.lvc-msg.lvc-note { align-self: center; background: transparent; color: var(--muted); font-size: .8rem; }
.lvc-who { display: block; font-size: .72rem; color: var(--muted); margin-bottom: 2px; }
.lvc-reply { display: flex; gap: 8px; align-items: flex-end; }
.lvc-reply textarea { flex: 1; }
.lvc-field { display: grid; grid-template-columns: 80px 1fr; gap: 8px; padding: 4px 0; font-size: .9rem; overflow-wrap: anywhere; }
.lvc-pub h1 { font-size: 1.5rem; margin: 0 0 6px; }
.lvc-plead { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; margin: 10px 0; background: var(--surface); }
.lvc-plead summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.lvc-pneed { flex-basis: 100%; color: var(--muted); font-size: .9rem; }
.lvc-ptx { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }

/* ===== Sales: pitch check, follow-up sequence, deal health, contract filler ===== */
.blr-lint { margin-top: 10px; padding: 8px 12px; border-radius: var(--radius-sm); font-size: .86rem;
    background: color-mix(in srgb, var(--warning, #d97706) 9%, transparent); border: 1px solid color-mix(in srgb, var(--warning, #d97706) 30%, transparent); }
.blr-lint ul { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 2px; }
.blr-lint.is-ok { background: color-mix(in srgb, var(--success, #16a34a) 8%, transparent); border-color: color-mix(in srgb, var(--success, #16a34a) 28%, transparent); }
.pros-seq { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; display: grid; gap: 10px; }
.pros-seq summary { cursor: pointer; }
.pros-seq[open] summary { margin-bottom: 4px; }
.pros-seq .field, .pros-seq p { margin: 0; }
.dlh-card { padding: 20px 24px; margin: 0 0 18px; }
.dlh-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.dlh-head h3 { font-family: var(--display); font-size: 1.08rem; margin: 0; }
.dlh-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
@media (max-width: 820px) { .dlh-grid { grid-template-columns: minmax(0, 1fr); } }
.dlh-grid h4 { margin: 0 0 10px; font-size: .95rem; }
.dlh-bar { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-bottom: 8px; font-size: .88rem; }
.dlh-bar-track { height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; }
.dlh-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.dlh-bar-fill--commit { background: var(--success, #16a34a); }
.dlh-bar-fill--best { background: var(--accent); }
.dlh-bar-fill--pipeline { background: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.dlh-bar-v { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 64px; text-align: right; }
.dlh-velocity { margin: 14px 0 0; font-size: .9rem; overflow-wrap: anywhere; }
.dlh-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.dlh-list li { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; padding: 8px 10px; border-radius: var(--radius-sm);
    border: 1px solid var(--line); border-left: 3px solid var(--danger); min-width: 0; }
.dlh-why { flex-basis: 100%; font-size: .84rem; color: var(--danger); overflow-wrap: anywhere; }
.esg-filler { margin: 0 0 10px; padding: 8px 10px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--warning, #d97706) 9%, transparent); }

/* ===== Sales proposals (staff: builder, overview, settings) ===== */
.prp-builder { display: grid; gap: 16px; }
.prp-step, .prp-card { padding: 20px 24px; }
.prp-card { margin-bottom: 16px; }
.prp-h { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-family: var(--display); font-size: 1.08rem; margin: 0 0 14px; }
.prp-h3 { font-size: 1rem; margin: 18px 0 4px; }
.prp-num { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; font-size: .85rem; font-weight: 800; }
.prp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 14px; }
.prp-grid .field, .prp-step .field { margin: 0; min-width: 0; }
.prp-step .field.prp-deal { margin: 0 0 14px; max-width: 520px; }
.prp-depth { height: 8px; border-radius: 999px; background: var(--border, #e5e7eb); overflow: hidden; margin: 4px 0; }
.prp-depth i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f59e0b, #16a34a); }
.prp-fu { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border, #e5e7eb); margin: 8px 0; }
.prp-fu-queued { border-color: #f59e0b; background: rgba(245, 158, 11, .06); }
.prp-fu-failed { border-color: #ef4444; }
.prp-fu-h { display: grid; gap: 2px; }
.prp-fu-form { display: grid; gap: 6px; margin-top: 8px; }
.prp-fu-form input, .prp-fu-form textarea { width: 100%; }
.prp-fu-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.prp-fu-pre { white-space: pre-wrap; font: inherit; margin: 6px 0 0; }
.prp-fu-opts { display: grid; gap: 6px; margin: 8px 0 10px; }
.prp-fu-step { padding: 8px 10px; border: 1px solid var(--border, #e5e7eb); border-radius: 10px; margin: 6px 0; }
.prp-fu-step > summary { cursor: pointer; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.prp-check { display: flex; align-items: center; gap: 8px; font-size: .9rem; min-width: 0; }
.prp-check > span { min-width: 0; overflow-wrap: anywhere; }
.prp-scopes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .prp-scopes { grid-template-columns: minmax(0, 1fr); } }
.prp-scope input { position: absolute; opacity: 0; pointer-events: none; }
.prp-scope-card { display: grid; gap: 4px; padding: 16px; border-radius: var(--radius-sm); border: 2px solid var(--line); cursor: pointer; height: 100%; }
.prp-scope-card i { font-size: 1.3rem; color: var(--accent); }
.prp-scope input:checked + .prp-scope-card { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.prp-scope input:focus-visible + .prp-scope-card { outline: 2px solid var(--accent); outline-offset: 2px; }
.prp-pkgs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 8px; }
@media (max-width: 1100px) { .prp-pkgs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .prp-pkgs { grid-template-columns: minmax(0, 1fr); } }
.prp-logo-field { display: grid; gap: 6px; }
.prp-logo-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.prp-logo-row input { min-width: 0; }
.prp-logo-prev { width: 44px; height: 44px; object-fit: contain; border-radius: 8px; background: #fff; border: 1px solid var(--line); }
.prp-pkg { display: grid; gap: 8px; padding: 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); min-width: 0; }
.prp-pkg:has(.prp-rec input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.prp-rec { font-size: .82rem; font-weight: 700; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.prp-out { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 8px; }
.prp-addons { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.prp-addon { padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); min-width: 0; }
.prp-addon-head { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.prp-addon-fields { display: none; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; margin-top: 10px; }
.prp-addon.is-on { border-color: var(--accent); }
.prp-addon.is-on .prp-addon-fields { display: grid; }
.prp-sections { margin-top: 12px; }
.prp-sections summary { cursor: pointer; font-weight: 600; }
.prp-section-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px 14px; margin-top: 10px; }
.prp-submit { display: flex; gap: 10px; flex-wrap: wrap; }
.prp-empty { padding: 28px; text-align: center; display: grid; justify-items: center; gap: 10px; }
.prp-list { padding: 0; overflow-x: auto; }
.prp-table { width: 100%; border-collapse: collapse; }
.prp-table th { text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--line); }
.prp-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.prp-num-col { text-align: right; font-variant-numeric: tabular-nums; }
.prp-sel-col { width: 32px; }
.prp-list-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 4px 10px; }
.prp-st { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--line); color: var(--ink); letter-spacing: 0; text-transform: none; }
.prp-st-sent { background: color-mix(in srgb, #3b82f6 18%, transparent); color: #2563eb; }
.prp-st-viewed { background: color-mix(in srgb, #f59e0b 20%, transparent); color: #b45309; }
.prp-st-accepted { background: color-mix(in srgb, var(--success, #16a34a) 18%, transparent); color: var(--success, #16a34a); }
.prp-show { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
@media (max-width: 980px) { .prp-show { grid-template-columns: minmax(0, 1fr); } }
.prp-linkrow { display: flex; gap: 8px; margin-bottom: 6px; }
.prp-linkbox { flex: 1; min-width: 0; font-size: .85rem; }
.prp-pulls { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.prp-pull { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.prp-pull-t { flex: 1; min-width: 0; display: grid; overflow-wrap: anywhere; }
.prp-pull-ic { width: 12px; height: 12px; border-radius: 50%; background: var(--line); flex: 0 0 auto; }
.prp-pull.is-ok .prp-pull-ic { background: var(--success, #16a34a); }
.prp-pull.is-bad .prp-pull-ic { background: var(--warning, #d97706); }
.prp-pull.is-busy .prp-pull-ic { background: var(--accent); animation: prp-pulse 1s infinite alternate; }
@keyframes prp-pulse { to { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .prp-pull.is-busy .prp-pull-ic { animation: none; } }
.prp-suggest { padding: 8px 12px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--warning, #d97706) 10%, transparent); }
.prp-mini-pkgs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 760px) { .prp-mini-pkgs { grid-template-columns: minmax(0, 1fr); } }
.prp-mini { padding: 12px; border-radius: var(--radius-sm); border: 1px solid var(--line); font-size: .9rem; min-width: 0; }
.prp-mini.is-rec { border-color: var(--accent); }
.prp-mini.is-won { border-color: var(--success, #16a34a); background: color-mix(in srgb, var(--success, #16a34a) 8%, transparent); }
.prp-mini ul { margin: 6px 0 0; padding-left: 16px; color: var(--muted); }
.prp-eng { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.prp-eng div { display: grid; text-align: center; padding: 10px 4px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); }
.prp-eng strong { font-size: 1.3rem; }
.prp-eng span { font-size: .75rem; color: var(--muted); }
.prp-time { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .86rem; }
.prp-time li { display: grid; grid-template-columns: 96px minmax(0, 1fr) 40px; gap: 8px; align-items: center; }
.prp-time-bar { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.prp-time-bar i { display: block; height: 100%; background: var(--accent); }
.prp-won { padding: 10px 12px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--success, #16a34a) 10%, transparent); margin-bottom: 10px; font-size: .92rem; }
.prp-rep-form { display: grid; gap: 12px; }
.prp-rep-photo { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.prp-rep-photo img, .prp-rep-ph { width: 96px; height: 96px; border-radius: 20px; object-fit: cover; }
.prp-rep-ph { display: grid; place-items: center; background: var(--c, #16c0b7); color: #fff; font-size: 2rem; font-weight: 800; }
.prp-assets { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 12px; }
.prp-asset { margin: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; display: grid; }
.prp-asset img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.prp-asset figcaption, .prp-asset form { padding: 6px 10px; font-size: .86rem; overflow-wrap: anywhere; }
.prp-asset-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; align-items: end; }
.prp-asset-form .field { margin: 0; min-width: 0; }
.prp-stats-edit { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin-bottom: 12px; }
.prp-stat-edit { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 6px; }
.prp-preset { margin: 12px 0; overflow-x: auto; }
.prp-preset-row { display: grid; grid-template-columns: minmax(120px, 1.4fr) repeat(4, minmax(70px, 1fr)) minmax(90px, 1fr) minmax(80px, 1fr); gap: 6px; margin-top: 6px; min-width: 700px; }
.prp-preset-head { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

.sa-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 12px 0 20px; }
.sa-search { margin: 0; }

/* Maintenance freeze (frz-): SEO automation paused, work stays open. Cool blue, calmer than the billing-lock red. */
.frz-bar { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; padding: 12px 16px;
    border: 1px solid rgba(56,189,248,.45); border-radius: 12px; background: rgba(56,189,248,.08); }
.frz-bar > div { flex: 1; }
.frz-ic { font-size: 1.2rem; color: #0ea5e9; }
.frz-sub { display: block; font-size: .82rem; color: var(--muted); margin-top: 2px; }
.frz-badge { background: rgba(14,165,233,.35); }
.frz-chip { color: #0284c7; background: rgba(14,165,233,.1); border-color: rgba(14,165,233,.35); }
.frz-form { display: inline-flex; vertical-align: middle; margin-left: 6px; }
.frz-btn { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: .72rem; font-weight: 700;
    color: #0284c7; background: rgba(14,165,233,.1); border: 1px solid rgba(14,165,233,.35); border-radius: 999px;
    padding: 2px 10px; cursor: pointer; }
.frz-btn:hover { background: rgba(14,165,233,.2); }
@media (prefers-color-scheme: dark) { .frz-chip, .frz-btn { color: #7dd3fc; } }
:root[data-theme="dark"] .frz-chip, :root[data-theme="dark"] .frz-btn { color: #7dd3fc; }

/* Stages page — now also the accounts + delivery-health view (stg-). */
.stg-health { margin-bottom: 16px; }
.stg-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.stg-tags .muted.small { display: inline; }
.stg-risk > span, .stg-data .stg-metric { display: inline-block; margin: 0 6px 2px 0; font-size: .8rem; white-space: nowrap; }
.stg-data .stg-metric { display: block; }
.stg-risk-only { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; font-weight: 600; margin-right: 14px; cursor: pointer; }
.stage-table tr.stg-hide { display: none; }
.stg-delivery { margin-top: 28px; }

.trm-fbar { margin: 4px 0 16px; }
.trm-fbar .sh-chip .trm-dot { width: 8px; height: 8px; }
.trm-f-none { margin: 0 0 16px; }

/* Internal links: multi-page focus */
.il-focus textarea { width: 100%; max-width: 640px; font-family: var(--mono, ui-monospace, monospace); font-size: .82rem; }
.il-focus-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 4px 0 6px; }
.il-fill { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; cursor: pointer; }
.il-focus-card { padding: 10px 14px; margin: 0 0 12px; line-height: 1.9; }
.il-focus-card code { margin-right: 4px; }
code.il-focus-miss { text-decoration: line-through; opacity: .6; }
.il-focus-miss-note { margin: 4px 0 0; color: var(--warning); }
.il-focus-chip { font-size: .7rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; color: #b45309; background: rgba(245,158,11,.14); }

.hbt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 14px; padding: 4px;
    border: 1px solid var(--line); border-radius: 12px; background: var(--surface); width: fit-content; max-width: 100%; }
.hbt-label { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 0 8px 0 6px; }
.hbt-tab { font-size: .84rem; font-weight: 600; color: var(--ink); text-decoration: none; padding: 5px 12px; border-radius: 8px; }
.hbt-tab:hover { background: rgba(127,127,127,.1); text-decoration: none; }
.hbt-tab.is-on { background: var(--primary); color: #fff; }

/* Client bar (cbar-): one strip linking a client's tools together. */
.cbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 16px; padding: 5px;
    border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.cbar-name { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; font-size: .88rem; padding: 0 10px 0 6px; margin-right: 2px; border-right: 1px solid var(--line); }
.cbar-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.cbar-tab { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; color: var(--ink); text-decoration: none; padding: 5px 10px; border-radius: 8px; white-space: nowrap; }
.cbar-tab:hover { background: rgba(127,127,127,.1); text-decoration: none; }
.cbar-tab.is-on { background: var(--primary); color: #fff; }
.cbar .frz-chip { margin-right: 4px; }
@media (max-width: 720px) { .cbar { flex-wrap: nowrap; overflow-x: auto; } .cbar-name { position: sticky; left: 0; background: var(--surface); } }

.wr-act-tool { display: inline-block; margin-top: 4px; font-size: .78rem; font-weight: 700; }

/* Reports → Output: person + client filters at the top */
.rp-filters { display: grid; gap: 10px; padding: 12px 16px; margin: 0 0 16px; }
.rp-f-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; }
.rp-f-k { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); min-width: 74px; }
.rp-f-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex: 1; }
.rp-f-chips .rp-chip em { font-style: normal; font-size: .72rem; opacity: .7; margin-left: 2px; }
.rp-f-row select { max-width: 360px; }
.rp-f-clear { font-size: .82rem; font-weight: 600; }
a.rp-row-link { display: block; color: inherit; text-decoration: none; border-radius: 8px; }
a.rp-row-link:hover { background: rgba(127,127,127,.08); }

/* Keyword mapping check (kmc-) */
.kmc-saved { padding: 12px 16px; margin-bottom: 14px; }
.kmc-saved-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.kmc-saved-list { margin-top: 6px; font-size: .86rem; }
.kmc-saved-list ul { margin: 6px 0 0; padding-left: 18px; }
.kmc-op-map { padding: 10px 16px; margin-bottom: 14px; }
.kmc-op-map summary { cursor: pointer; }
.kmc-op-list { margin: 8px 0 2px; padding-left: 18px; display: grid; gap: 4px; font-size: .88rem; }
.kmc-form-card { padding: 16px 18px; margin-bottom: 16px; }
.kmc-form textarea { width: 100%; font-family: var(--mono, ui-monospace, monospace); font-size: .84rem; }
.kmc-opts { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 20px; margin: 4px 0 12px; }
.kmc-opts .field { flex: 0 1 320px; }
.kmc-check { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; margin-bottom: 10px; cursor: pointer; }
.kmc-recent { padding: 14px 18px; }
.kmc-bar { margin-bottom: 14px; }
.kmc-page { padding: 12px 16px; margin-bottom: 14px; }
.kmc-page-bad { border-color: rgba(239,68,68,.45); }
.kmc-page-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; }
.kmc-page-url { font-weight: 800; font-family: var(--mono, ui-monospace, monospace); font-size: .92rem; }
.kmc-page-head .btn { margin-left: auto; }
.kmc-scroll { overflow-x: auto; }
.kmc-table { width: 100%; table-layout: auto; }
.kmc-table td, .kmc-table th { vertical-align: top; white-space: normal; }
.kmc-table td:first-child { min-width: 160px; }
.kmc-kw .muted.small { display: block; }
.kmc-pill { display: inline-block; font-size: .72rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.kmc-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.kmc-pill.kmc-ok, .kmc-dot.kmc-ok { background: rgba(34,197,94,.15); color: #15803d; }
.kmc-dot.kmc-ok { background: #22c55e; }
.kmc-pill.kmc-wrong, .kmc-dot.kmc-wrong { background: rgba(239,68,68,.14); color: #b91c1c; }
.kmc-dot.kmc-wrong { background: #ef4444; }
.kmc-pill.kmc-split, .kmc-dot.kmc-split { background: rgba(245,158,11,.16); color: #b45309; }
.kmc-dot.kmc-split { background: #f59e0b; }
.kmc-pill.kmc-none, .kmc-dot.kmc-none { background: rgba(148,163,184,.2); color: var(--muted); }
.kmc-dot.kmc-none { background: #94a3b8; }
.kmc-pill.kmc-unknown { background: rgba(148,163,184,.2); color: var(--muted); }
.kmc-same { color: #15803d; font-weight: 700; }
.kmc-other { color: #b91c1c; font-weight: 700; }
.kmc-notes-row td { padding-top: 0; border-top: 0; }
.kmc-notes { margin: 0 0 4px; padding-left: 18px; font-size: .82rem; }
.kmc-note-bad { color: #b91c1c; }
.kmc-note-warn { color: #b45309; }
.kmc-note-ok { color: #15803d; }
.kmc-note-map { color: var(--muted); list-style: '📍 '; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kmc-same, :root:not([data-theme="light"]) .kmc-note-ok { color: #4ade80; } :root:not([data-theme="light"]) .kmc-other, :root:not([data-theme="light"]) .kmc-note-bad { color: #f87171; } :root:not([data-theme="light"]) .kmc-note-warn { color: #fbbf24; } }
:root[data-theme="dark"] .kmc-same, :root[data-theme="dark"] .kmc-note-ok { color: #4ade80; }
:root[data-theme="dark"] .kmc-other, :root[data-theme="dark"] .kmc-note-bad { color: #f87171; }
:root[data-theme="dark"] .kmc-note-warn { color: #fbbf24; }

/* On-page × keyword map (kmo-) */
.kmo h4 { margin: 14px 0 6px; font-size: .9rem; }
.kmo-warn { margin: 6px 0; padding: 8px 12px; border-radius: 8px; background: rgba(245,158,11,.12); font-size: .86rem; }
.kmo-plan td { vertical-align: top; }
.kmo-spots { display: flex; flex-wrap: wrap; gap: 4px; white-space: normal; }
.kmo-spot { font-size: .74rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.kmo-spot.kmo-yes { background: rgba(34,197,94,.15); color: #15803d; }
.kmo-spot.kmo-partial { background: rgba(245,158,11,.16); color: #b45309; }
.kmo-spot.kmo-no { background: rgba(239,68,68,.12); color: #b91c1c; }
.kmo-role { font-size: .72rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: rgba(148,163,184,.2); }
.kmo-role-primary { background: var(--primary); color: #fff; }
.kmo-list { margin: 4px 0; padding-left: 18px; font-size: .86rem; display: grid; gap: 3px; }
.kmo-bad { color: #b91c1c; }
.kmo-bad-h { color: #b91c1c; }
.kmo-ok { color: #15803d; margin: 8px 0; }
.kmo-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px 20px; }
.kmo-batch-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 10px 0 4px; font-size: .86rem; }
.kmo-batch-opts input[type=number] { width: 70px; }
.kmo-batch-opts input[type=text] { width: 110px; }
.kmo-pages li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.kmo-run-state { font-size: .78rem; color: var(--muted); }
.kmo-running { color: #b45309; }
.kmo-done { color: #15803d; font-weight: 700; }
.kmo-fail { color: #b91c1c; }
.kmo-batch-go { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kmo-spot.kmo-yes, :root:not([data-theme="light"]) .kmo-ok, :root:not([data-theme="light"]) .kmo-done { color: #4ade80; } :root:not([data-theme="light"]) .kmo-spot.kmo-no, :root:not([data-theme="light"]) .kmo-bad, :root:not([data-theme="light"]) .kmo-bad-h, :root:not([data-theme="light"]) .kmo-fail { color: #f87171; } :root:not([data-theme="light"]) .kmo-spot.kmo-partial { color: #fbbf24; } }
:root[data-theme="dark"] .kmo-spot.kmo-yes, :root[data-theme="dark"] .kmo-ok, :root[data-theme="dark"] .kmo-done { color: #4ade80; }
:root[data-theme="dark"] .kmo-spot.kmo-no, :root[data-theme="dark"] .kmo-bad, :root[data-theme="dark"] .kmo-bad-h, :root[data-theme="dark"] .kmo-fail { color: #f87171; }
:root[data-theme="dark"] .kmo-spot.kmo-partial { color: #fbbf24; }

/* Content results (crs-) */
.crs-card { padding: 12px 16px; }
.crs-post a { font-weight: 700; }
.crs-post .muted.small { display: block; }
.crs-table td { white-space: normal; vertical-align: top; }
.crs-pill { display: inline-block; font-size: .72rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; background: rgba(148,163,184,.2); color: var(--muted); }
.crs-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; }
.crs-pill.crs-winning { background: rgba(34,197,94,.15); color: #15803d; } .crs-dot.crs-winning { background: #22c55e; }
.crs-pill.crs-close { background: rgba(59,130,246,.14); color: #1d4ed8; } .crs-dot.crs-close { background: #3b82f6; }
.crs-pill.crs-early { background: rgba(148,163,184,.2); color: var(--muted); }
.crs-pill.crs-stalled, .crs-pill.crs-slipping { background: rgba(245,158,11,.16); color: #b45309; } .crs-dot.crs-stalled, .crs-dot.crs-slipping { background: #f59e0b; }
.crs-pill.crs-invisible { background: rgba(239,68,68,.14); color: #b91c1c; } .crs-dot.crs-invisible { background: #ef4444; }
.crs-checks { display: grid; gap: 8px; margin-top: 8px; }
.crs-check { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.crs-day { font-weight: 800; font-size: .8rem; min-width: 60px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .crs-pill.crs-winning { color: #4ade80; } :root:not([data-theme="light"]) .crs-pill.crs-close { color: #93c5fd; } :root:not([data-theme="light"]) .crs-pill.crs-stalled, :root:not([data-theme="light"]) .crs-pill.crs-slipping { color: #fbbf24; } :root:not([data-theme="light"]) .crs-pill.crs-invisible { color: #f87171; } }
:root[data-theme="dark"] .crs-pill.crs-winning { color: #4ade80; }
:root[data-theme="dark"] .crs-pill.crs-close { color: #93c5fd; }
:root[data-theme="dark"] .crs-pill.crs-stalled, :root[data-theme="dark"] .crs-pill.crs-slipping { color: #fbbf24; }
:root[data-theme="dark"] .crs-pill.crs-invisible { color: #f87171; }

/* Content writer × keyword map (cmx-) */
.cmx-list { margin: 6px 0 8px; padding-left: 18px; display: grid; gap: 4px; font-size: .88rem; }
.cmx-ok { color: inherit; }
.cmx-bad { color: #b91c1c; }
.cmx-hint { display: block; margin-top: 4px; }
.cmx-hint:empty { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cmx-bad { color: #f87171; } }
:root[data-theme="dark"] .cmx-bad { color: #f87171; }

/* Local page check (lpx-) */
.lpx-why { margin: 6px 0 8px; padding: 8px 12px; border-radius: 8px; background: rgba(245,158,11,.1); font-size: .88rem; }
.lpx-why ol { margin: 4px 0 0; padding-left: 20px; }

.ga-unans { margin: 4px 0 10px; padding: 8px 12px; border-radius: 8px; background: rgba(245,158,11,.12); font-size: .86rem; }

.sa-kind { font-size: .7rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; margin-left: 6px; background: rgba(148,163,184,.2); color: var(--muted); }
.sa-kind-mapped { background: rgba(59,130,246,.14); color: #1d4ed8; }
.sa-kind-money { background: rgba(34,197,94,.14); color: #15803d; }
.sa-triage-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sa-kind-mapped { color: #93c5fd; } :root:not([data-theme="light"]) .sa-kind-money { color: #4ade80; } }
:root[data-theme="dark"] .sa-kind-mapped { color: #93c5fd; }
:root[data-theme="dark"] .sa-kind-money { color: #4ade80; }

/* Rankings Playground results table (modern) */
.rpg-wrap { border: 1px solid var(--line); border-radius: 12px; overflow: auto; max-height: 75vh; background: var(--surface); }
.rpg-modern { border-collapse: separate; border-spacing: 0; width: 100%; font-size: .88rem; }
.rpg-modern thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-2, var(--surface)); text-align: left; font-size: .7rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.rpg-modern thead th .muted.small { text-transform: none; letter-spacing: 0; font-weight: 600; }
.rpg-modern tbody td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.rpg-modern tbody tr:last-child td { border-bottom: 0; }
.rpg-modern tbody tr:hover td { background: rgba(127,127,127,.05); }
.rpg-kw { display: block; font-weight: 600; color: var(--ink); }
.rpg-tag { display: inline-block; margin-top: 4px; font-size: .72rem; color: var(--muted); background: rgba(148,163,184,.14); border-radius: 999px; padding: 1px 8px; }
.rpg-modern .rpg-err { display: inline-block; margin: 4px 4px 0 0; font-size: .72rem; color: #b45309; background: rgba(245,158,11,.12); border-radius: 6px; padding: 2px 8px; }
.rpg-rank { display: inline-block; min-width: 38px; font-variant-numeric: tabular-nums; font-weight: 800; font-size: .92rem; }
.rpg-rank-base { color: var(--ink); }
.rpg-d { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-size: .72rem; font-weight: 800; font-variant-numeric: tabular-nums; vertical-align: 1px; }
.rpg-d-better, .rpg-d-new { color: #15803d; background: rgba(34,197,94,.14); }
.rpg-d-worse { color: #b91c1c; background: rgba(239,68,68,.13); }
.rpg-d-same { color: var(--muted); background: rgba(148,163,184,.16); }
.rpg-none { color: var(--muted); font-size: .8rem; }
.rpg-pages { color: var(--muted); font-size: .78rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rpg-path { font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: .76rem; color: var(--muted); text-decoration: none; }
.rpg-path:hover { color: var(--ink); text-decoration: underline; }
.rpg-legend .rpg-d { margin: 0 2px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rpg-d-better, :root:not([data-theme="light"]) .rpg-d-new { color: #4ade80; } :root:not([data-theme="light"]) .rpg-d-worse { color: #f87171; } :root:not([data-theme="light"]) .rpg-modern .rpg-err { color: #fbbf24; } }
:root[data-theme="dark"] .rpg-d-better, :root[data-theme="dark"] .rpg-d-new { color: #4ade80; }
:root[data-theme="dark"] .rpg-d-worse { color: #f87171; }
:root[data-theme="dark"] .rpg-modern .rpg-err { color: #fbbf24; }

.rph-sorts { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.rph-sorts .sh-chip { text-decoration: none; }
.rph-older { display: block; font-size: .72rem; color: var(--muted); margin-top: 2px; }
.rph-older:hover { color: var(--ink); }
.rph-sort-h { color: inherit; text-decoration: none; white-space: nowrap; }
.rph-sort-h:hover { text-decoration: underline; }
.rph-age { display: inline-block; font-size: .74rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.rph-age-fresh { color: #15803d; background: rgba(34,197,94,.14); }
.rph-age-aging { color: #b45309; background: rgba(245,158,11,.15); }
.rph-age-stale { color: #b91c1c; background: rgba(239,68,68,.13); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rph-age-fresh { color: #4ade80; } :root:not([data-theme="light"]) .rph-age-aging { color: #fbbf24; } :root:not([data-theme="light"]) .rph-age-stale { color: #f87171; } }
:root[data-theme="dark"] .rph-age-fresh { color: #4ade80; }
:root[data-theme="dark"] .rph-age-aging { color: #fbbf24; }
:root[data-theme="dark"] .rph-age-stale { color: #f87171; }

.kmc-cbx { max-width: 520px; }
.kmc-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.kmc-ov-list { margin: 6px 0; padding-left: 16px; font-size: .86rem; display: grid; gap: 3px; }
.kmc-ov-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.kmc-progress { padding: 12px 16px; margin-bottom: 12px; display: block; }
.kmc-prog-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kmc-prog-bar { height: 8px; border-radius: 999px; background: rgba(148,163,184,.25); overflow: hidden; margin: 8px 0 6px; }
.kmc-prog-bar i { display: block; height: 100%; background: var(--primary); border-radius: 999px; transition: width .4s ease; }
#kmc-prog-now { margin: 0 0 2px; }

/* Rankings Playground: run-now queue + bulk re-check */
.rpw-rush { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 10px; padding: 8px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--primary, #ff5a4e) 7%, transparent); border: 1px solid color-mix(in srgb, var(--primary, #ff5a4e) 22%, transparent); }
.rpw-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.rpw-rush { flex-direction: column; align-items: stretch; }
.rpw-rush-head, .rpw-rush-now { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.rpw-rush-bar { flex: 1 1 160px; height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--muted, #888) 20%, transparent); overflow: hidden; min-width: 120px; }
.rpw-rush-bar i { display: block; height: 100%; background: var(--primary, #ff5a4e); border-radius: 99px; transition: width .4s; }
.rpw-rush-list { margin: 0; padding-left: 20px; display: flex; flex-wrap: wrap; gap: 2px 22px; }
.rph-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 8px 0; }
.rph-table .rph-pickc { width: 28px; cursor: default; }

.kmc-skipped { margin: 0 0 14px; border-left: 4px solid #d97706; }
.kmc-skipped summary { cursor: pointer; }
.kmc-skipped ul { margin: 8px 0 0; padding-left: 18px; }

/* Trends → Timeline: changes next to rankings */
.ptl-card { margin: 0 0 18px; }
.ptl-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.ptl-h { margin: 0; font-size: 1.1rem; }
.ptl-range { display: flex; flex-wrap: wrap; gap: 6px; }
.ptl-kpis { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 22px; margin: 14px 0 6px; }
.ptl-kpi { display: flex; flex-direction: column; min-width: 78px; }
.ptl-kpi em { font-style: normal; font-size: .78rem; color: var(--muted); }
.ptl-kpi strong { font-size: 1.45rem; line-height: 1.15; }
.ptl-kpi-note { flex: 1 1 200px; text-align: right; }
.ptl-d { font-size: .78rem; font-weight: 700; white-space: nowrap; }
.ptl-up { color: #16a34a; }
.ptl-down { color: #dc2626; }
.ptl-flat { color: var(--muted); }
.ptl-chart { margin: 8px 0 4px; }
.ptl-chart svg { display: block; width: 100%; height: 200px; }
.ptl-axis { stroke: var(--line); stroke-width: 1; }
.ptl-mark { stroke-width: 2; stroke-dasharray: 4 3; opacity: .75; vector-effect: non-scaling-stroke; }
.ptl-l3, .ptl-l10, .ptl-l20 { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.ptl-l10 { stroke: var(--primary, #ff5a4e); stroke-width: 3; }
.ptl-l3 { stroke: #16a34a; stroke-width: 2.5; }
.ptl-l20 { stroke: var(--muted, #94a3b8); stroke-width: 1.5; stroke-dasharray: 2 3; }
.ptl-tick { fill: #16a34a; opacity: .7; }
.ptl-axis-labels { display: flex; justify-content: space-between; }
.ptl-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 10px 0 12px; }
.ptl-legend i, .ptl-chg i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.ptl-sw { width: 18px !important; height: 3px !important; border-radius: 2px !important; vertical-align: 3px !important; }
.ptl-sw3 { background: #16a34a; } .ptl-sw10 { background: var(--primary, #ff5a4e); } .ptl-sw20 { background: var(--muted, #94a3b8); }
.ptl-kind { cursor: pointer; display: inline-flex; align-items: center; gap: 2px; }
.ptl-scroll { overflow-x: auto; }
.ptl-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.ptl-table th { text-align: left; font-size: .78rem; color: var(--muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ptl-table td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ptl-num { text-align: right; white-space: nowrap; }
.ptl-wk { white-space: nowrap; font-weight: 600; }
.ptl-did { min-width: 260px; }
.ptl-chg { display: block; margin: 0 0 4px; }
.ptl-tasks summary { cursor: pointer; color: var(--muted); }
.ptl-tasks ul { margin: 4px 0 0; padding-left: 18px; }
.ptl-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 10px 0 0; }
.ptl-table tr.ptl-more { display: none; }
.ptl-card.ptl-all .ptl-table tr.ptl-more { display: table-row; }
.ptl-card.ptl-busy .ptl-table tr.ptl-quiet { display: none !important; }
@media (max-width: 640px) {
  .ptl-kpi-note { text-align: left; }
  .ptl-table thead th:last-child { display: none; }
  .ptl-table tr { display: grid; grid-template-columns: 64px repeat(4, 1fr); border-bottom: 1px solid var(--line); }
  .ptl-card.ptl-all .ptl-table tr.ptl-more { display: grid; }
  .ptl-table td { border-bottom: 0; padding: 6px 4px; }
  .ptl-table td.ptl-did { grid-column: 1 / -1; min-width: 0; padding-top: 0; }
  .ptl-table td.ptl-did:has(> .muted:only-child) { display: none; }
}

/* Usage report */
.usg-kpi, .usg-dept, .usg-daily, .usg-scroll, .usg-card { padding: 16px 18px; box-sizing: border-box; }
.usg-scroll .usg-table th:first-child, .usg-scroll .usg-table td:first-child { padding-left: 4px; }
.usg-kpis + .section-title, .usg-daily + .section-title, .usg-depts + .section-title, .usg-scroll + .section-title { margin-top: 28px; }
.usg-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 14px; }
.usg-range { display: flex; flex-wrap: wrap; gap: 6px; }
.usg-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 0 0 14px; }
.usg-kpi { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: inherit; }
.usg-kpi em { font-style: normal; font-size: .8rem; color: var(--muted); }
.usg-kpi strong { font-size: 1.7rem; line-height: 1.1; }
.usg-kpi-warn strong { color: #d97706; }
.usg-daily { margin: 0 0 18px; }
.usg-daily svg { display: block; width: 100%; height: 80px; }
.usg-daily rect { fill: var(--primary, #ff5a4e); opacity: .8; }
.usg-daily-l { display: flex; justify-content: space-between; margin-top: 4px; }
.usg-depts { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin: 0 0 18px; }
.usg-dept { text-decoration: none; color: inherit; }
.usg-dept:hover { border-color: var(--primary, #ff5a4e); }
.usg-dept-h { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.usg-dept ol { margin: 0; padding-left: 18px; }
.usg-scroll { overflow-x: auto; margin: 0 0 18px; }
.usg-find { margin: 0 0 10px; max-width: 320px; }
.usg-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.usg-table th { text-align: left; font-size: .78rem; color: var(--muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.usg-table td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.usg-n { text-align: right; white-space: nowrap; }
.usg-chip { display: inline-block; margin: 0 4px 4px 0; padding: 1px 8px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); color: inherit; text-decoration: none; white-space: nowrap; }
.usg-chip em { font-style: normal; color: var(--muted); }
.usg-chip-d { background: transparent; }
.usg-unused { columns: 2 320px; margin: 0; padding-left: 18px; }
.usg-unused li { break-inside: avoid; margin-bottom: 3px; }

/* Department menus: switch footer inside the mega menu */
.nav-mega-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.nav-mega-foot kbd { font-size: .72rem; padding: 0 4px; border: 1px solid var(--line); border-radius: 4px; }
.nav-mode-form { display: inline; margin: 0; }

/* Client page: calm "at a glance" view; everything else behind Show everything */
html.pj-calm .pj-full-only { display: none !important; }
html.pj-calm .pj-when-full, html:not(.pj-calm) .pj-when-calm { display: none; }
.pj-focus { display: grid; grid-template-columns: 1fr 1.4fr 1fr 1fr; gap: 14px; margin: 0 0 12px; }
@media (max-width: 1100px) { .pj-focus { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .pj-focus { grid-template-columns: 1fr; } }
.pj-fc { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 16px; }
a.pj-fc { color: inherit; text-decoration: none; }
a.pj-fc:hover { border-color: var(--primary, #ff5a4e); }
.pj-fc-h { margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pj-fc-note { margin: 0; font-size: .9rem; }
.pj-fc-big { margin: 0; }
.pj-fc-big strong { font-size: 1.6rem; line-height: 1.1; }
.pj-fc-d { margin: 0; font-weight: 700; }
.pj-up { color: #16a34a; } .pj-down { color: #dc2626; }
.pj-bad { color: #dc2626; font-weight: 600; } .pj-warn { color: #d97706; font-weight: 600; }
.pj-spark { width: 100%; height: 30px; }
.pj-spark polyline { fill: none; stroke: var(--primary, #ff5a4e); stroke-width: 2; }
.pj-fc .link-btn { margin-top: auto; align-self: flex-start; }
.pj-next { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: .9rem; }
.pj-next a { color: inherit; }
.pj-why { display: inline-block; font-size: .7rem; font-weight: 700; padding: 0 6px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); vertical-align: 1px; }
.pj-why-overdue { color: #dc2626; border-color: rgba(220,38,38,.35); }
.pj-why-blocked, .pj-why-waiting { color: #d97706; border-color: rgba(217,119,6,.35); }
.pj-routine { padding: 14px 16px; margin: 0 0 12px; }
.pj-rt-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; margin-bottom: 10px; }
.pj-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 6px; }
.pj-step a { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); color: inherit; text-decoration: none; background: var(--surface); }
.pj-step a:hover { border-color: var(--primary, #ff5a4e); }
.pj-step-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: .75rem; font-weight: 700; background: var(--surface-2); border: 1px solid var(--line); }
.pj-step-t { font-weight: 600; font-size: .86rem; line-height: 1.25; }
.pj-step-ok .pj-step-n { background: #16a34a; border-color: #16a34a; color: #fff; }
.pj-step-warn .pj-step-n { border-color: #d97706; color: #d97706; }
.pj-step-red .pj-step-n { border-color: #dc2626; color: #dc2626; }
.pj-step.is-next a { border-color: var(--primary, #ff5a4e); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary, #ff5a4e) 25%, transparent); }
.pj-rt-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); }
.pj-rt-why { color: var(--muted); }
.pj-more-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 16px; }

/* Customize my menu */
.mnu-wrap { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 16px; align-items: start; margin-bottom: 16px; }
@media (max-width: 900px) { .mnu-wrap { grid-template-columns: 1fr; } }
.mnu-h { margin: 0 0 6px; font-size: 1.05rem; }
.mnu-edit, .mnu-cat, .mnu-tpls { padding: 16px 18px; }
.mnu-edit-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.mnu-groups { display: flex; flex-direction: column; gap: 12px; margin: 10px 0; }
.mnu-group { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--surface); }
.mnu-group-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.mnu-group-name { flex: 1; font-weight: 700; border: 1px dashed transparent; background: transparent; padding: 4px 6px; border-radius: 6px; color: inherit; font-size: .95rem; }
.mnu-group-name:hover, .mnu-group-name:focus { border-color: var(--line); background: var(--surface-2); }
.mnu-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; min-height: 34px; }
.mnu-item { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); cursor: grab; }
.mnu-item.is-drag { opacity: .4; }
.mnu-item.is-over { box-shadow: 0 -2px 0 var(--primary, #ff5a4e); }
.mnu-grip { color: var(--muted); cursor: grab; user-select: none; }
.mnu-item-name { flex: 1; min-width: 0; border: 1px dashed transparent; background: transparent; padding: 3px 6px; border-radius: 6px; color: inherit; }
.mnu-item-name:hover, .mnu-item-name:focus { border-color: var(--line); background: var(--surface); }
.mnu-url { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30%; }
.mnu-x { color: var(--muted); }
.mnu-empty { padding: 8px; border: 1px dashed var(--line); border-radius: 8px; text-align: center; }
.mnu-actions, .mnu-tpl-save { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.mnu-tpl-save input[type=text] { flex: 1 1 200px; }
.mnu-cat { position: sticky; top: 90px; max-height: calc(100vh - 110px); display: flex; flex-direction: column; }
@media (max-width: 900px) { .mnu-cat { position: static; max-height: none; } }
.mnu-cat-list { overflow-y: auto; margin-top: 6px; }
.mnu-cat-h { margin: 10px 0 4px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.mnu-cat-item { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 8px; border-radius: 6px; cursor: grab; font-size: .9rem; }
.mnu-cat-item:hover { background: var(--surface-2); }
.mnu-cat-item.is-in { opacity: .45; }
.mnu-cat-item.is-in [data-mnu-add] { visibility: hidden; }
.mnu-tpls { margin-bottom: 16px; }
.mnu-tpl-list { list-style: none; margin: 0; padding: 0; }
.mnu-tpl-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.mnu-tpl-acts { display: flex; align-items: center; gap: 8px; }

/* ===== Client page v2: sidebar + flowing sections ===== */
.page:has(> .pv2) { max-width: 1440px; }
.pv2 { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.pv2-side { flex: 1 1 280px; max-width: 300px; display: flex; flex-direction: column; gap: 14px; }
.pv2-main { flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 960px) { .pv2-side { max-width: none; } }
/* The floating tools rail overlaps the v2 layout — the sidebar links cover it. */
/* The client's tabs (Overview, Message board, Emails, To-dos…) sit at the top, right under the header. */
.pv2-main > .proj-banner { order: -2; }
.pv2-main > .tabs { order: -1; margin-bottom: 0; }
.pv2 .pv2-toolbar { display: none !important; }
/* Tool mode: just the chosen tool (board, messages…) at the top. */
.pv2-toolbar { display: none; align-items: center; gap: 12px; }
.pv2-tool .pv2-toolbar { display: flex; }
.pv2-tool .pv2-band, .pv2-tool .pv2-sec, .pv2-tool .pv2-all-h, .pv2-tool .proj-banner, .pv2-tool .proj-pulse,
.pv2-tool .nudge-inline, .pv2-tool .nxt-card, .pv2-tool .frz-bar { display: none !important; }
.pv2-back { font-weight: 600; font-size: .9rem; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); text-decoration: none; color: inherit; }
.pv2-back:hover { border-color: var(--primary, #ff5a4e); }
.pv2-toolbar-t { display: none; }
.pv2-nav a.is-on { background: color-mix(in srgb, var(--primary, #ff5a4e) 10%, transparent); color: var(--primary, #ff5a4e); font-weight: 700; }
button.pv2-btn-ghost { font: inherit; font-size: .88rem; font-weight: 600; background: transparent; cursor: pointer; }
/* No right-hand column in v2: the old overview's side cards flow under it, two across. */
.pv2 .ov-grid { grid-template-columns: minmax(0, 1fr); }
.pv2 .ov-side .ov-side-fold-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; align-items: start; }
/* Pop-ups */
.pv2-dlg { border: 0; border-radius: 18px; padding: 22px 24px; width: min(560px, calc(100vw - 32px)); background: var(--surface); color: inherit; box-shadow: 0 24px 60px rgba(0,0,0,.25); }
.pv2-dlg::backdrop { background: rgba(15,20,30,.45); }
.pv2-dlg-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.pv2-dlg-h h2 { margin: 0; font-size: 1.15rem; }
.pv2-dlg-x { border: 0; background: transparent; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--muted); width: 44px; height: 44px; border-radius: 10px; }
.pv2-dlg-x:hover { background: var(--surface-2); }
.pv2-dlg-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.pv2-dlg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pv2-dlg-list li { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.pv2-dlg-list p { margin: 4px 0; }
.pv2 .proj-pulse { display: none; }
.pv2-card, .pv2-sec { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 8px 24px rgba(16,24,40,.04); }
.pv2-card { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.pv2-client-h { display: flex; align-items: center; gap: 12px; }
.pv2-av { width: 46px; height: 46px; flex: none; border-radius: 14px; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; }
.pv2-client-n { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pv2-client-n strong { font-size: 1.05rem; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.pv2-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pv2-pill { font-size: .75rem; font-weight: 600; padding: 3px 10px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); }
.pv2-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; margin: 0; font-size: .85rem; }
.pv2-facts dt { color: var(--muted); font-size: .75rem; }
.pv2-facts dd { margin: 0; font-weight: 600; }
.pv2-eyebrow { margin: 0; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pv2-ring-row { display: flex; align-items: center; gap: 14px; }
.pv2-ring-bg { fill: none; stroke: var(--surface-2); stroke-width: 10; }
.pv2-ring-fg { fill: none; stroke: var(--primary, #ff5a4e); stroke-width: 10; stroke-linecap: round; }
.pv2-ring text { font-size: 18px; font-weight: 800; fill: currentColor; }
.pv2-counts { display: flex; flex-direction: column; gap: 3px; font-size: .85rem; }
.pv2-counts strong { font-size: .98rem; }
.pv2-late { color: #dc2626; font-weight: 600; } .pv2-soon { color: #d97706; font-weight: 600; } .pv2-soon-q { color: var(--muted); font-weight: 600; } .pv2-done { color: #16a34a; font-weight: 600; }
.pv2-phases { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: .84rem; }
.pv2-ph-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pv2-ph-n { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv2-bar { height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin-top: 4px; }
.pv2-bar i { display: block; height: 100%; border-radius: 99px; background: var(--primary, #ff5a4e); }
.pv2-bar-ok i { background: #16a34a; }
.pv2-link { font-size: .85rem; font-weight: 600; }
.pv2-nav { padding: 8px; gap: 2px; }
.pv2-nav a { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-radius: 10px; color: inherit; text-decoration: none; font-size: .9rem; font-weight: 500; }
.pv2-nav a:hover { background: var(--surface-2); }
.pv2-nav a span { font-size: .75rem; font-weight: 700; color: var(--muted); }
.pv2-nav-sep { height: 1px; background: var(--line); margin: 6px 8px; }
.pv2-switch { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px; padding: 0 6px; margin: 0; }
.pv2-band { background: #141a24; color: #fff; border-radius: 20px; padding: 22px 24px; display: flex; flex-direction: column; gap: 18px; }
.pv2-band-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.pv2-band-h > div:first-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pv2-band-sub { font-size: .82rem; color: #aab3c2; }
.pv2-band-t { font-size: 1.35rem; letter-spacing: -0.01em; }
.pv2-band-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.pv2-btn-ghost, .pv2-btn { font-size: .88rem; font-weight: 600; padding: 9px 14px; border-radius: 12px; text-decoration: none; }
.pv2-btn-ghost { color: #fff; border: 1px solid #3a4352; }
.pv2-btn-ghost:hover { background: #1f2733; color: #fff; }
.pv2-btn { background: var(--primary, #ff5a4e); color: #fff; }
.pv2-btn:hover { color: #fff; filter: brightness(1.05); }
.pv2-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.pv2-kpi { background: #1f2733; border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.pv2-kpi span { font-size: .78rem; color: #aab3c2; }
.pv2-kpi strong { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.pv2-kpi em { font-style: normal; font-size: .78rem; font-weight: 600; color: #aab3c2; }
.pv2-kpi em.up { color: #4ade80; } .pv2-kpi em.down { color: #fca5a5; }
.pv2-sec { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 90px; }
.pv2-sec-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
.pv2-sec-h h2 { margin: 0; font-size: 1.2rem; font-weight: 800; letter-spacing: -0.01em; }
.pv2-grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.pv2-tile { background: var(--surface-2); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pv2-tile h3 { margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pv2-tile-link { color: inherit; text-decoration: none; }
.pv2-tile-link:hover { outline: 1px solid var(--primary, #ff5a4e); }
.pv2-row { font-size: .9rem; color: inherit; text-decoration: none; }
a.pv2-row:hover { color: var(--primary, #ff5a4e); }
.pv2-tag { font-size: .7rem; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); }
.pv2-tag-late { color: #dc2626; border-color: rgba(220,38,38,.35); } .pv2-tag-soon { color: #d97706; border-color: rgba(217,119,6,.35); }
.pv2-note { margin: 0; font-size: .9rem; }
.pv2-phgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.pv2-ph { background: var(--surface); border: 1px solid var(--line); }
.pv2-task { display: flex; justify-content: space-between; gap: 10px; font-size: .88rem; padding: 6px 0; border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.pv2-task:hover span { color: var(--primary, #ff5a4e); }
.pv2-task em { font-style: normal; font-size: .75rem; font-weight: 700; white-space: nowrap; color: var(--muted); }
.pv2-task em.pv2-when-late { color: #dc2626; } .pv2-task em.pv2-when-soon { color: #d97706; }
.pv2-spark { width: 100%; height: 40px; }
.pv2-spark polyline { fill: none; stroke: var(--primary, #ff5a4e); stroke-width: 2; }
.pv2-up { color: #16a34a; font-weight: 700; } .pv2-down { color: #dc2626; font-weight: 700; }
.pv2-goal { display: flex; flex-direction: column; font-size: .88rem; }
.pv2-all-h { margin: 10px 0 0; font-size: 1.2rem; font-weight: 800; scroll-margin-top: 90px; }
.pj-try-v2 { margin: 0 0 0 auto; }

/* ===== v2 look: switch + app shell (opt-in per person) ===== */
.ui-switch { margin: 0; }
.ui-switch button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); color: inherit; border-radius: 99px; padding: 5px 10px 5px 6px; font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; min-height: 32px; }
.ui-switch button:hover { border-color: var(--primary, #ff5a4e); }
.v2-toggle { position: relative; display: inline-block; width: 30px; height: 18px; border-radius: 99px; background: #cbd2dc; flex: none; transition: background .15s; }
.v2-toggle i { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .15s; }
.v2-toggle.is-on { background: var(--primary, #ff5a4e); }
.v2-toggle.is-on i { left: 14px; }
/* v2: top bar = global navigation; left sidebar = context for the page. */
.v2tb-link { display: none; }
html.ui-v2 .action-bar { display: none !important; }
/* The tools rail stays on the right edge in v2 — the page keeps clear of it. */
@media (min-width: 1201px) { html.ui-v2 .v2-body { padding-right: 88px; } }
/* v1 reaches Production through the floating tools rail; v2 hides the rail, so the menu is back in the top bar. */
@media (min-width: 1201px) { html.ui-v2 .topnav .nav-prod { display: block; } }
html.ui-v2 body { background: #f4f5f8; }
html.ui-v2[data-theme="dark"] body { background: var(--bg); }
html.ui-v2 .v2tb-link { display: inline-flex; align-items: center; gap: 6px; position: relative; padding: 7px 10px; border-radius: 10px; color: inherit; text-decoration: none; font: inherit; font-size: .86rem; font-weight: 600; background: transparent; border: 0; cursor: pointer; min-height: 36px; }
html.ui-v2 .v2tb-link:hover { background: var(--surface-2); text-decoration: none; }
html.ui-v2 .v2tb-n { font-size: .68rem; font-weight: 700; padding: 1px 6px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); }
html.ui-v2 .v2tb-hot { background: var(--primary, #ff5a4e); border-color: var(--primary, #ff5a4e); color: #fff; }
@media (max-width: 1440px) { html.ui-v2 .v2tb-link > span:not(.v2tb-n) { display: none; } }
html.ui-v2 .topbar-name { display: none; }
/* Pages built for the full width: wide tables scroll inside their box beside the sidebar. */
.v2-body.has-ctx > .page [class*="table-wrap"], .v2-body.has-ctx > .page .rpw-scroll, .v2-body.has-ctx > .page .rp-card { max-width: 100%; overflow-x: auto; }
/* Wide trackers that break out of the v1 column stay inside it beside the sidebar. */
.v2-body.has-ctx > .page .sa-ov-table-wrap, .v2-body.has-ctx > .page .sh-people, .v2-body.has-ctx > .page .sh-filters, .v2-body.has-ctx > .page .sh-wrap { width: 100%; max-width: 100%; margin-left: 0; overflow-x: auto; }
.v2-body { display: block; }
.v2-body.has-ctx { display: flex; gap: 24px; align-items: flex-start; max-width: 1480px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
.v2-body.has-ctx > .page { flex: 1 1 auto; min-width: 0; max-width: none; margin: 0; padding-left: 0; padding-right: 0; }
.v2ctx { flex: 0 0 272px; width: 272px; display: flex; flex-direction: column; gap: 12px; padding-top: 38px; box-sizing: border-box; }
.v2-body.has-ctx > .pv2-side { flex: 0 0 290px; max-width: 290px; padding-top: 38px; }
@media (max-width: 960px) {
  .v2-body.has-ctx { display: block; padding: 0 16px; }
  .v2ctx, .v2-body.has-ctx > .pv2-side { width: auto; max-width: none; padding-top: 20px; }
}
.v2ctx-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px; box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 6px 18px rgba(16,24,40,.04); }
.v2ctx-clienthead { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.v2ctx-clienthead:hover { border-color: var(--primary, #ff5a4e); text-decoration: none; }
.v2ctx-cn { display: flex; flex-direction: column; min-width: 0; }
.v2ctx-cn strong { overflow-wrap: anywhere; }
.v2ctx-mini { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.v2ctx-nav { display: flex; flex-direction: column; gap: 1px; padding: 10px; }
.v2ctx-nav .pv2-eyebrow { margin: 4px 8px 6px; }
.v2ctx-h { margin: 10px 8px 4px; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.v2ctx-nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: inherit; text-decoration: none; font-size: .9rem; min-height: 36px; box-sizing: border-box; }
.v2ctx-nav a:hover { background: var(--surface-2); text-decoration: none; }
.v2ctx-nav a.is-on { background: color-mix(in srgb, var(--primary, #ff5a4e) 11%, transparent); color: var(--primary, #ff5a4e); font-weight: 700; }
.v2ctx-nav a > i, .v2ctx-nav a > svg { width: 18px; flex: none; text-align: center; color: var(--muted); }
.v2ctx-nav a.is-on > i, .v2ctx-nav a.is-on > svg { color: var(--primary, #ff5a4e); }
.v2ctx-n { margin-left: auto; font-size: .7rem; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: var(--surface-2); }
.v2ctx-glance { display: flex; flex-direction: column; gap: 2px; padding: 12px; }
.v2ctx-glance .pv2-eyebrow { margin: 2px 6px 6px; }
.v2ctx-stat { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 8px; border-radius: 10px; color: inherit; text-decoration: none; font-size: .88rem; min-height: 36px; box-sizing: border-box; }
.v2ctx-stat:hover { background: var(--surface-2); text-decoration: none; }
.v2ctx-stat strong { font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.v2ctx-tone-bad { color: #dc2626; } .v2ctx-tone-warn { color: #d97706; } .v2ctx-tone-ok { color: #16a34a; }
/* The client tools' horizontal client bar is the sidebar now. */
html.ui-v2 .v2-body.has-ctx .cbar { display: none; }
/* On the client page the shell holds the client sidebar: the page's own layout goes full width. */
.pv2.pv2-shell { display: block; }
/* …and the header slims down: name, domain and PM are in the sidebar already. */
.pv2-shell .proj-banner { padding: 16px 20px; border-radius: 18px; }
.pv2-shell .proj-banner .db-topo, .pv2-shell .proj-banner .project-head-icon, .pv2-shell .proj-banner-stats, .pv2-shell .proj-client-card { display: none !important; }
.pv2-shell .proj-banner-titles h1 { font-size: 1.35rem; }
.pv2-shell .proj-banner-id { gap: 10px; }
html.ui-v2 .card { border-radius: 16px; }

/* Clients: the whole book in one list */
.cbk-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.cbk-chip { font: inherit; font-size: .85rem; font-weight: 600; padding: 7px 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); color: inherit; cursor: pointer; min-height: 36px; }
.cbk-chip em { font-style: normal; color: var(--muted); margin-left: 4px; }
.cbk-chip.is-on { background: var(--ink, #141a24); color: var(--bg, #fff); border-color: var(--ink, #141a24); }
.cbk-chip.is-on em { color: inherit; opacity: .7; }
.cbk-find { flex: 1 1 200px; max-width: 280px; margin-left: auto; }
.cbk-pm select { min-height: 36px; }
.cbk-wrap { padding: 0; overflow-x: auto; }
.cbk-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.cbk-table th { text-align: left; font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 12px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.cbk-table th[data-sort] { cursor: pointer; }
.cbk-table th[data-sort]:hover { color: var(--ink); }
.cbk-table th[aria-sort="ascending"]::after { content: ' ↑'; } .cbk-table th[aria-sort="descending"]::after { content: ' ↓'; }
.cbk-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.cbk-table tbody tr:hover td { background: color-mix(in srgb, var(--primary, #ff5a4e) 4%, transparent); }
.cbk-num { text-align: right; white-space: nowrap; }
.cbk-client a { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; min-width: 0; }
.cbk-client a > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.cbk-client a:hover strong { color: var(--primary, #ff5a4e); }
.cbk-av { width: 32px; height: 32px; flex: none; border-radius: 9px; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }
.cbk-frozen { margin-left: 4px; }
.cbk-health { display: inline-block; min-width: 34px; text-align: center; font-weight: 800; padding: 2px 6px; border-radius: 8px; }
.cbk-h-ok { background: #e7f6ec; color: #15803d; } .cbk-h-warn { background: #fdf3e2; color: #b45309; } .cbk-h-bad { background: #fdecea; color: #b91c1c; }
.cbk-loop { min-width: 190px; }
.cbk-cells { display: inline-flex; gap: 3px; vertical-align: middle; margin-right: 8px; }
.cbk-cell { width: 14px; height: 14px; border-radius: 4px; background: var(--surface-2); }
.cbk-c-ok { background: #22c55e; } .cbk-c-warn { background: #f59e0b; } .cbk-c-red { background: #ef4444; }
.cbk-next { font-size: .82rem; font-weight: 600; white-space: nowrap; }
.cbk-allok { font-size: .82rem; color: #16a34a; font-weight: 600; }
.cbk-late { color: #dc2626; font-weight: 700; }
.cbk-up { color: #16a34a; font-weight: 700; font-size: .8rem; } .cbk-down { color: #dc2626; font-weight: 700; font-size: .8rem; }
.cbk-urg { display: inline-block; width: 64px; height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; vertical-align: middle; }
.cbk-urg i { display: block; height: 100%; width: var(--u); background: linear-gradient(90deg, #f59e0b, #ef4444); border-radius: 99px; }
.cbk-none { padding: 14px; }
.opb-next { display: inline-block; font-size: .85rem; font-weight: 700; padding: 5px 10px; border-radius: 9px; text-decoration: none; white-space: nowrap; background: var(--surface-2); color: inherit; }
.opb-next:hover { text-decoration: none; filter: brightness(.96); }
.aub-cell { white-space: nowrap; }
.aub-link { display: inline-flex; align-items: baseline; gap: 6px; color: inherit; text-decoration: none; }
.aub-link:hover strong { color: var(--primary, #ff5a4e); }
.aub-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: baseline; }
.aub-ok { background: #22c55e; } .aub-due { background: #f59e0b; } .aub-overdue { background: #ef4444; } .aub-never { background: transparent; border: 2px dashed #94a3b8; width: 8px; height: 8px; }
.aub-key { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.slb-funnel { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin: 0 0 14px; }
.slb-step { flex: 1 1 150px; display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; text-decoration: none; color: inherit; }
.slb-step:hover { border-color: var(--primary, #ff5a4e); text-decoration: none; }
.slb-n { font-size: 1.8rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.slb-arrow { align-self: center; color: var(--muted); font-size: 1.2rem; }
@media (max-width: 760px) { .slb-arrow { display: none; } }
.slb-won { display: flex; flex-wrap: wrap; gap: 12px 40px; padding: 16px 20px; margin: 0 0 18px; }
.slb-won > div { display: flex; flex-direction: column; }
.slb-won strong { font-size: 1.5rem; font-weight: 800; color: #15803d; }
.slb-won em { font-style: normal; font-size: .9rem; color: var(--muted); font-weight: 600; }
.slb-list { padding: 4px 0; }
.slb-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.slb-row:last-child { border-bottom: 0; }
.slb-row:hover { background: var(--surface-2); text-decoration: none; }
.slb-who { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.slb-val { font-weight: 700; white-space: nowrap; }
.slb-go { font-size: .85rem; font-weight: 600; color: var(--primary, #ff5a4e); white-space: nowrap; }
.tmb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.tmb-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; color: inherit; text-decoration: none; border-top: 3px solid transparent; }
.tmb-card:hover { text-decoration: none; border-color: var(--primary, #ff5a4e); color: inherit; }
.tmb-heavy { border-top-color: #ef4444; } .tmb-light { border-top-color: #22c55e; } .tmb-off { border-top-color: #94a3b8; }
.tmb-top { display: flex; align-items: center; gap: 10px; }
.tmb-who { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.tmb-pill { font-size: .72rem; font-weight: 700; padding: 2px 9px; border-radius: 99px; background: var(--surface-2); white-space: nowrap; }
.tmb-pill-heavy { background: #fdecea; color: #b91c1c; } .tmb-pill-light { background: #e7f6ec; color: #15803d; } .tmb-pill-off { background: #eef1f5; color: #475569; }
.tmb-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.tmb-nums span { display: flex; flex-direction: column; }
.tmb-nums strong { font-size: 1.35rem; font-weight: 800; line-height: 1.1; }
.tmb-nums em { font-style: normal; font-size: .75rem; color: var(--muted); }
.tmb-bad strong { color: #dc2626; }
.tmb-hours-l { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); }
.tmb-hours-l strong { color: var(--ink); }
.tmb-off { color: #475569; font-weight: 600; margin: 0; }
.tmb-card p { margin: 0; }
.opb-bad { background: #fdecea; color: #b91c1c; } .opb-warn { background: #fdf3e2; color: #b45309; } .opb-ok { background: #e7f6ec; color: #15803d; }
.cbk-empty { padding: 18px; }

/* Brand yellow as TEXT: a darker amber on light backgrounds, the yellow itself on dark. */
:root { --accent-ink: #8a5a00; }
html[data-theme="dark"] { --accent-ink: var(--accent); }
/* ===== v2 design layer: one modern look for the shared building blocks every page uses.
   Applies only with the v2 look on (html.ui-v2), so v1 is untouched. ===== */
html.ui-v2 { --display: 'Inter', system-ui, sans-serif; --radius: 16px; --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(16,24,40,.05), 0 6px 18px rgba(16,24,40,.04); }
html.ui-v2[data-theme="dark"] { --shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.25); }
/* Page header: tighter, quieter */
html.ui-v2 .hero { margin-bottom: 22px; align-items: flex-end; }
html.ui-v2 .display { font-weight: 800; font-size: clamp(1.55rem, 2.6vw, 2.05rem); letter-spacing: -0.025em; line-height: 1.15; }
html.ui-v2 .eyebrow { font-size: .68rem; letter-spacing: .12em; margin-bottom: 4px; }
html.ui-v2 .lead { font-size: .98rem; max-width: 72ch; }
html.ui-v2 .hero-tight { padding-bottom: 0; margin-bottom: 18px; }
html.ui-v2 .hero-tight::after { display: none; }
html.ui-v2 .section-title { font-family: var(--display); font-size: 1.12rem; font-weight: 800; letter-spacing: -0.01em; margin: 26px 0 12px; }
html.ui-v2 .panel-head h2 { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.01em; }
html.ui-v2 h1, html.ui-v2 h2, html.ui-v2 h3 { letter-spacing: -0.01em; }
/* Breadcrumb: plain text trail, not a floating pill */
html.ui-v2 .breadcrumb { background: transparent; border: 0; box-shadow: none; padding: 0; margin-bottom: 12px; font-size: .82rem; }
html.ui-v2 .breadcrumb a { padding: 2px 4px; }
/* Cards */
html.ui-v2 .card { border-radius: var(--radius); border-color: var(--line); box-shadow: var(--shadow); }
/* Buttons: flat, consistent */
html.ui-v2 .btn { border-radius: 10px; font-weight: 600; padding: 9px 16px; min-height: 38px; }
html.ui-v2 .btn-sm { padding: 6px 12px; min-height: 32px; font-size: .84rem; border-radius: 9px; }
html.ui-v2 .btn-primary { background: var(--primary); box-shadow: none; }
html.ui-v2 .btn-primary:hover { background: var(--primary-d, var(--primary)); filter: none; }
html.ui-v2 .btn-primary:disabled, html.ui-v2 .btn-primary[disabled] { background: var(--muted); }
html.ui-v2 .btn-ghost:not(.op-code-copy):not(.vault-copy) { background: var(--surface); border-color: var(--line-2); }
html.ui-v2 .btn-ghost:not(.op-code-copy):not(.vault-copy):hover { background: var(--surface-2); }
/* Inputs */
html.ui-v2 :is(input[type=text], input[type=email], input[type=password], input[type=date], input[type=url], input[type=number], input[type=search], input[type=datetime-local], input[type=time], input[type=tel], textarea, select) {
  border-radius: 10px; border-color: var(--line-2); background: var(--surface); padding: 9px 12px; }
html.ui-v2 :is(input, textarea, select):focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #ff5a4e) 18%, transparent); }
html.ui-v2 .sh-search { border-radius: 10px; padding: 8px 12px; }
/* Tabs: one segmented control everywhere */
html.ui-v2 .tabs { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 4px; gap: 2px; }
html.ui-v2 .tab { border-radius: 9px; padding: 7px 14px; font-size: .87rem; }
html.ui-v2 .tab.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(16,24,40,.08), 0 0 0 1px var(--line); }
html.ui-v2 .hbt { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 4px; box-shadow: none; }
html.ui-v2 .hbt-tab { border-radius: 9px; padding: 6px 12px; }
html.ui-v2 .hbt-tab.is-on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(16,24,40,.08), 0 0 0 1px var(--line); }
html.ui-v2 .hbt-label { color: var(--muted); }
/* Chips: selected = filled */
html.ui-v2 .sh-chip { border-radius: 99px; padding: 6px 12px; min-height: 32px; }
html.ui-v2 .sh-chip.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
html.ui-v2 .sh-chip.active em { color: inherit; opacity: .7; }
/* Tables: one header style, quiet row hover */
html.ui-v2 .page table[class*="table"] th { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
html.ui-v2 .page table[class*="table"] tbody tr:hover > td { background: color-mix(in srgb, var(--primary, #ff5a4e) 4%, transparent); }
/* Empty states: calm, dashed */
html.ui-v2 .empty-state { border-style: dashed; box-shadow: none; padding: 40px 28px; }
/* Pills */
html.ui-v2 .status-pill, html.ui-v2 .pill { border-radius: 99px; }

/* ===== Phones (v1 and v2): nothing scrolls sideways (checked by the visual suite at 390px) ===== */
.mnu-wrap > *, .lvc-grid > *, .lvc-main > * { min-width: 0; }
@media (max-width: 640px) { .lvc-h, .lvc-persona { flex-wrap: wrap; } .lvc-persona > * { min-width: 0; max-width: 100%; } }
@media (max-width: 640px) {
  .page table { display: block !important; max-width: 100%; overflow-x: auto !important; }
  .ko-file > *, .bh-custom > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .bh-custom { flex-wrap: wrap; }
  .page label.field, .page form > *, .pgc-siterow > *, .ko-form > *, .bh-bar > * { min-width: 0; max-width: 100%; }
  .ko-file, .bh-bar, .op-report-actions, .mnu-edit-h { flex-wrap: wrap; }
  .wl-viewtoggle { max-width: 100%; overflow-x: auto; }
  .mnu-url { display: none; }
}

/* ===== Dark mode: badges, chips and pills stay readable (checked by the visual suite) ===== */
html[data-theme="dark"] .bv-chip.active, html[data-theme="dark"] .sp-vt.active { color: #1a1406; }
html[data-theme="dark"] .er-badge-open, html[data-theme="dark"] .hey-ft-overdue, html[data-theme="dark"] .esg-st-void, html[data-theme="dark"] .pgc-miss, html[data-theme="dark"] .pgc-warn, html[data-theme="dark"] .pgc-term { color: #fca5a5; }
html[data-theme="dark"] .er-badge-fixed, html[data-theme="dark"] .esg-st-signed, html[data-theme="dark"] .esg-pay-paid { color: #86efac; }
html[data-theme="dark"] .er-badge-back, html[data-theme="dark"] .hey-ft-today, html[data-theme="dark"] .esg-st-viewed, html[data-theme="dark"] .pgc-diff { color: #fcd34d; }
html[data-theme="dark"] .hey-ft-urgent { color: #fdba74; }
html[data-theme="dark"] .hey-ft-reply, html[data-theme="dark"] .esg-st-sent { color: #93c5fd; }
html[data-theme="dark"] .pgc-add { color: #a5b4fc; }
html[data-theme="dark"] .esg-badge { color: #cbd5e1; filter: none; }
html[data-theme="dark"] .uxa-jump-off { background: #475569; }
/* v2 pages: pills and tags go translucent in dark instead of bright pastel blocks */
html[data-theme="dark"] .cbk-h-ok, html[data-theme="dark"] .opb-ok, html[data-theme="dark"] .tmb-pill-light { background: rgba(34,197,94,.16); color: #86efac; }
html[data-theme="dark"] .cbk-h-warn, html[data-theme="dark"] .opb-warn { background: rgba(245,158,11,.16); color: #fcd34d; }
html[data-theme="dark"] .cbk-h-bad, html[data-theme="dark"] .opb-bad, html[data-theme="dark"] .tmb-pill-heavy { background: rgba(239,68,68,.16); color: #fca5a5; }
html[data-theme="dark"] .tmb-pill-off { background: rgba(148,163,184,.18); color: #cbd5e1; }
html[data-theme="dark"] .cbk-late, html[data-theme="dark"] .pv2-late, html[data-theme="dark"] .tmb-bad strong, html[data-theme="dark"] .ptl-down, html[data-theme="dark"] .pv2-down, html[data-theme="dark"] .cbk-down, html[data-theme="dark"] .v2ctx-tone-bad { color: #f87171; }
html[data-theme="dark"] .cbk-up, html[data-theme="dark"] .pv2-up, html[data-theme="dark"] .ptl-up, html[data-theme="dark"] .pv2-done, html[data-theme="dark"] .cbk-allok, html[data-theme="dark"] .v2ctx-tone-ok, html[data-theme="dark"] .slb-won strong { color: #4ade80; }
html[data-theme="dark"] .pv2-soon, html[data-theme="dark"] .v2ctx-tone-warn, html[data-theme="dark"] .usg-kpi-warn strong { color: #fbbf24; }
html[data-theme="dark"] .pv2-tag-late, html[data-theme="dark"] .pj-why-overdue { color: #fca5a5; }
html[data-theme="dark"] .pv2-tag-soon, html[data-theme="dark"] .pj-why-blocked, html[data-theme="dark"] .pj-why-waiting { color: #fcd34d; }
html[data-theme="dark"] .pv2-task em.pv2-when-late { color: #f87171; } html[data-theme="dark"] .pv2-task em.pv2-when-soon { color: #fbbf24; }
html[data-theme="dark"] .v2-toggle:not(.is-on) { background: #475569; }
html[data-theme="dark"] .ui-switch button { background: var(--surface); }

/* Client favicon over the letter tile (letter shows if there's no icon). */
.pv2-av { position: relative; overflow: hidden; }
.pv2-fav { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 18%; background: #fff; box-sizing: border-box; }

/* v2: the round "start timer" button is gone. The strip's "Start a timer" still opens the picker. */
html.ui-v2 .time-fab-start { background: none; box-shadow: none; width: 0; height: 0; overflow: visible; }
html.ui-v2 .time-fab-start .time-fab-startbtn { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; }
/* v2 on phones: a calm header and the page before its sidebar. */
@media (max-width: 960px) {
  html.ui-v2 .v2-body.has-ctx { display: flex; flex-direction: column; }
  html.ui-v2 .v2-body.has-ctx > .page { width: 100%; }
  html.ui-v2 .v2-body.has-ctx > .v2ctx, html.ui-v2 .v2-body.has-ctx > .pv2-side { order: 2; width: 100%; padding-bottom: 24px; }
}
@media (max-width: 640px) {
  html.ui-v2 .topbar-user .v2tb-link { display: none; }       /* My desk + alerts live in the bottom bar; Summit is the bubble */
  html.ui-v2 .timer-strip-idle { display: none; }              /* the Timer tab in the bottom bar starts one */
  html.ui-v2 .topbar-user { gap: 14px; }
  /* Client header: name, site and PM only. Search is in the top bar, the team is in the sidebar. */
  html.ui-v2 .proj-banner-right .proj-search, html.ui-v2 .proj-banner-right form[role="search"],
  html.ui-v2 .proj-banner-right .member-stack, html.ui-v2 .proj-banner-right input[type="search"] { display: none; }
  html.ui-v2 .proj-banner { padding: 16px; }
  /* Client tabs: one swipeable row instead of three wrapped rows. */
  html.ui-v2 .pv2-main > .tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  html.ui-v2 .pv2-main > .tabs::-webkit-scrollbar { display: none; }
  html.ui-v2 .pv2-main > .tabs .tab { flex: 0 0 auto; white-space: nowrap; }
  /* My desk: the four counts as one slim row; task controls drop under the task. */
  html.ui-v2 .hey-digest { grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 16px; }
  html.ui-v2 .hey-kpi { padding: 8px 6px; text-align: center; align-items: center; }
  html.ui-v2 .hey-kpi-n { font-size: 1.15rem; }
  html.ui-v2 .hey-kpi-l { font-size: .62rem; letter-spacing: .02em; }
  html.ui-v2 .hey-task { flex-wrap: wrap; }
  html.ui-v2 .hey-task-main { flex: 1 1 calc(100% - 40px); }
  html.ui-v2 .hey-task-controls { margin-left: 34px; flex-wrap: wrap; }
  html.ui-v2 .hero-tight .lead { font-size: .95rem; }
  /* Client header: the ⋯ menu sits top-right instead of on its own row. The contact is in the sidebar. */
  html.ui-v2 .proj-banner-top { padding-right: 52px; }
  html.ui-v2 .proj-banner-right { position: absolute; top: 0; right: 0; flex: none; margin: 0; }
  html.ui-v2 .proj-banner-right .proj-client-card { display: none; }
  /* My desk section headings stay on one line. */
  html.ui-v2 .hey-section-h { flex-wrap: wrap; row-gap: 6px; }
  html.ui-v2 .hey-section-h h2 { white-space: nowrap; font-size: 1.1rem; }
  html.ui-v2 #desk .hey-section-h > .muted { display: none; }
  html.ui-v2 .hey-section-link { margin-left: auto; white-space: nowrap; }
}

/* v2: Summit sits in the tools rail on wide screens instead of floating over the page. */
.tool-dock-sep { display: block; width: 28px; height: 1px; margin: 4px auto; background: var(--line); }
@media (min-width: 1201px) {
  html.ui-v2 .summit-fab, html.ui-v2 .summit-fab-dot { display: none !important; }
  html.ui-v2 .summit { right: 92px; bottom: 20px; }
}
/* v2 client header: one row — name, site, PM, actions. The team and contact are in the sidebar. */
@media (min-width: 641px) {
  .pv2-shell .proj-banner { padding: 12px 18px; }
  .pv2-shell .proj-banner-top { align-items: center; }
  .pv2-shell .proj-banner-titles { display: flex; align-items: center; gap: 6px 16px; flex-wrap: wrap; }
  .pv2-shell .proj-banner-meta { margin-top: 0; }
  .pv2-shell .proj-banner-right .member-stack { display: none; }
}
.hey-clear { display: flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 10px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--success, #16a34a) 9%, var(--surface)); color: var(--ink); font-weight: 600; font-size: .92rem; }
.hey-clear .fa-solid, .hey-clear i { color: var(--success, #16a34a); }
.hey-inline-err { flex-basis: 100%; color: var(--danger, #dc2626); font-size: .8rem; margin-top: 4px; }

/* v2 top bar: one bell, My desk broken down by kind. */
.v2tb-bell { display: none; position: relative; }
html.ui-v2 .v2tb-bell { display: inline-block; }
.v2tb-bell > summary { list-style: none; }
.v2tb-bell > summary::-webkit-details-marker { display: none; }
.v2tb-dot { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--primary, #ff5a4e); }
.v2tb-bellpop { position: absolute; right: 0; top: calc(100% + 8px); width: 340px; max-width: calc(100vw - 24px); z-index: 300; padding: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 2px 6px rgba(9,19,45,.06), 0 18px 44px rgba(9,19,45,.16); }
.v2tb-bell-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 4px 10px; }
.v2tb-bell-h strong { font-size: .98rem; }
.v2tb-bell-h [data-bell-sum] { font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: color-mix(in srgb, var(--primary, #ff5a4e) 12%, transparent); color: var(--accent-ink, var(--primary)); }
.v2tb-bell-h [data-bell-sum]:empty { display: none; }
.v2tb-bell-sub { margin: 0 4px 4px; font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.v2tb-bell-next { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.v2tb-bell-next:hover { background: var(--surface-2); text-decoration: none; color: var(--ink); }
.v2tb-bell-nt { display: flex; flex-direction: column; min-width: 0; }
.v2tb-bell-nt strong { font-size: .84rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2tb-bell-nt span { font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2tb-bell-ic { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 auto; border-radius: 8px; font-size: 13px;
  background: var(--surface-2); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.v2tb-bell-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
[data-bell-top]:empty + .v2tb-bell-grid { margin-top: 0; padding-top: 0; border-top: 0; }
.v2tb-bell-tile { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 10px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: .8rem; font-weight: 600; }
.v2tb-bell-tile:hover { background: var(--surface-2); text-decoration: none; color: var(--ink); }
.v2tb-bell-tile .v2tb-bell-ic { width: 24px; height: 24px; font-size: 11px; box-shadow: none; }
.v2tb-bell-tl { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2tb-bell-tile b { font-size: .8rem; font-variant-numeric: tabular-nums; }
.v2tb-bell-tile.tone-red .v2tb-bell-ic { background: color-mix(in srgb, #ef4444 14%, transparent); color: #dc2626; }
.v2tb-bell-tile.tone-blue .v2tb-bell-ic { background: color-mix(in srgb, #3b82f6 14%, transparent); color: #2563eb; }
.v2tb-bell-tile.tone-amber .v2tb-bell-ic { background: color-mix(in srgb, #f59e0b 16%, transparent); color: #b45309; }
.v2tb-bell-tile.tone-violet .v2tb-bell-ic { background: color-mix(in srgb, #8b5cf6 14%, transparent); color: #7c3aed; }
.v2tb-bell-tile.tone-green .v2tb-bell-ic { background: color-mix(in srgb, #22c55e 14%, transparent); color: #15803d; }
.v2tb-bell-tile.tone-teal .v2tb-bell-ic { background: color-mix(in srgb, #14b8a6 14%, transparent); color: #0f766e; }
[data-theme="dark"] .v2tb-bell-tile.tone-red .v2tb-bell-ic { color: #f87171; }
[data-theme="dark"] .v2tb-bell-tile.tone-blue .v2tb-bell-ic { color: #60a5fa; }
[data-theme="dark"] .v2tb-bell-tile.tone-amber .v2tb-bell-ic { color: #fbbf24; }
[data-theme="dark"] .v2tb-bell-tile.tone-violet .v2tb-bell-ic { color: #a78bfa; }
[data-theme="dark"] .v2tb-bell-tile.tone-green .v2tb-bell-ic { color: #4ade80; }
[data-theme="dark"] .v2tb-bell-tile.tone-teal .v2tb-bell-ic { color: #2dd4bf; }
.v2tb-bell-empty { display: flex; align-items: center; gap: 8px; margin: 4px; color: var(--muted); font-size: .88rem; }
.v2tb-bell-foot { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; padding: 8px; border-radius: 10px;
  background: var(--surface-2); font-weight: 700; font-size: .84rem; color: var(--ink); text-decoration: none; }
.v2tb-bell-foot:hover { background: color-mix(in srgb, var(--primary, #ff5a4e) 10%, var(--surface-2)); text-decoration: none; color: var(--ink); }
@media (max-width: 640px) {
  html.ui-v2 .topbar-user .v2tb-bell .v2tb-link { display: inline-flex; }   /* the bell stays on phones */
  .v2tb-bellpop { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; }
}

/* v2 menus: flat and quiet. Neutral icon chips, no glow ring, the current page is a soft highlight. */
html.ui-v2 .popover.nav-mega { padding: 8px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 2px 6px rgba(9,19,45,.06), 0 16px 40px rgba(9,19,45,.14); }
html.ui-v2 .popover.nav-mega::after, html.ui-v2 .nav-mega-colh::before, html.ui-v2 .nav-mega-item::after, html.ui-v2 .nav-mega-item.current::before { display: none; }
html.ui-v2 .nav-mega-head { padding: 6px 10px 4px; font-size: .66rem; letter-spacing: .06em; }
html.ui-v2 .nav-mega-colh { padding: 8px 10px 4px; }
html.ui-v2 .topnav .nav-mega-item, html.ui-v2 .nav-mega-item { align-items: center; gap: 10px; padding: 6px 8px; border-radius: 9px; transform: none; }
html.ui-v2 .nav-mega-item:hover { background: var(--surface-2); transform: none; }
html.ui-v2 .nav-mega-ic, html.ui-v2 .nav-mega-item:hover .nav-mega-ic, [data-theme="dark"] html.ui-v2 .nav-mega-ic {
  width: 30px; height: 30px; border-radius: 8px; background: var(--surface-2); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); transform: none; }
html.ui-v2 .nav-mega-item:hover .nav-mega-ic { color: var(--ink); }
html.ui-v2 .nav-mega-ic svg, html.ui-v2 .nav-mega-ic i { font-size: 15px !important; width: 15px; height: 15px; }
html.ui-v2 .nav-mega-text strong { display: flex; align-items: center; gap: 6px; font-size: .88rem; font-weight: 600; color: var(--ink); }
html.ui-v2 .nav-mega-desc { font-size: .74rem; }
html.ui-v2 .nav-mega-text { flex: 1 1 auto; }
html.ui-v2 .nav-mega-item.current { background: color-mix(in srgb, var(--primary, #ff5a4e) 8%, var(--surface)); }
html.ui-v2 .nav-mega-item.current .nav-mega-ic { background: var(--primary, #ff5a4e); color: #fff; box-shadow: none; }
html.ui-v2 .nav-mega-item.current strong { color: var(--ink); }
html.ui-v2 .nav-mega-text .nav-badge { margin-left: auto; font-size: .66rem; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: var(--primary, #ff5a4e); color: #fff; }
html.ui-v2 .nav-mega-foot { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
html.ui-v2 .nav-mega-wide .nav-mega-col + .nav-mega-col { border-image: none; border-left: 1px solid var(--line); }

/* War Room tag-team: who's here, invite, teammates' messages and team notes. */
.wr-team { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.wr-here { display: inline-flex; align-items: center; }
.wr-here-av { margin-left: -6px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface); display: inline-flex; }
.wr-here-av:first-child { margin-left: 0; }
.wr-here-l { margin-left: 8px; font-size: .76rem; color: var(--muted); font-weight: 600; white-space: nowrap; }
.wr-here-l::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; margin-right: 5px; vertical-align: 1px; }
.wr-invite { position: relative; }
.wr-invite > summary { list-style: none; cursor: pointer; }
.wr-invite > summary::-webkit-details-marker { display: none; }
.wr-invite-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; width: 260px; display: flex; flex-direction: column; gap: 8px; padding: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 34px rgba(9,19,45,.16); }
.wr-invite-pop select { width: 100%; }
.wr-row.wr-row-user.wr-row-mate { justify-content: flex-start; }
.wr-row-mate .wr-bubble-user { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); box-shadow: none; border-top-right-radius: 16px; border-top-left-radius: 6px; }
.wr-row-mate .wr-bubble-user .wr-meta { color: var(--muted); }
.wr-row-note .wr-bubble-user { background: color-mix(in srgb, #f59e0b 12%, var(--surface)); color: var(--ink); border: 1px dashed color-mix(in srgb, #f59e0b 55%, transparent); box-shadow: none; }
.wr-row-note .wr-bubble-user .wr-meta { color: var(--muted); }
.wr-note-toggle { display: inline-flex; align-items: center; gap: 5px; align-self: center; font-size: .74rem; font-weight: 600; color: var(--muted); white-space: nowrap; cursor: pointer; }
.wr-composer:has(#trm-note:checked) { border-color: color-mix(in srgb, #f59e0b 60%, transparent); background: color-mix(in srgb, #f59e0b 7%, var(--surface-2)); }
@media (max-width: 640px) { .wr-team { margin-left: 0; width: 100%; justify-content: space-between; } .wr-head { flex-wrap: wrap; } }

/* v2: search is always in the top bar (v1 kept it in the strip v2 hides). */
html.ui-v2 .topbar-search-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 10px 0 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); font: inherit; font-size: .84rem; }
html.ui-v2 .topbar-search-btn:hover { color: var(--ink); border-color: var(--line-2, var(--line)); }
.v2-search-l { min-width: 70px; text-align: left; }
.v2-search-k { font: inherit; font-size: .68rem; font-weight: 700; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); }
@media (max-width: 1400px) { html.ui-v2 .topbar-search-btn { padding: 0 10px; } .v2-search-l, .v2-search-k { display: none; } }
@media (max-width: 1100px) { html.ui-v2 .topbar-search-btn { border-color: transparent; background: none; } }

/* v2 sidebar: live activity feed (the client's own on client pages). */
.v2ctx-live .pv2-eyebrow { display: flex; align-items: center; gap: 6px; }
.v2ctx-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.5); animation: v2ctxPulse 2s infinite; }
@keyframes v2ctxPulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.45); } 70% { box-shadow: 0 0 0 7px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
@media (prefers-reduced-motion: reduce) { .v2ctx-live-dot { animation: none; } }
.v2ctx-live-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-height: 360px; overflow-y: auto; }
.v2ctx-live-list a { display: flex; gap: 9px; align-items: flex-start; padding: 7px 4px; border-radius: 9px; color: var(--ink); text-decoration: none; }
.v2ctx-live-list a:hover { background: var(--surface-2); text-decoration: none; }
.v2ctx-live-list li + li a { border-top: 1px solid var(--line); border-radius: 0; }
.v2ctx-live-list li.is-new a { animation: v2ctxNew 2.4s ease; }
@keyframes v2ctxNew { from { background: color-mix(in srgb, #22c55e 14%, transparent); } to { background: transparent; } }
.v2ctx-live-av { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: .62rem; font-weight: 800; }
.v2ctx-live-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: .8rem; line-height: 1.35; }
.v2ctx-live-t > span:first-child { overflow-wrap: anywhere; }
.v2ctx-live-m { display: flex; align-items: center; gap: 5px; font-size: .7rem; color: var(--muted); }
.v2ctx-live-m i { width: 7px; height: 7px; border-radius: 2px; flex: 0 0 auto; }
.v2ctx-live-empty { margin: 2px 0; font-size: .8rem; color: var(--muted); }

/* Sidebar: open to-dos / overdue list, right in the card. */
.v2td-btns { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.v2td-btn { background: none; border: 0; padding: 2px 4px; margin: -2px -4px; border-radius: 6px; font: inherit; color: inherit; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.v2td-btn:hover, .v2td-btn[aria-expanded="true"] { background: var(--surface-2); text-decoration-color: currentColor; }
.v2td-btn-strong { font-weight: 700; font-size: inherit; }
.pv2-counts .v2td-btn { text-align: left; }
.v2td-pop { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); flex-basis: 100%; }
.v2ctx-mini { flex-wrap: wrap; }
.v2td-list { list-style: none; margin: 0; padding: 0; max-height: 340px; overflow-y: auto; }
.v2td-list a { display: flex; flex-direction: column; gap: 2px; padding: 6px 4px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: .8rem; line-height: 1.35; }
.v2td-list a:hover { background: var(--surface-2); text-decoration: none; }
.v2td-list li + li a { border-top: 1px solid var(--line); border-radius: 0; }
.v2td-list li.is-late .v2td-t::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #ef4444; margin-right: 6px; vertical-align: 2px; }
.v2td-m { display: flex; gap: 8px; font-size: .7rem; color: var(--muted); }
.v2td-list li.is-late .v2td-m b { color: #dc2626; }
[data-theme="dark"] .v2td-list li.is-late .v2td-m b { color: #f87171; }
.v2td-more { display: block; margin-top: 6px; font-size: .78rem; font-weight: 600; }

/* v2: hide the sidebar for full-width pages (status sheets, wide tables). */
.v2-side-edge { display: none; }
@media (min-width: 961px) {
  html.ui-v2 .v2-body.has-ctx { position: relative; }
  html.ui-v2 .v2-side-edge { display: block; flex: 0 0 0; width: 0; position: relative; align-self: stretch; margin-left: -24px; }
  html.ui-v2 .v2-side-toggle { position: sticky; top: 90px; margin-top: 46px; left: 0; transform: translateX(-50%); width: 24px; height: 24px; border-radius: 50%; padding: 0;
    display: grid; place-items: center; font-size: 10px; cursor: pointer; background: var(--surface); color: var(--muted); border: 1px solid var(--line); box-shadow: 0 2px 6px rgba(9,19,45,.08); z-index: 5; }
  html.ui-v2 .v2-side-toggle:hover { color: var(--ink); border-color: var(--line-2, var(--line)); }
  html.ui-v2.v2-side-off .v2-body.has-ctx > aside { display: none; }
  html.ui-v2.v2-side-off .v2-side-edge { margin-left: 0; }
  html.ui-v2.v2-side-off .v2-side-toggle { transform: translateX(-4px) rotate(180deg); }
  html.ui-v2.v2-side-off .v2-body.has-ctx { max-width: none; }
}

/* v2 client overview: the old side cards become a packed dashboard of widgets (no holes). */
.pv2-dash-h { display: none; }
.pv2 .pv2-dash-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 12px 0 2px; font-size: 1.15rem; }
.pv2 .pv2-dash-h span { font-size: .8rem; font-weight: 500; color: var(--muted); }
@media (min-width: 761px) {
  /* Row-by-row packing: cards read left to right; JS (app.js, packDash) sets each card's row span so the next one slots up under it. */
  .pv2 .ov-side .ov-side-fold-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-auto-rows: 4px; grid-auto-flow: row dense; column-gap: 16px; row-gap: 0; align-items: start; }
  .pv2 .ov-side .ov-side-fold-body > *, .pv2 #ov-extra-side > * { margin: 0 0 16px; min-width: 0; }
  .pv2 #ov-extra-side { display: contents; }
  .pv2 .ov-side .ov-side-fold-body > .ov-more { grid-column: 1 / -1; }
}
.pv2 .ov-side .ov-block.card, .pv2 #ov-extra-side > .card { border-radius: 16px; padding: 16px 18px; box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 6px 18px rgba(16,24,40,.04); }
.pv2 .ov-side .ov-block.card h3, .pv2 #ov-extra-side h3 { font-size: .98rem; }
.pv2 .ov-side .ov-block.card.is-folded { padding-bottom: 14px; }

/* Home: kudos shrink to one line when nothing is new. */
.db-kudos-slim { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 8px 0 18px; padding: 9px 14px;
  border: 1px dashed var(--line); border-radius: 12px; font-size: .86rem; color: var(--muted); }
.db-kudos-slim strong { color: var(--ink); }

/* Client contact card in the banner: readable in light mode (it was white-on-white). */
html:not([data-theme="dark"]) .proj-client-card { background: var(--surface-2, #f6f7f9); border-color: var(--line, #e5e7eb); backdrop-filter: none; }
html:not([data-theme="dark"]) .proj-client-card .pcc-row { color: var(--ink, #0f172a); }
html:not([data-theme="dark"]) .proj-client-card .pcc-row i, html:not([data-theme="dark"]) .proj-client-card .pcc-row svg { color: var(--muted, #64748b); }
html:not([data-theme="dark"]) .proj-client-card a.pcc-row:hover { color: var(--primary, #ff5a4e); }

/* My desk: Clear all + "mute what you don't read" offers. */
.hey-clearall { margin: 0 0 0 auto; }
.hey-muteoffer { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; padding: 10px 14px; border-radius: 12px;
  background: color-mix(in srgb, #6366f1 8%, var(--surface)); border: 1px solid color-mix(in srgb, #6366f1 25%, var(--line)); font-size: .9rem; }
.hey-muteoffer-ic { color: #6366f1; }
.hey-muteoffer-t { flex: 1 1 260px; }
.hey-muteoffer-acts { display: flex; gap: 6px; margin: 0; }

/* v2: client contact lives in the sidebar's client card (no scrolling to find who to call). */
.pv2-contact { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: .86rem; }
.pv2-contact .ov-client-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.pv2-contact .ov-client-head h3 { margin: 0; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pv2-contact .ov-client-head h3 i { display: none; }
.pv2-contact .ov-contact { display: flex; align-items: flex-start; gap: 8px; padding: 3px 0; min-width: 0; }
.pv2-contact .ov-contact a, .pv2-contact .ov-contact span:last-child { overflow-wrap: anywhere; min-width: 0; }
.pv2-contact .ov-contact-l { flex: 0 0 16px; color: var(--muted); text-align: center; }
.pv2-contact .ov-client-edit form { margin-top: 8px; }
/* Edit opens on its own full-width line under the heading (it used to squeeze in beside it and push right). */
.pv2-contact .ov-client-head { flex-wrap: wrap; position: relative; }
.pv2-contact .ov-client-edit[open] { flex: 1 1 100%; min-width: 0; }
.pv2-contact .ov-client-edit form, .pv2-contact .ov-client-edit .field { width: 100%; min-width: 0; }
.pv2-contact .ov-client-edit input { width: 100%; max-width: 100%; box-sizing: border-box; }

.pv2-add-people { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 1px 8px; border-radius: 99px; font-size: .74rem; font-weight: 700;
  border: 1px dashed color-mix(in srgb, var(--primary, #ff5a4e) 60%, transparent); color: var(--accent-ink, var(--primary)); text-decoration: none; }
.pv2-add-people:hover { background: color-mix(in srgb, var(--primary, #ff5a4e) 10%, transparent); text-decoration: none; }

a.tool-dock-gbtn { text-decoration: none; color: inherit; box-sizing: border-box; text-align: center; }
a.tool-dock-gbtn:hover { text-decoration: none; }
.tool-dock-gbtn .tool-dock-gl { text-align: center; }
.tool-dock-war .tool-dock-gl { white-space: nowrap; font-size: .58rem; letter-spacing: 0; }
.tool-dock-war.is-on .tool-dock-ic { box-shadow: 0 0 0 2px color-mix(in srgb, var(--tc) 55%, transparent); }

/* My desk: bulk select (tick many alerts, close them in one go). */
.hey-sel-toggle { margin-left: auto; }
.is-selecting [data-nid] { position: relative; cursor: pointer; }
.hey-sel-box { flex: 0 0 auto; width: 18px; height: 18px; margin: 0 4px 0 2px; align-self: center; accent-color: var(--primary, #ff5a4e); cursor: pointer; }
.is-selecting .hey-item-sm { display: flex; align-items: center; }
.hey-bulkbar { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 250; display: flex; align-items: center; gap: 14px;
  padding: 10px 14px 10px 18px; border-radius: 14px; background: var(--ink, #0f172a); color: #fff; box-shadow: 0 16px 40px rgba(9,19,45,.3); font-size: .9rem; }
.hey-bulkbar .link-btn { color: #fff; opacity: .85; }
.hey-bulkbar[hidden] { display: none !important; }
[data-theme="dark"] .hey-bulkbar { background: #1e293b; border: 1px solid #334155; }
@media (max-width: 640px) { .hey-bulkbar { bottom: 76px; gap: 10px; flex-wrap: wrap; justify-content: center; width: calc(100vw - 24px); } }

/* Social batch: per-client notes for the AI. */
.sb-notes { padding: 12px 16px; margin: 0 0 14px; }
.sb-notes > summary { cursor: pointer; list-style: none; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.sb-notes > summary::-webkit-details-marker { display: none; }
.sb-notes textarea { width: 100%; margin-top: 10px; font: inherit; font-size: .9rem; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); resize: vertical; box-sizing: border-box; }
.sb-notes-foot { margin-top: 4px; }

/* On-page: share a preview before finalizing. */
.op-pub-preview { margin: 0 0 16px; padding: 10px 14px; border-radius: 12px; background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; font-size: .92rem; }
.op-preview-note { margin: 8px 0 10px; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, #f59e0b 9%, var(--surface)); font-size: .86rem; }
@media print { .op-pub-preview { border-color: #999; background: none; color: #000; } }

/* Social growth: weekly playbook board + client page. */
.sgr-rhythm { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding: 12px; margin-bottom: 14px; }
.sgr-rhythm-day { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); font-size: .82rem; }
.sgr-rhythm-day span { color: var(--muted); }
.sgr-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.sgr-counts, .sgr-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.sgr-pill { font-size: .78rem; font-weight: 700; padding: 3px 10px; border-radius: 99px; }
.sgr-red { background: color-mix(in srgb, #ef4444 14%, transparent); color: #b91c1c; }
.sgr-amber { background: color-mix(in srgb, #f59e0b 16%, transparent); color: #92400e; }
.sgr-green { background: color-mix(in srgb, #22c55e 14%, transparent); color: #15803d; }
[data-theme="dark"] .sgr-red { color: #fca5a5; } [data-theme="dark"] .sgr-amber { color: #fcd34d; } [data-theme="dark"] .sgr-green { color: #86efac; }
.sgr-add { display: flex; gap: 6px; margin-left: auto; }
.sgr-table { padding: 4px 0; overflow-x: auto; }
.sgr-row { display: grid; grid-template-columns: minmax(180px, 1.6fr) minmax(140px, 1fr) minmax(220px, 1.4fr) repeat(4, minmax(80px, .7fr)); gap: 12px; align-items: center;
  padding: 10px 16px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: .88rem; min-width: 860px; }
.sgr-row:hover, .sgr-row:focus { background: var(--surface-2); text-decoration: none; color: var(--ink); }
.sgr-row:hover .sgr-kpi, .sgr-row:hover strong { color: var(--ink); }
.sgr-head { border-top: 0; font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.sgr-client { display: flex; gap: 10px; align-items: center; min-width: 0; }
.sgr-client > span { display: flex; flex-direction: column; min-width: 0; }
.sgr-client small, .sgr-prog small, .sgr-kpi small { color: var(--muted); font-size: .74rem; }
.sgr-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; background: #94a3b8; }
.sgr-band-red .sgr-dot { background: #ef4444; } .sgr-band-amber .sgr-dot { background: #f59e0b; } .sgr-band-green .sgr-dot { background: #22c55e; }
.sgr-prog { display: flex; flex-direction: column; gap: 4px; }
.sgr-prog-bar { height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.sgr-prog-bar i { display: block; height: 100%; background: var(--primary, #ff5a4e); border-radius: 99px; }
.sgr-prog b { color: #dc2626; font-weight: 700; }
.sgr-days, .sgr-days-h { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.sgr-days-h i { font-style: normal; text-align: center; }
.sgr-days i { font-style: normal; text-align: center; font-size: .72rem; font-weight: 700; padding: 3px 0; border-radius: 6px; background: var(--surface-2); color: var(--muted); }
.sgr-days i.is-done { background: color-mix(in srgb, #22c55e 18%, transparent); color: #15803d; }
.sgr-days i.is-part { background: color-mix(in srgb, #f59e0b 16%, transparent); color: #92400e; }
.sgr-days i.is-late { background: color-mix(in srgb, #ef4444 16%, transparent); color: #b91c1c; }
.sgr-kpi { font-variant-numeric: tabular-nums; }
.sgr-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 16px; }
@media (max-width: 900px) { .sgr-grid { grid-template-columns: 1fr; } .sgr-rhythm { grid-template-columns: 1fr 1fr; } }
.sgr-side { display: flex; flex-direction: column; gap: 16px; }
.sgr-side > .card, .sgr-week, .sgr-score, .sgr-history { padding: 16px 18px; }
.sgr-h { font-size: 1.02rem; margin: 0 0 10px; }
.sgr-day { margin-bottom: 10px; }
.sgr-day-h { margin: 0 0 4px; font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.sgr-item { display: flex; gap: 10px; align-items: flex-start; padding: 6px 8px; border-radius: 8px; cursor: pointer; font-size: .9rem; }
.sgr-item:hover { background: var(--surface-2); }
.sgr-item input { margin-top: 3px; accent-color: #16a34a; width: 16px; height: 16px; }
.sgr-item.is-done span { color: var(--muted); text-decoration: line-through; }
.sgr-item.is-late small { color: #dc2626; font-weight: 700; margin-left: 4px; }
.sgr-late-t { color: #dc2626; }
.sgr-side textarea, .sgr-fields-text textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: .9rem; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); resize: vertical; }
.sgr-idea { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-top: 10px; font-size: .88rem; }
.sgr-idea header { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.sgr-idea p { margin: 6px 0 0; }
.sgr-fmt { font-size: .7rem; font-weight: 800; padding: 2px 8px; border-radius: 99px; background: color-mix(in srgb, #8b5cf6 14%, transparent); color: #6d28d9; white-space: nowrap; }
[data-theme="dark"] .sgr-fmt { color: #c4b5fd; }
.sgr-hook { font-weight: 600; font-style: italic; }
.sgr-err { color: #dc2626; font-size: .86rem; }
.sgr-score { margin-bottom: 16px; }
.sgr-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 14px; margin-bottom: 12px; }
.sgr-fields-text { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.sgr-fields .field input { width: 100%; box-sizing: border-box; }
.sgr-history { margin-bottom: 12px; }
.sgr-pos { color: #15803d; } .sgr-neg { color: #dc2626; }
.sgr-lesson { min-width: 260px; font-size: .84rem; }
.sgr-off { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 14px; }
.sgr-leave { margin: 6px 0 20px; }

.sgr-ig { padding: 12px 16px; margin-top: 14px; }
.sgr-ig > summary { cursor: pointer; list-style: none; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.sgr-ig > summary::-webkit-details-marker { display: none; }
.sgr-ig-body { margin-top: 10px; }
.sgr-steps { margin: 0 0 12px 18px; padding: 0; font-size: .86rem; display: flex; flex-direction: column; gap: 4px; }
.sgr-ig-form, .sgr-igc-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px 14px; align-items: end; }
.sgr-ig-form input, .sgr-ig-form select, .sgr-igc-form input, .sgr-igc-form select { width: 100%; box-sizing: border-box; }
.sgr-ig-acts { display: flex; gap: 10px; align-items: center; }
.sgr-igc { padding: 16px 18px; margin-bottom: 12px; }
.sgr-comp-refresh { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 12px 0; }
.sgr-comp { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin-top: 10px; }
.sgr-comp header { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.sgr-comp-top { margin: 6px 0 0 18px; padding: 0; font-size: .86rem; display: flex; flex-direction: column; gap: 6px; }
.sgr-h .sgr-pull { margin-left: 8px; vertical-align: middle; }
.sgr-filled { border-color: #16a34a !important; background: color-mix(in srgb, #22c55e 8%, var(--surface)) !important; }
.sgr-sum { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, #8b5cf6 7%, var(--surface)); border: 1px solid color-mix(in srgb, #8b5cf6 25%, var(--line)); font-size: .9rem; line-height: 1.5; }
.sgr-idea-acts { display: flex; gap: 14px; margin-top: 6px; }
.sgr-shots { width: 100%; border-collapse: collapse; font-size: .84rem; margin-top: 4px; }
.sgr-shots td { border-top: 1px solid var(--line); padding: 5px 6px; vertical-align: top; }
.sgr-shots td:first-child { white-space: nowrap; font-weight: 700; color: var(--muted); width: 56px; }
.sgr-hook-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
.sgr-hook-form input[type=file] { max-width: 100%; font-size: .84rem; }

/* Live: who's on this to-do + "Working now" in the top bar. */
.v2tb-live { display: none; position: relative; }
html.ui-v2 .v2tb-live { display: inline-block; }
.v2tb-live > summary { list-style: none; }
.v2tb-live > summary::-webkit-details-marker { display: none; }
.v2tb-live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; flex: 0 0 auto; }
.v2tb-live.has-live .v2tb-live-dot, .tk-here .v2tb-live-dot { background: #22c55e; animation: v2ctxPulse 2s infinite; }
.v2tb-livepop { position: absolute; right: 0; top: calc(100% + 8px); width: 360px; max-width: calc(100vw - 24px); z-index: 300; padding: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 2px 6px rgba(9,19,45,.06), 0 18px 44px rgba(9,19,45,.16); }
.v2tb-live-list { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow-y: auto; }
.v2tb-live-list li > a, .v2tb-live-list li > div { display: flex; gap: 10px; align-items: center; padding: 8px 6px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.v2tb-live-list li > a:hover { background: var(--surface-2); text-decoration: none; color: var(--ink); }
.v2tb-live-list li + li > a, .v2tb-live-list li + li > div { border-top: 1px solid var(--line); border-radius: 0; }
.v2tb-live-list li.is-paused { opacity: .6; }
.v2tb-live-t { display: flex; flex-direction: column; min-width: 0; flex: 1; font-size: .84rem; }
.v2tb-live-what { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2tb-live-client { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; color: var(--muted); }
.v2tb-live-client i { width: 7px; height: 7px; border-radius: 2px; }
.v2tb-live-for { font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; display: flex; flex-direction: column; }
.v2tb-live-for small { font-weight: 500; color: var(--muted); }
@media (max-width: 640px) {
  html.ui-v2 .topbar-user .v2tb-live .v2tb-link { display: inline-flex; }
  .v2tb-livepop { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; }
}
.tk-here { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 2px; font-size: .84rem; }
.tk-here-l { display: inline-flex; align-items: center; gap: 6px; font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.tk-here-p { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 2px; border-radius: 99px; background: var(--surface-2); }
.tk-here-p b { color: #15803d; font-weight: 700; }
[data-theme="dark"] .tk-here-p b { color: #86efac; }

/* Layout pass (v2): less chrome above the page, shorter sidebars, a one-row client header, calmer home. */
html.ui-v2 .timer-strip-idle { display: none; }                     /* the Timer button in the top bar replaces it */
@media (max-width: 1440px) { html.ui-v2 .v2tb-timer > span { display: none; } }
.v2ctx-sec > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; border-radius: 8px; }
.v2ctx-sec > summary::-webkit-details-marker { display: none; }
.v2ctx-sec > summary span { font-size: .66rem; font-weight: 700; color: var(--muted); padding: 0 6px; border-radius: 99px; background: var(--surface-2); }
.v2ctx-sec > summary::after { content: '▸'; margin-left: 6px; color: var(--muted); font-size: .7rem; }
.v2ctx-sec[open] > summary::after { content: '▾'; }
.v2ctx-sec > summary:hover { color: var(--ink); }
.v2ctx-sec:not([open]) + .v2ctx-sec { margin-top: -2px; }
/* Pop-up messages sit below the top bar, never on it; page nudges stay in the page. */
html.ui-v2 .flash:not(.inline-flash) { top: auto; bottom: 24px; right: 96px; }
html.ui-v2 .flash.inline-flash { position: static; max-width: none; margin: 0 0 16px; box-shadow: none; animation: none; }
@media (max-width: 640px) { html.ui-v2 .flash:not(.inline-flash) { right: 12px; left: 12px; bottom: 84px; max-width: none; } }
/* Client header: name, meta, search and menu on one row. */
@media (min-width: 1100px) {
  .pv2-shell .proj-banner-top { flex-wrap: nowrap; align-items: center; }
  .pv2-shell .proj-banner-id { flex: 1 1 auto; min-width: 0; }
  .pv2-shell .proj-banner-right { flex: 0 0 auto; flex-wrap: nowrap; margin-left: 16px; }
  .pv2-shell .proj-banner-right .proj-search { flex: 0 0 220px; min-width: 0; margin-right: 0; }
  .pv2-shell .proj-banner-right .proj-search input { padding-top: 8px; padding-bottom: 8px; }
}
/* Home: the setup guide folds to one line once it's under way. */
.obw-fold > summary { list-style: none; cursor: pointer; font-size: .84rem; font-weight: 600; color: var(--accent-ink, var(--primary)); margin-top: 6px; }
.obw-fold > summary::-webkit-details-marker { display: none; }
.obw-fold[open] > summary { display: none; }

/* The account menu opens toward the page, never past the right edge (it widened the page by 14px). */
.profile-pop { position: relative; }
.profile-pop > .popover.profile-menu { left: auto; right: 0; }
.profile-pop:not([open]) > .popover { display: none; }

/* ===== v2 polish: a calmer, more modern finish across every page. ===== */
html.ui-v2 body { font-feature-settings: 'cv11', 'ss01', 'ss03'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* Frosted top bar: content scrolls softly under it, a hairline instead of a heavy shadow. */
html.ui-v2 .topbar { background: color-mix(in srgb, var(--surface) 84%, transparent); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
  box-shadow: none; border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, transparent); }
/* The Chrome extension note floats as a small card instead of a full-width bar above every page. */
html.ui-v2 .extbar { position: fixed; left: 24px; bottom: 16px; z-index: 260; width: 270px; max-width: calc(100vw - 24px); box-sizing: border-box; border-radius: 14px; padding: 12px 14px; flex-wrap: wrap; gap: 8px 10px;
  box-shadow: 0 16px 40px rgba(9,19,45,.32); animation: v2Rise .35s ease both .8s; }
html.ui-v2 .extbar-txt { flex-basis: calc(100% - 60px); font-size: .82rem; }
@keyframes v2Rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) { html.ui-v2 .extbar { left: 12px; right: 12px; bottom: 84px; width: auto; max-width: none; } }
@media (prefers-reduced-motion: reduce) { html.ui-v2 .extbar { animation: none; } }
/* Home stat tiles: compact, the sparkline tucked in the corner. */
html.ui-v2 .db-stat { padding: 14px 16px; }
html.ui-v2 .db-stat .db-spark { position: absolute; right: 14px; bottom: 12px; margin: 0; width: 72px; height: 22px; }
html.ui-v2 .db-stats { border-radius: 14px; }
/* Tables: one quiet header style and a soft row hover. */
html.ui-v2 main.page table th { font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
html.ui-v2 main.page table tbody tr { transition: background .12s ease; }
html.ui-v2 main.page table tbody tr:hover > td { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
/* Clickable cards lift a touch on hover. */
html.ui-v2 a.card, html.ui-v2 a.v2ctx-card { transition: transform .15s ease, box-shadow .15s ease; }
html.ui-v2 a.card:hover, html.ui-v2 a.v2ctx-card:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(16,24,40,.06), 0 12px 28px rgba(16,24,40,.08); text-decoration: none; }
/* Keyboard focus: a clear ring, never the browser's dotted box. */
html.ui-v2 :is(a, button, summary, [tabindex]):focus-visible { outline: 2px solid color-mix(in srgb, var(--primary, #ff5a4e) 70%, transparent); outline-offset: 2px; border-radius: 8px; }
/* Sidebar: the page you're on gets an accent spine. */
html.ui-v2 .v2ctx-nav a.is-on { position: relative; }
html.ui-v2 .v2ctx-nav a.is-on::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--primary, #ff5a4e); }
/* Empty states: lighter, dashed, centred. */
html.ui-v2 .empty-inline { border: 1px dashed var(--line-2); border-radius: 12px; padding: 14px 16px; background: transparent; color: var(--muted); }
/* Section rhythm: consistent breathing room between page blocks. */
html.ui-v2 main.page > .card + .card, html.ui-v2 main.page > section.card + section.card { margin-top: 16px; }
/* Timesheet: jump to the manual form and flash it. */
.ts-manual-jump { white-space: nowrap; }
.ts-flash { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #ff5a4e) 35%, transparent) !important; transition: box-shadow .3s ease; }

/* ===== v2 dashboard finish: lighter surfaces, one sidebar panel, calmer type, one spacing scale. ===== */
html.ui-v2 { --radius: 14px; --radius-sm: 8px; --shadow: 0 1px 2px rgba(16,24,40,.04);
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; }
html.ui-v2:not([data-theme="dark"]) { --line: #e7e9ee; }
html.ui-v2:not([data-theme="dark"]) body { background: #f6f7f9; }
html.ui-v2 .card, html.ui-v2 .pv2-card, html.ui-v2 .pv2-sec { border-radius: var(--radius); box-shadow: var(--shadow); }

/* Sidebar = one calm panel with hairline dividers, not a stack of boxes. */
@media (min-width: 961px) {
  html.ui-v2 .v2-body.has-ctx > aside { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 6px 0; gap: 0; align-self: flex-start; margin-top: 38px; }
  html.ui-v2 .v2-body.has-ctx > aside.v2ctx, html.ui-v2 .v2-body.has-ctx > aside.pv2-side { padding-top: 6px; }
  html.ui-v2 .v2-body.has-ctx > aside > :is(.v2ctx-card, .pv2-card, .v2ctx-live, form) {
    background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 14px 16px; margin: 0; }
  html.ui-v2 .v2-body.has-ctx > aside > :is(.v2ctx-card, .pv2-card, .v2ctx-live, form) + :is(.v2ctx-card, .pv2-card, .v2ctx-live, form) { border-top: 1px solid var(--line); }
  html.ui-v2 .v2-body.has-ctx > aside.pv2-side { flex: 0 0 280px; max-width: 280px; }
}
html.ui-v2 .v2ctx-nav a, html.ui-v2 .pv2-nav a { border-radius: 8px; padding: 7px 10px; font-size: .88rem; }
html.ui-v2 .v2ctx-nav a.is-on, html.ui-v2 .pv2-nav a.is-on { background: color-mix(in srgb, var(--primary, #ff5a4e) 9%, transparent); }
html.ui-v2 .v2ctx-stat { padding: 6px 0; font-size: .88rem; }
html.ui-v2 .pv2-eyebrow { font-size: .66rem; letter-spacing: .08em; }
/* The hide-sidebar arrow: small, tucked on the edge at the top. */
@media (min-width: 961px) {
  html.ui-v2 .v2-side-toggle { top: 80px; margin-top: 52px; width: 22px; height: 22px; opacity: .55; transition: opacity .15s ease; }
  html.ui-v2 .v2-body:hover .v2-side-toggle, html.ui-v2 .v2-side-toggle:focus-visible, html.ui-v2.v2-side-off .v2-side-toggle { opacity: 1; }
}

/* Page headers: confident but calm. */
html.ui-v2 .display { font-size: clamp(1.4rem, 1.9vw, 1.7rem); font-weight: 700; letter-spacing: -0.02em; }
html.ui-v2 .hero .lead, html.ui-v2 .hero .muted.lead { font-size: .92rem; line-height: 1.55; max-width: 68ch; color: var(--muted); }
html.ui-v2 .hero { margin-bottom: var(--sp-5); gap: var(--sp-4); }
html.ui-v2 .eyebrow { font-size: .64rem; letter-spacing: .1em; margin-bottom: 6px; }
html.ui-v2 h2 { font-weight: 700; }

/* Stat tiles everywhere share one look: hairline box, compact, big number. */
html.ui-v2 :is(.sa-stat, .stat, .kpi, .hey-kpi, .op-stat) { border-radius: 12px; box-shadow: none; }

/* Chips and pills: soft and consistent. */
html.ui-v2 .bv-chip, html.ui-v2 .il-tab { border-radius: 999px; font-size: .82rem; }
html.ui-v2 :is(.status-pill, .pill, .trm-tag, .hey-bk) { border-radius: 999px; font-weight: 600; }

/* Tabs strip under headers: lighter container. */
html.ui-v2 .hub-tabs, html.ui-v2 .tabs { box-shadow: none; }

/* Tools rail: same panel language as the sidebar. */
html.ui-v2 .tool-dock-inner { border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--line); }

html.ui-v2 .pv2-shell .proj-banner-right .proj-search { border-radius: 10px; min-height: 0; padding: 0 10px; height: 38px; display: flex; align-items: center; }
html.ui-v2 .pv2-shell .proj-banner-right .proj-search input { border: 0; padding: 6px 4px; background: transparent; box-shadow: none; height: 36px; }

#activity .hey-sel-toggle, #respond .hey-sel-toggle { margin-left: 4px; }
#activity .hey-act-filters { margin-left: auto; }

/* Client page "Next" block: a light card with an accent line instead of a heavy dark slab. */
html.ui-v2 .pv2-band { position: relative; overflow: hidden; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 22px; }
html.ui-v2 .pv2-band::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--primary, #ff5a4e), #ffb547); }
html.ui-v2 .pv2-band-sub { color: var(--muted); }
html.ui-v2 .pv2-band-t { font-size: 1.2rem; font-weight: 700; }
html.ui-v2 .pv2-band .pv2-btn-ghost { color: var(--ink); border-color: var(--line-2, var(--line)); background: var(--surface); border-radius: 10px; }
html.ui-v2 .pv2-band .pv2-btn-ghost:hover { background: var(--surface-2); color: var(--ink); }
html.ui-v2 .pv2-band .pv2-btn { border-radius: 10px; }
html.ui-v2 .pv2-kpi { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; }
html.ui-v2 .pv2-kpi span, html.ui-v2 .pv2-kpi em { color: var(--muted); }
html.ui-v2 .pv2-kpi strong { font-weight: 700; color: var(--ink); }
html.ui-v2 .pv2-kpi em.up { color: #15803d; } html.ui-v2 .pv2-kpi em.down { color: #b91c1c; }
html.ui-v2[data-theme="dark"] .pv2-kpi em.up { color: #4ade80; } html.ui-v2[data-theme="dark"] .pv2-kpi em.down { color: #fca5a5; }
html.ui-v2 .pv2-sec-h h2 { font-weight: 700; font-size: 1.1rem; }

/* Loading: soft shimmer placeholders instead of "Loading…" text. */
.v2-skel { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.v2-skel i { display: block; height: 10px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-2) 0%, color-mix(in srgb, var(--line) 70%, var(--surface-2)) 50%, var(--surface-2) 100%); background-size: 200% 100%; animation: v2Shimmer 1.2s ease-in-out infinite; }
.v2-skel i:nth-child(2) { width: 82%; } .v2-skel i:nth-child(3) { width: 64%; } .v2-skel i:nth-child(4) { width: 76%; }
@keyframes v2Shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .v2-skel i { animation: none; } }

/* "Working now" button: an icon, with the live dot on top of it. */
html.ui-v2 .v2tb-livebtn { position: relative; }
html.ui-v2 .v2tb-livebtn .v2tb-live-dot { position: absolute; top: 7px; left: 22px; width: 7px; height: 7px; box-shadow: 0 0 0 2px var(--surface); }

/* Phones: the Chrome extension is desktop-only, so no card; compact headers on the newer pages. */
@media (max-width: 960px) { html.ui-v2 .extbar { display: none; } }
@media (max-width: 640px) {
  .sgr-rhythm { display: flex; overflow-x: auto; gap: 6px; padding: 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .sgr-rhythm::-webkit-scrollbar { display: none; }
  .sgr-rhythm-day { flex: 0 0 auto; padding: 6px 10px; font-size: .76rem; white-space: nowrap; }
  .sgr-item small { display: inline-block; }
  .wr-head { gap: 10px; padding: 12px 14px; }
  .wr-head > .wr-avatar { width: 34px; height: 34px; font-size: 15px; border-radius: 10px; }
  .wr-head-txt .muted { display: none; }
  .wr-team { width: 100%; }
  html.ui-v2 .hero .lead, html.ui-v2 .hero .muted.lead { font-size: .88rem; }
}

@media (max-width: 640px) {
  .sgr-row { min-width: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 120px); }
  .sgr-row > .sgr-days, .sgr-row > .sgr-kpi, .sgr-head > span:nth-child(n+3) { display: none; }
}

/* Client header ⋯ menu: a normal light button on the light header (it was dark glass meant for the old dark banner). */
html:not([data-theme="dark"]) .proj-menu-btn { color: var(--ink); background: var(--surface); border: 1px solid var(--line-2, var(--line)); box-shadow: none; backdrop-filter: none; }
html:not([data-theme="dark"]) .proj-menu-btn:hover { background: var(--surface-2); }
html.ui-v2 .proj-menu-btn { width: 36px; height: 36px; border-radius: 10px; }

/* Page intros: one line in v2, click to read the rest. */
html.ui-v2 .hero .lead { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
html.ui-v2 .hero .lead.is-clamped { cursor: pointer; }
html.ui-v2 .hero .lead.is-clamped:hover { color: var(--ink); }
html.ui-v2 .hero .lead.is-open { display: block; -webkit-line-clamp: unset; }

/* Feedback + shortcuts dialogs. */
.fb-dlg { position: fixed; inset: 0; margin: auto; height: fit-content; max-height: calc(100vh - 48px); overflow: auto; border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; width: min(460px, calc(100vw - 32px)); background: var(--surface); color: var(--ink); box-shadow: 0 24px 60px rgba(9,19,45,.25); }
.fb-dlg::backdrop { background: rgba(15,20,30,.4); }
.fb-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: 1.02rem; }
.fb-x { border: 0; background: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--muted); width: 36px; height: 36px; border-radius: 8px; }
.fb-x:hover { background: var(--surface-2); }
.fb-form textarea { width: 100%; box-sizing: border-box; margin: 10px 0; font: inherit; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-2, var(--line)); background: var(--surface); color: var(--ink); resize: vertical; }
.fb-acts { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.keys-list { margin: 10px 0 0; display: flex; flex-direction: column; gap: 6px; }
.keys-list > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.keys-list dt { display: flex; gap: 4px; align-items: center; } .keys-list dd { margin: 0; color: var(--muted); }
kbd, .pm-kbd { display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--line-2, var(--line)); border-bottom-width: 2px; background: var(--surface-2); font: 600 .74rem/1.5 inherit; text-align: center; color: var(--ink); }
.pm-kbd { margin-left: auto; }
button.profile-menu-item { width: 100%; background: none; border: 0; font: inherit; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.fbk-list { padding: 4px 0; }
.fbk-row { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; padding: 14px 18px; border-top: 1px solid var(--line); }
.fbk-row:first-child { border-top: 0; }
.fbk-row.is-done { opacity: .55; }
.fbk-note { margin: 0 0 4px; font-weight: 600; }

/* Pop-ups: a page opened in a modal, and that page's own "pop-up mode" (no app chrome around it). */
.pk-modal { position: fixed; inset: 0; margin: auto; width: min(920px, calc(100vw - 32px)); height: min(86vh, 900px); padding: 0; border: 1px solid var(--line); border-radius: 16px;
  background: var(--surface); color: var(--ink); box-shadow: 0 30px 80px rgba(9,19,45,.3); overflow: hidden; display: none; flex-direction: column; }
.pk-modal[open] { display: flex; }
.pk-modal::backdrop { background: rgba(15,20,30,.45); }
.pk-modal-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px 8px 18px; border-bottom: 1px solid var(--line); }
.pk-modal-acts { display: flex; align-items: center; gap: 8px; }
.pk-modal iframe { flex: 1; width: 100%; border: 0; background: var(--bg, var(--surface)); }
@media (max-width: 640px) { .pk-modal { width: 100vw; height: 100dvh; border-radius: 0; border: 0; } }
html.is-modal :is(.topbar, .timer-strip, .extbar, .v2ctx, .pv2-side, .v2-side-edge, .tool-dock, .summit, .mobile-nav, .breadcrumb, footer, .site-footer, .verify-banner, .action-bar, .v2tb-live) { display: none !important; }
html.is-modal .v2-body.has-ctx { display: block; padding: 0; max-width: none; }
html.is-modal main.page { padding: 18px 22px 28px; margin: 0; max-width: none; }
html.is-modal .hero { margin-bottom: 14px; }
html.is-modal body { padding-bottom: 0 !important; }

/* Profile menu: Dark mode + New look switches (moved out of the top bar) */
.pm-uiform { margin: 0; }
.profile-menu-item.pm-switch .v2-toggle { margin-left: auto; }
[data-theme="dark"] .pm-theme .v2-toggle { background: var(--primary, #ff5a4e); }
[data-theme="dark"] .pm-theme .v2-toggle i { left: 14px; }
/* Working now: people icon with a live count bubble */
.v2tb-livebtn { position: relative; padding-left: 9px; padding-right: 9px; }
html.ui-v2 .v2tb-livebtn .v2tb-live-n, .v2tb-livebtn .v2tb-live-n { border: 0; color: #fff; font-weight: 800; position: absolute; top: -3px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; font-size: .66rem; line-height: 17px; border-radius: 99px; background: #16a34a; color: #fff; text-align: center; box-shadow: 0 0 0 2px var(--surface, #fff); }
.v2tb-live.has-live .v2tb-livebtn > i, .v2tb-live.has-live .v2tb-livebtn > svg { color: #16a34a; }
.v2tb-live-about { margin: 0 0 8px; padding: 8px 10px; font-size: .78rem; line-height: 1.45; color: var(--muted); background: rgba(9,19,45,.04); border-radius: 9px; }
.v2tb-live-about kbd { font-size: .72rem; padding: 0 4px; border: 1px solid var(--line); border-radius: 4px; }
[data-theme="dark"] .v2tb-live-about { background: rgba(255,255,255,.05); }

/* SEO App tab (/projects/{id}/seoapp) */
.sap-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.sap-main, .sap-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sap-part { display: flex; flex-direction: column; gap: 14px; transition: opacity .2s; }
.sap-part.is-loading { opacity: .6; }
.sap-part > .card, .sap-side > .card { margin: 0; padding: 16px 18px; border-radius: 16px; }
.sap-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.sap-grid h2 { margin: 0 0 8px; font-size: 1.02rem; font-weight: 700; }
.sap-h h2, .sap-health h3 { margin: 0; font-size: 1.02rem; }
.sap-health h3 { margin-bottom: 8px; display: flex; gap: 8px; align-items: baseline; }
.sap-asof { margin: 0; }
.sap-more { margin-left: 8px; font-weight: 600; }
.sap-warn { color: #b45309; }
.sap-err { padding: 12px 14px; border-radius: 12px; background: rgba(220,38,38,.08); color: #b91c1c; font-size: .9rem; }
.sap-empty h2 { margin-top: 0; }
.sap-link-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.sap-link-row form { margin: 0; }
.sap-id-form { display: flex; gap: 6px; }
.sap-id-form input { min-width: 260px; }
.up { color: #15803d; } .down { color: #dc2626; }
.sap-attn ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sap-attn li { display: flex; gap: 10px; align-items: baseline; font-size: .92rem; }
.sap-lv { flex: none; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 99px; background: #e2e8f0; color: #475569; }
.sap-lv-high .sap-lv { background: rgba(220,38,38,.12); color: #b91c1c; }
.sap-lv-medium .sap-lv { background: rgba(245,158,11,.16); color: #b45309; }
.sap-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.sap-tile, .sap-mini > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.sap-tile strong, .sap-mini strong { font-size: 1.35rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.sap-tile-move strong { font-size: 1.05rem; display: flex; gap: 10px; }
.sap-tile-l { font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.sap-was { font-size: .76rem; color: var(--muted); }
.sap-was.up { color: #15803d; } .sap-was.down { color: #dc2626; }
.sap-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sap-mini strong { font-size: 1.1rem; }
.sap-bands { margin-top: 14px; display: flex; flex-direction: column; gap: 5px; }
.sap-band { display: grid; grid-template-columns: 96px 1fr 64px; gap: 10px; align-items: center; font-size: .84rem; }
.sap-band-l { color: var(--muted); }
.sap-band-bars { display: flex; flex-direction: column; gap: 2px; }
.sap-band-bars i, .sap-legend i { display: block; height: 7px; border-radius: 4px; background: var(--primary, #ff5a4e); min-width: 2px; }
.sap-band-bars i.before, .sap-legend i.before { background: #cbd5e1; }
.sap-band-n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.sap-band-n small { color: var(--muted); font-weight: 500; }
.sap-legend { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 6px 0 0; }
.sap-legend i { display: inline-block; width: 14px; height: 10px; margin-left: 8px; }
.sap-moves { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 16px; }
.sap-move h3 { font-size: .86rem; margin: 0 0 6px; }
.sap-tbl { width: 100%; border-collapse: collapse; font-size: .86rem; }
.sap-tbl th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 700; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.sap-tbl td { padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.sap-tbl tr:last-child td { border-bottom: 0; }
.sap-tbl tr.sap-failed td { background: rgba(220,38,38,.05); }
.sap-path { display: block; font-size: .74rem; color: var(--muted); word-break: break-all; }
.sap-mv { white-space: nowrap; font-weight: 700; font-size: .8rem; }
.sap-chip { display: inline-block; font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: rgba(9,19,45,.06); white-space: nowrap; }
.sap-chip-ok { background: rgba(22,163,74,.12); color: #15803d; }
.sap-chip-off { background: rgba(148,163,184,.18); color: #64748b; }
.sap-chip-bad { background: rgba(220,38,38,.12); color: #b91c1c; }
.sap-kinds { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.sap-grids { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-top: 10px; }
.sap-gridfig { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.sap-gridfig figcaption { display: flex; flex-direction: column; font-size: .84rem; }
.sap-gridbox { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 2px; aspect-ratio: 1; max-width: 220px; }
.sap-gridbox i { display: flex; align-items: center; justify-content: center; border-radius: 4px; font-style: normal; font-size: .62rem; font-weight: 700; color: #fff; }
.sap-g-top, .sap-legend i.sap-g-top { background: #16a34a; } .sap-g-mid, .sap-legend i.sap-g-mid { background: #f59e0b; } .sap-g-low, .sap-legend i.sap-g-low { background: #ef4444; } .sap-g-none, .sap-legend i.sap-g-none { background: #94a3b8; } .sap-g-na { background: #e2e8f0; }
.sap-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: .9rem; }
.sap-list-tight { gap: 3px; font-size: .86rem; }
.sap-bul { margin: 0 0 10px; padding-left: 18px; font-size: .88rem; display: flex; flex-direction: column; gap: 4px; }
.sap-sub { margin: 10px 0 4px; font-weight: 700; color: var(--muted); }
.sap-dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 14px; margin: 0; font-size: .88rem; }
.sap-dl dt { color: var(--muted); font-weight: 600; }
.sap-dl dd { margin: 0; display: flex; flex-wrap: wrap; gap: 5px; align-items: baseline; }
.sap-person { display: inline-flex; gap: 2px; margin-right: 8px; }
.sap-score-top { display: flex; gap: 14px; align-items: center; }
.sap-score-top h2 { margin: 0; }
.sap-score-top p { margin: 2px 0 4px; }
.sap-ring { --c: #16a34a; flex: none; width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--c) calc(var(--v) * 1%), rgba(148,163,184,.25) 0); position: relative; }
.sap-ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--surface, #fff); }
.sap-ring strong { position: relative; font-size: 1.3rem; }
.sap-ring[data-band="ok"] { --c: #f59e0b; } .sap-ring[data-band="bad"] { --c: #ef4444; }
.sap-spark { width: 140px; height: 28px; color: var(--primary, #ff5a4e); display: block; }
.sap-parts { margin-top: 10px; }
.sap-parts ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: .84rem; }
.sap-parts li { display: flex; justify-content: space-between; gap: 10px; }
.sap-ask h2 { margin: 0 0 4px; font-size: 1.02rem; }
.sap-ask textarea { width: 100%; resize: vertical; margin-top: 8px; }
.sap-ask-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.sap-ask-chips .chip { font-size: .74rem; padding: 4px 9px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; text-align: left; }
.sap-ask-chips .chip:hover { border-color: var(--primary, #ff5a4e); }
.sap-ask-row { display: flex; gap: 10px; align-items: center; }
.sap-ask-log { display: flex; flex-direction: column; gap: 8px; max-height: 460px; overflow-y: auto; }
.sap-ask-log:empty { display: none; }
.sap-q { align-self: flex-end; max-width: 90%; padding: 8px 11px; border-radius: 12px 12px 3px 12px; background: var(--primary, #ff5a4e); color: #fff; font-size: .86rem; }
.sap-a { padding: 10px 12px; border-radius: 12px 12px 12px 3px; background: rgba(9,19,45,.05); font-size: .86rem; line-height: 1.5; overflow-wrap: anywhere; }
.sap-a > :first-child { margin-top: 0; } .sap-a > :last-child { margin-bottom: 0; }
.sap-a table { font-size: .8rem; }
[data-theme="dark"] .sap-a, [data-theme="dark"] .sap-chip { background: rgba(255,255,255,.07); }
[data-theme="dark"] .sap-g-na { background: #334155; }
[data-theme="dark"] .sap-band-bars i.before, [data-theme="dark"] .sap-legend i.before { background: #475569; }
@media (max-width: 1100px) { .sap-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .sap-tbl { font-size: .8rem; } .sap-work .sap-tbl, .sap-sent .sap-tbl { display: block; overflow-x: auto; white-space: nowrap; } .sap-work .sap-tbl td, .sap-sent .sap-tbl td { white-space: normal; min-width: 90px; } .sap-id-form input { min-width: 0; flex: 1; } .sap-band { grid-template-columns: 80px 1fr 54px; } }

/* War Room: SEO App second opinion */
.wr-sap-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 6px 12px 6px 8px; border: 1px solid #fde68a; border-radius: 99px; background: #fffbeb; color: #1e1b6b; font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; }
.wr-sap-btn:hover { border-color: #facc15; background: #fef3c7; }
.wr-sap-btn:disabled { opacity: .75; cursor: progress; }
.wr-sap-btn img { height: 16px; width: auto; display: block; }
.wr-sap-a ul, .wr-sap-a ol, .wr-sap-cmp ul { padding-left: 20px; margin: 6px 0; }
.wr-row .wr-avatar.wr-avatar-sap, .wr-avatar-sap { background: #fff; box-shadow: none; border: 1px solid #fde68a; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; }
.wr-avatar-sap img { width: 62%; height: auto; object-fit: contain; }
.wr-sap { border: 1px solid #fde68a; background: linear-gradient(180deg, #fffdf3, #fff); border-left: 4px solid #facc15; }
.wr-sap-h { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.wr-sap-h > span { display: flex; flex-direction: column; line-height: 1.25; }
.wr-sap-logo { height: 20px; width: auto; flex: none; }
.wr-sap-a > :first-child { margin-top: 0; }
.wr-sap-cmp { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(30,27,107,.05); border: 1px solid rgba(30,27,107,.12); font-size: .9rem; }
.wr-sap-cmp p { margin: 4px 0; }
.wr-sap-cmp-k { display: block; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #1e1b6b; margin-bottom: 4px; }
[data-theme="dark"] .wr-sap { background: rgba(250,204,21,.06); border-color: rgba(250,204,21,.35); }
[data-theme="dark"] .wr-sap-btn { background: rgba(250,204,21,.1); border-color: rgba(250,204,21,.35); color: #fde68a; }
[data-theme="dark"] .wr-sap-cmp { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
[data-theme="dark"] .wr-sap-cmp-k { color: #fde68a; }
[data-theme="dark"] .wr-sap-logo, [data-theme="dark"] .wr-sap-btn img { content: url(/assets/img/seoapp-logo-white.png); }

/* Client page: SEO App strip (SEO App's navy + yellow) */
.sapx { --sapx-navy: #1e1b6b; --sapx-yellow: #fcd116; position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "brand acts" "nums nums"; align-items: center; gap: 14px 18px; margin: 14px 0 18px; padding: 16px 20px 20px; border-radius: 16px; color: #fff;
    background: radial-gradient(120% 140% at 0% 0%, #2b2790 0%, var(--sapx-navy) 55%, #14124a 100%); box-shadow: 0 8px 24px -12px rgba(30,27,107,.55); overflow: hidden; }
.sapx::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--sapx-yellow) 0 60%, transparent 60% 66%, var(--sapx-yellow) 66% 74%, transparent 74% 80%, var(--sapx-yellow) 80% 88%, transparent 88%); opacity: .9; }
.sapx-brand { grid-area: brand; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-decoration: none; color: rgba(255,255,255,.7); font-size: .72rem; font-weight: 600; }
.sapx-brand:hover { text-decoration: none; color: #fff; }
.sapx-brand img { height: 26px; width: auto; max-width: 140px; object-fit: contain; display: block; }
.sapx-nums { grid-area: nums; display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 10px; }
.sapx-n { display: flex; flex-direction: column; gap: 1px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); }
.sapx-n > span { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: rgba(255,255,255,.62); }
.sapx-n strong { font-size: 1.45rem; line-height: 1.15; font-weight: 800; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 6px; }
.sapx-n strong small { font-size: .78rem; font-weight: 600; color: rgba(255,255,255,.55); margin-left: 1px; }
.sapx-n em { font-style: normal; font-size: .72rem; font-weight: 700; color: rgba(255,255,255,.7); }
.sapx-n em.up, .sapx .up { color: #4ade80; } .sapx-n em.down, .sapx .down { color: #fca5a5; }
.sapx-mv { font-size: 1.05rem !important; gap: 8px !important; }
.sapx-mv b { font-weight: 800; }
.sapx-ring { --c: #4ade80; width: 22px; height: 22px; border-radius: 50%; background: conic-gradient(var(--c) calc(var(--v) * 1%), rgba(255,255,255,.18) 0); -webkit-mask: radial-gradient(circle, transparent 6px, #000 6.5px); mask: radial-gradient(circle, transparent 6px, #000 6.5px); }
.sapx-ring[data-band="ok"] { --c: var(--sapx-yellow); } .sapx-ring[data-band="bad"] { --c: #f87171; }
.sapx-acts { grid-area: acts; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.sapx-acts form { margin: 0; }
.sapx-btn { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 10px; border: 0; background: var(--sapx-yellow); color: var(--sapx-navy); font: inherit; font-size: .84rem; font-weight: 800; text-decoration: none; cursor: pointer; white-space: nowrap; }
.sapx-btn:hover { text-decoration: none; filter: brightness(1.05); color: var(--sapx-navy); }
.sapx-btn-ghost { background: rgba(255,255,255,.12); color: #fff; }
.sapx-btn-ghost:hover { background: rgba(255,255,255,.2); color: #fff; }
.sapx-flag { display: inline-flex; align-items: center; gap: 6px; max-width: 340px; padding: 6px 10px; border-radius: 10px; font-size: .78rem; font-weight: 600; text-decoration: none; color: #fff; background: rgba(248,113,113,.22); border: 1px solid rgba(248,113,113,.45); }
.sapx-flag-medium { background: rgba(252,209,22,.16); border-color: rgba(252,209,22,.45); }
.sapx-flag:hover { text-decoration: none; color: #fff; filter: brightness(1.1); }
.sapx-empty { grid-area: nums; display: flex; flex-direction: column; gap: 2px; font-size: .86rem; color: rgba(255,255,255,.75); }
.sapx-empty strong { color: #fff; font-size: 1rem; }
.pv2-nav-sap img { vertical-align: -2px; margin-right: 2px; }
.sapx-hero { margin-top: 6px; padding: 20px 22px; }
.sapx-hero .sapx-brand img { height: 34px; }
.sapx-hero .sapx-empty strong { font-size: 1.35rem; }
.sapx-hero { grid-template-areas: "brand nums acts"; grid-template-columns: auto minmax(0, 1fr) auto; }
@media (max-width: 760px) { .sapx, .sapx-hero { grid-template-columns: 1fr; grid-template-areas: "brand" "nums" "acts"; gap: 12px; padding: 14px 14px 18px; } .sapx-acts { justify-content: flex-start; } .sapx-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sapx-n strong { font-size: 1.2rem; } .sapx-flag { max-width: 100%; } }

/* SEO App tab: rankings stats, position mix, keyword moves, wins/watch */
.sap-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 10px; }
.sap-stat { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2, #f8fafc); border: 1px solid var(--line); }
.sap-stat-l { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.sap-stat strong { font-size: 1.6rem; line-height: 1.1; font-weight: 800; font-variant-numeric: tabular-nums; }
.sap-stat-h { font-size: .74rem; color: var(--muted); }
.sap-badge { display: inline-flex; align-items: baseline; gap: 4px; align-self: flex-start; padding: 2px 8px; border-radius: 99px; font-size: .74rem; font-weight: 700; background: rgba(148,163,184,.16); color: var(--muted); white-space: nowrap; }
.sap-badge small { font-weight: 500; opacity: .8; }
.sap-badge-up { background: rgba(22,163,74,.12); color: #15803d; }
.sap-badge-down { background: rgba(220,38,38,.1); color: #b91c1c; }
.sap-moved { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 0; }
.sap-mix { margin-top: 16px; display: flex; flex-direction: column; gap: 7px; }
.sap-mix-row { display: grid; grid-template-columns: 58px 1fr; gap: 10px; align-items: center; }
.sap-mix-l { font-size: .76rem; font-weight: 600; color: var(--muted); }
.sap-mix-bar { display: flex; height: 22px; border-radius: 8px; overflow: hidden; background: rgba(148,163,184,.15); }
.sap-mix-bar i { display: flex; align-items: center; justify-content: center; font-style: normal; font-size: .7rem; font-weight: 800; color: #fff; min-width: 3px; }
.sap-mix-row + .sap-mix-row .sap-mix-bar { height: 12px; opacity: .55; }
.sap-mix-row + .sap-mix-row .sap-mix-bar i { font-size: 0; }
.sap-b-1-3 { background: #16a34a; } .sap-b-4-10 { background: #4ade80; } .sap-b-11-20 { background: #facc15; }
.sap-b-21-50 { background: #fb923c; } .sap-b-51-100 { background: #f87171; } .sap-b-none { background: #cbd5e1; }
.sap-b-4-10, .sap-b-11-20 { color: #14532d !important; } .sap-b-none { color: #475569 !important; }
.sap-mix-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 4px; font-size: .8rem; color: var(--muted); }
.sap-mix-key span { display: inline-flex; align-items: center; gap: 5px; }
.sap-mix-key i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.sap-mix-key strong { color: var(--ink, inherit); }
.sap-mix-key em { font-style: normal; font-weight: 700; font-size: .74rem; }
.sap-moves { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.sap-move { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.sap-move-up { border-top: 3px solid #16a34a; } .sap-move-down { border-top: 3px solid #dc2626; } .sap-move-held { border-top: 3px solid #94a3b8; }
.sap-move h3 { display: flex; gap: 6px; align-items: baseline; margin-bottom: 8px; }
.sap-kws { list-style: none; margin: 0; padding: 0; }
.sap-kws li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.sap-kws li:first-child { border-top: 0; }
.sap-kw { min-width: 0; font-size: .86rem; }
.sap-kw strong { font-weight: 600; display: block; overflow-wrap: anywhere; }
.sap-pos { font-size: .8rem; font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.sap-pos b { font-weight: 400; margin: 0 4px; opacity: .6; }
.sap-badge-flat { background: rgba(148,163,184,.16); }
.sap-notes { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sap-notes li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; padding: 8px 10px; border-radius: 10px; font-size: .86rem; line-height: 1.4; }
.sap-notes li > :first-child { margin-top: 2px; font-size: .86rem; }
.sap-notes-win li { background: rgba(22,163,74,.07); } .sap-notes-win li > :first-child { color: #16a34a; }
.sap-notes-watch li { background: rgba(245,158,11,.09); } .sap-notes-watch li > :first-child { color: #d97706; }
[data-theme="dark"] .sap-stat { background: rgba(255,255,255,.04); }
@media (max-width: 600px) { .sap-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sap-stat strong { font-size: 1.3rem; } .sap-kws li { grid-template-columns: minmax(0, 1fr) auto; } .sap-kws li .sap-badge { grid-column: 2; } }

.sap-recheck { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--line); font-size: .86rem; }
.sap-recheck > span { display: flex; flex-direction: column; gap: 2px; }
.sap-recheck.is-needed { border: 1px solid rgba(245,158,11,.45); background: rgba(245,158,11,.08); }
.sap-h-link { margin-left: auto; font-weight: 600; }

/* Link clients to SEO App + auto re-check note */
.sal-card { padding: 16px 18px; }
.sal-all { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; padding: 10px 12px; border-radius: 12px; background: rgba(22,163,74,.08); border: 1px solid rgba(22,163,74,.25); }
.sal-form { display: flex; gap: 6px; margin: 0; }
.sal-form input { min-width: 0; flex: 1; max-width: 300px; }
.sal-tbl td { vertical-align: middle; }
.sap-auto-note { margin: 0 0 12px; padding: 8px 12px; border-radius: 10px; background: rgba(30,27,107,.06); border: 1px solid rgba(30,27,107,.14); }
.sap-auto-box { margin: 10px 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2, #f8fafc); }
@media (max-width: 700px) { .sal-tbl thead { display: none; } .sal-tbl tr { display: grid; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--line); } .sal-tbl td { border: 0; padding: 0; } }

.sap-sov-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sap-sov-list li { display: grid; grid-template-columns: minmax(0, 190px) 1fr 84px; gap: 10px; align-items: center; font-size: .86rem; }
.sap-sov-d { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sap-sov-bar { height: 10px; border-radius: 6px; background: rgba(148,163,184,.15); overflow: hidden; }
.sap-sov-bar i { display: block; height: 100%; background: #94a3b8; border-radius: 6px; }
.sap-sov-list li.is-me .sap-sov-bar i { background: #1e1b6b; }
.sap-sov-list li.is-me .sap-sov-d { font-weight: 700; }
.sap-sov-n { text-align: right; font-variant-numeric: tabular-nums; }
.sap-sov-n em { font-style: normal; font-size: .74rem; font-weight: 700; }
.sap-sov h3 { font-size: .86rem; margin: 12px 0 4px; }
[data-theme="dark"] .sap-sov-list li.is-me .sap-sov-bar i { background: #fcd116; }
@media (max-width: 600px) { .sap-sov-list li { grid-template-columns: minmax(0, 1fr) 70px; } .sap-sov-bar { grid-column: 1 / -1; grid-row: 2; } }

/* Page Fit: dropdown slots, links per slot, link picker */
.pfs-chip-d { background: #0d9488; }
.pf-lg-d { background: #0d9488; }
.pf-link-btn { margin-left: 4px; padding: 2px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: inherit; font: inherit; font-size: .76rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.pf-link-btn:hover { border-color: #2563eb; color: #2563eb; }
.pf-links-today { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin: 4px 0 6px; }
.pf-lt { display: inline-flex; gap: 4px; align-items: baseline; padding: 2px 8px; border-radius: 99px; font-size: .74rem; font-weight: 600; background: rgba(37,99,235,.08); color: #1d4ed8; border: 1px solid rgba(37,99,235,.2); }
.pf-lt small { font-weight: 500; opacity: .75; }
.pf-lt.is-kept { background: rgba(22,163,74,.1); color: #15803d; border-color: rgba(22,163,74,.3); }
.pf-lt.is-kept::before { content: "✓"; }
.pf-lt.is-lost { background: rgba(245,158,11,.12); color: #b45309; border-color: rgba(245,158,11,.4); cursor: pointer; }
.pf-lt.is-lost::before { content: "＋"; }
.pf-link-pop { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 6px; padding: 8px; border-radius: 10px; border: 1px dashed rgba(37,99,235,.4); background: rgba(37,99,235,.04); }
.pf-link-pop input { flex: 1 1 260px; min-width: 0; }
[data-theme="dark"] .pf-lt { color: #93c5fd; } [data-theme="dark"] .pf-lt.is-kept { color: #86efac; } [data-theme="dark"] .pf-lt.is-lost { color: #fcd34d; }

/* Good news summary */
.gn-list { display: flex; flex-direction: column; gap: 10px; }
.gn-row { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; padding: 14px 16px; margin: 0; border-left: 4px solid #16a34a; }
.gn-row.gn-check { border-left-color: #f59e0b; }
.gn-main { min-width: 0; }
.gn-name { margin-right: 8px; }
.gn-wins { margin: 6px 0 0; padding-left: 18px; font-size: .9rem; }
.gn-acts { display: flex; gap: 6px; flex-wrap: wrap; flex: none; }
@media (max-width: 640px) { .gn-row { flex-direction: column; } }

/* Clients list: SEO App column */
.cbk-sap-h img { vertical-align: -1px; margin-right: 2px; }
.cbk-sap a { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; white-space: nowrap; }
.cbk-sap a:hover .cbk-sap-n { text-decoration: underline; }
.cbk-sap-n { font-size: .8rem; color: var(--muted); }
.cbk-sap-n b { color: var(--ink, inherit); font-weight: 700; }

/* Page Fit: autosave + recent drafts */
.pf-saved { font-weight: 500; margin-left: 8px; }
.pf-restored { display: flex; gap: 10px; align-items: center; margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: rgba(22,163,74,.08); border: 1px solid rgba(22,163,74,.25); font-size: .88rem; }
.pf-recent { margin-top: 14px; padding: 16px 18px; }
.pf-recent h2 { margin: 0 0 4px; font-size: 1.05rem; }
.pf-recent ul { list-style: none; margin: 10px 0 0; padding: 0; }
.pf-recent li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.pf-recent li:first-child { border-top: 0; }
.pf-recent-u { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }

.pf-ai { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; border: 1px dashed rgba(124,58,237,.4); background: rgba(124,58,237,.04); }
.pf-ai .muted { flex: 1 1 320px; }

/* Auto-blog: learn about this business */
.blearn-card { margin-bottom: 16px; }
.blearn-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.blearn-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.blearn-form { margin-top: 12px; border-top: 1px solid var(--border, rgba(0,0,0,.1)); padding-top: 10px; }
.blearn-field { margin-bottom: 10px; }
.blearn-field textarea { width: 100%; margin-top: 4px; }
.blearn-use { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.blearn-cur { margin: 2px 0 0; }

/* Agency outreach (/prospect/agencies) */
.ao-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 12px; }
.ao-kpis > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--border, rgba(127,127,127,.25)); border-radius: 10px; }
.ao-kpis b { font-size: 1.25rem; }
.ao-kpis span { font-size: .78rem; color: var(--muted); }
.ao-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ao-actions form { margin: 0; }
.ao-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 14px; }
.ao-grid textarea, .ao-grid input, .ao-grid select { width: 100%; }
.ao-fu summary { cursor: pointer; font-weight: 600; margin: 4px 0; }
.ao-fu .field { margin-top: 6px; }
.ao-on { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ao-tag { display: inline-block; font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; vertical-align: middle; }
.ao-tag-ok { background: rgba(47,158,68,.15); color: #2f9e44; }
.ao-tag-warn { background: rgba(217,119,6,.15); color: #b45309; }
.ao-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: .88rem; }
.ao-table th, .ao-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border, rgba(127,127,127,.2)); }
.ao-table .num { text-align: right; }
@media (max-width: 640px) { .ao-table th:nth-child(4), .ao-table td:nth-child(4) { display: none; } }

/* Auto-blog: background job banner */
.ab-job { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; margin: 10px 0; border-radius: 10px; font-size: .88rem;
  background: rgba(37,99,235,.08); border: 1px solid rgba(37,99,235,.25); }
.ab-job-dot { flex: none; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: #2563eb; animation: abJobPulse 1.2s ease-in-out infinite; }
@keyframes abJobPulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.ab-job.is-stuck { background: rgba(217,119,6,.08); border-color: rgba(217,119,6,.35); }
.ab-job.is-stuck .ab-job-dot { background: #d97706; animation: none; }
.ab-job form.inline { display: inline; }
@media (prefers-reduced-motion: reduce) { .ab-job-dot { animation: none; } }

/* Platform admin: Grow PeakKR rows are links */
.pa-grow-row { color: inherit; text-decoration: none; }
.pa-grow-row:hover strong { text-decoration: underline; }

/* Billing: Starter / Unlimited choice at checkout */
.bill-pick { display: grid; gap: 8px; margin: 0 0 12px; }
.bill-pick label { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: baseline; padding: 10px 12px; border: 1px solid var(--line, rgba(127,127,127,.25)); border-radius: 10px; cursor: pointer; }
.bill-pick label .muted { grid-column: 2; }
.bill-pick label:has(input:checked) { border-color: var(--accent, #ff5a4e); }

/* Pricing: Starter + Unlimited side by side */
.lp-twoprice { gap: 22px; align-items: stretch; flex-wrap: wrap; }
.lp-twoprice .lp-oneprice-card { max-width: 420px; display: flex; flex-direction: column; }
.lp-twoprice .lp-oneprice-card .btn-block { margin-top: auto; }
.lp-twoprice .lp-price-card--starter { border-color: var(--line, rgba(127,127,127,.25)); box-shadow: 0 4px 16px rgba(9,19,45,.05); }
.lp-twoprice .lp-plan-list { text-align: left; }

/* Admin: Founders code form; pricing: Founders banner */
.pa-grow-form { flex-wrap: wrap; }
.pa-founders { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pa-founders input[name=code] { width: 130px; text-transform: uppercase; }
.pa-founders input[name=seats] { width: 80px; }
.pa-founders .pa-price { width: 220px; }
.lp-founders { max-width: 860px; margin: 0 auto 22px; padding: 12px 16px; border-radius: 14px; text-align: center; font-weight: 600;
  background: rgba(255,90,78,.08); border: 1px dashed rgba(255,90,78,.45); }
.lp-founders code { font-size: 1em; padding: 1px 6px; border-radius: 6px; background: rgba(255,90,78,.15); }

/* /founders: outreach landing page */
.fd-talk { margin: 10px 0 44px; padding: 26px; border: 1px solid var(--line, rgba(127,127,127,.25)); border-radius: 18px; background: var(--surface); }
.fd-form { display: grid; gap: 14px; }
.fd-legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fd-tools { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; }
.fd-tool { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--line, rgba(127,127,127,.3)); border-radius: 999px; cursor: pointer; font-size: .92rem; }
.fd-tool:has(input:checked) { border-color: var(--accent, #ff5a4e); background: rgba(255,90,78,.08); }
.fd-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 14px; }
.fd-fields input, .fd-form textarea { width: 100%; }
.fd-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.fd-err { margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; background: rgba(220,38,38,.1); color: #b91c1c; }
.fd-thanks { padding: 14px 16px; border-radius: 12px; background: rgba(47,158,68,.1); border: 1px solid rgba(47,158,68,.3); }

/* Agency outreach: email preview */
.ao-prev { margin: 4px 0 6px; padding: 12px; border: 1px dashed var(--border, rgba(127,127,127,.35)); border-radius: 12px; }
.ao-prev-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.ao-prev-row input { width: 100%; }
.ao-prev-out { margin-top: 10px; display: grid; gap: 12px; }
.ao-prev-from { margin: 0; }
.ao-prev-mail { border: 1px solid var(--border, rgba(127,127,127,.25)); border-radius: 12px; padding: 10px 12px; }
.ao-prev-subj { margin: 6px 0; font-size: .92rem; }
.ao-prev-lint { margin: 0 0 6px; color: #b45309; }
.ao-prev-frame { width: 100%; min-height: 160px; border: 0; border-radius: 8px; background: #fff; }

/* /founders: hero + "what's inside" gallery */
.fdx-hero { position: relative; overflow: hidden; padding: 64px 24px 72px; color: #fff;
  background: radial-gradient(700px 420px at 85% 10%, rgba(255,90,78,.35), transparent 60%), radial-gradient(600px 400px at 5% 100%, rgba(250,204,21,.18), transparent 60%), #0c142c; }
.fdx-hero-inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: center; }
.fdx-badge { display: inline-block; padding: 6px 12px; border-radius: 999px; font-size: .82rem; font-weight: 600; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); }
.fdx-h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.05; letter-spacing: -.02em; margin: 16px 0 14px; color: #fff; }
.fdx-grad { background: linear-gradient(90deg, #ff5a4e, #facc15); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fdx-lede { font-size: 1.12rem; line-height: 1.6; color: #d6def3; margin: 0 0 24px; max-width: 560px; }
.fdx-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.fdx-btn-ghost { color: #fff; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); }
.fdx-btn-ghost:hover { background: rgba(255,255,255,.16); color: #fff; }
.fdx-points { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; color: #c9d3ee; font-size: .93rem; }
.fdx-hero-shot { position: relative; }
.fdx-frame { border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08); }
.fdx-frame-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #eef1f6; border-bottom: 1px solid #dfe3ea; }
.fdx-frame-bar span { width: 10px; height: 10px; border-radius: 50%; background: #cfd5df; }
.fdx-frame-bar span:first-child { background: #ff6b5e; } .fdx-frame-bar span:nth-child(2) { background: #f8c64a; } .fdx-frame-bar span:nth-child(3) { background: #3ccf6a; }
.fdx-frame-bar em { margin-left: 10px; font-style: normal; font-size: .75rem; color: #6b7280; }
.fdx-frame img { display: block; width: 100%; height: auto; }
.fdx-hero-shot .fdx-frame { transform: perspective(1400px) rotateY(-6deg) rotateX(2deg); }
.fdx-float { position: absolute; display: flex; flex-direction: column; padding: 10px 14px; border-radius: 12px; background: #fff; color: #0c142c; box-shadow: 0 14px 40px rgba(0,0,0,.35); font-size: .82rem; }
.fdx-float b { font-size: 1.05rem; }
.fdx-float span { color: #4b5563; }
.fdx-float-a { left: -22px; bottom: 18%; } .fdx-float-b { right: -12px; top: 12%; }
.fdx-inside { max-width: 1100px; margin: 0 auto; padding: 56px 24px 8px; text-align: center; }
.fdx-inside-head h2 { margin: 6px 0 4px; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.fdx-tabs { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 18px 0 18px; padding: 5px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line, rgba(127,127,127,.25)); }
.fdx-tab { border: 0; background: transparent; padding: 8px 16px; border-radius: 999px; font: inherit; font-weight: 600; cursor: pointer; color: var(--muted); }
.fdx-tab.on { background: #0c142c; color: #fff; }
.fdx-stage { text-align: left; }
.fdx-shot { display: none; margin: 0; }
.fdx-shot.on { display: block; }
.fdx-shot figcaption { margin: 14px auto 0; max-width: 760px; text-align: center; color: var(--muted); }
@media (max-width: 900px) {
  .fdx-hero { padding: 44px 16px 52px; }
  .fdx-hero-inner { grid-template-columns: 1fr; gap: 32px; }
  .fdx-hero-shot .fdx-frame { transform: none; }
  .fdx-float { display: none; }
  .fdx-inside { padding: 40px 16px 0; }
}

/* /founders: Founders price */
.fdx-deal { margin: -6px 0 22px; padding: 10px 14px; display: inline-block; border-radius: 12px; background: rgba(250,204,21,.12); border: 1px solid rgba(250,204,21,.35); color: #fde68a; }
.fdx-deal s { color: #9aa5c4; margin-right: 6px; }
.fdx-deal code { color: #fff; background: rgba(255,255,255,.12); padding: 1px 6px; border-radius: 6px; }
.fdx-was { font-size: .45em; color: var(--muted); font-weight: 600; vertical-align: middle; margin-right: 6px; }

/* Billing: pick a plan (workspaces that haven't subscribed) */
.bp-wrap { max-width: 920px; margin: 0 auto 40px; }
.bp-head { text-align: center; margin: 4px 0 26px; }
.bp-kicker { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--primary, #ff5a4e); }
.bp-h { font-family: var(--display, inherit); font-size: clamp(1.6rem, 3.2vw, 2.3rem); margin: 6px 0 8px; }
.bp-sub { color: var(--muted); margin: 0 auto; max-width: 620px; }
.bp-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.bp-plans--one { grid-template-columns: minmax(0, 440px); justify-content: center; }
.bp-plan { position: relative; display: flex; flex-direction: column; padding: 28px 24px 22px; border-radius: 20px; background: var(--surface);
  border: 1px solid var(--line, rgba(127,127,127,.25)); box-shadow: 0 4px 16px rgba(9,19,45,.05); }
.bp-plan--hot { border-color: rgba(255,90,78,.45); box-shadow: 0 0 0 1px rgba(255,90,78,.12), 0 24px 60px rgba(8,19,32,.12); }
.bp-tag { align-self: flex-start; font-size: .75rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: rgba(255,90,78,.1); color: var(--primary, #ff5a4e); }
.bp-price { font-size: 2.6rem; font-weight: 800; margin: 14px 0 2px; line-height: 1; }
.bp-price span { font-size: .5em; vertical-align: super; }
.bp-price small { font-size: .38em; font-weight: 600; color: var(--muted); margin-left: 4px; }
.bp-price s { font-size: .45em; color: var(--muted); margin-right: 6px; }
.bp-for { color: var(--muted); margin: 6px 0 14px; min-height: 2.6em; }
.bp-list { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 8px; }
.bp-list li::before { content: "✓"; color: #2f9e44; font-weight: 700; margin-right: 8px; }
.bp-plan .btn-block { margin-top: auto; }
.bp-faq { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 26px 0 0; }
.bp-faq p { margin: 4px 0 0; color: var(--muted); font-size: .9rem; }
.bp-help { text-align: center; color: var(--muted); margin: 22px 0 0; }
@media (max-width: 760px) { .bp-plans, .bp-faq { grid-template-columns: 1fr; } }

/* Availability: edit time off in place */
.av-row { flex-wrap: wrap; }
.av-edit { position: static; }
.av-edit > summary { list-style: none; cursor: pointer; }
.av-edit > summary::-webkit-details-marker { display: none; }
.av-edit[open] { flex-basis: 100%; order: 10; }
.av-edit-form { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: flex-end; margin-top: 8px; padding: 10px; border-radius: 10px; background: var(--surface-2, rgba(127,127,127,.06)); }
.av-edit-form .field { margin: 0; }
.av-edit-form .av-note { flex: 1 1 200px; }
.av-edit-form .av-note input { width: 100%; }
.av-edit-hint { flex-basis: 100%; margin: 0; }

/* Agency outreach: why / when the next email sends */
.ao-next { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; font-size: .9rem; background: rgba(37,99,235,.07); border: 1px solid rgba(37,99,235,.2); }

/* Admin: job log */
.pa-joblog { display: block; }
.pa-joblog pre { margin: 6px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--surface-2, rgba(127,127,127,.08)); font-size: .75rem; white-space: pre-wrap; word-break: break-all; max-height: 200px; overflow: auto; }

/* Admin: workspace search + billing filter */
.pa-ws-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 12px; }
.pa-ws-tools input[type=search] { flex: 1 1 240px; max-width: 360px; }
.pa-ws-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pa-ws-chip { border: 1px solid var(--line, rgba(127,127,127,.3)); background: var(--surface); border-radius: 999px; padding: 5px 11px; font: inherit; font-size: .85rem; cursor: pointer; }
.pa-ws-chip span { color: var(--muted); margin-left: 2px; }
.pa-ws-chip.on { background: #0c142c; color: #fff; border-color: #0c142c; }
.pa-ws-chip.on span { color: rgba(255,255,255,.75); }

/* Admin: bulk restrict workspaces */
.pa-ck { width: 28px; }
.pa-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; padding: 8px 12px; border-radius: 10px;
  background: rgba(255,90,78,.07); border: 1px solid rgba(255,90,78,.3); position: sticky; top: 70px; z-index: 3; }
.pa-owner-act { display: inline; margin: 0; }

/* Admin: People list */
.pa-pp-wrap { max-height: 560px; overflow: auto; }
.pa-pp-orgs div + div { margin-top: 3px; }

/* Agenda: Department tab */
.agd-bar { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; justify-content: space-between; margin: 0 0 12px; }
.agd-kpis { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .9rem; color: var(--muted); }
.agd-kpis b { color: var(--ink, inherit); font-size: 1.05rem; margin-right: 3px; }
.is-over { color: #dc2626 !important; }
.agd-cats { padding: 14px 16px; margin: 0 0 14px; }
.agd-cats-head { display: flex; justify-content: space-between; align-items: center; margin: 0 0 8px; }
.agd-stack { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--line, rgba(127,127,127,.15)); margin: 0 0 10px; }
.agd-stack span { display: block; height: 100%; }
.agd-cat-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.agd-cat { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line, rgba(127,127,127,.3)); background: var(--surface); border-radius: 999px; padding: 4px 10px; font: inherit; font-size: .85rem; cursor: pointer; }
.agd-cat i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.agd-cat.on { border-color: #0c142c; box-shadow: inset 0 0 0 1px #0c142c; }
.agd-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; margin: 0 0 16px; }
.agd-person { padding: 12px 14px; }
.agd-phead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.agd-list { list-style: none; margin: 8px 0 0; padding: 0; }
.agd-task { display: flex; align-items: flex-start; gap: 6px; padding: 6px 0; border-top: 1px dashed var(--line, rgba(127,127,127,.2)); }
.agd-task:first-child { border-top: 0; }
.agd-task.is-starred { background: rgba(250,204,21,.08); }
.agd-star-f { margin: 0; }
.agd-star { border: 0; background: none; cursor: pointer; font-size: 1rem; line-height: 1.2; color: #ca8a04; padding: 0 2px; }
.agd-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; flex: none; }
.agd-tmain { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: .9rem; }
.agd-tmain a { color: inherit; font-weight: 600; }
.agd-due { font-size: .8rem; white-space: nowrap; margin-top: 2px; }
.agd-more { margin: 6px 0 0; }
.agd-report { padding: 16px; margin: 0 0 20px; }
.agd-rform { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; }
.agd-rform .field { margin: 0; }
.agd-ck { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; }

.fnl-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fnl-head h3 { margin: 0; }
.fnl-range { display: flex; gap: 4px; }
.fnl-range a { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border, #e5e7eb); font-size: .85rem; text-decoration: none; color: inherit; }
.fnl-range a.is-on { background: var(--accent, #faca2c); border-color: var(--accent, #faca2c); color: #111; }
.fnl-steps { list-style: none; margin: 14px 0 18px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fnl-step { display: grid; grid-template-columns: 150px 1fr 70px minmax(180px, 260px); align-items: center; gap: 10px; }
.fnl-label { font-weight: 600; }
.fnl-bar { height: 14px; border-radius: 7px; background: var(--surface-2, rgba(127,127,127,.12)); overflow: hidden; }
.fnl-bar > span { display: block; height: 100%; background: var(--accent, #ff5a4e); border-radius: 7px; }
.fnl-n { text-align: right; font-variant-numeric: tabular-nums; }
.fnl-lost { color: var(--danger, #c0392b); }
.fnl-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.fnl-cols h4 { margin: 0 0 6px; }
.fnl-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.fnl-table th, .fnl-table td { text-align: left; padding: 5px 6px; border-bottom: 1px solid var(--border, #e5e7eb); }
.fnl-table td:not(:first-child), .fnl-table th:not(:first-child) { text-align: right; width: 70px; }
@media (max-width: 720px) { .fnl-step { grid-template-columns: 1fr 60px; } .fnl-bar { grid-column: 1 / -1; grid-row: 2; } .fnl-conv { grid-column: 1 / -1; } }

.aiu-total { font-size: 1.2rem; }
.aiu-table td:nth-child(4), .aiu-table th:nth-child(4) { width: 170px; }

.stp-wrap { max-width: 760px; margin: 0 auto; padding: 48px 16px 72px; }
.stp-title { font-size: 2rem; margin: 0 0 20px; }
.stp-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 20px; border-radius: 14px; background: rgba(22,163,74,.12); border: 1px solid rgba(22,163,74,.35); }
.stp-banner.is-degraded { background: rgba(217,119,6,.12); border-color: rgba(217,119,6,.4); }
.stp-banner.is-down { background: rgba(220,38,38,.12); border-color: rgba(220,38,38,.4); }
.stp-dot { width: 12px; height: 12px; border-radius: 50%; background: #16a34a; flex: none; }
.stp-banner.is-degraded .stp-dot { background: #d97706; }
.stp-banner.is-down .stp-dot { background: #dc2626; }
.stp-checked { margin-left: auto; font-size: .85rem; color: var(--muted); }
.stp-list { list-style: none; padding: 0; margin: 20px 0; border: 1px solid var(--border, rgba(127,127,127,.25)); border-radius: 14px; }
.stp-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; }
.stp-row + .stp-row { border-top: 1px solid var(--border, rgba(127,127,127,.25)); }
.stp-note { margin: 2px 0 0; font-size: .9rem; color: var(--muted); }
.stp-pill { flex: none; font-size: .8rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; color: #15803d; background: rgba(22,163,74,.14); }
.stp-pill.is-degraded { color: #b45309; background: rgba(217,119,6,.15); }
.stp-pill.is-down { color: #b91c1c; background: rgba(220,38,38,.15); }
.stp-history { margin-top: 28px; }
.stp-history-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.stp-history-head h2 { font-size: 1.1rem; margin: 0 0 10px; }
.stp-bars { display: flex; gap: 2px; height: 34px; }
.stp-bar { flex: 1; min-width: 2px; border-radius: 2px; background: #16a34a; }
.stp-bar.is-partial { background: #d97706; }
.stp-bar.is-down { background: #dc2626; }
.stp-bar.is-none { background: rgba(127,127,127,.25); }
.stp-axis { display: flex; justify-content: space-between; font-size: .8rem; color: var(--muted); margin-top: 6px; }
.stp-foot { font-size: .85rem; color: var(--muted); margin-top: 18px; }

.wr-due { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; color: var(--muted); }
.wr-due input, .trm-due { font: inherit; font-size: .82rem; padding: 4px 6px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: inherit; }
.trm-due { max-width: 140px; font-size: .78rem; padding: 3px 6px; }

/* ===== CSS load sentinel — KEEP THIS BLOCK LAST IN THE FILE. =====
   app.js reads --css-sentinel; if a truncated/corrupted stylesheet was
   served (mid-deploy pull, proxy cache), the sentinel is missing and the
   client re-fetches the CSS once with a fresh cache-buster. When appending
   styles to this file, add them ABOVE this block. */
/* background job progress */
.conn-broken { margin: 4px 0 8px; padding: 8px 10px; border-radius: 10px; background: rgba(220, 38, 38, .08); border: 1px solid rgba(220, 38, 38, .35); color: #991b1b; font-size: .85rem; }
.task-impact { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(22, 163, 74, .35); background: rgba(22, 163, 74, .07); font-size: .9rem; }
.task-impact.is-declined { border-color: rgba(220, 38, 38, .35); background: rgba(220, 38, 38, .06); }
.task-impact.is-no_clear_change { border-color: var(--line, #e5e7eb); background: var(--bg-soft, #f9fafb); }
.task-impact-ic { font-size: 1.2rem; line-height: 1; }
.task-impact-pending { margin: 0 0 8px; }
.pf-stat-impact .pf-stat-n { color: #15803d; }
.pf-impact { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.pf-impact li { padding: 8px 10px; border-radius: 10px; background: var(--bg-soft, #f9fafb); border: 1px solid var(--line, #e5e7eb); }
.pf-impact li a { font-weight: 700; text-decoration: none; color: inherit; }
/* website leads (form submissions) */
.fl-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
@media (max-width: 960px) { .fl-grid { grid-template-columns: minmax(0, 1fr); } }
.fl-h { margin: 0 0 10px; font-size: 1.05rem; }
.fl-counts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.fl-count { display: grid; gap: 1px; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--line, #e5e7eb); text-decoration: none; color: inherit; min-width: 110px; }
.fl-count.is-on { border-color: var(--accent, #6366f1); background: rgba(99, 102, 241, .06); }
.fl-count strong { font-size: 1.3rem; } .fl-count span { font-size: .78rem; color: var(--muted, #6b7280); }
.fl-grid .card { padding: 18px 20px; }
.fl-table th, .fl-table td { padding: 12px 12px; vertical-align: top; }
.fl-grid .table-wrap { overflow-x: auto; margin: 0 -20px; padding: 0 20px; }
.fl-grid .fl-table { width: 100%; table-layout: fixed; min-width: 640px; border-collapse: collapse; }
.fl-grid .fl-table th:nth-child(1) { width: 112px; } .fl-grid .fl-table th:nth-child(2) { width: 24%; } .fl-grid .fl-table th:nth-child(4) { width: 118px; } .fl-grid .fl-table th:nth-child(5) { width: 112px; }
.fl-grid .fl-table td { overflow-wrap: anywhere; white-space: normal; border-bottom: 1px solid var(--line); }
.fl-grid .fl-table td:first-child { white-space: normal; }
.fl-table td:nth-child(2) .small { display: block; word-break: break-all; }
.fl-msg { font-size: .9rem; line-height: 1.5; }
.fl-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.fl-badge-qualified { background: rgba(22, 163, 74, .14); color: #15803d; } .fl-badge-review { background: rgba(245, 158, 11, .16); color: #b45309; } .fl-badge-spam { background: rgba(107, 114, 128, .14); color: #4b5563; }
.fl-why { margin: 4px 0 0 14px; padding: 0; color: var(--muted, #6b7280); }
.fl-acts form { margin: 0 0 6px; display: block; }
.fl-acts .fl-del { color: var(--muted); } .fl-acts .fl-del:hover { color: var(--danger); }
.fl-row.fl-spam td { opacity: .7; }
.fl-side { display: grid; gap: 16px; }
.fl-steps { padding-left: 18px; } .fl-code { display: block; padding: 6px 8px; border-radius: 8px; background: var(--bg-soft, #f3f4f6); overflow-wrap: anywhere; font-size: .78rem; margin: 4px 0; }
.fl-btns { display: flex; gap: 8px; margin-top: 8px; }
.fl-test { display: grid; gap: 6px; } .fl-test input, .fl-test textarea { width: 100%; }
/* My desk: the ranked worklist */
.dk-home { padding: 16px 18px; margin-bottom: 20px; }
.dk-home-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.dk-home-h h2 { margin: 0; font-size: 1.1rem; display: flex; align-items: center; gap: 8px; }
.dk-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--accent, #6366f1); color: #fff; font-size: .78rem; font-weight: 700; }
.dk-group { padding: 16px 18px; margin-bottom: 14px; }
.dk-group-h { margin: 0 0 8px; font-size: 1rem; }
.dk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dk-item { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); }
.dk-item.is-hot { border-color: rgba(220, 38, 38, .4); background: rgba(220, 38, 38, .05); }
.dk-ic { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(99, 102, 241, .12); color: #4f46e5; }
.dk-ic-sales { background: rgba(245, 158, 11, .14); color: #b45309; }
.dk-ic-task { background: rgba(22, 163, 74, .12); color: #15803d; }
.dk-ic-reply { background: rgba(14, 165, 233, .12); color: #0369a1; }
.dk-ic-growth { background: rgba(220, 38, 38, .12); color: #b91c1c; }
.dk-ic-meeting { background: rgba(168, 85, 247, .12); color: #7e22ce; }
.dk-body { flex: 1; min-width: 0; display: grid; gap: 1px; }
.dk-title { font-weight: 700; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.dk-why { color: var(--muted, #6b7280); font-size: .85rem; }
.dk-acts { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.dk-form { display: flex; align-items: center; gap: 8px; }
.dk-snooze { position: relative; }
.dk-snooze > summary { list-style: none; cursor: pointer; }
.dk-snooze > summary::-webkit-details-marker { display: none; }
.dk-snooze-menu { position: absolute; right: 0; top: 100%; z-index: 5; display: grid; gap: 4px; padding: 8px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .35); white-space: nowrap; }
.dk-empty { margin: 6px 0; color: var(--muted, #6b7280); }
@media (max-width: 640px) { .dk-item { flex-wrap: wrap; } .dk-acts { width: 100%; justify-content: flex-end; } }
/* audit triage: what matters this month */
.sa-triage { padding: 18px 20px; margin-top: 14px; border-left: 4px solid #dc2626; }
.sa-triage-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.sa-triage-h h3 { margin: 0 0 2px; font-size: 1.05rem; }
.sa-triage-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.sa-triage-item { display: flex; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--bg-soft, #f9fafb); border: 1px solid var(--line, #e5e7eb); }
.sa-triage-n { flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #dc2626; color: #fff; font-weight: 800; font-size: .85rem; }
.sa-triage-body { min-width: 0; flex: 1; }
.sa-triage-url { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-weight: 700; overflow-wrap: anywhere; }
.sa-triage-clicks { padding: 1px 8px; border-radius: 999px; background: rgba(22, 163, 74, .12); color: #15803d; font-size: .75rem; font-weight: 700; }
.sa-triage-clicks.is-dim { background: rgba(107, 114, 128, .12); color: #4b5563; }
.sa-triage-why { margin: 2px 0 6px; }
.sa-triage-issues { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sa-triage-issue { display: grid; gap: 1px; font-size: .88rem; }
.sa-triage-issue a { font-weight: 600; text-decoration: none; color: inherit; }
.sa-triage-issue.is-error a { color: #b91c1c; }
.sa-triage-issue.is-warning a { color: #b45309; }
.sa-triage-issue em { font-style: normal; color: var(--muted, #6b7280); font-size: .82rem; }
.job-bar { padding: 12px 16px; margin-bottom: 12px; }
.job-bar-h { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.job-bar-track { height: 8px; border-radius: 999px; background: var(--border, #e5e7eb); overflow: hidden; }
.job-bar-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6366f1, #16c0b7); transition: width .6s ease; }
.job-bar.is-done .job-bar-track i { background: #16a34a; }
.job-bar.is-failed .job-bar-track i { background: #dc2626; width: 100% !important; }

/* ===== Sales page (Pipeline → Sales): sold / cancelled / close rate / renew rate ===== */
.sr-years { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 18px; }
.sr-years .wl-vt { padding: 8px 16px; }
.sr-ytd { font-size: .5em; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); vertical-align: middle; margin-left: 8px; }
.sr-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--line, var(--border)); border: 1px solid var(--line, var(--border)); border-radius: var(--radius); overflow: hidden; margin: 24px 0 28px; }
.sr-stat { display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 20px; background: var(--surface); min-width: 0; }
.sr-stat-n { font-family: var(--display); font-weight: 700; font-size: 1.7rem; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sr-stat-n small { font-size: .55em; font-weight: 600; color: var(--muted); }
.sr-stat-l { font-size: .8rem; line-height: 1.35; color: var(--muted); }
.sr-up { color: var(--success); }
.sr-down { color: var(--danger); }
.sr-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
.sr-card { margin: 0 0 28px; padding: 26px 28px 22px; }
.sr-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font-size: 1.15rem; margin: 0 0 18px; }
.sr-sub { font-size: .84rem; font-weight: 500; color: var(--muted); }
.sr-card .table-wrap { margin: 0 -28px; padding: 0 28px; overflow-x: auto; }
.sr-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.sr-table th { text-align: left; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 12px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line, var(--border)); white-space: nowrap; }
.sr-table thead th:first-child { border-top-left-radius: 10px; border-bottom-left-radius: 0; }
.sr-table thead th:last-child { border-top-right-radius: 10px; }
.sr-table td { padding: 13px 14px; border-bottom: 1px solid var(--line, var(--border)); vertical-align: top; white-space: nowrap; line-height: 1.45; }
.sr-table tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.sr-table tfoot th { font-size: .82rem; text-transform: none; letter-spacing: 0; color: var(--ink); background: transparent; border-top: 2px solid var(--line, var(--border)); border-bottom: 0; padding: 14px; }
.sr-table td.sr-who, .sr-table th.sr-who { white-space: normal; width: 56%; }
.sr-table td.sr-who { padding-top: 10px; padding-bottom: 6px; }
.sr-table td:first-child { font-weight: 600; }
.sr-table tr.sr-empty td { color: var(--muted); font-weight: 400; padding-top: 8px; padding-bottom: 8px; }
.sr-yoy tr.is-on td { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.sr-yoy td a { color: inherit; }
.sr-bar { display: block; height: 4px; border-radius: 2px; margin-top: 6px; max-width: 120px; }
.sr-bar-up { background: var(--success); }
.sr-bar-down { background: var(--danger); }
.sr-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; vertical-align: middle; margin-right: 4px; position: relative; top: -1px; }
.sr-dot-sheet { background: var(--success); }
.sr-dot-live { background: #6366f1; }
.sr-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; margin: 0 6px 6px 0; border: 1px solid var(--line, var(--border)); border-radius: 999px; font-size: .8rem; background: var(--surface); white-space: nowrap; line-height: 1.3; }
.sr-chip a { color: inherit; font-weight: 600; }
.sr-fee { color: var(--muted); font-variant-numeric: tabular-nums; }
.sr-partner { font-size: .66rem; font-weight: 700; letter-spacing: .04em; padding: 1px 6px; border-radius: 4px; background: var(--surface-2); color: var(--ink); }
.sr-tag { font-style: normal; font-size: .66rem; font-weight: 600; padding: 1px 6px; border-radius: 4px; background: rgba(99,102,241,.12); color: #4f46e5; }
.sr-tag-downgrade, .sr-tag-fired, .sr-tag-ghosted { background: rgba(220,38,38,.12); color: #b42318; }
.sr-tag-ads, .sr-tag-social { background: rgba(245,158,11,.16); color: #92400e; }
.sr-tag-excluded { background: var(--surface-2); color: var(--muted); }
.sr-cr { font-variant-numeric: tabular-nums; color: var(--muted); }
.sr-cr b { color: var(--ink); }
.sr-crp { font-size: .8rem; font-weight: 600; margin-left: 2px; }
.sr-close td, .sr-close th { text-align: right; }
.sr-close td:first-child, .sr-close th:first-child { text-align: left; }
.sr-renew td:nth-child(4) { min-width: 150px; }
.sr-renew td:last-child { white-space: normal; }
.sr-import-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; }
.sr-import p.small { line-height: 1.55; }
.sr-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 16px 0; padding: 14px 16px; border: 1px dashed var(--line, var(--border)); border-radius: 12px; background: var(--surface-2); }
.sr-legend { margin-top: 14px; line-height: 1.55; }
.sr-imp { width: auto; min-width: 260px; }
[data-theme="dark"] .sr-tag { background: rgba(129,140,248,.2); color: #c7d2fe; }
[data-theme="dark"] .sr-tag-downgrade, [data-theme="dark"] .sr-tag-fired, [data-theme="dark"] .sr-tag-ghosted { background: rgba(248,113,113,.2); color: #fecaca; }
[data-theme="dark"] .sr-tag-ads, [data-theme="dark"] .sr-tag-social { background: rgba(251,191,36,.2); color: #fde68a; }
.sr-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 0 0 28px; }
.sr-chart { padding: 18px 20px 16px; }
.sr-chart-wide { grid-column: 1 / -1; }
.sr-chart .plc-h { font-size: 1rem; }
.sr-legend-inline { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: .76rem; font-weight: 500; color: var(--muted); }
.sr-legend-inline i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-left: 8px; }
.sr-legend-inline i:first-child { margin-left: 0; }
.plc-sub { fill: var(--muted); font-weight: 500; }
.sr-yoy-wrap { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; align-items: start; }
.sr-yoy td, .sr-yoy th { padding: 9px 10px; font-size: .86rem; }
.sr-small { display: block; font-size: .7rem; font-weight: 500; color: var(--muted); line-height: 1.2; }
.sr-table th.num, .sr-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.sr-months td, .sr-months th { padding-top: 10px; padding-bottom: 10px; }
.sr-barcol { width: 110px; padding-left: 6px !important; }
.sr-barcol .sr-bar { margin-top: 7px; max-width: 100px; height: 8px; border-radius: 4px; }
.sr-bar-amber { background: #d97706; }
.sr-table td.sr-who { width: auto; white-space: normal; padding-top: 8px; padding-bottom: 8px; }
.sr-who-d > summary { list-style: none; cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--muted); padding: 2px 0; white-space: nowrap; }
.sr-who-d > summary::-webkit-details-marker { display: none; }
.sr-who-d > summary::before { content: "▸"; display: inline-block; width: 12px; font-size: .7rem; transition: transform .12s; }
.sr-who-d[open] > summary::before { transform: rotate(90deg); }
.sr-who-d > summary:hover { color: var(--ink); }
.sr-who-list { padding: 8px 0 2px; }
.sr-foot-note { text-align: left; font-weight: 500; }
.sr-cell { display: inline-block; min-width: 46px; padding: 2px 7px; border-radius: 6px; font-variant-numeric: tabular-nums; color: var(--muted); }
.sr-cell b { color: var(--ink); }
.sr-heat-hi { background: rgba(13,148,136,.18); }
.sr-heat-mid { background: rgba(13,148,136,.08); }
.sr-heat-lo { background: rgba(217,119,6,.12); }
.sr-heat-zero { background: rgba(224,82,82,.10); }
.sr-heat-legend { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sr-close td.sr-all, .sr-close th.sr-all { border-left: 1px solid var(--line, var(--border)); }
.sr-note { white-space: normal; }
[data-theme="dark"] .sr-heat-hi { background: rgba(45,212,191,.25); }
[data-theme="dark"] .sr-heat-mid { background: rgba(45,212,191,.12); }
[data-theme="dark"] .sr-heat-lo { background: rgba(251,191,36,.18); }
[data-theme="dark"] .sr-heat-zero { background: rgba(248,113,113,.18); }
@media (max-width: 960px) { .sr-charts { grid-template-columns: 1fr; } .sr-yoy-wrap { grid-template-columns: 1fr; } }
@media (max-width: 960px) { .sr-stats { grid-template-columns: repeat(3, 1fr); } .sr-import-grid { grid-template-columns: 1fr; } .sr-card { padding: 20px 18px 16px; } .sr-card .table-wrap { margin: 0 -18px; padding: 0 18px; } }
@media (max-width: 600px) { .sr-stats { grid-template-columns: repeat(2, 1fr); } .sr-table td.sr-who, .sr-table th.sr-who { width: auto; min-width: 260px; } }

.cw-auto { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: .72rem; font-weight: 600; background: rgba(99,102,241,.12); color: #4f46e5; }
[data-theme="dark"] .cw-auto { background: rgba(129,140,248,.2); color: #c7d2fe; }

.wu-files { padding: 12px 14px; border: 1px dashed var(--line); border-radius: 12px; transition: border-color .15s, background .15s; }
.wu-files.is-over { border-color: var(--teal); background: rgba(255,90,78,.05); }
.wu-files .wu-lab { display: block; margin-bottom: 8px; }
.wu-files-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.wu-files-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.wu-files-list li { display: flex; align-items: center; gap: 10px; font-size: .88rem; padding: 6px 10px; border-radius: 8px; background: var(--surface-2); }
.wu-files-list li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wu-files-list li small { color: var(--muted); }

.er-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: 18px 0; }
.er-stat { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; background: var(--surface); }
.er-stat strong { font-family: var(--display); font-size: 1.5rem; line-height: 1; } .er-stat span { font-size: .78rem; color: var(--muted); }
.er-tabs { margin-bottom: 14px; }
.er-card { padding: 22px 24px; margin-bottom: 20px; }
.er-card .table-wrap { margin: 0 -24px; padding: 0 24px; overflow-x: auto; }
.er-table td.er-title { white-space: normal; min-width: 320px; }
.er-table td.er-title a { font-weight: 600; color: inherit; }
.er-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.er-badge-open { background: rgba(220,38,38,.12); color: #b42318; } .er-badge-fixed { background: rgba(22,163,74,.14); color: #15803d; } .er-badge-ignored { background: var(--surface-2); color: var(--muted); } .er-badge-back { background: rgba(245,158,11,.16); color: #92400e; }
.er-h1 { font-size: 1.5rem; line-height: 1.3; word-break: break-word; }
.er-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.er-h { font-size: 1.05rem; margin: 0 0 12px; }
.er-dl { display: grid; grid-template-columns: 110px 1fr; gap: 8px 14px; margin: 0; font-size: .92rem; } .er-dl dt { color: var(--muted); } .er-dl dd { margin: 0; }
.er-trace { margin: 8px 0 0; padding: 12px 14px; background: var(--surface-2); border-radius: 10px; font-size: .78rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; max-height: 460px; overflow: auto; }
.er-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.dk-ic-error { color: var(--danger); }
[data-theme="dark"] .dk-ic { background: rgba(129,140,248,.2); color: #c7d2fe; }
[data-theme="dark"] .dk-ic-sales { background: rgba(251,191,36,.2); color: #fde68a; }
[data-theme="dark"] .dk-ic-task { background: rgba(74,222,128,.2); color: #bbf7d0; }
[data-theme="dark"] .dk-ic-reply { background: rgba(56,189,248,.2); color: #bae6fd; }
[data-theme="dark"] .dk-ic-growth { background: rgba(248,113,113,.2); color: #fecaca; }
[data-theme="dark"] .dk-ic-meeting { background: rgba(192,132,252,.2); color: #e9d5ff; }
.efp-q { width: 100%; max-width: 260px; padding: 7px 10px; border: 1px solid var(--line-2, var(--line)); border-radius: 9px; background: var(--bg-2, var(--surface)); color: var(--ink); font: inherit; font-size: .88rem; margin-right: 6px; }
.efp-hint { margin: 0 8px; }
.efp-bar { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.efp-search { flex: 1; max-width: 520px; padding: 9px 12px; border: 1px solid var(--line-2, var(--line)); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; }
@media (max-width: 860px) { .er-grid { grid-template-columns: 1fr; } .er-stats { grid-template-columns: repeat(2, 1fr); } }

.ts-sug { padding: 18px 20px; margin: 0 0 20px; border: 1px solid rgba(99,102,241,.25); }
.ts-sug-h { margin: 0 0 4px; font-size: 1.05rem; }
.ts-sug-day { margin: 14px 0 6px; font-size: .95rem; }
.ts-sug-row { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(0, 1.4fr) 70px 28px minmax(140px, 1.2fr); gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); }
.ts-sug-row.is-off { opacity: .45; }
.ts-sug-pick { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.ts-sug-min, .ts-sug-note { padding: 6px 8px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-2); color: var(--ink); font: inherit; font-size: .88rem; width: 100%; }
.ts-sug-acts { margin-top: 10px; }
.scd-nav { display: flex; gap: 8px; flex-wrap: wrap; }
.scd-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 18px 0 10px; }
.scd-tile { padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); display: flex; flex-direction: column; gap: 4px; }
.scd-tile.scd-warn { border-color: rgba(220,38,38,.35); }
.scd-n { font-family: var(--display); font-size: 1.7rem; font-weight: 700; line-height: 1; }
.scd-l { font-size: .82rem; color: var(--muted); }
.scd-d { font-size: .74rem; font-weight: 600; } .scd-up { color: var(--success); } .scd-down { color: var(--danger); }
.scd-foot { margin-top: 10px; }
.scd-card { padding: 20px 24px; } .scd-card .table-wrap { overflow-x: auto; }
.scd-table td.scd-read { white-space: normal; min-width: 220px; }
.scd-row-warn td:first-child { border-left: 3px solid var(--danger); }
.cap-card { padding: 18px 22px; margin-bottom: 18px; }
.cap-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 1.05rem; margin: 0 0 12px; }
.cap-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.cap-stat { background: var(--surface); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.cap-stat strong { font-family: var(--display); font-size: 1.4rem; line-height: 1; } .cap-stat span { font-size: .78rem; color: var(--muted); }
.cap-stat.cap-bad strong { color: var(--danger); } .cap-stat.cap-ok strong { color: var(--success); }
.cap-leads { margin-top: 10px; } .cap-leads > summary { cursor: pointer; list-style: none; } .cap-table { margin-top: 8px; }
.up-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.up-card { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; } .up-card.is-dismissed { opacity: .55; }
.up-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.up-name { font-weight: 700; font-size: 1.02rem; color: inherit; }
.up-score { flex: 0 0 auto; min-width: 36px; text-align: center; padding: 3px 8px; border-radius: 999px; background: rgba(99,102,241,.12); color: #4f46e5; font-weight: 700; font-size: .82rem; }
.up-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: .9rem; line-height: 1.45; }
.up-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: auto; }
@media (max-width: 900px) { .scd-grid { grid-template-columns: repeat(2, 1fr); } .cap-stats { grid-template-columns: repeat(2, 1fr); } .ts-sug-row { grid-template-columns: 1fr 1fr; } }

.bl-sel { margin-left: 8px; color: var(--muted); } .bl-sel strong { color: var(--ink); }

.cw-switch { position: relative; }
.cw-switch > summary { list-style: none; cursor: pointer; display: inline-flex; }
.cw-switch > summary::-webkit-details-marker { display: none; }
.cw-switch-form { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; width: 360px; max-width: calc(100vw - 32px); padding: 14px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 16px 40px -16px rgba(0,0,0,.35); display: grid; gap: 8px; text-align: left; }
.cw-switch-form select { width: 100%; }
.cw-switch-form .efp-q { max-width: none; margin: 0; }

/* Growth plan: which team owns each win + the one-click team assignment. */
.gw-dept { padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 800; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.gw-dept-seo { background: color-mix(in srgb, #2563eb 14%, transparent); color: #1d4ed8; }
.gw-dept-content { background: color-mix(in srgb, #d97706 16%, transparent); color: #b45309; }
.gw-dept-dev { background: color-mix(in srgb, #7c3aed 14%, transparent); color: #6d28d9; }
:root[data-theme="dark"] .gw-dept-seo { color: #93c5fd; }
:root[data-theme="dark"] .gw-dept-content { color: #fcd34d; }
:root[data-theme="dark"] .gw-dept-dev { color: #c4b5fd; }
.gw-dept-btn { display: inline-flex; align-items: center; gap: 6px; }
.gw-dept-who { font-weight: 500; opacity: .85; }
.gw-pick { position: relative; }
.gw-pick > summary { cursor: pointer; list-style: none; padding: 4px 6px; border-radius: 6px; }
.gw-pick > summary::-webkit-details-marker { display: none; }
.gw-pick > summary:hover { background: var(--surface-2); }
.gw-pick-row { display: inline-flex; gap: 8px; align-items: center; margin-left: 6px; }
@media (max-width: 640px) { .gw-task-form { margin-left: 0; width: 100%; } .gw-pick-row { margin: 6px 0 0; } }

/* Growth plan memory: a win that became a task, and the ignore-with-reason flow. */
.gw-tasked { border-left: 4px solid #16a34a; }
.gw-done { border-left: 4px solid var(--muted); opacity: .85; }
.gw-state { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, #16a34a 10%, transparent); color: #15803d; font-size: .9rem; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.gw-state a { margin-left: auto; font-weight: 600; }
.gw-done .gw-state { background: var(--surface-2); color: var(--muted); }
:root[data-theme="dark"] .gw-state { color: #86efac; }
.gw-skipped { margin: 0 0 6px; }
.gw-ignore { position: relative; }
.gw-ignore > summary { list-style: none; cursor: pointer; }
.gw-ignore > summary::-webkit-details-marker { display: none; }
.gw-ignore-form { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: min(420px, 92vw); padding: 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(0,0,0,.14); display: flex; flex-direction: column; gap: 10px; }
.gw-ignore-form label { display: flex; flex-direction: column; gap: 4px; }
.gw-ignore-form input[type=text], .gw-ignore-form select { width: 100%; }
.gw-ignore-every { flex-direction: row !important; align-items: center; gap: 8px !important; }
.gw-hidden { margin-top: 18px; }
.gw-hidden-h { margin: 0 0 10px; font-size: 1rem; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.gw-hidden-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.gw-hidden-list li { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); font-size: .9rem; }
.gw-hidden-why { font-style: italic; color: var(--muted); }
.gw-hidden-list form { margin-left: auto; }

/* Triage Room: the red → green board and the per-client analyst room. */
.trm-scored { margin: -6px 0 14px; }
.trm-band { margin: 0 0 22px; }
.trm-band-h { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; margin: 0 0 10px; }
.trm-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: #94a3b8; flex: 0 0 auto; vertical-align: middle; }
.trm-dot-red { background: #dc2626; } .trm-dot-orange { background: #ea580c; } .trm-dot-yellow { background: #d97706; } .trm-dot-green { background: #16a34a; }
.trm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.trm-card { display: block; padding: 14px 16px; text-decoration: none; color: inherit; border-left: 4px solid #94a3b8; }
.trm-card:hover { border-color: var(--primary); }
.trm-card-red { border-left-color: #dc2626; } .trm-card-orange { border-left-color: #ea580c; } .trm-card-yellow { border-left-color: #d97706; } .trm-card-green { border-left-color: #16a34a; }
.trm-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.trm-card-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.trm-score { flex: 0 0 auto; min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; font-weight: 800; color: #fff; background: #94a3b8; font-variant-numeric: tabular-nums; padding: 0 8px; }
.trm-score-red { background: #dc2626; } .trm-score-orange { background: #ea580c; } .trm-score-yellow { background: #d97706; } .trm-score-green { background: #16a34a; }
.trm-score-lg { font-size: 1rem; vertical-align: middle; margin-left: 8px; }
.trm-reasons { margin: 0; padding-left: 18px; font-size: .86rem; display: flex; flex-direction: column; gap: 3px; }
.trm-lessons ul, .trm-ev { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: .88rem; }
.trm-lessons-h { font-size: 1rem; margin: 0 0 10px; }
.trm-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .7rem; font-weight: 700; background: var(--surface-2); color: var(--muted); vertical-align: middle; }
.trm-room { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
@media (max-width: 960px) { .trm-room { grid-template-columns: 1fr; } }
.trm-chat { padding: 16px 18px; }
.trm-chat-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.trm-chat-head h2 { margin: 0; font-size: 1.05rem; }
.trm-thread { max-height: min(62vh, 720px); min-height: 220px; }
.trm-who { display: block; font-size: .7rem; opacity: .8; margin-bottom: 2px; }
.trm-hello { font-style: italic; }
.trm-warn { padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, #d97706 14%, transparent); color: #b45309; font-size: .9rem; }
.trm-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.trm-clear { margin-left: auto; }
.trm-side { display: flex; flex-direction: column; gap: 14px; }
.trm-side-card { padding: 14px 16px; }
.trm-side-card h3 { margin: 0 0 10px; font-size: .98rem; }
.trm-case { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); border-left-width: 4px; margin-bottom: 8px; background: var(--surface); }
.trm-case-red { border-left-color: #dc2626; } .trm-case-orange { border-left-color: #ea580c; } .trm-case-yellow { border-left-color: #d97706; } .trm-case-green { border-left-color: #16a34a; }
.trm-case-done { opacity: .85; }
.trm-case-head { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: .9rem; }
.trm-case-url { display: inline-block; margin: 2px 0; overflow-wrap: anywhere; }
.trm-case p { margin: 4px 0 0; }
.trm-outcome { color: #15803d; }
.trm-resolve > summary, .trm-new-case > summary, .trm-done > summary { cursor: pointer; list-style: none; margin-top: 6px; }
.trm-resolve > summary::-webkit-details-marker, .trm-new-case > summary::-webkit-details-marker, .trm-done > summary::-webkit-details-marker { display: none; }
.trm-resolve-form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.trm-resolve-form textarea, .trm-resolve-form input[type=text] { width: 100%; font: inherit; font-size: .88rem; }
.trm-resolve-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.trm-case-offer { display: flex; flex-direction: column; gap: 8px; border-left-width: 4px; }
.trm-case-offer-txt .trm-tag { margin-left: 4px; }

/* War Room chat: a proper messenger, not a form. */
.wr-chat { padding: 0; overflow: hidden; display: flex; flex-direction: column; min-height: 560px; }
.wr-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line);
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, var(--surface)), var(--surface) 60%); }
.wr-head-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.wr-head-txt strong { font-size: 1rem; }
.wr-avatar { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 1.05rem;
    background: linear-gradient(135deg, #ff5a4e, #ff8a3d); box-shadow: 0 6px 16px rgba(255,90,78,.28); }
.wr-avatar-sm { width: 30px; height: 30px; border-radius: 9px; font-size: .85rem; box-shadow: none; margin-top: 4px; }
.wr-pill { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: .74rem; font-weight: 700;
    background: color-mix(in srgb, #16a34a 12%, transparent); color: #15803d; white-space: nowrap; }
:root[data-theme="dark"] .wr-pill { color: #86efac; }
@media (max-width: 640px) { .wr-pill { display: none; } }
.wr-thread { flex: 1; overflow-y: auto; padding: 18px 18px 8px; display: flex; flex-direction: column; gap: 14px; max-height: min(64vh, 760px); min-height: 280px; scroll-behavior: smooth;
    background: radial-gradient(1200px 300px at 50% -80px, color-mix(in srgb, var(--primary) 6%, transparent), transparent 70%); }
.wr-row { display: flex; gap: 10px; align-items: flex-start; }
.wr-row-user { justify-content: flex-end; }
.wr-bubble { max-width: 82%; padding: 12px 15px; border-radius: 18px; font-size: .92rem; line-height: 1.55; overflow-wrap: anywhere; position: relative; }
.wr-bubble-ai { background: var(--surface); border: 1px solid var(--line); border-top-left-radius: 6px; box-shadow: 0 2px 10px rgba(9,19,45,.05); }
:root[data-theme="dark"] .wr-bubble-ai { background: var(--surface-2); box-shadow: none; }
.wr-bubble-ai p { margin: 0 0 8px; } .wr-bubble-ai p:last-of-type { margin-bottom: 0; }
.wr-bubble-ai ul, .wr-bubble-ai ol { margin: 6px 0; padding-left: 20px; }
.wr-bubble-ai strong { color: var(--ink); }
.wr-bubble-user { background: linear-gradient(135deg, #ff5a4e, #ff7a3d); color: #fff; border-top-right-radius: 6px; box-shadow: 0 6px 18px rgba(255,90,78,.22); }
.wr-meta { display: block; font-size: .7rem; opacity: .85; margin-bottom: 3px; font-weight: 600; }
.wr-time { display: block; font-size: .68rem; color: var(--muted); margin-top: 8px; }
.wr-bubble-user .wr-time { color: rgba(255,255,255,.8); }
.wr-live::after { content: '▍'; animation: st-blink 1s steps(2) infinite; opacity: .7; }
.wr-err { border-color: rgba(192,57,43,.4); color: #c0392b; }
.wr-typing { display: inline-flex; gap: 4px; padding: 2px 0; }
.wr-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); opacity: .5; animation: wr-dot 1.2s infinite; }
.wr-typing i:nth-child(2) { animation-delay: .2s; } .wr-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes wr-dot { 0%, 80%, 100% { transform: translateY(0); opacity: .4; } 40% { transform: translateY(-4px); opacity: 1; } }
.wr-next { margin-top: 12px; padding: 10px 12px; border-radius: 12px; display: flex; flex-direction: column; gap: 4px;
    background: color-mix(in srgb, #16a34a 10%, transparent); border: 1px solid color-mix(in srgb, #16a34a 30%, transparent); }
.wr-next-k { font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #15803d; display: inline-flex; gap: 6px; align-items: center; }
:root[data-theme="dark"] .wr-next-k { color: #86efac; }
.wr-case { display: flex; flex-direction: column; gap: 8px; max-width: 82%; padding: 12px 15px; border-radius: 16px; border: 1px solid var(--line); border-left: 4px solid #d97706; background: var(--surface); }
.wr-case-red { border-left-color: #dc2626; } .wr-case-orange { border-left-color: #ea580c; } .wr-case-yellow { border-left-color: #d97706; } .wr-case-green { border-left-color: #16a34a; }
.wr-case-k { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; margin-right: 6px; }
.wr-case p { margin: 4px 0 0; }
.wr-chips { display: flex; gap: 6px; overflow-x: auto; padding: 10px 18px 6px; scrollbar-width: none; }
.wr-chips::-webkit-scrollbar { display: none; }
.wr-chip { flex: 0 0 auto; font: inherit; font-size: .78rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; white-space: nowrap; }
.wr-chip:hover { color: var(--primary); border-color: var(--primary); }
.wr-composer { display: flex; gap: 8px; align-items: flex-end; margin: 6px 18px 10px; padding: 8px 8px 8px 14px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface-2); }
.wr-composer:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(255,90,78,.14); }
.wr-composer textarea { flex: 1; min-width: 0; resize: none; border: none; background: transparent; font: inherit; font-size: .92rem; line-height: 1.45; padding: 6px 0; max-height: 180px; color: inherit; }
.wr-composer textarea:focus { outline: none; }
.wr-send { flex: 0 0 auto; width: 38px; height: 38px; border: none; border-radius: 50%; cursor: pointer; color: #fff; display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #ff5a4e, #ff8a3d); box-shadow: 0 4px 12px rgba(255,90,78,.3); transition: transform .12s; }
.wr-send:hover { transform: translateY(-1px); }
.wr-busy .wr-send { opacity: .5; pointer-events: none; }
.wr-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 0 18px 12px; flex-wrap: wrap; }

/* War Room cases: check-ins and the task button. */
.trm-checks { margin: 6px 0 4px; display: flex; flex-direction: column; gap: 3px; font-size: .84rem; }
.trm-verdict { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .72rem; font-weight: 800; width: max-content; }
.trm-verdict-worse { background: color-mix(in srgb, #dc2626 14%, transparent); color: #b91c1c; }
.trm-verdict-better { background: color-mix(in srgb, #16a34a 14%, transparent); color: #15803d; }
.trm-verdict-flat, .trm-verdict-nodata { background: var(--surface-2); color: var(--muted); }
.trm-checks-all > summary { cursor: pointer; list-style: none; }
.trm-case-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.trm-task-form { display: inline-flex; gap: 4px; align-items: center; }
.trm-assign { font: inherit; font-size: .78rem; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: inherit; max-width: 110px; }

/* "Next step" strip that links the SEO tools to each other and into the War Room. */
.nxs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -4px 0 16px; }
.nxs-k { font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }
.nxs-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; font-size: .82rem; font-weight: 600; }
.nxs-chip:hover { border-color: var(--primary); color: var(--primary); }
.nxs-chip-hot { background: linear-gradient(135deg, #ff5a4e, #ff8a3d); color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgba(255,90,78,.25); }
.nxs-chip-hot:hover { color: #fff; filter: brightness(1.05); }

/* Content writer: claims check + what the numbers say. */
.cw-claims-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cw-claim { display: flex; gap: 10px; align-items: flex-start; border-top: 1px solid var(--line); padding-top: 8px; font-size: .9rem; }
.cw-claim-txt { flex: 1; min-width: 0; }
.cw-claim-tag { display: inline-block; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 1px 7px; border-radius: 999px; margin-right: 6px;
    background: color-mix(in srgb, #dc2626 12%, transparent); color: #b91c1c; }
.cw-claim-general .cw-claim-tag { background: var(--surface-2); color: var(--muted); }
.cw-claim-why { display: block; margin-top: 2px; }
.cw-claim-pick { padding-top: 2px; }
.cw-claims-foot { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.cw-claims-ok { margin-top: 8px; }
.cw-claims-ok > summary { cursor: pointer; list-style: none; }
.cw-works-list { margin: 10px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: .9rem; }

/* War Room: Next-step assignment + the evidence board (chart, bars, page X-ray). */
.wr-next-txt { font-size: .92rem; }
.wr-next-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; padding-top: 8px; border-top: 1px dashed color-mix(in srgb, #16a34a 35%, transparent); }
.wr-next-form select { font: inherit; font-size: .82rem; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: inherit; max-width: 240px; }
.wr-next-note { font-size: .74rem; color: var(--muted); }
.wr-xray-link { margin-top: 10px; display: inline-flex; gap: 6px; align-items: center; font: inherit; font-size: .8rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); cursor: pointer; }
.wr-board { margin-top: 18px; padding: 0; overflow: hidden; }
.wr-board-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.wr-board-head h2 { margin: 0; font-size: 1.02rem; }
.wr-tabs { display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--surface-2); flex-wrap: wrap; }
.wr-tab { font: inherit; font-size: .8rem; font-weight: 700; border: none; background: transparent; color: var(--muted); padding: 6px 12px; border-radius: 999px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.wr-tab.is-on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 4px rgba(9,19,45,.08); }
.wr-tab-n { font-size: .68rem; padding: 0 6px; border-radius: 999px; background: var(--primary); color: #fff; }
.wr-pane { padding: 16px 18px; }
.wr-chart-wrap { width: 100%; overflow-x: auto; }
.trm-chart { width: 100%; min-width: 520px; height: auto; display: block; }
.trm-ch-grid { stroke: var(--line); stroke-width: 1; }
.trm-ch-ax { fill: var(--muted); font-size: 10px; }
.trm-ch-ax-i { fill: #94a3b8; }
.trm-ch-impr { fill: color-mix(in srgb, #3b82f6 12%, transparent); stroke: color-mix(in srgb, #3b82f6 45%, transparent); stroke-width: 1.2; }
.trm-ch-clicks { fill: none; stroke: #ff5a4e; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.trm-ch-dot { fill: #ff5a4e; }
.trm-ch-ev line { stroke: #64748b; stroke-width: 1; stroke-dasharray: 3 3; opacity: .55; }
.trm-ch-ev circle { fill: #64748b; cursor: help; }
.trm-ch-ev-onpage line, .trm-ch-ev-onpage circle { stroke: #7c3aed; fill: #7c3aed; }
.trm-ch-ev-content line, .trm-ch-ev-content circle { stroke: #d97706; fill: #d97706; }
.trm-ch-ev:hover line { opacity: 1; stroke-dasharray: none; }
.wr-legend { display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; font-size: .78rem; margin: 10px 0 4px; }
.wr-lg { display: inline-block; width: 14px; height: 4px; border-radius: 2px; margin-right: -8px; }
.wr-lg-c { background: #ff5a4e; } .wr-lg-i { background: color-mix(in srgb, #3b82f6 45%, transparent); height: 8px; }
.wr-lg-task { background: #64748b; width: 8px; height: 8px; border-radius: 50%; } .wr-lg-onpage { background: #7c3aed; width: 8px; height: 8px; border-radius: 50%; } .wr-lg-content { background: #d97706; width: 8px; height: 8px; border-radius: 50%; }
.wr-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.wr-bar-row { display: grid; grid-template-columns: minmax(140px, 260px) 1fr auto auto; gap: 10px; align-items: center; font-size: .86rem; }
@media (max-width: 720px) { .wr-bar-row { grid-template-columns: 1fr auto; } .wr-bar-track { grid-column: 1 / -1; } }
.wr-bar-path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.wr-bar-track { position: relative; height: 14px; border-radius: 7px; background: var(--surface-2); overflow: hidden; }
.wr-bar-was { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, #ff5a4e 22%, transparent); border-radius: 7px; }
.wr-bar-now { position: absolute; inset: 0 auto 0 0; background: #ff5a4e; border-radius: 7px; }
.wr-bar-num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.wr-bar-pct { color: #dc2626; font-weight: 700; }
.wr-xrays { display: flex; flex-direction: column; gap: 14px; }
.wr-xray { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; background: var(--surface); }
.wr-xray-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.wr-xray-kpis { display: inline-flex; gap: 12px; font-size: .84rem; color: var(--muted); flex-wrap: wrap; }
.wr-xray-kpis b { color: var(--ink); }
.wr-up { color: #15803d; font-weight: 700; } .wr-dn { color: #dc2626; font-weight: 700; }
.wr-xray-err { color: #b91c1c; font-size: .86rem; }
.wr-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; margin-bottom: 12px; }
.wr-chk { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); font-size: .82rem; min-width: 0; }
.wr-chk-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: #94a3b8; }
.wr-chk-pass .wr-chk-dot { background: #16a34a; } .wr-chk-warn .wr-chk-dot { background: #d97706; } .wr-chk-fail .wr-chk-dot { background: #dc2626; }
.wr-chk-fail { background: color-mix(in srgb, #dc2626 8%, var(--surface-2)); }
.wr-chk-l { font-weight: 700; min-width: 0; overflow-wrap: anywhere; } .wr-chk-d { flex-basis: 100%; padding-left: 17px; color: var(--muted); overflow-wrap: anywhere; line-height: 1.35; }
.wr-snippet { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; max-width: 640px; }
.wr-snip-k { display: block; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 4px; }
.wr-snip-t { color: #1a0dab; font-size: 1.05rem; line-height: 1.3; }
:root[data-theme="dark"] .wr-snip-t { color: #8ab4f8; }
.wr-snip-u { color: #188038; font-size: .78rem; overflow-wrap: anywhere; } :root[data-theme="dark"] .wr-snip-u { color: #81c995; }
.wr-snip-d { font-size: .86rem; color: var(--muted); margin-top: 2px; }
.wr-xgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.wr-xcol h4 { margin: 0 0 8px; font-size: .84rem; }
.wr-qt { width: 100%; border-collapse: collapse; font-size: .8rem; }
.wr-qt td { padding: 3px 4px; vertical-align: middle; border-top: 1px solid var(--line); }
.wr-qt-q { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-qt-bar { position: relative; width: 30%; min-width: 70px; height: 10px; }
.wr-qb-was, .wr-qb-now { position: absolute; left: 4px; top: 50%; height: 8px; margin-top: -4px; border-radius: 4px; }
.wr-qb-was { background: color-mix(in srgb, #3b82f6 22%, transparent); } .wr-qb-now { background: #3b82f6; height: 4px; margin-top: -2px; }
.wr-qt-n, .wr-qt-p { white-space: nowrap; font-variant-numeric: tabular-nums; }
.wr-gaps, .wr-serp { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: .82rem; }
.wr-gap-miss, .wr-gap-thin { display: inline-block; font-size: .66rem; font-weight: 800; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; margin-right: 4px; }
.wr-gap-miss { background: color-mix(in srgb, #dc2626 13%, transparent); color: #b91c1c; } .wr-gap-thin { background: color-mix(in srgb, #d97706 15%, transparent); color: #b45309; }
.wr-serp li { padding: 3px 6px; border-radius: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-serp-me { background: color-mix(in srgb, #ff5a4e 12%, transparent); font-weight: 700; }
.wr-serp-p { font-variant-numeric: tabular-nums; color: var(--muted); } .wr-serp-h { font-weight: 600; }

/* War Room: the strategist's action list. */
.wr-acts { margin-top: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); }
.wr-acts-list { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.wr-act { padding-left: 4px; }
.wr-act-high::marker { color: #ea580c; font-weight: 800; } .wr-act-medium::marker { color: #d97706; } .wr-act-low::marker { color: #16a34a; }
.wr-act-txt { font-size: .9rem; }
.wr-act-lane { display: inline-block; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 1px 7px; border-radius: 999px; background: var(--surface); color: var(--muted); margin-right: 4px; }
.wr-act-url { font-size: .8rem; overflow-wrap: anywhere; }
.wr-act-why { color: var(--muted); font-size: .82rem; margin-top: 2px; }
.wr-act-done { font-size: .78rem; margin-top: 2px; }
.wr-act-form { margin-top: 6px; padding-top: 0; border-top: none; }

/* War Room: evidence chips, money vs blog chart, fix win rates. */
.wr-cite { font: inherit; font-size: .68rem; font-weight: 700; line-height: 1.6; padding: 0 7px; margin: 0 2px; border-radius: 999px; border: 1px solid color-mix(in srgb, #3b82f6 35%, transparent);
    background: color-mix(in srgb, #3b82f6 10%, transparent); color: #1d4ed8; cursor: pointer; vertical-align: 1px; white-space: nowrap; }
.wr-cite:hover { background: color-mix(in srgb, #3b82f6 20%, transparent); }
:root[data-theme="dark"] .wr-cite { color: #93c5fd; }
.wr-cite-page { border-color: color-mix(in srgb, #7c3aed 35%, transparent); background: color-mix(in srgb, #7c3aed 10%, transparent); color: #6d28d9; max-width: 220px; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: -3px; }
:root[data-theme="dark"] .wr-cite-page { color: #c4b5fd; }
.wr-flash { outline: 3px solid #7c3aed; outline-offset: 3px; border-radius: 14px; transition: outline-color .4s; }
.wr-split-h { margin: 16px 0 4px; font-size: .86rem; }
.trm-sp-money { fill: none; stroke: #ff5a4e; stroke-width: 2.4; stroke-linejoin: round; }
.trm-sp-blog { fill: none; stroke: #94a3b8; stroke-width: 2; stroke-dasharray: 5 4; stroke-linejoin: round; }
.trm-sp-dot { fill: #ff5a4e; }
.wr-lg-money { background: #ff5a4e; } .wr-lg-blog { background: #94a3b8; }
.trm-rates { margin: 0 0 14px; display: flex; flex-direction: column; gap: 6px; }
.trm-rates h4 { margin: 0 0 4px; font-size: .86rem; }
.trm-rate { display: grid; grid-template-columns: 110px 1fr 44px; gap: 8px; align-items: center; font-size: .8rem; }
.trm-rate-t { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trm-rate-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--surface-2); }
.trm-rate-b { background: #16a34a; } .trm-rate-f { background: #94a3b8; } .trm-rate-w { background: #dc2626; }
.trm-rate-n { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }

:root { --css-sentinel: 1; }