:root {
  --bg: #f7f7f5; --fg: #1b1b1b; --muted: #666; --line: #d8d8d2;
  --card: #fff; --accent: #2f6f4f; --accent-fg: #fff; --warn: #8a3a12; --err: #a11;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#16181a; --fg:#e8e8e6; --muted:#9aa0a6; --line:#33383d;
          --card:#1e2124; --accent:#4f9d75; --accent-fg:#0b1410; --warn:#d08a55; --err:#e88; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width: 46rem; margin: 0 auto; padding: 1.25rem 1rem 4rem; }
a { color: var(--accent); }
h1 { font-size:1.5rem; margin:.2rem 0 .6rem; }
h2 { font-size:1.15rem; margin:1.6rem 0 .5rem; }
h3 { font-size:1rem; margin:1rem 0 .35rem; }
p.hint, .muted { color: var(--muted); font-size:.9rem; }

.topbar { display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; justify-content:space-between;
          padding:.6rem 1rem; background:var(--card); border-bottom:1px solid var(--line); }
.brand { font-weight:600; text-decoration:none; }
.topbar nav { display:flex; gap:.9rem; align-items:center; flex-wrap:wrap; font-size:.92rem; }
.who em { color:var(--muted); font-style:normal; }
form.inline { display:inline; }
button.link { background:none; border:none; color:var(--accent); cursor:pointer; padding:0; font:inherit; text-decoration:underline; }

footer { max-width:46rem; margin:0 auto; padding:0 1rem 2rem; color:var(--muted); font-size:.85rem; }

.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:1rem; margin:1rem 0; }
.flash { padding:.7rem .9rem; border-radius:8px; border:1px solid var(--line); background:var(--card); }
.flash-error { border-color:var(--err); color:var(--err); }
.flash-ok { border-color:var(--accent); }

label { display:block; margin:.7rem 0 .2rem; font-weight:500; }
input[type=text], input[type=password], input[type=datetime-local], textarea, select {
  width:100%; padding:.5rem .6rem; font:inherit; color:var(--fg); background:var(--bg);
  border:1px solid var(--line); border-radius:6px; }
textarea { min-height:5rem; }
button, .btn { font:inherit; padding:.5rem .9rem; border-radius:6px; border:1px solid var(--line);
  background:var(--card); color:var(--fg); cursor:pointer; text-decoration:none; display:inline-block; }
button.primary { background:var(--accent); color:var(--accent-fg); border-color:var(--accent); font-weight:600; }
button.danger { border-color:var(--err); color:var(--err); }
.row { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.spread { justify-content:space-between; }

/* Thumbs-up ballot: a checkbox styled as a toggle button. Works without JS. */
ul.ballot { list-style:none; padding:0; margin:1rem 0; display:flex; flex-direction:column; gap:.5rem; }
ul.ballot li { margin:0; }
ul.ballot input[type=checkbox] { position:absolute; opacity:0; width:0; height:0; }
ul.ballot label { display:flex; align-items:center; gap:.7rem; margin:0; cursor:pointer; font-weight:400;
  border:1px solid var(--line); border-radius:8px; padding:.7rem .85rem; background:var(--card); }
ul.ballot label::before { content:"\1F44D"; filter:grayscale(1) opacity(.45); font-size:1.2rem; line-height:1; }
ul.ballot input:checked + label { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
ul.ballot input:checked + label::before { filter:none; }
ul.ballot input:focus-visible + label { outline:2px solid var(--accent); outline-offset:2px; }
.pendingtag { margin-left:auto; font-size:.75rem; color:var(--warn); border:1px solid var(--warn);
  border-radius:99px; padding:.05rem .5rem; }

table { border-collapse:collapse; width:100%; font-size:.94rem; }
th, td { text-align:left; padding:.45rem .5rem; border-bottom:1px solid var(--line); vertical-align:top; }
th { font-weight:600; color:var(--muted); font-size:.82rem; text-transform:uppercase; letter-spacing:.03em; }
td.num, th.num { text-align:right; white-space:nowrap; }
progress.bar { width:100%; height:.5rem; }
.state { font-size:.75rem; border:1px solid var(--line); border-radius:99px; padding:.05rem .5rem; color:var(--muted); }
.state-open { color:var(--accent); border-color:var(--accent); }
.state-closed { color:var(--warn); border-color:var(--warn); }
code.url { display:block; overflow-wrap:anywhere; background:var(--bg); border:1px solid var(--line);
  border-radius:6px; padding:.4rem .5rem; font-size:.85rem; }

/* Utility classes exist because the Content-Security-Policy forbids inline
   style attributes: style-src is 'self' and nothing else. */
.grow { flex: 1; min-width: 12rem; }
.inline-check { margin: 0; font-weight: 400; color: var(--muted); display: flex; gap: .35rem; align-items: center; }
details.card > summary { cursor: pointer; }

/* Front page. The sign-in link stays in the header, deliberately quiet: almost
   nobody arriving here has an account. */
a.quiet { color: var(--muted); text-decoration: none; font-size: .9rem; }
a.quiet:hover { color: var(--accent); text-decoration: underline; }

.hero { padding: 2.5rem 0 1rem; border-bottom: 1px solid var(--line); }
.hero h1 { font-size: clamp(1.7rem, 4.5vw, 2.6rem); line-height: 1.15; margin: 0 0 .75rem; letter-spacing: -.02em; }
.hero .lede { font-size: 1.1rem; max-width: 34rem; margin: 0 0 1rem; }
.hero .lede em { color: var(--accent); font-style: normal; font-weight: 600; }

.points { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin: 1.5rem 0; }
.point { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 1rem; }
.point h2 { margin: 0 0 .4rem; font-size: 1rem; }
.point p { margin: 0; color: var(--muted); font-size: .93rem; }