:root {
  --bg: #f7f7f4;
  --surface: #ffffff;
  --ink: #1d2422;
  --muted: #5b6763;
  --line: #dfe3e0;
  --accent: #2f6f5e;
  --danger: #a33a2c;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121615;
    --surface: #1a201e;
    --ink: #e6ebe8;
    --muted: #9aa6a1;
    --line: #2c3532;
    --accent: #6fbfa6;
    --danger: #e0806f;
  }
}
:root[data-theme="dark"] {
  --bg: #121615;
  --surface: #1a201e;
  --ink: #e6ebe8;
  --muted: #9aa6a1;
  --line: #2c3532;
  --accent: #6fbfa6;
  --danger: #e0806f;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: var(--accent); }

.bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.brand { font-weight: 650; text-decoration: none; color: var(--ink); }
.brand span { color: var(--accent); }
.who { margin-left: auto; color: var(--muted); font: 12px ui-monospace, monospace; }
.link { background: none; border: 0; color: var(--accent); cursor: pointer; font: inherit; }

main { max-width: 1100px; margin: 0 auto; padding: 24px 16px 64px; }
h1 { font-size: 22px; margin: 8px 0; }
.lead { color: var(--muted); max-width: 70ch; }
.hint { color: var(--muted); font-size: 13px; }
.error { color: var(--danger); min-height: 1.5em; }

.panel { max-width: 460px; }
form { display: grid; gap: 12px; margin: 16px 0; }
label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
input {
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
}
button[type="submit"] {
  justify-self: start;
  font: inherit;
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: 6px;
  padding: 8px 16px;
  cursor: pointer;
}
details { margin: 8px 0; }
summary { cursor: pointer; color: var(--muted); }

#filter { width: 100%; max-width: 360px; margin: 8px 0 16px; }
.cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}
.card:hover { border-color: var(--accent); }
.card h2 { font-size: 16px; margin: 0; }
.card p { margin: 0; color: var(--muted); font-size: 13px; }
.card .meta { margin-top: auto; font-size: 12px; color: var(--accent); }

.back { display: inline-block; margin-bottom: 8px; text-decoration: none; }
/* Swagger UI draws on white; give it its own light surface in either theme. */
#swagger { background: #fff; border-radius: 8px; color: #1d2422; }
#swagger .swagger-ui .info { margin: 24px 0; }