:root{--ink:#12355b;--ink-soft:#2a4d78;--text:#1c2a39;--muted:#5a6a7c;--paper:#eef1f5;--surface:#fff;--line:#d8dfe8;--tint:#e6edf6;--gold:#e2a31b;--ok:#1b7a52;--ok-tint:#e1f2ea;--alert:#b4392d;--alert-tint:#fbe9e6;--radius:8px;--font:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;color-scheme:light}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--text);font-family:var(--font);margin:0;font-size:16px;line-height:1.45}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
a{color:var(--ink)}
.sr{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}
.top{background:var(--ink);color:#fff}
.top-inner{max-width:760px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;gap:12px}
.brand-logo{background:#fff;border-radius:6px;flex:none;padding:5px 8px;line-height:0}
.brand-logo img{width:auto;height:28px}
.brand-title{font-weight:600;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.embedded .top{display:none}
.page{max-width:760px;margin:0 auto;padding:18px 14px 56px}
.embedded .page{padding:10px 8px 16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.card+.card,.stack>*+*{margin-top:14px}
.empty{color:var(--muted);text-align:center;padding:28px 16px}
h1,h2,h3{margin:0 0 6px;line-height:1.2;color:var(--ink)}
h1{font-size:24px}
h2{font-size:17px}
.muted{color:var(--muted)}
.intro p{margin:6px 0 0}
.meta{color:var(--muted);font-size:15px;display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:8px}
.desc{white-space:pre-line;margin-top:10px}
.day-head{font-size:14px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin:22px 2px 8px}
.shift{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:10px}
.shift.mine{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.shift-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.shift-name{font-weight:600;font-size:17px}
.shift-time{color:var(--muted);font-size:15px}
.shift-desc{font-size:15px;margin-top:6px;white-space:pre-line}
.spots{margin-top:10px;font-size:14px;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.spots b{font-weight:600}
.spots .full{color:var(--alert);font-weight:600}
.bar{background:var(--tint);border-radius:5px;height:8px;margin-top:6px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--ink);border-radius:5px;transition:width .4s}
.bar.done i{background:var(--gold)}
.btn{border:1px solid var(--ink);background:var(--ink);color:#fff;border-radius:var(--radius);padding:11px 16px;font-weight:500;min-height:44px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn:hover{background:var(--ink-soft)}
.btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:var(--tint)}
.btn.danger{background:var(--surface);color:var(--alert);border-color:#e3b9b3}
.btn.wait{background:var(--surface);color:var(--ink);border-color:var(--ink)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn.block{width:100%}
.shift .btn{flex:none}
.signup-form{border-top:1px solid var(--line);margin-top:14px;padding-top:14px}
label{display:block;font-size:14px;font-weight:500;margin-bottom:4px}
label .opt{color:var(--muted);font-weight:400}
input,select{border-radius:var(--radius);background:#fff;border:1px solid #b9c4d1;width:100%;padding:11px 12px;font-size:16px}
.field{margin-bottom:12px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.row{display:flex;gap:8px;flex-wrap:wrap}
.row>.btn{flex:1 1 auto}
.err{background:var(--alert-tint);color:var(--alert);border-radius:var(--radius);padding:9px 11px;font-size:15px;margin-bottom:12px}
.note{background:var(--tint);border-radius:var(--radius);padding:9px 11px;font-size:15px;margin-bottom:12px}
.success{border-top:4px solid var(--ok)}
.success h1{color:var(--ok)}
.status{display:inline-block;border-radius:999px;padding:2px 10px;font-size:13px;font-weight:600;background:var(--tint);color:var(--ink)}
.status.confirmed{background:var(--ok-tint);color:var(--ok)}
.status.waitlist{background:#fbefd0;color:#6b4a00}
.status.gone{background:#eceff3;color:var(--muted)}
.details{border-collapse:collapse;margin:10px 0 4px;font-size:15px}
.details td{padding:3px 14px 3px 0;vertical-align:top}
.details td:first-child{color:var(--muted)}
.actions{display:grid;gap:8px;margin-top:14px}
.pick{display:block;border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;margin-bottom:8px;cursor:pointer;font-weight:400}
.pick:has(input:checked){border-color:var(--ink);background:var(--tint)}
.pick input{width:auto;margin-right:8px}
.event-link{display:block;text-decoration:none;color:inherit}
.event-link:hover .card{border-color:var(--ink)}
.foot{color:var(--muted);font-size:13px;text-align:center;margin-top:22px}
.live{font-size:13px;color:var(--muted);text-align:right;margin:6px 2px 0}
@media (min-width:560px){.actions{grid-template-columns:1fr 1fr 1fr}.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}}