:root{--foreground:#1d1d1f;--muted-foreground:#6e6e73;--border:#d2d2d7;--primary:#3b6fd8;--card:#fff;--bad:#c0392b;--bg:#fff;color-scheme:light}
/* dark: the person's choice (data-theme on the page), or their device's setting when they haven't chosen */
:root[data-theme=dark]{--foreground:#f2f2f4;--muted-foreground:#a1a1aa;--border:#3a3a40;--primary:#6b95ec;--card:#1c1c20;--bad:#ff6b5e;--bg:#121214;color-scheme:dark}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--foreground:#f2f2f4;--muted-foreground:#a1a1aa;--border:#3a3a40;--primary:#6b95ec;--card:#1c1c20;--bad:#ff6b5e;--bg:#121214;color-scheme:dark}}
*{box-sizing:border-box}
html{background:var(--bg)}body{background:var(--bg);font-family:-apple-system,system-ui,sans-serif;color:var(--foreground);margin:0;padding:16px;font-size:15px;max-width:860px;margin-inline:auto}
header{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
header h1{font-size:17px;margin:0;flex:1}
.sec{border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:12px;background:var(--card)}
.sec h3{margin:0 0 8px;font-size:15px}
.muted{color:var(--muted-foreground);font-size:13px}
.row{display:flex;align-items:center;gap:8px;margin:8px 0;flex-wrap:wrap}
button,.button{font:inherit;font-size:14px;padding:6px 12px;border:1px solid var(--border);border-radius:8px;background:none;color:var(--foreground);cursor:pointer;text-decoration:none;display:inline-block}
.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.signin{min-height:80vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.signin .button{font-size:17px;padding:12px 28px}
.problem{color:var(--bad);text-align:center;max-width:420px}
input,select{font:inherit;font-size:14px;padding:6px 8px;border:1px solid var(--border);border-radius:6px}
input{flex:1;min-width:160px}
table{width:100%;border-collapse:collapse}td,th{text-align:left;padding:6px 4px;border-bottom:1px solid var(--border);font-size:14px}
.hidden{display:none}
@media (max-width:600px){header h1{flex-basis:100%}td,th{font-size:13px;padding:6px 2px}td:nth-child(2){word-break:break-all}form.row input,form.row select{flex-basis:100%}}
.weeks{justify-content:space-between}.weeks b{flex:1;text-align:center}
.problem.left{text-align:left;max-width:none}
.item{margin:2px 0}.itemrow{width:100%;border:none;padding:4px 0;text-align:left;background:none}
.itemrow .name{width:170px;flex:none}.bar{flex:1;height:8px;border-radius:4px;background:var(--border);overflow:hidden;min-width:60px}.bar>div{height:100%;background:var(--primary)}
.count{width:90px;text-align:right}.tk{font-size:13px;color:var(--muted-foreground);margin:2px 0 10px 14px}.gname{font-weight:600;color:var(--foreground);margin-top:6px}
.ticket{margin:2px 0}.ticket a{color:var(--primary)}
.pill{font-size:11px;padding:2px 7px;border-radius:10px;border:1px solid var(--border);white-space:nowrap}
.pill.stuck,.s.on.missed{color:var(--bad);border-color:var(--bad)}.pill.moving{color:#2e86c1;border-color:#2e86c1}.pill.done,.s.on.hit{color:#27ae60;border-color:#27ae60}.pill.waiting,.pill.no-tickets{color:var(--muted-foreground)}
button.s{font-size:13px;padding:4px 10px}.line{margin:4px 0}.grow{flex:1}
input.short{flex:0 1 160px;min-width:110px}input.date{flex:0 0 auto;min-width:0}
@media (max-width:600px){.itemrow .name{width:110px}form.add input,form.add select{flex-basis:100%}.weeks .button{font-size:13px;padding:5px 8px}}
.pill{min-width:64px;text-align:center;display:inline-block}.pill.waiting{color:#2e86c1;border-color:#2e86c1}
label.due{display:flex;align-items:center;gap:6px;white-space:nowrap}
@media (max-width:600px){.weeks b{flex-basis:100%;order:-1;text-align:left}.weeks .button{flex:1;text-align:center}label.due{flex-basis:100%}label.due input{flex:1}}
.theme{display:inline-flex}.theme button{border-radius:0;font-size:13px;padding:5px 10px}.theme button:first-child{border-radius:8px 0 0 8px}.theme button:last-child{border-radius:0 8px 8px 0;border-left:none}
.theme button[aria-pressed=true]{background:var(--primary);border-color:var(--primary);color:#fff}
input,select{background:var(--card);color:var(--foreground)}
.arrow{width:14px;flex:none;color:var(--muted-foreground)}.itemrow:hover{background:color-mix(in srgb,var(--primary) 8%,transparent);border-radius:6px}
.namebox{width:200px;flex:none;display:flex;flex-direction:column}.namebox .count{width:auto;text-align:left;font-size:12px}
.pill.review{color:#2e86c1;border-color:#2e86c1}.empty{margin:6px 0 2px 14px}
.notice{border:1px solid var(--border);border-radius:8px;padding:8px 10px;color:var(--foreground);background:color-mix(in srgb,var(--muted-foreground) 10%,transparent)}
.s.quiet{border-color:transparent;color:var(--muted-foreground);padding:4px 6px}.s.quiet:hover{border-color:var(--border)}
.s.mark.chosen.hit{background:#27ae60;border-color:#27ae60;color:#fff}.s.mark.chosen.missed{background:var(--bad);border-color:var(--bad);color:#fff}.s.mark.dim{opacity:.45}
form.edit input{flex:1;min-width:140px}
@media (max-width:600px){
  header{flex-wrap:nowrap;gap:6px}header h1{flex:1 1 auto;flex-basis:auto;font-size:15px;white-space:nowrap}#who{display:none}
  header .button,header button{font-size:12px;padding:4px 7px}.theme button{font-size:12px;padding:4px 6px}
  .namebox{width:120px}.count{display:block}
}