/* ═══════════════════════════════════════════════════════════════════════
   demo.css — everything the Lloyds demo adds on top of credibl.css.
   Rules: no new colours (every colour is a var(--token) from credibl.css;
   the only literals permitted are #fff and rgba() built from tokens),
   named exclusive regions per work package (Appendix B.7), and the 1280×720
   readability floor (§5.4.4: body ≥12.5px, table figures ≥13px, axis labels
   ≥11px, KPI values 25px, no horizontal page scroll).
   ═══════════════════════════════════════════════════════════════════════ */

/* === base === (WP0) ─────────────────────────────────────────────────── */

.cx-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.cx-sr-only *{max-width:1px}
body.cx-scroll-lock{overflow:hidden}

/* The main column splits into the content host and the docked proposals panel.
   `min-height:0` on both is what stops the 100vh shell clipping at 1280×720. */
.cx-main-body{flex:1;min-height:0;display:flex;align-items:stretch}
.cx-main-body>.content{flex:1;min-width:0;min-height:0}
.cx-proposals-host{flex:0 0 300px;min-height:0;overflow-y:auto;background:var(--surface);border-left:1px solid var(--line)}
.topbar{gap:16px;padding:0 20px}
.cx-topbar-left{display:flex;align-items:center;min-width:0;flex:1 1 auto;overflow:hidden}
.crumbs{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumbs svg{flex:0 0 14px}
.org-pill{flex:0 0 auto;white-space:nowrap}
.topbar-right{flex:0 0 auto;gap:10px}
.cx-stage-chip{margin-left:2px}
.cx-persona-select{max-width:220px}
.topbar-right .label-caps{white-space:nowrap}
#period-select{max-width:150px}

/* Sidebar additions: the read-only marker and label truncation. */
.sidebar .sb-item .cx-nav-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-nav-ro{margin-left:auto;padding:1px 6px;border-radius:var(--r-pill);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sidebar .sb-item .cx-nav-ro+.fid{margin-left:6px}

/* The router moves focus to the page <h1> on navigation so the screen is
   announced. It is not an interactive control, so it takes no focus ring —
   the aria-live announcement and the heading itself do that job. */
.page h1[tabindex="-1"]:focus,.page h1[tabindex="-1"]:focus-visible{outline:none}

/* Re-renders must not replay the entrance animation (§5.6). */
.content[data-rerender="1"] .page{animation:none}

/* Overflow menu */
.cx-overflow-wrap{position:relative}
.cx-overflow{position:absolute;right:0;top:calc(100% + 6px);z-index:50;min-width:200px;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lifted)}
.cx-overflow-item{display:block;width:100%;text-align:left;padding:8px 10px;border:none;border-radius:var(--r-sm);background:none;font-size:13px;font-weight:500;color:var(--body)}
.cx-overflow-item:hover{background:var(--surface-2);color:var(--ink)}

/* === cx- === (WP0 — shared components) ─────────────────────────────── */

/* KPI */
.cx-kpis-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cx-kpis-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cx-kpis-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cx-kpis-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.cx-kpi-btn{text-align:left;position:relative}
.cx-kpi-btn:hover{box-shadow:var(--shadow-raised)}
.cx-kpi-cue{position:absolute;right:14px;top:16px;color:var(--faint);opacity:0;transition:opacity .2s}
.cx-kpi-btn:hover .cx-kpi-cue,.cx-kpi-btn:focus-visible .cx-kpi-cue{opacity:1}
.cx-kpi-sub{margin-top:4px;font-size:12px;color:var(--muted)}

/* Chips */
.cx-chip-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cx-chip-btn{border:none;font-family:inherit}
.cx-chip-btn[aria-pressed="true"]{box-shadow:inset 0 0 0 1px var(--blue-border)}
.cx-chip-mono{font-family:var(--mono);font-size:11px}
.cx-tag{padding-right:4px}
.cx-tag-x{display:inline-grid;place-items:center;width:16px;height:16px;margin-left:2px;padding:0;border:none;border-radius:50%;background:transparent;color:currentColor;opacity:.65}
.cx-tag-x:hover{opacity:1;background:rgba(13,26,56,.08)}

/* Tables */
.cx-table-block{display:flex;flex-direction:column;gap:12px;min-width:0}
.cx-table-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.cx-search-wrap{position:relative;display:flex;align-items:center;flex:0 1 260px}
.cx-search-wrap svg{position:absolute;left:10px;color:var(--faint);pointer-events:none}
.cx-table-search{padding-left:32px;font-size:13px}
.cx-filter-group{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.cx-filter-label{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cx-table-count{margin-left:auto;font-size:11.5px;color:var(--muted);white-space:nowrap}
/* Tables scroll rather than overflow the column. On macOS the overlay
   scrollbar is invisible until you touch it, so a clipped column reads as a
   rendering fault on a Teams share — the bar is always drawn (QA at 1920). */
.cx-table-scroll{overflow-x:auto;overflow-y:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);scrollbar-width:thin;scrollbar-color:var(--separator) transparent}
.cx-table-scroll::-webkit-scrollbar{width:9px;height:9px}
.cx-table-scroll::-webkit-scrollbar-thumb{background:var(--separator);border-radius:5px}
.cx-table-scroll::-webkit-scrollbar-track{background:transparent}
.cx-table{font-size:13.5px}
.cx-table thead th{position:sticky;top:0;z-index:2}
.cx-table-dense td{padding:8px 12px}
.cx-table-dense th{padding:8px 12px}
.cx-th-btn{display:inline-flex;align-items:center;gap:5px;padding:0;border:none;background:none;font-size:inherit;font-weight:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit}
.cx-th-btn svg{opacity:0;transition:opacity .15s}
.cx-th-btn:hover{color:var(--ink)}
.cx-th-btn:hover svg,.cx-th-btn.is-sorted svg{opacity:.7}
.cx-th-btn.is-sorted{color:var(--blue-600)}
.cx-th-actions{text-align:right}
.cx-td-actions{text-align:right;white-space:nowrap}
.cx-td-actions>*+*{margin-left:6px}
.cx-td-actions>*{vertical-align:middle}
/* The actions column is pinned to the right edge of the scroller. Without this the
   entity-resolution table renders its controls ~440px beyond the visible container
   at 1440 and they cannot be reached without a horizontal scroll nobody signals (M2);
   it also stops the icon being half-clipped by the boundary elsewhere (M6). */
.cx-table td.cx-td-actions{position:sticky;right:0;background:var(--surface)}
.cx-table thead th.cx-th-actions{right:0;z-index:3}
/* Reserve the icon slot on rows that have no trail, so the controls beside it line up
   down the column instead of shifting 30px per row (M6). Scoped to tables that
   actually carry a trail, so every other actions column keeps its current width. */
.cx-table:has(td.cx-td-actions .cx-trace-btn) td.cx-td-actions:not(:has(.cx-trace-btn))::after{content:"";display:inline-block;width:24px;height:24px;margin-left:6px;vertical-align:middle}
.cx-row-link{display:inline;padding:0;border:none;background:none;font:inherit;color:var(--blue-600);font-weight:600;text-align:left}
.cx-row-link:hover{text-decoration:underline}
.cx-table-empty{padding:28px 14px;text-align:center;color:var(--muted);font-size:13px}
.cx-table-foot{font-size:12px;color:var(--muted)}
.cx-total-row td{border-top:1px solid var(--separator);background:var(--surface-2);font-weight:600;color:var(--ink)}

/* Drawer additions */
.cx-backdrop{position:fixed;inset:0;z-index:55;background:rgba(13,26,56,.28);opacity:0;transition:opacity .3s;backdrop-filter:blur(1px)}
.cx-backdrop.open{opacity:1}
.cx-drawer-titles{flex:1;min-width:0}
.cx-drawer-sub{font-size:12px;color:var(--muted);margin-top:2px}
.cx-drawer-foot{padding:14px 20px;border-top:1px solid var(--line-soft);background:var(--surface-2);font-size:12.5px}
.drawer .dr-body>*+*{margin-top:14px}

/* Popover */
.cx-popover{position:fixed;z-index:75;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-lifted);opacity:0;transform:translateY(4px);transition:opacity .16s,transform .16s}
.cx-popover.open{opacity:1;transform:none}
.cx-pop-h{display:flex;align-items:flex-start;gap:8px;padding:12px 14px 0}
.cx-pop-h h4{flex:1;font-family:var(--display);font-size:13.5px;font-weight:600;color:var(--navy)}
.cx-pop-x{display:grid;place-items:center;width:22px;height:22px;padding:0;border:none;border-radius:6px;background:none;color:var(--muted)}
.cx-pop-x:hover{background:var(--surface-2);color:var(--ink)}
.cx-pop-b{padding:10px 14px 14px;font-size:12.5px;color:var(--body)}
.cx-pop-b>*+*{margin-top:8px}
.cx-formula{padding:8px 10px;border-radius:var(--r-md);background:var(--surface-2);border:1px solid var(--line-soft);font-family:var(--mono);font-size:12px;color:var(--ink);overflow-x:auto}
.cx-explain-btn{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);font-size:12px;font-weight:600;color:var(--muted)}
.cx-explain-btn:hover{border-color:var(--blue-border);color:var(--blue-600);background:var(--blue-50)}

/* Stepper */
.cx-stepper{display:flex;flex-wrap:wrap;gap:6px;list-style:none;counter-reset:step}
.cx-step{flex:1 1 150px;min-width:0;position:relative}
.cx-step-hit{display:flex;align-items:flex-start;gap:10px;width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);text-align:left}
button.cx-step-hit:hover{border-color:var(--blue-border);background:var(--blue-50)}
.cx-step.is-current .cx-step-hit{border-color:var(--blue-500);box-shadow:0 0 0 2px var(--blue-100)}
.cx-step-num{display:grid;place-items:center;width:22px;height:22px;flex:0 0 22px;border-radius:50%;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);font-family:var(--mono);font-size:11px;font-weight:600;color:var(--muted)}
.cx-step-num.is-done{background:var(--green-50);color:var(--green-600);box-shadow:inset 0 0 0 1px var(--green-border)}
.cx-step-body{min-width:0;display:flex;flex-direction:column;gap:6px}
.cx-step-label{font-size:13px;font-weight:600;color:var(--ink)}
.cx-step-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.cx-step-owner{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);font-family:var(--mono);font-size:9.5px;font-weight:700;color:var(--muted)}
.cx-step-due{font-size:11px;color:var(--faint)}
.cx-stepper-compact .cx-step-hit{padding:6px 10px}

/* Toast additions */
.cx-toast-good{border-color:var(--green-border)}
.cx-toast-warn{border-color:var(--amber-border)}
.cx-toast-action{margin-left:12px;padding:0;border:none;background:none;font-size:13px;font-weight:600;color:var(--blue-300)}

/* Proposals & decisions panel (replaces the agent console, D-04) */
.cx-proposals{display:flex;flex-direction:column;height:100%}
.cx-prop-h{display:flex;align-items:flex-start;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line-soft);background:linear-gradient(to bottom,var(--surface),rgba(247,249,252,.5))}
.cx-prop-h-main{flex:1;min-width:0}
.cx-prop-h h3{font-family:var(--display);font-size:14px;font-weight:600;color:var(--navy)}
.cx-prop-strap{margin-top:4px;font-size:11.5px;line-height:1.5;color:var(--muted)}
.cx-prop-count{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:var(--r-pill);background:var(--blue-50);box-shadow:inset 0 0 0 1px var(--blue-border);font-size:11px;font-weight:600;color:var(--blue-600)}
.cx-prop-toggle{display:grid;place-items:center;width:24px;height:24px;padding:0;border:none;border-radius:6px;background:none;color:var(--muted)}
.cx-prop-list{flex:1;min-height:0;overflow-y:auto;padding:14px 14px 6px;display:flex;flex-direction:column;gap:12px}
.cx-prop{padding:12px;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface)}
.cx-prop-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cx-prop-id{font-size:11px;font-weight:600;color:var(--faint)}
.cx-prop-title{margin-top:6px;font-size:13px;font-weight:600;line-height:1.4;color:var(--ink)}
.cx-prop-why{margin-top:4px;font-size:12px;line-height:1.55;color:var(--muted)}
.cx-prop-meta{margin-top:8px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:11.5px;color:var(--faint)}
.cx-prop-evidence{display:inline-flex;align-items:center;gap:4px;font-weight:600;color:var(--blue-600)}
.cx-prop-evidence:hover{text-decoration:underline}
.cx-prop-block{margin-top:8px;padding:8px 10px;border-radius:var(--r-md);background:var(--amber-50);border:1px solid var(--amber-border);font-size:11.5px;line-height:1.5;color:var(--amber-500)}
.cx-prop-actions{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px}
.cx-prop-ro{font-size:11.5px;color:var(--muted)}
.cx-prop-empty{padding:16px 4px;font-size:12.5px;line-height:1.6;color:var(--muted)}
.cx-prop-history{padding:12px 16px 18px;border-top:1px solid var(--line-soft)}
.cx-prop-hist-list{margin-top:8px;list-style:none;display:flex;flex-direction:column;gap:6px}
.cx-prop-hist-list li{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--body)}
.cx-hist-who{font-size:11px;color:var(--faint)}
.cx-proposals.is-collapsed{height:auto}

/* Agent trace icon (D-24). The one shared class this feature adds to demo.css:
   it is used by four components outside screens/trace.js, so it cannot live in
   trc.css. Everything else the trace page needs is trc- prefixed and ships there. */
/* `position:relative` is load-bearing: the button carries a `.cx-sr-only` name, and
   an absolutely positioned span with no positioned ancestor of its own resolves
   against `.content`. Inside a horizontally scrolled table it then escapes the
   table's scroll container and widens the content column (WP12). */
/* Two classes deep on purpose: `.btn.sm{padding:6px 12px}` and `.btn.ghost{color:...}`
   are (0,2,0) and beat a single `.cx-trace-btn`, which pushed the glyph flush right
   inside the 24px box and threw the hover chip and focus ring off centre (M1).
   `--muted` rather than `--faint`: the glyph is the control's only affordance, so it
   must clear 3:1 against the card surface for WCAG 1.4.11 (M5). */
.cx-trace-btn,.btn.cx-trace-btn{position:relative;display:inline-grid;place-items:center;width:24px;height:24px;padding:0;gap:0;border:1px solid transparent;border-radius:6px;color:var(--muted)}
.btn.cx-trace-btn svg{width:13px;height:13px}
.cx-trace-btn:hover,.btn.cx-trace-btn:hover{background:var(--blue-50);border-color:var(--blue-border);color:var(--blue-600)}
.cx-trace-btn:focus-visible,.btn.cx-trace-btn:focus-visible{color:var(--blue-600)}
/* The labelled form (L5), used only on `.cx-prop` proposal cards: a text link that
   also carries `.cx-prop-evidence`, so it reads as that card's second evidence link
   rather than a 24px icon box. Two classes deep and after the icon rule above, so it
   unpins the box `.btn.cx-trace-btn` sets; `font:inherit` precedes `font-weight` on
   purpose (the shorthand resets weight). Dense table rows stay icon-only. */
.cx-trace-btn-labelled,.btn.cx-trace-btn-labelled{display:inline-flex;align-items:center;gap:4px;width:auto;height:auto;padding:0;border:0;background:none;font:inherit;font-weight:600;color:var(--blue-600)}
.cx-trace-btn-labelled:hover,.btn.cx-trace-btn-labelled:hover{background:none;border-color:transparent;color:var(--blue-600);text-decoration:underline}

/* Review queue */
.cx-rq{display:flex;flex-direction:column;gap:14px}
.cx-rq-bulk{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface-2)}
.cx-rq-bulk-count{font-size:12.5px;font-weight:600;color:var(--ink)}
.cx-rq-bulk-note{flex:1 0 100%;font-size:12px;color:var(--muted)}
.cx-rq-group-h{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.cx-rq-group-h h4{font-family:var(--display);font-size:13px;font-weight:600;color:var(--navy)}
.cx-rq-item{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.cx-rq-item+.cx-rq-item{margin-top:6px}
.cx-rq-item.is-decided{opacity:.7}
.cx-rq-check{margin-top:3px;width:15px;height:15px;accent-color:var(--blue-600);flex:0 0 15px}
.cx-rq-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;cursor:pointer}
.cx-rq-title{font-size:13px;font-weight:600;color:var(--ink)}
.cx-rq-detail{font-size:12.5px;color:var(--muted);line-height:1.5}
.cx-rq-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:11.5px;color:var(--faint)}
/* §5.1.1: the trace icon's DOM home is `.cx-rq-actions` (a link inside the row's
   `<label for>` would swallow the click into the checkbox) but its *visual* home is
   the meta line. `order:-1` on the icon puts it first in the row; `align-self:flex-end`
   drops the whole actions group to the item's last line, which is the meta line — the
   icon then sits level with the RVW id, confidence chip and amount (L1). Deliberately
   here and not in screens/trc.css: trc.css is injected lazily by screens/trace.js on
   first visit to a trail, so a rule living there would not apply to the ledger until
   the user had opened a trace page. */
.cx-rq-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto;align-self:flex-end}
.cx-rq-empty{font-size:12.5px;color:var(--muted);line-height:1.6}

/* Audit log */
.cx-audit{display:flex;flex-direction:column;gap:12px}
.cx-audit-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.cx-audit-list{list-style:none;display:flex;flex-direction:column;gap:2px}
.cx-audit-entry{display:flex;gap:12px;padding:10px 12px;border-radius:var(--r-lg)}
.cx-audit-entry:hover{background:var(--surface-2)}
.cx-audit-entry.is-session{box-shadow:inset 2px 0 0 var(--blue-500)}
.cx-audit-av{margin-top:2px}
.cx-audit-body{flex:1;min-width:0}
.cx-audit-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cx-audit-action{font-size:12.5px;font-weight:600;color:var(--navy)}
.cx-audit-object{font-size:11.5px;color:var(--muted)}
.cx-audit-at{margin-left:auto;font-size:11px;color:var(--faint);white-space:nowrap}
.cx-audit-detail{margin-top:3px;font-size:12.5px;line-height:1.55;color:var(--body)}
.cx-audit-delta{margin-top:4px;display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:var(--r-sm);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-soft);font-size:11.5px}
.cx-audit-before{color:var(--muted);text-decoration:line-through}
.cx-audit-after{color:var(--navy);font-weight:600}
.cx-audit-chain{margin-top:5px;display:flex;flex-wrap:wrap;gap:10px;font-size:10.5px;color:var(--faint)}
.cx-audit-ev{color:var(--blue-600);font-weight:600}
.cx-audit-ev:hover{text-decoration:underline}
.cx-audit-note,.cx-audit-more{font-size:11.5px;line-height:1.6;color:var(--muted)}
.cx-audit-empty{font-size:12.5px;color:var(--muted)}

/* Charts */
.cx-chart-figure{display:flex;flex-direction:column;gap:10px;min-width:0}
.cx-chart{display:block;width:100%;height:auto;overflow:visible}
.cx-legend{font-size:12px}
.cx-legend-item{display:inline-flex;align-items:center;gap:6px}
.cx-legend-item b{font-family:var(--mono);font-size:11.5px;color:var(--navy)}
.cx-chart-note{font-size:11.5px;color:var(--muted)}
.cx-line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cx-line.is-dashed{stroke-dasharray:5 4}
.cx-dot{transition:r .15s}
.cx-dot:hover,.cx-dot:focus-visible{r:5.5}
.cx-target-line{fill:none;stroke:var(--navy);stroke-width:1.5;stroke-dasharray:6 4;opacity:.65}
.cx-target-plate{fill:var(--surface);opacity:.92}
.cx-target-label{font-family:var(--mono);font-size:10.5px;font-weight:600;fill:var(--navy);paint-order:stroke;stroke:var(--surface);stroke-width:3px;stroke-linejoin:round}
/* The target label sits at the end of its own dashed line: without a halo the
   dashes read as characters inside the words (QA at 1920). */
.cx-annot-label{paint-order:stroke;stroke:var(--surface);stroke-width:3px;stroke-linejoin:round}
.cx-band{fill:var(--blue-500);opacity:.08}
.cx-annot-dot{fill:none;stroke:var(--amber-500);stroke-width:2}
.cx-annot-leader{stroke:var(--amber-500);stroke-width:1;stroke-dasharray:2 2}
.cx-annot-label{font-family:var(--sans);font-size:11px;font-weight:600;fill:var(--amber-500)}
.cx-bar{transition:opacity .15s}
.cx-bar:hover,.cx-bar:focus-visible{opacity:.82}
.cx-stack{transition:opacity .15s}
.cx-stack:hover,.cx-stack:focus-visible{opacity:.85}
.cx-stack-label{font-family:var(--mono);font-size:10.5px;font-weight:600;fill:#fff}
.cx-wf-bar.is-total{fill:var(--navy)}
.cx-wf-bar.is-up{fill:var(--rose-500)}
.cx-wf-bar.is-down{fill:var(--green-500)}
.cx-wf-bar.is-residual{fill:var(--amber-500)}
.cx-wf-value{font-family:var(--mono);font-size:10.5px;font-weight:600;fill:var(--navy)}
.cx-wf-cat{font-size:10.5px}
.cx-wf-connector{stroke:var(--separator);stroke-width:1;stroke-dasharray:3 3}
.cx-wf-residual-note{color:var(--amber-500);font-weight:600}
.cx-donut{max-width:180px}
.cx-donut-figure{align-items:center}
.cx-donut-value{font-family:var(--mono);font-size:22px;font-weight:600;fill:var(--navy)}
.cx-donut-label{font-family:var(--sans);font-size:11px;fill:var(--muted)}
.cx-donut-arc{transition:opacity .15s}
.cx-donut-arc:hover,.cx-donut-arc:focus-visible{opacity:.85}

/* Chart tooltip — one implementation for every chart */
.cx-tip{position:fixed;z-index:85;pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s;padding:9px 12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lifted);font-size:12px;color:var(--body);max-width:280px}
.cx-tip.show{opacity:1;transform:none}
.cx-tip-title{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.cx-tip-row{display:flex;align-items:center;gap:8px}
.cx-tip-row i{display:inline-block;width:9px;height:9px;border-radius:3px;flex:0 0 9px}
.cx-tip-row span{flex:1;min-width:0}
.cx-tip-row b{font-family:var(--mono);font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums}

/* Readability floor at 1280×720 (§5.4.4) */
/* The topbar is the first thing to run out of room at 1280. Shed the labels
   and the org pill before anything wraps — nothing in the topbar may wrap,
   because .topbar is a fixed 56px row. */
@media(max-width:1560px){
  .topbar-right .label-caps{display:none}
}
@media(max-width:1400px){
  .cx-proposals-host{flex-basis:272px}
  .page{padding:18px 22px 96px}
  .kpis{gap:14px}
  .grid2,.grid3,.grid-main-aside{gap:16px}
  .org-pill{display:none}
  .cx-persona-select{max-width:180px}
}
@media(max-width:1240px){
  .cx-proposals-host{display:none}
  .cx-kpis-5{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){
  .cx-popover,.cx-tip,.cx-dot,.cx-bar,.cx-stack,.cx-donut-arc,.drawer,.cx-backdrop,.toast{transition:none}
  .cx-chart.is-animated *{animation:none}
}

/* === screen CSS ────────────────────────────────────────────────────────────
   The per-screen regions this file once reserved are empty and stay empty.
   Every screen ships its own stylesheet and loads it itself, once, from its
   module (`ensureStylesheet('screens/<prefix>.css')`), so index.html and this
   file are untouched by screen work:

     pos- → screens/pos.css   (WP1 · Position)
     lin- → screens/lin.css   (WP2 · Lineage explorer)
     int- → screens/int.css   (WP3 · Primary data intake)
     mth- → screens/mth.css   (WP4 · Methodology & movement)
     rep- → screens/rep.css   (WP5 · Reporting cycle & sign-off)
     sup- → screens/sup.css   (WP6 · Supplier 360)
     scn- → screens/scn.css   (WP7 · Scenarios & targets)
     adm- → screens/adm.css   (WP8 · Admin)
     val- → screens/val.css   (WP8 · Value & commercial)

   demo.css holds only the base layer and the shared `cx-` components.
   ────────────────────────────────────────────────────────────────────────── */