/* Cana Crew — one stylesheet. Palette: Lake Michigan navy, limestone fog, lantern red, volunteer amber. */
:root{
  --ink:#14202B; --navy:#163A57; --navy-2:#214D70; --teal:#2A7F8E; --amber:#E4A32B; --amber-2:#B57F17;
  --lantern:#C63B2C; --moss:#2E7A4C; --fog:#EDF2F4; --card:#FFFFFF; --mist:#D6DEE3; --slate:#5E6E7A; --pale:#F6F8F9;
  --r:14px; --r-s:9px; --shadow:0 1px 2px rgba(20,32,43,.06),0 6px 20px -8px rgba(20,32,43,.14);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Helvetica,Arial,sans-serif;
  --display:"Bricolage Grotesque",var(--font);
  --tab-h:64px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fog);color:var(--ink);font:16px/1.45 var(--font);min-height:100vh}
body.in{padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom))}
a{color:var(--teal);text-decoration:none}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.01em;margin:0}
h1{font-size:1.7rem;line-height:1.15}
h2{font-size:1.2rem}
h3{font-size:1rem}
p{margin:.4rem 0}
.muted{color:var(--slate)}
.small{font-size:.85rem}
.right{text-align:right}
.hide{display:none!important}

/* header / nav */
.top{display:flex;align-items:center;gap:1rem;padding:.6rem 1rem;background:var(--navy);color:#fff;position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:.5rem;color:#fff;font-family:var(--display);font-weight:700;font-size:1.15rem}
.mark{width:28px;height:28px;fill:#fff}
.mark .beam{fill:none;stroke:var(--amber);stroke-width:1.6;stroke-linecap:round}
.topnav{display:none;gap:.2rem;margin-left:.5rem}
.topnav a{color:#cfdbe5;padding:.45rem .7rem;border-radius:8px;font-weight:500}
.topnav a.on,.topnav a:hover{background:rgba(255,255,255,.12);color:#fff}
.moremenu{position:relative}
.moremenu button{background:none;border:0;color:#cfdbe5;padding:.45rem .7rem;border-radius:8px;font:inherit;font-weight:500;cursor:pointer}
.moremenu button.on,.moremenu button:hover{background:rgba(255,255,255,.12);color:#fff}
.moremenu .menu{display:none;position:absolute;top:110%;left:0;background:#fff;border-radius:10px;box-shadow:var(--shadow);min-width:200px;padding:.4rem;z-index:30}
.moremenu.open .menu{display:block}
.moremenu .menu a{display:block;color:var(--ink);padding:.55rem .8rem;border-radius:7px;font-weight:500}
.moremenu .menu a:hover{background:var(--pale)}
.who{margin-left:auto;font-size:.9rem;display:none;align-items:center;gap:.5rem}
.tabbar{position:fixed;left:0;right:0;bottom:0;height:calc(var(--tab-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:#fff;border-top:1px solid var(--mist);display:flex;z-index:20}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--slate);font-size:.7rem;font-weight:600}
.tabbar a svg{width:24px;height:24px}
.tabbar a.on{color:var(--navy)}
@media(min-width:820px){
  .topnav,.who{display:flex}
  .tabbar{display:none}
  body.in{padding-bottom:2rem}
}

/* page */
.page{max-width:980px;margin:0 auto;padding:1rem 1rem 2rem}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin:.4rem 0 1rem;flex-wrap:wrap}
.head .sub{color:var(--slate);margin-top:.15rem}
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:1rem;margin-bottom:.9rem}
.card.tight{padding:.6rem .9rem}
.card h2{margin-bottom:.5rem}
.grid2{display:grid;grid-template-columns:1fr;gap:.9rem}
@media(min-width:700px){.grid2{grid-template-columns:1fr 1fr}}
.row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.row.between{justify-content:space-between}
.stack>*+*{margin-top:.6rem}
.flash{padding:.7rem 1rem;border-radius:var(--r-s);margin-bottom:.9rem;background:#e3f1e8;color:#1f5a37;font-weight:500}
.flash-err{background:#fbe5e2;color:#7a2318}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:44px;padding:.55rem 1rem;border-radius:var(--r-s);border:1px solid transparent;background:var(--navy);color:#fff;font:inherit;font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .05s,background .15s}
.btn:active{transform:scale(.98)}
.btn:hover{background:var(--navy-2)}
.btn.sec{background:#fff;color:var(--navy);border-color:var(--mist)}
.btn.sec:hover{background:var(--pale)}
.btn.amber{background:var(--amber);color:#2a1d02}
.btn.amber:hover{background:var(--amber-2);color:#fff}
.btn.danger{background:#fff;color:var(--lantern);border-color:#efc9c4}
.btn.danger:hover{background:#fbe5e2}
.btn.ok{background:var(--moss)}
.btn.sm{min-height:34px;padding:.3rem .7rem;font-size:.85rem}
.btn.block{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--navy);border:0;padding:.3rem .5rem;min-height:36px}
.iconbtn{background:none;border:0;color:var(--slate);cursor:pointer;padding:.4rem;border-radius:8px;font:inherit}
.iconbtn:hover{background:var(--pale);color:var(--ink)}

/* forms */
label.f{display:block;font-size:.85rem;font-weight:600;color:var(--slate);margin:.7rem 0 .25rem}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=time],input[type=number],input[type=tel],select,textarea{width:100%;font:inherit;padding:.6rem .7rem;border:1px solid var(--mist);border-radius:var(--r-s);background:#fff;color:var(--ink);min-height:44px}
input:focus,select:focus,textarea:focus,.btn:focus-visible,a:focus-visible{outline:3px solid rgba(42,127,142,.35);outline-offset:1px}
textarea{min-height:80px}
.inline{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.check{display:flex;align-items:center;gap:.5rem;min-height:40px;font-weight:500}
.check input{width:20px;height:20px;accent-color:var(--navy)}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chip{padding:.4rem .75rem;border-radius:999px;border:1px solid var(--mist);background:#fff;font-weight:600;font-size:.9rem;cursor:pointer;min-height:38px;display:inline-flex;align-items:center}
.chip.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.chip.amber.on{background:var(--amber);color:#2a1d02;border-color:var(--amber)}
.chip.red.on{background:#b3261e;color:#fff;border-color:#b3261e}
.savebar{position:sticky;bottom:0;display:flex;justify-content:flex-end;align-items:center;gap:1rem;margin:.5rem -1rem 0;padding:.7rem 1rem;background:rgba(237,242,244,.92);backdrop-filter:blur(6px);border-top:1px solid var(--mist)}
@media(max-width:819px){.savebar{bottom:calc(var(--tab-h) + env(safe-area-inset-bottom))}.savebar .muted{display:none}}
.help{font-size:.82rem;color:var(--slate);margin-top:.25rem}

/* tags */
.tag{display:inline-block;padding:.1rem .5rem;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;vertical-align:middle}
.tag-master,.tag-manager{background:var(--lantern);color:#fff}
.tag-staff{background:var(--navy);color:#fff}
.tag-volunteer{background:var(--amber);color:#2a1d02}
.tag-draft{background:#e9eef1;color:var(--slate)}
.tag-published{background:#e3f1e8;color:#1f5a37}
.tag-dropped{background:#fbe5e2;color:#7a2318}
.tag-no_show{background:#fbe5e2;color:#7a2318}
.tag-gap{background:#fbe5e2;color:#7a2318}
.tag-ok{background:#e3f1e8;color:#1f5a37}
.tag-worked{background:#e3f1e8;color:#1f5a37}
.tag-sick,.tag-absent{background:#fbe5e2;color:#7a2318}
.tag-other{background:#fff3d6;color:#6a4a05}
.pill{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem;border-radius:999px;background:var(--pale);border:1px solid var(--mist);font-size:.82rem;font-weight:600}

/* checklist */
.checklist{border-left:5px solid var(--amber)}
.tick{width:28px;height:28px;border-radius:50%;border:2px solid var(--mist);display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;flex:none}
.tick.on{background:var(--moss);border-color:var(--moss)}
.checklist .acts{display:flex;gap:.4rem}
@media(max-width:520px){.checklist .list li{flex-wrap:wrap}.checklist .acts{width:100%;padding-left:calc(28px + .7rem)}}

/* lists */
.list{margin:0;padding:0;list-style:none}
.list li{display:flex;align-items:center;gap:.7rem;padding:.7rem 0;border-bottom:1px solid var(--pale)}
.list li:last-child{border-bottom:0}
.list .grow{flex:1;min-width:0}
.list .title{font-weight:600}
.list .meta{font-size:.85rem;color:var(--slate)}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;flex:none}
.avatar.v{background:var(--amber);color:#2a1d02}
.avatar.m{background:var(--lantern)}
.avatar.empty{background:#fff;border:2px dashed var(--mist);color:var(--slate)}

/* "Need to be out?" card on Today */
.outcard{border-left:5px solid var(--lantern)}
.btn.big{padding:.85rem 1.3rem;font-size:1.05rem;min-height:52px}

/* people grid: one card per person, whole card is the link */
.tiergroup{margin-bottom:1.3rem}
.tiergroup .tierhead{display:flex;align-items:baseline;gap:.6rem;margin:0 .2rem .5rem;flex-wrap:wrap}
.tiergroup .tierhead .help{margin:0;flex-basis:100%}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.7rem}
.pcard{display:block;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:.85rem .9rem;color:var(--ink);border:2px solid transparent;transition:transform .08s,border-color .08s,box-shadow .08s;min-height:120px}
.pcard:hover,.pcard:focus-visible{border-color:var(--teal);transform:translateY(-1px);box-shadow:0 2px 4px rgba(20,32,43,.08),0 10px 24px -8px rgba(20,32,43,.2);outline:none}
.pcard .who2{display:flex;align-items:center;gap:.6rem;margin-bottom:.45rem}
.pcard .name{font-weight:700;line-height:1.2}
.pcard .since{font-size:.8rem;color:var(--slate)}
.pcard .badges{display:flex;flex-wrap:wrap;gap:.25rem;margin:.2rem 0 .4rem}
.pcard .badges:empty{display:none}
.pcard .wk{display:flex;gap:3px;margin-top:.3rem}
.pcard .wk span{flex:1;text-align:center;font-size:.68rem;font-weight:700;padding:.22rem 0;border-radius:6px;background:var(--pale);color:var(--mist)}
.pcard .wk span.r{background:var(--navy);color:#fff}
.pcard .wk span.p{background:#dfeef1;color:var(--teal)}
.pcard .wk span.c{background:#f6dcd9;color:#8f2a20;text-decoration:line-through}
.pcard .foot{font-size:.78rem;color:var(--slate);margin-top:.4rem}
.pcard.off{opacity:.55}

/* the beam — a day's coverage from open to close */
.beams{margin:.35rem 0}
.beams .beam{margin:0 0 3px}
.beam{position:relative;height:14px;border-radius:7px;background:#e5ebee;overflow:hidden;margin:.35rem 0}
.beam span{position:absolute;top:0;bottom:0;background:var(--amber);opacity:.9}
.beam span.s{background:var(--navy)}
.beam-scale{display:flex;justify-content:space-between;font-size:.7rem;color:var(--slate)}
.gapnote{color:var(--lantern);font-weight:600;font-size:.85rem}

/* month grid */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal .dow{font-size:.7rem;font-weight:700;color:var(--slate);text-align:center;text-transform:uppercase;padding:.2rem 0}
.cal .d{min-width:0;overflow:hidden;border-radius:10px;background:#fff;border:1px solid var(--mist);padding:4px 5px 6px;display:flex;flex-direction:column;gap:2px;color:var(--ink);position:relative;min-height:96px}
.cal .dhead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:2px}
.chip-ev{display:block;font-size:.72rem;line-height:1.25;padding:2px 5px;border-radius:5px;background:var(--pale);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.chip-ev.mod{background:var(--navy);color:#fff}
.chip-ev.vol{background:#fdf1d6;color:#5b4004}
.chip-ev.vol small{font-weight:500;opacity:.8}
.chip-ev.event{background:#e9e1f7;color:#3d2a6b}
.chip-ev.note{background:#e3f1ee;color:#1f5c4f;font-weight:500}
.chip-ev.gap{background:#fbe3e0;color:#8f2a20}
.chip-ev.closed{background:var(--pale);color:var(--slate);font-weight:500}
.chip-ev.me{box-shadow:inset 0 0 0 2px var(--teal)}
.chip-ev.draft{opacity:.55;border:1px dashed var(--slate)}
@media(max-width:700px){.cal .d{min-height:70px}.chip-ev{font-size:.62rem;padding:1px 3px}.chip-ev small{display:none}}
.cal .d.off{background:transparent;border-color:transparent;color:var(--mist)}
.cal .d.closed{background:var(--pale);color:var(--slate)}
.cal .d.past{opacity:.6}
.cal .d.past .lamp:not(.on){display:none}
.cal .d.past .dot{display:none}
.cal .d.past .fill i{background:var(--slate)}
.cal .d.today{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
.cal .d.mine{background:#eaf2f7}
.cal .n{font-weight:700;font-size:.9rem;line-height:1}
.cal .fill{height:5px;border-radius:3px;background:#e5ebee;overflow:hidden}
.cal .fill i{display:block;height:100%;background:var(--moss)}
.cal .fill.short i{background:var(--lantern)}
.cal .lamp{position:absolute;top:5px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--lantern)}
.cal .lamp.on{background:var(--moss)}
.cal .marks{position:absolute;top:3px;left:26px;font-size:.7rem;line-height:1;letter-spacing:-1px}
.cal .sel small{font-size:.65em;color:var(--amber-2);margin-left:1px}
.cal .dot{width:6px;height:6px;border-radius:50%;background:var(--amber);position:absolute;bottom:14px;right:6px}
.cal .sel{font-size:.65rem;color:var(--slate)}
.monthnav{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem}
.monthnav h2{font-size:1.25rem}
.legend{display:flex;gap:.9rem;flex-wrap:wrap;font-size:.78rem;color:var(--slate);margin-top:.6rem}
.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px;vertical-align:-1px}

/* day view slots */
.slot{display:flex;align-items:center;gap:.7rem;padding:.7rem .8rem;border-radius:var(--r-s);border:1px solid var(--mist);background:#fff;margin-bottom:.5rem}
.slot.empty{border-style:dashed;background:transparent}
.slot .grow{flex:1;min-width:0}
.slot .name{font-weight:600}
.slot .meta{font-size:.85rem;color:var(--slate)}
.slot.mod{border-left:4px solid var(--lantern)}
.slot.staff{border-left:4px solid var(--navy)}
.slot.vol{border-left:4px solid var(--amber)}
.slot.dropped{opacity:.6}

/* tables */
table.t{width:100%;border-collapse:collapse;font-size:.92rem}
table.t th{text-align:left;font-size:.75rem;text-transform:uppercase;letter-spacing:.03em;color:var(--slate);padding:.5rem .4rem;border-bottom:1px solid var(--mist)}
table.t td{padding:.55rem .4rem;border-bottom:1px solid var(--pale);vertical-align:middle}
table.t td.num,table.t th.num{text-align:right;font-variant-numeric:tabular-nums}
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* big numbers */
.stat{display:flex;flex-direction:column}
.stat b{font-family:var(--display);font-size:1.9rem;line-height:1;font-weight:700}
.stat span{font-size:.8rem;color:var(--slate)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:.8rem}

/* sheet (bottom modal) */
.sheet-bg{position:fixed;inset:0;background:rgba(20,32,43,.45);z-index:40;display:none}
.sheet-bg.open{display:block}
.sheet{position:fixed;left:0;right:0;bottom:0;background:#fff;border-radius:18px 18px 0 0;padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom));z-index:41;max-height:88vh;overflow:auto;transform:translateY(100%);transition:transform .22s ease}
.sheet.open{transform:none}
.sheet .grab{width:40px;height:4px;border-radius:2px;background:var(--mist);margin:0 auto .8rem}
@media(min-width:700px){.sheet{left:50%;right:auto;bottom:auto;top:50%;width:520px;transform:translate(-50%,-45%);opacity:0;pointer-events:none;border-radius:18px;transition:opacity .18s,transform .18s}.sheet.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}.sheet .grab{display:none}}
.sheet h2{margin-bottom:.6rem}
.sheet .actions{display:flex;gap:.6rem;margin-top:1rem}
.sheet .actions .btn{flex:1}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(var(--tab-h) + 16px + env(safe-area-inset-bottom));transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:.65rem 1rem;border-radius:999px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:50;max-width:90vw}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.err{background:var(--lantern)}
@media(min-width:820px){.toast{bottom:24px}}

/* password show/hide */
.pwwrap{position:relative}
.pwwrap input{padding-right:4.2rem}
.pwtoggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:var(--pale);border:1px solid var(--mist);border-radius:7px;padding:.35rem .6rem;font:inherit;font-size:.8rem;font-weight:600;color:var(--navy);cursor:pointer;min-height:32px}

/* login / setup */
body.out{display:flex;align-items:center;justify-content:center;padding:1rem;background:radial-gradient(120% 90% at 50% 0%,#1f4a6c 0%,var(--navy) 55%,#0f2638 100%)}
body.out .page{width:100%;max-width:420px;padding:0;margin:0}
.auth{background:#fff;border-radius:20px;padding:1.6rem 1.4rem;box-shadow:0 30px 60px -20px rgba(0,0,0,.5)}
.auth .brand{color:var(--navy);font-size:1.4rem;margin-bottom:.3rem}
.auth .mark{fill:var(--navy)}
.auth h1{font-size:1.35rem;margin:.6rem 0 .2rem}
.auth .btn{margin-top:1rem}
.steps{display:flex;gap:.4rem;margin-bottom:.6rem}
.steps i{flex:1;height:4px;border-radius:2px;background:var(--mist)}
.steps i.on{background:var(--navy)}
.err{background:#fbe5e2;color:#7a2318;padding:.6rem .8rem;border-radius:var(--r-s);font-weight:500;margin:.6rem 0}
.ok{background:#e3f1e8;color:#1f5a37;padding:.6rem .8rem;border-radius:var(--r-s);font-weight:500;margin:.6rem 0}
code.k{background:var(--pale);padding:.15rem .4rem;border-radius:6px;font-size:.85em;word-break:break-all}
.copybox{display:flex;gap:.5rem;align-items:center}
.copybox input{flex:1;font-size:.85rem}

@media(prefers-reduced-motion:reduce){*{transition:none!important}}
@media print{.top,.tabbar,.btn,.toast{display:none!important}body{background:#fff}body.in{padding:0}.card{box-shadow:none;border:1px solid #ccc}}