mostlyright-data 0.9.0__py3-none-any.whl

mostlyright/data_harness/nbrender/tokens.py

@@ -0,0 +1,1295 @@
+"""Design tokens and the single stylesheet the renderer ever emits.
+
+This module is the design system of record: every hex, size, and geometry appears here exactly
+once, and nowhere else in the package.  Components never carry their own CSS — they emit
+``nb-``-prefixed kebab classes and this module owns the rules those classes resolve against, so
+the palette cannot drift between modules.  ``build_css`` is the only place literal color escapes
+into output, and everything it emits is scoped under ``.nb-shell`` so an embed render cannot leak
+style onto a host marketing page.
+"""
+
+from __future__ import annotations
+
+# --- Color --------------------------------------------------------------------------------------
+# Core palette.
+BLACK = "#0D0D0D"  # reserved — never the code panel
+INK = "#17160F"  # header bg, body text, headings
+BODY = "#3B382F"  # markdown paragraph text
+MUTED = "#57534A"  # secondary text, toolbar labels
+FAINT = "#6E6959"  # tertiary text, JSON punctuation
+DIM = "#837D6E"  # uppercase mono labels
+DIMMER = "#9A9484"  # metadata, timestamps
+HAIRLINE = "#CFC9BA"  # md / raw gutter marks
+BORDER = "#E2DDD0"  # all 1px borders
+SURFACE = "#EDE9DF"  # collapsed-input fill, stale banner
+PAPER = "#F5F2EB"  # page ground
+COBALT = "#2B5FE3"  # In [n] prompts, links, positive deltas, progress fill
+ORANGE = "#F15B22"  # Out [n] prompts, errors, running state, negative deltas
+YELLOW = "#FFC613"  # primary action, cell tags, annotation badges
+SUCCESS = "#2F6B4F"  # passed checks and verified terminal states
+
+# Viewer-only additions.
+PANEL = "#141414"  # code input background
+PANEL_BORDER = "#1E1E1C"  # code panel internal dividers
+PANEL_RAISE = "#232118"  # code panel toolbar bg, kernel pill bg
+PANEL_EDGE = "#2E2C22"  # ghost button border on panel
+SUB_PAPER = "#FAF8F3"  # output wells, toolbar, outline rail
+ROW_RULE = "#F1EDE3"  # table row dividers, inline code fill
+RUST = "#A34718"  # stderr text, negative residuals on paper
+WARN_BG = "#FDF3E4"  # leakage / warning callout fill
+WARN_BORDER = "#F0DCB4"  # leakage callout border
+WARN_INK = "#5C4315"  # leakage callout body text
+WARN_TITLE = "#8A5A16"  # leakage callout title label (F28)
+ERR_BG = "#FCEFEA"  # traceback body fill
+ERR_BORDER = "#F2D3C4"  # traceback body border
+MINIMAP_CODE = "#E5E9F6"  # A04 minimap code-cell bar tint
+MINIMAP_ERR = "#FBE4DA"  # A04 minimap error-cell bar tint
+
+# CSS custom properties emitted on ``.nb-shell`` and inherited by every descendant.  The kebab
+# names are the ``--nb-`` variable suffixes components reference.
+CSS_TOKENS: dict[str, str] = {
+    "black": BLACK,
+    "ink": INK,
+    "body": BODY,
+    "muted": MUTED,
+    "faint": FAINT,
+    "dim": DIM,
+    "dimmer": DIMMER,
+    "hairline": HAIRLINE,
+    "border": BORDER,
+    "surface": SURFACE,
+    "paper": PAPER,
+    "cobalt": COBALT,
+    "orange": ORANGE,
+    "yellow": YELLOW,
+    "success": SUCCESS,
+    "panel": PANEL,
+    "panel-border": PANEL_BORDER,
+    "panel-raise": PANEL_RAISE,
+    "panel-edge": PANEL_EDGE,
+    "sub-paper": SUB_PAPER,
+    "row-rule": ROW_RULE,
+    "rust": RUST,
+    "warn-bg": WARN_BG,
+    "warn-border": WARN_BORDER,
+    "warn-ink": WARN_INK,
+    "warn-title": WARN_TITLE,
+    "err-bg": ERR_BG,
+    "err-border": ERR_BORDER,
+    "minimap-code": MINIMAP_CODE,
+    "minimap-err": MINIMAP_ERR,
+}
+
+# --- Type ---------------------------------------------------------------------------------------
+# No webfont fetch is permitted in the harness; both stacks degrade to system faces.
+FONT_SANS = '"Space Grotesk", "Helvetica Neue", sans-serif'
+FONT_MONO = '"JetBrains Mono", Menlo, monospace'
+
+# role -> (family, size_px, weight, line_height, notes).  Consumed by build_css and available to
+# components that need a size without re-deriving it from the stylesheet text.
+TYPE_SCALE: dict[str, tuple[str, float, int, float, str]] = {
+    "md-h1": (FONT_SANS, 34, 700, 1.1, "letter-spacing:-0.025em"),
+    "md-h2": (FONT_SANS, 25, 600, 1.15, "letter-spacing:-0.02em"),
+    "md-h3": (FONT_SANS, 19, 600, 1.25, "letter-spacing:-0.01em"),
+    "md-h4": (FONT_SANS, 16, 600, 1.3, ""),
+    "md-body": (FONT_SANS, 16, 400, 1.68, "max-width:62ch;text-wrap:pretty"),
+    "md-list": (FONT_SANS, 16, 400, 1.6, "max-width:60ch"),
+    "code": (FONT_MONO, 13, 400, 1.75, ""),
+    "output": (FONT_MONO, 12.5, 400, 1.7, "white-space:pre-wrap"),
+    "table-cell": (FONT_MONO, 12.5, 400, 1.5, "font-variant-numeric:tabular-nums"),
+    "prompt": (FONT_MONO, 11.5, 400, 1, ""),
+    "chrome-button": (FONT_MONO, 11.5, 500, 1, ""),
+    "meta": (FONT_MONO, 10.5, 600, 1.4, "letter-spacing:0.12em;text-transform:uppercase"),
+    "inline-code": (FONT_MONO, 13.5, 400, 1.0, ""),
+}
+
+# --- Geometry -----------------------------------------------------------------------------------
+GUTTER_PX = 62  # fixed prompt column; outputs re-enter with margin-left:-62px
+GUTTER_NARROW_PX = 44  # 560-799 container width
+CELL_GAP_PX = 26  # cell-to-cell
+IO_GAP_PX = 10  # input-to-output
+DOC_PADDING = "34px clamp(20px, 3vw, 40px) 40px"
+SHELL_RADIUS_PX = 16
+SHELL_BORDER = f"1px solid {BORDER}"
+SHELL_SHADOW = "0 1px 2px rgba(23,22,15,0.04), 0 12px 32px rgba(23,22,15,0.05)"
+OUTLINE_WIDTH_PX = 216
+
+# MR01 distribution chart. Axis labels alternate over two rows, so each visible label may use the
+# horizontal span of two bar slots while remaining inside the fixed viewBox.
+CHART_VIEWBOX_WIDTH = 724.0
+CHART_VIEWBOX_HEIGHT = 212.0
+CHART_PLOT_LEFT = 42.0
+CHART_PLOT_RIGHT = 682.0
+CHART_BASELINE = 156.0
+CHART_PLOT_HEIGHT = 108.0
+CHART_BAR_MIN_WIDTH = 12.0
+CHART_BAR_MAX_WIDTH = 72.0
+CHART_LABEL_BASELINES = (180.0, 198.0)
+CHART_LABEL_CHAR_WIDTH = 7.0
+CHART_LABEL_GAP = 12.0
+
+RADIUS = {
+    "panel": "10px",  # cell panels, output wells
+    "callout": "12px",  # callouts
+    "scrolled": "8px",  # scrolled boxes, collapsed bars
+    "chrome-btn": "7px",
+    "toolbar-btn": "6px",
+    "chip": "4px",  # chips, tags, badges (4-5px)
+    "pill": "999px",  # pills, progress tracks
+}
+
+# --- Motion -------------------------------------------------------------------------------------
+# Three animations, all <= 1.6s, all gated behind prefers-reduced-motion.
+KEYFRAMES = """
+@keyframes nb-spin  { to { transform: rotate(360deg); } }
+@keyframes nb-pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.35 } }
+@keyframes nb-bar   { 0% { transform: translateX(-100%) } 100% { transform: translateX(340%) } }
+""".strip()
+
+HOVER_TRANSITION = "0.15s ease"  # color and border-color only; never layout
+
+VALID_MODES = ("static", "connected", "embed")
+
+
+def _root_vars() -> str:
+    decls = "".join(f"--nb-{name}:{value};" for name, value in CSS_TOKENS.items())
+    return (
+        ".nb-shell{" + decls + f"container-type:inline-size;box-sizing:border-box;"
+        "--nb-inset-x:16px;--nb-inset-y:12px;--nb-stack-gap:8px;--nb-section-gap:16px;"
+        f"border:{SHELL_BORDER};border-radius:{SHELL_RADIUS_PX}px;overflow:hidden;"
+        f"box-shadow:{SHELL_SHADOW};background:var(--nb-paper);"
+        f"font-family:{FONT_SANS};color:var(--nb-ink);"
+        "}"
+        ".nb-shell *,.nb-shell *::before,.nb-shell *::after{box-sizing:border-box;}"
+    )
+
+
+# Structural + component rules.  Written as one literal block (no f-string) so CSS braces stay
+# unescaped; every color is a var so this text carries no hex of its own except the six
+# syntax/traceback/kernel accents that belong to a single component each.
+_BASE_CSS = """
+/* Layout · spec section 3 */
+.nb-body { display: flex; align-items: flex-start; }
+.nb-document {
+  flex: 1; min-width: 0;
+  padding: 34px clamp(20px, 3vw, 40px) 40px;
+  display: flex; flex-direction: column; gap: 26px;
+}
+.nb-cell {
+  display: grid; grid-template-columns: 62px minmax(0, 1fr);
+  align-items: start;
+}
+.nb-gutter { grid-column: 1; user-select: none; -webkit-user-select: none; }
+.nb-content { grid-column: 2; min-width: 0; }
+.nb-io { margin-left: -62px; }
+.nb-io { display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: start; }
+/* The output row owns the input-to-output gap: 10px is IO_GAP_PX, and the reset covers every
+   child of the row body — one output can render as several sibling roots (E26 stale banner + E25
+   widget), so resetting only the first child would leave a seam between them. */
+.nb-io { margin-top: 10px; }
+.nb-io > .nb-io-body > * { margin-top: 0; }
+.nb-io-gutter { grid-column: 1; user-select: none; -webkit-user-select: none; }
+.nb-io-body { grid-column: 2; min-width: 0; }
+
+/* A01 · notebook header */
+.nb-header {
+  display: flex; justify-content: space-between; align-items: center;
+  gap: 16px; padding: 16px 22px; background: var(--nb-ink);
+}
+.nb-header-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
+.nb-header-crumbs { font-family: var(--fm); font-size: 10.5px; color: #6E6A60; }
+.nb-header-crumb-sep { color: #4A473C; }
+.nb-header-crumb-last { color: var(--nb-dimmer); }
+.nb-header-file {
+  font-family: var(--fm); font-size: 14.5px; font-weight: 600; color: var(--nb-paper);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.nb-header-saved { font-family: var(--fm); font-size: 10.5px; color: #6E6A60; }
+.nb-header-actions { display: flex; align-items: center; gap: 10px; }
+
+/* A02 · toolbar */
+.nb-toolbar {
+  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
+  padding: 9px 22px; background: var(--nb-sub-paper);
+  border-bottom: 1px solid var(--nb-border);
+}
+.nb-toolbar-btn {
+  background: #FFFFFF; border: 1px solid #D8D2C4; border-radius: 6px;
+  padding: 6px 11px; font-family: var(--fm); font-size: 11.5px; color: var(--nb-muted);
+  transition: border-color 0.15s ease, color 0.15s ease;
+}
+.nb-toolbar-btn:hover { border-color: var(--nb-ink); color: var(--nb-ink); }
+.nb-toolbar-divider { width: 1px; height: 20px; background: var(--nb-border); margin: 0 6px; }
+.nb-toolbar-spacer { flex: 1; }
+.nb-toolbar-count { font-family: var(--fm); font-size: 11px; color: var(--nb-dimmer); }
+
+/* A03 · kernel pill */
+.nb-kernel {
+  display: inline-flex; align-items: center; gap: 7px;
+  background: var(--nb-panel-raise); border: 1px solid #302D22; border-radius: 999px;
+  padding: 6px 13px 6px 11px; font-family: var(--fm); font-size: 11.5px; color: var(--nb-border);
+}
+.nb-kernel-dot { width: 7px; height: 7px; border-radius: 999px; }
+.nb-kernel--idle .nb-kernel-dot { background: #7BD07B; }
+.nb-kernel--busy .nb-kernel-dot {
+  background: var(--nb-yellow);
+  animation: nb-pulse 1.4s ease-in-out infinite;
+}
+.nb-kernel--queued .nb-kernel-dot { background: var(--nb-yellow); }
+.nb-kernel--dead .nb-kernel-dot { background: var(--nb-orange); }
+.nb-kernel--none .nb-kernel-dot { background: #6E6A60; }
+
+/* Buttons shared by chrome */
+.nb-btn-ghost {
+  background: transparent; border: 1px solid #302D22; border-radius: 7px;
+  padding: 7px 13px; font-family: var(--fm); font-size: 11.5px; font-weight: 500;
+  color: var(--nb-border); transition: background 0.15s ease, color 0.15s ease;
+}
+.nb-btn-ghost:hover { background: var(--nb-panel-raise); color: #FFFFFF; }
+.nb-btn-primary {
+  background: var(--nb-yellow); border: none; border-radius: 7px;
+  padding: 8px 15px; font-family: var(--fm); font-size: 11.5px; font-weight: 600;
+  color: var(--nb-ink); transition: background 0.15s ease;
+}
+.nb-btn-primary:hover { background: #FFD44A; }
+
+/* A04 · outline rail */
+.nb-outline {
+  flex: none; width: 216px; align-self: stretch; position: sticky; top: 0;
+  background: var(--nb-sub-paper); border-right: 1px solid var(--nb-border);
+  padding: 22px 18px 30px;
+}
+.nb-outline-label {
+  font-family: var(--fm); font-size: 10px; letter-spacing: 0.16em;
+  text-transform: uppercase; color: #B0A996;
+}
+.nb-outline-link {
+  display: block; font-family: var(--fm); font-size: 12px; padding: 5px 8px;
+  border-radius: 5px; color: var(--nb-muted); text-decoration: none;
+  transition: background 0.15s ease, color 0.15s ease;
+}
+.nb-outline-link:hover { background: var(--nb-surface); color: var(--nb-ink); }
+.nb-outline-link--active { color: var(--nb-ink); font-weight: 600; background: var(--nb-surface); }
+.nb-outline-link[data-depth="0"] { padding-left: 8px; }
+.nb-outline-link[data-depth="1"] { padding-left: 20px; }
+.nb-outline-link[data-depth="2"] { padding-left: 32px; }
+.nb-outline-link[data-depth="3"] { padding-left: 44px; }
+.nb-minimap-row { display: flex; gap: 3px; margin-top: 3px; align-items: flex-end; }
+.nb-minimap-stripe { width: 3px; border-radius: 2px; }
+.nb-minimap-bar { flex: 1; border-radius: 2px; }
+
+/* A05 · repro footer */
+.nb-footer {
+  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
+  padding: 14px 22px; background: var(--nb-sub-paper); border-top: 1px solid var(--nb-border);
+}
+.nb-footer-facts { font-family: var(--fm); font-size: 11px; color: var(--nb-dim); }
+.nb-footer-mid { color: var(--nb-hairline); margin: 0 8px; }
+.nb-footer-link {
+  font-family: var(--fm);
+  font-size: 11px;
+  color: var(--nb-cobalt);
+  text-decoration: none;
+}
+
+/* B06 · gutter prompt */
+.nb-prompt { font-family: var(--fm); font-size: 11.5px; line-height: 1; padding-top: 12px; }
+.nb-prompt--in { color: var(--nb-cobalt); }
+.nb-prompt--running { color: var(--nb-orange); animation: nb-pulse 1.4s ease-in-out infinite; }
+.nb-prompt--idle { color: #B0A996; }
+.nb-prompt--out { color: var(--nb-orange); }
+.nb-prompt--stream { color: #B0A996; }
+.nb-prompt--err { color: var(--nb-rust); }
+.nb-prompt--wgt { color: #B0A996; }
+.nb-prompt--md, .nb-prompt--raw { color: var(--nb-hairline); }
+.nb-prompt--md { padding-top: 6px; }
+.nb-prompt--raw { padding-top: 12px; }
+
+/* B07 · cell states — box-shadow only, never border (avoids layout shift) */
+.nb-panel.is-selected { box-shadow: 0 0 0 2px var(--nb-cobalt); }
+.nb-panel.is-running { box-shadow: 0 0 0 2px var(--nb-orange); }
+.nb-panel.is-error { box-shadow: 0 0 0 1px #6B2E14; }
+.nb-cell.is-editing .nb-gutter { box-shadow: inset 2px 0 0 var(--nb-cobalt); }
+
+/* B08 · hover toolbar (panel header) */
+.nb-panel-head {
+  display: flex; justify-content: space-between; align-items: center;
+  padding: 8px 16px; border-bottom: 1px solid var(--nb-panel-raise);
+  opacity: 0; transition: opacity 0.15s ease;
+}
+.nb-cell:hover .nb-panel-head, .nb-cell:focus-within .nb-panel-head { opacity: 1; }
+.nb-panel-lang {
+  font-family: var(--fm); font-size: 10px; text-transform: uppercase;
+  letter-spacing: 0.1em; color: #6E6A60;
+}
+.nb-panel-actions { display: flex; gap: 6px; }
+.nb-panel-btn {
+  background: transparent; border: 1px solid var(--nb-panel-edge); border-radius: 4px;
+  padding: 3px 8px; font-family: var(--fm); font-size: 10px; color: var(--nb-dimmer);
+  transition: color 0.15s ease, border-color 0.15s ease;
+}
+.nb-panel-btn:hover { color: var(--nb-paper); border-color: #4A473C; }
+.nb-panel-btn--interrupt { color: var(--nb-orange); border-color: #4A2A1C; }
+.nb-panel-btn--interrupt:hover { background: #2A1610; }
+
+/* B09 · collapse affordances */
+.nb-collapse {
+  display: flex; align-items: center; gap: 8px; width: 100%;
+  background: var(--nb-row-rule); border: 1px dashed #D8D2C4; border-radius: 8px;
+  padding: 9px 14px; font-family: var(--fm); font-size: 11.5px; color: var(--nb-faint);
+  transition: border-color 0.15s ease, color 0.15s ease;
+}
+.nb-collapse:hover { border-color: var(--nb-ink); color: var(--nb-ink); }
+.nb-collapse-caret { font-size: 9px; }
+.nb-collapse-spacer { flex: 1; }
+.nb-collapse-show { color: #B0A996; }
+
+/* B10 · cell tags */
+.nb-tag { font-family: var(--fm); font-size: 10px; border-radius: 4px; padding: 2px 7px; }
+.nb-tag--cached { color: #B9E08C; background: #1E2A18; }
+.nb-tag--slow { color: var(--nb-yellow); background: #2E2612; }
+.nb-tag--skip { color: var(--nb-dimmer); background: var(--nb-panel-raise); }
+.nb-tag--hide-input { color: var(--nb-ink); background: var(--nb-yellow); font-weight: 600; }
+.nb-activity {
+  display: inline-flex; align-items: center; gap: 5px; margin: 0 8px 8px 0;
+  border-radius: 999px; padding: 3px 8px; color: var(--nb-cobalt); background: #EDF3FF;
+  font-family: var(--fm); font-size: 10px; font-weight: 600;
+}
+.nb-panel-head > .nb-activity { margin: 0 8px; }
+.nb-activity--executing { color: var(--nb-orange); background: #FFF2EA; }
+.nb-activity-caret {
+  width: 2px; height: 12px; background: currentColor; animation: nb-pulse 1s step-end infinite;
+}
+
+/* B11 · execution meta */
+.nb-exec-meta {
+  margin-top: 8px; font-family: var(--fm); font-size: 10.5px; color: #B0A996;
+}
+.nb-exec-mid { color: var(--nb-border); margin: 0 8px; }
+.nb-exec-ooo {
+  font-family: var(--fm); font-size: 10px; color: var(--nb-rust);
+  background: var(--nb-err-bg); border-radius: 4px; padding: 2px 7px; margin-left: 8px;
+}
+
+/* MR01 · portable all-column inspector */
+.mr-columns {
+  overflow: hidden; background: #FFFFFF; border: 1px solid var(--nb-border);
+  border-radius: 12px;
+}
+.mr-columns-head {
+  min-height: 78px; display: flex; align-items: center; justify-content: space-between;
+  gap: 20px; padding: 15px 18px; border-bottom: 1px solid var(--nb-border);
+}
+.mr-columns-head > div { display: flex; min-width: 0; flex-direction: column; gap: 7px; }
+.mr-columns-head span, .mr-col-label {
+  color: var(--nb-dim); font-family: var(--fm); font-size: 10px; font-weight: 600;
+  letter-spacing: 0.09em; text-transform: uppercase;
+}
+.mr-columns-head > div strong { font-family: var(--fm); font-size: 18px; font-weight: 600; }
+.mr-columns-head label { display: flex; align-items: center; gap: 10px; }
+.mr-columns-head select {
+  min-width: 190px; height: 40px; padding: 0 36px 0 12px; color: var(--nb-ink);
+  background: var(--nb-sub-paper); border: 1px solid var(--nb-hairline); border-radius: 8px;
+  font-family: var(--fm); font-size: 12.5px;
+}
+.mr-col-facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
+.mr-col-fact {
+  min-height: 104px; display: flex; justify-content: center; flex-direction: column; gap: 8px;
+  padding: 17px 16px; border-left: 1px solid var(--nb-border);
+}
+.mr-col-fact:first-child { border-left: 0; }
+.mr-col-fact strong {
+  overflow: hidden; color: var(--nb-ink); font-family: var(--fm); font-size: 19px;
+  font-weight: 500; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap;
+}
+.mr-col-fact small { color: var(--nb-muted); font-size: 11.5px; line-height: 1.3; }
+.mr-col-chart { padding: 20px 20px 8px; border-top: 1px solid var(--nb-border); }
+.mr-col-chart header { display: flex; align-items: baseline; gap: 10px; }
+.mr-col-chart header strong { font-size: 15px; font-weight: 600; }
+.mr-col-chart header span { color: var(--nb-muted); font-size: 11.5px; }
+.mr-col-chart svg { display: block; width: 100%; height: auto; margin-top: 6px; overflow: hidden; }
+.mr-col-chart svg rect { fill: var(--nb-cobalt); stroke: none; }
+.mr-col-chart svg line { stroke: var(--nb-hairline); stroke-width: 1; }
+.mr-col-chart svg text { fill: var(--nb-muted); stroke: none; font: 11px var(--fm); }
+.mr-col-chart svg .mr-col-bar-value { fill: var(--nb-body); font-weight: 600; }
+.mr-col-chart-data {
+  position: absolute; display: block; width: 1px; max-width: 1px; height: 1px;
+  padding: 0; margin: -1px; overflow: hidden; contain: strict;
+  clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0;
+}
+.mr-col-chart--empty { padding-bottom: 20px; }
+.mr-col-empty {
+  margin-top: 14px; padding: 20px; color: var(--nb-muted); background: var(--nb-sub-paper);
+  border-radius: 8px; font-size: 13px;
+}
+.mr-col-lineage {
+  min-height: 50px; display: flex; align-items: center; gap: 28px; padding: 0 18px;
+  color: var(--nb-muted); background: var(--nb-sub-paper); border-top: 1px solid var(--nb-border);
+  font-size: 11.5px;
+}
+.mr-col-lineage strong { color: var(--nb-body); font-family: var(--fm); font-weight: 500; }
+.mr-columns-empty {
+  padding: 18px; color: var(--nb-muted); border: 1px solid var(--nb-border); border-radius: 10px;
+}
+@media (max-width: 900px) {
+  .mr-col-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .mr-col-fact { border-top: 1px solid var(--nb-border); }
+  .mr-columns-head { align-items: flex-start; flex-direction: column; }
+  .mr-columns-head label, .mr-columns-head select { width: 100%; }
+  .mr-col-lineage { align-items: flex-start; flex-direction: column; gap: 6px; padding: 14px 18px; }
+}
+
+/* C12 · code input — six-color syntax theme is section-2, pinned to this component */
+.nb-panel { border-radius: 10px; overflow: hidden; }
+.nb-code { background: var(--nb-panel); border-radius: 10px; }
+.nb-code--welded { border-radius: 10px 10px 0 0; }
+.nb-code pre {
+  margin: 0; padding: 15px 18px; font-family: var(--fm); font-size: 13px; line-height: 1.75;
+  color: #CFC9BB; overflow-x: auto;
+}
+.nb-code--head pre { padding: 16px 18px; }
+.nb-code[tabindex]:focus-visible { outline: 2px solid var(--nb-yellow); outline-offset: 2px; }
+.nb-lineno {
+  color: #6E6A60;
+  text-align: right;
+  padding-right: 14px;
+  border-right: 1px solid #232118;
+}
+.nb-tok-base { color: #CFC9BB; }
+.nb-tok-kw { color: #6E97FF; }
+.nb-tok-str { color: #FFC613; }
+.nb-tok-fn { color: #FF8A5B; }
+.nb-tok-num { color: #B9E08C; }
+.nb-tok-com { color: #6E6A60; }
+
+/* C13 · markdown */
+.nb-md { color: var(--nb-body); }
+.nb-md h1 {
+  font-size: 34px;
+  font-weight: 700;
+  line-height: 1.1;
+  letter-spacing: -0.025em;
+  color: var(--nb-ink);
+  margin: 0 0 14px;
+}
+.nb-md h2 {
+  font-size: 25px;
+  font-weight: 600;
+  line-height: 1.15;
+  letter-spacing: -0.02em;
+  color: var(--nb-ink);
+  margin: 0 0 12px;
+}
+.nb-md h3 {
+  font-size: 19px;
+  font-weight: 600;
+  line-height: 1.25;
+  letter-spacing: -0.01em;
+  color: var(--nb-ink);
+  margin: 0 0 12px;
+}
+.nb-md h4 {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--nb-ink);
+  margin: 0 0 12px;
+}
+.nb-md p {
+  color: var(--nb-body);
+  margin: 0 0 16px;
+  max-width: 62ch;
+  text-wrap: pretty;
+  line-height: 1.68;
+}
+.nb-md ul, .nb-md ol {
+  padding-left: 22px;
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+  margin: 0 0 16px;
+  max-width: 60ch;
+  line-height: 1.6;
+}
+.nb-md code {
+  font-family: var(--fm);
+  font-size: 13.5px;
+  color: var(--nb-ink);
+  background: var(--nb-row-rule);
+  border: 1px solid #E7E2D5;
+  border-radius: 4px;
+  padding: 1.5px 5px;
+}
+.nb-md blockquote {
+  padding: 2px 0 2px 20px;
+  border-left: 3px solid var(--nb-yellow);
+  color: var(--nb-muted);
+  font-style: italic;
+  font-size: 16px;
+  line-height: 1.66;
+  max-width: 58ch;
+  margin: 0 0 16px;
+}
+.nb-md blockquote footer {
+  font-family: var(--fm);
+  font-size: 11.5px;
+  color: var(--nb-dimmer);
+  margin-top: 9px;
+  font-style: normal;
+}
+.nb-md-table {
+  border: 1px solid var(--nb-border);
+  border-radius: 10px;
+  overflow: hidden;
+  border-collapse: separate;
+  border-spacing: 0;
+  width: 100%;
+  margin: 0 0 16px;
+}
+.nb-md-table thead th {
+  background: var(--nb-sub-paper);
+  font-family: var(--fm);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--nb-dim);
+  font-weight: 600;
+  padding: 10px 16px;
+  text-align: left;
+}
+.nb-md-table tbody td {
+  font-size: 14px;
+  color: var(--nb-ink);
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--nb-row-rule);
+}
+.nb-md-table tbody tr:last-child td { border-bottom: none; }
+.nb-md-table td.nb-num {
+  text-align: right;
+  font-family: var(--fm);
+  font-variant-numeric: tabular-nums;
+}
+.nb-md hr { border: none; border-top: 1px solid var(--nb-border); margin: 0 0 20px; }
+.nb-md img { max-width: 100%; border-radius: 10px; border: 1px solid var(--nb-border); }
+.nb-md a { color: var(--nb-cobalt); text-decoration: none; }
+.nb-md a:hover { color: #1E48B8; }
+
+/* C14 · math (v1 deviation: TeX source in the display well) */
+.nb-math {
+  background: var(--nb-sub-paper); border: 1px solid var(--nb-border); border-radius: 10px;
+  padding: 20px 24px; text-align: center; margin: 0 0 18px; overflow-x: auto; white-space: nowrap;
+}
+.nb-math-label {
+  display: block; font-family: var(--fm); font-size: 10px; text-transform: uppercase;
+  letter-spacing: 0.12em; color: #C3BCA9; text-align: left; margin-bottom: 8px;
+}
+
+/* C15 · raw cell */
+.nb-raw {
+  background: var(--nb-sub-paper);
+  border: 1px solid var(--nb-surface);
+  border-radius: 10px;
+  padding: 14px var(--nb-inset-x);
+}
+.nb-raw-label {
+  font-family: var(--fm);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: #C3BCA9;
+}
+.nb-raw pre {
+  margin: 8px 0 0;
+  font-family: var(--fm);
+  font-size: 12.5px;
+  line-height: 1.7;
+  color: var(--nb-dimmer);
+  white-space: pre-wrap;
+}
+
+/* D · output wells (shared base) */
+.nb-well {
+  background: var(--nb-sub-paper);
+  border: 1px solid var(--nb-border);
+  border-radius: 10px;
+  padding: var(--nb-inset-y) var(--nb-inset-x);
+}
+.nb-well--welded { border-top: none; border-radius: 0 0 10px 10px; margin-top: 0; }
+.nb-out-label {
+  font-family: var(--fm);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: #B0A996;
+  margin-bottom: 8px;
+}
+
+/* D16 · stdout */
+.nb-stdout pre {
+  margin: 0;
+  font-family: var(--fm);
+  font-size: 12.5px;
+  line-height: 1.7;
+  color: var(--nb-body);
+  white-space: pre-wrap;
+}
+/* D17 · stderr / warnings */
+.nb-stderr { padding-top: 11px; border-top: 1px dashed var(--nb-border); }
+.nb-stderr .nb-out-label { color: #C98A6A; }
+.nb-stderr pre {
+  margin: 0;
+  font-family: var(--fm);
+  font-size: 12.5px;
+  line-height: 1.7;
+  color: var(--nb-rust);
+  white-space: pre-wrap;
+}
+.nb-sgr-bold { font-weight: 600; }
+/* D18 · execute_result plain text */
+.nb-result-plain {
+  margin: 0;
+  padding: 2px 0;
+  font-family: var(--fm);
+  font-size: 12.5px;
+  line-height: 1.7;
+  color: var(--nb-body);
+  white-space: pre-wrap;
+}
+/* D19 · DataFrame */
+.nb-df {
+  border: 1px solid var(--nb-border);
+  border-radius: 10px;
+  overflow: hidden;
+  background: #FFFFFF;
+}
+.nb-df-scroll { overflow-x: auto; }
+.nb-df table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  font-family: var(--fm);
+  font-size: 12.5px;
+}
+.nb-df th {
+  background: var(--nb-sub-paper);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  font-weight: 600;
+  color: var(--nb-dim);
+  padding: 10px var(--nb-inset-x);
+  border-bottom: 1px solid var(--nb-border);
+  white-space: nowrap;
+  text-align: left;
+}
+.nb-df td {
+  padding: 9px var(--nb-inset-x);
+  border-bottom: 1px solid var(--nb-row-rule);
+  color: var(--nb-ink);
+}
+.nb-df tr:last-child td { border-bottom: none; }
+.nb-df td.nb-df-idx { color: #B0A996; }
+.nb-df td.nb-df-str { white-space: nowrap; }
+.nb-df td.nb-df-num { text-align: right; font-variant-numeric: tabular-nums; }
+.nb-df-pos { color: var(--nb-cobalt); }
+.nb-df-neg { color: var(--nb-rust); }
+.nb-df-zero { color: var(--nb-dimmer); }
+.nb-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--nb-body);
+  font-weight: 600;
+  white-space: nowrap;
+}
+.nb-status::before {
+  content: "";
+  width: 6px;
+  height: 6px;
+  flex: 0 0 6px;
+  border-radius: 50%;
+  background: var(--nb-dim);
+}
+.nb-status--pass::before { background: var(--nb-success); }
+.nb-status--fail::before { background: var(--nb-rust); }
+.nb-status--pending::before,
+.nb-status--warning::before,
+.nb-status--running::before { background: var(--nb-orange); }
+.nb-df-ellipsis { text-align: center; color: var(--nb-hairline); }
+.nb-df-caption {
+  background: var(--nb-sub-paper);
+  border-top: 1px solid var(--nb-border);
+  padding: 9px var(--nb-inset-x);
+  font-family: var(--fm);
+  font-size: 11px;
+  color: var(--nb-dim);
+}
+
+/* D20 · figure */
+.nb-fig {
+  border: 1px solid var(--nb-border);
+  border-radius: 10px;
+  background: #FFFFFF;
+  padding: 20px 22px 16px;
+}
+.nb-fig-title { font-size: 14.5px; font-weight: 600; color: var(--nb-ink); }
+.nb-fig-sub {
+  font-family: var(--fm);
+  font-size: 10.5px;
+  color: var(--nb-dimmer);
+  margin-bottom: 16px;
+}
+.nb-fig img { width: 100%; height: auto; display: block; }
+.nb-fig-legend {
+  margin-top: 14px;
+  padding-top: 13px;
+  border-top: 1px solid var(--nb-row-rule);
+  display: flex;
+  gap: 20px;
+  flex-wrap: wrap;
+}
+.nb-fig-legend span { font-family: var(--fm); font-size: 11px; color: var(--nb-muted); }
+
+/* D21 · rich HTML */
+.nb-rich {
+  border: 1px solid var(--nb-border);
+  border-radius: 10px;
+  overflow: hidden;
+}
+.nb-rich-head {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  background: var(--nb-sub-paper);
+  border-bottom: 1px solid var(--nb-border);
+  padding: 9px var(--nb-inset-x);
+}
+.nb-rich-mime {
+  font-family: var(--fm);
+  font-size: 10px;
+  text-transform: uppercase;
+  color: #B0A996;
+}
+.nb-rich-cls { font-family: var(--fm); font-size: 10px; color: var(--nb-dim); }
+.nb-rich-body { padding: var(--nb-inset-y) var(--nb-inset-x); }
+
+/* D22 · JSON viewer */
+.nb-json {
+  border: 1px solid var(--nb-border);
+  border-radius: 10px;
+  overflow: hidden;
+}
+.nb-json-head {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  background: var(--nb-sub-paper);
+  border-bottom: 1px solid var(--nb-border);
+  padding: 9px var(--nb-inset-x);
+}
+.nb-json-body {
+  padding: 14px var(--nb-inset-x);
+  font-family: var(--fm);
+  font-size: 12.5px;
+  line-height: 1.85;
+}
+.nb-json-caret { color: #B0A996; }
+.nb-json-key { color: var(--nb-cobalt); }
+.nb-json-str { color: var(--nb-rust); }
+.nb-json-num { color: var(--nb-ink); }
+.nb-json-punct { color: #B0A996; }
+
+/* D23 · traceback */
+.nb-tb {
+  border: 1px solid var(--nb-border);
+  background: var(--nb-paper);
+  border-radius: 10px;
+  overflow: hidden;
+}
+.nb-tb-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: var(--nb-sub-paper);
+  border-bottom: 1px solid var(--nb-border);
+  padding: 10px var(--nb-inset-x);
+}
+.nb-tb-name { font-family: var(--fm); font-size: 12px; font-weight: 700; color: var(--nb-ink); }
+.nb-tb-label { font-family: var(--fm); font-size: 10.5px; color: var(--nb-rust); }
+.nb-tb-body {
+  margin: 0;
+  padding: 14px var(--nb-inset-x);
+  font-family: var(--fm);
+  font-size: 12.5px;
+  line-height: 1.8;
+  color: var(--nb-body);
+  overflow-x: auto;
+}
+.nb-tb-loc { color: var(--nb-rust); }
+.nb-tb-arrow { color: #B0A996; }
+.nb-tb-final { color: var(--nb-rust); font-weight: 600; }
+
+/* D24 · progress */
+.nb-progress { display: flex; align-items: center; gap: 10px; }
+.nb-progress-label {
+  font-family: var(--fm);
+  font-size: 11.5px;
+  color: var(--nb-muted);
+  min-width: 62px;
+}
+.nb-progress-track {
+  flex: 1;
+  height: 9px;
+  background: var(--nb-surface);
+  border-radius: 999px;
+  overflow: hidden;
+}
+.nb-progress-fill { height: 100%; background: var(--nb-cobalt); }
+.nb-progress-fill--indeterminate { width: 30%; background: var(--nb-yellow); }
+.nb-progress-stat {
+  font-family: var(--fm);
+  font-size: 11.5px;
+  color: var(--nb-ink);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+.nb-scrolled {
+  border: 1px solid var(--nb-border);
+  border-radius: 8px;
+  background: var(--nb-sub-paper);
+  max-height: 96px;
+  overflow-y: auto;
+}
+.nb-scrolled pre {
+  margin: 0;
+  padding: 11px 14px;
+  font-family: var(--fm);
+  font-size: 12px;
+  line-height: 1.75;
+  color: var(--nb-faint);
+}
+.nb-scrolled-note { font-family: var(--fm); font-size: 10.5px; color: #B0A996; margin-top: 6px; }
+
+/* E25 · widgets */
+.nb-widget {
+  border: 1px solid var(--nb-border);
+  border-radius: 10px;
+  overflow: hidden;
+}
+.nb-widget-controls {
+  padding: 18px var(--nb-inset-x);
+  display: flex;
+  flex-direction: column;
+  gap: var(--nb-section-gap);
+}
+.nb-widget-row { display: flex; gap: 14px; align-items: center; }
+.nb-widget-label {
+  font-family: var(--fm);
+  font-size: 12px;
+  color: var(--nb-muted);
+  min-width: 74px;
+  text-align: right;
+}
+.nb-slider-track { width: 100%; height: 4px; background: var(--nb-border); border-radius: 999px; }
+.nb-slider-fill { height: 4px; background: var(--nb-cobalt); border-radius: 999px; }
+.nb-slider-thumb {
+  width: 16px;
+  height: 16px;
+  border-radius: 999px;
+  background: #FFFFFF;
+  border: 2px solid var(--nb-cobalt);
+}
+.nb-widget-value {
+  font-family: var(--fm);
+  font-size: 12px;
+  color: var(--nb-ink);
+  font-variant-numeric: tabular-nums;
+}
+.nb-toggle {
+  display: inline-flex;
+  border: 1px solid #D8D2C4;
+  border-radius: 7px;
+  overflow: hidden;
+}
+.nb-toggle-seg {
+  padding: 6px 14px;
+  font-family: var(--fm);
+  font-size: 12px;
+  color: var(--nb-muted);
+  background: #FFFFFF;
+}
+.nb-toggle-seg.is-active { color: #FFFFFF; background: var(--nb-ink); }
+.nb-widget-btn {
+  background: var(--nb-yellow);
+  border: none;
+  border-radius: 7px;
+  padding: 7px 15px;
+  font-family: var(--fm);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--nb-ink);
+}
+.nb-checkbox { width: 16px; height: 16px; border: 1px solid #D8D2C4; border-radius: 4px; }
+.nb-checkbox.is-checked { background: var(--nb-cobalt); }
+.nb-widget.is-frozen .nb-widget-controls { opacity: 0.62; pointer-events: none; }
+
+/* E26 · stale-output banner */
+.nb-stale {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  background: var(--nb-surface);
+  border-bottom: 1px solid var(--nb-border);
+  padding: 9px var(--nb-inset-x);
+}
+.nb-stale-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--nb-dimmer); }
+.nb-stale-msg { font-family: var(--fm); font-size: 11px; color: var(--nb-faint); }
+.nb-stale-spacer { flex: 1; }
+.nb-stale-action { font-family: var(--fm); font-size: 11px; color: var(--nb-cobalt); }
+
+/* F27 · provenance callout */
+.nb-prov { background: var(--nb-ink); border-radius: 12px; padding: 20px 22px; }
+.nb-prov-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
+.nb-prov-title {
+  font-family: var(--fm);
+  font-size: 10.5px;
+  text-transform: uppercase;
+  letter-spacing: 0.16em;
+  font-weight: 600;
+  color: var(--nb-yellow);
+}
+.nb-prov-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 16px 24px;
+}
+.nb-prov-key {
+  font-family: var(--fm);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: #6E6A60;
+}
+.nb-prov-val { font-family: var(--fm); font-size: 12.5px; color: var(--nb-paper); }
+.nb-prov-sub { color: var(--nb-dimmer); }
+
+/* F28 · leakage warning */
+.nb-leak {
+  background: var(--nb-warn-bg);
+  border: 1px solid var(--nb-warn-border);
+  border-radius: 10px;
+  padding: 15px 18px;
+  margin-top: 10px;
+}
+.nb-leak-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
+.nb-leak-badge {
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  background: var(--nb-orange);
+  color: #FFFFFF;
+  font-family: var(--fm);
+  font-size: 11px;
+  font-weight: 700;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.nb-leak-title {
+  font-family: var(--fm);
+  font-size: 10.5px;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  font-weight: 600;
+  color: var(--nb-warn-title);
+}
+.nb-leak-body { font-size: 14.5px; line-height: 1.6; color: var(--nb-warn-ink); max-width: 66ch; }
+.nb-leak-body code {
+  font-family: var(--fm);
+  font-size: 13px;
+  background: #F7E8CC;
+  border-radius: 4px;
+  padding: 1px 5px;
+}
+
+/* F29 · entity chips */
+.nb-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  vertical-align: 1px;
+  font-family: var(--fm);
+  font-size: 12.5px;
+  color: var(--nb-ink);
+  background: var(--nb-surface);
+  border: 1px solid var(--nb-border);
+  border-radius: 5px;
+  padding: 1px 7px;
+}
+.nb-chip-dot { width: 5px; height: 5px; border-radius: 999px; }
+.nb-chip--station .nb-chip-dot { background: var(--nb-cobalt); }
+.nb-chip--dataset .nb-chip-dot { background: var(--nb-yellow); }
+.nb-chip--run .nb-chip-dot { background: var(--nb-orange); }
+.nb-chip--source .nb-chip-dot { background: var(--nb-faint); }
+
+/* Unknown mimetype well · spec section 4 */
+.nb-unsupported {
+  background: var(--nb-sub-paper);
+  border: 1px solid var(--nb-border);
+  border-radius: 10px;
+  padding: var(--nb-inset-y) var(--nb-inset-x);
+  margin-top: 10px;
+  font-family: var(--fm);
+  font-size: 11px;
+  color: var(--nb-dimmer);
+}
+
+/* Scaffold pending well — visible integration seam until a component lands */
+.nb-pending {
+  background: var(--nb-sub-paper);
+  border: 1px dashed #D8D2C4;
+  border-radius: 8px;
+  padding: 9px 14px;
+  margin-top: 10px;
+  font-family: var(--fm);
+  font-size: 11px;
+  color: var(--nb-faint);
+}
+
+/* Accessibility · spec section 5 */
+.nb-shell :focus-visible { outline: 2px solid var(--nb-cobalt); outline-offset: 2px; }
+.nb-header :focus-visible, .nb-code:focus-visible, .nb-panel :focus-visible {
+  outline-color: var(--nb-yellow);
+}
+""".strip()
+
+# --alias: components reference var(--fm) as a shorthand for the mono stack; declared once.
+_FONT_ALIAS = f".nb-shell{{--fm:{FONT_MONO};--fs:{FONT_SANS};}}"
+
+# Integration layer: the backing rules for classes and css-vars the component modules emit but that
+# the base block above does not define.  Every rule here is additive — it resolves a hook a
+# component already emits and overrides no earlier selector — and each carries the component id it
+# serves, so a class can be traced back to its emitter.
+_INTEGRATION_CSS = """
+/* Styler cobalt gradient ramp · D21 remaps background-color hexes onto these four vars */
+.nb-shell {
+  --nb-styler-g0: #F5F8FE; --nb-styler-g1: #EAF0FD;
+  --nb-styler-g2: #DEE8FB; --nb-styler-g3: #CBDBF9;
+}
+/* C12/D · weld the first stdout well flush to the code panel (document sets nb-code--welded on
+   the panel; the well's own markup is untouched, so the seam is closed purely by adjacency) */
+.nb-code--welded + .nb-well { border-top: none; border-radius: 0 0 10px 10px; margin-top: 0; }
+/* B08 · panel-head sub-parts (frame emits both) */
+.nb-panel-head-left { display: flex; align-items: center; gap: 8px; }
+.nb-panel-head--static { opacity: 1; }
+/* A01 · header two-line block — min-width:0 lets .nb-header-file ellipsis clip */
+.nb-header-block { display: flex; flex-direction: column; min-width: 0; }
+/* A02 · Run button rest accent (connected toolbar only) */
+.nb-toolbar-btn--run { display: inline-flex; align-items: center; gap: 6px; color: var(--nb-ink); }
+/* A04 · minimap stripe/bar type tints + length-bucket heights (was inline; now class-driven) */
+.nb-minimap-stripe--md { background: var(--nb-ink); }
+.nb-minimap-stripe--code { background: var(--nb-cobalt); }
+.nb-minimap-stripe--err { background: var(--nb-orange); }
+.nb-minimap-stripe--raw { background: var(--nb-hairline); }
+.nb-minimap-bar--md { background: var(--nb-surface); }
+.nb-minimap-bar--code { background: var(--nb-minimap-code); }
+.nb-minimap-bar--err { background: var(--nb-minimap-err); }
+.nb-minimap-bar--raw { background: var(--nb-row-rule); }
+.nb-minimap-h-short { height: 13px; }
+.nb-minimap-h-medium { height: 22px; }
+.nb-minimap-h-long { height: 30px; }
+/* A04 · a small top gap before the second outline label when a heading tree precedes it */
+.nb-outline-label--cells { margin-top: 20px; }
+/* C12 · opt-in line-number rail (off by default; user-select:none keeps it out of copy) */
+.nb-code-lines { display: flex; align-items: stretch; }
+.nb-code-lines > pre[tabindex] { flex: 1; min-width: 0; }
+.nb-lineno {
+  font-family: var(--fm); font-size: 12px; line-height: 1.75; margin: 0;
+  user-select: none; -webkit-user-select: none; white-space: pre;
+}
+/* C13 · fenced code (paper-ground panel) and image alt-caption fallback */
+.nb-md-fence {
+  background: var(--nb-sub-paper); border: 1px solid var(--nb-border); border-radius: 8px;
+  padding: 12px 14px; margin: 0 0 16px; overflow-x: auto;
+  font-family: var(--fm); font-size: 12.5px; line-height: 1.7; color: var(--nb-body);
+  white-space: pre;
+}
+.nb-md-caption {
+  display: block; font-family: var(--fm); font-size: 11px; color: var(--nb-dimmer);
+  margin: 0 0 16px;
+}
+/* D19 · wide-frame index freeze (>15 data columns scroll with a sticky index) */
+.nb-df--wide td.nb-df-idx { position: sticky; left: 0; background: #FFFFFF; }
+.nb-df--wide thead th:first-child { position: sticky; left: 0; background: var(--nb-sub-paper); }
+/* D23 · traceback source mini-theme (keyword / string / comment) */
+.nb-tb-kw { color: #B85C2E; }
+.nb-tb-str { color: #8A5A16; }
+.nb-tb-com { color: #C08A5A; }
+/* E25 · checked-checkbox tick upgraded to pure white (wins over the SVG presentation attr) */
+.nb-checkbox.is-checked svg { stroke: #FFFFFF; }
+.nb-stage-observation{
+  overflow:hidden;border:1px solid var(--nb-border);border-radius:10px;background:#fff
+}
+.nb-stage-observation>header{
+  display:flex;flex-wrap:wrap;gap:var(--nb-stack-gap);align-items:baseline;
+  padding:var(--nb-inset-y) var(--nb-inset-x);background:var(--nb-sub-paper)
+}
+.nb-stage-observation>header span,.nb-stage-observation footer{
+  color:var(--nb-dimmer);font:11px/1.4 var(--fm)
+}
+.nb-stage-observation>header strong,.nb-stage-observation>header small{
+  min-width:0;overflow-wrap:anywhere
+}
+.nb-stage-observation>header small{
+  margin-left:auto;color:var(--nb-dimmer);font:10px/1.4 var(--fm)
+}
+.nb-stage-observation dl{display:flex;flex-wrap:wrap;column-gap:24px;row-gap:var(--nb-inset-y);
+  margin:0;padding:var(--nb-inset-y) var(--nb-inset-x)}
+.nb-stage-observation dl div{display:grid;gap:3px}
+.nb-stage-observation dt{color:var(--nb-dimmer);font-size:11px}
+.nb-stage-observation dd{margin:0;font:600 13px/1.3 var(--fm)}
+.nb-stage-table{
+  overflow:auto;border-top:1px solid var(--nb-border);border-bottom:1px solid var(--nb-border)
+}
+.nb-stage-table table{width:100%;border-collapse:collapse}
+.nb-stage-table th,.nb-stage-table td{
+  padding:9px var(--nb-inset-x);border-right:1px solid var(--nb-border);
+  text-align:left;white-space:nowrap
+}
+.nb-stage-table th{position:sticky;top:0;background:var(--nb-sub-paper);font-size:11px}
+.nb-stage-table td{font:12px/1.4 var(--fm)}
+.nb-stage-observation footer,.nb-stage-policy{
+  display:block;margin:0;padding:9px var(--nb-inset-x)
+}
+.nb-stage-evidence{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
+  border-top:1px solid var(--nb-border)}
+.nb-stage-evidence>section,.nb-stage-window{min-width:0;padding:var(--nb-section-gap);
+  border-right:1px solid var(--nb-border);border-bottom:1px solid var(--nb-border)}
+.nb-stage-window summary{cursor:pointer;color:var(--nb-body);font-size:12px;font-weight:600}
+.nb-stage-window p{margin:var(--nb-stack-gap) 0 var(--nb-inset-y);color:var(--nb-muted);
+  font-size:12px;overflow-wrap:anywhere}
+.nb-stage-window .nb-stage-table{margin-top:var(--nb-stack-gap)}
+.nb-stage-evidence h4{margin:0 0 var(--nb-stack-gap);color:var(--nb-dim);
+  font:600 10px/1.4 var(--fm);
+  letter-spacing:.1em;text-transform:uppercase}
+.nb-stage-schema,.nb-stage-findings,.nb-stage-lineage{
+  display:grid;gap:var(--nb-stack-gap);margin:0;padding:0;list-style:none
+}
+.nb-stage-schema li,.nb-stage-lineage li{display:grid;
+  grid-template-columns:minmax(90px,.7fr) minmax(0,1fr);gap:4px 10px;font-size:12px}
+.nb-stage-schema span,.nb-stage-lineage span,.nb-stage-lineage small{overflow-wrap:anywhere;
+  color:var(--nb-muted);font:11px/1.4 var(--fm)}
+.nb-stage-lineage small{grid-column:2}.nb-stage-findings li{display:grid;
+  grid-template-columns:auto minmax(0,1fr) auto;gap:8px;font-size:12px}
+.nb-stage-findings .is-warning strong,.nb-stage-findings .is-error strong{color:var(--nb-rust)}
+.nb-stage-findings small{color:var(--nb-dimmer)}.nb-stage-audit{grid-column:1/-1}
+.nb-stage-audit p{margin:3px 0;color:var(--nb-muted);font-size:12px}
+.nb-stage-audit code{display:block;overflow:hidden;color:var(--nb-dimmer);
+  font:10px/1.4 var(--fm);text-overflow:ellipsis}
+.nb-stage-operation{grid-column:1/-1;background:var(--nb-sub-paper)}
+.nb-stage-operation p{margin:0 0 6px;color:var(--nb-muted);font-size:12px}
+.nb-stage-operation code{display:block;overflow-wrap:anywhere;font:11px/1.45 var(--fm)}
+.nb-source-observation{
+  overflow:hidden;border:1px solid var(--nb-border);border-radius:10px;background:#fff
+}
+.nb-source-observation>header{
+  display:flex;flex-wrap:wrap;gap:var(--nb-stack-gap);align-items:baseline;
+  padding:var(--nb-inset-y) var(--nb-inset-x);background:var(--nb-sub-paper)
+}
+.nb-source-observation>header span,.nb-source-observation>header small{
+  color:var(--nb-dimmer);font:11px/1.4 var(--fm)
+}
+.nb-source-observation>header strong,.nb-source-observation>header small{
+  min-width:0;overflow-wrap:anywhere
+}
+.nb-source-observation>header small{margin-left:auto}
+.nb-source-observation dl{display:flex;flex-wrap:wrap;column-gap:24px;
+  row-gap:var(--nb-inset-y);margin:0;padding:var(--nb-inset-y) var(--nb-inset-x)}
+.nb-source-observation dl div{display:grid;gap:3px}
+.nb-source-observation dt{color:var(--nb-dimmer);font-size:11px}
+.nb-source-observation dd{margin:0;font:600 13px/1.3 var(--fm)}
+.nb-source-columns{
+  display:flex;flex-wrap:wrap;gap:var(--nb-stack-gap);margin:0;
+  padding:0 var(--nb-inset-x) var(--nb-inset-y);list-style:none
+}
+.nb-source-columns code{
+  padding:3px 6px;background:var(--nb-sub-paper);border-radius:4px;font:11px/1.4 var(--fm)
+}
+.nb-source-observation footer{
+  display:block;padding:9px var(--nb-inset-x);border-top:1px solid var(--nb-border)
+}
+.nb-source-observation footer code{color:var(--nb-dimmer);font:10px/1.4 var(--fm)}
+@container (max-width:699px){
+  .nb-stage-evidence{grid-template-columns:minmax(0,1fr)}
+  .nb-stage-audit{grid-column:auto}
+  .nb-stage-observation>header small,.nb-source-observation>header small{
+    width:100%;margin-left:0
+  }
+  .nb-stage-findings li{grid-template-columns:minmax(96px,auto) minmax(0,1fr)}
+  .nb-stage-findings small{grid-column:2}
+}
+""".strip()
+
+# Container-query breakpoints.
+_BREAKPOINTS = """
+@container (max-width: 1099px) { .nb-outline { display: none; } }
+@container (max-width: 799px) {
+  .nb-cell { grid-template-columns: 44px minmax(0, 1fr); }
+  .nb-io { margin-left: -44px; grid-template-columns: 44px minmax(0, 1fr); }
+}
+@container (max-width: 559px) {
+  .nb-cell { grid-template-columns: minmax(0, 1fr); }
+  .nb-gutter { grid-column: 1; display: flex; gap: 10px; }
+  .nb-content { grid-column: 1; }
+  .nb-io { margin-left: 0; grid-template-columns: minmax(0, 1fr); }
+  .nb-io-gutter, .nb-io-body { grid-column: 1; }
+  .nb-code, .nb-panel { border-radius: 0; }
+}
+""".strip()
+
+# Print.
+_PRINT = """
+@media print {
+  .nb-shell { border: none; box-shadow: none; }
+  .nb-outline, .nb-toolbar { display: none; }
+  .nb-code { background: var(--nb-panel); }
+  .nb-cell { break-inside: avoid; }
+}
+""".strip()
+
+# Reduced motion.
+_REDUCED_MOTION = """
+@media (prefers-reduced-motion: reduce) {
+  .nb-kernel--busy .nb-kernel-dot, .nb-prompt--running { animation: none; }
+  .nb-shell *, .nb-shell *::before, .nb-shell *::after { animation: none !important; }
+}
+""".strip()
+
+
+def build_css(mode: str = "static") -> str:
+    """Emit the whole stylesheet for ``mode`` — the renderer's only source of CSS.
+
+    ``static`` and ``embed`` hide the chrome they cannot drive (toolbar always; header,
+    outline, and footer additionally in ``embed``); ``connected`` shows everything.  Keyframes,
+    container-query breakpoints, print rules, and the reduced-motion gate are always present so a
+    printed or motion-averse render degrades without a second pass.  Raises on an unknown mode
+    rather than silently shipping unstyled output.
+    """
+    if mode not in VALID_MODES:
+        raise ValueError(f"unknown render mode: {mode!r} (expected one of {VALID_MODES})")
+
+    parts = [
+        _root_vars(),
+        _FONT_ALIAS,
+        KEYFRAMES,
+        _BASE_CSS,
+        _INTEGRATION_CSS,
+        _BREAKPOINTS,
+        _PRINT,
+        _REDUCED_MOTION,
+    ]
+    if mode in ("static", "embed"):
+        parts.append(".nb-toolbar { display: none; }")
+    if mode == "embed":
+        parts.append(".nb-header, .nb-outline, .nb-footer { display: none; }")
+    return "\n".join(parts)