@fasl-work/caos-app-shell 0.20.0 → 0.22.0

package/CHANGELOG.md

@@ -1,3 +1,38 @@
+## [0.22.000] - 2026-11-06
+
+### Added
+
+- Add explicit `density="compact"` to `Tabs` and `tabDensity="compact"` to `CaseWorkbench`, preserving labels, keyboard behavior and overflow while reducing vertical navigation chrome for short viewports.
+
+### Fixed
+
+- Keep six guided story steps on one horizontally scrollable row at phone, tablet and desktop widths (SHW-055, issue 183).
+
+### Adoption
+
+- Products with short viewports may opt into compact tab rows; default density remains unchanged.
+
+## [0.21.000] - 2026-11-05
+
+### Added
+
+- Add `ShellConfig.immersiveRoutes` for route-specific full-viewport story framing. The route keeps the skip link and product identity on the main landmark while the shell omits header and footer; phone layouts return to document scrolling.
+- Add the bounded `railWidth` API to `WorkbenchLayout` and `CaseWorkbench`, with shared compact rail spacing for measured workbench layouts.
+
+### Fixed
+
+- Make a filling `PlotCard` containing a `Stage` and a direct child marked `data-caos-plot-control` allocate drawing height to the stage while keeping the control reachable, with no product CSS override.
+
+### Adoption
+
+- Products use `immersiveRoutes` and `railWidth` for guided full-screen stories and tuned desktop rails, then remove CSS overrides of shell-reserved classes.
+## [0.20.001] - 2026-11-05
+
+### Fixed
+
+- Publish the package from the canonical CI build and verify registry SHA-512 integrity, preventing platform line endings from changing the release tarball.
+- Normalize padded release versions when matching GitHub tags, and make retries safe for an already-published identical package.
+
 ## [0.20.000] - 2026-11-05
 
 ### Added
@@ -1294,3 +1329,17 @@ All notable changes to this product. Format: `X.XX.XXX` (display, see the worksp
 
 - All configured page routes remain reachable on mobile through a compact second header row. Links scroll horizontally inside the header, retain their active-page semantics and remain visible when reached by keyboard focus.
 - Real-browser navigation tests exercise all six routes by click and keyboard at 320, 390 and 1440 px, in EN/ES and both themes. They verify viewport containment and a header below 100 px so the main instrument retains most of the viewport.
+## [0.21.000] - 2026-11-05
+
+### Added
+
+- Add `ShellConfig.immersiveRoutes` for route-specific full-viewport story framing. The route keeps the skip link and product identity on the main landmark while the shell omits header and footer; phone layouts return to document scrolling.
+- Add the bounded `railWidth` API to `WorkbenchLayout` and `CaseWorkbench`, with shared compact rail spacing for measured workbench layouts.
+
+### Fixed
+
+- Make a filling `PlotCard` containing a `Stage` and a direct child marked `data-caos-plot-control` allocate drawing height to the stage while keeping the control reachable, with no product CSS override.
+
+### Adoption
+
+- Products use `immersiveRoutes` and `railWidth` for guided full-screen stories and tuned desktop rails, then remove CSS overrides of shell-reserved classes.

package/VERSION

@@ -1 +1 @@
-0.20.000
+0.22.000

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { A as APP_ROUTE, a as AppShell, b as ArchTab, c as ArchitectureConfig, d as ArchitectureModal, L as LANDING_ROUTE, e as LANG_STORAGE_KEY, S as STANDARD_ROUTES, f as ShellConfig, g as ShellRoute, T as THEME_BOOT_SCRIPT, h as THEME_STORAGE_KEY, v as validateArchitectureConfig } from './keys-DDQGijwQ.js';
+export { A as APP_ROUTE, a as AppShell, b as ArchTab, c as ArchitectureConfig, d as ArchitectureModal, L as LANDING_ROUTE, e as LANG_STORAGE_KEY, S as STANDARD_ROUTES, f as ShellConfig, g as ShellRoute, T as THEME_BOOT_SCRIPT, h as THEME_STORAGE_KEY, v as validateArchitectureConfig } from './keys-D-pSo8hG.js';
 import * as react from 'react';
 import { ReactNode, Component, ErrorInfo, ChangeEvent } from 'react';
 import * as zustand from 'zustand';
@@ -361,6 +361,8 @@ interface TabDef {
 declare const MAX_PEER_TABS = 6;
 interface TabsProps {
     tabs: TabDef[];
+    /** Explicit row density for short workbench viewports; `comfortable` preserves the default spacing. */
+    density?: 'comfortable' | 'compact';
     /** Uncontrolled: the first selected tab. */
     initial?: string;
     /** Controlled: the selected tab, owned by the app (for example a view held in the URL). */
@@ -380,7 +382,7 @@ interface TabsProps {
  * is rendered, inside an error boundary; a row wider than its box fades the hidden end. Controlled when `value` is
  * given (known shell defect 6). More than six peers is reported (rule 5).
  */
-declare function Tabs({ tabs, initial, value, onChange, ariaLabel, trailing }: TabsProps): react.JSX.Element;
+declare function Tabs({ tabs, initial, value, onChange, ariaLabel, trailing, density }: TabsProps): react.JSX.Element;
 
 interface SubTabDef {
     id: string;
@@ -1169,6 +1171,8 @@ interface WorkbenchLayoutProps {
     /** Accessible name of the rail. */
     railLabel?: BiText;
     className?: string;
+    /** Product-calibrated desktop rail width in CSS pixels. Keep within 150–360 px. */
+    railWidth?: number;
 }
 /**
  * The App route of a CAOS product: a sized control rail beside the instrument, on the full viewport.
@@ -1178,7 +1182,7 @@ interface WorkbenchLayoutProps {
  * explicit width that never scrolls (rule 6), and an instrument marked `data-instrument` so the measured gate
  * can check that it covers at least 60% of the viewport, and Focus at least 80% (ADR-0082). Pair with `ShellConfig.contain`.
  */
-declare function WorkbenchLayout({ rail, railHead, children, railLabel, className }: WorkbenchLayoutProps): react.JSX.Element;
+declare function WorkbenchLayout({ rail, railHead, children, railLabel, className, railWidth }: WorkbenchLayoutProps): react.JSX.Element;
 
 /** One configured regime of a case: a full parameter vector, never a cosmetic label (ADR-0016 §9). */
 interface VariantDef {
@@ -1232,6 +1236,10 @@ interface CaseWorkbenchProps {
      * as one node or as sections shown one at a time (ADR-0071 rule 6). */
     rail?: ReactNode | RailSection[];
     railLabel?: BiText;
+    /** Desktop control-rail width, passed to WorkbenchLayout (150–360 px). */
+    railWidth?: number;
+    /** Density of the case-group tab row; compact preserves every tab while reducing vertical chrome. */
+    tabDensity?: 'comfortable' | 'compact';
     /** The instrument: the case's own question groups (for example Model, Validation, Impact, Findings). */
     groups: WorkbenchGroup[];
     /** The comparison across the case's variants (one metric per regime; selecting one loads it). */

package/dist/index.js

@@ -377,14 +377,15 @@ function Frame({ config, pathname, routed, children }) {
   }, [lang]);
   const archLabel = lang === "es" ? "Arquitectura / C\xF3mo funciona" : "Architecture / How it works";
   const fixed = config.contain === true || config.fixed === true || (config.fixedRoutes ?? []).some((p) => p === pathname || p !== "/" && pathname.startsWith(p.replace(/\/$/, "") + "/"));
+  const immersive = (config.immersiveRoutes ?? []).some((p) => p === pathname || p !== "/" && pathname.startsWith(p.replace(/\/$/, "") + "/"));
   const license = config.license ? pick(config.license, lang) : config.footer?.license?.[lang] ?? "";
   const brand = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("span", { className: "brand-mark", children: config.product.mark ?? /* @__PURE__ */ jsx(Boxes, { size: 18, "aria-hidden": "true" }) }),
     /* @__PURE__ */ jsx("span", { children: config.product.name })
   ] });
-  return /* @__PURE__ */ jsxs("div", { className: config.contain ? "app-shell fixed contain" : fixed ? "app-shell fixed" : "app-shell", children: [
+  return /* @__PURE__ */ jsxs("div", { className: ["app-shell", config.contain || fixed || immersive ? "fixed" : "", config.contain ? "contain" : "", immersive ? "immersive" : ""].filter(Boolean).join(" "), children: [
     /* @__PURE__ */ jsx("a", { className: "skip-link", href: "#main", children: c.skip }),
-    /* @__PURE__ */ jsx("header", { className: "site-header", children: /* @__PURE__ */ jsxs("div", { className: "header-inner", children: [
+    !immersive && /* @__PURE__ */ jsx("header", { className: "site-header", children: /* @__PURE__ */ jsxs("div", { className: "header-inner", children: [
       routed ? /* @__PURE__ */ jsx(NavLink, { to: "/", className: "brand", "aria-label": config.product.name, "data-brand": config.product.name, children: brand }) : /* @__PURE__ */ jsx("a", { href: "/", className: "brand", "aria-label": config.product.name, "data-brand": config.product.name, children: brand }),
       routes.length > 1 && /* @__PURE__ */ jsx(Nav, { routes, name: config.product.name, routed, pathname }),
       /* @__PURE__ */ jsxs("div", { className: "header-actions", children: [
@@ -398,8 +399,8 @@ function Frame({ config, pathname, routed, children }) {
       ] })
     ] }) }),
     config.architecture && archOpen && /* @__PURE__ */ jsx(ArchitectureModal, { config: config.architecture, onClose: () => setArchOpen(false) }),
-    /* @__PURE__ */ jsx("main", { className: "page", id: "main", tabIndex: -1, children: /* @__PURE__ */ jsx(PanelBoundary, { panel: "page", children }) }),
-    /* @__PURE__ */ jsx("footer", { className: "site-footer", children: /* @__PURE__ */ jsx("div", { className: "footer-inner", children: /* @__PURE__ */ jsxs("div", { className: "footer-meta", ref: footRef, children: [
+    /* @__PURE__ */ jsx("main", { className: "page", id: "main", tabIndex: -1, "data-brand": config.product.name, children: /* @__PURE__ */ jsx(PanelBoundary, { panel: "page", children }) }),
+    !immersive && /* @__PURE__ */ jsx("footer", { className: "site-footer", children: /* @__PURE__ */ jsx("div", { className: "footer-inner", children: /* @__PURE__ */ jsxs("div", { className: "footer-meta", ref: footRef, children: [
       /* @__PURE__ */ jsx("span", { children: config.product.name }),
       /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }),
       /* @__PURE__ */ jsx("span", { children: c.complement }),
@@ -1049,7 +1050,7 @@ function ReferenceList({ ids, heading }) {
   ] });
 }
 var MAX_PEER_TABS = 6;
-function Tabs({ tabs, initial, value, onChange, ariaLabel, trailing }) {
+function Tabs({ tabs, initial, value, onChange, ariaLabel, trailing, density = "comfortable" }) {
   const baseId = useId();
   const first = tabs[0]?.id ?? "";
   const memory = useContext(ViewMemoryContext);
@@ -1085,7 +1086,7 @@ function Tabs({ tabs, initial, value, onChange, ariaLabel, trailing }) {
     }
   }
   const current = tabs.find((t2) => t2.id === active) ?? tabs[0];
-  return /* @__PURE__ */ jsxs("div", { className: trailing === void 0 ? "tabs" : "tabs tabs-has-slot", children: [
+  return /* @__PURE__ */ jsxs("div", { className: `${trailing === void 0 ? "tabs" : "tabs tabs-has-slot"}${density === "compact" ? " tabs-compact" : ""}`, children: [
     /* @__PURE__ */ jsx("div", { className: "tablist", role: "tablist", "aria-label": ariaLabel, ref: rowRef, children: tabs.map((tab, idx) => {
       const selected = tab.id === current?.id;
       return /* @__PURE__ */ jsx(
@@ -3773,10 +3774,13 @@ function RailBody({ rail, railHead, railLabel }) {
     ] }) : /* @__PURE__ */ jsx("div", { className: "caos-wb-rail-panel", children: rail })
   ] });
 }
-function WorkbenchLayout({ rail, railHead, children, railLabel, className }) {
+function WorkbenchLayout({ rail, railHead, children, railLabel, className, railWidth }) {
   const lang = useShellLang();
   const label = pick(railLabel ?? { en: "Controls", es: "Controles" }, lang);
-  return /* @__PURE__ */ jsxs("div", { className: ["page-body", "wide", "caos-wb", className].filter(Boolean).join(" "), "data-workbench": "", children: [
+  if (railWidth !== void 0 && (!Number.isFinite(railWidth) || railWidth < 150 || railWidth > 360)) {
+    throw new RangeError("WorkbenchLayout.railWidth must be a finite value from 150 to 360 px");
+  }
+  return /* @__PURE__ */ jsxs("div", { className: ["page-body", "wide", "caos-wb", className].filter(Boolean).join(" "), style: railWidth === void 0 ? void 0 : { "--rail-w": `${railWidth}px` }, "data-workbench": "", "data-rail-width": railWidth, children: [
     /* @__PURE__ */ jsx("aside", { className: "caos-wb-rail", "aria-label": label, "data-rail": "", children: /* @__PURE__ */ jsx(RailBody, { rail, railHead, railLabel }) }),
     /* @__PURE__ */ jsx("section", { className: "caos-wb-main", "data-instrument": "", children })
   ] });
@@ -3857,7 +3861,7 @@ function panel(id, lane, provenance, content) {
   return /* @__PURE__ */ jsx("div", { className: "caos-cw-panel", "data-group": id, "data-lane": lane, "data-provenance": provenance, children: content });
 }
 function CaseWorkbench(props) {
-  const { caseId, cases, source, controls, replayOnly, noteFit, variants, rail, railLabel, groups, compare, context, group, onGroupChange, deepLinkView = true, ariaLabel, focus } = props;
+  const { caseId, cases, source, controls, replayOnly, noteFit, variants, rail, railLabel, railWidth, tabDensity = "comfortable", groups, compare, context, group, onGroupChange, deepLinkView = true, ariaLabel, focus } = props;
   const lang = useShellLang();
   const focusCfg = focus === true ? {} : focus || null;
   const { show: showFocus, setFocus, enterRef, memory } = useFocusMode(focusCfg);
@@ -3937,14 +3941,15 @@ function CaseWorkbench(props) {
       }
     ) }) });
   }
-  return /* @__PURE__ */ jsx(ViewMemoryContext.Provider, { value: memory, children: /* @__PURE__ */ jsx(WorkbenchStateContext.Provider, { value: { stateKey, caseId, variantId, source }, children: /* @__PURE__ */ jsx(WorkbenchLayout, { rail: rail ?? null, railHead, railLabel, children: /* @__PURE__ */ jsx("div", { className: "caos-cw", ...instrumentData, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(ViewMemoryContext.Provider, { value: memory, children: /* @__PURE__ */ jsx(WorkbenchStateContext.Provider, { value: { stateKey, caseId, variantId, source }, children: /* @__PURE__ */ jsx(WorkbenchLayout, { rail: rail ?? null, railHead, railLabel, railWidth, children: /* @__PURE__ */ jsx("div", { className: "caos-cw", ...instrumentData, children: /* @__PURE__ */ jsx(
     Tabs,
     {
       tabs,
       value: openGroup,
       onChange: selectGroup,
       ariaLabel: pick(ariaLabel ?? { en: "Case views", es: "Vistas del caso" }, lang),
-      trailing: enter || void 0
+      trailing: enter || void 0,
+      density: tabDensity
     }
   ) }) }) }) });
 }

package/dist/{keys-DDQGijwQ.d.ts → keys-D-pSo8hG.d.ts}

@@ -94,6 +94,8 @@ interface ShellConfig {
     };
     /** Routes whose surface IS the viewport (ADR-0071 rule 1), matched exactly or by prefix for a non-root path. */
     fixedRoutes?: string[];
+    /** Routes that use the full frame without site chrome (for a guided, direct-link StoryFrame). */
+    immersiveRoutes?: string[];
     /** Every route fixed: a single-surface app (a hub, a one-page tool). */
     fixed?: boolean;
     /**

package/dist/keys.d.ts

@@ -1,4 +1,4 @@
-export { A as APP_ROUTE, L as LANDING_ROUTE, e as LANG_STORAGE_KEY, S as STANDARD_ROUTES, T as THEME_BOOT_SCRIPT, h as THEME_STORAGE_KEY } from './keys-DDQGijwQ.js';
+export { A as APP_ROUTE, L as LANDING_ROUTE, e as LANG_STORAGE_KEY, S as STANDARD_ROUTES, T as THEME_BOOT_SCRIPT, h as THEME_STORAGE_KEY } from './keys-D-pSo8hG.js';
 import 'react';
 import './text-BlY47nIt.js';
 import 'zustand';

package/gate/run.mjs

@@ -523,7 +523,13 @@ export async function runGate(o) {
             await next.click();
             await page.waitForTimeout(90);
             const earlyMotion = await page.evaluate(() => window.__caosGate.showcaseFacts().motion);
-            await page.waitForTimeout(260);
+            // Wait for the actual CSS stage animation to finish instead of assuming it starts on the same frame as the click.
+            // On loaded runners style/layout can begin a few frames after Playwright's click promise resolves.
+            await page.waitForFunction(() => {
+              const target = document.querySelector('[data-story-transition] > .caos-story-stage');
+              const animations = target ? target.getAnimations().filter((animation) => animation.animationName === 'caos-story-stage-enter') : [];
+              return animations.length > 0 && animations.every((animation) => animation.playState === 'finished');
+            }, null, { timeout: 1500 }).catch(() => undefined);
             const lateMotion = await page.evaluate(() => window.__caosGate.showcaseFacts().motion);
             if (!earlyMotion || earlyMotion.animationName === 'none' || earlyMotion.animationName === 'auto' || earlyMotion.transform === 'none' || earlyMotion.transform === 'matrix(1, 0, 0, 1, 0, 0)') fail('G21', { route: first.route, mode }, 'story step has no visible eased stage transition');
             else if (Number.parseFloat(earlyMotion.animationDuration) * (earlyMotion.animationDuration.endsWith('ms') ? 1 : 1000) < 200) fail('G21', { route: first.route, mode }, `normal stage transition is shorter than 200 ms (${earlyMotion.animationDuration})`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fasl-work/caos-app-shell",
-  "version": "0.20.0",
+  "version": "0.22.0",
   "description": "Shared web-app shell, workbench primitives, content primitives, design system and measured gate for the CAOS / Faena public apps (ADR-0016, ADR-0017, ADR-0071).",
   "license": "MIT",
   "author": "Felipe Santibáñez-Leal",

package/reserved-classes.json

@@ -288,6 +288,7 @@
     "header-sep",
     "hint",
     "icon-btn",
+    "immersive",
     "katex",
     "l-en",
     "l-es",
@@ -321,6 +322,7 @@
     "tablist",
     "tabpanel",
     "tabs",
+    "tabs-compact",
     "tabs-has-slot",
     "tabs-slot",
     "th-refs",
@@ -652,6 +654,7 @@
     "header-sep",
     "hint",
     "icon-btn",
+    "immersive",
     "is-active",
     "katex",
     "l-en",
@@ -692,6 +695,7 @@
     "tablist",
     "tabpanel",
     "tabs",
+    "tabs-compact",
     "tabs-has-slot",
     "tabs-slot",
     "th-refs",

package/styles.css

@@ -201,8 +201,11 @@ code, kbd { font-family: var(--font-mono); }
 .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; }
+.app-shell.immersive { height: 100dvh; min-height: 100dvh; overflow: hidden; }
+.app-shell.immersive > .page { display: flex; flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 0; }
+.app-shell.immersive > .page > .caos-story { width: 100%; height: 100%; flex: 1 1 auto; }
 /* 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; }
+.app-shell.fixed.contain:not(.immersive) > .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); }
@@ -213,7 +216,9 @@ code, kbd { font-family: var(--font-mono); }
   .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; }
+  .app-shell.fixed.contain:not(.immersive) > .page, .app-shell.fixed.contain:not(.immersive) > .page:has(> .page-body:not(.caos-wb):not(.caos-surface)) { display: block; overflow: visible; }
+  /* A stacked phone workbench is a document: its full instrument and controls must remain reachable by page scroll. */
+  .app-shell.fixed.contain:not(.immersive) > .page:has(> .caos-wb) { 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
@@ -253,6 +258,18 @@ code, kbd { font-family: var(--font-mono); }
 .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; }
+/* A tuned rail is an API value; keep the compact desktop spacing and control labels within it. */
+.caos-wb[data-rail-width] { gap: 0.4rem; }
+.caos-wb[data-rail-width] .caos-wb-rail,
+.caos-wb[data-rail-width] .caos-wb-rail-head,
+.caos-wb[data-rail-width] .caos-wb-rail-panel { gap: 0.25rem; }
+.caos-wb[data-rail-width] .caos-wb-rail { padding: 0.4rem; }
+.caos-wb[data-rail-width] .caos-readout-row { gap: 0.2rem; }
+.caos-wb[data-rail-width] .tablist { padding-bottom: 0; margin-bottom: 0; }
+.caos-wb[data-rail-width] .tablist .tab { padding-block: 0.2rem; }
+.caos-wb[data-rail-width] .subtabs { margin-block: 0.1rem; }
+.caos-wb[data-rail-width] .subtablist { margin-bottom: 0; }
+.caos-wb[data-rail-width] .subtab { padding-block: 0.18rem; }
 
 /* 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). */
@@ -297,6 +314,8 @@ code, kbd { font-family: var(--font-mono); }
 .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; }
+.tabs-compact > .tablist { margin-bottom: 0.15rem; padding-bottom: 0; }
+.tabs-compact > .tablist .tab { padding-block: 0.2rem; }
 .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; }
@@ -573,6 +592,8 @@ svg.lucide { flex: none; }
 .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.tabs-compact > .tablist { margin-bottom: 0.15rem; padding-bottom: 0; }
+.caos-cw > .tabs.tabs-compact > .tablist .tab { padding-block: 0.2rem; }
 .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; }
@@ -641,6 +662,11 @@ svg.lucide { flex: none; }
 .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; }
+.caos-plot.fill > .caos-plot-body:has(> [data-caos-plot-control]) { display: flex; flex-direction: column; }
+.caos-plot.fill > .caos-plot-body:has(> [data-caos-plot-control]) > .caos-stage { flex: 1 1 0; height: auto; min-height: 0; }
+.caos-plot.fill > .caos-plot-body > [data-caos-plot-control] { flex: 0 0 auto; display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.6rem; min-width: 0; min-height: 2rem; padding: 0.2rem 0.35rem; color: var(--color-fg-subtle); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
+.caos-plot.fill > .caos-plot-body > [data-caos-plot-control] input { flex: 1 1 100%; width: 100%; min-width: 8rem; margin: 0; accent-color: var(--color-accent); }
+.caos-plot.fill > .caos-plot-body > [data-caos-plot-control] strong { color: var(--color-fg); font-weight: 600; }
 .caos-plot.fill > .caos-plot-body > .caos-table { height: 100%; }
 /* 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). */
@@ -953,10 +979,6 @@ svg.lucide { flex: none; }
 
 /* ADR-0082 showcase frame: one focused stage, one docked panel, readable step navigation and anchored scene notes. */
 .caos-story { display: flex; flex-direction: column; gap: 0; min-width: 0; min-height: 0; height: 100%; padding: 0; color: var(--color-fg); background: var(--color-bg); }
-body:has([data-story]) .app-shell > .site-header,
-body:has([data-story]) .app-shell > .site-footer { display: none !important; }
-body:has([data-story]) .app-shell > .page { display: flex; flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 0; }
-body:has([data-story]) .app-shell > .page > .caos-story { width: 100%; height: 100%; flex: 1 1 auto; }
 .caos-story-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-width: 0; }
 .caos-story-heading { min-width: 0; }
 .caos-story-verb { display: block; color: var(--color-step-1); font: 700 var(--text-xs) var(--font-mono); letter-spacing: .09em; text-transform: uppercase; }
@@ -970,7 +992,8 @@ body:has([data-story]) .app-shell > .page > .caos-story { width: 100%; height: 1
 .caos-story-actions,.caos-story-controls { display: flex; align-items: center; gap: var(--space-2); }
 .caos-story button { min-height: 36px; padding: .35rem .65rem; color: var(--color-fg); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; }
 .caos-story button:disabled { opacity: .55; cursor: not-allowed; }
-.caos-story-stepper { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-2); min-width: 0; }
+.caos-story-actions button { min-height: clamp(28px, 2.5vw, 36px); padding: clamp(.15rem, .5vw, .35rem) clamp(.4rem, .8vw, .65rem); font-size: clamp(.75rem, .8vw, .9rem); line-height: 1.15; white-space: nowrap; }
+.caos-story-stepper { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(120px, 1fr); grid-template-columns: none; gap: var(--space-2); min-width: 0; overflow-x: auto; }
 .caos-story-step { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: .55rem; min-width: 0; min-height: 40px; padding: .2rem .55rem; color: var(--color-fg-subtle); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); text-decoration: none; }
 .caos-story-step:hover { color: var(--color-fg); text-decoration: none; }
 .caos-story-step.is-active { color: var(--color-fg); border-color: var(--color-accent); box-shadow: inset 3px 0 var(--color-accent); }
@@ -1009,7 +1032,10 @@ body:has([data-story]) .app-shell > .page > .caos-story { width: 100%; height: 1
 .caos-callout-trend.trend-down { color: var(--color-good); }
 .caos-callout-source { grid-column: 1 / -1; }
 @media (max-width: 760px) {
-  body:has([data-story]) .app-shell > .page { overflow-y: auto; }
+  .app-shell.immersive { height: auto; min-height: 100dvh; overflow: visible; }
+  .app-shell.immersive > .page { display: block; overflow: visible; }
+  .app-shell.immersive > .page > .caos-story { height: auto; min-height: 100%; }
+  .app-shell.immersive > .page { overflow: visible; }
   .caos-story { height: auto; min-height: 100%; }
   .caos-story-header { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: .45rem; }
   .caos-story-heading { width: 100%; }