:root{color-scheme:dark;font-family:system-ui,sans-serif;background:#0c141b;color:#eff6fa;--panel:#14212c;--line:#2a3b48;--muted:#a5bac7;--accent:#88e5c3}
*{box-sizing:border-box}body{margin:0}
header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px max(18px,calc((100vw - 1080px)/2));border-bottom:1px solid var(--line);background:#101b24}
header strong{font-size:1.15rem;white-space:nowrap}header b{color:var(--accent)}
main{max-width:1112px;margin:auto;padding:24px 16px}
h1,h2,h3,p{margin:0}h1{font-size:clamp(1.55rem,3vw,2.2rem);margin-bottom:16px}h2{font-size:1.14rem}p,small{color:var(--muted);line-height:1.45}
form,section{padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--panel);min-width:0}
form{display:grid;gap:12px}form button{justify-self:start}section>h2{margin-bottom:10px}
button,input,textarea,select{font:inherit}button{cursor:pointer;border:1px solid #496171;border-radius:8px;min-height:42px;padding:8px 13px;background:#213443;color:inherit}form>button[type=submit],form>button:not([type]){background:var(--accent);border-color:var(--accent);color:#10241e;font-weight:700}
button:disabled{opacity:.55;cursor:wait}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
label{display:grid;gap:5px;font-size:.9rem;font-weight:600}input,textarea,select{min-width:0;width:100%;min-height:42px;border:1px solid #425868;border-radius:8px;background:#0d1821;padding:8px;color:inherit}input[type=checkbox]{width:18px;min-height:18px}label.inline{display:flex;align-items:center}
#notice:not(:empty){margin-bottom:12px;color:#ffd3a2}.grid{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.grid>*{min-width:0}.grid form+form{margin-top:12px}article{padding:10px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}section form{margin:8px 0}a{color:var(--accent)}[hidden]{display:none!important}#state{overflow-wrap:anywhere}
[data-days]{display:grid;gap:8px}fieldset{min-width:0;border:1px solid var(--line);border-radius:10px;padding:8px 10px 10px}legend{padding:0 4px;color:var(--accent);font-size:.84rem}.shift{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:8px;align-items:end;margin-bottom:8px}
.signed-out main{max-width:480px;padding-top:clamp(28px,10vh,100px)}.signed-out form{padding:22px}
@media(max-width:720px){.grid{grid-template-columns:minmax(0,1fr)}main{padding-top:16px}form,section{padding:13px}}
@media(max-width:350px){.shift{grid-template-columns:repeat(2,minmax(0,1fr))}.shift button{grid-column:1/-1;justify-self:start}}

/* Riders workspace */
body{background:#101720}
header{background:#151f2b;padding-block:16px}
header strong{letter-spacing:-.02em;font-size:1.32rem}
main{max-width:1240px;padding:24px 20px}
.riders-layout{display:grid;grid-template-columns:208px minmax(0,1fr);gap:28px;align-items:start}
.riders-nav{display:grid;gap:6px;padding:10px;background:#141e29;border:1px solid #293849;border-radius:14px}
.riders-nav button{text-align:left;background:transparent;border-color:transparent;color:#b9c9d6}
.riders-nav button:hover{background:#1d2c3a}
.riders-nav button[aria-selected=true]{background:#244037;color:#a9f1d6;border-color:#365c4f;font-weight:700}
.riders-stage{min-width:0}
.riders-stage h1{font-size:clamp(1.55rem,3vw,2.15rem);letter-spacing:-.035em}
.riders-view{display:grid;gap:12px}
.riders-view>form,.riders-view>section{background:#172330;border-color:#2d4051;padding:20px}
.riders-view #availability{margin-top:0}
.riders-view section>div>form{background:#111c27}
.riders-view [data-days]{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.riders-view [data-days] fieldset{margin:0}
.riders-view #state{border-left:2px solid #88e5c3;padding-left:10px}
.riders-view button:hover:not(:disabled){filter:brightness(1.12)}
.signed-out main{max-width:500px}
.signed-out form{background:#172330;box-shadow:0 18px 40px #070b124f}
@media(max-width:760px){
 main{padding:12px}
 header{padding:10px 12px}
 header strong{font-size:1.1rem}
 .riders-layout{grid-template-columns:minmax(0,1fr);gap:12px}
 .riders-nav{display:flex;flex-wrap:wrap;gap:3px;padding:4px}
 .riders-nav button{flex:1 0 auto;text-align:center;font-size:.83rem;padding:5px 8px;min-height:38px}
 .riders-stage h1{font-size:1.3rem;margin-bottom:10px}
 .riders-view{gap:8px}
 .riders-view>form,.riders-view>section{padding:12px;border-radius:10px}
 .riders-view [data-days]{grid-template-columns:minmax(0,1fr)}
}