/* The nested table and its charts (Hyper.UI.Page.View.Board): carried over from the prototype in docs/viz/index.html, scoped to .nt.
   Its ids are classes here (a page may have more than one board), and what the prototype set on <body> is set on the board. */
/* Colours come from the theme (static/tokens.css); the table's rules are stronger than the page's. */
.nt { --line: var(--line-strong); }
.nt .slice, .nt .pt { stroke: var(--surface); }
.nt, .nt * { box-sizing: border-box; }
.nt { background: var(--bg); color: var(--text); font: 13px/1.3 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
.nt button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
.nt .nt-caption { padding: 18px 28px 10px; flex: none; }
/* Raw data has none of the table's chips, so the caption keeps only its title and tools, close to the top. */
.nt.raw .nt-caption { padding-top: 0; padding-bottom: 0; }
.nt.raw .nt-caption .bar { display: none; }
.nt .nt-caption .title { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.nt .nt-caption h1 { font-size: 17px; font-weight: 600; margin: 0; letter-spacing: .01em; }
.nt .meta { color: var(--muted); }
.nt .meta em { font-style: normal; opacity: .7; margin-right: 4px; }
.nt .bar { display: flex; align-items: center; gap: 8px; margin-top: 10px; min-height: 26px; flex-wrap: wrap; }
.nt .chip { background: color-mix(in srgb, var(--ink) 7%, transparent); border-radius: 13px; padding: 4px 10px; }
.nt .chip b { opacity: .55; font-weight: 400; margin-left: 4px; }
.nt .chip:hover b { opacity: 1; }
.nt .chip.sort { background: color-mix(in srgb, var(--c-number) 16%, transparent); }
.nt .legend { margin-left: auto; color: var(--muted); display: flex; align-items: center; gap: 6px; font-size: 12px; }
.nt .lg { display: inline-block; width: 18px; height: 12px; border-radius: 3px; margin-left: 8px; }
.nt .lg.s-null { border: 1px dashed color-mix(in srgb, var(--ink) 25%, transparent); }
.nt .lg.s-empty { border: 1px dotted color-mix(in srgb, var(--ink) 35%, transparent); }
.nt .lg.s-bad { border: 1px solid color-mix(in srgb, var(--bad) 70%, transparent); background: color-mix(in srgb, var(--bad) 12%, transparent); }
.nt .lg.summary { background: color-mix(in srgb, var(--ink) 8%, transparent); border-top: 2px dotted color-mix(in srgb, var(--ink) 50%, transparent); }
.nt .reset { color: var(--muted); margin-left: 12px; }
.nt .reset:hover { color: var(--text); }
/* Coloured by the colour rules: what has no colour of its own is plain, and the rest take theirs inline. */
.nt.by-rules .tile, .nt.by-rules .htile { --c: var(--c-id); }
.nt.by-rules .vdot { display: none; }
.nt .nt-scroll { max-height: calc(100vh - 120px); overflow: auto; position: relative; }
.nt .nt-hdr { position: sticky; top: 0; z-index: 5; background: linear-gradient(var(--bg) 88%, transparent); }
.nt .nt-data { position: relative; }
.nt .nt-hdr > div, .nt .nt-data > div[data-k] { position: absolute; transition: left .32s var(--ease), top .32s var(--ease), width .32s var(--ease), height .32s var(--ease), opacity .22s, background .2s, box-shadow .15s; }
.nt .t-string { --c: var(--c-string); }
.nt .t-number { --c: var(--c-number); }
.nt .t-money { --c: var(--c-money); }
.nt .t-date { --c: var(--c-date); }
.nt .t-bool { --c: var(--c-bool); }
.nt .t-enum { --c: var(--c-enum); }
.nt .t-id { --c: var(--c-id); }
.nt .t-list { --c: var(--c-list); }
.nt .t-count { --c: var(--c-count); }
.nt .t-group { --c: var(--c-group); }
.nt .tile { border-radius: 6px; padding: 0 10px; display: flex; align-items: center; white-space: nowrap; overflow: clip; cursor: pointer; user-select: none; background: color-mix(in srgb, var(--c) 17%, transparent); color: color-mix(in srgb, var(--c) 28%, var(--strong)); }
.nt .tile .in { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; }
.nt .tile .in span, .nt .tile .in a { overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
/* A column shown as links. */
.nt .tile .in a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* A property picking its value: a value or a header that holds one is clicked. */
.nt.value-picking .tile.s-val:not(.summary) { cursor: crosshair; }
.nt.value-picking .tile.s-val:not(.summary):hover { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--focus) 75%, transparent); }
.nt .tile.tall .in { position: sticky; top: calc(var(--hdrh) + 8px); }
.nt .tile.num .in span { text-align: right; }
.nt .tile.num { font-variant-numeric: tabular-nums; }
.nt .tile.tall { align-items: flex-start; padding-top: 7px; background: color-mix(in srgb, var(--c) 10%, transparent); }
.nt .tile:hover { background: color-mix(in srgb, var(--c) 30%, transparent); }
.nt .tile.hl { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent); }
.nt .tile.active { box-shadow: inset 0 0 0 1.5px var(--c); }
.nt .tile.repeat { opacity: .5; }
.nt .tile.s-null, .nt .tile.s-empty, .nt .tile.s-missing { background: transparent; color: var(--muted); font-style: italic; font-size: 12px; }
.nt .tile.s-null { border: 1px dashed color-mix(in srgb, var(--ink) 16%, transparent); }
.nt .tile.s-empty { border: 1px dotted color-mix(in srgb, var(--ink) 24%, transparent); }
.nt .tile.s-missing { border: 0; }
.nt .tile.s-missing::after { content: ""; width: 4px; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 18%, transparent); margin: auto; }
.nt .tile.s-bad { background: color-mix(in srgb, var(--bad) 10%, transparent); border: 1px solid color-mix(in srgb, var(--bad) 55%, transparent); color: var(--bad-text); }
/* Editable cells: click to edit, Enter or leaving sends, Escape cancels. A sent value shows as pending until its run comes back; a refused one
   says why. */
.nt .tile.editable { cursor: text; }
.nt .tile.editable:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent); }
.nt .tile.editing { overflow: visible; z-index: 3; padding: 0 3px; }
.nt input.cell-edit { font: inherit; color: var(--strong); background: var(--surface, Canvas); border: 1.5px solid var(--c); border-radius: 4px; padding: 1px 5px; width: 100%; min-width: 60px; box-sizing: border-box; }
.nt .tile.pending { font-style: italic; opacity: .75; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 14%, transparent) 0 6px, color-mix(in srgb, var(--c) 24%, transparent) 6px 12px); }
.nt .tile.queued { opacity: .6; }
.nt .tile.refused { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--bad) 70%, transparent); }
.nt .tile .cell-why { flex: 0 1 auto; font-size: 11px; color: var(--bad-text); overflow: hidden; text-overflow: ellipsis; }
.nt .tile.editing .cell-why { position: absolute; top: 100%; left: 0; background: var(--surface, Canvas); padding: 2px 6px; border-radius: 4px; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.15); overflow: visible; }
.nt .tile.summary { border-top: 2px dotted color-mix(in srgb, var(--c) 60%, transparent); border-radius: 3px 3px 6px 6px; cursor: default; }
.nt .tile.marker { cursor: default; justify-content: flex-start; }
.nt .hline { background: var(--line); }
.nt .hline.obj { background: none; border-top: 1px dotted var(--line); }
.nt .hline.collapsed { background: none; border-top: 1px dashed var(--line); }
.nt .hlabel { display: flex; align-items: center; gap: 5px; white-space: nowrap; color: var(--text-2); cursor: pointer; user-select: none; padding-right: 4px; }
.nt .hlabel.obj { color: var(--muted); cursor: grab; font-size: 12px; }
.nt .hlabel.root { font-weight: 600; color: var(--text); cursor: default; }
.nt .chev { color: var(--muted); width: 10px; display: inline-block; }
.nt .hlabel:hover .chev { color: var(--text); }
.nt .htile { border-radius: 7px; padding: 6px 10px 7px; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; background: color-mix(in srgb, var(--c) 27%, transparent); color: color-mix(in srgb, var(--c) 18%, var(--strong)); cursor: pointer; user-select: none; overflow: hidden; }
.nt .htile:hover { background: color-mix(in srgb, var(--c) 38%, transparent); }
.nt .htile.sum { background: color-mix(in srgb, var(--c) 14%, transparent); border-top: 2px dotted color-mix(in srgb, var(--c) 60%, transparent); }
.nt .htile.sorted { box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--c) 80%, var(--strong)); }
.nt .hk { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nt .hk b { margin-left: 4px; }
.nt .hu, .nt .agg { font-size: 11px; color: color-mix(in srgb, var(--c) 30%, var(--text-3)); white-space: nowrap; }
.nt .agg { text-align: left; }
.nt .agg:hover { color: var(--strong); }
.nt .eye { position: absolute; top: 5px; right: 5px; opacity: 0; color: var(--strong); padding: 2px; border-radius: 4px; line-height: 0; transition: opacity .15s; }
.nt .hlabel .eye { position: static; }
.nt .htile:hover .eye, .nt .hlabel:hover .eye { opacity: .55; }
.nt .eye:hover { opacity: 1 !important; background: color-mix(in srgb, var(--ink) 12%, transparent); }
.nt .dragging { z-index: 10; opacity: .85; transition: none !important; box-shadow: 0 8px 24px color-mix(in srgb, var(--shade) 50%, transparent); cursor: grabbing; }
.nt .notch { opacity: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity .2s !important; }
.nt .notch i { width: 8px; height: 8px; border-radius: 4px; background: var(--bg); border: 1.5px solid color-mix(in srgb, var(--ink) 55%, transparent); transition: transform .15s; }
.nt .nt-hdr:hover .notch { opacity: 1; }
.nt .notch:hover i { transform: scale(1.4); background: var(--strong); }
.nt .nt-tray { position: absolute; z-index: 20; display: flex; gap: 6px; padding: 6px; border-radius: 9px; background: var(--popover); backdrop-filter: blur(6px); box-shadow: 0 10px 30px color-mix(in srgb, var(--shade) 45%, transparent); transform-origin: left center; transform: scaleX(0); opacity: 0; pointer-events: none; transition: transform .22s var(--ease), opacity .15s; }
.nt .nt-tray.on { transform: none; opacity: 1; pointer-events: auto; }
.nt .ghost { height: 30px; border-radius: 6px; padding: 0 10px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px dashed color-mix(in srgb, var(--c) 60%, transparent); color: color-mix(in srgb, var(--c) 40%, var(--strong)); }
.nt .ghost:hover { background: color-mix(in srgb, var(--c) 25%, transparent); border-style: solid; }
.nt .nt-mini { position: absolute; left: 0; right: 0; height: 20px; z-index: 4; pointer-events: none; opacity: 0; transition: opacity .15s, top .2s var(--ease); }
.nt .nt-mini.on { opacity: 1; pointer-events: auto; }
.nt .nt-mini button { position: absolute; top: 0; height: 20px; border-radius: 5px; font-size: 11px; padding: 0 8px; text-align: left; background: var(--raised); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 4px 12px color-mix(in srgb, var(--shade) 35%, transparent); }
.nt .nt-mini button:hover { color: var(--strong); background: var(--press); }
.nt .nt-mini button.on { color: var(--strong); background: color-mix(in srgb, var(--c-number) 45%, transparent); }
.nt .tile.summary.pickable { cursor: pointer; }
.nt .chip.local { background: color-mix(in srgb, var(--c-string) 16%, transparent); }
.nt .zoom { margin-left: auto; display: flex; gap: 2px; align-items: center; background: color-mix(in srgb, var(--ink) 5%, transparent); border-radius: 8px; padding: 2px; }
.nt .zoom button { min-width: 26px; height: 24px; padding: 0 7px; border-radius: 6px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.nt .zoom button:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--strong); }
.nt .nt-pop { position: fixed; z-index: 50; min-width: 150px; max-width: 280px; max-height: 320px; overflow: auto; padding: 6px; border-radius: 10px; background: var(--popover); backdrop-filter: blur(8px); box-shadow: 0 12px 34px color-mix(in srgb, var(--shade) 50%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent); display: flex; flex-direction: column; gap: 2px; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .14s, transform .14s var(--ease); }
.nt .nt-pop.on { opacity: 1; transform: none; pointer-events: auto; }
.nt .nt-pop .ph { font-size: 11px; color: var(--muted); padding: 3px 8px 6px; }
.nt .nt-pop .ph span { opacity: .7; }
.nt .nt-pop .po { text-align: left; padding: 6px 10px; border-radius: 6px; color: var(--text-2); }
.nt .nt-pop .po:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--strong); }
.nt .nt-pop .po.on { color: var(--strong); background: color-mix(in srgb, var(--c-number) 30%, transparent); }
.nt .nt-pop .pv { position: relative; display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 6px; text-align: left; color: color-mix(in srgb, var(--c) 28%, var(--strong)); overflow: hidden; }
.nt .nt-pop .pv i { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--c) 16%, transparent); border-radius: 6px; }
.nt .nt-pop .pv span, .nt .nt-pop .pv b { position: relative; }
.nt .nt-pop .pv span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt .nt-pop .pv b { font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.nt .nt-pop .pv:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.nt .nt-pop .pv.on { box-shadow: inset 0 0 0 1.5px var(--c); }
.nt .nt-pop .pv.muted { color: var(--muted); font-style: italic; }
.nt .tile .in { position: relative; }
.nt .tile.tall .in { position: sticky; }
.nt .fold { position: absolute; right: -6px; top: 50%; margin-top: -9px; background: color-mix(in srgb, var(--c) 30%, var(--surface)); width: 18px; height: 18px; border-radius: 5px; color: color-mix(in srgb, var(--c) 40%, var(--strong)); opacity: 0; font-size: 10px; line-height: 18px; transition: opacity .15s, background .15s; }
.nt .tile:hover .fold, .nt .fold.on { opacity: .8; }
.nt .fold:hover { opacity: 1; background: color-mix(in srgb, var(--ink) 14%, transparent); }
.nt .tile.foldstrip { background: none; color: var(--muted); font-size: 11px; padding: 0 2px; border-bottom: 1px dashed color-mix(in srgb, var(--ink) 18%, transparent); border-radius: 0; }
.nt .tile.foldstrip:hover { color: var(--text); background: none; }
.nt .tile.folded { align-items: flex-end; padding-bottom: 5px; }
.nt .tile.folded .in { position: static; }
.nt .tile.folded .in em { position: absolute; top: 3px; left: 8px; font-style: normal; font-size: 9.5px; letter-spacing: .02em; color: var(--muted); }
.nt .tile.summary.folded { border-top-style: dashed; }
.nt .tile.inherit { background: color-mix(in srgb, var(--c) 9%, transparent); border-left: 2px solid color-mix(in srgb, var(--c) 45%, transparent); }
.nt .htile.inh { background: color-mix(in srgb, var(--c) 15%, transparent); border-left: 2px solid color-mix(in srgb, var(--c) 55%, transparent); }
.nt .ren { position: absolute; top: 5px; left: 5px; opacity: 0; color: var(--strong); font-size: 11px; padding: 0 3px; border-radius: 4px; transition: opacity .15s; }
.nt .hlabel .ren { position: static; }
.nt .htile:hover .ren, .nt .hlabel:hover .ren { opacity: .55; }
.nt .ren:hover { opacity: 1 !important; background: color-mix(in srgb, var(--ink) 12%, transparent); }
.nt input.rename { font: inherit; font-weight: 600; color: var(--strong); background: color-mix(in srgb, var(--shade) 35%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 35%, transparent); border-radius: 4px; padding: 1px 4px; width: 100%; min-width: 60px; box-sizing: border-box; }
.nt .home { position: absolute; top: 5px; right: 24px; color: var(--strong); opacity: .5; font-size: 11px; padding: 0 3px; border-radius: 4px; }
.nt .home:hover { opacity: 1; background: color-mix(in srgb, var(--ink) 12%, transparent); }
.nt .tile.lifting { z-index: 8; transition: none !important; box-shadow: 0 10px 26px color-mix(in srgb, var(--shade) 55%, transparent); cursor: grabbing; }
.nt .hline.droptarget { background: var(--focus); height: 2px !important; }
.nt .hlabel.droptarget { color: var(--focus); }
.nt .hline.dropbad { background: var(--bad); }
.nt .hlabel.dropbad { color: var(--bad); }
.nt .chip.manual { background: color-mix(in srgb, var(--c-date) 16%, transparent); }
.nt .chip.fold { background: color-mix(in srgb, var(--ink) 10%, transparent); }
.nt .nt-board { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; padding: 2px 28px 28px; align-items: stretch; }
.nt.table-hidden .card.tablecard { display: none; }
.nt .card.tablecard { background: none; box-shadow: none; padding: 0; margin: 0 -28px; border-radius: 0; }
.nt .tablecard .tc-head { display: flex; align-items: center; padding: 4px 28px 6px; margin: 0; }
.nt .tablecard .tc-head .ch-title { flex: 1; color: var(--muted); font-weight: 500; }
.nt .tablecard .zoom { margin-left: 0; }
.nt .edit-only { display: none !important; }
.nt.editing .edit-only { display: inline-flex !important; }
.nt.editing .ch-cfg.edit-only { display: flex !important; }
.nt .grip { display: none; cursor: grab; color: var(--muted); font-size: 14px; padding: 0 4px; user-select: none; touch-action: none; }
.nt.editing .grip { display: inline; }
.nt .grip:hover { color: var(--strong); }
.nt .card.lifted { z-index: 40; opacity: .9; box-shadow: 0 20px 50px color-mix(in srgb, var(--shade) 60%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--focus) 50%, transparent); transition: none; cursor: grabbing; }
.nt .card.drop-before { box-shadow: inset 4px 0 0 var(--focus); }
.nt .card.drop-after { box-shadow: inset -4px 0 0 var(--focus); }
.nt .card[style*="span 12"].drop-before, .nt .tablecard.drop-before { box-shadow: inset 0 4px 0 var(--focus); }
.nt .card[style*="span 12"].drop-after, .nt .tablecard.drop-after { box-shadow: inset 0 -4px 0 var(--focus); }
.nt .tbtn.edit.on { background: color-mix(in srgb, var(--focus) 22%, transparent); color: var(--strong); }
.nt .card { container-type: inline-size; overflow: hidden; display: flex; flex-direction: column; }
.nt .card .ch-body { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.nt .card.tablecard { display: block; }
.nt .ch-head { flex-wrap: wrap; row-gap: 6px; }
.nt .ch-title { min-width: 90px; }
.nt .ch-legend .note { color: var(--muted); }
@container (max-width: 300px) {
.nt .ch-title { flex-basis: 100%; order: -1; }
.nt .pie { flex-direction: column; align-items: stretch; gap: 10px; }
.nt .ch-cfg { gap: 4px; }
}
.nt .card { background: var(--surface); border-radius: 12px; padding: 12px 14px 10px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 5%, transparent); min-width: 0; transition: box-shadow .2s; }
.nt .card.picking { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--focus) 70%, transparent); }
@media (max-width: 900px) {
.nt .card { grid-column: span 12 !important; }
}
.nt .ch-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.nt .ch-title { font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nt .seg { display: flex; background: color-mix(in srgb, var(--ink) 5%, transparent); border-radius: 7px; padding: 2px; flex: none; }
.nt .seg button { padding: 3px 8px; border-radius: 5px; color: var(--text-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.nt .seg button:hover { color: var(--strong); }
.nt .seg button.on { background: color-mix(in srgb, var(--ink) 12%, transparent); color: var(--strong); }
.nt .ch-btn, .nt .tbtn { color: var(--text-3); padding: 3px 8px; border-radius: 6px; font-size: 12px; flex: none; }
.nt .ch-btn:hover, .nt .tbtn:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--strong); }
.nt .ch-btn.on { background: color-mix(in srgb, var(--focus) 22%, transparent); color: var(--strong); }
.nt .tools { display: flex; gap: 4px; margin-left: auto; }
.nt .tools + .zoom { margin-left: 8px; }
.nt .ch-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--text-2); margin: -2px 0 8px; }
.nt .ch-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.nt .ch-body { position: relative; }
.nt .ch-scroll { flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.nt .ch-msg { color: var(--muted); padding: 48px 0; text-align: center; width: 100%; }
.nt .yaxis, .nt .plot { display: block; flex: none; }
.nt .plot text, .nt .yaxis text { font-family: inherit; }
.nt .grid { stroke: color-mix(in srgb, var(--ink) 7%, transparent); }
.nt .base { stroke: color-mix(in srgb, var(--ink) 30%, transparent); }
.nt .ytick, .nt .xtick { fill: var(--text-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.nt .mk { transition: opacity .15s; }
.nt .plot.dim .mk:not(.hot) { opacity: .28; }
.nt .pt.hot { r: 5.5; }
.nt .guide { stroke: color-mix(in srgb, var(--ink) 35%, transparent); stroke-dasharray: 3 3; opacity: 0; }
.nt .guide.on { opacity: 1; }
.nt .hit { cursor: crosshair; }
.nt .ch-tip { position: absolute; max-width: 92%; pointer-events: none; background: var(--popover); border-radius: 8px; padding: 8px 10px; font-size: 12px; z-index: 5; box-shadow: 0 10px 26px color-mix(in srgb, var(--shade) 50%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent); opacity: 0; transition: opacity .12s; white-space: nowrap; }
.nt .ch-tip.on { opacity: 1; }
.nt .ch-tip b { display: block; margin-bottom: 5px; color: var(--strong); font-weight: 600; }
.nt .ch-tip div { display: flex; gap: 8px; align-items: center; color: var(--text-2); line-height: 1.6; }
.nt .ch-tip i { width: 8px; height: 8px; border-radius: 2px; }
.nt .ch-tip span { margin-left: auto; padding-left: 16px; color: var(--strong); font-variant-numeric: tabular-nums; }
.nt .htile.pk-ok { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--focus) 75%, transparent); cursor: crosshair; }
.nt .htile.pk-sel, .nt .htile.pk-x { box-shadow: inset 0 0 0 2.5px var(--focus); }
.nt .htile.pk-no { opacity: .28; }
.nt .chip.pick { background: color-mix(in srgb, var(--focus) 16%, transparent); display: inline-flex; align-items: center; gap: 6px; }
.nt .chip.pick b { color: var(--strong); }
.nt .ch-cfg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -2px 0 10px; font-size: 12px; }
.nt .ch-cfg .lbl { color: var(--muted); font-size: 11px; margin-left: 4px; }
.nt .ch-cfg .lbl:first-child { margin-left: 0; }
.nt .xchip, .nt .ychip { display: inline-flex; align-items: center; gap: 2px; background: color-mix(in srgb, var(--ink) 6%, transparent); border-radius: 7px; height: 24px; padding: 0 3px; color: var(--text-2); }
.nt .xchip { padding: 0 9px; }
.nt .xchip:hover, .nt .ychip.add:hover { background: color-mix(in srgb, var(--ink) 12%, transparent); }
.nt .ychip.add { padding: 0 9px; color: var(--text-3); }
.nt .ychip button { height: 20px; padding: 0 5px; border-radius: 5px; color: inherit; }
.nt .ychip button:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); }
.nt .ychip .dot { width: 14px; height: 14px; padding: 0; border-radius: 4px; margin: 0 2px; }
.nt .ychip .dot:hover { outline: 2px solid color-mix(in srgb, var(--ink) 40%, transparent); }
.nt .ychip .ax { font-size: 10px; color: var(--muted); border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); height: 16px; line-height: 14px; padding: 0 4px; }
.nt .ychip .ax.nope { border-color: var(--bad); color: var(--bad); }
.nt .ychip .yx { color: var(--muted); }
.nt .ychip.unfit { opacity: .45; text-decoration: line-through; }
.nt .ch-btn.menu { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.nt .nt-pop .psep { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 8px 10px 2px; }
.nt .nt-pop .po i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 7px; }
.nt .nt-pop .po.off { color: var(--faint); cursor: default; }
.nt .nt-pop .po.off:hover { background: none; }
.nt .nt-pop .po em { font-style: normal; font-size: 10.5px; color: var(--faint); margin-left: 8px; }
.nt .swatches { display: grid; grid-template-columns: repeat(4, 26px); gap: 6px; padding: 4px 8px 6px; }
.nt .sw { width: 26px; height: 26px; border-radius: 7px; }
.nt .sw:hover { outline: 2px solid var(--strong); outline-offset: 1px; }
.nt .vdot { flex: none; width: 7px; height: 7px; border-radius: 4px; }
.nt .ch-row { display: flex; }
.nt .ch-scroll.v { overflow-x: hidden; overflow-y: auto; }
.nt .ch-legend em { font-style: normal; color: var(--muted); font-size: 10.5px; margin-left: 5px; }
.nt .axt { fill: var(--text-3); font-size: 10.5px; }
.nt .gsep { stroke: color-mix(in srgb, var(--ink) 8%, transparent); stroke-dasharray: 2 3; }
.nt .ch-tip small { font-weight: 400; color: var(--muted); }
.nt .ch-tip .hint { color: var(--faint); font-size: 10.5px; margin-top: 4px; }
.nt .plot .mk:not(.slice) { cursor: pointer; }
.nt .hit { cursor: pointer; }
.nt .pie { display: flex; align-items: center; gap: 22px; padding: 4px 0; }
.nt .slice { cursor: pointer; transition: opacity .15s, transform .15s; }
.nt .pie-total { fill: var(--strong); font-size: 17px; font-weight: 600; }
.nt .pie-sub { fill: var(--text-3); font-size: 11px; }
.nt .pie-legend { display: flex; flex-direction: column; gap: 6px; font-size: 12px; min-width: 0; flex: 1; }
.nt .pl { display: flex; align-items: center; gap: 8px; color: var(--text-2); cursor: pointer; }
.nt .pl i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.nt .pl span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt .pl b { font-weight: 500; color: var(--strong); font-variant-numeric: tabular-nums; }
.nt .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 6px 22px; }
.nt .stat { padding: 10px 4px 6px; min-width: 0; container-type: inline-size; }
.nt .stat-label { color: var(--text-2); font-size: 13px; display: flex; align-items: baseline; gap: 6px; white-space: nowrap; overflow: hidden; }
.nt .stat-label i { width: 9px; height: 9px; border-radius: 3px; flex: none; align-self: center; }
.nt .stat-label span { overflow: hidden; text-overflow: ellipsis; }
.nt .stat-label span { color: var(--muted); }
.nt .stat-num { font-size: 40px; font-weight: 600; letter-spacing: -.01em; margin: 6px 0 4px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nt .spark { width: 100%; height: 36px; display: block; margin: 4px 0 12px; }
.nt .nt-doc { position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 92vw); z-index: 60; background: var(--popover); box-shadow: -20px 0 50px color-mix(in srgb, var(--shade) 50%, transparent); transform: translateX(105%); transition: transform .25s var(--ease); display: flex; flex-direction: column; }
.nt .nt-doc.on { transform: none; }
.nt .doc-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 7%, transparent); }
.nt .doc-head span { color: var(--muted); font-size: 12px; flex: 1; }
.nt .nt-doc pre { margin: 0; padding: 14px 16px; overflow: auto; flex: 1; font: 12px/1.5 ui-monospace, "SF Mono", Menlo, monospace; color: var(--text-2); }

/* The app's own button and card styles stop at the board. */
.nt button { border: 0; background: none; padding: 0; border-radius: 0; color: inherit; font: inherit; }
.nt { border-radius: 12px; padding: 0 0 4px; }
.nt .card + .card { margin-top: 0; }
.nt .card { border: 0; }
.nt .nt-pop { left: 0; top: 0; }
.nt .ch-tip { position: fixed; transform: translate(14px, calc(-100% - 10px)); }
.nt-preview { max-width: none; }
/* The table's raw data: the page's JSON viewer, in the board's colours. */
.nt .tablecard .tc-foot { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 6px 28px 0; }
.nt .tablecard .tc-head .legend { margin-right: 14px; }
.nt .tbtn.on { background: color-mix(in srgb, var(--focus) 22%, transparent); color: var(--strong); }
.nt .nt-raw { padding: 0 28px; max-height: calc(100vh - 120px); overflow: auto; }
.nt .json-view { background: var(--surface); border: 0; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent); border-radius: 10px; color: var(--text); }
.nt .json-tools button.link { color: var(--text-3); } .nt .json-tools button.link:hover { color: var(--strong); }
.nt .jl .jfold { color: var(--faint); } .nt .jl button.jfold:hover { color: var(--strong); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.nt .j-key { color: var(--c-string); } .nt .j-str { color: var(--c-money); } .nt .j-num { color: var(--c-number); } .nt .j-lit { color: var(--c-bool); }
.nt .j-p, .nt .j-note { color: var(--muted); }
.nt button.j-folded { background: color-mix(in srgb, var(--ink) 7%, transparent); border-color: color-mix(in srgb, var(--ink) 12%, transparent); color: var(--text-3); }


/* A board's cards as cells of a dashboard's grid (Hyper.UI.Page.View.Dashboard): each cell is a root of its own, filling its cell. */
.nt-cell { display: flex; flex-direction: column; min-width: 0; }
.nt-cell > .nt { flex: 1; display: flex; flex-direction: column; min-width: 0; background: none; }
.nt-cell > .nt > .card { flex: 1; }
.nt-cell .nt .nt-caption { padding: 0 2px 8px; }
.nt-cell .nt .card.tablecard { margin: 0; border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-s); border: 1px solid var(--line); overflow: hidden; }
.nt-cell .nt .card.tablecard .tc-head { padding: 8px 12px 0; }
/* A cell's frame: the dashboard's title field and tools in the card's head, and its foot under the card's body. */
.nt-cell .nt .card { position: relative; }
.nt-cell .nt .card > .w-foot { margin: 8px -14px -10px; }
.nt-cell .nt .card.tablecard > .w-foot { margin: 6px 0 0; }
.nt-cell .nt .ch-head .w-title-input { font-weight: 600; }
.nt-cell .nt .tablecard .tc-head .w-title-input, .nt-cell .nt .tablecard .tc-head .ch-title { flex: 1; color: var(--text); font-weight: 600; }
/* Heights (in row units): a sized card is that tall, a table without one at most four units; the table scrolls inside its card. */
.nt-cell .nt .card.tablecard.sized, .nt-cell .nt .card.tablecard.capped { display: flex; flex-direction: column; }
.nt-cell .nt .card.tablecard.sized .tc-body, .nt-cell .nt .card.tablecard.capped .tc-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.nt-cell .nt .card.tablecard.sized .nt-scroll, .nt-cell .nt .card.tablecard.capped .nt-scroll { flex: 1; min-height: 0; max-height: none; }
.nt-cell .nt .card.sized { flex: none; }
.nt-cell .nt .card.sized .ch-body { min-height: 0; overflow: hidden; }
/* What a sized chart draws keeps its own height, so that a plot drawn too tall is measured as too tall (and drawn again to fit) rather than
   squeezed to the card, which measures as fitting and leaves the plot clipped at whatever height it last had. */
.nt-cell .nt .card.sized .ch-body > * { flex-shrink: 0; }
.nt:has(.h-edge:active) { user-select: none; }
.nt-cell > .nt > .card.capped { flex: none; }
/* The bottom edge, to drag a card to another height while editing. */
.nt .card > .h-edge { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; cursor: ns-resize; z-index: 5; }
.nt .card > .h-edge::after { content: ""; position: absolute; left: calc(50% - 20px); bottom: 2px; width: 40px; height: 4px; border-radius: 2px; background: var(--line-strong); opacity: 0; transition: opacity .15s; }
.nt .card:hover > .h-edge::after, .nt .card > .h-edge:hover::after { opacity: 1; }
@media (max-width: 720px) { .nt-cell .nt .card.sized { height: auto !important; max-height: 480px; } }
.nt .tablecard .tc-foot .grow { flex: 1; }
/* In a dashboard's grid a table's caption shows only when it has something to say (its sort and filter chips, a pick under way). */
.nt-cell .nt .nt-caption .title:not(:has(.meta, .tools *)) { display: none; }
.nt-cell .nt .nt-caption .bar:empty { display: none; }
.nt-cell .nt .nt-caption:not(:has(.bar:not(:empty), .title .meta, .title .tools *)) { display: none; }
/* Pages (Hyper.UI.Nested's paging): the rows' pager in the table's foot, one within a parent row on a row of its own under its page. */
.nt .pager { display: flex; align-items: center; gap: 2px; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.nt .pager.inner { position: absolute; padding: 0 6px; box-sizing: border-box; transition: top .3s var(--ease), left .3s var(--ease); }
.nt .pager .pg-text { padding: 0 6px; white-space: nowrap; }
.nt .pager .pg-btn { padding: 2px 7px; border-radius: 5px; color: var(--text-3); }
.nt .pager .pg-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--strong); }
.nt .pager .pg-btn:disabled { opacity: .35; cursor: default; }
/* A header's menu, in edit mode. */
.nt .hmenu { position: absolute; bottom: 3px; right: 5px; opacity: 0; color: var(--strong); font-size: 12px; line-height: 1; padding: 1px 4px; border-radius: 4px; transition: opacity .15s; }
.nt .hlabel .hmenu { position: static; margin-left: 2px; }
.nt .htile:hover .hmenu, .nt .hlabel:hover .hmenu { opacity: .6; }
.nt .hmenu:hover { opacity: 1 !important; background: color-mix(in srgb, var(--ink) 12%, transparent); }