:root {
  /* Dark, always: whatever the visitor's system prefers. It used to follow
     prefers-color-scheme, so the page looked one way to us and another to half the course.
     Cards sit a step above the page and a table's head a step below, so a surface reads as a
     surface without a shadow, which on a dark ground is a smudge rather than a lift. */
  color-scheme: dark;
  --background: #0b0d10;
  --block: #14171c;
  --text: #f3f4f6;
  --body-text: #d1d5db;
  --muted: #9099a8;
  --border: #262b33;
  --border-strong: #333a45;
  --primary: #fb923c;
  --primary-hover: #fdba74;
  --primary-soft: #2a1c10;
  --success: #4ade80;
  --warning: #fbbf24;
  --danger: #f87171;
  --sunken: #11141a;
  --row-hover: #171b21;
  --shadow: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--background); color: var(--text); font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; }
button, input, select { font: inherit; }
button { cursor: pointer; }
main { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 36px 0 52px; }

.app-header { max-width: 760px; margin: 0 auto 28px; text-align: center; }
.app-header h1 { margin: 0 0 10px; font-size: 32px; line-height: 1.2; font-weight: 700; }
.tabs { display: flex; justify-content: center; gap: 4px; margin-bottom: 24px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--muted); font-weight: 500; }
.tab svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tab:hover { color: var(--text); background: var(--sunken); }
.tab.active { color: var(--text); background: var(--block); border-color: var(--border); box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }

.panel { display: none; }
.panel.active { display: block; }
.panel-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 14px; }
.panel-heading h2 { margin: 0 0 4px; font-size: 20px; line-height: 1.3; }
.panel-heading p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.updated { white-space: nowrap; font-size: 11px !important; }

.block, .toolbar, .table-shell { background: var(--block); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); }
.toolbar { display: grid; grid-template-columns: minmax(240px, 1fr) auto auto auto; gap: 10px; align-items: end; padding: 12px; margin-bottom: 12px; }
.search { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 11px; border: 1px solid var(--border-strong); border-radius: 7px; background: var(--block); }
.search > span { color: var(--muted); font-size: 18px; }
.search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 13px; }
.toggle { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 9px; color: var(--body-text); font-size: 12px; white-space: nowrap; }
.toggle input { width: 15px; height: 15px; accent-color: var(--primary); }

.table-shell { position: relative; overflow-x: auto; }
.table-shell.is-empty { min-height: 180px; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th { height: 42px; padding: 0 12px; border-bottom: 1px solid var(--border); background: var(--sunken); color: var(--muted); text-align: right; font-size: 11px; font-weight: 600; white-space: nowrap; }
th:first-child, th:nth-child(2), td:first-child, td:nth-child(2) { text-align: left; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover, th.active-sort { color: var(--text); }
td { height: 54px; padding: 0 12px; border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--row-hover); }
.rank { width: 42px; color: var(--muted); }
.rank.top, .score.primary { color: var(--primary-hover); font-weight: 600; }
.model-cell a { display: inline-flex; align-items: center; gap: 5px; max-width: 290px; overflow: hidden; color: var(--text); font-weight: 600; text-decoration: none; text-overflow: ellipsis; }
.model-cell a::after { content: "↗"; color: var(--muted); font-size: 10px; }
.model-cell a:hover { color: var(--primary-hover); }
.pill { display: inline-flex; padding: 3px 7px; border-radius: 6px; background: #1b1f26; color: var(--body-text); font-size: 11px; }
.availability { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }
.availability.yes { background: var(--success); }
.table-footer { display: flex; justify-content: space-between; padding: 8px 3px 0; color: var(--muted); font-size: 11px; }
.empty-state { position: absolute; inset: 43px 0 0; display: grid; place-content: center; text-align: center; color: var(--muted); }
.empty-state h3 { margin: 0 0 4px; color: var(--body-text); font-size: 14px; }
.empty-state p { margin: 0; font-size: 12px; }
.skeleton { display: block; width: 48px; height: 10px; border-radius: 4px; background: var(--border); }
.skeleton.wide { width: 160px; }

.submit-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: 14px; align-items: start; }
.submit-card, .guidance-card, .about-copy, .citation-card { padding: 18px; }
.block-heading { padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.block-heading h3, .guidance-card > h3 { margin: 0 0 4px; font-size: 15px; }
.block-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; padding: 16px 0; }
.field { display: grid; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field > span { color: var(--body-text); font-size: 12px; font-weight: 500; }
.field b { margin-left: 3px; color: var(--muted); font-size: 10px; font-weight: 400; }
.field small { color: var(--muted); font-weight: 400; }
.field input, .field select { width: 100%; height: 39px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 7px; outline: 0; background: var(--block); color: var(--text); font-size: 13px; }
.field input:focus, .field select:focus, .search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.primary-button { min-height: 38px; padding: 0 14px; border: 1px solid var(--primary-hover); border-radius: 7px; background: var(--primary); color: #fff; font-weight: 600; }
.primary-button:hover { background: var(--primary-hover); }
.primary-button:disabled { opacity: .6; cursor: wait; }
.guidance-card { max-height: 560px; overflow: auto; }

.prose { color: var(--body-text); font-size: 13px; line-height: 1.6; }
.prose h2, .prose h3 { color: var(--text); }
.prose h2 { margin: 20px 0 6px; font-size: 17px; }
.prose h3 { margin: 16px 0 5px; font-size: 14px; }
.prose p { margin: 7px 0; }
.prose pre { margin: 10px 0; overflow-wrap: anywhere; white-space: pre-wrap; padding: 11px; border: 1px solid var(--border); border-radius: 7px; background: var(--sunken); font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }
.prose pre code { font-size: inherit; }
.prose a { color: #60a5fa; }
.about-copy { min-height: 160px; }
.about-copy h2:first-child { margin-top: 0; }
.citation-card { display: grid; grid-template-columns: 1fr auto; gap: 12px; margin-top: 12px; }
.citation-card h3 { margin: 5px 0 0; font-size: 14px; }
.citation-card button { align-self: start; padding: 6px 10px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--block); color: var(--text); }
.citation-card pre { grid-column: 1 / -1; overflow: auto; margin: 0; padding: 10px; border-radius: 6px; background: var(--sunken); font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; }

.notice { margin: 10px 0; padding: 10px 12px; border: 1px solid; border-radius: 7px; font-size: 12px; line-height: 1.45; }
.notice.warning { color: var(--warning); background: #2a210c; border-color: #4a3a12; }
.notice.error { color: var(--danger); background: #2a1416; border-color: #4c1d1d; }
.notice.success { color: var(--success); background: #10251a; border-color: #14532d; }
.hidden { display: none !important; }
@media (max-width: 820px) {
  .toolbar { grid-template-columns: 1fr 1fr; }
  .search { grid-column: 1 / -1; }
  .submit-layout { grid-template-columns: 1fr; }
  .guidance-card { max-height: none; }
}

@media (max-width: 560px) {
  main { width: min(100% - 24px, 1180px); padding-top: 24px; }
  .app-header h1 { font-size: 26px; }
  .tabs { justify-content: stretch; }
  .tab { flex: 1; padding-inline: 8px; }
  .panel-heading { display: block; }
  .updated { margin-top: 6px !important; }
  .quota { margin-top: 12px; }
  .toolbar { grid-template-columns: 1fr; }
  .search { grid-column: auto; }
  .form-grid { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }
  .table-footer span:last-child { display: none; }
}

/* ===================================================================================== */
/* ForgeBench additions to the template stylesheet.                                       */
/* Appended rather than merged, so a diff against vendor/upstream-template stays readable. */
/* ===================================================================================== */

.subtitle { margin: 0; color: var(--muted); font-size: 14px; }

.baseline { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; font-weight: 400; }
.baseline::before { content: "vs "; }
.muted { color: var(--muted); }

/* submission form */
.form { display: grid; gap: 16px; padding: 18px; }
.field { display: grid; gap: 6px; }
.field label { color: var(--body-text); font-size: 12px; font-weight: 600; }
.field input { height: 38px; padding: 0 11px; border: 1px solid var(--border-strong); border-radius: 7px; background: var(--block); color: var(--text); font-size: 13px; }
.field input:focus { outline: 2px solid var(--primary); outline-offset: -1px; }
.field input[type="file"] { padding: 7px 10px; height: auto; }
.hint { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.hint code { padding: 1px 4px; border-radius: 4px; background: var(--primary-soft); color: var(--primary-hover); font-size: 11px; }

.actions { display: flex; align-items: center; gap: 12px; }
.upload-status { font-variant-numeric: tabular-nums; }   /* the digits stop jittering as it counts */

/* today's allowance, above the form it governs */
/* the two allowances, in the heading beside "New submission": small enough to read as a
   fact about the page rather than as something happening to your file right now */
.quota { display: flex; flex: 0 0 auto; gap: 20px; }
.quota-item { display: grid; gap: 3px; align-content: end; min-width: 86px; }
.quota-item > span { color: var(--muted); font-size: 11px; letter-spacing: .02em; }
.quota-item > b { color: var(--text); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.quota-item > progress { width: 100%; height: 3px; }
.quota-item.full > b { color: var(--warning); }
.quota-item.full > progress { accent-color: var(--warning); }
.quota-note { margin-bottom: 12px; color: var(--warning); }
.quota-item > progress.blank { visibility: hidden; }

/* the popover under each allowance: on hover, and on keyboard focus for whoever has no mouse.
   CSS alone -- an element that is there and hidden, rather than a title attribute, which
   waits a second, cannot be styled, and never shows on a keyboard. */
.quota-item { position: relative; cursor: default; border-radius: 6px; }
.quota-item:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }
.tip { position: absolute; top: calc(100% + 10px); right: 0; z-index: 20; width: max-content; max-width: 280px;
       padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--block);
       box-shadow: 0 10px 28px -14px rgba(15, 23, 42, .45); color: var(--body-text); font-size: 12px; line-height: 1.45;
       opacity: 0; visibility: hidden; transform: translateY(-3px);
       transition: opacity .12s ease, transform .12s ease, visibility .12s; pointer-events: none; }
.quota-item:hover > .tip, .quota-item:focus-visible > .tip { opacity: 1; visibility: visible; transform: none; }
.tip b { color: var(--text); font-weight: 600; }
.tip p { margin: 6px 0 0; color: var(--muted); font-size: 11px; white-space: normal; }
.tip > p:first-child { margin-top: 0; color: var(--body-text); font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .tip { transition: none; } }
@media (max-width: 560px) { .tip { right: auto; left: 0; } }

/* in place of the form once submissions have closed: information, not an error */
.notice.info { color: var(--body-text); background: var(--sunken); border-color: var(--border-strong); }
/* before submissions open: the whole Submit panel */
.notice.not-open { margin: 4px 0 0; padding: 20px 22px; font-size: 13px; }
.notice.not-open h2 { margin: 0 0 8px; color: var(--text); font-size: 17px; }
.notice.not-open p { margin: 0; }
/* Settings, under the organisers' statistics: three small cards of label and value */
.settings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
@media (max-width: 900px) { .settings { grid-template-columns: minmax(0, 1fr); } }
.settings section { padding: 14px 16px; background: var(--block); border: 1px solid var(--border); border-radius: 10px; }
.settings h3 { margin: 0 0 10px; color: var(--muted); font-size: 12px; font-weight: 500; }
.settings dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 7px 14px; margin: 0; font-size: 12.5px; }
.settings dt { color: var(--muted); }
.settings dd { margin: 0; color: var(--text); }
.settings dd small { color: var(--muted); }

/* "show all" under a table that is showing only its latest few */
.table-more { margin: 10px 0 0; text-align: center; }
.table-more button { font-size: 12px; }
button.primary { height: 38px; padding: 0 20px; border: 0; border-radius: 7px; background: var(--primary); color: #fff; font-weight: 600; }
button.primary:hover:not(:disabled) { background: var(--primary-hover); }
button.primary:disabled { opacity: .55; cursor: not-allowed; }
progress { flex: 1; height: 6px; accent-color: var(--primary); }

.result { margin: 0; padding: 10px 12px; border-radius: 7px; font-size: 13px; line-height: 1.45; }
.result.success { background: #10251a; color: var(--success); }
.result.error   { background: #2a1416; color: var(--danger); }
.result.pending { background: var(--primary-soft); color: var(--warning); }

/* "Your submissions": the same .board table as the leaderboard (see below), a status badge
   standing in for rank. Everything else -- .board-row, .score, .baseline, .disclose-btn,
   .detail* -- is already generic; nothing queue-specific is left to style. */
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .03em; text-align: center; }
.badge.pending { background: var(--primary-soft); color: var(--warning); }
.badge.running { background: #101a2c; color: #93c5fd; }
.badge.done    { background: #10251a; color: var(--success); }
.badge.failed  { background: #2a1416; color: var(--danger); }
.badge.gone    { background: var(--sunken); color: var(--muted); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }

/* prose blocks rendered from copy.py */
.markdown { margin-top: 22px; padding: 20px 24px; color: var(--body-text); font-size: 13px; line-height: 1.65; }
.markdown h2 { margin: 22px 0 8px; color: var(--text); font-size: 17px; }
.markdown h2:first-child { margin-top: 0; }
.markdown h3 { margin: 18px 0 6px; color: var(--text); font-size: 14px; }
.markdown p, .markdown li { margin: 0 0 8px; }
.markdown ul, .markdown ol { margin: 0 0 10px; padding-left: 20px; }
.markdown code { padding: 1px 5px; border-radius: 4px; background: var(--primary-soft); color: var(--primary-hover); font-size: 12px; }
.markdown pre { overflow-x: auto; margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--sunken); }
.markdown pre code { padding: 0; background: none; color: var(--body-text); }
.markdown details { margin: 0 0 12px; }
.markdown .code { position: relative; }
.markdown .copy-code { position: absolute; top: 7px; right: 7px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--muted); font-size: 11px; opacity: 0; transition: opacity .15s ease; }
.markdown .copy-code svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.markdown .code:hover .copy-code, .markdown .copy-code:focus-visible, .markdown .copy-code.done { opacity: 1; }
.markdown .copy-code:hover { border-color: var(--border); background: var(--block); color: var(--text); }
@media (hover: none) { .markdown .copy-code { opacity: 1; } }
.tok-comment { color: #8b949e; font-style: italic; }
.tok-string { color: #7ee787; }
.tok-keyword { color: #d2a8ff; font-weight: 600; }
.tok-builtin { color: #79c0ff; }
.tok-number { color: #ffa657; }
.markdown summary { cursor: pointer; margin-bottom: 8px; color: var(--primary); font-weight: 500; }
.extra-link { margin: 4px 0 0; text-align: right; }
.extra-link a { color: var(--primary); font-weight: 500; text-decoration: none; }
.extra-link a:hover { text-decoration: underline; }
.markdown table { margin-bottom: 12px; font-size: 12px; }
.markdown th, .markdown td { height: auto; padding: 7px 10px; text-align: left; }
.markdown td { white-space: normal; vertical-align: top; }   /* long cells wrap inside the card */
.markdown td:first-child { white-space: nowrap; }

.empty { padding: 26px 14px; color: var(--muted); font-size: 13px; text-align: center; }

.hint a { color: var(--primary-hover); text-decoration: underline; text-decoration-style: dotted; }

/* account state */
.account { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; font-size: 12px; color: var(--muted); }
.account b { color: var(--text); font-weight: 600; }
.account .via { padding: 1px 7px; border-radius: 999px; background: var(--primary-soft); color: var(--warning); font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
button.link { padding: 0; border: 0; background: none; color: var(--muted); font-size: 12px; text-decoration: underline; text-underline-offset: 2px; }
button.link:hover { color: var(--text); }

a.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; align-self: start; height: 38px; padding: 0 18px; border-radius: 7px; font-size: 13px; font-weight: 600; text-decoration: none; }
a.button svg { fill: currentColor; }
a.gitlab { background: #fc6d26; color: #fff; }
a.gitlab:hover { background: #e24329; }
.score.ranks { color: var(--text); font-weight: 600; }
.account { min-height: 30px; }
.account a.button { height: 30px; padding: 0 13px; font-size: 12px; }

/* ===================================================================================== */
/* `hidden` must win over any display we set, or an element the script hides stays put --  */
/* which is exactly how the sign-in button once showed next to "signed in as".             */
[hidden] { display: none !important; }

/* sign-in gate */
/* "or" between the two ways in: a rule either side, small capitals in the muted tone */
.gate-card .or { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; width: 100%; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.gate-card .or::before, .gate-card .or::after { content: ""; height: 1px; background: var(--border); }
.token-form { display: grid; gap: 6px; width: 100%; max-width: 460px; }
.token-form label { color: var(--body-text); font-size: 12px; font-weight: 600; }
.token-form .row { display: flex; gap: 8px; }
.token-form input { flex: 1; height: 38px; padding: 0 11px; border: 1px solid var(--border-strong); border-radius: 7px; background: var(--block); color: var(--text); font-size: 13px; }
.token-form input:focus { outline: 2px solid var(--primary); outline-offset: -1px; }

.optional { margin-left: 6px; color: var(--muted); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; }

/* the sign-in screen, which is the entire page until somebody is signed in */
.gate { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.gate-card { width: min(440px, 100%); display: grid; gap: 16px; padding: 32px; border: 1px solid var(--border); border-radius: 12px; background: var(--block); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 16px 40px -28px rgba(0,0,0,.5); }
.gate-card h1 { margin: 0; font-size: 26px; line-height: 1.2; text-align: center; }
.gate-sub { margin: -8px 0 6px; color: var(--muted); font-size: 13px; line-height: 1.5; text-align: center; }
.gate-card a.button { justify-content: center; width: 100%; height: 40px; }
.gate-card .token-form { max-width: none; }

/* The screensaver behind the sign-in card, moved by lions() in app.js. Each lion is a mask
   (static/lion.png, white on transparent), so its colour is only a background; the two are
   the FIT yellow and the GitLab button's orange, swapped at every wall. */
.gate-card { position: relative; z-index: 1; }
.bounce { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.lion { position: absolute; top: 0; left: 0; background-color: #fab104; pointer-events: auto; cursor: pointer; will-change: transform; -webkit-mask: url(lion.png) center / contain no-repeat; mask: url(lion.png) center / contain no-repeat; }
.lion.orange { background-color: #fc6d26; }
@media (prefers-reduced-motion: reduce) { .bounce { display: none; } }
/* first place: confetti() in app.js draws on this, over everything, for a few seconds */
.confetti { position: fixed; inset: 0; z-index: 100; pointer-events: none; }

/* was an inline style attribute; the content-security-policy refuses those, and a rule
   here is where it belonged anyway */
.panel-heading.spaced { margin-top: 28px; }

/* --- statistics (organisers) --- */
/* eight cards: four by two, two by four, one by eight -- always a full grid. auto-fill used
   to decide the column count from the width, and at most widths that left a ragged last row */
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
@media (max-width: 900px) { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .stat-grid { grid-template-columns: minmax(0, 1fr); } }

/* a participant's stored embeddings, downloadable from the size itself */
a.download { display: inline-flex; align-items: center; gap: 5px; color: var(--primary-hover); text-decoration: none; }
a.download:hover { text-decoration: underline; text-underline-offset: 2px; }
a.download svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.stat-card { padding: 16px 18px; background: var(--block); border: 1px solid var(--border); border-radius: 10px; }
.stat-card h3 { margin: 0; color: var(--muted); font-size: 12px; font-weight: 500; }
.stat-card strong { display: block; margin-top: 8px; color: var(--text); font-size: 22px; font-weight: 650; line-height: 1.15; font-variant-numeric: tabular-nums; }
.stat-card p { margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.stat-card.warn { border-color: var(--warning); }
.stat-card.warn strong { color: var(--warning); }
.stat-card.bad { border-color: var(--danger); }
.stat-card.bad strong { color: var(--danger); }

/* the same tag as the one beside your name in the header, so every tag in the app reads
   alike -- and built from tokens, so it holds in dark mode */
.role-tag { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--primary-soft); color: var(--warning); font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.attention { margin-bottom: 14px; padding: 10px 14px; border: 1px solid var(--warning); border-radius: 10px; background: var(--primary-soft); color: var(--body-text); font-size: 13px; }
.attention p { margin: 2px 0; }
/* the export link and the refresh time, stacked at the right of the Statistics heading */
.stats-actions { display: grid; justify-items: end; gap: 6px; }
a.button.quiet { height: 32px; padding: 0 12px; border: 1px solid var(--border-strong); background: var(--block); color: var(--text); font-size: 12px; font-weight: 500; }
a.button.quiet:hover { border-color: var(--primary); color: var(--primary-hover); }
@media (max-width: 560px) { .stats-actions { justify-items: start; margin-top: 10px; } }
td.reason { height: auto; padding: 10px 12px; white-space: normal; line-height: 1.45; }
.bad-text { color: var(--danger); }

/* --- leaderboard: rows that open --- */
/* An opened row and its detail share one tint, so the two read as a single unit rather than
   a row followed by something else. */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.board th { height: 48px; line-height: 1.3; }
.board th.text, .board td.text { text-align: left; }
/* Eight task columns do not fit the 1180px the rest of the page reads at, and a board that
   has to be scrolled sideways hides exactly the columns being compared. So the leaderboard
   takes up to 1480px, centred on the page -- the negative margins reach past `main` on both
   sides equally -- and never more than the window less a gutter. The Submit tab keeps the
   page's width, table and all: beside its form a wider table looked out of place, and a
   history of your own entries scrolls sideways well enough. */
#panel-leaderboard {
  width: min(1480px, calc(100vw - 48px));
  margin-inline: calc((100% - min(1480px, calc(100vw - 48px))) / 2);
}
/* a task's name may take two lines rather than widening its column to "Station temperature,
   next year"; the values under it are five characters */
.board th.centered { min-width: 64px; max-width: 108px; padding: 6px 8px; white-space: normal; }
.board td.score { padding: 0 8px; }
/* the score columns sit under their heading rather than against the column's right edge:
   the headings are words, the values are three decimals in tabular figures, and centring is
   what puts the two over each other */
.board th.centered, .board td.score { text-align: center; }
.board td.entry { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.board .disclose { width: 34px; padding: 0 0 0 10px; }

.disclose-btn { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--muted); }
.disclose-btn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.disclose-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.board-row { cursor: pointer; }
.board-row:hover .disclose-btn, .board-row.open .disclose-btn { color: var(--text); }
.board-row.open .disclose-btn svg { transform: rotate(90deg); }
/* the participants in the statistics open the same way, into their submissions */
.people-row { cursor: pointer; }
.people-row .disclose { width: 34px; padding: 0 0 0 10px; }
.people-row:hover .disclose-btn, .people-row.open .disclose-btn { color: var(--text); }
.people-row.open .disclose-btn svg { transform: rotate(90deg); }
.history { overflow-x: auto; margin: 4px 0 10px; border: 1px solid var(--border); border-radius: 8px; }
.history table { width: 100%; }
.history-note { margin: 8px 12px; }
/* .detail-row td takes the padding off the cell the history sits in -- and, matching any td
   below it, off the history's own cells too, which then ran into the rounded border */
.detail-row .history td { padding: 0 12px; }
.detail-row .history td:first-child, .detail-row .history th:first-child { padding-left: 16px; }
.detail-row .history td:last-child, .detail-row .history th:last-child { padding-right: 16px; }
.board-row.open td { border-bottom-color: transparent; }
.board-row.open, .board-row.open:hover, .detail-row, .detail-row:hover { background: var(--sunken); }

.detail-row td { height: auto; padding: 0; text-align: left; white-space: normal; }
/* 0fr -> 1fr is how a height of "whatever the content needs" animates without measuring it */
.detail { display: grid; grid-template-rows: 1fr; }
.detail.opening { animation: detail-open .24s cubic-bezier(.2, .8, .2, 1); }
@keyframes detail-open { from { grid-template-rows: 0fr; opacity: 0; } }
.detail-clip { min-height: 0; overflow: hidden; }
.detail-body { padding: 2px 16px 18px 44px; }

.detail-facts { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 12px; font-size: 12px; }
.detail-facts div { display: flex; gap: 6px; min-width: 0; }
.detail-facts dt { color: var(--muted); }
.detail-facts dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }

.task-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 12px; }
.task-card { min-width: 0; padding: 14px 16px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--block); }
.task-card header { margin-bottom: 8px; }
.task-card h3 { margin: 0; font-size: 13px; }
.task-card header p, .task-card > p { margin: 3px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.task-card > p.bad-text { color: var(--danger); }

.curve-shell { overflow-x: auto; }
table.curve { font-size: 12px; font-variant-numeric: tabular-nums; }
.curve th, .curve td { height: auto; padding: 6px 8px; border: 0; background: none; text-align: right; white-space: nowrap; }
.curve thead th { padding-top: 0; border-bottom: 1px solid var(--border); color: var(--muted); font-weight: 500; }
.curve th[scope="row"] { padding-left: 0; text-align: left; color: var(--body-text); font-weight: 500; }
.curve tr:hover { background: none; }
.curve td small { margin-left: 4px; color: var(--muted); font-size: 10px; }
.curve .better { color: var(--muted); font-size: 10px; }
.curve .count-row th, .curve .count-row td { color: var(--muted); font-size: 11px; font-weight: 400; }
.curve .count-row.first th, .curve .count-row.first td { border-top: 1px solid var(--border); }

/* a label that explains itself on hover (initTips in app.js): dotted, so it reads as "ask me" */
[data-tip] { cursor: help; text-decoration: underline dotted var(--border-strong); text-underline-offset: 3px; }
.tip-pop { position: fixed; z-index: 50; max-width: 280px; padding: 7px 10px; border: 1px solid var(--border-strong); border-radius: 7px; background: var(--block); color: var(--text); box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .45); font-size: 12px; font-weight: 400; line-height: 1.45; text-align: left; white-space: normal; pointer-events: none; }
.tip-pop[hidden] { display: none; }

/* the baseline's own block above the entries: tinted and ruled off, so the eye reads it as
   a reference line rather than as the top of the ranking */
.baseline-block { background: var(--sunken); }
.baseline-block td { border-bottom: 2px solid var(--border-strong); color: var(--body-text); }
.baseline-block tr:hover { background: var(--sunken); }
.baseline-block .role-tag { background: transparent; border: 1px solid var(--border-strong); color: var(--muted); }

/* a submission being scored right now, in the column its number will land in */
.spinner { display: inline-block; width: 11px; height: 11px; vertical-align: -1px; border: 2px solid var(--border-strong); border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .detail.opening { animation: none; }
  .disclose-btn svg { transition: none; }
  .spinner { animation-duration: 2.4s; }   /* still says "working", without the flicker */
}
@media (max-width: 560px) {
  .detail-body { padding-inline: 12px; }
}

/* the organisers' delete in a participant's history: quiet until hovered */
.link.danger { color: var(--muted); font-size: 12px; }
.link.danger:hover, .link.danger:focus-visible { color: var(--danger); }