/* Layout: one quiet column — serif title and status numbers, then days (date line on top, full-width reel rows: client | face, operator & editor | status; days set apart by space and a strong rule), client tallies; each tap target opens its own bottom sheet */
:root{
  --bg:#FFFFFF; --ink:#111111; --mut:#737373; --line:#E8E8E8; --soft:#F5F5F5;
  --warn:#C2410C; --scrim:rgba(0,0,0,.35);
  --c-market:#1E9A58; --c-oil:#DD7712; --c-telefon:#D42A40; --c-baxmal:#7B42C6; --c-luxdent:#A9852C; --c-vedrink:#2C6BDB; --c-hobby:#0E8C80; --c-oprom:#C1357F;
  --st-rej:#A3A3A3; --st-syo:#2F6FD6; --st-mon:#7445E0; --st-tay:#B86E00; --st-tas:#15803D; --st-qoy:#BE185D;
  --f-title:"Lora", Georgia, "Times New Roman", serif;
  --f:"Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#111214; --ink:#F2F2F2; --mut:#9A9A9A; --line:#2A2B2E; --soft:#1B1C1F;
    --warn:#FB923C; --scrim:rgba(0,0,0,.6);
    --c-market:#3CC27C; --c-oil:#F59A45; --c-telefon:#F25C70; --c-baxmal:#A67CEB; --c-luxdent:#D6B25E; --c-vedrink:#5E9BFF; --c-hobby:#2EC4B2; --c-oprom:#F06AAE;
    --st-rej:#6F6F6F; --st-syo:#7DB0FF; --st-mon:#B9A3FF; --st-tay:#F2B33D; --st-tas:#4ADE80; --st-qoy:#F472B6;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#111214; --ink:#F2F2F2; --mut:#9A9A9A; --line:#2A2B2E; --soft:#1B1C1F;
  --warn:#FB923C; --scrim:rgba(0,0,0,.6);
  --c-market:#3CC27C; --c-oil:#F59A45; --c-telefon:#F25C70; --c-baxmal:#A67CEB; --c-luxdent:#D6B25E; --c-vedrink:#5E9BFF; --c-hobby:#2EC4B2; --c-oprom:#F06AAE;
  --st-rej:#6F6F6F; --st-syo:#7DB0FF; --st-mon:#B9A3FF; --st-tay:#F2B33D; --st-tas:#4ADE80; --st-qoy:#F472B6;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{
  background:var(--bg); color:var(--ink); font-family:var(--f); font-size:14px; line-height:1.45;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
  padding-block:26px 48px;
}
[data-s="rej"]{--st:var(--st-rej)}
[data-s="syo"]{--st:var(--st-syo)}
[data-s="mon"]{--st:var(--st-mon)}
[data-s="tay"]{--st:var(--st-tay)}
[data-s="tas"]{--st:var(--st-tas)}
[data-s="qoy"]{--st:var(--st-qoy)}
.wrap{max-width:640px; margin:0 auto; display:grid; gap:0}
p{margin:0}
h1{font:600 30px/1.1 var(--f-title); margin:0; text-wrap:balance}
.sub{color:var(--mut); font-size:13px; margin-top:6px}

.nums{display:flex; flex-wrap:wrap; gap:14px 20px; padding:14px 0; margin-top:22px; border-top:1px solid var(--ink); border-bottom:1px solid var(--line)}
.num b{display:block; font:500 24px/1 var(--f-title); font-variant-numeric:tabular-nums}
.num span{font-size:11px; color:var(--mut)}
.num.main b{color:var(--st-tas)}
.pace{font-size:12px; color:var(--mut); margin-top:10px}
.late{font-size:12px; color:var(--warn); font-weight:600; margin-top:4px}

.h2{font:600 12px/1 var(--f); text-transform:uppercase; letter-spacing:.1em; color:var(--mut); margin:28px 0 8px}
.days{display:grid; gap:34px}
.day{display:grid; gap:2px; border-top:2px solid var(--ink)}
.dh{position:relative; display:flex; align-items:baseline; justify-content:center; flex-wrap:wrap; gap:4px 10px; padding:12px 0 12px}
.dh::after{content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:min(220px, 40%); height:1.5px; border-radius:1px; background:color-mix(in srgb, var(--ink) 40%, transparent)}
.dh b{font:500 24px/1 var(--f-title); font-variant-numeric:tabular-nums}
.dh .wd{font-size:12px; color:var(--mut)}
.dh .tdy{font-size:12px; font-weight:600}
.dh .dc{display:none}
.dh .dc.late{color:var(--warn); font-weight:600}
.dh .dc.ok{color:var(--st-tas); font-weight:600}
.day.today .dh b{text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1.5px}
.rows{display:grid; min-width:0}
.note{color:var(--mut); font-size:13px}

.reel{display:grid; grid-template-columns:minmax(0,1fr) 96px 104px; align-items:center; gap:8px; min-height:50px; padding:10px 0; border-top:1px solid var(--line)}
.rows .reel:first-child{border-top:0}
.who-btn,.st-btn,.cb{border:0; background:transparent; color:var(--ink); font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent}
.who-btn:disabled,.st-btn:disabled,.cb:disabled{cursor:default}
.who-btn{display:flex; align-items:center; gap:9px; min-width:0; padding:5px 0; text-align:left}
.wt{display:grid; gap:2px; min-width:0}
.wn{font:600 12.5px/1.25 var(--f); text-transform:uppercase; letter-spacing:.02em; overflow-wrap:anywhere}
.wr{font-size:12px; line-height:1.3; color:var(--mut); overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow-wrap:anywhere}
.crew{display:grid; gap:6px}
.cb{display:flex; align-items:center; gap:5px; min-width:0; padding:0; font-size:11.5px; line-height:1.2; text-align:left}
.cv{overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow-wrap:anywhere}
.cb svg{width:13px; height:13px; flex:none; color:var(--mut)}
.cb.empty .cv{color:var(--mut)}
.st-btn{padding:10px 0 10px 2px; justify-self:end}
.dot{width:8px; height:8px; border-radius:50%; background:var(--c); flex:none}
.mk{width:22px; height:22px; flex:none; display:grid; place-items:center}
.mk img{width:22px; height:22px; border-radius:50%; display:block; box-shadow:0 0 0 1px var(--line)}
.client .mk,.client .mk img{width:20px; height:20px}
.stitle .mk,.stitle .mk img{width:30px; height:30px}
.sb{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:var(--st); white-space:nowrap}
.sb::before{content:""; width:7px; height:7px; border-radius:50%; border:1.5px solid currentColor}
.reel[data-s="tas"] .sb::before,.reel[data-s="qoy"] .sb::before{background:currentColor}

.client{display:grid; grid-template-columns:minmax(0,9rem) minmax(0,1fr) 2.8rem; gap:10px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line); font-size:13px}
.cname{display:flex; align-items:center; gap:8px; min-width:0}
.cname span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bar{height:3px; background:var(--line); display:flex}
.bar i{display:block; height:100%; width:0}
.bar .b-t{background:var(--ink)}
.bar .b-p{background:var(--mut); opacity:.45}
.count{font-size:12px; color:var(--mut); text-align:right; font-variant-numeric:tabular-nums}

.foot{display:grid; gap:4px; color:var(--mut); font-size:12px; margin-top:24px}
.sync{color:var(--ink)}
.sync.warn{color:var(--warn)}

.scrim{position:fixed; inset:0; background:var(--scrim); z-index:20}
.sheet{position:fixed; left:0; right:0; bottom:0; z-index:21; background:var(--bg); border-top:1px solid var(--line); border-radius:16px 16px 0 0;
  padding-top:18px; padding-bottom:calc(18px + env(safe-area-inset-bottom, 0px));
  padding-left:max(18px, env(safe-area-inset-left, 0px)); padding-right:max(18px, env(safe-area-inset-right, 0px));
  display:grid; grid-template-columns:minmax(0,1fr); gap:12px; max-width:560px; margin:0 auto; max-height:88vh; overflow-y:auto; box-shadow:0 -8px 24px rgba(0,0,0,.12)}
.shead{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.stitle{font:600 22px/1.15 var(--f-title); display:flex; align-items:center; gap:9px}
.ssub{font-size:12px; color:var(--mut); margin-top:4px}
.close{border:1px solid var(--line); background:transparent; color:var(--ink); font:500 13px/1 var(--f); padding:9px 12px; border-radius:99px; cursor:pointer}
.opts{display:grid; border-top:1px solid var(--line)}
.opt{display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:48px; padding:0 2px; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--ink); font:400 15px/1 var(--f); text-align:left; cursor:pointer}
.opt .lab{display:flex; align-items:center; gap:10px}
.opt .lab::before{content:""; width:9px; height:9px; border-radius:50%; border:1.5px solid var(--st)}
.opt[data-s="tas"] .lab::before,.opt[data-s="qoy"] .lab::before{background:var(--st)}
.opt.pk .lab::before{display:none}
.opt .who{font-size:11px; color:var(--mut)}
.opt[aria-checked="true"]{font-weight:600}
/* The chosen option, and status stages already passed, carry a check mark */
.opt[aria-checked="true"] .who::after,.opt.passed .who::after{content:"✓"; font-size:15px; font-weight:600; color:var(--ink)}
.opt.passed[data-s] .who::after,.opt[data-s][aria-checked="true"] .who::after{color:var(--st)}
.opt:disabled{opacity:.35; cursor:default}
.hint{font-size:12px; color:var(--mut)}
.flab{font:600 12px/1 var(--f); text-transform:uppercase; letter-spacing:.1em; color:var(--mut); margin-top:4px}
.tin{width:100%; min-width:0; font:400 16px/1.2 var(--f); color:var(--ink); background:var(--soft); border:1px solid var(--line); border-radius:10px; padding:11px 12px}
.tin::placeholder{color:var(--mut)}
.save{border:0; background:var(--ink); color:var(--bg); font:600 14px/1 var(--f); min-height:44px; border-radius:10px; cursor:pointer}
.mv{display:grid; gap:8px; padding-top:6px}
.mvh{font:600 12px/1 var(--f); text-transform:uppercase; letter-spacing:.1em; color:var(--mut)}
.mvgrid{display:grid; grid-template-columns:repeat(auto-fill, minmax(52px, 1fr)); gap:6px}
.dbtn{display:grid; gap:3px; justify-items:center; padding:8px 4px; border-radius:10px; border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer; font:inherit; -webkit-tap-highlight-color:transparent}
.dbtn b{font:500 16px/1 var(--f-title); font-variant-numeric:tabular-nums}
.dbtn span{font-size:10px; color:var(--mut)}
.dbtn.orig b{text-decoration:underline; text-underline-offset:3px}
.dbtn[aria-pressed="true"]{border-color:var(--ink); background:var(--soft)}
.who-btn:focus-visible,.st-btn:focus-visible,.cb:focus-visible,.opt:focus-visible,.close:focus-visible,.dbtn:focus-visible,.save:focus-visible,.tin:focus-visible{outline:2px solid var(--ink); outline-offset:2px}

@media (max-width:380px){
  .reel{grid-template-columns:minmax(0,1fr) 84px 94px; gap:6px}
  .wn{font-size:11.5px; letter-spacing:0}
  .sb{font-size:11px}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
}

/* Site additions: sign-in bar, notices, team list, change history */
.who-bar{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:12.5px; color:var(--mut); margin-bottom:18px; min-height:32px}
.who-bar b{color:var(--ink); font-weight:600}
.linkbtn{border:0; background:transparent; color:var(--ink); text-decoration:underline; text-underline-offset:3px; font:inherit; padding:4px 0; cursor:pointer}
.notice{font-size:13px; padding:10px 12px; border-radius:10px; background:var(--soft); border:1px solid var(--line); margin-top:12px}
.notice.warn{color:var(--warn)}
.toast{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:40; background:var(--ink); color:var(--bg); font-size:13px; padding:10px 14px; border-radius:10px; max-width:calc(100% - 32px); box-shadow:0 6px 20px rgba(0,0,0,.25)}
.mrow{display:grid; gap:8px; padding:10px 0; border-bottom:1px solid var(--line)}
.mrow .mn{display:grid; gap:2px; min-width:0}
.mrow .mn b{font-weight:600; overflow-wrap:anywhere}
.mrow .mn span{font-size:12px; color:var(--mut)}
.mrole{display:flex; gap:6px; flex-wrap:wrap}
.mrole:empty{display:none}
.mrole button{border:1px solid var(--line); background:transparent; color:var(--ink); font:500 12px/1 var(--f); padding:7px 9px; border-radius:99px; cursor:pointer}
.mrole button[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.hist{display:grid; gap:4px; font-size:12px; color:var(--mut)}
.hist b{color:var(--ink); font-weight:500}
.mrole button:focus-visible,.linkbtn:focus-visible{outline:2px solid var(--ink); outline-offset:2px}

/* Team sheet: group block, labels, warnings; a reel opened from a bot message is marked briefly */
.tgroup{display:grid; gap:8px; padding:4px 0 12px; border-bottom:1px solid var(--line)}
.mlab{font:600 11px/1 var(--f); text-transform:uppercase; letter-spacing:.08em; color:var(--mut); margin-top:2px}
.mrow .mn .mwarn{color:var(--warn); font-weight:500}
.mrole button:disabled{opacity:.5; cursor:default}
.reel.flash{animation:flash 2.6s ease-out}
@keyframes flash{0%,45%{background:var(--soft); box-shadow:0 0 0 8px var(--soft)} 100%{background:transparent; box-shadow:0 0 0 8px transparent}}

/* Workload: month or one day, per operator / editor / face */
.load{margin-top:24px; border-top:1px solid var(--line)}
.load > summary{list-style:none; cursor:pointer; display:grid; gap:4px; padding:14px 0 10px; -webkit-tap-highlight-color:transparent}
.load > summary::-webkit-details-marker{display:none}
.lh{font:600 12px/1 var(--f); text-transform:uppercase; letter-spacing:.1em; color:var(--mut)}
.lh::after{content:"  ▸"}
.load[open] .lh::after{content:"  ▾"}
.lsum{font-size:12px; color:var(--ink)}
.load > summary:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.lctl{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:2px 0 10px}
.lctl select{font:500 13px/1.2 var(--f); color:var(--ink); background:var(--soft); border:1px solid var(--line); border-radius:99px; padding:8px 12px; max-width:100%}
.seg{display:inline-flex; border:1px solid var(--line); border-radius:99px; overflow:hidden}
.seg button{border:0; background:transparent; color:var(--ink); font:500 12.5px/1 var(--f); padding:9px 13px; cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--ink); color:var(--bg)}
.seg button:focus-visible,.lctl select:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
#loadDays{margin-bottom:6px}
.lgrp{font:600 11px/1 var(--f); text-transform:uppercase; letter-spacing:.08em; color:var(--mut); margin:16px 0 2px}
.lrow{display:grid; grid-template-columns:minmax(0,6.5rem) minmax(0,1fr) auto; gap:10px; align-items:center; padding:9px 0 3px}
.lrow .ln{font-weight:600; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lrow .ln.none{color:var(--warn)}
.lrow .lc{font-size:12px; color:var(--mut); text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
.lrow .lc b{color:var(--ink); font-weight:600}
.lsub{font-size:11.5px; line-height:1.4; color:var(--mut); padding:0 0 9px; border-bottom:1px solid var(--line)}
.lrow.solo{padding-bottom:9px; border-bottom:1px solid var(--line)}
.prow{display:grid; grid-template-columns:minmax(0,7rem) minmax(0,1fr); gap:10px; align-items:start; padding:10px 0; border-bottom:1px solid var(--line)}
.prow .ln{font-weight:600; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.prow .ln.none{color:var(--warn)}
.proles{display:grid; gap:4px}
.prole{display:flex; align-items:baseline; gap:8px; font-size:13px}
.prole span:first-child{min-width:4.6rem; color:var(--mut)}
.prole b{font-weight:600; font-variant-numeric:tabular-nums}
.prole .pd{font-size:11.5px; color:var(--st-tas)}
/* Days header: title and the all / one-day switch on one line */
.dhead{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:28px 0 8px}
.dhead .h2{margin:0}
#daysPick{margin-bottom:14px}
/* Face sheet: tick several people; add a name that is not in the list */
.fadd{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center}