*{margin:0;padding:0;box-sizing:border-box}
body.modal-open{overflow:hidden}
body.modal-open .overdue-dot,body.modal-open .bot-indicator::after,body.modal-open .notif-badge,body.modal-open .skeleton,body.modal-open .task-due.overdue,body.modal-open .task-due.due-soon,body.modal-open .stuck-dot,body.modal-open .unread-badge{animation-play-state:paused}
:root{
  /* ===== Darkhorse redesign token layer (2026) — dark theme default =====
     Color carries meaning; red is rationed to "act today" (overdue / at-risk).
     Design token names (--shell/--chip/--pill/--track/--t1..t3/--gold/--goldBd)
     sit alongside the legacy names (--bg, --card, --text, --accent…), which now
     point at the same palette so existing component CSS adopts the new skin. */
  --shell:#0d0f11;
  --card:#16191d;--chip:#1e2226;--pill:#1e2226;--track:#23272d;
  --t1:#e9ebee;--t2:#aab0b7;--t3:#8d949d;
  --gold:#d9aa45;--goldBd:#5a4a22;--amber:#d4942a;
  /* Legacy aliases → new palette */
  --bg:#0d0f11;--bg2:#121519;
  --card2:#1e2226;--card-hover:#1e2329;
  /* Board v2 card states (2026-09-29). */
  --board-card-hover:#1a1e23;--board-card-sel:#172235;
  --border:#262b31;--border2:#2f353c;--border3:#3a4149;
  /* --text3 lifted #737a82 → #8d949d (2026-08-09): the old value was 4.06:1
     on --card / 3.69:1 on --chip / 3.28:1 on --border chips — below WCAG-AA
     4.5:1 for the muted metadata text it colors. #8d949d clears 4.66–6.27:1
     on every dark surface (see tests/unit/css-contrast.test.mjs). */
  --text:#e9ebee;--text2:#aab0b7;--text3:#8d949d;
  /* Primary CTA + neutral info = blue; red reserved for act-today only */
  --accent:#4c8dff;--accent-dim:rgba(76,141,255,.12);--accent-sel:rgba(76,141,255,.22);
  --blue:#4c8dff;--purple:#9b6cff;--green:#2fa364;--orange:#e0954a;--red:#e0554c;
  --danger:#e0554c;--danger-dim:rgba(224,85,76,.12);
  /* Text-safe accent pair, for the Creatives leaderboard's status chips and
     CPL deltas. MEASURED, not assumed (tests/unit/css-contrast.test.mjs):
     dark --red #e0554c is 4.20:1 on --card-hover and 4.25:1 on --chip, both
     under AA, while light --green #2fa364 is 2.81-3.21:1 on every light
     surface. These clear 4.7:1 or better everywhere either is used. The raw
     tokens stay for fills, dots and bars, where contrast is not the test. */
  --green-txt:#4cc98a;--red-txt:#ef8078;
  /* AA-safe text variants for the remaining saturated hues, added 2026-09-19
     by the light-mode audit. In DARK these are byte-identical to their base
     hue (which already clears AA there: gold 6.40:1, orange 5.75:1, accent
     4.56:1 on a 14% tint over --card), so adopting the token changes nothing
     in this theme; the light block is where they earn their keep. */
  --gold-txt:#d9aa45;--orange-txt:#e0954a;--accent-txt:#4c8dff;
  /* Health BANDS (2026-09-30). The middle band ("Stable", key 'yellow') is
     GREEN and the top band ("Strong", key 'green') is PURPLE: yellow read as
     "something is wrong" for what is really the middle of the bell curve.
     Amber is kept for "needs attention" and red for "act now" — both on the
     portfolio verdict only. The -txt pair is for text; the base for fills. */
  --band-stable:var(--green);--band-strong:#9b6cff;
  --band-stable-txt:var(--green-txt);--band-strong-txt:#b597ff;
  /* Ink for text sitting on a scrim that is deliberately dark in BOTH themes
     (attachment delete, creative thumbnail pips, the creative lightbox).
     --text/--text2 flip to near-black on light and vanish there. */
  --on-scrim:#e9ebee;
  /* Avatar chip for an assignee with no registry colour. Must carry white
     initials in both themes: 4.83:1 on white ink, and still a visible chip
     on a dark card (3.65:1). --border was 1.23:1 under #fff on light. */
  --avatar-empty:#6b7280;
  /* The Creatives leaderboard measured the same pairs on its TINTED chips,
     not just the raw surfaces: 17 of its 18 failing pairs were light --accent
     and --gold as SMALL TEXT, the whole "warming" tier among them. The light
     values below are the safer of the two passes' measurements per token. */
  /* Gradient accents — used sparingly (avatars only) */
  --gradient-accent:linear-gradient(135deg,#6c5cff,#4c8dff);
  --gradient-warm:linear-gradient(135deg,#d4942a,#e0554c);
  --gradient-success:linear-gradient(135deg,#2fa364,#4c8dff);
  /* Spacing scale */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s7:32px;--s8:48px;
  /* Shadows — restrained per design (board shell 0 1px 4px; modals 0 18px 50px) */
  --shadow-sm:0 1px 4px rgba(0,0,0,.25);
  --shadow-md:0 4px 16px rgba(0,0,0,.35);
  --shadow-lg:0 18px 50px rgba(0,0,0,.5);
  --shadow-glow:0 0 0 1px rgba(76,141,255,.18);
  /* Radius — chips 7–9, cards 10–14, modals 16, pills 20 */
  --r1:6px;--r2:8px;--r3:10px;--r4:12px;--r5:14px;--r6:16px;
  /* Typography scale (added Batch 8 — was scattered hardcoded sizes) */
  --fz-xs:11px;--fz-sm:12px;--fz-base:13px;--fz-md:14px;--fz-lg:16px;--fz-xl:18px;--fz-2xl:22px;--fz-3xl:28px;--fz-4xl:32px;
  --fw-normal:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;--fw-black:800;
  --lh-tight:1.2;--lh-snug:1.3;--lh-normal:1.5;--lh-relaxed:1.6;
  /* Transition scale — subtle per design (~120–160ms ease) */
  --tr-fast:.12s;--tr-base:.16s;--tr-slow:.3s;
  /* Z-index scale (documented Batch 8 — previously ad-hoc, see comment below) */
  /*  10 = above-flow components (close buttons, sticky badges)
       50 = first-visit hints/onboarding callouts
      100 = sidebar / fixed nav
      150 = popovers (filters, search results, dropdowns)
      200 = notification dropdown / level-1 modals
      240 = creatives lightbox — above the family picker it can be opened
            from, BELOW the confirm dialog, which is the whole point of
            giving it a token: it used to hardcode 2000, so a confirm raised
            while it was up would have rendered behind it
      250 = confirm modal (above other modals)
      300 = mention/date picker / sidebar tooltips
     1000 = skip link / mobile description overlay
     2000 = legacy full-screen lightbox (.lightbox)
     9000 = celebration overlays (confetti)
    10000 = toast notifications (always topmost) */
  --z-base:10;--z-popover:150;--z-modal:200;--z-lightbox:240;--z-confirm:250;--z-toast:10000;
}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden;font-size:14px;line-height:1.5;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
::selection{background:var(--accent);color:#fff}

/* FOCUS STATES (#18) */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r2)}
input:focus,textarea:focus,select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(76,141,255,.15);outline:none;transition:border-color .2s,box-shadow .2s}

/* Password field with show/hide reveal toggle (login modal, etc.) */
.pw-field{position:relative}
.pw-field input{width:100%;padding-right:42px}
.pw-reveal{position:absolute;top:1px;right:1px;bottom:1px;width:38px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--text3);cursor:pointer;border-radius:0 var(--r2) var(--r2) 0;transition:color var(--tr-base)}
.pw-reveal:hover{color:var(--text2)}
.pw-reveal .pw-eye-off{display:none}
.pw-reveal.is-showing .pw-eye{display:none}
.pw-reveal.is-showing .pw-eye-off{display:block}

/* LAYOUT */
.sidebar-left{width:56px;background:var(--card);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;padding:var(--s3) 0;gap:var(--s1);position:fixed;top:0;left:0;height:100vh;z-index:100;box-shadow:var(--shadow-md);transition:width .25s ease}

/* SVG icon system (replaces Material Icons font — offline-capable, no font FOUT) */
.mi{display:inline-block;width:24px;height:24px;fill:currentColor;vertical-align:middle;flex-shrink:0;line-height:1;overflow:visible}

/* Sidebar icons with tooltip (#6,#19) */
.sidebar-left .nav-icon{width:40px;height:40px;border-radius:var(--r3);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:20px;transition:all .25s cubic-bezier(.4,0,.2,1);color:var(--text3);position:relative;background:none;border:none;padding:0;font-family:inherit}
.sidebar-left .nav-icon .mi{width:20px;height:20px;transition:transform .2s}
.sidebar-left .nav-icon:hover{background:rgba(255,255,255,.06);color:var(--text);transform:scale(1.08)}
.sidebar-left .nav-icon:hover .mi{transform:scale(1.05)}
.sidebar-left .nav-icon.active{background:var(--accent-dim);color:var(--accent);box-shadow:none;position:relative}
.sidebar-left .nav-icon.active::before{content:'';position:absolute;left:-1px;top:6px;bottom:6px;width:3px;border-radius:0 4px 4px 0;background:var(--gradient-accent)}
/* Overdue indicator dot on the sidebar Overview icon (kanban board) */
.sidebar-left .nav-icon[data-tab="overview"] .overdue-dot{position:absolute;top:4px;right:4px;width:8px;height:8px;border-radius:50%;background:var(--red);border:2px solid var(--card);z-index:1;animation:pulse 2s infinite}
.sidebar-left .nav-icon[data-tab="finance"] .fin-stale-dot{position:absolute;top:4px;right:4px;width:8px;height:8px;border-radius:50%;background:var(--red);border:2px solid var(--card);z-index:1;animation:pulse 2s infinite}
.sidebar-left .nav-icon::after{content:attr(data-label);position:absolute;left:calc(100% + 14px);background:var(--card2);color:var(--text);padding:4px 10px;border-radius:var(--r2);font-size:12px;font-weight:500;white-space:nowrap;pointer-events:none;opacity:0;transform:translateX(-4px);transition:all .15s;box-shadow:var(--shadow-md);z-index:300;letter-spacing:0}
/* Show tooltip on hover OR keyboard focus so sighted keyboard-only users
   get a visible label without needing a screen reader. */
.sidebar-left .nav-icon:hover::after,.sidebar-left .nav-icon:focus-visible::after{opacity:1;transform:translateX(0)}
.sidebar-left .spacer{flex:1}
/* Sidebar divider & user avatar (#8) */
.sidebar-divider{width:28px;height:1px;background:var(--border);margin:4px auto}
.sidebar-build{font-size:9px;font-weight:600;letter-spacing:.5px;color:var(--text3);text-align:center;padding:2px 0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;opacity:.55;cursor:default}
.sidebar-build:empty{display:none}
.sidebar-left.expanded .sidebar-build{font-size:10px;text-align:left;padding-left:14px}
.sidebar-user{display:flex;align-items:center;justify-content:center;padding:4px 0}
.sidebar-user-avatar{width:30px;height:30px;border-radius:50%;background:var(--gradient-accent);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;cursor:default;box-shadow:var(--shadow-sm)}
.sidebar-logout{opacity:.5;transition:opacity .2s}
.sidebar-left .sidebar-logout:hover{opacity:1;color:var(--red)}
.sidebar-left .bot-indicator{width:36px;height:36px;border-radius:50%;background:var(--gradient-accent);display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;position:relative;box-shadow:var(--shadow-sm)}
.sidebar-left .bot-indicator::after{content:'';position:absolute;bottom:1px;right:1px;width:9px;height:9px;background:var(--green);border-radius:50%;border:2px solid var(--card);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* Sidebar expand/collapse transition (width transition added to main .sidebar-left rule) */
.sidebar-left .sidebar-toggle-icon{transition:transform .25s ease}

/* Expanded sidebar */
.sidebar-left.expanded{width:180px;align-items:stretch}
.sidebar-left.expanded .nav-icon{width:auto;justify-content:flex-start;padding:0 14px;gap:10px;height:40px}
.sidebar-left.expanded .nav-icon::after{position:static;opacity:1;transform:none;background:none;box-shadow:none;padding:0;font-size:13px;font-weight:500;white-space:nowrap;color:inherit;transition:none;display:block;pointer-events:auto}
.sidebar-left.expanded .nav-icon:hover::after{transform:none}
.sidebar-left.expanded .sidebar-toggle-icon{transform:rotate(180deg)}
.sidebar-left.expanded .sidebar-toggle[data-label]::after{content:'Collapse'}

.main-area{flex:1;padding:18px 22px 30px;max-width:100%}

/* ===== TOP NAV (redesign shell) ===== */
.topnav{position:sticky;top:0;z-index:120;display:flex;align-items:center;gap:14px;padding:11px 22px;background:var(--shell);border-bottom:1px solid var(--border)}
.topnav-left{display:flex;align-items:center;gap:14px;flex-shrink:0}
.topnav-logo{display:flex;align-items:center;justify-content:center;width:30px;height:30px;flex-shrink:0}
.topnav-logo-img{width:30px;height:30px;object-fit:contain}
/* Logo swaps with theme: white mark on dark, black mark on light. Default = dark. */
.topnav-logo-on-dark{display:block}
.topnav-logo-on-light{display:none}
[data-theme="light"] .topnav-logo-on-dark{display:none}
[data-theme="light"] .topnav-logo-on-light{display:block}
@media (prefers-color-scheme: light){
  html:not([data-theme]) .topnav-logo-on-dark{display:none}
  html:not([data-theme]) .topnav-logo-on-light{display:block}
}
.topnav-tabs{display:flex;align-items:center;gap:2px}
.nav-tab{font-size:12.5px;font-weight:600;color:var(--t3);background:transparent;border:1px solid transparent;padding:6px 12px;border-radius:8px;cursor:pointer;font-family:inherit;white-space:nowrap;transition:background var(--tr-fast),color var(--tr-fast),border-color var(--tr-fast)}
.nav-tab:hover{color:var(--t1)}
.nav-tab.active{color:var(--t1);background:var(--card);border-color:var(--border)}
.nav-tab .fin-stale-dot{position:static;display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--red);margin-left:5px;vertical-align:middle;animation:pulse 2s infinite}
.topnav-search{flex:1 1 auto;max-width:460px;min-width:120px;margin-bottom:0}
.topnav .search-container{margin-bottom:0}
.topnav-right{display:flex;align-items:center;gap:9px;flex-shrink:0;margin-left:auto}
/* Notification bell — rounded square per design */
.topnav .notification-bell{width:34px;height:34px;border-radius:9px;border:1px solid var(--border);background:var(--card);color:var(--t2);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;padding:0;transition:border-color var(--tr-fast),color var(--tr-fast),background var(--tr-fast)}
.topnav .notification-bell:hover{color:var(--t1);border-color:var(--border2);background:var(--card-hover)}
.topnav .notif-badge{top:-5px;right:-5px;border:2px solid var(--shell);background:var(--red);font-size:9px}
/* Light/dark segmented toggle */
.theme-seg{display:flex;align-items:center;gap:0;background:var(--card);border:1px solid var(--border);border-radius:9px;padding:3px}
.theme-seg-btn{width:28px;height:26px;border:none;background:transparent;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--t3);cursor:pointer;padding:0;transition:background var(--tr-fast),color var(--tr-fast)}
.theme-seg-btn:hover{color:var(--t1)}
.theme-seg-btn.active{background:var(--chip);color:var(--t1)}
/* Synced pill */
.topnav .sync-indicator{font-size:11.5px;color:var(--green);border:1px solid var(--border);border-radius:9px;padding:7px 11px;display:flex;align-items:center;gap:6px;background:transparent}
.topnav .sync-indicator:hover{background:var(--card)}
.topnav .sync-indicator .dot{width:8px;height:8px}
/* Avatar + overflow menu */
.nav-avatar-wrap{position:relative}
.nav-avatar{width:32px;height:32px;border-radius:50%;border:none;padding:0;cursor:pointer;background:var(--gradient-accent);display:flex;align-items:center;justify-content:center;transition:filter var(--tr-fast)}
.nav-avatar:hover{filter:brightness(1.08)}
.nav-avatar .sidebar-user-avatar{width:100%;height:100%;background:transparent;box-shadow:none;font-size:12px;font-weight:700;color:#fff}
.nav-menu{position:absolute;top:calc(100% + 10px);right:0;width:234px;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);padding:6px;display:none;flex-direction:column;gap:1px;z-index:200}
.nav-menu.open{display:flex;animation:fadeIn .12s ease}
.nav-menu-label{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);padding:8px 10px 4px}
.nav-menu-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:transparent;border:none;border-radius:8px;padding:8px 10px;font-size:12.5px;font-weight:500;color:var(--t2);cursor:pointer;font-family:inherit;transition:background var(--tr-fast),color var(--tr-fast)}
.nav-menu-item .mi{width:16px;height:16px;flex-shrink:0;color:var(--t3)}
.nav-menu-item:hover{background:var(--chip);color:var(--t1)}
.nav-menu-item:hover .mi{color:var(--t2)}
.nav-menu-item.active{background:var(--accent-dim);color:var(--accent)}
.nav-menu-item.active .mi{color:var(--accent)}
.nav-menu-sep{height:1px;background:var(--border);margin:5px 4px}
.nav-menu-build{font-size:10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--t3);opacity:.7;padding:3px 10px}
.nav-menu-build:empty{display:none}
.nav-menu-logout{color:var(--red)}
.nav-menu-logout .mi{color:var(--red)}
.nav-menu-logout:hover{background:rgba(224,85,76,.10);color:var(--red)}
.nav-menu-backdrop{position:fixed;inset:0;z-index:119;background:transparent}

/* ===== BOARD TOOLBAR (overview) ===== */
.board-toolbar{display:flex;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap}
body:not([data-tab="overview"]) .board-toolbar{display:none}
.board-title{font-size:16px;font-weight:700;color:var(--t1);margin-right:2px}
.board-toolbar-spacer{flex:1}

/* Keep the legacy red alert banner off the overview board to keep it
   uncluttered — overdue work still surfaces on the task cards themselves. */
body[data-tab="overview"] #alertBanner{display:none!important}

@media(max-width:760px){
  .topnav{flex-wrap:wrap;gap:10px;padding:10px 14px}
  .topnav-search{order:3;flex-basis:100%;max-width:none}
  /* The tab strip has no wrap and no overflow of its own, and .topnav-left is
     pinned flex-shrink:0, so on a phone the 7 nav buttons pushed the BODY wider
     than the viewport (393px viewport vs 467-492px scrollWidth) — the whole app
     scrolled sideways on every tab. Let the strip scroll inside ITSELF instead:
     the body stays at the viewport width and the tabs stay reachable by swipe.
     NB: measure this against document.documentElement.clientWidth, not
     window.innerWidth — in mobile-emulated Chromium innerWidth inflates to match
     the overflowing content and hides the bug. */
  .topnav-left{flex-shrink:1;min-width:0;max-width:100%}
  .topnav-tabs{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;max-width:100%}
  .topnav-tabs::-webkit-scrollbar{display:none}
  /* Clients-tab header action row: an unwrapped flex row of controls (sort
     select, + Add Client — then also a density toggle and Client Deliverables) measured 484px wide
     against a 393px viewport, so the whole page scrolled sideways on that tab.
     Let it wrap. */
  .clients-header-actions{flex-wrap:wrap;margin-left:0!important;max-width:100%}
  .clients-header-actions > *{min-width:0}
}

/* HEADER / greeting removed — global controls now live in .topbar */
.header-right{display:flex;align-items:center;gap:var(--s3)}
.sync-indicator{font-size:12px;color:var(--text2);display:flex;align-items:center;gap:var(--s1);padding:4px 8px;border-radius:var(--r2);border:1px solid transparent;cursor:pointer;transition:background .15s,border-color .15s}
.sync-indicator:hover{background:var(--card2)}
.sync-indicator.syncing{opacity:.7;cursor:progress}
.sync-indicator.syncing .dot{animation:pulse 1s infinite}
/* Dot doubles as a glyph holder so the state is conveyed shape-and-text,
   not colour-only — important for color-blind users and printed exports. */
.sync-indicator .dot{width:10px;height:10px;border-radius:50%;background:var(--green);position:relative;display:inline-flex;align-items:center;justify-content:center;font-size:9px;line-height:1;color:#fff;font-weight:700}
.sync-indicator .dot::before{content:'✓'}
.sync-indicator.offline .dot{background:var(--orange)}
.sync-indicator.offline .dot::before{content:'!'}
.sync-indicator.queued{color:var(--orange);border-color:rgba(224,149,74,.25);background:rgba(224,149,74,.08);cursor:pointer}
.sync-indicator.queued .dot{background:var(--orange);animation:pulse 1.5s infinite}
.sync-indicator.queued .dot::before{content:'⏳';font-size:8px}
.sync-indicator.error{color:var(--red);border-color:rgba(224,85,76,.3);background:rgba(224,85,76,.08);cursor:pointer}
.sync-indicator.error .dot{background:var(--red)}
.sync-indicator.error .dot::before{content:'✗'}
.sync-indicator.syncing .dot{background:var(--blue);animation:pulse 1s infinite}
.sync-indicator.syncing .dot::before{content:'↻';font-size:9px}

/* Sync queue popover — opens when the badge is clicked. Lists queued
   payloads, last-clean-sync timestamp, and a retry button. */
.sync-queue-popover{position:fixed;background:var(--card2);border:1px solid var(--border2);border-radius:var(--r3);box-shadow:var(--shadow-lg);z-index:300;width:300px;padding:0;animation:fadeIn .12s ease}
.sync-queue-popover .sqp-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--border);font-size:13px}
.sync-queue-popover .sqp-close{background:none;border:none;color:var(--text3);font-size:18px;cursor:pointer;line-height:1;padding:0 4px}
.sync-queue-popover .sqp-close:hover{color:var(--text)}
.sync-queue-popover .sqp-meta{padding:6px 14px;font-size:11px;color:var(--text3);border-bottom:1px solid var(--border)}
.sync-queue-popover .sqp-list{list-style:none;margin:0;padding:6px 14px;max-height:240px;overflow-y:auto;font-size:12px}
.sync-queue-popover .sqp-list li{display:flex;align-items:baseline;gap:6px;padding:4px 0;border-bottom:1px solid var(--border)}
.sync-queue-popover .sqp-list li:last-child{border-bottom:none}
.sync-queue-popover .sqp-list .sqp-empty{color:var(--text3);font-style:italic;justify-content:center}
.sync-queue-popover .sqp-table{font-weight:600;color:var(--text)}
.sync-queue-popover .sqp-op{color:var(--blue);text-transform:uppercase;font-size:10px;font-weight:700;letter-spacing:.5px}
.sync-queue-popover .sqp-time{margin-left:auto;color:var(--text3)}
.sync-queue-popover .sqp-footer{padding:8px 14px;border-top:1px solid var(--border);text-align:right}
.auth-area{font-size:12px;display:flex;align-items:center;gap:var(--s2)}
/* NOTIFICATION BELL (#5) */
.notification-bell-wrap{position:relative}
.notification-bell{background:transparent;border:1px solid var(--border);color:var(--text3);border-radius:var(--r2);padding:6px 8px;cursor:pointer;display:flex;align-items:center;transition:all .25s cubic-bezier(.4,0,.2,1);position:relative;font-family:inherit}
.notification-bell:hover{border-color:var(--border2);color:var(--text);background:rgba(255,255,255,.04)}
.notif-badge{position:absolute;top:-4px;right:-4px;background:var(--accent);color:#fff;font-size:12px;font-weight:700;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.notif-badge.has-unread{animation:pulse-unread 2s infinite}
.notif-dropdown{position:absolute;top:calc(100% + 8px);right:0;width:320px;max-width:calc(100vw - 24px);max-height:400px;overflow-y:auto;background:var(--card2);border:1px solid var(--border2);border-radius:var(--r3);box-shadow:var(--shadow-lg);z-index:200;display:none}
.notif-dropdown.active{display:block}
.notif-dropdown-header{padding:12px 16px;border-bottom:1px solid var(--border);font-size:13px;font-weight:600;display:flex;justify-content:space-between;align-items:center}
.notif-item{position:relative;padding:10px 34px 10px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .1s;font-size:12px}
.notif-item:hover{background:var(--card-hover)}
.notif-dismiss{position:absolute;top:8px;right:8px;width:20px;height:20px;border:none;background:none;color:var(--t3);font-size:16px;line-height:1;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.5;transition:opacity .12s,background .12s,color .12s}
.notif-item:hover .notif-dismiss{opacity:.85}
.notif-dismiss:hover{opacity:1;background:var(--card2);color:var(--t1)}
.notif-item.unread{background:var(--accent-dim);border-left:3px solid var(--accent)}
.notif-item .notif-text{color:var(--text2);font-size:12px}
.notif-item .notif-detail{font-size:12px;color:var(--text3);margin-top:2px}
.notif-item .notif-time{font-size:12px;color:var(--text3);margin-top:4px}
.notif-empty{padding:18px 16px;color:var(--text3);font-size:13px;text-align:center}
.notif-empty ul{list-style:disc}
.notif-empty li{font-size:12px;line-height:1.7}
.notif-section-label{padding:8px 16px 4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text3);background:var(--card)}
.notif-item:not(.unread){opacity:.7}
.notif-item:not(.unread):hover{opacity:1}

.auth-area a{color:var(--text2);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.auth-area a:hover{color:var(--text)}

/* ALERT */
.alert-banner{background:rgba(224,85,76,.06);border:1px solid rgba(224,85,76,.15);border-left:3px solid var(--red);border-radius:var(--r3);padding:var(--s3) var(--s4);font-size:13px;color:var(--red);margin-bottom:var(--s4);display:flex;align-items:center;gap:var(--s2);box-shadow:var(--shadow-sm);transition:all .2s}
.alert-banner:hover{background:rgba(224,85,76,.1);border-color:rgba(224,85,76,.25)}
.alert-banner.hidden{display:none}
.alert-banner .alert-count{background:var(--red);color:#fff;font-size:12px;font-weight:700;padding:2px 8px;border-radius:10px;flex-shrink:0}
.alert-dismiss{background:none;border:none;color:var(--red);font-size:18px;cursor:pointer;margin-left:auto;padding:0 4px;opacity:.6;transition:opacity .2s;flex-shrink:0}
.alert-dismiss:hover{opacity:1}

/* TABS */
.tab-content{display:none;animation:fadeIn .2s ease}
.tab-content.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.tab-header-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s5)}
.tab-header-row h2{font-size:19px;font-weight:700;letter-spacing:-.3px;line-height:1.2}
/* Portfolio Health Score pill — compact, color-banded; sits beside the title.
   margin-right:auto keeps it snug to the title and pushes the controls right. */
.portfolio-health-pill{display:inline-flex;align-items:center;gap:6px;margin-left:12px;margin-right:auto;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:600;line-height:1;border:1px solid var(--border);background:var(--chip);white-space:nowrap}
.portfolio-health-pill .php-dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.portfolio-health-pill .php-label{color:var(--t2)}
.portfolio-health-pill .php-val{font-variant-numeric:tabular-nums;font-weight:700}
.portfolio-health-pill.ph-green{border-color:rgba(47,163,100,.4);background:rgba(47,163,100,.10)}
.portfolio-health-pill.ph-purple .php-dot{background:var(--band-strong)}
.portfolio-health-pill.ph-purple .php-val{color:var(--band-strong-txt)}
.portfolio-health-pill.ph-green .php-dot{background:var(--band-stable)}
.portfolio-health-pill.ph-green .php-val{color:var(--band-stable-txt)}
.portfolio-health-pill.ph-amber{border-color:rgba(212,148,42,.4);background:rgba(212,148,42,.12)}
.portfolio-health-pill.ph-purple{border-color:rgba(155,108,255,.4);background:rgba(155,108,255,.10)}
.portfolio-health-pill.ph-amber .php-dot{background:var(--amber)}
.portfolio-health-pill.ph-amber .php-val{color:var(--gold-txt)}
.portfolio-health-pill.ph-red{border-color:rgba(224,85,76,.4);background:rgba(224,85,76,.10)}
.portfolio-health-pill.ph-red .php-dot{background:var(--red)}
.portfolio-health-pill.ph-red .php-val{color:var(--red)}
@media(max-width:560px){.portfolio-health-pill .php-label{display:none}}
/* Data-load failure banner — shown when a core read fails and the board falls back to cached/seed data */
.data-load-error-banner{position:fixed;top:0;left:0;right:0;z-index:9998;display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--red);color:#fff;font-size:13px;box-shadow:0 2px 14px rgba(0,0,0,.35)}
.data-load-error-banner .mi{width:18px;height:18px;flex-shrink:0}
.data-load-error-banner span{flex:1;line-height:1.4}
.data-load-error-banner .dleb-reload{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.45);color:#fff;font-family:inherit;font-weight:600;font-size:12px;padding:5px 12px;border-radius:7px;cursor:pointer;flex-shrink:0}
.data-load-error-banner .dleb-reload:hover{background:rgba(255,255,255,.3)}
.data-load-error-banner .dleb-x{background:none;border:none;color:#fff;font-size:18px;line-height:1;cursor:pointer;opacity:.85;flex-shrink:0;padding:0 4px}
.data-load-error-banner .dleb-x:hover{opacity:1}
.tasks-toolbar{display:flex;align-items:center;gap:var(--s2)}

/* TOAST NOTIFICATIONS (#22) */
.toast-container{position:fixed;bottom:20px;right:20px;z-index:10000;display:flex;flex-direction:column;gap:var(--s2)}
.toast{background:var(--card2);border:1px solid var(--border2);border-radius:var(--r3);padding:var(--s3) var(--s4);font-size:13px;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:var(--s2);animation:toastIn .3s cubic-bezier(.4,0,.2,1);max-width:360px}
.toast.success{border-left:3px solid var(--green)}
.toast.error{border-left:3px solid var(--red)}
.toast.info{border-left:3px solid var(--blue)}
/* Five call sites have passed 'warning' since before this rule existed (the
   creatives sync's degraded-run toast among them); with no class and no entry
   in the icon map they all rendered as a plain info toast, i.e. the one tone
   that says "something went partly wrong" was the one that looked like
   everything else. */
.toast.warning{border-left:3px solid var(--amber)}
.toast-icon{font-size:16px;flex-shrink:0}
.toast-msg{flex:1}
.toast-close{background:none;border:none;color:var(--text3);cursor:pointer;font-size:14px;padding:2px}
@keyframes toastIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes toastOut{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(20px)}}
.toast-exiting{animation:toastOut .3s ease forwards}

/* General utility classes */
.hidden{display:none}

/* SKELETON LOADING (#3) */
.skeleton{background:linear-gradient(90deg,var(--border) 25%,var(--border2) 50%,var(--border) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--r2)}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skeleton-line{height:14px;margin-bottom:var(--s2);border-radius:var(--r1)}
.skeleton-card{height:120px;border-radius:var(--r4);margin-bottom:var(--s3)}
.skeleton-widget{height:90px;border-radius:var(--r4)}

/* WIDGETS (#14 shadows, #15 hover) */
.widgets{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--s3);margin-bottom:var(--s5);max-width:100%}
.widget{background:var(--card);border:1px solid var(--border);border-radius:var(--r4);padding:var(--s4);box-shadow:var(--shadow-sm);transition:all .3s cubic-bezier(.4,0,.2,1)}
.widget:hover{box-shadow:var(--shadow-md);border-color:var(--border2);transform:translateY(-2px)}
.widget .w-label{font-size:12px;color:var(--text2);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:var(--s3);font-weight:600}
.widget .w-value{font-size:28px;font-weight:800;line-height:1;letter-spacing:-.5px}
.widget .w-sub{font-size:12px;color:var(--text2);margin-top:var(--s1)}
.widget .w-row{display:flex;align-items:center;gap:var(--s3)}
.widget-today{border-left:3px solid var(--accent)}
.widget-done{border-left:3px solid var(--green)}

/* AGENCY METRICS */
.agency-metrics .widget{border-left:3px solid var(--accent)}

/* REMY DEV BACKLOG (toolbar icon + popover — docs/REMY-DEV-BACKLOG.md).
   Closed, this is one icon button in the board toolbar: zero board space. */
.remy-dev-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;background:transparent;color:var(--t2);border:1px solid var(--border);border-radius:7px;cursor:pointer;padding:0}
.remy-dev-btn:hover{color:var(--t1);border-color:var(--border2)}
.remy-dev-btn[aria-expanded="true"]{background:var(--accent-dim);border-color:var(--accent);color:var(--t1)}
.remy-dev-badge{position:absolute;top:-6px;right:-6px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--red);color:#fff;font-size:10px;font-weight:700;line-height:16px;text-align:center;box-sizing:border-box}
.remy-dev-badge[hidden]{display:none}
.remy-dev-pop{right:0;width:340px;max-width:min(340px,90vw);padding:var(--s3)}
.remy-dev-pop-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s2)}
.remy-dev-title{font-size:14px;font-weight:700;color:var(--text);margin:0}
.remy-dev-pills{display:inline-flex;gap:var(--s2);flex-wrap:wrap}
.remy-dev-pill{font-size:11px;font-weight:600;color:var(--text2);background:var(--chip);border:1px solid var(--border);border-radius:999px;padding:2px 8px}
.remy-dev-pill strong{color:var(--text)}
.remy-dev-note{font-size:12px;color:var(--text2);margin:var(--s2) 0 0}
.remy-dev-list{margin-top:var(--s3);display:flex;flex-direction:column;gap:var(--s2)}
.remy-dev-empty{font-size:12px;color:var(--text3)}
.remy-dev-item{display:flex;align-items:center;gap:var(--s2);font-size:13px;color:var(--text)}
.remy-dev-item .prio-dot--critical{color:var(--red)}
.remy-dev-item-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.remy-dev-approve{flex:none}

/* TOP BAR — search + tab-specific filters + global controls in one row */
.topbar{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s3);flex-wrap:wrap}
.topbar-search{flex:1 1 280px;min-width:220px;margin-bottom:0}
.topbar .search-container{margin-bottom:0}
.topbar-tab-tools{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;position:relative}
.topbar-controls{display:flex;align-items:center;gap:var(--s2);flex-shrink:0}

/* FILTERS POPOVER */

/* SEARCH BAR (#21) */
.search-container{position:relative;margin-bottom:var(--s5)}
.search-input{width:100%;background:var(--card);border:1px solid var(--border);color:var(--text);padding:10px 14px 10px 36px;border-radius:var(--r3);font-size:13px;font-family:inherit;transition:all .25s cubic-bezier(.4,0,.2,1)}
.search-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(76,141,255,.1)}
.search-input::placeholder{color:var(--text3)}
.search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text3);pointer-events:none;width:18px;height:18px}
.search-shortcut{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--text3);background:var(--border);padding:2px 6px;border-radius:var(--r1);pointer-events:auto;transition:all .15s}
.search-shortcut:hover{color:var(--text2);background:var(--border2)}
.search-results{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--card2);border:1px solid var(--border2);border-radius:var(--r3);max-height:min(50vh,420px);overflow-y:auto;z-index:150;box-shadow:var(--shadow-lg);display:none;overscroll-behavior:contain}
.search-results.active{display:block}
.search-result{padding:var(--s3) var(--s4);cursor:pointer;display:flex;align-items:center;gap:var(--s3);font-size:13px;border-bottom:1px solid var(--border);transition:background .1s}
.search-result:hover,.search-result.selected{background:var(--card-hover)}
.search-result .sr-type{font-size:12px;color:var(--text3);background:var(--border);padding:1px 6px;border-radius:var(--r1);text-transform:uppercase;letter-spacing:.5px;flex-shrink:0}
.search-result .sr-title{flex:1}
.search-result .sr-meta{font-size:12px;color:var(--text2)}

/* Score buttons — client modal outcome scoring */
.ob-btn{
  min-width:32px;height:32px;padding:0 8px;
  background:var(--card);border:1.5px solid var(--border);
  color:var(--text2);font-size:13px;font-weight:600;font-family:inherit;
  border-radius:8px;cursor:pointer;
  transition:all .18s cubic-bezier(.4,0,.2,1);
  display:inline-flex;align-items:center;justify-content:center;
}
.ob-btn:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(0,0,0,.2);color:#fff}
.ob-btn:active{transform:translateY(0);box-shadow:none}
.ob-btn[data-score="1"]:hover,.ob-btn[data-score="2"]:hover,.ob-btn[data-score="3"]:hover{background:var(--red);border-color:var(--red)}
.ob-btn[data-score="4"]:hover,.ob-btn[data-score="5"]:hover{background:var(--orange);border-color:var(--orange)}
.ob-btn[data-score="6"]:hover,.ob-btn[data-score="7"]:hover{background:#d9aa45;border-color:#d9aa45}
.ob-btn[data-score="8"]:hover,.ob-btn[data-score="9"]:hover,.ob-btn[data-score="10"]:hover{background:var(--green);border-color:var(--green)}
.ob-btn-current{color:#fff}
.ob-btn-current[data-score="1"],.ob-btn-current[data-score="2"],.ob-btn-current[data-score="3"]{background:var(--red);border-color:var(--red);box-shadow:0 0 0 3px rgba(224,85,76,.18)}
.ob-btn-current[data-score="4"],.ob-btn-current[data-score="5"]{background:var(--orange);border-color:var(--orange);box-shadow:0 0 0 3px rgba(212,148,42,.18)}
.ob-btn-current[data-score="6"],.ob-btn-current[data-score="7"]{background:#d9aa45;border-color:#d9aa45;box-shadow:0 0 0 3px rgba(217,170,69,.18)}
.ob-btn-current[data-score="8"],.ob-btn-current[data-score="9"],.ob-btn-current[data-score="10"]{background:var(--green);border-color:var(--green);box-shadow:0 0 0 3px rgba(47,163,100,.18)}

/* Per-client outcome scoring section in the client modal */
.client-outcome-section{
  position:relative;
  background:linear-gradient(135deg,var(--card) 0%,var(--bg2) 100%);
  border:1px solid var(--border);border-radius:var(--r4);
  padding:16px 18px;margin:0 0 var(--s4);
  box-shadow:var(--shadow-sm);
}
.client-outcome-section::before{content:'';position:absolute;left:0;top:14px;bottom:14px;width:3px;background:var(--gradient-accent);border-radius:0 3px 3px 0}
.client-outcome-section.client-outcome-na::before{background:var(--text3);opacity:.4}
.client-outcome-section.client-outcome-na{opacity:.75}
.client-outcome-section .cos-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text2);display:flex;align-items:center;gap:6px;margin-bottom:8px}
.client-outcome-section .cos-help{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:var(--border2);color:var(--text2);font-size:10px;font-weight:700;cursor:help;text-transform:none;letter-spacing:0}
.client-outcome-section .cos-help:hover{background:var(--blue);color:#fff}
.client-outcome-section .cos-meta{font-size:13px;color:var(--text);margin-bottom:12px;font-weight:500}
.client-outcome-section .cos-info{font-size:11px;color:var(--text3);display:flex;align-items:center;gap:6px}
.client-outcome-section .cos-info::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--text3)}
.client-outcome-section .cos-na{font-size:13px;color:var(--text3);font-style:italic}

/* KANBAN */
.kanban-progress{display:flex;align-items:center;gap:var(--s2);font-size:12px;color:var(--text2);margin-bottom:var(--s3)}
.kanban-progress-bar{flex:1;max-width:200px;height:4px;background:var(--border);border-radius:2px;overflow:hidden}
.kanban-progress-fill{height:100%;border-radius:2px;background:var(--gradient-success);transition:width .5s cubic-bezier(.4,0,.2,1)}
.kanban-progress-text{font-size:12px;color:var(--text3);white-space:nowrap}
.kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-bottom:var(--s4);flex:1;min-height:0;transition:grid-template-columns .25s ease}
/* Hide the bare "Review" text node inside .col-title without dropping the icon. */
/* The Review search icon is only shown when the column is collapsed */
.kanban-col{background:transparent;border-radius:var(--r4);padding:0;min-height:200px;display:flex;flex-direction:column;border:none;box-shadow:none;transition:background .2s;overflow:hidden}
/* Collapsed Done column */
.kanban-col.col-collapsed{max-width:100%;min-height:auto}
.kanban-col.col-collapsed .col-cards{display:none}
.col-toggle{background:none;border:none;color:var(--text3);font-size:12px;cursor:pointer;padding:2px 6px;border-radius:var(--r1);transition:all .15s;margin-left:auto}
.col-toggle:hover{color:var(--text);background:var(--border)}
.kanban-col.drag-over{background:rgba(76,141,255,.05);outline:1.5px dashed var(--blue);outline-offset:-2px;border-radius:var(--r4)}
.col-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s3);padding-bottom:var(--s2);border-bottom:2px solid var(--border);flex-shrink:0}
.kanban-col[data-status="todo"] .col-header{border-bottom-color:var(--blue)}
.kanban-col[data-status="inprogress"] .col-header{border-bottom-color:var(--orange)}
.kanban-col[data-status="review"] .col-header{border-bottom-color:var(--purple)}
.kanban-col[data-status="done"] .col-header{border-bottom-color:var(--green)}
.col-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text2);display:flex;align-items:center;gap:6px}
.col-title-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.kanban-col[data-status="todo"] .col-title-dot{background:var(--blue)}
.kanban-col[data-status="inprogress"] .col-title-dot{background:var(--orange)}
.kanban-col[data-status="review"] .col-title-dot{background:var(--purple)}
.kanban-col[data-status="done"] .col-title-dot{background:var(--green)}
/* Muted count pills per design (state is carried by the dot + underline, not
   the pill). --t2 (not --t3) keeps the count grey/muted vs the title while
   clearing WCAG AA — --t3 on --pill was ~3.6:1, below the 4.5:1 floor. */
.col-count{font-size:11px;color:var(--t2);background:var(--pill);font-weight:600;padding:1px 8px;border-radius:20px;min-width:22px;text-align:center}
.col-cards{overflow-y:auto;flex:1;scrollbar-width:thin;scrollbar-color:var(--border2) transparent;padding-right:2px}
.col-cards::-webkit-scrollbar{width:4px}
.col-cards::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}

/* KANBAN EMPTY STATE */
.kanban-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--s7) var(--s3);text-align:center;min-height:120px;border:1px dashed var(--border);border-radius:var(--r3);margin-bottom:var(--s2)}
.kanban-empty-state .mi{opacity:.25}

/* TASK CARD (#10 drag, #14 shadow, #15 priority border) */
.task-card{background:var(--card);border:1px solid var(--border);border-left:3px solid var(--border2);border-radius:var(--r3);padding:7px 11px;margin-bottom:6px;cursor:pointer;transition:transform var(--tr-fast),border-color var(--tr-fast),box-shadow var(--tr-fast);box-shadow:none;position:relative;display:flex;flex-direction:column;gap:5px}
.task-card.hidden{display:none}
.task-card:hover{border-color:var(--border2);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.task-card:active{transform:translateY(0);box-shadow:none}
.task-card.dragging{opacity:.6;transform:rotate(1.5deg) scale(1.03);box-shadow:var(--shadow-lg);z-index:10}
/* To Do urgency dividers (Overdue / Due today / Upcoming) */
.col-divider{display:flex;align-items:center;gap:6px;padding:3px 2px 7px}
.col-divider + .task-card{margin-top:0}
.col-cards .col-divider ~ .col-divider,.col-cards .task-card + .col-divider{margin-top:6px}
.col-divider-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;background:var(--t3)}
.col-divider-label{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--t3)}
.col-divider-count{font-size:9px;font-weight:600;color:var(--t2);background:var(--pill);border-radius:20px;padding:0 6px;min-width:18px;text-align:center}
.col-divider::after{content:'';flex:1;height:1px;background:var(--border)}
.col-divider-overdue .col-divider-dot{background:var(--red)}
.col-divider-overdue .col-divider-label{color:var(--red)}
.col-divider-duetoday .col-divider-dot{background:var(--amber)}
.col-divider-duetoday .col-divider-label{color:var(--amber)}
/* Row 1: priority pill + client (plain grey) + spacer + due */
.task-card-tags{display:flex;align-items:center;gap:5px;margin:0;min-width:0}
.task-tags-spacer{flex:1}
.task-client{font-size:11px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* Row 2: completion circle + title */
.task-row-title{display:flex;align-items:flex-start;gap:7px}
.task-title{font-size:13px;font-weight:500;color:var(--t1);margin:0;letter-spacing:-.01em;line-height:1.25;word-wrap:break-word;overflow-wrap:break-word;min-width:0}
.task-desc{font-size:11px;color:var(--t3);margin:-3px 0 0 23px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35;word-wrap:break-word;overflow-wrap:break-word}
/* Row 3: avatars + badges + spacer + stuck */
.task-meta{display:flex;align-items:center;gap:7px;font-size:11px;margin:0}
.task-meta-spacer{flex:1}
.task-assignee{width:19px;height:19px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#fff;flex-shrink:0;overflow:hidden}
.task-assignee-group{display:flex;align-items:center}
.task-assignee-overlap{border:2px solid var(--card);z-index:1}
.task-due{color:var(--t3);cursor:pointer;font-size:11px;font-weight:500;flex-shrink:0}
/* Pulse just three times so the indicator is noticed without producing
   a board full of perpetually-pulsing dots — bad for vestibular sensitivity
   even outside prefers-reduced-motion contexts. The colour stays as the
   stable signal. */
.task-due.overdue{color:var(--red);font-weight:600;animation:pulse-overdue 2s ease-in-out 3}
.task-due.due-soon{color:var(--orange);font-weight:600;animation:dueSoon 2.5s ease-in-out 3}
/* "No due date" affordance — italic differentiates it from real dates without
   crushing contrast below AA Large. The previous .55 opacity multiplied with
   --text3 (#9a9a9a) effectively hit ~2.5:1 on bg2, which is unreadable. */
.task-due.task-due-empty{color:var(--text3);font-style:italic}
.task-due.task-due-empty:hover{color:var(--text2)}
@keyframes dueSoon{0%,100%{opacity:1}50%{opacity:.6}}
/* Stuck in review badge */
.stuck-badge{font-size:9.5px;font-weight:700;color:var(--amber);background:rgba(212,148,42,.14);padding:2px 6px;border-radius:5px;letter-spacing:.4px;text-transform:uppercase}
.task-card.stuck-review{border-left-color:var(--amber);background:rgba(212,148,42,.04)}
/* CSM review states — blue = awaiting, orange = changes requested, green = approved */
.task-card.csm-awaiting{border-left-color:#3b82f6;background:rgba(59,130,246,.06)}
.task-card.csm-changes-requested{border-left-color:#e0954a;background:rgba(224,149,74,.07)}
.task-card.csm-approved{border-left-color:#2fa364;background:rgba(47,163,100,.06)}
.csm-badge{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;padding:2px 7px;border-radius:10px;letter-spacing:.3px;text-transform:uppercase}
.csm-badge-awaiting{background:rgba(59,130,246,.15);color:#3b82f6}
.csm-badge-changes-requested{background:rgba(224,149,74,.15);color:#e0954a}
.csm-badge-approved{background:rgba(47,163,100,.15);color:#2fa364;animation:csmPulse 1.8s ease-in-out infinite}
@keyframes csmPulse{0%,100%{opacity:1}50%{opacity:.65}}
.csm-banner.csm-section--awaiting{background:rgba(59,130,246,.08);color:#3b82f6;border-left:3px solid #3b82f6}
.csm-banner.csm-section--changes{background:rgba(224,149,74,.09);color:#e0954a;border-left:3px solid #e0954a}
.csm-banner.csm-section--approved{background:rgba(47,163,100,.09);color:#2fa364;border-left:3px solid #2fa364}
.csm-section{margin:12px 0 16px 30px;padding:12px;border:1px solid var(--border);border-radius:var(--r2);max-width:calc(100% - 30px)}
.csm-section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:8px;flex-wrap:wrap}
.csm-section-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.csm-section-label{font-size:13px}
.csm-review-toggle{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text2);cursor:pointer}
.csm-type-select{font-size:12px;max-width:150px}
.csm-drive-input{font-size:12px;flex:1;min-width:200px}
.csm-banner{padding:8px 12px;border-radius:6px;margin-bottom:10px;font-size:13px;font-weight:600}
.csm-feedback{padding:10px 12px;border-left:3px solid var(--orange);background:rgba(224,149,74,0.08);border-radius:4px;margin-bottom:10px;font-size:13px;white-space:pre-wrap}
.csm-history{margin-top:8px;font-size:12px;color:var(--text3)}
.csm-history summary{cursor:pointer}
.csm-history-list{margin-top:6px;display:flex;flex-direction:column;gap:4px}
.csm-history-text{color:var(--text2);white-space:pre-wrap}
.csm-action-buttons{display:flex;gap:8px;margin-top:10px}
.csm-submit-hint{margin-top:8px;font-size:12px;color:var(--green);display:flex;align-items:center;gap:6px}
.csm-meta{font-size:12px;color:var(--text3)}
.csm-meta-warn{font-size:12px;color:var(--orange)}
.csm-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.tm-csm-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:#3b82f6;background:rgba(59,130,246,.1);padding:2px 8px;border-radius:10px;margin-top:6px;width:fit-content}
/* pulse-overdue/-unread were near-duplicates of @keyframes pulse with
   slight opacity-trough differences. They're kept as named aliases here
   for readability at call sites but resolve to the same fade. */
@keyframes pulse-overdue{0%,100%{opacity:1}50%{opacity:.55}}

/* PRIORITY */
.priority-dot{width:6px;height:6px;border-radius:50%;display:inline-block;margin-right:6px}
.priority-dot.high{background:var(--red)}
.priority-dot.medium{background:var(--orange)}
.priority-dot.low{background:var(--blue)}
.priority-dot.done{background:var(--green)}
.priority-pill{font-size:10px;font-weight:700;padding:1px 5px;border-radius:5px;letter-spacing:.02em;text-transform:uppercase;flex-shrink:0}
/* 'critical' is a real value in the task-priority enum; without a rule it fell
   through to the unstyled base and read as a plain grey chip — the least urgent
   looking thing on the card. Solid red so it outranks .high visually. */
.priority-pill.critical{background:var(--red);color:#fff}
.priority-pill.high{background:rgba(224,85,76,.15);color:var(--red)}
.priority-pill.medium{background:rgba(140,147,160,.13);color:var(--t2)}
.priority-pill.low{background:rgba(76,141,255,.13);color:var(--blue)}

/* Status pill — touch-first quick-edit affordance. Hidden on fine pointers
   (mouse) where drag-and-drop already works; visible on coarse pointers
   (touch) where DnD is unusable. Tap opens the move-to popover. */
.status-pill{display:none;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:2px 8px;border-radius:10px;letter-spacing:.3px;background:var(--card2);border:1px solid var(--border2);color:var(--text2);cursor:pointer;font-family:inherit;line-height:1.4}
.status-pill .mi{width:11px;height:11px;opacity:.7}
.status-pill:hover{background:var(--card-hover);color:var(--text);border-color:var(--border3)}
.status-pill:active{transform:scale(.96)}
.status-pill-todo{color:var(--blue);border-color:rgba(76,141,255,.25);background:rgba(76,141,255,.06)}
.status-pill-inprogress{color:var(--orange);border-color:rgba(224,149,74,.25);background:rgba(224,149,74,.06)}
.status-pill-review{color:var(--purple);border-color:rgba(155,108,255,.25);background:rgba(155,108,255,.06)}
.status-pill-done{color:var(--green);border-color:rgba(47,163,100,.25);background:rgba(47,163,100,.06)}
.status-pill-backburner{color:var(--text3);border-color:var(--border2)}
@media(pointer:coarse){.status-pill{display:inline-flex}}
.priority-pill.done{background:rgba(47,163,100,.15);color:var(--green)}
/* Priority pill ripple */
.priority-pill{position:relative;overflow:hidden}
.priority-pill::after{content:'';position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgba(255,255,255,.2);transform:translate(-50%,-50%);transition:width .4s,height .4s,opacity .4s;opacity:0}
.priority-pill:hover::after{width:60px;height:60px;opacity:1}
/* Card-density helpers — surface less by default, full info on hover */
.task-card .task-desc,
.task-card .task-card-tags .csm-badge,
.task-card .task-card-tags .comment-badge,
.task-card .task-card-tags .attachment-badge,
.task-card .task-card-tags .unread-badge{opacity:.6;transition:opacity .15s}
.task-card:hover .task-desc,
.task-card:hover .task-card-tags .csm-badge,
.task-card:hover .task-card-tags .comment-badge,
.task-card:hover .task-card-tags .attachment-badge,
.task-card:hover .task-card-tags .unread-badge{opacity:1}

/* Long task title — single-line ellipsis with tooltip via title attr */
.task-card .task-title{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* Smart-date hint — under inputs with NLP parsing */
.smart-date-hint{font-size:11px;color:var(--text3);margin-top:2px;min-height:14px}
.smart-date-hint.parsed{color:var(--green)}
.smart-date-hint.empty{color:var(--text3)}

/* Undo toast — shows after destructive actions */
.undo-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--card2);border:1px solid var(--border2);border-radius:var(--r3);padding:10px 14px;display:flex;align-items:center;gap:12px;font-size:13px;color:var(--text);box-shadow:var(--shadow-lg);z-index:9999;animation:fadeIn .15s ease;min-width:280px}
.undo-toast .undo-msg{flex:1}
.undo-toast .undo-btn{background:var(--accent);color:#fff;border:none;padding:5px 12px;border-radius:var(--r2);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit}
.undo-toast .undo-btn:hover{filter:brightness(1.1)}
.undo-toast .undo-progress{position:absolute;left:0;bottom:0;height:2px;background:var(--accent);border-radius:0 0 var(--r3) var(--r3);width:100%;transform-origin:left;animation:undoCountdown var(--undo-ms,5000ms) linear forwards}
@keyframes undoCountdown{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* First-visit hint chip near the search bar */
.first-visit-hint{display:none;position:fixed;bottom:20px;left:20px;background:var(--card2);border:1px solid var(--accent);border-radius:var(--r3);padding:10px 14px;font-size:12px;color:var(--text);box-shadow:var(--shadow-md);z-index:50;max-width:280px;animation:fadeIn .25s ease}
.first-visit-hint.show{display:block}
.first-visit-hint kbd{display:inline-block;padding:1px 6px;background:var(--card);border:1px solid var(--border2);border-radius:4px;font-size:11px;font-family:'Inter',monospace}
.first-visit-hint .fvh-close{background:transparent;border:none;color:var(--text3);cursor:pointer;float:right;margin-left:8px;font-size:14px}
.first-visit-hint .fvh-close:hover{color:var(--text)}

/* Inline-edit popover for task cards (priority / assignee / due date) */
.qe-popover{position:fixed;background:var(--card2);border:1px solid var(--border2);border-radius:var(--r3);box-shadow:var(--shadow-lg);z-index:9000;min-width:160px;padding:6px;animation:fadeIn .12s ease}
.qe-popover .qe-row{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:var(--r2);cursor:pointer;font-size:13px;color:var(--text)}
.qe-popover .qe-row:hover,.qe-popover .qe-row:focus-visible{background:var(--card-hover);outline:none}
.qe-popover .qe-row.qe-active{background:var(--accent-dim);color:var(--accent)}
.qe-popover .qe-row .qe-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.qe-popover .qe-section{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--text3);padding:6px 10px 4px}
.qe-popover input.qe-date{width:100%;padding:6px 10px;background:var(--card);border:1px solid var(--border2);color:var(--text);border-radius:var(--r2);font-family:inherit;font-size:13px}
.task-card .priority-pill,.task-card .task-assignee,.task-card .task-due{cursor:pointer}
.task-card .priority-pill:hover,.task-card .task-assignee:hover,.task-card .task-due:hover{filter:brightness(1.15)}

/* Empty-state CTA — see canonical .empty-state / .empty-cta block lower
   in this file (search "EMPTY STATE"). Both class names share styles. */
/* Collision & draft banners */
.collision-banner{padding:8px 16px;background:rgba(212,148,42,.08);border-bottom:1px solid rgba(212,148,42,.2);font-size:12px;color:var(--orange);display:flex;align-items:center;gap:8px}
.collision-banner a{color:var(--blue);font-weight:600}
.draft-banner{padding:8px 16px;background:rgba(76,141,255,.06);border-bottom:1px solid rgba(76,141,255,.15);font-size:12px;color:var(--blue);display:flex;align-items:center;gap:8px}
.draft-banner a{color:var(--accent);font-weight:600;margin:0 2px}
/* Stuck dot (sidebar) */
.stuck-dot{position:absolute;top:4px;right:4px;width:8px;height:8px;border-radius:50%;background:var(--orange);border:2px solid var(--card);z-index:1;animation:pulse 2s infinite}
/* Chart export button */
/* Legacy .chart-export-btn rule removed — the 28x28 square version later in
   this file is the canonical one. Two competing definitions caused jittery
   sizing depending on cascade order. */
/* Timeline feed */
.timeline-feed{max-height:400px;overflow-y:auto;padding-right:4px}
.timeline-item{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);font-size:12px}
.timeline-dot{flex-shrink:0;margin-top:2px}
.timeline-text{font-weight:500;line-height:1.4;word-break:break-word}
.timeline-meta{color:var(--text3);font-size:12px;margin-top:2px}

/* Column collapse (extends rules at .kanban-col.col-collapsed above) */
.kanban-col.col-collapsed .col-header{opacity:.5}
/* Done sidebar (collapsible slide-out) */
.done-section{width:48px;min-width:48px;background:var(--card);border:1px solid var(--border);border-radius:var(--r4);display:flex;flex-direction:column;overflow:hidden;transition:width .2s ease,border-color .2s;flex-shrink:0}
.done-section.expanded{width:320px;min-width:320px}
.done-section.drag-over{border-color:var(--green);box-shadow:0 0 0 2px rgba(47,163,100,.2)}
/* Collapsed 48px rail */
.done-rail{display:flex;flex-direction:column;align-items:center;gap:12px;padding:14px 0;background:none;border:none;cursor:pointer;flex:1;width:100%;font-family:inherit}
.done-section.expanded .done-rail{display:none}
.done-rail-check{width:22px;height:22px;border-radius:50%;background:rgba(47,163,100,.16);color:var(--green);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.done-rail-count{font-size:13px;font-weight:700;color:var(--green)}
.done-rail-label{font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--t3);text-transform:uppercase;writing-mode:vertical-rl;transform:rotate(180deg)}
.done-rail-chevron{margin-top:auto;font-size:15px;color:var(--t3)}
/* Expanded header + search */
.done-head{display:none;align-items:center;justify-content:space-between;padding:0 2px 6px;margin:12px 12px 0;border-bottom:2px solid var(--green)}
.done-section.expanded .done-head{display:flex}
.done-head-left{display:flex;align-items:center;gap:8px}
.done-head-dot{width:7px;height:7px;border-radius:50%;background:var(--green)}
.done-head-title{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t1)}
.done-collapse{background:none;border:none;color:var(--t2);font-size:11px;cursor:pointer;font-family:inherit}
.done-collapse:hover{color:var(--t1)}
.done-search{display:none;align-items:center;gap:8px;background:var(--chip);border:1px solid var(--border);border-radius:9px;padding:8px 11px;margin:10px 12px 2px}
.done-section.expanded .done-search{display:flex}
.done-search svg{color:var(--t3);flex-shrink:0}
.done-search input{flex:1;background:transparent;border:none;outline:none;color:var(--t1);font-size:12px;font-family:inherit}
.done-search input::placeholder{color:var(--t3)}
.done-count-pill{background:var(--pill);font-size:11px;color:var(--t2);font-weight:600;padding:1px 8px;border-radius:20px;min-width:18px;text-align:center;line-height:1.4}
.done-cards{flex:1;overflow-y:auto;overflow-x:hidden;padding:0;opacity:1;transition:opacity .2s;scrollbar-width:thin;scrollbar-color:var(--border2) transparent}
.done-section.expanded .done-cards{padding:10px 12px}
.done-section:not(.expanded) .done-cards{max-width:0;padding:0;pointer-events:none;opacity:0}
/* Done cards de-emphasized but still scannable — previous .3 saturation made
   them unreadable when users wanted to find a recently-completed task. */
/* Compact completed-task rows in the expanded Done column */
.done-card{gap:3px;padding:11px 13px}
.done-card:hover{transform:none}
.done-card-row{display:flex;align-items:center;gap:10px}
.done-card-check{width:18px;height:18px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.done-card-check .mi{width:12px;height:12px}
.done-card-title{flex:1;min-width:0;font-size:13px;color:var(--t2);text-decoration:line-through;text-decoration-color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.done-card-date{font-size:11px;color:var(--t3);flex-shrink:0}
.done-card-client{margin-left:28px;font-size:11.5px;color:var(--t3)}
.done-older-note{padding:8px 10px;margin-top:6px;font-size:11px;color:var(--t3);text-align:center;border-top:1px solid var(--border)}
.csm-badge-unreviewed{background:rgba(217,170,69,.14);color:#d9aa45}
.done-card.csm-unreviewed{border-left:2px solid #d9aa45}
.client-churned-cue{font-size:9.5px;text-transform:uppercase;letter-spacing:.04em;color:#e0554c;opacity:.85;margin-left:4px}
.task-client-churned{opacity:.75}
.approval-section{margin-top:10px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--bg2)}
.approval-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
.approval-title{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--t3);font-weight:600}
.approval-state{font-size:11.5px;font-weight:600}
.approval-meta{font-size:11.5px;color:var(--t3);margin-bottom:6px}
.approval-comment{font-size:12.5px;margin-bottom:8px;padding:6px 8px;border-left:2px solid var(--border);color:var(--t2)}
.approval-note{font-size:12px;color:var(--t3)}
.approval-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.approval-row .inline-edit{flex:1 1 160px;min-width:0}
.client-tag{font-size:12px;color:var(--text2);background:var(--border2);padding:2px 8px;border-radius:var(--r1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;display:inline-block}

/* BUTTONS (#16 hierarchy) */
.btn{background:var(--accent);color:#fff;border:none;padding:var(--s2) var(--s4);border-radius:var(--r2);font-size:13px;font-weight:600;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);box-shadow:var(--shadow-sm);font-family:inherit}
.btn:hover{filter:brightness(1.1);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 4px var(--accent)}
.btn-secondary:focus-visible,.btn-ghost:focus-visible{outline:2px solid var(--accent);outline-offset:2px;box-shadow:none}
.modal-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn-sm{padding:var(--s1) 10px;font-size:12px}
.btn-secondary{background:var(--card2);border:1px solid var(--border2);color:var(--text)}
.btn-secondary:hover{border-color:var(--text2);background:var(--card-hover)}
.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--text2);box-shadow:none}
.btn-ghost:hover{border-color:var(--text2);color:var(--text)}
.btn-danger{background:var(--red);color:#fff}
.btn-danger:hover{filter:brightness(1.15)}
.btn-green{background:var(--green);color:#fff}
.btn-green:hover{filter:brightness(1.15)}
.btn-orange{background:var(--orange);color:#fff}
.btn-orange:hover{filter:brightness(1.15)}
button:disabled,.btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
input:disabled,textarea:disabled,select:disabled{opacity:.5;cursor:not-allowed;background:var(--bg)}
.add-task-btn{background:var(--gradient-accent);color:#fff;border:none;padding:6px 14px;border-radius:var(--r2);font-size:12px;font-weight:600;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);box-shadow:var(--shadow-sm)}
.add-task-btn:hover{filter:brightness(1.1);transform:translateY(-1px);box-shadow:var(--shadow-md)}
button.export-csv-btn{font-size:12px;padding:6px 10px;font-family:inherit;letter-spacing:.2px}

/* FILTER */
.filter-select{background:var(--card);border:1px solid var(--border);color:var(--text);padding:6px 10px;border-radius:var(--r2);font-size:12px;font-family:inherit;transition:all .2s;cursor:pointer}
.filter-select:hover{border-color:var(--border2)}

/* PIPELINE KANBAN */
.pipeline-kanban{display:flex;gap:var(--s4);overflow-x:auto;padding-bottom:var(--s2);scrollbar-width:thin;scrollbar-color:var(--border2) transparent}
.pipeline-kanban::-webkit-scrollbar{height:6px}
.pipeline-kanban::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
.pipeline-stage{flex:1 1 0;min-width:260px;background:transparent;border-radius:var(--r5);padding:0;min-height:200px;border:none;box-shadow:none;transition:background .2s}
.pipeline-stage.drag-over{background:rgba(76,141,255,.05);outline:1.5px dashed var(--blue);outline-offset:-2px;border-radius:var(--r4)}
.pipeline-stage .stage-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s3);padding:0 2px 8px;border-bottom:1px solid var(--border)}
.pipeline-stage .stage-title{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--t2)}
.pipeline-stage .stage-count{font-size:11px;color:var(--t3);background:var(--pill);padding:1px 8px;border-radius:20px;font-weight:600}
.client-pill{background:var(--card);border:1px solid var(--border);border-left:3px solid var(--border2);border-radius:var(--r4);padding:13px 14px;margin-bottom:11px;cursor:pointer;transition:transform var(--tr-fast),border-color var(--tr-fast),box-shadow var(--tr-fast);position:relative;overflow:hidden;display:flex;flex-direction:column;gap:11px}
.client-pill:hover{border-color:var(--border2);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.client-pill .cp-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin:0}
.client-pill .cp-name{font-size:14.5px;font-weight:600;line-height:1.2;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===== CLIENTS LENS TOGGLE (Pipeline <-> Map) — segmented control ===== */
.pipeline-density-toggle{display:inline-flex;background:var(--chip);border:1px solid var(--border);border-radius:9px;padding:2px;gap:2px}
/* Lens toggle sits right after the "Client Pipeline" title — give it breathing room. */
.clients-view-toggle{margin-left:14px}
.density-btn{font-family:inherit;font-size:12px;font-weight:600;color:var(--t3);background:none;border:none;border-radius:7px;padding:5px 11px;cursor:pointer;transition:background var(--tr-fast),color var(--tr-fast)}
.density-btn:hover{color:var(--t1)}
.density-btn[aria-pressed="true"]{background:var(--card);color:var(--t1);box-shadow:var(--shadow-sm)}
/* ===== PIPELINE ROW (one dense row per client) ===== */
.client-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--card);border:1px solid var(--border);border-left:3px solid var(--border2);border-radius:var(--r3);padding:8px 12px;margin-bottom:6px;cursor:pointer;overflow:hidden;transition:transform var(--tr-fast),border-color var(--tr-fast),box-shadow var(--tr-fast)}
.client-row:hover{border-color:var(--border2);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.client-row.dragging{opacity:.6}
.client-row:focus-visible,.client-pill:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.client-row.risk-good{border-left-color:var(--band-strong)}
.client-row.risk-warn{border-left-color:var(--band-stable)}
.client-row.risk-none{border-left-color:var(--border2)}
.client-row.risk-bad{border-left-color:var(--red)}
.client-row.churned{border-left-color:var(--t3);opacity:.7}
.client-row.paused{border-left-color:var(--blue)}
.client-row .cr-left{display:flex;align-items:center;gap:7px;min-width:0;flex:1 1 auto}
.client-row .cr-name{font-size:13px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;min-width:34px}
.client-row .cr-owner{font-size:11.5px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 8 auto;min-width:0;margin-left:1px}
.client-row .cr-onb{font-size:10px;font-weight:700;padding:1px 5px;border-radius:5px;flex-shrink:0;line-height:1.5}
.client-row .cr-onb--good{background:rgba(47,163,100,.1);color:var(--green)}
.client-row .cr-onb--warn{background:rgba(212,148,42,.14);color:var(--gold)}
.client-row .cr-onb--bad{background:rgba(224,85,76,.12);color:var(--red)}
.client-row .cr-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.client-row .cr-health-col{display:flex;align-items:center;min-width:48px;justify-content:flex-end}
.client-row .cr-health-pct{font-size:12px;font-weight:700;white-space:nowrap;min-width:32px;text-align:right}
/* Divider between a stage's active clients and its paused ones (paused sort last). */
.pipeline-paused-divider{display:flex;align-items:center;gap:8px;margin:14px 2px 8px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--t3)}
.pipeline-paused-divider::before,.pipeline-paused-divider::after{content:'';flex:1;height:1px;background:var(--border)}
/* Churned client styling */
.client-pill.churned{opacity:.55;border-color:var(--red);border-left-color:var(--red);background:rgba(224,85,76,.03)}
.client-pill.churned .cp-name{text-decoration:line-through;color:var(--text3)}
.client-pill.churned:hover{opacity:.85}
.cm-pause-state{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cm-pause-badge{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;padding:4px 10px;border-radius:10px;background:rgba(96,165,250,.1);color:var(--blue);border:1px solid rgba(96,165,250,.25)}
/* Pipeline empty state — shown when a stage has no clients */
.pipeline-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--s7) var(--s3);text-align:center;min-height:100px;border:1px dashed var(--border);border-radius:var(--r3)}
.pipeline-empty-state--strong{border-color:var(--border2)}
.pipeline-empty-state--inset{margin:8px}
.pe-icon{width:24px;height:24px;opacity:.25}
.pe-icon--ok{color:var(--green);opacity:1;margin-bottom:4px}
.pe-title{font-size:12px;color:var(--text3);margin-top:6px}
.pe-title--ok{color:var(--green);margin-top:4px;font-weight:600}
.pe-sub{font-size:12px;color:var(--text3);margin-top:2px}
.pe-sub--faint{opacity:.7}
/* Churned sidebar (collapsible like Done) */
.churned-section{width:48px;min-width:48px;background:var(--card);border:1px solid var(--border);border-radius:var(--r4);display:flex;flex-direction:column;overflow:hidden;transition:width .2s ease,border-color .2s;flex-shrink:0;min-height:200px}
.churned-section.expanded{width:300px;min-width:300px}
.churned-section.drag-over{border-color:var(--red);box-shadow:0 0 0 2px rgba(224,85,76,.2)}
.churned-sidebar-header{padding:14px 0;user-select:none;flex-shrink:0;cursor:pointer}
.churned-section.expanded .churned-sidebar-header{padding:12px 14px 8px;border-bottom:2px solid var(--red)}
.churned-title-collapsed{display:flex;flex-direction:column;align-items:center;gap:10px;font-size:12px;font-weight:700;color:var(--t3)}
.churned-title-collapsed .mi{width:18px;height:18px;color:var(--red);opacity:.85}
.churned-section.expanded .churned-title-collapsed{display:none}
.churned-title-expanded{display:none;align-items:center;gap:8px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--t1);white-space:nowrap}
.churned-title-expanded .mi{width:15px;height:15px;color:var(--red);opacity:.85}
.churned-section.expanded .churned-title-expanded{display:flex}
.churned-count-pill{background:var(--pill);font-size:11px;color:var(--t2);font-weight:600;padding:1px 8px;border-radius:20px;min-width:18px;text-align:center;line-height:1.4}
.churned-cards{flex:1;overflow-y:auto;overflow-x:hidden;padding:0;opacity:1;transition:opacity .2s;scrollbar-width:thin;scrollbar-color:var(--border2) transparent}
.churned-section.expanded .churned-cards{padding:10px 12px}
/* Collapsed: the cards must not LAY OUT at all. Hidden by opacity/max-width alone they kept
   their full height, stretching the whole pipeline row into a screen of empty space. */
.churned-section:not(.expanded) .churned-cards{display:none}
/* Expanded: the list scrolls rather than growing the row past the stage columns. */
.churned-section.expanded .churned-cards{max-height:calc(100vh - 240px);min-height:120px}

/* THIS WEEK PLANNER (#4) */
.week-planner{margin-bottom:var(--s5)}
.week-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--s2);overflow:hidden}
.week-day{background:var(--card);border:1px solid var(--border);border-radius:var(--r3);padding:var(--s3);min-height:100px;min-width:0;overflow:hidden}
.week-day.today{border-color:var(--accent);background:rgba(76,141,255,.03)}
.week-day-header{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--text3);margin-bottom:var(--s2);display:flex;justify-content:space-between;align-items:center}
.week-day-header .wd-date{font-size:12px;color:var(--text2);font-weight:500;text-transform:none;letter-spacing:0}
.week-day.today .week-day-header{color:var(--accent)}
.week-task{font-size:12px;padding:4px 8px;border-radius:var(--r2);margin-bottom:3px;cursor:pointer;background:var(--bg2);border-left:2px solid var(--border2);transition:background .1s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.week-task:hover{background:var(--card-hover)}
.week-task.high{border-left-color:var(--red)}
.week-task.medium{border-left-color:var(--orange)}
.week-task.low{border-left-color:var(--blue)}
.week-task.done{opacity:.5;text-decoration:line-through}
.week-empty{font-size:12px;color:var(--text3);padding:8px 0;text-align:center;cursor:pointer;border:1px dashed transparent;border-radius:var(--r2);transition:all .15s}
.week-empty:hover{color:var(--blue);border-color:var(--blue);background:rgba(76,141,255,.04)}
@media(max-width:900px){.week-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:480px){.week-grid{grid-template-columns:1fr 1fr}}

/* WORKLOAD */
.workload-section{margin-top:var(--s5)}
.workload-section h2{font-size:16px;font-weight:600;margin-bottom:var(--s3)}
.workload-person{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.wp-avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0;box-shadow:var(--shadow-sm);overflow:hidden}
.wp-name{width:60px;font-size:12px;font-weight:500}
.workload-bar-bg{flex:1;height:6px;background:var(--border);border-radius:3px;overflow:hidden}
.workload-bar-fill{height:100%;border-radius:3px;transition:width .5s}
.workload-count{font-size:12px;color:var(--text2);width:80px;text-align:right}

/* SCOREBOARD (on-time accountability, below kanban) */
.scoreboard-widget{margin-top:var(--s4);border:1px solid var(--border);border-radius:var(--r3);background:var(--card);padding:var(--s3)}
.sb-header{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.sb-title{font-size:14px;font-weight:700;margin:0}
.sb-subtitle{font-size:12px;color:var(--text3)}
.sb-you{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.sb-you-block{background:var(--bg2);border-radius:var(--r2);padding:12px;text-align:center}
.sb-you-click{cursor:pointer;transition:background .15s,box-shadow .15s}
.sb-you-click:hover{background:var(--card-hover);box-shadow:0 0 0 2px rgba(224,85,76,.25)}
.sb-you-rate,.sb-overdue-num{font-size:26px;font-weight:800;line-height:1.1}
.sb-unit{font-size:14px;font-weight:600;opacity:.7}
.sb-streak-flame{font-size:24px;font-weight:800;line-height:1.1;display:inline-flex;align-items:center;justify-content:center;gap:4px}
.sb-streak-flame .mi{width:22px;height:22px}
.sb-you-label{font-size:11px;font-weight:600;color:var(--text2);margin-top:4px}
.sb-you-sub{font-size:10px;color:var(--text3);margin-top:2px}
.sb-good{color:var(--green)}
.sb-warn{color:var(--gold)}
.sb-danger{color:var(--red)}
.sb-muted{color:var(--text3)}
.sb-streak-live{color:var(--orange)}
.sb-section-label{font-size:12px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.6px;margin:2px 0 10px;display:flex;align-items:center;gap:7px}
.sb-section-label .mi{width:15px;height:15px;color:var(--gold)}
.sb-board{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.sb-row{display:flex;align-items:center;gap:14px;padding:10px 14px;border-radius:var(--r2);background:var(--bg2);transition:background .15s,box-shadow .15s}
.sb-row:hover{background:var(--card-hover)}
.sb-row-me{background:var(--accent-dim);box-shadow:inset 0 0 0 1px rgba(76,141,255,.4)}
.sb-rank{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;font-size:12px;font-weight:800;flex-shrink:0;background:var(--border);color:var(--text2)}
.sb-rank .mi{width:15px;height:15px}
.sb-rank-1{background:linear-gradient(135deg,#f6d365,#d9aa45);color:#3a2c08}
.sb-rank-2{background:linear-gradient(135deg,#dde3ec,#a7b0bf);color:#2a2f38}
.sb-rank-3{background:linear-gradient(135deg,#e6ac7d,#c47f48);color:#3a2310}
.sb-name{flex:0 0 190px;font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:8px}
.sb-you-tag{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--accent);background:rgba(76,141,255,.16);padding:2px 6px;border-radius:6px;flex-shrink:0}
.sb-bar-bg{flex:1;min-width:90px;height:9px;background:var(--border);border-radius:5px;overflow:hidden}
.sb-bar{display:block;height:100%;border-radius:5px;transition:width .5s}
.sb-row-rate{font-size:15px;font-weight:800;width:56px;text-align:right;flex-shrink:0}
.sb-pct{font-size:11px;font-weight:600;opacity:.65;margin-left:1px}
.sb-row-streak{display:flex;align-items:center;justify-content:flex-end;gap:3px;width:44px;font-size:13px;font-weight:800;color:var(--orange);flex-shrink:0}
.sb-flame{width:14px;height:14px;color:var(--orange);flex-shrink:0}
.sb-empty{font-size:12px;color:var(--text3);font-style:italic;padding:6px 0}
@media(max-width:768px){.sb-you{grid-template-columns:1fr}.sb-name{flex-basis:110px}.sb-row{gap:10px;padding:9px 10px}}

/* MINI PIPELINE (overview widget) */
.pipeline-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.pipeline-card{background:var(--bg2);border-radius:var(--r2);padding:var(--s2);cursor:pointer;transition:all .15s;border:1px solid var(--border)}
.pipeline-card:hover{border-color:var(--border2);transform:scale(1.02)}
.pipeline-card .name{font-size:12px;font-weight:600}
.pipeline-card .stage{font-size:12px;color:var(--text2)}
.pipeline-card .mrr{font-size:12px;color:var(--green);font-weight:600}

/* MODALS (#14 shadow) */
/* Backdrop reduced from .82 → .6 so the user retains spatial context behind
   the dialog. The light-theme override at the bottom of this file keeps its
   own (already-soft) .3 value. */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:200;animation:fadeIn .15s ease;visibility:hidden}
.fin-drill-overlay{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6);backdrop-filter:blur(2px)}
.fin-drill-overlay.hidden{display:none}
.fin-drill-card{background:linear-gradient(180deg,#1e2026,#141519);border:1px solid var(--border3);border-radius:var(--r5);box-shadow:0 24px 64px rgba(0,0,0,.6);width:min(460px,92vw);max-height:80vh;display:flex;flex-direction:column;overflow:hidden}
[data-theme="light"] .fin-drill-card{background:var(--card);box-shadow:0 24px 64px rgba(15,26,51,.18)}
/* Finance MRR drill-down modal internals. These were built inline in
   _openDrillLoading()/_showDrill() (app.js) and are lifted here verbatim —
   same declarations, same order, so the modal renders identically.
   .fin-drill-row already had a :hover rule further down but never a base
   rule, so its box layout was re-inlined on every row of every render.
   .fin-drill-pos/-neg replace the `r.neg ? var(--red) : var(--green)`
   two-state inline colour. */
.fin-drill-head{padding:14px 16px;border-bottom:1px solid var(--border2);display:flex;align-items:center;justify-content:space-between;gap:12px}
.fin-drill-eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--text3);font-weight:600}
.fin-drill-title{font-size:16px;font-weight:700;color:var(--text)}
.fin-drill-close{background:none;border:none;color:var(--text3);font-size:24px;line-height:1;cursor:pointer}
.fin-drill-body{overflow:auto}
.fin-drill-msg{padding:18px 16px;color:var(--text3);font-size:13px}
.fin-drill-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-bottom:1px solid var(--border)}
.fin-drill-row[data-cid]{cursor:pointer}
.fin-drill-name{color:var(--text);font-size:13px;font-weight:500}
.fin-drill-tag{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.03em}
.fin-drill-amt{font-variant-numeric:tabular-nums;font-weight:600;font-size:13px}
.fin-drill-foot{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-top:1px solid var(--border2);font-weight:700}
.fin-drill-count{color:var(--text);font-size:13px}
.fin-drill-total{font-variant-numeric:tabular-nums}
.fin-drill-pos{color:var(--green)}
.fin-drill-neg{color:var(--red)}
.modal-overlay.active{visibility:visible}
.modal-overlay.active{display:flex}
/* Modal entry animation (#10) */
.modal-overlay.active .modal{animation:modalIn .2s ease}
@keyframes modalIn{from{opacity:0;transform:scale(.94) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal{background:var(--card);border:1px solid var(--border2);border-radius:var(--r6);padding:var(--s6);max-width:720px;width:92%;max-height:88vh;overflow-y:auto;box-shadow:0 24px 80px rgba(0,0,0,.6);position:relative;scrollbar-width:thin;scrollbar-color:var(--border2) transparent}
.modal::-webkit-scrollbar{width:6px}
.modal::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
.modal-close{position:absolute;top:var(--s3);right:var(--s3);background:var(--border);border:none;color:var(--text2);width:44px;height:44px;border-radius:50%;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;z-index:10}
.modal-close:hover{background:var(--red);color:#fff}
.modal h2{font-size:18px;font-weight:700;margin-bottom:var(--s4)}

/* NEW CLIENT MODAL */
.new-client-form{display:flex;flex-direction:column;gap:var(--s5)}
.new-client-form .td-field{margin-bottom:0}
.new-client-form .td-field label{font-size:11px;font-weight:600;letter-spacing:.8px;margin-bottom:7px;color:var(--text2)}
.new-client-form .td-field input,
.new-client-form .td-field select{padding:10px 12px;font-size:14px;border-radius:var(--r3);border:1.5px solid var(--border2);background:var(--bg);box-shadow:inset 0 1px 2px rgba(0,0,0,.2);transition:border-color .15s,box-shadow .15s}
.new-client-form .td-field input:hover,
.new-client-form .td-field select:hover{border-color:var(--border3)}
.new-client-form .td-field input:focus,
.new-client-form .td-field select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim);outline:none}
.new-client-form .td-field select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23aab0b7' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:14px}
.new-client-form .form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.new-client-form .td-actions{margin-top:var(--s3);padding-top:var(--s5);border-top:1px solid var(--border);gap:var(--s3)}
.new-client-form .td-actions .btn{padding:10px 20px;font-size:14px;border-radius:var(--r3);font-weight:600}
@media(max-width:600px){.new-client-form .form-row-2{grid-template-columns:1fr}}

/* CONFIRM MODAL (#11) */
.confirm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:250;animation:fadeIn .15s}
.confirm-box{background:var(--card);border:1px solid var(--border2);border-radius:var(--r5);padding:var(--s6);max-width:400px;width:90%;box-shadow:var(--shadow-lg);text-align:center}
.confirm-box h3{font-size:16px;font-weight:700;margin-bottom:var(--s2)}
.confirm-box p{font-size:13px;color:var(--text2);margin-bottom:var(--s5)}
.confirm-box .confirm-actions{display:flex;gap:var(--s2);justify-content:center}

/* CLIENT MODAL TABS (#9) */
.cm-tabs{display:flex;gap:14px;margin:0 0 var(--s4);padding:0 24px;border-bottom:1px solid var(--border);background:transparent;overflow-x:auto;scrollbar-width:none}
.cm-tabs::-webkit-scrollbar{display:none}
.cm-tab{padding:12px 0;font-size:12px;font-weight:500;color:var(--t3);cursor:pointer;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;white-space:nowrap}
.cm-tab:hover{color:var(--t2)}
.cm-tab.active{color:var(--t1);border-bottom-color:var(--accent);font-weight:700}
.cm-tab-content{display:none;padding:0 24px 24px}
.cm-tab-content.active{display:block;animation:fadeIn .2s ease}

/* CONTACT INFO TAB (multi-contact) */
.contact-card-list{display:flex;flex-direction:column;gap:var(--s3)}
.contact-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r3);padding:var(--s4)}
.contact-card[data-contact-kind="primary"]{border-color:rgba(76,141,255,.35);box-shadow:0 0 0 1px rgba(76,141,255,.08)}
.contact-card-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin-bottom:var(--s3)}
.contact-card-title{display:flex;align-items:center;gap:var(--s2);min-width:0}
.contact-card-name{font-size:14px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.contact-pill{display:inline-flex;align-items:center;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;padding:2px 8px;border-radius:10px;background:var(--border2);color:var(--text2)}
.contact-pill--primary{background:rgba(76,141,255,.15);color:var(--accent)}
.contact-card-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.contact-remove-btn{color:var(--red);padding:2px 8px;font-size:16px;line-height:1}
.contact-empty-hint{font-size:12px;color:var(--text3);padding:var(--s3) var(--s4);background:var(--bg);border:1px dashed var(--border);border-radius:var(--r3);text-align:center}
@media (max-width:640px){.contact-card-grid{grid-template-columns:1fr}}

/* MODAL SECTIONS */
.cm-section{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--border)}
.cm-section:first-child{margin-top:0;padding-top:0;border-top:none}
.cm-section h4{font-size:12px;font-weight:700;margin-bottom:12px;color:var(--text2);text-transform:uppercase;letter-spacing:.5px}
/* Notes tab (migration 117): AI call notes + team notes, one card per entry */
.cm-ai-badge{font-size:9px;font-weight:700;letter-spacing:.5px;color:var(--accent);border:1px solid var(--accent);border-radius:var(--r1);padding:1px 4px;vertical-align:2px}
.cm-call-note{padding:10px 12px;border:1px solid var(--border);border-radius:var(--r2);margin-bottom:8px;background:rgba(255,255,255,.02)}
.cm-call-note-meta{font-size:11px;font-weight:600;color:var(--t3);margin-bottom:4px}
.cm-call-note-meta a{color:var(--accent);text-decoration:none}
.cm-call-note-meta a:hover{text-decoration:underline}
.cm-call-note-body{font-size:13px;line-height:1.5;color:var(--t1);white-space:normal}
.checklist-item{display:flex;align-items:center;gap:8px;padding:5px 10px;font-size:13px;cursor:pointer;transition:all .15s;border-radius:var(--r2);margin-bottom:0}
.checklist-item:hover{background:rgba(255,255,255,.03)}
.checklist-item.checked{color:var(--text3);text-decoration:line-through}
.checklist-item.checked:hover{background:rgba(255,255,255,.03)}
.checklist-item input[type="checkbox"]{width:16px;height:16px;accent-color:var(--green);cursor:pointer;flex-shrink:0}
/* The launch checklist on the client record is a live, read-only view of the
   Launches tab's list (renderClientLaunchChecklist) — no checkboxes, no
   pointer affordance, steps grouped under their own heads. */
.cm-launch-checklist .checklist-item{cursor:default}
.cm-launch-checklist .checklist-item:hover{background:none}
.cm-launch-checklist .checklist-item.na{color:var(--text3)}
.cm-checklist-mark{width:16px;flex-shrink:0;text-align:center;color:var(--green);font-weight:700}
.cm-checklist-how{color:var(--text3);font-size:11px}
.cm-checklist-step{margin-top:10px}
.cm-checklist-step-head{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text2);padding:0 10px;margin-bottom:4px}
/* Client-modal header sits in a padding:0 modal-linear shell, so it must
   inset itself — give the avatar + health ring breathing room from the edges
   (was flush against them, overflowing the rounded corners). */
.client-header{display:flex;align-items:flex-start;gap:15px;padding:16px 24px 0;margin-bottom:var(--s2)}
.client-emoji{font-size:28px}
.client-info{flex:1;min-width:0}
.client-info h2{margin-bottom:var(--s1)}
.client-stage{font-size:12px;padding:3px 10px;border-radius:12px;background:var(--border2);color:var(--text2);margin-right:var(--s2);font-weight:600;letter-spacing:.3px;text-transform:uppercase}
.client-mrr-badge{font-size:14px;color:var(--green);font-weight:700}
/* Progress donut: ring fills to --hp% in the status colour, text centered */
.health-circle{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;border:none;flex-shrink:0;position:relative;isolation:isolate;--rc:var(--green);color:var(--rc)}
.health-circle.health-good{--rc:var(--band-strong)}
.health-circle.health-warn{--rc:var(--band-stable)}
.health-circle.health-bad{--rc:var(--red)}
.health-circle::before{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--rc) calc(var(--hp,0)*1%),var(--track) 0);z-index:-2}
.health-circle::after{content:'';position:absolute;inset:5px;border-radius:50%;background:var(--card);z-index:-1}
.health-good{border-color:var(--band-strong);color:var(--band-strong-txt);background:rgba(155,108,255,.06)}
.health-warn{border-color:var(--band-stable);color:var(--band-stable-txt);background:rgba(47,163,100,.06)}
.health-bad{border-color:var(--red);color:var(--red);background:rgba(224,85,76,.06)}

/* FORM FIELDS */
.td-field{margin-bottom:var(--s3)}
.td-field label{display:block;font-size:12px;color:var(--text2);margin-bottom:var(--s1);text-transform:uppercase;letter-spacing:.5px;font-weight:500}
.td-field input,.td-field textarea,.td-field select{width:100%;background:var(--bg);border:1px solid var(--border);color:var(--text);padding:var(--s2) 10px;border-radius:var(--r2);font-size:13px;font-family:inherit;transition:all .2s}
select option{background:var(--card);color:var(--text)}
.td-field textarea{min-height:60px;resize:vertical}
.td-actions{display:flex;gap:var(--s2);margin-top:var(--s4)}
.td-actions--end{justify-content:flex-end;padding-top:var(--s1)}
.form-row{display:flex;gap:var(--s2);margin-bottom:var(--s2);align-items:center;flex-wrap:wrap}
.form-row input{flex:1;background:var(--bg);border:1px solid var(--border);color:var(--text);padding:6px 8px;border-radius:var(--r1);font-size:12px;font-family:inherit;transition:all .2s}
.form-row button{background:var(--accent);color:#fff;border:none;padding:6px 12px;border-radius:var(--r1);font-size:12px;cursor:pointer;white-space:nowrap;font-weight:500;transition:all .15s}
.form-row button:hover{filter:brightness(1.1)}

/* FORM VALIDATION (#11) */
.td-field.has-error input,.td-field.has-error textarea,.td-field.has-error select{border-color:var(--red);box-shadow:0 0 0 2px rgba(224,85,76,.1)}
.td-field .field-error{font-size:12px;color:var(--red);margin-top:4px;display:none;animation:fadeIn .2s ease}
.td-field.has-error .field-error{display:block}
.td-field--flush{margin:0}
.td-field--grow{flex:1}
.td-field--tight{margin-bottom:var(--s2)}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
.shake{animation:shake .3s ease}

/* PROGRESS */
.progress-bar{flex:1;height:6px;background:var(--border);border-radius:3px;overflow:hidden}
.progress-fill{height:100%;border-radius:3px;background:var(--green);transition:width .5s}

/* TASKS TAB */
.task-group{margin-bottom:var(--s5)}
.task-group h3{font-size:13px;color:var(--text2);margin-bottom:var(--s2);padding-bottom:6px;border-bottom:1px solid var(--border)}
.task-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r2);cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);border:1px solid transparent}
.task-row:hover{background:rgba(255,255,255,.03);border-color:var(--border);transform:translateX(3px)}
.task-row .tr-priority{width:6px;height:6px;border-radius:50%;flex-shrink:0;margin-top:2px;align-self:flex-start}
.task-row .tr-priority.high{background:var(--red)}
.task-row .tr-priority.medium{background:var(--orange)}
.task-row .tr-priority.low{background:var(--blue)}
.task-row .tr-content{flex:1;min-width:0}
.task-row .tr-title{font-size:13px;font-weight:500}
.task-row .tr-desc{font-size:12px;color:var(--text3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.task-row .tr-assignee{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0;box-shadow:var(--shadow-sm)}
.task-row .tr-due{font-size:12px;color:var(--text2);width:65px;text-align:right;flex-shrink:0}
.task-row .tr-due.overdue{color:var(--red);font-weight:600}
.task-row.tr-done{opacity:.45}.task-row.tr-done .tr-title{text-decoration:line-through;color:var(--text3)}

/* STATUS SUMMARY */
.status-summary{font-size:12px;color:var(--text2);display:flex;gap:var(--s3)}
.loading-state{color:var(--text3);font-size:13px;padding:40px;text-align:center}
.total-mrr-badge{background:rgba(47,163,100,.08);color:var(--green);padding:4px 12px;border-radius:var(--r3);font-weight:700;font-size:14px;letter-spacing:-.02em;border:1px solid rgba(47,163,100,.15)}

/* EMPTY STATE (#5) — canonical block. .empty-cta is an alias used by some
   tabs (Agents/LLM/Cron); both render identically so a single visual
   pattern persists across the app regardless of which class was used in
   legacy markup. New code should use .empty-state with .es-* children. */
.empty-state,.empty-cta{text-align:center;padding:60px 20px;color:var(--text2);display:flex;flex-direction:column;align-items:center;gap:10px}
.empty-state .es-icon,.empty-cta .ec-icon{margin-bottom:var(--s2);opacity:.5}.empty-state .es-icon .mi,.empty-cta .ec-icon .mi{width:40px;height:40px}
.empty-state .es-title,.empty-cta .ec-msg{font-size:16px;font-weight:600;color:var(--text);margin-bottom:6px}
.empty-state .es-desc,.empty-cta .ec-desc{font-size:13px;max-width:400px;margin:0 auto;line-height:1.6;color:var(--text3)}
.empty-state .es-action,.empty-cta .btn{margin-top:var(--s4)}

/* AD TABLE */
.ad-table{width:100%;border-collapse:collapse;font-size:12px}
.ad-table th,.ad-table td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.04)}
.ad-table th{text-align:left;color:var(--text3);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.5px;background:rgba(255,255,255,.02)}
.ad-table tbody tr:hover{background:rgba(255,255,255,.02)}
.ad-table tbody tr:last-child td{border-bottom:none}

/* MEETING ITEM */
.meeting-item{margin-bottom:var(--s3);padding:var(--s2);background:var(--bg2);border-radius:var(--r2);border:1px solid var(--border)}
.meeting-item .m-date{font-size:12px;color:var(--text2);margin-bottom:var(--s1)}
.meeting-item a{color:var(--blue);font-size:12px}
.note-item{padding:6px 0;border-bottom:1px solid var(--border)}
.note-item .note-time{font-size:12px;color:var(--text2)}
.note-item .note-text{font-size:13px}

/* DELIVERABLES */

.progress-text{font-size:12px;color:var(--text2);width:40px}

/* DELIVERABLE PIPELINE */

.deliv-stage{background:var(--card);border:1px solid var(--border);border-radius:var(--r4);padding:var(--s3);min-height:120px;box-shadow:var(--shadow-sm)}
.deliv-stage .ds-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;padding-bottom:var(--s2);border-bottom:1px solid var(--border)}
.deliv-stage .ds-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text2)}
.deliv-stage .ds-count{font-size:12px;color:var(--text3);background:var(--border2);padding:1px 8px;border-radius:10px}
.deliv-item{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r2);padding:var(--s2) 10px;margin-bottom:6px;font-size:12px}
.deliv-item .di-client{font-weight:600;margin-bottom:2px}
.deliv-item .di-type{color:var(--text2);font-size:12px}
.deliv-item .di-due{color:var(--orange);font-size:12px;margin-top:2px}

/* RENEWAL ALERTS */
.renewal-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r3);padding:var(--s3) var(--s4);margin-bottom:var(--s2);display:flex;align-items:center;justify-content:space-between;box-shadow:var(--shadow-sm);transition:all .2s}
.renewal-card:hover{box-shadow:var(--shadow-md)}
.renewal-card.urgent{border-color:rgba(224,85,76,.3);background:rgba(224,85,76,.04)}
.renewal-card.soon{border-color:rgba(212,148,42,.2);background:rgba(212,148,42,.04)}
.renewal-card .rc-info{font-size:13px}
.renewal-card .rc-date{font-size:12px;color:var(--text2)}
.renewal-card .rc-days{font-size:13px;font-weight:600}

/* COLLECTIONS DASHBOARD */
.collections-dashboard{display:flex;flex-direction:column;gap:var(--s6)}
.metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s3);margin-bottom:var(--s5)}
.metric-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r4);padding:var(--s5);box-shadow:var(--shadow-sm);transition:all .2s}
.metric-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.metric-label{font-size:12px;color:var(--text2);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:var(--s3);font-weight:600}
.metric-value{font-size:32px;font-weight:800;line-height:1;letter-spacing:-.5px;margin-bottom:var(--s2)}
.metric-trend{font-size:12px;color:var(--text2);margin-top:var(--s2)}
.pipeline-section{background:var(--card);border:1px solid var(--border);border-radius:var(--r4);padding:var(--s5);box-shadow:var(--shadow-sm)}
.pipeline-section h3{font-size:16px;font-weight:700;margin-bottom:var(--s4);color:var(--text)}
.pipeline-funnel{display:flex;flex-direction:column;gap:var(--s2)}
.pipeline-funnel .pipeline-stage{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) 0}
.stage-label{font-size:13px;font-weight:600;color:var(--text2);min-width:60px}
.stage-bar{background:linear-gradient(90deg,var(--accent),var(--purple));color:#fff;padding:var(--s2) var(--s3);border-radius:var(--r2);font-size:12px;font-weight:600;text-align:center;transition:width .3s;min-width:80px}
.pipeline-stage.final .stage-bar{background:linear-gradient(90deg,var(--red),var(--orange))}
.clients-section{background:var(--card);border:1px solid var(--border);border-radius:var(--r4);padding:var(--s5);box-shadow:var(--shadow-sm)}
.clients-section h3{font-size:16px;font-weight:700;margin-bottom:var(--s4);color:var(--text)}
.clients-table{width:100%;border-collapse:collapse}
.clients-table th{text-align:left;padding:var(--s3) var(--s2);font-size:12px;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;border-bottom:2px solid var(--border2);background:var(--bg);position:sticky;top:0}
.clients-table td{padding:var(--s3) var(--s2);font-size:13px;border-bottom:1px solid var(--border)}
.clients-table tbody tr:nth-child(even){background:rgba(255,255,255,.01)}
.clients-table tbody tr:hover{background:var(--card-hover)}
.error-message{text-align:center;padding:var(--s8);color:var(--red)}
.error-message h2{font-size:20px;margin-bottom:var(--s3)}
.error-message p{font-size:14px;color:var(--text2);margin-bottom:var(--s2)}

/* SCROLLBAR — slightly thicker so users can spot scrollable kanban columns. */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--border3)}

/* PRINT (#34) — full QA pass */
@page{margin:1.5cm}
@media print{
  /* ── Hide all interactive / decorative chrome ── */
  .sidebar-left,.mobile-menu-btn,.header-right,.shortcuts-trigger-btn,
  .add-task-btn,.play-btn,.card-timer,.toast-container,.search-container,
  .modal-overlay,.confirm-overlay,.filter-select,
  .sync-indicator,.auth-area,#buildVer,.es-action,
  .kanban-empty-state,.empty-state .es-action{display:none!important}
  /* Alert banner kept so a printed snapshot retains overdue/blocking context. */
  .alert-banner{background:#fff8e6!important;border:1px solid #c98a06!important;color:#7a4f00!important;border-left:3pt solid #b3680a!important;display:flex!important}
  .alert-banner .alert-dismiss{display:none!important}

  /* ── Base reset ── */
  *{box-shadow:none!important;animation:none!important;transition:none!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  html,body{background:#fff!important;color:#000!important;font-size:11pt!important}
  ::selection{background:transparent}

  /* ── Layout ── */
  .main-area{margin-left:0!important;padding:0 0 12pt!important;max-width:100%!important}
  .header{border-bottom:2pt solid #000!important;margin-bottom:12pt!important;padding-bottom:8pt!important}
  .header h1{font-size:16pt!important;color:#000!important}

  /* ── Tab content: only active tab prints ── */
  .tab-content{display:none!important}
  .tab-content.active{display:block!important}

  /* ── Surfaces ── */
  .widget,.task-card,.kanban-col,.agent-card,.llm-card,
  .client-pill,.pipeline-stage,.health-check,.renewal-card,
  .metric-card,.pipeline-section,.clients-section,.deliv-stage,
  .meeting-item,.task-group,.llm-stat,.cron-table tr{
    background:#fff!important;border-color:#ccc!important;color:#000!important}

  /* ── Text hierarchy ── */
  .w-label,.col-title,.task-due,.task-desc,.tr-desc,.tr-due,.agent-role,.agent-meta,.llm-provider,.stage-title,.ds-title,.hc-label,.note-time,.di-type,.rc-date,.metric-label,.status-summary,.greeting{color:#555!important}
  .w-value,.task-title,.tr-title,.agent-name,.llm-name,
  .cp-name,.metric-value,.hc-value{color:#000!important}

  /* ── Colored data: keep readable in B&W ── */
  .client-mrr-badge,.api-healthy,#totalMRR{color:#1a6b1a!important}
  .task-due.overdue,.tr-due.overdue{color:#990000!important;font-weight:600!important}
  .renewal-card.urgent .rc-days{color:#990000!important}
  .renewal-card.soon .rc-days{color:#886200!important}

  /* ── Priority pills: border-based for B&W printers ── */
  .priority-pill{background:transparent!important;border:1px solid currentColor!important}
  .priority-pill.high{color:#990000!important}
  .priority-pill.medium{color:#886200!important}
  .priority-pill.low{color:#004488!important}
  .priority-pill.done{color:#1a6b1a!important}

  /* ── Health badges: border-based ── */
  .health-badge{background:transparent!important;border:1px solid currentColor!important}
  .health-badge.pass{color:#1a6b1a!important}
  .health-badge.fail{color:#990000!important}
  .health-badge.warn{color:#886200!important}
  .health-check.pass{border-color:#1a6b1a!important}
  .health-check.fail{border-color:#990000!important}
  .health-grid{grid-template-columns:repeat(3,1fr)!important}

  /* ── Kanban: 2-col grid, avoid page breaks inside cards ── */
  .kanban{grid-template-columns:repeat(2,1fr)!important;gap:8pt!important}
  .kanban-col{break-inside:avoid!important;page-break-inside:avoid!important}
  .task-card{break-inside:avoid!important;page-break-inside:avoid!important;margin-bottom:6pt!important}
  /* Done tasks: full opacity, keep strikethrough */
  #cards-done .task-card{opacity:1!important;filter:none!important}
  #cards-done .task-title{text-decoration:line-through!important;color:#777!important}

  /* ── Client pipeline: stack vertically ── */
  .pipeline-kanban{flex-direction:column!important;overflow:visible!important}
  .pipeline-stage{flex:none!important;width:100%!important;break-inside:avoid!important;page-break-inside:avoid!important;min-height:auto!important}

  /* ── Deliverable pipeline: 2-col ── */

  .deliv-stage{break-inside:avoid!important;page-break-inside:avoid!important}
  .deliv-item{background:#f5f5f5!important;border-color:#ddd!important}

  /* ── Tables: de-sticky headers, zebra rows ── */
  .cron-table th,.clients-table th{position:static!important;background:#f0f0f0!important;color:#333!important;border-bottom:2pt solid #000!important}
  .cron-table td,.clients-table td{border-bottom:1px solid #ddd!important;color:#000!important}
  .cron-table tbody tr:nth-child(even),.clients-table tbody tr:nth-child(even){background:#f7f7f7!important}
  .cron-status{border:1px solid currentColor!important;background:transparent!important}
  .cron-status.success{color:#1a6b1a!important}
  .cron-status.failed{color:#990000!important}
  .cron-status.running{color:#004488!important}

  /* ── Agents / LLM: 2-col ── */
  .agents-grid,.llm-grid{grid-template-columns:repeat(2,1fr)!important}
  .agent-card,.llm-card{break-inside:avoid!important;page-break-inside:avoid!important}
  .agent-task{background:#f0f0f0!important;color:#004488!important;border-color:#ccc!important}
  .llm-stat{background:#f5f5f5!important;border-color:#ddd!important}
  .llm-purpose{color:#004488!important}

  /* ── Renewal alerts ── */
  .renewal-card.urgent{border-color:#990000!important}
  .renewal-card.soon{border-color:#886200!important}
  .renewal-card{break-inside:avoid!important;page-break-inside:avoid!important}

  /* ── Links: show URL ── */
  a[href]:after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  a[href^="#"]:after,a[href^="javascript:"]:after{content:""}

  /* ── Section headings: avoid orphan headers ── */
  h2,h3{break-after:avoid!important;page-break-after:avoid!important}
  .kanban-header{break-after:avoid!important}
  .tab-header-row{break-after:avoid!important}
}

/* RESPONSIVE (#4) */
/* widgets auto-reflow via auto-fit */
@media(max-width:1400px){.kanban{gap:var(--s2)}}
@media(max-width:1200px){.kanban{grid-template-columns:repeat(2,1fr);height:auto}.kanban-with-backburner{height:auto;flex-wrap:wrap}.kanban-col{max-height:50vh}}
@media(max-width:900px){.widgets{grid-template-columns:repeat(2,1fr)}.health-grid{grid-template-columns:repeat(2,1fr)}.kanban{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){
  /* Phone-sized: stack the kanban into one column. The 2-col grid at this
     width forces horizontal scroll inside each column, which kills usability
     on touch (drag-drop already doesn't work; users want to scan vertically). */
  .kanban{grid-template-columns:1fr!important;gap:var(--s2)}
  .kanban-col{max-height:none!important;min-height:auto}
  .col-cards{max-height:60vh}
  .pipeline-kanban{flex-direction:column}
  /* Bulk action bar — wrap aggressively so buttons don't overflow off-screen */
  .bulk-action-bar{padding:8px 10px;gap:6px}
  .bulk-action-bar .btn{flex:1;min-width:0;font-size:12px}
}
@media(max-width:768px){
  .sidebar-left{width:56px;overflow:hidden;transition:transform .25s ease,width .25s ease;transform:translateX(-100%)}
  .sidebar-left.expanded:not(.open){width:56px;align-items:center}
  .sidebar-left.expanded:not(.open) .nav-icon{width:38px;justify-content:center;padding:0;gap:0;height:38px}
  .sidebar-left.expanded:not(.open) .nav-icon::after{position:absolute;left:calc(100% + 10px);opacity:0;background:var(--card2);box-shadow:var(--shadow-md);padding:4px 10px;font-size:12px;pointer-events:none;display:block}
  .sidebar-left.expanded:not(.open) .nav-icon:hover::after{opacity:1}
  .sidebar-left.expanded:not(.open)~.main-area{margin-left:0}
  .sidebar-toggle{display:none!important}
  .sidebar-left.open{transform:translateX(0);width:min(200px,80vw);overflow:hidden}
  /* Show icon labels when sidebar is open on mobile */
  .sidebar-left.open .nav-icon{width:auto;justify-content:flex-start;padding:0 14px;gap:10px;height:40px}
  .sidebar-left.open .nav-icon::after{position:static;opacity:1;transform:none;background:none;box-shadow:none;padding:0;font-size:13px;font-weight:500;white-space:nowrap;color:inherit;transition:none;display:block}
  .sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:101}
  .sidebar-overlay.open{display:block}
  .main-area{margin-left:0;padding:var(--s3)}
  .mobile-menu-btn{display:flex!important}
  .kanban{grid-template-columns:repeat(2,1fr)}
  .kanban-col{max-height:50vh}
  .widgets{grid-template-columns:repeat(2,1fr)}
  .pipeline-kanban{flex-direction:column}
  .pipeline-stage{flex:none;min-height:auto}
  /* Topbar wraps on mobile */
  .topbar{gap:var(--s2)}
  .topbar-search{flex:1 1 100%}
  .topbar-tab-tools,.topbar-controls{flex-wrap:wrap}
  /* Modal — full-screen on mobile, with safe-area-inset for notched devices */
  .modal{width:100%;max-width:100%;max-height:100dvh;min-height:100dvh;padding:max(var(--s3), env(safe-area-inset-top)) var(--s3) max(var(--s3), env(safe-area-inset-bottom));border-radius:0;margin:0}
  .modal-overlay{align-items:flex-start}
  .modal-linear{width:100%!important;max-width:100%!important;border-radius:0}
  .linear-body{flex-direction:column;max-height:none}
  .linear-main{padding:16px}
  .linear-sidebar{width:100%;border-left:none;border-top:1px solid var(--border);flex-direction:row;flex-wrap:wrap;gap:8px;padding:12px 16px}
  .linear-prop{margin-bottom:0;flex:1;min-width:120px}
  /* Client modal tabs — scrollable */
  .cm-tabs{margin-left:0;margin-right:0;padding:0 16px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .cm-tabs::-webkit-scrollbar{display:none}
  .cm-tab{padding:var(--s2) var(--s3);font-size:12px;flex-shrink:0}
  /* Form rows stack on mobile */
  .form-row{flex-direction:column}
  .form-row input,.form-row select{width:100%}
  /* Prevent iOS zoom on input focus — must be 16px+ */
  input,textarea,select{font-size:16px!important}
  .modal input,.modal textarea,.modal select{font-size:16px!important}
  /* Touch targets: 44px minimum (Apple HIG) */
  .sidebar-left .nav-icon{width:44px;height:44px}
  .btn,.btn-sm,.btn-secondary,.btn-ghost{min-height:44px;min-width:44px}
  /* Top-nav icon controls were below the 44px tap target on phones. */
  .topnav .notification-bell{width:42px;height:42px}
  .nav-avatar{width:42px;height:42px}
  .theme-seg-btn{width:40px;height:38px}
  .filter-select{min-height:44px;font-size:14px!important}
  /* Filters: full-width stacked on mobile */
  .kanban-filters{flex-direction:column;gap:var(--s2)}
  .kanban-filters .filter-select,.kanban-filters .btn{width:100%}
  /* Header */
  .header{padding-left:44px}
  .header h1{font-size:18px}
  .header .greeting{display:none}
  .header-right{gap:var(--s2);flex-wrap:wrap}
  /* Tables */
  .cron-table{font-size:12px;display:block;overflow-x:auto}
  .cron-table th,.cron-table td{padding:6px}
  .finance-table{display:block;overflow-x:auto}
  /* Tabs row */
  .tab-header-row{flex-wrap:wrap;gap:var(--s2)}
  /* Tasks toolbar: full-width, wrapping on mobile */
  .tasks-toolbar{width:100%;flex-wrap:wrap}
  .search-shortcut{display:none}
  /* Pipeline cards */
  .pipeline-card{font-size:12px}
  /* Ad performance grid */
  .ad-grid{grid-template-columns:1fr!important}
  /* Notes */
  .note-card{padding:var(--s2)}
  /* Metrics */
  .metrics-grid{grid-template-columns:1fr 1fr}
  /* Calendar: compact on narrow screens */
  .cal-day{min-height:62px;padding:3px 2px}
  .cal-header{padding:4px 2px;font-size:12px}
  .cal-task{padding:1px 4px;font-size:12px;margin-bottom:1px}
  .cal-nav{flex-wrap:wrap;gap:6px;justify-content:center}
  .cal-nav .cal-title{font-size:12px;order:-1;width:100%;text-align:center}
  .cal-nav button{padding:3px 10px;font-size:12px}
  /* View toggle */
  .view-toggle-btn{padding:3px 8px;font-size:12px}
  /* Pipeline kanban on narrow phones */
  .pipeline-stage{padding:var(--s2)}
}
/* (Second @media(max-width:600px) block merged into the one above to
   eliminate conflicting overrides on .kanban / .kanban-col.) */
@media(max-width:480px){
  .health-grid{grid-template-columns:1fr 1fr}
  .agents-grid{grid-template-columns:1fr}
  .llm-grid{grid-template-columns:1fr}
  .task-row{flex-wrap:wrap;gap:6px}
  .metrics-grid{grid-template-columns:1fr}
  .widgets{grid-template-columns:1fr}
  /* Tasks toolbar: hide CSV export, stretch filter selects */
  .tasks-toolbar .export-csv-btn{display:none}
  .tasks-toolbar .filter-select{flex:1;min-width:90px}
}
@media(max-width:400px){
  .health-grid{grid-template-columns:1fr}
  .toast-container{left:10px;right:10px;bottom:10px}
  .toast{max-width:100%}
  .main-area{padding:var(--s2)}
  .modal{padding:var(--s2)}
  .header{flex-direction:column;align-items:flex-start;gap:var(--s2)}
  .header-right{width:100%;justify-content:space-between}
  .kanban-col{padding:var(--s2)}
  .task-card{padding:var(--s2)}
  .widget{padding:var(--s3)}
  .cm-tabs{font-size:12px}
  .cm-tab{padding:6px 10px}
  /* Tasks toolbar: tight layout at 390px */
  .tasks-toolbar{gap:var(--s1)}
  .tasks-toolbar .add-task-btn{font-size:12px;padding:5px 10px}
  .tab-header-row h2{font-size:16px}
  /* Sync indicator: show only dot, hide text to save header space */
  .sync-text{display:none}
  /* Build version badge: not useful on tiny screens */
  #buildVer{display:none}
  /* Team card footer: wrap gracefully on 390px */
  .tm-footer{flex-wrap:wrap;gap:4px}
  /* Task row due date: don't force fixed width when wrapping */
  .task-row .tr-due{width:auto;min-width:48px}
  /* Calendar: super compact at 390px */
  .cal-day{min-height:52px;padding:2px}
  .cal-header{padding:3px 2px;font-size:12px}
  .cal-task{padding:2px 4px;font-size:12px}
  .cal-day-num{font-size:12px;margin-bottom:2px}
  /* Kanban: extra compact cards */
  .task-card .task-title{font-size:12px}
  /* Linear modal sidebar props: wrap tightly */
  .linear-prop{min-width:90px}
}

/* SKIP LINK (#14 accessibility) */
.skip-link{position:absolute;top:-40px;left:0;background:var(--accent);color:#fff;padding:8px 16px;z-index:1000;font-size:14px;text-decoration:none;border-radius:0 0 var(--r3) 0;transition:top .2s}
.skip-link:focus,.skip-link:focus-visible{top:0;outline:3px solid #fff;outline-offset:-3px}

/* MICRO-INTERACTIONS (#20) */
.btn:active{transform:scale(.97)}
.nav-icon:active{transform:scale(.93)}
@keyframes taskComplete{0%{transform:scale(1)}50%{transform:scale(1.05)}100%{transform:scale(1)}}
.task-card.just-completed{animation:taskComplete .3s ease}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px);max-height:0}to{opacity:1;transform:translateY(0);max-height:200px}}
.kanban-col .task-card:first-child{animation:slideDown .2s ease}
@keyframes progressPulse{0%{box-shadow:0 0 0 0 rgba(47,163,100,.3)}70%{box-shadow:0 0 0 8px rgba(47,163,100,0)}100%{box-shadow:0 0 0 0 rgba(47,163,100,0)}}
.kanban-progress-fill.celebrating{animation:progressPulse .6s ease}

/* MOBILE MENU */
.mobile-menu-btn{display:none;position:fixed;top:10px;left:10px;z-index:102;width:44px;height:44px;border-radius:var(--r3);background:var(--card);border:1px solid var(--border);color:var(--text);font-size:20px;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-md)}

/* TASK DETAIL MODAL (slide-over by default) — when the modal is in slide-over
   mode the backdrop fades to almost-transparent so the underlying kanban
   stays useful. The modal itself still gets a strong shadow to detach. */
.modal-overlay.slide-over{background:rgba(0,0,0,.18);align-items:flex-start;justify-content:flex-end}
.modal-overlay.slide-over .modal{margin:24px 24px 24px auto;max-height:calc(100vh - 48px)}
@media(max-width:768px){
  .modal-overlay.slide-over{align-items:flex-start;justify-content:center}
  .modal-overlay.slide-over .modal{margin:0;max-height:100vh}
}

.modal-overlay .modal.modal-linear{max-width:820px;width:92vw;padding:0;overflow-y:auto;border-radius:var(--r5);border:1px solid var(--border2)}
.linear-header{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;border-bottom:1px solid var(--border)}
.linear-breadcrumb{font-size:12.5px;color:var(--t3);display:flex;align-items:center;gap:9px}
.linear-breadcrumb .mi{width:14px;height:14px}
.lb-client{color:var(--accent);font-weight:600;cursor:pointer}
.lb-client:hover{text-decoration:underline}
.lb-sep{color:var(--t3)}
.lb-status{font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;border-radius:6px;padding:3px 8px}
.lb-status-todo{color:var(--blue);background:rgba(76,141,255,.14)}
.lb-status-inprogress{color:var(--amber);background:rgba(212,148,42,.14)}
.lb-status-review{color:var(--purple);background:rgba(155,108,255,.14)}
.lb-status-done{color:var(--green);background:rgba(47,163,100,.14)}
.lb-status-backburner{color:var(--t2);background:var(--pill)}
.linear-header-actions{display:flex;gap:8px;align-items:center}
.linear-header-actions button{background:none;border:none;color:var(--t3);cursor:pointer;width:28px;height:28px;border-radius:var(--r2);display:flex;align-items:center;justify-content:center;transition:all .15s;font-size:15px}
.linear-header-actions button:hover{background:var(--border);color:var(--t1)}
/* Text actions (Copy Brief / Delete) must not be squished into 28px squares */
.linear-header-actions .copy-brief-btn{width:auto;height:28px;padding:0 11px;white-space:nowrap;font-size:12px;font-weight:600;color:var(--t2);border:1px solid var(--border);border-radius:8px}
.linear-header-actions .copy-brief-btn:hover{background:var(--chip);color:var(--t1)}
.linear-header-actions .cm-delete-client-btn{color:var(--red);border-color:transparent}
.linear-header-actions .cm-delete-client-btn:hover{background:rgba(224,85,76,.1);color:var(--red)}
.linear-body{display:flex;max-height:72vh;overflow:hidden}
.linear-main{flex:1;padding:24px 28px;overflow-y:auto;overflow-x:hidden;min-height:0;min-width:0}
.linear-title-row{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.linear-status-dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--text3);flex-shrink:0;margin-top:5px;cursor:pointer;transition:all .2s}
.linear-status-dot:hover{border-color:var(--green);background:rgba(47,163,100,.1)}
.linear-status-dot.done{background:var(--green);border-color:var(--green)}
.linear-title{width:100%;background:none;border:none;color:var(--text);font-size:22px;font-weight:700;font-family:Inter,sans-serif;letter-spacing:-.3px;outline:none;padding:0;line-height:1.3;resize:none;overflow:hidden;word-break:break-word;overflow-wrap:break-word;display:block}
.linear-title::placeholder{color:var(--text3)}
.linear-client-link{font-size:13px;color:var(--blue);font-weight:500;margin-left:30px;margin-bottom:8px;cursor:pointer;text-decoration:underline;text-underline-offset:2px;display:inline-block}
.linear-client-link:hover{color:var(--accent)}
.linear-desc{width:100%;background:none;border:none;color:var(--text2);font-size:14px;font-family:Inter,sans-serif;line-height:1.6;outline:none;resize:vertical;padding:0;margin-left:30px;margin-bottom:12px;min-height:40px;max-width:calc(100% - 30px);overflow:hidden}
.linear-desc:focus{color:var(--text)}
.linear-desc::placeholder{color:var(--text3)}
.linear-desc-preview{position:relative;padding:6px 8px;border-radius:var(--r2);border:1px solid transparent;transition:all .15s;margin-left:30px;font-size:13px;color:var(--text2);line-height:1.6;margin-bottom:12px;max-width:calc(100% - 30px);word-break:break-word}
.linear-desc-preview:hover{background:var(--bg2);border-color:var(--border)}
.desc-edit-btn{display:none;background:none;border:1px solid var(--border);border-radius:var(--r2);font-size:12px;color:var(--text3);margin-top:8px;padding:4px 10px;cursor:pointer;align-items:center;gap:4px;font-family:Inter,sans-serif;transition:all .15s}
.desc-edit-btn:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-dim)}
.linear-desc-preview:hover .desc-edit-btn{display:inline-flex}
.linear-desc-preview.hidden{display:none}
.linear-desc-preview a{color:var(--blue);text-decoration:underline;text-underline-offset:2px;word-break:break-all}
.linear-desc-preview a:hover{color:var(--accent)}
/* Rich link embeds (Loom, YouTube, Notion, Google Docs, Figma) */
.rich-embed{display:block;margin:8px 0;border:1px solid var(--border);border-radius:var(--r3);overflow:hidden;background:var(--bg);transition:border-color .15s}
.rich-embed:hover{border-color:var(--border3)}
a.rich-embed{text-decoration:none;color:inherit;cursor:pointer}
a.rich-embed:hover{color:inherit}
.embed-header{display:flex;align-items:center;gap:6px;padding:8px 12px;font-size:12px;font-weight:600;color:var(--text2);border-bottom:1px solid var(--border);background:var(--card);letter-spacing:.2px;text-transform:uppercase}
.embed-video{position:relative;width:100%;aspect-ratio:16/9;background:#000}
.embed-video iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none;border-radius:0 0 var(--r3) var(--r3)}
/* Notion link card */
.notion-link{border-left:3px solid #fff}
.notion-link .embed-header{text-transform:none;letter-spacing:0}
.notion-title{padding:8px 12px 2px;font-size:14px;font-weight:600;color:var(--text);line-height:1.3}
.notion-url{padding:2px 12px 8px;font-size:12px;color:var(--text3);word-break:break-all}
/* Google Docs card */
.gdoc-link{border-left:3px solid var(--blue)}
.gdoc-link .embed-header{text-transform:none;letter-spacing:0}
/* Figma card */
.figma-link{border-left:3px solid #a259ff}
.figma-link .embed-header{text-transform:none;letter-spacing:0}
/* Loom specific */
.loom-embed{border-left:3px solid #625df5}
.loom-embed .embed-header svg{color:#625df5}
/* YouTube specific */
.yt-embed{border-left:3px solid #ff0000}
.yt-embed .embed-header svg{color:#ff0000}
.figma-link .embed-header{color:#a259ff}
.gdoc-link--document .embed-header{color:#4285f4}
.gdoc-link--document{border-left-color:#4285f4}
.gdoc-link--spreadsheets .embed-header{color:#0f9d58}
.gdoc-link--spreadsheets{border-left-color:#0f9d58}
.gdoc-link--presentation .embed-header{color:#f4b400}
.gdoc-link--presentation{border-left-color:#f4b400}
/* Description formatting toolbar */
.desc-editor-wrap{position:relative}
.desc-editor-wrap .linear-desc{margin-left:0;max-width:100%}
.desc-toolbar{display:flex;gap:3px;padding:4px 0;margin-bottom:2px;border-bottom:1px solid var(--border);align-items:center}
.desc-tb-btn{background:none;border:1px solid transparent;color:var(--text3);border-radius:var(--r1);padding:2px 7px;font-size:12px;cursor:pointer;font-family:Inter,sans-serif;transition:all .12s;line-height:1.4}
.desc-tb-btn:hover{background:var(--bg);border-color:var(--border);color:var(--text)}
.desc-tb-sep{width:1px;height:14px;background:var(--border);margin:0 2px}

/* COMMENT NOTIFICATION BADGE */
.comment-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:500;color:var(--t3);background:none;padding:0;border-radius:0;white-space:nowrap}
.comment-badge .mi{width:13px;height:13px}
.unread-badge{background:var(--accent);color:#fff;font-size:12px;font-weight:700;padding:2px 6px;border-radius:10px;animation:pulse-unread 2s infinite}
@keyframes pulse-unread{0%,100%{opacity:1}50%{opacity:.7}}

/* @MENTION AUTOCOMPLETE */
.mention-dropdown{position:absolute;bottom:100%;left:0;right:0;background:var(--card2);border:1px solid var(--border2);border-radius:var(--r3);box-shadow:var(--shadow-lg);z-index:300;max-height:200px;overflow-y:auto;display:none;margin-bottom:4px}
.mention-dropdown.active{display:block}
.mention-opt{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;transition:background .1s;font-size:13px}
.mention-opt:hover,.mention-opt.selected{background:var(--card-hover)}
.mention-opt .mention-avatar{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0}
.mention-opt .mention-name{font-weight:500}
.mention-tag{color:var(--blue);font-weight:600}

/* ATTACHMENT DROP ZONE */
.attachment-dropzone{border:2px dashed var(--border2);border-radius:var(--r3);padding:20px;text-align:center;cursor:pointer;transition:all .2s;background:transparent;margin-bottom:8px}
.attachment-dropzone:hover{border-color:var(--blue);background:rgba(76,141,255,.04)}
.attachment-dropzone.dragover{border-color:var(--blue);background:rgba(76,141,255,.08);box-shadow:0 0 0 3px rgba(76,141,255,.1)}
.attachment-dropzone-icon{font-size:24px;margin-bottom:6px;opacity:.5}
.attachment-dropzone-text{font-size:13px;color:var(--text2)}
.attachment-dropzone-hint{font-size:12px;color:var(--text3);margin-top:4px}
.attachment-upload-progress{height:3px;background:var(--border);border-radius:2px;overflow:hidden;margin-top:6px}
.attachment-upload-fill{height:100%;background:var(--blue);border-radius:2px;transition:width .3s}

.linear-comments{padding-top:12px}
.linear-section-title{font-size:13px;font-weight:600;color:var(--text2);margin-bottom:12px;display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none}
.linear-section-title span{color:var(--text3);font-size:12px}
.linear-comment{display:flex;gap:10px;margin-bottom:14px}
.linear-comment-avatar{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0;overflow:hidden}
.linear-comment-meta{font-size:12px;margin-bottom:2px}
.linear-comment-meta strong{color:var(--text)}
.linear-comment-meta span{color:var(--text3);font-size:12px;margin-left:6px}
.linear-comment-text{font-size:13px;color:var(--text);line-height:1.5}
.comment-delete-btn{background:none;border:none;color:var(--text3);cursor:pointer;font-size:14px;padding:0 4px;margin-left:8px;opacity:0;transition:opacity .15s,color .15s}
.linear-comment:hover .comment-delete-btn{opacity:1}
.comment-delete-btn:hover{color:var(--red)}
.group-chevron{font-size:18px;font-weight:700;color:var(--text3);display:inline-block;transition:transform .2s}
.linear-comment-input{display:flex;gap:10px;align-items:flex-start;margin-top:10px}
.linear-comment-input .lci-avatar{width:30px;height:30px;border-radius:50%;background:var(--border2);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--text2);flex-shrink:0;margin-top:6px}
.linear-comment-input .lci-field{flex:1;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r3);overflow:visible;transition:border-color .15s,box-shadow .15s}
.linear-comment-input .lci-field:focus-within{border-color:var(--accent);box-shadow:0 0 0 2px rgba(76,141,255,.12)}
.linear-comment-input .lci-field.dragover{border-color:var(--accent);background:var(--accent-dim)}
.linear-comment-input textarea{width:100%;background:none;border:none;color:var(--text);font-size:13px;font-family:Inter,sans-serif;padding:10px 12px 6px;resize:none;outline:none;min-height:38px}
.linear-comment-input .lci-bar{display:flex;justify-content:flex-end;padding:4px 8px 6px;gap:4px}
.linear-comment-input .lci-bar button{background:none;border:none;color:var(--text3);cursor:pointer;font-size:14px;padding:2px 4px;border-radius:var(--r1);transition:all .15s}
.linear-comment-input .lci-bar button:hover{color:var(--text)}
.linear-comment-input .lci-bar .post-btn{background:var(--accent);color:#fff;border-radius:var(--r2);padding:3px 14px;font-size:12px;font-weight:600;font-family:Inter,sans-serif}
.lci-attach-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--r2);margin-right:auto;cursor:pointer;color:var(--text3);transition:all .15s}
.lci-attach-btn:hover{background:var(--border);color:var(--text)}
/* Pending comment file staging */
.comment-pending-files{padding:4px 8px 0}
.cpf-item{display:flex;align-items:center;gap:6px;padding:6px 8px;margin-bottom:4px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r2);font-size:12px}
.cpf-icon{flex-shrink:0;display:flex;align-items:center}
.cpf-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);font-weight:500}
.cpf-size{color:var(--text3);flex-shrink:0}
.cpf-remove{background:none;border:none;color:var(--text3);cursor:pointer;font-size:16px;padding:0 4px;transition:color .15s;flex-shrink:0;line-height:1}
.cpf-remove:hover{color:var(--red)}
.cpf-image-item{position:relative;display:inline-block;margin-bottom:4px;border:1px solid var(--border);border-radius:var(--r3);overflow:hidden;background:var(--bg)}
.cpf-image-preview{display:block;max-width:100%;max-height:120px;object-fit:contain;border-radius:var(--r3) var(--r3) 0 0}
.cpf-image-info{display:flex;align-items:center;gap:6px;padding:4px 8px;font-size:12px}
.cpf-image-item .cpf-remove{position:absolute;top:4px;right:4px;background:rgba(0,0,0,.6);color:#fff;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:14px;padding:0;opacity:0;transition:opacity .15s}
.cpf-image-item:hover .cpf-remove{opacity:1}
.cpf-image-item .cpf-remove:hover{background:var(--red);color:#fff}
/* Comment attachments (rendered in posted comments) */
.comment-attachments{margin-top:8px}
.comment-att-img{cursor:pointer;border-radius:var(--r3);overflow:hidden;border:1px solid var(--border);transition:border-color .15s;margin-bottom:6px}
.comment-att-img:hover{border-color:var(--accent)}
.comment-att-img img{display:block;max-width:100%;max-height:300px;object-fit:contain}
.comment-att-file{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r2);cursor:pointer;font-size:12px;transition:all .15s;margin-bottom:4px;margin-right:4px}
.comment-att-file:hover{border-color:var(--accent);background:var(--card-hover)}
.comment-att-icon{flex-shrink:0;display:flex;align-items:center}
.comment-att-name{color:var(--text);font-weight:500;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.comment-att-size{color:var(--text3);font-size:12px;flex-shrink:0}
.linear-comment-input .lci-bar .post-btn:hover{filter:brightness(1.1)}

/* Sidebar */
.linear-sidebar{width:230px;padding:20px 16px;flex-shrink:0;overflow-y:auto;overflow-x:hidden;border-left:1px solid var(--border);display:flex;flex-direction:column}
.linear-prop{margin-bottom:14px}
.linear-prop-label{font-size:12px;color:var(--text3);margin-bottom:4px;font-weight:400}
.linear-prop-value{font-size:13px;color:var(--text2);display:flex;align-items:center;gap:5px}
/* (native selects removed — using custom dropdowns) */
.linear-sidebar-actions{margin-top:auto;padding-top:14px}
.linear-sidebar-actions button{background:none;border:none;color:var(--text3);font-size:12px;cursor:pointer;padding:6px 0;font-family:Inter,sans-serif;transition:color .15s;display:flex;align-items:center;gap:6px;width:100%;justify-content:flex-start}
.linear-sidebar-actions button:hover{color:var(--text)}
.linear-sidebar-actions .duplicate-task-btn:hover{color:var(--accent)}
.linear-sidebar-actions .delete-task-btn{color:var(--red);opacity:.7}
.linear-sidebar-actions .delete-task-btn:hover{color:var(--red);opacity:1}

/* CUSTOM DROPDOWNS */
.cdd{position:relative}
.cdd-trigger{font-size:14px;color:var(--text);cursor:pointer;padding:4px 0;display:flex;align-items:center;gap:4px;transition:color .15s;user-select:none}
.cdd-trigger:hover{color:var(--accent)}
.cdd-chev{color:var(--text3);font-size:12px;margin-left:auto;transition:transform .15s}
.cdd-menu{display:none;position:fixed;min-width:180px;max-height:280px;overflow-y:auto;background:var(--card2);border:1px solid var(--border2);border-radius:var(--r3);padding:4px;z-index:9999;box-shadow:var(--shadow-lg);animation:fadeIn .12s ease}
.cdd-menu.open{display:block}
.cdd-opt{padding:8px 12px;font-size:13px;border-radius:var(--r2);cursor:pointer;color:var(--text2);transition:all .1s;display:flex;align-items:center;gap:8px}
.cdd-opt:hover{background:var(--card-hover);color:var(--text)}
.cdd-opt.active{color:var(--text);background:var(--accent-dim)}

/* CUSTOM DATE PICKER */
.cdd-datepicker{width:280px;padding:0;overflow-y:auto;max-height:440px;position:fixed;z-index:300}
.dp-shortcuts{padding:8px;border-bottom:1px solid var(--border)}
.dp-sc{display:flex;align-items:center;gap:8px;padding:7px 10px;font-size:13px;border-radius:var(--r2);cursor:pointer;color:var(--text);transition:background .1s}
.dp-sc:hover{background:var(--card-hover)}
.dp-sc-r{margin-left:auto;color:var(--text3);font-size:12px}
.dp-nav{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 6px}
.dp-month{font-size:14px;font-weight:600}
.dp-arrows{display:flex;gap:2px}
.dp-arrows button{background:none;border:none;color:var(--text2);cursor:pointer;width:32px;height:32px;border-radius:var(--r2);font-size:16px;display:flex;align-items:center;justify-content:center;transition:all .1s}
.dp-arrows button:hover{background:var(--border);color:var(--text)}
.dp-arrows button:active{transform:scale(.92)}
.dp-arrows button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
@media(max-width:600px){.dp-arrows button{width:44px;height:44px}}
.dp-grid{padding:4px 8px 8px}
.dp-head{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;margin-bottom:4px}
.dp-head span{font-size:12px;color:var(--text3);padding:4px 0;font-weight:500}
.dp-days{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;gap:2px}
.dp-day,.dp-empty{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:13px;cursor:pointer;transition:all .1s;color:var(--text);margin:0 auto}
.dp-day:hover{background:var(--border)}
.dp-day.dp-today{color:var(--accent);font-weight:700}
.dp-day.dp-sel{background:var(--accent);color:#fff;font-weight:600}
.dp-day.dp-sel:hover{background:var(--accent);filter:brightness(1.1)}
.dp-day.dp-past{color:var(--text3)}
.dp-empty{cursor:default}

/* linear modal mobile handled in 768px breakpoint */

/* KEYBOARD SHORTCUTS HELP MODAL */
.shortcuts-grid{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s4)}
.shortcut-row{display:flex;align-items:center;justify-content:space-between;padding:var(--s3);background:var(--bg);border:1px solid var(--border);border-radius:var(--r3);transition:all .15s}
.shortcut-row:hover{background:var(--card);border-color:var(--border2)}
.shortcut-keys{display:flex;align-items:center;gap:var(--s1);font-size:13px;font-weight:600}
.shortcut-desc{color:var(--text2);font-size:13px}
.shortcuts-section-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text3);padding:var(--s3) 0 0;margin-top:var(--s2);border-top:1px solid var(--border)}
/* kbd uses Inter elsewhere; in the shortcuts modal we want monospace for
   distinct affordance — the previous fallback chain put 'Inter' first. */
.shortcuts-grid kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.shortcuts-trigger-btn{background:transparent;border:1px solid var(--border);color:var(--text2);border-radius:var(--r2);padding:6px 8px;cursor:pointer;display:flex;align-items:center;transition:all .15s;font-family:inherit}
.shortcuts-trigger-btn:hover{border-color:var(--text2);color:var(--text);background:var(--card)}
kbd{background:rgba(255,255,255,.05);border:1px solid var(--border2);border-radius:var(--r2);padding:4px 8px;font-size:12px;font-family:monospace;box-shadow:0 2px 0 rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.06);min-width:32px;text-align:center;display:inline-block}

/* ===== LIGHT THEME (#29) =====
   Activated explicitly via [data-theme="light"], or automatically when the
   user has prefers-color-scheme: light AND has not set a theme override.
   The data-theme="dark" attribute on <html> opts out of system-driven light
   so users with an OS light preference can still keep the dark dashboard. */
@media (prefers-color-scheme: light){
  html:not([data-theme="dark"]):not([data-theme="light"]){
    --shell:#f5f6f8;--card:#ffffff;--chip:#f3f4f6;--pill:#eef0f3;--track:#e8eaee;
    --t1:#1c2025;--t2:#5d646d;--t3:#616973;
    --gold:#b07d18;--goldBd:#e8d9b0;--amber:#b07d18;
    --bg:#f5f6f8;--bg2:#eef0f3;
    --card2:#f3f4f6;--card-hover:#eef0f3;
    --board-card-hover:#f7f8fa;--board-card-sel:#eaf2ff;
    --border:#e6e8ec;--border2:#d5d8df;--border3:#b9bec7;
    --text:#1c2025;--text2:#5d646d;--text3:#616973;
    --accent:#4c8dff;--accent-dim:rgba(76,141,255,.10);--accent-sel:rgba(76,141,255,.18);
    --blue:#4c8dff;--purple:#7c5cff;--green:#2fa364;--orange:#b07d18;--red:#d6453c;
    --danger:#d6453c;--danger-dim:rgba(214,69,60,.10);
    /* Text-safe accent pairs, LIGHT. The dark values (#4cc98a / #ef8078) are
       2.09:1 and 2.62:1 on white — these clear AA on every light surface the
       leaderboard uses, INCLUDING the tinted chips it paints them on, which
       is what --green-txt #177a46 did not: composited on the rollout chip's
       rgba(47,163,100,.12) over a hovered row it read 4.20:1, a failure the
       old test could not see because it measured the raw surfaces only
       (see tests/unit/css-contrast.test.mjs). */
    --green-txt:#146b3d;--red-txt:#b3382f;
    --gold-txt:#7e590d;--orange-txt:#8a5c0f;--accent-txt:#1a56c4;
    --band-strong:#6a45e0;--band-strong-txt:#5b36d1;
    --gradient-accent:linear-gradient(135deg,#7c5cff,#4c8dff);
    --gradient-success:linear-gradient(135deg,#2fa364,#4c8dff);
    --shadow-sm:0 1px 3px rgba(15,26,51,.06);
    --shadow-md:0 4px 14px rgba(15,26,51,.08);
    --shadow-lg:0 18px 50px rgba(15,26,51,.14);
    --shadow-glow:0 0 0 1px rgba(76,141,255,.18);
  }
}
[data-theme="light"]{
  --board-card-hover:#f7f8fa;--board-card-sel:#eaf2ff;
  --shell:#f5f6f8;--card:#ffffff;--chip:#f3f4f6;--pill:#eef0f3;--track:#e8eaee;
  --t1:#1c2025;--t2:#5d646d;
  /* design t3 (#9298a1) fails AA on white; --t3 darkened to #616973 for the
     uppercase micro-labels (2026-08-16 — the earlier #767d87 was still only
     4.16:1 on white / 3.39:1 on --border chips). Same palette entry as
     --text3, matching the dark theme's t3 === text3 alias; clears 4.53–5.56:1
     on every light surface (see tests/unit/css-contrast.test.mjs). */
  --t3:#616973;
  --gold:#b07d18;--goldBd:#e8d9b0;--amber:#b07d18;
  --bg:#f5f6f8;--bg2:#eef0f3;
  --card2:#f3f4f6;--card-hover:#eef0f3;
  --border:#e6e8ec;--border2:#d5d8df;--border3:#b9bec7;
  /* --text3 darkened #6b7280 → #616973 (2026-08-09): the old value passed AA
     only on white --card (4.83:1), failing --bg 4.47:1 / --bg2 4.23:1 / the
     --border chip backgrounds 3.94:1. #616973 clears 4.53–5.56:1 on every
     light surface (see tests/unit/css-contrast.test.mjs). */
  --text:#1c2025;--text2:#5d646d;--text3:#616973;
  --accent:#4c8dff;--accent-dim:rgba(76,141,255,.10);--accent-sel:rgba(76,141,255,.18);
  --blue:#4c8dff;--purple:#7c5cff;--green:#2fa364;--orange:#b07d18;--red:#d6453c;
  --danger:#d6453c;--danger-dim:rgba(214,69,60,.10);
  /* Text-safe accent pairs, LIGHT — see the note in the media-query block. */
  --green-txt:#146b3d;--red-txt:#b3382f;
  --gold-txt:#7e590d;--orange-txt:#8a5c0f;--accent-txt:#1a56c4;
  --band-strong:#6a45e0;--band-strong-txt:#5b36d1;
  --gradient-accent:linear-gradient(135deg,#7c5cff,#4c8dff);
  --gradient-success:linear-gradient(135deg,#2fa364,#4c8dff);
  --shadow-sm:0 1px 3px rgba(15,26,51,.06);
  --shadow-md:0 4px 14px rgba(15,26,51,.08);
  --shadow-lg:0 18px 50px rgba(15,26,51,.14);
  --shadow-glow:0 0 0 1px rgba(76,141,255,.18);
}
[data-theme="light"] body{background:var(--bg);color:var(--text)}
/* Sidebar */
[data-theme="light"] .sidebar-left{background:var(--card);border-right-color:var(--border);box-shadow:1px 0 8px rgba(0,0,0,.06)}
[data-theme="light"] .sidebar-left .nav-icon{color:var(--text2)}
[data-theme="light"] .sidebar-left .nav-icon:hover{background:var(--card-hover);color:var(--text)}
[data-theme="light"] .sidebar-left .nav-icon.active{background:var(--accent-dim);color:var(--accent)}
/* Overlays */
[data-theme="light"] .modal-overlay{background:rgba(0,0,0,.3)}
[data-theme="light"] .confirm-overlay{background:rgba(0,0,0,.3)}
[data-theme="light"] .modal{background:var(--card);border-color:var(--border);box-shadow:0 16px 48px rgba(0,0,0,.12),0 0 0 1px rgba(0,0,0,.06)}
[data-theme="light"] .new-client-form .td-field input,
[data-theme="light"] .new-client-form .td-field select{box-shadow:inset 0 1px 2px rgba(0,0,0,.04)}
[data-theme="light"] .new-client-form .td-field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235d646d' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")}
/* Cards & surfaces */
[data-theme="light"] .task-card{background:var(--card);border-top-color:var(--border);border-right-color:var(--border);border-bottom-color:var(--border);box-shadow:var(--shadow-sm)}
[data-theme="light"] .task-card:hover{box-shadow:var(--shadow-md),0 0 0 1px rgba(0,0,0,.06);border-top-color:var(--border2);border-right-color:var(--border2);border-bottom-color:var(--border2)}
/* .kanban-col is a transparent, zero-padding gutter in dark mode (no visible
   box, so 0 padding is invisible) — light mode gives it a real fill + inset
   shadow below, which without padding reads as content clipped to the edge. */
[data-theme="light"] .kanban-col{background:var(--bg2);border-color:var(--border);padding:14px}
[data-theme="light"] .widget{box-shadow:var(--shadow-sm);border-color:var(--border)}
[data-theme="light"] .widget:hover{box-shadow:var(--shadow-md)}
[data-theme="light"] .client-pill{background:var(--card);border-color:var(--border);box-shadow:var(--shadow-sm)}
[data-theme="light"] .client-pill:hover{box-shadow:var(--shadow-md)}
/* Same transparent-gutter-becomes-a-visible-panel issue as .kanban-col above */
[data-theme="light"] .pipeline-stage{background:var(--card);border-color:var(--border);padding:14px}
/* Done cards */
[data-theme="light"] #cards-done .task-card{filter:saturate(.4);opacity:.6}
/* Skeleton */
[data-theme="light"] .skeleton{background:linear-gradient(90deg,#e2e4e9 25%,#d0d3da 50%,#e2e4e9 75%);background-size:200% 100%}
/* Dropdowns & popups */
[data-theme="light"] .cdd-menu{background:var(--card);border-color:var(--border);box-shadow:var(--shadow-lg)}
[data-theme="light"] .toast{background:var(--card);border-color:var(--border);box-shadow:var(--shadow-lg)}
[data-theme="light"] .search-results{background:var(--card);border-color:var(--border)}
[data-theme="light"] .notif-dropdown{background:var(--card);border-color:var(--border)}
/* Kbd */
[data-theme="light"] kbd{background:var(--bg2);border-color:var(--border);box-shadow:0 1px 0 var(--border2)}
/* Alert */
[data-theme="light"] .alert-banner{background:rgba(224,85,76,.04);border-color:rgba(224,85,76,.15)}
/* Finance */
[data-theme="light"] .fin-chart-card,[data-theme="light"] .fin-card,[data-theme="light"] .fin-kpi-card{background:var(--card);border-color:var(--border);box-shadow:var(--shadow-sm)}
[data-theme="light"] .fin-chart-card:hover,[data-theme="light"] .fin-card:hover,[data-theme="light"] .fin-kpi-card:hover{border-color:var(--border2)}
[data-theme="light"] .fin-tooltip{background:#fff;border-color:rgba(76,141,255,.18);box-shadow:0 12px 32px rgba(15,26,51,.12),0 2px 6px rgba(15,26,51,.06)}
/* Priority pills - darker for contrast on white */
/* Light priority pills: the tint lightens the background while the hue kept
   full saturation, so every pill landed 2.3-3.8:1 THROUGH this override.
   The tints are unchanged; only the ink moves to the AA-safe variants. */
[data-theme="light"] .priority-pill.critical{background:var(--red-txt);color:#fff}
[data-theme="light"] .priority-pill.high{background:rgba(220,38,38,.1);color:var(--red-txt)}
[data-theme="light"] .priority-pill.medium{background:rgba(217,119,6,.1);color:var(--orange-txt)}
[data-theme="light"] .priority-pill.low{background:rgba(37,99,235,.1);color:var(--accent-txt)}
[data-theme="light"] .priority-pill.done{background:rgba(22,163,74,.1);color:var(--green-txt)}
/* Priority pill hover ripple — a 20%-white burst is invisible over the pale
   light-mode tints above; darken it instead so the micro-interaction survives */
[data-theme="light"] .priority-pill::after{background:rgba(0,0,0,.1)}
/* Misc */
[data-theme="light"] .col-header{padding-bottom:var(--s2)}
[data-theme="light"] .checklist-item:hover{background:rgba(0,0,0,.03)}
[data-theme="light"] .cm-tab:hover{background:rgba(0,0,0,.02)}
/* Sidebar & nav hover - fix invisible white-alpha on light bg */
[data-theme="light"] .sidebar-left .nav-icon:hover{background:rgba(0,0,0,.06);color:var(--text)}
[data-theme="light"] .notification-bell:hover{background:rgba(0,0,0,.04);border-color:var(--border2);color:var(--text)}
/* Table & list zebra / hover rows */
[data-theme="light"] .cron-table tbody tr:nth-child(even){background:rgba(0,0,0,.02)}
[data-theme="light"] .task-row:hover{background:rgba(0,0,0,.03);border-color:var(--border)}
[data-theme="light"] .ad-table th,[data-theme="light"] .ad-table td{border-bottom-color:rgba(0,0,0,.06)}
[data-theme="light"] .ad-table th{background:rgba(0,0,0,.02)}
[data-theme="light"] .ad-table tbody tr:hover{background:rgba(0,0,0,.02)}
[data-theme="light"] .clients-table tbody tr:nth-child(even){background:rgba(0,0,0,.02)}
/* Inline edit hover */
[data-theme="light"] .inline-edit:hover{background:rgba(0,0,0,.02)}

/* Badges that used white-alpha */
[data-theme="light"] .rt-paused-badge{background:rgba(0,0,0,.05)}
/* Client-modal task rows — white-alpha hover/divider are invisible on white */
[data-theme="light"] .client-task-row{border-bottom-color:rgba(0,0,0,.06)}
[data-theme="light"] .client-task-row:hover{background:rgba(0,0,0,.03)}
/* Client-modal task list (cm-task-row) — same invisible-white-divider bug as
   client-task-row above */
[data-theme="light"] .cm-task-row{border-bottom-color:rgba(0,0,0,.06)}
/* Kbd inset shadow fix */
[data-theme="light"] kbd{box-shadow:0 1px 0 var(--border2),inset 0 1px 0 rgba(255,255,255,.7)}
/* Client tag — darker text for readability on light bg */
[data-theme="light"] .client-tag{color:var(--text);background:#dfe3ea;font-weight:600}
/* Notion link — white border invisible on white cards */
[data-theme="light"] .notion-link{border-left-color:#2d2d2d}
/* Rich embeds — stronger contrast on light cards */
[data-theme="light"] .rich-embed{background:var(--card);border-color:var(--border2);box-shadow:0 1px 3px rgba(0,0,0,.06)}
[data-theme="light"] .rich-embed:hover{border-color:var(--border3)}
[data-theme="light"] .embed-header{color:var(--text);background:var(--bg2);border-bottom-color:var(--border2)}
[data-theme="light"] .notion-url{color:var(--text2)}
/* Figma embed — stronger accent border */
[data-theme="light"] .figma-link{border-left-color:#7c5cff}
/* Loom embed — stronger accent border */
[data-theme="light"] .loom-embed{border-left-color:#4b47d6}
/* Task card hover — remove invisible white-alpha glow */
[data-theme="light"] .task-card:hover{box-shadow:var(--shadow-md),0 0 0 1px rgba(0,0,0,.06)}
/* Task description — slightly darker for readability */
[data-theme="light"] .task-desc{color:var(--text2)}
/* Frequency badges — fix hardcoded light colors */
[data-theme="light"] .rt-freq-bidaily{color:var(--purple)}
[data-theme="light"] .rt-freq-biweekly{color:var(--blue)}
/* Frequency badge backgrounds — stronger tint on light bg */
[data-theme="light"] .rt-freq-daily{background:rgba(124,58,237,.12)}
[data-theme="light"] .rt-freq-weekly{background:rgba(37,99,235,.1)}
[data-theme="light"] .rt-freq-monthly{background:rgba(22,163,74,.1)}
/* Due date text — ensure readable */
[data-theme="light"] .task-due{color:var(--text2)}
[data-theme="light"] .task-due.overdue,[data-theme="light"] .tr-due.overdue{color:var(--red);font-weight:600}
[data-theme="light"] .task-due.due-soon{color:var(--orange);font-weight:600}
/* Task card state backgrounds — restore tinted bg clobbered by light .task-card */
[data-theme="light"] .task-card.stuck-review{background:rgba(217,119,6,.06)}
[data-theme="light"] .task-card.recurring-task-card{background:rgba(124,58,237,.05)}
[data-theme="light"] .task-card.recurring-task-card.rt-completed-today{background:rgba(22,163,74,.05)}
/* Stuck badge — stronger on light bg */
[data-theme="light"] .stuck-badge{background:rgba(217,119,6,.12);color:#b45309}
/* Description links — stronger tint + ensure chip text readable */
[data-theme="light"] .task-desc-url{background:rgba(0,0,0,.06);color:var(--blue);font-weight:600}
[data-theme="light"] .task-desc-url:hover{background:rgba(0,0,0,.1)}
/* Kanban column — subtle depth */
[data-theme="light"] .kanban-col{box-shadow:inset 0 1px 2px rgba(0,0,0,.04)}
/* Assignee badge — ensure white text stays readable */
[data-theme="light"] .task-assignee{box-shadow:0 1px 3px rgba(0,0,0,.15)}

/* Theme toggle button */
.theme-toggle-btn{background:transparent;border:1px solid var(--border);color:var(--text2);border-radius:var(--r2);padding:6px 8px;cursor:pointer;display:flex;align-items:center;transition:all .2s;font-family:inherit}
.theme-toggle-btn:hover{border-color:var(--text2);color:var(--text);background:var(--card)}
.theme-toggle-btn .mi{width:18px;height:18px}

/* PARSED TITLE PREVIEW */
.parsed-preview{min-height:20px;margin-top:6px;display:flex;gap:6px;flex-wrap:wrap}
.pp-tag{font-size:12px;padding:2px 8px;border-radius:10px;font-weight:500;animation:ppFadeIn .2s ease}
.pp-date{background:rgba(76,141,255,.15);color:var(--blue)}
.pp-client{background:rgba(245,166,35,.15);color:var(--gold)}
.pp-recur{background:rgba(155,108,255,.15);color:var(--purple)}
@keyframes ppFadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* SAVE BAR */
.linear-save-bar{display:flex;gap:8px;justify-content:flex-end;margin-top:12px;padding-top:12px;border-top:1px solid var(--border);animation:ppFadeIn .2s ease}

/* INLINE EDIT FIELDS */
.inline-edit{background:transparent;border:1px solid transparent;color:var(--text);padding:4px 8px;border-radius:var(--r2);font-size:13px;font-family:inherit;transition:all .2s}
.inline-edit:hover{border-color:var(--border2);background:rgba(255,255,255,.02)}
.inline-edit:focus{border-color:var(--blue);background:var(--bg);outline:none}
.inline-edit::placeholder{color:var(--text3)}
.client-contact-row{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.client-contact-row .inline-edit{font-size:12px;color:var(--text2);padding:4px 8px}

/* CLICKABLE DELIVERABLE CARDS */
.deliv-clickable{cursor:pointer;transition:border-color .15s,background .15s}
.deliv-clickable:hover{border-color:var(--blue);background:rgba(76,141,255,.05)}
.di-meta{display:flex;align-items:center;gap:6px;margin-top:4px}
.di-assignee{width:20px;height:20px;border-radius:50%;font-size:12px;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center}
/* Client modal — client tasks list */
.cm-task-count{font-size:12px;font-weight:400;color:var(--text3);text-transform:none;letter-spacing:0}
.cm-task-list{background:var(--bg);border-radius:var(--r3);overflow:hidden;border:1px solid var(--border)}
.cm-task-row{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:12px;border-bottom:1px solid rgba(255,255,255,.04)}
.cm-task-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.cm-task-name{flex:1}
.cm-task-status-label{font-size:12px;color:var(--text3);font-weight:500}

/* TEAM SETTINGS */
.team-members{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--s4)}
.team-card{background:var(--card);border:1px solid var(--border2);border-radius:var(--r4);padding:16px;transition:border-color .15s}
.team-card:hover{border-color:var(--border3)}
.team-card.inactive{opacity:.5}
.tm-header{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.tm-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;color:#fff;flex-shrink:0;overflow:hidden}
.tm-info{flex:1;min-width:0}
.tm-name{font-size:14px;font-weight:600}
.tm-email{font-size:12px;color:var(--text2);overflow:hidden;text-overflow:ellipsis}
.tm-role{font-size:12px;font-weight:600;padding:2px 8px;border-radius:10px;text-transform:uppercase;letter-spacing:.5px}
.tm-role-admin{background:rgba(224,85,76,.15);color:var(--red)}
.tm-role-manager{background:rgba(76,141,255,.15);color:var(--blue)}
.tm-role-viewer{background:rgba(102,102,102,.15);color:var(--text2)}
.tm-perms{display:flex;gap:6px;margin-bottom:10px}
.tm-perm{font-size:14px;opacity:.3;transition:opacity .15s}
.tm-perm.active{opacity:1}
.tm-footer{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text3);flex-wrap:wrap}
.tm-status{font-weight:500}.tm-status.online{color:var(--green)}.tm-status.offline{color:var(--text3)}
.tm-last{flex:1;min-width:50px}
.tm-actions{display:flex;gap:4px;align-items:center}
.tm-btn-edit{font-size:12px;background:transparent;border:1px solid var(--border2);color:var(--accent);cursor:pointer}
.tm-btn-edit:hover{background:var(--accent);color:#fff}
.tm-btn-delete{font-size:12px;background:transparent;border:1px solid var(--border2);color:var(--red);cursor:pointer}
.tm-btn-delete:hover{background:var(--red);color:#fff}
.tm-mytasks-badge{font-size:12px;color:var(--text3);display:flex;align-items:center;gap:4px;margin-bottom:8px;padding:3px 8px;background:rgba(76,141,255,.08);border-radius:6px;width:fit-content}
.tm-role-csm{background:rgba(47,163,100,.15);color:var(--green)}
.tm-role-media_buyer{background:rgba(249,115,22,.15);color:var(--orange)}
.tm-role-ghl{background:rgba(155,108,255,.15);color:var(--purple)}
.tm-role-video_editor{background:rgba(6,182,212,.15);color:#06b6d4}
.edit-member-avatar-section{display:flex;align-items:center;gap:16px;margin-bottom:16px;padding:12px;background:var(--bg2);border-radius:var(--r4)}
.edit-member-avatar-preview{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:24px;color:#fff;flex-shrink:0;overflow:hidden}
.edit-member-avatar-actions{flex:1;min-width:0}
.avatar-upload-row{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.avatar-or-divider{font-size:12px;color:var(--text3);text-align:center;margin-bottom:8px;position:relative}
.avatar-or-divider span{background:var(--bg2);padding:0 8px;position:relative;z-index:1}
.avatar-or-divider::before{content:'';position:absolute;top:50%;left:0;right:0;height:1px;background:var(--border)}
.perm-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;font-size:13px}
.perm-grid label{display:flex !important;align-items:center;gap:6px;cursor:pointer;padding:5px 0;margin-bottom:0;text-transform:none;letter-spacing:normal;font-size:13px;color:var(--text);font-weight:400;white-space:nowrap}
.perm-grid label input[type="checkbox"]{flex-shrink:0;margin:0;width:auto}
.perm-mytasks-label{display:flex !important;align-items:center;gap:6px;cursor:pointer;padding:5px 0;margin-bottom:0;text-transform:none !important;letter-spacing:normal;font-size:13px;color:var(--text);font-weight:400}
.perm-mytasks-label input[type="checkbox"]{flex-shrink:0;margin:0;width:auto}
.perm-tip{position:relative;display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:var(--border2);color:var(--text3);font-size:12px;font-weight:700;cursor:help;flex-shrink:0;margin-left:auto}
.perm-tip:hover{background:var(--blue);color:#fff}
.perm-tip .perm-tip-text{display:none;position:absolute;bottom:calc(100% + 6px);right:-4px;background:var(--card2);color:var(--text);font-size:12px;font-weight:400;padding:6px 10px;border-radius:var(--r2);border:1px solid var(--border2);white-space:normal;width:180px;text-align:left;z-index:10;box-shadow:var(--shadow-md);line-height:1.4}
.perm-tip:hover .perm-tip-text{display:block}

/* ACTIVITY LOG */
.activity-log-wrap{margin-top:8px;max-height:340px;overflow-y:auto;border:1px solid var(--border);border-radius:var(--r3);background:var(--card)}
.activity-empty{font-size:12px;color:var(--text3);padding:16px;text-align:center}
.activity-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--border);font-size:12.5px;transition:background .12s}
.activity-row:last-child{border-bottom:none}
.activity-row:hover{background:var(--card2)}
.ar-icon{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--bg);flex-shrink:0}
.ar-icon .mi{width:14px;height:14px}
.ar-user{font-weight:600;color:var(--text);flex-shrink:0}
.ar-action{font-weight:600;flex-shrink:0}
.ar-meta{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ar-entity{color:var(--text2)}
.ar-detail{color:var(--text);font-weight:500;margin-left:6px}
.ar-time{color:var(--text3);font-size:11.5px;flex-shrink:0;margin-left:auto;white-space:nowrap}

/* KEYBOARD SHORTCUTS */
.shortcuts-list{margin-top:16px}
.sc-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border);font-size:13px}
.sc-row kbd{background:var(--bg);border:1px solid var(--border2);border-radius:4px;padding:2px 8px;font-size:12px;font-family:monospace;min-width:40px;text-align:center}
.sc-row span{color:var(--text2)}

/* VIEW TOGGLE */
.view-toggle-btn{background:none;border:none;color:var(--text3);padding:4px 10px;border-radius:var(--r1);font-size:12px;cursor:pointer;transition:all .15s}
.view-toggle-btn.active{background:var(--accent);color:#fff}
.view-toggle-btn:hover:not(.active){color:var(--text)}

/* CALENDAR VIEW */
.cal-grid{display:grid;gap:1px;background:var(--border);min-width:0;overflow:hidden}
.cal-grid-weekly{grid-template-columns:repeat(7,minmax(0,1fr))}
.cal-grid-monthly{grid-template-columns:repeat(7,minmax(0,1fr))}
.cal-header{background:var(--card2);padding:6px 8px;font-size:12px;font-weight:600;text-align:center;color:var(--text2)}
.cal-day{background:var(--card);padding:6px;min-height:80px;font-size:12px;position:relative}
.cal-day.today{background:rgba(76,141,255,.08)}
.cal-day.other-month{opacity:.4}
.cal-day-num{font-weight:600;margin-bottom:4px;color:var(--text2)}
.cal-day-num.today{color:var(--accent);font-weight:700}
.cal-task{background:var(--card2);border-left:3px solid var(--border);border-radius:var(--r1);padding:2px 6px;margin-bottom:2px;font-size:12px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .15s}
.cal-task:hover{background:var(--border)}
.cal-task.high{border-color:var(--red)}
.cal-task.medium{border-color:var(--orange)}
.cal-task.low{border-color:var(--blue)}
.cal-task.done{opacity:.5;text-decoration:line-through}
.cal-nav{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.cal-nav button{background:none;border:1px solid var(--border);color:var(--text);border-radius:var(--r1);padding:4px 12px;cursor:pointer;font-size:12px}
.cal-nav button:hover{border-color:var(--accent);color:var(--accent)}
.cal-nav .cal-title{font-size:14px;font-weight:600}

.client-save-bar{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:10px 16px;background:rgba(224,149,74,.06);border:1px solid rgba(224,149,74,.15);border-radius:var(--r3);margin:0 24px 10px;animation:fadeIn .2s ease}
.client-save-bar .save-bar-label{font-size:12px;color:var(--orange);font-weight:500}
.client-save-bar .save-bar-btn{background:var(--green);color:#fff;font-weight:600}

/* CLIENT MODAL: extracted from inline styles */
.mi-sm{width:14px;height:14px}
.mi-xs-icon{width:12px;height:12px}
.cm-section--flush{border-top:none;margin-top:0;padding-top:0}
.cm-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cm-section-header h4{margin:0}
/* "How this client is set up" — the launch brief on the client record (launches.js renderClientSetupSection) */
.cm-setup{margin-bottom:16px}
.cm-setup-note{margin:0 0 8px;color:var(--text2);font-size:var(--fz-sm)}
.cm-setup-different{margin:0 0 10px;padding:8px 10px;border-left:3px solid var(--red);border-radius:var(--r2);background:var(--card2)}
.cm-setup-different-label{color:var(--red-txt);font-size:var(--fz-xs);font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:.04em}
.cm-setup-text{margin-top:2px;font-size:var(--fz-sm);white-space:pre-wrap;word-break:break-word}
.cm-setup-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px 16px;margin:0}
.cm-setup-row{min-width:0}
.cm-setup-row.is-long{grid-column:1/-1}
.cm-setup-row dt{color:var(--text2);font-size:var(--fz-xs)}
.cm-setup-row dd{margin:2px 0 0;font-size:var(--fz-sm);white-space:pre-wrap;word-break:break-word}
.cm-setup-row dd.is-missing{color:var(--text3);font-style:italic}
.cm-section-count{font-size:12px;color:var(--text3)}
.cm-flex-row{display:flex;align-items:center;gap:8px}
.cm-flex-row--wrap{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cm-client-initial{width:44px;height:44px;border-radius:var(--r4);background:linear-gradient(135deg,var(--accent),#c53030);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;color:#fff;flex-shrink:0}
.cm-client-name{font-size:21px;font-weight:700;margin:0;padding:2px 4px;width:100%;letter-spacing:-.01em}
.cm-csm-row{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:12px;color:var(--text3)}
.health-pct{font-size:12px;font-weight:500}
.cm-progress-track{height:3px;background:var(--border);border-radius:2px;margin-bottom:12px;overflow:hidden}
.cm-progress-fill{height:100%;background:var(--green);border-radius:2px;transition:width .3s}
.cm-checklist-wrap{background:var(--bg);border-radius:var(--r3);padding:4px;border:1px solid var(--border)}
.cm-onb-actions{display:flex;gap:6px;align-items:center}
.cm-onb-card{background:var(--bg);border-radius:var(--r3);padding:12px;border:1px solid var(--border);margin-bottom:8px}
.cm-onb-card.inactive{opacity:.5}
.cm-onb-card-header{display:flex;align-items:center;gap:8px}
.cm-onb-card-header.mb{margin-bottom:8px}
.cm-onb-title{font-size:13px;font-weight:600;flex:1}
.cm-onb-due{font-size:12px;color:var(--text3)}
.cm-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:12px}
.cm-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;font-size:12px}
.cm-grid-auto{display:grid;grid-template-columns:1fr auto;gap:10px;font-size:12px;margin-top:8px;align-items:end}
.cm-subsection-label{font-size:11px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.cm-hint{font-size:12px;color:var(--text3);margin-top:4px}
.cm-hint--mb{font-size:12px;color:var(--text3);margin-bottom:10px}
.cm-currency-wrap{position:relative}
.cm-currency-prefix,.cm-currency-suffix{position:absolute;top:50%;transform:translateY(-50%);color:var(--text3);font-size:12px;pointer-events:none}
.cm-currency-prefix{left:10px}
.cm-currency-suffix{right:10px}
.cm-currency-wrap input{padding-left:22px}
.cm-pif-display{padding:8px 10px;background:rgba(47,163,100,.06);border:1px solid rgba(47,163,100,.12);border-radius:var(--r2);color:var(--green);font-weight:700;font-size:14px}
.cm-check-label{display:flex;align-items:center;gap:6px;cursor:pointer}
.cm-check-label input[type="checkbox"]{accent-color:var(--green)}
.cm-contact-link{color:var(--blue);font-size:12px;text-decoration:none;display:inline-flex;align-items:center}
.cm-report-summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px}
.cm-report-summary h4{margin:0}
.cm-report-tag{font-size:10px;color:var(--text3);font-weight:400;text-transform:none;letter-spacing:0}
.cm-report-body{margin-top:12px}
.cm-platform-row{display:flex;gap:14px;margin-bottom:12px;font-size:12px}
.cm-assignee-chip{display:inline-flex;align-items:center;gap:3px;padding:1px 6px;border-radius:10px;font-size:12px;background:var(--border);color:var(--text)}
.cm-assignee-chip-remove{cursor:pointer;color:var(--text3)}
.cm-onb-select{font-size:12px;padding:3px 6px;background:var(--card);border:1px solid var(--border);border-radius:var(--r2);color:var(--text)}
.cm-onb-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px}
.cm-onb-flex{display:flex;gap:6px}
.cm-onb-assignee-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.cm-onb-card-header input[type="checkbox"]{accent-color:var(--green)}
.cm-onb-remove-btn{color:var(--red);padding:2px 6px;font-size:var(--fz-sm)}
.cm-onb-select--grow{flex:1;min-width:100px}
/* CASCADE: these three MUST stay scoped to `.td-field .x` (0-2-0). Every field they
   target sits inside a `.td-field`, and `.td-field input,.td-field textarea,.td-field
   select` (index.css:1134) is 0-1-1 — it beats a bare `.cm-onb-field-compact` (0-1-0)
   on the element component, no matter how late the bare rule is declared. Written
   bare (as they were from the 2026-07-18 run until 2026-08-08) they were INERT: the
   Deliverable Assignments fields silently rendered at the 13px / 8px-10px / 60px
   defaults instead of the compact sizes named here. Same defense as
   `.td-field textarea.rt-modal-desc` (index.css:2654). */

/* Onboarding-editor description box: 40px, against the `.td-field textarea`
   min-height:60px default (index.css:1136, 0-1-1) — hence the same `.td-field .x`
   scoping. Distinct from --textarea above, which is the 48px deliverable variant. */
/* Empty-state card inside a modal section: tighter than the 40px page-level default. */
.cm-ghl-row{display:flex;align-items:center;gap:16px;font-size:12px;margin-bottom:10px;flex-wrap:wrap}
.copy-brief-btn{font-size:12px;padding:2px 8px}
.cm-delete-client-btn{color:var(--red);border-color:color-mix(in srgb,var(--red) 35%,transparent)}
.cm-delete-client-btn:hover{background:color-mix(in srgb,var(--red) 12%,transparent)}
.cm-inline-select{max-width:130px;font-size:12px}
.cm-tz-label{color:var(--text3);font-weight:400;margin-left:6px}
.smart-input-wrap{position:relative}
.smart-input-highlight{position:absolute;top:0;left:0;right:0;bottom:0;padding:8px 10px;font-size:13px;font-family:Inter,system-ui,sans-serif;line-height:1.4;color:transparent;pointer-events:none;white-space:pre;overflow:hidden;border:1px solid transparent;border-radius:var(--r2)}
.smart-input-wrap .smart-input{position:relative;background:transparent;z-index:1;width:100%;caret-color:var(--text)}
mark.hl-client{background:rgba(155,108,255,.25);color:transparent;border-radius:3px;padding:0 1px}
mark.hl-date{background:rgba(224,85,76,.25);color:transparent;border-radius:3px;padding:0 1px}
mark.hl-recur{background:rgba(59,130,246,.25);color:transparent;border-radius:3px;padding:0 1px}

/* Mobile description editor overlay (Todoist-style) */
.mobile-desc-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:var(--bg);z-index:1000;flex-direction:column}
.mobile-desc-overlay.active{display:flex}
.mobile-desc-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--card)}
.mobile-desc-header h3{font-size:16px;font-weight:600;color:var(--text)}
.mobile-desc-close{background:none;border:none;color:var(--text3);font-size:20px;cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--r2);transition:all .15s}
.mobile-desc-close:hover{background:var(--border);color:var(--text)}
.mobile-desc-body{flex:1;padding:16px;overflow-y:auto}
.mobile-desc-body textarea{width:100%;height:100%;background:none;border:none;color:var(--text);font-size:16px;font-family:Inter,sans-serif;line-height:1.6;outline:none;resize:none}
.mobile-desc-body textarea::placeholder{color:var(--text3)}

/* FILE ATTACHMENTS */
.attachment-preview{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.attachment-item{display:flex;align-items:center;gap:12px;padding:10px;background:var(--card);border:1px solid var(--border);border-radius:var(--r3);transition:all .15s}
.attachment-item:hover{background:var(--card-hover);border-color:var(--border2)}
.attachment-item img{width:60px;height:60px;object-fit:cover;border-radius:var(--r2);cursor:pointer;transition:transform .15s}
.attachment-item img:hover{transform:scale(1.05)}
.attachment-icon{width:60px;height:60px;display:flex;align-items:center;justify-content:center;font-size:32px;background:var(--card2);border-radius:var(--r2);flex-shrink:0}
.attachment-info{flex:1;min-width:0}
.attachment-name{font-size:13px;font-weight:500;color:var(--text);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.attachment-name:hover{color:var(--blue);text-decoration:underline}
.attachment-meta{font-size:12px;color:var(--text3);margin-top:2px}
.attachment-delete{width:24px;height:24px;border-radius:var(--r2);background:none;border:none;color:var(--text3);font-size:18px;cursor:pointer;transition:all .15s;flex-shrink:0}
.attachment-delete:hover{background:var(--red);color:#fff}
.attachment-empty{padding:16px;text-align:center;color:var(--text3);font-size:13px;background:var(--card);border:1px dashed var(--border2);border-radius:var(--r3)}
/* Onboarding overlay */
.onboarding-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);z-index:9000;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .3s ease}
.onboarding-card{background:var(--card2);border:1px solid var(--border2);border-radius:var(--r4);padding:32px;max-width:420px;width:100%;box-shadow:var(--shadow-lg)}
.onboarding-header{text-align:center;margin-bottom:24px}
.onboarding-header h2{font-size:22px;font-weight:800;margin-top:12px;letter-spacing:-.5px}
.onboarding-steps{display:flex;flex-direction:column;gap:16px}
.onboarding-step{display:flex;gap:14px;align-items:flex-start;font-size:13px;line-height:1.5}
.onboarding-step-num{width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex-shrink:0}
.lightbox{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.95);z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px}
.lightbox img{max-width:90%;max-height:90%;object-fit:contain;border-radius:var(--r3);box-shadow:var(--shadow-lg)}
.lightbox button{position:absolute;top:20px;right:20px;width:40px;height:40px;border-radius:50%;background:var(--card);border:none;color:var(--text);font-size:24px;cursor:pointer;transition:all .15s}
.lightbox button:hover{background:var(--red);color:#fff;transform:scale(1.1)}
.attachment-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;padding:0;background:none;border:none;color:var(--t3);white-space:nowrap}
.attachment-badge .mi{width:13px;height:13px}

/* AGENT TASK BOARD */
.agent-board-wrap{display:flex;flex-direction:column;gap:12px}
.agent-board-row{background:var(--card);border:1px solid var(--border);border-radius:var(--r3);padding:10px}
.agent-board-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.agent-kpi{font-size:12px;color:var(--text2);background:var(--bg2);padding:2px 8px;border-radius:10px}
.agent-board-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.agent-col{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r2);padding:8px;min-height:80px}
.agent-col-title{font-size:12px;color:var(--text2);display:flex;justify-content:space-between;margin-bottom:6px}
.agent-task-chip{font-size:12px;background:var(--card2);border:1px solid var(--border2);padding:6px;border-radius:6px;margin-bottom:6px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agent-task-chip:hover{border-color:var(--border3)}
.agent-empty{font-size:12px;color:var(--text3)}

/* ===== FINANCE DASHBOARD ===== */
.fin-rate-bar{display:flex;align-items:center;gap:12px;padding:12px 20px;background:var(--card);border:1px solid var(--border);border-radius:14px;margin-bottom:24px;flex-wrap:wrap}
.fin-rate-label{font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.8px;white-space:nowrap}
.fin-kpi-cur{font-size:9px;font-weight:700;color:var(--text3);opacity:.6;letter-spacing:.5px;vertical-align:middle}
.fin-rate-input{width:80px;padding:6px 10px;border:1px solid var(--border2);border-radius:8px;background:var(--bg2);color:var(--text);font-size:13px;font-family:inherit;text-align:center;transition:border-color .2s,box-shadow .2s}
.fin-rate-input:focus{outline:none;border-color:#4c8dff;box-shadow:0 0 0 3px rgba(76,141,255,.15)}
.fin-rate-hint{font-size:13px;color:var(--text2)}
.fin-rate-note{font-size:11px;color:var(--text3);font-style:italic;margin-left:auto}
.fin-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.fin-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.fin-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px 20px;transition:border-color .16s}
.fin-card:hover{border-color:var(--border2)}
.fin-card-head{font-size:10.5px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:16px}
.fin-big-num{font-size:28px;font-weight:700;line-height:1;letter-spacing:-.5px;color:var(--text);font-variant-numeric:tabular-nums}
.fin-trend-badge{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;padding:3px 10px;border-radius:20px;margin-top:5px}
.fin-trend-badge.up{background:rgba(47,163,100,.12);color:#2fa364}
.fin-trend-badge.down{background:rgba(233,75,109,.12);color:#ec5a7e}
.fin-trend-badge.flat{background:var(--bg2);color:var(--text3)}
.fin-sparkline{width:100%;height:90px;display:block;overflow:visible;margin-top:8px}
.fin-sparkline-dates{display:flex;justify-content:space-between;font-size:11px;color:var(--text3);margin-top:4px;padding:0 2px}
.fin-metric-label{font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}
.fin-metric-value{font-size:28px;font-weight:700;line-height:1;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.fin-metric-sub{font-size:12px;color:var(--text2);margin-top:6px}
/* MRR Breakdown header row + period dropdown (Ludication-style) */
.fin-card-head-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.fin-card-head-row .fin-card-head{margin-bottom:0}
.fin-bd-period{background:var(--card2);color:var(--text2);border:1px solid var(--border);border-radius:8px;padding:5px 10px;font-size:12px;font-weight:600;font-family:inherit;cursor:pointer;transition:border-color .15s,color .15s}
.fin-bd-period:hover{border-color:var(--accent);color:var(--text)}
.fin-bd-period:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* Expected Payments — one total + a collected/outstanding bar, a
   needs-attention strip, a sortable ledger, and a collapsed "Not due this
   month" (2026-09 redesign). See CLAUDE.md "Expected Payments" for what every
   state and footnote means; the row states below mirror EP_STATE_ORDER. */
.ep-empty{color:var(--text3);font-size:13px;padding:10px 0;line-height:1.5}

/* Header: EXPECTED IN <MONTH>, the one total, the alarm pill + export. */
.ep-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}
.ep-head-label{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--t3);margin-bottom:9px}
.ep-total{display:flex;align-items:baseline;gap:10px}
.ep-total-val{font-size:38px;font-weight:700;line-height:1;letter-spacing:-1px;color:var(--t1);font-variant-numeric:tabular-nums}
.ep-total-cur{font-size:14px;font-weight:600;color:var(--t3)}
.ep-head-acts{display:flex;align-items:center;gap:8px;flex:none}
.ep-alarm-pill{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:var(--r2);border:1px solid rgba(224,85,76,.45);background:rgba(224,85,76,.1);color:var(--red);font-size:12px;font-weight:600;white-space:nowrap;cursor:pointer;font-variant-numeric:tabular-nums}
.ep-alarm-pill:hover{background:rgba(224,85,76,.18)}
.ep-alarm-dot{width:6px;height:6px;border-radius:50%;background:var(--red);flex:none}

/* Collected ↔ outstanding bar — the $41,462 total is now printed once. */
.ep-bar{display:flex;height:8px;border-radius:5px;overflow:hidden;background:var(--chip);margin-bottom:9px}
.ep-bar-got{display:block;height:100%;background:var(--green)}
/* Dimmed accent, deliberately — reads as "not yet real" beside the solid green. */
.ep-bar-out{display:block;height:100%;background:rgba(76,141,255,.42)}
.ep-legend{display:flex;align-items:center;gap:20px;font-size:12.5px;color:var(--t2);font-variant-numeric:tabular-nums;flex-wrap:wrap}
.ep-legend-item{display:flex;align-items:center;gap:7px}
.ep-legend-item strong{color:var(--t1);font-weight:600}
.ep-legend-swatch{width:7px;height:7px;border-radius:2px;flex:none}
.ep-legend-swatch.ep-legend-got{background:var(--green)}
.ep-legend-swatch.ep-legend-out{background:rgba(76,141,255,.42)}
.ep-sync{margin-left:auto;color:var(--t3)}

/* Needs-attention strip — a shortcut, never a removal: the same rows still
   appear in the ledger below, so nothing here can go missing from the list. */
.ep-alerts{margin-top:18px;border:1px solid rgba(224,85,76,.28);border-radius:var(--r3);background:rgba(224,85,76,.06);overflow:hidden}
.ep-alert{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;padding:11px 14px;border-top:1px solid rgba(224,85,76,.14)}
.ep-alert:first-child{border-top:none}
.ep-alert-who{display:flex;align-items:baseline;gap:9px;min-width:0}
.ep-alert-name{font-size:13px;font-weight:600;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ep-alert-why{font-size:12px;font-weight:500;color:var(--red);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ep-alert-amt{font-size:13px;font-weight:600;color:var(--t1);font-variant-numeric:tabular-nums;white-space:nowrap}
.ep-alert-acts{display:flex;gap:6px}
.ep-alert-btn{height:26px;padding:0 10px;border-radius:var(--r1);border:1px solid var(--border3);background:transparent;color:var(--t2);font-size:11.5px;font-weight:600;white-space:nowrap;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
.ep-alert-btn:hover{color:var(--t1);border-color:var(--t3)}
.ep-alert-btn.ep-primary{border-color:rgba(224,85,76,.5);background:rgba(224,85,76,.12);color:var(--red)}
.ep-alert-btn.ep-primary:hover{background:rgba(224,85,76,.2)}

/* Toolbar — filter segments (counts drive the labels) + search. */
.ep-toolbar{display:flex;align-items:center;gap:10px;margin-top:20px}
.ep-seg{display:flex;gap:2px;padding:3px;border:1px solid var(--border2);border-radius:9px;background:var(--bg2)}
.ep-seg-btn{height:26px;padding:0 12px;border-radius:var(--r1);border:none;background:none;color:var(--t3);font-size:12px;font-weight:600;white-space:nowrap;cursor:pointer;font-variant-numeric:tabular-nums}
.ep-seg-btn:hover{color:var(--t1)}
.ep-seg-btn[aria-pressed="true"]{background:var(--chip);color:var(--t1)}
.ep-search{flex:1;height:32px;padding:0 12px;border:1px solid var(--border2);border-radius:var(--r2);background:var(--bg2);color:var(--t1);font-size:12.5px}
.ep-search::placeholder{color:var(--t3)}
.ep-search:focus{outline:none;border-color:var(--accent)}

/* Ledger — CLIENT · STATUS · DUE · IN · COLLECTED OF TERM · AMOUNT CAD · link */
.ep-table{margin-top:14px;border:1px solid var(--border);border-radius:11px;overflow:hidden}
.ep-cols{display:grid;grid-template-columns:minmax(0,1fr) 128px 96px 74px 168px 118px 34px;gap:12px;align-items:center;padding:10px 14px}
.ep-thead{background:var(--bg2);border-bottom:1px solid var(--border);font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--t3)}
.ep-th-sort{background:none;border:none;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left;font-variant-numeric:tabular-nums}
.ep-th-sort.ep-th-active{color:var(--t1)}
.ep-list{display:flex;flex-direction:column}
/* One step below --border — the low-contrast interior-row rule inside an
   already-bordered table. */
.ep-row{padding:11px 14px;border-bottom:1px solid #1c2024}
.ep-row:last-child{border-bottom:none}
.ep-list .ep-row:nth-child(even){background:rgba(255,255,255,.012)}
.ep-row:hover{background:var(--card-hover)}

.ep-client{display:flex;align-items:center;gap:9px;min-width:0}
.ep-dot{width:7px;height:7px;border-radius:50%;background:var(--t3);flex:none}
.ep-name{flex:1;min-width:0;font-size:13.5px;font-weight:500;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ep-pill{font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;justify-self:start;white-space:nowrap;color:var(--t3);background:var(--chip)}
.ep-due{font-size:12.5px;color:var(--t2);font-variant-numeric:tabular-nums;white-space:nowrap}
.ep-in{font-size:12px;color:var(--t3);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}

.ep-progress{min-width:0}
.ep-progress-track{display:flex;height:5px;border-radius:3px;overflow:hidden;background:var(--chip);margin-bottom:4px}
.ep-progress-fill{display:block;height:100%;background:var(--t3)}
.ep-progress-label{font-size:11px;color:var(--t3);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.ep-amt-cell{text-align:right}
.ep-amt{display:block;font-size:13.5px;font-weight:600;color:var(--t1);font-variant-numeric:tabular-nums;white-space:nowrap}
/* Currency is now STATED, not implied by a shade (replaces the old .ep-usd
   colour trick). */
.ep-amt-native{display:block;font-size:10.5px;color:var(--t3);font-variant-numeric:tabular-nums;white-space:nowrap}

.ep-stripe{width:24px;height:24px;border-radius:var(--r1);display:flex;align-items:center;justify-content:center;color:var(--t3);font-size:12px;text-decoration:none}
a.ep-stripe:hover{color:var(--accent);background:var(--chip)}

/* Row action — inside the client cell, right-aligned via margin-left:auto,
   revealed on hover/focus and permanently (dimmed, dashed) on a manually
   reconciled row so a hand-entered "Paid" is never mistaken for a synced one. */
.ep-action{margin-left:auto;flex:none;height:24px;padding:0 9px;border-radius:var(--r1);border:1px solid var(--border3);background:none;color:var(--t2);font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap;opacity:0;transition:opacity .12s,color .12s,border-color .12s}
.ep-row:hover .ep-action,.ep-action:focus-visible{opacity:1}
.ep-action:hover{color:var(--t1);border-color:var(--t3)}
.ep-row.ep-manual .ep-action{opacity:.65;border-style:dashed}

/* Per-state dot/pill colour. Ten row treatments, three of which are
   deliberately distinct: `ending` and `no-sub` have not happened / are still
   actionable (never struck through); only `canceled`+churned is void. */
.ep-row.ep-failed .ep-dot,.ep-row.ep-pastdue .ep-dot{background:var(--red)}
.ep-row.ep-failed .ep-pill,.ep-row.ep-pastdue .ep-pill{color:var(--red);background:rgba(224,85,76,.14)}
.ep-row.ep-failed .ep-in,.ep-row.ep-pastdue .ep-in{color:var(--red)}
.ep-row.ep-failed .ep-progress-fill,.ep-row.ep-pastdue .ep-progress-fill{background:var(--red)}
.ep-row.ep-duesoon .ep-dot{background:#d99a00}
.ep-row.ep-duesoon .ep-pill{color:#d99a00;background:rgba(217,154,0,.14)}
.ep-row.ep-duesoon .ep-in{color:#d99a00}
.ep-row.ep-duesoon .ep-progress-fill{background:#d99a00}
.ep-row.ep-upcoming .ep-dot{background:var(--accent)}
.ep-row.ep-upcoming .ep-pill{color:var(--accent);background:var(--accent-dim)}
.ep-row.ep-upcoming .ep-progress-fill{background:var(--accent)}
.ep-row.ep-partial .ep-dot{background:var(--purple)}
.ep-row.ep-partial .ep-pill{color:var(--purple);background:rgba(155,108,255,.12)}
.ep-row.ep-partial .ep-progress-fill{background:var(--purple)}
.ep-row.ep-paid .ep-dot{background:var(--green)}
.ep-row.ep-paid .ep-pill{color:var(--green);background:rgba(47,163,100,.14)}
.ep-row.ep-paid .ep-progress-fill{background:var(--green)}
.ep-row.ep-paid .ep-name,.ep-row.ep-paid .ep-amt{opacity:.65}
/* A manually reconciled row stays at full opacity — it must read as "handled
   by a human", never as an ordinary settled-and-faded row. */
.ep-row.ep-manual .ep-name,.ep-row.ep-manual .ep-amt{opacity:1}
.ep-row.ep-ending .ep-dot{background:var(--amber)}
.ep-row.ep-ending .ep-pill{color:var(--amber);background:rgba(212,148,42,.12)}
/* Hasn't happened yet — the amount is historical context, not a receivable,
   so it is dimmed but never struck through. */
.ep-row.ep-ending .ep-amt{opacity:.55;color:var(--t3)}
.ep-row.ep-canceled .ep-dot{background:var(--t3)}
.ep-row.ep-canceled .ep-pill{color:var(--t3);background:rgba(141,148,157,.14)}
.ep-row.ep-canceled .ep-name,.ep-row.ep-canceled .ep-amt{opacity:.5;text-decoration:line-through}
/* Subscription canceled but the client is staying: an action item, not a
   void row. Undoes the strikethrough/dimming the canceled state applies. */
.ep-row.ep-nosub .ep-dot{background:var(--amber)}
.ep-row.ep-nosub .ep-pill{color:var(--amber);background:rgba(212,148,42,.12)}
.ep-row.ep-nosub .ep-name,.ep-row.ep-nosub .ep-amt{opacity:1;text-decoration:none}
/* Balance stated to land in a later month: shown, but visibly not this
   month's money — excluded from the outstanding total. */
.ep-row.ep-deferred .ep-amt-cell{opacity:.45}

/* "Not due this month" — a collapsible disclosure replacing four permanent
   footnote paragraphs. The body is always in the DOM (a sync re-render and
   every test that reads its names relies on that); `is-hidden` only hides it
   visually until expanded. */
.ep-rest{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border:none;background:var(--bg2);color:var(--t2);font-size:12.5px;text-align:left;cursor:pointer}
.ep-rest:hover{background:#161a1f}
.ep-rest-caret{color:var(--t3);font-size:11px;display:inline-block;transition:transform .12s}
.ep-rest[aria-expanded="true"] .ep-rest-caret{transform:rotate(90deg)}
.ep-rest strong{color:var(--t1);font-weight:600}
.ep-rest-counts{margin-left:auto;display:flex;gap:14px;font-size:11.5px;color:var(--t3);font-variant-numeric:tabular-nums}
.ep-rest-counts .ep-warn{color:var(--amber)}
.ep-rest-body{padding:2px 14px 12px;background:var(--bg2);border-top:1px solid var(--border)}
.ep-rest-body.is-hidden{display:none}
.ep-rest-group{padding:10px 0}
.ep-rest-group+.ep-rest-group{border-top:1px dashed var(--border)}
.ep-rest-group-head{font-size:11.5px;font-weight:600;color:var(--t2);margin-bottom:4px}
.ep-rest-group-head.ep-warn{color:var(--amber)}
.ep-rest-names{font-size:11.5px;color:var(--t3);line-height:1.55}

/* ── Unlinked in Stripe (reconciliation banner) ──────────────────────────── */
.ep-unlinked{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;margin-top:10px;padding:11px 14px;border:1px solid rgba(212,148,42,.3);border-radius:var(--r3);background:rgba(212,148,42,.06)}
.ep-unlinked-dot{width:7px;height:7px;border-radius:50%;background:var(--amber);flex:none}
.ep-unlinked-text{font-size:12.5px;color:var(--t2);min-width:0}
.ep-unlinked-text strong{color:var(--t1);font-weight:600}
.ep-link-btn{height:28px;padding:0 12px;border-radius:7px;border:1px solid rgba(47,163,100,.5);background:transparent;color:var(--green);font-size:11.5px;font-weight:600;white-space:nowrap;cursor:pointer}
.ep-link-btn:hover{background:rgba(47,163,100,.12)}
.ep-unlinked.ep-clear{border-color:rgba(47,163,100,.3);background:rgba(47,163,100,.06)}
.ep-unlinked.ep-clear .ep-unlinked-dot{background:var(--green)}

/* Orphans modal (multi-orphan case) + the client/charge picker modals reuse
   these — a guest charge's "no email yet" hint, and the plain list rows. */
.sul-hint{font-size:11px;color:var(--text3);font-style:italic}
/* "Not a client" — the quiet second resolution on an orphan row, and its
   undo inside the Ignored section. Muted on purpose: linking is the primary
   action, this is the exception. */
.sul-ignore{height:28px;padding:0 10px;border-radius:7px;border:1px solid var(--border);background:transparent;color:var(--text3);font-size:11.5px;font-weight:600;white-space:nowrap;cursor:pointer}
.sul-ignore:hover{color:var(--text);border-color:var(--text3)}
.sul-ignored{margin-top:14px;border-top:1px dashed var(--border);padding-top:10px}
.sul-ignored summary{font-size:12px;color:var(--text3);cursor:pointer;margin-bottom:2px}
.sul-list{display:flex;flex-direction:column;gap:2px}
.sul-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:8px 0;border-top:1px solid var(--border)}
.sul-row:first-child{border-top:none}
.sul-who{display:flex;flex-direction:column;gap:2px;min-width:0}
.sul-who strong{font-size:13px;color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sul-sub{font-size:11px;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sul-sug{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:999px;background:var(--bg3);color:var(--text3);font-size:10px;font-weight:600;vertical-align:middle}
.sul-amt{text-align:right;font-size:13px;font-weight:600;color:var(--text2);white-space:nowrap;display:flex;flex-direction:column;gap:2px}
.sul-meta{font-size:10.5px;font-weight:500;color:var(--text3)}
.sul-act{white-space:nowrap;display:flex;gap:6px;align-items:center;justify-content:flex-end}
.sul-search{width:100%;margin:8px 0;padding:7px 10px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text);font-size:12.5px}
.sul-pick-group{margin:12px 0 4px;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text3)}
.sul-pick-list{max-height:320px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.sul-pick{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;padding:8px 10px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text);cursor:pointer}
.sul-pick:hover{border-color:var(--green);background:var(--bg3)}
.sul-pick-name{font-size:13px;font-weight:600}
.sul-pick-email{font-size:11px;color:var(--text3)}
/* ── Client modal: Stripe link row ───────────────────────────────────────── */
.cm-stripe-link{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--bg2)}
.cm-stripe-who{display:flex;flex-direction:column;gap:3px;min-width:0}
.cm-stripe-who strong{font-size:13px;color:var(--text)}
.cm-stripe-who code{font-size:10.5px;color:var(--text3);font-family:var(--mono,ui-monospace,monospace)}
.cm-stripe-badge{align-self:flex-start;padding:1px 7px;border-radius:999px;background:rgba(52,199,89,.14);color:var(--green);font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.cm-stripe-badge.is-none{background:rgba(255,159,10,.14);color:var(--amber)}
.cm-stripe-acts{display:flex;gap:6px;flex-shrink:0}
/* Below 900px the ledger drops IN, COLLECTED OF TERM and the Stripe-link
   column — CLIENT/STATUS/DUE/AMOUNT keep their meaning, they just stop
   competing for width with three columns nobody can read on a phone anyway.
   Row actions stay permanently visible: there is no hover on touch. */
@media(max-width:900px){
  .ep-cols{grid-template-columns:minmax(0,1fr) 96px auto}
  .ep-in,.ep-progress,.ep-stripe{display:none}
  .ep-action{opacity:1}
}
/* Light theme has no dark-tinted counterpart for these two literal surfaces —
   both are genuinely new hex values, not decomposed tokens (see the "Four
   literals" note in the design handoff), so they need an explicit swap here
   rather than adapting automatically the way var()-based rules do. */
[data-theme="light"] .ep-row{border-bottom-color:var(--border)}
[data-theme="light"] .ep-rest:hover{background:var(--card-hover)}
@media (prefers-color-scheme: light){
  html:not([data-theme="dark"]):not([data-theme="light"]) .ep-row{border-bottom-color:var(--border)}
  html:not([data-theme="dark"]):not([data-theme="light"]) .ep-rest:hover{background:var(--card-hover)}
}
/* Mark-payment-received modal */
.mp-wrap{padding:18px 20px;max-width:520px}
/* The Unlinked-in-Stripe modal is a LIST dialog wearing the form wrap: the
   520px cap stranded its header close button and every row in the left of
   the 720px .modal shell, the rest of the box empty (Oct 20 screenshot).
   sul-wrap fills the shell; the shell's own padding is the only inset. */
.mp-wrap.sul-wrap{max-width:none;padding:0}
.mp-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.mp-head h3{margin:0;font-size:16px}
.mp-sub{margin:6px 0 16px;font-size:12px;color:var(--text3);line-height:1.55}
.mp-sub strong{color:var(--text2)}
.mp-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mp-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.mp-field>span{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--text3);font-weight:600}
.mp-field input,.mp-field select{width:100%}
.mp-wide{grid-column:1/-1}
.mp-narrow{max-width:120px}
.mp-msg{margin-top:12px;font-size:12px;color:var(--text3)}
.mp-msg.err{color:var(--red)}
.mp-msg.is-hidden{display:none}
.mp-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.mp-save{font-weight:600}
@media(max-width:560px){.mp-grid{grid-template-columns:1fr}.mp-narrow{max-width:none}}
/* MRR Breakdown table */
.mrr-bd-table{width:100%;border-collapse:collapse}
.mrr-bd-table tr{border-bottom:1px solid var(--border)}
.mrr-bd-table tr:last-child{border-bottom:none}
.mrr-bd-table td{padding:10px 6px;font-size:13px}
.mrr-bd-count{width:32px;font-size:13px;font-weight:700;color:#4c8dff;text-align:center}
.mrr-bd-label{color:var(--text);padding-left:10px}
.mrr-bd-val{text-align:right;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.mrr-bd-val.pos{color:#2fa364}
.mrr-bd-val.neg{color:#ec5a7e}
.mrr-bd-val.neu{color:var(--text2)}
.mrr-bd-table tr.mrr-bd-net td{border-top:2px solid var(--border2);background:var(--bg2);font-weight:700;font-size:15px}
/* Client revenue bars */
.fin-bar-row{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--border)}
.fin-bar-row:last-child{border-bottom:none}
.fin-bar-name{width:140px;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0;color:var(--text)}
.fin-bar-track{flex:1;height:8px;background:var(--bg2);border-radius:4px;overflow:hidden}
.fin-bar-fill{height:100%;border-radius:4px;background:#4c8dff;transition:width .4s ease}
.fin-bar-fill.usd{background:#4c8dff}
.fin-bar-val{width:200px;font-size:12px;color:var(--text2);text-align:right;flex-shrink:0;white-space:nowrap}
/* MRR Movements legend */
.fin-legend{display:flex;gap:18px;margin-top:8px;padding:0 4px}
.fin-legend-item{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text3);font-weight:500}
.fin-legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.fin-legend-dot.lg-new{background:#2fa364}
.fin-legend-dot.lg-churned{background:#ec5a7e}
.fin-section-head{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.12em;margin:24px 0 12px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.fin-section-head:first-of-type{margin-top:8px}
/* Section head with inline controls (Sales Funnel sync button + freshness).
   Reset the h3's uppercase/tracking/weight on the whole control cluster so the
   freshness line, button and sync message read as controls, not heading text. */
.fin-section-head-flex{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.fin-section-head-flex .fin-unit-group{text-transform:none;letter-spacing:normal;font-weight:var(--fw-normal)}
.fin-section-head-flex .fin-sync-when{font-weight:var(--fw-medium)}
.fin-section-head-flex .fin-sync-msg{margin:0}
/* Chart export button */
.chart-export-btn{background:none;border:1px solid var(--border);color:var(--text3);width:28px;height:28px;border-radius:8px;cursor:pointer;font-size:12px;display:inline-flex;align-items:center;justify-content:center;transition:all .15s;line-height:1;flex-shrink:0}
.chart-export-btn:hover{background:var(--bg2);color:var(--text);border-color:var(--border2)}
/* Finance client table */
.fin-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:12px}
.fin-client-table{width:100%;border-collapse:collapse;font-size:13px}
.fin-client-table thead th{text-align:left;font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;padding:10px 12px;border-bottom:2px solid var(--border2);white-space:nowrap}
.fin-client-table tbody tr{border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s}
.fin-client-table tbody tr:hover{background:var(--bg2)}
.fin-client-table tbody td{padding:10px 12px;vertical-align:middle}
.fin-client-table tfoot td{padding:10px 12px;font-weight:700;border-top:2px solid var(--border2);background:var(--card)}
.fin-client-table .fc-churned{opacity:.5;background:rgba(224,85,76,.02)}
.fin-client-table .fc-name-churned{text-decoration:line-through;color:var(--text3)}
.fin-client-table .fc-usd{color:var(--blue)}
.fin-client-table .fc-cad{color:var(--green)}
.fc-muted{color:var(--text3)}
.fin-client-table .fc-muted{color:var(--text3)}
.fin-client-table .fc-stage-churned{color:var(--red);font-weight:600}
.fin-client-table .fc-churn-date{color:var(--text3);font-size:12px}
/* Breakdown inline helpers */
.mrr-bd-hint{font-size:12px;color:var(--text3)}
.mrr-bd-warn{color:var(--orange)}
.mrr-bd-link{color:var(--orange);font-size:12px;text-decoration:underline;cursor:pointer}
.mrr-bd-permo{color:var(--text3)}
/* As-of timestamp */
.fin-as-of{font-size:11px;color:var(--text3);text-align:right;margin-bottom:4px}
@media(max-width:900px){.fin-grid-2{grid-template-columns:1fr}.fin-grid-4{grid-template-columns:repeat(2,1fr)}}

/* FINANCE PERIOD SELECTOR */
.fin-period-btn{background:none;border:none;color:var(--text3);padding:5px 14px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;font-family:inherit}
.fin-period-btn.active{background:#4c8dff;color:#fff}
.fin-period-btn:hover:not(.active){color:var(--text)}

/* ===== FINANCE CHART LAYOUT ===== */
.fin-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px}
.fin-row.fin-single{grid-template-columns:1fr}
.fin-chart-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px 20px;overflow:hidden;transition:border-color .16s;display:flex;flex-direction:column}
.fin-chart-card:hover{border-color:var(--border2)}
.fcc-title-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.fcc-label{font-size:13px;color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.fcc-metric{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.fcc-value{font-size:32px;font-weight:700;line-height:1;letter-spacing:-.5px;color:var(--text);font-variant-numeric:tabular-nums}
.fcc-badge{font-size:12px;font-weight:600;padding:3px 10px;border-radius:20px;white-space:nowrap;display:inline-flex;align-items:center;gap:3px}
.fcc-badge.up{background:rgba(47,163,100,.12);color:#2fa364}
.fcc-badge.down{background:rgba(233,75,109,.12);color:#ec5a7e}
.fcc-badge.flat{color:var(--text3);padding:0;background:none}
/* Chart draw-in animation */
@keyframes chartDrawIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.fcc-svg{width:100%;flex:1 1 auto;min-height:140px;display:block;overflow:visible;cursor:crosshair;animation:chartDrawIn .4s ease}
.fcc-tall{min-height:180px}
.fcc-x-labels{display:flex;justify-content:space-between;font-size:11px;color:var(--text3);margin-top:4px;padding:0 4px}
/* Short cards (MRR Breakdown) that share a row with a taller tile: fill the
   height by anchoring the net total to the bottom (statement style) so there's
   no empty band underneath. */
.fin-card-fill{display:flex;flex-direction:column}
.fin-card-fill #mrrBreakdown{flex:1 1 auto;display:flex;flex-direction:column}
.fin-card-fill #mrrBreakdown .mb-net{margin-top:auto}
.fin-tooltip{position:fixed;pointer-events:none;z-index:9999;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px 14px;font-size:12px;color:var(--text);box-shadow:0 12px 32px rgba(0,0,0,.15),0 2px 6px rgba(0,0,0,.06);display:none;white-space:nowrap;line-height:1.5;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.fin-tooltip.show{display:block}
.fin-tooltip .ft-label{font-size:11px;color:var(--text3);margin-bottom:3px}
.fin-tooltip .ft-val{font-weight:700;font-size:15px}
.fin-tooltip .ft-delta{font-size:11px;font-weight:600;margin-top:4px}
.fin-tooltip .ft-delta.mov-pos{color:var(--green)}
.fin-tooltip .ft-delta.mov-neg{color:var(--red)}
/* Rich tooltip variant for MRR Movements */
.fin-tooltip-rich{padding:14px 16px;min-width:220px}
.mov-tip-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:4px}
.mov-tip-net{font-weight:700;font-size:18px;letter-spacing:-.3px}
.mov-tip-date{font-size:11px;color:var(--text3);font-weight:500}
.mov-tip-vs{font-size:11px;font-weight:600;margin-bottom:10px}
.mov-tip-muted{color:var(--text3);font-weight:500}
.mov-tip-rows{display:flex;flex-direction:column;gap:6px;padding-top:8px;border-top:1px solid var(--border)}
.mov-tip-row{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text2)}
.mov-tip-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.mov-dot-new{background:#2fa364}
.mov-dot-churn{background:#ec5a7e}
.mov-tip-name{flex:1}
.mov-tip-val{font-weight:700;font-variant-numeric:tabular-nums}
.mov-pos{color:#2fa364}
.mov-neg{color:#ec5a7e}
.mov-zero{color:var(--text3)}
.mov-tip-partial{margin-top:10px;display:inline-block;font-size:10px;font-weight:700;letter-spacing:.08em;color:#4c8dff;background:rgba(76,141,255,.12);padding:3px 8px;border-radius:6px}
/* Inline legend slot in the chart title row */
.fin-legend-inline{margin:0;padding:0;flex:1;justify-content:flex-end;gap:14px}
.fin-legend-inline .fin-legend-item{font-size:11px}
/* Multi-label x-axis (positions labels by absolute percentage to align with bars) */
.fcc-x-labels-multi{position:relative;display:block;height:14px;padding:0;margin-top:6px}
.fcc-x-labels-multi span{position:absolute;transform:translateX(-50%);font-size:10px;color:var(--text3);white-space:nowrap}
@media(max-width:900px){.fin-row{grid-template-columns:1fr}}

/* ===== RECURRING TASK CARDS ===== */
.task-card.recurring-task-card{border-left:3px solid var(--purple);background:rgba(155,108,255,.04);position:relative}
.task-card.recurring-task-card.rt-completed-today{opacity:.55;border-left-color:var(--green);background:rgba(47,163,100,.03)}
.rt-card-body{display:flex;align-items:flex-start;gap:10px;margin-bottom:6px}
.rt-card-content{flex:1;min-width:0}
/* Task checkoff button */
/* Inline completion circle on the title row (design layout) */
.task-checkoff{background:none;border:none;cursor:pointer;padding:0;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:transform .15s;margin-top:1px}
.task-checkoff:hover{transform:scale(1.12)}
.task-checkoff-circle{width:16px;height:16px;border-radius:50%;border:1.6px solid var(--t3);background:transparent;transition:all .2s;display:block}
.task-checkoff:hover .task-checkoff-circle{border-color:var(--green);background:rgba(47,163,100,.15)}
.task-done-check{width:16px;height:16px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.task-done-check .mi{width:11px;height:11px}
.rt-checkoff{background:none;border:none;cursor:pointer;padding:2px;flex-shrink:0;margin-top:1px;display:flex;align-items:center;transition:transform .15s}
.rt-checkoff:hover{transform:scale(1.15)}
.rt-checkoff-circle{width:18px;height:18px;border-radius:50%;border:2px solid var(--border3);background:transparent;transition:all .2s}
.rt-checkoff:hover .rt-checkoff-circle{border-color:var(--green);background:rgba(47,163,100,.1)}
.rt-checkoff.checked .rt-checkoff-circle{border-color:var(--green);background:var(--green)}

/* Recurring frequency badges */
.rt-freq-badge{font-size:12px;font-weight:700;padding:2px 8px;border-radius:10px;letter-spacing:.3px;text-transform:uppercase;display:inline-flex;align-items:center;gap:3px}
.rt-freq-daily{background:rgba(155,108,255,.15);color:var(--purple)}
.rt-freq-bidaily{background:rgba(155,108,255,.12);color:#9370db}
.rt-freq-weekly{background:rgba(76,141,255,.12);color:var(--blue)}
.rt-freq-biweekly{background:rgba(76,141,255,.1);color:#6ba3e8}
.rt-freq-monthly{background:rgba(47,163,100,.12);color:var(--green)}
.rt-paused-badge{font-size:12px;font-weight:600;padding:2px 8px;border-radius:10px;background:rgba(255,255,255,.06);color:var(--text3);text-transform:uppercase;letter-spacing:.3px}
/* Onboarding template condition (migration 098): who the template fires for.
   Not uppercase like its neighbours — it is a sentence ("Only when Client CRM is
   Jobber"), and capitalising a sentence makes it harder to read, not louder. */
.tmpl-cond{font-size:12px;font-weight:600;padding:2px 8px;border-radius:10px;background:var(--accent-dim);color:var(--accent-txt);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tmpl-cond.is-invalid{background:rgba(224,85,76,.12);color:var(--red-txt)}
/* A condition on a question the Launch Brief no longer asks: not a mistake to fix, just a template that makes no task. */
.tmpl-cond.is-never{background:var(--chip);color:var(--text2)}
.tmpl-cond-hint{font-size:12px;color:var(--text3);margin-top:4px;line-height:1.4}

/* Day-of-week picker */
.rt-day-picker{display:flex;gap:6px;padding:4px 0}
.rt-day-btn{width:36px;height:36px;border-radius:50%;border:2px solid var(--border2);background:transparent;color:var(--text2);font-size:12px;font-weight:700;cursor:pointer;transition:all .2s;font-family:inherit;display:flex;align-items:center;justify-content:center}
.rt-day-btn:hover{border-color:var(--accent);color:var(--text);background:rgba(76,141,255,.06)}
.rt-day-btn.active{border-color:var(--accent);background:var(--accent);color:#fff;box-shadow:0 0 8px rgba(76,141,255,.25)}

/* Streak dots */
.rt-streak-dots{display:flex;gap:3px;margin-top:4px}
.streak-dot{width:8px;height:8px;border-radius:50%;background:var(--border2);flex-shrink:0;transition:background .2s}
.streak-dot.completed{background:var(--green)}
.streak-dot.not-due{display:none}

/* Kanban + Done sidebar flex wrapper */
.kanban-with-backburner{display:flex;gap:var(--s4);height:calc(100vh - 210px);min-height:420px}

/* ===== RECURRING TASKS MANAGER ===== */
.recurring-manager-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r3);padding:var(--s3);margin-bottom:var(--s2);cursor:pointer;transition:all .2s}
.recurring-manager-card:hover{border-color:var(--border3);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.recurring-manager-card.rt-paused{opacity:.5}
.rtm-header{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.rtm-title{font-size:13px;font-weight:600;flex:1}
.rtm-meta{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.rtm-streak{display:flex;gap:3px;margin-bottom:8px}
.rtm-actions{display:flex;gap:6px;justify-content:flex-end}

/* ===== RECURRING COMPLETION TRACKING ===== */
.rtc-person{margin-bottom:var(--s4);padding-bottom:var(--s3);border-bottom:1px solid var(--border)}
.rtc-person:last-child{border-bottom:none}
.rtc-person-name{font-size:13px;font-weight:700;margin-bottom:var(--s2);color:var(--text)}
.rtc-task-row{display:flex;align-items:center;gap:10px;padding:4px 0;font-size:12px}
.rtc-task-title{width:180px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0}
.rtc-bar{flex:1;height:6px;background:var(--border);border-radius:3px;overflow:hidden}
.rtc-bar-fill{height:100%;border-radius:3px;background:var(--green);transition:width .4s}
.rtc-bar-fill.flagged{background:var(--red)}
.rtc-rate{width:40px;text-align:right;font-weight:600;color:var(--text2);flex-shrink:0}
.rtc-rate.flagged{color:var(--red)}

/* ===== UTILITY CLASSES (extracted from inline styles) ===== */
.filter-select-sm{font-size:12px;padding:5px 10px}
.btn-filter{font-size:12px;padding:5px 12px;border-radius:var(--r2)}
.section-heading{margin-top:var(--s6);font-size:14px;color:var(--text2)}
.section-heading-flex{margin-top:var(--s6);font-size:14px;color:var(--text2);display:flex;align-items:center;justify-content:space-between}
.section-content{margin-top:8px}
/* Templates & Onboarding tab */
/* Settings-style pages read terribly stretched edge-to-edge on ultrawide
   monitors (5120px viewports) — cap them like #tab-finance (1760px) but at a
   narrower, settings-appropriate width and center the column. */
#tab-templates,#tab-team{max-width:1240px;margin-inline:auto}
.tmpl-tab-intro{font-size:13px;color:var(--text2);line-height:1.55;margin:4px 0 8px;max-width:820px}
.tmpl-section-hint{font-size:12px;color:var(--text3);line-height:1.5;margin:4px 0 8px}
.tmpl-manager-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.tmpl-check-list{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.tmpl-check-row{display:flex;align-items:center;gap:6px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r3);padding:6px 8px}
.tmpl-check-num{width:20px;text-align:center;font-size:12px;color:var(--text3);flex:none}
.tmpl-check-input{flex:1;min-width:0;background:var(--card);border:1px solid var(--border);border-radius:var(--r2);color:var(--text);font-size:13px;padding:6px 10px}
.tmpl-check-move:disabled{opacity:.35;cursor:default}
.tmpl-check-add{display:flex;align-items:center;gap:8px;margin-top:4px}
.tmpl-check-add .tmpl-check-input{flex:1}
.mi-sm{width:16px;height:16px}
.mi-lg{width:40px;height:40px}
.mi-icon-btn{width:18px;height:18px}
.hidden-legacy{display:none}
/* Priority dot color indicators */
.prio-dot--high{color:var(--red)}
.prio-dot--medium{color:var(--orange)}
.prio-dot--low{color:var(--blue)}
/* Task title done state */
.task-title--done{text-decoration:line-through;color:var(--text3)}
/* Toast / icon color utilities */
.mi-color-green{color:var(--green)}
.mi-color-red{color:var(--red)}
.mi-color-blue{color:var(--blue)}
.mi-color-amber{color:var(--amber)}
/* Multi-assignee chip */
.multi-assignee-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:12px;font-size:12px;background:var(--border);color:var(--text)}
.multi-assignee-remove{cursor:pointer;color:var(--text3)}
/* Task modal action buttons */
.task-action-full{width:100%;justify-content:flex-start;display:flex;align-items:center;gap:6px}
.task-action--delete{color:var(--red)}
/* Client modal task row */
.client-task-row{display:flex;align-items:center;gap:8px;padding:9px 12px;font-size:13px;border-bottom:1px solid rgba(255,255,255,.04);transition:background .1s;cursor:pointer}
.client-task-row:hover{background:rgba(255,255,255,.02)}
.client-task-row--done{opacity:.6}
/* ===== Utility classes (replacing inline style toggles) ===== */
.is-hidden{display:none !important}
.my-tasks-btn.is-active{background:var(--accent);color:#fff}
.linear-status-dot.is-popping{transform:scale(1.3)}
#tdTitle.is-done{text-decoration:line-through;color:var(--text3)}
.fin-period-selector{display:flex;gap:4px;margin-bottom:12px;background:var(--card2);border-radius:10px;padding:3px;width:fit-content}
/* KPI summary row */
/* auto-fit (not a fixed 5) so the 11 tiles pack the row at every width —
   ~6-up under the 1760px ultrawide cap, fewer as the viewport narrows;
   the ≤1200px overrides below still take over on small screens. */
.fin-kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-bottom:18px}
.fin-kpi-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px 18px;position:relative;overflow:hidden;transition:border-color .16s}
.fin-kpi-card:hover{border-color:var(--border2)}
/* Portfolio Health Score bands: green ≥75, yellow 50–74, red <50 */
.fin-kpi-value.ph-green{color:var(--green)}
.fin-kpi-value.ph-yellow{color:var(--gold)}
.fin-kpi-value.ph-red{color:var(--red)}
.fin-kpi-label{font-size:9.5px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:9px}
.fin-kpi-value{font-size:26px;font-weight:700;line-height:1;letter-spacing:-.5px;color:var(--t1);font-variant-numeric:tabular-nums}
.fin-kpi-sub{font-size:12px;color:var(--text2);margin-top:8px;display:flex;align-items:center;gap:8px}
.fin-kpi-badge{font-size:11px;font-weight:600;padding:3px 8px;border-radius:20px;display:inline-flex;align-items:center;gap:3px}
.fin-kpi-badge.up{background:rgba(47,163,100,.12);color:#2fa364}
.fin-kpi-badge.down{background:rgba(233,75,109,.12);color:#ec5a7e}
.fin-kpi-badge.flat{color:var(--text3)}
@media(max-width:1200px){.fin-kpi-row{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.fin-kpi-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.fin-kpi-row{grid-template-columns:1fr}}
.view-toggle-wrap{display:flex;gap:2px;background:var(--card2);border-radius:var(--r2);padding:2px}
.fin-card-mt{margin-top:24px}
.done-col-actions{display:flex;align-items:center;gap:6px}
.alert-banner-inner{flex-wrap:nowrap;align-items:center}
.perm-legend{font-size:12px;color:var(--text3);display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:4px;margin-top:8px}
.btn-invite{background:var(--green);color:#fff}
.btn-new-recurring{background:var(--accent);color:#fff;font-size:12px}
.onboarding-subtitle{color:var(--text3);margin-top:4px}
.onboarding-step-detail{color:var(--text3)}

/* ===== FEATURE: SLIDE-OVER TASK DETAIL PANEL ===== */
.modal-overlay.slide-over{background:rgba(0,0,0,.5);align-items:stretch;justify-content:flex-end}
.modal-overlay.slide-over .modal.modal-linear{max-width:720px;width:52vw;min-width:480px;max-height:100vh;height:100vh;border-radius:0;border:none;border-left:1px solid var(--border2);animation:slideInRight .25s cubic-bezier(.4,0,.2,1);margin:0;overflow:hidden}
.modal-overlay.slide-over .linear-body{max-height:calc(100vh - 45px);flex:1}
@keyframes slideInRight{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
@media(max-width:768px){.modal-overlay.slide-over .modal.modal-linear{width:100%;min-width:100%}}

/* ===== FEATURE: SWIMLANE GROUPING ===== */
.swimlane-controls{display:flex;align-items:center;gap:6px;margin-left:8px}
.swimlane-controls select{font-size:12px;padding:2px 6px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r2);color:var(--text);cursor:pointer}
.swimlane-group{margin-bottom:16px}
.swimlane-header{display:flex;align-items:center;gap:8px;padding:6px 8px;margin-bottom:8px;cursor:pointer;border-radius:var(--r2);transition:background .15s;user-select:none}
.swimlane-header:hover{background:var(--card-hover)}
.swimlane-header .swimlane-chevron{font-size:12px;color:var(--text3);transition:transform .2s;display:inline-block}
.swimlane-header .swimlane-chevron.collapsed{transform:rotate(-90deg)}
.swimlane-header .swimlane-label{font-size:13px;font-weight:600;color:var(--text)}
.swimlane-header .swimlane-count{font-size:12px;color:var(--text3);background:var(--border);border-radius:10px;padding:1px 7px}
.swimlane-header .swimlane-avatar{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0;overflow:hidden}
.swimlane-body.collapsed{display:none}
.kanban-col .swimlane-group .col-cards{max-height:none}

/* ===== FEATURE: CELEBRATIONS / CONFETTI ===== */
.confetti-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999;overflow:hidden}
.confetti-piece{position:absolute;width:10px;height:10px;top:-20px;animation:confettiFall 1.8s cubic-bezier(.25,.46,.45,.94) forwards}
@keyframes confettiFall{0%{transform:translateY(0) rotate(0deg) scale(1);opacity:1}80%{opacity:1}100%{transform:translateY(100vh) rotate(720deg) scale(.5);opacity:0}}
.celebration-burst{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9998;pointer-events:none;font-size:64px;animation:celebrationPop .6s ease forwards}
@keyframes celebrationPop{0%{transform:translate(-50%,-50%) scale(0);opacity:0}40%{transform:translate(-50%,-50%) scale(1.3);opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:0}}

/* ===== FEATURE: EMPTY STATE ILLUSTRATIONS ===== */
.kanban-empty-state .empty-illustration{width:80px;height:80px;margin-bottom:8px;opacity:.4}
.kanban-empty-state .empty-illustration svg{width:100%;height:100%}

/* ===== FEATURE: NATURAL LANGUAGE DATE INPUT ===== */
.nlp-date-preview{font-size:12px;color:var(--green);margin-top:4px;display:flex;align-items:center;gap:4px;animation:fadeIn .2s ease}
.nlp-date-preview .nlp-icon{font-size:12px}

/* ===== FEATURE: DUPLICATE TASK ===== */
.duplicate-task-btn{color:var(--text2)}
.duplicate-task-btn:hover{color:var(--accent)}

/* ===== UNDO BAR (task completion undo toast) ===== */
.undo-bar{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:9999;background:var(--card2);border:1px solid var(--border2);border-radius:var(--r3);padding:10px 18px;box-shadow:var(--shadow-lg);font-size:13px;display:flex;align-items:center;gap:12px}
.undo-bar .btn{font-size:12px}

/* ===== DESCRIPTION EDITOR EXTRACTED INLINE STYLES ===== */
.desc-tb-btn.desc-tb-code{font-family:monospace;font-size:12px}
.desc-edit-btn-icon{width:12px;height:12px}
.desc-preview-placeholder{color:var(--text3)}

/* ===== RECURRING TASK FORM FIELD SPACING (modal variant) ===== */
.td-field.rt-day-field{margin-bottom:8px}
.rt-day-field .rt-day-picker{gap:4px}
.rt-day-field .rt-day-btn{width:30px;height:30px;font-size:12px}
.rt-modal-body{max-width:460px;margin:0 auto;padding:var(--s3) var(--s4)}
.td-field textarea.rt-modal-desc{min-height:36px}

/* ===== UTILITY CLASSES (extracted from inline styles) ===== */
.u-hidden{display:none!important}
.u-visible-flex{display:flex!important}
.u-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.u-mb-2{margin-bottom:var(--s2)}
.u-mr-auto{margin-right:auto}
.text-muted{color:var(--text3)}
.text-pass{color:var(--green)}
.text-fail{color:var(--red)}
.is-disabled{opacity:0.5;pointer-events:none}
.group-collapsed+.group-content{display:none}
.group-collapsed .group-chevron{transform:rotate(-90deg)}
.ac-dropdown{position:fixed;z-index:9999;background:var(--card);border:1px solid var(--border);border-radius:var(--r2);max-height:160px;overflow-y:auto;min-width:180px;box-shadow:0 4px 12px rgba(0,0,0,.4)}
.ac-item{padding:6px 10px;font-size:13px;cursor:pointer;color:var(--text);transition:background .1s}
.ac-item.highlighted{background:var(--bg2)}
.fcc-badge.text-muted{color:var(--text3)}

/* ===== ICON SIZE VARIANTS (extracted from inline styles) ===== */
.mi-xs{width:10px;height:10px}
.mi-12{width:12px;height:12px}
.mi-14{width:14px;height:14px}
.mi-status{width:18px;height:18px}
.mi-empty{width:28px;height:28px}

/* ===== MARKDOWN RENDERING (extracted from renderMarkdown inline styles) ===== */
.md-h1{font-weight:800;font-size:15px;margin:8px 0 4px}
.md-h2{font-weight:700;font-size:14px;margin:8px 0 3px}
.md-h3{font-weight:700;font-size:13px;margin:6px 0 3px}
.md-muted{margin:2px 0;color:var(--text3)}
.md-ul{margin:4px 0;padding-left:18px;list-style:disc}
.md-li{margin:2px 0;font-size:13px}
.md-spacer{height:6px}
.md-p{margin:2px 0}
.md-code{background:var(--bg);padding:1px 4px;border-radius:3px;font-size:12px}
.md-link{color:var(--blue);text-decoration:underline;word-break:break-all}
.mention-badge{color:var(--accent);font-weight:600;background:var(--accent-dim);padding:1px 4px;border-radius:3px;cursor:default}

/* ===== EMPTY STATE TYPOGRAPHY (extracted from kanban empty state) ===== */
.kanban-empty-state .empty-msg{font-size:13px;font-weight:500;color:var(--text2);margin-top:8px}
.kanban-empty-state .empty-hint{font-size:12px;color:var(--text3);margin-top:4px}
.kanban-empty-state .empty-cta{margin-top:10px;font-size:12px}

/* ===== INLINE-STYLE EXTRACTION (CSS cleanup sprint) ===== */
.agent-hidden{display:none}
.agent-more-chip{color:var(--text3);font-style:italic;cursor:pointer}
.rt-card-tags--spread{justify-content:space-between}
.rt-freq-group{display:flex;align-items:center;gap:4px}
.rt-streak-dots--flush{margin:0}
.tm-avatar-img{width:100%;height:100%;border-radius:inherit;object-fit:cover;display:block}
.tm-avatar-fallback{display:none}
.tm-avatar.img-error .tm-avatar-img{display:none}
.tm-avatar.img-error .tm-avatar-fallback{display:inline}
.linear-comment-body{flex:1}

/* Visually-hidden helper for screen-reader-only content (e.g. the page <h1>
   that gives screen readers a top-level landmark). Standard pattern. */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}

/* WCAG 2.3.3 — respect the user's "reduce motion" OS preference by
   collapsing animation/transition durations. Avoids vestibular issues on
   the dashboard's many infinite pulses, shimmers, and confetti. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  /* Stop pulsing dots / shimmers entirely (the wildcard rule above only
     reduces them to one-shot — these explicitly halt them). */
  .overdue-dot,.bot-indicator::after,.task-due.overdue,.task-due.due-soon,.csm-badge-approved,.skeleton{animation:none!important}
  .confetti-container,.celebration-burst{display:none!important}
}

/* Redesign: finance cards are flat, opaque, bordered surfaces (no glass).
   The tooltip keeps a light blur since it floats over content. */
.fin-tooltip{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

/* --- CSS-migrated inline styles (cleanup batch 2026-05-13) --- */

/* Search results group header */
.search-group-header{padding:6px 16px;font-size:12px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;background:var(--bg2)}
.search-no-results{color:var(--text3)}

/* Dropdown empty state */
.dropdown-empty{padding:8px 12px;font-size:12px;color:var(--text3)}

/* Saved-filter row helpers */
.sf-label{flex:1;cursor:pointer}
.sf-remove{color:var(--text3);cursor:pointer;font-size:12px}

/* Date-picker shortcut icon colors */
.dp-icon-today{color:var(--green)}
.dp-icon-tomorrow{color:var(--orange)}
.dp-icon-weekend{color:var(--blue)}
.dp-icon-none{color:var(--text3)}

/* Accent button (save, primary actions inside modals) */
.btn-accent{background:var(--accent);color:#fff}

/* Toast undo button */
.btn-toast-undo{background:var(--accent);color:#fff;border:none;padding:4px 12px;border-radius:var(--r2);font-size:12px;font-weight:600;cursor:pointer;margin-left:8px;font-family:inherit}

/* Task-detail description indentation */
.td-indent{margin-left:30px}
.td-indent-wrap{margin-left:30px;max-width:calc(100% - 30px)}

/* Skeleton loader variants */
.skeleton-card-sm{height:80px}
.skeleton-inline{width:40px;height:20px;display:inline-block}

/* Alias: index.html still references var(--text-secondary) inline in a few
   spots (Drive link / Attachments hint text). Rather than rewrite each
   inline style, alias to the existing token. */
:root{--text-secondary:var(--text3)}

/* Drop zone active state (file upload drag-over) */
.drop-active{border-color:var(--blue) !important}

/* Completion metrics dynamic colors */
.cm-val-good{color:var(--green)}
.cm-val-warn{color:var(--gold)}
.cm-val-danger{color:var(--red)}
.cm-val-muted{color:var(--text3)}
.cm-val-shrinking{color:var(--green)}
.cm-val-growing{color:var(--red)}

/* Task assignee overlap (negative margin for stacked avatars) */
.task-assignee-overlap{margin-left:-4px}

/* --- CSS-migrated inline styles: client modal ▸ Payment Terms tab (2026-08-01) --- */

/* Sub-sections inside the Payment Terms tab (Pause / PIF / Revenue Share /
   Summary). Deliberately NOT .cm-section: that would re-anchor the spacing to
   --s3 (12px) and shift margin-top 14px→12px. These four divs are nested INSIDE
   the tab's own .cm-section wrapper, so .cm-section h4 (0,1,1) already styles
   their headings — the heading class below only has to win back margin-bottom. */
.cm-subsection{margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
/* Written as h4.cm-subsection-title (0,1,1), NOT a bare class (0,1,0): the
   ancestor rule .cm-section h4{margin-bottom:12px} (index.css:1106) is also
   (0,1,1), so a bare class would LOSE and silently regress 10px→12px. Equal
   specificity + declared later in the file = this wins. Self-contained (repeats
   font-size/color) so it also holds up outside a .cm-section. */
h4.cm-subsection-title{font-size:12px;color:var(--text2);margin-bottom:10px}
.cm-pause-note{font-size:11px;color:var(--text3);margin-top:6px}
.cm-pif-mrr{padding:8px 10px;background:var(--bg);border-radius:6px;color:var(--green);font-weight:600;font-size:14px}
.cm-summary-list{font-size:13px;display:flex;flex-direction:column;gap:6px}
.cm-summary-row{display:flex;justify-content:space-between}
.cm-summary-label{color:var(--text2)}

/* ============================================================================
   FINANCE TAB — Stripe-backed, Ludication-inspired dark-glass restyle (031)
   Translates Ludication's light "liquid-glass" cards into DarkHorse's dark
   palette: translucent surfaces, soft borders, blue-tinted shadows, hover lift.
   Scoped to #tab-finance so nothing else is affected.
   ============================================================================ */
/* Ultrawide: cap + center the finance tab. Without a cap a 3440px monitor
   stretches the 2-col chart rows to ~1700px per chart and every KPI tile to
   ~650px — everything reads oversized. ~1760px reproduces the tab's intended
   1800-1920px desktop look; charts re-render to the new size automatically
   (ResizeObserver in app.js). Other tabs (kanban) legitimately use full width. */
#tab-finance{max-width:1760px;margin-inline:auto}
/* Charts stretch to match their row sibling (flex column fill) — cap the
   height so a long Expected Payments list can't balloon the MRR chart. */
#tab-finance .fcc-svg{max-height:300px}
#tab-finance .fin-card,
#tab-finance .fin-chart-card,
#tab-finance .fin-kpi-card{
  background:linear-gradient(180deg,rgba(30,32,38,.72),rgba(20,21,25,.72));
  border:1px solid var(--border2);
  border-radius:var(--r5);
  box-shadow:0 8px 32px rgba(0,0,0,.35),0 1px 0 rgba(255,255,255,.02) inset;
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  transition:box-shadow var(--tr-base) ease,transform var(--tr-base) ease,border-color var(--tr-base) ease;
}
#tab-finance .fin-chart-card:hover,
#tab-finance .fin-kpi-card:hover{
  box-shadow:0 16px 48px rgba(0,0,0,.45),0 0 0 1px var(--accent-dim);
  border-color:var(--border3);
  transform:translateY(-1px);
}
/* Light mode: the dark gradient above is at #tab-finance specificity, so the
   generic [data-theme="light"] card rules can't win — restate them here at a
   higher specificity (theme attr + id) so finance cards become light surfaces. */
[data-theme="light"] #tab-finance .fin-card,
[data-theme="light"] #tab-finance .fin-chart-card,
[data-theme="light"] #tab-finance .fin-kpi-card{
  background:rgba(255,255,255,.82);
  border:1px solid var(--border);
  box-shadow:0 8px 32px rgba(76,141,255,.08),0 1px 0 rgba(255,255,255,.6) inset;
}
[data-theme="light"] #tab-finance .fin-chart-card:hover,
[data-theme="light"] #tab-finance .fin-kpi-card:hover{
  box-shadow:0 16px 48px rgba(76,141,255,.14),0 0 0 1px var(--accent-dim);
  border-color:var(--border2);
}
/* KPI tiles get the Ludication uppercase label + big tabular value treatment */
#tab-finance .fin-kpi-label{text-transform:uppercase;letter-spacing:.04em;font-size:var(--fz-xs);color:var(--text3);font-weight:var(--fw-semibold)}
#tab-finance .fin-kpi-value{font-variant-numeric:tabular-nums;font-weight:var(--fw-bold)}
#tab-finance .fcc-label{text-transform:uppercase;letter-spacing:.04em;font-size:var(--fz-xs);color:var(--text3);font-weight:var(--fw-semibold)}
#tab-finance .fcc-value{font-variant-numeric:tabular-nums}
#tab-finance .fin-section-head{letter-spacing:.02em}

/* Stripe sync bar */
.fin-sync-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin:0 0 18px}
.fin-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.fin-head-title{font-size:19px;font-weight:700;color:var(--t1);letter-spacing:-.3px}
.fin-sync-status{display:flex;align-items:center;gap:var(--s2);font-size:11.5px;color:var(--t3)}
.fin-sync-when{font-weight:var(--fw-medium);color:var(--t3)}
.fin-stale-pill{display:inline-flex;align-items:center;gap:4px;color:var(--gold);font-weight:var(--fw-semibold);font-size:var(--fz-xs)}
.fin-sync-btn{
  display:inline-flex;align-items:center;gap:6px;
  background:transparent;color:var(--accent);
  border:1px solid rgba(76,141,255,.4);border-radius:var(--r2);
  padding:6px 14px;font-size:12px;font-weight:var(--fw-semibold);cursor:pointer;
  transition:background var(--tr-base) ease,opacity var(--tr-base) ease;
}
.fin-sync-btn:hover:not(:disabled){background:var(--accent-dim)}
.fin-sync-btn:disabled{opacity:.6;cursor:not-allowed}
.fin-sync-msg{font-size:var(--fz-sm);padding:8px 12px;border-radius:var(--r3);margin:0 0 var(--s3)}
.fin-sync-msg.ok{background:rgba(47,163,100,.1);border:1px solid rgba(47,163,100,.25);color:var(--green)}
.fin-sync-msg.err{background:var(--danger-dim);border:1px solid rgba(224,85,76,.3);color:var(--red)}

/* Unit-economics controls: gross-margin, manual cost entry, Meta sync */
.fin-unit-controls{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4);margin:0 0 var(--s4);padding:10px 12px;background:var(--card2);border:1px solid var(--border);border-radius:var(--r3)}
.fin-unit-group{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.fin-unit-group.fin-meta-sync{margin-left:auto}
.fin-unit-label{font-size:var(--fz-xs);font-weight:var(--fw-semibold);color:var(--text3);text-transform:uppercase;letter-spacing:.04em}
.fin-unit-input{background:var(--bg2,var(--card));color:var(--text);border:1px solid var(--border2);border-radius:var(--r2);padding:6px 8px;font-size:var(--fz-sm);min-width:0}
input.fin-unit-input[type='number']{width:110px}
.fin-unit-controls .fin-sync-msg{margin:0}

/* ============================================================================
   Finance tab — master–detail redesign (consolidated toolbar, hero band,
   metric rail + focus panel). Reuses the existing --token palette; charts are
   hand-built inline SVG polylines/areas coloured by each metric's tone.
   ============================================================================ */
.fin-shell{max-width:1320px;margin:0 auto}

/* Consolidated toolbar */
.fin-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.fin-toolbar-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.fin-toolbar-title{font-size:22px;font-weight:700;letter-spacing:-.4px;margin:0;color:var(--t1)}
.fin-toolbar-sub{font-size:12px;color:var(--t3)}
.fin-toolbar-spacer{flex:1}

/* Sync dropdown */
.fin-sync-wrap{position:relative}
.fin-sync-toggle{font-size:12.5px;font-weight:600;color:#fff;background:var(--accent);border:none;border-radius:9px;padding:9px 15px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;font-family:inherit}
.fin-sync-toggle:hover{filter:brightness(1.07)}
.fin-sync-caret{opacity:.8}
.fin-sync-dd{position:absolute;top:calc(100% + 8px);right:0;width:300px;background:var(--card);border:1px solid var(--border2);border-radius:12px;box-shadow:0 18px 44px rgba(0,0,0,.5);padding:6px;z-index:60}
.fin-sync-dd-head{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);padding:8px 10px 4px}
.fin-sync-dd-row{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border-radius:8px}
.fin-sync-dd-lbl{flex:0 0 auto;font-size:13px;color:var(--t1);white-space:nowrap}
.fin-sync-dd-when{flex:1 1 auto;font-size:11px;color:var(--t3);text-align:right;line-height:1.35}
.fin-sync-go{font-size:11px;font-weight:600;color:var(--accent);background:transparent;border:1px solid rgba(76,141,255,.4);border-radius:7px;padding:4px 9px;cursor:pointer;white-space:nowrap;font-family:inherit;transition:background .15s ease}
.fin-sync-go:hover:not(:disabled){background:var(--accent-dim)}
.fin-sync-go:disabled{opacity:.5;cursor:not-allowed}
.fin-sync-go.syncing{opacity:.7}
.fin-sync-dd-sep{height:1px;background:var(--border);margin:5px 4px}
.fin-sync-dd-all{display:block;width:100%;text-align:left;padding:9px 10px;border-radius:8px;background:none;border:none;font-size:13px;font-weight:600;color:var(--accent);font-family:inherit;cursor:pointer}
.fin-sync-dd-all:hover{background:var(--chip)}
.fin-sync-dd-margin{display:flex;align-items:center;justify-content:space-between;padding:8px 10px 4px}
.fin-sync-dd-margin-lbl{font-size:12px;color:var(--t2)}
.fin-sync-dd-margin-field{display:flex;align-items:center;gap:4px}
.fin-sync-dd-margin-field input{width:52px;background:var(--bg);border:1px solid var(--border2);border-radius:6px;color:var(--t1);padding:5px 7px;font-size:12px;font-family:inherit}
.fin-sync-dd-margin-pct{font-size:12px;color:var(--t3)}
.fin-sync-dd .fin-sync-msg{margin:6px 4px 2px}
.fin-sync-dd .fin-stale-pill{padding:4px 10px}

/* Period selector */
.fin-period-select{font-size:12.5px;font-weight:600;color:var(--t1);background:var(--card);border:1px solid var(--border);border-radius:9px;padding:9px 12px;cursor:pointer;font-family:inherit}

/* Eyebrow section labels */
.fin-eyebrow{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);margin:0 0 12px;display:flex;align-items:center;gap:10px}
.fin-eyebrow-rule{flex:1;height:1px;background:var(--border)}

/* Finance sub-tabs (Overview | Scaling guidance). Same affordance as the Forms
   subnav: a pill row under the toolbar, one pane visible at a time. */
.fin-subnav{display:flex;gap:4px;align-items:center;margin:0 0 20px;padding:4px;border:1px solid var(--border2);border-radius:12px;background:rgba(20,21,25,.6);width:fit-content;max-width:100%;overflow-x:auto}
.fin-subnav button{appearance:none;border:0;background:transparent;color:var(--t3);font-size:12.5px;font-weight:600;letter-spacing:.01em;padding:7px 16px;border-radius:9px;cursor:pointer;white-space:nowrap;transition:background .16s ease,color .16s ease}
.fin-subnav button:hover{color:var(--t1);background:rgba(255,255,255,.04)}
.fin-subnav button.active{color:var(--t1);background:var(--border2)}
.fin-subnav button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.fin-pane[hidden]{display:none}

/* Draw-vs-ads dial: each row is a real choice (take this much, fund that much
   advertising), so it reads as a ladder rather than a verdict. */
.fin-scale-dial{display:flex;flex-direction:column;gap:5px;margin:10px 0 8px;padding:9px 11px;border:1px solid var(--border2);border-radius:9px;background:rgba(255,255,255,.02)}
.fin-scale-dial-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:12.5px}
.fin-scale-dial-k{color:var(--t2);font-weight:600}
.fin-scale-dial-v{color:var(--t1);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.fin-scale-dial-tag{margin-left:6px;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--t3)}

/* Hero band */
.fin-hero-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px}
.fin-hero-card{background:linear-gradient(180deg,rgba(30,32,38,.72),rgba(20,21,25,.72));border:1px solid var(--border2);border-radius:14px;padding:16px 18px;position:relative;overflow:hidden;transition:border-color .16s ease}
.fin-hero-card:hover{border-color:var(--border3)}
.fin-hero-accent{position:absolute;top:0;left:0;right:0;height:2px;opacity:.8}
.fin-hero-label{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);margin-bottom:10px}
.fin-hero-cur{color:#5a6069}
.fin-hero-value{font-size:30px;font-weight:700;letter-spacing:-.5px;line-height:1;color:var(--t1);font-variant-numeric:tabular-nums}
.fin-hero-value-sub{font-size:15px;color:var(--t3);font-weight:600}
.fin-hero-verdict{font-size:26px;letter-spacing:-.3px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.fin-hero-verdict-num{font-size:13px;font-variant-numeric:tabular-nums}
.fin-hero-cost{font-size:11.5px;font-weight:600;color:var(--t3);margin-top:6px}
.fin-hero-spark{width:100%;height:30px;margin:10px 0 8px;display:block}
.fin-hero-foot{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--t2);min-height:22px}
.fin-hero-pill{font-weight:600;padding:3px 8px;border-radius:20px;white-space:nowrap}
.fin-hero-pill.up{background:rgba(47,163,100,.12);color:var(--green)}
.fin-hero-pill.down{background:rgba(224,85,76,.12);color:var(--red)}
.fin-hero-pill.flat{color:var(--t3)}
.fin-hero-dist{display:flex;height:7px;border-radius:4px;overflow:hidden;gap:2px;margin:14px 0 9px}
.fin-hero-dist-legend{display:flex;gap:13px;font-size:11px;font-weight:600;flex-wrap:wrap}

/* Secondary strip */
.fin-secondary-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:14px;margin-bottom:26px}
.fin-sec-tile{background:linear-gradient(180deg,rgba(30,32,38,.72),rgba(20,21,25,.72));border:1px solid var(--border2);border-left:3px solid var(--accent);border-radius:12px;padding:13px 15px;transition:border-color .16s ease}
.fin-sec-label{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);margin-bottom:8px}
.fin-sec-value{font-size:19px;font-weight:700;letter-spacing:-.4px;line-height:1;color:var(--t1);font-variant-numeric:tabular-nums}
.fin-sec-sub{font-size:11px;font-weight:600;margin-top:6px}

/* Loading skeleton (first paint, before any synced row has arrived).
   Full-size shells so the real figures land in place with no reflow — the
   whole point is that the tab stops asserting numbers it cannot yet support
   (see _finRenderLoading in app.js), not that it jumps twice instead of once. */
.fin-sk-card{pointer-events:none}
.fin-sk-accent{background:var(--border3)}
.fin-sk-label{height:9px;width:52%;border-radius:3px;margin-bottom:12px}
.fin-sk-value{height:26px;width:64%;border-radius:5px}
.fin-sk-value-sm{height:17px}
.fin-sk-spark{height:30px;width:100%;border-radius:5px;margin:10px 0 8px}
.fin-sk-foot{height:12px;width:44%;border-radius:3px;margin-top:8px}
.fin-sk-rail{height:15px;border-radius:5px;margin:8px 10px}
.fin-sk-inline{display:inline-block;height:7px;width:64px;border-radius:3px;vertical-align:middle}
.fin-sk-block{width:100%;border-radius:14px}

/* Master–detail split */
.fin-md{display:grid;grid-template-columns:236px 1fr;gap:18px;align-items:start}
.fin-rail{background:linear-gradient(180deg,rgba(30,32,38,.72),rgba(20,21,25,.72));border:1px solid var(--border2);border-radius:14px;padding:10px 9px 14px;position:sticky;top:82px}
.fin-rail-group-head{font-size:8.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#5a6069;margin:12px 8px 4px}
.fin-rail-group-head:first-child{margin-top:2px}
.fin-rail-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:12.5px;font-weight:500;margin:1px 0;color:var(--t2);transition:background .12s ease,color .12s ease}
.fin-rail-item:hover{background:var(--chip)}
/* The finance rail renders these as div[role=button]; the scaling plan editor
   renders real <button>s (keyboard-operable section switching). A button
   carries the UA's own `buttonface` background and system font, which under
   this rule's var(--t2) ink rendered as grey-on-white. Reset the chrome the
   rule assumes is absent; colour and states below still apply. */
button.fin-rail-item{width:100%;background:none;border:none;font-family:inherit;text-align:left;appearance:none}
.fin-rail-item.on,.fin-rail-item.on:hover{background:var(--accent);color:#fff}
.fin-rail-item-name{display:flex;align-items:center;gap:9px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fin-rail-dot{width:6px;height:6px;border-radius:50%;flex:none}
.fin-rail-item.on .fin-rail-dot{box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.fin-rail-num{font-weight:600;font-variant-numeric:tabular-nums;color:var(--t3);white-space:nowrap}
.fin-rail-item.on .fin-rail-num{color:rgba(255,255,255,.8)}

/* Focus panel */
.fin-focus-card{background:linear-gradient(180deg,rgba(30,32,38,.72),rgba(20,21,25,.72));border:1px solid var(--border2);border-radius:14px;padding:20px 22px;margin-bottom:14px;transition:border-color .16s ease}
.fin-focus-card:hover{border-color:var(--border3)}
.fin-focus-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.fin-focus-title{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--t3);margin-bottom:10px}
.fin-focus-metric{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.fin-focus-value{font-size:34px;font-weight:700;line-height:1;letter-spacing:-.5px;color:var(--t1);font-variant-numeric:tabular-nums}
.fin-focus-pill{font-size:13px;font-weight:600;padding:4px 11px;border-radius:20px;white-space:nowrap}
.fin-focus-pill.up{background:rgba(47,163,100,.12);color:var(--green)}
.fin-focus-pill.down{background:rgba(224,85,76,.12);color:var(--red)}
.fin-focus-pill.flat{color:var(--t3)}
.fin-focus-sub{font-size:12.5px;color:var(--t2);margin-top:10px}
.fin-focus-margin{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:12px;color:var(--t2)}
.fin-focus-margin label{font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.04em;font-size:10px}
.fin-focus-margin input{width:56px;background:var(--bg);border:1px solid var(--border2);border-radius:6px;color:var(--t1);padding:5px 8px;font-size:12px;font-family:inherit;font-variant-numeric:tabular-nums}
.fin-focus-margin input:focus{outline:none;border-color:var(--accent)}
.fin-focus-export{width:32px;height:32px;border-radius:8px;border:1px solid var(--border2);background:var(--card);color:var(--t2);cursor:pointer;font-size:15px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.fin-focus-export:hover{color:var(--t1);border-color:var(--border3)}
.fin-focus-chart-wrap{margin-top:18px}
.fin-focus-chart{width:100%;height:150px;display:block}
.fin-focus-xlabels{display:flex;justify-content:space-between;margin-top:8px}
.fin-focus-xlabels span{font-size:10px;color:var(--t3)}
.fin-focus-detail{margin-top:14px}
.fin-focus-breakdown{margin-top:16px;border-top:1px solid var(--border);padding-top:14px}
.fin-focus-breakdown .fin-card-head-row{margin-bottom:12px}

/* Per-tier unit-economics split (CAC / LTGP / LTGP:CAC focus panels) */
.fin-tier-split{margin-top:16px;border-top:1px solid var(--border);padding-top:14px}
.fin-tier-head{font-size:10px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px}
.fin-tier-scroll{overflow-x:auto}
.fin-tier-table{width:100%;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.fin-tier-table th{text-align:right;font-size:10px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.04em;padding:0 0 8px 14px}
.fin-tier-table th:first-child{text-align:left;padding-left:0}
.fin-tier-table td{text-align:right;padding:8px 0 8px 14px;color:var(--t1);border-top:1px solid var(--border)}
.fin-tier-table td:first-child{text-align:left;padding-left:0}
.fin-tier-name{font-weight:600}
.fin-tier-n{display:block;font-size:10px;font-weight:400;color:var(--t3);margin-top:2px}
.fin-tier-note{margin-top:8px;font-size:11px;color:var(--t3);line-height:1.45}

/* Impossible-date warning */
.fin-data-warn{margin-top:16px;border-top:1px solid var(--border);padding-top:14px}
.fin-data-warn-head{font-size:12px;font-weight:650;color:var(--amber,#d9aa45);margin-bottom:8px}
.fin-data-warn ul{margin:0;padding-left:18px;font-size:12px;color:var(--t2);line-height:1.6}
/* Time to Value: every client behind the median (paid · 5th lead · days, fastest
   first so the middle row IS the median), then who the median can't see
   (waiting) and who it has stopped the clock for (paused). */
.fin-ttv-detail{margin-top:16px;border-top:1px solid var(--border);padding-top:14px;display:grid;gap:12px}
.fin-ttv-head{font-size:12px;font-weight:650;color:var(--t2);margin-bottom:6px}
.fin-ttv-group ul{margin:0;padding-left:18px;font-size:12px;color:var(--t2);line-height:1.6}
.fin-ttv-wrap{border:1px solid var(--border);border-radius:11px;overflow:hidden}
.fin-ttv-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:12.5px;font-variant-numeric:tabular-nums}
/* Fixed columns so the collapsed "90 days before" table lines up with the one above it. */
.fin-ttv-table th:nth-child(1){width:31%}
.fin-ttv-table th:nth-child(2){width:23%}
.fin-ttv-table th:nth-child(3){width:14%}
.fin-ttv-table th{background:var(--bg2);border-bottom:1px solid var(--border);padding:8px 12px;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--t3);text-align:left;white-space:nowrap}
.fin-ttv-table td{padding:8px 12px;border-bottom:1px solid var(--border);color:var(--t2);vertical-align:middle}
.fin-ttv-table tbody tr:last-child td{border-bottom:none}
.fin-ttv-table .fin-ttv-num{text-align:right}
.fin-ttv-name{min-width:0}
.fin-ttv-client{background:none;border:none;padding:0;font:inherit;font-weight:500;color:var(--t1);cursor:pointer;text-align:left}
.fin-ttv-client:hover{color:var(--accent-txt);text-decoration:underline}
.fin-ttv-client:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.fin-ttv-date{white-space:nowrap}
.fin-ttv-sub{display:block;font-size:11px;color:var(--t3);white-space:normal}
.fin-ttv-chip{margin-left:8px;font-size:10.5px;font-weight:650;padding:1px 7px;border-radius:999px;color:var(--accent-txt);background:var(--accent-dim);white-space:nowrap}
.fin-ttv-row.is-median td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.fin-ttv-dayscell{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.fin-ttv-bar{flex:1;max-width:220px;height:6px;border-radius:3px;background:var(--track);overflow:hidden}
.fin-ttv-fill{display:block;height:100%;border-radius:3px}
.fin-ttv-fill.is-good{background:var(--green)}
.fin-ttv-fill.is-warn{background:var(--amber)}
.fin-ttv-fill.is-bad{background:var(--red)}
.fin-ttv-days{min-width:24px;text-align:right;font-weight:600}
.fin-ttv-days.is-good{color:var(--green-txt)}
.fin-ttv-days.is-warn{color:var(--gold-txt)}
.fin-ttv-days.is-bad{color:var(--red-txt)}
.fin-ttv-prev{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:11px;background:var(--bg2);color:var(--t2);font-size:12.5px;text-align:left;cursor:pointer}
.fin-ttv-prev:hover{background:var(--card-hover)}
.fin-ttv-prev:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fin-ttv-prev strong{color:var(--t1);font-weight:600}
.fin-ttv-caret{color:var(--t3);font-size:11px;display:inline-block;transition:transform .12s}
.fin-ttv-prev[aria-expanded="true"] .fin-ttv-caret{transform:rotate(90deg)}
.fin-ttv-prev-body{margin-top:10px}
.fin-ttv-prev-body.is-hidden{display:none}
@media (max-width:600px){
  .fin-ttv-bar{display:none}
  .fin-ttv-table{table-layout:auto}
  .fin-ttv-table th,.fin-ttv-table td{padding:7px 8px}
  .fin-ttv-table th:nth-child(n){width:auto}
}

/* Related mini-charts */
.fin-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fin-mini-card{background:linear-gradient(180deg,rgba(30,32,38,.72),rgba(20,21,25,.72));border:1px solid var(--border2);border-radius:14px;padding:16px 18px}
.fin-mini-label{font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--t3);margin-bottom:10px}
.fin-mini-value{font-size:20px;font-weight:700;line-height:1;color:var(--t1);font-variant-numeric:tabular-nums;margin-bottom:2px}
.fin-mini-chart{width:100%;height:56px;margin-top:10px;display:block}

/* Scaling guidance — pedal view (2026-09 redesign). `.fin-scale-card` is the
   shared card recipe reused by the draw lever (A3) and the working columns
   (A5); `.fin-scale-why`/`.fin-scale-blockers`/`.fin-scale-btn` are the
   remaining pre-redesign primitives still reused (forecast note, forecast
   warning, provenance-row action buttons). Everything else that used to live
   under this banner (the 4-card grid, the gate rows, the flat detail-line
   stack, the old proj-col boxes) is gone — see CLAUDE.md. */
.fin-scale-card{background:linear-gradient(180deg,rgba(30,32,38,.72),rgba(20,21,25,.72));border:1px solid var(--border2);border-left:3px solid var(--border2);border-radius:14px;padding:16px 18px;min-width:0}
.fin-scale-why{font-size:11px;line-height:1.5;color:var(--t3)}
.fin-scale-blockers{font-size:11px;line-height:1.5;color:var(--gold);margin-top:6px}
.fin-scale-btn{background:transparent;border:1px solid var(--border2);border-radius:7px;color:var(--t2);font-size:11px;font-weight:600;padding:3px 9px;cursor:pointer;margin-left:8px}
.fin-scale-btn:hover{color:var(--t1);border-color:var(--t3)}
.fin-scale-detail:empty{display:none}

/* A1 — verdict header */
.fin-verdict-row{display:flex;align-items:flex-end;gap:26px;flex-wrap:wrap}
.fin-verdict-main{min-width:0}
.fin-verdict-eyebrow{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);margin:0 0 10px}
.fin-verdict-line{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.fin-verdict-headline{font-size:46px;font-weight:800;letter-spacing:-1.6px;line-height:1;font-variant-numeric:tabular-nums}
.fin-verdict-pill{font-size:13px;font-weight:700;padding:5px 12px;border-radius:20px;white-space:nowrap;font-variant-numeric:tabular-nums}
.fin-verdict-pill.up{background:rgba(47,163,100,.12);color:var(--green)}
.fin-verdict-pill.down{background:rgba(224,85,76,.12);color:var(--red)}
/* The cap is a separate fact from the colour: a `capped` verdict can still be
   an increase (green headline), and this tag is what says the increase was
   held to what the book can carry (or the hard ceiling) rather than the full
   growth-ceiling ask. */
.fin-verdict-tag{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:20px;white-space:nowrap;background:rgba(217,170,69,.12);color:var(--gold)}
.fin-verdict-sub{font-size:14px;color:var(--t2);margin-top:12px;line-height:1.5}
.fin-verdict-bind{color:var(--t1);font-weight:600}
.fin-verdict-actions{display:flex;align-items:center;gap:10px;margin-left:auto;flex-wrap:wrap}
.fin-ghost-btn{font-size:12px;font-weight:600;padding:8px 14px;border:1px solid var(--border2);border-radius:9px;background:transparent;color:var(--t2);cursor:pointer;font-family:inherit;transition:color var(--tr-base) ease,border-color var(--tr-base) ease}
.fin-ghost-btn:hover{color:var(--t1);border-color:var(--border3)}

/* A2 — headroom track */
.fin-hr-track{display:flex;height:52px;border-radius:12px;overflow:hidden;gap:2px;margin-top:26px}
.fin-hr-seg{display:flex;align-items:flex-end;padding-bottom:8px;transition:flex-grow var(--tr-base) ease}
.fin-hr-seg-running{background:linear-gradient(180deg,#3a4149,#2b3037)}
.fin-hr-seg-take{background:linear-gradient(180deg,rgba(47,163,100,.42),rgba(47,163,100,.22));border-top:1px solid rgba(47,163,100,.6)}
.fin-hr-seg-cash{background:rgba(217,170,69,.12);border-top:1px solid rgba(217,170,69,.4)}
.fin-hr-seg-full{background:rgba(255,255,255,.03)}
.fin-hr-seg-pullback{background:rgba(224,85,76,.20)}
.fin-hr-seg-nothing{background:rgba(224,85,76,.14)}
.fin-hr-seg-notgraded{background:rgba(76,141,255,.10)}
.fin-hr-seg-cap{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding-left:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fin-hr-ticks{display:flex;gap:2px;margin-top:9px}
.fin-hr-tick{border-left:1px solid var(--border2);padding-left:10px;min-width:0}
.fin-hr-tick-val{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--t1);white-space:nowrap}
.fin-hr-tick-cap{font-size:11px;color:var(--t3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* A3 — draw lever + outcome */
.fin-lever-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:14px;margin-top:30px}
.fin-lever-eyebrow{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);margin-bottom:10px}
.fin-lever-free{font-size:11px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--t3)}
.fin-lever-none{margin-top:14px}
.fin-lever-none-title{font-size:13px;font-weight:700;color:var(--red)}
.fin-lever-none-body{font-size:12px;color:var(--t3);margin-top:3px}
.fin-lever-slider input[disabled]{opacity:.45;cursor:not-allowed}
.fin-lever-figrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.fin-lever-figcol{min-width:0}
.fin-lever-fig{font-size:34px;font-weight:800;letter-spacing:-1px;line-height:1;color:var(--t1);font-variant-numeric:tabular-nums;white-space:nowrap}
.fin-lever-figcap{font-size:11px;color:var(--t3);margin-top:4px}
.fin-lever-arrow{font-size:22px;color:#4a5158;line-height:1}
.fin-lever-consequence{font-size:12px;margin-top:14px;line-height:1.5}
.fin-lever-reason{font-size:11px;line-height:1.5;color:var(--t3);margin-top:6px}
.fin-lever-warn{font-size:11px;line-height:1.5;color:var(--gold);margin-top:6px}
.fin-lever-slider{margin-top:16px}
.fin-lever-slider input[type='range']{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:var(--border2);outline:none;cursor:pointer}
.fin-lever-slider input[type='range']::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--t1);border:4px solid var(--accent);box-shadow:0 2px 10px rgba(0,0,0,.6);cursor:pointer}
.fin-lever-slider input[type='range']::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--t1);border:4px solid var(--accent);box-shadow:0 2px 10px rgba(0,0,0,.6);cursor:pointer}
.fin-lever-presets{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.fin-lever-preset{font-size:11.5px;font-weight:600;padding:6px 11px;border-radius:8px;border:1px solid var(--border2);background:transparent;color:var(--t2);cursor:pointer;font-family:inherit;transition:color var(--tr-base) ease,border-color var(--tr-base) ease}
.fin-lever-preset:hover{color:var(--t1);border-color:var(--border3)}
.fin-lever-preset-target{border-color:rgba(76,141,255,.4);color:var(--accent)}
.fin-lever-buys{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 12px}
.fin-lever-buy-val{font-size:26px;font-weight:700;line-height:1;color:var(--t1);font-variant-numeric:tabular-nums}
.fin-lever-buy-cap{font-size:11px;color:var(--t3);margin-top:6px}
.fin-lever-footer{font-size:11px;color:var(--t3);margin-top:16px;padding-top:12px;border-top:1px solid var(--border);line-height:1.5}

/* A4 — evidence strip (always visible) */
.fin-ev-strip{display:flex;border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-top:22px}
.fin-ev-cell{flex:1;min-width:0;padding:14px 16px;border-left:1px solid var(--border)}
.fin-ev-cell:first-child{border-left:none}
.fin-ev-label{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);margin-bottom:8px}
.fin-ev-value{font-size:16px;font-weight:700;color:var(--t1);font-variant-numeric:tabular-nums;line-height:1.2}
.fin-ev-note{font-size:11px;color:var(--t3);margin-top:4px}

/* Provenance rows — cost basis / QuickBooks / date-integrity, always visible */
.fin-prov-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 12px;margin-top:8px;border-left:3px solid var(--border2);background:rgba(255,255,255,.02);border-radius:0 8px 8px 0}
.fin-prov-key{flex:0 0 190px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--t3)}
.fin-prov-sentence{flex:1;min-width:0;font-size:12px;color:var(--t2);line-height:1.5}

/* A5 — the working */
.fin-work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.fin-work-title{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);margin-bottom:6px}
.fin-work-row{padding:8px 0;border-bottom:1px solid var(--border)}
.fin-work-row:last-of-type{border-bottom:none}
.fin-work-row-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.fin-work-k{font-size:12px;color:var(--t2)}
.fin-work-v{font-size:13.5px;font-weight:700;color:var(--t1);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.fin-work-n{font-size:10.5px;color:var(--t3);margin-top:2px}
.fin-work-foot{font-size:11px;color:var(--t3);margin-top:10px;line-height:1.5}
.fin-work-forecast{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
.fin-work-fcol{border-left:2px solid #3a4149;padding:10px 0 10px 14px;min-width:0}
.fin-work-fcol.is-near{border-left-color:var(--green)}
.fin-work-ftag{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--t3)}
.fin-work-fclients{font-size:19px;font-weight:700;color:var(--t1);font-variant-numeric:tabular-nums;margin-top:4px}
.fin-work-fmoney{font-size:12px;color:var(--t2);margin-top:2px;font-variant-numeric:tabular-nums}
.fin-work-fmoney .cash{color:var(--green);font-weight:600}

/* ===== Scaling plan editor (Screen B, 2026-09 redesign) =====
   A VIEW of #finScaling (_finScalingView === 'plan'), not a modal — replaces
   the old .gp-* label-above-box modal layout entirely. Card recipe matches
   the tab's other cards (.fin-hero-card / .fin-rail / .fin-scale-card). */
.fin-plan-wrap{max-width:1180px}
.fin-plan-head{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.fin-plan-head-text{flex:1 1 320px;min-width:220px}
.fin-plan-title{font-size:22px;font-weight:700;letter-spacing:-.5px;margin:0 0 4px;color:var(--t1)}
.fin-plan-sub{font-size:12.5px;color:var(--t3);line-height:1.5}
.fin-plan-head-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.fin-plan-btn-ghost{background:transparent;border:1px solid var(--border2);border-radius:9px;padding:8px 14px;font-size:12px;font-weight:600;color:var(--t2);cursor:pointer;font-family:inherit;transition:color var(--tr-base) ease,border-color var(--tr-base) ease}
.fin-plan-btn-ghost:hover{color:var(--t1);border-color:var(--border3)}
.fin-plan-btn-ghost.fin-plan-btn-muted{color:var(--t3)}
.fin-plan-btn-save{background:var(--accent);color:#fff;border:none;border-radius:9px;padding:9px 18px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;transition:filter var(--tr-base) ease}
.fin-plan-btn-save:hover:not(:disabled){filter:brightness(1.07)}
.fin-plan-btn-save:disabled{opacity:.6;cursor:not-allowed}

/* Status banner — the 7 editor states share one shape, coloured by tone. */
.fin-plan-status{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-radius:10px;font-size:12.5px;line-height:1.4;margin:0 0 18px;border:1px solid var(--border)}
.fin-plan-status--accent{background:var(--accent-dim);border-color:rgba(76,141,255,.35);color:var(--accent)}
.fin-plan-status--good{background:rgba(47,163,100,.1);border-color:rgba(47,163,100,.3);color:var(--green)}
.fin-plan-status--bad{background:var(--danger-dim,rgba(224,85,76,.1));border-color:rgba(224,85,76,.3);color:var(--red)}
.fin-plan-status--watch{background:rgba(217,170,69,.1);border-color:rgba(217,170,69,.3);color:var(--gold)}
.fin-plan-status--muted{background:rgba(255,255,255,.02);color:var(--t3)}
.fin-plan-status-text{flex:1;min-width:0}
.fin-plan-status-action{flex:none;background:transparent;border:1px solid currentColor;border-radius:7px;padding:4px 11px;font-size:11px;font-weight:700;color:inherit;cursor:pointer;font-family:inherit;white-space:nowrap}
.fin-plan-status-action:hover{filter:brightness(1.15)}

/* Body: rail | fields | preview */
.fin-plan-body{display:grid;grid-template-columns:236px 1fr 300px;gap:16px;align-items:start}
.fin-plan-rail{padding:10px 9px 12px}
.fin-plan-rail-item{align-items:center}
.fin-plan-rail-text{display:flex;flex-direction:column;gap:2px;min-width:0;overflow:hidden}
.fin-plan-rail-name{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fin-plan-rail-sub{font-size:11px;color:var(--t3)}
.fin-plan-rail-foot{font-size:11px;line-height:1.5;color:var(--t3);padding:10px 11px 0}
.fin-plan-rail-item.on .fin-plan-rail-sub{color:rgba(255,255,255,.75)}

.fin-plan-fields{background:linear-gradient(180deg,rgba(30,32,38,.72),rgba(20,21,25,.72));border:1px solid var(--border2);border-radius:14px;padding:6px 20px 8px;min-width:0}
.fin-plan-section-title{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);padding:14px 0 4px}
.fin-plan-row{padding:14px 0;border-bottom:1px solid var(--border)}
.fin-plan-row:last-child{border-bottom:none}

/* Sentence row: prose -> input -> prose -> measured chip */
.fin-plan-sentence{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.fin-plan-pre{font-size:13.5px;color:var(--t1)}
.fin-plan-post{font-size:13.5px;color:var(--t2)}
.fin-plan-input{width:104px;font-size:14px;font-weight:700;padding:7px 10px;text-align:right;background:var(--bg2);color:var(--t1);border:1px solid var(--border3);border-radius:8px;font-variant-numeric:tabular-nums;font-family:inherit}
.fin-plan-input:focus{outline:none;border-color:var(--accent)}
.fin-plan-input:disabled{opacity:.6;cursor:not-allowed}
.fin-plan-spacer{flex:1 1 auto;min-width:8px}
.fin-plan-chip{font-size:11px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.fin-plan-hint{font-size:11.5px;line-height:1.5;color:var(--t3);margin-top:7px}
.fin-plan-hint--indent{margin-left:49px}

/* Toggle row: 38x22 pill switch + label + state tag */
.fin-plan-toggle-line{display:flex;align-items:center;gap:11px}
.fin-plan-switch{width:38px;height:22px;border-radius:11px;border:none;background:var(--border2);position:relative;cursor:pointer;padding:0;flex:none;transition:background var(--tr-base) ease}
.fin-plan-switch.on{background:var(--accent)}
.fin-plan-switch:disabled{opacity:.6;cursor:not-allowed}
.fin-plan-switch-knob{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform var(--tr-base) ease}
.fin-plan-switch.on .fin-plan-switch-knob{transform:translateX(16px)}
.fin-plan-toggle-label{font-size:13.5px;font-weight:600;color:var(--t1)}
.fin-plan-tag{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}

/* Grid row: fields nobody argues about */
.fin-plan-grid-title{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);margin-bottom:10px}
.fin-plan-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 14px}
.fin-plan-grid-item{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:var(--t2)}
.fin-plan-grid-unit{color:var(--t3);font-weight:500}
.fin-plan-grid-input{width:76px;text-align:right;background:var(--bg2);color:var(--t1);border:1px solid var(--border3);border-radius:7px;padding:6px 8px;font-size:12.5px;font-variant-numeric:tabular-nums;font-family:inherit}
.fin-plan-grid-input:focus{outline:none;border-color:var(--accent)}
.fin-plan-grid-input:disabled{opacity:.6;cursor:not-allowed}

/* Sticky "WHAT THIS CHANGES" preview */
.fin-plan-preview{background:linear-gradient(180deg,rgba(30,32,38,.72),rgba(20,21,25,.72));border:1px solid var(--border2);border-radius:14px;padding:18px 20px 20px;position:sticky;top:20px;min-width:0}
.fin-plan-preview-eyebrow{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--t3);margin-bottom:10px}
.fin-plan-preview-value{font-size:30px;font-weight:800;letter-spacing:-1px;line-height:1;font-variant-numeric:tabular-nums;margin-bottom:8px}
.fin-plan-preview-delta{font-size:12px;color:var(--t2);margin-bottom:6px}
.fin-plan-preview-binding{font-size:12px;color:var(--t3);line-height:1.5}
.fin-plan-preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0;padding-top:14px;border-top:1px solid var(--border)}
.fin-plan-preview-cell-v{font-size:20px;font-weight:700;color:var(--t1);font-variant-numeric:tabular-nums;line-height:1.2}
.fin-plan-preview-cell-c{font-size:11px;color:var(--t3);margin-top:2px}
.fin-plan-preview-footer{font-size:11.5px;color:var(--t3);line-height:1.5;padding-top:12px;border-top:1px solid var(--border)}

/* Responsive */
@media(max-width:1400px){
  .fin-secondary-grid{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:1100px){
  .fin-hero-grid{grid-template-columns:repeat(2,1fr)}
  .fin-secondary-grid{grid-template-columns:repeat(3,1fr)}
  .fin-md{grid-template-columns:1fr}
  .fin-rail{position:static}
  .fin-lever-grid{grid-template-columns:1fr}
  .fin-work-grid{grid-template-columns:1fr}
  .fin-plan-body{grid-template-columns:1fr}
  .fin-plan-rail{position:static;display:flex;flex-wrap:wrap;gap:6px;padding:8px}
  .fin-plan-rail-item{flex:1 1 auto;min-width:150px}
  .fin-plan-preview{position:static}
}
@media(max-width:640px){
  .fin-hero-grid{grid-template-columns:1fr}
  .fin-secondary-grid{grid-template-columns:1fr 1fr}
  .fin-mini-grid{grid-template-columns:1fr}
  .fin-verdict-headline{font-size:34px}
  /* The track keeps its segments (the shape is the point) but drops every
     caption — an 11px uppercase label has nowhere to sit at this width. */
  .fin-hr-seg-cap{display:none}
  .fin-hr-ticks{flex-wrap:wrap;row-gap:10px}
  .fin-hr-tick{flex:0 0 calc(50% - 1px)!important}
  .fin-ev-strip{flex-wrap:wrap}
  .fin-ev-cell{flex:0 0 50%;border-bottom:1px solid var(--border)}
  .fin-ev-cell:nth-child(odd){border-left:none}
  .fin-ev-cell:nth-last-child(-n+2){border-bottom:none}
  .fin-work-forecast{grid-template-columns:repeat(2,1fr)}
  .fin-plan-grid{grid-template-columns:1fr}
  .fin-plan-preview-grid{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){
  .fin-hr-seg,.fin-ghost-btn,.fin-lever-preset,.fin-plan-switch,.fin-plan-switch-knob,.fin-plan-btn-ghost,.fin-plan-btn-save{transition:none}
}

/* Light theme surfaces (higher specificity than the generic light rules) */
[data-theme="light"] .fin-hero-card,
[data-theme="light"] .fin-sec-tile,
[data-theme="light"] .fin-rail,
[data-theme="light"] .fin-focus-card,
[data-theme="light"] .fin-mini-card,
[data-theme="light"] .fin-scale-card,
[data-theme="light"] .fin-plan-fields,
[data-theme="light"] .fin-plan-preview{background:rgba(255,255,255,.9);border-color:var(--border);box-shadow:0 8px 32px rgba(76,141,255,.06)}
[data-theme="light"] .fin-rail-group-head,
[data-theme="light"] .fin-hero-cur{color:var(--text3)}
[data-theme="light"] .fin-focus-export{background:var(--card)}
[data-theme="light"] .fin-plan-status--muted{background:rgba(0,0,0,.03)}
[data-theme="light"] .fin-plan-input,
[data-theme="light"] .fin-plan-grid-input{background:#fff}
[data-theme="light"] .fin-plan-switch-knob{box-shadow:0 1px 3px rgba(0,0,0,.25)}

/* Scaling guidance — light-theme fills. The dark gradients above assume a
   near-black shell; on light they need their own values rather than reading
   as an inverted smear. */
[data-theme="light"] .fin-hr-seg-running{background:linear-gradient(180deg,#d7dbe0,#c3c9d0)}
[data-theme="light"] .fin-hr-seg-take{background:linear-gradient(180deg,rgba(47,163,100,.22),rgba(47,163,100,.10));border-top-color:rgba(47,163,100,.5)}
[data-theme="light"] .fin-hr-seg-cash{background:rgba(217,170,69,.16)}
[data-theme="light"] .fin-hr-seg-full{background:rgba(0,0,0,.03)}
[data-theme="light"] .fin-hr-seg-pullback{background:rgba(224,85,76,.16)}
[data-theme="light"] .fin-hr-seg-nothing{background:rgba(224,85,76,.12)}
[data-theme="light"] .fin-hr-seg-notgraded{background:rgba(76,141,255,.10)}
[data-theme="light"] .fin-lever-arrow{color:#9aa0a8}
/* light --gold (#b07d18) on the tint's white-blended background reads 3.33:1 —
   below AA. A darker gold text (5.33:1 on the same tint) is scoped to this
   one tag rather than touching the shared --gold token. */
/* The only two hardcoded dark container backgrounds left in the sheet. Both
   composite to rgb(110,111,114) over --bg in light, putting the INACTIVE
   label (--t3) at 1.11:1. Overridden rather than retokenised so the dark
   theme these were tuned for is byte-identical. */
[data-theme="light"] .fin-subnav,[data-theme="light"] .aa-view-toggle{background:var(--chip)}
@media (prefers-color-scheme:light){
  html:not([data-theme="dark"]):not([data-theme="light"]) .fin-subnav,
  html:not([data-theme="dark"]):not([data-theme="light"]) .aa-view-toggle{background:var(--chip)}
}
[data-theme="light"] .fin-verdict-tag{color:var(--gold-txt)}
[data-theme="light"] .fin-prov-row{background:rgba(0,0,0,.02)}
[data-theme="light"] .fin-work-fcol{border-left-color:#c3c9d0}

/* MRR movement breakdown (Ludication-style New/Expansion/Churn/… rows) */
.mb-list{display:flex;flex-direction:column;gap:2px}
.mb-row{display:flex;align-items:center;gap:var(--s2);padding:7px 0;border-bottom:1px solid var(--border)}
.mb-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.mb-pos{color:var(--green)}
.mb-neg{color:var(--red)}
.mb-dot.mb-pos{background:var(--green)}
.mb-dot.mb-neg{background:var(--red)}
.mb-label{flex:1;font-size:var(--fz-base);color:var(--text2)}
.mb-count{display:inline-block;min-width:18px;text-align:center;font-size:var(--fz-xs);color:var(--text3);background:var(--card2);border-radius:10px;padding:1px 6px;margin-left:4px}
.mb-val{font-variant-numeric:tabular-nums;font-weight:var(--fw-semibold);font-size:var(--fz-base)}
.mb-net{display:flex;align-items:center;justify-content:space-between;margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--border2);font-weight:var(--fw-bold);font-size:var(--fz-md)}
.mb-net span:first-child{color:var(--text)}
.mb-empty{color:var(--text3);font-size:var(--fz-base);padding:var(--s4) 0}
/* Clickable breakdown rows → open the client list for that movement bucket */
.mb-row.mb-clickable{cursor:pointer;margin:0 -8px;padding-left:8px;padding-right:8px;border-radius:var(--r2)}
.mb-row.mb-clickable:hover{background:var(--accent-dim)}
.mb-row.mb-clickable:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* Rich chart-hover tooltip: metric label under the value (Ludication-style) */
.mov-tip-metric{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--text3);margin-top:1px;font-weight:var(--fw-semibold)}
/* Click-to-drill modal rows: hover affordance for clients that open a modal */
.fin-drill-row[data-cid]:hover{background:var(--accent-dim)}

/* ===== AD ACCOUNTS TAB (redesign 2a — failing-first triage) ===== */
.ad-sync-bar{display:flex;align-items:center;gap:10px}
/* Accounts | Creatives segmented toggle (Package F, migration 090) — same
   pill shape as .fin-subnav, sized down for a header row rather than its own
   line. */
.aa-view-toggle{display:flex;gap:2px;align-items:center;padding:3px;border:1px solid var(--border);border-radius:10px;background:var(--card)}
.aa-view-btn{appearance:none;border:0;background:transparent;color:var(--t3);font-size:12.5px;font-weight:600;letter-spacing:.01em;height:28px;padding:0 13px;border-radius:7px;cursor:pointer;white-space:nowrap;transition:background .16s ease,color .16s ease;font-family:inherit}
.aa-view-btn:hover{color:var(--t1);background:rgba(255,255,255,.04)}
.aa-view-btn[aria-pressed="true"]{color:var(--t1);background:var(--border2)}
.aa-view-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* Cap + center the whole tab on ultrawide monitors (matches #tab-finance) so it
   doesn't hug the left edge with a huge void on the right. The --aa-callout-*
   vars carry the callout colors (dark defaults here, light overrides below) so
   that intrinsically-tinted piece re-themes too. */
#tab-ad_accounts{
  max-width:1760px;margin-inline:auto;
  --aa-callout:#e6b0ac;--aa-callout-b:#f0c4c0;
  --aa-panel-shadow:0 10px 30px rgba(0,0,0,.35);
  /* Dimmed red/green prose on a tinted KPI tile (the "3 changed today ·
     2 underperforming" / all-clear captions) — dark defaults, light
     overrides below so the tile stays legible off the dark palette. */
  --aa-alertdim:#a86e69;--aa-okdim:#6f9c83;
}
/* Light mode (explicit toggle OR OS-auto with no override) — darken the callout
   so it reads on a light background, and swap the drill panel's heavy black
   drop-shadow for a soft blue-grey one (the black one muddied on white). */
[data-theme="light"] #tab-ad_accounts{
  --aa-callout:#a5352c;--aa-callout-b:#7d201a;
  --aa-panel-shadow:0 12px 32px rgba(15,26,51,.12);
  --aa-alertdim:#a5352c;--aa-okdim:#1f7a4c;
}
@media (prefers-color-scheme:light){
  html:not([data-theme="dark"]):not([data-theme="light"]) #tab-ad_accounts{
    --aa-callout:#a5352c;--aa-callout-b:#7d201a;
    --aa-panel-shadow:0 12px 32px rgba(15,26,51,.12);
    --aa-alertdim:#a5352c;--aa-okdim:#1f7a4c;
  }
}
#adAccountsRoot .num{font-variant-numeric:tabular-nums}

/* KPI strip — 4 tiles. Needs audit leads (the tile you act on), then Managed
   spend, then Portfolio ad health (the widest — it carries the most content),
   then Unmapped (§1.1 of the UI-refresh spec). */
.aa-kpis{display:grid;grid-template-columns:1.5fr 1.2fr 1.4fr .9fr;gap:12px;margin:6px 0 24px}
.aa-kpi{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--track);border-radius:12px;padding:14px 16px}
.aa-kpi-label{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--t3);font-weight:600}
.aa-kpi-unit{color:var(--t3)}
.aa-kpi-valrow{display:flex;align-items:flex-end;gap:10px;margin-top:6px}
.aa-kpi-val{font-size:25px;font-weight:800;color:var(--t1);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.aa-kpi-delta{font-size:12px;font-weight:600;padding-bottom:4px;font-variant-numeric:tabular-nums}
.aa-kpi-sub{font-size:11px;color:var(--t3);margin-top:2px}
/* Managed-spend trend line — the Finance hero card's sparkline treatment
   (.fin-hero-spark), sized to this card. The KPI cards share a grid row that
   stretches to the tallest of them, and the Portfolio-health card (score line +
   band bar + legend) already left this one visibly empty below its value, so the
   line largely fills space that was there rather than adding a new band. */
.aa-kpi-spark{width:100%;height:34px;margin:10px 0 0;display:block;overflow:visible}
button.aa-kpi-link{display:inline-block;background:none;border:none;padding:0;font-family:inherit;cursor:pointer;color:var(--accent);font-weight:600}
button.aa-kpi-link:hover{color:#6ea3ff;text-decoration:underline}
/* Bordered-button treatment for a tile's primary action (§1.5) — replaces bare
   blue link text so "Link to a client →" reads as a control, not a caption. */
.aa-kpi-btn{display:inline-flex;align-items:center;gap:4px;margin-top:auto;align-self:flex-start;color:var(--accent);background:rgba(76,141,255,.1);border:1px solid rgba(76,141,255,.28);border-radius:7px;padding:5px 9px;font:600 11px/1.3 inherit;white-space:nowrap;cursor:pointer}
.aa-kpi-btn:hover{background:rgba(76,141,255,.16)}
.aa-kpi-alert{background:rgba(224,85,76,.07);border-color:rgba(224,85,76,.28)}
.aa-kpi-alert .aa-kpi-label{color:var(--red)}
.aa-kpi-alert .aa-kpi-val{color:var(--red);margin-top:6px}
.aa-kpi-alert .aa-kpi-sub{color:var(--aa-alertdim);font-size:11.5px}
/* Up to 3 offending-account chips + a "+N" overflow (§1.3) — buttons that
   scroll the matching failing card into view and flash it. */
.aa-audit-chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:11px}
.aa-audit-chip{font:600 10.5px/1.4 inherit;color:var(--red);background:rgba(224,85,76,.14);border:none;border-radius:6px;padding:2px 8px;cursor:pointer;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aa-audit-chip:hover{background:rgba(224,85,76,.22)}
.aa-audit-chip-more{color:var(--t2);background:var(--chip);cursor:default}
.aa-audit-chip-more:hover{background:var(--chip)}
/* Nothing flagged today — the tile reads as a pass, not an alarm. */
.aa-kpi-clear{background:rgba(47,163,100,.07);border-color:rgba(47,163,100,.28)}
.aa-kpi-clear .aa-kpi-label{color:var(--green)}
.aa-kpi-clear .aa-kpi-val{color:var(--green);margin-top:6px}
.aa-kpi-clear .aa-kpi-sub{color:var(--aa-okdim)}
/* Managed-spend trend line (§1.2) — same geometry as Finance's .fin-hero-spark. */
.aa-kpi-spark{width:100%;height:30px;margin:10px 0 6px;display:block}
/* Portfolio-health tile */
.aa-health-line{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin-top:6px}
/* The verdict leads, in its colour; the score sits beside it, small and muted —
   the same shape as the Finance hero's .fin-hero-verdict. */
.aa-health-word{font-size:25px;font-weight:700;letter-spacing:-.3px;line-height:1.1}
.aa-health-num{font-size:13px;color:var(--t3);font-weight:600}
/* Portfolio VERDICT (portfolioAdVerdict, 2026-09-30): four levels on the tile's
   word — purple crushing it, green healthy, amber needs attention, red act now.
   Distinct from the per-account aa-band-* colours in the bar. */
.aa-verdict-purple{color:var(--band-strong-txt)}.aa-verdict-green{color:var(--band-stable-txt)}
.aa-verdict-amber{color:var(--gold-txt)}.aa-verdict-red{color:var(--red-txt)}.aa-verdict-none{color:var(--t3)}
.aa-kpi-cost{font-size:11.5px;font-weight:600;margin-top:8px;color:var(--t3)}
.aa-kpi-cost.aa-cost-amber{color:var(--gold-txt)}.aa-kpi-cost.aa-cost-red{color:var(--red-txt)}
.aa-kpi-cost.aa-cost-good{color:var(--band-stable-txt)}
.aa-health-bar{display:flex;height:9px;border-radius:5px;overflow:hidden;margin-top:10px;gap:2px}
.aa-health-bar span{display:block}
.aa-health-bar span:first-child{border-radius:4px 0 0 4px}
.aa-health-bar span:last-child{border-radius:0 4px 4px 0}
.aa-health-legend{display:flex;gap:14px;margin-top:9px;font-size:11.5px;font-weight:600}
.aa-band-red{color:var(--red)}.aa-band-yellow{color:var(--band-stable-txt)}.aa-band-green{color:var(--band-strong-txt)}.aa-band-null{color:var(--t3)}
.aa-chipband-red{color:var(--red);background:rgba(224,85,76,.14)}
.aa-chipband-yellow{color:var(--band-stable-txt);background:rgba(47,163,100,.14)}
.aa-chipband-green{color:var(--band-strong-txt);background:rgba(155,108,255,.16)}
.aa-chipband-null{color:var(--t3);background:var(--chip)}
/* Reconciliation line (§1.4) — the one fact the deleted insights-rail donut
   contributed: scored spend + gathering-data spend must sum to managed spend,
   in the same currency, or the two numbers on the tab look like a bug. */

/* 7-day portfolio-health trend line (media-buyer KPI, under the live score) */
.aa-kpi-avg{font-size:11.5px;font-weight:600;margin-top:8px;color:var(--t3)}
.aa-kpi-avg-delta{font-weight:700}
.aa-kpi-avg-collecting{color:var(--t3);font-style:italic}
.aa-kpi-avg-target{color:var(--band-strong-txt)}
.aa-kpi-avg-floor{color:var(--band-stable-txt)}
.aa-kpi-avg-below{color:var(--gold-txt)}
.aa-kpi-avg-alarm{color:var(--red)}

/* Section titles */
.aa-section-title{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--t1);margin:0 0 13px}
.aa-section-note{font-size:12px;color:var(--t3);font-weight:500;text-transform:none;letter-spacing:0}
.aa-alert-dot{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px rgba(224,85,76,.16);animation:pulse 2s infinite}
.aa-ok-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(47,163,100,.16)}
.aa-section-ok{color:var(--t2)}

/* Two labelled sub-groups inside the "Needs attention today" band (§2.1) — an
   ad-performance card can never sit adjacent to a lead-delivery one, since
   they're different problems with different owners and different fixes.
   The nested .aa-cards grid keeps its OWN 22px margin for every other caller,
   so it's zeroed here and the group itself carries the spacing instead. */
.aa-group{margin-bottom:18px}
.aa-group .aa-cards{margin-bottom:0}
.aa-group-head{display:flex;align-items:center;gap:10px;margin:0 0 11px}
.aa-group-label{font:700 10.5px/1 inherit;letter-spacing:.07em;text-transform:uppercase;color:var(--t3)}
.aa-group-count{font:700 10.5px/1 inherit;color:var(--t2);background:var(--chip);border-radius:999px;padding:1px 7px}
.aa-group-note{font-size:11.5px;color:var(--t3);font-weight:400}
.aa-group-rule{flex:1;height:1px;background:var(--track)}

/* Score ring (conic) — cards, table, gold band */
.aa-ring{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;flex-shrink:0}
.aa-ring-in{display:flex;align-items:center;justify-content:center;border-radius:50%;font-weight:800;line-height:1}

/* Failing-account cards — a compact grid (fits ~5-6 across on a wide monitor,
   fewer as it narrows); the whole card is the click target (no button). The
   problem sentence moves to the card's title tooltip so cards stay short. */
.aa-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(256px,1fr));gap:11px;margin-bottom:22px;align-items:stretch}
.aa-card{display:flex;flex-direction:column;gap:9px;background:var(--card);border:1px solid var(--border);border-left:3px solid var(--red);border-radius:11px;padding:12px 13px;cursor:pointer;transition:border-color var(--tr-base),box-shadow var(--tr-base),transform var(--tr-base),background var(--tr-base)}
.aa-card:hover{background:var(--card-hover);border-color:var(--border2);border-left-color:var(--red);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.aa-card:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.aa-card-open{box-shadow:0 0 0 1px rgba(224,85,76,.45);background:var(--card-hover)}
/* Landed-on flash — a Needs-audit chip (§1.3) scrolled here via window.scrollTo. */
.aa-card-flash{animation:aaCardFlash 1.4s ease-out}
@keyframes aaCardFlash{0%{box-shadow:0 0 0 3px rgba(76,141,255,.45)}100%{box-shadow:0 0 0 0 rgba(76,141,255,0)}}
@media (prefers-reduced-motion:reduce){.aa-card-flash{animation:none;box-shadow:0 0 0 3px rgba(76,141,255,.45)}}
.aa-card-top{display:flex;align-items:center;gap:10px}
.aa-card-id{min-width:0;flex:1}
.aa-card-name{font-size:13.5px;font-weight:700;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aa-card-auditing{font-size:10px;font-weight:700;color:var(--red);background:rgba(224,85,76,.14);border-radius:6px;padding:1px 6px;letter-spacing:.02em;white-space:nowrap;flex-shrink:0}
.aa-card-idmeta{display:flex;align-items:center;gap:6px;margin-top:3px;flex-wrap:nowrap;overflow:hidden}
.aa-muted{font-size:11px;color:var(--t3);white-space:nowrap}
.aa-plat-tag{font-size:11px;font-weight:600;color:var(--t2);background:var(--chip);border:1px solid var(--border2);border-radius:5px;padding:1px 6px;flex-shrink:0}
.aa-plat-tag-sm{font-size:10px;color:var(--t3);border-color:transparent;padding:1px 5px;border-radius:4px}
/* Flags pinned to ONE row (nowrap) so a card with 4 flags is never taller than
   one with 1 — the grid stays dense and uniform. Overflow past the cap
   collapses into a hard "+N" chip (_flagBadgesCapped in app.js), never a
   mid-word fade — a faded flag's count was unknowable (§2.3 of the UI-refresh
   spec: the old mask-image is gone, deliberately, not just unused). */
.aa-card-flags{display:flex;gap:5px;flex-wrap:nowrap;overflow:hidden}
.aa-card-flags .ad-badge{flex-shrink:0}
/* The dismiss link + flag chips share one row with a fixed minimum height
   (§2.2), so a card with neither still lines its metric grid up with a card
   that has both. */
.aa-card-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:19px}
/* Change-detector line on a failing card — the actionable "what just happened".
   ALWAYS rendered (§2.2): a confirmed-red card with no fresh alert gets the
   standing-verdict copy in this same box instead of an empty gap, so the
   metric row below it lines up with every other card in the grid. */
.aa-card-alert{display:flex;align-items:center;min-height:31px;font-size:11px;line-height:1.35;font-weight:600;border-radius:6px;padding:5px 7px;border:1px solid transparent}
.aa-card-alert-critical{color:var(--red);background:color-mix(in srgb,var(--red) 12%,transparent);border-color:color-mix(in srgb,var(--red) 28%,transparent)}
.aa-card-alert-warn{color:var(--amber);background:color-mix(in srgb,var(--amber) 12%,transparent);border-color:color-mix(in srgb,var(--amber) 28%,transparent)}
/* "Not a problem…" — the dismissal affordance. Deliberately quiet: it reads as
   a link rather than a primary action, and is only rendered for a dismissible
   row (see _dismissBtnHtml / migration 077). */
.aa-dismiss-btn{background:none;border:none;padding:0;font:inherit;font-size:11px;font-weight:600;color:var(--text3);cursor:pointer;text-decoration:underline;text-underline-offset:2px;text-decoration-color:color-mix(in srgb,var(--text3) 45%,transparent);flex-shrink:0}
.aa-dismiss-btn:hover{color:var(--text2)}
/* The trail of what was silenced. Always present when anything is dismissed —
   a card that vanishes without explanation is indistinguishable from a bug. */
.aa-dismissed-note{margin:10px 0 0;font-size:11px;color:var(--text3)}
.aa-dismissed-note>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;padding:3px 0;font-weight:600;color:var(--text3)}
.aa-dismissed-note>summary::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--text3);opacity:.5}
.aa-dismissed-note>summary:hover{color:var(--text2)}
.aa-dismissed-note ul{margin:6px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:5px;line-height:1.5}
.aa-dismissed-note strong{color:var(--text2)}
.aa-dismissed-note em{font-style:normal;color:var(--text2)}
/* Hidden-but-spending disclosure. Amber, not red: an account we cannot see is
   not a confirmed problem, it is a gap in what the tab can vouch for. Open by
   default — a collapsed summary is how it stayed invisible in the first place. */
.aa-hidden-spend{margin:10px 0 0;font-size:11.5px;color:var(--text3);border-left:2px solid var(--amber);padding:2px 0 2px 10px}
.aa-hidden-spend>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;padding:3px 0;font-weight:600;color:var(--amber)}
.aa-hidden-spend>summary::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--amber)}
.aa-hidden-spend-why{margin:4px 0 0;line-height:1.5;color:var(--text3)}
.aa-hidden-spend ul{margin:6px 0 2px;padding-left:18px;display:flex;flex-direction:column;gap:6px;line-height:1.6}
.aa-hidden-spend strong{color:var(--text2)}
.aa-hidden-spend .aa-iconbtn{margin-left:8px;vertical-align:baseline}
/* Dismiss dialog */
.adx-wrap{max-width:560px}
.adx-why{margin:-8px 0 14px}
.adx-fine{margin:10px 0 0;font-size:11px}
.adx-reasons{margin:0 0 16px}
/* §8.1 — three headed groups instead of one flat list of seven radios. */
.adx-group{margin:0 0 12px}
.adx-group:last-child{margin-bottom:0}
.adx-group-head{font:700 10px/1.3 inherit;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);margin:0 0 6px}
.adx-group>.adx-reason{margin:0 0 5px}
.adx-group>.adx-reason:last-child{margin-bottom:0}
.adx-reason{display:flex;gap:9px;align-items:flex-start;padding:9px 11px;border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:border-color .12s,background .12s}
.adx-reason:hover{border-color:color-mix(in srgb,var(--text3) 45%,transparent)}
.adx-reason:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.adx-reason input{margin-top:2px;accent-color:var(--accent);flex:none}
.adx-reason-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.adx-reason-body strong{font-size:12.5px;font-weight:600;color:var(--text2)}
.adx-reason-body em{font-style:normal;font-size:11px;color:var(--text3);line-height:1.45}
/* §8.2/§8.3 — real button hierarchy + the disabled-until-picked primary. */
.adx-actions{display:flex;align-items:center;gap:10px;margin-top:18px}
.adx-pick-hint{font-size:11px;color:var(--text3);margin-right:auto}
.adx-btn{border-radius:8px;padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;border:1px solid transparent}
.adx-primary{background:var(--accent);color:#fff}
.adx-primary:hover:not(:disabled){filter:brightness(1.08)}
.adx-primary:disabled{opacity:.5;cursor:not-allowed}
.adx-secondary{background:transparent;color:var(--text2);border-color:var(--border2)}
.adx-secondary:hover{color:var(--text);border-color:var(--border3)}
.adx-close{background:none;border:none;padding:2px;color:var(--text3);font-size:15px;line-height:1;cursor:pointer}
.adx-close:hover{color:var(--text2)}
/* "Something changed today" card — an alert fired but the SCORE has not confirmed
   a red. Amber rail so it never reads as an on-fire account (it may even be green
   or still gathering data); the alarm band's note explains the split. */
.aa-card-change{border-left-color:var(--amber)}
.aa-flag-more{background:var(--chip);color:var(--t2);border-color:transparent}
/* Metrics sit at the card's foot (label / value / delta stacked) so they line
   up across cards in a row and never wrap a big delta beside the value. */
.aa-card-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:auto}
.aa-card-metric{min-width:0}
.aa-metric-label{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--t3);font-weight:600}
.aa-metric-val{font-size:15px;font-weight:800;color:var(--t1);margin-top:2px}
.aa-metric-delta{font-size:10.5px;font-weight:600;margin-top:1px;white-space:nowrap}
.aa-metric-cur{font-size:10.5px;color:var(--t3);margin-top:1px}
.aa-zero{color:var(--red);font-weight:600;font-size:12px}

/* Trend sparkline */
.aa-spark{display:flex;align-items:center;gap:8px}
.aa-spark-bars{display:flex;align-items:flex-end;gap:2px;height:22px}
.aa-spark-bar{width:3px;border-radius:1px;opacity:.85}
.aa-trend{font-size:11.5px;font-weight:600}
.aa-flat{color:var(--t3)}

/* Flag pills (shared by cards + table) */
.ad-badge{display:inline-block;padding:2px 8px;border-radius:6px;font-size:10.5px;font-weight:600;background:var(--chip);color:var(--t2);border:1px solid var(--border2)}
.ad-badge-funnel_broken,.ad-badge-spend_no_results,.ad-badge-cost_up,.ad-badge-roas_down{background:rgba(224,85,76,.14);color:var(--red);border-color:transparent}
.ad-badge-low_volume,.ad-badge-chronic_no_results,.ad-badge-low_cvr,.ad-badge-cpc_up{background:rgba(212,148,42,.16);color:var(--amber);border-color:transparent}
.ad-badge-ramping{background:rgba(76,141,255,.16);color:var(--accent);border-color:transparent}
.ad-badge-platform{background:var(--bg2);color:var(--t2);border-color:var(--border2);font-size:10px;letter-spacing:.03em}
.ad-badge-idle{background:var(--track);color:var(--t3);border-color:transparent}
/* Ad-account status chips (e.g. "Payment unsettled") — alert=billing problem, warn=other non-active */
.ad-badge-status-alert{background:rgba(224,85,76,.16);color:var(--red);border-color:transparent}
.ad-badge-status-warn{background:rgba(212,148,42,.16);color:var(--amber);border-color:transparent}
/* Score chips (used in the drill breakdown) */
.ad-chip{display:inline-block;min-width:30px;text-align:center;padding:2px 8px;border-radius:999px;font-weight:700;font-size:12px;color:#fff}
.ad-chip-red{background:var(--red)}
.ad-chip-yellow{background:var(--band-stable)}
.ad-chip-green{background:var(--band-strong)}
.ad-chip-idle{background:var(--track);color:var(--t3)}
.ad-chip-new{background:rgba(76,141,255,.16);color:var(--accent)}
.ad-link-select{background:var(--bg2);color:var(--text);border:1px solid var(--border2);border-radius:6px;padding:3px 6px;font-size:12px;max-width:170px}
.ad-foot{margin-top:16px;font-size:12px;line-height:1.6}
.ad-empty{padding:40px;text-align:center;border:1px dashed var(--border2);border-radius:12px}
/* First-load spinner (shown while the ~2s ad-accounts fetch is in flight). */
.ad-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:72px 20px;color:var(--t3);font-size:13px}
.ad-spinner{width:28px;height:28px;border:3px solid var(--border2);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* One state-card shape for every empty / loading / error / warning state on the
   Ad Accounts tab (accounts view, breakdown panel sub-states, creatives view):
   optional indicator, a title, one sentence, at most one action. Variants only
   change the border/background; the anatomy never changes. */
.ad-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;min-height:168px;padding:26px 20px;border:1px solid var(--track);border-radius:13px;background:transparent}
.ad-state-empty{border-style:dashed;border-color:var(--border2)}
.ad-state-error{border-color:rgba(224,85,76,.28);background:rgba(224,85,76,.06)}
.ad-state-warn{border-color:rgba(212,148,42,.28);background:rgba(212,148,42,.06)}
.ad-state-title{font-size:13px;font-weight:700;color:var(--t1)}
.ad-state-body{font-size:12px;line-height:1.55;color:var(--t3);max-width:300px}
.ad-state-spinner{width:26px;height:26px;border:3px solid var(--border2);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}
.ad-state-dot{width:9px;height:9px;border-radius:50%;background:var(--t3)}
.ad-state-error .ad-state-dot{background:var(--red)}
.ad-state-warn .ad-state-dot{background:var(--amber)}
.ad-state-action{font-size:12px;font-weight:600;border-radius:8px;padding:6px 13px;cursor:pointer;background:var(--chip);border:1px solid var(--border2);color:var(--t2)}
.ad-state-action:hover{color:var(--t1);border-color:var(--t3)}
.ad-state-error .ad-state-action{color:var(--red);border-color:rgba(224,85,76,.4);background:rgba(224,85,76,.1)}
.ad-state-warn .ad-state-action{color:var(--amber);border-color:rgba(212,148,42,.4);background:rgba(212,148,42,.1)}
.ad-state-empty .ad-state-action,.ad-state-loading .ad-state-action{color:var(--accent);border-color:rgba(76,141,255,.28);background:rgba(76,141,255,.1)}
@media (prefers-reduced-motion:reduce){.ad-state-spinner{animation:none}}
@media (max-width:820px){.aa-kpis{grid-template-columns:repeat(2,1fr)}.aa-card{gap:12px}.aa-card-problem{min-width:160px}}

/* ===== LEAD DELIVERY BAND (Meta reported vs GoHighLevel received) ===== */
/* The rail colour is passed in as --aa-ld so one card class covers all three
   states. 'broken'/'gap' reuse the tab's red/amber so severity stays one
   vocabulary; 'unverified' is grey ON PURPOSE — that is our own read failing,
   not the client's integration, and red would make the two indistinguishable. */
/* The quiet row. Deliberately NOT a section title: no uppercase, no heading
   weight, no coloured dot competing with the alert band above it. It is a
   status line, and its job is to take one line when there is nothing wrong. */
.aa-ld-quiet{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:-2px 0 14px;padding:7px 11px;background:var(--card);border:1px solid var(--border);border-radius:9px;font-size:12px;color:var(--t2)}
.aa-ld-quiet strong{color:var(--t1);font-weight:var(--fw-semibold)}
.aa-ld-qdot{width:6px;height:6px;border-radius:50%;background:var(--t3);flex-shrink:0}
/* Grey, not green: "not checked"/"losing leads (shown above)" are not a clean
   verdict, and a green dot beside either sentence would state the opposite of
   what it says (§3.1 of the UI-refresh spec — the row now renders in ALL three
   states, alert included, and only the "all clean" tone earns green). */
.aa-ld-quiet-unchecked .aa-ld-qdot{background:var(--t3)}
.aa-ld-quiet-alert .aa-ld-qdot{background:var(--t3)}
.aa-ld-quiet-ok .aa-ld-qdot{background:var(--green)}
.aa-ld-qtext{flex:1;min-width:0}
.aa-ld-detail{margin-left:auto}
/* A real button with a count badge, never bare text (§3.1) — <summary> keeps
   the native disclosure keyboard/toggle behaviour; only the skin changes. */
.aa-ld-detail>summary{cursor:pointer;font:600 11px/1.3 inherit;color:var(--t2);background:var(--chip);border:1px solid var(--border2);border-radius:7px;padding:4px 9px;list-style:none;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.aa-ld-detail>summary::-webkit-details-marker{display:none}
.aa-ld-detail>summary:hover{color:var(--t1);border-color:var(--t3)}
.aa-ld-detail-n{color:var(--t3);font-weight:600}
.aa-ld-detail[open]{flex-basis:100%;margin-left:0}
.aa-ld-detail ul{margin:4px 0 8px;padding-left:18px;font-size:11.5px;line-height:1.6;color:var(--t2)}
.aa-ld-dline{margin:2px 0 8px;font-size:11.5px;line-height:1.6}
.aa-ld-dreason{color:var(--t3)}
.aa-ld-dreason::after{content:' — '}
.aa-ld-dnames{color:var(--t2)}
.aa-ld-dhead{margin-top:8px;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--t3)}
.aa-cards+.aa-ld-detail{margin:8px 0 14px}
.aa-ld-card{border-left-color:var(--aa-ld,var(--red))}
.aa-ld-card:hover{border-left-color:var(--aa-ld,var(--red))}
.aa-ld-card:focus-visible{outline-color:var(--aa-ld,var(--red))}
/* Eyebrow + a small ratio figure (the ratio may stay, but never as the card's
   largest number — §2.4). */
.aa-ld-eyebrow-row{display:flex;align-items:center;gap:8px}
.aa-ld-eyebrow{font:700 10px/1 inherit;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.aa-ld-pct{margin-left:auto;font-size:12px;font-weight:600;color:var(--t3);font-variant-numeric:tabular-nums}
/* The count-sentence headline ("37 of 38 arrived") — NOT a percentage, so a
   103% card can never read as a failure at a glance the way a bad score does. */
.aa-ld-headline{font-size:17px;font-weight:800;line-height:1.2;font-variant-numeric:tabular-nums}
.aa-ld-caption{font-size:11.5px;color:var(--t3)}
.aa-ld-check{margin:2px 0 0;padding-left:16px;font-size:11.5px;line-height:1.55;color:var(--t2)}
.aa-ld-check li{margin:4px 0}
.aa-ld-src{list-style:none;padding-left:0}
.aa-ld-srchead{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--t3);margin-top:8px}
.aa-ld-more{background:none;border:none;padding:0;font:600 11px/1.3 inherit;color:var(--t3);cursor:pointer;margin-left:auto}
.aa-ld-card:hover .aa-ld-more{color:var(--t2)}
/* Footer row: dismiss (left, when offered) · "What to check →" (right). */
.aa-ld-footer{justify-content:flex-start}

/* ===== AD ACCOUNTS v2 (deltas, "the rest" table + insights rail) ===== */
.aa-delta{font-size:11px;font-weight:var(--fw-semibold);white-space:nowrap}
.aa-good{color:var(--green)}
.aa-bad{color:var(--red)}
.aa-iconbtn{background:var(--bg2);color:var(--text2);border:1px solid var(--border2);border-radius:6px;padding:3px 9px;font-size:11px;cursor:pointer;font-family:inherit}
.aa-iconbtn:hover{color:var(--text);border-color:var(--border3)}
.aa-show-hidden{text-transform:none;letter-spacing:0}
.client-outcome-auto .cos-status strong{color:var(--accent)}

/* Breakdown slot — the reimagined drill, opened inline under a card/band/row. */
.aa-breakdown-slot{margin-bottom:28px}
/* Inside the failing-cards flex column the gap handles spacing, so drop the
   slot's own bottom margin (else the card after the open one sits too far). */
.aa-cards .aa-breakdown-slot{margin-bottom:0}

/* "The rest of the portfolio" head + filter chips */
.aa-rest-head{display:flex;align-items:center;gap:9px;margin-bottom:13px;flex-wrap:wrap}
.aa-rest-title{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--t2);margin:0}
.aa-chips{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.aa-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:9px;font-size:12.5px;font-weight:600;border:1px solid var(--track);background:transparent;color:var(--t3);cursor:pointer;font-family:inherit;transition:color var(--tr-base),border-color var(--tr-base),background var(--tr-base)}
.aa-chip:hover{color:var(--t2);border-color:var(--border2)}
.aa-chip-active{border-color:var(--border3);background:var(--chip);color:var(--t1)}
.aa-chip-n{font-size:11px;font-weight:700;border-radius:999px;padding:1px 7px;background:var(--chip);color:var(--t3)}
.aa-chip-active .aa-chip-n{background:rgba(76,141,255,.18);color:var(--accent)}

/* Full width (§4.8) — the insights rail this used to share a grid with is
   gone; the table alone fills the 1760px container. */
.aa-rest-grid{display:block}
.aa-rest-table-wrap{border:1px solid var(--track);border-radius:13px;overflow:hidden;overflow-x:auto}
.aa-rest-table{width:100%;border-collapse:collapse;font-size:13px}
.aa-rest-table thead tr{background:var(--bg2)}
.aa-rest-table th{text-align:left;padding:11px 14px;color:var(--t3);font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;font-weight:600;white-space:nowrap}
.aa-rest-table th:first-child{padding-left:16px}
.aa-rest-table th.aa-r,.aa-rest-table td.aa-r{text-align:right}
/* A header's basis/state caption — "native", "vs 2.2% cohort", "sorted worst
   first" — muted and never uppercase, so it reads as a note under the label
   rather than a second label (§4.4/§4.6/§9.2). */
.aa-th-note{color:var(--t3);font-weight:500;text-transform:none;letter-spacing:0;margin-left:4px}
.aa-sortable{cursor:pointer;user-select:none}
.aa-sortable:hover{color:var(--t2)}
.aa-sorted{color:var(--accent)}
.aa-rest-row{border-top:1px solid var(--border);cursor:pointer;transition:background var(--tr-base)}
.aa-rest-row:hover{background:rgba(76,141,255,.06)}
.aa-rest-row-open{background:var(--accent-dim)}
/* Inline breakdown row — the drill opens in place under the clicked row. */
.aa-rest-drill-row{background:var(--bg2)}
.aa-rest-drill-cell{padding:0 12px 14px!important;background:var(--bg2)}
/* §4.7 — top-align: the name cell is the tallest (name + sub-line sort row +
   maybe an unsettled note / link select), and center-alignment floated the
   other columns' numbers oddly against it. */
.aa-rest-table td{padding:12px 14px;vertical-align:top}
.aa-rest-scorecell{padding:12px 8px 12px 16px}
.aa-rest-name{font-weight:600;color:var(--t1);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
/* Flags now render INLINE in the name row (§4.2 — the dedicated column was
   empty on most rows and starved the name column of width). */
.aa-rest-name .ad-badge{font-size:10px;padding:2px 7px}
.aa-rest-sub{display:flex;align-items:center;gap:15px;flex-wrap:wrap;font-size:11.5px;color:var(--t3);margin-top:5px}
/* The sub-line figures are sort triggers (Leads / CTR / CPC have no column of
   their own) restyled as label+value pairs — no bordered pills, which at 12
   rows would put 36 pill-shaped buttons on screen competing with the real
   numbers (§4.6, explicitly rejected in the design review). */
.aa-subsort{display:inline-flex;align-items:baseline;gap:5px;background:none;border:0;border-radius:5px;padding:1px 4px;margin:0 -4px;font:inherit;color:inherit;cursor:pointer}
.aa-subsort:hover{background:var(--chip)}
.aa-subsort-label{font-size:11px;color:var(--t3)}
.aa-subsort-val{font-size:11.5px;font-weight:600;color:var(--t2)}
.aa-subsort.is-active .aa-subsort-val{color:var(--t1)}
.aa-subsort:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.aa-rest-link{margin-top:6px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* "No client" — the escape for an unmapped account whose client was deleted
   (client_ad_accounts.client_id is SET NULL, so the picker can never offer it
   again). Quieter than the link select beside it: linking is still the primary
   action, hiding is the answer when there is nothing to link to. */
.aa-rest-nolink{white-space:nowrap}
.aa-rest-spend{color:var(--t1);font-weight:600}
.aa-rest-cur{font-size:10.5px;color:var(--t3);font-weight:500}
.aa-eff-val{color:var(--t1);font-weight:600}
.aa-eff-delta{font-size:11px;font-weight:600;margin-top:1px}
.aa-rest-cvr{color:var(--t2)}
.aa-rest-empty{padding:34px;text-align:center;color:var(--t3);font-size:13px;border:1px solid var(--track);border-radius:13px}
.aa-camp-note{font-size:11px;color:var(--t3);font-weight:400}
/* Cohort opt-in benchmark note (§9.2) — rehomed from the deleted insights
   rail. Lives inside .aa-rest-table-wrap so its border-radius still clips it. */
.aa-rest-benchfoot{padding:10px 14px;border-top:1px solid var(--border);background:var(--bg2);font-size:11.5px;line-height:1.5;color:var(--t3)}
.aa-rest-benchfoot b{color:var(--t2)}
/* Failed-payment (Meta account_status = UNSETTLED) — loud in-row flag so the
   media buyer catches it even on a healthy-scoring row and tells the CSM. */
.aa-rest-row-unsettled{background:rgba(224,85,76,.06)}
.aa-rest-row-unsettled:hover{background:rgba(224,85,76,.10)}
.ad-badge-unsettled{display:inline-flex;align-items:center;gap:5px;background:rgba(224,85,76,.10);color:var(--red);border:1px solid var(--red);font-weight:700;letter-spacing:.03em}
.ad-unsettled-dot{width:6px;height:6px;border-radius:50%;background:var(--red);animation:pulse 1.6s infinite}
.aa-rest-unsettled-note{display:flex;align-items:center;gap:6px;margin-top:5px;font-size:11.5px;font-weight:600;color:var(--red)}
@media (prefers-reduced-motion:reduce){.ad-unsettled-dot{animation:none}}

/* Insights rail — REMOVED (§9.1 of the Ad Accounts UI-refresh spec). Its three
   cards restated numbers found elsewhere on the tab (the spend donut never
   reconciled with the Managed-spend KPI; data freshness duplicated the tab
   header verbatim); the one fact worth keeping — the cohort opt-in benchmark —
   moved to the Opt-in column header + a footer line under the table
   (.aa-th-note / .aa-rest-benchfoot above). The reconciliation the donut
   implied briefly lived on the Portfolio-health KPI tile and was removed
   2026-09-06 — two wrapped prose lines made that card the tallest in the strip,
   which padded all four with dead space. See git history for
   `_insightsRailHtml`/`.aa-rail*`/`.aa-health-reconcile` to revive any of it.
*/

/* ===== AD ACCOUNTS DRILL-DOWN (reimagined campaign breakdown, spec 2a) ===== */
.aad-panel{border:1px solid var(--border2);border-radius:14px;overflow:hidden;background:var(--bg2);box-shadow:var(--aa-panel-shadow,0 10px 30px rgba(0,0,0,.35));animation:aadSlide .18s ease-out}
@keyframes aadSlide{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
/* Header bar */
.aad-head{display:flex;align-items:center;gap:12px;padding:15px 20px;background:var(--card);border-bottom:1px solid var(--track)}
.aad-hd-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.aad-hd-dot-red{background:var(--red)}.aad-hd-dot-stable{background:var(--band-stable)}.aad-hd-dot-green{background:var(--band-strong)}.aad-hd-dot-idle{background:var(--t3)}
.aad-hd-name{font-size:14px;font-weight:700;color:var(--t1)}
.aad-hd-sub2{font-size:12px;color:var(--t3);font-weight:500}
.aad-hd-sub{font-size:11.5px;color:var(--t3);margin-top:2px}
.aad-hd-tools{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap}
.aad-pill{display:inline-flex;align-items:center;gap:6px;background:var(--chip);border:1px solid var(--border2);border-radius:8px;padding:6px 11px;font-size:12px;color:var(--t2)}
.aad-pill-ico{color:var(--t3)}
.aad-select{background:transparent;border:none;color:var(--t2);font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;outline:none}
.aad-search{background:transparent;border:none;color:var(--t1);font-family:inherit;font-size:12px;outline:none;width:130px}
.aad-search::placeholder{color:var(--t3)}
/* §5.4 — demoted to the ONLY header tool once Hide moved to the footer, so it
   reads as a real (bordered) button rather than a bare text link competing
   for the same visual weight as a destructive-ish action used to have. */
.aad-csv{background:var(--chip);border:1px solid var(--border2);color:var(--t2);font-weight:600;font-size:12px;font-family:inherit;cursor:pointer;border-radius:8px;padding:6px 11px}
.aad-csv:hover{color:var(--t1);border-color:var(--border3)}
/* §5.3 — a small header chip for "a refresh is running underneath", replacing
   the old end-of-footnote text nobody was looking at when it mattered. */
.aad-loadchip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--accent);background:var(--accent-dim);border-radius:7px;padding:4px 9px;vertical-align:middle}
.aad-loadchip-spin{width:9px;height:9px;border:1.5px solid var(--accent);border-top-color:transparent;border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}
@media (prefers-reduced-motion:reduce){.aad-loadchip-spin{animation:none}}
/* §5.1 — one control row: level tabs (left) + range/search (right). Replaces
   the old header→tabs→callout→chips→table stack of full-width bands. */
.aad-tabsrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 20px 0}
.aad-tabs{display:flex;gap:6px}
.aad-controlrow-right{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap}
.aad-tab{display:inline-flex;align-items:center;gap:6px;background:none;border:none;border-radius:8px;padding:6px 12px;font-size:12.5px;font-weight:600;color:var(--t3);cursor:pointer;font-family:inherit}
.aad-tab:hover{color:var(--t2);background:rgba(76,141,255,.07)}
.aad-tab-active{color:var(--accent);background:rgba(76,141,255,.14)}
.aad-tab-n{font-size:11px;font-weight:700;color:var(--t3);background:var(--chip);border-radius:999px;padding:0 6px}
.aad-tab-active .aad-tab-n{color:var(--accent);background:rgba(76,141,255,.2)}
/* Notes tab (migration 111) — the per-client media-buying change log. Same
   card/chip language as the breakdown; the composer sits on top, the log
   reads newest-first underneath it. */
.adn-wrap{padding:14px 20px 18px}
.adn-composer{background:var(--card);border:1px solid var(--track);border-radius:10px;padding:12px 14px}
.adn-textarea{width:100%;box-sizing:border-box;background:var(--bg2);border:1px solid var(--border2);border-radius:8px;color:var(--t1);font-family:inherit;font-size:13px;line-height:1.5;padding:9px 11px;resize:vertical;outline:none}
.adn-textarea:focus{border-color:var(--accent)}
.adn-textarea::placeholder{color:var(--t3)}
.adn-composer-row{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.adn-hint{font-size:11px;color:var(--t3);flex:1;min-width:180px}
.adn-btn{background:var(--chip);border:1px solid var(--border2);color:var(--t2);font-weight:600;font-size:12px;font-family:inherit;cursor:pointer;border-radius:8px;padding:6px 12px}
.adn-btn:hover{color:var(--t1);border-color:var(--border3)}
.adn-btn-primary{background:rgba(76,141,255,.14);color:var(--accent);border-color:rgba(76,141,255,.35)}
.adn-btn-primary:hover{color:var(--accent);background:rgba(76,141,255,.22)}
.adn-btn[disabled]{opacity:.55;cursor:default}
.adn-pending{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.adn-pending-chip{display:inline-flex;align-items:center;gap:6px;background:var(--chip);border:1px solid var(--border2);border-radius:999px;padding:3px 6px 3px 10px;font-size:11.5px;color:var(--t2)}
.adn-pending-x{background:none;border:none;color:var(--t3);cursor:pointer;font-size:11px;padding:2px 5px;border-radius:999px;font-family:inherit}
.adn-pending-x:hover{color:var(--t1);background:rgba(76,141,255,.12)}
.adn-list{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.adn-empty{padding:22px 16px;text-align:center;color:var(--t3);font-size:12.5px;border:1px dashed var(--border2);border-radius:10px}
.adn-note{background:var(--card);border:1px solid var(--track);border-radius:10px;padding:10px 14px 12px}
.adn-note-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.adn-toggle{background:none;border:none;color:var(--t3);cursor:pointer;font-size:11px;padding:2px 4px;font-family:inherit}
.adn-toggle:hover{color:var(--t1)}
.adn-note-when{font-size:11.5px;font-weight:600;color:var(--t3)}
.adn-note-preview{font-size:12px;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:420px}
.adn-note-actions{margin-left:auto;display:inline-flex;gap:6px}
.adn-mini{background:none;border:1px solid var(--border2);color:var(--t3);border-radius:6px;padding:1px 7px;font-size:10.5px;font-family:inherit;cursor:pointer;white-space:nowrap}
.adn-mini:hover{color:var(--t1);border-color:var(--border3)}
.adn-mini-danger:hover{color:var(--red);border-color:var(--red)}
.adn-note-body{margin-top:7px;font-size:13px;line-height:1.55;color:var(--t1);white-space:pre-wrap;word-break:break-word}
.adn-edit{margin-top:7px}
.adn-edit-row{display:flex;gap:8px;margin-top:8px}
.adn-atts{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.adn-att-chip{display:inline-flex;align-items:center;gap:2px;background:var(--chip);border:1px solid var(--border2);border-radius:999px;padding:2px 4px 2px 4px}
.adn-att-open{display:inline-flex;align-items:center;gap:6px;background:none;border:none;color:var(--t2);font-size:11.5px;font-weight:600;font-family:inherit;cursor:pointer;padding:2px 4px 2px 8px}
.adn-att-open:hover{color:var(--accent)}
/* §5.2 — totals strip: the account's own headline numbers, visible without
   scrolling past every campaign to reach the <tfoot>. */
.aad-totals{display:flex;margin:14px 20px 0;background:var(--card);border:1px solid var(--track);border-radius:10px;overflow:hidden}
.aad-totals-cell{padding:9px 14px;border-left:1px solid var(--track)}
.aad-totals-cell:first-child{border-left:none}
.aad-totals-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--t3)}
.aad-totals-value{font-size:15px;font-weight:800;color:var(--t1);font-variant-numeric:tabular-nums;margin-top:2px}
.aad-totals-bad{color:var(--red)}
.aad-totals-note{flex:1;min-width:160px;display:flex;align-items:center;font-size:11px;line-height:1.45;color:var(--t3);font-weight:400}
/* §5.5 — the worst-offender row: an inline share chip beside the name (the row
   itself keeps the pre-existing .aad-row-worst tint) plus a recommendation
   sub-row directly beneath it, replacing the old standalone callout band. */
.aad-worst-chip{display:inline-block;font-size:10.5px;font-weight:600;color:var(--red);background:rgba(224,85,76,.14);border-radius:6px;padding:2px 8px;vertical-align:middle;margin-left:6px;white-space:nowrap}
.aad-subrow td{border-top:none;padding:0}
.aad-subrow-td{text-align:left}
.aad-subrow-inner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px;line-height:1.5;color:var(--aa-callout,var(--t2));background:rgba(224,85,76,.06);border-left:2px solid rgba(224,85,76,.4);border-radius:0 8px 8px 0;padding:8px 12px;margin:0 0 2px}
.aad-subrow-actions{display:flex;align-items:center;gap:8px;margin-left:auto;white-space:nowrap}
.aad-subrow-action{font-size:11px;font-weight:600;border-radius:6px;padding:4px 9px;background:none;color:var(--t3);border:1px solid var(--border2);cursor:pointer;font-family:inherit;text-decoration:none;display:inline-block}
.aad-subrow-action:hover{color:var(--t1);border-color:var(--border3)}
.aad-subrow-action-red{color:var(--red);border-color:rgba(224,85,76,.4)}
.aad-subrow-action-red:hover{background:rgba(224,85,76,.1)}
/* Breadcrumb filter chips (campaign / ad-set drill context) */
.aad-crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 20px 0;font-size:12px}
.aad-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(76,141,255,.14);color:var(--accent);border-radius:999px;padding:2px 4px 2px 10px;font-size:12px;font-weight:600;max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aad-chip-x{background:none;border:none;color:inherit;cursor:pointer;font-size:11px;padding:2px 6px;border-radius:999px}
.aad-chip-x:hover{background:rgba(76,141,255,.25)}
/* Breakdown table */
.aad-table-wrap{overflow-x:auto;margin:14px 20px 2px}
.aad-table{width:100%;border-collapse:collapse;font-size:12.5px;font-variant-numeric:tabular-nums}
.aad-table th{text-align:right;padding:6px 10px 9px;color:var(--t3);font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;font-weight:600;white-space:nowrap}
.aad-table td{text-align:right;padding:9px 10px;border-top:1px solid var(--track);white-space:nowrap;color:var(--t2)}
.aad-table th.aad-namecol,.aad-table td.aad-namecol{text-align:left;color:var(--t1)}
.aad-table td.aad-namecol{font-weight:600}
.aad-table td.aad-delivery{text-align:left;font-size:11.5px}
.aad-table tbody tr:hover{background:rgba(76,141,255,.05)}
.aad-row-worst{background:rgba(224,85,76,.06)}
.aad-row-worst:hover{background:rgba(224,85,76,.1)}
.aad-cost-bad{color:var(--red);font-weight:600}
.aad-th{cursor:pointer;user-select:none}
.aad-th:hover{color:var(--t2)}
.aad-th-active{color:var(--accent)}
/* The sortable header's actual click/keyboard target — a real <button> filling
   the <th> rather than a bare onclick on the cell, which had no keyboard path at
   all (not even in the tab order). Reset to plain inline text so it reads exactly
   like the old non-interactive header; text-align comes from the parent <th>
   (right by default, left for .aad-namecol) since an inline-level child obeys it. */
.aad-th-btn{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit;cursor:pointer}
.aad-th-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.aad-arrow{font-size:9px}
.aad-namecol{max-width:340px;overflow:hidden;text-overflow:ellipsis}
/* .aad-name is a <button> for a campaign/ad-set row (drills in) and a plain
   <span> for a leaf ad row (nothing to drill into) — the reset here is a no-op on
   the span and strips default button chrome on the button. */
.aad-name{background:none;border:none;padding:0;margin:0;font:inherit;color:var(--t1);cursor:pointer;font-weight:600}
button.aad-name:hover{color:var(--accent);text-decoration:underline}
.aad-name:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.aad-name-static{cursor:default;font-weight:400}
.aad-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:baseline}
.aad-dot-on{background:var(--green)}
.aad-dot-off{background:var(--t3)}
.aad-table tfoot td{border-top:2px solid var(--border2);font-weight:700;color:var(--t2)}
.aad-empty{padding:26px 20px;text-align:center;color:var(--t3);font-size:13px}
.aad-foot{margin:8px 20px 14px;font-size:11px}
/* A refresh that FAILED (rows kept on screen, nothing mid-panel to retry)
   reads as a quiet note on the account line — it isn't loading, it just
   didn't land this time. */
.aad-refreshing{color:var(--text3)}
/* §5.4 — Hide demoted from a header button to an underlined footer text link:
   rare and semi-destructive, so it earns the least visual weight on the panel. */
.aad-foot-hide{margin:0 20px 16px}
.aad-hidelink,.aad-resetlink{background:none;border:none;padding:0;font:inherit;font-size:11px;font-weight:600;color:var(--t3);text-decoration:underline;text-underline-offset:2px;cursor:pointer;font-family:inherit}
.aad-hidelink:hover,.aad-resetlink:hover{color:var(--t2)}
/* Per-campaign "exclude from scoring/totals" toggle (migration 053) — e.g. a
   campaign in this ad account actually belongs to another agency. */
.aad-excl-btn{background:none;border:1px solid var(--border2);color:var(--t3);border-radius:6px;padding:1px 7px;font-size:10.5px;font-family:inherit;cursor:pointer;vertical-align:middle;white-space:nowrap}
.aad-excl-btn:hover{color:var(--t1);border-color:var(--border3)}
.aad-excl-btn-on{color:var(--red);border-color:var(--red)}
.aad-row-excluded{opacity:.55}
.aad-row-excluded:hover{opacity:.85}
/* Per-campaign "retire — ours, but replaced by a newer campaign" toggle
   (migration 091). Distinct from Exclude (never ours): a retired campaign's
   history still counts toward the account's baseline, only its own recent
   spend stops being scored — so it gets its own colour (amber, not red) and
   its own row tint rather than reusing .aad-row-excluded. */
.aad-retire-btn{background:none;border:1px solid var(--border2);color:var(--t3);border-radius:6px;padding:1px 7px;font-size:10.5px;font-family:inherit;cursor:pointer;vertical-align:middle;white-space:nowrap;margin-left:4px}
.aad-retire-btn:hover{color:var(--t1);border-color:var(--border3)}
.aad-retire-btn-on{color:var(--amber);border-color:var(--amber)}
.aad-row-retired{opacity:.7}
.aad-row-retired:hover{opacity:.92}
/* Per-campaign Score column in the drill. */
.aad-table th.aad-scorecol,.aad-table td.aad-scorecol{text-align:right;white-space:nowrap}
.aad-th-plain{color:var(--t3)}

/* ============================================================================
   CLIENT HEALTH DASHBOARD (health-score work)
   Clients▸Health table · client Health tab · Overview health KPIs · task modal
   ============================================================================ */

/* ---- Task detail v2 — two-pane 820px (design 3a) ----
   The content column scrolls as one (Todoist-style); only the composer is
   pinned. Properties / files / meta live in the 240px right rail. Below 700px
   the rail can't survive, so app.js MOVES those three groups into slots in the
   content column and the `.is-narrow` rules below turn the properties into a
   chip row (design 3b) — same nodes, same ids, so every handler keeps working. */
#taskModalContent.modal-linear{max-width:820px;width:94vw;min-width:0}
#taskModalContent .linear-body{display:flex;height:520px;max-height:none;overflow:hidden}
#taskModalContent .linear-main{flex:1;min-width:0;display:flex;flex-direction:column;padding:0;overflow:hidden}
.td2-scroll{flex:1;min-height:0;overflow-y:auto;padding:22px 24px 8px}
.td2-scroll::-webkit-scrollbar{width:6px}
.td2-scroll::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
#taskModalContent .linear-title{font-size:21px;line-height:1.32;letter-spacing:-.4px}
/* The title is a bare textarea, so the global input:focus rule drew a boxed
   blue halo around the heading on every open (it is autofocused). A single
   accent underline keeps the focus visible without the input-box look. */
#taskModalContent .linear-title:focus{box-shadow:inset 0 -1px 0 var(--accent);border-color:transparent}
#taskModalContent .parsed-preview:empty{display:none;margin:0}
#taskModalContent .linear-title-row{margin-bottom:13px;gap:12px}
#taskModalContent .linear-status-dot{width:19px;height:19px;margin-top:4px}
.lb-status .td2-dot{margin-right:5px}

/* description becomes a card with a real edit affordance */
.td2-desc{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r3);padding:12px 14px;margin-bottom:13px;display:flex;flex-direction:column;align-items:stretch;gap:9px;transition:border-color .15s}
.td2-desc:hover{border-color:var(--border3)}
/* The CARD carries the focus state. Without this the bare textarea inside also
   painted the global input:focus halo, which read as a second box floating in
   the card — and as a stray blue line under the composer. */
.td2-desc:focus-within{border-color:var(--accent)}
.td2-desc .linear-desc:focus,.td2-composer .lci-field textarea:focus{box-shadow:none;border-color:transparent}
.td2-desc .linear-desc,.td2-desc .linear-desc-preview{margin-left:0;max-width:100%;margin-bottom:0}
/* align-items:stretch above is what makes the editor fill the card — as a
   flex-start column child it shrank to the width of its own text. */
.td2-desc .linear-desc{resize:none;min-height:80px;font-size:14px;line-height:1.65}
.td2-desc .linear-desc-preview{padding:0;border:none;font-size:14px;line-height:1.65}
.td2-desc .linear-desc-preview:hover{background:none;border-color:transparent}
.td2-desc .desc-edit-btn{display:inline-flex;margin-top:0;align-self:flex-start}
.td2-desc .desc-editor-wrap:not(.is-hidden)~.desc-edit-btn{display:none}

/* markdown toolbar — a compact segmented group instead of loose text glyphs
   sitting on a full-width rule */
.td2-desc .desc-toolbar{display:inline-flex;width:fit-content;gap:1px;margin:0 0 8px;padding:3px;border-bottom:none;background:var(--card);border:1px solid var(--border);border-radius:9px}
.td2-desc .desc-toolbar.is-hidden{display:none}
.td2-desc .desc-tb-btn{width:27px;height:27px;padding:0;border:none;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;color:var(--text2)}
.td2-desc .desc-tb-btn:hover{background:var(--chip);border-color:transparent;color:var(--text)}
.td2-desc .desc-tb-btn.desc-tb-code{width:auto;padding:0 9px;font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.02em}
.td2-desc .desc-tb-sep{height:16px;margin:0 4px;background:var(--border2)}

/* the edit save/cancel bar needs air under it, not just over it */
#taskModalContent .linear-save-bar{margin-bottom:13px;padding-bottom:2px}

/* CSM review — a strip with a gold spine instead of a boxed block */
#taskModalContent .csm-section{margin:0 0 13px;padding:10px 12px;max-width:100%;background:var(--bg2);border:1px solid var(--border);border-left:2px solid var(--gold);border-radius:9px}
#taskModalContent .csm-section-header{margin-bottom:0;row-gap:6px}
#taskModalContent .csm-section-label{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
#taskModalContent .csm-banner{margin:8px 0 0;padding:2px 9px;border-radius:20px;border-left:none!important;background:rgba(217,170,69,.13);font-size:11px;display:inline-block}
#taskModalContent .csm-controls{margin:8px 0 0}
#taskModalContent .csm-type-select,#taskModalContent .csm-drive-input{background:var(--bg);border:1px solid var(--border2);border-radius:7px;padding:5px 9px;font-size:12px}
#taskModalContent .csm-drive-input{flex:1;min-width:120px}

/* comments flow inside .td2-scroll — they do not scroll independently */
.td2-comments-head{display:flex;align-items:center;gap:8px;border-top:1px solid var(--border)}
.td2-comments-head .linear-section-title{margin:0;padding-top:11px}
#taskModalContent #commentsList{padding:11px 0 2px;display:flex;flex-direction:column;gap:13px}
#taskModalContent .linear-comment{margin-bottom:0}
/* composer pinned below the scroll region */
.td2-composer{flex-shrink:0;border-top:1px solid var(--border);padding:11px 24px 16px;background:var(--card)}
.td2-composer .linear-comment-input{margin-top:0}

/* right rail */
.td2-rail{width:240px;flex-shrink:0;border-left:1px solid var(--border);padding:20px 16px;display:flex;flex-direction:column;background:var(--bg2);overflow-y:auto}
.td2-rail-head{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text3);margin-bottom:10px}
.td2-rail .linear-prop{margin-bottom:9px;position:relative}
.td2-rail .linear-prop-label{font-size:11px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--text3);margin-bottom:4px}
.td2-rail .cdd-trigger{font-size:13px;font-weight:500;gap:7px;padding:5px 7px;margin:0 -7px;border-radius:7px}
.td2-rail .cdd-trigger:hover{background:var(--chip);color:var(--text)}
.td2-rail .cdd-chev{margin-left:auto}
.td2-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;display:inline-block}
.td2-avatars{display:flex;align-items:center;flex-shrink:0}
.td2-avatars img,.td2-avatars span{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff}
.td2-avatars>*+*{margin-left:-7px;border:1.5px solid var(--bg2)}
.td2-rail #multiAssigneeWrap{display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:4px 6px}
.td2-rail #multiAssigneeWrap select{font-size:12px;padding:2px 6px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r2);color:var(--text)}

/* files live in the rail as thumbnails */
.td2-files{border-top:1px solid var(--border);padding-top:11px;margin-bottom:10px}
.td2-files-head{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.td2-files-grid{display:flex;gap:8px;flex-wrap:wrap}
.td2-file{width:96px;cursor:pointer;position:relative}
.td2-file-thumb{height:54px;border-radius:var(--r2);object-fit:cover;width:100%;border:1px solid var(--border2);background:var(--card2);display:flex;align-items:center;justify-content:center;gap:3px;color:var(--text3);transition:border-color .15s}
.td2-file:hover .td2-file-thumb{border-color:var(--accent)}
.td2-file-ext{font-size:10px;font-weight:700;opacity:.7}
.td2-file-name{font-size:11px;font-weight:500;color:var(--text2);margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.td2-file-size{font-size:10.5px;font-family:ui-monospace,Menlo,monospace;color:var(--text3)}
.td2-file-del{position:absolute;top:3px;right:3px;width:18px;height:18px;border-radius:50%;border:none;background:rgba(13,15,17,.82);color:var(--on-scrim);font-size:13px;line-height:1;cursor:pointer;opacity:0;transition:all .15s;display:flex;align-items:center;justify-content:center}
.td2-file:hover .td2-file-del{opacity:1}
.td2-file-del:hover{background:var(--red);color:#fff}
.td2-drop{width:96px;height:54px;border:1px dashed var(--border2);border-radius:var(--r2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;color:var(--text3);font-size:10.5px;font-weight:600;background:none;font-family:inherit;transition:all .15s}
.td2-drop:hover,.td2-drop.drop-active{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}
.td2-drop--empty{width:100%;flex-direction:row}
.td2-rail-spacer{flex:1}
.td2-rail-meta{border-top:1px solid var(--border);padding-top:10px;margin-bottom:5px;font:400 11px/1.6 ui-monospace,Menlo,monospace;color:var(--text3)}
.td2-rail-actions{display:flex;gap:2px}
.td2-rail-actions button{display:flex;align-items:center;gap:7px;background:none;border:none;color:var(--text3);font:500 12px Inter,sans-serif;cursor:pointer;padding:6px 7px;border-radius:7px}
.td2-rail-actions .duplicate-task-btn:hover{background:var(--chip);color:var(--accent)}
.td2-rail-actions .delete-task-btn{color:var(--red);opacity:.8}
.td2-rail-actions .delete-task-btn:hover{background:rgba(224,85,76,.1);opacity:1}

.td2-hint{margin-left:auto;font:400 11px ui-monospace,Menlo,monospace;color:var(--text3)}
.td2-done-banner{display:flex;align-items:center;gap:8px;padding:8px 18px;background:rgba(47,163,100,.09);border-bottom:1px solid rgba(47,163,100,.2);font-size:12px;font-weight:500;color:var(--green)}
.td2-done-banner a{color:var(--text2);font-weight:600;text-decoration:underline;text-underline-offset:2px}
/* A completed task's primary action is no longer a green CTA (design 3a). */
.linear-done-btn.is-reopen{background:none;border:1px solid var(--border2);color:var(--text2)}
.linear-done-btn.is-reopen:hover{background:var(--chip);color:var(--text);filter:none}
/* Narrow slots are empty (and invisible) until the layout switch fills them. */
.td2-slot:empty{display:none}

/* ---- Task detail v2 — narrow sheet (design 3b) ---- */
@media(max-width:700px){
  #taskModalContent.modal-linear{display:flex;flex-direction:column;max-height:100dvh;overflow:hidden}
  #taskModalContent .linear-body{display:flex;flex-direction:column;flex:1;min-height:0;height:auto;overflow:hidden}
  #taskModalContent .linear-main{flex:1;min-height:0}
  #taskModalContent .td2-rail{display:none}
  .td2-scroll{padding:18px 16px 4px}
  #taskModalContent .linear-title{font-size:20px}
  #taskModalContent .linear-status-dot{width:24px;height:24px;margin-top:2px}
  .td2-composer{padding:10px 14px 14px}
  /* properties become the chip row */
  #tdPropsSlot>#tdPropsGroup{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
  #tdPropsSlot .linear-prop{margin:0;position:relative;flex:0 0 auto;min-width:0}
  #tdPropsSlot .linear-prop-label{display:none}
  #tdPropsSlot .cdd-trigger{min-height:34px;margin:0;padding:0 13px;gap:6px;border-radius:20px;background:var(--chip);border:1px solid var(--border2);font:600 12.5px Inter,sans-serif;color:var(--text)}
  #tdPropsSlot .cdd-trigger.is-unset{background:none;border-style:dashed;color:var(--text3)}
  #tdPropsSlot .cdd-chev{display:none}
  #tdPropsSlot .cdd-menu{min-width:200px}
  #tdPropsSlot .td2-avatars img,#tdPropsSlot .td2-avatars span{width:24px;height:24px;font-size:11px}
  #tdPropsSlot .td2-avatars>*+*{border-color:var(--chip)}
  /* files + created/actions flow in the scroll column */
  #tdFilesSlot .td2-files{border-top:none;padding-top:0;margin-bottom:16px}
  #tdFilesSlot .td2-file,#tdFilesSlot .td2-drop{width:100px}
  #tdFilesSlot .td2-drop{height:62px}
  #tdFilesSlot .td2-file-thumb{height:62px}
  #tdFooterSlot{border-top:1px solid var(--border);margin-top:14px;padding-top:10px}
  #tdFooterSlot .td2-rail-meta{border-top:none;padding-top:0}
  #tdFooterSlot .td2-rail-actions button{min-height:44px}
  /* Mark done is the pinned primary action */
  #taskModalContent .linear-footer{padding:10px 14px 14px;gap:8px}
  #taskModalContent .linear-done-btn{flex:1 1 100%;justify-content:center;min-height:46px;border-radius:12px;font-size:14px}
  #taskModalContent .linear-movestatus-btn{flex:1 1 100%;justify-content:center;min-height:44px;border-radius:12px}
  #taskModalContent .td2-hint{display:none}
}

/* Footer action bar */
.linear-footer{display:flex;align-items:center;gap:8px;padding:12px 18px;border-top:1px solid var(--border);flex-wrap:wrap}
.linear-footer-spacer{flex:1}
.linear-done-btn{display:inline-flex;align-items:center;gap:6px;font:600 12px Inter,sans-serif;color:#fff;background:var(--green);border:none;border-radius:8px;padding:8px 14px;cursor:pointer;transition:filter .15s}
.linear-done-btn:hover{filter:brightness(1.08)}
.linear-movestatus-btn{font:600 12px Inter,sans-serif;color:var(--text2);background:transparent;border:1px solid var(--border2);border-radius:8px;padding:8px 14px;cursor:pointer;transition:all .15s}
.linear-movestatus-btn:hover{background:var(--chip);color:var(--text)}
.linear-footer .duplicate-task-btn{background:none;border:none;color:var(--text3);font:600 12px Inter,sans-serif;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:6px 8px}
.linear-footer .duplicate-task-btn:hover{color:var(--accent)}
.linear-footer .delete-task-btn{background:none;border:none;color:var(--red);opacity:.75;font:600 12px Inter,sans-serif;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:6px 8px}
.linear-footer .delete-task-btn:hover{opacity:1}

/* ---- Client Health tab (view 3) ---- */
.client-health-detail{display:grid;grid-template-columns:300px 1fr;gap:18px}
.chd-left{display:flex;flex-direction:column;gap:14px}
.chd-right{display:flex;flex-direction:column;gap:12px}
.chd-card-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text2);margin-bottom:12px}
.chd-score-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px;text-align:center}
.chd-score-num{font-size:56px;font-weight:800;line-height:1}
.chd-score-pill{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:4px 12px;border-radius:999px;border:1px solid var(--border);background:var(--bg)}
.chd-score-pill span:first-child{width:7px;height:7px;border-radius:50%}
.chd-score-pill span:last-child{font-size:12px;font-weight:700}
.chd-score-delta{font-size:11.5px;margin-top:10px;font-weight:600}
.chd-trend-flat{color:var(--text3)}
.chd-spark-lg{margin-top:10px}
.chd-spark-axis{display:flex;justify-content:space-between;font-size:10px;color:var(--text3)}
.chd-factor-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px}
.chd-factor{margin-bottom:13px}
.chd-factor:last-child{margin-bottom:0}
.chd-factor-head{display:flex;justify-content:space-between;font-size:12px;margin-bottom:5px}
.chd-factor-name{color:var(--text)}
.chd-factor-weight{color:var(--text3);font-size:10.5px}
.chd-factor-score{font-weight:700}
.chd-factor-track{height:5px;background:var(--track,#23272d);border-radius:3px;overflow:hidden}
.chd-factor-fill{height:100%;border-radius:3px}
/* "What's driving this factor" line under each bar (ad problem, days since contact…). */
.chd-factor-detail{font-size:11px;color:var(--text3);margin-top:5px;line-height:1.4}
.chd-factor-note{font-size:11px;color:var(--red);margin-top:12px}
/* Speed-to-lead block (client Health tab): three stats + verdict, same card chrome as the factor card. */
.chd-stl-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px}
.chd-stl-window{text-transform:none;letter-spacing:0;color:var(--text3);font-weight:600}
.chd-stl-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.chd-stl-stat{text-align:center}
.chd-stl-num{font-size:19px;font-weight:800;color:var(--text);line-height:1.15}
.chd-stl-lbl{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-top:2px}
.chd-stl-verdict{font-size:12px;line-height:1.5;color:var(--text2);margin-top:12px}
.chd-stl-sub{font-size:10.5px;color:var(--text3);margin-top:6px}
.chd-empty{padding:24px;text-align:center;color:var(--text3);font-size:13px}
.chd-empty-sm{font-size:12px;color:var(--text3)}
.chd-ai{display:flex;flex-direction:column;gap:12px}
.chd-ai-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chd-ai-title{font-size:14px;font-weight:700;color:var(--text)}
.chd-ai-tag{font-size:9.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--purple);background:rgba(155,108,255,.13);border:1px solid rgba(155,108,255,.3);padding:2px 7px;border-radius:6px}
.chd-ai-spacer{flex:1}
.chd-ai-refresh{font:600 11px Inter,sans-serif;color:var(--text2);background:transparent;border:1px solid var(--border);border-radius:7px;padding:5px 10px;cursor:pointer;transition:all .15s}
.chd-ai-refresh:hover{background:var(--chip);color:var(--text)}
.chd-ai-refresh:disabled{opacity:.5;cursor:default}
.chd-ai-summary{font-size:12.5px;line-height:1.6;color:var(--text2);margin:0}
.chd-ai-muted{color:var(--text3)}
.chd-ai-loading,.chd-ai-empty,.chd-ai-empty-sm{font-size:12.5px;color:var(--text3);padding:8px 0}
.chd-ai-gen,.chd-ai-empty button{font:600 11.5px Inter,sans-serif;color:#fff;background:var(--accent,var(--blue));border:none;border-radius:7px;padding:5px 12px;cursor:pointer;margin-left:4px}
.chd-ai-meta{font-size:10.5px;color:var(--text3);margin-top:2px}
.chd-fix{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px}
.chd-fix-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.chd-fix-rank{font-size:11px;font-weight:700;padding:1px 6px;border-radius:5px;white-space:nowrap}
.chd-fix-title{font-size:12.5px;font-weight:700;color:var(--text)}
.chd-fix-body{font-size:12px;line-height:1.55;color:var(--text2);margin:0 0 10px}
.chd-fix-actions{display:flex;gap:8px;flex-wrap:wrap}
.chd-fix-primary{font:600 11.5px Inter,sans-serif;color:#fff;background:var(--accent,var(--blue));border:none;border-radius:7px;padding:6px 12px;cursor:pointer;transition:filter .15s}
.chd-fix-primary:hover{filter:brightness(1.08)}
.chd-fix-secondary{font:600 11.5px Inter,sans-serif;color:var(--text2);background:transparent;border:1px solid var(--border2);border-radius:7px;padding:6px 12px;cursor:pointer;transition:all .15s}
.chd-fix-secondary:hover{background:var(--chip);color:var(--text)}
@media(max-width:720px){.client-health-detail{grid-template-columns:1fr}}

/* ---- Health band colours (CSS Migrator 2026-08-15) ------------------------
   The health band enum — green | gold | red | null ("gathering data") — is the
   only input to every colour on the Clients ▸ Health table (and, until it was
   removed, the Overview health KPI strip). It was being re-expanded as an inline
   `style="color:…"` / `style="background:…"` at 19 sites, so one enum
   had two sources of truth and a band's colour could only be restyled by
   editing JS template strings. These utilities ARE that mapping, stated once.

   Values are copied verbatim from `healthBandColorVar()` (helpers.js:7534),
   which still supplies the colour STRING to the sparkline SVGs — those take a
   paint value as a function argument, not a style attribute, so they are not
   inline styles and are deliberately left alone.

   CASCADE NOTE — the border modifiers are deliberately SCOPED
   (`.chd-fix.hb-bd-green`, 0-2-0) rather than bare (`.hb-bd-green`, 0-1-0).
   The target carries its own border in a 0-1-0 base rule (`.chd-fix`), and
   at EQUAL specificity source order
   alone decides the winner — a bare modifier is only safe while it sits later
   in the file than every base rule it must beat, which is exactly the kind of
   ordering dependency that silently broke `.cm-onb-field-compact` for three
   weeks (see the 2026-08-08 run). Scoping wins regardless of position. */
.hb-fg-green{color:var(--band-strong)}
.hb-fg-gold{color:var(--band-stable)}
/* Trend arrows are a DIRECTION, not a band: up is good (green), down bad. */
.hb-fg-up{color:var(--green)}
.hb-fg-down{color:var(--red)}
.hb-fg-red{color:var(--red)}
.hb-fg-muted{color:var(--text3)}
.hb-bg-green{background:var(--band-strong)}
.hb-bg-gold{background:var(--band-stable)}
.hb-bg-red{background:var(--red)}
.hb-bg-muted{background:var(--text3)}
/* `hb-bd-*` reads as "tint this component's border by band"; WHICH edge is the
   component's own business — a left accent on the AI fix cards below. Every
   rule stays component-scoped, so the shared modifier name can never collide.
   The chip variants went with the Overview "Needs attention" strip (2026-09-20)
   and the ranked-row variants with the Clients ▸ Health table (2026-09-29), so
   `.chd-fix` is the family's only consumer now. */

/* The Client Health DETAIL tab (`chd-*`) and its AI fix cards are the twin
   surface the 2026-08-15 run skipped: it migrated the ranked table (`cht-*`) and
   the Overview strip (`ovh-*`) onto this family while these two functions went on
   re-expanding the very same band enum inline, one `healthBandColorVar()` string
   at a time. Both are SCOPED for the cascade reason the note above gives —
   `.chd-fix` carries its own 0-1-0 `border`, and `.chd-score-pill` its own
   `border`/`background`, so a bare modifier would win only while it happened to
   sit later in this file.

   The two tinted surfaces keep their own mix percentages (pill 14%/40%, rank
   13%) because this is a no-visual-change refactor and those are the values that
   shipped. Whether 13% and 14% were ever meant to differ is a design question,
   deliberately not answered here. */
.chd-fix.hb-bd-green{border-left:3px solid var(--green)}
.chd-fix.hb-bd-gold{border-left:3px solid var(--gold,#d9aa45)}
.chd-fix.hb-bd-red{border-left:3px solid var(--red)}
.chd-score-pill.hb-tint-green{background:color-mix(in srgb,var(--band-strong) 14%, transparent);border-color:color-mix(in srgb,var(--band-strong) 40%, transparent)}
.chd-score-pill.hb-tint-gold{background:color-mix(in srgb,var(--band-stable) 14%, transparent);border-color:color-mix(in srgb,var(--band-stable) 40%, transparent)}
.chd-score-pill.hb-tint-red{background:color-mix(in srgb,var(--red) 14%, transparent);border-color:color-mix(in srgb,var(--red) 40%, transparent)}
.chd-fix-rank.hb-tint-green{color:var(--green);background:color-mix(in srgb,var(--green) 13%, transparent)}
.chd-fix-rank.hb-tint-gold{color:var(--gold,#d9aa45);background:color-mix(in srgb,var(--gold,#d9aa45) 13%, transparent)}
.chd-fix-rank.hb-tint-red{color:var(--red);background:color-mix(in srgb,var(--red) 13%, transparent)}
.sul-more{display:block;width:100%;margin-top:10px;padding:7px 10px;border:1px dashed var(--border);border-radius:6px;background:none;color:var(--text3);font-size:11px;cursor:pointer}
.sul-more:hover{color:var(--text2);border-color:var(--text3)}

/* ---- Task-modal swatch dots (CSS Migrator 2026-08-22) ---------------------
   The task detail modal's rail (design 3a) paints a small round swatch in front
   of every status and priority label — on the header pill, on each of the two
   `.cdd-trigger`s, and on all 8 `.cdd-opt` rows inside their dropdowns. Until
   now the fill came from two function-scope colour tables (`STATUS_DOT` /
   `PRIO_DOT` inside `openTaskModal`) re-expanded as `style="background:…"` at
   11 sites, so the status/priority enum could only be recoloured by editing JS
   template strings.

   Values are copied VERBATIM from those two tables — this migration is
   pixel-for-pixel inert by construction. The two `|| ` fallbacks the old
   expressions carried are preserved in the mappers, not here: an unrecognised
   status fell back to `var(--blue)` (todo's own colour) and an unrecognised or
   absent priority to `var(--text3)` (low's own colour), so `statusDotClass` /
   `prioDotClass` default to `todo` / `low` and reproduce both exactly.

   CASCADE NOTE — these modifiers are deliberately BARE (`.td2-dot--todo`,
   0-1-0) rather than scoped (`.td2-dot.td2-dot--todo`, 0-2-0), which is the
   opposite of the choice the 2026-08-15 `.hb-*` run made. The reasoning is the
   same, only the fact differs: `.hb-bd-*` had to beat base rules that already
   declared `border-left`, so at equal specificity it would have depended on
   source order. The base `.td2-dot` rule (index.css:3736) declares width,
   height, border-radius, flex-shrink and display and NO background, so there is
   no competing declaration to tie with — a bare modifier has nothing to lose to
   and stays correct from anywhere in the file. `.lb-status .td2-dot`
   (index.css:3679, 0-2-0) sets only margin-right and likewise never touches
   background.

   NOT unified with the two neighbouring families that encode the same enums,
   deliberately — see the PR notes. `.lb-status-*` (index.css:1552) colours the
   surrounding PILL's text/background, and `.prio-dot--*` (index.css:2630)
   colours a literal `●` glyph via `color` rather than filling a CSS circle via
   `background`. `.prio-dot--low` is `var(--blue)` where `PRIO_DOT.low` is
   `var(--text3)`; reconciling that is a visual decision, not a migration. */
.td2-dot--todo{background:var(--blue)}
.td2-dot--inprogress{background:var(--amber)}
.td2-dot--review{background:var(--purple)}
.td2-dot--done{background:var(--green)}
.td2-dot--backburner{background:var(--text3)}
.td2-dot--p-high{background:var(--red)}
.td2-dot--p-medium{background:var(--orange)}
.td2-dot--p-low{background:var(--text3)}

/* ===== Weekly updates panel (Clients tab) ===== */
.wu-panel{margin-top:16px;border:1px solid var(--border);border-radius:var(--r3);background:var(--card);overflow:hidden}
.wu-panel-head{display:flex;align-items:center;gap:8px;padding:4px}
.wu-panel-toggle{flex:1;display:flex;align-items:center;gap:8px;background:none;border:none;padding:9px 8px;font-family:inherit;cursor:pointer;text-align:left;border-radius:var(--r2);transition:background var(--tr-fast)}
.wu-panel-toggle:hover{background:var(--card-hover)}
.wu-chevron{display:inline-block;font-size:11px;color:var(--text3);transition:transform .2s}
.wu-panel-toggle[aria-expanded="true"] .wu-chevron{transform:rotate(90deg)}
.wu-panel-title{font-size:13px;font-weight:600;color:var(--text)}
.wu-panel-sub{font-size:12px;color:var(--text3)}
.wu-copy-all{margin-right:4px}
.wu-panel-body{padding:4px 12px 12px}
.wu-loading{padding:32px 12px}
.wu-empty{padding:14px 8px;font-size:12px;color:var(--text3)}
.wu-error{color:var(--red)}
.wu-list{display:flex;flex-direction:column;gap:1px}
.wu-row{display:flex;align-items:center;gap:12px;padding:9px 8px;border-radius:var(--r2)}
.wu-row:hover{background:var(--card-hover)}
.wu-row-main{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.wu-row-name{font-size:13px;font-weight:600;color:var(--text);flex:0 0 auto;min-width:140px}
.wu-row-figures{display:flex;flex-wrap:wrap;gap:4px 14px}
.wu-figure{font-size:12px;color:var(--text2)}
.wu-row-stale{font-size:11px;color:var(--amber);flex:1 1 100%}
.wu-copy-btn{flex-shrink:0}
.wu-quiet-group{margin-top:10px;padding-top:10px;border-top:1px dashed var(--border)}
.wu-quiet-head{font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.03em;margin-bottom:4px;padding:0 8px}
.wu-row-quiet{opacity:.7}
.wu-row-quiet .wu-row-name{min-width:140px}
.wu-row-note{font-size:12px;color:var(--text3)}

/* ===== Transcript -> tasks review modal (transcript-tasks.js) ===== */
.tx-modal{max-width:840px;width:calc(100vw - 48px)}
.tx-lede{margin:0 0 14px;color:var(--text2);font-size:13px;line-height:1.55}
.tx-textarea{width:100%;min-height:220px;resize:vertical;font-family:inherit;font-size:13px;line-height:1.5}
.tx-input-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tx-status{margin:0 0 12px;padding:9px 12px;border-radius:var(--r3);font-size:13px;line-height:1.5}
.tx-status.is-info{background:var(--accent-dim);color:var(--text)}
.tx-status.is-warn{background:rgba(224,149,74,.14);color:var(--text)}
.tx-status.is-error{background:var(--danger-dim);color:var(--text)}
.tx-toolbar{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.tx-toolbar .tx-spacer{flex:1}
.tx-row{display:flex;gap:10px;padding:11px 12px;border:1px solid var(--border);border-radius:var(--r3);
  background:var(--card);margin-bottom:8px;opacity:.55;transition:opacity .12s,border-color .12s}
.tx-row.is-on{opacity:1}
.tx-row.is-on.is-blocked{border-color:var(--orange)}
.tx-tick{flex-shrink:0;padding-top:7px}
.tx-body{flex:1;min-width:0}
.tx-title{width:100%;font-weight:600;font-size:13px;margin-bottom:8px}
.tx-fields{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tx-fields select,.tx-fields input{font-size:12px;padding:5px 7px}
.tx-fields select.tx-need{border-color:var(--orange)}
.tx-conf{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;padding:3px 7px;
  border-radius:9px;background:var(--bg2);color:var(--text3)}
.tx-conf-high{background:rgba(47,163,100,.14);color:var(--green)}
.tx-conf-low{background:rgba(224,149,74,.14);color:var(--orange)}
.tx-quote{margin:8px 0 0;padding:6px 0 6px 10px;border-left:2px solid var(--border);
  color:var(--text2);font-size:12px;line-height:1.5;font-style:italic}
.tx-blocked-note{margin-top:7px;font-size:12px;color:var(--orange)}
.tx-extra{margin-top:10px;font-size:12px;color:var(--text2)}
.tx-extra summary{cursor:pointer;padding:4px 0}
.tx-extra ul{margin:4px 0 0;padding-left:20px;line-height:1.6}
.tx-extra.tx-warn{padding:8px 11px;border-radius:var(--r3);background:rgba(224,149,74,.12);color:var(--text)}
.tx-footer{align-items:center}
.tx-footer-note{flex:1;text-align:left;font-size:12px;color:var(--orange)}
@media (max-width:700px){
  .tx-modal{width:calc(100vw - 20px)}
  .tx-input-row{grid-template-columns:1fr}
  .tx-fields select,.tx-fields input{flex:1 1 46%;min-width:0}
}

/* ===== AD CREATIVES (Creatives view on the Ad Accounts tab) =====
   Redesigned 2026-09-07: a rollout-readiness leaderboard, not a spend list.
   The column labels live in ONE header row instead of beside every number in
   every row; curation (the ungrouped backlog, exclusions, the client roster)
   is out of the reading path behind a mode switch and a data-notes
   disclosure. Every colour here is a :root token — the exceptions are the
   four -txt tokens (--green-txt / --red-txt / --accent-txt / --gold-txt),
   which exist because the raw hues fall short of 4.5:1 as small TEXT on at
   least one surface in each theme; the raw tokens are kept for fills, dots
   and bars, where contrast is not the test. Every ratio quoted below was
   computed with helpers.js's contrastRatio against the REAL composite (the
   rgba tint flattened over the surface behind it), not eyeballed. */
/* The global :focus-visible ring is --accent, which is 2.96:1 on the light
   page background — under the 3:1 WCAG asks of a non-text indicator, and
   this is the ONLY affordance a keyboard user has. --accent-txt is the same
   hue at 5.41:1 there (5.12-5.85:1 on every other surface the board puts a
   focusable control on). Scoped to the board rather than fixed globally:
   the app-wide ring is the same defect and is somebody's whole pass.
   The two overlays are SIBLINGS of .acr-page, not descendants. */
.acr-page :focus-visible,.acr-fp :focus-visible,.acr-lightbox :focus-visible{outline-color:var(--accent-txt)}
/* No max-width of its own: #tab-ad_accounts already caps at 1760px and
   centres, so a second 1680px cap inset this view 40px from the tab header
   directly above it and the whole content column JUMPED sideways on every
   Accounts <-> Creatives toggle. Measured at a 1900px viewport: tab x=70
   w=1760, page x=110 w=1680.
   --acr-cols is the ONE declaration of the leaderboard's tracks; the header,
   the rows and the skeleton all read it, so the skeleton can no longer drift
   out of step with the table it is standing in for. */
.acr-page{padding-bottom:60px;--acr-cols:26px 56px minmax(0,1fr) 148px 128px 104px 64px 36px}
/* Reinforcement only — every control is already `disabled` during a write. */
.acr-page.is-assigning{cursor:progress}

/* --- Data-integrity banners (first child of .acr-page, above the toolbar) --
   Non-dismissible, because both make a claim about the figures below them.
   Two severities: gold = the board is OLD but internally consistent; red =
   the figures on screen are UNDERSTATED right now. The deferred-write
   "finish the rest" notice reuses the red variant. */
.acr-banner{display:flex;align-items:center;gap:var(--s3);margin:0 0 var(--s4);padding:11px 14px;border-radius:var(--r3);border:1px solid var(--border);background:var(--card);font-size:var(--fz-sm);line-height:1.45;color:var(--text2)}
.acr-banner-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.acr-banner-txt{flex:1;min-width:0}
.acr-banner-txt b{color:var(--text);font-weight:600}
.acr-banner .acr-btn{flex-shrink:0}
/* Stale: data is old, not wrong. */
.acr-banner-stale{border-color:rgba(217,170,69,.28);background:rgba(217,170,69,.07)}
.acr-banner-stale .acr-banner-dot{background:var(--gold)}
/* Short read: the figures below are understated — the stronger claim, so
   red, matching .ad-state-error's tint. */
.acr-banner-warn{border-color:rgba(224,85,76,.28);background:rgba(224,85,76,.06)}
.acr-banner-warn .acr-banner-dot{background:var(--red)}
.acr-empty{padding:24px 16px;text-align:center;color:var(--text3);font-size:var(--fz-base)}
.acr-empty-cell{padding:14px;text-align:center;color:var(--text3);font-size:var(--fz-sm)}
.acr-empty-icon{width:22px;height:22px;fill:var(--green);margin-bottom:6px}
.acr-dot{color:var(--border3);margin:0 6px}
.acr-collabel{font-size:var(--fz-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text3)}
/* Loading / never-synced / load-error use the shared .ad-state card;
   .acr-retry-btn (no rule of its own) is kept as an EXTRA class alongside
   .ad-state-action purely so a caller looking for that selector still finds it. */

/* --- Button system (five variants; two heights, 30px and 34px) ----------- */
.acr-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:30px;padding:0 12px;border-radius:var(--r2);font-size:var(--fz-sm);font-weight:600;font-family:inherit;cursor:pointer;border:1px solid transparent;background:none;color:var(--text2);transition:background var(--tr-base),border-color var(--tr-base),color var(--tr-base);white-space:nowrap}
.acr-btn:disabled{opacity:.45;cursor:default}
.acr-btn-primary{height:34px;padding:0 15px;border-radius:var(--r3);font-size:var(--fz-base);background:var(--accent);color:#fff}
/* The house hover for a filled CTA is filter:brightness() (a dozen call
   sites); this rule hardcoded #6099ff, a hex that appears nowhere else in
   the stylesheet and is LIGHTER than --accent, so the hover took white-on-
   accent from 3.20:1 down to 2.80:1. NOTE the 3.20:1 base is an app-wide
   --accent problem, not this button's — see the handoff. */
.acr-btn-primary:hover:not(:disabled){filter:brightness(1.08)}
.acr-btn-primary.is-busy{opacity:.6;cursor:default}
.acr-btn-secondary{background:var(--chip);border-color:var(--border2);color:var(--text)}
.acr-btn-secondary:hover:not(:disabled){background:var(--border);border-color:var(--border3)}
/* Ghost had ONLY a :hover rule, so Split / Rename / New group — and "Fix the
   grouping", the single control at the foot of the expanded panel — rendered
   as bare text that reads as a label. A resting border is the minimum that
   says "this is pressable"; it stays quieter than secondary, which also
   fills. */
.acr-btn-ghost{border-color:var(--border);color:var(--text2)}
.acr-btn-ghost:hover:not(:disabled){background:var(--chip);border-color:var(--border3);color:var(--text)}
/* "Not ours" removes real spend from every figure on the page and was muted
   grey text with no border — less prominent than the "Move to..." select
   beside it, and at the disabled 0.45 opacity indistinguishable from caption
   text. Outlined red at rest: unmistakably a control, and unmistakably not
   the filled-accent primary. */
.acr-btn-danger{border-color:rgba(224,85,76,.34);color:var(--red-txt)}
.acr-btn-danger:hover:not(:disabled){background:var(--danger-dim);border-color:var(--red);color:var(--red-txt)}
.acr-btn-sm{height:30px;padding:0 11px;border-radius:var(--r2);font-size:var(--fz-sm)}
.acr-btn-icon{width:30px;padding:0;flex:0 0 30px}
.acr-btn-icon .mi{width:15px;height:15px;fill:currentColor}
/* ~17px tall with border:0;padding:0 — under WCAG 2.5.8's 24x24 minimum, on
   the lightbox Close, the popover All/None and the withheld list's Restore.
   inline-flex + min-height raises the target without moving the text, which
   an inline box's line-height could not do. */
.acr-linkbtn{display:inline-flex;align-items:center;justify-content:center;min-height:24px;min-width:24px;border:0;background:none;padding:0 2px;color:var(--accent-txt);cursor:pointer;font-size:var(--fz-sm);font-weight:600;font-family:inherit}
.acr-linkbtn:hover:not(:disabled){text-decoration:underline}
/* Restore / All / None / Show all are .acr-linkbtn and are `disabled` during
   an assign write; only .acr-btn had a disabled rule, so they went on looking
   live. Same for the roster checkboxes and the picker cards. */
.acr-linkbtn:disabled{opacity:.45;cursor:default;text-decoration:none}
.acr-linkbtn-quiet{color:var(--text3)}
.acr-linkbtn-quiet:hover{color:var(--text)}
/* accent-color is the whole fix for the unstyled-checkbox wall — a real
   checkbox keeps every keyboard and screen-reader behaviour a custom one
   would have to re-earn. But accent-color only paints the CHECKED state:
   without color-scheme the UA still drew every UNCHECKED box as a bright
   light square on the dark theme, the loudest thing in the left gutter of
   every review row — and in the Clients popover that inverted the meaning,
   since the brightest rows were the EXCLUDED clients. */
.acr-check{width:15px;height:15px;flex-shrink:0;accent-color:var(--accent);color-scheme:dark;cursor:pointer;margin:0}
/* WCAG 2.5.8's 24x24 minimum. The roster rows already clear it — their
   checkbox sits inside a padded <label class="acr-clirow">, so the whole
   29px row is the target — but the review-row and bulk selectors are bare
   inputs with no label to grow, and one of them arms a bulk destructive
   action. A native checkbox is a replaced element: measured in this engine it
   ignores padding AND border (both leave the box at 15x15), so the only
   honest lever is its own width/height, scoped to the two that need it. */
.acr-qrow>.acr-check,.acr-bulk>.acr-check{width:24px;height:24px}
.acr-check:disabled{opacity:.45;cursor:default}
/* Dark is this dashboard's default theme, so `dark` is the base and the two
   light contexts override it — the .ep-row pattern a few hundred lines up.
   `light dark` would NOT do: it follows the OS, and [data-theme="dark"]
   exists precisely so someone whose OS is light can keep the dark board. */
[data-theme="light"] .acr-check{color-scheme:light}
@media (prefers-color-scheme: light){
  html:not([data-theme="dark"]):not([data-theme="light"]) .acr-check{color-scheme:light}
}

/* --- Toolbar (§1.2) ------------------------------------------------------ */
.acr-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.acr-seg{display:inline-flex;gap:2px;background:var(--card);border:1px solid var(--border);border-radius:var(--r3);padding:3px}
/* Harmonised with the shell's own .aa-view-btn directly above it (28px,
   12.5px, 13px side padding, radius 7) — two segmented controls at two
   scales in one column read as two different systems. */
.acr-seg-btn{display:inline-flex;align-items:center;height:28px;border:0;background:transparent;color:var(--text3);font-size:12.5px;font-weight:600;font-family:inherit;padding:0 13px;border-radius:7px;cursor:pointer;transition:color var(--tr-base),background var(--tr-base)}
.acr-seg-btn:hover{color:var(--text)}
/* The fill alone is a ~1.2:1 change and the label shift under 3:1 — neither
   reaches the 3:1 a non-text state indicator needs, so "which screen am I on"
   would rest on nothing measurable. An INSET ring is that mark with no layout
   cost. --accent-txt, not --accent: --accent is 2.96:1 on the light page. */
.acr-seg-btn.is-on{background:var(--track);color:var(--text);box-shadow:inset 0 0 0 1px var(--accent-txt)}
.acr-seg-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:17px;padding:0 5px;margin-left:7px;border-radius:9px;background:rgba(217,170,69,.16);color:var(--gold-txt);font-size:10.5px;font-weight:700;font-variant-numeric:tabular-nums}
.acr-search{position:relative;flex:0 1 220px;min-width:150px}
.acr-search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:15px;height:15px;fill:var(--text3);pointer-events:none}
.acr-search-input{width:100%;box-sizing:border-box;height:34px;padding:0 12px 0 32px;border-radius:9px;border:1px solid var(--border);background:var(--card);color:var(--text);font-size:var(--fz-base);font-family:inherit}
/* These three substituted a 1px border tint for the ring every other
   control on the board gets. Keep the tint AND the ring: the border says
   "this field is live", the ring is the affordance. The ring has to be
   declared rather than merely un-suppressed — the app-wide
   `input:focus{outline:none}` (0,1,1) outranks the global `:focus-visible`
   (0,1,0), so dropping `outline:none` here would have left no ring at all.
   Class+pseudo-class puts these at (0,2,0), which clears it. */
.acr-search-input:focus{border-color:var(--accent-txt)}
.acr-search-input:focus-visible,.acr-pop-search:focus-visible,.acr-fp-search:focus-visible{outline:2px solid var(--accent-txt);outline-offset:2px}
/* Search, window and clients: the scope of what the board reads. Right-
   aligned even when it wraps, so the popovers — anchored to their buttons'
   right edges — never open off the side of the pane. */
.acr-toolbar-right{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-left:auto;flex-wrap:wrap;min-width:0}
/* A popover and the button that opens it. `display:inline-flex` so the wrap
   is exactly the button's box — the panel anchors to it. */
.acr-popwrap{position:relative;display:inline-flex}
/* The dropdown buttons: window, clients, sort. */
.acr-dd{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;border-radius:9px;border:1px solid var(--border);background:var(--card);color:var(--text);font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer;white-space:nowrap;transition:border-color var(--tr-base),color var(--tr-base)}
.acr-dd:hover,.acr-dd.is-open{border-color:var(--border3)}
.acr-dd-caret{font-size:10px;color:var(--text3)}
.acr-dd-quiet{height:32px;background:none;color:var(--text3);font-weight:500;gap:7px}
.acr-dd-quiet:hover,.acr-dd-quiet.is-open{color:var(--text)}
.acr-dd-quiet b{color:var(--text);font-weight:600}
.acr-clients-count{font-variant-numeric:tabular-nums}
/* The window and sort menus. Plain buttons with aria-pressed rather than an
   ARIA menu: a menu role promises arrow-key navigation, and a short list of
   buttons that Tab walks is the honest version of that. */
.acr-menu{padding:5px;border-radius:var(--r4)}
.acr-winmenu{width:170px}
.acr-sortmenu{width:min(300px,calc(100vw - 32px))}
.acr-menu-item{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:var(--r2);background:transparent;color:var(--text);font-size:13px;font-weight:500;font-family:inherit;cursor:pointer;text-align:left}
.acr-menu-item:hover,.acr-menu-item.is-on{background:var(--chip)}
.acr-menu-check{color:var(--accent-txt);font-weight:700}
.acr-menu-item-2{display:block}
.acr-menu-top{display:flex;justify-content:space-between;gap:10px;font-size:13px;font-weight:600;color:var(--text)}
.acr-menu-explain{display:block;margin-top:1px;font-size:11.5px;font-weight:400;line-height:1.4;color:var(--text3)}

/* --- Page header, Creatives half (painted into #acrHeaderSync) ----------- */
#tab-ad_accounts .tab-header-row{justify-content:flex-start;gap:16px;flex-wrap:wrap}
#tab-ad_accounts .ad-sync-bar,.acr-hdr{margin-left:auto}
.ad-sync-bar[hidden],.acr-hdr[hidden]{display:none}
.acr-hdr{display:flex;align-items:center;gap:12px}
.acr-syncstat{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 4px;border:0;background:none;color:var(--text3);font-size:12.5px;font-family:inherit;cursor:pointer;white-space:nowrap}
.acr-syncstat:hover,.acr-syncstat.is-open{color:var(--text)}
.acr-syncdot{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--green)}
.acr-syncstat.is-ok .acr-syncdot{background:var(--green)}
.acr-syncstat.is-warn .acr-syncdot{background:var(--gold)}
.acr-syncstat.is-idle .acr-syncdot{background:var(--border3)}
.acr-syncstat.is-busy .acr-syncdot{background:var(--accent);animation:acrPulse 1.2s ease-in-out infinite}
.acr-syncbtn{height:32px;padding:0 14px;border-radius:9px;border:1px solid var(--border2);background:var(--chip);color:var(--text);font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer;white-space:nowrap;transition:border-color var(--tr-base)}
.acr-syncbtn:hover{border-color:var(--border3)}
.acr-syncbtn.is-busy{opacity:.6;cursor:default}
.acr-syncpop{width:250px;padding:8px;border-radius:var(--r4)}
.acr-syncpop-row{display:flex;justify-content:space-between;gap:12px;padding:7px 10px;font-size:12.5px}
.acr-syncpop-name{color:var(--text2)}
.acr-syncpop-when{color:var(--text);font-variant-numeric:tabular-nums;text-align:right}
.acr-syncpop-row.is-warn .acr-syncpop-when{color:var(--gold-txt)}
.acr-syncpop-note{margin:4px 2px 0;padding:8px 8px 2px;border-top:1px solid var(--border);font-size:11.5px;line-height:1.45;color:var(--text3)}
@media (prefers-reduced-motion:reduce){.acr-syncstat.is-busy .acr-syncdot,.acr-sk{animation:none}}

/* Clients popover */
/* Anchored to the button's RIGHT edge: the Clients button sits near the end
   of the toolbar, so a left-anchored 360px panel rendered 175px off-screen at
   a 1100px viewport. Width is clamped to the viewport for the same reason. */
.acr-pop{position:absolute;top:calc(100% + 8px);right:0;z-index:var(--z-popover);width:min(360px,calc(100vw - 32px));background:var(--card);border:1px solid var(--border2);border-radius:var(--r5);box-shadow:var(--shadow-lg);overflow:hidden;animation:acrPop .14s ease}
@keyframes acrPop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.acr-pop{animation:none}}
.acr-pop-head{padding:12px 14px;border-bottom:1px solid var(--border)}
.acr-pop-search{width:100%;box-sizing:border-box;height:34px;border-radius:var(--r2);background:var(--shell);border:1px solid var(--border);color:var(--text);font-size:var(--fz-base);font-family:inherit;padding:0 10px}
.acr-pop-search:focus{border-color:var(--accent-txt)}
.acr-pop-actions{display:flex;align-items:center;gap:8px;margin-top:10px}
.acr-pop-note{flex:1;font-size:var(--fz-sm);color:var(--text3)}
/* A classic scrollbar plus trailing padding: the list used to cut its last
   client flush against the panel border, which reads as the end of the list
   rather than the top of a scroll. */
.acr-pop-list{max-height:300px;overflow-y:auto;padding:6px 6px 10px;scrollbar-width:thin;scrollbar-color:var(--border3) transparent}
.acr-pop-list::-webkit-scrollbar{width:9px}
.acr-pop-list::-webkit-scrollbar-thumb{background:var(--border3);border-radius:999px}
.acr-clirow{display:flex;align-items:center;gap:5px;padding:7px 9px;border-radius:var(--r2);cursor:pointer}
.acr-clirow:hover{background:var(--chip)}
.acr-clirow-name{flex:1;min-width:0;font-size:var(--fz-sm);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acr-clirow-name.is-off{color:var(--text3)}
.acr-clirow-sub{font-size:var(--fz-xs);color:var(--text3);font-variant-numeric:tabular-nums}

/* --- Data notes popover (on the summary card's headline row) -----------
   The reconciliation sentence opens it; one row per note follows, each with
   the action that resolves it; the withheld list, when shown, comes last. */
.acr-notes-trigger{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:7px;font-size:12px;font-weight:600;font-family:inherit;cursor:pointer;white-space:nowrap;color:var(--gold-txt);background:rgba(217,170,69,.07);border:1px solid rgba(217,170,69,.28)}
.acr-notes-trigger:hover,.acr-notes-trigger.is-open{background:rgba(217,170,69,.13)}
.acr-notes-trigger .acr-dd-caret{color:inherit}
.acr-notespop{width:min(400px,calc(100vw - 32px));max-height:min(70vh,560px);overflow-y:auto}
.acr-recon{padding:12px 14px;border-bottom:1px solid var(--border);font-size:12px;line-height:1.5}
.acr-recon-main{color:var(--text2)}
.acr-recon-sub{color:var(--text3)}
.acr-note{display:flex;align-items:center;gap:10px;padding:9px 14px;border-top:1px solid var(--chip)}
.acr-note:first-child{border-top:0}
.acr-note-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.acr-note-dot-gold{background:var(--gold)}
.acr-note-dot-accent{background:var(--accent)}
.acr-note-dot-muted{background:var(--border3)}
.acr-note-main{flex:1;min-width:0}
.acr-note-title{font-size:12.5px;font-weight:600;color:var(--text)}
.acr-note-body{margin-top:1px;font-size:11.5px;line-height:1.4;color:var(--text3)}
.acr-note .acr-linkbtn{flex-shrink:0;font-size:12px}
.acr-notespop .acr-exlist{margin:0;border:0;border-top:1px solid var(--border);border-radius:0}

.acr-chiprow{display:flex;gap:6px;flex-wrap:wrap}
.acr-chipbtn{height:30px;padding:0 13px;border-radius:var(--r2);font-size:var(--fz-base);font-weight:600;font-family:inherit;cursor:pointer;background:var(--card);border:1px solid var(--border);color:var(--text3);transition:background var(--tr-base),border-color var(--tr-base),color var(--tr-base)}
.acr-chipbtn:hover{color:var(--text)}
.acr-chipbtn.is-on{background:var(--chip);border-color:var(--accent-txt);color:var(--text)}
/* Thumbnail + its two overlays */
/* 56px square, object-fit:cover — a DECISION, not the default. A 9:16 Meta
   creative centre-cropped to a square loses the hook copy (top third) and the
   CTA (bottom third), and a 3:4 box would keep them. It is not worth the
   density: at 56px wide a 1080x1920 frame scales 0.052, so hook type ~60-90px
   tall in the source renders 3-5px on screen — illegible in EITHER aspect, so
   the taller box buys a glimpse of copy nobody can read and costs ~18px of
   row pitch on every row. What the row thumbnail is for is RECOGNITION, and
   the centre of the frame is the subject. Comparison at size already has two
   purpose-built surfaces: the lightbox (one click, full size, contain) and
   the family picker (150px, contain). */
.acr-rowthumb{position:relative;display:block;width:56px;height:56px;border-radius:var(--r3);overflow:hidden;background:var(--track);border:0;padding:0;flex-shrink:0}
.acr-rowthumb-btn{cursor:zoom-in}
.acr-rowthumb img{width:100%;height:100%;object-fit:cover;display:block}
.acr-rowthumb .acr-thumb-glyph,.acr-rowthumb .acr-thumb-glyph-fallback{width:100%;height:100%;align-items:center;justify-content:center;color:var(--text3);font-size:26px}
.acr-rowthumb .acr-thumb-glyph{display:flex}
/* Both overlays sit on a scrim that is dark in BOTH themes, so their ink is
   PINNED light rather than themed: var(--text) was right on dark and
   inverted in light, where the ad count read 1.04:1 and the play pip
   1.22-2.09:1 over the image behind them — invisible. var(--on-scrim) measures
   10.3:1 (count) and 7.1:1 (pip) against the scrim composited over a white
   image, i.e. its worst case. -webkit- prefix because Safari <18 drops an
   unprefixed blur and renders the scrim fully opaque over the thumbnail. */
.acr-rowthumb-pip{position:absolute;top:6px;left:6px;width:20px;height:20px;border-radius:var(--r1);display:flex;align-items:center;justify-content:center;background:rgba(13,15,17,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.acr-rowthumb-pip .mi{width:12px;height:12px;fill:var(--on-scrim)}
/* Now holds "2 ads" … "12 ads", not a one- or two-character pip, so it is a
   pill sized by its content with a ceiling that keeps it off the image. */
/* A full-width strip along the bottom edge rather than a corner pill: it now
   holds "2 ads" ... "12 ads" on a 56px thumbnail, and a corner pill kept off
   the image (max-width 34px) clipped every one of them to "2...". */
.acr-rowthumb-count{position:absolute;bottom:0;left:0;right:0;text-align:center;padding:1px 4px;background:rgba(13,15,17,.82);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);font-size:var(--fz-xs);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--on-scrim);font-variant-numeric:tabular-nums}
/* Every chip on this line grew: "Warming" → "Too few leads", "AI" →
   "Grouped by AI". A chip that wraps or clips reads as a different control,
   so the chips are fixed and the NAME takes the shrink — which needs
   flex-wrap:NOWRAP, because wrapping is decided from each item's content
   width BEFORE any shrinking happens: left wrapping, a long name would push
   the chips onto a second line instead of ellipsising itself.
   Both the name and the description carry a `title` in the markup, because
   an ellipsis with no hover is a fact taken off the page: at 1100px a
   classifier-style name ("Generator on driveway — blue overlay") loses ~60%
   of itself (measured scrollWidth 617 / clientWidth 244) and two families
   sharing a prefix become indistinguishable without expanding the row. */
/* Leading is explicit on all three lines because this cell — not the
   thumbnail — is what sets row height now. At the UA's 1.5 the block measured
   67.3px against a 56px thumb; at 1.3 it is ~55px, which is what buys the
   fifth row on a 900px laptop. */
.acr-cre-line1{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;min-width:0;line-height:1.3}
.acr-cre-name{flex:0 1 auto;min-width:3.5em;font-size:var(--fz-md);font-weight:600;letter-spacing:-.01em;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acr-cre-line1>.acr-tier,.acr-cre-line1>.acr-qual{flex-shrink:0}
/* Provenance is the one chip on the line that is pure metadata ("Grouped by
   AI" / "Same file"), and it is last, so it takes the squeeze after the name
   has given all it can — with an ellipsis of its own rather than the cell's
   hard clip. The tier and the "Early call" qualifier are verdicts and stay
   whole. */
.acr-cre-line1>.acr-prov{flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.acr-cre-desc{margin-top:2px;font-size:var(--fz-sm);line-height:1.3;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acr-cre-meta{margin-top:4px;font-size:var(--fz-sm);line-height:1.3;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acr-cre-meta b{color:var(--text2);font-weight:600;font-variant-numeric:tabular-nums}
/* Status chip — the ONE coloured chip on a row, so colour marks the thing
   worth noticing. Provenance beside it is monochrome: it is metadata. */
.acr-tier{padding:2px 8px;border-radius:var(--r1);font-size:var(--fz-xs);font-weight:600;white-space:nowrap}
.acr-tier-rollout{background:rgba(47,163,100,.12);border:1px solid rgba(47,163,100,.32);color:var(--green-txt)}
.acr-tier-hold{background:var(--chip);border:1px solid var(--border2);color:var(--text2)}
.acr-tier-cut{background:rgba(224,85,76,.10);border:1px solid rgba(224,85,76,.28);color:var(--red-txt)}
.acr-tier-warming{background:rgba(217,170,69,.10);border:1px solid rgba(217,170,69,.28);color:var(--gold-txt)}
.acr-qual{padding:2px 7px;border-radius:var(--r1);border:1px dashed var(--border2);font-size:var(--fz-xs);font-weight:600;color:var(--text3);white-space:nowrap}
.acr-prov{padding:2px 6px;border-radius:var(--r1);background:var(--chip);font-size:var(--fz-xs);font-weight:600;color:var(--text3);white-space:nowrap}
/* Coverage cell */
.acr-cov-head{display:flex;align-items:baseline;gap:5px;line-height:1.25}
/* "3 of 20 accounts" is half the rollout thesis and was set at the same size
   as the description prose two columns left of it. */
.acr-cov-n{font-size:17px;line-height:1.25;font-weight:700;letter-spacing:-.02em;color:var(--text);font-variant-numeric:tabular-nums}

/* --- Expanded row (§1.7) ------------------------------------------------- */
.acr-exp{padding:0 16px 16px}
.acr-exp-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start;border-top:1px solid var(--border);padding-top:16px}
.acr-cov-list{display:flex;flex-direction:column;gap:1px;margin-top:9px}
.acr-cov-row{display:grid;grid-template-columns:6px minmax(0,1fr) 90px 70px 90px;gap:14px;align-items:center;padding:9px 12px;border-radius:var(--r2);background:var(--card-hover)}
.acr-cov-row.is-absent{background:transparent}
.acr-cov-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.acr-cov-dot-good{background:var(--green)}
.acr-cov-dot-ok{background:var(--gold)}
.acr-cov-dot-bad{background:var(--red)}
.acr-cov-dot-none{background:transparent;border:1px solid var(--border3)}
.acr-cov-name{font-size:var(--fz-base);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acr-cov-row.is-absent .acr-cov-name{color:var(--text3)}
.acr-cov-num{font-size:var(--fz-sm);color:var(--text2);font-variant-numeric:tabular-nums;text-align:right}
.acr-cov-row.is-absent .acr-cov-num{color:var(--text3)}
.acr-cov-cpl{font-size:var(--fz-sm);font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.acr-cov-cpl-good{color:var(--green-txt)}
.acr-cov-cpl-ok{color:var(--text2)}
.acr-cov-cpl-bad{color:var(--red-txt)}
.acr-cov-cpl-none{color:var(--text3);font-weight:400;font-size:var(--fz-sm)}
.acr-cov-more{padding:9px 12px;font-size:var(--fz-sm);color:var(--text3)}
.acr-cov-sub{margin-top:var(--s4)}
/* Column headers for the five-track coverage list. Not a data row, so it
   carries no fill and the label metrics of every other header on the board. */
.acr-cov-headrow{background:transparent;padding-bottom:4px;font-size:var(--fz-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text3)}
.acr-cov-headrow .acr-cov-num,.acr-cov-headrow .acr-cov-cpl{font-size:var(--fz-xs);font-weight:600;color:var(--text3)}
/* A direction mark beside a CPL, so the figure keeps its own edge. */
.acr-cov-arrow{margin-right:3px;font-weight:400}
.acr-cov-tools{display:flex;align-items:center;gap:var(--s3);padding:7px 12px}
.acr-verdict{border-radius:var(--r4);padding:15px;border:1px solid var(--border)}
/* CREATIVE_TIERS[0]/[1] now carry full titles ("Good, but not a rollout
   yet") rather than sentence fragments, so this label is a two-line block
   at some widths instead of a single word. */
.acr-verdict-label{font-size:var(--fz-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1.35}
.acr-verdict-body{margin-top:7px;font-size:var(--fz-base);color:var(--text);line-height:1.45}
.acr-verdict-rollout{background:rgba(76,141,255,.06);border-color:rgba(76,141,255,.24)}
.acr-verdict-rollout .acr-verdict-label{color:var(--accent-txt)}
.acr-verdict-hold{background:var(--card-hover)}
.acr-verdict-hold .acr-verdict-label{color:var(--text2)}
.acr-verdict-cut{background:rgba(224,85,76,.05);border-color:rgba(224,85,76,.20)}
.acr-verdict-cut .acr-verdict-label{color:var(--red-txt)}
.acr-verdict-warming{background:rgba(217,170,69,.05);border-color:rgba(217,170,69,.20)}
.acr-verdict-warming .acr-verdict-label{color:var(--gold-txt)}
/* Grouping tools — reachable, but one disclosure out of the reading path. */
.acr-fix{margin-top:var(--s4)}
.acr-fix-body{margin-top:10px;border:1px solid var(--border);border-radius:var(--r3);padding:12px}
.acr-fix-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
/* Wrapper so the keyboard hint sits UNDER the input instead of becoming a
   third item in .acr-fix-actions' row. */
/* The rename DIALOG (was an inline input that cancelled on blur, i.e. on
   mousedown, so any control reached for with the mouse discarded the edit).
   It reuses the family picker's .acr-fp shell — same scrim, same panel, same
   focus trap — and only re-specifies the parts that differ: a narrower panel
   and a form instead of a search grid. */
.acr-fp-count{font-size:var(--fz-xs);color:var(--text3);margin-top:-4px}
.acr-rn-panel{width:min(94vw,720px)}
.acr-rn-body{grid-template-columns:200px 1fr}
.acr-rn-fields{display:flex;flex-direction:column;gap:6px;padding:18px;min-width:0}
.acr-rn-label{font-size:var(--fz-xs);font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.04em}
.acr-rn-opt{font-weight:400;text-transform:none;letter-spacing:0;color:var(--text3)}
.acr-rn-name,.acr-rn-desc{width:100%;box-sizing:border-box;background:var(--shell);color:var(--text);border:1px solid var(--border);border-radius:var(--r2);font-size:var(--fz-base);font-family:inherit;padding:8px 11px}
.acr-rn-name{height:36px;font-weight:600}
.acr-rn-desc{resize:vertical;min-height:70px;line-height:1.45}
.acr-rn-name:focus,.acr-rn-desc:focus{border-color:var(--accent-txt);outline:none}
.acr-rn-help{font-size:var(--fz-xs);color:var(--text3);line-height:1.4;margin-bottom:6px}
.acr-rn-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
@media (max-width:640px){.acr-rn-body{grid-template-columns:minmax(0,1fr)}}
/* Merge-into and Move-to are emitted with NO whitespace before their commit
   button, deliberately: they are one segmented control, not two unrelated
   controls touching. */
.acr-table-scroll{overflow-x:auto}
.acr-table{width:100%;border-collapse:collapse;font-size:var(--fz-sm)}
.acr-table th{text-align:left;font-size:var(--fz-xs);text-transform:uppercase;letter-spacing:.3px;color:var(--text3);padding:6px 8px;border-bottom:1px solid var(--border);white-space:nowrap}
.acr-table td{padding:6px 8px;border-bottom:1px solid var(--border);color:var(--text2);white-space:nowrap}
.acr-table tbody tr:last-child td{border-bottom:none}
/* 52px thumb + 2×8px cell padding = 68px; the old 48px was a declaration
   that could never hold, so the column width was whatever the content
   forced. Stating the real figure pins it. */
.acr-varthumb{width:68px}
.acr-table td.acr-num{text-align:right;font-variant-numeric:tabular-nums}
.acr-table td.acr-client-cell{font-weight:600;color:var(--text)}
/* display:flex stopped this <td> being a table-cell, so its border-bottom
   drew at the bottom of a 30px flex box instead of the 89px row — every
   separator terminated short and the last column floated outside the ruled
   area. The controls are inline-flex already, so right-aligning the cell
   lays them out the same; word-spacing widens only the REAL whitespace in
   the markup, which is what keeps the select+commit pair welded (flex's
   gap was prising it apart). */
.acr-variant-actions{text-align:right;word-spacing:5px}
.acr-variant-actions>*{vertical-align:middle;word-spacing:normal}

/* --- Needs review (§2) --------------------------------------------------- */
.acr-review{margin-top:var(--s5)}
.acr-review-head{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.acr-review-head>div:first-child{flex:1;min-width:0}
.acr-review-title{margin:0;font-size:var(--fz-lg);font-weight:700;letter-spacing:-.02em;color:var(--text)}
.acr-review-sub{margin-top:3px;font-size:var(--fz-sm);color:var(--text3)}
.acr-bulk{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s4);padding:10px 16px;background:var(--card);border:1px solid var(--border);border-radius:var(--r3);flex-wrap:wrap}
.acr-bulk-label{flex:1;font-size:var(--fz-sm);color:var(--text3)}
.acr-queue{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s3)}
/* flex-wrap:wrap gave measured row heights of 78/141/87/122/122/161/78/97px
   at 900px — and the wrapped action cluster sat immediately above the NEXT
   row, so which row a button acted on was ambiguous. NOWRAP plus a shrinkable
   suggestion block holds one line per row at every width the queue is read
   at; what gives is the suggestion's name, which ellipsises. */
.acr-qrow{display:flex;align-items:center;gap:14px;padding:12px 16px;background:var(--card);border:1px solid var(--border);border-radius:var(--r4);flex-wrap:nowrap}
/* The tallest natural row (a 52px suggestion thumb + its padding) becomes
   EVERY row's height, so the queue scans as a list rather than as eight
   differently-sized cards. */
.acr-qrow{min-height:90px}
.acr-qrow:hover{border-color:var(--border2)}
.acr-qrow-main{flex:1 1 180px;min-width:0}
/* "Waiting to be grouped" / "Grouping failed · will retry" sit inline after
   the ad name and are roughly double the old chips' width, so one of the two
   has to give. It is the NAME: the chip is this screen's whole distinction
   (its filters are "Grouping failed N" and "Waiting N") and a chip that
   wraps or clips reads as a different control.
   The name used to be a bare text NODE — an anonymous flex item no selector
   can reach — so it could not be ellipsised and wrapped instead; the
   two-line `max-height` cap that then held the row height sliced the wrapped
   chip in half or hid it outright (measured 10px of a 20px chip clipped at
   900px, the whole chip gone at 1280px on a real Meta ad name), i.e. a
   FAILED row rendered identically to a queued one. Giving the name its own
   element is what buys the ellipsis, and with it one line per row at every
   width — the same shrink-the-name/hold-the-chip split `.acr-cre-line1`
   already uses two hundred lines up. */
.acr-qrow-name{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;min-width:0;font-size:var(--fz-base);line-height:1.3;font-weight:600;color:var(--text)}
.acr-qrow-name-txt{flex:0 1 auto;min-width:3.5em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acr-qrow-name>.acr-state-chip{flex-shrink:0}
.acr-qrow-meta{margin-top:3px;font-size:var(--fz-sm);color:var(--text3)}
.acr-state-chip{padding:2px 7px;border-radius:var(--r1);font-size:var(--fz-xs);font-weight:600;background:var(--chip);border:1px solid var(--border2);color:var(--text3);white-space:nowrap}
.acr-state-chip.is-failed{background:rgba(224,85,76,.10);border-color:rgba(224,85,76,.26);color:var(--red-txt)}
/* Widened for "Maybe this one · 72% sure", which replaced "Likely 72%" —
   at 280px the two-line main block pushed Accept out of the row. */
/* The suggested family's NAME is the one fact that decides whether to press
   Accept, and at 320px it clipped to "Before / after panel ..." on three
   consecutive rows. Wider, and shrinkable rather than fixed so it gives way
   before the row wraps. */
.acr-sugg{display:flex;align-items:center;gap:9px;flex:0 1 400px;min-width:220px;padding:5px 11px;border-radius:var(--r3);background:rgba(76,141,255,.07);border:1px solid rgba(76,141,255,.22)}
/* Matched to .acr-thumb-sm, which is what the candidate beside it uses. A
   30px thumb against a 52px one is not a comparison; the point of this block
   is "is this the same creative as that one". */
.acr-sugg-thumb{display:block;width:52px;height:52px;border-radius:var(--r2);overflow:hidden;background:var(--track);flex-shrink:0}
.acr-sugg-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.acr-sugg-main{min-width:0;flex:1}
.acr-sugg-label{display:block;font-size:var(--fz-xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acr-sugg-name{display:block;font-size:var(--fz-sm);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acr-qrow-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.acr-review-foot{display:flex;align-items:center;justify-content:center;gap:var(--s4);margin-top:var(--s4)}
.acr-review-count{font-size:var(--fz-sm);color:var(--text3)}

/* --- Loading skeleton ---------------------------------------------------- */
.acr-sk{display:block;background:var(--track);border-radius:var(--r1);height:12px;animation:acrPulse 1.4s ease-in-out infinite}
.acr-sk-toolbar{display:flex;gap:12px;padding:6px 0}
.acr-sk-wide{width:220px;height:34px;border-radius:var(--r3)}
.acr-sk-thumb{width:56px;height:56px;border-radius:var(--r3)}
.acr-sk-name{height:16px}
@keyframes acrPulse{0%,100%{opacity:1}50%{opacity:.55}}
.acr-thumb-sm{width:52px;height:52px;flex-basis:52px;border-radius:7px}
.acr-thumb-glyph{color:var(--text3);font-size:22px}
.acr-thumb-glyph-fallback{width:100%;height:100%;align-items:center;justify-content:center;color:var(--text3);font-size:20px}
/* This class is always paired WITH .acr-thumb on one element, at equal
   specificity and later in the file — so background:none / border:0 /
   display:block were winning and an image thumbnail rendered borderless,
   unfilled and uncentred while its picture lazy-loaded, i.e. the same
   component looked like two depending on whether the image had arrived.
   Keep only what a <button> genuinely needs; .acr-thumb's own author
   declarations already beat the UA button chrome. */
.acr-thumb-btn{padding:0;cursor:zoom-in}
.acr-chip{display:inline-flex;align-items:center;font-size:var(--fz-xs);font-weight:700;letter-spacing:.3px;padding:2px 8px;border-radius:999px;background:var(--chip);color:var(--text3)}
.acr-chip-idle{background:var(--card2);color:var(--text3)}
.acr-chip-high{background:var(--accent-dim);color:var(--accent-txt)}
.acr-chip-mid{background:var(--chip);color:var(--text2);border:1px dashed var(--border)}
.acr-chip-warn{background:rgba(212,148,42,.16);color:var(--gold-txt)}
.acr-chip-user{background:var(--accent-dim);color:var(--accent-txt);border:1px solid var(--accent-txt)}
/* Enlarged creative */
/* The scrim is dark in BOTH themes, so everything inside it carries PINNED
   light ink rather than the theme's. In light mode var(--text) on this
   scrim measured 1.36:1 — and this is the only place a creative's name is
   shown at full size, with its Close control beside it. Setting the colour
   on the CONTAINER covers the caption, the expired-thumbnail notice and
   anything else a future row adds; only the link needs its own value.
   z-index is a token now: 2000 sat above --z-confirm, so a confirm raised
   while the lightbox was up would have rendered behind it. */
.acr-lightbox{position:fixed;inset:0;z-index:var(--z-lightbox);display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.78);padding:32px;color:var(--on-scrim)}
.acr-lightbox-inner{max-width:min(90vw,900px);max-height:88vh;display:flex;flex-direction:column;gap:10px}
.acr-lightbox-stage{display:flex;align-items:center;justify-content:center;min-height:0}
.acr-lightbox-img{max-width:100%;max-height:78vh;object-fit:contain;border-radius:var(--r2);background:var(--shell)}
/* Shown in the image's place when Meta's CDN has expired the thumbnail. */
.acr-lightbox-gone{flex-direction:column;align-items:center;justify-content:center;gap:var(--s3);max-width:360px;padding:40px 24px;border-radius:var(--r2);background:rgba(255,255,255,.05);text-align:center;font-size:var(--fz-base);line-height:1.5}
.acr-lightbox-gone-glyph{font-size:34px;color:#c3c9d0}
.acr-lightbox-cap{display:flex;align-items:center;gap:8px;font-size:var(--fz-sm);color:var(--on-scrim)}
/* 7.2:1 and 5.9:1 on the scrim. .fc-muted is a Finance-tab class the
   caption's "· still frame from the video" span still leans on for its
   colour — overridden here so it is legible; the markup-side cleanup is a
   handoff, not something a stylesheet can finish. */
.acr-lightbox .fc-muted{color:#c3c9d0}
.acr-lightbox .acr-linkbtn{color:#8fb6ff}
.acr-lightbox :focus-visible{outline-color:#8fb6ff}
/* Family picker — a modal, so the candidate sits beside the options at a size
   you can actually compare. */
.acr-fp{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.72);padding:28px}
.acr-fp-panel{width:min(96vw,1040px);max-height:88vh;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border2);border-radius:var(--r5);overflow:hidden;box-shadow:var(--shadow-lg)}
.acr-fp-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--border)}
.acr-fp-title{font-size:var(--fz-md);font-weight:600}
.acr-fp-body{display:grid;grid-template-columns:240px 1fr;gap:0;min-height:0;flex:1}
.acr-fp-cand{padding:18px;border-right:1px solid var(--border);display:flex;flex-direction:column;gap:8px}
.acr-fp-cand-img{width:100%;aspect-ratio:1;object-fit:contain;background:var(--shell);border-radius:var(--r2);display:flex;align-items:center;justify-content:center;font-size:34px;color:var(--text3)}
.acr-fp-cand-wrap{display:block}
.acr-fp-cand-name{font-size:var(--fz-base);font-weight:600;word-break:break-word}
/* Was leaning on .fc-muted — a Finance-tab class — for its only colour. */
.acr-fp-cand-sub{font-size:var(--fz-xs);color:var(--text3)}
.acr-fp-newbtn{margin-top:auto;padding:8px 10px;border:1px solid var(--border);border-radius:var(--r2);background:none;color:inherit;cursor:pointer;font-size:var(--fz-sm);font-family:inherit}
.acr-fp-newbtn:hover:not(:disabled){border-color:var(--accent-txt)}
.acr-fp-picker{display:flex;flex-direction:column;min-height:0;padding:18px;gap:12px}
.acr-fp-search{width:100%;box-sizing:border-box;height:34px;padding:0 11px;border:1px solid var(--border);border-radius:var(--r2);background:var(--shell);color:inherit;font-size:var(--fz-base);font-family:inherit}
.acr-fp-search:focus{border-color:var(--accent-txt)}
.acr-fp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;overflow-y:auto;min-height:0;padding-right:4px}
.acr-fp-card{display:flex;flex-direction:column;gap:6px;padding:8px;border:1px solid var(--border);border-radius:var(--r3);background:none;color:inherit;cursor:pointer;text-align:left;font-family:inherit}
.acr-fp-card:hover:not(:disabled){border-color:var(--accent-txt)}
.acr-fp-card:disabled{opacity:.45;cursor:default}
.acr-fp-card-thumb{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;background:var(--shell);border-radius:var(--r1);overflow:hidden}
/* contain, matching .acr-fp-cand-img: this modal exists to answer "is THIS
   the same creative as THAT one", and letterboxing the candidate while
   cropping everything it is compared against is the one thing that makes
   the comparison unreliable. */
.acr-fp-card-thumb img{width:100%;height:100%;object-fit:contain}
.acr-fp-card-glyph{font-size:28px;color:var(--text3)}
.acr-fp-card-name{font-size:var(--fz-sm);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.acr-fp-card-sub{font-size:var(--fz-xs);color:var(--text3)}
.acr-fp-empty{grid-column:1/-1;font-size:var(--fz-sm);padding:24px 4px;color:var(--text3)}
/* The withheld list — the undo for both exclusion levels. */
.acr-exlist{margin:var(--s3) 0 0;padding:8px;border:1px solid var(--border);border-radius:var(--r3);background:var(--card)}
.acr-exrow{display:flex;align-items:center;gap:10px;padding:5px 6px;font-size:var(--fz-sm)}
.acr-exrow-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.acr-exrow-kind{font-size:var(--fz-xs);color:var(--text3)}

/* --- Summary card (Row 3): where the spend is going, and the tier filter --
   The bar and the chips under it ARE the status-tier filter. Segments are
   RANKED spend, so the notes popover opens on the reconciliation sentence. */
.acr-summary{margin-top:14px;padding:16px 18px;border-radius:var(--r4);border:1px solid var(--border);background:var(--bg2);--acr-hold:#4a5158;--acr-early:#6b5a2e}
[data-theme="light"] .acr-summary{--acr-hold:#aeb4bd;--acr-early:#d7bd7a}
@media (prefers-color-scheme: light){html:not([data-theme="dark"]):not([data-theme="light"]) .acr-summary{--acr-hold:#aeb4bd;--acr-early:#d7bd7a}}
.acr-sum-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.acr-sum-lead{flex:1;min-width:280px;font-size:14px;line-height:1.45;color:var(--text)}
.acr-sum-bad{color:var(--red-txt);font-weight:700}
.acr-sum-book{color:var(--text);font-weight:600}
.acr-sum-bar{display:flex;gap:3px;height:12px;margin-top:14px}
/* `flex-grow` is set inline to the tier's share of spend; the basis is 0 so
   the shares are exact, and the 10px floor keeps a small tier clickable. */
.acr-sum-seg{flex:0 1 0;min-width:10px;height:100%;padding:0;border:0;border-radius:4px;cursor:pointer;transition:opacity .15s}
.acr-sum-seg.is-dim{opacity:.3}
.acr-sum-seg.is-rollout,.acr-sum-sw.is-rollout{background:var(--green)}
.acr-sum-seg.is-hold,.acr-sum-sw.is-hold{background:var(--acr-hold)}
.acr-sum-seg.is-cut,.acr-sum-sw.is-cut{background:var(--red)}
.acr-sum-seg.is-warming,.acr-sum-sw.is-warming{background:var(--acr-early)}
.acr-sum-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.acr-sum-chip{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;border-radius:var(--r2);border:1px solid var(--border);background:transparent;color:var(--text2);font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer;white-space:nowrap;transition:background var(--tr-base),border-color var(--tr-base),color var(--tr-base)}
.acr-sum-chip:hover{color:var(--text);border-color:var(--border3)}
.acr-sum-chip.is-on{background:var(--chip);border-color:var(--accent-txt);color:var(--text)}
.acr-sum-sw{width:9px;height:9px;border-radius:3px;flex-shrink:0}
.acr-sum-n{color:var(--text3);font-variant-numeric:tabular-nums}
.acr-sum-sp{margin-left:-3px;color:var(--text3);font-weight:500;font-variant-numeric:tabular-nums}

/* --- Results bar (Row 4): the count, Select to group, and the sort ------- */
.acr-resultsbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:18px 0 12px}
.acr-results-count{flex-shrink:0;white-space:nowrap;font-size:13px;color:var(--text2)}
.acr-results-count b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.acr-resultsbar-right{display:flex;align-items:center;gap:8px;margin-left:auto}
.acr-resultsbar .acr-selbtn{height:32px}
.acr-resultsbar + .acr-legend{margin-bottom:var(--s4)}
/* By account opens on its own headline rather than a results bar, so it
   owes the summary card the same gap the results bar keeps. */
.acr-summary + #acrResults > .acr-headline:first-child{margin-top:18px}

/* --- Screen headline ----------------------------------------------------- */
.acr-headline{margin:0 0 var(--s4)}
.acr-headline-txt{display:block;font-size:20px;font-weight:700;letter-spacing:-.03em;line-height:1.3;color:var(--text)}
.acr-headline-sub{display:block;margin-top:3px;font-size:12px;color:var(--text3)}

/* --- Shared: the four-up metric block ------------------------------------
   One hairline grid, so the four figures share a baseline and an edge. The
   1px gap IS the rule: a border on each cell doubles up between them. */
.acr-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:12px;background:var(--border);border:1px solid var(--border);border-radius:var(--r3);overflow:hidden}
.acr-stats.is-drawer{grid-template-columns:repeat(2,minmax(0,1fr))}
.acr-stat{display:block;background:var(--bg2);padding:9px 12px;min-width:0}
.acr-stat-label{display:block;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text3)}
.acr-stat-val{display:block;margin-top:3px;font-size:20px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--text)}
.acr-stats.is-drawer .acr-stat-val{font-size:17px}
.acr-stat-val.is-good{color:var(--green-txt)}
.acr-stat-val.is-bad{color:var(--red-txt)}
/* Not a hue at all: a figure the board has REFUSED to grade must not borrow
   the colour of one it has. Same call as the old `is-idle` coverage fill. */
.acr-stat-val.is-idle{color:var(--text2);font-size:13px;font-weight:500;letter-spacing:0;margin-top:6px}

/* --- Shared: the coverage pip strip --------------------------------------
   One mark per account that spent in the window. It is the only element on
   the board carrying coverage AND performance at once, which is what makes
   "4 running, 19 open" actionable rather than a ratio. aria-hidden, because
   the words beside it say the same thing for a screen reader. */
.acr-pips{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:3px;flex:1;min-width:0}
.acr-pips.is-small{gap:1.5px}
.acr-pip{display:block;height:22px;border-radius:4px;background:var(--border3)}
.acr-pips.is-small .acr-pip{height:5px;border-radius:2px}
.acr-pip.is-good{background:var(--green)}
.acr-pip.is-ok{background:var(--border3)}
.acr-pip.is-bad{background:var(--red)}
.acr-pip.is-idle{background:var(--card2);box-shadow:inset 0 0 0 1px var(--border3)}
.acr-pip.is-open{background:var(--bg2);box-shadow:inset 0 0 0 1px var(--border2)}
.acr-legend{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;font-size:11.5px;color:var(--text3)}
.acr-legend-item{display:inline-flex;align-items:center;gap:6px}
.acr-legend-item .acr-pip{width:13px;height:13px;border-radius:3px}
.acr-acc-legend{margin-top:var(--s3)}

/* --- Screen 1: Roll out — the decision cards ----------------------------- */
.acr-cards{display:flex;flex-direction:column;gap:var(--s3)}
.acr-card{display:grid;grid-template-columns:104px minmax(0,1fr) 190px;gap:var(--s5);align-items:center;width:100%;padding:16px 18px;border-radius:var(--r5);border:1px solid var(--border2);background:var(--card);text-align:left;font-family:inherit;color:inherit;cursor:pointer;transition:border-color var(--tr-base),background var(--tr-base)}
.acr-card:hover{border-color:var(--accent);background:var(--card-hover)}
.acr-card-thumb{display:block;width:104px;height:104px}
/* The thumbnail is a BUTTON (click to enlarge) nested in a button, so it has
   to fill the cell rather than sit at the old row-thumb's 56px. */
.acr-card-thumb .acr-rowthumb{width:104px;height:104px;border-radius:var(--r3)}
.acr-card-main{display:block;min-width:0}
.acr-card-cov{display:flex;align-items:center;gap:var(--s3);margin-top:13px}
.acr-cov-n{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--text3)}
.acr-cov-n.is-run{color:var(--green-txt)}
.acr-card-side{display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.acr-card-cta{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;color:var(--accent-txt)}
.acr-card-cta .mi{width:14px;height:14px}
/* The projection. Tinted, because it is the one figure on the card that is a
   CLAIM rather than a measurement — the caption under it says "at most". */
.acr-proj{display:block;padding:12px 14px;border-radius:var(--r4);background:var(--accent-dim);border:1px solid rgba(76,141,255,.24)}
.acr-proj-val{display:block;font-size:22px;font-weight:700;letter-spacing:-.025em;font-variant-numeric:tabular-nums;color:var(--text)}
.acr-proj-cap{display:block;margin-top:1px;font-size:11.5px;line-height:1.35;color:var(--text2)}

/* --- Screen 2: All creatives — the wall ---------------------------------- */
.acr-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:var(--s4)}
.acr-tile{display:flex;flex-direction:column;padding:0;border-radius:var(--r4);border:1px solid var(--border);background:var(--card);overflow:hidden;text-align:left;font-family:inherit;color:inherit;cursor:pointer;transition:border-color var(--tr-base)}
.acr-tile:hover{border-color:var(--accent)}
/* A rollout candidate is the one tier that gets a border before you read it —
   a tile grid is scanned, not read, so the winners have to be findable
   without parsing four chips. */
.acr-tile.is-rollout{border-color:rgba(47,163,100,.45)}
.acr-tile-shot{position:relative;display:block;width:100%;aspect-ratio:1;background:var(--track)}
.acr-tile-shot .acr-rowthumb{width:100%;height:100%;border-radius:0;border:0}
/* At 56px the variant count is a full-width band under the thumbnail, which
   is the only way to fit it. At tile size that band reads as a second strip
   of UI between the picture and its name, so here it is a corner pill. */
.acr-tile-shot .acr-rowthumb-count{left:auto;bottom:8px;right:8px;padding:2px 7px;border-radius:5px;font-size:10.5px}
.acr-tile-shot .acr-rowthumb-pip{top:auto;bottom:8px;left:8px}
/* Dimmed, not hidden: a creative the board says to cut still has to be
   recognisable, it just must not compete with the winners for attention. */
.acr-tile.is-cut .acr-tile-shot .acr-rowthumb img{filter:grayscale(.55) brightness(.72)}
.acr-tile-flag{position:absolute;top:8px;left:8px;z-index:1;padding:3px 8px;border-radius:var(--r1);font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--shell)}
.acr-tile-flag.is-rollout{background:rgba(47,163,100,.92)}
.acr-tile-flag.is-hold{background:var(--card2);color:var(--text2)}
.acr-tile-flag.is-cut{background:rgba(224,85,76,.92)}
.acr-tile-flag.is-warming{background:rgba(217,170,69,.92)}
.acr-tile-body{display:block;padding:10px 11px 11px;min-width:0}
/* Exactly two lines, always — a ragged grid of tiles whose bodies start at
   different heights is what stops a wall reading as a wall. */
.acr-tile-name{display:block;font-size:12px;font-weight:600;line-height:1.35;height:32px;overflow:hidden}
.acr-tile-nums{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);margin-top:7px}
.acr-tile-cpl{font-size:15px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--text)}
.acr-tile-delta{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.acr-tile-delta.is-good{color:var(--green-txt)}
.acr-tile-delta.is-bad{color:var(--red-txt)}
.acr-tile-delta.is-idle{font-size:11px;font-weight:500;color:var(--text3)}
.acr-tile-body .acr-pips{display:grid;margin-top:9px}
.acr-tile-cov{display:block;margin-top:5px;font-size:10.5px;font-variant-numeric:tabular-nums;color:var(--text3)}
/* Select → Group. In Select mode the tile itself is the checkbox (a toggled
   <button>, aria-pressed), so the tick is painted, not a nested control. The
   empty ring is shown on EVERY tile while selecting — it is what tells a
   reader the tiles are now pick-able rather than drawer-openers. The selected
   state is a filled accent disc + tick, a 2px accent ring and a tinted body:
   three cues, so it survives a dimmed "cut" thumbnail and a colour-blind
   reader alike. Hover stays the ordinary 1px border, deliberately quieter. */
.acr-tile-check{position:absolute;top:8px;right:8px;z-index:2;width:22px;height:22px;box-sizing:border-box;border-radius:50%;border:2px solid #fff;background:rgba(0,0,0,.38);box-shadow:0 1px 3px rgba(0,0,0,.45);pointer-events:none}
.acr-tile.is-selected{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.acr-tile.is-selected .acr-tile-check{background:var(--accent);border-color:var(--accent)}
.acr-tile.is-selected .acr-tile-check::after{content:'';position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.acr-tile.is-selected .acr-tile-body{background:var(--accent-sel)}
.acr-wall.is-selecting .acr-tile:focus-visible{outline:2px solid var(--accent-txt);outline-offset:2px}
@media (prefers-reduced-motion:no-preference){
  .acr-tile.is-selected .acr-tile-check{animation:bulkPop .18s ease}
}
/* Sticky, so on a wall of a hundred tiles the Group button is never a scroll
   away from the tile just ticked. */
.acr-selbar{position:sticky;bottom:16px;z-index:5;display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s4);padding:10px 16px;background:var(--card2);border:1px solid var(--accent);border-radius:var(--r3);box-shadow:var(--shadow-lg)}
.acr-selbar-count{flex:1 1 auto;font-size:var(--fz-sm);font-weight:600;color:var(--text)}
.acr-selbar-note{font-weight:400;color:var(--text3)}
.acr-selbar-rest{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.acr-selbar-why{font-size:var(--fz-sm);color:var(--gold-txt)}
/* The Group dialog. Two classes on the panel so its width wins over
   .acr-fp-panel whatever order the two rules end up in. */
.acr-fp-panel.acr-grp-panel{width:min(94vw,620px)}
.acr-grp-body{display:flex;flex-direction:column;gap:12px;padding:18px;overflow:auto;min-height:0}
.acr-grp-lead{margin:0;font-size:var(--fz-sm);line-height:1.45;color:var(--text2)}
.acr-grp-list{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;border:0;min-width:0}
.acr-grp-list>legend{margin-bottom:6px;padding:0}
.acr-grp-opt{display:flex;align-items:center;gap:12px;padding:8px 10px;border:1px solid var(--border);border-radius:var(--r3);background:var(--card);cursor:pointer;min-width:0}
.acr-grp-opt:hover{border-color:var(--border3)}
.acr-grp-opt:has(input:checked){border-color:var(--accent);background:var(--accent-dim)}
.acr-grp-opt input{flex:none;margin:0;width:16px;height:16px;accent-color:var(--accent)}
.acr-grp-thumb{flex:none;position:relative;display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:var(--r2);overflow:hidden;background:var(--track);color:var(--text3)}
.acr-grp-img{width:100%;height:100%;object-fit:cover}
.acr-grp-glyph{display:flex;align-items:center;justify-content:center;font-size:18px}
.acr-grp-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.acr-grp-name{font-size:var(--fz-base);font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acr-grp-sub{font-size:var(--fz-xs);color:var(--text3)}
.acr-grp-sum{font-size:var(--fz-sm);color:var(--text2)}

/* --- Screen 3: Accounts -------------------------------------------------- */
.acr-acc{border:1px solid var(--border);border-radius:var(--r4);overflow:hidden}
.acr-acc-row{display:grid;grid-template-columns:200px 96px 84px minmax(0,1fr) 104px;gap:var(--s4);align-items:center;padding:11px 16px;border-bottom:1px solid var(--card2)}
.acr-acc-row:last-child{border-bottom:0}
.acr-acc-row.is-head{background:var(--bg2);border-bottom:1px solid var(--border);font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text3)}
/* An account missing two or more of the shortlist is the row this screen was
   built to surface, so it is tinted rather than merely sorted to the top —
   the ordering is lost the moment somebody searches. */
.acr-acc-row.is-gap{background:var(--accent-dim)}
.acr-acc-name{font-size:13.5px;font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acr-acc-spend{font-size:12.5px;color:var(--text2)}
.acr-acc-cpl{font-size:13.5px;font-weight:700}
.acr-acc-cpl.is-good{color:var(--green-txt)}
.acr-acc-cpl.is-bad{color:var(--red-txt)}
.acr-acc-cpl.is-ok,.acr-acc-cpl.is-none{color:var(--text2)}
.acr-acc-up{font-size:13.5px;font-weight:700;color:var(--border3)}
.acr-acc-up.is-on{color:var(--accent-txt)}
.acr-slots{display:flex;gap:6px;min-width:0}
/* A dashed slot is an ABSENCE and a solid one is a fact. The dash is the
   non-colour channel: filled-vs-hollow survives every form of colour
   blindness, which green-vs-grey alone does not. */
.acr-slot{flex:1;min-width:0;height:28px;display:flex;align-items:center;justify-content:center;padding:0 7px;border-radius:var(--r1);border:1px dashed var(--border3);background:var(--card);font-family:inherit;font-size:10.5px;font-weight:600;color:var(--text3);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer}
.acr-slot:hover{border-color:var(--accent);color:var(--text)}
.acr-slot.is-on{border-style:solid;border-color:rgba(47,163,100,.5);background:rgba(47,163,100,.18);color:var(--green-txt)}
.acr-slot-key{display:inline-block;width:13px;height:13px;border-radius:4px;border:1px dashed var(--border3);background:var(--card)}
.acr-slot-key.is-on{border-style:solid;border-color:rgba(47,163,100,.5);background:rgba(47,163,100,.22)}

/* --- The drawer ----------------------------------------------------------
   A SIBLING of .acr-page (like the picker and the lightbox), so the page's
   own stacking and overflow cannot trap it. */
.acr-drawer-scrim{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.6)}
.acr-drawer{position:fixed;top:0;right:0;bottom:0;z-index:201;width:min(580px,96vw);display:flex;flex-direction:column;background:var(--bg);border-left:1px solid var(--border2);box-shadow:-18px 0 50px rgba(0,0,0,.5);animation:acrDrawerIn var(--tr-base) ease}
@keyframes acrDrawerIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.acr-drawer{animation:none}}
.acr-drawer :focus-visible{outline-color:var(--accent-txt)}
.acr-drawer-head{display:flex;align-items:center;gap:var(--s3);flex-shrink:0;padding:14px 20px;border-bottom:1px solid var(--card2)}
.acr-drawer-pos{font-size:13px;font-weight:700;color:var(--text)}
.acr-drawer-nav{display:flex;gap:6px;margin-left:auto}
.acr-iconbtn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--r2);border:1px solid var(--border2);background:var(--card2);color:var(--text);font-family:inherit;cursor:pointer}
.acr-iconbtn:hover{background:var(--border)}
.acr-iconbtn .mi{width:16px;height:16px}
.acr-flip{transform:rotate(180deg)}
.acr-drawer-body{flex:1;min-height:0;overflow-y:auto;padding:20px}
.acr-drawer-hero{display:grid;grid-template-columns:132px minmax(0,1fr);gap:var(--s4);align-items:start}
.acr-drawer-thumb{display:block;width:132px;height:132px}
.acr-drawer-thumb .acr-rowthumb{width:132px;height:132px;border-radius:var(--r4)}
.acr-drawer-id{min-width:0}
/* The drawer has the room a table row did not, so the name WRAPS here rather
   than truncating — the one screen that shows a creative on its own is the
   worst place to hide half its name behind an ellipsis. Same for the
   provenance chip, which the row had to let shrink. */
.acr-drawer-name{font-size:17px;line-height:1.25;letter-spacing:-.025em;flex:1 1 100%;min-width:0;overflow:visible;white-space:normal;text-overflow:clip}
.acr-drawer-id .acr-cre-line1{flex-wrap:wrap;row-gap:6px}
.acr-drawer-id .acr-cre-line1>.acr-prov{flex-shrink:0;overflow:visible;text-overflow:clip}
.acr-drawer-sec{margin-top:var(--s5)}
.acr-drawer-listhead{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s3)}
.acr-drawer-listsub{margin-top:2px;font-size:12px;color:var(--text3)}
/* The drawer renders the same expanded panel the leaderboard row used to, so
   it inherits every .acr-exp rule — it only has to drop the card chrome that
   made sense inside a table row. */
.acr-drawer .acr-exp{margin:0;padding:0;border:0;background:none}
.acr-drawer .acr-exp-grid{grid-template-columns:minmax(0,1fr)}
.acr-drawer-foot{display:flex;align-items:center;gap:var(--s4);flex-shrink:0;padding:16px 20px;border-top:1px solid var(--card2);background:var(--bg2)}
.acr-drawer-foot .acr-proj{flex:1;min-width:0;background:none;border:0;padding:0}
.acr-drawer-foot .acr-proj-val{font-size:24px}
.acr-drawer-foot .acr-btn{flex-shrink:0}
.acr-btn-primary.is-done{background:var(--green);border-color:transparent}

/* The rollout list: one tickable account per line. role="checkbox", so the
   box is drawn rather than native — a native input cannot carry the spend
   and saving columns on the same baseline. */
.acr-picks{display:flex;flex-direction:column;gap:2px}
.acr-pick{display:grid;grid-template-columns:18px minmax(0,1fr) auto 68px;gap:var(--s3);align-items:center;width:100%;padding:9px 12px;border-radius:var(--r2);border:1px solid transparent;background:none;text-align:left;font-family:inherit;color:inherit;cursor:pointer}
.acr-pick:hover{background:var(--card)}
.acr-pick.is-on{background:var(--card-hover);border-color:var(--border2)}
.acr-pick-box{width:18px;height:18px;border-radius:5px;border:1px solid var(--border3);flex-shrink:0;position:relative}
.acr-pick.is-on .acr-pick-box{border-color:var(--green);background:var(--green)}
/* A CSS tick rather than a sprite glyph: a checkbox mark inside a grid cell
   needs to scale with the box, not with the sprite's viewBox. */
.acr-pick.is-on .acr-pick-box::after{content:'';position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid var(--shell);border-width:0 2px 2px 0;transform:rotate(45deg)}
.acr-pick-name{font-size:13px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acr-pick-spend{font-size:12px;font-variant-numeric:tabular-nums;color:var(--text3)}
.acr-pick-save{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;text-align:right;color:var(--green-txt)}
/* Not a rollout candidate: the same list, for reference, with nothing to
   tick — a checkbox here fed no figure and no Copy button. */
.acr-pick.is-static{grid-template-columns:minmax(0,1fr) auto;cursor:default}
.acr-pick.is-static:hover{background:none}

/* --- Skeleton (matches the card list it stands in for) ------------------- */
.acr-sk-alloc{margin-bottom:var(--s4)}
.acr-sk-alloc .acr-sk{height:58px;border-radius:var(--r4)}
.acr-sk-card{display:grid;grid-template-columns:104px minmax(0,1fr) 190px;gap:var(--s5);align-items:center;padding:16px 18px;border-radius:var(--r5);border:1px solid var(--border);background:var(--card)}
.acr-sk-card+.acr-sk-card{margin-top:var(--s3)}
.acr-sk-card .acr-sk-thumb{width:104px;height:104px;border-radius:var(--r3)}
.acr-sk-lines{display:flex;flex-direction:column;gap:var(--s3);min-width:0}
.acr-sk-card .acr-sk-name{width:56%;height:15px}
.acr-sk-stats{height:52px;border-radius:var(--r3)}
.acr-sk-side{height:76px;border-radius:var(--r4)}

/* An empty state that sits INSIDE a section rather than replacing a screen. */
.acr-empty.is-inline{margin:0;padding:18px;text-align:left}

@media (max-width: 1200px) {
  .acr-exp-grid{grid-template-columns:minmax(0,1fr)}
  /* The projection column is the first thing to go: it is a derived claim,
     and the four measured figures beside it are not. It reflows UNDER the
     stats rather than disappearing. */
  .acr-card,.acr-sk-card{grid-template-columns:104px minmax(0,1fr)}
  .acr-card-side,.acr-sk-side{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--s4)}
  .acr-sk-side{height:44px}
  .acr-acc-row{grid-template-columns:minmax(0,1.4fr) 88px 78px minmax(0,1.6fr) 92px;gap:var(--s3)}
}
@media (max-width: 760px) {
  .acr-toolbar{gap:8px}
  .acr-card,.acr-sk-card{grid-template-columns:72px minmax(0,1fr);gap:var(--s3);padding:12px}
  .acr-card-thumb,.acr-card-thumb .acr-rowthumb,.acr-sk-card .acr-sk-thumb{width:72px;height:72px}
  /* Four metric cells at 72px each are unreadable; two rows of two are not. */
  .acr-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .acr-stat-val{font-size:17px}
  .acr-wall{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s3)}
  /* The account table stops being a table: five tracks at phone width give
     every one of them less than an em. */
  .acr-acc-row{grid-template-columns:minmax(0,1fr) auto;gap:6px 10px}
  .acr-acc-row.is-head{display:none}
  .acr-slots,.acr-acc-up{grid-column:1/-1}
  .acr-acc-up{text-align:left}
  .acr-drawer{width:100vw}
  .acr-drawer-hero{grid-template-columns:minmax(0,1fr)}
  .acr-drawer-thumb,.acr-drawer-thumb .acr-rowthumb{width:100%;height:auto;aspect-ratio:1}
  .acr-search{flex:1 1 100%}
  .acr-toolbar-right{width:100%}
  .acr-pop{width:min(92vw,360px)}
  .acr-fp-body{grid-template-columns:minmax(0,1fr)}
  .acr-fp-cand{border-right:0;border-bottom:1px solid var(--border)}
}

/* =====================================================================
   BOARD V2 — Overview tab (2026-09-29, design "Dashboard 1b")
   One page scroll with sticky column headers; client groups nested in each
   column; title-first cards where red means overdue and nothing else; a Done
   rail that expands into a searchable panel; a floating bulk bar.
   Every colour is a token, so the light theme follows automatically.
   ===================================================================== */

/* ---- Toolbar ---- */
.board-toolbar{position:sticky;top:var(--board-toolbar-top,53px);z-index:60;background:var(--shell);gap:12px;margin:0 -22px 12px;padding:8px 22px}
.board-seg{display:inline-flex;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:2px}
.board-seg-btn{background:transparent;border:none;color:var(--t3);font:600 12px/1 inherit;font-family:inherit;padding:5px 12px;border-radius:6px;cursor:pointer}
.board-seg-btn:hover{color:var(--t1)}
.board-seg-btn[aria-pressed="true"]{background:var(--track);color:var(--t1)}
.board-people{display:inline-flex;gap:5px;align-items:center}
.board-av{width:24px;height:24px;border-radius:50%;border:none;padding:0;color:#fff;font-size:9.5px;font-weight:700;font-family:inherit;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;transition:opacity .15s,box-shadow .15s}
.board-av.is-on{box-shadow:0 0 0 2px var(--shell),0 0 0 3.5px var(--accent)}
.board-av.is-dim{opacity:.4}
.board-av.is-dim:hover{opacity:.8}
.board-av img{width:100%;height:100%;object-fit:cover}
.board-divider{width:1px;height:20px;background:var(--border)}
.board-chips{display:inline-flex;gap:6px;flex-wrap:wrap;align-items:center}
.board-chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--t1);background:rgba(76,141,255,.12);border:1px solid rgba(76,141,255,.35);border-radius:999px;padding:3px 4px 3px 10px;white-space:nowrap}
.board-chip-x{background:none;border:none;color:var(--t2);cursor:pointer;font-size:14px;line-height:1;width:18px;height:18px;border-radius:50%;padding:0;font-family:inherit}
.board-chip-x:hover{background:rgba(76,141,255,.2);color:var(--t1)}
.board-filter-wrap,.board-new,.remy-dev-wrap{position:relative}
.board-add-filter{background:transparent;color:var(--t2);font-size:12px;font-family:inherit;border:1px dashed var(--border3);border-radius:999px;padding:4px 11px;white-space:nowrap;cursor:pointer}
.board-add-filter:hover,.board-add-filter[aria-expanded="true"]{color:var(--t1);border-color:var(--accent)}
.board-select-btn{background:transparent;color:var(--t2);font:600 12px inherit;font-family:inherit;border:1px solid var(--border);border-radius:7px;padding:5px 11px;cursor:pointer;white-space:nowrap}
.board-select-btn:hover{color:var(--t1);border-color:var(--border2)}
.board-select-btn[aria-pressed="true"]{background:var(--accent-dim);border-color:var(--accent);color:var(--t1)}
.board-sel{display:inline-flex;align-items:center;gap:6px}
.board-sel-label{font-size:11px;color:var(--t3);font-weight:600}
.board-sel-input{background:var(--card);border:1px solid var(--border);border-radius:7px;color:var(--t1);font:600 12px inherit;font-family:inherit;padding:5px 8px;cursor:pointer}
.board-sel-input:hover{border-color:var(--border2)}
.board-new{display:inline-flex;border-radius:7px;background:var(--gradient-accent)}
.board-new-main,.board-new-caret{background:transparent;border:none;color:#fff;font:600 12px inherit;font-family:inherit;cursor:pointer}
.board-new-main{padding:7px 14px;white-space:nowrap}
.board-new-caret{padding:0 9px;border-left:1px solid rgba(255,255,255,.25);display:inline-flex;align-items:center}
.board-new-main:hover,.board-new-caret:hover{background:rgba(255,255,255,.1)}
.board-pop{position:absolute;top:calc(100% + 6px);z-index:170;background:var(--card);border:1px solid var(--border2);border-radius:10px;box-shadow:0 18px 50px rgba(0,0,0,.5);padding:8px}
.board-pop[hidden]{display:none}
.board-new-menu{right:0;min-width:210px;display:flex;flex-direction:column}
.board-new-menu button{background:none;border:none;color:var(--t1);font-size:12.5px;font-family:inherit;text-align:left;padding:8px 10px;border-radius:7px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:10px}
.board-new-menu button:hover,.board-new-menu button:focus-visible{background:var(--chip);outline:none}
.board-new-menu kbd{font:600 10.5px inherit;font-family:inherit;color:var(--t3);background:var(--chip);border:1px solid var(--border2);border-radius:4px;padding:1px 5px}
.board-filter-pop{left:0;width:260px}
.board-menu-backdrop{position:fixed;inset:0;z-index:1;background:transparent}
.board-filter-wrap,.board-new,.remy-dev-wrap{z-index:2}
.board-menu-backdrop[hidden]{display:none}
.bf-section{padding:6px 4px;border-bottom:1px solid var(--border)}
.bf-section:last-of-type{border-bottom:none}
.bf-head{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--t3);margin:2px 4px 6px}
.bf-check-row{display:flex;align-items:center;gap:8px;width:100%;background:none;border:none;color:var(--t1);font-size:12.5px;font-family:inherit;padding:6px 6px;border-radius:6px;cursor:pointer;text-align:left}
.bf-check-row:hover{background:var(--chip)}
.bf-box{width:15px;height:15px;border-radius:4px;border:1.5px solid var(--border3);display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;flex-shrink:0}
.bf-box.is-on{background:var(--accent);border-color:var(--accent)}
.bf-row-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bf-row-count{font-size:11px;color:var(--t3)}
.bf-prios{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:0 4px 4px}
.bf-prio{background:var(--bg2);border:1px solid var(--border);color:var(--t2);font:600 12px inherit;font-family:inherit;border-radius:6px;padding:5px 0;cursor:pointer}
.bf-prio.is-on{background:rgba(76,141,255,.16);border-color:var(--accent);color:var(--t1)}
.bf-search{display:flex;align-items:center;gap:7px;height:30px;background:var(--bg2);border:1px solid var(--border2);border-radius:7px;padding:0 8px;margin:0 4px 6px;color:var(--t3)}
.bf-search input{flex:1;min-width:0;background:transparent;border:none;outline:none;color:var(--t1);font-size:12.5px;font-family:inherit}
.bf-search:focus-within{border-color:var(--accent)}
.bf-search-clear{background:none;border:none;color:var(--t3);cursor:pointer;font-size:14px;padding:0 2px}
.bf-search-clear[hidden]{display:none}
.bf-client-list{max-height:220px;overflow-y:auto}
.bf-empty{font-size:12px;color:var(--t3);padding:8px 6px}
.bf-foot{display:flex;justify-content:space-between;padding:8px 4px 2px}
.bf-clear,.bf-done{background:none;border:none;font-size:12.5px;font-family:inherit;cursor:pointer;padding:4px 6px;border-radius:6px}
.bf-clear{color:var(--t2)}
.bf-done{color:var(--accent-txt);font-weight:600}
.bf-clear:hover,.bf-done:hover{background:var(--chip)}

/* ---- Select-mode banner ---- */
.bulk-select-banner{display:none;align-items:center;gap:8px;padding:8px 14px;margin-bottom:12px;background:rgba(76,141,255,.08);border:1px solid rgba(76,141,255,.3);border-radius:8px;font-size:12px;color:var(--t2);animation:fadeIn .2s ease}
body.bulk-select-mode .bulk-select-banner{display:flex}
.bulk-select-banner strong{color:var(--t1);font-weight:600}
.bulk-select-banner .bsb-spacer{flex:1}
.bulk-select-banner .bsb-exit{background:none;border:none;color:var(--accent-txt);font:600 12px inherit;font-family:inherit;cursor:pointer;padding:2px 4px}
.btn.btn-active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ---- Grid: three columns + the Done track, one page scroll ---- */
.kanban-with-backburner{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:14px;align-items:start;height:auto;min-height:0;transition:grid-template-columns .25s ease}
.kanban-with-backburner.done-open{grid-template-columns:minmax(0,1fr) 280px}
.kanban{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start;margin-bottom:0;min-height:0}
.kanban-col{overflow:visible;min-height:120px;max-height:none;border-radius:10px}
.kanban-col.drag-over{outline:1.5px dashed var(--accent);outline-offset:4px;background:rgba(76,141,255,.04)}
.col-header{position:sticky;top:var(--board-sticky-top,110px);z-index:20;background:var(--shell);padding-top:6px;margin-bottom:10px;gap:8px;justify-content:flex-start}
.col-title{font-size:12px;letter-spacing:.06em;color:var(--t2)}
.col-count{background:var(--chip);border-radius:5px;padding:1px 7px}
.col-flag{font-size:10.5px;font-weight:600;color:var(--red-txt)}
.col-flag:empty{display:none}
.col-toggle-all{margin-left:auto;background:none;border:none;color:var(--t3);font-size:11px;font-family:inherit;cursor:pointer;padding:2px 4px;border-radius:4px}
.col-toggle-all:hover{color:var(--t1)}
.col-toggle-all[hidden]{display:none}
.col-cards{overflow:visible;flex:none;padding-right:0;display:flex;flex-direction:column;gap:6px}
.col-note{font-size:11.5px;color:var(--t3);margin:-4px 0 8px}
.col-note[hidden]{display:none}
.board-empty{border:1px dashed var(--border);border-radius:10px;padding:18px 12px;text-align:center;font-size:12px;color:var(--t3)}
.board-empty-clear{background:none;border:none;color:var(--accent-txt);font:600 12px inherit;font-family:inherit;cursor:pointer;padding:0 0 0 4px}


/* ---- Client groups ---- */
.client-group{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:4px 6px 6px}
.client-group.collapsed{padding:4px 6px}
.client-group-head{display:flex;align-items:center;gap:8px;width:100%;padding:6px;border-radius:7px;cursor:pointer;user-select:none}
.client-group-head:hover{background:var(--board-card-hover)}
.client-group-head:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.cg-chevron{display:inline-block;font-size:9px;color:var(--t3);transition:transform .15s;transform:rotate(90deg);flex-shrink:0}
.client-group.collapsed .cg-chevron{transform:none}
.cg-name{font-size:13px;font-weight:600;color:var(--t1);flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cg-overdue{font-size:10.5px;font-weight:600;color:var(--red-txt);flex-shrink:0}
.cg-count{font-size:11px;font-weight:600;color:var(--t2);background:var(--chip);border-radius:5px;padding:1px 7px;flex-shrink:0}
.cg-avatars{display:inline-flex;flex-shrink:0}
.cg-av{width:18px;height:18px;border-radius:50%;color:#fff;font-size:8px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--bg2);overflow:hidden}
.cg-av + .cg-av{margin-left:-4px}
.cg-av img{width:100%;height:100%;object-fit:cover}
.cg-check{display:none;width:16px;height:16px;border-radius:4px;border:1.5px solid var(--border3);align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;flex-shrink:0;cursor:pointer}
.cg-check-all,.cg-check-some{background:var(--accent);border-color:var(--accent)}
body.bulk-select-mode .cg-check{display:inline-flex}
body.bulk-select-mode .cg-avatars,body.bulk-select-mode .cg-overdue{display:none}
.client-group-body{display:flex;flex-direction:column;gap:6px;padding:0}
.client-group.collapsed .client-group-body{display:none}

/* ---- Task card ---- */
.task-card{background:var(--card);border:1px solid var(--border);border-left:3px solid var(--border);border-radius:8px;padding:9px 11px;margin:0;gap:6px;box-shadow:none;transition:background .15s,border-color .15s}
.task-card:hover{background:var(--board-card-hover);border-color:var(--border2);transform:none;box-shadow:none}
.task-card.edge-late{border-left-color:var(--red)}
.task-card.edge-soon{border-left-color:var(--orange)}
.task-card.dragging{opacity:.4;transform:none}
.tc-row{display:flex;align-items:flex-start;gap:9px}
.task-card .task-title{font-size:13px;font-weight:500;color:var(--t1);line-height:1.35;text-wrap:pretty;flex:1;min-width:0}
.task-card .task-checkoff{margin-top:1px}
.task-card .task-checkoff-circle{width:15px;height:15px;border:1.5px solid var(--border3)}
.task-card .task-checkoff:hover .task-checkoff-circle{border-color:var(--green);background:rgba(47,163,100,.2)}
.tc-select{display:none;width:15px;height:15px;border-radius:4px;border:1.5px solid var(--border3);flex-shrink:0;margin-top:1px;align-items:center;justify-content:center;color:#fff;font-size:10px;font-weight:700}
body.bulk-select-mode .task-card .task-checkoff{display:none}
body.bulk-select-mode .task-card .tc-select{display:inline-flex}
.task-card.selected .tc-select{background:var(--accent);border-color:var(--accent)}
.task-card.selected .tc-select::after{content:'✓'}
.task-card .task-desc{font-size:11.5px;color:var(--t3);margin:0 0 0 24px;-webkit-line-clamp:1;opacity:1}
.task-card .task-meta{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--t3);margin:0 0 0 24px;min-width:0}
.tc-prio{font-size:10px;font-weight:700;color:var(--t3);cursor:pointer;flex-shrink:0}
.tc-prio.tc-prio-hi{color:var(--t1)}
.task-card .task-client{min-width:0}
.tc-review{color:var(--t3);white-space:nowrap}
.tc-review.is-stuck{color:var(--gold-txt)}
.tc-csm{font-size:10px;font-weight:700;color:var(--gold-txt);border:1px solid var(--goldBd);border-radius:4px;padding:0 4px;flex-shrink:0}
.tc-changes{font-size:10px;font-weight:600;color:var(--orange-txt);background:rgba(224,149,74,.12);border-radius:4px;padding:1px 5px;white-space:nowrap}
.tc-approved{font-size:10px;font-weight:600;color:var(--green-txt);background:rgba(47,163,100,.12);border-radius:4px;padding:1px 5px;white-space:nowrap}
.task-card .task-due{font-size:11px;font-weight:500;color:var(--t3);white-space:nowrap;animation:none}
.task-card .task-due.tc-due-late{color:var(--red-txt);font-weight:600}
.task-card .task-due.tc-due-soon{color:var(--orange-txt);font-weight:600}
.task-card .task-due.task-due-empty{font-style:normal}
.task-card .task-assignee{width:19px;height:19px}
.tc-csm-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-left:24px;padding-top:6px;border-top:1px solid var(--border);white-space:nowrap}
.tc-csm-label{font-size:10px;font-weight:700;color:var(--gold-txt);letter-spacing:.04em;text-transform:uppercase}
.tc-approve,.tc-revise{border:none;border-radius:6px;padding:4px 10px;font:600 11px inherit;font-family:inherit;cursor:pointer}
.tc-approve{background:var(--green);color:#fff}
.tc-revise{background:var(--track);color:var(--t1)}
.tc-approve:hover,.tc-revise:hover{filter:brightness(1.1)}
body.bulk-select-mode .task-card{cursor:pointer}
body.bulk-select-mode .task-card:not(.selected):hover{outline:1px dashed var(--accent);outline-offset:-2px}
.task-card.selected{border-color:var(--accent);background:var(--board-card-sel);outline:none;box-shadow:none;padding-right:11px}
.task-card.selected.edge-late{border-left-color:var(--red)}
.task-card.selected.edge-soon{border-left-color:var(--orange)}
.recurring-task-card .rt-checkoff{margin-top:1px}

/* ---- Done rail / panel ---- */
.done-section{position:sticky;top:var(--board-sticky-top,110px);width:auto;min-width:0;height:calc(100vh - var(--board-sticky-top,110px) - 20px);background:var(--bg2);border:1px solid var(--border);border-radius:10px}
.done-section.expanded{width:auto;min-width:0}
.done-section.drag-over{border-color:var(--green);background:rgba(47,163,100,.12);box-shadow:none}
.done-rail-count{font-size:14px;color:var(--green-txt)}
.done-rail-label{font-size:10.5px}
.done-section.expanded{animation:doneSlideIn .2s ease}
@keyframes doneSlideIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.done-cards{display:flex;flex-direction:column;gap:4px}
.done-section.expanded .done-cards{padding:10px 10px}
.done-card{flex-direction:row;align-items:center;gap:8px;padding:7px 9px;border-left-width:1px}
.done-card-body{flex:1;min-width:0}
.done-card .done-card-title{font-size:12px;color:var(--t2);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.done-card-meta{font-size:10.5px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.done-card-meta .done-card-client{margin:0;font-size:inherit}
.done-reopen{background:none;border:1px solid var(--border2);color:var(--t2);font-size:11px;font-family:inherit;border-radius:6px;padding:2px 7px;cursor:pointer;flex-shrink:0;white-space:nowrap}
.done-reopen:hover{color:var(--t1);border-color:var(--border3)}
.done-drop-hint{display:none;margin:0 10px 10px;border:1px dashed var(--border2);border-radius:8px;padding:10px;text-align:center;font-size:11px;color:var(--t3)}
.done-section.expanded .done-drop-hint{display:block}
.board-empty-done{margin:4px 0}

/* ---- Floating bulk bar ---- */
.bulk-action-bar{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:900;display:flex;align-items:center;gap:6px;flex-wrap:wrap;max-width:calc(100vw - 32px);background:var(--chip);border:1px solid var(--border3);border-radius:12px;padding:8px 10px;margin:0;box-shadow:0 18px 50px rgba(0,0,0,.5);animation:fadeIn .2s ease}
.bulk-action-bar.is-hidden{display:none}
.bulk-action-bar .bab-count{font-size:12.5px;color:var(--t2);margin:0 6px 0 4px}
.bulk-action-bar .bab-count strong{color:var(--t1)}
.bab-btn{display:inline-flex;align-items:center;gap:6px;background:transparent;border:none;color:var(--t1);font:600 12px inherit;font-family:inherit;border-radius:7px;padding:6px 9px;cursor:pointer;white-space:nowrap}
.bab-btn:hover{background:var(--track)}
.bab-btn.bab-done{background:var(--green);color:#fff}
.bab-btn.bab-done:hover{filter:brightness(1.1);background:var(--green)}
.bab-btn.bab-delete{color:var(--red-txt)}
.bab-btn.bab-clear{color:var(--t2)}
.bab-dot{width:7px;height:7px;border-radius:50%}
.bab-dot-todo{background:var(--blue)}
.bab-dot-inprogress{background:var(--orange)}
.bab-dot-review{background:var(--purple)}
.bab-sep{width:1px;height:18px;background:var(--border2);margin:0 2px}
.bab-label{font-size:11.5px;color:var(--t3)}
.bab-assign{display:inline-flex;gap:3px}
.bab-av{width:22px;height:22px;border-radius:50%;border:none;color:#fff;font-size:9px;font-weight:700;font-family:inherit;cursor:pointer;padding:0;overflow:hidden;display:inline-flex;align-items:center;justify-content:center}
.bab-av:hover{box-shadow:0 0 0 2px var(--chip),0 0 0 3.5px var(--accent)}
.bab-av img{width:100%;height:100%;object-fit:cover}

/* ---- Undo toast: bottom-centred, lifted clear of the bulk bar ---- */
.undo-toast{background:var(--track);border:1px solid var(--border3);border-radius:10px;box-shadow:0 18px 50px rgba(0,0,0,.5);animation:undoRise .2s ease}
@keyframes undoRise{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
body.bulk-bar-visible .undo-toast{bottom:84px}
.undo-toast .undo-btn{background:none;color:var(--accent-txt);padding:4px 6px}

/* ---- Task detail modal (kept; handoff fixes) ---- */
#taskModalContent .linear-title{width:auto;flex:1;min-width:0}
.td2-rail,.td2-scroll,.cdd-menu{overflow-x:hidden}
.td2-dot--csm{background:var(--gold)}

/* ---- Task modal entry ---- */
#taskModal.active .modal{animation:tdModalIn .18s ease}
@keyframes tdModalIn{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .done-section.expanded,.undo-toast,#taskModal.active .modal{animation:none}
}

/* ---- Light theme: undo the older light-only board rules ---- */
[data-theme="light"] .kanban-col{background:transparent;padding:0;box-shadow:none}
[data-theme="light"] #cards-done .task-card{filter:none;opacity:1}
[data-theme="light"] .board-av.is-on{box-shadow:0 0 0 2px var(--shell),0 0 0 3.5px var(--accent)}
/* Global form styles draw a box around every input; these two sit inside
   their own bordered row. */
#boardClientSearch,#doneSearchInput{border:none;background:transparent;box-shadow:none;padding:0;height:auto;min-height:0;border-radius:0}

/* ---- Narrower screens ---- */
@media (max-width:1200px){
  .kanban-with-backburner{grid-template-columns:minmax(0,1fr) 44px}
  .kanban-with-backburner.done-open{grid-template-columns:minmax(0,1fr) 240px}
  .kanban{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kanban-col{max-height:none}
}
@media (max-width:768px){
  .board-toolbar{position:static;margin:0 0 12px;padding:0}
  .col-header{position:static}
  .kanban-with-backburner,.kanban-with-backburner.done-open{grid-template-columns:minmax(0,1fr)}
  .kanban{grid-template-columns:minmax(0,1fr)}
  .done-section{position:static;height:auto;min-height:44px}
  .done-section:not(.expanded) .done-rail{flex-direction:row;justify-content:center;padding:10px}
  .done-section:not(.expanded) .done-rail-label{writing-mode:horizontal-tb;transform:none}
  .done-section:not(.expanded) .done-rail-chevron{margin:0}
  .board-toolbar-spacer{flex-basis:100%;height:0}
}

/* GHL mapping / sync-preview modal (#ghlMapContent) — migrated from inline styles */
.ghl-map-shell{padding:18px 20px;max-height:84vh;display:flex;flex-direction:column}
.ghl-map-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.ghl-map-title{margin:0;font-size:16px}
.ghl-map-note{font-size:12px;color:var(--text3);margin-bottom:12px}
.ghl-map-body{overflow:auto;flex:1;min-height:0}
.ghl-map-row{display:flex;align-items:center;gap:12px;padding:7px 0;border-bottom:1px solid var(--border2)}
.ghl-map-row--sm{padding:6px 0;font-size:13px}
.ghl-map-name{flex:1;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ghl-map-name--plain{font-size:inherit}
.ghl-map-select{flex:1;max-width:340px}
.ghl-map-num{text-align:right}
.ghl-map-num--wk{width:70px}
.ghl-map-num--mo{width:80px}
.ghl-map-num--leads{width:90px}
.ghl-map-dim{opacity:.5}
.ghl-map-rowerr{flex:1;color:var(--danger);font-size:11px}
.ghl-map-errs{margin-top:10px;font-size:12px;color:var(--danger)}
.ghl-map-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}
.ghl-map-foot--solo{gap:0}
.ghl-map-save{font-weight:600}