[hidden]{display:none!important}
:root{
  --body-font:"Atkinson Hyperlegible";--head-font:"Bricolage Grotesque";
  --bg:#F3F5F9;--surface:#FFFFFF;--ink:#16213A;--muted:#5B6479;--line:#D9DEE8;--soft:#E9EDF4;
  --mark:#F4D35E;--today:#FFF6CC;--focus:#6A4FE0;--bad:#B4321C;
  /* shift colours: dark enough for white text in light mode */
  --k-D:#17736A;--k-LD:#5A3FCF;--k-E:#B0551A;--k-L:#A02E62;--k-N:#22305E;--k-X:#46658F;--k-ink:#FFFFFF;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#10172A;--surface:#18213A;--ink:#EEF1F8;--muted:#A7B0C4;--line:#2C3754;--soft:#202B48;--today:#3A3720;--bad:#FF8A73;
  --k-D:#5CCFC0;--k-LD:#B3A6FF;--k-E:#F5AE74;--k-L:#F58CBB;--k-N:#9FB2F0;--k-X:#9DBBE6;--k-ink:#0E1426;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.5 var(--body-font),system-ui,-apple-system,"Segoe UI",sans-serif}
h1,h2,h3{font-family:var(--head-font),var(--body-font),system-ui,sans-serif;line-height:1.15;margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.muted{color:var(--muted)}.small{font-size:.875rem}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}

/* top bar */
.top{background:var(--surface);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:16px;min-height:64px;flex-wrap:wrap}
.brand{font-family:var(--head-font),sans-serif;font-weight:800;font-size:1.15rem;display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{width:30px;height:30px}
.brand small{font:400 .8rem var(--body-font),sans-serif;color:var(--muted)}
.top .spacer{flex:1}
.acct{font-size:.875rem;color:var(--muted);overflow-wrap:anywhere}

.btn{font:700 1rem var(--body-font),sans-serif;border:2px solid var(--ink);background:var(--ink);color:var(--bg);border-radius:10px;padding:8px 14px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;text-decoration:none}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.mark{background:var(--mark);color:#16213A;border-color:var(--mark)}
.btn.small{min-height:36px;padding:4px 10px;font-size:.9rem}
.btn.danger{background:transparent;color:var(--bad);border-color:var(--bad)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.link{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}

/* tabs like a roster app: Personal / Team */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:20px 0 0}
.tabs button{font:700 1rem var(--body-font),sans-serif;background:none;border:0;border-bottom:3px solid transparent;padding:12px 16px;color:var(--muted);cursor:pointer;display:flex;align-items:center;gap:8px}
.tabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--ink)}
.tabs svg{width:20px;height:20px}

.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:16px 0}
.toolbar h2{font-size:1.5rem;min-width:9.5em}
.toolbar .spacer{flex:1}
.iconbtn{width:44px;height:44px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);border-radius:8px;cursor:pointer;font-size:1.2rem;display:inline-flex;align-items:center;justify-content:center}

/* month grid */
.cal{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface)}
.cal-row{display:grid;grid-template-columns:44px repeat(7,minmax(0,1fr))}
.cal-row+.cal-row{border-top:1px solid var(--line)}
.cal-head{background:var(--soft);font-weight:700;font-size:.9rem}
.cal-head>div{padding:8px;text-align:center}
.wk{background:var(--soft);font-weight:700;font-size:.85rem;padding:8px 4px;text-align:center;color:var(--muted)}
.day{min-height:118px;padding:6px;border-left:1px solid var(--line);position:relative;display:flex;flex-direction:column;gap:4px}
.day .num{font-weight:700}
.day.out{background:color-mix(in srgb,var(--soft) 55%,var(--surface))}
.day.out .num{color:var(--muted)}
.day.today{background:var(--today)}
.day .add{position:absolute;top:4px;right:4px;width:28px;height:28px;border-radius:6px;border:1px dashed var(--line);background:transparent;color:var(--muted);font-size:1.1rem;cursor:pointer;opacity:0}
.day:hover .add,.day .add:focus-visible{opacity:1}
@media (hover:none){.day .add{opacity:1}}

.shift{display:flex;flex-direction:column;align-items:flex-start;text-align:left;width:100%;border:0;border-radius:6px;padding:6px 8px;color:var(--k-ink);font:400 .86rem/1.3 var(--body-font),sans-serif;background:var(--k-X)}
button.shift{cursor:pointer}
button.shift:hover{filter:brightness(1.08)}
.shift b{font-weight:700;margin-right:4px}
.shift sup{font-size:.7em;margin-left:2px}
.sh-area{overflow-wrap:break-word}
.k-X{background:var(--k-X)}.k-D{background:var(--k-D)}.k-LD{background:var(--k-LD)}.k-E{background:var(--k-E)}.k-L{background:var(--k-L)}.k-N{background:var(--k-N)}

.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:.85rem;color:var(--muted);margin:12px 0}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:14px;height:14px;border-radius:3px;display:inline-block}

/* phones: list by week */
.agenda{display:none}
@media (max-width:760px){
  .cal{display:none}.agenda{display:block}
  .ag-week{background:var(--surface);border:1px solid var(--line);border-radius:10px;margin-bottom:12px;overflow:hidden}
  .ag-week h3{font-size:1rem;padding:10px 12px;background:var(--soft)}
  .ag-day{display:grid;grid-template-columns:64px 1fr;gap:8px;padding:8px 12px;border-top:1px solid var(--line)}
  .ag-day.today{background:var(--today)}
  .ag-shifts{display:flex;flex-direction:column;gap:6px;position:relative;padding-right:40px;min-height:32px;justify-content:center}
  .ag-shifts .add{position:absolute;right:0;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:6px;border:1px dashed var(--line);background:transparent;color:var(--muted);font-size:1.1rem}
  .toolbar h2{min-width:0;font-size:1.25rem;flex-basis:100%;order:-1}
}

.notice{border-radius:10px;padding:10px 14px;background:color-mix(in srgb,var(--mark) 28%,var(--surface));margin:0 0 12px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px}
.stack>*+*{margin-top:12px}
footer{padding:28px 0;color:var(--muted);font-size:.875rem}

/* dialogs and forms */
dialog{border:0;border-radius:14px;padding:0;width:min(520px,calc(100% - 32px));background:var(--surface);color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.35)}
dialog::backdrop{background:rgba(10,15,30,.55)}
dialog form,dialog .body{padding:20px}
dialog h2{font-size:1.3rem;margin-bottom:12px}
label{display:flex;flex-direction:column;gap:4px;font-weight:700;font-size:.92rem}
label .muted{font-weight:400}
input,select{font:400 1rem var(--body-font),sans-serif;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:8px;padding:8px;min-height:44px;width:100%}
.row{display:flex;gap:10px;flex-wrap:wrap}.row>*{flex:1 1 140px}
.codes{display:flex;gap:6px;flex-wrap:wrap}
.codes button{border:2px solid transparent;border-radius:8px;padding:6px 10px;min-height:40px;font:700 .9rem var(--body-font),sans-serif;color:var(--k-ink);cursor:pointer}
.codes button[aria-pressed=true]{border-color:var(--ink);box-shadow:0 0 0 2px var(--surface) inset}
.actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:16px}
.actions .left{margin-right:auto}
.err{color:var(--bad);min-height:1.2em;margin:8px 0 0;font-weight:700}
.links{list-style:none;padding:0;margin:0}
.links li{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:8px}
.links code{display:block;font-size:.8rem;overflow-wrap:anywhere;color:var(--muted);margin:4px 0 8px}

/* landing */
.hero{padding:48px 0 24px;display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center}
.hero h1{font-size:clamp(2rem,5vw,3.1rem);font-weight:800}
.hero p.lead{font-size:1.15rem;color:var(--muted);max-width:34em}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0}
.features h3{font-size:1.1rem;margin-bottom:6px}
.preview .day{min-height:76px}
@media (max-width:860px){.hero{grid-template-columns:1fr}.features{grid-template-columns:1fr}}
.prose{max-width:46em}.prose h2{font-size:1.25rem;margin:24px 0 6px}
hr.sep{border:0;border-top:1px solid var(--line);margin:16px 0}
.preview .shift{font-size:.72rem;padding:4px 5px}.preview .sh-area,.preview .shift sup{display:none}
.preview .sh-top{display:flex;flex-direction:column}
@media (max-width:600px){.acct{display:none}}

/* team roster: other people's shifts are outlined, not filled, with their name on top */
:root{--t0:#B0356B;--t1:#1F6FB2;--t2:#8A5A00;--t3:#2E7D32;--t4:#6A4FE0;--t5:#C2410C}
@media (prefers-color-scheme:dark){:root{--t0:#F07AAE;--t1:#7DB7F0;--t2:#E9B44C;--t3:#7BCB80;--t4:#B3A6FF;--t5:#F59E6B}}
.tshift{display:flex;flex-direction:column;border-radius:6px;padding:4px 8px 6px;font:400 .82rem/1.3 var(--body-font),sans-serif;background:color-mix(in srgb,var(--tc) 10%,var(--surface));border:1.5px solid var(--tc);border-left-width:5px;color:var(--ink)}
.tshift .who{font-weight:700;font-size:.75rem;color:var(--tc);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t0{--tc:var(--t0)}.t1{--tc:var(--t1)}.t2{--tc:var(--t2)}.t3{--tc:var(--t3)}.t4{--tc:var(--t4)}.t5{--tc:var(--t5)}
.tog{display:inline-block;margin-left:6px;font:700 .68rem/1 var(--body-font),sans-serif;background:var(--mark);color:#16213A;border-radius:999px;padding:3px 7px;vertical-align:middle}
.imp-mark{margin-left:4px;opacity:.85}
.people{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 4px}
.person{display:flex;align-items:center;gap:8px;border:1.5px solid var(--tc,var(--line));border-left-width:5px;border-radius:10px;padding:6px 8px 6px 10px;background:var(--surface)}
.person.me{--tc:var(--ink)}
.person input{width:auto;min-height:0}
.person small{display:block;color:var(--muted)}
.person label{flex-direction:row;align-items:center;gap:8px;font-weight:700;cursor:pointer}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0}
@media (max-width:860px){.grid2{grid-template-columns:1fr}}
.card h3{font-size:1.15rem;margin-bottom:6px}
.status{font-size:.9rem;margin:8px 0}
.status.bad{color:var(--bad)}
.steps{margin:6px 0 0;padding-left:20px;color:var(--muted);font-size:.9rem}
.invite-out{background:var(--soft);border-radius:10px;padding:10px 12px;margin-top:10px}
.invite-out code{display:block;overflow-wrap:anywhere;font-size:.85rem;margin:6px 0 8px}
.join{max-width:620px;margin:32px 0 16px}.join h1{font-size:1.8rem}