:root {
  color-scheme: light;
  --surface-0: #f4f4f2;
  --surface-1: #fcfcfb;
  --line: #e2e1dc;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-muted: #77766f;
  --accent: #1f5aa6;
  --select: #ffcb05;
  --empty: #ecebe7;
  --no-announcement: #e6d8b0;  /* weekdays arXiv made no announcement (holidays) */
  --umich-blue: #00274c;
  --umich-maize: #ffcb05;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface-0: #121211;
    --surface-1: #1a1a19;
    --line: #33332f;
    --text-primary: #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted: #9a998f;
    --accent: #8db8ea;
    --select: #ffcb05;
    --empty: #262624;
  --no-announcement: #5a4e2e;
    --no-announcement: #5a4e2e;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-0: #121211;
  --surface-1: #1a1a19;
  --line: #33332f;
  --text-primary: #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted: #9a998f;
  --accent: #8db8ea;
  --select: #ffcb05;
  --empty: #262624;
  --no-announcement: #5a4e2e;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: var(--surface-0);
  color: var(--text-primary);
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--accent); }
button { font: inherit; color: inherit; }

.bar {
  color-scheme: dark; /* light date-picker icon on the blue bar */
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 16px; padding: 12px 16px;
  background: var(--umich-blue); color: #ffffff; border-bottom: 4px solid var(--umich-maize);
}
.bar h1 { margin: 0; font-size: 18px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.bar h1 a { color: var(--umich-maize); text-decoration: none; font-size: 22px; }
.bar h1 .fullname { font-weight: 400; font-size: 15px; color: #ffffff; }
.dates { display: flex; align-items: center; gap: 6px; }
.dates button, .dates input {
  height: 32px; border: 1px solid rgb(255 255 255 / 0.35); border-radius: 6px;
  background: rgb(255 255 255 / 0.1); color: #ffffff; padding: 0 8px;
}
.dates button { width: 32px; padding: 0; font-size: 18px; cursor: pointer; }
.dates button:disabled { opacity: 0.35; cursor: default; }
.dates a { padding: 0 6px; color: var(--umich-maize); }
.dates { position: relative; }
.dates #cal { display: grid; place-items: center; font-size: 14px; }

/* The calendar: days with a table stand out, days without an announcement in their own
   color; other weekdays are muted, weekends faint. */
.calendar {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; width: 252px; padding: 8px;
  background: var(--surface-1); color: var(--text-primary); color-scheme: inherit;
  border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 20px rgb(0 0 0 / 0.25);
}
.calendar .cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-weight: 600; }
.calendar .cal-head button { width: 28px; height: 28px; border: 0; border-radius: 6px; background: none; color: var(--text-primary); font-size: 18px; cursor: pointer; }
.calendar .cal-head button:disabled { opacity: 0.3; cursor: default; }
.calendar .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.calendar .cal-dow { font-size: 11px; color: var(--text-muted); padding: 2px 0; }
.calendar .cal-day {
  height: 30px; line-height: 30px; border: 0; border-radius: 6px; padding: 0;
  background: none; color: var(--text-muted); font-size: 13px;
}
.calendar .cal-day.weekend { opacity: 0.4; }
.calendar button.cal-day.has { background: var(--accent); color: var(--surface-1); font-weight: 600; cursor: pointer; }
.calendar button.cal-day.has:hover { filter: brightness(1.15); }
.calendar button.cal-day.has.none { background: var(--no-announcement); color: var(--text-primary); font-weight: 400; }
.calendar .cal-day.current { outline: 2px solid var(--select); outline-offset: -2px; }
.calendar .cal-legend { margin-top: 6px; font-size: 11px; color: var(--text-muted); }

main { padding: 12px 16px 32px; max-width: 1920px; margin: 0 auto; }

.about {
  max-width: 760px; margin: 0 0 14px; padding: 8px 12px;
  background: var(--surface-1); border: 1px solid var(--line); border-radius: 8px;
}
.about summary { cursor: pointer; font-weight: 600; }
.about p, .about ul { margin: 8px 0; color: var(--text-secondary); }
.about ul { padding-left: 20px; }
.about li { margin: 2px 0; }
.about strong { color: var(--text-primary); }
.status { margin: 0 0 12px; color: var(--text-secondary); }
.status.error { color: var(--text-primary); }
.status .clear { margin-left: 8px; }
.status .top-link { margin-left: 16px; }

.legend { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; color: var(--text-secondary); font-size: 12px; }
.legend-scale { width: min(240px, 60vw); }
.legend-bar { height: 10px; border-radius: 4px; }
.legend-ticks { position: relative; height: 14px; }
.legend-ticks span { position: absolute; transform: translateX(-50%); top: 2px; }

/* Fit to width: the table spans the window. The arXiv, r and score columns
   keep their own widths (score columns grow a little on wide screens), and the
   paper column takes the rest. Too many columns for the window scroll sideways. */
.scroll { overflow-x: auto; max-width: 100%; }
table {
  width: 100%;
  border-collapse: separate; border-spacing: 2px;
  background: var(--surface-1); border-radius: 8px;
}
th.id-head, td.id, th.sim-head, td.sim { width: 1%; }
th.who, td.cell { width: clamp(42px, 4.2vw, 76px); min-width: 42px; }
th, td { padding: 0; }
thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-1); color: var(--text-secondary);
  font-weight: 500; font-size: 12px; text-align: left; vertical-align: bottom;
  padding: 6px 6px 4px;
}
th.who { text-align: center; padding-left: 2px; padding-right: 2px; }
th.who button, td.paper button.title {
  border: 0; background: none; padding: 0; cursor: pointer; text-align: inherit;
}
th.who button { font-weight: 600; color: var(--text-primary); }
th.who.inactive button { font-weight: 400; font-style: italic; color: var(--text-muted); }
th.who button:hover, td.paper button.title:hover { text-decoration: underline; }
th .r, td.sim { display: block; font-variant-numeric: tabular-nums; color: var(--text-muted); font-weight: 400; }

td.id, td.paper, td.sim { background: var(--surface-1); padding: 6px; vertical-align: top; }
td.id { font-variant-numeric: tabular-nums; white-space: nowrap; }
td.id a { text-decoration: none; }
td.id a:hover { text-decoration: underline; }
td.paper { min-width: 200px; }
td.paper .id-inline { display: none; }
td.paper button.title { font-weight: 500; color: var(--text-primary); }
td.paper .authors { color: var(--text-secondary); font-size: 12px; margin-top: 2px; }
td.paper .authors a.author { color: inherit; text-decoration: none; }
td.paper .authors a.author:hover { color: var(--accent); text-decoration: underline; }
td.sim { text-align: right; font-size: 12px; }

td.cell {
  height: 100%; border-radius: 4px;
  text-align: center; vertical-align: middle;
  font-variant-numeric: tabular-nums; font-size: 13px;
}
td.cell.missing { background: var(--empty); color: var(--text-muted); }

/* Selection in Maize: a bar, a label or a ring, never a fill of the cell. Maize
   is too light for text or a lone outline on white, so labels carry blue text
   and rings get a thin blue inner edge. */
tr.selected td.paper, tr.selected td.id { box-shadow: inset 4px 0 0 var(--select); }
th.who.selected button { background: var(--select); color: var(--umich-blue); border-radius: 4px; padding: 0 4px; }
td.cell.selected-col, tr.selected td.cell {
  box-shadow: inset 0 0 0 3px var(--select), inset 0 0 0 4px var(--umich-blue);
}

.foot {
  padding: 12px 16px 20px; border-top: 1px solid var(--line);
  color: var(--text-muted); font-size: 12px;
}

.tip {
  position: fixed; z-index: 10; max-width: 320px; pointer-events: none;
  padding: 6px 8px; border-radius: 6px; font-size: 12px;
  background: var(--text-primary); color: var(--surface-1);
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.2);
}
.tip strong { font-variant-numeric: tabular-nums; }

@media (max-width: 1000px) {
  td.paper { min-width: 170px; }
}
/* Narrower windows: the arXiv number moves into the paper cell, and on phones
   it replaces the author line. */
@media (max-width: 820px) {
  th.id-head, td.id { display: none; }
  td.paper .id-inline { display: inline; text-decoration: none; }
  td.paper .id-inline::after { content: " · "; color: var(--text-secondary); }
}
@media (max-width: 640px) {
  td.paper { min-width: 150px; }
  td.paper .id-inline::after { content: none; }
  td.paper .byline { display: none; }
}

/* Top papers: a form above a ranked list, scored by one participant. */
.top-form {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  margin: 0 0 12px; padding: 8px 12px; max-width: 1200px;
  background: var(--surface-1); border: 1px solid var(--line); border-radius: 8px;
}
.top-form label { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); }
.top-form select, .top-form input, .top-form button {
  height: 30px; border: 1px solid var(--line); border-radius: 6px; padding: 0 8px;
  background: var(--surface-0); color: var(--text-primary); font: inherit;
}
.top-form input[type="number"] { width: 72px; }
.top-form button { cursor: pointer; background: var(--accent); color: var(--surface-1); border-color: var(--accent); font-weight: 600; }
table.top th.rank, table.top td.rank, table.top th.when, table.top td.when { width: 1%; white-space: nowrap; }
table.top td.rank, table.top td.when { background: var(--surface-1); padding: 6px; vertical-align: top; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
table.top td.rank { text-align: right; }
table.top td.when a { text-decoration: none; }
table.top td.when a:hover { text-decoration: underline; }
table.top td.paper .title { font-weight: 500; }
table.top th.who span { font-weight: 600; color: var(--umich-blue); background: var(--select); border-radius: 4px; padding: 0 4px; }
@media (max-width: 640px) {
  table.top th.when, table.top td.when { font-size: 12px; }
}
.top-form fieldset.also {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  margin: 0; padding: 0; border: 0; color: var(--text-secondary);
}
.top-form fieldset.also legend { float: left; padding: 0 6px 0 0; }
.top-form label.also-who { gap: 4px; color: var(--text-primary); }
.top-form label.also-who input { height: auto; }
table.top th.who:not(.selected) span { font-weight: 600; color: var(--text-primary); }
table.top th.who.inactive span { font-weight: 400; font-style: italic; color: var(--text-muted); }