/* ==========================================================================
   CRM + KPI home — "Yango app native" world (owner's choice, 2026-11-09)

   THESIS: the CRM behaves like a Yango app: sheets you work in, one red thing to
     press, numbers big and plain. It refuses coloured icon tiles and tracked caps.
   OWN-WORLD: the dashboard's own dark colours (same as every other page; the owner
     asked for that on 2026-11-09), with the app's shapes: 20px sheets with a hairline
     and soft shadow, pill buttons and filter chips (chosen chip = solid light chip),
     brand red only on what you can press or what is live, Onest for every word and
     number (Noto Sans Ethiopic for Amharic).
   STORY: an agent opens the page, sees what they earned this month and the next
     level, then a list of people, each with a red Call.
   FIRST VIEWPORT (KPI home): one sheet "Earned this pay period · N ETB", red level
     bar with Bronze/Silver/Gold stops, Today + Streak tiles under it.
   FORM: Yango app native (pick card), seed 0be5ab1f.
   FINISH: unreviewed and undocumented is unfinished; this build ends with the
     finish review, the verdict, DESIGN.md, and every shipping raster carrying
     its provenance.

   Mechanism: every dashboard component is token-driven, so the world is set
   by re-pointing the tokens on <body> for CRM pages (they carry .crm-nav) and
   the KPI home (.kpi-page), then re-shaping components into the app's grammar.
   Nothing outside those pages changes. To retire: delete this file + its <link>.
   ========================================================================== */

body:has(.crm-nav), body:has(.kpi-page) {
  /* Colours are the dashboard's own dark tokens (style.css :root), on purpose: the owner wants
     the CRM and KPI home the same colour as every other page (2026-11-09). Only shape and type
     are this world's. */
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --font-display: 'Onest', 'Noto Sans Ethiopic', system-ui, sans-serif;
  --font-body:    'Onest', 'Noto Sans Ethiopic', system-ui, -apple-system, sans-serif;
  --sheet-shadow: 0 1px 2px rgba(0,0,0,0.35), 0 6px 18px rgba(0,0,0,0.25);
  --hover-line: #3a3a3a;
  font-family: var(--font-body);
}
body:has(.crm-nav) .main-content, body:has(.kpi-page) .main-content { caret-color: var(--yango-orange); }

/* ── Top bar ─────────────────────────────────────── */
body:has(.crm-nav) .nav-tab, body:has(.kpi-page) .nav-tab { color: var(--text-muted); border-radius: var(--radius-full); }
body:has(.crm-nav) .nav-tab:hover, body:has(.kpi-page) .nav-tab:hover { color: var(--text-primary); background: var(--bg-secondary); }
body:has(.crm-nav) .nav-tab.active, body:has(.kpi-page) .nav-tab.active { color: var(--text-primary); background: var(--bg-secondary); box-shadow: none; }
body:has(.crm-nav) .yango-footer, body:has(.kpi-page) .yango-footer { background: transparent; border-top-color: var(--border-color); }

/* ── Section navigation: app tabs, then filter chips ─────────────────────── */
.crm-nav-groups { border-bottom: 0 !important; gap: var(--space-2) !important; }
body:has(.crm-nav) .crm-nav-group { border: 0; border-radius: var(--radius-full); padding: 10px 18px; color: var(--text-muted); font-weight: 600; }
body:has(.crm-nav) .crm-nav-group:hover { background: var(--bg-card); color: var(--text-primary); }
body:has(.crm-nav) .crm-nav-group.is-on { background: var(--bg-card); color: var(--text-primary); box-shadow: var(--sheet-shadow); }
body:has(.crm-nav) .crm-nav-group.is-on i { color: var(--yango-orange); }
body:has(.crm-nav) .crm-nav-items { padding-top: var(--space-3); gap: var(--space-2); }
body:has(.crm-nav) .crm-nav-item { border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-primary); padding: 7px 14px; font-size: var(--text-data); }
body:has(.crm-nav) .crm-nav-item:hover { border-color: var(--hover-line); background: var(--bg-card); }
body:has(.crm-nav) .crm-nav-item.is-on { background: var(--text-primary); color: var(--bg-primary); border-color: var(--text-primary); }

/* ── Type: sentence case, ink, plain numbers ─────────────────────────────── */
body:has(.crm-nav) .main-content, body:has(.kpi-page) .main-content { font-family: var(--font-body); }
body:has(.crm-nav) .dash-page-title, body:has(.kpi-page) .dash-page-title { font-weight: 700; letter-spacing: -0.02em; }
body:has(.crm-nav) .dash-page-title > i { color: var(--yango-orange) !important; }
/* house grammar from yango.et: tiny tracked red section labels */
body:has(.crm-nav) .dash-section-label, body:has(.kpi-page) .dash-section-label { color: var(--yango-orange); letter-spacing: .08em; font-weight: 700; }
body:has(.crm-nav) .dash-section-label::after, body:has(.kpi-page) .dash-section-label::after { background: var(--border-color); }

/* ── Sheets: every card is one sheet with a soft lift, never nested borders ── */
body:has(.crm-nav) :is(.dash-widget, .crm-panel, .crm-agent-card, .detail-card, .crm-card, .crm-score, .dash-stat-card, .att-panel, .crm-row, .crm-hero, .crm-metric, .table-responsive),
body:has(.kpi-page) :is(.dash-widget, .detail-card, .kpi-hero2, .kpi-action-row, .kpi-details, .kpi-mini-card, .kpi-lead-card) {
  background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--sheet-shadow);
}
body:has(.crm-nav) .dash-widget > .dash-stat-card,
body:has(.crm-nav) .crm-card .crm-card-body :is(.crm-panel, .detail-card) { box-shadow: none; border: 0; }
/* stat tiles: label above a big ink number, icon as a small red-tinted mark */
body:has(.crm-nav) :is(.dash-stat-card-icon, .crm-score-ico) { background: var(--bg-secondary) !important; border: 0 !important; color: var(--text-primary) !important; }
body:has(.crm-nav) :is(.dash-stat-card-value, .crm-score-val) { color: var(--text-primary) !important; font-weight: 700; }

/* ── Buttons: pills. Red = the action; outline = everything else ───────────── */
body:has(.crm-nav) :is(.btn-primary-sm, .btn-outline-sm), body:has(.kpi-page) :is(.btn-primary-sm, .btn-outline-sm) {
  border-radius: var(--radius-full) !important; min-height: 40px; padding-inline: 18px; font-weight: 600; box-shadow: none;
}
body:has(.crm-nav) .btn-primary-sm, body:has(.kpi-page) .btn-primary-sm { background: var(--yango-orange); border: 1px solid var(--yango-orange); color: #FFFFFF; }
body:has(.crm-nav) .btn-primary-sm:hover, body:has(.kpi-page) .btn-primary-sm:hover { background: var(--yango-orange-hover); border-color: var(--yango-orange-hover); color: #FFFFFF; }
body:has(.crm-nav) .btn-outline-sm, body:has(.kpi-page) .btn-outline-sm { background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-primary); }
body:has(.crm-nav) .btn-outline-sm:hover, body:has(.kpi-page) .btn-outline-sm:hover { background: var(--bg-secondary); border-color: var(--hover-line); color: var(--text-primary); }
body:has(.crm-nav) :is(.btn-primary-sm, .btn-outline-sm):active { transform: scale(.98); }
body:has(.crm-nav) :is(button, a, input, select, textarea, summary):focus-visible,
body:has(.kpi-page) :is(button, a, input, select, textarea, summary):focus-visible { outline: 2px solid var(--yango-orange); outline-offset: 2px; }

/* ── Chips and status pills: soft tints, ink-filled when chosen ──────────── */
body:has(.crm-nav) .chip { background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-primary); border-radius: var(--radius-full); }
body:has(.crm-nav) .chip.chip-on, body:has(.crm-nav) .chip-on { background: var(--text-primary); color: var(--bg-primary); border-color: var(--text-primary); }
body:has(.crm-nav) :is(.status-pill, .crm-pill) { border: 0; font-weight: 600; }
body:has(.crm-nav) .crm-badge { background: var(--bg-secondary); color: var(--text-primary); }

/* ── Inputs: 12px corners, red focus ───────────────────────── */
body:has(.crm-nav) :is(.crm-input, .form-control, .form-select, input[type=date], input[type=search], input[type=text], input[type=number], input[type=tel], select, textarea):not([type=checkbox]):not([type=radio]) {
  background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: var(--radius-md);
}
body:has(.crm-nav) ::placeholder { color: var(--text-muted); opacity: 1; }
body:has(.crm-nav) input[type=checkbox], body:has(.crm-nav) input[type=radio] { accent-color: var(--yango-orange); }

/* ── Tables: a sheet of people, sentence-case headers, soft row hover ── */
body:has(.crm-nav) .table { --bs-table-bg: transparent; --bs-table-hover-bg: var(--bg-secondary); color: var(--text-primary); }
body:has(.crm-nav) .table thead th { background: var(--bg-card); color: var(--text-muted); text-transform: none; letter-spacing: 0; font-size: var(--text-sm); font-weight: 600; border-bottom: 1px solid var(--border-color); }
body:has(.crm-nav) .table td { border-color: var(--border-color); }
body:has(.crm-nav) .table tbody tr:hover { background: rgba(255,255,255,0.03); }

/* ── In-page tabs: app segmented tabs ────────────────────────────────────── */
body:has(.crm-nav) .crm-tabs { border-bottom: 0 !important; gap: var(--space-2) !important; }
body:has(.crm-nav) .crm-tab { border-radius: var(--radius-full) !important; padding: 8px 16px !important; background: transparent; color: var(--text-muted); box-shadow: none !important; }
body:has(.crm-nav) .crm-tab.active { background: var(--text-primary) !important; color: var(--bg-primary) !important; }
body:has(.crm-nav) .crm-tab.active .crm-badge { background: rgba(0,0,0,0.15); color: var(--bg-primary); }
body:has(.crm-nav) .nav-tab[href*="status="].active, body:has(.crm-nav) [data-agents-view].active { color: var(--text-primary); }

/* ── Progress: thin tracks, red while live, green when done ──────────────── */
body:has(.crm-nav) .crm-hbar-track, body:has(.crm-nav) .crm-score-bar { background: var(--border-color); }

/* ── Queue rows: an app list of people with a red Call pill ──────────────── */
body:has(.crm-nav) .crm-row { border-left-width: 1px !important; padding-block: 14px; }
body:has(.crm-nav) .crm-row:hover { border-color: var(--hover-line); }
body:has(.crm-nav) .crm-row.is-current { border-color: var(--yango-orange) !important; box-shadow: 0 0 0 3px var(--yango-orange-subtle), var(--sheet-shadow); }

/* ── No thick coloured side-stripes (craft floor): 1px + tint carries the signal ── */
body:has(.crm-nav) .main-content [style*="border-left:3px"],
body:has(.crm-nav) .main-content [style*="border-left: 3px"],
body:has(.crm-nav) .smsnote, body:has(.crm-nav) .crm-push-card { border-left-width: 1px !important; }

/* ── Full-screen calling ────────────────────────────────── */
body.crm-focus #workspace.crm-workspace.v2 { background: var(--bg-primary); }
body.crm-focus #ws-focusbar { border-bottom-color: var(--border-color); }

/* ── Modals and dropdowns: sheets ──────────────────────────────────── */
body:has(.crm-nav) .modal-content { background: var(--bg-card) !important; color: var(--text-primary); border-radius: var(--radius-xl) !important; border: 0 !important; box-shadow: 0 24px 64px rgba(0,0,0,0.55); }
body:has(.crm-nav) .modal-header, body:has(.crm-nav) .modal-footer { border-color: var(--border-color) !important; }
body:has(.crm-nav) .btn-close { filter: none; }
body:has(.crm-nav) .dropdown-menu { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--sheet-shadow); }

/* ── Empty states: a friendly line, not a dark void ──────────────────────── */
body:has(.crm-nav) .empty-state { background: var(--bg-card); border: 1px dashed var(--border-color); border-radius: var(--radius-lg); }

/* ── My Queue scoreboard: label, number, bar — in that order ─────────────── */
body:has(.crm-nav) .crm-score-bar { order: -1; margin-top: var(--space-3); }
body:has(.crm-nav) .crm-score .crm-score-meta { padding-right: 36px; }
body:has(.crm-nav) .crm-score:has(.crm-score-bar) .crm-score-bar > i { background: var(--yango-orange); }

/* ── Queue rows as an app list: avatar · name over details · round red Call ── */
body:has(.crm-nav) .crm-row { justify-content: flex-start; gap: var(--space-4); padding: 14px 16px; }
body:has(.crm-nav) .crm-row > .crm-row-main { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
body:has(.crm-nav) .crm-row .who { order: -1; flex-basis: 100%; font-size: 15px; font-weight: 700; color: var(--text-primary); }
body:has(.crm-nav) .crm-row .crm-row-main > .crm-muted { font-size: var(--text-data); }
.crm-ava { flex: none; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-secondary); color: var(--text-primary); font-weight: 700; font-size: 15px; letter-spacing: .02em; }
body:has(.crm-nav) .crm-row.is-callback .crm-ava { background: var(--color-purple-bg); color: var(--color-purple); }
body:has(.crm-nav) .crm-row.is-push .crm-ava { background: var(--yango-orange-subtle); color: var(--yango-orange); }
body:has(.crm-nav) .crm-row .btn-primary-sm { height: 44px !important; min-width: 44px; padding-inline: 18px; }
body:has(.crm-nav) .crm-row:hover { transform: none; }

/* ── KPI home: one "You earned" sheet, the app's wallet card ─────────────── */
body:has(.kpi-page) .kpi-page { max-width: 880px; margin-inline: auto; }
body:has(.kpi-page) .kpi-card + .kpi-card { border-top: 0; }
body:has(.kpi-page) .kpi-hero2 { padding: 28px 28px 24px; gap: var(--space-5); }
body:has(.kpi-page) .kpi-hero2-greet { font-size: 1.5rem; letter-spacing: -0.02em; }
body:has(.kpi-page) .kpi-period-pill { background: var(--bg-secondary); border: 0; color: var(--text-primary); border-radius: var(--radius-full); }
body:has(.kpi-page) .kpi-hero2-money { flex-direction: column; align-items: flex-start; gap: 4px; }
body:has(.kpi-page) .kpi-hero2-moneylabel { order: -1; font-size: var(--text-body); color: var(--text-muted); font-weight: 500; }
body:has(.kpi-page) .kpi-hero2-moneylabel::first-letter { text-transform: uppercase; }
body:has(.kpi-page) .kpi-hero2-etb { font-size: clamp(3rem, 8vw, 4.5rem); font-weight: 700; letter-spacing: -0.04em; color: var(--text-primary); font-variant-numeric: tabular-nums; }
body:has(.kpi-page) .kpi-hero2-unit { font-size: 1.25rem; font-weight: 600; color: var(--text-muted); margin-top: -4px; }
body:has(.kpi-page) .kpi-hero2-money:has(.kpi-hero2-etb) { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: baseline; }
body:has(.kpi-page) .kpi-hero2-money .kpi-hero2-moneylabel { grid-column: 1 / -1; }
body:has(.kpi-page) .kpi-level-badge { border: 0; border-radius: var(--radius-full); background: var(--bg-secondary); color: var(--text-primary); font-weight: 700; }
body:has(.kpi-page) .kpi-level-badge.lv-1 { background: rgba(205,127,50,0.16); color: #E2A06A; }
body:has(.kpi-page) .kpi-level-badge.lv-2 { background: rgba(203,213,225,0.12); color: #CBD5E1; }
body:has(.kpi-page) .kpi-level-badge.lv-3 { background: var(--color-warn-bg); color: var(--color-warn); }
body:has(.kpi-page) .kpi-level-next { font-weight: 600; }
body:has(.kpi-page) .kpi-ladder-track { height: 10px; background: var(--border-color); }
body:has(.kpi-page) .kpi-ladder-fill, body:has(.kpi-page) .kpi-ladder-fill.is-gold { background: var(--yango-orange); }
body:has(.kpi-page) .kpi-ladder-mark { background: var(--bg-card); border: 2px solid var(--hover-line); }
body:has(.kpi-page) .kpi-ladder-mark.is-reached { background: var(--yango-orange); border-color: var(--bg-card); box-shadow: 0 0 0 2px var(--yango-orange); }
body:has(.kpi-page) .kpi-ladder-labels .is-reached b { color: var(--yango-orange); }
body:has(.kpi-page) .kpi-chips { gap: var(--space-2); }
body:has(.kpi-page) .kpi-chip { background: var(--bg-secondary); border: 0; border-radius: 16px; }
body:has(.kpi-page) .kpi-action-row { border-radius: 16px; padding: 16px 18px; font-weight: 600; }
body:has(.kpi-page) .kpi-action-row::after { content: '\203A'; font-size: 22px; line-height: 1; color: var(--text-muted); }
body:has(.kpi-page) .kpi-action-row.tone-warn { background: var(--bg-card); }
body:has(.kpi-page) .kpi-action-row.tone-bad { background: var(--bg-card); }
body:has(.kpi-page) .kpi-action-row:hover { border-color: var(--hover-line); }
body:has(.kpi-page) .kpi-action-row .kpi-action-count { background: var(--yango-orange); color: #FFFFFF; border-radius: var(--radius-full); padding: 2px 10px; font-size: var(--text-data); }
@media (prefers-reduced-motion: no-preference) {
  body:has(.kpi-page) .kpi-ladder-fill { transition: width .9s cubic-bezier(.16,1,.3,1); }
}

@media (max-width: 600px) {
  body:has(.crm-nav) .crm-nav-group { padding: 8px 14px; }
  body:has(.crm-nav) .crm-row { flex-wrap: wrap; }
  body:has(.kpi-page) .kpi-hero2 { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  body:has(.crm-nav) *, body:has(.kpi-page) * { transition: none !important; animation: none !important; }
}

/* KPI home refinements (seen on real numbers) */
body:has(.kpi-page) .kpi-ladder-mark { width: 16px; height: 16px; border-width: 2px; }
body:has(.kpi-page) .kpi-ladder-mark.is-reached { box-shadow: none; border-color: var(--bg-card); }
body:has(.kpi-page) .kpi-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body:has(.kpi-page) .kpi-chip { padding: 12px 14px; }
body:has(.kpi-page) .kpi-chip-label { text-transform: none; letter-spacing: 0; font-size: var(--text-sm); font-weight: 600; }
body:has(.kpi-page) .kpi-chip-value { font-size: 1.375rem; }
body:has(.kpi-page) .kpi-action-row .kpi-action-count.is-zero { background: var(--bg-secondary); color: var(--text-muted); }
@media (max-width: 600px) {
  body:has(.kpi-page) .kpi-chip { padding: 10px 12px; }
  body:has(.kpi-page) .kpi-chip-value { font-size: 1.125rem; white-space: nowrap; }
  body:has(.kpi-page) .kpi-chip-value small { font-size: 11px; }
}

/* Contrast floor (axe sweep) */
body:has(.crm-nav) .yango-footer, body:has(.kpi-page) .yango-footer { opacity: 1; color: var(--text-muted); }
body:has(.crm-nav) .main-content span[style*="opacity:.7"], body:has(.crm-nav) .main-content span[style*="opacity: .7"] { opacity: 1 !important; color: var(--text-muted); }
body:has(.crm-nav) .alert { border: 0; border-radius: var(--radius-md); }
body:has(.crm-nav) .alert-danger  { background: var(--color-churn-bg);  color: var(--color-churn); }
body:has(.crm-nav) .alert-success { background: var(--color-active-bg); color: var(--color-active); }
body:has(.crm-nav) .alert-warning { background: var(--color-warn-bg);   color: var(--color-warn); }
body:has(.crm-nav) .alert-info    { background: var(--color-new-bg);    color: var(--color-new); }
body:has(.crm-nav) .table, body:has(.crm-nav) .table-dark, body:has(.kpi-page) .table {
  --bs-table-color: var(--text-primary); --bs-table-striped-color: var(--text-primary); --bs-table-hover-color: var(--text-primary);
  --bs-table-active-color: var(--text-primary); --bs-table-striped-bg: rgba(255,255,255,0.03); --bs-table-bg: transparent; --bs-table-border-color: var(--border-color);
  color: var(--text-primary);
}
/* A 1px coloured edge on a 20px corner reads as a rendering glitch, not a signal: hairline all round. */
body:has(.crm-nav) .main-content [style*="border-left:3px"], body:has(.crm-nav) .main-content [style*="border-left: 3px"] { border-left-color: var(--border-color) !important; }

/* ==========================================================================
   Finish-review fix batch (reviewer disposition: fix)
   ========================================================================== */

/* 2 · Red only on press or live: headings and links are ink */
body:has(.crm-nav) .dash-section-label, body:has(.kpi-page) .dash-section-label {
  color: var(--text-primary); text-transform: none; letter-spacing: -0.01em; font-size: 15px; font-weight: 700;
}
body:has(.crm-nav) .main-content a:not([class*="btn"]):not(.chip):not(.crm-nav-item):not(.crm-nav-group):not(.nav-tab):not(.kpi-action-row) {
  color: var(--text-primary); text-decoration-color: var(--hover-line); text-underline-offset: 3px;
}
body:has(.crm-nav) .main-content a:not([class*="btn"]):not(.chip):hover { text-decoration-color: var(--yango-orange); }
body:has(.crm-nav) .crm-tel { color: var(--text-primary) !important; }

/* 3 · No coloured icon tiles, no tracked grey caps */
body:has(.crm-nav) .main-content :not(kbd):not(code):not(.crm-ava) { text-transform: none !important; }
body:has(.crm-nav) :is(.crm-kpi-label, .crm-score-label, .dash-stat-card-label, .crm-panel-title, .crm-metric .l, .crm-section-label, .crm-card-title) {
  letter-spacing: 0 !important; font-size: var(--text-sm); font-weight: 600; color: var(--text-muted);
}
body:has(.crm-nav) .crm-panel-title { color: var(--text-primary); font-size: var(--text-body); }
body:has(.crm-nav) :is(.crm-kpi-ico, .badge-ico, .dash-stat-card-icon, .crm-score-ico) {
  background: transparent !important; color: var(--text-muted) !important; border: 0 !important; width: auto; height: auto; font-size: 15px;
}
body:has(.crm-nav) .crm-kpi { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--sheet-shadow); }
body:has(.crm-nav) .crm-kpi-val { color: var(--text-primary); font-weight: 700; }

/* 4 · No side stripes anywhere: one hairline, the signal moves into a tinted icon */
body:has(.crm-nav) :is(.crm-insight, .smsnote, .crm-push-card, .crm-row, .detail-card) { border-left-width: 1px !important; border-left-color: var(--border-color) !important; }
body:has(.crm-nav) .crm-insight .ico { border-radius: 50%; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
body:has(.crm-nav) .crm-insight.good .ico { background: var(--color-active-bg); color: var(--color-active); }
body:has(.crm-nav) .crm-insight.warn .ico { background: var(--color-warn-bg); color: var(--color-warn); }
body:has(.crm-nav) .crm-insight.bad .ico  { background: var(--color-churn-bg); color: var(--color-churn); }
body:has(.crm-nav) .smsnote-tell .smsnote-title::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--color-active); margin-right: 8px; vertical-align: middle; }

/* 5 · Queue first: the six-card band becomes one compact summary line */
body:has(.crm-nav) .crm-scoreboard { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); align-items: center;
  background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--sheet-shadow); padding: 14px 20px; margin-bottom: var(--space-5); }
body:has(.crm-nav) .crm-scoreboard .crm-score { background: transparent; border: 0; box-shadow: none; padding: 0; display: block; min-width: 0; }
body:has(.crm-nav) .crm-scoreboard .crm-score-ico { display: none; }
body:has(.crm-nav) .crm-scoreboard .crm-score-meta { display: flex !important; flex-direction: row-reverse !important; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 6px; padding-right: 0 !important; }
body:has(.crm-nav) .crm-scoreboard .crm-score-val { font-size: 1.25rem !important; }
body:has(.crm-nav) .crm-scoreboard .crm-score-label { font-size: var(--text-data); }
body:has(.crm-nav) .crm-scoreboard .crm-score:has(.crm-score-bar) { flex: 1 1 260px; }
body:has(.crm-nav) .crm-scoreboard .crm-score-bar { flex-basis: 100%; order: 0; margin-top: 6px; }

/* 6 · Call screen: an app profile header */
.crm-ava-lg { width: 56px; height: 56px; font-size: 19px; }
body:has(.crm-nav) .crm-hero { display: flex; align-items: center; gap: var(--space-4); }
body:has(.crm-nav) .crm-hero > div:last-child { text-align: right; }
body:has(.crm-nav) .crm-tel { font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* 7 · Phone width: lists read as rows of names, floating buttons stay out of the way */
@media (max-width: 600px) {
  body:has(.crm-nav) table[data-filterable] :is(th, td):is(:nth-child(2), :nth-child(5), :nth-child(7), :nth-child(8), :nth-child(9)) { display: none; }
  body:has(.crm-nav) table[data-filterable] td:first-child { min-width: 0; width: 55%; }
  body:has(.crm-nav) table[data-filterable] td:first-child > div[title] { max-width: 100% !important; }
  body:has(.crm-nav) .crm-hero { flex-wrap: wrap; }
  body:has(.crm-nav) .crm-hero > div:last-child { text-align: left; flex-basis: 100%; }
  body:has(.crm-nav) .hw-btn { width: 40px !important; height: 40px !important; bottom: 12px !important; left: 12px !important; font-size: 16px; box-shadow: var(--sheet-shadow); }
}
body:has(.crm-nav) .hw-btn { width: 44px; height: 44px; }
/* Phone call screen: stacked columns size to their content (the brief was spilling under the Log panel) */
@media (max-width: 880px) {
  body.crm-focus #workspace.crm-workspace.v2 > * { min-height: auto !important; max-height: none !important; height: auto !important; align-self: start !important; overflow: visible !important; }
}
@media (max-width: 880px) {
  body.crm-focus #workspace.crm-workspace.v2 { grid-template-rows: none !important; grid-auto-rows: auto !important; align-content: start !important; overflow-y: auto !important; }
}
@media (max-width: 600px) {
  body:has(.crm-nav) .dash-page-header { flex-direction: column; align-items: flex-start !important; text-align: left !important; gap: var(--space-3); }
}

/* ==========================================================================
   Finish-review fix batch 2 (verdict pass: fix)
   ========================================================================== */
/* 3 · insight icons are ink glyphs; the sentence carries the signal */
body:has(.crm-nav) .crm-insight .ico, body:has(.crm-nav) .crm-insight.good .ico, body:has(.crm-nav) .crm-insight.warn .ico, body:has(.crm-nav) .crm-insight.bad .ico {
  background: transparent !important; color: var(--text-primary) !important; width: auto; height: auto; }

/* regression · two KPI tiles share the row */
body:has(.kpi-page) .kpi-chips { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }

/* regression · queue summary: label then figure, the goal bar directly under its own figure */
body:has(.crm-nav) .crm-scoreboard .crm-score-meta { flex-direction: row !important; justify-content: flex-start !important; }
body:has(.crm-nav) .crm-scoreboard .crm-score-label { order: -1; }
body:has(.crm-nav) .crm-scoreboard .crm-score:has(.crm-score-bar) { flex: 0 1 240px; }
body:has(.crm-nav) .crm-scoreboard .crm-score-bar { order: 1; flex-basis: 100%; max-width: 240px; }

/* 7 · Call Lists on a phone: stacked app rows, not a cut-down table */
@media (max-width: 600px) {
  body:has(.crm-nav) table[data-filterable] thead { display: none; }
  body:has(.crm-nav) table[data-filterable], body:has(.crm-nav) table[data-filterable] tbody { display: block; }
  body:has(.crm-nav) table[data-filterable] tbody tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 14px 16px; border-bottom: 1px solid var(--border-color); }
  body:has(.crm-nav) table[data-filterable] tbody tr[hidden] { display: none; }
  body:has(.crm-nav) table[data-filterable] td { display: block; padding: 0 !important; border: 0 !important; text-align: left !important; font-size: var(--text-data); color: var(--text-muted); }
  body:has(.crm-nav) table[data-filterable] td:first-child { flex-basis: 100%; width: auto; color: var(--text-primary); font-size: 15px; }
  body:has(.crm-nav) table[data-filterable] td:first-child > div[title] { max-width: 100% !important; margin-top: 8px !important; }
  body:has(.crm-nav) table[data-filterable] td:nth-child(3)::before { content: 'Drivers '; }
  body:has(.crm-nav) table[data-filterable] td:nth-child(4)::before { content: 'Called '; }
  body:has(.crm-nav) table[data-filterable] td:nth-child(6)::after { content: ' success'; }
  body:has(.crm-nav) table[data-filterable] td:nth-child(7) { display: block !important; margin-left: auto; }
  body:has(.crm-nav) table[data-filterable] :is(td):is(:nth-child(3), :nth-child(4), :nth-child(6)) { color: var(--text-primary); font-weight: 600; }
  body:has(.crm-nav) .crm-tf { flex-wrap: wrap; }
  body:has(.crm-nav) .crm-tf-search { flex-basis: 100%; max-width: none; }
  /* help button: off on CRM phone pages so nothing covers a row; the Log-a-call pill keeps a clear lane */
  body:has(.crm-nav) .hw-btn, body:has(.crm-nav) .hw-panel { display: none !important; }
  body:has(.crm-nav) .main-content { padding-bottom: 104px; }
}
body:has(.crm-nav) .crm-scoreboard .crm-score { overflow: visible; }
/* DESIGN.md rule conformance (documenter findings): done = green, decoration = ink */
body:has(.kpi-page) .kpi-hero2.is-max .kpi-ladder-fill { background: var(--color-active); }
body:has(.crm-nav) .dash-page-title > i, body:has(.kpi-page) .dash-page-title > i { color: var(--text-primary) !important; }
body:has(.crm-nav) .crm-tab.active, body:has(.crm-nav) .nav-tab.active { box-shadow: none !important; border-bottom-color: transparent !important; }
body:has(.crm-nav) .crm-ph > code { color: var(--text-primary); }