@fasl-work/caos-app-shell 0.10.0 → 0.11.1

package/styles.css

@@ -331,8 +331,9 @@ code, kbd { font-family: var(--font-mono); }
 
 /* == 6 content ================================================================================================== */
 
-/* Fill a document's width with grids, figure rows, definition grids and sub-tab lists, never with stretched text:
-   every text block keeps a readable line (--measure-text), a figure or a table takes the width (ADR-0017 s1). */
+/* 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; }
@@ -340,13 +341,16 @@ code, kbd { font-family: var(--font-mono); }
 .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(p, li, blockquote, dd, .callout) { max-width: var(--measure-text); }
 .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; }
 .lede { color: var(--color-fg-subtle); font-size: var(--text-lg); margin: 0; max-width: var(--measure); }
 .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; }
@@ -387,6 +391,15 @@ code, kbd { font-family: var(--font-mono); }
 /* 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; }
@@ -453,6 +466,9 @@ code, kbd { font-family: var(--font-mono); }
 
 /* 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; }
@@ -581,6 +597,22 @@ 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; }
+/* 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.1; the gate's G6 floor, `--stage-floor` 140 px). A card sharing a short
+   column (two stacked filling cards in a ViewsRow at 1280 x 800) was squeezed below the floor because it had no minimum
+   height of its own. At 1280 px and wider it keeps one, derived from its own layout: the card spends
+   chrome = 2 px border + 0.85rem padding + 2.75rem header (two lines of title in the wide font) + 0.2rem header margin
+   + 0.4rem note margin = 4.2rem + 2 px, and its note takes at most 35% of the card, so the stage is at least
+   0.65 * card - chrome; the card is therefore at least (floor + chrome) / 0.65 (about 321 px at a 16 px root). A card
+   without a note spends 0.4rem less and needs no note share: floor + 3.8rem + 2 px. The containing panel scrolls when
+   the cards do not fit (ADR-0071); the rail never does. Below 1280 px the document scrolls and nothing changes. */
+@media (min-width: 1280px) {
+  .caos-plot.fill { min-height: calc(var(--caos-stage-floor, 140px) + 3.8rem + 2px); }
+  .caos-plot.fill:has(> .caos-plot-note) { min-height: calc((var(--caos-stage-floor, 140px) + 4.2rem + 2px) / 0.65); }
+}
 
 /* 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). */
@@ -621,6 +653,7 @@ svg.lucide { flex: none; }
   .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). */