:root{--bg:#f6f7f9;--fg:#1d2330;--mut:#667085;--card:#fff;--line:#e3e6ec;--acc:#2f6fed;--heat:47,111,237;
--catbg:#eef1f7}
@media (prefers-color-scheme:dark){:root{--bg:#12151b;--fg:#e6e9ef;--mut:#98a1b3;--card:#1a1f28;--line:#2a313d;--acc:#6b9bff;--heat:107,155,255;--catbg:#212835}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.4 system-ui,sans-serif}
header{padding:14px 16px 0}
.htop{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
#span-summary{color:var(--mut);font-size:12.5px;margin-top:4px;min-height:1.2em}
h1{font-size:18px;margin:0}
#weeks{display:flex;gap:6px;flex-wrap:wrap}
.chip{background:var(--card);border:1px solid var(--line);border-radius:99px;padding:2px 4px 2px 10px;font-size:12px;display:flex;align-items:center;gap:4px}
.chip button{border:0;background:none;color:var(--mut);cursor:pointer;font-size:14px;padding:0 4px}
.chip button:hover{color:var(--fg)}
#drop{margin:12px 16px;border:2px dashed var(--line);border-radius:12px;padding:22px;text-align:center;cursor:pointer;display:flex;flex-direction:column;gap:4px;color:var(--mut);background:var(--card)}
#drop strong{color:var(--fg);font-size:16px}
#drop.over{border-color:var(--acc);background:rgba(var(--heat),.08)}
body.has-data #drop{padding:8px;flex-direction:row;justify-content:center;gap:10px}
body.has-data #drop strong{font-size:13px}
#messages{margin:0 16px}
.msg{background:#fff4e5;color:#7a4b00;border:1px solid #ffd59a;border-radius:8px;padding:6px 10px;margin:6px 0;font-size:13px}
#toolbar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:6px 16px}
#toolbar[hidden]{display:none}
#toolbar label{display:flex;gap:6px;align-items:center;color:var(--mut)}
#toolbar label[hidden]{display:none}
select,input[type=search]{font:inherit;padding:4px 8px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--fg)}
#summary{color:var(--mut);margin-left:auto}
#matrix{overflow:auto;max-height:calc(100vh - 190px);margin:0 16px 16px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
table{border-collapse:separate;border-spacing:0}
th,td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:0;text-align:center}
td.c{min-width:30px;height:28px;font-variant-numeric:tabular-nums;cursor:default}
td.c.on{cursor:pointer}
td.c.hl{outline:2px solid var(--acc);outline-offset:-2px}
tr.hl-row>td,tr.hl-row>th.sub{box-shadow:inset 0 0 0 9999px rgba(var(--heat),.10)}
.hl-col{box-shadow:inset 0 0 0 9999px rgba(var(--heat),.10)}
tr.hl-row>.hl-col{box-shadow:inset 0 0 0 9999px rgba(var(--heat),.22)}
th.p.hl-col span,th.sub.hl-col{color:var(--acc)}
thead th{position:sticky;top:0;background:var(--card);z-index:3;height:110px;vertical-align:bottom}
thead th.p{padding:6px 0}
thead th.p span{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;display:inline-block;font-weight:500;cursor:default}
th.cat,th.sub{position:sticky;background:var(--catbg);text-align:left;padding:4px 10px;font-weight:600;z-index:2;white-space:nowrap}
th.cat{left:0;min-width:150px;vertical-align:top}
th.sub{left:150px;min-width:70px;font-weight:500;color:var(--mut);cursor:pointer}
th.sub:hover,th.cat:hover{color:var(--acc)}
thead th.cat,thead th.sub{z-index:4}
tr.tot td,tr.tot th{background:var(--catbg);font-weight:600}
tr.tot th{position:sticky;top:110px;z-index:2}
#tip{position:fixed;z-index:20;max-width:420px;max-height:70vh;overflow:auto;background:#151a24;color:#eef1f7;border-radius:8px;padding:10px 12px;font-size:12.5px;box-shadow:0 8px 28px rgba(0,0,0,.35);pointer-events:none}
#tip.pin{pointer-events:auto;outline:2px solid var(--acc)}
#tip h3{margin:0 0 2px;font-size:13.5px}
#tip .sub{color:#9aa4b8;margin-bottom:6px}
#tip .row{display:grid;grid-template-columns:auto 1fr;gap:0 10px;padding:2px 0;border-top:1px solid #2a3242}
#tip .d{color:#9db8ff;white-space:nowrap}
#tip .w{color:#cdd3df}
#tip .r{color:#f2c879}
#tip .n{color:#9aa4b8}
#tip .hint{color:#7d8799;margin-top:6px;font-size:11.5px}

/* ---------- view tabs ---------- */
#views{display:flex;gap:4px;margin-left:auto}
#views button{font:inherit;padding:5px 12px;border:1px solid var(--line);border-radius:99px;background:var(--card);color:var(--mut);cursor:pointer}
#views button.on{background:var(--acc);border-color:var(--acc);color:#fff}
.view{margin:0 16px 16px}
.viewbar{display:flex;align-items:center;gap:10px;padding:6px 0}
.viewbar strong{min-width:180px;text-align:center}
button.nav{font:inherit;padding:4px 10px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--fg);cursor:pointer}
button.nav:disabled{opacity:.35;cursor:default}
button.small{font:inherit;padding:4px 10px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--fg);cursor:pointer;font-size:12px}
button.small:hover{border-color:var(--acc);color:var(--acc)}
#export{display:flex;gap:6px}

/* ---------- week view ---------- */
#week{overflow:auto;max-height:calc(100vh - 230px);border:1px solid var(--line);border-radius:10px;background:var(--card)}
table.wk th,table.wk td{vertical-align:top}
table.wk thead th{position:sticky;top:0;background:var(--card);z-index:2;height:auto;padding:8px 6px}
table.wk thead th.today{color:var(--acc)}
table.wk td.wc{min-width:130px;padding:4px;text-align:left}
table.wk td.wc.today{background:rgba(var(--heat),.06)}
.tag{display:block;font-size:12px;padding:2px 6px;margin:2px 0;background:var(--catbg);border-radius:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tag i{color:var(--mut);font-style:normal;font-size:11px}
.tag.clash{box-shadow:inset 0 0 0 1px #e0a100}
.tag .cl{color:#b37a00;font-style:normal;font-size:11px;margin-left:3px}
#report-notice{margin:0 0 8px;padding:6px 10px;border:1px solid var(--line);border-left:3px solid var(--acc);border-radius:8px;background:var(--card);font-size:12.5px;color:var(--mut);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#report-notice[hidden]{display:none}
#report-notice b{color:var(--fg);font-weight:600}
#report-notice button{margin-left:auto}
#week-clashes{margin:0 0 8px;padding:6px 10px;border:1px solid var(--line);border-left:3px solid #e0a100;border-radius:8px;background:var(--card);font-size:12.5px;color:var(--mut)}
#week-clashes b{color:var(--fg);font-weight:600}
#week-clashes div{margin-top:2px}

/* ---------- month view ---------- */
table.cal{width:100%;table-layout:fixed;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card)}
table.cal th{background:var(--catbg);padding:6px;font-weight:600;font-size:12px}
table.cal td{height:84px;vertical-align:top;padding:6px;cursor:default}
table.cal td.day{cursor:pointer}
table.cal td.day:hover{background:rgba(var(--heat),.06)}
table.cal td.today .dn{color:#fff;background:var(--acc);border-radius:99px;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center}
table.cal .dn{font-size:12px;color:var(--mut);font-weight:600}
table.cal .cnt{font-size:20px;font-weight:700;line-height:1.3}
table.cal .dots{display:flex;gap:3px;flex-wrap:wrap;margin-top:2px}
.dot{width:8px;height:8px;border-radius:99px;display:inline-block;margin-right:5px;vertical-align:middle}
table.cal .dot{width:7px;height:7px;margin-right:0}
#daytip{position:fixed;z-index:20;max-width:420px;max-height:60vh;overflow:auto;background:#151a24;color:#eef1f7;border-radius:8px;padding:10px 12px;font-size:12.5px;box-shadow:0 8px 28px rgba(0,0,0,.35)}
#daytip h3{margin:0 0 8px;font-size:13.5px}
#daytip .daycat{margin-bottom:8px}
#daytip .daycat:last-child{margin-bottom:0}
#daytip .daycat>b{display:block;color:#f2c879;font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;margin-bottom:2px}
#daytip .row{display:grid;grid-template-columns:90px 1fr;gap:0 10px;padding:2px 0}
#daytip .row.plain{grid-template-columns:1fr}
#daytip .r{color:#9db8ff;white-space:nowrap}
#daytip .w{color:#cdd3df;line-height:1.5}
#daytip i{color:#8890a0;font-style:normal}

/* ---------- person view ---------- */
.viewbar input[type=search]{width:260px}
#person{display:flex;gap:14px;overflow-x:auto;padding-bottom:6px;align-items:flex-start}
.pcol{flex:0 0 420px;width:420px;max-height:calc(100vh - 230px);overflow-y:auto;scroll-snap-align:start}
#person{scroll-snap-type:x proximity}
.pcol .pclose{position:sticky;top:0;float:right;border:0;background:var(--card);color:var(--mut);cursor:pointer;font-size:16px;padding:2px 6px;border-radius:6px;z-index:1}
.pcol .pclose:hover{color:var(--fg);background:var(--catbg)}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:14px}
.pcard h2{margin:0 0 10px;font-size:17px}
.pcard .stats{display:flex;gap:26px;margin-bottom:10px}
.pcard .stats div{display:flex;flex-direction:column}
.pcard .stats b{font-size:22px;line-height:1.2}
.pcard .stats span{color:var(--mut);font-size:11.5px}
.pcard .roles{display:flex;gap:6px;flex-wrap:wrap}
.rchip{background:var(--catbg);border-radius:99px;padding:3px 10px 3px 8px;font-size:12px;display:inline-flex;align-items:center}
.heatmap{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:14px;overflow:auto}
.hmrow{display:flex;align-items:center;gap:3px}
.hmd{width:22px;font-size:10px;color:var(--mut)}
.hmcell{width:11px;height:11px;border-radius:2px;background:var(--catbg);display:inline-block}
.hmcell.on{background:var(--acc)}
.plist{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.prow{display:grid;grid-template-columns:64px 200px 1fr;gap:10px;padding:6px 12px;border-bottom:1px solid var(--line);font-size:13px;align-items:center}
.prow:last-child{border-bottom:0}
.prow .d{color:var(--mut);white-space:nowrap}
.prow .r{display:flex;align-items:center}
.prow i{color:var(--mut);font-style:normal}
#person .empty,#week .empty,#together .empty,#matrix .empty{color:var(--mut);padding:30px;text-align:center}
#together{overflow:auto;max-height:calc(100vh - 200px);border:1px solid var(--line);border-radius:10px;background:var(--card)}
#together-summary{color:var(--mut);font-size:12.5px}
#together tbody th.cat{vertical-align:middle;font-weight:500}
#together td.self{background:var(--catbg)}
#together .g2{border-left:2px solid var(--mut)}
#together tr.g2>*{border-top:2px solid var(--mut)}

/* ---------- report view ---------- */
.report-layout{display:flex;gap:16px;align-items:flex-start}
.report-side{flex:0 0 260px;display:flex;flex-direction:column;gap:14px}
.report-block{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.report-block h3{margin:0 0 6px;font-size:13px;color:var(--mut);text-transform:uppercase;letter-spacing:.03em}
.report-search{width:100%;font:inherit;padding:4px 8px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--fg);margin-bottom:6px}
.report-actions{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.report-list{max-height:260px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.report-list label{display:flex;gap:6px;align-items:center;font-size:12.5px;padding:2px 4px;border-radius:4px;cursor:pointer}
.report-list label:hover{background:var(--catbg)}
.report-list .rl-cat{font-size:11px;color:var(--mut);text-transform:uppercase;margin:6px 0 1px;padding:0 4px}
.switch-row{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--mut);margin-top:8px;padding-top:8px;border-top:1px solid var(--line);cursor:pointer}
.switch-row+.switch-row{margin-top:4px;padding-top:0;border-top:0}
#rep-merges{display:flex;flex-direction:column;gap:4px;margin-bottom:6px}
.merge-chip{display:flex;align-items:center;gap:6px;background:var(--catbg);border-radius:6px;padding:4px 6px;font-size:12px}
.merge-chip b{flex:1}
.merge-chip span{color:var(--mut)}
.merge-chip button{border:0;background:none;color:var(--mut);cursor:pointer;font-size:13px}
.merge-chip button:hover{color:var(--fg)}
.saved-chip{display:flex;align-items:center;gap:6px;background:var(--catbg);border-radius:6px;padding:4px 6px;font-size:12px;margin-bottom:4px}
.saved-chip b{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.saved-chip button{border:1px solid var(--line);background:var(--card);color:var(--fg);cursor:pointer;font-size:11px;border-radius:4px;padding:2px 6px}
.saved-chip button:hover{border-color:var(--acc);color:var(--acc)}
.saved-chip button[data-del]{border:0;background:none;color:var(--mut);padding:2px 4px}
.saved-chip button[data-del]:hover{color:var(--fg)}
#rep-merge-start{width:100%}
#settings-btn{margin-left:auto}
#settings-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:29}
#settings{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:30;width:380px;max-width:calc(100vw - 32px);max-height:80vh;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px;box-shadow:0 12px 40px rgba(0,0,0,.35)}
#settings h3{margin:0 0 4px;font-size:15px}
#settings-names{margin-bottom:10px}
#settings-names .empty{padding:4px 0;text-align:left}
#settings .saved-chip i{color:var(--mut);font-style:normal;font-size:11px}
#rep-wizard-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:29}
#rep-wizard{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:30;width:340px;max-width:calc(100vw - 32px);max-height:80vh;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px;box-shadow:0 12px 40px rgba(0,0,0,.35)}
#rep-wizard h3{margin:0 0 4px;font-size:15px}
.wizard-hint{margin:0 0 10px;font-size:12px;color:var(--mut)}
#rep-wizard-name{width:100%;font:inherit;padding:4px 8px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--fg);margin-bottom:8px}
.report-main{flex:1;min-width:0}
.report-summary{color:var(--mut);font-size:12.5px;margin-bottom:8px}
#report-table{overflow:auto;max-height:calc(100vh - 260px);border:1px solid var(--line);border-radius:10px;background:var(--card);margin-bottom:10px}
#report-table table{width:auto}
#report-table th,#report-table td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:6px 10px;text-align:center;white-space:nowrap}
#report-table th:first-child,#report-table td:first-child{text-align:left;position:sticky;left:0;background:var(--catbg);z-index:1;white-space:nowrap}
#report-table thead th{position:sticky;top:0;background:var(--card);z-index:2;cursor:pointer;user-select:none}
#report-table thead th:hover{color:var(--acc)}
#report-table thead th:first-child{z-index:3}
/* Shift-name headers can be long - wrap onto two lines and cap the column
   at roughly half of what the unwrapped label would need, so one long
   shift name doesn't blow every column out to its width. */
#report-table thead th:not(:first-child){white-space:normal;max-width:8ch;line-height:1.2;vertical-align:bottom}
#report-table thead th .sort-ind{font-size:10px;color:var(--acc)}
#report-table tr.tot td,#report-table tr.tot th{background:var(--catbg);font-weight:600}
#rep-export{display:flex;gap:6px}

/* ---------- keyboard focus ---------- */
th.p:focus-visible,td.c.on:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--acc);outline-offset:-1px}

/* ---------- phone widths ---------- */
@media (max-width:640px){
  body{font-size:15px}
  .htop{gap:10px}
  #views{margin-left:0;width:100%;overflow-x:auto;flex-wrap:nowrap}
  #settings-btn{margin-left:0}
  #toolbar{flex-direction:column;align-items:stretch;gap:8px}
  #toolbar label{justify-content:space-between}
  #summary{margin-left:0}
  #export{width:100%}
  #export button{flex:1}
  .viewbar strong{min-width:0;flex:1}
  .viewbar input[type=search]{width:100%}
  #matrix,#week,#report-table,#together{max-height:calc(100vh - 320px)}
  .report-layout{flex-direction:column}
  .report-side{flex:0 0 auto;width:100%}
  #person{scroll-snap-type:x mandatory}
  .pcol{flex:0 0 92vw;width:92vw}
  #settings,#rep-wizard{width:calc(100vw - 24px)}
}

/* ---------- PDF export: the browser's own print-to-PDF, no library ---------- */
@media print{
  header,#drop,#messages,#toolbar,#tip,#daytip,#settings,#settings-backdrop,#report-notice,.report-side,#rep-export{display:none!important}
  body{background:#fff;color:#000}
  #matrix{max-height:none;overflow:visible;border:0;margin:0;box-shadow:none}
  thead th{position:static}
  tr.tot th{position:static}
  .report-layout{display:block}
  #report-table{max-height:none;overflow:visible;border:0;margin:0}
  #report-table th,#report-table td{position:static}
  @page{size:landscape;margin:10mm}
}