@fasl-work/caos-app-shell 0.9.4 → 0.11.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.
package/styles.css CHANGED
@@ -331,8 +331,9 @@ code, kbd { font-family: var(--font-mono); }
331
331
 
332
332
  /* == 6 content ================================================================================================== */
333
333
 
334
- /* Fill a document's width with grids, figure rows, definition grids and sub-tab lists, never with stretched text:
335
- every text block keeps a readable line (--measure-text), a figure or a table takes the width (ADR-0017 s1). */
334
+ /* A document fills the width of its column (shell 0.11.0, CAOS_APP_SHELL#96): text blocks, grids, figure rows and
335
+ tables all take it. A page that reads as one prose column keeps its own max width and is centred (ADR-0017 s1);
336
+ only the captions keep a measure, centred under their figure. */
336
337
  .prose { font-size: var(--text-base); }
337
338
  .prose section { margin-block: 1.75rem; }
338
339
  .prose h2 { font-size: var(--text-xl); margin-block: 1.4rem 0.6rem; }
@@ -340,13 +341,16 @@ code, kbd { font-family: var(--font-mono); }
340
341
  .prose p { margin-block: 0.6rem; }
341
342
  .prose ul, .prose ol { margin-block: 0.5rem; padding-left: 1.3rem; }
342
343
  .prose li { margin-block: 0.35rem; }
343
- .prose :where(p, li, blockquote, dd, .callout) { max-width: var(--measure-text); }
344
344
  .prose :where(.equation-caption, .figure-caption, .fig-cap) { max-width: var(--measure-text); margin-inline: auto; }
345
345
  .measure { max-width: var(--measure); }
346
346
  .page-head { border-bottom: 1px solid var(--color-border); padding-bottom: 1rem; margin-bottom: 1.25rem; }
347
347
  .page-head h1 { font-size: var(--text-2xl); margin: 0 0 0.4rem; }
348
348
  .lede { color: var(--color-fg-subtle); font-size: var(--text-lg); margin: 0; max-width: var(--measure); }
349
349
  .caos-doc-section { margin-block: 1.75rem; }
350
+ /* The references of a page or open tab: one block at its end (ADR-0017 s4). */
351
+ .caos-doc-references { margin-top: 2rem; padding-top: 0.4rem; border-top: 1px solid var(--color-border); }
352
+ .caos-doc-reference-list { font-size: 0.85rem; color: var(--color-fg-subtle); line-height: 1.5; padding-left: 1.4rem; }
353
+ .caos-doc-reference-list li { margin-block: 0.5rem; }
350
354
  /* Wide content in a document scrolls inside its own box; the contained page never cuts it (G5). */
351
355
  .prose table { display: block; max-width: 100%; overflow-x: auto; }
352
356
  .prose pre { max-width: 100%; overflow-x: auto; }
@@ -387,6 +391,15 @@ code, kbd { font-family: var(--font-mono); }
387
391
  /* Equations and figures. */
388
392
  .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; }
389
393
  .equation-caption { margin-top: 0.5rem; font-size: 0.82rem; color: var(--color-fg-faint); text-align: center; }
394
+ .caos-glossary { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.4rem 1.25rem; margin: 0.75rem 0; }
395
+ .caos-glossary-item { display: flex; gap: 0.5rem; align-items: baseline; }
396
+ .caos-glossary dt { flex: none; min-width: 3rem; font-weight: 600; }
397
+ .caos-glossary dd { margin: 0; color: var(--color-fg); }
398
+ .caos-stat-value { font-variant-numeric: tabular-nums; }
399
+ .caos-stat-source { color: var(--color-fg-faint); font-size: var(--text-sm); }
400
+ .caos-qa { margin: 0.9rem 0; }
401
+ .caos-qa-question { font-weight: 600; margin-bottom: 0.25rem; }
402
+ .caos-qa-answer > :first-child { margin-top: 0; }
390
403
  .katex { color: var(--color-fg); }
391
404
  .figure { margin: 1.5rem 0; }
392
405
  .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); }
453
466
 
454
467
  /* Registered controls (Knob, ChipGroup). */
455
468
  .caos-knob { display: flex; flex-direction: column; gap: var(--space-1); }
469
+ /* Chromium keeps a 2 px user-agent side margin on a range input: at width 100% it reached 2 px past a clipping card
470
+ (a PlotCard body) and the gate's G5 failed at phone widths (CAOS_APP_SHELL#91). */
471
+ .caos-knob input[type='range'] { margin-inline: 0; }
456
472
  .caos-knob-head { display: flex; justify-content: space-between; gap: var(--space-2); font-size: 0.8rem; color: var(--color-fg-subtle); }
457
473
  .caos-knob-value { font-family: var(--font-mono); color: var(--color-fg); font-weight: 600; white-space: nowrap; }
458
474
  .caos-chipgroup { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
@@ -581,6 +597,9 @@ svg.lucide { flex: none; }
581
597
  .caos-plot-note { margin: 0.4rem 0 0; font-size: 0.78rem; color: var(--color-fg-faint); }
582
598
  .caos-plot.fill { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
583
599
  .caos-plot.fill > .caos-plot-body { flex: 1 1 0; min-height: 0; overflow: hidden; }
600
+ /* The note of a filling card keeps at most 35% of the card and scrolls beyond it, so the drawing keeps a floor
601
+ (CAOS_APP_SHELL#95: a long note left plots of 10 to 90 px at 1280 x 800). */
602
+ .caos-plot.fill > .caos-plot-note { flex: 0 1 auto; max-height: 35%; overflow-y: auto; }
584
603
 
585
604
  /* A row of views side by side. Every view of the row takes an equal share, a filling card included (known shell
586
605
  defect 23, #54: `.caos-plot.fill` outranked the row's zero basis and took the row). */
@@ -621,6 +640,7 @@ svg.lucide { flex: none; }
621
640
  .caos-views-row { flex-direction: column; }
622
641
  .caos-views-row > *, .caos-views-row > .caos-plot.fill { flex: none; }
623
642
  .caos-plot.fill > .caos-plot-body { flex: none; height: clamp(260px, 48vh, 440px); }
643
+ .caos-plot.fill > .caos-plot-note { max-height: none; overflow-y: visible; }
624
644
  }
625
645
  @media (max-width: 760px) {
626
646
  /* A phone wraps the cells instead of pushing the table past the page (found by the gate on the template). */