npm - @fasl-work/caos-app-shell - Versions diffs - 0.13.0 → 0.14.0 - Mend

@fasl-work/caos-app-shell 0.13.0 → 0.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/README.md +9 -1
package/bin/caos-shell-gate.mjs +74 -72
package/dist/chart.js +2 -2
package/dist/{chunk-3QYQCWSZ.js → chunk-YECZXGVG.js} +1 -1
package/dist/index.d.ts +184 -7
package/dist/index.js +535 -116
package/dist/{keys-CTQZafOf.d.ts → keys-DDQGijwQ.d.ts} +5 -3
package/dist/keys.d.ts +1 -1
package/dist/keys.js +1 -1
package/gate/areas.mjs +698 -631
package/gate/inpage.mjs +1416 -1270
package/gate/run.mjs +1036 -780
package/gate/serve.mjs +101 -101
package/package.json +1 -1
package/reserved-classes.json +42 -0
package/src/content/executive.schema.json +659 -659
package/styles.css +829 -769
package/dist/{chunk-YVVDBSAC.js → chunk-33WTUQ7Q.js} +1 -1

package/styles.css CHANGED Viewed

@@ -1,769 +1,829 @@
-@import "katex/dist/katex.min.css";
-/* @fasl-work/caos-app-shell: the design system of every CAOS / Faena app (ADR-0016, ADR-0017, ADR-0071, ADR-0078).
- * Import once per app:  import "@fasl-work/caos-app-shell/styles.css";
- *
- * The stylesheet is written in ordered layers, and each class is defined in ONE place (layer 6 once defined
- * `.tablist` twice and `.subtablist` wrapping and then forced to one row; the later rule always won):
- *   1 tokens      colours per theme, fonts, type, space, radii, layout sizes, icon sizes, z-order
- *   2 base        reset, document, links, focus, reduced motion
- *   3 frame       .app-shell, header, main, footer, skip link; the modes default, fixed and contain
- *   4 routes      the three route bodies: document (.page-body), workbench (.caos-wb), surface (.caos-surface)
- *   5 navigation  every row of links or tabs: one line, never shrinking, faded ends when it scrolls
- *   6 content     prose, page head, reading measure, grids, callouts, equations, figures, references, diagrams
- *   7 controls    buttons, selects, ranges, chips, knobs, native controls, icons
- *   8 case        the case selector
- *   9 workbench   rail, instrument, groups, variants, readouts, gauges, verdicts, plot cards, stages, tables
- *  10 frames      the focus frame (ADR-0070), the authenticated console frame, the architecture modal
- *
- * Breakpoints are one set, used everywhere: 480 px (phone), 760 px (compact header, single columns), 900 px (the
- * workbench stacks and the document scrolls). The gate's large screen is 1280 px (ADR-0071 Verification). A product
- * composes these classes and never redefines them (reserved-classes.json, ADR-0078). */
-/* == 1 tokens =================================================================================================== */
-:root,
-[data-theme="dark"] {
-  --color-bg: #0d1117;
-  --color-surface: #161b22;
-  --color-surface-2: #1c2230;
-  --color-border: #30363d;
-  --color-fg: #c9d1d9;
-  --color-fg-subtle: #9aa6b2;
-  --color-fg-faint: #828b97;
-  --color-accent: #58a6ff;
-  --color-accent-fg: #0d1117;
-  --color-accent-soft: #132036;
-  --color-accent-2: #3fb1c8;
-  --color-magenta: #f778ba;
-  --color-good: #3fb950;
-  --color-warn: #d29922;
-  --color-bad: #f85149;
-  --color-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 16px rgba(0, 0, 0, 0.45);
-  color-scheme: dark;
-}
-[data-theme="light"] {
-  color-scheme: light;
-  --color-bg: #f6f8fa;
-  --color-surface: #ffffff;
-  --color-surface-2: #f0f3f6;
-  --color-border: #d0d7de;
-  --color-fg: #1f2328;
-  --color-fg-subtle: #57606a;
-  --color-fg-faint: #656d77;
-  --color-accent: #0969da;
-  --color-accent-fg: #ffffff;
-  --color-accent-soft: #ddf4ff;
-  --color-accent-2: #0a7886;
-  --color-magenta: #b93785;
-  --color-good: #197c36;
-  --color-warn: #946300;
-  --color-bad: #cf222e;
-  --color-shadow: 0 1px 2px rgba(31, 35, 40, 0.06), 0 4px 10px rgba(31, 35, 40, 0.04);
-}
-/* Theme-independent tokens. A product reads them (`var(--rail-w)`) instead of writing the numbers again. */
-:root {
-  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-  /* type scale */
-  --text-xs: 0.74rem;
-  --text-sm: 0.84rem;
-  --text-md: 0.92rem;
-  --text-base: 0.98rem;
-  --text-lg: 1.08rem;
-  --text-xl: 1.3rem;
-  --text-2xl: 1.7rem;
-  /* spacing */
-  --space-1: 0.25rem;
-  --space-2: 0.5rem;
-  --space-3: 0.75rem;
-  --space-4: 1rem;
-  --space-5: 1.5rem;
-  --space-6: 2.25rem;
-  /* radii */
-  --radius-sm: 6px;
-  --radius-md: 8px;
-  --radius-lg: 10px;
-  --radius-pill: 999px;
-  /* layout */
-  --maxw: 1200px;          /* the document width (ADR-0017 s1) */
-  --maxw-wide: 100%;       /* the workbench and surface width (ADR-0071 rule 2) */
-  --measure: 70ch;         /* the narrow column (.measure) */
-  --measure-text: 78ch;    /* the longest line of a text block inside a document */
-  --header-h: 56px;
-  --rail-w: clamp(248px, 19vw, 340px);
-  --fade: 28px;            /* the faded end of a scrolling row (lib/overflow.ts reveals an item this far inside) */
-  /* icons: lucide's svg.lucide is sized by its context, so a product never passes a size */
-  --icon-sm: 14px;
-  --icon-md: 16px;
-  --icon-lg: 18px;
-  /* z-order */
-  --z-header: 50;
-  --z-focus: 100;
-  --z-modal: 1000;
-}
-/* == 2 base ===================================================================================================== */
-* { box-sizing: border-box; }
-/* Known shell defect 1 (fixed 0.7.0): `height: 100%` with `overflow-x: hidden` made html and body scroll containers
-   pinned to the viewport, so a tall page could not scroll by script or anchor. Content-height documents. */
-html, body, #root { height: auto; min-height: 100%; }
-/* The contained layout: a `nowrap` row sizes its container to its intrinsic width unless every ancestor may shrink;
-   the document never scrolls sideways (measured on ChargeCascade: scrollWidth 1817 on a 1600 viewport).
-   `clip`, not `hidden` (known shell defect 26, 0.8.0): `overflow-x: hidden` on body computes its overflow-y to auto,
-   so body became a scroll container that never scrolls, and nothing in a scrolling document could stick to the
-   viewport: not the site header, not the vertical sub-tab list (found by G12 at 768 px). `hidden` stays as the
-   fallback for a browser without `clip`. */
-html, body { overflow-x: hidden; overflow-x: clip; }
-/* Known shell defect 2 (fixed 0.7.0): any author `display` un-hid a `[hidden]` panel. */
-[hidden] { display: none !important; }
-body {
-  margin: 0;
-  font-family: var(--font-sans);
-  background-color: var(--color-bg);
-  color: var(--color-fg);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  line-height: 1.55;
-}
-a { color: var(--color-accent); text-decoration: none; }
-a:hover { text-decoration: underline; }
-button { font: inherit; cursor: pointer; color: inherit; }
-h1, h2, h3, h4 { line-height: 1.2; font-weight: 650; letter-spacing: -0.01em; }
-code, kbd { font-family: var(--font-mono); }
-:where(a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])):focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 4px; }
-@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }
-.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
-.muted { color: var(--color-fg-subtle); }
-.faint { color: var(--color-fg-faint); }
-.mono { font-family: var(--font-mono); font-size: 0.9em; }
-.small { font-size: var(--text-sm); }
-.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--space-5); }
-.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; box-shadow: var(--color-shadow); }
-.badge { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; padding: 0.15rem 0.55rem; border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: var(--color-surface-2); color: var(--color-fg-subtle); white-space: nowrap; }
-.badge.live { color: var(--color-good); border-color: color-mix(in oklab, var(--color-good) 45%, transparent); }
-.badge.precomputed, .badge.accent { color: var(--color-accent); border-color: color-mix(in oklab, var(--color-accent) 45%, transparent); }
-.badge.warn { color: var(--color-warn); border-color: color-mix(in oklab, var(--color-warn) 45%, transparent); }
-/* == 3 frame ==================================================================================================== */
-/* Three modes. Default: the document scrolls. `fixed` (ShellConfig.fixed or fixedRoutes): the route is the viewport.
-   `contain` (the template's configuration): every route is the viewport; a workbench or a surface fills it, a
-   document scrolls inside it, so the header and the footer stay in view (ADR-0071 rule 1, amended 2026-10-04). */
-.app-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--color-bg); color: var(--color-fg); }
-.page { flex: 1 1 auto; width: 100%; }
-.page:focus { outline: none; }
-/* The skip link: the first stop of the keyboard, visible only when focused. */
-.skip-link { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
-.skip-link:focus { position: fixed; top: var(--space-2); left: var(--space-2); z-index: var(--z-modal); width: auto; height: auto; margin: 0; padding: 0.4rem 0.8rem; clip: auto; overflow: visible; background: var(--color-surface); color: var(--color-accent); border: 1px solid var(--color-accent); border-radius: var(--radius-md); }
-/* Header: brand, the route row, icon links, language and theme on ONE row at every width. */
-.site-header { position: sticky; top: 0; z-index: var(--z-header); border-bottom: 1px solid var(--color-border); background: color-mix(in oklab, var(--color-bg) 82%, transparent); backdrop-filter: blur(8px); }
-.header-inner { max-width: var(--maxw); margin-inline: auto; height: var(--header-h); padding-inline: var(--space-5); display: flex; align-items: center; gap: var(--space-4); }
-.brand { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 700; letter-spacing: -0.02em; color: var(--color-fg); flex: none; }
-.brand:hover { text-decoration: none; }
-.brand .brand-mark { color: var(--color-accent); display: inline-flex; flex: none; }
-.header-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 0.15rem; flex: none; }
-.icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; padding: 0.4rem 0.5rem; border-radius: var(--radius-sm); background: transparent; border: none; color: var(--color-fg-subtle); opacity: 0.85; transition: opacity 0.15s, color 0.15s; }
-.icon-btn:hover { opacity: 1; color: var(--color-fg); text-decoration: none; }
-.icon-btn svg { display: block; flex: none; }
-.lang-code { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
-.header-sep { width: 1px; height: 20px; margin-inline: 0.4rem; background: var(--color-border); }
-/* Footer: ADR-0016 s2, one compact line of provenance and honesty. */
-.site-footer { border-top: 1px solid var(--color-border); margin-top: 3rem; background: var(--color-surface); }
-.footer-inner { max-width: var(--maxw); margin-inline: auto; padding: var(--space-5); display: flex; flex-direction: column; gap: 0.9rem; font-size: 0.85rem; color: var(--color-fg-faint); }
-.footer-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
-.footer-build { margin-left: auto; font-family: var(--font-mono); font-size: 0.72rem; color: var(--color-fg-faint); display: inline-flex; gap: 0.6rem; flex-wrap: wrap; }
-/* NO MAGIC CHROME NUMBER. A surface that fills the viewport lets flex distribute the height, never a guess at the
-   header and footer (measured on ChargeCascade: guess 150px, real 175px, so 25px of scroll and a 48px gap). */
-.app-shell.fixed { height: 100dvh; min-height: 100dvh; overflow: hidden; }
-.app-shell.fixed > .page { flex: 1 1 auto; min-height: 0; display: flex; }
-/* A viewport-filling app carries no prose footer margin (measured on ChargeCascade as exactly 48px of dead space),
-   and its footer is compact: with provenance and a disclaimer it wrapped into 178px at 1600x900 and the instrument
-   fell from 56 to 42 percent of the viewport. */
-.app-shell.fixed .site-footer { margin-top: 0; }
-.app-shell.fixed .site-footer .footer-inner { padding: 0.45rem 1.5rem; gap: 0.4rem; font-size: 0.74rem; line-height: 1.3; }
-.app-shell.fixed.contain > .page { display: flex; flex-direction: column; overflow: hidden; }
-/* A document route scrolls inside the main container; a workbench or a surface fills it. */
-.app-shell.fixed.contain > .page:has(> .page-body:not(.caos-wb):not(.caos-surface)) { display: block; overflow-y: auto; overscroll-behavior: contain; }
-/* The chrome of a contained app spans the instrument's width with its inset, so at 2560 px the header and footer do
-   not float in a 1200 px column above a full-width workbench. */
-.app-shell.fixed.contain .header-inner, .app-shell.fixed.contain .site-footer .footer-inner { max-width: var(--maxw-wide); padding-inline: var(--space-4); }
-@media (max-width: 900px) {
-  /* A phone or a tablet stacks the rail over the instrument and lets the document scroll: the viewport rule is
-     measured at 1280x800 and above (ADR-0071 Verification). */
-  .app-shell.fixed.contain { height: auto; min-height: 100dvh; overflow: visible; }
-  /* Both forms of the rule above are released: the `:has()` form outranked a plain `> .page` and kept a document's
-     `.page` a scroll container that never scrolls, so nothing in it could be sticky (G12, 0.8.0). */
-  .app-shell.fixed.contain > .page, .app-shell.fixed.contain > .page:has(> .page-body:not(.caos-wb):not(.caos-surface)) { display: block; overflow: visible; }
-}
-@media (max-width: 760px) {
-  /* ADR-0071: the route row shares the header row and owns the horizontal scroll; no second row above the
-     instrument. */
-  .header-inner { height: 52px; min-height: 0; flex-wrap: nowrap; gap: 0.3rem; padding-inline: 0.55rem; }
-  .brand { gap: var(--space-1); font-size: 0.8rem; white-space: nowrap; }
-  .header-actions { margin-left: 0; gap: 0; white-space: nowrap; }
-  .header-actions .icon-btn { padding: var(--space-1); }
-  .header-sep { margin-inline: 0.15rem; }
-  /* The phone footer of a contained surface stays one row and says that it scrolls (useOverflowFade). */
-  .app-shell.fixed .site-footer .footer-inner { padding: 0.35rem 0.55rem; }
-  .app-shell.fixed .footer-meta { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
-  .app-shell.fixed .footer-meta::-webkit-scrollbar { display: none; }
-  .app-shell.fixed .footer-meta > * { flex: none; }
-}
-@media (max-width: 480px) {
-  /* The route row needs the room on every phone: on Linux fonts "Implementation" is about 100 px, and the row was
-     about 90 px at 320 px. The brand keeps its mark and its accessible name; the toggle keeps its icon and label. */
-  .brand span:last-child { display: none; }
-  .header-sep, .lang-code { display: none; }
-  .header-actions .icon-btn { padding: 0.2rem; }
-}
-/* == 4 routes =================================================================================================== */
-/* Document: a centred reading width (ADR-0017 s1). The width is defined HERE ONLY: a later unscoped `.page-body`
-   rule once removed the 1200px cap from every product (test/layout-primitives.test.ts guards it). */
-.page-body { width: 100%; max-width: var(--maxw); margin-inline: auto; padding: 2.25rem 1.5rem 3rem; min-width: 0; }
-/* A WORKBENCH or a SURFACE is not prose: capping an instrument at the reading width wastes every pixel beyond it. */
-.page-body.wide { max-width: var(--maxw-wide); padding-inline: 1.25rem; }
-.app-shell.fixed .page-body.wide { flex: 1 1 auto; min-height: 0; padding-top: 0.75rem; padding-bottom: 0.75rem; }
-/* Workbench (WorkbenchLayout): a sized rail beside the instrument, on the full viewport. */
-.caos-wb { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); gap: 0.9rem; align-items: stretch; min-width: 0; padding-top: 0.75rem; padding-bottom: 0.75rem; }
-.page-body.wide.caos-wb { padding-inline: var(--space-4); }
-.caos-wb > * { min-width: 0; }
-.app-shell.fixed.contain > .page > .caos-wb { flex: 1 1 auto; min-height: 0; }
-/* Surface (SurfacePage): a tab App that fills the viewport; its head and tab row hold their height and the open
-   panel scrolls. The containment 15 to 19 products wrote for themselves (audit 2026-10-07, section 3). */
-.caos-surface { display: flex; flex-direction: column; min-width: 0; min-height: 0; gap: var(--space-3); }
-.page-body.wide.caos-surface { padding-inline: var(--space-4); }
-.app-shell.fixed.contain > .page > .caos-surface { flex: 1 1 auto; min-height: 0; }
-.caos-surface-head { flex: none; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); min-width: 0; }
-.caos-surface-heading { min-width: 0; }
-.caos-surface-title { margin: 0; font-size: var(--text-xl); }
-.caos-surface-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
-.caos-surface-lede { margin: 0; color: var(--color-fg-subtle); font-size: var(--text-md); max-width: var(--measure-text); }
-.caos-surface-body { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; flex-direction: column; }
-.caos-surface-body > .tabs { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
-.caos-surface-body > .tabs > .tabpanel:not([hidden]) { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 0.6rem; }
-@media (max-width: 900px) {
-  .caos-wb { grid-template-columns: minmax(0, 1fr); }
-  .caos-surface-body > .tabs > .tabpanel:not([hidden]) { overflow: visible; }
-}
-/* == 5 navigation =============================================================================================== */
-/* Every row of links or tabs is ONE line that scrolls when it does not fit (ADR-0071 rule 4) and never shrinks in a
-   flex column (known shell defect 16, generalised: 16 to 24 products had to say so themselves). Its scrollbar is
-   hidden; wheel, trackpad, drag and keyboard still scroll it, and a hidden end fades (known shell defect 11). */
-.main-nav { display: flex; align-items: center; gap: 0.15rem; flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; white-space: nowrap; scrollbar-width: none; }
-.main-nav::-webkit-scrollbar { display: none; }
-.main-nav .nav-link { flex: none; }
-.nav-link { padding: 0.4rem 0.7rem; border-radius: var(--radius-sm); font-size: 0.9rem; color: var(--color-fg-subtle); transition: color 0.15s, background-color 0.15s; }
-.nav-link:hover { text-decoration: none; color: var(--color-fg); }
-.nav-link.active { color: var(--color-accent); background: var(--color-accent-soft); font-weight: 600; }
-@media (max-width: 760px) {
-  .main-nav { flex: 1 1 0; padding: 2px 0; }
-  .main-nav .nav-link { padding: 0.3rem 0.3rem; font-size: 0.7rem; }
-}
-/* Tabs: the first level. */
-.tabs, .tabpanel, .subtabs, .subtabpanels, .subtabpanel { min-width: 0; max-width: 100%; }
-.tablist { display: flex; gap: 0.35rem; flex: none; flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; width: 100%; min-width: 0; max-width: 100%; padding-bottom: 0.4rem; margin-bottom: 0.9rem; border-bottom: 1px solid var(--color-border); }
-.tablist::-webkit-scrollbar { display: none; }
-.tablist .tab, .tablist button { flex: 0 0 auto; white-space: nowrap; }
-.tab { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.5rem 1rem; border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--color-fg-subtle); font-size: var(--text-md); font-weight: 550; transition: color 0.15s, background-color 0.15s, border-color 0.15s; }
-.tab:hover { color: var(--color-fg); background: var(--color-surface-2); }
-.tab.active { color: var(--color-accent); background: var(--color-accent-soft); border-color: color-mix(in oklab, var(--color-accent) 35%, transparent); font-weight: 650; }
-.tabpanel:focus, .subtabpanel:focus { outline: none; }
-/* Sub-tabs: the second level, lighter pills; or a vertical list beside the panel for a deep document. */
-.subtabs { margin-block: 1rem; }
-.subtablist { display: flex; gap: 0.3rem; flex: none; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; min-width: 0; margin-bottom: 1.1rem; }
-.subtablist::-webkit-scrollbar { display: none; }
-.subtablist .subtab { flex: none; white-space: nowrap; }
-.subtab { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.32rem 0.8rem; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-fg-subtle); font-size: var(--text-sm); font-weight: 500; transition: color 0.15s, background-color 0.15s, border-color 0.15s; }
-.subtab:hover { color: var(--color-fg); border-color: var(--color-fg-faint); }
-.subtab.active { color: var(--color-accent); background: var(--color-accent-soft); border-color: color-mix(in oklab, var(--color-accent) 40%, transparent); font-weight: 600; }
-/* `minmax(0, 1fr)`, NOT `1fr`: a bare `1fr` track is `minmax(auto, 1fr)`, so a wide table in a sub-tab panel sized
-   the whole grid to the table (measured on Porvenir's Datasets tab at 1280x800: 1380px on a 1280px viewport). */
-.subtabs-vertical { display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
-/* The vertical list stays in view while a long section scrolls (known shell defect 24, #55). Under contain the
-   header is outside the scroll container, so `top: 0`; in a scrolling document it clears the sticky header. */
-.subtabs-vertical > .subtablist { flex-direction: column; overflow: visible; margin-bottom: 0; position: sticky; top: calc(var(--header-h) + var(--space-3)); align-self: start; }
-.app-shell.fixed.contain .subtabs-vertical > .subtablist { top: var(--space-3); }
-.subtabs-vertical .subtab { text-align: left; border-radius: var(--radius-md); white-space: normal; }
-@media (max-width: 900px) {
-  /* Here the contained document scrolls as a whole under the sticky header: the list clears the header (G12 found
-     it hidden under the header at 768 px). */
-  .app-shell.fixed.contain .subtabs-vertical > .subtablist { top: calc(var(--header-h) + var(--space-3)); }
-}
-@media (max-width: 760px) {
-  .subtabs-vertical { grid-template-columns: minmax(0, 1fr); }
-  .subtabs-vertical > .subtablist { flex-direction: row; overflow-x: auto; position: static; }
-  .subtabs-vertical .subtab { white-space: nowrap; }
-}
-/* Chip rows: a one-of-N choice on one row (ADR-0071 rule 4). */
-.caos-chip-row { display: flex; flex-wrap: nowrap; gap: 0.35rem; overflow-x: auto; overflow-y: hidden; min-width: 0; scrollbar-width: none; padding-bottom: 2px; }
-.caos-chip-row::-webkit-scrollbar { display: none; }
-.caos-chip-row > * { flex: 0 0 auto; }
-/* The rail's section row (WorkbenchLayout): one row like every other; a hidden end fades (found on CAOS_Fragmenta
-   and CAOS_Contraste, whose labels were shortened by hand to fit). */
-.caos-wb-rail-sections { display: flex; flex-wrap: nowrap; gap: 0.3rem; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; flex: none; min-width: 0; }
-.caos-wb-rail-sections::-webkit-scrollbar { display: none; }
-.caos-wb-rail-sections > * { flex: none; }
-/* A scrolling row says that it scrolls (known shell defect 11): the hidden end fades. */
-:is(.main-nav, .tablist, .subtablist, .caos-chip-row, .caos-wb-rail-sections, .footer-meta)[data-fade-end="1"] { mask-image: linear-gradient(to right, #000 calc(100% - var(--fade)), transparent); }
-:is(.main-nav, .tablist, .subtablist, .caos-chip-row, .caos-wb-rail-sections, .footer-meta)[data-fade-start="1"] { mask-image: linear-gradient(to left, #000 calc(100% - var(--fade)), transparent); }
-:is(.main-nav, .tablist, .subtablist, .caos-chip-row, .caos-wb-rail-sections, .footer-meta)[data-fade-start="1"][data-fade-end="1"] { mask-image: linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent); }
-/* == 6 content ================================================================================================== */
-/* A document fills the width of its column (shell 0.11.0, CAOS_APP_SHELL#96): text blocks, grids, figure rows and
-   tables all take it. A page that reads as one prose column keeps its own max width and is centred (ADR-0017 s1);
-   only the captions keep a measure, centred under their figure. */
-.prose { font-size: var(--text-base); }
-.prose section { margin-block: 1.75rem; }
-.prose h2 { font-size: var(--text-xl); margin-block: 1.4rem 0.6rem; }
-.prose h3 { font-size: 1.06rem; margin-block: 1.1rem 0.4rem; }
-.prose p { margin-block: 0.6rem; }
-.prose ul, .prose ol { margin-block: 0.5rem; padding-left: 1.3rem; }
-.prose li { margin-block: 0.35rem; }
-.prose :where(.equation-caption, .figure-caption, .fig-cap) { max-width: var(--measure-text); margin-inline: auto; }
-.measure { max-width: var(--measure); }
-.page-head { border-bottom: 1px solid var(--color-border); padding-bottom: 1rem; margin-bottom: 1.25rem; }
-.page-head h1 { font-size: var(--text-2xl); margin: 0 0 0.4rem; }
-/* the lede of a page takes the full width of the document column (Felipe, 2026-10-13); only captions keep a measure */
-.lede { color: var(--color-fg-subtle); font-size: var(--text-lg); margin: 0; max-width: none; }
-.caos-doc-section { margin-block: 1.75rem; }
-/* The references of a page or open tab: one block at its end (ADR-0017 s4). */
-.caos-doc-references { margin-top: 2rem; padding-top: 0.4rem; border-top: 1px solid var(--color-border); }
-.caos-doc-reference-list { font-size: 0.85rem; color: var(--color-fg-subtle); line-height: 1.5; padding-left: 1.4rem; }
-.caos-doc-reference-list li { margin-block: 0.5rem; }
-/* Wide content in a document scrolls inside its own box; the contained page never cuts it (G5). */
-.prose table { display: block; max-width: 100%; overflow-x: auto; }
-.prose pre { max-width: 100%; overflow-x: auto; }
-.prose img, .prose svg, .prose video { max-width: 100%; height: auto; }
-.fig-row { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.5rem; align-items: center; margin-block: 1.5rem; }
-.fig-row.rev { grid-template-columns: 1fr 1.1fr; }
-.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-block: 1.5rem; }
-.def-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-block: 1.25rem; }
-.def { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 0.9rem 1.1rem; }
-.def h4 { margin: 0 0 0.3rem; color: var(--color-accent); font-size: 0.95rem; }
-.def p { margin: 0; font-size: 0.9rem; color: var(--color-fg-subtle); }
-.assume { margin-block: 1rem; padding: 0.85rem 1rem; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
-.assume-title { margin: 0 0 0.4rem; font-size: 0.76rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-fg-faint); }
-.assume ul { margin: 0; padding-left: 1.2rem; color: var(--color-fg-subtle); }
-.assume li { margin-block: 0.3rem; font-size: 0.92rem; }
-.tick-list, .cross-list { list-style: none; padding-left: 0; margin: 0.4rem 0 0; }
-.tick-list li, .cross-list li { position: relative; padding-left: 1.5rem; margin-block: 0.5rem; }
-.tick-list li::before { content: "✓"; position: absolute; left: 0; color: var(--color-good); font-weight: 700; }
-.cross-list li::before { content: "✕"; position: absolute; left: 0; color: var(--color-fg-faint); font-weight: 700; }
-@media (max-width: 900px) { .fig-row, .fig-row.rev { grid-template-columns: 1fr; } }
-@media (max-width: 760px) { .two-col { grid-template-columns: 1fr; } }
-/* Callouts. */
-.callout { margin-block: 1rem; padding: 0.8rem 1.1rem; border-left: 3px solid var(--color-border); background: var(--color-surface-2); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
-.callout-honest { border-left-color: var(--color-warn); }
-.callout-strong { border-left-color: var(--color-accent); background: var(--color-accent-soft); }
-.callout-note { border-left-color: var(--color-fg-faint); }
-.callout-title { display: flex; align-items: center; gap: 0.4rem; font-weight: 650; margin: 0 0 0.4rem; color: var(--color-fg); }
-.callout-body { color: var(--color-fg-subtle); }
-.callout-body p:first-child { margin-top: 0; }
-.callout-body p:last-child { margin-bottom: 0; }
-.banner { padding: 0.6rem 0.9rem; border-radius: var(--radius-md); font-size: 0.85rem; margin-block: 0.6rem; border-left: 3px solid var(--color-border); background: var(--color-surface-2); }
-.banner.warn { border-left-color: var(--color-warn); color: var(--color-warn); }
-.banner.error { border-left-color: var(--color-bad); color: var(--color-bad); }
-.hint { font-size: 0.8rem; color: var(--color-fg-faint); margin: 0; }
-/* Equations and figures. */
-.equation { margin: 1rem 0; padding: 0.9rem 1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow-x: auto; }
-.equation-caption { margin-top: 0.5rem; font-size: 0.82rem; color: var(--color-fg-faint); text-align: center; }
-.caos-glossary { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.4rem 1.25rem; margin: 0.75rem 0; }
-.caos-glossary-item { display: flex; gap: 0.5rem; align-items: baseline; }
-.caos-glossary dt { flex: none; min-width: 3rem; font-weight: 600; }
-.caos-glossary dd { margin: 0; color: var(--color-fg); }
-.caos-stat-value { font-variant-numeric: tabular-nums; }
-.caos-stat-source { color: var(--color-fg-faint); font-size: var(--text-sm); }
-.caos-qa { margin: 0.9rem 0; }
-.caos-qa-question { font-weight: 600; margin-bottom: 0.25rem; }
-.caos-qa-answer > :first-child { margin-top: 0; }
-.katex { color: var(--color-fg); }
-.figure { margin: 1.5rem 0; }
-.figure-caption, .fig-cap { text-align: center; font-size: var(--text-sm); color: var(--color-fg-faint); margin-top: 0.6rem; font-style: italic; }
-/* References: at the end of each section (ADR-0017 s4). */
-.references { margin-top: 2.5rem; border-top: 1px solid var(--color-border); padding-top: 1rem; }
-.reference-list { font-size: 0.85rem; color: var(--color-fg-subtle); line-height: 1.5; padding-left: 1.4rem; }
-.reference-list li { margin-block: 0.5rem; }
-.cite-inline { font-style: normal; font-size: 0.92em; color: var(--color-fg-subtle); }
-.th-refs { margin-top: 1.25rem; padding-top: 0.6rem; border-top: 1px dashed var(--color-border); font-size: 0.85rem; color: var(--color-fg-subtle); }
-.th-refs-label { font-weight: 650; color: var(--color-fg-faint); }
-/* Theme-aware inline SVG diagrams (teaching figures). An <img> of an SVG cannot read these tokens. */
-.fig-svg { width: 100%; max-width: 560px; height: auto; display: block; margin-inline: auto; }
-.fig-svg.wide { max-width: 760px; }
-.dg-axis { stroke: var(--color-fg-faint); stroke-width: 1.3; }
-.dg-axis-label { fill: var(--color-fg-subtle); font: 12px var(--font-sans); }
-.dg-tick { fill: var(--color-fg-subtle); font: 11px var(--font-mono); }
-.dg-grid { stroke: var(--color-border); stroke-width: 0.5; opacity: 0.6; }
-.dg-curve { fill: none; stroke: var(--color-accent); stroke-width: 2.2; stroke-linejoin: round; }
-.dg-curve-2 { fill: none; stroke: var(--color-magenta); stroke-width: 2; }
-.dg-curve-faint { fill: none; stroke: var(--color-fg-faint); stroke-width: 1.4; stroke-dasharray: 4 3; }
-.dg-asymptote { stroke: var(--color-bad); stroke-width: 1.4; stroke-dasharray: 4 4; }
-.dg-marker { stroke: var(--color-warn); stroke-width: 1.2; stroke-dasharray: 3 3; }
-.dg-marker-label { fill: var(--color-warn); font: 600 11px var(--font-mono); }
-.dg-note { fill: var(--color-fg-subtle); font: italic 11px var(--font-sans); }
-.dg-fill-accent { fill: color-mix(in oklab, var(--color-accent) 16%, transparent); stroke: var(--color-accent); stroke-width: 1; }
-.dg-fill-warn { fill: color-mix(in oklab, var(--color-warn) 16%, transparent); stroke: var(--color-warn); stroke-width: 1; }
-.dg-box { fill: var(--color-surface); stroke: var(--color-border); stroke-width: 1.3; }
-.dg-box.accent { stroke: var(--color-accent); fill: var(--color-accent-soft); }
-.dg-box.good { stroke: var(--color-good); }
-.dg-box-title { fill: var(--color-fg); font: 650 12px var(--font-sans); }
-.dg-box-title.accent { fill: var(--color-accent); }
-.dg-box-sub { fill: var(--color-fg-subtle); font: 10.5px var(--font-mono); }
-.dg-node { fill: var(--color-surface); stroke: var(--color-accent); stroke-width: 1.4; }
-.dg-node-label { fill: var(--color-fg); font: 600 12px var(--font-mono); }
-.dg-edge { stroke: var(--color-fg-faint); stroke-width: 1.4; fill: none; }
-.dg-edge-label { fill: var(--color-fg-subtle); font: 11px var(--font-mono); }
-.dg-arrowhead { fill: var(--color-fg-faint); }
-.dg-bar { fill: var(--color-accent); }
-.dg-bar-2 { fill: var(--color-magenta); }
-.dg-bar-label { fill: var(--color-fg-subtle); font: 11px var(--font-sans); }
-/* == 7 controls ================================================================================================= */
-.btn { border: 1px solid var(--color-border); background: var(--color-surface-2); color: var(--color-fg); padding: 0.4rem 0.9rem; border-radius: var(--radius-md); font-weight: 600; font-size: 0.88rem; display: inline-flex; align-items: center; gap: 0.35rem; }
-.btn:hover { border-color: var(--color-fg-faint); }
-.btn.primary { background: var(--color-accent); color: var(--color-accent-fg); border-color: var(--color-accent); }
-.btn:disabled { opacity: 0.5; cursor: default; }
-.select { background: var(--color-surface-2); color: var(--color-fg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0.35rem 0.5rem; font-size: 0.85rem; }
-.range { width: 100%; accent-color: var(--color-accent); }
-/* Native controls follow the theme (S2; known shell defect 13). */
-.app-shell select, .app-shell textarea, .app-shell input:not([type="range"]):not([type="checkbox"]):not([type="radio"]) { background: var(--color-surface-2); color: var(--color-fg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
-.app-shell button { color: inherit; }
-/* Chips: a one-of-N choice rendered as pills; `.on` is the selected state. */
-.chip { display: inline-flex; align-items: center; gap: 0.35rem; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-fg-subtle); border-radius: var(--radius-pill); padding: 0.3rem 0.72rem; font-size: 0.82rem; font-weight: 500; white-space: nowrap; transition: color 0.15s, background-color 0.15s, border-color 0.15s; }
-.chip:hover:not(:disabled) { color: var(--color-fg); border-color: var(--color-fg-faint); }
-.chip.on { background: var(--color-accent); color: var(--color-accent-fg); border-color: transparent; font-weight: 600; }
-/* the active chip keeps its colours under the pointer: the hover rule above outranks `.chip.on` and, until 0.9.4, wrote
-   the text colour on the accent (3.04:1 in light, 1.64:1 in dark; known shell defect 33) */
-.chip.on:hover:not(:disabled) { color: var(--color-accent-fg); border-color: transparent; }
-.chip:disabled { opacity: 0.45; cursor: default; }
-/* Registered controls (Knob, ChipGroup). */
-.caos-knob { display: flex; flex-direction: column; gap: var(--space-1); }
-/* Chromium keeps a 2 px user-agent side margin on a range input: at width 100% it reached 2 px past a clipping card
-   (a PlotCard body) and the gate's G5 failed at phone widths (CAOS_APP_SHELL#91). */
-.caos-knob input[type='range'] { margin-inline: 0; }
-.caos-knob-head { display: flex; justify-content: space-between; gap: var(--space-2); font-size: 0.8rem; color: var(--color-fg-subtle); }
-.caos-knob-value { font-family: var(--font-mono); color: var(--color-fg); font-weight: 600; white-space: nowrap; }
-.caos-chipgroup { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
-.caos-chipgroup-label { font-size: 0.8rem; color: var(--color-fg-subtle); }
-.caos-field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.8rem; color: var(--color-fg-subtle); }
-/* Icons: lucide renders `svg.lucide`; its size follows the place it is in, so products pass no size and every app
-   draws the same icon at the same size. An icon beside text takes the text's size. */
-svg.lucide { flex: none; }
-.icon-btn svg.lucide, .brand-mark svg.lucide { width: var(--icon-lg); height: var(--icon-lg); }
-:is(.tab, .subtab, .chip, .btn, .nav-link, .badge, .callout-title, .caos-plot-head, .cs-chip, .caos-wb-rail-sections) svg.lucide { width: 1.15em; height: 1.15em; }
-/* == 8 case selector ============================================================================================ */
-.cs { display: flex; flex-direction: column; gap: 0.7rem; }
-.cs-source { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
-.cs-source-label { font-size: 0.78rem; font-weight: 600; color: var(--color-fg-subtle); text-transform: uppercase; letter-spacing: 0.03em; }
-.cs-source-tabs { display: inline-flex; gap: 0.35rem; flex-wrap: wrap; }
-.cs-locked { margin: 0; border-left-color: var(--color-accent); }
-.cs-group { display: flex; flex-direction: column; gap: 0.35rem; }
-.cs-group-label { font-size: 0.76rem; font-weight: 600; color: var(--color-fg-subtle); text-transform: uppercase; letter-spacing: 0.03em; }
-.cs-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
-.cs-chip { display: inline-flex; align-items: baseline; gap: 0.4rem; padding: 0.32rem 0.6rem; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-fg-subtle); font-size: var(--text-sm); font-weight: 500; transition: color 0.15s, background-color 0.15s, border-color 0.15s; }
-.cs-chip:hover:not(:disabled) { color: var(--color-fg); background: var(--color-surface-2); }
-.cs-chip.on { color: var(--color-accent); background: var(--color-accent-soft); border-color: color-mix(in oklab, var(--color-accent) 40%, transparent); font-weight: 600; }
-/* as for `.chip`: the chosen case's chip keeps its accent under the pointer (known shell defect 33) */
-.cs-chip.on:hover:not(:disabled) { color: var(--color-accent); background: var(--color-accent-soft); }
-.cs-chip:disabled { opacity: 0.45; cursor: default; }
-.cs-chip-id { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.76rem; font-weight: 600; opacity: 0.85; }
-.cs-kind { font-size: 0.62rem; font-weight: 700; line-height: 1; padding: 0.12rem 0.28rem; border-radius: 4px; border: 1px solid var(--color-border); color: var(--color-fg-faint); background: var(--color-surface-2); align-self: center; }
-.cs-kind-real { color: var(--color-accent-2); border-color: color-mix(in oklab, var(--color-accent-2) 40%, transparent); }
-.cs-kind-uploaded { color: var(--color-warn); border-color: color-mix(in oklab, var(--color-warn) 40%, transparent); }
-.cs-modified { display: flex; align-items: center; gap: 0.35rem 0.5rem; flex-wrap: wrap; min-width: 0; }
-.cs-modified .badge { white-space: normal; max-width: 100%; }
-.cs-reset { border: none; background: transparent; color: var(--color-accent); font-size: 0.8rem; font-weight: 600; padding: 0.1rem 0.2rem; text-decoration: underline; text-underline-offset: 2px; }
-/* The compact one-of-N case picker (ADR-0071 rule 7): ten cases in four categories cost a 308px chip block, 21% of a
-   2560x1440 viewport, and one row as a dropdown. */
-.cs-select { width: 100%; max-width: 460px; }
-/* == 9 workbench ================================================================================================ */
-/* The rail: sized, never scrolled when sections are used (ADR-0071 rule 6). */
-.caos-wb-rail { display: flex; flex-direction: column; gap: var(--space-3); min-height: 0; overflow-y: auto; overflow-x: hidden; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 0.85rem; }
-.caos-wb-rail-head { display: flex; flex-direction: column; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }
-.caos-wb-rail-panel { display: flex; flex-direction: column; gap: 0.8rem; min-height: 0; }
-/* A labelled control in the rail stacks its text above it; a knob's head keeps its own row, the value at the right
-   (until 0.9.3 this rule outranked `.caos-knob-head` and stacked every knob, a line per knob; CAOS_APP_SHELL#77). */
-.caos-wb-rail label:not(.caos-knob-head) { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.8rem; color: var(--color-fg-subtle); }
-.caos-wb-rail .select, .caos-wb-rail .range { width: 100%; }
-/* The variants wrap in the rail instead of scrolling. */
-.caos-wb-rail .caos-variant-bar { margin-bottom: 0; }
-.caos-wb-rail .caos-chip-row { flex-wrap: wrap; overflow: visible; }
-.caos-wb-rail .caos-variant-note { font-size: 0.8rem; }
-.caos-wb-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
-/* CaseWorkbench: ONE row of at most six question groups; the open panel takes the height the row leaves and owns its
-   scroll (failure class 4: drawings at zero or at a guessed size). */
-.caos-cw { display: flex; flex-direction: column; min-height: 0; min-width: 0; flex: 1 1 auto; }
-.caos-cw > .tabs { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
-.caos-cw > .tabs > .tablist { margin-bottom: 0.5rem; padding-bottom: var(--space-1); }
-.caos-cw > .tabs > .tablist .tab { padding: 0.38rem 0.85rem; }
-.caos-cw > .tabs > .tabpanel:not([hidden]) { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; }
-.caos-cw-panel { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; flex: 1 1 auto; min-height: 0; }
-.caos-cw-panel-head { display: flex; justify-content: flex-end; }
-.caos-cw-panel > .subtabs { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin-block: 0; }
-.caos-cw-panel > .subtabs > .subtablist { margin-bottom: 0.45rem; }
-.caos-cw-panel > .subtabs > .subtabpanels, .caos-cw-panel > .subtabs > .subtabpanels > .subtabpanel { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
-.caos-cw-panel > .subtabs > .subtabpanels > .subtabpanel { gap: 0.6rem; }
-.caos-cw-context { max-width: 92ch; }
-/* VariantBar. */
-.caos-variant-bar { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.7rem; min-width: 0; }
-.caos-variant-head { display: flex; align-items: center; gap: 0.4rem 0.6rem; flex-wrap: wrap; }
-.caos-variant-title { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-fg-faint); font-weight: 600; }
-.caos-variant-note { margin: 0; font-size: 0.88rem; color: var(--color-fg-subtle); font-style: italic; }
-/* LaneBadge and provenance badges: which lane produced the values on screen, and on what data. */
-.caos-badges { display: inline-flex; gap: 0.3rem; flex-wrap: wrap; }
-.caos-lane-live { color: var(--color-good); border-color: color-mix(in oklab, var(--color-good) 45%, transparent); }
-.caos-lane-replay { color: var(--color-accent); border-color: color-mix(in oklab, var(--color-accent) 45%, transparent); }
-.caos-lane-offline { color: var(--color-warn); border-color: color-mix(in oklab, var(--color-warn) 45%, transparent); }
-.caos-prov-real { color: var(--color-accent-2); border-color: color-mix(in oklab, var(--color-accent-2) 45%, transparent); }
-.caos-prov-synthetic { color: var(--color-magenta); border-color: color-mix(in oklab, var(--color-magenta) 45%, transparent); }
-.caos-prov-published { color: var(--color-fg-subtle); }
-/* Tones shared by readouts, gauges and verdicts. */
-.tone-good { --tone: var(--color-good); }
-.tone-warn { --tone: var(--color-warn); }
-.tone-bad { --tone: var(--color-bad); }
-.tone-accent { --tone: var(--color-accent); }
-.tone-neutral { --tone: var(--color-fg-faint); }
-/* Readout: labelled live values with units. */
-.caos-readout { display: flex; flex-direction: column; gap: 0.35rem; }
-.caos-readout-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
-.caos-readout-title, .caos-gauge-title, .caos-verdict-title { margin: 0; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-fg-faint); font-weight: 600; }
-.caos-readout dl { margin: 0; display: grid; gap: var(--space-1); }
-.caos-readout-row { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); border-left: 3px solid var(--tone); padding-left: var(--space-2); }
-.caos-readout-row dt { color: var(--color-fg-subtle); }
-.caos-readout-row dd { margin: 0; text-align: right; }
-.caos-readout-value { font-family: var(--font-mono); font-weight: 650; color: var(--color-fg); }
-.caos-readout-unit { color: var(--color-fg-faint); font-size: 0.78rem; }
-/* Gauge: a value against labelled zones. */
-.caos-gauge-track { position: relative; height: 14px; border-radius: 7px; background: var(--color-surface-2); overflow: hidden; margin-top: 0.35rem; }
-.caos-gauge-zone { position: absolute; top: 0; height: 100%; background: var(--tone); opacity: 0.45; }
-.caos-gauge-needle { position: absolute; top: 0; width: 3px; height: 100%; background: var(--color-fg); transform: translateX(-1px); }
-.caos-gauge-scale { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--color-fg-faint); margin-top: 0.2rem; }
-.caos-gauge-value { color: var(--color-fg); font-weight: 700; font-family: var(--font-mono); }
-.caos-gauge-legend { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: 0.72rem; color: var(--color-fg-subtle); margin-top: var(--space-1); }
-.caos-gauge-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: var(--space-1); background: var(--tone); }
-/* Verdict: the current diagnosis, coloured by its tone. */
-.caos-verdict { border: 1px solid var(--color-border); border-left: 4px solid var(--tone); border-radius: var(--radius-md); padding: 0.7rem 0.85rem; background: var(--color-surface-2); }
-.caos-verdict-text { margin: 0.2rem 0 0; font-weight: 650; color: var(--color-fg); }
-.caos-verdict.compact { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.6rem; padding: 0.4rem 0.7rem; }
-.caos-verdict.compact .caos-verdict-text { margin: 0; }
-/* PlotCard: the frame every chart or table sits in. */
-.caos-plot { margin: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 0.45rem 0.6rem 0.4rem; min-width: 0; }
-.caos-plot-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); margin-bottom: 0.2rem; font-style: normal; text-align: left; min-height: 1.5rem; }
-.caos-plot-head .badge { font-size: 0.68rem; padding: 0.05rem 0.45rem; }
-.caos-plot-title { font-size: var(--text-sm); color: var(--color-fg-subtle); font-weight: 600; }
-.caos-plot-actions { display: inline-flex; gap: 0.3rem; }
-.caos-plot-body { position: relative; min-width: 0; overflow-x: auto; }
-.caos-plot-note { margin: 0.4rem 0 0; font-size: 0.78rem; color: var(--color-fg-faint); }
-.caos-plot.fill { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
-.caos-plot.fill > .caos-plot-body { flex: 1 1 0; min-height: 0; overflow: hidden; }
-/* The note of a filling card keeps at most 35% of the card and scrolls beyond it, so the drawing keeps a floor
-   (CAOS_APP_SHELL#95: a long note left plots of 10 to 90 px at 1280 x 800). */
-.caos-plot.fill > .caos-plot-note { flex: 0 1 auto; max-height: 35%; overflow-y: auto; }
-/* The stage floor of a filling card (shell 0.11.2; the gate's G6 floor, `--stage-floor` 140 px). At 1280 px and wider the
-   body of a filling card, the box the gate measures, keeps at least the floor itself, so the card grows when its header
-   or its note wraps (a narrow column, the Spanish title, two badges, the wide font) and the containing panel scrolls
-   when the cards do not fit (ADR-0071; the rail never does). 0.11.1 derived a card height from a fixed chrome instead,
-   and a header that wrapped to a third line left the stage under the floor (CAOS_Contraste 0.07.000: 138 px; a
-   400 px column with a note: 106 px). Below 1280 px the document scrolls and nothing changes. */
-@media (min-width: 1280px) {
-  .caos-plot.fill > .caos-plot-body { min-height: var(--caos-stage-floor, 140px); }
-}
-/* A row of views side by side. Every view of the row takes an equal share, a filling card included (known shell
-   defect 23, #54: `.caos-plot.fill` outranked the row's zero basis and took the row). */
-.caos-views-row { display: flex; gap: 0.9rem; flex: 1 1 auto; min-height: 0; min-width: 0; }
-.caos-views-row > *, .caos-views-row > .caos-plot.fill { flex: 1 1 0; min-width: 0; }
-/* ViewsRow's column: a view inside it keeps its height chain (a filling card fills the column); its share of the row
-   is its flex-grow. */
-.caos-views-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; gap: 0.6rem; }
-/* Staleness: a view showing data for an earlier selection says so. */
-.caos-stale .caos-plot-body > :not(.caos-stale-overlay), .caos-readout.caos-stale dl { opacity: 0.45; }
-.caos-stale-overlay { position: absolute; inset: auto 0.5rem 0.5rem auto; padding: 0.25rem 0.55rem; border-radius: var(--radius-sm); background: var(--color-surface-2); border: 1px solid var(--color-border); font-size: 0.76rem; color: var(--color-warn); }
-.caos-stale-note { margin: 0.2rem 0 0; font-size: 0.76rem; color: var(--color-warn); }
-/* Stage: the drawing surface of an instrument, sized by its container. */
-.caos-stage { position: relative; width: 100%; height: 100%; min-width: 0; min-height: 0; }
-/* BarChart: as wide as its box; a filling chart takes the box's height and scrolls rows that do not fit. */
-.caos-bars { position: relative; width: 100%; min-width: 0; }
-.caos-bars.fill { height: 100%; min-height: 0; overflow-y: auto; }
-.caos-bars > svg { display: block; }
-/* A view whose data is not there yet says so (and declares data-state="loading" for the gate). */
-.caos-pending { margin: auto; padding: var(--space-5); color: var(--color-fg-faint); font-size: 0.86rem; text-align: center; }
-/* A failed view (PanelBoundary): an inline message in its own frame, never a blank page. */
-.caos-panel-error { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: baseline; padding: 0.7rem 0.9rem; border: 1px solid color-mix(in oklab, var(--color-bad) 45%, transparent); border-left: 4px solid var(--color-bad); border-radius: var(--radius-md); background: var(--color-surface-2); color: var(--color-fg); font-size: 0.86rem; }
-.caos-panel-error code { flex-basis: 100%; font-size: 0.78rem; color: var(--color-fg-subtle); }
-/* Tables in views and documents: tabular figures, compact rows, a header that stays in view while the body scrolls.
-   A column of words reads left-aligned and wraps; numbers stay right-aligned. */
-.caos-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--color-fg); }
-.caos-table th, .caos-table td { padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--color-border); text-align: right; white-space: nowrap; }
-.caos-table th:first-child, .caos-table td:first-child { text-align: left; }
-.caos-table th.caos-col-text, .caos-table td.caos-col-text { text-align: left; white-space: normal; min-width: 16ch; }
-.caos-table thead th { position: sticky; top: 0; background: var(--color-surface); color: var(--color-fg-subtle); font-weight: 600; border-bottom-color: var(--color-fg-faint); }
-.caos-table tbody tr:hover { background: var(--color-surface-2); }
-@media (max-width: 900px) {
-  /* The views of a row stack; a filling view gets a fixed readable height instead of the panel's. */
-  .caos-views-row { flex-direction: column; }
-  .caos-views-row > *, .caos-views-row > .caos-plot.fill { flex: none; }
-  .caos-plot.fill > .caos-plot-body { flex: none; height: clamp(260px, 48vh, 440px); }
-  .caos-plot.fill > .caos-plot-note { max-height: none; overflow-y: visible; }
-}
-@media (max-width: 760px) {
-  /* A phone wraps the cells instead of pushing the table past the page (found by the gate on the template). */
-  .caos-table th, .caos-table td { white-space: normal; padding: 0.3rem 0.4rem; }
-}
-/* == 10 frames ================================================================================================== */
-/* ADR-0070: the shell-owned, full-viewport scenario focus frame. */
-.caos-focus-shell { position: fixed; inset: 0; z-index: var(--z-focus); display: grid; grid-template-columns: minmax(0,1fr) var(--rail-w); min-width: 0; height: 100dvh; background: var(--color-bg); color: var(--color-fg); }
-.caos-focus-stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--color-bg); }
-.caos-focus-instrument { position: absolute; inset: 0; min-width: 0; min-height: 0; }
-.caos-focus-label, .caos-focus-hud > div { background: color-mix(in oklab,var(--color-surface) 82%,transparent); backdrop-filter: blur(6px); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
-.caos-focus-label { position: absolute; top: 14px; left: 14px; max-width: min(46ch,calc(100% - 230px)); display: grid; gap: 4px; padding: 10px 12px; pointer-events: none; }
-.caos-focus-label strong { font-size: 0.96rem; line-height: 1.2; }
-.caos-focus-label span { font-size: 0.78rem; line-height: 1.4; color: var(--color-fg-subtle); }
-.caos-focus-hud { position: absolute; left: 14px; top: 104px; display: grid; gap: 6px; pointer-events: none; }
-.caos-focus-hud > div { display: grid; gap: 1px; padding: 7px 10px; min-width: 120px; }
-.caos-focus-hud strong { font: 700 1rem var(--font-mono,monospace); }
-.caos-focus-hud span { color: var(--color-fg-subtle); font-size: 0.61rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; }
-.caos-focus-actions { position: absolute; top: 12px; right: 12px; display: flex; gap: 6px; align-items: center; padding: 4px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: color-mix(in oklab,var(--color-surface) 90%,transparent); backdrop-filter: blur(6px); }
-.caos-focus-actions button { border: 0; border-radius: 4px; padding: 6px 9px; background: var(--color-surface-2); color: var(--color-fg); font-size: 0.75rem; font-weight: 700; cursor: pointer; }
-.caos-focus-rail { min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; border-left: 1px solid var(--color-border); background: var(--color-surface); }
-@media (max-width: 900px) {
-  .caos-focus-shell { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,54dvh) minmax(0,46dvh); }
-  .caos-focus-rail { border-left: 0; border-top: 1px solid var(--color-border); }
-  .caos-focus-label { max-width: calc(100% - 16px); top: 49px; left: 8px; padding: 6px 8px; }
-  .caos-focus-hud { top: auto; bottom: 8px; left: 8px; right: 8px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; }
-  .caos-focus-hud > div { min-width: 0; padding: 5px; }
-  .caos-focus-hud strong { font-size: 0.72rem; white-space: nowrap; }
-  .caos-focus-hud span { font-size: 0.48rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  .caos-focus-actions { top: 7px; right: 7px; }
-}
-/* The authenticated console frame (WorkbenchShell): a sidebar on a desktop, a bottom bar on a phone. Products supply
-   their slots; the package owns the frame, the navigation semantics and the main landmark. */
-.caos-workbench-shell { min-height: 100vh; display: grid; grid-template-columns: 238px minmax(0, 1fr); }
-.caos-workbench-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; width: 238px; display: flex; flex-direction: column; padding: 1.25rem 0.875rem; border-right: 1px solid var(--color-border); background: var(--color-surface); }
-.caos-workbench-sidebar nav { display: grid; gap: var(--space-1); }
-.caos-workbench-sidebar nav a { display: flex; align-items: center; gap: var(--space-3); padding: 0.625rem 0.7rem; border: 1px solid transparent; border-radius: 0.7rem; color: var(--color-fg-subtle); font-size: 0.9rem; font-weight: 650; }
-.caos-workbench-sidebar nav a:hover { color: var(--color-fg); background: var(--color-surface-2); text-decoration: none; }
-.caos-workbench-sidebar nav a.active { color: var(--color-accent); border-color: color-mix(in oklab, var(--color-accent) 24%, transparent); background: var(--color-accent-soft); }
-.caos-workbench-sidebar nav a svg.lucide { width: var(--icon-lg); height: var(--icon-lg); }
-.caos-workbench-main { grid-column: 2; min-width: 0; }
-.caos-workbench-header { position: sticky; top: 0; z-index: 15; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 0 2rem; border-bottom: 1px solid var(--color-border); background: color-mix(in oklab, var(--color-bg) 88%, transparent); backdrop-filter: blur(12px); }
-.caos-workbench-content { width: min(1540px, 100%); margin: 0 auto; padding: 2.25rem 2rem 4rem; }
-@media (max-width: 760px) {
-  .caos-workbench-shell { display: block; padding-bottom: 66px; }
-  .caos-workbench-sidebar { inset: auto 0 0; width: auto; height: 62px; display: block; border: 0; border-top: 1px solid var(--color-border); padding: 5px 8px; }
-  .caos-workbench-sidebar > :not(nav) { display: none; }
-  .caos-workbench-sidebar nav { grid-template-columns: repeat(var(--caos-workbench-route-count, 5), minmax(0, 1fr)); }
-  .caos-workbench-sidebar nav a { display: grid; justify-items: center; gap: 2px; overflow: hidden; padding: 5px; font-size: 0.7rem; text-overflow: ellipsis; white-space: nowrap; }
-  .caos-workbench-main { min-width: 0; }
-  .caos-workbench-header { min-height: 58px; padding: 0 1rem; }
-  .caos-workbench-content { padding: 1.5rem 1rem 2.5rem; }
-}
-/* ADR-0058: the architecture modal. A hand-authored architecture SVG carries BOTH languages in ONE file and the
-   wrapper picks one; the rules are scoped to [data-arch-lang] so the short class names cannot collide. */
-[data-arch-lang] .l-es { display: none; }
-[data-arch-lang="es"] .l-en { display: none; }
-[data-arch-lang="es"] .l-es { display: inline; }
-.caos-architecture-diagram > svg { display: block; width: 100%; height: auto; max-width: none; }
-.caos-arch-toggle { margin: 0 0 8px; font-size: 12px; padding: 5px 10px; color: var(--color-fg); background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; }
-/* The executive view (shell 0.12.0, conventions/problem-context-first.md): four sections in order, three inline illustrations,
-   numbered source notes. The product fills content/executive.json; it never styles this view. Illustrations are inline SVG
-   coloured with the theme tokens; a drawing carrying both languages shows the labels of the displayed one. */
-.caos-exec { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
-/* the landing block above the sub-tabs: the title, the key statement, the headline figures */
-.caos-exec-landing { min-width: 0; }
-.caos-exec-title { margin: 0 0 0.35rem; font-size: var(--text-xl); }
-.caos-exec-statement { margin: 0 0 1rem; font-size: var(--text-lg); line-height: 1.45; }
-.caos-exec-headline, .caos-exec-figures { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.75rem; }
-.caos-exec-figures { margin-block: 1rem; }
-.caos-exec-figure { min-width: 0; padding: 0.7rem 1rem; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow-wrap: anywhere; }
-.caos-exec-label { display: inline-block; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-fg-faint); font-weight: 650; }
-.caos-exec-figure > .caos-exec-label { display: block; margin-bottom: 0.1rem; }
-.caos-exec-value { font-size: var(--text-xl); font-variant-numeric: tabular-nums; color: var(--color-accent); }
-.caos-exec-sep { color: var(--color-fg-faint); }
-.caos-exec-cite { margin-left: 0.15rem; font-size: var(--text-xs); }
-/* a sub-tab: the key message line first, then the supporting content, all at the full width of the column */
-.caos-exec-tabs { min-width: 0; }
-.caos-exec-section { min-width: 0; }
-.caos-exec-key { margin: 0 0 1rem; font-size: var(--text-lg); line-height: 1.45; font-weight: 600; }
-.caos-exec-paragraph { margin: 0 0 0.75rem; }
-.caos-exec-sub { margin: 1.25rem 0 0.5rem; font-size: var(--text-md); }
-.caos-exec-setting, .caos-exec-interaction, .caos-exec-status, .caos-exec-handoff { margin: 0.75rem 0; overflow-wrap: anywhere; }
-.caos-exec-cards, .caos-exec-cs, .caos-exec-actions, .caos-exec-causes, .caos-exec-evidence, .caos-exec-list { list-style: none; margin: 0; padding: 0; }
-.caos-exec-cards, .caos-exec-cs { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.9rem; }
-.caos-exec-actions, .caos-exec-causes { display: flex; flex-direction: column; gap: 0.7rem; }
-.caos-exec-card { min-width: 0; padding: 0.8rem 1rem; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: 0.5rem; overflow-wrap: anywhere; }
-.caos-exec-list li, .caos-exec-evidence li { margin-block: 0.35rem; overflow-wrap: anywhere; }
-.caos-exec-list, .caos-exec-evidence { list-style: disc; padding-left: 1.3rem; }
-.caos-exec-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; }
-.caos-exec-badge { align-self: flex-start; padding: 0.1rem 0.5rem; font-size: var(--text-xs); border: 1px solid var(--color-border); border-radius: 999px; color: var(--color-fg-subtle); }
-.caos-exec-cause { min-width: 0; overflow-wrap: anywhere; }
-.caos-exec-cause-head { display: flex; justify-content: space-between; gap: 1rem; }
-.caos-exec-bar { height: 0.45rem; margin-top: 0.3rem; background: var(--color-surface-2); border-radius: 999px; overflow: hidden; }
-.caos-exec-bar > span { display: block; height: 100%; background: var(--color-accent); }
-.caos-exec-cdef { font-size: var(--text-xs); line-height: 1.4; color: var(--color-fg-faint); }
-.caos-exec-fig { margin: 1.25rem 0; }
-.caos-exec-art { width: 100%; max-width: 640px; margin-inline: auto; }
-.caos-exec-art > svg { display: block; width: 100%; height: auto; }
-.caos-exec-art-wait { aspect-ratio: 8 / 5; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
-.caos-exec-fig svg text { font-family: var(--font-sans); }
-.caos-exec-fig[data-lang="en"] [data-lang="es"], .caos-exec-fig[data-lang="es"] [data-lang="en"] { display: none; }
-.caos-exec-fig-error { margin: 0 auto; max-width: 640px; padding: 1rem; border: 1px solid var(--color-bad); border-radius: var(--radius-md); color: var(--color-fg); overflow-wrap: anywhere; }
-/* below the sub-tabs: the numbered linked sources, then the onward links */
-.caos-exec-notes-wrap { border-top: 1px solid var(--color-border); padding-top: 0.75rem; }
-.caos-exec-notes-title { margin: 0 0 0.35rem; font-size: var(--text-sm); color: var(--color-fg-faint); }
-.caos-exec-notes { margin: 0; padding-left: 1.4rem; font-size: var(--text-sm); color: var(--color-fg-subtle); overflow-wrap: anywhere; }
-.caos-exec-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; padding-top: 0.25rem; }
-.caos-exec-link { font-weight: 600; }
-.caos-exec-error { padding: 1rem 1.25rem; border: 1px solid var(--color-bad); border-radius: var(--radius-md); }
+@import "katex/dist/katex.min.css";
+/* @fasl-work/caos-app-shell: the design system of every CAOS / Faena app (ADR-0016, ADR-0017, ADR-0071, ADR-0078).
+ * Import once per app:  import "@fasl-work/caos-app-shell/styles.css";
+ *
+ * The stylesheet is written in ordered layers, and each class is defined in ONE place (layer 6 once defined
+ * `.tablist` twice and `.subtablist` wrapping and then forced to one row; the later rule always won):
+ *   1 tokens      colours per theme, fonts, type, space, radii, layout sizes, icon sizes, z-order
+ *   2 base        reset, document, links, focus, reduced motion
+ *   3 frame       .app-shell, header, main, footer, skip link; the modes default, fixed and contain
+ *   4 routes      the three route bodies: document (.page-body), workbench (.caos-wb), surface (.caos-surface)
+ *   5 navigation  every row of links or tabs: one line, never shrinking, faded ends when it scrolls
+ *   6 content     prose, page head, reading measure, grids, callouts, equations, figures, references, diagrams
+ *   7 controls    buttons, selects, ranges, chips, knobs, native controls, icons
+ *   8 case        the case selector
+ *   9 workbench   rail, instrument, groups, variants, readouts, gauges, verdicts, plot cards, stages, tables
+ *  10 frames      the focus frame (ADR-0070), the authenticated console frame, the architecture modal
+ *
+ * Breakpoints are one set, used everywhere: 480 px (phone), 760 px (compact header, single columns), 900 px (the
+ * workbench stacks and the document scrolls). The gate's large screen is 1280 px (ADR-0071 Verification). A product
+ * composes these classes and never redefines them (reserved-classes.json, ADR-0078). */
+/* == 1 tokens =================================================================================================== */
+:root,
+[data-theme="dark"] {
+  --color-bg: #0d1117;
+  --color-surface: #161b22;
+  --color-surface-2: #1c2230;
+  --color-border: #30363d;
+  --color-fg: #c9d1d9;
+  --color-fg-subtle: #9aa6b2;
+  --color-fg-faint: #828b97;
+  --color-accent: #58a6ff;
+  --color-accent-fg: #0d1117;
+  --color-accent-soft: #132036;
+  --color-accent-2: #3fb1c8;
+  --color-magenta: #f778ba;
+  --color-good: #3fb950;
+  --color-warn: #d29922;
+  --color-bad: #f85149;
+  --color-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 16px rgba(0, 0, 0, 0.45);
+  color-scheme: dark;
+}
+[data-theme="light"] {
+  color-scheme: light;
+  --color-bg: #f6f8fa;
+  --color-surface: #ffffff;
+  --color-surface-2: #f0f3f6;
+  --color-border: #d0d7de;
+  --color-fg: #1f2328;
+  --color-fg-subtle: #57606a;
+  --color-fg-faint: #656d77;
+  --color-accent: #0969da;
+  --color-accent-fg: #ffffff;
+  --color-accent-soft: #ddf4ff;
+  --color-accent-2: #0a7886;
+  --color-magenta: #b93785;
+  --color-good: #197c36;
+  --color-warn: #946300;
+  --color-bad: #cf222e;
+  --color-shadow: 0 1px 2px rgba(31, 35, 40, 0.06), 0 4px 10px rgba(31, 35, 40, 0.04);
+}
+/* Theme-independent tokens. A product reads them (`var(--rail-w)`) instead of writing the numbers again. */
+:root {
+  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  /* type scale */
+  --text-xs: 0.74rem;
+  --text-sm: 0.84rem;
+  --text-md: 0.92rem;
+  --text-base: 0.98rem;
+  --text-lg: 1.08rem;
+  --text-xl: 1.3rem;
+  --text-2xl: 1.7rem;
+  /* spacing */
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.5rem;
+  --space-6: 2.25rem;
+  /* radii */
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 10px;
+  --radius-pill: 999px;
+  /* layout */
+  --maxw: 1200px;          /* the document width (ADR-0017 s1) */
+  --maxw-wide: 100%;       /* the workbench and surface width (ADR-0071 rule 2) */
+  --measure: 70ch;         /* the narrow column (.measure) */
+  --measure-text: 78ch;    /* the longest line of a text block inside a document */
+  --header-h: 56px;
+  --rail-w: clamp(248px, 19vw, 340px);
+  --fade: 28px;            /* the faded end of a scrolling row (lib/overflow.ts reveals an item this far inside) */
+  /* icons: lucide's svg.lucide is sized by its context, so a product never passes a size */
+  --icon-sm: 14px;
+  --icon-md: 16px;
+  --icon-lg: 18px;
+  /* z-order */
+  --z-header: 50;
+  --z-focus: 100;
+  --z-modal: 1000;
+}
+/* == 2 base ===================================================================================================== */
+* { box-sizing: border-box; }
+/* Known shell defect 1 (fixed 0.7.0): `height: 100%` with `overflow-x: hidden` made html and body scroll containers
+   pinned to the viewport, so a tall page could not scroll by script or anchor. Content-height documents. */
+html, body, #root { height: auto; min-height: 100%; }
+/* The contained layout: a `nowrap` row sizes its container to its intrinsic width unless every ancestor may shrink;
+   the document never scrolls sideways (measured on ChargeCascade: scrollWidth 1817 on a 1600 viewport).
+   `clip`, not `hidden` (known shell defect 26, 0.8.0): `overflow-x: hidden` on body computes its overflow-y to auto,
+   so body became a scroll container that never scrolls, and nothing in a scrolling document could stick to the
+   viewport: not the site header, not the vertical sub-tab list (found by G12 at 768 px). `hidden` stays as the
+   fallback for a browser without `clip`. */
+html, body { overflow-x: hidden; overflow-x: clip; }
+/* Known shell defect 2 (fixed 0.7.0): any author `display` un-hid a `[hidden]` panel. */
+[hidden] { display: none !important; }
+body {
+  margin: 0;
+  font-family: var(--font-sans);
+  background-color: var(--color-bg);
+  color: var(--color-fg);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  line-height: 1.55;
+}
+a { color: var(--color-accent); text-decoration: none; }
+a:hover { text-decoration: underline; }
+button { font: inherit; cursor: pointer; color: inherit; }
+h1, h2, h3, h4 { line-height: 1.2; font-weight: 650; letter-spacing: -0.01em; }
+code, kbd { font-family: var(--font-mono); }
+:where(a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])):focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 4px; }
+@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }
+.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
+.muted { color: var(--color-fg-subtle); }
+.faint { color: var(--color-fg-faint); }
+.mono { font-family: var(--font-mono); font-size: 0.9em; }
+.small { font-size: var(--text-sm); }
+.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--space-5); }
+.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; box-shadow: var(--color-shadow); }
+.badge { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; padding: 0.15rem 0.55rem; border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: var(--color-surface-2); color: var(--color-fg-subtle); white-space: nowrap; }
+.badge.live { color: var(--color-good); border-color: color-mix(in oklab, var(--color-good) 45%, transparent); }
+.badge.precomputed, .badge.accent { color: var(--color-accent); border-color: color-mix(in oklab, var(--color-accent) 45%, transparent); }
+.badge.warn { color: var(--color-warn); border-color: color-mix(in oklab, var(--color-warn) 45%, transparent); }
+/* == 3 frame ==================================================================================================== */
+/* Three modes. Default: the document scrolls. `fixed` (ShellConfig.fixed or fixedRoutes): the route is the viewport.
+   `contain` (the template's configuration): every route is the viewport; a workbench or a surface fills it, a
+   document scrolls inside it, so the header and the footer stay in view (ADR-0071 rule 1, amended 2026-10-04). */
+.app-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--color-bg); color: var(--color-fg); }
+.page { flex: 1 1 auto; width: 100%; }
+.page:focus { outline: none; }
+/* The skip link: the first stop of the keyboard, visible only when focused. */
+.skip-link { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
+.skip-link:focus { position: fixed; top: var(--space-2); left: var(--space-2); z-index: var(--z-modal); width: auto; height: auto; margin: 0; padding: 0.4rem 0.8rem; clip: auto; overflow: visible; background: var(--color-surface); color: var(--color-accent); border: 1px solid var(--color-accent); border-radius: var(--radius-md); }
+/* Header: brand, the route row, icon links, language and theme on ONE row at every width. */
+.site-header { position: sticky; top: 0; z-index: var(--z-header); border-bottom: 1px solid var(--color-border); background: color-mix(in oklab, var(--color-bg) 82%, transparent); backdrop-filter: blur(8px); }
+.header-inner { max-width: var(--maxw); margin-inline: auto; height: var(--header-h); padding-inline: var(--space-5); display: flex; align-items: center; gap: var(--space-4); }
+.brand { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 700; letter-spacing: -0.02em; color: var(--color-fg); flex: none; }
+.brand:hover { text-decoration: none; }
+.brand .brand-mark { color: var(--color-accent); display: inline-flex; flex: none; }
+.header-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 0.15rem; flex: none; }
+.icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; padding: 0.4rem 0.5rem; border-radius: var(--radius-sm); background: transparent; border: none; color: var(--color-fg-subtle); opacity: 0.85; transition: opacity 0.15s, color 0.15s; }
+.icon-btn:hover { opacity: 1; color: var(--color-fg); text-decoration: none; }
+.icon-btn svg { display: block; flex: none; }
+.lang-code { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
+.header-sep { width: 1px; height: 20px; margin-inline: 0.4rem; background: var(--color-border); }
+/* Footer: ADR-0016 s2, one compact line of provenance and honesty. */
+.site-footer { border-top: 1px solid var(--color-border); margin-top: 3rem; background: var(--color-surface); }
+.footer-inner { max-width: var(--maxw); margin-inline: auto; padding: var(--space-5); display: flex; flex-direction: column; gap: 0.9rem; font-size: 0.85rem; color: var(--color-fg-faint); }
+.footer-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
+.footer-build { margin-left: auto; font-family: var(--font-mono); font-size: 0.72rem; color: var(--color-fg-faint); display: inline-flex; gap: 0.6rem; flex-wrap: wrap; }
+/* NO MAGIC CHROME NUMBER. A surface that fills the viewport lets flex distribute the height, never a guess at the
+   header and footer (measured on ChargeCascade: guess 150px, real 175px, so 25px of scroll and a 48px gap). */
+.app-shell.fixed { height: 100dvh; min-height: 100dvh; overflow: hidden; }
+.app-shell.fixed > .page { flex: 1 1 auto; min-height: 0; display: flex; }
+/* A viewport-filling app carries no prose footer margin (measured on ChargeCascade as exactly 48px of dead space),
+   and its footer is compact: with provenance and a disclaimer it wrapped into 178px at 1600x900 and the instrument
+   fell from 56 to 42 percent of the viewport. */
+.app-shell.fixed .site-footer { margin-top: 0; }
+.app-shell.fixed .site-footer .footer-inner { padding: 0.45rem 1.5rem; gap: 0.4rem; font-size: 0.74rem; line-height: 1.3; }
+.app-shell.fixed.contain > .page { display: flex; flex-direction: column; overflow: hidden; }
+/* A document route scrolls inside the main container; a workbench or a surface fills it. */
+.app-shell.fixed.contain > .page:has(> .page-body:not(.caos-wb):not(.caos-surface)) { display: block; overflow-y: auto; overscroll-behavior: contain; }
+/* The chrome of a contained app spans the instrument's width with its inset, so at 2560 px the header and footer do
+   not float in a 1200 px column above a full-width workbench. */
+.app-shell.fixed.contain .header-inner, .app-shell.fixed.contain .site-footer .footer-inner { max-width: var(--maxw-wide); padding-inline: var(--space-4); }
+@media (max-width: 900px) {
+  /* A phone or a tablet stacks the rail over the instrument and lets the document scroll: the viewport rule is
+     measured at 1280x800 and above (ADR-0071 Verification). */
+  .app-shell.fixed.contain { height: auto; min-height: 100dvh; overflow: visible; }
+  /* Both forms of the rule above are released: the `:has()` form outranked a plain `> .page` and kept a document's
+     `.page` a scroll container that never scrolls, so nothing in it could be sticky (G12, 0.8.0). */
+  .app-shell.fixed.contain > .page, .app-shell.fixed.contain > .page:has(> .page-body:not(.caos-wb):not(.caos-surface)) { display: block; overflow: visible; }
+}
+@media (max-width: 760px) {
+  /* ADR-0071: the route row shares the header row and owns the horizontal scroll; no second row above the
+     instrument. */
+  .header-inner { height: 52px; min-height: 0; flex-wrap: nowrap; gap: 0.3rem; padding-inline: 0.55rem; }
+  .brand { gap: var(--space-1); font-size: 0.8rem; white-space: nowrap; }
+  .header-actions { margin-left: 0; gap: 0; white-space: nowrap; }
+  .header-actions .icon-btn { padding: var(--space-1); }
+  .header-sep { margin-inline: 0.15rem; }
+  /* The phone footer of a contained surface stays one row and says that it scrolls (useOverflowFade). */
+  .app-shell.fixed .site-footer .footer-inner { padding: 0.35rem 0.55rem; }
+  .app-shell.fixed .footer-meta { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
+  .app-shell.fixed .footer-meta::-webkit-scrollbar { display: none; }
+  .app-shell.fixed .footer-meta > * { flex: none; }
+}
+@media (max-width: 480px) {
+  /* The route row needs the room on every phone: on Linux fonts "Implementation" is about 100 px, and the row was
+     about 90 px at 320 px. The brand keeps its mark and its accessible name; the toggle keeps its icon and label. */
+  .brand span:last-child { display: none; }
+  .header-sep, .lang-code { display: none; }
+  .header-actions .icon-btn { padding: 0.2rem; }
+}
+/* == 4 routes =================================================================================================== */
+/* Document: a centred reading width (ADR-0017 s1). The width is defined HERE ONLY: a later unscoped `.page-body`
+   rule once removed the 1200px cap from every product (test/layout-primitives.test.ts guards it). */
+.page-body { width: 100%; max-width: var(--maxw); margin-inline: auto; padding: 2.25rem 1.5rem 3rem; min-width: 0; }
+/* A WORKBENCH or a SURFACE is not prose: capping an instrument at the reading width wastes every pixel beyond it. */
+.page-body.wide { max-width: var(--maxw-wide); padding-inline: 1.25rem; }
+.app-shell.fixed .page-body.wide { flex: 1 1 auto; min-height: 0; padding-top: 0.75rem; padding-bottom: 0.75rem; }
+/* Workbench (WorkbenchLayout): a sized rail beside the instrument, on the full viewport. */
+.caos-wb { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); gap: 0.9rem; align-items: stretch; min-width: 0; padding-top: 0.75rem; padding-bottom: 0.75rem; }
+.page-body.wide.caos-wb { padding-inline: var(--space-4); }
+.caos-wb > * { min-width: 0; }
+.app-shell.fixed.contain > .page > .caos-wb { flex: 1 1 auto; min-height: 0; }
+/* Surface (SurfacePage): a tab App that fills the viewport; its head and tab row hold their height and the open
+   panel scrolls. The containment 15 to 19 products wrote for themselves (audit 2026-10-07, section 3). */
+.caos-surface { display: flex; flex-direction: column; min-width: 0; min-height: 0; gap: var(--space-3); }
+.page-body.wide.caos-surface { padding-inline: var(--space-4); }
+.app-shell.fixed.contain > .page > .caos-surface { flex: 1 1 auto; min-height: 0; }
+.caos-surface-head { flex: none; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); min-width: 0; }
+.caos-surface-heading { min-width: 0; }
+.caos-surface-title { margin: 0; font-size: var(--text-xl); }
+.caos-surface-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
+.caos-surface-lede { margin: 0; color: var(--color-fg-subtle); font-size: var(--text-md); max-width: var(--measure-text); }
+.caos-surface-body { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; flex-direction: column; }
+.caos-surface-body > .tabs { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
+.caos-surface-body > .tabs > .tabpanel:not([hidden]) { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 0.6rem; }
+@media (max-width: 900px) {
+  .caos-wb { grid-template-columns: minmax(0, 1fr); }
+  .caos-surface-body > .tabs > .tabpanel:not([hidden]) { overflow: visible; }
+}
+/* == 5 navigation =============================================================================================== */
+/* Every row of links or tabs is ONE line that scrolls when it does not fit (ADR-0071 rule 4) and never shrinks in a
+   flex column (known shell defect 16, generalised: 16 to 24 products had to say so themselves). Its scrollbar is
+   hidden; wheel, trackpad, drag and keyboard still scroll it, and a hidden end fades (known shell defect 11). */
+.main-nav { display: flex; align-items: center; gap: 0.15rem; flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; white-space: nowrap; scrollbar-width: none; }
+.main-nav::-webkit-scrollbar { display: none; }
+.main-nav .nav-link { flex: none; }
+.nav-link { padding: 0.4rem 0.7rem; border-radius: var(--radius-sm); font-size: 0.9rem; color: var(--color-fg-subtle); transition: color 0.15s, background-color 0.15s; }
+.nav-link:hover { text-decoration: none; color: var(--color-fg); }
+.nav-link.active { color: var(--color-accent); background: var(--color-accent-soft); font-weight: 600; }
+@media (max-width: 760px) {
+  .main-nav { flex: 1 1 0; padding: 2px 0; }
+  .main-nav .nav-link { padding: 0.3rem 0.3rem; font-size: 0.7rem; }
+}
+/* Tabs: the first level. */
+.tabs, .tabpanel, .subtabs, .subtabpanels, .subtabpanel { min-width: 0; max-width: 100%; }
+.tablist { display: flex; gap: 0.35rem; flex: none; flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; width: 100%; min-width: 0; max-width: 100%; padding-bottom: 0.4rem; margin-bottom: 0.9rem; border-bottom: 1px solid var(--color-border); }
+.tablist::-webkit-scrollbar { display: none; }
+.tablist .tab, .tablist button { flex: 0 0 auto; white-space: nowrap; }
+.tab { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.5rem 1rem; border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--color-fg-subtle); font-size: var(--text-md); font-weight: 550; transition: color 0.15s, background-color 0.15s, border-color 0.15s; }
+.tab:hover { color: var(--color-fg); background: var(--color-surface-2); }
+.tab.active { color: var(--color-accent); background: var(--color-accent-soft); border-color: color-mix(in oklab, var(--color-accent) 35%, transparent); font-weight: 650; }
+.tabpanel:focus, .subtabpanel:focus { outline: none; }
+/* Sub-tabs: the second level, lighter pills; or a vertical list beside the panel for a deep document. */
+.subtabs { margin-block: 1rem; }
+.subtablist { display: flex; gap: 0.3rem; flex: none; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; min-width: 0; margin-bottom: 1.1rem; }
+.subtablist::-webkit-scrollbar { display: none; }
+.subtablist .subtab { flex: none; white-space: nowrap; }
+.subtab { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.32rem 0.8rem; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-fg-subtle); font-size: var(--text-sm); font-weight: 500; transition: color 0.15s, background-color 0.15s, border-color 0.15s; }
+.subtab:hover { color: var(--color-fg); border-color: var(--color-fg-faint); }
+.subtab.active { color: var(--color-accent); background: var(--color-accent-soft); border-color: color-mix(in oklab, var(--color-accent) 40%, transparent); font-weight: 600; }
+/* `minmax(0, 1fr)`, NOT `1fr`: a bare `1fr` track is `minmax(auto, 1fr)`, so a wide table in a sub-tab panel sized
+   the whole grid to the table (measured on Porvenir's Datasets tab at 1280x800: 1380px on a 1280px viewport). */
+.subtabs-vertical { display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
+/* The vertical list stays in view while a long section scrolls (known shell defect 24, #55). Under contain the
+   header is outside the scroll container, so `top: 0`; in a scrolling document it clears the sticky header. */
+.subtabs-vertical > .subtablist { flex-direction: column; overflow: visible; margin-bottom: 0; position: sticky; top: calc(var(--header-h) + var(--space-3)); align-self: start; }
+.app-shell.fixed.contain .subtabs-vertical > .subtablist { top: var(--space-3); }
+.subtabs-vertical .subtab { text-align: left; border-radius: var(--radius-md); white-space: normal; }
+@media (max-width: 900px) {
+  /* Here the contained document scrolls as a whole under the sticky header: the list clears the header (G12 found
+     it hidden under the header at 768 px). */
+  .app-shell.fixed.contain .subtabs-vertical > .subtablist { top: calc(var(--header-h) + var(--space-3)); }
+}
+@media (max-width: 760px) {
+  .subtabs-vertical { grid-template-columns: minmax(0, 1fr); }
+  .subtabs-vertical > .subtablist { flex-direction: row; overflow-x: auto; position: static; }
+  .subtabs-vertical .subtab { white-space: nowrap; }
+}
+/* Chip rows: a one-of-N choice on one row (ADR-0071 rule 4). */
+.caos-chip-row { display: flex; flex-wrap: nowrap; gap: 0.35rem; overflow-x: auto; overflow-y: hidden; min-width: 0; scrollbar-width: none; padding-bottom: 2px; }
+.caos-chip-row::-webkit-scrollbar { display: none; }
+.caos-chip-row > * { flex: 0 0 auto; }
+/* The rail's section row (WorkbenchLayout): one row like every other; a hidden end fades (found on CAOS_Fragmenta
+   and CAOS_Contraste, whose labels were shortened by hand to fit). */
+.caos-wb-rail-sections { display: flex; flex-wrap: nowrap; gap: 0.3rem; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; flex: none; min-width: 0; }
+.caos-wb-rail-sections::-webkit-scrollbar { display: none; }
+.caos-wb-rail-sections > * { flex: none; }
+/* A scrolling row says that it scrolls (known shell defect 11): the hidden end fades. */
+:is(.main-nav, .tablist, .subtablist, .caos-chip-row, .caos-wb-rail-sections, .footer-meta)[data-fade-end="1"] { mask-image: linear-gradient(to right, #000 calc(100% - var(--fade)), transparent); }
+:is(.main-nav, .tablist, .subtablist, .caos-chip-row, .caos-wb-rail-sections, .footer-meta)[data-fade-start="1"] { mask-image: linear-gradient(to left, #000 calc(100% - var(--fade)), transparent); }
+:is(.main-nav, .tablist, .subtablist, .caos-chip-row, .caos-wb-rail-sections, .footer-meta)[data-fade-start="1"][data-fade-end="1"] { mask-image: linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent); }
+/* == 6 content ================================================================================================== */
+/* A document fills the width of its column (shell 0.11.0, CAOS_APP_SHELL#96): text blocks, grids, figure rows and
+   tables all take it. A page that reads as one prose column keeps its own max width and is centred (ADR-0017 s1);
+   only the captions keep a measure, centred under their figure. */
+.prose { font-size: var(--text-base); }
+.prose section { margin-block: 1.75rem; }
+.prose h2 { font-size: var(--text-xl); margin-block: 1.4rem 0.6rem; }
+.prose h3 { font-size: 1.06rem; margin-block: 1.1rem 0.4rem; }
+.prose p { margin-block: 0.6rem; }
+.prose ul, .prose ol { margin-block: 0.5rem; padding-left: 1.3rem; }
+.prose li { margin-block: 0.35rem; }
+.prose :where(.equation-caption, .figure-caption, .fig-cap) { max-width: var(--measure-text); margin-inline: auto; }
+.measure { max-width: var(--measure); }
+.page-head { border-bottom: 1px solid var(--color-border); padding-bottom: 1rem; margin-bottom: 1.25rem; }
+.page-head h1 { font-size: var(--text-2xl); margin: 0 0 0.4rem; }
+/* the lede of a page takes the full width of the document column (Felipe, 2026-10-13); only captions keep a measure */
+.lede { color: var(--color-fg-subtle); font-size: var(--text-lg); margin: 0; max-width: none; }
+.caos-doc-section { margin-block: 1.75rem; }
+/* The references of a page or open tab: one block at its end (ADR-0017 s4). */
+.caos-doc-references { margin-top: 2rem; padding-top: 0.4rem; border-top: 1px solid var(--color-border); }
+.caos-doc-reference-list { font-size: 0.85rem; color: var(--color-fg-subtle); line-height: 1.5; padding-left: 1.4rem; }
+.caos-doc-reference-list li { margin-block: 0.5rem; }
+/* Wide content in a document scrolls inside its own box; the contained page never cuts it (G5). */
+.prose table { display: block; max-width: 100%; overflow-x: auto; }
+.prose pre { max-width: 100%; overflow-x: auto; }
+.prose img, .prose svg, .prose video { max-width: 100%; height: auto; }
+.fig-row { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.5rem; align-items: center; margin-block: 1.5rem; }
+.fig-row.rev { grid-template-columns: 1fr 1.1fr; }
+.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-block: 1.5rem; }
+.def-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-block: 1.25rem; }
+.def { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 0.9rem 1.1rem; }
+.def h4 { margin: 0 0 0.3rem; color: var(--color-accent); font-size: 0.95rem; }
+.def p { margin: 0; font-size: 0.9rem; color: var(--color-fg-subtle); }
+.assume { margin-block: 1rem; padding: 0.85rem 1rem; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
+.assume-title { margin: 0 0 0.4rem; font-size: 0.76rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-fg-faint); }
+.assume ul { margin: 0; padding-left: 1.2rem; color: var(--color-fg-subtle); }
+.assume li { margin-block: 0.3rem; font-size: 0.92rem; }
+.tick-list, .cross-list { list-style: none; padding-left: 0; margin: 0.4rem 0 0; }
+.tick-list li, .cross-list li { position: relative; padding-left: 1.5rem; margin-block: 0.5rem; }
+.tick-list li::before { content: "✓"; position: absolute; left: 0; color: var(--color-good); font-weight: 700; }
+.cross-list li::before { content: "✕"; position: absolute; left: 0; color: var(--color-fg-faint); font-weight: 700; }
+@media (max-width: 900px) { .fig-row, .fig-row.rev { grid-template-columns: 1fr; } }
+@media (max-width: 760px) { .two-col { grid-template-columns: 1fr; } }
+/* Callouts. */
+.callout { margin-block: 1rem; padding: 0.8rem 1.1rem; border-left: 3px solid var(--color-border); background: var(--color-surface-2); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
+.callout-honest { border-left-color: var(--color-warn); }
+.callout-strong { border-left-color: var(--color-accent); background: var(--color-accent-soft); }
+.callout-note { border-left-color: var(--color-fg-faint); }
+.callout-title { display: flex; align-items: center; gap: 0.4rem; font-weight: 650; margin: 0 0 0.4rem; color: var(--color-fg); }
+.callout-body { color: var(--color-fg-subtle); }
+.callout-body p:first-child { margin-top: 0; }
+.callout-body p:last-child { margin-bottom: 0; }
+.banner { padding: 0.6rem 0.9rem; border-radius: var(--radius-md); font-size: 0.85rem; margin-block: 0.6rem; border-left: 3px solid var(--color-border); background: var(--color-surface-2); }
+.banner.warn { border-left-color: var(--color-warn); color: var(--color-warn); }
+.banner.error { border-left-color: var(--color-bad); color: var(--color-bad); }
+.hint { font-size: 0.8rem; color: var(--color-fg-faint); margin: 0; }
+/* Equations and figures. */
+.equation { margin: 1rem 0; padding: 0.9rem 1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow-x: auto; }
+.equation-caption { margin-top: 0.5rem; font-size: 0.82rem; color: var(--color-fg-faint); text-align: center; }
+.caos-glossary { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.4rem 1.25rem; margin: 0.75rem 0; }
+.caos-glossary-item { display: flex; gap: 0.5rem; align-items: baseline; }
+.caos-glossary dt { flex: none; min-width: 3rem; font-weight: 600; }
+.caos-glossary dd { margin: 0; color: var(--color-fg); }
+.caos-stat-value { font-variant-numeric: tabular-nums; }
+.caos-stat-source { color: var(--color-fg-faint); font-size: var(--text-sm); }
+.caos-qa { margin: 0.9rem 0; }
+.caos-qa-question { font-weight: 600; margin-bottom: 0.25rem; }
+.caos-qa-answer > :first-child { margin-top: 0; }
+.katex { color: var(--color-fg); }
+.figure { margin: 1.5rem 0; }
+.figure-caption, .fig-cap { text-align: center; font-size: var(--text-sm); color: var(--color-fg-faint); margin-top: 0.6rem; font-style: italic; }
+/* References: at the end of each section (ADR-0017 s4). */
+.references { margin-top: 2.5rem; border-top: 1px solid var(--color-border); padding-top: 1rem; }
+.reference-list { font-size: 0.85rem; color: var(--color-fg-subtle); line-height: 1.5; padding-left: 1.4rem; }
+.reference-list li { margin-block: 0.5rem; }
+.cite-inline { font-style: normal; font-size: 0.92em; color: var(--color-fg-subtle); }
+.th-refs { margin-top: 1.25rem; padding-top: 0.6rem; border-top: 1px dashed var(--color-border); font-size: 0.85rem; color: var(--color-fg-subtle); }
+.th-refs-label { font-weight: 650; color: var(--color-fg-faint); }
+/* Theme-aware inline SVG diagrams (teaching figures). An <img> of an SVG cannot read these tokens. */
+.fig-svg { width: 100%; max-width: 560px; height: auto; display: block; margin-inline: auto; }
+.fig-svg.wide { max-width: 760px; }
+.dg-axis { stroke: var(--color-fg-faint); stroke-width: 1.3; }
+.dg-axis-label { fill: var(--color-fg-subtle); font: 12px var(--font-sans); }
+.dg-tick { fill: var(--color-fg-subtle); font: 11px var(--font-mono); }
+.dg-grid { stroke: var(--color-border); stroke-width: 0.5; opacity: 0.6; }
+.dg-curve { fill: none; stroke: var(--color-accent); stroke-width: 2.2; stroke-linejoin: round; }
+.dg-curve-2 { fill: none; stroke: var(--color-magenta); stroke-width: 2; }
+.dg-curve-faint { fill: none; stroke: var(--color-fg-faint); stroke-width: 1.4; stroke-dasharray: 4 3; }
+.dg-asymptote { stroke: var(--color-bad); stroke-width: 1.4; stroke-dasharray: 4 4; }
+.dg-marker { stroke: var(--color-warn); stroke-width: 1.2; stroke-dasharray: 3 3; }
+.dg-marker-label { fill: var(--color-warn); font: 600 11px var(--font-mono); }
+.dg-note { fill: var(--color-fg-subtle); font: italic 11px var(--font-sans); }
+.dg-fill-accent { fill: color-mix(in oklab, var(--color-accent) 16%, transparent); stroke: var(--color-accent); stroke-width: 1; }
+.dg-fill-warn { fill: color-mix(in oklab, var(--color-warn) 16%, transparent); stroke: var(--color-warn); stroke-width: 1; }
+.dg-box { fill: var(--color-surface); stroke: var(--color-border); stroke-width: 1.3; }
+.dg-box.accent { stroke: var(--color-accent); fill: var(--color-accent-soft); }
+.dg-box.good { stroke: var(--color-good); }
+.dg-box-title { fill: var(--color-fg); font: 650 12px var(--font-sans); }
+.dg-box-title.accent { fill: var(--color-accent); }
+.dg-box-sub { fill: var(--color-fg-subtle); font: 10.5px var(--font-mono); }
+.dg-node { fill: var(--color-surface); stroke: var(--color-accent); stroke-width: 1.4; }
+.dg-node-label { fill: var(--color-fg); font: 600 12px var(--font-mono); }
+.dg-edge { stroke: var(--color-fg-faint); stroke-width: 1.4; fill: none; }
+.dg-edge-label { fill: var(--color-fg-subtle); font: 11px var(--font-mono); }
+.dg-arrowhead { fill: var(--color-fg-faint); }
+.dg-bar { fill: var(--color-accent); }
+.dg-bar-2 { fill: var(--color-magenta); }
+.dg-bar-label { fill: var(--color-fg-subtle); font: 11px var(--font-sans); }
+/* == 7 controls ================================================================================================= */
+.btn { border: 1px solid var(--color-border); background: var(--color-surface-2); color: var(--color-fg); padding: 0.4rem 0.9rem; border-radius: var(--radius-md); font-weight: 600; font-size: 0.88rem; display: inline-flex; align-items: center; gap: 0.35rem; }
+.btn:hover { border-color: var(--color-fg-faint); }
+.btn.primary { background: var(--color-accent); color: var(--color-accent-fg); border-color: var(--color-accent); }
+.btn:disabled { opacity: 0.5; cursor: default; }
+.select { background: var(--color-surface-2); color: var(--color-fg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0.35rem 0.5rem; font-size: 0.85rem; }
+.range { width: 100%; accent-color: var(--color-accent); }
+/* Native controls follow the theme (S2; known shell defect 13). */
+.app-shell select, .app-shell textarea, .app-shell input:not([type="range"]):not([type="checkbox"]):not([type="radio"]) { background: var(--color-surface-2); color: var(--color-fg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
+.app-shell button { color: inherit; }
+/* Chips: a one-of-N choice rendered as pills; `.on` is the selected state. */
+.chip { display: inline-flex; align-items: center; gap: 0.35rem; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-fg-subtle); border-radius: var(--radius-pill); padding: 0.3rem 0.72rem; font-size: 0.82rem; font-weight: 500; white-space: nowrap; transition: color 0.15s, background-color 0.15s, border-color 0.15s; }
+.chip:hover:not(:disabled) { color: var(--color-fg); border-color: var(--color-fg-faint); }
+.chip.on { background: var(--color-accent); color: var(--color-accent-fg); border-color: transparent; font-weight: 600; }
+/* the active chip keeps its colours under the pointer: the hover rule above outranks `.chip.on` and, until 0.9.4, wrote
+   the text colour on the accent (3.04:1 in light, 1.64:1 in dark; known shell defect 33) */
+.chip.on:hover:not(:disabled) { color: var(--color-accent-fg); border-color: transparent; }
+.chip:disabled { opacity: 0.45; cursor: default; }
+/* Registered controls (Knob, ChipGroup). */
+.caos-knob { display: flex; flex-direction: column; gap: var(--space-1); }
+/* Chromium keeps a 2 px user-agent side margin on a range input: at width 100% it reached 2 px past a clipping card
+   (a PlotCard body) and the gate's G5 failed at phone widths (CAOS_APP_SHELL#91). */
+.caos-knob input[type='range'] { margin-inline: 0; }
+.caos-knob-head { display: flex; justify-content: space-between; gap: var(--space-2); font-size: 0.8rem; color: var(--color-fg-subtle); }
+.caos-knob-value { font-family: var(--font-mono); color: var(--color-fg); font-weight: 600; white-space: nowrap; }
+.caos-chipgroup { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
+.caos-chipgroup-label { font-size: 0.8rem; color: var(--color-fg-subtle); }
+.caos-field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.8rem; color: var(--color-fg-subtle); }
+/* Icons: lucide renders `svg.lucide`; its size follows the place it is in, so products pass no size and every app
+   draws the same icon at the same size. An icon beside text takes the text's size. */
+svg.lucide { flex: none; }
+.icon-btn svg.lucide, .brand-mark svg.lucide { width: var(--icon-lg); height: var(--icon-lg); }
+:is(.tab, .subtab, .chip, .btn, .nav-link, .badge, .callout-title, .caos-plot-head, .cs-chip, .caos-wb-rail-sections) svg.lucide { width: 1.15em; height: 1.15em; }
+/* == 8 case selector ============================================================================================ */
+.cs { display: flex; flex-direction: column; gap: 0.7rem; }
+.cs-source { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
+.cs-source-label { font-size: 0.78rem; font-weight: 600; color: var(--color-fg-subtle); text-transform: uppercase; letter-spacing: 0.03em; }
+.cs-source-tabs { display: inline-flex; gap: 0.35rem; flex-wrap: wrap; }
+.cs-locked { margin: 0; border-left-color: var(--color-accent); }
+.cs-group { display: flex; flex-direction: column; gap: 0.35rem; }
+.cs-group-label { font-size: 0.76rem; font-weight: 600; color: var(--color-fg-subtle); text-transform: uppercase; letter-spacing: 0.03em; }
+.cs-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
+.cs-chip { display: inline-flex; align-items: baseline; gap: 0.4rem; padding: 0.32rem 0.6rem; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-fg-subtle); font-size: var(--text-sm); font-weight: 500; transition: color 0.15s, background-color 0.15s, border-color 0.15s; }
+.cs-chip:hover:not(:disabled) { color: var(--color-fg); background: var(--color-surface-2); }
+.cs-chip.on { color: var(--color-accent); background: var(--color-accent-soft); border-color: color-mix(in oklab, var(--color-accent) 40%, transparent); font-weight: 600; }
+/* as for `.chip`: the chosen case's chip keeps its accent under the pointer (known shell defect 33) */
+.cs-chip.on:hover:not(:disabled) { color: var(--color-accent); background: var(--color-accent-soft); }
+.cs-chip:disabled { opacity: 0.45; cursor: default; }
+.cs-chip-id { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.76rem; font-weight: 600; opacity: 0.85; }
+.cs-kind { font-size: 0.62rem; font-weight: 700; line-height: 1; padding: 0.12rem 0.28rem; border-radius: 4px; border: 1px solid var(--color-border); color: var(--color-fg-faint); background: var(--color-surface-2); align-self: center; }
+.cs-kind-real { color: var(--color-accent-2); border-color: color-mix(in oklab, var(--color-accent-2) 40%, transparent); }
+.cs-kind-uploaded { color: var(--color-warn); border-color: color-mix(in oklab, var(--color-warn) 40%, transparent); }
+.cs-modified { display: flex; align-items: center; gap: 0.35rem 0.5rem; flex-wrap: wrap; min-width: 0; }
+.cs-modified .badge { white-space: normal; max-width: 100%; }
+.cs-reset { border: none; background: transparent; color: var(--color-accent); font-size: 0.8rem; font-weight: 600; padding: 0.1rem 0.2rem; text-decoration: underline; text-underline-offset: 2px; }
+/* The compact one-of-N case picker (ADR-0071 rule 7): ten cases in four categories cost a 308px chip block, 21% of a
+   2560x1440 viewport, and one row as a dropdown. */
+.cs-select { width: 100%; max-width: 460px; }
+/* == 9 workbench ================================================================================================ */
+/* The rail: sized, never scrolled when sections are used (ADR-0071 rule 6). */
+.caos-wb-rail { display: flex; flex-direction: column; gap: var(--space-3); min-height: 0; overflow-y: auto; overflow-x: hidden; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 0.85rem; }
+.caos-wb-rail-head { display: flex; flex-direction: column; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }
+.caos-wb-rail-panel { display: flex; flex-direction: column; gap: 0.8rem; min-height: 0; }
+/* A labelled control in the rail stacks its text above it; a knob's head keeps its own row, the value at the right
+   (until 0.9.3 this rule outranked `.caos-knob-head` and stacked every knob, a line per knob; CAOS_APP_SHELL#77). */
+.caos-wb-rail label:not(.caos-knob-head), .caos-focus-rail label:not(.caos-knob-head) { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.8rem; color: var(--color-fg-subtle); }
+.caos-wb-rail .select, .caos-wb-rail .range, .caos-focus-rail .select, .caos-focus-rail .range { width: 100%; }
+/* The variants wrap in the rail instead of scrolling. */
+.caos-wb-rail .caos-variant-bar, .caos-focus-rail .caos-variant-bar { margin-bottom: 0; }
+.caos-wb-rail .caos-chip-row, .caos-focus-rail .caos-chip-row { flex-wrap: wrap; overflow: visible; }
+.caos-wb-rail .caos-variant-note, .caos-focus-rail .caos-variant-note { font-size: 0.8rem; }
+.caos-wb-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
+/* CaseWorkbench: ONE row of at most six question groups; the open panel takes the height the row leaves and owns its
+   scroll (failure class 4: drawings at zero or at a guessed size). */
+.caos-cw { display: flex; flex-direction: column; min-height: 0; min-width: 0; flex: 1 1 auto; }
+.caos-cw > .tabs { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
+.caos-cw > .tabs > .tablist { margin-bottom: 0.5rem; padding-bottom: var(--space-1); }
+.caos-cw > .tabs > .tablist .tab { padding: 0.38rem 0.85rem; }
+.caos-cw > .tabs > .tabpanel:not([hidden]) { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; }
+.caos-cw-panel { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; flex: 1 1 auto; min-height: 0; }
+.caos-cw-panel-head { display: flex; justify-content: flex-end; }
+.caos-cw-panel > .subtabs { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin-block: 0; }
+.caos-cw-panel > .subtabs > .subtablist { margin-bottom: 0.45rem; }
+.caos-cw-panel > .subtabs > .subtabpanels, .caos-cw-panel > .subtabs > .subtabpanels > .subtabpanel { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
+.caos-cw-panel > .subtabs > .subtabpanels > .subtabpanel { gap: 0.6rem; }
+.caos-cw-context { max-width: 92ch; }
+/* VariantBar. */
+.caos-variant-bar { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.7rem; min-width: 0; }
+.caos-variant-head { display: flex; align-items: center; gap: 0.4rem 0.6rem; flex-wrap: wrap; }
+.caos-variant-title { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-fg-faint); font-weight: 600; }
+.caos-variant-note { margin: 0; font-size: 0.88rem; color: var(--color-fg-subtle); font-style: italic; }
+/* LaneBadge and provenance badges: which lane produced the values on screen, and on what data. */
+.caos-badges { display: inline-flex; gap: 0.3rem; flex-wrap: wrap; }
+.caos-lane-live { color: var(--color-good); border-color: color-mix(in oklab, var(--color-good) 45%, transparent); }
+.caos-lane-replay { color: var(--color-accent); border-color: color-mix(in oklab, var(--color-accent) 45%, transparent); }
+.caos-lane-offline { color: var(--color-warn); border-color: color-mix(in oklab, var(--color-warn) 45%, transparent); }
+.caos-prov-real { color: var(--color-accent-2); border-color: color-mix(in oklab, var(--color-accent-2) 45%, transparent); }
+.caos-prov-synthetic { color: var(--color-magenta); border-color: color-mix(in oklab, var(--color-magenta) 45%, transparent); }
+.caos-prov-published { color: var(--color-fg-subtle); }
+/* Tones shared by readouts, gauges and verdicts. */
+.tone-good { --tone: var(--color-good); }
+.tone-warn { --tone: var(--color-warn); }
+.tone-bad { --tone: var(--color-bad); }
+.tone-accent { --tone: var(--color-accent); }
+.tone-neutral { --tone: var(--color-fg-faint); }
+/* Readout: labelled live values with units. */
+.caos-readout { display: flex; flex-direction: column; gap: 0.35rem; }
+.caos-readout-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
+.caos-readout-title, .caos-gauge-title, .caos-verdict-title { margin: 0; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-fg-faint); font-weight: 600; }
+.caos-readout dl { margin: 0; display: grid; gap: var(--space-1); }
+.caos-readout-row { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); border-left: 3px solid var(--tone); padding-left: var(--space-2); }
+.caos-readout-row dt { color: var(--color-fg-subtle); }
+.caos-readout-row dd { margin: 0; text-align: right; }
+.caos-readout-value { font-family: var(--font-mono); font-weight: 650; color: var(--color-fg); }
+.caos-readout-unit { color: var(--color-fg-faint); font-size: 0.78rem; }
+/* Gauge: a value against labelled zones. */
+.caos-gauge-track { position: relative; height: 14px; border-radius: 7px; background: var(--color-surface-2); overflow: hidden; margin-top: 0.35rem; }
+.caos-gauge-zone { position: absolute; top: 0; height: 100%; background: var(--tone); opacity: 0.45; }
+.caos-gauge-needle { position: absolute; top: 0; width: 3px; height: 100%; background: var(--color-fg); transform: translateX(-1px); }
+.caos-gauge-scale { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--color-fg-faint); margin-top: 0.2rem; }
+.caos-gauge-value { color: var(--color-fg); font-weight: 700; font-family: var(--font-mono); }
+.caos-gauge-legend { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: 0.72rem; color: var(--color-fg-subtle); margin-top: var(--space-1); }
+.caos-gauge-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: var(--space-1); background: var(--tone); }
+/* Verdict: the current diagnosis, coloured by its tone. */
+.caos-verdict { border: 1px solid var(--color-border); border-left: 4px solid var(--tone); border-radius: var(--radius-md); padding: 0.7rem 0.85rem; background: var(--color-surface-2); }
+.caos-verdict-text { margin: 0.2rem 0 0; font-weight: 650; color: var(--color-fg); }
+.caos-verdict.compact { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.6rem; padding: 0.4rem 0.7rem; }
+.caos-verdict.compact .caos-verdict-text { margin: 0; }
+/* PlotCard: the frame every chart or table sits in. */
+.caos-plot { margin: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 0.45rem 0.6rem 0.4rem; min-width: 0; }
+.caos-plot-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); margin-bottom: 0.2rem; font-style: normal; text-align: left; min-height: 1.5rem; }
+.caos-plot-head .badge { font-size: 0.68rem; padding: 0.05rem 0.45rem; }
+.caos-plot-title { font-size: var(--text-sm); color: var(--color-fg-subtle); font-weight: 600; }
+.caos-plot-actions { display: inline-flex; gap: 0.3rem; }
+.caos-plot-body { position: relative; min-width: 0; overflow-x: auto; }
+.caos-plot-note { margin: 0.4rem 0 0; font-size: 0.78rem; color: var(--color-fg-faint); }
+.caos-plot.fill { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
+.caos-plot.fill > .caos-plot-body { flex: 1 1 0; min-height: 0; overflow: hidden; }
+/* The note of a filling card keeps at most 35% of the card and scrolls beyond it, so the drawing keeps a floor
+   (CAOS_APP_SHELL#95: a long note left plots of 10 to 90 px at 1280 x 800). */
+.caos-plot.fill > .caos-plot-note { flex: 0 1 auto; max-height: 35%; overflow-y: auto; }
+/* The stage floor of a filling card (shell 0.11.2; the gate's G6 floor, `--stage-floor` 140 px). At 1280 px and wider the
+   body of a filling card, the box the gate measures, keeps at least the floor itself, so the card grows when its header
+   or its note wraps (a narrow column, the Spanish title, two badges, the wide font) and the containing panel scrolls
+   when the cards do not fit (ADR-0071; the rail never does). 0.11.1 derived a card height from a fixed chrome instead,
+   and a header that wrapped to a third line left the stage under the floor (CAOS_Contraste 0.07.000: 138 px; a
+   400 px column with a note: 106 px). Below 1280 px the document scrolls and nothing changes. */
+@media (min-width: 1280px) {
+  .caos-plot.fill > .caos-plot-body { min-height: var(--caos-stage-floor, 140px); }
+}
+/* A row of views side by side. Every view of the row takes an equal share, a filling card included (known shell
+   defect 23, #54: `.caos-plot.fill` outranked the row's zero basis and took the row). */
+.caos-views-row { display: flex; gap: 0.9rem; flex: 1 1 auto; min-height: 0; min-width: 0; }
+.caos-views-row > *, .caos-views-row > .caos-plot.fill { flex: 1 1 0; min-width: 0; }
+/* ViewsRow's column: a view inside it keeps its height chain (a filling card fills the column); its share of the row
+   is its flex-grow. */
+.caos-views-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; gap: 0.6rem; }
+/* Staleness: a view showing data for an earlier selection says so. */
+.caos-stale .caos-plot-body > :not(.caos-stale-overlay), .caos-readout.caos-stale dl { opacity: 0.45; }
+.caos-stale-overlay { position: absolute; inset: auto 0.5rem 0.5rem auto; padding: 0.25rem 0.55rem; border-radius: var(--radius-sm); background: var(--color-surface-2); border: 1px solid var(--color-border); font-size: 0.76rem; color: var(--color-warn); }
+.caos-stale-note { margin: 0.2rem 0 0; font-size: 0.76rem; color: var(--color-warn); }
+/* Stage: the drawing surface of an instrument, sized by its container. */
+.caos-stage { position: relative; width: 100%; height: 100%; min-width: 0; min-height: 0; }
+/* BarChart: as wide as its box; a filling chart takes the box's height and scrolls rows that do not fit. */
+.caos-bars { position: relative; width: 100%; min-width: 0; }
+.caos-bars.fill { height: 100%; min-height: 0; overflow-y: auto; }
+.caos-bars > svg { display: block; }
+/* A view whose data is not there yet says so (and declares data-state="loading" for the gate). */
+.caos-pending { margin: auto; padding: var(--space-5); color: var(--color-fg-faint); font-size: 0.86rem; text-align: center; }
+/* A failed view (PanelBoundary): an inline message in its own frame, never a blank page. */
+.caos-panel-error { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: baseline; padding: 0.7rem 0.9rem; border: 1px solid color-mix(in oklab, var(--color-bad) 45%, transparent); border-left: 4px solid var(--color-bad); border-radius: var(--radius-md); background: var(--color-surface-2); color: var(--color-fg); font-size: 0.86rem; }
+.caos-panel-error code { flex-basis: 100%; font-size: 0.78rem; color: var(--color-fg-subtle); }
+/* Tables in views and documents: tabular figures, compact rows, a header that stays in view while the body scrolls.
+   A column of words reads left-aligned and wraps; numbers stay right-aligned. */
+.caos-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--color-fg); }
+.caos-table th, .caos-table td { padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--color-border); text-align: right; white-space: nowrap; }
+.caos-table th:first-child, .caos-table td:first-child { text-align: left; }
+.caos-table th.caos-col-text, .caos-table td.caos-col-text { text-align: left; white-space: normal; min-width: 16ch; }
+.caos-table thead th { position: sticky; top: 0; background: var(--color-surface); color: var(--color-fg-subtle); font-weight: 600; border-bottom-color: var(--color-fg-faint); }
+.caos-table tbody tr:hover { background: var(--color-surface-2); }
+@media (max-width: 900px) {
+  /* The views of a row stack; a filling view gets a fixed readable height instead of the panel's. */
+  .caos-views-row { flex-direction: column; }
+  .caos-views-row > *, .caos-views-row > .caos-plot.fill { flex: none; }
+  .caos-plot.fill > .caos-plot-body { flex: none; height: clamp(260px, 48vh, 440px); }
+  .caos-plot.fill > .caos-plot-note { max-height: none; overflow-y: visible; }
+}
+@media (max-width: 760px) {
+  /* A phone wraps the cells instead of pushing the table past the page (found by the gate on the template). */
+  .caos-table th, .caos-table td { white-space: normal; padding: 0.3rem 0.4rem; }
+}
+/* == 10 frames ================================================================================================== */
+/* ADR-0070: the shell-owned, full-viewport scenario focus frame. */
+.caos-focus-shell { position: fixed; inset: 0; z-index: var(--z-focus); display: grid; grid-template-columns: minmax(0,1fr) var(--rail-w); min-width: 0; height: 100dvh; background: var(--color-bg); color: var(--color-fg); }
+.caos-focus-stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--color-bg); }
+.caos-focus-instrument { position: absolute; inset: 0; min-width: 0; min-height: 0; }
+.caos-focus-label, .caos-focus-hud > div { background: color-mix(in oklab,var(--color-surface) 82%,transparent); backdrop-filter: blur(6px); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
+.caos-focus-label { position: absolute; top: 14px; left: 14px; max-width: min(46ch,calc(100% - 230px)); display: grid; gap: 4px; padding: 10px 12px; pointer-events: none; }
+.caos-focus-label strong { font-size: 0.96rem; line-height: 1.2; }
+.caos-focus-label span { font-size: 0.78rem; line-height: 1.4; color: var(--color-fg-subtle); }
+.caos-focus-hud { position: absolute; left: 14px; top: 104px; display: grid; gap: 6px; pointer-events: none; }
+.caos-focus-hud > div { display: grid; gap: 1px; padding: 7px 10px; min-width: 120px; }
+.caos-focus-hud strong { font: 700 1rem var(--font-mono,monospace); }
+.caos-focus-hud span { color: var(--color-fg-subtle); font-size: 0.61rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; }
+.caos-focus-actions { position: absolute; top: 12px; right: 12px; display: flex; gap: 6px; align-items: center; padding: 4px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: color-mix(in oklab,var(--color-surface) 90%,transparent); backdrop-filter: blur(6px); }
+.caos-focus-actions button { border: 0; border-radius: 4px; padding: 6px 9px; background: var(--color-surface-2); color: var(--color-fg); font-size: 0.75rem; font-weight: 700; cursor: pointer; }
+.caos-focus-rail { min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; border-left: 1px solid var(--color-border); background: var(--color-surface); }
+@media (max-width: 900px) {
+  .caos-focus-shell { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,54dvh) minmax(0,46dvh); }
+  .caos-focus-rail { border-left: 0; border-top: 1px solid var(--color-border); }
+  .caos-focus-label { max-width: calc(100% - 16px); top: 49px; left: 8px; padding: 6px 8px; }
+  .caos-focus-hud { top: auto; bottom: 8px; left: 8px; right: 8px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; }
+  .caos-focus-hud > div { min-width: 0; padding: 5px; }
+  .caos-focus-hud strong { font-size: 0.72rem; white-space: nowrap; }
+  .caos-focus-hud span { font-size: 0.48rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .caos-focus-actions { top: 7px; right: 7px; }
+}
+/* The authenticated console frame (WorkbenchShell): a sidebar on a desktop, a bottom bar on a phone. Products supply
+   their slots; the package owns the frame, the navigation semantics and the main landmark. */
+.caos-workbench-shell { min-height: 100vh; display: grid; grid-template-columns: 238px minmax(0, 1fr); }
+.caos-workbench-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; width: 238px; display: flex; flex-direction: column; padding: 1.25rem 0.875rem; border-right: 1px solid var(--color-border); background: var(--color-surface); }
+.caos-workbench-sidebar nav { display: grid; gap: var(--space-1); }
+.caos-workbench-sidebar nav a { display: flex; align-items: center; gap: var(--space-3); padding: 0.625rem 0.7rem; border: 1px solid transparent; border-radius: 0.7rem; color: var(--color-fg-subtle); font-size: 0.9rem; font-weight: 650; }
+.caos-workbench-sidebar nav a:hover { color: var(--color-fg); background: var(--color-surface-2); text-decoration: none; }
+.caos-workbench-sidebar nav a.active { color: var(--color-accent); border-color: color-mix(in oklab, var(--color-accent) 24%, transparent); background: var(--color-accent-soft); }
+.caos-workbench-sidebar nav a svg.lucide { width: var(--icon-lg); height: var(--icon-lg); }
+.caos-workbench-main { grid-column: 2; min-width: 0; }
+.caos-workbench-header { position: sticky; top: 0; z-index: 15; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 0 2rem; border-bottom: 1px solid var(--color-border); background: color-mix(in oklab, var(--color-bg) 88%, transparent); backdrop-filter: blur(12px); }
+.caos-workbench-content { width: min(1540px, 100%); margin: 0 auto; padding: 2.25rem 2rem 4rem; }
+@media (max-width: 760px) {
+  .caos-workbench-shell { display: block; padding-bottom: 66px; }
+  .caos-workbench-sidebar { inset: auto 0 0; width: auto; height: 62px; display: block; border: 0; border-top: 1px solid var(--color-border); padding: 5px 8px; }
+  .caos-workbench-sidebar > :not(nav) { display: none; }
+  .caos-workbench-sidebar nav { grid-template-columns: repeat(var(--caos-workbench-route-count, 5), minmax(0, 1fr)); }
+  .caos-workbench-sidebar nav a { display: grid; justify-items: center; gap: 2px; overflow: hidden; padding: 5px; font-size: 0.7rem; text-overflow: ellipsis; white-space: nowrap; }
+  .caos-workbench-main { min-width: 0; }
+  .caos-workbench-header { min-height: 58px; padding: 0 1rem; }
+  .caos-workbench-content { padding: 1.5rem 1rem 2.5rem; }
+}
+/* ADR-0058: the architecture modal. A hand-authored architecture SVG carries BOTH languages in ONE file and the
+   wrapper picks one; the rules are scoped to [data-arch-lang] so the short class names cannot collide. */
+[data-arch-lang] .l-es { display: none; }
+[data-arch-lang="es"] .l-en { display: none; }
+[data-arch-lang="es"] .l-es { display: inline; }
+.caos-architecture-diagram > svg { display: block; width: 100%; height: auto; max-width: none; }
+.caos-arch-toggle { margin: 0 0 8px; font-size: 12px; padding: 5px 10px; color: var(--color-fg); background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; }
+/* The executive view (shell 0.12.0, conventions/problem-context-first.md): four sections in order, three inline illustrations,
+   numbered source notes. The product fills content/executive.json; it never styles this view. Illustrations are inline SVG
+   coloured with the theme tokens; a drawing carrying both languages shows the labels of the displayed one. */
+.caos-exec { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
+/* the landing block above the sub-tabs: the title, the key statement, the headline figures */
+.caos-exec-landing { min-width: 0; }
+.caos-exec-title { margin: 0 0 0.35rem; font-size: var(--text-xl); }
+.caos-exec-statement { margin: 0 0 1rem; font-size: var(--text-lg); line-height: 1.45; }
+.caos-exec-headline, .caos-exec-figures { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.75rem; }
+.caos-exec-figures { margin-block: 1rem; }
+.caos-exec-figure { min-width: 0; padding: 0.7rem 1rem; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow-wrap: anywhere; }
+.caos-exec-label { display: inline-block; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-fg-faint); font-weight: 650; }
+.caos-exec-figure > .caos-exec-label { display: block; margin-bottom: 0.1rem; }
+.caos-exec-value { font-size: var(--text-xl); font-variant-numeric: tabular-nums; color: var(--color-accent); }
+.caos-exec-sep { color: var(--color-fg-faint); }
+.caos-exec-cite { margin-left: 0.15rem; font-size: var(--text-xs); }
+/* a sub-tab: the key message line first, then the supporting content, all at the full width of the column */
+.caos-exec-tabs { min-width: 0; }
+.caos-exec-section { min-width: 0; }
+.caos-exec-key { margin: 0 0 1rem; font-size: var(--text-lg); line-height: 1.45; font-weight: 600; }
+.caos-exec-paragraph { margin: 0 0 0.75rem; }
+.caos-exec-sub { margin: 1.25rem 0 0.5rem; font-size: var(--text-md); }
+.caos-exec-setting, .caos-exec-interaction, .caos-exec-status, .caos-exec-handoff { margin: 0.75rem 0; overflow-wrap: anywhere; }
+.caos-exec-cards, .caos-exec-cs, .caos-exec-actions, .caos-exec-causes, .caos-exec-evidence, .caos-exec-list { list-style: none; margin: 0; padding: 0; }
+.caos-exec-cards, .caos-exec-cs { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.9rem; }
+.caos-exec-actions, .caos-exec-causes { display: flex; flex-direction: column; gap: 0.7rem; }
+.caos-exec-card { min-width: 0; padding: 0.8rem 1rem; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: 0.5rem; overflow-wrap: anywhere; }
+.caos-exec-list li, .caos-exec-evidence li { margin-block: 0.35rem; overflow-wrap: anywhere; }
+.caos-exec-list, .caos-exec-evidence { list-style: disc; padding-left: 1.3rem; }
+.caos-exec-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; }
+.caos-exec-badge { align-self: flex-start; padding: 0.1rem 0.5rem; font-size: var(--text-xs); border: 1px solid var(--color-border); border-radius: 999px; color: var(--color-fg-subtle); }
+.caos-exec-cause { min-width: 0; overflow-wrap: anywhere; }
+.caos-exec-cause-head { display: flex; justify-content: space-between; gap: 1rem; }
+.caos-exec-bar { height: 0.45rem; margin-top: 0.3rem; background: var(--color-surface-2); border-radius: 999px; overflow: hidden; }
+.caos-exec-bar > span { display: block; height: 100%; background: var(--color-accent); }
+.caos-exec-cdef { font-size: var(--text-xs); line-height: 1.4; color: var(--color-fg-faint); }
+.caos-exec-fig { margin: 1.25rem 0; }
+.caos-exec-art { width: 100%; max-width: 640px; margin-inline: auto; }
+.caos-exec-art > svg { display: block; width: 100%; height: auto; }
+.caos-exec-art-wait { aspect-ratio: 8 / 5; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
+.caos-exec-fig svg text { font-family: var(--font-sans); }
+.caos-exec-fig[data-lang="en"] [data-lang="es"], .caos-exec-fig[data-lang="es"] [data-lang="en"] { display: none; }
+.caos-exec-fig-error { margin: 0 auto; max-width: 640px; padding: 1rem; border: 1px solid var(--color-bad); border-radius: var(--radius-md); color: var(--color-fg); overflow-wrap: anywhere; }
+/* below the sub-tabs: the numbered linked sources, then the onward links */
+.caos-exec-notes-wrap { border-top: 1px solid var(--color-border); padding-top: 0.75rem; }
+.caos-exec-notes-title { margin: 0 0 0.35rem; font-size: var(--text-sm); color: var(--color-fg-faint); }
+.caos-exec-notes { margin: 0; padding-left: 1.4rem; font-size: var(--text-sm); color: var(--color-fg-subtle); overflow-wrap: anywhere; }
+.caos-exec-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; padding-top: 0.25rem; }
+.caos-exec-link { font-weight: 600; }
+.caos-exec-error { padding: 1rem 1.25rem; border: 1px solid var(--color-bad); border-radius: var(--radius-md); }
+/* == flip cards and the card deck (shell 0.14.0) ================================================================== */
+/* A flip card: two faces stacked in one cell (the card is as tall as its back, so a row of cards keeps one height), the
+   inner box turns on the Y axis. The hidden face leaves the accessibility tree and the tab order through `visibility`
+   (switched after the turn on the way out, at once on the way in) and `aria-hidden`; its content stays in the markup.
+   Theme tokens only. Under reduced motion the faces swap without the turn. */
+.caos-flip { position: relative; display: flex; min-width: 0; width: 100%; perspective: 1100px; }
+.caos-flip-inner { display: grid; flex: 1 1 auto; min-width: 0; transform-style: preserve-3d; transition: transform 0.45s ease; }
+.caos-flip[data-flip-open="true"] > .caos-flip-inner { transform: rotateY(180deg); }
+.caos-flip-face { grid-area: 1 / 1; min-width: 0; display: flex; flex-direction: column; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow-wrap: anywhere; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: visibility 0s linear 0s; }
+.caos-flip-back { transform: rotateY(180deg); visibility: hidden; padding: 0.8rem 1rem; gap: 0.5rem; transition: visibility 0s linear 0.45s; }
+.caos-flip[data-flip-open="true"] > .caos-flip-inner > .caos-flip-front { visibility: hidden; transition-delay: 0.45s; }
+.caos-flip[data-flip-open="true"] > .caos-flip-inner > .caos-flip-back { visibility: visible; transition-delay: 0s; }
+.caos-flip-toggle { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
+.caos-flip-front > .caos-flip-toggle { flex: 1 1 auto; padding: 0.8rem 1rem; font-weight: 650; border-radius: var(--radius-md); }
+.caos-flip-front:hover { border-color: var(--color-accent); }
+.caos-flip-title { min-width: 0; }
+.caos-flip-icon { flex: none; color: var(--color-fg-faint); }
+.caos-flip-return { flex: none; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 650; color: var(--color-fg-faint); }
+.caos-flip-return-title { min-width: 0; }
+.caos-flip-content { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
+@media (prefers-reduced-motion: reduce) {
+  .caos-flip-inner { transform: none !important; transition: none !important; }
+  .caos-flip-back { transform: none !important; }
+  .caos-flip-face { transition: none !important; }
+}
+/* The card deck: a row of cards, or a carousel that pages through them (one window of as many cards as fit, at least
+   one; the page and the panel never scroll sideways). Entering cards slide in; reduced motion removes it. */
+.caos-deck { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
+.caos-deck-track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.9rem; min-width: 0; touch-action: pan-y; }
+.caos-deck[data-deck-mode="carousel"] > .caos-deck-track { grid-template-columns: repeat(var(--deck-per, 1), minmax(0, 1fr)); }
+.caos-deck-card { min-width: 0; display: flex; }
+.caos-deck-card[hidden] { display: none; }
+.caos-card { flex: 1 1 auto; min-width: 0; padding: 0.8rem 1rem; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: 0.5rem; overflow-wrap: anywhere; }
+.caos-deck-bar { display: flex; align-items: center; justify-content: center; gap: 0.75rem; }
+.caos-deck-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); color: var(--color-fg); cursor: pointer; }
+.caos-deck-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
+.caos-deck-btn[aria-disabled="true"] { opacity: 0.4; cursor: default; }
+.caos-deck-btn[aria-disabled="true"]:hover { border-color: var(--color-border); color: var(--color-fg); }
+.caos-deck-position { min-width: 6.5rem; text-align: center; font-size: var(--text-sm); color: var(--color-fg-subtle); font-variant-numeric: tabular-nums; }
+@keyframes caos-deck-in { from { opacity: 0; transform: translateX(0.75rem); } to { opacity: 1; transform: none; } }
+.caos-deck[data-deck-moved] .caos-deck-card { animation: caos-deck-in 0.28s ease-out; }
+@media (prefers-reduced-motion: reduce) { .caos-deck-card { animation: none !important; } }
+/* Flip cards inside the executive view keep the width of the plain cards they replace. */
+.caos-exec .caos-exec-cs.caos-deck-track { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
+.caos-exec .caos-deck[data-deck-mode="carousel"] > .caos-exec-cs.caos-deck-track { grid-template-columns: repeat(var(--deck-per, 1), minmax(0, 1fr)); }
+/* == Focus mode for the App (shell 0.14.0, ADR-0070) ================================================================== */
+/* The stage is the open group; the label overlay (heading and line) sits above it, so the group starts below the label. */
+.caos-focus-instrument > .caos-cw-focus { position: absolute; inset: 0; padding: 4.6rem 0.9rem 0.9rem; }
+.caos-focus-instrument > .caos-cw-focus > .tabs { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
+.caos-focus-rail-body { display: flex; flex-direction: column; gap: var(--space-3); padding: 0.85rem; min-width: 0; }
+.caos-focus-enter { align-self: flex-start; }
+@media (max-width: 900px) {
+  .caos-focus-instrument > .caos-cw-focus { padding: 6.6rem 0.5rem 0.5rem; }
+}