:root { --bg:#fafaf7; --fg:#1d1d1b; --muted:#6b6b66; --card:#fff; --line:#e3e1d8; --accent:#2f6f4f; --accent-fg:#fff;
  --yes:#2f6f4f; --maybe:#b7791f; --no:#b23b3b; --best:#fff6d6; --danger:#b23b3b; }
@media (prefers-color-scheme: dark) { :root { --bg:#161715; --fg:#ececE6; --muted:#9a9a92; --card:#1f201e; --line:#33342f;
  --accent:#5fb586; --accent-fg:#102017; --yes:#5fb586; --maybe:#e0b04f; --no:#e07a7a; --best:#3a3520; --danger:#e07a7a; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.5 system-ui, sans-serif; }
header, main, footer { max-width: 860px; margin: 0 auto; padding: 12px 16px; }
header { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); }
.brand { font-weight:700; text-decoration:none; color:var(--accent); font-size:1.2rem; }
footer { color:var(--muted); font-size:.9rem; text-align:center; }
a { color: var(--accent); }
h1 { margin: .8rem 0 .4rem; } h2 { margin: 1.6rem 0 .4rem; font-size:1.15rem; }
.muted { color: var(--muted); } .desc { white-space: pre-wrap; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin:14px 0; }
label { display:block; margin:10px 0; font-weight:600; }
input:not([type=radio]), textarea, select { display:block; width:100%; padding:8px 10px; margin-top:4px; font:inherit;
  color:var(--fg); background:var(--bg); border:1px solid var(--line); border-radius:6px; }
button, .button { display:inline-block; padding:9px 16px; font:inherit; font-weight:600; cursor:pointer; text-decoration:none;
  color:var(--accent-fg); background:var(--accent); border:0; border-radius:6px; }
button.secondary { background:transparent; color:var(--accent); border:1px solid var(--accent); }
button.danger { background:var(--danger); color:#fff; } button.link { background:none; color:var(--accent); padding:0 6px; text-decoration:underline; }
button.link.danger { color:var(--danger); }
form.inline { display:inline; }
.banner { padding:10px 14px; border-radius:8px; background:var(--best); border:1px solid var(--line); margin:12px 0; }
.banner.err { border-color:var(--danger); }
.list { list-style:none; padding:0; } .list li { padding:8px 0; border-bottom:1px solid var(--line); }
.optrow { display:flex; gap:8px; margin:6px 0; } .optrow input { margin:0; } .optrow button { white-space:nowrap; }
fieldset { border:1px solid var(--line); border-radius:8px; margin:10px 0; padding:8px 12px; }
legend { font-weight:600; padding:0 6px; }
.choice { display:inline-block; margin:4px 14px 4px 0; font-weight:500; } .choice.yes { color:var(--yes); }
.choice.maybe { color:var(--maybe); } .choice.no { color:var(--no); }
.tablewrap { overflow-x:auto; }
table.results { border-collapse:collapse; width:100%; background:var(--card); }
.results th, .results td { border:1px solid var(--line); padding:6px 10px; text-align:center; white-space:nowrap; }
.results tbody th, .results tfoot th { text-align:left; }
.results th.best, .results th.chosen { background:var(--best); }
.results tr.mine th { text-decoration:underline; }
td.yes { color:var(--yes); font-weight:700; } td.maybe { color:var(--maybe); font-weight:700; } td.no { color:var(--no); } td.none { color:var(--muted); }
code.fulllink { word-break:break-all; }
.optrow { display:grid; grid-template-columns: 1fr 1fr auto; gap:8px; align-items:start; }
.optrow input, .optrow .whatcell { margin:0; min-width:0; }
.whatcell { display:flex; gap:6px; } .whatcell select { width:auto; margin:0; flex:none; }
.whatcell input { flex:1; } [hidden] { display:none !important; }
.calendar { width:100%; margin:12px 0; padding:10px; background:var(--card); border:1px solid var(--line); border-radius:10px; }
.cal-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; text-transform:capitalize; }
.cal-head button { padding:2px 12px; }
.calendar table { width:100%; border-collapse:separate; border-spacing:3px; table-layout:fixed; }
.calendar th { font-size:.8rem; color:var(--muted); font-weight:600; text-transform:capitalize; }
.calendar td { position:relative; height:4.6rem; vertical-align:top; padding:4px 5px; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.calendar td.out { opacity:.45; }
.calendar td.new { border:2px solid var(--accent); }
.calendar td.existing { background:var(--accent); color:var(--accent-fg); border-color:var(--accent); }
.calendar .num { font-weight:700; font-size:.9rem; }
.calendar .count { position:absolute; top:3px; right:4px; min-width:1.3rem; padding:0 5px; border-radius:999px; font-size:.75rem; font-weight:700; text-align:center;
  background:var(--accent); color:var(--accent-fg); }
.calendar td.existing .count { background:var(--accent-fg); color:var(--accent); }
.calendar ul { list-style:none; margin:2px 0 0; padding:0; font-size:.72rem; line-height:1.25; }
.calendar li { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.calendar li.new::before { content:"+ "; }
@media (max-width:520px) { .calendar td { height:3.6rem; padding:2px 3px; } .calendar ul { font-size:.62rem; } .calendar .count { font-size:.65rem; min-width:1.1rem; } }
.calendar td[data-date] { cursor:pointer; }
.calendar td.selected { background:color-mix(in srgb, var(--accent) 22%, var(--card)); box-shadow: inset 0 0 0 2px var(--accent); }
.calendar td.existing.selected { background:var(--accent); }
.multi { margin:10px 0; padding:12px 14px; border:1px dashed var(--line); border-radius:10px; }
.multi h3 { margin:.2rem 0; font-size:1.05rem; } .multi h4 { margin:.9rem 0 .3rem; font-size:.95rem; }
.picks { display:flex; flex-wrap:wrap; gap:6px; } .picks button { padding:6px 12px; }
.slot { display:flex; gap:6px; align-items:center; margin:6px 0; }
.slot select { width:auto; margin:0; } .slot input { margin:0; flex:1; min-width:0; }
.slot[hidden], .slot input[hidden] { display:none; }
#limit-info.over { color:var(--danger); font-weight:700; }
.row-remove { font-size:1.4rem; line-height:1; padding:4px 8px; }

/* public poll page */
.banner.ok { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 14%, var(--card)); }
.final { text-align:center; padding:18px; margin:14px 0; border:2px solid var(--accent); border-radius:12px; background:color-mix(in srgb, var(--accent) 10%, var(--card)); }
.final-date { display:block; font-size:1.6rem; margin:4px 0 10px; }
label.name { margin-top:0; }
label.check { font-weight:500; display:flex; gap:8px; align-items:center; } label.check input { width:auto; margin:0; }
.quick { display:flex; gap:8px; margin:6px 0 12px; } .quick button { padding:6px 14px; }
.daycard { display:flex; gap:14px; align-items:flex-start; margin:10px 0; padding:12px; background:var(--card); border:1px solid var(--line); border-radius:12px; }
.badge { flex:none; width:64px; text-align:center; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--bg); }
.badge .wd, .badge .mo { display:block; font-size:.72rem; text-transform:uppercase; color:var(--muted); padding:2px 0; }
.badge .wd { background:var(--accent); color:var(--accent-fg); }
.badge .dn { display:block; font-size:1.6rem; font-weight:800; line-height:1.15; }
.daybody { flex:1; min-width:0; } .daybody h3 { margin:0 0 6px; font-size:1rem; }
.slotrow { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 12px; padding:6px 0; border-top:1px solid var(--line); }
.slotrow:first-of-type { border-top:0; } .slotlabel { font-weight:600; }
.answer { display:flex; gap:6px; }
.answer input { position:absolute; opacity:0; pointer-events:none; }
.answer label { margin:0; padding:9px 14px; min-width:64px; text-align:center; font-weight:600; cursor:pointer; border:2px solid var(--line); border-radius:8px; background:var(--bg); user-select:none; }
.answer input:focus-visible + label { outline:3px solid var(--accent); outline-offset:2px; }
.answer input:checked + label.yes { background:var(--yes); border-color:var(--yes); color:var(--accent-fg); }
.answer input:checked + label.maybe { background:var(--maybe); border-color:var(--maybe); color:#1d1d1b; }
.answer input:checked + label.no { background:var(--no); border-color:var(--no); color:#fff; }
.stickybar { position:sticky; bottom:0; display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 12px; margin-top:12px;
  background:var(--card); border:1px solid var(--line); border-radius:10px; box-shadow:0 -4px 12px rgba(0,0,0,.08); }
details.personal, details.fulltable { margin:14px 0; padding:10px 14px; background:var(--card); border:1px solid var(--line); border-radius:10px; }
details summary { cursor:pointer; font-weight:600; }
.bestnow { padding:10px 14px; margin:8px 0; border-radius:10px; background:var(--best); border:1px solid var(--line); }
.hidden-note { padding:12px; border:1px dashed var(--line); border-radius:10px; color:var(--muted); }
ul.bars { list-style:none; margin:8px 0; padding:0; } ul.bars li { margin:10px 0; padding:10px 12px; background:var(--card); border:1px solid var(--line); border-radius:10px; }
ul.bars li.best { border-color:var(--maybe); background:var(--best); }
.bar-label { font-weight:700; margin-bottom:6px; }
.bar { display:flex; height:14px; border-radius:7px; overflow:hidden; background:var(--line); }
.bar .y { background:var(--yes); } .bar .m { background:var(--maybe); } .bar .n { background:var(--no); }
ul.bars details { margin-top:6px; } ul.bars summary { font-weight:500; color:var(--muted); font-size:.9rem; }
.who { margin:4px 0; font-size:.92rem; }
@media (max-width:520px) { .daycard { flex-direction:column; gap:4px; } .badge { display:none; }
  .daybody { width:100%; } .answer { display:flex; width:100%; } .answer label { flex:1 1 0; min-width:0; padding:12px 6px; white-space:nowrap; }
  .slotrow { flex-direction:column; align-items:stretch; } }

/* public (read-only) calendar */
details.pubcal { margin:14px 0; padding:10px 14px; background:var(--card); border:1px solid var(--line); border-radius:10px; }
details.pubcal .calendar { border:0; padding:8px 0 0; margin:0; }
.calendar.public td { cursor:default; }
.calendar.public td.has { border:2px solid var(--accent); cursor:pointer; }
.calendar.public td.best { background:var(--best); }
.calendar.public td.chosen { background:var(--accent); color:var(--accent-fg); }
.calendar.public li .y, .calendar.public li .m, .calendar.public li .n { font-weight:700; } .calendar.public li .y { color:var(--yes); } .calendar.public li .m { color:var(--maybe); } .calendar.public li .n { color:var(--no); }
.calendar.public td.chosen li .y, .calendar.public td.chosen li .m, .calendar.public td.chosen li .n { color:var(--accent-fg); }
.daycard.flash { animation:flash 1.6s ease; }
@keyframes flash { 0%,60% { box-shadow:0 0 0 4px var(--accent); } 100% { box-shadow:0 0 0 0 transparent; } }

.whoami { margin:10px 0 0; } .whoami h2 { margin-top:0; }
.savestate { font-weight:600; } .savestate.ok { color:var(--yes); } .savestate.err { color:var(--danger); } .savestate.busy { color:var(--muted); }

.bar-label { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.chips { display:flex; gap:10px; font-size:.95rem; white-space:nowrap; }
.chips b.y { color:var(--yes); } .chips b.m { color:var(--maybe); } .chips b.n { color:var(--no); }

/* tabs */
.tabbar { display:flex; gap:4px; margin:14px 0 0; border-bottom:2px solid var(--line); overflow-x:auto; }
.tabbar[hidden] { display:none; }
.tab { background:none; color:var(--muted); border:0; border-bottom:3px solid transparent; border-radius:0; margin-bottom:-2px; padding:10px 16px; font-weight:600; white-space:nowrap; }
.tab:hover { color:var(--fg); }
.tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.tab:focus-visible { outline:3px solid var(--accent); outline-offset:-3px; }
.tabpanel { margin-top:12px; } .tabpanel[hidden] { display:none; }