/* One file, no framework. Light and dark both defined explicitly, because the
   page is opened on laptops set either way. */
:root {
  --bg: #ffffff;
  --fg: #16181d;
  --muted: #5c626e;
  --line: #e3e6ec;
  --accent: #256abf;
  --field: #f6f7f9;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161a;
    --fg: #e8eaee;
    --muted: #9aa1ad;
    --line: #2a2e36;
    --accent: #6ea8f0;
    --field: #1c1f25;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
main { max-width: 46rem; margin: 0 auto; padding: 3rem 1.25rem 5rem; }

h1 { margin: 0 0 .35rem; font-size: 1.6rem; letter-spacing: -.01em; }
.sub { margin: 0 0 2.25rem; color: var(--muted); }

.filter { display: block; margin-bottom: .75rem; font-size: .85rem; color: var(--muted); }
#q {
  display: block; width: 100%; margin-top: .35rem; padding: .55rem .7rem;
  font: inherit; color: inherit;
  background: var(--field); border: 1px solid var(--line); border-radius: 7px;
}
#q:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }

.count { margin: 0 0 .75rem; font-size: .8rem; color: var(--muted); }

.list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.list li {
  display: flex; gap: 1rem; align-items: baseline;
  padding: .7rem .1rem; border-bottom: 1px solid var(--line);
}
.title { flex: 1 1 auto; }
.note { flex: 0 0 auto; font-size: .82rem; color: var(--muted); }
.empty { color: var(--muted); }