/* Store Roster — one stylesheet, no framework. */
:root{
  --paper:#F4F6F8; --surface:#FFFFFF; --surface-2:#EDF0F4;
  --line:#D6DCE4; --line-soft:#E4E9EF;
  --ink:#131E28; --ink-2:#465563; --ink-3:#77848F;
  --accent:#17556E; --accent-soft:#E3EDF2; --accent-ink:#0E3A4C;

  --pre-bg:#E5EEDF;  --pre-ink:#3C5730;  --pre-edge:#6C8D57;
  --early-bg:#FBEEDA;--early-ink:#7A4708;--early-edge:#C98A21;
  --mid-bg:#DDF0F1;  --mid-ink:#0B565E;  --mid-edge:#2E8D95;
  --late-bg:#F5E4EC; --late-ink:#6E2F4C; --late-edge:#A55B7D;
  --leave-bg:#F7E3DF;--leave-ink:#8E3A2A;--leave-edge:#BE6754;

  --good:#2C6B4F; --warn:#8A5A0B; --crit:#9B3325;
  --r:10px; --r-sm:6px;
  --shadow:0 1px 2px rgba(19,30,40,.06), 0 8px 24px -12px rgba(19,30,40,.18);
  --shadow-lg:0 24px 60px -24px rgba(19,30,40,.45);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0D141B; --surface:#151F29; --surface-2:#1D2A36;
    --line:#2A3A48; --line-soft:#233140;
    --ink:#E6ECF2; --ink-2:#A3B2C0; --ink-3:#75858F;
    --accent:#6FB6D4; --accent-soft:#1B3441; --accent-ink:#A9D6E8;
    --pre-bg:#22301B;  --pre-ink:#A9C795;  --pre-edge:#5C7A48;
    --early-bg:#3B2D14;--early-ink:#E8BE7A;--early-edge:#96702B;
    --mid-bg:#123338;  --mid-ink:#8CD3D9;  --mid-edge:#2E7C84;
    --late-bg:#39202C; --late-ink:#DDA3BE; --late-edge:#8B4E6C;
    --leave-bg:#3A2019;--leave-ink:#E0A395;--leave-edge:#96503E;
    --good:#69B08D; --warn:#D2A45B; --crit:#E08476;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
    --shadow-lg:0 24px 60px -24px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --paper:#0D141B; --surface:#151F29; --surface-2:#1D2A36;
  --line:#2A3A48; --line-soft:#233140;
  --ink:#E6ECF2; --ink-2:#A3B2C0; --ink-3:#75858F;
  --accent:#6FB6D4; --accent-soft:#1B3441; --accent-ink:#A9D6E8;
  --pre-bg:#22301B;  --pre-ink:#A9C795;  --pre-edge:#5C7A48;
  --early-bg:#3B2D14;--early-ink:#E8BE7A;--early-edge:#96702B;
  --mid-bg:#123338;  --mid-ink:#8CD3D9;  --mid-edge:#2E7C84;
  --late-bg:#39202C; --late-ink:#DDA3BE; --late-edge:#8B4E6C;
  --leave-bg:#3A2019;--leave-ink:#E0A395;--leave-edge:#96503E;
  --good:#69B08D; --warn:#D2A45B; --crit:#E08476;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-lg:0 24px 60px -24px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:"Archivo", ui-sans-serif, system-ui, sans-serif; margin:0; text-wrap:balance; letter-spacing:-.01em}
button{font:inherit; color:inherit; cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
.mono{font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric:tabular-nums}
.eyebrow{font-family:"Archivo",sans-serif; font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.hidden{display:none !important}

/* LOGIN */
#login{min-height:100vh; display:grid; place-items:center; padding:24px}
.login-card{width:100%; max-width:960px; background:var(--surface); border:1px solid var(--line);
  border-radius:16px; box-shadow:var(--shadow); overflow:hidden; display:grid; grid-template-columns:1.05fr .95fr}
@media (max-width:840px){ .login-card{grid-template-columns:1fr} .login-aside{display:none} }
.login-aside{background:#17556E; color:#fff; padding:36px 32px; display:flex; flex-direction:column; gap:20px;
  background-image:radial-gradient(circle at 88% 8%, rgba(255,255,255,.14), transparent 42%)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .login-aside{background:#123B4C}}
:root[data-theme="dark"] .login-aside{background:#123B4C}
.login-aside .eyebrow{color:rgba(255,255,255,.72)}
.login-aside h1{font-size:31px; font-weight:800; line-height:1.12; color:#fff}
.login-aside p{margin:0; font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.82); max-width:34ch}
.demo-list{display:flex; flex-direction:column; gap:7px; margin-top:auto}
.demo-btn{display:flex; align-items:center; gap:12px; text-align:left; width:100%;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.20);
  border-radius:var(--r); padding:9px 12px; color:#fff; transition:background .15s}
.demo-btn:hover{background:rgba(255,255,255,.19)}
.demo-btn b{display:block; font-family:"Archivo",sans-serif; font-size:13px; font-weight:600}
.demo-btn span{font-size:11.5px; color:rgba(255,255,255,.72)}
.demo-btn .mono{font-size:12px; color:rgba(255,255,255,.9); margin-left:auto}
.login-main{padding:36px 32px; display:flex; flex-direction:column; gap:16px}
.login-main h2{font-size:21px; font-weight:700}
.login-main .sub{color:var(--ink-2); font-size:13.5px; margin:-8px 0 0}
.field label{display:block; margin-bottom:5px}
.field input{width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface-2); color:var(--ink); font-family:"IBM Plex Mono",monospace; font-size:17px; letter-spacing:.08em}
.field input::placeholder{color:var(--ink-3); letter-spacing:.02em}
.field input:focus{outline:none; border-color:var(--accent); background:var(--surface)}
.keypad{display:grid; grid-template-columns:repeat(3,1fr); gap:7px}
.keypad button{padding:12px 0; background:var(--surface-2); border:1px solid var(--line-soft);
  border-radius:var(--r-sm); font-family:"IBM Plex Mono",monospace; font-size:17px; font-weight:500}
.keypad button:hover{background:var(--accent-soft); border-color:var(--accent)}
.keypad button.util{font-family:"IBM Plex Sans",sans-serif; font-size:12.5px; font-weight:600; color:var(--ink-2)}
.btn-primary{padding:12px 18px; background:var(--accent); color:#fff; border:none; border-radius:var(--r);
  font-family:"Archivo",sans-serif; font-weight:600; font-size:14.5px; width:100%}
:root[data-theme="dark"] .btn-primary{color:#08222D}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn-primary{color:#08222D}}
.btn-primary:hover{filter:brightness(1.08)}
.err{color:var(--crit); font-size:13px; min-height:18px; margin:0}

/* SHELL */
#app{min-height:100vh; display:flex; flex-direction:column}
.topbar{background:var(--surface); border-bottom:1px solid var(--line); padding:10px 18px;
  display:flex; align-items:center; gap:13px; flex-wrap:wrap; position:sticky; top:0; z-index:20}
.brand{display:flex; align-items:center; gap:9px; font-family:"Archivo",sans-serif; font-weight:800; font-size:15px; letter-spacing:-.02em}
.brand .dot{width:9px; height:9px; border-radius:2px; background:var(--accent)}
.spacer{flex:1}
.who{display:flex; align-items:center; gap:9px; padding-left:13px; border-left:1px solid var(--line)}
.avatar{width:31px; height:31px; border-radius:50%; background:var(--accent-soft); color:var(--accent-ink);
  display:grid; place-items:center; font-family:"Archivo",sans-serif; font-weight:700; font-size:11.5px}
.who b{display:block; font-size:13px; font-family:"Archivo",sans-serif; font-weight:600; line-height:1.25}
.who span{font-size:11px; color:var(--ink-3)}
.link-btn{background:none; border:none; color:var(--ink-3); font-size:12px; text-decoration:underline; padding:0}
.link-btn:hover{color:var(--ink)}
select.sel{padding:7px 11px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface-2); color:var(--ink); font-family:"Archivo",sans-serif; font-weight:600; font-size:13px}
.tabs{display:flex; background:var(--surface-2); border:1px solid var(--line-soft); border-radius:var(--r-sm); padding:2px; gap:2px}
.tabs button{padding:6px 12px; border:none; background:none; border-radius:4px;
  font-family:"Archivo",sans-serif; font-weight:600; font-size:12.5px; color:var(--ink-2); display:flex; align-items:center; gap:6px}
.tabs button[aria-pressed="true"]{background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.08)}
.badge{background:var(--crit); color:#fff; border-radius:20px; font-size:10px; font-weight:700;
  min-width:16px; height:16px; padding:0 5px; display:grid; place-items:center; font-family:"IBM Plex Mono",monospace}
.btn{padding:7px 13px; border:1px solid var(--line); background:var(--surface); border-radius:var(--r-sm);
  font-family:"Archivo",sans-serif; font-weight:600; font-size:12.5px; display:inline-flex; align-items:center; gap:6px}
.btn:hover{border-color:var(--accent); color:var(--accent-ink)}
.btn.solid{background:var(--accent); border-color:var(--accent); color:#fff}
:root[data-theme="dark"] .btn.solid{color:#08222D}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn.solid{color:#08222D}}
.btn.solid:hover{filter:brightness(1.08)}
.btn.danger:hover{border-color:var(--crit); color:var(--crit)}
.btn.sm{padding:4px 9px; font-size:11.5px}
main{flex:1; padding:18px; max-width:1440px; width:100%; margin:0 auto; display:flex; flex-direction:column; gap:14px}

.syncbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--accent-soft);
  border:1px solid var(--line-soft); border-radius:var(--r); padding:9px 13px; font-size:12.5px; color:var(--accent-ink)}
.syncbar .pulse{width:7px; height:7px; border-radius:50%; background:var(--good); flex:none}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)}
.panel-head{padding:13px 16px; border-bottom:1px solid var(--line-soft); display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.panel-head h2{font-size:16px; font-weight:700}
.panel-head .sub{font-size:12px; color:var(--ink-3); margin:0}
.navmonth{display:flex; align-items:center; gap:4px}
.navmonth button{width:29px; height:29px; border:1px solid var(--line); background:var(--surface);
  border-radius:var(--r-sm); display:grid; place-items:center; font-size:13px; color:var(--ink-2)}
.navmonth button:hover{border-color:var(--accent); color:var(--accent-ink)}
.navmonth .label{font-family:"Archivo",sans-serif; font-weight:700; font-size:14.5px; min-width:172px; text-align:center}

/* MONTH */
.month{display:grid; grid-template-columns:repeat(7,1fr)}
.dow{padding:7px 9px; font-family:"Archivo",sans-serif; font-size:10.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); border-bottom:1px solid var(--line-soft); background:var(--surface-2)}
.day{min-height:106px; border-right:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  padding:6px; display:flex; flex-direction:column; gap:4px; background:var(--surface); text-align:left; width:100%;
  border-top:none; border-left:none}
.day:nth-child(7n){border-right:none}
.day.out{background:var(--surface-2); color:var(--ink-3)}
.day:hover{background:var(--accent-soft)}
.day.today{box-shadow:inset 0 0 0 2px var(--accent)}
.daynum{font-family:"IBM Plex Mono",monospace; font-size:12px; font-weight:500; color:var(--ink-2); font-variant-numeric:tabular-nums}
.day.today .daynum{color:var(--accent-ink); font-weight:600}

.chip{border-radius:var(--r-sm); padding:4px 6px; font-size:11.5px; line-height:1.25; border-left:3px solid;
  display:flex; flex-direction:column; gap:1px; text-align:left; width:100%;
  border-top:none; border-right:none; border-bottom:none; background:var(--surface-2)}
.chip b{font-family:"Archivo",sans-serif; font-weight:600; font-size:11px; letter-spacing:.02em}
.chip .t{font-family:"IBM Plex Mono",monospace; font-size:10.5px; opacity:.9; font-variant-numeric:tabular-nums}
.chip .brk{font-family:"IBM Plex Mono",monospace; font-size:9.5px; opacity:.72}
.chip.pre{background:var(--pre-bg); color:var(--pre-ink); border-color:var(--pre-edge)}
.chip.early{background:var(--early-bg); color:var(--early-ink); border-color:var(--early-edge)}
.chip.mid{background:var(--mid-bg); color:var(--mid-ink); border-color:var(--mid-edge)}
.chip.late{background:var(--late-bg); color:var(--late-ink); border-color:var(--late-edge)}
.chip.leave{background:var(--leave-bg); color:var(--leave-ink); border-color:var(--leave-edge);
  background-image:repeating-linear-gradient(135deg, transparent 0 5px, rgba(0,0,0,.045) 5px 10px)}
.chip .flag{font-size:9.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; opacity:.85}

/* ROSTER GRID */
.gridwrap{overflow-x:auto}
.roster{border-collapse:separate; border-spacing:0; width:100%; min-width:1020px}
.roster th, .roster td{border-bottom:1px solid var(--line-soft); border-right:1px solid var(--line-soft); padding:0}
.roster th:last-child, .roster td:last-child{border-right:none}
.roster thead th{background:var(--surface-2); padding:8px 10px; text-align:left; position:sticky; top:0; z-index:2}
.roster thead th .dnum{font-family:"Archivo",sans-serif; font-size:15px; font-weight:700; display:block; line-height:1.15}
.roster thead th .dname{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:700; font-family:"Archivo",sans-serif}
.roster thead th .hours{font-family:"IBM Plex Mono",monospace; font-size:10px; color:var(--ink-3); display:block; margin-top:1px}
.roster thead th.is-today{box-shadow:inset 0 2px 0 var(--accent)}
.roster thead th.is-today .dnum{color:var(--accent-ink)}
.roster th.namecol{width:196px; position:sticky; left:0; z-index:3}
.roster td.namecol{position:sticky; left:0; background:var(--surface); z-index:1; padding:8px 10px; width:196px}
.roster tbody tr:hover td{background:var(--surface-2)}
.person b{display:block; font-family:"Archivo",sans-serif; font-size:13px; font-weight:600; line-height:1.3}
.person span{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--ink-3)}
.person .hrs{float:right; font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--ink-2)}
.person .hrs.over{color:var(--crit); font-weight:600}
.cell{padding:5px; min-height:62px; display:flex; flex-direction:column; gap:4px}
.addcell{width:100%; border:1px dashed var(--line); background:none; border-radius:var(--r-sm);
  color:var(--ink-3); font-size:16px; padding:5px 0; opacity:0; transition:opacity .12s}
tr:hover .addcell{opacity:1}
.addcell:hover{border-color:var(--accent); color:var(--accent); background:var(--accent-soft)}
tfoot td{background:var(--surface-2); padding:7px 10px; font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--ink-2)}
tfoot td.namecol{font-family:"Archivo",sans-serif; font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.cov{display:flex; gap:3px; align-items:center}
.cov i{width:6px; height:6px; border-radius:1px; display:block; font-style:normal}
.cov.thin{color:var(--crit); font-weight:600}

.legend{display:flex; gap:14px; flex-wrap:wrap; align-items:center; font-size:11.5px; color:var(--ink-2);
  padding:11px 16px; border-top:1px solid var(--line-soft)}
.legend span{display:inline-flex; align-items:center; gap:5px}
.legend i{width:11px; height:11px; border-radius:2px; display:block; border-left:3px solid}

/* LISTS */
.rows{display:flex; flex-direction:column}
.row{display:grid; grid-template-columns:56px 1fr auto; gap:12px; align-items:center;
  padding:11px 16px; border-bottom:1px solid var(--line-soft)}
.row:last-child{border-bottom:none}
.row .date{text-align:center}
.row .date b{display:block; font-family:"Archivo",sans-serif; font-size:19px; font-weight:700; line-height:1}
.row .date span{font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-weight:700; font-family:"Archivo",sans-serif}
.row .what b{font-family:"Archivo",sans-serif; font-size:14px; font-weight:600; display:block}
.row .what span{font-size:12px; color:var(--ink-2); display:block}
.row .acts{display:flex; gap:6px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
.empty{padding:26px 16px; color:var(--ink-2); font-size:13.5px}

.tag{font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 7px; border-radius:20px; font-family:"Archivo",sans-serif; white-space:nowrap}
.tag.wait{background:var(--early-bg); color:var(--early-ink)}
.tag.ok{background:var(--pre-bg); color:var(--pre-ink)}
.tag.no{background:var(--leave-bg); color:var(--leave-ink)}
.tag.sp{background:var(--accent-soft); color:var(--accent-ink)}

.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(152px,1fr)); gap:1px; background:var(--line-soft)}
.stat{background:var(--surface); padding:13px 16px}
.stat b{display:block; font-family:"Archivo",sans-serif; font-size:23px; font-weight:700; line-height:1.15; font-variant-numeric:tabular-nums}
.stat span{font-size:11px; color:var(--ink-3); letter-spacing:.06em; text-transform:uppercase; font-weight:700; font-family:"Archivo",sans-serif}
.stat .note{font-size:11.5px; color:var(--ink-2); text-transform:none; letter-spacing:0; font-family:"IBM Plex Sans",sans-serif; font-weight:400}

/* SHEETS */
.scrim{position:fixed; inset:0; background:rgba(10,18,25,.5); backdrop-filter:blur(2px);
  display:grid; place-items:center; padding:18px; z-index:60}
.sheet{background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-lg);
  width:100%; max-width:540px; max-height:88vh; overflow:auto}
.sheet.wide{max-width:820px}
.sheet-head{padding:16px 18px 12px; border-bottom:1px solid var(--line-soft); display:flex; align-items:flex-start; gap:12px}
.sheet-head h3{font-size:17px; font-weight:700}
.sheet-head p{margin:2px 0 0; font-size:12.5px; color:var(--ink-2)}
.sheet-body{padding:16px 18px; display:flex; flex-direction:column; gap:14px}
.sheet-foot{padding:13px 18px; border-top:1px solid var(--line-soft); display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap}
.x{margin-left:auto; width:28px; height:28px; border:1px solid var(--line); background:var(--surface); border-radius:var(--r-sm); flex:none}
.optgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:8px}
.optbtn{padding:10px 11px; border-radius:var(--r); border:1.5px solid var(--line); background:var(--surface);
  text-align:left; display:flex; flex-direction:column; gap:1px}
.optbtn b{font-family:"Archivo",sans-serif; font-size:13px; font-weight:600}
.optbtn span{font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--ink-2)}
.optbtn[aria-pressed="true"]{border-color:var(--accent); background:var(--accent-soft)}
textarea, input.txt{width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface-2); color:var(--ink); font:inherit; font-size:13.5px; resize:vertical}
input.tm{font-family:"IBM Plex Mono",monospace; letter-spacing:.05em}
textarea:focus, input.txt:focus{outline:none; border-color:var(--accent); background:var(--surface)}
.inline{display:grid; grid-template-columns:repeat(3,1fr); gap:9px}
.dropzone{border:1.5px dashed var(--line); border-radius:var(--r); padding:24px 18px; text-align:center;
  background:var(--surface-2); display:flex; flex-direction:column; gap:6px; align-items:center; width:100%}
.dropzone:hover{border-color:var(--accent); background:var(--accent-soft)}
.dropzone b{font-family:"Archivo",sans-serif; font-size:14px; font-weight:600}
.dropzone span{font-size:12px; color:var(--ink-2)}
.difftable{width:100%; border-collapse:collapse; font-size:12.5px}
.difftable th{text-align:left; padding:7px 9px; background:var(--surface-2); border-bottom:1px solid var(--line);
  font-family:"Archivo",sans-serif; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.difftable td{padding:7px 9px; border-bottom:1px solid var(--line-soft); vertical-align:top}
.difftable tr.bad td{background:var(--leave-bg)}
.dot-s{display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px}
.maprow{display:grid; grid-template-columns:1fr 22px 1fr; gap:9px; align-items:center}
.maprow .arrow{text-align:center; color:var(--ink-3)}
.maprow .src{font-family:"IBM Plex Mono",monospace; font-size:12.5px; background:var(--surface-2);
  border:1px solid var(--line-soft); border-radius:var(--r-sm); padding:8px 10px}

/* NOTIFICATION PREVIEW */
.notif{border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden}
.notif-head{background:var(--surface-2); padding:7px 11px; display:flex; align-items:center; gap:8px;
  font-family:"Archivo",sans-serif; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.notif-body{padding:11px; font-size:12.5px; line-height:1.55; color:var(--ink-2)}
.notif-body .to{font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--ink-3); display:block; margin-bottom:5px}
.notif-body .msg{background:var(--surface-2); border-radius:var(--r-sm); padding:9px 11px; color:var(--ink)}

.toast{position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--ink); color:var(--paper);
  padding:11px 17px; border-radius:var(--r); font-size:13px; box-shadow:var(--shadow-lg); z-index:90;
  font-family:"Archivo",sans-serif; font-weight:500; max-width:min(560px,92vw); text-align:center}
.banner{background:#17556E; color:#fff; padding:9px 14px; border-radius:var(--r); font-size:13px;
  display:flex; align-items:center; gap:10px; font-family:"Archivo",sans-serif; font-weight:600}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .banner{background:#123B4C; color:#DCEEF5}}
:root[data-theme="dark"] .banner{background:#123B4C; color:#DCEEF5}
.banner .btn{background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.3); color:#fff}
.banner .btn:hover{background:rgba(255,255,255,.28); color:#fff}

@media (prefers-reduced-motion: reduce){*{transition:none !important; animation:none !important}}
@media (max-width:640px){
  main{padding:12px}
  .day{min-height:76px; padding:4px}
  .chip .brk{display:none}
  .topbar{padding:9px 12px; gap:9px}
  .who span{display:none}
  .navmonth .label{min-width:116px; font-size:13px}
  .optgrid, .inline{grid-template-columns:1fr}
  .row{grid-template-columns:48px 1fr; row-gap:8px}
  .row .acts{grid-column:1/-1; justify-content:flex-start}
}

/* Staff screen: a checkbox that reads as a sentence, and the group headings
   that break the list up by store. */
.chk{display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--ink-2); cursor:pointer}
.chk input{width:16px; height:16px; accent-color:var(--accent); cursor:pointer}
.panel > .eyebrow{padding:14px 18px 6px; border-top:1px solid var(--line)}
.panel > .eyebrow:first-of-type{border-top:0}

/* A note that needs acting on, not just reading — used where an import is held
   back because the people it names are not on the staff list yet. */
.callout{border:1px solid var(--warn); background:color-mix(in srgb, var(--warn) 8%, transparent);
         border-radius:var(--r); padding:12px 14px; display:flex; flex-direction:column; gap:4px}
.callout b{font-size:13.5px}
.callout span{font-size:12.5px; color:var(--ink-2); line-height:1.55}