htmlineage 0.0.0 → 0.1.0-beta.0

package/src/viewer/client/viewer.css

@@ -0,0 +1,1420 @@
+/* htmlineage viewer: every rule for the rail and the lineage panel. Colours
+   come from the Ledger tokens in themes.css, so both modes share one
+   rulebook. The report pane is never styled from here.
+
+   Borders and space separate things; colour is kept for the few marks that
+   mean something (the accent for "you are here", amber and red for trouble),
+   and those always come with words or a shape as well. */
+
+/* ---------- fonts: shipped with the package, never fetched ---------- */
+@font-face {
+  font-family: "Source Serif 4";
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+  src: url("/assets/fonts/SourceSerif4-Regular.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Source Serif 4";
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+  src: url("/assets/fonts/SourceSerif4-Medium.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Source Serif 4";
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+  src: url("/assets/fonts/SourceSerif4-SemiBold.woff2") format("woff2");
+}
+@font-face {
+  font-family: "JetBrains Mono";
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+  src: url("/assets/fonts/JetBrainsMono-Regular.woff2") format("woff2");
+}
+@font-face {
+  font-family: "JetBrains Mono";
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+  src: url("/assets/fonts/JetBrainsMono-Medium.woff2") format("woff2");
+}
+@font-face {
+  font-family: "JetBrains Mono";
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+  src: url("/assets/fonts/JetBrainsMono-SemiBold.woff2") format("woff2");
+}
+@font-face {
+  font-family: "JetBrains Mono";
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+  src: url("/assets/fonts/JetBrainsMono-Bold.woff2") format("woff2");
+}
+
+:root {
+  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
+  --f-serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --rail-h: 52px;
+  --nav-h: 48px;
+  --panel-w: 580px;
+  --gut: 28px; /* panel gutter */
+  --r-card: 8px;
+  --r-ctl: 6px;
+}
+
+/* ---------- base ---------- */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+html,
+body {
+  height: 100%;
+}
+body {
+  margin: 0;
+  background: var(--paper);
+  color: var(--ink);
+  font: 400 13px/1.5 var(--f-mono);
+  font-variant-numeric: tabular-nums lining-nums;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+::selection {
+  background: var(--sel);
+  color: var(--sel-ink);
+}
+button,
+select {
+  font: inherit;
+  color: inherit;
+}
+button {
+  cursor: pointer;
+}
+code {
+  font-family: var(--f-mono);
+  font-size: 0.9em;
+  color: var(--ink);
+  overflow-wrap: anywhere;
+}
+p,
+ul,
+h2 {
+  margin: 0;
+}
+ul {
+  padding: 0;
+  list-style: none;
+}
+svg {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  flex: none;
+}
+:focus {
+  outline: none;
+}
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+.muted {
+  color: var(--ink-3);
+}
+.gap {
+  flex: 1;
+}
+
+/* ---------- app frame ---------- */
+.app {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: var(--rail-h) minmax(0, 1fr) auto;
+  height: 100vh;
+  height: 100dvh;
+}
+
+.rail {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0 16px 0 20px;
+  background: var(--rail-bg);
+  border-bottom: 1px solid var(--rule);
+  min-width: 0;
+}
+.brand {
+  display: inline-flex;
+  align-items: center;
+  color: var(--ink);
+  text-decoration: none;
+  font: 700 13px/1 var(--f-mono);
+  text-transform: lowercase;
+  padding: 6px 4px;
+  margin-left: -4px;
+  border-radius: 4px;
+}
+/* the l is drawn in one mono cell (0.6em wide) and sits on the baseline */
+.brand svg {
+  width: 0.6em;
+  height: 1em;
+  margin-top: 0.18em;
+  overflow: visible;
+  stroke: var(--act);
+  stroke-width: 19;
+  stroke-linejoin: round;
+}
+.brand .open {
+  stroke-width: 8;
+}
+.brand .end {
+  fill: var(--act);
+  stroke: none;
+}
+.rail-report {
+  color: var(--ink-3);
+  padding-left: 12px;
+  border-left: 1px solid var(--rule);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+.rail-gap {
+  flex: 1;
+}
+
+.rail-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: 32px;
+  padding: 0 12px;
+  border: 1px solid var(--rule);
+  border-radius: var(--r-ctl);
+  background: var(--rail-btn-bg);
+  color: var(--ink);
+  font: 500 12px/1 var(--f-mono);
+  white-space: nowrap;
+  transition:
+    background-color 0.15s,
+    color 0.15s,
+    border-color 0.15s;
+}
+.rail-btn svg {
+  width: 14px;
+  height: 14px;
+}
+.rail-btn:hover {
+  border-color: var(--ink);
+}
+.rail-btn.done {
+  border-color: var(--ink);
+}
+.rail-btn:disabled {
+  color: var(--ink-3);
+  cursor: default;
+}
+.rail-btn:disabled:hover {
+  background: var(--rail-btn-bg);
+  border-color: var(--rule);
+  color: var(--ink-3);
+}
+.mode-btn {
+  width: 32px;
+  padding: 0;
+}
+.mode-btn .sun {
+  display: none;
+}
+[data-theme="console"] .mode-btn .sun {
+  display: block;
+}
+[data-theme="console"] .mode-btn .moon {
+  display: none;
+}
+
+.panes {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) var(--panel-w);
+  min-height: 0;
+}
+.report {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  background: #fff;
+}
+.lineage {
+  position: relative;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  background: var(--paper);
+  border-left: 1px solid var(--rule);
+  scrollbar-width: thin;
+  scrollbar-color: var(--rule) transparent;
+}
+.lineage::-webkit-scrollbar {
+  width: 10px;
+}
+.lineage::-webkit-scrollbar-thumb {
+  background: var(--rule);
+  border: 3px solid var(--paper);
+  border-radius: 4px;
+}
+.lineage:focus-visible {
+  outline: none;
+}
+
+/* ---------- shared pieces ---------- */
+.h {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  font: 500 12px/1 var(--f-mono);
+  color: var(--ink-3);
+  margin-bottom: 14px;
+}
+.h::before {
+  content: "--";
+}
+.h small {
+  font: inherit;
+  color: var(--ink-2);
+}
+
+.kind {
+  font: 500 12px/1 var(--f-mono);
+  text-transform: lowercase;
+  color: var(--ink-2);
+  white-space: nowrap;
+}
+
+/* an id is a small outlined chip: the border says it can be pressed */
+.id {
+  display: inline-block;
+  vertical-align: baseline;
+  border: 1px solid var(--rule);
+  border-radius: 4px;
+  padding: 0 5px;
+  background: transparent;
+  color: var(--ink);
+  font: 500 12px/1.45 var(--f-mono);
+  white-space: nowrap;
+  transition:
+    background-color 0.15s,
+    border-color 0.15s;
+}
+button.id:hover {
+  border-color: var(--ink);
+  background: var(--band);
+}
+.id.static {
+  cursor: default;
+}
+.id.missing {
+  border-style: dashed;
+  border-color: var(--stop);
+  color: var(--stop);
+}
+
+.sw {
+  display: inline-block;
+  flex: none;
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  vertical-align: 0;
+}
+.sw.full {
+  background: var(--node);
+}
+.sw.partial {
+  border: 1.5px solid var(--warn);
+}
+.sw.ungrounded {
+  border: 1.5px dashed var(--stop);
+}
+.sw.warn {
+  background: var(--warn);
+}
+.sw.stopw {
+  background: var(--stop);
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: 32px;
+  padding: 0 12px;
+  border: 1px solid var(--rule);
+  border-radius: var(--r-ctl);
+  background: transparent;
+  color: var(--ink);
+  font: 500 12px/1 var(--f-mono);
+  white-space: nowrap;
+  transition:
+    background-color 0.15s,
+    color 0.15s,
+    border-color 0.15s;
+}
+.btn svg {
+  width: 14px;
+  height: 14px;
+}
+.btn:hover:not(:disabled) {
+  border-color: var(--ink);
+}
+/* the one filled button: the head's first action */
+.head-act .btn:first-child:not(:disabled) {
+  background: var(--ink);
+  border-color: var(--ink);
+  color: var(--on-act);
+}
+.head-act .btn:first-child:hover:not(:disabled) {
+  background: var(--ink-2);
+  border-color: var(--ink-2);
+}
+.btn:disabled {
+  color: var(--ink-3);
+  border-color: var(--rule);
+  cursor: default;
+}
+.btn.done,
+.btn.done:hover:not(:disabled),
+.head-act .btn.done:first-child:not(:disabled) {
+  background: transparent;
+  color: var(--ink);
+  border-color: var(--ink);
+}
+
+.link {
+  border: 0;
+  padding: 0;
+  background: none;
+  color: var(--ink);
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 3px;
+  text-decoration-color: var(--rule-strong);
+  transition:
+    color 0.15s,
+    text-decoration-color 0.15s;
+}
+.link:hover {
+  color: var(--ink);
+  text-decoration-color: currentColor;
+}
+
+/* ---------- nav ---------- */
+.nav {
+  position: sticky;
+  top: 0;
+  z-index: 3;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  height: var(--nav-h);
+  padding: 0 var(--gut) 0 calc(var(--gut) - 8px);
+  background: var(--paper);
+  border-bottom: 1px solid var(--rule);
+}
+.back {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 30px;
+  padding: 0 8px 0 4px;
+  border: 0;
+  border-radius: var(--r-ctl);
+  background: transparent;
+  color: var(--ink-2);
+  font: 500 12px/1 var(--f-mono);
+  transition: color 0.15s;
+}
+.back svg {
+  width: 14px;
+  height: 14px;
+  stroke-width: 1.8;
+}
+.back:hover {
+  color: var(--ink);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+.nav .link {
+  font-size: 12px;
+}
+
+/* ---------- summary ---------- */
+.sec {
+  padding: 32px var(--gut) 28px;
+}
+.sec + .sec {
+  border-top: 1px solid var(--rule);
+}
+.lede-sub {
+  font: 400 24px/1.3 var(--f-serif);
+  letter-spacing: -0.01em;
+  text-wrap: balance;
+}
+.lede-sub + .lede-sub {
+  margin-top: 16px;
+}
+.lede-more {
+  display: block;
+  margin-top: 8px;
+  color: var(--ink-2);
+  font: 400 15px/1.5 var(--f-serif);
+  letter-spacing: 0;
+}
+.built {
+  border: 1px solid var(--rule);
+  border-radius: var(--r-card);
+}
+.built li {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 4px 12px;
+  padding: 12px 16px;
+}
+.built .what {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.built li + li {
+  border-top: 1px solid var(--rule-soft);
+}
+.built .when {
+  margin-left: auto;
+  color: var(--ink-2);
+  font-size: 12.5px;
+  text-align: right;
+}
+.built .when.warn {
+  color: var(--warn);
+}
+
+/* needs attention */
+.attn {
+  border: 1px solid var(--rule);
+  border-radius: var(--r-card);
+  overflow: hidden;
+}
+.attn li + li {
+  border-top: 1px solid var(--rule-soft);
+}
+.attn button {
+  display: grid;
+  grid-template-columns: 9px auto minmax(0, 1fr);
+  align-items: start;
+  column-gap: 12px;
+  width: 100%;
+  padding: 14px 16px;
+  border: 0;
+  background: transparent;
+  text-align: left;
+  line-height: 1.55;
+  transition: background-color 0.12s;
+}
+.attn .plain {
+  display: grid;
+  grid-template-columns: 9px minmax(0, 1fr);
+  column-gap: 12px;
+  padding: 14px 16px;
+  line-height: 1.55;
+}
+.attn .sw {
+  margin-top: 6px;
+}
+.attn .id {
+  margin-top: 1px;
+}
+.attn .what {
+  color: var(--ink);
+  font: 400 14.5px/1.5 var(--f-serif);
+  text-wrap: pretty;
+}
+.attn .what b {
+  color: var(--ink);
+}
+.attn .what code {
+  color: var(--ink);
+}
+.attn .tag {
+  font-weight: 600;
+}
+.attn .tag.stop {
+  color: var(--stop);
+}
+.attn .tag.warn,
+.attn .tag.ext {
+  color: var(--warn);
+}
+.attn button:hover {
+  background: var(--band-soft);
+}
+.attn button:hover .what {
+  text-decoration: underline;
+  text-decoration-color: var(--rule-strong);
+  text-underline-offset: 3px;
+}
+.attn button:hover .id {
+  border-color: var(--ink);
+}
+.prompt {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin: 0;
+  padding: 24px var(--gut) 36px;
+  border-top: 1px solid var(--rule);
+  color: var(--ink-3);
+  font-size: 12.5px;
+  text-wrap: pretty;
+}
+.prompt svg {
+  width: 26px;
+  height: 26px;
+  stroke: var(--ink-3);
+}
+
+/* ---------- selected: head ---------- */
+.head {
+  padding: 32px var(--gut) 28px;
+  border-bottom: 1px solid var(--rule);
+}
+.head .value {
+  font: 500 52px/1 var(--f-mono);
+  letter-spacing: -0.04em;
+  color: var(--ink);
+  font-feature-settings: "tnum", "lnum";
+  overflow-wrap: anywhere;
+}
+.head .label {
+  margin-top: 14px;
+  font: 400 18px/1.4 var(--f-serif);
+  text-wrap: pretty;
+}
+.head .claim {
+  font: 400 21px/1.4 var(--f-serif);
+  letter-spacing: -0.005em;
+  text-wrap: pretty;
+}
+.head .claim code {
+  color: inherit;
+}
+.head .claim + .label {
+  margin-top: 8px;
+  font: 400 12.5px/1.5 var(--f-mono);
+}
+.head .claim mark {
+  background: none;
+  color: var(--ink);
+  font-weight: 600;
+  text-decoration: underline;
+  text-decoration-color: var(--accent);
+  text-decoration-thickness: 1.5px;
+  text-underline-offset: 4px;
+}
+.head-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 12px;
+  margin-top: 18px;
+}
+.head-meta .state {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--ink-2);
+  font-size: 12.5px;
+}
+.head-act {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 24px;
+}
+
+/* ---------- selected: rests on ---------- */
+.rests {
+  padding: 28px var(--gut) 28px;
+  border-bottom: 1px solid var(--rule);
+}
+.rests ul {
+  border: 1px solid var(--rule);
+  border-radius: var(--r-card);
+}
+.rests li {
+  display: grid;
+  grid-template-columns: 9px minmax(0, 1fr) auto;
+  align-items: baseline;
+  column-gap: 12px;
+  padding: 12px 16px;
+}
+.rests li + li {
+  border-top: 1px solid var(--rule-soft);
+}
+.rests li .sw {
+  align-self: center;
+}
+.rests li .what {
+  min-width: 0;
+}
+.rests li .what code {
+  font-weight: 500;
+}
+.rests li .when {
+  color: var(--ink-2);
+  font-size: 12.5px;
+  white-space: nowrap;
+  text-align: right;
+}
+.rests li .when.warn {
+  color: var(--warn);
+}
+.rests li .when.stop {
+  color: var(--stop);
+}
+.rests li[data-jump] {
+  cursor: pointer;
+}
+.rests li[data-jump]:hover .what code {
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 3px;
+}
+/* ---------- used by ---------- */
+.uses {
+  padding: 28px var(--gut) 0;
+}
+.uses .btn svg {
+  width: 12px;
+  height: 12px;
+  stroke-width: 1.8;
+}
+/* ---------- how it was computed ---------- */
+.score-h {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 32px var(--gut) 16px;
+}
+.score-h .h {
+  margin: 0;
+}
+.card {
+  padding: 18px 20px;
+  border: 1px solid var(--rule);
+  border-radius: var(--r-card);
+  background: var(--paper);
+  transition: border-color 0.15s;
+}
+.step-h {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  min-width: 0;
+}
+.step-h .id {
+  position: relative;
+  top: -1px;
+}
+.step-h .ttl {
+  flex: 1;
+  min-width: 0;
+  font: 400 15.5px/1.45 var(--f-serif);
+  text-wrap: pretty;
+}
+.step-h .ttl.clamp {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+.step-h .fig-link {
+  flex: none;
+  margin-left: 8px;
+  font: 400 12px/1.2 var(--f-mono);
+}
+.step-h .ttl code {
+  font-size: 13.5px;
+  font-weight: 500;
+}
+.step-h .fig {
+  flex: none;
+  margin-left: 12px;
+  font: 600 15px/1 var(--f-mono);
+  color: var(--ink);
+  white-space: nowrap;
+}
+.step-h .fig.small {
+  font: 400 12px/1.2 var(--f-mono);
+  color: var(--ink-3);
+}
+.step-h .fig:empty {
+  display: none;
+}
+
+/* a source's desc, under its mart */
+.sub {
+  margin-top: 6px;
+  color: var(--ink-2);
+  font: 400 14.5px/1.5 var(--f-serif);
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+/* kind · facts · toggle, one quiet line under the title */
+.meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 4px 8px;
+  margin-top: 10px;
+  color: var(--ink-3);
+  font: 400 12px/1.6 var(--f-mono);
+}
+.card > .meta:first-child {
+  margin-top: 0;
+}
+.meta .sep {
+  color: var(--graph);
+}
+.meta .id {
+  font-size: 11.5px;
+}
+.meta b {
+  color: var(--ink);
+  font-weight: 600;
+}
+.meta .warn {
+  color: var(--warn);
+}
+.meta .stop {
+  color: var(--stop);
+}
+.tog {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--ink-2);
+  font: 500 12px/1.4 var(--f-mono);
+}
+.tog:hover {
+  color: var(--ink);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+.tog svg {
+  width: 12px;
+  height: 12px;
+  stroke-width: 1.6;
+  transition: rotate 0.2s var(--ease-out);
+}
+.tog[aria-expanded="true"] svg {
+  rotate: 90deg;
+}
+
+/* what opens below the meta line sits under a hairline */
+.card > .meta + :is(.reads, .formula) {
+  margin-top: 16px;
+  padding-top: 14px;
+  border-top: 1px solid var(--rule-soft);
+}
+
+.reads {
+  margin-top: 10px;
+  color: var(--ink-2);
+  font: 400 14px/1.6 var(--f-serif);
+  text-wrap: pretty;
+}
+.card > .reads:first-child {
+  margin-top: 0;
+}
+.reads b {
+  color: var(--ink);
+  font-weight: 600;
+}
+.reads .id {
+  font-size: 12px;
+}
+.reads.cols {
+  color: var(--ink-3);
+  font: 400 12px/1.7 var(--f-mono);
+}
+.reads.cols code {
+  font-size: inherit;
+  color: var(--ink-2);
+}
+
+/* formula: the expression with ids, then with values, then the result */
+.formula {
+  display: grid;
+  grid-template-columns: 18px minmax(0, 1fr);
+  row-gap: 4px;
+  margin-top: 12px;
+  font: 500 14px/1.6 var(--f-mono);
+  font-variant-numeric: tabular-nums;
+}
+.formula .eq {
+  color: var(--ink-3);
+}
+.formula .id {
+  font-size: 11.5px;
+  padding: 0 4px;
+}
+.formula > :nth-last-child(-n + 2) {
+  margin-top: 6px;
+  padding-top: 8px;
+  border-top: 1px solid var(--rule-soft);
+}
+.formula .res {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--ink);
+}
+
+/* sql snippet: the bottom of its card, full width under a hairline, on the
+   one recessed tone the panel keeps */
+.snip {
+  margin: 16px -20px -18px;
+  background: var(--field);
+  border-top: 1px solid var(--rule);
+  border-radius: 0 0 calc(var(--r-card) - 1px) calc(var(--r-card) - 1px);
+  overflow: hidden;
+}
+.reads.cols + .snip {
+  margin-top: 14px;
+}
+.snip pre {
+  margin: 0;
+  padding: 14px 20px;
+  font: 400 12.5px/1.6 var(--f-mono);
+  color: var(--ink);
+  white-space: pre;
+  overflow-x: auto;
+  tab-size: 2;
+  scrollbar-width: thin;
+  scrollbar-color: var(--rule) transparent;
+}
+.snip pre .kw {
+  color: var(--kw);
+  font-weight: 500;
+}
+.snip pre .str {
+  color: var(--str);
+}
+.snip pre .num {
+  color: var(--num);
+}
+.snip pre .cm {
+  color: var(--ink-3);
+  font-style: italic;
+}
+.snip-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px 6px 20px;
+  border-top: 1px solid var(--rule-soft);
+}
+.snip-bar .muted {
+  font-size: 12px !important;
+}
+.snip-bar .link {
+  font-size: 12px;
+}
+.snip-bar .btn {
+  height: 26px;
+  padding: 0 10px;
+  font-size: 11.5px;
+}
+.snip-bar .btn svg {
+  width: 12px;
+  height: 12px;
+}
+
+/* read out to screen readers, never seen */
+.vh {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* ---------- the status bar ---------- */
+.status {
+  position: relative;
+  z-index: 5;
+  background: var(--paper);
+  border-top: 1px solid var(--rule);
+}
+
+/* ---------- narrower screens ---------- */
+@media (max-width: 980px) {
+  :root {
+    --panel-w: 460px;
+  }
+}
+
+@media (max-width: 760px) {
+  :root {
+    --gut: 18px;
+    --status-h: 40px;
+  }
+  .app {
+    display: block;
+    height: auto;
+    padding-bottom: var(--status-h);
+  }
+  .status {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+  .rail {
+    flex-wrap: wrap;
+    row-gap: 0;
+    padding: 8px 12px 0 16px;
+  }
+  .rail .brand {
+    height: 32px;
+  }
+  .rail-report {
+    order: 10;
+    flex-basis: 100%;
+    padding: 6px 0 8px;
+    border-left: 0;
+    font-size: 12px;
+  }
+  .rail-btn span {
+    display: none;
+  }
+  #copyReport {
+    width: 32px;
+    padding: 0;
+  }
+  .panes {
+    display: block;
+  }
+  .report {
+    height: 46vh;
+    height: 46svh;
+  }
+  .lineage {
+    overflow: visible;
+    border-left: 0;
+    border-top: 1px solid var(--rule);
+  }
+  .head .value {
+    font-size: 48px;
+  }
+  .card {
+    padding: 18px 16px 16px;
+  }
+  .snip {
+    margin: 14px -16px -16px;
+  }
+  .snip pre {
+    padding: 12px 16px;
+  }
+  .rests li {
+    grid-template-columns: 9px minmax(0, 1fr);
+    row-gap: 2px;
+  }
+  .rests li .when {
+    grid-column: 2;
+    text-align: left;
+    white-space: normal;
+  }
+  .built .when {
+    flex-basis: 100%;
+    margin-left: 0;
+    padding-left: 21px;
+    text-align: left;
+  }
+  .step-h {
+    flex-wrap: wrap;
+    row-gap: 6px;
+  }
+  .step-h .ttl {
+    flex: 1 1 24ch;
+  }
+  .step-h .fig {
+    margin-left: auto;
+  }
+}
+
+/* ---------- the status bar ---------- */
+.statusbar {
+  font-size: 12px;
+  color: var(--ink-3);
+}
+.statusbar .bar-line {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 4px 16px;
+  padding: 10px var(--gut);
+}
+.statusbar .link {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+}
+.statusbar .link svg {
+  width: 12px;
+  height: 12px;
+  transition: rotate 0.2s var(--ease-out);
+}
+.statusbar .link[aria-expanded="true"] svg {
+  rotate: -90deg;
+}
+.statusbar .bar-line > * {
+  flex: none;
+}
+.statusbar .reason {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--stop);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.statusbar .holds {
+  padding-left: 16px;
+  border-left: 1px solid var(--rule);
+}
+.statusbar .bar-line > .bar-r {
+  flex: 0 1 auto;
+}
+.statusbar .bar-r {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  min-width: 0;
+  max-width: 50%;
+  margin-left: auto;
+}
+.statusbar .here {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  min-width: 0;
+}
+.statusbar .here-id {
+  padding: 0 5px;
+  border: 1px solid var(--rule);
+  border-radius: 4px;
+  color: var(--ink);
+  font-weight: 500;
+}
+.statusbar .here-what {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.statusbar .here-what b {
+  color: var(--ink);
+  font-weight: 600;
+}
+.statusbar .key {
+  flex: none;
+  white-space: nowrap;
+}
+.statusbar kbd {
+  padding: 0 4px;
+  border: 1px solid var(--rule);
+  border-radius: 4px;
+  font: inherit;
+  font-size: 11px;
+}
+.statusbar .flash {
+  overflow: hidden;
+  color: var(--ink);
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.statusbar .flash.warn {
+  color: var(--warn);
+}
+.statusbar .drawer {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 100%;
+  max-height: 40vh;
+  overflow-y: auto;
+  padding: 8px var(--gut);
+  background: var(--paper);
+  border-top: 1px solid var(--rule);
+}
+.statusbar .drawer li {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  padding: 10px 0;
+  line-height: 1.55;
+}
+.statusbar .drawer li + li {
+  border-top: 1px solid var(--rule-soft);
+}
+.statusbar .drawer b {
+  color: var(--ink-2);
+}
+/* a callout is drawn, not filled: a border in the warning colour, words in ink */
+.c3 {
+  margin-top: 18px;
+  padding: 10px 14px;
+  border: 1px solid var(--warn);
+  border-radius: var(--r-ctl);
+  color: var(--ink);
+  font-size: 12.5px;
+  line-height: 1.55;
+}
+.c3 b {
+  color: var(--warn);
+}
+
+/* after the base status bar rules, so these win at phone width */
+@media (max-width: 760px) {
+  .statusbar .holds,
+  .statusbar .key {
+    display: none;
+  }
+  .statusbar .bar-line {
+    flex-wrap: wrap;
+  }
+  .statusbar .bar-r {
+    max-width: none;
+  }
+}
+
+/* ---------- the outline ----------
+   Closed rows are a hairline list. An open row becomes a bordered box: its
+   head on a band, its card and its own inputs inside, joined to the head by
+   a light guide line under the chevron. */
+.ol-sec {
+  padding: 0 var(--gut) 36px;
+}
+.uses + .ol-sec {
+  padding-top: 14px;
+  padding-bottom: 0;
+}
+.ol-own {
+  margin-bottom: 4px;
+}
+.ol-cap {
+  margin: 20px 0 8px;
+  font: 500 12px/1.4 var(--f-mono);
+  color: var(--ink-3);
+}
+.ol {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.ol-item {
+  border-bottom: 1px solid var(--rule-soft);
+}
+
+/* the row: chevron, swatch, then the title over a quiet meta line, value right */
+.ol-row {
+  all: unset;
+  box-sizing: border-box;
+  width: 100%;
+  cursor: pointer;
+  display: grid;
+  grid-template-columns: 16px 8px minmax(0, 1fr) auto;
+  gap: 0 10px;
+  align-items: start;
+  padding: 11px 12px 11px 8px;
+  border-radius: 6px;
+  transition: background-color 0.15s;
+}
+.ol-row:hover {
+  background: var(--band-soft);
+}
+.ol-row:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
+.ol-row[disabled] {
+  cursor: default;
+}
+.ol-row[disabled]:hover {
+  background: none;
+}
+.ol-chev {
+  display: grid;
+  place-items: center;
+  height: 21px;
+  color: var(--ink-3);
+}
+.ol-chev svg {
+  width: 12px;
+  height: 12px;
+  stroke-width: 1.8;
+  transition: rotate 0.2s var(--ease-out);
+}
+.ol-row:hover .ol-chev {
+  color: var(--ink);
+}
+.ol-row[aria-expanded="true"] .ol-chev svg {
+  rotate: 90deg;
+}
+.ol-row .sw {
+  margin-top: 7px;
+}
+.ol-main {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+.ol-t {
+  font: 400 15px/1.4 var(--f-serif);
+  color: var(--ink);
+  text-wrap: pretty;
+}
+.ol-t .id {
+  display: inline-block;
+  margin-right: 6px;
+  padding: 0 5px;
+  border: 1px solid var(--rule);
+  border-radius: 4px;
+  font: 500 11.5px/1.6 var(--f-mono);
+  color: var(--ink-2);
+  vertical-align: 1px;
+}
+.ol-t code {
+  font-size: 13px;
+  overflow-wrap: anywhere;
+}
+.ol-meta {
+  font: 400 11.5px/1.5 var(--f-mono);
+  color: var(--ink-3);
+  overflow-wrap: break-word;
+}
+.ol-meta .sep {
+  margin: 0 6px;
+}
+.ol-meta .onpage {
+  color: var(--accent);
+}
+.ol-meta .stop {
+  color: var(--stop);
+}
+.ol-row .fig {
+  padding-left: 12px;
+  font: 500 13px/21px var(--f-mono);
+  font-variant-numeric: tabular-nums;
+  color: var(--ink);
+}
+
+/* open: one bordered box holding the head, the card and the inputs */
+.ol-item.is-open {
+  margin: 8px 0;
+  border: 1px solid var(--rule);
+  border-radius: var(--r-card);
+  background: var(--paper);
+}
+.ol-item.is-open > .ol-row {
+  border-radius: calc(var(--r-card) - 1px) calc(var(--r-card) - 1px) 0 0;
+  background: var(--band-soft);
+  border-bottom: 1px solid var(--rule-soft);
+}
+.ol-item.is-open > .ol-row:hover {
+  background: var(--band);
+}
+.ol-body {
+  position: relative;
+  padding: 14px 14px 14px 42px;
+}
+/* the guide: from under the chevron down the body, in the lightest rule */
+.ol-body::before {
+  content: "";
+  position: absolute;
+  left: 15.5px;
+  top: 0;
+  bottom: 14px;
+  border-left: 1px solid var(--rule);
+}
+.ol-body .card.bare {
+  padding: 0;
+  border: 0;
+  background: none;
+}
+/* a bare card has no padding to bleed into: the SQL sits as its own framed
+   block inside the open row */
+.ol-body .card.bare .snip {
+  margin: 14px 0 0;
+  border: 1px solid var(--rule);
+  border-radius: 6px;
+}
+.ol-acts {
+  display: flex;
+  gap: 18px;
+  margin-top: 16px;
+  font-size: 12px;
+}
+.ol-body .ol-cap {
+  margin-top: 18px;
+}
+.ol-body > .ol {
+  border-top: 1px solid var(--rule-soft);
+}
+.ol-body > .ol > .ol-item:last-child {
+  border-bottom: 0;
+}
+.ol-body > .ol > .ol-item.is-open:last-child {
+  margin-bottom: 0;
+}
+
+@media (max-width: 600px) {
+  .ol-body {
+    padding-left: 16px;
+  }
+  .ol-body::before {
+    display: none;
+  }
+}