/* ============================================================================
   sales-cards.css  —  THE floating-card layer
   ----------------------------------------------------------------------------
   Loads LAST (after editorial-final.css). This is the single piece that makes
   the dashboard read like the OPT sales-dashboard onboarding look rather than
   the older flat editorial chrome.

   The difference is NOT the palette (already unified via tokens.css) and NOT
   the small controls (sales keeps inputs/chips/buttons sharp at 2-4px — same as
   editorial). The difference is the CARD CONTAINERS:

       editorial  →  flat 2px corners, cream (--paper), hairline border, no shadow
       sales      →  16px corners, WHITE (--surface-1), soft floating shadow

   So here we promote the genuine card / panel / section / kpi / hero / chart /
   modal containers to white floating cards. Everything else (inputs, table
   rows, sidebar, topbar, dropdowns, list items, badges) is left alone.

   Reference: sales-dashboard/src/index.css  ".panel" (line ~380)
       background:#fff; border:1px solid var(--rule); border-radius:16px;
       box-shadow: 0 1px 3px rgba(20,22,30,.04), 0 18px 40px -28px rgba(20,22,30,.20);
   ========================================================================== */

html:root[data-design-mode="editorial"] {
  /* canonical card radius + float — single source so a blanket tweak ripples */
  --card-radius: 16px;
  --card-radius-sm: 12px;
  --card-float: 0 1px 3px rgba(20,22,30,.04), 0 18px 40px -28px rgba(20,22,30,.20);
  --card-float-sm: 0 1px 2px rgba(20,22,30,.04), 0 10px 26px -18px rgba(20,22,30,.18);
}

/* ---- canvas: warm off-white, lets white cards float ---------------------- */
html:root[data-design-mode="editorial"] body {
  background: var(--paper, #fbfbf9) !important;
}

/* ===========================================================================
   1. THE FLOATING CARD  —  white, rounded, soft shadow
   =========================================================================== */
html:root[data-design-mode="editorial"] body .card,
html:root[data-design-mode="editorial"] body .panel,
html:root[data-design-mode="editorial"] body .opt-card,
html:root[data-design-mode="editorial"] body .cm-card,
html:root[data-design-mode="editorial"] body .section-card,
html:root[data-design-mode="editorial"] body .content-card,
html:root[data-design-mode="editorial"] body .cb-hero-tile,
html:root[data-design-mode="editorial"] body .client-hero-card,
html:root[data-design-mode="editorial"] body .chart-wrapper,
html:root[data-design-mode="editorial"] body .bot-panel-list,
html:root[data-design-mode="editorial"] body .dash-v2 .dv2-sec,
html:root[data-design-mode="editorial"] body .dash-v2 .dv2-panel,
html:root[data-design-mode="editorial"] body .results-page .hero-block,
html:root[data-design-mode="editorial"] [class*="kpi-grid-"] > * {
  background: var(--surface-1, #ffffff) !important;
  border: 1px solid var(--rule, #e9e6da) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-float) !important;
}

/* card sub-regions: transparent so the parent's white + radius reads cleanly */
html:root[data-design-mode="editorial"] body .card > .card-header,
html:root[data-design-mode="editorial"] body .card > .card-body,
html:root[data-design-mode="editorial"] body .card > .card-footer {
  background: transparent !important;
  box-shadow: none !important;
}
html:root[data-design-mode="editorial"] body .card > .card-header { border-radius: var(--card-radius) var(--card-radius) 0 0 !important; }
html:root[data-design-mode="editorial"] body .card > .card-footer { border-radius: 0 0 var(--card-radius) var(--card-radius) !important; }

/* ===========================================================================
   2. KPI / STAT TILES  —  smaller radius floating cards
   =========================================================================== */
html:root[data-design-mode="editorial"] body .dash-v2 .dv2-kpi,
html:root[data-design-mode="editorial"] body .dash-v2 .dv2-kpi--primary,
html:root[data-design-mode="editorial"] body .dash-v2 .stat-item,
html:root[data-design-mode="editorial"] body .dash-v2 .stat-item.clickable,
html:root[data-design-mode="editorial"] body .stat-card,
html:root[data-design-mode="editorial"] body .metric-card {
  background: var(--surface-1, #ffffff) !important;
  border: 1px solid var(--rule, #e9e6da) !important;
  border-radius: var(--card-radius-sm) !important;
  box-shadow: var(--card-float-sm) !important;
}
/* primary KPI keeps its accent fill but gains the float + radius */
html:root[data-design-mode="editorial"] body .dash-v2 .dv2-kpi--primary {
  background: var(--accent, #f4e14a) !important;
  border-color: var(--accent, #f4e14a) !important;
}
/* lift on hover — the small motion that makes tiles feel onboarding-grade */
html:root[data-design-mode="editorial"] body .dash-v2 .stat-item.clickable {
  transition: transform .14s ease, box-shadow .14s ease !important;
}
html:root[data-design-mode="editorial"] body .dash-v2 .stat-item.clickable:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 2px 4px rgba(20,22,30,.05), 0 22px 44px -26px rgba(20,22,30,.26) !important;
}

/* ===========================================================================
   3. MODALS  —  rounded white sheets with a real lift
   =========================================================================== */
html:root[data-design-mode="editorial"] body .modal-content,
html:root[data-design-mode="editorial"] body .nx-modal,
html:root[data-design-mode="editorial"] body .cmov-modal,
html:root[data-design-mode="editorial"] body .cm-edit-modal,
html:root[data-design-mode="editorial"] body .share-modal-overlay .share-modal-content {
  background: var(--surface-1, #ffffff) !important;
  border: 1px solid var(--rule, #e9e6da) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: 0 24px 70px -24px rgba(20,22,30,.40), 0 4px 14px rgba(20,22,30,.08) !important;
  overflow: auto !important;
}
html:root[data-design-mode="editorial"] body .modal-content .modal-header,
html:root[data-design-mode="editorial"] body .modal-content .modal-body,
html:root[data-design-mode="editorial"] body .modal-content .modal-footer {
  background: transparent !important;
}

/* ===========================================================================
   4. UNDO the blanket flat-2px ENFORCEMENT on results-page cards
   The overlay forces `*:not(...) { border-radius:2px }` across .results-page.
   Re-round only the card-level descendants; inner controls stay sharp.
   =========================================================================== */
html:root[data-design-mode="editorial"] body .results-page .hero-block,
html:root[data-design-mode="editorial"] body .results-page .client-hero-card,
html:root[data-design-mode="editorial"] body .results-page .chart-wrapper,
html:root[data-design-mode="editorial"] body .results-page [class*="kpi-grid-"] > *,
html:root[data-design-mode="editorial"] body .results-page .card,
html:root[data-design-mode="editorial"] body .results-page .panel {
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-float) !important;
  background: var(--surface-1, #ffffff) !important;
}

/* ===========================================================================
   4b. POPUP / MODAL / DRAWER / POPOVER NORMALIZATION
   ----------------------------------------------------------------------------
   The app has ~30 bespoke popup systems (am-drill, cm-modal, cmov-modal,
   br-modal, gmb-modal, payments-modal, drawers, bottom-sheets, popovers …),
   most rendered as flat 2px CREAM boxes. This is what reads as "every popup
   looks poor". Promote every DIALOG BOX to a white, 16px-rounded, strongly
   floated card. Backdrops/overlays are left untouched (whitening a full-bleed
   overlay would white out the screen — e.g. .acw-modal / .payments-modal are
   inset:0 overlays, deliberately EXCLUDED here; their boxes are .acw-dialog).
   =========================================================================== */
html:root[data-design-mode="editorial"] body .am-drill-panel,
html:root[data-design-mode="editorial"] body .acw-dialog,
html:root[data-design-mode="editorial"] body .add-client-modal,
html:root[data-design-mode="editorial"] body .br-modal,
html:root[data-design-mode="editorial"] body .br-troubleshoot-modal,
html:root[data-design-mode="editorial"] body .cm-edit-modal,
html:root[data-design-mode="editorial"] body .cm-modal-dialog,
html:root[data-design-mode="editorial"] body .cm-rpt-dialog,
html:root[data-design-mode="editorial"] body .cm-ws-modal,
html:root[data-design-mode="editorial"] body .cmov-modal,
html:root[data-design-mode="editorial"] body .cmov-picker-modal,
html:root[data-design-mode="editorial"] body .cmov-ws-modal,
html:root[data-design-mode="editorial"] body .confirm-modal,
html:root[data-design-mode="editorial"] body .gmb-modal,
html:root[data-design-mode="editorial"] body .int-modal,
html:root[data-design-mode="editorial"] body .dm-modal,
html:root[data-design-mode="editorial"] body .payments-modal-body {
  background: var(--surface-1, #ffffff) !important;
  border: 1px solid var(--rule, #e9e6da) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: 0 24px 70px -24px rgba(20,22,30,.40), 0 4px 14px rgba(20,22,30,.08) !important;
  overflow: hidden !important;
}

/* bottom sheets — round the TOP corners only (they sit flush to viewport edge) */
html:root[data-design-mode="editorial"] body .m-sheet,
html:root[data-design-mode="editorial"] body .sheet {
  background: var(--surface-1, #ffffff) !important;
  border-radius: 20px 20px 0 0 !important;
}

/* side drawers — white sheet with a soft edge-lift; don't clip internal scroll */
html:root[data-design-mode="editorial"] body .drawer,
html:root[data-design-mode="editorial"] body .m-drawer,
html:root[data-design-mode="editorial"] body .br-drawer,
html:root[data-design-mode="editorial"] body .sl-drawer-inner {
  background: var(--surface-1, #ffffff) !important;
  box-shadow: -24px 0 70px -30px rgba(20,22,30,.40) !important;
}

/* popovers — smaller floating cards */
html:root[data-design-mode="editorial"] body .popover,
html:root[data-design-mode="editorial"] body .cmov-popover,
html:root[data-design-mode="editorial"] body .fc-popover,
html:root[data-design-mode="editorial"] body .score-popover,
html:root[data-design-mode="editorial"] body .inbox-view-popover,
html:root[data-design-mode="editorial"] body .payments-link-popover {
  background: var(--surface-1, #ffffff) !important;
  border: 1px solid var(--rule, #e9e6da) !important;
  border-radius: var(--card-radius-sm) !important;
  box-shadow: 0 12px 40px -16px rgba(20,22,30,.34) !important;
}

/* close buttons inside popups → soft square, not sharp 2px */
html:root[data-design-mode="editorial"] body .am-drill-close,
html:root[data-design-mode="editorial"] body .br-modal-close,
html:root[data-design-mode="editorial"] body .cmov-popover-close,
html:root[data-design-mode="editorial"] body .share-modal-close,
html:root[data-design-mode="editorial"] body .payments-modal-close {
  border-radius: 8px !important;
}

/* ===========================================================================
   5. PILL on the things that are genuinely pills in the sales look
   (progress strips, status chips, filter pills) — keep buttons/inputs sharp.
   =========================================================================== */
html:root[data-design-mode="editorial"] body .heatbar,
html:root[data-design-mode="editorial"] body .heatbar > span,
html:root[data-design-mode="editorial"] body .progress,
html:root[data-design-mode="editorial"] body .progress-bar {
  border-radius: 999px !important;
}

/* ===========================================================================
   6. TABLE DE-DOUBLING  —  .status-table (All Clients + status lists)
   ----------------------------------------------------------------------------
   The table drew TWO hairlines per row (a border-bottom on BOTH the <tr> and
   the <td>, each with a different rule colour so they didn't collapse), a
   header that had a border PLUS an inset box-shadow (second line), and a hover
   glow box-shadow. Collapse to a SINGLE hairline on the cell, drop the header
   shadow, drop the hover glow. One clean rule per row.
   =========================================================================== */
html:root[data-design-mode="editorial"] body .status-table tbody tr {
  border-bottom: 0 !important;
  box-shadow: none !important;
}
html:root[data-design-mode="editorial"] body .status-table tbody td {
  border-bottom: 1px solid var(--rule, #e9e6da) !important;
  box-shadow: none !important;
}
html:root[data-design-mode="editorial"] body .status-table tbody tr:last-child td {
  border-bottom: 0 !important;
}
html:root[data-design-mode="editorial"] body .status-table thead th {
  border-bottom: 1px solid var(--rule, #e9e6da) !important;
  box-shadow: none !important;
}
html:root[data-design-mode="editorial"] body .status-table tbody tr:hover {
  outline: none !important;
  box-shadow: none !important;
}

/* ===========================================================================
   7. CLIENTS PAGE  —  one rounded card frame, no nested boxes
   ----------------------------------------------------------------------------
   .am-clients-section is the card; the filter bar and the table wrapper are
   inside it and must NOT carry their own frame/radius (that produced the
   "squared 2px box nested inside a rounded card" + double borders).
   =========================================================================== */
html:root[data-design-mode="editorial"] body .am-clients-section {
  background: var(--surface-1, #ffffff) !important;
  border: 1px solid var(--rule, #e9e6da) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-float) !important;
  overflow: hidden !important;
}
html:root[data-design-mode="editorial"] body .clients-filter-bar {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--rule, #e9e6da) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html:root[data-design-mode="editorial"] body .am-clients-section .status-table-wrapper {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ===========================================================================
   8. READABILITY  —  kill stranded dark-theme white-on-white text
   ----------------------------------------------------------------------------
   sales-cards forces several panels WHITE, but old dark-theme rules still set
   their text to white/near-white (rgba(255,255,255,…)) → invisible. Restore
   ink text on those surfaces. Targeted, so accent/semantic colours survive.
   =========================================================================== */
html:root[data-design-mode="editorial"] {
  --bs-body-color: var(--ink, #15161a) !important;
}
html:root[data-design-mode="editorial"] body .nx-modal,
html:root[data-design-mode="editorial"] body .nx-modal .nx-modal-title,
html:root[data-design-mode="editorial"] body .nx-modal-label,
html:root[data-design-mode="editorial"] body .modal-body,
html:root[data-design-mode="editorial"] body .modal-body h5,
html:root[data-design-mode="editorial"] body .modal-body h6,
html:root[data-design-mode="editorial"] body .modal-body p,
html:root[data-design-mode="editorial"] body .modal-body table,
html:root[data-design-mode="editorial"] body .modal-body table tbody td {
  color: var(--ink, #15161a) !important;
}
html:root[data-design-mode="editorial"] body .modal-body table thead th {
  color: var(--ink-3, #6b6d75) !important;
}
html:root[data-design-mode="editorial"] body .modal-body .form-control,
html:root[data-design-mode="editorial"] body .modal-body .form-control::placeholder {
  color: var(--ink-2, #3b3d44) !important;
}

/* ===========================================================================
   9. POPUPS NOT REACHED BY THE JS OBSERVER  —  CSS-only float promotion
   (.imt-* = Client Brain Images tab cards; .topbar-search-results = search
   dropdown; .cc-panel = command-centre inline panel). Were cream/flat/shadowless.
   =========================================================================== */
html:root[data-design-mode="editorial"] body .imt-panel,
html:root[data-design-mode="editorial"] body .imt-card,
html:root[data-design-mode="editorial"] body .topbar-search-results,
html:root[data-design-mode="editorial"] body .cc-panel {
  background: var(--surface-1, #ffffff) !important;
  border: 1px solid var(--rule, #e9e6da) !important;
  border-radius: var(--card-radius-sm) !important;
  box-shadow: var(--card-float-sm) !important;
}

/* ===========================================================================
   10. SIDEBAR REDESIGN  —  white rail, inset rounded-pill nav, refined labels
   ----------------------------------------------------------------------------
   Was: cream rail, full-bleed link backgrounds, heavy mono section labels with
   bottom borders, a thin accent ticker on active. New: a clean white rail on
   the cream canvas, nav items as INSET rounded pills (margin so hover/active
   read as floating pills), Inter-Tight uppercase section labels (matches sales,
   no divider line), and a solid accent-soft active pill with an accent icon.
   =========================================================================== */
html:root[data-design-mode="editorial"] body .sidebar {
  background: var(--surface-1, #ffffff) !important;
  border-right: 1px solid var(--rule, #e9e6da) !important;
  color: var(--ink, #15161a) !important;
}
html:root[data-design-mode="editorial"] body .sidebar-header {
  background: transparent !important;
  border-bottom: 1px solid var(--rule, #e9e6da) !important;
  padding: 18px 18px 14px !important;
}
html:root[data-design-mode="editorial"] body .sidebar-footer {
  background: transparent !important;
  border-top: 1px solid var(--rule, #e9e6da) !important;
}

/* nav links → inset rounded pills */
html:root[data-design-mode="editorial"] body .sidebar .sidebar-link,
html:root[data-design-mode="editorial"] body .sidebar a.sidebar-link {
  margin: 1px 10px !important;
  padding: 9px 12px !important;
  border-radius: 10px !important;
  gap: 11px !important;
  color: var(--ink-2, #3b3d44) !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  transition: background .14s ease, color .14s ease !important;
}
html:root[data-design-mode="editorial"] body .sidebar .sidebar-link:hover {
  background: var(--paper-2, #f3f1ec) !important;
  color: var(--ink, #15161a) !important;
}
/* active → solid accent-soft pill (drop the old left ticker bar) */
html:root[data-design-mode="editorial"] body .sidebar .sidebar-link.active,
html:root[data-design-mode="editorial"] body .sidebar .sidebar-item.active .sidebar-link {
  background: var(--accent-soft, #fef9cc) !important;
  color: var(--ink, #15161a) !important;
  font-weight: 600 !important;
  box-shadow: inset 0 0 0 1px rgba(244,225,74,.55) !important;
}
html:root[data-design-mode="editorial"] body .sidebar .sidebar-link.active::before,
html:root[data-design-mode="editorial"] body .sidebar .sidebar-item.active .sidebar-link::before {
  display: none !important;
}
html:root[data-design-mode="editorial"] body .sidebar .sidebar-link.active i,
html:root[data-design-mode="editorial"] body .sidebar .sidebar-link.active .bi {
  color: var(--accent-dk, #b8a200) !important;
}

/* section labels → Inter Tight uppercase eyebrow, no divider line */
html:root[data-design-mode="editorial"] body .sidebar .sidebar-section-label {
  color: var(--ink-4, #8a8d96) !important;
  font-family: var(--font-body) !important;
  font-size: 0.66rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 16px 22px 6px !important;
  border-bottom: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
html:root[data-design-mode="editorial"] body .sidebar .sidebar-section-toggle:hover {
  background: transparent !important;
  color: var(--ink-2, #3b3d44) !important;
}
html:root[data-design-mode="editorial"] body .sidebar .sidebar-section-label:hover {
  background: transparent !important;
}

/* ===========================================================================
   11. COMPREHENSIVE CONTAINER PROMOTION  —  the "square edges everywhere" fix
   ----------------------------------------------------------------------------
   A page-by-page audit found ~60 bespoke container classes (cmov, am-hero,
   lc/ld, pc, gbp, wr/lo, adm, payments, br, ce, etc.) that
   were never in the allow-list, so they stayed cream/flat/square/no-shadow.
   Promote them ALL to the white floating-card look in one pass. (Dark-by-design
   panels — heatgrid .hg-*, .br-plan-panel — are EXCLUDED; they need text re-ink
   and are a separate dark→light job.)
   =========================================================================== */
/* -- 11a. Panels / sections / table-wrappers → white card, 16px, soft float -- */
html:root[data-design-mode="editorial"] body .cmov-rail-section,
html:root[data-design-mode="editorial"] body .cmov-header-strip,
html:root[data-design-mode="editorial"] body .cmov-grid,
html:root[data-design-mode="editorial"] body .cmov-services,
html:root[data-design-mode="editorial"] body .cmov-notes-card,
html:root[data-design-mode="editorial"] body .bulk-action-bar,
html:root[data-design-mode="editorial"] body .am-filters-panel,
html:root[data-design-mode="editorial"] body .pc-toolbar,
html:root[data-design-mode="editorial"] body .dv2-detailed-card,
html:root[data-design-mode="editorial"] body .acc-stats-strip,
html:root[data-design-mode="editorial"] body .ah-automatch,
html:root[data-design-mode="editorial"] body .lc-pipe-stage,
html:root[data-design-mode="editorial"] body .ld-stage-section,
html:root[data-design-mode="editorial"] body .wr-breakdown-bar,
html:root[data-design-mode="editorial"] body .wr-empty-state,
html:root[data-design-mode="editorial"] body .cal-card-wrapper,
html:root[data-design-mode="editorial"] body .team-view-card,
html:root[data-design-mode="editorial"] body .wb-kb-column,
html:root[data-design-mode="editorial"] body .wb-kb-card,
html:root[data-design-mode="editorial"] body .lo-insight-card,
html:root[data-design-mode="editorial"] body .lo-table-section,
html:root[data-design-mode="editorial"] body .gbp-group,
html:root[data-design-mode="editorial"] body .gbp-state,
html:root[data-design-mode="editorial"] body .gbp-detail-hero,
html:root[data-design-mode="editorial"] body .gbp-detail-card,
html:root[data-design-mode="editorial"] body .gbp-posts-list,
html:root[data-design-mode="editorial"] body .gbp-compose-card,
html:root[data-design-mode="editorial"] body .gbp-tab-empty,
html:root[data-design-mode="editorial"] body .pcf-card,
html:root[data-design-mode="editorial"] body .manager-card,
html:root[data-design-mode="editorial"] body .adm-section,
html:root[data-design-mode="editorial"] body .adm-table-wrap,
html:root[data-design-mode="editorial"] body .adm-kpi-grid,
html:root[data-design-mode="editorial"] body .admin-card,
html:root[data-design-mode="editorial"] body .integration-card,
html:root[data-design-mode="editorial"] body .sync-card,
html:root[data-design-mode="editorial"] body .wh-card,
html:root[data-design-mode="editorial"] body .wh-form,
html:root[data-design-mode="editorial"] body .myint-card,
html:root[data-design-mode="editorial"] details.adm-int-drawer,
html:root[data-design-mode="editorial"] body .payments-hero-card,
html:root[data-design-mode="editorial"] body .payments-table-wrap,
html:root[data-design-mode="editorial"] body .payments-upcoming-group,
html:root[data-design-mode="editorial"] body .payments-flag-card,
html:root[data-design-mode="editorial"] body .br-column,
html:root[data-design-mode="editorial"] body .br-activity-log,
html:root[data-design-mode="editorial"] body .br-usage-panel,
html:root[data-design-mode="editorial"] body .br-action-card,
html:root[data-design-mode="editorial"] body .br-task,
html:root[data-design-mode="editorial"] body .br-activity-item,
html:root[data-design-mode="editorial"] body .fd-hub-card,
html:root[data-design-mode="editorial"] body .fd-recent,
html:root[data-design-mode="editorial"] body .ce-b-card,
html:root[data-design-mode="editorial"] body .ce-b-panel,
html:root[data-design-mode="editorial"] body .ce-c-card,
html:root[data-design-mode="editorial"] body .ce-c-col,
html:root[data-design-mode="editorial"] body .ce-research,
html:root[data-design-mode="editorial"] body .ce-schedule-card,
html:root[data-design-mode="editorial"] body .ce-pipeline-viz {
  background: var(--surface-1, #ffffff) !important;
  border: 1px solid var(--rule, #e9e6da) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-float) !important;
}

/* -- 11b. Stat / KPI / hero tiles → white card, 12px, lighter float -- */
html:root[data-design-mode="editorial"] body .am-hero-card,
html:root[data-design-mode="editorial"] body .cmov-kpi-card,
html:root[data-design-mode="editorial"] body .nx-stat-card,
html:root[data-design-mode="editorial"] body .pc-stat-card,
html:root[data-design-mode="editorial"] body .wr-stat-card,
html:root[data-design-mode="editorial"] body .lo-kpi-card,
html:root[data-design-mode="editorial"] body .lc-stat-card,
html:root[data-design-mode="editorial"] body .gbp-kpi,
html:root[data-design-mode="editorial"] body .ce-b-kpi,
html:root[data-design-mode="editorial"] body .br-stat-card {
  background: var(--surface-1, #ffffff) !important;
  border: 1px solid var(--rule, #e9e6da) !important;
  border-radius: var(--card-radius-sm) !important;
  box-shadow: var(--card-float-sm) !important;
}

/* -- 11c. the ONE primary hero per page keeps the accent fill -- */
html:root[data-design-mode="editorial"] body .am-hero-card.primary,
html:root[data-design-mode="editorial"] body .am-hero-card.revenue-card-mrr,
html:root[data-design-mode="editorial"] body .pc-stat-card.primary {
  background: var(--accent, #f4e14a) !important;
  border-color: var(--accent, #f4e14a) !important;
}
/* primary-hero icon chip: kill legacy gold #f4e14a, use ink on the yellow card */
html:root[data-design-mode="editorial"] body .am-hero-card.primary .am-hero-icon {
  background: rgba(21,22,26,.10) !important;
  color: var(--ink, #15161a) !important;
}

/* -- 11d. cmov grid cells: transparent so the white grid card reads cleanly -- */
html:root[data-design-mode="editorial"] body .cmov-grid .cmov-cell {
  background: transparent !important;
}

/* ===========================================================================
   12. TABLE DE-DOUBLING extended to .cc-table / .opt-table (Action Items etc.)
   =========================================================================== */
html:root[data-design-mode="editorial"] body .cc-table tbody tr,
html:root[data-design-mode="editorial"] body .opt-table tbody tr {
  border-bottom: 0 !important;
  box-shadow: none !important;
}
html:root[data-design-mode="editorial"] body .cc-table tbody td,
html:root[data-design-mode="editorial"] body .opt-table tbody td {
  border-bottom: 1px solid var(--rule, #e9e6da) !important;
}
html:root[data-design-mode="editorial"] body .cc-table tbody tr:last-child td,
html:root[data-design-mode="editorial"] body .opt-table tbody tr:last-child td {
  border-bottom: 0 !important;
}
html:root[data-design-mode="editorial"] body .cc-table tbody tr:hover,
html:root[data-design-mode="editorial"] body .opt-table tbody tr:hover {
  outline: none !important;
  box-shadow: none !important;
}

/* -- 12b. genuine contrast failure: yellow stage text on near-white -- */
html:root[data-design-mode="editorial"] body .lc-stage-ascended {
  color: var(--accent-ink, #1a1700) !important;
  background: var(--accent-soft, #fef9cc) !important;
}

/* ===========================================================================
   13. EYEBROW TITLE UNIFICATION  —  one style for every card/panel/chart label
   ----------------------------------------------------------------------------
   Panel/chart titles were <h3>/<h4> → forced to serif by the editorial heading
   rule, while KPI labels are <div> → sans. Side by side ("CLIENT PIPELINE TREND"
   serif vs "GROWTH RATE" sans) they read as two different systems. Unify EVERY
   small card/panel/chart eyebrow to the SAME treatment: Inter-Tight, 10px,
   weight 600, 0.14em uppercase, ink-3. (Large display headings — page titles,
   "Key Metrics" — keep the Bethany serif; this only touches the small labels.)
   =========================================================================== */
html:root[data-design-mode="editorial"] body .dv2-panel__title,
html:root[data-design-mode="editorial"] body .dv2-sec__title,
html:root[data-design-mode="editorial"] body .dv2-kpi__label,
html:root[data-design-mode="editorial"] body .dash-v2 .dv2-panel__head h3,
html:root[data-design-mode="editorial"] body .cmov-rail-head,
html:root[data-design-mode="editorial"] body .cmov-services-title,
html:root[data-design-mode="editorial"] body .cmov-notes-title,
html:root[data-design-mode="editorial"] body .cmov-section-title,
html:root[data-design-mode="editorial"] body .cmov-modal-section-title,
html:root[data-design-mode="editorial"] body .cc-section-title,
html:root[data-design-mode="editorial"] body .cc-panel__title,
html:root[data-design-mode="editorial"] body .panel-eyebrow,
html:root[data-design-mode="editorial"] body .chart-title,
html:root[data-design-mode="editorial"] body .card-eyebrow {
  font-family: var(--font-body) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--ink-3, #6b6d75) !important;
  font-style: normal !important;
}

/* ===========================================================================
   14. DATE-RANGE PICKER + SIDEBAR FOOTER  —  match the brand 1:1
   ----------------------------------------------------------------------------
   The picker used its own --drp-* tokens (cream bg + a persistent yellow border)
   so it never matched the adjacent filter selects. The sidebar footer (collapse
   button + user row) was a heavy bordered box. Bring both onto the brand.
   =========================================================================== */
/* -- date-range picker trigger → white pill like the filter selects -- */
html:root[data-design-mode="editorial"] body .drp-trigger {
  background: var(--surface-1, #ffffff) !important;
  border: 1px solid var(--rule, #e9e6da) !important;
  border-radius: 10px !important;
  color: var(--ink, #15161a) !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
html:root[data-design-mode="editorial"] body .drp-trigger:hover {
  border-color: var(--ink-4, #8a8d96) !important;
  background: var(--paper-2, #f3f1ec) !important;
}
html:root[data-design-mode="editorial"] body .drp-trigger:focus,
html:root[data-design-mode="editorial"] body .drp-open .drp-trigger {
  outline: none !important;
  border-color: var(--accent-dk, #b8a200) !important;
  box-shadow: 0 0 0 3px rgba(244,225,74,.22) !important;
}
html:root[data-design-mode="editorial"] body .drp-trigger .bi-calendar3,
html:root[data-design-mode="editorial"] body .drp-chevron { color: var(--ink-3, #6b6d75) !important; }
/* dropdown calendar panel → white floating card */
html:root[data-design-mode="editorial"] body .drp-dropdown {
  background: var(--surface-1, #ffffff) !important;
  border: 1px solid var(--rule, #e9e6da) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 70px -24px rgba(20,22,30,.40), 0 4px 14px rgba(20,22,30,.08) !important;
  overflow: hidden !important;
}

/* -- sidebar footer overhaul -- */
html:root[data-design-mode="editorial"] body .sidebar-collapse-btn {
  border: 0 !important;
  background: transparent !important;
  color: var(--ink-4, #8a8d96) !important;
  border-radius: 8px !important;
  margin: 4px 10px !important;
}
html:root[data-design-mode="editorial"] body .sidebar-collapse-btn:hover {
  background: var(--paper-2, #f3f1ec) !important;
  color: var(--ink-2, #3b3d44) !important;
}
html:root[data-design-mode="editorial"] body .sidebar-footer { padding: 6px 10px 12px !important; }
html:root[data-design-mode="editorial"] body .sidebar-user {
  border-radius: 12px !important;
  padding: 8px 10px !important;
  gap: 10px !important;
  transition: background .14s ease !important;
}
html:root[data-design-mode="editorial"] body .sidebar-user:hover { background: var(--paper-2, #f3f1ec) !important; }
html:root[data-design-mode="editorial"] body .sidebar-user-avatar {
  background: var(--accent, #f4e14a) !important;
  color: var(--ink, #15161a) !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
}
html:root[data-design-mode="editorial"] body .sidebar-user-name {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  color: var(--ink, #15161a) !important;
  font-size: 0.85rem !important;
  letter-spacing: 0 !important;
}
html:root[data-design-mode="editorial"] body .sidebar-user-role {
  font-family: var(--font-body) !important;
  font-size: 0.6rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--ink-4, #8a8d96) !important;
}

/* ===========================================================================
   15. CLIENT BRAIN — ALL TABS overhaul (Overview done in 11; this is the rest)
   ----------------------------------------------------------------------------
   Audited every tab: Images(imt), Reports(dgst/rpt), Content Engine(ce),
   Command Center(cc), Content Map(cm-*), GBP(cm-gbp/gbp), Tasks(task-row),
   Costings(cm-info/cm-costings), Foundry(#fdy*). Promote each tab's boxed
   surfaces to the white floating-card brand. Inline-styled rows (Tasks/Foundry/
   GBP-JS) are reachable because external !important beats non-important inline.
   Intentional variants LEFT: .cc-card-primary (inverted hero), .ce-launch-toolbar
   + #gbpDraftsBanner (accent/alert tints).
   =========================================================================== */
/* -- 15a. tab PANELS → white card, 16px, float -- */
html:root[data-design-mode="editorial"] body .ce-sidebar,
html:root[data-design-mode="editorial"] body .ce-main-panel,
html:root[data-design-mode="editorial"] body .ce-published,
html:root[data-design-mode="editorial"] body .ce-drive-panel,
html:root[data-design-mode="editorial"] body .ce-pipeline-viz,
html:root[data-design-mode="editorial"] body .cc-card,
html:root[data-design-mode="editorial"] body .cm-stat-card,
html:root[data-design-mode="editorial"] body .cm-table-wrap,
html:root[data-design-mode="editorial"] body .cm-bulk-bar,
html:root[data-design-mode="editorial"] body .cm-info-card,
html:root[data-design-mode="editorial"] body .cm-gbp-picker,
html:root[data-design-mode="editorial"] body .cm-gbp-detail-host,
html:root[data-design-mode="editorial"] body #fdyVersionBar,
html:root[data-design-mode="editorial"] body #fdyDetailPane {
  background: var(--surface-1, #ffffff) !important;
  border: 1px solid var(--rule, #e9e6da) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-float) !important;
}
/* -- 15b. tab STAT/KPI/inner tiles + rows → white, 12px, light float -- */
html:root[data-design-mode="editorial"] body .ce-stat,
html:root[data-design-mode="editorial"] body .ce-pace-control,
html:root[data-design-mode="editorial"] body .ce-pipeline-stage,
html:root[data-design-mode="editorial"] body .comms-stat-card,
html:root[data-design-mode="editorial"] body .cm-costings-card,
html:root[data-design-mode="editorial"] body .cm-gbp-picker-row,
html:root[data-design-mode="editorial"] body .task-row,
html:root[data-design-mode="editorial"] body .ce-extend-bar.ok {
  background: var(--surface-1, #ffffff) !important;
  border: 1px solid var(--rule, #e9e6da) !important;
  border-radius: var(--card-radius-sm) !important;
  box-shadow: var(--card-float-sm) !important;
}
/* -- 15c. dark-fallback / white-on-dark inner surfaces → white + ink text -- */
html:root[data-design-mode="editorial"] body .ce-pipe-step,
html:root[data-design-mode="editorial"] body .gbp-automation-card,
html:root[data-design-mode="editorial"] body .gbp-draft-row {
  background: var(--surface-1, #ffffff) !important;
  border: 1px solid var(--rule, #e9e6da) !important;
  border-radius: var(--card-radius-sm) !important;
  color: var(--ink, #15161a) !important;
}

/* ===========================================================================
   16. SAFETY: never let non-visual elements become visible
   ----------------------------------------------------------------------------
   editorial-overlay's `.X-management ... { display:inline-flex }` child rules
   were catching <script>/<style>/<template> nodes (e.g. the date-range-picker
   init script on Link Orders), rendering raw JS as on-page text. Force them
   back to display:none everywhere.
   =========================================================================== */
html:root[data-design-mode="editorial"] script,
html:root[data-design-mode="editorial"] style,
html:root[data-design-mode="editorial"] template,
html:root[data-design-mode="editorial"] link,
html:root[data-design-mode="editorial"] head { display: none !important; }

/* ===========================================================================
   17. OPS PAGES — Websites / Links / GMB / Web Hosting gaps + dark modals
   ----------------------------------------------------------------------------
   Audited the remaining ops pages. These container classes weren't promoted
   (cream/accent-washed/flat/square) or are dark-by-design modals needing re-ink.
   =========================================================================== */
/* white CARDS (16px float) */
html:root[data-design-mode="editorial"] body .status-table-wrapper,
html:root[data-design-mode="editorial"] body .wr-table-section,
html:root[data-design-mode="editorial"] body .hs-table-section,
html:root[data-design-mode="editorial"] body .lo-bulk-bar,
html:root[data-design-mode="editorial"] body .lo-cost-preview,
html:root[data-design-mode="editorial"] body .gmb-stats,
html:root[data-design-mode="editorial"] body .gmb-client-header,
html:root[data-design-mode="editorial"] body .kb-column,
html:root[data-design-mode="editorial"] body .kb-card,
html:root[data-design-mode="editorial"] body .gbp-accounts-bar,
html:root[data-design-mode="editorial"] body #gmbLegacyTools,
html:root[data-design-mode="editorial"] body #gbpAccountsPanel,
html:root[data-design-mode="editorial"] body #profileManager {
  background: var(--surface-1, #ffffff) !important;
  border: 1px solid var(--rule, #e9e6da) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-float) !important;
}
/* white TILES (12px) */
html:root[data-design-mode="editorial"] body .hs-kpi-card,
html:root[data-design-mode="editorial"] body .hs-empty {
  background: var(--surface-1, #ffffff) !important;
  border: 1px solid var(--rule, #e9e6da) !important;
  border-radius: var(--card-radius-sm) !important;
  box-shadow: var(--card-float-sm) !important;
}
/* GMB v2 / detail cards are token-white but flat — add the float (they're in
   11a already for bg; ensure shadow + 16px on the detail/list surfaces) */
html:root[data-design-mode="editorial"] body .gbp-group,
html:root[data-design-mode="editorial"] body .gbp-detail-card,
html:root[data-design-mode="editorial"] body .gbp-detail-hero,
html:root[data-design-mode="editorial"] body .gbp-posts-list,
html:root[data-design-mode="editorial"] body .gbp-compose-card {
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-float) !important;
}
/* DARK legacy GMB modals/drawer → white + ink text (white-on-black before) */
html:root[data-design-mode="editorial"] body .gmb-detail-panel,
html:root[data-design-mode="editorial"] body .gmb-modal,
html:root[data-design-mode="editorial"] body .doc-preview-box {
  background: var(--surface-1, #ffffff) !important;
  border: 1px solid var(--rule, #e9e6da) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: 0 24px 70px -24px rgba(20,22,30,.40), 0 4px 14px rgba(20,22,30,.08) !important;
  color: var(--ink, #15161a) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
/* re-ink text inside those dark panels (they used white). Scope to text-ish
   tags so accent/semantic chips keep their colour. */
html:root[data-design-mode="editorial"] body .gmb-detail-panel :is(p,span,div,h1,h2,h3,h4,h5,label,td,th,li,a,small),
html:root[data-design-mode="editorial"] body .gmb-modal :is(p,span,div,h1,h2,h3,h4,h5,label,td,th,li,a,small),
html:root[data-design-mode="editorial"] body .doc-preview-box :is(p,span,div,h1,h2,h3,h4,h5,label,td,th,li,a,small) {
  color: var(--ink-2, #3b3d44) !important;
}

/* ===========================================================================
   18. ACCOUNT MANAGER cards + TABLE consistency
   ----------------------------------------------------------------------------
   .am-secondary-card was unpromoted (+ pinned 2px by detail.html). Tables were
   inconsistent: promoted wrappers lacked overflow:hidden (table corners poked
   out square) and Bootstrap .table-responsive (41 uses) was never rounded.
   =========================================================================== */
html:root[data-design-mode="editorial"] body .am-secondary-card,
html:root[data-design-mode="editorial"] body .am-secondary-card.metric {
  background: var(--surface-1, #ffffff) !important;
  border: 1px solid var(--rule, #e9e6da) !important;
  border-radius: var(--card-radius-sm) !important;
  box-shadow: var(--card-float-sm) !important;
}
/* clip tables to the rounded card frame (kills poking square corners) */
html:root[data-design-mode="editorial"] body .status-table-wrapper,
html:root[data-design-mode="editorial"] body .wr-table-section,
html:root[data-design-mode="editorial"] body .hs-table-section,
html:root[data-design-mode="editorial"] body .lo-table-section,
html:root[data-design-mode="editorial"] body .adm-table-wrap,
html:root[data-design-mode="editorial"] body .payments-table-wrap,
html:root[data-design-mode="editorial"] body .cm-table-wrap {
  overflow: auto !important;   /* auto (not hidden) preserves internal scroll AND clips rounded corners */
}
/* Bootstrap .table-responsive everywhere → rounded corners (keeps its x-scroll) */
html:root[data-design-mode="editorial"] body .table-responsive {
  border-radius: var(--card-radius) !important;
}
/* but a .table-responsive directly inside a promoted card shouldn't double-frame */
html:root[data-design-mode="editorial"] body .card .table-responsive,
html:root[data-design-mode="editorial"] body .am-secondary-card .table-responsive {
  border-radius: 0 !important;
}

/* ===========================================================================
   19. SEGMENTED TAB TOGGLES (.view-toggle) — dark 2px square -> accent pill
   Used on Bot Registry (Tasks/Action Items/Activity), GMB view switch, etc.
   Match the sidebar's accent-soft active pill for app-wide consistency.
   =========================================================================== */
html:root[data-design-mode="editorial"] body .view-toggle {
  border-radius: 9px !important;
  font-family: var(--font-body) !important;
  transition: background .14s ease, color .14s ease !important;
}
html:root[data-design-mode="editorial"] body .view-toggle:not(.active) {
  background: transparent !important;
  color: var(--ink-3, #6b6d75) !important;
}
html:root[data-design-mode="editorial"] body .view-toggle:not(.active):hover {
  background: var(--paper-2, #f3f1ec) !important;
  color: var(--ink, #15161a) !important;
}
html:root[data-design-mode="editorial"] body .view-toggle.active {
  background: var(--accent-soft, #fef9cc) !important;
  color: var(--ink, #15161a) !important;
  box-shadow: inset 0 0 0 1px rgba(244,225,74,.55) !important;
}
html:root[data-design-mode="editorial"] body .view-toggle.active .br-filter-count {
  background: var(--accent, #f4e14a) !important;
  color: var(--ink, #15161a) !important;
}

/* ===========================================================================
   20. BUTTONS — round the square edges everywhere
   ----------------------------------------------------------------------------
   Editorial forced buttons to 2px square. Round them (8px) app-wide. Exclude
   segmented toggles (already accent pills), select triggers, avatars, and
   anything explicitly pill/circle.
   =========================================================================== */
html:root[data-design-mode="editorial"] body .btn,
html:root[data-design-mode="editorial"] body button:not(.view-toggle):not(.nx-select-trigger):not(.nx-select-option):not([class*="tab"]):not(.sidebar-section-toggle),
html:root[data-design-mode="editorial"] body .opt-btn,
html:root[data-design-mode="editorial"] body .btn-primary-opt,
html:root[data-design-mode="editorial"] body .btn-secondary-opt,
html:root[data-design-mode="editorial"] body [class$="-btn"]:not(.view-toggle),
html:root[data-design-mode="editorial"] body .am-action,
html:root[data-design-mode="editorial"] body input[type="submit"],
html:root[data-design-mode="editorial"] body input[type="button"] {
  border-radius: 8px !important;
}
/* keep genuine pills / circles round */
html:root[data-design-mode="editorial"] body .pill,
html:root[data-design-mode="editorial"] body [class*="pill"],
html:root[data-design-mode="editorial"] body .rounded-circle,
html:root[data-design-mode="editorial"] body .rounded-pill,
html:root[data-design-mode="editorial"] body .sidebar-user-avatar,
html:root[data-design-mode="editorial"] body .avatar,
html:root[data-design-mode="editorial"] body .btn-close { border-radius: 999px !important; }

/* ===========================================================================
   21. SYSTEMIC SQUARE-EDGE SWEEP — round the remaining 2px-pinned categories
   ----------------------------------------------------------------------------
   Editorial pins ~239 elements to border-radius:2px. Round them by category:
   inputs/fields/search -> 8px, dropdowns/menus -> 12px, badges/chips/tags -> pill.
   =========================================================================== */
/* INPUTS / SELECTS / FIELDS / SEARCH -> 8px */
html:root[data-design-mode="editorial"] body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html:root[data-design-mode="editorial"] body select,
html:root[data-design-mode="editorial"] body textarea,
html:root[data-design-mode="editorial"] body .form-control,
html:root[data-design-mode="editorial"] body .form-select,
html:root[data-design-mode="editorial"] body .nx-select-trigger,
html:root[data-design-mode="editorial"] body [class*="-input"]:not([class*="-input-group"]),
html:root[data-design-mode="editorial"] body [class*="-search"]:not([class*="-search-result"]) {
  border-radius: 8px !important;
}
/* DROPDOWNS / MENUS / POPOVERS -> 12px */
html:root[data-design-mode="editorial"] body .dropdown-menu,
html:root[data-design-mode="editorial"] body .nx-select-dropdown,
html:root[data-design-mode="editorial"] body .nx-select-options,
html:root[data-design-mode="editorial"] body [class*="-dropdown"]:not([class*="-dropdown-item"]),
html:root[data-design-mode="editorial"] body [class*="-menu"]:not([class*="-menu-item"]):not([class*="-menu-link"]) {
  border-radius: 12px !important;
}
/* BADGES / CHIPS / TAGS / STATUS PILLS -> pill */
html:root[data-design-mode="editorial"] body .badge,
html:root[data-design-mode="editorial"] body [class*="-badge"],
html:root[data-design-mode="editorial"] body [class*="-chip"],
html:root[data-design-mode="editorial"] body [class*="-tag"]:not([class*="-tagline"]):not([class*="-target"]),
html:root[data-design-mode="editorial"] body [class*="-pill"],
html:root[data-design-mode="editorial"] body .status-badge,
html:root[data-design-mode="editorial"] body [class*="badge-stage"] {
  border-radius: 999px !important;
}

/* ===========================================================================
   22. TASK MODAL (itm-*) overhaul — buttons, tags, fields
   The Client Brain task popup (#cmTaskModalOverlay > .itm-shell) had square
   .itm-btn-* buttons and .itm-chips/breadcrumb tags. Round them to match.
   =========================================================================== */
html:root[data-design-mode="editorial"] body .itm-btn,
html:root[data-design-mode="editorial"] body .itm-btn-ghost,
html:root[data-design-mode="editorial"] body .itm-btn-primary,
html:root[data-design-mode="editorial"] body .itm-btn-danger,
html:root[data-design-mode="editorial"] body .itm-btn-close,
html:root[data-design-mode="editorial"] body .itm-checklist-add,
html:root[data-design-mode="editorial"] body .itm-cta-link {
  border-radius: 8px !important;
}
html:root[data-design-mode="editorial"] body .itm-input,
html:root[data-design-mode="editorial"] body .itm-select,
html:root[data-design-mode="editorial"] body .itm-date,
html:root[data-design-mode="editorial"] body .itm-comment-input,
html:root[data-design-mode="editorial"] body .itm-readonly,
html:root[data-design-mode="editorial"] body .itm-comment-shell {
  border-radius: 10px !important;
}
html:root[data-design-mode="editorial"] body .itm-chips > *,
html:root[data-design-mode="editorial"] body .itm-breadcrumb > *,
html:root[data-design-mode="editorial"] body .itm-tag,
html:root[data-design-mode="editorial"] body .itm-chip {
  border-radius: 999px !important;
}
/* the description/comment rich-text editor box + toolbar group */
html:root[data-design-mode="editorial"] body .itm-section [contenteditable],
html:root[data-design-mode="editorial"] body .cm-rich-editor,
html:root[data-design-mode="editorial"] body .cm-rich-toolbar {
  border-radius: 10px !important;
}

/* ===========================================================================
   23. EVERY POPUP — round ALL controls inside any modal/overlay
   ----------------------------------------------------------------------------
   Many modals are JS-built with INLINE border-radius on plain <button>/<input>
   (no rounding class), so class selectors miss them. Round every control inside
   every popup container via descendant selectors (0,4,2 > inline non-important).
   =========================================================================== */
html:root[data-design-mode="editorial"] body .itm-shell button,
html:root[data-design-mode="editorial"] body .itm-shell input:not([type="checkbox"]):not([type="radio"]),
html:root[data-design-mode="editorial"] body .itm-shell select,
html:root[data-design-mode="editorial"] body .itm-shell textarea,
html:root[data-design-mode="editorial"] body .itm-shell [contenteditable],
html:root[data-design-mode="editorial"] body .modal-content button,
html:root[data-design-mode="editorial"] body .modal-content input:not([type="checkbox"]):not([type="radio"]),
html:root[data-design-mode="editorial"] body .modal-content select,
html:root[data-design-mode="editorial"] body .modal-content textarea,
html:root[data-design-mode="editorial"] body .cmov-modal button,
html:root[data-design-mode="editorial"] body .cmov-modal input:not([type="checkbox"]):not([type="radio"]),
html:root[data-design-mode="editorial"] body .cmov-modal select,
html:root[data-design-mode="editorial"] body .cmov-modal textarea,
html:root[data-design-mode="editorial"] body .cm-edit-modal button,
html:root[data-design-mode="editorial"] body .cm-edit-modal input:not([type="checkbox"]):not([type="radio"]),
html:root[data-design-mode="editorial"] body .cm-edit-modal select,
html:root[data-design-mode="editorial"] body .cm-edit-modal textarea,
html:root[data-design-mode="editorial"] body .am-drill-panel button,
html:root[data-design-mode="editorial"] body .gmb-modal button,
html:root[data-design-mode="editorial"] body .gmb-modal input:not([type="checkbox"]):not([type="radio"]),
html:root[data-design-mode="editorial"] body .gmb-modal select,
html:root[data-design-mode="editorial"] body .br-modal button,
html:root[data-design-mode="editorial"] body .confirm-modal button {
  border-radius: 8px !important;
}
/* the big text boxes (description, comment, notes) -> softer 10px */
html:root[data-design-mode="editorial"] body .itm-shell textarea,
html:root[data-design-mode="editorial"] body .itm-shell [contenteditable],
html:root[data-design-mode="editorial"] body .modal-content textarea {
  border-radius: 10px !important;
}

/* ===========================================================================
   24. RICH-TEXT TOOLBAR — clean single bar (buttons borderless, hover fill)
   =========================================================================== */
html:root[data-design-mode="editorial"] body .rich-toolbar button:hover,
html:root[data-design-mode="editorial"] body .rich-toolbar select:hover {
  background: var(--paper-2, #f3f1ec) !important;
  color: var(--ink, #15161a) !important;
}
html:root[data-design-mode="editorial"] body .rich-toolbar button,
html:root[data-design-mode="editorial"] body .rich-toolbar select {
  border: 1px solid transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ===========================================================================
   25. NOTIFICATIONS / ALERTS / BANNERS — consistent padding + radius
   They had wildly different padding/radii. Standardise: 12px radius, 13px 16px
   padding, hairline. (Toasts kept compact.)
   =========================================================================== */
html:root[data-design-mode="editorial"] body .alert,
html:root[data-design-mode="editorial"] body .alert-warning,
html:root[data-design-mode="editorial"] body .flash-message,
html:root[data-design-mode="editorial"] body .error-banner,
html:root[data-design-mode="editorial"] body .acw-error-banner,
html:root[data-design-mode="editorial"] body .acw-info-banner,
html:root[data-design-mode="editorial"] body .gbp-detail-banner,
html:root[data-design-mode="editorial"] body .imt-drive-banner,
html:root[data-design-mode="editorial"] body .hwiz-banner,
html:root[data-design-mode="editorial"] body [class*="-banner"],
html:root[data-design-mode="editorial"] body [class*="-notice"] {
  border-radius: 12px !important;
  padding: 13px 16px !important;
}
html:root[data-design-mode="editorial"] body .cm-toast,
html:root[data-design-mode="editorial"] body .br-toast,
html:root[data-design-mode="editorial"] body .cc-toast,
html:root[data-design-mode="editorial"] body .gmb-toast,
html:root[data-design-mode="editorial"] body .am-toast,
html:root[data-design-mode="editorial"] body .heatmap-toast,
html:root[data-design-mode="editorial"] body [class*="-toast"] {
  border-radius: 12px !important;
  padding: 10px 14px !important;
}

/* ===========================================================================
   26. CLIENT BRAIN TAB BAR (.cm-tabs/.cm-tab) — clean accent-pill nav
   ----------------------------------------------------------------------------
   editorial-overlay forced .cm-tabs to cream + 2px square with a cream-box +
   underline active state, and tabs wrapped text to 2 lines. Rebuild as one
   clean white rounded bar with accent-soft pill active tabs (single line).
   =========================================================================== */
html:root[data-design-mode="editorial"] body .cm-tabs,
html:root[data-design-mode="editorial"] body .data-tabs-nav {
  background: var(--surface-1, #ffffff) !important;
  border: 1px solid var(--rule, #e9e6da) !important;
  border-radius: 14px !important;
  padding: 5px !important;
  gap: 2px !important;
  box-shadow: var(--card-float-sm) !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;          /* Firefox: hide scrollbar */
  -ms-overflow-style: none !important;       /* old Edge/IE: hide scrollbar */
}
/* Chrome / Edge / Safari: hide the harsh scrollbar track on the tab bar
   (tabs still scroll via trackpad / shift-wheel / drag). */
html:root[data-design-mode="editorial"] body .cm-tabs::-webkit-scrollbar,
html:root[data-design-mode="editorial"] body .data-tabs-nav::-webkit-scrollbar {
  height: 0 !important;
  width: 0 !important;
  display: none !important;
}
html:root[data-design-mode="editorial"] body .cm-tab,
html:root[data-design-mode="editorial"] body .data-tab {
  border-radius: 9px !important;
  border-bottom: 0 !important;
  color: var(--ink-3, #6b6d75) !important;
  font-weight: 500 !important;
  font-family: var(--font-body) !important;
  padding: 8px 14px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
html:root[data-design-mode="editorial"] body .cm-tab:hover,
html:root[data-design-mode="editorial"] body .data-tab:hover {
  background: var(--paper-2, #f3f1ec) !important;
  color: var(--ink, #15161a) !important;
}
html:root[data-design-mode="editorial"] body .cm-tab.active,
html:root[data-design-mode="editorial"] body .cb-tab.active,
html:root[data-design-mode="editorial"] body .data-tab.active {
  background: var(--accent-soft, #fef9cc) !important;
  color: var(--ink, #15161a) !important;
  border-bottom: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(244,225,74,.55) !important;
  font-weight: 600 !important;
}


/* ===========================================================================
   27. TASK MODAL — full clean rebuild (#cmTaskModalOverlay, .tm-* classes)
   Opts out of the JS flattener (data-tm-clean) so this CSS is the single source
   of truth. ID-scoped so it wins without !important wars.
   =========================================================================== */
#cmTaskModalOverlay { background: rgba(21,22,26,0.55) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
#cmTaskModalOverlay .tm-shell { background:var(--surface-1,#fff); border:1px solid var(--rule,#e9e6da); border-radius:16px; width:92%; max-width:1040px; max-height:92vh; overflow-y:auto; box-shadow:0 24px 70px -24px rgba(20,22,30,.45),0 4px 14px rgba(20,22,30,.08); font-family:var(--font-body); }
#cmTaskModalOverlay .tm-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:22px 26px 18px; border-bottom:1px solid var(--rule,#e9e6da); }
#cmTaskModalOverlay .tm-head-left { flex:1; min-width:0; }
#cmTaskModalOverlay .tm-crumbs { display:flex; align-items:center; gap:6px; margin-bottom:9px; flex-wrap:wrap; }
#cmTaskModalOverlay .tm-crumb { font-size:9.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:3px 9px; border-radius:999px; background:var(--paper-2,#f3f1ec); color:var(--ink-3,#6b6d75); }
#cmTaskModalOverlay .tm-crumb-plain { background:transparent; padding:0; }
#cmTaskModalOverlay .tm-crumb-accent { background:var(--accent-soft,#fef9cc); color:var(--accent-ink,#1a1700); }
#cmTaskModalOverlay .tm-title { width:100%; box-sizing:border-box; font-family:var(--font-display); font-size:1.5rem; font-weight:400; color:var(--ink,#15161a); background:transparent; border:1px solid transparent; border-radius:9px; padding:5px 9px; margin-left:-9px; outline:none; }
#cmTaskModalOverlay .tm-title:hover { background:var(--paper-2,#f3f1ec); }
#cmTaskModalOverlay .tm-title:focus { background:var(--surface-1,#fff); border-color:var(--rule,#e9e6da); }
#cmTaskModalOverlay .tm-head-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
#cmTaskModalOverlay .tm-btn { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-body); font-size:12.5px; font-weight:500; padding:7px 13px; border-radius:8px; border:1px solid var(--rule,#e9e6da); background:var(--surface-1,#fff); color:var(--ink-2,#3b3d44); cursor:pointer; transition:background .14s,border-color .14s; white-space:nowrap; }
#cmTaskModalOverlay .tm-btn:hover { background:var(--paper-2,#f3f1ec); border-color:var(--ink-4,#8a8d96); }
#cmTaskModalOverlay .tm-btn-primary { background:var(--accent,#f4e14a); border-color:var(--accent,#f4e14a); color:var(--ink,#15161a); font-weight:600; }
#cmTaskModalOverlay .tm-btn-primary:hover { background:var(--accent-dk,#e4cc00); border-color:var(--accent-dk,#e4cc00); }
#cmTaskModalOverlay .tm-btn-danger { color:var(--down,#b42318); border-color:rgba(180,35,24,.3); }
#cmTaskModalOverlay .tm-btn-danger:hover { background:rgba(180,35,24,.07); border-color:rgba(180,35,24,.45); }
#cmTaskModalOverlay .tm-btn-success { color:var(--up,#1f7a3a); border-color:rgba(31,122,58,.3); }
#cmTaskModalOverlay .tm-btn-success:hover { background:rgba(31,122,58,.07); }
#cmTaskModalOverlay .tm-btn-stop { color:var(--down,#b42318); border-color:rgba(180,35,24,.3); }
#cmTaskModalOverlay .tm-btn-icon { border:1px solid transparent; background:transparent; color:var(--ink-3,#6b6d75); font-size:1rem; padding:6px 8px; }
#cmTaskModalOverlay .tm-btn-icon:hover { background:var(--paper-2,#f3f1ec); color:var(--ink,#15161a); }
#cmTaskModalOverlay .tm-btn-icon-sq { width:38px; justify-content:center; flex-shrink:0; }
#cmTaskModalOverlay .tm-btn-block { width:100%; justify-content:center; }
#cmTaskModalOverlay .tm-body { display:grid; grid-template-columns:1fr 300px; }
#cmTaskModalOverlay .tm-main { padding:24px 26px; border-right:1px solid var(--rule,#e9e6da); display:flex; flex-direction:column; gap:26px; min-width:0; }
#cmTaskModalOverlay .tm-rail { padding:24px 22px; display:flex; flex-direction:column; gap:18px; background:var(--paper,#fbfbf9); }
#cmTaskModalOverlay .tm-eyebrow { font-family:var(--font-body); font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-4,#8a8d96); margin-bottom:8px; }
#cmTaskModalOverlay .tm-input,#cmTaskModalOverlay .tm-select,#cmTaskModalOverlay .tm-textarea,#cmTaskModalOverlay .tm-editor { width:100%; box-sizing:border-box; font-family:var(--font-body); font-size:13px; color:var(--ink,#15161a); background:var(--surface-1,#fff); border:1px solid var(--rule,#e9e6da); border-radius:9px; padding:9px 11px; outline:none; transition:border-color .14s,box-shadow .14s; }
#cmTaskModalOverlay .tm-input:focus,#cmTaskModalOverlay .tm-select:focus,#cmTaskModalOverlay .tm-textarea:focus,#cmTaskModalOverlay .tm-editor:focus { border-color:var(--accent-dk,#e4cc00); box-shadow:0 0 0 3px rgba(244,225,74,.18); }
#cmTaskModalOverlay .tm-textarea { resize:vertical; min-height:54px; }
#cmTaskModalOverlay .tm-editor { min-height:90px; }
#cmTaskModalOverlay .tm-editor:empty:before { content:attr(data-placeholder); color:var(--ink-4,#8a8d96); }
#cmTaskModalOverlay .tm-select { -webkit-appearance:none; appearance:none; cursor:pointer; padding-right:30px; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%236b6d75' d='M0 0l5 6 5-6z'/></svg>"); background-repeat:no-repeat; background-position:right 11px center; }
#cmTaskModalOverlay .tm-block-actions { display:flex; justify-content:flex-end; margin-top:8px; }
#cmTaskModalOverlay .tm-timer { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--rule,#e9e6da); border-radius:10px; background:var(--surface-1,#fff); }
#cmTaskModalOverlay .tm-timer-display { font-family:var(--font-mono); font-size:1.05rem; color:var(--ink-2,#3b3d44); min-width:70px; }
#cmTaskModalOverlay .tm-timer-total { margin-left:auto; font-size:11px; color:var(--ink-4,#8a8d96); }
#cmTaskModalOverlay .tm-timer-entries { margin-top:6px; max-height:120px; overflow-y:auto; }
#cmTaskModalOverlay .tm-add-row { display:flex; gap:8px; margin-top:10px; }
#cmTaskModalOverlay .tm-file-badge { margin-top:8px; }
#cmTaskModalOverlay .tm-comment-toolbar { margin-top:10px; margin-bottom:8px; }
#cmTaskModalOverlay .tm-comment-row { display:flex; gap:8px; align-items:flex-end; }
#cmTaskModalOverlay .tm-comment-row .tm-editor { flex:1; min-height:42px; }
#cmTaskModalOverlay .tm-attach { display:flex; align-items:center; padding:9px; border:1px solid var(--rule,#e9e6da); border-radius:8px; background:var(--surface-1,#fff); cursor:pointer; color:var(--ink-3,#6b6d75); }
#cmTaskModalOverlay .tm-attach:hover { border-color:var(--ink-4,#8a8d96); }
#cmTaskModalOverlay .tm-priority { display:flex; align-items:center; gap:8px; }
#cmTaskModalOverlay .tm-priority-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
#cmTaskModalOverlay .tm-assignees { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
#cmTaskModalOverlay .tm-meta-val { font-size:12px; color:var(--ink-3,#6b6d75); padding:2px 0; }
#cmTaskModalOverlay .tm-delete-zone { margin-top:6px; padding-top:14px; border-top:1px solid var(--rule,#e9e6da); }