@wendellresearch-ai/benchwarmers 0.2.0 → 0.2.2

package/ui/bench.css

@@ -1,425 +1,430 @@
-/* Benchwarmers. The theme's colour tokens arrive first (ui/themes/*.css, the
-   Wendell Research palette by default, emitted by serve.py); the values below
-   are derived from them: grounds mixed from a theme colour, and the bench's
-   own spacing. A theme sets colours only. */
-
-:root {
-  --ok: var(--primary);
-  --ok-ground: color-mix(in oklab, var(--primary) 13%, var(--paper-2));
-  --warn-ground: color-mix(in oklab, var(--signal) 55%, var(--paper-2));
-  --err-ground: color-mix(in oklab, var(--err) 11%, var(--paper-2));
-  --quiet-ground: var(--band);
-  --panel: var(--paper-2);
-  --step-1: color-mix(in oklab, var(--band) 55%, var(--paper));
-  color-scheme: var(--scheme, light);
-}
-
-* { box-sizing: border-box; }
-[hidden] { display: none !important; }
-html { -webkit-text-size-adjust: 100%; }
-body {
-  margin: 0;
-  /* A theme may draw the page's ground (Hardwood's maple court) and a line
-     across the top (its crimson court line); the others are plain paper. */
-  background: var(--floor, var(--paper));
-  border-top: .4rem solid var(--court-line, transparent);
-  color: var(--ink);
-  font: 400 1rem/1.55 var(--font-display);
-  -webkit-font-smoothing: antialiased;
-}
-::selection { background: var(--signal); color: var(--ink); }
-a { color: var(--link); text-underline-offset: .18em; }
-:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 2px; }
-code, .mono, td.num, .chip, .alias {
-  font-family: var(--font-mono);
-  font-variant-numeric: tabular-nums;
-}
-code { font-size: .875em; background: var(--step-1); padding: .05rem .3rem; border-radius: var(--radius); }
-h1, h2, h3 { line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
-
-/* ---- header --------------------------------------------------------- */
-/* The page is wider than the theme's reading measure: with a sidebar, a
-   76rem page left a narrow column and wide empty margins on a large screen.
-   Prose inside panels keeps its own measure (.panel > .sub). */
-/* One line: the name on its bench, the credit beside it, the actions pushed
-   to the far end. */
-header {
-  max-width: var(--page, 104rem); margin: 0 auto;
-  padding: 1.5rem var(--gutter) 1rem;
-  display: flex; flex-wrap: wrap; align-items: center; column-gap: 1.25rem;
-}
-header h1 { margin: 0; font-size: 2.25rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
-/* The name sits on a team bench: a seat in the team's colour (the theme's
-   brand, or --bench-seat) on two legs joined by a rail. Drawn in CSS from the
-   font size, so it scales with the heading. With line-height 1 the letters
-   end about .14em above the box, so the seat's top is put there: the name
-   rests on it. */
-header h1 span { position: relative; display: inline-block; padding: 0 .14em .6em; }
-header h1 span::after {                                   /* the seat */
-  content: ""; position: absolute; left: -.08em; right: -.08em; bottom: .46em; height: .28em;
-  background: var(--bench-seat, var(--brand)); border-radius: .06em;
-  box-shadow: inset 0 .055em 0 rgb(255 255 255 / .28), 0 .05em 0 rgb(0 0 0 / .3);
-}
-header h1 span::before {                                  /* legs and the rail between them */
-  --leg: var(--bench-leg, var(--ink-2));
-  content: ""; position: absolute; left: .18em; right: .18em; bottom: 0; height: .5em;
-  background:
-    linear-gradient(var(--leg), var(--leg)) left top / .11em 100% no-repeat,
-    linear-gradient(var(--leg), var(--leg)) right top / .11em 100% no-repeat,
-    linear-gradient(var(--leg), var(--leg)) center 66% / 100% .07em no-repeat;
-}
-/* The credit at the bench's feet: level with the bottom of the name's group. */
-header .sub { align-self: flex-end; margin: 0 auto 0 -.6rem; line-height: 1; color: var(--muted); font-size: .9375rem; }
-header .sub a { color: var(--ink); font-weight: 500; text-decoration-color: var(--brand); }
-/* Right-aligned, on the name's line or, when it does not fit, on its own. */
-.head-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center;
-                margin-left: auto; justify-content: flex-end; }
-
-/* ---- buttons -------------------------------------------------------- */
-button { font: inherit; cursor: pointer; }
-.btn {
-  display: inline-flex; align-items: center; gap: .4rem;
-  padding: .5rem .9rem; border-radius: var(--radius);
-  border: 1px solid var(--ink); background: var(--panel); color: var(--ink);
-  font-weight: 500; font-size: .9375rem;
-  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
-}
-.btn:hover { background: var(--step-1); }
-.btn.primary { background: var(--ink); color: var(--paper); box-shadow: 4px 4px 0 var(--brand); }
-.btn.primary:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--brand); background: var(--ink); }
-.btn.danger { background: var(--err); border-color: var(--err); color: var(--on-err, #fff); }
-.btn.danger:hover { background: color-mix(in oklab, var(--err) 86%, #000); }
-.btn.small { padding: .25rem .6rem; font-size: .875rem; }
-.btn:disabled { opacity: .5; cursor: default; transform: none; box-shadow: none; }
-.btn.fresh { background: var(--signal); border-color: var(--ink); }
-.btn.fresh:hover { background: var(--signal); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
-.linkish { background: none; border: 0; padding: 0; color: var(--link); text-decoration: underline;
-           text-underline-offset: .18em; font-size: inherit; }
-
-/* ---- layout --------------------------------------------------------- */
-main { max-width: var(--page, 104rem); margin: 0 auto; padding: 0 var(--gutter) 4rem; }
-
-/* problems: what needs a person, each with the action that resolves it */
-.problems { background: var(--sheet, var(--panel)); border-radius: 14px; padding: 1rem 1.4rem; margin: .5rem 0 1.5rem;
-            box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 12px 32px -14px rgb(0 0 0 / .14);
-            -webkit-backdrop-filter: var(--glass, none); backdrop-filter: var(--glass, none); }
-.problems h2 { margin: 0 0 .25rem; font-size: 1.25rem; font-weight: 700; }
-.problems > p { margin: 0 0 .5rem; color: var(--muted); font-size: .9375rem; }
-.problem { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem 1rem;
-           align-items: center; padding: .55rem .75rem; margin: 0 -.75rem; border-radius: var(--radius); }
-.problem:hover { background: var(--step-1); }
-.problems details { margin-top: .5rem; }
-.problems details > summary { cursor: pointer; font-weight: 500; padding: .4rem 0; }
-.problems details > summary .muted { font-weight: 400; }
-.problem .what { font-weight: 500; }
-.problem .why { color: var(--muted); font-size: .875rem; overflow-wrap: anywhere; }
-.problem .acts, .endpoint .acts, .ep .acts { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
-.row-input { display: flex; gap: .5rem; align-items: center; margin-top: .35rem; }
-.row-input input { flex: 1; min-width: 0; margin: 0 !important; }
-.sub-head { font-weight: 600; margin: 1rem 0 .25rem; }
-.problem .chip { margin-right: .4rem; }
-.problems .head { display: flex; align-items: baseline; gap: .5rem; }
-.problems .head h2 { margin-bottom: .25rem; }
-.problems .sep { display: none; color: var(--muted); }
-/* Hidden (bench.js): one line, "Action needed · 3 · show", until something new */
-.problems.collapsed { padding: .5rem 1.25rem; }
-.problems.collapsed > :not(.head) { display: none; }
-.problems.collapsed .head h2 { margin: 0; font-size: 1rem; }
-.problems.collapsed .sep { display: inline; }
-
-/* pages: a grouped sidebar (Observe, Gateway, Control); the group names and
-   the active page carry the theme's brand colour. A theme with a floor backs
-   the sidebar with frosted cream (--rail) so it reads over the court. On a
-   narrow screen the groups sit in a row above the page. */
-.layout { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 1.5rem; align-items: start; }
-.tabs { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 1.1rem;
-        background: var(--rail, transparent); padding: var(--rail-pad, 0); border-radius: 14px;
-        -webkit-backdrop-filter: var(--glass, none); backdrop-filter: var(--glass, none); }
-.tabs .group { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; }
-.tabs h2 { margin: 0 0 .2rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em;
-           text-transform: uppercase; color: color-mix(in oklab, var(--brand) 72%, var(--ink)); }
-           /* the brand, pulled toward the ink so small text stays legible in any theme */
-/* No bottom padding and a tight line height, so the box ends just under the
-   letters; the spacing between pages is the group's gap instead. */
-.tabs button { background: none; border: 0; padding: 0; line-height: 1.15; color: var(--muted); text-align: left;
-               font-size: 1rem; font-weight: 500; }
-.tabs button:hover { color: var(--ink); }
-/* The active page: a highlighter stroke across the bottom of its letters,
-   the header's old mark. */
-.tabs button[aria-selected="true"] { color: var(--ink); font-weight: 700;
-                                     box-shadow: inset 0 -.42em 0 var(--signal); }
-/* Collections, the bench's own idea: a small brand sparkle after it. It
-   hangs outside the button, so the active page's stroke still runs under
-   the word alone. */
-.tabs button[data-tab="collections"] { position: relative; }
-.tabs button[data-tab="collections"]::after {
-  content: ""; position: absolute; left: calc(100% + .3em); top: -.05em; width: .75em; height: .75em;
-  background: var(--brand);
-  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
-.tab { display: none; } .tab.active { display: block; }
-/* One surface for the page's content: its panels are sections of it,
-   divided by a hairline, rather than separate boxes with gaps between. A
-   theme with a floor makes it frosted (--sheet, --glass). */
-.panes { background: var(--sheet, var(--panel)); border-radius: 14px;
-         box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 12px 32px -14px rgb(0 0 0 / .14);
-         -webkit-backdrop-filter: var(--glass, none); backdrop-filter: var(--glass, none); }
-.panes .panel { background: transparent; border-radius: 0; padding: 1.4rem 1.6rem 1.5rem; }
-.panes .tab > .panel + .panel { border-top: 1px solid var(--line); }
-@media (max-width: 52rem) {
-  .layout { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
-  .tabs { position: static; flex-direction: row; flex-wrap: wrap; gap: .5rem 1.5rem; }
-  .tabs .group { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: .1rem 1rem; }
-  .tabs h2 { margin: 0; }
-}
-
-/* settings, connections, logs, info */
-.themes { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .75rem; }
-td.set-by { font-size: .8125rem; color: var(--muted); white-space: nowrap; }
-.theme-card { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .35rem .5rem;
-              padding: .6rem .8rem; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
-.theme-card:has(input:checked) { border-color: var(--ink); box-shadow: 3px 3px 0 var(--brand); }
-.theme-card .swatch, .theme-card a { grid-column: 2; }
-.swatch { display: flex; gap: 2px; }
-.swatch span { width: 1rem; height: 1rem; border-radius: 2px; border: 1px solid var(--line); }
-.theme-card a { font-size: .8125rem; }
-table.facts th { text-align: left; padding-right: 1.5rem; color: var(--muted); font-weight: 500; }
-details.panel > summary { cursor: pointer; }
-details.panel[open] > summary { margin-bottom: .75rem; }
-.log-line { font-size: .8125rem; padding: .1rem 0; overflow-wrap: anywhere; }
-
-.panel { background: var(--panel); border-radius: var(--radius); padding: 1.1rem 1.25rem 1.25rem; }
-.panel > h2 { margin: 0; font-size: 1.375rem; font-weight: 700; }
-/* A section's heading carries a short bar of the brand colour: the accent a
-   mostly-white theme needs, and a marker where sections meet on one surface. */
-.panes .panel > h2::before { content: ""; display: inline-block; width: .22em; height: .8em; margin-right: .45em;
-                             vertical-align: -.05em; border-radius: 2px; background: var(--brand); }
-.panel > .sub { margin: .3rem 0 1rem; color: var(--muted); font-size: .9375rem; max-width: 70ch; }
-.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.25rem; margin: 0 0 .75rem; }
-.toolbar input[type=search] { font: inherit; font-size: .9375rem; padding: .4rem .6rem; min-width: 14rem;
-                              border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); }
-.toolbar label { font-size: .9375rem; display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
-.toolbar select { font: inherit; font-size: .9375rem; padding: .35rem .4rem; border: 1px solid var(--line);
-                  border-radius: var(--radius); background: var(--paper); color: var(--ink); }
-tr.pick-row { cursor: pointer; }
-a.dmodel { color: var(--ink); text-decoration: none; font-weight: 500; }
-a.dmodel:hover .alias { box-shadow: inset 0 -.3em 0 var(--signal); }
-/* Connections: each endpoint, its models folded under it */
-.ep { padding: .75rem 0; border-top: 1px solid var(--line); }
-.ep-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem 1rem; align-items: center; }
-.ep .base { color: var(--muted); font-size: .875rem; overflow-wrap: anywhere; }
-.ep details.models > summary { cursor: pointer; color: var(--link); font-size: .9375rem; margin-top: .3rem; }
-.ep details.models[open] > summary { margin-bottom: .5rem; }
-.hint { color: var(--muted); font-size: .875rem; margin: .9rem 0 0; max-width: 75ch; }
-
-/* key: folded until asked for */
-details.key { margin: 1rem 0 0; }
-details.key > summary { cursor: pointer; color: var(--link); font-size: .9375rem; width: max-content; }
-details.key dl { margin: .5rem 0 0; display: grid; grid-template-columns: max-content minmax(0, 60ch);
-                 gap: .35rem 1rem; font-size: .9375rem; }
-details.key dt { font-weight: 700; }
-details.key dd { margin: 0; color: var(--ink); }
-
-/* ---- tables --------------------------------------------------------- */
-.scroll { overflow-x: auto; }
-table { border-collapse: collapse; width: 100%; font-size: .9375rem; }
-th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
-th { font-size: .875rem; font-weight: 700; color: var(--ink); white-space: nowrap; }
-th[data-sortable] { cursor: pointer; user-select: none; }
-th[data-sortable]::after { content: ""; display: inline-block; width: .9em; color: var(--muted); }
-th[aria-sort=ascending]::after { content: " \2191"; }
-th[aria-sort=descending]::after { content: " \2193"; }
-td.num, th.num { text-align: right; }
-/* the per-connection model cards on Connections: one fixed column plan */
-table.model-cards { table-layout: fixed; min-width: 52rem; }
-.panel:has(> table.model-cards) { overflow-x: auto; }        /* scrolls on a narrow window instead of wrapping numbers */
-table.model-cards td.num { white-space: nowrap; }
-table.model-cards col.c-model { width: 24%; }
-table.model-cards col.c-via { width: 13%; }
-table.model-cards col.c-n { width: 10%; }
-table.model-cards col.c-input { width: 19%; }
-table.model-cards col.c-lim { width: 6%; }
-table.model-cards td { overflow-wrap: anywhere; }
-tbody tr:hover > td { background: var(--step-1); }
-tr.retired > td { color: var(--muted); }
-tr.retired .alias { text-decoration: line-through; }
-body:not(.show-retired) tr.retired { display: none; }
-body:not(.show-paid) tr.paid { display: none; }
-.muted { color: var(--muted); }
-.ok { color: var(--ok); } .warn { color: var(--warn); } .err { color: var(--err); }
-
-a.model { color: var(--ink); text-decoration: none; font-weight: 500; }
-a.model:hover .alias { box-shadow: inset 0 -.3em 0 var(--signal); }
-.conn { display: block; color: var(--muted); font-size: .8125rem; }
-
-/* status chips */
-.chip { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .8125rem;
-        font-weight: 500; white-space: nowrap; background: var(--quiet-ground); color: var(--muted); }
-.chip.ok { background: var(--ok-ground); color: var(--primary-deep); }
-.chip.warn { background: var(--warn-ground); color: var(--ink); }
-.chip.err { background: var(--err-ground); color: var(--err); }
-.chip.new { background: var(--sky); color: var(--ink-deep); }
-/* an endpoint a model is reached through: outlined, so it reads as a place, not a state */
-.chip.via { background: transparent; border: 1px solid var(--line); color: var(--ink); font-family: var(--font-mono); }
-button.chip { font-family: inherit; border: 0; cursor: pointer; }
-button.chip:hover { outline: 1px solid currentColor; }
-
-/* helped bar: share of judged offloads that helped */
-.helped { display: inline-flex; align-items: center; gap: .5rem; }
-.meter { width: 4.5rem; height: .5rem; background: var(--band); border-radius: 999px; overflow: hidden; }
-.meter span { display: block; height: 100%; background: var(--brand); }
-.meter span.low { background: var(--err); }
-
-/* ---- dialogs -------------------------------------------------------- */
-dialog { border: 1px solid var(--ink); border-radius: var(--radius); padding: 1.25rem 1.4rem;
-         width: min(40rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem);
-         background: var(--paper-2); color: var(--ink); box-shadow: 6px 6px 0 var(--ink); }
-dialog::backdrop { background: color-mix(in oklab, var(--ink-deep) 45%, transparent); }
-dialog h2 { margin: 0 0 .2rem; font-size: 1.375rem; font-weight: 700; }
-:is(dialog, .form-panel) .served { color: var(--muted); font-size: .9375rem; margin: 0 0 .9rem; overflow-wrap: anywhere; }
-:is(dialog, .form-panel) label.field { display: block; font-weight: 500; font-size: .9375rem; margin: .9rem 0 .3rem; }
-:is(dialog, .form-panel) input:not([type=checkbox]):not([type=radio]), :is(dialog, .form-panel) select, :is(dialog, .form-panel) textarea {
-  width: 100%; font: inherit; padding: .45rem .6rem; color: var(--ink);
-  border: 1px solid var(--muted); border-radius: var(--radius); background: var(--paper-2); }
-:is(dialog, .form-panel) .rules { font-size: .875rem; color: var(--muted); margin: .35rem 0 0; }
-:is(dialog, .form-panel) label.check { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; cursor: pointer; }
-:is(dialog, .form-panel) fieldset { border: 0; padding: 0; margin: 1rem 0 0; }
-:is(dialog, .form-panel) .members { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0 1rem;
-                  max-height: 14rem; overflow: auto; }
-:is(dialog, .form-panel) .members label.check { margin-top: .35rem; font-size: .875rem; }
-:is(dialog, .form-panel) input.member-filter { font-size: .9375rem; padding: .4rem .6rem; margin-bottom: .2rem; }
-:is(dialog, .form-panel) .members input:disabled + span { color: var(--muted); }
-:is(dialog, .form-panel) .limits { display: flex; flex-wrap: wrap; gap: .3rem .8rem; margin-top: .3rem; font-size: .875rem; }
-:is(dialog, .form-panel) .limits input { width: 6.5rem !important; padding: .2rem .4rem !important; }
-:is(dialog, .form-panel) .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
-:is(dialog, .form-panel) .facts .src { font-size: .75rem; color: var(--muted); }
-:is(dialog, .form-panel) .profile { margin-top: .9rem; display: grid; gap: .3rem; font-size: .875rem; }
-:is(dialog, .form-panel) .profile .chip { margin-right: .25rem; }
-:is(dialog, .form-panel) .profile .src { font-size: .75rem; color: var(--muted); }
-:is(dialog, .form-panel) .settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
-@media (max-width: 40rem) { :is(dialog, .form-panel) .settings { grid-template-columns: minmax(0, 1fr); } }
-:is(dialog, .form-panel) fieldset label.check { margin-top: .4rem; flex-wrap: wrap; }
-:is(dialog, .form-panel) fieldset label.check .muted { font-size: .875rem; }
-:is(dialog, .form-panel) .errors { color: var(--err); font-size: .9375rem; margin: .8rem 0 0; }
-:is(dialog, .form-panel) .done { color: var(--ok); font-size: .9375rem; margin: .8rem 0 0; }
-:is(dialog, .form-panel) .actions { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1.25rem; flex-wrap: wrap; }
-.form-panel .actions { justify-content: flex-start; }    /* on a page, a form's button sits under its fields */
-:is(dialog, .form-panel) .note { background: var(--step-1); border-radius: var(--radius); padding: .6rem .75rem; font-size: .9375rem; margin-top: .75rem; }
-:is(dialog, .form-panel) details.remove { margin-top: 1.25rem; padding-top: .75rem; border-top: 1px solid var(--line); }
-:is(dialog, .form-panel) details.remove > summary { cursor: pointer; color: var(--err); }
-
-/* endpoints */
-.endpoint { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1rem; align-items: center;
-            padding: .5rem .75rem; margin: 0 -.75rem; border-radius: var(--radius); }
-.endpoint:hover { background: var(--step-1); }
-.endpoint .base { color: var(--muted); font-size: .875rem; overflow-wrap: anywhere; }
-:is(dialog, .form-panel) h3.form-head { margin: 1.25rem 0 0; font-size: 1rem; font-weight: 700; }
-:is(dialog, .form-panel) input[readonly] { background: var(--step-1); }
-/* Add an endpoint's choices: API key, then each provider; the chosen one pressed */
-.choices { display: flex; flex-wrap: wrap; gap: .5rem; margin: .2rem 0 .4rem; }
-.choices .btn[aria-pressed="true"] { border-color: var(--ink); box-shadow: 3px 3px 0 var(--brand); font-weight: 600; }
-
-/* onboarding picker */
-.picker { max-height: 22rem; overflow: auto; margin-top: .6rem; border-top: 1px solid var(--line); }
-.picker details.grp { margin: 0; color: inherit; }
-.picker .grp > summary { position: sticky; top: 0; z-index: 1; padding: .5rem 0 .3rem; font-weight: 700;
-             background: var(--paper-2); color: var(--muted); }
-.pick { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .6rem; align-items: center;
-        padding: .35rem .25rem; border-radius: var(--radius); cursor: pointer; }
-.pick:hover { background: var(--step-1); }
-.pick:has(input:checked) { background: var(--warn-ground); }
-.pick .alias { overflow-wrap: anywhere; font-size: .9375rem; }
-.picker .empty { color: var(--muted); padding: 1rem 0; }
-.picker details { margin: .5rem 0; color: var(--muted); }
-.picker details summary { cursor: pointer; font-size: .875rem; }
-
-/* the onboarding queue: its progress in the header, its list in the popup */
-.oq { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .3rem .75rem;
-      font-size: .875rem; color: var(--ink); }
-/* Short enough to sit beside the button; the whole line is its title. */
-.oq #oq-text { max-width: min(17rem, 100%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-/* The status as a chip whose fill wipes across as models finish (bench.js
-   sets --fill), ending green, or red with one shake. */
-.oq-chip { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center;
-           max-width: 100%; min-height: 2.1rem; padding: 0 .8rem; border: 1px solid var(--line);
-           border-radius: var(--radius); background: var(--paper-2); }
-.oq-chip::before { content: ""; position: absolute; inset: 0 auto 0 0; z-index: -1; width: var(--fill, 0%);
-                   background: color-mix(in oklab, var(--brand) 22%, var(--paper-2)); transition: width .6s ease; }
-.oq-chip.done { border-color: var(--ok); }
-.oq-chip.done::before { background: var(--ok-ground); }
-.oq-chip.fail { border-color: var(--err); color: var(--err); animation: oq-shake .45s ease 1; }
-.oq-chip.fail::before { background: var(--err-ground); }
-@keyframes oq-shake { 20% { transform: translateX(-5px); } 45% { transform: translateX(5px); }
-                      70% { transform: translateX(-3px); } 90% { transform: translateX(2px); } }
-@media (prefers-reduced-motion: reduce) {
-  .oq-chip { animation: none; }
-  .oq-chip::before { transition: none; }
-}
-.oq [hidden] { display: none; }
-ul.oq-list { list-style: none; padding: 0; margin: .75rem 0 0; display: grid; gap: .5rem;
-             max-height: 22rem; overflow: auto; }
-ul.oq-list li { padding: .4rem .25rem; border-bottom: 1px solid var(--line); }
-ul.oq-list .what { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
-ul.oq-list .alias { overflow-wrap: anywhere; font-size: .9375rem; }
-ul.oq-list small { display: block; color: var(--muted); font-size: .875rem; overflow-wrap: anywhere; }
-
-/* onboarding progress */
-ol.steps { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .35rem; }
-ol.steps li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: .5rem; align-items: start; color: var(--muted); }
-ol.steps li::before { content: ""; width: .75rem; height: .75rem; margin-top: .4rem; border-radius: 999px;
-                      border: 2px solid var(--muted); }
-ol.steps li.now { color: var(--ink); font-weight: 500; }
-ol.steps li.now::before { border-color: var(--ink); background: var(--signal); }
-ol.steps li.done { color: var(--ink); }
-ol.steps li.done::before { border-color: var(--brand); background: var(--brand); }
-ol.steps li.fail::before { border-color: var(--err); background: var(--err); }
-ol.steps small { display: block; grid-column: 2; color: var(--muted); font-weight: 400; font-size: .875rem; overflow-wrap: anywhere; }
-pre.log { background: var(--log-ground, var(--ink-deep)); color: var(--log-ink, var(--paper));
-          font-size: .8125rem; line-height: 1.45;
-          padding: .7rem .8rem; border-radius: var(--radius); max-height: 16rem; overflow: auto;
-          white-space: pre-wrap; margin: .5rem 0 0; }
-pre.log.answer { max-height: 40vh; }
-
-/* Benchmarks charts (Observable Plot) */
-.chart { margin: .5rem 0 .75rem; overflow-x: auto; }
-.chart.muted { font-size: .875rem; }
-h3.chart-head { font-size: 1rem; margin: 1rem 0 .2rem; }
-/* the Collections tab: the dialog's form, kept to a readable width */
-.panel.form-panel > :not(#c-list, table) { max-width: 46rem; }
-/* a list of things you open (collections), with its New button above */
-.list-actions { display: flex; align-items: center; gap: 1rem; margin: .75rem 0; flex-wrap: wrap; }
-.list-actions .done { margin: 0; color: var(--ok); font-size: .9375rem; }
-.list-actions .errors { color: var(--err); font-size: .9375rem; }
-button.c-row { width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: 0;
-               border-radius: var(--radius); cursor: pointer; }
-button.c-row:hover, button.c-row:focus-visible { background: var(--step-1); }
-.c-row .open-hint { color: var(--muted); font-size: .875rem; white-space: nowrap; }
-/* suggested collection tags under the field */
-.tag-picks { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
-.tag-picks .chip { cursor: pointer; border: 0; font-family: inherit; }
-.tag-picks .chip:hover { outline: 1px solid currentColor; }
-/* a field with fixed text in front (the collection name after "bench/") */
-.prefixed { display: flex; align-items: stretch; }
-.prefixed .prefix { display: flex; align-items: center; padding: 0 .55rem; font-family: var(--font-mono);
-                    font-size: .9375rem; color: var(--muted); background: var(--step-1);
-                    border: 1px solid var(--line); border-right: 0; border-radius: var(--radius) 0 0 var(--radius); }
-.prefixed input { flex: 1; min-width: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
-.c-settings, .limits-block { margin-top: 1.25rem; }
-.c-settings > summary, .limits-block > summary { cursor: pointer; }
-.actions .spacer { flex: 1; }
-.chart figure { margin: 0; }
-.chart [aria-label="color-legend"], .chart div[class$="-swatches"] { font-size: .8125rem; margin-bottom: .4rem; }
-
-dialog .pick { display: flex; gap: 1.5rem; }
-
-@media (max-width: 40rem) {
-  header h1 { font-size: 1.75rem; }
-  .problem { grid-template-columns: minmax(0, 1fr); }
-  .problem .acts { justify-content: flex-start; }
-  .ep-head { grid-template-columns: minmax(0, 1fr); }
-  .ep .acts { justify-content: flex-start; }
-  details.key dl { grid-template-columns: minmax(0, 1fr); }
-  .toolbar input[type=search] { min-width: 0; width: 100%; }
-}
-@media (prefers-reduced-motion: reduce) {
-  * { transition: none !important; }
-}
+/* Benchwarmers. The theme's colour tokens arrive first (ui/themes/*.css, the
+   Wendell Research palette by default, emitted by serve.py); the values below
+   are derived from them: grounds mixed from a theme colour, and the bench's
+   own spacing. A theme sets colours only. */
+
+:root {
+  --ok: var(--primary);
+  --ok-ground: color-mix(in oklab, var(--primary) 13%, var(--paper-2));
+  --warn-ground: color-mix(in oklab, var(--signal) 55%, var(--paper-2));
+  --err-ground: color-mix(in oklab, var(--err) 11%, var(--paper-2));
+  --quiet-ground: var(--band);
+  --panel: var(--paper-2);
+  --step-1: color-mix(in oklab, var(--band) 55%, var(--paper));
+  color-scheme: var(--scheme, light);
+}
+
+* { box-sizing: border-box; }
+[hidden] { display: none !important; }
+html { -webkit-text-size-adjust: 100%; }
+body {
+  margin: 0;
+  /* A theme may draw the page's ground (Hardwood's maple court) and a line
+     across the top (its crimson court line); the others are plain paper. */
+  background: var(--floor, var(--paper));
+  border-top: .4rem solid var(--court-line, transparent);
+  color: var(--ink);
+  font: 400 1rem/1.55 var(--font-display);
+  -webkit-font-smoothing: antialiased;
+}
+::selection { background: var(--signal); color: var(--ink); }
+a { color: var(--link); text-underline-offset: .18em; }
+:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 2px; }
+code, .mono, td.num, .chip, .alias {
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+}
+code { font-size: .875em; background: var(--step-1); padding: .05rem .3rem; border-radius: var(--radius); }
+h1, h2, h3 { line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
+
+/* ---- header --------------------------------------------------------- */
+/* The page is wider than the theme's reading measure: with a sidebar, a
+   76rem page left a narrow column and wide empty margins on a large screen.
+   Prose inside panels keeps its own measure (.panel > .sub). */
+/* One line: the name on its bench, the credit beside it, the actions pushed
+   to the far end. */
+header {
+  max-width: var(--page, 104rem); margin: 0 auto;
+  padding: 1.5rem var(--gutter) 1rem;
+  display: flex; flex-wrap: wrap; align-items: center; column-gap: 1.25rem;
+}
+header h1 { margin: 0; font-size: 2.25rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
+/* The name sits on a team bench: a seat in the team's colour (the theme's
+   brand, or --bench-seat) on two legs joined by a rail. Drawn in CSS from the
+   font size, so it scales with the heading. With line-height 1 the letters
+   end about .14em above the box, so the seat's top is put there: the name
+   rests on it. */
+header h1 span { position: relative; display: inline-block; padding: 0 .14em .6em; }
+header h1 span::after {                                   /* the seat */
+  content: ""; position: absolute; left: -.08em; right: -.08em; bottom: .46em; height: .28em;
+  background: var(--bench-seat, var(--brand)); border-radius: .06em;
+  box-shadow: inset 0 .055em 0 rgb(255 255 255 / .28), 0 .05em 0 rgb(0 0 0 / .3);
+}
+header h1 span::before {                                  /* legs and the rail between them */
+  --leg: var(--bench-leg, var(--ink-2));
+  content: ""; position: absolute; left: .18em; right: .18em; bottom: 0; height: .5em;
+  background:
+    linear-gradient(var(--leg), var(--leg)) left top / .11em 100% no-repeat,
+    linear-gradient(var(--leg), var(--leg)) right top / .11em 100% no-repeat,
+    linear-gradient(var(--leg), var(--leg)) center 66% / 100% .07em no-repeat;
+}
+/* The credit at the bench's feet: level with the bottom of the name's group. */
+header .sub { align-self: flex-end; margin: 0 auto 0 -.6rem; line-height: 1; color: var(--muted); font-size: .9375rem; }
+header .sub a { color: var(--ink); font-weight: 500; text-decoration-color: var(--brand); }
+/* Right-aligned, on the name's line or, when it does not fit, on its own. */
+.head-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center;
+                margin-left: auto; justify-content: flex-end; }
+
+/* ---- buttons -------------------------------------------------------- */
+button { font: inherit; cursor: pointer; }
+.btn {
+  display: inline-flex; align-items: center; gap: .4rem;
+  padding: .5rem .9rem; border-radius: var(--radius);
+  border: 1px solid var(--ink); background: var(--panel); color: var(--ink);
+  font-weight: 500; font-size: .9375rem;
+  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
+}
+.btn:hover { background: var(--step-1); }
+.btn.primary { background: var(--ink); color: var(--paper); box-shadow: 4px 4px 0 var(--brand); }
+.btn.primary:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--brand); background: var(--ink); }
+.btn.danger { background: var(--err); border-color: var(--err); color: var(--on-err, #fff); }
+.btn.danger:hover { background: color-mix(in oklab, var(--err) 86%, #000); }
+.btn.small { padding: .25rem .6rem; font-size: .875rem; }
+.btn:disabled { opacity: .5; cursor: default; transform: none; box-shadow: none; }
+.btn.fresh { background: var(--signal); border-color: var(--ink); }
+.btn.fresh:hover { background: var(--signal); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
+.linkish { background: none; border: 0; padding: 0; color: var(--link); text-decoration: underline;
+           text-underline-offset: .18em; font-size: inherit; }
+
+/* ---- layout --------------------------------------------------------- */
+main { max-width: var(--page, 104rem); margin: 0 auto; padding: 0 var(--gutter) 4rem; }
+
+/* problems: what needs a person, each with the action that resolves it */
+.problems { background: var(--sheet, var(--panel)); border-radius: 14px; padding: 1rem 1.4rem; margin: .5rem 0 1.5rem;
+            box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 12px 32px -14px rgb(0 0 0 / .14);
+            -webkit-backdrop-filter: var(--glass, none); backdrop-filter: var(--glass, none); }
+.problems h2 { margin: 0 0 .25rem; font-size: 1.25rem; font-weight: 700; }
+.problems > p { margin: 0 0 .5rem; color: var(--muted); font-size: .9375rem; }
+.problem { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem 1rem;
+           align-items: center; padding: .55rem .75rem; margin: 0 -.75rem; border-radius: var(--radius); }
+.problem:hover { background: var(--step-1); }
+.problems details { margin-top: .5rem; }
+.problems details > summary { cursor: pointer; font-weight: 500; padding: .4rem 0; }
+.problems details > summary .muted { font-weight: 400; }
+.problem .what { font-weight: 500; }
+.problem .why { color: var(--muted); font-size: .875rem; overflow-wrap: anywhere; }
+.problem .acts, .endpoint .acts, .ep .acts { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
+.row-input { display: flex; gap: .5rem; align-items: center; margin-top: .35rem; }
+.row-input input { flex: 1; min-width: 0; margin: 0 !important; }
+.sub-head { font-weight: 600; margin: 1rem 0 .25rem; }
+.problem .chip { margin-right: .4rem; }
+.problems .head { display: flex; align-items: baseline; gap: .5rem; }
+.problems .head h2 { margin-bottom: .25rem; }
+.problems .sep { display: none; color: var(--muted); }
+/* Hidden (bench.js): one line, "Action needed · 3 · show", until something new */
+.problems.collapsed { padding: .5rem 1.25rem; }
+.problems.collapsed > :not(.head) { display: none; }
+.problems.collapsed .head h2 { margin: 0; font-size: 1rem; }
+.problems.collapsed .sep { display: inline; }
+
+/* pages: a grouped sidebar (Observe, Gateway, Control); the group names and
+   the active page carry the theme's brand colour. A theme with a floor backs
+   the sidebar with frosted cream (--rail) so it reads over the court. On a
+   narrow screen the groups sit in a row above the page. */
+.layout { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 1.5rem; align-items: start; }
+.tabs { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 1.1rem;
+        background: var(--rail, transparent); padding: var(--rail-pad, 0); border-radius: 14px;
+        -webkit-backdrop-filter: var(--glass, none); backdrop-filter: var(--glass, none); }
+.tabs .group { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; }
+.tabs h2 { margin: 0 0 .2rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em;
+           text-transform: uppercase; color: color-mix(in oklab, var(--brand) 72%, var(--ink)); }
+           /* the brand, pulled toward the ink so small text stays legible in any theme */
+/* No bottom padding and a tight line height, so the box ends just under the
+   letters; the spacing between pages is the group's gap instead. */
+.tabs button { background: none; border: 0; padding: 0; line-height: 1.15; color: var(--muted); text-align: left;
+               font-size: 1rem; font-weight: 500; }
+.tabs button:hover { color: var(--ink); }
+/* The active page: a highlighter stroke across the bottom of its letters,
+   the header's old mark. */
+.tabs button[aria-selected="true"] { color: var(--ink); font-weight: 700;
+                                     box-shadow: inset 0 -.42em 0 var(--signal); }
+/* Collections, the bench's own idea: a small brand sparkle after it. It
+   hangs outside the button, so the active page's stroke still runs under
+   the word alone. */
+.tabs button[data-tab="collections"] { position: relative; }
+.tabs button[data-tab="collections"]::after {
+  content: ""; position: absolute; left: calc(100% + .3em); top: -.05em; width: .75em; height: .75em;
+  background: var(--brand);
+  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
+.tab { display: none; } .tab.active { display: block; }
+/* One surface for the page's content: its panels are sections of it,
+   divided by a hairline, rather than separate boxes with gaps between. A
+   theme with a floor makes it frosted (--sheet, --glass). */
+.panes { background: var(--sheet, var(--panel)); border-radius: 14px;
+         box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 12px 32px -14px rgb(0 0 0 / .14);
+         -webkit-backdrop-filter: var(--glass, none); backdrop-filter: var(--glass, none); }
+.panes .panel { background: transparent; border-radius: 0; padding: 1.4rem 1.6rem 1.5rem; }
+.panes .tab > .panel + .panel { border-top: 1px solid var(--line); }
+@media (max-width: 52rem) {
+  .layout { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
+  .tabs { position: static; flex-direction: row; flex-wrap: wrap; gap: .5rem 1.5rem; }
+  .tabs .group { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: .1rem 1rem; }
+  .tabs h2 { margin: 0; }
+}
+
+/* settings, connections, logs, info */
+.themes { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .75rem; }
+td.set-by { font-size: .8125rem; color: var(--muted); white-space: nowrap; }
+.theme-card { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .35rem .5rem;
+              padding: .6rem .8rem; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
+.theme-card:has(input:checked) { border-color: var(--ink); box-shadow: 3px 3px 0 var(--brand); }
+.theme-card .swatch, .theme-card a { grid-column: 2; }
+.swatch { display: flex; gap: 2px; }
+.swatch span { width: 1rem; height: 1rem; border-radius: 2px; border: 1px solid var(--line); }
+.theme-card a { font-size: .8125rem; }
+table.facts th { text-align: left; padding-right: 1.5rem; color: var(--muted); font-weight: 500; }
+details.panel > summary { cursor: pointer; }
+details.panel[open] > summary { margin-bottom: .75rem; }
+.log-line { font-size: .8125rem; padding: .1rem 0; overflow-wrap: anywhere; }
+
+.panel { background: var(--panel); border-radius: var(--radius); padding: 1.1rem 1.25rem 1.25rem; }
+.panel > h2 { margin: 0; font-size: 1.375rem; font-weight: 700; }
+/* A section's heading carries a short bar of the brand colour: the accent a
+   mostly-white theme needs, and a marker where sections meet on one surface. */
+.panes .panel > h2::before { content: ""; display: inline-block; width: .22em; height: .8em; margin-right: .45em;
+                             vertical-align: -.05em; border-radius: 2px; background: var(--brand); }
+.panel > .sub { margin: .3rem 0 1rem; color: var(--muted); font-size: .9375rem; max-width: 70ch; }
+.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.25rem; margin: 0 0 .75rem; }
+.toolbar input[type=search] { font: inherit; font-size: .9375rem; padding: .4rem .6rem; min-width: 14rem;
+                              border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); }
+.toolbar label { font-size: .9375rem; display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
+.toolbar select { font: inherit; font-size: .9375rem; padding: .35rem .4rem; border: 1px solid var(--line);
+                  border-radius: var(--radius); background: var(--paper); color: var(--ink); }
+tr.pick-row { cursor: pointer; }
+a.dmodel { color: var(--ink); text-decoration: none; font-weight: 500; }
+a.dmodel:hover .alias { box-shadow: inset 0 -.3em 0 var(--signal); }
+/* Connections: each endpoint, its models folded under it */
+.ep { padding: .75rem 0; border-top: 1px solid var(--line); }
+.ep-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem 1rem; align-items: center; }
+.ep .base { color: var(--muted); font-size: .875rem; overflow-wrap: anywhere; }
+.ep details.models > summary { cursor: pointer; color: var(--link); font-size: .9375rem; margin-top: .3rem; }
+.ep details.models[open] > summary { margin-bottom: .5rem; }
+.hint { color: var(--muted); font-size: .875rem; margin: .9rem 0 0; max-width: 75ch; }
+
+/* key: folded until asked for */
+details.key { margin: 1rem 0 0; }
+details.key > summary { cursor: pointer; color: var(--link); font-size: .9375rem; width: max-content; }
+details.key dl { margin: .5rem 0 0; display: grid; grid-template-columns: max-content minmax(0, 60ch);
+                 gap: .35rem 1rem; font-size: .9375rem; }
+details.key dt { font-weight: 700; }
+details.key dd { margin: 0; color: var(--ink); }
+
+/* ---- tables --------------------------------------------------------- */
+.scroll { overflow-x: auto; }
+table { border-collapse: collapse; width: 100%; font-size: .9375rem; }
+th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
+th { font-size: .875rem; font-weight: 700; color: var(--ink); white-space: nowrap; }
+th[data-sortable] { cursor: pointer; user-select: none; }
+th[data-sortable]::after { content: ""; display: inline-block; width: .9em; color: var(--muted); }
+th[aria-sort=ascending]::after { content: " \2191"; }
+th[aria-sort=descending]::after { content: " \2193"; }
+td.num, th.num { text-align: right; }
+/* the per-connection model cards on Connections: one fixed column plan */
+table.model-cards { table-layout: fixed; min-width: 52rem; }
+.panel:has(> table.model-cards) { overflow-x: auto; }        /* scrolls on a narrow window instead of wrapping numbers */
+table.model-cards td.num { white-space: nowrap; }
+table.model-cards col.c-model { width: 24%; }
+table.model-cards col.c-via { width: 13%; }
+table.model-cards col.c-n { width: 10%; }
+table.model-cards col.c-input { width: 19%; }
+table.model-cards col.c-lim { width: 6%; }
+table.model-cards td { overflow-wrap: anywhere; }
+tbody tr:hover > td { background: var(--step-1); }
+tr.retired > td { color: var(--muted); }
+tr.retired .alias { text-decoration: line-through; }
+body:not(.show-retired) tr.retired { display: none; }
+body:not(.show-paid) tr.paid { display: none; }
+.muted { color: var(--muted); }
+.ok { color: var(--ok); } .warn { color: var(--warn); } .err { color: var(--err); }
+
+a.model { color: var(--ink); text-decoration: none; font-weight: 500; }
+a.model:hover .alias { box-shadow: inset 0 -.3em 0 var(--signal); }
+.conn { display: block; color: var(--muted); font-size: .8125rem; }
+
+/* status chips */
+.chip { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .8125rem;
+        font-weight: 500; white-space: nowrap; background: var(--quiet-ground); color: var(--muted); }
+.chip.ok { background: var(--ok-ground); color: var(--primary-deep); }
+.chip.warn { background: var(--warn-ground); color: var(--ink); }
+.chip.err { background: var(--err-ground); color: var(--err); }
+.chip.new { background: var(--sky); color: var(--ink-deep); }
+/* an endpoint a model is reached through: outlined, so it reads as a place, not a state */
+.chip.via { background: transparent; border: 1px solid var(--line); color: var(--ink); font-family: var(--font-mono); }
+button.chip { font-family: inherit; border: 0; cursor: pointer; }
+button.chip:hover { outline: 1px solid currentColor; }
+
+/* helped bar: share of judged offloads that helped */
+.helped { display: inline-flex; align-items: center; gap: .5rem; }
+.meter { width: 4.5rem; height: .5rem; background: var(--band); border-radius: 999px; overflow: hidden; }
+.meter span { display: block; height: 100%; background: var(--brand); }
+.meter span.low { background: var(--err); }
+
+/* ---- dialogs -------------------------------------------------------- */
+dialog { border: 1px solid var(--ink); border-radius: var(--radius); padding: 1.25rem 1.4rem;
+         width: min(40rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem);
+         background: var(--paper-2); color: var(--ink); box-shadow: 6px 6px 0 var(--ink); }
+dialog::backdrop { background: color-mix(in oklab, var(--ink-deep) 45%, transparent); }
+dialog h2 { margin: 0 0 .2rem; font-size: 1.375rem; font-weight: 700; }
+:is(dialog, .form-panel) .served { color: var(--muted); font-size: .9375rem; margin: 0 0 .9rem; overflow-wrap: anywhere; }
+:is(dialog, .form-panel) label.field { display: block; font-weight: 500; font-size: .9375rem; margin: .9rem 0 .3rem; }
+:is(dialog, .form-panel) input:not([type=checkbox]):not([type=radio]), :is(dialog, .form-panel) select, :is(dialog, .form-panel) textarea {
+  width: 100%; font: inherit; padding: .45rem .6rem; color: var(--ink);
+  border: 1px solid var(--muted); border-radius: var(--radius); background: var(--paper-2); }
+:is(dialog, .form-panel) .rules { font-size: .875rem; color: var(--muted); margin: .35rem 0 0; }
+:is(dialog, .form-panel) label.check { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; cursor: pointer; }
+:is(dialog, .form-panel) fieldset { border: 0; padding: 0; margin: 1rem 0 0; }
+:is(dialog, .form-panel) .members { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0 1rem;
+                  max-height: 14rem; overflow: auto; }
+:is(dialog, .form-panel) .members label.check { margin-top: .35rem; font-size: .875rem; }
+:is(dialog, .form-panel) input.member-filter { font-size: .9375rem; padding: .4rem .6rem; margin-bottom: .2rem; }
+:is(dialog, .form-panel) .members input:disabled + span { color: var(--muted); }
+/* Ruled out by the collection's tags (bench.js applyTags): greyed; a ticked
+   one stays tickable and is marked, so it can be taken off. */
+:is(dialog, .form-panel) .members label.check.blocked:not(.clash) { cursor: not-allowed; }
+:is(dialog, .form-panel) .members label.check.clash span { color: var(--warn); }
+:is(dialog, .form-panel) .limits { display: flex; flex-wrap: wrap; gap: .3rem .8rem; margin-top: .3rem; font-size: .875rem; }
+:is(dialog, .form-panel) .limits input { width: 6.5rem !important; padding: .2rem .4rem !important; }
+:is(dialog, .form-panel) .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
+:is(dialog, .form-panel) .facts .src { font-size: .75rem; color: var(--muted); }
+:is(dialog, .form-panel) .profile { margin-top: .9rem; display: grid; gap: .3rem; font-size: .875rem; }
+:is(dialog, .form-panel) .profile .chip { margin-right: .25rem; }
+:is(dialog, .form-panel) .profile .src { font-size: .75rem; color: var(--muted); }
+:is(dialog, .form-panel) .settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
+@media (max-width: 40rem) { :is(dialog, .form-panel) .settings { grid-template-columns: minmax(0, 1fr); } }
+:is(dialog, .form-panel) fieldset label.check { margin-top: .4rem; flex-wrap: wrap; }
+:is(dialog, .form-panel) fieldset label.check .muted { font-size: .875rem; }
+:is(dialog, .form-panel) .errors { color: var(--err); font-size: .9375rem; margin: .8rem 0 0; }
+:is(dialog, .form-panel) .done { color: var(--ok); font-size: .9375rem; margin: .8rem 0 0; }
+:is(dialog, .form-panel) .actions { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1.25rem; flex-wrap: wrap; }
+.form-panel .actions { justify-content: flex-start; }    /* on a page, a form's button sits under its fields */
+:is(dialog, .form-panel) .note { background: var(--step-1); border-radius: var(--radius); padding: .6rem .75rem; font-size: .9375rem; margin-top: .75rem; }
+:is(dialog, .form-panel) details.remove { margin-top: 1.25rem; padding-top: .75rem; border-top: 1px solid var(--line); }
+:is(dialog, .form-panel) details.remove > summary { cursor: pointer; color: var(--err); }
+
+/* endpoints */
+.endpoint { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1rem; align-items: center;
+            padding: .5rem .75rem; margin: 0 -.75rem; border-radius: var(--radius); }
+.endpoint:hover { background: var(--step-1); }
+.endpoint .base { color: var(--muted); font-size: .875rem; overflow-wrap: anywhere; }
+:is(dialog, .form-panel) h3.form-head { margin: 1.25rem 0 0; font-size: 1rem; font-weight: 700; }
+:is(dialog, .form-panel) input[readonly] { background: var(--step-1); }
+/* Add an endpoint's choices: API key, then each provider; the chosen one pressed */
+.choices { display: flex; flex-wrap: wrap; gap: .5rem; margin: .2rem 0 .4rem; }
+.choices .btn[aria-pressed="true"] { border-color: var(--ink); box-shadow: 3px 3px 0 var(--brand); font-weight: 600; }
+
+/* onboarding picker */
+.picker { max-height: 22rem; overflow: auto; margin-top: .6rem; border-top: 1px solid var(--line); }
+.picker details.grp { margin: 0; color: inherit; }
+.picker .grp > summary { position: sticky; top: 0; z-index: 1; padding: .5rem 0 .3rem; font-weight: 700;
+             background: var(--paper-2); color: var(--muted); }
+.pick { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .6rem; align-items: center;
+        padding: .35rem .25rem; border-radius: var(--radius); cursor: pointer; }
+.pick:hover { background: var(--step-1); }
+.pick:has(input:checked) { background: var(--warn-ground); }
+.pick .alias { overflow-wrap: anywhere; font-size: .9375rem; }
+.pick .chip.mod { margin-left: .4rem; font-size: .75rem; vertical-align: .1em; }
+.picker .empty { color: var(--muted); padding: 1rem 0; }
+.picker details { margin: .5rem 0; color: var(--muted); }
+.picker details summary { cursor: pointer; font-size: .875rem; }
+
+/* the onboarding queue: its progress in the header, its list in the popup */
+.oq { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .3rem .75rem;
+      font-size: .875rem; color: var(--ink); }
+/* Short enough to sit beside the button; the whole line is its title. */
+.oq #oq-text { max-width: min(17rem, 100%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* The status as a chip whose fill wipes across as models finish (bench.js
+   sets --fill), ending green, or red with one shake. */
+.oq-chip { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center;
+           max-width: 100%; min-height: 2.1rem; padding: 0 .8rem; border: 1px solid var(--line);
+           border-radius: var(--radius); background: var(--paper-2); }
+.oq-chip::before { content: ""; position: absolute; inset: 0 auto 0 0; z-index: -1; width: var(--fill, 0%);
+                   background: color-mix(in oklab, var(--brand) 22%, var(--paper-2)); transition: width .6s ease; }
+.oq-chip.done { border-color: var(--ok); }
+.oq-chip.done::before { background: var(--ok-ground); }
+.oq-chip.fail { border-color: var(--err); color: var(--err); animation: oq-shake .45s ease 1; }
+.oq-chip.fail::before { background: var(--err-ground); }
+@keyframes oq-shake { 20% { transform: translateX(-5px); } 45% { transform: translateX(5px); }
+                      70% { transform: translateX(-3px); } 90% { transform: translateX(2px); } }
+@media (prefers-reduced-motion: reduce) {
+  .oq-chip { animation: none; }
+  .oq-chip::before { transition: none; }
+}
+.oq [hidden] { display: none; }
+ul.oq-list { list-style: none; padding: 0; margin: .75rem 0 0; display: grid; gap: .5rem;
+             max-height: 22rem; overflow: auto; }
+ul.oq-list li { padding: .4rem .25rem; border-bottom: 1px solid var(--line); }
+ul.oq-list .what { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
+ul.oq-list .alias { overflow-wrap: anywhere; font-size: .9375rem; }
+ul.oq-list small { display: block; color: var(--muted); font-size: .875rem; overflow-wrap: anywhere; }
+
+/* onboarding progress */
+ol.steps { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .35rem; }
+ol.steps li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: .5rem; align-items: start; color: var(--muted); }
+ol.steps li::before { content: ""; width: .75rem; height: .75rem; margin-top: .4rem; border-radius: 999px;
+                      border: 2px solid var(--muted); }
+ol.steps li.now { color: var(--ink); font-weight: 500; }
+ol.steps li.now::before { border-color: var(--ink); background: var(--signal); }
+ol.steps li.done { color: var(--ink); }
+ol.steps li.done::before { border-color: var(--brand); background: var(--brand); }
+ol.steps li.fail::before { border-color: var(--err); background: var(--err); }
+ol.steps small { display: block; grid-column: 2; color: var(--muted); font-weight: 400; font-size: .875rem; overflow-wrap: anywhere; }
+pre.log { background: var(--log-ground, var(--ink-deep)); color: var(--log-ink, var(--paper));
+          font-size: .8125rem; line-height: 1.45;
+          padding: .7rem .8rem; border-radius: var(--radius); max-height: 16rem; overflow: auto;
+          white-space: pre-wrap; margin: .5rem 0 0; }
+pre.log.answer { max-height: 40vh; }
+
+/* Benchmarks charts (Observable Plot) */
+.chart { margin: .5rem 0 .75rem; overflow-x: auto; }
+.chart.muted { font-size: .875rem; }
+h3.chart-head { font-size: 1rem; margin: 1rem 0 .2rem; }
+/* the Collections tab: the dialog's form, kept to a readable width */
+.panel.form-panel > :not(#c-list, table) { max-width: 46rem; }
+/* a list of things you open (collections), with its New button above */
+.list-actions { display: flex; align-items: center; gap: 1rem; margin: .75rem 0; flex-wrap: wrap; }
+.list-actions .done { margin: 0; color: var(--ok); font-size: .9375rem; }
+.list-actions .errors { color: var(--err); font-size: .9375rem; }
+button.c-row { width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: 0;
+               border-radius: var(--radius); cursor: pointer; }
+button.c-row:hover, button.c-row:focus-visible { background: var(--step-1); }
+.c-row .open-hint { color: var(--muted); font-size: .875rem; white-space: nowrap; }
+/* suggested collection tags under the field */
+.tag-picks { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
+.tag-picks .chip { cursor: pointer; border: 0; font-family: inherit; }
+.tag-picks .chip:hover { outline: 1px solid currentColor; }
+/* a field with fixed text in front (the collection name after "bench/") */
+.prefixed { display: flex; align-items: stretch; }
+.prefixed .prefix { display: flex; align-items: center; padding: 0 .55rem; font-family: var(--font-mono);
+                    font-size: .9375rem; color: var(--muted); background: var(--step-1);
+                    border: 1px solid var(--line); border-right: 0; border-radius: var(--radius) 0 0 var(--radius); }
+.prefixed input { flex: 1; min-width: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
+.c-settings, .limits-block { margin-top: 1.25rem; }
+.c-settings > summary, .limits-block > summary { cursor: pointer; }
+.actions .spacer { flex: 1; }
+.chart figure { margin: 0; }
+.chart [aria-label="color-legend"], .chart div[class$="-swatches"] { font-size: .8125rem; margin-bottom: .4rem; }
+
+dialog .pick { display: flex; gap: 1.5rem; }
+
+@media (max-width: 40rem) {
+  header h1 { font-size: 1.75rem; }
+  .problem { grid-template-columns: minmax(0, 1fr); }
+  .problem .acts { justify-content: flex-start; }
+  .ep-head { grid-template-columns: minmax(0, 1fr); }
+  .ep .acts { justify-content: flex-start; }
+  details.key dl { grid-template-columns: minmax(0, 1fr); }
+  .toolbar input[type=search] { min-width: 0; width: 100%; }
+}
+@media (prefers-reduced-motion: reduce) {
+  * { transition: none !important; }
+}