/* One hand-written stylesheet. No framework, no build step, no purge pass.
   The whole UI is a dozen pages of forms and lists; a utility framework would
   be more bytes than the app. */

:root {
  --bg: #fbfaf8;
  --panel: #ffffff;
  --ink: #1c1a17;
  --muted: #6b6560;
  --line: #ddd8d1;
  --accent: #2f5d8a;
  --good: #2e6b41;
  --warn: #8a5a1f;
  --bad: #97331f;
  --radius: 5px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161513;
    --panel: #1e1d1a;
    --ink: #e8e4de;
    --muted: #9c958c;
    --line: #35322d;
    --accent: #7aa8d4;
    --good: #74b58a;
    --warn: #d9a860;
    --bad: #e08774;
  }
}

* { box-sizing: border-box; }

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

a { color: var(--accent); }
a:hover { text-decoration: none; }

header.top {
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

header.top .inner,
main {
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

header.top .inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  height: 3.25rem;
}

header.top .brand {
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}

header.top nav { display: flex; gap: 1rem; flex: 1; }
header.top nav a { color: var(--muted); text-decoration: none; }
header.top nav a:hover, header.top nav a.on { color: var(--ink); }
header.top .who { color: var(--muted); font-size: 0.85rem; }

main { padding-top: 1.5rem; padding-bottom: 4rem; }

h1 { font-size: 1.5rem; margin: 0 0 0.35rem; letter-spacing: -0.01em; }
h2 { font-size: 1.1rem; margin: 2rem 0 0.75rem; }
h3 { font-size: 0.95rem; margin: 0 0 0.4rem; }
p.lede { color: var(--muted); margin: 0 0 1.5rem; }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  margin-bottom: 1rem;
}

.panel > :first-child { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }

.row { display: flex; gap: 1rem; flex-wrap: wrap; }
.row > * { flex: 1 1 16rem; min-width: 0; }
.between { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }

label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 0.25rem; }

input[type=text], input[type=url], input[type=number], input[type=email], textarea, select {
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
}

textarea { min-height: 8rem; resize: vertical; font-family: var(--mono); font-size: 0.85rem; }
.field { margin-bottom: 0.9rem; }

button, .button {
  display: inline-block;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}

button:hover, .button:hover { border-color: var(--muted); }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.primary:hover { filter: brightness(1.08); }
button.quiet { color: var(--muted); }
button.danger { color: var(--bad); }
button:disabled { opacity: 0.5; cursor: default; }

table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { text-align: left; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 500; font-size: 0.8rem; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.mono { font-family: var(--mono); font-size: 0.85rem; }

.tag {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
}

.tag.good { color: var(--good); border-color: var(--good); }
.tag.warn { color: var(--warn); border-color: var(--warn); }
.tag.bad { color: var(--bad); border-color: var(--bad); }

.banner {
  border: 1px solid var(--warn);
  border-left-width: 3px;
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
  background: var(--panel);
}

.banner.bad { border-color: var(--bad); }
.banner h3 { color: var(--warn); }
.banner.bad h3 { color: var(--bad); }

/* Run view ---------------------------------------------------------------- */

.progress { list-style: none; margin: 0; padding: 0; font-size: 0.88rem; }
.progress li { padding: 0.2rem 0; color: var(--muted); border-bottom: 1px dotted var(--line); }
.progress li:last-child { color: var(--ink); border-bottom: none; }
.progress .n { font-family: var(--mono); font-size: 0.78rem; margin-right: 0.5rem; }

.raters { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0.75rem; }

.rater {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.7rem 0.85rem;
  background: var(--panel);
}

.rater.waiting { opacity: 0.55; }
.rater.holdout { border-style: dashed; }
.rater .name { font-weight: 600; font-size: 0.9rem; }
.rater .score { float: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.rater ul { margin: 0.4rem 0 0; padding-left: 1.1rem; font-size: 0.83rem; color: var(--muted); }

.bars { display: flex; gap: 0.2rem; margin-top: 0.4rem; }
.bars .bar { height: 4px; flex: 1; background: var(--line); border-radius: 2px; }
.bars .bar > span { display: block; height: 100%; background: var(--accent); border-radius: 2px; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline > li { border-bottom: 1px solid var(--line); padding: 0.7rem 0; }
.timeline > li:last-child { border-bottom: none; }
.timeline .n { font-family: var(--mono); color: var(--muted); }
.timeline.selected > li.on { background: color-mix(in srgb, var(--accent) 8%, transparent); }

.diff { font-family: var(--mono); font-size: 0.82rem; white-space: pre-wrap; margin: 0; }
.diff ins { background: color-mix(in srgb, var(--good) 22%, transparent); text-decoration: none; }
.diff del { background: color-mix(in srgb, var(--bad) 22%, transparent); }

details summary { cursor: pointer; color: var(--muted); font-size: 0.88rem; }
details[open] summary { margin-bottom: 0.5rem; }

pre.source {
  font-family: var(--mono);
  font-size: 0.78rem;
  overflow-x: auto;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.7rem;
  margin: 0;
  max-height: 24rem;
}

/* Login ------------------------------------------------------------------- */

.login {
  max-width: 22rem;
  margin: 6rem auto;
  text-align: center;
}

.login .panel { padding: 2rem 1.5rem; }
.login p { color: var(--muted); font-size: 0.9rem; }

.htmx-request .spinner { display: inline; }
.spinner { display: none; color: var(--muted); font-size: 0.85rem; }