@mason-data/cli 0.7.0 → 0.8.0

package/dist/src/web/app.css

@@ -1,76 +1,716 @@
-/* The web page of mason start (src/web/app.js). The CLI's palette (src/cli/style.ts): bold for a heading, the type
-   colour for what you can type, dim for a description, green / red / yellow for a state only. No font is fetched:
-   the system's, under the server's default-src 'self'. */
+/* The web page of mason start (src/web/app.js; docs/WEB-UI.md "Presentation"). MASON'S OWN LOOK: a mason lays stone and
+   brick course by course, and Mason builds a copy of a Postgres table by table and keeps it standing. Warm graphite
+   words on a stone white (charcoal slate in the dark), mortar greys for every hairline, ONE patina (verdigris) for the
+   accent and the primary action; mono first (Geist Mono for the chrome, the labels, the numbers and the tables; Geist
+   Sans for a sentence of prose) under a slab display face (Zilla Slab) for the titles and the big numbers; square boxes
+   framed in a hairline, lifted by a quiet stone step; a copy's bar a thin solid line with its % at the end. Colour otherwise says a
+   state (ok / warn / bad / unknown), always beside its word. No gradient, no image: every texture is a border or a box.
+   Every font is Mason's own file (src/web/vendor/, served from the allowlist): nothing is fetched from elsewhere. */
+
+@font-face {
+  font-family: "Geist";
+  src: url("vendor/geist-1.7.2/Geist-Variable.woff2") format("woff2");
+  font-weight: 100 900; font-style: normal; font-display: swap;
+}
+@font-face {
+  font-family: "Zilla Slab";
+  src: url("vendor/zilla-slab-5.3.0/zilla-slab-latin-700-normal.woff2") format("woff2");
+  font-weight: 700; font-style: normal; font-display: swap;
+}
+@font-face {
+  font-family: "Geist Mono";
+  src: url("vendor/geist-1.7.2/GeistMono-Variable.woff2") format("woff2");
+  font-weight: 100 900; font-style: normal; font-display: swap;
+}
+
+/* ---------------------------------------------------------------- tokens */
 :root {
-  --bg: #fbfbfa; --fg: #1d1d1b; --dim: #6b6b66; --line: #e3e2de; --panel: #ffffff;
-  --code: #0b6e8a; --ok: #1f7a3a; --bad: #b42318; --warn: #8a5a00; --bar: #0b6e8a;
-  color-scheme: light dark;
+  /* stone white and warm graphite: the page, a box, a hover, a sunken strip, the sidebar's pale stone, the nav's current
+     row; the mortar inside a box, a control's edge, a box's hairline frame; the text in three steps */
+  --bg: #f6f5f2; --surface: #fdfcfb; --hover: #efede9; --sunken: #f2f0ec; --side: #f2f0ec; --current: #e9e6e0;
+  --line: #e8e5df; --line-strong: #cfcac1; --frame: #dcd8d0;
+  --fg: #2d2a27; --muted: #615c56; --subtle: #69645d;
+  /* the patina: the one accent (focus, a link's hover, the current nav row's edge, the brick being laid, a chart's mark),
+     verdigris on old stone; the states (each beside a word, never colour alone; the failed red a rose, never the accent) */
+  --accent: #2b6f70; --accent-soft: #e2eeed;
+  --ok: #2e7340; --warn: #865600; --bad: #a6344f; --unknown: #69645d;
+  --ok-soft: #e5f1e7; --warn-soft: #f7eedb; --bad-soft: #f9e5e8;
+  /* the primary action: patina, white words */
+  --cta: #2b6f70; --cta-hover: #235d5e; --cta-fg: #ffffff; --cta-line: #255f60;
+  /* a secondary button: a pale stone, a hairline lift */
+  --btn: #fdfcfb; --btn-hover: #f2f0ec;
+  --bevel: 0 1px 1px rgb(45 42 39 / 0.06);
+  --bevel-pressed: inset 0 1px 1px rgb(45 42 39 / 0.08);
+  /* the page's one shadow, quiet: a hairline stone step behind a box and a soft low lift (a hint of stacked stone) */
+  --stone-1: #e6e2db; --stone-2: #efece7; --shadow: var(--stone-1);
+  --drop: 1px 1px 0 var(--stone-1), 0 2px 6px -2px rgb(45 42 39 / 0.06); --drop-hover: 2px 2px 0 var(--stone-1), 0 8px 18px -8px rgb(45 42 39 / 0.14);
+  /* the sidebar's head and the phone's top bar: the sidebar's own pale stone; a table's header row and the raw log, a
+     tinted surface */
+  --chrome-bg: var(--side); --chrome-fg: var(--fg); --chrome-muted: var(--muted); --chrome-line: var(--line-strong);
+  --thead-bg: #f3f1ed; --thead-fg: #2d2a27; --thead-muted: #615c56; --zebra: #f9f8f6;
+  --code-bg: #f4f2ee; --code-fg: #36322e; --code-muted: #69645d;
+  /* the motifs' laid brick (the title's course, the checklist) patina; a copy's bar: its fill patina while it copies, its
+     track pale stone, served, failed and not kept current their own tints (validated together: dataviz's
+     validate_palette.js, --pairs all, the words beside) */
+  --brick: #199eaa; --glow: 0 0 0 transparent;
+  --bar-track: #e8e5df; --bar-ok: #33733f; --bar-warn: #c29647; --bar-bad: #a85071;
+  /* a chart (src/web/charts.js reads these): its trend in mortar grey, its mark and latest point the patina */
+  --chart-trend: #b8b2a8; --chart-mark: #2b6f70; --chart-grid: #ebe8e2; --chart-text: #69645d;
+  /* what dims the page under the phone's open menu */
+  --scrim: rgb(45 42 39 / 0.24);
+
+  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --font-display: "Zilla Slab", "Rockwell", "Roboto Slab", Georgia, serif;
+  --text-xs: 12px; --text-sm: 13px; --text-md: 14px; --text-lg: 16px; --text-xl: 26px; --text-2xl: 34px;
+
+  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px;
+  --radius-sm: 2px; --radius: 0; --radius-lg: 0;
+  --width: 1200px; --gutter: 24px; --topbar-h: 56px; --sidebar-w: 232px; --rail-w: 60px;
+  color-scheme: light;
 }
 @media (prefers-color-scheme: dark) {
-  :root { --bg: #161615; --fg: #e8e7e3; --dim: #9a9993; --line: #2e2e2b; --panel: #1e1e1c;
-    --code: #5cc3df; --ok: #5fcf80; --bad: #ff7b6e; --warn: #e9b64a; --bar: #5cc3df; }
+  :root {
+    /* charcoal slate, warm pale words, the patina lifted */
+    --bg: #16181c; --surface: #1c1f24; --hover: #252930; --sunken: #191c20; --side: #14161a; --current: #272b33;
+    --line: #2a2e35; --line-strong: #3f444d; --frame: #30353d;
+    --fg: #e7e5e1; --muted: #aaa69f; --subtle: #97938c;
+    --accent: #6cbcb8; --accent-soft: #1b3434;
+    --ok: #72c48f; --warn: #e2b45e; --bad: #ed8da4; --unknown: #97938c;
+    --ok-soft: #18291f; --warn-soft: #2c2517; --bad-soft: #351f26;
+    --cta: #5aaba7; --cta-hover: #6cbcb8; --cta-fg: #0d1919; --cta-line: #5aaba7;
+    --btn: #22262c; --btn-hover: #2a2f36;
+    --bevel: 0 1px 1px rgb(0 0 0 / 0.25);
+    --bevel-pressed: inset 0 1px 1px rgb(0 0 0 / 0.3);
+    --stone-1: #111316; --stone-2: #14161a;
+    --drop: 1px 1px 0 var(--stone-1), 0 2px 8px -2px rgb(0 0 0 / 0.3); --drop-hover: 2px 2px 0 var(--stone-1), 0 8px 18px -8px rgb(0 0 0 / 0.5);
+    --thead-bg: #20232a; --thead-fg: #e7e5e1; --thead-muted: #aaa69f; --zebra: #1f2227;
+    --code-bg: #121417; --code-fg: #dcdad5; --code-muted: #97938c;
+    --brick: #1ea2a8; --glow: 0 0 0 transparent;
+    --bar-track: #2c3038; --bar-ok: #2f743d; --bar-warn: #b58a3a; --bar-bad: #b35274;
+    --chart-trend: #4f555e; --chart-mark: #6cbcb8; --chart-grid: #2a2e35; --chart-text: #97938c;
+    --scrim: rgb(0 0 0 / 0.5);
+    color-scheme: dark;
+  }
 }
+
+/* ---------------------------------------------------------------- base */
 * { box-sizing: border-box; }
-body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
-header, main, #poll { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding-top: 24px; }
-h1 { font-size: 22px; margin: 0; }
-.where { margin: 0; color: var(--dim); }
-.updated { margin: 0 0 0 auto; color: var(--dim); font-size: 13px; }
-section { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 4px 20px 16px; margin: 16px 0; }
-h2 { font-size: 17px; margin: 14px 0 10px; }
-h3 { font-size: 15px; margin: 18px 0 6px; }
-code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
-code { color: var(--code); overflow-wrap: anywhere; }
-pre { white-space: pre-wrap; margin: 6px 0 0; color: var(--dim); }
-.dim, .lead { color: var(--dim); }
-.facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; }
-.facts dt { color: var(--dim); }
-.facts dd { margin: 0; overflow-wrap: anywhere; }
-table { width: 100%; border-collapse: collapse; }
-th, td { text-align: left; vertical-align: top; padding: 6px 8px 6px 0; border-top: 1px solid var(--line); font-weight: normal; }
-thead th { border-top: 0; color: var(--dim); font-size: 13px; }
-td.bar { white-space: nowrap; width: 1%; }
+html { -webkit-text-size-adjust: 100%; }
+body { margin: 0; background: var(--bg); color: var(--fg); font: var(--text-sm)/1.55 var(--font-mono); -webkit-font-smoothing: antialiased; }
+/* a sentence of prose reads in the sans; everything else (the chrome, labels, numbers, tables) is mono */
+.desc, .lead, .tip, .note, .empty p, .failure dd, .connect > p:not(.connect-title), .sort-note, .cut, .more p { font-family: var(--font-sans); font-size: var(--text-md); }
+a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; text-decoration-thickness: 1px; }
+a:hover { text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
+:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 0; }
+h1, h2, h3 { font-family: var(--font-mono); font-weight: 700; letter-spacing: -0.01em; }
+/* the slab: a title and a big number, cut like a mason's letters (one weight, 700) */
+h2, h3, .health, .card-value, .brand-name, .checklist-title, .connect.first .connect-title, .empty .empty-title { font-family: var(--font-display); font-weight: 700; letter-spacing: 0; }
+h3 { font-size: 20px; margin: var(--space-6) 0 var(--space-3); }
+code, pre, kbd, samp { font-family: var(--font-mono); font-size: 0.95em; }
+code { overflow-wrap: anywhere; }
+pre { white-space: pre-wrap; margin: var(--space-2) 0 0; color: var(--muted); }
+.dim, .lead, .desc { color: var(--muted); }
+.lead { margin: 0 0 var(--space-3); }
+.mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
+.count { margin: var(--space-3) 0 0; }
+.warn { color: var(--warn); }
+
+/* ---------------------------------------------------------------- the sidebar and the page beside it */
+/* after Vercel's and Supabase's dashboards: a fixed column on the left (the project, the nav, when it was updated), the
+   page to its right; below 1000 px an icon rail, its labels tooltips; below 640 px a top bar whose menu opens the nav */
+.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); display: flex; flex-direction: column; z-index: 20;
+  background: var(--side); border-right: 1px solid var(--frame); }
+.content { margin-left: var(--sidebar-w); min-width: 0; }
+main, #poll { max-width: var(--width); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
+/* the head: the mark on its patina tile, the project under it, a hairline below */
+.side-head { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4) var(--space-3) var(--space-3); flex: none;
+  background: var(--chrome-bg); color: var(--chrome-fg); border-bottom: 1px solid var(--line); }
+.brand { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-lg); font-weight: 800; letter-spacing: -0.02em; margin: 0; padding: 0 var(--space-2); color: var(--chrome-fg); min-height: 24px; }
+.brand-name { font-size: 22px; letter-spacing: 0.01em; line-height: 1; }
+/* the mark: Mason's own arch of bricks, its keystone in the middle (index.html, an inline SVG in currentColor), on a brick tile */
+.brand .logo { display: inline-flex; width: 24px; height: 24px; border-radius: 0; background: var(--cta); color: var(--cta-fg); border: 1px solid var(--cta-line);
+  box-shadow: 1px 1px 0 var(--stone-1); flex: none; }
+.brand .logo svg { width: 100%; height: 100%; display: block; }
+/* the project: its database and the demo badge, in a quiet box the height of its line before the first read (no shift) */
+.project { display: flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: var(--space-1) var(--space-2); min-width: 0;
+  border: 1px solid var(--chrome-line); border-radius: var(--radius); background: none; }
+.where { margin: 0; font-size: var(--text-sm); font-weight: 500; color: var(--chrome-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
+.where:empty::before { content: "…"; color: var(--chrome-muted); }
+.side-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
+/* the nav: full-width rows, the page shown a pale stone row with the patina at its edge */
+.nav { flex: 1 1 auto; overflow-y: auto; padding: var(--space-4) 0; }
+.nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
+.nav a { position: relative; display: flex; align-items: center; gap: var(--space-2); min-height: 30px; padding: 0 var(--space-4);
+  border-radius: 0; color: var(--fg); font-size: var(--text-sm); font-weight: 400; text-decoration: none; white-space: nowrap; }
+.nav a:hover { color: var(--fg); background: var(--hover); text-decoration: none; }
+.nav a[aria-current="page"] { color: var(--fg); background: var(--current); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
+.nav a:focus-visible { outline-offset: -2px; border-radius: 0; }
+.nav .group { margin-top: var(--space-4); }
+.nav .group-title { margin: 0 0 var(--space-1); padding: 0 var(--space-4); font-size: var(--text-xs); font-weight: 700; color: var(--fg); text-transform: uppercase; letter-spacing: 0.06em; }
+.nav .label { overflow: hidden; text-overflow: ellipsis; }
+/* an icon: Lucide's 24-unit drawing at 16 px, its stroke a little lighter than its 2, in the link's colour */
+.icon { display: inline-flex; flex: none; width: 16px; height: 16px; color: inherit; }
+.icon svg { width: 16px; height: 16px; stroke-width: 1.75; }
+.nav a .icon { color: var(--muted); }
+.nav a:hover .icon { color: var(--fg); }
+.nav a[aria-current="page"] .icon { color: var(--accent); }
+/* the static nav's links have no icon until the script writes it: the same room kept, so nothing moves */
+.nav a:not(:has(.icon))::before { content: ""; width: 16px; height: 16px; flex: none; }
+.side-foot { flex: none; padding: var(--space-3) var(--space-4) var(--space-4); border-top: 1px solid var(--line-strong); font-size: var(--text-xs); color: var(--muted); }
+.side-foot p { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 18px; }
+.updated { font-variant-numeric: tabular-nums; }
+.version { color: var(--subtle); font-family: var(--font-mono); }
+.menu-button { display: none; }
+.scrim { display: none; }
+.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+
+/* a narrow window: an icon rail, each label the tooltip of its icon (still the link's name to a screen reader) */
+@media (min-width: 641px) and (max-width: 999px) {
+  .sidebar { width: var(--rail-w); }
+  .content { margin-left: var(--rail-w); }
+  .side-head { align-items: center; padding: var(--space-4) 0 var(--space-3); }
+  .brand { padding: 0; }
+  .brand-name, .where { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
+  .project { border: 0; background: none; padding: 0; min-height: 20px; justify-content: center; }
+  .project .badge { padding: 0 4px; font-size: 10px; height: 18px; }
+  .nav { padding: var(--space-2) 0 var(--space-3); overflow: visible; }
+  .nav a { justify-content: center; padding: 0; min-height: 36px; }
+  .nav .label { position: absolute; left: calc(100% + var(--space-2)); top: 50%; transform: translateY(-50%); padding: var(--space-1) var(--space-2);
+    background: var(--fg); color: var(--surface); border-radius: 0; box-shadow: var(--drop); font-size: var(--text-xs); font-weight: 500; pointer-events: none; opacity: 0; z-index: 30; }
+  .nav a:hover .label, .nav a:focus-visible .label { opacity: 1; }
+  .nav .group { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line-strong); }
+  .nav .group-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
+  .side-foot { display: none; }
+}
+
+/* a phone: a top bar (the menu button, the mark, the project); the nav and the foot a sheet under it, opened by the button */
+@media (max-width: 640px) {
+  .sidebar { position: sticky; inset: auto; top: 0; width: auto; height: var(--topbar-h); border-right: 0; border-bottom: 1px solid var(--frame); background: var(--chrome-bg); }
+  .content { margin-left: 0; }
+  .side-head { flex-direction: row; align-items: center; gap: var(--space-2); height: 100%; padding: 0 var(--space-4) 0 var(--space-2); border-bottom: 0; }
+  .brand { padding: 0; }
+  .project { flex: 1 1 auto; border: 0; background: none; padding: 0; min-height: 0; }
+  .where { flex: 0 1 auto; }
+  .menu-button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; background: none; box-shadow: none; color: var(--chrome-fg); flex: none; }
+  .menu-button:hover { background: var(--hover); }
+  .menu-button .icon, .menu-button .icon svg { width: 20px; height: 20px; }
+  .menu-button[aria-expanded="true"] .when-closed, .menu-button[aria-expanded="false"] .when-open { display: none; }
+  .side-body { display: none; position: fixed; top: var(--topbar-h); left: 0; bottom: 0; width: min(288px, 85vw); background: var(--side);
+    border-right: 1px solid var(--frame); box-shadow: var(--drop); z-index: 20; overflow-y: auto; }
+  .sidebar[data-open] .side-body { display: flex; }
+  .sidebar[data-open] + .scrim { display: block; position: fixed; inset: var(--topbar-h) 0 0 0; background: var(--scrim); z-index: 15; }
+  .nav a { min-height: 40px; }
+}
+
+/* ---------------------------------------------------------------- the page and its header */
+main { padding-top: var(--space-6); padding-bottom: var(--space-7); }
+section { margin: 0; }
+.page-head h2 { font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; margin: 0 0 var(--space-2); }
+/* under a page's title, a course being laid: three bricks set, two over them (one pseudo-element and its copies, no image) */
+.page-head h2::after { content: ""; display: block; width: 14px; height: 5px; margin: var(--space-3) 0 2px; background: var(--brick);
+  box-shadow: 16px 0 0 var(--brick), 32px 0 0 var(--line-strong), 8px -7px 0 var(--brick), 24px -7px 0 var(--line), var(--glow); }
+.page-head { margin: 0 0 var(--space-5); }
+.page-head .desc { margin: 0; max-width: 78ch; }
+#poll:empty { display: none; }
+#poll { padding-top: var(--space-4); }
+
+/* ---------------------------------------------------------------- the state: a dot and a word */
+.indicator { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
+/* a state's marker: a small stone block, a brick's proportions */
+.indicator .dot { width: 10px; height: 6px; border-radius: 0; background: var(--unknown); flex: none; }
+.indicator.ok .dot { background: var(--ok); } .indicator.warn .dot { background: var(--warn); }
+.indicator.bad .dot { background: var(--bad); } .indicator.unknown .dot { background: var(--unknown); }
+.indicator.warn .dot { animation: pulse 1.6s ease-in-out infinite; }
+@keyframes pulse { 50% { opacity: 0.35; } }
+@media (prefers-reduced-motion: reduce) { .indicator.warn .dot, .skeleton { animation: none; } }
+
+/* the run's word at the top of the Overview: a big dot and the CLI's word */
+.health { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-5); padding: var(--space-4) var(--space-5);
+  background: var(--surface); border: 1px solid var(--frame); border-radius: var(--radius-lg); box-shadow: var(--drop); font-size: var(--text-xl); font-weight: 800; letter-spacing: -0.02em; }
+.health { font-size: 28px; font-weight: 700; letter-spacing: 0; }
+/* its marker: a brick in the run's colour, set in a course of mortar of the same */
+.health .dot { width: 22px; height: 12px; border-radius: 0; background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); flex: none; }
+.health.ok .dot { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
+.health.bad .dot { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
+
+/* ---------------------------------------------------------------- badges and buttons */
+/* a badge: a square tag, mono, its edge in its own colour */
+.badge { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 0; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600;
+  background: var(--sunken); color: var(--muted); border: 1px solid var(--line-strong); white-space: nowrap; }
+.badge.accent { background: var(--cta); color: var(--cta-fg); border-color: var(--cta-line); }
+.badge.ok { background: var(--ok-soft); color: var(--ok); border-color: currentColor; }
+.badge.warn { background: var(--warn-soft); color: var(--warn); border-color: currentColor; }
+.badge.bad { background: var(--bad-soft); color: var(--bad); border-color: currentColor; }
+/* a button: a pale stone key, a hairline lift, pressed in when clicked; the primary one patina */
+button { font: inherit; font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500; height: 32px; padding: 0 var(--space-3); border-radius: var(--radius-sm);
+  border: 1px solid var(--line-strong); background: var(--btn); color: var(--fg); box-shadow: var(--bevel); cursor: pointer; white-space: nowrap; }
+button:hover { background: var(--btn-hover); }
+button:active:not(:disabled) { transform: translate(1px, 1px); box-shadow: var(--bevel-pressed); }
+button.primary { background: var(--cta); color: var(--cta-fg); border-color: var(--cta-line); }
+button.primary:hover { background: var(--cta-hover); }
+button.danger { color: var(--bad); }
+button.danger:hover { background: var(--bad-soft); border-color: var(--bad); }
+button:disabled { opacity: 0.5; cursor: not-allowed; }
+button.small { height: 28px; padding: 0 var(--space-2); font-size: var(--text-xs); }
+button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+button.primary:disabled, button:disabled:hover { opacity: 0.5; background: var(--btn); }
+button.primary:disabled { background: var(--cta); }
+/* the confirm of a destructive action (Remove orders, Cancel statement 3), in its popover: filled red, the one button that does it */
+.pop-actions button.danger { background: var(--bad); color: var(--surface); border-color: var(--bad); }
+.pop-actions button.danger:hover { opacity: 0.88; background: var(--bad); }
+
+/* ---------------------------------------------------------------- form controls */
+form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-3) 0; }
+label { font-size: var(--text-sm); color: var(--muted); }
+input, select { font: inherit; font-family: var(--font-mono); font-size: var(--text-sm); height: 32px; padding: 0 var(--space-3); border-radius: 0;
+  border: 1px solid var(--line-strong); background: var(--surface); color: var(--fg); min-width: 14em; }
+select { min-width: 0; }
+input:hover, select:hover { border-color: var(--subtle); }
+input:focus-visible, select:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
+input::placeholder { color: var(--subtle); }
+input[type="checkbox"] { min-width: 0; height: auto; accent-color: var(--accent); }
+form#request-filters input { min-width: 8em; }
+form.pick { display: block; margin: var(--space-1) 0 var(--space-2); }
+form.pick fieldset { border: 1px solid var(--frame); border-radius: var(--radius); margin: 0 0 var(--space-2); padding: var(--space-2) var(--space-3); }
+form.pick legend { color: var(--fg); font-size: var(--text-sm); font-weight: 700; padding: 0 var(--space-1); }
+label.tick { display: inline-flex; align-items: baseline; gap: var(--space-1); margin: 2px 14px 2px 0; color: var(--fg); }
+/* a tick's box is its own size: never the phone's input { flex: 1 1 10em }, which squeezed its column's name to a letter a line */
+label.tick input { flex: none; }
+label.tick code { overflow-wrap: normal; }
+
+/* ---------------------------------------------------------------- KPI cards */
+.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-4); margin: 0 0 var(--space-6); }
+/* by count, so no card is left alone on a row: one row on a wide screen; on a narrower one six as two rows of three,
+   five as three over two (a six-column grid, the last two spanning half each), four as two by two */
+@media (min-width: 1100px) { .cards.n4 { grid-template-columns: repeat(4, 1fr); } .cards.n5 { grid-template-columns: repeat(5, 1fr); } .cards.n6 { grid-template-columns: repeat(3, 1fr); } }
+/* six in one row only where each card is still wide enough for its sub-line (the sidebar takes 232 px of the width) */
+@media (min-width: 1440px) { .cards.n6 { grid-template-columns: repeat(6, 1fr); } }
+@media (min-width: 641px) and (max-width: 1099px) {
+  .cards.n4 { grid-template-columns: repeat(4, 1fr); }
+  .cards.n6 { grid-template-columns: repeat(3, 1fr); }
+  .cards.n5 { grid-template-columns: repeat(6, 1fr); } .cards.n5 > * { grid-column: span 2; } .cards.n5 > :nth-child(n+4) { grid-column: span 3; }
+}
+.card { background: var(--surface); border: 1px solid var(--frame); border-radius: var(--radius-lg); box-shadow: var(--drop); padding: var(--space-4); min-width: 0;
+  display: flex; flex-direction: column; gap: var(--space-1); }
+.card-label { margin: 0; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
+.card-value { margin: 0; font-size: var(--text-xl); line-height: 1.2; font-variant-numeric: lining-nums tabular-nums; overflow-wrap: anywhere; }
+.card-sub { margin: 0; font-size: var(--text-xs); color: var(--muted); overflow-wrap: anywhere; }
+.card.warn .card-value { color: var(--warn); } .card.bad .card-value { color: var(--bad); }
+.card .chart { margin-top: auto; padding-top: var(--space-2); }
+
+/* a chart: a progressive addition over numbers said as text; hidden (taking no room) until charts.js draws it */
+.chart:not(.drawn) { display: none; }
+.chart.spark { height: 48px; }
+.chart.series { margin: var(--space-2) 0 var(--space-4); }
+.chart .uplot { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--chart-text); }
+.chart .u-legend { font-size: var(--text-xs); color: var(--muted); text-align: left; margin: var(--space-1) 0 0; }
+.chart table.u-legend { width: auto; border: 0; border-radius: 0; background: none; font-size: var(--text-xs); }
+.chart .u-legend th { font-weight: 500; }
+.chart .u-legend tr:hover > *, .chart .u-legend td, .chart .u-legend th { background: none; border: 0; padding: 0 var(--space-2) 0 0; }
+
+/* ---------------------------------------------------------------- tables: dense, hairline, mono numbers */
+/* a box of rows: a hairline frame, its quiet lift, a tinted header row, every other row a shade */
+.panel, .scroll { background: var(--surface); border: 1px solid var(--frame); border-radius: var(--radius-lg); box-shadow: var(--drop); margin: 0 0 var(--space-5); overflow-x: auto; }
+table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); background: var(--surface);
+  border: 1px solid var(--frame); border-radius: var(--radius-lg); box-shadow: var(--drop); margin: 0 0 var(--space-5); }
+.panel table, .scroll table { border: 0; margin: 0; border-radius: 0; box-shadow: none; }
+caption { text-align: left; font-size: var(--text-md); font-weight: 700; padding: var(--space-5) 0 var(--space-2); color: var(--fg); }
+caption code { font-weight: 400; color: var(--muted); }
+th, td { text-align: left; vertical-align: top; padding: var(--space-2) var(--space-3); border-top: 1px solid var(--line); font-weight: 400; }
+tbody tr:first-child > * { border-top: 0; }
+/* a header row is a carved lintel: pale stone, its names cut in small capitals, a mortar course under it */
+thead th { position: sticky; top: 0; background: var(--thead-bg); color: var(--thead-fg); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; border-top: 0;
+  border-bottom: 1px solid var(--line-strong); white-space: nowrap; padding-top: var(--space-2); padding-bottom: var(--space-2); }
+thead th + th { border-left: 1px solid var(--line); }
+tbody tr:nth-child(even) > * { background: var(--zebra); }
+thead tr:first-child th:first-child { border-top-left-radius: var(--radius-lg); }
+thead tr:first-child th:last-child { border-top-right-radius: var(--radius-lg); }
+tbody tr:hover > * { background: var(--hover); }
+tbody th[scope="row"] { color: var(--fg); font-weight: 500; white-space: nowrap; }
+td.num, th.num, table.queries td, table.samples td.num, table.sizes td.num, table.catalog td.num { text-align: right; white-space: nowrap;
+  font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
 tbody th code { white-space: nowrap; overflow-wrap: normal; }
-progress { width: 120px; height: 8px; vertical-align: middle; accent-color: var(--bar); }
-.pct { display: inline-block; min-width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; }
-.t-done progress { accent-color: var(--ok); }
-.t-failed progress, .t-failed .what { accent-color: var(--bad); color: var(--bad); }
-.t-unsynced progress, .t-unsynced .what { accent-color: var(--warn); color: var(--warn); }
-.count { margin: 10px 0 0; }
-.readiness { font-weight: 600; margin: 14px 0 4px; }
-.readiness.ok { color: var(--ok); }
-.readiness.bad { color: var(--bad); }
-.bullets { margin: 0; padding-left: 20px; }
-.warn { color: var(--warn); font-size: 13px; }
+table.queries thead th:not(:first-child) { text-align: right; }
 td.act { text-align: right; white-space: nowrap; }
 .confirm { white-space: normal; }
-button { font: inherit; font-size: 14px; padding: 4px 12px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); cursor: pointer; }
-button:hover { border-color: var(--dim); }
-button.danger { border-color: var(--bad); color: var(--bad); }
-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; }
-input { font: inherit; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); min-width: 14em; }
-.failure { border-left: 3px solid var(--bad); padding: 8px 12px; margin: 12px 0; background: var(--panel); }
-.failure .message { margin: 0; font-weight: 600; }
+tr.under > td { border-top: 0; padding-top: 0; }
+.paging { margin: var(--space-3) 0 0; display: flex; gap: var(--space-2); }
+
+/* the facts: a label column and a value column */
+table.facts-table th[scope="row"] { width: 1%; padding-right: var(--space-5); }
+table.facts-table td { overflow-wrap: anywhere; }
+/* the recent errors: a client's name, a user's or a statement unbroken by spaces wraps inside its cell, never past the page */
+table.errors td { overflow-wrap: anywhere; }
+.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); margin: 0; font-size: var(--text-sm); }
+.facts dt { color: var(--muted); }
+.facts dd { margin: 0; overflow-wrap: anywhere; font-family: var(--font-mono); }
+tr.warn th, tr.warn td { color: var(--warn); }
+
+/* A COPY'S BAR (copyBar, src/web/pages/status.js): a thin rounded track and a solid fill to the share, its % at the end.
+   The fill's colour follows the copy's state as the line's word does: the patina while it copies, green once served,
+   rose when it failed, amber when not kept current; waiting, no fill, the track's quiet shimmer (not under
+   prefers-reduced-motion). The share drawn never goes backwards (createMonotone). */
+td.bar { white-space: nowrap; width: 1%; }
+.copybar { display: inline-flex; align-items: center; vertical-align: middle; width: 120px; }
+.copybar .track { display: block; position: relative; width: 100%; height: 6px; border-radius: 3px; background: var(--bar-track); overflow: hidden; }
+.copybar .fill { display: block; height: 100%; border-radius: 3px; background: var(--brick); }
+.t-done .copybar .fill { background: var(--bar-ok); }
+.t-failed .copybar .fill { background: var(--bar-bad); }
+.t-unsynced .copybar .fill { background: var(--bar-warn); }
+.copybar.indeterminate .track { animation: bar-wait 1.6s ease-in-out infinite; }
+@keyframes bar-wait { 50% { opacity: 0.45; } }
+@media (prefers-reduced-motion: reduce) { .copybar.indeterminate .track { animation: none; } }
+.pct { display: inline-block; min-width: 3.2em; text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--muted); }
+.t-failed .what, .s-failed .what { color: var(--bad); }
+.t-unsynced .what { color: var(--warn); }
+.readiness { font-weight: 700; margin: var(--space-4) 0 var(--space-1); }
+
+/* ---------------------------------------------------------------- details: an expandable row */
+details > summary { cursor: pointer; color: var(--muted); font-size: var(--text-sm); list-style: none; display: inline-flex; align-items: center; gap: 6px; user-select: none; }
+details > summary::-webkit-details-marker { display: none; }
+details > summary::before { content: "+" / ""; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px;
+  border: 1px solid currentColor; font-size: 11px; line-height: 1; font-weight: 700; margin-right: 2px; }
+details[open] > summary::before { content: "−" / ""; }
+details > summary:hover { color: var(--fg); }
+details[open] { margin-bottom: var(--space-2); }
+details pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--text-xs); margin: var(--space-1) 0; }
+details.memory, details#syncs-raw { margin: var(--space-4) 0; }
+
+/* ---------------------------------------------------------------- what the commands say: a Failure, an outcome */
+.failure { border: 1px solid var(--frame); border-left: 4px solid var(--bad); border-radius: var(--radius); box-shadow: var(--drop); padding: var(--space-3) var(--space-4);
+  margin: var(--space-3) 0 var(--space-4); background: var(--surface); }
+.failure .message { margin: 0; font-weight: 700; }
 .failure .mark { color: var(--bad); }
-.failure dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 6px 0 0; }
-.failure dt { color: var(--dim); }
+.failure dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px var(--space-3); margin: var(--space-2) 0 0; font-size: var(--text-sm); }
+.failure dt { color: var(--muted); }
 .failure dd { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
-.next-head { margin: 8px 0 2px; font-weight: 600; }
-.next { list-style: none; margin: 0; padding: 0; }
-.next li span { color: var(--dim); margin-left: 8px; }
-.added { border: 1px solid var(--ok); border-radius: 8px; padding: 10px 14px; margin: 12px 0; }
-.added .headline { font-weight: 600; margin: 0 0 8px; }
-.added .tip { color: var(--dim); }
-#poll .failure { border: 1px solid var(--bad); border-left-width: 3px; border-radius: 4px; margin-top: 16px; }
-table.catalog td.num { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
-.c-added .state { color: var(--ok); }
-.c-cannot .state { color: var(--warn); font-size: 13px; }
-tr.under > td { border-top: 0; padding-top: 0; }
-form.pick { display: block; margin: 4px 0 8px; }
-form.pick fieldset { border: 1px solid var(--line); border-radius: 6px; margin: 0 0 8px; padding: 6px 10px; }
-form.pick legend { color: var(--dim); font-size: 13px; padding: 0 4px; }
-label.tick { display: inline-flex; align-items: baseline; gap: 4px; margin: 2px 14px 2px 0; }
-.done { border: 1px solid var(--ok); border-radius: 8px; padding: 8px 12px; margin: 4px 0 8px; }
-.done .headline { font-weight: 600; margin: 0 0 4px; overflow-wrap: anywhere; }
-.done .note, .done .tip { color: var(--dim); margin: 2px 0 6px; }
+.next-head { margin: var(--space-2) 0 2px; font-weight: 700; font-size: var(--text-sm); }
+.next { list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); }
+.next li span { color: var(--muted); margin-left: var(--space-2); }
+.added, .done { border: 1px solid var(--frame); border-left: 4px solid var(--ok); border-radius: var(--radius); box-shadow: var(--drop); padding: var(--space-3) var(--space-4); margin: var(--space-3) 0 var(--space-4); background: var(--surface); }
+.added .headline, .done .headline { font-weight: 700; margin: 0 0 var(--space-2); overflow-wrap: anywhere; }
+.added .tip, .done .note, .done .tip { color: var(--muted); margin: 2px 0 6px; }
+
+/* ---------------------------------------------------------------- empty and loading */
+.empty { text-align: center; padding: var(--space-7) var(--space-4); color: var(--muted); background: var(--surface);
+  border: 1px dashed var(--frame); border-radius: var(--radius-lg); margin: 0 0 var(--space-5); }
+/* over an empty state, a footing with nothing built on it yet: three stones laid, the courses above them only marked */
+.empty::before { content: ""; display: block; width: 18px; height: 7px; margin: 0 auto var(--space-4); transform: translateX(-20px); background: var(--line-strong);
+  box-shadow: 20px 0 0 var(--line-strong), 40px 0 0 var(--line-strong), 10px -9px 0 var(--line), 30px -9px 0 var(--line), 20px -18px 0 var(--line); margin-top: 18px; }
+.empty .empty-title { margin: 0 0 var(--space-1); color: var(--fg); font-size: 20px; }
+.empty p { margin: 0; }
+.skeleton { display: block; height: 14px; border-radius: 0; background: var(--sunken); animation: shimmer 1.4s ease-in-out infinite; }
+.skeleton + .skeleton { margin-top: var(--space-2); }
+.skeleton.half { width: 50%; } .skeleton.block { height: 96px; border-radius: var(--radius-lg); }
+@keyframes shimmer { 50% { opacity: 0.5; } }
+
+/* ---------------------------------------------------------------- a phone */
+@media (max-width: 640px) {
+  :root { --gutter: 16px; }
+  main { padding-top: var(--space-5); }
+  .cards { grid-template-columns: 1fr 1fr; gap: var(--space-2); }
+  .card { padding: var(--space-3); }
+  .card-value { font-size: var(--text-lg); }
+  .health { font-size: var(--text-lg); padding: var(--space-3) var(--space-4); }
+  /* a table scrolls inside its card, never the page (its caption then heads the card) */
+  table { display: block; overflow-x: auto; }
+  caption { display: block; padding: var(--space-3) var(--space-3) var(--space-1); }
+  input { min-width: 0; flex: 1 1 10em; }
+}
+
+/* ---------------------------------------------------------------- the Tables and Users pages */
+.toolbar input[type="search"] { width: 18em; }
+#page-tables th.num, #page-users th.num { text-align: right; }
+#page-tables td.mono { white-space: nowrap; color: var(--muted); }
+.err { color: var(--bad); overflow-wrap: anywhere; }
+#page-tables .done button { margin-top: var(--space-1); }
+/* THE TABLES LIST FITS ITS CARD AND NOTHING A CLICK DOES MOVES IT (src/web/pages/tables.js renderTables): seven short
+   cells a row at FIXED widths (`table-layout: fixed`: a column is as wide as its header says, whatever a row's cells
+   hold now), the name the column that gives (cut with an ellipsis, its whole the title); every row two lines (its state
+   over its bar, a line kept when it has none) and its note under it, across every column, written for every row (empty
+   when it says nothing). A question, a form and an answer are popovers beside the row's actions (`.pop`), never a row.
+   The row's actions never wrap and never leave the card: they stay pinned at its right where the table scrolls. */
+table.catalog { table-layout: fixed; width: 100%; min-width: 840px; }
+table.catalog th.state { width: 146px; }
+table.catalog th.rows { width: 116px; }
+table.catalog th.key { width: 104px; }
+table.catalog th.last { width: 104px; }
+table.catalog th.size { width: 100px; }
+table.catalog th.act { width: 268px; }
+table.catalog th, table.catalog td { overflow: hidden; text-overflow: ellipsis; }
+table.catalog code.name { display: block; max-width: 100%; }
+table.catalog td.state { white-space: nowrap; }
+table.catalog td.state .copyline { display: flex; flex-wrap: nowrap; align-items: center; height: 18px; margin-top: var(--space-1); }
+table.catalog td.state .pct { min-width: 0; }
+table.catalog td.state .copybar { width: 64px; }
+table.catalog td.num .took { display: block; color: var(--muted); font-size: var(--text-xs); }
+table.catalog tbody tr:not(.under) > * { padding-bottom: var(--space-1); }
+table.catalog tr.under > td { padding-top: 0; }
+table.catalog tr.note .under-body { font-size: var(--text-sm); line-height: 20px; display: flex; flex-wrap: wrap; gap: 2px var(--space-3); min-height: 20px; }
+.under-body { min-width: 0; overflow-wrap: anywhere; }
+/* A POPOVER (`pop`, src/web/shared.js): fixed beside the button that asked, over the rows, never between them; placed by
+   placePops after each write. A question or a form scrolls in itself when long; an answer goes by itself. */
+.pop { position: fixed; top: 0; left: 0; z-index: 40; width: max-content; max-width: min(30rem, calc(100vw - 32px)); padding: var(--space-3) var(--space-4);
+  background: var(--surface); border: 1px solid var(--frame); border-radius: var(--radius-lg); box-shadow: var(--drop-hover); font-size: var(--text-sm); overflow-wrap: anywhere; }
+.pop[hidden] { display: none; }
+.pop.ask { max-height: min(70vh, 34rem); overflow-y: auto; border-top: 3px solid var(--accent); }
+.pop.ask:has(.confirm) { border-top-color: var(--bad); }
+.pop.said { border-left: 4px solid var(--ok); }
+.pop.said:has(.failure) { border-left-color: var(--bad); }
+.pop > :first-child { margin-top: 0; }
+.pop > :last-child { margin-bottom: 0; }
+.pop .confirm { margin: 0 0 var(--space-2); color: var(--fg); }
+.pop .pop-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }
+.pop .done { border: 0; box-shadow: none; padding: 0; margin: 0; background: none; }
+/* a confirm's button names what it removes: a long name is cut with an ellipsis, never past the popover (its name is still its whole text) */
+.pop button { max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
+/* A BUTTON WHOSE LABEL CHANGES KEEPS ITS WIDTH (`room`, src/web/shared.js ROOMS): its longest label laid under it, unseen
+   and of no height, so Sync, Syncing… and Synced ✓ (Copy, Copied) are one width */
+button[data-room]::after { content: attr(data-room); display: block; height: 0; overflow: hidden; visibility: hidden; }
+td.act, th.act { white-space: nowrap; text-align: right; }
+td.act > * { vertical-align: middle; }
+table.catalog td.act, table.catalog th.act { position: sticky; right: 0; }
+@media (max-width: 640px) { table.catalog td.act, .panel td.act, .scroll td.act { box-shadow: -1px 0 0 var(--line); } }
+table.catalog td.act { background: var(--surface); }
+table.catalog tbody tr:hover > td.act { background: var(--hover); }
+.what-copy.t-unsynced { color: var(--warn); }
+.what-copy.t-copying, .what-copy.t-waiting { color: var(--muted); }
+/* a narrower window (the sidebar beside the page): every table's cells closer, so more fit their card */
+@media (max-width: 1100px) { th, td { padding-left: var(--space-2); padding-right: var(--space-2); } }
+/* a bare table too wide for the page (the Overview's statements: eleven numbers) scrolls inside its own box */
+.table-wrap { max-width: 100%; overflow-x: auto; margin: 0 0 var(--space-4); }
+.table-wrap > table { margin: 0; }
+/* a phone, where a table scrolls inside its card: a row's actions stay pinned at its right, in view */
+@media (max-width: 640px) {
+  .panel td.act, .scroll td.act { position: sticky; right: 0; background: var(--surface); }
+  .panel tbody tr:hover > td.act, .scroll tbody tr:hover > td.act { background: var(--hover); }
+}
+/* a phone: the table scrolls inside its card, so a line under a row stays in the card's view, never as wide as the table */
+@media (max-width: 640px) {
+  /* the table scrolls inside its card (.panel) at its least width (table.catalog's min-width), still a table — a block
+     would lose its fixed columns — the name still the column that gives */
+  table.catalog { display: table; min-width: 940px; }
+}
+@media (max-width: 640px) { tr.under .under-body { position: sticky; left: var(--space-3); max-width: calc(100vw - 2 * var(--gutter) - 2 * var(--space-3)); } }
+@media (max-width: 640px) { table.catalog tr.under > td { overflow: visible; } }
+tr.removed > * { color: var(--muted); }
+form.formcard { margin: 0 0 var(--space-5); padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--frame); border-radius: var(--radius-lg); box-shadow: var(--drop); }
+form.formcard input { width: 18em; }
+/* ---------------------------------------------------------------- Connect: the URL, its psql line, Create a user */
+/* a box whose title sits on its top edge, as a fieldset's legend does (Connect, Getting started, a chart's name) */
+.connect { background: var(--surface); border: 1px solid var(--frame); border-radius: var(--radius-lg); box-shadow: var(--drop); padding: var(--space-4) var(--space-5); margin: var(--space-6) 0 var(--space-6); }
+.connect.first { border-width: 2px; }
+.connect .connect-title, .checklist .checklist-title { width: fit-content; max-width: 100%; margin: calc(-1 * var(--space-4) - 0.8em) 0 var(--space-2) calc(-1 * var(--space-2));
+  padding: 0 var(--space-2); background: var(--surface); font-weight: 700; line-height: 1.6; }
+.connect.first .connect-title { font-size: var(--text-lg); }
+.connect .facts { margin: 0 0 var(--space-3); gap: var(--space-2) var(--space-4); align-items: center; }
+.connect .copyrow { flex-wrap: wrap; }
+.connect .copyrow code { overflow-wrap: anywhere; }
+.connect .facts dd .dim { font-family: var(--font-sans); font-size: var(--text-sm); }
+.connect .tip { margin: var(--space-3) 0 0; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
+.empty + .connect { margin-top: var(--space-3); }
+/* the first-run checklist (renderChecklist): a step a row, ✓ in green or ○ muted, a step to do with its one action */
+.checklist { background: var(--surface); border: 2px solid var(--frame); border-radius: var(--radius-lg); box-shadow: var(--drop); padding: var(--space-4) var(--space-5); margin: var(--space-6) 0 var(--space-6); }
+.checklist .checklist-title { margin-bottom: var(--space-3); font-size: var(--text-lg); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); }
+.checklist .checklist-title .dim { font-weight: 400; font-size: var(--text-sm); font-family: var(--font-mono); }
+/* the steps as courses of a wall, built from the bottom: a step done is a brick laid, a step to do its place marked */
+.checklist { position: relative; }
+.checklist ol { padding-right: 64px; }
+.checklist .courses { position: absolute; right: var(--space-5); top: var(--space-4); display: flex; flex-direction: column-reverse; gap: 3px; }
+.checklist .courses i { display: block; width: 26px; height: 9px; border: 1px dashed var(--line-strong); }
+.checklist .courses i:nth-child(even) { margin-left: 13px; }
+.checklist .courses i.on { background: var(--brick); border-color: var(--brick); box-shadow: var(--glow); }
+.checklist ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
+.checklist li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); min-height: 32px; }
+/* a step's mark: a small stone, filled in green once done, its outline while to do */
+.checklist .mark { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 14px; font-size: 10px; font-weight: 700; line-height: 1;
+  border: 1px solid currentColor; }
+.checklist li.step-done .mark { background: var(--ok); border-color: var(--ok); color: var(--surface); }
+.checklist li.step-done .what { color: var(--muted); }
+.checklist li.step-todo .mark { color: var(--subtle); border-style: dashed; }
+.checklist li.step-todo .what { font-weight: 600; }
+/* a link that looks like a button (it goes to another page: a link, for the browser and a screen reader alike) */
+a.btn { display: inline-flex; align-items: center; height: 28px; padding: 0 var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 500;
+  border: 1px solid var(--line-strong); background: var(--btn); color: var(--fg); box-shadow: var(--bevel); white-space: nowrap; text-decoration: none; }
+a.btn:hover { background: var(--btn-hover); text-decoration: none; }
+a.btn:active { transform: translate(1px, 1px); box-shadow: var(--bevel-pressed); }
+a.btn.primary { background: var(--cta); color: var(--cta-fg); border-color: var(--cta-line); }
+a.btn.primary:hover { background: var(--cta-hover); }
+a.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.copyrow { display: inline-flex; align-items: center; gap: var(--space-2); max-width: 100%; }
+.copyrow code { padding: 2px var(--space-2); background: var(--sunken); border: 1px solid var(--line-strong); border-radius: 0; }
+/* a URL in a table's cell: one line, cut with an ellipsis, its whole the title (Copy copies the whole) */
+.copyrow button { flex: none; }
+.copyrow button[data-copied] { color: var(--ok); border-color: var(--ok); }
+/* the Users table fits its card at a laptop's width: a user's id under its name, the URL cut shorter */
+table.users th[scope="row"] .dim { display: block; font-size: var(--text-xs); font-weight: 400; }
+/* a long user name (40 characters) is cut with its whole the title; a user that no longer connects says why on lines of its own */
+table.users code.name { max-width: 24ch; }
+table.users td .warn { display: block; white-space: normal; min-width: 14em; }
+@media (max-width: 1100px) { table.users code.name { max-width: 18ch; } }
+table.users td { white-space: nowrap; }
+/* FIXED COLUMNS, as the tables' catalog's: Disable → "Disabled <when>" widens no column and moves no button */
+table.users { table-layout: fixed; width: 100%; min-width: 960px; }
+table.users th.status { width: 224px; }
+table.users th.added { width: 188px; }
+table.users th.last { width: 150px; }
+table.users th.act { width: 240px; }
+table.users td { overflow: hidden; text-overflow: ellipsis; }
+#page-users td.mono { white-space: nowrap; }
+#page-users .added { border-left-color: var(--warn); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); margin: 0 0 var(--space-4); }
+#page-users .added .headline { font-size: var(--text-lg); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
+#page-users .added .facts { margin: 0 0 var(--space-3); gap: var(--space-2) var(--space-4); align-items: center; }
+#page-users .added .tip { margin: 0 0 var(--space-3); }
+/* a phone: a fact's label over its value, so a URL or a password has the card's whole width */
+@media (max-width: 640px) { .added .facts, .connect .facts { grid-template-columns: 1fr; gap: 0 var(--space-4); } .added .facts dd, .connect .facts dd { margin-bottom: var(--space-2); } }
+
+/* ---------------------------------------------------------------- Queries, Usage and Logs (scoped to those pages) */
+/* a filter toolbar: each field a small label over its control, the actions at the end */
+.toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); margin: 0 0 var(--space-5); padding: var(--space-3) var(--space-4);
+  background: var(--sunken); border: 1px solid var(--frame); border-radius: var(--radius-lg); }
+.toolbar label { font-size: var(--text-xs); font-weight: 600; color: var(--fg); }
+.toolbar .field { display: flex; flex-direction: column; gap: var(--space-1); }
+.toolbar .actions { display: flex; gap: var(--space-2); margin-left: auto; }
+.toolbar label.check { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 32px; color: var(--fg); font-size: var(--text-sm); }
+.toolbar input[type="checkbox"] { margin: 0; }
+#page-queries .table-title { margin: var(--space-3) 0 var(--space-2); font-size: var(--text-sm); font-weight: 600; color: var(--muted); }
+#page-queries .paging { justify-content: flex-end; margin: 0 0 var(--space-4); }
+#page-queries table.requests td.id { white-space: nowrap; }
+#page-queries table.requests td.id summary { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg); }
+#page-queries table.requests td.id details { margin: 0; }
+#page-queries table.requests td.when { white-space: nowrap; color: var(--muted); }
+#page-queries .err { margin-top: 2px; font-size: var(--text-xs); color: var(--bad); overflow-wrap: anywhere; }
+#page-queries tr.detail > td { background: var(--sunken); }
+/* an expanded row pushes the rows under it down (the reader asked) but never widens a column: its body takes the row's
+   width and adds none of its own (width 0, at least the row's), a long statement scrolling in its box */
+#page-queries tr.detail .detail-body { width: 0; min-width: 100%; overflow-wrap: anywhere; }
+#page-queries tr.detail:hover > td { background: var(--sunken); }
+#page-queries tr.detail pre.stmt { font-family: var(--font-mono); color: var(--fg); }
+#page-queries tr.detail pre.error { color: var(--bad); }
+#page-queries table.sessions td:first-child { font-weight: 600; }
+
+/* Usage: four small charts in a grid, each under its title; a card with no drawn chart takes no room */
+.chart-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); gap: var(--space-6) var(--space-4); margin: var(--space-6) 0 var(--space-6); }
+.chart-card { background: var(--surface); border: 1px solid var(--frame); border-radius: var(--radius-lg); box-shadow: var(--drop); padding: var(--space-4); min-width: 0; }
+/* a chart's title INSIDE its card, over its chart (never on the card's edge: a title set into the frame floated out of
+   it), and the chart as wide as the card's content (charts.js sizes uPlot from its holder's clientWidth, again whenever
+   the holder's width changes): nothing of a chart card leaves it, at any width */
+.chart-card > .card-label:first-child { max-width: 100%; margin: 0 0 var(--space-2); color: var(--fg); font-size: var(--text-sm); font-weight: 700; line-height: 1.6; }
+.chart-card .chart { min-width: 0; max-width: 100%; }
+.chart-card:not(:has(.chart.drawn)) { display: none; }
+.chart-card .chart.series { margin: var(--space-2) 0 0; }
+details.hours { margin: var(--space-3) 0; }
+details.hours > summary { margin-bottom: var(--space-2); }
+@media (max-width: 640px) { .chart-grid { grid-template-columns: 1fr; } }
+
+/* Logs: the run's raw log as a terminal's lines, in mono, the newest at the bottom */
+#page-logs table.events th[scope="row"] time { font-weight: 400; }
+#page-logs table.events code { color: var(--fg); }
+.terminal { background: var(--code-bg); color: var(--code-fg); border: 1px solid var(--frame); border-radius: var(--radius-lg); box-shadow: var(--drop); padding: var(--space-3) var(--space-4);
+  max-height: 480px; overflow: auto; font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.6; }
+.terminal .log-line { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-3); }
+.terminal time { color: var(--code-muted); white-space: nowrap; }
+.terminal pre { margin: 0; color: var(--code-fg); font-size: inherit; overflow-wrap: anywhere; }
+#page-queries table.running td:nth-child(5) { white-space: nowrap; }
+
+/* A chart's live legend reads the hovered hour: hidden at rest, where it would only say "-" (its space kept, so nothing moves). */
+.uplot:not(:hover) .u-legend { visibility: hidden; }
+
+/* ---------------------------------------------------------------- an Observability view's head: its title left, the time range right, one row */
+.head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-2); }
+.head-row h2 { margin: 0; }
+.head-range:empty { display: none; }
+.head-range { min-width: 0; max-width: 100%; display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; justify-content: flex-end; }
+/* beside the range: Now's "Live" (a dot that breathes), or when a past range was read and its Refresh */
+.head-range .live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; color: var(--ok); }
+.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 var(--ok); animation: live 2s ease-out infinite; }
+@keyframes live { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 50%, transparent); } 100% { box-shadow: 0 0 0 6px transparent; } }
+@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
+.head-range .as-of { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); white-space: nowrap; }
+/* the time range: square segments in one hairline frame, the one chosen a pale stone with a patina underline */
+.range { display: inline-flex; padding: 0; margin: 0; background: var(--surface); border: 1px solid var(--frame); border-radius: var(--radius); box-shadow: var(--bevel); }
+.range a { display: inline-flex; align-items: center; min-height: 30px; padding: 0 var(--space-3); border-radius: 0; color: var(--fg);
+  font-size: var(--text-xs); font-weight: 500; white-space: nowrap; text-decoration: none; }
+.range > * + * { border-left: 1px solid var(--frame); }
+.range a:hover { background: var(--hover); text-decoration: none; }
+.range a[aria-current="true"] { background: var(--current); color: var(--fg); font-weight: 700; box-shadow: inset 0 -2px 0 var(--accent); }
+/* a range past what the run keeps: shown, never a link, its title why and the setting that keeps it */
+.range .off { display: inline-flex; align-items: center; min-height: 30px; padding: 0 var(--space-3); color: var(--subtle); font-size: var(--text-xs); font-weight: 500;
+  white-space: nowrap; cursor: not-allowed; opacity: 0.6; }
+/* five ranges on a phone: the control scrolls inside itself, never the page */
+.range { max-width: 100%; overflow-x: auto; }
+
+/* ---------------------------------------------------------------- a card that links into the view that lists it */
+a.card { color: inherit; text-decoration: none; transition: transform 0.08s, box-shadow 0.08s; }
+a.card:hover { transform: translate(-2px, -2px); box-shadow: var(--drop-hover); text-decoration: none; background: var(--surface); }
+@media (prefers-reduced-motion: reduce) { a.card { transition: none; } }
+a.card .card-label { display: flex; justify-content: space-between; gap: var(--space-2); }
+a.card .card-label::after { content: "→" / ""; color: var(--subtle); transition: transform 0.12s, color 0.12s; }
+a.card:hover .card-label::after { color: var(--accent); transform: translateX(2px); }
+caption a.see { font-weight: 400; font-size: var(--text-sm); margin-left: var(--space-2); }
+
+/* ---------------------------------------------------------------- sortable headers, long values, large lists */
+th[aria-sort] { padding-top: 3px; padding-bottom: 3px; }
+button.sort { all: unset; box-shadow: none; display: inline-flex; align-items: center; gap: 4px; min-height: 28px; cursor: pointer; color: inherit; font: inherit; white-space: nowrap; }
+button.sort:hover, button.sort.on { color: var(--fg); }
+thead button.sort:hover, thead button.sort.on { color: var(--thead-fg); text-decoration: underline; text-underline-offset: 3px; }
+thead button.sort .arrow { color: var(--thead-muted); }
+thead button.sort.on .arrow { color: var(--thead-fg); }
+button.sort:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 0; }
+button.sort .arrow { font-size: 10px; color: var(--subtle); }
+button.sort.on .arrow { color: var(--fg); }
+th.num button.sort { flex-direction: row-reverse; }
+code.name { display: inline-block; max-width: 36ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
+.clip { display: inline-block; max-width: 28em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
+/* a statement in its cell: one or two lines, never the whole of it (its expanded row has it, capped) */
+code.stmt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
+  line-clamp: 2; white-space: normal; overflow: hidden; text-overflow: ellipsis; overflow-wrap: anywhere; max-width: 40em; vertical-align: bottom; }
+#page-queries table.running code.stmt { max-width: 24em; }
+#page-queries table.sessions .clip { max-width: 14em; }
+#page-queries table.running .clip { max-width: 9em; }
+.more { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); margin: calc(-1 * var(--space-2)) 0 var(--space-4); }
+.more p { margin: 0 auto 0 0; }
+.sort-note, .cut { margin: var(--space-2) 0; font-size: var(--text-sm); }
+table.sessions tr.others td { color: var(--muted); font-style: italic; }
+.toolbar .fields { display: contents; }
+.toolbar .field.grow input { min-width: 14em; }
+.toolbar select { min-width: 10em; max-width: 22em; }
+.chart-card .card-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.chart-card.note { display: block; }
+.chart-card.note p.dim { margin: var(--space-4) 0; }
+@media (max-width: 640px) {
+  /* an odd card last spans the row: no orphan beside an empty cell */
+  .cards > :last-child:nth-child(odd) { grid-column: 1 / -1; }
+  .toolbar .field, .toolbar .field.grow { flex: 1 1 100%; }
+  /* a field's control is its width, never its height (the phone's input { flex } is a row's, and a field is a column) */
+  .toolbar .field input, .toolbar .field select { flex: none; width: 100%; min-width: 0; max-width: none; }
+  .toolbar .actions { margin-left: 0; }
+  code.name { max-width: 22ch; }
+}
+form#request-filters input[type="checkbox"] { min-width: 0; }
+#page-queries table.requests .clip { max-width: 9em; }
+#page-queries table.requests td.stmt-cell { min-width: 12em; }
+/* beside the full sidebar (1000–1100 px) or the rail, the log's and the running statements' names cut shorter: the table fits its card */
+@media (max-width: 1100px) {
+  #page-queries table.requests .clip, #page-queries table.running .clip { max-width: 6em; }
+  #page-queries table.requests td.stmt-cell { min-width: 9em; }
+}
+#page-queries tr.detail pre { max-height: 320px; overflow: auto; }
+
+/* ---------------------------------------------------------------- the unsupported SQL (Queries; a line on the Overview) */
+ul.unsupported { list-style: none; margin: 0; padding: 0; }
+ul.unsupported li { padding: var(--space-2) var(--space-3); border-top: 1px solid var(--line); }
+ul.unsupported li:first-child { border-top: 0; }
+ul.unsupported p { margin: 0; overflow-wrap: anywhere; }
+ul.unsupported .headline { font-weight: 600; }
+ul.unsupported .clip { max-width: min(40em, 100%); }
+.unsupported-line { margin: var(--space-4) 0 0; overflow-wrap: anywhere; }
+.unsupported-line a.see { margin-left: var(--space-2); font-size: var(--text-sm); }
+
+/* a table's copy on the Tables page: the Overview's bar (copyBar) and the words mason wait prints, on its note line */
+.copyline { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
+.copyline .what-copy { color: var(--muted); }
+
+/* a phone: the five ranges closer, so the control fits the page's width (it scrolls inside itself, never the page, if not) */
+@media (max-width: 640px) { .range a, .range .off { padding: 0 var(--space-2); } }