:root {
  --bg: #fbfbfa;
  --panel: #ffffff;
  --ink: #1a1a19;
  --muted: #6b6b66;
  --line: #e2e2dd;
  --accent: #2f6f4f;
  --warn: #8a4b1e;
  --ok: #2f6f4f;
  /* One colour per run in a comparison, which holds at most eight
     (MAX_COMPARE in app.js), in a fixed order. Picked for telling neighbours
     apart, colour-blind readers included, rather than to match the page; each
     mode has its own steps rather than one set lightened. */
  --c0: #2a78d6;
  --c1: #eb6834;
  --c2: #1baf7a;
  --c3: #eda100;
  --c4: #e87ba4;
  --c5: #008300;
  --c6: #6250d6;
  --c7: #e34948;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16171a;
    --panel: #1e2024;
    --ink: #e8e8e4;
    --muted: #9a9a94;
    --line: #303338;
    --accent: #6fbf95;
    --warn: #e0a06a;
    --ok: #6fbf95;
    --c0: #3987e5;
    --c1: #d95926;
    --c2: #199e70;
    --c3: #c98500;
    --c4: #d55181;
    --c5: #008300;
    --c6: #9085e9;
    --c7: #e66767;
  }
}

* { box-sizing: border-box; }

/* Room for the scrollbar kept whether or not there is one, so unfolding rows
   until the page scrolls does not shift the whole centred page sideways. */
html { scrollbar-gutter: stable; }

body {
  margin: 0;
  padding: 0 1.25rem 4rem;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

header { max-width: 1100px; margin: 0 auto; padding: 2rem 0 1rem; }
.masthead {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.whoami { font-size: 0.85rem; display: flex; align-items: baseline; gap: 0.15rem; }
h1 { margin: 0; font-size: 1.6rem; letter-spacing: -0.01em; }
h1 a { color: inherit; text-decoration: none; }
h1 .logo { height: 1.5em; width: 1.5em; vertical-align: -0.38em; margin-right: 0.45rem; }
h2 { font-size: 1.1rem; margin: 1.75rem 0 0.5rem; }
h3 { font-size: 0.95rem; margin: 1.5rem 0 0.5rem; }
.sub { margin: 0.35rem 0 0; color: var(--muted); }

code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
code { font-size: 0.85em; }
pre {
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 0.85rem 1rem; overflow-x: auto; font-size: 0.82rem; margin: 0.5rem 0;
}

/* tabs ------------------------------------------------------------------- */
.tabs {
  max-width: 1100px; margin: 0.75rem auto 0; display: flex; gap: 0.25rem;
  border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.tabs button {
  background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--muted); font: inherit; padding: 0.5rem 0.85rem; cursor: pointer;
}
.tabs button:hover { color: var(--ink); }
.tabs button.active { color: var(--ink); border-bottom-color: var(--accent); }

main { max-width: 1100px; margin: 0 auto; }
.tab { display: none; padding-top: 1.25rem; }
.tab.active { display: block; }

/* filters ---------------------------------------------------------------- */
.filters {
  display: flex; flex-wrap: wrap; gap: 0.6rem 0.9rem; align-items: flex-end;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 0.9rem 1rem;
}
.filters label, form label {
  display: flex; flex-direction: column; gap: 0.25rem;
  font-size: 0.78rem; color: var(--muted);
}
/* `display` here beats the `hidden` attribute, which is only a UA rule -- so a
   field the page hides (the invite code, on a hub that wants none) has to be
   hidden again, explicitly. */
.filters label[hidden], form label[hidden] { display: none; }
/* The tick that puts a run into the comparison, big enough to hit. */
input.row-pick { width: 1.15rem; height: 1.15rem; cursor: pointer; }
.filters .grow { flex: 1 1 12rem; }
/* The search box's own clear button, the same in every browser: Firefox draws
   none, and the one WebKit draws is hidden so there are not two. */
.search-box { position: relative; display: flex; }
.search-box input { flex: 1; min-width: 0; padding-right: 2rem; }
.search-box input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.search-box .clear {
  position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%);
  background: none; border: 0; padding: 0 0.4rem; cursor: pointer;
  font: inherit; font-size: 1.15rem; line-height: 1; color: var(--muted);
}
.search-box .clear:hover { color: var(--ink); }
.filters .check {
  flex-direction: row; align-items: center; gap: 0.4rem; padding-bottom: 0.4rem;
  cursor: pointer; white-space: nowrap;
}
select, input, textarea, button[type="submit"] {
  font: inherit; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 6px; padding: 0.35rem 0.5rem;
}
textarea { width: 100%; resize: vertical; }
button[type="submit"], .danger, .plain {
  cursor: pointer; background: var(--accent); border-color: var(--accent);
  color: var(--bg); font-weight: 600; padding: 0.4rem 1rem;
}
.danger, .plain { background: none; color: var(--warn); border-color: var(--line); font-weight: 500; }
.plain { color: var(--accent); }
button.linkish {
  background: none; border: 0; padding: 0; font: inherit; color: var(--accent);
  cursor: pointer; text-align: left;
}
a.linkish { color: var(--accent); text-decoration: none; }
button.linkish:hover, a.linkish:hover { text-decoration: underline; }

.note { color: var(--muted); font-size: 0.85rem; margin: 0.85rem 0; }
/* the key to the ↑/↓ the column headings carry, where words would not fit */
.note.legend { font-size: 0.78rem; margin: 0.5rem 0 0; }
.warn { color: var(--warn); }
.ok { color: var(--ok); }
.muted, .empty { color: var(--muted); }
.hint { color: var(--muted); font-size: 0.75rem; font-weight: 400; }

/* tables ----------------------------------------------------------------- */
.scroller {
  overflow-x: auto; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); margin-top: 1rem;
}
table { border-collapse: collapse; width: 100%; font-size: 0.85rem; }
th, td {
  padding: 0.45rem 0.6rem; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
thead th {
  position: sticky; top: 0; background: var(--panel); z-index: 1;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); font-weight: 600; vertical-align: bottom;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
/* The rest of the CPU under the pointer, quieter than the row itself. */
tbody tr.peer-lit:not(:hover) { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
th.num { text-align: right; }
/* Metrics outside the score (the FP32 pair): a dashed rule before the first of
   them and quieter labels, so they do not read as part of what the score is
   made of. markAside() in app.js puts the class and the reason on them. */
th.aside.num, td.aside.num { border-left: 1px dashed var(--muted); }
th.aside.num ~ th.aside.num, td.aside.num ~ td.aside.num { border-left: 0; }
th.aside .mname, .pct-name.aside, td.aside:not(.num) { font-style: italic; }
.aside-note { font-style: italic; }
/* the header is the sort control */
th .sorth {
  background: none; border: 0; padding: 0; margin: 0; font: inherit;
  color: inherit; letter-spacing: inherit; text-transform: inherit;
  cursor: pointer; width: 100%; text-align: right;
}
th .sorth:hover { color: var(--ink); }
th.sorted { color: var(--ink); }
th.sorted .sorth { color: var(--accent); }
.arrow { margin-left: 0.2rem; }
.wide { white-space: normal; min-width: 15rem; }
/* On the board every column but the name is as wide as what it holds, and the
   name takes the rest: shared out by the browser, the spare width moved every
   column whenever the rows changed, as grouping by CPU does. The vs CPU column
   is set wide enough for its header, since grouped it stands empty. */
#board-table th:not(.wide), #board-table td:not(.wide) { width: 1%; }
#board-table th.fitcol, #board-table td.fit { width: 4.5rem; }
.mname { display: block; }
.munit { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; opacity: 0.75; }
.flags { color: var(--muted); font-size: 0.78rem; }
.label {
  display: block; color: var(--muted); font-size: 0.78rem; font-style: italic;
}
.label.big { font-style: normal; font-size: 0.9rem; }

/* one row per upload, with its records folded underneath ------------------ */
.run-head { display: flex; align-items: baseline; gap: 0.4rem; }
/* The arrow is drawn, not typed: fonts give ▸ and ▾ different sizes and sit
   both low. The glyph stays in the button, unseen, so the button keeps the
   line's height and baseline, and the triangle is centred on that line. */
.expander {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  color: transparent; width: 1rem; flex: none; text-align: left;
  position: relative; overflow: hidden;
}
button.expander::before {
  content: ""; position: absolute; left: 0.1rem; top: 50%;
  width: 0.5rem; height: 0.5rem; margin-top: -0.25rem;
  background: var(--muted); clip-path: polygon(20% 0, 90% 50%, 20% 100%);
  transition: transform 0.12s;
}
button.expander[aria-expanded="true"]::before { transform: rotate(90deg); }
button.expander:hover::before { background: var(--ink); }
.expander.blank { cursor: default; }
@media (forced-colors: active) {
  .expander { color: ButtonText; }
  button.expander::before { display: none; }
}
/* What sits under a row's name -- its label, its submitter, "median of 3
   runs" -- lines up with the name rather than with the arrow before it. */
.run-row td.wide > :not(.run-head) { margin-left: 1.4rem; }
.run-row.nested td.wide > :not(.run-head) { margin-left: 1.8rem; }
.child-row td { color: var(--muted); border-bottom-style: dotted; }
.child-row .childname { padding-left: 1.4rem; }
.child-row:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }
/* a kind of core, averaged, and the cores it folds */
.kind-row td { color: var(--ink); }
.kind-row .expander { margin-right: 0.3rem; }
.child-row.deeper .childname { padding-left: 1.8rem; }
/* a run listed under its CPU on the grouped board */
.run-row.nested td { border-bottom-style: dotted; }
.run-row.nested .run-head { padding-left: 0.4rem; }
.cpu-row strong { font-weight: 600; }
/* where a run stands among its CPU's runs */
.fit { color: var(--muted); }
.fit.good { color: var(--ok); }
.fit.bad { color: var(--warn); }
/* On the board a standing takes its colour only on the CPU being pointed at,
   so a page of them does not all compete for the eye at once. */
tr.run-row:not(:hover):not(.peer-lit) td.fit { color: var(--muted); }
.fit-table td:first-child { color: var(--muted); }
.copylink { font-size: 0.8rem; }

/* compare ---------------------------------------------------------------- */
.cmp-head { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.25rem; }
.chip {
  border: 2px solid var(--chip, var(--line)); border-radius: 8px;
  padding: 0.5rem 0.75rem; font-size: 0.82rem;
  background: color-mix(in srgb, var(--chip, transparent) 16%, var(--panel));
  display: flex; flex-direction: column; gap: 0.15rem; min-width: 12rem;
}
.chip span { color: var(--muted); font-size: 0.75rem; }
/* the label leads the chip, so it is the one line in it drawn as text and not
   as small print; the CPU model under it sits between the two. */
.chip-top { display: flex; align-items: baseline; gap: 0.5rem; justify-content: space-between; }
.chip-top .linkish { font-weight: 600; text-align: left; }
.chip .chip-sub { color: var(--ink); font-size: 0.78rem; }
.chip-x {
  background: none; border: 0; padding: 0 0.1rem; cursor: pointer;
  color: var(--muted); font-size: 1rem; line-height: 1; flex: none;
}
.chip-x:hover { color: var(--warn); }
/* each box wears its bar's colour: a tint over the whole box, an outline round
   all of it and the name in the colour, so the box and its bars read as one. */
.chip.c0 { --chip: var(--c0); }
.chip.c1 { --chip: var(--c1); }
.chip.c2 { --chip: var(--c2); }
.chip.c3 { --chip: var(--c3); }
.chip.c4 { --chip: var(--c4); }
.chip.c5 { --chip: var(--c5); }
.chip.c6 { --chip: var(--c6); }
.chip.c7 { --chip: var(--c7); }
/* The name takes its colour, mixed towards the ink: the lighter of the eight
   (the yellow, the pink) are bars' colours and too pale to read as text. */
.chip .chip-top .linkish {
  color: color-mix(in oklab, var(--chip, var(--accent)) 62%, var(--ink));
}

/* Detailed and Clear selection, on one line above the chips. */
.cmpbar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.cmpbar[hidden] { display: none; }
.cmpbar .check {
  display: flex; align-items: center; gap: 0.4rem; cursor: pointer;
  white-space: nowrap; color: var(--muted); font-size: 0.85rem;
}

.cmp-metric { margin-bottom: 1.1rem; }
.cmp-title { display: flex; gap: 0.5rem; align-items: baseline; margin-bottom: 0.3rem; }
.cmp-title .munit { display: inline; }
.bar-row { display: flex; align-items: center; gap: 0.6rem; margin: 0.18rem 0; }
.bar {
  flex: 1; height: 0.85rem; background: color-mix(in srgb, var(--line) 60%, transparent);
  border-radius: 4px; overflow: hidden;
}
.fill { height: 100%; border-radius: 4px; }
.fill.c0 { background: var(--c0); }
.fill.c1 { background: var(--c1); }
.fill.c2 { background: var(--c2); }
.fill.c3 { background: var(--c3); }
.fill.c4 { background: var(--c4); }
.fill.c5 { background: var(--c5); }
.fill.c6 { background: var(--c6); }
.fill.c7 { background: var(--c7); }
.bar-val { width: 6rem; text-align: right; font-variant-numeric: tabular-nums; font-size: 0.82rem; }
.bar-rel { width: 3.5rem; text-align: right; color: var(--muted); font-size: 0.78rem; }

/* run detail ------------------------------------------------------------- */
.modal {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 3vh 1rem; overflow-y: auto; z-index: 10;
}
.modal[hidden] { display: none; }
.modal-card {
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  padding: 1.5rem; max-width: 900px; width: 100%; position: relative;
}
#detail-close {
  position: absolute; top: 0.6rem; right: 0.8rem; background: none;
  border: 0; color: var(--muted); font-size: 1.4rem; cursor: pointer;
}
.meta { display: grid; grid-template-columns: max-content 1fr; gap: 0.2rem 1rem; margin: 0.75rem 0; font-size: 0.85rem; }
.meta dt { color: var(--muted); }
.meta dd { margin: 0; overflow-wrap: anywhere; }
details.more { margin: 0.5rem 0 0; }
details.more > summary {
  cursor: pointer; color: var(--muted); font-size: 0.82rem; width: fit-content;
}
details.more > summary:hover { color: var(--ink); }
details.more .meta { margin: 0.5rem 0 0.25rem; }
.notes { white-space: pre-wrap; }
.pct-row { display: flex; align-items: center; gap: 0.6rem; margin: 0.2rem 0; }
.pct-name { width: 5.5rem; font-size: 0.82rem; }
.pct-dir { width: 7.5rem; color: var(--muted); font-size: 0.72rem; }
.pct-val { width: 8rem; text-align: right; color: var(--muted); font-size: 0.78rem; }

/* my uploads ------------------------------------------------------------- */
/* A card per CPU, its uploads under it and an upload's variants under that.
   Every level is the same three columns -- tick box, fold arrow, the rest --
   and what hangs under a row sits in the third, so a label, the notes and the
   next level down all line up with the name above them. */
.mine-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 0.6rem 0.85rem; margin-bottom: 0.5rem;
}
.mine-row {
  display: grid; grid-template-columns: auto 1rem minmax(0, 1fr);
  column-gap: 0.45rem; align-items: baseline;
}
/* Against the first line of the row, which is the name, however many lines
   a narrow screen wraps the rest of it onto. */
.mine-row > .pick { align-self: start; margin: 0.12rem 0 0; }
.mine-row > .pick, .batch .check input { width: 1.15rem; height: 1.15rem; cursor: pointer; }
.mine-row > .expander { align-self: baseline; }
.mine-main {
  display: flex; align-items: baseline; gap: 0.3rem 0.7rem; flex-wrap: wrap;
  min-width: 0;
}
.mine-main .muted { font-size: 0.78rem; }
.mine-row > .mine-extra { grid-column: 3; margin-top: 0.2rem; min-width: 0; }
.mine-notes {
  color: var(--muted); font-size: 0.8rem; white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* A level down steps in 1rem, its rule halfway along: the line beside it is
   what reads as nested, not the depth of the step. */
.mine-row > .mine-body {
  grid-column: 1 / -1; border-left: 1px solid var(--line);
  margin-left: 0.5rem; padding-left: 0.5rem; margin-top: 0.4rem;
}
.mine-body > .mine-row + .mine-row {
  border-top: 1px dotted var(--line); margin-top: 0.4rem; padding-top: 0.4rem;
}
.mine-cpu > .mine-main strong { font-weight: 600; }
.unlabelled { font-style: italic; font-weight: 400; }
.count {
  font-size: 0.72rem; color: var(--muted); white-space: nowrap;
  border: 1px solid var(--line); border-radius: 999px; padding: 0 0.5rem;
}
.mine-editbtn {
  font: inherit; font-size: 0.75rem; cursor: pointer; padding: 0.1rem 0.6rem;
  background: var(--bg); color: var(--accent);
  border: 1px solid var(--line); border-radius: 5px;
}
.mine-editbtn:hover:not([disabled]) { border-color: var(--accent); }
.mine-editbtn[disabled] { opacity: 0.45; cursor: default; }
.mine-edit { display: flex; flex-direction: column; gap: 0.6rem; max-width: 36rem; padding: 0.4rem 0; }
.mine-edit label { gap: 0.2rem; }
.mine-edit input { width: 100%; }
.mine-edit .note { margin: 0; }
.mine-edit .buttons { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.mine-edit button {
  cursor: pointer; background: var(--accent); border: 1px solid var(--accent);
  border-radius: 6px; color: var(--bg); font: inherit; font-weight: 600;
  padding: 0.35rem 0.9rem;
}
.mine-edit button.secondary { background: none; color: var(--accent); border-color: var(--line); font-weight: 500; }
.mine-edit button[disabled] { opacity: 0.6; cursor: default; }
/* The bar that acts on whatever is ticked below it. Withdrawing is one button
   for the lot, and it says nothing to press until something is ticked. */
.batch {
  display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
  margin: 0.5rem 0 0.6rem;
}
.batch .check {
  flex-direction: row; align-items: center; gap: 0.4rem;
  font-size: 0.85rem; color: var(--ink); cursor: pointer;
}
.batch button[disabled] { opacity: 0.45; cursor: default; }
/* Hidden runs: a quiet tag in the list, a line on the run's own page. */
.hiddentag { border-style: dashed; }
.hiddennote { color: var(--muted); font-style: italic; }
.mine-adopt { margin-top: 0.8rem; }
.mine-adopt .mine-edit { max-width: 36rem; }
/* The page-size picker sits above My uploads on its own. */
.minebar { display: flex; justify-content: flex-end; margin-bottom: 0.5rem; }

/* Walking a listing that is longer than one page. Drawn only when there is
   somewhere to walk to, so a short board carries no furniture at all. */
.pager {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 0.4rem; margin: 0.75rem 0;
}
.pager .page {
  font: inherit; cursor: pointer; color: var(--accent); background: none;
  border: 1px solid var(--line); border-radius: 6px; padding: 0.3rem 0.7rem;
}
.pager .page:hover:not([disabled]) { border-color: var(--accent); }
.pager .page[disabled] { color: var(--muted); cursor: default; opacity: 0.6; }
.pagecount {
  color: var(--muted); font-size: 0.85rem; padding: 0 0.6rem;
  font-variant-numeric: tabular-nums;
}
.token {
  background: color-mix(in srgb, var(--line) 50%, transparent);
  padding: 0.15rem 0.4rem; border-radius: 4px; word-break: break-all;
  display: inline-block; margin: 0.25rem 0;
}
.tokenbox { display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.tokenbox .copy {
  font: inherit; font-size: 0.72rem; cursor: pointer; padding: 0.15rem 0.5rem;
  background: var(--bg); color: var(--muted);
  border: 1px solid var(--line); border-radius: 5px;
}
.tokenbox .copy:hover { color: var(--ink); }
#uploadform { display: flex; flex-direction: column; gap: 0.75rem; }
#uploadform button { align-self: flex-start; }
#uploadresult { margin-top: 1rem; }

/* submitting ------------------------------------------------------------- */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; }
.steps > li {
  counter-increment: step; position: relative; padding-left: 2.5rem;
  margin-bottom: 2rem;
}
.steps > li::before {
  content: counter(step); position: absolute; left: 0; top: 0.1rem;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent); font-weight: 600; font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center;
}
.steps h2 { margin-top: 0; }

/* a shell block and the button that puts it on the clipboard */
.cmd { position: relative; }
.cmd pre { margin: 0.5rem 0; padding-right: 4.5rem; }
.cmd .copy {
  position: absolute; top: 0.9rem; right: 0.5rem; font: inherit;
  font-size: 0.72rem; cursor: pointer; padding: 0.15rem 0.5rem;
  background: var(--bg); color: var(--muted);
  border: 1px solid var(--line); border-radius: 5px;
}
.cmd .copy:hover { color: var(--ink); }

.drop {
  border: 2px dashed var(--line); border-radius: 12px; background: var(--panel);
  padding: 2rem 1rem; text-align: center; cursor: pointer;
  display: flex; flex-direction: column; gap: 0.3rem; transition: border-color 0.1s;
}
.drop:hover, .drop:focus-visible { border-color: var(--accent); outline: none; }
.drop.over {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
}
.picked { margin: 0.85rem 0; }
.picked-list { margin: 0.3rem 0 0; padding-left: 1.2rem; font-size: 0.85rem; }
.receipt {
  border-left: 3px solid var(--ok); padding: 0.1rem 0 0.1rem 0.8rem;
  margin-bottom: 1rem;
}
.receipt p { margin: 0.35rem 0; }

/* accounts --------------------------------------------------------------- */
.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 1.1rem 1.25rem; max-width: 42rem;
}
.panel h2 { margin-top: 0; }
.authform { display: flex; flex-direction: column; gap: 0.6rem; max-width: 24rem; }
.authform label { gap: 0.2rem; }
.authform input { width: 100%; }
.authform button { align-self: flex-start; }
.authform .buttons { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.authform button, .panel button.danger {
  cursor: pointer; background: var(--accent); border: 1px solid var(--accent);
  border-radius: 6px; color: var(--bg); font: inherit; font-weight: 600;
  padding: 0.4rem 1rem;
}
.authform button.secondary {
  background: none; color: var(--accent); font-weight: 500;
}
.panel button.danger, .authform button.danger {
  background: none; color: var(--warn); border-color: var(--line); font-weight: 500;
}
.authmsg { margin: 0.25rem 0 0; font-size: 0.85rem; min-height: 1.2em; }

.foldname { cursor: pointer; }
#board-chip {
  display: flex; align-items: baseline; gap: 0.5rem; margin-top: 0.85rem;
  font-size: 0.85rem;
}
#board-chip[hidden] { display: none; }

/* the footer: the privacy policy and the source, both on GitHub --------- */
.sitefoot a { color: var(--accent); }
.sitefoot {
  max-width: 1100px; margin: 3rem auto 0; padding-top: 1rem;
  border-top: 1px solid var(--line); color: var(--muted); font-size: 0.85rem;
}

/* A batch before it is sent: a row per machine, its builds, its label. */
.batch-plan { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.5rem 0; }
.batch-up {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(10rem, 16rem);
  gap: 0.25rem 0.75rem; align-items: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 0.5rem 0.75rem;
}
.batch-head { display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; align-items: baseline; min-width: 0; }
.batch-head .muted { font-size: 0.78rem; }
.batch-builds { display: flex; flex-wrap: wrap; gap: 0.3rem; grid-column: 1; }
.batch-up input { grid-column: 2; grid-row: 1 / span 2; width: 100%; }
.count.held { text-decoration: line-through; opacity: 0.7; }
.batch-howto { padding-left: 1.4rem; }
.batch-howto li { margin: 0.3rem 0; }
@media (max-width: 560px) {
  .batch-up { grid-template-columns: minmax(0, 1fr); }
  .batch-up input { grid-column: 1; grid-row: auto; }
}

/* downloads -------------------------------------------------------------- */
.dl-head h2 { margin: 0; font-size: 1.35rem; }
.dl-head .note { margin-top: 0.35rem; }
.dl-hero {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 1rem 1.25rem; margin: 1.25rem 0 0.5rem;
}
.dl-hero h3 { margin: 0 0 0.75rem; font-size: 1rem; }
.dl-hero .note { margin: 0.75rem 0 0; }
.dl-hero .dl-row { margin-top: 0.75rem; }
.dl-buttons { display: flex; flex-wrap: wrap; gap: 0.6rem; }
a.dl-button {
  display: flex; flex-direction: column; gap: 0.05rem; min-width: 11rem;
  padding: 0.55rem 1rem; border-radius: 8px; border: 1px solid var(--accent);
  background: var(--accent); color: var(--bg); text-decoration: none;
}
a.dl-button span { font-size: 0.78rem; opacity: 0.85; }
a.dl-button.secondary { background: none; color: var(--accent); border-color: var(--line); }
a.dl-button:hover { filter: brightness(1.1); }
a.dl-button.secondary:hover { filter: none; border-color: var(--accent); }
.dl-grid {
  display: grid; gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
}
.dl-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 0.85rem 1rem; display: flex; flex-direction: column; gap: 0.5rem;
}
.dl-card h3 { margin: 0; font-size: 0.95rem; }
.dl-card .note { margin: 0; font-size: 0.78rem; }
.dl-row { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: baseline; }
.dl-row .what { font-size: 0.75rem; color: var(--muted); min-width: 4.75rem; }
a.dl-chip {
  display: inline-block; padding: 0.1rem 0.55rem; white-space: nowrap;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg);
  color: var(--accent); font-size: 0.8rem; text-decoration: none;
}
a.dl-chip:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg));
}
.dl-table th, .dl-table td { white-space: normal; vertical-align: top; }
.dl-table tbody th { font-weight: 600; white-space: nowrap; }
.dl-sums { margin-top: 2rem; }
.dl-sums pre { font-size: 0.7rem; max-height: 18rem; }