@bongos/core 1.19.448 → 1.19.450

package/modules/hall-ui/public/room.css

@@ -0,0 +1,441 @@
+/* room.css — the READING-ROOM archetype: a long document read end to end
+   (task 1003306, goal 1000081). Shared by the primer (primer.html) and the
+   diagrams index (diagrams.html).
+
+   THE ARCHETYPE is v3 "the glass hall", the owner's pick from the composition
+   round — docs/design/hall-direction-v2.md §6, mock
+   docs/design/mocks/hall/reading/v3.html. Reading order, top to bottom: a
+   progress hairline under the topbar; the room's name alone over the ground
+   (the shell's .page-head--room); then a GLASS table of contents beside a
+   --bg-card article card. The glass/card split is the composition's argument:
+   wayfinding is chrome and belongs to the same material as the rail and the
+   topbar, the document is content and belongs on a panel the ground can never
+   reach the ink on.
+
+   WHY IT IS ITS OWN SHEET rather than more of primer.css: the primer and the
+   diagrams index are the same room over different documents — one renders
+   markdown, one renders five figures — and the framed figure is literally the
+   same object on both (diagram-viewer.js upgrades `figure.diagram img,
+   figure.primer-figure img` with one selector). Ranks, Economy, Repo Atlas and
+   Modules inherit this archetype next. Page-specific shapes stay page-local:
+   primer.css keeps the acknowledge gate, diagrams.css keeps the legend strip.
+
+   WHY THE CLASSES ARE STILL `primer-`: two live surfaces spell them —
+   diagram-viewer.js's upgrade selector and tests/hall_audit.mjs's pinned
+   phone-overflow rule — so the sheet is named for the ROOM and the prefix is
+   left alone. Renaming would churn a JS selector and a pinned test to buy a
+   reader nothing.
+
+   THE PANEL IS THE SHELL'S. The article, the failure notes and the skeleton all
+   carry `.scroll` in their markup and this sheet only adds the reading padding:
+   v3 has exactly three card levels and a fourth is a design decision, not a
+   local override (modules/hall-ui/CLAUDE.md, Hard rules).
+
+   Everything below spends the world's real token names. No compat alias
+   (--surface / --surface-2 / --border / --border-strong / --accent-weak /
+   --accent-text) appears here — they exist for pages nobody has re-skinned, so
+   spending one is legal CSS that quietly opts this sheet back out of the world.
+   `--line` is a WIDTH; the hairline's colour is --rule / --rule-soft. */
+
+/* ---- the room's composition tokens ---------------------------------------
+   On `body`, never in a page `:root`: the branding pack's :root is spliced at
+   the end of <head> at (0,1,0), so a page-local one is outranked one way and
+   defeats re-branding the other.
+   --measure is NOT redeclared. It is the shell's measured 48ch, and a `ch`
+   scales with the font size — so the same token renders the same ~60 characters
+   whether the room reads at 15px or 17px. Re-deriving it per page size is the
+   `ch` arithmetic that put 90 characters on this page in the first place. */
+body.room {
+  --room-gap:   var(--sp-lg);
+  --room-toc-w: 246px;
+  --room-pad:   clamp(24px, 3.4vw, 58px);
+  --room-size:  17px;
+  --room-lead:  1.75;
+  --room-h2:    clamp(24px, 2.8vw, 34px);
+  --room-h3:    20px;
+}
+
+/* ---- 1. the reading hairline --------------------------------------------
+   Sticky rather than fixed: it belongs to the content column, so it scrolls out
+   of the way with the head instead of hovering over the whole viewport. Under
+   the topbar in the z ladder (--z-progress < --z-topbar) for the same reason —
+   it is the article's progress, not app chrome. */
+.primer-progress {
+  position: sticky;
+  top: var(--topbar-h);
+  z-index: var(--z-progress);
+  height: 3px;
+  background: color-mix(in srgb, var(--accent) 14%, transparent);
+  pointer-events: none;
+}
+.primer-progress__bar {
+  height: 100%;
+  width: 0;
+  background: var(--accent);
+  transition: width 200ms cubic-bezier(.2, .7, .3, 1);
+}
+
+/* ---- 2. the reading column ----------------------------------------------
+   ONE ceiling for the room, on the room's own body scope. --content-max (1120)
+   is a working surface's width; a document read at it is more empty ground than
+   page. The cap sits on the room's main rather than on each page's wrapper so
+   the primer's two columns and the diagrams index's stacked figures end at the
+   same edge — a reading room that changes width between its own pages reads as
+   two different rooms.
+   This is the room's own composition, not a shell override: it is scoped to the
+   body class a page opts into, and it sets a measure, not shell layout (the
+   rule tests/hall_record_world.mjs pins is `.app-content > main`, which reaches
+   into the shell's grid for every page at once). */
+body.room #hall-main,
+body.room .page-head { max-width: var(--room-max); }
+
+.primer-layout {
+  display: grid;
+  grid-template-columns: var(--room-toc-w) minmax(0, 1fr);
+  gap: var(--room-gap);
+  align-items: start;
+  padding-bottom: var(--sp-md);
+}
+/* the article column, so the notes, the skeleton and the gate stack under the
+   card rather than beside the contents */
+.primer-col { min-width: 0; }
+
+/* ---- 3. the table of contents, as glass ---------------------------------- */
+
+.primer-toc {
+  position: sticky;
+  top: calc(var(--topbar-h) + var(--sp-md));
+  align-self: start;
+}
+.primer-toc__toggle {
+  display: none;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-height: 44px;
+  padding: 8px 16px;
+  background: var(--glass);
+  -webkit-backdrop-filter: blur(var(--glass-blur));
+  backdrop-filter: blur(var(--glass-blur));
+  border: var(--line) solid var(--glass-edge);
+  border-radius: var(--radius);
+  font-family: var(--font-body);
+  font-size: 14.5px;
+  color: var(--ink);
+  cursor: pointer;
+}
+.primer-toc__chevron { transition: transform 200ms cubic-bezier(.2, .7, .3, 1); }
+.primer-toc__toggle[aria-expanded="true"] .primer-toc__chevron { transform: rotate(180deg); }
+.primer-toc__inner {
+  background: var(--glass);
+  -webkit-backdrop-filter: blur(var(--glass-blur));
+  backdrop-filter: blur(var(--glass-blur));
+  border: var(--line) solid var(--glass-edge);
+  border-radius: var(--radius);
+  padding: var(--sp-md) var(--sp-sm) var(--sp-sm);
+}
+.primer-toc__heading {
+  margin: 0 0 var(--sp-sm);
+  padding: 0 var(--sp-xs);
+  font-family: var(--label-face);
+  font-size: var(--label-size);
+  font-weight: 400;
+  letter-spacing: var(--label-space);
+  text-transform: var(--label-case);
+  color: var(--ink-faint);
+}
+.primer-toc__list { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
+.primer-toc__list li { margin: 0; }
+/* the numeral is a two-digit mono column, so a long list never re-spaces around
+   its tenth row the way an upper-roman VIII did */
+.primer-toc__list a {
+  display: flex;
+  align-items: baseline;
+  gap: 11px;
+  min-height: 34px;
+  padding: 8px var(--sp-xs);
+  border-left: 2px solid transparent;
+  border-radius: var(--radius-sm);
+  font-size: 14px;
+  line-height: 1.4;
+  color: var(--ink-soft);
+  text-decoration: none;
+  transition: color 200ms cubic-bezier(.2, .7, .3, 1);
+}
+.primer-toc__list a::before {
+  counter-increment: toc;
+  content: counter(toc, decimal-leading-zero);
+  flex: none;
+  font: 400 11px/1.4 var(--font-mono);
+  font-variant-numeric: tabular-nums;
+  color: var(--ink-faint);
+}
+.primer-toc__list a:hover { color: var(--ink); text-decoration: none; }
+.primer-toc__list a.is-active {
+  color: var(--ink);
+  background: var(--glass-strong);
+  border-left-color: var(--accent);
+  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+}
+.primer-toc__list a.is-active::before { color: var(--ink-soft); }
+.primer-toc__placeholder {
+  padding: 8px var(--sp-xs);
+  font-size: 14px;
+  color: var(--ink-faint);
+}
+
+/* ---- 4. the article ------------------------------------------------------
+   The card itself is `.scroll`; this is the reading pad and the rhythm. */
+
+.primer-article {
+  padding: var(--room-pad);
+  margin: 0;
+  counter-reset: sec;
+  font-size: var(--room-size);
+  line-height: var(--room-lead);
+  color: var(--ink);
+}
+/* PROSE is measured; a table, a figure and a code block may take the whole card,
+   and that width is the only reason the card is wider than the measure. */
+.primer-article > p,
+.primer-article > ul,
+.primer-article > ol,
+.primer-article > blockquote,
+.primer-article > h2,
+.primer-article > h3 { max-width: var(--measure); }
+
+/* the document's own h1 is suppressed — the page head already names the room,
+   and a second h1 in <main> fails the one-header-main-h1 floor outright */
+.primer-article h1 { display: none; }
+
+.primer-article h2 {
+  margin: calc(var(--sp-xl) * 1.4) 0 var(--sp-md);
+  font-family: var(--font-display);
+  font-weight: 300;
+  font-size: var(--room-h2);
+  line-height: 1.06;
+  letter-spacing: -0.035em;
+  color: var(--ink);
+  /* anchor jumps land below the sticky top bar AND its hairline */
+  scroll-margin-top: calc(var(--topbar-h) + 28px);
+}
+/* the section number sits above the headline rather than beside it, so a long
+   title stays one uninterrupted shape at every width */
+.primer-article h2::before {
+  counter-increment: sec;
+  content: counter(sec, decimal-leading-zero);
+  display: block;
+  margin-bottom: 14px;
+  font-family: var(--label-face);
+  font-size: var(--label-size);
+  letter-spacing: var(--label-space);
+  font-variant-numeric: tabular-nums;
+  color: var(--ink-faint);
+}
+.primer-article > h2:first-child { margin-top: 0; }
+.primer-article h3 {
+  margin: var(--sp-lg) 0 var(--sp-xs);
+  font-family: var(--font-display);
+  font-weight: 400;
+  font-size: var(--room-h3);
+  letter-spacing: -0.02em;
+  color: var(--ink);
+  scroll-margin-top: calc(var(--topbar-h) + 28px);
+}
+
+.primer-article p { margin: 0 0 var(--sp-md); }
+.primer-article p:last-child { margin-bottom: 0; }
+/* the subtitle line at the very top of the document */
+.primer-article > p > em:only-child { color: var(--ink-soft); }
+
+.primer-article ul, .primer-article ol { margin: 0 0 var(--sp-lg); padding-left: 1.4em; }
+.primer-article li { margin: 0 0 12px; }
+.primer-article li:last-child { margin-bottom: 0; }
+.primer-article li::marker { color: var(--ink-faint); }
+
+/* 1px of vertical padding takes an inline link past the 24px floor without
+   costing the line its own leading (the .scroll__lede precedent, task 1003304) */
+.primer-article a {
+  display: inline-block;
+  min-height: 24px;
+  padding: 1px 0;
+  color: var(--accent-ink);
+  text-decoration: underline;
+  text-underline-offset: 4px;
+  text-decoration-thickness: 1px;
+}
+.primer-article a:hover { color: var(--ink); }
+.primer-article strong { font-weight: 600; color: var(--ink); }
+.primer-article em { font-style: italic; }
+
+.primer-article code {
+  font: 400 .85em/1.4 var(--font-mono);
+  background: var(--glass);
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+.primer-article pre {
+  margin: 0 0 var(--sp-lg);
+  padding: var(--sp-md) var(--sp-lg);
+  overflow-x: auto;
+  background: var(--glass);
+  border: var(--line) solid var(--glass-edge);
+  border-radius: var(--radius);
+}
+.primer-article pre code {
+  background: none;
+  padding: 0;
+  border-radius: 0;
+  font-size: 13.5px;
+  line-height: 1.8;
+  color: var(--ink-soft);
+}
+
+/* blockquotes only render since task 1003306 unified the two markdown parsers —
+   primer.js had no blockquote rule at all and md-reader.js has always emitted
+   them, so the primer silently dropped every aside into a paragraph. */
+.primer-article blockquote {
+  margin: var(--sp-lg) 0;
+  padding: var(--sp-md) var(--sp-lg);
+  background: var(--glass);
+  border: var(--line) solid var(--glass-edge);
+  border-left: 2px solid var(--rule);
+  border-radius: 0 var(--radius) var(--radius) 0;
+  color: var(--ink-soft);
+}
+.primer-article blockquote p { margin: 0; max-width: var(--measure); }
+
+.primer-article hr {
+  border: none;
+  border-top: var(--line) solid var(--rule-soft);
+  margin: var(--sp-xl) 0;
+}
+
+.primer-article table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 0 0 var(--sp-lg);
+  font-size: 14.5px;
+  font-variant-numeric: tabular-nums;
+}
+.primer-article th, .primer-article td {
+  text-align: left;
+  vertical-align: top;
+  padding: 13px 16px 13px 0;
+  border-bottom: var(--line) solid var(--rule-soft);
+}
+.primer-article th {
+  font-family: var(--label-face);
+  font-size: var(--label-size);
+  font-weight: 400;
+  letter-spacing: var(--label-space);
+  text-transform: var(--label-case);
+  color: var(--ink-faint);
+}
+.primer-article tr:last-child td { border-bottom: 0; }
+
+/* ---- 5. the framed figure ------------------------------------------------
+   ONE rule, both rooms: diagram-viewer.js upgrades `figure.diagram img,
+   figure.primer-figure img` into a pannable canvas, and until (or unless) the
+   SVG fetch succeeds the PNG stays in this frame. Glass rather than a card, so
+   a figure inside the article reads as inset and a figure on the diagrams index
+   reads as the same object. */
+.primer-figure, figure.diagram {
+  margin: var(--sp-xl) 0;
+  padding: var(--sp-lg) var(--sp-md);
+  background: var(--glass);
+  border: var(--line) solid var(--glass-edge);
+  border-radius: var(--radius);
+}
+.primer-figure:last-child, figure.diagram:last-child { margin-bottom: 0; }
+.primer-figure img, figure.diagram img {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  height: auto;
+}
+/* diagram-viewer.js inserts its canvas INSIDE the figure and hides the <img>,
+   so the frame has to belong to exactly one of them or the diagram ends up in
+   two nested boxes. The figure keeps it; the canvas gives its own up. (Its
+   fullscreen state re-declares both, and diagram-viewer.css loads after this
+   sheet on both pages, so the overlay still paints.) */
+.primer-figure .dgv, figure.diagram .dgv {
+  background: none;
+  border: 0;
+  border-radius: var(--radius-sm);
+}
+.primer-figure figcaption, figure.diagram figcaption {
+  margin-top: 14px;
+  max-width: var(--measure);
+  font-size: 13.5px;
+  line-height: 1.55;
+  color: var(--ink-faint);
+}
+
+/* ---- 6. the states before the document ----------------------------------
+   Each is the same card the article is, so the page never changes shape as it
+   resolves — the skeleton is the article's silhouette, not a spinner. */
+
+.primer-note, .primer-skeleton { padding: var(--room-pad); }
+.primer-note__label {
+  margin: 0 0 14px;
+  font-family: var(--label-face);
+  font-size: var(--label-size);
+  letter-spacing: var(--label-space);
+  text-transform: var(--label-case);
+  color: var(--ink-faint);
+}
+.primer-note--error .primer-note__label { color: var(--danger); }
+.primer-note__body { margin: 0 0 var(--sp-lg); max-width: var(--measure); color: var(--ink-soft); }
+.primer-note__body:last-child { margin-bottom: 0; }
+.primer-note__acts { display: flex; flex-wrap: wrap; gap: var(--sp-xs); margin: 0; }
+
+.primer-sk {
+  display: block;
+  height: 10px;
+  border-radius: 4px;
+  background: var(--skeleton);
+}
+.primer-skeleton__h { height: 28px; width: 58%; margin-bottom: var(--sp-lg); }
+.primer-skeleton__p { margin-bottom: var(--sp-lg); max-width: var(--measure); }
+.primer-skeleton__p .primer-sk { margin-bottom: 15px; }
+.primer-skeleton__p .primer-sk:nth-child(2) { width: 96%; }
+.primer-skeleton__p .primer-sk:nth-child(3) { width: 99%; }
+.primer-skeleton__p .primer-sk:nth-child(4) { width: 84%; }
+.primer-skeleton__p .primer-sk:last-child { width: 46%; margin-bottom: 0; }
+.primer-skeleton__rule {
+  height: var(--line);
+  margin: var(--sp-xl) 0 var(--sp-lg);
+  background: var(--rule-soft);
+}
+
+/* ---- 7. the room's one breakpoint ---------------------------------------
+   760px, NOT the shell's 640: it is the width primer.js's matchMedia mirrors
+   and tests/hall_audit.mjs pins exactly. Narrowing it "for consistency" would
+   silently reopen the 641-760px band the table's scrollport exists to cover. */
+@media (max-width: 760px) {
+  body.room {
+    --room-gap:  0px;
+    --room-pad:  20px;
+    --room-size: 16.5px;
+    --room-lead: 1.7;
+    --room-h2:   24px;
+  }
+  .primer-layout { grid-template-columns: minmax(0, 1fr); }
+  .primer-toc { position: static; margin-bottom: var(--sp-sm); }
+  .primer-toc__toggle { display: flex; }
+  .primer-toc__inner { display: none; margin-top: 8px; }
+  .primer-toc.is-open .primer-toc__inner { display: block; }
+  /* A markdown table's column count is fixed by its source, so its min-content
+     width outruns a phone (measured: 79px of page overflow on /drachmae). Give
+     the table its own horizontal scroller instead of letting it drag the page
+     sideways. `display: block` is what makes the table box a scrollport; the
+     rows still lay out through the anonymous table box inside it. */
+  .primer-article table {
+    display: block;
+    width: max-content;
+    max-width: 100%;
+    overflow-x: auto;
+  }
+}