/* The Scheduler's screen (0.2.0): one screen, a control panel. The roster on top,
   a day bar, that day as an upright calendar with the sky and the people-on
   numbers beside its hours, and a bar at the bottom. Built on screens/app.css
   (colours, fonts, buttons, dialogs); the class names here were checked against
   it (app.css has .split, .empty, .chip, .dot, .hint of its own). */
:root{ --amber-dot:#D98A00; --pblock:16%; --namew:64px; --rowh:40px; --headh:34px;
  --gl:max(16px, env(safe-area-inset-left, 0px)); --gr:max(16px, env(safe-area-inset-right, 0px)) }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --amber-dot:#E8BE72; --pblock:24% } }
:root[data-theme="dark"]{ --amber-dot:#E8BE72; --pblock:24% }

html:has(body.sch), body.sch{height:100%}
body.sch{overflow:hidden; background-image:none}
:where(.sch) button{font:inherit; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent}
/* the dialogs: a little more room on a phone, so a time box shows its AM or PM whole */
@media (max-width:759px){ .sch .scrim{padding:10px} .sch .modal{padding:16px 14px} }
#app{height:100%; height:100dvh; max-width:1180px; margin:0 auto; display:flex; flex-direction:column; background:var(--bg); position:relative}
@media (min-width:760px){ #app{border-left:1px solid var(--rule); border-right:1px solid var(--rule)} }

/* the header: where you are, and the week (the sky's wash is app.css's header) */
.sch header{flex:none}
.sch header .hwrap{max-width:none; padding:6px var(--gr) 6px var(--gl); gap:4px; flex-wrap:nowrap; min-height:56px}
@media (max-width:759px){ .sch .homelink{display:none} }
#topin{display:flex; align-items:center; gap:4px; flex:1; min-width:0}
#topin button{background:none; border:0; color:inherit}
.navb{width:34px; height:44px; font-size:22px; line-height:1; border-radius:8px; flex:none}
.navb:disabled{opacity:.3; cursor:default}
.wk{display:grid; justify-items:start; text-align:left; padding:2px 4px; border-radius:8px; min-width:0}
.wk .wb{font-size:12px; color:var(--head-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.wk .wd{font-family:var(--font-head); font-size:17px; font-weight:700; white-space:nowrap}
.sp{flex:1}
#topin .wchip{font-size:12px; font-weight:700; padding:4px 9px; border-radius:999px; white-space:nowrap; flex:none;
  background:rgba(255,255,255,.14); color:var(--head-ink); border:1px solid rgba(255,255,255,.22)}
#topin .wchip.ok{background:#3FCB98; color:#06261B; border-color:#3FCB98}
#topin .wchip.back{background:#FF9B88; color:#3A0D06; border-color:#FF9B88}
#topin .wchip.chg{background:#E8BE72; color:#3A2600; border-color:#E8BE72}
.more{width:38px; height:44px; font-size:20px; border-radius:8px; flex:none}

.notice{flex:none; display:flex; gap:8px; align-items:center; width:100%; text-align:left; border:0; font-size:13.5px;
  padding:7px var(--gr) 7px var(--gl); border-bottom:1px solid var(--rule)}
.notice span{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.notice b{flex:none}
.notice.back{background:var(--flag-soft); color:var(--ink)} .notice.back b{color:var(--flag)}
.notice.chg{background:var(--amber-soft); color:var(--ink)} .notice.chg b{color:var(--amber)}

/* the roster: the branch's list down, days across */
.roster{flex:none; overflow-y:auto; overscroll-behavior:contain; background:var(--card); padding:0 var(--gr) 0 var(--gl)}
.rg{display:grid; grid-template-columns:var(--namew) repeat(7, minmax(0,1fr)); align-items:stretch}
.rhead{position:sticky; top:0; z-index:3; background:var(--card); height:var(--headh); border-bottom:1px solid var(--rule)}
.dayb{border:0; background:none; display:grid; place-content:center; line-height:1.05; border-radius:8px; margin:2px 1px; color:var(--ink2)}
.dayb .dn{font-size:11px; text-transform:uppercase; letter-spacing:.04em}
.dayb .dd{font-family:var(--font-head); font-weight:700; font-size:14px; color:var(--ink)}
.dayb.today .dd{color:var(--accent)}
.dayb[aria-pressed="true"]{background:var(--accent); color:var(--accent-on)} .dayb[aria-pressed="true"] .dd{color:var(--accent-on)}
.rrow{height:var(--rowh); border-bottom:1px solid var(--rule)}
.who{display:flex; align-items:center; gap:6px; min-width:0; border:0; background:none; text-align:left; padding:0}
.who .pd{width:8px; height:8px; border-radius:50%; flex:none; background:var(--pc)}
.who .pn{font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.who .pnw{display:grid; min-width:0; line-height:1.1}
.who .ptag{font-size:10.5px; color:var(--ink3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cell{position:relative; border:0; background:none; margin:1px; border-radius:7px; padding:0; container-type:size;
  display:grid; place-content:center; font-family:var(--font-mono); font-size:11.5px; line-height:1.12; color:var(--ink);
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none}
.cell:hover{background:var(--sunken)}
.cell.seld{background:color-mix(in oklab, var(--accent-soft) 70%, transparent)}
.cell.isoff{color:var(--ink3); font-family:var(--font-body); font-size:12px}
.cell.blank{color:var(--rule2)}
.cell.chg::after{content:""; position:absolute; top:3px; right:3px; width:7px; height:7px; border-radius:50%; background:var(--amber-dot)}
.cell .l1, .cell .l2{display:block; text-align:center; font-size:min(40cqh, 29cqw); letter-spacing:-.04em; line-height:1.1}
.cell .one{display:none}
/* a shift with a break: first start, a broken line, last end (the calendar shows the parts) */
.cell .brk{display:block; width:62%; height:2px; margin:1px auto; background:repeating-linear-gradient(to right, currentColor 0 3px, transparent 3px 6px); opacity:.6}
/* the first box of an empty week says where to start */
.cell.tapme{outline:2px dashed var(--accent); outline-offset:-3px; color:var(--accent); font-family:var(--font-body); font-weight:800; animation:tapme 1.6s ease-in-out infinite}
.cell.tapme .tn{font-size:min(42cqh, 36cqw)}
@keyframes tapme{50%{background:var(--accent-soft)}}
/* copying a box: hold it, then slide over others */
.cell.src{outline:2px solid var(--accent); outline-offset:-2px; background:var(--accent-soft)}
.cell.paint{background:color-mix(in oklab, var(--accent) 30%, transparent); outline:2px dashed var(--accent); outline-offset:-2px}
/* a finger on a box's text counts as on the box (its text is redrawn while it's dragged) */
.cell *, .blk *{pointer-events:none}
.addrow{grid-column:1 / -1; margin:8px 0 10px; min-height:40px; border:1px dashed var(--rule3); border-radius:10px; background:none;
  color:var(--accent); font-weight:700; font-size:14.5px}
.addrow:hover{background:var(--accent-soft)}
.rempty{grid-column:1 / -1; padding:18px 4px 2px; color:var(--ink2); font-size:14px; text-align:center}

/* the day bar: which day the calendar below shows */
.daybar{flex:none; display:flex; align-items:center; background:var(--sunken); border-top:1px solid var(--rule2); border-bottom:1px solid var(--rule);
  padding:0 var(--gr) 0 var(--gl); min-height:44px}
.daybar .navb{color:var(--ink); background:none; border:0}
.daybar .dt{flex:1; text-align:center; font-family:var(--font-head); font-weight:700; font-size:15.5px; white-space:nowrap}
.daybar .dt small{font-family:var(--font-body); font-weight:400; color:var(--ink3); font-size:13px}

/* the calendar: the picked day, hours down, a block per shift; beside the hours the sky, then how many are on */
.cal{flex:1; min-height:0; display:flex; flex-direction:column; background:var(--bg); padding:0 var(--gr) 0 var(--gl)}
.calbody{flex:1; min-height:0; position:relative; margin:4px 0 6px; overflow-y:auto; overflow-x:hidden; scrollbar-gutter:stable; overscroll-behavior:contain; scrollbar-width:thin}
.hl{position:absolute; right:0; border-top:1px solid var(--rule); pointer-events:none}
.hl.maj{border-top-color:var(--rule2)}
.ht{position:absolute; left:0; font-size:10.5px; color:var(--ink3); transform:translateY(-50%); line-height:1.1; font-family:var(--font-mono)}
.skys{position:absolute; border-radius:4px; pointer-events:none}
.cov{position:absolute; display:grid; place-items:center; font-size:10.5px; line-height:1; font-weight:700; color:var(--ink); font-family:var(--font-mono); border-radius:3px}
.blk{position:absolute; border:0; padding:3px 4px; text-align:left; overflow:hidden; border-radius:6px; touch-action:pan-y; cursor:grab;
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
  background:color-mix(in oklab, var(--pc) var(--pblock), var(--card)); border-left:3px solid var(--pc); color:var(--ink); font-size:11px; line-height:1.15}
.blk .bn{font-weight:800; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.blk .bt{font-family:var(--font-mono); font-size:10.5px; color:var(--ink2); display:block; white-space:nowrap}
.blk::before, .blk::after{content:""; position:absolute; left:50%; width:min(40%, 26px); transform:translateX(-50%); height:2px; border-radius:2px; background:var(--pc); opacity:.7}
.blk::before{top:2px} .blk::after{bottom:2px}
.blk.ro{cursor:pointer} .blk.ro::before, .blk.ro::after{display:none}
.blk.chg{outline:2px dashed var(--amber-dot); outline-offset:-2px}
.blk.drag{z-index:2; cursor:grabbing; box-shadow:0 3px 12px rgba(0,0,0,.28)}
.calempty{position:absolute; display:grid; place-items:center; text-align:center; color:var(--ink3); font-size:13.5px; pointer-events:none}

/* the bar at the bottom: what's next for the week */
.bar{flex:none; display:flex; align-items:center; gap:8px; background:var(--card); border-top:1px solid var(--rule);
  padding:8px var(--gr) calc(8px + env(safe-area-inset-bottom, 0px)) var(--gl); min-height:60px}
.bar .saved{font-size:12.5px; color:var(--ink3)}
.bar .push{margin-left:auto}
.sch .bar .btn, .sch .big{min-height:44px; padding:0 16px; border-radius:10px; font-weight:700; font-size:14.5px}
.status{font-size:13px; color:var(--ink2); text-align:right; line-height:1.25}
.status b{display:block; color:var(--ink)}

/* signing in (on the sample: pretend cards) */
.scan{flex:1; display:grid; place-content:center; justify-items:center; gap:14px; text-align:center; padding:24px var(--gr) 24px var(--gl)}
.scan h1{margin:0; font-family:var(--font-head); font-size:24px}
.scan p{margin:0; color:var(--ink2); max-width:34ch}
.scan .mk{font-size:11.5px; color:var(--amber); background:var(--amber-soft); border-radius:999px; padding:3px 10px; font-weight:700}
.scan select{max-width:300px}
.scan .big{width:min(300px, 100%)}
.scan .serr{color:var(--flag); font-weight:700; font-size:14px; max-width:34ch}
.scan .serr:empty{display:none}
.scanv{width:min(320px, 100%); aspect-ratio:4/3; border-radius:12px; background:#000; object-fit:cover}
.scanv[hidden]{display:none}
.pform{display:grid; gap:10px; width:min(300px, 100%)}
.pform .pcode{font-size:16px; padding:11px 12px; text-align:center}
.ttrow{display:grid !important; gap:1px}
.ttrow small{color:var(--ink3); font-size:13px}

/* HR's list of weeks */
.hrl{flex:1; min-height:0; overflow:auto; padding:0 var(--gr) 16px var(--gl)}
.hrl h3{position:sticky; top:0; margin:0; padding:12px 0 6px; background:var(--bg); font-size:14px; color:var(--ink2)}
.hrl .none{color:var(--ink2); padding:30px 4px; text-align:center}
.wkrow{display:grid; grid-template-columns:4px minmax(0,1fr) auto; gap:10px; align-items:center; width:100%; text-align:left;
  background:var(--card); border:1px solid var(--rule); border-radius:12px; padding:10px 12px 10px 0; margin-bottom:6px; overflow:hidden}
.wkrow .bar4{align-self:stretch; background:var(--bc)}
.wkrow b{font-family:var(--font-head); font-size:15.5px; display:block}
.wkrow small{color:var(--ink3); font-size:12.5px}
.wkrow .st{font-size:12px; font-weight:700; border-radius:999px; padding:3px 9px; background:var(--slate-soft); color:var(--slate)}
.wkrow .st.chg{background:var(--amber-soft); color:var(--amber)}
.wkrow .st.ok{background:var(--accent-soft); color:var(--accent)}
.wkrow .st.back{background:var(--flag-soft); color:var(--flag)}

/* inside the dialogs */
.sx{display:grid; gap:10px}
.sx .info{font-size:13.5px; color:var(--ink2); background:var(--sunken); border-radius:10px; padding:8px 11px}
.sx .sum{font-size:14px} .sx .sum b{font-family:var(--font-mono)}
.sx .plab{font-size:12px; color:var(--ink3); font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin-top:4px}
.pchips{display:flex; flex-wrap:wrap; gap:7px}
.pchips button{min-height:38px; padding:4px 12px; border:1px solid var(--rule2); border-radius:999px; background:var(--card); font-weight:700}
.pchips button:disabled{opacity:.45; cursor:default}
.pchips button[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--accent-on)}
.pchips.wks{display:grid}
.pchips.wks button{border-radius:12px; text-align:left; padding:8px 14px; font-weight:400}
.smenu{display:grid}
.smenu button{width:100%; text-align:left; border:0; border-bottom:1px solid var(--rule); background:none; padding:12px 4px; font-size:15px}
.sx .acts{display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap}
.chgrow{display:grid; gap:1px; padding:8px 0; border-bottom:1px solid var(--rule); font-size:14px}
.chgrow .m{font-size:12.5px; color:var(--ink3)}
.chgrow s{color:var(--ink3)}
/* a shift's times: the phone's own time picker in each box */
.times{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.tbox{display:grid; gap:0; border:1px solid var(--rule2); border-radius:12px; padding:6px 10px; cursor:pointer; min-width:0}
.tbox small{font-size:12.5px; color:var(--ink3)}
.tbox input{border:0; background:none; color:var(--ink); font-family:var(--font-mono); font-size:18px; font-weight:600; padding:0; min-height:34px; letter-spacing:-.02em; width:100%; min-width:0; box-shadow:none}
.tbox:focus-within{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent)}
/* on a touch screen a tap anywhere opens the picker, so the clock icon goes: AM or PM must always show */
@media (pointer:coarse){ .tbox input::-webkit-calendar-picker-indicator{display:none} }
@media (max-width:340px){ .tbox input{font-size:16.5px} }
.times.dim .tbox{opacity:.4}
/* a break in the shift: the second part under the first */
.part2{display:grid; gap:4px} .part2[hidden], .addbrk[hidden]{display:none}
.brkh{display:flex; align-items:center; justify-content:space-between; font-size:13px; color:var(--ink3); padding:0 2px}
.brkx{border:0; background:none; color:var(--ink3); font-size:20px; min-width:40px; min-height:32px}
.addbrk{justify-self:start; border:0; background:none; color:var(--accent); font-weight:700; font-size:14px; padding:4px 2px; min-height:36px}
.half{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.half .btn[aria-pressed="true"]{background:var(--accent-soft); border-color:var(--accent); color:var(--accent)}
/* the picture for the group chat */
.gcpic{width:100%; height:auto; border:1px solid var(--rule); border-radius:8px; display:block; max-height:52vh; object-fit:contain; background:#fff}

/* a computer: roomier, one line per cell */
@media (min-width:760px){
  :root{ --namew:150px; --rowh:34px; --headh:36px }
  .cell .l1, .cell .l2, .cell .brk{display:none} .cell .one{display:block}
  .cell .one{white-space:nowrap; letter-spacing:-.03em; font-size:min(15px, 52cqh, 12.5cqw)}
  .cell.brkn .one{font-size:min(13px, 40cqh, 11cqw)}
  .dayb{grid-auto-flow:column; gap:5px; align-items:baseline}
  .dayb .dn{font-size:12px} .dayb .dd{font-size:15px}
  .who .pn{font-size:14.5px}
  .ht{font-size:11px} .blk{font-size:12px} .blk .bt{font-size:11.5px}
}
@media (max-width:340px){ :root{ --namew:56px } .who .pn{font-size:13px} .cell{font-size:11px} #topin .wchip{font-size:11px; padding:3px 7px} .wk .wd{font-size:16px} .daybar .dt{font-size:14.5px} }

/* ================= the Lab (sample data only) ================= */
body.slab{min-height:100vh}
.slab main{max-width:1500px}
.slab .labbar{display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; padding:12px 14px; margin-bottom:14px}
.slab .lgroup{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.slab .lh{font-weight:700; font-size:13px; color:var(--ink2)}
.slab .labgrid{display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; align-items:start}
.slab .colhead{font-weight:700; font-size:13.5px; margin:0 0 6px; color:var(--ink2)}
.slab .colhead a{font-weight:400; margin-left:8px; font-size:12.5px}
.slab .phone{width:376px; height:690px; border:8px solid #1b2124; border-radius:28px; overflow:hidden; background:#000; box-shadow:var(--shadow)}
.slab .phone iframe, .slab .hrframe{width:100%; height:100%; border:0; display:block; background:var(--bg)}
.slab .hrframe{height:690px; border:1px solid var(--rule); border-radius:12px}
.slab select{width:auto}
@media (max-width:960px){ .slab .labgrid{grid-template-columns:minmax(0,1fr)} .slab .phone{margin:0 auto} }