tablewalk 0.0.1

package/dist/client/page.css

@@ -0,0 +1,713 @@
+/* Pages: one root, and everything that hangs off it.
+
+   In its own file because it is a self-contained surface and style.css is
+   already long. Nothing here names a colour — every value is a token defined
+   at the top of style.css, so the dark scheme needs no second set of rules. */
+
+/* Two rows — see `.page-head-top` below. The head was a single flex row and
+   an earlier rule here set it, so the two-row version quietly did nothing. */
+.page-head { margin-bottom: 14px; }
+.page-title { margin: 0; font: 600 16px var(--mono); letter-spacing: -0.015em; }
+
+
+/* ---------- the layout ---------- */
+
+/* Centred, and the head sits on the same measure as the body so the title
+   lines up with the first field under it rather than with the window. */
+.page-head, .page-body { max-width: 76rem; margin-inline: auto; }
+/* Two rows: what the page is called, then how you choose the record it is
+   about. They were one row, and the filter — the widest thing there and the
+   only one you type into — ended up wedged between two buttons. */
+.page-head { margin-bottom: 18px; }
+.page-head-top {
+  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
+  margin-bottom: 12px;
+}
+/* The Layout button goes to the far end, away from the name it is not about. */
+.page-head-top .page-edit { margin-left: auto; }
+/* The title, when it is also the way to another page. Sized like the heading
+   it replaces rather than like a form control, because it is still the name
+   of what you are looking at — the caret is the only thing saying there is
+   more than one of them. */
+.page-title-pick .dd-button {
+  padding: 2px 8px 2px 4px;
+  border-color: transparent; background: none;
+}
+.page-title-pick .dd-value {
+  font: 620 17px var(--mono); letter-spacing: -0.01em; color: var(--text);
+}
+.page-title-pick .dd-button:hover { border-color: var(--border); background: var(--surface-2); }
+.page-title-pick .dd-list { min-width: 16rem; }
+/* The Edit control to the far right; everything else keeps to the left, so
+   the filter sits beside the title it belongs to rather than adrift. */
+.page-edit { flex: none; margin-left: auto; font-size: 11.5px; }
+
+/* Sections flow into rows, each taking the share of the row its width names.
+   Wrapping rather than a grid with declared tracks: a section is a piece of
+   content and "half" survives a narrow window, where "columns 4 through 9"
+   needs a breakpoint table to mean anything. */
+.page-body {
+  /* Sections need room to read as separate things. A page is several
+     answers about one record, and at 26px the seam between two of them was
+     the same distance as the gap between two rows of fields inside one — so
+     the eye had to use the hairline to find the edge, and a section without
+     a heading had nothing to find. */
+  --page-row-gap: 40px;
+  display: flex; flex-wrap: wrap;
+  column-gap: 32px; row-gap: var(--page-row-gap);
+  align-items: flex-start;
+}
+
+/* A section's own table brings its bottom padding, which lands on top of the
+   row gap and makes the space under a list visibly bigger than the space
+   under a metric strip. The gap is the layout's job here. */
+.page-section .table-wrap { padding-bottom: 0; }
+
+/* No box.
+ 
+   Every section in a rounded card with its own border made six boxes on a
+   page, and a border around content that is already a table draws the same
+   line twice. Separation comes from space and one hairline above the
+   heading — which is what the eye needs to see a group, and all it needs.
+   The cards also fixed a width to the content inside them, so a five-row
+   table and a two-row one drew boxes of visibly different weight for no
+   reason a reader could name. */
+.page-section {
+  flex: 1 1 100%;
+  min-width: 0;
+  padding: 0;
+  background: none;
+  border: none;
+  border-top: 1px solid var(--border);
+  padding-top: 10px;
+}
+/* `calc` rather than a bare percentage: the gap comes out of the row, so two
+   halves at 50% each wrap onto separate lines the moment there is one. */
+.page-section.width-half { flex-basis: calc(50% - 16px); }
+.page-section.width-third { flex-basis: calc(33.333% - 22px); }
+
+/* Offsets: empty space standing where a section of that fraction would have
+   stood. The pixel corrections make the margin end exactly where the next
+   column would begin — a third-offset third lines up under the middle of
+   three, not a gap-width to its left — except `quarter`, which has no column
+   to align to and is trimmed a little so a quarter–half–quarter row cannot
+   round itself past 100% and wrap. */
+.page-section.offset-l-quarter { margin-left: calc(25% + 6px); }
+.page-section.offset-l-third { margin-left: calc(33.333% + 10px); }
+.page-section.offset-l-half { margin-left: calc(50% + 16px); }
+.page-section.offset-l-two-thirds { margin-left: calc(66.666% + 20px); }
+.page-section.offset-r-quarter { margin-right: calc(25% + 6px); }
+.page-section.offset-r-third { margin-right: calc(33.333% + 10px); }
+.page-section.offset-r-half { margin-right: calc(50% + 16px); }
+.page-section.offset-r-two-thirds { margin-right: calc(66.666% + 20px); }
+
+@media (max-width: 900px) {
+  .page-section.width-half, .page-section.width-third { flex-basis: 100%; }
+  /* A narrow screen stacks everything full-width; an offset there is not
+     placement, it is a squeezed column. */
+  .page-section[class*="offset-"] { margin-left: 0; margin-right: 0; }
+}
+
+/* The first section is the record itself and wants no rule above it: there is
+   nothing above it to be separated from. */
+.page-section:first-child { border-top: none; padding-top: 0; }
+
+/* A section heading carries a tab's weight and none of its furniture.
+ 
+   Drawing it as a chip did make it legible — it had been a faint grey line
+   beside content that was not — but a page then had a box round every
+   heading on it, and boxes are what the sections deliberately do not have.
+   The weight and the colour are what were missing; the border was not. */
+.page-section-head {
+  display: inline-flex; align-items: center; gap: 6px;
+  margin: 0 0 10px;
+  font: 600 10px var(--mono); text-transform: uppercase; letter-spacing: 0.07em;
+  color: var(--text);
+}
+
+/* A section that could not run says so in its own place, and the page keeps
+   its shape around it. A page is most useful on the day something is
+   misconfigured, which is the day an error instead of a page is worst. */
+.page-broken { border-top-color: var(--danger); }
+.page-broken .page-section-head { color: var(--danger); }
+
+/* ---------- fields ---------- */
+
+/* Label above value, not beside it.
+ 
+   Beside it, a fixed label column put two hundred pixels between `code` and
+   `NZ` — and with three pairs to a row, the eye had to work out which value
+   belonged to which label on every line. That is what makes a record read as
+   jumbled: not the amount of data, the distance between a thing and its name.
+ 
+   Stacked, each pair is one object. The label is small and quiet because it
+   is the same on every record; the value is what you came to read. */
+/* Rows further apart than columns, and both further apart than they were.
+   Twenty-seven fields at a 14px rhythm is a wall of text where every line is
+   the same distance from the next; the label and its value belong together
+   and the next pair does not, and the spacing is the only thing that can say
+   so. */
+.page-field-grid {
+  display: grid;
+  gap: 20px 28px;
+  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
+}
+/* A folded group of fields.
+ 
+   `<details>` rather than a button and a class, because the browser already
+   knows how to open and close one, and the state lives on the element instead
+   of in a variable something else has to keep in step. The marker is replaced
+   with a chevron that turns, so the heading reads the same folded or not. */
+.page-fold > summary {
+  cursor: pointer;
+  /* inline-flex, so the chip is the width of its name rather than the width
+     of the page — a full-width bar reads as a rule, not a label. */
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  list-style: none;
+  user-select: none;
+}
+/* A shut group is still legible and no longer the thing in front. */
+.page-fold:not([open]) > summary { color: var(--text-dim); }
+.page-fold > summary::-webkit-details-marker { display: none; }
+.page-fold > summary::before {
+  content: '\203a';
+  display: inline-block;
+  font-size: 13px;
+  line-height: 1;
+  color: var(--text-faint);
+  transition: transform 120ms ease;
+}
+.page-fold[open] > summary::before { transform: rotate(90deg); }
+.page-fold > summary:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+  border-radius: 3px;
+}
+.page-fold > .page-field-grid { margin-top: 10px; }
+
+.page-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+/* An editable field is the same field with a box round the value, so a page
+   in write mode reads as the page it already was rather than as a form. */
+.page-field-edit .cell-edit {
+  width: 100%; min-width: 0;
+  padding: 2px 6px;
+  font: 13px var(--mono); color: var(--text);
+  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
+}
+.page-field-edit .cell-edit:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
+.page-field-edit .cell-edit.dirty { border-color: var(--warn); background: var(--warn-soft, var(--surface-2)); }
+.page-pending { flex: 1 0 100%; }
+/* A label has to be readable before it can be quiet.
+ 
+   Uppercase at ten pixels in the faintest colour on the page was a caption
+   of a caption: the value under it was legible and the name of the value was
+   not, which is the wrong way round on a screen whose whole job is saying
+   what the numbers are. One step darker and half a pixel larger buys that
+   back; weight does not — thirty bold labels on a screen compete with the
+   thirty values they are labelling, which is the same problem the other way
+   round. The record view's labels have always been dimmed text at regular
+   weight and they read fine. */
+.page-field dt {
+  font: 10.5px var(--mono); text-transform: uppercase; letter-spacing: 0.05em;
+  color: var(--text-dim);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.page-field dd {
+  margin: 0; font: 13px var(--mono); color: var(--text);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.page-field dd.null { color: var(--text-faint); font-style: italic; }
+
+/* ---------- metrics ---------- */
+
+/* A metric is as wide as its number, and metrics sit in one strip.
+ 
+   Widths are declared per section, and for a list that is right — but a
+   two-digit count stretched to a third of the page is four inches of nothing,
+   and two of them read as a layout that failed rather than as a summary. They
+   take the space they need and the row fills left to right.
+ 
+   `full` stays the exception, for someone who wants a number on its own. */
+.page-section.page-metric {
+  flex: 0 1 auto; min-width: 7rem;
+  border-top: none; padding-top: 0;
+  padding-right: 32px;
+}
+.page-section.page-metric.width-full { flex: 1 1 100%; }
+/* A hairline between counts rather than a box around each: the run reads as
+   one strip of related numbers, which is what it is. */
+.page-metric + .page-metric { border-left: 1px solid var(--border); padding-left: 32px; }
+.page-metric .page-section-head { margin-bottom: 3px; }
+
+.page-metric-value {
+  display: flex; align-items: baseline; gap: 8px;
+  width: 100%; padding: 0; text-align: left;
+  background: none; border: none; cursor: pointer;
+  color: var(--text);
+}
+.metric-number {
+  font: 600 26px var(--mono); letter-spacing: -0.02em;
+  font-variant-numeric: tabular-nums;
+}
+.metric-of { font: 11px var(--mono); color: var(--text-faint); }
+.page-metric-value:hover .metric-number { color: var(--accent); }
+.page-metric-value:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
+
+/* ---------- the root bar ---------- */
+
+/* One row, always there. The filter is the page's own control, not a door it
+   passed through — changing which record the page is about should not mean
+   going back to an empty screen. */
+/* Its own row now, so it takes the width it needs rather than the width
+   left over after a title and two buttons. */
+.root-wrap { position: relative; min-width: 0; }
+.root-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+
+/* One control, not four.
+ 
+   Four separately bordered pills read as four unrelated things to fill in,
+   and on a page whose whole language is hairlines and whitespace they were
+   the only rounded objects left. Segmented: one quiet ground, one small
+   radius, and a rule between each field — which is what they are, one filter
+   with several columns. */
+.root-fields[hidden] { display: none; }
+.root-fields {
+  display: flex; align-items: stretch;
+  flex: 1 1 auto; min-width: 0;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  overflow: hidden;
+}
+/* Big enough to type a name into. At 11.5px in a 4px-tall box these read as
+   decoration on a header rather than as the way to choose the record the
+   whole page is about — which is what they are, and on an empty page the
+   only thing to do. */
+.root-field {
+  flex: 1 1 9rem; min-width: 5rem; max-width: 15rem;
+  padding: 7px 12px;
+  font: 12.5px var(--mono);
+  background: none; color: var(--text);
+  border: none; border-radius: 0;
+}
+/* The divider belongs between fields, so the first one has none — and it is
+   the field's own border rather than a separate element, which keeps the
+   group one box however many columns a table turns out to have. */
+.root-field + .root-field { border-left: 1px solid var(--border); }
+/* Focus and "has something in it" were both a lighter ground, so a filled
+   field looked exactly like the focused one and there was no way to see where
+   the caret was. Focus keeps the ground and adds a ring; the ring is inset so
+   it does not break the segmented group's outer edge. */
+.root-field:focus {
+  outline: none;
+  background: var(--surface);
+  box-shadow: inset 0 0 0 1px var(--accent);
+}
+.root-field::placeholder { color: var(--text-faint); }
+/* A field with something in it stays lit after focus moves on, so a filter
+   that is doing something does not look like one that is not. */
+.root-field:not(:placeholder-shown) { background: var(--surface); color: var(--text); }
+
+/* The record in hand, as the filter's answer rather than as a separate
+   heading. The one thing on the row that is a state and not a control, so it
+   is the one thing that carries colour. */
+.root-current {
+  display: inline-flex; align-items: center; gap: 6px;
+  flex: none;
+  padding: 3px 8px 3px 10px;
+  background: var(--accent-soft); border: 1px solid transparent;
+  color: var(--accent); font: 12px var(--mono); cursor: pointer;
+  max-width: 20rem;
+  border-radius: 5px;
+}
+.root-current:hover { border-color: var(--accent); }
+.root-current:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.root-current .chip-x { opacity: 0.65; font-size: 11px; }
+.root-current > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+.root-more { position: relative; flex: none; }
+.root-more-head {
+  padding: 3px 8px; border-radius: 4px; cursor: pointer; list-style: none;
+  color: var(--text-faint); font: 13px var(--mono); line-height: 1;
+}
+.root-more-head::-webkit-details-marker { display: none; }
+.root-more-head:hover { background: var(--surface-2); color: var(--text); }
+.root-menu {
+  position: absolute; right: 0; top: calc(100% + 4px); z-index: 50;
+  min-width: 17rem; max-height: 24rem; overflow-y: auto;
+  padding: 6px;
+  background: var(--surface);
+  border: 1px solid var(--border-strong); border-radius: 8px;
+  box-shadow: 0 10px 34px rgb(0 0 0 / 0.18);
+}
+
+/* Results hang below the row rather than pushing the page down: a list that
+   moved the sections every time someone typed would make the page flinch. */
+/* Suggestions under the boxes: recents, then the first rows there are.
+   Scoped to the results panel, because the `···` menu has groups of its own
+   and they are a menu's groups, drawn tighter. */
+.root-results .root-group + .root-group { margin-top: 14px; padding-top: 0; border-top: none; }
+.root-results .root-group-head { margin: 0 0 6px; color: var(--text-dim); }
+
+.root-results {
+  position: absolute; left: 0; top: calc(100% + 4px); z-index: 50;
+  min-width: 22rem; max-width: 34rem;
+}
+/* Except when there is no record chosen. Then this is not a dropdown over
+   the page — it *is* the page, and floating it leaves an empty screen with a
+   menu open on top of it. */
+.root-results.root-offered {
+  position: static; margin-top: 12px; max-width: 46rem;
+}
+.root-results.root-offered:not(:empty) { box-shadow: none; border-color: var(--border); }
+.root-results:not(:empty) {
+  padding: 4px;
+  background: var(--surface);
+  border: 1px solid var(--border-strong); border-radius: 8px;
+  box-shadow: 0 10px 34px rgb(0 0 0 / 0.18);
+  max-height: 22rem; overflow-y: auto;
+}
+.root-hits { display: flex; flex-direction: column; gap: 1px; }
+.root-hit, .root-menu-item {
+  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
+  width: 100%; padding: 5px 9px; text-align: left;
+  background: none; border: 1px solid transparent; border-radius: var(--radius);
+  color: var(--text); font: 12.5px var(--mono); cursor: pointer;
+}
+.root-hit:hover, .root-menu-item:hover { background: var(--surface-2); }
+.root-hit:focus-visible, .root-menu-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.root-hit-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: none; }
+.root-hit-key { font-size: 11px; color: var(--text-faint); flex: none; }
+/* Beside the name, not at the far edge.
+ 
+   `space-between` on a row as wide as the page put four hundred pixels
+   between "WO-100001" and the fields that tell it apart from WO-100002 —
+   which is the one job those fields have. They read as a pair now, and the
+   row is as wide as it needs to be. */
+.root-results .root-hit { justify-content: flex-start; gap: 10px; }
+.root-results .root-hit .root-hit-key { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+.root-group + .root-group { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
+.root-group-head {
+  margin: 0 0 4px; padding: 0 9px;
+  font: 600 10px var(--mono); text-transform: uppercase; letter-spacing: 0.06em;
+  color: var(--text-faint);
+}
+
+.root-filter-head {
+  display: flex; align-items: baseline; gap: 8px;
+  padding: 5px 9px; border-radius: var(--radius);
+  cursor: pointer; list-style: none;
+  font: 12.5px var(--mono); color: var(--text);
+}
+.root-filter-head::-webkit-details-marker { display: none; }
+.root-filter-head::before { content: "\25b8"; font-size: 9px; color: var(--text-faint); }
+.root-filter[open] .root-filter-head::before { content: "\25be"; }
+.root-filter-head:hover { background: var(--surface-2); }
+.root-filter-rows { padding-left: 14px; }
+
+.page-empty { margin: 4px 0 0; }
+
+/* The strip a run of metrics sits in: one item on the page, several inside
+   it, so the page gets one seam after it rather than two. */
+.page-metric-row {
+  flex: 1 0 100%;
+  display: flex; flex-wrap: wrap; align-items: stretch;
+}
+
+/* Related lists as tabs.
+
+   The strip carries the hairline the sections it replaced each carried, and
+   the selected tab sits on it — the border under the strip and the border of
+   the tab are the same line, which is what makes a tab read as being in
+   front of the page rather than beside it. */
+.page-tabs { flex: 1 0 100%; min-width: 0; }
+.page-tabstrip {
+  display: flex; flex-wrap: wrap; gap: 2px;
+  border-top: 1px solid var(--border);
+  padding-top: 8px; margin-bottom: 2px;
+}
+/* Square, like everything else that holds data here: the grid, the query
+   bar and the tables under these tabs are all straight-edged, and a rounded
+   tab was the one soft corner on a screen full of hard ones. */
+.page-tab {
+  appearance: none; background: none; cursor: pointer;
+  border: 1px solid transparent; border-bottom: none;
+  border-radius: 0;
+  padding: 5px 11px 6px;
+  font: 600 10px var(--mono); text-transform: uppercase; letter-spacing: 0.07em;
+  color: var(--text-faint);
+}
+.page-tab:hover { color: var(--text); background: var(--surface-2); }
+.page-tab[aria-selected="true"] {
+  color: var(--text);
+  background: var(--surface-2);
+  border-color: var(--border);
+}
+.page-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+/* The panel's own section has already drawn the line above it; inside a tab
+   strip that line is the strip's, and drawing it twice boxes the table. */
+.page-tabpanel > .page-section { border-top: none; padding-top: 4px; }
+.page-tabpanel > .page-section > .page-section-head { display: none; }
+.page-tabpanel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+
+
+.pb-tabs-toggle {
+  display: flex; align-items: center; gap: 5px; flex: none;
+  font: 11px var(--mono); color: var(--text-dim); cursor: pointer;
+  white-space: nowrap;
+}
+.pb-tabs-toggle input { margin: 0; }
+
+.pb-backdrop {
+  position: fixed; inset: 0; z-index: 85;
+  display: flex; align-items: flex-start; justify-content: center;
+  padding: 6vh 16px;
+  background: rgb(0 0 0 / 0.28);
+}
+.pb {
+  display: flex; flex-direction: column; gap: 12px;
+  width: min(58rem, 100%); max-height: 86vh;
+  padding: 16px 18px;
+  background: var(--surface);
+  border: 1px solid var(--border-strong); border-radius: 12px;
+  box-shadow: 0 18px 50px rgb(0 0 0 / 0.26);
+}
+.pb-head { display: flex; align-items: baseline; gap: 10px; }
+.pb-title { margin: 0; font: 600 15px var(--mono); }
+.pb-base { font: 11px var(--mono); color: var(--text-faint); }
+.pb-close { margin-left: auto; font-size: 15px; line-height: 1; padding: 2px 8px; }
+
+.pb-label {
+  font: 10px var(--mono); text-transform: uppercase; letter-spacing: 0.06em;
+  color: var(--text-faint); flex: none;
+}
+.pb-name-row { display: flex; align-items: center; gap: 10px; }
+.pb-input {
+  flex: 1 1 auto; min-width: 0;
+  padding: 5px 10px; font: 12.5px var(--mono);
+  background: var(--surface); color: var(--text);
+  border: 1px solid var(--border); border-radius: var(--radius);
+}
+.pb-input:focus { outline: none; border-color: var(--accent); }
+.pb-limit { flex: 0 0 5rem; }
+.pb-width { flex: none; }
+
+/* The themed listbox, not the browser's own.
+ 
+   A native `<select>` opens the operating system's menu — a blue macOS popup
+   with its own type and its own corners, in a dialog that has neither. It is
+   the one control a page cannot style, which is exactly why this codebase
+   already had a replacement; the builder was simply not using it. */
+.pb-section .dd { flex: none; }
+.pb-section .dd-button {
+  padding: 4px 8px; font: 11.5px var(--mono);
+  min-width: 5.5rem;
+}
+.pb-section .dd-list { min-width: 12rem; }
+
+/* The sections, in the order they will appear. Scrolls on its own so the
+   Add and Save rows stay put — a builder whose Save button walks off the
+   bottom as you add sections is a builder you have to scroll to finish. */
+.pb-body {
+  display: flex; flex-direction: column; gap: 6px;
+  overflow-y: auto; min-height: 4rem;
+  padding: 2px;
+}
+.pb-section {
+  display: flex; align-items: center; gap: 8px;
+  padding: 6px 8px;
+  background: var(--surface-2);
+  border: 1px solid var(--border); border-radius: var(--radius);
+}
+/* The grip is the only draggable part of the row, because everything else on
+   it is an input. Faint until the row is hovered: it is a handle, not a
+   decoration, and a column of them down the dialog reads as noise. */
+.pb-section-grip {
+  flex: none; cursor: grab; user-select: none;
+  padding: 2px 1px; margin-right: -2px;
+  font: 12px var(--mono); letter-spacing: -1px; line-height: 1;
+  color: var(--text-faint); opacity: 0.45;
+  transform: rotate(90deg);
+  transition: opacity 90ms ease;
+}
+.pb-section:hover .pb-section-grip { opacity: 1; }
+.pb-section-grip:active { cursor: grabbing; }
+.pb-section.pb-dragging { opacity: 0.45; }
+/* Where the row will land, drawn as the line it will sit on rather than by
+   moving everything else out of the way mid-drag. */
+.pb-section.pb-drop-above { box-shadow: 0 -2px 0 var(--accent); }
+.pb-section.pb-drop-below { box-shadow: 0 2px 0 var(--accent); }
+
+.pb-kind {
+  flex: 0 0 3.4rem;
+  font: 10px var(--mono); text-transform: uppercase; letter-spacing: 0.05em;
+  color: var(--text-faint);
+}
+.pb-section-actions { display: flex; gap: 2px; margin-left: auto; flex: none; }
+.pb-section-actions button { padding: 2px 7px; font-size: 12px; line-height: 1; }
+.pb-section-actions button:disabled { opacity: 0.3; cursor: default; }
+.pb-remove:hover { color: var(--danger); }
+
+.pb-add { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.pb-picker { position: relative; }
+.pb-add-btn {
+  display: inline-block; list-style: none; cursor: pointer;
+  padding: 3px 10px; font: 12px var(--sans);
+  background: transparent; color: var(--text-dim);
+  border: 1px solid var(--border-strong); border-radius: 999px;
+}
+.pb-add-btn::-webkit-details-marker { display: none; }
+.pb-add-btn:hover { border-color: var(--accent); color: var(--accent); }
+.pb-menu {
+  position: absolute; left: 0; bottom: calc(100% + 4px); z-index: 90;
+  min-width: 22rem; max-height: 22rem; overflow-y: auto;
+  padding: 6px;
+  background: var(--surface);
+  border: 1px solid var(--border-strong); border-radius: 8px;
+  box-shadow: 0 10px 34px rgb(0 0 0 / 0.2);
+}
+.pb-group + .pb-group { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
+.pb-group-head {
+  margin: 0 0 4px; padding: 0 8px;
+  font: 600 10px var(--mono); text-transform: uppercase; letter-spacing: 0.06em;
+  color: var(--text-faint);
+}
+.pb-menu-item {
+  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
+  width: 100%; padding: 5px 8px; text-align: left;
+  background: none; border: 1px solid transparent; border-radius: var(--radius);
+  cursor: pointer;
+}
+.pb-section.pb-drop { border-color: var(--accent); background: var(--accent-soft); }
+.pb-holds { flex: none; font: 11px var(--mono); color: var(--text-faint); white-space: nowrap; }
+.pb-menu-item:hover { background: var(--surface-2); }
+.pb-menu-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.pb-menu-label { font: 12.5px var(--mono); color: var(--text); }
+/* The route, so choosing between two entries with the same table name is a
+   choice between two things you can tell apart. */
+.pb-menu-detail { font: 10.5px var(--mono); color: var(--text-faint); }
+
+.pb-foot { display: flex; align-items: center; gap: 8px; }
+.pb-spacer { flex: 1 1 auto; }
+.pb-json { font-size: 11.5px; }
+
+/* ---------- the field panel, inline ---------- */
+
+/* A section and its open panel are one thing, so they move together and the
+   panel cannot end up beside a different row. */
+.pb-group-row { display: flex; flex-direction: column; }
+
+.pb-panel {
+  margin: 0 8px 2px;
+  padding: 8px 10px 10px;
+  background: var(--surface-2);
+  border: 1px solid var(--border); border-top: none;
+  border-radius: 0 0 var(--radius) var(--radius);
+}
+.pb-panel-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
+.pb-panel-head button { padding: 2px 8px; font-size: 11px; }
+.pb-field-count { font: 10.5px var(--mono); color: var(--text-faint); }
+
+/* Several across, because forty names in one column is a scroll and the names
+   are short enough to read three or four abreast. */
+.pb-field-grid {
+  display: grid; gap: 1px 10px;
+  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
+  max-height: 34vh; overflow-y: auto;
+}
+/* The whole row toggles: a checkbox is a twelve-pixel target and the name
+   beside it is not. */
+.pb-field-row {
+  display: flex; align-items: baseline; gap: 7px;
+  padding: 3px 6px; border-radius: var(--radius);
+  cursor: pointer; min-width: 0;
+}
+.pb-field-row:hover { background: var(--surface); }
+.pb-field-row input { flex: none; margin: 0; }
+.pb-field-name {
+  font: 12px var(--mono); color: var(--text);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.pb-field-type { font: 10px var(--mono); color: var(--text-faint); flex: none; }
+
+/* The fields on a group, laid out the way the page will lay them out — same
+   column count, same order — so arranging them is done on a picture of the
+   result rather than on a list that has to be imagined into one. */
+.pb-arrange {
+  display: grid; gap: 2px 10px;
+  max-height: 34vh; overflow-y: auto;
+  margin-bottom: 8px;
+}
+.pb-arrange-row {
+  display: flex; align-items: baseline; gap: 7px;
+  padding: 3px 4px 3px 2px; border-radius: var(--radius);
+  background: var(--surface); border: 1px solid var(--border);
+  cursor: grab; min-width: 0; position: relative;
+}
+.pb-arrange-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.pb-arrange-row.dragging { opacity: 0.45; cursor: grabbing; }
+.pb-arrange-row .pb-field-name { flex: 1; }
+.pb-grip {
+  font: 12px var(--mono); color: var(--text-faint);
+  letter-spacing: -1px; flex: none; transform: rotate(90deg);
+}
+.pb-arrange-row .pb-send,
+.pb-arrange-row .pb-remove {
+  flex: none; padding: 0 5px; font-size: 11px; line-height: 1.6;
+  opacity: 0; transition: opacity 90ms ease;
+}
+.pb-arrange-row:hover .pb-send,
+.pb-arrange-row:hover .pb-remove,
+.pb-arrange-row:focus-within .pb-send,
+.pb-arrange-row:focus-within .pb-remove { opacity: 1; }
+
+/* Which group to send a field to, opened in the row itself: a dialog here
+   would cover the arrangement being made. */
+.pb-send-menu {
+  position: absolute; z-index: 3; top: 100%; right: 0;
+  display: flex; flex-direction: column; align-items: stretch;
+  background: var(--surface); border: 1px solid var(--border);
+  border-radius: var(--radius); padding: 3px; gap: 2px;
+  box-shadow: var(--shadow, 0 6px 18px rgb(0 0 0 / 0.12));
+}
+.pb-send-menu button { font-size: 11px; text-align: left; white-space: nowrap; }
+
+/* Everything not on the page, as chips: short names, many of them, and each
+   one click from being added. */
+.pb-pool { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
+.pb-add-field { font: 11px var(--mono); padding: 2px 7px; }
+
+/* A hidden section keeps its row and stops looking live. */
+.pb-section.pb-hidden { opacity: 0.5; }
+.pb-section.pb-hidden .pb-input { text-decoration: line-through; }
+.pb-hide { flex: none; font-size: 10px; line-height: 1.9; }
+
+.pb-cols { flex: none; }
+
+.pb-fields-btn { flex: none; font-size: 11px; padding: 3px 9px; }
+.pb-fields-btn.open { border-color: var(--accent); color: var(--accent); }
+/* The row an open panel belongs to keeps its bottom edge open, so the two
+   read as one block rather than as two stacked boxes. */
+.pb-section.pb-open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
+
+/* Destructive, and at the far end from Save so the two are not neighbours. */
+.pb-delete { color: var(--danger); }
+.pb-delete:hover { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
+
+/* A list's own pager. Right-aligned under the table, quiet, and present only
+   when there is somewhere to go — two disabled arrows under a list that fits
+   on one page are an explanation that nothing can be done. */
+.page-pager {
+  display: flex; align-items: center; justify-content: flex-end; gap: 4px;
+  margin-top: 6px;
+}
+.page-range {
+  margin-right: 6px;
+  font: 11px var(--mono); color: var(--text-faint);
+  font-variant-numeric: tabular-nums;
+}
+.page-pager button { padding: 1px 8px; font-size: 12px; line-height: 1.4; }
+.page-pager button:disabled { opacity: 0.3; cursor: default; }