tablewalk 0.0.1

package/dist/client/style.css

@@ -0,0 +1,2711 @@
+/* Tokens. Light is the bare :root; dark is redefined twice — once for the
+   OS preference (guarded so an explicit light choice still wins) and once for
+   the explicit stamp. Nothing outside these blocks names a colour directly. */
+:root {
+  --bg: #fbfaf8;
+  --surface: #ffffff;
+  --surface-2: #f3f1ed;
+  --border: #e2ded6;
+  --border-strong: #cbc5b9;
+  --text: #24211c;
+  --text-dim: #6d675d;
+  --text-faint: #98918480;
+  --accent: #1d6a5a;
+  --accent-soft: #1d6a5a14;
+  --link: #17594c;
+  --warn: #9a4b12;
+  --danger: #a12d2d;
+  --key: #7a5cc0;
+  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
+  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --radius: 6px;
+
+  /* Motion.
+
+     The built-in CSS easings are too weak to read as intentional, so the
+     curves are explicit. `ease-in` appears nowhere: it starts slow, delaying
+     the exact moment the user is watching, and an ease-out at 200ms feels
+     faster than an ease-in at 200ms.
+
+     Durations are short because this is a tool, not a presentation. A
+     dropdown at 160ms feels responsive; the same dropdown at 400ms feels
+     like it is thinking. Nothing here exceeds 220ms.
+
+     What is deliberately NOT animated: anything reached by keyboard, and
+     anything you see a hundred times a day. Arrowing through the table list
+     and paging through rows are instant, because animating a repeated action
+     makes the tool feel slower every single time. */
+  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
+  --t-press: 140ms;
+  --t-hover: 120ms;
+  --t-popover: 160ms;
+  --t-panel: 200ms;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --bg: #16181a;
+    --surface: #1c1f22;
+    --surface-2: #23272b;
+    --border: #2f343a;
+    --border-strong: #454c54;
+    --text: #e4e2dd;
+    --text-dim: #9aa0a6;
+    --text-faint: #6b727980;
+    --accent: #5fc9ad;
+    --accent-soft: #5fc9ad1a;
+    --link: #6fd4b8;
+    --warn: #e0a05c;
+    --danger: #e8756f;
+    --key: #b39ae8;
+  }
+}
+
+:root[data-theme="dark"] {
+  --bg: #16181a;
+  --surface: #1c1f22;
+  --surface-2: #23272b;
+  --border: #2f343a;
+  --border-strong: #454c54;
+  --text: #e4e2dd;
+  --text-dim: #9aa0a6;
+  --text-faint: #6b727980;
+  --accent: #5fc9ad;
+  --accent-soft: #5fc9ad1a;
+  --link: #6fd4b8;
+  --warn: #e0a05c;
+  --danger: #e8756f;
+  --key: #b39ae8;
+}
+
+* { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--text);
+  font: 14px/1.5 var(--sans);
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ---------- top bar ---------- */
+
+.topbar {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 8px 14px;
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+  flex: none;
+}
+
+/* The wordmark is a home link, so it has to look pressable without becoming
+   a button in the visual sense — no border, no fill, just a hit area. */
+.brand {
+  display: flex; align-items: center; gap: 8px; flex: none;
+  /* Colour reset explicitly, not just the background. The base button rule
+     sets `color: var(--bg)` to sit on an accent fill; unsetting only the fill
+     left near-white text on a white bar, visible solely on hover. */
+  background: none; border: none; border-radius: var(--radius);
+  color: var(--text);
+  padding: 4px 6px; margin-left: -6px; cursor: pointer;
+  font: inherit;
+}
+.brand:hover .brand-name { color: var(--accent); }
+.brand:hover .brand-mark { border-color: var(--accent); }
+
+/* Two linked nodes, which is the whole idea of the tool in 14 pixels. */
+.brand-mark {
+  width: 14px; height: 14px; border-radius: 50%;
+  border: 2px solid var(--accent);
+  position: relative;
+}
+.brand-mark::after {
+  content: ""; position: absolute; left: 12px; top: 3px;
+  width: 10px; height: 2px; background: var(--accent);
+}
+
+.brand-name { font-weight: 620; letter-spacing: -0.01em; color: var(--text); font-size: 14px; }
+/* The connection name, which is also the button that opens Connections.
+   Quiet by default — it reads as the label it is — and only takes a box on
+   hover, because a permanent button here would compete with the query bar
+   for the eye every time the page is looked at. */
+.brand-db {
+  color: var(--text-dim);
+  font-family: var(--mono);
+  font-size: 12px;
+  padding: 4px 6px;
+  border: 1px solid transparent;
+  border-radius: var(--radius);
+  background: none;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.brand-db:hover { color: var(--text); border-color: var(--border-strong); }
+.brand-db:focus-visible { color: var(--text); border-color: var(--border-strong); }
+/* Before a connection is named there is nothing to click, and an empty box
+   beside the wordmark reads as a rendering fault. */
+.brand-db:empty { display: none; }
+
+.querybar { display: flex; gap: 6px; flex: 1; min-width: 0; }
+
+#query {
+  flex: 1; min-width: 0;
+  padding: 7px 10px;
+  font: 13px/1.4 var(--mono);
+  color: var(--text);
+  background: var(--bg);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius);
+}
+#query:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
+
+button {
+  font: inherit; font-size: 13px;
+  padding: 7px 12px;
+  border-radius: var(--radius);
+  border: 1px solid transparent;
+  background: var(--accent); color: var(--bg);
+  cursor: pointer;
+}
+button.ghost { background: transparent; color: var(--text-dim); border-color: var(--border-strong); }
+button.ghost[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
+button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
+  /* Only transform and opacity, which skip layout and paint. Confined to
+     deliberate controls — a row you click a hundred times a day should not
+     spring. */
+  .topbar button, dialog.confirm button, .view-save {
+    transition: transform var(--t-press) var(--ease-out),
+                background var(--t-hover) ease,
+                border-color var(--t-hover) ease,
+                color var(--t-hover) ease;
+  }
+  .topbar button:active, dialog.confirm button:active { transform: scale(0.97); }
+}
+
+/* The pane, so the control that edits the statement sits in its corner rather
+   than on a row of its own. A persistent full-width row for one button is a
+   line of chrome between the query bar and the results, on every page, for an
+   action taken occasionally. */
+.explain-pane { position: relative; flex: none; }
+.explain-pane[hidden] { display: none; }
+.explain-edit {
+  position: absolute; top: 6px; right: 12px;
+  padding: 2px 9px; border-radius: 5px;
+  background: var(--surface); border: 1px solid var(--border);
+  color: var(--text-dim); cursor: pointer;
+  font: 10.5px var(--mono);
+  opacity: 0;
+}
+/* Revealed on approach, and always for the keyboard — an affordance nobody can
+   tab to is one that does not exist for anyone not using a mouse. */
+.explain-pane:hover .explain-edit,
+.explain-edit:focus-visible { opacity: 1; }
+.explain-edit:hover { color: var(--accent); border-color: var(--accent); }
+
+.explain {
+  margin: 0; padding: 10px 14px;
+  font: 12px/1.55 var(--mono);
+  background: var(--surface-2);
+  border-bottom: 1px solid var(--border);
+  color: var(--text-dim);
+  white-space: pre; overflow-x: auto;
+  flex: none;
+}
+
+.errors {
+  padding: 8px 14px; flex: none;
+  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
+  border-bottom: 1px solid var(--border);
+  color: var(--danger);
+  font-size: 13px;
+}
+.errors p { margin: 2px 0; }
+
+/* ---------- layout ---------- */
+
+.layout { display: flex; flex: 1; min-height: 0; }
+
+.sidebar {
+  width: 232px; flex: none;
+  border-right: 1px solid var(--border);
+  background: var(--surface);
+  display: flex; flex-direction: column;
+  min-height: 0;
+}
+#table-filter {
+  margin: 8px; padding: 6px 8px;
+  font: 12px var(--sans); color: var(--text);
+  background: var(--bg);
+  border: 1px solid var(--border); border-radius: var(--radius);
+}
+#table-list { list-style: none; margin: 0; padding: 0 6px 12px; overflow-y: auto; flex: 1; }
+#table-list li { margin-bottom: 1px; }
+#table-list button {
+  width: 100%; text-align: left;
+  background: transparent; color: var(--text);
+  border: none; border-radius: var(--radius);
+  padding: 5px 8px;
+  font: 12.5px/1.35 var(--mono);
+  display: flex; justify-content: space-between; gap: 8px; align-items: baseline;
+}
+#table-list button:hover { background: var(--surface-2); }
+#table-list button[aria-current="true"] { background: var(--accent-soft); color: var(--accent); }
+#table-list .rows { color: var(--text-dim); font-size: 11px; font-variant-numeric: tabular-nums; }
+#table-list .view-tag { color: var(--key); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; }
+
+/* `scrollbar-gutter: stable` reserves the scrollbar's width whether or not
+   it is showing, so content keeps the same right-hand gutter either way —
+   without it the bar sits *in* the padding and the page reads as flush
+   against the window on that side only. */
+.content {
+  flex: 1; min-width: 0; overflow: auto; display: flex; flex-direction: column;
+  scrollbar-gutter: stable;
+}
+/* The record grid fills the height so its divider runs the full way down,
+   rather than stopping wherever the shorter column happens to end. */
+.content > .record { flex: 1; }
+
+.empty { margin: auto; max-width: 30rem; padding: 32px; text-align: center; }
+.empty h1 { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 8px; }
+.empty p { color: var(--text-dim); margin: 0; }
+
+/* ---------- breadcrumb ---------- */
+
+.crumbs {
+  display: flex; align-items: baseline; gap: 1px; flex-wrap: wrap;
+  padding: 8px 14px;
+  border-bottom: 1px solid var(--border);
+  background: var(--surface);
+  font-size: 12.5px;
+  position: sticky; top: 0; z-index: 2;
+}
+.crumbs button {
+  background: none; border: none; padding: 2px 5px;
+  color: var(--link); font: inherit; font-family: var(--mono);
+  cursor: pointer; border-radius: 3px;
+}
+.crumbs button:hover { background: var(--surface-2); }
+/* The chevron is the only separator, and it is set lighter and roomier than
+   the crumbs so the eye reads it as structure rather than content. */
+.crumbs .sep {
+  color: var(--text-faint);
+  font-size: 11px;
+  padding: 0 3px;
+}
+.crumbs .current {
+  color: var(--text); font-weight: 500;
+  font-family: var(--mono); padding: 2px 5px;
+}
+
+/* ---------- results table ---------- */
+
+/* ---------- tabs ---------- */
+
+.tabs { display: flex; gap: 2px; padding: 8px 14px 0; border-bottom: 1px solid var(--border); }
+.tab {
+  background: none; border: none; border-bottom: 2px solid transparent;
+  color: var(--text-dim); padding: 5px 10px 7px;
+  font: 12.5px var(--sans); border-radius: 0; cursor: pointer;
+}
+.tab:hover { color: var(--text); }
+.tab[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
+
+/* Wider than it was: with the sidebar on the left, 14px of gutter on the
+   right reads as none at all beside a panel edge. */
+.panel-pad { padding: 16px 20px; }
+
+.ddl-note { margin: 12px 14px 0; color: var(--text-dim); font-size: 12px; }
+.ddl-note strong { color: var(--text); font-weight: 600; }
+.ddl {
+  margin: 8px 14px 16px; padding: 12px 14px;
+  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
+  font: 12.5px/1.6 var(--mono); color: var(--text);
+  white-space: pre; overflow-x: auto;
+}
+
+/* ---------- diagram ---------- */
+
+/* ---------- diagram: viewport, zoom, focus ---------- */
+
+/* No width cap: the diagram is a viewport now, and every pixel of panel it
+   does not use is a pixel of schema the reader has to pan to instead. */
+.diagram { max-width: none; }
+
+/* A window onto a drawing larger than the window.
+
+   Given a height rather than left to size to its content: a viewport that
+   grows with its content is not a viewport, and the whole point is that the
+   picture can be bigger than the space it is read in. */
+.diagram-viewport {
+  position: relative;
+  height: min(72vh, 760px);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg);
+  overflow: hidden;
+  cursor: grab;
+  touch-action: none;
+}
+.diagram-viewport.dragging { cursor: grabbing; }
+.diagram-viewport svg { display: block; }
+
+.zoom-controls {
+  position: absolute; right: 10px; bottom: 10px;
+  display: flex; align-items: center; gap: 4px;
+  padding: 4px; border-radius: 7px;
+  background: var(--surface); border: 1px solid var(--border);
+  box-shadow: 0 2px 10px rgb(0 0 0 / 0.06);
+}
+.zoom-controls button { padding: 2px 8px; font-size: 12px; }
+.zoom-readout {
+  min-width: 3.4rem; text-align: center;
+  font: 11px var(--mono); color: var(--text-dim);
+  font-variant-numeric: tabular-nums;
+}
+
+.diagram-head {
+  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
+  margin-bottom: 12px;
+}
+.diagram-head .diagram-title { margin: 0; }
+
+.diagram-focus {
+  display: flex; align-items: center; gap: 6px;
+  margin-left: auto; justify-content: flex-end;
+  /* wrap-reverse so an overflowing row of chips grows upwards. Plain `wrap`
+     would push the field itself onto a second line, which is the same
+     moving-target problem in the other axis. */
+  flex-wrap: wrap-reverse;
+}
+.diagram-focus .picker { flex: none; }
+
+/* A field with a menu we draw ourselves. See picker.js for why. */
+.picker { position: relative; }
+.picker-input {
+  width: 15rem; max-width: 100%; padding: 5px 9px;
+  border: 1px solid var(--border); border-radius: 6px;
+  background: var(--bg); color: var(--text);
+  font: 12px var(--mono);
+}
+.picker-input:focus { outline: none; border-color: var(--accent); }
+.picker-list {
+  z-index: 40; max-height: 17rem; overflow-y: auto;
+  padding: 4px;
+  background: var(--surface);
+  border: 1px solid var(--border-strong); border-radius: 8px;
+  box-shadow: 0 8px 28px rgb(0 0 0 / 0.16);
+}
+.picker-option {
+  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
+  padding: 6px 9px; border-radius: 5px; cursor: pointer;
+}
+.picker-option.active { background: var(--accent-soft); }
+.picker-label { font: 12.5px var(--mono); color: var(--text); }
+.picker-option.active .picker-label { color: var(--accent); }
+.picker-detail { font: 10.5px var(--mono); color: var(--text-faint); }
+.picker-empty { padding: 10px; margin: 0; font-size: 12px; color: var(--text-dim); }
+.diagram-chip {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 4px 8px; border-radius: 999px;
+  border: 1px solid var(--accent); background: var(--accent-soft);
+  color: var(--accent); font: 11.5px var(--mono); cursor: pointer;
+}
+.diagram-chip .chip-x { opacity: 0.6; }
+.diagram-chip:hover .chip-x { opacity: 1; }
+.diagram-clear { font-size: 11.5px; }
+
+/* ---------- command palette ---------- */
+
+.palette-backdrop {
+  /* Above everything it can be opened from.
+  
+     ⌘K is bound at the document with capture, so it fires whatever is on
+     screen — and at 60 it opened *underneath* the SQL panel (75), the
+     connection manager (80) and the page builder (85). The result was a
+     focused text field nobody could see, swallowing keystrokes meant for the
+     surface in front of it. Whatever the palette can open over, it opens
+     above. */
+  position: fixed; inset: 0; z-index: 100;
+  background: rgb(0 0 0 / 0.28);
+  display: flex; justify-content: center;
+  padding-top: 12vh;
+}
+.palette {
+  width: min(620px, 92vw); max-height: 62vh;
+  display: flex; flex-direction: column;
+  background: var(--surface);
+  border: 1px solid var(--border-strong);
+  border-radius: 10px;
+  box-shadow: 0 18px 60px rgb(0 0 0 / 0.28);
+  overflow: hidden;
+}
+.palette-input {
+  padding: 14px 16px;
+  border: none; border-bottom: 1px solid var(--border);
+  background: none; color: var(--text);
+  font: 14px var(--mono);
+}
+/* The outline is dropped because the palette's own frame is the focus
+   indicator while it is the only thing focusable — but Tab can move to a
+   result and back, and coming back to an input with no indicator at all is
+   the caret being somewhere nobody can see. */
+.palette-input:focus { outline: none; border-bottom-color: var(--accent); }
+.palette-list { overflow-y: auto; padding: 6px; }
+.palette-item {
+  display: grid; grid-template-columns: 4.6rem 1fr auto;
+  align-items: baseline; gap: 10px;
+  padding: 7px 10px; border-radius: 6px; cursor: pointer;
+}
+.palette-item.active { background: var(--accent-soft); }
+.palette-kind {
+  font: 10px var(--mono); text-transform: uppercase; letter-spacing: 0.06em;
+  color: var(--text-faint);
+}
+.palette-kind.kind-view, .palette-kind.kind-filter { color: var(--link); }
+.palette-kind.kind-recent { color: var(--text-faint); }
+.palette-kind.kind-action { color: var(--accent); }
+.palette-kind.kind-page { color: var(--accent); }
+.palette-kind.kind-sql { color: var(--key); }
+.palette-label {
+  font: 13px var(--mono); color: var(--text);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.palette-item.active .palette-label { color: var(--accent); }
+.palette-detail { font: 11px var(--mono); color: var(--text-faint); }
+.palette-empty { padding: 16px; margin: 0; font-size: 12.5px; color: var(--text-dim); }
+
+/* ---------- the sidebar toggle ---------- */
+
+/* Header controls that are not the primary action: an icon's worth of space
+   each, no outline until you reach for them. The outlined-rectangle treatment
+   is reserved for Run and for the mode, which are the two things in the header
+   worth reading every time. */
+.icon-button {
+  padding: 5px 9px; border-radius: 6px;
+  background: none; border: 1px solid transparent;
+  color: var(--text-dim); cursor: pointer;
+  font: 11px var(--mono);
+}
+.icon-button:hover { color: var(--accent); border-color: var(--border); background: var(--surface); }
+.icon-button[aria-expanded="true"],
+.icon-button[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
+
+.more-list {
+  z-index: 70; min-width: 15rem; padding: 5px;
+  background: var(--surface);
+  border: 1px solid var(--border-strong); border-radius: 8px;
+  box-shadow: 0 10px 34px rgb(0 0 0 / 0.18);
+}
+.more-item {
+  display: grid; grid-template-columns: 1.1rem 1fr auto;
+  align-items: baseline; gap: 8px;
+  padding: 7px 9px; border-radius: 5px; cursor: pointer;
+  font: 12.5px var(--mono); color: var(--text);
+}
+.more-item:hover, .more-item:focus { background: var(--accent-soft); outline: none; }
+.more-item:focus .more-label { color: var(--accent); }
+.more-tick { color: var(--accent); font-size: 11px; }
+.more-detail { font-size: 10.5px; color: var(--text-faint); }
+
+/* The collapse control sits in the sidebar, on the filter field's row. */
+.sidebar-filter-row { display: flex; align-items: center; gap: 6px; margin: 8px; }
+.sidebar-filter-row #table-filter { margin: 0; flex: 1; min-width: 0; }
+/* An icon inside a flex button is a flex item, and shrinks: the gear went to
+   two pixels wide while keeping its full height, which reads as a stray
+   vertical line rather than a control. The `width` attribute on an `<svg>` is
+   only a hint once flexbox is doing the sizing. */
+.conn-manage svg,
+.sidebar-collapse svg,
+.sidebar-reveal svg { flex: none; display: block; }
+
+/* `--text-faint` is a mid-grey at half alpha — the token for a rule between
+   things, not for a control somebody has to find. These are the two controls
+   a first-time reader is least likely to notice and most likely to want, so
+   they are drawn at the same strength as the text they sit beside, with a hit
+   area big enough to be one. */
+.sidebar-collapse {
+  flex: none; display: inline-flex; align-items: center; justify-content: center;
+  width: 28px; height: 28px; line-height: 1;
+  background: none; border: 1px solid transparent; border-radius: 6px;
+  color: var(--text-dim); cursor: pointer;
+}
+.sidebar-collapse:hover { color: var(--text); border-color: var(--border); background: var(--surface-2); }
+
+/* And the way back sits where the sidebar was. */
+.sidebar-reveal {
+  display: none;
+  align-self: flex-start; flex: none;
+  /* Room on every side: it sat hard against the window edge with its focus
+     ring clipped by it, and hard against the content on the other. */
+  margin: 10px 10px 0; line-height: 1;
+  /* No `display` here: the rule above says `none`, and the one that reveals
+     this button is the one that decides how it is laid out. Setting
+     `inline-flex` in the base rule overrode that `none` and left the button
+     on screen beside the sidebar it exists to bring back. */
+  align-items: center; justify-content: center;
+  width: 28px; height: 28px;
+  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
+  color: var(--text-dim); cursor: pointer;
+}
+.sidebar-reveal:hover { color: var(--text); border-color: var(--accent); }
+/* Drawn inside its own box, so the ring cannot be cut off by the edge of the
+   window the button is pinned to. */
+.sidebar-reveal:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+
+body.sidebar-hidden .sidebar { display: none; }
+body.sidebar-hidden .sidebar-reveal { display: inline-flex; }
+
+.diagram svg { display: block; overflow: visible; }
+/* Opened nodes make the picture wider than the panel; it scrolls rather than
+   shrinking the type to fit. */
+.node > rect { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1; }
+.node text { font: 12px var(--mono); fill: var(--text); }
+.node-head { cursor: pointer; }
+.node-head-hit { fill: transparent; stroke: none; }
+.node:hover > rect { stroke: var(--accent); }
+.node-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.node-focus > rect { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.5; }
+.node-focus .node-head text { fill: var(--accent); }
+.node-head text { font-weight: 600; }
+
+/* The column list. Quieter than the table name it sits under — it is there to
+   be scanned for a name you already have in mind, not read top to bottom. */
+.node-rule { stroke: var(--border); stroke-width: 1; }
+.node-field { font-size: 11px; fill: var(--text-dim); }
+.node-field.is-key { fill: var(--text); }
+.node-field.is-ref { fill: var(--accent); }
+.node-type { font-size: 10px; fill: var(--text-faint); }
+.node-more { cursor: pointer; }
+.node-more-hit { fill: transparent; stroke: none; }
+.node-more text { font-size: 10.5px; fill: var(--text-faint); }
+.node-more:hover text { fill: var(--accent); }
+.node-more:hover .node-more-hit { fill: var(--accent-soft); }
+.node-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.edge { fill: none; stroke: var(--border-strong); stroke-width: 1.25; }
+.edge-head { fill: var(--border-strong); }
+.edge-label { font: 10.5px var(--mono); fill: var(--text-dim); }
+.diagram-legend { margin: 12px 0 0; font-size: 11.5px; color: var(--text-faint); font-family: var(--mono); }
+.diagram-legend span { color: var(--text-dim); }
+
+.result-head {
+  display: flex; align-items: baseline; gap: 12px;
+  padding: 10px 14px 6px;
+  color: var(--text-dim); font-size: 12px;
+}
+.result-head h2 { margin: 0; font: 600 15px var(--mono); color: var(--text); letter-spacing: -0.01em; }
+.result-head .stat { font-variant-numeric: tabular-nums; }
+
+/* No horizontal padding on the scrollport.
+
+   `position: sticky; left: 0` pins to the *padding* edge, so a scrollport with
+   14px of left padding leaves a 14px strip that pinned cells do not cover and
+   scrolled content passes under — the tail of a column showing through beside
+   the frozen one. The inset moves into the edge cells, where it is the same
+   14px and covers nothing. */
+.table-wrap { overflow-x: auto; padding: 0 0 14px; }
+th:first-child, td:first-child { padding-left: 14px; }
+th:last-child, td:last-child { padding-right: 14px; }
+th:first-child .th-sort { padding-left: 0; }
+
+/* Columns frozen against a sideways scroll. The `left` on each is measured
+   after layout — see applyPins — because it is the width of everything before
+   it, which the browser knows and this file cannot. */
+.pinned {
+  position: sticky;
+  z-index: 1;
+  background: var(--bg);
+}
+thead .pinned { z-index: 3; background: var(--surface); }
+tbody tr:hover .pinned { background: var(--accent-soft); }
+/* One seam, on the rightmost frozen column, rather than a line per column. */
+.pinned-edge { box-shadow: 1px 0 0 var(--border-strong); }
+.table-wrap:not([data-scrolled]) .pinned-edge { box-shadow: none; }
+table { border-collapse: collapse; width: 100%; font: 12.5px var(--mono); }
+th, td {
+  text-align: left; padding: 5px 10px;
+  border-bottom: 1px solid var(--border);
+  white-space: nowrap; max-width: 30rem;
+  overflow: hidden; text-overflow: ellipsis;
+}
+th {
+  position: sticky; top: 0;
+  /* Above the pinned body cells, which carry `z-index: 1` so they float over
+     the columns they freeze past. Without this, scrolling down slid the
+     frozen `id` column over its own heading — two sticky things, both
+     stacked, and the one that should win by being the header did not. */
+  z-index: 2;
+  background: var(--surface); color: var(--text-dim);
+  font-weight: 600; font-size: 11px;
+  text-transform: uppercase; letter-spacing: 0.05em;
+  border-bottom: 1px solid var(--border-strong);
+  padding: 0;
+}
+th.sorted { color: var(--accent); border-bottom-color: var(--accent); }
+
+/* The header splits into two controls: the label sorts, the caret filters.
+   One click target doing both would make every attempt to filter a sort. */
+.th-sort {
+  background: none; border: none; border-radius: 0;
+  color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit;
+  padding: 5px 4px 5px 10px; cursor: pointer; white-space: nowrap;
+}
+.th-sort:hover { color: var(--accent); }
+.th-arrow { color: var(--accent); }
+/* Not disabled-looking, just not offered: the column reads normally, it simply
+   does not respond to a click. Greying the label out would say the column
+   itself is unavailable, which is not what is being said. */
+.th-sort.not-sortable { cursor: default; opacity: 1; }
+.th-sort.not-sortable:hover { color: inherit; }
+/* Marked unavailable rather than disabled, so the sentence saying why is
+   reachable by keyboard — see the header in table.js. The browser no longer
+   greys it for us, so it is greyed here. */
+.th-sort[aria-disabled="true"] { cursor: default; color: var(--text-faint); }
+.th-sort[aria-disabled="true"]:hover { color: var(--text-faint); }
+/* The default order is shown, not announced: an arrow the same shape as a
+   chosen sort, drawn faintly enough to read as "this happened" rather than
+   "you did this". */
+.sorted-default .th-arrow { color: var(--text-faint); }
+/* An estimate is a button, because there is something to do about it. */
+.stat-estimate {
+  background: none; border: 1px solid transparent; border-radius: 5px;
+  padding: 1px 6px; cursor: pointer;
+  font: inherit; color: var(--key);
+}
+.stat-estimate:hover { border-color: var(--key); background: color-mix(in srgb, var(--key) 10%, transparent); }
+
+.stat-order {
+  background: none; border: 1px solid transparent; border-radius: 5px;
+  padding: 1px 6px; cursor: pointer;
+  font: inherit; color: var(--text-faint);
+}
+.stat-order:hover { color: var(--accent); border-color: var(--border); }
+.th-filter {
+  background: none; border: none; border-radius: 3px;
+  color: var(--text-faint); cursor: pointer;
+  padding: 4px 8px 4px 2px; font-size: 11px; line-height: 1;
+}
+.th-filter:hover { color: var(--accent); background: var(--accent-soft); }
+.align-right .th-sort { padding-left: 4px; }
+
+.th-menu {
+  position: fixed; z-index: 40;
+  min-width: 15rem; max-width: 24rem; max-height: 20rem; overflow-y: auto;
+  background: var(--surface);
+  border: 1px solid var(--border-strong); border-radius: 8px;
+  box-shadow: 0 6px 20px rgb(0 0 0 / 0.16);
+  padding: 4px;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .th-menu {
+    transform-origin: top center;
+    transition: opacity var(--t-popover) var(--ease-out), transform var(--t-popover) var(--ease-out);
+    @starting-style { opacity: 0; transform: scale(0.97) translateY(-4px); }
+  }
+}
+.th-menu-item {
+  width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
+  background: none; border: none; border-radius: 5px;
+  padding: 5px 8px; cursor: pointer; text-align: left;
+  text-transform: none; letter-spacing: 0;
+}
+.th-menu-item:hover { background: var(--surface-2); }
+.th-menu-label { font: 12.5px var(--mono); color: var(--text); }
+.th-menu-typed .th-menu-label { color: var(--link); }
+.th-menu-sep { height: 1px; background: var(--border); margin: 4px 2px; }
+.th-menu-cond { font: 10.5px var(--mono); color: var(--text-faint); flex: none; }
+th .pk { color: var(--key); }
+th .fk { color: var(--accent); }
+/* Only where a click goes somewhere. A pointer over a row that does nothing
+   advertises an action the row does not have. */
+tbody tr { cursor: default; }
+tbody tr.clickable { cursor: pointer; }
+tbody tr.clickable:hover { background: var(--accent-soft); }
+
+/* Alignment is set per column by the renderer and applied to the header too,
+   so a label always sits over its own values. */
+.align-left { text-align: left; }
+.align-right { text-align: right; }
+.align-center { text-align: center; }
+
+td.mono { font-family: var(--mono); }
+td.num { font-variant-numeric: tabular-nums; }
+td.null { color: var(--text-faint); font-style: italic; }
+td.bool .yes { color: var(--accent); }
+/* `false` is a value, and was drawn in the token for absence — the same
+   `--text-faint` as `null`, a mid-grey at half alpha, with only an italic to
+   tell them apart. In a database browser those are two very different facts
+   about a row, and the negative one was the harder of the two to see at all.
+   It reads as present-and-negative now; `null` keeps the faint italic,
+   because absence is the thing that should recede. */
+td.bool .no { color: var(--text-dim); }
+td.reflink { color: var(--link); }
+td .ref { color: var(--link); text-decoration: underline; text-decoration-style: dotted; }
+
+/* Paging sits on the right, under the end of the table, where the eye
+   already is after reading a row across. */
+.pager {
+  display: flex; gap: 12px; align-items: center; justify-content: space-between;
+  padding: 0 14px 16px; color: var(--text-dim); font-size: 12px;
+  flex-wrap: wrap;
+}
+/* How you are reading the table, on the left; where you are in it, on the
+   right. The size is not a step through the result, so it does not sit among
+   the buttons that are. */
+.pager-size { display: flex; gap: 6px; align-items: center; }
+/* Narrow: the list is four two-or-three-digit numbers, and the shared control
+   is sized for connection names. */
+.pager-size .dd { min-width: 0; }
+.pager-size .dd-button { padding: 3px 6px; }
+.pager-size .dd-list { min-width: 0; }
+.pager-steps { display: flex; gap: 8px; align-items: center; }
+.pager .page-label { display: flex; gap: 6px; align-items: center; }
+/* Wide enough for four digits without growing as the number does — a control
+   that resizes while you read it is a control that moves under the cursor. */
+.page-input {
+  width: 5.5ch; text-align: right;
+  font: inherit; font-family: var(--mono);
+  color: var(--text); background: var(--bg);
+  border: 1px solid var(--border-strong); border-radius: var(--radius);
+  padding: 3px 4px;
+}
+/* A step that cannot be taken says so by looking unavailable rather than by
+   vanishing: buttons that come and go make the row jump as you page. */
+.pager .ghost[disabled] { opacity: 0.4; cursor: default; }
+
+/* ---------- record view ---------- */
+
+/* The record is one surface, not a tray of cards.
+
+   Rounded panels floating in padding read as app chrome; the result grid
+   beside them is edge-to-edge with a hairline header, and the two views of
+   the same database should not look like they came from different tools. The
+   panels now sit flush, divided by a rule, with the same sticky header
+   treatment the grid uses. */
+.record {
+  display: grid; gap: 0;
+  /* The reference panel needs a fixed-ish column, not a proportional one: its
+     content is a handful of short rows however wide the window is, so giving
+     it a third of a large screen leaves a column of nothing beside a field
+     list that has to scroll. */
+  grid-template-columns: minmax(0, 1fr) minmax(19rem, 24rem);
+  align-items: stretch;
+}
+@media (max-width: 900px) { .record { grid-template-columns: minmax(0, 1fr); } }
+
+.panel { background: var(--surface); border-right: 1px solid var(--border); min-width: 0; }
+.panel:last-child { border-right: none; }
+@media (max-width: 900px) {
+  .panel { border-right: none; border-bottom: 1px solid var(--border); }
+}
+.panel > h3 {
+  margin: 0; padding: 10px 14px;
+  font: 600 10.5px var(--sans); text-transform: uppercase; letter-spacing: 0.09em;
+  color: var(--text-dim);
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+  position: sticky; top: 0; z-index: 1;
+}
+
+/* ---------- record fields ----------
+
+   Grouped into sections, because a twenty-seven column table as one flat list
+   is technically complete and practically unreadable: identity, links, values
+   and bookkeeping all carry equal weight, so nothing carries any. */
+
+.field-groups { padding: 12px 0 18px; }
+.field-group-plain { padding-top: 4px; }
+/* Divided by space, not by rules.
+
+   Every section already announces itself with a heading, so a border on top
+   of that is the same boundary drawn twice — and with five sections the
+   panel reads as a stack of boxes rather than one record. Whitespace is the
+   quieter separator and the heading does the work. */
+.field-group + .field-group { margin-top: 24px; }
+.field-group-head {
+  width: 100%; display: flex; align-items: baseline; gap: 7px;
+  background: none; border: none; border-radius: 0;
+  padding: 2px 14px 8px;
+  font: 600 10.5px var(--sans); text-transform: uppercase; letter-spacing: 0.09em;
+  color: var(--text-dim); cursor: pointer; text-align: left;
+}
+.field-group-head:hover { color: var(--text); }
+.field-group-caret { font-size: 9px; color: var(--text-faint); }
+.field-group-count {
+  margin-left: auto; font-variant-numeric: tabular-nums;
+  color: var(--text-faint); font-size: 10.5px; letter-spacing: 0;
+}
+.field-group.collapsed .fields { display: none; }
+.field-group.collapsed .field-group-caret { transform: rotate(-90deg); }
+@media (prefers-reduced-motion: no-preference) {
+  .field-group-caret { transition: transform 140ms ease; display: inline-block; }
+}
+
+/* Fields flow into as many columns as fit.
+
+   A twenty-seven column record in one narrow column is a scroll with empty
+   space beside it. `auto-fill` with a minimum means the layout answers the
+   question itself: wide window, two or three columns; narrow window, one.
+   No breakpoint to keep in step with the panel's own width. */
+.fields {
+  margin: 0; padding: 0 0 2px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
+  /* Columns need a real gutter, not a hairline. At 4px the right-hand value
+     of one column sat almost against the left-hand label of the next, and
+     the eye could not tell which label a value belonged to. */
+  column-gap: 28px;
+}
+
+/* At most two columns, however wide the window.
+
+   `max(24rem, 45%)` does both jobs in one expression: the percentage means
+   only two tracks can ever fit, and the absolute minimum means a narrow panel
+   drops to one rather than to two unreadably thin ones. Three columns looked
+   efficient on a wide screen and was not — a four-field table spread its
+   fields across the full width, so reading one row meant crossing the whole
+   monitor to pair a label with its value. */
+.fields { grid-template-columns: repeat(auto-fill, minmax(max(21rem, 45%), 1fr)); }
+.field {
+  display: grid; grid-template-columns: minmax(8rem, 38%) 1fr; gap: 16px;
+  padding: 6px 14px; align-items: baseline;
+  border-left: 2px solid transparent;
+  min-width: 0;
+}
+/* Anything that needs room takes the full width rather than being squeezed
+   into a column and wrapping to six lines. */
+.field:has(.long-value) { grid-column: 1 / -1; }
+.field:hover { background: var(--surface-2); border-left-color: var(--border-strong); }
+.field-ref:hover { border-left-color: var(--accent); }
+/* Three levels, and they have to be distinguishable at a glance:
+
+     value        13px, --text        what you came to read
+     label        12px, --text-dim    what it is called
+     type         10px, --text-faint  what it is
+
+   Before this the label was 12px and the value 12.5px in the same colour, so
+   a field read as one undifferentiated string and the eye had to parse it.
+   Half a pixel is not a hierarchy. */
+/* Labels wrap rather than truncate. `work_order_id integer` clipped to
+   `work_order_id integer…` hides the one thing the annotation was there to
+   say, and a column name is not something the reader can guess the rest of. */
+.field dt {
+  color: var(--text-dim); font: 12px/1.5 var(--mono);
+  letter-spacing: -0.005em;
+  min-width: 0; overflow-wrap: anywhere;
+}
+.field dd {
+  margin: 0; font: 13px/1.5 var(--mono); color: var(--text);
+  word-break: break-word;
+}
+/* Prose escapes the monospace. Names read better in the interface face, and
+   nothing is lost — there is no column of them to line up. */
+.field dd .prose { font-family: var(--sans); font-size: 13.5px; letter-spacing: -0.003em; }
+.long-value.prose { font-family: var(--sans); font-size: 13px; }
+.field dd.null { color: var(--text-faint); font-style: italic; }
+.field .type { color: var(--text-faint); font-size: 10px; margin-left: 7px; }
+.field .pk {
+  color: var(--key); font-size: 9.5px; margin-left: 5px;
+  text-transform: uppercase; letter-spacing: 0.05em;
+}
+.field .req {
+  color: var(--text-faint); font-size: 9.5px; margin-left: 5px;
+  text-transform: uppercase; letter-spacing: 0.05em;
+}
+
+/* Values render as what they are, matching the grid. Two views of the same
+   value should not disagree about its type. */
+.bool-value.yes { color: var(--accent); }
+.bool-value.no { color: var(--text-dim); }
+.num-value { font-variant-numeric: tabular-nums; }
+.date-value { color: var(--text); }
+.long-value {
+  white-space: pre-wrap; line-height: 1.55;
+  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
+  padding: 8px 10px; max-height: 14rem; overflow-y: auto;
+}
+
+/* A foreign key reads as one control: the value it holds, and where it goes. */
+.ref-jump {
+  display: inline-flex; align-items: baseline; gap: 8px;
+  background: var(--bg); border: 1px solid var(--border); border-radius: 999px;
+  padding: 2px 4px 2px 10px; cursor: pointer;
+  font: 12.5px var(--mono); color: var(--text);
+}
+.ref-jump:hover { border-color: var(--accent); background: var(--accent-soft); }
+.ref-jump-value { font-variant-numeric: tabular-nums; }
+.ref-jump-table {
+  color: var(--text-dim); font-size: 11px;
+  background: var(--surface-2); border-radius: 999px; padding: 1px 8px;
+}
+.ref-jump:hover .ref-jump-table { color: var(--accent); }
+
+/* The walk, unfolded in place: a caret beside a reference pins the row it
+   points at as an indented card, whose own references carry carets in turn. */
+.nest-wrap { display: inline; }
+.nest-caret {
+  border: none; background: none; cursor: pointer; padding: 2px 5px;
+  color: var(--text-faint); font-size: 11px; border-radius: 4px;
+}
+.nest-caret:hover { color: var(--accent); background: var(--accent-soft); }
+.nest-card {
+  margin: 6px 0 2px; padding: 8px 12px;
+  border-left: 2px solid var(--border-strong); border-radius: 0 6px 6px 0;
+  background: var(--surface-2);
+  font-size: 12.5px;
+}
+.nest-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
+.nest-table { font: 600 12px var(--mono); }
+.nest-label { color: var(--text-dim); font-family: var(--mono); font-size: 12px; }
+.nest-open { margin-left: auto; font-size: 11px; padding: 1px 7px; }
+.nest-line { display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr; gap: 10px; padding: 1px 0; }
+.nest-name { color: var(--text-faint); font: 11.5px var(--mono); }
+.nest-value { font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; }
+.nest-value.null { color: var(--text-faint); font-style: italic; }
+.nest-missing, .nest-more { margin: 4px 0 0; color: var(--text-faint); font-size: 11.5px; }
+
+@media (prefers-reduced-motion: no-preference) {
+  .ref-jump, .field { transition: border-color 120ms ease, background 120ms ease; }
+}
+
+/* The Referenced-by panel is gone: the relationship tabs on the record carry
+   its counts, its navigation and the rows themselves, so keeping it meant
+   saying the same thing twice in two places. Its one unique job — showing a
+   relationship that has no rows — moved to a disabled tab. */
+
+
+.loading { padding: 10px 12px; color: var(--text-dim); font-size: 12px; }
+
+/* ---------- placeholders ---------- */
+
+/* One bar, one sweep.
+
+   The animation is a single moving highlight rather than a pulse of the whole
+   block: a pulse makes a page of placeholders throb in unison, which draws
+   more attention than the content it is standing in for. Every bar shares one
+   timeline, so the sweep reads as one surface being revealed rather than
+   forty independent flickers. */
+.sk-bar {
+  display: block;
+  border-radius: 3px;
+  background: var(--surface-2);
+  background-image: linear-gradient(
+    90deg,
+    transparent 0%,
+    color-mix(in srgb, var(--text-faint) 12%, transparent) 50%,
+    transparent 100%
+  );
+  background-size: 240px 100%;
+  background-repeat: no-repeat;
+  animation: sk-sweep 1.25s linear infinite;
+}
+
+@keyframes sk-sweep {
+  from { background-position: -240px 0; }
+  to { background-position: calc(100% + 240px) 0; }
+}
+
+/* Motion is the decoration here, not the information — the shapes already say
+   what is coming, so removing the sweep costs nothing. */
+@media (prefers-reduced-motion: reduce) {
+  .sk-bar { animation: none; background-image: none; }
+}
+
+.sk-grid { padding: 4px 12px 12px; }
+.sk-row {
+  display: grid;
+  grid-template-columns: repeat(var(--sk-cols), minmax(0, 1fr));
+  gap: 16px; align-items: center;
+  padding: 9px 2px;
+  border-bottom: 1px solid var(--border);
+}
+.sk-head { border-bottom-color: var(--border-strong); }
+/* Placeholder rows sit at the same rhythm as real ones, so the grid does not
+   change height when the data arrives. */
+.sk-row .sk-bar { justify-self: stretch; }
+
+.sk-record { padding: 4px 22px 22px; }
+.sk-section { padding: 14px 0 4px; }
+.sk-section > .sk-bar { margin-bottom: 12px; }
+.sk-fields {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(max(21rem, 45%), 1fr));
+  gap: 2px 40px;
+}
+.sk-field {
+  display: grid; grid-template-columns: 11rem minmax(0, 1fr);
+  align-items: center; gap: 12px;
+  padding: 9px 0;
+}
+
+.sk-related { padding: 6px 0; }
+.sk-related-item {
+  display: grid; grid-template-columns: minmax(2.4rem, auto) 1fr;
+  align-items: center; gap: 12px;
+  padding: 9px 14px;
+}
+.sk-related-names { display: flex; flex-direction: column; gap: 5px; }
+.note { padding: 10px 12px; color: var(--text-dim); font-size: 12px; margin: 0; }
+
+/* Deliberately no transition on table rows. A hover you trigger continuously
+   while reading should be instant; a fade makes the pointer feel like it is
+   dragging the highlight behind it. */
+
+/* ---------- write mode ----------
+
+   The indicator has to be visible without being looked for, so it rings the
+   whole window rather than sitting quietly in a corner. */
+
+.topbar-actions { display: flex; gap: 6px; flex: none; }
+
+/* An icon's footprint, a mode's weight.
+
+   Read only is the resting state and gets no chrome at all; write mode gets a
+   ring and a tint in the danger colour. The difference between them has to be
+   readable at a glance from the corner of the eye — this is the control that
+   says whether a keystroke can change the database. */
+button.mode {
+  padding: 5px 9px; border-radius: 6px; line-height: 1;
+  background: transparent; color: var(--text-dim);
+  border: 1px solid transparent;
+  font-size: 13px; cursor: pointer;
+}
+button.mode:hover { border-color: var(--border); background: var(--surface); }
+button.mode[aria-pressed="true"] {
+  background: color-mix(in srgb, var(--danger) 14%, transparent);
+  border-color: var(--danger);
+}
+
+body.write-mode { box-shadow: inset 0 0 0 3px var(--danger); }
+body.write-mode .topbar { border-bottom-color: var(--danger); }
+
+button.danger { background: var(--danger); color: var(--surface); border-color: var(--danger); }
+
+/* ---------- dialogs ---------- */
+
+dialog.confirm {
+  border: 1px solid var(--border-strong); border-radius: 10px;
+  background: var(--surface); color: var(--text);
+  max-width: 34rem; padding: 20px 22px;
+  font: 14px/1.55 var(--sans);
+}
+dialog.confirm::backdrop { background: rgb(0 0 0 / 0.45); }
+@media (prefers-reduced-motion: no-preference) {
+  dialog.confirm {
+    /* A modal appears in the middle of the viewport rather than out of a
+       trigger, so it is the one popover that keeps a centre origin. */
+    transition: opacity var(--t-panel) var(--ease-out), transform var(--t-panel) var(--ease-out);
+    @starting-style { opacity: 0; transform: scale(0.97); }
+  }
+  dialog.confirm::backdrop {
+    transition: background var(--t-panel) var(--ease-out);
+    @starting-style { background: rgb(0 0 0 / 0); }
+  }
+}
+dialog.confirm h2 { margin: 0 0 8px; font-size: 16px; letter-spacing: -0.01em; }
+dialog.confirm p { margin: 0 0 10px; color: var(--text-dim); }
+dialog.confirm strong { color: var(--text); font-family: var(--mono); font-size: 13px; }
+.confirm-terms { margin: 0 0 14px; padding-left: 18px; color: var(--text-dim); font-size: 13px; }
+.confirm-terms li { margin-bottom: 3px; }
+.confirm-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
+.confirm-diff { width: 100%; margin-bottom: 12px; font: 12.5px var(--mono); }
+.confirm-diff th { text-align: left; color: var(--text-dim); font-weight: 500; width: 5rem; text-transform: none; letter-spacing: 0; font-size: 12px; position: static; background: none; border: none; }
+.confirm-diff td { border: none; }
+.confirm-diff td.null { color: var(--text-faint); font-style: italic; }
+.confirm-params { font: 11.5px var(--mono); color: var(--text-faint); margin: 6px 0 0; }
+dialog.confirm .ddl { margin: 0; }
+
+/* ---------- cell editor ---------- */
+
+.cell-edit {
+  width: 100%; padding: 3px 6px;
+  font: 12.5px var(--mono); color: var(--text);
+  background: var(--bg);
+  border: 1px solid var(--border-strong); border-radius: 4px;
+}
+.cell-edit:focus { outline: 2px solid var(--danger); outline-offset: -1px; border-color: transparent; }
+.cell-edit[data-null="true"] { font-style: italic; }
+
+/* ---------- toast ---------- */
+
+.toast {
+  padding: 8px 14px; flex: none;
+  font-size: 13px;
+  border-bottom: 1px solid var(--border);
+  background: var(--surface-2); color: var(--text-dim);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .toast {
+    /* A transition rather than a keyframe: transitions retarget mid-flight,
+       keyframes restart from zero, and a second toast arriving during the
+       first would otherwise jump. translateY in percent so the distance is
+       the element's own height whatever it contains. */
+    transition: opacity var(--t-panel) var(--ease-out), transform var(--t-panel) var(--ease-out);
+    @starting-style { opacity: 0; transform: translateY(-100%); }
+  }
+}
+.toast-ok { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent); }
+.toast-error { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: var(--danger); }
+
+/* ---------- schema diagram ---------- */
+
+/* ---------- landing ---------- */
+
+/* Kept for the query view's own saved-filter bar, which is not this card. */
+.landing-saved { margin-bottom: 26px; }
+.landing-heading {
+  margin: 0 0 10px;
+  font: 600 10.5px var(--sans); text-transform: uppercase; letter-spacing: 0.07em;
+  color: var(--text-dim);
+}
+.landing-chips { display: flex; flex-wrap: wrap; gap: 6px; }
+/* One line, not two: the name and what makes it worth starting from read
+   as a sentence, and stacking them doubled the height of the one block that
+   pushed this card past its cap. */
+.landing-chip {
+  display: flex; align-items: baseline; gap: 8px;
+  background: var(--surface); border: 1px solid var(--border);
+  border-radius: 3px; padding: 5px 10px; cursor: pointer; text-align: left;
+}
+.landing-chip:hover { border-color: var(--accent); background: var(--accent-soft); }
+.landing-chip-name { font: 12.5px var(--sans); color: var(--text); }
+.landing-chip-table { font: 10.5px var(--mono); color: var(--text-faint); }
+.landing-chip:hover .landing-chip-name { color: var(--accent); }
+
+/* Where to start: the tables this database is actually built around, with
+   their sizes. Clicking one runs it, which is also the first syntax lesson. */
+.landing-starts { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
+.landing-starts-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
+.landing-starts-head .shape-label { margin: 0; }
+.start-chip .landing-chip-table { display: flex; gap: 6px; align-items: baseline; }
+.start-rows { color: var(--text-dim); }
+
+/* ---------- find a value ---------- */
+
+.find-value .conn-inner { max-width: 44rem; }
+.find-note { margin: 0 0 12px; font: 11.5px var(--sans); color: var(--text-faint); max-width: 46ch; }
+.find-input {
+  width: 100%; padding: 8px 12px;
+  font: 13px var(--mono); color: var(--text);
+  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
+}
+.find-input:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
+.find-results { margin-top: 14px; max-height: 26rem; overflow-y: auto; }
+.find-group + .find-group { margin-top: 14px; }
+.find-group-head {
+  display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px;
+  font: 600 10px var(--mono); text-transform: uppercase; letter-spacing: 0.07em;
+  color: var(--text-dim);
+}
+.find-count { color: var(--text-faint); }
+.find-hit {
+  display: flex; align-items: baseline; gap: 10px; width: 100%;
+  padding: 5px 10px; text-align: left; cursor: pointer;
+  background: none; border: 1px solid transparent; border-radius: var(--radius);
+}
+.find-hit:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--border); }
+.find-hit:disabled { cursor: default; opacity: 0.7; }
+.find-hit-columns { flex: 0 0 9rem; font: 11px var(--mono); color: var(--text-faint); }
+.find-hit-value { font: 12.5px var(--mono); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* What the sweep could not do, in the colour of a caveat rather than a result. */
+.find-warn { color: var(--warn); }
+
+/* ---------- check the shape ---------- */
+
+.shape-check .conn-inner { max-width: 46rem; }
+.shape-check-group + .shape-check-group { margin-top: 16px; }
+.shape-check-table {
+  display: flex; align-items: baseline; gap: 8px;
+  padding: 3px 6px; margin: 0 0 6px -6px; cursor: pointer;
+  background: none; border: 1px solid transparent; border-radius: var(--radius);
+  font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: 0.06em;
+  color: var(--text);
+}
+.shape-check-table:hover { border-color: var(--border); background: var(--surface-2); color: var(--accent); }
+.shape-check-count { color: var(--text-faint); font-weight: 400; }
+.shape-check-rule-group {
+  margin: 0 0 10px; padding-left: 10px;
+  border-left: 2px solid var(--border);
+}
+.shape-check-rule-group.tone-high { border-left-color: var(--danger); }
+.shape-check-rule-group.tone-medium { border-left-color: var(--warn); }
+/* The cost, once per rule; then the columns it applies to, indented under
+   it in the tool's own voice — a column and an arrow, nothing else. */
+.shape-check-why {
+  display: flex; gap: 8px; align-items: baseline; margin: 0 0 3px;
+  font: 12px var(--sans); color: var(--text-dim);
+}
+.shape-check-rule { flex: 0 0 10.5rem; font: 11px var(--mono); color: var(--text-faint); }
+.shape-check-item {
+  margin: 0 0 2px 10.5rem; padding-left: 8px;
+  font: 12px var(--mono); color: var(--text);
+}
+
+/* ---------- pages, on the home screen ---------- */
+
+/* Two columns, and one when there is only one card to show.
+ 
+   `:only-child` is the whole first-run rule: a database nobody has worked in
+   yet has no work to resume, `workPanel` returns nothing rather than an empty
+   card, and the schema takes the full width without anything having to decide
+   that it should. */
+/* The work column takes the width it needs, up to a share of the page; the
+   schema takes the rest. Equal halves stranded a column on a fresh browser,
+   where "your work" is one short list and the summary beside it is six lines
+   of prose — half a screen of nothing next to something that wanted the
+   room. */
+/* `stretch`, not `start`: two cards of different heights side by side read
+   as one card and one offcut. Equal height costs the shorter one some space
+   at the bottom, which is what a column of a row looks like. */
+.landing-top {
+  display: grid; gap: 16px; align-items: stretch;
+  /* The database on the left, where reading starts and where the answer for
+     everyone is; your work beside it, in a bounded column — every line in
+     that card wraps, so `fit-content` resolves to min-content and collapses
+     it to a sliver, while an equal half strands a screen of nothing. */
+  grid-template-columns: minmax(0, 1fr) minmax(17rem, 27rem);
+  margin-bottom: 16px;
+}
+.landing-top > :only-child { grid-column: 1 / -1; }
+.landing-top > .shape { max-width: none; margin: 0; }
+/* Under a third of the window, whatever is in them.
+ 
+   Both cards grow with their content — a wide schema has more to say, and
+   "your work" gains a line every time you open a record — so a row that
+   sizes to its content is a row that eventually owns the screen. The cap is
+   on the row, and each card scrolls its own overflow: the diagram below is
+   what the page is for, and it should never be pushed off by a list of
+   things you did yesterday.
+ 
+   30vh rather than a quarter: a quarter cut the schema summary's own lines
+   on a laptop, and the summary is the part a first-time reader needs whole. */
+.landing-top > .shape {
+  max-height: 30vh;
+  overflow-y: auto;
+  /* A scroll that reaches the end stops there rather than carrying on down
+     the page, which is what makes a scrolling panel usable inside one. */
+  overscroll-behavior: contain;
+  /* A shadow at whichever edge has more behind it.
+  
+     A capped panel clips, and a clipped row reads as broken rather than as
+     "there is more" — the cut lands mid-chip and looks like a rendering
+     fault. The two `local` gradients scroll with the content and cover the
+     shadows when the content is at that end; the two fixed ones show
+     through when it is not. No script, and nothing to show when the card
+     does not scroll at all, which is the case this has to get right. */
+  background:
+    linear-gradient(var(--surface) 30%, rgb(0 0 0 / 0)) top / 100% 14px no-repeat local,
+    linear-gradient(rgb(0 0 0 / 0), var(--surface) 70%) bottom / 100% 14px no-repeat local,
+    radial-gradient(farthest-side at 50% 0, rgb(0 0 0 / 0.09), rgb(0 0 0 / 0)) top / 100% 6px no-repeat,
+    radial-gradient(farthest-side at 50% 100%, rgb(0 0 0 / 0.09), rgb(0 0 0 / 0)) bottom / 100% 6px no-repeat,
+    var(--surface);
+}
+/* Each card answers to its own width, not the window's.
+ 
+   The label gutter is 9.5rem, which is a quarter of a column and a tenth of
+   a page — so the same rule that reads well full-width squeezes the content
+   into a ribbon beside it. A container query lets the card stack its labels
+   when *it* is narrow, whatever the window is doing. */
+.landing-top > .shape { container-type: inline-size; }
+/* Scoped through `.landing-top` so these beat the base rules whatever order
+   the file happens to put them in — the plain `.shape-label` is defined a
+   thousand lines further down, and would otherwise win on cascade order. */
+@container (max-width: 34rem) {
+  .landing-top .shape-line { grid-template-columns: minmax(0, 1fr); gap: 2px; }
+  .landing-top .shape-label { text-align: left; }
+}
+/* Two columns of a schema summary and a work list stop being readable well
+   before the window does — the label column alone is 9.5rem. */
+@media (max-width: 1180px) { .landing-top { grid-template-columns: minmax(0, 1fr); } }
+
+/* The same card as the schema summary beside it — including no margin of its
+   own. It carried `margin-bottom: 16px` from when it was a full-width band
+   below the schema, and that rule sits after the `.landing-top > .shape`
+   reset at equal specificity, so it won: the row stretched both cards to the
+   same box, then this card gave 16px of its box back and ended short. The
+   gap and the row's own margin do the spacing now. */
+.landing-pages .landing-heading { margin-bottom: 12px; }
+
+/* Links on a line, not cards in a grid. Wrapping, so a long list of recent
+   records fills the width it has rather than forcing a scroll. */
+.landing-links { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
+.landing-link {
+  display: inline-flex; align-items: baseline; gap: 6px;
+  padding: 1px 4px; margin: 0 -4px; cursor: pointer;
+  background: none; border: none; border-radius: 2px;
+  font: 12.5px var(--mono); color: var(--link);
+  text-align: left;
+}
+.landing-link:hover { background: var(--accent-soft); color: var(--accent); }
+.landing-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
+.landing-link-detail { color: var(--text-faint); font-size: 11px; }
+.landing-all .landing-page-filter { margin-bottom: 6px; }
+.landing-group + .landing-group { margin-top: 16px; }
+.landing-sub {
+  margin: 0 0 8px;
+  font: 600 10px var(--mono); text-transform: uppercase; letter-spacing: 0.07em;
+  color: var(--text-faint);
+}
+.landing-sub-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
+.landing-sub-row .landing-sub { margin-bottom: 8px; }
+.landing-page-filter {
+  flex: 0 1 14rem; min-width: 8rem;
+  padding: 4px 10px; font: 11.5px var(--mono);
+  background: var(--surface); color: var(--text);
+  border: 1px solid var(--border); border-radius: var(--radius);
+}
+.landing-page-filter:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
+
+/* Scrollable rather than capped: forty pages is where finding one matters
+   more than seeing all of them, and a "+31 more" is a dead end. */
+/* Rows, not a panel: a grey block inside a card is a second card, and the
+   list is short enough that its own border adds nothing but an edge. No
+   height of its own either — the card is the scroller now, and a scroller
+   inside a scroller is two things to fight with. */
+.landing-page-list { max-width: 38rem; }
+.landing-page {
+  display: flex; align-items: baseline; gap: 10px; width: 100%;
+  padding: 6px; margin-left: -6px; text-align: left; cursor: pointer;
+  background: none; border: none; border-bottom: 1px solid var(--border);
+}
+.landing-page:last-child { border-bottom: none; }
+.landing-page:hover { background: var(--accent-soft); }
+.landing-page:hover .landing-page-name { color: var(--accent); }
+.landing-page-name { flex: 1 1 auto; font: 12.5px var(--sans); color: var(--text); }
+.landing-page-base { font: 11px var(--mono); color: var(--text-dim); }
+.landing-page-source { font: 10px var(--mono); color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; }
+.landing-page-list .note { margin: 0; padding: 8px 12px; }
+
+/* The star beside a page's name. Quiet until it means something. */
+.page-pin {
+  padding: 2px 6px; font-size: 14px; line-height: 1;
+  color: var(--text-faint); border-color: transparent; background: none;
+}
+.page-pin:hover { color: var(--text); border-color: var(--border); }
+.page-pin.is-pinned { color: var(--warn); }
+
+.diagram-title { margin: 0 0 14px; font: 600 16px var(--mono); letter-spacing: -0.01em; }
+
+.node-view rect { stroke-dasharray: 4 3; }
+.node.dim { opacity: 0.22; }
+.node.lit rect { stroke: var(--accent); stroke-width: 2; fill: var(--accent-soft); }
+.node.lit text { fill: var(--accent); font-weight: 600; }
+.schema-edges path.dim { opacity: 0.1; }
+@media (prefers-reduced-motion: no-preference) {
+  .node, .schema-edges path { transition: opacity 120ms ease; }
+}
+
+/* With no referring tables there is no second panel, so the fields should
+   use the width rather than leaving a column of nothing beside them. */
+.record-solo { grid-template-columns: minmax(0, 1fr); }
+
+/* ---------- connection picker ---------- */
+
+/* In the top bar now, so it sizes to its content rather than filling a
+   sidebar column: a dropdown stretched across the header would read as a
+   second query bar. Capped, because a connection named after a URL should
+   not push the query bar off the screen. */
+.conn-picker { display: flex; gap: 6px; align-items: center; flex: none; }
+.conn-picker .dd { min-width: 0; max-width: 200px; }
+.conn-picker[hidden] { display: none; }
+.conn-label {
+  font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em;
+  color: var(--text-faint); flex: none;
+}
+
+.field-stack { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
+.field-stack span { font-size: 12px; color: var(--text-dim); }
+
+/* ---------- saved filters ---------- */
+
+.views {
+  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
+  padding: 8px 14px 0;
+}
+/* Saved filters on the left, what the query currently says on the right, with
+   room between them: one is a thing you chose to keep, the other is the state
+   of this moment, and running them together reads as one list of eight things. */
+.views .clause:first-of-type { margin-left: 10px; }
+.view-tab-wrap {
+  display: inline-flex; align-items: stretch;
+  border: 1px solid var(--border); border-radius: 999px;
+  overflow: hidden;
+}
+.view-tab-wrap.active { border-color: var(--accent); background: var(--accent-soft); }
+.view-tab {
+  background: none; border: none; border-radius: 0;
+  color: var(--text-dim); padding: 3px 10px;
+  font: 12px var(--sans); cursor: pointer;
+}
+.views > .view-tab {
+  border: 1px solid var(--border); border-radius: 999px;
+}
+.view-tab[aria-selected="true"] { color: var(--accent); font-weight: 600; }
+.view-tab:hover { color: var(--text); }
+.view-remove {
+  background: none; border: none; border-radius: 0;
+  color: var(--text-faint); cursor: pointer;
+  padding: 3px 7px 3px 2px; font-size: 13px; line-height: 1;
+}
+.view-remove:hover { color: var(--danger); }
+.view-save {
+  background: none; border: 1px dashed var(--border-strong); border-radius: 999px;
+  color: var(--text-dim); padding: 3px 10px; font: 12px var(--sans); cursor: pointer;
+}
+.view-save:hover { border-color: var(--accent); color: var(--accent); border-style: solid; }
+
+/* What the query currently says, one chip per clause.
+ 
+   These had no rules at all: the label and the value ran together as
+   "showingname, country_code", and the remove button fell back to the app's
+   default button — a filled accent square twice the height of the chip it
+   was supposed to sit inside.
+ 
+   Deliberately quieter than a saved view beside it. A saved filter is
+   something you chose to keep; a clause chip is the state of this moment,
+   and it should read as a description of the result with a way off rather
+   than as a control competing with the tabs. */
+.clause {
+  display: inline-flex; align-items: baseline; gap: 5px;
+  padding: 2px 4px 2px 9px;
+  border: 1px solid var(--border); border-radius: 999px;
+  background: var(--surface-2);
+  max-width: 22rem;
+}
+.clause-label {
+  font: 10px var(--mono); text-transform: uppercase; letter-spacing: 0.05em;
+  color: var(--text-faint); flex: none;
+}
+/* The value is the part worth reading, so it gets the room and the ellipsis:
+   a `where` chip on a long `in (...)` list must not push the rest off the
+   row. The full text is on the title. */
+.clause-text {
+  font: 11.5px var(--mono); color: var(--text-dim);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.clause-remove {
+  flex: none;
+  background: none; border: none;
+  padding: 0 5px; border-radius: 999px;
+  font-size: 13px; line-height: 1; cursor: pointer;
+  color: var(--text-faint);
+}
+.clause-remove:hover { color: var(--danger); }
+.clause-remove:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+
+/* ---------- themed listbox ---------- */
+
+.dd { position: relative; }
+
+.dd-button {
+  width: 100%;
+  display: flex; align-items: center; justify-content: space-between; gap: 6px;
+  padding: 5px 8px;
+  font: 12px var(--mono); color: var(--text);
+  background: var(--bg);
+  border: 1px solid var(--border); border-radius: var(--radius);
+  cursor: pointer;
+}
+.dd-button:hover { border-color: var(--border-strong); }
+.dd-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dd-caret { color: var(--text-faint); font-size: 10px; flex: none; }
+
+.dd-list {
+  /* Positioned in the viewport by dropdown.js on open; these are the
+     fallback values for the moment before that runs. */
+  position: fixed; z-index: 40; top: 0; left: 0;
+  min-width: 100%; max-width: 22rem; max-height: 18rem; overflow-y: auto;
+  background: var(--surface);
+  border: 1px solid var(--border-strong); border-radius: 8px;
+  /* The one place a shadow earns its keep: a popover has to read as floating
+     above the page rather than punched into it. */
+  box-shadow: 0 6px 20px rgb(0 0 0 / 0.16);
+  padding: 4px;
+}
+.dd-list[hidden] { display: none; }
+@media (prefers-reduced-motion: no-preference) {
+  .dd-list {
+    /* From the trigger, not the centre, so the menu reads as coming out of
+       the thing that opened it. Never scale(0) — nothing in the real world
+       appears from nothing. */
+    transform-origin: top left;
+    transition: opacity var(--t-popover) var(--ease-out), transform var(--t-popover) var(--ease-out);
+    @starting-style { opacity: 0; transform: scale(0.96) translateY(-4px); }
+  }
+}
+
+.dd-option {
+  display: flex; align-items: flex-start; gap: 6px;
+  padding: 5px 7px; border-radius: 5px;
+  cursor: pointer;
+}
+.dd-option.active { background: var(--surface-2); }
+.dd-option.selected .dd-label { color: var(--accent); font-weight: 600; }
+.dd-option.disabled { opacity: 0.5; cursor: default; }
+.dd-check { width: 0.9em; flex: none; color: var(--accent); font-size: 11px; line-height: 1.5; }
+.dd-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
+.dd-label { font: 12.5px var(--mono); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dd-detail { font: 11px var(--mono); color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dd-badge {
+  flex: none; align-self: center;
+  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.05em;
+  color: var(--text-dim); background: var(--surface-2);
+  border-radius: 3px; padding: 1px 5px;
+}
+.dd-option.tone-error .dd-label { color: var(--danger); }
+.dd-option.tone-error .dd-detail::after { content: " · unreachable"; color: var(--danger); }
+.dd-divider { height: 1px; background: var(--border); margin: 4px 2px; }
+.dd-action .dd-label { color: var(--text-dim); font-family: var(--sans); font-size: 12px; }
+.dd-action:hover .dd-label { color: var(--accent); }
+
+/* ---------- pending edits ---------- */
+
+.pending {
+  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
+  padding: 8px 12px;
+  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
+  border-bottom: 1px solid var(--border);
+}
+.pending-count { font-size: 12.5px; font-weight: 600; color: var(--danger); }
+.pending-cols {
+  flex: 1; min-width: 0;
+  font: 11.5px var(--mono); color: var(--text-dim);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.pending button { padding: 4px 10px; font-size: 12px; }
+
+.cell-edit.dirty {
+  border-color: var(--danger);
+  background: color-mix(in srgb, var(--danger) 7%, var(--bg));
+}
+
+.confirm-wide { max-width: 42rem; }
+.confirm-diff td { padding: 3px 8px 3px 0; vertical-align: baseline; }
+.diff-col { font: 12.5px var(--mono); color: var(--text); }
+.diff-from { color: var(--text-dim); text-decoration: line-through; }
+.diff-arrow { color: var(--text-faint); padding: 0 4px; }
+.diff-to { color: var(--text); font-weight: 600; }
+.confirm-diff .null { font-style: italic; text-decoration: none; color: var(--text-faint); }
+.diff-type { color: var(--text-faint); font: 10.5px var(--mono); margin-left: 7px; }
+
+/* The table a row crumb belongs to, shown only when the walk changed table.
+
+   No punctuation between the table and the label. The trail already uses a
+   chevron to separate crumbs, and a second separator inside a crumb competes
+   with it — `work_order › WO-100002 › customer · Blackwood Joinery` reads as
+   four things at one level rather than three, one of which is qualified.
+   Size and colour do the binding instead: the table is smaller, lighter and
+   sits on the baseline as a qualifier, the label carries the weight. */
+.crumb-table {
+  /* --text-dim, not --text-faint: faint carries 50% alpha, which at this
+     size disappears rather than recedes. The qualifier has to be readable —
+     it is the answer to "what am I looking at" — it just should not compete
+     with the label. Size and weight do that; opacity was doing too much. */
+  color: var(--text-dim);
+  font-size: 11.5px;
+  margin-right: 5px;
+}
+.crumbs button:hover .crumb-table { color: var(--text); }
+
+/* Two states can apply to the same row and they must not look alike: the
+   table you are *on*, and the row Enter would open. Before this they were a
+   soft tint and a slightly different soft tint, so arrowing through the list
+   left you unable to tell which one was armed.
+
+   The keyboard highlight wins outright wherever both apply — it describes
+   what is about to happen, which matters more than what already has. */
+/* One indicator, used for both "this is the table you are looking at" and
+   "this is where the keyboard is". They are the same row almost all the time,
+   and giving the current table a fainter version of the same treatment made
+   the strong one read as a different kind of thing rather than as the same
+   thing with focus. */
+#table-list button[aria-current="true"],
+#table-list button.active {
+  background: var(--accent-soft);
+  color: var(--accent);
+  box-shadow: inset 3px 0 0 var(--accent);
+}
+
+/* The highlight *is* the focus indicator here.
+
+   Now that arrowing moves real focus, the browser's ring was drawn on top of
+   a row that already said it was the current one — two selection treatments
+   on one row, one of them a heavy outlined rectangle. The lightweight
+   indicator was doing the job; the ring only appears on a row that has focus
+   without being the highlighted one, which cannot happen. */
+#table-list button:focus-visible {
+  outline: none;
+  background: var(--accent-soft);
+  color: var(--accent);
+  box-shadow: inset 3px 0 0 var(--accent);
+}
+/* While the cursor is away from the table on screen, the on-screen table's
+   marker steps back to a whisper. One "you are here" at a time: during a
+   quick run down the list the debounced preview lags the cursor, and both
+   rows wearing the full treatment reads as two tables selected. */
+#table-list.skimming button[aria-current="true"]:not(.active) {
+  background: none;
+  color: inherit;
+  box-shadow: inset 3px 0 0 var(--border-strong);
+}
+
+/* Names what the highlight means, so the affordance does not have to be
+   inferred from a colour. */
+/* Only on a row you have not opened yet. On the table already on screen,
+   "press Enter" would be an instruction to do what has been done. */
+#table-list button.active:not([aria-current="true"])::after {
+  content: "↵";
+  margin-left: auto;
+  padding-left: 8px;
+  color: var(--accent);
+  font-size: 11px;
+}
+
+/* The new-row form: the schema as a column of labelled boxes. */
+.insert-dialog { max-width: 34rem; width: calc(100vw - 48px); }
+.insert-lede { margin: 4px 0 12px; font-size: 12.5px; color: var(--text-dim); }
+.insert-fields {
+  display: grid; gap: 8px; max-height: 55vh; overflow-y: auto; padding-right: 4px;
+}
+.insert-field { display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr; gap: 10px; align-items: center; }
+.insert-field label { font: 12.5px var(--mono); color: var(--text); overflow-wrap: anywhere; }
+.insert-field .type { margin-left: 6px; color: var(--text-faint); font-size: 10.5px; }
+.insert-input {
+  padding: 5px 8px; font: 13px var(--mono);
+  background: var(--surface); color: var(--text);
+  border: 1px solid var(--border); border-radius: 6px; min-width: 0;
+}
+.insert-input:focus { outline: none; border-color: var(--accent); }
+.insert-problem { margin: 10px 0 0; color: var(--danger); font-size: 12.5px; }
+@media (max-width: 700px) {
+  .insert-field { grid-template-columns: 1fr; gap: 2px; }
+}
+
+/* A field that just landed. Green for a couple of seconds, then gone — a
+   confirmation you have to dismiss is a confirmation you learn to ignore. */
+.cell-edit.saved {
+  border-color: var(--accent);
+  background: var(--accent-soft);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .cell-edit { transition: border-color 160ms ease, background 160ms ease; }
+}
+
+/* ---------- query autocomplete ---------- */
+
+.querybar { position: relative; }
+.ac {
+  position: absolute; z-index: 30; top: calc(100% + 4px); left: 0;
+  min-width: 22rem; max-width: 34rem; max-height: 19rem; overflow-y: auto;
+  background: var(--surface);
+  border: 1px solid var(--border-strong); border-radius: 8px;
+  box-shadow: 0 6px 20px rgb(0 0 0 / 0.16);
+  padding: 4px;
+}
+.ac[hidden] { display: none; }
+@media (prefers-reduced-motion: no-preference) {
+  .ac {
+    transform-origin: top left;
+    transition: opacity var(--t-popover) var(--ease-out), transform var(--t-popover) var(--ease-out);
+    @starting-style { opacity: 0; transform: scale(0.97) translateY(-4px); }
+  }
+}
+.ac-item {
+  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
+  padding: 4px 8px; border-radius: 5px; cursor: pointer;
+}
+.ac-item:hover, .ac-item.active { background: var(--surface-2); }
+/* A Shift-extended run, where the clause takes a list. Accented rather than
+   grey so the range is distinguishable from the cursor sitting on one item —
+   the two states look identical if both are just "shaded". */
+.ac-item.picked { background: var(--accent-soft); color: var(--accent); }
+.ac-item.picked .ac-detail { color: var(--accent); opacity: 0.7; }
+.ac-item.picked.active { box-shadow: inset 2px 0 0 var(--accent); }
+.ac-label { font: 12.5px var(--mono); color: var(--text); }
+.ac-detail { font: 11px var(--mono); color: var(--text-dim); flex: none; }
+/* Kind is carried by colour on the label, so the list scans by category
+   without needing a column of icons. */
+.kind-table .ac-label { color: var(--accent); }
+.kind-op .ac-label { color: var(--key); }
+.kind-kw .ac-label { color: var(--warn); }
+.kind-value .ac-label { color: var(--link); }
+
+/* Virtualised rows: the spacers are layout only and must never be styled as
+   content, or the striping and hover follow them. */
+.virtual-spacer, .virtual-spacer:hover { background: none; cursor: default; }
+.virtual-note { color: var(--text-faint); font-size: 11.5px; padding: 8px 14px 0; }
+
+/* ---------- children on the record page ----------
+
+   The Referenced-by panel is the index — counts, and a way to jump. These are
+   the data. A record that says "5 parts" and makes you click to see them is
+   answering a question nobody asked; reading them is usually why the record
+   was opened. */
+
+.record-children {
+  grid-column: 1 / -1;
+  border-top: 1px solid var(--border);
+}
+/* The relationship index, in its own column.
+
+   It spent a while as a horizontal strip under the record, which put the list
+   of what a row connects to below a screenful of fields — so finding out what
+   a record relates to meant scrolling past the record. A column keeps it in
+   view, and a vertical list has room for a dozen relationships where a tab
+   strip wraps to three rows. */
+
+/* Stays in view while the record scrolls.
+
+   It is a navigator, not part of the record, and a navigator that scrolls
+   away leaves you paging back up to change what you are looking at. Anchored
+   to the top of the grid rather than stretched, so `position: sticky` has a
+   box shorter than the scroller to stick within. */
+.related-panel {
+  display: flex; flex-direction: column;
+  position: sticky; top: 0; align-self: start;
+  max-height: 100vh; overflow-y: auto;
+}
+.related-list { display: flex; flex-direction: column; padding: 6px 0; }
+/* The rail's own header, which is the panel heading plus one control.
+ 
+   `.panel > h3` styles a heading that *is* the header; here the heading is
+   inside one, so the sticky, the ground and the rule move out to the wrapper
+   and the h3 keeps only its type. Without that the header scrolls away and
+   the list runs under the trail above it. */
+.related-head {
+  display: flex; align-items: center; gap: 8px;
+  padding: 4px 14px 4px;
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+  position: sticky; top: 0; z-index: 1;
+}
+.related-head > h3 {
+  margin: 0; padding: 6px 0;
+  font: 600 10.5px var(--sans); text-transform: uppercase; letter-spacing: 0.09em;
+  color: var(--text-dim);
+}
+/* Quiet until wanted: the list is what the rail is for, and the control that
+   shortens it should not compete with the first row of it. */
+.related-empties {
+  margin-left: auto; flex: none;
+  padding: 2px 7px; font: 10px var(--mono);
+  color: var(--text-faint); border-color: transparent; background: none;
+}
+.related-empties:hover { color: var(--accent); border-color: var(--border); }
+.related-list.hide-empty .related-item.empty { display: none; }
+
+
+
+/* Pushed to the far end of the trail, where it is out of the way of reading
+   the trail itself but lands under the cursor after a click on the last
+   crumb. */
+.crumbs .crumb-back {
+  margin-left: auto;
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 3px 10px; border-radius: 5px;
+  font: 11.5px var(--mono); color: var(--text-dim);
+  background: none; border: 1px solid var(--border); cursor: pointer;
+}
+.crumbs .crumb-back:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
+
+.related-item {
+  display: grid; grid-template-columns: minmax(2.4rem, auto) 1fr;
+  align-items: center; gap: 12px;
+  /* A grid inside a <button> inherits the UA stylesheet's centring, which
+     sizes each row to its own content and then centres it — so a row with a
+     shorter table name sat further right than the one under it. Every row
+     starts at the same edge whether it has rows behind it or not. */
+  width: 100%; justify-content: start;
+  background: none; border: none; border-radius: 0;
+  border-left: 2px solid transparent;
+  padding: 9px 14px; text-align: left; cursor: pointer;
+}
+.related-item:hover:not([disabled]) { background: var(--accent-soft); }
+.related-item[aria-selected="true"] {
+  background: var(--accent-soft);
+  border-left-color: var(--accent);
+}
+.related-item[disabled] { cursor: default; opacity: 0.55; }
+
+.related-count {
+  font: 600 16px var(--mono); color: var(--accent);
+  font-variant-numeric: tabular-nums; text-align: right;
+  letter-spacing: -0.02em;
+}
+.related-item.empty .related-count { color: var(--text-faint); font-weight: 400; }
+.related-names { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
+.related-table {
+  font: 12.5px var(--mono); color: var(--text);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.related-item.empty .related-table { color: var(--text-dim); }
+.related-via {
+  font: 10.5px var(--mono); color: var(--text-faint);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+
+/* Separated by space and its own heading rather than a rule. On a
+   four-field record a border here was the third horizontal line in a page
+   with almost nothing in it, which reads as fragments rather than a record. */
+.record-children { grid-column: 1 / -1; margin-top: 10px; }
+
+/* Room to breathe at the end. Content ending flush against the bottom edge
+   reads as cut off rather than finished, and on a scrolled page there is no
+   signal that you have reached the end of it. */
+.record { padding-bottom: 64px; }
+.record .panel { padding-bottom: 12px; }
+
+/* A record has a measure; a table does not.
+
+   On a wide window with the table list hidden, a four-field record was spread
+   across two thousand pixels — the label at one edge and its value at the
+   other, with the eye having to travel the whole way to pair them. Capped and
+   centred, the pairs stay together. Tables are left alone: columns of data
+   genuinely want every pixel, and a table is scanned down rather than read
+   across. */
+.record {
+  width: 100%;
+  max-width: 1500px;
+  margin-inline: auto;
+}
+
+.record-child-head {
+  display: flex; align-items: baseline; gap: 10px;
+  padding: 12px 14px 6px;
+}
+.record-child-head h3 {
+  margin: 0;
+  font: 600 10.5px var(--sans); text-transform: uppercase; letter-spacing: 0.09em;
+  color: var(--text-dim);
+}
+.record-child-via { font: 10.5px var(--mono); color: var(--text-faint); }
+.record-child-head button { margin-left: auto; padding: 3px 10px; font-size: 11.5px; }
+
+/* Embedded grids sit tighter than the main one: they are a supporting detail
+   on a page, not the thing being read. */
+/* Embedded tables read at the same size as the ones on their own page.
+
+   They were shrunk on the theory that a table inside a record is secondary.
+   It is not — a work order's parts are the reason the record was opened, and
+   setting them two points smaller than the same rows in a table view says the
+   opposite. The only thing an embedded table gives up is the surrounding
+   chrome. */
+.grid-compact table { font-size: inherit; }
+
+.child-pager {
+  display: flex; align-items: center; gap: 8px;
+  padding: 10px 2px 0;
+}
+.child-range {
+  margin-right: auto;
+  font-size: 11px; color: var(--text-dim);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ---------- record layout builder ---------- */
+
+.record-heading { display: flex; align-items: center; gap: 10px; }
+.record-layout {
+  margin-left: auto; padding: 3px 10px; font-size: 11px;
+  display: inline-flex; align-items: center; gap: 7px;
+}
+.record-layout.is-custom { border-color: var(--accent); color: var(--accent); }
+.record-layout-name {
+  padding-left: 7px; border-left: 1px solid var(--border);
+  color: var(--text-dim); max-width: 12rem;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+
+/* The layout's own name, edited in place in the builder's header. */
+.tpl-title { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
+.tpl-eyebrow {
+  font: 10px var(--mono); text-transform: uppercase; letter-spacing: 0.07em;
+  color: var(--text-faint);
+}
+.tpl-name {
+  flex: 1 1 8rem; min-width: 6rem;
+  padding: 2px 6px; margin: 0 -6px;
+  border: 1px solid transparent; border-radius: 5px;
+  background: none; color: var(--text);
+  font: 600 15px var(--mono); letter-spacing: -0.01em;
+}
+.tpl-name:hover { border-color: var(--border); }
+.tpl-name:focus { outline: none; border-color: var(--accent); background: var(--bg); }
+.tpl-for { font: 11px var(--mono); color: var(--text-faint); }
+
+/* A drawer, not an overlay.
+
+   The builder used to cover the screen, which meant configuring a record
+   layout while unable to see the record. Every change had to be committed
+   before it could be judged. As a drawer the record stays beside it and
+   re-renders on every toggle, so the preview is the actual page rather than
+   a representation of it. */
+.tpl {
+  position: fixed; top: 0; right: 0; bottom: 0; z-index: 60;
+  width: min(420px, 42vw);
+  background: var(--surface);
+  border-left: 1px solid var(--border-strong);
+  box-shadow: -8px 0 24px rgb(0 0 0 / 0.10);
+  display: flex; flex-direction: column;
+}
+/* The page gives up the width rather than being covered by it. */
+body.editing-layout .layout { padding-right: min(420px, 42vw); }
+
+.tpl-head {
+  padding: 14px 16px 12px;
+  border-bottom: 1px solid var(--border);
+  display: flex; flex-direction: column; gap: 6px;
+}
+.tpl-head h2 { margin: 0; font: 600 13.5px var(--sans); letter-spacing: -0.01em; }
+.tpl-lede { margin: 0; color: var(--text-dim); font-size: 12px; line-height: 1.45; }
+.tpl-head-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
+.tpl-head-actions button { padding: 5px 10px; font-size: 12px; }
+
+.tpl-body { flex: 1; overflow-y: auto; padding: 12px 14px 32px; }
+
+.tpl-section { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; background: var(--bg); }
+.tpl-section.off { opacity: 0.55; }
+.tpl-section-head {
+  display: flex; align-items: center; gap: 10px;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--border);
+}
+.tpl-section.off .tpl-section-head { border-bottom: none; }
+.tpl-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; }
+.tpl-section-name { font: 600 12.5px var(--sans); color: var(--text); }
+.tpl-section-kind { font: 10.5px var(--mono); color: var(--text-faint); }
+.tpl-section-actions { margin-left: auto; display: flex; gap: 2px; }
+.tpl-move {
+  background: none; border: none; border-radius: 4px;
+  color: var(--text-dim); cursor: pointer; padding: 3px 7px; font-size: 11px;
+}
+.tpl-move:hover:not([disabled]) { color: var(--accent); background: var(--accent-soft); }
+.tpl-move[disabled] { color: var(--text-faint); cursor: default; }
+
+/* The shared arranger (page.css, `.pb-*`) inside a layout card.
+
+   It is drawn there to hang off a builder row — no top border, its own tint,
+   rounded at the bottom only — and a card already provides all three. So it
+   keeps its contents and gives up its box. */
+.tpl-section .pb-panel {
+  margin: 0; padding: 8px 10px 10px;
+  background: none; border: none; border-radius: 0;
+}
+.tpl-section .pb-arrange { max-height: none; }
+
+.tpl-rows {
+  display: flex; align-items: center; gap: 8px;
+  padding: 4px 12px 12px; font-size: 12px; color: var(--text-dim);
+}
+.tpl-rows input {
+  width: 4.5rem; padding: 4px 8px;
+  font: 12px var(--mono); color: var(--text);
+  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
+}
+
+/* ---------- agent console ---------- */
+
+.agent-body { display: grid; grid-template-columns: 15rem 1fr; gap: 26px; padding-top: 18px; }
+.agent-tools { display: flex; flex-direction: column; gap: 2px; align-self: start; }
+.agent-tool {
+  display: flex; align-items: center; justify-content: space-between; gap: 8px;
+  padding: 6px 10px; border: none; background: none; border-radius: 6px;
+  font: 13px var(--mono); color: var(--text); cursor: pointer; text-align: left;
+}
+.agent-tool:hover { background: var(--surface-2); }
+.agent-tool.active { background: var(--accent-soft); color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
+.agent-badge {
+  font: 600 9.5px var(--mono); letter-spacing: 0.05em; text-transform: uppercase;
+  padding: 1px 6px; border-radius: 8px; border: 1px solid var(--border);
+  color: var(--text-dim);
+}
+.agent-badge.tone-ok { color: var(--accent); border-color: var(--accent-soft); }
+.agent-badge.tone-warn { color: var(--warn); }
+.agent-badge.tone-bad { color: var(--danger); }
+.agent-desc-row { display: flex; align-items: center; gap: 8px; }
+.agent-desc-row h3 { margin: 0; font: 600 15px var(--mono); }
+.agent-desc { margin: 6px 0 14px; max-width: 68ch; font-size: 12.5px; color: var(--text-dim); }
+.agent-field { display: grid; grid-template-columns: 10rem 1fr; gap: 10px; align-items: start; margin-bottom: 8px; max-width: 44rem; }
+.agent-field label { font: 12.5px var(--mono); padding-top: 6px; }
+.agent-field label .req { margin-left: 6px; }
+.agent-input {
+  padding: 5px 8px; font: 13px var(--mono);
+  background: var(--surface); color: var(--text);
+  border: 1px solid var(--border); border-radius: 6px; min-width: 0; width: 100%;
+}
+.agent-input:focus { outline: none; border-color: var(--accent); }
+.agent-run-row { margin: 10px 0 16px; }
+.agent-stats { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
+.agent-answer {
+  margin: 0; padding: 14px 16px; overflow: auto; max-height: 46vh;
+  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
+  font: 12px/1.55 var(--mono); color: var(--text);
+}
+.agent-answer-error { color: var(--danger); border-color: var(--danger); }
+.agent-error { color: var(--danger); font: 12.5px var(--mono); }
+.agent-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
+.agent-transcript { margin-top: 22px; border-top: 1px solid var(--border); padding-top: 10px; }
+.agent-transcript h4 { margin: 0 0 6px; font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }
+.agent-past {
+  display: flex; gap: 12px; align-items: baseline; width: 100%;
+  padding: 4px 8px; border: none; background: none; border-radius: 6px;
+  font: 12px var(--mono); color: var(--text-dim); cursor: pointer; text-align: left;
+}
+.agent-past:hover { background: var(--surface-2); }
+.agent-past-tool { color: var(--text); font-weight: 600; flex: none; }
+.agent-past-args { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.agent-past-cost { margin-left: auto; flex: none; color: var(--text-faint); }
+@media (max-width: 800px) {
+  .agent-body { grid-template-columns: 1fr; }
+  .agent-tools { flex-direction: row; flex-wrap: wrap; }
+  .agent-field { grid-template-columns: 1fr; gap: 2px; }
+}
+
+/* ---------- connection manager ---------- */
+
+/* A place, not a dropdown. Full-screen because managing connections is a task
+   you finish and leave rather than something you do in passing. */
+.conn-manager {
+  position: fixed; inset: 0; z-index: 80;
+  background: var(--bg);
+  overflow-y: auto;
+}
+.conn-inner { max-width: 1040px; margin: 0 auto; padding: 34px 26px 60px; }
+
+.conn-head {
+  display: flex; align-items: flex-start; gap: 20px;
+  padding-bottom: 18px;
+  border-bottom: 1px solid var(--border);
+}
+.diagram-scope { font-size: 11px; padding: 1px 8px; }
+
+.conn-brand { display: flex; align-items: center; gap: 7px; margin-bottom: 14px; }
+.conn-brand-name { font: 600 13px var(--mono); letter-spacing: -0.01em; color: var(--text-dim); }
+.conn-head h2 { margin: 0 0 4px; font: 600 19px var(--mono); letter-spacing: -0.015em; }
+.conn-lede { margin: 0; font-size: 12.5px; color: var(--text-dim); max-width: 46ch; }
+.conn-head-actions { margin-left: auto; display: flex; gap: 8px; flex: none; }
+
+.conn-manage {
+  flex: none; display: inline-flex; align-items: center; justify-content: center;
+  width: 28px; height: 28px; line-height: 1;
+  background: none; border: 1px solid transparent; border-radius: 6px;
+  color: var(--text-dim); cursor: pointer;
+}
+.conn-manage:hover { color: var(--text); border-color: var(--border); background: var(--surface-2); }
+
+.conn-toolbar { display: flex; align-items: center; gap: 12px; padding: 16px 0 8px; }
+.conn-filter {
+  flex: 1; max-width: 22rem; padding: 6px 10px;
+  border: 1px solid var(--border); border-radius: 6px;
+  background: var(--surface); color: var(--text);
+  font: 12.5px var(--mono);
+}
+.conn-filter:focus { outline: none; border-color: var(--accent); }
+.conn-count { font: 11px var(--mono); color: var(--text-faint); }
+
+/* One connection, one line.
+
+   Cards were legible and did not scale: at 170px each, fifty connections is
+   eight thousand pixels of scrolling to find one name. Nothing was dropped to
+   get to forty — what moved is the actions, which are the same four on every
+   row and so do not need fifty permanent copies. */
+.conn-list { display: flex; flex-direction: column; }
+
+.conn-row {
+  display: grid;
+  grid-template-columns: 8px minmax(8rem, auto) minmax(0, 1fr) auto 6rem auto;
+  align-items: center; gap: 14px;
+  padding: 9px 12px;
+  border-bottom: 1px solid var(--border);
+  cursor: pointer;
+}
+.conn-row:hover { background: var(--surface); }
+.conn-row.cursor, .conn-row:focus-visible {
+  outline: none;
+  background: var(--accent-soft);
+  box-shadow: inset 3px 0 0 var(--accent);
+}
+.conn-row.active { background: var(--accent-soft); }
+.conn-row.failed { background: color-mix(in srgb, var(--danger) 5%, transparent); }
+
+/* State as a dot: three values that need to be scannable down a column of
+   fifty, where a word would be read fifty times. The word is still there at
+   the end of the row for anyone who wants it. */
+.conn-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); }
+.conn-dot.ok { background: var(--accent); }
+.conn-dot.bad { background: var(--danger); }
+.conn-dot.idle { background: var(--border-strong); }
+/* Reading a schema is a wait worth showing: a Postgres catalog query across
+   sixty tables takes long enough to notice, and a remote database much
+   longer. */
+.conn-dot.busy { background: var(--key); animation: conn-pulse 1s ease-in-out infinite; }
+@keyframes conn-pulse { 50% { opacity: 0.25; } }
+@media (prefers-reduced-motion: reduce) { .conn-dot.busy { animation: none; } }
+
+.conn-name { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
+.conn-name-text {
+  font: 13px var(--mono); color: var(--text);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.conn-row.active .conn-name-text { color: var(--accent); font-weight: 600; }
+
+.conn-detail {
+  font: 11.5px var(--mono); color: var(--text-faint);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.conn-meta { display: flex; gap: 5px; flex: none; }
+.conn-badge {
+  padding: 1px 6px; border-radius: 999px;
+  border: 1px solid var(--border); color: var(--text-faint);
+  font: 9.5px var(--mono); text-transform: uppercase; letter-spacing: 0.05em;
+  white-space: nowrap;
+}
+.conn-badge.current { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
+.conn-badge.source-session { border-color: var(--key); color: var(--key); }
+/* A boundary, not a status: coloured like the other warnings so it reads as
+   a fact about what this connection will do rather than a label. */
+.conn-badge.shape-only { border-color: var(--warn, var(--key)); color: var(--warn, var(--key)); }
+
+.conn-status { font: 11px var(--mono); text-align: right; }
+.conn-status.ok { color: var(--text-dim); }
+.conn-status.bad { color: var(--danger); }
+.conn-status.idle { color: var(--text-faint); }
+.conn-status.busy { color: var(--key); }
+
+/* Revealed on approach. Kept in the layout at all times so the row does not
+   reflow when they appear — only their visibility changes. */
+.conn-actions { display: flex; gap: 4px; flex: none; visibility: hidden; }
+.conn-row:hover .conn-actions,
+.conn-row:focus-within .conn-actions,
+.conn-row.cursor .conn-actions { visibility: visible; }
+.conn-action {
+  padding: 3px 8px; border-radius: 5px;
+  background: none; border: 1px solid var(--border);
+  color: var(--text-dim); cursor: pointer;
+  font: 11px var(--mono); white-space: nowrap;
+}
+.conn-action:hover { color: var(--accent); border-color: var(--accent); background: var(--surface); }
+/* The action becomes a label while it runs, so it cannot be pressed twice and
+   the row does not change width when it does. */
+.conn-action.working { border-color: transparent; color: var(--key); cursor: default; }
+/* Kept visible while working even without a hover, or the row would go quiet
+   the moment the pointer left it. */
+.conn-row.busy .conn-actions { visibility: visible; }
+.conn-remove { color: var(--danger); }
+.conn-remove:hover { color: var(--danger); border-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
+
+/* The reason a row is red, under it. A one-line list has nowhere else to put
+   an error, and an error hidden in a tooltip is an error nobody reads. */
+.conn-error, .conn-warning {
+  grid-column: 2 / -1;
+  margin: 2px 0 4px; font: 11.5px var(--mono);
+}
+.conn-error { color: var(--danger); }
+.conn-warning { color: var(--key); }
+
+.conn-note {
+  margin-top: 26px; padding-top: 18px;
+  border-top: 1px solid var(--border);
+  font-size: 12px; color: var(--text-dim);
+}
+.conn-note p { margin: 0 0 8px; }
+.conn-note ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
+.conn-note li { font-family: var(--mono); font-size: 11.5px; color: var(--text-faint); }
+
+/* ---------- deleting a row ---------- */
+
+.record-delete { color: var(--danger); font-size: 11px; padding: 3px 10px; }
+.record-delete:hover { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
+
+/* The impact report. Each line leads with the consequence rather than the
+   count, because "3 rows in invoice_line" is not an answer to "what happens if
+   I delete this" and "3 rows will be deleted too" is. */
+.delete-impact { margin: 10px 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
+.delete-impact li {
+  display: flex; align-items: baseline; gap: 10px;
+  padding: 7px 10px; border-radius: 6px;
+  border-left: 3px solid var(--border);
+  background: var(--surface-2);
+  font: 12px/1.5 var(--mono);
+}
+.impact-what { flex: 1; }
+.impact-rule { font-size: 10px; color: var(--text-faint); white-space: nowrap; }
+/* Three tones for three outcomes, so the shape of the answer reads before the
+   words do. */
+.impact-bad { border-left-color: var(--danger); }
+.impact-bad .impact-what { color: var(--danger); }
+.impact-warn { border-left-color: var(--key); }
+.impact-stop { border-left-color: var(--text-dim); }
+.impact-unknown { border-left-color: var(--text-faint); }
+
+.delete-note, .delete-blocked {
+  margin: 10px 0 0; font-size: 11.5px; color: var(--text-dim); line-height: 1.5;
+}
+.delete-blocked { color: var(--key); }
+.delete-confirm { max-width: 34rem; }
+
+/* A toast can carry one thing to do about it — see `toast` in core.js. */
+.toast { display: flex; align-items: center; gap: 12px; }
+/* Restores what `display: flex` took away.
+ 
+   `hidden` is how core.js dismisses a toast, and it works by way of the user
+   agent's `[hidden] { display: none }` — which any `display` declaration in a
+   stylesheet outranks. So every toast was hidden in the accessibility tree,
+   still on screen, and stayed there until the next one replaced it. */
+.toast[hidden] { display: none; }
+.toast-action {
+  flex: none; padding: 3px 10px; border-radius: 5px;
+  background: none; border: 1px solid currentColor;
+  color: inherit; cursor: pointer; font: 11.5px var(--mono);
+}
+.toast-action:hover { background: color-mix(in srgb, currentColor 15%, transparent); }
+
+/* ---------- a row's children, opened in place ---------- */
+
+.expander-cell { width: 1.9rem; padding-left: 10px; padding-right: 0; }
+.expander {
+  padding: 0 4px; line-height: 1;
+  background: none; border: none;
+  color: var(--text-faint); cursor: pointer;
+  font-size: 10px;
+}
+.expander:hover { color: var(--accent); }
+tr.expanded .expander { color: var(--accent); }
+/* The row stays visibly attached to what it opened. */
+tr.expanded > td { border-bottom-color: transparent; background: var(--accent-soft); }
+
+.detail-row > td { padding: 0; background: var(--surface-2); }
+.detail-cell {
+  padding: 12px 16px 16px 34px !important;
+  border-bottom: 1px solid var(--border-strong);
+  /* Its own scroll, so a wide child table does not widen the parent — every
+     column of which would then be laid out around data it has nothing to do
+     with. */
+  max-width: 100%;
+}
+.detail-section + .detail-section { margin-top: 16px; }
+.detail-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
+.detail-head h4 {
+  margin: 0; font: 600 11px var(--mono);
+  text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim);
+}
+.detail-via { font: 10px var(--mono); color: var(--text-faint); }
+.detail-count {
+  font: 11px var(--mono); color: var(--accent);
+  font-variant-numeric: tabular-nums;
+}
+/* Beside the count, not banished to the far right.
+ 
+   `margin-left: auto` pushed it to the edge of a full-width head, which was
+   fine when the child table underneath was also full width. Now that a child
+   table is only as wide as it needs, a "See all" a thousand pixels to the
+   right of the last column belongs to nothing the eye can see — it reads as
+   page furniture rather than as this section's control. */
+.detail-all { margin-left: 4px; font-size: 11px; padding: 2px 8px; }
+/* The inner grid keeps its own inset rather than inheriting the page's. */
+.detail-cell .table-wrap { padding: 0; }
+/* The child's width must not reach the parent.
+ 
+   A table sized to its contents inside a cell with `colspan` hands its
+   preferred width *up*: a thirteen-column child made the outer table 2834px
+   wide and put a horizontal scrollbar on the whole page. `contain:
+   inline-size` sizes this box from its parent as though it had no contents,
+   so a wide child scrolls inside its own strip and the result above it stays
+   where it was. */
+.detail-cell .table-wrap { contain: inline-size; }
+
+/* A child table is as wide as its contents, not as wide as the window.
+ 
+   `width: 100%` is right for the result you asked for and wrong for a table
+   nested inside it: six narrow columns stretched across seventeen hundred
+   pixels put `ID` in the middle of the row with nothing either side of it,
+   and four such tables under one row each spread their columns to different
+   places. Sized to content they pack left, start at the same edge, and read
+   as a group of small tables rather than as four sparse ones.
+ 
+   Wider than the container is still possible — a child with twenty columns —
+   and `.table-wrap` already scrolls, which is what the outer table does too. */
+/* As wide as its contents, but never wider than the row it sits in.
+ 
+   `width: auto` alone let a thirteen-column child sprawl to nearly three
+   thousand pixels, giving every expanded row its own horizontal scrollbar to
+   fight. The cap brings the wide ones back to the container, where their
+   columns compress exactly as a top-level result's do, and leaves the narrow
+   ones — the common case, and the one that looked scattered — at their own
+   width. */
+.detail-cell table { width: auto; max-width: 100%; }
+/* Tighter than the 30rem a top-level result allows. A description column that
+   takes half the width of a nested table is the same spreading problem in one
+   column instead of all of them. */
+.detail-cell th, .detail-cell td { max-width: 18rem; }
+
+/* A child table's header is not a peer of the page's.
+ 
+   Both were `--surface` on `--border-strong`, so a nested header read as
+   another top-level one and the two competed for the same rank — worst where
+   an expanded row sits directly under the real header and the eye has to work
+   out which columns belong to which table. The inner one takes the tinted
+   ground it is sitting on and a hairline in the ordinary border colour: still
+   legibly a header, plainly the quieter of the two. */
+.detail-cell thead th {
+  /* A step away from the ground it sits on, not the same colour as it.
+  
+     Plain `--surface-2` *is* the expanded row's background, so the header
+     dissolved into its own container and the child table lost its top edge.
+     Mixed toward the text colour instead, which darkens it in the light
+     theme and lightens it in the dark one — a raised strip either way, and
+     one step quieter than the page's own header rather than level with it. */
+  background: color-mix(in srgb, var(--text) 7%, var(--surface-2));
+  border-bottom: 1px solid var(--border-strong);
+  color: var(--text-dim);
+  font-size: 10.5px;
+}
+.detail-cell thead th.sorted { color: var(--accent); border-bottom-color: var(--accent); }
+/* Sticky belongs to the page's header, not to a table nested three rows down:
+   an inner header pinning itself to the top of the scroller detaches from the
+   rows it names. */
+.detail-cell thead th { position: static; }
+.detail-cell .pinned { background: color-mix(in srgb, var(--text) 7%, var(--surface-2)); }
+
+/* ---------- what is in this database ---------- */
+
+/* Barely rounded. A 10px radius on a card full of monospace tables reads as
+   a decade-old dashboard; the tabs went square for the same reason, and a
+   hairline of curvature is enough to say "card" without saying "widget". */
+/* Room to breathe. Twelve pixels of padding around eleven lines of 10px
+   monospace reads as congested however carefully the lines are spaced. */
+.shape {
+  max-width: 62rem;
+  margin: 0 0 16px;
+  padding: 16px 20px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 3px;
+}
+.shape-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
+.shape-body { margin-top: 12px; }
+
+/* The title is the control. A separate chevron would be one more thing in a
+   row whose whole problem is how much it holds; the row already reads as the
+   card's header, so clicking it folds the card. */
+.shape-toggle {
+  margin: 0; padding: 0; border: none; background: none; cursor: pointer;
+  font: 600 16px var(--mono); letter-spacing: -0.015em; color: var(--text);
+  display: flex; align-items: baseline; gap: 7px;
+}
+.shape-toggle::before {
+  content: "▾"; font-size: 10px; color: var(--text-faint);
+}
+/* The chevron still turns when motion is reduced — it is a state indicator,
+   not decoration. Only the turning is animated, and only where animation is
+   welcome. */
+@media (prefers-reduced-motion: no-preference) {
+  .shape-toggle::before { transition: transform var(--t-hover) var(--ease-out); }
+}
+.shape-toggle:hover { color: var(--accent); }
+.shape-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
+.shape-counts { font: 11px var(--mono); color: var(--text-faint); font-variant-numeric: tabular-nums; }
+.shape-start { margin-left: auto; font-size: 11.5px; }
+
+.shape-closed .shape-body { display: none; }
+.shape-closed .shape-toggle::before { transform: rotate(-90deg); }
+/* Collapsed, the card is one line, so the padding that framed five lines of
+   prose reads as a box drawn around a sentence. */
+.shape-closed { padding: 9px 16px; }
+/* Only worth saying when the lines that said it in full are hidden. */
+.shape-gist { display: none; font: 11.5px var(--mono); color: var(--text-dim); }
+.shape-closed .shape-gist { display: inline; }
+
+.shape-lines { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
+/* A label column, so the four claims read as four answers to four questions
+   rather than as a paragraph that happens to have been split. */
+.shape-line { display: grid; grid-template-columns: 9.5rem 1fr; gap: 14px; align-items: baseline; }
+@media (max-width: 640px) { .shape-line { grid-template-columns: 1fr; gap: 2px; } }
+.shape-label {
+  font: 10px var(--mono); text-transform: uppercase; letter-spacing: 0.06em;
+  color: var(--text-faint); text-align: right;
+}
+@media (max-width: 640px) { .shape-label { text-align: left; } }
+.shape-says { font: 12.5px/1.55 var(--mono); color: var(--text-dim); }
+
+/* Every table named is a way in. A summary you cannot act on is a paragraph to
+   read and then leave. */
+.shape-link {
+  padding: 1px 5px; margin: 0 -1px; border-radius: 4px;
+  background: none; border: none;
+  color: var(--accent); cursor: pointer;
+  font: inherit;
+}
+.shape-link:hover { background: var(--accent-soft); text-decoration: underline; }
+.shape-arrow { color: var(--text-faint); }
+
+/* ---------- the keyboard cursor on a result ---------- */
+
+/* One tab stop for the whole grid; the cursor moves inside it with the arrow
+   keys. A hundred and sixty tab stops between the query bar and whatever is
+   after it is not navigation. */
+.result table:focus { outline: none; }
+.result table:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+
+/* An inset ring rather than a background fill: the cell already carries
+   meaning through colour — null is dim, numbers align right, references are
+   chips — and painting over it to say "you are here" costs more than it
+   says. */
+.cell-cursor {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+  border-radius: 3px;
+}
+.cell-cursor:focus { outline-color: var(--accent); }
+
+/* Copy needs an acknowledgement: the clipboard is somewhere else, so without
+   one the key press has no visible effect at all. */
+.cell-copied { background: var(--accent-soft); }
+@media (prefers-reduced-motion: no-preference) {
+  .cell-copied { transition: background var(--t-hover) var(--ease-out); }
+}
+
+
+/* The expand-every-row control, in the header cell above the expanders. It is
+   the same glyph as the row's own, one rank quieter, so it reads as "all of
+   these" rather than as a different kind of control. */
+.expand-all { color: var(--text-faint); }
+.expand-all:hover { color: var(--accent); }
+.expand-all.working { opacity: 0.5; cursor: progress; }
+
+/* The trail's root. Quiet like the crumbs beside it — it is a step in the
+   trail, not a button competing with one — but always present, which is the
+   whole point of it. */
+/* Full-strength, not dimmed like the crumbs beside it. It is the one thing in
+   the trail that is a control rather than a step, and the whole reason it was
+   added is that the way home was not noticeable. */
+.crumb-home {
+  display: inline-flex; align-items: center;
+  /* The row is baseline-aligned, which is right for the text crumbs and
+     meaningless for an icon — an SVG has no baseline to sit on, so it hung
+     above the line it was supposed to be part of. Centred against the line
+     box instead. */
+  align-self: center;
+  color: var(--text);
+  padding: 2px 4px;
+  border-radius: var(--radius);
+}
+/* Inline SVG sits on the text baseline by default and leaves descender space
+   under it, which is the other half of the same misalignment. */
+.crumb-home svg { display: block; }
+.crumb-home:hover { background: var(--surface-2); }
+.crumb-home:hover { color: var(--accent); }
+
+/* Clauses that describe a query which did not run.
+   
+   Not an error colour — the banner above already says what is wrong, and
+   painting the chips red would claim each of them is the fault. They are
+   simply not in effect, and look it. The × on each still works: removing the
+   clause that broke the query is the fix. */
+.views.not-in-effect .clause { opacity: 0.55; }
+.views .view-save[disabled] { opacity: 0.45; cursor: default; }
+
+/* ---------- the connection dialog ---------- */
+
+.conn-dialog { min-width: min(560px, 92vw); }
+/* Two ways of saying the same thing, so they read as one control with two
+   faces rather than as two separate forms. */
+.conn-tabs { display: flex; gap: 4px; margin: 4px 0 12px; }
+.conn-tab {
+  background: none; border: 1px solid transparent; border-radius: var(--radius);
+  padding: 4px 10px; font: inherit; font-size: 12px;
+  color: var(--text-dim); cursor: pointer;
+}
+.conn-tab:hover { color: var(--text); }
+.conn-tab.active { color: var(--text); border-color: var(--border-strong); background: var(--surface-2); }
+/* Host and port sit together, as they are read; the rest take a line each. */
+/* Host and port share a row, because they are read as one thing. Everything
+   else takes the width.
+
+   Keyed on which field it is rather than on its position: this was written as
+   `nth-child` while the driver picker was the first child, and moving that
+   picker out of the grid shifted every index — so the rule went on describing
+   a layout that no longer existed and paired the wrong two boxes. A selector
+   that survives reordering is worth the `:has`. */
+.conn-parts { display: grid; grid-template-columns: 2fr 1fr; gap: 10px 12px; }
+.conn-parts > .field-stack { grid-column: 1 / -1; }
+.conn-parts > .field-stack:has(input[aria-label='Host']) { grid-column: 1 / 2; }
+.conn-parts > .field-stack:has(input[aria-label='Port']) { grid-column: 2 / 3; }
+/* A password source is a choice, so it sits with the field it decides. */
+.conn-secret-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
+.conn-tabs-small { margin: 0; }
+.conn-tabs-small .conn-tab { padding: 2px 7px; font-size: 11px; }
+.conn-secret-note { margin: 4px 0 0; font-size: 11px; color: var(--text-faint); }
+
+.conn-preview-row {
+  display: flex; gap: 8px; align-items: baseline;
+  margin-top: 12px; font-size: 12px; color: var(--text-dim);
+}
+
+/* `hidden` is a UA rule and any explicit `display` beats it, so the row above
+   has to say so itself. It is set now that the row only appears when it has
+   something to add — a password the box above is holding back. */
+.conn-preview-row[hidden] { display: none; }
+/* Wraps rather than scrolls: the point of the preview is being able to read
+   the whole thing before saving it. */
+.conn-preview {
+  font-family: var(--mono); color: var(--text);
+  word-break: break-all; background: var(--surface-2);
+  border: 1px solid var(--rule, var(--border)); border-radius: 3px; padding: 1px 5px;
+}
+
+/* ---------- the query modal (⌘/) ---------- */
+
+/* Same z-index as the palette, for the same reason: it is bound at the
+   document with capture, so it can be opened over anything and must never
+   open underneath it. */
+.ask-backdrop {
+  position: fixed; inset: 0; z-index: 100;
+  background: rgb(0 0 0 / 0.28);
+  display: flex; justify-content: center;
+  padding-top: 18vh;
+}
+/* Wider than the palette. The palette shows a list of short names; this holds
+   a sentence, and the whole reason it exists is that the header's bar is too
+   narrow for one. */
+.ask {
+  width: min(760px, 94vw); height: fit-content;
+  background: var(--surface);
+  border: 1px solid var(--border-strong);
+  border-radius: 10px;
+  box-shadow: 0 18px 60px rgb(0 0 0 / 0.28);
+  overflow: hidden;
+}
+.ask-input {
+  display: block; width: 100%;
+  padding: 14px 16px;
+  border: none; border-bottom: 1px solid var(--border);
+  background: none; color: var(--text);
+  font: 14px/1.5 var(--mono);
+  resize: none;
+}
+.ask-input:focus { outline: none; border-bottom-color: var(--accent); }
+.ask-foot {
+  display: flex; align-items: center; justify-content: space-between; gap: 12px;
+  padding: 8px 16px;
+  font-size: 12px; color: var(--text-dim);
+}
+.ask-hint code {
+  font-family: var(--mono);
+  color: var(--text);
+}
+.ask-keys { color: var(--text-faint); white-space: nowrap; }
+
+/* "or fill in the parts" — a rule with the words sitting in the gap.
+
+   The two shapes are alternatives, and a plain gap between them reads as one
+   long form where the second half continues the first. The line says choose,
+   without a control to click. */
+.conn-or {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 14px 0 12px;
+  color: var(--text-dim);
+  font-size: 12px;
+}
+
+.conn-or::before,
+.conn-or::after {
+  content: "";
+  flex: 1;
+  border-top: 1px solid var(--border);
+}
+
+/* ---------- what the Test button answered ----------
+
+   This was a grey `<p class="note">` between two fields, in the same colour
+   as the fine print under it — so the one line on the form that answers a
+   question somebody just asked read as more static help. It is a block with
+   a mark now, coloured by outcome, sitting against the buttons that produced
+   it. */
+.conn-result {
+  display: flex;
+  gap: 9px;
+  align-items: flex-start;
+  margin: 14px 0 0;
+  padding: 9px 11px;
+  border: 1px solid var(--border);
+  border-left-width: 3px;
+  border-radius: var(--radius);
+  background: var(--surface-2);
+  font-size: 12.5px;
+  line-height: 1.5;
+}
+
+.conn-result[hidden] { display: none; }
+.conn-result.ok { border-left-color: var(--accent); }
+.conn-result.bad { border-left-color: var(--danger); }
+
+.conn-result-mark { font-weight: 700; line-height: 1.4; }
+.conn-result.ok .conn-result-mark { color: var(--accent); }
+.conn-result.bad .conn-result-mark { color: var(--danger); }
+
+.conn-result-text { margin: 0; color: var(--text); }
+
+/* The warning the server works out and the form used to drop on the floor.
+   "Password from inline" is a fact; this is why anyone should care. */
+.conn-result-detail {
+  margin: 3px 0 0;
+  color: var(--warn);
+  font-size: 12px;
+}
+
+/* A line under a field saying what it is for, rather than a placeholder that
+   vanishes the moment somebody types into it. */
+.field-hint {
+  display: block;
+  margin-top: 4px;
+  font-size: 11.5px;
+  line-height: 1.45;
+  color: var(--text-dim);
+}
+
+/* A paste with no `://` in it. The name tablewalk prints for a connection is
+   its public URL form, so pasting one back is an ordinary thing to do — and
+   it lands in the file-path branch. Which driver it wants is the one thing
+   the string does not say, so it is asked rather than guessed. */
+.conn-scheme-hint {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  margin: 5px 0 0;
+  font-size: 11.5px;
+  color: var(--warn);
+}
+
+.conn-scheme-hint[hidden] { display: none; }
+
+.conn-scheme-fix {
+  font: 11.5px var(--mono);
+  padding: 1px 7px;
+  border: 1px solid var(--border-strong);
+  border-radius: 4px;
+  background: var(--surface);
+  color: var(--text);
+  cursor: pointer;
+}
+
+.conn-scheme-fix:hover { border-color: var(--accent); color: var(--accent); }
+
+/* The note under the form about what happens to this connection, and to the
+   password in it. It was `--text-faint`, a mid-grey at half alpha meant for a
+   rule between things — too quiet for a line that carries a guarantee about
+   where a secret ends up. */
+.conn-fineprint {
+  margin: 10px 0 0;
+  font-size: 11.5px;
+  line-height: 1.5;
+  color: var(--text-dim);
+}