/* anofox-visualization — dashboard canvas styles (structure only).
 *
 * Every colour, shadow and gradient here is a design token (`var(--ax-*)`).
 * The token VALUES come from one theme definition (src/theme.rs →
 * `ResolvedTheme::css_vars()`): the browser builder injects them into
 * <style id="ax-theme">, and `serve`, the locked/served pages, the CLI's
 * static HTML and the HTML export embed the same block next to this file.
 * A test (tests/theme_css.rs) fails on any colour literal in this file.
 *
 * The builder chrome (sidebar, toolbar, editor, explore) is styled in
 * web/index.html on its own neutral `--ui-*` tokens and does NOT follow the
 * dashboard theme (plan T12).
 */

/* ---- generic controls inside a dashboard (buttons/selects) ---- */
button{background:var(--ax-btn-bg);color:var(--ax-btn-ink);border:0;border-radius:9px;padding:.5rem .95rem;font-weight:600;font-size:.85rem;cursor:pointer;box-shadow:var(--ax-btn-shadow);transition:transform .12s ease,box-shadow .12s ease,filter .12s ease}
button:hover{filter:brightness(1.06);box-shadow:var(--ax-btn-shadow-hover)}
button:active{transform:translateY(0)}
button:disabled{opacity:.5;cursor:default;box-shadow:none;transform:none}
.btn2{background:var(--ax-btn2-bg);color:var(--ax-ink);border:1px solid var(--ax-line);box-shadow:var(--ax-btn2-shadow)}
.btn2:hover{background:var(--ax-btn2-hover);filter:none}
select{border:1px solid var(--ax-line);border-radius:9px;padding:.45rem .55rem;font-size:.82rem;background:var(--ax-input-bg);color:var(--ax-ink);cursor:pointer;transition:border-color .12s}
select:hover{border-color:var(--ax-input-border-hover2)}

/* ---- canvas ---- */
.dash{padding:.85rem 1.7rem 1.6rem;overflow:auto;background:var(--ax-canvas);background-attachment:fixed;color:var(--ax-ink);font-family:var(--ax-font-body)}
body.embed{background:var(--ax-bg-image);background-color:var(--ax-bg);background-attachment:fixed;color:var(--ax-ink);font-family:var(--ax-font-body)}
body.embed::before{background-image:var(--ax-bg-pattern)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1.15rem;align-content:start}
@media(max-width:760px){.grid>.panel{grid-column:1/-1 !important}}

/* ---- dashboard header (::DASHBOARD_TITLE / ::BRAND / ::LOGO) ---- */
.dp-head{grid-column:1/-1;display:flex;align-items:center;gap:.8rem;margin:.2rem 0 .3rem;color:var(--ax-header-ink)}
.dp-head .dp-logo{height:var(--ax-logo-h);width:auto;display:block}
.dp-head .dp-head-text{display:flex;flex-direction:column;gap:.05rem;min-width:0}
.dp-head .dp-brand{font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ax-muted)}
.dp-head .dp-title{margin:0;font-family:var(--ax-font-display);font-size:1.55rem;font-weight:800;letter-spacing:-.02em;line-height:1.15;color:var(--ax-heading)}
.dp-asof{margin-left:auto;align-self:center;font-size:.76rem;font-weight:600;color:var(--ax-muted);background:var(--ax-card);border:1px solid var(--ax-line);border-radius:999px;padding:.28rem .7rem;white-space:nowrap}
.dp-asof.stale{color:var(--ax-badge-warn-ink);background:var(--ax-badge-warn-bg);border-color:transparent}
.dp-asof.stale::before{content:"⚠ "}

/* ---- section headings (lone ::LABEL, ::SECTION) ---- */
.section{grid-column:1/-1;margin:.9rem 0 -.4rem;font-family:var(--ax-font-display);font-size:1.2rem;font-weight:700;letter-spacing:-.02em;color:var(--ax-heading);display:flex;align-items:center;gap:.55rem}
.section::before{content:"";width:11px;height:11px;border-radius:4px;background:var(--ax-accent-bar);box-shadow:var(--ax-accent-glow)}

/* ---- inputs / filters ---- */
.controls{grid-column:1/-1;display:flex;gap:1.3rem;flex-wrap:wrap;align-items:center;background:var(--ax-card);border:1px solid var(--ax-line);border-radius:var(--ax-radius-sm);padding:.5rem .9rem;box-shadow:var(--ax-shadow);position:relative;overflow:hidden;padding-left:1.1rem}
.controls::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--ax-accent-bar)}
.control{font-size:.82rem;font-weight:600;color:var(--ax-muted);display:flex;align-items:center;gap:.5rem}
.control select,.control input{font:inherit;font-size:.85rem;font-weight:600;color:var(--ax-ink);background:var(--ax-input-bg);border:1px solid var(--ax-line);border-radius:10px;padding:.5rem .8rem;min-width:130px;transition:border-color .15s,box-shadow .15s;box-shadow:var(--ax-input-shadow)}
.control input{cursor:text}
.control select:not([multiple]){cursor:pointer;appearance:none;-webkit-appearance:none;padding-right:2rem;background-image:var(--ax-chevron);background-repeat:no-repeat;background-position:right .7rem center}
.control select:hover,.control input:hover{border-color:var(--ax-input-border-hover)}
.control select:focus,.control input:focus{outline:none;border-color:var(--ax-accent);box-shadow:var(--ax-focus-ring)}
.control input[type=date]{min-width:150px}
.control input[type=number]{min-width:100px}
.control select[multiple]{padding:.3rem;min-width:130px;cursor:default}
.control select[multiple] option{padding:.35rem .55rem;border-radius:7px;margin:1px 0;font-weight:600}
.control select[multiple] option:checked{background:linear-gradient(0deg,var(--ax-accent),var(--ax-accent));color:var(--ax-accent-ink)}
.control select[multiple]:focus option:checked{background:linear-gradient(0deg,var(--ax-accent),var(--ax-accent))}
.control .daterange-arrow{margin:0 .1rem;color:var(--ax-muted)}
/* ::PERIOD — preset + custom dates + grain switch + comparison, one control */
.dp-period{flex-wrap:wrap;row-gap:.45rem}
.dp-period select{min-width:0}
.dp-period input[type=date]{min-width:0;width:9.5rem}
.dp-period-range{font-size:.78rem;font-weight:500;color:var(--ax-muted);white-space:nowrap}
.dp-period-range b{font-weight:700;color:var(--ax-ink)}
.dp-period-err{font-size:.75rem;font-weight:600;color:var(--ax-err-ink)}
/* segmented buttons (::BUTTONS, the ::PERIOD grain switch) and the ::TOGGLE switch */
.dp-seg{display:inline-flex;border:1px solid var(--ax-line);border-radius:10px;background:var(--ax-input-bg);box-shadow:var(--ax-input-shadow);padding:2px;gap:2px}
.dp-seg button{font:inherit;font-size:.82rem;font-weight:600;color:var(--ax-muted);background:transparent;border:0;border-radius:8px;padding:.4rem .75rem;cursor:pointer;transition:background .12s,color .12s;white-space:nowrap}
.dp-seg button:hover{color:var(--ax-ink);background:var(--ax-tab-hover-bg)}
.dp-seg button[aria-checked=true],.dp-seg button[aria-pressed=true],.dp-viewbar [aria-selected=true]{background:var(--ax-accent);color:var(--ax-accent-ink)}
.dp-seg button:focus-visible{outline:none;box-shadow:var(--ax-focus-ring)}
.control.dp-toggle{cursor:pointer;color:var(--ax-ink)}
.control.dp-toggle input{appearance:none;-webkit-appearance:none;position:relative;width:2.3rem;min-width:0;height:1.3rem;padding:0;margin:0;border-radius:999px;border:1px solid var(--ax-line);background:var(--ax-slider-track);cursor:pointer;transition:background .15s,border-color .15s}
.control.dp-toggle input::after{content:"";position:absolute;top:2px;left:2px;width:calc(1.3rem - 6px);height:calc(1.3rem - 6px);border-radius:50%;background:var(--ax-card);box-shadow:var(--ax-zoom-handle-shadow);transition:transform .15s}
.control.dp-toggle input:checked{background:var(--ax-accent);border-color:var(--ax-accent)}
.control.dp-toggle input:checked::after{transform:translateX(1rem)}
/* Dropdown-style multiselect */
.dp-ms{position:relative;display:inline-block}
.dp-ms>summary{list-style:none;cursor:pointer;font:inherit;font-size:.85rem;font-weight:600;color:var(--ax-ink);background:var(--ax-input-bg);border:1px solid var(--ax-line);border-radius:10px;padding:.5rem 2rem .5rem .8rem;min-width:130px;box-shadow:var(--ax-input-shadow);transition:border-color .15s,box-shadow .15s;background-image:var(--ax-chevron);background-repeat:no-repeat;background-position:right .7rem center}
.dp-ms>summary::-webkit-details-marker{display:none}
.dp-ms>summary:hover{border-color:var(--ax-input-border-hover)}
.dp-ms[open]>summary{border-color:var(--ax-accent);box-shadow:var(--ax-focus-ring)}
.dp-ms-pop{position:absolute;z-index:40;top:calc(100% + 4px);left:0;min-width:190px;max-width:280px;background:var(--ax-input-bg);border:1px solid var(--ax-line);border-radius:12px;box-shadow:var(--ax-pop-shadow);padding:.5rem}
.dp-ms-search{width:100%;box-sizing:border-box;font:inherit;font-size:.82rem;border:1px solid var(--ax-line);border-radius:8px;padding:.4rem .6rem;margin-bottom:.4rem;background:var(--ax-input-bg);color:var(--ax-ink)}
.dp-ms-search:focus{outline:none;border-color:var(--ax-accent);box-shadow:var(--ax-focus-ring)}
.dp-ms-tools{display:flex;gap:.4rem;margin-bottom:.35rem}
.dp-ms-tools button{flex:1;font:inherit;font-size:.72rem;font-weight:700;color:var(--ax-muted);background:var(--ax-card);border:1px solid var(--ax-line);border-radius:7px;padding:.3rem;cursor:pointer}
.dp-ms-tools button:hover{border-color:var(--ax-accent);color:var(--ax-accent)}
.dp-ms-list{max-height:230px;overflow:auto;display:flex;flex-direction:column;gap:1px}
.dp-ms-opt{display:flex;align-items:center;gap:.5rem;padding:.32rem .5rem;border-radius:7px;font-size:.82rem;font-weight:600;color:var(--ax-ink);cursor:pointer}
.dp-ms-opt:hover{background:var(--ax-card)}
.dp-ms-opt input{margin:0;min-width:0;accent-color:var(--ax-accent)}
/* Searchable ::DROPDOWN combobox (#411) — the base look (border, padding,
   focus ring) already comes from `.control input` above; this only adds the
   chevron that marks it as a dropdown, a width, the open-state ring (to
   match `.dp-ms[open]>summary`) and the keyboard-highlighted row. Reuses
   .dp-ms/.dp-ms-pop/.dp-ms-list/.dp-ms-opt for the popover + option rows. */
.dp-dd-input{width:220px;max-width:100%;padding-right:2rem;background-image:var(--ax-chevron);background-repeat:no-repeat;background-position:right .7rem center}
.dp-dd[data-open="true"] .dp-dd-input{border-color:var(--ax-accent);box-shadow:var(--ax-focus-ring)}
/* `.dp-ms-pop` is `position:absolute` inside `.dp-ms` (fine for a short
   ::MULTISELECT popover), but a `.controls` bar has `overflow:hidden`
   (its accent bar, above), which clips that — invisible for a short
   popover, but this one is often many rows tall. `position:fixed` escapes
   that clipping (a plain `overflow:hidden` ancestor, with no transform of
   its own, does not become a containing block for a fixed descendant) and
   is placed by `place()`'s own `left`/`top`/`width`, not this rule's
   `.dp-ms-pop` ones. Left scoped to `.dp-dd-pop` only — not touching
   ::MULTISELECT's popover. */
.dp-dd-pop{position:fixed;z-index:1000}
/* A taller default than ::MULTISELECT's 230px (.dp-ms-list, above): with no
   search box of its own above the list, a searchable ::DROPDOWN has the
   room to show comfortably more than a screenful's worth of ~8 rows before
   `place()` (web/app.js) shrinks it back for a short viewport. */
.dp-dd-list{max-height:270px}
.dp-dd-opt.dp-dd-active{background:var(--ax-card);box-shadow:inset 2px 0 0 0 var(--ax-accent)}
.dp-dd-empty,.dp-dd-more{padding:.3rem .5rem;font-size:.76rem;color:var(--ax-muted)}
/* range slider + per-column table filters (were injected from JS) */
.dp-colf{width:100%;box-sizing:border-box;font:400 12px system-ui;padding:3px 6px;border:1px solid var(--ax-colf-border);border-radius:5px;margin-top:2px;background:var(--ax-input-bg);color:var(--ax-ink)}
.dp-range{position:relative;height:24px;margin-top:6px}
.dp-range .trk{position:absolute;top:7px;left:0;width:100%;height:4px;background:var(--ax-slider-track);border-radius:3px}
.dp-range .fil{position:absolute;top:7px;height:4px;background:var(--ax-slider-fill);border-radius:3px}
.dp-range .out{position:absolute;top:12px;right:0;font:400 10px system-ui;color:var(--ax-slider-label)}
.dp-range input{position:absolute;top:2px;left:0;width:100%;height:14px;margin:0;pointer-events:none;-webkit-appearance:none;appearance:none;background:transparent}
.dp-range input::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:13px;height:13px;border-radius:50%;background:var(--ax-slider-thumb);border:2px solid var(--ax-slider-thumb-edge);box-shadow:var(--ax-slider-thumb-ring);cursor:pointer}
.dp-range input::-moz-range-thumb{pointer-events:auto;width:13px;height:13px;border:2px solid var(--ax-slider-thumb-edge);border-radius:50%;background:var(--ax-slider-thumb);cursor:pointer}
/* per-panel loading: a panel re-querying gets a veil + shimmer (after a short
   delay, so a fast cross-filter never flickers); the first run shows skeletons */
.panel.dp-pending::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;opacity:0;background:linear-gradient(100deg,transparent 35%,color-mix(in srgb,var(--ax-card) 55%,transparent) 50%,transparent 65%) 0 0/250% 100%,var(--ax-veil);animation:dp-veil-in .2s .15s forwards,dp-shimmer 1.3s linear infinite}
/* a drill-through opens its tab at once: the veil shows without the delay */
.dp-switching .panel.dp-pending::after{animation-delay:0s,0s}
.dp-skel,.dp-lazy{min-height:220px;display:flex;flex-direction:column;gap:.8rem}
.dp-skel.dp-skel-kpi,.dp-lazy.dp-skel-kpi{min-height:96px}
.dp-skel i,.dp-lazy i{display:block;height:.8rem;width:40%;border-radius:6px;background:var(--ax-spinner-track);animation:dp-pulse 1.4s ease-in-out infinite}
.dp-skel i:nth-child(2),.dp-lazy i:nth-child(2){width:70%;animation-delay:.15s}
.dp-skel i:nth-child(3),.dp-lazy i:nth-child(3){flex:1;width:100%;animation-delay:.3s}
.dp-skel-kpi i:nth-child(3){flex:0 0 1.6rem;width:55%}
@keyframes dp-veil-in{to{opacity:1}}
@keyframes dp-shimmer{from{background-position:100% 0,0 0}to{background-position:-150% 0,0 0}}
@keyframes dp-pulse{50%{opacity:.45}}
/* per-panel error card and "Not available" (optional input missing) */
.dp-err-head{font-weight:700;color:var(--ax-err-ink);margin-bottom:.25rem}
.dp-err-head::before{content:"⚠ "}
.dp-err-msg{color:var(--ax-ink);font-size:.85rem;line-height:1.45;overflow-wrap:anywhere}
.dp-err details{margin-top:.5rem;font-size:.78rem;color:var(--ax-muted)}
.dp-err summary{cursor:pointer;width:max-content}
.dp-err pre{margin:.4rem 0 0;max-height:14rem;overflow:auto;padding:.6rem .7rem;border-radius:var(--ax-radius-sm);background:var(--ax-err-bg);border:1px solid var(--ax-err-border);color:var(--ax-err-ink);font:12px/1.5 ui-monospace,monospace;white-space:pre-wrap}
.panel.dp-errcard{border-color:var(--ax-err-border)}
.dp-na .nodata{display:flex;flex-direction:column;gap:.3rem;padding:2rem 0}
.dp-na .nodata strong{color:var(--ax-ink);font-size:.95rem}

/* ---- boxes (::GROUP) and KPI strips ---- */
.group{grid-column:1/-1;margin:0;position:relative;overflow:visible;background:var(--ax-card);border:1px solid var(--ax-line);border-radius:var(--ax-radius);padding:1.1rem 1.2rem 1.1rem 1.35rem;box-shadow:var(--ax-shadow)}
/* the box does not clip (a multiselect / date popover must open over it), so the
   accent bar rounds its own corners */
.group::before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:5px;background:var(--ax-accent-bar);border-radius:var(--ax-radius) 0 0 var(--ax-radius)}
.group-title{font-family:var(--ax-font-display);font-weight:700;letter-spacing:-.01em;margin-bottom:.7rem;color:var(--ax-heading)}
.group-body{display:flex;flex-wrap:wrap;gap:1.3rem;align-items:center}
.group-body .panel{flex:1 1 340px;border:0;border-radius:0;padding:0;box-shadow:none}

.group-body .control{margin:0}
.group-body .metric{flex:1 1 120px;min-width:110px;padding:.1rem .4rem 0.1rem 1.2rem;border-left:1px solid var(--ax-line)}
.group-body .metric:first-child{border-left:0;padding-left:.2rem}
.group-body .metric .metric-value{font-size:2.05rem}
.group-body .metric .metric-cap{font-size:.66rem}

/* ---- cards ---- */
.panel{position:relative;margin:0;background:var(--ax-card);border:1px solid var(--ax-line);border-radius:var(--ax-radius);padding:1.15rem 1.25rem;box-shadow:var(--ax-shadow)}
.panel svg:not(.xp-ov){width:100%;height:auto;display:block}
@media (max-width:640px){.panel-svg:has(> svg[data-diagram]){overflow-x:auto;background:linear-gradient(90deg,var(--ax-card) 40%,transparent) left/32px 100% no-repeat local,linear-gradient(270deg,var(--ax-card) 40%,transparent) right/32px 100% no-repeat local,linear-gradient(90deg,var(--ax-line),transparent) left/10px 100% no-repeat scroll,linear-gradient(270deg,var(--ax-line),transparent) right/10px 100% no-repeat scroll}}
@keyframes dp-panel-in{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
.panel.dp-in{animation:dp-panel-in .5s cubic-bezier(.22,.61,.36,1) both}
/* ::LINESTYLE 'flow': the dashes move along the line (ggplot-rs's own 6,3
   dash — one period = 9 — an accepted visual delta from the old 6 4).
   `.dp-flow` is a ::DIAGRAM edge's own class (src/diagram.rs, through
   ggplot-rs's `Aes::class`);
   every other flowing line (map flow arcs, #308; plain line/step/smooth
   charts, #318 C2) is a ggplot-rs linetype-aesthetic mark that carries no
   class of its own (0.21 already writes `class="gg-mark …"`) — just
   `data-linestyle="flow"`. */
@keyframes dp-flow{to{stroke-dashoffset:-20}}
.panel svg .dp-flow,.panel svg [data-linestyle="flow"]{animation:dp-flow 1.2s linear infinite}
@keyframes dp-dots{to{stroke-dashoffset:-20}}
.panel svg .dp-flow.dp-dots{animation:dp-dots 1s linear infinite}
/* ::DIAGRAM text weights: src/diagram.rs already bakes these bold via
   ggplot-rs's geom_text fontface (#228), so a headless --svg export draws
   them bold too; this class is the browser's own belt-and-suspenders path
   (also covers any future non-ggplot-rs rendering of the same markup) */
.panel svg .dp-node-label,.panel svg .dp-lane-label{font-weight:600}
.panel svg .dp-node-value{font-weight:700}
/* 'flow-volume' / 'flow-dots-volume': the busier the edge, the faster it
   flows — five fixed buckets of sqrt(value / max) (src/diagram.rs
   `speed_class`), a class rather than an inline style so a strict CSP holds */
.panel svg .dp-flow.flow-speed-1{animation-duration:.6s}
.panel svg .dp-flow.flow-speed-2{animation-duration:1.05s}
.panel svg .dp-flow.flow-speed-3{animation-duration:1.5s}
.panel svg .dp-flow.flow-speed-4{animation-duration:1.95s}
.panel svg .dp-flow.flow-speed-5{animation-duration:2.4s}
@media (prefers-reduced-motion: reduce){.panel svg .dp-flow,.panel svg [data-linestyle="flow"],.panel svg .dp-flow.dp-dots{animation:none}}
/* ::STORY: step controls under the chart, the caption + connector over it */
.dp-story{display:flex;align-items:center;gap:.4rem;margin-top:.55rem;flex-wrap:wrap}
.dp-story-btn{font:inherit;font-size:.78rem;font-weight:600;line-height:1;padding:.38rem .62rem;border-radius:var(--ax-radius-sm);border:1px solid var(--ax-tool-border);background:var(--ax-btn2-bg);color:var(--ax-ink);cursor:pointer}
.dp-story-btn:hover{border-color:var(--ax-tool-hover-border)}
.dp-story-btn:focus-visible{outline:2px solid var(--ax-accent);outline-offset:2px}
.dp-story-play[aria-pressed="true"]{color:var(--ax-accent);border-color:var(--ax-accent)}
.dp-story-pos{font-size:.74rem;color:var(--ax-muted);margin-left:.2rem}
.dp-story-cap{position:absolute;z-index:2;max-width:min(320px,60%);padding:.42rem .62rem;font-size:.8rem;line-height:1.35;color:var(--ax-tip-ink);background:var(--ax-tip-bg);border:1px solid var(--ax-callout-border);border-left:3px solid var(--ax-accent);border-radius:var(--ax-radius-sm);box-shadow:var(--ax-tip-shadow);pointer-events:none}
.dp-story-cap.dp-story-cap-out{position:relative;left:auto;top:auto;max-width:none;margin-top:.5rem}
.dp-story-link{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.dp-story-link path{fill:none;stroke:var(--ax-accent);stroke-width:1.5;stroke-dasharray:6 4}
/* story steps fade (a re-run re-applies its dimming at once: no flash) */
.panel svg.dp-emph-fade [data-series],.panel svg.dp-emph-fade [data-x]{transition:opacity .25s,filter .12s}
@media print{.dp-story{display:none}}
.panel svg .dp-ghost{pointer-events:none}
/* A decorative mark (a boxplot's mean dot, ggplot-rs `decorative()`) has no
   tooltip of its own: let the pointer through to the mark it annotates. */
.panel svg [data-part="decorative"]{pointer-events:none}
@media (prefers-reduced-motion: reduce){.panel.dp-in,.dp-skel i,.dp-lazy i{animation:none}.panel.dp-pending::after{animation:dp-veil-in .01s .15s forwards;background:var(--ax-veil)}}
.panel-title{position:relative;font-family:var(--ax-font-display);font-size:.92rem;font-weight:700;letter-spacing:-.01em;color:var(--ax-heading);margin:-.1rem 0 .7rem;padding-bottom:.55rem;border-bottom:1px solid var(--ax-line)}
.panel-title::after{content:"";position:absolute;left:0;bottom:-1px;width:38px;height:2px;background:var(--ax-accent-bar);border-radius:2px}
.group-body .panel .panel-title{border-bottom:0;padding-bottom:.2rem}
.group-body .panel .panel-title::after{display:none}
.dl{position:absolute;top:.6rem;right:.65rem;width:28px;height:28px;padding:0;background:var(--ax-tool-bg-soft);backdrop-filter:blur(4px);border:1px solid var(--ax-line);border-radius:8px;color:var(--ax-muted);font-size:.95rem;line-height:1;box-shadow:none;opacity:0;transform:translateY(-2px);transition:opacity .15s,transform .15s,color .12s}
.panel:hover .dl{opacity:1;transform:none}
.dl:hover{color:var(--ax-accent);border-color:var(--ax-accent)}

/* ---- markdown callouts (::MARKDOWN) ---- */
.md-box{position:relative;overflow:hidden;background:var(--ax-callout-bg);border-color:var(--ax-callout-border);padding-left:1.4rem}
.md-box::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--ax-callout-bar)}
.md-body{font-size:.9rem;line-height:1.6;color:var(--ax-md-ink)}
/* 'plain'::MARKDOWN_STYLE (#536): text on the page background — no card, no
   tint, no accent bar; .panel's own padding stays (normal page padding),
   just its card chrome goes. */
.md-plain{background:transparent;border-color:transparent;box-shadow:none}
.dp-callout{padding-left:3rem}
.dp-callout::after{content:attr(data-icon);position:absolute;left:1.15rem;top:1.05rem;width:1.3rem;height:1.3rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:800;color:var(--ax-card);background:var(--ax-callout-bar)}
.dp-callout-warning{background:var(--ax-badge-warn-bg);border-color:transparent}
.dp-callout-warning::before,.dp-callout-warning::after{background:var(--ax-warning)}
.dp-callout-warning .md-body{color:var(--ax-badge-warn-ink)}
.dp-callout-success{background:var(--ax-badge-good-bg);border-color:transparent}
.dp-callout-success::before,.dp-callout-success::after{background:var(--ax-positive)}
.dp-callout-success .md-body{color:var(--ax-badge-good-ink)}

/* ---- ::IMAGE / ::IMAGE_DARK (#514) ---- */
.dp-image img.dp-img{display:block;width:100%;height:auto;border-radius:calc(var(--ax-radius) * .4)}
.dp-image .dp-img-row+.dp-img-row{margin-top:.75rem}
/* Specificity: these three must each outrank the plain `.dp-image img.dp-img`
   rule above (which also matches a `dp-img-dark` image, since it carries
   both classes) — each adds a class over it, so the cascade picks the
   right one instead of both <img>s showing at once. */
.dp-image img.dp-img.dp-img-dark{display:none}
body.dark .dp-img-row.has-dark img.dp-img.dp-img-dark{display:block}
body.dark .dp-img-row.has-dark img.dp-img:not(.dp-img-dark){display:none}
/* #544 review: a rejected ::IMAGE but a valid ::IMAGE_DARK draws only the
   light slot's placeholder (has-dark is set from the dark src alone) — in
   dark mode the dark image takes over, so hide the placeholder the same way
   the (would-be) light <img> is hidden above, or both show at once. */
body.dark .dp-img-row.has-dark .dp-img-missing{display:none}
/* ::HEIGHT, or ::FIT sizing the panel to a share of the row (fitDash's
   kind(), #400): a fixed box, the image centred and contained rather than
   stretched (decision 8 of plan-514). */
.dp-image{display:flex;flex-direction:column}
.dp-image.dp-image-fixed,.dp-image.dp-fit,.dp-image.dp-fit-scroll{overflow:hidden}
.dp-image.dp-image-fixed .dp-img-row,.dp-image.dp-fit .dp-img-row,.dp-image.dp-fit-scroll .dp-img-row{flex:1 1 auto;min-height:0}
.dp-image.dp-image-fixed img.dp-img,.dp-image.dp-fit img.dp-img,.dp-image.dp-fit-scroll img.dp-img{height:100%;width:100%;object-fit:contain}
.dp-image-caption{margin-top:.4rem;font-size:.8125rem;color:var(--ax-muted)}
/* A rejected / missing src (decision 2 of plan-514): the alt text, never a
   broken-image icon. Shared by ::IMAGE and markdown `![alt](src)`. */
.dp-img-missing{display:block;color:var(--ax-muted);font-style:italic;border:1px dashed var(--ax-line);border-radius:calc(var(--ax-radius) * .4);padding:.6rem .75rem;font-size:.85rem}
.md-img{max-width:100%;height:auto;vertical-align:middle;border-radius:3px}
.dp-info{position:relative;display:inline-flex;vertical-align:middle;margin-left:.35rem}
.dp-info.corner{position:absolute;top:.55rem;right:.6rem;margin:0;z-index:3}
.dp-info-btn{font:inherit;font-size:.95rem;line-height:1;font-weight:400;color:var(--ax-muted);background:none;border:0;border-radius:50%;padding:.1rem .15rem;cursor:help}
.dp-info-btn:hover,.dp-info.open .dp-info-btn{color:var(--ax-accent)}
.dp-info-btn:focus-visible{outline:none;box-shadow:var(--ax-focus-ring)}
.dp-info-pop{position:absolute;z-index:1000;max-width:min(320px,calc(100vw - 16px));width:max-content;padding:.55rem .7rem;font-family:var(--ax-font-body);font-size:.8rem;font-weight:500;line-height:1.45;letter-spacing:0;text-transform:none;white-space:normal;color:var(--ax-tip-ink);background:var(--ax-tip-bg);border:1px solid var(--ax-tip-border);border-radius:var(--ax-radius-sm);box-shadow:var(--ax-tip-shadow)}
.dp-info-pop[hidden]{display:none}
.md-body h1,.md-body h2,.md-body h3,.md-body h4{margin:.4em 0 .3em;line-height:1.25;color:var(--ax-md-heading)}
.md-body h1{font-size:1.5rem}.md-body h2{font-size:1.25rem}.md-body h3{font-size:1.08rem}.md-body h4{font-size:.98rem}
.md-body p{margin:.5em 0}
.md-body ul,.md-body ol{margin:.5em 0;padding-left:1.4em}
.md-body li{margin:.2em 0}
.md-body a{color:var(--ax-link);text-decoration:none}.md-body a:hover{text-decoration:underline}
.md-body code{background:var(--ax-code-bg);padding:.08em .35em;border-radius:4px;font-size:.86em;font-family:ui-monospace,Menlo,Consolas,monospace}
.md-body pre{background:var(--ax-pre-bg);border:1px solid var(--ax-line);border-radius:8px;padding:.7rem .9rem;overflow:auto;margin:.6em 0}
.md-body pre code{background:none;padding:0}
.md-math-display{display:block;margin:.6em 0;overflow-x:auto;overflow-y:hidden;text-align:center}
.md-math-display .katex-display{margin:0}
.md-math-err .md-tex{color:var(--ax-err-ink);background:var(--ax-err-bg)}
.md-body blockquote{margin:.6em 0;padding:.2em .9em;border-left:3px solid var(--ax-quote-bar);color:var(--ax-quote-ink)}
.md-body hr{border:0;border-top:1px solid var(--ax-line);margin:.9em 0}

/* ---- tables ---- */
.table-wrap{display:flex;flex-direction:column;gap:.55rem}
.tbl-bar{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap}
.tbl-bar-l,.tbl-bar-r{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.tbl-bar-l{min-height:28px}
.tbl-count{font-size:.78rem;font-weight:600;color:var(--ax-muted);font-variant-numeric:tabular-nums;margin-right:.15rem}
.tbl-chip{display:inline-flex;align-items:center;gap:.15rem;font-size:.74rem;font-weight:600;color:var(--ax-accent);background:var(--ax-tab-hover-bg);border-radius:999px;padding:.12rem .2rem .12rem .6rem;max-width:22rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbl-chip button{border:0;background:transparent;color:inherit;cursor:pointer;font-size:.95rem;line-height:1;padding:0 .3rem;box-shadow:none;transform:none}
.tbl-chip button:hover{transform:none;box-shadow:none;filter:none;opacity:.7}
.tbl-search{font:inherit;font-size:.8rem;width:11.5rem;height:28px;padding:0 .65rem;border:1px solid var(--ax-line);border-radius:var(--ax-radius-sm);background:var(--ax-input-bg);color:var(--ax-ink)}
.tbl-search:focus{outline:none;border-color:var(--ax-accent);box-shadow:var(--ax-focus-ring)}
.tbl-btn{font:inherit;font-size:.76rem;font-weight:600;height:28px;padding:0 .65rem;border:1px solid var(--ax-line);border-radius:var(--ax-radius-sm);background:var(--ax-input-bg);color:var(--ax-muted);cursor:pointer;box-shadow:none;display:inline-flex;align-items:center;list-style:none;white-space:nowrap;transform:none}
.tbl-btn:hover{color:var(--ax-ink);border-color:var(--ax-input-border-hover);transform:none;filter:none;box-shadow:none}
.tbl-btn.on{color:var(--ax-accent);border-color:var(--ax-accent);background:var(--ax-tab-hover-bg)}
.tbl-cols{position:relative}
.tbl-cols>summary::-webkit-details-marker{display:none}
.tbl-cols-pop{position:absolute;right:0;top:calc(100% + 4px);z-index:30;min-width:190px;max-height:300px;overflow:auto;background:var(--ax-input-bg);border:1px solid var(--ax-line);border-radius:var(--ax-radius-sm);box-shadow:var(--ax-pop-shadow);padding:.35rem}
.tbl-cols-pop label{display:flex;align-items:center;gap:.45rem;padding:.3rem .45rem;border-radius:5px;font-size:.8rem;cursor:pointer;white-space:nowrap;color:var(--ax-ink)}
.tbl-cols-pop label:hover{background:var(--ax-row-hover)}
.tbl-cols-pop input{accent-color:var(--ax-accent);margin:0}
.tbl-cols-pop .tbl-mi{display:block;width:100%;text-align:left;font:inherit;font-size:.8rem;color:var(--ax-ink);background:transparent;border:0;border-radius:5px;padding:.35rem .5rem;cursor:pointer;white-space:nowrap;box-shadow:none;transform:none}
.tbl-cols-pop .tbl-mi:hover,.tbl-cols-pop .tbl-mi:focus-visible{background:var(--ax-row-hover);outline:none;filter:none;transform:none}
.tbl-scroll{overflow-x:auto}
.tbl-seg{display:inline-flex}
.tbl-seg .tbl-btn{border-radius:0;margin-left:-1px}
.tbl-seg .tbl-btn:first-child{border-radius:var(--ax-radius-sm) 0 0 var(--ax-radius-sm);margin-left:0}
.tbl-seg .tbl-btn:last-child{border-radius:0 var(--ax-radius-sm) var(--ax-radius-sm) 0}
.tbl-seg .tbl-btn.on{position:relative;z-index:1}
.tbl-chip.sel{color:var(--ax-ink);background:var(--ax-row-focus)}
/* Scroll view: fixed-height rows, only those around the viewport are drawn */
.tbl-scroll.virtual{max-height:560px;overflow-y:auto}
.dp-table.virtual td{height:37px;box-sizing:border-box;padding-top:0;padding-bottom:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:28rem}
.dp-table.virtual td.long{white-space:nowrap}
.dp-table.virtual.compact td{height:29px}
.dp-table.virtual tr.tbl-spacer td{padding:0;border:0;background:transparent}
.dp-table.virtual tr.tbl-loading td{color:var(--ax-muted);text-align:center}
.dp-table.virtual tfoot td{position:sticky;bottom:0;z-index:1}
/* ::ROWSELECT 'multi': a check mark in the first cell */
.dp-table .row-cb{display:inline-block;width:14px;height:14px;margin-right:.55rem;vertical-align:-2px;border:1.5px solid var(--ax-muted);border-radius:4px;opacity:.7}
.dp-table .row-cb.on{background:var(--ax-accent);border-color:var(--ax-accent);opacity:1;box-shadow:inset 0 0 0 2px var(--ax-card)}
.tbl-empty{color:var(--ax-muted);font-size:.85rem;padding:.8rem 0}
.dp-table{width:100%;border-collapse:collapse;font-size:.84rem;table-layout:fixed}
.dp-table th{text-align:left;font-size:.74rem;font-weight:600;letter-spacing:.01em;line-height:1.25;color:var(--ax-th-ink);background:var(--ax-th-bg);border-bottom:1.5px solid var(--ax-muted);padding:.5rem .75rem;position:sticky;top:0;z-index:1;user-select:none;cursor:pointer;vertical-align:bottom}
.dp-table th.num{text-align:right}
.dp-table .th-in{display:inline-flex;align-items:flex-end;gap:.3rem;max-width:16rem}
/* long headers wrap onto two lines instead of widening the column */
.dp-table .th-l{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}
/* a right-aligned header keeps its sort icon on the inner (left) side */
.dp-table th.num .th-in{flex-direction:row-reverse}
.dp-table .th-sort{font-size:.72rem;opacity:0;color:var(--ax-muted)}
.dp-table th:hover .th-sort{opacity:.75}
.dp-table th.sorted{color:var(--ax-ink)}
.dp-table th.sorted .th-sort{opacity:1;color:var(--ax-accent)}
.dp-table tr.tbl-stats th{padding:.35rem .75rem .5rem;cursor:default;font-weight:400;vertical-align:top;top:auto;position:static;font-size:.68rem;color:var(--ax-muted);max-width:0}
.dp-table tr.tbl-stats .st-hist{display:block;width:100%;height:24px;fill:var(--ax-accent);fill-opacity:.55}
.dp-table tr.tbl-stats .st-hist rect:hover{fill-opacity:1}
.dp-table tr.tbl-stats .st-ends{display:flex;justify-content:space-between;gap:.4rem;margin-top:.15rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.dp-table tr.tbl-stats .st-top{position:relative;display:flex;gap:.4rem;justify-content:space-between;padding:.05rem 0 .15rem;line-height:1.3}
.dp-table tr.tbl-stats .st-v{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ax-th-ink)}
.dp-table tr.tbl-stats .st-p{font-variant-numeric:tabular-nums}
.dp-table tr.tbl-stats .st-bar{position:absolute;left:0;bottom:0;height:2px;border-radius:1px;background:var(--ax-accent);opacity:.55}
.dp-table tr.tbl-stats .st-more,.dp-table tr.tbl-stats .st-empty{display:block;margin-top:.1rem;opacity:.85}
.dp-table tr.tbl-frow th{padding:.3rem .5rem .55rem;cursor:default;font-weight:400;vertical-align:top;top:auto}
.dp-table td{overflow:hidden;text-overflow:ellipsis;padding:.55rem .75rem;border-bottom:1px solid var(--ax-line);white-space:nowrap;color:var(--ax-ink);vertical-align:middle}
.dp-table td.num{text-align:right;font-variant-numeric:tabular-nums;position:relative}
.dp-table td.num.zero{color:var(--ax-muted)}
.dp-table tbody td:first-child:not(.num){font-weight:600}
.dp-table.compact td{padding-top:.3rem;padding-bottom:.3rem}
.dp-table.compact td.spark-cell{padding-top:.1rem;padding-bottom:.1rem}
.dp-table.compact .spark{height:22px}
.dp-table td.ctr{text-align:center}
.dp-table td.long{white-space:normal;line-height:1.4}
.dp-table td.tbl-none{text-align:center;color:var(--ax-muted);padding:1.3rem .75rem}
.dp-table tbody tr:nth-child(even) td{background-color:var(--ax-zebra)}
.dp-table tbody tr.clickable{cursor:pointer}
.dp-table tbody tr:hover td{background-color:var(--ax-row-hover)}
.dp-table tbody tr.row-sel td{background-color:var(--ax-row-focus)}
.dp-table tbody tr.row-sel td:first-child{box-shadow:inset 3px 0 0 var(--ax-accent);font-weight:700}
.dp-table.dp-kbd{outline:none}
.dp-table tbody tr.row-focus td{background-color:var(--ax-row-hover-tint)}
.dp-table.dp-kbd:focus tbody tr.row-focus td{background-color:var(--ax-row-focus-kbd)}
.dp-table .cbar{position:absolute;right:.75rem;bottom:.28rem;height:3px;border-radius:2px;background:var(--ax-accent);opacity:.32;pointer-events:none}
.dp-table .cbar.neg{background:var(--ax-negative)}
.dp-table .cscale{display:inline-block;min-width:3.4rem;padding:.1rem .5rem;border-radius:5px;font-weight:600;background:color-mix(in srgb,var(--cs) 22%,transparent);box-shadow:inset 3px 0 0 var(--cs)}
.dp-table .nil{color:var(--ax-muted);opacity:.55}
.dp-table .bool{font-weight:700}
.dp-table .bool.yes{color:var(--ax-positive)}
.dp-table .bool.no{color:var(--ax-muted);opacity:.7}
/* totals: the accounting double rule above, bold, apart from the body */
.dp-table tfoot td{border-top:3px double var(--ax-ink);border-bottom:0;font-weight:700;background:var(--ax-th-bg);padding:.6rem .75rem;white-space:nowrap}
.dp-table tbody tr.sub-row td,.dp-table tbody tr.sub-row:hover td{border-top:1px solid color-mix(in srgb,var(--ax-ink) 45%,transparent);font-weight:600;background-color:color-mix(in srgb,var(--ax-th-bg) 55%,transparent);white-space:nowrap}
.dp-table tbody tr.sub-row td.num{text-align:right;font-variant-numeric:tabular-nums}
.dp-table tbody tr.sub-row td.neg{color:var(--ax-negative)}
.dp-table tbody tr.sub-row .tot-l{margin-right:.35rem}
.dp-table tbody td.grp-rep{color:transparent}
.dp-table tbody tr:hover td.grp-rep{color:var(--ax-muted)}
.tot-legend{font-size:.72rem;color:var(--ax-muted);padding:0 .1rem;margin-top:-.2rem}
.dp-table caption.tbl-cap{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* the total's aggregation: small caps, quiet until hovered; opens .tot-menu */
.dp-table .tot-agg{font:inherit;font-size:.62rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ax-muted);background:transparent;border:0;border-radius:4px;padding:.1rem .3rem;margin:0 .35rem 0 0;cursor:pointer;vertical-align:1px;box-shadow:none;transform:none}
.dp-table .tot-agg:hover,.dp-table .tot-agg[aria-expanded="true"],.dp-table .tot-agg:focus-visible{color:var(--ax-accent);background:var(--ax-tab-hover-bg);outline:none;filter:none;transform:none;box-shadow:none}
.tot-menu{position:fixed;z-index:60;min-width:11.5rem;padding:.3rem;background:var(--ax-input-bg);border:1px solid var(--ax-line);border-radius:var(--ax-radius-sm);box-shadow:var(--ax-pop-shadow);text-align:left;font-weight:400;font-style:normal}
.tot-menu .tot-mi{display:flex;width:100%;justify-content:space-between;gap:1.2rem;align-items:baseline;font:inherit;font-size:.8rem;color:var(--ax-ink);background:transparent;border:0;border-radius:5px;padding:.38rem .55rem;cursor:pointer;box-shadow:none;transform:none}
.tot-menu .tot-mi .v{font-variant-numeric:tabular-nums;color:var(--ax-muted)}
.tot-menu .tot-mi:hover,.tot-menu .tot-mi:focus-visible{background:var(--ax-row-hover);outline:none;filter:none;transform:none;box-shadow:none}
.tot-menu .tot-mi.on{color:var(--ax-accent);font-weight:600}
.tot-menu .tot-mi.on .v{color:var(--ax-accent)}
.dp-table tfoot td.neg .tot-v,.dp-table td.num.neg{color:var(--ax-negative)}
.dp-table tfoot td{position:sticky;bottom:0;z-index:1}
.tbl-scroll.long{max-height:min(640px,75vh);overflow-y:auto}
.dp-table.bars{--ax-zebra:transparent}
.dp-table tr.th-group th{position:static;border-bottom:0;padding-bottom:.1rem;cursor:default;text-align:center;vertical-align:bottom}
.dp-table tr.th-group .th-g{display:block;padding-bottom:.25rem;border-bottom:1px solid var(--ax-line);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ax-muted)}
.dp-table tbody tr td.flag{background-color:var(--ax-badge-warn-bg);color:var(--ax-badge-warn-ink)}
.dp-table .flag-i{font-size:.72rem;margin-right:.35rem}
.dp-table tbody tr td.th-good{background-color:var(--ax-badge-good-bg);color:var(--ax-badge-good-ink)}
.dp-table tbody tr td.th-warn{background-color:var(--ax-badge-warn-bg);color:var(--ax-badge-warn-ink)}
.dp-table tbody tr td.th-bad{background-color:var(--ax-badge-bad-bg);color:var(--ax-badge-bad-ink)}
.dp-table .th-i{font-size:.62rem;margin-right:.35rem;vertical-align:.06em}
.metric-value.th-good{background:none;color:var(--ax-positive)}.metric-value.th-warn{background:none;color:var(--ax-warning)}.metric-value.th-bad{background:none;color:var(--ax-negative)}
.dp-table td.hl{font-weight:600}
.dp-table .hl-r{font-size:.64rem;font-weight:600;color:var(--ax-muted);margin-right:.4rem;letter-spacing:.02em}
.dp-table tfoot td.num{text-align:right;font-variant-numeric:tabular-nums}
.dp-table .tot-l{font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ax-muted)}
.dp-table .tot-op{color:var(--ax-muted);font-weight:500;margin-right:.1rem}
.dp-table tfoot td.tot-badges{white-space:normal;line-height:1.5}
.dp-table .tot-badge{white-space:nowrap;font-size:.72rem;font-weight:600;color:var(--ax-muted);margin-right:.45rem}
.table-foot{display:flex;align-items:center;justify-content:flex-end;gap:.3rem}
.table-info{font-size:.78rem;color:var(--ax-muted);font-variant-numeric:tabular-nums;font-weight:600;padding:0 .35rem}
.page-btn{background:var(--ax-input-bg);border:1px solid var(--ax-line);border-radius:var(--ax-radius-sm);min-width:28px;height:28px;padding:0 .3rem;color:var(--ax-ink);font-size:.85rem;cursor:pointer;box-shadow:none;transform:none}
.page-btn:hover:not(:disabled){border-color:var(--ax-accent);color:var(--ax-accent);transform:none;box-shadow:none;filter:none}
.page-btn:disabled{opacity:.35;cursor:default}
.page-size{background:var(--ax-input-bg);border:1px solid var(--ax-line);border-radius:var(--ax-radius-sm);height:28px;padding:0 .3rem;color:var(--ax-muted);font-size:.76rem;cursor:pointer;margin-right:auto}
.page-size:hover{border-color:var(--ax-input-border-hover)}
.trend{font-weight:700;font-variant-numeric:tabular-nums}
.trend.up{color:var(--ax-positive)}.trend.down{color:var(--ax-negative)}.trend.flat{color:var(--ax-muted)}
.badge{display:inline-flex;align-items:center;gap:.38rem;padding:.14rem .55rem;border-radius:999px;font-size:.74rem;font-weight:650;line-height:1.4;letter-spacing:.01em}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85}
.badge-good{background:var(--ax-badge-good-bg);color:var(--ax-badge-good-ink)}
.badge-warn{background:var(--ax-badge-warn-bg);color:var(--ax-badge-warn-ink)}
.badge-bad{background:var(--ax-badge-bad-bg);color:var(--ax-badge-bad-ink)}
.badge-neutral{background:var(--ax-badge-neutral-bg);color:var(--ax-badge-neutral-ink)}
.dp-table td.spark-cell{padding:.25rem .75rem}
.panel .dp-table svg.spark{display:block;width:104px;height:26px}

/* ---- KPI tiles & text cards ---- */
.metric{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;overflow:hidden}
.metric-value{font-family:var(--ax-font-display);font-size:2.6rem;font-weight:800;letter-spacing:-.03em;line-height:1.02;font-variant-numeric:tabular-nums;background:var(--ax-kpi-bg);-webkit-background-clip:text;background-clip:text;color:var(--ax-kpi-ink)}
.metric-cap{color:var(--ax-muted);font-size:.72rem;font-weight:700;letter-spacing:.045em;text-transform:uppercase;margin-top:.38rem}
.metric-delta{font-size:.85rem;font-weight:700;margin-top:.2rem;display:inline-flex;align-items:center;gap:.2rem}
.metric-delta.good{color:var(--ax-positive)}.metric-delta.bad{color:var(--ax-negative)}
.metric-delta{flex-wrap:wrap;column-gap:.45rem;row-gap:0}
.metric-delta-label{flex-basis:100%;color:var(--ax-muted);font-weight:500}
.panel svg.metric-spark{display:block;width:100%;max-width:340px;height:34px;margin-top:.5rem;overflow:visible}
.metric-goal{width:100%;max-width:340px;margin-top:.55rem}
.metric-goal-bar{height:6px;border-radius:3px;background:var(--ax-line);overflow:hidden}
.metric-goal-bar>span{display:block;height:100%;border-radius:3px;background:var(--ax-accent)}
.metric-goal.reached .metric-goal-bar>span{background:var(--ax-positive)}
.metric-goal-text{color:var(--ax-muted);font-size:.72rem;font-weight:600;margin-top:.3rem}
.group-body .metric{align-self:stretch;justify-content:flex-start}
/* ::KPI_SIZE 'compact' (#405): one line — ::LABEL, the value, the change —
   no sparkline / goal (no room); a tile's own class wins over its
   ::GROUP's. A status row of 4-6 tiles fits in ~32-40px. */
.metric.metric-size-compact,.group-compact .metric:not(.metric-size-normal){flex-direction:row;flex-wrap:wrap;align-items:baseline;justify-content:flex-start;column-gap:.4rem;row-gap:0;padding:.3rem .65rem}
.metric.metric-size-compact .metric-value,.group-compact .metric:not(.metric-size-normal) .metric-value{font-size:1.15rem;line-height:1.2}
.metric.metric-size-compact .metric-cap,.group-compact .metric:not(.metric-size-normal) .metric-cap{order:-1;margin-top:0;font-size:.64rem}
.metric.metric-size-compact .metric-delta,.group-compact .metric:not(.metric-size-normal) .metric-delta{margin-top:0;font-size:.76rem}
.metric.metric-size-compact .metric-delta-label,.group-compact .metric:not(.metric-size-normal) .metric-delta-label,
.metric.metric-size-compact svg.metric-spark,.group-compact .metric:not(.metric-size-normal) svg.metric-spark,
.metric.metric-size-compact .metric-goal,.group-compact .metric:not(.metric-size-normal) .metric-goal{display:none}
.group-compact{padding:.65rem .9rem .65rem 1.05rem}
.group-compact .group-body{gap:.5rem .9rem}
.textcard{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:.4rem;min-height:150px}
.text-value{font-weight:700;letter-spacing:-.02em;color:var(--ax-ink);line-height:1.25}
.text-small .text-value{font-size:1rem}
.text-medium .text-value{font-size:1.5rem}
.text-large .text-value{font-size:2.2rem;font-weight:800;letter-spacing:-.03em}

/* ---- misc panels ---- */
.nodata{color:var(--ax-muted);font-size:.85rem;text-align:center;padding:2.6rem 0;font-weight:500}
.placeholder{background:transparent;border:1px dashed var(--ax-line);box-shadow:none;min-height:80px}
.placeholder:hover{box-shadow:none;border-color:var(--ax-line)}
.header-image{grid-column:1/-1;max-width:100%;max-height:140px;object-fit:contain;border-radius:12px;justify-self:start}
.footer-link{grid-column:1/-1;justify-self:center;color:var(--ax-accent);font-weight:600;font-size:.9rem;text-decoration:none;padding:.4rem 0}
.footer-link:hover{text-decoration:underline}
.download-row{justify-content:flex-start}
.dl-btn{background:var(--ax-btn-bg);color:var(--ax-btn-ink);border:0;border-radius:10px;padding:.55rem 1rem;font-weight:600;font-size:.85rem;cursor:pointer}
.err{grid-column:1/-1;color:var(--ax-err-ink);background:var(--ax-err-bg);border:1px solid var(--ax-err-border);border-radius:12px;padding:.8rem 1rem;font:13px/1.5 ui-monospace,monospace;white-space:pre-wrap}

/* ---- ::SUBMIT (#517 S4) ---- */
.submit-panel{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;padding:1rem 1.1rem}
.submit-btn{background:var(--ax-btn-bg);color:var(--ax-btn-ink);border:0;border-radius:10px;padding:.6rem 1.2rem;font-weight:600;font-size:.9rem;cursor:pointer}
.submit-btn:disabled{opacity:.55;cursor:not-allowed}
.submit-btn:focus-visible{outline:none;box-shadow:var(--ax-focus-ring)}
.submit-status{font-size:.85rem;color:var(--ax-positive);min-height:1.1em}
.submit-status:empty{display:none}
.submit-error{font-size:.85rem;color:var(--ax-negative);min-height:1.1em}
.submit-error:empty{display:none}
.submit-error.submit-reason{color:var(--ax-muted)}
.submit-preview-note{grid-column:1/-1;margin:0 0 .3rem;font-size:.8rem;color:var(--ax-badge-warn-ink);background:var(--ax-badge-warn-bg);border-radius:8px;padding:.4rem .7rem}

/* ---- tabs ---- */
.tabbar{grid-column:1/-1;display:flex;gap:.25rem;border-bottom:1px solid var(--ax-line);margin:0 0 .9rem}
.tab-btn{position:relative;background:none;color:var(--ax-tab-ink);border:0;border-radius:9px 9px 0 0;padding:.6rem 1.05rem;font-family:var(--ax-font-display);font-weight:600;font-size:.95rem;letter-spacing:-.01em;cursor:pointer;box-shadow:none;transition:color .14s,background .14s}
.tab-btn:hover{color:var(--ax-ink);background:var(--ax-tab-hover-bg);transform:none;filter:none}
.tab-btn.active{color:var(--ax-tab-active)}
.tab-btn.active::after{content:"";position:absolute;left:.7rem;right:.7rem;bottom:-1px;height:3px;background:var(--ax-accent-bar);border-radius:3px 3px 0 0;box-shadow:var(--ax-accent-glow)}
.tabpane{margin-bottom:1rem}
.subtabbar{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.3rem;margin:0 0 1rem;padding:.25rem;background:var(--ax-subtab-bg);border-radius:10px}
.subtab-btn{border-radius:8px;border-bottom:0;padding:.4rem .85rem;font-size:.83rem}
.subtab-btn:hover{background:var(--ax-pill-hover)}
.subtab-btn.active{color:var(--ax-accent-ink);background:var(--ax-btn-bg);border-bottom:0}
.subtabwrap{grid-column:1/-1}

/* ---- ::VIEW / ::ENDVIEW: alternative views of one panel (#214) ---- */
.dp-views{grid-column:1/-1;display:flex;flex-direction:column;gap:.7rem}
.dp-viewbar{align-self:flex-end}
.dp-viewpane{margin:0}
@media(max-width:760px){
  .dp-viewbar{align-self:flex-start;max-width:100%;overflow-x:auto}
  .dp-viewbar button{min-height:24px}
}
@media print{.dp-viewbar{display:none}}

/* ---- ::VIEW_PLACEMENT 'header': the switcher in the card's title row
   instead of its own row above it (#534). placeViewHeaderBar() moves the
   same bar (JS) into whichever alternative is shown; this only styles it
   once it is there — the title text wraps (its anonymous flex item
   shrinks first; the bar never does) before the buttons do. */
.panel-title:has(.dp-viewbar){display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem .6rem}
.panel-title .dp-viewbar{flex:0 0 auto;align-self:center;margin-left:auto}
.panel-title .dp-seg{padding:1px;gap:1px}
.panel-title .dp-seg button{padding:.28rem .55rem;font-size:.76rem}
/* below a minimum card width: segmented buttons fold into one <select> —
   a child of the bar itself, so it travels with it when the card swaps. */
.dp-viewbar-select{display:none;font:inherit;font-size:.78rem;font-weight:600;color:var(--ax-ink);background:var(--ax-input-bg);border:1px solid var(--ax-line);border-radius:8px;padding:.3rem .5rem;cursor:pointer;max-width:100%}
.dp-viewbar.dp-viewbar-folded{border:0;background:none;box-shadow:none;padding:0;gap:0}
.dp-viewbar.dp-viewbar-folded>[role="tab"]{display:none}
.dp-viewbar.dp-viewbar-folded>.dp-viewbar-select{display:inline-block}

/* ---- ::GUIDE_STEP: guided sequences (onboarding, tutorials) (#516) ---- */
.dp-steps{grid-column:1/-1;margin:0;background:var(--ax-card);border:1px solid var(--ax-line);border-radius:var(--ax-radius);padding:1.1rem 1.3rem 1.3rem;box-shadow:var(--ax-shadow);display:flex;flex-direction:column;gap:.9rem}
.dp-step-head{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;justify-content:space-between}
.dp-step-progress-wrap{display:flex;flex-direction:column;gap:.35rem;min-width:180px;flex:1 1 auto}
.dp-step-progress-text{font-size:.82rem;font-weight:700;color:var(--ax-heading)}
.dp-step-progress{height:6px;border-radius:999px;background:var(--ax-line);overflow:hidden}
.dp-step-progress-bar{height:100%;background:var(--ax-accent-bar);border-radius:999px;transition:width .18s ease}
.dp-step-list{display:flex;flex-wrap:wrap;gap:.35rem;margin:0;padding:0;list-style:none}
.dp-step-list button{min-width:1.9rem;height:1.9rem;padding:0 .3rem;border-radius:999px;background:var(--ax-input-bg);color:var(--ax-muted);border:1px solid var(--ax-line);font-weight:700;font-size:.8rem;box-shadow:none;cursor:pointer}
.dp-step-list button:hover:not([aria-disabled=true]){color:var(--ax-ink);background:var(--ax-tab-hover-bg)}
.dp-step-list button[aria-current=step]{background:var(--ax-accent);color:var(--ax-accent-ink);border-color:transparent}
.dp-step-list button[aria-disabled=true]{color:var(--ax-muted);opacity:.5;cursor:default;background:transparent}
.dp-step-list button:focus-visible{outline:none;box-shadow:var(--ax-focus-ring)}
.dp-steppane{margin:0}
.dp-step-title{font-family:var(--ax-font-display);font-size:1.1rem;font-weight:700;letter-spacing:-.01em;color:var(--ax-heading);margin:0 0 .5rem;grid-column:1/-1}
.dp-step-title:focus-visible{outline:none}
.dp-step-foot{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.dp-step-foot .dp-step-back{order:1;background:var(--ax-btn2-bg);color:var(--ax-ink);border:1px solid var(--ax-line);box-shadow:var(--ax-btn2-shadow)}
.dp-step-message{order:2;flex:1 1 auto;font-size:.82rem;font-weight:600;color:var(--ax-badge-warn-ink)}
.dp-step-next{order:3;margin-left:auto}
.dp-step-next[aria-disabled=true]{cursor:not-allowed;filter:none;background:var(--ax-input-bg);color:var(--ax-muted);border:1px solid var(--ax-line);box-shadow:none}
.dp-step-next[aria-disabled=true]:hover{filter:none;background:var(--ax-input-bg)}
/* #523: the ⤓ HTML export's offline note, replacing a dropped ::GATE's message/disabled Next */
.dp-step-note{order:4;flex-basis:100%;margin:.4rem 0 0;font-size:.78rem;font-weight:500;color:var(--ax-muted)}
@media(max-width:600px){
  .dp-step-list{display:none}
  .dp-step-foot{flex-wrap:wrap}
  .dp-step-foot .dp-step-back,.dp-step-foot .dp-step-next{flex:1 1 calc(50% - .45rem);margin-left:0}
  .dp-step-message{order:4;flex-basis:100%}
}
@media print{.dp-step-head,.dp-step-foot{display:none}}

/* ---- #518: guided tours (`-- @tour`) ---- */
.dp-tour-btn{position:relative}
.dp-tour-menu{position:absolute;right:0;top:calc(100% + .35rem);z-index:120;min-width:14rem;max-width:min(22rem,calc(100vw - 2rem));padding:.4rem;background:var(--ax-card);border:1px solid var(--ax-line);border-radius:var(--ax-radius-sm);box-shadow:var(--ax-pop-shadow);display:flex;flex-direction:column;gap:.15rem}
.dp-tour-menu[hidden]{display:none}
.dp-tour-menu button{display:block;width:100%;text-align:left;font:inherit;font-size:.85rem;font-weight:600;color:var(--ax-ink);background:transparent;border:0;border-radius:7px;padding:.45rem .6rem;cursor:pointer;box-shadow:none}
.dp-tour-menu button:hover{background:var(--ax-tab-hover-bg)}
.dp-tour-scrim{position:fixed;inset:0;z-index:150;pointer-events:none}
.dp-tour-ring{position:fixed;z-index:151;border-radius:var(--ax-radius-sm);border:2px solid var(--ax-accent);box-shadow:0 0 0 2000px var(--ax-modal-backdrop);pointer-events:none;transition:top .18s ease,left .18s ease,width .18s ease,height .18s ease}
.dp-tour-pop{position:fixed;z-index:152;width:min(360px,calc(100vw - 2rem));box-sizing:border-box;background:var(--ax-card);color:var(--ax-ink);border:1px solid var(--ax-line);border-radius:var(--ax-radius-sm);box-shadow:var(--ax-modal-shadow);padding:.9rem 1rem 1rem;display:flex;flex-direction:column;gap:.6rem}
.dp-tour-pop.dp-tour-center{top:50%;left:50%;transform:translate(-50%,-50%)}
.dp-tour-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.dp-tour-count{font-size:.76rem;font-weight:700;color:var(--ax-muted)}
.dp-tour-close{border:0;background:transparent;color:var(--ax-muted);font-size:1rem;line-height:1;cursor:pointer;padding:.1rem .3rem;box-shadow:none}
.dp-tour-close:hover{color:var(--ax-ink);background:transparent;transform:none}
.dp-tour-body{font-size:.88rem;line-height:1.5;margin:0}
.dp-tour-foot{display:flex;align-items:center;gap:.6rem;justify-content:flex-end}
.dp-tour-foot .dp-tour-back{margin-right:auto}
.dp-tour-pop button:focus-visible,.dp-tour-menu button:focus-visible{outline:2px solid var(--ax-accent);outline-offset:2px}
@media(max-width:600px){
  .dp-tour-pop,.dp-tour-pop.dp-tour-center{position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;max-width:100%;border-radius:var(--ax-radius-sm) var(--ax-radius-sm) 0 0;transform:none}
}
@media(forced-colors:active){
  .dp-tour-ring{box-shadow:none;outline:3px solid Highlight}
  .dp-tour-pop{outline:1px solid CanvasText}
}
@media print{.dp-tour-scrim,.dp-tour-ring,.dp-tour-pop,.dp-tour-menu,.dp-tour-btn{display:none}}

/* ---- served nav (serve / locked pages with 2+ dashboards) ---- */
.served-nav{position:sticky;top:0;z-index:50;display:flex;gap:.25rem;padding:.5rem 1rem;background:var(--ax-nav-bg);border-bottom:1px solid var(--ax-nav-border);flex-wrap:wrap;align-items:center;box-shadow:var(--ax-nav-shadow)}
.served-nav a{padding:.35rem .8rem;border-radius:6px;text-decoration:none;font:600 14px system-ui;color:var(--ax-nav-ink)}
.served-nav a.active{background:var(--ax-nav-active-bg);color:var(--ax-nav-active-ink)}
.served-nav-grp{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.25rem;margin-left:.6rem}
.served-nav-grp:first-child{margin-left:0}
.served-nav-group{font:700 11px system-ui;letter-spacing:.05em;text-transform:uppercase;color:var(--ax-muted);margin-right:.1rem}
.served-cert{color:var(--ax-positive);font-weight:700}
.served-nav a.active .served-cert{color:inherit}
.served-nav-pickwrap{position:relative}
.served-nav-pick{font:600 14px system-ui;color:var(--ax-nav-active-ink);background:var(--ax-nav-active-bg);border:1px solid var(--ax-nav-border);border-radius:6px;padding:.35rem .8rem;cursor:pointer}
.served-nav-menu{position:absolute;left:0;top:calc(100% + .35rem);z-index:60;width:min(26rem,calc(100vw - 2rem));max-height:min(70vh,34rem);overflow:auto;padding:.6rem;background:var(--ax-card);border:1px solid var(--ax-line);border-radius:var(--ax-radius-sm);box-shadow:var(--ax-pop-shadow)}
.served-nav-menu[hidden]{display:none}
.served-nav-q{width:100%;box-sizing:border-box;font:inherit;font-size:.9rem;color:var(--ax-ink);background:var(--ax-input-bg);border:1px solid var(--ax-line);border-radius:8px;padding:.45rem .6rem;margin-bottom:.4rem}
.served-nav-menu h3{font:700 11px system-ui;letter-spacing:.05em;text-transform:uppercase;color:var(--ax-muted);margin:.6rem .3rem .2rem}
.served-nav-menu ul{list-style:none;margin:0;padding:0}
.served-nav-menu li{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.served-nav-menu li[hidden],.served-nav-menu section[hidden]{display:none}
.served-nav-menu a{display:inline-block;padding:.3rem .5rem}
.served-owner{font-size:.78rem;color:var(--ax-muted)}
.served-nav-none{color:var(--ax-muted);font-size:.85rem;margin:.4rem .3rem}
/* #407 part 3: the nav_picker dropdown — pushed to the far side of the bar
   when there's room; `.served-nav`'s own flex-wrap drops it to its own line
   at phone width instead of squeezing the dashboard links. */
.served-nav-picker{display:inline-flex;align-items:center;gap:.4rem;margin-left:auto;font:600 14px system-ui;color:var(--ax-nav-ink);white-space:nowrap}
.served-nav-picker select{font:inherit;color:var(--ax-ink);background:var(--ax-input-bg);border:1px solid var(--ax-nav-border);border-radius:6px;padding:.3rem .5rem;max-width:14rem}

/* ---- tooltip, crosshair, hover ---- */
.dp-tip{position:fixed;pointer-events:none;background:var(--ax-tip-bg);backdrop-filter:blur(6px);color:var(--ax-tip-ink);padding:.55rem .7rem;border-radius:8px;font-size:.8rem;font-weight:500;border:1px solid var(--ax-tip-border);box-shadow:var(--ax-tip-shadow);opacity:0;transform:translateY(3px) scale(.98);transition:opacity .11s,transform .11s;z-index:50;white-space:nowrap;min-width:96px}
.dp-tip.show{opacity:1;transform:none}
.dp-tip .tip-dot{display:inline-block;width:.55rem;height:.55rem;border-radius:50%;margin-right:.45rem;vertical-align:middle}
.dp-tip .tip-rule{display:inline-block;width:.75rem;border-top:2px dashed currentColor;margin-right:.45rem;vertical-align:middle}
.dp-tip .tip-head{font-weight:700;margin-bottom:.35rem;color:var(--ax-tip-head);font-size:.78rem}
.dp-tip .tip-lines{white-space:pre-line;line-height:1.4;margin:-.2rem 0 .4rem}
.dp-tip .tip-row{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;line-height:1.65}
.dp-tip .tip-row b{font-variant-numeric:tabular-nums;color:var(--ax-tip-head);font-weight:700}
.dp-cross{position:fixed;width:0;border-left:1px dashed var(--ax-cross);pointer-events:none;z-index:49;display:none}
.dp-hit{transition:filter .12s}.dp-hit:hover{filter:brightness(1.1) saturate(1.06)}
svg[data-map] path.dp-hit:not([fill="none"]):hover,svg[data-map] polygon.dp-hit:hover,svg[data-map] circle.dp-hit:hover{stroke:var(--ax-ink);stroke-width:1.5px}svg[data-map] path.dp-hit[fill="none"]:hover{stroke-width:2.5px}
/* heatmap cell labels: hover and click reach the cell underneath */
svg[data-kind="heatmap"] text{pointer-events:none}

/* ---- per-panel toolbox, zoom bar, brush, value-map ---- */
.dp-toolbox{position:absolute;top:9px;right:11px;display:flex;gap:4px;opacity:0;transition:opacity .15s;z-index:6}
.panel:hover .dp-toolbox,.dp-toolbox:focus-within{opacity:1}
.dp-tool{border:1px solid var(--ax-tool-border);background:var(--ax-tool-bg);color:var(--ax-tool-ink);border-radius:6px;width:26px;height:26px;font-size:15px;line-height:1;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center}
.dp-tool:hover{color:var(--ax-tool-hover-ink);border-color:var(--ax-tool-hover-border);background:var(--ax-tool-hover-bg)}
.dp-tool.dp-tool-on{color:var(--ax-tool-on-ink);background:var(--ax-tool-on);border-color:var(--ax-tool-on)}
/* narrow panels / touch screens (.dp-narrow): the tools fold behind one "⋯" button, kept clear of the title */
.dp-tool.dp-tool-more{display:none}
.panel.dp-narrow .dp-toolbox{flex-direction:column;align-items:flex-end}
.panel.dp-narrow .dp-tool-more{display:flex}
.panel.dp-narrow .dp-toolbox:not(.dp-open) .dp-tool:not(.dp-tool-more){display:none}
.panel.dp-narrow .panel-title{padding-right:1.75rem}
@media (hover:none){.dp-toolbox{opacity:1}.dp-tool{width:32px;height:32px}}
.dp-zoom{margin:6px 8px 2px;height:20px}
.dp-zoom-track{position:relative;height:100%;background:var(--ax-zoom-track);border:1px solid var(--ax-zoom-track-border);border-radius:5px}
.dp-zoom-fill{position:absolute;top:-1px;bottom:-1px;left:0;width:100%;background:var(--ax-zoom-fill);border:1px solid var(--ax-zoom-fill-border);border-radius:5px;cursor:grab}
.dp-zoom-fill:active{cursor:grabbing}
.dp-zoom-on .dp-zoom-fill{background:var(--ax-zoom-fill-on)}
.dp-zoom-h{position:absolute;top:50%;width:9px;height:15px;margin-left:-5px;transform:translateY(-50%);background:var(--ax-zoom-handle);border:1px solid var(--ax-zoom-handle-border);border-radius:3px;cursor:ew-resize;box-shadow:var(--ax-zoom-handle-shadow)}
.dp-zoom-h::after{content:"";position:absolute;left:2.5px;right:2.5px;top:3px;bottom:3px;border-left:1px solid var(--ax-zoom-grip);border-right:1px solid var(--ax-zoom-grip)}
.panel-svg{position:relative}
.dp-brush-ov{position:absolute;inset:0;cursor:crosshair;z-index:4}
.dp-range-band{position:absolute;top:0;bottom:0;background:var(--ax-brush-fill);border-left:1px dashed var(--ax-brush-border);border-right:1px dashed var(--ax-brush-border);pointer-events:none;z-index:0}
/* one line at every depth (the hint truncates), so a drill never moves the chart */
.dp-crumbs{display:flex;flex-wrap:nowrap;align-items:center;gap:.3rem;font-size:.78rem;line-height:1.5;font-weight:600;color:var(--ax-muted);margin:calc(-.25rem - 3px) -3px calc(.5rem - 3px);padding:3px;white-space:nowrap;min-width:0;overflow:hidden}
.dp-crumbs>*{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.dp-crumbs>.dp-crumb-sep{flex:none}
.dp-crumb{font:inherit;color:var(--ax-accent);background:transparent;border:0;border-radius:var(--ax-radius-sm);padding:.1rem .3rem;cursor:pointer;box-shadow:none;transform:none}
.dp-crumb:hover{background:var(--ax-tab-hover-bg);transform:none;box-shadow:none;filter:none}
.dp-crumb:focus-visible{outline:2px solid var(--ax-focus-ring);outline-offset:1px}
.dp-crumb-cur{color:var(--ax-ink);padding:.1rem .3rem;border-radius:var(--ax-radius-sm)}
.dp-crumb-cur:focus-visible{outline:2px solid var(--ax-focus-ring);outline-offset:1px}
.dp-crumb-sep{opacity:.6}
.dp-crumb-level{font-weight:500;margin-left:.35rem;flex:1 1 0}
.dp-link{color:var(--ax-accent);font-weight:600;text-decoration:none;white-space:nowrap}
.dp-link:hover{text-decoration:underline}
.dp-ia-bar{display:flex;flex-wrap:wrap;gap:.35rem;margin:-.25rem 0 .45rem}
.dp-brush-rect{position:absolute;display:none;border:1px dashed var(--ax-brush-border);background:var(--ax-brush-fill);pointer-events:none}
.dp-vmap{display:flex;align-items:center;gap:8px;margin:6px 8px 2px;font-size:.72rem;color:var(--ax-tool-ink)}
.dp-vmap-track{position:relative;flex:1;height:14px;border-radius:5px;border:1px solid var(--ax-vmap-border);background:var(--ax-vmap-track)}
.dp-vmap-fill{position:absolute;top:-1px;bottom:-1px;background:var(--ax-vmap-fill);border:1px solid var(--ax-vmap-fill-border);border-radius:5px;pointer-events:none}
.dp-vmap-h{position:absolute;top:50%;width:9px;height:16px;margin-left:-5px;transform:translateY(-50%);background:var(--ax-zoom-handle);border:1px solid var(--ax-vmap-handle-border);border-radius:3px;cursor:ew-resize;box-shadow:var(--ax-vmap-handle-shadow)}
.dp-vmap-lab{min-width:26px;text-align:center;font-variant-numeric:tabular-nums}

/* ---- modals (full-screen chart, data view) ---- */
.dp-modal-back{position:fixed;inset:0;background:var(--ax-modal-backdrop);backdrop-filter:blur(2px);z-index:100;display:flex;align-items:center;justify-content:center;padding:5vh 4vw}
.dp-modal{background:var(--ax-card);color:var(--ax-ink);border-radius:12px;box-shadow:var(--ax-modal-shadow);max-width:900px;width:100%;max-height:90vh;display:flex;flex-direction:column;overflow:hidden}
.dp-modal-head{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1.1rem;border-bottom:1px solid var(--ax-line);font-size:.95rem}
.dp-modal-x{border:0;background:transparent;font-size:1rem;cursor:pointer;color:var(--ax-modal-x);line-height:1}
.dp-modal-x:hover{color:var(--ax-modal-x-hover)}
.dp-modal-body{overflow:auto;padding:.5rem 0}
.dp-modal-note{padding:.5rem 1.1rem;color:var(--ax-modal-x);font-size:.78rem}
.dp-modal-full{max-width:96vw;width:96vw}
.dp-modal-full .dp-modal-body{display:flex;align-items:center;justify-content:center;padding:1rem 1.2rem}
.dp-modal-full .dp-modal-body svg{width:100%;height:auto;max-height:82vh}
table.dp-dv{border-collapse:collapse;width:100%;font-size:.8rem;font-variant-numeric:tabular-nums}
table.dp-dv th,table.dp-dv td{text-align:left;padding:.4rem .8rem;border-bottom:1px solid var(--ax-line);white-space:nowrap}
table.dp-dv th{position:sticky;top:0;background:var(--ax-card);font-weight:700;color:var(--ax-tip-ink)}

/* ---- static pages (CLI `dashboard`, `serve --dashboards`, HTML export) ---- */
body.dp-static{font:15px/1.55 var(--ax-font-body);background:var(--ax-bg-image);background-color:var(--ax-bg);background-attachment:fixed;color:var(--ax-ink);margin:0;padding:1.6rem 2rem}
body.dp-static .grid{grid-template-columns:repeat(auto-fit,minmax(440px,1fr))}
body.dp-static .dp-src{grid-column:1/-1;color:var(--ax-muted);font-size:.85rem;margin:-.2rem 0 .4rem}
body.dp-static .dash-list a{color:var(--ax-link);font-weight:600;text-decoration:none}
body.dp-static .dash-list a:hover{text-decoration:underline}
body.dp-static .dash-index{grid-column:1/-1;display:flex;flex-direction:column;gap:.4rem}
body.dp-static .dash-q{max-width:26rem;font:inherit;color:var(--ax-ink);background:var(--ax-input-bg);border:1px solid var(--ax-line);border-radius:8px;padding:.5rem .7rem}
body.dp-static .dash-group-h{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ax-muted);margin:1rem 0 .2rem}
body.dp-static .dash-sub-h{font-size:.85rem;font-weight:700;color:var(--ax-ink);margin:.5rem 0 .1rem}
body.dp-static .dash-list{margin:0;padding-left:1.2rem}
body.dp-static .dash-list li{margin:.25rem 0}
body.dp-static .dash-list li[hidden],body.dp-static .dash-group[hidden]{display:none}
body.dp-static .dash-cert{color:var(--ax-positive);font-size:.8rem;font-weight:700;margin-left:.4rem}
body.dp-static .dash-meta{display:inline-flex;gap:.35rem;flex-wrap:wrap;margin-left:.6rem;font-size:.8rem;color:var(--ax-muted)}
body.dp-static .dash-tag{border:1px solid var(--ax-line);border-radius:999px;padding:0 .45rem}
body.dp-static .dash-none{color:var(--ax-muted)}
body.dp-static .controls select{margin-left:.3rem}
.dp-table.virtual td,.dp-table.virtual.compact td{padding-top:0;padding-bottom:0}
/* print / PDF: no controls; every row (client tables); header repeated on each page, totals at the end */
@media print{
.tbl-bar,.dp-table tr.tbl-frow,.dp-table tr.tbl-stats,.table-foot,.dp-table .row-cb,.dp-table .th-sort,.tot-menu{display:none}
.tbl-scroll,.tbl-scroll.virtual,.tbl-scroll.long{max-height:none;overflow:visible}
.dp-table thead{display:table-header-group}
.dp-table tfoot{display:table-row-group}
.dp-table th,.dp-table tfoot td{position:static}
.dp-table tr{break-inside:avoid}
.dp-table .tot-agg{padding:0;cursor:default}
}

/* ---- accessible charts (#37) ---- */
.dp-a11y-bar{display:flex;justify-content:flex-end;margin:-.35rem 0 .45rem}
.dp-astable-btn{font:500 .74rem/1.2 var(--ax-font-body);color:var(--ax-muted);background:transparent;border:1px solid var(--ax-line);border-radius:999px;padding:.28rem .75rem;cursor:pointer}
.dp-astable-btn:hover{color:var(--ax-ink);border-color:var(--ax-input-border-hover)}
.dp-astable-btn[aria-pressed="true"]{color:var(--ax-accent);border-color:var(--ax-accent)}
.dp-astable-btn:focus-visible{outline:2px solid var(--ax-accent);outline-offset:2px}
.panel svg[tabindex]:focus{outline:none}
.panel svg[tabindex]:focus-visible{outline:2px solid var(--ax-accent);outline-offset:4px;border-radius:6px}
.panel svg .dp-hit:focus{outline:none}
.panel svg .dp-hit:focus-visible{stroke:var(--ax-ink);stroke-width:2.5px;filter:drop-shadow(0 0 3px var(--ax-accent));opacity:1 !important}
.dp-astable-view{max-height:420px;overflow:auto}
.dp-diagram-steps{margin:.2rem 0 .6rem;padding-left:1.4rem;font:400 .86rem/1.5 var(--ax-font-body);color:var(--ax-ink)}
@media print{.dp-a11y-bar{display:none}}
/* reduced motion: no animation or transition anywhere on the dashboard */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}
/* a drill-through to another served dashboard (/d/<id>) cross-fades instead
   of flashing white, where the browser has cross-document view transitions */
@media (prefers-reduced-motion: no-preference){@view-transition{navigation:auto}}

/* ---- fit-to-screen (::FIT, #400): a fitted panel's height is set by
   fitScreen() in web/app.js; a chart is redrawn at it, a table / text box
   scrolls inside it ---- */
body.dp-fit-measuring,body.dp-fit-measuring *{transition:none !important}
.panel.dp-fit,.panel.dp-fit-scroll{box-sizing:border-box}
.panel.dp-fit{overflow:hidden}
.panel.dp-fit-scroll{overflow:auto}
.dp-fit-note{position:fixed;right:16px;bottom:16px;z-index:70;display:flex;gap:.5rem;align-items:center;max-width:min(360px,calc(100vw - 32px));padding:.45rem .5rem .45rem .8rem;border-radius:10px;background:var(--ax-card);color:var(--ax-muted);border:1px solid var(--ax-line);box-shadow:var(--ax-shadow);font-size:.8rem;line-height:1.35}
.dp-fit-note-x{background:none;border:0;box-shadow:none;color:inherit;font-size:1.05rem;line-height:1;padding:.1rem .3rem;cursor:pointer}