/* num.dt static — the CD design's .nu-* layer, re-housed as plain CSS.
   HEAT ON IRON tokens (numu-os GUARDS §1): one surface, separation by hairline,
   heat as the one expressive dimension. Dark is the default; .light on <html>
   flips the pairs. The data ramp --c1..--c5 is SEMANTIC chart color, not a
   second theme — a theme flip recolors every chart from these five vars. */

:root {
  --ground: #0d1014; --ink: #e7eaee; --muted: #8a93a0; --line: #232830;
  --ember: #e8833a; --heat-0: #232830;
  --c1: #e8833a; --c2: #f2b84b; --c3: #34d399; --c4: #4a9eea; --c5: #c084fc;
  --shadow-window: 0 18px 50px rgb(0 0 0 / .5);
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --table-overscan: 8; --table-scroll-cap: 12000000; /* the windower's rows: RedPash's overscan and the float32 scroll cap */
  --table-max-height: 320px; --table-col-min: 110px;
  /* the grid law's rows (num shell.css:25-31, decision 0017): the cell floor, the split capacity divisor,
     the spine's thickness, the width under which a split stacks */
  --m: 44px; --pane-floor: 4; --spine: 26px; --stack-under: 620px;
  /* the rail's widths: open, folded to its glyphs, and the grip's range */
  --rail-open: 212px; --rail-folded: 46px; --rail-min: 192px; --rail-max: 448px;
}
html.light {
  --ground: #f2f4f5; --ink: #15181d; --muted: #5b636e; --line: #d9dee3;
  --ember: #b4531f; --heat-0: #d9dee3;
  --c1: #d97328; --c2: #b28114; --c3: #0f9d6f; --c4: #2f7fd4; --c5: #8b4fd8;
  --shadow-window: 0 18px 50px rgb(0 0 0 / .18);
}

/* no scrollbars, either axis, anywhere (Em; numu-os S28 shell kit, num's shell.css): every scroller still scrolls,
   the bar never paints */
* { box-sizing: border-box; scrollbar-width: none; }
*::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* the hidden attribute must beat any class display — without this, an unseen
   overlay still intercepts every click (caught by the real browser walk) */
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--ground); color: var(--ink); overflow: hidden;
  font-family: var(--font-sans); font-size: 12.5px;
}
.mono { font-family: var(--font-mono); }

@keyframes nu-pop { from { opacity: 0; transform: translateY(6px) scale(.98); } }
@keyframes nu-work { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.shell { height: 100svh; display: flex; flex-direction: column; }
.band { flex: 1; min-height: 0; display: flex; position: relative; }

/* ── circles ── */
.nu-circle {
  border-radius: 99px; display: grid; place-items: center; flex-shrink: 0;
  background: var(--heat-0); color: var(--muted); border: 0; font: inherit; cursor: pointer;
  transition: background-color 150ms, color 150ms, transform 150ms;
}
.nu-circle:hover { transform: translateY(-2px) scale(1.06); color: var(--ink); }
.nu-circle:active { transform: scale(.9); }
.nu-circle.on { background: color-mix(in oklab, var(--ember) 16%, transparent); color: var(--ember); }

/* ── the rail ── */
.nu-rail {
  border-right: 1px solid var(--line); padding: 8px 6px; display: flex; flex-direction: column;
  gap: 1px; min-height: 0; min-width: 0; overflow-y: auto; overflow-x: hidden; flex: none; position: relative;
  width: var(--rail-open);
}
.nu-rail.folded { gap: 4px; width: var(--rail-folded) !important; } /* the fold outranks a width the grip left inline */
.nu-rail-cap {
  display: flex; align-items: center; gap: 6px; padding: 8px 4px 4px; font-size: 9px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted); flex-shrink: 0;
}
.nu-rail-row {
  display: flex; align-items: center; gap: 7px; flex-shrink: 0; min-width: 0; border: 0;
  border-radius: 6px; font: inherit; font-size: 11px; height: 26px; padding: 0 8px; width: 100%;
  text-align: left; cursor: pointer; background: transparent; color: var(--muted);
  transition: background-color 150ms; margin: 1px 0;
}
.nu-rail-row:hover { background: var(--heat-0); }
.nu-rail-row.on { background: var(--heat-0); color: var(--ink); font-weight: 600; }
.nu-rail-row .label { min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nu-rail-row .n { font-size: 9.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.nu-rail.folded .nu-rail-row {
  width: 34px; height: 34px; border-radius: 99px; align-self: center; padding: 0; justify-content: center;
}
.nu-rail.folded .nu-rail-row .label, .nu-rail.folded .nu-rail-row .n,
.nu-rail.folded .nu-rail-row .chev, .nu-rail.folded .nu-rail-cap .cap-label { display: none; }
.nu-rail-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; align-items: center; padding-top: 10px; flex-shrink: 0; }
.rail-grip { position: absolute; top: 0; bottom: 0; right: -4px; width: 9px; cursor: col-resize; z-index: 6; touch-action: none; }

.nu-act {
  width: 20px; height: 20px; flex-shrink: 0; border: 0; background: transparent; color: var(--muted);
  border-radius: 5px; cursor: pointer; display: grid; place-items: center; font: inherit; padding: 0;
}
.nu-act:hover { background: var(--heat-0); color: var(--ink); }

/* ── pipeline strip ── */
.nu-pipeline { flex-shrink: 0; display: flex; align-items: center; gap: 5px; padding: 9px 16px 5px; overflow-x: auto; }
.nu-pipe-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; flex-shrink: 0;
  border: 1px solid var(--line); border-radius: 99px; background: transparent; color: var(--muted);
  font: inherit; font-size: 10.5px; font-family: var(--font-mono); white-space: nowrap; cursor: pointer;
  transition: all 150ms;
}
.nu-pipe-chip:hover { background: var(--heat-0); color: var(--ink); }
.nu-pipe-chip.on { border-color: var(--ember); background: color-mix(in oklab, var(--ember) 14%, transparent); color: var(--ember); }
.nu-pipe-tag {
  font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; padding: 1px 5px;
  border-radius: 5px; background: var(--heat-0); color: var(--muted); font-family: var(--font-sans);
}
.nu-pipe-arrow { flex-shrink: 0; font-size: 10px; color: var(--muted); opacity: .6; }

/* ── the thread ── */
/* ── the pane (num shell.css 309-352, the slices this page needs): the main region holds the tree,
   a pane is a flex column whose own .thread-scroll scrolls, and the pane is a CONTAINER, so its
   rules follow ITS width, not the viewport's (a half-width pane reads narrow on a wide screen) ── */
.main { flex: 1; min-width: 0; min-height: 0; display: flex; position: relative; overflow: hidden; }
.pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; container-type: inline-size; container-name: pane; }
.main > .pane, .main > .split, .cell > .pane, .cell > .split { flex: 1; min-width: 0; min-height: 0; }
/* ── the split (num shell.css 335-352): two cells and a draggable spine between them ── */
.split { display: flex; min-width: 0; min-height: 0; }
.split.col { flex-direction: column; }
.cell { display: flex; min-width: 0; min-height: 0; }
.spine { flex: none; width: var(--spine); position: relative; cursor: col-resize; touch-action: none; user-select: none; display: flex; align-items: center; justify-content: center; }
.spine::before { content: ''; position: absolute; top: 12px; bottom: 12px; left: 50%; border-left: 1px solid var(--line); }
.split.col > .spine { width: auto; height: var(--spine); cursor: row-resize; }
.split.col > .spine::before { top: 50%; bottom: auto; left: 12px; right: 12px; border-left: 0; border-top: 1px solid var(--line); }
.spine.off { cursor: default; }
.spine.off .swap-btn { display: none; }
.swap-btn { width: 22px; height: 22px; font-size: 12px; color: var(--muted); position: relative; z-index: 1; background: var(--ground); cursor: pointer; }
.swap-btn:hover { color: var(--ink); }
html[data-band="phone"] .split.row { flex-direction: column; }
/* fold: the pane collapses to its strip (num 339-344; this pane's body is .thread-scroll) */
.pane.min .pane-head, .pane.min .thread-scroll, .pane.min .composer, .pane.min .mt-pill { display: none; }
.pane.min .pane-strip { display: flex; }
.pane-head { flex-shrink: 0; display: flex; align-items: center; gap: 6px; padding: 4px 10px 0; }
.pane-head .title { margin: 0; font-size: .74rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.pane-head .grow { flex: 1; }
.pane-head .badge { font-size: 9.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pane-head .trio { display: flex; gap: 4px; }
.pane-head .trio .nu-scn { opacity: 0; transition: opacity 120ms; }
.pane:hover .pane-head .trio .nu-scn, .pane-head .trio .nu-scn:focus-visible, .pane-head .trio .nu-scn[aria-pressed="true"] { opacity: 1; }
/* the four scenarios' buttons (kernel/scenarios.js): the Fluent glyph in the current colour, filled when on */
.nu-scn { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.nu-scn:hover { background: var(--heat-0); color: var(--ink); }
.nu-scn[aria-pressed="true"] { color: var(--ember); }
.nu-scn-ic { width: 16px; height: 16px; }
.pane-strip .nu-scn-ic, .nu-menu-row .nu-scn-ic { width: 16px; height: 16px; flex-shrink: 0; }
.dg-del { display: grid; place-items: center; }
/* a tile's ECharts slot (chart/tile.js): it takes the cell's room; ECharts needs a sized box */
.nu-tile-chart { flex: 1; min-height: 0; width: 100%; }
.dg-cell-title[contenteditable="true"] { outline: 1px solid var(--ember); border-radius: 4px; padding: 0 3px; cursor: text; }
.dg-del .nu-scn-ic { width: 14px; height: 14px; }
.mt-pill { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); z-index: 3; height: 12px; padding: 0 7px; border-radius: 6px; border: 0; background: color-mix(in oklab, var(--ink) 10%, transparent); display: flex; align-items: center; gap: 3px; cursor: pointer; opacity: 0; transition: opacity 120ms; }
.pane:hover .mt-pill, .mt-pill:focus-visible { opacity: 1; }
.mt-pill i { width: 3px; height: 3px; border-radius: 50%; background: var(--muted); }
.pane-strip { display: none; flex: 1; align-items: center; justify-content: flex-start; gap: 10px; padding: 14px 0; color: var(--muted); writing-mode: vertical-rl; font-size: .82rem; font-weight: 600; white-space: nowrap; background: transparent; border: 0; cursor: pointer; font-family: inherit; }
.pane-strip:hover { color: var(--ink); background: color-mix(in oklab, var(--ink) 4%, transparent); }
.split.col > .cell > .pane.min .pane-strip { writing-mode: horizontal-tb; padding: 0 14px; }
@container pane (max-width: 30rem) {
  .thread-col { padding-inline: 2%; }
  .nu-pill { width: 96%; }
}
.thread-scroll { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px; }
.thread-col { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 4px; }
.nu-chip {
  align-self: flex-end; max-width: 80%; border-radius: 8px; background: var(--heat-0);
  padding: 12px 14px; font-size: 12.5px; line-height: 1.55; color: var(--ink);
  font-family: var(--font-mono); margin-top: 22px; overflow-wrap: anywhere;
}
.nu-doc { font-size: 12.5px; line-height: 1.6; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.nu-doc.muted { color: var(--muted); font-size: 11.5px; }
.nu-doc.strong { font-weight: 600; font-family: var(--font-mono); }
.turn { margin-top: 6px; display: flex; flex-direction: column; gap: 5px; animation: nu-pop 150ms cubic-bezier(0,0,.2,1) both; }

.nu-table {
  border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
  font-variant-numeric: tabular-nums; font-size: 11px; position: relative;
}
/* the windower's host (table/grid.js): the card scrolls, not the thread; the head sticks to it */
.nu-profile-strip { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.nu-profile-strip .score { color: var(--ember); font-weight: 600; }
.nu-table-bar { display: flex; align-items: center; gap: 8px; padding: 5px 34px 5px 10px; border-bottom: 1px solid var(--line); }
.nu-table-q { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: inherit; outline: none; }
.nu-table-q::placeholder { color: var(--muted); }
.nu-table-n { color: var(--muted); white-space: nowrap; }
.nu-table-ft { flex-shrink: 0; }
/* the card's filter (table/filter-panel.js): RedPash's predicate rows, one per line, ANDed */
.nu-filter { display: flex; flex-direction: column; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.nu-pred-list { display: flex; flex-direction: column; gap: 6px; }
.nu-pred { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nu-pred-slot { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.nu-pred-val { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--ink); font: inherit; padding: 3px 7px; outline: none; color-scheme: dark; }
html.light .nu-pred-val { color-scheme: light; }
.nu-pred-val:focus-visible { border-color: var(--ember); }
.nu-pred-sep { color: var(--muted); }
.nu-pred-del { flex-shrink: 0; }
.nu-filter-foot { display: flex; align-items: center; gap: 10px; }
.nu-filter-err { color: var(--ember); font-size: 10.5px; }
/* the value typeahead (table/autocomplete.js): fixed in the body so the card's clip cannot cut it */
.nu-ac { position: fixed; z-index: 60; max-height: 240px; overflow-y: auto; padding: 4px 0; font-size: 11.5px;
  background: var(--ground); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-window); }
.nu-ac-item { display: flex; justify-content: space-between; gap: 14px; padding: 4px 10px; cursor: pointer; }
.nu-ac-item:hover, .nu-ac-item.is-active { background: var(--heat-0); }
.nu-ac-n { color: var(--muted); font-variant-numeric: tabular-nums; }
.nu-ac-head, .nu-ac-empty { padding: 4px 10px; color: var(--muted); font-size: 10px; }
/* the chip picker for in / not in */
.nu-vchips { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 2px 4px; border: 1px solid var(--line); border-radius: 6px; cursor: text; }
.nu-vchips:focus-within { border-color: var(--ember); }
.nu-vchip-list { display: contents; }
.nu-vchip { display: inline-flex; align-items: center; gap: 2px; padding: 1px 2px 1px 8px; border-radius: 99px; font-size: 11px;
  background: color-mix(in oklab, var(--ember) 14%, transparent); color: var(--ember); }
.nu-vchip-x { border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0 4px; font: inherit; }
.nu-vchip-input { flex: 1; min-width: 80px; border: 0; background: transparent; color: var(--ink); font: inherit; outline: none; padding: 2px 3px; }
.nu-table-scroll { max-height: var(--table-max-height); overflow: auto; }
.nu-grid { border-collapse: collapse; table-layout: fixed; width: max(100%, calc(var(--cols) * var(--table-col-min))); }
.nu-grid th {
  position: sticky; top: 0; z-index: 1; background: var(--ground); text-align: left; font-weight: 400;
  font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.nu-grid th, .nu-grid td { padding: 7px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nu-grid td { border-bottom: 1px solid var(--line); }
.nu-grid tr[data-spacer] td { padding: 0; border: 0; }
.nu-sort { all: unset; display: flex; gap: 4px; width: 100%; cursor: pointer; }
.nu-sort span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nu-sort:hover { color: var(--ink); }
.nu-sort:focus-visible { outline: 1px solid var(--ember); outline-offset: 2px; }
.nu-grid th[aria-sort] { color: var(--ember); }
.nu-grid th[aria-sort="ascending"] .nu-sort::after { content: "↑" attr(data-rank); flex-shrink: 0; }
.nu-grid th[aria-sort="descending"] .nu-sort::after { content: "↓" attr(data-rank); flex-shrink: 0; }
.nu-tbl-dots {
  position: absolute; top: 3px; right: 4px; z-index: 2; width: 22px; height: 22px; border: 0; background: var(--ground);
  color: var(--muted); border-radius: 6px; cursor: pointer; display: grid; place-items: center;
  font: inherit; padding: 0; opacity: 0; transition: opacity 120ms;
}
.nu-table:hover .nu-tbl-dots, .nu-tbl-dots:focus-visible { opacity: 1; }
.nu-tbl-dots:hover { background: var(--heat-0); color: var(--ink); }
.turn-meta { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.term-lines { font-family: var(--font-mono); font-size: 12px; line-height: 1.6; color: var(--muted); white-space: pre-wrap; }

.file-card {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line);
  border-radius: 10px; width: 100%;
}
.file-card .fname { display: block; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-mono); }
.file-card .fmeta { display: block; font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── chart cards ── */
.chart-card {
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px 6px;
  display: flex; flex-direction: column; gap: 6px;
}
.chart-card .chead { display: flex; align-items: baseline; gap: 8px; }
.chart-card .ctitle {
  flex: 1; min-width: 0; font-size: 10px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chart-card .cmeta { font-size: 10.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.nu-chartmode {
  border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 10.5px;
  padding: 3px 8px; border-radius: 6px; cursor: pointer; transition: all 150ms;
}
.nu-chartmode:hover { background: var(--heat-0); color: var(--ink); }
.nu-chartmode.on { background: color-mix(in oklab, var(--ember) 14%, transparent); color: var(--ember); }
.chart-foot { display: flex; align-items: center; gap: 2px; }
.chart-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.chart-legend .lg { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.chart-legend .dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 99px; }
.chart-legend .lv { color: var(--ink); font-variant-numeric: tabular-nums; }
.chart-legend .ll { color: var(--muted); }
.chart-tune { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.tune-group { display: flex; align-items: center; gap: 5px; }
.tune-label { font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.tune-n { min-width: 14px; text-align: center; font-size: 11px; color: var(--ink); font-variant-numeric: tabular-nums; }

.nu-select {
  appearance: none; border: 1px solid var(--line); border-radius: 99px; background: transparent;
  color: var(--ink); font: inherit; font-size: 10.5px; font-family: var(--font-mono);
  padding: 3px 22px 3px 9px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238a93a0' stroke-width='1.5'%3E%3Cpath d='M4.5 6.5 8 10l3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 6px center; background-size: 12px;
  transition: all 150ms;
}
.nu-select:hover { background-color: var(--heat-0); }
.nu-select:focus-visible { outline: 2px solid var(--ember); outline-offset: 1px; }
.nu-select option { background: var(--ground); color: var(--ink); }

/* ── composer ── */
.composer { flex-shrink: 0; padding: 0 10px 10px; display: flex; justify-content: center; }
.nu-pill {
  display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 22px;
  background: var(--ground); position: relative; min-height: 46px; width: 100%; max-width: 720px; padding: 4px 10px;
}
.nu-pill.working::before {
  content: ""; position: absolute; inset: -2px; border-radius: 99px; border: 2px solid transparent;
  border-top-color: var(--ember); border-right-color: var(--ember);
  animation: nu-work 900ms linear infinite; pointer-events: none;
}
/* the composer is a CODE input: a one-line textarea that grows (Shift+Enter =
   newline, Enter = run), with the GHOST layer painted exactly under it — the
   typed prefix invisible, the suggested remainder muted. Tab takes the ghost;
   with no ghost, Tab indents instead of stealing focus. Mono metrics keep the
   two layers aligned to the pixel. */
.ghost-wrap { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.nu-pill textarea {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent; resize: none;
  color: var(--ink); font: inherit; font-size: 12.5px; font-family: var(--font-mono);
  line-height: 1.5; padding: 4px 0; margin: 0; max-height: 120px; overflow-y: auto;
}
.composer-ghost {
  position: absolute; inset: 0; display: block; pointer-events: none; overflow: hidden;
  font-size: 12.5px; font-family: var(--font-mono); line-height: 1.5; padding: 4px 0;
  white-space: pre-wrap; word-break: break-word;
}
.composer-ghost .g-typed { visibility: hidden; }
.composer-ghost .g-rest { color: var(--muted); opacity: .65; }

/* ── menus ── */
.nu-menu {
  position: absolute; z-index: 30; width: 14rem; border-radius: 12px; border: 1px solid var(--line);
  background: color-mix(in oklab, var(--ground) 95%, transparent); backdrop-filter: blur(12px);
  box-shadow: var(--shadow-window); padding: 4px 0; animation: nu-pop 150ms cubic-bezier(0,0,.2,1) both;
}
.nu-menu-row {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 0 14px;
  border: 0; background: transparent; font: inherit; font-size: 12.5px; color: var(--ink);
  cursor: pointer; text-align: left; white-space: nowrap;
}
.nu-menu-row:hover { background: var(--heat-0); }

/* ── dashboard: docked panel ── */
.dash-docked { width: 300px; flex-shrink: 0; border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.dash-head { flex-shrink: 0; display: flex; align-items: center; gap: 6px; height: 48px; padding: 0 6px 0 16px; border-bottom: 1px solid var(--line); }
.dash-head .dtitle { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.mini-card { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.mini-card .mhead { display: flex; align-items: center; gap: 6px; }
.mini-card .mtitle { flex: 1; min-width: 0; font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-card svg { display: block; width: 100%; height: 64px; }
.mini-card .mmeta { font-size: 9.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.nu-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 34px;
  padding: 0 12px; border: 1px dashed var(--line); border-radius: 8px; background: transparent;
  color: var(--ember); font: inherit; font-size: 11.5px; cursor: pointer; transition: all 150ms;
}
.nu-cta:hover { background: var(--heat-0); }
.nu-cta:active { transform: scale(.98); }
.dash-empty { font-size: 11.5px; line-height: 1.6; color: var(--muted); }

/* ── dashboard: full overlay ── */
.dash-full {
  position: absolute; inset: 0; z-index: 11; background: var(--ground); display: flex; flex-direction: column;
  animation: nu-pop 220ms cubic-bezier(0,0,.2,1) both;
}
.dash-full-head { flex-shrink: 0; display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 8px 0 16px; border-bottom: 1px solid var(--line); }
.dash-full-head .dtitle { font-size: 15px; font-weight: 600; white-space: nowrap; }
.dash-full-head .dbadge { font-size: 10.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.nu-ghost {
  display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border: 1px solid var(--line);
  border-radius: 99px; background: transparent; color: var(--ink); font: inherit; font-size: 11.5px;
  cursor: pointer; transition: all 150ms;
}
.nu-ghost:hover { background: var(--heat-0); }
.nu-ghost:active { transform: scale(.97); }
.dash-full-body { flex: 1; min-height: 0; display: flex; }
.dash-canvas-wrap { flex: 1; min-width: 0; min-height: 0; padding: 10px; overflow: auto; }
.dash-aside { width: 280px; flex: none; border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
/* ── the mobile chrome (the dock IS the topbar, moved to thumb reach) ── */
.dock, .dock-zone, .rail-scrim { display: none; }

/* the mobile projection law (the phone BAND, stamped by kernel/grid-law.js: width under 744 or
   height under 500 — a landscape phone is a phone, which the old 640px media query missed): the
   aside yields the width and stacks below the canvas; the rail and the docked dashboard arrive
   as sheets. CSS and JS read the ONE stamp, so they can never disagree. */
html[data-band="phone"] .dash-full-body { flex-direction: column; }
html[data-band="phone"] .dash-aside { width: 100%; max-height: 42%; border-left: 0; border-top: 1px solid var(--line); }

/* the drawer half of the projection law: the docked dashboard arrives as a
   bottom SHEET (the dock-right-circle pattern), same grammar as the rail
   sheet — full-width stays the reader mode, the sheet is the glance */
html[data-band="phone"] .dash-docked {
  position: fixed; left: 0; right: 0; bottom: 0; width: auto; height: 70svh; z-index: 41;
  background: var(--ground); border-left: 0; border-top: 1px solid var(--line);
  border-radius: 16px 16px 0 0; padding-top: 10px;
  animation: sheet-up 240ms cubic-bezier(0, 0, .2, 1) both;
}
html[data-band="phone"] .dash-docked::before {
  content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 36px; height: 4px; border-radius: 99px; background: var(--line);
}

/* the rail leaves the flow ENTIRELY — phone real estate does not forgive a
   46px strip. It returns as a bottom SHEET, summoned from the dock. */
html[data-band="phone"] .nu-rail { display: none; }
html[data-band="phone"] .nu-rail.sheet-open {
  display: flex; position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto !important;
  height: 70svh; z-index: 41; background: var(--ground); border-right: 0;
  border-top: 1px solid var(--line); border-radius: 16px 16px 0 0; padding-top: 14px;
  animation: sheet-up 240ms cubic-bezier(0, 0, .2, 1) both;
}
html[data-band="phone"] .nu-rail.sheet-open::before {
  content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 36px; height: 4px; border-radius: 99px; background: var(--line);
}
html[data-band="phone"] .nu-rail.sheet-open .rail-grip, html[data-band="phone"] .nu-rail.sheet-open .nu-rail-foot { display: none; }
html[data-band="phone"] .rail-scrim { display: block; position: fixed; inset: 0; z-index: 40; background: rgb(0 0 0 / .45); }
html[data-band="phone"] .rail-scrim[hidden] { display: none; }

/* the dock: auto-hidden at the bottom edge; the handle is the one always-
   visible hint (8px-class hot zone, GUARDS §3 — hover has no thumb, so the
   zone answers touch) */
html[data-band="phone"] .dock-zone {
  display: flex; align-items: flex-end; justify-content: center;
  position: fixed; left: 0; right: 0; bottom: 0; height: 18px; z-index: 44;
}
html[data-band="phone"] .dock-handle {
  width: 48px; height: 4px; border-radius: 99px; background: var(--muted);
  opacity: .45; margin-bottom: 4px;
}
html[data-band="phone"] .dock {
  display: flex; align-items: center; gap: 14px; position: fixed; left: 50%; bottom: 10px;
  transform: translate(-50%, 140%); z-index: 45; padding: 8px 16px;
  border: 1px solid var(--line); border-radius: 99px; background: color-mix(in oklab, var(--ground) 92%, transparent);
  backdrop-filter: blur(12px); box-shadow: var(--shadow-window);
  transition: transform 200ms cubic-bezier(0, 0, .2, 1);
}
html[data-band="phone"] .dock.shown { transform: translate(-50%, 0); }
html[data-band="phone"] .dock .nu-circle { width: 40px; height: 40px; }
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } }
.dash-aside-head { flex: none; display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 8px 0 14px; border-bottom: 1px solid var(--line); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dash-aside-head .aspan { margin-left: auto; font-size: 9.5px; font-variant-numeric: tabular-nums; }
.dash-aside-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; }
.aside-field { display: flex; flex-direction: column; gap: 4px; }
.aside-field > .tune-label { font-size: 9px; letter-spacing: .08em; }
.aside-note { font-size: 10px; line-height: 1.5; color: var(--muted); }
.aside-sep { border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.mode-radio { display: flex; gap: 4px; }
.mode-radio .nu-chartmode { border: 1px solid var(--line); }
.mode-radio .nu-chartmode.on { border-color: var(--ember); }

.nu-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; padding: 2px 0;
  font: inherit; font-size: 11px; color: var(--muted); cursor: pointer; text-align: left; transition: color 150ms;
}
.nu-toggle:hover { color: var(--ink); }
.nu-toggle[aria-pressed="true"] { color: var(--ink); }
.nu-toggle-dot {
  width: 26px; height: 14px; flex: none; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--line);
  position: relative; transition: background-color 150ms;
}
.nu-toggle-dot::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 8px; height: 8px; border-radius: 99px;
  background: var(--muted); transition: all 150ms;
}
.nu-toggle[aria-pressed="true"] .nu-toggle-dot { background: color-mix(in oklab, var(--ember) 20%, transparent); }
.nu-toggle[aria-pressed="true"] .nu-toggle-dot::after { left: 15px; background: var(--ember); }
.nu-swatch {
  width: 18px; height: 18px; flex: none; border: 0; border-radius: 99px; cursor: pointer; padding: 0;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .2); transition: transform 150ms;
}
.nu-swatch:hover { transform: scale(1.12); }
.nu-swatch.on { box-shadow: 0 0 0 2px var(--ground), 0 0 0 4px var(--ember); }
.swatch-row { display: flex; align-items: center; gap: 6px; }

/* dashboard-grid theming: its .dg tokens follow ours (the lib's real token
   names, read from its own css — surface/border/text, not invented ones) */
.dg {
  --dg-surface: var(--ground);
  --dg-surface-2: var(--heat-0);
  --dg-border: var(--line);
  --dg-text: var(--ink);
  --dg-text-mute: var(--muted);
  --dg-accent: var(--ember);
  --dg-glass: color-mix(in oklab, var(--ground) 86%, transparent);
}