/* ============================================================================
   editorial-final.css — last-word cascade overrides + editorial redesigns
   ----------------------------------------------------------------------------
   Loaded as a <link> at the END of <body> in base.html so it parses AFTER
   every inline <style> block in the templates (which are scattered through
   _content_brain.html, content_map.html, dashboard.html, bot_registry.html).

   Source-order ties go to whichever rule appears LATER. Putting this file
   at end-of-body guarantees its rules win against any inline-block rule of
   equal-or-lower specificity, regardless of !important on either side.

   Two responsibilities:
     1.  Cascade-winning re-assertion of editorial overrides for the highest-
         visibility elements (KPI tiles, section panels, badges, buttons).
     2.  Actual editorial REDESIGN — not just recoloring. Less card chrome,
         more typography hierarchy, paper/ink discipline per
         C:\Users\Ben\.claude\OPT-DESIGN-SYSTEM.md.
   ========================================================================= */

/* ── 1.  CLIENT BRAIN KPI TILES — editorial redesign ──────────────────────
   The existing `.cb-field` rule (defined inline in _content_brain.html line
   388) renders these as gradient-filled rounded cards. For editorial we
   strip the card chrome entirely and use typography hierarchy: small mono
   uppercase label + larger serif value, separated by subtle bottom rules.
   ───────────────────────────────────────────────────────────────────────── */
html[data-design-mode="editorial"] .cb-detail-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 0 24px !important;
  margin-bottom: 32px !important;
  border-top: 1px solid var(--border-standard) !important;
  padding-top: 4px !important;
}
html[data-design-mode="editorial"] .cb-field {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  border-radius: 0 !important;
  padding: 14px 4px 12px !important;
  box-shadow: none !important;
}
html[data-design-mode="editorial"] .cb-field-label {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  color: var(--ink-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.18em !important;
  margin-bottom: 6px !important;
  opacity: 1 !important;
}
html[data-design-mode="editorial"] .cb-field-value {
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  color: var(--ink-strong) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.25 !important;
  word-break: break-all !important;
}
html[data-design-mode="editorial"] .cb-field-value.masked {
  color: var(--ink-muted) !important;
  font-style: italic !important;
}
html[data-design-mode="editorial"] .cb-field-value a {
  color: var(--ink-strong) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px !important;
  text-decoration-color: var(--accent) !important;
}

/* ── 2.  CLIENT BRAIN STAT TILES (325 / 248 / 41 / 27 / 6) ────────────────
   Already mostly working in the screenshot but harden. Editorial: large
   serif numerals with mono uppercase labels underneath, paper background.
   ───────────────────────────────────────────────────────────────────────── */
html[data-design-mode="editorial"] body .cb-stat,
html[data-design-mode="editorial"] body .cb-stat-tile,
html[data-design-mode="editorial"] body .cb-stat-card {
  background: var(--surface-1) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 2px !important;
  padding: 22px 18px !important;
  text-align: center !important;
  box-shadow: none !important;
}
html[data-design-mode="editorial"] body .cb-stat-value,
html[data-design-mode="editorial"] body .cb-stat-tile-value,
html[data-design-mode="editorial"] body .cb-stat-num {
  font-family: var(--font-display) !important;
  font-size: 32px !important;
  font-weight: 400 !important;
  color: var(--ink-strong) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 8px !important;
}
html[data-design-mode="editorial"] body .cb-stat-label,
html[data-design-mode="editorial"] body .cb-stat-tile-label {
  font-family: var(--font-mono) !important;
  font-size: 9.5px !important;
  font-weight: 500 !important;
  color: var(--ink-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
}

/* ── 3.  CLIENT BRAIN SECTION PANELS (Weekly Scores / Orders / Resources) ─
   Currently render correctly but harden the editorial styling: cleaner
   typography hierarchy, no nested card-on-card, smaller mono headers.
   ───────────────────────────────────────────────────────────────────────── */
html[data-design-mode="editorial"] body .cb-section,
html[data-design-mode="editorial"] body .cb-panel,
html[data-design-mode="editorial"] body .cb-block {
  background: var(--surface-0) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 2px !important;
  padding: 20px 22px !important;
  box-shadow: none !important;
}
html[data-design-mode="editorial"] body .cb-section-title,
html[data-design-mode="editorial"] body .cb-section-header,
html[data-design-mode="editorial"] body .cb-panel-title {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  color: var(--ink-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.18em !important;
  margin-bottom: 14px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}

/* ── 4.  SERVICE TAGS (orange/yellow chips) ─────────────────────────────── */
html[data-design-mode="editorial"] body .cb-tag,
html[data-design-mode="editorial"] body .cb-service-tag {
  background: var(--accent-tint) !important;
  border: 1px solid var(--accent-border) !important;
  color: var(--ink-strong) !important;
  border-radius: 9999px !important;
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  padding: 4px 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

/* ── 5.  ADD-SERVICE / +ADD BUTTON ──────────────────────────────────────── */
html[data-design-mode="editorial"] body .cb-add-input,
html[data-design-mode="editorial"] body .cb-service-input {
  background: var(--surface-0) !important;
  border: 1px solid var(--border-standard) !important;
  border-radius: 2px !important;
  color: var(--ink-strong) !important;
  font-family: var(--font-body) !important;
}
html[data-design-mode="editorial"] body .cb-add-btn,
html[data-design-mode="editorial"] body button[onclick*="addService"] {
  background: var(--ink-strong) !important;
  color: var(--surface-0) !important;
  border: 1px solid var(--ink-strong) !important;
  border-radius: 2px !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 10px 18px !important;
  cursor: pointer !important;
}
html[data-design-mode="editorial"] body .cb-add-btn:hover {
  background: var(--ink-body) !important;
  border-color: var(--ink-body) !important;
}

/* ── 6.  SECTION HEADERS (top-of-page) — bigger serif title ──────────────── */
html[data-design-mode="editorial"] body h1,
html[data-design-mode="editorial"] body h2,
html[data-design-mode="editorial"] body h3,
html[data-design-mode="editorial"] body .cb-page-title,
html[data-design-mode="editorial"] body .cb-client-name {
  font-family: var(--font-display) !important;
  color: var(--ink-strong) !important;
  font-weight: 400 !important;
}

/* ── 7.  GOOGLE BUSINESS PROFILES + OPTIMUS UNREACHABLE banner ──────────── */
html[data-design-mode="editorial"] body .cb-gmb-status,
html[data-design-mode="editorial"] body .cb-optimus-status,
html[data-design-mode="editorial"] body .cb-optimus-unreachable,
html[data-design-mode="editorial"] body [class*="optimus"] {
  background: var(--status-danger-bg) !important;
  color: var(--status-danger) !important;
  border: 1px solid var(--status-danger-border) !important;
  border-radius: 2px !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  padding: 4px 10px !important;
}

/* ── 8.  SYNC FROM INTEGRATION + ADD PROFILE buttons (bottom of GBP row) ── */
html[data-design-mode="editorial"] body .cb-sync-btn,
html[data-design-mode="editorial"] body .cb-add-profile-btn,
html[data-design-mode="editorial"] body button[onclick*="syncFromIntegration"],
html[data-design-mode="editorial"] body button[onclick*="addProfile"] {
  background: var(--surface-0) !important;
  color: var(--ink-strong) !important;
  border: 1px solid var(--border-standard) !important;
  border-radius: 2px !important;
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 8px 14px !important;
}
html[data-design-mode="editorial"] body .cb-sync-btn:hover,
html[data-design-mode="editorial"] body .cb-add-profile-btn:hover {
  background: var(--surface-2) !important;
  border-color: var(--ink-3) !important;
}

/* ── 9.  CONTENT HEALTH dots (green/yellow/red traffic lights) ──────────── */
html[data-design-mode="editorial"] body [style*="background:#1f7a3a"],
html[data-design-mode="editorial"] body [style*="background: #1f7a3a"] {
  background: var(--status-success) !important;
}

/* ── 10. UNIVERSAL SLEDGEHAMMER for any remaining .cb-* dark surface ────── */
html[data-design-mode="editorial"] body [class*="cb-"][style*="background:#0"],
html[data-design-mode="editorial"] body [class*="cb-"][style*="background: #0"],
html[data-design-mode="editorial"] body [class*="cb-"][style*="background:rgba(0,0,0"],
html[data-design-mode="editorial"] body [class*="cb-"][style*="background: rgba(0,0,0"] {
  background: var(--surface-0) !important;
  background-color: var(--surface-0) !important;
  color: var(--ink-strong) !important;
}

/* ── 11. MODAL/TABLE TEXT CONTRAST — guarantee ink on paper ──────────────── */
html[data-design-mode="editorial"] body .cb-table td,
html[data-design-mode="editorial"] body .cb-table th,
html[data-design-mode="editorial"] body .cm-table td,
html[data-design-mode="editorial"] body .cm-table th,
html[data-design-mode="editorial"] body .dm-table td,
html[data-design-mode="editorial"] body .dm-table th,
html[data-design-mode="editorial"] body .am-table td,
html[data-design-mode="editorial"] body .am-table th {
  color: var(--ink-strong) !important;
}
html[data-design-mode="editorial"] body td a,
html[data-design-mode="editorial"] body th a {
  color: var(--ink-strong) !important;
  text-decoration-color: var(--accent) !important;
}

/* ── 12. ALL CLIENT-NAME / TITLE HEADINGS get serif treatment ─────────── */
html[data-design-mode="editorial"] body .client-name,
html[data-design-mode="editorial"] body .am-profile h1,
html[data-design-mode="editorial"] body .gbp-detail-title,
html[data-design-mode="editorial"] body .dv2-section-title,
html[data-design-mode="editorial"] body .nx-page-header h1 {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  color: var(--ink-strong) !important;
}

/* ── 13. Dashboard pipeline-trend manual legend ─────────────────────────
   Located in .company-dashboard scope (not .dash-v2), so the catch-all
   rules earlier in this file miss it. Force ink-strong on values and
   ink-muted on labels. */
html[data-design-mode="editorial"] body .company-dashboard .summary-item .summary-label,
html[data-design-mode="editorial"] body .dash-v2 .summary-item .summary-label,
html[data-design-mode="editorial"] body .summary-item .summary-label {
  color: var(--ink-muted) !important;
}
html[data-design-mode="editorial"] body .company-dashboard .summary-item .summary-value,
html[data-design-mode="editorial"] body .dash-v2 .summary-item .summary-value,
html[data-design-mode="editorial"] body .summary-item .summary-value {
  color: var(--ink-strong) !important;
}
html[data-design-mode="editorial"] body .summary-color {
  opacity: 1 !important;
}

/* ── 14. Topbar z-index reinforcement ───────────────────────────────────
   Some dashboard panels (.dv2-panel, .pipeline-chart-wrapper) establish
   their own stacking contexts via overflow:hidden + position:relative,
   which can cause the sticky topbar to clip behind chart elements on
   scroll. Bump topbar above any reasonable panel z-index. */
html[data-design-mode="editorial"] .topbar,
.topbar {
  z-index: 1100 !important;
}
html[data-design-mode="editorial"] #globalSearchResults,
#globalSearchResults {
  z-index: 1101 !important;
}

/* ── 15. Trial Conversion donut legend (Converted/Lost/In Progress) ──── */
html[data-design-mode="editorial"] body .trial-legend-row,
html[data-design-mode="editorial"] body .trial-legend-label,
html[data-design-mode="editorial"] body .trial-legend-value {
  color: var(--ink-strong) !important;
}
html[data-design-mode="editorial"] body .trial-legend-stat-label,
html[data-design-mode="editorial"] body .trial-legend-overdue {
  color: var(--ink-muted) !important;
}

/* ── 16. NUCLEAR — force --cm-*, --wb-*, --cs-* token blocks at editorial scope.
   Even after re-aliasing the source declarations to canonical tokens
   (commit 7d65e7a), Ben reports the KPI tiles still render as dark
   backgrounds. Belt-and-braces: hard-set the cm-* tokens directly
   to editorial hex at high specificity. Bypasses any var() resolution
   weirdness. */
html[data-design-mode="editorial"] body .cm-page,
html[data-design-mode="editorial"] body [class*="cm-page"] {
  --cm-bg: #fbfaf6 !important;
  --cm-surface: #f4f1e8 !important;
  --cm-surface2: #ece8da !important;
  --cm-border: #ece8da !important;
  --cm-border-strong: #d9d4c4 !important;
  --cm-text: #0a0a0a !important;
  --cm-text-dim: #5d5d5a !important;
}
html[data-design-mode="editorial"] body .website-requests-management {
  --wb-bg: #fbfaf6 !important;
  --wb-surface: #f4f1e8 !important;
  --wb-border: #ece8da !important;
  --wb-border-strong: #d9d4c4 !important;
  --wb-text: #0a0a0a !important;
  --wb-text-dim: #5d5d5a !important;
  --wb-text-mid: #2a2a2a !important;
}

/* ── 17. ATTRIBUTE-SELECTOR CATCH-ALL for inline style="background:var(--cm-...)"
   elements whose inline style attribute prevents normal class-based
   overrides from winning. Force them at attribute-selector specificity. */
html[data-design-mode="editorial"] body [style*="var(--cm-surface)"],
html[data-design-mode="editorial"] body [style*="var(--cm-bg)"] {
  background: #f4f1e8 !important;
  background-color: #f4f1e8 !important;
}
html[data-design-mode="editorial"] body [style*="var(--cm-text-dim)"] {
  color: #5d5d5a !important;
}
html[data-design-mode="editorial"] body [style*="color:var(--cm-text)"],
html[data-design-mode="editorial"] body [style*="color: var(--cm-text)"] {
  color: #0a0a0a !important;
}

/* ── 18. Heatmap shadows + competitor table chrome (editorial mode).
   The heatgrid.css uses heavy dark shadows (rgba(0,0,0,0.4)) which look
   like dirty halos on cream paper. Override to light paper-friendly
   shadows. Also replace the remaining rgba(255,255,255,X) borders that
   the batch script missed (CSS files weren't in scope). */
html[data-design-mode="editorial"] .hg-app {
  --hg-shadow-card: 0 1px 2px rgba(10,10,10,0.04), 0 4px 12px rgba(10,10,10,0.06);
  --hg-shadow-glow: 0 0 0 1px var(--accent-border), 0 0 40px -10px rgba(244,225,74,0.20);
  --hg-shadow-panel: 0 4px 16px rgba(10,10,10,0.08), 0 1px 2px rgba(10,10,10,0.04);
}
html[data-design-mode="editorial"] .hg-callout-card,
html[data-design-mode="editorial"] .hg-comp-table-wrap,
html[data-design-mode="editorial"] .hg-floating,
html[data-design-mode="editorial"] .hg-pill-tabs,
html[data-design-mode="editorial"] .hg-history-wrap,
html[data-design-mode="editorial"] .hg-history-empty {
  border-color: var(--border-standard) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-design-mode="editorial"] .hg-comp-table thead th {
  background: var(--surface-2) !important;
  color: var(--ink-faint) !important;
  border-bottom-color: var(--border-standard) !important;
}
html[data-design-mode="editorial"] .hg-comp-table tbody td {
  color: var(--ink-strong) !important;
  border-bottom-color: var(--border-subtle) !important;
}
html[data-design-mode="editorial"] .hg-comp-table tbody tr:hover {
  background: var(--accent-ghost) !important;
}
html[data-design-mode="editorial"] .hg-comp-table tbody tr.is-target {
  background: var(--accent-tint) !important;
}
html[data-design-mode="editorial"] .hg-comp-row {
  background: var(--surface-1) !important;
  border-color: var(--border-subtle) !important;
}
html[data-design-mode="editorial"] .hg-comp-name {
  color: var(--ink-strong) !important;
}
html[data-design-mode="editorial"] .hg-comp-meta {
  color: var(--ink-muted) !important;
}
html[data-design-mode="editorial"] .hg-comp-delta.bad {
  color: var(--status-danger) !important;
}
html[data-design-mode="editorial"] .hg-comp-delta.good {
  color: var(--status-success) !important;
}

/* ── 19. Heatmap pin shadows — soft on cream. */
html[data-design-mode="editorial"] .hg-pin {
  border: 1.5px solid rgba(10,10,10,0.20) !important;
  box-shadow: 0 1px 3px rgba(10,10,10,0.12), inset 0 -1px 2px rgba(10,10,10,0.06) !important;
  color: #ffffff !important;  /* keep contrast on coloured rank pins */
}
html[data-design-mode="editorial"] .hg-pin.r-3,
html[data-design-mode="editorial"] .hg-pin.r-4,
html[data-design-mode="editorial"] .hg-pin.r-5,
html[data-design-mode="editorial"] .hg-pin.r-6,
html[data-design-mode="editorial"] .hg-pin.r-7 {
  color: var(--ink-strong) !important;  /* readable on light-coloured pins */
}
html[data-design-mode="editorial"] .hg-pin.is-target {
  box-shadow: 0 0 0 3px var(--accent-border), 0 4px 12px rgba(10,10,10,0.20) !important;
}
html[data-design-mode="editorial"] .hg-pin.r-pending {
  background: rgba(10,10,10,0.06) !important;
  color: var(--ink-faint) !important;
  border: 1.5px dashed rgba(10,10,10,0.20) !important;
}

/* ── 20. KPI strip + filter bar callout chrome on heatmap pages */
html[data-design-mode="editorial"] .hg-kpi-tile,
html[data-design-mode="editorial"] .hg-card,
html[data-design-mode="editorial"] .hg-pill-tab,
html[data-design-mode="editorial"] .hg-filter-bar {
  background: var(--surface-1) !important;
  border-color: var(--border-subtle) !important;
  box-shadow: none !important;
}
html[data-design-mode="editorial"] .hg-kpi-label,
html[data-design-mode="editorial"] .hg-callout-label,
html[data-design-mode="editorial"] .hg-kpi-sub,
html[data-design-mode="editorial"] .hg-callout-sub {
  color: var(--ink-muted) !important;
}
html[data-design-mode="editorial"] .hg-kpi-value,
html[data-design-mode="editorial"] .hg-callout-value {
  color: var(--ink-strong) !important;
}

/* ── 21. Heatmap text contrast — keyword + rank legend ──────────────────
   The "electrician" keyword on .hg-scan-keyword-line uses var(--hg-accent)
   which in editorial = warm yellow. Yellow on cream = invisible. Force
   ink-strong instead. The .hg-legend-note labels (Top/Strong/Edge/...)
   use var(--hg-text-low) → ink-faint #8a8882 — too pale on cream. Bump
   to ink-muted #5d5d5a for legibility. */
html[data-design-mode="editorial"] .hg-scan-keyword-line {
  color: var(--ink-strong) !important;
}
html[data-design-mode="editorial"] .hg-legend-note,
html[data-design-mode="editorial"] .hg-scan-meta,
html[data-design-mode="editorial"] .hg-scan-stat-label,
html[data-design-mode="editorial"] .hg-callout-label {
  color: var(--ink-muted) !important;
}
html[data-design-mode="editorial"] .hg-scan-name,
html[data-design-mode="editorial"] .hg-scan-stat-value,
html[data-design-mode="editorial"] .hg-callout-value,
html[data-design-mode="editorial"] .hg-legend-row .hg-serif {
  color: var(--ink-strong) !important;
}
/* Legend dot border on cream — was rgba(0,0,0,0.4), keep */
html[data-design-mode="editorial"] .hg-legend-dot {
  border-color: rgba(10,10,10,0.20) !important;
}
/* Mid-rank pin colors hardcoded #fdba74/#fca5a5/#86efac — these are
   semantic rank indicators. Keep the hue but ensure readable on cream. */
html[data-design-mode="editorial"] .hg-rank-good {
  color: var(--status-success) !important;
}
html[data-design-mode="editorial"] .hg-rank-mid {
  color: var(--status-warning) !important;
}
html[data-design-mode="editorial"] .hg-rank-bad {
  color: var(--status-danger) !important;
}

/* ── 22. FullCalendar + Kanban black-line + corner fixes ───────────────
   FullCalendar's .fc-* classes use rgba whites for grid lines that
   render dark on cream. Plus rounded buttons need flattening. */
html[data-design-mode="editorial"] .fc-theme-standard td,
html[data-design-mode="editorial"] .fc-theme-standard th,
html[data-design-mode="editorial"] .fc-theme-standard .fc-scrollgrid {
  border-color: var(--border-subtle) !important;
}
html[data-design-mode="editorial"] .fc-button,
html[data-design-mode="editorial"] .fc-button-primary {
  background: var(--surface-1) !important;
  border-color: var(--border-standard) !important;
  color: var(--ink-strong) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}
html[data-design-mode="editorial"] .fc-button:hover {
  background: var(--surface-2) !important;
}
html[data-design-mode="editorial"] .fc-button-primary:not(:disabled).fc-button-active,
html[data-design-mode="editorial"] .fc-button-primary:not(:disabled):active {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  border-color: var(--accent-hover) !important;
}
html[data-design-mode="editorial"] .fc-event {
  border-radius: 2px !important;
}
html[data-design-mode="editorial"] .fc-toolbar-title {
  color: var(--ink-strong) !important;
  font-family: var(--font-display) !important;
}
html[data-design-mode="editorial"] .fc-col-header-cell-cushion,
html[data-design-mode="editorial"] .fc-daygrid-day-number {
  color: var(--ink-body) !important;
}

/* Kanban board (Bootstrap-like) — wb-board, kanban-cards group */
html[data-design-mode="editorial"] .kanban-card,
html[data-design-mode="editorial"] [data-kanban-card],
html[data-design-mode="editorial"] .wb-card,
html[data-design-mode="editorial"] .stage-card {
  background: var(--surface-1) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 2px !important;
  box-shadow: 0 1px 2px rgba(10,10,10,0.04) !important;
  color: var(--ink-strong) !important;
}
html[data-design-mode="editorial"] .kanban-column,
html[data-design-mode="editorial"] .wb-column,
html[data-design-mode="editorial"] .stage-column {
  background: var(--surface-0) !important;
  border-radius: 2px !important;
}

/* ── 23. UNIFIED HEALTH/RESULTS BADGE SHAPE (both modes) ────────────────
   The audit found 7 distinct render contexts — score-badge, health-badge,
   results-badge, health-mini, results-mini, score-dot, dm-health-badge —
   all with different sizes (10/11/12px), padding, and border-radius
   (4px/8px/9999px/50%). Force consistency across the site. */
.score-badge, .health-badge, .results-badge,
.health-mini, .results-mini, .score-dot,
.dm-health-badge, .stage-pill, .stage-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 28px !important;
  height: 24px !important;
  padding: 0 8px !important;
  border-radius: var(--r-md, 8px) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
}

/* ── 24. ALL CLIENTS stage pills — contrast in editorial ──────────────
   Yellow-on-cream is barely visible. Boost the bg + add ink-strong
   border so MRR/ASCENDED/TRIAL stage chips read clearly. */
html[data-design-mode="editorial"] body .stage-pill,
html[data-design-mode="editorial"] body .stage-pill.ascended,
html[data-design-mode="editorial"] body .stage-pill.trial,
html[data-design-mode="editorial"] body .stage-pill.mrr {
  background: var(--accent-tint) !important;
  color: var(--ink-strong) !important;
  border: 1px solid var(--accent-border) !important;
  /* Editorial = sharp corners. Base rule uses 9999px (full pill) which
     fights the rest of the editorial system. 2026-05-03 — Ben flagged. */
  border-radius: 2px !important;
}
html[data-design-mode="editorial"] body .stage-pill.ascended {
  background: var(--status-success-bg) !important;
  color: var(--status-success) !important;
  border-color: var(--status-success-border) !important;
}
html[data-design-mode="editorial"] body .stage-pill.trial {
  background: var(--accent-tint) !important;
  color: var(--ink-strong) !important;
  border-color: var(--accent-border) !important;
}

/* ── 25. DETAILED METRICS bars (LTV by niche, CAC by channel,
   Revenue concentration) — bars currently use --accent (yellow) which
   on cream looks like washed-out tape. Force darker accent + add
   visible track behind the fill. */
html[data-design-mode="editorial"] body .dv2-bar-row,
html[data-design-mode="editorial"] body .dm-bar-row {
  background: var(--surface-2) !important;
  border-radius: 2px !important;
}
html[data-design-mode="editorial"] body .dv2-bar-row__fill,
html[data-design-mode="editorial"] body .dm-bar-row__fill {
  background: var(--accent-hover) !important;  /* deeper yellow visible on cream */
  box-shadow: none !important;
}
html[data-design-mode="editorial"] body .dv2-bar-row__fill--warning,
html[data-design-mode="editorial"] body .dm-bar-row__fill--warning {
  background: var(--status-warning) !important;
}
html[data-design-mode="editorial"] body .dv2-bar-row__fill--danger,
html[data-design-mode="editorial"] body .dm-bar-row__fill--danger {
  background: var(--status-danger) !important;
}
html[data-design-mode="editorial"] body .dv2-bar-row__fill--success,
html[data-design-mode="editorial"] body .dm-bar-row__fill--success {
  background: var(--status-success) !important;
}

/* ── 26. HEATMAP color depth + Rerun button + pending dots ──────────────
   Ben says heatmap pages feel "washed out" in editorial mode. Specific
   visible issues:
     1. "Rerun" button (.hg-btn-primary) was pale yellow on cream = invisible
     2. Pending/no-rank dots at rgba(10,10,10,0.06) — barely there
     3. Map bg = page bg (both surface-1) — no visual hierarchy
     4. Competitors table business names inheriting ink-muted from row
   Fix all in this block. */

/* Rerun button — dark ink rectangle on cream, like a print stamp */
html[data-design-mode="editorial"] body .hg-btn-primary,
html[data-design-mode="editorial"] body .hg-app a.hg-btn-primary,
html[data-design-mode="editorial"] body .hg-app a.hg-btn-primary:hover {
  background: var(--ink-strong) !important;
  color: var(--surface-0) !important;
  border-color: var(--ink-strong) !important;
}
html[data-design-mode="editorial"] body .hg-btn-primary:hover,
html[data-design-mode="editorial"] body .hg-app a.hg-btn-primary:hover {
  background: var(--ink-body) !important;
  border-color: var(--ink-body) !important;
}

/* Pending pin — boost opacity so empty cells are visibly different
   from the map background. */
html[data-design-mode="editorial"] body .hg-pin.r-pending {
  background: rgba(10, 10, 10, 0.15) !important;
  color: var(--ink-faint) !important;
  border: 1.5px dashed rgba(10, 10, 10, 0.35) !important;
}
html[data-design-mode="editorial"] body .hg-mini-pin.r-pending,
html[data-design-mode="editorial"] body .hg-pack-mini-cell.r-0 {
  background: rgba(10, 10, 10, 0.12) !important;
}

/* Map background — give it its own surface-2 tint so panels POP off it */
html[data-design-mode="editorial"] body .hg-fullbleed-map,
html[data-design-mode="editorial"] body .hwiz-map,
html[data-design-mode="editorial"] body .hg-app {
  --hg-bg-fullbleed: var(--surface-2);
}

/* Floating panels — slightly more opaque + soft border for separation */
html[data-design-mode="editorial"] body .hg-floating {
  background: rgba(255, 255, 255, 0.97) !important;
  border-color: var(--border-standard) !important;
}

/* Competitors table — force row + cell color inheritance */
html[data-design-mode="editorial"] body .hg-comp-table tbody,
html[data-design-mode="editorial"] body .hg-comp-table tbody tr {
  color: var(--ink-strong) !important;
}
html[data-design-mode="editorial"] body .hg-comp-table tbody td {
  color: var(--ink-strong) !important;
}
html[data-design-mode="editorial"] body .hg-comp-table tbody td:nth-child(2) a,
html[data-design-mode="editorial"] body .hg-comp-table tbody td:nth-child(2) {
  color: var(--ink-strong) !important;
  font-weight: 500 !important;
}

/* Legend note labels — ink-strong instead of ink-muted for legibility */
html[data-design-mode="editorial"] body .hg-legend-note,
html[data-design-mode="editorial"] body .hg-uppercase-label {
  color: var(--ink-strong) !important;
}

/* Scan card "electrician" keyword — extra-strong override + path-cover */
html[data-design-mode="editorial"] body .hg-scan-keyword-line,
html[data-design-mode="editorial"] body .hg-scan-card .hg-scan-keyword-line,
html[data-design-mode="editorial"] body .hg-app .hg-scan-keyword-line {
  color: var(--ink-strong) !important;
  font-weight: 500 !important;
}

/* Scan name (the H. Irwin Electrical Adelaide Electrician title) */
html[data-design-mode="editorial"] body .hg-scan-name {
  color: var(--ink-strong) !important;
  font-weight: 500 !important;
}

/* Heatmap KPI tile values — top right (AVG RANK 3.2 / TOP 3 15% etc) */
html[data-design-mode="editorial"] body .hg-bigstat-value,
html[data-design-mode="editorial"] body .hg-kpi-value {
  color: var(--ink-strong) !important;
}
html[data-design-mode="editorial"] body .hg-bigstat-label,
html[data-design-mode="editorial"] body .hg-kpi-label {
  color: var(--ink-muted) !important;
}

/* ── 27. Search dropdown shadow — reduce so any z-index ambient
   light doesn't read as "ghost search bar above the topbar". */
html body #globalSearchResults {
  box-shadow: 0 4px 12px rgba(10, 10, 10, 0.10) !important;
}

/* ── 28. ACTIVITIES HUB flatten (rounded -> 2px in editorial) ──────────
   Page has rounded radii everywhere (10/12/14/16px) for a Nexus-soft
   feel. Editorial wants flat 2px corners across the board. */
html[data-design-mode="editorial"] body .ah-sidebar-search input,
html[data-design-mode="editorial"] body .ah-sidebar-item,
html[data-design-mode="editorial"] body .ah-sidebar-item .ah-count,
html[data-design-mode="editorial"] body .comm-detail audio,
html[data-design-mode="editorial"] body .comm-item,
html[data-design-mode="editorial"] body .comm-badge,
html[data-design-mode="editorial"] body .bulk-bar,
html[data-design-mode="editorial"] body .comms-channels,
html[data-design-mode="editorial"] body .comms-channel-tab,
html[data-design-mode="editorial"] body .comms-channel-tab .count,
html[data-design-mode="editorial"] body .comm-action-item,
html[data-design-mode="editorial"] body .ah-rank-row,
html[data-design-mode="editorial"] body .sent-bar-track,
html[data-design-mode="editorial"] body .sent-bar-fill {
  border-radius: 2px !important;
}

/* Activities text contrast — active channel tab + sidebar item active */
html[data-design-mode="editorial"] body .comms-channel-tab.active {
  background: var(--accent-tint) !important;
  color: var(--ink-strong) !important;
  border: 1px solid var(--accent-border) !important;
}
html[data-design-mode="editorial"] body .ah-sidebar-item.active {
  background: var(--accent-tint) !important;
  color: var(--ink-strong) !important;
}
html[data-design-mode="editorial"] body .ah-sidebar-item .ah-count {
  background: var(--surface-2) !important;
  color: var(--ink-muted) !important;
}

/* ── 29. YELLOW-ON-YELLOW PATTERN FIX (editorial only) ──────────────────
   Across the codebase, "selected/active chip" styling typically renders:
     background: rgba(240,224,80,0.12)   (yellow tint)
     color:      var(--accent)            (yellow text)
     border:     var(--accent)            (yellow border)
   This works on dark Nexus (yellow-on-dark = readable). On editorial
   cream, all 3 layers are yellow → invisible.

   FIX PATTERN: solid accent background + accent-ink dark text. Like a
   filled button. Affects every selected-chip / active-tag pattern. */

html[data-design-mode="editorial"] body .cb-tag,
html[data-design-mode="editorial"] body .cb-service-tag,
html[data-design-mode="editorial"] body .cm-tag,
html[data-design-mode="editorial"] body .gbp-ap-tone.sel,
html[data-design-mode="editorial"] body .gbp-ap-topic.sel,
html[data-design-mode="editorial"] body .gbp-ap-cad.sel,
html[data-design-mode="editorial"] body .gbp-chip.is-active,
html[data-design-mode="editorial"] body .gbp-chip.active,
html[data-design-mode="editorial"] body button.is-selected,
html[data-design-mode="editorial"] body .chip.is-selected {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  border-color: var(--accent-hover) !important;
}
html[data-design-mode="editorial"] body .cb-tag *,
html[data-design-mode="editorial"] body .cb-service-tag *,
html[data-design-mode="editorial"] body .gbp-ap-tone.sel *,
html[data-design-mode="editorial"] body .gbp-ap-topic.sel *,
html[data-design-mode="editorial"] body .gbp-ap-cad.sel * {
  color: var(--accent-ink) !important;
}

/* Inline JS-rendered chips with the rgba(240,224,80,0.12)+yellow-text
   pattern that earlier batch scripts didn't catch. Force any element
   with inline style="...background:rgba(240,224,80,0.12)..." or
   "...background:rgba(240,224,80,0.08)..." to use solid accent in
   editorial. */
html[data-design-mode="editorial"] body [style*="rgba(240,224,80,0.08)"],
html[data-design-mode="editorial"] body [style*="rgba(240,224,80,0.12)"],
html[data-design-mode="editorial"] body [style*="rgba(240, 224, 80, 0.08)"],
html[data-design-mode="editorial"] body [style*="rgba(240, 224, 80, 0.12)"] {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
}

/* Removable [×] buttons inside accent-filled chips need to stay readable */
html[data-design-mode="editorial"] body .cb-tag .cb-tag-remove,
html[data-design-mode="editorial"] body .cb-tag-remove {
  color: var(--accent-ink) !important;
  opacity: 0.65 !important;
}
html[data-design-mode="editorial"] body .cb-tag .cb-tag-remove:hover,
html[data-design-mode="editorial"] body .cb-tag-remove:hover {
  opacity: 1 !important;
  color: var(--accent-ink) !important;
}

/* ── 30. HEAT GRID — chips, pack rows, pin inspector ─────────────────────
   Source rules in heatgrid.css use literal yellow/orange/red rgba() values
   for the "QUICK SCAN", "PARTIAL" pills + the .hg-pack-row "is-us" tint
   + the right-side .hg-pin-inspector slide-over panel which hardcodes
   rgba(12,14,18,0.96). All three patterns are unreadable on cream:
     - yellow-tint bg + yellow text → invisible
     - dark inspector bg → defeats editorial mode entirely
   This block paper-flips them in editorial only; Nexus is untouched. */

/* QUICK SCAN pill — solid accent fill */
html[data-design-mode="editorial"] body .hg-chip-yellow {
  background: var(--accent) !important;
  border-color: var(--accent-hover) !important;
  color: var(--accent-ink) !important;
  font-weight: 600 !important;
}
/* PARTIAL pill — readable orange on cream */
html[data-design-mode="editorial"] body .hg-chip-orange {
  background: rgba(180, 90, 10, 0.12) !important;
  border-color: rgba(180, 90, 10, 0.45) !important;
  color: #b45a0a !important;
  font-weight: 600 !important;
}
html[data-design-mode="editorial"] body .hg-chip-green {
  background: rgba(20, 120, 70, 0.10) !important;
  border-color: rgba(20, 120, 70, 0.45) !important;
  color: #146540 !important;
  font-weight: 600 !important;
}
html[data-design-mode="editorial"] body .hg-chip-red {
  background: rgba(170, 30, 30, 0.10) !important;
  border-color: rgba(170, 30, 30, 0.40) !important;
  color: #a01e1e !important;
  font-weight: 600 !important;
}

/* "electrician" keyword in scan list — bump weight + size for readability.
   Override at line ~683 already sets ink-strong, but it stays visually
   thin on cream because it's mono 12px. Bumped to 13px / 600. */
html[data-design-mode="editorial"] body .hg-app .hg-scan-keyword-line {
  color: var(--ink-strong) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.01em !important;
}

/* PACK ROWS in pin inspector — the "is-us" yellow-on-yellow row + base row */
html[data-design-mode="editorial"] body .hg-pack-row {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}
html[data-design-mode="editorial"] body .hg-pack-row:hover {
  background: rgba(244, 225, 74, 0.10) !important;
  border-color: rgba(244, 225, 74, 0.45) !important;
}
html[data-design-mode="editorial"] body .hg-pack-row.is-us {
  background: var(--accent) !important;
  border-color: var(--accent-hover) !important;
}
html[data-design-mode="editorial"] body .hg-pack-row.is-us .hg-pack-rank,
html[data-design-mode="editorial"] body .hg-pack-row.is-us .hg-pack-name,
html[data-design-mode="editorial"] body .hg-pack-row.is-us .hg-pack-meta,
html[data-design-mode="editorial"] body .hg-pack-row.is-us .hg-pack-delta,
html[data-design-mode="editorial"] body .hg-pack-row.is-us .hg-pack-delta.bad,
html[data-design-mode="editorial"] body .hg-pack-row.is-us .hg-pack-delta.good,
html[data-design-mode="editorial"] body .hg-pack-row.is-us .hg-pack-delta.neutral {
  color: var(--accent-ink) !important;
}
html[data-design-mode="editorial"] body .hg-pack-row-actions {
  border-top-color: rgba(0, 0, 0, 0.08) !important;
}
html[data-design-mode="editorial"] body .hg-pack-action-btn {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: var(--ink-body) !important;
}
html[data-design-mode="editorial"] body .hg-pack-action-btn:hover {
  background: rgba(244, 225, 74, 0.12) !important;
  border-color: var(--accent) !important;
  color: var(--accent-ink) !important;
}
html[data-design-mode="editorial"] body .hg-pack-divider {
  border-top-color: rgba(0, 0, 0, 0.10) !important;
  color: var(--ink-faint) !important;
}
html[data-design-mode="editorial"] body .hg-pack-divider span {
  background: var(--surface-1) !important;
}

/* PIN INSPECTOR slide-over panel — full paper flip */
html[data-design-mode="editorial"] body .hg-pin-inspector {
  background: rgba(255, 255, 255, 0.97) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
  border-left: 1px solid rgba(0, 0, 0, 0.10) !important;
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.08) !important;
  color: var(--ink-strong) !important;
}
html[data-design-mode="editorial"] body .hg-inspector-headline,
html[data-design-mode="editorial"] body .hg-inspector-sub,
html[data-design-mode="editorial"] body .hg-inspector-section,
html[data-design-mode="editorial"] body .hg-inspector-section .hg-uppercase-label,
html[data-design-mode="editorial"] body .hg-section-head .hg-mono {
  color: inherit !important;
}
html[data-design-mode="editorial"] body .hg-inspector-section {
  border-top-color: rgba(0, 0, 0, 0.08) !important;
}
html[data-design-mode="editorial"] body .hg-close-btn {
  background: rgba(0, 0, 0, 0.04) !important;
  color: var(--ink-body) !important;
}
html[data-design-mode="editorial"] body .hg-close-btn:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  color: var(--ink-strong) !important;
}

/* PIN MARKERS on map — the deep maroons (#7f1d1d / #991b1b / #dc2626) and
   ultra-dark green (#16a34a) read as oppressive blocks against cream.
   Lift them to mid-saturation values that still rank-grade visually but
   don't look like ink stains. Top tier (1) keeps strong saturation; the
   off-chart bands are softened so the map feels less heavy. */
html[data-design-mode="editorial"] body .hg-pin {
  border-color: rgba(0, 0, 0, 0.18) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.6) inset !important;
}
html[data-design-mode="editorial"] body .hg-pin.r-1   { background: #15803d !important; }
html[data-design-mode="editorial"] body .hg-pin.r-2   { background: #16a34a !important; }
html[data-design-mode="editorial"] body .hg-pin.r-3   { background: #22c55e !important; color: #0a2818 !important; }
html[data-design-mode="editorial"] body .hg-pin.r-4,
html[data-design-mode="editorial"] body .hg-pin.r-5   { background: #84cc16 !important; color: #1c2a05 !important; }
html[data-design-mode="editorial"] body .hg-pin.r-6,
html[data-design-mode="editorial"] body .hg-pin.r-7   { background: #eab308 !important; color: #2a1f00 !important; }
html[data-design-mode="editorial"] body .hg-pin.r-8,
html[data-design-mode="editorial"] body .hg-pin.r-9,
html[data-design-mode="editorial"] body .hg-pin.r-10  { background: #f97316 !important; color: #fff !important; }
html[data-design-mode="editorial"] body .hg-pin.r-11,
html[data-design-mode="editorial"] body .hg-pin.r-12,
html[data-design-mode="editorial"] body .hg-pin.r-13  { background: #ea580c !important; color: #fff !important; }
html[data-design-mode="editorial"] body .hg-pin.r-14,
html[data-design-mode="editorial"] body .hg-pin.r-15,
html[data-design-mode="editorial"] body .hg-pin.r-16,
html[data-design-mode="editorial"] body .hg-pin.r-17  { background: #dc2626 !important; color: #fff !important; }
html[data-design-mode="editorial"] body .hg-pin.r-18,
html[data-design-mode="editorial"] body .hg-pin.r-19,
html[data-design-mode="editorial"] body .hg-pin.r-20  { background: #b91c1c !important; color: #fff !important; }
html[data-design-mode="editorial"] body .hg-pin.r-21plus { background: #991b1b !important; color: #fff !important; }
html[data-design-mode="editorial"] body .hg-pin.r-pending {
  background: rgba(0, 0, 0, 0.06) !important;
  border: 1.5px dashed rgba(0, 0, 0, 0.20) !important;
  color: rgba(0, 0, 0, 0.40) !important;
  box-shadow: none !important;
}
html[data-design-mode="editorial"] body .hg-pin.is-target {
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.18) !important;
}

/* Floating overlays on the scan map (top-left scan card + AVG RANK pill) */
html[data-design-mode="editorial"] body .hg-floating {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(0, 0, 0, 0.10) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.08) !important;
  color: var(--ink-strong) !important;
}

/* ── 31. PIN INSPECTOR — kill the dark band that survived Pass 30 ─────────
   Pass 30 paper-flipped .hg-pin-inspector but Ben's screenshot still showed
   a dark band at the top of the slide-over (the .hg-inspector-head area).
   Two suspects: (a) backdrop-filter: blur(28px) was sampling a dark layer
   and tinting the panel even with rgba(255,255,255,0.97); (b) some inner
   element painting its own dark bg. This pass goes scorched-earth: solid
   white background, kill backdrop-filter, force every child's background
   to transparent so the panel cannot be dark anywhere. */
html[data-design-mode="editorial"] .hg-pin-inspector,
html[data-design-mode="editorial"] body .hg-pin-inspector,
html[data-design-mode="editorial"] body aside.hg-pin-inspector,
html[data-design-mode="editorial"] body .hg-app .hg-pin-inspector {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-left: 1px solid rgba(0, 0, 0, 0.10) !important;
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.08) !important;
  color: var(--ink-strong) !important;
}
html[data-design-mode="editorial"] body .hg-pin-inspector .hg-inspector-head,
html[data-design-mode="editorial"] body .hg-pin-inspector .hg-inspector-title,
html[data-design-mode="editorial"] body .hg-pin-inspector .hg-inspector-headline,
html[data-design-mode="editorial"] body .hg-pin-inspector .hg-inspector-sub,
html[data-design-mode="editorial"] body .hg-pin-inspector .hg-inspector-section,
html[data-design-mode="editorial"] body .hg-pin-inspector #pinInspectorBody {
  background: transparent !important;
  color: var(--ink-strong) !important;
}
html[data-design-mode="editorial"] body .hg-pin-inspector .hg-inspector-sub {
  color: var(--ink-muted) !important;
}
html[data-design-mode="editorial"] body .hg-pin-inspector .hg-uppercase-label {
  color: var(--ink-muted) !important;
}

/* ── 32. Competitor category chip "electrician" yellow-on-yellow ─────────
   `.hg-cat-chip.is-primary` is rendered as the primary-category chip
   under each competitor row (Humphreys Electrical → "Electrician") and
   uses rgba(244,208,58,0.14) tint + var(--hg-accent) text — invisible
   on cream. Solid accent fill with dark text matches Pass 29 pattern. */
html[data-design-mode="editorial"] body .hg-cat-chip.is-primary {
  background: var(--accent) !important;
  border-color: var(--accent-hover) !important;
  color: var(--accent-ink) !important;
  font-weight: 600 !important;
}
html[data-design-mode="editorial"] body .hg-cat-chip.is-additional {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: var(--ink-body) !important;
}

/* ── 33. SOFTER MAP PINS in editorial — Ben said "almost too dark for the
   specific page". Pass 30 lifted them once; this pass dials saturation
   down further and adds a subtle paper-ring so the pins read as labels
   on cream rather than ink stains. Top-pack greens warm slightly (so
   they don't look fluorescent on cream); bottom maroons lift a notch. */
html[data-design-mode="editorial"] body .hg-pin {
  border-color: rgba(0, 0, 0, 0.14) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10), 0 0 0 2px rgba(255, 255, 255, 0.85) inset !important;
}
html[data-design-mode="editorial"] body .hg-pin.r-1   { background: #16a34a !important; color: #fff !important; }
html[data-design-mode="editorial"] body .hg-pin.r-2   { background: #22c55e !important; color: #0a2818 !important; }
html[data-design-mode="editorial"] body .hg-pin.r-3   { background: #4ade80 !important; color: #0a2818 !important; }
html[data-design-mode="editorial"] body .hg-pin.r-4,
html[data-design-mode="editorial"] body .hg-pin.r-5   { background: #a3e635 !important; color: #1c2a05 !important; }
html[data-design-mode="editorial"] body .hg-pin.r-6,
html[data-design-mode="editorial"] body .hg-pin.r-7   { background: #facc15 !important; color: #2a1f00 !important; }
html[data-design-mode="editorial"] body .hg-pin.r-8,
html[data-design-mode="editorial"] body .hg-pin.r-9,
html[data-design-mode="editorial"] body .hg-pin.r-10  { background: #fb923c !important; color: #fff !important; }
html[data-design-mode="editorial"] body .hg-pin.r-11,
html[data-design-mode="editorial"] body .hg-pin.r-12,
html[data-design-mode="editorial"] body .hg-pin.r-13  { background: #f97316 !important; color: #fff !important; }
html[data-design-mode="editorial"] body .hg-pin.r-14,
html[data-design-mode="editorial"] body .hg-pin.r-15,
html[data-design-mode="editorial"] body .hg-pin.r-16,
html[data-design-mode="editorial"] body .hg-pin.r-17  { background: #ef4444 !important; color: #fff !important; }
html[data-design-mode="editorial"] body .hg-pin.r-18,
html[data-design-mode="editorial"] body .hg-pin.r-19,
html[data-design-mode="editorial"] body .hg-pin.r-20  { background: #dc2626 !important; color: #fff !important; }
html[data-design-mode="editorial"] body .hg-pin.r-21plus { background: #b91c1c !important; color: #fff !important; }

/* ── 34. SYSTEMIC YELLOW-BUTTON OVERRIDE ─────────────────────────────────
   Ben's repeated complaint: "rounded yellow fill and yellow text boxes…
   look fine on dark but not on editorial. Make them solid yellow with
   black text and apply this everywhere."

   The pattern across the codebase (inbox task modal, client-brain, GBP
   panel, content-map, account-managers, dashboards) is an inline style:
       background: var(--accent-ghost);   /* 4% yellow tint */
       color:      var(--accent);          /* full yellow text */
       border:     1px solid var(--accent-tint);  /* 8% yellow border */
   On dark Nexus that's "muted accent button"; on cream it's "yellow on
   yellow" = invisible.

   This block uses inline-style attribute selectors to catch ALL of them
   in editorial mode and flip to solid accent + accent-ink. Both
   "var(--accent-ghost)" and "var(--accent-tint)" backgrounds are
   captured; both with-space and no-space variants of the inline style
   are included since some templates write `background:var(--accent-ghost)`
   and others write `background: var(--accent-ghost)`. */
html[data-design-mode="editorial"] body [style*="background: var(--accent-ghost)"],
html[data-design-mode="editorial"] body [style*="background:var(--accent-ghost)"],
html[data-design-mode="editorial"] body [style*="background: var(--accent-tint)"],
html[data-design-mode="editorial"] body [style*="background:var(--accent-tint)"] {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  border-color: var(--accent-hover) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
/* Anchor children (e.g. "View All Client Tasks" has an <i> + text inside) */
html[data-design-mode="editorial"] body [style*="background: var(--accent-ghost)"] *,
html[data-design-mode="editorial"] body [style*="background:var(--accent-ghost)"] *,
html[data-design-mode="editorial"] body [style*="background: var(--accent-tint)"] *,
html[data-design-mode="editorial"] body [style*="background:var(--accent-tint)"] * {
  color: var(--accent-ink) !important;
}

/* Same pattern but where the button uses var(--accent-bg) or
   rgba(240,224,80,*) directly (a few one-offs scattered around). */
html[data-design-mode="editorial"] body button[style*="color: var(--accent)"][style*="rgba(240,224,80"],
html[data-design-mode="editorial"] body a[style*="color: var(--accent)"][style*="rgba(240,224,80"] {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  border-color: var(--accent-hover) !important;
  font-weight: 600 !important;
}

/* ── 35. INBOX TASK MODAL polish for editorial ────────────────────────────
   Pass 34's systemic rule covers the 3 problem buttons (Save description,
   Send, View All Client Tasks) automatically. This block fixes the
   surrounding chrome: the assignee chips, status/priority/client/due-date
   <select> fields, and the modal-backdrop dim layer. The selects had
   no native arrow on cream because filter:invert was lifting the dark-
   mode arrow off the page. */
html[data-design-mode="editorial"] body select[onchange*="inboxUpdateField"] {
  appearance: auto !important;
  -webkit-appearance: auto !important;
  background: var(--surface-1) !important;
  color: var(--ink-strong) !important;
  border: 1px solid var(--border-standard) !important;
}
html[data-design-mode="editorial"] body #inboxAssigneePicker {
  appearance: auto !important;
  -webkit-appearance: auto !important;
}

/* ── 36. WEEKLY LEDGER editorial polish ──────────────────────────────────
   The base rules in status.html now size .score-select and .stage-pill
   identically (26px pill height, 9999px radius). In editorial we just
   need to:
     - Re-tint the SVG calendar icon on the week picker so it shows up
       on cream (was rgba grey designed for dark surfaces).
     - Force color-scheme: light on the week picker so the OS calendar
       overlay opens light, not dark, in editorial mode.
     - Make sure the score-select solid-color backgrounds carry through
       (the 0-state already has its editorial override; values 1..4 use
       the source colour rules — Pass 36 of editorial-overlay.css scoped
       the flatten to .score-val-0). Belt-and-braces: explicitly preserve
       the colour fills here so future overlay edits can't accidentally
       re-flatten them.
     - Bump the toolbar z-index to a high value so the AM dropdown and
       Jump-To dropdown overlay the table cleanly. */
html[data-design-mode="editorial"] body .status-toolbar {
  z-index: 50 !important;
}
html[data-design-mode="editorial"] body .status-toolbar .week-picker {
  background-color: var(--surface-0) !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none' stroke='%235d5d5a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='3' width='12' height='11' rx='1.5'/><path d='M2 6h12M5 1v3M11 1v3'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: 10px center !important;
  color-scheme: light !important;
  color: var(--ink-strong) !important;
}
html[data-design-mode="editorial"] body .status-toolbar .week-picker::-webkit-datetime-edit {
  color: var(--ink-strong) !important;
}
/* Score-select colour fills — explicit re-paint (the source rules in
   status.html already set these; this block is defensive belt-and-
   braces against future editorial-overlay flattening). */
html[data-design-mode="editorial"] body .score-select.score-val-4 {
  background-color: #16a34a !important; color: #ffffff !important;
  border-color: #15803d !important;
}
html[data-design-mode="editorial"] body .score-select.score-val-3 {
  background-color: #f0e050 !important; color: #1a1700 !important;
  border-color: #d4c43d !important;
}
html[data-design-mode="editorial"] body .score-select.score-val-2 {
  background-color: #f59e0b !important; color: #1f1300 !important;
  border-color: #d97706 !important;
}
html[data-design-mode="editorial"] body .score-select.score-val-1 {
  background-color: #dc2626 !important; color: #ffffff !important;
  border-color: #b91c1c !important;
}
/* Stage pill on cream: lift the saturation a notch so the chip reads.
   Source rules used 12% tints which look fine on dark but get lost on
   paper. */
html[data-design-mode="editorial"] body .stage-pill.trial {
  background: rgba(217, 196, 70, 0.20) !important;
  color: #6f6005 !important;
  border-color: rgba(217, 196, 70, 0.55) !important;
}
html[data-design-mode="editorial"] body .stage-pill.ascended {
  background: rgba(20, 120, 70, 0.14) !important;
  color: #146540 !important;
  border-color: rgba(20, 120, 70, 0.50) !important;
}
html[data-design-mode="editorial"] body .stage-pill.mrr {
  background: rgba(99, 102, 241, 0.14) !important;
  color: #4f46e5 !important;
  border-color: rgba(99, 102, 241, 0.50) !important;
}
html[data-design-mode="editorial"] body .stage-pill.churned,
html[data-design-mode="editorial"] body .stage-pill.failed-trial {
  background: rgba(170, 30, 30, 0.12) !important;
  color: #a01e1e !important;
  border-color: rgba(170, 30, 30, 0.45) !important;
}
html[data-design-mode="editorial"] body .stage-pill.paused {
  background: rgba(0, 0, 0, 0.04) !important;
  color: var(--ink-muted) !important;
  border-color: rgba(0, 0, 0, 0.10) !important;
}

/* ── 26. Stage pill differentiation (AM detail + clients table)
   Earlier blocks left MRR/Ascended too close in hue on cream. Force
   distinct families: trial=amber, mrr=indigo, ascended=violet (instead
   of green which read as "success" elsewhere), churned=stone-red. */
html[data-design-mode="editorial"] body .stage-pill.trial {
  background: #fcefb8 !important;
  color: #6b4d05 !important;
  border-color: #c89a14 !important;
}
html[data-design-mode="editorial"] body .stage-pill.mrr {
  background: #dde6ff !important;
  color: #2a3a99 !important;
  border-color: #4756c4 !important;
}
html[data-design-mode="editorial"] body .stage-pill.ascended {
  background: #ede4f5 !important;
  color: #5a2e8a !important;
  border-color: #7a4cb8 !important;
}
html[data-design-mode="editorial"] body .stage-pill.churned,
html[data-design-mode="editorial"] body .stage-pill.failed-trial {
  background: #fbd9d4 !important;
  color: #8a1d10 !important;
  border-color: #b42f1f !important;
}
html[data-design-mode="editorial"] body .stage-pill.paused {
  background: #ece8da !important;
  color: #4d4a40 !important;
  border-color: #aaa494 !important;
}

/* ── 27. Stage badges (AM detail) — same hue families as the pills.
   The AM detail page uses .stage-badge alongside .stage-pill; keep
   both visually identical so a row's pill and the legend badge match. */
html[data-design-mode="editorial"] body .stage-badge.trial {
  background: #fcefb8 !important;
  color: #6b4d05 !important;
  border-color: #c89a14 !important;
}
html[data-design-mode="editorial"] body .stage-badge.mrr {
  background: #dde6ff !important;
  color: #2a3a99 !important;
  border-color: #4756c4 !important;
}
html[data-design-mode="editorial"] body .stage-badge.ascended {
  background: #ede4f5 !important;
  color: #5a2e8a !important;
  border-color: #7a4cb8 !important;
}
html[data-design-mode="editorial"] body .stage-badge.churned,
html[data-design-mode="editorial"] body .stage-badge.failed-trial {
  background: #fbd9d4 !important;
  color: #8a1d10 !important;
  border-color: #b42f1f !important;
}

/* Stage-bar fills inside the trial→mrr progress strip on each AM client
   row. Token-driven so dark-mode falls back to the inlined values. */
html[data-design-mode="editorial"] body .stage-fill.trial    { background: #c89a14 !important; }
html[data-design-mode="editorial"] body .stage-fill.ascended { background: #7a4cb8 !important; }
html[data-design-mode="editorial"] body .stage-fill.mrr      { background: #4756c4 !important; }

/* ── 28. Token remap: --ink-faint
   The dark-mode value (rgba(255,255,255,0.32)) renders white-on-cream
   for any element using `color: var(--ink-faint)` — invisible on the
   editorial background. Remap to a stone tone with sufficient AA contrast. */
html[data-design-mode="editorial"] {
  --ink-faint: #6b6660 !important;
  /* Stage colour tokens consumed by the dashboard pipeline chart and
     AM detail stage-pill/stage-fill rules. Editorial values match
     the cream-friendly fills used in §26 and §27. */
  --stage-trial-fg: #c89a14 !important;
  --stage-ascended-fg: #7a4cb8 !important;
  --stage-mrr-fg: #4756c4 !important;
}

/* ── 31. Client Brain modals + Command Centre — sharp corners in editorial
   Inline border-radius declarations (6/8/10px) on the Command Centre tile
   buttons, task-history panel, and every Client Brain modal bypass the
   editorial system because inline styles outrank stylesheet rules
   without !important. Flatten every button/input/select + any inline
   `border-radius:` declaration inside these scopes to the canonical 2px.
   The selector uses `border-radius:` (with colon) so longhand corner
   properties — border-top-left-radius etc. — don't get accidentally
   flattened.
   Scopes:
     #cmCommands       — Command Centre tab (CC tile buttons + task panel)
     #uilModal         — Update Internal Links modal (portal to body)
     .nx-modal         — Generic Nexus modal card (custom dialogs)
     .nx-modal-overlay — Backdrop + any inner controls
     .cm-modal-backdrop, .cm-modal-dialog — Client Brain confirm/edit modals
     .cm-edit-modal    — Inline edit modal for client-info fields
   2026-05-03 — Ben flagged on /company/client-brain/<slug>?tab=commands. */
html[data-design-mode="editorial"] #cmCommands button,
html[data-design-mode="editorial"] #cmCommands input,
html[data-design-mode="editorial"] #cmCommands select,
html[data-design-mode="editorial"] #cmCommands [style*="border-radius:"],
html[data-design-mode="editorial"] #uilModal button,
html[data-design-mode="editorial"] #uilModal input,
html[data-design-mode="editorial"] #uilModal select,
html[data-design-mode="editorial"] #uilModal [style*="border-radius:"],
html[data-design-mode="editorial"] .nx-modal button,
html[data-design-mode="editorial"] .nx-modal input,
html[data-design-mode="editorial"] .nx-modal select,
html[data-design-mode="editorial"] .nx-modal [style*="border-radius:"],
html[data-design-mode="editorial"] .nx-modal-overlay button,
html[data-design-mode="editorial"] .nx-modal-overlay input,
html[data-design-mode="editorial"] .nx-modal-overlay select,
html[data-design-mode="editorial"] .nx-modal-overlay [style*="border-radius:"],
html[data-design-mode="editorial"] .cm-modal-backdrop button,
html[data-design-mode="editorial"] .cm-modal-backdrop input,
html[data-design-mode="editorial"] .cm-modal-backdrop select,
html[data-design-mode="editorial"] .cm-modal-backdrop [style*="border-radius:"],
html[data-design-mode="editorial"] .cm-modal-dialog button,
html[data-design-mode="editorial"] .cm-modal-dialog input,
html[data-design-mode="editorial"] .cm-modal-dialog select,
html[data-design-mode="editorial"] .cm-modal-dialog [style*="border-radius:"],
html[data-design-mode="editorial"] .cm-edit-modal button,
html[data-design-mode="editorial"] .cm-edit-modal input,
html[data-design-mode="editorial"] .cm-edit-modal select,
html[data-design-mode="editorial"] .cm-edit-modal [style*="border-radius:"] {
    border-radius: 2px !important;
}

/* Status badge on internal-link target rows — mono small caps, tone per status. */
.cm-il-target-status {
    font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 6px;
    margin-left: 6px;
    border-radius: 2px;
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
}
.cm-il-target-status.status-published { background: var(--up-soft, #e3f2e6); color: var(--up, #1f7a3a); }
.cm-il-target-status.status-approved  { background: var(--accent-soft, #fef9cc); color: var(--ink, #0a0a0a); }
.cm-il-target-status.status-draft     { background: var(--paper-2, #f4f1e8); color: var(--ink-3, #5d5d5a); }
.cm-il-target-status.status-qa_review { background: rgba(228, 204, 0, 0.18); color: #6b4d05; }
.cm-il-target-status.status-qa_failed { background: var(--down-soft, #fbe7e3); color: var(--down, #b42318); }

/* Friendly empty state when the target picker has zero results */
.cm-il-empty {
    padding: 1rem 1.25rem;
    border: 1px dashed var(--rule, #d9d4c4);
    border-radius: 2px;
    color: var(--ink-3, #5d5d5a);
    font-size: 0.85rem;
    line-height: 1.55;
    background: var(--paper-2, #f4f1e8);
}
.cm-il-empty strong { color: var(--ink, #0a0a0a); display: block; margin-bottom: 0.25rem; }
.cm-il-empty a { color: var(--ink, #0a0a0a); text-decoration: underline; }

/* Update Internal Links — collapsible per-page sections.
   Replaces the old "stack every selected page's editor inline forever"
   layout that turned a 30-page selection into 30 stacked editors. Each
   page now collapses into a one-line summary; click to expand. The
   first page auto-opens, plus any page where the user has set an
   override (so picks stay visible without re-opening). 2026-05-03. */
.uil-page {
    margin-bottom: 12px;
    border: 1px solid var(--border-subtle, var(--rule, #ece8da));
    border-radius: 2px;
    overflow: hidden;
    background: var(--surface-0, var(--paper, #fbfaf6));
}
.uil-page[open] { box-shadow: inset 0 0 0 1px var(--accent-soft, rgba(244, 225, 74, 0.18)); }
.uil-page-summary {
    padding: 10px 14px;
    background: var(--surface-1, var(--paper-2, #f4f1e8));
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    color: var(--ink, #0a0a0a);
    list-style: none;
    user-select: none;
    border-bottom: 1px solid transparent;
}
.uil-page-summary::-webkit-details-marker { display: none; }
.uil-page-summary::before {
    content: "▸";
    font-size: 0.7rem;
    color: var(--ink-3, #5d5d5a);
    transition: transform 0.15s ease;
    flex-shrink: 0;
}
.uil-page[open] > .uil-page-summary {
    border-bottom-color: var(--rule, #d9d4c4);
}
.uil-page[open] > .uil-page-summary::before { transform: rotate(90deg); }
.uil-page-title {
    font-weight: 600;
    color: var(--ink, #0a0a0a);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.uil-page-changes {
    font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 2px;
    background: var(--accent-soft, rgba(244, 225, 74, 0.25));
    color: var(--ink, #0a0a0a);
    flex-shrink: 0;
}
.uil-page-meta {
    font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.62rem;
    font-weight: 500;
    color: var(--ink-3, #5d5d5a);
    letter-spacing: 0.04em;
    text-transform: lowercase;
    flex-shrink: 0;
}
.uil-page-refresh {
    background: transparent;
    border: 1px solid var(--rule, #d9d4c4);
    color: var(--ink-3, #5d5d5a);
    border-radius: 2px;
    width: 24px;
    height: 22px;
    cursor: pointer;
    font-size: 0.78rem;
    line-height: 1;
    padding: 0;
    flex-shrink: 0;
}
.uil-page-refresh:hover {
    border-color: var(--ink, #0a0a0a);
    color: var(--ink, #0a0a0a);
}
.uil-page-body {
    padding: 4px 0;
    background: var(--surface-0, var(--paper, #fbfaf6));
}

.uil-link-row {
    padding: 10px 14px;
    border-top: 1px solid var(--rule-soft, var(--border-subtle, #ece8da));
    font-size: 0.74rem;
    color: var(--ink, #0a0a0a);
}
.uil-link-row:first-child { border-top: none; }
.uil-link-row-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.uil-link-anchor { color: var(--ink, #0a0a0a); font-weight: 500; }
.uil-link-field {
    font-family: var(--mono, ui-monospace, monospace);
    font-size: 0.62rem;
    color: var(--ink-3, #5d5d5a);
}
.uil-link-chip {
    font-family: var(--mono, ui-monospace, monospace);
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 1px 7px;
    border: 1px solid currentColor;
    border-radius: 2px;
}
.uil-link-chip.is-edited { color: var(--accent-strong, #b48700); }
.uil-link-chip.is-geo    { color: var(--ink, #0a0a0a); background: var(--accent-soft, rgba(244, 225, 74, 0.25)); border-color: transparent; }
.uil-link-current {
    color: var(--ink-3, #5d5d5a);
    margin-bottom: 6px;
    font-size: 0.68rem;
    word-break: break-all;
}
.uil-link-select {
    width: 100%;
    padding: 7px 10px;
    background: var(--surface-0, var(--paper, #fbfaf6));
    border: 1px solid var(--rule, #d9d4c4);
    border-radius: 2px;
    color: var(--ink, #0a0a0a);
    font-size: 0.74rem;
    font-family: inherit;
    outline: none;
}
.uil-link-select.has-change {
    border-color: var(--accent, #f4e14a);
    box-shadow: 0 0 0 2px var(--accent-soft, rgba(244, 225, 74, 0.18));
}
.uil-link-select:focus {
    border-color: var(--ink, #0a0a0a);
}

/* ── 32. Per-client Reports modal — editorial chrome + sharp corners
   The "+ Create report" / progress modals on the Reports tab were
   rendered as inline-styled divs with border-radius:14px / 6-8px and
   no serif title — visually inconsistent with the canonical wizard
   pattern (`.acw-*`). These classes mirror the wizard chrome (paper
   surface, 2px corners, serif Newsreader title, mono eyebrow, sticky
   header + footer) and scale to 880px so the two-column section grid
   breathes. The selectors below also flatten any leftover inline
   `border-radius:` inside the dialog when editorial mode is active.
   2026-05-03 — Ben flagged: reports modal still looked old / cramped. */
.cm-rpt-overlay {
    position: fixed;
    inset: 0;
    /* Above the topbar reinforcement at z:1100 (§14) and the sidebar
       at z:1050. Matches the existing convention used by `.nx-modal-overlay`
       (9999), `.cm-modal-backdrop` (10000), and `#uilModal` (10100). */
    z-index: 9999;
    background: rgba(10, 10, 10, 0.55);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 32px 20px;
    overflow-y: auto;
    animation: cmRptOverlayIn 0.14s ease-out;
}
@keyframes cmRptOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.cm-rpt-dialog {
    background: var(--surface-0, var(--paper, #fbfaf6));
    border: 1px solid var(--border-standard, var(--rule, #d9d4c4));
    border-radius: 2px;
    box-shadow: 0 30px 80px rgba(10, 10, 10, 0.35);
    width: 100%;
    max-width: 880px;
    margin: auto;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 64px);
    overflow: hidden;
    animation: cmRptDialogIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.cm-rpt-dialog--narrow { max-width: 620px; }
@keyframes cmRptDialogIn {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .cm-rpt-overlay,
    .cm-rpt-dialog { animation: none; }
}
.cm-rpt-header {
    padding: 22px 28px 18px;
    border-bottom: 1px solid var(--rule, #d9d4c4);
    background: var(--surface-1, var(--paper-2, #f7f3e9));
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-shrink: 0;
}
.cm-rpt-header-titles { min-width: 0; flex: 1; }
.cm-rpt-eyebrow {
    font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3, #5d5d5a);
    margin: 0 0 6px;
}
.cm-rpt-title {
    font-family: var(--serif, "Newsreader", Georgia, serif);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--ink, #0a0a0a);
    margin: 0;
    line-height: 1.15;
    letter-spacing: -0.01em;
}
.cm-rpt-close {
    background: transparent;
    border: 1px solid var(--rule, #d9d4c4);
    color: var(--ink, #0a0a0a);
    width: 30px;
    height: 30px;
    border-radius: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    flex-shrink: 0;
    padding: 0;
}
.cm-rpt-close:hover { border-color: var(--ink, #0a0a0a); }
.cm-rpt-body {
    padding: 22px 28px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--surface-0, var(--paper, #fbfaf6));
}
.cm-rpt-footer {
    padding: 14px 28px;
    border-top: 1px solid var(--rule, #d9d4c4);
    background: var(--surface-1, var(--paper-2, #f7f3e9));
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* Sharp-corner sweep for the reports modal in editorial mode —
   covers every inline border-radius inside the dialog. */
html[data-design-mode="editorial"] .cm-rpt-dialog button,
html[data-design-mode="editorial"] .cm-rpt-dialog input,
html[data-design-mode="editorial"] .cm-rpt-dialog select,
html[data-design-mode="editorial"] .cm-rpt-dialog textarea,
html[data-design-mode="editorial"] .cm-rpt-dialog [style*="border-radius:"] {
    border-radius: 2px !important;
}


/* ════════════════════════════════════════════════════════════════════
   EDITORIAL: global popup + modal sweep (2026-06-01)
   ════════════════════════════════════════════════════════════════════
   Ben: "clicking on certain pop-ups is still giving me rounded edges and
   rounded boxes. There's still a lack of contrast where I can't see
   things". Per the OPT editorial design language (Newsreader serif
   display, JetBrains Mono labels, paper-cream bg, single yellow accent,
   flat 2px corners), this block forces every popup/modal/popover/toast
   to:
     · 2px corners on outer shell (was 8-20px)
     · Solid ink-strong borders (was light dashed/faint)
     · Paper-cream surface (not the dark Nexus surface tokens)
     · High-contrast body text (ink-body min, not ink-faint)
     · Sticky-corner inner sections also flatten

   Pills + dots are deliberately kept rounded — those are status
   indicators, not containers. Same for the inline-edit dashed-underline
   affordance.
   ════════════════════════════════════════════════════════════════════ */

html[data-design-mode="editorial"] .cm-edit-modal,
html[data-design-mode="editorial"] .cm-edit-modal.cmov-modal,
html[data-design-mode="editorial"] .cm-edit-modal.cmov-modal.cmov-ws-modal,
html[data-design-mode="editorial"] .cm-edit-modal.cmov-modal.cmov-picker-modal,
html[data-design-mode="editorial"] .am-drill-panel,
html[data-design-mode="editorial"] .payments-flag-card,
html[data-design-mode="editorial"] .cmov-popover,
html[data-design-mode="editorial"] .confirm-modal,
html[data-design-mode="editorial"] #cmRptModal .cm-rpt-dialog,
html[data-design-mode="editorial"] .modal-content,
html[data-design-mode="editorial"] .modal-dialog .modal-content,
html[data-design-mode="editorial"] .payments-toast,
html[data-design-mode="editorial"] .imt-lightbox-img,
html[data-design-mode="editorial"] .imt-card,
html[data-design-mode="editorial"] .imt-panel,
html[data-design-mode="editorial"] .cmov-rail-section,
html[data-design-mode="editorial"] .cmov-services,
html[data-design-mode="editorial"] .cmov-team,
html[data-design-mode="editorial"] .cmov-brief,
html[data-design-mode="editorial"] .cmov-grid,
html[data-design-mode="editorial"] .cmov-notes-card,
html[data-design-mode="editorial"] .cmov-header-strip,
html[data-design-mode="editorial"] .dgst-card,
html[data-design-mode="editorial"] .cmw-dropdown-menu,
html[data-design-mode="editorial"] .hg-floating,
html[data-design-mode="editorial"] .am-drill-row {
    border-radius: 2px !important;
}

/* Modals + popovers: ink-strong border (was rule-subtle so the edge
   disappeared on cream backgrounds). Paper-cream surface. */
html[data-design-mode="editorial"] .cm-edit-modal.cmov-modal,
html[data-design-mode="editorial"] .am-drill-panel,
html[data-design-mode="editorial"] .cmov-popover,
html[data-design-mode="editorial"] .confirm-modal,
html[data-design-mode="editorial"] #cmRptModal .cm-rpt-dialog,
html[data-design-mode="editorial"] .modal-content,
html[data-design-mode="editorial"] .payments-toast,
html[data-design-mode="editorial"] .dgst-card,
html[data-design-mode="editorial"] .cm-edit-modal.cmov-modal.cmov-picker-modal {
    background: var(--paper, #fbfaf6) !important;
    border: 1px solid var(--ink, #0a0a0a) !important;
    box-shadow: 0 18px 48px rgba(10, 10, 10, 0.18) !important;
    color: var(--ink, #0a0a0a) !important;
}

/* Body text inside popups — ink-body min so it's actually readable.
   The cream/grey ink-faint was the source of "lack of contrast". */
html[data-design-mode="editorial"] .cm-edit-modal.cmov-modal,
html[data-design-mode="editorial"] .cm-edit-modal.cmov-modal *,
html[data-design-mode="editorial"] .am-drill-panel,
html[data-design-mode="editorial"] .am-drill-panel *,
html[data-design-mode="editorial"] .cmov-popover,
html[data-design-mode="editorial"] .cmov-popover *,
html[data-design-mode="editorial"] .payments-flag-card,
html[data-design-mode="editorial"] .payments-flag-card * {
    color: var(--ink-body, #2a2a2a);
}
html[data-design-mode="editorial"] .cm-edit-modal.cmov-modal .cm-edit-modal__title,
html[data-design-mode="editorial"] .am-drill-title,
html[data-design-mode="editorial"] .cmov-popover-value,
html[data-design-mode="editorial"] .payments-flag-card strong {
    color: var(--ink, #0a0a0a) !important;
    font-weight: 600;
}

/* Inner sections that are children of a flattened modal — flatten too. */
html[data-design-mode="editorial"] .cm-edit-modal.cmov-modal .cmov-modal-rail,
html[data-design-mode="editorial"] .cm-edit-modal.cmov-modal button.cmov-modal-tab,
html[data-design-mode="editorial"] .cm-edit-modal.cmov-modal .cmov-modal-pane,
html[data-design-mode="editorial"] .am-drill-row,
html[data-design-mode="editorial"] .am-drill-pill,
html[data-design-mode="editorial"] .am-drill-stat,
html[data-design-mode="editorial"] .cmov-popover-bar,
html[data-design-mode="editorial"] .cmov-popover-bar-fill,
html[data-design-mode="editorial"] .payments-flag-action,
html[data-design-mode="editorial"] .cmov-picker-search,
html[data-design-mode="editorial"] .cmov-picker-list,
html[data-design-mode="editorial"] .cmov-picker-row,
html[data-design-mode="editorial"] .cmov-ws-notes,
html[data-design-mode="editorial"] .cmov-edit-input,
html[data-design-mode="editorial"] .cm-edit-modal .cm-edit-field input,
html[data-design-mode="editorial"] .cm-edit-modal .cm-edit-field select,
html[data-design-mode="editorial"] .cm-edit-modal .cm-edit-field textarea {
    border-radius: 2px !important;
}

/* Buttons inside popups go flat. Same accent treatment as the rest of
   editorial mode. */
html[data-design-mode="editorial"] .cm-edit-modal.cmov-modal button.cm-modal-btn--cancel,
html[data-design-mode="editorial"] .cm-edit-modal.cmov-modal button.cm-modal-btn--confirm,
html[data-design-mode="editorial"] .am-drill-panel button,
html[data-design-mode="editorial"] .cmov-popover button,
html[data-design-mode="editorial"] .payments-flag-action,
html[data-design-mode="editorial"] .confirm-modal button {
    border-radius: 2px !important;
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 11px;
}

/* Primary-action button in any popup: accent + ink (high-contrast). */
html[data-design-mode="editorial"] .cm-edit-modal.cmov-modal .cm-modal-btn--confirm,
html[data-design-mode="editorial"] .cm-edit-modal.cmov-modal .cmov-ws-save {
    background: var(--accent, #f4e14a) !important;
    color: var(--accent-ink, #0a0a0a) !important;
    border: 1px solid var(--ink, #0a0a0a) !important;
}
html[data-design-mode="editorial"] .cm-edit-modal.cmov-modal .cm-modal-btn--confirm:hover,
html[data-design-mode="editorial"] .cm-edit-modal.cmov-modal .cmov-ws-save:hover {
    background: var(--accent-dk, #e4cc00) !important;
}
html[data-design-mode="editorial"] .cm-edit-modal.cmov-modal .cm-modal-btn--cancel {
    background: transparent !important;
    color: var(--ink, #0a0a0a) !important;
    border: 1px solid var(--ink, #0a0a0a) !important;
}

/* Headers + footers inside multi-pane modals — keep cream backgrounds
   sharp + bordered with ink-strong rule. */
html[data-design-mode="editorial"] .cm-edit-modal.cmov-modal .cm-edit-modal__head,
html[data-design-mode="editorial"] .cm-edit-modal.cmov-modal .cm-edit-modal__foot {
    background: var(--paper-2, #f7f3e9) !important;
    border-color: var(--ink, #0a0a0a) !important;
}

/* Close (×) button — make it visible. Was a faint grey circle on cream. */
html[data-design-mode="editorial"] .cm-edit-modal__close,
html[data-design-mode="editorial"] .imt-lightbox-close,
html[data-design-mode="editorial"] .cmov-popover-close {
    border: 1px solid var(--ink, #0a0a0a) !important;
    color: var(--ink, #0a0a0a) !important;
    background: var(--paper, #fbfaf6) !important;
    border-radius: 2px !important;
}

/* Inline-edit popup input — already used a yellow ring; in editorial
   ensure the ring has high-contrast outer border too. */
html[data-design-mode="editorial"] input.cmov-edit-input {
    background: var(--paper, #fbfaf6) !important;
    color: var(--ink, #0a0a0a) !important;
    border: 1px solid var(--ink, #0a0a0a) !important;
    border-radius: 2px !important;
}

/* Lightbox overlay (Images tab) — keep the dark backdrop, but flatten
   the close button + action bar. */
html[data-design-mode="editorial"] .imt-lightbox-actions button,
html[data-design-mode="editorial"] .imt-lightbox-actions a {
    border-radius: 2px !important;
    font-family: var(--font-mono, "JetBrains Mono", monospace) !important;
}

/* Toasts: flat, high-contrast border so they don't blend into the
   cream page. */
html[data-design-mode="editorial"] .payments-toast,
html[data-design-mode="editorial"] .cm-toast,
html[data-design-mode="editorial"] .am-toast {
    border-radius: 2px !important;
    border: 1px solid var(--ink, #0a0a0a) !important;
    background: var(--paper, #fbfaf6) !important;
    color: var(--ink, #0a0a0a) !important;
}

/* Bootstrap modal default in editorial — cover any page using the
   stock .modal-content (admin templates, error pages, debug). */
html[data-design-mode="editorial"] .modal-content {
    border-radius: 2px !important;
    background: var(--paper, #fbfaf6) !important;
    border: 1px solid var(--ink, #0a0a0a) !important;
    color: var(--ink, #0a0a0a) !important;
}
html[data-design-mode="editorial"] .modal-header,
html[data-design-mode="editorial"] .modal-footer {
    background: var(--paper-2, #f7f3e9) !important;
    border-color: var(--rule, #d9d4c4) !important;
}

/* ════════════════════════════════════════════════════════════════════
   EDITORIAL: kill low-contrast yellow body text (2026-06-01)
   ════════════════════════════════════════════════════════════════════
   Ben: "A lot of this yellow text is still very, very hard to see."
   The Nexus accent yellow (#f0e050/f4e14a) reads great on dark bg but
   on the editorial cream surface it's near-invisible. Yellow stays for
   highlight bars, dot indicators, and small accents — every TEXT
   instance of var(--cm-yellow)/var(--accent) flips to ink-strong here.
   ════════════════════════════════════════════════════════════════════ */
html[data-design-mode="editorial"] .cm-header h1,
html[data-design-mode="editorial"] .cm-header h1 span.cm-client-name,
html[data-design-mode="editorial"] .cm-client-name,
html[data-design-mode="editorial"] .cm-page-title,
html[data-design-mode="editorial"] .am-page-title,
html[data-design-mode="editorial"] h1.cm-title,
html[data-design-mode="editorial"] .cm-back,
html[data-design-mode="editorial"] .cm-back i {
    color: var(--ink, #0a0a0a) !important;
}
/* Edit-pencil icons on inline-editable fields — were yellow-on-cream
   (invisible). Drop to ink-muted, accent only on hover. */
html[data-design-mode="editorial"] .cmov-edit-icon,
html[data-design-mode="editorial"] .cm-edit-icon,
html[data-design-mode="editorial"] .cmov-rail-section [class*="edit"] i,
html[data-design-mode="editorial"] .cmov-card [class*="edit"] i {
    color: var(--ink-muted, #555) !important;
}
html[data-design-mode="editorial"] .cmov-edit-icon:hover,
html[data-design-mode="editorial"] .cm-edit-icon:hover {
    color: var(--ink, #0a0a0a) !important;
}
/* Generic "yellow text" anti-pattern — anywhere the inline style or
   helper class colors text yellow, override in editorial. Pills /
   badges with accent fill are unchanged (they keep their dark text). */
html[data-design-mode="editorial"] [style*="color:var(--accent)"]:not(.cmov-pill):not(.dgst-pill):not(.cm-pill):not(.payments-pill),
html[data-design-mode="editorial"] [style*="color: var(--accent)"]:not(.cmov-pill):not(.dgst-pill):not(.cm-pill):not(.payments-pill),
html[data-design-mode="editorial"] [style*="color:#f0e050"]:not(.cmov-pill),
html[data-design-mode="editorial"] [style*="color:#f4e14a"]:not(.cmov-pill) {
    color: var(--ink, #0a0a0a) !important;
}

/* Page-count "325 pages" badge — was on a tinted yellow background
   that blends. Solid border, ink text. */
html[data-design-mode="editorial"] .cm-badge,
html[data-design-mode="editorial"] #cmPageCount {
    background: var(--paper-2, #f7f3e9) !important;
    color: var(--ink, #0a0a0a) !important;
    border: 1px solid var(--rule-strong, #c8c2a8) !important;
    border-radius: 2px !important;
    font-family: var(--font-mono, "JetBrains Mono", monospace) !important;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 10px;
    padding: 3px 8px;
}

/* ════════════════════════════════════════════════════════════════════
   GLOBAL: payment alert banner — flush on mobile + equal-width buttons
   ════════════════════════════════════════════════════════════════════
   Screenshot showed Mark-as-paid wider than Reconcile because the inline
   stack rule was flex:1 1 auto (content-based). Switch to flex:1 1 0 so
   both actions get exactly half. Also make the banner flush to the page
   padding edges on phones (was 16px in, 16px out — double padding).
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .payment-alert-banner {
        margin-left: -4px !important;
        margin-right: -4px !important;
        padding: 12px !important;
    }
    .payment-alert-banner .payment-alert-action {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        padding: 9px 10px !important;
        font-size: 12px !important;
        height: 36px;
    }
}
/* Editorial mode: flat banner corners + ink-strong border + ink body
   text (the red/orange tinted text was hard against cream). */
html[data-design-mode="editorial"] .payment-alert-banner {
    border-radius: 2px !important;
    border-width: 1px !important;
}
html[data-design-mode="editorial"] .payment-alert-banner .payment-alert-action {
    border-radius: 2px !important;
    font-family: var(--font-mono, "JetBrains Mono", monospace) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 11px !important;
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE LOGO: lock to 20px on the topbar — multiple rules were
   competing on .brand-logo-dark img defaults so force the constraint.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    /* SIZE constraint (height/width) — applies to whichever logo variant
       is currently displayed by the theme rules in style.css:2576-2579. */
    .topbar .topbar-logo-mobile img {
        height: 20px !important;
        max-height: 20px !important;
        width: auto !important;
        max-width: 64px !important;
    }
    /* DISPLAY logic — preserve theme-aware visibility. Light mode shows
       .brand-logo-dark only; dark mode shows .brand-logo-light only.
       Earlier rule used display:block !important on BOTH variants which
       forced them both visible (duplicate "opt" logo bug). */
    .topbar .topbar-logo-mobile .brand-logo-light { display: none !important; }
    .topbar .topbar-logo-mobile .brand-logo-dark  { display: block !important; }
    [data-theme="dark"] .topbar .topbar-logo-mobile .brand-logo-light { display: block !important; }
    [data-theme="dark"] .topbar .topbar-logo-mobile .brand-logo-dark  { display: none !important; }

    .topbar-logo-mobile {
        margin-left: 4px !important;
        margin-right: 0 !important;
    }
    /* Tighten topbar gap so logo sits next to hamburger, not floating. */
    .topbar { gap: 8px !important; padding: 0 12px !important; }
}

/* ════════════════════════════════════════════════════════════════════
   GLOBAL BUTTON UNIFICATION (editorial mode)
   ════════════════════════════════════════════════════════════════════
   Ben: "buttons which are inconsistent in sizing". Force every action
   button in the Client Brain header + Overview tab to share the same
   height + paddings so adjacent CTAs match. */
html[data-design-mode="editorial"] .cm-extend-btn,
html[data-design-mode="editorial"] .payment-alert-action,
html[data-design-mode="editorial"] .cmov-action-btn,
html[data-design-mode="editorial"] .cmov-ws-save,
html[data-design-mode="editorial"] .cmov-ws-cancel,
html[data-design-mode="editorial"] .am-drill-action,
html[data-design-mode="editorial"] .cm-modal-btn,
html[data-design-mode="editorial"] .dgst-action-btn {
    height: 36px !important;
    padding: 0 14px !important;
    border-radius: 2px !important;
    font-family: var(--font-mono, "JetBrains Mono", monospace) !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px;
    line-height: 1 !important;
    border: 1px solid var(--ink, #0a0a0a) !important;
    background: var(--paper, #fbfaf6) !important;
    color: var(--ink, #0a0a0a) !important;
    box-shadow: none !important;
}
html[data-design-mode="editorial"] .cm-extend-btn:hover,
html[data-design-mode="editorial"] .payment-alert-action:hover {
    background: var(--paper-2, #f7f3e9) !important;
}
/* Editorial primary CTA — accent fill, ink border + text. */
html[data-design-mode="editorial"] .cmov-ws-save,
html[data-design-mode="editorial"] .cm-modal-btn--confirm,
html[data-design-mode="editorial"] .dgst-action-btn--primary {
    background: var(--accent, #f4e14a) !important;
    color: var(--ink, #0a0a0a) !important;
}

/* ════════════════════════════════════════════════════════════════════
   MODAL FLUSHNESS on phones
   ════════════════════════════════════════════════════════════════════
   "This side pop-up isn't flush". On phones any centered modal should
   span the viewport with consistent gutters, not float with weird gaps. */
@media (max-width: 640px) {
    .cm-edit-modal.cmov-modal,
    .am-drill-panel,
    .confirm-modal,
    .modal-dialog,
    #cmRptModal .cm-rpt-dialog {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        margin: 8px !important;
        border-radius: 2px !important;
    }
    .cmov-popover {
        max-width: calc(100vw - 24px) !important;
    }
}

/* ════════════════════════════════════════════════════════════════════
   EDITORIAL: site-wide yellow-text neutralization (2026-06-01)
   ════════════════════════════════════════════════════════════════════
   The Nexus accent #f0e050/#f4e14a is the brand colour, but it's a
   contrast trap on the cream paper of editorial mode. This block
   reroutes every TEXT use of var(--accent) / var(--cm-yellow) to
   ink-strong while leaving pills, dots, sort-arrows, focus rings, and
   inline-edit dashed underlines yellow on purpose. */
html[data-design-mode="editorial"] .cm-back,
html[data-design-mode="editorial"] .cm-back:hover,
html[data-design-mode="editorial"] .cm-back i,
html[data-design-mode="editorial"] .cm-bulk-count,
html[data-design-mode="editorial"] .cm-kw-header span:hover,
html[data-design-mode="editorial"] .cm-table th:hover,
html[data-design-mode="editorial"] .cm-edit-modal__tab.active,
html[data-design-mode="editorial"] .text-gold,
html[data-design-mode="editorial"] .ui-alert--info .ui-alert-icon,
html[data-design-mode="editorial"] .cmov-pills-row .selected-name,
html[data-design-mode="editorial"] .cc-toast-success,
html[data-design-mode="editorial"] .cc-toast-info {
    color: var(--ink, #0a0a0a) !important;
}
/* Status pills that use yellow-tint-on-yellow-text — flip to
   ink-strong on cream-paper-2 so labels stay legible. */
html[data-design-mode="editorial"] .cm-brief__status--month_3,
html[data-design-mode="editorial"] .cm-status-approved,
html[data-design-mode="editorial"] .cm-status-generating,
html[data-design-mode="editorial"] .cm-kw-vol {
    background: var(--paper-2, #f7f3e9) !important;
    color: var(--ink, #0a0a0a) !important;
    border: 1px solid var(--rule-strong, #c8c2a8) !important;
}

/* ════════════════════════════════════════════════════════════════════
   EDITORIAL: ::selection (2026-06-01)
   ════════════════════════════════════════════════════════════════════
   base.css:111 sets ::selection to accent-tint bg + accent text. On
   the editorial cream paper that renders as near-white-on-yellow when
   you double-click a name — Ben: "weird white fill behind some of the
   names". Override with high-contrast paper-2 bg + ink text in
   editorial, and a higher-saturation accent for dark mode if anything
   slipped through.
   ════════════════════════════════════════════════════════════════════ */
html[data-design-mode="editorial"] ::selection,
html[data-design-mode="editorial"] *::selection,
html[data-design-mode="editorial"] ::-moz-selection {
    background: var(--accent, #f4e14a) !important;
    color: var(--ink, #0a0a0a) !important;
    text-shadow: none !important;
}

/* ════════════════════════════════════════════════════════════════════
   EDITORIAL: Edit-modal footer — make CANCEL + SAVE CHANGES equal
   ════════════════════════════════════════════════════════════════════
   Screenshot 2 showed CANCEL ~80px wide vs SAVE CHANGES ~240px. Force
   the action group to flex equally on every viewport so the buttons
   read as a paired choice, not "one big primary + tiny secondary".
   ════════════════════════════════════════════════════════════════════ */
html[data-design-mode="editorial"] .cm-edit-modal.cmov-modal .cm-edit-modal__foot {
    gap: 10px !important;
    flex-wrap: wrap;
}
/* The dirty-state label sits left; wrap the two buttons in a flex row
   that fills remaining width. Achieved purely with CSS — no markup
   change — by giving each button flex:1 in the editorial footer. */
html[data-design-mode="editorial"] .cm-edit-modal.cmov-modal .cm-edit-modal__foot button.cm-modal-btn--cancel,
html[data-design-mode="editorial"] .cm-edit-modal.cmov-modal .cm-edit-modal__foot button.cm-modal-btn--confirm,
html[data-design-mode="editorial"] .cm-edit-modal.cmov-modal .cm-edit-modal__foot .cmov-ws-cancel,
html[data-design-mode="editorial"] .cm-edit-modal.cmov-modal .cm-edit-modal__foot .cmov-ws-save {
    flex: 1 1 0 !important;
    min-width: 130px !important;
    height: 40px !important;
    padding: 0 16px !important;
    border-radius: 2px !important;
    font-family: var(--font-mono, "JetBrains Mono", monospace) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    border: 1px solid var(--ink, #0a0a0a) !important;
}
html[data-design-mode="editorial"] .cm-edit-modal.cmov-modal .cm-edit-modal__foot button.cm-modal-btn--cancel {
    background: var(--paper, #fbfaf6) !important;
    color: var(--ink, #0a0a0a) !important;
}
html[data-design-mode="editorial"] .cm-edit-modal.cmov-modal .cm-edit-modal__foot button.cm-modal-btn--confirm {
    background: var(--accent, #f4e14a) !important;
    color: var(--ink, #0a0a0a) !important;
}
/* Hide the "No changes" dirty label on phones — it eats space the
   buttons need. Keep it ≥640. */
@media (max-width: 640px) {
    html[data-design-mode="editorial"] .cm-edit-modal.cmov-modal .cmov-modal-dirty {
        display: none !important;
    }
    html[data-design-mode="editorial"] .cm-edit-modal.cmov-modal .cm-edit-modal__foot {
        padding: 12px !important;
    }
}

/* ════════════════════════════════════════════════════════════════════
   PAYMENT ALERT — global flex:1 1 0 override (raised specificity)
   ════════════════════════════════════════════════════════════════════
   The inline <style> in content_map.html sets .payment-alert-action
   to flex:1 1 0, but on the SIDE-BY-SIDE layout (≥641px) it falls back
   to content-based widths. Ben's screenshot showed Mark-as-paid vs
   Reconcile uneven even when side-by-side. Force equal width at every
   width by giving the actions container a flex grid + each action a
   shared min-width. */
.payment-alert-banner .payment-alert-actions {
    display: flex !important;
    gap: 6px;
    align-items: center;
}
.payment-alert-banner .payment-alert-action {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    justify-content: center !important;
    height: 36px;
    line-height: 1;
    padding: 0 10px;
}
/* On wider banner (≥641 row layout), constrain action group width so
   both buttons together don't dominate the row. */
@media (min-width: 641px) {
    .payment-alert-banner .payment-alert-actions {
        flex: 0 0 auto;
        min-width: 240px;
    }
    .payment-alert-banner .payment-alert-action {
        flex: 1 1 0 !important;
        min-width: 110px;
    }
}

/* ════════════════════════════════════════════════════════════════════
   EDITORIAL: Inbox page + Task detail modal overhaul (2026-06-01)
   ════════════════════════════════════════════════════════════════════
   Ben: "the inbox function needs non-rounded edges, square pop-ups,
   font and everything to match editorial. Right now it's a little bit
   too difficult to see."

   The inbox modal is built with inline styles via JS template literals,
   so every override needs !important to beat inline specificity (1000).
   Strategy: target the overlay shell + every interior element by tag
   inside `#inboxTaskOverlay`, force editorial paper + ink + 2px + mono
   labels. Pills (status, priority chips) keep accent ONLY as outline
   borders, not text colour.
   ════════════════════════════════════════════════════════════════════ */

/* ── Inbox page header + stats + filter bar ────────────────────────── */
html[data-design-mode="editorial"] .inbox-page,
html[data-design-mode="editorial"] body .inbox-page {
    background: var(--paper, #fbfaf6) !important;
    color: var(--ink, #0a0a0a) !important;
}
html[data-design-mode="editorial"] .inbox-page .am-name {
    color: var(--ink, #0a0a0a) !important;
    font-family: var(--font-display, "Newsreader", Georgia, serif) !important;
    font-weight: 500 !important;
}
html[data-design-mode="editorial"] .inbox-page .am-tagline,
html[data-design-mode="editorial"] .inbox-page .inbox-whoami,
html[data-design-mode="editorial"] .inbox-page .inbox-whoami-id {
    color: var(--ink-body, #2a2a2a) !important;
    font-family: var(--font-mono, "JetBrains Mono", monospace) !important;
    background: transparent !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 11px !important;
}

/* View picker button + popover */
html[data-design-mode="editorial"] .inbox-view-btn,
html[data-design-mode="editorial"] .inbox-view-popover,
html[data-design-mode="editorial"] .inbox-view-quick,
html[data-design-mode="editorial"] .inbox-view-search,
html[data-design-mode="editorial"] .inbox-view-item,
html[data-design-mode="editorial"] .inbox-view-cancel,
html[data-design-mode="editorial"] .inbox-view-apply {
    border-radius: 2px !important;
    background: var(--paper, #fbfaf6) !important;
    color: var(--ink, #0a0a0a) !important;
    border: 1px solid var(--ink, #0a0a0a) !important;
    font-family: var(--font-mono, "JetBrains Mono", monospace) !important;
}
html[data-design-mode="editorial"] .inbox-view-popover {
    box-shadow: 0 18px 48px rgba(10, 10, 10, 0.18) !important;
}
html[data-design-mode="editorial"] .inbox-view-apply {
    background: var(--accent, #f4e14a) !important;
    color: var(--ink, #0a0a0a) !important;
    font-weight: 700 !important;
}
html[data-design-mode="editorial"] .inbox-view-item-self {
    color: var(--ink, #0a0a0a) !important;
    background: var(--accent, #f4e14a) !important;
    border-radius: 2px !important;
    font-family: var(--font-mono, "JetBrains Mono", monospace) !important;
}

/* New Task button + filter selects + Overdue/Unassigned toggles —
   these were defined inline at line 80+ of inbox.html. */
html[data-design-mode="editorial"] .inbox-page button[onclick="inboxShowCreateTask()"],
html[data-design-mode="editorial"] .inbox-page #inboxClientFilter,
html[data-design-mode="editorial"] .inbox-page #inboxStatusFilter,
html[data-design-mode="editorial"] .inbox-page #inboxPriorityFilter,
html[data-design-mode="editorial"] .inbox-page #inboxOverdueBtn,
html[data-design-mode="editorial"] .inbox-page #inboxUnassignedBtn {
    border-radius: 2px !important;
    background: var(--paper, #fbfaf6) !important;
    color: var(--ink, #0a0a0a) !important;
    border: 1px solid var(--ink, #0a0a0a) !important;
    font-family: var(--font-mono, "JetBrains Mono", monospace) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    height: 36px !important;
    padding: 0 12px !important;
    line-height: 1 !important;
}
html[data-design-mode="editorial"] .inbox-page button[onclick="inboxShowCreateTask()"] {
    background: var(--accent, #f4e14a) !important;
    font-weight: 700 !important;
}

/* Stats tiles + task rows */
html[data-design-mode="editorial"] .inbox-page .inbox-stats {
    gap: 8px !important;
}
html[data-design-mode="editorial"] .inbox-page .inbox-stat {
    border-radius: 2px !important;
    background: var(--paper, #fbfaf6) !important;
    border: 1px solid var(--rule, #d9d4c4) !important;
    color: var(--ink, #0a0a0a) !important;
}
html[data-design-mode="editorial"] .inbox-page .inbox-stat-value {
    color: var(--ink, #0a0a0a) !important;
    font-family: var(--font-display, "Newsreader", Georgia, serif) !important;
    font-weight: 500 !important;
}
html[data-design-mode="editorial"] .inbox-page .inbox-stat-label {
    color: var(--ink-body, #2a2a2a) !important;
    font-family: var(--font-mono, "JetBrains Mono", monospace) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}
html[data-design-mode="editorial"] .inbox-page .inbox-task-row {
    border-radius: 2px !important;
    background: var(--paper, #fbfaf6) !important;
    border: 1px solid var(--rule, #d9d4c4) !important;
    color: var(--ink, #0a0a0a) !important;
}
html[data-design-mode="editorial"] .inbox-page .inbox-task-row:hover {
    border-color: var(--ink, #0a0a0a) !important;
    background: var(--paper-2, #f7f3e9) !important;
}
html[data-design-mode="editorial"] .inbox-page .inbox-task-row * {
    color: var(--ink-body, #2a2a2a);
}

/* Bulk bar */
html[data-design-mode="editorial"] .inbox-page .inbox-bulkbar {
    border-radius: 2px !important;
    background: var(--paper-2, #f7f3e9) !important;
    border: 1px solid var(--ink, #0a0a0a) !important;
}
html[data-design-mode="editorial"] .inbox-page .inbox-bulkbar button {
    border-radius: 2px !important;
    background: var(--paper, #fbfaf6) !important;
    color: var(--ink, #0a0a0a) !important;
    border: 1px solid var(--ink, #0a0a0a) !important;
    font-family: var(--font-mono, "JetBrains Mono", monospace) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    height: 32px !important;
    padding: 0 10px !important;
}

/* ── Task detail modal (#inboxTaskOverlay) — inline-styled shell ──── */
html[data-design-mode="editorial"] #inboxTaskOverlay {
    background: rgba(10, 10, 10, 0.45) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}
html[data-design-mode="editorial"] #inboxTaskOverlay > div {
    background: var(--paper, #fbfaf6) !important;
    border: 1px solid var(--ink, #0a0a0a) !important;
    border-radius: 2px !important;
    box-shadow: 0 24px 64px rgba(10, 10, 10, 0.22) !important;
    color: var(--ink, #0a0a0a) !important;
    scrollbar-color: rgba(10, 10, 10, 0.18) transparent !important;
}
/* Every inner section — flatten + light cream + ink rules. */
html[data-design-mode="editorial"] #inboxTaskOverlay > div > div {
    background: var(--paper, #fbfaf6) !important;
    border-color: var(--rule, #d9d4c4) !important;
}
html[data-design-mode="editorial"] #inboxTaskOverlay > div > div > div[style*="background:var(--surface-1)"],
html[data-design-mode="editorial"] #inboxTaskOverlay > div > div > div[style*="background: var(--surface-1)"] {
    background: var(--paper, #fbfaf6) !important;
}
/* All text inside the modal: ink-body min. */
html[data-design-mode="editorial"] #inboxTaskOverlay,
html[data-design-mode="editorial"] #inboxTaskOverlay * {
    color: var(--ink-body, #2a2a2a);
}
/* Section labels (DESCRIPTION, CHECKLIST, ACTIVITY, STATUS, etc.) —
   inline color: var(--ink-disabled) — pump to ink + mono caps. */
html[data-design-mode="editorial"] #inboxTaskOverlay div[style*="ink-disabled"],
html[data-design-mode="editorial"] #inboxTaskOverlay div[style*="text-transform:uppercase"] {
    color: var(--ink, #0a0a0a) !important;
    font-family: var(--font-mono, "JetBrains Mono", monospace) !important;
    letter-spacing: 0.08em !important;
}
/* Title input */
html[data-design-mode="editorial"] #inboxTaskOverlay #inboxTaskTitle {
    color: var(--ink, #0a0a0a) !important;
    font-family: var(--font-display, "Newsreader", Georgia, serif) !important;
    font-weight: 500 !important;
}
/* Client/group breadcrumb at top of modal — was yellow link. */
html[data-design-mode="editorial"] #inboxTaskOverlay a[href*="client-brain"] {
    color: var(--ink, #0a0a0a) !important;
    text-decoration: underline !important;
    font-family: var(--font-mono, "JetBrains Mono", monospace) !important;
}
/* All form controls inside the modal */
html[data-design-mode="editorial"] #inboxTaskOverlay select,
html[data-design-mode="editorial"] #inboxTaskOverlay input,
html[data-design-mode="editorial"] #inboxTaskOverlay textarea,
html[data-design-mode="editorial"] #inboxTaskOverlay #inboxCommentInput {
    background: var(--paper, #fbfaf6) !important;
    color: var(--ink, #0a0a0a) !important;
    border: 1px solid var(--ink, #0a0a0a) !important;
    border-radius: 2px !important;
    font-family: var(--font-mono, "JetBrains Mono", monospace) !important;
}
html[data-design-mode="editorial"] #inboxTaskOverlay #inboxTaskTitle {
    border: none !important;
}
/* Every button inside the modal — unified editorial style. */
html[data-design-mode="editorial"] #inboxTaskOverlay button {
    background: var(--paper, #fbfaf6) !important;
    color: var(--ink, #0a0a0a) !important;
    border: 1px solid var(--ink, #0a0a0a) !important;
    border-radius: 2px !important;
    font-family: var(--font-mono, "JetBrains Mono", monospace) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-weight: 600 !important;
    height: 32px;
    padding: 0 12px;
    line-height: 1;
    cursor: pointer;
}
/* Primary CTAs in the modal: "Save description" + "Send" + "View All
   Client Tasks" — all targeted via the accent-ghost style probe. */
html[data-design-mode="editorial"] #inboxTaskOverlay button[onclick*="inboxSaveDesc"],
html[data-design-mode="editorial"] #inboxTaskOverlay button[onclick*="inboxAddComment"],
html[data-design-mode="editorial"] #inboxTaskOverlay a[href*="client-brain"][style*="accent-ghost"] {
    background: var(--accent, #f4e14a) !important;
    color: var(--ink, #0a0a0a) !important;
    font-weight: 700 !important;
}
/* Copy Link + Delete + close (×) — secondary outlined */
html[data-design-mode="editorial"] #inboxTaskOverlay button[onclick*="_inboxCopyLink"],
html[data-design-mode="editorial"] #inboxTaskOverlay button[onclick="document.getElementById('inboxTaskOverlay').remove()"] {
    background: var(--paper, #fbfaf6) !important;
    color: var(--ink, #0a0a0a) !important;
}
html[data-design-mode="editorial"] #inboxTaskOverlay button[onclick*="inboxDeleteTask"] {
    background: var(--paper, #fbfaf6) !important;
    color: var(--status-danger, #b81d1d) !important;
    border-color: var(--status-danger, #b81d1d) !important;
}
/* Assignee chips + activity bubble icons — ink text + cream paper-2
   chip bg so they're legible. */
html[data-design-mode="editorial"] #inboxTaskOverlay #inboxAssigneesList > div,
html[data-design-mode="editorial"] #inboxTaskOverlay div[style*="border-radius:20px"] {
    background: var(--paper-2, #f7f3e9) !important;
    border: 1px solid var(--rule-strong, #c8c2a8) !important;
    border-radius: 2px !important;
}
html[data-design-mode="editorial"] #inboxTaskOverlay #inboxAssigneesList > div span,
html[data-design-mode="editorial"] #inboxTaskOverlay div[style*="border-radius:20px"] span {
    color: var(--ink, #0a0a0a) !important;
}
/* Activity log rows — ink text */
html[data-design-mode="editorial"] #inboxTaskOverlay div[style*="border-bottom"] span {
    color: var(--ink, #0a0a0a) !important;
}
html[data-design-mode="editorial"] #inboxTaskOverlay div[style*="line-height:1.4"] {
    color: var(--ink-body, #2a2a2a) !important;
}
/* Comment composer */
html[data-design-mode="editorial"] #inboxTaskOverlay #inboxCommentInput {
    border: none !important;
}
html[data-design-mode="editorial"] #inboxTaskOverlay div[style*="border:1px solid var(--border-subtle);border-radius:10px"] {
    border: 1px solid var(--ink, #0a0a0a) !important;
    border-radius: 2px !important;
    background: var(--paper, #fbfaf6) !important;
}
html[data-design-mode="editorial"] #inboxTaskOverlay div[style*="border-top:1px solid var(--border-subtle)"] {
    border-top-color: var(--rule, #d9d4c4) !important;
    background: var(--paper-2, #f7f3e9) !important;
}

/* Mobile sweep for the inbox modal: full-flush 8px gutter */
@media (max-width: 640px) {
    html[data-design-mode="editorial"] #inboxTaskOverlay > div,
    #inboxTaskOverlay > div {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        margin: 8px !important;
        border-radius: 2px !important;
    }
    /* Stack body grid into one column on phones. */
    #inboxTaskOverlay > div > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
    /* Tighten header paddings */
    #inboxTaskOverlay > div > div:first-of-type {
        padding: 16px !important;
    }
    #inboxTaskOverlay > div > div > div[style*="padding:24px"] {
        padding: 16px !important;
    }
}

/* ════════════════════════════════════════════════════════════════════
   EDITORIAL: site-wide class-defined yellow-text overrides (2026-06-01)
   ════════════════════════════════════════════════════════════════════
   Audit agent (a667fea6) found that the existing [style*="color:var(--accent)"]
   selector only catches INLINE yellow text. Every class-defined rule in
   template <style> blocks or shared CSS files (lifecycle, payments,
   hosted-sites, admin client_sync, dashboard drilldowns, components,
   base utilities, content-map) still rendered yellow-on-cream.

   This block enumerates every flagged class and reroutes its text
   colour to ink. Backgrounds, borders, focus rings, and pill fills
   keep yellow on purpose — those are the brand colour, contrast is
   fine when they're a SURFACE not text.
   ════════════════════════════════════════════════════════════════════ */

/* lifecycle.html */
html[data-design-mode="editorial"] .lc-stat-value.yellow,
html[data-design-mode="editorial"] .lc-table a.client-link,
html[data-design-mode="editorial"] .lc-table a.client-link:hover,
html[data-design-mode="editorial"] .lc-pipe-stage.active .pipe-label,
html[data-design-mode="editorial"] .lc-pipe-stage.active .pipe-count,
html[data-design-mode="editorial"] .lc-stage-ascended,
html[data-design-mode="editorial"] .lc-action-btn:hover,
html[data-design-mode="editorial"] .lc-content-link:hover {
    color: var(--ink, #0a0a0a) !important;
}

/* admin/client_sync.html — page header + cards + log + buttons */
html[data-design-mode="editorial"] .sync-page h1,
html[data-design-mode="editorial"] .sync-card h3,
html[data-design-mode="editorial"] .sync-log .info,
html[data-design-mode="editorial"] .sync-btn {
    color: var(--ink, #0a0a0a) !important;
}
html[data-design-mode="editorial"] .sync-btn {
    background: var(--paper, #fbfaf6) !important;
    border: 1px solid var(--ink, #0a0a0a) !important;
    border-radius: 2px !important;
}

/* dashboard.html — drilldown rows (LTV, MRR, GM, revenue) */
html[data-design-mode="editorial"] .am-drill-row__ltv,
html[data-design-mode="editorial"] .am-drill-row__mrr,
html[data-design-mode="editorial"] .am-drill-row__value,
html[data-design-mode="editorial"] .am-drill-row__line,
html[data-design-mode="editorial"] .ascend-row__line,
html[data-design-mode="editorial"] .dm-drill-value,
html[data-design-mode="editorial"] .dv2-sec-value,
html[data-design-mode="editorial"] .dv2-sec-label {
    color: var(--ink, #0a0a0a) !important;
}

/* hosted_sites.html */
html[data-design-mode="editorial"] .hs-pill,
html[data-design-mode="editorial"] .hs-cat-own-site,
html[data-design-mode="editorial"] .hs-status-active,
html[data-design-mode="editorial"] .hs-status-pending {
    color: var(--ink, #0a0a0a) !important;
}
/* Pills get cream-paper-2 bg so they remain visually a pill, not text. */
html[data-design-mode="editorial"] .hs-pill {
    background: var(--paper-2, #f7f3e9) !important;
    border: 1px solid var(--rule-strong, #c8c2a8) !important;
}

/* payments-tracker.css + payments_schedule.html */
html[data-design-mode="editorial"] .payments-header,
html[data-design-mode="editorial"] .payments-action,
html[data-design-mode="editorial"] .payments-action:hover,
html[data-design-mode="editorial"] .payments-link,
html[data-design-mode="editorial"] .payments-link:hover,
html[data-design-mode="editorial"] .pr-val--accent,
html[data-design-mode="editorial"] .becoming-mrr-name:hover,
html[data-design-mode="editorial"] .revenue-type-asc,
html[data-design-mode="editorial"] .week-tag-ascended,
html[data-design-mode="editorial"] .client-link:hover,
html[data-design-mode="editorial"] .frequency-monthly {
    color: var(--ink, #0a0a0a) !important;
}

/* admin/audit_logs.html */
html[data-design-mode="editorial"] .action-badge.client {
    color: var(--ink, #0a0a0a) !important;
    background: var(--paper-2, #f7f3e9) !important;
    border: 1px solid var(--rule-strong, #c8c2a8) !important;
}

/* admin/users.html */
html[data-design-mode="editorial"] .users-page h1,
html[data-design-mode="editorial"] .users-page .stat-value,
html[data-design-mode="editorial"] .users-page a,
html[data-design-mode="editorial"] .users-page a:hover {
    color: var(--ink, #0a0a0a) !important;
}

/* components.css utilities */
html[data-design-mode="editorial"] .ui-badge--accent,
html[data-design-mode="editorial"] .ui-table td.is-accent,
html[data-design-mode="editorial"] .ui-alert--info .ui-alert-icon {
    color: var(--ink, #0a0a0a) !important;
}
html[data-design-mode="editorial"] .ui-badge--accent {
    background: var(--paper-2, #f7f3e9) !important;
    border: 1px solid var(--rule-strong, #c8c2a8) !important;
}

/* base.css utility class — yellow gold text wrapper hits sitewide */
html[data-design-mode="editorial"] .text-gold {
    color: var(--ink, #0a0a0a) !important;
}

/* content-map.css remaining yellow-text rules not yet covered */
html[data-design-mode="editorial"] .cm-drive-pill,
html[data-design-mode="editorial"] .ccp-ai-title,
html[data-design-mode="editorial"] .cm-table th .sort-arrow.active,
html[data-design-mode="editorial"] .cm-kw-header span:hover,
html[data-design-mode="editorial"] .cm-img-preview-nav:hover {
    color: var(--ink, #0a0a0a) !important;
}

/* ════════════════════════════════════════════════════════════════════
   ADMIN tables: h-scroll fix + card fallback on phones
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .sync-table,
    .payments-table,
    .audit-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    .sync-page,
    .users-page,
    .audit-logs-page {
        padding: 12px !important;
    }
    /* admin/users.html — inline 643-line stylesheet has no media queries.
       Force a sane mobile shell on the filter+button row. */
    .users-page .users-filter-bar,
    .users-page .users-actions {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .users-page .users-filter-bar > *,
    .users-page .users-actions > * {
        flex: 1 1 calc(50% - 4px) !important;
        min-width: 0 !important;
    }
    /* admin/audit_logs.html shell */
    .audit-page,
    .audit-shell {
        padding: 12px !important;
    }
    .audit-filters {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
}

/* ════════════════════════════════════════════════════════════════════
   DASHBOARD filter row overflow on phones
   ════════════════════════════════════════════════════════════════════
   dashboard.html lines 1542/1548/1554/1560: 4 selects with inline
   min-width:120px each = 480px+. On a 375px viewport this overflows
   horizontally with no wrap. Force flex-wrap. */
@media (max-width: 640px) {
    .am-dashboard .dv2-filter-row,
    .am-dashboard [style*="flex"][style*="select"]:has(select),
    .dm-filters {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .am-dashboard select[style*="min-width: 120px"],
    .am-dashboard select[style*="min-width:120px"],
    .am-dashboard select[style*="min-width: 80px"],
    .am-dashboard select[style*="min-width:80px"] {
        min-width: 0 !important;
        flex: 1 1 calc(50% - 4px) !important;
    }
}

/* ════════════════════════════════════════════════════════════════════
   CLIENTS index — add-client modal must adopt editorial paper, not dark
   ════════════════════════════════════════════════════════════════════
   clients/index.html lines 612-647 use rgba(17,19,21,0.95) bg + heavy
   backdrop-filter — dark modal on cream page is jarring. Reroute to
   editorial surfaces in editorial mode. */
html[data-design-mode="editorial"] .add-client-modal,
html[data-design-mode="editorial"] .add-client-modal__panel,
html[data-design-mode="editorial"] .add-client-modal .modal-body,
html[data-design-mode="editorial"] .add-client-overlay > div {
    background: var(--paper, #fbfaf6) !important;
    color: var(--ink, #0a0a0a) !important;
    border: 1px solid var(--ink, #0a0a0a) !important;
    border-radius: 2px !important;
    box-shadow: 0 24px 64px rgba(10, 10, 10, 0.22) !important;
    backdrop-filter: none !important;
}
html[data-design-mode="editorial"] .add-client-modal *,
html[data-design-mode="editorial"] .add-client-overlay * {
    color: var(--ink-body, #2a2a2a);
}
html[data-design-mode="editorial"] .add-client-modal h2,
html[data-design-mode="editorial"] .add-client-modal h3,
html[data-design-mode="editorial"] .add-client-modal .modal-title {
    color: var(--ink, #0a0a0a) !important;
    font-family: var(--font-display, "Newsreader", Georgia, serif) !important;
}
html[data-design-mode="editorial"] .add-client-modal input,
html[data-design-mode="editorial"] .add-client-modal select,
html[data-design-mode="editorial"] .add-client-modal textarea {
    background: var(--paper, #fbfaf6) !important;
    color: var(--ink, #0a0a0a) !important;
    border: 1px solid var(--ink, #0a0a0a) !important;
    border-radius: 2px !important;
}

/* ════════════════════════════════════════════════════════════════════
   EDITORIAL: UI primitives — tooltip + skeleton + dropdown hover
   (2026-06-01)
   ════════════════════════════════════════════════════════════════════
   Three cross-cutting primitives surfaced by the UI audit:

   1. .action-btn[data-tooltip] bubble — hardcodes #f0e050 yellow border
      on near-black bg in style.css:14322. Yellow-on-black is fine for
      contrast but it clashes with editorial typography + radius. Flip
      to ink-on-paper, 2px corners, mono font.
   2. .skeleton shimmer — cold grey gradient on paper-cream reads as
      a broken image. Replace with paper-2 / cream-tone gradient.
   3. .cmw-dropdown-menu hover state — radius is covered but hover
      text still defaults to Nexus yellow. Add ink-on-paper-2 hover.
   ════════════════════════════════════════════════════════════════════ */

/* — Custom tooltip bubble on action buttons — */
html[data-design-mode="editorial"] .action-btn[data-tooltip]::after {
    background: var(--paper, #fbfaf6) !important;
    color: var(--ink, #0a0a0a) !important;
    border: 1px solid var(--ink, #0a0a0a) !important;
    border-radius: 2px !important;
    font-family: var(--font-mono, "JetBrains Mono", monospace) !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(10, 10, 10, 0.12) !important;
}
html[data-design-mode="editorial"] .action-btn[data-tooltip]::before {
    border-top-color: var(--ink, #0a0a0a) !important;
}

/* — Skeleton shimmer (loading placeholders) — */
html[data-design-mode="editorial"] .skeleton,
html[data-design-mode="editorial"] .skeleton-text,
html[data-design-mode="editorial"] .skeleton-value,
html[data-design-mode="editorial"] .skeleton-row,
html[data-design-mode="editorial"] .shimmer,
html[data-design-mode="editorial"] [class*="skeleton-"] {
    background: linear-gradient(
        90deg,
        var(--paper-2, #f7f3e9) 25%,
        #ebe5d3 50%,
        var(--paper-2, #f7f3e9) 75%
    ) !important;
    background-size: 200% 100% !important;
    border-radius: 2px !important;
}

/* — Custom dropdown hover (CMW kebab menus, etc.) — */
html[data-design-mode="editorial"] .cmw-dropdown-menu a:hover,
html[data-design-mode="editorial"] .cmw-dropdown-item:hover,
html[data-design-mode="editorial"] .cmw-dropdown-item:focus {
    background: var(--paper-2, #f7f3e9) !important;
    color: var(--ink, #0a0a0a) !important;
}
html[data-design-mode="editorial"] .cmw-dropdown-item.active,
html[data-design-mode="editorial"] .cmw-dropdown-menu a.active {
    background: var(--accent, #f4e14a) !important;
    color: var(--ink, #0a0a0a) !important;
    font-weight: 700 !important;
}
/* Force flat corners on the dropdown items themselves (parent menu is
   already covered earlier in this file). */
html[data-design-mode="editorial"] .cmw-dropdown-item,
html[data-design-mode="editorial"] .cmw-dropdown-menu a {
    border-radius: 2px !important;
    font-family: var(--font-mono, "JetBrains Mono", monospace) !important;
}

/* ════════════════════════════════════════════════════════════════════
   EDITORIAL: untouched-surfaces sweep (2026-06-01)
   ════════════════════════════════════════════════════════════════════
   Audit aeca9498 found dark/blur modals + yellow body text + zero
   media queries across heatmap, GMB, bot_registry, account_managers,
   integrations, foundry, content engine, and dev dashboard. This
   block reroutes every flagged pattern at the editorial level so we
   don't have to touch each template.

   Strategy:
   1. Dark+blur modals/drawers/panels → editorial paper + 2px + ink border
   2. Yellow body text classes → ink-strong
   3. Zero-@media shells → generic mobile single-col fallback
   ════════════════════════════════════════════════════════════════════ */

/* ─── 1. Dark+blur modals/drawers/panels → editorial paper ─────────── */

/* Bot Registry: drawer + modals + reset overlay + toasts */
html[data-design-mode="editorial"] .br-drawer,
html[data-design-mode="editorial"] .br-modal,
html[data-design-mode="editorial"] .br-plan-panel,
html[data-design-mode="editorial"] .br-troubleshoot-modal,
html[data-design-mode="editorial"] .br-reset-overlay > div,
html[data-design-mode="editorial"] .br-toast,
html[data-design-mode="editorial"] .br-toast-success,
html[data-design-mode="editorial"] .br-toast-error,
html[data-design-mode="editorial"] .br-toast-info {
    background: var(--paper, #fbfaf6) !important;
    border: 1px solid var(--ink, #0a0a0a) !important;
    border-radius: 2px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: var(--ink, #0a0a0a) !important;
    box-shadow: 0 24px 64px rgba(10, 10, 10, 0.22) !important;
}
html[data-design-mode="editorial"] .br-drawer *,
html[data-design-mode="editorial"] .br-modal *,
html[data-design-mode="editorial"] .br-plan-panel *,
html[data-design-mode="editorial"] .br-troubleshoot-modal *,
html[data-design-mode="editorial"] .br-toast * {
    color: var(--ink-body, #2a2a2a);
}
html[data-design-mode="editorial"] .br-drawer h1,
html[data-design-mode="editorial"] .br-drawer h2,
html[data-design-mode="editorial"] .br-drawer h3,
html[data-design-mode="editorial"] .br-modal h1,
html[data-design-mode="editorial"] .br-modal h2,
html[data-design-mode="editorial"] .br-modal h3 {
    color: var(--ink, #0a0a0a) !important;
    font-family: var(--font-display, "Newsreader", Georgia, serif) !important;
}
html[data-design-mode="editorial"] .br-toast-success { border-left: 4px solid var(--status-success, #1f7a47) !important; }
html[data-design-mode="editorial"] .br-toast-error   { border-left: 4px solid var(--status-danger, #b81d1d) !important; }
html[data-design-mode="editorial"] .br-toast-info    { border-left: 4px solid var(--ink, #0a0a0a) !important; }

/* GMB: modal + doc preview + context menu + toast */
html[data-design-mode="editorial"] .gmb-modal,
html[data-design-mode="editorial"] .doc-preview-box,
html[data-design-mode="editorial"] .gmb-toast,
html[data-design-mode="editorial"] .gmb-context-menu {
    background: var(--paper, #fbfaf6) !important;
    border: 1px solid var(--ink, #0a0a0a) !important;
    border-radius: 2px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: var(--ink, #0a0a0a) !important;
    box-shadow: 0 24px 64px rgba(10, 10, 10, 0.22) !important;
}
html[data-design-mode="editorial"] .gmb-modal *,
html[data-design-mode="editorial"] .doc-preview-box * {
    color: var(--ink-body, #2a2a2a);
}

/* Heatmap wizard: floating panels + banners + drag hint */
html[data-design-mode="editorial"] .hwiz-float,
html[data-design-mode="editorial"] .hwiz-banner,
html[data-design-mode="editorial"] .hwiz-drag-hint,
html[data-design-mode="editorial"] .heatmap-scan-panel,
html[data-design-mode="editorial"] .heatmap-floating-panel,
html[data-design-mode="editorial"] [class*="heatmap-"][style*="rgba(10,12,16"],
html[data-design-mode="editorial"] [class*="hwiz-"][style*="blur"] {
    background: var(--paper, #fbfaf6) !important;
    border: 1px solid var(--ink, #0a0a0a) !important;
    border-radius: 2px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: var(--ink, #0a0a0a) !important;
    box-shadow: 0 18px 48px rgba(10, 10, 10, 0.18) !important;
}
html[data-design-mode="editorial"] .hwiz-float *,
html[data-design-mode="editorial"] .hwiz-banner *,
html[data-design-mode="editorial"] .heatmap-scan-panel * {
    color: var(--ink-body, #2a2a2a);
}
html[data-design-mode="editorial"] .hwiz-banner h1,
html[data-design-mode="editorial"] .hwiz-banner h2,
html[data-design-mode="editorial"] .hwiz-float h1,
html[data-design-mode="editorial"] .hwiz-float h2 {
    color: var(--ink, #0a0a0a) !important;
    font-family: var(--font-display, "Newsreader", Georgia, serif) !important;
}

/* Foundry cards — explicit dark fallback in inline styles */
html[data-design-mode="editorial"] .fd-hub-card,
html[data-design-mode="editorial"] .fd-card {
    background: var(--paper, #fbfaf6) !important;
    border: 1px solid var(--ink, #0a0a0a) !important;
    border-radius: 2px !important;
    color: var(--ink, #0a0a0a) !important;
}
html[data-design-mode="editorial"] .fd-hub-card:hover,
html[data-design-mode="editorial"] .fd-card:hover {
    background: var(--paper-2, #f7f3e9) !important;
    border-color: var(--ink, #0a0a0a) !important;
}

/* Account hub tabs — heavy --surface-1 dark token usage */
html[data-design-mode="editorial"] .ah-sidebar,
html[data-design-mode="editorial"] .ah-content,
html[data-design-mode="editorial"] .ah-tab-pane,
html[data-design-mode="editorial"] [class^="ah-"][class*="-card"],
html[data-design-mode="editorial"] [class^="ah-"][class*="-bubble"],
html[data-design-mode="editorial"] [class^="ah-"][class*="-chip"] {
    background: var(--paper, #fbfaf6) !important;
    border-color: var(--rule, #d9d4c4) !important;
    color: var(--ink, #0a0a0a) !important;
    border-radius: 2px !important;
}

/* Integrations: client_setup, debug_client, webhooks, audit */
html[data-design-mode="editorial"] .int-panel,
html[data-design-mode="editorial"] .int-card,
html[data-design-mode="editorial"] .int-modal,
html[data-design-mode="editorial"] .int-debug-panel,
html[data-design-mode="editorial"] [class^="int-"][class*="-surface"] {
    background: var(--paper, #fbfaf6) !important;
    border: 1px solid var(--rule, #d9d4c4) !important;
    border-radius: 2px !important;
    color: var(--ink, #0a0a0a) !important;
}

/* ─── 2. Yellow body text → ink (class-defined, untouched surfaces) ─ */
html[data-design-mode="editorial"] .gmbm-count-pill.scheduled,
html[data-design-mode="editorial"] .stat-value.text-success,
html[data-design-mode="editorial"] .am-drill-pill,
html[data-design-mode="editorial"] .am-drill-stat-value,
html[data-design-mode="editorial"] .am-drill-metric-value,
/* integrations/webhooks.html h1/h2/btn */
html[data-design-mode="editorial"] .webhooks-page h1,
html[data-design-mode="editorial"] .webhooks-page h2,
html[data-design-mode="editorial"] .webhooks-page .btn-primary,
html[data-design-mode="editorial"] .event-tag,
/* integrations/audit.html */
html[data-design-mode="editorial"] .audit-client-cell a,
html[data-design-mode="editorial"] .audit-fix-link,
html[data-design-mode="editorial"] .audit-fix-link:hover,
/* integrations/debug_client.html */
html[data-design-mode="editorial"] .dbg-back:hover,
html[data-design-mode="editorial"] .dbg-btn,
html[data-design-mode="editorial"] .dbg-btn:hover,
/* account_managers/list + detail */
html[data-design-mode="editorial"] .am-list-stat,
html[data-design-mode="editorial"] .am-list-tag,
html[data-design-mode="editorial"] .am-detail-metric-value,
/* heatmap/new.html — 12 selectors flagged */
html[data-design-mode="editorial"] .hwiz-page-title,
html[data-design-mode="editorial"] .hwiz-step-num,
html[data-design-mode="editorial"] .hwiz-form-label,
html[data-design-mode="editorial"] .hwiz-progress-step.active,
html[data-design-mode="editorial"] .hwiz-summary-value,
html[data-design-mode="editorial"] .hwiz-cta:hover,
html[data-design-mode="editorial"] .hwiz-link,
html[data-design-mode="editorial"] .hwiz-link:hover,
/* heatmap scan view inline toast */
html[data-design-mode="editorial"] .heatmap-toast {
    color: var(--ink, #0a0a0a) !important;
}
/* event-tag pill bg should look like a pill, not text */
html[data-design-mode="editorial"] .event-tag {
    background: var(--paper-2, #f7f3e9) !important;
    border: 1px solid var(--rule-strong, #c8c2a8) !important;
    border-radius: 2px !important;
    padding: 2px 8px !important;
}

/* activities.html hard-coded #f0e050 winner badge — make it accent var */
html[data-design-mode="editorial"] .activities-page [style*="background:#f0e050"],
html[data-design-mode="editorial"] .activities-page [style*="background: #f0e050"] {
    background: var(--accent, #f4e14a) !important;
    color: var(--ink, #0a0a0a) !important;
}

/* ─── 3. Zero-@media shells: mobile fallback (≤640px) ──────────────── */
@media (max-width: 640px) {
    /* Heatmap pages — 3 templates, ZERO media queries total */
    .heatmap-page,
    .heatmap-shell,
    .hwiz-shell,
    .hwiz-page {
        padding: 12px !important;
    }
    .hwiz-float,
    .hwiz-banner,
    .heatmap-floating-panel,
    .heatmap-scan-panel {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        left: 8px !important;
        right: 8px !important;
    }
    /* heatmap/new.html 3-col step grid → single col */
    .hwiz-progress,
    .hwiz-grid {
        grid-template-columns: 1fr !important;
        flex-wrap: wrap !important;
    }

    /* Bot Registry drawer — width was 480px, force flush */
    .br-drawer,
    .br-modal,
    .br-plan-panel,
    .br-troubleshoot-modal {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        margin: 8px !important;
    }
    .br-reset-overlay > div {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
    }

    /* GMB modals + doc preview */
    .gmb-modal,
    .doc-preview-box,
    .gmb-context-menu {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        margin: 8px !important;
    }

    /* _gmb_management partial — 4-col grid row */
    .gmbm-row {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    /* Content engine + content output + dev dashboard — zero-@media */
    .content-engine-page,
    .content-output-page,
    .development-dashboard-page,
    .cache-stats-page {
        padding: 12px !important;
    }
    .am-hero-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    /* Stack tables with no responsive wrapper into scroll container */
    .cache-stats-page table.table,
    .cache-stats-page table.table-sm,
    .gmb-cost-history-table,
    .fd-table,
    .content-engine-table,
    .content-output-page table:not(.table-responsive table) {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
        max-width: 100vw !important;
    }

    /* Foundry pages */
    .fd-shell,
    .foundry-page,
    .fd-hub {
        padding: 12px !important;
    }
    .fd-hub-grid {
        grid-template-columns: 1fr !important;
    }

    /* Account managers */
    .am-list-page,
    .am-detail-page {
        padding: 12px !important;
    }
    .am-list-grid,
    .am-detail-grid {
        grid-template-columns: 1fr !important;
    }

    /* Integrations */
    .integrations-page,
    .int-shell,
    .webhooks-page,
    .audit-page {
        padding: 12px !important;
    }
    .int-grid,
    .int-providers-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}

/* ════════════════════════════════════════════════════════════════════
   EDITORIAL: Inbox task modal — nuclear corner flatten (2026-06-01)
   ════════════════════════════════════════════════════════════════════
   Ben: "the popup for tasks is still around the edges". Earlier sweep
   set border-radius:2px on the shell, but the inline-styled inner
   buttons + chips + selects + sections + the OUTER shell still show
   visible rounding (4-12px). Either a higher-specificity rule is
   winning or the inline-style probes weren't aggressive enough.

   Nuclear option: target by inline-style probe on every common
   border-radius value the inbox template uses, and force the shell +
   children to 0px (not 2px — even sharper) since the editorial design
   language is hard-edged anyway.
   ════════════════════════════════════════════════════════════════════ */

/* Shell + every nested element forced flat. Higher specificity than
   anything else by chaining the attribute selector. */
html[data-design-mode="editorial"] #inboxTaskOverlay > div,
html[data-design-mode="editorial"] #inboxTaskOverlay > div[style*="border-radius"],
html[data-design-mode="editorial"] #inboxTaskOverlay > div[style*="border-radius:20px"],
html[data-design-mode="editorial"] #inboxTaskOverlay > div[style*="border-radius:16px"],
html[data-design-mode="editorial"] #inboxTaskOverlay > div[style*="border-radius:12px"] {
    border-radius: 0 !important;
}

/* Every descendant with an inline border-radius — flatten. Covers
   buttons (8px), pills (20px / 9999px → kept rounded if .badge but
   flattened on container divs), chips, input panels, attachment cards. */
html[data-design-mode="editorial"] #inboxTaskOverlay *[style*="border-radius"]:not(.badge):not(.status-dot):not([class*="-dot"]):not([class*="-pill"]):not(.cm-pill):not(.cmov-pill):not(.payments-pill):not(.dgst-pill) {
    border-radius: 0 !important;
}

/* Specifically the elements the inbox template renders with rounded
   inline styles. List exhaustive enough to win even if generic [style*]
   probe is overridden. */
html[data-design-mode="editorial"] #inboxTaskOverlay button,
html[data-design-mode="editorial"] #inboxTaskOverlay select,
html[data-design-mode="editorial"] #inboxTaskOverlay input,
html[data-design-mode="editorial"] #inboxTaskOverlay textarea,
html[data-design-mode="editorial"] #inboxTaskOverlay a[href],
html[data-design-mode="editorial"] #inboxTaskOverlay [contenteditable],
html[data-design-mode="editorial"] #inboxTaskOverlay #inboxCommentInput,
html[data-design-mode="editorial"] #inboxTaskOverlay #inboxAssigneesList > div,
html[data-design-mode="editorial"] #inboxTaskOverlay #inboxChecklistList > div,
html[data-design-mode="editorial"] #inboxTaskOverlay div[style*="border-radius:20px"],
html[data-design-mode="editorial"] #inboxTaskOverlay div[style*="border-radius:8px"],
html[data-design-mode="editorial"] #inboxTaskOverlay div[style*="border-radius:6px"],
html[data-design-mode="editorial"] #inboxTaskOverlay div[style*="border-radius:10px"],
html[data-design-mode="editorial"] #inboxTaskOverlay div[style*="border-radius:50%"] {
    border-radius: 0 !important;
}

/* (Avatar disc + header pill exemption blocks removed 01 Jun 2026 —
   superseded by the class-based `.itm-shell *` universal flatten at
   the end of this file. Editorial spec is hard-edged everywhere on
   the inbox modal; nothing inside the shell stays circular.) */

/* ════════════════════════════════════════════════════════════════════
   MOBILE: sidebar drawer UX cleanup (2026-06-01)
   ════════════════════════════════════════════════════════════════════
   Ben screenshot showed three issues:
   1. A thin dark column on the right of the open drawer — was the
      sidebar-overlay click-catcher rendering as a visible strip.
   2. A horizontal "line" near the bottom (.sidebar-collapse-btn with
      a chevron) that's confusing on mobile and not needed.
   3. No explicit close X — user wants a visible close affordance.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    /* Drawer width — clean edge-to-edge, no thin sliver on the right. */
    .sidebar.open {
        width: 280px !important;
        max-width: 85vw !important;
        box-shadow: 0 0 32px rgba(10, 10, 10, 0.32) !important;
    }
    /* The sidebar-collapse-btn is the "weird line" at the bottom — it's
       a horizontal chevron strip that's redundant on mobile (X close
       handles dismiss). Hide. */
    .sidebar .sidebar-collapse-btn {
        display: none !important;
    }
    /* Explicit close X — actual <button> in base.html, hidden ≥768
       via the default rule below. */
    .sidebar .sidebar-header {
        position: relative;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
    }
    .sidebar .sidebar-close-mobile {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        background: var(--paper, #fbfaf6);
        color: var(--ink-body, #2a2a2a);
        border: 1px solid var(--rule, #d9d4c4);
        border-radius: 2px;
        cursor: pointer;
        font-size: 16px;
        margin-right: 12px;
        padding: 0;
    }
    .sidebar .sidebar-close-mobile:active,
    .sidebar .sidebar-close-mobile:hover {
        background: var(--paper-2, #f7f3e9);
    }
    /* Overlay click-catcher: ensure it doesn't bleed visible color. */
    #sidebarOverlay,
    .sidebar-overlay {
        background: rgba(10, 10, 10, 0.45) !important;
    }
}
/* Click handler — when user taps the X area, close the drawer. Pure
   CSS can't do this; we add a JS listener via a global script tag. */

/* ════════════════════════════════════════════════════════════════════
   ALL CLIENTS card layout: OVERDUE pill placement + flush edges
   ════════════════════════════════════════════════════════════════════
   Ben: "the overdue pill gets cut off. It isn't flush edge to edge.
   We just sort of fit too much info here."
   clients/index.html assigns grid-area to col-{client,stage,health,
   results,tenure,mrr} but col-payment has NO grid-area — it lands as
   an auto-placed cell that gets clipped by overflow:hidden in the row.
   Fix: extend grid-template-areas with a third row for payment alert,
   make pill full-width inside its grid slot, and flush card edges.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    /* Override the row's grid-template-areas to include payment row. */
    .status-table tbody tr.client-row {
        grid-template-areas:
            "name    name    name    stage"
            "health  results tenure  mrr"
            "payment payment payment payment" !important;
        margin: 0 0 6px 0 !important;          /* flush to card column */
        padding: 12px !important;
    }
    .status-table tbody tr.client-row td.col-payment {
        grid-area: payment !important;
        display: block !important;
        margin-top: 4px;
        overflow: visible !important;
        text-align: left !important;
    }
    .status-table tbody tr.client-row td.col-payment .payment-alert-pill {
        display: inline-flex !important;
        width: auto !important;
        max-width: 100% !important;
        white-space: nowrap !important;
        padding: 4px 10px !important;
        font-size: 11px !important;
        border-radius: 2px !important; /* flat in editorial — but use
                                          2px sitewide for the OVERDUE
                                          pill so the chrome reads as
                                          a hard-edged warning chip. */
        letter-spacing: 0.05em;
    }
    /* Editorial mode keeps OVERDUE pill RED (it's a status indicator)
       but flat-corner + ink-strong border. */
    html[data-design-mode="editorial"] .payment-alert-danger {
        border-radius: 2px !important;
        background: #fce7e7 !important;
        color: #8b1d1d !important;
        border: 1px solid #b81d1d !important;
    }
    html[data-design-mode="editorial"] .payment-alert-warning {
        border-radius: 2px !important;
        background: #fbf0d8 !important;
        color: #a05a0c !important;
        border: 1px solid #c46c10 !important;
    }
}

/* ════════════════════════════════════════════════════════════════════
   Client Brain header: unify Edit / Extend / kebab + hide kebab on
   mobile (Ben: "I don't even need this on mobile")
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    /* Hide the 3-dot menu on mobile. */
    .cm-header .cmw-dropdown {
        display: none !important;
    }
    /* Force same height + padding on all header buttons. */
    .cm-header .cm-extend-btn {
        height: 36px !important;
        padding: 0 14px !important;
        min-width: 0 !important;
        font-size: 11px !important;
        white-space: nowrap !important;
    }
    /* Equal width Edit + Extend Pages on phones. */
    .cm-header > div[style*="margin-left:auto"] {
        flex: 1 1 0 !important;
        gap: 6px !important;
    }
    .cm-header > div[style*="margin-left:auto"] > button.cm-extend-btn {
        flex: 1 1 0 !important;
    }
}

/* ════════════════════════════════════════════════════════════════════
   Payment alert banner: MARK AS PAID single-line on mobile
   ════════════════════════════════════════════════════════════════════
   Ben screenshot showed MARK AS PAID wrapping to 2 lines while
   RECONCILE was a single line — inconsistent. The wrap was triggered
   by the bi-check2-circle icon eating ~22px + caps text expansion.
   Fix: hide the icon on phones, shrink letter-spacing, allow ellipsis. */
@media (max-width: 640px) {
    .payment-alert-banner .payment-alert-action i.bi {
        display: none !important;
    }
    .payment-alert-banner .payment-alert-action {
        font-size: 11px !important;
        letter-spacing: 0.03em !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        padding: 0 8px !important;
    }
}

/* Hide the mobile sidebar close button on desktop. */
.sidebar .sidebar-close-mobile { display: none; }

/* ════════════════════════════════════════════════════════════════════
   GLOBAL MOBILE CARD NORMALIZATION (2026-06-01)
   ════════════════════════════════════════════════════════════════════
   Audit (ae13bf93) found that every major page repeated the same set
   of bugs: cards not flush to viewport edges, inconsistent padding
   (28px / 24px / 22px / 18px / 14px / 12px all in use), KPI value
   tiles never shrinking on phones (2.25rem on a 375px screen), rounded
   corners 12-20px on cards. The /clients page (commit 3640eac) set the
   gold standard: flush via negative margin compensating .app-content's
   16px padding, flat top/bottom borders only, 22x22 score tiles.

   This block applies that pattern to every flagged page at once via
   page-aware selectors. No per-template edits needed.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

    /* ── DASHBOARD (company/dashboard.html) ────────────────────────── */
    .dv2-kpi,
    .dv2-detailed-card,
    .dv2-sec {
        border-radius: 0 !important;
        padding: 12px 16px !important;
        /* Reverted -16px / calc(100%+32px) trickery — mobile-v2.css's
           .am-clients-section .status-table { width:100% !important }
           wins on specificity, so the negative margin shifts content
           left without extending right, clipping the left edge.
           Cards now sit within .app-content gutter; flush look comes
           from flat corners + no side borders below. */
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        border-left: none !important;
        border-right: none !important;
    }
    /* Shrink dashboard KPI value typography (was 2.25rem / 1.75rem /
       1.5rem — way too big on a 375px viewport). */
    .dv2-kpi__value { font-size: 1.5rem !important; line-height: 1.1 !important; }
    .dv2-detailed-card__value { font-size: 1.25rem !important; }
    .dv2-sec__value { font-size: 1.25rem !important; }
    /* Drilldown rows + summary tiles flat */
    .am-drill-row,
    .am-drill-summary {
        border-radius: 0 !important;
    }
    /* KPI tile arrows shouldn't be giant either */
    .dv2-kpi__arrow {
        width: 28px !important;
        height: 28px !important;
    }

    /* ── CONTENT MAP / CLIENT BRAIN (content_map.html + content-map.css) ─ */
    .cm-kpi-card,
    .cm-stat-card,
    .cm-info-card,
    .sc-kpi-card,
    .cm-health,
    .cm-tabs {
        border-radius: 0 !important;
        padding: 12px 16px !important;
    }
    /* Tabs container needs side-flush so the tab strip extends across
       the whole viewport. */
    .cm-tabs {
        /* Reverted -16px / calc(100%+32px) trickery — mobile-v2.css's
           .am-clients-section .status-table { width:100% !important }
           wins on specificity, so the negative margin shifts content
           left without extending right, clipping the left edge.
           Cards now sit within .app-content gutter; flush look comes
           from flat corners + no side borders below. */
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }
    /* Stat / KPI grids: extend full width then 2-col flush grid. */
    .cm-stats-grid,
    .cm-kpi-grid,
    .sc-kpi-grid,
    .cmov-kpi {
        /* Reverted -16px / calc(100%+32px) trickery — mobile-v2.css's
           .am-clients-section .status-table { width:100% !important }
           wins on specificity, so the negative margin shifts content
           left without extending right, clipping the left edge.
           Cards now sit within .app-content gutter; flush look comes
           from flat corners + no side borders below. */
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        gap: 0 !important;
    }
    .cm-stats-grid > *,
    .cm-kpi-grid > *,
    .sc-kpi-grid > *,
    .cmov-kpi > * {
        border-left: 1px solid var(--rule, #d9d4c4);
        border-bottom: 1px solid var(--rule, #d9d4c4);
        border-radius: 0 !important;
        margin: 0 !important;
    }
    .cm-stats-grid > *:nth-child(2n+1),
    .cm-kpi-grid > *:nth-child(2n+1),
    .sc-kpi-grid > *:nth-child(2n+1),
    .cmov-kpi > *:nth-child(2n+1) {
        border-left: none;
    }
    /* Shrink KPI value tiles */
    .cm-stat-value { font-size: 1.25rem !important; }
    .sc-kpi-value  { font-size: 1.25rem !important; }
    .cm-kpi-value  { font-size: 1rem !important; }
    .cmov-kpi-value { font-size: 1.25rem !important; }

    /* cm-header: hide tertiary elements + shrink h1 so it doesn't wrap. */
    .cm-header {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .cm-header h1 {
        font-size: 1.1rem !important;
        line-height: 1.2 !important;
        flex: 1 1 100% !important;
        margin: 0 !important;
    }
    /* Already covered: .cmw-dropdown hide. Hide the long client-ID pill
       too (the tiny "abc_electrical" mono badge) — saves header width. */
    .cm-header > span[title="Client ID — click to select"] {
        display: none !important;
    }

    /* ── LIFECYCLE (company/lifecycle.html) — zero @media — start from 0 ── */
    .lc-container {
        padding: 12px !important;
    }
    .lc-stats {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0 !important;
    }
    .lc-stat-card {
        border-radius: 0 !important;
        padding: 12px 16px !important;
        border: none !important;
        border-top: 1px solid var(--rule, #d9d4c4) !important;
        border-bottom: 1px solid var(--rule, #d9d4c4) !important;
        margin: 0 !important;
    }
    .lc-stats .lc-stat-card:nth-child(2n) {
        border-left: 1px solid var(--rule, #d9d4c4) !important;
    }
    .lc-stat-value { font-size: 1.4rem !important; }
    .lc-pipeline {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }
    .lc-pipe-stage {
        flex: 1 1 calc(33% - 4px) !important;
        border-radius: 0 !important;
        padding: 10px 8px !important;
        font-size: 11px !important;
    }
    .pipe-count { font-size: 1.1rem !important; }
    .lc-table {
        width: 100% !important;
    }
    .lc-table th,
    .lc-table td {
        padding: 10px 12px !important;
    }
    .lc-filter-btn,
    .lc-action-btn {
        height: 32px !important;
        padding: 0 12px !important;
    }

    /* ── HOSTED SITES (company/hosted_sites.html) ──────────────────── */
    .hosted-sites-management {
        padding: 12px !important;
    }
    .hs-kpi-card,
    .hs-empty,
    .hs-search {
        border-radius: 0 !important;
        padding: 12px 16px !important;
    }
    .hs-kpi-grid {
        gap: 0 !important;
    }
    .hs-kpi-grid > .hs-kpi-card {
        border: none !important;
        border-top: 1px solid var(--rule, #d9d4c4) !important;
        border-bottom: 1px solid var(--rule, #d9d4c4) !important;
        margin: 0 !important;
    }
    .hs-kpi-grid > .hs-kpi-card:nth-child(2n) {
        border-left: 1px solid var(--rule, #d9d4c4) !important;
    }
    .hs-kpi-value { font-size: 1.25rem !important; }
    .btn-primary-opt,
    .hs-action-icon {
        height: 32px !important;
        border-radius: 2px !important;
    }
    .hs-action-icon { width: 32px !important; }
    .hs-pill {
        border-radius: 2px !important;
        padding: 3px 8px !important;
    }

    /* ── INBOX (company/inbox.html) ────────────────────────────────── */
    .inbox-task-row {
        border-radius: 0 !important;
        padding: 12px 16px !important;
        /* Reverted -16px / calc(100%+32px) trickery — mobile-v2.css's
           .am-clients-section .status-table { width:100% !important }
           wins on specificity, so the negative margin shifts content
           left without extending right, clipping the left edge.
           Cards now sit within .app-content gutter; flush look comes
           from flat corners + no side borders below. */
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        border-left: none !important;
        border-right: none !important;
        border-top: 1px solid var(--rule, #d9d4c4) !important;
        border-bottom: none !important;
    }
    .inbox-task-row:last-child {
        border-bottom: 1px solid var(--rule, #d9d4c4) !important;
    }
    .inbox-stats {
        border-radius: 0 !important;
        /* Reverted -16px / calc(100%+32px) trickery — mobile-v2.css's
           .am-clients-section .status-table { width:100% !important }
           wins on specificity, so the negative margin shifts content
           left without extending right, clipping the left edge.
           Cards now sit within .app-content gutter; flush look comes
           from flat corners + no side borders below. */
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0 !important;
    }
    .inbox-stat {
        border-radius: 0 !important;
        padding: 10px 14px !important;
        border: none !important;
        border-top: 1px solid var(--rule, #d9d4c4) !important;
        border-bottom: 1px solid var(--rule, #d9d4c4) !important;
        margin: 0 !important;
    }
    .inbox-stats .inbox-stat:nth-child(2n) {
        border-left: 1px solid var(--rule, #d9d4c4) !important;
    }
    .inbox-stat-value { font-size: 1.25rem !important; }
    .inbox-bulkbar { border-radius: 0 !important; }
    .inbox-bulkbar button { height: 32px !important; }

    /* ── ACCOUNT MANAGERS LIST (account_managers/list.html) — zero @media ── */
    .am-managers-page,
    [class*="account-managers"] .am-dashboard {
        padding: 12px !important;
    }
    .manager-card {
        border-radius: 0 !important;
        margin-bottom: -1px !important;
    }
    .manager-card .stat-value { font-size: 1.25rem !important; }
    .manager-card .stat-box   { border-radius: 0 !important; }
    .manager-card .card-body  { padding: 12px 16px !important; }
    .manager-card .card-footer { padding: 10px 16px !important; }
    .manager-card .btn,
    .manager-card .btn-primary { height: 32px !important; border-radius: 2px !important; }

    /* ── PAYMENTS (company/payments.html + payments-tracker.css) ──── */
    .payments-table-wrap,
    .payments-hero-card,
    .payments-bucket-row,
    .payables-reconcile {
        border-radius: 0 !important;
    }
    .payments-table-wrap {
        /* Reverted -16px / calc(100%+32px) trickery — mobile-v2.css's
           .am-clients-section .status-table { width:100% !important }
           wins on specificity, so the negative margin shifts content
           left without extending right, clipping the left edge.
           Cards now sit within .app-content gutter; flush look comes
           from flat corners + no side borders below. */
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }
    .payments-hero-grid {
        /* Reverted -16px / calc(100%+32px) trickery — mobile-v2.css's
           .am-clients-section .status-table { width:100% !important }
           wins on specificity, so the negative margin shifts content
           left without extending right, clipping the left edge.
           Cards now sit within .app-content gutter; flush look comes
           from flat corners + no side borders below. */
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        gap: 0 !important;
    }
    .payments-hero-card {
        padding: 12px 16px !important;
        border: none !important;
        border-top: 1px solid var(--rule, #d9d4c4) !important;
        border-bottom: 1px solid var(--rule, #d9d4c4) !important;
        margin: 0 !important;
    }
    .payments-hero-value { font-size: 1.25rem !important; }
    /* Unify payment action button heights */
    .payments-action,
    .payments-flag-action,
    .payments-pill-filter {
        height: 32px !important;
        border-radius: 2px !important;
        padding: 0 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* ── payments_customer_ids.html — zero @media — bootstrap layout ── */
    .payments-customer-ids-page,
    .payments-cid-page {
        padding: 12px !important;
    }
    .payments-customer-ids-page .payments-table,
    .payments-cid-page .payments-table {
        width: 100% !important;
    }

    /* ── GLOBAL utility: any card-marked element follows the standard ── */
    [data-mobile-card] {
        border-radius: 0 !important;
        padding: 12px 16px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }

    /* ── HIGHER-SPECIFICITY OVERRIDE: mobile-v2.css forces a 10px-radius
       rounded card style at .am-clients-section .status-table tr.client-row
       (specificity 0,3,1). In editorial mode we want a continuous flat
       list. Beat it by chaining html body for 0,5,2. */
    html body .am-clients-section .status-table tr.client-row {
        border-radius: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        margin-bottom: -1px !important; /* collapse borders to single line */
    }
    html[data-design-mode="editorial"] body .am-clients-section .status-table tr.client-row {
        background: var(--paper, #fbfaf6) !important;
        border-top: 1px solid var(--rule, #d9d4c4) !important;
        border-bottom: 1px solid var(--rule, #d9d4c4) !important;
    }
}

/* ════════════════════════════════════════════════════════════════════
   INBOX TASK MODAL — class-based editorial overhaul (2026-06-01)
   ════════════════════════════════════════════════════════════════════
   Replaces 250+ lines of fragile attribute-selector overrides further
   up the file. Template now ships proper class hooks (.itm-*) on every
   element of the modal, so editorial mode can rebuild the surface
   cleanly instead of trying to outguess inline styles.

   Design intent (Ben, 01 Jun 2026: "really messy … overhaul this
   whole ticket appearance … darker colors here to make it clearer"):
     - flat 2px corners everywhere
     - paper-cream (#fbfaf6) surface, hairline ink rules
     - ink-strong (not ink-disabled) labels — readable, not whisper-grey
     - solid-yellow primary CTAs (not weak rgba ghost) — they read as
       actionable, not decorative
     - clear vertical rule between description column and meta column
     - field labels mono / strong / 10px so the form reads as scannable
     - inputs/selects: full hairline border, ink-strong text, mono font
       for dates so the values line up
   ════════════════════════════════════════════════════════════════════ */

html[data-design-mode="editorial"] #inboxTaskOverlay {
    background: rgba(20, 18, 12, 0.62) !important;
    backdrop-filter: blur(4px) !important;
}

/* — Shell — true zero corners (was 2px — still read as rounded on
   an 1100px-wide modal in screenshots). Hard editorial edge. */
html[data-design-mode="editorial"] #inboxTaskOverlay .itm-shell,
html[data-design-mode="editorial"] #inboxTaskOverlay .itm-shell * {
    border-radius: 0 !important;
}
html[data-design-mode="editorial"] #inboxTaskOverlay .itm-shell {
    background: var(--paper, #fbfaf6) !important;
    border: 1px solid var(--ink, #0a0a0a) !important;
    box-shadow: 0 24px 80px rgba(20, 18, 12, 0.32),
                0 0 0 1px rgba(10, 10, 10, 0.04) !important;
    scrollbar-color: var(--ink-3, #5d5d5a) transparent !important;
    color: var(--ink-strong, #0a0a0a) !important;
}

/* — Header ————————————————————————————————————————————————————— */
html[data-design-mode="editorial"] #inboxTaskOverlay .itm-header {
    padding: 26px 32px 20px !important;
    border-bottom: 1px solid var(--ink, #0a0a0a) !important;
    background: var(--paper, #fbfaf6) !important;
}
html[data-design-mode="editorial"] #inboxTaskOverlay .itm-breadcrumb {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important;
    font-size: 10px !important;
    color: var(--ink-body, #2a2a2a) !important;
    letter-spacing: 0.14em !important;
    margin-bottom: 8px !important;
}
html[data-design-mode="editorial"] #inboxTaskOverlay .itm-client-link {
    color: var(--ink-strong, #0a0a0a) !important;
    text-decoration: none !important;
    border-bottom: 1px solid var(--accent, #f4e14a) !important;
    padding-bottom: 1px !important;
}
html[data-design-mode="editorial"] #inboxTaskOverlay .itm-title,
html[data-design-mode="editorial"] #inboxTaskOverlay #inboxTaskTitle {
    font-family: 'Newsreader', Georgia, serif !important;
    font-size: 1.55rem !important;
    line-height: 1.2 !important;
    color: var(--ink-strong, #0a0a0a) !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* — Header action buttons —————————————————————————————————————— */
html[data-design-mode="editorial"] #inboxTaskOverlay .itm-btn,
html[data-design-mode="editorial"] #inboxTaskOverlay .itm-btn-ghost,
html[data-design-mode="editorial"] #inboxTaskOverlay .itm-btn-danger {
    border-radius: 2px !important;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 6px 12px !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
    transition: background 0.12s ease !important;
}
html[data-design-mode="editorial"] #inboxTaskOverlay .itm-btn-ghost {
    background: var(--paper, #fbfaf6) !important;
    border: 1px solid var(--ink-3, #5d5d5a) !important;
    color: var(--ink-strong, #0a0a0a) !important;
}
html[data-design-mode="editorial"] #inboxTaskOverlay .itm-btn-ghost:hover {
    background: var(--paper-2, #f4f1e8) !important;
    border-color: var(--ink, #0a0a0a) !important;
}
html[data-design-mode="editorial"] #inboxTaskOverlay .itm-btn-danger {
    background: var(--paper, #fbfaf6) !important;
    border: 1px solid #b3261e !important;
    color: #b3261e !important;
}
html[data-design-mode="editorial"] #inboxTaskOverlay .itm-btn-danger:hover {
    background: #fdecea !important;
}
html[data-design-mode="editorial"] #inboxTaskOverlay .itm-btn-close {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--paper, #fbfaf6) !important;
    border: 1px solid var(--ink-3, #5d5d5a) !important;
    border-radius: 2px !important;
    color: var(--ink-strong, #0a0a0a) !important;
    font-size: 14px !important;
    cursor: pointer !important;
    margin-left: 4px !important;
}
html[data-design-mode="editorial"] #inboxTaskOverlay .itm-btn-close:hover {
    background: var(--paper-2, #f4f1e8) !important;
    border-color: var(--ink, #0a0a0a) !important;
}

/* — Body grid —————————————————————————————————————————————————— */
html[data-design-mode="editorial"] #inboxTaskOverlay .itm-body {
    background: var(--paper, #fbfaf6) !important;
    gap: 0 !important;
    grid-template-columns: 1fr 280px !important;
}
html[data-design-mode="editorial"] #inboxTaskOverlay .itm-left,
html[data-design-mode="editorial"] #inboxTaskOverlay .itm-right {
    background: var(--paper, #fbfaf6) !important;
}
html[data-design-mode="editorial"] #inboxTaskOverlay .itm-right {
    border-left: 1px solid var(--rule, #d9d4c4) !important;
    padding: 26px 24px !important;
}
html[data-design-mode="editorial"] #inboxTaskOverlay .itm-left {
    padding: 26px 32px !important;
}

/* — Section labels (DESCRIPTION / CHECKLIST / ACTIVITY / etc.) — */
html[data-design-mode="editorial"] #inboxTaskOverlay .itm-label {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.14em !important;
    color: var(--ink-strong, #0a0a0a) !important;
    margin-bottom: 10px !important;
}

/* — Sections —————————————————————————————————————————————————— */
html[data-design-mode="editorial"] #inboxTaskOverlay .itm-section {
    margin-bottom: 24px !important;
}
html[data-design-mode="editorial"] #inboxTaskOverlay .itm-section:last-child {
    margin-bottom: 0 !important;
}

/* — Inputs / selects / textareas / contenteditable ———————————— */
html[data-design-mode="editorial"] #inboxTaskOverlay .itm-input,
html[data-design-mode="editorial"] #inboxTaskOverlay .itm-select,
html[data-design-mode="editorial"] #inboxTaskOverlay .itm-comment-input,
html[data-design-mode="editorial"] #inboxTaskOverlay #inboxTaskDesc {
    background: var(--paper, #fbfaf6) !important;
    border: 1px solid var(--ink-3, #5d5d5a) !important;
    border-radius: 2px !important;
    color: var(--ink-strong, #0a0a0a) !important;
    font-size: 13px !important;
    padding: 8px 10px !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    line-height: 1.5 !important;
    box-shadow: none !important;
}
html[data-design-mode="editorial"] #inboxTaskOverlay .itm-input:focus,
html[data-design-mode="editorial"] #inboxTaskOverlay .itm-select:focus,
html[data-design-mode="editorial"] #inboxTaskOverlay .itm-comment-input:focus,
html[data-design-mode="editorial"] #inboxTaskOverlay #inboxTaskDesc:focus {
    outline: 2px solid var(--accent, #f4e14a) !important;
    outline-offset: -1px !important;
    border-color: var(--ink, #0a0a0a) !important;
}
html[data-design-mode="editorial"] #inboxTaskOverlay .itm-date {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important;
    font-size: 12px !important;
}

/* — Description rich-text body ———————————————————————————————— */
html[data-design-mode="editorial"] #inboxTaskOverlay #inboxTaskDesc {
    min-height: 96px !important;
    padding: 12px 14px !important;
}

/* — Primary CTAs (Save description / Send / View all client tasks) */
html[data-design-mode="editorial"] #inboxTaskOverlay .itm-btn-primary {
    background: var(--accent, #f4e14a) !important;
    border: 1px solid var(--ink, #0a0a0a) !important;
    border-radius: 2px !important;
    color: var(--ink-strong, #0a0a0a) !important;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 8px 16px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: background 0.12s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}
html[data-design-mode="editorial"] #inboxTaskOverlay .itm-btn-primary:hover {
    background: var(--accent-dk, #e4cc00) !important;
}
html[data-design-mode="editorial"] #inboxTaskOverlay .itm-cta-link {
    width: 100% !important;
    padding: 10px 14px !important;
    font-size: 11px !important;
}

/* — Checklist —————————————————————————————————————————————————— */
html[data-design-mode="editorial"] #inboxTaskOverlay .itm-checklist-list > div {
    background: transparent !important;
    border-bottom: 1px solid var(--rule-2, #ece8da) !important;
    border-radius: 0 !important;
    padding: 8px 0 !important;
    color: var(--ink-body, #2a2a2a) !important;
}
html[data-design-mode="editorial"] #inboxTaskOverlay .itm-empty,
html[data-design-mode="editorial"] #inboxTaskOverlay .itm-empty-inline {
    color: var(--ink-muted, #5d5d5a) !important;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important;
    font-size: 11px !important;
}

/* — Comment composer ————————————————————————————————————————— */
html[data-design-mode="editorial"] #inboxTaskOverlay .itm-comment-shell {
    border: 1px solid var(--ink-3, #5d5d5a) !important;
    border-radius: 2px !important;
    background: var(--paper, #fbfaf6) !important;
    overflow: hidden !important;
}
html[data-design-mode="editorial"] #inboxTaskOverlay .itm-comment-shell .itm-comment-input {
    border: none !important;
    background: transparent !important;
    padding: 12px 14px !important;
    min-height: 56px !important;
    color: var(--ink-strong, #0a0a0a) !important;
}
html[data-design-mode="editorial"] #inboxTaskOverlay .itm-comment-toolbar {
    background: var(--paper-2, #f4f1e8) !important;
    border-top: 1px solid var(--rule, #d9d4c4) !important;
    padding: 8px 12px !important;
}
html[data-design-mode="editorial"] #inboxTaskOverlay .itm-tip {
    color: var(--ink-muted, #5d5d5a) !important;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important;
    font-size: 10px !important;
    letter-spacing: 0.06em !important;
}

/* — Right column readonly value ———————————————————————————————— */
html[data-design-mode="editorial"] #inboxTaskOverlay .itm-readonly {
    color: var(--ink-strong, #0a0a0a) !important;
    font-size: 13px !important;
    padding: 6px 0 !important;
}

/* — Assignee chips ————————————————————————————————————————————— */
html[data-design-mode="editorial"] #inboxTaskOverlay .itm-chips > div,
html[data-design-mode="editorial"] #inboxTaskOverlay .itm-chips > span {
    background: var(--paper-2, #f4f1e8) !important;
    border: 1px solid var(--ink-3, #5d5d5a) !important;
    border-radius: 2px !important;
    color: var(--ink-strong, #0a0a0a) !important;
    font-size: 11px !important;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important;
    padding: 3px 8px !important;
}

/* — Activity entries — keep readable, drop the colored discs ——— */
html[data-design-mode="editorial"] #inboxTaskOverlay .itm-section > div[style*="display:flex"][style*="gap:10px"] {
    border-bottom: 1px solid var(--rule-2, #ece8da) !important;
    padding-bottom: 12px !important;
    margin-bottom: 12px !important;
}

/* — Mobile collapse ——————————————————————————————————————————— */
@media (max-width: 768px) {
    html[data-design-mode="editorial"] #inboxTaskOverlay .itm-shell {
        width: 100% !important;
        max-width: none !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        border: none !important;
    }
    html[data-design-mode="editorial"] #inboxTaskOverlay .itm-body {
        grid-template-columns: 1fr !important;
    }
    html[data-design-mode="editorial"] #inboxTaskOverlay .itm-right {
        border-left: none !important;
        border-top: 1px solid var(--rule, #d9d4c4) !important;
    }
    html[data-design-mode="editorial"] #inboxTaskOverlay .itm-left,
    html[data-design-mode="editorial"] #inboxTaskOverlay .itm-right {
        padding: 20px 18px !important;
    }
    html[data-design-mode="editorial"] #inboxTaskOverlay .itm-header {
        padding: 18px 18px 14px !important;
    }
}

/* ════════════════════════════════════════════════════════════════════
   INBOX TASK MODAL — "no boxes, one unit" overhaul (01 Jun 2026)
   ════════════════════════════════════════════════════════════════════
   Ben: "the task popup when I'm on editorial is still rounded ... have
   no boxes. It needs a unit. This just needs to go for the full UI
   design to be in front and designed to be reviewed."

   Two distinct fixes:
     A) ALL rounded corners flat. Maximum specificity. Targets every
        descendant pattern, beats every prior rule by source order + id+
        class chain. Belt + braces + lock — no more rounded escape paths.
     B) "No boxes, one unit" — the bento-card feel of stacked bordered
        fields (status box, priority box, assignees box, due-date box…)
        reads as visually noisy. Replaced with newspaper underline-style
        inputs: 1px bottom rule, no top/left/right border, paper bg
        merging into the shell so each field reads as a labelled LINE
        in a single document, not a card in a grid.

   Concrete moves:
     - Modal corners + every descendant: border-radius 0 (4-rule wall).
     - Inputs / selects / dates / textareas: NO outline box. Only a
       bottom 1px ink rule. Padding tightened. The paper background
       flows through so each row reads as part of the meta sidebar.
     - Right column: 1px left ink rule from the description column,
       each field separated by a thin rule-2 hairline (not a box).
     - Description rich-text body: NO border. Top + bottom 1px ink
       rule, paper bg. Reads like a press-release body paragraph.
     - Checklist + comment input: borderless. Comment toolbar collapses
       into a single horizontal rule above the buttons.
     - Header pill chips (INBOX · CUSTOM · CUSTOM): paper-2 swatch, no
       border, just a mono caps line. Click target preserved.
     - Buttons: square. Primary = solid yellow + 1px ink. Ghost = paper
       + 1px ink. Danger = paper + 1px red. No rounded chips anywhere.
   ════════════════════════════════════════════════════════════════════ */

/* (A) — Belt-and-braces flat-corner enforcement. Four selector rings
   so it wins under every cache/specificity scenario. */
html[data-design-mode="editorial"] body #inboxTaskOverlay,
html[data-design-mode="editorial"] body #inboxTaskOverlay *,
html[data-design-mode="editorial"] body #inboxTaskOverlay *::before,
html[data-design-mode="editorial"] body #inboxTaskOverlay *::after {
    border-radius: 0 !important;
}
html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-shell {
    border-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* (B) — "No boxes, one unit" — newspaper layout reset. */

/* Modal shell: sharper border, deeper shadow, tighter base padding. */
html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-shell {
    background: var(--paper, #fbfaf6) !important;
    border: 1px solid var(--ink, #0a0a0a) !important;
    box-shadow:
        0 32px 96px rgba(20, 18, 12, 0.38),
        0 0 0 1px rgba(10, 10, 10, 0.06) !important;
    color: var(--ink-strong, #0a0a0a) !important;
}

/* Header — title + actions read as a masthead, not a card top. */
html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-header {
    padding: 28px 36px 22px !important;
    border-bottom: 1px solid var(--ink, #0a0a0a) !important;
}
html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-breadcrumb {
    font-size: 11px !important;
    margin-bottom: 10px !important;
    color: var(--ink-body, #2a2a2a) !important;
}
html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-title,
html[data-design-mode="editorial"] body #inboxTaskOverlay #inboxTaskTitle {
    font-size: 1.75rem !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em !important;
}

/* Body grid — single ink rule between columns. Both columns share the
   paper bg so the seam is just a line, not two cards meeting. */
html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-body {
    grid-template-columns: 1fr 280px !important;
    gap: 0 !important;
    background: var(--paper, #fbfaf6) !important;
}
html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-left {
    padding: 28px 36px !important;
    background: var(--paper, #fbfaf6) !important;
}
html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-right {
    padding: 28px 24px !important;
    background: var(--paper, #fbfaf6) !important;
    border-left: 1px solid var(--ink, #0a0a0a) !important;
}

/* Section labels — caps mono, ink-strong, generous space. */
html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-label {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.16em !important;
    color: var(--ink-strong, #0a0a0a) !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
}

/* (B-1) — KILL THE BOXES. All inputs/selects/dates default to a
   borderless paper-bg row with only a bottom ink rule. */
html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-input,
html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-select,
html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-date,
html[data-design-mode="editorial"] body #inboxTaskOverlay select,
html[data-design-mode="editorial"] body #inboxTaskOverlay input[type="text"],
html[data-design-mode="editorial"] body #inboxTaskOverlay input[type="date"],
html[data-design-mode="editorial"] body #inboxTaskOverlay input[type="email"],
html[data-design-mode="editorial"] body #inboxTaskOverlay input[type="number"],
html[data-design-mode="editorial"] body #inboxTaskOverlay textarea {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--ink-3, #5d5d5a) !important;
    color: var(--ink-strong, #0a0a0a) !important;
    font-size: 14px !important;
    padding: 6px 0 !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
    outline: none !important;
    width: 100% !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}
html[data-design-mode="editorial"] body #inboxTaskOverlay select {
    /* native chevron + space for it */
    background-image: linear-gradient(45deg, transparent 50%, var(--ink-strong, #0a0a0a) 50%),
                      linear-gradient(135deg, var(--ink-strong, #0a0a0a) 50%, transparent 50%) !important;
    background-position: calc(100% - 12px) 14px, calc(100% - 7px) 14px !important;
    background-size: 5px 5px, 5px 5px !important;
    background-repeat: no-repeat !important;
    padding-right: 22px !important;
    cursor: pointer !important;
}
html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-input:focus,
html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-select:focus,
html[data-design-mode="editorial"] body #inboxTaskOverlay select:focus,
html[data-design-mode="editorial"] body #inboxTaskOverlay input:focus,
html[data-design-mode="editorial"] body #inboxTaskOverlay textarea:focus {
    border-bottom-color: var(--ink, #0a0a0a) !important;
    background: var(--accent-soft, #fef9cc) !important;
}

/* Right-column fields — vertical stack with hairline separators.
   No outer boxes, just rules between rows. */
html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-right {
    gap: 0 !important;
}
html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-field {
    padding: 14px 0 !important;
    border-bottom: 1px solid var(--rule-2, #ece8da) !important;
}
html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-field:first-child {
    padding-top: 0 !important;
}
html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-field:last-of-type {
    border-bottom: none !important;
}

/* Description rich-text body — borderless paper, ink rule top + bottom
   so it reads as the lead paragraph of the document, not a card. */
html[data-design-mode="editorial"] body #inboxTaskOverlay #inboxTaskDesc {
    background: var(--paper, #fbfaf6) !important;
    border: none !important;
    border-top: 1px solid var(--ink-3, #5d5d5a) !important;
    border-bottom: 1px solid var(--ink-3, #5d5d5a) !important;
    padding: 14px 0 !important;
    min-height: 108px !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: var(--ink-strong, #0a0a0a) !important;
}
/* Description toolbar (B / I / • / Size) — kill the rounded chip
   buttons, render as a single mono toolbar line above the body. */
html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-section [data-rich-toolbar],
html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-section [class*="rich-toolbar"] {
    background: transparent !important;
    border: none !important;
    padding: 0 0 6px 0 !important;
    display: flex !important;
    gap: 4px !important;
}
html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-section [data-rich-toolbar] button,
html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-section [class*="rich-toolbar"] button,
html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-section [data-rich-toolbar] select,
html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-section [class*="rich-toolbar"] select {
    background: transparent !important;
    border: 1px solid var(--ink-3, #5d5d5a) !important;
    color: var(--ink-strong, #0a0a0a) !important;
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
    font-size: 10px !important;
    padding: 4px 8px !important;
    cursor: pointer !important;
    border-bottom: 1px solid var(--ink-3, #5d5d5a) !important;
}

/* Save Description button: move to inline alongside body, no rounded chip */
html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-save-row {
    margin-top: 10px !important;
    justify-content: flex-end !important;
}

/* Checklist — borderless rows + flat add input */
html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-checklist-list > div {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--rule-2, #ece8da) !important;
    padding: 8px 0 !important;
    color: var(--ink-body, #2a2a2a) !important;
    font-size: 13px !important;
}
html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-checklist-add {
    margin-top: 10px !important;
    gap: 0 !important;
    border-bottom: 1px solid var(--ink-3, #5d5d5a) !important;
    padding-bottom: 0 !important;
}
html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-checklist-add .itm-input {
    border-bottom: none !important;
    padding: 6px 0 !important;
}
html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-checklist-add button {
    background: var(--ink, #0a0a0a) !important;
    color: var(--paper, #fbfaf6) !important;
    border: none !important;
    padding: 6px 14px !important;
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}

/* Comment composer — full reset. Borderless shell, single rule above
   toolbar, paper bg flowing into the section. */
html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-comment-shell {
    border: none !important;
    background: transparent !important;
    margin-top: 14px !important;
}
html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-comment-shell .itm-comment-input {
    border: none !important;
    border-bottom: 1px solid var(--ink-3, #5d5d5a) !important;
    background: transparent !important;
    padding: 10px 0 !important;
    min-height: 56px !important;
    color: var(--ink-strong, #0a0a0a) !important;
    font-size: 14px !important;
}
html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-comment-toolbar {
    background: transparent !important;
    border-top: none !important;
    padding: 8px 0 0 0 !important;
}
html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-tip {
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
    color: var(--ink-muted, #5d5d5a) !important;
    text-transform: uppercase !important;
}

/* Buttons — universal. Square, mono caps, clear hierarchy. */
html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-btn,
html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-btn-ghost {
    background: var(--paper, #fbfaf6) !important;
    border: 1px solid var(--ink-3, #5d5d5a) !important;
    color: var(--ink-strong, #0a0a0a) !important;
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    padding: 7px 14px !important;
    cursor: pointer !important;
    transition: background 0.12s ease !important;
}
html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-btn:hover,
html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-btn-ghost:hover {
    background: var(--paper-2, #f4f1e8) !important;
    border-color: var(--ink, #0a0a0a) !important;
}
html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-btn-danger {
    background: var(--paper, #fbfaf6) !important;
    border: 1px solid #b3261e !important;
    color: #b3261e !important;
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    padding: 7px 14px !important;
    cursor: pointer !important;
}
html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-btn-danger:hover {
    background: #fdecea !important;
}
html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-btn-close {
    width: 32px !important;
    height: 32px !important;
    background: var(--paper, #fbfaf6) !important;
    border: 1px solid var(--ink-3, #5d5d5a) !important;
    color: var(--ink-strong, #0a0a0a) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    margin-left: 6px !important;
}
html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-btn-close:hover {
    background: var(--ink, #0a0a0a) !important;
    color: var(--paper, #fbfaf6) !important;
}

/* PRIMARY CTAs — solid yellow, black ink border. Maximum signal. */
html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-btn-primary {
    background: var(--accent, #f4e14a) !important;
    border: 1px solid var(--ink, #0a0a0a) !important;
    color: var(--ink-strong, #0a0a0a) !important;
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    padding: 9px 18px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    transition: background 0.12s ease !important;
}
html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-btn-primary:hover {
    background: var(--accent-dk, #e4cc00) !important;
}
html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-cta-link {
    width: 100% !important;
    padding: 12px 16px !important;
    font-size: 11px !important;
}

/* Header pill chips (INBOX · CUSTOM · CUSTOM) — paper-2 swatches,
   no borders, mono caps. */
html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-breadcrumb a,
html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-breadcrumb span,
html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-breadcrumb {
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
    text-transform: uppercase !important;
    letter-spacing: 0.14em !important;
}
html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-client-link {
    background: var(--paper-2, #f4f1e8) !important;
    color: var(--ink-strong, #0a0a0a) !important;
    padding: 3px 8px !important;
    border-bottom: 1px solid var(--accent, #f4e14a) !important;
    text-decoration: none !important;
}

/* Assignee + status chips — paper-2 swatches, mono caps */
html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-chips > div,
html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-chips > span {
    background: var(--paper-2, #f4f1e8) !important;
    border: 1px solid var(--ink-3, #5d5d5a) !important;
    color: var(--ink-strong, #0a0a0a) !important;
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 3px 8px !important;
    margin-right: 4px !important;
}

/* Read-only meta (Department) */
html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-readonly {
    color: var(--ink-strong, #0a0a0a) !important;
    font-size: 14px !important;
    padding: 4px 0 !important;
}

/* Activity rows — kill colored avatar discs in editorial, replace with
   simple ink initials block. Stronger separation between entries. */
html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-section > div[style*="display:flex"][style*="gap:10px"] {
    border-bottom: 1px solid var(--rule-2, #ece8da) !important;
    padding: 14px 0 !important;
    margin: 0 !important;
}

/* Time tracker block — kill the rounded chip, render as a single line */
html[data-design-mode="editorial"] body #inboxTaskOverlay [id*="timeTracker"],
html[data-design-mode="editorial"] body #inboxTaskOverlay [id*="TimeTracker"] {
    background: transparent !important;
    border: none !important;
    border-top: 1px solid var(--rule-2, #ece8da) !important;
    border-bottom: 1px solid var(--rule-2, #ece8da) !important;
    padding: 14px 0 !important;
}

/* Mobile — drop the right-column rule, stack vertically */
@media (max-width: 768px) {
    html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-shell {
        width: 100% !important;
        max-width: none !important;
        max-height: 100vh !important;
        border: none !important;
    }
    html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-body {
        grid-template-columns: 1fr !important;
    }
    html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-right {
        border-left: none !important;
        border-top: 1px solid var(--ink, #0a0a0a) !important;
    }
    html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-left,
    html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-right {
        padding: 22px 20px !important;
    }
    html[data-design-mode="editorial"] body #inboxTaskOverlay .itm-header {
        padding: 22px 20px 16px !important;
    }
}

/* End of editorial-final.css */
