:root{
  --bg:#F6F4EF; --surface:#FFFFFF; --surface-2:#EFEAE0; --text:#1C1A15; --text-muted:#6C6558;
  --border:#E2DCCD; --gold:#9C7A2E; --gold-deep:#7A5F22; --gold-soft:#F0E4C4; --ink:#15130F;
  --urgent:#B8402C; --urgent-soft:#F7E1DC; --warn:#C1791F; --warn-soft:#F4E4C8;
  --good:#3E7A54; --good-soft:#DEEBE1;
  --font-body:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono","SF Mono",Consolas,monospace;
  --font-mast:"Source Serif 4",Georgia,serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#14120E; --surface:#1C1A15; --surface-2:#24211A; --text:#F1EDE2; --text-muted:#A39C89;
    --border:#332E23; --gold:#D3AF5C; --gold-deep:#E7C878; --gold-soft:#3A2F17; --ink:#0B0A07;
    --urgent:#FF7A5C; --urgent-soft:#3A211B; --warn:#E3A94F; --warn-soft:#362C17;
    --good:#6FBF8B; --good-soft:#1B2E20;
  }
}
:root[data-theme="dark"]{
  --bg:#14120E; --surface:#1C1A15; --surface-2:#24211A; --text:#F1EDE2; --text-muted:#A39C89;
  --border:#332E23; --gold:#D3AF5C; --gold-deep:#E7C878; --gold-soft:#3A2F17; --ink:#0B0A07;
  --urgent:#FF7A5C; --urgent-soft:#3A211B; --warn:#E3A94F; --warn-soft:#362C17;
  --good:#6FBF8B; --good-soft:#1B2E20;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;}
body{background:var(--bg); color:var(--text); font-family:var(--font-body); line-height:1.5;}
button{font-family:inherit; cursor:pointer;}
a{color:var(--gold-deep);}
.app{max-width:460px; margin:0 auto; min-height:100%; display:flex; flex-direction:column;}
.app.wide{max-width:960px;}

.mast{
  background:var(--ink); border-bottom:3px solid var(--gold); color:var(--gold-soft);
  padding:10px 18px; padding-top:max(10px, env(safe-area-inset-top,0px));
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.mast .mw{font-family:var(--font-mast); font-size:12.5px; letter-spacing:.04em; text-transform:uppercase;}
.mast .mw b{color:var(--gold);}
.mast .mtag{font-family:var(--font-mono); font-size:10px; color:#B8B2A2; text-transform:uppercase;}
.mast a{color:inherit; text-decoration:none;}

.note{font-size:12px; color:var(--text-muted); background:var(--surface-2); text-align:center; padding:7px 16px; border-bottom:1px solid var(--border);}

.tabs{display:flex; gap:8px; padding:14px 16px 4px;}
.tab{flex:1; text-align:center; padding:12px 8px; min-height:46px; border-radius:10px; border:1.5px solid var(--border);
  background:var(--surface); font-size:14.5px; font-weight:600; color:var(--text-muted); text-decoration:none;
  display:flex; align-items:center; justify-content:center; transition:background .15s,color .15s,border-color .15s;}
.tab.active{background:var(--ink); color:var(--gold-soft); border-color:var(--ink);}
.tab:active{transform:scale(.98);}

main{padding:16px; display:flex; flex-direction:column; gap:20px; flex:1;}
section{display:flex; flex-direction:column; gap:10px;}
.sec-title{font-family:var(--font-mono); font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--text-muted); display:flex; justify-content:space-between; align-items:baseline;}
.sec-title .count{background:var(--surface-2); padding:1px 7px; border-radius:999px; font-weight:600;}

.card{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px; display:flex; flex-direction:column; gap:14px;}
.field label{display:block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); margin-bottom:6px;}
.field input[type=text], .field input[type=tel], .field input[type=number]{
  width:100%; font-family:var(--font-mono); font-size:15px; padding:12px; border-radius:10px;
  border:1.5px solid var(--border); background:var(--surface-2); color:var(--text);
}
select.loc-select{
  width:100%; font-family:var(--font-mono); font-size:15px; padding:12px; border-radius:10px;
  border:1.5px solid var(--border); background:var(--surface-2); color:var(--text); appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),linear-gradient(135deg,var(--text-muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) center,calc(100% - 14px) center; background-size:6px 6px; background-repeat:no-repeat;
}
.task-grid{display:grid; grid-template-columns:1fr 1fr; gap:9px;}
.task-btn{min-height:52px; padding:10px; border-radius:11px; border:1.5px solid var(--border); background:var(--surface);
  font-size:14px; font-weight:600; text-align:left; color:var(--text); transition:all .12s;}
.task-btn.sel{border-color:var(--gold); background:var(--gold-soft); color:var(--gold-deep);}
.task-btn:active{transform:scale(.97);}
.btn-primary{min-height:50px; border:none; border-radius:11px; background:var(--gold); color:var(--ink);
  font-size:15.5px; font-weight:700; transition:transform .12s,opacity .12s; width:100%;}
.btn-primary:active{transform:scale(.97); opacity:.9;}
.btn-primary:disabled{opacity:.4;}
.btn-ghost{min-height:44px; border:1.5px solid var(--border); background:var(--surface); color:var(--text);
  border-radius:11px; font-size:14px; font-weight:600;}

.req-row{display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px; border:1.5px solid var(--border); background:var(--surface); margin-bottom:8px;}
.req-row .bed{font-family:var(--font-mono); font-weight:700; font-size:14.5px; min-width:56px;}
.req-row .rinfo{flex:1; min-width:0;}
.req-row .rtask{font-size:13.5px; font-weight:600; display:flex; align-items:center; gap:6px; flex-wrap:wrap; row-gap:3px;}
.req-row .rtime{font-family:var(--font-mono); font-size:12px; color:var(--text-muted); font-variant-numeric:tabular-nums; margin-top:1px;}
.req-row.st-urgent{border-color:var(--urgent);}
.req-row.st-urgent .rtime{color:var(--urgent); font-weight:700;}
.req-row.st-warn .rtime{color:var(--warn); font-weight:700;}
.req-row.st-quiet{opacity:.75;}
.tag{font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.04em; padding:2px 6px; border-radius:5px; background:var(--gold-soft); color:var(--gold-deep); white-space:nowrap;}

.action-btn{flex-shrink:0; min-width:44px; min-height:44px; padding:0 14px; border-radius:10px; font-size:13px; font-weight:700;
  display:flex; align-items:center; justify-content:center; transition:transform .12s;}
.action-btn:active{transform:scale(.94);}
.claim-btn{border:1.5px solid var(--gold-deep); background:transparent; color:var(--gold-deep);}
.done-btn{border:none; background:var(--gold); color:var(--ink);}
.remove-btn{border:1.5px solid var(--border); background:var(--surface); color:var(--text-muted); font-size:18px; min-width:44px; padding:0;}

.shift-row{display:flex; align-items:center; justify-content:space-between; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:12px 14px;}
.shift-row .who{font-size:13.5px; font-weight:600;}
.shift-row .who span{display:block; font-family:var(--font-mono); font-size:11px; color:var(--text-muted); font-weight:400; margin-top:1px;}
.switch{width:46px; height:27px; border-radius:999px; background:var(--border); position:relative; transition:background .15s; flex-shrink:0; border:none;}
.switch::after{content:""; position:absolute; top:3px; left:3px; width:21px; height:21px; border-radius:50%; background:var(--surface); box-shadow:0 1px 2px rgba(0,0,0,.25); transition:transform .15s;}
.switch.on{background:var(--good);}
.switch.on::after{transform:translateX(19px);}

.empty{text-align:center; padding:22px 10px; color:var(--text-muted); font-size:13px; border:1.5px dashed var(--border); border-radius:12px;}
.banner{display:flex; gap:10px; align-items:flex-start; background:var(--urgent-soft); color:var(--urgent); border-radius:11px; padding:11px 13px; font-size:13px; font-weight:500;}
.error-banner{background:var(--urgent-soft); color:var(--urgent); border-radius:11px; padding:11px 13px; font-size:13px;}

footer{padding:18px 16px 24px; padding-bottom:max(18px, env(safe-area-inset-bottom,0px)); text-align:center; font-family:var(--font-mono); font-size:11px; color:var(--text-muted);}
[hidden]{display:none !important;}

/* admin */
.admin-tabs{display:flex; gap:4px; border-bottom:1px solid var(--border);}
.admin-tab{font-size:13px; font-weight:600; padding:10px 6px; color:var(--text-muted); border-bottom:2px solid transparent; background:none; border-top:none; border-left:none; border-right:none;}
.admin-tab.active{color:var(--gold-deep); border-color:var(--gold);}
.admin-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:700px){ .admin-grid{grid-template-columns:1fr;} }
.thresh-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 0; font-size:13px; border-bottom:1px dashed var(--border);}
.thresh-row:last-child{border-bottom:none;}
.thresh-row input{width:70px; font-family:var(--font-mono); background:var(--surface-2); border:1px solid var(--border); border-radius:5px; padding:4px 6px; text-align:right;}
.chip-row{display:flex; flex-wrap:wrap; gap:6px;}
.chip-sm{font-family:var(--font-mono); font-size:11.5px; padding:4px 9px; border-radius:6px; background:var(--surface-2); border:1px solid var(--border); display:inline-flex; align-items:center; gap:6px;}
.chip-sm button{border:none; background:none; color:var(--text-muted); font-size:13px; padding:0; line-height:1;}
.lock-badge{display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--gold-deep); background:var(--gold-soft); padding:3px 8px; border-radius:999px;}

/* workroom display (always dark, regardless of viewer theme — see README) */
.board{background:#0C0F0D; min-height:100%; color:#EDEAE0; display:flex; flex-direction:column;}
.board-top{display:flex; justify-content:space-between; align-items:baseline; padding:18px 24px; border-bottom:1px solid #2A2E29;}
.board-top .btitle{font-family:var(--font-mast); font-size:20px; letter-spacing:.06em; color:#D3AF5C; text-transform:uppercase;}
.board-top .bclock{font-family:var(--font-mono); font-size:18px; color:#8B9188; font-variant-numeric:tabular-nums;}
.board-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; padding:24px; flex:1; align-content:start;}
.board-tile{border-radius:12px; padding:16px 18px; display:flex; flex-direction:column; gap:6px; border:2px solid #2A2E29; background:#12160F;}
.board-tile .tbed{font-family:var(--font-mono); font-weight:700; font-size:30px; color:#EDEAE0;}
.board-tile .ttask{font-size:13px; color:#9AA096; text-transform:uppercase; letter-spacing:.05em;}
.board-tile .ttime{font-family:var(--font-mono); font-size:20px; font-variant-numeric:tabular-nums; font-weight:600;}
.board-tile .tclaim{font-family:var(--font-mono); font-size:11px; color:#9AA096;}
.board-tile.good .ttime{color:#7FCB98;}
.board-tile.warn{border-color:#C1791F;}
.board-tile.warn .ttime{color:#E3A94F;}
.board-tile.urgent{border-color:#FF6B52; background:#241210; animation:pulse 1.6s ease-in-out infinite;}
.board-tile.urgent .ttime{color:#FF7A5C; font-weight:700;}
.board-tile.quiet{opacity:.55; border-style:dashed;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,107,82,0);} 50%{box-shadow:0 0 0 5px rgba(255,107,82,.28);}}
@media (prefers-reduced-motion: reduce){ .board-tile.urgent{animation:none;} }

/* Free-text comment on a request (e.g. "No students", "prefers female providers"),
   and the PIV two-attempts confirmation checkbox. */
.field textarea{
  width:100%; font-family:var(--font-mono); font-size:14px; padding:12px; border-radius:10px;
  border:1.5px solid var(--border); background:var(--surface-2); color:var(--text); resize:vertical;
}
.checkbox-field{display:flex; align-items:flex-start; gap:10px; padding:12px; border-radius:10px;
  border:1.5px solid var(--warn, var(--border)); background:var(--surface-2);}
.checkbox-field input[type=checkbox]{width:20px; height:20px; margin-top:1px; flex-shrink:0;}
.checkbox-field label{font-size:13.5px; font-weight:600; color:var(--text); text-transform:none;
  letter-spacing:normal; font-family:inherit; margin-bottom:0;}
.req-row .rcomment{font-size:12px; color:var(--text-muted); font-style:italic; margin-top:2px;}
.board-tile .tcomment{font-size:11px; color:#8B9188; font-style:italic; display:block; margin-top:2px;}
.req-row .rclock{font-weight:400; color:var(--text-muted); opacity:0.8;}
.board-tile .tclock{font-family:var(--font-mono); font-size:11px; color:#8B9188; display:block; margin-top:-2px;}