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

package/styles.css

@@ -39,6 +39,11 @@
   --color-good: #3fb950;
   --color-warn: #d29922;
   --color-bad: #f85149;
+  --color-step-1: #56d4e5;
+  --color-step-2: #79c0ff;
+  --color-step-3: #d2a8ff;
+  --color-step-4: #7ee787;
+  --color-step-5: #ffca80;
   --color-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 16px rgba(0, 0, 0, 0.45);
   color-scheme: dark;
 }
@@ -60,6 +65,11 @@
   --color-good: #197c36;
   --color-warn: #946300;
   --color-bad: #cf222e;
+  --color-step-1: #0550ae;
+  --color-step-2: #0969da;
+  --color-step-3: #6639ba;
+  --color-step-4: #1a7f37;
+  --color-step-5: #9a6700;
   --color-shadow: 0 1px 2px rgba(31, 35, 40, 0.06), 0 4px 10px rgba(31, 35, 40, 0.04);
 }
 
@@ -235,9 +245,11 @@ code, kbd { font-family: var(--font-mono); }
 /* 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; }
+.app-shell.fixed .page-body.wide.caos-wb { padding-top: 0.15rem; padding-bottom: 0.15rem; }
+.app-shell.fixed.contain:has(.caos-wb) > .site-header .header-inner { height: 48px; }
 
 /* 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; }
+.caos-wb { --rail-w: clamp(232px, 17vw, 320px); display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); gap: 0.6rem; align-items: stretch; min-width: 0; padding-top: 0.4rem; padding-bottom: 0.4rem; }
 .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; }
@@ -619,7 +631,7 @@ svg.lucide { flex: none; }
 .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 { margin: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 0.25rem 0.6rem 0.2rem; min-width: 0; }
 .caos-plot-head { display: flex; flex-wrap: wrap; 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; min-width: 0; }
 .caos-plot-head .badge { font-size: 0.68rem; padding: 0.05rem 0.45rem; }
 .caos-plot-title { min-width: 0; overflow-wrap: anywhere; font-size: var(--text-sm); color: var(--color-fg-subtle); font-weight: 600; }
@@ -629,6 +641,7 @@ 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 > .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). */
 .caos-plot.fill > .caos-plot-note { flex: 0 1 auto; max-height: 35%; overflow-y: auto; }
@@ -641,14 +654,14 @@ svg.lucide { flex: none; }
   [data-caos-note-fit] .caos-plot.fill > .caos-plot-note { max-height: none; min-height: 0; }
 }
 
-/* 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
+/* The stage floor of a filling card (shell 0.11.2; the gate's G6 floor, `--stage-floor` 146 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); }
+  .caos-plot.fill > .caos-plot-body { min-height: var(--caos-stage-floor, 146px); }
 }
 
 /* A row of views side by side. Every view of the row takes an equal share, a filling card included (known shell
@@ -713,6 +726,12 @@ svg.lucide { flex: none; }
 .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); }
+/* A full-height table is a plotted view too: use taller rows on a very tall desktop so its data occupies the
+   instrument instead of leaving the lower half of a 1440 px stage visually empty (ADR-0082 G6). */
+@media (min-width: 2400px) and (min-height: 1200px) {
+  .caos-plot.fill > .caos-plot-body > .caos-table th,
+  .caos-plot.fill > .caos-plot-body > .caos-table td { padding-block: 0.58rem; }
+}
 
 @media (max-width: 900px) {
   /* The views of a row stack; a filling view gets a fixed readable height instead of the panel's. */
@@ -931,6 +950,83 @@ svg.lucide { flex: none; }
 .tabs-has-slot > .tabs-slot { grid-column: 2; grid-row: 1; align-self: stretch; display: flex; align-items: center; padding-bottom: 0.4rem; margin-bottom: 0.9rem; border-bottom: 1px solid var(--color-border); }
 .tabs-has-slot > .tabs-slot > .caos-focus-enter { align-self: center; padding-block: 0.2rem; }
 .tabs-has-slot > .tabpanel { grid-column: 1 / -1; grid-row: 2; }
+
+/* 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; }
+.caos-story-headline { margin: .1rem 0; font-size: clamp(1rem, 1.6vw, 1.45rem); line-height: 1.2; }
+.caos-story-heading > p { margin: .15rem 0 0; color: var(--color-fg-subtle); font-size: var(--text-sm); }
+.caos-story[data-step-accent="1"] .caos-story-verb { color: var(--color-step-1); }
+.caos-story[data-step-accent="2"] .caos-story-verb { color: var(--color-step-2); }
+.caos-story[data-step-accent="3"] .caos-story-verb { color: var(--color-step-3); }
+.caos-story[data-step-accent="4"] .caos-story-verb { color: var(--color-step-4); }
+.caos-story[data-step-accent="5"] .caos-story-verb { color: var(--color-step-5); }
+.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-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); }
+.caos-story-step-number { grid-row: 1 / span 2; display: grid; place-items: center; width: 1.55rem; height: 1.55rem; border: 1px solid currentColor; border-radius: 50%; font: 700 var(--text-xs) var(--font-mono); }
+.caos-story-step-verb { overflow: hidden; color: var(--color-fg); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
+.caos-story-step-headline { overflow: hidden; color: var(--color-fg-subtle); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
+.caos-story-controls { justify-content: flex-end; }
+.caos-story-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 29%); gap: var(--space-3); flex: 1 1 auto; min-width: 0; min-height: 0; }
+.caos-story-stage { position: relative; isolation: isolate; min-width: 0; min-height: 360px; overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
+.caos-story-stage > :not(.caos-callout-layer) { width: 100%; height: 100%; }
+.caos-story-panel { min-width: 0; min-height: 0; overflow: auto; padding: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
+/* A route change first moves the instrument into view, then the docked evidence panel; the sequence is short and tied to the finding. */
+[data-story-transition] > .caos-story-stage { animation: caos-story-stage-enter 320ms cubic-bezier(.2,.72,.26,1) both; }
+[data-story-transition] > .caos-story-panel { animation: caos-story-panel-enter 240ms cubic-bezier(.2,.72,.26,1) 100ms both; }
+@keyframes caos-story-stage-enter { from { transform: translateY(7px) scale(.994); } to { transform: translateY(0) scale(1); } }
+@keyframes caos-story-panel-enter { from { transform: translateY(6px); } to { transform: translateY(0); } }
+.caos-callout-layer { position: absolute; z-index: 4; inset: 0; overflow: hidden; pointer-events: none; }
+.caos-scene3d-frame { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; width: 100%; height: 100%; overflow: hidden; background: var(--color-bg); color: var(--color-fg); }
+.caos-scene3d-controls { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); min-width: 0; padding: var(--space-2) var(--space-3); border-block-end: 1px solid var(--color-border); background: var(--color-surface); }
+.caos-scene3d-viewport { position: relative; min-width: 0; min-height: 0; overflow: hidden; isolation: isolate; }
+.caos-scene3d-renderer, .caos-scene3d-renderer > canvas, .caos-scene3d-renderer > svg { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; }
+.caos-scene3d-status { position: absolute; inset-inline-start: var(--space-3); inset-block-end: var(--space-3); z-index: 2; max-width: min(32rem, calc(100% - 2 * var(--space-3))); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-fg); }
+.caos-scene3d-legend { position: absolute; inset-inline-end: var(--space-3); inset-block-end: var(--space-3); z-index: 2; max-width: min(24rem, calc(100% - 2 * var(--space-3))); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-fg); }
+.caos-callout-leaders { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
+.caos-callout-leaders line { stroke: var(--color-fg-faint); stroke-width: 1.1; stroke-dasharray: 2 4; opacity: .52; }
+.caos-scene-callout { position: absolute; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; gap: .05rem .4rem; padding: .35rem .5rem; color: var(--color-fg); background: color-mix(in srgb, var(--color-surface) 94%, transparent); border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent); border-radius: var(--radius-md); box-shadow: var(--color-shadow); backdrop-filter: blur(8px); }
+.caos-scene-callout[data-callout-state="alarm"] { border-left-color: var(--color-bad); }
+.caos-scene-callout[data-callout-state="warning"] { border-left-color: var(--color-warn); }
+.caos-scene-callout[data-callout-state="normal"] { border-left-color: var(--color-good); }
+.caos-scene-callout[data-callout-state="inactive"] { border-left-color: var(--color-fg-faint); }
+.caos-callout-eyebrow { overflow: hidden; color: var(--color-fg); font: 700 .68rem var(--font-mono); letter-spacing: .05em; text-overflow: ellipsis; white-space: nowrap; }
+.caos-scene-callout > strong { overflow: hidden; font: 700 .92rem var(--font-mono); font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
+.caos-scene-callout > strong small,.caos-callout-source { color: var(--color-fg); font-size: .68rem; font-weight: 500; }
+.caos-callout-trend { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 1.1rem; font-weight: 800; }
+.caos-callout-trend.trend-up { color: var(--color-bad); }
+.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; }
+  .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%; }
+  .caos-story-actions { width: 100%; flex-wrap: wrap; justify-content: space-between; gap: .35rem; }
+  .caos-story-controls { flex: 1 1 auto; justify-content: flex-start; gap: .35rem; }
+  .caos-story button { min-height: 34px; padding: .3rem .5rem; font-size: .78rem; white-space: nowrap; }
+  .caos-story-stepper { grid-auto-columns: minmax(90px, 1fr); grid-auto-flow: column; grid-template-columns: unset; overflow-x: auto; }
+  .caos-story-step-headline { display: none; }
+  .caos-story-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(46dvh, 1fr) auto; }
+  .caos-story-panel { max-height: 30dvh; }
+  .caos-story-stage { min-height: 300px; }
+  .caos-scene-callout { padding: .25rem .35rem; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .caos-story *, .caos-callout-layer * { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
+  [data-story-transition] > .caos-story-stage, [data-story-transition] > .caos-story-panel { animation: none !important; }
+}
 /* The same slot in the workbench's group tab row (shell 0.17.0, BL-074): the Focus control of the App ends the row, so the case select keeps
    the rail head's whole width. The tab row's own spacing (a tighter rule than the surface's) is repeated under the slot. */
 .caos-cw > .tabs.tabs-has-slot { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); column-gap: 0.5rem; }