:root { color-scheme: light dark; --bg:#fff; --fg:#1a1a1a; --mute:#6b6b6b; --line:#e3e3e3; --accent:#2b5bd7; --yes:#cdeccb; --maybe:#ffe9a8; --no:#f8cfcf; --yes-ink:#17632a; --maybe-ink:#7a5600; --no-ink:#a32020; --best:#eef3ff; }
@media (prefers-color-scheme: dark) { :root { --bg:#141414; --fg:#eee; --mute:#9a9a9a; --line:#333; --accent:#7ea2ff; --yes:#1f5a2d; --maybe:#5e4c10; --no:#6a2626; --yes-ink:#8fe0a0; --maybe-ink:#f2d06b; --no-ink:#ff9c9c; --best:#1c2740; } }
* { box-sizing: border-box; } body { margin:0; font: 16px/1.45 system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--fg); }
header.top { display:flex; gap:1rem; align-items:baseline; padding: .8rem 1rem; border-bottom:1px solid var(--line); } header.top nav { margin-left:auto; display:flex; gap:1rem; }
.brand { font-weight:700; text-decoration:none; color:inherit; font-size:1.2rem; } .top .sub { color: var(--mute); }
main { max-width: 720px; margin: 0 auto; padding: 1rem; } footer { color: var(--mute); text-align:center; padding: 2rem 1rem; font-size:.9rem; }
a { color: var(--accent); } h1 { margin:.2rem 0 .6rem; } .hint, .meta, .when { color: var(--mute); font-size:.92rem; }
label { display:block; margin:.6rem 0; } input, select, textarea, button { font: inherit; } input:not([type=checkbox]):not([type=radio]), select, textarea { padding:.4rem .5rem; border:1px solid var(--line); border-radius:6px; background: var(--bg); color: var(--fg); max-width:100%; }
label > input:not([type=checkbox]):not([type=radio]), label > select, label > textarea { display:block; width:100%; margin-top:.2rem; } textarea { min-height: 4rem; }
button { padding:.45rem .9rem; border:1px solid var(--line); border-radius:6px; background: var(--bg); color: var(--fg); cursor:pointer; } button.primary { background: var(--accent); color:#fff; border-color: var(--accent); } button.small { padding:.1rem .45rem; font-size:.85rem; }
fieldset { border:1px solid var(--line); border-radius:8px; margin: 1rem 0; padding:.6rem 1rem; }
.opt { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; padding:.5rem; border:1px solid var(--line); border-radius:8px; margin:.4rem 0; } .opt .num { width:5rem; } .opt .range { color: var(--mute); } .opt .exc input { min-width: 16rem; } .opt .remove { margin-left:auto; }
.tag { font-size:.75rem; background: var(--best); padding:.1rem .4rem; border-radius:4px; }
.errors { color:#b00020; }
.final { background: var(--best); padding:.5rem .8rem; border-radius:8px; } .dates { color: var(--mute); font-size:.9rem; }
.comments { margin-top: 2rem; } .comment { border-top:1px solid var(--line); padding:.5rem 0; } .comment p { margin:.2rem 0 0; white-space: pre-wrap; } .comments form textarea { width:100%; margin:.4rem 0; }
code.link { display:block; padding:.6rem; background: var(--best); border-radius:6px; word-break: break-all; }
a.button { display:inline-block; padding:.5rem 1rem; background: var(--accent); color:#fff; border-radius:6px; text-decoration:none; }
details.recur { margin:1rem 0; } .ent { text-decoration:none; }
.nudge { background: var(--best); border:1px solid var(--line); border-radius:8px; padding:.6rem .9rem; margin:0 0 1rem; }
.timectl { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin:.4rem 0 .6rem; }
.deadline { margin:.6rem 0; } .opt .exc input { min-width: 12rem; } .opt .exc-add { color: var(--mute); margin:0; }
input[type=date] { cursor: pointer; }
fieldset.kind { border:0; padding:0; margin:.4rem 0 1.2rem; display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .7rem; }
fieldset.kind legend { font-size:1.15rem; font-weight:600; padding:0; margin-bottom:.5rem; }
.kind-choice { margin:0; padding:.6rem 1rem; border:1px solid var(--line); border-radius:8px; cursor:pointer; display:flex; align-items:center; gap:.5rem; }
.kind-choice:has(input:checked) { border-color: var(--accent); background: var(--best); font-weight:600; }
.kind-choice:has(input:disabled) { cursor:default; opacity:.75; } .kind-or { color: var(--mute); }
form.create .after-kind { display:none; } form.create.kind-chosen .after-kind { display:block; }
.opt[hidden], [data-for][hidden] { display:none; }
.finalize { margin-top:1.5rem; padding:.8rem 1rem; border:1px solid var(--line); border-radius:8px; } .finalize h2 { margin:0 0 .2rem; font-size:1.1rem; }
.final-choice { display:block; margin:.45rem 0; cursor:pointer; } .final-item { margin-top:.3rem; }
.opt-date { display:block; border:0; border-top:2px solid var(--mute); border-radius:0; margin:0; padding:.8rem 0; }
#options .opt-date:first-child { border-top:0; padding-top:.2rem; }
.day-head { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin-bottom:.5rem; } .day-name { font-weight:600; }
.slot { display:flex; align-items:center; gap:.5rem; margin:.3rem 0; } .slot .remove { padding:.1rem .5rem; }
.add-time { margin-top:.3rem; }
.slot .remove { margin-left:0; }
.exceptions { flex-basis:100%; margin-top:.3rem; } .exc-title { color: var(--mute); }
.exc-line { display:flex; align-items:center; gap:.5rem; margin:.3rem 0; } .exc-remove { padding:.1rem .5rem; }
.opt-recurring { display:block; border:0; border-top:2px solid var(--mute); border-radius:0; margin:0; padding:.8rem 0; }
#options .opt-recurring:first-child { border-top:0; padding-top:.2rem; }
.opt-recurring .exceptions { margin-top:.6rem; }
.exc-error { color:#d0342c; font-weight:600; } .exc-bad .exc-date { border-color:#d0342c; } .exc-bad .day-name { color:#d0342c; }

/* Vertical poll */
.vote-form { margin-top:1rem; }
.voter { margin-bottom:1rem; } .voter label { margin:.5rem 0; }
.vday { border-top:2px solid var(--mute); padding:.9rem 0 .4rem; } .vday:first-of-type { border-top:0; padding-top:0; }
.vday-title { font-size:1.15rem; margin:0 0 .2rem; } .vday .sub { color: var(--mute); font-size:.88rem; } .vday .exc-list { margin:.2rem 0 0; }
.vopt { border:1px solid var(--line); border-radius:10px; padding:.7rem; margin:.6rem 0; }
.vopt.best { background: var(--best); } .vopt.finalized { border:2px solid var(--accent); }
.vopt-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem .6rem; }
.lbl { font-weight:700; font-size:1.1rem; } .score { margin-left:auto; display:inline-flex; gap:.25rem; font-size:.88rem; }
.tally { padding:0 .45rem; border-radius:999px; font-weight:600; white-space:nowrap; }
.a-yes { color: var(--yes-ink); } .a-ifneedbe { color: var(--maybe-ink); } .a-no { color: var(--no-ink); }
.tally.a-yes, .voters .a-yes { background: var(--yes); } .tally.a-ifneedbe, .voters .a-ifneedbe { background: var(--maybe); } .tally.a-no, .voters .a-no { background: var(--no); }
.badge { background: var(--accent); color:#fff; border-radius:4px; padding:0 .4rem; font-size:.78rem; font-weight:600; }
.choices { display:grid; grid-template-columns:repeat(3, 1fr); gap:.4rem; margin-top:.55rem; }
.choice { margin:0; cursor:pointer; position:relative; }
.choice input { position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer; }
.choice span { display:flex; align-items:center; justify-content:center; text-align:center; min-height:46px; padding:.2rem .3rem; border:1px solid var(--line); border-radius:8px; background: var(--bg); font-size:.95rem; line-height:1.15; }
.choice input:focus-visible + span { outline:2px solid var(--accent); outline-offset:1px; }
.c-yes span { color: var(--yes-ink); border-color: var(--yes-ink); } .c-ifneedbe span { color: var(--maybe-ink); border-color: var(--maybe-ink); } .c-no span { color: var(--no-ink); border-color: var(--no-ink); }
.c-yes input:checked + span { background: var(--yes); border-width:2px; font-weight:700; }
.c-ifneedbe input:checked + span { background: var(--maybe); border-width:2px; font-weight:700; }
.c-no input:checked + span { background: var(--no); border-width:2px; font-weight:700; }
.voters { list-style:none; display:flex; flex-wrap:wrap; gap:.3rem; margin:.55rem 0 0; padding:0; } .voters:empty { display:none; }
.voters li { padding:.1rem .5rem; border-radius:999px; font-size:.88rem; }
.vote-save { position:sticky; bottom:0; background: var(--bg); padding:.7rem 0; border-top:1px solid var(--line); z-index:1; }
.vote-save { display:flex; align-items:center; gap:.7rem; }
.vote-save button { flex:1; min-height:48px; }
.vote-status { flex:1; font-weight:600; font-size:.95rem; line-height:1.2; } .vote-status[hidden] { display:none; }
button.primary:disabled { background: var(--line); border-color: var(--line); color: var(--mute); cursor:default; }
.people { margin:1rem 0; } .people summary { cursor:pointer; padding:.4rem 0; } .people ul { list-style:none; padding:0; margin:.3rem 0; } .people li { display:flex; align-items:center; gap:.5rem; padding:.25rem 0; }
.adminbar { display:flex; flex-wrap:wrap; gap:.4rem; align-items:stretch; margin:.5rem 0; } .adminbar form { margin:0; }
.button-link { display:inline-flex; align-items:center; padding:.45rem .9rem; border:1px solid var(--line); border-radius:6px; text-decoration:none; }
.final-choice { padding:.45rem 0; border-top:1px solid var(--line); margin:0; } .final-choice input { width:1.2rem; height:1.2rem; vertical-align:-.2rem; margin-right:.3rem; }

/* Phones: comfortable targets, nothing wider than the screen */
input[type=date], select { max-width:100%; min-width:0; }
input:not([type=checkbox]):not([type=radio]), select, button, .button-link { min-height:44px; }
.people button, .slot .remove, .exc-remove { min-width:44px; }
@media (max-width: 560px) {
  header.top { flex-wrap:wrap; gap:.2rem .7rem; } header.top nav { margin-left:0; width:100%; } header.top .sub { display:none; }
  h1 { font-size:1.6rem; }
  .kind-choice { width:100%; min-height:48px; } .kind-or { width:100%; text-align:center; }
  .timectl select { flex:1 1 100%; } fieldset { padding:.5rem .7rem; }
  .day-head .range { display:grid; grid-template-columns:auto 1fr; gap:.3rem .5rem; align-items:center; width:100%; } .day-head .week-day { width:100%; }
  .slot select { flex:1; } .add-time, .add-exc, .create button[data-add], .create button[type=submit], .finalize button { width:100%; min-height:44px; }
  .exc-line { flex-wrap:wrap; } .exc-error { flex-basis:100%; }
  .comments form button { width:100%; }
}
.voter-exc { margin-top:.55rem; } .voter-exc[hidden] { display:none; } .voter-exc .add-vexc { min-height:44px; }
.slot-dates { margin:.7rem 0; } .slot-dates ul { list-style:none; margin:.2rem 0 0; padding:0; }
.slot-dates li { padding:.25rem 0; border-top:1px solid var(--line); } .slot-except { font-weight:600; } .slot-skip { color: var(--mute); }
@media (max-width: 560px) { .add-vexc { width:100%; } }