/* Degradation Matrix Explorer — card stylesheet (`dm-*`).
 *
 * Ship as assets/deg-matrix.css. Reads ONLY the semantic tokens from
 * copilot-tokens.css (--ink, --card-bg, --accent-*, --warn-*, --fault-* …), so
 * light/dark come for free. layout.py emits className only — no hex, no C[...].
 * The design mock (Degradation Matrix Explorer Redesign.html) links this same
 * file, so what the mock shows is what Dash renders.
 */

/* ── Local ramps (derived from tokens, never new hexes) ─────────────────── */
/* `.dm-scope` carries the same ramps for a host that renders this card's
   renderers outside `.dm` (the Inertia Node Summary's Degradation tab). */
.dm,.dm-scope{
  --dm-t1:var(--accent);
  --dm-t2:var(--warn-accent);
  --dm-t3:color-mix(in oklab,var(--orange) 45%,var(--fault));
  --dm-t4:var(--fault-accent);
  --dm-w1-bg:var(--accent-bg);--dm-w1-ink:var(--accent-ink);
  --dm-w2-bg:var(--lightgreen);--dm-w2-ink:#08210d;
  --dm-w3-bg:var(--darkgreen);--dm-w3-ink:#fff;
  --dm-mono:"JetBrains Mono",SFMono-Regular,Menlo,monospace;
  --dm-radius:10px;
}
.dm{font-size:13px;line-height:1.45;color:var(--ink);display:flex;flex-direction:column;gap:12px}
.dm *,.dm-scope *{box-sizing:border-box}
.dm .mono,.dm-num{font-family:var(--dm-mono);font-variant-numeric:tabular-nums}

/* ── Toolbar: chemistry segmented control + source line ─────────────────── */
.dm-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
/* dcc.Tabs paints inline styles from its `colors` prop; these override them. */
.dm-seg-parent{flex:0 0 auto}
.dm-seg{display:inline-flex !important;gap:2px;padding:3px;background:var(--bg-soft) !important;border:1px solid var(--border) !important;border-radius:9px;width:auto !important;height:auto !important}
.dm-seg .dm-seg-tab{border:0 !important;background:transparent !important;padding:5px 16px !important;border-radius:6px;font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--muted) !important;line-height:1.3;min-width:0 !important;width:auto !important;cursor:pointer}
.dm-seg .dm-seg-tab:hover{color:var(--ink) !important}
.dm-seg .dm-seg-tab--on{background:var(--card-bg) !important;color:var(--accent-ink) !important;box-shadow:var(--shadow-sm)}
.dm-seg-parent .tab-content{display:none}
.dm-source{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);min-width:0;text-wrap:pretty}
.dm-source::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0}

/* ── Top-level nav + views (EL-704) ─────────────────────────────────────── */
/* Every view stays mounted (grids, edits, the node subcard survive a switch);
   the root's dm--view-* class shows one. */
.dm-nav-parent{flex:0 0 auto}
.dm-nav-parent .tab-content{display:none}
.dm-nav{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;padding:4px;background:var(--bg-soft) !important;border:1px solid var(--border) !important;border-radius:11px;width:auto !important;height:auto !important}
.dm-nav .dm-nav-tab{border:0 !important;background:transparent !important;padding:8px 10px !important;border-radius:8px;font-size:13px;font-weight:800;letter-spacing:.01em;color:var(--muted) !important;line-height:1.25;min-width:0 !important;width:auto !important;cursor:pointer;text-wrap:balance}
.dm-nav .dm-nav-tab:hover{color:var(--ink) !important}
.dm-nav .dm-nav-tab:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.dm-nav .dm-nav-tab--on{background:var(--card-bg) !important;color:var(--accent-ink) !important;box-shadow:var(--shadow-sm)}
.dm-view{display:none;flex-direction:column;gap:12px;min-width:0}
.dm--view-explainer>.dm-view--explainer,.dm--view-node>.dm-view--node,.dm--view-calibration>.dm-view--calibration{display:flex}
.dm-node-chem{flex-basis:100%;font-size:11.5px}
.dm-toolbar>.dm-field-label{margin-right:-4px}

/* ── Model Explainer ────────────────────────────────────────────────────── */
.dm-explainer{border:1px solid var(--border);border-radius:var(--dm-radius);background:var(--card-bg-soft)}
.dm-deck-notation{padding:0 14px 12px}
/* The stage flow on every slide (Mermaid; lit steps are the slide's). Source
   text stays invisible until mermaid.js swaps in the SVG. */
.dm-flow{margin:0 0 12px;padding:6px 8px;border:1px solid var(--border);border-radius:8px;background:var(--card-bg);min-width:0;overflow-x:auto}
.dm .mermaid-pending{color:transparent;min-height:64px;white-space:pre;overflow:hidden;font-size:1px}
.dm-flow-mmd,.dm-deck-mmd{text-align:center;min-width:0}
.dm-flow-mmd svg,.dm-deck-mmd svg{max-width:100%;height:auto}
/* Slide 2: the live D heatmap — rows are modes, columns defects. */
.dm-dmap-wrap{overflow-x:auto;min-width:0}
.dm-dmap{display:grid;gap:2px;font-family:var(--dm-mono);font-size:10px;min-width:max-content}
.dm-dmap-col{writing-mode:vertical-rl;transform:rotate(180deg);font-family:inherit;font-size:10px;font-weight:700;color:var(--muted);white-space:nowrap;justify-self:center;padding-bottom:2px}
.dm-dmap-mode{font-weight:800;color:var(--ink-soft);padding-right:6px;white-space:nowrap;align-self:center}
.dm-dmap-cell{display:grid;place-items:center;min-height:20px;border-radius:3px;background:var(--bg-soft);color:var(--muted)}
.dm-dmap--lo{background:var(--dm-w1-bg);color:var(--dm-w1-ink)}
.dm-dmap--mid{background:var(--dm-w2-bg);color:var(--dm-w2-ink);font-weight:700}
.dm-dmap--hi{background:var(--dm-w3-bg);color:var(--dm-w3-ink);font-weight:800}
.dm-dmap--p{background:var(--card-bg);color:var(--accent-ink);font-weight:800;box-shadow:inset 0 0 0 1.5px var(--accent)}
/* Explainer deck (EL-678): dcc.Tabs pill over four slides, one shown at a time. */
.dm-deck{min-width:0}
.dm-deck-tabs{padding:10px 12px 0}
.dm-slide-nav{display:grid !important;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:2px;padding:3px;background:var(--bg-soft) !important;border:1px solid var(--border) !important;border-radius:9px;width:auto !important;height:auto !important}
.dm-slide-nav .dm-slide-tab{border:0 !important;background:transparent !important;padding:5px 8px !important;border-radius:6px;font-size:12px;font-weight:700;color:var(--muted) !important;line-height:1.3;min-width:0 !important;width:auto !important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.dm-slide-nav .dm-slide-tab:hover{color:var(--ink) !important}
.dm-slide-nav .dm-slide-tab--on{background:var(--card-bg) !important;color:var(--accent-ink) !important;box-shadow:var(--shadow-sm)}
.dm-deck-stage{min-width:0}
.dm-deck-slide{padding:12px 14px 14px;font-size:13.5px;line-height:1.5;color:var(--ink-soft);min-width:0}
.dm-deck-head{margin-bottom:10px}
.dm-deck-count{font-family:var(--dm-mono);font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.dm-deck-title{margin:2px 0 0;font-size:16px;font-weight:800;color:var(--ink)}
.dm-deck-sub{font-size:13px;color:var(--muted);text-wrap:pretty}
.dm-deck-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:14px;align-items:start}
/* layout:"top" — formula + visual span the slide, the body reads below at full width */
.dm-deck-grid--top{grid-template-columns:minmax(0,1fr)}
.dm-deck-grid--top .dm-deck-flow .dm-deck-col:last-child{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:4px 12px}
.dm-deck-grid--top .dm-deck-flow .dm-deck-col:last-child>.dm-deck-cap{grid-column:1/-1}
.dm-deck-grid--top .dm-deck-flow{grid-template-columns:minmax(0,.55fr) auto minmax(0,2fr)}
.dm-deck-main{display:flex;flex-direction:column;gap:10px;min-width:0}
.dm-deck-eq{padding:8px 12px;border:1px solid var(--accent-border);border-left:3px solid var(--accent);border-radius:8px;background:var(--accent-bg-soft);color:var(--ink);min-width:0}
.dm-deck-eq p{margin:0}
.dm-deck-eq mjx-container,.dm-deck-body mjx-container[display="true"]{max-width:100%;overflow-x:auto;overflow-y:hidden;font-size:105% !important}
.dm-deck-body{min-width:0;font-size:13.5px;line-height:1.5;text-wrap:pretty}
.dm-deck-body p{margin:0 0 8px}
.dm-deck-body ul{margin:0 0 8px;padding-left:18px}
.dm-deck-body li{margin:0 0 4px}
.dm-deck-visual{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--card-bg);min-width:0}
.dm-deck-cap{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.dm-deck-ladder{display:flex;flex-wrap:wrap;align-items:center;gap:5px}
.dm-deck-cut{font-family:var(--dm-mono);font-size:10.5px;font-weight:700;color:var(--muted)}
.dm-deck-flat,.dm-deck-ramp{padding:1px 8px;border-radius:999px;font-family:var(--dm-mono);font-size:10.5px;font-weight:700;border:1px solid var(--border);background:var(--bg-soft);color:var(--muted);white-space:nowrap}
.dm-deck-flat--on{background:var(--fault-bg);color:var(--fault-ink);border-color:var(--fault-border)}
.dm-deck-ramp{flex:1 1 60px;text-align:center;color:var(--ink-soft);background:linear-gradient(90deg,var(--bg-soft),var(--warn-bg),var(--fault-bg))}
.dm-deck-flow{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;align-items:center}
.dm-deck-col{display:flex;flex-direction:column;gap:4px;min-width:0}
.dm-deck-node{display:flex;align-items:center;gap:6px;min-width:0;font-size:12px;font-weight:600;color:var(--ink)}
.dm-deck-node>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-deck-node .dm-v{font-size:10.5px;font-weight:600;color:var(--muted)}
.dm-deck-col:first-child .dm-deck-node{flex-direction:column;align-items:flex-start;gap:0;padding:4px 8px;border:1px solid var(--border);border-radius:6px;background:var(--bg-soft)}
.dm-deck-node .dm-safety{width:26px;height:18px;font-size:10px;flex-shrink:0}
.dm-deck-arrow{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-family:var(--dm-mono);font-weight:800;font-size:12px;background:var(--btn-accent-bg);color:var(--btn-accent-ink)}
.dm-deck-takeaway{margin-top:12px;padding:8px 12px;border-radius:8px;background:var(--bg-soft);border:1px solid var(--border);font-size:13.5px;font-weight:700;color:var(--ink);text-wrap:pretty}
.dm-deck-takeaway::before{content:"Takeaway · ";color:var(--accent-ink)}
/* EL-715: slide sandboxes (Plotly sliders, browser-side) and slide 1's I/O table */
.dm-deck-visuals{display:flex;flex-direction:column;gap:10px;min-width:0}
.dm-deck-sandbox{padding:10px 12px 8px}
.dm-deck-sandbox-hint{font-size:11.5px;line-height:1.4;color:var(--muted);text-wrap:pretty}
.dm-deck-sandbox .slider-group text,.dm-deck-sandbox .gtitle,.dm-deck-sandbox .textpoint text{fill:var(--ink-soft) !important}
.dm-deck-sandbox .slider-rail-rect{fill:var(--border) !important;stroke:none !important}
.dm-deck-sandbox .slider-grip-rect{fill:var(--card-bg) !important;stroke:var(--accent) !important}
.dm-deck-sandbox .slider-tick{stroke:var(--muted) !important}
.dm-deck-body table{width:100%;margin:0 0 10px;border-collapse:collapse;font-size:12.5px}
.dm-deck-body th,.dm-deck-body td{padding:4px 6px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
.dm-deck-body th{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.dm-deck-body td:first-child{font-family:var(--dm-mono);font-size:10.5px;font-weight:700;color:var(--muted);white-space:nowrap}
/* Body + its Variable definitions (EL-702): the symbols, two columns when wide. */
.dm-deck-text{display:flex;flex-direction:column;gap:10px;min-width:0}
/* Definitions drawers (EL-704): every slide's Variable definitions and the deck's notation. */
.dm-deck-defs{border:1px dashed var(--border);border-radius:8px;background:var(--card-bg);min-width:0}
.dm-deck-defs>summary{list-style:none;display:flex;align-items:center;gap:8px;padding:7px 12px;cursor:pointer;user-select:none}
.dm-deck-defs>summary::-webkit-details-marker{display:none}
.dm-deck-defs>summary:hover{background:var(--accent-bg-soft)}
.dm-deck-defs>summary .dm-chev::before{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.dm-deck-defs[open]>summary .dm-chev::before{transform:rotate(45deg)}
.dm-deck-defs[open]>summary{border-bottom:1px dashed var(--border)}
.dm-deck-defs-title{font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-ink)}
.dm-deck-defs-n{margin-left:auto;font-size:11px;color:var(--muted)}
.dm-deck-defs>.dm-deck-defs-md{padding:6px 12px 8px}
.dm-deck-defs-md strong{display:block;margin-top:6px;font-size:11px;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
.dm-deck-defs-md{font-size:12.5px;line-height:1.45;color:var(--ink-soft)}
/* Markers drawn inside each item: an outside marker of the 2nd column would sit in the gap. */
.dm-deck-defs-md ul{margin:4px 0 0;padding:0;list-style:none;columns:2 260px;column-gap:24px}
.dm-deck-defs-md li{position:relative;margin:0 0 4px;padding-left:12px;break-inside:avoid}
.dm-deck-defs-md li::before{content:"•";position:absolute;left:0;color:var(--muted)}
.dm-deck-defs-md p{margin:0}
@media (max-width:720px){
  .dm-deck-grid{grid-template-columns:minmax(0,1fr)}
  /* A phone keeps the diagrams legible: they scroll sideways in their own box. */
  .dm-flow-mmd svg{min-width:640px}
  .dm-deck-mmd{overflow-x:auto}
  .dm-deck-mmd svg{min-width:560px}
}
@media (max-width:520px){
  .dm-slide-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dm-nav .dm-nav-tab{padding:7px 4px !important;font-size:12px}
  .dm-deck-flow,.dm-deck-grid--top .dm-deck-flow{grid-template-columns:minmax(0,1fr)}
  .dm-deck-arrow{justify-self:center}
}
.dm-explainer-foot{padding:9px 14px;font-size:11.5px;color:var(--muted);border-top:1px solid var(--border);text-wrap:pretty}

/* ── Panels (the two zones) ─────────────────────────────────────────────── */
.dm-panel{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.dm-panel-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:11px 14px;border-bottom:1px solid var(--border);background:var(--bg-soft)}
.dm-panel-title{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--accent-ink)}
.dm-panel-sub{font-size:12px;color:var(--muted)}
.dm-panel-actions{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dm-panel-body{padding:12px 14px 14px}
/* The node panel hosts the embedded Inertia Node Summary (EL-682): overflow
   must stay visible — the nested card's sticky chrome and wide grids — so the
   head rounds its own top corners instead of being clipped to them. */
.dm-panel--node{overflow:visible}
.dm-panel--node>.dm-panel-head{border-radius:12px 12px 0 0}

/* ── Controls ───────────────────────────────────────────────────────────── */
.dm-controls{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.dm-field{display:flex;flex-direction:column;gap:4px;min-width:0}
.dm-field-label{font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.dm-field--node{flex:1 1 240px;max-width:340px}
.dm-field--cell{flex:0 1 210px}
.dm-controls-btns{display:flex;gap:8px;margin-left:auto}
.dm-node-dd,.dm-cell-dd{font-size:13px}
.dm-node-dd .Select-value-label,.dm-node-dd input{font-family:var(--dm-mono)}
/* The cell perspective, in the embedded node summary's Degradation header (EL-702). */
.ins-deg-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.ins-deg-head>span:nth-child(2){flex:1 1 320px;min-width:0}
.ins-deg-controls{margin-left:auto}
.ins-deg-controls .dm-field{flex-direction:row;align-items:center;gap:8px}
.ins-deg-controls .dm-cell-dd{width:210px}

/* Buttons. `deg-matrix-action-btn` stays on every button (tests know it);
   `dm-btn` owns the look. */
.dm-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 14px;border-radius:8px;font:inherit;font-size:12.5px;font-weight:700;white-space:nowrap;cursor:pointer;text-decoration:none !important;transition:background .12s,border-color .12s,color .12s}
.dm-btn--primary{background:var(--btn-accent-bg);color:var(--btn-accent-ink);border:1px solid var(--btn-accent-bg)}
.dm-btn--primary:hover{background:var(--btn-accent-bg-hover);border-color:var(--btn-accent-bg-hover)}
.dm-btn--ghost{background:var(--card-bg);color:var(--accent-ink) !important;border:1px solid var(--border-strong)}
.dm-btn--ghost:hover{border-color:var(--accent-border);background:var(--accent-bg-soft)}
.dm-btn:disabled{opacity:.55;cursor:progress}
.dm-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring)}
/* Inspect node (an <a>, EL-676): disabled = no href + aria-disabled; keep pointer events for its tooltip */
.dm-inspect.is-disabled{color:var(--muted-2) !important;background:var(--bg-soft);border-color:var(--border);cursor:not-allowed}
/* Keyboard focus on every disclosure (explainer, domains, modes, catalogue). */
.dm summary:focus-visible,.dm-scope summary:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--focus-ring)}

/* ── Status line: one chip per source ───────────────────────────────────── */
.dm-status-lines{display:flex;flex-direction:column;gap:6px}
.dm-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.dm-chip{flex-shrink:0;line-height:1.5;display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:999px;background:var(--chip-bg);border:1px solid var(--chip-border);font-size:11.5px;font-weight:600;color:var(--ink-soft);white-space:nowrap}
.dm-chip b{font-weight:800;color:var(--ink)}
.dm-chip-dot{width:6px;height:6px;border-radius:50%;background:var(--muted-2);flex-shrink:0}
.dm-chip--good{border-color:var(--accent-border)}.dm-chip--good .dm-chip-dot{background:var(--accent)}
.dm-chip--warn{border-color:var(--warn-border);color:var(--warn-ink)}.dm-chip--warn .dm-chip-dot{background:var(--warn-accent)}
.dm-chip--fault{border-color:var(--fault-border);color:var(--fault-ink)}.dm-chip--fault .dm-chip-dot{background:var(--fault-accent)}
.dm-chip-age{font-family:var(--dm-mono);font-size:10.5px;color:var(--muted)}
/* Deconvolution confidence (EL-675): confidence, not severity — Low is muted, never red */
.dm-chip--high{border-color:var(--accent-border);color:var(--accent-ink)}.dm-chip--high .dm-chip-dot{background:var(--accent)}
.dm-chip--med{border-color:var(--border-strong);color:var(--ink-soft)}.dm-chip--med .dm-chip-dot{background:var(--ink-soft)}
.dm-chip--low{border-style:dashed;border-color:var(--border-strong);color:var(--muted)}.dm-chip--low .dm-chip-dot{background:transparent;border:1.5px solid var(--muted-2)}
.dm-note{display:flex;gap:9px;align-items:flex-start;padding:8px 12px;border-radius:8px;font-size:12px;line-height:1.45;text-wrap:pretty}
.dm-note::before{font-weight:800;flex-shrink:0}
.dm-note--warn{background:var(--warn-bg);border:1px solid var(--warn-border);color:var(--warn-ink)}.dm-note--warn::before{content:"!"}
.dm-note--fault{background:var(--fault-bg);border:1px solid var(--fault-border);color:var(--fault-ink)}.dm-note--fault::before{content:"\00d7"}

/* ── Titled column (the budget panel's head, also on the INS Degradation tab) */
.dm-col{min-width:0}
.dm-col-head{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.dm-col-title{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.dm-col-hint{font-size:11px;color:var(--muted-2)}

.dm-empty{display:flex;align-items:center;gap:10px;padding:16px 14px;border:1px dashed var(--border-strong);border-radius:var(--dm-radius);font-size:12.5px;color:var(--muted);background:var(--card-bg-soft)}
.dm-empty::before{content:"";width:8px;height:8px;border-radius:50%;border:2px solid var(--muted-2);flex-shrink:0}

/* ── Verdict strip above the ranking ────────────────────────────────────── */
.dm-verdict{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:11px 14px;border-radius:var(--dm-radius);border:1px solid var(--border);border-left:3px solid var(--muted-2);background:var(--bg-soft);margin-bottom:10px}
.dm-verdict--fault{border-left-color:var(--fault-accent);background:var(--fault-bg);border-color:var(--fault-border)}
.dm-verdict--warn{border-left-color:var(--warn-accent);background:var(--warn-bg);border-color:var(--warn-border)}
.dm-verdict--good{border-left-color:var(--accent);background:var(--accent-bg-soft);border-color:var(--accent-border)}
.dm-verdict-text{flex:1 1 220px;min-width:0}
.dm-verdict-title{display:block;font-size:14px;font-weight:800;color:var(--ink);letter-spacing:-.005em}
.dm-verdict-sub{display:block;font-size:12px;color:var(--ink-soft);margin-top:2px}
.dm-verdict-counts{display:flex;gap:6px;flex-wrap:wrap;flex-shrink:0}

/* ── Ranked modes ───────────────────────────────────────────────────────── */
.dm-modes{border:1px solid var(--border);border-radius:var(--dm-radius);overflow:hidden;background:var(--card-bg)}
.dm-mode+.dm-mode{border-top:1px solid var(--border)}
.dm-mode>summary{list-style:none;display:grid;grid-template-columns:20px minmax(0,1fr) minmax(36px,84px) 34px auto 30px;gap:8px;align-items:center;padding:9px 12px;cursor:pointer}
.dm-mode>summary::-webkit-details-marker{display:none}
.dm-mode>summary:hover{background:var(--accent-bg-soft)}
.dm-mode[open]>summary{background:var(--bg-soft)}
.dm-rank{font-family:var(--dm-mono);font-size:11px;font-weight:700;color:var(--muted-2);text-align:right}
.dm-mode-name{display:flex;flex-direction:column;min-width:0}
.dm-mode-title{font-size:12.5px;font-weight:700;color:var(--ink);line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
.dm-mode-cat{font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-mode-cat .dm-cov{font-family:var(--dm-mono)}
.dm-meter{height:6px;border-radius:99px;background:var(--bg-soft);box-shadow:inset 0 0 0 1px var(--border);overflow:hidden}
.dm-meter-fill{height:100%;border-radius:99px;background:var(--muted-2)}
.dm-lvl-high .dm-meter-fill{background:var(--fault-accent)}
.dm-lvl-medium .dm-meter-fill{background:var(--warn-accent)}
.dm-lvl-low .dm-meter-fill{background:var(--accent)}
.dm-lik{font-family:var(--dm-mono);font-size:12px;font-weight:700;text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.dm-tier{justify-self:start;display:inline-flex;white-space:nowrap;flex-shrink:0;line-height:1.5;align-items:center;padding:1px 8px;border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.03em;border:1px solid transparent}
.dm-tier--high{background:var(--fault-bg);color:var(--fault-ink);border-color:var(--fault-border)}
.dm-tier--medium{background:var(--warn-bg);color:var(--warn-ink);border-color:var(--warn-border)}
.dm-tier--low{background:var(--accent-bg);color:var(--accent-ink);border-color:var(--accent-border)}
.dm-tier--none{background:var(--bg-soft);color:var(--muted);border-color:var(--border)}
/* Safety tier badge: a square, so it never reads as a second likelihood pill. */
.dm-safety{justify-self:end;width:30px;height:20px;border-radius:5px;display:grid;place-items:center;font-family:var(--dm-mono);font-size:10.5px;font-weight:800;color:var(--ink-soft);background:var(--card-bg);border:1px solid var(--border-strong);box-shadow:inset 3px 0 0 var(--dm-tc,var(--muted-2))}
.dm-safety--t1{--dm-tc:var(--dm-t1)}.dm-safety--t2{--dm-tc:var(--dm-t2)}.dm-safety--t3{--dm-tc:var(--dm-t3)}
.dm-safety--t4{--dm-tc:var(--dm-t4);color:var(--fault-ink);border-color:var(--fault-border)}
.dm-mode-body{padding:4px 12px 12px 40px;display:flex;flex-direction:column;gap:9px;background:var(--bg-soft)}
.dm-kvs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.dm-kv{display:flex;flex-direction:column;gap:3px;min-width:0}
.dm-k{font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.dm-v{font-size:12px;color:var(--ink);text-wrap:pretty}
.dm-cov-meter{display:flex;align-items:center;gap:8px}
.dm-cov-meter .dm-meter{flex:1;max-width:120px}
.dm-cov-meter .dm-meter-fill{background:var(--ink-soft)}
.dm-drivers{display:flex;flex-wrap:wrap;gap:5px}
.dm-driver,.dm-ghost{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.6;flex-shrink:0}
.dm-driver{font-size:11px;font-weight:600;padding:1px 8px;border-radius:5px;background:var(--card-bg);border:1px solid var(--border-strong);color:var(--ink-soft)}
.dm-mitig{padding:9px 12px;border-radius:8px;background:var(--card-bg);border:1px solid var(--border);border-left:3px solid var(--dm-tc,var(--accent));font-size:12px;color:var(--ink);text-wrap:pretty}
.dm-mitig .dm-k{display:block;margin-bottom:3px}
.dm-mitig .dm-k:not(:first-child){margin-top:9px}
.dm-mode.dm-st-t1{--dm-tc:var(--dm-t1)}.dm-mode.dm-st-t2{--dm-tc:var(--dm-t2)}.dm-mode.dm-st-t3{--dm-tc:var(--dm-t3)}.dm-mode.dm-st-t4{--dm-tc:var(--dm-t4)}
.dm-quiet{margin-top:8px;border:1px solid var(--border);border-radius:var(--dm-radius);background:var(--card-bg-soft)}
.dm-quiet>summary{list-style:none;cursor:pointer;padding:8px 12px;font-size:12px;font-weight:700;color:var(--muted);display:flex;align-items:center;gap:8px}
.dm-quiet>summary::-webkit-details-marker{display:none}
.dm-quiet>summary::before,.dm-domain>summary .dm-chev::before{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(-45deg);transition:transform .15s;flex-shrink:0}
.dm-quiet[open]>summary::before{transform:rotate(45deg)}
.dm-quiet .dm-modes{border:0;border-top:1px solid var(--border);border-radius:0 0 var(--dm-radius) var(--dm-radius)}

/* ── Telemetry ──────────────────────────────────────────────────────────── */
.dm-tel{border:1px solid var(--border);border-radius:var(--dm-radius);overflow:hidden;background:var(--card-bg)}
.dm-tel-group+.dm-tel-group{border-top:1px solid var(--border)}
.dm-tel-head{display:flex;align-items:center;gap:8px;padding:7px 12px;background:var(--bg-soft);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.dm-tel-head .dm-tel-count{margin-left:auto;font-family:var(--dm-mono);font-weight:600;letter-spacing:0;text-transform:none}
.dm-tel-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(32px,64px) 30px;gap:8px;align-items:center;padding:6px 12px;font-size:12px}
.dm-tel-row+.dm-tel-row{border-top:1px solid var(--border)}
.dm-tel-label{font-weight:600;color:var(--ink);line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
.dm-tel-val{display:flex;align-items:center;gap:5px;justify-content:flex-end;font-family:var(--dm-mono);font-size:11.5px;color:var(--ink);white-space:nowrap}
.dm-tel-unit{color:var(--muted)}
.dm-where{font-family:var(--dm-mono);font-size:10px;font-weight:700;padding:0 5px;border-radius:4px;background:var(--bg-soft);color:var(--ink-soft);border:1px solid var(--border)}
.dm-tel-s{font-family:var(--dm-mono);font-size:11px;font-weight:700;text-align:right;color:var(--ink-soft)}
.dm-s-hi .dm-meter-fill{background:var(--fault-accent)}.dm-s-mid .dm-meter-fill{background:var(--warn-accent)}.dm-s-lo .dm-meter-fill{background:var(--accent)}
.dm-s-hi .dm-tel-s{color:var(--fault-ink)}
.dm-tel-nothr{font-size:11px;color:var(--muted);font-style:italic}
.dm-tel-missing{display:flex;flex-wrap:wrap;gap:4px;min-width:0;align-items:center;padding:6px 12px 8px;border-top:1px dashed var(--border)}
.dm-tel-missing-k{font-size:10.5px;color:var(--muted);margin-right:2px}
.dm-ghost{font-size:10.5px;padding:0 6px;border-radius:4px;border:1px dashed var(--border-strong);color:var(--muted)}

/* ── Physical budget deconvolution (EL-675) ─────────────────────────────── */
.dm-deconv-panel{margin-top:16px;min-width:0}
.dm-deconv{border:1px solid var(--border);border-radius:var(--dm-radius);overflow:hidden;background:var(--card-bg)}
.dm-deconv-budget{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;padding:8px 12px;background:var(--bg-soft);font-size:12px;color:var(--ink-soft)}
.dm-deconv-budget b{font-family:var(--dm-mono);font-weight:700;color:var(--ink)}
.dm-deconv-cell{font-weight:800;color:var(--ink)}.dm-deconv-cell>span{font-weight:600;color:var(--muted)}
.dm-deconv-row,.dm-deconv-residual{display:grid;grid-template-columns:minmax(0,300px) 128px minmax(40px,1fr) 64px 48px;gap:10px;align-items:center;padding:6px 12px;font-size:12px;border-top:1px solid var(--border)}
.dm-deconv-label{font-weight:600;color:var(--ink);line-height:1.3;overflow-wrap:anywhere}
.dm-deconv-val{font-family:var(--dm-mono);font-size:11.5px;color:var(--ink);white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.dm-deconv-row .dm-meter-fill{background:var(--ink-soft)}
.dm-deconv-lik{font-family:var(--dm-mono);font-size:11px;color:var(--muted);text-align:right}
.dm-deconv-none{padding:8px 12px;font-size:12px;color:var(--muted);border-top:1px solid var(--border)}
.dm-deconv-residual{border-top:1px dashed var(--border-strong);background:var(--card-bg-soft)}
.dm-deconv-residual .dm-deconv-label,.dm-deconv-residual .dm-deconv-val{font-weight:800}
.dm-deconv-hint{grid-column:span 3;font-size:11px;color:var(--muted)}
.dm-deconv-basis{margin-left:6px;font-family:var(--dm-mono);font-size:10px;font-weight:700;padding:0 5px;border-radius:4px;background:var(--bg-soft);color:var(--ink-soft);border:1px solid var(--border);white-space:nowrap}
.dm-deconv-residual--warn{background:var(--warn-bg);border-top-color:var(--warn-border)}
.dm-deconv-residual--warn .dm-deconv-label,.dm-deconv-residual--warn .dm-deconv-val{color:var(--warn-ink)}
@media (max-width:600px){
  .dm-deconv-row{grid-template-columns:minmax(0,1fr) auto auto;row-gap:4px}
  .dm-deconv-row .dm-deconv-label{grid-column:1/3}
  .dm-deconv-residual{grid-template-columns:minmax(0,1fr) auto}
  .dm-deconv-hint{grid-column:1/-1}
}
/* Provenance: which engine ran, its version, and the caveats every figure shares. */
.dm-deconv-prov{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:6px 12px;border-top:1px solid var(--border);font-size:11.5px;color:var(--muted)}
.dm-deconv-engine{font-family:var(--dm-mono);font-size:10.5px;font-weight:700;padding:0 6px;border-radius:4px;background:var(--bg-soft);color:var(--ink-soft);border:1px solid var(--border);white-space:nowrap}
.dm-deconv-caveat{overflow-wrap:anywhere}

/* ── degradation_modeling figures (EL-698) ─────────────────────────────── */
/* 1px gap over a border-coloured grid = hairlines between the figures, side by side or stacked. */
.dm-fig-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:1px;background:var(--border);border-top:1px solid var(--border)}
.dm-fig-grid>.dm-fig{background:var(--card-bg)}
.dm-deconv--model>.dm-fig{border-top:1px solid var(--border)}
.dm-fig{min-width:0;padding:10px 12px 6px;container-type:inline-size}
.dm-fig-head{display:flex;flex-direction:column;gap:2px;margin-bottom:4px}
.dm-fig-title{font-size:12.5px;font-weight:800;color:var(--ink)}
.dm-fig-sub{font-size:11.5px;line-height:1.4;color:var(--muted);text-wrap:pretty}
.dm-fig-notes{margin:2px 0 0;padding-left:16px;font-size:11px;color:var(--muted)}
.dm-fig-verdicts{margin:2px 0 4px;padding-left:16px;font-size:12px;color:var(--ink-soft)}
.dm-fig-verdicts b{color:var(--ink)}
/* The split's legend wraps to more rows in a narrow figure: give it the room (beats the inline
   height, which assumes a wide figure). A container query: the panel is narrow inside wide pages too. */
@container (max-width:700px){.dm-fig--ambiguity-groups>.dash-graph{height:440px !important}}
/* Plotly paints its chrome inline and cannot read tokens: the figure is
   transparent and its text / grid take the theme here, light and dark alike.
   Text inside a bar keeps Plotly's own contrast colour. */
.dm-fig .xtick text,.dm-fig .ytick text,.dm-fig .g-xtitle text,.dm-fig .g-ytitle text,
.dm-fig text.legendtext,.dm-fig text.annotation-text,.dm-fig text.bartext-outside,
.dm-fig .textpoint text{fill:var(--ink-soft) !important}
.dm-fig .gridlayer path,.dm-fig .zerolinelayer path{stroke:var(--border) !important}

/* ── Matrix legend + domain sections ────────────────────────────────────── */
.dm-legend{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:0 0 10px;font-size:11.5px;color:var(--muted)}
.dm-legend-group{display:flex;align-items:center;gap:5px}
.dm-swatch{display:inline-grid;place-items:center;min-width:34px;height:20px;padding:0 6px;border-radius:4px;font-family:var(--dm-mono);font-size:10.5px;font-weight:700}
.dm-tierkey{display:inline-grid;place-items:center;height:20px;padding:0 7px;border-radius:4px;font-size:10.5px;font-weight:700;color:var(--ink-soft);background:var(--card-bg);border:1px solid var(--border);box-shadow:inset 0 3px 0 var(--dm-tc)}
.dm-tierkey--t1{--dm-tc:var(--dm-t1)}.dm-tierkey--t2{--dm-tc:var(--dm-t2)}.dm-tierkey--t3{--dm-tc:var(--dm-t3)}.dm-tierkey--t4{--dm-tc:var(--dm-t4)}
.dm-domain{border:1px solid var(--border);border-radius:var(--dm-radius);background:var(--card-bg);overflow:hidden}
.dm-domain+.dm-domain{margin-top:8px}
.dm-domain>summary{list-style:none;display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;user-select:none}
.dm-domain>summary::-webkit-details-marker{display:none}
.dm-domain>summary:hover{background:var(--accent-bg-soft)}
.dm-domain[open]>summary{border-bottom:1px solid var(--border)}
.dm-chev{display:grid;place-items:center;width:14px;color:var(--muted)}
.dm-domain[open]>summary .dm-chev::before{transform:rotate(45deg)}
.dm-domain-title{font-size:13px;font-weight:800;color:var(--ink)}
.dm-domain-meta{display:flex;gap:6px;margin-left:auto;flex-shrink:0}
.dm-domain-title{min-width:0}
.dm-count{white-space:nowrap;flex-shrink:0;display:inline-flex;align-items:center;line-height:1.5;font-family:var(--dm-mono);font-size:10.5px;font-weight:600;padding:1px 7px;border-radius:999px;background:var(--bg-soft);color:var(--muted);border:1px solid var(--border)}
.dm-count--live{color:var(--accent-ink);border-color:var(--accent-border);background:var(--accent-bg-soft)}

/* ── AG Grid skin (both legacy CSS themes and the v33 theming params read
   these --ag-* variables). Scoped to the wrapper; the theme element is a
   descendant, so set them on it directly. ──────────────────────────────── */
.dm-grid [class*="ag-theme"],.dm-grid .ag-root-wrapper{
  --ag-font-family:inherit;--ag-font-size:12px;
  --ag-background-color:var(--card-bg);--ag-foreground-color:var(--ink);
  --ag-header-background-color:var(--card-bg);--ag-header-foreground-color:var(--muted);
  --ag-odd-row-background-color:var(--card-bg);--ag-row-hover-color:var(--accent-bg-soft);
  --ag-border-color:var(--border);--ag-row-border-color:var(--border);--ag-secondary-border-color:var(--border);
  --ag-borders:none;--ag-wrapper-border-radius:0;--ag-cell-horizontal-padding:10px;
  --ag-range-selection-border-color:var(--accent);--ag-input-focus-border-color:var(--accent);
  --ag-selected-row-background-color:var(--accent-bg);
  --ag-row-height:30px;--ag-header-height:auto;
}
.dm-grid .ag-root-wrapper{border:0 !important;border-radius:0}
.dm-grid .ag-header{border-bottom:1px solid var(--border-strong)}
.dm-grid .ag-header-cell-text{font-size:10.5px;font-weight:800;letter-spacing:.03em;line-height:1.2;color:var(--ink-soft)}
.dm-grid .ag-cell{font-variant-numeric:tabular-nums}
.dm-grid .ag-cell-focus{box-shadow:inset 0 0 0 2px var(--accent) !important;border-color:transparent !important}
.dm-grid .ag-pinned-left-cols-container,.dm-grid .ag-pinned-left-header{box-shadow:1px 0 0 var(--border-strong)}
.dm-grid .ag-pinned-right-cols-container,.dm-grid .ag-pinned-right-header{box-shadow:-1px 0 0 var(--border-strong)}
/* With overlay scrollbars (macOS, headless Chromium) the horizontal scrollbar
   strip sits OVER the last row while active, and its pinned-column spacers
   swallowed clicks on that row's Observable cell and ↑/× (EL-679). Only the
   scroll viewport itself — the draggable part, over the centre columns — takes
   the pointer. */
.dm-grid .ag-body-horizontal-scroll{pointer-events:none}
.dm-grid .ag-body-horizontal-scroll-viewport{pointer-events:auto}

/* Cell + header classes — shared by AG Grid (cellClassRules/headerClass) and the mock. */
.dm-w0{color:var(--muted-2) !important;text-align:center}
.dm-w1{background:var(--dm-w1-bg) !important;color:var(--dm-w1-ink) !important;font-weight:600;text-align:center}
.dm-w2{background:var(--dm-w2-bg) !important;color:var(--dm-w2-ink) !important;font-weight:700;text-align:center}
.dm-w3{background:var(--dm-w3-bg) !important;color:var(--dm-w3-ink) !important;font-weight:800;text-align:center}
/* A blank sub-row cell inheriting its parent's weight (EL-687): muted italic, no fill. */
.dm-w0.dm-w-inherit{color:var(--muted) !important;font-style:italic;font-weight:500}
.dm-wcell{font-family:var(--dm-mono);font-size:11.5px;justify-content:center}
.dm-thr{background:var(--card-bg-soft) !important;color:var(--ink-soft) !important;font-family:var(--dm-mono);font-size:11.5px;box-shadow:inset 0 0 0 1px transparent}
.dm-thr:hover{box-shadow:inset 0 0 0 1px var(--border-strong)}
.dm-thr-empty{color:var(--muted-2) !important;font-style:italic}
.dm-obs{font-weight:700;color:var(--ink) !important}
.dm-live{color:var(--accent-ink) !important;font-weight:700;font-size:11px}
.dm-live::before{content:"\25CF\00a0";font-size:8px;vertical-align:1px}
.dm-nosrc{color:var(--muted) !important;font-style:italic;font-size:11px}
.dm-unit{color:var(--muted) !important;font-family:var(--dm-mono);font-size:11px}
/* Row actions (EL-679): up / down / delete icons in the right-pinned column (assets/deg_matrix_grid.js). */
.dm-act-cell{display:flex;align-items:center;padding:0 6px !important}
.dm-row-acts{display:inline-flex;align-items:center;gap:3px}
.dm-row-act{width:22px;height:22px;display:grid;place-items:center;padding:0;border-radius:6px;border:1px solid transparent;background:transparent;color:var(--muted);line-height:0;cursor:pointer;transition:background .12s,border-color .12s,color .12s}
.dm-row-act:hover:not(:disabled){background:var(--accent-bg-soft);border-color:var(--accent-border);color:var(--accent-ink)}
.dm-row-act:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.dm-row-act:disabled{opacity:.35;cursor:default}
.dm-row-act--delete{margin-left:5px}
.dm-row-act--delete:hover:not(:disabled){background:var(--fault-bg);border-color:var(--fault-border);color:var(--fault-ink)}
/* Sub-rows (EL-683): the left fold column (DmGroupToggle, assets/deg_matrix_grid.js),
   indented sub-row labels on a tinted row, and the Collapsed / Expanded bar. */
.dm-h-group .ag-header-cell-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dm-group-cell{display:flex;align-items:center;justify-content:center;padding:0 !important}
.dm-group-btn{display:inline-flex;align-items:center;gap:2px;height:22px;padding:0 5px 0 3px;border-radius:6px;border:1px solid transparent;background:transparent;color:var(--muted);line-height:1;cursor:pointer;transition:background .12s,border-color .12s,color .12s}
.dm-group-btn:hover{background:var(--accent-bg-soft);border-color:var(--accent-border);color:var(--accent-ink)}
.dm-group-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.dm-group-btn.is-open{color:var(--accent-ink)}
.dm-group-chev{transition:transform .15s}
.dm-group-btn.is-open .dm-group-chev{transform:rotate(90deg)}
.dm-group-n{font-family:var(--dm-mono);font-size:10.5px;font-weight:700;font-variant-numeric:tabular-nums}
.ag-row.dm-row--child{background:var(--card-bg-soft)}
.dm-obs.dm-obs--child{padding-left:22px !important;font-weight:600;color:var(--ink-soft) !important}
.dm-obs.dm-obs--child::before{content:"";position:absolute;left:10px;top:0;height:50%;width:7px;border-left:1px solid var(--border-strong);border-bottom:1px solid var(--border-strong)}
/* Group under (EL-684): the in-grid parent picker (DmParentPicker). A native
   select dressed as plain text until hovered / focused; Element tokens only. */
.dm-parent-cell{display:flex;align-items:center;padding:0 4px !important}
.dm-parent-select{width:100%;height:24px;padding:0 20px 0 6px;border:1px solid transparent;border-radius:6px;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 16 16' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 6px center;color:var(--muted);font:inherit;font-size:12px;cursor:pointer;-webkit-appearance:none;appearance:none;text-overflow:ellipsis}
.dm-parent-select.is-set{color:var(--accent-ink);font-weight:600}
.dm-parent-select:hover{border-color:var(--border-strong);background-color:var(--card-bg)}
.dm-parent-select:focus{outline:none}
.dm-parent-select:focus-visible{outline:2px solid var(--accent);outline-offset:1px;background-color:var(--card-bg)}
.dm-parent-select option{background:var(--card-bg);color:var(--ink)}
.dm-parent-none{font-size:11px;color:var(--muted);font-style:italic;padding-left:6px}
.dm-add .dash-dropdown-placeholder{color:var(--muted-2)}
.dm-view-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:10px 0 0}
.dm-seg--sm .dm-seg-tab{padding:4px 12px !important;font-size:12px}
.dm-seg--sm .dm-seg-tab:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.dm-view-note{font-size:11.5px;color:var(--muted);text-wrap:pretty;flex:1 1 220px;min-width:0}
.dm-view-bar+.dm-domain{margin-top:10px}
.dm-h-t1,.dm-h-t2,.dm-h-t3,.dm-h-t4{box-shadow:inset 0 3px 0 var(--dm-tc)}
.dm-h-t1{--dm-tc:var(--dm-t1)}.dm-h-t2{--dm-tc:var(--dm-t2)}.dm-h-t3{--dm-tc:var(--dm-t3)}.dm-h-t4{--dm-tc:var(--dm-t4)}
.dm-h-thr{background:var(--card-bg-soft)}
/* Selection column (EL-671): the node's reading, toned against its row's
   healthy / alarm thresholds (layout.SELECTION_CLASS_RULES). */
.dm-h-sel{background:var(--accent-bg-soft)}
.dm-sel{font-family:var(--dm-mono);font-size:11.5px;font-weight:700}
.dm-sel-healthy{background:var(--accent-bg-soft) !important;color:var(--accent-ink) !important}
.dm-sel-alarm{background:var(--fault-bg) !important;color:var(--fault-ink) !important}
.dm-sel-neutral{color:var(--muted) !important;font-weight:600}
.dm-cat-tier{box-shadow:inset 3px 0 0 var(--dm-tc);font-weight:600}
.dm-cat-t1{--dm-tc:var(--dm-t1)}.dm-cat-t2{--dm-tc:var(--dm-t2)}.dm-cat-t3{--dm-tc:var(--dm-t3)}.dm-cat-t4{--dm-tc:var(--dm-t4)}
/* The catalogue row takes its tier on the pinned Title cell (EL-687, rowClassRules). */
.dm-cat-row-t1 .ag-cell[col-id="title"]{box-shadow:inset 3px 0 0 var(--dm-t1)}
.dm-cat-row-t2 .ag-cell[col-id="title"]{box-shadow:inset 3px 0 0 var(--dm-t2)}
.dm-cat-row-t3 .ag-cell[col-id="title"]{box-shadow:inset 3px 0 0 var(--dm-t3)}
.dm-cat-row-t4 .ag-cell[col-id="title"]{box-shadow:inset 3px 0 0 var(--dm-t4)}

/* ── Add observable / defect bar (EL-671) ───────────────────────────── */
.dm-add{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 22px;padding:10px 12px;margin:10px 0 2px;border:1px dashed var(--border-strong);border-radius:var(--dm-radius);background:var(--card-bg-soft)}
.dm-add-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.dm-add-domain{font-size:12.5px}
/* Dash 4 dcc.Input: className lands on the wrapper (.dash-input-container) and
   focus on the inner .dash-input-element — style :focus-within, and re-point
   Dash's own focus colour (purple by default) at Element green. */
.dm-input{--Dash-Fill-Interactive-Strong:var(--lightgreen);height:34px;padding:0 10px;border:1px solid var(--border-strong);border-radius:8px;background:var(--card-bg);color:var(--ink);font:inherit;font-size:12.5px;max-width:100%}
.dm-input:focus-within{outline:none;border-color:var(--accent-border);box-shadow:0 0 0 3px var(--focus-ring)}
.dm-input .dash-input-element{outline:none;box-shadow:none;background:transparent;color:inherit;font:inherit}
.dm-input .dash-input-element::placeholder{color:var(--muted-2)}

/* ── Advanced options: show / hide columns and domains (EL-681) ─────────── */
.dm-adv{margin:10px 0 2px;border:1px solid var(--border);border-radius:var(--dm-radius);background:var(--card-bg-soft)}
.dm-adv+.dm-domain{margin-top:10px}
.dm-adv>summary{list-style:none;display:flex;align-items:center;gap:10px;padding:8px 12px;cursor:pointer;user-select:none;font-size:12px;font-weight:700;color:var(--ink-soft)}
.dm-adv>summary::-webkit-details-marker{display:none}
.dm-adv>summary:hover{background:var(--accent-bg-soft)}
.dm-adv[open]>summary{border-bottom:1px solid var(--border)}
.dm-adv .dm-chev::before{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.dm-adv[open]>summary .dm-chev::before{transform:rotate(45deg)}
.dm-adv-body{display:flex;flex-direction:column;gap:10px;padding:10px 12px}
.dm-adv-body .dm-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.dm-adv-note{font-size:11.5px;color:var(--muted);text-wrap:pretty}
/* Dash 4 markup: label.dash-options-list-option[aria-selected] > span wrapper > input,
   + span text. Each option is a chip: shown = green, hidden = muted + struck. */
.dm-toggles,.dm-toggles .dash-options-list{display:flex;flex-wrap:wrap;gap:6px;border:0 !important;padding:0 !important;background:transparent !important;box-shadow:none !important}
.dm-toggles .dash-options-list-option{display:inline-flex !important;align-items:center;gap:6px;margin:0 !important;padding:3px 10px 3px 7px !important;border:1px solid var(--border-strong);border-radius:999px;background:var(--card-bg) !important;font-size:11.5px;font-weight:600;color:var(--muted) !important;cursor:pointer;line-height:1.4}
.dm-toggles .dash-options-list-option span:last-child{text-decoration:line-through;text-decoration-color:var(--muted-2)}
.dm-toggles .dash-options-list-option[aria-selected="true"]{color:var(--accent-ink) !important;background:var(--accent-bg-soft) !important;border-color:var(--accent-border)}
.dm-toggles .dash-options-list-option[aria-selected="true"] span:last-child{text-decoration:none}
.dm-toggles .dash-options-list-option:hover{border-color:var(--accent-border)}
.dm-toggles .dash-options-list-option:has(input:focus-visible){outline:none;box-shadow:0 0 0 3px var(--focus-ring)}
.dm-toggles input[type="checkbox"]{accent-color:var(--darkgreen);margin:0;width:13px;height:13px}

/* ── Embedded Inertia Node Summary (EL-671) ─────────────────────────────── */
.dm-subcard:empty{display:none}
.dm-subcard{margin-top:12px;font-size:14px;line-height:1.5;min-width:0}  /* inside .dm since EL-682: undo its 13px ramp */
/* A fetch is running (fetch_node's running=): dim only the Degradation pane it will repaint. */
.dm-subcard [id*='"ins-pane-degradation"']{transition:opacity .15s}
.dm-subcard.is-loading [id*='"ins-pane-degradation"']{opacity:.55}
/* Phone: the subcard gets the full card width back (it sat outside this padded
   panel before EL-682). */
@media (max-width:600px){.dm-panel--node>.dm-panel-body{padding-inline:0}.dm-panel--node .dm-controls{padding-inline:10px}}
.dm-score-src{margin-top:4px;font-size:11.5px;color:var(--muted)}
.dm-subcard-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:4px 14px 8px}
/* The subcard folds under its head (EL-704). */
.dm-subcard-fold>summary{list-style:none;cursor:pointer;user-select:none}
.dm-subcard-fold>summary::-webkit-details-marker{display:none}
.dm-subcard-fold>summary .dm-chev{align-self:center}
.dm-subcard-fold>summary .dm-chev::before{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.dm-subcard-fold[open]>summary .dm-chev::before{transform:rotate(45deg)}
.dm-subcard-fold>summary:hover .dm-panel-title{text-decoration:underline}
/* Coupling dictionary D (EL-704): the primary loading (1) outlined. */
.dm-coupling-note{flex:1 1 320px;min-width:0;text-wrap:pretty}
.dm-coupling>div>.dm-coupling-note{display:flex;padding:10px 12px}
.dm-d-primary{color:var(--accent-ink) !important;font-weight:800;text-align:center;box-shadow:inset 0 0 0 1.5px var(--accent)}

/* ── Save / export toast ────────────────────────────────────────────────── */
.dm-toast-slot:empty{display:none}
.dm-toast{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;padding:3px 10px;border-radius:7px;max-width:100%;overflow-wrap:anywhere}
.dm-toast--ok{color:var(--accent-ink);background:var(--accent-bg-soft);border:1px solid var(--accent-border)}
.dm-toast--ok::before{content:"\2713";font-weight:800}
.dm-toast--err{color:var(--fault-ink);background:var(--fault-bg);border:1px solid var(--fault-border)}
.dm-toast--err::before{content:"\00d7";font-weight:800}
/* A dismissible error (EL-705): its × clears the toast. */
.dm-toast-x{margin-left:4px;padding:0 4px;border:0;background:transparent;color:inherit;font-weight:800;font-size:14px;line-height:1;cursor:pointer;border-radius:4px}
.dm-toast-x:hover{background:var(--fault-border)}
.dm-toast-x:focus-visible{outline:2px solid var(--fault-accent);outline-offset:1px}
/* "Apply edited D to live diagnostic" (EL-705). */
.dm-apply label{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--ink);cursor:pointer;white-space:nowrap}

/* ── Catalogue (collapsed; editable + saved to the NAS, EL-681) ───────── */
.dm-catalog{border:1px solid var(--border);border-radius:var(--dm-radius);background:var(--card-bg);overflow:hidden}
.dm-catalog>summary{list-style:none;display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;font-size:12.5px;font-weight:700;color:var(--ink-soft)}
.dm-catalog>summary::-webkit-details-marker{display:none}
.dm-catalog[open]>summary{border-bottom:1px solid var(--border)}
.dm-catalog .dm-chev::before{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.dm-catalog[open]>summary .dm-chev::before{transform:rotate(45deg)}
.dm-cat-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--border);background:var(--card-bg-soft)}
.dm-cat-bar .dm-toast-slot{flex:1 1 auto;min-width:0}
.dm-cat-bar>.dm-btn--primary{margin-left:auto}