@bongos/core 1.19.448 → 1.19.450

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

@@ -0,0 +1,324 @@
+/* record.css — the RECORD archetype: one row of the ledger, read end to end
+   (task 1003305, goal 1000081). Shared by the task page (task.html) and the idea
+   page (idea.html), which are the same composition over different facts.
+
+   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/task/v3.html.
+   Reading order, top to bottom: the way back and a mono sub line; then ONE panel
+   holding the kind eyebrow, the title, the facts, a figure band, the lifecycle
+   rail, and the record's sections. The panel is the shell's `.scroll` — v3 has
+   exactly three card levels and a fourth would be a design decision, not a
+   local override (modules/hall-ui/CLAUDE.md, Hard rules).
+
+   WHY IT IS ITS OWN SHEET rather than two copies: the task page and the idea
+   page differ in their FACTS, not their composition, and a second copy of a
+   hundred lines is how the two would drift apart the first time one is touched.
+   Page-specific shapes stay page-local (idea.css keeps the grade badge, the
+   five answers and the mark control; task.css keeps the lifecycle rail's
+   captions and the touches list).
+
+   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 way back ------------------------------------------------------- */
+/* These two pages are deliberately not in the sidebar (both are always reached
+   from a link), so a deep-linked visitor needs a way back BEFORE the record has
+   loaded — which is why the crumb is static markup and not rendered by the page
+   script. 3px of padding buys the 24px control floor without changing the line's
+   own leading; the link measured 21px on task.html and 20px on idea.html. */
+.rec-crumb {
+  display: flex;
+  align-items: baseline;
+  gap: 16px;
+  flex-wrap: wrap;
+  margin: 0 0 4px;
+}
+.rec-back {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  min-height: 24px;
+  padding: 3px 0;
+  color: var(--ink-soft);
+  font-size: 13.5px;
+  text-transform: lowercase;
+  text-decoration: none;
+}
+.rec-back:hover { color: var(--ink); text-decoration: underline; }
+.rec-back__ic { width: 14px; height: 14px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
+/* The sub line is the record's address, so it is tabular: an id that re-renders
+   must not re-space the line it sits in. */
+.rec-sub {
+  margin: 0;
+  font-family: var(--label-face);
+  font-size: var(--label-size);
+  letter-spacing: var(--label-space);
+  text-transform: var(--label-case);
+  color: var(--ink-faint);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ---- the head of the record --------------------------------------------- */
+.rec-kind {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+  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);
+}
+
+/* The ONE place a lifecycle state is coloured. The status vocabulary is the
+   sanctioned exception to the Fifteen Rule (DESIGN.md §Reuse) — a failed grade
+   must not be salmon on a page whose ship button is also salmon — and its values
+   are measured by tests/hall_tokens.mjs, never hand-tuned. */
+.rec-pill {
+  display: inline-flex;
+  align-items: center;
+  min-height: 26px;
+  padding: 0 13px;
+  border: var(--line) solid var(--rule);
+  border-radius: var(--radius-pill);
+  background: none;
+  font-family: var(--font-body);
+  font-size: 12.5px;
+  font-weight: 500;
+  letter-spacing: 0;
+  text-transform: lowercase;
+  color: var(--ink-soft);
+}
+.rec-pill--ok { color: var(--ok); background: var(--ok-weak); border-color: color-mix(in srgb, var(--ok) 42%, transparent); }
+.rec-pill--warn { color: var(--warn); background: var(--warn-weak); border-color: color-mix(in srgb, var(--warn) 42%, transparent); }
+.rec-pill--danger { color: var(--danger); background: var(--danger-weak); border-color: color-mix(in srgb, var(--danger) 42%, transparent); }
+.rec-pill--info { color: var(--info); background: var(--info-weak); border-color: color-mix(in srgb, var(--info) 42%, transparent); }
+.rec-pill--sm { min-height: 22px; padding: 0 9px; font-size: 11.5px; }
+
+.rec-title {
+  margin: 0 0 18px;
+  font-family: var(--font-display);
+  font-weight: 300;
+  font-size: clamp(24px, 2.6vw, 34px);
+  line-height: 1.14;
+  letter-spacing: -0.032em;
+  color: var(--ink);
+  text-shadow: var(--type-halo);
+  /* NOT --measure. That token is the BODY reading measure (48ch at 15px, ~60
+     characters); spent on a 34px display face it caps at ~950px and the title
+     runs the width of the panel. A heading's cap is its own em-based one, and
+     24ch is the mock's — measured on the display face, not the body face. */
+  max-width: 24ch;
+}
+/* The record's id, quoted from the machine: mono, tabular, and set back from the
+   title so the words lead. */
+.rec-title__id {
+  font-family: var(--font-mono);
+  font-size: 0.56em;
+  font-weight: 400;
+  letter-spacing: 0;
+  color: var(--ink-faint);
+  font-variant-numeric: tabular-nums;
+  margin-right: 0.5em;
+  vertical-align: 0.14em;
+}
+
+.rec-meta,
+.rec-note {
+  margin: 0 0 8px;
+  font-size: 14px;
+  color: var(--ink-soft);
+  font-variant-numeric: tabular-nums;
+}
+.rec-meta b { font-weight: 500; color: var(--ink); }
+
+.rec-goal {
+  margin: 18px 0 0;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  font-size: 14.5px;
+  color: var(--ink-soft);
+}
+.rec-goal a {
+  display: inline-block;
+  min-height: 24px;
+  padding: 3px 0;
+  line-height: 18px;
+  color: var(--ink);
+  text-decoration: none;
+  border-bottom: var(--line) solid var(--rule);
+}
+.rec-goal a:hover { border-bottom-color: var(--ink); text-decoration: none; }
+
+/* ---- the figure band ----------------------------------------------------- */
+/* v2's stat-tile grid is the reference for any figure row the hall renders
+   (hall-direction-v2 §6): ONE band divided by vertical hairlines, not four
+   separate objects. A figure is DATA, never live, so it is ink and never the
+   accent — the One Warm Thing Rule. Only figures the record actually carries are
+   drawn: a task with no recorded actual minutes must not look incomplete. */
+.rec-figs {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: 0;
+  margin: var(--sp-lg) 0 0;
+  border-top: var(--line) solid var(--rule-soft);
+}
+.rec-fig { padding: 18px 20px 2px; border-left: var(--line) solid var(--rule-soft); }
+.rec-fig:first-child { border-left: 0; padding-left: 0; }
+.rec-fig__l {
+  display: block;
+  font-family: var(--label-face);
+  font-size: var(--label-size);
+  letter-spacing: var(--label-space);
+  text-transform: var(--label-case);
+  color: var(--ink-faint);
+  margin-bottom: 10px;
+}
+.rec-fig__v {
+  display: block;
+  font-family: var(--font-display);
+  font-weight: 300;
+  font-size: clamp(26px, 3vw, 40px);
+  line-height: 1;
+  letter-spacing: -0.035em;
+  color: var(--ink);
+  font-variant-numeric: tabular-nums;
+}
+/* The unit, one third the size, in the machine's face. */
+.rec-fig__u {
+  text-decoration: none;
+  font-family: var(--font-mono);
+  font-size: 0.36em;
+  letter-spacing: 0;
+  color: var(--ink-faint);
+  margin-left: 0.3em;
+}
+
+/* ---- the sections -------------------------------------------------------- */
+.rec-sec { margin: var(--sp-lg) 0 0; }
+.rec-sec__h {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin: 0 0 12px;
+  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);
+}
+.rec-sec__h em {
+  font-style: normal;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: 0.05em;
+  text-transform: lowercase;
+  color: var(--ink-faint);
+  border: var(--line) solid var(--rule-soft);
+  border-radius: var(--radius-pill);
+  padding: 2px 8px;
+}
+.rec-body {
+  margin: 0;
+  font-size: 15px;
+  line-height: 1.6;
+  color: var(--ink-soft);
+  max-width: var(--measure);
+}
+.rec-body b { font-weight: 500; color: var(--ink); }
+/* The description as filed. `--measure` is MEASURED (48ch renders ~60 characters
+   in Manrope) — a `ch` is the zero glyph's width, not a character, so do not do
+   fresh ch arithmetic here. */
+.rec-desc {
+  margin: 0;
+  font-size: 15px;
+  line-height: 1.65;
+  color: var(--ink-soft);
+  max-width: var(--measure);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+/* v1's bare ledger inside a v3 panel: a hairline on top, air, and the first row
+   drops both. The paths are the machine's words, so they take the mono face. */
+.rec-files { list-style: none; margin: 0; padding: 0; }
+.rec-files li {
+  border-top: var(--line) solid var(--rule-soft);
+  padding: 11px 0;
+  font-family: var(--font-mono);
+  font-size: 12.5px;
+  color: var(--ink-soft);
+  overflow-wrap: anywhere;
+}
+.rec-files li:first-child { border-top: 0; padding-top: 0; }
+
+.rec-depcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-lg); }
+.rec-deplist { list-style: none; margin: 0; padding: 0; }
+.rec-deplist li {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  border-top: var(--line) solid var(--rule-soft);
+  padding: 12px 0;
+}
+.rec-deplist li:first-child { border-top: 0; padding-top: 0; }
+.rec-dep {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 11px;
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 24px;
+  padding: 2px 0;
+  font-size: 14.5px;
+  color: var(--ink);
+  text-decoration: none;
+}
+.rec-dep:hover { text-decoration: underline; }
+.rec-dep__id {
+  flex: none;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--ink-faint);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ---- the actions --------------------------------------------------------- */
+.rec-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
+/* Where a lifecycle control would be but is not, the record says why in words.
+   Nothing here is pressable-or-live, so nothing here is warm. */
+.rec-actnote { margin: 0; flex: 1 1 240px; font-size: 14px; color: var(--ink-soft); max-width: var(--measure); }
+
+/* ---- the honest not-found / could-not-load headings ---------------------- */
+/* A real <h1>, not a styled paragraph: the empty and error states are renders
+   like any other, and one-header-main-h1 measures the DOM, not the happy path.
+   The mock draws these as a bare line, which is where the size comes from. */
+.rec-big {
+  margin: 0 0 14px;
+  font-family: var(--font-display);
+  font-weight: 300;
+  font-size: clamp(22px, 2.4vw, 30px);
+  line-height: 1.16;
+  letter-spacing: -0.03em;
+  color: var(--ink);
+  text-shadow: var(--type-halo);
+}
+
+@media (max-width: 640px) {
+  .rec-figs { grid-template-columns: repeat(2, 1fr); }
+  .rec-fig { padding: 16px 14px 2px; }
+  .rec-fig:nth-child(odd) { border-left: 0; padding-left: 0; }
+  .rec-fig:nth-child(n + 3) { border-top: var(--line) solid var(--rule-soft); margin-top: 12px; }
+  .rec-title { max-width: none; }
+}