/* Gayle's Rota — light, plain, big touch targets. Nothing clever. */
:root{
  --navy:#1e3a5f; --navy-d:#162c48; --red:#c8102e; --red-l:#fff6f7;
  --ink:#16202e; --mid:#5a6474; --soft:#8b95a5; --line:#e2e6ec;
  --bg:#f5f7fa; --card:#fff; --ok:#0d8a5f; --warn:#b45309;
  --r:12px; --sh:0 1px 3px rgba(16,32,58,.07), 0 6px 20px rgba(16,32,58,.05);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink); -webkit-text-size-adjust:100%;
}
.hidden{display:none !important}
h1{font-size:24px;margin:0 0 4px}
h2{font-size:18px;margin:0 0 4px}
p.sub{margin:0 0 16px;color:var(--mid);font-size:14.5px}
.hint{color:var(--soft);font-weight:400;font-size:13px}

/* ---------- sign in ---------- */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:linear-gradient(160deg,#1e3a5f,#2d5580 60%,#c8102e 190%)}
.loginbox{background:#fff;border-radius:16px;padding:34px 30px;width:100%;max-width:380px;
  box-shadow:0 20px 60px rgba(8,20,40,.3);text-align:center}
.loginbox h1{margin:14px 0 4px}
.loginbox p{color:var(--mid);margin:0 0 22px;font-size:15px}
.loginbox input{width:100%;margin-bottom:14px}
.logomark{width:56px;height:56px;border-radius:14px;background:var(--navy);color:#fff;display:flex;
  align-items:center;justify-content:center;font-size:28px;font-weight:700;margin:0 auto}
.logomark.sm{width:38px;height:38px;font-size:19px;border-radius:10px;margin:0}
.err{color:var(--red);font-size:14px;min-height:20px;margin-top:8px}

/* ---------- chrome ---------- */
.top{background:var(--navy);color:#fff;display:flex;align-items:center;
  justify-content:space-between;gap:12px;
  padding:calc(12px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 12px calc(16px + env(safe-area-inset-left))}
.brand{display:flex;align-items:center;gap:11px}
.brand .logomark{background:rgba(255,255,255,.14)}
.bt{font-size:17px;font-weight:700;line-height:1.2}
.bs{font-size:12.5px;opacity:.8}
.linkbtn{background:none;border:0;color:#fff;opacity:.8;font-size:14px;cursor:pointer;padding:8px}
.linkbtn:hover{opacity:1;text-decoration:underline}

.tabs{display:flex;gap:2px;background:var(--navy-d);padding:0 8px;overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{background:none;border:0;color:rgba(255,255,255,.72);padding:13px 16px;font-size:15px;
  cursor:pointer;white-space:nowrap;border-bottom:3px solid transparent;font-family:inherit}
.tab.on{color:#fff;font-weight:600;border-bottom-color:var(--red);background:rgba(255,255,255,.06)}
.pane{display:none;max-width:1180px;margin:0 auto;
  padding:16px calc(16px + env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left))}
.pane.on{display:block}

/* ---------- bits ---------- */
.card{background:var(--card);border-radius:var(--r);padding:18px;box-shadow:var(--sh);margin-bottom:16px}
input,select,textarea{font:inherit;font-size:16px;padding:11px 12px;border:1.5px solid var(--line);
  border-radius:9px;background:#fff;color:var(--ink);font-family:inherit;max-width:100%}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--navy);box-shadow:0 0 0 3px rgba(30,58,95,.1)}
textarea{width:100%;resize:vertical}
.btn{background:var(--navy);color:#fff;border:0;border-radius:10px;padding:12px 20px;font-size:15px;
  font-weight:600;cursor:pointer;font-family:inherit;text-decoration:none;display:inline-block;text-align:center}
.btn:hover{background:var(--navy-d)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.big{padding:14px 26px;font-size:16px}
.btn.block{width:100%}
.btn.ghost{background:#fff;color:var(--navy);border:1.5px solid var(--line)}
.btn.ghost:hover{background:#f1f4f8;border-color:#c9d2de}
.btn.ghost.danger{color:var(--red);border-color:#f3c9cf}
.btn.ghost.danger:hover{background:var(--red-l)}
.chip{background:#fff;border:1.5px solid var(--line);border-radius:20px;padding:8px 15px;font-size:14px;
  cursor:pointer;font-family:inherit;color:var(--navy)}
.chip:hover{background:#f1f4f8}
.chip.danger{color:var(--red);border-color:#f3c9cf}
.lbl{display:block;font-weight:600;font-size:14.5px;margin-bottom:7px}
.frow{margin-bottom:14px}
.frow label{display:block;font-weight:600;font-size:14.5px;margin-bottom:6px}
.frow input,.frow select{width:100%;max-width:420px}
label.inline{display:inline-flex;align-items:center;gap:7px;font-size:14.5px;font-weight:500}
.saved{color:var(--ok);font-size:14px;margin-left:10px}
.saved.bad{color:var(--red)}

/* ---------- week nav ---------- */
.weeknav{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:#fff;border-radius:var(--r);padding:12px 14px;box-shadow:var(--sh);margin-bottom:10px}
.wklabel{text-align:center;flex:1;min-width:0}
.wkmain{font-size:18px;font-weight:700}
.wksub{font-size:12.5px;color:var(--soft)}
.weekbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}

/* ---------- warnings ---------- */
.warns{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:14px 16px;margin-bottom:14px;
  border-left:5px solid var(--warn)}
.warns.bad{border-left-color:var(--red)}
.warns h3{margin:0 0 8px;font-size:15px}
.warns ul{margin:0;padding-left:20px}
.warns li{font-size:14.5px;margin-bottom:4px;color:var(--mid)}
.warns li.bad{color:var(--red);font-weight:600}
.allgood{background:#f0fbf6;border-left-color:var(--ok);color:#0d8a5f}
.allgood h3{color:var(--ok)}

/* ---------- rota grid (wide) ---------- */
.gridwrap{background:#fff;border-radius:var(--r);box-shadow:var(--sh);overflow-x:auto;margin-bottom:16px}
table.rota{border-collapse:collapse;width:100%;min-width:860px}
table.rota th,table.rota td{border:1px solid var(--line);padding:0;text-align:left;vertical-align:top}
table.rota thead th{background:var(--navy);color:#fff;padding:9px 8px;font-size:13px;font-weight:600;position:sticky;top:0}
table.rota thead th .dt{display:block;font-weight:400;opacity:.8;font-size:11.5px}
table.rota thead th .op{display:block;font-size:11.5px;color:#ffd9dd;font-weight:600;margin-top:3px}
table.rota thead th .op.sp{color:#ffdf7a}
th.nm{background:#f6f8fb;font-weight:600;font-size:14.5px;padding:10px;width:132px;white-space:nowrap;
  position:sticky;left:0;z-index:2}
th.nm .dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:middle}
th.nm .hrs{display:block;font-weight:400;font-size:12px;color:var(--soft);margin-top:2px}
th.nm .hrs.over{color:var(--warn);font-weight:600}
td.cell{cursor:pointer;padding:9px 8px;min-height:56px;font-size:14px}
td.cell:hover{background:#f2f6fb}
td.cell.on{font-weight:700;color:var(--ink)}
td.cell.emptyc{color:#c3cbd6}
td.cell.offc{color:var(--soft);font-style:italic;background:#fafbfc}
td.cell.hol{color:#0891b2;background:#f0fbfd;font-style:normal}
td.cell .h{display:block;font-weight:400;font-size:11.5px;color:var(--soft);margin-top:2px}
td.cell .n{display:block;font-weight:400;font-size:11.5px;color:var(--mid);margin-top:2px}
td.cell.shut{background:repeating-linear-gradient(45deg,#fafbfc,#fafbfc 6px,#f2f4f7 6px,#f2f4f7 12px)}
tr.totrow th,tr.totrow td{background:#f6f8fb;font-size:13px;color:var(--mid);padding:8px;font-weight:600}
tr.totrow td.thin{color:var(--red)}

/* ---------- rota stacked (phone) ---------- */
.dayblock{background:#fff;border-radius:var(--r);box-shadow:var(--sh);margin-bottom:12px;overflow:hidden}
.dayhead{background:var(--navy);color:#fff;padding:10px 14px;display:flex;justify-content:space-between;align-items:baseline}
.dayhead .dn{font-weight:700;font-size:16px}
.dayhead .dh{font-size:12.5px;opacity:.85}
.dayhead .dh.sp{color:#ffdf7a;font-weight:700}
.dayrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 14px;
  border-bottom:1px solid var(--line);cursor:pointer;font-size:15px}
.dayrow:last-child{border-bottom:0}
.dayrow:active{background:#f2f6fb}
.dayrow .who{display:flex;align-items:center;gap:9px;font-weight:600}
.dayrow .dot{width:9px;height:9px;border-radius:50%}
.dayrow .what{color:var(--red);font-weight:700;text-align:right}
.dayrow .what.none{color:#c3cbd6;font-weight:400}
.dayrow .what.offd{color:var(--soft);font-weight:500;font-style:italic}
.dayrow .what small{display:block;color:var(--mid);font-weight:400;font-style:normal}

/* ---------- staff list ---------- */
.prow2{display:flex;align-items:center;gap:12px;padding:14px 4px;border-bottom:1px solid var(--line);cursor:pointer}
.prow2:last-of-type{border-bottom:0}
.prow2:hover{background:#f7f9fc}
.prow2.inactive{opacity:.55}
.prow2 .dot{width:12px;height:12px;border-radius:50%;flex:0 0 auto}
.pinfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pinfo b{font-size:16px}
.pinfo .left{font-weight:400;color:var(--soft);font-size:13px}
.prole{font-size:13px;color:var(--mid)}
.pcontact{font-size:13px;color:var(--soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pchev{color:#c3cbd6;font-size:26px;line-height:1;flex:0 0 auto}
.sechead{font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.7px;color:var(--soft);
  margin:20px 0 10px;padding-top:14px;border-top:1px solid var(--line)}
.quickacts{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
.qa{display:inline-block;background:#f1f5fa;color:var(--navy);text-decoration:none;padding:9px 14px;
  border-radius:20px;font-size:14px;font-weight:600;border:1.5px solid var(--line)}
.qa:hover{background:#e6edf6}
.qa.emg{background:var(--red-l);color:var(--red);border-color:#f3c9cf}
.pmage{font-size:13.5px;color:var(--mid);margin-bottom:4px}
.pmage .u18{color:var(--warn);display:block;margin-top:3px}

/* ---------- staff ---------- */
.person{border:1.5px solid var(--line);border-radius:11px;padding:14px;margin-bottom:12px}
.person.inactive{opacity:.55;background:#fafbfc}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pgrid label{display:block;font-size:13px;font-weight:600;color:var(--mid);margin-bottom:4px}
.pgrid input{width:100%}
.pgrid .wide{grid-column:1/-1}
.prow{display:flex;justify-content:space-between;align-items:center;margin-top:11px;gap:10px;flex-wrap:wrap}
.swatch{width:26px;height:26px;padding:0;border:1.5px solid var(--line);border-radius:7px;cursor:pointer}
.noemail{color:var(--warn);font-size:13px;font-weight:600}

/* ---------- hours ---------- */
.hrow{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.hrow:last-of-type{border-bottom:0}
.hrow .dn{width:104px;font-weight:600;font-size:15px}
.hrow input[type=time]{width:auto}
.to{color:var(--soft);font-size:14px}
.ovadd{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.ovitem{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;
  border:1.5px solid var(--line);border-radius:10px;margin-bottom:8px;font-size:14.5px;flex-wrap:wrap}
.ovitem .d{font-weight:700}
.ovitem .n{color:var(--red);font-weight:600}
.preset{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.preset summary{cursor:pointer;font-weight:600;font-size:14.5px;color:var(--navy)}

/* ---------- calendar / month ---------- */
.whosel{padding:8px 12px;border-radius:20px;border:1.5px solid var(--line);font-size:14px;color:var(--navy);background:#fff}
.monthwrap{background:#fff;border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;margin-bottom:16px}
.mhead{display:grid;grid-template-columns:repeat(7,1fr);background:var(--navy);color:#fff}
.mhead div{padding:9px 6px;font-size:12.5px;font-weight:600;text-align:center}
.mgrid{display:grid;grid-template-columns:repeat(7,1fr)}
.mcell{border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:104px;
  padding:6px;cursor:pointer;background:#fff}
.mcell:nth-child(7n){border-right:0}
.mcell:hover{background:#f2f6fb}
.mcell.out{background:#fafbfc;color:#b9c2ce}
.mcell.out .mnum{color:#b9c2ce}
.mcell.shut{background:repeating-linear-gradient(45deg,#fafbfc,#fafbfc 6px,#f2f4f7 6px,#f2f4f7 12px)}
.mcell.today{box-shadow:inset 0 0 0 2px var(--navy)}
.mcell.special .mhrs{color:var(--red);font-weight:700}
.mtop{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px;gap:4px}
.mnum{font-weight:700;font-size:14px}
.mhrs{font-size:10.5px;color:var(--soft);white-space:nowrap}
.ment{display:flex;align-items:center;gap:4px;font-size:11.5px;margin-bottom:2px;line-height:1.3}
.ment.away{opacity:.65;font-style:italic}
.mdot{display:inline-block;width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.mnm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mtm{color:var(--mid);font-size:10.5px;white-space:nowrap}
.mmore{font-size:10.5px;color:var(--soft);margin-top:2px}
.mdots{display:flex;flex-wrap:wrap;gap:3px}
.calcard{border:1.5px solid var(--line);border-radius:11px;padding:14px;margin-bottom:12px}
.calcard.pri{border-color:var(--navy);background:#f7fafd}
.calcard .ct{font-weight:700;font-size:15.5px;margin-bottom:10px}
.cacts{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:9px}
.curl{font-size:11.5px;color:var(--soft);word-break:break-all}
.calrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 0;
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.calrow:last-child{border-bottom:0}
.calrow .who{display:flex;align-items:center;gap:9px;font-size:15px}
.calrow .dot{width:10px;height:10px;border-radius:50%}
.calrow .acts{display:flex;gap:7px}
.calrow .acts .btn{padding:8px 13px;font-size:13.5px}

/* ---------- publish bar ---------- */
.pubbar{display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap;
  border-radius:var(--r);padding:13px 16px;margin-bottom:14px;font-size:14.5px}
.pubbar.live{background:#f0fbf6;border:1.5px solid #a8dfc6;color:#0a6a49}
.pubbar.draft{background:#fff8e6;border:1.5px solid #f0d089;color:#7a5a12}
.pubbar .pt{flex:1;min-width:200px;line-height:1.45}
.pubbar .btn{padding:10px 16px;font-size:14px}

/* ---------- shift requests ---------- */
.reqs{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:16px;margin-bottom:14px;
  border-left:5px solid var(--red)}
.reqs h3{margin:0 0 10px;font-size:15.5px;color:var(--red)}
.req{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;
  padding:10px 0;border-bottom:1px solid var(--line)}
.req:last-child{border-bottom:0}
.rq{flex:1;min-width:200px;font-size:14.5px}
.rq .why{display:block;color:var(--mid);font-style:italic;margin-top:3px}
.rq .when{display:block;color:var(--soft);font-size:12px;margin-top:3px}
.ra{display:flex;gap:7px;flex-wrap:wrap}
.ra .btn{padding:8px 13px;font-size:13.5px}

/* ---------- who can cover ---------- */
.covhead{font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.6px;
  color:var(--soft);margin:14px 0 8px}
.covrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 0;
  border-bottom:1px solid var(--line)}
.covrow:last-child{border-bottom:0}
.covrow.no{opacity:.6}
.covrow .who{display:flex;align-items:flex-start;gap:9px;flex:1;min-width:0}
.covrow .dot{width:10px;height:10px;border-radius:50%;margin-top:5px;flex:0 0 auto}
.cinfo{display:flex;flex-direction:column;min-width:0}
.cinfo b{font-size:15.5px}
.cw{font-size:13px;color:var(--mid)}
.cn{font-size:12px;color:var(--warn)}
.covrow .btn{padding:8px 14px;font-size:13.5px;text-decoration:none}
.covnone{color:var(--soft);font-size:14.5px;padding:8px 0}

/* ---------- availability / undo / whatsapp ---------- */
.unavrow{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.unav{flex:1 1 auto;text-align:center;border:1.5px solid var(--line);border-radius:9px;
  padding:9px 4px;cursor:pointer;font-size:13px;min-width:44px}
.unav input{display:block;margin:0 auto 4px}
.unav:has(input:checked){background:var(--red-l);border-color:#f3c9cf;color:var(--red);font-weight:700}
.chip.undo{background:var(--navy);color:#fff;border-color:var(--navy)}
.chip.undo:hover{background:var(--navy-d)}
.btn.wa{background:#25a366}
.btn.wa:hover{background:#1e8a55}

/* ---------- holidays ---------- */
.holcard{padding:16px}
.hhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.hhead .who{display:flex;align-items:center;gap:9px;font-size:17px}
.hhead .dot{width:11px;height:11px;border-radius:50%}
.hright{font-size:15px;color:var(--mid)}
.hright b{font-size:19px;color:var(--ok)}
.hright b.bad{color:var(--red)}
.hnoent{color:var(--warn);font-weight:600;font-size:14px}
.hbar{height:9px;background:#eef1f5;border-radius:6px;overflow:hidden;margin-bottom:11px}
.hbar span{display:block;height:100%;background:var(--ok);border-radius:6px}
.hbar span.high{background:var(--warn)}
.hbar span.over{background:var(--red)}
.hstats{display:flex;gap:16px;flex-wrap:wrap;font-size:13.5px;color:var(--mid);margin-bottom:11px}
.hstats b{color:var(--ink);font-size:15px}
.hover{background:var(--red-l);border-left:4px solid var(--red);padding:9px 12px;border-radius:6px;
  font-size:14px;color:var(--red);font-weight:600;margin-bottom:11px}
.hdates{display:flex;flex-wrap:wrap;gap:7px}
.hchip{display:inline-flex;align-items:center;gap:7px;background:#f0fbfd;color:#0891b2;
  border:1.5px solid #cbeef6;border-radius:18px;padding:6px 12px;font-size:13.5px;cursor:pointer}
.hchip:hover{background:#e2f6fb}
.hchip.past{background:#f6f8fb;color:var(--soft);border-color:var(--line)}
.hchip .hx{font-size:16px;line-height:1;opacity:.6}
.hnone{color:var(--soft);font-size:14px}
.entrow{display:flex;align-items:flex-end;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.entrow:last-child{border-bottom:0}
.entrow .who{display:flex;align-items:center;gap:9px;min-width:130px;font-weight:600;font-size:15px}
.entrow .dot{width:10px;height:10px;border-radius:50%}
.entrow label{font-size:12.5px;font-weight:600;color:var(--mid)}
.entrow input{display:block;margin-top:4px;width:130px}
.hdaylist{display:flex;flex-direction:column;gap:2px;margin-bottom:14px;max-height:44vh;overflow-y:auto}
.hday{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;cursor:pointer;font-size:14.5px}
.hday:hover{background:#f2f6fb}
.hday.shut{opacity:.5}
.hday input{width:19px;height:19px;flex:0 0 auto}
.hdn{flex:1}
.hdw{font-size:12px;color:var(--soft)}

/* ---------- send ---------- */
.banner{border-radius:var(--r);padding:14px 16px;margin-bottom:16px;font-size:14.5px;line-height:1.5}
.banner.off{background:#fff8e6;border:1.5px solid #f0d089;color:#7a5a12}
.banner.manual{background:#eef6ff;border:1.5px solid #b8d4f5;color:#1e3a5f}
.banner.live{background:#f0fbf6;border:1.5px solid #a8dfc6;color:#0a6a49}
.banner .h{display:block;margin-bottom:3px;font-size:15px;font-weight:700}
.srow{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.srow:last-child{border-bottom:0}
.srow input[type=checkbox]{width:20px;height:20px;flex:0 0 auto}
.srow .who{flex:1;min-width:150px}
.srow .who b{display:block;font-size:15.5px}
.srow .who span{display:block;font-size:13px;color:var(--mid);line-height:1.35}
.srow .who span.miss{color:var(--warn);font-weight:600}
.srow .acts{display:flex;gap:7px;flex-wrap:wrap}
.srow .acts .btn{padding:8px 13px;font-size:13.5px}
.sendactions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;align-items:center}
.loglist{font-size:14px;color:var(--mid)}
.logitem{padding:8px 0;border-bottom:1px solid var(--line)}
.logitem:last-child{border-bottom:0}
.logitem b{color:var(--ink)}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;background:rgba(12,22,38,.55);display:flex;align-items:flex-end;
  justify-content:center;z-index:50;padding:0}
.sheet{background:#fff;border-radius:16px 16px 0 0;width:100%;max-width:560px;max-height:94vh;
  overflow-y:auto;box-shadow:0 -8px 40px rgba(0,0,0,.25);
  padding:18px 18px calc(18px + env(safe-area-inset-bottom))}
.sheet.wide{max-width:820px}
.sheethead{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px;gap:10px}
.shwho{font-size:19px;font-weight:700}
.shwhen{font-size:14px;color:var(--mid)}
.x{background:none;border:0;font-size:30px;line-height:1;color:var(--soft);cursor:pointer;padding:0 6px}
.shopen{background:#f4f7fb;border-radius:9px;padding:9px 12px;font-size:13.5px;color:var(--mid);margin-bottom:14px}
.shopen b{color:var(--ink)}
.shopen .sp{color:var(--red);font-weight:700}
.presets{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin-bottom:16px}
.pbtn{background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:12px 8px;cursor:pointer;
  font-family:inherit;font-size:14.5px;font-weight:600;color:var(--navy);text-align:center}
.pbtn:hover{background:#f1f4f8;border-color:#c9d2de}
.pbtn small{display:block;font-weight:400;font-size:12px;color:var(--soft);margin-top:2px}
.pbtn.sel{border-color:var(--navy);background:#eef3fa;box-shadow:0 0 0 2px rgba(30,58,95,.12)}
.pbtn.offb{color:var(--mid)}
.timerow{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.timerow label{display:block;font-size:13px;font-weight:600;color:var(--mid)}
.timerow input,.timerow select{display:block;margin-top:5px}
.shtotal{background:#f4f7fb;border-radius:9px;padding:11px 13px;font-size:15px;margin-bottom:16px}
.shtotal b{color:var(--red)}
.shtotal .warn{color:var(--warn);display:block;font-size:13.5px;margin-top:4px}
.sheetfoot{display:flex;gap:10px;justify-content:space-between;align-items:center}
.sheetfoot.wrap{flex-wrap:wrap;justify-content:flex-end}
.pvsubject{background:#f4f7fb;border-radius:9px;padding:10px 13px;font-size:14px;margin-bottom:12px}
.pvsubject b{display:block;font-size:12px;color:var(--soft);text-transform:uppercase;letter-spacing:.5px}
.pvframe{width:100%;height:52vh;border:1.5px solid var(--line);border-radius:10px;background:#fff;margin-bottom:14px}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,80px);background:var(--navy);color:#fff;
  padding:13px 22px;border-radius:26px;font-size:15px;opacity:0;transition:.25s;z-index:99;pointer-events:none;
  box-shadow:0 8px 30px rgba(0,0,0,.25);max-width:92vw;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.bad{background:var(--red)}

/* ---------- responsive ---------- */
@media (min-width:760px){
  .modal{align-items:center;padding:20px}
  .sheet{border-radius:16px}
  .pane{padding:22px}
}
@media (max-width:759px){
  .pgrid{grid-template-columns:1fr}
  .wkmain{font-size:16px}
  .btn{padding:12px 16px}
  .weeknav .btn{padding:12px 12px;font-size:14px}
  /* seven tabs have to fit across an iPhone — tight padding, no scrolling */
  .tabs{padding:0}
  .tab{padding:13px 6px;font-size:12.5px;flex:1 1 auto}
  .mcell{min-height:62px;padding:4px}
  .mnum{font-size:12.5px}
  .mdot{width:8px;height:8px}
  .mhead div{font-size:11px;padding:7px 2px}
}
@media (max-width:359px){ .tab{font-size:11.5px;padding:13px 4px} }