/* BenchFlow Hub viewer, on Vercel's Geist design system for now (tokens.css): Geist and Geist Mono, Geist's grays and
   accents, its control sizes, radii and shadows. A restyle into BenchFlow's own look comes later. The chart roles below
   (categorical c1..c3, the ordinal ramp o0..o5) are the only colours outside the tokens. */

:root {
  --display: var(--sans);
  --c1: var(--accent); --c2: #eb6834; --c3: #1baf7a;
  --o0: #9fabee; --o1: #8292e8; --o2: #6576e0; --o3: #4d61d2; --o4: #3b4fbe; --o5: #2a3c97;
  --on0: #15224d; --on1: #15224d; --on2: #fff; --on3: #fff; --on4: #fff; --on5: #fff;
  --top-h: 64px;
  --bar-h: 0px;
  /* controls: Geist's 6 px radius; a field's edge between Geist's gray-alpha 400 and 500 */
  --ctl-r: var(--r-sm);
  --field-line: rgb(0 0 0 / .14);
  /* a switch's selected segment, raised off its track (--sunk): the surface in light, Geist's gray-300 in dark */
  --seg-on: var(--panel);
}
html[data-theme="dark"] {
  --seg-on: hsl(0 0% 16%);
  --field-line: rgb(255 255 255 / .2);
  --c2: #d95926; --c3: #199e70;
  --o0: #38489b; --o1: #5062cf; --o2: #6b7be6; --o3: #8795f2; --o4: #a3b0fb; --o5: #c3ccff;
  --on0: #fff; --on1: #fff; --on2: #fff; --on3: #15224d; --on4: #15224d; --on5: #15224d;
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--line-strong) transparent; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 var(--fs-small)/1.5 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
html.theme-swap *, html.theme-swap *::before, html.theme-swap *::after { transition: none !important; }
::selection { background: var(--sel-bg); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); } /* --focus is 2.6:1; the accent passes 3:1 */
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--link-line); text-underline-offset: .2em; text-decoration-thickness: 1px; transition: color var(--t-fast), text-decoration-color var(--t-fast); }
a:hover { color: var(--accent); text-decoration-color: currentColor; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; text-wrap: balance; }
h2 { font: 600 var(--fs-h4)/1.4 var(--sans); letter-spacing: -.02em; }
h3 { font: 600 var(--fs-small)/1.4 var(--sans); }
h4 { font: 600 var(--fs-meta)/1.4 var(--sans); margin: var(--sp-12) 0 var(--sp-4); }
p { margin: 0; }
b, strong { font-weight: 600; }
code, kbd, pre, .mono { font-family: var(--mono); }
code { font-size: max(12px, .92em); background: var(--sunk); border-radius: var(--r-xs); padding: 1px 4px; overflow-wrap: anywhere; } /* never under Geist's 12 px, also in 12 px notes */
pre { margin: 0; }
.num, time, output, td.r { font-variant-numeric: tabular-nums; }
time, .tbl td.r, .tbl td.num { white-space: nowrap; }
.mono { font-size: var(--fs-caption); }
.muted { color: var(--muted); }

.wrap { overflow-wrap: anywhere; white-space: pre-wrap; }
.r { text-align: right; }
.t-no { color: var(--no); }
.t-ok { color: var(--ok); }
.kbd { display: inline-block; min-width: 18px; padding: 0 4px; border: var(--hairline); border-bottom-width: 2px; border-radius: var(--r-xs); background: var(--panel); color: var(--muted); font: 400 var(--fs-micro)/16px var(--mono); text-align: center; }
mark { background: color-mix(in srgb, var(--warn) 26%, transparent); color: inherit; border-radius: 2px; padding: 0 1px; }
mark.hit.cur { background: var(--warn); color: var(--paper); box-shadow: 0 0 0 2px var(--warn); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.boot { margin: var(--sp-48) auto; text-align: center; color: var(--muted); }
.skip { position: absolute; left: -9999px; top: 0; z-index: 50; background: var(--panel); padding: var(--sp-8) var(--sp-12); }
.skip:focus { left: var(--sp-8); top: var(--sp-8); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border: 3px solid transparent; border-radius: var(--r-pill); background-clip: padding-box; }

/* ------------------------------------------------------------------ frame (components/shell.js) */
/* One row at every width: the wordmark, the four places, then the search box, New job and the account button. Below
   960 px the search box is a button; below 768 px the places and the account fold into one menu at the row's end. The
   wordmark, the places and the buttons never shrink, the search box gives way first, so nothing in the row can sit on
   anything else. The search row and the narrow menu open over the page, under the header. */
.app { min-height: 100vh; display: flex; flex-direction: column; }
.top { position: sticky; top: 0; z-index: 20; background: var(--panel); border-bottom: var(--hairline); }
.top-in { display: flex; align-items: center; gap: var(--sp-24); height: var(--top-h); padding: 0 var(--gutter); max-width: 1680px; margin: 0 auto; }
.mark { flex: none; font: 600 var(--fs-h3)/1 var(--sans); color: var(--ink); text-decoration: none; white-space: nowrap; letter-spacing: -.02em; }
.mark:hover { color: var(--ink); }
.nav { flex: none; display: flex; align-items: stretch; align-self: stretch; }
.nav a { position: relative; display: flex; align-items: center; padding: 0 var(--sp-12); color: var(--muted); text-decoration: none; font-size: var(--fs-small); white-space: nowrap; transition: color var(--t-fast); }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: var(--sp-12); right: var(--sp-12); bottom: -1px; height: 2px; background: var(--ink); }
.top-r { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-8); }
.top-r > * { flex: none; }
.top-r > .top-search { flex: 0 1 260px; min-width: 176px; }
.share-note { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: var(--fs-meta); }
.main { flex: 1; width: 100%; max-width: 1680px; margin: 0 auto; padding: 0 var(--gutter) var(--sp-48); }
.main:focus { outline: none; }
.foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8) var(--sp-24); justify-content: space-between; padding: var(--sp-16) var(--gutter) var(--sp-24); border-top: var(--hairline); color: var(--faint); font-size: var(--fs-meta); max-width: 1680px; width: 100%; margin: 0 auto; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--ctl-sm); height: var(--ctl-sm); border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); cursor: pointer; text-decoration: none; transition: background var(--t-fast), color var(--t-fast); }
.icon-btn:hover { background: var(--hover); color: var(--ink); }
.places-btn, .find-btn { display: none; }

/* the search box and its suggestions */
.search { position: relative; display: flex; align-items: center; width: 100%; }
.search-ic { position: absolute; left: 9px; color: var(--faint); pointer-events: none; }
.search .search-in { width: 100%; height: var(--ctl-sm); padding-left: 28px; padding-right: 28px; }
.search .kbd { position: absolute; right: 8px; pointer-events: none; }
.search .search-in:focus ~ .kbd, .search .search-in:not(:placeholder-shown) ~ .kbd { display: none; }
.app:has([data-search="page"]) .search .kbd { display: none; } /* "/" goes to the page's own search there */
.search-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; width: min(440px, calc(100vw - 2 * var(--gutter))); max-height: min(70vh, 520px); overflow: auto; padding: var(--sp-6) 0; border: var(--hairline); border-radius: var(--r-md); background: var(--panel); box-shadow: var(--shadow-2); }
.search-g + .search-g { margin-top: var(--sp-4); border-top: var(--hairline); padding-top: var(--sp-4); }
.search-gh { display: flex; justify-content: space-between; align-items: baseline; padding: var(--sp-4) var(--sp-12) var(--sp-2); color: var(--muted); font-size: var(--fs-caption); }
.search-gh a { color: var(--muted); }
.search-o { display: flex; flex-direction: column; gap: 1px; padding: var(--sp-6) var(--sp-12); cursor: pointer; }
.search-o.on { background: var(--hover); }
.search-n { color: var(--ink); font-size: var(--fs-meta); overflow-wrap: anywhere; }
.search-s { color: var(--muted); font-size: var(--fs-caption); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-none { padding: var(--sp-8) var(--sp-12); color: var(--muted); font-size: var(--fs-meta); }
.top-find, .places { position: absolute; top: 100%; left: 0; right: 0; background: var(--panel); border-bottom: var(--hairline); box-shadow: var(--shadow-2); }
.top-find { padding: var(--sp-8) var(--gutter); }
.top-find .search-pop { left: 0; right: 0; width: auto; }

/* the account menu: who and where, the theme, Settings and Sign out */
.avatar-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--ctl-sm); height: var(--ctl-sm); padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--sunk); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink2); font: 500 var(--fs-meta)/1 var(--sans); transition: box-shadow var(--t-fast); }
.avatar-btn:hover .avatar, .avatar-btn[aria-expanded="true"] .avatar { box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); }
.avatar-btn:focus-visible { outline-offset: 0; border-radius: 50%; }
.menu-pop.acct-pop { min-width: 240px; max-width: min(320px, calc(100vw - 2 * var(--gutter))); }
.acct-who { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-8) var(--sp-10) var(--sp-6); min-width: 0; }
.acct-email { color: var(--ink); font-size: var(--fs-small); font-weight: 500; overflow-wrap: anywhere; }
.acct-ws { color: var(--muted); font-size: var(--fs-meta); overflow-wrap: anywhere; }
.acct-wss { display: flex; flex-direction: column; }
.menu-item.acct-wsb { justify-content: space-between; gap: var(--sp-8); }
.acct-wsb > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.acct-on { flex: none; color: var(--ink); }
.menu-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); min-height: var(--ctl-sm); padding: 0 var(--sp-4) 0 var(--sp-10); color: var(--ink); font-size: var(--fs-meta); }
.theme-sw { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line); }
.theme-b { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.theme-b:hover { color: var(--ink); }
.theme-b.on { background: var(--panel); color: var(--ink); box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-1); }
.theme-b:focus-visible { outline-offset: 0; border-radius: 50%; }

/* the narrow menu: the four places, then the account's items */
.places { max-height: calc(100vh - var(--top-h)); overflow: auto; padding: var(--sp-4) var(--gutter) var(--sp-12); }
.places-nav { display: flex; flex-direction: column; }
.places-nav a { display: flex; align-items: center; min-height: var(--touch); color: var(--ink2); text-decoration: none; font-size: var(--fs-small); border-bottom: var(--hairline); }
.places-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.places-acct { padding-top: var(--sp-8); }
.places-acct .acct-who { padding: var(--sp-8) 0; }
.places-acct .menu-item, .places-acct .menu-row { min-height: var(--touch); padding: 0; font-size: var(--fs-small); }
.places-acct .menu-item { height: auto; border-radius: 0; }
.places-acct .menu-item[aria-current="page"] { font-weight: 600; }
.places .menu-item:hover { background: none; color: var(--ink); }

@media (max-width: 960px) {
  .top-in { gap: var(--sp-16); }
  .nav a { padding: 0 var(--sp-10); }
  .nav a[aria-current="page"]::after { left: var(--sp-10); right: var(--sp-10); }
  .top-r > .top-search { display: none; }
  .find-btn { display: inline-flex; }
}
@media (max-width: 767px) {
  .top-in { gap: var(--sp-12); }
  .nav, .acct { display: none; }
  .places-btn { display: inline-flex; margin-right: calc(-1 * var(--sp-6)); }
}
@media (max-width: 720px) {
  :root { --gutter: 14px; }
}

/* ------------------------------------------------------------------ page frame */
.page { padding-top: var(--sp-20); }
.ph { padding: var(--sp-4) 0 var(--sp-12); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6); font-size: var(--fs-meta); color: var(--muted); margin-bottom: var(--sp-6); min-width: 0; }
.crumb { display: inline-flex; align-items: center; gap: var(--sp-6); min-width: 0; max-width: 100%; }
.crumbs a { color: var(--muted); text-decoration: none; max-width: 48ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumb > span:not(.sep) { color: var(--ink2); max-width: 48ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumbs .sep { color: var(--ghost); }
.ph-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8) var(--sp-12); }
.ph-title { font: 600 var(--fs-h2)/1.25 var(--sans); letter-spacing: -.035em; overflow-wrap: anywhere; min-width: 0; text-wrap: balance; }
.ph-trial { color: var(--muted); font-size: var(--fs-h3); }
.ph-badges { display: flex; align-items: center; gap: var(--sp-8); }
.ph-actions { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8); }
.ph-sum { margin-top: var(--sp-8); color: var(--muted); font-size: var(--fs-small); line-height: 1.6; overflow-wrap: anywhere; }
.ph-sum b { color: var(--ink); font-weight: 500; }
.ph-sum .mono { color: var(--ink2); }
.ph-warn { --n: var(--warn); margin-top: var(--sp-8); font-size: var(--fs-meta); color: var(--ink2); padding: var(--sp-6) var(--sp-10); border: 1px solid color-mix(in srgb, var(--n) 35%, var(--line)); border-radius: var(--r-md); background: color-mix(in srgb, var(--n) 5%, var(--panel)); overflow-wrap: anywhere; }
.ph-warn.bad { --n: var(--no); }
.reward-big { font: 500 var(--fs-h3)/1 var(--sans); }
.section { margin-top: var(--sp-28); }
.section > h2, .section-h { display: flex; align-items: baseline; gap: var(--sp-12); margin-bottom: var(--sp-10); }
.section-h h2 { margin-right: auto; }
.lede { color: var(--muted); font-size: var(--fs-meta); margin: calc(-1 * var(--sp-6)) 0 var(--sp-10); }

.tabs { position: relative; display: flex; gap: var(--sp-4); border-bottom: var(--hairline); margin-top: var(--sp-4); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { position: relative; display: inline-flex; align-items: center; gap: var(--sp-6); height: var(--ctl); padding: 0 var(--sp-10); border: 0; background: none; color: var(--muted); font: 500 var(--fs-small)/1 var(--sans); cursor: pointer; white-space: nowrap; border-radius: var(--r-sm) var(--r-sm) 0 0; }
.tab:hover { color: var(--ink); background: var(--hover); }
.tab[aria-selected="true"] { color: var(--ink); }
.tab[aria-selected="true"]::after { content: ""; position: absolute; left: var(--sp-8); right: var(--sp-8); bottom: -1px; height: 2px; background: var(--ink); border-radius: 2px; }
.tab.dim { color: var(--faint); } /* nothing in it yet; still AA, since it opens */
.tab.dim[aria-selected="true"] { color: var(--ink); }
.tab-n { color: var(--faint); font: 400 var(--fs-caption)/1 var(--sans); font-variant-numeric: tabular-nums; }
.tabpanel { padding-top: var(--sp-16); }

/* ------------------------------------------------------------------ controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8); height: var(--ctl); padding: 0 var(--sp-14); border: 0; border-radius: var(--ctl-r); background: var(--btn); color: var(--btn-ink); font: 500 var(--fs-small)/1 var(--sans); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background var(--t-fast), box-shadow var(--t-fast), color var(--t-fast); }
.btn:hover { background: var(--btn-hover); color: var(--btn-ink); }
.btn.quiet { background: var(--panel); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1); }
.btn.quiet:hover { background: var(--panel) linear-gradient(var(--hover), var(--hover)); box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-1); color: var(--ink); }
.btn.quiet:active { background: var(--press); }
.btn.sm { height: var(--ctl-sm); padding: 0 var(--sp-10); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: default; }
.btn.armed { background: var(--no); color: var(--accent-ink); box-shadow: none; }
.tbtn { display: inline-flex; align-items: center; gap: var(--sp-6); min-height: var(--ctl-xs); padding: 0 var(--sp-6); border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); font: 400 var(--fs-small)/1 var(--sans); cursor: pointer; white-space: nowrap; text-decoration: none; }
.tbtn:hover { color: var(--ink); background: var(--hover); }
.tbtn:disabled { color: var(--ghost); background: none; cursor: default; }
.tbtn.done { color: var(--ok); }
.tbtn.armed { color: var(--no); }
.tbtn[aria-pressed="true"] { color: var(--ink); }
.input, .select, textarea.input { height: var(--ctl); padding: 0 var(--sp-10); border: 1px solid var(--field-line); border-radius: var(--ctl-r); background: var(--panel); color: var(--ink); font: 400 var(--fs-small)/normal var(--sans); min-width: 0; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
textarea.input { height: auto; padding: var(--sp-8) var(--sp-10); font-family: var(--mono); font-size: var(--fs-caption); resize: vertical; }
.input::placeholder { color: var(--faint); }
.input.sm { height: var(--ctl-sm); padding: 0 var(--sp-8); }
.input:hover, .select:hover { border-color: var(--line-strong); }
.input:focus, .select:focus { border-color: var(--focus-line); box-shadow: var(--ring); outline: none; }
.input[aria-invalid="true"] { border-color: var(--no); }
.input[aria-invalid="true"]:focus { box-shadow: 0 0 0 1px var(--no); }
.select, select.input { padding-right: var(--sp-28); appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size: 5px 5px; background-repeat: no-repeat; cursor: pointer; }
/* The field's clear button, drawn: a cross in the muted ink, never the browser's own. */
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin: 0 -4px 0 4px; background: var(--muted); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7'/%3E%3C/svg%3E") center / 14px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7'/%3E%3C/svg%3E") center / 14px no-repeat; cursor: pointer; }
input[type="search"]::-webkit-search-cancel-button:hover { background: var(--ink); }
/* Geist's checkbox and radio: 16 px, a hairline edge, filled in ink when on (a check or a dot in the page's colour). */
input[type="checkbox"], input[type="radio"] { -webkit-appearance: none; appearance: none; flex: none; display: inline-grid; place-content: center; width: 16px; height: 16px; margin: 0; border: 1px solid var(--line-strong); background: var(--panel); vertical-align: middle; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast); }
input[type="checkbox"] { border-radius: var(--r-xs); }
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]::before, input[type="radio"]::before { content: ""; background: var(--paper); transform: scale(0); transition: transform var(--t-fast); }
input[type="checkbox"]::before { width: 12px; height: 12px; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / contain no-repeat; }
input[type="radio"]::before { width: 6px; height: 6px; border-radius: 50%; }
input[type="checkbox"]:hover, input[type="radio"]:hover { border-color: var(--ink2); }
input[type="checkbox"]:checked, input[type="radio"]:checked { background: var(--ink); border-color: var(--ink); }
input[type="checkbox"]:checked::before, input[type="radio"]:checked::before { transform: scale(1); }
input[type="checkbox"]:disabled, input[type="radio"]:disabled { opacity: .45; cursor: default; }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.check { display: inline-flex; align-items: center; gap: var(--sp-6); font-size: var(--fs-meta); color: var(--ink2); cursor: pointer; white-space: nowrap; }

.radio-row .check { white-space: normal; min-width: 0; }
.check .mono { overflow-wrap: anywhere; }
.chip { display: inline-flex; align-items: center; gap: var(--sp-6); height: var(--ctl-sm); padding: 0 var(--sp-10); border: 0; border-radius: var(--ctl-r); background: transparent; box-shadow: inset 0 0 0 1px var(--field-line); color: var(--ink2); font: 400 var(--fs-small)/1 var(--sans); cursor: pointer; white-space: nowrap; }
.chip:hover { background: var(--hover); }
.chip[aria-pressed="true"] { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); color: var(--ink); }
.chip:disabled { opacity: .45; cursor: default; }
.chip-n { color: var(--faint); font: 400 var(--fs-caption)/1 var(--sans); font-variant-numeric: tabular-nums; }
.seg { display: inline-flex; padding: 3px; border-radius: var(--r-md); background: var(--sunk); gap: 2px; }
.seg button { height: calc(var(--ctl-sm) - 4px); padding: 0 var(--sp-10); border: 0; border-radius: var(--r-xs); background: none; color: var(--muted); font: 500 var(--fs-small)/1 var(--sans); cursor: pointer; white-space: nowrap; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--seg-on); color: var(--ink); box-shadow: 0 0 0 1px var(--line), var(--shadow-1); }
.seg button:disabled { color: var(--ghost); cursor: default; }
.seg.sm button { height: 20px; padding: 0 var(--sp-6); font-size: var(--fs-caption); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8) var(--sp-12); }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8) var(--sp-10); margin: var(--sp-4) 0 var(--sp-12); }
.filters .input[type="search"] { width: 280px; }
.field { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.field-l { font-size: var(--fs-meta); color: var(--ink2); font-weight: 500; }
.field-h { font-size: var(--fs-caption); color: var(--faint); }
.field-h.t-no { color: var(--no); }
.field .input, .field .select { width: 100%; }

/* ------------------------------------------------------------------ status */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 var(--sp-8); border-radius: var(--r-pill); font: 500 var(--fs-caption)/1 var(--sans); white-space: nowrap; color: var(--ink); background: var(--sunk); }
.pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pill.ok { color: var(--ok); background: var(--ok-soft); }
.pill.no { color: var(--no); background: var(--no-soft); }
.pill.warn { color: var(--warn); background: var(--warn-soft); }
.pill.accent { color: var(--accent); background: var(--accent-soft); }
.pill.muted { color: var(--muted); }
.pill.live i { animation: pulse 1.6s var(--ease) infinite; }
@keyframes pulse { 50% { opacity: .25; } }
.prog { display: inline-flex; align-items: center; gap: var(--sp-8); min-width: 120px; }
.prog-bar { position: relative; flex: 1; height: 6px; min-width: 60px; border-radius: var(--r-pill); background: var(--sunk); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.prog-bar > span { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: var(--r-pill); transition: width var(--t-slow) var(--ease); }
.prog-bar > span.indet { width: 30% !important; animation: indet 1.4s var(--ease) infinite; }
@keyframes indet { from { left: -30%; } to { left: 100%; } }
.prog-n { font-size: var(--fs-caption); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* States (components/ui.js): loading is a quiet line or skeleton rows; empty is Vercel's empty state, a title, one line
   and one action centred in a quiet panel (bare where it fills a pane that has its own frame); an error is a notice with
   its way on; a page whose object is missing gets a title. */
.state { margin: var(--sp-16) 0; color: var(--muted); font-size: var(--fs-meta); }
.state.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-4); padding: var(--sp-32) var(--sp-24);
  border: var(--hairline); border-radius: var(--r-md); background: var(--panel); text-align: center; font-size: var(--fs-small); overflow-wrap: anywhere; }
.empty-t { color: var(--ink); font: 600 var(--fs-h3)/1.4 var(--sans); }
.empty-l { max-width: 64ch; }
.state.empty > .btn { margin-top: var(--sp-12); }
.fb-body > .state.empty, .cc .state.empty { border: 0; background: none; padding: var(--sp-24) var(--sp-16); }
@media (max-width: 720px) { .state.empty { padding: var(--sp-28) var(--sp-16); } }
.state.loading.wait { visibility: hidden; }
/* A table's skeleton, in its shape: the header row on the page's ground, then rows as tall as a list's (a name over its
   second line, figures at the right). */
.skel { display: flex; flex-direction: column; border: var(--hairline); border-radius: var(--r-md); background: var(--panel); overflow: hidden; }
.skel-row { display: grid; grid-template-columns: minmax(0, 3fr) repeat(var(--skel-n, 3), minmax(0, 1fr)); align-items: center; gap: var(--sp-24); min-height: 57px; padding: var(--sp-10) var(--sp-12); border-bottom: var(--hairline); }
.skel-row:last-child { border-bottom: 0; }
.skel-row.skel-h { min-height: 41px; background: var(--paper); }
.skel-row i { display: block; height: 10px; border-radius: var(--r-xs); background: var(--sunk); box-shadow: inset 0 0 0 1px var(--line); }
.skel-name { display: flex; flex-direction: column; gap: var(--sp-8); }
.skel-name i:first-child { width: min(60%, 28ch); }
.skel-name i:last-child { width: min(85%, 44ch); height: 8px; opacity: .6; }
.skel-f { justify-self: end; width: min(100%, 56px); }
.skel-h .skel-f:first-child { justify-self: start; width: min(30%, 96px); }
.state-page .state-text { margin-top: var(--sp-4); max-width: 75ch; color: var(--ink2); font-size: var(--fs-small); }
.state-page > .btn { margin-top: var(--sp-16); }
.state.err-line { display: flex; align-items: flex-start; gap: var(--sp-6); margin: var(--sp-8) 0; color: var(--no); }
.state.err-line .ic { flex: none; margin-top: 2px; }
.form-actions .state.err-line, .nr-controls .state.err-line { margin: 0; }
/* A notice: a hairline box tinted by its state, never a coloured stripe; a drawn icon in the state's colour leads it. */
.notice { --n: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8) var(--sp-10); padding: var(--sp-8) var(--sp-12); border: 1px solid color-mix(in srgb, var(--n) 35%, var(--line)); border-radius: var(--r-md); background: color-mix(in srgb, var(--n) 5%, var(--panel)); color: var(--ink); font-size: var(--fs-meta); overflow-wrap: anywhere; }
.notice > p { flex: 1 1 24ch; min-width: 0; }
.notice > .ic { flex: none; color: var(--n); align-self: flex-start; margin-top: 2px; }
.notice.n-no { --n: var(--no); }
.notice.n-warn { --n: var(--warn); }
.refetching { opacity: .6; transition: opacity var(--t); }

/* ------------------------------------------------------------------ tables */
.tbl-wrap { border: var(--hairline); border-radius: var(--r-md); background: var(--panel); }
/* A table wider than its frame scrolls sideways, and a soft shadow marks each edge it continues past: the covers scroll
   with the table, the shadows stay with the frame. (The Leaderboards grid has its own cue.) */
.tbl-wrap:not(.lb-wrap) {
  background:
    linear-gradient(to right, var(--panel) 40%, transparent) left / 32px 100% no-repeat local,
    linear-gradient(to left, var(--panel) 40%, transparent) right / 32px 100% no-repeat local,
    linear-gradient(to right, var(--line-strong), transparent) left / 12px 100% no-repeat scroll,
    linear-gradient(to left, var(--line-strong), transparent) right / 12px 100% no-repeat scroll,
    var(--panel);
}
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-meta); }
.tbl th { position: sticky; top: var(--top-h); z-index: 2; background: var(--paper); text-align: left; font-weight: 500; color: var(--muted); font-size: var(--fs-meta); padding: var(--sp-10) var(--sp-12); border-bottom: var(--hairline); white-space: nowrap; }
.tbl-wrap .tbl thead th:first-child { border-top-left-radius: var(--r-md); }
.tbl-wrap .tbl thead th:last-child { border-top-right-radius: var(--r-md); }
.tbl td { padding: var(--sp-10) var(--sp-12); border-bottom: var(--hairline); vertical-align: middle; }
/* a row's own heading (a task, a model): a cell to look at, not a column header */
.tbl tbody th { position: static; z-index: auto; background: none; color: var(--ink); font-size: var(--fs-meta); font-weight: 400; padding: var(--sp-10) var(--sp-12); border-bottom: var(--hairline); white-space: normal; text-align: left; }
.tbl tbody tr:last-child th { border-bottom: 0; }
.tbl tbody tr:hover th { background: var(--hover); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: var(--hover); }
.tbl tr.sel td { background: var(--accent-soft); }
.tbl tr.retried td { opacity: .55; }
.tbl tr.bad td { background: color-mix(in srgb, var(--no) 4%, var(--panel)); }
.tbl td.r, .tbl th.r { text-align: right; }
.tbl .t-name { font-weight: 500; overflow-wrap: anywhere; }
.tbl td.mono, .tbl .mono { overflow-wrap: anywhere; }
.tbl .t-name a { text-decoration: none; }
.tbl .t-name a:hover { text-decoration: underline; }
.tbl .sub-line { display: block; color: var(--faint); font-size: var(--fs-caption); font-weight: 400; width: 0; min-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl.compact td, .tbl.compact th { padding: var(--sp-4) var(--sp-8); }
.tbl.compact th { position: static; }
.tbl .nowrap { white-space: nowrap; }

/* ------------------------------------------------------------------ key-value, panels, columns */
.kv { display: grid; grid-template-columns: minmax(110px, max-content) minmax(0, 1fr); gap: var(--sp-6) var(--sp-16); margin: 0; font-size: var(--fs-meta); }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.panel { margin: var(--sp-8) 0 var(--sp-12); padding: var(--sp-14) var(--sp-16); border: var(--hairline); border-radius: var(--r-md); background: var(--panel); display: flex; flex-direction: column; gap: var(--sp-10); }
.panel-h { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); }
.panel p { font-size: var(--fs-meta); }
.cmd { display: flex; align-items: center; gap: var(--sp-8); padding: var(--sp-8) var(--sp-10); border: var(--hairline); border-radius: var(--r-sm); background: var(--sunk); min-width: 0; }
.cmd code { background: none; padding: 0; flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: var(--fs-caption); }
.cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-24) var(--sp-32); }
.cols2 .span2 { grid-column: 1 / -1; }
.cols2 h3, .vf-sec h3 { margin-bottom: var(--sp-8); }
.cols2 h3 .muted, .vf-sec h3 .muted { font-weight: 400; font-size: var(--fs-caption); margin-left: var(--sp-6); }

.note { font-size: var(--fs-caption); color: var(--faint); margin-top: var(--sp-6); }
.loadmore { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-12); padding: var(--sp-12) 0; font-size: var(--fs-meta); }

/* ------------------------------------------------------------------ charts */
.cc { margin: 0; }
.cc figcaption { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-meta); color: var(--ink2); margin-bottom: var(--sp-8); }
.cc-plot { position: relative; margin-left: 44px; }
.cc-grid { position: absolute; inset: 0; pointer-events: none; }
.cc-tick { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line); }
.cc-tick span { position: absolute; right: calc(100% + 6px); transform: translateY(-50%); font: 400 var(--fs-caption)/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--faint); white-space: nowrap; }
.cc-cols { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 2px; }
.cc-col { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; border: 0; padding: 0; background: none; cursor: default; }
.cc-col:hover, .cc-col.on { background: var(--hover); }
.cc-bar { display: block; width: 100%; max-width: 24px; background: var(--c1); border-radius: 4px 4px 0 0; }
.cc-x { display: flex; justify-content: space-between; margin: var(--sp-4) 0 0 44px; font: 400 var(--fs-caption)/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--faint); }
.tip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 5; display: flex; flex-direction: column; gap: 2px; padding: var(--sp-6) var(--sp-8); background: var(--panel); border: var(--hairline); border-radius: var(--r-sm); box-shadow: var(--shadow-2); white-space: nowrap; font-size: var(--fs-caption); pointer-events: none; text-align: left; }
.tip b { font-weight: 600; color: var(--ink); }
.tip span { color: var(--muted); }
.sb { display: flex; flex-direction: column; gap: var(--sp-6); min-width: 0; }
.sb-bar { display: flex; gap: 2px; height: 10px; border-radius: var(--r-xs); overflow: hidden; }
.sb.thin .sb-bar { height: 6px; }
.sb-seg { min-width: 2px; flex-basis: 0; }
.sb-seg.empty { flex: 1; background: var(--sunk); }
.sb-legend { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-14); margin: 0; padding: 0; list-style: none; font-size: var(--fs-caption); color: var(--ink2); }
.sb-legend li { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-6); }
.sb-sub { flex-basis: 100%; padding-left: var(--sp-16); color: var(--muted); }
.sb-sub a { color: inherit; }
.sb-legend .muted { font-size: var(--fs-caption); }
.sw { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.c1 { background: var(--c1); } .c2 { background: var(--c2); } .c3 { background: var(--c3); }
.ok { background: var(--ok); } .no { background: var(--no); } .warn { background: var(--warn); } .neutral { background: var(--ghost); }
.pill.ok, .pill.no, .pill.warn { background-image: none; }
 .o1 { background: var(--o1); } .o2 { background: var(--o2); } .o3 { background: var(--o3); } .o4 { background: var(--o4); }
.ib { display: inline-block; width: 64px; height: 4px; border-radius: 2px; background: var(--line); vertical-align: middle; margin-right: var(--sp-8); overflow: hidden; }
.ib > span { display: block; height: 100%; background: var(--c1); border-radius: 2px; }
.dw { display: flex; flex-direction: column; gap: var(--sp-6); font-size: var(--fs-meta); }
.dw-row { display: grid; grid-template-columns: minmax(120px, 220px) minmax(160px, 1fr) minmax(150px, max-content); gap: var(--sp-12); align-items: center; }
.dw-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dw-track { position: relative; height: 18px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.dw-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--line); }
.dw-zero { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--line-strong); }
.dw-ci { position: absolute; top: 50%; height: 2px; margin-top: -1px; background: var(--muted); border-radius: 1px; }
.dw-dot { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--c1); box-shadow: 0 0 0 2px var(--panel); }
.dw-val { white-space: nowrap; }
.dw-axis .dw-track { border: 0; height: 14px; }
.dw-axis .dw-track::before { display: none; }
.dw-tick { position: absolute; transform: translateX(-50%); font: 400 var(--fs-micro)/1 var(--mono); color: var(--faint); }

/* ------------------------------------------------------------------ matrix cells (pass/fail glyphs, reward ramp, errors, unscored) */
.cell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 22px; border-radius: var(--r-2xs); font: 500 var(--fs-micro)/1 var(--mono); text-decoration: none; color: var(--ink); flex: none; transition: box-shadow var(--t-fast), opacity var(--t-fast); }
a.cell:hover { box-shadow: 0 0 0 2px var(--ink); }
/* Continuous rewards: the reward ramp (--rp0..--rp5, defined with the leaderboard rules at the end), ink on the light
   steps and accent-ink on the two strong ones in both themes. */
.cell.r0 { background: var(--rp0); color: var(--ink); } .cell.r1 { background: var(--rp1); color: var(--ink); } .cell.r2 { background: var(--rp2); color: var(--ink); }
.cell.r3 { background: var(--rp3); color: var(--ink); } .cell.r4 { background: var(--rp4); color: var(--accent-ink); } .cell.r5 { background: var(--rp5); color: var(--accent-ink); }
/* Rewards of 0 or 1: a pass is a drawn check on the ok colour, a fail a cross on a tint of the no colour. */
.cell.c-pass { background: var(--ok); color: var(--paper); font-size: var(--fs-meta); font-weight: 600; }
.cell.c-fail { background: color-mix(in srgb, var(--no) 12%, var(--paper)); color: var(--no); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--no) 30%, transparent); font-size: var(--fs-meta); font-weight: 600; }
.cell.c-retried { background: transparent; color: var(--faint); box-shadow: inset 0 0 0 1px var(--line); font-weight: 400; }
/* A corner mark for process-check labels and integrity verdicts other than Checked (listed in the cell's tooltip). */
.cell.flag-warn::after, .cell.flag-bad::after { content: ""; position: absolute; top: -3px; right: -3px; width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--paper); pointer-events: none; }
.cell.flag-warn::after { background: var(--warn); }
.cell.flag-bad::after { background: var(--no); }
.cell.dim { opacity: .16; }
.cell.c-err { background: var(--sunk); color: var(--no); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--no) 45%, var(--line)); font-weight: 600; }
.cell.c-to { background: var(--sunk); color: var(--warn); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 45%, var(--line)); font-weight: 600; }
.cell.c-none { background: transparent; color: var(--faint); box-shadow: inset 0 0 0 1px var(--line-strong); }
.cell.c-infra { background: var(--sunk); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-strong); }
.cell.here { box-shadow: 0 0 0 2px var(--accent); }
.cell.sm { width: 24px; height: 20px; }
.cell .ic { stroke-width: 2; }
.sibs { display: inline-flex; gap: 3px; align-items: center; }
.sib-nav { display: inline-flex; align-items: center; gap: var(--sp-8); }
.mx-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-14); font-size: var(--fs-caption); color: var(--muted); margin: var(--sp-8) 0; }

/* ------------------------------------------------------------------ home */
.stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-24) var(--sp-32); }
.oneday { font-size: var(--fs-meta); color: var(--ink2); }

/* ------------------------------------------------------------------ catalog */

.badges { display: inline-flex; flex-wrap: wrap; gap: var(--sp-4); max-width: 100%; }
/* Two badge shapes: the pill (a status, with its dot) and the tag (an attribute: a scope, "server default", a check). */
.tag { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; height: 20px; padding: 0 var(--sp-6); border-radius: var(--r-xs); background: var(--sunk); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink2); font: 500 var(--fs-caption)/20px var(--sans); white-space: nowrap; }

/* ------------------------------------------------------------------ forms (run form, settings) */
.form { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-14) var(--sp-16); max-width: 960px; }
.form .wide { grid-column: 1 / -1; }
.form-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-12); }
.radio-row { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.radio { display: inline-flex; align-items: center; gap: var(--sp-8); padding: var(--sp-6) var(--sp-12); border-radius: var(--ctl-r); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: var(--fs-meta); cursor: pointer; }
.radio:has(input:checked) { box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }

.radio.off { opacity: .55; cursor: default; }
.radio .muted { font-size: var(--fs-caption); }
.preview { font-size: var(--fs-caption); }
.secret-once { border-color: color-mix(in srgb, var(--warn) 35%, var(--line)); background: color-mix(in srgb, var(--warn) 5%, var(--panel)); }

/* ------------------------------------------------------------------ trace view */
.ov { display: flex; flex-direction: column; gap: var(--sp-8); margin: 0 0 var(--sp-8); }
.ov-line { font-size: var(--fs-meta); color: var(--ink2); overflow-wrap: anywhere; }

.ov-sep { color: var(--faint); }
.ov-v { font-weight: 600; color: var(--ink); }
.ov-v.t-no { color: var(--no); }
.ov-v.t-ok { color: var(--ok); }
.ov-chk { white-space: nowrap; }
.ov-flag { display: inline-block; width: 6px; height: 6px; margin: 0 var(--sp-6) 1px 0; border-radius: 50%; background: var(--warn); vertical-align: middle; }
.ov-steps { white-space: nowrap; }
.ov-step { font: 400 var(--fs-caption)/1 var(--mono); }
/* Tokens on one line: a small part-to-whole bar, then each part with its swatch and figure. */
.ov-tbar { display: inline-block; width: 120px; margin-right: var(--sp-10); vertical-align: middle; }
.ov-tbar .sb { gap: 0; }
.ov-t { white-space: nowrap; }
.ov-t .sw { display: inline-block; width: 8px; height: 8px; margin-right: var(--sp-4); vertical-align: 0; }
.ov-k { display: inline-block; min-width: 64px; color: var(--muted); margin-right: var(--sp-8); font-size: var(--fs-meta); }
.tv-bar { position: sticky; top: calc(var(--top-h) + var(--walk-h, 0px)); z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8) var(--sp-16); padding: var(--sp-8) 0; background: var(--paper); border-bottom: var(--hairline); }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6); }
/* Find: the match counter and the previous and next buttons sit inside the field's right edge. */
.tv-bar .chips { order: 1; }
.tv-tools { order: 2; margin-left: auto; display: flex; align-items: center; gap: var(--sp-8); min-width: 0; }
.tv-view .ic { margin-left: var(--sp-2); color: var(--muted); }
.find { position: relative; display: flex; align-items: center; }
.find .input { width: 240px; height: var(--ctl-sm); padding-right: 116px; }
.find .input::-webkit-search-cancel-button { display: none; }
.find-in { position: absolute; right: 2px; top: 0; bottom: 0; display: flex; align-items: center; gap: 0; pointer-events: none; }
.find-n { padding-right: var(--sp-4); font-size: var(--fs-caption); color: var(--muted); white-space: nowrap; }
.find-b { pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--r-xs); background: none; color: var(--muted); cursor: pointer; }
.find-b:hover:not(:disabled) { background: var(--hover); color: var(--ink); }
.find-b:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.find-b:disabled { color: var(--ghost); cursor: default; }
/* The step map: its own row, labelled like the timeline's lanes, with a step-number scale under it (never a time axis). */
.smap-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--sp-8); align-items: start; margin-top: var(--sp-12); }
.smap-row > .tml-k { padding-top: 6px; }
.smap { position: relative; cursor: pointer; min-width: 0; }
.smap-ax { display: flex; justify-content: space-between; margin-top: var(--sp-4); font: 400 var(--fs-micro)/1 var(--mono); color: var(--faint); cursor: default; }
.smap-err { position: relative; height: 4px; margin-bottom: 2px; }
.smap-err span { position: absolute; top: 0; bottom: 0; background: var(--no); border-radius: 1px; }
.smap-main { display: flex; gap: 1px; height: 14px; }
.smap-main span { flex: 1 1 0; min-width: 0; border-radius: 1px; background: var(--line); }
.smap-main span.off { opacity: .2; }
.smap-main span.cur { box-shadow: 0 -3px 0 var(--ink), 0 3px 0 var(--ink); }
.smap-main span:hover { opacity: .7; }
.k-user { --k: var(--c1); } .k-system { --k: var(--c1); } .k-message { --k: var(--ink2); } .k-reasoning { --k: var(--line-strong); }
.k-tool { --k: var(--faint); } .k-subagent { --k: var(--c2); } .k-empty { --k: var(--line); } .k-error { --k: var(--no); }
.smap-main span[class*="k-"] { background: var(--k); }
/* Under the map or timeline: what the chips don't count. The chips' swatches are the map's key. */
.smap-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-14); margin-top: var(--sp-6); font-size: var(--fs-caption); color: var(--muted); }
/* The timeline (components/timeline.js): a lane per row on one time axis; the trial's phases in the ordinal blues, the
   model's turns in the step map's agent colour, tool calls in the third series colour and long ones in the second, gaps
   hatched, errors in the no colour; back-to-back segments keep a hairline between them. A step's mark is a 2px tick;
   the current step is ringed in ink. */
.tml { margin: var(--sp-10) 0 0; }
.tml figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-4) var(--sp-16); margin-bottom: var(--sp-8); font-size: var(--fs-meta); color: var(--muted); }
.tml figcaption b { color: var(--ink); font-weight: 600; }
.tml-lanes { display: flex; flex-direction: column; gap: 3px; }
.tml-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--sp-8); align-items: center; }
.tml-k { font-size: var(--fs-micro); color: var(--muted); white-space: nowrap; }
.tml-track { position: relative; height: 14px; background: var(--sunk); border-radius: 2px; }
.tml-track.phases { height: 8px; }
.tml-seg { position: absolute; top: 0; bottom: 0; min-width: 2px; border-radius: 1px; cursor: pointer; box-shadow: inset -1px 0 0 var(--paper); }
.tml-seg.phase, .tml-track.phases .tml-seg, .tml-seg.gap { cursor: default; }
.tml-seg:hover, .tml-seg:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; z-index: 2; }
.tml-seg.turn, .tml-sw.turn { background: var(--ink2); }
.tml-seg.call, .tml-sw.call { background: var(--c3); }
.tml-seg.call.long, .tml-sw.call.long { background: var(--c2); }
.tml-seg.err, .tml-sw.err { background: var(--no); }
.tml-seg.gap, .tml-sw.gap { background: repeating-linear-gradient(135deg, var(--line-strong) 0 2px, transparent 2px 5px); }
/* Time in the trial that no recorded phase covers: hatched neutral, never a phase's colour. */
.tml-seg.unacc, .tml-sw.unacc { background: repeating-linear-gradient(45deg, var(--faint) 0 1px, transparent 1px 4px); box-shadow: inset 0 0 0 1px var(--line-strong); }
.tml-seg.mark { width: 2px; margin-left: -1px; background: var(--k); }
.tml-seg.off { opacity: .25; }
.tml-seg.cur { box-shadow: 0 -3px 0 var(--ink), 0 3px 0 var(--ink); z-index: 1; }
.tml-at { position: absolute; top: 0; bottom: 0; min-width: 2px; pointer-events: none; z-index: 5; }
.tml-at .tip.l { left: 0; transform: none; }
.tml-at .tip.r { left: auto; right: 0; transform: none; }
.tml-axis .tml-track { height: 12px; background: none; container-type: inline-size; }
.tml-axis .tml-track span { position: absolute; top: 0; transform: translateX(-50%); font: 400 var(--fs-micro)/1 var(--mono); color: var(--faint); white-space: nowrap; }
.tml-axis .tml-track span:first-child { transform: none; }
/* Up to six labels as wide as "+1:00:00" need about 360 px; a narrower axis (a phone) shows every other one. */
@container (max-width: 360px) { .tml-axis .tml-track > span:nth-child(even) { display: none; } }
.tml .tv-meta { margin-top: var(--sp-4); font-size: var(--fs-caption); }
.kd { display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--k, var(--ghost)); flex: none; }
.chip-kd { display: inline-flex; gap: 2px; }
.tv-meta { color: var(--faint); }
.steps { display: flex; flex-direction: column; }
.st { padding: var(--sp-10) var(--sp-10) var(--sp-12) var(--sp-8); border-bottom: var(--hairline); scroll-margin-top: calc(var(--top-h) + var(--walk-h, 0px) + var(--tv-h, 56px) + var(--sp-8)); min-width: 0; }
/* The current step: a tint and its number in the accent, no stripe; an error step's red dot and output say the error. */
.st.cur { background: var(--hover); }
.st.cur > .st-h > .st-n { color: var(--accent); font-weight: 600; }
.st.compact { padding-top: var(--sp-4); padding-bottom: var(--sp-4); }
.st.compact .st-h { cursor: pointer; }
.st.compact.open { padding-bottom: var(--sp-12); }
.st-h { display: flex; align-items: center; gap: var(--sp-8); min-width: 0; min-height: 24px; }
.st-n { flex: none; border: 0; background: none; padding: 0 2px; color: var(--faint); font: 400 var(--fs-caption)/1 var(--mono); cursor: copy; border-radius: var(--r-xs); }
.st-n:hover { color: var(--ink2); }
.st-l { flex: none; max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: var(--fs-meta); }
.st-l.mono { font-size: var(--fs-caption); }
.k-reasoning > .st-h .st-l, .k-system > .st-h .st-l { color: var(--muted); }
.st-p { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: var(--fs-meta); }
.st-fill { flex: 1 1 auto; }
/* A user message that repeats the one before: "same text as #001" opens and folds it, as does its header. */
.st-rep { flex: none; }
.st.rep > .st-h { cursor: pointer; }
.st-facts { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--faint); font: 400 var(--fs-caption)/1.3 var(--mono); white-space: nowrap; font-variant-numeric: tabular-nums; }
.st-b { margin: var(--sp-6) 0 0 calc(4ch + 22px); min-width: 0; display: flex; flex-direction: column; gap: var(--sp-8); }
.st-note { font-size: var(--fs-caption); color: var(--warn); }
.msg { font-size: var(--fs-small); line-height: 1.6; overflow-wrap: anywhere; min-width: 0; }
.msg.plain .text-block { white-space: pre-wrap; color: var(--ink2); }
.text-block { white-space: pre-wrap; overflow-wrap: anywhere; }
.mono-block { font: 400 var(--fs-caption)/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; background: var(--sunk); border: var(--hairline); border-radius: var(--r-sm); padding: var(--sp-8) var(--sp-10); color: var(--ink2); tab-size: 4; }
.mono-block.cmd { color: var(--ink); }
.mono-block.cmd::before { content: "$ "; color: var(--faint); }
.clamp { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); min-width: 0; }
.clamp > pre, .clamp > div { width: 100%; }
.clamp-btn { margin-left: calc(-1 * var(--sp-6)); }
.rs { display: flex; align-items: baseline; gap: var(--sp-8); min-width: 0; font-size: var(--fs-meta); }
.rs.open { flex-direction: column; gap: var(--sp-4); }
.rs-t { flex: none; margin-left: calc(-1 * var(--sp-6)); font-style: normal; }
.rs-p { color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-style: italic; }
.rs-b { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--muted); padding-left: var(--sp-10); border-left: 2px solid var(--line); line-height: 1.6; }
.tc { display: flex; flex-direction: column; gap: var(--sp-6); min-width: 0; }
.tc + .tc { margin-top: var(--sp-4); }
.tc-h { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-8); min-width: 0; }
.tc-name { font: 500 var(--fs-caption)/1.4 var(--mono); padding: 1px var(--sp-6); border-radius: var(--r-xs); background: var(--accent-soft); color: var(--ink); overflow-wrap: anywhere; min-width: 0; }
.tc.err .tc-name { background: color-mix(in srgb, var(--no) 12%, transparent); }
.tc-title { font: 400 var(--fs-caption)/1.5 var(--mono); color: var(--ink2); overflow-wrap: anywhere; min-width: 0; }
.obs { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.obs-t { font-size: var(--fs-caption); color: var(--muted); }
.obs.err .mono-block { border-color: color-mix(in srgb, var(--no) 45%, var(--line)); }
.obs-none { font-size: var(--fs-caption); color: var(--faint); }
.media { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.media-img { max-width: min(100%, 520px); max-height: 360px; border-radius: var(--r-sm); border: var(--hairline); background: var(--sunk); }
.media-ph { display: inline-flex; gap: var(--sp-4); align-items: center; padding: var(--sp-4) var(--sp-8); border: 1px dashed var(--line-strong); border-radius: var(--r-sm); color: var(--muted); font-size: var(--fs-caption); }
.sub { margin-top: var(--sp-4); border: var(--hairline); border-radius: var(--r-sm); background: var(--panel); min-width: 0; }
.sub-h { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-10); padding: var(--sp-6) var(--sp-10); font-size: var(--fs-meta); }
.sub-type { font-weight: 600; }
.sub-meta { color: var(--muted); font-size: var(--fs-caption); }
.sub-hits { margin-left: auto; font-size: var(--fs-caption); color: var(--warn); }
.sub-prompt { padding: 0 var(--sp-10) var(--sp-8); color: var(--muted); font-size: var(--fs-caption); overflow-wrap: anywhere; }
.sub.missing { padding: var(--sp-6) var(--sp-10); font-size: var(--fs-caption); color: var(--muted); border-left-color: var(--line-strong); }
.nested { border-top: var(--hairline); }
.nested .st { padding-left: var(--sp-6); }
.nested .st:last-child { border-bottom: 0; }
.unlinked { margin-top: var(--sp-24); }
.unlinked h3 { margin-bottom: var(--sp-8); }

/* markdown */
.md { overflow-wrap: anywhere; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p, .md ul, .md ol, .md blockquote, .md pre, .md .md-table { margin: 0 0 var(--sp-8); }
.md ul, .md ol { padding-left: var(--sp-20); }
.md li + li { margin-top: 2px; }
.md h1, .md h2, .md h3, .md h4, .md h5, .md h6 { font: 600 var(--fs-small)/1.4 var(--sans); margin: var(--sp-14) 0 var(--sp-6); }
.md h1 { font: 500 var(--fs-h3)/1.3 var(--display); }
.md h2 { font: 500 var(--fs-h3)/1.3 var(--display); }
.md blockquote { padding-left: var(--sp-12); border-left: 2px solid var(--line-strong); color: var(--muted); }
.md hr { border: 0; border-top: var(--hairline); margin: var(--sp-12) 0; }
.md .md-code { font: 400 var(--fs-caption)/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; background: var(--sunk); border: var(--hairline); border-radius: var(--r-sm); padding: var(--sp-8) var(--sp-10); color: var(--ink2); }
.md .md-code code { background: none; padding: 0; font-size: inherit; }
.md .md-table { overflow-x: auto; }
.md table { border-collapse: collapse; font-size: var(--fs-meta); }
.md th, .md td { border: var(--hairline); padding: var(--sp-4) var(--sp-8); text-align: left; vertical-align: top; }
.md th { background: var(--sunk); font-weight: 500; }
.md a { color: var(--accent); }

/* verifier */
.vf { display: flex; flex-direction: column; gap: var(--sp-24); max-width: 1100px; }
.vf-line { font-size: var(--fs-meta); margin-bottom: var(--sp-6); }
.vf-tests { margin-top: var(--sp-10); }
.vf-tests td:first-child { width: 90px; }
.vf-msg { margin-top: var(--sp-4); }
.vf-report { padding: var(--sp-10) var(--sp-12); border: var(--hairline); border-radius: var(--r-sm); background: var(--panel); }
.kvt { max-width: 520px; }

/* ------------------------------------------------------------------ a job's log */
.events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; font-size: var(--fs-meta); }

.events li { display: grid; grid-template-columns: 84px 90px minmax(0, 1fr); gap: var(--sp-10); padding: var(--sp-4) 0; border-bottom: var(--hairline); }
.events li:last-child { border-bottom: 0; }
.events time { color: var(--ink2); font-size: var(--fs-caption); font-variant-numeric: tabular-nums; white-space: nowrap; }
.logbox { max-height: none; }

/* sign-in */
.signin { min-height: 100vh; display: flex; flex-direction: column; }
.signin-top { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-16) var(--gutter); }
.signin-card { width: min(560px, calc(100% - 2 * var(--gutter))); margin: 10vh auto 0; display: flex; flex-direction: column; gap: var(--sp-14); font-size: var(--fs-small); color: var(--ink2); }
.signin-card h1 { font: 500 var(--fs-h2)/1.2 var(--display); letter-spacing: -.01em; color: var(--ink); }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 900px) {
  .tbl-wrap { overflow-x: auto; }
  .tbl-wrap .tbl th { position: static; }
  .stats-grid, .cols2 { grid-template-columns: minmax(0, 1fr); }
  .tbl .t-name { min-width: 18ch; }
}
@media (max-width: 720px) {
  .ph-title, .page.trace-page .ph-title { font-size: var(--fs-h4); }
  .ph-actions { margin-left: 0; width: 100%; }
  .tv-bar { position: static; }
  .tv-tools { order: 0; flex: 1 1 100%; margin-left: 0; }
  .find { flex: 1 1 auto; min-width: 0; }
  .find .input { flex: 1; width: auto; min-width: 0; }
  .st-b { margin-left: 0; }
  .st-facts { display: none; }
  .st-l { max-width: 60%; }
  .col-opt { display: none; }
  .filters .input[type="search"] { width: 100%; }
  .dw-row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .dw-track { margin: 0 var(--sp-16); }
  .events li { grid-template-columns: 84px minmax(0, 1fr); }
  .kv { grid-template-columns: minmax(90px, max-content) minmax(0, 1fr); gap: var(--sp-4) var(--sp-10); }
  .tbl .sub-line { white-space: normal; width: auto; min-width: 0; max-width: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
  .tbl td, .tbl th { padding-left: var(--sp-6); padding-right: var(--sp-6); }
  .tbl td:first-child, .tbl th:first-child { padding-left: var(--sp-10); }
  .pill { padding: 0 var(--sp-6); }
  .prog { min-width: 96px; }

  .ph-sum { font-size: var(--fs-caption); }
}
@media (pointer: coarse) {
  .tbtn, .tab, .chip { min-height: var(--touch); }
}
@media (prefers-reduced-motion: reduce) {
  .pill.live i, .prog-bar > span.indet { animation: none; }
}
@media print {
  .top, .foot, .tv-bar, .smap, .smap-line .seg, .ph-actions { display: none !important; }
}

/* ------------------------------------------------------------------ page-specific bits */

.ph-warn a { color: inherit; }
.ph-warn a.t-no { color: var(--no); }
.stack { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); }

.picker { display: flex; flex-direction: column; gap: var(--sp-8); margin-top: var(--sp-8); }
.picker .input { width: 260px; }
.picker-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-4) var(--sp-16); max-height: none; }
.problems { margin: 0; padding: var(--sp-8) var(--sp-12) var(--sp-8) var(--sp-28); grid-column: 1 / -1; border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--line)); border-radius: var(--r-md); background: color-mix(in srgb, var(--warn) 5%, var(--panel)); font-size: var(--fs-meta); color: var(--ink2); }
.run-warn { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--sp-6); padding: var(--sp-8) var(--sp-12); border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--line)); border-radius: var(--r-md); background: color-mix(in srgb, var(--warn) 5%, var(--panel)); font-size: var(--fs-meta); color: var(--ink2); overflow-wrap: anywhere; }
.run-warn p { margin: 0; max-width: 120ch; }
.instr { max-width: 100ch; font-size: var(--fs-small); line-height: 1.65; }
.mono-title { font-family: var(--mono); font-size: var(--fs-h4); letter-spacing: 0; }
.sub-h3 { margin: var(--sp-28) 0 var(--sp-10); }
.settings-sec { display: flex; flex-direction: column; gap: var(--sp-12); min-width: 0; }
.settings-sec .form, .settings-sec .lede, .settings-sec .howto, .settings .kv { max-width: 960px; }
/* Settings › Accounts: one table, grouped by provider; a key's form opens in a row under it */
.tbl.accts td:first-child { width: 30%; }
.tbl.accts .acct-act { white-space: nowrap; width: 1%; }
.tbl.accts .acct-act .confirm { margin-left: var(--sp-4); }
.tbl.accts .acct-unset td { color: var(--ink2); }
.acct-g { font-weight: 600; color: var(--ink); margin-right: var(--sp-8); }
.acct-note { display: block; margin-top: var(--sp-2); color: var(--muted); font-size: var(--fs-caption); }
.acct-more { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6); }
.tbl tr.acct-form-row td, .tbl tr.acct-form-row:hover td { background: var(--sunk); }
.acct-form { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: var(--sp-10) var(--sp-16); padding: var(--sp-6) 0; max-width: 820px; }
.acct-form .wide:first-child { grid-column: 1 / -1; }
.acct-form .form-actions { grid-column: 1 / -1; }
/* Settings › Versions: each version's facts under its name; what it can do in the table after */
.rt { display: flex; flex-direction: column; gap: var(--sp-8); margin-top: var(--sp-8); }
.rt-h { display: flex; align-items: center; gap: var(--sp-8); font-size: var(--fs-small); }
/* a section's longer explanation, folded under its heading */
.howto { margin: calc(-1 * var(--sp-4)) 0 var(--sp-12); font-size: var(--fs-meta); color: var(--muted); }
.howto summary { width: fit-content; cursor: pointer; color: var(--muted); }
.howto summary:hover { color: var(--ink); }
.howto[open] summary { margin-bottom: var(--sp-6); }
.howto p { max-width: 75ch; margin-bottom: var(--sp-6); }
/* inline confirmation (ui.js ConfirmButton): what will be lost, said beside the armed button */
.confirm { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--sp-4) var(--sp-8); }
.confirm-what { font-size: var(--fs-caption); color: var(--ink2); white-space: normal; text-align: right; max-width: 36ch; }
.confirm-what:empty { display: none; }

/* The sandbox budget (Settings): a meter in one hue per state (accent, then warn near the cap, no once used up), its fill
   on a lighter track of the same hue, the time runs in progress hold hatched after a 2 px surface gap. */
.meter { --m: var(--accent); --m-track: color-mix(in srgb, var(--m) 14%, transparent); display: flex; flex-direction: column;
  gap: var(--sp-8); max-width: 720px; margin-bottom: var(--sp-8); }
html[data-theme="dark"] .meter { --m-track: color-mix(in srgb, var(--m) 26%, transparent); }
.meter.m-warn { --m: var(--warn); }
.meter.m-no { --m: var(--no); }
.meter-track { display: flex; height: 10px; border-radius: var(--r-xs); overflow: hidden; background: var(--m-track); }
.meter-fill { flex: none; background: var(--m); }
.meter-held { flex: none; background: repeating-linear-gradient(135deg, var(--m) 0 2px, color-mix(in srgb, var(--m) 30%, transparent) 2px 5px); }
.meter-fill + .meter-held { border-left: 2px solid var(--paper); }
.sw.meter-sw-fill { background: var(--m); }
.sw.meter-sw-held { background: repeating-linear-gradient(135deg, var(--m) 0 2px, color-mix(in srgb, var(--m) 30%, transparent) 2px 4px); }
.sw.meter-sw-left { background: var(--m-track); box-shadow: inset 0 0 0 1px var(--line); }
.budget-form { margin-top: var(--sp-6); }

.st-cont { margin: var(--sp-12) 0; padding: var(--sp-8) var(--sp-12); border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--line)); border-radius: var(--r-md); background: color-mix(in srgb, var(--warn) 5%, var(--panel)); font-size: var(--fs-meta); }
.file { font-size: var(--fs-meta); color: var(--muted); max-width: 100%; }
.file::file-selector-button { height: var(--ctl-sm); padding: 0 var(--sp-10); margin-right: var(--sp-10); border: 0; border-radius: var(--ctl-r); background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink); font: 500 var(--fs-meta)/1 var(--sans); cursor: pointer; }
.file::file-selector-button:hover { background: var(--hover); }
.tbl tr.sum td { background: var(--sunk); }
.coverage .lede { margin-top: 0; }

/* ---- tables: sortable headers, the column picker and group headings (components/table.js) ---- */
.th-sort { display: inline-flex; align-items: center; gap: var(--sp-2); max-width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: inherit; cursor: pointer; white-space: nowrap; border-radius: var(--r-xs); }
.th-sort:hover, .th-sort.on { color: var(--ink); }
/* the caret (table.js SortMark): hidden at rest, faint on hover or focus, ink and turned for the sorted column */
.th-ar { display: inline-flex; color: var(--faint); opacity: 0; transition: opacity var(--t-fast), transform var(--t-fast); }
.th-sort:hover .th-ar, .th-sort:focus-visible .th-ar { opacity: 1; }
.th-ar.on { opacity: 1; color: var(--ink); }
.th-ar.asc { transform: rotate(180deg); }
.colpick { order: 99; flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6); }
.tbl tr.grp-h th { position: static; padding: var(--sp-10) var(--sp-10) var(--sp-6); background: var(--sunk); color: var(--ink2); font-size: var(--fs-meta); font-weight: 400; white-space: normal; }
.tbl tbody.grp tr:not(.grp-h) > :first-child { padding-left: var(--sp-20); } /* a group's rows sit under its heading */
.tbl tbody:not(:last-child) tr:last-child td { border-bottom: var(--hairline); }
.select.sm { height: var(--ctl-sm); padding-left: var(--sp-8); font-size: var(--fs-meta); }

.chip.sm { height: var(--ctl-xs); padding: 0 var(--sp-8); font-size: var(--fs-caption); }

.unit { font-size: var(--fs-caption); }

@media (max-width: 720px) {
  .colpick-btn, .colpick { display: none; }
}

/* ---- the reward ramp and the trial cells' key ---- */
/* Reward ramp for continuous rewards: the accent mixed into the page, so a reward of 1 is the
   accent blue in both themes and 0 recedes toward the page (lightness monotone in both themes; text AA on every step).
   Series slots 4 to 6 follow --c1..--c3 in the dataviz default order with the accent as slot 1; every adjacent pair
   passes the CVD and normal-vision checks in both themes (three light slots sit under 3:1, so every value is also in a
   readout and a table view). The order's violet and red are left out: violet is nearly the accent in dark mode. */
:root {
  --rp0: color-mix(in srgb, var(--accent) 12%, var(--paper)); --rp1: color-mix(in srgb, var(--accent) 28%, var(--paper));
  --rp2: color-mix(in srgb, var(--accent) 44%, var(--paper)); --rp3: color-mix(in srgb, var(--accent) 60%, var(--paper));
  --rp4: color-mix(in srgb, var(--accent) 86%, var(--paper)); --rp5: color-mix(in srgb, var(--accent) 85%, var(--ink));
  --c4: #eda100; --c5: #e87ba4; --c6: #008300;
}
html[data-theme="dark"] { --c4: #c98500; --c5: #d55181; --c6: #008300; }
.t-warn { color: var(--warn); }
.mx-key { display: inline-flex; align-items: center; gap: var(--sp-6); white-space: nowrap; }
.mx-legend .mx-key .cell { width: 22px; height: 16px; }
button.mx-key { padding: 2px var(--sp-4); margin: -2px calc(-1 * var(--sp-4)); border: 0; border-radius: var(--r-xs); background: none; color: inherit; font: inherit; cursor: pointer; }
button.mx-key:hover { background: var(--hover); color: var(--ink); }
button.mx-key[aria-pressed="false"] { color: var(--faint); }
button.mx-key[aria-pressed="false"] > span:last-child { text-decoration: line-through; }
button.mx-key[aria-pressed="false"] .cell { opacity: .3; }


/* ---- trace page ---- */
/* Header: the strips and badges wrap (stress test rows 5 and 13); the task name links to its task page. */
.sib-nav { flex-wrap: wrap; min-width: 0; }
.sibs { flex-wrap: wrap; }
.ph-badges { flex-wrap: wrap; min-width: 0; }
.ph-badges > .badges { display: contents; }
.ph-tlink { color: inherit; text-decoration: none; }
.ph-tlink:hover { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; }

/* Walking a list: a pane beside the trace on wide screens, else a slim bar that stays under the header. --walk-h is the
   bar's height, which the trajectory's sticky bar and step scrolling allow for. */
.trace-page { --walk-h: 0px; }
.trace-page.walking { --walk-h: calc(var(--ctl-sm) + var(--sp-12)); }
.trace-main { min-width: 0; }
.tl { display: none; }
.tw-bar { position: sticky; top: var(--top-h); z-index: 7; height: var(--walk-h); display: flex; align-items: center; margin: calc(-1 * var(--sp-8)) 0 var(--sp-4); background: var(--paper); border-bottom: var(--hairline); }
/* On phones the header can be shorter than --top-h; fill the gap above the bar so steps don't show through it. */
@media (max-width: 720px) { .tw-bar { box-shadow: 0 calc(-1 * var(--sp-16)) 0 var(--paper); } }
@media (min-width: 1180px) {
  .trace-page.walking.list-on { --walk-h: 0px; display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: var(--sp-24); align-items: start; }
  @media (min-width: 1440px) { .trace-page.walking.list-on { grid-template-columns: 280px minmax(0, 1fr); } }
  .trace-page.list-on > .trace-main { grid-column: 2; grid-row: 1; }
  .trace-page.list-on > .tl { grid-column: 1; grid-row: 1; display: block; position: sticky; top: calc(var(--top-h) + var(--sp-12)); max-height: calc(100vh - var(--top-h) - var(--sp-24)); overflow: auto; overscroll-behavior: contain; padding-right: var(--sp-4); }
  .trace-page.list-on .tw-bar { display: none; }
  /* The pane marks the trace among its task's trials: the header's buttons for them give way ([ and ] still work). */
  .trace-page.list-on.in-list .sib-nav { display: none; }
}
@media (max-width: 1179px) { .walk-pane { display: none; } }
.walk { display: flex; align-items: center; gap: var(--sp-6) var(--sp-12); min-width: 0; width: 100%; }
.walk-nav { display: inline-flex; align-items: center; gap: var(--sp-6); flex: none; }
.walk-pos { min-width: 8ch; text-align: center; font-size: var(--fs-caption); color: var(--muted); white-space: nowrap; }
.walk-pos b { color: var(--ink); font-weight: 600; }
.walk-what { display: flex; align-items: baseline; gap: var(--sp-8); flex: 1; min-width: 0; font-size: var(--fs-meta); }
.walk-back { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; text-decoration: none; unicode-bidi: plaintext; }
.walk-back:hover { text-decoration: underline; }
.walk-pane { flex: none; margin-left: auto; }
.tl-h { position: sticky; top: 0; z-index: 1; padding: 0 0 var(--sp-6); background: var(--paper); border-bottom: var(--hairline); }
.walk.in-pane { flex-direction: column; align-items: stretch; gap: var(--sp-8); }
.walk.in-pane .walk-nav .walk-pos { flex: 1; }
.walk.in-pane .walk-back { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: var(--fs-meta); line-height: 1.4; }
.walk-sub { display: flex; align-items: baseline; gap: var(--sp-8); min-width: 0; }
.walk-sub .walk-back { flex: 1; }
.walk-sub .walk-pane { margin-right: calc(-1 * var(--sp-6)); }
.tl-rows { list-style: none; margin: 0; padding: var(--sp-4) 0 var(--sp-8); }
.tl-row { display: flex; align-items: center; gap: var(--sp-8); min-width: 0; padding: var(--sp-4) var(--sp-6); border-radius: var(--r-xs); color: var(--ink2); font-size: var(--fs-caption); text-decoration: none; }
.tl-row:hover { background: var(--hover); color: var(--ink); }
.tl-row[aria-current="true"] { background: var(--accent-soft); color: var(--ink); box-shadow: inset 2px 0 0 var(--accent); }
/* A task name cut in the middle: the head shrinks with an ellipsis, the tail (its last word) stays. */
.tl-task { flex: 1; display: flex; min-width: 0; white-space: nowrap; font-family: var(--mono); unicode-bidi: plaintext; }
.tl-task.tq { font-family: var(--sans); } /* a task's question, not its id */
.tl-h1 { min-width: 2ch; overflow: hidden; text-overflow: ellipsis; }
.tl-h2 { flex: none; }
.tl-row.rep .tl-task { color: var(--faint); }
.tl-row.rep[aria-current="true"] .tl-task { color: var(--ink2); }
.tl-trial { flex: none; min-width: 2ch; text-align: right; color: var(--faint); font: 400 var(--fs-caption)/1 var(--mono); }
.tl-note { padding: var(--sp-12) var(--sp-6); font-size: var(--fs-caption); color: var(--faint); }

/* The trajectory bar: text mode and layout; a jump into a call marks it for a moment. */
.tc { border-radius: var(--r-sm); scroll-margin-top: calc(var(--top-h) + var(--walk-h, 0px) + var(--tv-h, 56px) + var(--sp-12)); transition: background var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease); }
.tc.flash { background: var(--accent-soft); box-shadow: 0 0 0 var(--sp-4) var(--accent-soft); }
.tc-dur { color: var(--faint); font: 400 var(--fs-caption)/1 var(--mono); }
.msg-raw { color: var(--ink); }
/* A long command wraps beside its prompt, which stays on the first line (pre.cmd also takes the share box's flex rule). */
.mono-block.cmd { align-items: baseline; }

/* Outline: each step's header, its message cut to three lines, one row per tool call. */
.st.outline { padding-bottom: var(--sp-8); }
.st.outline > .st-h { cursor: pointer; }
.st.outline > .st-h:hover .st-l { color: var(--accent); }
.st-b.ol { margin-top: var(--sp-4); gap: var(--sp-4); }
.ol-rs { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--faint); font-size: var(--fs-caption); font-style: italic; }
.ol-k { margin-right: var(--sp-4); color: var(--muted); font-style: normal; }
.ol-call { display: flex; align-items: center; gap: var(--sp-8); min-width: 0; margin: 0 calc(-1 * var(--sp-6)); padding: var(--sp-2) var(--sp-6); border-radius: var(--r-xs); color: var(--ink2); font-size: var(--fs-caption); text-decoration: none; }
.ol-call:hover { background: var(--hover); color: var(--ink); }
.ol-call .tc-name { flex: none; max-width: 30%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ol-call.err .tc-name { background: color-mix(in srgb, var(--no) 12%, transparent); }
.ol-in { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); }
.ol-out { flex: none; max-width: 36%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--faint); }
.ol-call.err .ol-out { color: var(--no); }
.ol-dur { flex: none; color: var(--faint); font: 400 var(--fs-caption)/1 var(--mono); }
.cbox { min-width: 0; }
.cbox:not(.open) { max-height: calc(var(--lines, 3) * 1.6em); overflow: hidden; }
.cbox.cut { -webkit-mask-image: linear-gradient(to bottom, var(--ink) 55%, transparent); mask-image: linear-gradient(to bottom, var(--ink) 55%, transparent); }
.cbox .md h1, .cbox .md h2, .cbox .md h3, .cbox .md h4, .cbox .md h5, .cbox .md h6 { margin-top: 0; }
.cbox-btn { margin-left: calc(-1 * var(--sp-6)); }

/* Copy buttons: in the corner of a message or output, at the end of a tool call's header; shown on hover and focus,
   always on touch screens. Never over text: a message's or reasoning's lines end before the corner its button sits in
   (outputs and inputs are boxes, whose button sits in the box's corner); on phones and touch screens, where it always
   shows, it takes its own line at the top right instead. */
.cpw { position: relative; min-width: 0; }
.cpw.prose { padding-right: 64px; }
.cp-corner { position: absolute; top: var(--sp-4); right: var(--sp-4); z-index: 2; min-height: var(--ctl-xs); padding: 0 var(--sp-8); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: var(--fs-caption); opacity: .4; transition: opacity var(--t-fast); }
.cpw.prose > .cp-corner { top: 0; right: 0; }
.cp-corner:hover { background: var(--panel); }
.cpw:hover > .cp-corner, .cpw:focus-within > .cp-corner, .cp-corner.done { opacity: 1; }
@media (max-width: 640px), (hover: none) {
  .cpw, .cpw.prose { display: flex; flex-direction: column; padding-right: 0; }
  .cpw > .cp-corner, .cpw.prose > .cp-corner { position: static; order: -1; align-self: flex-end; margin-bottom: var(--sp-4); opacity: 1; }
}
.tc-cp { margin-left: auto; min-height: var(--sp-20); font-size: var(--fs-caption); opacity: .4; }
.tc:hover > .tc-h > .tc-cp, .tc-cp:focus-visible, .tc-cp.done { opacity: 1; }

/* JSON tree, folded like a file tree. */
.jt { min-width: 0; color: var(--ink2); font: 400 var(--fs-caption)/1.6 var(--mono); }
.jt.box { padding: var(--sp-6) var(--sp-8); background: var(--sunk); border: var(--hairline); border-radius: var(--r-sm); }
.jt-tools { display: flex; gap: var(--sp-4); margin: 0 0 var(--sp-4) calc(-1 * var(--sp-6)); }
.jt-row { position: relative; min-width: 0; padding-left: var(--sp-16); border-radius: var(--r-xs); overflow-wrap: anywhere; }
.jt-row:hover { background: var(--hover); }
.jt-t { position: absolute; left: 0; top: calc((1.6em - var(--sp-14)) / 2); width: var(--sp-14); height: var(--sp-14); padding: 0; border: 0; border-radius: var(--r-xs); background: none; color: var(--faint); cursor: pointer; }
.jt-t::before { content: ""; position: absolute; left: 3px; top: 4px; width: 5px; height: 5px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); transition: transform var(--t-fast); }
.jt-t[aria-expanded="true"]::before { left: 4px; top: 3px; transform: rotate(45deg); }
.jt-t:hover { color: var(--ink); }
.jt-k { margin-right: var(--sp-6); color: var(--syn-key); }
.jt-i { margin-right: var(--sp-6); color: var(--faint); }
.jt-p { color: var(--faint); }
.jt-s { min-width: 0; color: var(--syn-str); overflow-wrap: anywhere; }
.jt-num { color: var(--syn-num); }
.jt-kw { color: var(--syn-kw); }
.jt-sum { padding: 0; border: 0; background: none; color: var(--faint); font: inherit; cursor: pointer; }
button.jt-sum:hover { color: var(--ink); }
span.jt-sum { cursor: default; }
.jt-kids { margin-left: var(--sp-6); padding-left: var(--sp-8); border-left: 1px solid var(--line); }
.jt-more { min-height: var(--sp-20); margin-left: var(--sp-4); font-size: var(--fs-caption); vertical-align: baseline; }
.jt-page { margin: var(--sp-2) 0 var(--sp-2) calc(-1 * var(--sp-6)); }
.jt-sb { margin: var(--sp-2) 0 var(--sp-4); color: var(--syn-str); font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
.jt-cp { position: absolute; top: 0; right: 0; min-height: var(--sp-16); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: var(--fs-caption); opacity: 0; }
.jt-cp:hover { background: var(--panel); }
.jt-row:hover > .jt-cp, .jt-cp:focus-visible, .jt-cp.done { opacity: 1; }

@media (hover: none) { .cp-corner, .tc-cp, .jt-cp { opacity: 1; } }
@media (max-width: 720px) {
  .ol-call:not(.err) .ol-out { display: none; }
  .ol-call .tc-name { max-width: 40%; }
}
@media print { .tw-bar, .tl { display: none !important; } }

/* ---- env, task, files ---- */
/* an id with a copy button */
.cid { display: inline-flex; align-items: center; gap: var(--sp-4); min-width: 0; max-width: 100%; vertical-align: middle; }
.cid > .mono { overflow-wrap: anywhere; min-width: 0; }
.cid-b { flex: none; position: relative; width: var(--sp-20); height: var(--sp-20); border: 0; border-radius: var(--r-xs); background: none; color: var(--faint); cursor: pointer; }
.cid-b:hover { color: var(--ink); background: var(--hover); }
.cid-b.done { color: var(--ok); }
.cid-b i, .cid-b i::after { position: absolute; width: var(--sp-8); height: var(--sp-10); border: 1.5px solid currentColor; border-radius: var(--r-2xs); }
.cid-b i { left: var(--sp-4); top: var(--sp-6); }
.cid-b i::after { content: ""; left: var(--sp-2); top: calc(-1 * var(--sp-4)); border-left-color: transparent; border-bottom-color: transparent; }
.cid-b.done i { border-color: transparent; }
.cid-b.done i::after { width: var(--sp-6); height: var(--sp-10); left: var(--sp-2); top: calc(-1 * var(--sp-4)); border: 0; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; border-radius: 0; transform: rotate(40deg); }

/* copyable commands */
.cmdbox { border: var(--hairline); border-radius: var(--r-sm); background: var(--sunk); min-width: 0; }
.cmdbox + .cmdbox { margin-top: var(--sp-8); }
.cmdbox-h { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8); padding: var(--sp-4) var(--sp-4) 0 var(--sp-10); }
.cmdbox-l { font-size: var(--fs-caption); font-weight: 500; color: var(--muted); cursor: help; }
.cmdbox-k { font-weight: 400; color: var(--faint); }
.cmdbox-c { margin: 0; padding: var(--sp-4) var(--sp-10) var(--sp-8); font: 400 var(--fs-caption)/1.6 var(--mono); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.cmdbox-c code { background: none; padding: 0; font-size: inherit; overflow-wrap: anywhere; }
.cmdbox-n { padding: 0 var(--sp-10) var(--sp-8); font-size: var(--fs-caption); color: var(--muted); }
.repro { margin-bottom: var(--sp-20); max-width: 920px; } /* tops the run page's Manifest tab */
.cmdbox.capped .cmdbox-c { max-height: calc(4.5 * 1.6em + var(--sp-12)); overflow: auto; }

/* file browser: a tree and a viewer, each scrolling on its own */
.fb { display: grid; grid-template-columns: 300px minmax(0, 1fr); height: max(420px, calc(100vh - var(--top-h) - var(--sp-88))); border: var(--hairline); border-radius: var(--r-md); background: var(--panel); overflow: hidden; }
.fb-tree { overflow: auto; border-right: var(--hairline); padding-bottom: var(--sp-12); min-width: 0; }
.fb-th { position: sticky; top: 0; z-index: 1; display: flex; flex-direction: column; gap: var(--sp-6); padding: var(--sp-10) var(--sp-10) var(--sp-8); background: var(--panel); border-bottom: var(--hairline); }
.fb-th .input { width: 100%; height: var(--ctl-sm); }
.fb-count { font-size: var(--fs-caption); color: var(--faint); }
.fb-note { padding: var(--sp-8) var(--sp-10) 0; font-size: var(--fs-caption); color: var(--muted); overflow-wrap: anywhere; }
.fb-group { margin-top: var(--sp-10); }
.fb-gh { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-8); padding: 0 var(--sp-10) var(--sp-2); font: 500 var(--fs-caption)/1.4 var(--sans); color: var(--muted); }
.fb-folder { color: var(--faint); font-weight: 400; }
.fb-list, .fb-list ul { list-style: none; margin: 0; padding: 0; }
.fb-row { display: flex; align-items: center; gap: var(--sp-6); width: 100%; min-height: var(--ctl-xs); padding: 0 var(--sp-10) 0 calc(var(--sp-10) + var(--d, 0) * var(--sp-14)); border: 0; background: none; color: var(--ink2); font: 400 var(--fs-meta)/1.3 var(--sans); text-align: left; cursor: pointer; }
.fb-row:hover { background: var(--hover); color: var(--ink); }
.fb-file.on { background: var(--accent-soft); color: var(--ink); }
.fb-file .fb-name { font-family: var(--mono); font-size: var(--fs-caption); }
.fb-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-meta { flex: none; color: var(--faint); font: 400 var(--fs-micro)/1 var(--mono); font-variant-numeric: tabular-nums; }
.fb-caret { flex: none; width: 0; height: 0; border-top: var(--sp-4) solid transparent; border-bottom: var(--sp-4) solid transparent; border-left: var(--sp-6) solid var(--faint); transition: transform var(--t-fast); }
.fb-caret.open { transform: rotate(90deg); }
.fb-view { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.fb-vh { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-12); padding: var(--sp-8) var(--sp-10) var(--sp-8) var(--sp-14); border-bottom: var(--hairline); }
.fb-path { min-width: 0; overflow-wrap: anywhere; color: var(--ink); }
.fb-facts { font-size: var(--fs-caption); color: var(--faint); white-space: nowrap; }
.fb-tools { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }
.fb-body { flex: 1 1 auto; min-height: 0; overflow: auto; }
.fb-body > .state { margin: var(--sp-16); }
.fb-md { padding: var(--sp-14) var(--sp-16); max-width: 100ch; }
.fb-more { padding-left: var(--sp-14); padding-right: var(--sp-14); }
.fv-code { width: max-content; min-width: 100%; padding: var(--sp-6) 0 var(--sp-12); font: 400 var(--fs-caption)/1.6 var(--mono); color: var(--ink2); tab-size: 4; }
.fv-code.wrap { width: auto; }
.fv-l { display: flex; }
.fv-l.sel { background: var(--accent-soft); }
.fv-n { position: sticky; left: 0; flex: none; width: calc(var(--nw, 4ch) + var(--sp-16)); padding-right: var(--sp-10); background: var(--panel); color: var(--ghost); text-align: right; text-decoration: none; user-select: none; font-variant-numeric: tabular-nums; }
.fv-n:hover { color: var(--ink2); }
.fv-l.sel .fv-n { color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--panel)); }
.fv-c { flex: 1 1 auto; padding-right: var(--sp-16); white-space: pre; }
.fv-code.wrap .fv-c { white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
.sy-kw { color: var(--syn-kw); }
.sy-str { color: var(--syn-str); }
.sy-num { color: var(--syn-num); }
.sy-com { color: var(--syn-com); font-style: italic; }
.sy-key { color: var(--syn-key); font-weight: 500; }
.sy-var { color: var(--syn-var); }
.sy-fn { color: var(--syn-fn); font-weight: 500; }
.sy-add { color: var(--ok); }
.sy-del { color: var(--no); }

@media (max-width: 720px) {
  .fb { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: auto; }
  .fb-tree { max-height: 40vh; border-right: 0; border-bottom: var(--hairline); }
  .fb-view { height: 75vh; }
  .fb-tools { margin-left: 0; }
}

.about h3 { margin-bottom: var(--sp-8); }
.about .kv { grid-template-columns: minmax(84px, max-content) minmax(0, 1fr); }
.readme { max-width: 100ch; min-width: 0; }

.md-readme { font-size: var(--fs-small); line-height: 1.65; }
.md-readme h1 { font: 500 var(--fs-h4)/1.3 var(--display); margin: var(--sp-20) 0 var(--sp-10); }
.md-readme h2 { font: 500 var(--fs-h3)/1.3 var(--display); margin: var(--sp-24) 0 var(--sp-8); padding-bottom: var(--sp-6); border-bottom: var(--hairline); }
.md-readme h3 { font: 600 var(--fs-ui)/1.4 var(--sans); margin: var(--sp-20) 0 var(--sp-6); }
.md-readme h4, .md-readme h5, .md-readme h6 { font: 600 var(--fs-small)/1.4 var(--sans); margin: var(--sp-16) 0 var(--sp-4); }
.md-readme > :first-child { margin-top: 0; }
.md-readme p, .md-readme ul, .md-readme ol, .md-readme blockquote, .md-readme pre, .md-readme .md-table { margin-bottom: var(--sp-12); }
.md-readme .md-code { white-space: pre; overflow-x: auto; overflow-wrap: normal; }
.md-readme [id^="md-"] { scroll-margin-top: calc(var(--top-h) + var(--sp-16)); }

/* ---- names in any script ---- */
/* Names users and sources choose (runs, tasks, environments, descriptions) may be right-to-left; each orders itself by
   its first strong character, while the layout stays left-aligned. */
.t-name a, .ph-title, .sub-line, .crumbs a, .crumbs > span, .crumb > span, .dw-label, .sb-l, .tl-task { unicode-bidi: plaintext; }

/* A count or total in a matrix cell: the number on a neutral ground, since the key has no 0-1 scale to colour by. */
.cell.c-num { background: var(--sunk); color: var(--ink2); box-shadow: inset 0 0 0 1px var(--line); font-weight: 400; letter-spacing: -.02em; }

/* Settings, share links: a comparison's runs under its link */
.share-what .sub-line { max-width: 52ch; }

/* ---- generated summaries ---- */
/* A model's reading of a trace (traces/summaries.py, components/summary.js), kept apart from the deterministic evidence:
   dashed outlines, no fill and no status colours, and "generated" in every heading, column and tooltip. */
.gs { display: flex; flex-direction: column; gap: var(--sp-6); min-width: 0; max-width: 120ch; margin: var(--sp-4) 0 var(--sp-12); padding: var(--sp-10) var(--sp-12); border: 1px dashed var(--line-strong); border-radius: var(--r-md); }
.gs.stale { opacity: .7; }
.gs-h { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); font-size: var(--fs-caption); color: var(--muted); }
.gs-t { color: var(--ink2); font-weight: 500; cursor: help; }
.gs-dot { margin-left: var(--sp-4); color: var(--muted); font-weight: 400; }
.gs-m { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); min-width: 0; }
.gs-m .mono { color: var(--muted); overflow-wrap: anywhere; }
.gs-r { display: inline-flex; align-items: center; gap: var(--sp-8); margin-left: auto; }
.gs-cls { display: inline-block; padding: 0 var(--sp-6); border: 1px dashed var(--line-strong); border-radius: var(--r-xs); color: var(--ink2); font: 400 var(--fs-micro)/1.6 var(--mono); white-space: nowrap; cursor: help; }
.gs-conf { color: var(--faint); white-space: nowrap; }
.gs-text { font-size: var(--fs-meta); line-height: 1.6; color: var(--ink2); overflow-wrap: anywhere; }
.gs-note { font-size: var(--fs-caption); color: var(--muted); }
.gs-ev { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-caption); color: var(--muted); }
.gs-ev li { display: flex; align-items: baseline; gap: var(--sp-8); min-width: 0; }
.gs-ev li > span { min-width: 0; overflow-wrap: anywhere; }
.gs-step { flex: none; margin-left: calc(-1 * var(--sp-4)); padding: 0 var(--sp-4); border-radius: var(--r-xs); color: var(--ink2); font: 400 var(--fs-caption)/1.5 var(--mono); text-decoration: none; }
.gs-step:hover { color: var(--accent); background: var(--hover); }
@media (max-width: 720px) {
  .gs { padding: var(--sp-8) var(--sp-10); }
  .gs-r { margin-left: 0; }
}

/* ---- trials in progress ---- */
/* in-progress cells in a job's grid: all in the accent family (blue means still going), told apart by their code; a
   pulsing ring around the cell while the agent works */
.cell.c-live { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); font-weight: 500; }
.cell.c-live.s-agent::after { content: ""; position: absolute; inset: calc(-1 * var(--sp-2)); border-radius: var(--r-xs); box-shadow: 0 0 0 1px var(--accent); animation: pulse 1.6s var(--ease) infinite; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .cell.c-live.s-agent::after { animation: none; }
}

/* BenchFlow versions: the run form's choice, a run's version in its header, matrix columns and leaderboard rows that name
   their engine, and the capability table in Settings. */
.rt-choice .radio { max-width: 100%; }

.rt-caps td { vertical-align: top; min-width: 18ch; }
.rt-caps td:first-child { color: var(--ink2); font-weight: 500; white-space: nowrap; }
.rt-caps .pill { margin-bottom: var(--sp-4); }
.rt-note { display: block; max-width: 60ch; font-size: var(--fs-caption); line-height: 1.5; color: var(--muted); }
@media (max-width: 720px) {
  .rt-caps td:first-child { white-space: normal; }
}

/* New run (pages/newrun.js, components/runform.js): the environment step and its search, the controls line, More
   options, Start with the estimate beside it; the run page's More menu (components/ui.js Menu). */
.nr-env { display: flex; flex-direction: column; gap: var(--sp-8); max-width: 960px; margin-bottom: var(--sp-20); }
.nr-env-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6) var(--sp-10); font-size: var(--fs-meta); }
.nr-env-name { font-size: var(--fs-ui); font-weight: 500; }
.nr-env .state { margin: 0; }
.nr-pick { display: flex; flex-direction: column; gap: var(--sp-8); }
.nr-pick > .input { width: min(420px, 100%); }
.nr-pick-list { list-style: none; margin: 0; padding: 0; max-width: 640px; border: var(--hairline); border-radius: var(--r-md); background: var(--panel); }
.nr-pick-list li + li { border-top: var(--hairline); }
.nr-pick-list button { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-10); width: 100%; padding: var(--sp-8) var(--sp-12); border: 0; border-radius: 0; background: none; color: var(--ink2); font: 400 var(--fs-meta)/1.4 var(--sans); text-align: left; cursor: pointer; }
.nr-pick-list li:first-child button { border-radius: var(--r-md) var(--r-md) 0 0; }
.nr-pick-list li:last-child button { border-radius: 0 0 var(--r-md) var(--r-md); }
.nr-pick-list button:hover { background: var(--hover); }
.nr-pick-name { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.nr-pick-runs { margin-left: auto; }
.nr-left { margin: calc(-1 * var(--sp-8)) 0 var(--sp-16); }
.nr-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8) var(--sp-12); padding: var(--sp-6) var(--sp-10); border-left: 2px solid var(--warn); background: var(--panel); font-size: var(--fs-meta); color: var(--ink2); }
.nr-controls.bad { border-left-color: var(--no); }
.nr-controls p { margin: 0; overflow-wrap: anywhere; }
.nr-controls a { color: inherit; }
.nr-controls a.t-no { color: var(--no); }
.nr-controls .state.error { flex-basis: 100%; margin: 0; padding: 0; border: 0; background: none; }
.nr-form > .state { grid-column: 1 / -1; margin: 0; }
/* The model field holds its whole placeholder ("as BenchFlow names it, e.g. glm/glm-5.3"): two of the form's narrow
   columns where it has three or four. */
@media (min-width: 760px) { .nr-form > .field:has(> input[list="bh-models"]) { grid-column: span 2; } }
.nr-form .picker-list { max-height: 296px; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-8) var(--sp-10); border: var(--hairline); border-radius: var(--r-md); background: var(--panel); }
.nr-form .picker .note { margin: 0; }
.nr-optin { align-items: center; }
.nr-optin > .muted { font-size: var(--fs-caption); }
.nr-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-14) var(--sp-24); }
.nr-row > .field { flex: 0 1 auto; min-width: 0; }
.nr-row > .field:first-child { width: 140px; }
.nr-cap { flex-wrap: nowrap; gap: var(--sp-6); }
.nr-cap .input.num { width: 96px; }
.nr-cap select.input { width: auto; }
.field-err { color: var(--no); }
.nr-est b { color: var(--ink); font-weight: 500; }
.nr-est .t-warn, .nr-est .t-warn b { color: var(--warn); }
.nr-more > summary { width: fit-content; max-width: 100%; cursor: pointer; font-size: var(--fs-meta); font-weight: 500; color: var(--ink2); }
.nr-more > summary .muted { margin-left: var(--sp-10); font-weight: 400; font-size: var(--fs-caption); }
.nr-more[open] > summary { margin-bottom: var(--sp-14); }
.nr-launch { align-items: flex-start; flex-wrap: nowrap; }
.nr-est { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; padding-top: var(--sp-2); font-size: var(--fs-caption); color: var(--faint); overflow-wrap: anywhere; }
.nr-est p { margin: 0; }
.nr-est .nr-req { font-size: var(--fs-meta); color: var(--ink2); }
@media (max-width: 720px) {
  .nr-launch { flex-wrap: wrap; }
}
.menu { position: relative; display: inline-flex; }
.menu-btn[aria-expanded="true"] { background: var(--press); }
.menu-pop { position: absolute; top: calc(100% + var(--sp-4)); right: 0; z-index: 30; display: flex; flex-direction: column; min-width: 200px; padding: var(--sp-4); border: var(--hairline); border-radius: var(--r-md); background: var(--panel); box-shadow: var(--shadow-2); }
.menu-pop > span { display: flex; }
.menu-item, .menu-pop .btn { display: flex; align-items: center; justify-content: flex-start; width: 100%; height: var(--ctl-sm); padding: 0 var(--sp-10); border: 0; border-radius: var(--r-sm); background: none; box-shadow: none; color: var(--ink); font: 400 var(--fs-meta)/1 var(--sans); text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; }
.menu-item:hover, .menu-pop .btn:hover { background: var(--hover); color: var(--ink); box-shadow: none; }
.menu-sep { margin: var(--sp-4) 0; border: 0; border-top: var(--hairline); }
.menu-h { margin: 0; padding: var(--sp-6) var(--sp-10) var(--sp-2); color: var(--muted); font-size: var(--fs-caption); }
.menu-item .mi-on, .menu-item .kbd { flex: none; margin-left: auto; }
.menu-item .mi-on { color: var(--ink); }
.menu-item.menu-danger, .menu-item.menu-danger:hover { color: var(--no); }
.menu-pop .armed, .menu-pop .armed:hover { color: var(--no); background: color-mix(in srgb, var(--no) 8%, transparent); }

/* ---- Settings › Usage ---- */
.usage .section:first-child { margin-top: var(--sp-8); }

/* ---- accounts slice: email sign-in, the header's workspace switcher, Settings › Members, the run menu's "Hidden from
   partners" check ---- */
.signin-form { display: flex; gap: var(--sp-8); }
.signin-form .input { flex: 1; min-width: 0; height: var(--ctl-lg); padding: 0 var(--sp-12); font-size: var(--fs-small); }
.signin-form .btn { height: var(--ctl-lg); padding: 0 var(--sp-16); }
.signin-problem { font-size: var(--fs-meta); color: var(--ink2); padding: var(--sp-6) var(--sp-10); border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--line)); border-radius: var(--r-md); background: color-mix(in srgb, var(--warn) 5%, var(--panel)); }
.signin-ops { color: var(--muted); font-size: var(--fs-meta); }
.signin-ops summary { cursor: pointer; width: fit-content; }
.signin-ops[open] summary { margin-bottom: var(--sp-8); color: var(--ink2); }
.signin-ops p { margin-bottom: var(--sp-8); }
.signin-card .signin-again { padding: 0; }
.tbl.members tr.invited td:first-child { color: var(--muted); }
.tbl.members td .badges { flex-wrap: nowrap; } /* scopes on one line: rows keep one height */
.tbl.members td.person { overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .signin-form { flex-direction: column; }
  .signin-form .input { flex: none; } /* in a column, flex: 1 squashed it to nothing */
  .tbl.members td.r { white-space: normal; } /* an invitation's Resend above its Revoke */
  /* a phone: each person is their name or email, then their scopes, with Remove at the end of the row */
  .tbl.members thead { display: none; }
  .tbl.members tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-bottom: var(--hairline); }
  .tbl.members td { border-bottom: 0; }
  .tbl.members td.person { grid-column: 1; grid-row: 1; padding-bottom: 0; }
  .tbl.members td:nth-child(2) { grid-column: 1; grid-row: 2; padding-top: var(--sp-4); padding-left: var(--sp-10); }
  .tbl.members td.r { grid-column: 2; grid-row: 1 / span 2; }
  .tbl.members .badges { flex-wrap: wrap; }
}

/* ---- dot-and-interval rows (components/charts.js DotWhisker): a label over its second line, the reference as a ring */
.dw-row.two { align-items: start; }
.dw-row.two .dw-track { margin-top: 1px; }
.dw-row .dw-label:has(> a) { white-space: normal; }
.dw-label > a { display: block; overflow-wrap: anywhere; }
.dw-sub { display: block; white-space: normal; overflow-wrap: anywhere; font: 400 var(--fs-caption)/1.4 var(--mono); color: var(--muted); }
.dw-tail { display: block; font-size: var(--fs-caption); color: var(--muted); }
.dw-ref { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--panel); box-shadow: inset 0 0 0 2px var(--ink2); }

/* The trace page's keyboard shortcuts (components/trace-keys.js): a popover in the corner under the top bar. */
.keys-pop { position: fixed; top: calc(var(--top-h) + var(--sp-12)); right: var(--sp-24); z-index: 40; width: min(380px, calc(100vw - 2 * var(--sp-16))); max-height: calc(100vh - var(--top-h) - var(--sp-24)); overflow: auto; padding: var(--sp-12) var(--sp-16) var(--sp-14); border: var(--hairline); border-radius: var(--r-md); background: var(--panel); box-shadow: var(--shadow-2); font-size: var(--fs-meta); }
.keys-pop:focus { outline: none; }
.keys-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-8); }
.keys-h h2 { font: 600 var(--fs-small)/1.3 var(--sans); }
.keys-g + .keys-g { margin-top: var(--sp-10); }
.keys-n { margin-bottom: var(--sp-4); font: 600 var(--fs-caption)/1.3 var(--sans); color: var(--muted); }
.keys-g dl { display: flex; flex-direction: column; gap: var(--sp-4); margin: 0; }
.keys-r { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: var(--sp-8); align-items: baseline; }
.keys-r dt { white-space: nowrap; }
.keys-r dd { margin: 0; color: var(--ink2); }
.gs-more { margin-left: var(--sp-2); vertical-align: baseline; }
@media (max-width: 720px) { .keys-pop { right: var(--sp-16); } }

/* ================================================================== G10: the minimal hub
   The frame (four places, the search box with suggestions, the narrow menu) and the pages: Leaderboards, the
   Benchmarks and Environments lists, a benchmark's page, Jobs, a job's page and the trial grid. */

/* ------------------------------------------------------------------ shared page parts */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-10) var(--sp-16); margin: var(--sp-4) 0 var(--sp-12); }
.toolbar .input { width: min(420px, 100%); }
.tab-body { margin-top: var(--sp-16); }
.sub-h { margin: var(--sp-20) 0 var(--sp-8); font: 600 var(--fs-small)/1.4 var(--sans); }
.lede-w { max-width: 72ch; margin: 0 0 var(--sp-12); }
.lede-w .lede { margin: 0; color: var(--ink2); font-size: var(--fs-small); overflow-wrap: anywhere; }
.lede-w .lede.clamped { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lede-w .tbtn { margin-top: var(--sp-2); padding: 0; }
.narrow-only { display: none !important; }
@media (max-width: 720px) { .tbl .sub-line.narrow-only { display: block !important; } }
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--sp-28); align-items: start; }
.facts { position: sticky; top: calc(var(--top-h) + var(--sp-16)); padding: var(--sp-12) var(--sp-14); border: var(--hairline); border-radius: var(--r-md); background: var(--panel); }
@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; } .facts { position: static; } }
.notice.n-warn { --n: var(--warn); }
.notice.n-no { --n: var(--no); }
.fail-raw { flex-basis: 100%; font-size: var(--fs-caption); color: var(--muted); }
.fail-raw pre { margin-top: var(--sp-6); max-height: 240px; overflow: auto; }

/* ------------------------------------------------------------------ leaderboards (home) */
.lb-wrap { overflow-x: auto; }
.lb { width: auto; min-width: 100%; }
.lb th, .lb td { white-space: nowrap; }
.lb th { top: auto; }
.lb thead th { top: 0; }
.lb th.lb-model, .lb td.lb-model { position: sticky; left: 0; z-index: 3; background: var(--panel); min-width: 200px; max-width: 280px; text-align: left; border-right: var(--hairline); }
.lb thead th.lb-model { z-index: 4; }
.lb tbody th.lb-model { font-weight: 400; padding: var(--sp-8) var(--sp-10); border-bottom: var(--hairline); }
.lb tbody tr:last-child th.lb-model { border-bottom: 0; }
.lb tbody tr:hover th.lb-model { background: var(--hover); }
.lb-mid { display: block; color: var(--ink); font-size: var(--fs-meta); overflow: hidden; text-overflow: ellipsis; }
.lb th.lb-col { vertical-align: bottom; text-align: right; padding: var(--sp-8) var(--sp-10); min-width: 104px; max-width: 160px; }
.lb-sort { display: inline-flex; align-items: flex-end; justify-content: flex-end; gap: 2px; width: 100%; padding: 0; border: 0; background: none; color: var(--ink2); font: 500 var(--fs-caption)/1.3 var(--sans); text-align: right; cursor: pointer; white-space: normal; }
.lb-sort:hover { color: var(--ink); }
.lb-name { overflow-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lb-caret { flex: none; opacity: 0; transition: opacity var(--t-fast); }
.lb-sort:hover .lb-caret, .lb-sort:focus-visible .lb-caret, .lb-col.sorted .lb-caret { opacity: 1; }
.lb-cited { display: block; margin-top: 2px; color: var(--faint); font: 400 var(--fs-micro)/1.3 var(--sans); }
.lb td.lb-cell { text-align: right; padding: 0; }
.lb td.lb-cell a { display: flex; flex-direction: column; align-items: flex-end; padding: var(--sp-6) var(--sp-10); color: var(--ink2); text-decoration: none; }
.lb td.lb-cell a:hover { background: var(--accent-soft); color: var(--ink); }
.lb td.lb-cell.none { padding: var(--sp-6) var(--sp-10); }
.lb-v { font-size: var(--fs-small); }
.lb-n { color: var(--faint); font-size: var(--fs-micro); }
.lb td.best .lb-v { color: var(--ink); font-weight: 600; }
/* After the base rule, so it applies: on a phone the model column gives the benchmarks most of the width. */
@media (max-width: 720px) {
  .lb th.lb-model, .lb td.lb-model { min-width: 120px; max-width: 136px; }
}

/* ------------------------------------------------------------------ benchmark lists and pages */
.list-tbl .t-name { min-width: 28ch; }
.list-tbl .sub-line { max-width: 80ch; }
.best-l { text-decoration: none; white-space: nowrap; }
.best-l .mono { margin-left: var(--sp-4); }
.board .pick { width: 32px; padding-right: 0; }

.board tr.picked td { background: var(--accent-soft); }
.board .ci { font-size: var(--fs-caption); }
.diff-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8) var(--sp-12); margin-bottom: var(--sp-12); padding: var(--sp-8) var(--sp-12); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: var(--r-md); background: var(--accent-soft); font-size: var(--fs-meta); }
.diff-line p { flex: 1 1 40ch; }
.controls-line { margin-top: var(--sp-12); color: var(--ink2); font-size: var(--fs-meta); }

/* ------------------------------------------------------------------ jobs and the trial grid */
.jobs-tbl .t-name { min-width: 24ch; }
/* Tables on a phone (after the pages' own column rules, so it applies): a header wraps rather than widen its column, and
   a name column takes what the others leave, so a table fits the screen where its columns can; one that can't scrolls
   with its edge shadow. */
@media (max-width: 720px) {
  .tbl thead th, .tbl thead .th-sort { white-space: normal; }
  .tbl .t-name, .list-tbl .t-name, .jobs-tbl .t-name { min-width: 12ch; }
}
.figures { display: flex; flex-wrap: wrap; gap: var(--sp-12) var(--sp-32); margin: var(--sp-4) 0 var(--sp-16); padding: var(--sp-12) var(--sp-16); border: var(--hairline); border-radius: var(--r-md); background: var(--panel); }
.fig { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; font-size: var(--fs-small); }
.fig-k { color: var(--muted); font-size: var(--fs-caption); }
.fig-wide { flex: 1 1 220px; }
.outbar-w { display: flex; flex-direction: column; gap: var(--sp-4); }
.outbar { display: flex; height: 6px; width: 100%; max-width: 280px; border-radius: 3px; overflow: hidden; background: var(--sunk); gap: 1px; }
.outbar i { display: block; min-width: 2px; }
.ob-ok { background: var(--ok); } .ob-no { background: var(--no); } .ob-warn { background: var(--warn); } .ob-o2 { background: var(--o2); } .ob-neutral { background: var(--ghost); }
.outbar-l { color: var(--ink2); font-size: var(--fs-meta); }
.grid-tbl th.t-name { font-weight: 400; max-width: 48ch; }
.task-n { display: block; max-width: 48ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.tiles { display: flex; flex-wrap: wrap; gap: 3px; }
@media (max-width: 720px) {
  .task-n { max-width: 22ch; }
  .figures { gap: var(--sp-10) var(--sp-20); padding: var(--sp-10) var(--sp-12); }
}
/* a trial's title is its task's question: Geist's heading-24, so a long one stays a heading */
.trace-page .ph-title { font-size: 24px; letter-spacing: -.03em; }

/* G11 A: benchmarks and leaderboards. A board's row opened from a Leaderboards cell, the board's one-line notes, and
   its narrow layout: below 560 px a row is its model (agent and jobs under it), pass@1 (its interval under it) and
   tasks. Leaderboards: a fade at the right edge while columns are hidden there, and a narrower model column on phones. */
.board tr.target td { background: var(--accent-soft); }
.board-note { margin: 0 0 var(--sp-8); color: var(--ink2); font-size: var(--fs-meta); }
.board-rule { margin-top: var(--sp-12); max-width: 96ch; color: var(--muted); font-size: var(--fs-caption); }
.board .nar { display: none; }
@media (max-width: 560px) {
  .board .c-agent, .board .c-jobs { display: none; }
  .board .sub-line.nar { display: -webkit-box; }
  .board .ci { display: block; }
  .board .b-model { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
}
.lb-note { margin: 0 0 var(--sp-12); color: var(--ink2); font-size: var(--fs-meta); }
.lb-frame { position: relative; }
.lb-frame::after { content: ""; position: absolute; top: 1px; right: 1px; bottom: 1px; width: 32px; z-index: 5; pointer-events: none;
  border-radius: 0 var(--r-md) var(--r-md) 0; background: linear-gradient(to right, transparent, var(--panel)); opacity: 0; transition: opacity var(--t-fast); }
.lb-frame.more-r::after { opacity: 1; }
.lb th.lb-col { min-width: 92px; }
.lb th.lb-model .lb-mid { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .lb th.lb-model, .lb td.lb-model { min-width: 120px; width: 120px; max-width: 120px; }
  .lb th.lb-col { min-width: 76px; }
}
/* Benchmarks and Environments on a phone: the name takes the room, tasks are on the page it opens */
@media (max-width: 560px) {
  .list-tbl .t-name { min-width: 0; }
  .list-tbl .c-tasks { display: none; }
}
/* New job: a number typed inside a choice's line (a sample's size, its seed), at Geist's small control height */
.input.nr-inline { width: 80px; height: var(--ctl-sm); }

/* G11 B2: Jobs and the job page */
.outbar i.ob-rest { background: none; } /* trials still to run: the bar's track */
.jobs-tbl .job-st { margin-top: var(--sp-4); }
.jobs-tbl .job-st .stack { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-8); }
@media (max-width: 720px) {
  .jobs-tbl .job-st.narrow-only { display: block !important; }
  .jobs-tbl .sub-line { -webkit-line-clamp: 3; } /* a long benchmark name and the configuration after it */
}

/* G11: why a row isn't ranked, under its model at every width, in full */
.board .sub-line.why { white-space: normal; width: auto; min-width: 0; max-width: 48ch; }

/* G11 C: a task titled by its question keeps to its column in New job's picker (the tooltip has it whole) */
.picker-list .check { min-width: 0; max-width: 100%; }
.picker-list .check .q { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* G12 D: boards and the home page. Leaderboards: a column's name opens its benchmark and the caret beside it sorts the
   rows (always shown, faint until hovered or on). A board's notes and the facts its rows share, said once above its
   table; why a row isn't ranked, whole at every width (the 720 px rule clamps other sub-lines to two lines). */
.lb-head { display: flex; align-items: flex-end; justify-content: flex-end; gap: 0; }
.lb th.lb-col .lb-name { min-width: 0; color: var(--ink2); font: 500 var(--fs-caption)/1.3 var(--sans); text-align: right; text-decoration: none; white-space: normal; }
.lb th.lb-col .lb-name:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.lb-sort { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: 0 -8px -4px -2px;
  padding: 0; border: 0; border-radius: var(--r-sm); background: none; color: var(--faint); cursor: pointer; }
.lb-sort:hover, .lb-col.sorted .lb-sort { color: var(--ink); }
.lb-sort .lb-caret { opacity: .6; }
.lb-sort:hover .lb-caret, .lb-col.sorted .lb-sort .lb-caret { opacity: 1; }
.board-facts { margin: 0 0 var(--sp-8); color: var(--muted); font-size: var(--fs-caption); }
.board-note + .board-facts { margin-top: calc(-1 * var(--sp-4)); }
.board .sub-line.why { display: block; -webkit-line-clamp: unset; overflow: visible; }
/* where a row came from, whole like why it isn't ranked: a mark cut to "imported from Harbor H…" says less than it must */
.board .sub-line.from { display: block; width: auto; min-width: 0; max-width: 48ch; white-space: normal; -webkit-line-clamp: unset; overflow: visible; }